:root {
    --ink: #221B20;
    --ink-soft: #6B5D63;
    --paper: #FAF7F6;
    --surface: #FFFFFF;
    --line: #E7DEE0;
    --accent: #E8225A;
    --accent-soft: #FCE4EC;
    --accent-ink: #B5123F;
    --success: #2F8F5B;
    --success-soft: #E3F3EA;
    --warning: #B8791E;
    --warning-soft: #FBEEDC;
    --critical: #C23B3B;
    --critical-soft: #FBE7E7;
    --focus: #2F6FE8;
    --rail-bg: #2A2024;
    --rail-ink: #E9DEE1;
    --rail-ink-soft: #A38F94;
    --shadow: 0 1px 2px rgba(34,27,32,0.06), 0 6px 20px rgba(34,27,32,0.05);
    --font-display: Georgia, "Noto Serif", "Times New Roman", serif;
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --ink: #F3EAEC; --ink-soft: #C7B7BD; --paper: #1B1417; --surface: #241B1F;
      --line: #3A2C31; --accent: #FF5C86; --accent-soft: #3A1420; --accent-ink: #FF9CB6;
      --success: #4FBE85; --success-soft: #163326; --warning: #E0A544; --warning-soft: #3A2C13;
      --critical: #E36767; --critical-soft: #3A1919; --focus: #6FA0FF;
      --rail-bg: #140F11; --rail-ink: #EFE4E7; --rail-ink-soft: #8C7A80;
      --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 10px 30px rgba(0,0,0,0.35);
    }
  }
  :root[data-theme="dark"] {
    --ink: #F3EAEC; --ink-soft: #C7B7BD; --paper: #1B1417; --surface: #241B1F;
    --line: #3A2C31; --accent: #FF5C86; --accent-soft: #3A1420; --accent-ink: #FF9CB6;
    --success: #4FBE85; --success-soft: #163326; --warning: #E0A544; --warning-soft: #3A2C13;
    --critical: #E36767; --critical-soft: #3A1919; --focus: #6FA0FF;
    --rail-bg: #140F11; --rail-ink: #EFE4E7; --rail-ink-soft: #8C7A80;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 10px 30px rgba(0,0,0,0.35);
  }
  :root[data-theme="light"] {
    --ink: #221B20; --ink-soft: #6B5D63; --paper: #FAF7F6; --surface: #FFFFFF;
    --line: #E7DEE0; --accent: #E8225A; --accent-soft: #FCE4EC; --accent-ink: #B5123F;
    --success: #2F8F5B; --success-soft: #E3F3EA; --warning: #B8791E; --warning-soft: #FBEEDC;
    --critical: #C23B3B; --critical-soft: #FBE7E7; --focus: #2F6FE8;
    --rail-bg: #2A2024; --rail-ink: #E9DEE1; --rail-ink-soft: #A38F94;
    --shadow: 0 1px 2px rgba(34,27,32,0.06), 0 6px 20px rgba(34,27,32,0.05);
  }

  * { box-sizing: border-box; }
  body {
    margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body);
    font-size: 14.5px; line-height: 1.5; -webkit-font-smoothing: antialiased;
  }
  ::selection { background: var(--accent-soft); color: var(--accent-ink); }
  a { color: var(--accent-ink); }
  :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

  h1, h2, h3 { font-family: var(--font-display); font-weight: 600; text-wrap: balance; margin: 0; }
  .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

  /* ---- meta note: this artifact is a static, non-interactive preview of six
     admin screens from docs/superpowers/plans/2026-08-05-booking-admin-panel-plan.md,
     switched client-side. Sample data only. ---- */
  .meta-strip {
    background: var(--rail-bg); color: var(--rail-ink-soft); font-size: 11.5px;
    text-align: center; padding: 5px 12px; letter-spacing: 0.02em;
  }
  .meta-strip b { color: var(--rail-ink); font-weight: 600; }

  .app { display: grid; grid-template-columns: 216px 1fr; min-height: calc(100vh - 26px); }
  /* A grid column is as wide as its widest content by default: one wide table
     stretched the whole page sideways, so the scrollbar sat under the page
     instead of under the table. min-width: 0 keeps the column to the window. */
  .app > div { min-width: 0; }

  .rail {
    background: var(--rail-bg); color: var(--rail-ink); padding: 22px 14px;
    display: flex; flex-direction: column; gap: 4px;
  }
  .brand {
    display: flex; align-items: center; gap: 8px; padding: 0 8px 20px; margin-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .brand svg, .brand-logo { flex: none; width: 28px; height: 28px; object-fit: contain; }
  .login-logo { display: block; margin: 0 auto 10px; width: 44px; height: 44px; object-fit: contain; }
  .brand-text { font-family: var(--font-display); font-size: 16px; color: var(--rail-ink); }
  .brand-text small { display: block; font-family: var(--font-body); font-size: 10.5px; color: var(--rail-ink-soft); font-weight: 400; letter-spacing: 0.03em; }

  .rail-link {
    all: unset; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 7px;
    color: var(--rail-ink-soft); font-size: 13.5px; cursor: pointer; transition: background 0.12s, color 0.12s;
  }
  .rail-link:hover { background: rgba(255,255,255,0.06); color: var(--rail-ink); }
  .rail-link.active { background: var(--accent); color: #fff; }
  .rail-link .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.55; }
  .rail-link.active .dot { opacity: 1; }
  .rail-spacer { flex: 1; }
  .rail-foot { padding: 10px; font-size: 11.5px; color: var(--rail-ink-soft); border-top: 1px solid rgba(255,255,255,0.08); }
  /* .btn's default ink is the page's dark --ink, which on the dark rail was
     invisible until hover repainted the background. The rail needs its own
     light-on-dark pair. */
  .rail-foot .btn { color: var(--rail-ink); border-color: rgba(255,255,255,0.2); }
  .rail-foot .btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
  /* After the base .rail rules on purpose: same specificity, the later rule wins. */
  /* Phone: the rail turns into a top bar instead of disappearing — hidden, it
     left no way to get from Бронювання to Клієнти. */
  @media (max-width: 860px) {
    .app { grid-template-columns: 1fr; }
    .rail { flex-direction: row; flex-wrap: wrap; align-items: center; padding: 8px 10px; gap: 4px; }
    .rail .brand { padding: 0 6px 0 0; margin: 0; border: none; }
    .rail .brand-text small, .rail-spacer { display: none; }
    .rail-link { padding: 7px 9px; }
    .rail-foot { padding: 0; border: none; margin-left: auto; }
  }

  .screen { padding: 30px 34px 60px; max-width: 1240px; }
  @media (max-width: 600px) { .screen { padding: 18px 12px 40px; } }
  .screen-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
  .screen-head h1 { font-size: 25px; }
  .screen-head .sub { color: var(--ink-soft); font-size: 13px; margin-top: 3px; font-family: var(--font-body); }
  .daynav { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-soft); }
  .daynav button { all: unset; cursor: pointer; padding: 5px 9px; border-radius: 6px; border: 1px solid var(--line); }
  .daynav button:hover { background: var(--surface); }

  .card {
    background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
    padding: 18px 20px; box-shadow: var(--shadow);
  }
  @media (max-width: 600px) { .card { padding: 14px 12px; } }

  /* ---- week view ---- */
  .week-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
  @media (max-width: 860px) { .week-grid { grid-template-columns: repeat(2, 1fr); } }
  .week-col { background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
              overflow: hidden; display: flex; flex-direction: column; min-height: 130px; }
  .week-col.is-today { border-color: var(--accent); }
  .week-col-head { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; padding: 9px 10px;
                   border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
  .week-col-head:hover { background: var(--paper); }
  .week-dow { font-size: 11.5px; font-weight: 600; }
  .week-dm { font-size: 11px; color: var(--ink-soft); }
  .week-count { margin-left: auto; font-size: 11px; background: var(--accent-soft); color: var(--accent-ink);
                border-radius: 100px; padding: 1px 7px; }
  .week-col-body { padding: 7px; display: flex; flex-direction: column; gap: 5px; }
  .week-chip { display: flex; flex-direction: column; gap: 1px; padding: 5px 7px; border-radius: 6px;
               background: var(--accent-soft); color: var(--accent-ink); text-decoration: none; font-size: 11.5px; }
  .week-chip:hover { background: color-mix(in srgb, var(--accent) 22%, var(--accent-soft)); }
  .week-chip.is-cancelled { background: var(--line); color: var(--ink-soft); text-decoration: line-through; }
  .week-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .week-empty { color: var(--ink-soft); font-size: 12px; padding: 2px 7px; }

  /* ---- month view ---- */
  .month-grid { display: grid; grid-template-columns: repeat(7, 1fr) auto; gap: 6px; }
  .month-dow { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em;
               color: var(--ink-soft); text-align: center; padding-bottom: 2px; }
  .month-cell { display: flex; flex-direction: column; gap: 2px; min-height: 62px; padding: 6px 8px;
                border: 1px solid var(--line); border-radius: 8px; text-decoration: none; color: var(--ink); }
  .month-cell:hover { background: var(--paper); border-color: var(--accent); }
  .month-cell.is-outside { opacity: 0.4; }
  .month-cell.is-today { border-color: var(--accent); background: var(--accent-soft); }
  .month-num { font-size: 12px; color: var(--ink-soft); }
  .month-count { font-size: 15px; font-family: var(--font-display); }
  .month-sum { font-size: 10.5px; color: var(--ink-soft); }
  .month-weeklink { align-self: center; font-size: 10.5px; color: var(--ink-soft); text-decoration: none;
                    white-space: nowrap; padding: 0 4px; }
  .month-weeklink:hover { color: var(--accent-ink); }
  @media (max-width: 860px) { .month-weeklink { display: none; } .month-grid { grid-template-columns: repeat(7, 1fr); } }

  .modal { border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; min-width: 320px;
           max-width: 92vw; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
  .modal::backdrop { background: rgba(0,0,0,0.45); }
  .modal h3 { font-size: 16px; }
  .modal-sub { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-soft); }
  .modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }

  .note-flag { font-size: 10.5px; color: var(--warning); background: var(--warning-soft);
               border-radius: 100px; padding: 1px 7px; white-space: nowrap; cursor: help; }
  .stack { display: flex; flex-direction: column; gap: 16px; }
  .row { display: flex; gap: 16px; flex-wrap: wrap; }
  .row > .card { flex: 1; min-width: 200px; }

  .kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); margin-bottom: 6px; }
  .kpi-value { font-family: var(--font-display); font-size: 26px; font-variant-numeric: tabular-nums; }
  .kpi-sub { font-size: 12px; color: var(--ink-soft); margin-top: 4px; }

  .loadbar-row { display: flex; align-items: flex-end; gap: 3px; height: 54px; margin-top: 4px; }
  .loadbar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
  .loadbar-fill { width: 100%; border-radius: 3px 3px 0 0; background: var(--accent-soft); position: relative; }
  .loadbar-fill[data-level="high"] { background: var(--accent); }
  .loadbar-fill[data-level="mid"] { background: color-mix(in srgb, var(--accent) 55%, var(--accent-soft)); }
  .loadbar-fill[data-level="full"] { background: var(--critical); }
  .loadbar-fill[data-level="zero"] { background: var(--line); }
  .loadbar-hr { font-size: 9.5px; color: var(--ink-soft); font-family: var(--font-mono); }

  table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
  th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); font-weight: 600; padding: 0 10px 8px; border-bottom: 1px solid var(--line); }
  td { padding: 10px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
  tr:last-child td { border-bottom: none; }
  tr:target { background: var(--accent-soft); }
  /* tr.row-link: the row's one link stretches over the whole row, so the
     row is the tap target (a 16px code is too small for a finger). */
  tr.row-link { position: relative; cursor: pointer; }
  tr.row-link:hover { background: var(--paper); }
  tr.row-link a::after { content: ""; position: absolute; inset: 0; }
  tr.is-cancelled td { color: var(--ink-soft); text-decoration: line-through; text-decoration-color: var(--line); }
  .tbl-wrap { overflow-x: auto; container-type: inline-size; }
  /* table.cards: when the table does not fit its card (phone, narrow window),
     each row becomes a card of its own — no sideways scrollbar that only shows
     up at the bottom of a long list. Driven by the card's width, not the
     window's, so the side rail is accounted for. Short cells (data-label) sit
     side by side with their header as a caption; .cards-wide cells take a
     full line. */
  @container (max-width: 1000px) {
    table.cards, table.cards tbody { display: block; }
    table.cards tr:has(> th) { display: none; }
    table.cards tr { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 12px 0; border-bottom: 1px solid var(--line); }
    table.cards tr:last-child { border-bottom: none; }
    table.cards td { display: block; padding: 0; border: none; min-width: 0; }
    table.cards td:empty { display: none; }
    table.cards td.cards-wide { flex-basis: 100%; }
    table.cards td[data-label]::before {
      content: attr(data-label); display: block; font-size: 10.5px; text-transform: uppercase;
      letter-spacing: 0.05em; color: var(--ink-soft); font-weight: 600; margin-bottom: 2px;
    }
    table.cards input[type="text"], table.cards select { max-width: 100%; }
  }

  .pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 100px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
  .pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
  .pill--new { background: var(--accent-soft); color: var(--accent-ink); }
  .pill--confirmed { background: var(--success-soft); color: var(--success); }
  .pill--done { background: var(--line); color: var(--ink-soft); }
  .pill--cancelled { background: var(--critical-soft); color: var(--critical); }
  .pill--paid { background: var(--success-soft); color: var(--success); }
  .pill--pending { background: var(--warning-soft); color: var(--warning); }
  .pill--placeholder { background: var(--warning-soft); color: var(--warning); }
  .pill--confirmed { background: var(--success-soft); color: var(--success); }
  .pill--new-client { background: var(--success-soft); color: var(--success); }
  .pill--exists { background: var(--line); color: var(--ink-soft); }
  /* Client referral-funnel statuses (clients.status) — distinct from the
     booking-status pills above, sharing the same three colour tokens. */
  .pill--imported { background: var(--line); color: var(--ink-soft); }
  .pill--pending_confirm { background: var(--warning-soft); color: var(--warning); }
  .pill--pending_review { background: var(--warning-soft); color: var(--warning); }
  .pill--sent { background: var(--success-soft); color: var(--success); }
  /* Terminal stage — the code came back spent. Accent, not green: it is the
     outcome the whole funnel exists to produce, and it should read as the
     finish line rather than as one more "fine" state. */
  .pill--used { background: var(--accent-soft); color: var(--accent-ink); }
  .pill--archived { background: var(--line); color: var(--ink-soft); }
  code.ref.is-spent { color: var(--ink-soft); text-decoration: line-through; }
  /* Help-desk ticket statuses (support_tickets.status) — pill--done already
     exists from the booking-status set above and is reused as-is; the rest
     are new here. */
  .pill--received { background: var(--warning-soft); color: var(--warning); }
  .pill--reviewing { background: var(--warning-soft); color: var(--warning); }
  .pill--in_progress { background: var(--accent-soft); color: var(--accent-ink); }
  .pill--declined { background: var(--critical-soft); color: var(--critical); }

  .ref { font-family: var(--font-mono); letter-spacing: 0.02em; }
  .addr-empty { color: var(--warning); font-size: 12.5px; font-style: italic; cursor: pointer; }

  .btn { all: unset; box-sizing: border-box; cursor: pointer; font-size: 12.5px; padding: 5px 11px; border-radius: 6px; border: 1px solid var(--line); color: var(--ink); white-space: nowrap; }
  .btn:hover { background: var(--paper); }
  /* Sortable column headers on the clients list. */
  .sort-link { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
  .sort-link:hover { color: var(--accent); }
  .sort-link.is-active { color: var(--accent); }
  .sort-arrow { font-size: 9px; line-height: 1; }

  .pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
  .pager-size { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-soft); }
  .pager-size select { padding: 5px 8px; }
  .pager-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .pager-pos { font-size: 12.5px; color: var(--ink-soft); padding: 0 4px; }
  /* A span, not a disabled <a>: there is no page before the first one, so
     there is no href to give it. Kept in the row so the controls do not shift
     sideways as the operator pages through. */
  .btn.is-disabled { opacity: 0.4; pointer-events: none; }

  .btn-row { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; white-space: nowrap; }
  /* "Виконано" is a real POST, so it needs a form of its own among buttons
     that open dialogs. The UA stylesheet's block margin on <form> would push
     it out of line with its neighbours. */
  .btn-row form { margin: 0; display: inline-flex; }
  .btn-row .btn { padding: 5px 11px; font-size: 12.5px; height: 28px; display: inline-flex; align-items: center; justify-content: center; }
  .btn.danger { color: var(--critical-ink, var(--critical)); border-color: color-mix(in srgb, var(--critical) 35%, var(--line)); }
  .btn.danger:hover { background: var(--critical-soft); }
  .btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; padding: 9px 18px; font-size: 13.5px; }
  .btn.primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
  .btn-row .btn.primary { padding: 5px 11px; font-size: 12.5px; font-weight: 600; }

  .status-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
  .status-tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 100px;
                border: 1px solid var(--line); color: var(--ink-soft); font-size: 12.5px; text-decoration: none; }
  .status-tab:hover { background: var(--paper); }
  .status-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
  .status-tab .n { opacity: 0.7; }

  form.inline { display: contents; }
  .field { display: flex; flex-direction: column; gap: 5px; }
  .field label { font-size: 11.5px; color: var(--ink-soft); }
  .field input, .field select, .field textarea {
    font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px;
    background: var(--surface); color: var(--ink); font-family: var(--font-body);
  }
  .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
  .field-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }

  .search-row { display: flex; gap: 8px; margin-bottom: 16px; }
  .search-row input { flex: 1; }

  .section-title { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
  .section-title h3 { font-size: 15px; }
  .section-title .hint { font-size: 11.5px; color: var(--ink-soft); }

  .hours-grid { display: grid; grid-template-columns: 110px 1fr auto auto; gap: 8px 14px; align-items: center; }
  .hours-grid .dow { font-size: 13px; }
  .hours-track { height: 26px; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; position: relative; overflow: hidden; }
  .hours-fill { position: absolute; top: 0; bottom: 0; background: var(--accent-soft); border-right: 2px solid var(--accent); border-left: 2px solid var(--accent); }
  .hours-time { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); white-space: nowrap;
                display: flex; align-items: center; gap: 4px; }
  .hours-off { font-size: 12px; color: var(--ink-soft); font-style: italic; grid-column: 2 / 4; }
  /* A day switched off keeps its inputs on screen (they are what the operator
     edits before switching it back on) but reads as inactive. */
  .hours-track.is-off .hours-fill { display: none; }
  .hours-off-label { display: none; position: absolute; inset: 0; align-items: center; padding-left: 10px;
                     font-size: 12px; font-style: italic; color: var(--ink-soft); }
  .hours-track.is-off .hours-off-label { display: flex; }
  .hours-time.is-off { opacity: 0.45; }
  .copy-hours { font-size: 11px; padding: 3px 8px; margin-left: 6px; color: var(--ink-soft); }
  /* Phone: one row per day does not fit — day name and switch on top,
     the bar and the times each on a full line below. */
  @media (max-width: 600px) {
    .hours-grid { grid-template-columns: 1fr auto; grid-auto-flow: dense; gap: 6px 10px; }
    .hours-track, .hours-time, .hours-off { grid-column: 1 / -1; }
    .hours-time { flex-wrap: wrap; margin-bottom: 8px; }
  }
  .save-row { display: flex; align-items: center; gap: 12px; }
  .dirty-flag { font-size: 12px; color: var(--warning); }
  /* Sticky rather than sitting at the end of the last card: the settings form
     is taller than a screen, and a save button you have to scroll to find is a
     save button that reads as belonging to whatever card it happens to sit in. */
  .save-bar { position: sticky; bottom: 0; margin: 0 -20px -6px; padding: 12px 20px;
              background: var(--surface); border-top: 1px solid var(--line);
              box-shadow: 0 -6px 20px rgba(0,0,0,0.06); border-radius: 0 0 10px 10px; }
  .save-bar-inner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .save-bar-scope { font-size: 11.5px; color: var(--ink-soft); }
  /* Phone cards pad 12px, not 20px — the bleed must match or it overflows. */
  @media (max-width: 600px) { .save-bar { margin: 0 -12px -6px; padding: 12px; } }

  /* Field hints: every settings input carries a title, so show the cursor that
     promises one. */
  .field[title] label { cursor: help; text-decoration: underline dotted var(--line); text-underline-offset: 3px; }

  /* Collapsed "add manually" forms on the bookings and clients screens. */
  .add-panel { margin-bottom: 16px; }
  .add-panel > summary { cursor: pointer; font-size: 13.5px; color: var(--accent-ink); list-style: none; }
  .add-panel > summary::-webkit-details-marker { display: none; }
  .add-panel[open] > summary { margin-bottom: 4px; }
  .form-error { margin-top: 10px; padding: 8px 11px; border-radius: 7px; font-size: 12.5px;
                background: var(--critical-soft); color: var(--critical); }

  .switch {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 34px;
    height: 19px;
    flex: none;
    cursor: pointer;
  }
  .switch input { opacity: 0; width: 0; height: 0; }
  .switch .track { position: absolute; inset: 0; background: var(--line); border-radius: 100px; transition: background 0.15s; }
  .switch input:checked + .track { background: var(--accent); }
  .switch .thumb { position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: transform 0.15s; box-shadow: 0 1px 2px rgba(0,0,0,0.3); }
  .switch input:checked + .track + .thumb { transform: translateX(15px); }

  .divider { height: 1px; background: var(--line); margin: 6px 0; }

  .login-wrap { min-height: 100vh; display: grid; place-items: center; background: var(--paper); }
  .login-card { width: 100%; max-width: 320px; padding: 34px 30px; text-align: center; }
  .login-card .brand-text { color: var(--ink); margin-top: 10px; }
  .login-card .brand-text small { color: var(--ink-soft); }
  .login-card form { margin-top: 24px; display: flex; flex-direction: column; gap: 14px; text-align: left; }
  .login-card .btn.primary { width: 100%; margin-top: 4px; }
  .login-hint { font-size: 11.5px; color: var(--ink-soft); margin-top: 18px; }

  .breadcrumb { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 8px; }
  .breadcrumb a { color: var(--ink-soft); text-decoration: none; }
  .breadcrumb a:hover { text-decoration: underline; }

  .profile-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
  .profile-meta { display: flex; gap: 18px; margin-top: 6px; font-size: 12.5px; color: var(--ink-soft); flex-wrap: wrap; }
  .profile-meta b { color: var(--ink); font-weight: 600; }
  /* Address edit-in-place in the card header. [hidden] must beat the
     display:flex below, or view and form show together. */
  .profile-head__main { flex: 1; min-width: 0; }
  #addr-view[hidden], .addr-edit[hidden] { display: none; }
  .addr-title { font-size: 22px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
  .addr-warn { font-size: 12.5px; color: var(--warning); margin-top: 2px; }
  .addr-edit { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .addr-edit label { font-size: 12.5px; color: var(--ink-soft); }
  .addr-edit input[type="text"] { flex: 1; min-width: 220px; font-size: 16px; }
  .linkbtn { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; font-weight: 600;
             color: var(--accent-ink); cursor: pointer; }
  .linkbtn:hover { text-decoration: underline; }
  /* Referral block on the client card */
  .ref-sec__title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
                    color: var(--ink-soft); margin: 0 0 8px; }
  .ref-step { font-size: 13.5px; display: flex; gap: 6px; align-items: center; }

  .note-box textarea { width: 100%; min-height: 64px; resize: vertical; }

  .import-summary { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
  .import-summary .chip { font-size: 12.5px; color: var(--ink-soft); }
  .import-summary .chip b { color: var(--ink); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

  .screen[hidden] { display: none; }

  /* ---- Довідка (help) screen ---- */
  /* Plain <details> restyled to match the admin's own typography instead of
     the browser's default disclosure triangle — same idea as .add-panel
     elsewhere in this file, but for read-only explanation blocks rather than
     a form panel, so it gets its own class instead of overloading that one. */
  .doc-details { margin-top: 10px; }
  .doc-details > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent-ink); list-style: none; }
  .doc-details > summary::-webkit-details-marker { display: none; }
  .doc-details > summary::before { content: "+ "; }
  .doc-details[open] > summary::before { content: "\2212 "; }
  .doc-details > summary:hover { text-decoration: underline; }
  .doc-body { margin-top: 8px; font-size: 13px; color: var(--ink-soft); }
  .doc-body p { margin: 0 0 8px; }
  .doc-body p:last-child { margin-bottom: 0; }
  .doc-body code { font-family: var(--font-mono); font-size: 12px; background: var(--paper); padding: 1px 5px; border-radius: 4px; }

  .help-confirm { padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 14px; }
  .help-confirm.ok { background: var(--success-soft); color: var(--success); }
  .help-confirm.warn { background: var(--warning-soft); color: var(--warning); }

  .ticket-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
  .ticket-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; padding: 8px 10px;
                border: 1px solid var(--line); border-radius: 8px; flex-wrap: wrap; }
  .ticket-row .ticket-desc { flex: 1; min-width: 120px; overflow: hidden; text-overflow: ellipsis;
                              white-space: nowrap; color: var(--ink-soft); }