:root{
  --bg:#0B1020;
  --surface:#141B30;
  --surface-2:#1B2440;
  --line:#26304A;
  --text:#E8ECF4;
  --muted:#8A93A8;
  --amber:#FFC233;
  --amber-warm:#FF9E3D;
  --red:#FF5C6C;
  --device-icon:#fff;
  --cold:#5A6378;
  --radius:18px;
  --maxw:880px;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:
    radial-gradient(1200px 700px at 50% -200px, #182142 0%, transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:"Inter",system-ui,sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

/* ---- topbar ---- */
.topbar{
  max-width:var(--maxw);
  margin:0 auto;
  padding:22px 20px 8px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.brand{
  font-family:"Space Grotesk",sans-serif;
  font-weight:700;font-size:20px;letter-spacing:.04em;
  display:flex;align-items:center;gap:10px;color:var(--text);
}
.filament{
  width:12px;height:12px;border-radius:50%;
  background:var(--amber);
  box-shadow:0 0 10px 2px var(--amber-warm);
}
.dev-select{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.dev-select select{
  background:var(--surface-2);color:var(--text);
  border:1px solid var(--line);border-radius:10px;
  padding:7px 10px;font-family:"JetBrains Mono",monospace;font-size:13px;
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:12px 20px 40px;display:grid;gap:20px}

/* ---- HERO / lampada ---- */
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--surface) 0%,var(--surface-2) 100%);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:40px 32px 0;
  display:grid;grid-template-columns:160px 1fr;gap:28px;align-items:center;
  transition:box-shadow .6s ease;
}
.hero[data-state="online"]{box-shadow:inset 0 0 120px -40px var(--amber-warm)}
.hero[data-state="offline"]{box-shadow:inset 0 0 120px -50px var(--red)}

.lamp{position:relative;width:160px;height:160px;display:grid;place-items:center}
.bulb{
  width:90px;height:90px;border-radius:50%;
  background:radial-gradient(circle at 38% 35%, #767f96 0%, var(--cold) 70%);
  transition:background .6s ease, box-shadow .6s ease;
}
.halo{
  position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle, var(--amber-warm) 0%, transparent 60%);
  opacity:0;transition:opacity .6s ease;
}
.hero[data-state="online"] .bulb{
  background:radial-gradient(circle at 38% 35%, #FFF1C2 0%, var(--amber) 45%, var(--amber-warm) 100%);
  box-shadow:0 0 60px 6px var(--amber-warm), 0 0 120px 30px rgba(255,158,61,.35);
  animation:breathe 3.6s ease-in-out infinite;
}
.hero[data-state="online"] .halo{opacity:.55;animation:breathe 3.6s ease-in-out infinite}
.hero[data-state="offline"] .bulb{
  background:radial-gradient(circle at 38% 35%, #3a4257 0%, #232a3d 70%);
  box-shadow:inset 0 0 24px rgba(0,0,0,.5);
}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@media (prefers-reduced-motion:reduce){
  .hero[data-state="online"] .bulb,.hero[data-state="online"] .halo{animation:none}
}

.hero-text{padding:8px 0 28px}
.eyebrow{
  font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px;
}
.state-word{
  font-family:"Space Grotesk",sans-serif;font-weight:700;
  font-size:clamp(30px,6vw,46px);line-height:1.02;margin:0 0 22px;letter-spacing:-.01em;
}
.hero[data-state="online"] .state-word{color:var(--amber)}
.hero[data-state="offline"] .state-word{color:var(--red)}

.readouts{display:flex;gap:32px;flex-wrap:wrap}
.ro{display:flex;flex-direction:column;gap:3px}
.ro-k{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ro-v{font-family:"JetBrains Mono",monospace;font-size:15px;color:var(--text)}

.ecg{grid-column:1 / -1;width:100%;height:54px;display:block}

/* ---- pannello storico ---- */
.panel{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px 24px 26px;
}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.panel-head h2{
  font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:18px;margin:0;
}
.ranges{display:flex;gap:6px}
.ranges button{
  background:transparent;color:var(--muted);
  border:1px solid var(--line);border-radius:9px;
  padding:7px 13px;font-family:"JetBrains Mono",monospace;font-size:13px;cursor:pointer;
  transition:all .15s ease;
}
.ranges button:hover{color:var(--text);border-color:var(--cold)}
.ranges button.active{background:var(--amber);color:#1a1405;border-color:var(--amber);font-weight:700}
.ranges button:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.hint{font-size:12px;color:var(--muted);margin:12px 0 14px}
.chart{width:100%}

/* uPlot override (tema scuro) */
.u-axis{color:var(--muted)}
.u-legend{display:none}

.foot{
  text-align:center;color:var(--muted);font-size:12px;
  font-family:"JetBrains Mono",monospace;padding:8px 20px 40px;
}

@media (max-width:560px){
  .hero{grid-template-columns:1fr;text-align:center;padding:32px 22px 0}
  .lamp{margin:0 auto}
  .readouts{justify-content:center}
  .hero-text{padding-bottom:22px}
}
[hidden]{display:none!important}a{color:var(--amber);text-decoration:none}button,input,select{font:inherit}button{background:var(--amber);color:#171717;border:1px solid transparent;border-radius:10px;padding:10px 15px;cursor:pointer;font-weight:600}button:disabled{opacity:.5;cursor:wait}button.secondary{background:var(--surface-2);color:var(--text);border-color:var(--line)}button.danger{background:var(--red);color:#171717}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--amber);outline-offset:3px}p{line-height:1.7}h1,h2{letter-spacing:-.025em}nav,.actions{display:flex;gap:8px;flex-wrap:wrap}.hero{padding-bottom:20px}.hero-text p{color:var(--muted);max-width:520px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:26px}.steps b{color:var(--amber)}.device-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:22px}.device-card{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:18px;text-align:left;color:var(--text)}.device-card.active{border-color:var(--amber)}.device-card small{display:block;color:var(--muted);margin-top:10px}.badge{font-size:12px;border:1px solid var(--line);border-radius:20px;padding:4px 8px}.online{color:var(--amber)}.offline{color:var(--red)}#detail{display:grid;gap:20px;margin-top:20px}.actions{margin-top:20px}.event{padding:14px 0;border-bottom:1px solid var(--line)}.event small{color:var(--muted)}.event p{margin:4px 0}dialog{background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:18px;width:min(520px,calc(100% - 28px));max-height:90vh;padding:24px}dialog::backdrop{background:#0009;backdrop-filter:blur(5px)}.modal-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.modal-head h2{margin:0}form label{display:block;margin:18px 0 5px;color:var(--muted);font-size:14px}input,select{max-width:100%;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:9px;padding:10px}form input:not([type=checkbox]),form select{width:100%}form button{margin-top:20px}form .secondary{margin-right:8px}.error{color:var(--red)}.foot label{display:block;margin-top:18px}#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);max-width:90%;background:var(--surface-2);border:1px solid var(--amber);padding:15px 22px;border-radius:12px;z-index:10}.readouts{gap:16px}#chart{overflow:hidden}.muted{color:var(--muted)}@media(max-width:650px){.steps{grid-template-columns:1fr}.topbar{align-items:flex-start}.hero{padding:28px 20px}.panel{padding:20px}nav{justify-content:flex-end}.readouts{text-align:left}.actions{justify-content:center}}body{background:radial-gradient(1200px 700px at 50% -200px,var(--surface-2),transparent 60%),var(--bg)}
#landing,#dashboard{display:grid;gap:20px}#dashboard #detail{margin-top:0}.device-card .online{color:var(--amber)}.device-card .offline{color:var(--red)}esp-web-install-button{--esp-tools-button-color:var(--amber);--esp-tools-button-text-color:#171717;--esp-tools-button-border-radius:10px}
/* Account, approvals and firmware */
#modalBody{padding-top:20px}dialog{width:min(620px,calc(100% - 28px))}.profile-identity{display:grid;gap:6px;padding:6px 0 22px}.profile-identity b{font-size:1.2rem}.profile-identity span{color:var(--muted);overflow-wrap:anywhere}.profile-section{border-top:1px solid var(--line);padding:22px 0}.profile-section h3{margin:0 0 18px;font-size:1rem}.profile-section form>label:first-child{margin-top:0}.check-row{display:flex!important;align-items:flex-start;gap:12px;margin:22px 0!important}.check-row input{width:18px;height:18px;margin:3px 0;accent-color:var(--amber);flex-shrink:0}.check-row span{color:var(--text)}.check-row small,.setting-row small{display:block;color:var(--muted);line-height:1.5;margin-top:5px}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0}.setting-row+.setting-row{border-top:1px solid var(--line)}.setting-row>div{min-width:0;overflow-wrap:anywhere}.setting-row button,.setting-row a{flex-shrink:0}.danger-section{padding-bottom:0}.danger-section .setting-row{padding-bottom:0}.button-link{display:inline-flex;align-items:center;justify-content:center;padding:10px 15px;border-radius:10px;font-weight:600;border:1px solid var(--line)}.button-link.secondary{background:var(--surface-2);color:var(--text)}.approvals-button{display:inline-flex;align-items:center;gap:8px}.pending-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 5px;border-radius:50%;background:#d8233d;color:white;font-size:12px;font-weight:700}.release-notes{white-space:pre-line;line-height:1.6;overflow-wrap:anywhere;color:var(--muted)}.ro-v{white-space:pre-line;overflow-wrap:anywhere}.readouts{flex-wrap:wrap}.firmware-release{padding:24px 0;border-bottom:1px solid var(--line)}.firmware-release>b,.firmware-current>b{display:block;margin:8px 0}.firmware-current{padding:0 0 22px;border-bottom:1px solid var(--line)}.firmware-release .actions{margin-top:16px}.job-status{padding:16px;background:var(--surface-2);border-radius:10px}.claim-code{display:block;width:100%;font-family:monospace;font-size:1.05rem;margin:10px 0}.setup-help{margin-top:24px;line-height:1.6}.setup-help summary{cursor:pointer;color:var(--amber)}nav{align-items:center}#toast{z-index:10000}button:disabled{cursor:not-allowed}@media(max-width:650px){.topbar{gap:12px;flex-wrap:wrap}nav{justify-content:flex-start;width:100%}.setting-row{gap:12px;align-items:flex-start}.setting-row button,.setting-row a{padding:9px 11px;font-size:14px}dialog{padding:20px}.readouts .ro{min-width:0;flex-basis:100%}.firmware-release .actions{justify-content:flex-start}}
.device-card{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start}.device-card .release-notes{font-weight:400}.modal-head{position:sticky;top:-24px;background:var(--surface);z-index:2;padding:4px 0 10px}@media(max-width:650px){.modal-head{top:-20px}}
/* Compact dashboard and ten-event pages */
.device-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px;margin-top:14px}.device-card{padding:10px;gap:8px;line-height:1.35}.device-card.active{border-color:var(--amber)}.device-card small{margin-top:0;font-weight:400;font-size:12px}.device-card b{font-size:15px}.device-card-main{display:flex;min-width:0;flex-direction:column;align-items:flex-start;gap:5px;padding:2px;background:transparent;border:0;color:var(--text);text-align:left}.device-icon{display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--text);font-size:23px;line-height:1}.device-icon:hover{border-color:var(--amber)}.device-heading{display:flex;align-items:flex-start;gap:12px}.device-heading .state-word{margin-bottom:22px}.overview-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.event-row{border-bottom:1px solid var(--line);font-size:13px}.event-row summary{display:flex;align-items:baseline;gap:16px;padding:9px 0;cursor:pointer;list-style:none}.event-row time{color:var(--muted);font-size:12px;min-width:150px}.event-row summary span{font-weight:600}.event-detail{margin:0 0 10px;padding-left:166px;color:var(--muted);line-height:1.5}.event-detail p{margin:0}.event-detail small{display:block;margin-top:4px;font-family:"JetBrains Mono",monospace}.event-pagination{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px}.event-pagination button{font-size:13px;padding:8px 12px}.event-pagination span{color:var(--muted);font-size:12px}.ranges{flex-wrap:wrap}#chart .u-legend{font-size:12px;margin:12px 0}.panel-head{flex-wrap:wrap;gap:12px}@media(max-width:650px){.device-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.device-card{padding:8px;gap:5px}.device-icon{width:36px;height:36px;font-size:20px}.device-card small{overflow-wrap:anywhere}.event-row summary{gap:7px;align-items:flex-start}.event-row time{min-width:106px;max-width:106px;font-size:11px}.event-detail{padding-left:0}.event-pagination button{padding:8px;font-size:12px}.ranges{gap:5px}.ranges button{padding:7px 10px}.overview-actions{justify-content:flex-start;width:100%}}
.wrap,#landing,#dashboard,#detail,.panel,.hero-text{min-width:0}.wrap,#dashboard,#detail{grid-template-columns:minmax(0,1fr)}#chart{width:100%;min-width:0}.chart-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin:10px 0}.chart-legend span{display:inline-flex;align-items:center;gap:6px}.chart-legend i{width:14px;height:3px;display:inline-block}.power-key{background:#e5aa16}.internet-key{background:#38a9ed}
.device-icon svg{width:23px;height:23px;fill:currentColor}.icon-picker{position:fixed;z-index:11000;width:min(336px,calc(100vw - 16px));max-height:min(330px,calc(100vh - 16px));overflow:auto;padding:10px;grid-template-columns:repeat(7,1fr);gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px #0008}.icon-picker:not([hidden]){display:grid}.icon-picker button{display:grid;place-items:center;height:39px;padding:0;background:var(--surface-2);border-color:var(--line)}.icon-picker button svg{width:21px;height:21px;fill:currentColor}.icon-picker button:hover,.icon-picker button.selected{border-color:var(--amber);background:var(--bg)}.custom-select{position:relative;min-width:210px}.custom-select-control{position:relative}.custom-select-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;text-align:left}.custom-value{display:flex;align-items:center;gap:9px;min-width:0}.custom-value svg,.custom-options svg{width:18px;height:18px;fill:currentColor;flex-shrink:0}.custom-options{position:absolute;z-index:20;top:calc(100% + 6px);right:0;width:max(100%,240px);max-height:280px;overflow:auto;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 40px #0007}.custom-options button{display:flex;width:100%;align-items:center;gap:9px;padding:10px;background:transparent;color:var(--text);border:0;text-align:left}.custom-options button:hover,.custom-options button[aria-selected="true"]{background:var(--surface-2);color:var(--amber)}#profileDeviceSelect{margin-top:5px}#profileDeviceSelect .custom-options{left:0;right:auto}@media(max-width:650px){.icon-picker{grid-template-columns:repeat(6,1fr)}.custom-select{width:100%;min-width:0}.custom-options{left:0;right:auto;width:100%}}
.device-icon,.icon-picker button{color:var(--device-icon)}.custom-value svg,.custom-options svg{color:var(--device-icon)}
.ip-date{display:block;margin-top:3px;color:var(--muted);font-size:11px;line-height:1.35;font-weight:400}
.google-button{display:grid;grid-template-columns:24px 1fr;column-gap:10px;align-items:center;background:#fff;color:#202124!important;border:1px solid #dadce0;border-radius:10px;padding:9px 13px;font-weight:600;box-shadow:0 1px 2px #0002}.google-button svg{width:22px;height:22px;grid-row:1/3}.google-button small{font-size:10px;color:#5f6368;font-weight:400}.google-button:hover{box-shadow:0 2px 8px #0003}nav .google-button{padding:7px 10px}nav .google-button small{display:none}
.profile-preferences{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}.profile-preferences label{display:block;color:var(--muted);font-size:14px;margin-bottom:6px}.profile-preferences select{width:100%}.autosave-note{font-size:12px;color:var(--muted)}.phone-grid{display:grid;grid-template-columns:1.35fr .7fr 1fr;gap:10px;align-items:end}.phone-grid label{margin-top:0}.phone-grid input,.phone-grid select{width:100%}
.events-block{border:1px solid var(--line);border-radius:14px;padding:16px;margin-top:22px}.events-block .panel-head{margin-bottom:4px}.events-block h2{margin:0}.notification-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.notification{border-bottom:1px solid var(--line)}.notification>button{width:100%;display:grid;grid-template-columns:1fr auto;gap:4px 12px;text-align:left;background:transparent;color:var(--text);padding:14px 6px;border:0}.notification.unread>button{border-left:3px solid var(--red);padding-left:12px}.notification time,.notification p{color:var(--muted);font-size:12px}.notification p{grid-column:1/-1;margin:0}.admin-user{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}.admin-user small{display:block;color:var(--muted);margin-top:4px}.admin-user .actions{margin-top:0}.inline-form{display:flex;gap:8px}.inline-form input{flex:1}.inline-form button{margin-top:0}.purgatory{color:#d58bff}.setup-list{color:var(--muted);line-height:1.8}
@media(max-width:650px){.profile-preferences,.phone-grid{grid-template-columns:1fr}.admin-user{align-items:flex-start;flex-direction:column}.events-block{padding:12px}.google-button{width:100%}nav .google-button{width:auto}.notification-head{align-items:flex-start}}

/* Luce 3.1: device identity, dialog navigation and top-layer feedback. */
#modal{width:min(940px,calc(100vw - 32px));max-width:940px;box-sizing:border-box}
.modal-head{display:flex;align-items:center;gap:12px}.modal-head h2{flex:1;margin:0;min-width:0;overflow-wrap:anywhere}#modalBack,#closeModal{flex:none;width:40px;padding:8px;margin:0}
#modal .google-button{display:flex;width:max-content;max-width:100%;box-sizing:border-box;gap:10px;margin:20px auto;padding:10px 18px;line-height:1.2;text-decoration:none;flex-shrink:0}
#modal .google-button small{display:none}#modal .google-button svg{flex:none}
#modal .setting-row .google-button{margin:0}
#toast{position:fixed;inset:20px 20px auto auto;transform:none;margin:0;max-width:min(420px,calc(100vw - 40px));box-sizing:border-box;z-index:2147483647;background:var(--surface-2);color:var(--text);border:1px solid var(--amber);border-radius:12px;padding:16px 20px;box-shadow:0 10px 40px #0006;pointer-events:none;font:14px/1.5 system-ui}
#toast[hidden]{display:none}#toast::backdrop{background:transparent;pointer-events:none}
#devName{font-size:clamp(28px,3.5vw,46px);line-height:1.15;margin:0 0 8px;font-weight:750;letter-spacing:-.025em;overflow-wrap:anywhere;color:var(--text)}
#devMac{color:var(--muted);font-size:12px}#stateWord{font-size:18px;margin:14px 0 22px;font-weight:500;letter-spacing:0}
.timeline-controls{display:flex;flex-direction:column;align-items:flex-end;gap:8px}.zoom-controls{display:flex;align-items:center;gap:12px}.zoom-controls button{padding:5px 14px;font-size:20px}.zoom-controls span{font-size:13px;color:var(--muted);min-width:75px;text-align:center}
.account-code{display:grid;gap:8px;padding:18px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;margin:18px 0}.account-code strong{font-size:30px;letter-spacing:.18em;font-variant-numeric:tabular-nums;color:var(--amber)}.account-code small{color:var(--muted);line-height:1.5}
.download-variants{display:flex;gap:12px;flex-wrap:wrap}.phone-grid{grid-template-columns:1fr .8fr 1.2fr}.phone-grid>div,.profile-preferences>div{min-width:0}
@media(max-width:650px){#modal{width:calc(100vw - 16px);max-height:calc(100dvh - 24px);padding:18px}.phone-grid{grid-template-columns:1fr 1fr}.phone-grid>div:first-child{grid-column:1/-1}.timeline-controls{align-items:flex-start;width:100%}.notification>button{grid-template-columns:1fr}.notification time{grid-column:1}.setting-row{flex-wrap:wrap}.profile-preferences{grid-template-columns:1fr}#toast{inset:12px 12px auto auto;max-width:calc(100vw - 24px)}}

/* Completed update notices are brief; the event history holds the full details. */
.job-status.job-finished{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;padding:7px 10px;font-size:12px;color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:8px;margin:8px 0}
.job-finished span{font-weight:500}.job-finished small{font-size:11px}.job-finished.job-warning span{color:var(--amber)}
.event-meta{display:flex;flex-wrap:wrap;gap:4px 18px;color:var(--muted)}

:root{--event-green:#6ee7a0;--event-blue:#7dc4ff;--event-orange:#ffbf69;--event-violet:#c6a0ff}
.event-title{display:inline-flex;align-items:flex-start;gap:8px;min-width:0;line-height:1.5}.event-title strong{font-weight:700;overflow-wrap:anywhere}.event-icon{width:19px;height:19px;flex:0 0 19px;margin-top:1px}.event-green{color:var(--event-green)}.event-blue{color:var(--event-blue)}.event-orange{color:var(--event-orange)}.event-violet{color:var(--event-violet)}.event-red{color:var(--red)}
.event-detail .event-meta{display:flex}
/* Modular sensors and per-device delivery preferences. */
.sensor-section{display:block;margin:14px 0}.sensor-section h3,.device-notifications h3{font-size:1rem;margin:0 0 10px}.sensor-chips{display:flex;flex-wrap:wrap;gap:10px}.sensor-chip{display:inline-flex;align-items:center;gap:9px;color:var(--muted)}.sensor-symbol{display:inline-flex;position:relative;flex-shrink:0;width:25px;height:25px}.sensor-symbol svg,.sensor-catalog-title svg{width:25px;height:25px}.sensor-crossed:after{content:"";position:absolute;left:1px;top:12px;width:27px;height:2px;background:currentColor;transform:rotate(-45deg);box-shadow:0 0 0 1px var(--panel,var(--bg))}.sensor-chip b,.sensor-chip small{display:block}.sensor-chip b{font-size:.85rem;color:var(--text)}.sensor-chip small{font-size:.73rem;margin-top:2px}.sensor-present{color:#46ba8d}.sensor-no_response,.sensor-fault{color:#ed827e}.sensor-unverified,.sensor-pending{color:#d5a54c}section.sensor-section{border:1px solid var(--line);border-radius:12px;padding:14px}section.sensor-section .sensor-chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}.device-card .sensor-chips{gap:12px}.device-card .sensor-section{margin:10px 0 0}.device-notifications{border:1px solid var(--line);border-radius:12px;padding:14px;margin:14px 0}.notification-options{display:flex;gap:24px;flex-wrap:wrap}.device-notifications small{color:var(--muted);font-size:.75rem}.sensor-catalog-title{display:flex;align-items:center;gap:12px}.sensor-mapping{display:grid;grid-template-columns:1fr 140px;align-items:center;gap:12px}.admin-categories{margin-bottom:24px}.sensor-mapping label{margin:0}.check-row small{display:block;color:var(--muted)}

.sensor-symbol{color:var(--device-icon,var(--text))}.sensor-present .sensor-symbol{color:inherit}.sensor-no_response .sensor-symbol,.sensor-fault .sensor-symbol{color:inherit}

/* Compact status strips in the opened sentinel; tap sensors for full states. */
.sensor-compact{margin:8px 0 0;border-top:1px solid var(--line);text-align:left}
.sensor-compact>summary{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-height:46px;padding:7px 0;list-style:none;cursor:pointer}
.sensor-compact>summary::-webkit-details-marker{display:none}
.sensor-compact>summary:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:5px}
.sensor-compact .device-section-label,.notifications-compact h3.device-section-label{flex-shrink:0;margin:0;font-size:11px;font-weight:600;line-height:1.3;color:var(--muted)}
.sensor-compact .sensor-chips{gap:12px;margin-left:auto;align-items:center}
.sensor-compact .sensor-symbol,.sensor-compact .sensor-symbol svg{width:22px;height:22px}
.sensor-compact .sensor-crossed:after{top:10px;left:0;width:25px}
.sensor-chevron{font-size:17px;line-height:1;color:var(--muted);transition:transform .15s}
.sensor-compact[open] .sensor-chevron{transform:rotate(180deg)}
.sensor-live-values{display:flex;flex-wrap:wrap;gap:5px 12px;flex-basis:100%;justify-content:flex-end}
.sensor-live{font-size:12px;font-weight:600;color:var(--text)}
.sensor-expanded{padding:0 0 8px}
.sensor-status-row{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-top:1px solid var(--line);font-size:11px;line-height:1.45}
.sensor-status-row b{font-weight:500;color:var(--text)}
.sensor-status-row>span{max-width:62%;text-align:right;color:var(--muted)}
.sensor-status-row small{display:block;font-size:10px}
.sensor-expanded p{margin:7px 0 0;font-size:10px;line-height:1.45;color:var(--muted)}
.device-notifications.notifications-compact{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:7px 0;margin:0 0 12px;border:0;border-top:1px solid var(--line);border-radius:0;text-align:left}
.notifications-compact .notification-options{display:flex;gap:12px;margin-left:auto;align-items:center;flex-wrap:wrap}
.notifications-compact .check-row{display:flex;align-items:center;gap:6px;margin:0!important;padding:3px 0;min-height:32px;font-size:12px;line-height:1.2;cursor:pointer}
.notifications-compact input[type=checkbox]{width:14px;height:14px;margin:0;flex-shrink:0}
.notifications-compact .notification-soon{display:block;margin:2px 0 0;font-size:9px;font-weight:400;line-height:1;color:var(--muted)}
.notification-hint{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:400px){.sensor-compact .sensor-chips{gap:9px}.notifications-compact .notification-options{gap:9px}}

/* Three views share the sentinel box and identity header. */
.device-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;border-bottom:1px solid var(--line);margin:0 0 18px;padding:0 0 5px}
.device-tabs [role=tab]{min-width:0;min-height:42px;padding:8px 6px;border:0;border-radius:7px;background:transparent;color:var(--muted);font-size:12px;font-weight:500;line-height:1.3;text-align:center}
.device-tabs [role=tab]:hover{color:var(--text);background:var(--surface-2)}
.device-tabs [role=tab][aria-selected=true]{background:var(--surface-2);color:var(--amber);box-shadow:inset 0 -2px var(--amber);font-weight:600}
.device-tab-panel{min-width:0;text-align:left}
.device-tab-panel>.panel-head{margin:0 0 10px;gap:8px}
.device-tab-panel>.panel-head h2{margin:0;font-size:16px}
.device-tab-panel .hint{font-size:11px;line-height:1.5}
.device-tab-panel .timeline-controls{width:100%;justify-content:space-between;gap:8px}
.device-tab-panel .event-pagination{font-size:12px}
@media(max-width:400px){.device-tabs [role=tab]{font-size:11px;padding:8px 4px}.device-tab-panel .event-pagination{gap:5px}.device-tab-panel .event-pagination button{padding:7px 5px;font-size:11px}}

/* Identity stays beside the lamp; all three views span the entire box. */
#hero{grid-template-columns:160px minmax(0,1fr);row-gap:16px}
#hero>.lamp{align-self:start;margin-top:0}
#hero>.hero-text{padding:8px 0 0}
#hero>.device-tabs,#hero>.device-tab-panel{grid-column:1 / -1;min-width:0}
#hero>.device-tabs{margin-bottom:0}
#hero>.device-tab-panel{padding-bottom:8px}
@media(max-width:560px){#hero{grid-template-columns:minmax(0,1fr)}#hero>.hero-text{padding:0}}
@media(min-width:651px){#hero .notification-matrix{min-width:0}#hero .readouts .ro{flex:1 1 180px}}

/* Superadministration category tabs and compact release controls. */
.admin-tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:20px}
.admin-tabs button{flex:1;background:var(--surface-2);color:var(--muted);white-space:nowrap;padding:10px 14px}
.admin-tabs button[aria-selected="true"]{background:var(--amber);color:var(--bg)}
.firmware-policy{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.firmware-policy .check-row{margin:0!important;border:1px solid var(--line);border-radius:12px;padding:12px;align-items:start}
.firmware-policy small,.firmware-release>small{display:block;margin:5px 0;color:var(--muted)}
.firmware-admin-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.firmware-admin-heading h3,.firmware-admin-heading .check-row{margin:0!important}
.deployment-counts{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.deployment-count{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:5px 9px;font-size:.85rem}
@media(max-width:600px){.firmware-policy{grid-template-columns:1fr}.admin-tabs button{flex-basis:40%;padding:10px 6px}}

.admin-filter{min-width:0;width:100%}.admin-filter button{margin:0!important}.admin-filter .custom-options{left:0;right:auto;width:100%;min-width:0}.admin-filter [role=option]:focus-visible{outline-offset:-3px}

/* Shared styled select menus, including long country lists and the footer theme. */
.site-select{min-width:0;width:100%;text-align:left}.site-select button{margin:0!important}.site-select .custom-value{overflow:hidden;text-overflow:ellipsis;display:block;white-space:nowrap}.site-select .custom-select-trigger{min-height:43px;font-weight:500}.select-menu{position:fixed;inset:auto;margin:0;box-sizing:border-box;min-width:0;padding:6px;max-height:300px;overflow:auto;color:var(--text);font:inherit;z-index:11000}.select-menu [role=option]{margin:0!important;font-weight:500}.select-menu [role=option]:focus-visible{outline-offset:-3px;background:var(--surface-2)}.select-menu .select-search{display:block;position:sticky;top:0;width:100%;min-width:0;margin:0 0 6px;padding:10px;background:var(--bg);z-index:1}.select-menu .hint{padding:0 8px}.site-select .error{display:block;margin-top:6px}.foot .site-select{display:inline-block;vertical-align:middle;max-width:220px;margin-left:8px}.phone-grid .site-select{min-width:0}@media(max-width:650px){.foot .site-select{display:block;margin:8px auto 0}}

.event-expand-toggle{display:grid;place-items:center;width:44px;height:44px;padding:9px;flex-shrink:0}.event-expand-toggle svg{width:24px;height:24px}.event-expand-toggle .collapse-arrows,.event-expand-toggle[aria-expanded="true"] .expand-arrows{display:none}.event-expand-toggle[aria-expanded="true"] .collapse-arrows{display:block}.event-expand-toggle:hover:not(:disabled){border-color:var(--amber);color:var(--amber)}

.release-notes{white-space:pre-wrap;overflow-wrap:anywhere}
.functionality-notifications{min-width:0}
.notification-matrix-scroll{max-width:100%;overflow-x:auto;margin-top:12px;border:1px solid var(--line);border-radius:10px}
.notification-matrix{border-collapse:collapse;width:100%;min-width:620px;table-layout:fixed;font-size:.8rem}
.notification-matrix th,.notification-matrix td{padding:9px 5px;text-align:center;border-bottom:1px solid var(--line);border-right:1px solid var(--line);vertical-align:middle;overflow-wrap:anywhere}
.notification-matrix th:first-child{width:84px;text-align:left;position:sticky;left:0;background:var(--surface);z-index:1}
.notification-matrix th:last-child,.notification-matrix td:last-child{border-right:0}
.notification-matrix tbody tr:last-child>*{border-bottom:0}
.notification-matrix thead th>span,.notification-matrix small{display:block}
.notification-matrix small{font-size:.65rem;font-weight:400;line-height:1.35;color:var(--muted);margin-top:4px}
.notification-matrix .function-icon{height:26px;margin-bottom:7px}
.notification-matrix .function-icon svg{height:24px;width:24px}
.notification-matrix [data-function=connectivity] .function-icon svg{width:48px}
.notification-matrix .function-active .function-icon{color:var(--amber)}
.notification-matrix .function-disabled{color:var(--muted);background:var(--surface-2)}
.notification-matrix input[type=checkbox]{width:19px;height:19px;accent-color:var(--amber);cursor:pointer}
.notification-matrix input:disabled{opacity:.4;cursor:not-allowed}
.functionality-notifications .notification-hint{font-size:.73rem;line-height:1.5;margin:10px 0 0}
.release-notes-block{margin:12px 0}
.release-notes-block .release-notes{margin:0 0 8px}
.release-notes-toggle{padding:6px 10px;font-size:.85rem}
.device-action-icon{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:42px;padding:10px}
.device-action-icon svg{width:21px;height:21px;pointer-events:none}
.device-action-icon[data-action=detach],.device-action-icon[data-admin-device-delete]{color:var(--red)}
.power-choices{border:0;padding:0;margin:18px 0;display:flex;flex-wrap:wrap;gap:12px}
.power-choices legend{margin-bottom:8px;color:var(--muted)}
.power-choices label{display:flex;align-items:center;gap:10px;flex:1;margin:0;padding:14px;border:1px solid var(--line);border-radius:10px;color:var(--text);cursor:pointer;min-width:120px}
form .power-choices input[type=radio]{width:18px;height:18px;margin:0;accent-color:var(--amber)}
.power-choices label:has(input:checked){border-color:var(--amber);background:var(--surface-2)}

/* Compact notification pages: leave room for the header and pager on phones. */
@media(max-width:650px){.notification>button{grid-template-columns:minmax(0,1fr);padding-top:10px;padding-bottom:10px}.notification time{grid-column:1}.notification-head{gap:8px;align-items:center}.notification-head>span{flex-shrink:0}.notification-head button{padding:8px 10px;font-size:12px}.notification b,.notification p{overflow-wrap:anywhere}}