.ko-profile-menu { animation:none; transform-origin:top right; background:#1b1b1e; border-color:#48484c; }
.ko-profile-menu :is(a,button) { display:flex; align-items:center; gap:12px; }
.ko-profile-menu svg { flex:none; width:20px; height:20px; color:#c9c9cf; }
.ko-profile-menu :is(a,button):focus-visible,.ko-playful-logo:focus-visible { outline:2px solid #ececf0; outline-offset:3px; }
.ko-playful-logo { display:inline-grid; place-items:center; position:relative; flex:none; width:44px; height:44px; padding:0; border:0; background:transparent; border-radius:12px; touch-action:none; user-select:none; cursor:grab; }
.ko-playful-logo:active { cursor:grabbing; }
.ko-playful-logo img { width:44px; height:44px; object-fit:contain; pointer-events:none; }
.ko-floating-logo { position:fixed; left:0; top:0; object-fit:contain; pointer-events:none; z-index:120; will-change:transform; user-select:none; }
.ko-logout-scene { border:0; padding:20px; margin:0; inset:0; width:100%; max-width:none; height:100%; height:100dvh; max-height:none; background:transparent; color:#f4f4f5; overflow:auto; overscroll-behavior:contain; }
.ko-logout-scene[open] { display:grid; place-items:center; }
.ko-logout-scene::backdrop { background:#050506b8; backdrop-filter:blur(5px) saturate(.5); }
.ko-logout-card { position:relative; width:min(100%,380px); border:1px solid #46464a; border-radius:24px; padding:26px 24px 24px; background:radial-gradient(ellipse at 50% 0,#303033 0,transparent 70%),#19191c; box-shadow:0 32px 100px #0009; text-align:center; }
.ko-logout-card h2 { margin:18px 0 24px; font-size:24px; line-height:1.25; font-weight:650; letter-spacing:-.025em; }
.ko-logout-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ko-logout-actions button { min-height:46px; padding:10px 12px; font-size:15px; font-weight:600; border-radius:12px; border:1px solid #626267; color:#f4f4f5; background:#363639; transition:background .14s,border-color .14s; }
.ko-logout-actions button:hover { background:#454549; }
.ko-logout-actions [data-confirm] { background:#242427; border-color:#55555a; }
.ko-logout-actions [data-confirm]:hover { background:#383132; border-color:#aa7c7c; }
.ko-logout-actions button:focus-visible { outline:2px solid #ececf0; outline-offset:3px; }
.ko-exit-art { position:relative; height:118px; width:120px; margin:0 auto; perspective:360px; }
.ko-exit-light { position:absolute; top:4px; left:32px; width:56px; height:88px; background:#babac2; box-shadow:0 0 30px #d2d2e024; border:1px solid #8d8d95; }
.ko-exit-door { position:absolute; top:6px; left:34px; width:52px; height:84px; transform-origin:0 50%; transform:rotateY(-18deg); background:linear-gradient(110deg,#353538,#121214); border:1px solid #5a5a61; transition:transform .24s cubic-bezier(.2,.8,.2,1); }
.ko-exit-door::after { content:''; position:absolute; top:42px; right:6px; width:3px; height:8px; border-radius:2px; background:#afafb7; }
.ko-exit-floor { position:absolute; left:22px; top:93px; width:76px; height:22px; background:linear-gradient(#b2b2c02a,transparent); clip-path:polygon(14% 0,86% 0,100% 100%,0 100%); }
.ko-logout-card[data-hover=true] .ko-exit-door { transform:rotateY(-57deg); }
.ko-logout-trail { position:fixed; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.ko-logout-trail path { fill:none; stroke:#d7d7df; stroke-width:1.5; stroke-linecap:round; stroke-dasharray:.08 1; stroke-dashoffset:.08; animation:ko-trail .5s cubic-bezier(.2,.6,.3,1) both; }
.ko-logout-scene[data-motion=true] .ko-logout-card { animation:ko-exit-in .18s cubic-bezier(.2,.8,.2,1) both; }
.ko-logout-scene[data-leaving=true] .ko-logout-card { animation:ko-exit-out .14s ease-in both; pointer-events:none; }
.ko-logout-scene[data-leaving=true]::backdrop { background:#05050680; }
@keyframes ko-trail { 0%{opacity:0;stroke-dashoffset:.08} 12%{opacity:.7} 85%{opacity:.5} 100%{opacity:0;stroke-dashoffset:-1} }
@keyframes ko-exit-in { from{opacity:0;transform:translateY(6px) scale(.985)} to{opacity:1;transform:none} }
@keyframes ko-exit-out { from{opacity:1;transform:none} to{opacity:0;transform:translateY(4px) scale(.99)} }
@media(max-width:380px) { .ko-logout-card{padding:22px 18px}.ko-logout-card h2{font-size:22px} }
@media(prefers-reduced-motion:reduce) { .ko-logout-scene .ko-logout-card,.ko-logout-trail path{animation:none!important}.ko-exit-door{transition:none;transform:none!important}.ko-logout-scene::backdrop{backdrop-filter:none} }
