:root{--bg: #fafafa;--bg-elev: #ffffff;--surface: #ffffff;--surface-soft: #f4f4f6;--surface-sunk: #f0f0f3;--ink: #0b0d12;--ink-strong: #000000;--ink-muted: #525866;--ink-subtle: #8a909c;--ink-faint: #b5bac3;--border: rgba(11, 13, 18, .08);--border-strong: rgba(11, 13, 18, .14);--border-focus: rgba(79, 70, 229, .45);--accent: #4f46e5;--accent-hover: #4338ca;--accent-pressed: #3730a3;--accent-soft: #eef0ff;--accent-ink: #ffffff;--accent-on-soft: #3730a3;--danger: #dc2626;--danger-soft: #fef2f2;--danger-ink: #b91c1c;--success: #16a34a;--success-soft: #f0fdf4;--success-ink: #15803d;--warning: #d97706;--warning-soft: #fffbeb;--warning-ink: #b45309;--radius-xs: 6px;--radius-sm: 8px;--radius-md: 10px;--radius-lg: 14px;--radius-xl: 20px;--radius-full: 999px;--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: 56px;--space-16: 80px;--shadow-xs: 0 1px 2px rgba(11, 13, 18, .04);--shadow-sm: 0 1px 2px rgba(11, 13, 18, .04), 0 1px 1px rgba(11, 13, 18, .02);--shadow-md: 0 4px 12px rgba(11, 13, 18, .06), 0 1px 2px rgba(11, 13, 18, .03);--shadow-lg: 0 10px 30px rgba(11, 13, 18, .08), 0 2px 6px rgba(11, 13, 18, .04);--ring-focus: 0 0 0 3px rgba(79, 70, 229, .18);--sidebar-width: 260px;--topbar-height: 56px;--content-max: 1200px;--font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;--font-display: "Space Grotesk", "IBM Plex Sans", system-ui, sans-serif;--font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;--ease: cubic-bezier(.2, 0, 0, 1);--ease-out: cubic-bezier(.16, 1, .3, 1);--dur-fast: .12s;--dur: .18s;--dur-slow: .32s}:root[data-theme=dark]{--bg: #0a0b10;--bg-elev: #0f1117;--surface: #12141c;--surface-soft: #181b25;--surface-sunk: #0d0f15;--ink: #f4f5f8;--ink-strong: #ffffff;--ink-muted: #a4a9b6;--ink-subtle: #6e7484;--ink-faint: #4b5060;--border: rgba(255, 255, 255, .08);--border-strong: rgba(255, 255, 255, .14);--border-focus: rgba(129, 140, 248, .55);--accent: #818cf8;--accent-hover: #6f7be8;--accent-pressed: #5d68d6;--accent-soft: rgba(129, 140, 248, .14);--accent-ink: #0a0b10;--accent-on-soft: #c7ccff;--danger: #f87171;--danger-soft: rgba(248, 113, 113, .1);--danger-ink: #fca5a5;--success: #4ade80;--success-soft: rgba(74, 222, 128, .1);--success-ink: #86efac;--warning: #fbbf24;--warning-soft: rgba(251, 191, 36, .1);--warning-ink: #fcd34d;--shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);--shadow-md: 0 4px 12px rgba(0, 0, 0, .5);--shadow-lg: 0 10px 30px rgba(0, 0, 0, .6);--ring-focus: 0 0 0 3px rgba(129, 140, 248, .28)}*,*:before,*:after{box-sizing:border-box}*{margin:0}html,body{height:100%}html{background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;text-size-adjust:100%}body{font-family:var(--font-sans);font-size:15px;line-height:1.55;color:var(--ink);background:var(--bg);font-feature-settings:"ss01","cv11"}img,svg,video{display:block;max-width:100%}button,input,select,textarea{font:inherit;color:inherit}button{background:none;border:0;padding:0;cursor:pointer}a{color:var(--accent);text-decoration:none;transition:color var(--dur) var(--ease)}a:hover{color:var(--accent-hover)}::selection{background:var(--accent-soft);color:var(--accent-on-soft)}h1,h2,h3,h4,h5{font-family:var(--font-display);color:var(--ink);letter-spacing:-.02em;line-height:1.15;font-weight:600}.app-shell{display:grid;grid-template-columns:var(--sidebar-width) 1fr;min-height:100vh;background:var(--bg)}.app-main{min-width:0;display:flex;flex-direction:column}.sidebar{position:sticky;top:0;align-self:start;height:100vh;width:var(--sidebar-width);display:flex;flex-direction:column;padding:var(--space-5) var(--space-4);background:var(--bg-elev);border-right:1px solid var(--border);z-index:30}.sidebar-brand{display:flex;align-items:center;gap:10px;padding:var(--space-2);margin-bottom:var(--space-6);text-decoration:none;color:var(--ink)}.brand-mark{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--ink);color:var(--bg-elev);font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:-.02em}:root[data-theme=dark] .brand-mark{background:var(--ink);color:var(--bg)}.brand-name{font-family:var(--font-display);font-weight:600;font-size:16px;letter-spacing:-.015em}.sidebar-section-label{text-transform:uppercase;font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--ink-subtle);padding:0 var(--space-3);margin:var(--space-4) 0 var(--space-2)}.sidebar-nav{display:flex;flex-direction:column;gap:2px}.sidebar-link{display:flex;align-items:center;gap:10px;padding:8px var(--space-3);border-radius:var(--radius-sm);color:var(--ink-muted);font-size:14px;font-weight:500;text-decoration:none;transition:background var(--dur) var(--ease),color var(--dur) var(--ease);position:relative}.sidebar-link:hover{background:var(--surface-soft);color:var(--ink)}.sidebar-link .material-symbols-outlined{font-size:20px;font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24;color:var(--ink-subtle);transition:color var(--dur) var(--ease)}.sidebar-link:hover .material-symbols-outlined{color:var(--ink)}.sidebar-link.active{background:var(--surface-soft);color:var(--ink);font-weight:600}.sidebar-link.active .material-symbols-outlined{color:var(--accent);font-variation-settings:"FILL" 1,"wght" 500}.sidebar-footer{margin-top:auto;padding-top:var(--space-4);border-top:1px solid var(--border);display:flex;flex-direction:column;gap:var(--space-2)}.sidebar-user{display:flex;align-items:center;gap:10px;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm)}.sidebar-user-avatar{width:28px;height:28px;border-radius:var(--radius-full);background:var(--accent-soft);color:var(--accent-on-soft);display:grid;place-items:center;font-weight:600;font-size:12px;flex-shrink:0}.sidebar-user-info{min-width:0}.sidebar-user-name{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-user-email{font-size:11px;color:var(--ink-subtle);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.theme-toggle{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:var(--radius-sm);background:var(--surface-soft);border:1px solid var(--border);color:var(--ink-muted);font-size:12px;font-weight:500;cursor:pointer;transition:background var(--dur) var(--ease)}.theme-toggle:hover{background:var(--surface-sunk);color:var(--ink)}.theme-toggle .material-symbols-outlined{font-size:16px}.topbar{display:none;align-items:center;justify-content:space-between;height:var(--topbar-height);padding:0 var(--space-4);background:var(--bg-elev);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20}.topbar-brand{display:flex;align-items:center;gap:10px}.topbar-menu{width:36px;height:36px;display:grid;place-items:center;border-radius:var(--radius-sm);color:var(--ink-muted);transition:background var(--dur) var(--ease)}.topbar-menu:hover{background:var(--surface-soft);color:var(--ink)}.page{flex:1;padding:var(--space-10) var(--space-8);max-width:var(--content-max);width:100%;margin:0 auto;animation:page-in var(--dur-slow) var(--ease-out)}@keyframes page-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.page-header{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-6);margin-bottom:var(--space-8);padding-bottom:var(--space-6);border-bottom:1px solid var(--border)}.eyebrow{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.04em;color:var(--ink-subtle);text-transform:uppercase;margin-bottom:10px}.eyebrow:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}.page-title{font-family:var(--font-display);font-size:36px;font-weight:600;letter-spacing:-.025em;color:var(--ink)}.page-subtitle{margin-top:var(--space-2);font-size:16px;color:var(--ink-muted);max-width:60ch}.page-actions{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}.back-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--ink-muted);margin-bottom:var(--space-4);transition:color var(--dur) var(--ease)}.back-link:hover{color:var(--ink)}.back-link .material-symbols-outlined{font-size:16px}.section{margin-bottom:var(--space-10)}.section-header{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-5)}.section-header h2{font-family:var(--font-display);font-size:20px;font-weight:600;letter-spacing:-.015em}.section-header .section-meta{font-size:13px;color:var(--ink-subtle)}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-6);transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}.card.is-clickable{cursor:pointer}.card.is-clickable:hover{border-color:var(--border-strong);transform:translateY(-1px);box-shadow:var(--shadow-md)}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-4)}.card-title{font-family:var(--font-display);font-size:16px;font-weight:600;letter-spacing:-.01em;margin-bottom:var(--space-1)}.card-meta{font-size:13px;color:var(--ink-subtle);font-family:var(--font-mono)}.card-actions{margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--border);display:flex;gap:var(--space-2);flex-wrap:wrap}.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-2)}.stat-label{font-size:13px;color:var(--ink-muted);font-weight:500}.stat-value{font-family:var(--font-display);font-size:44px;font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--ink)}.stat-delta{font-family:var(--font-mono);font-size:12px;color:var(--success-ink);display:inline-flex;align-items:center;gap:4px}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}.panel-header{padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--border);background:var(--surface-soft);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}.panel-header h3{font-size:15px;font-weight:600;letter-spacing:-.01em}.panel-header p{margin-top:4px;font-size:13px;color:var(--ink-muted)}.panel-body{padding:var(--space-6)}.panel-footer{padding:var(--space-4) var(--space-6);background:var(--surface-soft);border-top:1px solid var(--border);display:flex;gap:var(--space-2);justify-content:flex-end}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 14px;border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:13px;font-weight:500;letter-spacing:-.005em;white-space:nowrap;cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur-fast) var(--ease),box-shadow var(--dur) var(--ease);border:1px solid transparent;-webkit-user-select:none;user-select:none}.btn:focus-visible{outline:none;box-shadow:var(--ring-focus)}.btn:active{transform:translateY(.5px)}.btn .material-symbols-outlined{font-size:18px}.btn-primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.btn-primary:active{background:var(--accent-pressed)}.btn-outline{background:var(--surface);color:var(--ink);border-color:var(--border-strong)}.btn-outline:hover{background:var(--surface-soft)}.btn-soft{background:var(--accent-soft);color:var(--accent-on-soft)}.btn-soft:hover{background:color-mix(in srgb,var(--accent-soft) 70%,var(--accent) 10%)}.btn-ghost{background:transparent;color:var(--ink-muted)}.btn-ghost:hover{background:var(--surface-soft);color:var(--ink)}.btn-danger{background:transparent;color:var(--danger-ink);border-color:var(--border)}.btn-danger:hover{background:var(--danger-soft);border-color:var(--danger);color:var(--danger)}.btn-sm{height:30px;padding:0 10px;font-size:12px;border-radius:var(--radius-xs)}.btn-lg{height:44px;padding:0 20px;font-size:14px}.btn-pill{border-radius:var(--radius-full)}.btn-block{width:100%}.btn[disabled],.btn:disabled{opacity:.5;cursor:not-allowed}.input{width:100%;height:38px;padding:0 12px;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-sm);color:var(--ink);font-family:var(--font-sans);font-size:14px;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease);appearance:none}.input::placeholder{color:var(--ink-faint)}.input:hover{border-color:color-mix(in srgb,var(--border-strong) 60%,var(--ink-muted) 30%)}.input:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring-focus)}textarea.input{height:auto;padding:10px 12px;resize:vertical;min-height:88px}select.input{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a909c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}.form-field{display:flex;flex-direction:column;gap:6px}.form-field label{font-size:13px;font-weight:500;color:var(--ink)}.form-field .hint{font-size:12px;color:var(--ink-subtle)}.form-row{display:flex;gap:var(--space-3);align-items:flex-end;flex-wrap:wrap}.form-row>*{flex:1;min-width:200px}.form-row .btn{flex:0}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}@media (max-width: 640px){.form-grid{grid-template-columns:1fr}}.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--radius-full);background:var(--surface-soft);color:var(--ink-muted);font-size:12px;font-weight:500;border:1px solid var(--border);font-family:var(--font-sans)}.pill:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85}.pill.pill-success{background:var(--success-soft);color:var(--success-ink);border-color:transparent}.pill.pill-danger{background:var(--danger-soft);color:var(--danger-ink);border-color:transparent}.pill.pill-warning{background:var(--warning-soft);color:var(--warning-ink);border-color:transparent}.pill.pill-accent{background:var(--accent-soft);color:var(--accent-on-soft);border-color:transparent}.pill.pill-plain:before{display:none}.status-text{font-size:13px;color:var(--ink-muted)}.error-text{font-size:13px;color:var(--danger-ink)}.success-text{font-size:13px;color:var(--success-ink)}.auth-page{min-height:100vh;display:grid;place-items:center;padding:var(--space-8);background:radial-gradient(circle at 20% 10%,var(--accent-soft) 0%,transparent 40%),radial-gradient(circle at 80% 90%,var(--accent-soft) 0%,transparent 35%),var(--bg)}.auth-card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-8);box-shadow:var(--shadow-lg)}.auth-header{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);margin-bottom:var(--space-6);text-align:center}.auth-mark{width:44px;height:44px;border-radius:var(--radius-md);background:var(--ink);color:var(--bg-elev);display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-.02em}.auth-title{font-family:var(--font-display);font-size:24px;font-weight:600;letter-spacing:-.02em}.auth-subtitle{font-size:14px;color:var(--ink-muted)}.auth-form{display:flex;flex-direction:column;gap:var(--space-4)}.auth-footer{margin-top:var(--space-6);padding-top:var(--space-5);border-top:1px solid var(--border);text-align:center;font-size:13px;color:var(--ink-muted)}.auth-footer a,.auth-footer button{color:var(--accent);font-weight:500;background:none;border:none;cursor:pointer;font-size:13px;padding:0}.auth-footer a:hover,.auth-footer button:hover{color:var(--accent-hover)}.data-table{width:100%;border-collapse:collapse;font-size:14px}.data-table th{text-align:left;font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-subtle);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border);background:var(--surface-soft)}.data-table td{padding:var(--space-4);border-bottom:1px solid var(--border);color:var(--ink)}.data-table tr:last-child td{border-bottom:0}.data-table tr:hover td{background:var(--surface-soft)}.data-table .row-actions{display:flex;gap:var(--space-2);justify-content:flex-end}.device-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border);transition:background var(--dur) var(--ease)}.device-row:last-child{border-bottom:0}.device-row:hover{background:var(--surface-soft)}.device-info{display:flex;flex-direction:column;gap:4px;min-width:0}.device-name{font-weight:600;font-size:14px;color:var(--ink);display:flex;align-items:center;gap:8px}.device-meta{font-family:var(--font-mono);font-size:12px;color:var(--ink-subtle)}.device-actions{display:flex;gap:var(--space-2);flex-shrink:0}.scan-stage{display:flex;flex-direction:column;align-items:center;gap:var(--space-6);padding:var(--space-12) var(--space-6);text-align:center}.scan-orb{position:relative;width:180px;height:180px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,var(--accent-soft) 0%,transparent 70%)}.scan-orb:before,.scan-orb:after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--accent);opacity:.4;animation:pulse 2.4s ease-out infinite}.scan-orb:after{animation-delay:1.2s}.scan-orb .material-symbols-outlined{font-size:64px;color:var(--accent);font-variation-settings:"wght" 300}@keyframes pulse{0%{transform:scale(.6);opacity:.5}to{transform:scale(1.4);opacity:0}}.scan-result{display:grid;grid-template-columns:max-content 1fr;gap:var(--space-3) var(--space-5);font-size:14px;text-align:left}.scan-result dt{color:var(--ink-subtle);font-family:var(--font-mono);font-size:12px}.scan-result dd{color:var(--ink);font-family:var(--font-mono)}.app-footer{margin-top:auto;padding:var(--space-5) var(--space-8);border-top:1px solid var(--border);background:var(--bg-elev);display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--ink-subtle);flex-wrap:wrap;gap:var(--space-3)}.app-footer a{color:var(--ink-muted)}.app-footer a:hover{color:var(--ink)}.app-footer-links{display:flex;gap:var(--space-5)}.text-page{max-width:720px;margin:0 auto;padding:var(--space-10) var(--space-8)}.text-page h1{font-size:32px;margin-bottom:var(--space-2)}.text-page h2{font-size:20px;margin-top:var(--space-8);margin-bottom:var(--space-3)}.text-page p{color:var(--ink-muted);margin-bottom:var(--space-3);line-height:1.7}.text-page ul{color:var(--ink-muted);margin-bottom:var(--space-3);padding-left:var(--space-6)}.text-page li{margin-bottom:var(--space-2);line-height:1.7}.text-page .text-muted{font-size:14px;color:var(--ink-subtle)}.text-page section{margin-bottom:var(--space-8)}@media (max-width: 768px){.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;inset:0 auto 0 0;transform:translate(-100%);transition:transform var(--dur-slow) var(--ease-out);box-shadow:var(--shadow-lg)}.sidebar.is-open{transform:translate(0)}.topbar{display:flex}.page{padding:var(--space-6) var(--space-5)}.page-header{flex-direction:column;align-items:flex-start}.page-title{font-size:28px}.device-row{grid-template-columns:1fr}}.row{display:flex;gap:var(--space-3);align-items:center}.row.between{justify-content:space-between}.stack{display:flex;flex-direction:column;gap:var(--space-3)}.stack.tight{gap:var(--space-2)}.stack.loose{gap:var(--space-5)}.muted{color:var(--ink-muted)}.subtle{color:var(--ink-subtle)}.mono{font-family:var(--font-mono)}.divider{height:1px;background:var(--border);margin:var(--space-5) 0;border:0}.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4)}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}@media (max-width: 768px){.grid-2,.grid-3{grid-template-columns:1fr}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
