/* Plant Control – shared design system for every page.
   Tokens first, then base elements, then components. Page-specific styles live in panel.css or in
   css/pages/<page>.css (never in a template) and only use the tokens defined here. */
/* Dark design (default). The same values also apply inside .keep-dark in the light design: the dashboard schematic,
   the 3D satellite view and the camera stay dark "screens" there. */
:root, :root[data-theme="light"] .keep-dark {
    color-scheme: dark;
    /* surfaces */
    --bg-color: #050a0f;
    --bg-glow: #0d1b2a;
    --surface: #0b1219;
    --card-bg: rgba(20, 25, 30, 0.55);
    --inset-bg: rgba(0, 0, 0, 0.35);
    --glass-border: rgba(255, 255, 255, 0.08);
    --line-soft: rgba(255, 255, 255, 0.04);
    /* text */
    --text-main: #e0e0e0;
    --text-strong: #ffffff;
    --text-muted: #8b9bb4;
    /* accents and status – reserved meanings: green = OK / on, red = fault, yellow = warning, blue = water / info */
    --accent-green: #00e676;
    --accent-blue: #29b6f6;
    --danger: #ff1744;
    --warning: #ffea00;
    --orange: #ff9800;
    --purple: #ce93d8;
    /* fixed colour per plant (pot 1–6), the same on every page. Checked for colour-blind separation on the dark
       surface; none of them is a status colour. Always shown together with the plant's name. */
    --plant-1: #00a3b5;
    --plant-2: #dc7200;
    --plant-3: #9c6bff;
    --plant-4: #5f9a2a;
    --plant-5: #e83e8c;
    --plant-6: #5c8dff;
    /* type */
    --font-ui: system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas, 'Liberation Mono', monospace;
    /* shape */
    --radius: 12px;
    --radius-sm: 8px;
    --gap: 20px;
    --shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    --nav-h: 64px;
    /* raw colours for shades (rgb(var(--shade) / a)), raised surfaces and text on accent-coloured backgrounds */
    --shade: 0 0 0;
    --shade-k: 1;                  /* light design: shades are much fainter */
    --hi: 255 255 255;             /* light lines and hovers on dark ground */
    --surface-raised: rgba(12, 20, 28, 0.98);
    --on-accent: #000000;
    --chart-grid: rgba(255, 255, 255, 0.05);
    --theme-color: #050a0f;
}

/* Light design: chosen in the menu (static/js/prefs.js), or "automatic" when the device is set to light. Accents are
   darker than the neon of the dark design so text in these colours stays readable on white. */
:root[data-theme="light"] {
    color-scheme: light;
    --bg-color: #e8edf2;
    --bg-glow: #ffffff;
    --surface: #ffffff;
    --card-bg: rgba(255, 255, 255, 0.8);
    --inset-bg: rgba(20, 45, 75, 0.05);
    --glass-border: rgba(20, 45, 75, 0.14);
    --line-soft: rgba(20, 45, 75, 0.07);
    --text-main: #1f2a37;
    --text-strong: #0b1520;
    --text-muted: #56677c;
    --accent-green: #00845a;
    --accent-blue: #0277bd;
    --danger: #cc1037;
    --warning: #9a6700;
    --orange: #b85600;
    --purple: #8e44ad;
    --shadow: 0 8px 28px rgba(20, 45, 75, 0.12);
    --shade: 20 45 75;
    --shade-k: 0.2;
    --hi: 20 45 75;
    --surface-raised: rgba(255, 255, 255, 0.98);
    --on-accent: #ffffff;
    --chart-grid: rgba(20, 45, 75, 0.09);
    --theme-color: #e8edf2;
}
.keep-dark { color: var(--text-main); }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg-color); -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font-ui); color: var(--text-main); margin: 0; min-height: 100vh;
    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    background: radial-gradient(circle at 50% 0%, var(--bg-glow) 0%, var(--bg-color) 100%); background-attachment: fixed;
    -webkit-tap-highlight-color: transparent;
}
/* faint control-room grid behind everything */
body::before {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-image: linear-gradient(rgba(41, 182, 246, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(41, 182, 246, 0.035) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 75%);
}
a { color: var(--accent-blue); }
p, .muted { color: var(--text-muted); font-size: 13px; line-height: 1.55; }
small, .small { font-size: 12px; }
.mono { font-family: var(--font-mono); }
.good { color: var(--accent-green); } .bad { color: var(--danger); } .warn { color: var(--warning); } .info { color: var(--accent-blue); }
.strong { font-weight: bold; }
.hidden, .hidden-block { display: none !important; }
[hidden] { display: none !important; }
label { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }

/* ---------- layout ---------- */
.container { width: 100%; max-width: 1200px; margin: 0 auto; }
.container.narrow { max-width: 860px; }
.container.wide { max-width: 1320px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
@media (max-width: 900px) { .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- panels ---------- */
.glass-panel {
    background: var(--card-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border); border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 22px; margin-bottom: var(--gap); position: relative;
}
/* corner brackets: the control-room signature, very subtle */
.glass-panel::before, .glass-panel::after {
    content: ''; position: absolute; width: 14px; height: 14px; pointer-events: none; opacity: 0.55;
    border-color: var(--accent-blue); border-style: solid;
}
.glass-panel::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; border-top-left-radius: var(--radius); }
.glass-panel::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; border-bottom-right-radius: var(--radius); }
.glass-panel.plain::before, .glass-panel.plain::after { display: none; }
.scroll-x, .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.inset { background: var(--inset-bg); border: 1px solid var(--glass-border); border-radius: 10px; padding: 14px; }

/* section titles inside a panel */
h3, .panel-title {
    margin: 0 0 14px 0; padding-bottom: 10px; border-bottom: 1px solid var(--glass-border); text-align: left;
    color: var(--text-muted); font: 600 13px var(--font-mono); text-transform: uppercase; letter-spacing: 1.5px;
}
h3::before, .panel-title::before { content: '▍'; color: var(--accent-blue); margin-right: 4px; }
/* heading with tools on the right (time range, filter, buttons): <h3 class="bar"><span>Title</span>…tools…</h3> */
h3.bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
h3.bar::before { margin-right: -6px; }
h3.bar > span:first-child { margin-right: auto; }
h3.bar > .h-note { text-transform: none; letter-spacing: 0; font: 12px var(--font-ui); color: var(--text-muted); }
h4 { margin: 0 0 6px 0; color: var(--text-strong); font: 600 15px var(--font-ui); }

/* folding panels and side notes exist on phones only (common.js, phone.css) */
.fold-toggle, .more-phone > summary { display: none; }

/* ---------- page header (templates/_ui.html: page_header) ---------- */
.page-header {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px 20px;
    border-bottom: 2px solid var(--accent-blue); position: relative; z-index: 10;
}
.page-header .ph-title { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ph-kicker { font: 600 11px var(--font-mono); color: var(--accent-green); letter-spacing: 2.5px; text-transform: uppercase; opacity: 0.85; }
.ph-kicker::before { content: '◆ '; font-size: 9px; vertical-align: 1px; }
.page-header h1 {
    margin: 0; color: var(--text-strong); font: 700 22px var(--font-mono); text-transform: uppercase; letter-spacing: 2px;
    text-shadow: 0 0 18px rgba(41, 182, 246, 0.35); overflow-wrap: anywhere;
}
.ph-sub { color: var(--text-muted); font-size: 13px; }
.ph-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ---------- buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px;
    padding: 8px 16px; border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; white-space: nowrap;
    color: var(--text-strong); background: rgba(41, 182, 246, 0.16); border: 1px solid var(--accent-blue);
    font: 700 12px var(--font-mono); text-transform: uppercase; letter-spacing: 1px;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.btn:hover { background: var(--accent-blue); color: var(--on-accent); box-shadow: 0 0 14px rgba(41, 182, 246, 0.5); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-busy="true"] { opacity: 0.5; cursor: wait; box-shadow: none; }
.btn-green { background: rgba(0, 230, 118, 0.1); border-color: var(--accent-green); color: var(--accent-green); }
.btn-green:hover { background: var(--accent-green); color: var(--on-accent); box-shadow: 0 0 14px rgba(0, 230, 118, 0.5); }
.btn-red { background: rgba(255, 23, 68, 0.1); border-color: var(--danger); color: var(--danger); }
.btn-red:hover { background: var(--danger); color: #fff; box-shadow: 0 0 14px rgba(255, 23, 68, 0.5); }
.btn-orange { background: rgba(255, 152, 0, 0.1); border-color: var(--orange); color: var(--orange); }
.btn-orange:hover { background: var(--orange); color: var(--on-accent); box-shadow: 0 0 14px rgba(255, 152, 0, 0.5); }
.btn-gray { background: rgb(var(--hi) / 0.05); border-color: rgb(var(--hi) / 0.22); color: #cfd8dc; }
.btn-gray:hover { background: rgb(var(--hi) / 0.16); color: var(--text-strong); box-shadow: none; }
.btn.active, .btn-gray.active { background: var(--accent-blue); border-color: var(--accent-blue); color: var(--on-accent); }
.btn-small { min-height: 28px; padding: 4px 10px; font-size: 10.5px; }
.btn-block { width: 100%; }
.link-btn { background: none; border: 0; padding: 4px 0; cursor: pointer; color: var(--accent-blue); font: 600 11px var(--font-mono); letter-spacing: 0.5px; text-align: left; text-transform: uppercase; }
.link-btn:hover { text-decoration: underline; }
.link-btn.muted { color: var(--text-muted); }
/* segmented control (time ranges, plant tabs) */
.seg { display: inline-flex; border: 1px solid var(--glass-border); border-radius: var(--radius-sm); overflow: hidden; background: rgb(var(--shade) / calc(0.4 * var(--shade-k))); }
.seg > button { background: none; color: var(--text-muted); border: 0; padding: 7px 12px; font: 600 11px var(--font-mono); cursor: pointer; min-height: 32px; }
.seg > button + button { border-left: 1px solid var(--glass-border); }
.seg > button:hover { color: var(--text-strong); }
.seg > button.active { background: var(--accent-blue); color: var(--on-accent); }

/* ---------- forms ---------- */
input, select, textarea {
    background: rgb(var(--shade) / calc(0.5 * var(--shade-k))); color: var(--text-strong); border: 1px solid var(--glass-border); border-radius: 6px;
    padding: 9px 10px; font-size: 14px; font-family: inherit; min-height: 38px; max-width: 100%;
}
input[type="checkbox"], input[type="radio"] { min-height: 0; accent-color: var(--accent-green); width: 16px; height: 16px; vertical-align: -3px; }
input[type="range"] { accent-color: var(--accent-blue); padding: 0; background: none; border: 0; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(41, 182, 246, 0.18); }
textarea { width: 100%; min-height: 110px; resize: vertical; }
.field-label { display: block; font: 600 11px var(--font-mono); color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.form { display: flex; flex-direction: column; gap: 12px; max-width: 400px; }
.hint { font-size: 12px; color: var(--text-muted); }

/* ---------- tables ---------- */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; color: var(--text-muted); font: 600 11px var(--font-mono); text-transform: uppercase; letter-spacing: 1px; padding: 8px; border-bottom: 1px solid var(--glass-border); white-space: nowrap; }
td { padding: 9px 8px; border-bottom: 1px solid var(--line-soft); }
tbody tr:hover td { background: rgba(41, 182, 246, 0.04); }

/* ---------- figures ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.kpi { background: var(--inset-bg); border: 1px solid var(--glass-border); border-radius: 10px; padding: 12px 14px; position: relative; overflow: hidden; }
.kpi::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent-blue); opacity: 0.6; }
.kpi .v { font: 700 22px var(--font-mono); color: var(--text-strong); }
.kpi .l { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 12px; font: 700 11px var(--font-mono); border: 1px solid currentColor; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.5px; }
.pill.ok, .pill.on { color: var(--accent-green); }
.pill.too_little, .pill.too_much, .pill.error, .pill.off-bad { color: var(--danger); }
.pill.watch, .pill.warn { color: var(--warning); }
.pill.collecting, .pill.off { color: var(--text-muted); }
.chart-box { position: relative; height: 280px; }
.chart-tall { height: 380px; }
@media (max-width: 700px) { .chart-box { height: 230px; } .chart-tall { height: 290px; } }

/* plant identity: a dot or a left bar in the plant's fixed colour, next to the name in normal text colour */
[data-pot="1"] { --pc: var(--plant-1); } [data-pot="2"] { --pc: var(--plant-2); } [data-pot="3"] { --pc: var(--plant-3); }
[data-pot="4"] { --pc: var(--plant-4); } [data-pot="5"] { --pc: var(--plant-5); } [data-pot="6"] { --pc: var(--plant-6); }
.plant-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--pc, var(--text-muted)); box-shadow: 0 0 8px var(--pc, transparent); flex: 0 0 auto; vertical-align: 0; }
.plant-tag { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.plant-bar { border-left: 3px solid var(--pc, var(--glass-border)) !important; }

/* ---------- notes ---------- */
.note { margin-top: 14px; padding: 10px 14px; border: 1px solid var(--glass-border); border-left: 3px solid var(--accent-blue); border-radius: 0 8px 8px 0; background: rgb(var(--shade) / calc(0.25 * var(--shade-k))); font-size: 13px; color: var(--text-main); }
.note-warn { margin-top: 14px; padding: 10px 14px; border: 1px solid var(--warning); border-radius: 8px; background: rgba(255, 234, 0, 0.07); color: var(--warning); font-size: 13px; }
.muted-note { border-color: var(--glass-border); background: rgb(var(--shade) / calc(0.25 * var(--shade-k))); color: var(--text-muted); }
/* a status line that stays (e.g. "last saved"), not feedback – feedback goes into a toast */
.msg { font: 13px var(--font-mono); min-height: 1em; margin-top: 8px; color: var(--text-muted); }

/* ---------- modal + confirm dialog ---------- */
.modal-overlay {
    display: none; position: fixed; inset: 0; z-index: 210000; padding: 16px;
    background: rgb(var(--shade) / calc(0.8 * var(--shade-k))); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
    justify-content: center; align-items: center;
}
.modal-overlay.open { display: flex; }
.modal-box {
    background: var(--surface-raised); border: 1px solid var(--accent-blue); border-radius: 14px;
    padding: 26px; width: 100%; max-width: 440px; max-height: calc(100vh - 32px); overflow-y: auto;
    box-shadow: 0 0 40px rgba(41, 182, 246, 0.2);
}
.modal-box h2 { margin: 0 0 8px 0; color: var(--accent-blue); font: 700 17px var(--font-mono); text-transform: uppercase; letter-spacing: 1.5px; }
.modal-box.danger { border-color: var(--danger); box-shadow: 0 0 40px rgba(255, 23, 68, 0.2); }
.modal-box.danger h2 { color: var(--danger); }
.modal-box.warning { border-color: var(--warning); }
.modal-box.warning h2 { color: var(--warning); }
.modal-text { color: var(--text-main); font-size: 14px; line-height: 1.55; white-space: pre-wrap; margin: 0 0 20px 0; }
.modal-inputs { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
@media (max-width: 520px) { .modal-actions .btn { flex: 1 1 0; } }

/* ---------- toasts: the one place for success / error feedback (common.js: toast()) ---------- */
.toast-region {
    position: fixed; z-index: 220000; left: 50%; transform: translateX(-50%);
    bottom: max(20px, env(safe-area-inset-bottom)); width: min(460px, calc(100vw - 24px));
    display: flex; flex-direction: column-reverse; gap: 8px; pointer-events: none;
}
.toast {
    pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px;
    background: var(--surface-raised); border: 1px solid var(--glass-border); border-left: 3px solid var(--accent-blue);
    border-radius: 10px; box-shadow: 0 12px 34px rgb(var(--shade) / calc(0.65 * var(--shade-k))); color: var(--text-main); font-size: 14px; line-height: 1.4;
    animation: toast-in 0.18s ease-out;
}
.toast.leaving { animation: toast-out 0.2s ease-in forwards; }
.toast-icon { font: 700 14px var(--font-mono); flex: 0 0 auto; width: 18px; text-align: center; color: var(--accent-blue); }
.toast-text { flex: 1 1 auto; overflow-wrap: anywhere; }
.toast-close { background: none; border: 0; color: var(--text-muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px; }
.toast.success { border-left-color: var(--accent-green); } .toast.success .toast-icon { color: var(--accent-green); }
.toast.error { border-left-color: var(--danger); } .toast.error .toast-icon { color: var(--danger); }
.toast.warning { border-left-color: var(--warning); } .toast.warning .toast-icon { color: var(--warning); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(10px); } }

/* ---------- phones ---------- */
@media (max-width: 700px) {
    :root { --gap: 14px; }
    body { padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); padding-top: max(10px, env(safe-area-inset-top)); }
    .glass-panel { padding: 16px 14px; border-radius: 10px; }
    .page-header h1 { font-size: 18px; letter-spacing: 1.5px; }
    .ph-actions { width: 100%; }
    .btn { min-height: 42px; }
    .btn-small { min-height: 34px; }
    input, select, textarea { font-size: 16px; min-height: 42px; } /* 16px: no auto-zoom on iOS */
    input[type="checkbox"], input[type="radio"] { min-height: 0; }
    .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .kpi .v { font-size: 18px; }
    table { font-size: 12.5px; }
    /* wide tables scroll inside their panel instead of widening the page */
    .table-scroll { margin: 0 -14px; padding: 0 14px; }
}

/* ---------- messages from administrators (common.js) ---------- */
.sysmsgs { position: fixed; right: 16px; bottom: 16px; z-index: 200000; display: flex; flex-direction: column; gap: 10px; max-width: min(420px, calc(100vw - 32px)); }
.sysmsg { background: var(--surface-raised); border: 1px solid var(--accent-blue); border-radius: 10px; padding: 14px 16px; box-shadow: 0 10px 30px rgb(var(--shade) / calc(0.6 * var(--shade-k))); }
.sysmsg-head { font: 12px var(--font-mono); color: var(--accent-blue); margin-bottom: 6px; }
.sysmsg-text { font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 40vh; overflow-y: auto; margin-bottom: 10px; }

/* ---------- maintenance banner (templates/_maintenance.html) ---------- */
.maint-banner {
    background: repeating-linear-gradient(45deg, #ffd600, #ffd600 18px, #ffea00 18px, #ffea00 36px); color: #000;
    padding: 12px 16px; font-family: var(--font-mono); text-align: center; box-shadow: 0 4px 20px rgb(var(--shade) / calc(0.6 * var(--shade-k)));
    border-radius: var(--radius-sm); margin: 0 auto 14px auto; width: 100%; max-width: 1200px; position: relative; z-index: 5;
}
.maint-banner b { display: block; font-weight: 900; font-size: 15px; letter-spacing: 2px; }
.maint-banner .maint-text { font-size: 14px; margin-top: 4px; font-weight: 700; }
.maint-banner .maint-meta { font-size: 12px; margin-top: 4px; }

/* Traps on the login page (website/intrusion.py): off screen instead of display:none, so bots still see them */
.hp-field { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Picture check (static/js/captcha.js): white like the well-known checks, whatever the theme of the page */
.captcha { margin: 8px 0; width: 100%; }
.cap-anchor { display: flex; align-items: center; gap: 12px; width: 300px; max-width: 100%; box-sizing: border-box; padding: 12px 10px 12px 12px;
              background: #f9f9f9; border: 1px solid #d3d3d3; border-radius: 3px; box-shadow: 0 0 4px 1px rgba(0, 0, 0, .08); color: #222;
              font: 14px Roboto, Helvetica, Arial, sans-serif; }
.cap-check { position: relative; flex: none; width: 28px; height: 28px; padding: 0; border: 2px solid #c1c1c1; border-radius: 2px;
             background: #fff; cursor: pointer; }
.cap-check:hover { border-color: #b2b2b2; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1); }
.cap-check.spin { border: 4px solid #4a90e2; border-top-color: transparent; border-radius: 50%; animation: cap-rot 0.8s linear infinite; }
.cap-check.done { border-color: transparent; background: none; cursor: default; }
.cap-check.done::after { content: "✓"; position: absolute; inset: -4px 0 0 0; color: #0f9d58; font: bold 30px Arial, sans-serif; text-align: center; }
.cap-label { flex: 1; cursor: pointer; user-select: none; }
.cap-brand { display: flex; flex-direction: column; align-items: center; color: #555; line-height: 1.2; text-align: center; }
.cap-logo { font-size: 22px; }
.cap-brand-name { font: 600 10px Roboto, Arial, sans-serif; }
.cap-brand-note { font: 8px Roboto, Arial, sans-serif; color: #888; }
.cap-anchor-msg { font: 12px Roboto, Arial, sans-serif; color: #d93025; margin-top: 4px; min-height: 0; }
@keyframes cap-rot { to { transform: rotate(360deg); } }

.cap-overlay { position: fixed; inset: 0; z-index: 215000; background: rgba(0, 0, 0, .35); display: flex; align-items: center; justify-content: center; padding: 10px; }
.cap-window { background: #fff; color: #222; border: 1px solid #ccc; border-radius: 2px; box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
              width: 344px; max-width: 100%; font: 14px Roboto, Helvetica, Arial, sans-serif; padding: 8px; box-sizing: border-box; }
.cap-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #1a73e8; color: #fff; padding: 16px 14px; min-height: 60px; }
.cap-header-text { display: flex; flex-direction: column; gap: 2px; }
.cap-header-small { font-size: 14px; }
.cap-header-big { font-size: 22px; font-weight: bold; line-height: 1.2; }
.cap-header-img { width: 84px; height: 84px; object-fit: cover; flex: none; border: 2px solid #fff; }
.cap-body { padding: 8px 0 0; display: flex; justify-content: center; }
.cap-loading { padding: 50px 10px; text-align: center; color: #555; }
.cap-spinner { width: 40px; height: 40px; margin: 30px auto; border: 4px solid #4a90e2; border-top-color: transparent; border-radius: 50%; animation: cap-rot 0.8s linear infinite; }
.cap-error { color: #d93025; font-size: 13px; min-height: 18px; padding: 6px 4px 0; }
.cap-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #dfdfdf; margin-top: 6px; padding-top: 8px; }
.cap-icons { display: flex; gap: 4px; }
.cap-icon { width: 36px; height: 36px; border: 0; background: none; color: #555; font-size: 20px; cursor: pointer; border-radius: 50%; }
.cap-icon:hover { background: #f1f1f1; }
.cap-verify { background: #1a73e8; color: #fff; border: 0; border-radius: 2px; padding: 0 22px; height: 40px; font: 600 14px Roboto, Arial, sans-serif;
              text-transform: uppercase; cursor: pointer; }
.cap-verify:hover { background: #1765cc; }
.cap-verify:disabled { background: #8ab4f8; cursor: default; }

.cap-slide { display: flex; flex-direction: column; gap: 10px; }
.cap-stage { position: relative; overflow: hidden; touch-action: none; user-select: none; }
.cap-stage > img:first-child { display: block; width: 100%; height: 100%; }
.cap-piece { position: absolute; left: 0; cursor: grab; filter: drop-shadow(0 0 3px rgba(0, 0, 0, .8)); touch-action: none; }
.cap-track { position: relative; height: 40px; background: #f7f9fa; border: 1px solid #e4e7eb; border-radius: 2px; touch-action: none; overflow: hidden; }
.cap-track-fill { position: absolute; left: 0; top: 0; bottom: 0; background: #d1e9fe; border-right: 1px solid #1991fa; }
.cap-track-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #45494c; font-size: 13px; pointer-events: none; transition: opacity .2s; }
.cap-knob { position: absolute; top: 0; left: 0; width: 40px; height: 38px; background: #fff; box-shadow: 0 0 3px rgba(0, 0, 0, .3); color: #1a73e8;
            display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: grab; user-select: none; touch-action: none; }
.cap-knob:hover, .cap-knob:focus { background: #1991fa; color: #fff; outline: none; }

.cap-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; width: 100%; }
.cap-tile { position: relative; padding: 0; border: 0; background: #fff; cursor: pointer; line-height: 0; }
.cap-tile img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .12s; }
.cap-tile.chosen img { transform: scale(0.85); }
.cap-tile-tick { display: none; position: absolute; left: 4px; top: 4px; width: 24px; height: 24px; border-radius: 50%; background: #1a73e8; color: #fff;
                 font: bold 15px/24px Arial, sans-serif; text-align: center; }
.cap-tile.chosen .cap-tile-tick { display: block; }
.captcha-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.captcha-item { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.captcha-item img { width: 120px; height: 80px; object-fit: cover; border-radius: 6px; }

/* Password strength under new-password fields (static/js/pwstrength.js) */
.pw-strength { margin: 2px 0 4px; font: 12px var(--font-mono); }
.pw-strength-bar { height: 5px; border-radius: 3px; background: rgba(128, 128, 128, 0.25); overflow: hidden; }
.pw-strength-bar span { display: block; height: 100%; width: 0; border-radius: 3px; transition: width 0.2s, background 0.2s; }
.pw-strength-text { margin-top: 4px; }
.pw-strength.s0 span, .pw-strength.s1 span { background: var(--danger); }
.pw-strength.s0 .pw-strength-text, .pw-strength.s1 .pw-strength-text { color: var(--danger); }
.pw-strength.s2 span { background: var(--warning); }
.pw-strength.s2 .pw-strength-text { color: var(--warning); }
.pw-strength.s3 span, .pw-strength.s4 span { background: var(--accent-green); }
.pw-strength.s3 .pw-strength-text, .pw-strength.s4 .pw-strength-text { color: var(--accent-green); }