/* ROTOCON cockpit — the shared shell for Rotocon's internal, dense/dark apps.
   Canonical here (rotocon-crm); rotocon_QM carries a verbatim copy. Change this
   file first, then re-copy. App-domain rules (a status palette, source-group
   colours, role colours) do NOT live here — each app keeps its own layer
   (crm.css / qm.css) loaded after this one. Boundary: docs/design_rotocon_2.md §13.

   Token values and the shell structure mirror the internal-tools design system
   shared by pm/monday/erp (canonical SCSS: /opt/rotocon_monday/static/scss on VPS
   `rotocon`; analysis: docs/ecosystem/design-system-adoption.md). Plain CSS on
   purpose — no build step in either project.

   Sidebar grammar (2026-09-28, the owner's brief for QM: "mai atractiv, iconuri,
   ghidat după meniul Claude Desktop"): a brand row with a collapse control, a search
   field, iconised entries under small quiet group labels, an account row with an
   initials avatar. Icons come from the inline sprite in templates/partials/icons.html;
   .sidebar__icon only sizes and colours them. The active entry gets a soft fill and a
   brand-red ICON — an accent under 24px, the use the brand doc §2 sanctions for
   active states; never a red fill. */

:root {
  --ink:      #0A0A0B;
  --ink-900:  #0E0E10;
  --ink-800:  #141416;
  --ink-700:  #1A1A1D;
  --ink-600:  #232327;

  --rot:        #E60000;
  --rot-bright: #FF1A1A;
  --rot-deep:   #B30000;

  --bone: #F4F2EF;
  --mute: #8A8A90;
  --line:        rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);

  --ok:   #22C55E;
  --warn: #FFB020;
  --info: #3AA0FF;
  --violet: #A78BFA;

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-sans: "Satoshi", "General Sans", system-ui, -apple-system, sans-serif;

  --sidebar-w: 264px;
  --rail-w: 64px;
  --topbar-h: 56px;
  --radius: 8px;
  --radius-sm: 5px;
  --ease-cinema: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
ul { list-style: none; }
::selection { background: var(--rot); color: #fff; }

h1, h2, h3, .h-display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.05;
  text-transform: uppercase;
}
h1 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.05rem; }

.kicker {
  font-family: var(--font-display);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.66rem;
  color: var(--mute);
}
.muted { color: var(--mute); }
.accent { color: var(--rot); }

:focus-visible { outline: 2px solid var(--rot); outline-offset: 2px; }

/* A column header that carries a row action needs a name for a screen reader
   even when the eye reads the button itself. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --- App shell: sidebar | topbar | scrollable main (body.app) --- */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar main";
  height: 100vh;
  overflow: hidden;
}
.app__sidebar { grid-area: sidebar; }
.app__topbar  { grid-area: topbar; }
.app__main {
  grid-area: main;
  overflow: auto;
  padding: 1.25rem 1.5rem 3rem;
}
.app__main::-webkit-scrollbar { width: 10px; height: 10px; }
.app__main::-webkit-scrollbar-thumb { background: var(--ink-600); border-radius: 6px; }
.app__main::-webkit-scrollbar-track { background: transparent; }

/* --- Sidebar --- */
.sidebar {
  background: var(--ink-900);
  border-right: 1px solid var(--line);
  height: 100vh;
  width: var(--sidebar-w);
  padding: 12px 10px 10px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: thin;
}
/* Hidden by size, never display:none: WebKit will not render a <use> whose
   <symbol> lives under a display:none ancestor. */
.sidebar__sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sidebar__icon { flex: none; width: 18px; height: 18px; color: var(--mute); transition: color 0.15s var(--ease-cinema); }

/* Brand row: wordmark + app tag, the rail toggle at the right edge. */
.sidebar__head { display: flex; align-items: center; gap: 6px; padding: 2px 0 14px; }
.sidebar__brand { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 4px 8px; }
.sidebar__wordmark { height: 22px; width: auto; }
.sidebar__brandmark { display: none; height: 26px; width: auto; }
.sidebar__tag {
  background: color-mix(in srgb, var(--brand, var(--rot)) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand, var(--rot)) 30%, transparent);
  border-radius: 4px;
  color: var(--brand, var(--rot));
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  padding: 3px 7px;
  text-transform: uppercase;
}
.sidebar__rail {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border: 0; border-radius: 8px;
  background: transparent; color: var(--mute);
  transition: background 0.15s var(--ease-cinema), color 0.15s var(--ease-cinema);
}
.sidebar__rail:hover { background: rgba(255, 255, 255, 0.06); color: var(--bone); }
.sidebar__rail .sidebar__icon { color: inherit; }

/* Search: the board's ?q= from anywhere. Neutral focus ring on purpose — a
   brand-red ring would be a second red next to the count badge. */
.sidebar__search { position: relative; margin: 0 0 14px; }
.sidebar__search .sidebar__icon { position: absolute; left: 11px; top: 50%; translate: 0 -50%; width: 16px; height: 16px; pointer-events: none; }
.sidebar__search input {
  width: 100%; height: var(--row-compact, 36px); padding: 0 10px 0 36px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--ink-800); color: var(--bone);
  font: inherit; font-size: 0.875rem; line-height: 20px;
  appearance: none; -webkit-appearance: none;
}
.sidebar__search input::placeholder { color: var(--mute); }
.sidebar__search input:focus { outline: 0; border-color: var(--line-strong); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06); }
.sidebar__search input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Groups: a small tracked label, a hairline between groups. */
.sidebar__group { display: flex; flex-direction: column; gap: 2px; padding: 0 0 12px; }
.sidebar__group + .sidebar__group { border-top: 1px solid var(--line); padding-top: 12px; }
.sidebar__grouptitle {
  color: var(--mute);
  font-family: var(--font-sans);
  font-size: var(--fs-micro, 11px);
  font-weight: 600;
  /* A label, not an announcement. 0.12em of tracking on 11px caps is the
     admin-template register; the group titles are the quietest thing in the
     menu and should read that way. */
  letter-spacing: 0.04em;
  line-height: 16px;
  margin: 0 0 6px;
  padding: 0 10px;
  text-transform: uppercase;
}

/* Entries: icon + label on 36px rows, soft fills, the active icon in brand red. */
.sidebar__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--row-compact, 36px);
  padding: 0 10px;
  border-radius: 8px;
  color: var(--mute);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 20px;
  transition: background 0.15s var(--ease-cinema), color 0.15s var(--ease-cinema);
}
.sidebar__text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar__link:hover { background: rgba(255, 255, 255, 0.05); color: var(--bone); }
.sidebar__link:hover .sidebar__icon { color: var(--bone); }
.sidebar__link.is-active,
.sidebar__link.is-active:hover { background: rgba(255, 255, 255, 0.09); color: var(--bone); font-weight: 500; }
.sidebar__link.is-active .sidebar__icon { color: var(--brand, var(--rot)); }
.sidebar__link .ext { margin-left: auto; color: var(--mute); }
.sidebar__link .ext.sidebar__icon { width: 14px; height: 14px; }

/* A count on an entry (things waiting for somebody). */
.nav-badge {
  margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.3rem; height: 1.3rem; padding: 0 .35rem; border-radius: 999px;
  background: var(--rot); color: #fff;
  font-size: .72rem; font-weight: 600; line-height: 1;
  box-shadow: 0 0 .35rem color-mix(in srgb, var(--rot) 85%, transparent), 0 0 1rem color-mix(in srgb, var(--rot) 45%, transparent);
}

/* Account row: an initials avatar tinted by role, the name over the role pill,
   an icon-only log-out. --c comes from the app's role modifier (crm.css / qm.css)
   — the same token the pill uses, so avatar and pill always agree. */
/* Sticky, not merely last: the menu is a scrolling column, and once an app
   grows past a screenful (QM: 19 entries overflow a 900px viewport by ~164px)
   a foot that only has `margin-top: auto` scrolls away with everything else —
   so who you are signed in as, and the way out, sit below the fold forever.
   Pinned to the bottom of the scroller with the sidebar's own background, it
   stays put while the entries move under it. */
.sidebar__foot {
  /* bottom: -10px + the matching padding swallows the .sidebar's own 10px of
     bottom padding. At bottom: 0 the foot stops short of it and entries scroll
     through the 10px strip underneath — measured in the browser, invisible in
     the markup. */
  position: sticky; bottom: -10px; z-index: 1;
  margin-top: auto; padding: 10px 0;
  background: var(--ink-900);
  border-top: 1px solid var(--line);
}
.sidebar__account { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px; border-radius: 10px; }
.sidebar__avatar {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  font-size: var(--fs-label, 12px); font-weight: 600; letter-spacing: 0.02em; line-height: 1;
  color: var(--c, var(--bone));
  background: color-mix(in srgb, var(--c, var(--mute)) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--c, var(--mute)) 35%, transparent);
}
.sidebar__who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.sidebar__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--bone); font-size: 0.8125rem; font-weight: 500; line-height: 16px; }
.sidebar__logout {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: var(--mute);
  transition: background 0.15s var(--ease-cinema), color 0.15s var(--ease-cinema);
}
.sidebar__logout:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--line); color: var(--bone); }
.sidebar__logout .sidebar__icon { color: inherit; }
.sidebar__foot .status-pill { align-self: flex-start; }

/* The rail: 64px, icons only. Labels travel into title tooltips (set by the
   toggle's script), the wordmark yields to the mark, search and group labels
   fold away, a count moves to the icon's corner. Desktop only: below 861px the
   sidebar is the off-canvas panel and the class is inert. */
@media (min-width: 861px) {
  body.nav-rail { --sidebar-w: var(--rail-w); }
  .app { transition: grid-template-columns 0.2s var(--ease-cinema); }
  body.nav-rail .sidebar { padding-inline: 8px; }
  body.nav-rail .sidebar__head { flex-direction: column; gap: 4px; padding-bottom: 10px; }
  body.nav-rail .sidebar__brand { justify-content: center; padding: 6px 0 2px; }
  body.nav-rail .sidebar__wordmark,
  body.nav-rail .sidebar__tag,
  body.nav-rail .sidebar__search,
  body.nav-rail .sidebar__grouptitle,
  body.nav-rail .sidebar__text,
  body.nav-rail .sidebar__link .ext,
  body.nav-rail .sidebar__who { display: none; }
  body.nav-rail .sidebar__brandmark { display: block; }
  body.nav-rail .sidebar__group + .sidebar__group { padding-top: 10px; }
  body.nav-rail .sidebar__link { justify-content: center; padding: 0; }
  body.nav-rail .sidebar__link .nav-badge {
    position: absolute; top: 3px; right: 4px; margin: 0;
    min-width: 1rem; height: 1rem; padding: 0 0.2rem; font-size: 0.6rem;
  }
  body.nav-rail .sidebar__account { flex-direction: column; gap: 8px; padding: 6px 0; }
}

/* --- Topbar --- */
.topbar {
  background: rgba(14, 14, 16, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1.25rem;
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar__title { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.topbar__title h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-lg, 20px); letter-spacing: -0.01em; }
.topbar__sub { color: var(--mute); font-size: 0.76rem; }
.topbar__title h1, .topbar__sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__spacer { flex: 1; }
.topbar__actions { display: flex; align-items: center; gap: 0.4rem; }
.topbar__actions .btn { white-space: nowrap; }
/* .topbar .topbar__toggle, not .topbar__toggle: the button also carries .btn, whose
   display:inline-flex is declared later in this file and would win on a tie. */
.topbar .topbar__toggle { display: none; }

/* --- Phone: the sidebar becomes an off-canvas panel --- */
@media (max-width: 860px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-areas:
      "topbar"
      "main";
  }
  .topbar .topbar__toggle { display: inline-flex; }
  .topbar { gap: 0.6rem; padding: 0 0.75rem; }
  .topbar__sub { display: none; }
  .topbar__title { flex: 1 1 0; }        /* the title yields (ellipsis) before the actions */
  .topbar__actions { flex-shrink: 0; }    /* buttons never get clipped */
  .topbar__actions .btn { padding: 0.3rem 0.55rem; font-size: 0.8rem; }
  .app__sidebar {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    z-index: 40;
    transform: translateX(-100%);
    transition: transform 0.2s var(--ease-cinema);
  }
  body.is-open .app__sidebar { transform: none; }
  .sidebar-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 30; }
  .sidebar__rail { display: none; }
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--ink-700);
  color: var(--bone);
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1.4;
  text-decoration: none;
  transition: transform 0.15s var(--ease-cinema), background 0.15s var(--ease-cinema);
}
.btn:hover { background: var(--ink-600); }
.btn:active { transform: translateY(1px); }
/* --brand-ink, not --rot: that red is the mark's, and #E60000 under a white label
   never reached 4.5:1 (cockpit-tokens.css). */
.btn--primary { background: var(--brand-ink, var(--rot)); border-color: var(--brand-ink, var(--rot)); color: #fff; }
.btn--primary:hover { background: var(--brand-hover, var(--rot-bright)); border-color: var(--brand-hover, var(--rot-bright)); }
.btn--ghost { background: transparent; border-color: var(--line); }
.btn--ghost:hover { background: var(--ink-700); }
.btn--sm { padding: 0.35rem 0.65rem; font-size: 0.82rem; }
.btn--block { width: 100%; justify-content: center; }
/* Selected state for a toggle/tab set. Contrast, measured: #6E6E76 is 3.44:1
   against the idle --ink-700 (WCAG 1.4.11's 3:1 floor for a UI boundary), with a
   full-strength --bone border so "selected" reads without going to brand red. */
.btn.is-active { background: #6E6E76; border-color: var(--bone); color: var(--bone); }

/* --- Forms --- */
.form-label { display: block; color: var(--mute); font-size: 0.82rem; margin-bottom: 0.35rem; }
.form-control, .form-select {
  width: 100%;
  background: var(--ink-700);
  border: 1px solid var(--line-strong);
  color: var(--bone);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.8rem;
  font: inherit;
}
.form-control:focus, .form-select:focus {
  outline: none;
  border-color: var(--rot);
  box-shadow: 0 0 0 3px rgba(230, 0, 0, 0.25);
}
.form-control::placeholder { color: var(--mute); }
.field-error { color: var(--rot-bright); font-size: 0.8rem; margin-top: 0.3rem; }
/* Plain help under a field. Muted on purpose: amber is for something to act on,
   and an explanation of what a field is for is not a warning. */
.form-hint { display: block; margin-top: 0.25rem; color: var(--mute); font-size: 0.75rem; line-height: 1.35; }

/* --- Cards / panels --- */
.card {
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
}
.card h3 { margin-bottom: 0.9rem; }

/* --- KPI strip: one tile grammar — flat --ink-800, hairline border, every
   figure at weight 500; the lead tile is larger, not heavier. --- */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.kpi {
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
}
.kpi__n { font-family: var(--font-display); font-size: var(--fs-xl, 28px); font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi__l {
  color: var(--mute);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.4rem;
}
.kpi__foot { color: var(--mute); font-size: 0.72rem; margin-top: 0.35rem; }
.kpi--lead { border-color: var(--line-strong); }
.kpi--lead .kpi__n { font-size: calc(var(--fs-xl, 28px) * 1.6); }
.kpi--lead .kpi__foot { font-size: 0.78rem; }

/* --- Status pills (colour via --c; the modifiers are each app's own) --- */
.status-pill {
  --c: var(--mute);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c) 22%, transparent);
  color: var(--c);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}
.status-pill::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c);
}
.pill-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }

/* --- Dashboard grid: trend + sources --- */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
  align-items: start;
  margin-bottom: 1.4rem;
}

/* Trend SVG (rendered server-side) */
.trend-svg { width: 100%; height: 190px; display: block; }
.trend-area { fill: rgba(230, 0, 0, 0.16); }
.trend-line { stroke: var(--rot); stroke-width: 2; }
.trend-baseline { stroke: var(--line-strong); stroke-width: 1; }

/* Horizontal bars */
.chart { display: flex; flex-direction: column; gap: 0.55rem; }
.chart__row {
  display: grid;
  grid-template-columns: 130px 1fr 40px;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.84rem;
}
.chart__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--bone);
}
.chart__track {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.chart__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--rot);
  transition: width 0.3s var(--ease-cinema);
}
.chart__val { text-align: right; color: var(--mute); font-variant-numeric: tabular-nums; }

/* --- Board groups (monday-style; --g per group is each app's own) --- */
.group { margin-bottom: 1.4rem; }
.group__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  margin-bottom: 0.45rem;
  border-left: 3px solid var(--g, var(--rot));
  padding: 0.15rem 0 0.15rem 0.6rem;
}
.group__count { color: var(--mute); font-weight: 400; font-size: 0.8rem; }

/* --- Board table --- */
.table-wrap { overflow-x: auto; }
.table-wrap::-webkit-scrollbar { height: 10px; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--ink-600); border-radius: 6px; }
.table-wrap::-webkit-scrollbar-track { background: transparent; }
.btable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.85rem;
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.btable thead th {
  text-align: left;
  font-weight: 600;
  color: var(--mute);
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.btable tbody td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.btable tbody tr:last-child td { border-bottom: 0; }
.btable tbody tr:hover { background: var(--ink-700); }
.cell-strong { font-weight: 600; }
.cell-muted { color: var(--mute); }
.cell-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Free text clipped to one line (the full text is the cell's title=""), so a long
   inbound email cannot stretch or wrap the auto-layout table. */
.cell-msg {
  max-width: 22rem;
  color: var(--mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cell-nowrap { white-space: nowrap; }
.cell-link { color: var(--bone); border-bottom: 1px solid var(--line-strong); }
.cell-link:hover { color: #fff; border-bottom-color: var(--rot); }
.empty { color: var(--mute); font-size: 0.85rem; padding: 0.9rem 0.75rem; }

.section-head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 1.6rem 0 0.9rem;
}
.section-head h2 { font-size: 1.05rem; letter-spacing: 0.02em; }

/* --- Auth (plain shell: body.plain — login and every other allauth page) --- */
body.plain { min-height: 100vh; }
.auth {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative; overflow: hidden; padding: 1.5rem;
}
/* The background film (the same asset and markup in QM and the CRM): the poster
   paints first and is all that remains under prefers-reduced-motion; the film
   covers it; ::after dims both so the card keeps its contrast; the red glow
   (::before) sits above the dimming, the wordmark and the card above everything. */
.auth__poster, .auth__video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.55) saturate(0.85);
  pointer-events: none;
}
.auth::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, rgba(10, 10, 11, 0.45), rgba(10, 10, 11, 0.88));
}
.auth::before {
  content: ""; position: absolute; z-index: 1; top: -260px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 520px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(230, 0, 0, 0.32), rgba(230, 0, 0, 0) 70%);
}
.auth__logo { position: relative; z-index: 2; height: 32px; width: auto; margin-bottom: 1.75rem; }
.auth__card {
  position: relative; z-index: 2; width: 100%; max-width: 440px;
  background: var(--ink-800); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2.25rem 2.5rem;
}
.auth__card h1 { font-size: 1.15rem; text-align: center; margin-bottom: 1.5rem; }
.auth__sub { text-align: center; color: var(--mute); font-size: 0.9rem; line-height: 1.5; margin: -0.9rem 0 1.5rem; }
.auth__field { margin-bottom: 1rem; }
.auth__field label { display: block; margin-bottom: 0.4rem; font-size: 0.82rem; color: var(--mute); }
.auth input:not([type="checkbox"]):not([type="hidden"]), .auth select {
  width: 100%; height: 46px; padding: 0 0.9rem;
  background: var(--ink-700); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  color: var(--bone); font: inherit; font-size: 0.95rem;
}
.auth input::placeholder { color: var(--mute); }
.auth input:focus, .auth select:focus { outline: none; border-color: var(--rot); box-shadow: 0 0 0 3px rgba(230, 0, 0, 0.25); }
.auth select {
  appearance: none; -webkit-appearance: none; padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a90' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 14px;
}
.auth select option { color: var(--ink); }
.auth .btn--block { height: 46px; margin-top: 0.5rem; font-weight: 600; }
.auth__errors { list-style: none; margin: 0 0 1rem; padding: 0; color: var(--rot-bright); font-size: 0.82rem; }
.auth__field .auth__errors { margin: 0.35rem 0 0; }
/* The password rules, on the screen where somebody is choosing a password.
   Django renders them as a <ul>, so the list needs its own indent. */
.auth__hint { margin: 0.4rem 0 0; color: var(--mute); font-size: 0.78rem; line-height: 1.45; }
.auth__hint ul { margin: 0; padding-left: 1.15rem; list-style: disc; }
.auth__hint li { margin: 0.15rem 0; }
/* A right-aligned secondary link under a field ("Forgot password?"). */
.auth__row { display: flex; justify-content: flex-end; margin: -0.4rem 0 1rem; }
.auth__row a, .auth__foot a { color: var(--bone); border-bottom: 1px solid var(--line-strong); font-size: 0.82rem; }
.auth__row a:hover, .auth__foot a:hover { color: #fff; border-bottom-color: var(--rot); }
.auth__foot { margin-top: 1.4rem; text-align: center; color: var(--mute); font-size: 0.86rem; }
.auth__foot a { font-size: inherit; }
.auth__consent { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 1rem; color: var(--mute); font-size: 0.8rem; line-height: 1.5; cursor: pointer; }
.auth__consent input { flex: none; width: 16px; height: 16px; margin-top: 0.15rem; accent-color: var(--rot); cursor: pointer; }
.auth__consent a { color: var(--bone); border-bottom: 1px solid var(--line-strong); }
.auth__secure { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin-top: 1.1rem; color: var(--mute); font-size: 0.72rem; letter-spacing: 0.06em; }
.auth__secure svg { width: 13px; height: 13px; }
/* The account page: one card per business panel. */
.auth__panels { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.25rem; }
.auth__panel { background: var(--ink-700); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.9rem 1rem; }
.auth__panel h2 { font-size: 0.9rem; letter-spacing: 0.04em; margin-bottom: 0.3rem; }
.auth__panel p { color: var(--mute); font-size: 0.84rem; margin-bottom: 0.6rem; }
.auth__panel p:last-child { margin-bottom: 0; }
.auth__static { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.auth__signout { border: 0; background: none; padding: 0; color: var(--mute); font: inherit; font-size: 0.8rem; text-decoration: underline; cursor: pointer; }
.auth__signout:hover { color: var(--bone); }
@media (max-width: 480px) {
  .auth { padding: 1.25rem 1rem; }
  .auth__card { padding: 1.5rem 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .auth__video { display: none; }   /* the poster stays */
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}


/* --- Flash messages ------------------------------------------------------
   Rendered by the app shell (templates/base_app.html) so a view that redirects
   after acting can still report what happened. */
.flashes { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.flash {
  margin: 0;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c, var(--line));
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  background: var(--ink-800);
  font-size: var(--fs-label);
}
.flash--success { --c: var(--ok); }
.flash--info    { --c: var(--info); }
.flash--warning { --c: var(--warn); }
.flash--error   { --c: var(--rot-bright); }