/* Liquid Glass design system: shared materials, concentric radius scale, and controls. */
* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; overflow:hidden; }
body { background:var(--bg-primary) var(--wallpaper) center/cover no-repeat; color:var(--text-primary); font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif; font-size:13px; -webkit-font-smoothing:antialiased; }
body::after { content:""; position:fixed; z-index:-1; inset:-25%; pointer-events:none; background:radial-gradient(circle at 12% 20%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 28%),radial-gradient(circle at 84% 14%, rgba(174,137,255,.18), transparent 30%),radial-gradient(circle at 50% 100%, rgba(67,190,255,.13), transparent 33%); filter:blur(24px); }
[data-theme="dark"] body::before { content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background:rgba(0,0,0,.18); }
#app { position:relative; z-index:1; display:flex; flex-direction:column; height:100%; }

#menubar { height:var(--menu-bar-height); flex:none; display:flex; align-items:center; padding:0 14px; color:var(--text-secondary); font-size:12px; user-select:none; -webkit-app-region:drag; background:var(--menu-bar-bg); border-bottom:1px solid color-mix(in srgb,var(--border) 70%,var(--glass-highlight)); backdrop-filter:saturate(150%) blur(28px); -webkit-backdrop-filter:saturate(150%) blur(28px); position:relative; z-index:10; }
#menubar > * { -webkit-app-region:no-drag; }
.menubar-left { flex:1; display:flex; align-items:center; gap:8px; }.menubar-left .app-name { color:var(--text-primary); font-weight:650; }.menubar-right { display:flex; align-items:center; gap:12px; }
#content { flex:1; display:flex; align-items:center; justify-content:center; padding:20px; overflow:visible; }
#panel { width:100%; max-width:640px; display:flex; flex-direction:column; align-items:center; }

.glass-window,.window-card { width:100%; max-width:1050px; aspect-ratio:16/9; max-height:calc(100vh - 28px - 68px - 40px); display:flex; flex-direction:column; overflow:hidden; border:1px solid color-mix(in srgb,var(--border) 70%,var(--glass-highlight)); border-radius:var(--card-radius); background:var(--card-bg); box-shadow:var(--card-shadow); backdrop-filter:saturate(145%) blur(var(--card-blur)); -webkit-backdrop-filter:saturate(145%) blur(var(--card-blur)); animation:cardFadeIn .42s cubic-bezier(.16,1,.3,1); }
.glass-window__header,.window-card-header { min-height:42px; flex:none; display:flex; align-items:center; gap:7px; padding:13px 18px 9px; cursor:default; }
.window-control,.window-card-header .dot { width:12px; height:12px; flex:none; border-radius:50%; padding:0; border:1px solid rgba(0,0,0,.16); }.window-control--close,.window-card-header .dot-red { background:#ff5f57; cursor:pointer; }.window-control--minimize,.window-card-header .dot-yellow { background:#febc2e; }.window-control--zoom,.window-card-header .dot-green { background:#28c840; }.window-control--close:hover,.window-card-header .dot:hover { filter:brightness(1.08); }
.glass-window__title,.window-card-header .card-title { margin-left:8px; color:var(--text-secondary); font-size:12px; font-weight:600; }.glass-window__body,.window-card-body { flex:1; overflow-y:auto; overscroll-behavior:contain; padding:8px 20px 20px; font-size:13px; line-height:1.5; }
.glass-window__body::-webkit-scrollbar,.window-card-body::-webkit-scrollbar,.glass-window__body *::-webkit-scrollbar,.window-card-body *::-webkit-scrollbar { display:none; width:0; }
.glass-window__body::-webkit-scrollbar,.window-card-body::-webkit-scrollbar,.glass-window__body *::-webkit-scrollbar,.window-card-body *::-webkit-scrollbar { width:6px; }.glass-window__body::-webkit-scrollbar-track,.window-card-body::-webkit-scrollbar-track { background:transparent; }.glass-window__body::-webkit-scrollbar-thumb,.window-card-body::-webkit-scrollbar-thumb { background:var(--border); border-radius:999px; }
@keyframes cardFadeIn { from { opacity:0; transform:translateY(14px) scale(.97); filter:blur(3px); } to { opacity:1; transform:none; filter:blur(0); } }
@keyframes cardFadeOut { to { opacity:0; transform:translateY(-10px) scale(.976); filter:blur(3px); } }
.glass-window--leaving { pointer-events:none; animation:cardFadeOut .36s cubic-bezier(.4,0,1,1) forwards; }

#dock { width:max-content; min-height:78px; align-self:center; flex:none; position:relative; z-index:10; display:inline-flex; align-items:flex-end; justify-content:center; gap:3px; padding:7px 8px 8px; margin:0 auto 5px; overflow:visible; border:0.4px solid rgba(255,255,255,.2); border-radius:16px; background:color-mix(in srgb,var(--bg-primary) 66%,transparent); box-shadow:0 0 36px color-mix(in srgb,#000 68%,transparent); backdrop-filter:blur(50px); -webkit-backdrop-filter:blur(50px); }
.dock-btn { width:56px; height:62px; flex:none; position:relative; display:grid; place-items:center; padding:0; border:0; border-radius:0; background:transparent; color:var(--text-secondary); cursor:pointer; transform:none!important; transition:color .18s; }
.dock-btn:hover { color:var(--text-primary); background:transparent; }
.dock-btn:active { transform:none!important; }
.dock-icon { width:50.4px; height:50.4px; display:grid; place-items:center; overflow:hidden; border-radius:12px; clip-path:inset(0 round 12px); transform:translateZ(0); transform-origin:center bottom; will-change:transform; }
.dock-icon__art { display:block; width:100%; height:100%; overflow:hidden; border-radius:inherit; clip-path:inset(0 round 12px); }
.dock-icon__art img,.dock-icon__art svg { display:block; width:100%; height:100%; max-width:100%; max-height:100%; border-radius:inherit; object-fit:contain; pointer-events:none; -webkit-user-drag:none; }
.dock-light { position:absolute; bottom:0; left:50%; width:4px; height:4px; border-radius:50%; background:color-mix(in srgb,var(--text-primary) 48%,transparent); opacity:0; transform:translateX(-50%); transition:opacity 160ms ease; }
.dock-btn.active .dock-light { opacity:.72; }
.dock-btn--visibility-enter .dock-icon__art { animation:dockItemAppear 240ms cubic-bezier(.16,1,.3,1) both; }
.dock-btn--visibility-leave { pointer-events:none; animation:dockItemDisappear 180ms cubic-bezier(.4,0,1,1) both; }
@keyframes dockItemAppear { from { opacity:0; transform:translateY(6px) scale(.82); } to { opacity:1; transform:none; } }
@keyframes dockItemDisappear { to { opacity:0; transform:translateY(5px) scale(.82); } }
.dock-separator { width:1px; height:42px; flex:none; align-self:center; margin:0 5px; background:color-mix(in srgb,var(--text-primary) 28%,transparent); border-radius:999px; }

input[type="text"],input[type="password"],input[type="number"],input[type="search"],select,textarea { width:100%; box-sizing:border-box; border:1px solid var(--border); border-radius:var(--radius-sm); outline:0; padding:8px 12px; color:var(--text-primary); background:var(--bg-tertiary); font:inherit; transition:border-color .15s,box-shadow .15s,background .15s; } input:focus,select:focus,textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent); } input::placeholder,textarea::placeholder { color:var(--text-secondary); opacity:.65; } input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; } input[type="number"] { -moz-appearance:textfield; } input[type="range"] { -webkit-appearance:none; appearance:none; height:4px; border-radius:999px; outline:0; cursor:pointer; background:var(--border); } input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; border:2px solid rgba(255,255,255,.8); border-radius:50%; background:var(--accent); }
button { border:0; border-radius:var(--radius-sm); cursor:pointer; font:inherit; transition:transform .15s,background-color .15s,box-shadow .15s,filter .15s; } button:active { transform:scale(.96); } button:disabled { opacity:.5; cursor:not-allowed; transform:none; }.btn-primary { padding:8px 20px; color:#fff; background-color:var(--accent); box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 30%,transparent),0 1px 0 rgba(255,255,255,.25) inset; }.btn-primary:hover { filter:brightness(1.08); box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 40%,transparent),0 1px 0 rgba(255,255,255,.3) inset; }.btn-danger { padding:8px 20px; color:#fff; background:var(--danger); }.btn-ghost { padding:6px 12px; color:var(--text-secondary); border:1px solid var(--border); background:var(--glass-raised); box-shadow:0 1px 0 var(--glass-highlight) inset; }.btn-ghost:hover { color:var(--text-primary); background:var(--bg-tertiary); }.empty-state { padding:40px 20px; color:var(--text-secondary); text-align:center; }

.glass-split-view { display:flex; min-height:0; height:100%; padding:10px; gap:10px; }.glass-sidebar { width:232px; flex:none; display:flex; flex-direction:column; overflow:hidden; border:1px solid color-mix(in srgb,var(--border) 72%,var(--glass-highlight)); border-radius:var(--radius-lg); background:linear-gradient(145deg,color-mix(in srgb,var(--glass-raised) 82%,transparent),transparent); box-shadow:0 1px 0 var(--glass-highlight) inset; }.glass-sidebar__identity { padding:14px 12px 10px; border-bottom:1px solid var(--border); }.glass-search { position:relative; display:block; }.glass-search svg { position:absolute; top:50%; left:10px; width:14px; height:14px; pointer-events:none; transform:translateY(-50%); fill:none; stroke:var(--text-secondary); stroke-width:2; }.glass-search input { height:30px; padding:6px 10px 6px 30px; border-color:transparent; background:var(--glass-raised); font-size:12px; }.glass-profile { display:flex; align-items:center; gap:9px; margin-top:12px; padding:3px 5px; }.glass-avatar { width:30px; height:30px; flex:none; display:grid; place-items:center; border-radius:50%; color:#fff; background:linear-gradient(135deg,#7d91de,#ad78c9); box-shadow:0 3px 9px rgba(92,107,181,.34),0 1px 0 rgba(255,255,255,.25) inset; font-size:13px; font-weight:650; }.glass-profile__name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:600; }.glass-sidebar__tabs { flex:1; overflow-y:auto; padding:8px; }.glass-sidebar__tabs > button { border-radius:var(--radius-sm)!important; }.glass-sidebar__tabs > button:hover { background:var(--glass-raised)!important; color:var(--text-primary)!important; }.glass-sidebar__tabs > button.is-active { background:color-mix(in srgb,var(--accent) 84%,transparent)!important; color:#fff!important; box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 5px 14px color-mix(in srgb,var(--accent) 26%,transparent); }.glass-content { flex:1; min-width:0; overflow-y:auto; padding:20px 18px 20px 8px; }.glass-content > * { animation:glassViewIn .22s cubic-bezier(.22,.8,.25,1); }.glass-card { padding:16px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--glass-raised); box-shadow:0 1px 0 var(--glass-highlight) inset,0 10px 24px color-mix(in srgb,var(--glass-shadow) 30%,transparent); }.glass-section { width:100%; max-width:600px; }.glass-section > h3 { margin-bottom:16px; font-size:15px; font-weight:650; letter-spacing:-.01em; }.glass-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.glass-metric { min-height:80px; padding:14px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--glass-raised); box-shadow:0 1px 0 var(--glass-highlight) inset; }.glass-metric__label { color:var(--text-secondary); font-size:11px; }.glass-metric__value { margin-top:4px; font-size:20px; font-weight:650; letter-spacing:-.03em; }.glass-list { display:grid; gap:7px; }.glass-list-row { display:flex; align-items:center; gap:8px; min-height:48px; padding:8px 10px; border:1px solid var(--border); border-radius:var(--radius-md); background:color-mix(in srgb,var(--glass-raised) 74%,transparent); transition:background .16s,transform .16s,border-color .16s; }.glass-list-row:hover { transform:translateY(-1px); background:var(--glass-raised); border-color:color-mix(in srgb,var(--border) 60%,var(--glass-highlight)); } @keyframes glassViewIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.glass-module { width:100%; max-width:600px; animation:glassViewIn .22s cubic-bezier(.22,.8,.25,1); }.glass-module__title { margin-bottom:5px; font-size:16px; font-weight:650; letter-spacing:-.02em; }.glass-module__intro { margin-bottom:14px; color:var(--text-secondary); font-size:12px; }.glass-action { display:inline-flex; align-items:center; justify-content:center; min-height:36px; padding:8px 16px; }.glass-icon-button { width:30px; height:30px; display:grid; place-items:center; padding:0; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--glass-raised); color:var(--text-secondary); }.glass-icon-button--danger { color:#fff; background:var(--danger); border-color:transparent; }.glass-member-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:10px; }.glass-member { display:flex; flex-direction:column; align-items:center; gap:5px; min-height:126px; padding:14px 8px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--glass-raised); box-shadow:0 1px 0 var(--glass-highlight) inset; }.glass-member--local { border-color:var(--accent); box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 25%,transparent),0 1px 0 var(--glass-highlight) inset; }.glass-member__avatar { width:48px; height:48px; display:grid; place-items:center; border-radius:50%; color:#fff; font-size:20px; font-weight:700; position:relative; }.glass-login { width:100%; max-width:390px; margin:16px auto; }.glass-login .glass-card { padding:22px; }

/* Nested surfaces inset by 10px from the 28px outer radius: 28px - 10px = 18px. */
.glass-split-view > .glass-sidebar { border-radius:calc(var(--card-radius) - 10px); }
.glass-module { animation-duration:.34s; animation-timing-function:cubic-bezier(.16,1,.3,1); }
::view-transition-group(module-content) { animation-duration:360ms; animation-timing-function:cubic-bezier(.16,1,.3,1); }
::view-transition-old(module-content) { animation:moduleContentOut 280ms cubic-bezier(.4,0,1,1) both; }
::view-transition-new(module-content) { animation:moduleContentIn 360ms cubic-bezier(.16,1,.3,1) both; }
@keyframes moduleContentIn { from { opacity:0; transform:translateY(8px); filter:blur(2px); } to { opacity:1; transform:none; filter:blur(0); } }
@keyframes moduleContentOut { to { opacity:0; transform:translateY(-5px); filter:blur(2px); } }
@media (prefers-reduced-motion:reduce) { ::view-transition-group(module-content) { animation-duration:220ms!important; } ::view-transition-old(module-content),::view-transition-new(module-content) { animation-duration:220ms!important; } }
.glass-split-view { padding:4px; gap:8px; }
.glass-split-view > .glass-sidebar { border-radius:calc(var(--card-radius) - 4px); }
.glass-window__body:has(.glass-split-view) { padding:4px; }
.glass-window--closing { pointer-events:none; animation:glassWindowClose 280ms cubic-bezier(.4,0,1,1) forwards; }
@keyframes glassWindowClose { to { opacity:0; transform:translateY(10px) scale(.975); filter:blur(3px); } }
.glass-content { contain:paint; }
.glass-content { padding:0 18px 20px 8px; }
.glass-content > .glass-section { width:100%; max-width:none!important; }
.glass-content > .glass-section > .glass-card { width:100%; max-width:none!important; }
.glass-content > .glass-section > h3,.glass-content > h3 { display:none; }
.glass-switch { --switch-size:14px; position:relative; display:inline-block; width:3.5em; height:2em; flex:none; font-size:var(--switch-size); vertical-align:middle; }
.glass-switch input { width:0; height:0; opacity:0; }
.glass-switch__slider { position:absolute; inset:0; cursor:pointer; border:1px solid color-mix(in srgb,var(--text-secondary) 48%,var(--border)); border-radius:999px; background:var(--glass-raised); box-shadow:0 1px 0 var(--glass-highlight) inset; transition:background-color .24s ease,border-color .24s ease,box-shadow .24s ease; }
.glass-switch__slider::before { content:""; position:absolute; left:.27em; bottom:.25em; width:1.4em; height:1.4em; border-radius:50%; background:color-mix(in srgb,var(--text-secondary) 68%,var(--glass-raised)); box-shadow:0 1px 3px color-mix(in srgb,var(--glass-shadow) 42%,transparent); transition:transform .24s cubic-bezier(.2,.8,.2,1),background-color .24s ease; }
.glass-switch input:checked + .glass-switch__slider { border-color:var(--accent); background-color:var(--accent); box-shadow:0 3px 10px color-mix(in srgb,var(--accent) 28%,transparent),0 1px 0 rgba(255,255,255,.24) inset; }
.glass-switch input:checked + .glass-switch__slider::before { transform:translateX(1.4em); background:#fff; }
.glass-switch input:focus-visible + .glass-switch__slider { outline:2px solid color-mix(in srgb,var(--accent) 45%,transparent); outline-offset:2px; }
.glass-switch input:disabled + .glass-switch__slider { cursor:not-allowed; opacity:.5; }
.glass-delete { --delete-size:14px; position:relative; display:inline-flex; align-items:center; justify-content:center; width:3.5em; height:2em; overflow:hidden; flex:none; padding:0; border:0; border-radius:999px; color:#fff; background-color:var(--danger); box-shadow:0 2px 7px color-mix(in srgb,var(--danger) 34%,transparent),0 1px 0 rgba(255,255,255,.22) inset; font-size:var(--delete-size); font-weight:600; transition:background-color .2s ease,box-shadow .2s ease; }
.glass-delete__text { font-size:.78em; transition:opacity .18s ease,transform .2s cubic-bezier(.2,.8,.2,1); }
.glass-delete__icon { position:absolute; display:grid; place-items:center; color:#fff; opacity:0; transform:scale(.72); will-change:transform; transition:opacity .16s ease,transform .2s cubic-bezier(.2,.8,.2,1); }
.glass-delete__icon svg { width:1.15em; height:1.15em; }
.glass-delete:hover { background-color:var(--danger-hover); box-shadow:0 3px 10px color-mix(in srgb,var(--danger) 44%,transparent),0 1px 0 rgba(255,255,255,.26) inset; }
.glass-delete:hover .glass-delete__text { opacity:0; transform:translateX(-.55em); }
.glass-delete:hover .glass-delete__icon { opacity:1; transform:scale(1); }
.glass-delete:focus-visible { outline:2px solid color-mix(in srgb,var(--danger) 50%,transparent); outline-offset:2px; }
.glass-delete:active { transform:scale(.96)!important; }
.glass-delete:active .glass-delete__icon { transform:scale(.82); }
.ad-bl-artist-del,.ad-bl-song-del,.ad-pl-del,.ad-an-grp-del { width:18px!important; height:18px!important; display:grid!important; flex:none!important; padding:0!important; border:1px solid color-mix(in srgb,var(--danger) 32%,transparent)!important; border-radius:50%!important; color:var(--danger)!important; background:color-mix(in srgb,var(--danger) 10%,transparent)!important; font-size:10px!important; place-items:center!important; transition:background-color .16s ease,transform .15s ease,border-color .16s ease!important; }
.ad-bl-artist-del:hover,.ad-bl-song-del:hover,.ad-pl-del:hover,.ad-an-grp-del:hover { border-color:var(--danger)!important; background-color:var(--danger)!important; color:#fff!important; }
.glass-save { --save-size:14px; position:relative; display:inline-flex; align-items:center; justify-content:center; width:3.5em; height:2em; overflow:hidden; flex:none; padding:0; border:0; border-radius:999px; color:#fff; background-color:var(--accent); box-shadow:0 2px 7px color-mix(in srgb,var(--accent) 34%,transparent),0 1px 0 rgba(255,255,255,.22) inset; font-size:var(--save-size); font-weight:600; transition:background-color .2s ease,box-shadow .2s ease; }
.glass-save__text { font-size:.78em; transition:opacity .18s ease,transform .2s cubic-bezier(.2,.8,.2,1); }
.glass-save__icon { position:absolute; display:grid; place-items:center; color:#fff; font-size:1.25em; font-weight:700; opacity:0; transform:scale(.72); will-change:transform; transition:opacity .16s ease,transform .2s cubic-bezier(.2,.8,.2,1); }
.glass-save:hover { background-color:var(--accent-hover); box-shadow:0 3px 10px color-mix(in srgb,var(--accent) 44%,transparent),0 1px 0 rgba(255,255,255,.26) inset; }
.glass-save:hover .glass-save__text { opacity:0; transform:translateX(-.55em); }
.glass-save:hover .glass-save__icon { opacity:1; transform:scale(1); }
.glass-save:focus-visible { outline:2px solid color-mix(in srgb,var(--accent) 50%,transparent); outline-offset:2px; }
.glass-save:active { transform:scale(.96)!important; }
.glass-save:active .glass-save__icon { transform:scale(.82); }
.glass-default { display:inline-flex; align-items:center; justify-content:center; min-height:34px; padding:8px 18px; border:0; border-radius:var(--radius-sm); color:#fff; background-color:var(--accent); box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 30%,transparent),0 1px 0 rgba(255,255,255,.25) inset; font:inherit; font-size:13px; font-weight:500; cursor:pointer; transition:background-color .15s ease,box-shadow .15s ease,filter .15s ease; }
.glass-default:hover { filter:brightness(1.08); box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 40%,transparent),0 1px 0 rgba(255,255,255,.3) inset; }
.glass-default:active { transform:scale(.96); }
.glass-default:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.glass-default:focus-visible { outline:2px solid color-mix(in srgb,var(--accent) 50%,transparent); outline-offset:2px; }
.glass-pill { display:inline-flex; align-items:center; justify-content:center; height:2em; min-width:3.5em; padding:0 14px; border:0; border-radius:999px; color:#fff; background-color:var(--accent); box-shadow:0 2px 7px color-mix(in srgb,var(--accent) 34%,transparent),0 1px 0 rgba(255,255,255,.22) inset; font:inherit; font-size:13px; font-weight:600; cursor:pointer; }
.glass-pill:hover { background-color:var(--accent-hover); }
.glass-pill:active { transform:scale(.96); }
.glass-pill:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.glass-pill:focus-visible { outline:2px solid color-mix(in srgb,var(--accent) 50%,transparent); outline-offset:2px; }
.glass-transparent { display:inline-flex; align-items:center; justify-content:center; height:32px; padding:0 12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--glass-raised); box-shadow:0 1px 0 var(--glass-highlight) inset; color:var(--text-secondary); font:inherit; font-size:12px; cursor:pointer; transition:background-color .15s ease,color .15s ease,transform .15s ease,box-shadow .15s ease; }
.glass-transparent:hover { background:var(--bg-tertiary); color:var(--text-primary); }
.glass-transparent:active { transform:scale(.96); }
.glass-transparent:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.glass-transparent:focus-visible { outline:2px solid color-mix(in srgb,var(--accent) 50%,transparent); outline-offset:2px; }
.glass-tooltip { position:absolute; bottom:100%; left:50%; margin-bottom:6px; padding:5px 10px; border:1px solid rgba(255,255,255,.16); border-radius:6px; color:#fff; background:rgba(31,31,31,.88); box-shadow:0 3px 12px rgba(0,0,0,.28),0 1px 0 rgba(255,255,255,.12) inset; font-size:11px; font-weight:500; font-family:inherit; line-height:1.2; white-space:nowrap; z-index:1025; pointer-events:none; opacity:0; transform:translateX(-50%) translateY(2px); transition:opacity 80ms ease,transform 80ms ease; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); -webkit-font-smoothing:antialiased; }
.glass-tooltip::after { content:""; position:absolute; bottom:-4px; left:50%; width:7px; height:7px; border-right:1px solid rgba(255,255,255,.16); border-bottom:1px solid rgba(255,255,255,.16); background:rgba(31,31,31,.88); transform:translateX(-50%) rotate(45deg); }
*:hover > .glass-tooltip { opacity:1; transform:translateX(-50%) translateY(0); }
::view-transition-group(tab-content) { animation-duration:300ms; animation-timing-function:cubic-bezier(.16,1,.3,1); }
::view-transition-old(tab-content) { animation:tabContentOut 220ms cubic-bezier(.4,0,1,1) both; }
::view-transition-new(tab-content) { animation:tabContentIn 300ms cubic-bezier(.16,1,.3,1) both; }
@keyframes tabContentIn { from { opacity:0; transform:translateY(6px); filter:blur(1px); } to { opacity:1; transform:none; filter:blur(0); } }
@keyframes tabContentOut { to { opacity:0; transform:translateY(-3px); filter:blur(1px); } }
.glass-nav-icon { width:28px; height:28px; flex:none; display:grid; place-items:center; border:1px solid color-mix(in srgb,var(--nav-icon) 36%,var(--glass-highlight)); border-radius:9px; color:color-mix(in srgb,var(--nav-icon) 72%,white); background:linear-gradient(145deg,color-mix(in srgb,var(--nav-icon) 26%,var(--glass-raised)),color-mix(in srgb,var(--nav-icon-shadow) 13%,transparent)); box-shadow:0 1px 0 var(--glass-highlight) inset,0 3px 10px color-mix(in srgb,var(--nav-icon-shadow) 20%,transparent); transition:background .2s,box-shadow .2s,transform .2s,color .2s; }
.glass-nav-icon svg { width:16px; height:16px; }
.glass-sidebar__tabs > button:hover .glass-nav-icon { transform:scale(1.04); box-shadow:0 1px 0 var(--glass-highlight) inset,0 4px 13px color-mix(in srgb,var(--nav-icon-shadow) 28%,transparent); }
.glass-sidebar__tabs > button.is-active .glass-nav-icon { color:#fff; border-color:rgba(255,255,255,.22); background:linear-gradient(145deg,color-mix(in srgb,var(--nav-icon) 76%,white),var(--nav-icon)); box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 5px 14px color-mix(in srgb,var(--nav-icon-shadow) 38%,transparent); }
.glass-module { animation:none; }
.glass-tab-snapshot { position:fixed; z-index:9000; overflow:hidden; pointer-events:none; opacity:1; transform:none; filter:blur(0); transition:opacity 260ms cubic-bezier(.4,0,1,1),transform 260ms cubic-bezier(.4,0,1,1),filter 260ms cubic-bezier(.4,0,1,1); }
.glass-tab-snapshot--leaving { opacity:0; transform:translateY(-5px); filter:blur(2px); }
.glass-tab-entering { animation:glassTabEnter 320ms cubic-bezier(.16,1,.3,1); }
@keyframes glassTabEnter { from { opacity:0; transform:translateY(7px); filter:blur(2px); } to { opacity:1; transform:none; filter:blur(0); } }

/* Startup and Dock motion */
#dock { transform-origin:center bottom; }


@keyframes dockReveal { from { opacity:0; transform:translateY(100%); } to { opacity:1; transform:translateY(0); } }
@keyframes dockIconBoot { from { opacity:0; transform:translateY(8px) scale(.94); filter:blur(1px); } to { opacity:1; transform:translateY(0) scale(1); filter:blur(0); } }
#dock.dock--entering { animation:dockReveal 420ms cubic-bezier(.2,.8,.2,1) both; }
#dock.dock--entering .dock-icon__art { animation:dockIconBoot 900ms cubic-bezier(.35,0,.15,1) both; animation-delay:var(--dock-boot-delay); }
.dock-tooltip { position:fixed; padding:5px 10px; border:1px solid rgba(255,255,255,.16); border-radius:6px; color:#fff; background:rgba(31,31,31,.88); box-shadow:0 3px 12px rgba(0,0,0,.28),0 1px 0 rgba(255,255,255,.12) inset; font-size:11px; font-weight:500; font-family:inherit; line-height:1.2; white-space:nowrap; z-index:1025; pointer-events:none; opacity:0; visibility:hidden; transform:translate(-50%,-2px); transition:opacity 80ms ease,transform 80ms ease,visibility 0s linear 80ms; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); -webkit-font-smoothing:antialiased; }
.dock-tooltip::after { content:""; position:absolute; bottom:-4px; left:50%; width:7px; height:7px; border-right:1px solid rgba(255,255,255,.16); border-bottom:1px solid rgba(255,255,255,.16); background:rgba(31,31,31,.88); transform:translateX(-50%) rotate(45deg); }
.dock-tooltip.is-visible { opacity:1; visibility:visible; transform:translate(-50%,0); transition-delay:0s; }

/* Lock screen */
.lock-screen { position:relative; display:grid; width:100%; min-height:100%; place-items:center; overflow:hidden; }.lock-screen::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,11,18,.08),rgba(8,11,18,.34)); backdrop-filter:blur(12px); }.lock-screen__orb { position:absolute; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle at 35% 30%,rgba(156,194,255,.50),rgba(109,93,217,.20) 45%,transparent 70%); filter:blur(18px); transform:translateY(-90px); }.lock-screen__content { position:relative; z-index:1; width:320px; text-align:center; animation:cardFadeIn .65s cubic-bezier(.16,1,.3,1); }.lock-screen__avatar { width:76px; height:76px; display:grid; place-items:center; margin:0 auto 15px; border:1px solid rgba(255,255,255,.26); border-radius:50%; color:#fff; background:linear-gradient(145deg,rgba(142,164,237,.95),rgba(117,91,183,.92)); box-shadow:0 18px 42px rgba(52,43,107,.38),0 1px 0 rgba(255,255,255,.45) inset; font-size:30px; font-weight:650; }.lock-screen h1 { font-size:22px; letter-spacing:-.03em; }.lock-screen__content > p { margin:5px 0 20px; color:var(--text-secondary); }.lock-screen__form { display:grid; gap:8px; padding:14px; border:1px solid var(--border); border-radius:var(--radius-lg); background:color-mix(in srgb,var(--glass-fill) 86%,transparent); box-shadow:0 1px 0 var(--glass-highlight) inset,0 18px 40px color-mix(in srgb,var(--glass-shadow) 45%,transparent); text-align:left; }.lock-screen__form input { background:var(--glass-raised); }.lock-screen__form .glass-default { margin-top:4px; width:100%; }
#settings-pass-btn { width:100%; }.lock-screen__remember { display:flex; align-items:center; gap:6px; padding:3px 2px; color:var(--text-secondary); font-size:11px; }.lock-screen__remember input { width:auto; accent-color:var(--accent); }.lock-screen #login-error { min-height:16px; color:var(--danger); font-size:11px; text-align:center; }
#content:has(.lock-screen) { padding:0; }
#panel:has(.lock-screen) { align-self:stretch; max-width:none; height:100%; }
.room-list-view { animation:roomListEnter 420ms cubic-bezier(.16,1,.3,1); }
@keyframes roomListEnter { from { opacity:0; transform:translateY(12px) scale(.985); filter:blur(2px); } to { opacity:1; transform:none; filter:blur(0); } }
.glass-window.startup-window,.glass-window.startup-window .room-list-view { animation:none; }

/* Shared nested-surface scale: 28px window, 20px card, 14px row, 10px control. */
.jk-search-results { height:180px; overflow-y:auto; margin-bottom:12px; }
.jk-search-cover { width:28px; height:28px; flex:none; overflow:hidden; border-radius:var(--radius-sm); background:var(--bg-tertiary); }
.jk-search-cover img { -webkit-user-drag:none; user-select:none; pointer-events:none; }

/* Magnification is driven by JS on the fixed-size .dock-icon layer. */