/* Customer dashboard. Builds on css/styles.css tokens (--bg, --border, --accent ...). */
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.app-nav{gap:12px}
.app-nav-right{display:flex;gap:8px;align-items:center;min-width:0}
.app-main{max-width:var(--maxw);margin:0 auto;padding:20px 16px 64px}
.app-sub{color:var(--text-muted);font-size:.88rem;margin:0}
.app-hint{color:var(--text-muted);font-size:.82rem;margin:4px 0 0}
.app-flash{margin:0 0 16px;padding:10px 14px;border-radius:8px;border:1px solid var(--border);background:var(--bg-card)}
.app-flash.error{border-color:#c0392b;background:rgba(192,57,43,.12)}
.app-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:8px 16px;border-radius:6px;border:1px solid transparent;background:var(--accent);color:#151008;font-weight:700;font-size:.92rem;cursor:pointer}
.app-btn:disabled{opacity:.5;cursor:default}
.app-btn.ghost{background:transparent;border-color:var(--border);color:var(--text)}
.app-btn.danger{background:transparent;border-color:rgba(192,57,43,.6);color:#ff8a7a}
.app-btn.small{min-height:34px;padding:5px 11px;font-size:.84rem}
.app-select,.app-form input,.app-row input{background:var(--bg-alt);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:8px 10px;font:inherit;min-height:40px;max-width:100%}
.app-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.app-form{display:grid;gap:12px}
.app-form label{display:grid;gap:4px;font-size:.88rem;font-weight:600}
.app-form label.check,.check{display:flex;gap:8px;align-items:center;font-weight:500;font-size:.88rem}
.app-auth{max-width:420px;margin:24px auto;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:24px}
.app-auth h1{font-size:1.6rem}
.app-tabs{display:flex;gap:4px;flex-wrap:wrap;margin:16px 0}
.app-tabs button{background:transparent;color:var(--text-muted);border:1px solid var(--border);border-radius:999px;padding:6px 12px;font:inherit;font-size:.85rem;cursor:pointer}
.app-tabs button[aria-selected="true"]{color:var(--text);border-color:var(--accent);background:rgba(242,165,48,.1)}
.dash-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;align-items:flex-end}
.dash-head h1{font-size:clamp(1.5rem,5vw,2.2rem);margin:0}
.dash-filters{display:flex;gap:8px;flex-wrap:wrap}
.dash-filters label{display:grid;gap:2px;font-size:.75rem;color:var(--text-muted)}
.dash-h2{font-size:1.05rem;margin:24px 0 10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em}
.dash-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin-top:16px}
.sum{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:10px 12px;display:grid}
.sum b{font-size:1.4rem}.sum span{font-size:.78rem;color:var(--text-muted)}
.sum.bad{border-color:rgba(192,57,43,.7)}.sum.warn{border-color:rgba(242,165,48,.6)}
.hub-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.hub-card{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:12px}
.hub-name{font-weight:700}
.hub-state{display:flex;align-items:center;gap:6px;font-weight:700;font-size:.88rem;margin:4px 0}
.hub-state .dot{width:9px;height:9px;border-radius:50%;background:var(--planned)}
.hub-card.online .dot{background:var(--good)}.hub-card.offline .dot,.hub-card.revoked .dot{background:#e5533d}
.hub-card.offline{border-color:rgba(192,57,43,.6)}
.node-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.node-card{all:unset;box-sizing:border-box;display:grid;gap:6px;cursor:pointer;background:var(--bg-card);border:1px solid var(--border);border-left:5px solid var(--good);border-radius:8px;padding:12px 14px}
.node-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.node-card.sev1{border-left-color:var(--planned)}.node-card.sev2{border-left-color:var(--accent)}.node-card.sev3{border-left-color:#e5533d}
.nc-top{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.nc-name{font-weight:800;font-size:1.05rem;overflow-wrap:anywhere}
.nc-volt{font-size:1.6rem;font-weight:800;white-space:nowrap}.nc-volt small{font-size:.8rem;color:var(--text-muted)}
.nc-badges{display:flex;flex-wrap:wrap;gap:6px}
.nc-time{font-size:.82rem}.nc-time span{color:var(--text-muted);margin-left:4px}
.pill{font-size:.72rem;font-weight:800;padding:3px 8px;border-radius:999px;border:1px solid}
.pill.good{color:var(--good);border-color:rgba(63,185,132,.4)}.pill.warn{color:var(--accent);border-color:rgba(242,165,48,.5)}
.pill.bad{color:#ff8a7a;border-color:rgba(229,83,61,.6)}.pill.muted{color:var(--text-muted);border-color:var(--border)}
.row-item{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--border)}
.manage{margin-top:28px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px}
.manage summary{cursor:pointer;font-weight:700}
.mg-block{margin-top:18px}.mg-block h3{font-size:1rem}
.token-box{margin-top:12px;padding:12px;border:1px solid var(--accent);border-radius:8px;display:grid;gap:8px}
.token-box input{font-family:ui-monospace,Menlo,monospace;font-size:.8rem}
code{font-family:ui-monospace,Menlo,monospace;font-size:.82em;color:var(--text-muted)}
.node-dialog{width:min(980px,100vw - 16px);max-height:calc(100dvh - 16px);background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:12px;padding:16px}
.node-dialog::backdrop{background:rgba(0,0,0,.6)}
.nd-head{display:flex;justify-content:space-between;gap:12px}.nd-head h2{margin:0;font-size:1.4rem}
.nd-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin:12px 0}
.nd-metrics div{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:8px 10px;display:grid}
.nd-metrics span{font-size:.75rem;color:var(--text-muted)}.nd-metrics small{color:var(--text-muted);font-weight:500}
.nd-chart{min-height:120px}
.nd-facts{display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;font-size:.86rem;margin:16px 0}
.nd-facts dt{color:var(--text-muted)}.nd-facts dd{margin:0;overflow-wrap:anywhere}
.nd-section{border-top:1px solid var(--border);padding-top:12px;margin-top:12px}
@media (max-width:560px){
  .app-main{padding:14px 12px 48px}
  .dash-filters{width:100%}.dash-filters label{flex:1}.dash-filters select{width:100%}
  .node-grid,.hub-strip{grid-template-columns:1fr}
  .node-dialog{padding:12px;border-radius:10px}
  .nd-facts{grid-template-columns:1fr}.nd-facts dd{margin-bottom:6px}
  .brand-logo{height:30px}
}
.nd-chart .chartLegend,.nd-chart .sparkMeta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;line-height:1.4;color:#92a6ba;margin-top:8px}
.nd-chart .legendItem{display:inline-flex;align-items:center;gap:5px}
.nd-chart .legendSwatch{display:inline-block;width:18px;height:3px;border-radius:2px}