/* herbanatura.hu operator UI: calm, readable, light + dark. Static CSS only. */

/* Inter (SIL OFL 1.1, see fonts/OFL.txt), variable weight, latin + latin-ext (ő, ű). */
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-wght.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;
}

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-ext-wght.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;
}

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

:root {
  color-scheme: light dark;

  --font-sans: "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --fs-xs: 0.75rem;      /* 12 */
  --fs-sm: 0.8125rem;    /* 13 */
  --fs-base: 0.875rem;   /* 14 */
  --fs-md: 0.9375rem;    /* 15 */
  --fs-lg: 1.0625rem;    /* 17 */
  --fs-xl: 1.375rem;     /* 22 */
  --fs-2xl: 1.625rem;    /* 26 */
  --fs-3xl: 1.875rem;    /* 30 */

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;

  --sidebar-w: 248px;
  --content-max: 1320px;
  --control-h: 40px;

  --bg: #f4f6f3;
  --surface: #ffffff;
  --surface-2: #f7f8f6;
  --surface-hover: #f0f3ef;
  --surface-raised: #ffffff;
  --border: #e2e6e0;
  --border-strong: #cdd3cb;
  --border-hover: #aeb6ad;
  --text: #18201b;
  --text-muted: #58615b;
  --text-subtle: #687069;

  --accent: #2d6a44;
  --accent-hover: #245638;
  --accent-soft: #e5f0e8;
  --accent-soft-text: #1d4d30;
  --accent-ring: rgba(45, 106, 68, 0.28);
  --on-accent: #ffffff;
  --link: #2a6a42;
  --focus: #2d6a44;
  --danger: #b42318;
  --danger-hover: #9a1d14;
  --danger-ring: rgba(180, 35, 24, 0.22);

  --green-bg: #e2f2e6;   --green-fg: #1b5a31;
  --teal-bg: #dcf1ee;    --teal-fg: #0e5a54;
  --blue-bg: #e4edfa;    --blue-fg: #1e4f8e;   --blue-border: #c6d8f3;
  --violet-bg: #eee7fa;  --violet-fg: #5a3494;
  --amber-bg: #fcf0d4;   --amber-fg: #714603;  --amber-border: #f0d9a0;  --amber-solid: #d08a0c;
  --red-bg: #fce8e6;     --red-fg: #a3241c;    --red-border: #f3c4bf;
  --neutral-bg: #eceee9; --neutral-fg: #4a524c;

  --shadow-xs: 0 1px 2px rgba(20, 30, 24, 0.05);
  --shadow-sm: 0 1px 3px rgba(20, 30, 24, 0.08), 0 1px 2px rgba(20, 30, 24, 0.04);
  --shadow-md: 0 12px 32px -8px rgba(20, 30, 24, 0.14), 0 2px 6px rgba(20, 30, 24, 0.05);
  --scroll-shadow: rgba(20, 30, 24, 0.16);

  --brand-mark: var(--icon-leaf) center / 60% no-repeat, linear-gradient(145deg, #3f8d5c, #22573a);

  /* Icons: data-URI SVG masks, painted with currentColor. */
  --icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E");
  --icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5M12 16h.01'/%3E%3C/svg%3E");
  --icon-warn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 2.4 17.5A2 2 0 0 0 4.1 20.5h15.8a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9.5v4M12 17h.01'/%3E%3C/svg%3E");
  --icon-leaf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19C5 10.5 10 5 19 5c0 8.5-5 14-14 14z'/%3E%3Cpath d='M5 19l8-8'/%3E%3C/svg%3E");
}

/* Dark tokens: follow the OS unless the theme toggle set data-theme on <html>. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d110e;
    --surface: #141a16;
    --surface-2: #181f1a;
    --surface-hover: #1e2620;
    --surface-raised: #252e28;
    --border: #253029;
    --border-strong: #35423a;
    --border-hover: #4a594f;
    --text: #e4e9e5;
    --text-muted: #a3aea6;
    --text-subtle: #8d988f;

    --accent: #2f7a4c;
    --accent-hover: #317f4e;
    --accent-soft: rgba(84, 184, 120, 0.15);
    --accent-soft-text: #a3dcb7;
    --accent-ring: rgba(98, 190, 130, 0.35);
    --link: #86cf9f;
    --focus: #7cc99a;
    --danger: #c0392e;
    --danger-hover: #cb4337;
    --danger-ring: rgba(240, 90, 80, 0.35);

    --green-bg: rgba(74, 179, 110, 0.17);  --green-fg: #9adcb0;
    --teal-bg: rgba(60, 190, 175, 0.16);   --teal-fg: #8fdcd2;
    --blue-bg: rgba(90, 150, 240, 0.16);   --blue-fg: #aac8f6;  --blue-border: rgba(90, 150, 240, 0.32);
    --violet-bg: rgba(160, 120, 240, 0.18); --violet-fg: #cbb6f6;
    --amber-bg: rgba(230, 170, 40, 0.15);  --amber-fg: #f1ca77; --amber-border: rgba(230, 170, 40, 0.34); --amber-solid: #e2a52a;
    --red-bg: rgba(240, 90, 80, 0.15);     --red-fg: #f7a8a1;   --red-border: rgba(240, 90, 80, 0.36);
    --neutral-bg: rgba(160, 175, 165, 0.14); --neutral-fg: #bcc6bf;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 16px 40px -8px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.35);
    --scroll-shadow: rgba(0, 0, 0, 0.55);
  }
}

:root[data-theme="light"] { color-scheme: light; }

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d110e;
  --surface: #141a16;
  --surface-2: #181f1a;
  --surface-hover: #1e2620;
  --surface-raised: #252e28;
  --border: #253029;
  --border-strong: #35423a;
  --border-hover: #4a594f;
  --text: #e4e9e5;
  --text-muted: #a3aea6;
  --text-subtle: #8d988f;
  --accent: #2f7a4c;
  --accent-hover: #317f4e;
  --accent-soft: rgba(84, 184, 120, 0.15);
  --accent-soft-text: #a3dcb7;
  --accent-ring: rgba(98, 190, 130, 0.35);
  --link: #86cf9f;
  --focus: #7cc99a;
  --danger: #c0392e;
  --danger-hover: #cb4337;
  --danger-ring: rgba(240, 90, 80, 0.35);
  --green-bg: rgba(74, 179, 110, 0.17);  --green-fg: #9adcb0;
  --teal-bg: rgba(60, 190, 175, 0.16);   --teal-fg: #8fdcd2;
  --blue-bg: rgba(90, 150, 240, 0.16);   --blue-fg: #aac8f6;  --blue-border: rgba(90, 150, 240, 0.32);
  --violet-bg: rgba(160, 120, 240, 0.18); --violet-fg: #cbb6f6;
  --amber-bg: rgba(230, 170, 40, 0.15);  --amber-fg: #f1ca77; --amber-border: rgba(230, 170, 40, 0.34); --amber-solid: #e2a52a;
  --red-bg: rgba(240, 90, 80, 0.15);     --red-fg: #f7a8a1;   --red-border: rgba(240, 90, 80, 0.36);
  --neutral-bg: rgba(160, 175, 165, 0.14); --neutral-fg: #bcc6bf;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 16px 40px -8px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.35);
  --scroll-shadow: rgba(0, 0, 0, 0.55);
}

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

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent-ring); }

h1, h2, h3 { color: var(--text); overflow-wrap: break-word; text-wrap: balance; }

h1 {
  margin: 0 0 var(--space-6);
  font-size: var(--fs-2xl);
  line-height: 1.25;
  font-weight: 650;
  letter-spacing: -0.02em;
}

h2 {
  margin: var(--space-10) 0 var(--space-3);
  font-size: var(--fs-lg);
  line-height: 1.35;
  font-weight: 620;
  letter-spacing: -0.01em;
}

h3 {
  margin: var(--space-6) 0 var(--space-2);
  font-size: var(--fs-md);
  font-weight: 600;
}

p { margin: 0 0 var(--space-3); }

strong, b { font-weight: 600; }

a {
  color: var(--link);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: text-decoration-color 0.12s, color 0.12s;
}
a:hover { text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.875em; }
code {
  padding: 0.1em 0.35em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
}
pre {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  overflow-x: auto;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  line-height: 1.5;
}
pre code { padding: 0; background: none; border: 0; }

hr { margin: var(--space-6) 0; border: 0; border-top: 1px solid var(--border); }

img, svg, video { max-width: 100%; }

audio {
  display: block;
  width: 100%;
  max-width: 34rem;
  height: 42px;
  margin: var(--space-2) 0 var(--space-3);
}

details {
  margin: 0 0 var(--space-4);
  padding: 0 var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
summary {
  padding: var(--space-3) 0;
  font-weight: 550;
  cursor: pointer;
}
summary::marker { color: var(--text-subtle); }
details[open] > summary { margin-bottom: var(--space-3); border-bottom: 1px solid var(--border); }

/* ---------- Buttons ---------- */

button, .button, input[type="submit"], input[type="button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 38px;
  padding: 8px 16px;
  font: inherit;
  font-size: var(--fs-base);
  font-weight: 560;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  color: var(--on-accent);
  background: var(--accent);
  border: 1px solid transparent;
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s, color 0.12s, box-shadow 0.12s, opacity 0.12s;
  -webkit-tap-highlight-color: transparent;
}

button:not(:disabled):hover, .button:hover,
input[type="submit"]:not(:disabled):hover, input[type="button"]:not(:disabled):hover {
  background: var(--accent-hover);
  color: var(--on-accent);
}

button:not(:disabled):active, .button:active { transform: translateY(1px); }

button.secondary, .button.secondary {
  color: var(--text);
  background: var(--surface);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-xs);
}
button.secondary:not(:disabled):hover, .button.secondary:hover {
  color: var(--text);
  background: var(--surface-hover);
  border-color: var(--border-hover);
}

button.danger, .button.danger { background: var(--danger); }
button.danger:not(:disabled):hover, .button.danger:hover { background: var(--danger-hover); }

button:disabled, input[type="submit"]:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

button.htmx-request, form.htmx-request button { cursor: progress; opacity: 0.7; }

.htmx-indicator { opacity: 0; transition: opacity 0.2s; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

.takeover-btn .label-loading { display: none; }
.takeover-btn.htmx-request .label-loading { display: inline; }
.takeover-btn.htmx-request .label-default { display: none; }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-6);
}
.actions form { margin: 0; }

/* ---------- Page header, toolbar, segmented control ---------- */

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-6);
}
.page-header h1 { margin: 0; }
.page-title { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.page-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.page-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.page-actions form { margin: 0; }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-5); }
.toolbar-end { margin-left: auto; }

.segmented {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.segmented a {
  padding: 6px 16px;
  font-size: var(--fs-base);
  font-weight: 560;
  line-height: 1.4;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: calc(var(--radius) - 3px);
  transition: background-color 0.12s, color 0.12s;
}
.segmented a:hover { color: var(--text); background: var(--surface-hover); }
.segmented a.active {
  color: var(--text);
  background: var(--surface-raised);
  box-shadow: var(--shadow-sm);
}

/* ---------- Forms ---------- */

input:where(:not([type]), [type="text"], [type="password"], [type="email"], [type="url"], [type="number"],
  [type="search"], [type="tel"], [type="time"], [type="date"], [type="datetime-local"], [type="month"], [type="week"]),
select,
textarea {
  max-width: 100%;
  min-height: var(--control-h);
  padding: 8px 12px;
  font: inherit;
  font-size: var(--fs-md);
  line-height: 1.4;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  transition: border-color 0.12s, box-shadow 0.12s;
}

input:where(:not([type]), [type="text"], [type="password"], [type="email"], [type="url"], [type="number"],
  [type="search"], [type="tel"], [type="time"], [type="date"], [type="datetime-local"], [type="month"], [type="week"]):hover,
select:hover,
textarea:hover { border-color: var(--border-hover); }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

input:disabled, select:disabled, textarea:disabled {
  color: var(--text-subtle);
  background: var(--surface-2);
  cursor: not-allowed;
}

::placeholder { color: var(--text-subtle); opacity: 1; }

textarea { display: block; width: 100%; min-height: 120px; resize: vertical; line-height: 1.5; }
textarea:not([rows]) { min-height: 160px; font-family: var(--font-mono); font-size: var(--fs-sm); }
#prompt_template, #knowledge_base { min-height: 320px; }

input[type="checkbox"], input[type="radio"] {
  width: 16px;
  height: 16px;
  margin: 0;
  flex: none;
  accent-color: var(--accent);
  cursor: pointer;
}

input[type="file"] {
  max-width: 100%;
  font: inherit;
  font-size: var(--fs-base);
  color: var(--text-muted);
}
input[type="file"]::file-selector-button {
  margin-right: var(--space-3);
  padding: 7px 14px;
  font: inherit;
  font-weight: 560;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s;
}
input[type="file"]::file-selector-button:hover { background: var(--surface-hover); border-color: var(--border-hover); }

.form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--space-5);
}

.form-row > label {
  font-size: var(--fs-base);
  font-weight: 550;
  color: var(--text);
}

.form-row > input:where(:not([type="checkbox"], [type="radio"], [type="file"])),
.form-row > select { width: 100%; max-width: 30rem; }
.form-row > input[type="time"],
.form-row > input[inputmode="numeric"],
.form-row > input[inputmode="decimal"] { max-width: 12rem; }
form.card > button[type="submit"]:last-child { margin-top: var(--space-1); }

/* settings: short fields side by side, a label row with its own action, a save bar */
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0 var(--space-5); }
.form-grid-wide { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.form-grid .form-row > input:where(:not([type="checkbox"], [type="radio"], [type="file"])),
.form-grid .form-row > select { max-width: none; }
.form-hint { margin: calc(-1 * var(--space-3)) 0 var(--space-5); }
.label-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.label-row > label { font-size: var(--fs-base); font-weight: 550; }
.btn-sm, button.btn-sm { min-height: 30px; padding: 4px 10px; font-size: var(--fs-sm); }
.form-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  gap: var(--space-2);
  margin: var(--space-2) calc(-1 * var(--space-6)) calc(-1 * var(--space-6));
  padding: var(--space-4) var(--space-6);
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* radio choices (Új kampány) rendered as selectable tiles */
.form-row:has(> label > input[type="radio"]) { flex-flow: row wrap; gap: var(--space-2); }
.form-row > label:has(> input[type="radio"]) {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 16px 10px 14px;
  font-weight: 550;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s;
}
.form-row > label:has(> input[type="radio"]:checked) {
  color: var(--accent-soft-text);
  background: var(--accent-soft);
  border-color: var(--accent);
}
.form-row > label:has(> input[type="radio"]:disabled) {
  color: var(--text-subtle);
  background: var(--surface-2);
  border-style: dashed;
  box-shadow: none;
  cursor: not-allowed;
}
.form-row:has(> label > input[type="radio"]) > .hint { flex-basis: 100%; }

.weekdays { display: flex; flex-wrap: wrap; gap: 6px; }
.weekdays label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 11px;
  font-size: var(--fs-base);
  font-weight: 550;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  cursor: pointer;
  user-select: none;
  transition: background-color 0.12s, border-color 0.12s;
}
.weekdays label:has(:checked) {
  color: var(--accent-soft-text);
  background: var(--accent-soft);
  border-color: var(--accent);
}

.hint {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-muted);
}
.page-intro { max-width: 68ch; margin: calc(-1 * var(--space-3)) 0 var(--space-6); font-size: var(--fs-md); }

.field-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 550;
  color: var(--red-fg);
}
.field-error::before {
  content: "";
  width: 15px;
  height: 15px;
  margin-top: 2px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--icon-alert) center / contain no-repeat;
  mask: var(--icon-alert) center / contain no-repeat;
}
.form-row:has(> .field-error) > input,
.form-row:has(> .field-error) > select,
.form-row:has(> .field-error) > textarea { border-color: var(--red-fg); }
.form-row:has(> .field-error) > input:focus,
.form-row:has(> .field-error) > select:focus,
.form-row:has(> .field-error) > textarea:focus { box-shadow: 0 0 0 3px var(--danger-ring); }

/* ---------- Callouts ---------- */

.notice, .error {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 var(--space-4);
  padding: 10px 14px;
  font-size: var(--fs-base);
  line-height: 1.5;
  border: 1px solid;
  border-radius: var(--radius);
}
.notice::before, .error::before {
  content: "";
  width: 18px;
  height: 18px;
  margin-top: 1px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--icon-info) center / contain no-repeat;
  mask: var(--icon-info) center / contain no-repeat;
}

.notice { color: var(--blue-fg); background: var(--blue-bg); border-color: var(--blue-border); }
.error { color: var(--red-fg); background: var(--red-bg); border-color: var(--red-border); }
.error::before { -webkit-mask-image: var(--icon-alert); mask-image: var(--icon-alert); }

.banner-alert {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-6);
  padding: 14px 16px 14px 18px;
  font-weight: 550;
  line-height: 1.5;
  color: var(--amber-fg);
  background: var(--amber-bg);
  border: 1px solid var(--amber-border);
  border-radius: var(--radius-lg);
  box-shadow: inset 4px 0 0 var(--amber-solid), var(--shadow-xs);
}
.banner-alert::before {
  content: "";
  width: 20px;
  height: 20px;
  flex: none;
  align-self: flex-start;
  margin-top: 1px;
  background: currentColor;
  -webkit-mask: var(--icon-warn) center / contain no-repeat;
  mask: var(--icon-warn) center / contain no-repeat;
}
.banner-alert > span { flex: 1 1 16rem; min-width: 0; }
.pre-line { white-space: pre-line; }
.banner-alert form { margin: 0; flex: none; }

/* ---------- Surfaces ---------- */

.card {
  margin-bottom: var(--space-6);
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.card > h2:first-child {
  margin: 0 0 var(--space-5);
  padding-bottom: var(--space-4);
  font-size: var(--fs-lg);
  border-bottom: 1px solid var(--border);
}
.card > h3 { margin-top: var(--space-6); }

/* label/value list (call detail): two columns, hairline separated */
.kv { margin: 0; }
.kv > div {
  display: grid;
  grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr);
  align-items: baseline;
  gap: 2px var(--space-4);
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  overflow-wrap: anywhere;
}
.kv > div:first-child { padding-top: 0; }
.kv > div:last-child { padding-bottom: 0; border-bottom: 0; }
.kv dt { font-weight: 500; color: var(--text-muted); }
.kv dd { margin: 0; }
.kv audio { margin: 0; }
.kv-nested { margin: 0; }
.kv-nested > div { display: flex; flex-wrap: wrap; gap: 0 6px; }
.kv-nested dt { font-weight: 400; }

.text-muted { color: var(--text-muted); }

/* call transcript as chat bubbles: assistant left, customer right, system centred */
.transcript { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.transcript > .turn {
  max-width: min(40rem, 85%);
  padding: 9px 14px 10px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.transcript .turn-role { display: block; margin-bottom: 2px; font-size: var(--fs-xs); font-weight: 650; letter-spacing: 0.02em; color: var(--text-muted); }
.transcript > .turn-agent, .transcript > .turn-other { align-self: flex-start; border-bottom-left-radius: 4px; }
.transcript > .turn-customer { align-self: flex-end; background: var(--accent-soft); border-color: transparent; border-bottom-right-radius: 4px; }
.transcript > .turn-customer .turn-role { color: var(--accent-soft-text); }
.transcript > .turn-system {
  align-self: center;
  max-width: 90%;
  padding: 3px 12px;
  font-size: var(--fs-sm);
  text-align: center;
  color: var(--text-muted);
  background: transparent;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-full);
}
.transcript > .turn-system .turn-role { display: inline; margin: 0; font-size: inherit; }

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-4);
  margin: 0 0 var(--space-8);
}
.stat {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.stat .num {
  font-size: var(--fs-3xl);
  line-height: 1.1;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.stat .label { font-size: var(--fs-sm); font-weight: 550; color: var(--text-muted); }
.stat .unit { margin-left: 2px; font-size: var(--fs-md); font-weight: 550; letter-spacing: 0; color: var(--text-muted); }

/* ---------- Pills ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px 2px 8px;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.01em;
  white-space: nowrap;
  vertical-align: middle;
  color: var(--neutral-fg);
  background: var(--neutral-bg);
  border-radius: var(--radius-full);
}
.pill::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
}

/* bare .pill = the "teszt" tag */
.pill:not([class*="pill-"]) {
  padding: 1px 9px;
  color: var(--text-muted);
  background: transparent;
  border: 1px dashed var(--border-hover);
}
.pill:not([class*="pill-"])::before { display: none; }
h1 .pill { font-size: var(--fs-sm); margin-left: 4px; }

/* contact status */
.pill-uj { color: var(--blue-fg); background: var(--blue-bg); }
.pill-utemezve { color: var(--teal-fg); background: var(--teal-bg); }
.pill-visszahivas { color: var(--violet-fg); background: var(--violet-bg); }
.pill-folyamatban { color: var(--amber-fg); background: var(--amber-bg); }
.pill-lezarva { color: var(--green-fg); background: var(--green-bg); }
.pill-nem_elerheto { color: var(--neutral-fg); background: var(--neutral-bg); }
.pill-leallitva { color: var(--neutral-fg); background: var(--neutral-bg); }
.pill-leallitva::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.pill-ne_hivjuk { color: var(--red-fg); background: var(--red-bg); }

/* campaign status */
.pill-fut { color: var(--green-fg); background: var(--green-bg); }
.pill-szunetel { color: var(--amber-fg); background: var(--amber-bg); }
.pill-befejezve { color: var(--neutral-fg); background: var(--neutral-bg); }

/* call outcome (for when outcomes are rendered as pills) */
.pill-rendeles { color: var(--green-fg); background: var(--green-bg); }
.pill-email_felveve { color: var(--teal-fg); background: var(--teal-bg); }
.pill-nem_erdekli { color: var(--neutral-fg); background: var(--neutral-bg); }
.pill-hangposta { color: var(--neutral-fg); background: var(--neutral-bg); }
.pill-foglalt { color: var(--amber-fg); background: var(--amber-bg); }
.pill-atadva_embernek { color: var(--blue-fg); background: var(--blue-bg); }
.pill-hiba { color: var(--red-fg); background: var(--red-bg); }

/* live call wants a human */
.pill-embert-ker { color: #fff; background: var(--danger); }

.pill-fut::before, .pill-folyamatban::before, .pill-embert-ker::before { animation: pulse 1.8s ease-out infinite; }

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 5px transparent; }
}

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

/* every table sits in a .table-wrap: the wrapper draws the frame and scrolls sideways */
.table-wrap {
  overflow-x: auto;
  margin: 0 0 var(--space-6);
  background:
    linear-gradient(to left, var(--surface) 40%, transparent) right center / 48px 100% no-repeat local,
    radial-gradient(farthest-side at 100% 50%, var(--scroll-shadow), transparent) right center / 14px 100% no-repeat scroll,
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.card .table-wrap { box-shadow: none; }

table {
  width: 100%;
  margin: 0;
  font-size: var(--fs-base);
  border-collapse: separate;
  border-spacing: 0;
}

th, td {
  padding: 11px 14px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
}

th {
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-muted);
  background: var(--surface-2);
  vertical-align: bottom;
}
tbody tr:last-child td { border-bottom: 0; }

tbody td { transition: background-color 0.1s; }
tbody tr:hover > td { background: var(--surface-hover); }

td > a:not(.button) { font-weight: 550; text-decoration: none; }
td > a:not(.button):hover { text-decoration: underline; }

td:last-child:has(> .button) { width: 1%; text-align: right; white-space: nowrap; }
td .button { min-height: 32px; padding: 5px 12px; font-size: var(--fs-sm); }

:is(td, th).num { text-align: right; font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
td.num { white-space: nowrap; }

/* campaign contacts: #contacts-table is both the htmx target and the .table-wrap */
table.contacts th, table.contacts td { padding: 10px; }
table.contacts .col-name { min-width: 10rem; }
.contact-name { display: block; font-weight: 550; }
.contact-phone { display: block; font-size: var(--fs-sm); color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
table.contacts td.col-next { min-width: 5.5rem; }
table.contacts td.col-summary { min-width: 9rem; font-size: var(--fs-sm); color: var(--text-muted); }
table.contacts td.col-summary a { white-space: nowrap; }
.summary-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
table.contacts .col-actions { width: 1%; }

table.contacts .col-name {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface);
  box-shadow: inset -1px 0 0 var(--border);
}
table.contacts th.col-name { background: var(--surface-2); }
table.contacts tbody tr:hover > td.col-name { background: var(--surface-hover); }

.contacts button { min-height: 32px; padding: 5px 11px; font-size: var(--fs-sm); }
.error-inline { margin: 0 0 6px; padding: 4px 8px; font-size: var(--fs-sm); }
.error-inline::before { width: 14px; height: 14px; }

/* row actions: "Hívás most" + a ⋯ menu that opens in-flow (the row grows), so the
   scrolling #contacts-table never clips it */
.row-actions { display: flex; align-items: flex-start; justify-content: flex-end; gap: 6px; }
.row-actions form { margin: 0; }
.row-actions > form > button { white-space: nowrap; }

.row-menu { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; }
.row-menu > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  min-height: 32px;
  padding: 0;
  color: var(--text-muted);
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
.row-menu > summary::-webkit-details-marker { display: none; }
.row-menu > summary:hover, .row-menu[open] > summary {
  color: var(--text);
  background: var(--surface-hover);
  border-color: var(--border-hover);
}
.row-menu[open] > summary { margin: 0; }

/* inline-size containment: the panel never widens the column; its body overflows leftwards */
.row-menu-panel { display: flex; justify-content: flex-end; contain: inline-size; margin-top: 6px; }
.row-menu-body {
  position: relative;
  z-index: 2;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 20rem;
  max-width: calc(100vw - 3rem);
  padding: var(--space-3);
  text-align: left;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.row-menu-reschedule { display: flex; flex-direction: column; gap: 6px; }
.row-menu-reschedule label { font-size: var(--fs-sm); font-weight: 550; color: var(--text-muted); }
.row-menu-line { display: flex; gap: 6px; }
.row-menu-line input { flex: 1 1 auto; width: auto; min-width: 0; min-height: 32px; padding: 4px 8px; font-size: var(--fs-sm); }
.row-menu-body > form:last-child { padding-top: var(--space-3); border-top: 1px solid var(--border); }
.row-menu-stop { width: 100%; justify-content: flex-start; color: var(--red-fg); }
.contacts .row-menu-stop:not(:disabled):hover { color: var(--red-fg); background: var(--red-bg); border-color: var(--red-border); }
table.contacts tr:has(.row-menu[open]) > td { vertical-align: top; }

/* ---------- Empty states ---------- */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-6);
  padding: var(--space-10) var(--space-6);
  text-align: center;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
}
.empty-state p { margin: 0; max-width: 40ch; font-size: var(--fs-md); }
.empty-state .button { margin-top: var(--space-1); }
.empty-state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--text-subtle);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
}
.empty-state-sm { gap: var(--space-2); padding: var(--space-8) var(--space-4); }
.empty-state-sm .empty-state-icon { width: 38px; height: 38px; }
/* inside a table frame (#contacts-table, the report under its header row) */
.table-wrap > .empty-state { position: sticky; left: 0; margin: 0; background: transparent; border: 0; border-radius: 0; }

/* ---------- Live calls (Áttekintés) ---------- */

#takeover-feedback > :last-child { margin-bottom: var(--space-4); }

.notice-sm { font-size: var(--fs-sm); }

.live-call { margin-bottom: var(--space-3); padding: 16px 20px; }
.live-call-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-bottom: var(--space-3);
}
.live-call-name { font-size: var(--fs-md); font-weight: 600; }
.live-call-phone { font-size: var(--fs-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.live-call-head .meta { margin-left: auto; font-size: var(--fs-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }

.live-call-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--space-3);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.live-call-status::before {
  content: "";
  width: 8px;
  height: 8px;
  margin: 0 2px;
  flex: none;
  border-radius: 50%;
  color: var(--amber-solid);
  background: currentColor;
  animation: pulse 1.8s ease-out infinite;
}

.live-call[data-human-requested="1"] {
  border-color: var(--red-border);
  box-shadow: inset 4px 0 0 var(--danger), var(--shadow-sm);
}
.live-call[data-human-requested="1"] .takeover-btn:not(:disabled) {
  color: var(--on-accent);
  background: var(--accent);
  border-color: transparent;
}
.live-call[data-human-requested="1"] .takeover-btn:not(:disabled):hover { background: var(--accent-hover); }

.transcript-mini {
  margin: 0 0 var(--space-3);
  padding: 10px 14px;
  font-size: var(--fs-base);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.transcript-mini p { margin: 3px 0; line-height: 1.5; }
.transcript-mini .turn-role { font-weight: 600; color: var(--text-muted); }
.transcript-mini .turn-customer .turn-role { color: var(--accent-soft-text); }
.transcript-mini .turn-system { color: var(--text-muted); font-size: var(--fs-sm); }

/* ---------- Browser test call (Teszthívás) ---------- */

#th-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-6);
}
#th-panel > * { margin: 0; }
#th-status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-lg);
  font-weight: 600;
}
#th-status::before {
  content: "";
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 50%;
  color: var(--amber-solid);
  background: currentColor;
  animation: pulse 1.8s ease-out infinite;
}
#th-panel[data-state="live"] #th-status::before { color: var(--green-fg); }
#th-panel[data-state="ended"] #th-status::before { color: var(--text-subtle); animation: none; }
#th-vege { min-width: 9rem; background: var(--danger); }
#th-vege:not(:disabled):hover { background: var(--danger-hover); }
#th-panel .actions { margin: 0; }

/* ---------- Language switch ---------- */

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.lang-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  padding: 3px 10px;
  font-size: var(--fs-xs);
  font-weight: 650;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: calc(var(--radius) - 3px);
  transition: background-color 0.12s, color 0.12s;
}
.lang-switch a:hover { color: var(--text); background: var(--surface-hover); }
.lang-switch a.active, .lang-switch a[aria-current] {
  color: var(--text);
  background: var(--surface-raised);
  box-shadow: var(--shadow-sm);
}

/* ---------- Theme toggle ---------- */

.theme-toggle {
  width: 32px;
  min-height: 32px;
  height: 32px;
  padding: 0;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  box-shadow: none;
}
.theme-toggle:not(:disabled):hover { color: var(--text); background: var(--surface-hover); }
.theme-toggle .icon { width: 16px; height: 16px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}

/* ---------- App shell ---------- */

.shell {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  background: linear-gradient(to right, var(--surface) calc(var(--sidebar-w) - 1px), var(--border) 0 var(--sidebar-w), transparent 0);
}

.nav {
  position: sticky;
  top: 0;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
  width: var(--sidebar-w);
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  padding: var(--space-5) var(--space-3) var(--space-4);
  background: var(--surface);
  border-right: 1px solid var(--border);
  scrollbar-width: thin;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-4);
  padding: 2px 8px var(--space-4);
  font-size: var(--fs-md);
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.nav-brand::before {
  content: "";
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 9px;
  background: var(--brand-mark);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), var(--shadow-xs);
}

.nav-icon { width: 18px; height: 18px; flex: none; }

.nav-brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.nav-brand-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-brand-sub { font-size: var(--fs-sm); font-weight: 500; letter-spacing: 0; color: var(--text-muted); }

.password-field { position: relative; }
.password-field input { padding-right: 44px; }
.login-box .password-toggle,
.password-toggle {
  position: absolute;
  top: 50%;
  right: 4px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  min-height: 0;
  margin: 0;
  padding: 0;
  transform: translateY(-50%);
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  box-shadow: none;
}
.password-toggle:hover { color: var(--text); background: var(--surface-hover); }

.nav-links { display: flex; flex-direction: column; gap: 2px; }
.nav-links a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  font-size: var(--fs-md);
  font-weight: 520;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: var(--radius);
  transition: background-color 0.12s, color 0.12s;
}
.nav-links a:hover { color: var(--text); background: var(--surface-hover); }
.nav-links a.active { color: var(--accent-soft-text); background: var(--accent-soft); font-weight: 620; }

.nav-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-4);
}
.nav-tools, .page-tools { display: flex; align-items: center; gap: 6px; }
.nav-tools { margin-left: 8px; }

.nav-logout { align-self: stretch; margin: 0; }
.nav-logout button {
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  font-size: var(--fs-md);
  font-weight: 520;
  color: var(--text-muted);
  background: transparent;
  box-shadow: none;
}
.nav-logout button:not(:disabled):hover { color: var(--text); background: var(--surface-hover); }

.content {
  flex: 1;
  min-width: 0;
  max-width: var(--content-max);
  padding: var(--space-8) var(--space-10) var(--space-12);
}


/* ---------- Login ---------- */

.content-plain {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--space-12) var(--space-4);
  background:
    radial-gradient(60rem 30rem at 50% -10%, var(--accent-soft), transparent 70%),
    var(--bg);
}
.content-plain > .page-tools { position: absolute; top: var(--space-4); right: var(--space-4); }

.login-box {
  width: 100%;
  max-width: 380px;
  padding: var(--space-8);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: var(--space-6); }
.login-mark {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 12px;
  background: var(--brand-mark);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), var(--shadow-sm);
}
.login-wordmark { display: flex; flex-direction: column; font-size: var(--fs-lg); font-weight: 650; line-height: 1.25; letter-spacing: -0.01em; }
.login-wordmark small { font-size: var(--fs-sm); font-weight: 500; letter-spacing: 0; color: var(--text-muted); }
.login-box h1 { margin-bottom: var(--space-5); font-size: var(--fs-xl); }
.login-box form { display: flex; flex-direction: column; gap: 6px; }
.login-box label { margin-top: var(--space-2); font-size: var(--fs-base); font-weight: 550; }
.login-box label:first-child { margin-top: 0; }
.login-box input { width: 100%; }
.login-box button { width: 100%; min-height: 42px; margin-top: var(--space-4); font-size: var(--fs-md); }

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
  :root { --sidebar-w: 224px; }
  .content { padding: var(--space-6) var(--space-6) var(--space-10); }
}

@media (max-width: 768px) {
  .nav-brand-sub { display: none; }
  .shell { flex-direction: column; background: none; }

  /* top bar: brand + tools on one row, the links as one horizontally scrolling strip */
  .nav {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand footer" "links links";
    align-items: center;
    align-self: stretch;
    gap: 10px var(--space-3);
    width: auto;
    height: auto;
    overflow: visible;
    padding: 10px var(--space-4);
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .nav-brand { grid-area: brand; min-width: 0; margin: 0; padding: 0; border: 0; }
  .nav-brand::before { width: 28px; height: 28px; border-radius: 8px; }
  .nav-footer { grid-area: footer; flex-direction: row; align-items: center; gap: 4px; margin: 0; padding: 0; }
  .nav-tools { margin: 0; }
  .nav-logout { align-self: center; }
  .nav-logout button { width: auto; padding: 6px 10px; font-size: var(--fs-base); }
  .nav-links {
    grid-area: links;
    flex-direction: row;
    gap: 6px;
    margin: 0 calc(-1 * var(--space-4));
    padding: 0 var(--space-4);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a {
    flex: none;
    gap: 6px;
    padding: 6px 12px;
    font-size: var(--fs-sm);
    white-space: nowrap;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
  }
  .nav-links a.active { border-color: transparent; }
  .nav-icon { width: 16px; height: 16px; }

  .content { padding: var(--space-5) var(--space-4) var(--space-10); }
  h1 { font-size: var(--fs-xl); margin-bottom: var(--space-5); }
  h2 { margin-top: var(--space-8); }

  .card { padding: var(--space-5) var(--space-4); }
  .form-actions { margin: var(--space-2) calc(-1 * var(--space-4)) calc(-1 * var(--space-5)); padding: var(--space-3) var(--space-4); }
  .card > h2:first-child { margin-bottom: var(--space-4); padding-bottom: var(--space-3); }
  .kv > div { grid-template-columns: minmax(0, 1fr); }
  .transcript > .turn { max-width: 92%; }

  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-6); }
  .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .stat { padding: 14px 16px; }
  .stat .num { font-size: 1.5rem; }

  th, td { padding: 10px 12px; }

  .banner-alert { padding: 12px 14px 12px 16px; }
  .banner-alert form, .banner-alert form button { width: 100%; }

  .live-call { padding: 14px 16px; }
  #th-panel { padding: var(--space-6) var(--space-5); }

  .form-row > input:where(:not([type="checkbox"], [type="radio"], [type="file"])) { max-width: none; }
  .form-row > input[type="time"],
  .form-row > input[inputmode="numeric"],
  .form-row > input[inputmode="decimal"] { max-width: 12rem; }

  .login-box { padding: var(--space-6); }
  .content-plain > .page-tools { top: var(--space-3); right: var(--space-3); }
}

@media (max-width: 480px) {
  /* icon-only logout; the label stays as its accessible name */
  .nav-logout button { padding: 6px 8px; }
  .nav-logout button span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

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