/* SyncoSendo — design system
   Components only use the semantic tokens below; each token has a Day and a Night value.
   Brand: Primary Blue #274C77 · Neutral Gray #8B8C89 · Light Neutral #E7ECEF (+ tonal variations for contrast and states).
   Day values live on :root. Night values apply on screen only, so printing always uses Day.
   Contrast (WCAG 2.1) noted as "background / surface". */
:root {
  color-scheme: light;

  /* ---------- surfaces ---------- */
  --background: #e7ecef;               /* Light Neutral: the app canvas */
  --background-translucent: rgba(231, 236, 239, .92);
  --surface: #ffffff;                  /* sidebar, tables, cards, buttons */
  --surface-secondary: #f3f6f8;        /* table header, readonly fields, code, dialog footer */
  --surface-elevated: #ffffff;         /* modals, drawers, menus */
  --surface-muted: #dde4e9;            /* tracks, neutral badges */
  --input-bg: #ffffff;
  --hover: #eef2f5;
  --selected: #e4ecf5;                 /* selected row / nav item */
  --segment-selected: #ffffff;
  --scrim: rgba(17, 30, 45, .4);

  /* ---------- text ---------- */
  --text-primary: #1b2430;             /* 13.2 / 15.7 */
  --text-secondary: #3d4752;           /*  7.9 / 9.5 */
  --text-muted: #545c64;               /*  5.7 / 6.8 */
  --text-subtle: #5f666c;              /*  4.9 / 5.8  placeholders, small labels */
  --text-disabled: #8f969c;            /*  3.0 on surface — readable, clearly inactive */

  /* ---------- borders ---------- */
  --border: #d6dde2;                   /* dividers, table rows */
  --border-strong: #bfc8cf;            /* buttons, cards */
  --border-input: #8b8c89;             /* Neutral Gray: 3.4 against the white field */

  /* ---------- primary ---------- */
  --primary: #274c77;                  /* 7.4 / 8.8; white label 8.8 */
  --primary-hover: #1f3d60;
  --primary-active: #18304c;
  --primary-text: #274c77;             /* links */
  --primary-icon: #274c77;
  --primary-subtle: #e4ecf5;
  --primary-subtle-strong: #ccdaea;
  --on-primary: #ffffff;

  /* ---------- focus / disabled ---------- */
  --focus: #3a6aa3;                    /* ring 4.7 / 5.6 */
  --focus-soft: rgba(58, 106, 163, .22);
  --focus-halo: 0 0 0 3px var(--focus-soft);
  --disabled-bg: #e4e9ed;

  /* ---------- button hover: orange (same in Day and Night) ---------- */
  --hover-accent: #c2410c;             /* white label 5.2; 4.4 against the Day background, 3.4 against Night */
  --hover-accent-active: #9a3a0a;      /* pressed; white label 7.0 */
  --on-hover-accent: #ffffff;

  /* ---------- status (text on own bg ≥ 5.3) ---------- */
  --success: #1d6b3f;  --success-bg: #e2f1e7;  --success-dot: #2e9a5a;
  --warning: #94500a;  --warning-bg: #fbeedd;  --warning-dot: #d9821f;  --warning-border: #efd2ad;
  --error: #b3261e;    --error-bg: #fbe9e7;    --error-hover: #93201a;  --error-border: #f0c4bf;
  --error-solid: #b3261e; --on-error: #ffffff;
  --info: #274c77;     --info-bg: #e4ecf5;     --info-icon: #3a6aa3;

  /* ---------- elevation: soft shadows in Day ---------- */
  --shadow-sm: 0 1px 2px rgba(27, 36, 48, .06);
  --shadow-md: 0 1px 2px rgba(27, 36, 48, .06), 0 6px 20px rgba(27, 36, 48, .10);
  --shadow-lg: 0 0 0 1px rgba(27, 36, 48, .05), 0 16px 48px rgba(27, 36, 48, .16);
  --shadow-pop: var(--shadow-md);
  --shadow-panel: var(--shadow-lg);

  /* toast: a dark navy chip derived from the primary */
  --toast-bg: #1d3553; --toast-text: #eef3f7; --toast-muted: #aebfd1; --toast-ok: #7ad3a1; --toast-err: #f4a097; --toast-info: #a9c6e6;

  /* select chevron (data URIs cannot read variables) */
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23545c64' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

  /* spacing */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;

  /* shape */
  --r-sm: 6px;
  --r: 8px;
  --r-lg: 12px;
  --h: 32px;
  --h-sm: 26px;
  --row-h: 32px;

  /* type */
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
  --mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  --fs-xs: 11px; --fs-sm: 12px; --fs: 13px; --fs-md: 15px; --fs-lg: 20px;

  --side-w: 232px;
  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* Night: navy/slate derived from #274C77 — separation comes from surface steps and quiet borders, not shadows */
@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;

    --background: #121a24;
    --background-translucent: rgba(18, 26, 36, .9);
    --surface: #18222e;
    --surface-secondary: #1d2835;
    --surface-elevated: #1f2b39;
    --surface-muted: #283545;
    --input-bg: #1c2734;                 /* lifted above the page so fields never disappear */
    --hover: #222e3c;
    --selected: #203752;
    --segment-selected: #34465a;
    --scrim: rgba(5, 9, 14, .55);

    --text-primary: #e7ecef;             /* Light Neutral as text: 14.7 / 13.5 */
    --text-secondary: #bdc6ce;           /* 10.1 / 9.3 */
    --text-muted: #9ba4ac;               /*  6.9 / 6.4 */
    --text-subtle: #8e979f;              /*  5.9 / 5.4 */
    --text-disabled: #6c7782;            /*  3.5 */

    --border: #263241;
    --border-strong: #354355;
    --border-input: #687a8e;             /* 3.2 on the field, 3.1 on dialogs */

    --primary: #3a6596;                  /* #274C77 lifted so buttons stand out; white label 6.0 */
    --primary-hover: #4371a6;
    --primary-active: #335a87;
    --primary-text: #9dbde3;             /* links 9.0 / 8.3 */
    --primary-icon: #8fb3db;
    --primary-subtle: #203752;
    --primary-subtle-strong: #2a4769;
    --on-primary: #ffffff;

    --focus: #8fb3db;                    /* 8.0 / 7.4 */
    --focus-soft: rgba(143, 179, 219, .25);
    --disabled-bg: #222c38;

    --success: #6cc895;  --success-bg: #183326;  --success-dot: #4fb57d;
    --warning: #e9a15c;  --warning-bg: #352819;  --warning-dot: #d98a3d;  --warning-border: #553d24;
    --error: #f08a80;    --error-bg: #3a2124;    --error-hover: #a8352d;  --error-border: #5e3034;
    --error-solid: #b9382f; --on-error: #ffffff;
    --info: #9dbde3;     --info-bg: #203752;     --info-icon: #8fb3db;

    --shadow-sm: none;
    --shadow-md: 0 0 0 1px var(--border-strong), 0 8px 24px rgba(5, 9, 14, .28);
    --shadow-lg: 0 0 0 1px var(--border-strong), 0 16px 48px rgba(5, 9, 14, .4);
    --shadow-pop: var(--shadow-md);

    --toast-bg: #26364a; --toast-text: #eef3f7; --toast-muted: #aebfd1;

    --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ba4ac' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  }
}

/* higher contrast on request: stronger dividers, no light grays */
@media (prefers-contrast: more) {
  :root, :root[data-theme] { --text-muted: var(--text-secondary); --text-subtle: var(--text-secondary); --border: var(--border-strong); --border-strong: var(--border-input); }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: var(--font); font-size: var(--fs); line-height: 1.45; color: var(--text-primary); background: var(--background); -webkit-font-smoothing: antialiased; }
html { background: var(--background); scrollbar-color: var(--border-strong) transparent; }
a { color: var(--primary-text); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
code, .mono { font-family: var(--mono); font-size: .92em; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* inside scroll containers an outer ring would be clipped: draw it inside */
.table-scroll :focus-visible, .ov-body :focus-visible, .nav :focus-visible { outline-offset: -2px; }
.field :focus-visible { outline-offset: 2px; }
svg { flex: none; }

/* =========================================================== shell */
.app { display: flex; min-height: 100vh; }
.sidebar { width: var(--side-w); flex: 0 0 var(--side-w); background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 40; }
.brand { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s4) var(--s3); color: var(--text-primary); }
.brand:hover { text-decoration: none; }
.brand img { width: 28px; height: 28px; border-radius: 7px; }
.brand b { display: block; font-size: 14px; font-weight: 600; line-height: 1.2; }
.brand small { display: block; font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.3; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nav { padding: var(--s2) var(--s3) var(--s4); flex: 1; }
.nav-sec { margin-top: var(--s4); }
.nav-sec:first-child { margin-top: 0; }
.nav-label { padding: 0 var(--s2) var(--s1); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-subtle); }
.nav-row { position: relative; display: flex; align-items: center; }
.nav-link { flex: 1; display: flex; align-items: center; gap: 10px; height: var(--row-h); padding: 0 var(--s2); border-radius: var(--r); color: var(--text-secondary); font-weight: 500; min-width: 0; transition: background .12s, color .12s; }
.nav-link svg { width: 16px; height: 16px; color: var(--text-muted); }
.nav-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-link:hover { background: var(--surface-muted); color: var(--text-primary); text-decoration: none; }
.nav-link.active { background: var(--selected); color: var(--primary-text); font-weight: 600; }
.nav-link.active svg { color: var(--primary-icon); }
.nav-link .count { margin-left: auto; }
.nav-add { position: absolute; right: 4px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: var(--r-sm); color: var(--text-muted); opacity: 0; transition: opacity .12s; }
.nav-add svg { width: 14px; height: 14px; }
.nav-row:hover .nav-add, .nav-add:focus-visible { opacity: 1; }
.nav-add:hover { background: var(--surface-elevated); color: var(--primary-text); box-shadow: 0 0 0 1px var(--border-strong); }
@media (hover: none) { .nav-add { opacity: 1; } }

.side-foot { padding: var(--s3); border-top: 1px solid var(--border); display: grid; gap: var(--s2); }
.conn { display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s2); font-size: var(--fs-sm); color: var(--text-secondary); min-width: 0; }
.conn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-subtle); flex: none; }
.dot.on { background: var(--success-dot); box-shadow: 0 0 0 3px var(--success-bg); }
.dot.warn { background: var(--warning-dot); }
.conn-sub { padding: 0 var(--s2); font-size: var(--fs-sm); color: var(--text-muted); }
.side-foot .btn { width: 100%; justify-content: center; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.view { flex: 1; padding: var(--s5) var(--s6) var(--s7); min-width: 0; }
.topbar { display: none; }
.scrim { display: none; }

/* =========================================================== page header */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s5); flex-wrap: wrap; }
.page-head .ph-text { min-width: 0; }
.crumb { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--s1); }
.crumb svg { width: 14px; height: 14px; }
.crumb:hover { color: var(--text-primary); text-decoration: none; }
.page-head h1 { font-size: var(--fs-lg); font-weight: 600; line-height: 28px; letter-spacing: -.01em; display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.page-head .sub { color: var(--text-muted); margin-top: 2px; }
.ph-actions { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }

.section { margin-top: var(--s6); }
.section:first-child { margin-top: 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); flex-wrap: wrap; }
.section-head h2 { font-size: var(--fs-md); font-weight: 600; }
.section-head .desc { color: var(--text-muted); font-size: var(--fs); }
.section-head .aside { display: flex; align-items: center; gap: var(--s3); }
h3.sub-title { font-size: var(--fs); font-weight: 600; margin: var(--s5) 0 var(--s3); color: var(--text-primary); }
h3.sub-title:first-child { margin-top: 0; }

/* =========================================================== buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--h); padding: 0 var(--s3); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-primary); border-radius: var(--r); font-weight: 500; white-space: nowrap; cursor: pointer; position: relative; transition: background .12s, border-color .12s, color .12s, box-shadow .12s; text-decoration: none; box-shadow: var(--shadow-sm); }
.btn:hover { background: var(--hover); border-color: var(--border-input); text-decoration: none; }
.btn:active { background: var(--surface-muted); }
.btn svg { width: 16px; height: 16px; color: var(--text-muted); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn.primary svg { color: var(--on-primary); opacity: .9; }
.btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn.primary:active { background: var(--primary-active); border-color: var(--primary-active); }
.btn.danger { background: var(--error-solid); border-color: var(--error-solid); color: var(--on-error); }
.btn.danger svg { color: var(--on-error); }
.btn.danger:hover, .btn.danger:active { background: var(--error-hover); border-color: var(--error-hover); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-secondary); box-shadow: none; }
.btn.ghost:hover { background: var(--surface-muted); color: var(--text-primary); }
.btn.ghost.danger-text, .btn.danger-text { color: var(--error); }
.btn.danger-text svg { color: var(--error); }
.btn.ghost.danger-text:hover { background: var(--error-bg); }
/* every non-destructive button turns orange on hover; red buttons stay red */
.btn:not(.danger):not(.danger-text):hover { background: var(--hover-accent); border-color: var(--hover-accent); color: var(--on-hover-accent); }
.btn:not(.danger):not(.danger-text):active { background: var(--hover-accent-active); border-color: var(--hover-accent-active); color: var(--on-hover-accent); }
.btn:not(.danger):not(.danger-text):hover svg, .btn:not(.danger):not(.danger-text):active svg { color: var(--on-hover-accent); opacity: 1; }
.btn.icon { width: var(--h); min-width: var(--h); padding: 0; }
.btn.sm { height: var(--h-sm); padding: 0 var(--s2); font-size: var(--fs-sm); gap: 4px; }
.btn.sm svg { width: 14px; height: 14px; }
.btn.icon.sm { width: var(--h-sm); min-width: var(--h-sm); padding: 0; }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--disabled-bg); border-color: var(--disabled-bg); color: var(--text-disabled); box-shadow: none; cursor: not-allowed; pointer-events: none; }
.btn:disabled svg, .btn[aria-disabled="true"] svg { color: var(--text-disabled); opacity: 1; }
.btn.ghost:disabled, .btn.ghost[aria-disabled="true"] { background: transparent; border-color: transparent; }
.btn.is-busy { color: transparent !important; pointer-events: none; }
.btn.is-busy svg { visibility: hidden; }
.btn.is-busy::after { content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--text-muted); border-right-color: transparent; animation: spin .6s linear infinite; }
.btn.primary.is-busy::after { border-color: var(--on-primary); border-right-color: transparent; }
.btn.danger.is-busy::after { border-color: var(--on-error); border-right-color: transparent; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-group { display: inline-flex; gap: var(--s2); align-items: center; }

/* =========================================================== forms */
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s4); align-items: start; }
.fgrid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fgrid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fgrid .span-2 { grid-column: span 2; }
.fgrid .span-all { grid-column: 1 / -1; }
.form-narrow { max-width: 960px; }
.field { min-width: 0; }
.field > label, .field-label { display: flex; align-items: center; gap: var(--s1); font-size: var(--fs-sm); font-weight: 500; color: var(--text-secondary); margin-bottom: 6px; }
.field > label[title] { cursor: help; }
.req { color: var(--error); font-weight: 600; }
.field .hint { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--s1); }
.field .err-msg { font-size: var(--fs-sm); color: var(--error); margin-top: var(--s1); }
.field.check-field { padding-top: 22px; }
.field.check-field.flat { padding-top: 0; }
.field.check-field .hint { padding-left: 24px; }

.inp, .field input:not([type=checkbox]):not([type=radio]), .field select, .field textarea, .cell {
  width: 100%; height: var(--h); padding: 0 10px; background-color: var(--input-bg); border: 1px solid var(--border-input); border-radius: var(--r);
  transition: border-color .12s, box-shadow .12s; min-width: 0;
}
.field textarea { height: auto; min-height: 64px; padding: 7px 10px; resize: vertical; line-height: 1.45; }
.inp:hover, .field input:hover, .field select:hover, .field textarea:hover, .cell:hover { border-color: var(--text-subtle); }
.inp:focus, .field input:focus, .field select:focus, .field textarea:focus, .cell:focus { outline: none; border-color: var(--primary); box-shadow: var(--focus-halo); }
.field input[readonly], .field textarea[readonly], .cell[readonly] { background: var(--surface-secondary); color: var(--text-secondary); border-color: var(--border); }
.field input:disabled, .field select:disabled, .field textarea:disabled, .inp:disabled { background: var(--disabled-bg); color: var(--text-disabled); border-color: var(--border); cursor: not-allowed; }
.field input[readonly]:focus, .cell[readonly]:focus { box-shadow: none; border-color: var(--border-strong); }
/* date field: a text box that shows DD.MM.YYYY, a calendar button, and the browser's date picker kept out of sight */
.date-inp { position: relative; display: inline-flex; align-items: center; min-width: 0; }
.field .date-inp { display: flex; }
.date-inp > input[data-date] { flex: 1; min-width: 0; width: 132px; padding-right: 30px; font-variant-numeric: tabular-nums; }
.date-inp > .btn { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
.date-inp > .date-native, .field .date-inp > .date-native { position: absolute; right: 0; bottom: 0; width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; opacity: 0; pointer-events: none; }
td.edit .date-inp { display: flex; }
td.edit .date-inp > input[data-date] { width: 124px; }
.invalid, .field .invalid { border-color: var(--error) !important; }
.invalid:focus { box-shadow: 0 0 0 3px var(--error-bg) !important; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, select:-webkit-autofill {
  -webkit-text-fill-color: var(--text-primary); caret-color: var(--text-primary); -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset; transition: background-color 9999s; }
input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset, var(--focus-halo); }
::placeholder { color: var(--text-subtle); opacity: 1; }
select, .field select, select.inp, select.cell { appearance: none; -webkit-appearance: none; padding-right: 30px; cursor: pointer;
  background-image: var(--chev);
  background-repeat: no-repeat; background-position: right 8px center; background-size: 14px; }
input[type=number] { font-variant-numeric: tabular-nums; }

.check { display: inline-flex; align-items: center; gap: var(--s2); cursor: pointer; font-weight: 400; color: var(--text-primary); font-size: var(--fs); user-select: none; }
input[type=checkbox] { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); cursor: pointer; flex: none; }
input[type=checkbox]:disabled { cursor: not-allowed; }

/* toggle */
.switch { appearance: none; -webkit-appearance: none; width: 32px !important; height: 18px !important; border-radius: 9px; background: var(--border-input); position: relative; cursor: pointer; transition: background .15s; flex: none; margin: 0; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .15s var(--ease); }
.switch:checked { background: var(--primary); }
.switch:checked::after { transform: translateX(14px); }
.switch:focus-visible { outline-offset: 2px; }

/* search */
.search { position: relative; flex: 1 1 280px; max-width: 380px; min-width: 200px; }
.search svg { position: absolute; left: 10px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.search input { width: 100%; padding-left: 34px; }
.search input::-webkit-search-cancel-button { cursor: pointer; }

/* filter bar */
.filters { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s3); }
.filters .inp { width: auto; }
.filters .search .inp { width: 100%; }
.filters select.inp { min-width: 150px; }
.filters .spacer { flex: 1; }
.inline-field { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: var(--fs-sm); }
.inline-field input { width: 142px; }

/* segmented control */
.seg { display: inline-flex; padding: 2px; background: var(--surface-muted); border-radius: var(--r); gap: 2px; height: var(--h); }
.seg button { border: 0; background: transparent; padding: 0 var(--s3); border-radius: var(--r-sm); color: var(--text-secondary); font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.seg button:focus-visible { outline-offset: 0; }
.seg button:hover { color: var(--text-primary); }
.seg button[aria-pressed="true"] { background: var(--segment-selected); color: var(--text-primary); box-shadow: var(--shadow-sm); }

details.more { margin-top: var(--s4); }
details.more > summary { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; color: var(--text-secondary); font-weight: 500; list-style: none; user-select: none; border-radius: var(--r-sm); }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary svg { width: 14px; height: 14px; transition: transform .15s; }
details.more[open] > summary svg { transform: rotate(180deg); }
details.more > summary:hover { color: var(--text-primary); }
details.more > .fgrid { margin-top: var(--s4); }

/* =========================================================== badges */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px; border-radius: 10px; font-size: var(--fs-sm); font-weight: 500; line-height: 1; white-space: nowrap; background: var(--surface-muted); color: var(--text-secondary); vertical-align: middle; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.badge.plain::before { display: none; }
.badge.neutral::before { background: var(--text-subtle); }
.badge.accent { background: var(--info-bg); color: var(--info); }
.badge.accent::before { background: var(--primary-icon); opacity: 1; }
.badge.success { background: var(--success-bg); color: var(--success); }
.badge.success::before { background: var(--success-dot); opacity: 1; }
.badge.warning { background: var(--warning-bg); color: var(--warning); }
.badge.warning::before { background: var(--warning-dot); }
.badge.danger { background: var(--error-bg); color: var(--error); }
.badge.muted { background: transparent; color: var(--text-muted); padding-left: 0; }
h1 .badge { font-size: var(--fs-sm); font-weight: 500; letter-spacing: 0; }
.count { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px; font-size: var(--fs-xs); font-weight: 600; background: var(--surface-muted); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.count.danger { background: var(--error-solid); color: var(--on-error); }
.count.hl { background: var(--primary-subtle-strong); color: var(--primary-text); }
.nav-link.active .count:not(.danger):not(.hl) { background: var(--primary-subtle-strong); color: var(--primary-text); }

/* =========================================================== tables */
.table-block { min-width: 0; }
.table-bar { display: flex; align-items: center; gap: var(--s2); min-height: 32px; margin-bottom: var(--s2); }
.table-bar h2 { font-size: var(--fs-md); font-weight: 600; margin-right: var(--s2); }
.table-bar .tb-count { color: var(--text-muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.table-bar .spacer { flex: 1; }
.table-bar.selecting { background: var(--selected); border-radius: var(--r); padding: 0 var(--s1) 0 var(--s3); }
.table-bar.selecting .tb-count { color: var(--primary-text); font-weight: 600; font-size: var(--fs); }
/* column layout: drag a header, or use the Columns panel */
table.t th[draggable=true] { cursor: grab; }
table.t th.dragging { opacity: .55; background: var(--selected); color: var(--primary-text); }
table.t th.drop-before { box-shadow: inset 3px 0 0 var(--primary); }
table.t th.drop-after { box-shadow: inset -3px 0 0 var(--primary); }
.cols-panel { position: fixed; z-index: 70; width: 320px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); display: flex; flex-direction: column; background: var(--surface-elevated); border-radius: var(--r-lg); box-shadow: var(--shadow-pop), 0 0 0 1px var(--border); animation: fade .1s ease-out; }
.cols-panel:focus { outline: none; }
.cp-head { padding: var(--s3) var(--s3) var(--s2); font-weight: 600; }
.cp-head span { display: block; font-weight: 400; font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.cp-list { list-style: none; margin: 0; padding: 0 var(--s1); overflow-y: auto; }
.cp-list li { display: flex; align-items: center; gap: var(--s1); min-height: var(--row-h); padding: 0 2px 0 var(--s1); border-radius: var(--r-sm); }
.cp-list li:hover { background: var(--hover); }
.cp-list li.dragging { opacity: .55; background: var(--selected); }
.cp-list li.drop-before { box-shadow: inset 0 2px 0 var(--primary); }
.cp-list li.drop-after { box-shadow: inset 0 -2px 0 var(--primary); }
.cp-list .grip { display: inline-flex; width: 16px; flex: none; color: var(--text-subtle); cursor: grab; }
.cp-list .grip svg { width: 16px; height: 16px; }
.cp-list label.check { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s2); cursor: pointer; }
.cp-list label.check span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-list li.off label.check span { color: var(--text-muted); }
.cp-list .cp-note { flex: none; font-size: var(--fs-xs); color: var(--text-subtle); white-space: nowrap; }
.cp-list li.fixed { padding-right: var(--s3); }
.cp-list li.fixed .grip { cursor: default; }
.cp-foot { padding: var(--s2); border-top: 1px solid var(--border); margin-top: var(--s1); }
.table-scroll { overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.table-scroll.capped { max-height: 420px; }
.table-scroll.tall { max-height: calc(100vh - 230px); }
table.t { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
table.t th { position: sticky; top: 0; z-index: 1; background: var(--surface-secondary); text-align: left; font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); height: 34px; padding: 0 var(--s3); border-bottom: 1px solid var(--border); white-space: nowrap; user-select: none; }
table.t th.sortable { cursor: pointer; }
table.t th.sortable:hover { color: var(--text-primary); }
table.t th .sort { display: inline-block; width: 10px; margin-left: 2px; color: var(--primary); font-size: 10px; }
table.t td { height: 40px; padding: 0 var(--s3); border-bottom: 1px solid var(--border); white-space: nowrap; max-width: 360px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
table.t tbody tr:last-child td { border-bottom: 0; }
table.t .num { text-align: right; }
table.t td.mono { font-family: var(--mono); font-size: 12px; }
table.t td.muted { color: var(--text-muted); }
table.t td.strong { font-weight: 600; }
table.t td.wrap { white-space: normal; min-width: 220px; }
table.t tbody tr.clickable { cursor: pointer; }
table.t tbody tr.clickable:hover td { background: var(--surface-secondary); }
table.t tbody tr:focus-visible { outline: none; }
table.t tbody tr:focus-visible td { background: var(--selected); }
table.t tbody tr:focus-visible td { box-shadow: inset 0 2px 0 var(--focus), inset 0 -2px 0 var(--focus); }
table.t tbody tr:focus-visible td:first-child { box-shadow: inset 2px 0 0 var(--focus), inset 0 2px 0 var(--focus), inset 0 -2px 0 var(--focus); }
table.t tbody tr:focus-visible td:last-child { box-shadow: inset -2px 0 0 var(--focus), inset 0 2px 0 var(--focus), inset 0 -2px 0 var(--focus); }
table.t tbody tr.sel td { background: var(--selected); }
table.t tbody tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--primary-icon); }
table.t tbody tr.checked td { background: var(--selected); }
table.t tbody tr.st-grey td { color: var(--text-muted); }
table.t tbody tr.st-err td:first-child { box-shadow: inset 2px 0 0 var(--error); }
table.t th.cb, table.t td.cb { width: 40px; padding: 0 0 0 var(--s3); text-overflow: clip; }
table.t th.act, table.t td.act { width: 44px; padding: 0 var(--s1); text-align: right; overflow: visible; }
table.t td.act .btn { color: var(--text-muted); }
table.t td.empty-cell { height: auto; padding: 0; white-space: normal; cursor: default; background: transparent !important; }
table.t td.edit { padding: 0 var(--s1); overflow: visible; }
table.t td.edit:first-child { padding-left: var(--s2); }
.cell { height: 30px; padding: 0 8px; border-color: transparent; background: transparent; border-radius: var(--r-sm); }
.cell:hover { border-color: var(--border-input); background: var(--input-bg); }
.cell:focus { background: var(--input-bg); }
.cell.num { text-align: right; }
.cell[readonly] { border-color: transparent !important; background: transparent; }
.cell.over { border-color: var(--error) !important; }
.cell-msg { color: var(--error); font-size: var(--fs-sm); text-align: right; padding: 0 var(--s2) var(--s1); }
.editable td { height: 38px; }
.editable tbody tr:hover td { background: var(--surface-secondary); }
.dir { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); }
.dir svg { width: 14px; height: 14px; color: var(--text-muted); }
.qty-pos { color: var(--success); font-weight: 600; }
.qty-neg { color: var(--error); font-weight: 600; }
.progress-txt { color: var(--text-muted); }
.progress-txt b { color: var(--text-primary); font-weight: 500; }
.table-foot { display: flex; align-items: center; justify-content: center; gap: var(--s3); padding: var(--s3) 0 0; color: var(--text-muted); font-size: var(--fs-sm); }
.under-table { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s2); color: var(--text-muted); font-size: var(--fs-sm); flex-wrap: wrap; }

/* =========================================================== empty state */
.empty { text-align: center; padding: var(--s7) var(--s4); color: var(--text-muted); }
.empty svg { width: 24px; height: 24px; color: var(--text-subtle); margin-bottom: var(--s2); }
.empty .e-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.empty .e-text { margin-top: var(--s1); max-width: 420px; margin-left: auto; margin-right: auto; }
.empty .btn { margin-top: var(--s4); }
.empty.compact { padding: var(--s5) var(--s4); }

/* =========================================================== tabs */
.tabs { display: flex; gap: var(--s5); border-bottom: 1px solid var(--border); margin-bottom: var(--s5); overflow-x: auto; scrollbar-width: none; }
.tabs button { border: 0; background: none; padding: 0 0 10px; margin-bottom: -1px; color: var(--text-muted); font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; border-radius: 0; }
.tabs button:hover { color: var(--text-primary); }
.tabs button[aria-selected="true"] { color: var(--text-primary); border-bottom-color: var(--primary); }
.tabs button:focus-visible { outline-offset: -2px; border-radius: var(--r-sm); color: var(--primary-text); }

/* =========================================================== alerts */
.alert { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) var(--s4); border-radius: var(--r); background: var(--surface-secondary); color: var(--text-secondary); margin-bottom: var(--s5); border: 1px solid var(--border); }
.alert svg { width: 16px; height: 16px; margin-top: 1px; color: var(--text-muted); }
.alert b { color: var(--text-primary); font-weight: 600; }
.alert.warning { background: var(--warning-bg); border-color: var(--warning-border); }
.alert.warning svg { color: var(--warning-dot); }
.alert.danger { background: var(--error-bg); border-color: var(--error-border); }
.alert.danger svg { color: var(--error); }
.alert.info { background: var(--info-bg); border-color: var(--primary-subtle-strong); }
.alert.info svg { color: var(--info-icon); }
.alert .a-body { flex: 1; min-width: 0; }

/* =========================================================== dashboard */
.metrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 0 var(--s5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); margin-bottom: var(--s6); }
.metric { padding: var(--s4) var(--s4) var(--s4) var(--s5); border-left: 1px solid var(--border); min-width: 0; }
.metric:first-child { border-left: 0; padding-left: 0; }
.metric a.m-main { display: block; color: inherit; }
.metric a.m-main:hover { text-decoration: none; }
.metric a.m-main:hover .m-label { color: var(--primary-text); }
.metric .m-label { font-size: var(--fs-sm); color: var(--text-muted); font-weight: 500; display: flex; align-items: center; gap: 6px; }
.metric .m-val { font-size: 24px; font-weight: 600; line-height: 32px; margin-top: 2px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.metric .m-sub { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 2px; }
.metric .m-sub a { color: var(--text-muted); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 2px; }
.metric .m-sub a:hover { color: var(--text-primary); }
.metric.warn .m-val { color: var(--warning); }
.metric.danger .m-val { color: var(--error); }
.metric .m-sub .bad { color: var(--error); font-weight: 500; }
.attention { list-style: none; margin: 0 0 var(--s6); padding: 0; display: grid; gap: var(--s2); }
.attention li a { display: flex; align-items: center; gap: var(--s3); padding: 10px var(--s4); border-radius: var(--r); border: 1px solid var(--border); background: var(--surface); color: var(--text-primary); box-shadow: var(--shadow-sm); }
.attention li a:hover { background: var(--hover); border-color: var(--border-strong); text-decoration: none; }
.attention li svg { width: 16px; height: 16px; }
.attention li.danger svg { color: var(--error); }
.attention li.warn svg { color: var(--warning-dot); }
.attention li .go { margin-left: auto; color: var(--text-muted); font-size: var(--fs-sm); display: inline-flex; align-items: center; gap: 2px; }
.attention li .go svg { width: 14px; height: 14px; color: var(--text-muted); }
.all-clear { display: flex; align-items: center; gap: var(--s2); color: var(--text-muted); margin: calc(-1 * var(--s3)) 0 var(--s6); }
.all-clear svg { width: 16px; height: 16px; color: var(--success-dot); }

/* =========================================================== order page */
.addr-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); }
.actionbar { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; gap: var(--s3); margin: var(--s6) calc(-1 * var(--s6)) calc(-1 * var(--s7)); padding: var(--s3) var(--s6); background: var(--background-translucent); border-top: 1px solid var(--border); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.actionbar .ab-info { color: var(--text-muted); font-size: var(--fs-sm); display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; min-width: 0; }
.actionbar .spacer { flex: 1; }
.unsaved { display: inline-flex; align-items: center; gap: 6px; color: var(--warning); font-weight: 500; }
.unsaved::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--warning-dot); }
.add-line { margin-top: var(--s2); }
.kbd-hint { color: var(--text-subtle); font-size: var(--fs-sm); }

/* =========================================================== settings */
.set-sec { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--s6); padding: var(--s5) 0; border-top: 1px solid var(--border); max-width: 1100px; }
.set-sec:first-of-type { border-top: 0; padding-top: 0; }
.set-sec > div:last-child { max-width: 720px; }
.set-sec .desc code { white-space: nowrap; }
.set-sec h2 { font-size: var(--fs); font-weight: 600; }
.set-sec .desc { color: var(--text-muted); margin-top: var(--s1); font-size: var(--fs); }
.toggle-row { display: flex; align-items: flex-start; gap: var(--s3); cursor: pointer; }
.toggle-row .t-text b { display: block; font-weight: 500; }
.toggle-row .t-text span { display: block; color: var(--text-muted); font-size: var(--fs-sm); }
.test-res { display: inline-flex; align-items: center; gap: var(--s2); color: var(--text-muted); font-size: var(--fs-sm); min-width: 0; }

/* =========================================================== flow / misc */
.kv { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 6px var(--s4); margin-bottom: var(--s4); }
.kv dt { color: var(--text-muted); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.drop { display: flex; flex-direction: column; align-items: center; gap: var(--s1); padding: var(--s7) var(--s4); border: 1.5px dashed var(--border-input); border-radius: var(--r-lg); background: var(--surface); color: var(--text-muted); text-align: center; cursor: pointer; transition: background .12s, border-color .12s; }
.drop svg { width: 24px; height: 24px; color: var(--primary-icon); margin-bottom: var(--s1); }
.drop b { color: var(--text-primary); font-weight: 600; }
.drop:hover { border-color: var(--primary); background: var(--hover); }
.drop.over { background: var(--selected); border-color: var(--primary); }
.drop:focus-within { box-shadow: var(--focus-halo); }
.two-col-text { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); margin-top: var(--s4); color: var(--text-muted); }
.two-col-text b { display: block; color: var(--text-primary); font-weight: 600; margin-bottom: 2px; }
.footnote { color: var(--text-muted); font-size: var(--fs-sm); margin-top: var(--s4); }
.muted { color: var(--text-muted); }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }
.loading { padding: var(--s7); color: var(--text-muted); text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* =========================================================== overlays */
.overlay { position: fixed; inset: 0; z-index: 60; background: var(--scrim); display: flex; justify-content: center; align-items: flex-start; padding: 10vh var(--s4) var(--s4); animation: fade .12s ease-out; }
@keyframes fade { from { opacity: 0; } }
.modal { background: var(--surface-elevated); border-radius: var(--r-lg); width: min(560px, 100%); max-height: 80vh; display: flex; flex-direction: column; box-shadow: var(--shadow-panel); animation: pop .16s var(--ease); }
.modal.lg { width: min(980px, 100%); }
.modal.sm { width: min(440px, 100%); }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(.99); } }
.ov-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s4) var(--s4) var(--s4) var(--s5); }
.ov-head h2 { font-size: var(--fs-md); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-head .ov-sub { color: var(--text-muted); font-size: var(--fs-sm); margin-top: 2px; }
.ov-body { padding: 0 var(--s5) var(--s5); overflow: auto; flex: 1; }
.ov-foot { display: flex; justify-content: flex-end; align-items: center; gap: var(--s2); padding: var(--s3) var(--s5); border-top: 1px solid var(--border); background: var(--surface-secondary); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.ov-foot .spacer { flex: 1; }
.confirm-text { white-space: pre-line; color: var(--text-secondary); }

.overlay.side { justify-content: flex-end; align-items: stretch; padding: 0; }
.drawer { background: var(--surface-elevated); width: min(640px, 100%); height: 100%; display: flex; flex-direction: column; box-shadow: var(--shadow-panel); animation: slide .2s var(--ease); }
.drawer.wide { width: min(760px, 100%); }
.drawer .ov-head { border-bottom: 1px solid var(--border); padding: var(--s4) var(--s4) var(--s4) var(--s5); }
.drawer .ov-body { padding: var(--s5); }
.drawer .ov-foot { border-radius: 0; }
.drawer .tabs { margin: calc(-1 * var(--s5)) calc(-1 * var(--s5)) var(--s5); padding: 0 var(--s5); }
.drawer .tabs button { padding-top: var(--s3); }
@keyframes slide { from { transform: translateX(24px); opacity: 0; } }

pre.xml { margin: 0; font-family: var(--mono); font-size: 12px; line-height: 1.55; white-space: pre; color: var(--text-secondary); background: var(--surface-secondary); border: 1px solid var(--border); padding: var(--s3) var(--s4); border-radius: var(--r); overflow: auto; max-height: 56vh; }
pre.xml .t { color: var(--primary-text); }
pre.xml .v { color: var(--text-primary); font-weight: 600; }
pre.xml .d { color: var(--text-subtle); }

/* dropdown menu */
.menu { position: fixed; z-index: 70; min-width: 220px; max-width: 320px; background: var(--surface-elevated); border-radius: var(--r-lg); box-shadow: var(--shadow-pop), 0 0 0 1px var(--border); padding: var(--s1); animation: fade .1s ease-out; }
.menu button { display: flex; align-items: center; gap: 10px; width: 100%; height: var(--row-h); padding: 0 var(--s3) 0 10px; border: 0; background: none; border-radius: var(--r-sm); text-align: left; cursor: pointer; color: var(--text-primary); white-space: nowrap; }
.menu button svg { width: 16px; height: 16px; color: var(--text-muted); }
.menu button:hover, .menu button:focus-visible { background: var(--hover); outline-offset: -2px; }
.menu button.danger { color: var(--error); }
.menu button.danger svg { color: var(--error); }
.menu button.danger:hover, .menu button.danger:focus-visible { background: var(--error-bg); }
.menu button:disabled, .menu button:disabled svg { color: var(--text-disabled); cursor: not-allowed; background: none; }
.menu hr { border: 0; border-top: 1px solid var(--border); margin: var(--s1) calc(-1 * var(--s1)); }
.menu .m-head { padding: 6px 10px 4px; font-size: var(--fs-xs); color: var(--text-muted); font-weight: 600; }

/* toasts */
#toasts { position: fixed; right: var(--s5); bottom: var(--s5); display: flex; flex-direction: column; gap: var(--s2); z-index: 80; width: min(400px, calc(100vw - 32px)); pointer-events: none; }
body:has(.actionbar) #toasts { bottom: 72px; }
.toast { display: flex; gap: var(--s3); align-items: flex-start; background: var(--toast-bg); color: var(--toast-text); padding: var(--s3) var(--s4); border-radius: var(--r-lg); box-shadow: var(--shadow-md), 0 0 0 1px rgba(255, 255, 255, .06); white-space: pre-line; pointer-events: auto; animation: toast-in .18s var(--ease); }
.toast svg { width: 16px; height: 16px; margin-top: 1px; color: var(--toast-ok); }
.toast.err svg { color: var(--toast-err); }
.toast.info svg { color: var(--toast-info); }
.toast .t-msg { flex: 1; min-width: 0; }
.toast button { background: none; border: 0; color: var(--toast-muted); border-radius: var(--r-sm); cursor: pointer; padding: 0; margin-left: var(--s1); line-height: 0; }
.toast button svg { color: inherit; margin: 0; }
.toast.out { opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

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

/* =========================================================== laptop */
@media (max-width: 1280px) {
  .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .metric:nth-child(4) { border-left: 0; padding-left: 0; }
  .metric:nth-child(n+4) { border-top: 1px solid var(--border); }
}

/* =========================================================== tablet */
@media (max-width: 960px) {
  .topbar { display: flex; align-items: center; gap: var(--s2); position: sticky; top: 0; z-index: 30; height: 52px; padding: 0 var(--s3); background: var(--background-translucent); border-bottom: 1px solid var(--border); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .topbar .tb-brand { display: flex; align-items: center; gap: var(--s2); font-weight: 600; color: var(--text-primary); min-width: 0; }
  .topbar .tb-brand img { width: 24px; height: 24px; border-radius: 6px; }
  .topbar .spacer { flex: 1; }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; height: 100%; transform: translateX(-100%); transition: transform .2s var(--ease); box-shadow: none; width: 272px; }
  .sidebar.show { transform: none; box-shadow: var(--shadow-panel); }
  .scrim.show { display: block; position: fixed; inset: 0; background: var(--scrim); z-index: 35; animation: fade .12s; }
  .nav-add { opacity: 1; }
  .view { padding: var(--s5) var(--s4) var(--s7); }
  .actionbar { margin: var(--s6) calc(-1 * var(--s4)) calc(-1 * var(--s7)); padding: var(--s3) var(--s4); }
  .set-sec { grid-template-columns: 1fr; gap: var(--s4); }
  .addr-cols { grid-template-columns: 1fr; gap: var(--s5); }
  .table-scroll.tall { max-height: none; }
}

/* =========================================================== phone */
@media (max-width: 640px) {
  :root { --h: 36px; }
  .page-head { align-items: stretch; flex-direction: column; margin-bottom: var(--s4); position: relative; }
  .ph-actions:has(> .btn.icon:only-child) { position: absolute; top: 0; right: 0; }
  .page-head:has(.ph-actions > .btn.icon:only-child) .ph-text { padding-right: 44px; }
  .hide-sm { display: none; }
  .inline-field { flex: 1 1 40%; white-space: nowrap; }
  .ph-actions .btn:not(.icon) { flex: 1; }
  .ph-actions .btn.hide-sm { display: none; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric, .metric:first-child { padding: var(--s3) 0 var(--s3) var(--s3); border-left: 1px solid var(--border); border-top: 1px solid var(--border); }
  .metric:nth-child(odd) { border-left: 0; padding-left: 0; }
  .metric:nth-child(-n+2) { border-top: 0; }
  .metric .m-val { font-size: 20px; line-height: 28px; }
  .fgrid, .fgrid.cols-2, .fgrid.cols-3 { grid-template-columns: 1fr; }
  .fgrid .span-2 { grid-column: auto; }
  .field.check-field { padding-top: 0; }
  .search { max-width: none; flex-basis: 100%; }
  .filters > select.inp, .filters .seg { flex: 1 1 100%; }
  .filters > select.inp ~ select.inp { flex: 1 1 40%; }
  .inline-field { flex: 1; }
  .inline-field input { width: 100%; }
  .two-col-text { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 1fr; gap: 0; }
  .kv dd { margin-bottom: var(--s2); }
  .actionbar { flex-wrap: wrap; }
  .actionbar .ab-info { width: 100%; }
  .actionbar .spacer { display: none; }
  .actionbar .btn-group { width: 100%; }
  .actionbar .btn-group .btn:not(.icon) { flex: 1; }
  .modal { max-height: 88vh; }
  .overlay:not(.side) { padding: var(--s4) var(--s2); align-items: flex-end; }
  .ov-foot { flex-wrap: wrap; }
  .ov-foot .btn { flex: 1; }
  .ov-foot .spacer { display: none; }
  #toasts { right: var(--s4); bottom: var(--s4); }
  body:has(.actionbar) #toasts { bottom: 120px; }

  /* tables become stacked rows */
  .table-scroll.cards { max-height: none; overflow: visible; padding: 0 var(--s3); }
  .cards table.t tbody tr:last-child { border-bottom: 0; }
  .metrics { padding: 0 var(--s4); }
  .table-scroll.editable-wrap { border-left: 0; border-right: 0; border-radius: 0; }
  .cards table.t, .cards table.t tbody, .cards table.t tr, .cards table.t td { display: block; width: 100%; }
  .cards table.t thead { display: none; }
  .cards table.t tbody tr { position: relative; display: flex; flex-direction: column; padding: var(--s3) 44px var(--s3) 0; border-bottom: 1px solid var(--border); }
  .cards table.t td.primary { order: -1; }
  .cards table.t tbody tr.has-cb { padding-left: 32px; }
  .cards table.t td { height: auto; padding: 1px 0; border: 0; max-width: none; white-space: normal; display: flex; gap: var(--s3); justify-content: space-between; text-align: right; font-size: var(--fs); }
  .cards table.t td::before { content: attr(data-label); color: var(--text-muted); text-align: left; flex: none; }
  .cards table.t td.primary { font-size: 14px; font-weight: 600; text-align: left; justify-content: flex-start; padding-bottom: var(--s1); }
  .cards table.t td.primary::before, .cards table.t td.cb::before, .cards table.t td.act::before, .cards table.t td.empty-cell::before { display: none; }
  .cards table.t td:empty, .cards table.t td.blank { display: none; }
  .cards table.t td.cb { position: absolute; left: 0; top: var(--s3); width: auto; padding: 2px 0 0; }
  .cards table.t td.act { position: absolute; right: 0; top: var(--s2); width: auto; }
  .cards table.t td.num { text-align: right; }
  .cards table.t tbody tr.sel td, .cards table.t tbody tr.clickable:hover td { background: none; }
  .cards table.t tbody tr td:first-child { box-shadow: none !important; }
  .cards table.t tbody tr.sel { background: var(--selected); }
  .cards table.t td.empty-cell { display: block; text-align: center; }
  .editable-wrap { margin: 0 calc(-1 * var(--s4)); padding: 0 var(--s4); }
}

/* =========================================================== theme switch */
.seg.theme-seg { display: flex; width: 100%; height: 30px; }
.seg.theme-seg button { flex: 1 1 0; min-width: 0; padding: 0 4px; gap: 5px; font-size: var(--fs-sm); color: var(--text-muted); }
.seg.theme-seg button:hover { color: var(--text-primary); }
.seg.theme-seg button[aria-pressed="true"] { color: var(--text-primary); }
.seg.theme-seg svg { width: 14px; height: 14px; }
.seg.theme-seg button[aria-pressed="true"] svg { color: var(--primary-text); }

/* =========================================================== touch screens: 44px targets (after the phone block on purpose) */
@media (pointer: coarse) {
  :root { --h: 44px; --h-sm: 44px; --row-h: 44px; }
  .nav-add { width: 40px; height: 40px; }
  .seg, .seg.theme-seg { height: calc(var(--h) + 4px); }
  .seg.theme-seg button { min-height: 44px; }
  .cell { height: 40px; }
  .tabs button { min-height: 44px; }
  input[type=checkbox] { width: 20px; height: 20px; }
  .switch { transform: scale(1.25); margin: 0 4px; }
  .toast button { min-width: 44px; min-height: 44px; display: grid; place-items: center; margin: -14px -14px -14px 0; }
}

/* =========================================================== Windows High Contrast / forced colours */
@media (forced-colors: active) {
  :focus-visible { outline: 2px solid CanvasText; }
  .btn.primary, .badge, .count { forced-color-adjust: auto; border: 1px solid CanvasText; }
  table.t tbody tr:focus-visible td { outline: 2px solid CanvasText; }
}

/* =========================================================== plans, paywall & billing (tokens only → Day + Night) */
.banners { display: grid; gap: var(--s2); padding: var(--s4) var(--s6) 0; }
.banners:empty { display: none; }
.banner { display: flex; align-items: center; gap: var(--s3); padding: 10px var(--s4); border-radius: var(--r); border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); }
.banner > svg { width: 16px; height: 16px; flex: none; color: var(--info-icon); }
.banner b { color: var(--text-primary); font-weight: 600; }
.banner .b-text { flex: 1; min-width: 0; }
.banner .b-actions { display: flex; gap: var(--s2); align-items: center; flex: none; }
.banner.info { background: var(--info-bg); border-color: var(--primary-subtle-strong); }
.banner.info.quiet { background: var(--surface); border-color: var(--border); }
.banner.warning { background: var(--warning-bg); border-color: var(--warning-border); }
.banner.warning > svg { color: var(--warning-dot); }

.plan-badge { display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 6px; margin-left: 6px; border-radius: 9px; background: var(--primary-subtle); color: var(--primary-text); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em; vertical-align: middle; white-space: nowrap; }
.plan-badge svg { width: 11px; height: 11px; }
.btn .plan-badge { margin-left: 2px; }
.btn.primary .plan-badge { background: rgba(255, 255, 255, .18); color: var(--on-primary); }
.btn:not(.danger):not(.danger-text):hover .plan-badge { background: rgba(255, 255, 255, .2); color: var(--on-hover-accent); }
.link-btn { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font: inherit; color: var(--primary-text); cursor: pointer; text-decoration: underline; text-decoration-color: var(--primary-subtle-strong); text-underline-offset: 2px; }
.link-btn svg { width: 13px; height: 13px; flex: none; }
.link-btn:hover { color: var(--text-primary); text-decoration-color: currentColor; }

.upsell p { margin: 0 0 var(--s3); color: var(--text-secondary); }
.upsell-price { padding: var(--s3); border-radius: var(--r); background: var(--surface-secondary); border: 1px solid var(--border); }
.upsell-price b { color: var(--text-primary); }
.upsell-list, .plan-features { list-style: none; padding: 0; margin: 0 0 var(--s3); display: grid; gap: 8px; }
.upsell-list li, .plan-features li { display: flex; gap: var(--s2); align-items: flex-start; }
.upsell-list svg, .plan-features svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--success-dot); }

.meter-row { margin-bottom: var(--s4); }
.meter-text { margin-bottom: 6px; color: var(--text-secondary); }
.meter-text b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.meter { height: 8px; border-radius: 4px; background: var(--surface-muted); overflow: hidden; }
.meter span { display: block; height: 100%; border-radius: 4px; background: var(--primary); }
.meter.warn span { background: var(--warning-dot); }
.meter.reached span { background: var(--hover-accent); }

/* pricing */
.pricing { max-width: 1120px; margin: 0 auto; }
.pricing-head { text-align: center; margin: var(--s5) 0; }
.pricing-head h1 { font-size: 28px; line-height: 36px; font-weight: 650; letter-spacing: -.02em; }
.pricing-head .sub { max-width: 620px; margin: var(--s2) auto 0; color: var(--text-muted); font-size: var(--fs-md); }
.pricing-controls { display: flex; justify-content: center; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.interval-seg button { gap: 8px; }
.save-pill { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 9px; background: var(--success-bg); color: var(--success); font-size: var(--fs-xs); font-weight: 600; }
.cur-pick { display: inline-flex; align-items: center; gap: var(--s2); color: var(--text-muted); font-size: var(--fs-sm); }
.cur-pick select { height: var(--h); padding-left: 10px; border: 1px solid var(--border-input); border-radius: var(--r); background-color: var(--input-bg); color: var(--text-primary); }
.cur-pick select:disabled { background-color: var(--disabled-bg); color: var(--text-secondary); cursor: not-allowed; }
.vat-note { margin-top: var(--s3); text-align: center; color: var(--text-secondary); font-size: var(--fs-sm); }
.vat-note b { color: var(--text-primary); }
.pricing-note { display: flex; justify-content: center; align-items: center; gap: var(--s2); max-width: 720px; margin: var(--s2) auto 0; text-align: center; color: var(--text-secondary); font-size: var(--fs-sm); }
.pricing-note svg { width: 16px; height: 16px; flex: none; color: var(--info-icon); }
.pricing-note b { color: var(--text-primary); }
.plan-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); margin-top: var(--s6); align-items: stretch; }
.plan-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: var(--s5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.plan-card.recommended { border: 2px solid var(--primary); padding: calc(var(--s5) - 1px); box-shadow: var(--shadow-md); }
.plan-card.highlight { box-shadow: 0 0 0 3px var(--focus-soft), var(--shadow-md); }
.plan-flag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 12px; background: var(--primary); color: var(--on-primary); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
.plan-flag svg { width: 13px; height: 13px; }
.plan-card h3 { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-md); font-weight: 600; }
.plan-tag { margin-top: 2px; color: var(--text-muted); min-height: 2.9em; }
.plan-price { display: flex; align-items: baseline; gap: 6px; margin-top: var(--s4); }
.plan-price .amount { font-size: 34px; line-height: 40px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.plan-price .per { color: var(--text-muted); }
.plan-price-sub { min-height: 2.9em; margin-top: 2px; color: var(--text-secondary); font-size: var(--fs-sm); }
.plan-price-sub b { color: var(--success); font-weight: 600; }
.plan-cta { width: 100%; height: 40px; margin-top: var(--s4); }
.plan-features { margin: var(--s5) 0 0; padding-top: var(--s4); border-top: 1px solid var(--border); }
.plan-features b { color: var(--text-primary); }
.plan-features li.soon svg { color: var(--text-subtle); }
.plan-features .badge { height: 18px; margin-left: 4px; font-size: var(--fs-xs); }
.trust { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s4); margin: var(--s6) 0 0; padding: var(--s5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.trust li { display: flex; align-items: flex-start; gap: var(--s3); }
.trust svg { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--primary-icon); }
.trust b { display: block; color: var(--text-primary); font-weight: 600; }
.trust span { color: var(--text-muted); font-size: var(--fs-sm); }
.compare-wrap, .faq { margin-top: var(--s7); }
.compare-wrap h2, .faq h2 { margin-bottom: var(--s4); text-align: center; font-size: 20px; font-weight: 600; }
.compare-scroll { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
table.compare { width: 100%; min-width: 520px; border-collapse: collapse; }
.compare { table-layout: fixed; }
.compare thead th:first-child { width: 40%; }
.plan-soon { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px dashed var(--border); color: var(--text-muted); font-size: var(--fs-sm); }
.plan-soon b { color: var(--text-secondary); font-weight: 600; }
.compare th, .compare td { padding: 10px var(--s4); border-bottom: 1px solid var(--border); text-align: center; }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare thead th { background: var(--surface-secondary); color: var(--text-primary); font-weight: 600; }
.compare tbody th { text-align: left; font-weight: 400; color: var(--text-secondary); }
.compare .yes svg { width: 18px; height: 18px; vertical-align: middle; color: var(--success-dot); }
.compare .no { color: var(--text-subtle); }
.faq { max-width: 760px; margin-left: auto; margin-right: auto; }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { display: flex; justify-content: space-between; gap: var(--s3); padding: var(--s4) 0; list-style: none; cursor: pointer; color: var(--text-primary); font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; color: var(--text-muted); font-size: 18px; font-weight: 400; line-height: 1; }
.faq details[open] summary::after { content: "\2013"; }
.faq summary:focus-visible { outline-offset: 2px; border-radius: var(--r-sm); }
.faq details p { max-width: 680px; padding-bottom: var(--s4); color: var(--text-secondary); }
.faq-more { margin-top: var(--s4); text-align: center; }
.legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2) var(--s5); margin: var(--s7) 0 var(--s4); font-size: var(--fs-sm); }
.legal-links a { color: var(--text-muted); }

/* billing page */
.bill-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s4); }
.bill-card { min-width: 0; padding: var(--s5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.bc-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.bc-head h2 { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.plan-now-name { font-size: 22px; line-height: 28px; font-weight: 650; letter-spacing: -.01em; }
.plan-now-price { margin-top: 2px; color: var(--text-secondary); }
.bc-text { margin-top: var(--s3); color: var(--text-secondary); }
.bc-pm { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s3); color: var(--text-secondary); }
.bc-pm svg { width: 16px; height: 16px; color: var(--text-muted); }
.bc-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.bc-fine, .fine { margin-top: var(--s3); color: var(--text-muted); font-size: var(--fs-sm); }
details.history summary { padding: var(--s2) 0; cursor: pointer; font-weight: 600; }
.dev-tools { padding: var(--s5); background: var(--surface-secondary); border: 1px dashed var(--border-strong); border-radius: var(--r-lg); }
.dev-btns { margin-top: var(--s4); flex-wrap: wrap; }
.dev-mail { margin-bottom: var(--s4); }
.dev-mail pre { margin-top: 6px; white-space: pre-wrap; max-height: 220px; }

/* sidebar account */
.acct { display: flex; align-items: center; gap: var(--s2); min-width: 0; margin-top: var(--s1); padding-top: var(--s3); border-top: 1px solid var(--border); }
.acct-avatar { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--primary-subtle-strong); color: var(--primary-text); font-size: var(--fs-sm); font-weight: 600; }
.acct-text { flex: 1; min-width: 0; line-height: 1.3; }
.acct-text b, .acct-text small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-text b { font-size: var(--fs-sm); font-weight: 600; }
.acct-text small { font-size: var(--fs-xs); color: var(--text-muted); }
.side-foot .acct .btn { width: var(--h-sm); }

/* login / signup and the public pricing page: no sidebar */
body.auth-mode .sidebar, body.auth-mode .topbar, body.auth-mode .scrim, body.auth-mode .banners,
body.public-mode .sidebar, body.public-mode .topbar, body.public-mode .scrim, body.public-mode .banners { display: none !important; }
body.auth-mode .view { display: flex; flex-direction: column; align-items: center; padding-top: 8vh; }
.auth-card { width: min(420px, 100%); padding: var(--s6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-md); }
.auth-brand { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s5); color: var(--text-primary); font-weight: 600; }
.auth-brand:hover { text-decoration: none; }
.auth-brand img { width: 28px; height: 28px; border-radius: 7px; }
.auth-card h1 { font-size: var(--fs-lg); font-weight: 600; }
.auth-card .sub { margin: 4px 0 var(--s4); color: var(--text-muted); }
.auth-form { display: grid; gap: var(--s4); }
.auth-row { display: flex; justify-content: flex-end; margin-top: calc(-1 * var(--s2)); font-size: var(--fs-sm); }
.auth-submit { width: 100%; height: 40px; }
.auth-foot { margin-top: var(--s4); text-align: center; color: var(--text-muted); }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 44px !important; }
.pw-toggle { position: absolute; top: 50%; right: 2px; transform: translateY(-50%); }
.check.terms { align-items: flex-start; line-height: 1.45; }
.check.terms input { flex: none; margin-top: 2px; }
#auth-msg .alert { margin-bottom: var(--s4); }
body.public-mode .view { padding-top: 0; }
.pub-top { display: flex; align-items: center; gap: var(--s2); max-width: 1120px; height: 64px; margin: 0 auto; }
.pub-top .spacer { flex: 1; }
.pub-brand { display: flex; align-items: center; gap: var(--s2); color: var(--text-primary); font-size: var(--fs-md); font-weight: 600; }
.pub-brand:hover { text-decoration: none; }
.pub-brand img { width: 28px; height: 28px; border-radius: 7px; }
.legal-page { max-width: 720px; margin: 0 auto; padding: var(--s7) var(--s4); }
.legal-page h1 { margin: var(--s4) 0; font-size: 24px; }
.legal-back { color: var(--text-muted); }
.legal-placeholder { padding: var(--s4); background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--r); color: var(--text-secondary); }

@media (max-width: 960px) {
  .banners { padding: var(--s3) var(--s4) 0; }
  .plan-cards { grid-template-columns: 1fr; gap: var(--s6); max-width: 480px; margin-left: auto; margin-right: auto; }
  .plan-tag, .plan-price-sub { min-height: 0; }
  .bill-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .banner { flex-wrap: wrap; }
  .banner .b-actions { width: 100%; padding-left: 28px; }
  .banner .b-actions .btn:not(.icon) { flex: 1; }
  .pricing-head h1 { font-size: 24px; line-height: 30px; }
  table.compare { min-width: 0; font-size: var(--fs-sm); }
  .compare th, .compare td { padding: 8px 6px; }
  .bc-actions .btn { flex: 1 1 100%; }
  .auth-card { padding: var(--s5); }
  body.auth-mode .view { padding-top: var(--s5); }
  .pub-top { height: 56px; }
  .pub-top .btn.ghost { padding: 0 var(--s2); }
}
@media (pointer: coarse) {
  .link-btn { min-height: 44px; }
  .plan-cta, .auth-submit { height: 48px; }
  .faq summary { min-height: 44px; align-items: center; }
  .legal-links a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* =========================================================== users, roles and permissions */
.no-access { display: grid; place-items: center; min-height: 50vh; }
.no-access .empty { max-width: 520px; }
.no-access .empty svg { width: 32px; height: 32px; }
.no-access .empty .e-title { font-size: var(--fs-lg); }
.no-access .empty .btn { margin-top: var(--s4); }
.metric div.m-main { display: block; }
.perm-grid { max-height: none; }
.perm-grid table.t th { height: auto; padding-top: var(--s2); padding-bottom: var(--s2); vertical-align: top; white-space: normal; }
.perm-grid table.t td { height: 38px; white-space: normal; max-width: none; }
.perm-grid .pg-c { text-align: center; width: 64px; }
.perm-grid.editable .pg-c { width: 84px; }
.perm-grid td.pg-c .check { justify-content: center; }
.perm-grid .pg-na { color: var(--text-subtle); }
.perm-grid .pg-special { min-width: 190px; }
.perm-grid td.pg-special .check { margin-right: var(--s4); }
.perm-grid .pg-row { width: 150px; white-space: nowrap; }
.perm-grid input[type=checkbox]:disabled { cursor: default; }
/* "Select all" / "Clear all": under a column's heading, and at the end of a row */
.pg-all { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 4px; font-weight: 400; }
.pg-all .link-btn { font-size: var(--fs-xs); min-height: 0; white-space: nowrap; }
th.pg-special .pg-all, td.pg-row .pg-all { flex-direction: row; align-items: baseline; gap: var(--s3); }
td.pg-row .pg-all { margin-top: 0; }
.role-assigned { margin-top: var(--s3); color: var(--text-secondary); }
.role-assigned a, #r-grid td a:not(.btn), .page-head .sub a { text-decoration: underline; }
.actionbar > .btn.danger-text { flex: none; }
.restore-row { display: flex; align-items: flex-start; gap: var(--s2); white-space: normal; }
.restore-row input { margin-top: 3px; flex: none; }
.restore-row span { color: var(--text-secondary); }
.restore-row b { color: var(--text-primary); }
[data-role-about] { margin-top: calc(-1 * var(--s2)); }
.dialog-form > * + * { margin-top: var(--s3); }
.dialog-form > .hint { margin-top: var(--s1); }
.auth-form input[readonly] { background: var(--surface-secondary); color: var(--text-secondary); }
@media (max-width: 640px) {
  .perm-grid .pg-c, .perm-grid.editable .pg-c { width: auto; }
  .perm-grid table.t th, .perm-grid table.t td { padding-left: var(--s2); padding-right: var(--s2); }
  .pg-all .link-btn { min-height: 28px; }
}

/* =========================================================== print: always light, content only */
@media print {
  .sidebar, .topbar, .scrim, .actionbar, .banners, .dev-tools, #toasts, .ph-actions, .filters, .table-bar .btn, td.act, th.act, td.cb, th.cb { display: none !important; }
  .app { display: block; }
  .view { padding: 0; }
  html, body { background: #fff; }
  .table-scroll, .table-scroll.tall, .table-scroll.capped { max-height: none; overflow: visible; }
  table.t th { position: static; }
  a { color: inherit; }
}

/* Sidebar menu: orange on hover */
.nav-link:hover,
.nav-link.active:hover {
  background: var(--hover-accent, #c2410c);
  color: var(--on-hover-accent, #ffffff);
}
.nav-link:hover svg,
.nav-link.active:hover svg {
  color: var(--on-hover-accent, #ffffff);
}

/* Light mode: pure white page background instead of light gray */
:root[data-theme="light"] {
  --background: #ffffff;
  --background-translucent: rgba(255, 255, 255, .92);
}