/* Admin panel. Same M3 tokens as the site (light scheme). Sidebar app shell, status colours per pipeline stage. */
:root {
  color-scheme: light;
  --primary: #006b1b; --on-primary: #fff; --primary-container: #7fd486;
  --secondary-container: #d5e8cf; --on-secondary-container: #3d4d3a;
  --tertiary-container: #ffdcbd; --on-tertiary-container: #2c1600;
  --surface: #f8faf2; --on-surface: #191c18; --on-surface-variant: #41493f;
  --container-lowest: #fff; --container-low: #f2f4ed; --container: #edefe7; --container-high: #e7e9e1;
  --outline: #71796e; --outline-variant: #c1c9bc;
  --error: #ba1a1a; --error-container: #ffdad6; --on-error-container: #410002;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* One colour pair per pipeline stage: soft background + text, and a solid for bars and dots. */
  --st-new: #d6e3ff; --on-st-new: #001b3e; --sol-new: #1d5fb4;
  --st-contacted: #ffdcbd; --on-st-contacted: #2c1600; --sol-contacted: #b96d00;
  --st-shortlisted: #bdece4; --on-st-shortlisted: #00201c; --sol-shortlisted: #00796b;
  --st-interview: #e8ddff; --on-st-interview: #22005d; --sol-interview: #6b4fbb;
  --st-selected: #bff0b4; --on-st-selected: #002204; --sol-selected: #2e8b3a;
  --st-placed: #006b1b; --on-st-placed: #fff; --sol-placed: #005214;
  --st-rejected: #ffdad6; --on-st-rejected: #410002; --sol-rejected: #ba1a1a;
  --st-dropped: #e1e3dc; --on-st-dropped: #41493f; --sol-dropped: #8b9387;
  --sol-pending: #e08a00; --sol-gone: #ba1a1a; --sol-src: #006b1b;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font: 400 15px/1.5 "Roboto Flex", system-ui, sans-serif; background: var(--surface); color: var(--on-surface); -webkit-font-smoothing: antialiased; }
a { color: var(--primary); text-underline-offset: 3px; }
h1 { font-size: 1.875rem; line-height: 1.15; font-weight: 700; letter-spacing: 0; margin: 0; font-variation-settings: "wdth" 100; }
h2 { font-size: 1.0625rem; margin: 0; font-weight: 650; }
p { margin: 0; }
ul.plain { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.muted, .hint { color: var(--on-surface-variant); }
.hint { font-weight: 400; font-size: 0.8125rem; margin-left: 4px; }
.i { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
code { font-size: 0.875em; background: var(--container); padding: 1px 6px; border-radius: 4px; }
code.block { display: block; padding: 10px 12px; overflow-x: auto; }

/* ── Shell ── */
.shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.side { background: var(--container); position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 20px; padding: 20px 14px; }
.brand { padding: 0 10px; font-weight: 760; font-size: 1.125rem; font-variation-settings: "wdth" 100; }
.brand img { height: 30px; width: auto; vertical-align: middle; }
.brand span { font-weight: 500; font-size: 0.8125rem; color: var(--on-surface-variant); margin-left: 6px; }
.side nav { display: grid; gap: 4px; }
.side nav a, .side__link { display: flex; align-items: center; gap: 12px; padding: 0 14px; min-height: 48px; border-radius: 999px; text-decoration: none; color: var(--on-surface-variant); font: inherit; font-weight: 520; background: none; border: 0; width: 100%; cursor: pointer; transition: background 200ms var(--ease); }
.side nav a:hover, .side__link:hover { background: color-mix(in srgb, var(--on-surface) 8%, transparent); }
.side nav a[aria-current] { background: var(--secondary-container); color: var(--on-secondary-container); font-weight: 650; }
.side__foot { margin-top: auto; display: grid; gap: 2px; }
.side__foot form { margin: 0; }
.badge { margin-left: auto; min-width: 24px; padding: 1px 8px; border-radius: 999px; background: var(--error); color: #fff; font-size: 0.75rem; text-align: center; font-variant-numeric: tabular-nums; }
.main { min-width: 0; }
.topbar { display: flex; align-items: center; gap: 16px; padding: 14px 28px; position: sticky; top: 0; z-index: 3; background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: 0 1px 0 var(--outline-variant); }
.search { flex: 1; max-width: 560px; position: relative; display: block; }
.search .i { position: absolute; left: 14px; top: 14px; color: var(--on-surface-variant); }
.search input { padding-left: 44px; border-radius: 999px; }
.wrap { max-width: 1320px; margin: 0 auto; padding: 24px 28px 96px; display: grid; gap: 20px; }

/* ── Surfaces ── */
.card { background: var(--container-lowest); border-radius: 16px; padding: 22px; box-shadow: inset 0 0 0 1px var(--outline-variant); }
.card.flush { padding: 0; overflow: auto; }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.card__head--pad { padding: 16px 22px 8px; }
.stack { display: grid; gap: 16px; align-content: start; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.detail { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 20px; align-items: start; }
.head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 24px; }
.head > div > p { margin-top: 4px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.actions--start { justify-content: flex-start; }
.note, .error, .alert { padding: 12px 16px; border-radius: 12px; }
.note { background: var(--secondary-container); color: var(--on-secondary-container); transition: opacity 400ms var(--ease); }
.note.is-gone { opacity: 0; pointer-events: none; height: 0; padding: 0; overflow: hidden; }
.error { background: var(--error-container); color: var(--on-error-container); }
.alert { display: flex; align-items: center; gap: 12px; background: var(--tertiary-container); color: var(--on-tertiary-container); text-decoration: none; }
.alert:hover { filter: brightness(0.97); }
.toast { position: fixed; right: 20px; bottom: 20px; z-index: 10; box-shadow: 0 6px 24px rgb(0 0 0 / 0.18); }
.empty { text-align: center; color: var(--on-surface-variant); padding: 32px 16px; }
.count { font-variant-numeric: tabular-nums; background: var(--container-high); padding: 1px 10px; border-radius: 999px; font-size: 0.8125rem; margin-left: 6px; }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; font-family: inherit; font-size: 0.9375rem; font-weight: 560; line-height: 1; text-decoration: none; cursor: pointer; transition: border-radius 250ms var(--ease), filter 150ms var(--ease), background 150ms var(--ease); }
.btn:active { border-radius: 12px; }
.btn:hover { filter: brightness(0.95); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; filter: none; }
.btn--filled { background: var(--primary); color: var(--on-primary); }
.btn--tonal { background: var(--secondary-container); color: var(--on-secondary-container); }
.btn--text { background: transparent; color: var(--primary); padding-inline: 12px; }
.btn--danger { background: var(--error); color: #fff; }
.btn--sm { min-height: 36px; padding: 0 14px; font-size: 0.875rem; }
.btn--icon { width: 44px; min-width: 44px; padding: 0; background: var(--container-high); color: var(--on-surface-variant); }

/* ── Forms ── */
label { display: grid; gap: 6px; font-weight: 560; font-size: 0.875rem; }
label.check { display: flex; align-items: center; gap: 10px; font-weight: 400; min-height: 44px; }
label.check input { width: 20px; height: 20px; accent-color: var(--error); }
input:not([type=checkbox]), select, textarea {
  font-family: inherit; font-size: 1rem; line-height: 1.4; color: var(--on-surface);
  padding: 12px 14px; min-height: 48px; border-radius: 4px; border: 0; width: 100%;
  background: var(--container-lowest); box-shadow: inset 0 0 0 1px var(--outline);
}
input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--primary); }
input:focus, select, textarea:focus { outline: none; }
input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: inset 0 0 0 2px var(--primary); outline: none; }
textarea { resize: vertical; }
.filters { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.filters label { min-width: 150px; }
.filters .grow { flex: 1 1 240px; }
.bulkin { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; }
.copyrow { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; }
.codebox { position: relative; }
.codebox pre { margin: 0; padding: 14px; padding-right: 130px; background: var(--container); border-radius: 8px; overflow-x: auto; font-size: 0.8125rem; line-height: 1.5; white-space: pre-wrap; word-break: break-all; }
.codebox .btn { position: absolute; top: 8px; right: 8px; }
.how { border-radius: 12px; background: var(--container-low); padding: 4px 16px; }
.how summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.how ol { margin: 4px 0 14px; padding-left: 20px; display: grid; gap: 8px; }

/* ── Tables ── */
table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
th { text-align: left; font-size: 0.8125rem; font-weight: 600; color: var(--on-surface-variant); padding: 12px 16px; background: var(--container-low); position: sticky; top: 0; white-space: nowrap; }
td { padding: 13px 16px; border-top: 1px solid var(--outline-variant); vertical-align: top; }
td a { font-weight: 600; text-decoration: none; }
td a:hover { text-decoration: underline; }
td form { margin: 0; }
tbody tr:hover td { background: color-mix(in srgb, var(--primary) 4%, transparent); }
.sub { display: block; font-size: 0.8125rem; color: var(--on-surface-variant); margin-top: 2px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; font-variant-numeric: tabular-nums; }
.chk { width: 44px; padding-right: 0; }
tr.is-new td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
tr.is-closed td { color: var(--on-surface-variant); }
tr.is-bad td { background: var(--error-container); }
table.mini { font-size: 0.875rem; }
.tablewrap { overflow-x: auto; }
table.grid { min-width: 960px; }
table.grid td { padding: 6px 6px; border-top: 0; }
table.grid th { padding: 8px 6px; }
table.grid input, table.grid select { min-height: 40px; padding: 8px 10px; }
.fillcell { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.fillcell .track { flex: 1; }

/* ── Status pills, selects, chips ── */
.pill { display: inline-flex; padding: 4px 10px; border-radius: 8px; font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
.pill--open { background: var(--secondary-container); color: var(--on-secondary-container); }
.pill--closed { background: var(--container-high); color: var(--on-surface-variant); }
.chip { display: inline-flex; padding: 4px 12px; border-radius: 8px; font-size: 0.8125rem; font-weight: 600; background: var(--container-high); }
.chip--job { background: var(--secondary-container); color: var(--on-secondary-container); }
.chip--hire { background: var(--tertiary-container); color: var(--on-tertiary-container); }
.stsel { min-height: 36px; padding: 4px 28px 4px 10px; border-radius: 8px; font-size: 0.8125rem; font-weight: 600; width: auto; cursor: pointer; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-f { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; min-height: 40px; border-radius: 10px; background: var(--container-low); color: var(--on-surface-variant); text-decoration: none; font-weight: 520; box-shadow: inset 0 0 0 1px var(--outline-variant); transition: background 150ms var(--ease); }
.chip-f:hover { background: var(--container-high); }
.chip-f b { color: var(--on-surface); font-variant-numeric: tabular-nums; }
.chip-f[aria-current] { background: var(--primary); color: var(--on-primary); box-shadow: none; }
.chip-f[aria-current] b { color: inherit; }
.fuchip { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 2px 8px; border-radius: 6px; font-size: 0.75rem; background: var(--container-high); color: var(--on-surface-variant); }
.fuchip .i { width: 14px; height: 14px; }
.fuchip--today { background: var(--tertiary-container); color: var(--on-tertiary-container); }
.fuchip--late { background: var(--error-container); color: var(--on-error-container); }

/* One rule per stage, used by .pill--x, .stsel--x, .chip-f--x, .step--x */
.pill--new, .stsel--new, .step--new.is-current { background: var(--st-new); color: var(--on-st-new); }
.pill--contacted, .stsel--contacted, .step--contacted.is-current { background: var(--st-contacted); color: var(--on-st-contacted); }
.pill--shortlisted, .stsel--shortlisted, .step--shortlisted.is-current { background: var(--st-shortlisted); color: var(--on-st-shortlisted); }
.pill--interview, .stsel--interview, .step--interview.is-current { background: var(--st-interview); color: var(--on-st-interview); }
.pill--selected, .stsel--selected, .step--selected.is-current { background: var(--st-selected); color: var(--on-st-selected); }
.pill--placed, .stsel--placed, .step--placed.is-current { background: var(--st-placed); color: var(--on-st-placed); }
.pill--rejected, .stsel--rejected, .step--rejected.is-current { background: var(--st-rejected); color: var(--on-st-rejected); }
.pill--dropped, .stsel--dropped, .step--dropped.is-current { background: var(--st-dropped); color: var(--on-st-dropped); }
.stsel { box-shadow: none; }

/* ── KPIs, charts, bars ── */
.kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.kpi { display: grid; gap: 2px; padding: 16px 18px; border-radius: 16px; text-decoration: none; color: var(--on-surface); position: relative; background: var(--container-lowest); box-shadow: inset 0 0 0 1px var(--outline-variant); transition: transform 200ms var(--ease), box-shadow 200ms var(--ease); }
.kpi::before { content: ""; width: 28px; height: 4px; border-radius: 2px; background: var(--kpi, var(--primary)); margin-bottom: 6px; }
.kpi:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--kpi, var(--primary)); }
.kpi span { font-size: 0.8125rem; font-weight: 600; color: var(--on-surface-variant); }
.kpi__n { font-size: 2.25rem; line-height: 1.1; font-weight: 750; font-variant-numeric: tabular-nums; font-variation-settings: "wdth" 90; }
.kpi small { font-size: 0.8125rem; color: var(--on-surface-variant); }
.kpi--all { --kpi: #1d5fb4; } .kpi--pending { --kpi: var(--sol-pending); } .kpi--selected { --kpi: var(--sol-selected); }
.kpi--gone { --kpi: var(--sol-gone); } .kpi--jobs { --kpi: #6b4fbb; } .kpi--fu { --kpi: #00796b; }

.seg { display: inline-flex; border-radius: 999px; background: var(--container); padding: 3px; }
.seg a { padding: 0 14px; min-height: 34px; display: inline-flex; align-items: center; border-radius: 999px; text-decoration: none; color: var(--on-surface-variant); font-size: 0.8125rem; font-weight: 600; }
.seg a[aria-current] { background: var(--primary); color: var(--on-primary); }
.chart { width: 100%; height: auto; margin-top: 8px; }
.chart__axis { stroke: var(--outline-variant); stroke-width: 1; }
.chart__txt { font-size: 10px; fill: var(--on-surface-variant); font-variant-numeric: tabular-nums; }
.chart__bar { fill: var(--primary); transform-box: fill-box; transform-origin: bottom; animation: grow 600ms var(--ease) both; transition: fill 150ms; }
.chart__bar:hover { fill: #e08a00; }
@keyframes grow { from { transform: scaleY(0); } }

.donut-wrap { display: grid; grid-template-columns: 170px 1fr; gap: 20px; align-items: center; margin-top: 12px; }
.donut { width: 100%; height: auto; }
.donut__ring { stroke: var(--container-high); }
.donut__seg:hover { stroke-width: 6.5; }
.donut__seg--pending { stroke: var(--sol-pending); } .donut__seg--selected { stroke: var(--sol-selected); } .donut__seg--gone { stroke: var(--sol-gone); }
.donut__num { font-size: 7px; font-weight: 700; fill: var(--on-surface); }
.donut__lbl { font-size: 2.6px; fill: var(--on-surface-variant); }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.legend a { display: grid; grid-template-columns: 14px 1fr auto 44px; gap: 10px; align-items: center; min-height: 40px; padding: 0 8px; border-radius: 8px; color: var(--on-surface); text-decoration: none; }
.legend a:hover { background: var(--container-low); }
.legend b, .legend span { font-variant-numeric: tabular-nums; text-align: right; }
.dot { width: 12px; height: 12px; border-radius: 50%; }
.dot--pending { background: var(--sol-pending); } .dot--selected { background: var(--sol-selected); } .dot--gone { background: var(--sol-gone); }

.funnel { display: grid; gap: 2px; margin: 10px 0; }
.funnel__row { display: grid; grid-template-columns: 110px 1fr 44px; gap: 12px; align-items: center; min-height: 40px; padding: 0 8px; border-radius: 8px; color: var(--on-surface); text-decoration: none; }
.funnel__row:hover { background: var(--container-low); }
.funnel__row b { text-align: right; font-variant-numeric: tabular-nums; }
.track { display: block; height: 10px; border-radius: 999px; background: var(--container-high); overflow: hidden; }
.bar { display: block; height: 100%; width: 100%; border-radius: 999px; background: var(--primary); clip-path: inset(0 calc(100% - var(--w, 0%)) 0 0 round 999px); transition: clip-path 700ms var(--ease); }
.bar--new { background: var(--sol-new); } .bar--contacted { background: var(--sol-contacted); } .bar--shortlisted { background: var(--sol-shortlisted); }
.bar--interview { background: var(--sol-interview); } .bar--selected { background: var(--sol-selected); } .bar--placed { background: var(--sol-placed); }
.bar--rejected { background: var(--sol-rejected); } .bar--dropped { background: var(--sol-dropped); } .bar--src { background: var(--sol-src); }

/* ── Candidate page ── */
dl { display: grid; grid-template-columns: max-content 1fr; gap: 10px 24px; margin: 20px 0; }
dt { color: var(--on-surface-variant); font-size: 0.875rem; }
dd { margin: 0; overflow-wrap: anywhere; }
.msg { background: var(--container-low); padding: 16px; border-radius: 12px; margin-top: 8px; line-height: 1.6; overflow-wrap: anywhere; }
.card h2 + .msg { margin-top: 10px; }
.danger { box-shadow: inset 0 0 0 1px var(--error-container); }
.danger p { font-size: 0.875rem; color: var(--on-surface-variant); }
.stepper { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.step { min-height: 44px; padding: 0 18px; border: 0; border-radius: 12px; background: var(--container-low); color: var(--on-surface-variant); box-shadow: inset 0 0 0 1px var(--outline-variant); font: inherit; font-weight: 600; cursor: pointer; transition: background 150ms var(--ease), transform 150ms var(--ease); }
.step:hover { background: var(--container-high); }
.step:active { transform: scale(0.97); }
.step.is-current { box-shadow: none; }
.quick { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── Follow-ups ── */
.fulist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fu { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--container-low); --fu-c: var(--sol-shortlisted); }
.fu::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--fu-c); }
.fu--late { --fu-c: var(--error); background: color-mix(in srgb, var(--error-container) 45%, var(--container-low)); }
.fu--done { opacity: 0.65; --fu-c: var(--outline-variant); }
.fu__main { display: grid; gap: 2px; min-width: 0; flex: 1 1 200px; }
.fu__who { font-weight: 650; text-decoration: none; }
.fu__main .chip { justify-self: start; font-size: 0.6875rem; padding: 2px 8px; }
.fu__actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fu__actions form { margin: 0; }
.fugroup--overdue h2 { color: var(--error); }
details.card summary { cursor: pointer; font-weight: 600; min-height: 32px; }

/* ── Bulk bar ── */
.bulkbar { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 16px; background: var(--on-surface); color: var(--surface); box-shadow: 0 8px 28px rgb(0 0 0 / 0.28); max-width: calc(100vw - 24px); }
.bulkbar[hidden] { display: none; }
.bulkbar select, .bulkbar input:not([type=checkbox]) { min-height: 40px; width: auto; }
.bulkbar .btn--text { color: var(--surface); }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }

/* ── Board ── */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 12px; align-items: start; }
.kcol { background: var(--container-low); border-radius: 14px; padding: 12px; min-height: 220px; transition: box-shadow 150ms var(--ease); }
.kcol.is-over { box-shadow: inset 0 0 0 3px var(--primary); background: var(--secondary-container); }
.kcol h2::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--kc, var(--outline)); margin-right: 8px; }
.kcol h2 { display: flex; align-items: center; margin-bottom: 10px; font-size: 0.9375rem; }
.kcount { margin-left: auto; font-variant-numeric: tabular-nums; background: var(--container-lowest); border-radius: 999px; padding: 0 10px; font-size: 0.8125rem; }
.kcol__body { display: grid; gap: 8px; min-height: 80px; }
.kcard { background: var(--container-lowest); border-radius: 12px; padding: 12px; display: grid; gap: 2px; box-shadow: inset 0 0 0 1px var(--outline-variant); cursor: grab; }
.kcard:active { cursor: grabbing; }
.kcard.is-drag { opacity: 0.45; }
.kcard a { font-weight: 650; text-decoration: none; }
.kcard .stsel { margin-top: 8px; width: 100%; }
.kcol__more { display: block; margin-top: 10px; text-align: center; font-size: 0.875rem; }
.kcol--new { --kc: var(--sol-new); } .kcol--contacted { --kc: var(--sol-contacted); } .kcol--shortlisted { --kc: var(--sol-shortlisted); }
.kcol--interview { --kc: var(--sol-interview); } .kcol--selected { --kc: var(--sol-selected); } .kcol--placed { --kc: var(--sol-placed); }
.kcol--rejected { --kc: var(--sol-rejected); } .kcol--dropped { --kc: var(--sol-dropped); }

/* ── Sign-in ── */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth__card { width: min(420px, 100%); display: grid; gap: 18px; padding: 32px; border-radius: 28px; }
.auth__logo { width: 96px; height: auto; }
.auth__card code { font-size: 0.875em; }
.auth__card > a { justify-self: center; font-size: 0.875rem; }

@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid2, .detail, .bulkin { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side, .main { min-width: 0; }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px 12px; gap: 8px; }
  .side nav { display: flex; overflow-x: auto; flex: 1 1 100%; order: 3; }
  .side nav a { flex: none; padding: 0 14px; }
  .side__foot { margin: 0 0 0 auto; display: flex; }
  .side__link span { display: none; }
  .topbar { padding: 10px 14px; top: 0; }
  .wrap { padding: 16px 14px 96px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .row, .row3 { grid-template-columns: 1fr; }
  .donut-wrap { grid-template-columns: 1fr; justify-items: center; }
  .legend { width: 100%; }
  .tbl-leads th:nth-child(4), .tbl-leads td:nth-child(4), .tbl-leads th:nth-child(5), .tbl-leads td:nth-child(5) { display: none; }
  .topbar .btn { padding: 0 14px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Connections page: a row of action buttons that keep their natural width */
.btnrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.btnrow form { display: contents; }