/* Manatec EV staff portal. Colours and type follow the Manatec EV app (lib/app/theme.dart):
   Manatec red, warm neutrals, Barlow for text and Barlow Condensed for figures. */

@font-face { font-family: "Barlow"; src: url("../fonts/Barlow-400.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/Barlow-500.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/Barlow-600.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/Barlow-700.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/BarlowCondensed-600.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/BarlowCondensed-700.ttf") format("truetype"); font-weight: 700; font-display: swap; }

/* --- Tokens ------------------------------------------------------------------------------- */

:root {
    color-scheme: light;
    --bg: #f4f2ef;
    --surface: #ffffff;
    --surface-2: #f8f6f3;
    --line: #e7e2dc;
    --line-2: #f0ece7;
    --ink: #17161a;
    --ink-2: #3b3834;
    --dim: #76706a;
    --accent: #d6302a;
    --accent-2: #9c1e19;
    --accent-soft: #fbeae8;
    --ok: #16865a;  --ok-soft: #e2f4eb;
    --warn: #ad6408; --warn-soft: #fcf0dd;
    --bad: #c42b22;  --bad-soft: #fce5e2;
    --info: #2d6aad; --info-soft: #e5eef9;
    --off: #7d7771;  --off-soft: #efece8;
    --shadow: 0 1px 2px rgba(23, 22, 26, 0.04), 0 10px 30px -18px rgba(23, 22, 26, 0.22);
    --shadow-lift: 0 2px 4px rgba(23, 22, 26, 0.05), 0 18px 40px -20px rgba(23, 22, 26, 0.32);
    --side: #111113;
    --side-ink: #f4f2ef;
    --side-dim: #8d8984;
    --radius: 14px;
    --radius-sm: 9px;
    --body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --display: "Barlow Condensed", "Barlow", system-ui, sans-serif;
    --mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg: #0c0c0e;
        --surface: #151518;
        --surface-2: #1b1b1f;
        --line: rgba(255, 255, 255, 0.09);
        --line-2: rgba(255, 255, 255, 0.05);
        --ink: #f4f2ef;
        --ink-2: #d9d5cf;
        --dim: #9c9893;
        --accent: #ef4a42;
        --accent-2: #ff7a72;
        --accent-soft: rgba(239, 74, 66, 0.14);
        --ok: #3ccb86;  --ok-soft: rgba(60, 203, 134, 0.14);
        --warn: #f2a23a; --warn-soft: rgba(242, 162, 58, 0.14);
        --bad: #ff5a4e;  --bad-soft: rgba(255, 90, 78, 0.14);
        --info: #6fa8e8; --info-soft: rgba(111, 168, 232, 0.14);
        --off: #8e8b87;  --off-soft: rgba(255, 255, 255, 0.07);
        --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px -18px rgba(0, 0, 0, 0.8);
        --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.4), 0 18px 40px -20px rgba(0, 0, 0, 0.9);
        --side: #0a0a0b;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0c0c0e;
    --surface: #151518;
    --surface-2: #1b1b1f;
    --line: rgba(255, 255, 255, 0.09);
    --line-2: rgba(255, 255, 255, 0.05);
    --ink: #f4f2ef;
    --ink-2: #d9d5cf;
    --dim: #9c9893;
    --accent: #ef4a42;
    --accent-2: #ff7a72;
    --accent-soft: rgba(239, 74, 66, 0.14);
    --ok: #3ccb86;  --ok-soft: rgba(60, 203, 134, 0.14);
    --warn: #f2a23a; --warn-soft: rgba(242, 162, 58, 0.14);
    --bad: #ff5a4e;  --bad-soft: rgba(255, 90, 78, 0.14);
    --info: #6fa8e8; --info-soft: rgba(111, 168, 232, 0.14);
    --off: #8e8b87;  --off-soft: rgba(255, 255, 255, 0.07);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px -18px rgba(0, 0, 0, 0.8);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.4), 0 18px 40px -20px rgba(0, 0, 0, 0.9);
    --side: #0a0a0b;
}

/* --- Base --------------------------------------------------------------------------------- */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 400 15px/1.5 var(--body);
    font-variant-numeric: tabular-nums;
}

a { color: var(--accent-2); text-decoration: none; }
:root[data-theme="dark"] a { color: var(--accent-2); }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: 0.005em; text-wrap: balance; margin: 0; }
h1 { font-size: 34px; line-height: 1.1; }
h2 { font-size: 19px; line-height: 1.25; }
h3 { font-size: 16px; line-height: 1.3; }

code, pre { font-family: var(--mono); font-size: 12.5px; }
pre { white-space: pre-wrap; word-break: break-all; margin: 8px 0 0; background: var(--surface-2); padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line-2); }

.dim { color: var(--dim); }
.small { font-size: 13px; }
.sub { color: var(--dim); font-size: 13px; }
.nowrap { white-space: nowrap; }
.wrap { word-break: break-word; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.eyebrow { color: var(--dim); font-size: 12px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* --- Shell -------------------------------------------------------------------------------- */

.shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }

.side {
    background: var(--side);
    background-image: radial-gradient(420px 260px at -10% -10%, rgba(214, 48, 42, 0.22), transparent 65%);
    color: var(--side-ink);
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 22px 14px 16px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.brand { display: flex; align-items: center; gap: 11px; color: var(--side-ink); padding: 0 8px 6px; }
.brand:hover { text-decoration: none; }
.brand img { border-radius: 9px; box-shadow: 0 6px 18px -6px rgba(214, 48, 42, 0.7); }
.brand strong { display: block; font-family: var(--display); font-size: 21px; line-height: 1.05; }
.brand small { display: block; color: var(--side-dim); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }

.nav { display: flex; flex-direction: column; gap: 1px; }
.nav-group { color: var(--side-dim); font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin: 12px 10px 4px; opacity: 0.8; }
.nav a {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #bdb8b2;
    padding: 8px 10px;
    border-radius: 9px;
    font-weight: 500;
    position: relative;
}
.nav a .ico { opacity: 0.75; }
.nav a:hover { color: var(--side-ink); background: rgba(255, 255, 255, 0.05); text-decoration: none; }
.nav a.active { color: #fff; background: linear-gradient(90deg, rgba(214, 48, 42, 0.32), rgba(214, 48, 42, 0.06)); }
.nav a.active .ico { opacity: 1; color: #ff7a72; }
.nav a.active::before { content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: #ef4a42; }

.me { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.me-card { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; color: var(--side-ink); }
.me-card:hover, .me-card.active { background: rgba(255, 255, 255, 0.06); text-decoration: none; }
.avatar {
    width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none;
    background: linear-gradient(135deg, #ef4a42, #9c1e19); color: #fff; font: 700 13px var(--body);
}
.me-text { display: flex; flex-direction: column; min-width: 0; }
.me-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-role { color: var(--side-dim); font-size: 12px; }
.me-actions { display: flex; gap: 6px; padding: 0 4px; }
.me-actions form { margin: 0; }
.icon-btn {
    display: inline-grid; place-items: center; width: 36px; height: 34px; border-radius: 9px; cursor: pointer;
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--side-ink);
}
.icon-btn:hover { background: rgba(255, 255, 255, 0.1); }

.main { padding: 30px 36px 56px; display: flex; flex-direction: column; gap: 20px; min-width: 0; max-width: 1480px; width: 100%; }

.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; }
.page-head > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.page-head p { margin: 0; }
.head-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.crumbs { font-size: 13px; color: var(--dim); }
.head-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }

/* --- Toasts ------------------------------------------------------------------------------- */

.toast {
    display: flex; align-items: center; gap: 10px; margin: 0; padding: 11px 14px; border-radius: 11px;
    border: 1px solid transparent; font-weight: 500; box-shadow: var(--shadow);
}
.toast-ok { color: var(--ok); background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.toast-bad { color: var(--bad); background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 25%, transparent); }

.alert { margin: 0; padding: 11px 14px; border-radius: 10px; border: 1px solid transparent; }
.alert-ok { color: var(--ok); background: var(--ok-soft); }
.alert-warn { color: var(--warn); background: var(--warn-soft); }
.alert-bad { color: var(--bad); background: var(--bad-soft); }
.alert-info { color: var(--info); background: var(--info-soft); }

.secret {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px;
    background: var(--warn-soft); border: 1px dashed var(--warn); color: var(--ink);
}
.secret code { font-size: 20px; font-weight: 700; letter-spacing: 0.08em; color: var(--ink); background: none; }

/* --- Panels, tiles, columns --------------------------------------------------------------- */

.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px 20px;
    min-width: 0;
    box-shadow: var(--shadow);
}
.panel > h2 { margin-bottom: 12px; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.panel-head h2 { display: flex; align-items: center; gap: 8px; }
.panel-head h2 .ico { color: var(--accent); }

.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.cols-wide { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; align-items: start; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px 18px;
    color: var(--ink);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a.tile:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.tile-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tile-label { color: var(--dim); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.tile-icon { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.tile-value { font-family: var(--display); font-size: 36px; font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; }
.tile-value small { font-size: 16px; color: var(--dim); font-weight: 600; margin-left: 3px; }
.tile-note { color: var(--dim); font-size: 13px; }
.tile-info .tile-icon { background: var(--info-soft); color: var(--info); }
.tile-ok .tile-icon { background: var(--ok-soft); color: var(--ok); }
.tile-warn .tile-icon { background: var(--warn-soft); color: var(--warn); }
.tile-bad .tile-icon { background: var(--bad-soft); color: var(--bad); }
.tile-bad::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--bad); }
.tile-warn::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--warn); }

.empty { color: var(--dim); margin: 6px 0; }

/* --- Hero (dashboard) --------------------------------------------------------------------- */

.hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 10px 28px;
    align-items: end;
    padding: 26px 28px 20px;
    border-radius: 18px;
    color: #f4f2ef;
    background:
        radial-gradient(700px 260px at 0% 0%, rgba(214, 48, 42, 0.45), transparent 60%),
        radial-gradient(500px 300px at 100% 120%, rgba(214, 48, 42, 0.18), transparent 60%),
        linear-gradient(135deg, #1c1b20, #0f0f11);
    box-shadow: 0 24px 50px -28px rgba(214, 48, 42, 0.55), var(--shadow);
    overflow: hidden;
}
.hero::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.hero .eyebrow { color: #bdb8b2; }
.hero-value { font-family: var(--display); font-size: 64px; font-weight: 700; line-height: 1; letter-spacing: -0.015em; margin: 6px 0 4px; }
.hero-value small { font-size: 24px; color: #bdb8b2; margin-left: 6px; }
.hero-delta { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); }
.hero-delta.up { color: #5fe0a2; }
.hero-delta.down { color: #ff8b82; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 16px; }
.hero-stat { display: flex; flex-direction: column; }
.hero-stat strong { font-family: var(--display); font-size: 26px; line-height: 1.1; }
.hero-stat span { color: #a8a39d; font-size: 12.5px; }
.hero-chart { align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; }
.hero .chart.spark .fill-top { stop-color: #ef4a42; stop-opacity: 0.55; }
.hero .chart.spark .fill-bottom { stop-color: #ef4a42; stop-opacity: 0; }
.hero .chart.spark .area-line { stroke: #ff7a72; }
.hero .chart.spark .dot { display: none; }
.hero .chart.spark .dot-last { fill: #fff; stroke: #ef4a42; }

.pulse { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #3ccb86; box-shadow: 0 0 0 0 rgba(60, 203, 134, 0.6); animation: pulse 1.8s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(60, 203, 134, 0.55); } 70% { box-shadow: 0 0 0 10px rgba(60, 203, 134, 0); } 100% { box-shadow: 0 0 0 0 rgba(60, 203, 134, 0); } }

/* --- Fleet ring --------------------------------------------------------------------------- */

.fleet { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 18px; align-items: center; }
svg.ring { width: 160px; height: 160px; }
.ring-track { fill: none; stroke: var(--line-2); }
.ring-part { fill: none; stroke-linecap: butt; }
.ring-ok { stroke: var(--ok); }
.ring-warn { stroke: var(--warn); }
.ring-off { stroke: var(--off); }
.ring-info { stroke: var(--info); }
.ring-bad { stroke: var(--bad); }
.ring-value { fill: var(--ink); font: 700 34px var(--display); }
.ring-label { fill: var(--dim); font: 600 11px var(--body); letter-spacing: 0.1em; text-transform: uppercase; }
.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.legend li { display: flex; align-items: center; gap: 10px; }
.legend a { color: var(--ink); }
.legend .swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.legend .count { margin-left: auto; font-family: var(--display); font-size: 20px; font-weight: 700; }
.sw-ok { background: var(--ok); } .sw-warn { background: var(--warn); } .sw-off { background: var(--off); }
.sw-info { background: var(--info); } .sw-bad { background: var(--bad); }

/* --- Tables ------------------------------------------------------------------------------- */

.table-wrap { overflow-x: auto; }
.table-wrap.panel { padding: 6px 8px; }
table { width: 100%; border-collapse: collapse; }
th {
    text-align: left;
    color: var(--dim);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
td { padding: 11px 12px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background 0.1s ease; }
tbody tr:hover td { background: var(--surface-2); }
.num { text-align: right; }
.row-bad td { background: var(--bad-soft); }
table.log td { font-size: 13.5px; }
table .ident { font-weight: 600; color: var(--ink); }
details summary { cursor: pointer; list-style: none; }
details summary::-webkit-details-marker { display: none; }

dl.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 18px; margin: 0; }
dl.facts dt { color: var(--dim); }
dl.facts dd { margin: 0; word-break: break-word; }

/* --- Pills and chips ---------------------------------------------------------------------- */

.pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 10px 2px 8px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-ok { color: var(--ok); background: var(--ok-soft); }
.pill-warn { color: var(--warn); background: var(--warn-soft); }
.pill-bad { color: var(--bad); background: var(--bad-soft); }
.pill-info { color: #fff; background: var(--info); }
.pill-info-soft { color: var(--info); background: var(--info-soft); }
.pill-off { color: var(--off); background: var(--off-soft); }
.pill-ghost { color: var(--dim); border-color: var(--line); }
.pill-ghost::before { display: none; }
.pill-brand { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.pill-brand::before { background: #fff; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
    padding: 6px 13px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-2);
    font-size: 14px;
    font-weight: 500;
}
.chip:hover { text-decoration: none; border-color: var(--dim); }
.chip.on { background: var(--ink); border-color: var(--ink); color: var(--bg); }

.tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--line); }
.tabs a { padding: 6px 14px; border-radius: 8px; color: var(--ink-2); font-weight: 500; }
.tabs a:hover { text-decoration: none; background: var(--surface); }
.tabs a.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

/* --- Forms and buttons -------------------------------------------------------------------- */

input, select, textarea {
    font: inherit;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 8px 11px;
    max-width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: 2px solid var(--accent-soft); outline-offset: 0; }
input[type="search"] { min-width: 0; width: 320px; }
input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--accent); }
textarea { width: 100%; resize: vertical; }

.filters { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.filters label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--dim); }

.form { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 14px; align-items: center; }
.form label { color: var(--dim); font-size: 13.5px; }
.form .full { grid-column: 1 / -1; }
.form .actions { grid-column: 2; }
.check { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font: 600 14px/1.2 var(--body);
    padding: 9px 15px;
    border-radius: 9px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
}
.btn:hover { text-decoration: none; border-color: var(--dim); }
.btn:active { transform: translateY(1px); }
.btn .ico { width: 16px; height: 16px; }
.btn-primary { background: linear-gradient(180deg, #e0392f, #c42b22); border-color: #b9271f; color: #fff; box-shadow: 0 6px 16px -8px rgba(214, 48, 42, 0.8); }
.btn-primary:hover { background: linear-gradient(180deg, #d6302a, #a8231d); border-color: #a8231d; }
.btn-danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
.btn-danger:hover { background: var(--bad-soft); border-color: var(--bad); }
.btn-quiet { background: transparent; }
.btn-small { padding: 6px 11px; font-size: 13px; }
.btn.busy { opacity: 0.6; cursor: progress; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.actions form { margin: 0; }
.inline { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }

.pager { display: flex; align-items: center; justify-content: center; gap: 14px; }

/* Control cards on a charger's page. */
.controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.control { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--surface-2); display: flex; flex-direction: column; gap: 10px; }
.control h3 { display: flex; align-items: center; gap: 8px; }
.control h3 .ico { color: var(--accent); }
.control p { margin: 0; color: var(--dim); font-size: 13px; }
.control form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.control input, .control select { padding: 6px 9px; }

details.more { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
details.more > summary { padding: 13px 16px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
details.more > summary::after { content: "+"; margin-left: auto; color: var(--dim); font-weight: 400; font-size: 18px; }
details.more[open] > summary::after { content: "−"; }
details.more > div { padding: 0 16px 16px; }

/* --- Charts ------------------------------------------------------------------------------- */

svg.chart { width: 100%; height: auto; display: block; overflow: visible; }
svg.chart .bar { fill: var(--accent); }
svg.chart .bar:hover { fill: var(--accent-2); }
svg.chart .grid { stroke: var(--line-2); stroke-width: 1; }
svg.chart .tick { fill: var(--dim); font: 500 11px var(--body); }
svg.chart .unit { font-weight: 600; }
svg.chart .fill-top { stop-color: var(--accent); stop-opacity: 0.28; }
svg.chart .fill-bottom { stop-color: var(--accent); stop-opacity: 0; }
svg.chart .area-line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; }
svg.chart .dot { fill: var(--surface); stroke: var(--accent); stroke-width: 2; }
svg.chart .dot-last { fill: var(--accent); stroke: var(--surface); stroke-width: 2.5; }

/* --- Map ---------------------------------------------------------------------------------- */

.map { height: 560px; border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; box-shadow: var(--shadow); background: var(--surface-2); }
.map-legend { display: flex; flex-wrap: wrap; gap: 14px; }
.map-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--dim); }
.map-legend i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); }
.leaflet-container { font: 14px var(--body); }

/* --- Tickets ------------------------------------------------------------------------------ */

.tickets { display: flex; flex-direction: column; gap: 16px; }
.ticket .remarks { margin: 0 0 12px; white-space: pre-wrap; font-size: 15.5px; }
.ticket-forms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.ticket-forms form { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.ticket-forms label { color: var(--dim); font-size: 13px; }

/* --- Sign-in pages ------------------------------------------------------------------------ */

body.bare {
    min-height: 100vh;
    background:
        radial-gradient(900px 500px at 10% -10%, rgba(214, 48, 42, 0.35), transparent 60%),
        radial-gradient(700px 500px at 110% 110%, rgba(214, 48, 42, 0.15), transparent 60%),
        #0c0c0e;
    color: #f4f2ef;
}
.gate { max-width: 440px; margin: 0 auto; padding: 72px 16px; display: flex; flex-direction: column; gap: 20px; }
.gate-brand { display: flex; align-items: center; gap: 13px; color: #f4f2ef; }
.gate-brand img { border-radius: 11px; box-shadow: 0 10px 26px -8px rgba(214, 48, 42, 0.8); }
.gate-brand strong { display: block; font-family: var(--display); font-size: 27px; line-height: 1.05; }
.gate-brand small { color: #9c9893; font-size: 13px; }
.gate-card {
    background: #ffffff;
    color: #17161a;
    border-radius: 18px;
    padding: 30px 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
    --ink: #17161a; --dim: #76706a; --line: #e7e2dc; --surface: #fff;
}
.gate-card h1 { font-size: 30px; }
.gate-card p { margin: 0; }
.gate-foot { color: #8d8984; font-size: 13px; text-align: center; margin: 0; }
.stack { display: flex; flex-direction: column; gap: 6px; }
.stack label { font-size: 13px; font-weight: 600; color: var(--dim); margin-top: 6px; }
.stack .btn { margin-top: 12px; padding: 12px 14px; }
input.code { font: 600 28px/1.2 var(--mono); letter-spacing: 0.32em; text-align: center; }

/* --- Showcase (promotional dashboard) ----------------------------------------------------- */

body.stage-body { background: #08080a; color: #f4f2ef; }
.stage {
    min-height: 100vh;
    padding: 34px 42px 40px;
    display: flex;
    flex-direction: column;
    gap: 26px;
    color: #f4f2ef;
    background:
        radial-gradient(1100px 600px at 0% -10%, rgba(214, 48, 42, 0.38), transparent 60%),
        radial-gradient(900px 600px at 110% 20%, rgba(214, 48, 42, 0.14), transparent 60%),
        radial-gradient(800px 500px at 50% 120%, rgba(60, 203, 134, 0.08), transparent 60%),
        #08080a;
    --ink: #f4f2ef; --dim: #a29d97; --line: rgba(255, 255, 255, 0.09); --line-2: rgba(255, 255, 255, 0.06);
    --surface: rgba(255, 255, 255, 0.04); --surface-2: rgba(255, 255, 255, 0.06);
    --accent: #ef4a42; --accent-2: #ff7a72;
}
.main > .stage { margin: -30px -36px -56px; border-radius: 0; }
.stage-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.stage-brand { display: flex; align-items: center; gap: 14px; }
.stage-brand img { border-radius: 12px; box-shadow: 0 10px 30px -8px rgba(214, 48, 42, 0.9); }
.stage-brand strong { display: block; font-family: var(--display); font-size: 30px; line-height: 1; }
.stage-brand small { color: #a29d97; letter-spacing: 0.14em; text-transform: uppercase; font-size: 12px; }
.stage-live { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); font-weight: 600; }
.stage-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; align-items: end; }
.stage-big { font-family: var(--display); font-weight: 700; font-size: clamp(64px, 9vw, 132px); line-height: 0.92; letter-spacing: -0.02em;
    background: linear-gradient(180deg, #ffffff, #ffb3ad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stage-big-unit { font-family: var(--display); font-size: clamp(22px, 2.4vw, 34px); color: #ff8b82; font-weight: 600; }
.stage-lede { font-size: 18px; color: #c9c4be; max-width: 52ch; margin: 10px 0 0; }
.stage-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.stat {
    position: relative; padding: 20px 20px 18px; border-radius: 18px; overflow: hidden;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(6px);
}
.stat .ico { width: 26px; height: 26px; color: #ff8b82; }
.stat-value { font-family: var(--display); font-size: clamp(32px, 3.4vw, 50px); font-weight: 700; line-height: 1.05; margin-top: 12px; }
.stat-value small { font-size: 0.45em; color: #a29d97; margin-left: 4px; font-weight: 600; }
.stat-label { color: #c9c4be; font-size: 14.5px; }
.stat.green .ico { color: #5fe0a2; }
.stat.green .stat-value { color: #aef0cf; }
.stage-panel { padding: 20px 22px; border-radius: 18px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.08); }
.stage-panel h2 { font-size: 20px; margin-bottom: 12px; color: #f4f2ef; }
.stage-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; }
.ticker { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ticker li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); }
.ticker .ico { color: #ff8b82; }
.ticker strong { font-family: var(--display); font-size: 20px; }
.ticker span { color: #a29d97; font-size: 13.5px; }
.stage-foot { color: #8d8984; font-size: 12.5px; max-width: 110ch; }
.stage .chart .tick { fill: #a29d97; }
.stage .chart .grid { stroke: rgba(255, 255, 255, 0.07); }
.stage .chart .dot { fill: #08080a; }
.stage .chart .dot-last { stroke: #08080a; }

/* --- Narrow screens and print ------------------------------------------------------------- */

@media (max-width: 1200px) {
    .stage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1020px) {
    .cols, .cols-wide, .stage-cols, .stage-hero, .hero, .ticket-forms { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 780px) {
    .shell { grid-template-columns: minmax(0, 1fr); }
    .side { position: static; height: auto; padding: 12px 16px; gap: 10px; }
    .nav { flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 4px; }
    .nav-group { display: none; }
    .nav a { white-space: nowrap; }
    .nav a.active::before { display: none; }
    .me { flex-direction: row; align-items: center; justify-content: space-between; padding-top: 8px; }
    .main { padding: 18px 16px 40px; }
    .main > .stage { margin: -18px -16px -40px; padding: 22px 16px; }
    h1 { font-size: 28px; }
    .hero { padding: 20px; }
    .hero-value { font-size: 46px; }
    input[type="search"] { width: 100%; }
    .cols-3, .stage-grid { grid-template-columns: minmax(0, 1fr); }
    .form { grid-template-columns: minmax(0, 1fr); }
    .form .actions { grid-column: 1; }
    .fleet { grid-template-columns: minmax(0, 1fr); justify-items: center; }
    .map { height: 420px; }
}

@media print {
    .side, .filters, .head-actions, .chips, .tabs, .toast, .no-print { display: none !important; }
    .shell { display: block; }
    .main { padding: 0; max-width: none; }
    body { background: #fff; color: #000; font-size: 12px; }
    .panel, .tile { box-shadow: none; border-color: #ccc; break-inside: avoid; }
    a { color: #000; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Map key, matching map.js. */
.m-online { background: #16865a; }
.m-charging { background: #2d6aad; }
.m-silent { background: #ad6408; }
.m-fault { background: #c42b22; }
.m-offline { background: #7d7771; }

/* --- Search as you type ------------------------------------------------------------------- */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.search { position: relative; display: flex; align-items: center; min-width: 0; }
.search .ico { position: absolute; left: 12px; width: 17px; height: 17px; color: var(--dim); pointer-events: none; transition: color 0.12s ease; }
.search input { padding-left: 38px; }
.search:focus-within .ico { color: var(--accent); }
form.searching .search .ico { animation: seek 0.9s ease-in-out infinite alternate; }
@keyframes seek { from { transform: translateX(-2px); } to { transform: translateX(2px); } }

.results { display: flex; flex-direction: column; gap: 20px; transition: opacity 0.15s ease; }
.results.loading { opacity: 0.5; }

/* --- People: avatars in lists ------------------------------------------------------------- */

.who { display: flex; align-items: center; gap: 11px; }
.avatar-sm { width: 32px; height: 32px; font-size: 12px; }
.avatar-lg { width: 60px; height: 60px; font: 700 22px/1 var(--display); letter-spacing: 0.02em; box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.55); }
.av-0 { background: linear-gradient(135deg, #ef4a42, #9c1e19); }
.av-1 { background: linear-gradient(135deg, #d98a1f, #8f4c07); }
.av-2 { background: linear-gradient(135deg, #25a26c, #0f5e3e); }
.av-3 { background: linear-gradient(135deg, #4b8fd8, #1f4f86); }
.av-4 { background: linear-gradient(135deg, #9271d6, #523690); }
.av-5 { background: linear-gradient(135deg, #7e7974, #3b3835); }

.row-tools { width: 1%; text-align: right; }
.row-edit {
    display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px;
    color: var(--dim); border: 1px solid transparent; transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.row-edit .ico { width: 16px; height: 16px; }
tbody tr:hover .row-edit, .row-edit:focus-visible { color: var(--accent-2); border-color: var(--line); background: var(--surface); }
.row-edit:hover { text-decoration: none; border-color: var(--accent); }

/* --- Account card: read, then edit in place ----------------------------------------------- */

.profile { transition: border-color 0.15s ease, box-shadow 0.15s ease; scroll-margin-top: 20px; }
.profile.editing { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-lift); }
.profile-form { display: flex; flex-direction: column; gap: 14px; margin: 0; }

.profile-head { display: flex; align-items: center; gap: 14px; }
.profile-id { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.profile-name { font-size: 25px; line-height: 1.1; overflow-wrap: anywhere; }
.profile-user { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; color: var(--dim); font-size: 13.5px; }
.profile-user .ico { width: 14px; height: 14px; }
.profile-edit { align-self: flex-start; }
.editing-chip { display: none; align-self: flex-start; }
.edit-only { display: none; }
.editing .profile-edit { display: none; }
.editing .editing-chip { display: inline-flex; }
.editing .edit-only { display: inline; font-size: 12.5px; }

.prows { display: flex; flex-direction: column; }
.prow {
    display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start;
    padding: 11px 10px; margin: 0 -10px; border-top: 1px solid var(--line-2); border-radius: 10px;
}
.prow-icon {
    width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
    background: var(--surface-2); color: var(--dim); border: 1px solid var(--line-2);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.prow-icon .ico { width: 17px; height: 17px; }
.prow-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.prow-label { color: var(--dim); font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.prow-view { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 26px; overflow-wrap: anywhere; }
.prow-edit { display: none; }
.editing .prow-view { display: none; }
.editing .prow-edit { display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }
.prow-edit input { width: 100%; }
.prow-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 8px; }
.prow-grid .span-all { grid-column: 1 / -1; }

.prow-was { display: none; margin: 0; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 12.5px; color: var(--dim); }
.prow-was s { color: var(--ink-2); text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; overflow-wrap: anywhere; }
.prow-undo { font: 600 12.5px var(--body); color: var(--accent-2); background: none; border: 0; padding: 0; cursor: pointer; }
.prow-undo:hover { text-decoration: underline; text-underline-offset: 3px; }
.prow.changed .prow-was { display: flex; }
.prow.changed .prow-icon { background: var(--accent); border-color: var(--accent); color: #fff; }
.prow.changed .prow-label { color: var(--accent-2); }
.prow.changed input { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }

.prow-error { margin: 0; color: var(--bad); font-size: 13px; font-weight: 600; }
.prow.has-error .prow-icon { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.prow.has-error input { border-color: var(--bad); }

.prow.saved { animation: saved 2.6s ease-out 1; }
.prow.saved .prow-icon { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
@keyframes saved { 0%, 35% { background: var(--ok-soft); } 100% { background: transparent; } }

.verified { display: inline-flex; align-items: center; gap: 3px; color: var(--ok); font-size: 12px; font-weight: 600; }
.verified .ico { width: 14px; height: 14px; stroke-width: 2.2; }
.unverified { color: var(--warn); font-size: 12px; font-weight: 600; }

.copy-btn {
    display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; border-radius: 7px;
    border: 1px solid transparent; background: none; color: var(--dim); cursor: pointer; opacity: 0;
    transition: opacity 0.12s ease, background 0.12s ease;
}
.copy-btn .ico { width: 15px; height: 15px; }
.copy-btn .i2 { display: none; }
.prow:hover .copy-btn, .copy-btn:focus-visible { opacity: 1; }
.copy-btn:hover { background: var(--surface-2); border-color: var(--line); color: var(--ink); }
.copy-btn.copied { opacity: 1; color: var(--ok); }
.copy-btn.copied .i1 { display: none; }
.copy-btn.copied .i2 { display: block; }
@media (hover: none) { .copy-btn { opacity: 1; } }

.profile-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; color: var(--dim); font-size: 13px; }

.savebar { display: none; }
.editing .savebar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px;
    padding: 13px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line);
}
.savebar-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 240px; }
.savebar-effects { margin: 0; padding-left: 18px; color: var(--dim); font-size: 13px; }
.savebar-effects:empty { display: none; }
.savebar-keys { margin: 2px 0 0; color: var(--dim); font-size: 12px; }
.savebar-keys kbd {
    font: 600 11px var(--mono); padding: 1px 5px; border: 1px solid var(--line); border-bottom-width: 2px;
    border-radius: 5px; background: var(--surface); color: var(--ink-2);
}
.savebar-actions { display: flex; gap: 8px; }

@media (max-width: 780px) {
    .search { width: 100%; }
    .prow-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .savebar-actions { width: 100%; }
    .savebar-actions .btn { flex: 1; }
}

/* --- What owners see in the app: schedules, statistics, vehicles, notifications, self-test --- */

details.more > form { padding: 0 16px 16px; }
.panel > details.more { margin-top: 14px; }
.row-muted td { opacity: 0.62; }
.row-actions { display: inline-flex; gap: 6px; justify-content: flex-end; }
.row-actions form { margin: 0; }

/* A charging window and its place in the day. */
.window { display: flex; flex-direction: column; gap: 5px; }
.window-time { font: 700 17px/1.1 var(--display); letter-spacing: 0.01em; }
svg.daytrack { width: 168px; max-width: 100%; height: 10px; display: block; }
.dt-track { fill: var(--surface-2); stroke: var(--line); stroke-width: 0.6; }
.dt-tick { stroke: var(--line); stroke-width: 1; }
.dt-on { fill: var(--accent); }
svg.daytrack.off .dt-on { fill: var(--off); }

.window-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
.window-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--dim); }
.window-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; width: 100%; }

/* Statistics: period tabs, the date stepper, the scope. */
.stats-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; }
.stepper { display: flex; align-items: center; gap: 8px; }
.step {
    display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
    border: 1px solid var(--line); background: var(--surface); color: var(--ink);
}
.step:hover { text-decoration: none; border-color: var(--dim); }
.step.off { opacity: 0.35; }
.step-label { font: 700 19px/1.1 var(--display); min-width: 12ch; text-align: center; }
.trend { font-weight: 700; }
.trend.up { color: var(--ok); }
.trend.down { color: var(--bad); }

/* Ranked bars (most common makes, notifications read): a progress element, so no inline style. */
.ranks { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ranks li { display: grid; grid-template-columns: minmax(90px, 160px) minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.rank-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-value { font-variant-numeric: tabular-nums; white-space: nowrap; }
progress.rank-bar {
    -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border: 0; border-radius: 999px;
    background: var(--surface-2); overflow: hidden; color: var(--accent);
}
progress.rank-bar::-webkit-progress-bar { background: var(--surface-2); border-radius: 999px; }
progress.rank-bar::-webkit-progress-value { background: linear-gradient(90deg, var(--accent-2), var(--accent)); border-radius: 999px; }
progress.rank-bar::-moz-progress-bar { background: linear-gradient(90deg, var(--accent-2), var(--accent)); border-radius: 999px; }
progress.small-bar { width: 70px; height: 7px; vertical-align: middle; margin-right: 6px; }

.vehicle-mark {
    width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none;
    background: var(--info-soft); color: var(--info);
}
.vehicle-mark .ico { width: 17px; height: 17px; }
ul.vehicles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
ul.vehicles li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-2); }
ul.vehicles li:first-child { border-top: 0; }
.vehicle-name { flex: 1; min-width: 0; }
ul.vehicles form { margin: 0; }

/* Notifications: the composer beside a phone showing what the owner will read. */
.composer { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; margin: 0; }
.composer-fields { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.audience { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.audience legend { padding: 0; margin-bottom: 8px; color: var(--dim); font-size: 13px; }
.choice { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; background: var(--surface); }
.choice:hover { border-color: var(--dim); }
.choice:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.choice input { margin-top: 3px; accent-color: var(--accent); }
.choice span { display: flex; flex-direction: column; gap: 2px; }
.choice small { color: var(--dim); font-size: 12.5px; }
.one-account { grid-column: 1 / -1; }
.one-account input { width: 260px; }
.field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--dim); }
.field input, .field textarea, .field select { color: var(--ink); font-size: 15px; }
.field-top { display: flex; justify-content: space-between; gap: 10px; }
.counter { font-variant-numeric: tabular-nums; }
.counter.near { color: var(--warn); }

.phone {
    position: sticky; top: 20px; border-radius: 38px; padding: 12px; background: #111113;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6), inset 0 0 0 2px #2a2a2f;
}
.phone-screen { border-radius: 28px; background: #f4f2ef; color: #17161a; min-height: 440px; padding: 12px 12px 18px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.phone-bar { display: flex; justify-content: space-between; align-items: center; font: 600 12px var(--body); padding: 2px 8px 4px; }
.phone-dots { width: 54px; height: 18px; border-radius: 999px; background: #111113; }
.phone-title { margin: 4px 6px 2px; font: 700 22px var(--display); }
.notice { position: relative; display: flex; gap: 10px; padding: 12px; border-radius: 16px; background: #fff; box-shadow: 0 6px 18px -12px rgba(0, 0, 0, 0.4); }
.notice.faded { opacity: 0.5; }
.notice-icon { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex: none; background: #fbeae8; color: #d6302a; }
.notice-icon .ico { width: 18px; height: 18px; }
.notice-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-right: 10px; }
.notice-text strong { font-size: 14px; overflow-wrap: anywhere; }
.notice-text p { margin: 0; font-size: 13px; color: #3b3834; overflow-wrap: anywhere; white-space: pre-line; }
.notice-text small { color: #76706a; font-size: 11.5px; }
.notice-dot { position: absolute; top: 12px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: #d6302a; }
.phone .k-firmware { display: none; }
.phone[data-kind-view="Firmware"] .k-info { display: none; }
.phone[data-kind-view="Firmware"] .k-firmware { display: block; }

/* Self-test and the current limit on a charger's page. */
.control-feature { background: linear-gradient(135deg, var(--accent-soft), var(--surface-2) 70%); border-color: color-mix(in srgb, var(--accent) 25%, var(--line)); }
.limit-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.limit-form input[type="range"] { flex: 1 1 140px; accent-color: var(--accent); padding: 0; border: 0; background: none; }
.limit-out { font: 700 20px var(--display); min-width: 3.4ch; text-align: right; }

.selftest-empty { display: flex; align-items: center; gap: 16px; }
.tile-icon.big { width: 52px; height: 52px; border-radius: 14px; flex: none; }
.tile-icon.big .ico { width: 26px; height: 26px; }
.selftest-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; margin-bottom: 8px; }
.selftest-head h2 { font-size: 24px; }
.selftest-head p { margin: 4px 0 8px; }
.score {
    width: 92px; height: 92px; border-radius: 50%; display: grid; place-content: center; text-align: center;
    border: 6px solid var(--line); background: var(--surface-2);
}
.score strong { font: 700 30px/1 var(--display); }
.score strong small { font-size: 16px; color: var(--dim); }
.score span { color: var(--dim); font-size: 12px; }
.score.good { border-color: var(--ok); }
.score.bad { border-color: var(--bad); }
.score.running { border-color: var(--info); border-right-color: var(--line); animation: spin 1.2s linear infinite; }
.score.running > * { animation: spin 1.2s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }

ol.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.check { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-2); }
.check-mark { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--dim); border: 1px solid var(--line); }
.check-mark .ico { width: 16px; height: 16px; stroke-width: 2.4; }
.check-passed .check-mark { background: var(--ok); border-color: var(--ok); color: #fff; }
.check-failed .check-mark { background: var(--bad); border-color: var(--bad); color: #fff; }
.check-running .check-mark { border-color: var(--info); }
.check-skipped { opacity: 0.6; }
.check-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--info); border-right-color: transparent; animation: spin 0.8s linear infinite; }
.check-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.check-body p { margin: 0; }
.check-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.check-detail { color: var(--ink-2); font-size: 13.5px; overflow-wrap: anywhere; }
.check-failed .check-detail { color: var(--bad); }
.stack { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.check-option { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.check-option span { display: flex; flex-direction: column; gap: 2px; }
.check-option small { color: var(--dim); font-size: 12.5px; }
.notes { margin: 14px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }

@media (max-width: 1020px) {
    .composer { grid-template-columns: minmax(0, 1fr); }
    .phone { position: static; max-width: 320px; }
}

@media (max-width: 780px) {
    .audience { grid-template-columns: minmax(0, 1fr); }
    .one-account input { width: 100%; }
    .ranks li { grid-template-columns: minmax(0, 1fr) auto; }
    .ranks .rank-bar { grid-column: 1 / -1; grid-row: 2; }
    .stats-bar, .stepper { width: 100%; }
    .step-label { flex: 1; min-width: 0; }
}