/* ======================================================================
     DecoSign design system tokens (Light = Paper, Dark = Night), IBM Plex Sans Arabic only.
     Source of truth: the DecoSign design system artifact (tokens.json). Magenta is spent sparingly:
     the primary button, the page-head rule, the active link, key numbers. Magenta TEXT is --accent-text.
     success / danger are states only. Square-cut by default, 4px for inputs and chips.
     ====================================================================== */
  @font-face { font-family: "IBM Plex Sans Arabic"; src: url(/assets/IBMPlexSansArabic-Regular.ttf) format("truetype"); font-weight: 400; font-display: swap; }
  @font-face { font-family: "IBM Plex Sans Arabic"; src: url(/assets/IBMPlexSansArabic-SemiBold.ttf) format("truetype"); font-weight: 600; font-display: swap; }
  @font-face { font-family: "IBM Plex Sans Arabic"; src: url(/assets/IBMPlexSansArabic-Bold.ttf) format("truetype"); font-weight: 700; font-display: swap; }

  :root {
    --magenta: #ce0f69; --magenta-deep: #a40755; --pink-glow: #ff5ca4; --deep: #11161c;
    --bg: #f7f5f6; --surface: #fff; --sunken: #e9e6e8; --panel: #1d242c;
    --ink: #1d242c; --muted: #565b60; --subtle: #70757a;
    --line: #dedcdf; --line-strong: #9ca0a3; --rule: #1d242c;
    --accent: var(--magenta); --accent-text: #ce0f69; --on-accent: #fff; --on-panel: #fff; --focus: #1d242c;
    --success: #1f6b4a; --danger: #b42318; --on-state: #fff;
    --scrim: rgba(17, 22, 28, .55);
    --sans: "IBM Plex Sans Arabic", "Avenir Next", "Century Gothic", Arial, sans-serif;
    --r-sm: 4px;
    --ease: cubic-bezier(.215, .61, .355, 1);
    --ease-in: cubic-bezier(.55, .055, .675, .19);
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #11161c; --surface: #1d242c; --sunken: #252d35; --panel: #252d35;
      --ink: #fff; --muted: #aeb3b7; --subtle: #9e98a4;
      --line: #414a52; --line-strong: #70757a; --rule: #70757a;
      --accent-text: #ff5ca4; --focus: #ff5ca4;
      --success: #6fd3a5; --danger: #ff8a7a; --on-state: #11161c;
      --scrim: rgba(0, 0, 0, .62);
    }
  }

  * { box-sizing: border-box; }
  body {
    margin: 0; background: var(--bg); color: var(--ink);
    font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased;
  }
  button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
  button { cursor: pointer; }
  :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  [dir="rtl"], [dir="auto"] { line-height: 1.8; }
  h1 { font: 700 36px/1.05 var(--sans); letter-spacing: -.8px; margin: 0; text-wrap: balance; }
  h1 em { font-style: normal; color: var(--accent-text); }

  /* ---------------- top bar ---------------- */
  .bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--surface); border-bottom: 1px solid var(--line); }
  .bar-in { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 24px; min-height: 64px; }
  .mark { display: flex; align-items: center; flex: none; cursor: pointer; transition: opacity .15s; }
  .mark:hover { opacity: .8; }
  .mark img { height: 28px; width: auto; display: block; }
  .bar-r { display: flex; align-items: center; gap: 12px; flex: none; margin-left: auto; }

  /* ---------------- page head: eyebrow, title with one accent word, the 2px accent rule ---------------- */
  .ph { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 2px solid var(--accent); animation: rise .4s var(--ease) both; }
  .eyebrow { margin: 0 0 8px; color: var(--accent-text); font: 700 12px/1.2 var(--sans); letter-spacing: 1.6px; text-transform: uppercase; }
  .ph p { margin: 8px 0 0; color: var(--muted); max-width: 60ch; }
  .ph-acts { display: flex; gap: 12px; flex-wrap: wrap; }

  /* ---------------- status chips: the word is always there; colour is only a state ---------------- */
  .pill {
    display: inline-flex; align-items: center; padding: 2px 9px; border: 1px solid transparent; border-radius: var(--r-sm);
    font: 600 12px/1.5 var(--sans); white-space: nowrap;
  }
  .pill.p-open { color: var(--ink); border-color: var(--line-strong); }
  .pill.p-part { color: var(--ink); background: var(--sunken); }
  .pill.p-void { color: var(--muted); background: var(--sunken); }
  .pill.p-ok { color: var(--success); background: color-mix(in srgb, var(--success) 13%, var(--surface)); }
  .pill.p-bad { color: var(--danger); background: color-mix(in srgb, var(--danger) 13%, var(--surface)); }

  /* ---------------- toast ---------------- */
  #toast-host { position: fixed; left: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 9600; }
  .toast {
    max-width: min(460px, calc(100vw - 48px)); padding: 12px 18px;
    background: var(--panel); color: var(--on-panel); border-inline-start: 4px solid var(--accent);
    font-size: 14px; animation: rise .25s var(--ease) both;
  }
  .toast + .toast { margin-top: 8px; }
  @media (max-width: 560px) { #toast-host { left: 16px; right: 16px; } .toast { max-width: none; } }

  /* ======================================================================
     Interface kit: page-change loader, sign-in, fields, buttons, overlays, menus, chips, tabs, history.
     Tokens come from base.css (the DecoSign design system).
     ====================================================================== */

  /* ---------------- page change: the DecoSign loader, always the WHITE wordmark on the dark ground ---------------- */
  .swap {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    background: var(--deep);
    opacity: 0; pointer-events: none;
    transition: opacity .24s var(--ease);
  }
  .swap.on, html.swapping .swap { opacity: 1; pointer-events: auto; }
  html.swapping .swap { transition: none; animation: swap-giveup 0s 7s forwards; }   /* never stuck */
  .swap.sweep { opacity: 1; pointer-events: auto; clip-path: inset(0 58% 0 0); animation: sweep .44s var(--ease) forwards; }
  @keyframes sweep { to { clip-path: inset(0 0 0 0); } }
  @keyframes swap-giveup { to { opacity: 0; pointer-events: none; } }

  /* ---------------- sign-in: the dark brand panel (with the arc) on the left, the form on the right ---------------- */
  .auth { position: fixed; inset: 0; z-index: 9000; display: grid; grid-template-columns: minmax(340px, 42%) 1fr; background: var(--bg); overflow-y: auto; }
  .auth-brand {
    position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center;
    padding: 56px clamp(28px, 5vw, 64px); background: var(--deep); color: #fff;
  }
  .auth-brand::before {             /* the arc: a thin neon circle segment on deep */
    content: ""; position: absolute; width: 440px; height: 440px; right: -190px; top: -130px;
    border: 2px solid var(--pink-glow); border-radius: 50%; opacity: .8;
    box-shadow: 0 0 40px rgba(206, 15, 105, .55), inset 0 0 40px rgba(206, 15, 105, .55);
  }
  .auth-brand > * { position: relative; z-index: 1; }
  .auth-logo { width: 150px; height: auto; }
  .auth-brand .eyebrow { margin: 44px 0 16px; color: var(--pink-glow); }
  .auth-brand h1 { max-width: 12ch; font-size: clamp(36px, 3.6vw, 48px); line-height: 1; letter-spacing: -1px; }
  .auth-brand h1 em { color: var(--pink-glow); }
  .auth-brand p { margin: 20px 0 0; max-width: 36ch; color: #aeb3b7; }

  .auth-side { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
  .auth-card { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--rule); padding: 32px 32px 20px; }
  .auth-icon { width: 40px; height: 40px; background: var(--sunken); color: var(--ink); display: grid; place-items: center; }
  .auth-kicker { margin: 18px 0 4px; color: var(--accent-text); font: 700 12px/1.2 var(--sans); letter-spacing: 1.6px; text-transform: uppercase; }
  .auth-card h2 { margin: 0; font: 700 24px/1.15 var(--sans); letter-spacing: -.3px; }
  .auth-help { margin: 8px 0 22px; color: var(--muted); font-size: 14px; line-height: 1.55; }
  .auth-foot { display: flex; gap: 8px; align-items: flex-start; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; line-height: 1.5; }
  .auth-foot svg { flex: none; margin-top: 3px; }
  .auth-foot a { color: var(--accent-text); font-weight: 600; text-decoration: none; }
  .auth-foot a:hover { text-decoration: underline; }
  .auth-for { margin: -10px 0 18px; padding: 10px 12px; background: var(--sunken); color: var(--muted); font-size: 13px; line-height: 1.5; }
  .auth-for b { color: var(--ink); font-weight: 600; }
  .auth .form-msg { margin-top: 10px; }

  .auth-brand > * { animation: rise .42s var(--ease) both; }
  .auth-brand > :nth-child(2) { animation-delay: .06s; }
  .auth-brand > :nth-child(3) { animation-delay: .12s; }
  .auth-brand > :nth-child(4) { animation-delay: .18s; }
  .auth-card { animation: card-in .42s .1s var(--ease) both; }
  .auth.done .auth-card { animation: card-leave .32s var(--ease-in) forwards; }   /* signed in: the form steps back while the brand sweeps across */

  @media (max-width: 820px) {
    /* stacked: each part as tall as its content (a plain auto row would squeeze the brand panel) */
    .auth { grid-template-columns: 1fr; grid-auto-rows: max-content; align-content: start; }
    .auth-brand { padding: 32px 24px 28px; }
    .auth-brand h1 { font-size: 32px; }
    .auth-brand p { display: none; }
    .auth-brand .eyebrow { margin: 24px 0 12px; }
    .auth-logo { width: 120px; }
    .auth-side { padding: 24px 16px 40px; }
    .auth-card { padding: 24px 20px 16px; }
  }
  /* phones: iOS zooms into any field under 16px; 16px everywhere on touch keeps the page still */
  @media (hover: none) and (pointer: coarse) { input, textarea, select { font-size: 16px !important; } }

  /* ---------------- fields: label above, always visible ---------------- */
  .fld { display: block; }
  .fld[hidden] { display: none; }
  .fld + .fld { margin-top: 16px; }
  .fld label { display: block; margin: 0 0 8px; font: 600 14px/1.3 var(--sans); }
  .fld input, .fld select, .fld textarea {
    width: 100%; min-height: 46px; padding: 12px 16px;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    font: 400 16px/1.4 var(--sans); transition: border-color .15s;
  }
  .fld textarea { min-height: 84px; resize: vertical; }
  .fld input::placeholder, .fld textarea::placeholder { color: var(--subtle); }
  .fld input:focus-visible, .fld select:focus-visible, .fld textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--ink); }
  input[type="file"] { font-size: 14px; max-width: 100%; }
  input[type="file"]::file-selector-button {
    font: 600 13px/1 var(--sans); padding: 9px 14px; margin-inline-end: 12px; cursor: pointer;
    background: transparent; color: var(--ink); border: 2px solid var(--ink); border-radius: 0; transition: background .15s, color .15s;
  }
  input[type="file"]::file-selector-button:hover { background: var(--ink); color: var(--bg); }
  .fld-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
  .fld-row.three { grid-template-columns: repeat(3, 1fr); }
  .fld-row .fld + .fld { margin-top: 0; }
  .fld-row + .fld, .fld + .fld-row, .fld-row + .fld-row { margin-top: 16px; }
  .fld-hint { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.4; }
  .form-msg { min-height: 18px; margin: 12px 0 0; font: 600 13px/1.45 var(--sans); color: var(--danger); }
  .form-msg.ok { color: var(--success); }

  /* ---------------- buttons: square-cut, 44px tall, press / work / finish ---------------- */
  .btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 24px; border-radius: 0; border: 2px solid transparent;
    font: 600 15px/1 var(--sans); text-decoration: none;
    transition: transform .12s var(--ease), background-color .15s, color .15s, border-color .15s, opacity .15s;
  }
  .btn:active:not(:disabled) { transform: scale(.97); }
  .btn.primary { background: var(--accent); color: var(--on-accent); }
  .btn.primary:hover:not(:disabled) { background: var(--magenta-deep); }
  .btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
  .btn.ghost:hover:not(:disabled) { background: var(--ink); color: var(--bg); }
  .btn.go { background: var(--success); color: var(--on-state); }
  .btn.go:hover:not(:disabled) { background: color-mix(in srgb, var(--success) 82%, var(--ink)); }
  .btn.stop { background: var(--danger); color: var(--on-state); }
  .btn.stop:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 82%, var(--ink)); }
  .btn.danger { background: transparent; color: var(--danger); border-color: var(--danger); }
  .btn.danger:hover:not(:disabled) { background: var(--danger); color: var(--on-state); }
  .btn.wide { width: 100%; }
  .btn:disabled { cursor: default; opacity: .45; }
  .btn.busy, .btn.done { opacity: 1; }
  .btn.busy .btn-l, .btn.done .btn-l { opacity: 0; }
  .btn.busy::after, .btn.done::after { content: ""; position: absolute; inset: 0; margin: auto; }
  .btn.busy::after { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
  .btn.done::after { width: 18px; height: 9px; border: solid currentColor; border-width: 0 0 2.5px 2.5px; transform: translateY(-2px) rotate(-45deg); animation: tick .3s var(--ease) both; }
  .btn.done.primary { background: var(--success); color: var(--on-state); }
  .btn-l svg { vertical-align: -2px; margin-right: 7px; }
  .btn-row { display: flex; gap: 12px; margin-top: 20px; }
  .btn-row > .btn { flex: 1; }
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes tick { from { opacity: 0; transform: translateY(-2px) rotate(-45deg) scale(.4); } }
  .icb {
    width: 32px; height: 32px; display: grid; place-items: center; flex: none; padding: 0;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: 0; color: var(--muted);
    transition: color .15s, border-color .15s, transform .12s var(--ease);
  }
  .icb:hover { color: var(--ink); border-color: var(--ink); }
  .icb:active { transform: scale(.94); }
  .icb:disabled { opacity: .3; cursor: default; }

  /* ---------------- overlays: the page dimmed behind a square-cut sheet ---------------- */
  .ovl {
    position: fixed; inset: 0; z-index: 9500; display: flex; align-items: flex-start; justify-content: center;
    padding: max(7vh, 24px) 16px 24px; overflow-y: auto; background: var(--scrim); animation: fade-in .2s var(--ease) both;
  }
  .ovl.out { animation: fade-out .16s var(--ease-in) both; pointer-events: none; }   /* a closing overlay never eats the next click */
  .ovl-card {
    position: relative; width: 100%; max-width: 440px; background: var(--surface); border: 1px solid var(--line-strong); border-top: 4px solid var(--rule);
    padding: 24px 24px 20px; animation: card-in .3s var(--ease) both;
  }
  .ovl-card.wide { max-width: 800px; }
  .ovl.out .ovl-card { animation: card-leave .16s var(--ease-in) both; }
  .ovl-x { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: none; color: var(--muted); transition: background .15s, color .15s; }
  .ovl-x:hover { background: var(--sunken); color: var(--ink); }
  .ovl-title { margin: 0 40px 4px 0; font: 700 24px/1.2 var(--sans); letter-spacing: -.3px; }
  .ovl-title + .ovl-body { margin-top: 18px; }
  .ovl-sub { margin: 0 0 18px; color: var(--muted); font-size: 14px; line-height: 1.5; }
  .ovl-note { margin: 16px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
  body.ovl-open { overflow: hidden; }
  .linkbox { margin: 4px 0; padding: 12px 14px; background: var(--sunken); font-size: 13px; line-height: 1.5; word-break: break-all; user-select: all; }

  /* ---------------- anchored menus ---------------- */
  .pop {
    position: fixed; z-index: 9400; width: 280px; max-width: calc(100vw - 24px); padding: 6px;
    background: var(--surface); border: 1px solid var(--line-strong);
    transform-origin: top right; animation: pop-in .18s var(--ease) both;
  }
  .pop.out { animation: pop-out .12s var(--ease-in) both; pointer-events: none; }
  .pop-head { display: flex; gap: 12px; align-items: center; padding: 10px 10px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
  .pop-head b { display: block; font: 600 14px/1.3 var(--sans); }
  .pop-head small { display: block; font-size: 13px; line-height: 1.35; color: var(--muted); word-break: break-all; }
  .pop-head .role { margin-top: 3px; color: var(--accent-text); font-weight: 600; }
  .pop-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border: 0; background: none; font: 600 14px/1.2 var(--sans); text-align: left; transition: background .12s; }
  .pop-item:hover, .pop-item:focus-visible { background: var(--sunken); outline: none; }
  .pop-item.danger, .pop-item.danger svg { color: var(--danger); }
  .pop-item svg { color: var(--muted); flex: none; }
  .pop-item.nochk { padding-left: 35px; }
  .pop-label { padding: 10px 10px 4px; font: 600 11px/1 var(--sans); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
  .pop-label:not(:first-child) { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 12px; }
  .pop-form { padding: 8px 10px 10px; animation: rise .22s var(--ease) both; }
  .pop-form .fld input { min-height: 42px; font-size: 14px; }

  .avatar { width: 34px; height: 34px; flex: none; display: grid; place-items: center; background: var(--panel); color: var(--on-panel); font: 700 12px/1 var(--sans); }
  .avatar.lg { width: 40px; height: 40px; font-size: 14px; }
  #acctbtn { width: 34px; height: 34px; padding: 0; border: 0; transition: transform .12s var(--ease), box-shadow .15s; }
  #acctbtn:hover, #acctbtn[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
  #acctbtn:active { transform: scale(.94); }

  /* ---------------- filter chips and tabs ---------------- */
  .chips { display: flex; gap: 8px; flex-wrap: wrap; }
  .chip {
    padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface);
    font: 600 13px/1 var(--sans); color: var(--ink); transition: background-color .15s, color .15s, border-color .15s, transform .12s var(--ease);
  }
  .chip:hover { border-color: var(--ink); }
  .chip:active { transform: scale(.96); }
  .chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
  .tabs2 { display: flex; gap: 24px; margin: 0 0 24px; border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; }
  .tabs2 button { padding: 10px 0; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; font: 600 15px/1.2 var(--sans); color: var(--muted); white-space: nowrap; transition: color .15s, border-color .15s; }
  .tabs2 button:hover { color: var(--ink); }
  .tabs2 button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }

  /* ---------------- history: day-grouped timeline, diamond dots ---------------- */
  .tl-tools { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 8px; }
  .tl-tools .fld { flex: 1; min-width: 200px; }
  .tl-scroll { max-height: min(58vh, 560px); overflow-y: auto; margin: 0 -6px; padding: 0 6px; overscroll-behavior: contain; }
  .tl-scroll.small { max-height: 240px; }
  .tl-day { margin: 18px 0 6px; font: 600 11px/1 var(--sans); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
  .tl { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line-strong); }
  .tl-row { position: relative; display: grid; grid-template-columns: 46px 1fr; gap: 10px; padding: 8px 0 8px 16px; animation: rise .3s var(--ease) both; animation-delay: calc(var(--i, 0) * 18ms); }
  .tl-row::before { content: ""; position: absolute; left: -5px; top: 15px; width: 9px; height: 9px; transform: rotate(45deg); background: var(--surface); border: 2px solid var(--line-strong); }
  .tl-row.bad::before { border-color: var(--danger); }
  .tl-row.good::before { border-color: var(--success); }
  .tl-time { font: 600 12px/1.6 var(--sans); font-variant-numeric: tabular-nums; color: var(--muted); }
  .tl-line { font-size: 14px; line-height: 1.5; color: var(--muted); }
  .tl-line b { color: var(--ink); font-weight: 600; }
  .tl-sub { font-size: 13px; line-height: 1.45; color: var(--muted); word-break: break-word; }
  .tl-empty { color: var(--muted); font-size: 14px; padding: 20px 0; }

  /* ---------------- shared motion ---------------- */
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } }
  @keyframes card-in { from { opacity: 0; transform: translateY(12px) scale(.97); } }
  @keyframes card-leave { to { opacity: 0; transform: translateY(6px) scale(.97); } }
  @keyframes fade-in { from { opacity: 0; } }
  @keyframes fade-out { to { opacity: 0; } }
  @keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(.96); } }
  @keyframes pop-out { to { opacity: 0; transform: translateY(-4px) scale(.97); } }

  @media (prefers-reduced-motion: reduce) {
    .swap, .auth-brand > *, .auth-card, .ovl, .ovl-card, .pop, .pop-form, .btn, .tl-row, .ph, .toast {
      animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important;
    }
  }

/* The DecoSign loader (markup: src/loader.js). Timeline (0.9 s): "Deco" rises into place (0 - .3s), "Sign" is written in one
   stroke (.3s - .8s, ease-out), the whole of "Sign" settles in (.78s - .88s), then the finished wordmark holds. Magenta wordmark on light, white on dark.
   The animations run whenever the loader is shown (.on) or the page is still changing (.swapping), or always when the
   loader sits on its own (.dsl-solo). With prefers-reduced-motion it is simply the finished wordmark. */
.dsl { width: min(60vw, 300px); height: auto; display: block; overflow: visible; }
.dsl .on-dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dsl .on-light { display: none; } :root:not([data-theme="light"]) .dsl .on-dark { display: inline; } }
:root[data-theme="dark"] .dsl .on-light, html.swap-dark .dsl .on-light, .dsl-dark .dsl .on-light { display: none; }
:root[data-theme="dark"] .dsl .on-dark, html.swap-dark .dsl .on-dark, .dsl-dark .dsl .on-dark { display: inline; }

.dsl-pen { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.dsl-full { opacity: 0; }
.dsl-deco { opacity: 0; }
.swap.on .dsl-deco, html.swapping .dsl-deco, .dsl-solo .dsl-deco { animation: dsl-rise .3s cubic-bezier(.2, .7, .2, 1) both; }
.swap.on .dsl-pen, html.swapping .dsl-pen, .dsl-solo .dsl-pen { animation: dsl-write .5s .3s cubic-bezier(.25, .6, .3, 1) both; }
.swap.on .dsl-full, html.swapping .dsl-full, .dsl-solo .dsl-full { animation: dsl-settle .1s .78s ease-out both; }
@keyframes dsl-rise { from { opacity: 0; transform: translateY(22%); } to { opacity: 1; transform: none; } }
@keyframes dsl-write { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }
@keyframes dsl-settle { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .dsl-deco, .dsl-full { opacity: 1 !important; animation: none !important; }
  .dsl-pen { animation: none !important; }
}

  /* ======================================================================
     Billing pages: header links, dashboard, clients, document form, manage, verify.
     Tokens from base.css, kit from ui.css.
     ====================================================================== */
  .bar-in .nav { display: flex; gap: 24px; flex: 1 1 auto; min-width: 0; align-self: stretch; }
  .navlink { display: flex; align-items: center; color: var(--muted); font-weight: 600; text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; }
  .navlink:hover { color: var(--ink); }
  .navlink[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
  .newlink { min-height: 40px; padding: 0 20px; }
  .whoami { display: none; line-height: 1.2; text-align: right; }
  .whoami b { display: block; font-size: 13px; } .whoami small { color: var(--muted); font-size: 12px; }
  @media (min-width: 900px) { .whoami { display: block; } }
  @media (max-width: 680px) {
    .bar-in { flex-wrap: wrap; row-gap: 0; padding: 10px 16px 0; gap: 12px; }
    .bar-in .nav { order: 3; flex-basis: 100%; gap: 20px; min-height: 40px; }
    .newlink { padding: 0 14px; min-height: 36px; } .nl-more { display: none; }
  }

  .app { max-width: 1200px; margin: 0 auto; padding: 40px 24px 96px; }
  .dash-sub { margin: 8px 0 24px; color: var(--muted); font-size: 14px; animation: rise .4s .05s var(--ease) both; }
  @media (max-width: 560px) { .app { padding: 24px 16px 80px; } h1 { font-size: 30px; } }

  .dash-empty { text-align: center; padding: 56px 24px; background: var(--surface); border-block: 1px solid var(--line); animation: rise .4s var(--ease) both; }
  .dash-empty h2 { margin: 0 0 8px; font: 700 24px/1.15 var(--sans); }
  .dash-empty p { margin: 0 auto 24px; max-width: 44ch; color: var(--muted); }

  /* ---------------- numbers: the stat row ---------------- */
  .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 24px; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--line); }
  .stat { display: flex; flex-direction: column; gap: 4px; padding: 20px 16px; border-inline-end: 1px solid var(--line); animation: rise .38s var(--ease) both; animation-delay: calc(var(--i, 0) * 50ms); }
  .stat:last-child { border-inline-end: 0; }
  .stat-k { font: 600 11px/1.3 var(--sans); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
  .stat-v { margin-top: 4px; font: 700 24px/1.1 var(--sans); letter-spacing: -.3px; font-variant-numeric: tabular-nums; }

  .stat.accent .stat-v { color: var(--accent-text); } .stat .stat-v.zero { color: var(--subtle); } .stat.bad .stat-v { color: var(--danger); } .stat.ok .stat-v { color: var(--success); }
  .stat-n { margin-top: 4px; font-size: 13px; color: var(--muted); }
  @media (max-width: 860px) {
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat:nth-child(2n) { border-inline-end: 0; } .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  }
  @media (max-width: 560px) { .stat-v { font-size: 20px; } }

  /* ---------------- filters ---------------- */
  .dash-tools { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; animation: rise .4s .1s var(--ease) both; }
  .dash-tools .fld { min-width: 150px; }
  .dash-tools .fld.grow { flex: 1 1 240px; }
  .dash-tools .fld label { font-size: 13px; }
  .dash-tools .fld input, .dash-tools .fld select { min-height: 42px; font-size: 15px; }
  .dash-tools .chips { align-items: center; }
  .dash-tools .chip { min-height: 42px; padding: 0 14px; font-size: 14px; }
  /* colour-coded status chips: a dot in the status colour, the whole chip filled with it when lit */
  .chip[data-tone]::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; background: var(--tone); }
  .chip[data-tone="ink"] { --tone: var(--ink); --on-tone: var(--bg); } .chip[data-tone="bad"] { --tone: var(--danger); --on-tone: var(--on-state); }
  .chip[data-tone="part"] { --tone: var(--accent); --on-tone: var(--on-accent); } .chip[data-tone="ok"] { --tone: var(--success); --on-tone: var(--on-state); }
  .chip[data-tone][aria-pressed="true"] { background: var(--tone); border-color: var(--tone); color: var(--on-tone); }
  .chip[data-tone][aria-pressed="true"]::before { background: currentColor; }
  .chip.more::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 9px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .15s; }
  .chip.more[aria-expanded="true"]::after { transform: rotate(225deg) translate(-2px, -2px); }
  .tab-n { margin-left: 8px; padding: 1px 7px; background: var(--sunken); color: var(--muted); font: 600 12px/1.5 var(--sans); }

  /* ---------------- the list: rules, not boxes ---------------- */
  .inv-list { background: var(--surface); border-block: 1px solid var(--line); }
  .inv-row {
    display: grid; grid-template-columns: 1.15fr 1.6fr 1.1fr 1fr 92px; gap: 16px; align-items: center; width: 100%;
    padding: 14px 16px; border: 0; border-top: 1px solid var(--line); background: none; text-align: left; color: var(--ink);
    animation: rise .32s var(--ease) both; animation-delay: calc(var(--i, 0) * 28ms); transition: background-color .14s;
  }
  .inv-row.go { cursor: pointer; }
  .inv-row.go:hover, .inv-row.go:focus-visible { background: var(--sunken); outline: none; }
  .reflink { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
  .reflink:hover { text-decoration-thickness: 2px; } .reflink:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  .inv-head { cursor: default; border-top: 0; padding: 12px 16px; font: 600 11px/1 var(--sans); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); animation: none; }
  .inv-row small { display: block; color: var(--muted); font-size: 13px; }
  .inv-row b { font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
  .inv-rep { color: var(--accent-text) !important; }
  .inv-total { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
  .inv-total small { font-weight: 400; }
  .inv-head span:nth-child(4), .inv-st { text-align: right; }
  .inv-client, .inv-who { min-width: 0; }
  .inv-client b, .inv-client small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .more-btn { margin: 16px auto; display: flex; }
  @media (max-width: 760px) {
    .inv-head { display: none; }
    .inv-row { grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px 16px; }
    .inv-client { grid-column: 1; grid-row: 2; } .inv-who { grid-column: 1; grid-row: 3; }
    .inv-total { grid-column: 2; grid-row: 1; } .inv-st { grid-column: 2; grid-row: 2; align-self: start; }
    .inv-no { grid-column: 1; grid-row: 1; }
  }

  /* ---------------- clients ---------------- */
  .cl-row { grid-template-columns: 2fr 90px 130px 1.6fr; }
  .cl-row .inv-total small { margin: 0; }
  .cl-n { font-variant-numeric: tabular-nums; }
  .cl-sums { text-align: right; } .cl-sums > span { display: block; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .cl-sums small { color: var(--muted); font-weight: 400; }
  .cl-hist { grid-template-columns: 1.2fr 1fr 1fr; }
  @media (max-width: 760px) {
    .cl-row { grid-template-columns: 1fr auto; }
    .cl-row .cl-name { grid-column: 1 / -1; grid-row: auto; } .cl-row .cl-sums { grid-column: 1 / -1; text-align: left; }
    .cl-n::after { content: " documents"; color: var(--muted); } .cl-row > :nth-child(3) { text-align: right; color: var(--muted); font-size: 14px; }
    .cl-hist { grid-template-columns: 1fr auto; }
  }

  /* ---------------- one document, in the overlay ---------------- */
  .d-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin: 2px 0 16px; }
  .d-client { margin-top: 8px; text-align: left; } .d-client b { display: block; font-size: 18px; } .d-client span { color: var(--muted); font-size: 14px; }
  .d-amt { text-align: right; } .d-amt small { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; }
  .d-total { font: 700 28px/1.1 var(--sans); letter-spacing: -.5px; color: var(--accent-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .d-facts { display: grid; grid-template-columns: 110px 1fr; gap: 6px 16px; margin: 0 0 16px; padding: 16px; background: var(--sunken); font-size: 14px; }
  .d-facts dt { color: var(--muted); } .d-facts dd { margin: 0; word-break: break-word; }
  .d-scroll { overflow-x: auto; }
  .d-lines { width: 100%; border-collapse: collapse; font-size: 14px; }
  .d-lines th { text-align: left; padding: 8px 8px 8px 0; font: 600 11px var(--sans); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--ink); white-space: nowrap; }
  .d-lines td { padding: 12px 8px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
  .d-lines .r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .d-lines .b { font-weight: 600; }
  .d-lines td:first-child { min-width: 150px; } .d-lines td small { display: block; color: var(--muted); }
  .d-acts { display: flex; gap: 12px; flex-wrap: wrap; margin: 24px 0 8px; }
  .d-acts.view-acts { margin: 8px 0 16px; }
  .d-acts .btn { min-height: 40px; padding: 0 18px; font-size: 14px; }
  .d-form { animation: rise .25s var(--ease) both; }
  .d-form:empty { display: none; }
  .inline-form { margin-top: 12px; padding: 16px; background: var(--sunken); }
  .inline-form .btn { margin-top: 12px; }
  .inline-note { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
  .d-bar { height: 6px; margin: 2px 0 16px; background: var(--sunken); overflow: hidden; }
  .d-bar i { display: block; height: 100%; background: var(--success); animation: bar-in .45s var(--ease) both; transform-origin: left; }
  @keyframes bar-in { from { transform: scaleX(0); } }
  .d-h { margin: 24px 0 8px; font: 600 11px/1 var(--sans); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
  .d-pays { border-block: 1px solid var(--line); }
  .d-pay { display: grid; grid-template-columns: 96px 1fr auto 32px; gap: 12px; align-items: center; padding: 10px 0; animation: rise .3s var(--ease) both; }
  .d-pay + .d-pay { border-top: 1px solid var(--line); }
  .d-pay-d { color: var(--muted); font-size: 14px; }
  .d-pay-w b { display: block; font-size: 14px; font-weight: 600; } .d-pay-w small { color: var(--muted); font-size: 13px; }
  .d-pay-a { font-weight: 700; color: var(--success); white-space: nowrap; font-variant-numeric: tabular-nums; }
  @media (max-width: 560px) {
    .d-facts { grid-template-columns: 84px 1fr; } .d-total { font-size: 22px; }
    .d-acts .btn { flex: 1 1 auto; }
    .d-pay { grid-template-columns: 1fr auto 32px; } .d-pay-d { grid-column: 1 / -1; }
  }

  /* ---------------- the document form ---------------- */
  .nf { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
  .nf-main { display: flex; flex-direction: column; gap: 24px; }
  .nf-card { background: var(--surface); border-top: 4px solid var(--rule); padding: 24px; animation: rise .38s var(--ease) both; }
  .nf-main .nf-card:nth-child(2) { animation-delay: .05s; } .nf-main .nf-card:nth-child(3) { animation-delay: .1s; }
  .nf-card.sticky { position: sticky; top: 88px; animation-delay: .08s; }
  .nf-h { margin: 0 0 4px; font: 700 20px/1.2 var(--sans); letter-spacing: -.2px; }
  .nf-sub { margin: 0 0 16px; color: var(--muted); font-size: 14px; }
  .nf-total { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 20px; padding: 16px 40px 16px 20px; background: var(--panel); color: var(--on-panel); }
  .nf-total::after { content: ""; position: absolute; inset-inline-end: -22px; inset-block-end: -22px; width: 44px; height: 44px; background: var(--magenta); transform: rotate(45deg); }   /* the diamond cut into the corner */
  .nf-total span { font: 600 11px/1 var(--sans); letter-spacing: 1px; text-transform: uppercase; }
  .nf-total b { font: 700 24px/1.1 var(--sans); letter-spacing: -.3px; color: var(--pink-glow); text-align: right; word-break: break-all; font-variant-numeric: tabular-nums; }
  .nf-total + .fld, .nf-total + .fld-row { margin-top: 20px; }
  .nf-card.sticky .fld + .fld, .nf-card.sticky .fld + .fld-row, .nf-card.sticky .fld-row + .fld, .nf-card.sticky .fld + .sw { margin-top: 16px; }
  .nf-card .fld-row .fld + .fld { margin-top: 0; }
  .sw + .fld, .sw + .sw { margin-top: 16px; }
  .nf-card.sticky .nf-total { margin-bottom: 0; }

  /* a line: product, description, H W D, how it is priced, qty / price / amount, reference picture */
  .ln-pk { display: flex; gap: 8px; align-items: center; } .ln-save { flex: none; min-height: 36px; padding: 6px 12px; font-size: 13px; } .ln-save .btn-l { display: inline-flex; align-items: center; gap: 6px; } .ln-pk select { flex: 1 1 0; min-width: 0; } .ln-pk select[hidden] { display: none; }
  .seg { display: inline-flex; align-self: flex-start; border: 1px solid var(--line-strong); border-radius: var(--r-sm); overflow: hidden; }
  .seg button { min-height: 34px; padding: 0 14px; border: 0; background: var(--surface); font: 600 13px/1 var(--sans); color: var(--muted); transition: background-color .12s, color .12s; }
  .seg button + button { border-left: 1px solid var(--line-strong); }
  .seg button:hover { color: var(--ink); } .seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
  .seg button:focus-visible { outline-offset: -3px; }
  /* the picture box: choose, drop or paste */
  .pic { position: relative; display: flex; align-items: stretch; gap: 8px; border: 1px dashed var(--line-strong); transition: border-color .15s, background-color .15s; }
  .pic:hover, .pic:focus-within, .pic.over { border-color: var(--ink); } .pic.over { background: var(--sunken); }
  .pic + .fld, .pic + .fld-row { margin-top: 16px; }
  .pic-main { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 8px; border: 0; background: none; text-align: left; }
  .pic-main img, .pic-ph { width: 56px; height: 56px; flex: none; }
  .pic-main img { object-fit: contain; background: var(--sunken); border: 1px solid var(--line); }
  .pic-ph { display: grid; place-items: center; background: var(--sunken); color: var(--muted); }
  .pic-main img[hidden], .pic-ph[hidden], .pic-rm[hidden] { display: none; }
  .pic-t b { display: block; font: 600 14px/1.3 var(--sans); } .pic-t small { display: block; color: var(--muted); font-size: 13px; }
  .pic-rm { align-self: center; margin-right: 8px; padding: 8px 12px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--danger); font: 600 13px/1 var(--sans); }
  .pic-rm:hover { border-color: var(--danger); }
  .pic.busy .pic-main { pointer-events: none; }
  .pic.busy img { display: none; } .pic.busy .pic-ph, .pic.busy .pic-ph[hidden] { display: grid; }
  .pic.busy .pic-ph { background: linear-gradient(90deg, var(--sunken) 25%, var(--line) 50%, var(--sunken) 75%) 0 0 / 200% 100%; animation: shimmer 1s linear infinite; }
  .pic.busy .pic-ph svg { opacity: 0; }
  .pic.busy .pic-ph::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ink); border-right-color: transparent; animation: spin .7s linear infinite; }
  .pic-ph { position: relative; }
  @keyframes shimmer { to { background-position: -200% 0; } }
  .ln { display: flex; flex-direction: column; gap: 12px; padding: 20px 0; border-top: 1px solid var(--line); }
  .ln:first-child { padding-top: 0; border-top: 0; }
  .ln-d { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  .ln textarea, .ln input:not([type="file"]), .ln select {
    width: 100%; min-height: 46px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    font: 400 16px/1.4 var(--sans); transition: border-color .15s;
  }
  .ln textarea { resize: none; overflow: hidden; }
  .ln input[inputmode] { text-align: right; }
  .ln select { min-height: 36px; padding: 6px 12px; font-size: 14px; color: var(--muted); }
  .ln textarea:focus-visible, .ln input:focus-visible, .ln select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--ink); }
    .ln-bot { display: grid; grid-template-columns: 1fr 1fr auto 32px; gap: 12px; align-items: center; }
  .ln-amt { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .ln-amt small { display: block; color: var(--muted); font-weight: 400; font-size: 12px; }
  .add-line { margin-top: 8px; }
  @media (max-width: 900px) { .nf { grid-template-columns: 1fr; } .nf-card.sticky { position: static; } }
  @media (max-width: 620px) {
    .nf-card { padding: 20px 16px; }
    .ln-bot { grid-template-columns: 1fr 1fr 32px; } .ln-amt { grid-column: 1 / 3; text-align: left; } .ln-bot .icb { grid-column: 3; grid-row: 2; }
  }

  /* the quantity counter */
  .qty { display: flex; align-items: stretch; min-height: 46px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); overflow: hidden; transition: border-color .15s; }
  .qty:focus-within { border-color: var(--ink); outline: 2px solid var(--focus); outline-offset: 1px; }
  .ln .qty input { flex: 1; min-width: 0; width: auto; min-height: 0; border: 0; border-radius: 0; padding: 0 2px; text-align: center; background: none; font-variant-numeric: tabular-nums; }
  .ln .qty input:focus-visible { outline: none; }
  .qty-b { flex: none; width: 38px; border: 0; background: var(--sunken); color: var(--ink); font: 600 18px/1 var(--sans); user-select: none; -webkit-user-select: none; touch-action: manipulation; transition: background-color .12s, color .12s; }
  .qty-b:hover:not(:disabled) { background: var(--ink); color: var(--bg); }
  .qty-b:disabled { opacity: .4; cursor: default; }

  /* switches: tax note, payment already received */
  .sw { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; margin-top: 16px; padding: 12px 14px; background: var(--sunken); cursor: pointer; font-size: 14px; }
  .sw input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); cursor: pointer; }
  .sw span { font-weight: 600; }
  .sw small { grid-column: 2; color: var(--muted); font-size: 13px; line-height: 1.4; }
  .paid-box { margin-top: 12px; padding: 16px; background: var(--sunken); animation: rise .25s var(--ease) both; }
  .paid-box .fld + .fld { margin-top: 12px; }

  .done-card { max-width: 480px; margin: 40px auto 0; text-align: center; animation: card-in .4s var(--ease) both; }
  .done-card .dash-sub { margin-bottom: 24px; }
  .done-card .btn-row { flex-wrap: wrap; justify-content: center; }
  .done-card .btn-row > .btn { flex: 1 1 auto; }
  .done-tick { width: 56px; height: 56px; margin: 0 auto 16px; display: grid; place-items: center; background: color-mix(in srgb, var(--success) 14%, var(--surface)); color: var(--success); animation: card-in .4s .08s var(--ease) both; }
  .v-card.bad .done-tick { background: color-mix(in srgb, var(--danger) 14%, var(--surface)); color: var(--danger); }
  .inv-preview { position: relative; width: 100%; max-width: 794px; margin: 16px auto 0; background: var(--sunken); overflow: hidden; border: 1px solid var(--line); animation: rise .4s var(--ease) both; }
  .inv-preview iframe { display: block; border: 0; transform-origin: top left; background: var(--sunken); }
  .done-view { max-width: 794px; margin: 24px auto 0; }
  .ovl-card.wide .inv-preview { border: 0; }

  /* ---------------- products ---------------- */
  .pr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
  .pr-card { display: flex; flex-direction: column; gap: 4px; padding: 0 0 14px; background: var(--surface); border: 1px solid var(--line); text-align: left; color: var(--ink);
    animation: rise .32s var(--ease) both; animation-delay: calc(var(--i, 0) * 28ms); transition: border-color .15s, transform .12s var(--ease); }
  .pr-card:hover, .pr-card:focus-visible { border-color: var(--ink); outline: none; } .pr-card:active { transform: scale(.985); }
  .pr-pic { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; margin-bottom: 8px; background: var(--sunken); overflow: hidden; }
  .pr-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } .pr-pic b { font: 700 44px/1 var(--sans); color: var(--subtle); }
  .pr-card > :not(.pr-pic) { margin: 0 14px; }
  .pr-name { font: 600 16px/1.35 var(--sans); } .pr-price { font: 700 15px/1.3 var(--sans); color: var(--accent-text); font-variant-numeric: tabular-nums; }
  .pr-card small { color: var(--muted); font-size: 13px; }
  .pr-lab { margin: 16px 0 8px; font: 600 14px/1.3 var(--sans); }
  .pr-box { margin-top: 12px; } .pr-box[hidden] { display: none; }
  .pk-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
  .pk-row { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 32px; gap: 8px; align-items: center; }
  .pk-row input { width: 100%; min-height: 42px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm); font: 400 16px/1.4 var(--sans); }
  .pk-row input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--ink); }
  .pk-row input[inputmode] { text-align: right; }
  @media (max-width: 560px) { .pr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .pk-row { grid-template-columns: 1fr 1fr 32px; } .pk-row input:first-child { grid-column: 1 / -1; } .pk-row .icb { grid-column: 3; } }

  /* ---------------- manage ---------------- */
  .mg-bar { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
  .mg-bar .dash-sub { margin-top: 0; }
  .mg-add { min-height: 40px; }
  .mg-body { animation: rise .3s var(--ease) both; }
  .tm-card { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 16px; background: var(--surface); border-top: 1px solid var(--line); animation: rise .38s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
  .tm-card:last-child { border-bottom: 1px solid var(--line); }
  .tm-card.off { opacity: .6; }
  .tm-top { display: flex; gap: 12px; align-items: center; min-width: 240px; }
  .tm-who { min-width: 0; flex: 1; } .tm-who b { display: block; font-weight: 600; }
  .tm-who small { display: block; color: var(--muted); font-size: 13px; word-break: break-all; }
  .tm-tags { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
  .tm-tag { font: 600 12px/1.5 var(--sans); padding: 2px 9px; border-radius: var(--r-sm); background: var(--sunken); color: var(--ink); }
  .tm-tag.warn { background: none; border: 1px solid var(--line-strong); }
  .tm-tag.off { color: var(--danger); background: color-mix(in srgb, var(--danger) 13%, var(--surface)); }
  .tm-tag.live { color: var(--success); background: color-mix(in srgb, var(--success) 13%, var(--surface)); }
  .mg-edit { margin-left: auto; }
  .mg-item .tm-who { flex: 1; } .mg-price { font: 700 20px var(--sans); font-variant-numeric: tabular-nums; }
  .mg-form { display: flex; flex-direction: column; gap: 24px; max-width: 640px; }
  .mg-form .btn { align-self: flex-start; }
  .link-for { display: flex; gap: 12px; align-items: center; padding: 12px 14px; margin-bottom: 12px; background: var(--sunken); }
  .link-for b { display: block; } .link-for small { color: var(--muted); font-size: 13px; }
  .link-check { margin: 0 0 12px; font: 600 13px/1.5 var(--sans); color: var(--muted); }
  .link-check.good { color: var(--success); } .link-check.bad { color: var(--danger); }
  @media (max-width: 560px) { .tm-top { min-width: 0; flex-basis: 100%; } .mg-edit { margin-left: 0; width: 100%; } }

  /* ---------------- the public verify page ---------------- */
  .v-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
  .v-logo { display: block; width: 120px; margin: 0 auto 24px; }
  .v-card { width: 100%; max-width: 440px; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--rule); padding: 32px 30px; text-align: center; animation: card-in .4s .08s var(--ease) both; }
  .v-card h1 { margin: 0 0 8px; font-size: 30px; font-variant-numeric: tabular-nums; }
  .v-card .auth-kicker { margin: 0 0 4px; }
  .v-card.good .auth-kicker { color: var(--success); } .v-card.bad .auth-kicker { color: var(--danger); }
  .v-card .d-facts { text-align: left; margin: 20px 0 0; }
  .v-foot { margin-top: 20px; text-align: center; color: var(--muted); font-size: 13px; }
  .v-badge { display: inline-block; margin: 12px 0 8px; padding: 6px 24px; border: 2px solid currentColor; font: 700 36px/1.2 var(--sans); letter-spacing: 3px; }
  .v-badge.good, .v-when.good { color: var(--success); } .v-badge.bad, .v-when.bad { color: var(--danger); }
  .v-badge.warn { color: var(--ink); } .v-when.warn { color: var(--muted); }
  .v-when { margin: 0; font-weight: 600; font-size: 14px; }

  @media (prefers-reduced-motion: reduce) { .stat, .inv-row, .pr-card, .tm-card, .nf-card, .done-card, .v-card, .tl-row, .d-pay { animation-duration: .01ms !important; animation-delay: 0s !important; } }

  /* ---------------- the client chooser on the new-document form ---------------- */
  .cb { position: relative; }
  .cb-list { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 0; list-style: none; max-height: 300px; overflow: auto; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
  .cb-opt { padding: 10px 14px; cursor: pointer; border-top: 1px solid var(--line); } .cb-opt:first-child { border-top: 0; }
  .cb-opt.on, .cb-opt:hover { background: var(--sunken); }
  .cb-opt b { display: block; font-weight: 600; } .cb-opt small { display: block; color: var(--muted); font-size: 13px; }
  .cb-add { font-weight: 600; color: var(--accent-text); }
  .cl-sum { display: flex; flex-direction: column; gap: 4px; padding: 14px 0 0; border-top: 1px solid var(--line); }
  .cl-sum[hidden], .cl-fields[hidden], .cb[hidden] { display: none; }
  .cl-sum b { font-size: 17px; } .cl-sum span { color: var(--muted); }
  .cl-sum .btn-row, .cl-bar { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; }
  .cl-fields .fld + .fld, .cl-fields .fld-row, .cl-fields .fld-row + .fld { margin-top: 16px; }
  .nf-card.above { position: relative; z-index: 5; }