/* ==========================================================================
   Quality Thought — AI FDE admin panel.

   Same brand, different job. The public page is a persuasion surface; this is a
   tool people sit in for hours, so it is denser, quieter, and theme-aware —
   navy chrome with a light or dark working area, and orange reserved for the
   primary action in any given view.
   ========================================================================== */

:root {
  /* Same values as the public site, sampled from the logo. */
  --o-600: #c62d03;
  --o-500: #ec3705;
  --o-400: #f96f08;
  --o-300: #ff8c08;
  --o-050: #fff4ec;

  --nav-bg: #070835;
  --nav-bg-2: #0d0e4a;
  --nav-ink: #cdcef0;
  --nav-ink-dim: #8b8cc0;
  --nav-active: #ff8c08;

  --bg: #f4f5fa;
  --surface: #ffffff;
  --surface-2: #fafaff;
  --line: #e3e4f0;
  --line-2: #eeeff7;
  --ink: #171733;
  --ink-2: #4d4d70;
  --ink-3: #757595;

  --ok: #12805c;
  --ok-bg: #e7f6ef;
  --warn: #a86a00;
  --warn-bg: #fdf3e2;
  --err: #c62f34;
  --err-bg: #fdeced;
  --info: #2a51c8;
  --info-bg: #eaeeff;

  --f-display: 'Manrope', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
  --f-body: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
  --f-mono: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, monospace;

  --r: 10px;
  --r-lg: 14px;
  --sh: 0 1px 2px rgba(7, 8, 53, .05), 0 2px 8px rgba(7, 8, 53, .05);
  --sh-lg: 0 10px 30px rgba(7, 8, 53, .13);

  --top-h: 60px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #0a0922;
    --surface: #12112f;
    --surface-2: #171638;
    --line: #272552;
    --line-2: #1e1c44;
    --ink: #eceafc;
    --ink-2: #b3b1d6;
    --ink-3: #8886b0;
    --ok-bg: #0e3328;
    --warn-bg: #37280d;
    --err-bg: #3a1518;
    --info-bg: #17204d;
  }
}

:root[data-theme='dark'] {
  --bg: #0a0922;
  --surface: #12112f;
  --surface-2: #171638;
  --line: #272552;
  --line-2: #1e1c44;
  --ink: #eceafc;
  --ink-2: #b3b1d6;
  --ink-3: #8886b0;
  --ok-bg: #0e3328;
  --warn-bg: #37280d;
  --err-bg: #3a1518;
  --info-bg: #17204d;
}

*, *::before, *::after { box-sizing: border-box; }

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

h1, h2, h3, h4 { font-family: var(--f-display); margin: 0; line-height: 1.2; letter-spacing: -.02em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }
:focus-visible { outline: 2px solid var(--o-400); outline-offset: 2px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------- shell */

/* The rail width snaps rather than animating, deliberately.
   Transitioning grid-template-columns does not work when the track size comes
   from a custom property — Chrome holds the start value and the sidebar never
   resizes at all. Registering the property and transitioning the variable
   instead leaves the transition permanently "running" without ever advancing.
   Both were tried; an instant width change is correct and a broken animation is
   not, so the toggle is instant and the label/icon states carry the feedback. */
.shell {
  --side-w: 250px;
  display: grid;
  grid-template-columns: var(--side-w) 1fr;
  min-height: 100vh;
}

.side {
  background: linear-gradient(180deg, var(--nav-bg) 0%, var(--nav-bg-2) 100%);
  color: var(--nav-ink); display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  /* Only the nav list scrolls. Scrolling the whole sidebar pushes the profile
     link off the bottom of a laptop screen, because nineteen modules do not fit
     in 820px. */
  overflow: hidden;
}
.side nav::-webkit-scrollbar { width: 6px; }
.side nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 3px; }

.side-brand {
  display: flex; align-items: center; gap: 10px; padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,.09); flex: none;
}
.side-brand img { width: 32px; height: 32px; }
.side-brand b { font-family: var(--f-display); font-size: 14.5px; color: #fff; display: block; }
.side-brand span { font-size: 10.6px; color: var(--o-300); letter-spacing: .08em; text-transform: uppercase; }

.side nav { padding: 12px 10px; flex: 1; overflow-y: auto; min-height: 0; }
/* Section heading, now a real button that opens and closes its group. */
.side-group {
  width: 100%; display: flex; align-items: center; gap: 8px;
  font-family: inherit; font-size: 10.4px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--nav-ink-dim);
  padding: 14px 10px 7px; border: 0; background: transparent; cursor: pointer;
  text-align: left; transition: color .14s ease;
}
.side-group:hover { color: #fff; }
.side-group .nav-label { flex: 1; min-width: 0; }

.grp-chev {
  width: 13px; height: 13px; flex: none; opacity: .75;
  transition: transform .18s ease;
}
.grp-chev svg { width: 13px; height: 13px; display: block; }

/* Closed: chevron points right and the items are removed from the flow, so the
   sections above and below close up rather than leaving a gap. */
.nav-group.is-closed .grp-chev { transform: rotate(-90deg); }
.nav-group.is-closed .nav-group-items { display: none; }

@media (prefers-reduced-motion: reduce) { .grp-chev { transition: none; } }
.side a.nav-item {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 8px;
  color: var(--nav-ink); font-size: 13.8px; font-weight: 500; margin-bottom: 1px;
  transition: background-color .14s ease, color .14s ease;
}
.side a.nav-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.side a.nav-item.active { background: rgba(236,55,5,.22); color: #fff; font-weight: 600; }
.side a.nav-item.active .nav-ico { color: var(--nav-active); }
.nav-ico { width: 17px; height: 17px; flex: none; opacity: .9; }
.nav-ico svg { width: 17px; height: 17px; stroke-width: 1.8; }
.nav-count {
  margin-left: auto; font-size: 10.8px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  background: var(--o-500); color: #fff;
}

.side-foot { padding: 12px; border-top: 1px solid rgba(255,255,255,.09); flex: none; }
.side-user { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; }
.side-user:hover { background: rgba(255,255,255,.07); }
.side-user .av { width: 32px; height: 32px; border-radius: 50%; flex: none; }
.side-user b { display: block; font-size: 13px; color: #fff; font-weight: 600; }
.side-user span { font-size: 11.4px; color: var(--nav-ink-dim); }

.side-collapse {
  width: 38px; height: 38px; flex: none; border: 1px solid var(--line);
  background: var(--surface); border-radius: 8px; cursor: pointer; color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .14s ease, color .14s ease;
}
.side-collapse:hover { border-color: var(--ink-3); color: var(--ink); }
.side-collapse svg { width: 17px; height: 17px; }
html.side-collapsed .side-collapse svg { transform: rotate(180deg); }

/* ------------------------------------------------- collapsed rail

   Toggling a class on <html> rather than on .side, so the pre-paint script in
   the layout can set it before any element exists and the sidebar never renders
   at the wrong width first.

   Labels are hidden with the sr-only pattern, not display:none — the rail is a
   visual affordance, and a screen reader should still get "Leads", not an
   unlabelled icon. Sighted mouse users get a native tooltip, applied by
   admin.js only while collapsed. */

html.side-collapsed .shell { --side-w: 68px; }

html.side-collapsed .side .nav-label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

html.side-collapsed .side-brand { justify-content: center; padding-inline: 0; }
html.side-collapsed .side nav { padding-inline: 8px; }

html.side-collapsed .side .nav-item,
html.side-collapsed .side-user { justify-content: center; gap: 0; padding-inline: 0; }

/* The group heading collapses to a divider — the grouping is still legible,
   without a truncated word pretending to be one. The chevron goes with it, and
   every section is forced open: in a 68px rail there is nothing to click and no
   room to explain why an icon vanished. */
html.side-collapsed .side-group {
  padding: 12px 14px 6px; margin: 0; cursor: default; pointer-events: none;
}
html.side-collapsed .side-group::after {
  content: ''; display: block; height: 1px; background: rgba(255,255,255,.13);
}
html.side-collapsed .grp-chev { display: none; }
html.side-collapsed .nav-group.is-closed .nav-group-items { display: block; }

/* The badge has no room beside the label any more, so it rides the icon. */
html.side-collapsed .nav-item { position: relative; }
html.side-collapsed .nav-count {
  position: absolute; top: 4px; right: 10px; margin: 0;
  min-width: 16px; padding: 0 4px; font-size: 9.6px; line-height: 16px; text-align: center;
}


/* Only a rail on desktop. Below 1000px the sidebar is a full-width drawer that
   is either open or closed, and a 68px version of it would be useless. */
@media (max-width: 1000px) {
  html.side-collapsed .shell { --side-w: 250px; }
  html.side-collapsed .side .nav-label {
    position: static; width: auto; height: auto; margin: 0;
    overflow: visible; clip: auto; white-space: normal;
  }
  html.side-collapsed .side-brand,
  html.side-collapsed .side .nav-item,
  html.side-collapsed .side-user { justify-content: flex-start; gap: 11px; padding-inline: 11px; }
  html.side-collapsed .side-group::after { display: none; }
  html.side-collapsed .nav-count { position: static; }
  /* The hamburger is the nav control at this width; a rail makes no sense. */
  .side-collapse { display: none; }
}

.av {
  display: grid; place-items: center; object-fit: cover;
  background: linear-gradient(135deg, var(--o-500), var(--o-300));
  color: #fff; font-family: var(--f-display); font-weight: 800; font-size: 12px;
}

/* ------------------------------------------------------------- topbar */

.main { min-width: 0; display: flex; flex-direction: column; }

.top {
  height: var(--top-h); background: var(--surface); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 14px; padding: 0 20px;
  position: sticky; top: 0; z-index: 40;
}
.top h1 { font-size: 17px; font-weight: 800; }
.top .crumb { font-size: 12.4px; color: var(--ink-3); }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 9px; }

.side-toggle {
  display: none; width: 38px; height: 38px; border: 1px solid var(--line);
  background: var(--surface); border-radius: 8px; cursor: pointer; color: var(--ink);
  align-items: center; justify-content: center;
}

.content { padding: 22px 20px 60px; flex: 1; }

@media (max-width: 1000px) {
  .shell { grid-template-columns: 1fr; }
  .side {
    position: fixed; inset: 0 auto 0 0; width: 260px; z-index: 60;
    transform: translateX(-100%); transition: transform .24s cubic-bezier(.4,0,.2,1);
  }
  .side[data-open="true"] { transform: translateX(0); box-shadow: var(--sh-lg); }
  .side-toggle { display: inline-flex; }
  .side-scrim {
    position: fixed; inset: 0; background: rgba(7,8,53,.5); z-index: 55; display: none;
  }
  .side-scrim[data-open="true"] { display: block; }
}

/* ------------------------------------------------------------ buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 15px; border-radius: 8px; border: 1px solid transparent;
  font-family: var(--f-display); font-size: 13.4px; font-weight: 700; cursor: pointer;
  white-space: nowrap; transition: background-color .14s ease, border-color .14s ease, color .14s ease, transform .14s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn svg { width: 15px; height: 15px; }
.btn-primary { background: var(--o-500); color: #fff; }
.btn-primary:hover { background: var(--o-600); }
.btn-secondary { background: var(--surface); border-color: var(--line); color: var(--ink); }
.btn-secondary:hover { border-color: var(--ink-3); }
.btn-danger { background: var(--err); color: #fff; }
.btn-danger:hover { filter: brightness(.92); }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--line-2); color: var(--ink); }
.btn-sm { padding: 5px 10px; font-size: 12.4px; border-radius: 7px; }
.btn-sm svg { width: 13px; height: 13px; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* -------------------------------------------------------------- cards */

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh);
}
.card-head {
  padding: 15px 18px; border-bottom: 1px solid var(--line-2);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.card-head h2 { font-size: 15px; font-weight: 800; }
.card-head .sub { font-size: 12.6px; color: var(--ink-3); }
.card-head .spacer { margin-left: auto; }
.card-body { padding: 18px; }
.card-foot { padding: 13px 18px; border-top: 1px solid var(--line-2); display: flex; gap: 9px; flex-wrap: wrap; }

.grid { display: grid; gap: 16px; }
.g-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.g-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.g-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* --------------------------------------------------------- stat tiles */

.tile {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 16px 18px; box-shadow: var(--sh);
}
.tile .label { font-size: 12.2px; color: var(--ink-3); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.tile .value {
  font-family: var(--f-display); font-size: 1.85rem; font-weight: 800;
  letter-spacing: -.035em; margin-top: 6px; line-height: 1;
}
.tile .delta { margin-top: 7px; font-size: 12.4px; color: var(--ink-3); }
.tile.accent { border-color: var(--o-300); }
.tile.accent .value { color: var(--o-600); }

/* ------------------------------------------------------------- tables */

.table-tools {
  display: flex; flex-wrap: wrap; gap: 9px; align-items: center;
  padding: 13px 16px; border-bottom: 1px solid var(--line-2);
}
.table-tools .grow { flex: 1; min-width: 180px; }
.table-tools .spacer { margin-left: auto; }

.search-box { position: relative; }
.search-box svg {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; stroke: var(--ink-3); pointer-events: none;
}
.search-box input { padding-left: 33px; }

.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 13.6px; }
table.data th, table.data td {
  padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line-2);
  vertical-align: middle;
}
table.data thead th {
  background: var(--surface-2); font-family: var(--f-display); font-size: 11.4px;
  font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3);
  white-space: nowrap; position: sticky; top: 0; z-index: 2;
}
table.data thead th a { display: inline-flex; align-items: center; gap: 5px; color: inherit; }
table.data thead th a:hover { color: var(--o-600); }
table.data thead th .sort-ind { font-size: 9px; opacity: .55; }
table.data thead th.is-sorted a { color: var(--o-600); }
table.data thead th.is-sorted .sort-ind { opacity: 1; }
table.data tbody tr:hover { background: var(--surface-2); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data td.actions { text-align: right; white-space: nowrap; }
table.data td.num { font-family: var(--f-mono); font-size: 12.8px; }
table.data .strong { font-weight: 700; color: var(--ink); }
table.data .dim { color: var(--ink-3); font-size: 12.6px; }
table.data .clip { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.col-check { width: 34px; }
.col-check input { width: 15px; height: 15px; accent-color: var(--o-500); cursor: pointer; }

.bulkbar {
  display: none; align-items: center; gap: 10px; padding: 10px 16px;
  background: var(--info-bg); border-bottom: 1px solid var(--line-2); font-size: 13px;
}
.bulkbar[data-active="true"] { display: flex; }
.bulkbar .spacer { margin-left: auto; }

.pager {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 12px 16px; border-top: 1px solid var(--line-2); font-size: 13px; color: var(--ink-2);
}
.pager .spacer { margin-left: auto; }
.pager .pages { display: flex; gap: 4px; }
.pager .pages a, .pager .pages span {
  min-width: 30px; height: 30px; display: grid; place-items: center; padding: 0 8px;
  border: 1px solid var(--line); border-radius: 7px; font-size: 12.8px; background: var(--surface);
}
.pager .pages a:hover { border-color: var(--o-400); color: var(--o-600); }
.pager .pages .current { background: var(--o-500); border-color: var(--o-500); color: #fff; font-weight: 700; }
.pager .pages .disabled { opacity: .4; }

.empty {
  padding: 46px 20px; text-align: center; color: var(--ink-3);
}
.empty h3 { font-size: 15px; color: var(--ink-2); margin-bottom: 6px; }
.empty p { font-size: 13.4px; max-width: 44ch; margin: 0 auto 16px; }

/* ------------------------------------------------------------- badges */

.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px;
  font-size: 11.4px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
.b-new { background: var(--info-bg); color: var(--info); }
.b-contacted { background: var(--warn-bg); color: var(--warn); }
.b-qualified { background: #eae4ff; color: #5b2fc9; }
.b-enrolled { background: var(--ok-bg); color: var(--ok); }
.b-not_interested { background: var(--line-2); color: var(--ink-3); }
.b-junk { background: var(--err-bg); color: var(--err); }
.b-ok { background: var(--ok-bg); color: var(--ok); }
.b-off { background: var(--line-2); color: var(--ink-3); }
.b-warn { background: var(--warn-bg); color: var(--warn); }
.b-err { background: var(--err-bg); color: var(--err); }
.b-draft { background: var(--line-2); color: var(--ink-3); }
.b-review { background: var(--warn-bg); color: var(--warn); }
.b-published { background: var(--ok-bg); color: var(--ok); }
.b-discarded { background: var(--err-bg); color: var(--err); }
.b-high { background: var(--err-bg); color: var(--err); }
.b-medium { background: var(--warn-bg); color: var(--warn); }
.b-low { background: var(--line-2); color: var(--ink-3); }

.dot-ok, .dot-bad { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-ok { background: var(--ok); }
.dot-bad { background: var(--err); }

/* -------------------------------------------------------------- forms */

.field { margin-bottom: 14px; }
.field > label {
  display: block; font-size: 12.8px; font-weight: 600; color: var(--ink-2); margin-bottom: 5px;
}
.field .hint { display: block; font-size: 12px; color: var(--ink-3); margin-top: 5px; }
.req { color: var(--err); }

.input, .select, .textarea {
  width: 100%; padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--ink); font-family: inherit; font-size: 13.8px;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--o-400); box-shadow: 0 0 0 3px rgba(249,115,22,.13);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-3); opacity: .75; }
.textarea { min-height: 100px; resize: vertical; line-height: 1.6; }
.textarea.code { font-family: var(--f-mono); font-size: 12.6px; }
.textarea.tall { min-height: 240px; }
.select {
  appearance: none; padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23757595' stroke-width='2.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.input.mono { font-family: var(--f-mono); font-size: 12.8px; }

.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 760px) { .row, .row-3 { grid-template-columns: 1fr; } }

.check { display: flex; align-items: flex-start; gap: 9px; font-size: 13.4px; cursor: pointer; margin-bottom: 10px; }
.check input { width: 16px; height: 16px; accent-color: var(--o-500); margin-top: 2px; flex: none; cursor: pointer; }
.check span { color: var(--ink-2); }
.check b { display: block; color: var(--ink); font-weight: 600; }

.switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
  width: 38px; height: 21px; border-radius: 999px; background: var(--line); position: relative;
  transition: background-color .16s ease; flex: none;
}
.switch .track::after {
  content: ''; position: absolute; top: 2.5px; left: 2.5px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; transition: transform .16s ease; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.switch input:checked + .track { background: var(--o-500); }
.switch input:checked + .track::after { transform: translateX(17px); }
.switch input:focus-visible + .track { outline: 2px solid var(--o-400); outline-offset: 2px; }

.field-error { color: var(--err); font-size: 12.2px; margin-top: 4px; display: block; }
.validation-summary { margin-bottom: 14px; }
.validation-summary ul { margin: 0; padding-left: 18px; }

/* ------------------------------------------------------------- alerts */

.alert {
  display: flex; gap: 10px; padding: 11px 14px; border-radius: var(--r);
  font-size: 13.4px; margin-bottom: 16px; border: 1px solid transparent;
}
.alert svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.alert-ok { background: var(--ok-bg); color: var(--ok); border-color: currentColor; }
.alert-err { background: var(--err-bg); color: var(--err); border-color: currentColor; }
.alert-warn { background: var(--warn-bg); color: var(--warn); border-color: currentColor; }
.alert-info { background: var(--info-bg); color: var(--info); border-color: currentColor; }
.alert strong { font-weight: 700; }

/* --------------------------------------------------------------- tabs */

.tabs {
  display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--line);
  margin-bottom: 20px; scrollbar-width: thin;
}
.tabs a {
  padding: 9px 15px; font-size: 13.4px; font-weight: 600; color: var(--ink-2);
  border-bottom: 2px solid transparent; white-space: nowrap; margin-bottom: -1px;
  transition: color .14s ease, border-color .14s ease;
}
.tabs a:hover { color: var(--ink); }
.tabs a.active { color: var(--o-600); border-bottom-color: var(--o-500); }

/* --------------------------------------------------------- key/value */

dl.kv { display: grid; grid-template-columns: minmax(140px, auto) 1fr; gap: 9px 20px; margin: 0; font-size: 13.4px; }
dl.kv dt { color: var(--ink-3); }
dl.kv dd { margin: 0; color: var(--ink); font-weight: 500; word-break: break-word; }
dl.kv dd.mono { font-family: var(--f-mono); font-size: 12.6px; }

/* ------------------------------------------------------- role matrix */

.matrix-wrap { overflow-x: auto; }
table.matrix { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; }
table.matrix th, table.matrix td { padding: 8px 10px; border-bottom: 1px solid var(--line-2); }
table.matrix thead th {
  background: var(--surface-2); font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); text-align: center;
}
table.matrix thead th:first-child { text-align: left; }
table.matrix td { text-align: center; }
table.matrix td:first-child { text-align: left; }
table.matrix td:first-child b { display: block; font-size: 13.2px; }
table.matrix td:first-child span { font-size: 11.8px; color: var(--ink-3); }
table.matrix input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--o-500); cursor: pointer; }
table.matrix tbody tr:hover { background: var(--surface-2); }
.matrix-group td {
  background: var(--surface-2); font-family: var(--f-display); font-size: 11px;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}

/* ------------------------------------------------------------- login */

.login-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(900px 460px at 15% -10%, rgba(236,55,5,.24), transparent 60%),
    radial-gradient(700px 400px at 88% 108%, rgba(60,50,200,.3), transparent 62%),
    linear-gradient(160deg, #070835 0%, #0d0e4a 70%);
}
.login-card {
  width: min(420px, 100%); background: var(--surface); border-radius: 18px;
  padding: 32px 30px; box-shadow: var(--sh-lg);
}
.login-card .brand { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; }
.login-card .brand img { width: 40px; height: 40px; }
.login-card .brand b { display: block; font-family: var(--f-display); font-size: 15.5px; }
.login-card .brand span { font-size: 11px; color: var(--o-600); letter-spacing: .07em; text-transform: uppercase; }
.login-card h1 { font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.login-card .sub { font-size: 13.4px; color: var(--ink-3); margin-bottom: 22px; }
.login-foot { margin-top: 20px; text-align: center; font-size: 12.4px; color: var(--ink-3); }
.login-foot a { color: var(--o-600); }

/* ------------------------------------------------------------ helpers */

.stack { display: grid; gap: 16px; }
.inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.muted { color: var(--ink-3); }
.small { font-size: 12.4px; }
.mono { font-family: var(--f-mono); font-size: 12.6px; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }
.mb-2 { margin-bottom: 16px; }
.page-head { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.page-head h2 { font-size: 18px; font-weight: 800; }
.page-head p { font-size: 13.4px; color: var(--ink-3); margin-top: 4px; max-width: 66ch; }
.page-head .spacer { margin-left: auto; }

.bar { height: 6px; border-radius: 999px; background: var(--line-2); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 999px; background: var(--o-500); }

.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.media-item {
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface);
  display: flex; flex-direction: column;
}
.media-item .thumb {
  aspect-ratio: 4/3; background: var(--surface-2); display: grid; place-items: center; overflow: hidden;
}
.media-item .thumb img { width: 100%; height: 100%; object-fit: cover; }
.media-item .meta { padding: 9px 10px; font-size: 11.8px; }
.media-item .meta b { display: block; font-size: 12.2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-item .meta span { color: var(--ink-3); }
.media-item .row-actions { display: flex; gap: 5px; padding: 0 10px 10px; }

.copy-field { display: flex; gap: 6px; }
.copy-field input { flex: 1; }

.timeline { display: grid; gap: 12px; }
.timeline .entry {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; font-size: 13.2px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line-2);
}
.timeline .entry:last-child { border-bottom: 0; padding-bottom: 0; }
.timeline .when { color: var(--ink-3); font-size: 12.2px; white-space: nowrap; }

.article-preview { max-width: 74ch; }
.article-preview h2 { font-size: 1.2rem; margin: 22px 0 10px; }
.article-preview h3 { font-size: 1.05rem; margin: 18px 0 8px; }
.article-preview p { margin-bottom: 12px; color: var(--ink-2); }
.article-preview ul, .article-preview ol { margin: 0 0 14px 20px; }
.article-preview li { margin-bottom: 5px; color: var(--ink-2); }
.article-preview a { color: var(--o-600); text-decoration: underline; }

@media print {
  .side, .top-actions, .table-tools, .pager, .btn { display: none !important; }
  .shell { grid-template-columns: 1fr; }
}

/* Stored API key: masked value plus a Replace action, sitting on one line.
   The mask is a readonly input rather than plain text so it inherits the field
   styling — a stored secret should look like the field it replaces, not like a
   caption next to an empty one. */
.key-stored { display: flex; gap: 8px; align-items: center; }
.key-stored input[readonly] {
  flex: 1; min-width: 0;
  color: var(--muted);
  background: var(--surface-2);
  cursor: default;
}
.key-stored .btn { flex: none; }
.mt-1 { margin-top: 8px; }

/* ------------------------------------------------- generation progress */
/* Shown while the Content Studio drafts. The bar is driven by characters
   actually streamed back from the provider, so it can sit still — that is
   information, not a bug, and it is why nothing here animates on a timer. */
.gen-progress {
  margin: 0 20px 20px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
}
.gen-progress-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.gen-stage { font-weight: 600; color: var(--ink); }
.gen-pct {
  font-family: var(--f-mono);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--o-600);
}
.gen-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--line-2);
  overflow: hidden;
}
.gen-bar-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--o-400), var(--o-600));
  transition: width .45s ease;
}
.gen-topic {
  margin: 10px 0 0;
  font-style: italic;
  color: var(--ink-2);
}
.gen-meta { margin: 4px 0 0; font-variant-numeric: tabular-nums; }

.gen-progress.is-failed { border-color: var(--err); background: var(--err-bg); }
.gen-progress.is-failed .gen-bar-fill { background: var(--err); }
.gen-progress.is-failed .gen-pct { color: var(--err); }

@media (prefers-reduced-motion: reduce) {
  .gen-bar-fill { transition: none; }
}

/* Media tile actions.
   The tiles are only ~150px wide, so Copy path takes a row of its own and the
   open/delete pair shares the next. Delete carries a word as well as an icon —
   as a lone glyph it read as decoration and people missed it. */
.media-item .row-actions { flex-wrap: wrap; }
.media-item .row-actions > [data-copy] { flex: 1 0 100%; }
.media-item .row-actions > form { flex: 1; min-width: 0; }
.media-item .row-actions > form .btn { width: 100%; gap: 5px; }
.media-item .row-actions .btn.is-danger { color: var(--err); }
.media-item .row-actions .btn.is-danger:hover { background: var(--err-bg); }