:root{
  color-scheme:light;
  --canvas:#f7f8f6;--surface:#fff;--nav:#172025;--nav-line:#2b373b;
  --ink:#172329;--muted:#68777d;--line:#e1e7e6;--teal:#117c75;
  --teal-hover:#0d655f;--teal-pale:#e6f3f0;--danger:#a33432;
  --danger-pale:#fff3f1;--radius:12px;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-synthesis:none;
}
*{box-sizing:border-box}
html{min-height:100%;scroll-behavior:smooth}
body{margin:0;min-height:100vh;color:var(--ink);background:var(--canvas);font-size:14px;line-height:1.48}
button,input{font:inherit}
button{cursor:pointer}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid #78c6bb;outline-offset:3px}
h1,h2,p{margin-top:0}
h1{font-size:clamp(32px,3.1vw,42px);line-height:1.12;letter-spacing:-.045em;margin-bottom:10px;font-weight:760}
h2{font-size:20px;line-height:1.25;letter-spacing:-.028em;margin-bottom:8px;font-weight:710}
small{font-size:12px}
.muted,.page-subtitle{color:var(--muted)}
.page-subtitle{font-size:15px;margin-bottom:0}
.small{font-size:12px}
.mono,.ip-value{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.app-shell{display:flex;min-height:100vh}
.sidebar{width:232px;flex:0 0 232px;min-height:100vh;background:var(--nav);color:#f4faf8;display:flex;flex-direction:column;padding:27px 14px 20px}
.sidebar-brand{display:flex;align-items:center;gap:11px;padding:0 10px;color:#fff;font-size:18px;font-weight:750;letter-spacing:-.025em;line-height:1.1}
.sidebar-brand:hover{text-decoration:none}
.sidebar-brand small,.login-brand small{display:block;font-size:11px;font-weight:500;color:#a5b5b8;letter-spacing:0;margin-top:4px}
.brand-mark{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#1c4949;color:#7ad1c1;font-size:20px;font-weight:800;letter-spacing:-.08em}
.sidebar-section{color:#809397;text-transform:uppercase;letter-spacing:.11em;font-size:10px;font-weight:750;margin:49px 12px 12px}
.sidebar-nav{display:grid;gap:5px}
.nav-link{display:flex;align-items:center;gap:12px;border-radius:9px;color:#bdcbcb;padding:11px 13px;font-weight:610;transition:background .16s ease,color .16s ease}
.nav-link:hover,.nav-link.current{background:#2a393e;color:#fff;text-decoration:none}
.nav-link svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sidebar-foot{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--nav-line);border-radius:10px;margin-top:auto;padding:13px;color:#e1e9e8;font-size:12px;font-weight:650}
.sidebar-foot small{display:block;color:#93a5a6;font-weight:450;margin-top:2px}
.service-dot{height:8px;width:8px;background:#51c9a1;border-radius:50%;margin-top:5px;flex:0 0 8px}
.workspace{min-width:0;flex:1}
.topbar{height:70px;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(25px,3vw,48px)}
.topbar-label{color:#64747a;font-size:13px}
.topbar form{margin-left:auto}
.account-button{display:flex;align-items:center;gap:10px;border:0;background:transparent;color:var(--ink);padding:6px 0 6px 8px;border-radius:9px}
.account-button:hover .logout-label{text-decoration:underline}
.avatar{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:#edf0ef;color:#425257;font-size:13px;font-weight:700}
.account-name{font-weight:620}
.logout-label{margin-left:10px;color:var(--teal);font-size:12px}
.mobile-brand{display:none;font-weight:750;color:var(--ink);font-size:17px}
.container{max-width:1280px;margin:0 auto;padding:42px clamp(25px,3vw,48px) 80px}
.container.narrow{max-width:800px}
.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px}
.eyebrow,.section-kicker{color:var(--teal);text-transform:uppercase;letter-spacing:.11em;font-size:11px;font-weight:770;margin-bottom:9px}
.total-pill,.quiet-pill{border:1px solid var(--line);border-radius:8px;background:#fff;padding:8px 12px;font-size:12px;color:#4f6065;white-space:nowrap;font-weight:650}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 2px 9px rgba(20,38,38,.025)}
.create-card{padding:25px 28px 20px;margin-bottom:24px}
.card-heading p.muted{margin-bottom:0}
.create-form{display:flex;align-items:flex-end;gap:12px;margin-top:21px}
.form-field{display:grid;gap:7px;min-width:0}
.create-form .form-field{flex:1}
.form-field label{font-size:12px;font-weight:690;color:#354348}
input{height:43px;border:1px solid #cbd6d4;border-radius:8px;padding:0 13px;background:#fff;color:var(--ink);min-width:0;transition:border-color .16s ease,box-shadow .16s ease}
input:hover{border-color:#a9bcba}
input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px #dbefeb}
input::placeholder{color:#96a3a5}
.primary,.secondary,.danger{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:43px;padding:0 17px;border-radius:8px;font-weight:680;white-space:nowrap;text-decoration:none;transition:background .16s ease,border-color .16s ease,transform .16s ease}
.primary{background:var(--teal);border:1px solid var(--teal);color:#fff}
.primary:hover{background:var(--teal-hover);border-color:var(--teal-hover);color:#fff;text-decoration:none}
.primary:active,.secondary:active,.danger:active{transform:translateY(1px)}
.plus{font-size:22px;line-height:0;font-weight:350;margin-right:1px}
.form-hint{font-size:12px;color:#809092;margin:12px 0 0}
.list-card{overflow:hidden}
.list-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:24px 28px 19px}
.list-heading h2{margin-bottom:0}
.list-heading .section-kicker{margin-bottom:6px}
.list-heading .muted{max-width:280px;text-align:right}
.table-wrap{overflow:auto}
table{border-collapse:collapse;width:100%;min-width:790px}
th{text-align:left;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fafbfa;color:#6d7b7f;font-size:11px;font-weight:750;letter-spacing:.055em;text-transform:uppercase;padding:13px 15px;white-space:nowrap}
th:first-child,td:first-child{padding-left:28px}
th:last-child,td:last-child{padding-right:28px}
td{border-bottom:1px solid #edf0ee;padding:16px 15px;vertical-align:middle;font-variant-numeric:tabular-nums}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:#fbfdfc}
.device-cell{display:flex;align-items:center;gap:10px;min-width:160px}
.device-icon{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:9px;background:#edf3f1;color:#49746f;font-size:13px;font-weight:760}
.device-cell strong{display:block;font-size:13px;font-weight:710}
.cell-subtitle{display:block;color:#819094;font-size:11px;margin-top:2px}
.ip-value{background:#f2f5f4;border:1px solid #e9eeec;padding:5px 7px;border-radius:6px;font-size:11px;color:#3c5259}
.state-line{display:flex;align-items:center;gap:7px;white-space:nowrap;font-size:12px;font-weight:600}
.state-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#a5b0b0;flex:0 0 7px}
.state-dot.recent{background:#28a47a}
.traffic{font-size:11px;white-space:nowrap;color:#55666b}
.traffic span{display:block}
.traffic span+span{margin-top:3px}
.action-cell{text-align:right}
.row-action{white-space:nowrap;font-size:12px;font-weight:700}
.row-action span{margin-left:4px}
.empty{display:grid;justify-items:center;gap:8px;text-align:center;padding:45px 24px;color:var(--muted)}
.empty strong{color:var(--ink);font-size:17px}
.empty-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--teal-pale);color:var(--teal);font-size:24px}
.footnote{color:var(--muted);font-size:12px;margin-top:18px}
.breadcrumb{display:flex;gap:10px;align-items:center;font-size:12px;color:#77878b;margin:0 0 25px}
.breadcrumb span[aria-current]{color:var(--ink);font-weight:650}
.detail-heading{margin-bottom:23px}
.facts-bar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 22px;margin-bottom:23px}
.facts-bar>div{display:grid;gap:4px;padding:1px 20px}
.facts-bar>div:first-child{padding-left:0}
.facts-bar>div+div{border-left:1px solid var(--line)}
.fact-label{color:#829094;font-size:11px}
.facts-bar strong{font-size:13px;font-weight:680;font-variant-numeric:tabular-nums}
.detail-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:22px}
.setup-card,.qr-card{padding:26px 28px}
.steps{list-style:none;padding:0;margin:28px 0 25px;display:grid;gap:19px}
.steps li{display:flex;gap:13px;align-items:flex-start}
.step-number{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:#e2f2ef;color:var(--teal);font-weight:750;font-size:12px}
.steps strong{font-size:13px}
.steps p{color:var(--muted);font-size:12px;margin:3px 0 0;max-width:320px}
.link-button:hover{text-decoration:none}
.qr-card{display:flex;flex-direction:column;align-items:flex-start}
.qr-card .muted{margin-bottom:0;font-size:13px}
.qr-frame{align-self:center;margin:22px 0 16px;padding:10px;border:1px solid var(--line);border-radius:10px;background:#fff}
.qr{display:block;width:min(235px,100%);height:auto;aspect-ratio:1;image-rendering:pixelated}
.secret-note{font-size:11px;color:#7d8a8e;align-self:center;text-align:center;margin:0;max-width:270px}
.danger-zone{display:flex;align-items:center;justify-content:space-between;gap:20px;border:1px solid #efd7d5;background:#fffaf9;border-radius:var(--radius);padding:20px 24px;margin-top:22px}
.danger-zone h2{font-size:15px;color:var(--danger);margin-bottom:3px}
.danger-zone p{color:#7f6260;margin:0;font-size:12px}
.danger{border:1px solid #dc9995;background:#fff;color:var(--danger)}
.danger:hover{background:var(--danger-pale);text-decoration:none}
.danger.filled{background:var(--danger);border-color:var(--danger);color:#fff}
.danger.filled:hover{background:#852725}
.alert{border:1px solid #e9b9ae;background:#fff2ef;color:#873e33;border-radius:8px;padding:12px 14px}
.confirm-card{padding:35px;margin-top:12px}
.confirm-card h1{font-size:29px}
.confirm-card .muted{max-width:510px}
.confirm-card form{display:flex;gap:12px;margin-top:28px}
.warning-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:9px;background:var(--danger-pale);color:var(--danger);font-size:22px;font-weight:730;margin-bottom:20px}
.secondary{border:1px solid var(--line);background:#fff;color:var(--ink)}
.secondary:hover{background:#f4f7f5;text-decoration:none}
.login-page,.error-page{display:grid;place-items:center;padding:25px;min-height:100vh;background:var(--canvas)}
.login-page{grid-template-rows:1fr auto}
.login-card{width:min(450px,100%);background:#fff;border:1px solid var(--line);border-radius:16px;padding:36px;box-shadow:0 16px 48px rgba(20,38,38,.055);align-self:center}
.login-brand{display:flex;align-items:center;gap:12px;color:var(--ink);font-size:19px;font-weight:750;letter-spacing:-.03em}
.login-brand small{color:#849296}
.login-copy{margin:45px 0 24px}
.login-copy h1{font-size:32px}
.login-form{display:grid;gap:19px}
.login-form .form-field input{width:100%}
.login-form .wide{width:100%;justify-content:space-between;margin-top:3px}
.login-foot{font-size:11px;color:#9aa7a8;align-self:end;margin:0}
.error-card{max-width:520px;padding:35px}
.error-card h1{font-size:30px}
.error-card .alert{margin:22px 0}
@media(max-width:1100px){.sidebar{width:205px;flex-basis:205px}.container{padding-left:25px;padding-right:25px}.topbar{padding-left:25px;padding-right:25px}.detail-grid{grid-template-columns:1fr 1fr}}
@media(max-width:830px){.sidebar{width:62px;flex-basis:62px;padding:18px 8px}.sidebar-brand{padding:0 6px}.sidebar-brand>span:last-child,.sidebar-section,.nav-link{font-size:0}.sidebar-nav{margin-top:48px}.nav-link{justify-content:center;padding:12px}.nav-link svg{width:21px;height:21px}.sidebar-foot{padding:11px;justify-content:center}.sidebar-foot>span:last-child{display:none}.container{padding:30px 23px 60px}.topbar{height:62px;padding:0 23px}}
@media(max-width:650px){.app-shell{display:block}.sidebar{display:none}.topbar-label{display:none}.mobile-brand{display:block}.container{padding:26px 16px 55px}.page-heading{align-items:flex-start}.total-pill{margin-top:5px}.create-card,.setup-card,.qr-card{padding:22px}.create-form{display:grid;gap:11px}.create-form .primary{width:100%}.list-heading{padding:21px 22px}.list-heading .muted{display:none}.detail-grid{grid-template-columns:1fr}.facts-bar{grid-template-columns:1fr;padding:8px 19px}.facts-bar>div,.facts-bar>div:first-child{padding:12px 0}.facts-bar>div+div{border-left:0;border-top:1px solid var(--line)}.danger-zone{align-items:flex-start;flex-direction:column}.account-name{display:none}.logout-label{margin-left:0}.login-card{padding:28px}.confirm-card{padding:25px}.confirm-card form{display:grid}.confirm-card .link-button{width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}