/* 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;
  letter-spacing: 0.12em;
  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. */
.sidebar__foot { margin-top: auto; padding: 10px 0 0; 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;
  }
}