:root{--accent: #007AFF;--accent-hover: #0062cc;--accent-light: rgba(0, 122, 255, .15);--accent-glow: rgba(0, 122, 255, .35);--glass-bg: rgba(255, 255, 255, .06);--glass-bg-hover: rgba(255, 255, 255, .1);--glass-bg-active: rgba(255, 255, 255, .14);--glass-border: rgba(255, 255, 255, .1);--glass-border-hover:rgba(255, 255, 255, .18);--glass-blur: 20px;--glass-blur-heavy: 40px;--bg-app: linear-gradient(135deg, #0a0a1a 0%, #1a1a2e 50%, #0f0f23 100%);--bg-deep: rgba(10, 10, 26, .85);--bg-overlay: rgba(0, 0, 0, .45);--text-primary: #f1f5f9;--text-secondary: #94a3b8;--text-tertiary: #64748b;--text-accent: #007AFF;--color-online: #34d399;--color-locked: #fbbf24;--color-offline: #f87171;--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: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 9999px;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;--font-mono: "SF Mono", "Fira Code", "Cascadia Code", monospace;--text-xs: .75rem;--text-sm: .8125rem;--text-base: .9375rem;--text-lg: 1.0625rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 2rem;--leading-tight: 1.25;--leading-normal: 1.5;--shadow-sm: 0 1px 3px rgba(0,0,0,.25);--shadow-md: 0 4px 12px rgba(0,0,0,.35);--shadow-lg: 0 8px 30px rgba(0,0,0,.45);--shadow-glow:0 0 20px var(--accent-glow);--ease-out: cubic-bezier(.16, 1, .3, 1);--duration-fast: .15s;--duration-normal: .25s;--duration-slow: .4s;--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)}*,*: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-base);line-height:var(--leading-normal);color:var(--text-primary);background:var(--bg-app);background-attachment:fixed;-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}.glass-card{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);transition:background var(--duration-normal) var(--ease-out),border-color var(--duration-normal) var(--ease-out),box-shadow var(--duration-normal) var(--ease-out)}.glass-card:hover{background:var(--glass-bg-hover);border-color:var(--glass-border-hover)}.glass-card-static{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}.glass-bg{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur))}.glass-bg-heavy{background:var(--bg-deep);backdrop-filter:blur(var(--glass-blur-heavy));-webkit-backdrop-filter:blur(var(--glass-blur-heavy))}.glass-border{border:1px solid var(--glass-border)}.glass-inset{background:#0003;border:1px solid rgba(255,255,255,.04);border-radius:var(--radius-md)}.text-primary{color:var(--text-primary)}.text-secondary{color:var(--text-secondary)}.text-tertiary{color:var(--text-tertiary)}.text-accent{color:var(--text-accent)}.text-danger{color:var(--color-danger)}.text-xs{font-size:var(--text-xs)}.text-sm{font-size:var(--text-sm)}.text-base{font-size:var(--text-base)}.text-lg{font-size:var(--text-lg)}.text-xl{font-size:var(--text-xl)}.text-2xl{font-size:var(--text-2xl)}.text-3xl{font-size:var(--text-3xl)}.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-normal)}.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);font-family:var(--font-sans);font-size:var(--text-sm);font-weight:500;line-height:1;color:var(--text-primary);border:1px solid transparent;border-radius:var(--radius-md);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);outline:none;white-space:nowrap;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.btn:focus-visible{box-shadow:0 0 0 2px var(--accent),0 0 0 4px #007aff4d}.btn:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);box-shadow:var(--shadow-glow)}.btn-primary:active{transform:scale(.97)}.btn-ghost{background:transparent;color:var(--text-secondary);border-color:var(--glass-border)}.btn-ghost:hover{background:var(--glass-bg-hover);color:var(--text-primary);border-color:var(--glass-border-hover)}.btn-ghost:active{background:var(--glass-bg-active)}.btn-danger{background:transparent;color:var(--color-danger);border-color:#ef44444d}.btn-danger:hover{background:#ef44441f;border-color:#ef444480}.btn-danger:active{background:#ef444433}.btn-icon{width:40px;height:40px;padding:0;background:transparent;color:var(--text-secondary);border-color:transparent;border-radius:var(--radius-md)}.btn-icon:hover{background:var(--glass-bg-hover);color:var(--text-primary)}.btn-icon:active{background:var(--glass-bg-active);transform:scale(.92)}.btn-sm{padding:var(--space-1) var(--space-3);font-size:var(--text-xs);border-radius:var(--radius-sm)}.btn-lg{padding:var(--space-4) var(--space-8);font-size:var(--text-lg);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);padding:var(--space-1) var(--space-3);font-size:var(--text-xs);font-weight:500;border-radius:var(--radius-full);background:var(--glass-bg);border:1px solid var(--glass-border)}.status-dot{width:8px;height:8px;border-radius:var(--radius-full);flex-shrink:0}.status-dot.online{background:var(--color-online);box-shadow:0 0 6px var(--color-online)}.status-dot.locked{background:var(--color-locked);box-shadow:0 0 6px var(--color-locked)}.status-dot.offline{background:var(--color-offline);box-shadow:0 0 6px var(--color-offline)}.status-dot.away{background:var(--color-away);box-shadow:0 0 6px 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-deep);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);color:var(--text-primary);font-size:var(--text-sm);pointer-events:auto;animation:toastIn var(--duration-normal) var(--ease-out) both}.toast.toast-exit{animation:toastOut var(--duration-fast) var(--ease-out) 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(-12px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toastOut{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-8px) scale(.96)}}.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-deep);backdrop-filter:blur(var(--glass-blur-heavy));-webkit-backdrop-filter:blur(var(--glass-blur-heavy));border-top:1px solid var(--glass-border);box-shadow:0 -4px 20px #0000004d;animation:slideUpBanner var(--duration-slow) var(--ease-out) both}.install-banner-content{display:flex;align-items:center;gap:var(--space-3);max-width:480px;margin:0 auto}.install-banner-icon{width:48px;height:48px;border-radius:var(--radius-md);flex-shrink:0}.install-banner-text{flex:1}.install-banner-title{font-size:var(--text-base);font-weight:600;color:var(--text-primary)}.install-banner-desc{font-size:var(--text-xs);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)}}.transition{transition:all var(--duration-normal) var(--ease-out)}.transition-fast{transition:all var(--duration-fast) var(--ease-out)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fade-in{animation:fadeIn var(--duration-normal) var(--ease-out) both}@keyframes slideUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.slide-up{animation:slideUp var(--duration-normal) var(--ease-out) both}@keyframes slideDown{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}.slide-down{animation:slideDown var(--duration-normal) var(--ease-out) both}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.scale-in{animation:scaleIn var(--duration-normal) var(--ease-out) both}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.pulse{animation:pulse 2s ease-in-out infinite}@keyframes glowPulse{0%,to{box-shadow:0 0 8px var(--accent-glow)}50%{box-shadow:0 0 20px var(--accent-glow)}}.glow-pulse{animation:glowPulse 2.5s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}.spin{animation:spin 1s linear infinite}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff1f;border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:#ffffff38}::-webkit-scrollbar-corner{background:transparent}*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.12) 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-xl{border-radius:var(--radius-xl)}.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(--glass-border);border:none;margin:var(--space-2) 0}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--bg-overlay);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);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-deep);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border-top:1px solid var(--glass-border)}