/* Mirano Panel — "mirador à la tombée de la nuit" */
:root {
  --ink: #1A2430;        /* fond : ardoise bleu nuit */
  --deck: #212E3C;       /* surfaces */
  --deck-2: #283748;     /* surfaces surélevées, survol */
  --line: #34475B;       /* traits */
  --text: #E6EDF3;
  --muted: #93A6B8;
  --beam: #E9D27A;       /* jaune lampe à sodium : seule couleur de marque */
  --log: #5AA9E6;
  --kick: #F0A04B;
  --ban: #E5484D;
  --ok: #4FB286;
  --radius-s: 6px;
  --radius-m: 10px;
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Ubuntu, Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Ubuntu, Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--ink);
  color: var(--text);
  font: 15px/1.5 var(--font);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--beam); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--beam); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.2; margin: 0; }
h1 { font-size: 26px; font-weight: 650; letter-spacing: -0.01em; }
h2 { font-size: 18px; font-weight: 620; }
h3 { font-size: 15px; font-weight: 620; }
p { margin: 0; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); font-size: 13px; }
.small { font-size: 13px; }
.hidden { display: none !important; }

/* --------------------------------------------------------------- logo */
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.brand svg { flex: none; }
.brand-word { font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: 0.01em; }

/* -------------------------------------------------------- connexion */
.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background:
    linear-gradient(115deg, transparent 0 58%, rgba(233, 210, 122, 0.07) 58% 64%, transparent 64%),
    var(--ink);
}
.login-panel { width: min(380px, 100%); }
.login-panel .brand { margin-bottom: 28px; }
.login-panel h1 { margin-bottom: 6px; }
.login-panel form { display: grid; gap: 14px; margin-top: 22px; }

/* ------------------------------------------------------------ layout */
.shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100%; }
.side {
  border-right: 1px solid var(--line);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: sticky;
  top: 0;
  height: 100vh;
}
.nav { display: grid; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-s);
  color: var(--muted);
  text-decoration: none;
}
.nav a:hover { background: var(--deck); color: var(--text); }
.nav a[aria-current="page"] { background: var(--deck-2); color: var(--text); box-shadow: inset 3px 0 0 var(--beam); }
.nav svg { width: 18px; height: 18px; flex: none; }
.side-foot { margin-top: auto; display: grid; gap: 8px; font-size: 13px; }

.main { min-width: 0; }
.top {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 28px;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 5;
  background: rgba(26, 36, 48, 0.94);
  backdrop-filter: blur(6px);
}
.top .spacer { flex: 1; }
.content { padding: 26px 28px 60px; max-width: 1280px; }
.page-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.page-head .spacer { flex: 1; }
.page-head p { margin-top: 4px; }

/* ---------------------------------------------------------- statut */
.status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.dot.on { background: var(--ok); box-shadow: 0 0 0 3px rgba(79, 178, 134, 0.22); }
.dot.off { background: var(--ban); }

/* --------------------------------------------------------- contrôles */
label.field { display: grid; gap: 5px; font-size: 13px; color: var(--muted); }
input[type=text], input[type=password], input[type=number], input[type=search], select, textarea {
  width: 100%;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 8px 10px;
  color: var(--text);
}
textarea { resize: vertical; min-height: 92px; font-family: var(--mono); font-size: 13px; }
input:focus, select:focus, textarea:focus { border-color: var(--beam); outline: none; }
select { padding-right: 28px; }
.btn {
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--line);
  background: var(--deck-2);
  border-radius: var(--radius-s);
  padding: 7px 13px;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { border-color: var(--muted); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn.primary { background: var(--beam); border-color: var(--beam); color: #1A2430; font-weight: 620; }
.btn.primary:hover { filter: brightness(1.06); }
.btn.danger { border-color: rgba(229, 72, 77, 0.55); color: #FFB3B5; background: rgba(229, 72, 77, 0.12); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover { color: var(--text); background: var(--deck); }
.btn.sm { padding: 4px 9px; font-size: 13px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grid4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }

.switch { position: relative; width: 38px; height: 22px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: 22px; background: var(--line); transition: background 0.15s; pointer-events: none; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--text); transition: transform 0.15s; }
.switch input:checked + span { background: var(--ok); }
.switch input:checked + span::after { transform: translateX(16px); }
.switch input:focus-visible + span { outline: 2px solid var(--beam); outline-offset: 2px; }

/* ----------------------------------------------------- badges action */
.act { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.act::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: currentColor; }
.act.log { color: var(--log); }
.act.kick { color: var(--kick); }
.act.ban { color: var(--ban); }
.tag { display: inline-block; font-size: 12px; padding: 1px 7px; border-radius: 20px; border: 1px solid var(--line); color: var(--muted); }
.tag.fp { border-color: rgba(79, 178, 134, 0.6); color: #8FD9B6; }
tr.muted-row td { opacity: 0.55; }
label.row.check { gap: 10px; align-items: flex-start; font-size: 14px; }
label.row.check input { margin-top: 3px; width: auto; }
.tag.staff { border-color: rgba(233, 210, 122, 0.5); color: var(--beam); }

/* ------------------------------------------------------------ tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-m); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-size: 13px; font-weight: 600; color: var(--muted); background: var(--deck); position: sticky; top: 0; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.click { cursor: pointer; }
tbody tr.click:hover { background: var(--deck); }
td .actions { display: flex; gap: 6px; justify-content: flex-end; }
td { white-space: nowrap; }
td:nth-child(2) { white-space: normal; }
.empty { padding: 36px 16px; text-align: center; color: var(--muted); }
.pager { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 12px; font-size: 13px; color: var(--muted); }
.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.filters > * { width: auto; min-width: 160px; }
.filters input[type=search] { min-width: 260px; flex: 1; }

/* ----------------------------------------------------- tableau de bord */
.glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); border: 1px solid var(--line); border-radius: var(--radius-m); margin-bottom: 22px; }
.glance > div { padding: 16px 18px; border-right: 1px solid var(--line); }
.glance > div:last-child { border-right: 0; }
.glance strong { display: block; font-family: var(--font-display); font-size: 30px; font-weight: 650; line-height: 1.1; }
.glance span { color: var(--muted); font-size: 13px; }
.dash { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.panel-block { border: 1px solid var(--line); border-radius: var(--radius-m); padding: 18px; }
.panel-block h2 { margin-bottom: 14px; }
.chart { width: 100%; height: auto; display: block; }
.legend { display: flex; gap: 16px; margin-top: 10px; }
.toplist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.toplist li { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: 14px; }
.toplist .bar { grid-column: 1 / -1; height: 5px; background: var(--deck-2); border-radius: 3px; overflow: hidden; }
.toplist .bar i { display: block; height: 100%; background: var(--beam); }
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.feed li:last-child { border-bottom: 0; }

/* -------------------------------------------------------- configuration */
.cfg-cats { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.cfg-cats .btn[aria-pressed="true"] { border-color: var(--beam); color: var(--beam); }
.module { border: 1px solid var(--line); border-radius: var(--radius-m); margin-bottom: 12px; }
.module.off { opacity: 0.62; }
.module-head { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; }
.module-head .who { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.module-body { padding: 0 16px 16px 68px; display: grid; gap: 14px; }
.module-body .desc { color: var(--muted); font-size: 14px; max-width: 72ch; }
.module-head select { width: auto; min-width: 150px; }
.field.narrow { max-width: 280px; }
.conf { font-size: 12px; color: var(--muted); }
.savebar {
  position: sticky; bottom: 0; z-index: 4;
  display: flex; gap: 12px; align-items: center;
  padding: 12px 16px; margin-top: 18px;
  background: var(--deck-2); border: 1px solid var(--beam); border-radius: var(--radius-m);
}

/* ------------------------------------------------------ fenêtres */
.overlay { position: fixed; inset: 0; background: rgba(10, 15, 21, 0.66); display: grid; place-items: center; padding: 16px; z-index: 20; }
.dialog { width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--deck); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 20px; }
.dialog.wide { width: min(880px, 100%); }
.dialog h2 { margin-bottom: 14px; }
.dialog form { display: grid; gap: 14px; }
.dialog .row.end { justify-content: flex-end; margin-top: 6px; }
.secret { background: var(--ink); border: 1px dashed var(--beam); border-radius: var(--radius-s); padding: 12px; font-family: var(--mono); font-size: 13px; word-break: break-all; }
.kv { display: grid; grid-template-columns: 140px 1fr; gap: 8px 14px; font-size: 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; word-break: break-all; }
pre.data { background: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 12px; overflow: auto; font-family: var(--mono); font-size: 13px; margin: 0; }
.shot { width: 100%; border-radius: var(--radius-s); border: 1px solid var(--line); display: block; }
.note { border-left: 3px solid var(--beam); padding: 8px 12px; background: var(--deck); border-radius: 0 var(--radius-s) var(--radius-s) 0; font-size: 14px; }
.note.warn { border-left-color: var(--kick); }

#toasts { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 30; }
.toast { background: var(--deck-2); border: 1px solid var(--line); border-left: 3px solid var(--ok); border-radius: var(--radius-s); padding: 10px 14px; max-width: 360px; font-size: 14px; }
.toast.error { border-left-color: var(--ban); }


/* ------------------------------------------------------ en direct : commun */
.content.wide { max-width: none; }
.role-chip { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 20px; border: 1px solid var(--line); color: var(--text); white-space: nowrap; }
.role-chip.staff { border-color: rgba(229, 72, 77, 0.6); color: #FFB3B5; background: rgba(229, 72, 77, 0.1); }
.tscore { display: inline-block; min-width: 32px; text-align: center; font-size: 12px; font-weight: 650; padding: 1px 7px; border-radius: 4px; }
.tscore.low { color: var(--muted); background: var(--deck-2); }
.tscore.mid { color: #1A2430; background: var(--kick); }
.tscore.high { color: #fff; background: var(--ban); }
.pin-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #F4F7FA; border: 2px solid #1A2430; flex: none; }
.pin-dot.staff { background: var(--ban); }
.pin-dot.threat { box-shadow: 0 0 0 2px var(--ban); }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; cursor: pointer; }
.actions.wrap { display: flex; flex-wrap: wrap; gap: 6px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; width: 100%; }
code { font-family: var(--mono); font-size: 13px; background: var(--deck-2); padding: 1px 5px; border-radius: 4px; }
.kv.compact { grid-template-columns: 120px 1fr; gap: 4px 10px; font-size: 13px; }

/* ------------------------------------------------------------------ carte */
.map-stage {
  position: relative; overflow: hidden;
  height: calc(100vh - 140px); min-height: 480px;
  border: 1px solid var(--line); border-radius: var(--radius-m);
  background: radial-gradient(ellipse at 40% 45%, #1C4A66 0%, #133649 55%, #0E2A3A 100%); cursor: grab; touch-action: none;
}
.map-stage:active { cursor: grabbing; }
.map-layer { position: absolute; left: 0; top: 0; transform-origin: 0 0; --inv: 1; will-change: transform; }
.map-layer.animate { transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.map-img { position: absolute; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.map-grid, .map-heat { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; pointer-events: none; }
.map-heat { pointer-events: none; image-rendering: auto; }
.map-pins { position: absolute; inset: 0; }
.pin {
  position: absolute; width: 14px; height: 14px; padding: 0; margin: 0;
  border-radius: 50%; border: 2px solid #1A2430; background: #F4F7FA; cursor: pointer;
  transform: translate(-50%, -50%) scale(var(--inv));
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.pin.staff { background: var(--ban); }
.pin.threat { box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.85), 0 1px 4px rgba(0, 0, 0, 0.5); }
.pin.selected { outline: 3px solid var(--beam); outline-offset: 2px; z-index: 2; }
.pin-label {
  position: absolute; left: 50%; bottom: 150%; transform: translateX(-50%);
  white-space: nowrap; font-size: 12px; padding: 2px 7px; border-radius: 4px;
  background: rgba(17, 24, 32, 0.92); color: var(--text); pointer-events: none; display: none;
}
.pin:hover .pin-label, .pin:focus-visible .pin-label, .pin.selected .pin-label { display: block; }
.map-bottom { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 3; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; pointer-events: none; }
.map-bottom > * { pointer-events: auto; }
.map-coords { background: rgba(17, 24, 32, 0.85); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 4px 9px; color: var(--muted); min-width: 160px; }
.map-jumps, .map-tools { display: flex; gap: 6px; align-items: center; background: rgba(17, 24, 32, 0.9); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 5px; }
.map-tools { margin-left: auto; }
.map-tools .btn { min-width: 32px; }
.zoom-label { font-size: 12px; color: var(--muted); min-width: 46px; text-align: center; }
.map3d { position: absolute; inset: 0; z-index: 1; }
.map3d-canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; outline: none; }
.map3d-canvas:active { cursor: grabbing; }
.map3d-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.map3d-label { position: absolute; transform: translate(-50%, -100%); white-space: nowrap; font-size: 12px; padding: 2px 7px; border-radius: 4px; background: rgba(17, 24, 32, 0.92); color: var(--text); }
.map3d-error { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); }
.map3d-help { position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%); z-index: 2; background: rgba(17, 24, 32, 0.8); border: 1px solid var(--line); border-radius: 20px; padding: 3px 12px; color: var(--muted); pointer-events: none; white-space: nowrap; }
.mode-btn[aria-pressed="true"] { border-color: var(--beam); color: var(--beam); }
.map-tools select.exag { width: auto; padding: 4px 26px 4px 8px; font-size: 13px; }
.map-ui {
  position: absolute; top: 14px; z-index: 3; cursor: auto;
  background: rgba(17, 24, 32, 0.94); border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: 14px; display: grid; gap: 10px; align-content: start;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.map-controls { left: 14px; width: 280px; max-height: calc(100% - 84px); overflow: auto; }
.map-side { right: 14px; width: 320px; max-height: calc(100% - 84px); overflow: auto; }
.map-ui-head { all: unset; cursor: pointer; font-family: var(--font-display); font-weight: 620; font-size: 15px; display: flex; align-items: center; gap: 4px; }
.map-ui-head::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); }
.map-ui-head[aria-expanded="false"]::after { transform: rotate(-45deg); }
.map-ui-head:focus-visible { outline: 2px solid var(--beam); outline-offset: 3px; border-radius: 4px; }
.map-ui.collapsed > :not(.map-ui-head) { display: none; }
.map-ui .count { font-size: 12px; font-weight: 600; padding: 1px 7px; border-radius: 4px; background: var(--deck-2); color: var(--muted); margin-left: 4px; }
.legend-map { display: grid; gap: 6px; font-size: 12px; color: var(--muted); }
.legend-map > span { display: flex; gap: 8px; align-items: center; }
.plist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.plist button { width: 100%; display: flex; align-items: center; gap: 9px; text-align: left; background: none; border: 0; border-radius: var(--radius-s); padding: 6px 8px; cursor: pointer; color: var(--text); }
.plist button:hover { background: var(--deck-2); }
.plist .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard { display: grid; gap: 12px; }
.pcard-head { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }

/* ------------------------------------------------------------ multistream */
.focus-area { display: grid; gap: 14px; margin-bottom: 22px; }
.focus-area[data-n="2"], .focus-area[data-n="3"], .focus-area[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.focus-tile { border: 1px solid var(--line); border-radius: var(--radius-m); padding: 10px; display: grid; gap: 10px; background: var(--deck); }
.focus-tile:fullscreen { background: #000; padding: 0; align-content: center; }
.focus-tile:fullscreen .focus-bar, .focus-tile:fullscreen .actions { display: none; }
.focus-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.focus-bar .spacer { flex: 1; }
.live { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: #fff; background: var(--ban); padding: 2px 7px; border-radius: 4px; }
.fps { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.focus-area[data-n="1"] .focus-screen { max-width: calc(68vh * 16 / 9); width: 100%; margin: 0 auto; }
.focus-screen, .tile-screen { position: relative; aspect-ratio: 16 / 9; background: #0B1117; border-radius: var(--radius-s); overflow: hidden; display: grid; place-items: center; }
.focus-screen img, .tile-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.waiting { color: var(--muted); font-size: 13px; }
.has-frame .waiting { display: none; }
.focus-tile:not(.has-frame) img, .tile:not(.has-frame) img { visibility: hidden; }
.stream-tools { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; margin-bottom: 8px; }
.stream-tools input[type=search] { width: 260px; }
.stream-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-top: 12px; }
.tile { display: grid; gap: 6px; padding: 6px; background: var(--deck); border: 1px solid var(--line); border-radius: var(--radius-m); cursor: pointer; text-align: left; color: var(--text); }
.tile:hover { border-color: var(--beam); }
.tile-label { display: flex; align-items: center; gap: 6px; font-size: 13px; min-width: 0; overflow: hidden; white-space: nowrap; }

/* -------------------------------------------------------------------- aide */
.help-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 18px; }
.help ul, .help ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.help p { color: var(--text); }
.help .kv { grid-template-columns: 130px 1fr; }
.help .kv dd { word-break: normal; overflow-wrap: anywhere; }
a.btn:not(.primary):not(.danger) { color: var(--text); }

@media (max-width: 900px) {
  .map-stage { height: calc(100vh - 120px); }
  .map-controls { width: calc(100% - 28px); max-height: 42%; }
  .map-side { top: auto; bottom: 64px; width: calc(100% - 28px); max-height: 38%; }
  .map-jumps { display: none; }
  .map3d-help { display: none; }
  .map-coords { display: none; }
  .focus-area[data-n="2"], .focus-area[data-n="3"], .focus-area[data-n="4"] { grid-template-columns: 1fr; }
  .help-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------- mobile */
.menu-toggle { display: none; }
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: fixed; inset: 0 auto 0 0; width: 250px; z-index: 15; background: var(--ink); transform: translateX(-100%); transition: transform 0.2s; }
  .shell.menu-open .side { transform: none; }
  .menu-toggle { display: inline-flex; }
  .top, .content { padding-left: 16px; padding-right: 16px; }
  .dash { grid-template-columns: 1fr; }
  .module-body { padding-left: 16px; }
  .module-head { grid-template-columns: auto 1fr; }
  .module-head select { grid-column: 1 / -1; }
  .glance > div { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }