/* ═══════════════════════════════════════════════════════════════════════
   THE DESIGN SYSTEM: HOUSYSTAN AI                             2026-10-21

   Our own look (owner, 21 Oct 2026: "the home page UI looks exactly like
   ElevenLabs ... make something unique and different. Keep industry
   standard"). Until today this file copied ElevenLabs: monochrome, white on
   white, hairlines, a grey menu. Now it is built from our own logo:

     1. TWO BRAND COLOURS. India green (the leaf, #138808) is what you press
        and what is selected; saffron (the two dots, #FF9933) marks what is
        live or new. Nothing else is a brand colour.
     2. A DARK GREEN SIDE MENU on a soft, slightly green page. White cards
        lift off the page with a soft shadow, not a hairline alone.
     3. Plus Jakarta Sans, rounder and warmer than Inter; numbers tabular.
     4. Each product has its own tint, used only on its icon tile:
        agents green, calls blue, leads saffron, numbers violet, creative rose.

   Class names are unchanged, so every page picks this up without edits.
   Dark mode is defined in the same tokens further down.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* surfaces: a page a step off white, with a trace of green */
  --bg:        #f4f7f4;
  --surface:   #ffffff;
  --well:      #f2f5f1;   /* inset cards: promos, empty states, toolbars */
  --track:     #e8eee7;   /* segmented-control track */
  --edge:      #e0e7df;   /* hairlines */
  --edge-soft: #ebf0ea;

  --field:      #ffffff;
  --field-edge: #d3dcd2;

  /* ink: a deep green-black, so the page and the brand are one family */
  --ink:    #10201a;
  --ink-2:  #56675e;
  --ink-3:  #87968d;

  /* the brand: India green to press and select, saffron for live / new */
  --acc:       #128a3a;
  --acc-hover: #0d7230;
  --acc-soft:  #e6f5ea;
  --acc-ink:   #ffffff;
  --sun:       #f08a1c;
  --sun-soft:  #fff1df;
  --sun-ink:   #9a4d00;

  /* the side menu: dark green in both themes */
  --nav-bg:    #0f2a1e;
  --nav-bg-2:  #0b2118;
  --nav-ink:   #e7f1ea;
  --nav-ink-2: #9fb8a9;
  --nav-hover: rgba(255, 255, 255, .06);
  --nav-on:    rgba(116, 222, 140, .14);
  --nav-edge:  rgba(255, 255, 255, .08);
  --nav-acc:   #74de8c;

  /* the alarms, which the accent must never be confused with */
  --danger: #d92d20;
  --ok:     #128a3a;

  /* A second, quieter palette: only where the colour says something the
     label would otherwise have to. Tints, never fills. */
  --c-green:  #128a3a;  --c-green-bg:  #e6f5ea;
  --c-amber:  #b45309;  --c-amber-bg:  rgba(240, 138, 28, .14);
  --c-violet: #6d3fc4;  --c-violet-bg: rgba(109, 63, 196, .11);
  --c-blue:   #1f5fd0;  --c-blue-bg:   rgba(31, 95, 208, .10);
  --c-rose:   #c0335f;  --c-rose-bg:   rgba(192, 51, 95, .10);

  --radius-btn:   12px;
  --radius-card:  16px;
  --radius-input: 12px;

  --font: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ── type ── */
h1 { font-size: 26px; font-weight: 750; letter-spacing: -.025em; margin: 0 0 .5rem; }
h2 { font-size: 18px; font-weight: 700; letter-spacing: -.015em; margin: 0 0 .35rem; }
h3 { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 .3rem; }
.sub  { color: var(--ink-2); font-size: 13.5px; }
.mono { font-family: var(--mono); }
/* an eyebrow: a small coloured word over a title */
.eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--acc); }

/* ── buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 40px; padding: .5rem 1rem;
  border-radius: var(--radius-btn);
  font: inherit; font-size: 14px; font-weight: 650;
  cursor: pointer; border: 1px solid transparent; text-decoration: none;
  transition: background .12s, border-color .12s, opacity .12s, box-shadow .12s;
  white-space: nowrap;
}
.btn-primary   { background: var(--acc); color: var(--acc-ink); box-shadow: 0 1px 2px rgba(16, 60, 30, .18), inset 0 1px 0 rgba(255,255,255,.14); }
.btn-primary:hover:not(:disabled) { background: var(--acc-hover); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--edge); box-shadow: 0 1px 2px rgba(16, 40, 30, .05); }
.btn-secondary:hover:not(:disabled) { background: var(--well); border-color: var(--field-edge); }
.btn-ghost     { background: transparent; color: var(--ink-2); }
.btn-ghost:hover:not(:disabled) { background: var(--well); color: var(--ink); }
.btn-danger    { background: var(--danger); color: #fff; }
.btn:disabled  { opacity: .45; cursor: not-allowed; }
.btn-sm { min-height: 32px; padding: .3rem .75rem; font-size: 13px; border-radius: 10px; }

/* Split button: label + a caret half that opens a menu. */
.split { display: inline-flex; border-radius: var(--radius-btn); overflow: hidden; }
.split > .split-main {
  border-radius: 0; border: none;
  background: var(--acc); color: var(--acc-ink);
  padding: .5rem 1rem; min-height: 40px;
  font: inherit; font-size: 14px; font-weight: 650; cursor: pointer;
}
.split > .split-main:disabled { background: #b9c6bd; color: #fff; opacity: 1; cursor: not-allowed; }
.split > .split-caret {
  border: none; background: var(--acc); color: var(--acc-ink);
  padding: 0 .6rem; min-height: 40px; cursor: pointer;
  border-left: 1px solid rgba(255,255,255,.25);
}

/* ── chips ──
   .chip   is a CONTROL you press (filters, + Agent)
   .status is a LABEL you read  (New, Alpha, Primary, Default) */
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .32rem .75rem; border-radius: 999px;
  border: 1px solid var(--edge); background: var(--surface);
  font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer;
  white-space: nowrap;
}
.chip:hover { background: var(--well); }
.chip.on { background: var(--acc-soft); color: var(--acc); border-color: var(--acc); }

/* A badge inside a control is decoration, not a target. */
.btn .status, .seg > button .status, .chip .status { pointer-events: none; }

.status {
  display: inline-flex; align-items: center;
  padding: .18rem .55rem; border-radius: 999px;
  background: var(--track); color: var(--ink-2);
  font-size: 12px; font-weight: 650; white-space: nowrap;
}
.status-dark { background: var(--ink); color: var(--bg); }
.t-green  { background: var(--c-green-bg);  color: var(--c-green); }
.t-amber  { background: var(--c-amber-bg);  color: var(--c-amber); }
.t-violet { background: var(--c-violet-bg); color: var(--c-violet); }
.t-blue   { background: var(--c-blue-bg);   color: var(--c-blue); }
.t-rose   { background: var(--c-rose-bg);   color: var(--c-rose); }
.t-green b, .t-amber b, .t-violet b, .t-blue b, .t-rose b { color: inherit; }
.t-green .sub, .t-amber .sub, .t-violet .sub,
.t-blue .sub, .t-rose .sub { color: inherit; opacity: .72; }
.status-line { background: transparent; border: 1px solid var(--edge); }

/* ── cards ── */
.card {
  background: var(--surface); border: 1px solid var(--edge);
  border-radius: var(--radius-card); padding: 1.1rem;
}
.well { background: var(--well); border: none; border-radius: var(--radius-card); padding: 1rem; }

/* ── list rows ── */
.rows { border: 1px solid var(--edge); border-radius: var(--radius-card); overflow: hidden; }
.row {
  display: flex; align-items: center; gap: .7rem;
  padding: .8rem 1rem; background: var(--surface);
  border-bottom: 1px solid var(--edge-soft); cursor: pointer;
}
.rows .row:last-child { border-bottom: none; }
.row:hover { background: var(--well); }
.row .grow { flex: 1; min-width: 0; }
.row .chev { color: var(--ink-3); flex: none; }

/* ── segmented control ── */
.seg { display: inline-flex; background: var(--track); border-radius: 12px; padding: 3px; gap: 2px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg > button {
  border: none; background: transparent; color: var(--ink-2);
  font: inherit; font-size: 13.5px; font-weight: 650;
  padding: .38rem .85rem; border-radius: 9px; cursor: pointer; white-space: nowrap;
}
.seg > button.on {
  background: var(--surface); color: var(--acc);
  box-shadow: 0 1px 3px rgba(16, 40, 30, .12);
}

/* ── page tabs: the pages of one menu item, on top of each of them (UI.tabs, app.html) ──
   Pills on a soft track, our own (not the underline tabs every voice-AI dashboard has). On a phone the row
   scrolls on its own, never the page. */
.ptabs {
  display: flex; gap: 4px; margin: 0 0 1.2rem; padding: 4px; width: fit-content; max-width: 100%;
  background: var(--track); border-radius: 14px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.ptabs::-webkit-scrollbar { display: none; }
.ptabs > a {
  flex: none; padding: .45rem .9rem; color: var(--ink-2); font-size: 13.5px; font-weight: 650;
  border-radius: 10px; white-space: nowrap; text-decoration: none;
}
.ptabs > a:hover { color: var(--ink); background: color-mix(in srgb, var(--surface) 55%, transparent); }
.ptabs > a.on { color: var(--acc); background: var(--surface); box-shadow: 0 1px 3px rgba(16, 40, 30, .12); }
.ptabs > a:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }

/* ── toggle ── */
.tog { position: relative; display: inline-block; width: 42px; height: 24px; flex: none; }
.tog input { opacity: 0; width: 0; height: 0; }
.tog .slider {
  position: absolute; inset: 0; background: #cdd6cf;
  border-radius: 999px; transition: background .15s; cursor: pointer;
}
.tog .slider::before {
  content: ''; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: transform .15s;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.tog input:checked + .slider { background: var(--acc); }
.tog input:checked + .slider::before { transform: translateX(18px); }

/* ── inputs ── */
label { display: block; font-size: 13.5px; font-weight: 650; margin: .8rem 0 .3rem; }
label .req { color: var(--danger); }
input:not([type]), input[type=text], input[type=email], input[type=password],
input[type=number], input[type=tel], input[type=search], input[type=url],
input[type=date], input[type=time], input[type=datetime-local],
select, textarea {
  width: 100%; padding: .62rem .85rem;
  border: 1px solid var(--field-edge); border-radius: var(--radius-input);
  background: var(--field); color: var(--ink);
  font: inherit; font-size: 15px;
  transition: border-color .12s, box-shadow .12s;
}
/* iOS Safari zooms the page when a focused control's text is under 16px. */
@media (max-width: 860px) {
  input:not([type]), input[type=text], input[type=email], input[type=password],
  input[type=number], input[type=tel], input[type=search], input[type=url],
  input[type=date], input[type=time], input[type=datetime-local],
  select, textarea { font-size: 16px; }
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 18%, transparent);
}
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 6px;
}
a { color: var(--acc); }
::placeholder { color: var(--ink-3); }

/* Prompt card: the textarea and a footer bar inside the same border. */
.prompt { border: 1px solid var(--edge); border-radius: var(--radius-card); overflow: hidden; background: var(--field); }
.prompt textarea {
  border: none; border-radius: 0; resize: vertical; min-height: 92px; font-size: 15px;
}
.prompt textarea:focus { box-shadow: none; }
.prompt-foot {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .5rem .8rem; background: var(--well);
  border-top: 1px solid var(--edge-soft); font-size: 13px; color: var(--ink-2);
}
.prompt-foot code {
  background: var(--track); border-radius: 5px; padding: .1rem .3rem; font-family: var(--mono);
}

/* ── search ── */
.search { position: relative; }
.search input { padding-left: 2.3rem; }
.search svg { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--ink-3); }

/* ── table ──
   min-width lets the table exceed its box, which is what makes an overflow-x:auto wrapper scroll. */
table.data { width: 100%; min-width: 460px; border-collapse: separate; border-spacing: 0; font-size: 14px; }
table.data td.when, table.data th.when { white-space: nowrap; }
table.data th {
  text-align: left; font-weight: 700; color: var(--ink-3); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  padding: .65rem .6rem; border-bottom: 1px solid var(--edge); white-space: nowrap; background: var(--well);
}
table.data th:first-child { border-top-left-radius: 10px; }
table.data th:last-child { border-top-right-radius: 10px; }
table.data td { padding: .75rem .6rem; border-bottom: 1px solid var(--edge-soft); }
table.data tr:hover td { background: color-mix(in srgb, var(--acc) 5%, var(--surface)); }

/* ── accordion ── */
.acc { border: 1px solid var(--edge); border-radius: var(--radius-card); overflow: hidden; background: var(--surface); }
.acc summary {
  display: flex; align-items: center; gap: .7rem;
  padding: .85rem 1rem; cursor: pointer; list-style: none; background: var(--surface);
}
.acc summary::-webkit-details-marker { display: none; }
.acc[open] summary { border-bottom: 1px solid var(--edge-soft); }
.acc .acc-body { padding: 1rem; }

/* ── grouped menu (pop-overs) ──
   Unavailable items stay VISIBLE and greyed. */
.menu { background: var(--surface); border: 1px solid var(--edge); border-radius: var(--radius-card);
        padding: .4rem; min-width: 240px; box-shadow: 0 12px 36px rgba(10, 40, 25, .16); }
.menu-label { font-size: 11.5px; color: var(--ink-3); padding: .5rem .7rem .25rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.menu-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .7rem; border-radius: 10px; cursor: pointer; font-size: 14.5px;
}
.menu-item:hover { background: var(--acc-soft); }
.menu-item.disabled { color: var(--ink-3); cursor: default; }
.menu-item.disabled:hover { background: transparent; }
.menu-sep { height: 1px; background: var(--edge-soft); margin: .35rem 0; }

/* ── empty states ── */
.empty { text-align: center; padding: 2.5rem 1rem; }
.empty .icon {
  width: 52px; height: 52px; margin: 0 auto .9rem;
  display: grid; place-items: center; color: var(--acc);
  background: var(--acc-soft); border: none; border-radius: 16px;
}
.empty b { display: block; font-size: 16px; margin-bottom: .25rem; }
.empty-dashed { border: 1.5px dashed var(--field-edge); border-radius: var(--radius-card); color: var(--ink-2); background: color-mix(in srgb, var(--surface) 60%, transparent); }

/* ── checklist with progress ── */
.bar { height: 6px; background: var(--track); border-radius: 999px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--acc); border-radius: 999px; }
.check { display: flex; align-items: center; gap: .65rem; padding: .5rem 0; font-size: 14.5px; }
.check .dot {
  width: 16px; height: 16px; border-radius: 50%; flex: none;
  border: 1.5px dashed var(--ink-3);
}
.check.done .dot { border: none; background: var(--ok); }

/* ── nav (the side menu; its colours are the --nav-* tokens, see .side in app.html) ── */
.nav-sec { font-size: 11px; color: var(--ink-3); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; padding: 1.1rem .75rem .35rem; }
.nav-item {
  position: relative; display: flex; align-items: center; gap: .7rem;
  padding: .52rem .75rem; border-radius: 10px;
  color: var(--ink); font-size: 14px; font-weight: 550; cursor: pointer; text-decoration: none;
}
.nav-item:hover { background: var(--well); }
.nav-item.on { background: var(--acc-soft); color: var(--acc); font-weight: 650; }
.nav-item .tail { margin-left: auto; }

/* ── avatar ── */
.avatar { width: 26px; height: 26px; border-radius: 50%; flex: none;
          background: conic-gradient(from 210deg, #3eb83c, #138808, #ff9933, #3eb83c); }
.avatar-lg { width: 150px; height: 150px; }

.hr { height: 1px; background: var(--edge); border: 0; margin: 1.6rem 0; }

/* ── dark mode: the same brand, lit for the dark ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-green:  #6ee39a;  --c-green-bg:  rgba(62, 184, 60, .14);
    --c-amber:  #ffb466;  --c-amber-bg:  rgba(255, 153, 51, .13);
    --c-violet: #c4b5fd;  --c-violet-bg: rgba(196, 181, 253, .14);
    --c-blue:   #93c5fd;  --c-blue-bg:   rgba(59, 130, 246, .13);
    --c-rose:   #f9a8c4;  --c-rose-bg:   rgba(236, 72, 153, .13);
    --bg: #08110c; --surface: #101b15; --well: #15221b; --track: #1a2a21; --field: #0c1611; --field-edge: #2c3d33;
    --edge: #213129; --edge-soft: #18261f;
    --ink: #ecf4ee; --ink-2: #a5b6ab; --ink-3: #74867b;
    --acc: #4cc970; --acc-hover: #6fdc8e; --acc-soft: rgba(76, 201, 112, .13); --acc-ink: #052a12;
    --sun: #ffa340; --sun-soft: rgba(255, 153, 51, .14); --sun-ink: #ffc58a;
    --nav-bg: #0a1711; --nav-bg-2: #07120d; --nav-edge: rgba(255, 255, 255, .07);
    --danger: #f87171; --ok: #4cc970;
  }
}
:root[data-theme="dark"] {
  --c-green:  #6ee39a;  --c-green-bg:  rgba(62, 184, 60, .14);
  --c-amber:  #ffb466;  --c-amber-bg:  rgba(255, 153, 51, .13);
  --c-violet: #c4b5fd;  --c-violet-bg: rgba(196, 181, 253, .14);
  --c-blue:   #93c5fd;  --c-blue-bg:   rgba(59, 130, 246, .13);
  --c-rose:   #f9a8c4;  --c-rose-bg:   rgba(236, 72, 153, .13);
  --bg: #08110c; --surface: #101b15; --well: #15221b; --track: #1a2a21; --field: #0c1611; --field-edge: #2c3d33;
  --edge: #213129; --edge-soft: #18261f;
  --ink: #ecf4ee; --ink-2: #a5b6ab; --ink-3: #74867b;
  --acc: #4cc970; --acc-hover: #6fdc8e; --acc-soft: rgba(76, 201, 112, .13); --acc-ink: #052a12;
  --sun: #ffa340; --sun-soft: rgba(255, 153, 51, .14); --sun-ink: #ffc58a;
  --nav-bg: #0a1711; --nav-bg-2: #07120d; --nav-edge: rgba(255, 255, 255, .07);
  --danger: #f87171; --ok: #4cc970;
}


/* ── live channel capacity ─────────────────────────────────────────────────
   Rendered by vs-core.js, which was written against the old shell.css. Its
   class names and colour variables did not exist here, so on /app the whole
   strip rendered as unstyled stacked text (measured: .chan-grid was
   display:block, .chan-cell had 0px padding, .chan-bar was 0px tall).
   Restated in el.css's own tokens. Monochrome per ELEVENLABS-UI-SPEC.md:35
   -- the only colour is the status dot. */
.chan{border:1px solid var(--edge);border-radius:var(--radius-card);background:var(--surface);
  padding:.9rem 1rem;margin-bottom:.9rem}
.chan-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.1rem}
.chan-big{font-size:2rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.chan-of{color:var(--ink-2);font-size:.82rem}
.chan-age{margin-left:auto;font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;
  text-transform:uppercase;display:flex;align-items:center;gap:.35rem;color:var(--ink-3)}
.chan-age .d{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:0 0 auto}
.chan-age.warn .d{background:var(--ink-3)}
.chan-age.bad .d{background:var(--danger)} .chan-age.bad{color:var(--danger)}

/* The usage bar. Two segments have to be told apart without an accent, so
   human is full ink and AI is muted ink. */
.chan-bar{height:10px;border-radius:6px;background:var(--track);overflow:hidden;
  margin:.7rem 0 .55rem;display:flex}
.chan-bar i{display:block;height:100%}
.chan-bar .hu{background:var(--ink)}
.chan-bar .aiseg{background:var(--ink-3)}
.chan-bar .oth{background:var(--edge)}
/* Legend swatches mirror the bar exactly, so the key actually keys. */
.chan-sw.sw-hu{background:var(--ink)}
.chan-sw.sw-ai{background:var(--ink-3)}
.chan-sw.sw-oth{background:var(--edge)}
.chan-cell .v .sub{font-size:.7rem;color:var(--ink-3);font-weight:400}

.chan-legend{display:flex;flex-wrap:wrap;gap:.35rem .9rem;font-size:.7rem;color:var(--ink-2)}
.chan-legend b{color:var(--ink);font-weight:600}
.chan-sw{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:.3rem;
  vertical-align:baseline}
.chan-dot{display:inline-flex;align-items:center}
.chan-dot .chan-sw{background:var(--ok)}
.chan-dot.warn .chan-sw{background:var(--ink-3)} .chan-dot.warn{color:var(--ink-2)}
.chan-dot.bad .chan-sw{background:var(--danger)} .chan-dot.bad{color:var(--danger)}

.chan-grid{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
  margin-top:.7rem}
.chan-cell{background:var(--well);border:1px solid var(--edge);border-radius:9px;
  padding:.5rem .6rem;min-width:0}
.chan-cell .v{font-size:1.05rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.chan-cell .k{font-size:.63rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.chan-paused{margin-top:.55rem;padding:.4rem .55rem;border-radius:8px;font-size:.72rem;
  background:var(--well);border:1px solid var(--edge);color:var(--danger)}

/* The reserve boxes wrapped mid-label on a phone and ran off the edge.
   Each label+input+button is one non-wrapping group; the groups wrap. */
.chan-res{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .6rem;margin-top:.7rem;
  font-size:.72rem;color:var(--ink-2)}
.chan-res input{width:4.5rem;min-height:32px;margin:0;padding:.25rem .4rem;font-size:.78rem;
  font-family:var(--mono);text-align:center;background:var(--bg);color:var(--ink);
  border:1px solid var(--edge);border-radius:var(--radius-input)}
.chan-res button{min-height:32px;padding:.2rem .6rem;font-size:.7rem}
.chan-res .msg{flex:1 1 100%;color:var(--ink-3)}

/* A phone is 375px wide: the big number shrinks and the freshness stamp drops
   to its own line instead of being squeezed against it. */
@media (max-width: 840px){
  /* ── tap targets ────────────────────────────────────────────────────────
     Measured on the live Studio at 375x812: 168 real controls, and 168 of
     them under the 44x44 minimum — "Test call" at 76x32, the "···" menu at
     33x22, and "Resume"/"Start" on Campaigns at 32 high. Those last two begin
     outbound calling, so an undersized control there is a mis-tap risk on an
     action that dials customers.

     Heights only, and padding-block rather than padding, so nothing becomes
     WIDER: extra width is what would push a dense row into wrapping or
     sideways overflow. Desktop keeps the replica's compact sizing — this
     block only applies where the pointer is a finger. */
  .btn, .btn-sm { min-height: 44px; }
  .btn-sm { padding-block: .55rem; }
  .chip { min-height: 44px; padding-block: .55rem; }
  .dots { min-height: 44px; min-width: 44px; }
  input[type="checkbox"], input[type="radio"] { min-width: 22px; min-height: 22px; }
  /* EXCEPT a toggle switch: `.tog input` is deliberately collapsed to 0x0
     and the visible control is the .slider. Giving it a 22px minimum put a
     22px item inside a fixed 42px switch and shoved the label out. */
  .tog input { min-width: 0; min-height: 0; }
  /* Not .btn or .chip: bare buttons inside a .seg segmented control, and
     bare selects. Both sat at 33px with min-height:auto. */
  .seg button, select { min-height: 44px; }
  /* The flow canvas toolbar — undo, zoom, fit, full screen, ADD STEP —
     was 27x23. Add step being a coin toss is part of "cant create". */
  .fc-tb { min-width: 44px; min-height: 44px; font-size: 16px; }

  .chan{padding:.8rem .85rem}
  .chan-big{font-size:1.7rem}
  .chan-age{margin-left:0;width:100%}
  .chan-grid{grid-template-columns:repeat(auto-fit,minmax(104px,1fr))}
}

/* ── flow canvas: the step inspector ───────────────────────────────────────
   Was an inline `position:absolute;right:10px;width:268px` INSIDE #fc-wrap.
   On a phone that is a 268px overlay on a 346px canvas — 68px of flow left —
   and being inline, no media query could reach it. The positioning lives here
   now, and .fc-shell is the positioned ancestor so the desktop overlay is
   unchanged while the phone can stack it. */
.fc-shell { position: relative; }
.fc-insp {
  position: absolute; right: 10px; top: 10px; width: 268px; z-index: 5;
  background: var(--surface); border: 1px solid var(--edge);
  border-radius: 12px; padding: .7rem; box-shadow: 0 2px 10px rgba(0,0,0,.10);
}
@media (max-width: 840px){
  /* Stacked under the canvas, not over it: on a phone there is no room to be
     beside anything. Static also means it can no longer collide with the zoom
     toolbar, which sits at the bottom of the canvas at the same z-index. */
  .fc-insp {
    position: static; width: auto; margin-top: .6rem; box-shadow: none;
  }
}

/* ── flow canvas: full screen ──────────────────────────────────────────────
   A fixed inset overlay rather than the Fullscreen API: iOS Safari will not
   put an arbitrary element into real fullscreen, so the API would work on a
   desktop and silently do nothing on a phone. dvh for the same reason as the
   nav drawer — vh counts the strip behind the browser toolbar. */
.fc-shell.is-full {
  position: fixed; inset: 0; z-index: 200;
  background: var(--bg); padding: .6rem;
  display: flex; flex-direction: column;
}
.fc-shell.is-full #fc-wrap { height: 100dvh; flex: 1 1 auto; }
/* In full screen the inspector goes back to being an overlay even on a phone:
   there is room for it there, and stacking would halve the canvas again. */
.fc-shell.is-full .fc-insp {
  position: absolute; right: 12px; top: 12px; width: min(268px, 72vw);
  margin-top: 0; max-height: 70dvh; overflow-y: auto;
}
/* The page behind must not scroll while the canvas owns the screen. */
body.fc-full-open { overflow: hidden; }

/* While a wire or a node is being dragged the canvas owns the gesture outright.
   The rest of the time it stays pan-y so the page still scrolls over it. */
#fc-wrap.fc-dragging { touch-action: none; cursor: grabbing; }

/* ── the live voice test panel ──────────────────────────────────────────
   These rules existed only inside studio.html, so the panel rendered in the
   new app with NO styling at all: the mic was a small square button, the
   three stats stacked vertically instead of sitting in a row, and the
   transcript had no shape. It looked broken, and it was - just not in the
   way it appeared.

   Ported with the tokens mapped to this stylesheet: the classic page has an
   accent colour and a second panel shade, and this design is deliberately
   monochrome, so --acc becomes --ink and --panel2 becomes --well rather than
   inventing colours that exist nowhere else here. */
.agv-stage{border:1px solid var(--edge);border-radius:12px;background:var(--well);
  padding:1rem .9rem;display:flex;flex-direction:column;align-items:center;gap:.7rem;margin-bottom:.8rem}
.agv-ring{position:relative;display:flex;align-items:center;justify-content:center;width:108px;height:108px}
.agv-ring::before{content:"";position:absolute;width:100px;height:100px;border-radius:50%;
  border:2px solid var(--ink);opacity:0;pointer-events:none}
.agv-ring.pulse::before{animation:agvPulse 1.7s ease-out infinite}
@keyframes agvPulse{0%{opacity:.5;transform:scale(1)}100%{opacity:0;transform:scale(1.42)}}
.agv-mic{width:100px;height:100px;min-height:100px;border-radius:50%;padding:0;
  flex-direction:column;justify-content:center;gap:.15rem;font-size:.68rem;letter-spacing:.02em}
.agv-mic svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.agv-state{display:flex;align-items:center;gap:.45rem;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);min-height:1.1rem;text-align:center}
.agv-dot{width:9px;height:9px;border-radius:50%;background:var(--ink-3);flex:0 0 9px}
.agv-dot.live{animation:agvBlink 1.1s ease-in-out infinite}
@keyframes agvBlink{0%,100%{opacity:1}50%{opacity:.25}}
.agv-meter{display:flex;align-items:center;gap:2px;height:32px;width:100%;max-width:23rem}
.agv-meter i{flex:1 1 0;min-width:2px;height:10%;border-radius:2px;background:var(--edge-soft);
  transition:height .07s linear,background .12s linear}
.agv-meter i.on{background:var(--ink-3)}
.agv-meter i.hot{background:var(--ink)}
.agv-mhint{font-family:var(--mono);font-size:.62rem;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase}
.agv-mhint.bad{color:var(--danger)}
.agv-log{border:1px solid var(--edge);border-radius:10px;background:var(--well);padding:.7rem;
  min-height:11rem;max-height:42vh;overflow-y:auto;display:flex;flex-direction:column;gap:.5rem}
.agv-b{max-width:82%;padding:.5rem .7rem;border-radius:12px;font-size:.85rem;
  white-space:pre-wrap;word-break:break-word}
.agv-b.a{align-self:flex-start;background:var(--surface);border:1px solid var(--edge-soft);border-bottom-left-radius:4px}
.agv-b.u{align-self:flex-end;background:var(--well);border:1px solid rgba(232,163,61,.28);border-bottom-right-radius:4px}
.agv-b.e{align-self:flex-start;background:var(--well);border:1px solid rgba(240,113,106,.3);color:var(--danger)}
.agv-b.interim{opacity:.6;border-style:dashed}
.agv-b .who{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);display:block;margin-bottom:.15rem}
.agv-b .lat{font-family:var(--mono);font-size:.6rem;color:var(--ink-3);display:block;margin-top:.28rem}

/* Classes the shared voice panel uses that only the classic page defined.
   Without them the three stats stacked down the page instead of sitting in a
   row, and the tuning drawer and hint text had no shape at all. Same token
   mapping as the .agv- block above: this palette is monochrome, so the
   classic accent and second panel shade become --ink and --well. */
.grid{display:grid;gap:.7rem}
.grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:640px){ .grid.g3{grid-template-columns:1fr} }
.stat{background:var(--surface);border:1px solid var(--edge);border-radius:12px;padding:.8rem .9rem;min-width:0}
.stat .v{font-family:var(--mono);font-size:1.25rem;font-weight:600;letter-spacing:-.02em}
.stat .k{color:var(--ink-3);font-size:.7rem;margin-top:.1rem}
.hint{color:var(--ink-3);font-size:.78rem;margin-bottom:.7rem}
.hint.sm{margin:.25rem 0 0;font-size:.72rem}
.ghost{background:var(--well);color:var(--ink);border:1px solid var(--edge-soft);
  border-radius:var(--radius-btn);padding:.4rem .7rem;cursor:pointer;font:inherit;font-size:.85rem}
.ghost:hover{border-color:var(--ink-3)}
.togrow{display:flex;align-items:center;gap:.8rem;padding:.55rem 0}
.togrow .t{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.togrow .t b{font-size:.9rem}
.togrow .t span{color:var(--ink-3);font-size:.78rem}
.fix{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;min-width:0}
.fix > *{min-width:0;max-width:100%}
.agvt{border:1px solid var(--edge);border-radius:12px;padding:.6rem .75rem;margin-bottom:.7rem}
.agvt-hd{display:flex;align-items:center;justify-content:space-between;gap:.5rem;cursor:pointer}
.agvt-body{margin-top:.6rem}
.agvt-row{display:flex;align-items:center;gap:.6rem;margin-bottom:.45rem;flex-wrap:wrap}
.agvt-foot{display:flex;align-items:center;gap:.5rem;margin-top:.5rem;flex-wrap:wrap}
.agvt-live{color:var(--ok);font-size:.72rem}


/* ── campaign detail components ─────────────────────────────────────
   vs-core.js draws the campaign detail for BOTH shells but only ever had
   styles in shell.css, so on this sheet its stat tiles had no rules at all
   and stacked one per line down a phone. Ported here in el.css's own tokens.
   The inline grid-template-columns vs-core writes (3 or 4) is right on a
   desktop and unreadable at 375px, and an inline style outranks a class, so
   the phone override has to say so. */
.cst-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin-top: .5rem; }
.cst {
  background: var(--field); border: 1px solid var(--field-edge);
  border-radius: 10px; padding: .5rem .55rem; min-width: 0;
}
.cst .v {
  font-size: 17px; font-weight: 650; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cst .k {
  font-size: 11px; line-height: 1.25; margin-top: .15rem;
  text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3);
}
@media (max-width: 640px) {
  .cst-grid { grid-template-columns: repeat(2, 1fr) !important; gap: .35rem; }
  .cst { padding: .45rem .5rem; }
  .cst .v { font-size: 16px; }
  .cst .k { font-size: 10.5px; }
}

/* a small count or state that rides next to a heading */
.pill {
  display: inline-block; font-family: var(--mono); font-size: 11px; font-weight: 600;
  padding: .12rem .45rem; border-radius: 999px; white-space: nowrap; vertical-align: middle;
}
.p-mut { background: var(--track); color: var(--ink-2); }
.p-acc { background: var(--acc-soft); color: var(--acc); }
.ok-t  { color: var(--ok); }
.bad-t { color: var(--danger); }

/* one scrolling row of filters that must never wrap into a wall of chips */
.fbar {
  display: flex; gap: .35rem; align-items: center;
  overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.fbar::-webkit-scrollbar { display: none; }
.fbar > * { flex: 0 0 auto; }
.fbar .hint { margin: 0; white-space: nowrap; }


/* ── a campaign's leads: one tappable row each ──────────────────────────
   These were bordered cards nested inside the card that holds them - two
   frames around one line on a phone. A hairline between rows says the same
   thing and gives the text the full width. The left stripe is his four-colour
   call grading, so the list is readable without opening anything. */
.lead-rows { margin: .35rem 0 0; text-align: left; }
.lead-row {
  position: relative; padding: .55rem .2rem .6rem .7rem;
  border-top: 1px solid var(--edge-soft);
}
.lead-rows > .lead-row:first-child { border-top: 0; }
.lead-row::before {
  content: ''; position: absolute; left: 0; top: .5rem; bottom: .5rem;
  width: 3px; border-radius: 2px; background: var(--grade, transparent);
}
.lead-row.tappable { cursor: pointer; }
.lead-row.tappable:hover { background: var(--well); }
.lead-row-top { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.lead-row-top b { font-size: 14.5px; min-width: 0; overflow-wrap: anywhere; }
.lead-row-tags { display: flex; gap: .3rem; flex-wrap: wrap; align-items: center; margin-top: .3rem; }
.lead-row-go { font-size: 11.5px; color: var(--acc); white-space: nowrap; margin-left: auto; }
/* the name is the thing being scanned, so it keeps the left edge and the
   timestamp stays on its line rather than pushing the name into the middle */
.lead-row-top { align-items: flex-start; }
.lead-row-top b { flex: 1 1 auto; }
.lead-row-top .hint { flex: 0 0 auto; font-size: 11.5px; }
.p-ok { background: var(--c-green-bg); color: var(--c-green); }

/* vs-core.js was written against shell.css and names four tokens this sheet
   spells differently. Aliasing them here is what makes its pills and hints
   have any colour at all on this shell. */
:root, :root[data-theme="dark"] {
  --ink2: var(--ink-2); --ink3: var(--ink-3);
  --bad: var(--danger); --bad-soft: var(--c-rose-bg);
  --ok-soft: var(--c-green-bg);
}


/* ── FORM WIDTH ON THE AGENT PAGES ─────────────────────────────────────────
   2026-09-22: "1 row from left to right, so much space wasted". The agent
   pages had no column width, so on a wide monitor a two-digit Start delay box
   was about 1500px across and every field below it repeated the trick.

   A form line has a comfortable length the way a paragraph does. This gives
   the agent pages one, and lets short controls be short so they sit together
   on a line instead of each claiming a full row. Layout only — no markup, no
   handlers, and nothing changes below 1100px. */
#app.in-agent .page { max-width: 1100px; }

/* Things that hold something SHORT size to it. A delay in seconds, a keypad
   key, a time, a count: a full-width box for one character is what made the
   page look empty. */
#app.in-agent .page input[type="number"],
#app.in-agent .page input[type="time"],
#app.in-agent .page input[type="date"] { max-width: 13rem; }

/* A select is usually a short answer too — an agent type, a voice, a number —
   but long option text needs room, so it gets a generous cap rather than a
   tight one. */
#app.in-agent .page > select,
#app.in-agent .page select:not(.dock select) { max-width: 46rem; }

/* Long things stay long: names, prompts, URLs, descriptions. */
#app.in-agent .page textarea,
#app.in-agent .page input[type="url"] { max-width: 100%; }

@media (max-width: 1100px) {
  #app.in-agent .page input[type="number"],
  #app.in-agent .page input[type="time"],
  #app.in-agent .page input[type="date"],
  #app.in-agent .page select { max-width: 100%; }
}

/* ── elevation ──
   Two shadows, a tight contact one and a soft ambient one, tinted with the page's green so a card sits on the
   page instead of floating over it. Dark mode leans on the surface step and a deeper shadow. */
:root{
  --shadow-card: 0 1px 2px 0 rgb(16 48 30 / .05), 0 6px 20px -6px rgb(16 48 30 / .10);
  --shadow-lift: 0 2px 4px 0 rgb(16 48 30 / .06), 0 18px 40px -10px rgb(16 48 30 / .20);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --shadow-card: 0 1px 2px 0 rgb(0 0 0 / .5), 0 8px 24px -6px rgb(0 0 0 / .55);
    --shadow-lift: 0 2px 4px 0 rgb(0 0 0 / .6), 0 18px 40px -8px rgb(0 0 0 / .7);
  }
}
:root[data-theme="dark"]{
  --shadow-card: 0 1px 2px 0 rgb(0 0 0 / .5), 0 8px 24px -6px rgb(0 0 0 / .55);
  --shadow-lift: 0 2px 4px 0 rgb(0 0 0 / .6), 0 18px 40px -8px rgb(0 0 0 / .7);
}
.card, .rows{ box-shadow: var(--shadow-card); }
a.card { transition: box-shadow .15s, transform .15s, border-color .15s; }
a.card:hover { box-shadow: var(--shadow-lift); border-color: color-mix(in srgb, var(--acc) 30%, var(--edge)); }

/* ── HOME (app-home.js, 21 Oct 2026): the welcome band, one-tap actions, every product ── */
.hm-hero {
  position: relative; overflow: hidden; color: #fff; border-radius: 22px; padding: 1.5rem 1.5rem 1.3rem; margin-bottom: 1rem;
  background:
    radial-gradient(520px 260px at 100% 0%, rgba(255, 153, 51, .30), transparent 62%),
    radial-gradient(420px 260px at 0% 100%, rgba(62, 184, 60, .32), transparent 60%),
    linear-gradient(135deg, #0f2a1e 0%, #12402a 55%, #0d5a2e 100%);
  box-shadow: var(--shadow-lift);
}
.hm-hero::after {   /* a large quiet ring in the corner */
  content: ''; position: absolute; right: -30px; top: -30px; width: 160px; height: 160px; border-radius: 50%;
  border: 26px solid rgba(255, 255, 255, .05); pointer-events: none;
}
.hm-hero-top { display: flex; align-items: flex-start; gap: 1rem; justify-content: space-between; position: relative; z-index: 1; }
.hm-hero-date { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #ffc078; }
.hm-hero-h { font-size: 28px; font-weight: 800; letter-spacing: -.03em; margin: .25rem 0 .2rem; color: #fff; line-height: 1.2; }
.hm-hero-h span { color: #b6f0c3; }
.hm-hero-sub { color: rgba(231, 241, 234, .78); font-size: 14px; }
.hm-live {
  flex: none; display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .8rem; border-radius: 999px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); color: #fff !important;
  font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.hm-live:hover { background: rgba(255, 255, 255, .16); }
.hm-live i { width: 8px; height: 8px; border-radius: 50%; background: #ff9933; animation: hmPing 1.6s ease-out infinite; }
@keyframes hmPing { 0% { box-shadow: 0 0 0 0 rgba(255, 153, 51, .7) } 100% { box-shadow: 0 0 0 9px rgba(255, 153, 51, 0) } }
@media (prefers-reduced-motion: reduce) { .hm-live i { animation: none; } }
.hm-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin-top: 1.2rem; position: relative; z-index: 1; }
.hm-stat {
  display: flex; flex-direction: column; gap: .1rem; min-width: 0; padding: .8rem .9rem; border-radius: 14px; text-decoration: none;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); color: #fff !important;
  transition: background .15s;
}
.hm-stat:hover { background: rgba(255, 255, 255, .14); }
.hm-stat:first-child { background: rgba(255, 255, 255, .96); border-color: transparent; color: #10201a !important; }
.hm-stat:first-child:hover { background: #fff; }
.hm-stat:first-child .hm-stat-k, .hm-stat:first-child .hm-stat-n { color: #56675e; }
.hm-stat-k { font-size: 12.5px; color: rgba(231, 241, 234, .8); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-stat-v { font-size: 26px; font-weight: 800; letter-spacing: -.025em; font-variant-numeric: tabular-nums; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-stat-n { font-size: 12px; color: rgba(231, 241, 234, .7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* product tints: one per product, on its icon tile only */
.hm-ico { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; }
.hm-ico .i { width: 20px; height: 20px; stroke-width: 1.9; }
.p-agents   { background: #e3f5e7; color: #128a3a; }
.p-calls    { background: #e5edfd; color: #1f5fd0; }
.p-leads    { background: #fff0dd; color: #c26100; }
.p-numbers  { background: #efe8fc; color: #6d3fc4; }
.p-creative { background: #fde6ef; color: #c0335f; }
.p-image    { background: #fbe7fb; color: #a62ca6; }
.p-money    { background: #e0f4f1; color: #0f766e; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .p-agents   { background: rgba(76, 201, 112, .14); color: #6ee39a; }
  :root:not([data-theme="light"]) .p-calls    { background: rgba(59, 130, 246, .16); color: #93c5fd; }
  :root:not([data-theme="light"]) .p-leads    { background: rgba(255, 153, 51, .15); color: #ffb466; }
  :root:not([data-theme="light"]) .p-numbers  { background: rgba(167, 139, 250, .16); color: #c4b5fd; }
  :root:not([data-theme="light"]) .p-creative { background: rgba(236, 72, 153, .15); color: #f9a8c4; }
  :root:not([data-theme="light"]) .p-image    { background: rgba(217, 70, 239, .15); color: #f0abfc; }
  :root:not([data-theme="light"]) .p-money    { background: rgba(45, 212, 191, .14); color: #5eead4; }
}
:root[data-theme="dark"] .p-agents   { background: rgba(76, 201, 112, .14); color: #6ee39a; }
:root[data-theme="dark"] .p-calls    { background: rgba(59, 130, 246, .16); color: #93c5fd; }
:root[data-theme="dark"] .p-leads    { background: rgba(255, 153, 51, .15); color: #ffb466; }
:root[data-theme="dark"] .p-numbers  { background: rgba(167, 139, 250, .16); color: #c4b5fd; }
:root[data-theme="dark"] .p-creative { background: rgba(236, 72, 153, .15); color: #f9a8c4; }
:root[data-theme="dark"] .p-image    { background: rgba(217, 70, 239, .15); color: #f0abfc; }
:root[data-theme="dark"] .p-money    { background: rgba(45, 212, 191, .14); color: #5eead4; }

.hm-acts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; margin-bottom: 1.1rem; }
.hm-act {
  display: flex; align-items: center; gap: .8rem; min-width: 0; padding: .85rem .9rem; border-radius: 16px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--edge); color: var(--ink) !important; box-shadow: var(--shadow-card);
  transition: box-shadow .15s, transform .15s, border-color .15s;
}
.hm-act:hover { box-shadow: var(--shadow-lift); transform: translateY(-1px); border-color: color-mix(in srgb, var(--acc) 35%, var(--edge)); }
.hm-act-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hm-act-t b { font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-act-t span { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-act-go { color: var(--ink-3); flex: none; transition: transform .15s, color .15s; }
.hm-act:hover .hm-act-go { color: var(--acc); transform: translateX(2px); }

.hm-sec { display: flex; align-items: baseline; gap: .6rem; margin: 1.6rem 0 .75rem; }
.hm-sec h2 { margin: 0; flex: 1; font-size: 18px; }

.hm-prods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.hm-prod { background: var(--surface); border: 1px solid var(--edge); border-radius: 16px; padding: 1rem 1.1rem; box-shadow: var(--shadow-card); min-width: 0; }
.hm-prod-hd { display: flex; align-items: center; gap: .7rem; }
.hm-prod-hd b { font-size: 15.5px; }
.hm-links { display: flex; flex-wrap: wrap; gap: .4rem; }
.hm-links a {
  font-size: 13px; font-weight: 600; text-decoration: none; color: var(--ink); padding: .32rem .7rem; border-radius: 999px;
  background: var(--well); border: 1px solid var(--edge-soft);
}
.hm-links a:hover { background: var(--acc-soft); color: var(--acc); border-color: transparent; }

@media (max-width: 1260px) {
  .hm-prods, .hm-acts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .hm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .hm-acts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
  .hm-act { flex-direction: column; align-items: flex-start; gap: .55rem; padding: .8rem; }
  .hm-act-t b, .hm-act-t span { white-space: normal; }
  .hm-act-go { display: none; }
  .hm-prods { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .hm-hero { padding: 1.15rem 1rem 1rem; border-radius: 18px; }
  .hm-hero-top { flex-direction: column; gap: .7rem; }
  .hm-hero-h { font-size: 23px; }
  .hm-hero-sub { display: none; }
  .hm-stats { gap: .45rem; margin-top: 1rem; }
  .hm-stat { padding: .65rem .7rem; }
  .hm-stat-v { font-size: 21px; }
  .hm-stat-k, .hm-stat-n { font-size: 11.5px; white-space: normal; }
  .hm-links a { min-height: 36px; display: inline-flex; align-items: center; }
}


/* ═══════════════════════════════════════════════════════════════════════
   NEON SPACE (owner, 21 Oct 2026: "I need the whole Studio based on this theme now - the account page, Home and
   the others"). The public site's theme (public/site/site.css): deep space navy, a quiet nebula, bluish neon on
   edges and on what is selected, light glowing buttons, Unbounded Light for page titles.
   It is the default for everyone - System and Dark alike. Someone who picks Light in the Theme menu keeps the light
   look above (every rule here is scoped :root:not([data-theme="light"])). Colours only: no markup, menu or
   behaviour changes. Scoped rules also outrank the shell's own .side / .orb rules in app.html.
   ═══════════════════════════════════════════════════════════════════════ */
:root:not([data-theme="light"]){
  --bg:#05070d; --surface:#0b1222; --well:#0e1729; --track:#121d33;
  --edge:#1c2b45; --edge-soft:#142038; --field:#070d1a; --field-edge:#25385a;
  --ink:#e9f2ff; --ink-2:#98aac3; --ink-3:#66798f;
  --acc:#4cc9ff; --acc-hover:#80dbff; --acc-soft:rgba(76,201,255,.12); --acc-ink:#04101f;
  --sun:#ff9f43; --sun-soft:rgba(255,159,67,.14); --sun-ink:#ffc58a;
  --danger:#ff7a8a; --ok:#5eead4;
  --c-green:#5eead4;  --c-green-bg:rgba(94,234,212,.12);
  --c-amber:#ffc078;  --c-amber-bg:rgba(255,170,80,.13);
  --c-violet:#b4a9ff; --c-violet-bg:rgba(150,140,255,.15);
  --c-blue:#7fd3ff;   --c-blue-bg:rgba(76,201,255,.13);
  --c-rose:#ff9ec7;   --c-rose-bg:rgba(255,110,170,.13);
  --nav-bg:#070c18; --nav-bg-2:#04070f; --nav-ink:#dce8fb; --nav-ink-2:#8ea2bd;
  --nav-hover:rgba(120,190,255,.07); --nav-on:rgba(76,201,255,.13); --nav-edge:rgba(120,190,255,.12); --nav-acc:#4cc9ff;
  --shadow-card:0 0 0 1px rgba(76,201,255,.04) inset, 0 0 24px -12px rgba(76,201,255,.45);
  --shadow-lift:0 0 32px -8px rgba(76,201,255,.45), 0 22px 50px -22px rgba(0,0,0,.9);
  --neon-edge:rgba(110,200,255,.22);
  color-scheme:dark;
}
:root:not([data-theme="light"]) body{
  background:
    radial-gradient(1px 1px at 40px 60px,rgba(207,232,255,.55) 50%,transparent 51%) 0 0/337px 291px,
    radial-gradient(1px 1px at 190px 210px,rgba(159,210,255,.45) 50%,transparent 51%) 0 0/523px 467px,
    radial-gradient(1100px 620px at 65% -10%,rgba(56,120,255,.17),transparent 70%),
    radial-gradient(800px 520px at 0% 100%,rgba(120,90,255,.08),transparent 70%),
    #05070d;
  background-attachment:fixed;
}

/* type: page titles in Unbounded Light */
:root:not([data-theme="light"]) h1{font-family:"Unbounded","Plus Jakarta Sans",sans-serif;font-weight:300;letter-spacing:.005em;font-size:24px}
:root:not([data-theme="light"]) .eyebrow{color:var(--acc);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:500;letter-spacing:.14em;text-transform:uppercase;font-size:11px}

/* cards and rows: a dark glass panel with a thin glowing edge */
:root:not([data-theme="light"]) .card,
:root:not([data-theme="light"]) .rows{background:linear-gradient(180deg,#0d1730,#0a1224);border-color:var(--neon-edge);box-shadow:var(--shadow-card)}
:root:not([data-theme="light"]) .row{background:transparent}
:root:not([data-theme="light"]) .row:hover{background:rgba(76,201,255,.05)}
:root:not([data-theme="light"]) a.card:hover{border-color:rgba(110,200,255,.55);box-shadow:var(--shadow-lift)}
:root:not([data-theme="light"]) .well{background:rgba(14,24,44,.7)}
:root:not([data-theme="light"]) .modal-box,
:root:not([data-theme="light"]) .menu,
:root:not([data-theme="light"]) .pop .panel{background:#0b1222;border-color:var(--neon-edge);box-shadow:0 0 40px -12px rgba(76,201,255,.4),0 30px 70px -20px rgba(0,0,0,.9)}
:root:not([data-theme="light"]) .modal-scrim{background:rgba(2,4,10,.72)}

/* buttons: a light pill that glows a little; secondary is a neon-edged ghost */
:root:not([data-theme="light"]) .btn-primary,
:root:not([data-theme="light"]) .btn.primary,
:root:not([data-theme="light"]) .split > .split-main,
:root:not([data-theme="light"]) .split > .split-caret{
  background:#e9f6ff;color:#04101f;border-color:transparent;text-shadow:none;
  box-shadow:0 0 20px -4px rgba(76,201,255,.6)}
:root:not([data-theme="light"]) .btn-primary:hover:not(:disabled),
:root:not([data-theme="light"]) .btn.primary:hover:not(:disabled){background:#ffffff;color:#04101f;box-shadow:0 0 28px -2px rgba(76,201,255,.8)}
:root:not([data-theme="light"]) .split > .split-caret{border-left:1px solid rgba(4,16,31,.2)}
:root:not([data-theme="light"]) .split > .split-main:disabled{background:#2a3954;color:#8ea2bd;box-shadow:none}
:root:not([data-theme="light"]) .btn-secondary{background:rgba(12,22,42,.8);color:var(--ink);border-color:var(--neon-edge);box-shadow:none}
:root:not([data-theme="light"]) .btn-secondary:hover:not(:disabled){border-color:rgba(110,200,255,.6);background:rgba(16,30,56,.9);box-shadow:0 0 16px -6px rgba(76,201,255,.7)}
:root:not([data-theme="light"]) .btn-ghost:hover:not(:disabled){background:rgba(76,201,255,.08)}
:root:not([data-theme="light"]) .btn-danger{background:#e5484d}

/* things you press and pick */
:root:not([data-theme="light"]) .chip{background:rgba(11,18,34,.8);border-color:var(--neon-edge)}
:root:not([data-theme="light"]) .chip:hover{border-color:rgba(110,200,255,.5)}
:root:not([data-theme="light"]) .chip.on{background:rgba(76,201,255,.14);color:#bfefff;border-color:rgba(76,201,255,.6);box-shadow:0 0 14px -6px rgba(76,201,255,.8)}
:root:not([data-theme="light"]) .seg{background:rgba(12,20,38,.9);box-shadow:inset 0 0 0 1px var(--edge)}
:root:not([data-theme="light"]) .seg > button.on{background:rgba(76,201,255,.14);color:#bfefff;box-shadow:inset 0 0 0 1px rgba(76,201,255,.45),0 0 14px -6px rgba(76,201,255,.8)}
:root:not([data-theme="light"]) .ptabs{background:rgba(12,20,38,.9);box-shadow:inset 0 0 0 1px var(--edge)}
:root:not([data-theme="light"]) .ptabs > a.on{background:rgba(76,201,255,.14);color:#bfefff;box-shadow:inset 0 0 0 1px rgba(76,201,255,.45),0 0 14px -6px rgba(76,201,255,.8)}
:root:not([data-theme="light"]) .tog .slider{background:#22324f}
:root:not([data-theme="light"]) .tog input:checked + .slider{background:var(--acc);box-shadow:0 0 12px -2px rgba(76,201,255,.8)}
:root:not([data-theme="light"]) input:focus,
:root:not([data-theme="light"]) select:focus,
:root:not([data-theme="light"]) textarea:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(76,201,255,.15),0 0 18px -6px rgba(76,201,255,.7)}
:root:not([data-theme="light"]) table.data th{color:#8fb8dd}
:root:not([data-theme="light"]) table.data tr:hover td{background:rgba(76,201,255,.05)}
:root:not([data-theme="light"]) .empty .icon{background:rgba(76,201,255,.1);color:var(--acc);box-shadow:0 0 18px -6px rgba(76,201,255,.7)}
:root:not([data-theme="light"]) .bar > i{box-shadow:0 0 10px rgba(76,201,255,.6)}
:root:not([data-theme="light"]) .avatar{background:conic-gradient(from 210deg,#4cc9ff,#8a8dff,#ff9f43,#4cc9ff)}

/* the shell: a deep navy menu, neon on what is open */
:root:not([data-theme="light"]) .side{background:linear-gradient(180deg,rgba(9,15,30,.96),rgba(4,7,15,.98));border-right-color:rgba(120,190,255,.12)}
:root:not([data-theme="light"]) .side .nav-item.on{color:#fff;background:var(--nav-on);box-shadow:inset 0 0 0 1px rgba(76,201,255,.25)}
:root:not([data-theme="light"]) .side .nav-item.on .i{color:var(--nav-acc);filter:drop-shadow(0 0 6px rgba(76,201,255,.8))}
:root:not([data-theme="light"]) .side .nav-item.on::before{background:var(--nav-acc);box-shadow:0 0 10px var(--nav-acc)}
:root:not([data-theme="light"]) .side .nav-sec{color:#5f7898;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;letter-spacing:.16em}
:root:not([data-theme="light"]) .side-switch{background:rgba(0,0,0,.35)}
:root:not([data-theme="light"]) .side-switch a.on{background:rgba(76,201,255,.16);color:#e9f6ff;box-shadow:inset 0 0 0 1px rgba(76,201,255,.5),0 0 16px -6px rgba(76,201,255,.9)}
:root:not([data-theme="light"]) .topbar{border-bottom-color:rgba(120,190,255,.12);background:rgba(5,7,13,.72)}
:root:not([data-theme="light"]) .me{background:linear-gradient(135deg,#4cc9ff,#8a8dff);color:#04101f;border-color:rgba(255,255,255,.2);box-shadow:0 0 14px -2px rgba(76,201,255,.7)}
:root:not([data-theme="light"]) .topsearch input{background:rgba(12,20,38,.85);border-color:var(--edge)}

/* the voice orb: a cyan core, like the console on the front page */
:root:not([data-theme="light"]) .orb,
:root:not([data-theme="light"]) .agv-ring{background:radial-gradient(circle at 35% 30%,#ffffff,#a8e6ff 28%,#4cc9ff 55%,#2a6cff 80%,#1a1f6b);box-shadow:0 0 40px rgba(76,201,255,.45),0 0 90px rgba(76,201,255,.18)}
:root:not([data-theme="light"]) .agv-ring .agv-mic,
:root:not([data-theme="light"]) .orb .call{background:#04101f;color:#e9f6ff;border-color:#05070d}
:root:not([data-theme="light"]) .agv-meter i.hot{background:var(--acc)}

/* HOME: the welcome band becomes a window onto space */
:root:not([data-theme="light"]) .hm-hero{
  background:
    radial-gradient(1px 1px at 30px 40px,rgba(207,232,255,.7) 50%,transparent 51%) 0 0/180px 140px,
    radial-gradient(1px 1px at 120px 90px,rgba(159,210,255,.6) 50%,transparent 51%) 0 0/260px 200px,
    radial-gradient(560px 280px at 100% 0%,rgba(76,201,255,.22),transparent 62%),
    radial-gradient(460px 280px at 0% 100%,rgba(138,141,255,.20),transparent 60%),
    linear-gradient(135deg,#0b1631 0%,#0a1024 60%,#120f2e 100%);
  border:1px solid rgba(110,200,255,.3);box-shadow:0 0 40px -12px rgba(76,201,255,.5),0 30px 60px -30px rgba(0,0,0,.9)}
:root:not([data-theme="light"]) .hm-hero::after{border-color:rgba(76,201,255,.07)}
:root:not([data-theme="light"]) .hm-hero-date{color:#8fd8ff;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em}
:root:not([data-theme="light"]) .hm-hero-h{font-family:"Unbounded","Plus Jakarta Sans",sans-serif;font-weight:300;letter-spacing:.005em}
:root:not([data-theme="light"]) .hm-hero-h span{background:linear-gradient(100deg,#bfefff,#7fd3ff 45%,#9aa4ff);-webkit-background-clip:text;background-clip:text;color:transparent}
:root:not([data-theme="light"]) .hm-live{background:rgba(76,201,255,.1);border-color:rgba(76,201,255,.35)}
:root:not([data-theme="light"]) .hm-live i{background:var(--acc);animation-name:hmPingNeon}
@keyframes hmPingNeon{0%{box-shadow:0 0 0 0 rgba(76,201,255,.7)}100%{box-shadow:0 0 0 9px rgba(76,201,255,0)}}
:root:not([data-theme="light"]) .hm-stat{background:rgba(8,16,34,.6);border-color:rgba(110,200,255,.2)}
:root:not([data-theme="light"]) .hm-stat:hover{border-color:rgba(110,200,255,.55);background:rgba(12,24,48,.7)}
:root:not([data-theme="light"]) .hm-stat:first-child{background:rgba(76,201,255,.12);border-color:rgba(76,201,255,.55);color:#fff !important;box-shadow:0 0 22px -8px rgba(76,201,255,.8)}
:root:not([data-theme="light"]) .hm-stat:first-child .hm-stat-k,
:root:not([data-theme="light"]) .hm-stat:first-child .hm-stat-n{color:#a8e6ff}
:root:not([data-theme="light"]) .hm-act,
:root:not([data-theme="light"]) .hm-prod{background:linear-gradient(180deg,#0d1730,#0a1224);border-color:var(--neon-edge);box-shadow:var(--shadow-card)}
:root:not([data-theme="light"]) .hm-act:hover{border-color:rgba(110,200,255,.55);box-shadow:var(--shadow-lift)}
:root:not([data-theme="light"]) .hm-act:hover .hm-act-go{color:var(--acc)}
:root:not([data-theme="light"]) .hm-links a{background:rgba(12,22,42,.8);border-color:var(--edge)}
:root:not([data-theme="light"]) .hm-links a:hover{background:rgba(76,201,255,.12);color:#bfefff;border-color:rgba(76,201,255,.4)}
:root:not([data-theme="light"]) .hm-ico{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
:root:not([data-theme="light"]) .p-agents  {background:rgba(76,201,255,.14); color:#7fd8ff}
:root:not([data-theme="light"]) .p-calls   {background:rgba(138,141,255,.16);color:#b4b6ff}
:root:not([data-theme="light"]) .p-leads   {background:rgba(255,159,67,.14); color:#ffc078}
:root:not([data-theme="light"]) .p-numbers {background:rgba(94,234,212,.13); color:#7ff0dc}
:root:not([data-theme="light"]) .p-creative{background:rgba(255,110,170,.14);color:#ffa3cb}
:root:not([data-theme="light"]) .p-image   {background:rgba(200,120,255,.14);color:#dcb0ff}
:root:not([data-theme="light"]) .p-money   {background:rgba(120,190,255,.12);color:#a8e6ff}
@media (prefers-reduced-motion: reduce){:root:not([data-theme="light"]) .hm-live i{animation:none}}


/* ── NEON, refined (owner, 21 Oct 2026, with a sci-fi HUD reference: "the dashboard and the charts are too bluish
   ... colourful, not bold - thin, sharp and nice") ──
   Several thin colours instead of one blue: cyan, violet, magenta, mint and amber, as fine lines and edges; lighter
   type everywhere; numbers set light. Still scoped to the neon theme only. */
:root:not([data-theme="light"]){
  --hud-cyan:#38e1ff; --hud-violet:#9a7bff; --hud-pink:#ff4fd8; --hud-mint:#4dffb5; --hud-amber:#ffb547;
  --acc:#38e1ff; --acc-hover:#7decff; --acc-soft:rgba(56,225,255,.11);
  --chart-a:#38e1ff; --chart-b:#ff4fd8;
  --chart-grad:linear-gradient(90deg,#38e1ff,#9a7bff 55%,#ff4fd8);
  --meter-h:3px; --meter-glow:8px;
  --c-green:#4dffb5;  --c-green-bg:rgba(77,255,181,.10);
  --c-amber:#ffb547;  --c-amber-bg:rgba(255,181,71,.11);
  --c-violet:#9a7bff; --c-violet-bg:rgba(154,123,255,.13);
  --c-blue:#38e1ff;   --c-blue-bg:rgba(56,225,255,.11);
  --c-rose:#ff4fd8;   --c-rose-bg:rgba(255,79,216,.11);
  --edge:#18253d; --neon-edge:rgba(130,170,255,.16);
  --shadow-card:none;
}
/* lighter, sharper type */
:root:not([data-theme="light"]) body{font-weight:400}
:root:not([data-theme="light"]) b,
:root:not([data-theme="light"]) strong{font-weight:500}
:root:not([data-theme="light"]) h2,
:root:not([data-theme="light"]) h3{font-weight:500}
:root:not([data-theme="light"]) .btn{font-weight:500}
:root:not([data-theme="light"]) .nav-item{font-weight:400}
:root:not([data-theme="light"]) .nav-item.on{font-weight:500}
:root:not([data-theme="light"]) #view [style*="font-weight:650"],
:root:not([data-theme="light"]) #view [style*="font-weight:700"]{font-weight:300 !important;letter-spacing:-.01em}
:root:not([data-theme="light"]) .hm-stat-v{font-weight:300;letter-spacing:-.01em}
:root:not([data-theme="light"]) .cst .v,
:root:not([data-theme="light"]) .stat .v,
:root:not([data-theme="light"]) .chan-big{font-weight:300}

/* cards: a hairline edge that runs cyan -> violet -> magenta, like the HUD's frames */
:root:not([data-theme="light"]) .card,
:root:not([data-theme="light"]) .rows,
:root:not([data-theme="light"]) .hm-act,
:root:not([data-theme="light"]) .hm-prod,
:root:not([data-theme="light"]) .hm-stat{
  border:1px solid transparent;
  background:linear-gradient(180deg,rgba(13,21,42,.92),rgba(8,13,28,.92)) padding-box,
             linear-gradient(135deg,rgba(56,225,255,.42),rgba(154,123,255,.18) 45%,rgba(255,79,216,.34)) border-box;
  box-shadow:none}
:root:not([data-theme="light"]) a.card:hover,
:root:not([data-theme="light"]) .hm-act:hover,
:root:not([data-theme="light"]) .hm-stat:hover{
  background:linear-gradient(180deg,rgba(16,26,52,.95),rgba(10,16,34,.95)) padding-box,
             linear-gradient(135deg,rgba(56,225,255,.8),rgba(154,123,255,.4) 45%,rgba(255,79,216,.7)) border-box;
  box-shadow:0 0 24px -10px rgba(255,79,216,.45),0 0 24px -10px rgba(56,225,255,.45)}
:root:not([data-theme="light"]) .hm-stat:first-child{
  background:linear-gradient(180deg,rgba(20,30,60,.9),rgba(12,18,40,.9)) padding-box,
             linear-gradient(135deg,#38e1ff,#9a7bff 50%,#ff4fd8) border-box;
  box-shadow:0 0 22px -10px rgba(255,79,216,.6)}
:root:not([data-theme="light"]) .hm-stat:first-child .hm-stat-k,
:root:not([data-theme="light"]) .hm-stat:first-child .hm-stat-n{color:#c9b8ff}

/* the welcome band: a mixed nebula, not all blue */
:root:not([data-theme="light"]) .hm-hero{
  background:
    radial-gradient(1px 1px at 30px 40px,rgba(230,240,255,.75) 50%,transparent 51%) 0 0/180px 140px,
    radial-gradient(1px 1px at 120px 90px,rgba(255,200,240,.55) 50%,transparent 51%) 0 0/260px 200px,
    radial-gradient(520px 260px at 100% 0%,rgba(255,79,216,.20),transparent 62%),
    radial-gradient(480px 280px at 0% 100%,rgba(56,225,255,.18),transparent 60%),
    radial-gradient(420px 260px at 55% 120%,rgba(154,123,255,.20),transparent 65%),
    linear-gradient(135deg,#0a1226 0%,#0b0f24 55%,#140d2a 100%);
  border:1px solid rgba(160,150,255,.28);box-shadow:0 0 36px -14px rgba(255,79,216,.45),0 30px 60px -30px rgba(0,0,0,.9)}
:root:not([data-theme="light"]) .hm-hero-date{color:#ff9be6}
:root:not([data-theme="light"]) .hm-hero-h span{background:linear-gradient(100deg,#7decff,#b9a6ff 50%,#ff8fe3);-webkit-background-clip:text;background-clip:text;color:transparent}

/* selected things: a fine two-colour edge instead of a blue slab */
:root:not([data-theme="light"]) .seg > button.on,
:root:not([data-theme="light"]) .ptabs > a.on{background:rgba(154,123,255,.12);color:#fff;box-shadow:inset 0 0 0 1px rgba(154,123,255,.5),0 0 14px -6px rgba(255,79,216,.7)}
:root:not([data-theme="light"]) .side .nav-item.on{background:linear-gradient(90deg,rgba(56,225,255,.12),rgba(255,79,216,.06));box-shadow:inset 0 0 0 1px rgba(154,123,255,.22)}
:root:not([data-theme="light"]) .side .nav-item.on::before{background:linear-gradient(180deg,#38e1ff,#ff4fd8);box-shadow:0 0 8px rgba(255,79,216,.7)}
:root:not([data-theme="light"]) .side-switch a.on{background:rgba(154,123,255,.14);box-shadow:inset 0 0 0 1px rgba(154,123,255,.5),0 0 14px -6px rgba(255,79,216,.7)}
:root:not([data-theme="light"]) .bar > i{background:var(--chart-grad);box-shadow:0 0 8px rgba(255,79,216,.5)}
:root:not([data-theme="light"]) .bar{height:4px}
:root:not([data-theme="light"]) .me{background:linear-gradient(135deg,#38e1ff,#9a7bff 50%,#ff4fd8)}

/* product icon tints: the HUD's colours */
:root:not([data-theme="light"]) .p-agents  {background:rgba(56,225,255,.12); color:#7decff}
:root:not([data-theme="light"]) .p-calls   {background:rgba(154,123,255,.14);color:#c2b2ff}
:root:not([data-theme="light"]) .p-leads   {background:rgba(255,181,71,.12); color:#ffcf85}
:root:not([data-theme="light"]) .p-numbers {background:rgba(77,255,181,.11); color:#8dffd0}
:root:not([data-theme="light"]) .p-creative{background:rgba(255,79,216,.13); color:#ff9be6}
:root:not([data-theme="light"]) .p-image   {background:rgba(255,120,120,.12);color:#ffb0a8}
:root:not([data-theme="light"]) .p-money   {background:rgba(56,225,255,.10); color:#a8f0ff}


/* ── HOME charts (owner, 21 Oct 2026: "more charts - pie chart, round chart"): three ring gauges, a donut beside
   "How calls ended", a donut of what was billed, and calls by day as two smooth lines. Both themes. ── */
.hm-gauges{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;margin-bottom:.9rem}
@media (max-width:1100px){.hm-gauges{grid-template-columns:minmax(0,1fr)}}
@media (min-width:640px) and (max-width:1100px){.hm-gauges{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hm-gauge{padding:.9rem 1rem}
.hm-ends{display:flex;gap:1.2rem;align-items:center}
.hm-ends-d{flex:none}
@media (max-width:560px){.hm-ends{flex-direction:column;align-items:stretch}.hm-ends-d{align-self:center}}
.hm-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:.5rem;vertical-align:1px;flex:none}
.hm-billed{display:flex;justify-content:space-between;align-items:center;gap:1rem}
:root:not([data-theme="light"]){
  --chart-c:#9a7bff;
  --line-glow:drop-shadow(0 0 4px rgba(56,225,255,.55)) drop-shadow(0 0 8px rgba(255,79,216,.35));
  --arc-glow:drop-shadow(0 0 4px rgba(154,123,255,.45));
}
:root:not([data-theme="light"]) .hm-dot{box-shadow:0 0 6px currentColor}


/* ── the other screens (owner, 21 Oct 2026: "now go ahead with the dashboard and other screens") ── */

/* Tokens the pages already ask for but nothing defined: --line (Live now meter, the carriers card), --warn (amber
   notes on Billing, Numbers, Live now), --accent (the plan picker). Without them the pages fell back to light or
   off-brand literals. */
:root{ --line: var(--edge); --warn: #b45309; --accent: var(--acc); }
:root:not([data-theme="light"]){ --line: #1c2b45; --warn: #ffb547; --accent: #38e1ff; }

/* Billing's tables (class .tbl was used but never styled) read like the rest */
table.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
table.tbl th{text-align:left;font-weight:550;color:var(--ink-2);font-size:13px;padding:.6rem .6rem;border-bottom:1px solid var(--edge);white-space:nowrap}
table.tbl td{padding:.65rem .6rem;border-bottom:1px solid var(--edge-soft)}
table.tbl tr:hover td{background:var(--well)}
/* status pills Create uses (.status.good / .bad / .warn) */
.status.good{background:var(--c-green-bg);color:var(--c-green)}
.status.bad{background:var(--c-rose-bg);color:var(--c-rose)}
.status.warn{background:var(--c-amber-bg);color:var(--c-amber)}
/* Creative's chips, also when Create's own sheet has not loaded yet */
.cr-chips{display:flex;flex-wrap:wrap;gap:.4rem}

/* Analytics */
.an-gauges{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;margin-bottom:.9rem}
@media (max-width:1100px){.an-gauges{grid-template-columns:minmax(0,1fr)}}
@media (min-width:640px) and (max-width:1100px){.an-gauges{grid-template-columns:repeat(2,minmax(0,1fr))}}
.an-ends{display:flex;gap:1.6rem;align-items:center;margin-top:.5rem}
.an-ends-d{flex:none}
.an-ends-l{flex:1;min-width:0}
.an-row{display:flex;align-items:center;gap:.4rem;padding:.55rem 0;border-top:1px solid var(--edge-soft)}
.an-row:first-child{border-top:0}
.an-meter{height:var(--meter-h,5px);border-radius:99px;background:var(--track);margin-top:.4rem;max-width:360px}
.an-meter i{display:block;height:100%;border-radius:99px;box-shadow:0 0 var(--meter-glow,0px) currentColor}
@media (max-width:640px){.an-ends{flex-direction:column;align-items:stretch}.an-ends-d{align-self:center}}
.an-agents{margin-top:.5rem}
.an-legend{display:flex;gap:1rem;font-size:12.5px;margin-bottom:.4rem}
.an-legend i{display:inline-block;width:14px;height:3px;border-radius:2px;margin-right:.4rem;vertical-align:3px}
.an-agent{padding:.7rem 0;border-top:1px solid var(--edge-soft)}
.an-agent:first-of-type{border-top:0}
.an-agent-h{display:flex;flex-wrap:wrap;gap:.2rem .8rem;align-items:baseline}
.an-agent-h b{font-size:14.5px}
.an-agent-h .sub{font-size:13px}
.an-bars{display:flex;flex-direction:column;gap:4px;margin-top:.5rem}
.an-bar{display:block;height:var(--meter-h,5px);border-radius:99px;box-shadow:0 0 var(--meter-glow,0px) currentColor}

/* Neon: every progress strip the pages draw inline (a track of var(--track), a fill of var(--acc)) becomes a thin
   glowing cyan -> violet -> magenta line, like Home's; native checkboxes and radios take the theme's colour. */
:root:not([data-theme="light"]) #view [style*="background:var(--track)"][style*="height:6px"],
:root:not([data-theme="light"]) #view [style*="background:var(--track)"][style*="height:5px"],
:root:not([data-theme="light"]) #view [style*="height:6px"][style*="background:var(--track)"]{height:3px !important;overflow:visible !important}
:root:not([data-theme="light"]) #view [style*="background:var(--track)"] > [style*="background:var(--acc)"]{background:var(--chart-grad) !important;box-shadow:0 0 8px rgba(255,79,216,.45)}
:root:not([data-theme="light"]) .cr-bar > i,
:root:not([data-theme="light"]) .cr-bar > div{background:var(--chart-grad) !important;box-shadow:0 0 8px rgba(255,79,216,.45)}
:root:not([data-theme="light"]) input[type=checkbox],
:root:not([data-theme="light"]) input[type=radio]{accent-color:#38e1ff}
:root:not([data-theme="light"]) input[type=range]{accent-color:#9a7bff}
/* Creative template previews: the photo placeholder was a light-grey box on the dark page */
:root:not([data-theme="light"]) #view svg [fill="#d7dce4"]{fill:#1a2742}
:root:not([data-theme="light"]) #view svg [stroke="#8f99a8"]{stroke:#3c5274}
/* conversation / lead side panels and scrims: darker, with the panel edge lit */
:root:not([data-theme="light"]) .cv-scrim,
:root:not([data-theme="light"]) .lh-scrim{background:rgba(2,4,10,.6)}
:root:not([data-theme="light"]) .cv-panel{background:#0a1222;box-shadow:-1px 0 0 rgba(154,123,255,.3),-30px 0 60px -20px rgba(0,0,0,.9)}
.an-row .grow{flex:1;min-width:0}
/* Live now's lines meter (track var(--line)): thin, its fill keeps its meaning (free / busy / full) and glows */
:root:not([data-theme="light"]) #view [style*="background:var(--line)"][style*="height:"]{height:3px !important;overflow:visible !important}
:root:not([data-theme="light"]) #view [style*="background:var(--line)"] > *{box-shadow:0 0 10px currentColor;color:var(--ok)}
/* coloured number tiles (Campaigns' stat tiles and any .t-* tile): a thin coloured outline over a faint tint, not a block */
:root:not([data-theme="light"]) .cst{background:rgba(10,18,36,.7);border:1px solid var(--edge)}
:root:not([data-theme="light"]) .cst.t-green {background:rgba(77,255,181,.05); border-color:rgba(77,255,181,.30)}
:root:not([data-theme="light"]) .cst.t-rose  {background:rgba(255,79,216,.05); border-color:rgba(255,79,216,.30)}
:root:not([data-theme="light"]) .cst.t-amber {background:rgba(255,181,71,.05); border-color:rgba(255,181,71,.30)}
:root:not([data-theme="light"]) .cst.t-violet{background:rgba(154,123,255,.06);border-color:rgba(154,123,255,.32)}
:root:not([data-theme="light"]) .cst.t-blue  {background:rgba(56,225,255,.05); border-color:rgba(56,225,255,.30)}
:root:not([data-theme="light"]) .cst .k{letter-spacing:.08em}

/* Campaign numbers: ONE box with thin dividers, all in one row (owner, 21 Oct 2026: "6 boxes, 3 above and 3 below -
   make that one line ... or one box and dividers between, that's better"). The 1px gap over an edge-coloured box
   draws the dividers, so it works for 4, 5 or 6 numbers. vs-core.js writes the column count inline, hence !important.
   Two rows of three on a phone. Both themes. */
.cst-grid{grid-template-columns:repeat(auto-fit,minmax(110px,1fr)) !important;gap:1px !important;background:var(--edge);
  border:1px solid var(--edge);border-radius:12px;overflow:hidden}
.cst-grid > .cst,
:root:not([data-theme="light"]) .cst-grid > .cst{border:0 !important;border-radius:0;background:var(--surface) !important;padding:.65rem .8rem}
:root:not([data-theme="light"]) .cst-grid{background:rgba(120,170,255,.14);border-color:rgba(120,170,255,.18)}
:root:not([data-theme="light"]) .cst-grid > .cst{background:#0b1324 !important}
@media (max-width:640px){.cst-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important}}
/* ...and the Campaigns card's own number tiles (app-campaigns.js cstTile / grid: classes cmp-stats / cmp-stat) */
.cmp-stats{grid-template-columns:repeat(auto-fit,minmax(110px,1fr)) !important;gap:1px !important;background:var(--edge);
  border:1px solid var(--edge);border-radius:12px;overflow:hidden}
.cmp-stats > .cmp-stat{border:0 !important;border-radius:0 !important;background:var(--surface) !important;padding:.65rem .8rem !important}
:root:not([data-theme="light"]) .cmp-stats{background:rgba(120,170,255,.14);border-color:rgba(120,170,255,.18)}
:root:not([data-theme="light"]) .cmp-stats > .cmp-stat{background:#0b1324 !important}
.cmp-stats > .cmp-stat > div:first-child{font-weight:400 !important}
@media (max-width:640px){.cmp-stats{grid-template-columns:repeat(3,minmax(0,1fr)) !important}}
/* Billing: the month's donut beside the table, the day-by-day line above it */
.bl-split{display:flex;gap:1.6rem;align-items:center}
.bl-donut{flex:none;display:flex;flex-direction:column;align-items:center;gap:.7rem;padding:.6rem .4rem 0}
.bl-legend{display:flex;flex-direction:column;gap:.25rem;font-size:12.5px;color:var(--ink-2);max-width:200px}
.bl-chart{margin:.8rem 0 .2rem}
.bl-chart svg{display:block;overflow:visible}
.bl-chart-cap{font-size:12.5px;margin-top:.3rem}
@media (max-width:760px){.bl-split{flex-direction:column;align-items:stretch}.bl-donut{align-self:center}}

/* ── 22 Oct 2026 (owner): "the dark theme box borders are colourful, keep one standard colour"; "in campaign the boxes are
   too close, give a little padding"; "the light theme nav bar full green looks pathetic, keep it standard white, let the
   box or hover be what it is now". One hairline colour for every box in the dark theme (the fill stays), a little room
   between campaign cards, and a white sidebar in the light theme with the same highlighted item and hover. ── */
:root{--box-edge:rgba(150,170,205,.18);--box-edge-hover:rgba(170,190,225,.32)}
:root:not([data-theme="light"]) .card,
:root:not([data-theme="light"]) .rows,
:root:not([data-theme="light"]) .hm-act,
:root:not([data-theme="light"]) .hm-prod,
:root:not([data-theme="light"]) .hm-stat,
:root:not([data-theme="light"]) .hm-stat:first-child{
  border:1px solid var(--box-edge);
  background:linear-gradient(180deg,rgba(13,21,42,.92),rgba(8,13,28,.92));
  box-shadow:none}
:root:not([data-theme="light"]) a.card:hover,
:root:not([data-theme="light"]) .hm-act:hover,
:root:not([data-theme="light"]) .hm-stat:hover{
  border-color:var(--box-edge-hover);
  background:linear-gradient(180deg,rgba(16,26,52,.95),rgba(10,16,34,.95));
  box-shadow:0 6px 24px -14px rgba(0,0,0,.6)}
:root:not([data-theme="light"]) .hm-stat:first-child .hm-stat-k,
:root:not([data-theme="light"]) .hm-stat:first-child .hm-stat-n{color:inherit}
:root:not([data-theme="light"]) .cst,
:root:not([data-theme="light"]) .cst.t-green,
:root:not([data-theme="light"]) .cst.t-rose,
:root:not([data-theme="light"]) .cst.t-amber,
:root:not([data-theme="light"]) .cst.t-violet,
:root:not([data-theme="light"]) .cst.t-blue{border-color:var(--box-edge)}
/* campaign cards: room to breathe between them */
.cmp-card{margin-bottom:1rem !important}
@media (min-width:900px){.cmp-card{margin-bottom:1.15rem !important}}
/* light theme: a white sidebar; the highlighted item and hover keep their look */
:root[data-theme="light"]{
  --nav-bg:#ffffff; --nav-bg-2:#ffffff; --nav-ink:#1c2620; --nav-ink-2:#5d6b63;
  --nav-hover:#f1f5f2; --nav-edge:#e4e9e5; --nav-acc:#1f8a3c}
:root[data-theme="light"] .side{--ink-3:#7a877f;--track:#eef2ef;--surface:#ffffff;--field:#f6f8f7;--field-edge:#dde4df;box-shadow:1px 0 0 var(--nav-edge)}
:root[data-theme="light"] .side .nav-item.on{color:#14612b}
:root[data-theme="light"] .side .nav-sec{color:#7a877f}
:root[data-theme="light"] .side .btn-secondary{background:#f3f6f4;color:var(--nav-ink);border-color:#e1e7e3}
:root[data-theme="light"] .side .btn-secondary:hover:not(:disabled){background:#e9efeb}
:root[data-theme="light"] .side .dots:hover{color:var(--nav-ink)}
:root[data-theme="light"] .side-brand b{color:var(--nav-ink)}
/* light theme Agents / Creative switch (owner, 22 Oct 2026: "the toggle which is green make it orange, and the grey
   one a white background with a box border, industry style") */
:root[data-theme="light"] .side-switch{background:#ffffff;border:1px solid #e1e6e2;gap:4px}
:root[data-theme="light"] .side-switch a{background:#ffffff;color:var(--nav-ink);border:1px solid #dde3df;box-shadow:0 1px 1px rgba(16,24,20,.04)}
:root[data-theme="light"] .side-switch a:hover{color:var(--nav-ink);border-color:#c9d2cc;background:#fafbfa}
:root[data-theme="light"] .side-switch a.on{background:#f08a1c;border-color:#e07b10;color:#ffffff;box-shadow:0 1px 3px rgba(224,123,16,.35)}
:root[data-theme="light"] .side-switch a.on .i{color:#ffffff}