/* Keeper UI kit — additional product screens (login, sites, telemetry, tasks, OTA, settings, reports, command-center, recommendations).
   Style is identical to ds/app.css. Builds on the same tokens. */

/* ── App loading splash ───────────────────────────────────── */
/* Shown while authState.status === "loading" (session revalidation in-flight).
   Prevents a flash of the login screen when the user has a valid token.       */
.app-loading{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;background:var(--bg-sidebar);z-index:999}
.app-loading__logo{height:36px;width:auto;opacity:.95}
.app-loading__spinner{width:36px;height:36px;border-radius:50%;border:3px solid rgba(255,179,0,.22);border-top-color:var(--keeper-honey);animation:app-spin 700ms linear infinite}
.app-loading__label{font:500 13px/1 var(--font-sans);color:rgba(255,255,255,.45);letter-spacing:.02em}
@keyframes app-spin{to{transform:rotate(360deg)}}

/* ── Login splash ─────────────────────────────────────────── */
.login-shell{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;background:var(--bg-page)}
.login-form-side{display:flex;flex-direction:column;justify-content:center;padding:48px 80px;background:#fff}
.login-brand{display:flex;align-items:center;gap:10px;margin-bottom:48px}
.login-brand img{height:28px;width:auto}
.login-brand b{font:700 18px Inter;color:var(--fg-strong);letter-spacing:-.01em}
.login-form{max-width:340px;width:100%;display:flex;flex-direction:column;gap:18px}
.login-form h1{font:700 28px/1.15 Inter;letter-spacing:-.015em;color:var(--fg-strong);margin:0 0 4px}
.login-form .sub{font-size:13px;color:var(--fg-muted);margin-bottom:18px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font:600 11px Inter;text-transform:uppercase;letter-spacing:.04em;color:var(--fg-muted)}
.field input{height:40px;border:1px solid var(--border);border-radius:8px;padding:0 12px;font:400 14px Inter;background:#fff;width:100%;box-sizing:border-box}
.field input:focus{outline:none;border-color:var(--keeper-honey);box-shadow:var(--shadow-focus)}
.login-foot{margin-top:auto;font-size:12px;color:var(--fg-muted);padding-top:18px}
.login-art{background:var(--bg-sidebar);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:48px;color:#fff}
.login-art::before{content:"";position:absolute;inset:0;background-image:url("./assets/honeycomb-bg.png");background-size:cover;background-position:center;opacity:.18;mix-blend-mode:lighten}
.login-art::after{content:"";position:absolute;right:-60px;top:60px;width:380px;height:380px;background:url("./assets/bee-illustration.png") center/contain no-repeat;opacity:.65;filter:drop-shadow(0 12px 32px rgba(0,0,0,.45))}
.login-art-copy{position:relative;z-index:2;max-width:380px}
.login-art-copy h2{font:700 32px/1.1 Inter;letter-spacing:-.015em;margin:0 0 12px;color:#fff}
.login-art-copy p{font-size:14px;line-height:1.55;color:#C2CCD8;margin:0 0 24px}
.login-art-stat{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;border-top:1px solid var(--border-sidebar);padding-top:24px}
.login-art-stat .v{font:700 22px Inter;font-variant-numeric:tabular-nums;color:#FFB300}
.login-art-stat .l{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#9AA5B3;margin-top:2px}

/* tenant picker (after login) */
.tenant-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.tenant-card{padding:14px;border:1px solid var(--border);border-radius:8px;background:#fff;cursor:pointer;transition:box-shadow 120ms,border-color 120ms}
.tenant-card:hover{border-color:var(--keeper-honey);box-shadow:var(--shadow-md)}
.tenant-card b{font:600 14px Inter;color:var(--fg-strong);display:block}
.tenant-card .meta{font-size:12px;color:var(--fg-muted);margin-top:4px;font-variant-numeric:tabular-nums}

/* ── Page surface helpers ─────────────────────────────────── */
.page-row{display:grid;gap:16px}
.row-2{grid-template-columns:1fr 1fr}
.row-3{grid-template-columns:1fr 1fr 1fr}
.row-2-1{grid-template-columns:1.6fr 1fr}
.row-1-2{grid-template-columns:1fr 1.6fr}
.stack{display:flex;flex-direction:column;gap:12px}
.subhead{font:600 11px Inter;text-transform:uppercase;letter-spacing:.04em;color:var(--fg-muted);margin:0 0 8px}

/* tag chip (filters / pills) */
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--radius-pill);background:var(--n-100);border:1px solid var(--border);font:500 12px Inter;color:var(--fg);cursor:pointer}
.chip.on{background:#1D1C1D;color:#fff;border-color:#1D1C1D}
.chip i{font-size:12px}

.segmented{display:inline-flex;background:var(--n-100);border-radius:var(--radius-pill);padding:3px;gap:2px}
.segmented button{height:28px;padding:0 12px;border:none;background:transparent;border-radius:var(--radius-pill);font:600 12px Inter;color:var(--fg-muted);cursor:pointer}
.segmented button.on{background:#fff;color:var(--fg-strong);box-shadow:var(--shadow-sm)}

/* ── Sites list ───────────────────────────────────────────── */
.site-card{background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;cursor:pointer;transition:box-shadow 120ms}
.site-card:hover{box-shadow:var(--shadow-md)}
.site-thumb{height:140px;background:#E8EDF3 center/cover;position:relative}
.site-thumb .badge{position:absolute;top:10px;left:10px}
.site-card-body{padding:14px}
.site-card h3{font:600 16px Inter;color:var(--fg-strong);margin:0 0 4px}
.site-card .meta{font-size:12px;color:var(--fg-muted);margin-bottom:10px}
.site-card-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;font-variant-numeric:tabular-nums;border-top:1px solid var(--n-150);padding-top:10px}
.site-card-stats .l{font-size:10px;color:var(--fg-muted);text-transform:uppercase;letter-spacing:.04em}
.site-card-stats .v{font:600 14px Inter;color:var(--fg-strong);margin-top:1px}
.site-card-stats .v.crit{color:#E5342B}
.site-card-stats .v.warn{color:#a04200}
.site-card-stats .v.ok{color:#26972B}

/* ── Big numeric ──────────────────────────────────────────── */
.metric-block{display:flex;flex-direction:column;gap:4px}
.metric-block .l{font:600 11px Inter;text-transform:uppercase;letter-spacing:.04em;color:var(--fg-muted)}
.metric-block .v{font:700 24px Inter;font-variant-numeric:tabular-nums;letter-spacing:-.015em;color:var(--fg-strong)}
.metric-block .v small{font:500 14px Inter;color:var(--fg-muted)}

/* ── Telemetry ────────────────────────────────────────────── */
.tele-grid{display:grid;grid-template-columns:240px 1fr;gap:16px}
.tele-list{background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.tele-list-head{padding:10px 12px;border-bottom:1px solid var(--border);font:600 11px Inter;text-transform:uppercase;letter-spacing:.04em;color:var(--fg-muted);display:flex;justify-content:space-between}
.tele-item{padding:10px 12px;border-bottom:1px solid var(--n-150);cursor:pointer;display:flex;align-items:center;gap:8px;font-size:13px}
.tele-item:hover{background:var(--n-50)}
.tele-item.on{background:#FFF4D6;border-left:3px solid #FFB300;padding-left:9px}
.tele-item b{font:600 13px Inter;color:var(--fg-strong);display:block}
.tele-item .id{font:500 11px ui-monospace,Menlo,monospace;color:var(--fg-muted);display:block;margin-top:1px}
.tele-stream{background:#fff;border:1px solid var(--border);border-radius:12px;padding:0;display:flex;flex-direction:column}
.tele-stream-head{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px}
.tele-charts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--n-150)}
.tele-chart{background:#fff;padding:12px}
.tele-chart--empty{display:flex;align-items:center;justify-content:center;color:var(--fg-muted);font:500 13px Inter;min-height:240px}
.tele-chart .l{font:600 11px Inter;text-transform:uppercase;letter-spacing:.04em;color:var(--fg-muted);display:flex;justify-content:space-between;align-items:center}
.tele-chart .v{font:700 22px Inter;font-variant-numeric:tabular-nums;color:var(--fg-strong);margin-top:2px}
.tele-chart svg{width:100%;height:60px;display:block;margin-top:6px}
.tele-event-log{flex:1;border-top:1px solid var(--border);max-height:240px;overflow:auto;font:500 12px ui-monospace,Menlo,monospace}
.tele-event-log .row{display:grid;grid-template-columns:80px 90px 1fr;gap:10px;padding:6px 16px;border-bottom:1px solid var(--n-150)}
.tele-event-log .row time{color:var(--fg-muted)}
.tele-event-log .row .lvl{font-weight:600;text-transform:uppercase;font-size:10px;letter-spacing:.04em}
.tele-event-log .row .lvl.info{color:#074d9e}
.tele-event-log .row .lvl.warn{color:#a04200}
.tele-event-log .row .lvl.crit{color:#9a1f18}
.tele-event-log .row .lvl.ok{color:#146e1a}

.telemetry-panel{background:#fff;padding:12px;display:flex;flex-direction:column;gap:8px;min-height:238px}
.telemetry-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.telemetry-title{font:600 12px Inter;letter-spacing:.02em;color:var(--fg-strong)}
.telemetry-meta{font:500 11px Inter;color:var(--fg-muted);margin-top:2px}
.telemetry-range{display:inline-flex;background:var(--n-100);border-radius:999px;padding:2px;gap:2px;flex-wrap:wrap}
.telemetry-range button{height:24px;border:none;border-radius:999px;background:transparent;color:var(--fg-muted);padding:0 8px;font:600 11px Inter;cursor:pointer}
.telemetry-range button.on{background:#fff;color:var(--fg-strong);box-shadow:var(--shadow-sm)}
.telemetry-value-row{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.telemetry-value{font:700 20px Inter;color:var(--fg-strong);font-variant-numeric:tabular-nums}
.telemetry-value-unit{font:600 12px Inter;color:var(--fg-muted)}
.telemetry-stale{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:999px;background:#FFF4D6;color:#a04200;border:1px solid #FFE7CF;font:700 10px Inter;text-transform:uppercase;letter-spacing:.04em}
.telemetry-updated{margin-left:auto;font:500 11px ui-monospace,Menlo,monospace;color:var(--fg-muted)}
.telemetry-svg{width:100%;height:138px;display:block;border-radius:8px;background:linear-gradient(180deg, rgba(242,245,249,.65) 0%, #fff 100%)}
.telemetry-grid-line{stroke:#DCE3EC;stroke-dasharray:2 3}
.telemetry-axis{display:flex;justify-content:space-between;font:500 11px ui-monospace,Menlo,monospace;color:var(--fg-muted)}
.telemetry-state{display:flex;align-items:center;justify-content:center;gap:8px;height:138px;border:1px dashed var(--border);border-radius:8px;color:var(--fg-muted);font:500 13px Inter;background:var(--n-50)}
.telemetry-state--error{color:#9a1f18;background:#FCE2E0;border-color:#F2C1BC}

/* ── Kanban ───────────────────────────────────────────────── */
.kanban{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:flex-start}
.kanban-col{background:var(--n-50);border:1px solid var(--border);border-radius:12px;padding:12px;min-height:240px}
.kanban-col-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding:0 4px}
.kanban-col-head b{font:600 12px Inter;text-transform:uppercase;letter-spacing:.04em;color:var(--fg-strong)}
.kanban-col-head .count{font:700 11px Inter;background:#fff;border:1px solid var(--border);padding:2px 8px;border-radius:var(--radius-pill);color:var(--fg-muted);font-variant-numeric:tabular-nums}
.kanban-card{background:#fff;border:1px solid var(--border);border-radius:8px;padding:10px 12px;margin-bottom:8px;cursor:grab;transition:box-shadow 120ms,transform 120ms}
.kanban-card:hover{box-shadow:var(--shadow-md)}
.kanban-card:active{cursor:grabbing}
.kanban-card.drag{opacity:.4}
.kanban-card .meta{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--fg-muted);margin-bottom:4px;font-variant-numeric:tabular-nums}
.kanban-card .title{font:600 13px Inter;color:var(--fg-strong);margin-bottom:6px;line-height:1.3}
.kanban-card .foot{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--fg-muted);font-variant-numeric:tabular-nums;margin-top:6px}
.kanban-card .av{width:18px;height:18px;border-radius:50%;background:#FFB300;color:#1D1C1D;font:700 9px Inter;display:inline-flex;align-items:center;justify-content:center}
.prio{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:4px;vertical-align:1px}
.prio.high{background:#E5342B}.prio.med{background:#FF7A00}.prio.low{background:#7FB539}

/* ── Recommendations ──────────────────────────────────────── */
.reco-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:flex-start;cursor:pointer;transition:box-shadow 120ms}
.reco-card:hover{box-shadow:var(--shadow-md)}
.reco-card .ic{width:40px;height:40px;border-radius:8px;background:#FFF4D6;display:flex;align-items:center;justify-content:center;color:#a04200;font-size:20px}
.reco-card.cri .ic{background:#FCE2E0;color:#9a1f18}
.reco-card.warn .ic{background:#FFF4D6;color:#a04200}
.reco-card.act .ic{background:#E5F5E6;color:#146e1a}
.reco-card.info .ic{background:#E7F0FB;color:#074d9e}
.reco-card .body h4{font:600 14px Inter;color:var(--fg-strong);margin:0 0 4px}
.reco-card .body .desc{font-size:13px;color:var(--fg-muted);line-height:1.45;margin-bottom:8px}
.reco-conf{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--fg-muted);font-variant-numeric:tabular-nums}
.reco-conf .bar{width:60px;height:4px;border-radius:2px;background:var(--n-150);overflow:hidden}
.reco-conf .bar i{display:block;height:100%;background:#7FB539}

.reco-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.reco-meta--subtle{font-size:11px;color:var(--fg-muted);margin-bottom:10px}
.reco-severity-badge,.reco-status-badge,.reco-expired-badge{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;font:700 10px Inter;letter-spacing:.03em;text-transform:uppercase}
.reco-severity-badge--critical{background:var(--status-critical-soft);color:var(--status-critical-fg)}
.reco-severity-badge--warning{background:var(--status-alert-soft);color:var(--status-alert-fg)}
.reco-severity-badge--info{background:var(--status-info-soft);color:var(--status-info-fg)}
.reco-status-badge--active{background:var(--n-100);color:var(--fg-muted)}
.reco-status-badge--applied{background:var(--status-ok-soft);color:var(--status-ok-fg)}
.reco-status-badge--dismissed{background:var(--n-150);color:var(--fg-muted)}
.reco-expired-badge{background:#FCE2E0;color:#9a1f18}

.reco-inline-form{margin-top:10px;padding:10px;border:1px solid var(--border);border-radius:8px;background:var(--n-50);display:flex;flex-direction:column;gap:8px}
.reco-inline-form label{font:600 11px Inter;color:var(--fg-muted);text-transform:uppercase;letter-spacing:.04em}
.reco-inline-form textarea{min-height:64px;border:1px solid var(--border);border-radius:8px;padding:8px 10px;font:500 12px Inter;resize:vertical;background:#fff}
.reco-inline-form__actions{display:flex;gap:8px;justify-content:flex-end}
.reco-inline-form__error{font-size:12px;color:#9a1f18}

.reco-empty-state{border:1px dashed var(--border);border-radius:10px;background:var(--n-50);padding:24px}
.reco-empty-state h4{margin:0 0 8px;font:600 15px Inter;color:var(--fg-strong)}
.reco-empty-state p{margin:0;font-size:13px;color:var(--fg-muted)}
.reco-banner-error{padding:10px 12px;border:1px solid #E5342B;border-radius:8px;background:#FCE2E0;color:#9a1f18;font:600 12px Inter}

/* [TASK_START:T015] */
.gh-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
.gh-layout > div{min-width:0}
.gh-layout aside{min-width:0}
.gh-map-banner{margin-bottom:8px;border-radius:8px;border:1px solid #FFB300}
.gh-map-banner__time{font-variant-numeric:tabular-nums}
.gh-map-footer{display:flex;justify-content:space-between;align-items:center;padding:0 4px;flex-wrap:wrap;gap:8px}
.gh-map-status-note{font-size:12px;color:var(--fg-muted);font-style:italic}
.gh-canvas{min-height:320px}
.gh-zone-state.tri{filter:drop-shadow(0 0 0.45px rgba(29,28,29,.9))}
.gh-zone[data-state="act"] .gh-zone-lbl{background:#FFF7E3;border-color:#F4DAA0;color:#5F4300}
.gh-zone[data-state="att"] .gh-zone-lbl{background:#FFF0E3;border-color:#FFD0A8;color:#8A3400}
.gh-zone[data-state="cri"] .gh-zone-lbl{background:#FCE7E5;border-color:#F6B5AF;color:#8E1A14}
.gh-zone[data-state="off"] .gh-zone-lbl{background:#F1F4F8;border-color:#CFD8E3;color:#465566}
.gh-hive{transform:translate(-50%,-54%);filter:drop-shadow(0 1px 1px rgba(29,28,29,.28))}
.gh-hive:hover{transform:translate(-50%,-54%) scale(1.2)}
.gh-hive .num{text-shadow:0 1px 1px rgba(255,255,255,.72)}
.gh-hive.tri.tri-att .num,.gh-hive.tri.tri-cri .num,.gh-hive.tri.tri-off .num{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.38)}
.gh-device{width:18px;height:18px;border-width:2.5px;box-shadow:0 0 0 1px rgba(29,28,29,.1),0 2px 6px rgba(36,45,54,.22)}
.gh-device i{font-size:9px}
.gh-device.tri-act{color:#A66C00}
.gh-device.tri-off{color:#6B7785}
.legend .d{border:1px solid rgba(29,28,29,.2)}
.reco-panel{background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:10px;position:sticky;top:84px}
.reco-panel__head h3{margin:0;font:700 13px Inter;color:var(--fg-strong);text-transform:uppercase;letter-spacing:.04em}
.reco-panel__note{font-size:12px;color:var(--fg-muted);padding:8px;border-radius:8px;background:var(--n-50)}
.reco-panel__note--error{color:#9a1f18;background:#FCE2E0}
.reco-panel__item{border:1px solid var(--n-150);border-radius:10px;padding:10px;background:#fff;display:flex;flex-direction:column;gap:6px}
.reco-panel__item h4{margin:0;font:600 13px Inter;color:var(--fg-strong)}
.reco-panel__item p{margin:0;font-size:12px;color:var(--fg-muted);line-height:1.4}
.reco-panel__meta{display:flex;gap:6px;flex-wrap:wrap}
.reco-panel__foot{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11px;color:var(--fg-muted);font-family:var(--font-mono)}

@media (max-width: 1180px){
  .gh-layout{grid-template-columns:1fr}
  .reco-panel{position:static}
}

@media (max-width: 980px){
  .gh-canvas{height:420px}
}

@media (max-width: 760px){
  .gh-canvas{height:360px;min-height:0}
  .gh-zone-lbl{top:4px;left:5px;font-size:9px;padding:2px 5px;gap:4px}
  .gh-zone-meta{display:none}
  .gh-hive.tri{border-left-width:11px;border-right-width:11px}
  .gh-hive.tri.tri-thr,.gh-hive.tri.tri-act,.gh-hive.tri.tri-att,.gh-hive.tri.tri-cri,.gh-hive.tri.tri-off{border-bottom-width:18px}
  .gh-hive .num{top:4px;font-size:8px}
  .gh-map-footer{align-items:flex-start}
  .gh-map-status-note{width:100%}
}

@media (max-width: 560px){
  .gh-canvas{height:300px}
  .gh-compass,.gh-scale{display:none}
  .gh-device{width:16px;height:16px}
}
/* [TASK_COMPLETE:T015] */

/* Guided walkthrough for sales/training demos (virtual stand) */
.walkthrough-card{padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.walkthrough-card__head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.walkthrough-card__sub{font-size:12px;color:var(--fg-muted)}
.walkthrough-progress{height:6px;border-radius:999px;background:var(--n-100);overflow:hidden}
.walkthrough-progress i{display:block;height:100%;background:linear-gradient(90deg,#FFB300,#FAC20B)}
.walkthrough-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:12px}
.walkthrough-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.walkthrough-step{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:flex-start;border:1px solid var(--border);border-radius:10px;padding:9px 10px;background:#fff}
.walkthrough-step.is-current{border-color:#FFB300;background:#FFF9EA}
.walkthrough-step.is-done{border-color:#D2EACE;background:#F6FCF6}
.walkthrough-step__marker{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--n-100);font:700 11px Inter;color:var(--fg-muted)}
.walkthrough-step.is-current .walkthrough-step__marker{background:#FFB300;color:#1D1C1D}
.walkthrough-step.is-done .walkthrough-step__marker{background:#26972B;color:#fff}
.walkthrough-step__title{font:600 12px Inter;color:var(--fg-strong);display:flex;align-items:center;gap:6px}
.walkthrough-step__meta{font-size:11px;color:var(--fg-muted);margin-top:2px;line-height:1.35}
.walkthrough-step__state{font:700 10px Inter;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-muted);align-self:center}
.walkthrough-step.is-current .walkthrough-step__state{color:#a04200}
.walkthrough-step.is-done .walkthrough-step__state{color:#146e1a}
.walkthrough-hint{border:1px solid var(--border);border-radius:10px;background:var(--n-50);padding:10px;display:flex;gap:10px}
.walkthrough-hint__icon{width:30px;height:30px;border-radius:8px;background:#FFF4D6;color:#a04200;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.walkthrough-hint__title{font:600 12px Inter;color:var(--fg-strong);margin-bottom:3px}
.walkthrough-hint__text{font-size:12px;color:var(--fg-muted);line-height:1.4}
.walkthrough-target.is-current{border-color:#FFB300;box-shadow:0 0 0 2px rgba(255,179,0,.2)}
.walkthrough-pulse{animation:walkthroughPulse 1.2s ease-in-out infinite}
@keyframes walkthroughPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,179,0,.35)}
  50%{box-shadow:0 0 0 4px rgba(255,179,0,.18)}
}

/* ── Command center ───────────────────────────────────────── */
.cmd-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cmd-builder{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px}
.cmd-step{padding:10px 12px;border:1px dashed var(--border);border-radius:8px;background:var(--n-50);margin-bottom:10px}
.cmd-step .lbl{font:600 10px Inter;text-transform:uppercase;letter-spacing:.05em;color:var(--fg-muted);margin-bottom:6px}
.cmd-target{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.cmd-target .chip{background:#fff}

@media (max-width: 1080px){
  .walkthrough-layout{grid-template-columns:1fr}
}

@media (max-width: 980px){
  .cmd-grid{grid-template-columns:1fr}
}

/* ── OTA campaigns ────────────────────────────────────────── */
.ota-row{display:grid;grid-template-columns:1fr 100px 100px 200px 100px;gap:14px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--n-150);background:#fff}
.ota-row:first-child{border-radius:12px 12px 0 0}
.ota-row:last-child{border-radius:0 0 12px 12px;border-bottom:none}
.ota-row b{font:600 13px Inter;color:var(--fg-strong)}
.ota-row .meta{font-size:11px;color:var(--fg-muted);margin-top:2px;font-variant-numeric:tabular-nums}
.ota-bar{height:8px;background:var(--n-150);border-radius:4px;overflow:hidden;position:relative}
.ota-bar i{display:block;height:100%;background:linear-gradient(90deg,#FFB300,#FAC20B);border-radius:4px}
.ota-bar.cri i{background:#E5342B}.ota-bar.ok i{background:#26972B}

/* ── Reports ──────────────────────────────────────────────── */
.report-tile{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px;cursor:pointer;display:flex;flex-direction:column;gap:10px}
.report-tile:hover{box-shadow:var(--shadow-md)}
.report-tile .ic{width:36px;height:36px;border-radius:8px;background:#F2F5F9;display:flex;align-items:center;justify-content:center;color:var(--fg);font-size:18px}
.report-tile h4{font:600 14px Inter;color:var(--fg-strong);margin:0}
.report-tile .desc{font-size:12px;color:var(--fg-muted);line-height:1.45;flex:1}
.report-tile .foot{font-size:11px;color:var(--fg-muted);font-variant-numeric:tabular-nums;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--n-150);padding-top:8px}

/* [TASK_START:T002] */
.report-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.report-filter-row{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 12px}
.report-demo-banner{padding:10px 12px;border:1px solid #FFE7CF;border-radius:8px;background:#FFF4D6;color:#a04200;font:600 12px Inter;display:flex;align-items:center;gap:8px;margin-bottom:8px}
.report-load-error{padding:10px 12px;border:1px solid #E5342B;border-radius:8px;background:#FCE2E0;color:#9a1f18;font:600 12px Inter;margin-bottom:8px}
.report-export-banner{position:sticky;top:8px;z-index:6;padding:10px 12px;border:1px solid #D9E6FF;border-radius:8px;background:#E7F0FB;color:#074d9e;font:600 12px Inter;display:flex;align-items:center;gap:8px;margin-bottom:10px}

.report-empty-state{border:1px dashed var(--border);border-radius:10px;background:var(--n-50);padding:28px 16px;color:var(--fg-muted);font:600 13px Inter;display:flex;align-items:center;justify-content:center;gap:10px}
.report-empty-state i{font-size:18px}
.spin{animation:report-spin 700ms linear infinite}
@keyframes report-spin{to{transform:rotate(360deg)}}

.report-date-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.report-date-row label{display:flex;flex-direction:column;gap:6px}
.report-date-row label span{font:600 11px Inter;color:var(--fg-muted);text-transform:uppercase;letter-spacing:.04em}
.report-date-input{height:38px;border:1px solid var(--border);border-radius:8px;padding:0 10px;font:500 13px Inter;color:var(--fg-strong);background:#fff}
.report-date-input:focus{outline:none;border-color:var(--keeper-honey);box-shadow:var(--shadow-focus)}
.report-generate-error{margin-bottom:10px;padding:8px 10px;border:1px solid #E5342B;border-radius:8px;background:#FCE2E0;color:#9a1f18;font:600 12px Inter}
.report-progress-wrap{margin-top:4px}
.report-progress-bar{height:8px;background:var(--n-150);border-radius:4px;overflow:hidden;margin-bottom:8px}
.report-progress-fill{height:100%;background:linear-gradient(90deg,#FFB300,#FAC20B);transition:width 180ms var(--ease-out)}
.report-progress-text{font-size:12px;color:var(--fg-muted);font-variant-numeric:tabular-nums}

.report-detail-panel{margin-top:14px;border:1px solid var(--border);border-radius:12px;background:#fff;padding:14px}
.report-detail-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;border-bottom:1px solid var(--n-150);padding-bottom:10px}
.report-detail-title{font:700 15px Inter;color:var(--fg-strong)}
.report-detail-period{margin-top:4px;font-size:12px;color:var(--fg-muted);font-variant-numeric:tabular-nums}
.report-detail-section{margin-top:12px}
.report-detail-section h4{margin:0 0 8px;font:600 13px Inter;color:var(--fg-strong)}
.report-detail-table{width:100%;border-collapse:collapse}
.report-detail-table th,.report-detail-table td{padding:8px 10px;border-top:1px solid var(--n-150);text-align:left;font-size:12px;color:var(--fg)}
.report-detail-table th{font:600 11px Inter;color:var(--fg-muted);text-transform:uppercase;letter-spacing:.04em}
.report-empty-row{margin-top:12px;padding:10px;border:1px dashed var(--border);border-radius:8px;background:var(--n-50);font-size:12px;color:var(--fg-muted)}

@media (max-width: 1080px){
  .report-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 760px){
  .report-grid{grid-template-columns:1fr}
  .report-date-row{grid-template-columns:1fr}
}
/* [TASK_COMPLETE:T002] */

/* ── Settings ─────────────────────────────────────────────── */
.settings-shell{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;align-items:start}
.settings-nav{display:flex;flex-direction:column;gap:2px;position:sticky;top:12px}
.settings-nav button{padding:8px 12px;border:none;background:transparent;border-radius:6px;font:500 13px Inter;color:var(--fg);cursor:pointer;text-align:left;display:flex;align-items:center;gap:8px}
.settings-nav button:hover{background:var(--n-100)}
.settings-nav button.on{background:#1D1C1D;color:#fff}
.settings-form{min-width:0}
.settings-form .row{display:grid;grid-template-columns:200px minmax(0,1fr);gap:14px;padding:14px 0;border-bottom:1px solid var(--n-150)}
.settings-form .row:last-child{border-bottom:none}
.settings-form .row .l{font:600 13px Inter;color:var(--fg-strong)}
.settings-form .row .desc{font-size:12px;color:var(--fg-muted);margin-top:2px}
.settings-form input,.settings-form select{max-width:100%}
.settings-banner{margin:0 0 12px;padding:10px 12px;border-radius:8px;background:#E8F2FF;border:1px solid #9BC3F0;color:#074d9e;font-size:12px;display:flex;align-items:flex-start;gap:8px;line-height:1.4}
.settings-banner::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.55;margin-top:5px;flex-shrink:0}
.settings-banner--error{background:#FCE2E0;border-color:#E5342B;color:#9a1f18}
.settings-banner--ok{background:#E6F7E6;border-color:#26972B;color:#146e1a}
.settings-banner--pending{background:#FFF4D6;border-color:#FFB300;color:#a04200}
.settings-save-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 8px}
.settings-save-note{font-size:12px;color:var(--fg-muted)}
.settings-save-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;min-width:0}
.settings-inline-error,.settings-inline-ok{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border-radius:6px;font:600 12px Inter;line-height:1.35;max-width:420px;word-break:break-word}
.settings-inline-error{color:#9a1f18;background:#FCE2E0;border:1px solid #E5342B}
.settings-inline-ok{color:#146e1a;background:#E6F7E6;border:1px solid #26972B}
.settings-field-error{margin-top:6px;font-size:12px;color:#9a1f18;display:flex;align-items:flex-start;gap:6px;line-height:1.35}
.settings-field-error::before{content:"";width:6px;height:6px;border-radius:50%;background:#E5342B;margin-top:5px;flex-shrink:0}
.settings-toggle{height:30px;min-width:64px;border-radius:999px;border:1px solid var(--border);padding:0 12px;font:600 12px Inter;background:#fff;color:var(--fg);cursor:pointer}
.settings-toggle.on{background:#1D1C1D;color:#fff;border-color:#1D1C1D}

@media (max-width: 1080px){
  .settings-shell{grid-template-columns:176px minmax(0,1fr);gap:16px}
  .settings-form .row{grid-template-columns:168px minmax(0,1fr)}
}

@media (max-width: 920px){
  .settings-shell{grid-template-columns:1fr;gap:12px}
  .settings-nav{position:static;flex-direction:row;gap:8px;overflow-x:auto;padding-bottom:4px}
  .settings-nav button{white-space:nowrap;flex-shrink:0}
}

@media (max-width: 760px){
  .settings-form .row{grid-template-columns:1fr;gap:8px;padding:12px 0}
  .settings-save-row{flex-direction:column;align-items:flex-start}
  .settings-save-actions{width:100%;justify-content:space-between}
  .settings-inline-error,.settings-inline-ok{max-width:none}
}

@media (max-width: 560px){
  .settings-save-actions{justify-content:flex-start}
}

/* ── Slide-over (right panel) — for hive page detail ──────── */
.tabs-panel{display:flex;gap:1px;background:var(--n-150);border-radius:8px;overflow:hidden;padding:1px}
.tabs-panel button{flex:1;height:30px;border:none;background:#fff;color:var(--fg-muted);font:500 12px Inter;cursor:pointer}
.tabs-panel button.on{background:var(--keeper-ink);color:#fff}

/* ── Avatar ───────────────────────────────────────────────── */
.av{width:28px;height:28px;border-radius:50%;background:#FFB300;color:#1D1C1D;display:inline-flex;align-items:center;justify-content:center;font:700 11px Inter;flex-shrink:0}
.av.sm{width:22px;height:22px;font-size:10px}

/* ── Confirm modal ────────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:var(--bg-overlay);display:flex;align-items:center;justify-content:center;z-index:50;animation:fadein 140ms var(--ease-out)}
.modal{background:#fff;border-radius:12px;width:480px;max-width:calc(100vw - 32px);box-shadow:var(--shadow-lg);overflow:hidden}
.modal-head{padding:18px 20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.modal-body{padding:18px 20px}
.modal-foot{padding:14px 20px;background:var(--n-50);display:flex;justify-content:flex-end;gap:8px;border-top:1px solid var(--border)}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* ── Empty / placeholder ──────────────────────────────────── */
.placeholder{padding:40px;text-align:center;color:var(--fg-muted);font-size:13px;background:repeating-linear-gradient(45deg,var(--n-50) 0 6px,transparent 6px 12px);border:1px dashed var(--border);border-radius:8px}

/* ── Drawer (right slide-over generic) ────────────────────── */
.drawer{position:fixed;top:0;right:0;height:100vh;width:480px;background:#fff;border-left:1px solid var(--border);box-shadow:var(--shadow-lg);z-index:30;display:flex;flex-direction:column;animation:slidein 200ms var(--ease-out)}
@keyframes slidein{from{transform:translateX(100%)}to{transform:translateX(0)}}
.drawer-head{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.drawer-body{flex:1;overflow:auto;padding:18px 20px}
.drawer-foot{padding:14px 20px;border-top:1px solid var(--border);display:flex;gap:8px;background:#fff}

/* ── Demo banner (stale data) ─────────────────────────────── */
.banner{padding:8px 16px;font:500 12px Inter;color:#a04200;background:#FFE7CF;border-bottom:1px solid #FFB300;display:flex;align-items:center;gap:8px;justify-content:center}

/* Hive map larger frame for full-page hive detail */
.hive-frame{border:1px solid var(--border);border-radius:12px;background:#fff;padding:0;overflow:hidden}
.hive-frame-head{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}

/* [TASK_START:T009] */
/* Hive gate controls */
.gate-panel{margin-top:14px;border:1px solid var(--border);border-radius:10px;background:#fff;padding:12px}
.gate-panel__head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:12px}
.gate-panel__title{font:600 13px Inter;color:var(--fg-strong)}
.gate-panel__meta{font-size:11px;color:var(--fg-muted);margin-top:4px}
.gate-controls{display:flex;gap:8px;flex-wrap:wrap}
.gate-warning{margin-top:8px;font-size:12px;color:#a04200;background:#FFE7CF;border:1px solid #FFB300;border-radius:8px;padding:8px 10px}
.gate-error{margin-top:8px;font-size:12px;color:#9a1f18;background:#FCE2E0;border:1px solid #E5342B;border-radius:8px;padding:8px 10px}
.gate-empty{font-size:12px;color:var(--fg-muted);background:var(--n-50);border:1px dashed var(--border);border-radius:8px;padding:12px}
.gate-history{margin-top:12px}
.gate-history__title{font:600 12px Inter;color:var(--fg-strong);margin-bottom:8px}
.gate-history__empty{font-size:12px;color:var(--fg-muted);padding:8px 0}
/* [TASK_COMPLETE:T009] */

/* Activity ring */
.ring{--p:74;--c:#7FB539;width:80px;height:80px;border-radius:50%;background:conic-gradient(var(--c) calc(var(--p)*1%),var(--n-150) 0);display:flex;align-items:center;justify-content:center;position:relative}
.ring::after{content:"";position:absolute;inset:6px;border-radius:50%;background:#fff}
.ring b{position:relative;font:700 18px Inter;font-variant-numeric:tabular-nums;color:var(--fg-strong);z-index:1}
.ring small{position:relative;font:500 10px Inter;color:var(--fg-muted);z-index:1;display:block;text-align:center;margin-top:-2px}

/* ── Sidebar collapse ──────────────────────────────────────── */
/* The wrapper div applies nav-collapsed; .app gets --sidebar-current-w via inline style from React */
.nav-collapsed .sidebar{padding:18px 8px;overflow:hidden;transition:padding 220ms var(--ease-out,ease)}
.nav-collapsed .brand-name,
.nav-collapsed .org,
.nav-collapsed .section,
.nav-collapsed .nav-item span:not(.badge),
.nav-collapsed .nav-item .badge,
.nav-collapsed .user div{display:none}
.nav-collapsed .brand{justify-content:center;padding:4px 0 16px}
.nav-collapsed .nav-item{justify-content:center;padding:10px 0;gap:0}
.nav-collapsed .nav-item i{font-size:18px}
.nav-collapsed .user{justify-content:center;padding:8px 0}
/* transition on the sidebar itself for smooth width animation */
.sidebar{transition:padding 220ms var(--ease-out,ease);width:100%;box-sizing:border-box}
/* collapse toggle button — subtle in expanded state, centered when collapsed */
.sidebar-collapse-btn{opacity:.55}
.sidebar-collapse-btn:hover{opacity:1}

/* tweak: density */
.dens-cozy .kpi{padding:14px}
.dens-cozy td{padding:10px}
.dens-comfy td{padding:14px}
.dens-comfy .kpi{padding:18px}

/* ── Chart tokens ─────────────────────────────────────────── */
:root{
  /* Palette — 8-slot categorical series (AA-contrast on white bg) */
  --chart-1:#FFB300;  /* keeper-honey  — primary series          */
  --chart-2:#074d9e;  /* deep blue     — secondary series        */
  --chart-3:#7FB539;  /* sage green    — tertiary / OK           */
  --chart-4:#FF7A00;  /* keeper-amber  — quaternary / warn       */
  --chart-5:#8B5CF6;  /* violet        — quinary                 */
  --chart-6:#06B6D4;  /* cyan          — senary                  */
  --chart-7:#E5342B;  /* red           — septenary / critical    */
  --chart-8:#9AA5B3;  /* cool-grey     — muted / baseline        */

  /* Soft-fill variants (10 % alpha over white) for area fills */
  --chart-1-soft:rgba(255,179,0,.10);
  --chart-2-soft:rgba(7,77,158,.10);
  --chart-3-soft:rgba(127,181,57,.10);
  --chart-4-soft:rgba(255,122,0,.10);
  --chart-5-soft:rgba(139,92,246,.10);
  --chart-6-soft:rgba(6,182,212,.10);
  --chart-7-soft:rgba(229,52,43,.10);
  --chart-8-soft:rgba(154,165,179,.10);

  /* Grid & axis chrome */
  --chart-grid:var(--n-150);          /* horizontal rule colour  */
  --chart-axis:var(--n-200);          /* axis line colour        */
  --chart-label:var(--fg-muted);      /* tick-label text colour  */
  --chart-label-fs:11px;              /* tick-label font-size    */
  --chart-tooltip-bg:#fff;
  --chart-tooltip-border:var(--border);
  --chart-tooltip-shadow:var(--shadow-md);

  /* Geometry */
  --chart-dot-r:4px;                  /* data-point circle radius  */
  --chart-dot-r-hover:6px;            /* hover-state radius        */
  --chart-stroke-w:2px;               /* default line stroke width */
  --chart-bar-radius:4px 4px 0 0;    /* bar-chart top corners     */

  /* Sizing */
  --chart-panel-h:220px;              /* default SVG/canvas height */
  --chart-panel-h-lg:320px;           /* tall variant              */
  --chart-panel-h-sm:120px;           /* sparkline variant         */
}

/* ── Chart panel (card wrapper) ──────────────────────────── */
/* Usage:
     <div class="chart-panel">
       <div class="chart-panel__head">
         <span class="chart-panel__title">Temp °C</span>
         <div class="chart-panel__actions">…</div>
       </div>
       <div class="chart-panel__body">
         <svg …> or <canvas …>
       </div>
       <div class="chart-panel__legend">…</div>
     </div>                                                    */
.chart-panel{background:#fff;border:1px solid var(--border);border-radius:12px;display:flex;flex-direction:column;overflow:hidden}
.chart-panel--flat{box-shadow:none}
.chart-panel--elevated{box-shadow:var(--shadow-md)}

.chart-panel__head{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0}
.chart-panel__title{font:600 13px/1 Inter;color:var(--fg-strong)}
.chart-panel__subtitle{font:400 12px/1 Inter;color:var(--fg-muted);margin-top:2px}
.chart-panel__actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.chart-panel__kicker{font:700 22px/1 Inter;font-variant-numeric:tabular-nums;color:var(--fg-strong);letter-spacing:-.015em}
.chart-panel__kicker small{font:500 13px Inter;color:var(--fg-muted);letter-spacing:0}
.chart-panel__delta{display:inline-flex;align-items:center;gap:3px;font:600 11px Inter;font-variant-numeric:tabular-nums;padding:2px 6px;border-radius:var(--radius-pill)}
.chart-panel__delta.up{background:var(--status-ok-soft);color:var(--status-ok-fg)}
.chart-panel__delta.down{background:var(--status-alert-soft);color:var(--status-alert-fg)}
.chart-panel__delta.flat{background:var(--n-100);color:var(--fg-muted)}

.chart-panel__body{flex:1;min-height:0;padding:12px 16px;position:relative}
.chart-panel__body svg,.chart-panel__body canvas{display:block;width:100%;height:var(--chart-panel-h)}
.chart-panel__body--lg svg,.chart-panel__body--lg canvas{height:var(--chart-panel-h-lg)}
.chart-panel__body--sm svg,.chart-panel__body--sm canvas{height:var(--chart-panel-h-sm)}
/* flush variant: chart reaches the card edges (no padding) */
.chart-panel__body--flush{padding:0}
.chart-panel__body--flush svg,.chart-panel__body--flush canvas{width:100%}

.chart-panel__legend{padding:8px 16px 12px;display:flex;flex-wrap:wrap;gap:10px;border-top:1px solid var(--n-150);flex-shrink:0}
.chart-panel__legend-item{display:inline-flex;align-items:center;gap:5px;font:400 11px Inter;color:var(--fg-muted)}
.chart-panel__legend-item::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--chart-swatch,var(--chart-8));flex-shrink:0}
/* Assign swatch colour per series via inline style --chart-swatch or utility classes */
.chart-series-1{--chart-swatch:var(--chart-1)}
.chart-series-2{--chart-swatch:var(--chart-2)}
.chart-series-3{--chart-swatch:var(--chart-3)}
.chart-series-4{--chart-swatch:var(--chart-4)}
.chart-series-5{--chart-swatch:var(--chart-5)}
.chart-series-6{--chart-swatch:var(--chart-6)}
.chart-series-7{--chart-swatch:var(--chart-7)}
.chart-series-8{--chart-swatch:var(--chart-8)}

.chart-panel__empty{padding:40px 16px;text-align:center;font-size:13px;color:var(--fg-muted)}
.chart-panel__loading{padding:40px 16px;display:flex;align-items:center;justify-content:center}

/* Tooltip (absolutely-positioned by JS) */
.chart-tooltip{position:absolute;pointer-events:none;background:var(--chart-tooltip-bg);border:1px solid var(--chart-tooltip-border);border-radius:8px;box-shadow:var(--chart-tooltip-shadow);padding:8px 10px;font-size:12px;color:var(--fg);white-space:nowrap;z-index:10;transition:opacity 100ms var(--ease-out)}
.chart-tooltip__label{font:600 11px Inter;color:var(--fg-muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.chart-tooltip__row{display:flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
.chart-tooltip__dot{width:6px;height:6px;border-radius:50%;background:var(--chart-swatch,var(--chart-8));flex-shrink:0}
.chart-tooltip__val{font:600 12px Inter;color:var(--fg-strong)}
.chart-tooltip__unit{font-size:11px;color:var(--fg-muted)}