/* Style A — Néon corail (DEV first pass 2026-10-24). Presentation only. DEV accent #D84B2E, PROD #5F778E. */
:root{--bg:#0A0E1A;--surface:rgba(17,24,39,.72);--line:rgba(216,75,46,.18);--fg:#E6F1FF;--muted:#8FA3BF;
--primary:#D84B2E;--offline:#FFB020;--cyan:#D84B2E;--coral:#F28A6B;--on:#39FF88;--red:#D84B2E;--red-hover:#E8664B;--red-deep:#A8381F;--red-glow:rgba(216,75,46,.55);
--prod:#5F778E;--accent:var(--cyan);--err:var(--red);--ok:var(--on);--hamelit-accent:#D84B2E;
--mono:ui-monospace,"Cascadia Code","JetBrains Mono",Consolas,monospace}
html{background:var(--bg)}
body{color:var(--fg);font-family:"Segoe UI Variable","Segoe UI",Inter,system-ui,sans-serif;
background:radial-gradient(1200px 600px at 10% -10%,rgba(216,75,46,.12),transparent 60%),radial-gradient(900px 500px at 110% 10%,rgba(242,138,107,.10),transparent 60%),
linear-gradient(rgba(216,75,46,.04) 1px,transparent 1px) 0 0/32px 32px,linear-gradient(90deg,rgba(216,75,46,.04) 1px,transparent 1px) 0 0/32px 32px,var(--bg);min-height:100vh}
.hh{--hh-bg:rgba(10,14,26,.85);--hh-ink:#E6F1FF;--hh-muted:#8FA3BF;--hh-line:rgba(216,75,46,.25);backdrop-filter:blur(10px);border-bottom:2px solid var(--hamelit-accent);box-shadow:0 2px 24px var(--red-glow)}
.hh-envs,.hh-home{background:rgba(17,24,39,.8)}
.hh-envs .hh-env-dev[aria-current="true"]{background:var(--red);color:#fff;box-shadow:0 0 12px var(--red-glow)}
.hh-envs .hh-env-prod[aria-current="true"]{background:var(--prod);color:#fff}
.hh-mark{box-shadow:0 0 14px var(--red-glow)}
main{max-width:56rem;background:var(--surface);border:1px solid var(--line);border-radius:18px;margin:2rem auto;padding:2rem;backdrop-filter:blur(12px);box-shadow:0 0 0 1px rgba(242,138,107,.06),0 20px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04)}
h1{font-weight:700;letter-spacing:.02em;background:linear-gradient(90deg,var(--cyan),var(--coral));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 24px rgba(216,75,46,.25)}
h2{color:var(--cyan);text-transform:uppercase;letter-spacing:.12em;font-size:.95rem;border-bottom:1px solid var(--line);padding-bottom:.4rem}
a{color:var(--cyan)}a:hover{color:var(--coral);text-shadow:0 0 8px rgba(242,138,107,.6)}
.hint,.small,.soon{color:var(--muted)}
input[type=text],input[type=email],input[type=password]{background:rgba(10,14,26,.8);color:var(--fg);border:1px solid rgba(216,75,46,.35);border-radius:10px}
input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(216,75,46,.25),0 0 18px rgba(216,75,46,.35)}
button{background:linear-gradient(90deg,#A8381F,var(--cyan));color:#fff;font-weight:700;border-radius:10px;box-shadow:0 0 18px rgba(216,75,46,.35);transition:transform .15s,box-shadow .15s}
button:hover{transform:translateY(-1px);box-shadow:0 0 28px rgba(216,75,46,.6)}
button.secondary{background:transparent;color:var(--coral);border:1px solid var(--coral);box-shadow:0 0 12px rgba(242,138,107,.25)}
button.secondary:hover{box-shadow:0 0 22px rgba(242,138,107,.55)}
button[disabled],button[disabled]:hover{transform:none;box-shadow:none;filter:grayscale(.6)}
.msg{background:rgba(10,14,26,.6);border-radius:8px}.msg-info{background:rgba(242,138,107,.08);border-left-color:var(--coral)}
.step-badge{background:rgba(216,75,46,.12);color:var(--cyan)}
.dev-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}
.dev-card{margin:0;background:rgba(10,14,26,.7);border:1px solid var(--line);border-radius:14px;padding:1rem 1.2rem;transition:transform .15s,box-shadow .15s,border-color .15s}
.dev-card:hover{transform:translateY(-3px);border-color:var(--cyan);box-shadow:0 0 24px rgba(216,75,46,.3)}
.dev-kv dt{color:var(--muted);font-weight:500;text-transform:uppercase;font-size:.8em;letter-spacing:.08em}
.dev-status.on{background:rgba(57,255,136,.12);color:var(--on);border:1px solid var(--on);box-shadow:0 0 12px rgba(57,255,136,.45)}
.dev-status.off{background:rgba(255,176,32,.12);color:#FFB020;border:1px solid #FFB020;box-shadow:0 0 12px rgba(255,176,32,.45)}
.dev-status::before{content:"● "}
.sig-bar{background:rgba(143,163,191,.25)}.sig-bar.on{background:var(--cyan);box-shadow:0 0 6px var(--cyan)}
.code{font-family:var(--mono);color:var(--cyan)}
.cta-devices{display:flex;align-items:center;gap:1rem;margin:1.2rem 0;padding:1.1rem 1.3rem;border-radius:14px;text-decoration:none;color:var(--fg);font-size:1.2rem;font-weight:700;
background:linear-gradient(135deg,rgba(216,75,46,.16),rgba(242,138,107,.16));border:1px solid var(--cyan);box-shadow:0 0 22px rgba(216,75,46,.3)}
.cta-devices:hover{color:#fff;box-shadow:0 0 34px rgba(242,138,107,.5);border-color:var(--coral);text-shadow:none}
.cta-devices .cta-ico{font-size:1.6rem}.cta-devices .cta-go{margin-left:auto;color:var(--coral)}
.foot{color:var(--muted)}
.style-badge{display:inline-block;margin-left:.6rem;padding:.1rem .55rem;border-radius:999px;border:1px solid var(--coral);color:var(--coral);font-size:.75rem;box-shadow:0 0 10px rgba(242,138,107,.35)}
.cta-xl{font-size:1.5rem;padding:1.6rem 1.6rem;margin:.5rem 0 1.5rem}
.sec-details{margin-top:1.5rem;border:1px solid var(--line);border-radius:14px;padding:.6rem 1.1rem;background:rgba(10,14,26,.5)}
.sec-details>summary{cursor:pointer;color:var(--coral);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.9rem}
.logout-small{margin-top:1.2rem;text-align:right}.logout-small button{font-size:.85rem;padding:.3rem .8rem;min-height:32px;margin:0}
.sec-details{border:0;background:none;padding:0}
.sec-details>summary.settings-btn{display:inline-flex;align-items:center;gap:.5rem;list-style:none;padding:.6rem 1.3rem;border:1px solid var(--coral);border-radius:10px;text-transform:none;letter-spacing:0;font-size:1.05rem;box-shadow:0 0 12px rgba(242,138,107,.35)}
.sec-details>summary.settings-btn::-webkit-details-marker{display:none}
.sec-details>summary.settings-btn:hover{box-shadow:0 0 22px rgba(242,138,107,.6)}
.sec-details[open]>summary.settings-btn{background:rgba(242,138,107,.12)}
.settings-panel{margin-top:1rem;border:1px solid var(--line);border-radius:14px;padding:.6rem 1.2rem 1.2rem;background:rgba(10,14,26,.55)}
a.settings-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.3rem;border:1px solid var(--coral);border-radius:10px;color:var(--coral);text-decoration:none;font-weight:700;box-shadow:0 0 12px rgba(242,138,107,.35)}
a.settings-btn:hover{box-shadow:0 0 22px rgba(242,138,107,.6)}
.settings-panel{margin:1.2rem 0}
select{width:100%;font-size:1.05rem;padding:.55rem;background:rgba(10,14,26,.8);color:var(--fg);border:1px solid rgba(216,75,46,.35);border-radius:10px}
.switch{display:flex;align-items:center;gap:.6rem}.switch input{width:1.3rem;height:1.3rem;accent-color:#D84B2E}

/* ---- subscription card (2026-10-24 19:51): >60 d date only; 31-60 green; 15-30 yellow; 1-14 red; expired banner ---- */
.sub-card{margin:1rem 0;padding:.9rem 1.1rem;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10)}
.sub-line{margin:0 0 .4rem}
.sub-remind{margin:.2rem 0 .6rem;font-weight:600}
.sub-renew{display:inline-block;padding:.35rem .9rem;border-radius:999px;border:1px solid currentColor;text-decoration:none;font-weight:600}
.sub-ok .sub-renew{color:#F28A6B}
.sub-green{border-color:rgba(57,255,136,.55);box-shadow:0 0 14px rgba(57,255,136,.25)}
.sub-green .sub-remind,.sub-green .sub-renew{color:#39FF88}
.sub-yellow{border-color:rgba(255,210,63,.6);box-shadow:0 0 16px rgba(255,210,63,.28)}
.sub-yellow .sub-remind,.sub-yellow .sub-renew{color:#FFD23F}
.sub-red{border-color:#FF3B5C;box-shadow:0 0 22px rgba(255,59,92,.55),inset 0 0 12px rgba(255,59,92,.18)}
.sub-red .sub-remind,.sub-red .sub-renew{color:#FF3B5C;text-shadow:0 0 8px rgba(255,59,92,.6)}
.sub-expired{padding:0;border:none;background:none}
.sub-banner{background:#FF3B5C;color:#fff;border-radius:14px;padding:1rem 1.2rem;box-shadow:0 0 26px rgba(255,59,92,.6);display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;justify-content:space-between}
.sub-banner p{margin:0;font-weight:700}
.sub-renew-xl{background:#fff;color:#FF3B5C;border-color:#fff;padding:.6rem 1.4rem;font-size:1.05rem}

/* ---- device history pages (2026-10-24) ---- */
.dev-history-links a.button{display:inline-block;text-decoration:none}
.hist-filters{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:flex-end;margin:1rem 0;padding:.8rem 1rem;border:1px solid rgba(242,138,107,.35);border-radius:12px;background:rgba(216,75,46,.06)}
.hist-filters label{display:flex;flex-direction:column;font-size:.85rem;gap:.25rem}
.hist-filters input,.hist-filters select{min-width:9rem}
.hist-wrap{overflow-x:auto;border:1px solid rgba(242,138,107,.3);border-radius:12px;box-shadow:0 0 18px rgba(216,75,46,.18)}
.hist-table{width:100%;border-collapse:collapse;font-size:.92rem}
.hist-table th,.hist-table td{padding:.55rem .8rem;text-align:left;border-bottom:1px solid rgba(255,255,255,.07)}
.hist-table th a{color:#F28A6B;text-decoration:none}
.hist-table th[aria-sort] a{text-shadow:0 0 8px rgba(242,138,107,.7)}
.hist-table tbody tr:hover{background:rgba(216,75,46,.08)}
.hist-ev{padding:.1rem .5rem;border-radius:999px;border:1px solid currentColor;font-size:.82rem}
.ev-login_ok{color:#39FF88}.ev-login_failed{color:#FF3B5C}.ev-logout{color:#9aa4b8}.ev-ip_change{color:#F28A6B}.ev-device_rename{color:#FFD23F}
.hist-pager{display:flex;gap:1rem;align-items:center;margin:.8rem 0;font-size:.9rem}
/* dev-card stretched link (2026-10-24 20:59): whole tile opens the device detail page */
.dev-card{position:relative;cursor:pointer;transition:box-shadow .15s,border-color .15s}
.dev-card > a::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1}
.dev-card > a:focus-visible{outline:none}
.dev-card:focus-within{outline:2px solid var(--accent,#ff6b6b);outline-offset:3px}
.dev-card:hover,.dev-card:focus-within{box-shadow:0 0 0 1px var(--accent,#ff6b6b),0 0 18px rgba(255,107,107,.45)}
/* link-like toggles (2026-10-24 21:07): summaries and text buttons behave like links on hover/keyboard focus */
details>summary:not(.settings-btn),button.secondary,button.link,.link-like{cursor:pointer;text-underline-offset:3px}
details>summary:not(.settings-btn):hover,details>summary:not(.settings-btn):focus-visible,
button.secondary:hover,button.secondary:focus-visible,button.link:hover,button.link:focus-visible,.link-like:hover,.link-like:focus-visible{text-decoration:underline;text-decoration-thickness:1px}
details>summary:not(.settings-btn):focus-visible,button.link:focus-visible,.link-like:focus-visible{outline:2px solid var(--coral);outline-offset:3px}

/* device rename form (2026-10-24 21:16) */
.dev-rename{margin:0 0 1.2rem}
.dev-rename label{display:block;font-weight:600;margin-bottom:.35rem}
.dev-rename-row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.dev-rename-row input{flex:1 1 16rem;max-width:28rem}
.dev-rename .small .code{word-break:break-all}
/* health dots (DEV 2026-10-24) */
.hd-dots{display:flex;flex-direction:column;gap:.5rem}
.hd-item{border:1px solid var(--line);border-radius:10px;padding:.5rem .75rem;background:rgba(10,14,26,.45)}
.hd-item summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:.5rem}
.hd-item summary::-webkit-details-marker{display:none}
.hd-dot{display:inline-block;width:.8rem;height:.8rem;border-radius:50%;flex:none}
.hd-body p{margin:.35rem 0}
.hd-graph{width:100%;max-width:36rem;height:auto;aspect-ratio:320/120;display:block}
/* telemetry hourly chart + drilldown (033, 2026-10-24) */
.hd-dot.hd-green{background:#39FF88;box-shadow:0 0 8px #39FF88}.hd-dot.hd-yellow{background:#FFB020;box-shadow:0 0 8px #FFB020}
.hd-dot.hd-red{background:#FF3B5C;box-shadow:0 0 8px #FF3B5C}.hd-dot.hd-grey{background:#5F778E}
.hd-pt{cursor:pointer}.hd-pt:hover rect,.hd-pt:focus rect{fill:rgba(230,241,255,.12)}.hd-pt:hover circle{r:2.6}
.hd-drill{border-top:1px solid var(--line);margin-top:.5rem;padding-top:.5rem}
.hd-table{border-collapse:collapse;font-size:.75rem;display:block;overflow-x:auto;max-width:36rem}
.hd-table th,.hd-table td{padding:.15rem .35rem;border:1px solid rgba(143,163,191,.2);text-align:center;white-space:nowrap}
.hd-synth{color:#FFB020}