/* =====================================================================
   matt.css — Spectral dashboard
   ---------------------------------------------------------------------
   Same visual language as the login page: warm brown/gold palette, and every
   box is the shared .glass surface (translucent, blurred, hairline edge).
   Matte and flat - no gradients except the gold text treatment.

   Unlike the login page there is no background video and no music: the
   backdrop is the flat --bg colour, so the glass boxes sit on a solid ground.
   ===================================================================== */

:root {
  /* one accent, shared with the login page */
  --gold:      #7cc0ff;
  --gold-hi:   #a8d8ff;
  --gold-dim:  #4d8ec7;

  /* warm dark ground, taken from login.css */
  --bg:        #141416;
  --bg-input:  #111;

  /* the glass surface every box uses */
  --glass:     rgba(12,12,12,.55);
  --glass-hi:  rgba(22,22,24,.55);

  /* warm hairlines, matching login */
  --line:      #2a2a2e;
  --line-hi:   #3b3b41;

  --text:      #e9e9ec;
  --muted:     #b6b6bd;
  --faint:     #7d7d85;

  --ok:        #8fc46a;
  --danger:    #e06a5a;

  --radius:    16px;
  --r:         16px;
  --r-sm:      11px;
  --r-pill:    999px;
  --nav-h:     72px;
  --ease:      cubic-bezier(.2,.7,.3,1);

  /* Aliases kept so the rest of this file (and any markup using them)
     resolves to the unified palette above. */
  --surface:   rgba(12,12,12,.55);
  --surface-2: rgba(22,22,24,.55);
  --surface-3: rgba(30,30,33,.6);
  --line-soft: #2a2a2e;
  --gold-text: #a8d8ff;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font: 13.5px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding: 0 22px calc(var(--nav-h) + 52px);
}

/* The shared glass surface. Mirrors .glass on the login page so boxes read
   the same in both places. */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(28px) saturate(120%);
  backdrop-filter: blur(28px) saturate(120%);
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: 0 6px 26px rgba(0,0,0,.26);
}

/* -------------------------------- pill ------------------------------- */

.pill {
  font-size: 11.5px;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.11);
  background: var(--glass);
  color: var(--muted);
  white-space: nowrap;
}

.pill.on  { color: var(--ok); border-color: #2f3d28; background: rgba(26,32,23,.6); }

/* encrypted-token cells in the credentials table */
td.token {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 12px;
  color: var(--gold-hi);
  letter-spacing: .02em;
  user-select: all;
  word-break: break-all;
}

/* Small layout helpers. These replaced inline style="" attributes so the
   pages can ship a Content-Security-Policy without 'unsafe-inline'. */
.mt12 { margin-top: 12px; }
.scroller { overflow-x: auto; }
.field-narrow { flex: 0 0 130px; }
.goldlink { color: var(--gold-hi); }

/* ------------------------------- layout ------------------------------ */

.wrap { max-width: 1140px; margin: 0 auto; }

.view { display: none; animation: fade .18s var(--ease); }
.view.active { display: block; }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.view-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 22px 0 14px;
}

.view-head h2 { margin: 0; font-size: 17px; font-weight: 600; }

.view-head .sub { font-size: 12.5px; color: var(--muted); }

/* -------------------------------- grid ------------------------------- */

.grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.card {
  background: var(--glass);
  -webkit-backdrop-filter: blur(28px) saturate(120%);
  backdrop-filter: blur(28px) saturate(120%);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: var(--r);
  padding: 15px 16px;
  box-shadow: 0 6px 26px rgba(0,0,0,.26);
  transition: border-color .15s var(--ease);
}

.card:hover { border-color: var(--line-hi); }

.card .label {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.card .value {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--gold-hi);
  font-variant-numeric: tabular-nums;
}

.card .value.small { font-size: 15px; color: var(--text); }

.card .foot { margin-top: 6px; font-size: 11.5px; color: var(--faint); }

/* -------------------------------- panel ------------------------------ */

.panel {
  background: var(--glass);
  -webkit-backdrop-filter: blur(28px) saturate(120%);
  backdrop-filter: blur(28px) saturate(120%);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: var(--r);
  box-shadow: 0 6px 26px rgba(0,0,0,.26);
  overflow: hidden;
  /* A column so that, when two panels share a grid row, both bodies stretch to
     the same height instead of one ending short of the other. */
  display: flex;
  flex-direction: column;
}

.panel + .panel { margin-top: 12px; }

.panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 15px;
  border-bottom: 1px solid var(--line);
  font-size: 11.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  flex: 0 0 auto;
}

.panel-head .spacer { flex: 1; }

.panel-body { padding: 15px; flex: 1 1 auto; }

/* -------------------------------- table ------------------------------ */

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }

th {
  text-align: left;
  padding: 9px 15px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

td {
  padding: 11px 15px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--text);
}

tbody tr { transition: background .12s var(--ease); }
tbody tr:hover { background: rgba(22,22,24,.4); }
tbody tr:last-child td { border-bottom: 0; }

td.num {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 12.5px;
}

/* ------------------------------- settings ------------------------------ */

/* Two columns, sized to their content so the panels below fill the space
   instead of leaving a ragged edge down the middle. */
.settings-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 980px) {
  .settings-grid {
    grid-template-columns: 1fr 1.15fr;
  }

  /* account    sessions
     password   webhook     <- matches the column each box sits in */
  .settings-grid > .panel:nth-child(1) { grid-column: 1 / -1; }
  .settings-grid > .panel:nth-child(3) { grid-column: 2; grid-row: 2; }
  .settings-grid > .panel:nth-child(2) { grid-column: 1; grid-row: 2; }
  .settings-grid > .panel:nth-child(4) { grid-column: 1 / -1; grid-row: 3; }
}

/* Inside the grid the 12px gap does the spacing, so the stacking margin the
   panels carry elsewhere would double it. */
.settings-grid > .panel { margin-top: 0; }

/* The sign-ins panel is a list, not a form: it reads better across the full
   width where each row has room for every detail on one line. */
@media (min-width: 980px) {
  .settings-grid > .panel:nth-child(4) .sessions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .settings-grid > .panel:nth-child(4) .sessions > .session:only-child {
    grid-column: 1 / -1;
  }
}

/* panel-head gains a right-aligned count */
.head-count {
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

/* A small text button that lives in a panel heading. */
.head-action {
  font: inherit;
  font-size: 10.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--faint);
  background: transparent;
  border: 0;
  padding: 2px 0 2px 12px;
  cursor: pointer;
  transition: color .13s var(--ease);
}

.head-action:hover:not(:disabled) { color: var(--danger); }
.head-action:disabled { opacity: .45; cursor: default; }
.head-action:focus-visible { outline: 2px solid var(--gold-dim); outline-offset: 2px; }

/* ---------------------------- account block -------------------------- */

.acct {
  display: flex;
  align-items: center;
  gap: 14px;
}

.acct-avatar {
  position: relative;
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.34);
  border: 1px solid rgba(255,255,255,.11);
  color: var(--faint);
  font-size: 22px;
  font-weight: 600;
}

.acct-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.acct-meta { min-width: 0; }

.acct-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}

.acct-tier {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.tier-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-hi);
  background: rgba(30,30,33,.6);
  border: 1px solid var(--line-hi);
}

.acct-time { font-size: 12.5px; color: var(--muted); }

.avatar-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 15px;
  flex-wrap: wrap;
}

/* the file input is hidden, so the label acts as the button */
label.btn { cursor: pointer; }

/* ------------------------------- webhook ------------------------------- */

/* the state chip sits in the panel heading, right-aligned via .spacer */
.wh-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--faint);
}

.wh-dot-on  { background: var(--ok); box-shadow: 0 0 7px rgba(143,196,106,.55); }
.wh-dot-bad { background: var(--danger); box-shadow: 0 0 7px rgba(224,106,90,.55); }
.wh-dot-off { background: var(--faint); }

.wh-status {
  font-size: 10.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.wh-status-on  { color: var(--ok); }
.wh-status-bad { color: var(--danger); }
.wh-status-off { color: var(--faint); }

.wh-ping-out {
  /* reserves its line so the panel does not resize when a result appears */
  min-height: 16px;
  margin: 9px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.wh-ping-out.good { color: var(--ok); }
.wh-ping-out.bad  { color: var(--danger); }

/* The field showing the saved preview rather than an edit: muted and italic, so
   it reads as "this is what is set" instead of "this is a value you typed". */
input.wh-preview {
  color: var(--faint);
  font-style: italic;
  cursor: pointer;
}

/* Two buttons sharing a line evenly, so Save and Ping line up with each other
   and with the field above them. */
.btn-row {
  display: flex;
  gap: 9px;
  align-items: stretch;
}

.btn.wide {
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}

/* ------------------------------- status ------------------------------- */

.status-inline {
  min-height: 0;
  margin: 0 0 12px;
  padding: 0;
  font-size: 12.5px;
}

.status-inline:empty { display: none; }

.chip {
  font-size: 11.5px;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  white-space: nowrap;
}

.chip.chip-ok    { color: var(--ok);     border-color: rgba(143,196,106,.35); background: rgba(143,196,106,.08); }
.chip.chip-error { color: var(--danger); border-color: rgba(224,106,90,.35);  background: rgba(224,106,90,.08); }

/* ------------------------------- sessions ------------------------------ */

.sessions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.session {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 13px;
  border-radius: var(--r-sm);
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.07);
  transition: border-color .15s var(--ease), background .15s var(--ease);
}

.session:hover { background: rgba(0,0,0,.4); border-color: rgba(255,255,255,.13); }

/* the session you are reading this in gets a gold left edge */
.session-current {
  border-color: var(--line-hi);
  background: rgba(22,22,24,.45);
  box-shadow: inset 2px 0 0 var(--gold);
}

/* the device glyph, in a rounded tile so a row is identifiable at a glance */
.sess-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--muted);
}

.session-current .sess-icon {
  color: var(--gold-hi);
  border-color: var(--line-hi);
  background: rgba(30,30,33,.55);
}

.sess-icon svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sess-main { min-width: 0; flex: 1; }

.sess-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sess-device {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: .01em;
}

.sess-meta {
  font-size: 11.5px;
  color: var(--muted);
  padding-left: 8px;
  border-left: 1px solid var(--line);
}

.sess-tag {
  font-size: 9.5px;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-hi);
  background: rgba(30,30,33,.66);
  border: 1px solid var(--line-hi);
}

.sess-geo {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 5px;
  font-size: 12px;
  color: var(--muted);
}

.sess-flag { font-size: 13px; line-height: 1; }

.sess-ip {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--faint);
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.07);
  user-select: all;
}

.sess-times {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--faint);
}

/* The sign-out control: a small square X that only shows its intent on hover. */
.sess-x {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  transition: color .13s var(--ease), background .13s var(--ease),
              border-color .13s var(--ease);
}

.sess-x svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
}

.sess-x:hover:not(:disabled) {
  color: var(--danger);
  background: rgba(224,106,90,.1);
  border-color: rgba(224,106,90,.35);
}

.sess-x:disabled { opacity: .4; cursor: default; }

.sess-x:focus-visible { outline: 2px solid var(--gold-dim); outline-offset: 2px; }

/* Sign out of every other device: destructive, so it reads as an outline in the
   danger colour rather than another gold primary button. */
.btn.danger {
  color: var(--danger);
  border-color: rgba(224,106,90,.4);
  background: rgba(224,106,90,.07);
}

.btn.danger:hover:not(:disabled) {
  background: rgba(224,106,90,.14);
  border-color: rgba(224,106,90,.65);
}

.sess-empty {
  padding: 20px 16px;
  text-align: center;
  border-radius: var(--r-sm);
  border: 1px dashed var(--line);
  color: var(--faint);
  font-size: 12px;
  line-height: 1.6;
}

.sess-empty strong {
  display: block;
  color: var(--muted);
  font-size: 12.5px;
  margin-bottom: 3px;
}

/* ------------------------------- empty ------------------------------- */
.empty {
  padding: 34px 18px;
  text-align: center;
  color: var(--faint);
  font-size: 13px;
  line-height: 1.7;
}

.empty strong {
  display: block;
  color: var(--muted);
  font-weight: 600;
  font-size: 13.5px;
  margin-bottom: 4px;
}

.empty .icon {
  width: 34px;
  height: 34px;
  margin: 0 auto 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: var(--gold-dim);
}

.empty .icon svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ------------------------------ controls ----------------------------- */

label.field { display: block; margin-bottom: 12px; }

label.field > span {
  display: block;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}

input[type="text"],
input[type="url"],
input[type="password"],
input[type="number"],
select,
textarea {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-size: 13.5px;
  color: var(--text);
  background: rgba(0,0,0,.34);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 10px;
  outline: none;
  transition: border-color .15s var(--ease);
}

input:focus, select:focus, textarea:focus { border-color: var(--gold-dim); }

input::placeholder { color: var(--faint); }

.row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.row .field { flex: 1; margin-bottom: 0; min-width: 160px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  font: inherit;
  font-size: 13.5px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  transition: background .13s var(--ease), border-color .13s var(--ease),
              box-shadow .13s var(--ease);
}

.btn:hover:not(:disabled) { background: rgba(30,30,33,.6); border-color: var(--line-hi); }

.btn.primary {
  background: linear-gradient(180deg, #9ccfff, #4d8ec7);
  border-color: #4d8ec7;
  color: #06122b;
  font-weight: 600;
}

.btn.primary:hover:not(:disabled) {
  background: var(--gold-text);
  border-color: var(--gold-text);
  box-shadow: 0 0 0 3px rgba(124,192,255,.16);
}

.btn:disabled { opacity: .5; cursor: default; }

.btn.ghost { background: transparent; }

.hint { margin: 0 0 12px; font-size: 12px; line-height: 1.6; color: var(--muted); }

.chips { display: flex; flex-wrap: wrap; gap: 7px; }

.chip {
  font-size: 11.5px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
}

/* ------------------------------ spinner ------------------------------ */

.spinner {
  width: 15px;
  height: 15px;
  border: 2px solid var(--line);
  border-top-color: var(--gold);
  border-radius: 50%;
  display: inline-block;
  vertical-align: -2px;
  margin-right: 8px;
  animation: spin .7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* -------------------------------- status ----------------------------- */

.status {
  margin: 16px 0 0;
  font-size: 12.5px;
  color: var(--muted);
  min-height: 18px;
}

/* Sits directly under a view heading rather than at the top of the page. */
.status-inline { margin: 0 0 10px; }

.status.ok    { color: var(--ok); }
.status.error { color: var(--danger); }

.out {
  margin-top: 12px;
  padding: 12px 13px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 44px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 12.5px;
  color: var(--gold-text);
  white-space: pre-wrap;
  word-break: break-all;
}

/* --------------------------- brand bar (centred) --------------------- */

.nav {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 40;

  display: flex;
  align-items: center;
  gap: 2px;
  padding: 7px 7px 7px 10px;

  background: rgba(10,10,12,.76);
  -webkit-backdrop-filter: blur(34px) saturate(135%);
  backdrop-filter: blur(34px) saturate(135%);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-pill);
  box-shadow: 0 12px 40px rgba(0,0,0,.5),
              inset 0 1px 0 rgba(255,255,255,.06);

  max-width: calc(100vw - 24px);
  overflow-x: auto;
  scrollbar-width: none;
}

.nav::-webkit-scrollbar { display: none; }

/* The pill that slides between links. Positioned by dashboard.js, which
   measures the active link - so it stays right whatever the labels measure. */
.nav-ind {
  position: absolute;
  top: 7px;
  height: calc(100% - 14px);
  left: 0;
  width: 0;
  border-radius: var(--r-pill);
  background: rgba(30,30,33,.8);
  box-shadow: inset 0 0 0 1px var(--line-hi);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: transform .3s var(--ease), width .3s var(--ease),
              opacity .2s var(--ease);
}

.nav-ind.ready { opacity: 1; }

/* logo + wordmark, mirroring the round mark and accent dot of the reference */
.nav-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px 0 2px;
  flex: 0 0 auto;
}

.nav-logo {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  image-rendering: pixelated;
}

.nav-word {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--text);
  white-space: nowrap;
}

.nav-word-dot { color: var(--gold); }

.nav a {
  position: relative;
  z-index: 1;
  padding: 9px 14px;
  font: inherit;
  font-size: 13.5px;
  color: var(--muted);
  border-radius: var(--r-pill);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s var(--ease);
}

.nav a:hover { color: var(--text); }

.nav a.active { color: var(--gold-hi); }

.nav a:focus-visible {
  outline: 2px solid var(--gold-dim);
  outline-offset: 2px;
}

/* the filled accent button at the right end, as in the reference */
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  flex: 0 0 auto;
  margin-left: 7px;
  padding: 10px 17px 10px 15px;

  font: inherit;
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1;

  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, #8fb4ff, #7cc0ff 58%, #4d8ec7);
  color: #06122b;
  cursor: pointer;
  white-space: nowrap;
  /* a soft lift plus an inner top highlight, so it reads as a raised pill
     rather than a flat block of colour */
  box-shadow: 0 3px 12px rgba(124,192,255,.26),
              inset 0 1px 0 rgba(255,255,255,.55);
  transition: transform .14s var(--ease), box-shadow .18s var(--ease),
              filter .14s var(--ease);
}

.nav-cta svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .18s var(--ease);
}

.nav-cta:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 7px 20px rgba(124,192,255,.36),
              inset 0 1px 0 rgba(255,255,255,.6);
}

/* the arrow leans out of the door on hover */
.nav-cta:hover svg { transform: translateX(2px); }

.nav-cta:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(124,192,255,.24),
              inset 0 1px 0 rgba(255,255,255,.45);
}

.nav-cta:focus-visible {
  outline: 2px solid var(--gold-dim);
  outline-offset: 2px;
}

[hidden] { display: none !important; }

@media (max-width: 600px) {
  body { padding: 0 14px calc(var(--nav-h) + 40px); }

  /* Fill the width and let the links share it rather than scrolling: the CTA
     must never be pushed off the end, or there is no way to sign out. */
  .nav {
    width: calc(100vw - 26px);
    padding: 7px;
    gap: 2px;
  }

  .nav-ind { top: 7px; height: calc(100% - 14px); }

  /* No room for the mark beside five labels at this width; the login and
     marketing pages still carry the brand. */
  .nav-brand { display: none; }

  .nav a {
    flex: 1 1 0;
    min-width: 0;
    padding: 9px 6px;
    font-size: 11.5px;
    text-align: center;
  }

  .nav-cta {
    margin-left: 4px;
    padding: 9px 12px 9px 11px;
    font-size: 12px;
    gap: 6px;
  }

  .nav-cta svg { width: 14px; height: 14px; }

  .card .value { font-size: 22px; }
}

/* ------------------------- dashboard hero + stats -------------------- */
.dash-hero{display:flex;align-items:center;gap:14px;padding:16px 18px;margin-bottom:14px;border-radius:14px}
.user-avatar{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
font-size:19px;font-weight:600;color:#06122b;flex:0 0 auto;
background:linear-gradient(180deg,#9ccfff,#4d8ec7)}
.dash-who{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.dash-greeting{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.dash-username{font-size:17px;color:var(--text)}
.dash-role{font-size:11.5px;color:var(--gold-text)}

.stat-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));margin-bottom:14px}
.stat-card{padding:15px 16px;border-radius:14px;display:flex;flex-direction:column;gap:2px}
.stat-icon{color:#a08434;margin-bottom:6px}
.stat-icon svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round;display:block}
.stat-card b{font-size:24px;color:var(--gold-text);font-variant-numeric:tabular-nums;line-height:1.1}
.stat-card b.small{font-size:14px;color:var(--text)}
.stat-card span:last-child{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}

/* two-up panels on the dashboard */
.two-col{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.panel-head .sub{font-size:11.5px;letter-spacing:0;text-transform:none;color:var(--faint)}
/* --------------------------------- hits ------------------------------ */
.hits-tabs{display:flex;gap:4px}
.hits-tab{font:inherit;font-size:11.5px;padding:5px 12px;border-radius:999px;
border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer}
.hits-tab:hover{color:var(--text)}
.hits-tab.active{color:var(--gold-text);border-color:#4a3f22;background:rgba(142,199,255,.08)}
.hit-search{font:inherit;font-size:12.5px;padding:6px 11px;width:250px;max-width:40vw;
background:var(--bg);border:1px solid var(--line);border-radius:999px;color:var(--text);outline:none}
.hit-search:focus{border-color:#a08434}
.table-wrap{overflow-x:auto}
.pager{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 15px;
border-top:1px solid var(--line-soft)}
.pager-info{font-size:12px;color:var(--muted)}
.tag{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;padding:2px 8px;border-radius:999px}
.tag.ok{color:#8fc46a;background:rgba(143,196,106,.11)}
.tag.bad{color:#c9705f;background:rgba(201,112,95,.11)}
/* ------------------------------- builder ----------------------------- */
.build-top{display:grid;gap:22px;grid-template-columns:1fr 180px}
.build-left{display:flex;flex-direction:column;min-width:0}
.build-right{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.pad-hint{font-style:normal;color:var(--faint);font-size:10.5px}
.range-wrap{display:flex;align-items:center;gap:12px}
.range-slider{flex:1;-webkit-appearance:none;appearance:none;height:4px;border-radius:999px;
background:var(--line);outline:none;cursor:pointer}
.range-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;
background:linear-gradient(180deg,#9ccfff,#4d8ec7);border:0;cursor:pointer}
.range-slider::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;
background:#e8c14a;cursor:pointer}
.range-val{font-size:12px;color:var(--gold-text);font-variant-numeric:tabular-nums;
min-width:58px;text-align:right}
.bld-btn{width:100%;justify-content:center}

.ring-wrap{position:relative;width:132px;height:132px}
.ring{width:100%;height:100%;transform:rotate(-90deg);display:block}
.ring-bg{fill:none;stroke:var(--line);stroke-width:9}
.ring-fill{fill:none;stroke:url(#ringGrad);stroke-width:9;stroke-linecap:round;
stroke-dasharray:327;stroke-dashoffset:327;transition:stroke-dashoffset .4s cubic-bezier(.2,.7,.3,1)}
.ring-pct{position:absolute;inset:0;display:grid;place-items:center;font-size:19px;font-weight:600;
color:var(--gold-text);font-variant-numeric:tabular-nums}
.ring-phase{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

@media(max-width:640px){.build-top{grid-template-columns:1fr}}
/* -------------------------------- remote -----------------------------
   ChromElevator remote view. Layout and component set are a 1:1 port of the
   reference panel; only the palette is Spectral (gold on warm dark). */
.rmt-grid{display:grid;gap:12px;grid-template-columns:250px 1fr;min-height:calc(100vh - 200px)}
.rmt-side{display:flex;flex-direction:column;overflow:hidden}
.rmt-list{flex:1;overflow-y:auto;padding:10px 12px}
.rmt-main{display:flex;flex-direction:column;gap:10px;min-width:0}
.rmt-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 12px}
.rmt-sel{font:inherit;font-size:12px;padding:6px 10px;border-radius:9px;background:var(--bg-input);
border:1px solid var(--line);color:var(--text);outline:none}
.rmt-sel:focus{border-color:var(--gold-dim)}
.rmt-audio{display:flex;align-items:center;gap:6px;padding:0 8px;
border-left:1px solid var(--line);border-right:1px solid var(--line)}
.rmt-ico{width:34px;height:34px;padding:0;display:inline-flex;align-items:center;justify-content:center;
color:var(--faint);opacity:.6}
.rmt-ico:hover{color:var(--text);opacity:1}
.rmt-ico.on{opacity:1;color:var(--gold-text);border-color:var(--gold-dim);background:rgba(124,192,255,.10)}
.rmt-ico svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round;display:block}
.rmt-vol{width:70px;height:4px;-webkit-appearance:none;appearance:none;background:var(--line);
border-radius:3px;outline:none;cursor:pointer}
.rmt-vol::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;
background:linear-gradient(180deg,#9ccfff,#4d8ec7);cursor:pointer}
.rmt-vol::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#e8c14a;cursor:pointer}
.rmt-stage{flex:1;padding:6px;display:flex;align-items:center;justify-content:center;
min-height:320px;background:#000;overflow:hidden}
.rmt-stage canvas{max-width:100%;max-height:100%;border-radius:6px;display:block}
.rmt-mods{display:flex;gap:6px}
.rmt-mods .btn{flex:1;justify-content:center;padding:9px 0}
.rmt-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;
cursor:pointer;margin-bottom:7px;border:1px solid var(--line);
background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0))}
.rmt-item:hover{border-color:var(--line-hi);background:rgba(255,255,255,.04)}
.rmt-item.active{border-color:var(--gold-dim);
background:linear-gradient(180deg,rgba(124,192,255,.14),rgba(124,192,255,.04));
box-shadow:inset 0 0 0 1px rgba(124,192,255,.18)}
.rmt-item .rmt-ico{width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.05);
border:0;opacity:.75}
.rmt-item:hover .rmt-ico,.rmt-item.active .rmt-ico{color:var(--gold-text);opacity:1}
.rmt-txt{display:flex;flex-direction:column;min-width:0}
.rmt-item-name{font-weight:600;font-size:13px;color:var(--text);white-space:nowrap;
overflow:hidden;text-overflow:ellipsis}
.rmt-item-meta{font-size:10px;color:var(--faint);margin-top:1px;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis}
.rmt-empty{padding:16px 10px;text-align:center;color:var(--faint);font-size:12px}
.rmt-dot{width:6px;height:6px;border-radius:50%;display:inline-block;flex:0 0 auto;background:#4a4438}
.rmt-dot.on{background:var(--ok);box-shadow:0 0 5px rgba(143,196,106,.45)}

/* draggable module popups */
.r-pop{position:fixed;background:#161310;border:1px solid var(--line-hi);border-radius:12px;
box-shadow:0 18px 50px rgba(0,0,0,.6);z-index:1000;max-height:min(70vh,620px);overflow:hidden}
.r-pop-h{display:flex;align-items:center;justify-content:space-between;padding:7px 12px;
border-bottom:1px solid var(--line);cursor:move;user-select:none}
.r-pop-h span{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted)}
.r-pop-x{background:none;border:none;color:var(--faint);cursor:pointer;font-size:13px;line-height:1;padding:2px}
.r-pop-x:hover{color:var(--text)}
.r-pop-b{padding:10px;overflow:auto;max-height:calc(min(70vh,620px) - 40px)}
.r-pop canvas,.r-pop img{max-height:46vh;max-width:100%}
.r-troll-sec{margin-bottom:12px}
.r-troll-sec:last-child{margin-bottom:0}
.r-troll-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;
color:var(--faint);margin-bottom:6px}
.r-troll-row{display:flex;flex-wrap:wrap;gap:6px;align-items:stretch}
.r-troll-field{display:block;width:100%;box-sizing:border-box;font:inherit;font-size:12px;
margin-bottom:6px;padding:7px 10px;border-radius:9px;background:var(--bg-input);
border:1px solid var(--line);color:var(--text);outline:none}
.r-troll-field:focus{border-color:var(--gold-dim)}
.r-troll-ta{resize:none}
.r-tb{flex:1;min-width:84px;padding:7px 12px;font-size:12px}
.r-troll-row .input{flex:1;min-width:0;font-size:12px}
@media(max-width:820px){.rmt-grid{grid-template-columns:1fr}.rmt-side{max-height:280px}}
/* --------------------------------- hit map ---------------------------
   Leaflet, restyled to Spectral: dark CARTO tiles, gold pins. */
.map-wrap{padding:10px}
#hitMap{height:430px;border-radius:12px;background:#0d0d10;z-index:0;overflow:hidden}
.leaflet-container{background:#0d0d10;font:inherit}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:#161310;color:var(--text);
border:1px solid var(--line-hi);box-shadow:0 10px 30px rgba(0,0,0,.6)}
.leaflet-popup-content{margin:9px 12px;font-size:12.5px;line-height:1.5}
.leaflet-popup-close-button{color:var(--faint)!important}
.leaflet-bar a{background:#161310;color:var(--text);border-bottom-color:var(--line)}
.leaflet-bar a:hover{background:#211c15;color:var(--gold-text)}
.leaflet-control-attribution{background:rgba(0,0,0,.55)!important;color:var(--faint)!important}
.leaflet-control-attribution a{color:var(--muted)!important}
.hit-pin-icon{background:none;border:0}
.hit-pin{display:grid;place-items:center;border-radius:50%;color:#06122b;font-weight:700;
font-size:11px;box-shadow:0 0 12px rgba(124,192,255,.35);
background:radial-gradient(circle at 50% 38%,rgba(156,207,255,.97),rgba(201,145,31,.72) 58%,rgba(201,145,31,0) 74%)}
@media(max-width:720px){#hitMap{height:300px}}
/* ------------------------ builder branding fields -------------------- */
.bld-meta{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
margin-bottom:8px}
.bld-meta .bld-wide{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field > span{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.field input{font:inherit;font-size:13px;width:100%;box-sizing:border-box;padding:9px 12px;
border-radius:10px;background:var(--bg-input);border:1px solid var(--line);color:var(--text);outline:none}
.field input:focus{border-color:var(--gold-dim)}
.field input::placeholder{color:#6b6353}
.bld-hint{font-size:11.5px;color:var(--faint);margin:0 0 16px}
.bld-hint code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;
color:var(--gold-text);background:rgba(124,192,255,.08);padding:1px 5px;border-radius:5px}
/* ------------------------- dashboard layout --------------------------
   The dashboard reads better as a centred column than edge to edge: four
   stat cards and a map want a fixed measure, not 1140px of travel. */
#view-dashboard{max-width:1560px;margin:0 auto}

/* ------------------------- hit map, revised -------------------------
   Explicit size on both the wrapper and the canvas so Leaflet always has a
   box to measure, plus an overlay for the no-pins case - a dark map with
   nothing on it otherwise looks broken rather than empty. */
.map-wrap{position:relative;padding:10px}
#hitMap{height:460px;width:100%;border-radius:12px;background:#0d0d10;z-index:0;overflow:hidden}
.map-empty{position:absolute;inset:10px;display:grid;place-content:center;justify-items:center;
gap:6px;text-align:center;pointer-events:none;border-radius:12px;
background:radial-gradient(circle at 50% 45%,rgba(20,17,12,.72),rgba(13,13,13,.35) 70%)}
.map-empty[hidden]{display:none}
.map-empty-title{font-size:14px;font-weight:600;color:var(--muted)}
.map-empty-sub{font-size:12px;color:var(--faint)}
@media(max-width:720px){#hitMap{height:320px}#view-dashboard{max-width:none}}
/* ============================ layout fixes ============================
   This theme defines `.panel { display:flex; flex-direction:column }`, so any
   panel used as a horizontal BAR has to opt back into a row. Without this the
   Remote toolbar stacked its buttons, selects and audio onto separate lines
   and the .spacer (flex:1) expanded downward instead of sideways. */
.panel.rmt-bar{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px}
.panel.build-bar{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px}

/* ------------------------- builder, Skidrat card --------------------- */
.build-mod-head{display:flex;align-items:center;gap:8px}
.build-mod-icon{display:inline-flex;align-items:center;color:var(--gold-dim)}
.build-mod-icon svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round;display:block}
.build-tabs{display:flex;gap:4px}
.build-tab{font:inherit;font-size:11.5px;padding:5px 12px;border-radius:999px;
border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer}
.build-tab:hover{color:var(--text)}
.build-tab.active{color:var(--gold-text);border-color:#4a3f22;background:rgba(142,199,255,.08)}
.btab[hidden]{display:none}

.version-static{padding:10px 12px;border-radius:10px;background:var(--bg-input);
border:1px solid var(--line)}
.version-static-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.version-static-val{font-size:13px;color:var(--text)}
.version-latest-tag{font-size:10px;letter-spacing:.06em;text-transform:uppercase;
padding:2px 8px;border-radius:999px;color:#06122b;
background:linear-gradient(180deg,#9ccfff,#4d8ec7)}
.version-static-sub{display:block;margin-top:3px;font-size:11px;color:var(--faint)}
.build-left .field{margin-bottom:14px}
.build-left .field:last-of-type{margin-bottom:10px}

/* inject pane note */
.btab-note{font-size:12.5px;color:var(--muted);margin:0 0 4px;line-height:1.55}
/* builder result cards (replaces an inline style the CSP would block) */
.bld-out{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
margin-bottom:16px}
.bld-out .card{padding:12px 14px;border-radius:12px}
.bld-out .label{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.bld-out .value{margin-top:3px}
.bld-out .value.small{font-size:12.5px;color:var(--text)}
/* tabs sit at the foot of the build card */
.build-tabs-bottom{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}

/* ======================= remote: match the reference =================
   The reference sizes the whole remote view to the viewport, so the canvas
   takes every pixel left under the toolbar and the session column runs the
   full height. min-height:0 on the flex children is what lets them actually
   shrink to fit instead of overflowing their column. */
.rmt-grid{height:calc(100vh - 200px);min-height:540px}
.rmt-side{min-height:0}
.rmt-main{min-height:0}
.rmt-stage{min-height:0}

/* reserve the map area even if a parent collapses */
.map-wrap{min-height:480px}

/* ===================== hit map: 1:1 with the reference ================
   Same markup class, same viewport-relative height, same dark ground.
   #hitMap.hit-map outranks the earlier #hitMap rule so the viewport height
   wins over the old fixed 460px. */
#hitMap.hit-map{height:calc(100vh - 540px);min-height:240px}
.hit-map{min-height:240px;border-radius:14px;overflow:hidden;background:#0d0d10;
border:1px solid var(--line);position:relative}
.hit-map .leaflet-container{background:#0d0d10;font-family:inherit;width:100%;height:100%}
.hit-map .leaflet-popup-content-wrapper{background:#17171a;color:var(--text);
border:1px solid var(--line-hi);border-radius:12px}
.hit-map .leaflet-popup-content{margin:12px 14px;font-size:13px}
.hit-map .leaflet-popup-tip{background:#17171a;border:1px solid var(--line-hi)}
.hit-map .leaflet-control-attribution{display:none}

/* ====================================================================
   FORKED VIEWS - reference variable names

   The dashboard, hits, builder, remote and hit-log views below are ported
   from the reference panel. Rather than rewrite every rule to Spectral's
   variable names, we define the names those stylesheets already use and
   point them at Spectral's palette. Their CSS then renders in Spectral
   colours verbatim.
   ==================================================================== */
:root {
  --accent:        var(--gold);
  --accent-2:      var(--gold-hi);
  --accent-glow:   rgba(124,192,255,.30);
  --bg-2:          #0a0d16;

  --surface-solid: #17171a;
  --surface-2:     #1c1814;

  --border:        var(--line);
  --border-strong: var(--line-hi);

  --text-dim:      var(--muted);
  --text-faint:    var(--faint);

  --green:         var(--ok);
  --green-glow:    rgba(143,196,106,.30);
  --gold-glow:     rgba(124,192,255,.30);

  --radius-sm:     var(--r-sm);
  --shadow:        0 30px 80px -24px rgba(0,0,0,.8);

  --purple:        #4d8ec7;
  --cyan:          #b9ad8d;
  --mono:          ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
  --sans:          inherit;
}

/* ------------------------- shared card chrome ------------------------ */
.view-title{font-size:28px;font-weight:800;letter-spacing:.3px;margin:0 0 26px;
display:flex;align-items:center;gap:13px;color:var(--text)}
.view-title .tag{font-size:12px;font-weight:600;color:var(--text-dim);
background:rgba(255,255,255,.04);border:1px solid var(--border);padding:4px 11px;
border-radius:20px;letter-spacing:1.5px;text-transform:uppercase}

.card{position:relative;padding:19px;border-radius:var(--r);background:var(--glass);
border:1px solid rgba(255,255,255,.11);box-shadow:0 6px 26px rgba(0,0,0,.26);overflow:hidden}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent,rgba(124,192,255,.35),transparent)}
.card:hover{border-color:var(--border-strong)}
.card h3{font-size:15px;font-weight:700;margin:0 0 8px;letter-spacing:.3px;color:var(--text)}
.card h4{font-size:13px;margin:20px 0 10px;color:var(--text-dim);
text-transform:uppercase;letter-spacing:1.5px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:14px;
margin-bottom:18px;flex-wrap:wrap}
.muted{color:var(--text-dim);font-size:13px;line-height:1.65}

/* reference writes .btn-primary where Spectral writes .btn.primary */
.btn-primary{color:#06122b;background:linear-gradient(180deg,#9ccfff,#5b9fe0);
border-color:#4d8ec7;font-weight:600}
.btn-primary:hover{background:linear-gradient(180deg,#cbe6ff,#7cc0ff)}

/* ============================ remote view ============================
   The reference expressed this layout as inline style="" attributes, which
   style-src 'self' blocks here. Each rule below is the same declaration,
   moved into the stylesheet with identical values. */
.rmt-layout{display:grid;grid-template-columns:250px 1fr;gap:12px;
height:calc(100vh - 150px);min-height:520px}
.rmt-col{display:flex;flex-direction:column;overflow:hidden;padding:0}
.rmt-col .card-head{padding:16px 19px 0;margin-bottom:10px}
.rmt-list{flex:1;overflow-y:auto;padding:0 10px 10px;min-height:0}
#rmt-count{font-size:10px;color:var(--text-faint)}
.rmt-right{display:flex;flex-direction:column;gap:10px;min-width:0;min-height:0}
.rmt-stage{flex:1;padding:6px;display:flex;align-items:center;justify-content:center;
min-height:0;background:#000}
.rmt-stage canvas{max-width:100%;max-height:100%;border-radius:4px;display:block}
.rmt-mods{display:flex;gap:6px}
.rmt-mods .btn{flex:1;padding:9px 0;justify-content:center}
.rmt-bar .btn{padding:8px 14px}
@media(max-width:860px){
  .rmt-layout{grid-template-columns:1fr;height:auto}
  .rmt-col{max-height:260px}
}

/* --------------------- remote.css, ported verbatim ------------------- */
.rmt-dot{width:6px;height:6px;border-radius:50%;display:inline-block;flex-shrink:0}
.rmt-dot.on{background:var(--green);box-shadow:0 0 5px var(--green-glow)}
.rmt-dot.off{background:#444}

.r-pop{position:fixed;background:var(--surface-solid);border:1px solid var(--border-strong);
border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.55);z-index:1000;display:block;
max-height:min(70vh,620px);overflow:hidden;height:auto}
.r-pop-h{display:flex;align-items:center;justify-content:space-between;padding:7px 12px;
border-bottom:1px solid var(--border);cursor:move;user-select:none}
.r-pop-h span{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;
color:var(--text-dim)}
.r-pop-x{background:none;border:none;color:var(--text-faint);cursor:pointer;font-size:13px;
line-height:1;padding:2px}
.r-pop-x:hover{color:var(--text)}
.r-pop-b{padding:10px;overflow:auto;max-height:calc(min(70vh,620px) - 40px)}
.r-pop canvas,.r-pop img{max-height:46vh;max-width:100%}

.rmt-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;
cursor:pointer;margin-bottom:7px;border:1px solid var(--border);
background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));
transition:border-color .15s,background .15s,transform .08s}
.rmt-item:hover{border-color:var(--accent);background:rgba(255,255,255,.04)}
.rmt-item:active{transform:scale(.99)}
.rmt-item.active{border-color:var(--accent);
background:linear-gradient(180deg,rgba(124,192,255,.16),rgba(124,192,255,.05));
box-shadow:inset 0 0 0 1px rgba(124,192,255,.25)}
.rmt-ico{width:30px;height:30px;flex:none;display:flex;align-items:center;
justify-content:center;border-radius:8px;background:rgba(255,255,255,.05);
color:var(--text-dim);transition:color .15s;opacity:.55}
.rmt-item:hover .rmt-ico,.rmt-item.active .rmt-ico{color:var(--accent)}
.rmt-ico svg{width:16px;height:16px}
.rmt-txt{display:flex;flex-direction:column;min-width:0}
.rmt-item-name{font-weight:600;font-size:13px;color:var(--text);white-space:nowrap;
overflow:hidden;text-overflow:ellipsis}
.rmt-item-meta{font-size:10px;color:var(--text-faint);margin-top:1px;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis}
.rmt-empty{padding:16px 10px;text-align:center;color:var(--text-faint);font-size:12px}

.rmt-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px}
.rmt-audio{display:flex;align-items:center;gap:6px;padding:0 8px;
border-left:1px solid var(--border);border-right:1px solid var(--border)}
.rmt-ico{width:34px;height:34px;padding:0;display:inline-flex;align-items:center;
justify-content:center;color:var(--text-dim)}
.rmt-ico svg{width:17px;height:17px}
.rmt-ico:hover{color:var(--text)}
.rmt-ico.on{opacity:1;color:var(--accent);border-color:var(--accent);
background:rgba(124,192,255,.14)}
.rmt-vol{width:70px;height:4px;-webkit-appearance:none;appearance:none;background:#3a3428;
border-radius:3px;accent-color:var(--accent);cursor:pointer}
.rmt-vol::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;
background:var(--accent);border-radius:50%;cursor:pointer}
.rmt-sel{width:auto;padding:6px 10px;font-size:12px;border-radius:8px;
background:var(--bg-input);border:1px solid var(--border);color:var(--text)}
.rmt-sel:focus{outline:none;border-color:var(--accent)}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:#3a3428;border-radius:6px;border:2px solid transparent;
background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:#4a4230;background-clip:padding-box}

/* Troll popup (verbatim) */
.r-troll-sec{margin-bottom:12px}
.r-troll-sec:last-child{margin-bottom:0}
.r-troll-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;
color:var(--text-faint);margin-bottom:6px}
.r-troll-row{display:flex;flex-wrap:wrap;gap:6px;align-items:stretch}
.r-troll-row .input{flex:1;min-width:0;font-size:12px}
.r-troll-row #u-go{flex:none;font-size:12px}
.r-tb{flex:1;min-width:84px;padding:7px 12px;font-size:12px}
.r-troll-field{display:block;width:100%;box-sizing:border-box;font:inherit;font-size:12px;
margin-bottom:6px;padding:8px 10px;border-radius:9px;background:var(--bg-input);
border:1px solid var(--border);color:var(--text);outline:none}
.r-troll-ta{resize:none}
.r-troll-btn{font-size:12px}
/* ====================== dashboard (reference port) ===================
   Layout, sizes and structure are the reference's. The greys it hardcodes
   in its gradients (rgba(150,150,158,…)) are remapped to Spectral's gold so
   the glows read warm instead of steel. */
.dash-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;
padding:30px 32px;margin-bottom:24px;
background:radial-gradient(560px 240px at 88% -30%,rgba(124,192,255,.16),transparent 65%),
radial-gradient(320px 180px at 0% 100%,rgba(185,173,141,.07),transparent 65%),var(--surface);
backdrop-filter:blur(20px) saturate(1.2);-webkit-backdrop-filter:blur(20px) saturate(1.2);
border:1px solid var(--border);border-radius:24px;box-shadow:0 24px 70px -28px rgba(0,0,0,.7);
position:relative;overflow:hidden}
.dash-hero::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent,rgba(124,192,255,.65),transparent)}
.dash-hero::after{content:"";position:absolute;right:-70px;top:-90px;width:280px;height:280px;
background:radial-gradient(circle,rgba(124,192,255,.18),transparent 70%);pointer-events:none}
.dash-user{display:flex;align-items:center;gap:18px}
.dash-user-info{display:flex;flex-direction:column}
.dash-greeting{font-size:11.5px;color:var(--text-faint);text-transform:uppercase;
letter-spacing:2px;font-weight:600}
.dash-username{font-size:24px;font-weight:800;letter-spacing:.3px;
background:linear-gradient(90deg,#fff,var(--accent-2));-webkit-background-clip:text;
background-clip:text;-webkit-text-fill-color:transparent}
.dash-role{margin-top:5px;align-self:flex-start;font-size:10px;font-weight:700;
letter-spacing:1.2px;text-transform:uppercase;padding:3px 10px;border-radius:20px;
background:rgba(168,216,255,.08);border:1px solid rgba(168,216,255,.25);color:var(--gold)}
.dash-since{margin-top:4px;font-size:11.5px;color:var(--text-faint);letter-spacing:.6px}

.user-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
background:linear-gradient(135deg,#34343a,#1f1f23);border:1px solid var(--border-strong);
font-size:14px;font-weight:700;color:var(--accent-2)}
.user-avatar.lg{width:58px;height:58px;font-size:24px;border-radius:17px;
background:linear-gradient(135deg,var(--accent),#4d555e);border:none;color:#fff;
box-shadow:0 12px 30px -8px var(--accent-glow);position:relative}
.user-avatar.lg::after{content:"";position:absolute;inset:0;border-radius:17px;
background:linear-gradient(180deg,rgba(255,255,255,.22),transparent 45%);pointer-events:none}

.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));
gap:16px;margin-bottom:24px}
.stat-card{position:relative;display:flex;flex-direction:column;align-items:center;
justify-content:center;text-align:center;
background:radial-gradient(260px 120px at 100% 0%,rgba(124,192,255,.07),transparent 70%),var(--surface);
backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);
border:1px solid var(--border);border-radius:20px;padding:22px;overflow:hidden;
transition:border-color .2s,transform .2s,box-shadow .2s}
.stat-card:hover{border-color:var(--border-strong);transform:translateY(-3px);
box-shadow:0 20px 54px -22px rgba(0,0,0,.65)}
.stat-card::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent,rgba(124,192,255,.55),transparent)}
.stat-icon{font-size:21px;opacity:.95;margin-bottom:16px;display:flex;align-items:center;
justify-content:center;width:40px;height:40px;border-radius:13px;
background:rgba(124,192,255,.1);border:1px solid rgba(124,192,255,.22);color:var(--accent-2);
box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.stat-card:nth-child(2) .stat-icon{background:rgba(185,173,141,.1);
border-color:rgba(185,173,141,.22);color:var(--cyan)}
.stat-card:nth-child(3) .stat-icon{background:rgba(201,145,31,.1);
border-color:rgba(201,145,31,.22);color:var(--purple)}
.stat-card:nth-child(4) .stat-icon{background:rgba(124,192,255,.1);
border-color:rgba(124,192,255,.22);color:var(--gold)}
.stat-card b{font-size:31px;font-weight:800;letter-spacing:-.5px;
font-variant-numeric:tabular-nums;color:var(--text)}
.stat-card b small{font-size:15px;font-weight:600;color:var(--text-faint)}
.stat-card > span:last-child{color:var(--text-faint);font-size:11.5px;letter-spacing:1.5px;
text-transform:uppercase;font-weight:600;margin-top:6px}
@media(max-width:720px){.dash-hero{flex-direction:column;align-items:flex-start}
.stat-grid{grid-template-columns:repeat(2,1fr)}}
/* ======================= builder (reference port) ====================
   Reference selectors and sizes. Steel greys remapped to Spectral's gold,
   and the glow/bloom effects dropped: no coloured box-shadow halos, no
   drop-shadow filter on the ring, no radial blooms. Flat surfaces only. */
@keyframes spin{to{transform:rotate(360deg)}}

.build-mod-card{max-width:720px;margin:0 auto}
.build-mod-card .card{padding:26px 28px}
.build-mod-icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
border-radius:9px;margin-right:8px;vertical-align:middle;color:var(--accent);
background:rgba(124,192,255,.10);border:1px solid rgba(124,192,255,.25)}
.build-mod-top{display:flex;gap:28px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.build-mod-left{flex:1;min-width:240px;max-width:400px}
.build-mod-right{flex-shrink:0;min-width:170px}

.version-static{display:flex;flex-direction:column;gap:6px;width:100%;
background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:11px;padding:11px 14px}
.version-static-row{display:flex;align-items:center;gap:8px}
.version-static-val{font-size:13.5px;font-weight:700;color:var(--text)}
.version-static-sub{font-size:11.5px;color:var(--text-faint)}
.version-latest-tag{font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;
color:var(--accent);background:rgba(124,192,255,.12);padding:2px 7px;border-radius:6px}

.pad-field{margin-top:16px}
.pad-hint{font-style:normal;font-weight:500;color:var(--text-faint);text-transform:none;letter-spacing:0}
.range-wrap{display:flex;align-items:center;gap:14px;margin-top:6px}
.range-slider{flex:1;-webkit-appearance:none;appearance:none;height:4px;
background:rgba(255,255,255,.08);border-radius:4px;outline:none;cursor:pointer}
.range-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;
border-radius:50%;background:var(--accent);border:2px solid rgba(255,255,255,.9);cursor:pointer;transition:transform .15s}
.range-slider::-webkit-slider-thumb:hover{transform:scale(1.15)}
.range-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent);
border:2px solid rgba(255,255,255,.9);cursor:pointer}
.range-val{min-width:44px;font-size:13px;font-weight:700;color:var(--accent-2);text-align:right;
font-family:var(--mono)}

.build-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.btn-block{width:100%}
.btn-spinner{display:inline-flex;align-items:center;justify-content:center}
.btn-spinner svg{animation:spin 1s linear infinite}

/* progress ring - no drop-shadow halo */
.progress-ring-wrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;
margin:20px auto 4px;width:150px}
.progress-ring{width:130px;height:130px;transform:rotate(-90deg)}
.progress-ring .ring-bg{fill:none;stroke:rgba(255,255,255,.08);stroke-width:12}
.progress-ring .ring-fill{fill:none;stroke:url(#ringGrad);stroke-width:12;stroke-linecap:round;
transition:stroke-dashoffset .35s ease;stroke-dasharray:327;stroke-dashoffset:327}
.ring-pct{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
font-family:var(--mono);font-size:22px;font-weight:800;color:var(--text)}
.build-status{margin-top:20px;font-size:14px;font-weight:600;color:var(--text-dim)}

/* tabs */
.build-tabs{display:flex;margin-top:24px;border-bottom:1px solid var(--border)}
.build-tab{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:13px 14px;cursor:pointer;background:transparent;border:0;color:var(--text-faint);
font-family:inherit;font-size:13.5px;font-weight:600;border-bottom:2px solid transparent;
transition:color .15s,background .15s}
.build-tab:hover{color:var(--text);background:rgba(255,255,255,.03)}
.build-tab.active{color:var(--text);border-bottom-color:var(--accent);background:rgba(124,192,255,.06)}
.build-tab-pane{display:none;padding-top:20px}
.build-tab-pane.active{display:block}
.build-tab-pane .muted{margin-bottom:14px}

/* branding */
.branding-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.branding-ico{flex-shrink:0;width:38px;height:38px;border-radius:11px;display:flex;
align-items:center;justify-content:center;color:var(--accent);
background:rgba(124,192,255,.10);border:1px solid rgba(124,192,255,.25)}
.branding-head h4{font-size:16px;margin:0 0 3px;color:var(--text)}
.branding-head .muted{font-size:12.5px;margin:0}
.branding-layout{display:flex;flex-direction:column;gap:16px}
.branding-form{display:flex;flex-direction:column;gap:14px}
.branding-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.branding-icon-row{display:flex;align-items:center;gap:12px}
.branding-icon-preview{width:52px;height:52px;border-radius:12px;overflow:hidden;display:flex;
align-items:center;justify-content:center;background:rgba(255,255,255,.04);
border:1px solid var(--border);color:var(--text-faint)}
.branding-icon-preview img{width:100%;height:100%;object-fit:cover}
@media(max-width:640px){.branding-row{grid-template-columns:1fr}}

/* inject pane - no glow halo, no bloom */
.inject-hint{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:10px;
background:rgba(255,255,255,.03);border:1px solid var(--border);font-size:13px;line-height:1.5;
color:var(--text-dim)}
.inject-hint b{color:var(--text)}
.inject-hint-ico{flex-shrink:0;color:var(--accent);display:inline-flex;margin-top:1px}
.inject-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;align-items:center}
.btn-upload{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;
width:100%;padding:34px 20px;border-radius:14px;font-family:inherit;font-size:15px;font-weight:700;
color:var(--text);cursor:pointer;background:transparent;border:1.5px dashed rgba(124,192,255,.45);
transition:border-color .2s,background .2s}
.btn-upload:hover{border-color:var(--accent);background:rgba(124,192,255,.05)}
.btn-upload:active{transform:scale(.99)}
.btn-upload svg{color:var(--accent);width:22px;height:22px}

.inject-progress{display:flex;align-items:center;gap:12px;margin-top:14px}
.inject-progress-track{flex:1;height:8px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.inject-progress-fill{height:100%;width:0%;border-radius:99px;
background:linear-gradient(90deg,#a8d8ff,#5b9fe0);transition:width .4s ease}
.inject-progress-pct{font-size:13px;font-weight:700;min-width:38px;text-align:right;color:var(--text)}

/* ===================== no-neon pass over the theme ===================
   Drops the coloured halos, drop-shadow filters and radial blooms so the
   surfaces read flat. Black depth shadows are kept - those are shading,
   not glow. */
.hit-pin{box-shadow:none}
.rmt-dot.on{box-shadow:none}
.rmt-item.active{box-shadow:inset 0 0 0 1px rgba(124,192,255,.25)}
.rmt-ico.on{box-shadow:none}
.user-avatar.lg{box-shadow:none}
.dash-hero::after{display:none}
.dash-hero::before,.card::before,.stat-card::before{background:rgba(255,255,255,.09)}
.dash-hero{background:var(--surface)}
.stat-card{background:var(--surface)}
.btn-upload::before{display:none}
/* ================= builder: tab bar + card cleanup ===================
   The earlier pill-shaped tab rules leak into this underline tab bar: their
   border-radius:999px survives, so the active tab's 2px bottom border curves
   up and reads as a box around the label. Resetting radius and border here
   (and matching the reference's underline tabs) is what removes it. */
.build-tabs .build-tab{
  border:0;border-radius:0;background:transparent;border-bottom:2px solid transparent;
  font-family:inherit;font-size:13.5px;font-weight:600;color:var(--text-faint);
  padding:13px 14px;cursor:pointer;
  transition:color .15s,background .15s,border-color .15s}
.build-tabs .build-tab:hover{color:var(--text);background:rgba(255,255,255,.03)}
.build-tabs .build-tab.active{color:var(--text);border:0;border-radius:0;
  border-bottom:2px solid var(--accent);background:rgba(124,192,255,.06)}
.build-tabs .build-tab:focus{outline:none}
.build-tabs .build-tab:focus-visible{outline:1px solid var(--line-hi);outline-offset:-2px}
.build-tabs .build-tab svg{width:14px;height:14px;flex:none}

/* cleaner card: roomier, and the form gets consistent rhythm */
.build-mod-card .card{padding:26px 28px 24px}
.build-mod-left{max-width:420px}
.build-mod-card .card-head{margin-bottom:22px;padding-bottom:16px;
  border-bottom:1px solid var(--border)}
.build-mod-card .card-head h3{display:flex;align-items:center;font-size:16px;margin:0}
.build-tab-pane{padding-top:22px}
.branding-form{gap:16px}
.branding-head{margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.branding-icon-row{gap:14px}
.build-actions{margin-top:22px}
.version-static{padding:12px 15px}
.pad-field{margin-top:18px}
.build-mod-card .field > span{font-size:11.5px;letter-spacing:.6px}
.build-mod-card .field{gap:7px}
.build-mod-card .input,
.build-mod-card input[type="text"],
.build-mod-card textarea{width:100%;box-sizing:border-box;font-family:inherit;font-size:13.5px;
  padding:10px 13px;border-radius:10px;background:var(--bg-input);
  border:1px solid var(--border);color:var(--text);outline:none}
.build-mod-card .input:focus,
.build-mod-card input[type="text"]:focus,
.build-mod-card textarea:focus{border-color:var(--accent)}
.build-mod-card textarea{resize:vertical;min-height:56px;line-height:1.5}
.build-mod-card .input::placeholder,
.build-mod-card input::placeholder,
.build-mod-card textarea::placeholder{color:var(--faint)}
@media(max-width:640px){.build-mod-card .card{padding:20px 18px 18px}}
/* ============================ performance ============================
   The theme stacks backdrop-filter on every panel, card, hero and stat tile.
   Several full-size GPU blur passes per page is what makes the whole site
   feel heavy, and it is invisible once the surfaces are opaque anyway. All
   of them become flat fills. */
.panel,.card,.dash-hero,.stat-card,.corner,.nav{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important}
.panel{background:#131316}
.card{background:#17171a}
.dash-hero,.stat-card{background:#17171a}

/* ======================== layout: breathing room =====================
   Both views were jammed against the top edge under the nav. */
#view-dashboard,#view-hits{padding-top:30px}
.view-head{margin-bottom:18px}
#view-dashboard .panel,#view-hits .panel{margin-top:0}

/* rounder boxes */
.card{border-radius:22px}
.panel{border-radius:20px}
.dash-hero{border-radius:24px}
.stat-card{border-radius:20px}
.build-mod-card .card{border-radius:22px}
.version-static,.build-mod-card .input,.build-mod-card textarea{border-radius:12px}
/* ============================== utility ==============================
   The forked views hide things with classList.toggle("hidden", ...) - the
   spinner, the padding progress bar, the ring, the inject bar. No .hidden
   rule existed, so nothing ever actually hid: the build spinner span
   permanently and bars showed from the start. */
.hidden{display:none!important}
/* ============================== toasts ==============================
   The forked build code reports through toast(). It is null-guarded, so
   without #toastWrap on the page every "Build started" / "Build failed"
   message was silently dropped and the button looked dead. */
.toast-wrap{position:fixed;right:18px;bottom:18px;z-index:4000;display:flex;
flex-direction:column;gap:9px;align-items:flex-end;pointer-events:none}
.toast{max-width:340px;padding:11px 15px;border-radius:12px;font-size:13px;
font-weight:600;color:var(--text);background:var(--surface-solid);
border:1px solid var(--border-strong);box-shadow:0 14px 34px rgba(0,0,0,.5)}
.toast.ok{border-color:rgba(124,192,255,.35)}
.toast.error{border-color:rgba(224,106,90,.45);color:#f0b0a4}

/* button variants the forked builder markup asks for */
.btn-ghost{background:transparent;border-color:transparent;color:var(--text-dim)}
.btn-ghost:hover:not(:disabled){color:var(--text);border-color:var(--border-strong);background:transparent}
.btn-sm{padding:7px 13px;font-size:12.5px;border-radius:9px}
/* ===================== builder: slider done properly =================
   -webkit-appearance:none strips the native track AND the thumb's sizing
   context. Styling only the thumb leaves it laid out against an unstyled
   track, which is why the handle sat at the far end of the bar while the
   readout said 0 KB. The runnable track has to be styled too, and the thumb
   given a negative margin to centre it on that track. */
.range-slider{-webkit-appearance:none;appearance:none;flex:1;width:100%;
  height:20px;background:transparent;outline:none;cursor:pointer;margin:0}
.range-slider::-webkit-slider-runnable-track{height:6px;border-radius:99px;
  background:rgba(255,255,255,.09);border:1px solid var(--line)}
.range-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:16px;height:16px;margin-top:-6px;border-radius:50%;
  background:var(--accent);border:2px solid #191610;cursor:pointer}
.range-slider::-webkit-slider-thumb:hover{background:var(--gold-hi)}
.range-slider::-moz-range-track{height:6px;border-radius:99px;
  background:rgba(255,255,255,.09);border:1px solid var(--line)}
.range-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;
  background:var(--accent);border:2px solid #191610;cursor:pointer}
.range-wrap{gap:12px}
.range-val{min-width:52px;font-family:var(--mono);color:var(--gold-text);font-size:12.5px}

/* tidier vertical rhythm: the ring column was forcing a tall gap under the
   Build button, so the two columns are balanced and the gap closed. */
.build-mod-top{gap:22px;align-items:center}
.build-mod-right{min-width:150px}
.progress-ring-wrap{margin:0 auto;gap:6px}
.progress-ring .ring-bg{stroke:rgba(255,255,255,.07)}
.build-status{margin-top:14px;font-size:12.5px;font-weight:500;text-align:center;
  color:var(--text-faint);max-width:150px}
.build-actions{margin-top:20px}
.build-tabs{margin-top:20px}
/* ============================== matte ================================
   Flat fills everywhere. The theme's buttons, tags, avatars, progress bar
   and the username were painted with linear-gradients, which is what made
   the boxes look glossy rather than matte. Gradients are removed and the
   solid token used instead; borders stay for definition. */
.btn.primary,.btn-primary{
  background:var(--gold);background-image:none;color:#06122b;
  border-color:#4d8ec7;font-weight:600}
.btn.primary:hover:not(:disabled),.btn-primary:hover{
  background:var(--gold-hi);background-image:none;border-color:var(--gold)}
.btn.primary:disabled{background:#242428;color:var(--faint)}

.version-latest-tag{background:var(--gold);background-image:none;color:#06122b}
.inject-progress-fill{background:var(--gold);background-image:none}

.user-avatar{background:#17171a;background-image:none;color:var(--gold-text);
  border:1px solid var(--line-hi)}
.user-avatar.lg{background:#17171a;background-image:none;color:var(--gold-text)}

.dash-username{background:none;-webkit-text-fill-color:currentColor;color:var(--text)}
.stat-card b{color:var(--gold-text)}

/* boxes: consistent matte surface + hairline, no gloss */
.card,.panel,.dash-hero,.stat-card{background-image:none}
.card{border:1px solid var(--line)}
.panel{border:1px solid var(--line)}
.version-static{background:#121215;border:1px solid var(--line)}
.build-mod-card .input,.build-mod-card input[type="text"],.build-mod-card textarea{
  background:#0f0e0a;border:1px solid var(--line)}
.build-tabs{border-bottom:1px solid var(--line)}
.r-pop{background:#17171a}
/* ============================ buttons ================================
   One coherent set. The base button had an 8px radius against 22px cards,
   no active state, no focus ring, and the primary still carried a glow
   halo from the theme. All squared away: matte fills, radius matched to
   the cards, a real pressed state, and a hairline focus ring. */
.btn{
  padding:10px 18px;font-size:13.5px;font-weight:500;line-height:1.2;gap:8px;
  border-radius:12px;border:1px solid var(--line);
  background:#17171a;background-image:none;color:var(--text);
  box-shadow:none;
  transition:background .14s var(--ease),border-color .14s var(--ease),
             color .14s var(--ease),transform .08s var(--ease)}
.btn:hover:not(:disabled){background:#1d1d21;border-color:var(--line-hi);color:#fff}
.btn:active:not(:disabled){transform:translateY(1px);background:#131316}
.btn:focus-visible{outline:2px solid var(--gold-dim);outline-offset:2px}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn svg{flex:none}

.btn.primary,.btn-primary{
  background:var(--gold);background-image:none;color:#06122b;
  border-color:var(--gold);font-weight:600;box-shadow:none}
.btn.primary:hover:not(:disabled),.btn-primary:hover{
  background:var(--gold-hi);border-color:var(--gold-hi);color:#06122b;box-shadow:none}
.btn.primary:active:not(:disabled),.btn-primary:active:not(:disabled){
  background:#4d8ec7;border-color:#4d8ec7}
.btn.primary:disabled,.btn-primary:disabled{
  background:#242428;border-color:#242428;color:var(--faint);opacity:1}

.btn.ghost,.btn-ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover:not(:disabled),.btn-ghost:hover:not(:disabled){
  background:#17171a;border-color:var(--line);color:var(--text)}
.btn.danger{background:#1d1412;border-color:#5a2f28;color:#e8927f}
.btn.danger:hover:not(:disabled){background:#261714;border-color:#7a4038}

.btn-sm{padding:8px 14px;font-size:12.5px;border-radius:10px}
.btn-block{width:100%;justify-content:center}

/* the Builder's primary action: the one button that should feel weighty */
#buildBtn{padding:13px 18px;font-size:14px;border-radius:14px;letter-spacing:.2px}
#buildBtn .btn-spinner svg{width:15px;height:15px}

/* ====================== builder tabs as a segmented ==================
   Reads as a proper control rather than bare labels, and matches the
   matte round boxes everywhere else. Still nothing highlighted until you
   pick one. */
.build-tabs{display:flex;gap:6px;margin-top:20px;padding:5px;
  border:1px solid var(--line);border-bottom:1px solid var(--line);
  border-radius:14px;background:#12100b}
.build-tabs .build-tab{flex:1;border:0;border-radius:10px;background:transparent;
  color:var(--muted);padding:11px 14px;font-weight:600;font-size:13px;
  font-family:inherit;cursor:pointer;
  transition:background .14s var(--ease),color .14s var(--ease)}
.build-tabs .build-tab:hover{background:#1a1711;color:var(--text)}
.build-tabs .build-tab.active{background:var(--gold);color:#06122b;border:0}
.build-tabs .build-tab.active svg{color:#06122b}
.build-tabs .build-tab:focus-visible{outline:2px solid var(--gold-dim);outline-offset:1px}

/* small tidy-ups */
.build-status{min-height:18px}
.progress-ring .ring-fill{stroke:var(--gold)}
.ring-pct{color:var(--gold-text)}
/* ========================= matte surfaces: one tone ==================
   Every box was a slightly different dark - panels darker than the cards
   they contain, hero and stat tiles different again - so the page read as
   patchy rather than matte. One surface tone for every box, one recessed
   tone for wells and inputs. */
.panel,.card,.dash-hero,.stat-card,.build-mod-card .card{background:#17171a;background-image:none}
.version-static,.version-static{background:#121215;background-image:none}
.build-tabs{background:#121215}
.build-mod-card .input,.build-mod-card input[type="text"],.build-mod-card textarea,
.field input,.field textarea{background:#0e0e11;background-image:none}
.r-pop{background:#17171a}
.toast-wrap .toast{background:#1a1712;background-image:none}
.nav{background:#131316}

/* ===================== badge + toast kinds the fork uses =============
   renderBuild() writes <span class="badge badge-error"> and the copied code
   toasts with kind "err"; neither existed, so failures rendered as plain
   unstyled text. */
.badge{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;padding:4px 10px;border-radius:99px;
  border:1px solid var(--line);color:var(--muted);background:#1a1712}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;
  background:currentColor;flex:none}
.badge-error{color:#e8927f;border-color:#5a2f28;background:#1d1412}
.badge-success{color:var(--gold-text);border-color:rgba(124,192,255,.3);background:#1a1710}
.toast.err{border-color:rgba(224,106,90,.45);color:#f0b0a4}
/* ===================== neutral theme for the boxes ===================
   The forked views were written against the reference's own palette, whose
   accent is STEEL (#8b949e) - not gold. Remapping --accent onto Spectral's
   gold is what turned every box, chip, ring and badge yellow. This restores
   the neutral palette for the dashboard shell only: matt.css is loaded by
   the dashboard/login-shell pages alone, so the login and marketing pages
   keep their own styling untouched. */

/* surfaces: neutral, not warm */
.panel,.card,.dash-hero,.stat-card,.build-mod-card .card,.r-pop,.toast{background:#131316}
.version-static,.build-tabs,.toast-wrap .toast{background:#121215}
.build-mod-card .input,.build-mod-card input[type="text"],.build-mod-card textarea,
.field input,.field textarea{background:#0e0e11}
.nav{background:#131316}
.panel,.card,.dash-hero,.stat-card,.version-static,.build-tabs{
  border-color:rgba(255,255,255,.08)}

/* primary action: brushed steel, not a gold bar */
.btn.primary,.btn-primary{
  background:#c9d1d9;background-image:none;border-color:#c9d1d9;color:#141416}
.btn.primary:hover:not(:disabled),.btn-primary:hover{
  background:#e2e7ec;border-color:#e2e7ec;color:#141416}
.btn.primary:active:not(:disabled),.btn-primary:active:not(:disabled){
  background:#aab2bd;border-color:#aab2bd}
.btn.primary:disabled,.btn-primary:disabled{
  background:#232326;border-color:#232326;color:#6f6f75}

/* the rest of the yellow, element by element */
.version-latest-tag{background:#2a2a30;color:#e2e7ec}
.build-tabs .build-tab.active{background:#2c2c33;color:#fff}
.build-tabs .build-tab.active svg{color:#e2e7ec}
.build-tabs .build-tab:hover{background:#232326;color:#fff}

.build-mod-icon,.branding-ico,.stat-icon{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#c9d1d9}
.stat-card:nth-child(2) .stat-icon,.stat-card:nth-child(3) .stat-icon,
.stat-card:nth-child(4) .stat-icon{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#c9d1d9}
.stat-card b{color:#e6e6ea}
.stat-card > span:last-child{color:#7b7b82}
.stat-card::before,.card::before,.dash-hero::before{background:rgba(255,255,255,.07)}

.dash-role{background:#22222a;border-color:#33333c;color:#c9d1d9}
.user-avatar{background:#212127;background-image:none;border-color:#33333c;color:#c9d1d9}
.user-avatar.lg{background:#22252c;background-image:none;color:#dfe4ea}
.dash-username{background:none;-webkit-text-fill-color:currentColor;color:#ececee}
.dash-greeting,.dash-since{color:#7b7b82}

.progress-ring .ring-fill{stroke:#8b949e;filter:none}
.progress-ring .ring-bg{stroke:rgba(255,255,255,.08)}
.ring-pct{color:#c9d1d9}
.range-slider::-webkit-slider-thumb{background:#c9d1d9;border-color:#131316}
.range-slider::-moz-range-thumb{background:#c9d1d9;border-color:#131316}
.range-val{color:#c9d1d9}
.inject-progress-fill{background:#8b949e}

.badge,.badge-success{color:#c9d1d9;border-color:#33333c;background:#121215}
.badge-error{color:#e8927f;border-color:#5a2f28;background:#1d1414}
.toast.ok{border-color:#33333c}
.rmt-dot.on{background:#8b949e;box-shadow:none}
.rmt-ico.on{color:#e2e7ec;border-color:#33333c;background:rgba(255,255,255,.06)}
.rmt-item.active{border-color:#3a3a42;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.01))}
.build-mod-card .input:focus,.build-mod-card input:focus,.build-mod-card textarea:focus{
  border-color:#4a4a55}
.btn:focus-visible{outline-color:#4a4a55}
/* ===================== dashboard: fit the viewport ===================
   It was taller than the screen on every reasonable window: 30px of top
   padding, a 30px-padded hero, 22px stat cards and a map pinned at
   calc(100vh - 540px). The view is now a flex column sized to the viewport,
   the map absorbs whatever is left, and the hero/cards are tightened. No
   scrolling at any height, because the map takes the remainder rather than
   a fixed guess. */
/* display is set ONLY on .active. Putting display:flex on the bare id gave it
   (1,0,0) specificity, which outranked .view{display:none} (0,1,0) - so the
   dashboard also rendered on /hits, /builder and /remote, stacked above the
   real view. Layout stays on the id; visibility is gated on .active. */
#view-dashboard{height:calc(100vh - var(--nav-h) - 30px);min-height:0;padding-top:18px;padding-bottom:16px}
#view-dashboard.active{display:flex;flex-direction:column}

#view-dashboard .dash-hero{flex:none;padding:15px 20px;margin-bottom:12px;border-radius:20px}
#view-dashboard .dash-user{gap:14px}
#view-dashboard .user-avatar.lg{width:44px;height:44px;font-size:19px;border-radius:13px}
#view-dashboard .dash-username{font-size:19px}
#view-dashboard .dash-greeting{font-size:10.5px;letter-spacing:1.6px}
#view-dashboard .dash-since{font-size:11px;margin-top:2px}
#view-dashboard .dash-role{font-size:9.5px;padding:2px 9px;margin-top:4px}

#view-dashboard .stat-grid{flex:none;gap:12px;margin-bottom:12px;
  grid-template-columns:repeat(4,minmax(0,1fr))}
#view-dashboard .stat-card{padding:14px 12px;border-radius:18px}
#view-dashboard .stat-icon{width:34px;height:34px;margin-bottom:9px;border-radius:11px}
#view-dashboard .stat-icon svg{width:17px;height:17px}
#view-dashboard .stat-card b{font-size:23px}
#view-dashboard .stat-card > span:last-child{font-size:10px;letter-spacing:1px;margin-top:4px}

/* the map card takes all remaining height */
#view-dashboard > .card{
  flex:1;min-height:0;display:flex;flex-direction:column;
  margin-bottom:0!important;padding:16px 18px 14px}
#view-dashboard > .card .card-head{flex:none;margin-bottom:10px}
#view-dashboard > .card .card-head h3{font-size:13.5px}
#view-dashboard .map-wrap{flex:1;min-height:0;padding:0;display:flex}
#view-dashboard #hitMap.hit-map{flex:1;height:100%;min-height:180px;border-radius:12px}

@media(max-width:900px){
  #view-dashboard{height:auto}
  #view-dashboard .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #view-dashboard #hitMap.hit-map{min-height:260px}
}
/* ========================= nav bar: neutral pill =====================
   The sliding pill was a warm brown (rgba(30,30,33,.8)) outlined in
   --line-hi, which is also warm - on the now-neutral bar that read as a
   yellow-brown smear. Neutral fill, neutral hairline. The transition is
   left to the stylesheet; moveNavIndicator() switches it off for the first
   paint and while resizing, where animating was wrong. */
.nav-ind{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.nav a.active{color:#fff}
.nav{box-shadow:0 12px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05)}
.nav a:focus-visible{outline-color:#4a4a55}
.nav-cta:hover{box-shadow:0 7px 20px rgba(0,0,0,.45)}
/* ===================== sidebar on the left, not a pill ===============
   The nav was a floating bottom pill (fixed, left:50%, translateX(-50%),
   pill radius). It becomes a full-height left rail: the same markup and the
   same active-link logic, laid out as a column. --nav-h drops to 0 so the
   dashboard's viewport fit gets the full height back, and --nav-w reserves
   the gutter the content must clear. */
:root{--nav-w:230px;--nav-h:0px}

.nav{
  position:fixed;left:0;top:0;bottom:0;right:auto;
  width:var(--nav-w);max-width:none;
  transform:none;
  flex-direction:column;align-items:stretch;
  gap:3px;padding:18px 12px 16px;
  border:0;border-right:1px solid rgba(255,255,255,.08);
  border-radius:0;background:#111113;box-shadow:none;
  overflow-y:auto;overflow-x:hidden;z-index:40}
.nav::-webkit-scrollbar{width:0}

.nav-brand{padding:2px 8px 16px;gap:10px}
.nav-word{font-size:15.5px}

.nav a{
  display:block;text-align:left;white-space:normal;
  padding:10px 12px;border-radius:10px;font-size:13.5px;
  border:1px solid transparent;color:var(--muted)}
.nav a:hover{background:rgba(255,255,255,.04);color:#fff}
.nav a.active{color:#fff}

/* the indicator becomes a band spanning the rail and sliding vertically */
.nav-ind{
  left:0;right:0;width:auto;top:0;height:40px;
  border-radius:10px;
  background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  transition:transform .3s var(--ease), height .3s var(--ease),
             opacity .2s var(--ease), width .3s var(--ease)}

/* logout sits at the foot of the rail, full width and neutral */
.nav-cta{
  margin:auto 0 0;justify-content:center;width:100%;
  border-radius:10px;padding:11px 14px;
  background:#1b1b1f;background-image:none;
  border-color:rgba(255,255,255,.1);color:var(--muted);
  box-shadow:none;font-weight:600}
.nav-cta:hover{background:#232328;color:#fff;transform:none;
  filter:none;box-shadow:none}
.nav-cta:hover svg{transform:none}
.nav-cta:active{transform:none;box-shadow:none}

/* clear the rail */
.wrap{margin:0 0 0 var(--nav-w);max-width:none;padding:0 26px}

@media(max-width:760px){
  :root{--nav-w:0px;--nav-h:60px}
  .nav{flex-direction:row;align-items:center;gap:2px;
    left:0;right:0;top:auto;bottom:0;width:auto;
    border-right:0;border-top:1px solid rgba(255,255,255,.08);
    padding:7px 10px;overflow-x:auto;overflow-y:hidden}
  .nav-brand{padding:0 10px 0 2px}
  .nav a{padding:9px 12px;border-radius:999px}
  .nav-ind{left:0;top:7px;height:calc(100% - 14px);right:auto;
    width:0;border-radius:999px}
  .nav-cta{margin:0 0 0 6px;width:auto;border-radius:999px}
  .wrap{margin:0;padding:0 16px 96px}
}
/* ======================= sidebar polish: icons + sections ============
   A flat list of five labels reads as a menu of words; grouping it and
   giving each entry an icon makes it scannable. Section labels are quiet
   and non-interactive so they never look clickable. */
.nav-cat{
  display:block;padding:16px 12px 6px;
  font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  color:#5c5c64;pointer-events:none;user-select:none}
.nav-cat:first-of-type{padding-top:6px}

.nav a{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:10px;
  font-size:13.5px;font-weight:500;color:var(--muted);
  border:1px solid transparent}
.nav a > svg{
  width:17px;height:17px;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  opacity:.72;transition:opacity .15s var(--ease)}
.nav a > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav a:hover{background:rgba(255,255,255,.045);color:#fff}
.nav a:hover > svg{opacity:1}
.nav a.active{color:#fff}
.nav a.active > svg{opacity:1}

/* brand gets a hairline so the rail has a header */
.nav-brand{padding:4px 10px 14px;margin-bottom:2px;gap:10px;
  border-bottom:1px solid rgba(255,255,255,.07)}
.nav-logo{width:28px;height:28px}
.nav-word{font-size:15px;letter-spacing:-.01em}

@media(max-width:760px){
  .nav-cat{display:none}
  .nav a{gap:0;padding:9px 12px;border-radius:999px}
  .nav a > svg{display:none}
  .nav-brand{border-bottom:0;padding:0 10px 0 2px;margin:0}
  .nav-word{display:none}
}
/* ========================== rail refinement ==========================
   No section labels - just five icon rows with one consistent rhythm.
   Tighter rail, calmer hover, a hairline separating the account action
   from the navigation, and an active band that reads as a soft inset
   rather than a flat rectangle. */
:root{--nav-w:214px}

.nav{gap:2px;padding:16px 10px 14px}
.nav-cat{display:none}

.nav-brand{padding:2px 8px 14px;margin-bottom:10px;gap:10px;
  border-bottom:1px solid rgba(255,255,255,.07)}
.nav-logo{width:30px;height:30px;border-radius:9px}
.nav-word{font-size:15.5px;font-weight:700;letter-spacing:-.015em}

.nav a{
  display:flex;align-items:center;gap:11px;
  padding:10px 11px;border-radius:10px;
  font-size:13.5px;font-weight:500;color:var(--muted);
  border:1px solid transparent;
  transition:background .15s var(--ease),color .15s var(--ease)}
.nav a > svg{
  width:17px;height:17px;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  opacity:.8;transition:opacity .15s var(--ease),transform .15s var(--ease)}
.nav a:hover{background:rgba(255,255,255,.05);color:#fff}
.nav a:hover > svg{opacity:1;transform:translateX(1px)}
.nav a.active{color:#fff}
.nav a.active > svg{opacity:1}

/* the sliding band: soft inset, sits under the label */
.nav-ind{
  left:8px;right:8px;width:auto;top:0;height:40px;border-radius:10px;
  background:rgba(255,255,255,.075);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.13)}

/* account action separated from the navigation */
.nav-cta{margin:auto 0 0;position:relative;justify-content:flex-start;
  gap:9px;width:100%;padding:10px 11px;border-radius:10px;
  background:transparent;background-image:none;border-color:transparent;
  color:var(--muted);box-shadow:none;font-weight:600;font-size:13.5px}
.nav-cta::before{content:"";position:absolute;left:2px;right:2px;top:-9px;
  height:1px;background:rgba(255,255,255,.08)}
.nav-cta:hover{background:rgba(255,255,255,.05);color:#fff;transform:none;
  filter:none;box-shadow:none;border-color:transparent}
.nav-cta:hover svg{transform:none}
.nav-cta:active{transform:none;box-shadow:none}
.nav-cta svg{width:17px;height:17px;opacity:.8}

@media(max-width:760px){
  :root{--nav-w:0px}
  .nav-ind{left:0;top:7px;height:calc(100% - 14px);right:auto;width:0;border-radius:999px}
  .nav-cta{width:auto;margin:0 0 0 6px;border-radius:999px;
    justify-content:center;gap:8px}
  .nav-cta::before{display:none}
  .nav a > svg{display:none}
  .nav a{gap:0;padding:9px 12px;border-radius:999px}
}
/* ==================== sessions: an obvious sign-out ==================
   The per-device control existed all along, but as a 30x30 transparent
   icon at --faint it read as decoration. It is now a labelled button, and
   the "this device" row keeps a neutral marker instead of a gold stripe. */
.sess-x{
  display:inline-flex;align-items:center;gap:7px;
  width:auto;height:32px;padding:0 12px;flex:0 0 auto;
  border-radius:9px;border:1px solid rgba(255,255,255,.13);
  background:rgba(255,255,255,.04);color:var(--muted);
  font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
  transition:background .14s var(--ease),border-color .14s var(--ease),
             color .14s var(--ease),transform .1s var(--ease)}
.sess-x svg{width:13px;height:13px;flex:none;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round}
.sess-x-label{white-space:nowrap}
.sess-x:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.24);color:#fff}
.sess-x:active{transform:translateY(1px)}
.sess-x:disabled{opacity:.45;cursor:default;transform:none;background:rgba(255,255,255,.03)}

.session-current{border-color:rgba(255,255,255,.16);
  background:rgba(255,255,255,.04);box-shadow:inset 2px 0 0 #8b949e}
.session{background:rgba(255,255,255,.02);border-color:rgba(255,255,255,.07)}
.session:hover{border-color:rgba(255,255,255,.14)}

@media(max-width:640px){
  .sess-x-label{display:none}
  .sess-x{padding:0 10px}
}
/* ================= session row: an X at the end =====================
   Back to a plain icon button, but a visible one - bordered, pinned to the
   far right of the row, and turning red on hover so it reads as a sign-out
   rather than decoration. `.sess-main` already flexes, so the X lands at
   the row's right edge. */
.sess-x{
  display:grid;place-items:center;
  width:30px;height:30px;padding:0;flex:0 0 auto;
  margin-left:auto;
  border-radius:9px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);color:var(--muted);cursor:pointer;
  transition:background .14s var(--ease),border-color .14s var(--ease),
             color .14s var(--ease),transform .1s var(--ease)}
.sess-x svg{width:14px;height:14px;flex:none;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round}
.sess-x:hover{background:rgba(224,106,90,.13);border-color:rgba(224,106,90,.45);color:#f0a99b}
.sess-x:active{transform:translateY(1px)}
.sess-x:disabled{opacity:.42;cursor:default;transform:none}

/* no longer needed now the button is icon-only */
.sess-x-label{display:none}
/* ============================== logo ================================
   The mark is now a transparent PNG (white background removed), not a
   square avatar, so the circular frame and dark backing it used to sit on
   are dropped and it is letterboxed to fit its own aspect ratio. */
.nav-logo{width:30px;height:30px;object-fit:contain;border:0;background:none;
  border-radius:0;image-rendering:auto}
.nav-brand{gap:9px}
.wordmark{color:var(--gold)}
/* ============================ nav logo size ==========================
   The mark is 510x442, so in a square box object-fit:contain sizes it by
   height and it renders narrower than its box. Bumping the box up makes it
   read properly next to the wordmark without changing the mark itself. */
.nav-logo{width:42px;height:42px}
.nav-brand{gap:10px;padding:2px 8px 16px}
.nav-word{font-size:16px}
/* the login/corner badge is a different context - a small nudge only */
.corner-logo{width:24px;height:24px}

/* Last word on the logo. An earlier rule in this file (the transparent-mark
   block) sets image-rendering:auto, which overrode the theme's pixelated and
   left the browser smoothing the pixel art. This sits after it and wins. */
.nav-logo{image-rendering:pixelated;width:42px;height:42px}
.corner-logo,.brand-logo,.logo{image-rendering:pixelated}

/* ============================== reverted =============================
   The logo size bump is undone - back to the 30px it was.

   image-rendering:pixelated stays. That was not part of the resize: it fixes
   an earlier rule of mine that set image-rendering:auto and left the browser
   smoothing the pixel art. Dropping it would re-introduce the blur. */
.nav-logo{image-rendering:pixelated;width:30px;height:30px}
.nav-word{font-size:15px}
/* The mark and the wordmark sit ON the top bar's centreline.
   The padding here used to be 2px top against 14px bottom, which is a sidebar
   header's shape (it wants to sit above a hairline) and is exactly why the
   logo rode high and the text fell below the line. Top and bottom are equal
   now, so align-items:center has nothing to fight. The vertical rail keeps its
   own asymmetric padding in the rules above. */
.nav-brand{gap:9px;padding:4px 8px}
/* Optical correction, set by eye from a screenshot rather than measured.
   Both bounding-box methods and the raw alpha counts disagreed about this
   image: the pickaxe reads as sitting well left of centre, but the canvas
   really does have opaque pixels edge to edge (scattered pixel sparkles), so
   there is no transparent slack to trim and bbox centring cannot help. The
   mark's visual mass simply sits left, so it is nudged right to match the
   wordmark's optical centre. */
.nav-brand{gap:13px;padding:4px 8px}
.nav-logo{transform:translate(9px,1px)}
.nav-word{line-height:1}
/* The locked Remote tab. It is inert, not merely styled: the href is kept for
   menu semantics but the click guard in dashboard.js preventDefaults it, and
   /remote shows the upsell then bounces to /dashboard. Dimmed and
   non-interactive so it reads as unavailable without being removed. */
.nav-locked,
.nav a.nav-locked {
  opacity: .58;
  cursor: not-allowed;
  pointer-events: auto;
  color: var(--muted);
}
.nav a.nav-locked:hover {
  background: none;
  color: var(--muted);
}
/* opacity only, so these cannot interfere with the social icons' fill. */
.nav a.nav-locked > svg { opacity: .7; }
.nav a.nav-locked:hover > svg { opacity: .7; }
/* The padlock is the part that communicates the lock, so it holds full
   strength against the row's dimming. */
.nav a.nav-locked .nav-lock { opacity: 1; }
/* On the mobile row the section icons are hidden, but the lock is the whole
   point of this row, so it stays. */
@media(max-width:760px){
  .nav a.nav-locked .nav-lock { display: flex; }
  .nav-lock svg { width: 14px; height: 14px; }
}

/* The padlock sits immediately to the RIGHT of the "Remote" label, not pinned
   to the far edge of the row - margin-left:auto would push it to the rail's
   right border, which reads as a separate control rather than as part of the
   word. A small fixed gap keeps it attached to the text.
   It is a <span>, not a control: the row is already inert, so there is nothing
   to click and nothing to focus. */
.nav-lock {
  margin-left: auto;
  display: flex;
  align-items: center;
  color: var(--muted);
  opacity: 1;
  pointer-events: none;
}
.nav-lock svg {
  width: 14px;
  height: 14px;
  flex: none;
  /* The nav's icon styling is `.nav a > svg` - a DIRECT CHILD selector. The
     padlock sits inside this span, so it never matched that rule and inherited
     nothing: no fill:none, no stroke, no stroke-width. An SVG with no fill set
     fills with the default BLACK, which is why it rendered as a solid blob
     instead of an outlined lock. These are the same values as `.nav a > svg`
     so the two icons finally look like siblings. */
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --------------------------- account card ---------------------------
   Avatar, name and rank, at the foot of the rail above the Log out row. The
   gap above it is owned by .nav-foot's margin-top:auto, so this card rides up
   with the footer rather than floating in the middle of the nav. */
.nav-me {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 9px 8px;
  /* margin-top:auto is what pins this card AND everything after it to the foot
     of the rail. It used to be on .nav-foot, which pushed only the Log out row
     down and left this card stranded in the middle of the nav with the gap
     beneath it. The auto margin has to be on the FIRST element of the group. */
  margin-top: auto;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.028);
}

.nav-me-av {
  position: relative;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Muted grey, matching the footer's social marks: a dark disc with a light
     glyph, the same two-tone the Telegram mark uses. Replaces the blue
     gradient - the rail reads calmer without a second colour in it. */
  background: #3d3d3d;
  color: #9c9c9c;
  font-weight: 700;
  font-size: 13px;
}
.nav-me-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nav-me-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.nav-me-name {
  font-size: 13px;
  font-weight: 650;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-me-tier {
  align-self: flex-start;
  margin-top: 3px;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--muted);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.08);
}
/* Paid ranks pick up the accent so Member and Buyer are distinguishable at a
   glance rather than by reading the word. */
.nav-me-tier[data-tier="premium"],
.nav-me-tier[data-tier="buyer"],
.nav-me-tier[data-tier="lifetime"] {
  color: #06122b;
  background: linear-gradient(180deg, #9ccfff, #5b9fe0);
  border-color: var(--gold-dim);
}
.nav-me-tier[data-tier="admin"],
.nav-me-tier[data-tier="owner"] {
  color: #2a1408;
  background: linear-gradient(180deg, #ffd9a8, #e8a35c);
  border-color: #c9832f;
}

@media(max-width:760px){
  .nav-me { display: none; }
}

/* ------------------------- community links -------------------------
   Log out plus the Discord and Telegram buttons, in one row at the foot of the
   rail. .nav-cta still carries margin:auto 0 0 so the whole row is pushed to
   the bottom; the button no longer does that on its own. */
.nav-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  /* No margin-top:auto here - .nav-me owns it now, and a second auto on the
     footer would split the free space between the two. */
  padding-top: 10px;
  position: relative;
}
/* The hairline that separates the account row from the nav. It used to hang
   off .nav-cta, but Log out is only part of the row now, so the separator
   would have spanned the button instead of the rail. Moved to the row. */
.nav-foot::before {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 0;
  height: 1px;
  background: rgba(255,255,255,.08);
}
.nav-foot .nav-cta {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
/* The old separator is redundant on the button itself. */
.nav-foot .nav-cta::before { display: none; }

/* Icon-only buttons. The marks are the official ones, but they are drawn in
   muted greys rather than brand colours: bright blurple and sky-blue read as
   noise next to the rail's accent, while the greys keep the pair as quiet as
   the rest of the footer. The Telegram mark keeps its two tones - dark disc,
   lighter plane - which is what makes it read as a mark rather than a blob. */
.nav-soc {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.1);
  background: #1b1b1f;
  text-decoration: none;
  transition: background .14s var(--ease), border-color .14s var(--ease),
              transform .14s var(--ease);
}
.nav-soc:hover {
  background: #232328;
  border-color: rgba(255,255,255,.16);
}
.nav-soc:active { transform: translateY(1px); }

/* fill, not stroke: both marks are solid shapes.
   These anchors are matched by `.nav a > svg`, which sets fill:none + a 1.8px
   stroke - that is what drew the logos as hollow outlines instead of the real
   brand marks.

   fill and stroke are !important on purpose. Out-specifying the nav's icon
   rules is a losing game: `.nav a > svg` is (0,1,2), its :hover/.active forms
   are (0,2,2), and `.nav a.nav-locked:hover > svg` is (0,3,2) - so class
   stacking tops out at three classes and the locked-row rule still wins. Two
   declarations with !important end it, and they can only ever affect the two
   social icons, which is the whole intent. */
.nav .nav-foot .nav-soc svg {
  width: 19px;
  height: 19px;
  flex: none;
  fill: currentColor !important;
  stroke: none !important;
}
.nav-soc[href$="discord"]  { color: #5f5f5f; }
.nav-soc[href$="telegram"] { color: #9c9c9c; }
.nav-soc[href$="discord"]:hover  { color: #8f8f8f; }
.nav-soc[href$="telegram"]:hover { color: #c4c4c4; }
/* The Telegram mark is two shapes, so the disc sits darker than the plane -
   that two-tone is what makes it read as Telegram at a glance. */
.nav .nav-foot .nav-soc[href$="telegram"] .tg-disc { fill: #3d3d3d !important; }
.nav .nav-foot .nav-soc[href$="telegram"]:hover .tg-disc { fill: #4a4a4a !important; }

/* On the mobile row the whole rail is a bar; keep the two buttons from
   stretching and drop the Log out label's growth. */
@media(max-width:760px){
  .nav-foot { margin: 0 0 0 6px; padding-top: 0; }
  .nav-foot .nav-cta { flex: 0 0 auto; }
}
.corner-logo{width:20px;height:20px;image-rendering:pixelated}

/* a display name that edits on click */
.acct-name-edit{cursor:text;border-radius:7px;padding:1px 5px;margin-left:-5px;
  transition:background .13s var(--ease),box-shadow .13s var(--ease)}
.acct-name-edit:hover{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--line)}
.acct-name-input{font:inherit;font-weight:inherit;color:inherit;background:#0d0d10;
  border:1px solid var(--gold);border-radius:7px;padding:1px 5px;outline:none;
  width:12ch;max-width:100%}

/* ===================== builder: progress + polish ====================
   The ring now reflects the real build, so the status line says which stage
   it is in rather than a bare percentage, and the ring itself is given a
   little more presence. */
.progress-ring-wrap{width:160px;gap:10px;margin:4px auto 0}
.progress-ring{width:146px;height:146px}
.progress-ring .ring-bg{stroke:rgba(255,255,255,.07)}
.progress-ring .ring-fill{stroke:var(--gold);filter:none}
.ring-pct{font-size:26px;font-weight:700;color:var(--gold-hi);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* the phase caption under the ring */
.build-status{margin-top:12px;font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);text-align:center;max-width:170px}
.build-status .muted{color:var(--faint);font-size:11px;letter-spacing:.08em}

/* keep the two columns aligned now the ring is taller */
.build-mod-top{align-items:center;gap:26px}
.build-mod-right{min-width:170px}
.build-mod-left{max-width:440px}

/* the Build button reads as the primary action */
.build-actions{margin-top:18px}
#buildBtn{letter-spacing:.2px}

/* =========================== hits table =============================
   The Host cell stacks the account over the machine name, the IP carries its
   country flag, and each row ends with a favourite star and its actions.
   Sized to match the existing table cells rather than introducing a new scale. */

.hit-host{font-weight:600;color:var(--text)}
.hit-sub{font-size:11.5px;color:var(--faint);margin-top:2px}

.fav-btn{
  width:30px;height:30px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid transparent;border-radius:9px;
  color:var(--faint);cursor:pointer;
  transition:color .13s var(--ease),background .13s var(--ease),border-color .13s var(--ease);
}
.fav-btn svg{width:16px;height:16px}
.fav-btn:hover{color:var(--text);background:rgba(255,255,255,.05);border-color:var(--line)}
.fav-btn.on{color:var(--gold)}
.fav-btn.on svg{fill:currentColor}
.fav-btn:focus-visible{outline:2px solid var(--gold-dim);outline-offset:2px}
.fav-btn:disabled{opacity:.5;cursor:default}

.row-actions{white-space:nowrap}
.row-actions .btn + .btn{margin-left:6px}

/* Smaller hits search + a refresh control ---------------------------------
   The search was 250px and read as a form field; at 170px it sits beside the
   tabs as a filter. Refresh re-reads the list, since nothing polls it. */
.hit-search{width:170px;font-size:11.5px;padding:5px 9px}

.hit-refresh{
  width:28px;height:28px;padding:0;margin-left:6px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--line);border-radius:9px;
  color:var(--faint);cursor:pointer;
  transition:color .13s var(--ease),background .13s var(--ease),border-color .13s var(--ease);
}
.hit-refresh svg{width:15px;height:15px}
.hit-refresh:hover{color:var(--text);background:rgba(255,255,255,.05);border-color:var(--line-hi)}
.hit-refresh:focus-visible{outline:2px solid var(--gold-dim);outline-offset:2px}
.hit-refresh:disabled{opacity:.5;cursor:default}
.hit-refresh.spin svg{animation:hit-spin .7s linear infinite}
@keyframes hit-spin{to{transform:rotate(360deg)}}

/* ============================ builder polish =============================
   Three things this fixes: the Build heading sat flush against the top edge,
   the padding slider was a hairline with its value floating off to the side,
   and the progress ring used the reference panel's blue rather than this
   theme's accent. */

#view-builder .view-title{margin-top:14px}

.build-mod-card .card{padding:28px 30px 26px}
.build-mod-top{gap:30px;align-items:center}
.build-mod-left{max-width:440px}
.pad-field{margin-top:22px}
.range-wrap{gap:12px;margin-top:9px}
.pad-hint{color:var(--faint)}

/* --- padding slider: filled up to the thumb --------------------------- */
.range-slider{
  -webkit-appearance:none;appearance:none;flex:1;width:100%;height:6px;
  border-radius:999px;cursor:pointer;
  background:linear-gradient(90deg,
    var(--gold) 0 var(--fill, 0%),
    rgba(255,255,255,.10) var(--fill, 0%) 100%);
}
.range-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--gold);border:2px solid #131316;
  box-shadow:0 1px 5px rgba(0,0,0,.55);
  transition:transform .12s var(--ease),background .12s var(--ease);
}
.range-slider::-webkit-slider-thumb:hover{transform:scale(1.14);background:var(--gold-hi)}
.range-slider::-moz-range-track{height:6px;border-radius:999px;background:rgba(255,255,255,.10)}
.range-slider::-moz-range-progress{height:6px;border-radius:999px;background:var(--gold)}
.range-slider::-moz-range-thumb{
  width:18px;height:18px;border:2px solid #131316;border-radius:50%;
  background:var(--gold);box-shadow:0 1px 5px rgba(0,0,0,.55);
}

.range-val{
  min-width:64px;padding:3px 10px;border-radius:999px;text-align:center;
  font-family:var(--mono);font-size:12px;font-weight:600;color:var(--gold-text);
  background:rgba(124,192,255,.10);border:1px solid rgba(124,192,255,.22);
}

/* --- progress ring ---------------------------------------------------- */
.progress-ring-wrap{width:158px;gap:10px;margin:0 auto}
.progress-ring{width:144px;height:144px}
.progress-ring .ring-bg{stroke:rgba(255,255,255,.07);stroke-width:11}
.progress-ring .ring-fill{stroke:url(#ringGrad);stroke-width:11;filter:none}
.ring-pct{font-size:25px;font-weight:700;color:var(--gold-hi);letter-spacing:-.01em}

/* =====================================================================
   Final polish — Hits + Builder
   ---------------------------------------------------------------------
   This section deliberately sits LAST in the file so it settles the stacked
   override layers above (the steel/neutral pass around line 1860 and the
   builder pass around 2548). Nothing should be appended after it without
   checking these rules first.
   ===================================================================== */

/* ------------------------------ hits: head --------------------------- */
#hitCount{
  padding:2px 10px;border:1px solid rgba(255,255,255,.09);border-radius:999px;
  background:rgba(255,255,255,.03);color:var(--muted);font-size:11.5px;
}

/* ------------------------------ hits: rows --------------------------- */
.hit-cell{display:flex;align-items:center;gap:11px;min-width:0}
.hit-av{
  flex:0 0 auto;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  background:#1a1a1f;border:1px solid rgba(255,255,255,.08);
  color:var(--gold-hi);font-size:13px;font-weight:700;text-transform:uppercase;
}
.hit-meta{min-width:0}
.hit-host{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.sess-flag{vertical-align:middle;margin-right:2px}
.hit-ip{vertical-align:middle}
.hit-geo{
  display:inline-block;vertical-align:middle;margin-left:8px;
  padding:1px 8px;border-radius:999px;font-size:10.5px;letter-spacing:.05em;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  color:var(--muted);
}

tbody tr:hover{background:rgba(255,255,255,.025)}

/* --------------------------- hits: actions --------------------------- */
thead th:last-child{text-align:right}
.row-actions{white-space:nowrap;text-align:right}
.icon-btn{
  width:30px;height:30px;padding:0;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid transparent;border-radius:9px;color:var(--faint);
  cursor:pointer;
  transition:color .13s var(--ease),background .13s var(--ease),border-color .13s var(--ease);
}
.icon-btn svg{width:15.5px;height:15.5px}
.icon-btn:hover{color:var(--text);background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08)}
.icon-btn:focus-visible{outline:2px solid var(--gold-dim);outline-offset:2px}
.icon-btn:disabled{opacity:.45;cursor:default}
.icon-btn.danger:hover{color:#e06a5a;background:rgba(224,106,90,.09);border-color:rgba(224,106,90,.24)}
.row-actions .icon-btn + .icon-btn{margin-left:4px}

/* ------------------------------ hits: empty -------------------------- */
.empty .icon{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.08)}
.empty strong{font-size:14px}

/* ------------------------------ hits: pager -------------------------- */
.pager:empty{display:none}
.pager .btn{padding:6px 13px;font-size:12px;border-radius:999px}
.pager-info{font-variant-numeric:tabular-nums}

/* ----------------------------- builder: head ------------------------- */
.build-head{max-width:720px;margin:22px auto 16px}
.build-head h2{font-size:17px;font-weight:600}

/* ---------------------------- builder: button ------------------------ */
/* The steel primary read as disabled next to the blue ring; the accent
   gradient makes the one primary action on the page unmistakable. */
.btn.primary,.btn-primary{
  background:linear-gradient(180deg,#8ec7f7,#4f8fce);
  background-image:linear-gradient(180deg,#8ec7f7,#4f8fce);
  border-color:rgba(255,255,255,.16);color:#06121f;font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 6px 16px -8px rgba(124,192,255,.55);
}
.btn.primary:hover:not(:disabled),.btn-primary:hover{
  background:linear-gradient(180deg,#a6d5fb,#63a5e2);
  background-image:linear-gradient(180deg,#a6d5fb,#63a5e2);
  border-color:rgba(255,255,255,.22);color:#06121f;
}
.btn.primary:active:not(:disabled),.btn-primary:active:not(:disabled){
  background:linear-gradient(180deg,#77b3e8,#3f7cba);
  background-image:linear-gradient(180deg,#77b3e8,#3f7cba);
}
.btn.primary:disabled,.btn-primary:disabled{
  background:#232326;background-image:none;border-color:#232326;color:#6f6f75;box-shadow:none;
}

/* ---------------------------- builder: tabs -------------------------- */
/* Segmented control, matching the pill language of the hits tabs. */
.build-tabs{
  display:flex;gap:4px;padding:4px;margin-top:24px;
  background:#0f0f12;border:1px solid rgba(255,255,255,.08);border-radius:12px;
}
.build-tabs .build-tab{
  flex:1;border:0;border-radius:999px;padding:9px 14px;background:transparent;
  color:var(--faint);font-size:12.5px;font-weight:600;
  transition:color .14s var(--ease),background .14s var(--ease);
}
.build-tabs .build-tab:hover{color:var(--text);background:rgba(255,255,255,.04)}
.build-tabs .build-tab.active{
  color:var(--gold-hi);background:rgba(124,192,255,.12);border:0;
  border-radius:999px;
}
.build-tabs .build-tab.active svg{color:var(--gold-hi)}

/* --------------------------- builder: status ------------------------- */
/* Sentence case reads calmer than the shouty all-caps caption. */
.build-status{
  margin-top:12px;font-size:12.5px;font-weight:500;letter-spacing:0;text-transform:none;
  color:var(--faint);text-align:center;max-width:180px;line-height:1.5;
}
.build-status .muted{font-size:12.5px;letter-spacing:0}

/* --------------------------- nav brand lift --------------------------
   Lifts ONLY the logo and the "warpware.wtf" wordmark, and nudges both a
   little to the right. A transform on the children leaves the brand block's
   layout untouched, so the hairline under it stays exactly where it was -
   lifting the whole block dragged the line up with it. Scoped to the desktop
   rail so the mobile bottom bar is untouched. The logo also carried a 9px
   sideways nudge from an earlier layer; this rule widens it to 12px and swaps
   its 1px drop for the lift. */
@media(min-width:761px){
  .nav-brand .nav-logo{transform:translate(12px,-5px)}
  .nav-brand .nav-word{transform:translate(3px,-6px)}
}

/* --------------------------- country flags --------------------------
   Real flag images for the session list and the hit rows. The Unicode flag
   emoji this replaces rendered as a bare letter pair ("NL") on Windows, which
   is exactly what the flag is meant to replace. .flag-img is served from our
   own /flag route, so it satisfies the CSP's img-src 'self'. */
.flag-img {
  display: block;
  width: 20px;
  height: 15px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 1px 2px rgba(0,0,0,.45);
}
.flag-unknown { font-size: 13px; line-height: 1; }

.sess-flag { display: inline-flex; align-items: center; }
.sess-geo .flag-img { width: 21px; height: 15.5px; }

/* ---------------------- ghost button outline -----------------------
   The ghost variant drops its border (the rule near line 1794 sets it
   transparent), which left controls like the settings Ping button
   floating as bare text with nothing to aim at. Keep the transparent
   fill but put the hairline back, brighten it on hover, and hold it
   through the disabled state too so the control still reads as a
   button before a webhook is configured. */
.btn.ghost, .btn-ghost { border-color: var(--line); }
.btn.ghost:hover:not(:disabled), .btn-ghost:hover:not(:disabled) { border-color: var(--line-hi); }
.btn.ghost:disabled, .btn-ghost:disabled { border-color: var(--line); opacity: .55; }

/* ============================================================
   Plans / +rep / Live Captures
   Appended for the thisisafalsepositive.xyz build. Same tokens
   as the rest of the panel: glass surfaces, one accent, hairlines.
   ============================================================ */

.plans-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 26px;
}

.plan-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--glass);
  backdrop-filter: blur(10px);
}

.plan-card.hi {
  border-color: var(--gold-dim);
  box-shadow: 0 0 0 1px rgba(124, 192, 255, .18) inset, 0 12px 40px -18px rgba(124, 192, 255, .45);
}

.plan-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.plan-head h3 { margin: 0; font-size: 15px; letter-spacing: .02em; }
.plan-price { display: flex; align-items: baseline; gap: 6px; }
.plan-price b { font-size: 22px; color: var(--gold-hi); }
.plan-price span { font-size: 11px; color: var(--faint); }
.plan-tag { margin: 0; font-size: 12.5px; color: var(--muted); }

.plan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 12.5px; color: var(--muted); }
.plan-list li { display: flex; align-items: center; gap: 8px; }
.plan-list li.off { color: var(--faint); }
.tick { display: inline-flex; width: 15px; height: 15px; color: var(--ok); flex: none; }
.tick.off { color: var(--danger); opacity: .7; }
.tick svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.plan-cta {
  margin-top: auto;
  text-align: center;
  text-decoration: none;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-hi);
  color: var(--text);
  font-size: 12.5px;
}

.plan-cta:hover { border-color: var(--gold-dim); color: var(--gold-hi); }

/* +rep */

.rep-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
}

.rep-card {
  margin: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--gold-dim);
  border-radius: var(--r-sm);
  background: var(--glass);
}

.rep-card blockquote { margin: 0 0 12px; font-size: 13px; line-height: 1.55; color: var(--text); }
.rep-card figcaption { display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
.rep-name { color: var(--gold-hi); }
.rep-sub { color: var(--faint); }
.rep-more { margin-top: 18px; font-size: 12.5px; color: var(--muted); }

/* Live Captures */

.live-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.live-card {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--glass);
}

.live-card.no-shot { border-color: var(--line); }
.live-shot { display: block; aspect-ratio: 16 / 9; background: #0d0d0f; }
.live-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.live-noshot {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; font-size: 11px; color: var(--faint); letter-spacing: .08em; text-transform: uppercase;
}

.live-body { padding: 12px 14px 14px; display: grid; gap: 5px; }
.live-line { font-size: 12.5px; color: var(--text); }
.live-line span { color: var(--faint); }
.live-sub { font-size: 11px; color: var(--muted); letter-spacing: .02em; }
.live-tok {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 10.5px; color: var(--gold-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.live-open { font-size: 11.5px; text-decoration: none; }
.live-empty { margin-top: 16px; font-size: 12.5px; color: var(--faint); }