:root{--accent: #007AFF;--accent-hover: #0062cc;--accent-active: #004ea3;--accent-subtle: rgba(0, 122, 255, .1);--accent-light: rgba(0, 122, 255, .1);--bg-base: #111116;--bg-elevated: #1a1a22;--bg-inset: #0d0d11;--bg-hover: #222230;--bg-active: #2a2a38;--bg-overlay: rgba(0, 0, 0, .5);--border-primary: rgba(255, 255, 255, .06);--border-secondary: rgba(255, 255, 255, .1);--text-primary: #ececf1;--text-secondary: #8e8ea0;--text-tertiary: #565669;--color-online: #34d399;--color-locked: #fbbf24;--color-offline: #6b6b80;--color-away: #a78bfa;--color-danger: #ef4444;--color-danger-hover:#dc2626;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-full: 9999px;--font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;--font-mono: "SF Mono", ui-monospace, "Cascadia Code", "Fira Code", monospace;--text-caption: .75rem;--text-secondary-size: .875rem;--text-body: 1rem;--text-subheading: 1.25rem;--text-headline: 1.75rem;--leading-tight: 1.3;--leading-body: 1.5;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .2);--shadow-md: 0 2px 8px rgba(0, 0, 0, .25);--shadow-lg: 0 4px 16px rgba(0, 0, 0, .3);--ease-out-quart: cubic-bezier(.25, 1, .5, 1);--duration-micro: .15s;--duration-state: .3s;--z-base: 1;--z-dropdown: 10;--z-overlay: 50;--z-modal: 100;--z-toast: 200;--safe-top: env(safe-area-inset-top, 0px);--safe-right: env(safe-area-inset-right, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px)}[data-theme=light]{--bg-base: #f8f8fa;--bg-elevated: #ffffff;--bg-inset: #f0f0f3;--bg-hover: #ebebf0;--bg-active: #e0e0e8;--bg-overlay: rgba(0, 0, 0, .15);--border-primary: rgba(0, 0, 0, .06);--border-secondary: rgba(0, 0, 0, .1);--text-primary: #1d1d1f;--text-secondary: #6e6e80;--text-tertiary: #aeaeb2;--color-offline: #aeaeb2;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);--shadow-md: 0 2px 8px rgba(0, 0, 0, .08);--shadow-lg: 0 4px 16px rgba(0, 0, 0, .1)}@media(prefers-color-scheme:light){[data-theme=system]{--bg-base: #f8f8fa;--bg-elevated: #ffffff;--bg-inset: #f0f0f3;--bg-hover: #ebebf0;--bg-active: #e0e0e8;--bg-overlay: rgba(0, 0, 0, .15);--border-primary: rgba(0, 0, 0, .06);--border-secondary: rgba(0, 0, 0, .1);--text-primary: #1d1d1f;--text-secondary: #6e6e80;--text-tertiary: #aeaeb2;--color-offline: #aeaeb2;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);--shadow-md: 0 2px 8px rgba(0, 0, 0, .08);--shadow-lg: 0 4px 16px rgba(0, 0, 0, .1)}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{height:100%;overscroll-behavior:none}body{min-height:100%;font-family:var(--font-sans);font-size:var(--text-body);line-height:var(--leading-body);color:var(--text-primary);background:var(--bg-base);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding-top:var(--safe-top);padding-right:var(--safe-right);padding-bottom:var(--safe-bottom);padding-left:var(--safe-left);-webkit-text-size-adjust:100%}#root{min-height:100vh;min-height:100dvh}.text-caption{font-size:var(--text-caption);line-height:var(--leading-tight)}.text-secondary-size{font-size:var(--text-secondary-size)}.text-body{font-size:var(--text-body)}.text-subheading{font-size:var(--text-subheading);line-height:var(--leading-tight)}.text-headline{font-size:var(--text-headline);line-height:var(--leading-tight);letter-spacing:-.02em}.text-xs{font-size:var(--text-caption)}.text-sm{font-size:var(--text-secondary-size)}.text-base{font-size:var(--text-body)}.text-lg,.text-xl{font-size:var(--text-subheading)}.text-2xl{font-size:var(--text-headline)}.text-3xl{font-size:2rem;line-height:var(--leading-tight);letter-spacing:-.02em}.text-primary{color:var(--text-primary)}.text-secondary{color:var(--text-secondary)}.text-tertiary{color:var(--text-tertiary)}.text-accent{color:var(--accent)}.text-danger{color:var(--color-danger)}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.font-mono{font-family:var(--font-mono)}.leading-tight{line-height:var(--leading-tight)}.leading-normal{line-height:var(--leading-body)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);min-height:44px;font-family:var(--font-sans);font-size:var(--text-secondary-size);font-weight:500;line-height:1;color:var(--text-primary);background:transparent;border:1px solid transparent;border-radius:var(--radius-md);cursor:pointer;outline:none;white-space:nowrap;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background var(--duration-micro) var(--ease-out-quart),color var(--duration-micro) var(--ease-out-quart),border-color var(--duration-micro) var(--ease-out-quart),opacity var(--duration-micro) var(--ease-out-quart)}.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn:disabled{opacity:.35;cursor:not-allowed;pointer-events:none}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-hover)}.btn-primary:active{background:var(--accent-active);transform:scale(.98)}.btn-ghost{color:var(--text-secondary);border-color:var(--border-secondary)}.btn-ghost:hover{background:var(--bg-hover);color:var(--text-primary)}.btn-ghost:active{background:var(--bg-active)}.btn-danger{color:var(--color-danger);border-color:#ef444433}.btn-danger:hover{background:#ef444414}.btn-danger:active{background:#ef444424}.btn-icon{width:44px;height:44px;min-height:44px;padding:0;color:var(--text-secondary);border-radius:var(--radius-md)}.btn-icon:hover{background:var(--bg-hover);color:var(--text-primary)}.btn-icon:active{background:var(--bg-active)}.btn-sm{padding:var(--space-1) var(--space-3);min-height:32px;font-size:var(--text-caption);border-radius:var(--radius-sm)}.btn-lg{padding:var(--space-4) var(--space-8);min-height:48px;font-size:var(--text-body);border-radius:var(--radius-lg)}.btn-block{width:100%}.flex{display:flex}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-shrink-0{flex-shrink:0}.items-center{align-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-stretch{align-items:stretch}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.centered{display:flex;align-items:center;justify-content:center}.gap-1{gap:var(--space-1)}.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}.gap-6{gap:var(--space-6)}.gap-8{gap:var(--space-8)}.p-1{padding:var(--space-1)}.p-2{padding:var(--space-2)}.p-3{padding:var(--space-3)}.p-4{padding:var(--space-4)}.p-6{padding:var(--space-6)}.p-8{padding:var(--space-8)}.px-2{padding-left:var(--space-2);padding-right:var(--space-2)}.px-4{padding-left:var(--space-4);padding-right:var(--space-4)}.px-6{padding-left:var(--space-6);padding-right:var(--space-6)}.py-2{padding-top:var(--space-2);padding-bottom:var(--space-2)}.py-4{padding-top:var(--space-4);padding-bottom:var(--space-4)}.m-auto{margin:auto}.ml-auto{margin-left:auto}.mr-auto{margin-right:auto}.w-full{width:100%}.h-full{height:100%}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.inset-0{top:0;right:0;bottom:0;left:0}.overflow-hidden{overflow:hidden}.overflow-auto{overflow:auto}.hidden{display:none}.block{display:block}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.status-online{color:var(--color-online)}.status-locked{color:var(--color-locked)}.status-offline{color:var(--color-offline)}.status-away{color:var(--color-away)}.status-badge{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-caption);font-weight:500}.status-dot{width:8px;height:8px;border-radius:var(--radius-full);flex-shrink:0}.status-dot.online{background:var(--color-online)}.status-dot.locked{background:var(--color-locked)}.status-dot.offline{background:var(--color-offline)}.status-dot.away{background:var(--color-away)}.toast-container{position:fixed;top:var(--safe-top, 0px);left:50%;transform:translate(-50%);z-index:var(--z-toast);display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--space-4);pointer-events:none;width:100%;max-width:420px}.toast{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);width:100%;background:var(--bg-elevated);border:1px solid var(--border-primary);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);color:var(--text-primary);font-size:var(--text-secondary-size);pointer-events:auto;animation:toastIn var(--duration-state) var(--ease-out-quart) both}.toast.toast-exit{animation:toastOut var(--duration-micro) var(--ease-out-quart) both}.toast-success{border-left:3px solid var(--color-online)}.toast-error{border-left:3px solid var(--color-danger)}.toast-warning{border-left:3px solid var(--color-locked)}.toast-info{border-left:3px solid var(--accent)}@keyframes toastIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes toastOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-8px)}}.install-banner{position:fixed;bottom:0;left:0;right:0;z-index:var(--z-modal);padding:var(--space-4) var(--space-4) calc(var(--space-4) + var(--safe-bottom));background:var(--bg-elevated);border-top:1px solid var(--border-primary);box-shadow:0 -2px 12px #00000026;animation:slideUpBanner var(--duration-state) var(--ease-out-quart) both}.install-banner-content{display:flex;align-items:center;gap:var(--space-3);max-width:480px;margin:0 auto}.install-banner-icon{width:44px;height:44px;border-radius:var(--radius-md);flex-shrink:0}.install-banner-text{flex:1}.install-banner-title{font-size:var(--text-body);font-weight:600;color:var(--text-primary)}.install-banner-desc{font-size:var(--text-caption);color:var(--text-secondary);margin-top:2px}.install-banner-actions{display:flex;gap:var(--space-2);flex-shrink:0}@keyframes slideUpBanner{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fade-in{animation:fadeIn var(--duration-state) var(--ease-out-quart) both}@keyframes slideUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.slide-up{animation:slideUp var(--duration-state) var(--ease-out-quart) both}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.slide-down{animation:slideDown var(--duration-state) var(--ease-out-quart) both}@keyframes scaleIn{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}.scale-in{animation:scaleIn var(--duration-state) var(--ease-out-quart) both}@keyframes spin{to{transform:rotate(360deg)}}.spin{animation:spin .8s linear infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.pulse{animation:pulse 2s ease-in-out infinite}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff14;border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:#ffffff26}*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.08) transparent}.select-none{-webkit-user-select:none;user-select:none}.select-text{-webkit-user-select:text;user-select:text}.cursor-pointer{cursor:pointer}.opacity-0{opacity:0}.opacity-50{opacity:.5}.opacity-100{opacity:1}.rounded-sm{border-radius:var(--radius-sm)}.rounded-md{border-radius:var(--radius-md)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-full{border-radius:var(--radius-full)}.shadow-sm{box-shadow:var(--shadow-sm)}.shadow-md{box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:var(--shadow-lg)}.divider{height:1px;background:var(--border-primary);border:none;margin:var(--space-2) 0}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--bg-overlay);z-index:var(--z-overlay)}.bottom-bar{position:fixed;bottom:0;left:0;right:0;padding:var(--space-3) var(--space-4) calc(var(--space-3) + var(--safe-bottom));background:var(--bg-elevated);border-top:1px solid var(--border-primary)}dialog{border:none;background:var(--bg-elevated);color:var(--text-primary);border-radius:var(--radius-lg);padding:var(--space-6);max-width:340px;width:calc(100% - var(--space-8));box-shadow:var(--shadow-md)}dialog::backdrop{background:#00000080}[data-theme=light] ::-webkit-scrollbar-thumb{background:#00000014}[data-theme=light] ::-webkit-scrollbar-thumb:hover{background:#00000026}[data-theme=light] *{scrollbar-color:rgba(0,0,0,.08) transparent}@media(prefers-color-scheme:light){[data-theme=system] ::-webkit-scrollbar-thumb{background:#00000014}[data-theme=system] ::-webkit-scrollbar-thumb:hover{background:#00000026}[data-theme=system] *{scrollbar-color:rgba(0,0,0,.08) transparent}}.glass-card,.glass-card-static{background:var(--bg-elevated);border:1px solid var(--border-primary);border-radius:var(--radius-lg)}.glass-bg-heavy{background:var(--bg-elevated)}.glass-border{border:1px solid var(--border-primary)}.glass-bg{background:var(--bg-elevated)}.glass-inset{background:var(--bg-inset);border:1px solid var(--border-primary);border-radius:var(--radius-md)}