:root{--bg:#f3f0fb;--bg-glow:#c9b2ff;--bg-glow2:#9fe6f5;--panel:rgba(255,255,255,.78);--line:rgba(88,56,170,.16);--fg:#1c1535;--muted:#655c8a;--accent:#7a3ce6;--accent2:#0a8fb2;--ok:#11875a;--off:#9a93b8;--warn:#b36b00;--err:#c4264b;--row:rgba(122,60,230,.05);--shadow:0 10px 30px rgba(60,30,130,.08)}
@media (prefers-color-scheme:dark){:root{--bg:#0a0716;--bg-glow:#5a23b8;--bg-glow2:#0f6e8c;--panel:rgba(24,17,48,.72);--line:rgba(176,140,255,.16);--fg:#ece7ff;--muted:#9a91c6;--accent:#b47bff;--accent2:#5ee3ff;--ok:#3ee6a0;--off:#655d8e;--warn:#ffb547;--err:#ff6b8b;--row:rgba(180,123,255,.06);--shadow:0 10px 40px rgba(0,0,0,.35)}}
*{box-sizing:border-box}
html{overflow-x:hidden}
body{margin:0;min-height:100vh;font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--fg);background:radial-gradient(1200px 600px at 10% -10%,color-mix(in srgb,var(--bg-glow) 45%,transparent),transparent 70%),radial-gradient(900px 500px at 110% 0%,color-mix(in srgb,var(--bg-glow2) 30%,transparent),transparent 70%),var(--bg);background-attachment:fixed}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 3px,color-mix(in srgb,var(--accent) 4%,transparent) 3px 4px);z-index:0}
body>*{position:relative;z-index:1}
.label,th,.sub,.net strong,.btn,button,.status,td[data-label]::before{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;text-transform:uppercase;letter-spacing:.12em}
.muted{color:var(--muted)}.right{text-align:right}
.panel{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:4px;box-shadow:var(--shadow);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.panel::before,.panel::after{content:"";position:absolute;width:14px;height:14px;border:2px solid var(--accent);pointer-events:none}
.panel::before{top:-1px;left:-1px;border-right:0;border-bottom:0}.panel::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
.logo{width:34px;height:34px;flex:none;margin:4px;transform:rotate(45deg);border:2px solid var(--accent);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 35%,transparent),color-mix(in srgb,var(--accent2) 25%,transparent));box-shadow:0 0 18px color-mix(in srgb,var(--accent) 45%,transparent)}
h1{margin:0;font-size:22px;font-weight:700;letter-spacing:.02em;background:linear-gradient(90deg,var(--fg),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{margin:2px 0 0;font-size:11px;color:var(--accent2)}
.top{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--panel) 60%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.top form{display:flex;align-items:center;gap:12px;min-width:0}.user{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
main{padding:20px 16px;max-width:1320px;margin:0 auto}
.hud{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.tile{display:flex;flex-direction:column;gap:4px;padding:12px 14px;min-width:0}.tile strong{font-size:19px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile span{font-size:13px}
.label{font-size:11px;color:var(--muted)}
table{width:100%;border-collapse:collapse;table-layout:auto}
th,td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:11px;font-weight:600;color:var(--accent);white-space:nowrap}
th.right{text-align:right}
tbody tr:last-child td{border-bottom:0}tbody tr:hover{background:var(--row)}
.gname{display:flex;align-items:center;gap:8px;white-space:nowrap;font-weight:600}
.vmid{font:12px ui-monospace,Menlo,monospace;color:var(--muted);font-weight:400}
.status{font-size:12px;color:var(--muted);white-space:nowrap}.running .status{color:var(--ok)}
.dot{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:1px;background:var(--off)}
.running .dot{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.tag{display:inline-block;padding:0 6px;border:1px solid var(--line);border-radius:3px;font:10px/1.6 ui-monospace,Menlo,monospace;letter-spacing:.08em;color:var(--muted);font-weight:400}
.metric{display:flex;flex-direction:column;gap:5px;min-width:96px;font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
.meter{display:block;width:100%;height:4px;background:var(--line);border-radius:2px;overflow:hidden}
.meter i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));box-shadow:0 0 8px color-mix(in srgb,var(--accent) 60%,transparent);transition:width .4s ease}
.addr{display:inline-flex;align-items:center;gap:6px;max-width:min(100%,280px);font:13px ui-monospace,Menlo,monospace}
.addr a,.addr span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.addr a{color:var(--accent2);text-decoration:none;border-bottom:1px dashed color-mix(in srgb,var(--accent2) 50%,transparent)}
.addr a:hover{border-bottom-style:solid}
.net-remote .addr a.local{opacity:.6}
.acts{display:flex;gap:6px;justify-content:flex-end}
.act{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:32px;height:30px;padding:0 8px}.act .ico{font-size:14px;line-height:1;letter-spacing:0}.act .lbl{display:none}
.st-up{display:none}
.act{position:relative}
.act[data-tip]:hover::after,.act[data-tip]:focus-visible::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);right:0;z-index:5;padding:4px 8px;border:1px solid var(--line);border-radius:3px;background:var(--bg);color:var(--fg);font-size:10px;white-space:nowrap;box-shadow:var(--shadow);pointer-events:none;animation:tip .12s ease .08s both}
@keyframes tip{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}
button{font-size:11px;padding:6px 12px;border:1px solid var(--line);border-radius:3px;background:transparent;color:var(--fg);cursor:pointer;white-space:nowrap;transition:border-color .2s,color .2s,box-shadow .2s}
button:hover:not(:disabled){border-color:var(--accent);color:var(--accent);box-shadow:0 0 12px color-mix(in srgb,var(--accent) 30%,transparent)}
button:disabled{opacity:.45;cursor:default}
button.go{border-color:color-mix(in srgb,var(--ok) 50%,transparent);color:var(--ok)}
button.danger{color:var(--err)}button.danger:hover:not(:disabled){border-color:var(--err);color:var(--err);box-shadow:0 0 12px color-mix(in srgb,var(--err) 30%,transparent)}
button.copy{padding:2px 7px;font-size:10px}
.pending{font:11px ui-monospace,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--warn)}
button:focus-visible,.btn:focus-visible,a:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
.net{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;margin:0 0 16px;padding:9px 14px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--off);border-radius:4px;font-size:14px}
.net strong{font-size:12px}.net .dot{margin-right:0}
.net.lan{border-left-color:var(--ok)}.net.lan .dot{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.net.remote{border-left-color:var(--warn)}.net.remote .dot{background:var(--warn);box-shadow:0 0 8px var(--warn)}
.login{max-width:400px;margin:14vh auto 0;padding:28px}.login .net{margin:22px 0 0}
.btn{display:block;margin-top:22px;padding:12px;text-align:center;text-decoration:none;font-size:13px;font-weight:600;color:#fff;border-radius:3px;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 55%,var(--accent2)));box-shadow:0 0 20px color-mix(in srgb,var(--accent) 40%,transparent);transition:box-shadow .2s,transform .2s}
.btn:hover{box-shadow:0 0 30px color-mix(in srgb,var(--accent) 65%,transparent);transform:translateY(-1px)}
.error{color:var(--err);margin:16px 0 0}
.foot{font:12px ui-monospace,Menlo,monospace;margin:12px 2px 0}
[hidden]{display:none!important}
.home{margin-top:20px}.home h2{margin:0 2px 10px;font-weight:600;color:var(--accent)}.home .error{margin:0 2px 10px}
.home-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr));gap:12px}
.ha{border-left:3px solid var(--off)}.ha.on{border-left-color:var(--ok)}.ha.na{opacity:.6}
.ha .label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ha strong{font-size:17px}.ha.on .dot{background:var(--ok);box-shadow:0 0 8px var(--ok)}
/* State text never truncates: when the button does not fit next to it, it wraps below. */
.ha-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.ha-row strong{min-width:auto;overflow:visible}
.ha button{flex:none;margin-left:auto}
/* Below 1300px the table turns into a grid of guest cards: no horizontal scrolling anywhere. */
@media (max-width:1300px){
  .guests-panel{background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  .guests-panel::before,.guests-panel::after{display:none}
  .guests thead{display:none}
  .guests,.guests tbody{display:block}
  .guests tbody{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));gap:12px}
  .guests tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px;padding:12px 14px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--off);border-radius:4px;box-shadow:var(--shadow);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  .guests tr.running{border-left-color:var(--ok)}
  .guests tbody tr:hover{background:var(--panel)}
  .guests td{display:block;padding:0;border:0;min-width:0}
  .guests td[data-label]::before{content:attr(data-label);display:block;margin-bottom:3px;font-size:10px;color:var(--muted)}
  .guests .c-name{grid-column:1/3}.guests .c-status{grid-column:3;text-align:right}
  .guests .c-addr{grid-column:1/-1}.guests .c-addr:empty{display:none}.guests .c-addr::before{display:none}.guests .addr{max-width:100%}
  .guests .c-up{display:none}.st-up{display:block;margin-top:2px;font:12px ui-monospace,Menlo,monospace;color:var(--muted);text-transform:none;letter-spacing:0}
  .guests .c-acts{grid-column:1/-1}.guests .c-acts:empty{display:none}
  .acts{justify-content:stretch}.act{flex:1;height:34px}.act .lbl{display:inline}.act[data-tip]::after{display:none}
  .metric{min-width:0}
}
@media (max-width:700px){
  .top{padding:12px 16px}.user{display:none}h1{font-size:19px}.logo{width:28px;height:28px}
  main{padding:12px}
  .hud{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:12px}
  .tile{padding:10px 12px}.tile strong{font-size:16px}
  .net{font-size:13px;margin-bottom:12px}
  .guests tbody{gap:8px}
  .guests tr{gap:8px 10px;padding:10px 12px}
  .net .muted{flex-basis:100%}
  .home{margin-top:12px}.home-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.ha button{width:100%;height:34px}
  .act{font-size:10px;letter-spacing:.06em;padding:0 4px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}