/* ============================================================
   Consilium — "Console" design system · LIGHT
   Off-white canvas, white cards, ink text; electric-violet accent
   with functional phase colors (violet · cyan · emerald).
   Inter (UI/display) · IBM Plex Mono (data).
   Class & CSS-variable names are preserved so all templates inherit.
   ============================================================ */
/* Fonts are self-hosted (PDPL posture + first-paint): see /static/fonts/. Inter is a variable woff2 covering 400-700. */
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/ibmplexmono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/ibmplexmono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/ibmplexmono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/ibmplexmono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/ibmplexmono-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/ibmplexmono-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/inter-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/inter-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 450;
  font-display: swap;
  src: url('/static/fonts/inter-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 450;
  font-display: swap;
  src: url('/static/fonts/inter-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/inter-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/inter-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/inter-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/inter-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/inter-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/inter-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Newsreader — editorial serif for the "voice of the council" (hero, stage titles, final verdict).
   Self-hosted (PDPL: no third-party font CDN). One variable woff2 per subset covers weights 400–600. */
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/static/fonts/newsreader-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/static/fonts/newsreader-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;   /* declare light-only so mobile browsers don't auto-invert to dark */
  /* surfaces — light */
  --ink:      #f5f6f9;   /* app canvas (off-white) */
  --ink-2:    #ffffff;   /* cards / panels */
  --ink-3:    #eef0f5;   /* raised controls / subtle fills */
  --line:     #e5e8ef;   /* hairline borders */
  --line-2:   #d3d8e2;   /* stronger borders */
  /* text */
  --text:     #16181f;   /* ink */
  --dim:      #545b6a;   /* secondary */
  --dimmer:   #666e7e;   /* faint */
  /* accents — violet primary; readable-on-light foregrounds via *-2 */
  --accent:   #6a5af0;   /* PRIMARY accent (violet) */
  --accent-2: #5340d6;   /* deep violet — accent TEXT on light */
  --amber:    var(--accent);     /* DEPRECATED alias (was misnamed) — remove after one release */
  --amber-2:  var(--accent-2);   /* DEPRECATED alias — remove after one release */
  --green:    #1aa35c;   /* success / Stage 3 verdict */
  --green-2:  #0c7647;   /* deep green — success TEXT (WCAG: 4.5:1+ on white + on the Phase-3 tint) */
  --red:      #dc2626;   /* alerts */
  --red-2:    #b91c1c;   /* deep red — alert TEXT */
  --purple:   #7c3aed;
  --blue:     #2563eb;
  --cyan:     #0e9bb8;   /* Stage 2 base */
  --cyan-2:   #0b6b7d;   /* deep cyan — Stage 2 TEXT (WCAG: 4.5:1+ on white + on the Phase-2 tint) */
  --caution:  #d98a0b;   /* Stage 4 amber base (matches the rgba(217,138,11) tint) */
  --caution-2:#a54a06;   /* deep amber — Stage 4 TEXT (WCAG: 5.0:1 on white + on the Phase-4 tint) */
  /* type roles */
  --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif:   'Newsreader', Georgia, 'Times New Roman', serif;   /* editorial voice: hero, stage titles, final verdict */
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --radius: 12px;
  --shadow: 0 10px 34px rgba(24,27,38,.09), 0 2px 8px rgba(24,27,38,.05);
  --ink-on-brass: #ffffff;   /* text on accent buttons */
  --glass:    rgba(255,255,255,.82);   /* sticky top bar */
  --field-bg: #ffffff;                 /* inputs */
  --hover:    rgba(106,90,240,.07);     /* subtle hover / row highlight */
  /* Consilium brand mark — "converge": the panel's independent voices resolving to one verdict.
     A masked SVG so it inherits --accent and flips with the theme (no per-theme copy needed). */
  --cmark-svg: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2032%2032%27%3E%3Cpath%20d%3D%27M6%2011%2016%2024.5M11%208%2016%2024.5M16%206.8V24.5M21%208%2016%2024.5M26%2011%2016%2024.5%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20opacity%3D%27.4%27%2F%3E%3Cg%20fill%3D%27%23000%27%3E%3Ccircle%20cx%3D%276%27%20cy%3D%2711%27%20r%3D%272%27%2F%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%278%27%20r%3D%272%27%2F%3E%3Ccircle%20cx%3D%2716%27%20cy%3D%276.8%27%20r%3D%272%27%2F%3E%3Ccircle%20cx%3D%2721%27%20cy%3D%278%27%20r%3D%272%27%2F%3E%3Ccircle%20cx%3D%2726%27%20cy%3D%2711%27%20r%3D%272%27%2F%3E%3Ccircle%20cx%3D%2716%27%20cy%3D%2724.5%27%20r%3D%273.4%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

/* ---- DARK THEME (opt-in via <html data-theme="dark">) ---- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink:#0b0c10; --ink-2:#14161c; --ink-3:#1b1e26; --line:#23262f; --line-2:#333844;
  --text:#e8eaef; --dim:#9aa1ae; --dimmer:#7d8494;
  --accent:#7c6cf6; --accent-2:#9a8bff; --green:#34c98a; --green-2:#57d6a0;
  --red:#f0616d; --red-2:#f5949c; --purple:#a78bfa; --blue:#6e8fd1; --cyan:#35c1d6; --cyan-2:#7fdcea;
  --caution:#eab35f; --caution-2:#e0a13c;   /* Stage 4 amber, dark — WCAG 6.5:1 on the Phase-4 tint (light amber, not the light-mode #b45309) */
  --shadow:0 16px 44px rgba(0,0,0,.55);
  --glass:rgba(18,20,26,.82); --field-bg:#0f1117; --hover:rgba(124,108,246,.10);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background:
    radial-gradient(1000px 560px at 84% -12%, rgba(124,108,246,.09) 0%, rgba(124,108,246,0) 58%),
    radial-gradient(760px 520px at 2% 108%, rgba(53,193,214,.07) 0%, rgba(53,193,214,0) 55%),
    var(--ink);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px; line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.14;
}
a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ---- top bar ---- */
.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 22px;
  background: var(--glass);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.brand { display: flex; align-items: center; gap: 11px; font-family: var(--font-display);
  font-weight: 600; font-size: 19px; letter-spacing: -0.015em; }
/* Brand mark: masked SVG tinted by --amber (theme-aware). Reusable .cmark for other sizes (hero). */
.cmark { display: inline-block; flex: none; width: var(--cmark-size, 24px); height: var(--cmark-size, 24px);
  background: var(--accent);
  -webkit-mask: var(--cmark-svg) center / contain no-repeat; mask: var(--cmark-svg) center / contain no-repeat; }
.brand::before { content: ""; flex: none; width: 22px; height: 22px; margin-right: -3px;
  background: var(--accent);
  -webkit-mask: var(--cmark-svg) center / contain no-repeat; mask: var(--cmark-svg) center / contain no-repeat; }
.brand .badge {
  font-family: var(--font-mono); background: transparent; color: var(--accent-2);
  font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 3px;
  letter-spacing: 2px; text-transform: uppercase; border: 1px solid rgba(106,90,240,.4); }
.topbar .spacer { flex: 1; }

/* ---- inline SVG icon set (Wave 3 · P1-1) ----
   Stroke glyphs on a 24-grid, currentColor, sprite pasted per template (no build step).
   Usage: <svg class="ic" aria-hidden="true"><use href="#i-gear"/></svg> */
.ic { width: 1em; height: 1em; flex: 0 0 auto; fill: none; stroke: currentColor;
      stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
      vertical-align: -.13em; overflow: visible; }
.ic-lg { width: 19px; height: 19px; }   /* composer buttons */

/* ---- buttons ---- */
.btn {
  background: var(--ink-2); border: 1px solid var(--line-2); color: var(--text);
  padding: 9px 15px; border-radius: 9px; font-size: 13.5px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 7px;
  transition: border-color .16s, background .16s, transform .06s, box-shadow .16s;
  box-shadow: 0 1px 2px rgba(24,27,38,.04);
}
.btn:hover { border-color: var(--accent); background: var(--hover); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.amber {
  background: linear-gradient(180deg, #7b6cf6, var(--accent));
  color: #fff; border: 1px solid #6a5af0; font-weight: 600;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 6px 18px rgba(106,90,240,.28);
}
.btn.amber:hover { filter: brightness(1.05); border-color: #6a5af0; }
.btn.ghost { background: transparent; border-color: var(--line-2); box-shadow: none; }
.btn.ghost:hover { border-color: var(--accent); background: rgba(106,90,240,.05); }
.btn.danger { color: var(--red-2); border-color: rgba(220,38,38,.35); background: var(--ink-2); }
.btn.danger:hover { background: rgba(220,38,38,.07); border-color: rgba(220,38,38,.5); }
.btn.sm { padding: 7px 11px; font-size: 12.5px; border-radius: 8px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dimmer); flex-shrink: 0; }
.status-dot.ok { background: var(--green); box-shadow: 0 0 7px rgba(26,163,92,.5); }
.status-dot.bad { background: var(--red); box-shadow: 0 0 7px rgba(220,38,38,.5); }

/* ---- layout ---- */
.wrap { max-width: 1080px; margin: 0 auto; padding: 30px 22px 64px; }
.narrow { max-width: 440px; }
.card {
  background: var(--ink-2);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card-pad { padding: 28px; }
.muted { color: var(--dimmer); }
.dim { color: var(--dim); }
.center { text-align: center; }
.row { display: flex; gap: 10px; }
.row.wrap-row { flex-wrap: wrap; }
.grow { flex: 1; }
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}
.mb4{margin-bottom:4px}.mb8{margin-bottom:8px}.mb16{margin-bottom:16px}.mb24{margin-bottom:24px}

/* ---- forms ---- */
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 7px;
  text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
.field .hint { font-size: 12.5px; color: var(--dimmer); margin-bottom: 8px; text-transform: none; letter-spacing: 0; }
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  width: 100%; background: var(--field-bg); border: 1px solid var(--line-2); color: var(--text);
  border-radius: 9px; padding: 11px 13px; font-size: 14.5px; font-family: inherit; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(106,90,240,.15); }
input::placeholder, textarea::placeholder { color: var(--dimmer); }
label.inline { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }

/* ---- notes / alerts ---- */
.note { font-size: 13px; padding: 11px 14px; border-radius: 9px; margin-top: 10px; line-height: 1.5; }
.note.warn { background: rgba(106,90,240,.09); border: 1px solid rgba(106,90,240,.32); color: var(--accent-2); }
.note.err  { background: rgba(220,38,38,.08); border: 1px solid rgba(220,38,38,.3); color: var(--red-2); }
.note.ok   { background: rgba(26,163,92,.1); border: 1px solid rgba(26,163,92,.34); color: var(--green-2); }
.note.info { background: rgba(37,99,235,.08); border: 1px solid rgba(37,99,235,.28); color: var(--blue); }
.inline-err { color: var(--red-2); font-size: 13px; }

/* ---- pills / chips ---- */
.pill { display: inline-block; font-size: 11.5px; padding: 3px 10px; border-radius: 20px;
  background: var(--ink-3); border: 1px solid var(--line-2); color: var(--dim);
  font-family: var(--font-mono); letter-spacing: .02em; }
.pill.green { color: var(--green-2); border-color: rgba(26,163,92,.34); background: rgba(26,163,92,.1); }
.pill.red { color: var(--red-2); border-color: rgba(220,38,38,.32); background: rgba(220,38,38,.08); }
.pill.amber { color: var(--accent-2); border-color: rgba(106,90,240,.34); background: rgba(106,90,240,.1); }
.chip { background: var(--ink-3); border: 1px solid var(--line-2); border-radius: 18px;
  padding: 5px 9px 5px 12px; font-size: 12.5px; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); }
.chip button { background: none; border: none; color: var(--dimmer); font-size: 15px; line-height: 1; padding: 0; }
.chip button:hover { color: var(--red); }

/* ---- tables ---- */
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th, table.data td { padding: 11px 13px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
table.data th { color: var(--dimmer); font-size: 11px; text-transform: uppercase; letter-spacing: .09em; font-weight: 600; }
table.data tr:hover td { background: var(--hover); }
.mono { font-family: var(--font-mono); font-size: 12.5px; }

/* ---- spinner ---- */
.spin { width: 15px; height: 15px; border: 2px solid var(--line-2); border-top-color: var(--accent);
  border-radius: 50%; animation: rot .7s linear infinite; display: inline-block; flex-shrink: 0; }
@keyframes rot { to { transform: rotate(360deg); } }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 6px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--dimmer); background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ---- modal ---- */
.modal-bg { position: fixed; inset: 0; background: rgba(24,27,38,.42); z-index: 50;
  display: none; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(3px); }
.modal-bg.show { display: flex; }
.modal { background: var(--ink-2); border: 1px solid var(--line-2); border-radius: 16px;
  box-shadow: 0 24px 70px rgba(24,27,38,.22); width: 100%; max-width: 620px;
  max-height: 88vh; max-height: 88dvh; overflow-y: auto; }
.modal-head { padding: 18px 22px; border-bottom: 1px solid var(--line); display: flex; align-items: center; }
.modal-head h2 { margin: 0; font-size: 18px; }
.modal-head .x { margin-left: auto; background: none; border: none; color: var(--dimmer); font-size: 24px; line-height: 1; }
.modal-head .x:hover { color: var(--text); }
.modal-body { padding: 22px; }

/* ============================================================
   Responsive / mobile
   ============================================================ */
@media (max-width: 760px) {
  body { font-size: 15px; }
  input[type=text], input[type=email], input[type=password], input[type=number],
  select, textarea { font-size: 16px; }
  .topbar { padding: 11px 14px; gap: 8px; flex-wrap: wrap; }
  .brand { font-size: 16px; }
  .btn { padding: 8px 12px; }
  .btn.sm { padding: 7px 10px; }
  .wrap { padding: 20px 14px 52px; }
  .card-pad { padding: 19px 15px; }
  .modal-bg { padding: 8px; align-items: flex-start; }
  .modal { max-width: 100%; max-height: 94vh; max-height: 94dvh; margin-top: 6px; }
  /* extra bottom padding so the last controls clear the mobile browser/nav bar */
  .modal-body { padding: 16px 16px calc(22px + env(safe-area-inset-bottom)); }
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.data { min-width: 620px; }
}
@media (max-width: 460px) {
  .btn span.label-lg { display: none; }
  .modal-head h2 { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ============================================================
   Arabic interface / RTL (i18n.js sets html[lang] + [dir])
   English markup is the fallback; these rules keep the shared
   chrome mirror-correct when the Arabic interface is active.
   ============================================================ */
[dir=rtl] .brand::before { margin-right: 0; margin-left: -3px; }
[dir=rtl] table.data th, [dir=rtl] table.data td { text-align: right; }
[dir=rtl] .modal-head .x { margin-left: 0; margin-right: auto; }
/* Arabic script: keep Latin webfonts for Latin runs, give Arabic runs a proper
   naskh fallback, and never letter-space joined script. */
html[lang=ar] { --font-serif: 'Newsreader', 'Noto Naskh Arabic', Georgia, 'Times New Roman', serif; }
/* Elements carrying Arabic (data-ar swapped in): monospace fallbacks render Arabic
   with broken joining, so give them the body font and drop tracking entirely. */
html[lang=ar] [data-ar], html[lang=ar] [data-ar-html],
html[lang=ar] [data-ar] *, html[lang=ar] [data-ar-html] * {
  letter-spacing: 0 !important; font-family: var(--font-body);
}
html[lang=ar] .field label { letter-spacing: 0; }