:root{
  --cream:#fbf7f1; --ink:#1a1a1a; --muted:#6b6258;
  --sage:#4a7a5c; --sage-hover:#3d6149;
  --line:#e8e0d4; --surface:#fff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--cream);color:var(--ink);font-family:Inter,system-ui,sans-serif;font-size:16px;line-height:1.5}
a{color:var(--sage)}
a:hover{color:var(--sage-hover)}
.hdr{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--line)}
.brand{font-family:'DM Mono',ui-monospace,monospace;font-weight:500;font-size:18px;letter-spacing:.2px;text-decoration:none;color:var(--ink)}
.brand .slash{opacity:.55}
.logout{margin:0}
.link{background:none;border:none;color:var(--sage);cursor:pointer;font:inherit;padding:0}
.link:hover{color:var(--sage-hover);text-decoration:underline}
main{max-width:520px;margin:0 auto;padding:32px 20px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:28px}
.card h1{font-size:22px;font-weight:600;margin:0 0 12px}
.muted{color:var(--muted);font-size:14px}
form label{display:block;margin:14px 0 4px;font-size:14px}
form input,form select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;font:inherit}
form input:focus,form select:focus{outline:2px solid var(--sage);outline-offset:1px;border-color:var(--sage)}
button.primary{margin-top:18px;background:var(--sage);color:#fff;border:none;padding:11px 18px;border-radius:8px;font:inherit;cursor:pointer}
button.primary:hover{background:var(--sage-hover)}
.flash{padding:10px 14px;border-radius:8px;margin-bottom:16px;border:1px solid var(--line);background:#fff}
.flash.error{border-color:#c44; color:#9a2a2a; background:#fff5f5}
.flash.info{border-color:var(--sage); background:#f0f5f2}

.support-code{margin:18px 0;padding:14px 18px;background:#f0f5f2;border:1px solid var(--sage);border-radius:10px}
.support-code-label{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:600}
.support-code-value{font-family:'DM Mono',ui-monospace,monospace;font-size:28px;font-weight:500;letter-spacing:.15em;color:var(--ink);margin:4px 0}
body.admin{background:var(--cream)}
.admin-bar{background:#9a2a2a;color:#fff;padding:6px 16px;font-size:13px;text-align:center;font-weight:500}
.admin-nav{display:flex;gap:18px;align-items:center}
.admin-nav a{color:var(--ink);text-decoration:none}
.admin-nav a:hover{color:var(--sage)}
.admin-main{max-width:1100px;margin:0 auto;padding:24px 20px}
.stat-row{display:flex;gap:14px;margin:12px 0 22px;flex-wrap:wrap}
.stat{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 18px;min-width:120px}
.stat .n{font-size:28px;font-weight:600}
.stat .l{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.admin-search{display:flex;gap:10px;margin:18px 0}
.admin-search input{flex:1;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font:inherit;background:#fff}
.admin-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;font-size:14px}
.admin-table th,.admin-table td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--line)}
.admin-table th{background:#f5efe5;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.admin-table tr:last-child td{border-bottom:none}
.admin-table code{font-family:'DM Mono',ui-monospace,monospace;font-size:13px;background:#f5efe5;padding:1px 6px;border-radius:4px}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:500}
.badge.ok{background:#e5f1ea;color:#2d5a3f}
.badge.warn{background:#fff3d9;color:#8a6d1c}
.badge.bad{background:#fce4e4;color:#9a2a2a}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px;margin:14px 0}
.action-row{display:flex;gap:10px;margin:14px 0;flex-wrap:wrap}
.action-row form{margin:0}
button.danger{background:#9a2a2a;color:#fff;border:none;padding:9px 16px;border-radius:8px;font:inherit;cursor:pointer}
button.danger:hover{background:#7a2020}

.row-between{display:flex;justify-content:space-between;align-items:center;gap:12px}
.m0{margin:0}
.mt12{margin-top:12px}
section.card{margin-bottom:16px}

.device-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.device-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.device-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:6px}
.device-name{font-weight:600;font-size:15px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.device-conn{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--sage);font-weight:500;white-space:nowrap}
.device-ip{font-family:'DM Mono',ui-monospace,monospace;font-size:14px;color:var(--ink);margin-bottom:8px}
.device-ip code{background:transparent;padding:0}
.device-meta{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--muted)}
.device-meta .mac code{font-size:11px;background:transparent;padding:0}

.inline-form{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-top:14px}
.inline-form label{flex:1;min-width:200px;margin:0}
.inline-form input{margin-top:4px}
.inline-form button{flex:0 0 auto}
.qr-block{background:#f0f5f2;border:1px solid var(--sage);border-radius:10px;padding:18px;display:flex;flex-direction:column;align-items:center;gap:8px;margin:14px 0}
.qr-block img{width:200px;height:200px;background:#fff;padding:8px;border-radius:6px}
.device-action{margin:8px 0 0;padding:0}
.danger-link{background:none;border:none;color:#9a2a2a;font:inherit;padding:0;cursor:pointer;font-size:12px;text-decoration:underline}
.danger-link:hover{color:#6b1d1d}

.refresh-link{font-size:13px;color:var(--muted)}
.refresh-link:hover{color:var(--sage)}
.device-card.blocked{background:#fff5f5;border-color:#e0c0c0}
.device-card.blocked .device-conn{color:#9a2a2a}
.activity{list-style:none;padding:0;margin:14px 0 0;font-size:14px}
.activity li{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);align-items:baseline;flex-wrap:wrap}
.activity li:last-child{border-bottom:none}
.activity .t{color:var(--muted);font-size:13px;min-width:110px}
.activity .a code{background:transparent;padding:0;font-size:13px}
.activity .d{font-size:12px;flex:1;min-width:200px;word-break:break-all}
.small-center{text-align:center;font-size:12px;margin:20px 0 8px}

/* Bottom app bar -- PWA-style mobile nav */
.bottom-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:100;
  display:flex; justify-content:space-around; align-items:center;
  background:rgba(255,255,255,0.96); backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid var(--line);
  padding:8px 4px calc(8px + env(safe-area-inset-bottom)) 4px;
}
.bb-item{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  text-decoration:none; color:var(--muted); padding:6px 4px;
  font-size:10px; font-weight:500; letter-spacing:.05em;
  border-radius:8px; transition:color .15s ease;
}
.bb-item:hover, .bb-item.active{ color:var(--sage); }
.bb-item svg{ display:block; }

/* Push main content above the bar so nothing is hidden */
body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
@media (display-mode: standalone) {
  body { padding-top: env(safe-area-inset-top); }
}

/* Smooth-scroll anchors so #devices etc are tappable from the bar */
html { scroll-behavior: smooth; scroll-padding-top: 12px; }

.peer-list{list-style:none;padding:0;margin:14px 0 0}
.peer-row{display:flex;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.peer-name{flex:1;min-width:140px;font-weight:500}
.peer-ip{font-family:'DM Mono',ui-monospace,monospace;font-size:13px;color:var(--muted);background:transparent;padding:0}
.peer-status{min-width:120px}
.conf{background:#f5efe5;border:1px solid var(--line);border-radius:8px;padding:14px;font-family:'DM Mono',ui-monospace,monospace;font-size:12px;overflow-x:auto;white-space:pre}
.primary-link{display:inline-block;background:var(--sage);color:#fff;padding:10px 18px;border-radius:8px;text-decoration:none;font-weight:500}
.primary-link:hover{background:var(--sage-hover);color:#fff}

.invite-link{display:block;background:#fff;border:1px solid var(--line);border-radius:6px;padding:10px 12px;font-family:'DM Mono',ui-monospace,monospace;font-size:12px;word-break:break-all;user-select:all}

.field-err{color:#9a2a2a;font-size:12px;margin-top:4px}

.cf-turnstile{margin:14px 0}

.device-actions-row{margin-top:8px;font-size:12px}
.device-actions-row summary{color:var(--muted);cursor:pointer;padding:4px 0;outline:none;list-style:none}
.device-actions-row summary::-webkit-details-marker{display:none}
.device-actions-row summary::before{content:'\002B'; margin-right:6px}
.device-actions-row[open] summary::before{content:'\2212'}
.device-actions-row form{display:flex;gap:6px;margin:6px 0 0;align-items:center}
.rename-form input{flex:1;min-width:80px;padding:6px 8px;border:1px solid var(--line);border-radius:6px;font:inherit;font-size:13px}
.rename-form button{padding:6px 10px}

.bw{display:inline-block;margin-top:2px;color:var(--muted);font-size:11px;font-family:'DM Mono',ui-monospace,monospace}
.wifi-qr-toggle{margin:14px 0}
.wifi-qr-toggle summary{color:var(--sage);cursor:pointer;outline:none;font-weight:500;padding:6px 0}
.wifi-qr-toggle summary:hover{color:var(--sage-hover)}
.wifi-qr-toggle .qr-block{margin-top:8px}
.promote-form{margin:10px 0}

.schedule-form{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.day-grid{display:flex;gap:8px;flex-wrap:wrap;border:none;padding:0;margin:0}
.day-grid label{font-size:13px;color:var(--ink);display:flex;align-items:center;gap:4px;margin:0}
.day-grid input[type="checkbox"]{margin:0}

.adapter-pick{display:block;background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin:8px 0;cursor:pointer}
.adapter-pick:has(input:checked){border-color:var(--sage);background:#f0f5f2}
.adapter-pick input{margin-right:8px}
.adapter-pick em{color:var(--muted);font-style:normal}

.privacy-note{background:#f0f5f2;border:1px solid var(--sage);border-radius:10px;padding:12px 16px;font-size:13px;line-height:1.5;color:var(--ink);margin:0 0 16px}
.privacy-note strong{color:var(--sage)}

.onboard-row{display:flex;flex-direction:column;gap:4px;padding:8px 0;border-bottom:1px solid var(--line)}
.onboard-row:last-of-type{border-bottom:none}
.onboard-meta{font-size:11px;color:var(--muted);font-family:'DM Mono',ui-monospace,monospace}
.onboard-row input{padding:8px 10px;border:1px solid var(--line);border-radius:6px;font:inherit;font-size:13px}

.privacy-button-row{margin:0 0 16px;text-align:left}
.privacy-button-row .link{color:var(--sage);font-size:13px;text-decoration:underline}
.privacy-modal{padding:0;border:none;border-radius:12px;max-width:520px;width:90%;background:transparent}
.privacy-modal::backdrop{background:rgba(26,26,26,0.55)}
.privacy-modal .modal-inner{background:#fff;border-radius:12px;padding:28px;border:1px solid var(--line);max-height:80vh;overflow-y:auto}
.privacy-modal h2{margin:0 0 12px;font-size:18px;font-weight:600}
.privacy-modal p{margin:10px 0;font-size:14px;line-height:1.5}
.privacy-modal strong{color:var(--sage)}

.subnav{display:flex;gap:4px;margin:0 0 16px;overflow-x:auto;padding-bottom:4px}
.subnav a{padding:7px 12px;border-radius:8px;font-size:13px;text-decoration:none;color:var(--muted);background:#fff;border:1px solid var(--line);white-space:nowrap}
.subnav a:hover{color:var(--sage)}
.subnav a.active{background:var(--sage);color:#fff;border-color:var(--sage)}

.ic{display:inline-block;vertical-align:-2px;margin-right:2px}
.ic-down{color:#2d5a3f}
.ic-up{color:#9a2a2a}
.bw{display:inline-flex;gap:10px;align-items:center;font-size:11px;font-family:'DM Mono',ui-monospace,monospace}
.bw-down{color:#2d5a3f;display:inline-flex;align-items:center;gap:2px}
.bw-up{color:#9a2a2a;display:inline-flex;align-items:center;gap:2px}
.subnav a{display:inline-flex;align-items:center;gap:6px}
.subnav a.active .ic{color:#fff}

.impersonation-bar{background:#ffd966;color:#1a1a1a;padding:8px 16px;text-align:center;font-size:13px;font-weight:500}
.impersonation-bar a{color:#7a5e00;text-decoration:underline;margin-left:6px}

.card-collapsible details summary{display:flex;justify-content:space-between;align-items:center;cursor:pointer;list-style:none;padding:0;outline:none}
.card-collapsible details summary::-webkit-details-marker{display:none}
.card-collapsible details summary::after{content:'\002B';color:var(--muted);font-size:18px;margin-left:auto;padding-left:12px}
.card-collapsible details[open] summary::after{content:'\2212'}
.card-collapsible .card-title{flex:1}
.card-collapsible .card-title h1{margin:0;font-size:20px;font-weight:600}
.card-collapsible .card-body{margin-top:12px}

.day-pills{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.day-pills-label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:500}
.day-pill-row{display:flex;gap:6px;flex-wrap:wrap}
.day-pill{position:relative;cursor:pointer;user-select:none}
.day-pill input{position:absolute;opacity:0;pointer-events:none}
.day-pill span{display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:36px;padding:0 12px;border:1.5px solid var(--line);border-radius:8px;font-size:13px;font-weight:600;color:var(--muted);background:#fff;transition:all 0.15s ease}
.day-pill:hover span{border-color:var(--sage);color:var(--sage)}
.day-pill input:checked + span{background:var(--sage);border-color:var(--sage);color:#fff;box-shadow:0 1px 2px rgba(0,0,0,0.08)}
.day-pill input:focus-visible + span{outline:2px solid var(--sage);outline-offset:2px}
.day-pill-presets{display:flex;gap:14px;font-size:12px}
.day-pill-presets .link{padding:0;color:var(--sage)}
.time-row{display:flex;gap:14px;flex-wrap:wrap}
.time-row label{flex:1;min-width:120px}
.time-row input[type="time"]{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font:inherit;background:#fff}

.ic-down path{stroke:#2d5a3f !important}
.ic-up   path{stroke:#9a2a2a !important}
.bw-down{color:#2d5a3f}
.bw-up{color:#9a2a2a}

/* Top talkers row: cleaner 3-column layout */
.talker-grid{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.talker-grid:last-child{border-bottom:none}
.talker-name{font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.talker-ip{font-family:'DM Mono',ui-monospace,monospace;font-size:12px;color:var(--muted);white-space:nowrap}
.talker-bw{display:flex;flex-direction:column;gap:2px;font-family:'DM Mono',ui-monospace,monospace;font-size:11px;text-align:right;min-width:120px}
.talker-bw .bw-down,.talker-bw .bw-up{display:inline-flex;align-items:center;gap:3px;justify-content:flex-end}

@media (max-width:480px){
  .talker-grid{grid-template-columns:1fr auto;grid-template-areas:"name bw" "ip bw"}
  .talker-name{grid-area:name}
  .talker-ip{grid-area:ip}
  .talker-bw{grid-area:bw}
}

/* Force the subnav to scroll horizontally, never wrap to multiple rows */
.subnav{flex-wrap:nowrap !important; -webkit-overflow-scrolling:touch}
.subnav a{flex-shrink:0 !important}

.talker-grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.talker-card{display:flex;gap:12px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 16px;align-items:center}
.talker-rank{flex-shrink:0;width:32px;height:32px;border-radius:50%;background:var(--sage);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px}
.talker-body{flex:1;min-width:0}
.talker-card-name{font-weight:600;font-size:15px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.talker-card-ip{display:block;font-family:'DM Mono',ui-monospace,monospace;font-size:12px;color:var(--muted);background:transparent;padding:0;margin:2px 0 6px}
.talker-card-bw{display:flex;gap:10px;font-family:'DM Mono',ui-monospace,monospace;font-size:11px;flex-wrap:wrap}
.talker-card-bw .bw-down,.talker-card-bw .bw-up{display:inline-flex;align-items:center;gap:3px}

.talkers{display:flex;flex-direction:column;gap:10px}
.talker{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.talker-head{display:flex;align-items:center;gap:12px}
.talker-rank{flex-shrink:0;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;color:#fff;background:linear-gradient(135deg,var(--sage),#3d6149)}
.talker-rank.rank-1{background:linear-gradient(135deg,#d4af37,#b8941f)}
.talker-rank.rank-2{background:linear-gradient(135deg,#b0b0b0,#888)}
.talker-rank.rank-3{background:linear-gradient(135deg,#cd7f32,#a06224)}
.talker-name-wrap{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.talker-name{font-weight:600;font-size:15px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.talker-ip{font-family:'DM Mono',ui-monospace,monospace;font-size:11px;color:var(--muted);background:transparent;padding:0}
.talker-bw-stack{display:flex;flex-direction:column;gap:4px;flex-shrink:0}
.bw-chip{display:inline-flex;align-items:center;gap:5px;font-family:'DM Mono',ui-monospace,monospace;font-size:12px;padding:4px 10px;border-radius:14px;font-weight:500;white-space:nowrap;justify-content:flex-end;min-width:88px}
.bw-chip-down{background:#e5f1ea;color:#2d5a3f}
.bw-chip-up{background:#fce4e4;color:#9a2a2a}
.bw-chip-down .ic{color:#2d5a3f}
.bw-chip-up .ic{color:#9a2a2a}
.talker-bar{height:6px;background:#f0ece4;border-radius:3px;overflow:hidden}
.talker-bar-fill{height:100%;background:linear-gradient(90deg,var(--sage),#7ba792);border-radius:3px;transition:width 0.4s ease}

@media (max-width:480px){
  .bw-chip{font-size:11px;padding:3px 8px;min-width:74px}
  .talker-rank{width:32px;height:32px;font-size:14px}
}

/* Greeting at top of every dashboard page */
.page-greeting{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 4px 20px;margin-top:-8px}
.greeting-text{font-size:15px;line-height:1.4}
.greeting-text strong{font-weight:600}
.greeting-actions{display:flex;gap:8px;align-items:center}
.greeting-action-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;color:var(--muted);text-decoration:none;background:#fff;border:1px solid var(--line);flex-shrink:0;transition:all 0.15s ease;cursor:pointer;padding:0}
.greeting-action-btn:hover{color:var(--sage);border-color:var(--sage)}
.greeting-action-btn[title="Refresh"]:hover{transform:rotate(180deg)}
.greeting-refresh{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;color:var(--muted);text-decoration:none;background:#fff;border:1px solid var(--line);flex-shrink:0;transition:all 0.15s ease}
.greeting-refresh:hover{color:var(--sage);border-color:var(--sage);transform:rotate(180deg)}

/* Subnav: segmented control. No scrollbar -- everything fits via equal flex on desktop
   and icons-only on phones. */
.subnav{
  display:flex !important; gap:2px; margin:0 0 20px;
  overflow:hidden; padding:4px;
  flex-wrap:nowrap !important;
  background:#f5efe5; border-radius:14px;
  justify-content:stretch;
}
.subnav::-webkit-scrollbar{display:none}
.subnav a{
  flex:1 1 0; min-width:0;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 6px;
  border-radius:10px;
  font-size:12px; font-weight:600; letter-spacing:.02em;
  text-decoration:none; color:var(--muted);
  background:transparent; border:none;
  transition:background 0.15s, color 0.15s;
  white-space:nowrap;
}
.subnav a .ic{width:18px;height:18px;display:block;flex-shrink:0;margin:0}
.subnav a > .lbl{display:none}
.subnav a:hover{color:var(--sage); background:rgba(74,122,92,0.08)}
.subnav a.active{
  background:#fff; color:var(--sage);
  box-shadow:0 1px 2px rgba(0,0,0,0.06);
}
.subnav a.active .ic{color:var(--sage)}
.subnav a{padding:11px 4px}
.subnav a .ic{width:22px;height:22px}

.greeting-ssid{font-size:18px;font-weight:700;color:var(--ink)}
.greeting-vlan-pill{display:inline-block;font-size:11px;font-weight:600;color:var(--sage);background:#f0f5f2;padding:3px 8px;border-radius:6px;margin-left:6px;vertical-align:1px;font-family:'DM Mono',ui-monospace,monospace}

.cta-card{border:1.5px dashed var(--sage);background:#f8fbf9}
.cta-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px}
.cta-icon{flex-shrink:0;width:42px;height:42px;border-radius:50%;background:var(--sage);color:#fff;display:flex;align-items:center;justify-content:center}
.cta-icon .ic{width:22px;height:22px;color:#fff}
.cta-form{display:flex;flex-direction:column;gap:4px}
.cta-form label{margin:8px 0 2px}

.page-title{display:flex;align-items:center;gap:10px;padding:0 4px 16px;margin-top:-8px}
.page-title h1{font-size:22px;font-weight:600;margin:0;color:var(--ink)}
.page-title .ic{width:24px;height:24px;color:var(--sage);flex-shrink:0}

.admin-stripe{background:#9a2a2a;color:#fff;padding:6px 16px;font-size:12px;font-weight:500;text-align:center;letter-spacing:.04em;margin:-32px -20px 20px;padding-left:20px;padding-right:20px}
.admin-subnav{background:#fce4e4 !important}
.admin-subnav a:hover{color:#9a2a2a !important; background:rgba(154,42,42,0.08) !important}
.admin-subnav a.active{color:#9a2a2a !important}
.admin-subnav a.active .ic{color:#9a2a2a !important}

.login-alt{margin:18px 0 0;border-top:1px solid var(--line);padding-top:14px}
.login-alt summary{cursor:pointer;color:var(--sage);font-size:13px;outline:none;list-style:none}
.login-alt summary::-webkit-details-marker{display:none}
.login-alt summary::before{content:'+ ';font-weight:600}
.login-alt[open] summary::before{content:'- '}

/* Site footer (matches the apex + brand subdomains) */
.site-footer{text-align:center;padding:40px 24px 24px;border-top:1px solid var(--line);position:relative;z-index:1;background:transparent}
.site-footer a{font-family:'DM Mono',ui-monospace,monospace;font-size:12px;color:var(--muted);text-decoration:none;margin:0 12px;display:inline-block;line-height:2;transition:color .2s}
.site-footer a:hover{color:var(--sage)}
.footer-copy{font-family:'DM Mono',ui-monospace,monospace;font-size:11px;color:var(--muted);opacity:0.55;margin-top:16px;letter-spacing:0.08em}

.cross-products{background:#f4eee2;padding:36px 24px;border-top:1px solid #e6dfd2;text-align:center;font-family:Inter,system-ui,sans-serif}
.cross-products-label{font-family:'DM Mono',ui-monospace,monospace;font-size:11px;color:var(--sage);letter-spacing:0.2em;margin:0 0 14px;font-weight:600}
.cross-products-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 14px;max-width:840px;margin:0 auto;font-size:14px}
.cross-products-links a{color:var(--sage);text-decoration:none}
.cross-products-links a:hover{text-decoration:underline}
.cross-products-links .dot{color:#a6b1a8}

.loading-overlay{position:fixed;inset:0;background:rgba(26,26,26,0.55);display:none;align-items:center;justify-content:center;z-index:9999;backdrop-filter:blur(4px)}
.loading-overlay.show{display:flex}
.loading-card{background:#fff;border-radius:14px;padding:32px 36px;max-width:380px;text-align:center;box-shadow:0 4px 30px rgba(0,0,0,0.15)}
.loading-spinner{width:46px;height:46px;margin:0 auto 16px;border:4px solid #e8e0d4;border-top-color:var(--sage);border-radius:50%;animation:spin 0.9s linear infinite}
.loading-msg{font-size:15px;font-weight:600;color:var(--ink);margin-bottom:6px}
.loading-sub{font-size:13px;color:var(--muted)}
@keyframes spin{to{transform:rotate(360deg)}}

.toggle-row{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line);margin:0}
.toggle-row:last-of-type{border-bottom:none}
.toggle-row input[type="checkbox"]{margin-top:4px;flex-shrink:0;width:18px;height:18px;accent-color:var(--sage)}
.toggle-text{flex:1;font-size:14px;color:var(--ink);line-height:1.45}
.toggle-text strong{font-weight:600}

/* About page */
.about-hero{padding:24px 4px 28px;text-align:center;border-bottom:1px solid var(--line);margin-bottom:24px}
.about-hero h1{font-family:'DM Mono',ui-monospace,monospace;font-weight:500;font-size:28px;margin:0 0 12px;color:var(--ink)}
.about-hero p{font-size:16px;line-height:1.55;color:var(--muted);max-width:560px;margin:0 auto}
.about-cta-row{display:flex;gap:14px;align-items:center;justify-content:center;margin-top:18px;flex-wrap:wrap}

.carousel{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 4px 18px;margin:0 -4px;-webkit-overflow-scrolling:touch;cursor:grab}
.carousel:active{cursor:grabbing}
.carousel::-webkit-scrollbar{height:4px}
.carousel::-webkit-scrollbar-thumb{background:#e0d6c5;border-radius:2px}
.carousel-card{flex:0 0 280px;scroll-snap-align:start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:10px}
.carousel-icon{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--sage),#3d6149);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.carousel-icon .ic{width:22px;height:22px;color:#fff}
.carousel-card h3{margin:0;font-size:16px;font-weight:600;color:var(--ink)}
.carousel-card p{margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
.carousel-hint{text-align:center;margin:0 0 24px;font-size:12px}

.how-it-works{padding-left:20px;margin:14px 0}
.how-it-works li{margin:10px 0;font-size:14px;line-height:1.5}

/* About mini-card on login + signup */
.about-mini-card{display:flex;gap:12px;align-items:center;background:#f0f5f2;border:1px solid var(--sage);border-radius:10px;padding:14px 16px;text-decoration:none;color:var(--ink);margin-top:18px;transition:all 0.15s ease}
.about-mini-card:hover{background:#e5f1ea;color:var(--ink)}
.about-mini-icon{flex-shrink:0;width:38px;height:38px;border-radius:50%;background:var(--sage);color:#fff;display:flex;align-items:center;justify-content:center}
.about-mini-body{flex:1;min-width:0}
.about-mini-title{font-weight:600;font-size:14px}
.about-mini-sub{margin-top:2px}

/* Top progress bar */
#nav-progress{
  position:fixed; top:0; left:0; right:auto; height:3px;
  width:0%; max-width:100vw;
  background:linear-gradient(90deg, var(--sage), #7ba792);
  box-shadow:0 0 8px rgba(74,122,92,0.6);
  z-index:10000;
  opacity:0;
  pointer-events:none;
  border-bottom-right-radius:2px;
}

.usage-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:14px 0}
.usage-cell{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.usage-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600;margin-bottom:8px}
.usage-row{display:flex;gap:8px;flex-wrap:wrap}

/* SSID controls (bandwidth + schedule fold-outs) */
.ssid-extra{border-top:1px solid var(--line);padding-top:10px}
.ssid-extra > summary{cursor:pointer;font-weight:600;color:var(--ink);padding:6px 0;list-style:none}
.ssid-extra > summary::-webkit-details-marker{display:none}
.ssid-extra > summary::before{content:'+ ';color:var(--muted)}
.ssid-extra[open] > summary::before{content:'- '}
.row-2col{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:520px){.row-2col{grid-template-columns:1fr}}
.check-row{display:flex;align-items:flex-start;gap:8px;font-size:14px}
.check-row input{margin-top:3px}

/* Time-range list */
.tr-list{list-style:none;padding:0;margin:10px 0;display:flex;flex-direction:column;gap:6px}
.tr-list li{background:#f9f6ef;border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:14px}

/* Signal bars + device chips */
.sig-bars{display:inline-flex;gap:1px;align-items:flex-end;height:10px;margin-right:5px;vertical-align:middle}
.sig-bars .bar{width:3px;background:#d6cfc1;border-radius:1px}
.sig-bars .bar:nth-child(1){height:3px}
.sig-bars .bar:nth-child(2){height:5px}
.sig-bars .bar:nth-child(3){height:7px}
.sig-bars .bar:nth-child(4){height:10px}
.sig-bars .bar.on{background:var(--sage)}
.sig-1 .bar.on:not(:first-child){background:#d6cfc1}
.chip{display:inline-block;background:#f0ebde;color:#5a5444;font-size:11px;font-weight:500;padding:2px 7px;border-radius:10px;margin-right:4px}

/* Usage page chart sizing + range selector */
.bw-canvas-wrap{position:relative;height:220px;margin:8px 0 4px}
.bw-range{display:flex;gap:4px}
.bw-range button{padding:4px 10px;border:1px solid var(--line);background:#fff;border-radius:6px;font-size:12px;color:var(--muted);text-decoration:none}
.bw-range button:hover{color:var(--sage);border-color:var(--sage)}
.bw-range button.active{background:var(--sage);color:#fff;border-color:var(--sage)}