/* The interface, as approved in `docs/mockup/app.html`.
 *
 * Taken from the mockup rather than rewritten: the mockup is the specification, and a
 * stylesheet retyped from a screenshot is a different design that happens to resemble it.
 * Commissioner for the interface, IBM Plex Mono for anything read off a drawing, Inter
 * ExtraBold for the wordmark and nothing else.
 */

  :root {
    color-scheme: light;
    --bg: #F5F6F8;
    --surface: #FFFFFF;
    --border: #E4E7EC;
    --border-strong: #CDD3DC;
    --text: #101828;
    --text-2: #667085;
    --accent: #2563EB;
    --accent-hover: #1D4ED8;
    --accent-soft: #EFF4FF;
    --on-accent: #FFFFFF;
    --danger: #D92D20;
    --warn: #B54708;
    --warn-soft: #FEF0C7;
    --ok: #027A48;
    --ok-soft: #E7F6EF;
    --hover: rgba(16, 24, 40, 0.033);
    --ring: rgba(37, 99, 235, 0.28);
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
    --shadow-lg: 0 13px 35px rgba(16, 24, 40, 0.18);
    --toast-bg: #101828;
    --toast-text: #FFFFFF;
    --backdrop: rgba(16, 24, 40, 0.45);
    --grid-line: rgba(16, 24, 40, 0.05);
    /* Card edges and table rules are decoration; the outline of a control someone has to
       find and click is not. WCAG 1.4.11 asks 3:1 for the second kind, and --border-strong
       measures 1.51:1 — fine as a divider, not as the only thing saying "this is a field". */
    --border-control: #858E9C;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --bg: #0F1317;
      --surface: #171C22;
      --border: #272E38;
      --border-strong: #37404D;
      --text: #F2F4F7;
      --text-2: #98A2B3;
      --accent: #5D99FF;
      --accent-hover: #6AA1FF;
      --accent-soft: rgba(76, 141, 255, 0.14);
      --on-accent: #0B1526;
      --danger: #F97066;
      --warn: #F0B24B;
      --warn-soft: rgba(240, 178, 75, 0.16);
      --ok: #57C08A;
      --ok-soft: rgba(87, 192, 138, 0.15);
      --hover: rgba(255, 255, 255, 0.04);
      --ring: rgba(76, 141, 255, 0.35);
      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
      --shadow-lg: 0 13px 35px rgba(0, 0, 0, 0.5);
      --toast-bg: #F2F4F7;
      --toast-text: #101828;
      --backdrop: rgba(0, 0, 0, 0.55);
      --grid-line: rgba(255, 255, 255, 0.05);
      --border-control: #626C7C;
    }
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0F1317;
    --surface: #171C22;
    --border: #272E38;
    --border-strong: #37404D;
    --text: #F2F4F7;
    --text-2: #98A2B3;
    --accent: #5D99FF;
    --accent-hover: #6AA1FF;
    --accent-soft: rgba(76, 141, 255, 0.14);
    --on-accent: #0B1526;
    --danger: #F97066;
    --warn: #F0B24B;
    --warn-soft: rgba(240, 178, 75, 0.16);
    --ok: #57C08A;
    --ok-soft: rgba(87, 192, 138, 0.15);
    --hover: rgba(255, 255, 255, 0.04);
    --ring: rgba(76, 141, 255, 0.35);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 13px 35px rgba(0, 0, 0, 0.5);
    --toast-bg: #F2F4F7;
    --toast-text: #101828;
    --backdrop: rgba(0, 0, 0, 0.55);
    --grid-line: rgba(255, 255, 255, 0.05);
    --border-control: #626C7C;
  }

  * { box-sizing: border-box; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "Commissioner", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 15.5px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    /* clip (not hidden) so the page can never scroll sideways while position:sticky still works */
    overflow-x: clip;
  }
  button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
  button:disabled { opacity: 0.5; cursor: not-allowed; }
  input, select { font: inherit; color: inherit; }
  button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible, tr:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  /* A ring drawn outside the element is ink that an ancestor with overflow can clip, and two of
     them do: the tab strip scrolls horizontally, and every table sits in a card with
     overflow:hidden. Both cases draw the indicator inside the element instead — an inset shadow
     for rows, because a table row cannot carry an outline radius cleanly. */
  #projBody tr:focus-visible,
  #tbody tr:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--accent);
  }
  .num { font-variant-numeric: tabular-nums; }
  [hidden] { display: none !important; }

  /* ===== shared ===== */
  /* the wordmark keeps Inter ExtraBold — the logotype is settled and does not follow the UI */
  .wordmark {
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -0.03em;
    color: var(--text);
    white-space: nowrap;
    line-height: 1;
  }
  .wordmark .wm-dot { color: var(--accent); }
  .lang-seg {
    display: inline-flex;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
  }
  .lang-seg button {
    padding: 4.5px 13px;
    border-radius: 6.5px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-2);
  }
  .lang-seg button[aria-pressed="true"] {
    font-weight: 600;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-sm);
  }
  /* a transparent edge so a filled button ends up exactly as tall as the outlined one beside it */
  .btn {
    border: 1px solid transparent;
    border-radius: 9px;
    padding: 10px 17.5px;
    font-size: 15px;
    font-weight: 500;
  }
  .btn-primary { background: var(--accent); color: var(--on-accent); }
  .btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
  /* opacity on a filled button keeps the fill and drops the label to 2.16:1; a disabled
     export should read as unavailable, not as the thing to press */
  .btn-primary:disabled {
    background: var(--bg);
    color: var(--text-2);
    border: 1px solid var(--border-control);
    opacity: 1;
  }
  .btn-ghost { color: var(--text-2); }
  .btn-ghost:hover { color: var(--text); background: var(--hover); }
  .btn-outline { border: 1px solid var(--border-control); color: var(--text); background: var(--surface); }
  .btn-outline:hover { background: var(--hover); }
  .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 15.5px;
    box-shadow: var(--shadow-sm);
  }
  .pill {
    display: inline-block;
    border-radius: 1099px;
    padding: 2px 11px 3px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
  }
  .pill-info { background: var(--accent-soft); color: var(--accent); }
  .pill-neutral { background: var(--bg); border: 1px solid var(--border); color: var(--text-2); }
  .pill-ok { background: var(--ok-soft); color: var(--ok); }
  .pill-review { background: var(--warn-soft); color: var(--warn); }
  button.pill-review { cursor: pointer; }
  button.pill-review:hover { filter: brightness(0.96); text-decoration: underline; }

  /* ===== gate ===== */
  .gate-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26.5px;
    position: relative;
  }
  .gate-lang { position: absolute; top: 22px; right: 22px; }
  .gate-card .wordmark { display: block; font-size: 29.5px; margin-bottom: 13px; }
  .gate-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 17.5px;
    box-shadow: var(--shadow-sm);
    padding: 44px 37.5px 35px;
    width: min(451px, 94vw);
    text-align: center;
  }
  .gate-sub { color: var(--text); font-size: 16.5px; font-weight: 500; margin: 0 0 28.5px; }
  .gate-input {
    text-align: center;
    font-size: 18.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 14.5px 15.5px;
    caret-color: var(--accent);
  }
  .gate-input::placeholder { font-weight: 500; letter-spacing: 0.08em; color: var(--text-2); }
  .gate-err { color: var(--danger); font-size: 14px; min-height: 18.5px; margin: 11px 0 4.5px; font-weight: 500; }
  .gate-btn { width: 100%; margin-top: 9px; padding: 11px; }
  .gate-hint { color: var(--text-2); font-size: 13px; margin-top: 17.5px; }
  @keyframes shake { 25% { transform: translateX(-5.5px); } 75% { transform: translateX(5.5px); } }
  .shake { animation: shake 0.16s linear 2; }

  /* ===== app chrome ===== */
  .topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: baseline;
    gap: 24px;
    padding: 13px 26.5px;
    position: sticky;
    top: 0;
    z-index: 30;
  }
  /* Equal baselines are not equal-looking: the wordmark's ascender reaches 13.3px above the
     baseline against the tabs' 10.8px cap, so the mark carries more mass upward and the tabs
     read as sunken. The correction aligns CAP centres — 1.26px, split between the two — and
     deliberately ignores descenders: "Projektai" has a j and "Katalogas" does not, so centring
     on the inked box would move the row every time a label changed.
     The correction tracks the wordmark, which is the only one of the two that changes size
     across breakpoints, so it is restated wherever that size changes. */
  .topbar .wordmark { position: relative; top: 1px; }
  .topbar .topnav,
  .topbar .account { position: relative; top: -1px; }
  .topnav { display: flex; gap: 28.5px; }
  /* the active tab is marked by a rule under the word itself, so the padding is vertical only */
  .nav-link {
    position: relative;
    padding: 4.5px 0;
    border-radius: 0;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-2);
  }
  .nav-link:hover { color: var(--text); background: none; }
  .nav-link[aria-current="true"] { color: var(--accent); background: none; font-weight: 600; }
  .nav-link[aria-current="true"]::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -7.5px;
    height: 2px;
    border-radius: 1px;
    background: var(--accent);
  }
  .topbar-spacer { flex: 1; }
  /* stretched so the menu's 100% is the header's height and the panel hangs below the rule
     instead of covering it */
  .account { position: relative; align-self: stretch; display: flex; align-items: center; }
  .account-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14.5px;
    white-space: nowrap;
    padding: 6.5px 11px;
    border-radius: 9px;
  }
  .account-btn:hover { background: var(--hover); }
  .account-btn .user-name { font-weight: 500; }
  .account-btn[aria-expanded="true"] { background: var(--hover); }
  .account-menu {
    position: absolute;
    top: calc(100% + 6.5px);
    right: 0;
    min-width: 185px;
    max-width: min(286px, calc(100vw - 31px));
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 11px;
    box-shadow: var(--shadow-lg);
    padding: 5.5px;
    z-index: 35;
  }
  .account-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 11px;
    border-radius: 7.5px;
    font-size: 15px;
    color: var(--text);
  }
  .account-item:hover { background: var(--hover); }
  /* the export menu hangs under its button: two formats of one report, so they are one control
     rather than two buttons competing for the same corner */
  .export { position: relative; }
  .export-menu {
    position: absolute;
    top: calc(100% + 6.5px);
    right: 0;
    min-width: 255px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 11px;
    box-shadow: var(--shadow-lg);
    padding: 5.5px;
    z-index: 35;
  }
  .export-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 11px;
    border-radius: 7.5px;
    color: var(--text);
  }
  .export-item:hover { background: var(--hover); }
  .export-item b { display: block; font-size: 15px; font-weight: 500; }
  .export-item span { display: block; font-size: 13px; color: var(--text-2); margin-top: 1.5px; }

  /* the theme sits above the language for the same reason the language is here at all: it is
     set once and then left alone. Sun and moon rather than words, because the control shows the
     state it is in and no label is shorter than the icon. */
  .menu-theme-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 13px;
    padding: 6.5px 6.5px 6.5px 11px;
  }
  .theme-switch {
    position: relative;
    width: 52px;
    height: 28px;
    flex: none;
    border-radius: 999px;
    background: var(--bg);
    border: 1px solid var(--border);
    padding: 0;
  }
  .theme-switch:hover { border-color: var(--border-strong); }
  .theme-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    display: grid;
    place-items: center;
    /* a touch of overshoot, so the knob lands rather than stops */
    transition: transform 260ms cubic-bezier(0.34, 1.42, 0.52, 1);
  }
  .theme-switch[aria-checked="true"] .theme-knob { transform: translateX(24px); }
  .theme-ico {
    grid-area: 1 / 1;
    width: 13px;
    height: 13px;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: opacity 200ms ease, transform 260ms cubic-bezier(0.34, 1.42, 0.52, 1);
  }
  .theme-sun { stroke: var(--warn); }
  .theme-moon { stroke: var(--accent); opacity: 0; transform: rotate(-70deg) scale(0.4); }
  .theme-switch[aria-checked="true"] .theme-sun { opacity: 0; transform: rotate(70deg) scale(0.4); }
  .theme-switch[aria-checked="true"] .theme-moon { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .theme-knob, .theme-ico { transition: none; }
  }

  /* the language switcher lives in the account menu: it is set once and then never touched,
     so it does not earn permanent space in the header */
  .menu-lang-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 13px;
    padding: 4.5px 6.5px 10px 11px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 5.5px;
  }
  .menu-lang-row .menu-lbl { font-size: 14px; color: var(--text-2); }
  /* the tail padding is the selection bar's height plus its offset: it floats over the page,
     so the page has to end above it or the export button sits underneath */
  .container { max-width: 1276px; margin: 0 auto; padding: 33px 26.5px 143px; }
  .page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 15.5px; margin: 0 0 4.5px; }
  /* Plex Semibold already sets heavier than Inter, so the tracking stays modest */
  .page-title { font-size: 24px; font-weight: 600; margin: 0; letter-spacing: -0.02em; }
  .page-sub { color: var(--text-2); font-size: 15px; margin: 0 0 24px; }
  .backlink { color: var(--text-2); font-size: 14.5px; padding: 4.5px 9px; margin-left: -9px; border-radius: 6.5px; }
  .backlink:hover { color: var(--text); background: var(--hover); }

  /* ===== projects ===== */
  .ptable { width: 100%; border-collapse: collapse; }
  .ptable th {
    text-align: left;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-2);
    padding: 12px 17.5px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
  }
  .ptable td { padding: 15.5px 17.5px; border-top: 1px solid var(--border); font-size: 15px; vertical-align: top; }
  /* every other column is nowrap, so without a floor the name column absorbs all the
     squeeze and the subtitle breaks into eight lines */
  .ptable td:first-child { min-width: 242px; }
  .ptable tr:first-child td { border-top: none; }
  .ptable tbody tr { cursor: pointer; }
  .ptable tbody tr:hover { background: var(--hover); }
  .ptable .c-num { text-align: right; white-space: nowrap; }
  .pname { font-weight: 600; font-size: 15.5px; }
  .pdesc { color: var(--text-2); font-size: 14px; margin-top: 2px; }
  .warn-count { color: var(--warn); font-weight: 600; }
  .upload-card {
    margin-top: 17.5px;
    width: 100%;
    border: 1.5px dashed var(--border-control);
    border-radius: 15.5px;
    background: transparent;
    padding: 28.5px 22px;
    text-align: center;
    color: var(--text-2);
  }
  .upload-card:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
  .upload-card b { display: block; font-size: 15.5px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
  .upload-card:hover b { color: var(--accent); }
  /* 880px, not 720: at 760 the projects table is already wider than its card in Lithuanian,
     and the columns have to go before that, not after. */
  @media (max-width: 880px) { .hide-m { display: none; } }

  /* ===== detail ===== */
  /* Explicit counts rather than auto-fit: auto-fit found a five-column fit around 900px and
     orphaned the sixth card — the review counter — alone on the next row. Six cards divide
     evenly three ways, so those are the only three layouts allowed. */
  .stats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 13px;
    margin-bottom: 22px;
  }
  @media (max-width: 1040px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (max-width: 620px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .stat-card { padding: 14.5px 17.5px 12px; }
  .stat-card .lbl { font-size: 13px; color: var(--text-2); font-weight: 500; }
  .stat-card b { display: block; font-size: 22px; font-weight: 600; margin-top: 2px; }
  .stat-card.warned b { color: var(--warn); }

  .toolbar { display: flex; flex-wrap: wrap; gap: 11px; align-items: center; margin-bottom: 15.5px; }
  .search {
    flex: 1 1 220px;
    max-width: 374px;
    border: 1px solid var(--border-control);
    background: var(--surface);
    border-radius: 9px;
    padding: 9px 13px;
    font-size: 15px;
  }
  .search::placeholder,
  .text-input::placeholder { color: var(--text-2); }
  .search:focus { border-color: var(--accent); box-shadow: 0 0 0 4.5px var(--ring); outline: none; }
  .chip {
    border: 1px solid var(--border-control);
    background: var(--surface);
    border-radius: 1099px;
    padding: 6.5px 15.5px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-2);
  }
  .chip:hover { background: var(--hover); color: var(--text); }
  .chip[aria-pressed="true"] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
  }
  .toolbar-spacer { flex: 1; }

  .tablewrap { overflow-x: auto; }
  /* wide enough that the Norm column never has to break its label in two */
  .atable { border-collapse: collapse; width: 100%; min-width: 1122px; }
  .atable th {
    text-align: left;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-2);
    padding: 11px 15.5px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    background: var(--surface);
  }
  .atable td { padding: 12px 15.5px; border-top: 1px solid var(--border); font-size: 15px; vertical-align: top; }
  .atable tbody tr:first-child td { border-top: none; }
  .atable tbody tr:hover { background: var(--hover); }
  .atable tbody tr.selected { background: var(--accent-soft); }
  .atable .c-num { text-align: right; white-space: nowrap; }
  #tbody tr { cursor: pointer; }
  #tbody .check-cell { cursor: default; }
  #accessBody .mark-cell { white-space: normal; overflow-wrap: anywhere; }
  .atable td.mark-cell { font-size: 14.5px; }
  .mark-cell { font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 600; font-size: 14.5px; white-space: nowrap; }
  .note-cell { max-width: 286px; }
  .note-warn { color: var(--warn); font-size: 14px; display: inline-flex; gap: 6.5px; align-items: baseline; }
  button.note-warn { padding: 0; text-align: left; cursor: pointer; }
  button.note-warn:hover { text-decoration: underline; }
  .note-warn::before {
    content: "";
    width: 7.5px; height: 7.5px;
    border-radius: 50%;
    background: var(--warn);
    flex: none;
    position: relative;
    top: -1px;
  }
  .note-muted { color: var(--text-2); font-size: 14px; }
  /* the norm is the code itself, set in type — not a chip on a tinted ground */
  .norm-code { font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 600; font-size: 14.5px; }
  .norm-none { color: var(--text-2); font-size: 15px; white-space: nowrap; }
  .norm-review {
    padding: 0;
    text-align: left;
    white-space: nowrap;
    color: var(--warn);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
  }
  .norm-review:hover { text-decoration: underline; }
  .rate-sub { display: block; color: var(--text-2); font-size: 12.5px; margin-top: 2px; }
  /* the folded row hides the table header, so the hours figure carries its own unit there */
  .fold-unit { display: none; }
  .row-check {
    appearance: none;
    margin: 0;
    width: 17.5px; height: 17.5px;
    border: 1.5px solid var(--border-control);
    border-radius: 5px;
    background: var(--surface);
    cursor: pointer;
    position: relative;
    vertical-align: -3px;
  }
  .row-check:hover { border-color: var(--accent); }
  .row-check:checked { background: var(--accent); border-color: var(--accent); }
  .row-check:checked::after {
    content: "";
    position: absolute; inset: 3px 3px 5.5px 3px;
    border-left: 2px solid var(--on-accent);
    border-bottom: 2px solid var(--on-accent);
    transform: rotate(-45deg);
  }
  .table-foot { padding: 12px 17.5px; font-size: 14px; color: var(--text-2); border-top: 1px solid var(--border); }
  /* notices are marked by a rule in their own colour, not by a wash behind the text */
  .flow-note {
    margin-top: 17.5px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 13px;
    padding: 13px 17.5px;
    font-size: 14.5px;
    color: var(--text-2);
  }
  .flow-note b { font-weight: 600; color: var(--text); }
  .mismatch-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 11px 15.5px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--warn);
    border-radius: 13px;
    padding: 13px 13px 13px 17.5px;
    margin-bottom: 17.5px;
    font-size: 14.5px;
    color: var(--text);
  }
  .mismatch-banner .banner-txt { font-weight: 500; color: var(--warn); }
  .mismatch-banner .btn { margin-left: auto; }

  /* ===== review screen ===== */
  .review-head-right { display: flex; align-items: center; gap: 11px; margin-left: auto; }
  .review-progress { font-size: 14.5px; color: var(--text-2); }
  .review-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(330px, 1fr);
    gap: 17.5px;
    /* the drawing card matches the height of the taller right column */
    align-items: stretch;
  }
  .dwg-card { overflow: hidden; display: flex; flex-direction: column; }
  .dwg-toolbar {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 15.5px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
  }
  .dwg-toolbar .lbl { font-size: 14px; font-weight: 600; }
  .dwg-page { font-size: 14px; color: var(--text-2); }
  .dwg-zoom { display: flex; align-items: center; gap: 2px; margin-left: auto; }
  .dwg-zoom button {
    width: 31px; height: 31px;
    border-radius: 7.5px;
    border: 1px solid var(--border);
    font-size: 16.5px;
    line-height: 1;
    color: var(--text-2);
  }
  .dwg-zoom button:hover { background: var(--hover); color: var(--text); }
  .dwg-zoom span { font-size: 13px; color: var(--text-2); min-width: 48.5px; text-align: center; }
  .dwg-area {
    overflow: auto;
    flex: 1;
    min-height: 528px;
    display: flex;
    background:
      linear-gradient(var(--grid-line) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 26.5px 26.5px;
    background-color: var(--surface);
  }
  /* margin:auto centres the sheet while it fits, and collapses to 0 once it
     overflows — so a zoomed-in drawing still scrolls from the top-left */
  /* scale about the centre while the sheet still fits, and only pin to the corner once it
     genuinely overflows — otherwise zooming out strands it in the top-left */
  .dwg-scale { transform-origin: 50% 50%; width: 100%; max-width: 924px; margin: auto; }
  .dwg-scale.is-overflowing { transform-origin: 0 0; }
  .dwg-svg { display: block; width: 100%; height: auto; max-width: none; color: var(--text); }
  @media (max-width: 940px) {
    .review-grid { grid-template-columns: 1fr; }
    /* stacked: a fixed pane instead of filling, so it can't balloon above the panels */
    /* the sheet's height follows its width, so a fixed pane height clips it; cap instead */
    .dwg-area { flex: none; height: auto; max-height: 418px; min-height: 0; }
  }
  .dwg-main { stroke: currentColor; stroke-width: 1.4; fill: none; }
  .dwg-fill { fill: var(--accent-soft); stroke: currentColor; stroke-width: 1.4; }
  .dwg-dim { stroke: var(--text-2); stroke-width: 1; fill: none; }
  .dwg-dim-fill { fill: var(--text-2); }
  .dwg-txt { fill: var(--text-2); font-weight: 500; font-size: 12px; font-family: "IBM Plex Mono", ui-monospace, monospace; }
  .dwg-mark { fill: var(--text); font-size: 16.5px; font-weight: 600; font-family: "IBM Plex Mono", ui-monospace, monospace; }

  .side-card { padding: 17.5px; margin-bottom: 15.5px; }
  .side-card h3 { margin: 0 0 11px; font-size: 14.5px; font-weight: 600; }
  .kv { display: flex; justify-content: space-between; gap: 13px; padding: 5.5px 0; font-size: 14.5px; border-bottom: 1px solid var(--border); }
  .kv:last-of-type { border-bottom: none; }
  .kv span:first-child { color: var(--text-2); }
  .bom-table { width: 100%; border-collapse: collapse; margin-top: 4.5px; }
  .bom-table th { text-align: left; font-size: 12.5px; font-weight: 500; color: var(--text-2); padding: 5.5px 9px 5.5px 0; border-bottom: 1px solid var(--border); }
  .bom-table td { font-size: 14px; padding: 5.5px 9px 5.5px 0; border-top: 1px solid var(--border); }
  .bom-table .c-num { text-align: right; padding-right: 0; white-space: nowrap; }
  .why-card { background: var(--surface); border-left: 3px solid var(--warn); }
  .why-card h3 { color: var(--warn); }
  .why-card p { margin: 0; font-size: 14.5px; color: var(--text); }

  .cand {
    display: flex;
    align-items: baseline;
    gap: 11px;
    width: 100%;
    text-align: left;
    border: 1px solid var(--border-control);
    border-radius: 11px;
    padding: 11px 13px;
    margin-bottom: 9px;
    background: var(--surface);
  }
  .cand:hover { border-color: var(--accent); }
  .cand[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }
  .cand-radio {
    align-self: center;
    width: 16.5px; height: 16.5px;
    border: 1.5px solid var(--border-control);
    border-radius: 50%;
    flex: none;
    position: relative;
  }
  .cand[aria-pressed="true"] .cand-radio { border-color: var(--accent); }
  .cand[aria-pressed="true"] .cand-radio::after {
    content: "";
    position: absolute; inset: 3px;
    border-radius: 50%;
    background: var(--accent);
  }
  .cand-main { flex: 1; min-width: 0; }
  .cand-code { font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 600; font-size: 14.5px; }
  .cand-band { color: var(--text-2); font-size: 13px; margin-left: 6.5px; }
  .cand-name { color: var(--text-2); font-size: 12.5px; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cand-hours { text-align: right; flex: none; }
  .cand-hours b { display: block; font-size: 14.5px; }
  .cand-hours span { font-size: 12px; color: var(--text-2); }
  .cand-out { color: var(--warn); font-size: 12px; font-weight: 500; white-space: nowrap; }
  .cand-now { color: var(--ok); font-size: 12px; font-weight: 500; white-space: nowrap; }
  .cand-sug { color: var(--accent); font-size: 12px; font-weight: 500; white-space: nowrap; }
  /* a suggestion is advice with a name on it: it looks like the why-card it sits under, in the
     accent rather than the warning colour, because it is help and not a problem */
  .sug-card { border-left: 3px solid var(--accent); }
  .sug-card .sug-code { margin: 0 0 4px; }
  .sug-card .sug-code b { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 15px; }
  .sug-card .sug-code span { color: var(--text-2); font-size: 13px; margin-left: 8px; }
  .other-select {
    width: 100%;
    border: 1px solid var(--border-control);
    border-radius: 11px;
    padding: 10px 13px;
    background: var(--surface);
    font-size: 14.5px;
    color: var(--text);
    margin-bottom: 9px;
  }
  .weight-row { display: flex; align-items: center; gap: 11px; margin: 4.5px 0 11px; }
  .weight-row label { font-size: 14px; color: var(--text-2); }
  .weight-input {
    width: 121px;
    border: 1px solid var(--border-control);
    border-radius: 9px;
    padding: 7.5px 11px;
    background: var(--surface);
    font-size: 14.5px;
  }
  .weight-input:focus { border-color: var(--accent); box-shadow: 0 0 0 4.5px var(--ring); outline: none; }
  .review-actions { display: flex; gap: 9px; margin-top: 13px; flex-wrap: wrap; }
  .review-actions .btn { white-space: nowrap; flex: 1 1 auto; min-width: max-content; }

  .access-table { min-width: 620px; }
  .catalog-table { min-width: 720px; }

  /* Each of the three tables folds differently on a phone, because each is scanned for something
     different. The catalog is read code by code: the code and its name lead, and every weight
     band it has hangs underneath with its two rates labelled, since the header that named them
     is gone. */
  @media (max-width: 760px) {
    .catalog-table, .access-table { min-width: 0; }
    #viewCatalog .atable, #viewCatalog .atable tbody { display: block; }
    #viewCatalog .atable thead { display: none; }
    #viewCatalog .atable tbody tr {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      grid-template-areas:
        "code name name"
        "band e    f";
      column-gap: 11px;
      row-gap: 2px;
      padding: 10px 15.5px;
      border-top: 1px solid var(--border);
    }
    #viewCatalog .atable tbody td { display: block; padding: 0; border: none; text-align: left; }
    #viewCatalog .atable tbody td:empty { display: none; }
    #viewCatalog .atable tbody td:nth-child(1) { grid-area: code; }
    #viewCatalog .atable tbody td:nth-child(2) { grid-area: name; }
    #viewCatalog .atable tbody td:nth-child(3) { grid-area: band; color: var(--text-2); font-size: 14px; }
    #viewCatalog .atable tbody td:nth-child(4) { grid-area: e; font-size: 14px; }
    #viewCatalog .atable tbody td:nth-child(5) { grid-area: f; color: var(--text-2); font-size: 14px; }
    /* the column header is hidden here, so each rate carries the letter the subtitle explains */
    #viewCatalog .atable tbody td:nth-child(4)::before { content: "E "; color: var(--text-2); }
    #viewCatalog .atable tbody td:nth-child(5)::before { content: "F "; }
    /* a band that continues the code above it is not a new entry, so its rule is lighter */
    #viewCatalog .atable tbody tr:not(:has(td:nth-child(1) .cat-code)) { border-top-style: dotted; }

    /* The roster is scanned name by name, and the action has to stay reachable however long a
       name runs — so it gets a line of its own rather than a column that can be pushed out. */
    #viewAccess .atable, #viewAccess .atable tbody { display: block; }
    #viewAccess .atable thead { display: none; }
    #viewAccess .atable tbody tr {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas:
        "name  role"
        "dates dates"
        "act   act";
      column-gap: 11px;
      row-gap: 3px;
      padding: 11px 15.5px;
      border-top: 1px solid var(--border);
    }
    #viewAccess .atable tbody td { display: block; padding: 0; border: none; text-align: left; }
    #viewAccess .atable tbody td:nth-child(1) { grid-area: name; }
    #viewAccess .atable tbody td:nth-child(2) { grid-area: role; }
    #viewAccess .atable tbody td:nth-child(3),
    #viewAccess .atable tbody td:nth-child(4) { display: inline-block; color: var(--text-2); font-size: 13.5px; }
    #viewAccess .atable tbody td:nth-child(3) { grid-area: dates; }
    #viewAccess .atable tbody td:nth-child(4) { grid-area: dates; justify-self: end; }
    #viewAccess .atable tbody td:last-child { grid-area: act; justify-self: start; margin-top: 4px; }
  }

  /* ===== catalog ===== */
  .cat-code { font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 600; font-size: 14.5px; white-space: nowrap; }
  .cat-name { color: var(--text-2); font-size: 14px; }

  /* ===== modal ===== */
  .modal-wrap {
    position: fixed;
    inset: 0;
    background: var(--backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    padding: 22px;
  }
  .modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 17.5px;
    box-shadow: var(--shadow-lg);
    width: min(528px, 96vw);
    padding: 24px 24px 22px;
    max-height: 90vh;
    overflow-y: auto;
  }
  .modal-wide { width: min(704px, 96vw); }
  .modal-head { display: flex; align-items: center; margin-bottom: 17.5px; }
  .modal-head h2 { margin: 0; font-size: 17.5px; font-weight: 600; letter-spacing: -0.015em; }
  .modal-x {
    margin-left: auto;
    width: 33px; height: 33px;
    border-radius: 9px;
    color: var(--text-2);
    font-size: 17.5px;
    line-height: 1;
  }
  .modal-x:hover { background: var(--hover); color: var(--text); }
  .field { margin-bottom: 15.5px; }
  .field > label { display: block; font-size: 14px; font-weight: 500; color: var(--text-2); margin-bottom: 6.5px; }
  .text-input {
    width: 100%;
    border: 1px solid var(--border-control);
    border-radius: 9px;
    padding: 10px 13px;
    background: var(--surface);
    font-size: 15px;
  }
  .text-input:focus { border-color: var(--accent); box-shadow: 0 0 0 4.5px var(--ring); outline: none; }
  .file-pick {
    width: 100%;
    border: 1.5px dashed var(--border-control);
    border-radius: 11px;
    padding: 15.5px;
    text-align: center;
    color: var(--text-2);
    font-size: 14.5px;
  }
  .file-pick:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
  .file-chip {
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--border);
    border-radius: 11px;
    padding: 11px 13px;
    background: var(--bg);
    font-size: 14.5px;
  }
  .file-chip { min-width: 0; }
  .file-chip b { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .file-chip span, .file-chip button { flex: none; }
  .file-chip span { color: var(--text-2); font-size: 13px; }
  .file-chip button { margin-left: auto; color: var(--text-2); font-size: 15.5px; padding: 2px 6.5px; border-radius: 6.5px; }
  .file-chip button:hover { color: var(--danger); background: var(--hover); }
  .modal-actions { display: flex; flex-wrap: wrap; gap: 9px; justify-content: flex-end; margin-top: 20px; }
  .modal-sub { color: var(--text-2); font-size: 14px; margin: -6.5px 0 15.5px; }
  .cmp-table { width: 100%; border-collapse: collapse; min-width: 517px; }
  .cmp-table th {
    text-align: left;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-2);
    padding: 6.5px 11px 6.5px 0;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
  }
  .cmp-table td { font-size: 14.5px; padding: 11px 11px 11px 0; border-top: 1px solid var(--border); vertical-align: middle; }
  .cmp-table tbody tr:first-child td { border-top: none; }
  .cmp-table .c-num { text-align: right; white-space: nowrap; }
  .cmp-table th:last-child, .cmp-table td:last-child { padding-right: 0; }
  .cmp-delta { color: var(--warn); font-weight: 600; }
  .cmp-actions { display: flex; gap: 6.5px; justify-content: flex-end; flex-wrap: wrap; }
  .btn-sm { padding: 5.5px 11px; font-size: 13px; border-radius: 7.5px; white-space: nowrap; }
  .btn-danger { color: var(--danger); }
  .code-show {
    background: var(--accent-soft);
    border-radius: 13px;
    padding: 22px 17.5px;
    text-align: center;
    margin-bottom: 11px;
  }
  .code-show b { font-size: 25.5px; font-weight: 700; letter-spacing: 0.09em; color: var(--accent); }
  .code-once { color: var(--text-2); font-size: 14px; text-align: center; margin: 0; }
  .uprog { display: flex; align-items: center; gap: 11px; margin: 2px 0 17.5px; }
  .uprog-track {
    flex: 1;
    height: 10px;
    border-radius: 1099px;
    background: var(--bg);
    border: 1px solid var(--border);
    overflow: hidden;
  }
  .uprog-fill {
    height: 100%;
    width: 0%;
    border-radius: 1099px;
    background: var(--accent);
    transition: width 0.35s ease;
  }
  .uprog-pct { font-size: 13px; font-weight: 500; color: var(--text-2); min-width: 37.5px; text-align: right; }
  @media (prefers-reduced-motion: reduce) { .uprog-fill { transition: none; } }
  .steps { margin: 4.5px 0 0; }
  .step { display: flex; align-items: center; gap: 13px; padding: 10px 0; }
  .step-ico {
    width: 24px; height: 24px;
    border-radius: 50%;
    border: 2px solid var(--border-strong);
    flex: none;
    position: relative;
  }
  .step.running .step-ico {
    border-color: var(--accent);
    border-top-color: transparent;
    animation: spin 0.8s linear infinite;
  }
  .step.done .step-ico { border-color: var(--ok); background: var(--ok-soft); }
  .step.done .step-ico::after {
    content: "";
    position: absolute; inset: 5.5px 4.5px 7.5px 4.5px;
    border-left: 2px solid var(--ok);
    border-bottom: 2px solid var(--ok);
    transform: rotate(-45deg);
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) {
    .step.running .step-ico { animation: none; border-top-color: var(--accent); }
  }
  .step-main { flex: 1; font-size: 15px; }
  .step-note { font-size: 13px; color: var(--text-2); }
  .step.pending .step-main { color: var(--text-2); }
  .done-summary {
    background: var(--ok-soft);
    color: var(--text);
    border-radius: 11px;
    padding: 13px 15.5px;
    font-size: 14.5px;
    margin-top: 13px;
  }

  /* selection bar */
  .selbar {
    position: fixed;
    /* Centred by auto margins, not by left:50%. With left:50% and no right the available width
       is only half the viewport, so max-width never binds and the bar wraps to two rows on a
       phone — which is what put it over the export button and under the toast. */
    inset-inline: 0;
    margin-inline: auto;
    width: fit-content;
    bottom: 26.5px;
    transform: translateY(132px);
    visibility: hidden;
    /* keep it out of the tab order while it is off-screen, but let the slide-out finish first */
    transition: transform 0.22s ease, visibility 0s linear 0.22s;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 15.5px;
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 11px 17.5px;
    padding: 11px 13px;
    z-index: 40;
    max-width: min(94vw, 704px);
  }
  .selbar.on {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.22s ease, visibility 0s;
  }
  .selbar-info { font-size: 15px; min-width: 0; }
  .selbar-clear { font-size: 14px; color: var(--text-2); text-decoration: underline; }
  .selbar-clear:hover { color: var(--text); }
  @media (prefers-reduced-motion: reduce) {
    .selbar { transition: none; }
    .shake { animation: none; }
  }

  .toast {
    position: fixed;
    inset-inline: 0;
    margin-inline: auto;
    width: fit-content;
    /* Clears the selection bar's own row rather than sitting at a fixed height that the bar
       grows past. */
    bottom: calc(26.5px + 66.5px + 13px);
    background: var(--toast-bg);
    color: var(--toast-text);
    border-radius: 11px;
    box-shadow: var(--shadow-lg);
    padding: 11px 20px;
    font-size: 14.5px;
    z-index: 60;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    max-width: 90vw;
    text-align: center;
  }
  .toast.show { opacity: 1; }

  /* ===== responsive ===== */
  @media (max-width: 940px) {
    .review-head-right { margin-left: 0; flex-wrap: wrap; }
  }
  /* the header reflows earlier than the tables: the Lithuanian nav labels are long */
  @media (max-width: 820px) {
    /* row 1: wordmark + account. row 2: a real tab bar sitting on the header rule.
       Side padding matches .container so the wordmark and tabs line up with the page title. */
    /* The header stays one row all the way down. Stacking the tabs under the wordmark
       reads as two headers rather than one; the wordmark gives up its letters instead.
       Aligned on the baseline, not the box centre: the wordmark sets line-height 1 and the
       tabs 1.5, so centring their boxes leaves the two runs of text sitting at different
       heights — which is exactly what it looks like. */
    .topbar { gap: 16px; padding: 11px 26.5px; }
    .topbar .wordmark { font-size: 18.5px; top: 0.73px; }
    .topbar .topnav,
    .topbar .account { top: -0.73px; }
    .topnav {
      gap: 18px;
      min-width: 0;
      overflow-x: auto;
      /* a scrollbar gutter inside the tab strip would push the active rule off the header
         line, so it is suppressed in every engine, not just the WebKit one */
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .topnav::-webkit-scrollbar { height: 0; width: 0; display: none; }
    /* overflow-x on the strip forces overflow-y to compute to auto, which would clip a rule
       hanging below the button — so here the rule lives inside the button's own box */
    .nav-link { white-space: nowrap; padding: 9px 0; }
    .nav-link:focus-visible { outline-offset: -2px; }
    .nav-link[aria-current="true"]::after { bottom: 0; }
  }
  /* below this the full logotype no longer earns its width, so it falls back to the
     brand mark — the same "f." that the favicon uses */
  @media (max-width: 620px) {
    .topbar { gap: 13px; padding: 11px 16px; }
    .topbar .wordmark { font-size: 17.5px; top: 0.63px; }
    .topbar .wordmark .wm-rest { display: none; }
    .topbar .topnav,
    .topbar .account { top: -0.63px; }
    .account-btn { padding: 5.5px 8px; }
    /* the strip takes all the room between mark and account, so the fade below only ever
       lands on empty space until the tabs genuinely overflow — then it reads as "more" */
    .topbar-spacer { display: none; }
    .topnav {
      flex: 1 1 auto;
      gap: 15px;
    }
    /* The fade says "there is more this way". Applied unconditionally it lied: at 402px nothing
       overflows, yet the last tab still faded to 14%. JS adds the class only when the strip
       actually scrolls. */
    .topnav.is-scrollable {
      -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
      mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
    }
  }
  /* Nine columns cannot be read on a phone, and side-scrolling hides exactly the columns
     the row is scanned for — norm and hours. So each row folds into three lines:
     mark and title against the hours, then quantity and weight against the norm, then the note.

     Every selector here is anchored to #viewDetail. The .atable and .tablewrap classes are shared
     with the norms catalog and the access roster, which have five columns rather than nine — an
     unscoped fold hides their fourth column and prefixes their fifth with a "×", so a rate reads
     as a quantity. Scope this block, or it silently rewrites two other screens. */
  @media (max-width: 760px) {
    #viewDetail .tablewrap { overflow-x: visible; }
    #viewDetail .atable { min-width: 0; display: block; }
    #viewDetail .atable thead { display: none; }
    #viewDetail .atable tbody { display: block; }
    #viewDetail .atable tbody tr {
      display: grid;
      grid-template-columns: 24.5px 62px minmax(0, 1fr) auto;
      grid-template-areas:
        "chk mark  title hours"
        "chk qty   wt    norm"
        "note note note  note";
      column-gap: 11px;
      row-gap: 0;
      align-items: baseline;
      padding: 13px 15.5px;
      border-top: 1px solid var(--border);
    }
    #viewDetail .atable tbody tr:first-child { border-top: none; }
    #viewDetail .atable tbody td { display: block; padding: 0; border: none; }
    #viewDetail .atable tbody td:nth-child(1) { grid-area: chk; align-self: center; }
    #viewDetail .atable tbody td:nth-child(2) { grid-area: mark; }
    #viewDetail .atable tbody td:nth-child(3) { grid-area: title; }
    #viewDetail .atable tbody td:nth-child(4) { display: none; }
    #viewDetail .atable tbody td:nth-child(5) {
      grid-area: qty;
      color: var(--text-2);
      font-size: 14px;
      text-align: left;
    }
    #viewDetail .atable tbody td:nth-child(5)::before { content: "×"; }
    #viewDetail .atable tbody td:nth-child(6) {
      grid-area: wt;
      color: var(--text-2);
      font-size: 14px;
      text-align: left;
    }
    #viewDetail .atable tbody td:nth-child(6)::after { content: " kg"; }
    #viewDetail .atable tbody td:nth-child(7) { grid-area: norm; text-align: right; }
    #viewDetail .atable tbody td:nth-child(8) {
      grid-area: hours;
      text-align: right;
      font-size: 16.5px;
      font-weight: 600;
    }
    #viewDetail .atable tbody tr > td { margin-top: 3px; }
    #viewDetail .atable tbody tr > td:nth-child(-n + 4) { margin-top: 0; }
    #viewDetail .atable tbody td:nth-child(9) { grid-area: note; max-width: none; }
    #viewDetail .atable tbody td:nth-child(9):empty { display: none; }
    /* two lines deep is enough for the rate to sit beside the code instead of under it */
    #viewDetail .atable .rate-sub { display: inline; margin-left: 6.5px; }
    #viewDetail .atable .fold-unit { display: inline; font-size: 13px; font-weight: 400; color: var(--text-2); }
  }
  @media (max-width: 560px) {
    .search { flex: 1 1 100%; max-width: none; }
    .toolbar-spacer { display: none; }
    .toolbar .btn { flex: 1 1 auto; }
    .page-title { font-size: 21px; }
  }
  @media (max-width: 430px) {
    .container { padding: 24px 15.5px 132px; }
    .topbar { padding: 9px 15.5px 0; }
    .topbar .wordmark { font-size: 17.5px; }
    .topnav { gap: 12px; }
    .nav-link { font-size: 14.5px; }
    .gate-wrap { padding: 17.5px; }
    .gate-lang { top: 15.5px; right: 15.5px; }
    .gate-card { width: min(451px, 100%); padding: 33px 22px 26.5px; }
    .gate-card .wordmark { font-size: 26.5px; }
    .modal { padding: 20px 17.5px 17.5px; }
    .code-show b { font-size: 22px; letter-spacing: 0.06em; }
    .stat-card b { font-size: 20px; }
    .selbar { padding: 11px; gap: 9px 13px; }
  }