/* proto.css — IoT Magic hi-fi prototype. Builds on colors_and_type.css + kit-fleet/device.
   New surfaces: top nav w/ breadcrumb + user menu, service launcher, structural
   hub/detail (IFC), admin, demo banner. Reuses fl-/dd- component classes. */

/* ---- app background (single aurora behind everything) ---- */
.pn-bg{position:fixed;inset:0;z-index:-2;overflow:hidden;
  background-image:
    radial-gradient(circle at 12% 8%, rgba(42,209,255,0.18), transparent 55%),
    radial-gradient(circle at 82% 0%, rgba(18,183,106,0.13), transparent 60%),
    linear-gradient(135deg, rgba(0,0,0,0.4), rgba(0,0,0,0.78));}
body.theme-light .pn-bg{background-image:linear-gradient(135deg,#f5f8fc,#e8eefa)}
.pn-bg .aurora{position:absolute;inset:0;opacity:0.5;pointer-events:none}
body.theme-light .pn-bg .aurora{opacity:1}
.pn-bg .aurora canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
body{margin:0;min-height:100vh}
.pn-fade{animation:pnFade .34s var(--easing-soft)}
@keyframes pnFade{from{transform:translateY(10px)}to{transform:translateY(0)}}

/* ---- top nav ---- */
.pn-nav{position:sticky;top:0;z-index:30;backdrop-filter:blur(20px);
  background:rgba(2,4,9,0.55);border-bottom:1px solid var(--border)}
body.theme-light .pn-nav{background:rgba(255,255,255,0.6);border-bottom:1px solid rgba(20,34,55,0.1)}
.pn-nav-inner{max-width:1320px;margin:0 auto;padding:14px 28px;display:flex;align-items:center;gap:18px}
.pn-brand{display:flex;align-items:center;gap:10px;cursor:pointer;text-decoration:none;color:var(--fg)}
.pn-brand .mark{width:30px;height:30px;border-radius:9px;background:var(--accent-gradient);
  display:grid;place-items:center;color:#04121a;font-weight:800;font-size:1rem;box-shadow:var(--shadow-glow-accent)}
.pn-brand .word{font-size:1.12rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase}
.pn-crumb{display:flex;align-items:center;gap:8px;font-size:0.9rem;color:var(--fg-faint);min-width:0}
.pn-crumb .sep{opacity:0.5}
.pn-crumb button{background:none;border:0;font:inherit;color:var(--fg-muted);cursor:pointer;padding:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-crumb button:hover{color:var(--accent)}
.pn-crumb .cur{color:var(--fg);font-weight:500}
.pn-nav-sp{flex:1}
.pn-nav-actions{display:flex;align-items:center;gap:12px}
.pn-toggle{width:40px;height:40px;border-radius:50%;border:1px solid var(--border);
  background:var(--surface);color:var(--fg-muted);display:inline-flex;align-items:center;
  justify-content:center;cursor:pointer;font-size:1rem;transition:all var(--dur-fast) ease}
.pn-toggle:hover{color:var(--accent);border-color:rgba(42,209,255,0.4)}

/* user menu */
.pn-user{position:relative}
.pn-user-btn{display:inline-flex;align-items:center;gap:9px;padding:5px 6px 5px 12px;border-radius:999px;
  background:var(--surface);border:1px solid var(--border);color:var(--fg);cursor:pointer;font:inherit;font-size:0.86rem}
.pn-user-btn:hover{border-color:rgba(42,209,255,0.4)}
.pn-avatar{width:28px;height:28px;border-radius:50%;background:var(--surface-soft);border:1px solid var(--border);
  display:grid;place-items:center;font-size:0.78rem;font-weight:600;color:var(--fg-muted)}
.pn-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:212px;background:var(--surface-strong);
  border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-soft);padding:8px;
  backdrop-filter:blur(18px);z-index:40}
.pn-menu .who{padding:8px 10px 10px;border-bottom:1px solid var(--border);margin-bottom:6px}
.pn-menu .who b{display:block;font-size:0.9rem}
.pn-menu .who span{font-size:0.78rem;color:var(--fg-faint)}
.pn-menu button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;
  font:inherit;font-size:0.88rem;color:var(--fg);padding:9px 10px;border-radius:9px;cursor:pointer}
.pn-menu button:hover{background:var(--surface-soft)}
.pn-menu button i{color:var(--fg-muted);font-size:1rem}
.pn-menu .danger{color:var(--alert)}
.pn-menu hr{border:0;border-top:1px solid var(--border);margin:6px 2px}

/* ---- generic page frame ---- */
.pn-main{max-width:1320px;margin:0 auto;padding:40px 28px 90px}
.pn-page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:30px}
.pn-page-head .eyebrow{margin-bottom:10px}
.pn-page-head h1{font-size:2.4rem;margin:0;font-weight:700;letter-spacing:-0.01em}
.pn-page-head p{color:var(--fg-muted);margin:8px 0 0;max-width:580px}
.pn-back{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--border);
  color:var(--fg-muted);border-radius:999px;padding:8px 15px;font-size:0.85rem;font-weight:500;cursor:pointer;font-family:inherit}
.pn-back:hover{color:var(--accent);border-color:rgba(42,209,255,0.4)}

/* ---- service launcher ---- */
.pn-launch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.pn-card{position:relative;display:flex;flex-direction:column;background:var(--surface-strong);
  border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-card);
  transition:transform var(--dur-base) ease,box-shadow var(--dur-base) ease,border-color var(--dur-base) ease}
.pn-card.live{cursor:pointer}
.pn-card.live:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-color:rgba(42,209,255,0.4)}
.pn-card-preview{position:relative;height:158px;background:#0b121b;overflow:hidden;border-bottom:1px solid var(--border)}
.pn-card-preview img{width:100%;height:100%;object-fit:cover;object-position:center 22%;opacity:0.92}
.pn-card-preview .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,12,20,0) 40%,rgba(8,12,20,0.55))}
.pn-card-ico{position:absolute;left:18px;bottom:14px;width:46px;height:46px;border-radius:13px;
  background:var(--surface-strong);border:1px solid var(--border);display:grid;place-items:center;
  font-size:1.5rem;color:var(--accent-strong);backdrop-filter:blur(8px)}
.pn-card-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.pn-card-body h3{margin:0;font-size:1.3rem;font-weight:700}
.pn-card-body p{margin:0;color:var(--fg-muted);font-size:0.92rem;flex:1}
.pn-card-meta{display:flex;align-items:center;gap:14px;color:var(--fg-faint);font-size:0.82rem;margin-top:2px}
.pn-card-meta .dotok{width:7px;height:7px;border-radius:50%;background:var(--success);display:inline-block;margin-right:6px;vertical-align:1px}
.pn-card-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.pn-cta{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;padding:10px 20px;
  font:inherit;font-weight:600;font-size:0.9rem;cursor:pointer;background:var(--accent-gradient);
  color:#04121a;box-shadow:var(--shadow-glow-accent)}
body.theme-light .pn-cta{color:#fff}
.pn-cta.ghost{background:var(--surface-soft);color:var(--fg);border:1px solid var(--border);box-shadow:none}
.pn-cta.ghost:hover{border-color:rgba(42,209,255,0.5);color:var(--accent)}
.pn-badge{font-size:0.68rem;text-transform:uppercase;letter-spacing:0.1em;font-weight:600;
  padding:4px 9px;border-radius:999px;border:1px solid;white-space:nowrap}
.pn-badge.demo{color:var(--warning);border-color:rgba(255,209,102,0.4);background:rgba(255,209,102,0.07)}
.pn-badge.ext{color:var(--accent-strong);border-color:rgba(88,255,181,0.35);background:rgba(88,255,181,0.06)}
.pn-card-tag{position:absolute;top:14px;right:14px;z-index:2}

/* card preview backings (theme-aware) */
/* container fleet — dominant map + route markers */
.fl-map-frame.tall{height:min(64vh,640px);min-height:440px}
.fl-map-marker{cursor:pointer}
.fl-map-marker.dim{opacity:0.3;transition:opacity 0.2s ease}
.fl-map-marker::after{content:'';position:absolute;inset:-7px;border-radius:50%;border:2px solid currentColor;opacity:0;}
.pn-prev-struct{position:absolute;inset:0;color:var(--accent);
  background:radial-gradient(circle at 50% 40%,#16243a,#0a1018 75%)}
body.theme-light .pn-prev-struct{color:#4f7bb5;background:radial-gradient(circle at 50% 35%,#eef4fc,#d7e3f2 80%)}
.pn-prev-sort{position:absolute;inset:0;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 35%, #143a2c, #08130d 75%)}
.pn-prev-sort i{font-size:3.4rem;color:rgba(88,255,181,0.4)}
body.theme-light .pn-prev-sort{background:radial-gradient(circle at 50% 35%,#e6f7ee,#c9ead8 80%)}
body.theme-light .pn-prev-sort i{color:rgba(18,160,110,0.55)}
.pn-card-preview{background:#0b121b}
body.theme-light .pn-card-preview{background:#dde7f4}

/* ---- demo banner ---- */
.pn-demobar{display:flex;align-items:center;gap:14px;max-width:1320px;margin:0 auto;
  padding:12px 22px;border-radius:var(--radius-md);border:1px solid rgba(255,209,102,0.35);
  background:rgba(255,209,102,0.07);color:var(--fg);margin-top:20px}
.pn-demobar .ico{font-size:1.2rem;color:var(--warning)}
.pn-demobar b{font-weight:600}
.pn-demobar span{color:var(--fg-muted);font-size:0.9rem}
.pn-demobar .req{margin-left:auto}

/* ---- empty state ---- */
.pn-empty{max-width:520px;margin:60px auto;text-align:center;display:grid;gap:16px;justify-items:center}
.pn-empty .orb{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;font-size:2.4rem;
  color:var(--accent-strong);background:var(--surface);border:1px solid var(--border)}
.pn-empty h2{margin:0;font-size:1.7rem}
.pn-empty p{margin:0;color:var(--fg-muted)}

/* ---- structural hub ---- */
.pn-st-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:20px}
.pn-st-card{display:flex;flex-direction:column;background:var(--surface-strong);border:1px solid var(--border);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);cursor:pointer;
  transition:transform var(--dur-base) ease,border-color var(--dur-base) ease,box-shadow var(--dur-base) ease}
.pn-st-card:hover{transform:translateY(-3px);border-color:rgba(42,209,255,0.4);box-shadow:var(--shadow-hover)}
.pn-st-thumb{height:150px;position:relative;border-bottom:1px solid var(--border);color:var(--accent);
  background:radial-gradient(circle at 50% 40%,#16243a,#0a1018 75%)}
body.theme-light .pn-st-thumb{color:#4f7bb5;background:radial-gradient(circle at 50% 35%,#eef4fc,#d7e3f2 80%)}
.pn-st-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 6px}
.pn-st-head .name{font-weight:700;font-size:1.05rem}
.pn-st-head .id{font-family:var(--font-mono);font-size:0.72rem;color:var(--fg-faint)}
.pn-st-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:8px 18px 18px}
.pn-st-metrics .m{display:flex;flex-direction:column;gap:2px}
.pn-st-metrics .m .v{font-weight:700;font-size:1.02rem;font-variant-numeric:tabular-nums}
.pn-st-metrics .m .k{font-size:0.66rem;text-transform:uppercase;letter-spacing:0.07em;color:var(--fg-faint)}

/* ---- structural detail (IFC center + metric rail) ---- */
.pn-st-detail{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px;align-items:start}
@media (max-width:980px){.pn-st-detail{grid-template-columns:1fr}}
.pn-model-card{background:var(--surface-strong);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);overflow:hidden;display:flex;flex-direction:column}
.pn-model-toolbar{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--border)}
.pn-model-toolbar h2{margin:0;font-size:1.15rem;font-weight:600}
.pn-model-toolbar .sp{flex:1}
.pn-tool{width:36px;height:36px;border-radius:10px;border:1px solid var(--border);background:var(--surface-soft);
  color:var(--fg-muted);display:grid;place-items:center;cursor:pointer;font-size:0.95rem}
.pn-tool:hover{color:var(--accent);border-color:rgba(42,209,255,0.4)}
.pn-model-stage{position:relative;height:460px;color:var(--accent);background:
  radial-gradient(circle at 50% 35%, #1a2940 0%, #0a111c 70%);overflow:hidden}
body.theme-light .pn-model-stage{color:#4f7bb5;background:
  radial-gradient(circle at 50% 30%, #f3f7fd 0%, #dde7f4 75%)}
.pn-model-stage svg{position:absolute;inset:0;width:100%;height:100%}
.pn-model-overlay{position:absolute;inset:0;display:grid;place-items:center;gap:14px;
  align-content:center;background:rgba(8,12,20,0.35);backdrop-filter:blur(2px)}
body.theme-light .pn-model-overlay{background:rgba(240,245,251,0.45)}
.pn-skel-grid{position:absolute;inset:0;opacity:0.5;background-image:
  linear-gradient(rgba(42,209,255,0.06) 1px,transparent 1px),
  linear-gradient(90deg,rgba(42,209,255,0.06) 1px,transparent 1px);background-size:34px 34px}
.pn-spin{width:42px;height:42px;border-radius:50%;border:3px solid rgba(255,255,255,0.12);
  border-top-color:var(--accent);animation:pnspin 0.9s linear infinite}
@keyframes pnspin{to{transform:rotate(360deg)}}
.pn-model-overlay .lbl{font-size:0.9rem;color:var(--fg-muted);font-family:var(--font-mono)}
.pn-model-elt{position:absolute;display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;
  background:rgba(8,12,20,0.8);border:1px solid rgba(42,209,255,0.45);font-size:0.72rem;color:var(--accent);
  font-family:var(--font-mono);transform:translate(-50%,-50%);backdrop-filter:blur(6px)}
.pn-model-elt .pulse{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(42,209,255,0.6);
  animation:pnpulse 1.8s ease infinite}
@keyframes pnpulse{0%{box-shadow:0 0 0 0 rgba(42,209,255,0.5)}70%{box-shadow:0 0 0 10px rgba(42,209,255,0)}100%{box-shadow:0 0 0 0 rgba(42,209,255,0)}}
.pn-model-foot{display:flex;align-items:center;gap:10px;padding:12px 18px;border-top:1px solid var(--border);
  color:var(--fg-muted);font-size:0.85rem}
.pn-rail{display:flex;flex-direction:column;gap:14px}
.pn-mcard{background:var(--surface-strong);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:16px 18px;box-shadow:var(--shadow-card)}
.pn-mcard-h{display:flex;align-items:center;justify-content:space-between;color:var(--fg-muted);font-size:0.85rem}
.pn-mcard-h i{color:var(--accent-strong)}
.pn-mcard .big{font-size:1.85rem;font-weight:700;line-height:1.05;margin:8px 0 2px;letter-spacing:-0.01em}
.pn-mcard .sub{font-size:0.78rem;color:var(--fg-faint)}
.pn-mcard .pair{display:flex;gap:22px}
.pn-mcard .pair .v{font-size:1.5rem;font-weight:700;line-height:1}
.pn-mcard .pair .k{font-size:0.66rem;text-transform:uppercase;letter-spacing:0.07em;color:var(--fg-faint)}

/* ---- IFC standalone viewer ---- */
.pn-ifc{display:grid;grid-template-columns:230px minmax(0,1fr) 250px;gap:0;height:calc(100vh - 64px);
  border-top:1px solid var(--border);position:relative;overflow:hidden;transition:grid-template-columns var(--dur-base) var(--easing-soft)}
.pn-ifc.tree-collapsed{grid-template-columns:0 minmax(0,1fr) 250px}
.pn-ifc-panel{padding:18px 16px;overflow:auto;border-right:1px solid var(--border);transition:transform var(--dur-base) var(--easing-soft),opacity var(--dur-base) ease}
.pn-ifc.tree-collapsed .pn-ifc-panel.l{transform:translateX(-100%);opacity:0;pointer-events:none}
.pn-ifc-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.pn-ifc-panel-head h4{margin:0}
.pn-panel-collapse{width:28px;height:28px;border-radius:8px;border:1px solid var(--border);background:var(--surface-soft);
  color:var(--fg-muted);display:grid;place-items:center;cursor:pointer;font-size:0.85rem;flex:0 0 auto}
.pn-panel-collapse:hover{color:var(--accent);border-color:rgba(42,209,255,0.4)}
/* reopen tab — only visible when collapsed */
.pn-tree-tab{position:absolute;left:0;top:18px;z-index:6;display:none;align-items:center;gap:6px;
  background:var(--surface-strong);border:1px solid var(--border);border-left:0;border-radius:0 10px 10px 0;
  color:var(--fg-muted);font:inherit;font-size:0.8rem;font-weight:600;padding:9px 12px 9px 10px;cursor:pointer;
  box-shadow:var(--shadow-card);backdrop-filter:blur(8px)}
.pn-tree-tab:hover{color:var(--accent);border-color:rgba(42,209,255,0.4)}
.pn-tree-tab i{font-size:0.95rem;color:var(--accent-strong)}
.pn-ifc.tree-collapsed .pn-tree-tab{display:inline-flex}
.pn-ifc-panel.r{border-right:0;border-left:1px solid var(--border);transform:none;opacity:1}
.pn-ifc-panel h4{margin:0 0 12px;font-size:0.72rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--fg-faint)}
.pn-tree{display:flex;flex-direction:column;gap:3px;font-size:0.85rem}
.pn-tree .node{padding:6px 9px;border-radius:8px;color:var(--fg-muted);cursor:pointer;display:flex;gap:8px;align-items:center}
.pn-tree .node:hover{background:var(--surface-soft);color:var(--fg)}
.pn-tree .node.sel{background:rgba(42,209,255,0.1);color:var(--accent);border:1px solid rgba(42,209,255,0.3)}
.pn-tree .node.child{margin-left:16px;font-size:0.82rem}
.pn-ifc-stage{position:relative;color:var(--accent);background:radial-gradient(circle at 50% 40%,#16243a,#080d15 75%)}
body.theme-light .pn-ifc-stage{color:#4f7bb5;background:radial-gradient(circle at 50% 35%,#eef4fc,#d3e0f1 80%)}
.pn-map-card{background:var(--surface-strong);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:12px;margin-bottom:12px}
.pn-map-card .id{font-family:var(--font-mono);font-size:0.72rem;color:var(--fg-faint)}
.pn-map-card .to{font-size:1.05rem;font-weight:700;color:var(--accent);margin-top:3px}

/* IFC viewer right panel — selected device telemetry */
.pn-ifc-sel{background:var(--surface-soft);border:1px solid var(--border);border-radius:var(--radius-md);padding:12px 14px}
.pn-ifc-sel .row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.pn-ifc-sel .nm{font-weight:700;font-size:1.05rem}
.pn-ifc-sel .el{font-size:0.8rem;color:var(--fg-muted)}
.pn-ifc-sel .mono{font-family:var(--font-mono);font-size:0.68rem;color:var(--fg-faint);margin-top:8px;word-break:break-all}
.pn-ifc-metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pn-ifc-metrics .mc{background:var(--surface-strong);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px}
.pn-ifc-metrics .mc.wide{grid-column:1 / -1}
.pn-ifc-metrics .k{display:flex;align-items:center;gap:6px;font-size:0.74rem;color:var(--fg-faint);text-transform:uppercase;letter-spacing:0.05em}
.pn-ifc-metrics .k i{color:var(--accent-strong);font-size:0.95rem}
.pn-ifc-metrics .v{font-size:1.5rem;font-weight:700;line-height:1.1;margin-top:5px}
.pn-ifc-metrics .v.sm{font-size:0.95rem;font-weight:600;color:var(--fg-muted)}
.pn-ifc-metrics .v small{font-size:0.8rem;color:var(--fg-muted);font-weight:500}
.pn-ifc-metrics .vrow{display:flex;gap:18px;margin-top:5px}
.pn-ifc-metrics .vrow b{font-size:1.35rem}
.pn-ifc-metrics .vrow small{font-size:0.7rem;color:var(--fg-faint);font-weight:500}
.pn-ifc-maprow{display:flex;flex-direction:column;gap:5px}
.pn-maptag{display:flex;align-items:center;gap:7px;width:100%;text-align:left;font:inherit;font-size:0.8rem;
  color:var(--fg-muted);background:var(--surface-soft);border:1px solid var(--border);border-radius:8px;padding:7px 10px;cursor:pointer}
.pn-maptag:hover{color:var(--fg)}
.pn-maptag.on{color:var(--accent);border-color:rgba(42,209,255,0.4);background:rgba(42,209,255,0.08)}
.pn-maptag .sdot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}

/* ---- admin ---- */
.pn-admin{display:grid;grid-template-columns:212px minmax(0,1fr);gap:0;border:1px solid var(--border);
  border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-strong);box-shadow:var(--shadow-card)}
.pn-admin-side{padding:16px 12px;border-right:1px solid var(--border);background:var(--surface-soft);display:flex;flex-direction:column;gap:3px}
.pn-admin-side a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:var(--fg-muted);
  font-size:0.9rem;cursor:pointer;text-decoration:none}
.pn-admin-side a:hover{color:var(--fg);background:var(--surface)}
.pn-admin-side a.active{color:var(--fg);background:var(--surface);border:1px solid var(--border);font-weight:600}
.pn-admin-side a i{font-size:1.05rem}
.pn-admin-main{padding:24px 26px}
.pn-admin-main .bar{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.pn-admin-main .bar h2{margin:0;font-size:1.5rem}
.pn-admin-main .bar .sp{flex:1}
.pn-cap{display:inline-flex;align-items:center;gap:5px;font-size:0.82rem}
.pn-cap.on{color:var(--accent-strong)}
.pn-cap.off{color:var(--fg-faint)}
.pn-rolechip{display:inline-flex;padding:3px 10px;border-radius:999px;font-size:0.7rem;text-transform:uppercase;
  letter-spacing:0.06em;border:1px solid var(--border);background:var(--surface-soft);color:var(--fg-muted);font-weight:500}
.pn-note{margin-top:16px;padding:12px 16px;border:1px dashed var(--border);border-radius:var(--radius-md);
  color:var(--fg-muted);font-size:0.86rem}
.pn-note b{color:var(--fg)}

/* ===== admin panels ===== */
.pn-admin-side a{cursor:pointer}
.adm-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
@media (max-width:820px){.adm-stats{grid-template-columns:repeat(2,1fr)}}
.adm-stat{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;font:inherit;cursor:pointer;
  background-color:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:16px 18px;
  transition:transform var(--dur-fast) ease,border-color var(--dur-fast) ease}
.adm-stat:hover{transform:translateY(-2px);border-color:rgba(42,209,255,0.4)}
.adm-stat-ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;margin-bottom:8px;
  background:var(--surface-soft);color:var(--accent-strong);font-size:1.1rem}
.adm-stat-v{font-size:2rem;font-weight:700;line-height:1}
.adm-stat-k{font-size:0.92rem;font-weight:600}
.adm-stat-sub{font-size:0.76rem;color:var(--fg-faint)}

.adm-search{padding:0 12px;gap:7px}
.adm-search input{border:0;background:none;outline:none;color:var(--fg);font:inherit;font-size:0.85rem;width:140px}
.adm-search input::placeholder{color:var(--fg-faint)}

.adm-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-bottom:18px}
.adm-client,.adm-app{background-color:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:16px 18px}
.adm-client-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.adm-client-h h3{margin:0;font-size:1.15rem}
.adm-client-sector{font-size:0.78rem;color:var(--fg-faint)}
.adm-client-meta{display:flex;flex-direction:column;gap:5px;margin:12px 0;font-size:0.84rem;color:var(--fg-muted)}
.adm-client-meta i{color:var(--accent-strong);margin-right:6px}
.adm-client-apps{display:flex;flex-wrap:wrap;gap:6px}

.adm-app{display:flex;align-items:center;gap:14px}
.adm-app-ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--surface-soft);color:var(--accent-strong);font-size:1.4rem}
.adm-app-body{flex:1;min-width:0}
.adm-app-body h3{margin:0;font-size:1.05rem}
.adm-app-body p{margin:2px 0 4px;font-size:0.84rem;color:var(--fg-muted)}
.adm-app-meta{font-size:0.74rem;color:var(--fg-faint)}
.adm-switch{width:42px;height:24px;border-radius:999px;background:var(--surface-soft);border:1px solid var(--border);
  position:relative;flex:0 0 auto;cursor:pointer}
.adm-switch .knob{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--fg-muted);transition:left var(--dur-fast) ease}
.adm-switch.on{background:var(--accent-gradient);border-color:transparent}
.adm-switch.on .knob{left:20px;background:#04121a}

.adm-audit{display:flex;flex-direction:column;border:1px solid var(--glass-border);border-radius:var(--radius-md);
  overflow:hidden;background-color:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);margin-bottom:18px}
.adm-audit-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);font-size:0.88rem}
.adm-audit-row:last-child{border-bottom:0}
.adm-audit-ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--surface-soft);color:var(--accent-strong);font-size:1rem}
.adm-audit-main{flex:1;min-width:0;color:var(--fg-muted)}
.adm-audit-main b{color:var(--fg);font-weight:600}
.adm-audit-tgt{color:var(--accent-strong)}
.adm-audit-t{font-size:0.76rem;color:var(--fg-faint);font-family:var(--font-mono);white-space:nowrap}

/* small helpers */
.pn-tools-inline{display:flex;gap:10px;align-items:center}
.pn-chiprow{display:flex;gap:8px;flex-wrap:wrap}
.pn-seg{display:inline-flex;background:var(--surface-soft);border:1px solid var(--border);border-radius:999px;padding:3px}
.pn-seg button{border:0;background:none;color:var(--fg-muted);font:inherit;font-size:0.82rem;font-weight:500;
  padding:6px 14px;border-radius:999px;cursor:pointer}
.pn-seg button.on{background:var(--accent-gradient);color:#04121a}
body.theme-light .pn-seg button.on{color:#fff}

/* device-detail dark inner panels → lighten in light theme */
body.theme-light .dd-conf-card{background:rgba(255,255,255,0.7)}
body.theme-light .dd-chart-canvas{background:rgba(20,34,55,0.05)}
body.theme-light .dd-ai-photo{background:#e8eef6}
body.theme-light .dd-table thead{background:rgba(20,34,55,0.04)}
body.theme-light .dd-table td{border-bottom-color:rgba(20,34,55,0.08)}

/* ===== frosted glass for card "windows" over the aurora =====
   Translucent fill + backdrop blur so panels read as glass, not flat color. */
.pn-card,
.pn-st-card,
.fl-map-card,
.pn-model-card,
.pn-panel,
.pn-rail .pn-mcard,
.pn-mcard,
.ai-sec,
.trend-metric,
.trend-chart,
.pn-admin,
.dd-table-shell,
.fl-table-shell,
.dd-conf-card,
.pn-ifc-sel,
.pn-ifc-metrics .mc{
  background-color:var(--glass-strong);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border-color:var(--glass-border);
}
/* dropdown menus over content stay solid + readable (lighter blur, opaque fill) */
.pn-menu,
.cd-menu{
  background-color:var(--surface-strong);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
/* inner mini-cards: lighter glass so nesting still has depth */
.pn-rail .pn-mcard,
.pn-mcard,
.trend-metric,
.dd-conf-card,
.pn-ifc-metrics .mc,
.pn-ifc-sel{
  background-color:var(--glass);
}
/* keep crisp media flush to the glass edge */
.pn-card-preview,
.pn-st-thumb{background-color:transparent}

/* ===== redesigned container detail ===== */
.cd-page > .ai-sec{margin-top:6px}
.cd-page > .dd-section + .dd-section,
.cd-page > .ai-sec + .dd-section{margin-top:40px}
.cd-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.cd-switch{display:flex;align-items:center;gap:8px}
.cd-step{width:38px;height:38px;border-radius:10px;border:1px solid var(--border);background:var(--surface);
  color:var(--fg-muted);display:grid;place-items:center;cursor:pointer;font-size:1rem}
.cd-step:hover{color:var(--accent);border-color:rgba(42,209,255,0.4)}
.cd-pick{position:relative}
.cd-pick-btn{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:7px 12px;cursor:pointer;color:var(--fg);font:inherit}
.cd-pick-btn b{font-size:1rem}
.cd-pick-btn i{color:var(--fg-faint)}
.cd-pick-btn:hover{border-color:rgba(42,209,255,0.4)}
.cd-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:20;min-width:260px;background:var(--surface-strong);
  border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-soft);padding:7px;backdrop-filter:blur(18px)}
.cd-menu button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;font:inherit;
  color:var(--fg);padding:9px 11px;border-radius:9px;cursor:pointer;font-size:0.9rem}
.cd-menu button:hover{background:var(--surface-soft)}
.cd-menu button.on{background:rgba(42,209,255,0.1);color:var(--accent)}
.cd-menu .cd-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.cd-menu .cd-menu-meta{margin-left:auto;font-size:0.78rem;color:var(--fg-faint)}
.cd-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.cd-head h1{font-size:2.4rem;margin:4px 0 0;font-weight:700;letter-spacing:-0.01em}
.cd-head .dd-meta{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.cd-head .dd-meta i{color:var(--accent-strong)}

/* AI hero */
.ai-sec{background:var(--surface-strong);border:1px solid var(--border);border-radius:var(--radius-xl);
  padding:26px;box-shadow:var(--shadow-card)}
.ai-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px}
.ai-head h2{font-size:1.9rem;margin:6px 0 0;font-weight:700}
.ai-scrub{display:flex;align-items:center;gap:6px;background:var(--surface-soft);border:1px solid var(--border);border-radius:999px;padding:4px}
.ai-scrub button{width:34px;height:34px;border-radius:50%;border:0;background:transparent;color:var(--fg-muted);cursor:pointer;font-size:1rem;display:grid;place-items:center}
.ai-scrub button:hover:not(:disabled){background:var(--surface);color:var(--accent)}
.ai-scrub button:disabled{opacity:0.35;cursor:not-allowed}
.ai-scrub-mid{display:flex;align-items:baseline;gap:5px;padding:0 6px;font-size:0.82rem;color:var(--fg-faint)}
.ai-scrub-mid .cap{text-transform:uppercase;letter-spacing:0.08em;font-size:0.68rem;color:var(--fg-faint);margin-right:2px}
.ai-scrub-mid b{font-size:1rem;color:var(--fg)}
.ai-scrub-mid em{font-style:normal;margin-left:8px;padding-left:8px;border-left:1px solid var(--border)}
.ai-hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:24px}
@media (max-width:880px){.ai-hero{grid-template-columns:1fr}}
.ai-photo{position:relative;margin:0;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);
  background:#0b121b;aspect-ratio:4/3}
body.theme-light .ai-photo{background:#e8eef6}
.ai-photo img{width:100%;height:100%;object-fit:cover;display:block}
.ai-photo figcaption{position:absolute;left:12px;bottom:10px;background:rgba(8,12,20,0.7);border:1px solid var(--border);
  border-radius:8px;padding:4px 9px;backdrop-filter:blur(6px)}
.ai-photo figcaption .dd-mono{font-size:0.72rem;color:#cfe2f5}
.ai-photo-tag{position:absolute;left:12px;top:12px;display:flex;align-items:center;gap:7px;background:rgba(8,12,20,0.78);
  border:1px solid var(--border);border-radius:999px;padding:5px 12px;font-size:0.82rem;font-weight:600;color:#eaf6ff;backdrop-filter:blur(6px)}
.ai-photo-tag .dot{width:8px;height:8px;border-radius:50%}
.ai-info{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px 24px;grid-template-areas:"verdict verdict" "ring breakdown";align-items:center}
.ai-info > .ai-verdict{grid-area:verdict}
.ai-info > .ai-ring{grid-area:ring}
.ai-info > .ai-breakdown{grid-area:breakdown}
.ai-verdict{border-bottom:1px solid var(--border);padding-bottom:18px}
.ai-verdict .lbl{font-size:0.72rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--fg-faint)}
.ai-verdict .row{display:flex;align-items:baseline;gap:14px;margin-top:6px}
.ai-verdict .name{font-size:2.3rem;font-weight:700;letter-spacing:-0.01em;line-height:1}
.ai-verdict .conf{font-size:1.4rem;font-weight:700;color:var(--accent-strong)}
.ai-verdict .sub{display:block;margin-top:7px;font-size:0.86rem;color:var(--fg-muted)}
.ai-gauge{display:flex;align-items:center;gap:24px}
@media (max-width:560px){.ai-gauge{flex-direction:column;align-items:flex-start;gap:18px}}
.ai-ring{position:relative;flex:0 0 auto}
.ai-ring svg{display:block}
.ai-ring-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ai-ring-c b{font-size:1.7rem;font-weight:700;line-height:1}
.ai-ring-c b small{font-size:0.9rem;font-weight:600;color:var(--fg-muted)}
.ai-ring-c span{font-size:0.68rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--fg-faint);margin-top:2px}
.ai-breakdown{flex:1;min-width:0}
.ai-breakdown h4{margin:0 0 10px;font-size:0.72rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--fg-faint);font-weight:600}
.ai-bd-row{display:grid;grid-template-columns:78px 1fr 38px;align-items:center;gap:10px;margin-bottom:7px;font-size:0.84rem}
.ai-bd-row .bd-name{color:var(--fg-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-bd-row .bd-bar{height:7px;border-radius:999px;background:var(--surface-soft);overflow:hidden}
.ai-bd-row .bd-bar i{display:block;height:100%;border-radius:999px;background:var(--accent-gradient);transition:width 0.4s var(--easing-soft)}
.ai-bd-row .bd-val{text-align:right;font-variant-numeric:tabular-nums;color:var(--fg)}

/* trend explorer */
.trend{display:flex;flex-direction:column;gap:18px}
.trend-period button{min-width:46px}
.trend-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:720px){.trend-metrics{grid-template-columns:repeat(2,1fr)}}
.trend-metric{display:flex;flex-direction:column;gap:6px;text-align:left;background:var(--surface-strong);
  border:1px solid var(--border);border-radius:var(--radius-md);padding:14px 16px;cursor:pointer;font:inherit;
  transition:border-color var(--dur-fast) ease,transform var(--dur-fast) ease,box-shadow var(--dur-fast) ease}
.trend-metric:hover{transform:translateY(-2px);box-shadow:var(--shadow-card)}
.trend-metric.on{box-shadow:var(--shadow-card)}
.trend-metric .k{display:flex;align-items:center;gap:7px;font-size:0.82rem;color:var(--fg-muted)}
.trend-metric .v{font-size:1.6rem;font-weight:700;line-height:1;letter-spacing:-0.01em}
.trend-metric .v small{font-size:0.85rem;font-weight:600;color:var(--fg-muted);margin-left:2px}
.trend-mini{width:100%;height:30px;margin-top:2px;opacity:0.85}
.trend-chart{position:relative;background:var(--surface-strong);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:18px 18px 6px;box-shadow:var(--shadow-card)}
.trend-stats{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:8px;font-size:0.84rem;color:var(--fg-muted)}
.trend-stats b{color:var(--fg);font-variant-numeric:tabular-nums}
.trend-stats .cur{display:inline-flex;align-items:center;gap:7px}
.trend-stats .cur .dot{width:8px;height:8px;border-radius:50%}
.trend-stats .cur b{color:inherit;font-size:1rem}
.trend-svg{display:block;width:100%;touch-action:none}
.trend-grid{stroke:rgba(255,255,255,0.07);stroke-width:1}
body.theme-light .trend-grid{stroke:rgba(20,34,55,0.08)}
.trend-axis{fill:var(--fg-faint);font-size:11px;font-family:var(--font-mono)}
.trend-cross{stroke:var(--fg-faint);stroke-width:1;stroke-dasharray:3 3}
.trend-tip{position:absolute;top:42px;transform:translateX(-50%);pointer-events:none;background:var(--surface-strong);
  border:1px solid var(--border);border-radius:9px;padding:6px 11px;box-shadow:var(--shadow-card);text-align:center;backdrop-filter:blur(8px)}
.trend-tip b{display:block;font-size:0.95rem;font-variant-numeric:tabular-nums}
.trend-tip span{font-size:0.72rem;color:var(--fg-faint);font-family:var(--font-mono)}

/* ---- structure detail v2: sensors | stage | rail ---- */
.pn-st-detail2{display:grid;grid-template-columns:248px minmax(0,1fr) 288px;gap:18px;align-items:start}
@media (max-width:1120px){.pn-st-detail2{grid-template-columns:220px minmax(0,1fr)}.pn-st-detail2 .pn-rail{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap}.pn-st-detail2 .pn-rail .pn-mcard{flex:1;min-width:160px}}
@media (max-width:760px){.pn-st-detail2{grid-template-columns:1fr}}

.pn-panel{background:var(--surface-strong);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);overflow:hidden}
.pn-panel-h{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px}
.pn-panel-h h3{margin:0;font-size:0.95rem;font-weight:600}
.pn-panel-h .count{margin-left:auto;font-size:0.78rem;color:var(--fg-faint)}
.pn-sensorlist{display:flex;flex-direction:column;padding:6px}
.pn-sensor-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;cursor:pointer;
  border:1px solid transparent;transition:background var(--dur-fast) ease,border-color var(--dur-fast) ease}
.pn-sensor-item:hover{background:var(--surface-soft)}
.pn-sensor-item.sel{background:rgba(42,209,255,0.08);border-color:rgba(42,209,255,0.35)}
.pn-sensor-item .sdot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.pn-sensor-item .nm{font-weight:600;font-size:0.9rem}
.pn-sensor-item .el{font-size:0.76rem;color:var(--fg-faint)}
.pn-sensor-item .mono{font-family:var(--font-mono);font-size:0.68rem;color:var(--fg-faint);margin-left:auto}

/* stage with marker overlay */
.pn-stage-inner{position:absolute;inset:0}
.pn-stage-inner > image-slot{position:absolute;inset:0;width:100%;height:100%;display:block}
.pn-ifc3d{position:absolute;inset:0;width:100%;height:100%;cursor:grab}
.pn-ifc3d:active{cursor:grabbing}
.pn-ifc-stage .pn-ifc3d{position:relative}
.pn-marker-layer{position:absolute;inset:0;pointer-events:none}
.pn-sensor-marker{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;display:flex;align-items:center;gap:7px;
  background:none;border:0;cursor:pointer;font-family:inherit;padding:0;z-index:2}
.pn-sensor-marker .pin{width:16px;height:16px;border-radius:50%;border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,0.6);
  background:var(--fg-faint);transition:transform var(--dur-fast) ease}
.pn-sensor-marker:hover .pin{transform:scale(1.2)}
.pn-sensor-marker.sel .pin{background:var(--accent);box-shadow:0 0 0 5px rgba(42,209,255,0.25),0 2px 8px rgba(0,0,0,0.6)}
.pn-sensor-marker .tag{font-size:0.72rem;font-family:var(--font-mono);color:#eaf6ff;background:rgba(8,12,20,0.82);
  border:1px solid var(--border);border-radius:999px;padding:3px 9px;white-space:nowrap;backdrop-filter:blur(6px)}
body.theme-light .pn-sensor-marker .tag{color:#0f2740;background:rgba(255,255,255,0.9);border-color:rgba(20,34,55,0.18)}
body.theme-light .pn-sensor-marker .pin{border-color:#1b2b40}
.pn-sensor-marker.muted .pin{width:13px;height:13px;border-width:1.5px;opacity:0.85}

/* on/off switch */
.pn-switch{display:inline-flex;align-items:center;gap:9px;font-size:0.82rem;color:var(--fg-muted);cursor:pointer;user-select:none}
.pn-switch .track{width:38px;height:22px;border-radius:999px;background:var(--surface-soft);border:1px solid var(--border);
  position:relative;transition:background var(--dur-fast) ease,border-color var(--dur-fast) ease}
.pn-switch .knob{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--fg-muted);
  transition:left var(--dur-fast) ease,background var(--dur-fast) ease}
.pn-switch.on .track{background:var(--accent-gradient);border-color:transparent}
.pn-switch.on .knob{left:18px;background:#04121a}

.pn-seg button:disabled{opacity:0.35;cursor:not-allowed}
.pn-seg-3d{display:inline-flex;align-items:center;gap:7px}
.pn-seg-spin{width:11px;height:11px;border-radius:50%;border:2px solid rgba(127,127,127,0.35);
  border-top-color:var(--accent);animation:pnspin 0.8s linear infinite;display:inline-block;flex:0 0 auto}
.pn-seg-3d.on .pn-seg-spin{border-color:rgba(4,18,26,0.3);border-top-color:#04121a}
.pn-seg-ready{width:7px;height:7px;border-radius:50%;background:var(--success);display:inline-block;flex:0 0 auto;
  box-shadow:0 0 0 3px rgba(18,183,106,0.16)}
.pn-model-3dwrap{position:absolute;inset:0}
.pn-schematic{position:absolute;inset:0;width:100%;height:100%}
.pn-stage-hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);font-size:0.78rem;color:var(--fg-faint);
  background:rgba(8,12,20,0.6);border:1px solid var(--border);border-radius:999px;padding:5px 12px;backdrop-filter:blur(6px);z-index:3}
body.theme-light .pn-stage-hint{background:rgba(255,255,255,0.78)}

/* ===== landing / login (pre-auth) ===== */
.lp{min-height:100vh}
.mk-hero-shot{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-soft)}
.lp-shot{width:100%;display:block}
.lp-shot-light{display:none}
body.theme-light .lp-shot-dark{display:none}
body.theme-light .lp-shot-light{display:block}

/* lightbox */
.mk-lightbox{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:2rem;
  background:rgba(2,4,9,0.78);backdrop-filter:blur(6px)}
body.theme-light .mk-lightbox{background:rgba(245,248,252,0.82)}
.mk-lightbox-inner{position:relative;max-width:min(1200px,95vw);max-height:95vh;background:var(--surface-strong);
  border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);display:flex;flex-direction:column;overflow:hidden}
.mk-lightbox-inner header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border)}
.mk-lightbox-inner header h2{margin:0;font-size:1rem;font-weight:600}
.mk-lightbox-body{padding:1rem;overflow:auto;display:flex;justify-content:center}
.mk-lightbox-body img{max-width:100%;max-height:80vh;border-radius:var(--radius-md)}

/* login */
.lp-login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px;position:relative}
.lp-login-home{position:absolute;top:24px;left:28px;display:inline-flex;align-items:center;gap:7px;background:var(--surface);
  border:1px solid var(--border);color:var(--fg-muted);border-radius:999px;padding:8px 15px;font-size:0.85rem;font-weight:500;cursor:pointer;font-family:inherit}
.lp-login-home:hover{color:var(--accent);border-color:rgba(42,209,255,0.4)}
.lp-login-theme{position:absolute;top:20px;right:28px}
.lp-login-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,0.85fr);max-width:880px;width:100%;
  background:var(--surface-strong);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-soft);overflow:hidden}
@media (max-width:720px){.lp-login-card{grid-template-columns:1fr}.lp-login-aside{display:none}}
.lp-login-form{padding:40px 38px;display:flex;flex-direction:column;gap:16px}
.lp-login-head{margin:6px 0 4px}
.lp-login-head h1{font-size:2rem;margin:6px 0 6px;font-weight:700;letter-spacing:-0.01em}
.lp-login-head p{margin:0;color:var(--fg-muted);font-size:0.95rem}
.lp-login-form .mk-form-row{display:grid;gap:6px}
.lp-login-form label{font-size:0.9rem;font-weight:500}
.lp-login-form input{padding:12px 14px;border-radius:var(--radius-md);border:1px solid rgba(148,163,184,0.25);
  background:rgba(6,10,20,0.6);color:var(--fg);font-family:inherit;font-size:0.95rem;outline:none}
body.theme-light .lp-login-form input{background:rgba(255,255,255,0.9);border:1px solid rgba(20,34,55,0.15)}
.lp-login-form input:focus{outline:2px solid rgba(42,209,255,0.45);outline-offset:2px}
.lp-login-row{display:flex;align-items:center;justify-content:space-between;font-size:0.85rem;color:var(--fg-muted)}
.lp-check{display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.lp-link{color:var(--accent);cursor:pointer}
.lp-login-note{display:flex;align-items:center;gap:7px;margin:4px 0 0;font-size:0.8rem;color:var(--fg-faint)}
.lp-login-note i{color:var(--accent-strong)}
.lp-login-aside{padding:40px 34px;border-left:1px solid var(--border);background:
  linear-gradient(160deg, rgba(42,209,255,0.08), rgba(88,255,181,0.04));display:flex;flex-direction:column;gap:20px}
.lp-login-aside h3{margin:0;font-size:1.2rem;font-weight:700}
.lp-login-aside ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.lp-login-aside li{display:flex;gap:12px;align-items:flex-start;font-size:0.9rem;color:var(--fg-muted);line-height:1.45}
.lp-login-aside li i{color:var(--accent-strong);font-size:1.3rem;flex:0 0 auto;margin-top:1px}
.lp-login-aside li b{color:var(--fg);font-weight:600}
.lp-login-aside-foot{margin-top:auto;padding-top:10px;border-top:1px solid var(--border)}

/* ===== logo lockups ===== */
.pn-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--fg);cursor:pointer;
  border-radius:10px;padding:3px 8px 3px 4px;margin-left:-4px;transition:background var(--dur-fast) ease,opacity var(--dur-fast) ease;outline:none}
.pn-brand:hover{background:var(--surface-soft)}
.pn-brand:hover .pn-logo-mark{opacity:0.85}
.pn-brand:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pn-logo-mark{display:block;flex:0 0 auto}
.im-logo{display:inline-flex;align-items:center;gap:12px}
.im-wm{font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:var(--track-nav);font-size:1.2rem;line-height:1}
.im-wm .magic{font-weight:var(--weight-medium);color:var(--fg-muted)}
.mk-brand-logo{display:inline-flex;align-items:center;gap:11px}
.mk-brand-logo svg{flex:0 0 auto}

/* ===== branded loader (signal mark, alive) ===== */
.im-loader-wrap{display:inline-flex;flex-direction:column;align-items:center;gap:16px}
.im-loader{position:relative;flex:0 0 auto;display:inline-block}
.im-loader .ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--accent);opacity:0;
  transform:scale(0.34);animation:imPulse 2.1s cubic-bezier(.2,.7,.2,1) infinite}
.im-loader .ring.r2{animation-delay:0.7s;border-color:color-mix(in oklab, var(--accent), var(--accent-strong) 50%)}
.im-loader .ring.r3{animation-delay:1.4s;border-color:var(--accent-strong)}
@keyframes imPulse{0%{transform:scale(0.30);opacity:0}12%{opacity:0.95}100%{transform:scale(1);opacity:0}}
.im-loader .node{position:absolute;top:50%;left:50%;width:26%;height:26%;transform:translate(-50%,-50%);
  border-radius:50%;background:var(--accent-gradient);box-shadow:0 0 18px rgba(42,209,255,0.55);
  animation:imNode 1.5s ease-in-out infinite}
@keyframes imNode{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.18)}}
.im-loader .orbit{position:absolute;inset:0;animation:imSpin 2.7s linear infinite}
.im-loader .orbit .sat{position:absolute;top:-2px;left:50%;width:11%;height:11%;min-width:5px;min-height:5px;
  transform:translate(-50%,0);border-radius:50%;background:var(--accent-strong);box-shadow:0 0 10px var(--accent-strong)}
@keyframes imSpin{to{transform:rotate(360deg)}}
.im-loader-label{font-family:var(--font-mono);font-size:0.85rem;color:var(--fg-muted)}
@media (prefers-reduced-motion: reduce){
  .im-loader .ring,.im-loader .node,.im-loader .orbit{animation:none}
  .im-loader .ring.r1{opacity:0.8;transform:scale(0.45)}
  .im-loader .ring.r2{opacity:0.5;transform:scale(0.7)}
  .im-loader .ring.r3{opacity:0.25;transform:scale(1)}
}
.lp-login-demo{margin:2px 0 0;font-size:0.85rem;color:var(--fg-muted);text-align:center}
.lp-login-demo .lp-link{cursor:pointer;font-weight:600}

/* demo pill in top nav */
.pn-demo-pill{display:inline-flex;align-items:center;gap:6px;font-size:0.74rem;font-weight:700;letter-spacing:0.04em;
  text-transform:uppercase;color:var(--warning);border:1px solid rgba(255,209,102,0.4);background:rgba(255,209,102,0.08);
  border-radius:999px;padding:5px 11px}
.pn-demo-pill i{font-size:0.9rem}

/* showcase = demo access */
.mk-section-header .demo-eyebrow{display:inline-flex;align-items:center;gap:7px;margin-bottom:12px;color:var(--accent-strong)}
.mk-demo-cta{margin-top:18px;display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.mk-show-item.demo{cursor:pointer;position:relative}
.mk-show-item.demo .mk-show-img{transition:transform var(--dur-base) ease}
.mk-show-item.demo:hover .mk-show-img{transform:scale(1.04)}
.mk-show-cta{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:0.85rem;font-weight:600;color:var(--accent);
  opacity:0.85;transition:gap var(--dur-fast) ease,opacity var(--dur-fast) ease}
.mk-show-item.demo:hover .mk-show-cta{opacity:1;gap:10px}
.mk-show-item.demo:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* animated structural-monitoring preview */
.struct-anim{position:relative;aspect-ratio:16/10;width:100%;border-bottom:1px solid var(--border);overflow:hidden;
  background:radial-gradient(circle at 50% 38%, #16233a 0%, #0a111c 72%)}
body.theme-light .struct-anim{background:radial-gradient(circle at 50% 34%, #eef4fc 0%, #d7e3f2 80%)}
.struct-anim svg{position:absolute;inset:0;width:100%;height:100%}
.struct-anim .sa-line{stroke:var(--accent);stroke-width:1.6;stroke-linecap:round}
.struct-anim .sa-diag{opacity:0.55;stroke-width:1.2}
.struct-anim .sa-faint line{stroke:rgba(127,150,180,0.35);stroke-width:1.4;stroke-linecap:round}
.struct-anim .sa-truss{transform-box:view-box;transform-origin:200px 130px;animation:saFlex 4.2s ease-in-out infinite}
.struct-anim .sa-measure{stroke:var(--accent-strong);stroke-width:1;stroke-dasharray:3 3;opacity:0.65}
.struct-anim .sa-defl-dot{fill:var(--accent-strong);transform-box:fill-box;transform-origin:center;animation:saDefl 4.2s ease-in-out infinite}
.struct-anim .sa-node{fill:var(--accent);stroke:#06101c;stroke-width:1.4}
body.theme-light .struct-anim .sa-node{stroke:#fff}
.struct-anim .sa-pulse{fill:none;stroke:var(--accent);stroke-width:1.5;transform-box:fill-box;transform-origin:center;
  opacity:0;animation:saPulse 2.6s ease-out infinite;animation-delay:var(--d,0s)}
.struct-anim .sa-scan{fill:url(#sa-none);opacity:0.0}
.struct-anim .sa-scan{fill:rgba(42,209,255,0.10);filter:blur(6px);animation:saScan 5s linear infinite}
.struct-anim .sa-readout{position:absolute;left:12px;bottom:11px;display:inline-flex;align-items:center;gap:7px;
  font-size:0.72rem;font-family:var(--font-mono);color:#dff1ff;background:rgba(8,12,20,0.72);
  border:1px solid var(--border);border-radius:999px;padding:4px 10px;backdrop-filter:blur(6px)}
body.theme-light .struct-anim .sa-readout{color:#10314f;background:rgba(255,255,255,0.82);border-color:rgba(20,34,55,0.15)}
.struct-anim .sa-readout b{font-weight:700}
.struct-anim .sa-readout small{opacity:0.7;margin-left:1px}
.struct-anim .sa-dot{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 0 0 rgba(18,183,106,0.5);
  animation:saBlink 2s ease-in-out infinite}
@keyframes saFlex{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-3px) rotate(-0.5deg)}}
@keyframes saDefl{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@keyframes saPulse{0%{transform:scale(0.4);opacity:0.85}70%{opacity:0}100%{transform:scale(3.4);opacity:0}}
@keyframes saScan{0%{transform:translateX(-80px)}100%{transform:translateX(440px)}}
@keyframes saBlink{0%,100%{box-shadow:0 0 0 0 rgba(18,183,106,0.5)}60%{box-shadow:0 0 0 5px rgba(18,183,106,0)}}
@media (prefers-reduced-motion: reduce){
  .struct-anim .sa-truss,.struct-anim .sa-defl-dot,.struct-anim .sa-pulse,.struct-anim .sa-scan,.struct-anim .sa-dot{animation:none}
  .struct-anim .sa-pulse{opacity:0.4;transform:scale(1.6)}
}

/* ---- live entry-flow additions (session bootstrap + login error) ---- */
.pn-boot{min-height:100vh;display:flex;align-items:center;justify-content:center;}
.lp-login-err{display:flex;align-items:center;gap:.5rem;margin:.2rem 0 0;padding:.6rem .8rem;
  font-size:.85rem;color:#ff8a9a;background:rgba(239,68,68,0.12);
  border:1px solid rgba(239,68,68,0.35);border-radius:10px;}
.lp-login-err i{font-size:1rem;flex:none;}
.theme-light .lp-login-err{color:#b42318;background:rgba(239,68,68,0.08);border-color:rgba(239,68,68,0.3);}

/* ---- structural sensor history charts ---- */
.pn-st-charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;}

/* ---- Mapbox fleet map (replaces the synthetic SVG grid) ---- */
.fl-map-frame::after{display:none !important;}        /* drop the fake vignette/background that hid the basemap */
.fl-mb-marker{width:20px;height:20px;border-radius:50%;border:3px solid #fff;
  box-shadow:0 3px 8px rgba(0,0,0,0.55);cursor:pointer;transition:opacity .2s ease, transform .15s ease;}
.fl-mb-marker:hover{transform:scale(1.18);}
.fl-map-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--fg-muted);font-size:.9rem;}
.fl-map-frame .mapboxgl-canvas{outline:none;}

/* ---- embedded full IFC viewer (deployed /ifc-viewer.html in an iframe) ---- */
.pn-ifc-embed{height:calc(100vh - 160px);min-height:520px;padding:0 24px 24px;}
.pn-ifc-iframe{width:100%;height:100%;border:0;border-radius:var(--radius-lg);background:#0b121b;box-shadow:var(--shadow-card);display:block;}

/* ---- native IFC editor controls ---- */
.pn-map-flag{color:var(--fg-faint);font-size:0.95rem;}
.pn-map-flag.on{color:var(--accent);}
.pn-select{background:var(--surface-soft);color:var(--fg);border:1px solid var(--border);border-radius:8px;
  padding:7px 10px;font-size:0.85rem;flex:1;min-width:140px;}
.theme-light .pn-select{background:#fff;}

/* ---- structural displacement baseline ("tar") admin panel ---- */
.pn-disp-head{cursor:pointer;}
.pn-disp-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0;}
.pn-disp-table select.pn-select{min-width:200px;}
.pn-disp-input{background:var(--surface-soft);color:var(--fg);border:1px solid var(--border);border-radius:8px;
  padding:7px 10px;font-size:0.85rem;width:110px;}
.theme-light .pn-disp-input{background:#fff;}

/* IFC viewer right-panel history charts */
.pn-ifc-charts{display:flex;flex-direction:column;gap:10px;margin-top:6px;}
.pn-ifc-charts .dd-chart{padding:10px;}

/* ---- full-screen IFC viewer with floating side modals ---- */
.pn-ifc-full{position:fixed;inset:0;z-index:60;background:var(--bg);overflow:hidden;}
.theme-dark .pn-ifc-full{background:#0a1018;}
.theme-light .pn-ifc-full{background:#c3d0e0;}
.pn-ifc-full .pn-ifc3d{position:absolute;inset:0;width:100%;height:100%;}
.pn-ifc-topbar{position:absolute;top:16px;left:16px;right:16px;display:flex;align-items:center;gap:12px;z-index:3;pointer-events:none;}
.pn-ifc-topbar > *{pointer-events:auto;}
.pn-ifc-topbar .pn-ifc-hint{font-size:.8rem;color:var(--fg-muted);background:var(--glass);backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border);border-radius:10px;padding:6px 12px;}
.pn-ifc-topbar .dd-mono{margin-left:auto;font-size:.78rem;color:var(--fg-muted);background:var(--glass);backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border);border-radius:10px;padding:6px 12px;}
.pn-ifc-float{position:absolute;top:66px;bottom:18px;z-index:3;display:flex;flex-direction:column;gap:10px;overflow:auto;
  background:var(--glass);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border);border-radius:14px;padding:14px;box-shadow:var(--shadow-card);}
.pn-ifc-float.l{left:16px;width:280px;}
.pn-ifc-float.r{right:16px;width:344px;}
.pn-ifc-float-head{display:flex;align-items:center;justify-content:space-between;}
.pn-ifc-float-head h4{margin:0;}
.pn-ifc-tab{position:absolute;top:66px;z-index:3;display:flex;align-items:center;gap:6px;font-size:.82rem;cursor:pointer;
  background:var(--glass);backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);color:var(--fg);
  border-radius:10px;padding:9px 12px;box-shadow:var(--shadow-card);}
.pn-ifc-tab.l{left:16px;}
.pn-ifc-tab.r{right:16px;}
@media (max-width:760px){ .pn-ifc-float.l,.pn-ifc-float.r{width:min(86vw,300px);} }

/* IFC load-error overlay */
.pn-ifc-err{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:4;display:flex;align-items:center;gap:8px;
  max-width:80%;text-align:center;color:#ff8a9a;background:var(--glass);backdrop-filter:blur(var(--glass-blur));
  border:1px solid rgba(239,68,68,0.4);border-radius:12px;padding:14px 18px;font-size:.9rem;box-shadow:var(--shadow-card);}
.pn-ifc-err i{font-size:1.1rem;}

/* admin "Manage" inspection modal */
.pn-modal-scrim{position:fixed;inset:0;z-index:80;background:rgba(4,8,14,0.55);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:24px;}
.pn-modal{width:min(440px,92vw);background:var(--surface-strong);border:1px solid var(--border);border-radius:16px;padding:20px;box-shadow:var(--shadow-card);}
.pn-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px;}
.pn-modal-head h3{margin:0 0 2px;}
.pn-modal-x{background:var(--surface-soft);border:1px solid var(--border);color:var(--fg);border-radius:8px;width:32px;height:32px;cursor:pointer;}
.pn-modal-grid{display:flex;flex-direction:column;gap:2px;}
.pn-modal-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);}
.pn-modal-row > span:first-child{color:var(--fg-muted);font-size:.85rem;}

/* ---- admin schematic editor (structural detail) ---- */
.pn-schem-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;}
.pn-marker-layer.editing .pn-sensor-marker{touch-action:none;}
.pn-schem-tools{position:absolute;top:12px;right:12px;z-index:5;display:flex;align-items:center;gap:10px;
  background:var(--glass);backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);
  border-radius:12px;padding:8px 10px;box-shadow:var(--shadow-card);}
.pn-schem-tools .pn-cta{padding:7px 12px;font-size:.82rem;}
.pn-schem-hint{font-size:.78rem;color:var(--fg-muted);}
.pn-schem-msg{position:absolute;left:12px;bottom:12px;z-index:5;display:flex;align-items:center;gap:6px;
  font-size:.8rem;color:#ff8a9a;background:var(--glass);backdrop-filter:blur(var(--glass-blur));
  border:1px solid rgba(239,68,68,0.35);border-radius:10px;padding:8px 12px;}

/* ---- schematic measurement indicators + palette ---- */
/* Above the palette/toolbar so handles stay grabbable even where they overlap the
   menus. The SVG itself is pointer-transparent — only its .h handles capture — so
   the menu buttons underneath remain clickable in the gaps. */
.pn-meas-svg{position:absolute;inset:0;pointer-events:none;z-index:12;overflow:visible;}
.pn-meas-svg .h{pointer-events:auto;}
.pn-meas-svg .h:hover{filter:brightness(1.3);}
.pn-meas-svg text{paint-order:stroke;stroke:rgba(8,12,20,0.55);stroke-width:3px;font-family:inherit;}
.pn-meas-svg text.x{fill:#fff;font-size:18px;cursor:pointer;font-weight:700;stroke:rgba(8,12,20,0.7);}
.pn-meas-palette{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;max-width:92%;
  background:var(--glass);backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:12px;padding:8px 12px;box-shadow:var(--shadow-card);}
.pn-meas-palette .lbl{font-size:.8rem;color:var(--fg-muted);font-weight:700;margin-right:4px;}
.pn-meas-chip{display:inline-flex;align-items:center;gap:5px;font-size:.8rem;cursor:pointer;color:var(--fg-muted);
  background:var(--surface-soft);border:1px solid var(--border);border-radius:999px;padding:5px 12px;}
.pn-meas-chip.on{background:transparent;font-weight:700;}

/* View-as preview banner (admin previewing the app as a user). */
.pn-viewas-banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:linear-gradient(90deg, rgba(255,209,102,0.16), rgba(255,209,102,0.06));
  border-bottom:1px solid rgba(255,209,102,0.45);color:var(--fg);
  padding:10px 20px;font-size:0.88rem;position:sticky;top:0;z-index:40;}
.pn-viewas-ico{display:inline-flex;color:#ffd166;font-size:1.1rem;}
.pn-viewas-text{flex:1;min-width:0;}
.pn-viewas-text b{color:var(--fg);}
.pn-viewas-role,.pn-viewas-actor{color:var(--fg-muted);}
.pn-viewas-exit{flex:0 0 auto;border:1px solid var(--border);background:var(--surface);color:var(--fg);
  border-radius:999px;padding:6px 14px;font:inherit;font-size:0.82rem;font-weight:600;cursor:pointer;}
.pn-viewas-exit:hover{background:var(--surface-strong);}
.pn-viewas-exit:disabled{opacity:0.6;cursor:wait;}

/* Landing demo cards: number badge, catchphrase, and selling-point tags. */
.mk-show-content .mk-show-num{display:inline-block;font-size:0.7rem;font-weight:700;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--accent);margin-bottom:8px;}
.mk-show-content .mk-show-phrase{margin:0 0 12px;font-size:1.04rem;font-weight:600;color:var(--fg);line-height:1.42;}
.mk-show-content .mk-show-points{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;}
.mk-show-content .mk-show-points span{font-size:0.72rem;color:var(--fg-muted);background:var(--surface-soft);
  border:1px solid var(--border);border-radius:999px;padding:4px 10px;white-space:nowrap;}

/* Admin: IFC-model assignment dropdown in the structural device table. */
.adm-model-sel{background:var(--surface-soft);color:var(--fg);border:1px solid var(--border);
  border-radius:8px;padding:5px 8px;font:inherit;font-size:0.82rem;cursor:pointer;max-width:190px;}
.adm-model-sel:disabled{opacity:0.5;cursor:wait;}

/* ============================================================
   Mobile responsiveness pass (phones / narrow viewports).
   Additive max-width queries only — desktop layout untouched.
   ============================================================ */

/* AI analysis: once the hero stacks to one column the photo <figure> loses the
   grid-stretched height it borrowed from the info column, collapsing the image
   (its <img> is height:100% of nothing). Give it an intrinsic aspect ratio so it
   scales with width. Also let the section header wrap so the capture scrubber
   doesn't overflow off-screen. */
@media (max-width:880px){
  .ai-photo{aspect-ratio:16 / 10; width:100%;}
  .ai-head{flex-wrap:wrap; gap:12px;}
  .ai-head .ai-scrub{flex:0 1 auto; min-width:0;}
}

@media (max-width:640px){
  /* Top navbar was a single non-wrapping flex row (logo + wordmark + breadcrumb
     + full user name + toggle + demo pill) that overflowed on phones. Drop the
     wordmark and breadcrumb, tighten spacing, and collapse the user/demo chips
     to icon+avatar only. The user name is a bare text node in the button, so
     zeroing the button font hides it while the avatar/caret keep explicit sizes. */
  .pn-nav-inner{padding:10px 14px; gap:10px;}
  .pn-brand .word{display:none;}
  .pn-crumb{display:none;}
  .pn-nav-actions{gap:8px;}
  .pn-user-btn{font-size:0; max-width:none;}
  .pn-user-btn .pn-avatar{font-size:0.8rem;}
  .pn-demo-pill{font-size:0; padding:6px 8px;}
  .pn-demo-pill i{font-size:0.95rem;}

  /* Page gutters: 28px side padding is too much on a phone. */
  .pn-main{padding:24px 14px 70px;}

  /* Dense fixed-column grids → fewer columns so cards don't get crushed. */
  .trend-metrics{grid-template-columns:repeat(2,1fr);}
  .adm-stats{grid-template-columns:1fr;}
  /* AI analysis info: put the fill-level ring UP next to the detected-material
     verdict (using the dead space beside it) and drop the material breakdown to
     full width below — instead of the ring floating alone on its own row. */
  .ai-info{grid-template-columns:minmax(0,1fr) auto; gap:12px 14px;
           grid-template-areas:"verdict ring" "breakdown breakdown"; align-items:center;}
  .ai-info > .ai-ring{width:104px !important; height:104px !important; align-self:center;}
  .ai-info > .ai-ring svg{width:100%; height:100%; display:block;}
  .ai-ring-c b{font-size:1.35rem;}
  .ai-ring-c span{font-size:0.58rem;}
  .ai-breakdown{width:100%;}
  .ai-bd-row{grid-template-columns:64px 1fr 42px; gap:12px; margin-bottom:10px; font-size:0.88rem;}
  .ai-bd-row .bd-bar{height:8px;}
  .ai-verdict{border-bottom:0; padding-bottom:0;}
  .ai-verdict .name{font-size:1.6rem;}
  .ai-verdict .conf{font-size:1.15rem;}
  .ai-photo figcaption .dd-mono{font-size:0.68rem;}

  /* Device title block (eyebrow + big name + last-seen/id) ate too much vertical
     space — shrink the heading, tighten the eyebrow, and fold the meta into one
     compact left-aligned row. */
  .cd-head{margin-bottom:14px; gap:6px;}
  .cd-head .eyebrow{margin-bottom:2px;}
  .cd-head h1{font-size:1.55rem; margin:2px 0 0; line-height:1.12; overflow-wrap:anywhere;}
  .cd-head .dd-meta{flex-direction:row; align-items:baseline; flex-wrap:wrap; gap:4px 12px;}
  .cd-head .dd-meta span{font-size:0.8rem;}

  /* Lock the page to VERTICAL scrolling only. `clip` (not `hidden`) stops the
     page from panning sideways without creating a scroll container, so the
     sticky navbar keeps working. This is the safety net behind the per-element
     fixes below. */
  html, body{overflow-x:clip; max-width:100%;}

  /* Device-switcher header (back + prev/next + device pill) was a single wide
     row that overflowed on narrow phones. Restructure for mobile: back link on
     its own row, then a FULL-WIDTH switcher with the arrows pinned to the edges
     and the device pill filling the middle, its (redundant — repeated as the h1
     below) name truncating instead of pushing the row wide. */
  .cd-top{flex-direction:column; align-items:stretch; gap:10px;}
  .cd-top .pn-back{align-self:flex-start;}
  .cd-switch{width:100%;}
  .cd-pick{flex:1; min-width:0;}
  .cd-pick-btn{display:flex; align-items:center; gap:6px; width:100%; min-width:0;}
  .cd-pick-btn b{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

  /* AI capture scrubber → a full-width pager: arrows pinned to the edges, the
     count centered, and the timestamp dropped onto its own centered line (the
     desktop pill crammed "N of M · long timestamp" into one row, which clipped
     and wrapped badly on narrow screens). */
  .ai-head .ai-scrub{width:100%; justify-content:space-between; flex-wrap:nowrap; max-width:none;}
  .ai-scrub-mid{flex:1; flex-wrap:wrap; justify-content:center; align-items:center; text-align:center; font-size:0.78rem; padding:0 4px; gap:2px 6px;}
  .ai-scrub-mid em{width:100%; margin-left:0; padding-left:0; border-left:0; font-size:0.72rem; color:var(--fg-faint);}

  /* Long hyphenated device names (e.g. ENVISAN-GEM) must break, not overflow. */
  .dd-section-header h1{font-size:1.5rem; overflow-wrap:anywhere;}
  .dd-ai-nav{flex-wrap:wrap;}

  /* Wide telemetry table: scroll it INSIDE its own card (overflow-x:auto) rather
     than clipping it (the base shell is overflow:hidden) or pushing the page. */
  .dd-table-shell{overflow-x:auto; -webkit-overflow-scrolling:touch;}
  .dd-table{min-width:600px;}
  .dd-mono{overflow-wrap:anywhere;}
}

/* Any data table scrolls inside its own card rather than clipping when it's wider
   than its container (desktop just doesn't trigger the scrollbar since it fits). */
.fl-table-shell{overflow-x:auto; -webkit-overflow-scrolling:touch;}

/* Tablet & below: the admin's fixed 212px sidebar leaves too little room for the
   wide tables, so collapse it into a horizontal tab bar on top and give content
   the full width (the user's request). Kept at 1100px so it also covers iPad
   portrait/landscape; true desktop keeps the sidebar. */
@media (max-width:1100px){
  /* minmax(0,1fr)+min-width:0 are REQUIRED so a wide table doesn't grow the grid
     column past the viewport — it makes the column stay put and the card scroll. */
  .pn-admin{grid-template-columns:minmax(0,1fr);}
  .pn-admin-side, .pn-admin-main{min-width:0;}
  .pn-admin-side{flex-direction:row; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch;
                 border-right:0; border-bottom:1px solid var(--border); padding:8px 10px;}
  .pn-admin-side::-webkit-scrollbar{display:none;}
  .pn-admin-side a{flex:0 0 auto; white-space:nowrap; padding:8px 12px;}
  .pn-admin-main{padding:20px 16px;}
  .pn-admin-main .bar{flex-wrap:wrap; gap:10px;}
  /* Drop the lowest-priority table columns (still editable in the row's modal) and
     tighten cell padding so admin tables fit the width instead of needing an
     awkward sideways scroll. min-width is just a floor for very narrow phones. */
  .adm-col-lo{display:none;}
  .fl-table th, .fl-table td{padding:11px 12px;}
  .fl-table{min-width:0;}
  /* descriptive helper text the user flagged as unnecessary */
  .pn-page-head p{display:none;}
  .pn-admin .pn-note{display:none;}
}

@media (max-width:640px){
  /* phone: also drop the medium-priority columns (e.g. lease End date) */
  .adm-col-md{display:none;}
  .fl-table{min-width:480px;}
}