/* ==========================================================================
   Blueleaf Sports - Admin console design system.
   Self contained: the console does not load the storefront stylesheets.
   Tokens mirror assets/store.css so shop and console read as one brand.

   01 Tokens        06 Page furniture   11 Feeds and builders
   02 Reset         07 Panels           12 Inbox and media
   03 Shell         08 Tables           13 States and utilities
   04 Sidebar       09 Forms            14 Responsive and print
   05 Topbar        10 Overlays
   ========================================================================== */

/* --- 01 Tokens ----------------------------------------------------------- */
:root {
  color-scheme: light;
  /* Surfaces. The console sits on a tinted well so white panels lift off it. */
  --page: #F3F6F6;
  --card: #FFFFFF;
  --card-2: #F8FAFA;
  --card-3: #ECF1F1;
  --well: #E9EFEF;
  /* Type */
  --ink: #0E1417;
  --ink-2: #3D4A4F;
  --ink-3: #6C7B81;
  --ink-4: #98A5AA;
  /* Hairlines */
  --line: #D9E1E2;
  --line-soft: #E8EDEE;
  /* Dark chrome, shared with the storefront header */
  --chrome: #10211E;
  --chrome-2: #17302B;
  --chrome-3: #204039;
  --chrome-ink: #E9F1EF;
  --chrome-ink-2: #A8BEB8;
  --chrome-line: rgba(233, 241, 239, .12);
  /* Single accent */
  --accent: #0B8B70;
  --accent-press: #087159;
  --accent-soft: #E2F2EE;
  --accent-ink: #FFFFFF;
  /* Semantic status */
  --good: #1B7A3D;   --good-soft: #E3F3E8;
  --info: #1F6FB2;   --info-soft: #E4EFF8;
  --warn: #B5741A;   --warn-soft: #FBF0DE;
  --danger: #B03220; --danger-soft: #FBE7E3;
  --star: #DE9433;
  /* Data visualisation ramp, ordered by first use, legible on both themes */
  --v1: #0B8B70; --v2: #1F6FB2; --v3: #B5741A; --v4: #7B4FA8;
  --v5: #2C8C8C; --v6: #B03220;
  /* Radii. Concentric pairs: an inner core uses the outer value minus its pad. */
  --r-xs: 4px;
  --r-sm: 7px;
  --r: 11px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;
  /* Diffused ambient shadows only. No hard black drops anywhere in the console. */
  --shadow-1: 0 1px 2px rgba(14, 20, 23, .05), 0 1px 1px rgba(14, 20, 23, .04);
  --shadow-2: 0 8px 22px -10px rgba(14, 20, 23, .18), 0 2px 6px -2px rgba(14, 20, 23, .07);
  --shadow-3: 0 26px 60px -24px rgba(14, 20, 23, .30), 0 4px 12px -6px rgba(14, 20, 23, .10);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .7);
  /* Motion. Every transition below uses one of these three curves. */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-swap: cubic-bezier(.65, .05, .36, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
  /* Metrics */
  --rail: 268px;
  --rail-mini: 74px;
  --topbar-h: 60px;
  --gutter: 22px;
  --max: 1620px;
  /* Layers */
  --z-rail: 50;
  --z-topbar: 45;
  --z-scrim: 70;
  --z-drawer: 80;
  --z-modal: 90;
  --z-palette: 95;
  --z-toast: 100;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #080C0D;
  --card: #121819;
  --card-2: #171F20;
  --card-3: #202829;
  --well: #0E1415;
  --ink: #E9EEEE;
  --ink-2: #B5C0C2;
  --ink-3: #8C989B;
  --ink-4: #6B7679;
  --line: #293334;
  --line-soft: #1F2829;
  --chrome: #0C1413;
  --chrome-2: #131E1C;
  --chrome-3: #1B2E29;
  --chrome-line: rgba(233, 241, 239, .10);
  --accent: #2CBE9B;
  --accent-press: #48D2B0;
  --accent-soft: #10312A;
  --accent-ink: #04211A;
  --good: #52C47C;   --good-soft: #123322;
  --info: #63AEE6;   --info-soft: #12293A;
  --warn: #E5AA55;   --warn-soft: #33270F;
  --danger: #F2745C; --danger-soft: #3A1C16;
  --star: #F0AC53;
  --v1: #2CBE9B; --v2: #63AEE6; --v3: #E5AA55; --v4: #B18BDC;
  --v5: #57BEBE; --v6: #F2745C;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .45);
  --shadow-2: 0 8px 22px -10px rgba(0, 0, 0, .72), 0 2px 6px -2px rgba(0, 0, 0, .48);
  --shadow-3: 0 26px 60px -24px rgba(0, 0, 0, .88), 0 4px 12px -6px rgba(0, 0, 0, .58);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .05);
}

/* --- 02 Reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  font-feature-settings: "cv11", "ss01", "tnum";
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; border-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p, figure, figcaption, blockquote, dl, dd, fieldset { margin: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--line-soft); margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); }
::selection { background: var(--accent-soft); color: var(--ink); }

.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;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--accent); color: var(--accent-ink);
  padding: 10px 16px; border-radius: var(--r-sm); font-weight: 600;
  transition: top .22s var(--ease);
}
.skip-link:focus { top: 12px; }

/* Custom scrollbars keep the dense console from feeling like a spreadsheet. */
.scroll-y { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.scroll-y::-webkit-scrollbar { width: 9px; height: 9px; }
.scroll-y::-webkit-scrollbar-track { background: transparent; }
.scroll-y::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--r-pill); border: 2px solid transparent; background-clip: content-box; }
.scroll-y::-webkit-scrollbar-thumb:hover { background: var(--ink-4); background-clip: content-box; }

/* --- 03 Shell ------------------------------------------------------------ */
.admin {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  min-height: 100dvh;
  min-width: 0;
  transition: grid-template-columns .34s var(--ease);
}
.admin.is-mini { grid-template-columns: var(--rail-mini) minmax(0, 1fr); }

.workspace { display: flex; flex-direction: column; min-width: 0; min-height: 100dvh; }

.canvas {
  flex: 1;
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding: 20px var(--gutter) 56px;
  min-width: 0;
  box-sizing: border-box;
}

.scrim {
  position: fixed; inset: 0; z-index: var(--z-scrim);
  background: rgba(8, 14, 15, .52);
  backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease);
}
.scrim.is-open { opacity: 1; pointer-events: auto; }

/* --- 04 Sidebar ---------------------------------------------------------- */
.rail {
  position: sticky; top: 0; z-index: var(--z-rail);
  height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--chrome);
  color: var(--chrome-ink);
  border-right: 1px solid var(--chrome-line);
  overflow: hidden;
}
/* A single soft emerald bloom behind the rail head. Fixed, never repainted. */
.rail::before {
  content: ""; position: absolute; inset: -30% -60% auto -40%; height: 340px;
  background: radial-gradient(ellipse at 30% 20%, rgba(44, 190, 155, .20), transparent 62%);
  pointer-events: none;
}
.rail-head {
  position: relative;
  flex: none;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px;
  padding: 14px 14px 12px;
  min-height: 62px;
}
.rail-brand { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 4px; border-radius: var(--r-sm); }
.rail-brand img { width: 30px; height: 30px; object-fit: contain; flex: none; }
.rail-brand-text { min-width: 0; }
.rail-brand-word { display: block; font-size: 15.5px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; white-space: nowrap; }
.rail-brand-word span { color: var(--accent-press); }
.rail-brand-sub {
  display: block; font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--chrome-ink-2); white-space: nowrap;
}
.rail-collapse {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: var(--r-sm); color: var(--chrome-ink-2);
  border: 1px solid transparent;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.rail-collapse:hover { background: rgba(233, 241, 239, .09); color: var(--chrome-ink); border-color: var(--chrome-line); }
.rail-collapse i { font-size: 17px; transition: transform .34s var(--ease); }
.is-mini .rail-collapse i { transform: rotate(180deg); }

/* Scope switcher: which storefront the console is editing. */
.rail-scope {
  position: relative; flex: none; margin: 0 12px 12px;
  display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 9px;
  padding: 8px 10px;
  background: rgba(233, 241, 239, .06);
  border: 1px solid var(--chrome-line);
  border-radius: var(--r);
  text-align: left;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.rail-scope:hover { background: rgba(233, 241, 239, .11); border-color: rgba(233, 241, 239, .22); }
.rail-scope-dot {
  width: 26px; height: 26px; border-radius: var(--r-sm); display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink); font-size: 14px; flex: none;
}
.rail-scope-text { min-width: 0; }
.rail-scope-text small { display: block; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--chrome-ink-2); }
.rail-scope-text strong { display: block; font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-scope > i { font-size: 13px; color: var(--chrome-ink-2); }

/* Only the nav scrolls. Brand, scope and quota stay put, exactly as the shell
   promises. min-height:0 is the load bearing line: without it a flex child
   refuses to shrink under its content, so the list overflowed the rail and the
   last groups were unreachable with no scrollbar to reach them. */
.rail-nav {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 0 10px 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(233, 241, 239, .2) transparent;
}
.rail-nav::-webkit-scrollbar { width: 10px; }
.rail-nav::-webkit-scrollbar-track { background: transparent; }
.rail-nav::-webkit-scrollbar-thumb {
  background: rgba(233, 241, 239, .16); border-radius: var(--r-pill);
  border: 3px solid transparent; background-clip: content-box;
}
.rail-nav:hover::-webkit-scrollbar-thumb { background: rgba(233, 241, 239, .3); background-clip: content-box; }
.rail-group + .rail-group { margin-top: 2px; }
.rail-group-head {
  width: 100%;
  display: flex; align-items: center; gap: 6px;
  padding: 11px 10px 7px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase;
  color: var(--chrome-ink-2);
  transition: color .2s var(--ease);
}
.rail-group-head:hover { color: var(--chrome-ink); }
.rail-group-head i { font-size: 11px; margin-left: auto; transition: transform .3s var(--ease); }
.rail-group.is-shut .rail-group-head i { transform: rotate(-90deg); }
.rail-group-body {
  display: grid; grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows .32s var(--ease), opacity .24s var(--ease), visibility 0s;
}
/* visibility, not just opacity: a folded group's links were still tabbable and
   still read out, so keyboard users walked through a list they could not see.
   The delay lets the fold finish before the content leaves the a11y tree. */
.rail-group.is-shut .rail-group-body {
  grid-template-rows: 0fr; opacity: 0; visibility: hidden;
  transition: grid-template-rows .32s var(--ease), opacity .24s var(--ease), visibility 0s .32s;
}
.rail-group-body > ul { overflow: hidden; }

.rail-link {
  position: relative;
  display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 11px;
  padding: 8px 10px; margin-bottom: 1px;
  border-radius: var(--r-sm);
  color: var(--chrome-ink-2);
  font-size: 13px; font-weight: 500;
  transition: color .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease);
}
.rail-link i { font-size: 17px; justify-self: center; transition: transform .28s var(--ease-back); }
.rail-link span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-link:hover { color: var(--chrome-ink); background: rgba(233, 241, 239, .08); }
.rail-link:hover i { transform: scale(1.1); }
.rail-link.is-here {
  color: #FFFFFF; font-weight: 700;
  background: linear-gradient(90deg, rgba(44, 190, 155, .22), rgba(44, 190, 155, .04));
}
/* Active marker is a soft inner bar, not a hard 1px border. */
.rail-link.is-here::before {
  content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--accent-press);
}
.rail-link.is-here i { color: var(--accent-press); }

.rail-pip {
  min-width: 19px; height: 19px; padding: 0 6px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--accent); color: var(--accent-ink);
  font-size: 10.5px; font-weight: 800; letter-spacing: -.01em;
}
.rail-pip.is-hot { background: var(--danger); color: #FFFFFF; }
.rail-pip.is-quiet { background: rgba(233, 241, 239, .13); color: var(--chrome-ink-2); }
.rail-foot { flex: none; padding: 10px; border-top: 1px solid var(--chrome-line); }
.rail-quota {
  padding: 10px 11px; border-radius: var(--r);
  background: rgba(233, 241, 239, .05);
  border: 1px solid var(--chrome-line);
}
.rail-quota-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.rail-quota-top small { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--chrome-ink-2); }
.rail-quota-top strong { font-size: 12px; font-weight: 700; }
.rail-quota-bar { height: 5px; border-radius: var(--r-pill); background: rgba(233, 241, 239, .12); overflow: hidden; }
.rail-quota-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent-press); }
.rail-quota p { margin-top: 8px; font-size: 11px; line-height: 1.45; color: var(--chrome-ink-2); }

/* Collapsed rail. Labels and chrome fold away, icons centre, tooltips take over. */
.is-mini .rail-brand-text,
.is-mini .rail-scope-text,
.is-mini .rail-scope > i,
.is-mini .rail-group-head span,
.is-mini .rail-quota { display: none; }
/* The label is the link's accessible name, so it is clipped rather than removed:
   display:none would leave twenty eight icons announced as unnamed links.
   Absolute also keeps it out of the single column mini grid. */
.is-mini .rail-link span:not(.rail-pip) {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.is-mini .rail-head { grid-template-columns: 1fr; justify-items: center; gap: 10px; padding-bottom: 10px; }
.is-mini .rail-brand { justify-content: center; }
.is-mini .rail-scope { grid-template-columns: 1fr; justify-items: center; padding: 8px; }
.is-mini .rail-group-head { justify-content: center; padding: 12px 0 6px; }
.is-mini .rail-group-head::after {
  content: ""; width: 18px; height: 1px; background: var(--chrome-line);
}
.is-mini .rail-group-head i { display: none; }
.is-mini .rail-group.is-shut .rail-group-body { grid-template-rows: 1fr; opacity: 1; visibility: visible; }
.is-mini .rail-link { grid-template-columns: 1fr; justify-items: center; padding: 10px 0; }
.is-mini .rail-link.is-here::before { left: -10px; }
.is-mini .rail-pip {
  position: absolute; top: 4px; right: 8px;
  min-width: 8px; height: 8px; padding: 0; font-size: 0; overflow: hidden;
}
.is-mini .rail-foot { padding: 8px; }

/* Tooltip on the collapsed rail, built from the label so nothing is lost.
   It cannot be a ::after on the link: the rail clips horizontally and the nav
   now scrolls, so a pseudo element parked outside the link is sliced off. One
   fixed node parented to <body> escapes both, and follows focus as well as the
   pointer so the mini rail stays usable from the keyboard. */
.rail-tip {
  position: fixed; top: 0; left: 0; z-index: var(--z-toast);
  padding: 6px 10px; border-radius: var(--r-sm);
  background: var(--chrome-3); color: var(--chrome-ink);
  border: 1px solid var(--chrome-line);
  box-shadow: var(--shadow-2);
  font-size: 12px; font-weight: 600; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transform: translateY(-50%) translateX(-6px);
  transition: opacity .18s var(--ease), transform .24s var(--ease);
}
.rail-tip.is-on { opacity: 1; transform: translateY(-50%) translateX(0); }
.rail-tip-pip {
  display: inline-grid; place-items: center; min-width: 17px; height: 17px;
  margin-left: 7px; padding: 0 5px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--accent-ink);
  font-size: 10px; font-weight: 800;
}
.rail-tip-pip.is-hot { background: var(--danger); color: #FFFFFF; }

/* --- 05 Topbar ----------------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: var(--z-topbar);
  min-height: var(--topbar-h);
  display: flex; align-items: center; gap: 10px;
  padding: 10px var(--gutter);
  background: color-mix(in srgb, var(--page) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
  min-width: 0;
  box-sizing: border-box;
}
.topbar-burger {
  display: none; flex: none;
  width: 36px; height: 36px; border-radius: var(--r-sm);
  place-items: center; color: var(--ink-2);
  border: 1px solid var(--line);
  background: var(--card);
}
.crumbs { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12.5px; color: var(--ink-3); flex: 1 1 auto; overflow: hidden; }
.crumbs a { transition: color .18s var(--ease); white-space: nowrap; }
.crumbs a:hover { color: var(--accent); }
.crumbs i { font-size: 12px; color: var(--ink-4); flex-shrink: 0; }
.crumbs strong { color: var(--ink); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

.topbar-tools { display: flex; align-items: center; gap: 7px; margin-left: auto; flex-shrink: 0; }

/* The command trigger reads as an input but behaves as a button. */
.cmd-trigger {
  display: flex; align-items: center; gap: 9px;
  height: 36px; padding: 0 10px 0 12px; min-width: 230px;
  border-radius: var(--r-sm);
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink-4);
  font-size: 12.5px;
  box-shadow: var(--shadow-1);
  transition: border-color .2s var(--ease), box-shadow .24s var(--ease), color .2s var(--ease);
}
.cmd-trigger:hover { border-color: var(--ink-4); color: var(--ink-3); box-shadow: var(--shadow-2); }
.cmd-trigger i { font-size: 16px; }
.cmd-trigger span { margin-right: auto; }
.kbd {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: var(--r-xs);
  background: var(--card-3); color: var(--ink-3);
  border: 1px solid var(--line);
  font-size: 10.5px; font-weight: 700; font-family: ui-monospace, "SFMono-Regular", monospace;
}
.icon-btn {
  position: relative; flex: none;
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--card); color: var(--ink-2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  transition: color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease), box-shadow .24s var(--ease);
}
.icon-btn i { font-size: 17px; }
.icon-btn:hover { color: var(--accent); border-color: var(--accent); box-shadow: var(--shadow-2); }
.icon-btn:active { transform: scale(.95); }
.icon-btn .dot {
  position: absolute; top: 6px; right: 6px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--danger); box-shadow: 0 0 0 2px var(--card);
}
.icon-btn[data-theme-toggle] .ph-moon { display: none; }
:root[data-theme="dark"] .icon-btn[data-theme-toggle] .ph-sun { display: none; }
:root[data-theme="dark"] .icon-btn[data-theme-toggle] .ph-moon { display: block; }

.who {
  display: flex; align-items: center; gap: 9px;
  height: 36px; padding: 0 10px 0 5px;
  border-radius: var(--r-pill);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  transition: border-color .2s var(--ease), box-shadow .24s var(--ease);
}
.who:hover { border-color: var(--ink-4); box-shadow: var(--shadow-2); }
.who-face {
  width: 27px; height: 27px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--chrome-3); color: var(--chrome-ink);
  font-size: 11px; font-weight: 800; letter-spacing: -.02em;
}
.who-text { text-align: left; line-height: 1.15; }
.who-text strong { display: block; font-size: 12px; font-weight: 700; }
.who-text small { display: block; font-size: 10px; color: var(--ink-3); }
.who > i { font-size: 12px; color: var(--ink-4); }

/* --- 06 Page furniture --------------------------------------------------- */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 14px 0 18px;
}
.page-head-text { min-width: 0; max-width: 720px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px 3px 7px; margin-bottom: 9px;
  border-radius: var(--r-pill);
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  font-size: 9.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
}
.eyebrow i { font-size: 12px; letter-spacing: 0; }
.page-title { font-size: 25px; font-weight: 800; letter-spacing: -.035em; line-height: 1.12; }
.page-sub { margin-top: 7px; font-size: 13px; color: var(--ink-3); line-height: 1.55; }
.page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 12px;
}
.section-title { font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.section-note { margin-top: 3px; font-size: 12px; color: var(--ink-3); }

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 15px;
  border-radius: var(--r-sm);
  font-size: 13px; font-weight: 700; letter-spacing: -.01em;
  white-space: nowrap; cursor: pointer;
  border: 1px solid transparent;
  transition: background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .16s var(--ease), box-shadow .24s var(--ease);
}
.btn i { font-size: 16px; }
.btn:active { transform: scale(.975); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-2); }
.btn-primary:hover { background: var(--accent-press); box-shadow: var(--shadow-3); }
.btn-ghost { background: var(--card); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-1); }
.btn-ghost:hover { border-color: var(--ink-4); box-shadow: var(--shadow-2); }
.btn-soft { background: var(--accent-soft); color: var(--accent); }
.btn-soft:hover { background: color-mix(in srgb, var(--accent-soft) 70%, var(--accent) 14%); }
.btn-quiet { background: transparent; color: var(--ink-2); }
.btn-quiet:hover { background: var(--card-3); color: var(--ink); }
.btn-danger { background: var(--danger-soft); color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: #FFFFFF; }
.btn-sm { height: 30px; padding: 0 11px; font-size: 12px; }
.btn-sm i { font-size: 14px; }
.btn-lg { height: 44px; padding: 0 20px; font-size: 14px; }
.btn-block { width: 100%; }

/* Button in button: the trailing glyph rides its own disc, flush to the pad. */
.btn-nested { padding-right: 5px; }
.btn-nested .disc {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .18);
  transition: transform .3s var(--ease-back), background-color .2s var(--ease);
}
.btn-nested:hover .disc { transform: translateX(2px) translateY(-1px) scale(1.06); background: rgba(255, 255, 255, .28); }
.btn-ghost.btn-nested .disc { background: var(--card-3); }
.btn-ghost.btn-nested:hover .disc { background: var(--accent-soft); }

/* Split control: main action plus a menu tail sharing one hairline shell. */
.split { display: inline-flex; align-items: stretch; }
.split .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.split .btn:last-child {
  border-top-left-radius: 0; border-bottom-left-radius: 0;
  padding: 0 9px; margin-left: 1px;
}

/* --- Menus --------------------------------------------------------------- */
.menu-host { position: relative; }
.menu {
  position: absolute; right: 0; top: calc(100% + 7px); z-index: var(--z-drawer);
  min-width: 224px; padding: 6px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  opacity: 0; transform: translateY(-7px) scale(.985);
  pointer-events: none;
  transition: opacity .2s var(--ease), transform .28s var(--ease);
}
.menu.is-open { opacity: 1; transform: none; pointer-events: auto; }
.menu-label {
  padding: 8px 10px 5px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4);
}
.menu-item {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--r-sm);
  font-size: 13px; color: var(--ink-2); text-align: left;
  transition: background-color .16s var(--ease), color .16s var(--ease);
}
.menu-item i { font-size: 16px; color: var(--ink-3); }
.menu-item:hover { background: var(--card-2); color: var(--ink); }
.menu-item:hover i { color: var(--accent); }
.menu-item.is-danger { color: var(--danger); }
.menu-item.is-danger i { color: var(--danger); }
.menu-item.is-danger:hover { background: var(--danger-soft); }
.menu-item .tail { margin-left: auto; font-size: 11px; color: var(--ink-4); }
.menu-sep { height: 1px; background: var(--line-soft); margin: 5px 0; }

/* --- 07 Panels ----------------------------------------------------------- */
/* Double bezel: an outer tray holds an inner core with concentric radii. */
.tray {
  padding: 6px;
  background: var(--card-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
}
.tray > .core { border-radius: calc(var(--r-xl) - 6px); }

.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  min-width: 0;
  max-width: 100%;
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
  min-width: 0;
}
.panel-head-text { min-width: 0; flex: 1 1 auto; }
.panel-head h3, .panel-head .panel-title { font-size: 14px; font-weight: 700; letter-spacing: -.02em; overflow-wrap: break-word; }
.panel-head p, .panel-head .panel-sub { margin-top: 2px; font-size: 12px; color: var(--ink-3); overflow-wrap: break-word; }
.panel-head-tools { display: flex; align-items: center; gap: 7px; margin-left: auto; flex-shrink: 0; }
.panel-body { padding: 16px; min-width: 0; }
.panel-body.is-flush { padding: 0; }
.panel-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px;
  border-top: 1px solid var(--line-soft);
  background: var(--card-2);
  border-radius: 0 0 calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px);
  min-width: 0;
}

/* Bento: an asymmetric grid on wide viewports, one column on phones. */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; min-width: 0; }
.c3 { grid-column: span 3; } .c4 { grid-column: span 4; } .c5 { grid-column: span 5; }
.c6 { grid-column: span 6; } .c7 { grid-column: span 7; } .c8 { grid-column: span 8; }
.c9 { grid-column: span 9; } .c12 { grid-column: span 12; }
.stack { display: grid; gap: 14px; min-width: 0; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
/* --- Stat tiles ---------------------------------------------------------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(216px, 1fr)); gap: 14px; min-width: 0; }
.tile {
  position: relative; overflow: hidden;
  padding: 15px 16px 13px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .2s var(--ease);
  min-width: 0;
}
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: color-mix(in srgb, var(--accent) 32%, var(--line)); }
.tile-top { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.tile-glyph {
  width: 30px; height: 30px; border-radius: var(--r-sm); flex: none;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); font-size: 16px;
}
.tile-glyph.is-info { background: var(--info-soft); color: var(--info); }
.tile-glyph.is-warn { background: var(--warn-soft); color: var(--warn); }
.tile-glyph.is-danger { background: var(--danger-soft); color: var(--danger); }
.tile-glyph.is-good { background: var(--good-soft); color: var(--good); }
.tile-label { font-size: 11.5px; font-weight: 600; letter-spacing: .01em; color: var(--ink-3); }
.tile-value { font-size: 26px; font-weight: 800; letter-spacing: -.04em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.tile-foot { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.tile-note { font-size: 11.5px; color: var(--ink-4); }

.delta {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px 2px 5px;
  border-radius: var(--r-pill);
  font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: var(--good-soft); color: var(--good);
}
.delta i { font-size: 12px; }
.delta.is-down { background: var(--danger-soft); color: var(--danger); }
.delta.is-flat { background: var(--card-3); color: var(--ink-3); }

.spark { display: block; width: 100%; height: 34px; margin-top: 10px; overflow: visible; }
.spark path.line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spark path.area { fill: url(#sparkFade); stroke: none; }
.spark circle.tip { fill: var(--accent); stroke: var(--card); stroke-width: 2; }

/* --- Charts -------------------------------------------------------------- */
.chart { position: relative; width: 100%; }
.chart svg { width: 100%; height: auto; overflow: visible; }
.chart .grid line { stroke: var(--line-soft); stroke-width: 1; }
.chart .axis text { fill: var(--ink-4); font-size: 10px; font-weight: 600; }
.chart .series-line { fill: none; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.chart .series-bar { transition: opacity .2s var(--ease); }
.chart .series-bar:hover { opacity: .78; }
.chart .hover-band { fill: var(--ink); opacity: 0; transition: opacity .18s var(--ease); }
.chart .hover-band:hover { opacity: .045; }
.chart-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.chart-legend i { width: 9px; height: 9px; border-radius: 2px; flex: none; }

.chart-tip {
  position: absolute; z-index: 5; pointer-events: none;
  padding: 8px 11px; border-radius: var(--r-sm);
  background: var(--chrome); color: var(--chrome-ink);
  border: 1px solid var(--chrome-line);
  box-shadow: var(--shadow-3);
  font-size: 11.5px; line-height: 1.5; white-space: nowrap;
  opacity: 0; transform: translate(-50%, -118%) scale(.96);
  transition: opacity .16s var(--ease), transform .22s var(--ease);
}
.chart-tip.is-on { opacity: 1; transform: translate(-50%, -128%) scale(1); }
.chart-tip b { display: block; font-size: 12.5px; font-weight: 800; }

/* Donut with the headline value parked in the hole. */
.donut-wrap { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 18px; align-items: center; }
.donut { position: relative; width: 132px; height: 132px; }
.donut svg { transform: rotate(-90deg); }
.donut circle { fill: none; stroke-width: 13; stroke-linecap: round; }
.donut-hole {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
}
.donut-hole strong { font-size: 21px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.donut-hole small { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }
.donut-keys { display: grid; gap: 9px; }
.donut-key { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 9px; font-size: 12.5px; }
.donut-key i { width: 10px; height: 10px; border-radius: 3px; }
.donut-key b { font-variant-numeric: tabular-nums; font-weight: 700; }

/* Horizontal ranked bars for breakdown lists. */
.ranks { display: grid; gap: 11px; }
.rank { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; }
.rank-name { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-value { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.rank-bar { grid-column: 1 / -1; height: 6px; border-radius: var(--r-pill); background: var(--card-3); overflow: hidden; }
.rank-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transform-origin: left; animation: growx .8s var(--ease) both; }
.rank-bar.is-warn i { background: var(--warn); }
.rank-bar.is-danger i { background: var(--danger); }
.rank-bar.is-good i { background: var(--good); }
@keyframes growx { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* --- 08 Tables ----------------------------------------------------------- */
.table-tools {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.table-search {
  display: flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 11px; min-width: 240px; flex: 1 1 240px; max-width: 360px;
  border-radius: var(--r-sm);
  background: var(--card-2);
  border: 1px solid var(--line);
  transition: border-color .2s var(--ease), box-shadow .24s var(--ease), background-color .2s var(--ease);
}
.table-search:focus-within { border-color: var(--accent); background: var(--card); box-shadow: 0 0 0 3px var(--accent-soft); }
.table-search i { font-size: 15px; color: var(--ink-4); flex: none; }
.table-search input { flex: 1; min-width: 0; border: 0; background: none; outline: 0; font-size: 12.5px; }
.table-search input::placeholder { color: var(--ink-4); }

.table-wrap { overflow-x: auto; scrollbar-width: thin; }
.dt { min-width: 720px; font-size: 12.5px; }
.dt thead th {
  position: sticky; top: 0; z-index: 2;
  padding: 9px 14px;
  background: var(--card-2);
  border-bottom: 1px solid var(--line);
  text-align: left; white-space: nowrap;
  font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3);
}
.dt thead th.is-sortable { cursor: pointer; user-select: none; transition: color .18s var(--ease); }
.dt thead th.is-sortable:hover { color: var(--accent); }
.dt thead th .caret { display: inline-block; margin-left: 4px; font-size: 11px; opacity: 0; transition: opacity .18s var(--ease), transform .2s var(--ease); }
.dt thead th.is-sortable:hover .caret { opacity: .45; }
.dt thead th[aria-sort] .caret { opacity: 1; color: var(--accent); }
.dt thead th[aria-sort="descending"] .caret { transform: rotate(180deg); }
.dt tbody td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.dt tbody tr { transition: background-color .16s var(--ease); }
.dt tbody tr:hover { background: var(--card-2); }
.dt tbody tr.is-picked { background: var(--accent-soft); }
.dt tbody tr:last-child td { border-bottom: 0; }
.dt .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.dt .pick { width: 40px; padding-right: 0; }
.dt .act { width: 52px; text-align: right; }
.dt .act .icon-btn { width: 28px; height: 28px; box-shadow: none; background: transparent; border-color: transparent; color: var(--ink-4); }
.dt .act .icon-btn i { font-size: 15px; }
.dt tbody tr:hover .act .icon-btn { border-color: var(--line); background: var(--card); }
.dt-strong { font-weight: 700; color: var(--ink); }
.dt-quiet { color: var(--ink-3); font-size: 11.5px; }
.dt-mono { font-family: ui-monospace, "SFMono-Regular", monospace; font-size: 11.5px; letter-spacing: -.02em; }

/* Media cell: thumb plus two lines of copy, used on every catalogue table. */
.cell-media { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cell-thumb {
  width: 38px; height: 38px; border-radius: var(--r-sm); flex: none; overflow: hidden;
  background: var(--card-3); border: 1px solid var(--line-soft);
  display: grid; place-items: center; color: var(--ink-4);
}
.cell-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cell-thumb.is-ini { background: var(--chrome); border-color: var(--chrome); color: var(--chrome-ink); font-size: 11.5px; font-weight: 800; letter-spacing: .01em; }
.cell-text { min-width: 0; }
.cell-text strong { display: block; font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.cell-text small { display: block; font-size: 11px; color: var(--ink-3); }
.cell-clip { display: block; max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Bulk action bar slides in from the table head when rows are picked. */
.bulk-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--chrome); color: var(--chrome-ink);
  border-bottom: 1px solid var(--chrome-line);
  animation: dropin .3s var(--ease) both;
}
@keyframes dropin { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.bulk-bar strong { font-size: 12.5px; font-weight: 700; }
.bulk-bar .btn-ghost { background: rgba(233, 241, 239, .1); color: var(--chrome-ink); border-color: var(--chrome-line); box-shadow: none; }
.bulk-bar .btn-ghost:hover { background: rgba(233, 241, 239, .18); border-color: rgba(233, 241, 239, .3); }

.pager {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 11px 14px;
  border-top: 1px solid var(--line-soft);
}
.pager-count { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pager-nav { display: flex; align-items: center; gap: 4px; }
.pager-btn {
  min-width: 30px; height: 30px; padding: 0 8px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--card); color: var(--ink-2);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.pager-btn:hover { border-color: var(--accent); color: var(--accent); }
.pager-btn[aria-current="page"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.pager-btn:disabled { opacity: .4; pointer-events: none; }
.pager-gap { padding: 0 4px; color: var(--ink-4); }

/* --- Status pills --------------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700; white-space: nowrap;
  background: var(--card-3); color: var(--ink-2);
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pill.no-dot::before { display: none; }
.pill.is-good { background: var(--good-soft); color: var(--good); }
.pill.is-info { background: var(--info-soft); color: var(--info); }
.pill.is-warn { background: var(--warn-soft); color: var(--warn); }
.pill.is-danger { background: var(--danger-soft); color: var(--danger); }
.pill.is-accent { background: var(--accent-soft); color: var(--accent); }
.pill.is-dark { background: var(--chrome); color: var(--chrome-ink); }
.pill i { font-size: 12px; }

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: var(--r-xs);
  background: var(--card-2); border: 1px solid var(--line);
  font-size: 11px; font-weight: 600; color: var(--ink-2);
}
.tag button { display: grid; place-items: center; color: var(--ink-4); transition: color .18s var(--ease); }
.tag button:hover { color: var(--danger); }

.stars { display: inline-flex; align-items: center; gap: 1px; color: var(--star); font-size: 13px; }
.stars + span { margin-left: 5px; font-size: 11.5px; color: var(--ink-3); font-weight: 600; }

/* --- 09 Forms ------------------------------------------------------------ */
.field { display: grid; gap: 6px; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.label { font-size: 12px; font-weight: 700; letter-spacing: -.01em; }
.label .req { color: var(--danger); margin-left: 2px; }
.hint { font-size: 11.5px; color: var(--ink-3); line-height: 1.5; }
.err { font-size: 11.5px; font-weight: 600; color: var(--danger); display: none; }
.field.is-bad .err { display: block; }

.input, .select, .textarea {
  width: 100%;
  min-height: 38px; padding: 8px 11px;
  border-radius: var(--r-sm);
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 13px;
  outline: 0;
  box-shadow: var(--shadow-1);
  transition: border-color .2s var(--ease), box-shadow .24s var(--ease), background-color .2s var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-4); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-4); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field.is-bad .input, .field.is-bad .select, .field.is-bad .textarea { border-color: var(--danger); }
.field.is-bad .input:focus { box-shadow: 0 0 0 3px var(--danger-soft); }
.textarea { min-height: 96px; resize: vertical; line-height: 1.6; }
.select {
  appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C7B81' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 15px;
  cursor: pointer;
}
:root[data-theme="dark"] .select {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C989B' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.select-sm, .input-sm { min-height: 34px; padding: 6px 10px; font-size: 12.5px; }
.select-sm { padding-right: 30px; }

/* Money and unit inputs wear their affix inside the same hairline shell. */
.affix {
  display: flex; align-items: stretch;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  transition: border-color .2s var(--ease), box-shadow .24s var(--ease);
}
.affix:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.affix > span {
  display: grid; place-items: center;
  padding: 0 11px;
  background: var(--card-2);
  color: var(--ink-3);
  font-size: 12.5px; font-weight: 700;
  border-right: 1px solid var(--line-soft);
}
.affix > span.tail { border-right: 0; border-left: 1px solid var(--line-soft); }
.affix input { flex: 1; min-width: 0; min-height: 38px; padding: 8px 11px; border: 0; background: none; outline: 0; font-size: 13px; }

/* Checkbox and radio drawn from scratch so they follow the accent in both themes. */
.check { display: inline-flex; align-items: flex-start; gap: 9px; cursor: pointer; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check-box {
  width: 17px; height: 17px; flex: none; margin-top: 1px;
  border-radius: 5px;
  border: 1.5px solid var(--line);
  background: var(--card);
  display: grid; place-items: center;
  color: transparent;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .2s var(--ease-back);
}
.check-box i { font-size: 12px; }
.check:hover .check-box { border-color: var(--accent); }
.check input:checked + .check-box { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); transform: scale(1.06); }
.check input:indeterminate + .check-box { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.check input:focus-visible + .check-box { outline: 2px solid var(--accent); outline-offset: 2px; }
.check-text { font-size: 12.5px; line-height: 1.45; }
.check-text small { display: block; font-size: 11.5px; color: var(--ink-3); }
.check.is-radio .check-box { border-radius: 50%; }

/* Switch */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
  width: 38px; height: 22px; flex: none;
  border-radius: var(--r-pill);
  background: var(--card-3);
  border: 1px solid var(--line);
  padding: 2px;
  transition: background-color .26s var(--ease), border-color .26s var(--ease);
}
.switch-knob {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--card);
  box-shadow: var(--shadow-1);
  transition: transform .3s var(--ease-back);
}
.switch input:checked + .switch-track { background: var(--accent); border-color: var(--accent); }
.switch input:checked + .switch-track .switch-knob { transform: translateX(16px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch-text { font-size: 12.5px; font-weight: 600; }
.switch-text small { display: block; font-size: 11.5px; font-weight: 400; color: var(--ink-3); }

/* A settings row is a switch plus copy on one hairline separated line. */
.opt-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
  min-width: 0;
}
.opt-row:last-child { border-bottom: 0; }
.opt-row-text { min-width: 0; flex: 1 1 180px; }
.opt-row-text strong { display: block; font-size: 13px; font-weight: 700; overflow-wrap: break-word; }
.opt-row-text p { margin-top: 3px; font-size: 12px; color: var(--ink-3); line-height: 1.55; max-width: 62ch; overflow-wrap: break-word; }

/* Segmented control, also used for chart range switching. */
.seg {
  display: inline-flex; padding: 3px;
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  gap: 2px;
}
.seg button,
.seg a {
  padding: 5px 11px; border-radius: calc(var(--r-sm) - 2px);
  font-size: 12px; font-weight: 700; color: var(--ink-3);
  white-space: nowrap; text-decoration: none;
  transition: background-color .2s var(--ease), color .2s var(--ease), box-shadow .24s var(--ease);
}
.seg button:hover, .seg a:hover { color: var(--ink); }
.seg button[aria-pressed="true"], .seg a[aria-current="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow-1); }

/* Tabs */
.tabs { display: flex; align-items: center; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative;
  padding: 10px 13px;
  font-size: 13px; font-weight: 600; color: var(--ink-3); white-space: nowrap;
  transition: color .2s var(--ease);
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--accent); font-weight: 700; }
.tab[aria-selected="true"]::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px;
  height: 2px; border-radius: 2px 2px 0 0; background: var(--accent);
  animation: slidein .3s var(--ease) both;
}
@keyframes slidein { from { transform: scaleX(.3); opacity: 0; } to { transform: none; opacity: 1; } }
.tab .count {
  margin-left: 6px; padding: 1px 6px; border-radius: var(--r-pill);
  background: var(--card-3); color: var(--ink-3);
  font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.tab[aria-selected="true"] .count { background: var(--accent-soft); color: var(--accent); }
.tab-panel { padding-top: 18px; }

/* Filter chip row above tables. */
.chips { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 11px;
  border-radius: var(--r-pill);
  background: var(--card); border: 1px solid var(--line);
  font-size: 12px; font-weight: 600; color: var(--ink-2); white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip .count { font-variant-numeric: tabular-nums; opacity: .7; }

/* Drop zone for uploads. */
.dropzone {
  display: grid; place-items: center; gap: 9px;
  padding: 26px 18px; text-align: center;
  border-radius: var(--r-lg);
  border: 1.5px dashed var(--line);
  background: var(--card-2);
  cursor: pointer;
  transition: border-color .24s var(--ease), background-color .24s var(--ease), transform .24s var(--ease);
}
.dropzone:hover, .dropzone.is-hot { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); }
.dropzone i { font-size: 26px; color: var(--accent); }
.dropzone strong { font-size: 13px; font-weight: 700; }
.dropzone small { font-size: 11.5px; color: var(--ink-3); }

/* --- 10 Overlays --------------------------------------------------------- */
.modal-host {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center;
  padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity .24s var(--ease);
}
.modal-host.is-open { opacity: 1; pointer-events: auto; }
.modal-veil { position: absolute; inset: 0; background: rgba(8, 14, 15, .55); backdrop-filter: blur(4px); }
.modal {
  position: relative;
  width: 100%; max-width: 520px; max-height: calc(100dvh - 40px);
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-3);
  transform: translateY(14px) scale(.97);
  transition: transform .36s var(--ease);
}
.modal-host.is-open .modal { transform: none; }
.modal.is-wide { max-width: 760px; }
.modal-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 18px 14px; }
.modal-head-text { min-width: 0; flex: 1; }
.modal-head h3 { font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.modal-head p { margin-top: 4px; font-size: 12.5px; color: var(--ink-3); line-height: 1.55; }
.modal-glyph {
  width: 38px; height: 38px; border-radius: var(--r); flex: none;
  display: grid; place-items: center; font-size: 19px;
  background: var(--accent-soft); color: var(--accent);
}
.modal-glyph.is-danger { background: var(--danger-soft); color: var(--danger); }
.modal-glyph.is-warn { background: var(--warn-soft); color: var(--warn); }
.modal-body { padding: 0 18px 18px; overflow-y: auto; }
.modal-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
  padding: 13px 18px;
  border-top: 1px solid var(--line-soft);
  background: var(--card-2);
  border-radius: 0 0 calc(var(--r-xl) - 1px) calc(var(--r-xl) - 1px);
}
/* Right hand drawer for record detail and quick edit. */
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-drawer);
  width: min(480px, 100vw);
  display: flex; flex-direction: column;
  background: var(--card);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-3);
  transform: translateX(102%);
  transition: transform .4s var(--ease);
}
.drawer.is-open { transform: none; }
.drawer-head {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.drawer-head h3 { font-size: 15px; font-weight: 700; letter-spacing: -.02em; flex: 1; min-width: 0; }
.drawer-body { flex: 1; overflow-y: auto; padding: 16px; }
.drawer-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 16px;
  border-top: 1px solid var(--line-soft);
  background: var(--card-2);
}

/* Toasts */
.toast-dock {
  position: fixed; right: 16px; bottom: 16px; z-index: var(--z-toast);
  display: grid; gap: 9px; justify-items: end;
  pointer-events: none;
}
.toast {
  display: flex; align-items: flex-start; gap: 10px;
  max-width: 380px; padding: 11px 14px;
  border-radius: var(--r);
  background: var(--chrome); color: var(--chrome-ink);
  border: 1px solid var(--chrome-line);
  box-shadow: var(--shadow-3);
  font-size: 12.5px; line-height: 1.5;
  pointer-events: auto;
  animation: toastin .38s var(--ease) both;
}
@keyframes toastin { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
.toast.is-out { animation: toastout .28s var(--ease-swap) both; }
@keyframes toastout { to { opacity: 0; transform: translateX(18px) scale(.97); } }
.toast i { font-size: 17px; color: var(--accent-press); flex: none; margin-top: 1px; }
.toast.is-bad i { color: var(--danger); }
.toast strong { display: block; font-weight: 700; }
.toast p { color: var(--chrome-ink-2); }
/* Command palette */
.palette-host {
  position: fixed; inset: 0; z-index: var(--z-palette);
  display: grid; align-items: start; justify-items: center;
  padding: 12vh 18px 18px;
  opacity: 0; pointer-events: none;
  transition: opacity .22s var(--ease);
}
.palette-host.is-open { opacity: 1; pointer-events: auto; }
.palette-veil { position: absolute; inset: 0; background: rgba(8, 14, 15, .5); backdrop-filter: blur(5px); }
.palette {
  position: relative; width: 100%; max-width: 600px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  transform: translateY(-12px) scale(.98);
  transition: transform .34s var(--ease);
}
.palette-host.is-open .palette { transform: none; }
.palette-input {
  display: flex; align-items: center; gap: 11px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.palette-input i { font-size: 19px; color: var(--ink-4); }
.palette-input input { flex: 1; min-width: 0; border: 0; background: none; outline: 0; font-size: 15px; }
.palette-list { max-height: 46vh; overflow-y: auto; padding: 7px; }
.palette-group { padding: 9px 10px 5px; font-size: 9.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); }
.palette-item {
  width: 100%;
  display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 11px;
  padding: 9px 10px; border-radius: var(--r-sm);
  text-align: left;
  transition: background-color .14s var(--ease);
}
.palette-item i { font-size: 17px; color: var(--ink-3); justify-self: center; }
.palette-item strong { display: block; font-size: 13px; font-weight: 600; }
.palette-item small { display: block; font-size: 11px; color: var(--ink-4); }
.palette-item.is-cursor, .palette-item:hover { background: var(--accent-soft); }
.palette-item.is-cursor i, .palette-item:hover i { color: var(--accent); }
.palette-foot {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 16px;
  border-top: 1px solid var(--line-soft);
  background: var(--card-2);
  font-size: 11px; color: var(--ink-3);
}
.palette-foot span { display: inline-flex; align-items: center; gap: 5px; }
/* --- 11 Feeds and builders ------------------------------------------------ */
.feed { display: grid; gap: 2px; }
.feed-item {
  position: relative;
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px;
  padding: 11px 0;
}
/* The connector is drawn once per item so the list stays reorderable. */
.feed-item:not(:last-child)::before {
  content: ""; position: absolute; left: 15px; top: 40px; bottom: -2px;
  width: 1.5px; background: var(--line-soft);
}
.feed-glyph {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: 15px;
  background: var(--card-2); color: var(--ink-3);
  border: 1px solid var(--line);
  z-index: 1;
}
.feed-glyph.is-good { background: var(--good-soft); color: var(--good); border-color: color-mix(in srgb, var(--good) 25%, transparent); }
.feed-glyph.is-info { background: var(--info-soft); color: var(--info); border-color: color-mix(in srgb, var(--info) 25%, transparent); }
.feed-glyph.is-warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 25%, transparent); }
.feed-glyph.is-danger { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 25%, transparent); }
.feed-text { min-width: 0; padding-top: 3px; }
.feed-text p { font-size: 12.5px; line-height: 1.55; }
.feed-text p b { font-weight: 700; }
.feed-text time { display: block; margin-top: 3px; font-size: 11px; color: var(--ink-4); }

/* Key value description list for record summaries. */
.kv { display: grid; gap: 0; }
.kv-row {
  display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12.5px;
}
.kv-row:last-child { border-bottom: 0; }
.kv-row dt { color: var(--ink-3); font-weight: 600; }
.kv-row dd { font-weight: 600; min-width: 0; }

/* Builder blocks: draggable rows for homepage and navigation composition. */
.blocks { display: grid; gap: 9px; }
.block {
  display: grid; grid-template-columns: 22px 34px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 11px 13px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-1);
  transition: border-color .2s var(--ease), box-shadow .26s var(--ease), transform .26s var(--ease);
}
.block:hover { border-color: var(--accent); box-shadow: var(--shadow-2); transform: translateY(-1px); }
.block.is-dragging { opacity: .45; }
.block.is-over { border-color: var(--accent); border-style: dashed; }
.block.is-off { opacity: .55; }
.block-grip { color: var(--ink-4); font-size: 17px; cursor: grab; justify-self: center; }
.block-grip:active { cursor: grabbing; }
.block-glyph {
  width: 34px; height: 34px; border-radius: var(--r-sm);
  display: grid; place-items: center; font-size: 17px;
  background: var(--card-3); color: var(--ink-2);
}
.block-text { min-width: 0; }
.block-text strong { display: block; font-size: 13px; font-weight: 700; }
.block-text small { display: block; font-size: 11.5px; color: var(--ink-3); }
.block-tools { display: flex; align-items: center; gap: 6px; }

/* --- 12 Inbox and media --------------------------------------------------- */
.inbox {
  display: grid; grid-template-columns: 296px minmax(0, 1fr) 268px;
  height: calc(100dvh - var(--topbar-h) - 40px);
  min-height: 520px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.inbox-col { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--line-soft); }
.inbox-col:last-child { border-right: 0; }
.inbox-col-head { padding: 12px 13px; border-bottom: 1px solid var(--line-soft); display: grid; gap: 9px; }
.inbox-list { flex: 1; overflow-y: auto; }
.thread {
  width: 100%;
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  transition: background-color .16s var(--ease);
}
.thread:hover { background: var(--card-2); }
.thread.is-open { background: var(--accent-soft); }
.thread-face {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--chrome-3); color: var(--chrome-ink);
  font-size: 12px; font-weight: 800;
}
.thread-body { min-width: 0; }
.thread-top { display: flex; align-items: baseline; gap: 8px; }
.thread-top strong { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread-top time { margin-left: auto; font-size: 10.5px; color: var(--ink-4); white-space: nowrap; }
.thread-snip { font-size: 11.5px; color: var(--ink-3); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.thread-meta { display: flex; align-items: center; gap: 6px; margin-top: 5px; }

.chat { flex: 1; overflow-y: auto; padding: 16px; display: grid; gap: 12px; align-content: start; background: var(--card-2); }
.chat-day { justify-self: center; padding: 3px 11px; border-radius: var(--r-pill); background: var(--card-3); color: var(--ink-3); font-size: 10.5px; font-weight: 700; }
.bubble {
  max-width: 74%; padding: 9px 13px;
  border-radius: var(--r-lg);
  font-size: 12.5px; line-height: 1.55;
  background: var(--card);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-1);
}
.bubble.is-in { justify-self: start; border-bottom-left-radius: var(--r-xs); }
.bubble.is-out { justify-self: end; background: var(--accent); color: var(--accent-ink); border-color: transparent; border-bottom-right-radius: var(--r-xs); }
.bubble time { display: block; margin-top: 5px; font-size: 10px; opacity: .7; }
.bubble.is-note { justify-self: center; max-width: 90%; background: var(--warn-soft); color: var(--warn); border-color: transparent; font-size: 11.5px; text-align: center; }

.composer { padding: 11px 13px; border-top: 1px solid var(--line-soft); display: grid; gap: 9px; }
.composer-row { display: flex; align-items: flex-end; gap: 8px; }
.composer .textarea { min-height: 42px; }
/* The back arrow only means anything once the columns are stacked on a phone. */
.inbox-back { display: none; }

/* Media library grid */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; }
.media-card {
  position: relative;
  padding: 5px;
  background: var(--card-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  transition: border-color .2s var(--ease), box-shadow .26s var(--ease), transform .26s var(--ease);
}
.media-card:hover { border-color: var(--accent); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.media-card.is-picked { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.media-shot {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: calc(var(--r-lg) - 5px);
  background: var(--card-3);
}
.media-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.media-card:hover .media-shot img { transform: scale(1.05); }
.media-pick {
  position: absolute; top: 7px; left: 7px; z-index: 2;
  width: 21px; height: 21px; border-radius: 6px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .9); color: transparent;
  border: 1.5px solid rgba(14, 20, 23, .12);
  backdrop-filter: blur(4px);
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.media-card.is-picked .media-pick { background: var(--accent); color: #FFFFFF; border-color: var(--accent); }
.media-meta { padding: 8px 6px 4px; }
.media-meta strong { display: block; font-size: 11.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-meta small { display: block; font-size: 10.5px; color: var(--ink-4); }

/* Integration and gateway cards */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(276px, 1fr)); gap: 14px; }
.int-card {
  display: grid; gap: 12px;
  padding: 15px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  transition: border-color .2s var(--ease), box-shadow .26s var(--ease), transform .26s var(--ease);
}
.int-card:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.int-top { display: flex; align-items: flex-start; gap: 11px; }
.int-logo {
  width: 40px; height: 40px; border-radius: var(--r); flex: none;
  display: grid; place-items: center; font-size: 20px;
  background: var(--card-3); color: var(--ink-2);
}
.int-text { min-width: 0; flex: 1; }
.int-text strong { display: block; font-size: 13.5px; font-weight: 700; }
.int-text small { display: block; font-size: 11.5px; color: var(--ink-3); }
.int-card p { font-size: 12px; color: var(--ink-3); line-height: 1.6; }
.int-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 2px; }

/* --- 13 States and utilities --------------------------------------------- */
.empty {
  display: grid; place-items: center; gap: 11px;
  padding: 46px 22px; text-align: center;
}
.empty-glyph {
  width: 54px; height: 54px; border-radius: var(--r-lg);
  display: grid; place-items: center; font-size: 25px;
  background: var(--accent-soft); color: var(--accent);
}
.empty strong { font-size: 15px; font-weight: 700; }
.empty p { font-size: 12.5px; color: var(--ink-3); max-width: 44ch; line-height: 1.6; }

.note {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r);
  background: var(--info-soft); color: var(--info);
  font-size: 12.5px; line-height: 1.55;
}
.note i { font-size: 17px; flex: none; margin-top: 1px; }
.note strong { display: block; font-weight: 700; }
.note.is-warn { background: var(--warn-soft); color: var(--warn); }
.note.is-danger { background: var(--danger-soft); color: var(--danger); }
.note.is-good { background: var(--good-soft); color: var(--good); }
.note a { text-decoration: underline; text-underline-offset: 2px; font-weight: 700; }

.meter { height: 6px; border-radius: var(--r-pill); background: var(--card-3); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .5s var(--ease); }
.meter.is-warn i { background: var(--warn); }
.meter.is-danger i { background: var(--danger); }
.meter.is-good i { background: var(--good); }

.skel { border-radius: var(--r-sm); background: linear-gradient(90deg, var(--card-3) 25%, var(--card-2) 37%, var(--card-3) 63%); background-size: 400% 100%; animation: shimmer 1.5s linear infinite; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

.faces { display: flex; align-items: center; }
.faces > * { margin-left: -7px; box-shadow: 0 0 0 2px var(--card); }
.faces > *:first-child { margin-left: 0; }

.dot-live { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--good); flex: none; }
.dot-live::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px solid var(--good); opacity: .6;
  animation: ping 1.9s var(--ease) infinite;
}
@keyframes ping { from { transform: scale(.6); opacity: .7; } to { transform: scale(1.5); opacity: 0; } }

/* Reveal on scroll. Transform and opacity only. */
.reveal { opacity: 0; transform: translateY(16px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .7s var(--ease); }

.mono { font-family: ui-monospace, "SFMono-Regular", monospace; font-size: 11.5px; }
.num-tab { font-variant-numeric: tabular-nums; }
.is-red { color: var(--danger); }
.is-amber { color: var(--warn); }
.is-green { color: var(--good); }
.dt s { color: var(--ink-4); font-weight: 600; }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0; } .mt-8 { margin-top: 8px; } .mt-14 { margin-top: 14px; } .mt-20 { margin-top: 20px; }
.mb-0 { margin-bottom: 0; } .mb-14 { margin-bottom: 14px; }
.grow { flex: 1; min-width: 0; }
.push { margin-left: auto; }
.t-good { color: var(--good); } .t-danger { color: var(--danger); } .t-warn { color: var(--warn); }
.t-quiet { color: var(--ink-3); } .t-accent { color: var(--accent); }
.f-12 { font-size: 12px; } .f-13 { font-size: 13px; } .f-15 { font-size: 15px; font-weight: 700; }
.f-18 { font-size: 18px; font-weight: 800; letter-spacing: -.03em; }
.f-22 { font-size: 22px; font-weight: 800; letter-spacing: -.035em; }
.strike { text-decoration: line-through; color: var(--ink-4); font-weight: 500; }
/* --- Auth screen ---------------------------------------------------------- */
.auth {
  min-height: 100dvh;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  background: var(--page);
}
.auth-art {
  position: relative; overflow: hidden;
  display: grid; align-content: end; gap: 16px;
  padding: 44px;
  background: var(--chrome); color: var(--chrome-ink);
}
.auth-art::before {
  content: ""; position: absolute; inset: -20% -30% 40% -20%;
  background: radial-gradient(ellipse at 35% 25%, rgba(44, 190, 155, .26), transparent 60%);
  pointer-events: none;
}
.auth-art img.shot {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .3; mix-blend-mode: luminosity;
}
.auth-art-inner { position: relative; display: grid; gap: 16px; max-width: 460px; }
.auth-art h2 { font-size: 32px; font-weight: 800; letter-spacing: -.04em; line-height: 1.12; }
.auth-art p { font-size: 13.5px; color: var(--chrome-ink-2); line-height: 1.65; }
.auth-art-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 6px; }
.auth-art-stat { padding: 12px 13px; border-radius: var(--r); background: rgba(233, 241, 239, .07); border: 1px solid var(--chrome-line); }
.auth-art-stat strong { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.03em; }
.auth-art-stat small { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--chrome-ink-2); }
.auth-pane { display: grid; place-items: center; padding: 34px 22px; }
.auth-card { width: 100%; max-width: 396px; display: grid; gap: 18px; }
.auth-brand { display: flex; align-items: center; gap: 10px; }
.auth-brand img { width: 34px; height: 34px; object-fit: contain; }
.auth-brand strong { font-size: 17px; font-weight: 800; letter-spacing: -.03em; }
.auth-brand strong span { color: var(--accent); }
.auth-brand small { display: block; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.auth-title { font-size: 24px; font-weight: 800; letter-spacing: -.035em; }
.auth-note { font-size: 12.5px; color: var(--ink-3); line-height: 1.6; }
.auth-form { display: grid; gap: 14px; }
.auth-alt { display: flex; align-items: center; gap: 12px; color: var(--ink-4); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.auth-alt::before, .auth-alt::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 42px; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--r-sm); color: var(--ink-3); transition: color .18s var(--ease), background-color .18s var(--ease); }
.pw-eye:hover { color: var(--accent); background: var(--card-3); }

/* --- Previews, funnels and small report primitives ----------------------- */
.serp {
  padding: 14px; border-radius: var(--r-lg);
  background: var(--card-2); border: 1px solid var(--line-soft);
}
.serp-url { font-size: 11.5px; color: var(--ink-3); }
.serp-title { margin-top: 4px; font-size: 15px; font-weight: 600; color: #1A0DAB; line-height: 1.35; }
:root[data-theme="dark"] .serp-title { color: #8AB4F8; }
.serp-desc { margin-top: 5px; font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }

.mailer {
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line-soft); background: var(--card-2);
}
.mailer-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 12px; border-bottom: 1px solid var(--line-soft); background: var(--card-3);
  font-size: 11.5px; color: var(--ink-3);
}
.mailer-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.mailer-body { padding: 20px; display: grid; gap: 13px; justify-items: center; text-align: center; }
.mailer-body img { width: 34px; height: 34px; object-fit: contain; }
.mailer-body h4 { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.mailer-body p { font-size: 12.5px; color: var(--ink-2); line-height: 1.65; max-width: 46ch; }
.mailer-cta {
  display: inline-flex; padding: 9px 17px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--accent-ink); font-size: 12.5px; font-weight: 700;
}
.mailer-foot { padding: 12px; border-top: 1px solid var(--line-soft); font-size: 10.5px; color: var(--ink-4); text-align: center; }

/* A wireframe of the front page: one labelled bar per live block, in order.
   Deliberately not a screenshot - it is about sequence, not appearance. */
.wire {
  display: grid; gap: 6px; max-width: 300px; margin-inline: auto; padding: 12px;
  border-radius: var(--r-lg); background: var(--card-2); border: 1px solid var(--line-soft);
}
.wire-bar {
  display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px;
  border-radius: var(--r-sm); background: var(--card-3); border: 1px solid var(--line-soft);
  font-size: 11px; font-weight: 600; color: var(--ink-2);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.wire-bar i { flex: none; font-size: 13px; color: var(--ink-3); }
.wire-bar.is-short { height: 22px; font-size: 10px; }
.wire-bar.is-tall {
  height: 92px; align-items: flex-end; padding-bottom: 9px;
  background: var(--accent-soft); border-color: transparent; color: var(--accent);
}
.wire-bar.is-tall i { color: var(--accent); }
.wire-fold {
  display: flex; align-items: center; gap: 8px; margin: 2px 0;
  font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-4);
}
.wire-fold::before, .wire-fold::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.funnel { display: grid; gap: 8px; }
.funnel-step {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 3px 12px;
  padding: 11px 13px; border-radius: var(--r);
  background: var(--card-2); border: 1px solid var(--line-soft);
}
.funnel-step strong { font-size: 12.5px; font-weight: 700; }
.funnel-step b { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.funnel-step small { grid-column: 1 / -1; font-size: 11.5px; color: var(--ink-3); }

.addr { font-style: normal; font-size: 12.5px; line-height: 1.75; color: var(--ink-2); }
.addr strong { display: block; font-size: 13px; font-weight: 700; color: var(--ink); }
.addr .addr-tel { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; font-weight: 600; color: var(--ink); }
.kv-row.is-total { border-top: 1px solid var(--line); border-bottom: 0; padding-top: 11px; margin-top: 3px; }
.kv-row.is-total dt { color: var(--ink); font-weight: 700; }
.kv-row.is-total dd { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* A moderation card: one review in full, with the reply box under it. */
.rev { display: grid; gap: 11px; padding: 15px; border-radius: var(--r-lg); background: var(--card-2); border: 1px solid var(--line-soft); }
.rev-top { display: flex; align-items: center; gap: 11px; }
.rev-face {
  width: 36px; height: 36px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--accent-soft); color: var(--accent);
  font-size: 12px; font-weight: 800; letter-spacing: -.01em;
}
.rev-who { min-width: 0; flex: 1; }
.rev-who strong { display: block; font-size: 13px; font-weight: 700; }
.rev-who small { font-size: 11.5px; color: var(--ink-3); }
.rev-body { font-size: 12.5px; line-height: 1.7; color: var(--ink-2); }
.rev-body strong { display: block; margin-bottom: 3px; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.rev-for { display: flex; align-items: center; gap: 9px; font-size: 11.5px; color: var(--ink-3); }
.rev-for img { width: 30px; height: 30px; flex: none; border-radius: var(--r-sm); object-fit: cover; background: var(--card-3); }
.rev-acts { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding-top: 3px; }

/* Star picker. The buttons are swapped to filled glyphs by admin.js. */
.rate { display: inline-flex; align-items: center; gap: 3px; color: var(--star); font-size: 19px; }
.rate button { display: inline-flex; padding: 2px; border-radius: var(--r-xs); line-height: 1; transition: transform .2s var(--ease-back); }
.rate button:hover { transform: scale(1.16); }

/* --- 14 Responsive and print --------------------------------------------- */
@media (max-width: 1360px) {
  .inbox { grid-template-columns: 268px minmax(0, 1fr); }
  .inbox-col.is-aside { display: none; }
}

/* TABLET (768px – 1199.98px):
   - Sidebar collapses to compact / mini navigation (74px) so it does not crowd horizontal space.
   - Header controls reduced: compact search (icon-only button), compact profile (avatar only).
   - Breadcrumb remains visible.
   - Bento grid: When viewport is under 1060px, companion cards .c7 and .c5 stack cleanly
     into full width (grid-column: span 12), ensuring .c5 never squeezes into a half-width container. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .admin:not(.is-tablet-expanded) { grid-template-columns: var(--rail-mini) minmax(0, 1fr); }
  .admin:not(.is-tablet-expanded) .rail { width: var(--rail-mini); }

  /* Compact navigation styling for rail */
  .admin:not(.is-tablet-expanded) .rail-brand-text,
  .admin:not(.is-tablet-expanded) .rail-scope-text,
  .admin:not(.is-tablet-expanded) .rail-scope > i,
  .admin:not(.is-tablet-expanded) .rail-group-head span,
  .admin:not(.is-tablet-expanded) .rail-quota { display: none; }

  .admin:not(.is-tablet-expanded) .rail-link span:not(.rail-pip) {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .admin:not(.is-tablet-expanded) .rail-head { grid-template-columns: 1fr; justify-items: center; gap: 10px; padding-bottom: 10px; }
  .admin:not(.is-tablet-expanded) .rail-brand { justify-content: center; }
  .admin:not(.is-tablet-expanded) .rail-scope { grid-template-columns: 1fr; justify-items: center; padding: 8px; }
  .admin:not(.is-tablet-expanded) .rail-group-head { justify-content: center; padding: 12px 0 6px; }
  .admin:not(.is-tablet-expanded) .rail-group-head::after {
    content: ""; width: 18px; height: 1px; background: var(--chrome-line);
  }
  .admin:not(.is-tablet-expanded) .rail-group-head i { display: none; }
  .admin:not(.is-tablet-expanded) .rail-group.is-shut .rail-group-body { grid-template-rows: 1fr; opacity: 1; visibility: visible; }
  .admin:not(.is-tablet-expanded) .rail-link { grid-template-columns: 1fr; justify-items: center; padding: 10px 0; }
  .admin:not(.is-tablet-expanded) .rail-link.is-here::before { left: -10px; }
  .admin:not(.is-tablet-expanded) .rail-pip {
    position: absolute; top: 4px; right: 8px;
    min-width: 8px; height: 8px; padding: 0; font-size: 0; overflow: hidden;
  }
  .admin:not(.is-tablet-expanded) .rail-foot { padding: 8px; }
  .admin:not(.is-tablet-expanded) .rail-collapse i { transform: rotate(180deg); }

  /* Compact header controls on tablet */
  .topbar-burger { display: none; }
  .cmd-trigger { min-width: 0; width: 36px; height: 36px; padding: 0; justify-content: center; }
  .cmd-trigger span, .cmd-trigger .kbd { display: none; }
  .who-text { display: none; }
  .who > i { display: none; }
  .who { padding: 0 4px; height: 36px; }
}

@media (max-width: 1199.98px) {
  .donut-wrap { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .donut-keys { width: 100%; text-align: left; }
}

/* Progressive bento column stacking below 1060px:
   When space isn't sufficient for side-by-side columns (or when right cards fall below ~360px),
   the right column stacks below the left column and both use span 12 (100% width). */
@media (max-width: 1060px) {
  .c5, .c6, .c7, .c8, .c9 { grid-column: span 12; }
  .c3, .c4 { grid-column: span 6; }
}

@media (max-width: 1024px) {
  .auth { grid-template-columns: 1fr; }
  .auth-art { display: none; }
}

/* MOBILE (< 768px):
   - Sidebar becomes an off-canvas drawer (0px desktop horizontal consumption).
   - Menu burger button appears in topbar.
   - Header shows Menu + active Page Title + essential actions.
   - Ancestor breadcrumb links are hidden to maximize title room.
   - All dashboard cards become 100% width (single column).
   - Stat tiles adapt to minmax(160px, 1fr). */
@media (max-width: 767.98px) {
  .admin, .admin.is-mini, .admin.is-tablet-expanded { grid-template-columns: minmax(0, 1fr); }
  .rail {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: var(--z-drawer);
    width: min(var(--rail), 85vw);
    transform: translateX(-102%);
    transition: transform .4s var(--ease);
    box-shadow: var(--shadow-3);
  }
  .rail.is-out { transform: none; }

  /* Mobile drawer restores full labels and interactive groups */
  .rail-brand-text,
  .rail-scope-text,
  .rail-scope > i,
  .rail-group-head span,
  .rail-quota { display: revert; }
  .rail-link span:not(.rail-pip) {
    position: static; width: auto; height: auto; margin: 0;
    overflow: hidden; clip: auto;
  }
  .rail-head { grid-template-columns: 1fr auto; justify-items: stretch; gap: 8px; }
  .rail-brand { justify-content: flex-start; }
  .rail-scope { grid-template-columns: 26px 1fr auto; justify-items: stretch; padding: 8px 10px; }
  .rail-group-head { justify-content: flex-start; padding: 11px 10px 7px; }
  .rail-group-head::after { display: none; }
  .rail-group-head i { display: block; }
  .rail-link { grid-template-columns: 20px 1fr auto; justify-items: stretch; padding: 8px 10px; }
  .rail-group.is-shut .rail-group-body {
    grid-template-rows: 0fr; opacity: 0; visibility: hidden;
  }
  .rail-pip { position: static; min-width: 19px; height: 19px; padding: 0 6px; font-size: 10.5px; }
  .rail-tip { display: none !important; }
  .rail-collapse { display: none; }

  /* Compact mobile header: Menu + Page Title + essential actions */
  .topbar-burger { display: grid; }
  .crumbs a, .crumbs i { display: none; }
  .crumbs { min-width: 0; flex: 1 1 auto; overflow: hidden; }
  .crumbs strong {
    font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .topbar-tools { flex-shrink: 0; gap: 6px; }
  .cmd-trigger { min-width: 0; width: 36px; height: 36px; padding: 0; justify-content: center; }
  .cmd-trigger span, .cmd-trigger .kbd { display: none; }
  .who-text { display: none; }
  .who > i { display: none; }
  .who { padding: 0 4px; height: 36px; }

  /* Single column bento grid: every card is 100% width */
  .bento { gap: 12px; }
  .c3, .c4, .c5, .c6, .c7, .c8, .c9, .c12 { grid-column: span 12; width: 100%; }

  /* Layout spacing and controls */
  :root { --gutter: 14px; }
  .canvas { padding: 14px var(--gutter) 44px; }
  .page-title { font-size: 21px; }
  .page-head { padding: 10px 0 14px; }
  .page-actions { width: 100%; }
  .page-actions .btn { flex: 1 1 auto; }
  .tiles { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 11px; }
  .tile { padding: 13px; }
  .tile-value { font-size: 22px; }
  .modal { max-width: none; border-radius: var(--r-xl) var(--r-xl) 0 0; align-self: end; }
  .modal-host { padding: 0; align-items: end; }
  .drawer { width: 100vw; }
  .toast-dock { left: 12px; right: 12px; bottom: 12px; justify-items: stretch; }
  .toast { max-width: none; }
  .palette-host { padding: 8vh 12px 12px; }
  .opt-row { flex-wrap: wrap; gap: 10px; }
  .opt-row-text { min-width: 0; flex: 1 1 200px; }
  .auth-pane { padding: 24px 16px; }
  .media-grid { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 9px; }
  .bubble { max-width: 88%; }

  .inbox { grid-template-columns: minmax(0, 1fr); height: auto; }
  .inbox-col.is-list { display: none; }
  .inbox.show-list .inbox-col.is-list { display: flex; }
  .inbox.show-list .inbox-col.is-chat { display: none; }
  .inbox-back { display: grid; }
}

/* SMALL MOBILE (< 480px):
   - Single-column layout.
   - Compact header: reduced gaps, touch targets preserved.
   - Reduced padding and margins.
   - Buttons wrap naturally or stack full width.
   - Key-value rows stack (1fr) so dt and dd never squeeze.
   - Stat tiles use single-column layout (1fr).
   - No horizontal scrollbar. */
@media (max-width: 479.98px) {
  :root { --gutter: 12px; }
  .canvas { padding: 12px var(--gutter) 40px; }
  .topbar { min-height: 52px; padding: 8px var(--gutter); gap: 6px; }
  .topbar-burger { width: 34px; height: 34px; }
  .topbar-tools { gap: 4px; }
  .topbar-tools .icon-btn,
  .topbar-tools .cmd-trigger,
  .topbar-tools .who {
    width: 34px; height: 34px;
  }
  .who-face { width: 24px; height: 24px; font-size: 10px; }
  .crumbs strong { font-size: 13px; }

  .page-title { font-size: 19px; }
  .page-head { padding: 8px 0 12px; gap: 10px; }
  .page-actions { width: 100%; flex-direction: column; gap: 8px; }
  .page-actions .btn { width: 100%; flex: 1 1 100%; justify-content: center; }

  .tiles { grid-template-columns: 1fr; gap: 10px; }
  .tile { padding: 12px 14px; }

  .bento { gap: 10px; }
  .panel-body { padding: 14px; }
  .panel-head { padding: 12px 14px; }
  .panel-foot { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 14px; }
  .panel-foot .btn { width: 100%; justify-content: center; }

  .kv-row { grid-template-columns: 1fr; gap: 2px; padding: 6px 0; }
  .kv-row dt { font-size: 11.5px; }
  .kv-row dd { font-size: 13px; }

  .opt-row { padding: 10px 0; }
  .opt-row > .row { width: 100%; justify-content: flex-start; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .rail, .topbar, .page-actions, .table-tools, .pager, .toast-dock, .scrim { display: none !important; }
  .admin { grid-template-columns: 1fr; }
  body { background: #FFFFFF; }
  .panel, .tile { box-shadow: none; border-color: #CCCCCC; break-inside: avoid; }
  .canvas { padding: 0; max-width: none; }
}

/* ---- Inventory module conversion helpers (mapped from legacy markup) ---- */
.inv-page { padding: 0 0 24px; }
.inv-table { width: 100%; border-collapse: collapse; }
.inv-table th { text-align: left; padding: 10px 12px; font-size: 11.5px; color: var(--ink-3); border-bottom: 1px solid var(--line); letter-spacing: .02em; text-transform: uppercase; }
.inv-table td { padding: 10px 12px; font-size: 13px; border-bottom: 1px solid var(--line); }
.inv-head-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.inv-row-gap { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.panel-head-inv { padding: 14px 16px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 13px; }
.panel-body-inv { padding: 16px; }
.t-center { text-align: center; }
.t-right { text-align: right; }
.t-danger { color: var(--danger); }
.t-good { color: var(--good); }
.f-bold { font-weight: 700; }