.app-shell{display:flex;flex-direction:column;min-height:100vh}.app-header{display:flex;align-items:center;padding:.75rem 1.5rem;background:var(--bg-elev);border-bottom:1px solid var(--border);gap:1.5rem;flex-wrap:wrap;box-shadow:var(--shadow-soft)}.brand{display:flex;flex-direction:column;line-height:1.05;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.brand-mark{display:inline-flex;gap:.5px;font-size:1.15rem;letter-spacing:-.01em}.brand-zee{font-weight:700;color:#1e40af}.brand-lake{font-weight:500;color:#dc2626}.brand-sub{font-size:.7rem;font-weight:600;color:var(--fg-dim);text-transform:uppercase;letter-spacing:.08em}@media (prefers-color-scheme: dark){.brand-zee{color:#93c5fd}.brand-lake{color:#fca5a5}}nav{display:flex;gap:.25rem}nav a{color:var(--fg-dim);text-decoration:none;font-size:.9rem;font-weight:500;padding:.4rem .75rem;border-radius:8px;position:relative;transition:background .15s ease,color .15s ease}nav a:hover{color:var(--fg);background:var(--bg-sunken)}nav a.router-link-active{color:var(--accent);background:var(--accent-soft)}nav a>.badge{position:absolute;top:-4px;right:-6px;background:var(--accent);color:var(--accent-fg);font-size:.65rem;font-weight:700;padding:1px 5px;border-radius:999px;line-height:1.3;box-shadow:0 1px 3px #00000026}.library-switcher select,.collection-switcher select{background:var(--bg-elev);color:var(--fg);border:1px solid var(--border);border-radius:8px;padding:.35rem .6rem;font-size:.85rem;cursor:pointer}.library-switcher select:hover,.collection-switcher select:hover{border-color:var(--border-strong)}.type-filter{display:flex;gap:0;background:var(--bg-sunken);border:1px solid var(--border);border-radius:8px;overflow:hidden;padding:2px}.type-filter button{background:transparent;border:none;color:var(--fg-dim);padding:.3rem .7rem;font-size:.8rem;font-weight:500;cursor:pointer;border-radius:6px}.type-filter button:hover{color:var(--fg)}.type-filter button.active{background:var(--bg-elev);color:var(--accent);box-shadow:var(--shadow-soft)}.stats{margin-left:auto;font-size:.8rem;color:var(--fg-dim)}.header-actions{display:flex;gap:.4rem;align-items:center;margin-left:auto}.auth-btn{background:transparent;border:1px solid var(--border);color:var(--fg);font:inherit;font-size:.85rem;cursor:pointer;padding:.35rem .75rem;border-radius:6px}.auth-btn:hover{background:var(--bg-sunken)}.user-menu{position:relative}.user-menu-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background:transparent;border:none;cursor:pointer;border-radius:50%;transition:box-shadow .15s ease}.user-menu-btn:hover{box-shadow:0 0 0 3px var(--accent-soft)}.user-avatar{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--accent-fg);font-size:.95rem;font-weight:600;-webkit-user-select:none;user-select:none}.user-menu-panel{position:absolute;right:0;top:calc(100% + 6px);min-width:240px;background:var(--bg-elev);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-soft),0 12px 32px #0000001f;padding:.4rem 0;z-index:50}.user-menu-header{padding:.55rem .9rem .65rem;border-bottom:1px solid var(--border);margin-bottom:.25rem}.user-menu-name{font-size:.9rem;font-weight:600;color:var(--fg)}.user-menu-email{font-size:.8rem;color:var(--fg-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}.user-menu-item{display:block;width:100%;padding:.55rem .9rem;background:transparent;border:none;color:var(--fg);text-align:left;text-decoration:none;font:inherit;font-size:.9rem;cursor:pointer}.user-menu-item:hover{background:var(--bg-sunken)}.user-menu-item-danger{color:var(--danger)}.user-menu-item-danger:hover{background:var(--danger-soft)}.icon-btn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;color:var(--fg-dim);text-decoration:none;transition:background .15s ease,color .15s ease}.icon-btn:hover{color:var(--fg);background:var(--bg-sunken)}.icon-btn.router-link-active{color:var(--accent);background:var(--accent-soft)}.icon-btn{position:relative}.dot-badge{position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:50%;background:#f59e0b;box-shadow:0 0 0 2px var(--bg-elev)}.reorg-banner{display:flex;align-items:center;gap:1rem;padding:.5rem 1.25rem;background:#fef3c7;color:#78350f;border-bottom:1px solid #fbbf24;font-size:.85rem}@media (prefers-color-scheme: dark){.reorg-banner{background:#3b2f0a;color:#fde68a;border-bottom-color:#b45309}}.reorg-banner-text{flex:1}.reorg-banner-actions{display:flex;gap:.4rem;align-items:center}.reorg-banner-btn{background:#b45309;color:#fff;padding:.3rem .75rem;border-radius:6px;text-decoration:none;font-size:.8rem;font-weight:600}.reorg-banner-btn:hover{background:#92400e}.reorg-banner-dismiss{background:transparent;border:none;color:inherit;font-size:1.2rem;line-height:1;cursor:pointer;padding:0 .4rem;opacity:.7}.reorg-banner-dismiss:hover{opacity:1}.conn-pill{display:inline-flex;align-items:center;gap:.4rem;padding:.2rem .6rem;border-radius:999px;font-size:.75rem;font-weight:500;-webkit-user-select:none;user-select:none}.conn-pill-connected{background:var(--bg-sunken);color:var(--fg-dim)}.conn-pill-disconnected{background:#fee2e2;color:#991b1b}@media (prefers-color-scheme: dark){.conn-pill-disconnected{background:#3f1d1d;color:#fca5a5}}.conn-dot{width:8px;height:8px;border-radius:50%;background:currentColor}.conn-pill-connected .conn-dot{background:#22c55e}.conn-pill-disconnected .conn-dot{background:#ef4444}.conn-banner{display:flex;align-items:center;gap:1rem;padding:.5rem 1.25rem;background:#fee2e2;color:#7f1d1d;border-bottom:1px solid #fca5a5;font-size:.85rem}@media (prefers-color-scheme: dark){.conn-banner{background:#3f1d1d;color:#fecaca;border-bottom-color:#b91c1c}}.conn-banner-text{flex:1}.conn-banner-link{color:inherit;text-decoration:underline}.conn-banner-actions{display:flex;gap:.4rem;align-items:center}.conn-banner-btn{background:#b91c1c;color:#fff;padding:.3rem .75rem;border:none;border-radius:6px;font:inherit;font-size:.8rem;font-weight:600;cursor:pointer}.conn-banner-btn:hover{background:#991b1b}.conn-banner-btn-secondary{background:transparent;color:inherit;border:1px solid currentColor;padding:.3rem .75rem;border-radius:6px;font:inherit;font-size:.8rem;font-weight:500;cursor:pointer;opacity:.85}.conn-banner-btn-secondary:hover{opacity:1}.app-main{flex:1;position:relative}:root{--color-lake-50: #eef5ff;--color-lake-100: #dbeafe;--color-lake-200: #bfdbfe;--color-lake-300: #93c5fd;--color-lake-400: #60a5fa;--color-lake-500: #3b82f6;--color-lake-600: #2563eb;--color-lake-700: #1d4ed8;--color-lake-800: #1e40af;--color-lake-900: #1e3a8a;--color-teal-50: #f0fdfa;--color-teal-100: #ccfbf1;--color-teal-200: #99f6e4;--color-teal-300: #5eead4;--color-teal-400: #2dd4bf;--color-teal-500: #14b8a6;--color-teal-600: #0d9488;--color-teal-700: #0f766e;--color-teal-800: #115e59;--color-teal-900: #134e4a;--color-calm-50: #fafaf9;--color-calm-100: #f3f2f0;--color-calm-200: #e5e4e1;--color-calm-300: #d0cfcb;--color-calm-400: #9c9a93;--color-calm-500: #6e6d67;--color-calm-600: #4d4c47;--color-calm-700: #373633;--color-calm-800: #242320;--color-calm-900: #141311;--shadow-soft: 0 1px 3px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.03);--shadow-soft-md: 0 2px 8px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.04);--shadow-soft-lg: 0 4px 16px rgba(0,0,0,.06), 0 16px 40px rgba(0,0,0,.05);--bg: var(--color-calm-50);--bg-elev: #ffffff;--bg-sunken: var(--color-calm-100);--border: var(--color-calm-200);--border-strong:var(--color-calm-300);--fg: var(--color-calm-800);--fg-dim: var(--color-calm-500);--fg-muted: var(--color-calm-400);--accent: var(--color-lake-500);--accent-hover: var(--color-lake-600);--accent-soft: var(--color-lake-50);--accent-fg: #ffffff;--danger: #dc2626;--danger-soft: #fee2e2;--overlay: rgba(15, 23, 42, .55);color-scheme:light;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}@media (prefers-color-scheme: dark){:root{--bg: var(--color-calm-900);--bg-elev: var(--color-calm-800);--bg-sunken: #0b0b0a;--border: var(--color-calm-700);--border-strong:var(--color-calm-600);--fg: var(--color-calm-100);--fg-dim: var(--color-calm-400);--fg-muted: var(--color-calm-500);--accent: var(--color-lake-400);--accent-hover: var(--color-lake-300);--accent-soft: rgba(59, 130, 246, .12);--accent-fg: #ffffff;--danger: #f87171;--danger-soft: rgba(220, 38, 38, .18);--overlay: rgba(0, 0, 0, .6);color-scheme:dark}}*{box-sizing:border-box;margin:0;padding:0}html,body,#app{height:100%;background:var(--bg);color:var(--fg)}body{-webkit-font-smoothing:antialiased;overscroll-behavior:none}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}button{background:var(--bg-elev);color:var(--fg);border:1px solid var(--border);padding:.5rem 1rem;border-radius:8px;cursor:pointer;font-size:.9rem;font-family:inherit;transition:background .15s ease,border-color .15s ease,color .15s ease}button:hover{background:var(--bg-sunken);border-color:var(--border-strong)}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}button.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}button:disabled{opacity:.5;cursor:not-allowed}input,select,textarea{font-family:inherit;color:var(--fg);background:var(--bg-elev);border:1px solid var(--border);border-radius:8px;padding:.4rem .6rem}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-sunken)}::-webkit-scrollbar-thumb{background:var(--color-calm-300);border-radius:999px}::-webkit-scrollbar-thumb:hover{background:var(--color-calm-400)}@media (prefers-color-scheme: dark){::-webkit-scrollbar-thumb{background:var(--color-calm-600)}::-webkit-scrollbar-thumb:hover{background:var(--color-calm-500)}}.water-gradient{background:linear-gradient(135deg,var(--color-lake-600) 0%,var(--color-teal-600) 100%)}.water-gradient-light{background:linear-gradient(135deg,var(--color-lake-50) 0%,var(--color-teal-50) 100%)}.app-shell{display:flex;flex-direction:column;height:100%}.app-main{flex:1;overflow:hidden;position:relative}