/* SeaPay® online banking — the One SeaPay design (Paymaster src/workstation/onesp.css + walletKinds.css),
   on the web. Night = :root, Day = [data-theme='light'] or the system's light mode when "follow" is chosen. */
@font-face { font-family: IvyMode; src: url(/assets/fonts/ivy-mode-regular.woff) format('woff'), url(/assets/fonts/ivy-mode-regular.ttf) format('truetype'); font-weight: 400; font-display: block; }
@font-face { font-family: Raleway; src: url(/assets/fonts/raleway-var.woff2) format('woff2'); font-weight: 300 700; font-display: fallback; }

:root {
  --font-display: IvyMode, 'Times New Roman', serif;
  --font-text: Raleway, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --sp-bg: #06080c;
  --sp-sky: radial-gradient(70% 46% at 92% -8%, rgba(123, 35, 66, 0.26), transparent 70%), radial-gradient(50% 40% at 10% -10%, rgba(44, 58, 92, 0.22), transparent 70%);
  --sp-card: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  --sp-panel: #0b0d13;
  --sp-line: rgba(236, 235, 231, 0.1);
  --sp-line2: rgba(236, 235, 231, 0.06);
  --sp-ink: #f2f1ed; --sp-text: #ecebe7; --sp-dim: #c8ccd4; --sp-muted: #a9adb8; --sp-label: #8b909c;
  --sp-rose: #d98aa8; --sp-rose-l: #ecd0db; --sp-rose-line: rgba(217, 138, 168, 0.45); --sp-rose-soft: rgba(217, 138, 168, 0.14);
  --sp-chip: rgba(255, 255, 255, 0.07);
  --sp-ok: #6fcf97; --sp-ok-soft: rgba(111, 207, 151, 0.13);
  --sp-warn: #f0b45a; --sp-warn-soft: rgba(240, 180, 90, 0.13);
  --sp-bad: #ff8a80; --sp-bad-soft: rgba(255, 138, 128, 0.13);
  --sp-in: #9fe0b8;
  --sp-light: #f8eef2; --sp-glow: 0 0 8px 2px rgba(217, 138, 168, 0.55), 0 0 18px 4px rgba(123, 35, 66, 0.35);
  --sp-sel: linear-gradient(90deg, rgba(217, 138, 168, 0.13), rgba(217, 138, 168, 0.02));
  --sp-pri-color: #0a0c10; --sp-pri-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(236, 235, 231, 0.84)); --sp-pri-border: rgba(255, 255, 255, 0.65);
  --sp-pri-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95), inset 0 -2px 4px rgba(0, 0, 0, 0.12), 0 8px 22px rgba(0, 0, 0, 0.32);
  --sp-g-color: #ecebe7; --sp-g-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.035)); --sp-g-border: rgba(255, 255, 255, 0.17);
  --sp-g-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.35), 0 6px 18px rgba(0, 0, 0, 0.3);
  --sp-side: #080a10; --sp-field: rgba(255, 255, 255, 0.04); --sp-side-line: rgba(236, 235, 231, 0.1); --sp-hover: rgba(255, 255, 255, 0.04);
  --sp-wine-soft: rgba(123, 35, 66, 0.28); --sp-solid: #f2f1ed; --sp-solid-text: #0a0c10;
  --sp-scrim: rgba(3, 4, 7, 0.55);
  color-scheme: dark;
}
:root[data-theme='light'] {
  --sp-bg: #f5f5f5; --sp-sky: none; --sp-card: #ffffff; --sp-panel: #fbfbfb; --sp-line: #e4e4e4; --sp-line2: #efefef;
  --sp-ink: #000000; --sp-text: #1a1a1a; --sp-dim: #333333; --sp-muted: #555555; --sp-label: #6b6b6b; --sp-rose: #7B2342; --sp-rose-l: #4F1629;
  --sp-rose-line: rgba(123, 35, 66, 0.35); --sp-rose-soft: rgba(123, 35, 66, 0.08); --sp-chip: rgba(0, 0, 0, 0.05);
  --sp-ok: #1f7a36; --sp-ok-soft: rgba(31, 122, 54, 0.1); --sp-warn: #9a5200; --sp-warn-soft: rgba(154, 82, 0, 0.1); --sp-bad: #c0151b; --sp-bad-soft: rgba(192, 21, 27, 0.08);
  --sp-in: #1f7a36; --sp-light: #7B2342; --sp-glow: none; --sp-sel: linear-gradient(90deg, rgba(123, 35, 66, 0.09), rgba(123, 35, 66, 0.01));
  --sp-pri-color: #ffffff; --sp-pri-bg: linear-gradient(180deg, #3a3a40, #08080a); --sp-pri-border: #000000; --sp-pri-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 6px 16px rgba(0, 0, 0, 0.18);
  --sp-g-color: #000000; --sp-g-bg: #ffffff; --sp-g-border: #d6d6d6; --sp-g-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  --sp-side: #ececec; --sp-field: #ffffff; --sp-side-line: #dedede; --sp-hover: rgba(0, 0, 0, 0.04); --sp-wine-soft: rgba(123, 35, 66, 0.1);
  --sp-solid: #0a0c10; --sp-solid-text: #ffffff; --sp-scrim: rgba(20, 20, 24, 0.28);
  color-scheme: light;
}

/* ── the page ─────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--sp-bg); color: var(--sp-text); font-family: var(--font-text); font-size: 14px; line-height: 1.45; font-variant-numeric: lining-nums tabular-nums; -webkit-font-smoothing: antialiased; }
body { overflow: hidden; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* phones and tablets: an app, so the page never zooms — iOS zooms into any field under 16 px when it gets the focus */
@media (pointer: coarse) {
  html, body { touch-action: pan-x pan-y; }
  /* html … outranks the field rules further down and in cards.css; the money fields (22 px) and code boxes (26 px) keep theirs */
  html .field input, html .field select, html .field textarea, html .search input, html .cd-pan input { font-size: 16px; }
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--sp-rose); }
:focus-visible { outline: 2px solid var(--sp-rose); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.word { font-family: var(--font-display); font-weight: 400; display: inline-flex; align-items: baseline; gap: 1px; color: var(--sp-ink); }
.word sup { font-size: 0.34em; line-height: 1; align-self: flex-start; margin-top: 0.18em; }

/* ── the frame: sidebar · main ────────────────────────────────────────────────────────── */
#app { height: 100%; }
.frame { height: 100%; display: grid; grid-template-columns: 248px minmax(0, 1fr); }
.side { background: var(--sp-side); border-right: 1px solid var(--sp-side-line); display: flex; flex-direction: column; min-height: 0; }
.side-head { padding: 30px 18px 22px; display: flex; flex-direction: column; gap: 6px; }
.side-head .word { font-size: 30px; }
.side-app { font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sp-label); }
.nav { flex: 1 1 auto; overflow: auto; padding: 0 10px; display: flex; flex-direction: column; gap: 2px; }
.nav-cap { margin: 10px 10px 6px; font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sp-label); }
.nav a { position: relative; display: flex; align-items: center; gap: 11px; height: 38px; padding: 0 12px 0 14px; border-radius: 10px; color: var(--sp-dim); text-decoration: none; font-size: 13.5px; font-weight: 500; }
.nav a svg { color: var(--sp-label); }
.nav a:hover { background: var(--sp-hover); color: var(--sp-ink); }
.nav a.on { background: var(--sp-sel); color: var(--sp-ink); font-weight: 600; }
.nav a.on svg { color: var(--sp-rose); }
.nav a .light { position: absolute; left: 4px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 3px; background: transparent; }
.nav a.on .light { background: var(--sp-light); box-shadow: var(--sp-glow); }
.nav a .count { margin-left: auto; font-size: 10.5px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--sp-chip); color: var(--sp-dim); }
.side-pay { margin: 14px 12px 6px; }
.side-pay .btn { width: 100%; height: 36px; }
.side-foot { flex-shrink: 0; display: flex; align-items: center; gap: 4px; padding: 8px 10px; border-top: 1px solid var(--sp-side-line); position: relative; }
.person { flex: 1 1 auto; min-width: 0; height: 40px; border: 0; background: transparent; border-radius: 10px; display: flex; align-items: center; gap: 9px; padding: 0 6px; cursor: pointer; text-align: left; }
.person:hover { background: var(--sp-hover); }
.av { width: 26px; height: 26px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; background: var(--sp-wine-soft); color: var(--sp-rose); flex-shrink: 0; letter-spacing: 0.02em; }
.person-t { display: flex; flex-direction: column; min-width: 0; }
.person-n { font-size: 12.5px; font-weight: 600; color: var(--sp-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-s { font-size: 11px; color: var(--sp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu { position: fixed; left: 10px; bottom: 58px; min-width: 200px; padding: 6px; border-radius: 12px; background: var(--sp-panel); border: 1px solid var(--sp-line); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45); display: flex; flex-direction: column; gap: 1px; z-index: 60; }
.menu button, .menu a { display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; text-align: left; color: var(--sp-text); text-decoration: none; font-size: 13px; }
.menu button:hover, .menu a:hover { background: var(--sp-sel); }
.menu .sep { height: 1px; background: var(--sp-line2); margin: 4px 2px; }
.menu .bad { color: var(--sp-bad); }

.main { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--sp-sky), var(--sp-bg); }
.head { display: flex; align-items: flex-end; gap: 14px; padding: 26px 32px 18px; border-bottom: 1px solid var(--sp-line2); flex: 0 0 auto; }
.head-t { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.crumb { font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sp-label); min-height: 12px; line-height: 12px; display: flex; gap: 8px; align-items: center; }
.crumb a { color: inherit; text-decoration: none; }
.crumb a:hover { color: var(--sp-ink); }
.h1 { display: flex; align-items: baseline; gap: 14px; margin: 0; min-width: 0; font-weight: 400; }
.h1 .t { font-family: var(--font-display); font-weight: 400; font-size: 38px; line-height: 1.05; color: var(--sp-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.head-chips { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.head-acts { display: flex; gap: 8px; align-items: center; margin-left: auto; flex-shrink: 0; }
.body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 24px 32px 40px; scroll-behavior: smooth; }
.status { height: 40px; flex-shrink: 0; border-top: 1px solid var(--sp-line2); display: flex; align-items: center; gap: 12px; padding: 0 32px; font-size: 11.5px; color: var(--sp-muted); white-space: nowrap; overflow: hidden; }
.status .dot { width: 6px; height: 6px; border-radius: 3px; background: var(--sp-label); flex: 0 0 auto; }
.status .dot.ok { background: var(--sp-ok); }
.status .dot.demo { background: var(--sp-warn); }
.status .dot.busy { animation: pulse 1s ease-in-out infinite; }
.status .sep { color: var(--sp-line); }
.status .r { margin-left: auto; }
@keyframes pulse { 50% { opacity: 0.3; } }

/* the demo ribbon: honest about where the numbers come from */
.demo-band { display: flex; align-items: center; gap: 10px; padding: 9px 32px; font-size: 12px; color: var(--sp-warn); background: var(--sp-warn-soft); border-bottom: 1px solid var(--sp-line2); }
.demo-band b { font-weight: 600; }
.demo-band svg { flex: 0 0 auto; }
.demo-band { line-height: 1.45; }
.demo-band a:focus-visible { outline-color: currentColor; }
/* "Sample bank": a badge that stays in the sidebar head / phone top bar, and a strip on every panel (SWB-10) */
.sample-tag { flex: 0 0 auto; letter-spacing: 0.04em; text-transform: uppercase; font-size: 10px; border: 1px solid var(--sp-warn); }
.side-head .sample-tag { align-self: flex-start; margin-top: 8px; }
.sheet-sample { flex: 0 0 auto; padding: 8px 24px; font-size: 12px; font-weight: 600; color: var(--sp-warn); background: var(--sp-warn-soft); border-bottom: 1px solid var(--sp-line2); }
/* sign-in, sample bank: the plain statement above the form, the explanation above the button */
.note.warn.preview, .note.bad.preview { font-size: 14px; line-height: 1.55; color: var(--sp-text); }
.note.preview { border: 1px solid var(--sp-warn); }
.note.preview.bad { border-color: var(--sp-bad); }
.note.preview > svg { margin-top: 3px; }
.note.warn.preview > svg { color: var(--sp-warn); }
.note.bad.preview > svg { color: var(--sp-bad); }
.note.preview b { color: var(--sp-warn); }
.note.preview.bad b { color: var(--sp-bad); }
.preview-t { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.preview-links { display: flex; flex-wrap: wrap; gap: 6px 16px; font-weight: 600; font-size: 13.5px; }
.demo-hint { margin: 0; padding: 10px 12px; border-left: 3px solid var(--sp-warn); border-radius: 4px 10px 10px 4px; background: var(--sp-warn-soft); font-size: 13.5px; line-height: 1.5; color: var(--sp-text); }
.demo-hint b { color: var(--sp-warn); font-weight: 600; }

/* ── components ───────────────────────────────────────────────────────────────────────── */
.eb { font-size: 10.5px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--sp-rose); }
.lbl { font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sp-label); }
.serif { font-family: var(--font-display); font-weight: 400; }
.muted { color: var(--sp-muted); }
.dim { color: var(--sp-dim); }
.lead { margin: 0 0 6px; font-size: 13.5px; color: var(--sp-dim); line-height: 1.55; }
.ph { color: var(--sp-label); font-style: italic; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px; border-radius: 999px; font-size: 10.5px; font-weight: 600; white-space: nowrap; background: var(--sp-chip); color: var(--sp-dim); }
.chip.ok { background: var(--sp-ok-soft); color: var(--sp-ok); }
.chip.warn { background: var(--sp-warn-soft); color: var(--sp-warn); }
.chip.bad { background: var(--sp-bad-soft); color: var(--sp-bad); }
.chip.rose { background: var(--sp-rose-soft); color: var(--sp-rose); }
.chip.line { background: transparent; border: 1px solid var(--sp-line); color: var(--sp-dim); font-weight: 500; }
.lnk { font: inherit; font-size: 12.5px; font-weight: 600; color: var(--sp-rose); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; white-space: nowrap; }
.lnk:hover { text-decoration: underline; }

.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 999px; font-size: 12.5px; font-weight: 500; white-space: nowrap; cursor: pointer; text-decoration: none; color: var(--sp-g-color); background: var(--sp-g-bg); border: 1px solid var(--sp-g-border); box-shadow: var(--sp-g-shadow); transition: filter 0.12s ease; }
.btn:hover { filter: brightness(1.12); }
.btn.pri { color: var(--sp-pri-color); font-weight: 600; background: var(--sp-pri-bg); border-color: var(--sp-pri-border); box-shadow: var(--sp-pri-shadow); }
.btn.pri:hover { filter: brightness(1.04); }
.btn.wine { color: #fff; font-weight: 600; background: linear-gradient(180deg, rgba(176, 64, 104, 0.94), rgba(79, 22, 41, 0.96)); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 8px 22px rgba(123, 35, 66, 0.4); }
.btn.ghost { background: transparent; box-shadow: none; border-color: var(--sp-line); }
.btn.danger { color: var(--sp-bad); background: var(--sp-bad-soft); border-color: transparent; box-shadow: none; }
.btn.lg { height: 40px; padding: 0 20px; font-size: 13.5px; }
.btn.sm { height: 28px; padding: 0 11px; font-size: 12px; }
.btn:disabled { opacity: 0.45; cursor: default; filter: none; }
.btn.is-busy { color: transparent !important; }
.btn.is-busy::after { content: ''; position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--sp-muted); border-top-color: transparent; animation: spin 0.8s linear infinite; }
.btn.pri.is-busy::after { border-color: var(--sp-pri-color); border-top-color: transparent; }
.ibtn { width: 30px; height: 30px; border: 0; background: transparent; border-radius: 9px; color: var(--sp-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; flex: 0 0 auto; }
.ibtn:hover { background: var(--sp-hover); color: var(--sp-ink); }
.ibtn.lg { width: 36px; height: 36px; }
.ibtn.copy { width: 24px; height: 24px; border-radius: 7px; margin-left: 6px; vertical-align: -6px; color: var(--sp-label); }
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--sp-line); border-top-color: var(--sp-rose); animation: spin 0.8s linear infinite; display: inline-block; flex: 0 0 auto; }
.spin-row { display: flex; align-items: center; gap: 10px; color: var(--sp-muted); font-size: 12.5px; padding: 14px 2px; }

.seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; background: var(--sp-chip); }
.seg > button { height: 28px; padding: 0 13px; border: 0; border-radius: 999px; background: transparent; color: var(--sp-muted); cursor: pointer; font-size: 12.5px; white-space: nowrap; }
.seg > button:hover { color: var(--sp-ink); }
.seg > button.on { background: var(--sp-ink); color: var(--sp-bg); font-weight: 600; }
.seg > button:disabled { opacity: 0.4; cursor: default; }
.pill { height: 30px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--sp-line); background: transparent; color: var(--sp-dim); cursor: pointer; font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pill:hover { color: var(--sp-ink); }
.pill.on { border-color: var(--sp-rose-line); color: var(--sp-ink); background: var(--sp-rose-soft); font-weight: 600; }
.pill .x { opacity: 0.6; }

.card { position: relative; border-radius: 20px; background: var(--sp-card); border: 1px solid var(--sp-line); padding: 18px 20px; min-width: 0; }
.card + .card { margin-top: 16px; }
.card-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.card-h .lbl { flex: 1 1 auto; }
.kvs { display: flex; flex-direction: column; }
.kv { display: grid; grid-template-columns: minmax(130px, 38%) minmax(0, 1fr); gap: 14px; padding: 8px 0; border-top: 1px solid var(--sp-line2); font-size: 13px; align-items: baseline; }
.kv:first-child { border-top: 0; }
.kv .k { color: var(--sp-muted); }
.kv .v { color: var(--sp-ink); overflow-wrap: anywhere; }
.kv.mono .v { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.02em; }
/* a value with its copy button: the value wraps in its column, the button keeps its line at the right */
.kv .v.cp { display: flex; align-items: flex-start; gap: 10px; }
.kv .v.cp .vt { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.kv .v.cp .ibtn.copy { flex: none; margin: -3px 0 0; vertical-align: 0; }
/* funding: the payment reference the payer must use */
.fi-ref b.mono { font-family: var(--mono); letter-spacing: 0.02em; white-space: nowrap; }
.fi-ref .ibtn.copy { margin-left: 4px; vertical-align: -6px; }
.note { display: flex; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--sp-chip); color: var(--sp-dim); font-size: 12.5px; line-height: 1.5; }
.note svg { flex: 0 0 auto; margin-top: 1px; color: var(--sp-label); }
.note.warn { background: var(--sp-warn-soft); color: var(--sp-warn); }
.note.warn svg { color: var(--sp-warn); }
.note.bad { background: var(--sp-bad-soft); color: var(--sp-bad); }
.note.bad svg { color: var(--sp-bad); }
.note b { color: inherit; }
.empty { padding: 48px 20px; text-align: center; color: var(--sp-muted); }
.empty .serif { font-size: 26px; color: var(--sp-ink); display: block; margin-bottom: 6px; }

/* fields */
.field { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.f-label { font-size: 11.5px; font-weight: 600; color: var(--sp-label); letter-spacing: 0.02em; }
.field input, .field select, .field textarea { width: 100%; height: 42px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--sp-line); background: var(--sp-field); color: var(--sp-ink); outline: none; font-size: 14px; transition: border-color 0.12s ease; }
.field textarea { height: 84px; padding: 10px 14px; resize: vertical; line-height: 1.45; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 34px; background-image: linear-gradient(45deg, transparent 50%, var(--sp-label) 50%), linear-gradient(135deg, var(--sp-label) 50%, transparent 50%); background-position: calc(100% - 18px) 18px, calc(100% - 13px) 18px; background-size: 5px 5px; background-repeat: no-repeat; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--sp-rose-line); }
/* the keyboard ring: 2 px in the rose accent (Night #d98aa8, Day the wine rose #7B2342) — the border change alone was too faint (SWB-17) */
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--sp-rose); outline-offset: 2px; }
.field.bad input, .field.bad select, .field.bad textarea { border-color: var(--sp-bad); }
.field input::placeholder, .field textarea::placeholder { color: var(--sp-label); opacity: 0.7; }
.f-hint { font-size: 11.5px; color: var(--sp-muted); }
.f-err { font-size: 11.5px; color: var(--sp-bad); min-height: 0; }
.f-err:empty { display: none; }
.field .eye { position: absolute; right: 6px; top: 26px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stack { display: flex; flex-direction: column; gap: 14px; }

/* compact selects inside a filter bar */
.field.compact { flex-direction: row; gap: 0; }
.field.compact .f-label { display: none; }
.field.compact select { height: 30px; border-radius: 999px; font-size: 12.5px; padding: 0 30px 0 13px; background-color: transparent; color: var(--sp-dim); background-position: calc(100% - 16px) 13px, calc(100% - 11px) 13px; }

/* toasts */
#toasts { position: fixed; right: 20px; bottom: 54px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; max-width: 420px; padding: 10px 10px 10px 16px; border-radius: 14px; background: var(--sp-panel); border: 1px solid var(--sp-line); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4); font-size: 13px; color: var(--sp-ink); opacity: 0; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease; }
.toast.in { opacity: 1; transform: none; }
.toast.ok { border-color: rgba(111, 207, 151, 0.35); }
.toast.warn { border-color: var(--sp-warn); color: var(--sp-warn); }
.toast.bad { border-color: var(--sp-bad); color: var(--sp-bad); }

/* the sheet */
.scrim { position: fixed; inset: 0; background: var(--sp-scrim); opacity: 0; transition: opacity 0.2s ease; z-index: 900; }
.scrim.open { opacity: 1; }
.sheet { position: fixed; top: 0; right: 0; bottom: 0; width: 460px; max-width: 100vw; z-index: 901; display: flex; flex-direction: column; background: var(--sp-panel); border-left: 1px solid var(--sp-line); box-shadow: -24px 0 60px rgba(0, 0, 0, 0.35); transform: translateX(28px); opacity: 0; transition: transform 0.22s cubic-bezier(.22, 1, .36, 1), opacity 0.18s ease; }
.sheet.wide { width: 620px; }
.sheet.open { transform: none; opacity: 1; }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 24px 24px 14px; }
.sheet-titles { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sheet-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1.1; color: var(--sp-ink); }
.sheet-body { flex: 1 1 auto; overflow: auto; padding: 4px 24px 24px; display: flex; flex-direction: column; gap: 16px; }
.sheet-foot { flex: 0 0 auto; display: flex; gap: 10px; justify-content: flex-end; padding: 14px 24px 20px; border-top: 1px solid var(--sp-line2); }
.sheet-foot .btn { min-width: 110px; }

/* the 4-digit code */
.otp { display: flex; gap: 10px; justify-content: center; }
.otp input { width: 54px; height: 62px; text-align: center; font-size: 26px; font-family: var(--font-display); border-radius: 14px; border: 1px solid var(--sp-line); background: var(--sp-field); color: var(--sp-ink); outline: none; }
.otp input:focus { border-color: var(--sp-rose-line); box-shadow: 0 0 0 3px var(--sp-rose-soft); }
.otp input:focus-visible { outline: 2px solid var(--sp-rose); outline-offset: 2px; }
.otp.bad input { border-color: var(--sp-bad); }
.otp-msg { text-align: center; font-size: 12.5px; color: var(--sp-muted); min-height: 18px; }
.otp-msg.bad { color: var(--sp-bad); }
.otp-phone { display: flex; justify-content: center; color: var(--sp-rose); margin: 6px 0 2px; }

/* tabs inside a page */
.tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--sp-line2); margin-bottom: 18px; }
.tabs button { position: relative; height: 40px; padding: 0 2px; border: 0; background: transparent; cursor: pointer; color: var(--sp-muted); font-size: 13.5px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; }
.tabs button:hover { color: var(--sp-ink); }
.tabs button.on { color: var(--sp-ink); font-weight: 600; }
.tabs button.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--sp-rose); box-shadow: var(--sp-glow); }
.tabs .count { font-size: 10.5px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--sp-chip); color: var(--sp-dim); }

/* ── accounts: pages, not plastic ─────────────────────────────────────────────────────── */
.acc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.acc { position: relative; border-radius: 20px; background: var(--sp-card); border: 1px solid var(--sp-line); padding: 16px 18px 14px; display: flex; flex-direction: column; cursor: pointer; text-decoration: none; color: inherit; transition: border-color 0.15s ease, transform 0.15s ease; min-width: 0; }
.acc:hover { border-color: var(--sp-rose-line); transform: translateY(-1px); }
.acc.blocked { border-color: rgba(255, 138, 128, 0.35); }
.acc.closed { opacity: 0.7; }
.acc-top { display: flex; align-items: center; gap: 8px; min-height: 22px; }
.acc-name { font-size: 12.5px; color: var(--sp-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; }
.acc-bal { margin-top: 14px; font-family: var(--font-display); font-weight: 400; font-size: 36px; line-height: 1; color: var(--sp-ink); white-space: nowrap; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; }
.acc-bal small, .big small { font-size: 0.52em; color: var(--sp-dim); }
.acc-foot { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--sp-line2); font-size: 12px; color: var(--sp-muted); }
.acc-foot .num { font-variant-numeric: tabular-nums; }
.acc-foot .cards { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--sp-dim); }
.mini-card { width: 22px; height: 14px; border-radius: 3px; background: linear-gradient(135deg, #8a2a4c, #4f1629); display: inline-block; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.mini-card.blocked { background: repeating-linear-gradient(135deg, #5a5a62 0 3px, #3a3a40 3px 6px); }
.filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.filters .grow { flex: 1 1 auto; }
.totals { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 22px; }
.total { display: flex; flex-direction: column; gap: 4px; }
.total .fig { font-family: var(--font-display); font-size: 26px; color: var(--sp-ink); line-height: 1.05; white-space: nowrap; }

/* the account page */
.acc-hero > .card { margin-top: 0; }
.acc-hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; margin-bottom: 22px; }
.big { font-family: var(--font-display); font-weight: 400; font-size: 52px; line-height: 1; color: var(--sp-ink); white-space: nowrap; letter-spacing: -0.01em; }
.hero-sub { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; font-size: 12.5px; color: var(--sp-dim); }
.hero-sub b { color: var(--sp-ink); font-weight: 500; }
.acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.state-warn { margin-bottom: 18px; }

/* ── the ledger: day groups, rows, a drawer below the row ─────────────────────────────── */
.ledger { border-radius: 20px; border: 1px solid var(--sp-line); background: var(--sp-card); overflow: clip; }
.ledger-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 14px 16px; border-bottom: 1px solid var(--sp-line2); }
.ledger-bar .count { margin-left: auto; font-size: 12px; color: var(--sp-muted); white-space: nowrap; }
.search { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--sp-chip); color: var(--sp-label); min-width: 0; }
.search input { border: 0; background: transparent; outline: none; color: var(--sp-text); font-size: 12.5px; width: 150px; min-width: 0; }
.search input::placeholder { color: var(--sp-label); }
.search.on { background: var(--sp-rose-soft); color: var(--sp-rose); }
.ledger-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 16px 12px; }
.ledger-chips:empty { display: none; }
.day { padding: 14px 16px 6px; font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sp-label); display: flex; justify-content: space-between; }
.row { display: grid; grid-template-columns: 26px minmax(0, 1fr) minmax(0, 0.8fr) 150px 18px; column-gap: 14px; align-items: center; padding: 11px 16px; border-top: 1px solid var(--sp-line2); cursor: pointer; }
.row.hist { grid-template-columns: 26px minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 0.7fr) 150px 18px; }
.row:hover, .row.open { background: var(--sp-hover); }
.row .st { width: 26px; height: 26px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; background: var(--sp-chip); color: var(--sp-muted); }
.row .st.in { background: var(--sp-ok-soft); color: var(--sp-ok); }
.row .st.pending { background: var(--sp-warn-soft); color: var(--sp-warn); }
.row .st.rejected { background: var(--sp-bad-soft); color: var(--sp-bad); }
.row .what { min-width: 0; }
.row .t1 { font-size: 13.5px; font-weight: 600; color: var(--sp-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .t2 { font-size: 11.5px; color: var(--sp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; display: flex; gap: 8px; align-items: center; }
.row .col { font-size: 12px; color: var(--sp-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.row .amt { text-align: right; font-size: 14.5px; font-weight: 500; color: var(--sp-ink); white-space: nowrap; }
.row .amt.in { color: var(--sp-in); }
.row .amt.rej { color: var(--sp-muted); text-decoration: line-through; }
.row .amt small { display: block; font-size: 10.5px; font-weight: 500; color: var(--sp-muted); text-decoration: none; }
.row .chev { color: var(--sp-label); transition: transform 0.2s ease; display: inline-flex; }
.row.open .chev { transform: rotate(180deg); }
.state-tag { font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 999px; }
.state-tag.pending { background: var(--sp-warn-soft); color: var(--sp-warn); }
.state-tag.rejected { background: var(--sp-bad-soft); color: var(--sp-bad); }
.drawer { padding: 6px 16px 20px 56px; border-top: 1px solid var(--sp-line2); background: var(--sp-hover); }
.drawer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
.drawer .card { border-radius: 16px; padding: 14px 16px; background: var(--sp-panel); }
.drawer .card + .card { margin-top: 0; }
.drawer-side { display: flex; flex-direction: column; gap: 12px; }
.docs { display: flex; flex-direction: column; gap: 6px; }
.doc { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--sp-line); background: transparent; cursor: pointer; text-align: left; color: var(--sp-ink); font-size: 12.5px; }
.doc:hover { border-color: var(--sp-rose-line); }
.doc svg { color: var(--sp-rose); flex: 0 0 auto; }
.more { display: flex; justify-content: center; padding: 16px; border-top: 1px solid var(--sp-line2); }
.vp { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; }
.vp.ok { color: var(--sp-ok); } .vp.warn { color: var(--sp-warn); } .vp.bad { color: var(--sp-bad); } .vp.na { color: var(--sp-label); }

/* funding instructions */
.fi { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; }
.fi .copyall { margin-top: 14px; }

/* the sign-in */
.login { height: 100%; display: grid; place-items: center; padding: 24px; background: var(--sp-sky), var(--sp-bg); overflow: auto; position: relative; }
.login::before { content: ''; position: absolute; left: 0; right: 0; top: 64%; height: 1px; background: linear-gradient(90deg, transparent, rgba(217, 138, 168, 0.5), transparent); box-shadow: 0 0 40px 6px rgba(123, 35, 66, 0.35); pointer-events: none; }
:root[data-theme='light'] .login::before { opacity: 0.4; }
.login-card { position: relative; width: 100%; max-width: 420px; border-radius: 26px; padding: 34px 32px 28px; background: var(--sp-panel); border: 1px solid var(--sp-line); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); display: flex; flex-direction: column; gap: 18px; }
.login-card .word { font-size: 34px; }
.login-card h1 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1.12; color: var(--sp-ink); }
.login-card .lead { margin: -6px 0 0; }
.login-foot { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--sp-muted); }
.login-err { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 14px; background: var(--sp-bad-soft); color: var(--sp-bad); font-size: 12.5px; }
.login-err b { font-weight: 600; }
.login-top { position: absolute; top: 18px; right: 20px; display: flex; gap: 6px; }

/* wizard steps (payments, card order) */
.steps { display: flex; gap: 6px; align-items: center; margin-bottom: 22px; flex-wrap: wrap; }
.step { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--sp-label); }
.step i { width: 22px; height: 22px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 11px; font-weight: 700; border: 1px solid var(--sp-line); color: var(--sp-muted); }
.step.on { color: var(--sp-ink); font-weight: 600; }
.step.on i { background: var(--sp-ink); color: var(--sp-bg); border-color: var(--sp-ink); }
.step.done i { background: var(--sp-rose-soft); color: var(--sp-rose); border-color: transparent; }
.step + .step::before { content: ''; width: 22px; height: 1px; background: var(--sp-line); margin-right: 6px; }

/* ── phones ───────────────────────────────────────────────────────────────────────────── */
.tabbar { display: none; }
.topbar { display: none; }
@media (max-width: 860px) {
  /* an iPhone's home bar: one value for the tab bar, the page under it, toasts and sheet buttons, so they never disagree */
  :root { --safe-b: env(safe-area-inset-bottom, 0px); --tabbar-h: calc(68px + var(--safe-b)); }
  body { overflow: auto; }
  .frame { display: block; height: auto; min-height: 100%; }
  .side { display: none; }
  .topbar { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 50; height: 54px; padding: 0 16px; background: color-mix(in srgb, var(--sp-bg) 88%, transparent); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); border-bottom: 1px solid var(--sp-line2); }
  .topbar .word { font-size: 24px; }
  .topbar .r { margin-left: auto; display: flex; gap: 4px; }
  .main { min-height: calc(100vh - 54px); padding-bottom: calc(var(--tabbar-h) + 8px); }
  .head { padding: 18px 16px 14px; flex-wrap: wrap; }
  .h1 .t { font-size: 30px; }
  .head-acts { margin-left: 0; width: 100%; }
  .body { overflow: visible; padding: 16px 16px 30px; }
  .status { display: none; }
  .demo-band { padding: 8px 16px; }
  .tabbar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; height: var(--tabbar-h); padding: 6px 6px calc(6px + var(--safe-b)); background: color-mix(in srgb, var(--sp-panel) 92%, transparent); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); border-top: 1px solid var(--sp-line); }
  .tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 10.5px; font-weight: 500; color: var(--sp-muted); text-decoration: none; border-radius: 12px; position: relative; }
  .tabbar a.on { color: var(--sp-ink); }
  .tabbar a.on svg { color: var(--sp-rose); }
  .tabbar a.on::before { content: ''; position: absolute; top: 2px; width: 5px; height: 5px; border-radius: 3px; background: var(--sp-light); box-shadow: var(--sp-glow); }
  .acc-hero, .drawer-grid, .fi, .grid2 { grid-template-columns: 1fr; }
  .big { font-size: 40px; }
  .row, .row.hist { grid-template-columns: 26px minmax(0, 1fr) auto 14px; }
  .row .col { display: none; }
  .row .amt { font-size: 13.5px; }
  .drawer { padding: 6px 12px 16px; }
  .ledger-bar .count { margin-left: 0; width: 100%; }
  .search input { width: 110px; }
  .sheet, .sheet.wide { width: 100vw; border-left: 0; }
  /* toasts rest 14 px above the tab bar (and the home bar under it) */
  #toasts { left: 12px; right: 12px; bottom: calc(var(--tabbar-h) + 14px); align-items: stretch; }
  .menu { position: fixed; left: auto; right: 12px; top: 56px; bottom: auto; }
  .login-card { padding: 28px 22px 22px; }
}
/* ── motion (Alex, 16 Oct: "smooth transitions and minimalistic animations"; then "make sure the rest of the animations are
   more visible — for both desktop and mobile") ─────────────────────────────────────────────────────────────────────────
   Clearly visible, still calm: 300–450 ms, one ease-out (a little spring on the step number and the tab dot); only transform
   and opacity, so nothing reflows. Money never counts up or down, nothing waits for an animation, and "reduce motion" turns
   all of it off (below). A step slides less than the page's side margin, so the page never scrolls sideways. */
:root { --sp-ease: cubic-bezier(0.2, 0.8, 0.2, 1); --sp-spring: cubic-bezier(0.34, 1.45, 0.64, 1); --sp-slide: 28px; --sp-lift: 18px; }
@keyframes sp-rise { from { opacity: 0; transform: translateY(var(--sp-lift)); } }
@keyframes sp-in-right { from { opacity: 0; transform: translateX(var(--sp-slide)); } }
@keyframes sp-in-left { from { opacity: 0; transform: translateX(calc(var(--sp-slide) * -1)); } }
@keyframes sp-fade { from { opacity: 0; transform: translateY(8px); } }
@keyframes sp-pop { from { opacity: 0.3; transform: scale(0.55); } }
@keyframes sp-flash { 0% { opacity: 0; } 15% { opacity: 1; } 55% { opacity: 1; } 100% { opacity: 0; } }
/* a new screen rises in; a step slides in from the side it comes from; a list's first rows follow each other */
.page-in { animation: sp-rise 0.4s var(--sp-ease) backwards; }
.step-fwd { animation: sp-in-right 0.38s var(--sp-ease) backwards; }
.step-back { animation: sp-in-left 0.38s var(--sp-ease) backwards; }
.rise { animation: sp-rise 0.45s var(--sp-ease) backwards; animation-delay: var(--d, 0ms); }
.swap { animation: sp-fade 0.32s var(--sp-ease) backwards; }
.step.on i { animation: sp-pop 0.45s var(--sp-spring) backwards; }
.drawer { animation: sp-rise 0.36s var(--sp-ease) backwards; }
.net-progress, .net-sync-line { animation: sp-fade 0.32s var(--sp-ease) backwards; }
/* a field the document filled glows, then fades */
.flash { position: relative; }
.flash::after { content: ''; position: absolute; inset: -5px -7px; border-radius: 14px; background: color-mix(in srgb, var(--sp-rose) 22%, transparent); box-shadow: inset 0 0 0 1.5px var(--sp-rose-line), 0 0 18px color-mix(in srgb, var(--sp-rose) 30%, transparent); pointer-events: none; opacity: 0; animation: sp-flash 1.9s var(--sp-ease); }
/* what is pressed gives a little, and springs back */
.btn, .pill, .seg > button, .ibtn { transition: transform 0.18s var(--sp-spring), filter 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease; }
.btn:active:not(:disabled), .pill:active, .seg > button:active:not(:disabled), .ibtn:active { transform: scale(0.94); transition-duration: 0.08s; }
.pay-tile, .acc { transition: transform 0.2s var(--sp-spring), border-color 0.15s ease; }
.pay-tile:active:not(:disabled), .acc:active { transform: scale(0.97); transition-duration: 0.08s; }
/* sheets and their backdrop; toasts */
.scrim { transition: opacity 0.32s ease; }
.sheet { transform: translateX(72px); transition: transform 0.38s var(--sp-ease), opacity 0.3s ease; }
.sheet.open { transform: none; }
.toast { transform: translateY(18px) scale(0.97); transition: opacity 0.3s ease, transform 0.34s var(--sp-spring); }
.toast.in { transform: none; }
@media (max-width: 860px) {
  :root { --sp-slide: 14px; --sp-lift: 16px; }
  /* the active tab: a soft pill behind its icon and label, sliding between tabs (Alex, 16 Oct: the dot "jumps over the
     icon" — on an iPhone the home-indicator inset squeezed the tab into the dot). It sits inside the tab's own 56 px,
     under the icon (z-index), so nothing moving can touch the glyph; the active icon and label take the accent. */
  .tabbar a.on::before { display: none; }
  .tabbar a { z-index: 1; }
  .tabbar a.on, .tabbar a.on svg { color: var(--sp-rose); }
  .tabbar a.on span { font-weight: 600; }
  .tabbar .tab-ind { position: absolute; z-index: 0; top: 6px; left: 6px; width: calc((100% - 12px) / 4); height: 52px; display: flex; justify-content: center; pointer-events: none;
    transform: translateX(calc(var(--tab, 0) * 100%)); transition: transform 0.42s var(--sp-ease), opacity 0.2s ease; }
  .tabbar .tab-ind::before { content: ''; width: min(76px, 100%); height: 100%; border-radius: 16px; background: var(--sp-rose-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sp-rose) 22%, transparent); }
  .tabbar.no-tab .tab-ind { opacity: 0; }
  /* on a phone a sheet comes up from the bottom of the screen */
  .sheet, .sheet.wide { transform: translateY(100%); opacity: 1; transition: transform 0.4s var(--sp-ease); }
  .sheet.open, .sheet.wide.open { transform: none; }
}
@media (min-width: 861px) { .tab-ind { display: none; } }
/* ── skeletons and the progress bar (Alex, 16 Oct: "the loading screens look below standard") ──────────────────────
   The layout that's coming, in the theme's own tones (a deep slate by night, a warm grey by day — never grey on black),
   with a slow light passing over it; bars only, never a figure. A wait the page can't draw ahead: a slim rose bar
   running under its words. Reduce Motion: still placeholders, a still bar. */
:root { --sk-base: #151b28; --sk-hi: rgba(150, 170, 215, 0.11); }
:root[data-theme='light'] { --sk-base: #ece7e0; --sk-hi: rgba(255, 253, 249, 0.85); }
.sk { display: block; position: relative; overflow: hidden; height: 11px; border-radius: 6px; background: var(--sk-base); }
.sk::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, var(--sk-hi) 50%, transparent 100%); transform: translateX(-100%); animation: sk-sweep 1.9s ease-in-out infinite; }
@keyframes sk-sweep { 0% { transform: translateX(-100%); } 70%, 100% { transform: translateX(100%); } }
.sk-wrap { display: flex; flex-direction: column; gap: 22px; }
.sk-xs { height: 9px; } .sk-t1 { height: 12px; margin: 2px 0 9px; } .sk-t2 { height: 9px; } .sk-h { height: 16px; margin-bottom: 6px; }
.sk-fig { height: 26px; border-radius: 8px; margin-top: 8px; } .sk-big { height: 34px; border-radius: 9px; margin-top: 16px; } .sk-hero { height: 46px; border-radius: 10px; margin: 14px 0 16px; }
.sk-pill { height: 26px; border-radius: 999px; flex: none; } .sk-btn { height: 34px; border-radius: 999px; flex: none; } .sk-push { margin-left: auto; }
.sk-dot { width: 26px; height: 26px; border-radius: 13px; flex: none; } .sk-ic { width: 40px; height: 40px; border-radius: 12px; flex: none; }
.sk-num { width: 92px; height: 12px; margin-left: auto; } .sk-amt { display: block; }
/* the real layouts' measures, under the skeletons' own names */
.sk-panel { position: relative; border-radius: 20px; background: var(--sp-card); border: 1px solid var(--sp-line); padding: 18px 20px; min-width: 0; }
.sk-acc { border-radius: 20px; background: var(--sp-card); border: 1px solid var(--sp-line); padding: 16px 18px 14px; display: flex; flex-direction: column; min-height: 150px; } .sk-acc .acc-top .sk:first-child { flex: none; }
.sk-ledger { border-radius: 20px; border: 1px solid var(--sp-line); background: var(--sp-card); overflow: clip; } .sk-ledgerbar { display: flex; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--sp-line2); }
.sk-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) minmax(0, 0.8fr) 150px 18px; column-gap: 14px; align-items: center; padding: 11px 16px; border-top: 1px solid var(--sp-line2); min-height: 63px; }
.sk-row.sk-hist { grid-template-columns: 26px minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 0.7fr) 150px 18px; }
.sk-row .what { display: flex; flex-direction: column; min-width: 0; }
.sk-rows { display: flex; flex-direction: column; }
.sk-kvs { display: flex; flex-direction: column; } .sk-kv { display: grid; grid-template-columns: minmax(130px, 38%) minmax(0, 1fr); gap: 14px; padding: 11px 0; border-top: 1px solid var(--sp-line2); align-items: center; } .sk-kv:first-child { border-top: 0; } .sk-kv .sk { height: 10px; }
.sk-card { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.sk-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.sk-tile { display: flex; flex-direction: column; gap: 10px; min-height: 196px; padding: 20px 20px 18px; border-radius: 20px; border: 1px solid var(--sp-line); background: var(--sp-card); } .sk-tile .sk-ic { margin-bottom: 8px; }
.sk-cdgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 28px 22px; } .sk-cd { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .sk-under { display: flex; flex-direction: column; gap: 8px; padding: 0 2px; }
.sk-steps { display: flex; gap: 6px; align-items: center; margin-bottom: 22px; } .sk-step { display: inline-flex; align-items: center; gap: 8px; } .sk-step + .sk-step::before { content: ''; width: 22px; height: 1px; background: var(--sp-line); margin-right: 6px; } .sk-step .sk-dot { width: 22px; height: 22px; }
.sk-form { min-width: 0; display: flex; flex-direction: column; gap: 16px; } .sk-side { position: sticky; top: 0; } .sk-side .sk-panel { display: flex; flex-direction: column; gap: 12px; }
.sk-kp { width: 100%; aspect-ratio: 1.586; height: auto; border-radius: 14px; } .sk-kp-big { width: min(360px, 100%); border-radius: 22px; }
@media (max-width: 1100px) { .sk-side { position: static; } }
@media (max-width: 860px) {
  .sk-row, .sk-row.sk-hist { grid-template-columns: 26px minmax(0, 1fr) auto 14px; } .sk-row .col { display: none; }
  .sk-kv { grid-template-columns: minmax(96px, 34%) minmax(0, 1fr); gap: 12px; }
  .sk-tiles { grid-template-columns: 1fr; } .sk-tile { min-height: 0; }
  .sk-steps { gap: 0; align-items: flex-start; } .sk-step { flex: 1 1 0; flex-direction: column; gap: 6px; position: relative; } .sk-step + .sk-step::before { position: absolute; top: 11px; left: calc(-50% + 17px); width: calc(100% - 34px); margin: 0; }
}
.sk-cardpage { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; } .sk-acts { flex: 1 1 280px; display: flex; flex-direction: column; gap: 10px; }
.sk-act { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--sp-line); background: var(--sp-card); } .sk-act > div { flex: 1; }
.sk-field { display: flex; flex-direction: column; gap: 8px; } .sk-box { height: 42px; border-radius: 12px; width: 100%; } .sk-cta { height: 44px; border-radius: 999px; margin-top: 4px; }
.sp-load { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; color: var(--sp-label); }
.sp-load-bar { position: relative; display: block; width: 132px; height: 3px; border-radius: 3px; background: var(--sk-base); overflow: hidden; }
.sp-load-bar i { position: absolute; top: 0; bottom: 0; left: 0; width: 42%; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--sp-rose) 70%, var(--sp-rose-l)); animation: sp-load 1.35s cubic-bezier(0.45, 0, 0.25, 1) infinite; }
@keyframes sp-load { from { transform: translateX(-100%); } to { transform: translateX(240%); } }
.sp-load-t { line-height: 1.4; }
/* the sync's progress, in the button's place: the bar the card's width, the step words under it */
.net-sync-line.sp-load { margin-top: 12px; gap: 9px; font-size: 13px; color: var(--sp-dim); width: 100%; }
.net-sync-line.sp-load .sp-load-bar { width: 100%; max-width: 360px; }
@media (prefers-reduced-motion: reduce) {
  .sk::after { display: none; }
  .sp-load-bar i { animation: none !important; transform: translateX(70%); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation-duration: 0.01ms !important; animation-delay: 0s !important; scroll-behavior: auto !important; }
}

/* ── seapay.network, connected (js/8-network.js) ──────────────────────────────────────── */
.row .t3.net { display: flex; gap: 8px; align-items: center; margin-top: 3px; font-size: 11.5px; white-space: nowrap; overflow: hidden; }
.net-cat { padding: 1px 8px; border-radius: 999px; background: var(--sp-chip); color: var(--sp-dim); overflow: hidden; text-overflow: ellipsis; }
.net-rc { color: var(--sp-muted); }
.net-rc.ok { color: var(--sp-ok); }
.net-rc.warn { color: var(--sp-warn); }
.card.net-card { border-color: var(--sp-rose-line); background: linear-gradient(180deg, var(--sp-wine-soft), transparent 70%), var(--sp-card); }
.net-docs { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.net-doc { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--sp-chip); color: var(--sp-text); font-size: 12.5px; text-decoration: none; }
a.net-doc:hover { color: var(--sp-ink); }
.net-doc .muted { margin-left: auto; }
.net-notes p { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--sp-dim); }
.net-asof { margin: 10px 0 0; font-size: 11.5px; }
.net-svc { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.net-logo { flex: none; width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 19px; color: var(--sp-ink); background: var(--sp-panel); border: 1px solid var(--sp-line); }
.net-svc-t { flex: 1 1 260px; min-width: 0; }
.net-svc-t .serif { font-size: 20px; color: var(--sp-ink); }
.net-ok { margin-top: 2px; font-size: 13px; color: var(--sp-ok); }
.net-steps { list-style: none; margin: 0 0 16px; padding: 0; display: flex; gap: 6px; }
.net-steps li { flex: 1; padding: 6px 8px; border-radius: 999px; text-align: center; font-size: 11.5px; font-weight: 600; background: var(--sp-chip); color: var(--sp-label); }
.net-steps li.on { background: var(--sp-rose-soft); color: var(--sp-ink); box-shadow: inset 0 0 0 1px var(--sp-rose-line); }
.net-steps li.done { color: var(--sp-ok); }
.net-or { display: flex; align-items: center; gap: 10px; margin: 14px 0; font-size: 12px; color: var(--sp-label); }
.net-or::before, .net-or::after { content: ''; flex: 1; height: 1px; background: var(--sp-line); }
.net-prov { display: flex; gap: 8px; margin-top: 12px; }
.net-prov .btn { flex: 1; }
.net-small { margin: 12px 0 0; font-size: 12px; }
.net-err { margin-top: 10px; font-size: 12.5px; }
.net-progress { margin: 10px 0 0; font-size: 12.5px; color: var(--sp-label); min-height: 1em; }
.net-progress:empty { display: none; }
.net-trace { margin: 12px 0 0; font-size: 12px; color: var(--sp-label); }
.net-trace summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; }
.net-trace ol { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px; }
.net-trace li { overflow-wrap: anywhere; }
.net-trace .mono { display: inline-block; min-width: 3.6em; color: var(--sp-ink); font-variant-numeric: tabular-nums; }
.net-cos { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.net-co { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--sp-line); background: var(--sp-field); color: var(--sp-text); font: inherit; text-align: left; cursor: pointer; }
.net-co.on { border-color: var(--sp-rose); background: var(--sp-rose-soft); }
.net-co:disabled { cursor: default; opacity: 0.6; }
.net-co-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.net-co-t b { color: var(--sp-ink); }
.net-read, .net-send { margin-top: 10px; }
.net-sync { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--sp-line2); }
.net-sync-h { display: flex; flex-direction: column; gap: 3px; }
.net-sync-h b { color: var(--sp-ink); font-size: 14px; }
.net-sync-h .muted { font-size: 12.5px; }
.net-sync-line { margin: 10px 0 0; font-size: 13px; color: var(--sp-dim); }

/* ── phones, the app pass (Alex, 16 Oct, from his iPhone: "jumping lines") ────────────────
   Nothing wraps by accident: a row either fits, or stacks on purpose. Touch sizes per Apple (44 pt);
   small icons keep their look and get a bigger hit area. */
@media (pointer: coarse) {
  .btn { height: 44px; padding: 0 18px; font-size: 14px; }
  .btn.lg { height: 48px; padding: 0 22px; font-size: 15px; }
  .btn.sm { height: 36px; padding: 0 13px; font-size: 13px; }
  .pill { height: 36px; padding: 0 14px; font-size: 13.5px; }
  .seg > button { height: 36px; padding: 0 15px; font-size: 13.5px; }
  .ibtn { width: 40px; height: 40px; }
  .ibtn.copy, .lnk { position: relative; }
  .ibtn.copy::after { content: ''; position: absolute; inset: -10px; }
  .lnk::after { content: ''; position: absolute; inset: -13px -6px; }
  .search { height: 40px; }
  html .field.compact select { height: 40px; font-size: 16px; background-position: calc(100% - 16px) 18px, calc(100% - 11px) 18px; }
}
@media (max-width: 860px) {
  /* the page head: the title keeps its row; the actions sit at its right, icon only when they have an icon */
  .head { flex-wrap: nowrap; align-items: flex-start; }
  .head-t { flex: 1 1 auto; }
  .head-acts { width: auto; margin-left: auto; padding-top: 16px; }
  .head-acts .btn:has(svg) { width: 44px; padding: 0; }
  .head-acts .btn:has(svg) > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* steps: one row of columns — the number, its word under it, a line between the numbers */
  .steps { flex-wrap: nowrap; gap: 0; align-items: flex-start; margin-bottom: 18px; }
  .step { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 6px; position: relative; text-align: center; font-size: 11.5px; line-height: 1.2; }
  .step + .step::before { position: absolute; top: 11px; left: calc(-50% + 17px); width: calc(100% - 34px); margin: 0; }
  /* the account's figures under its balance: one a line */
  .hero-sub { flex-direction: column; gap: 6px; }
  /* buttons in a row share it; when they don't fit, each takes the whole width — never a ragged second line */
  .acts > .btn, .sheet-foot > .btn { flex: 1 1 auto; }
  .sheet-foot { padding: 12px 16px calc(14px + var(--safe-b)); }
  .sheet-foot .btn { min-width: 0; }
  .totals { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px 18px; }
  .total .fig { font-size: 24px; }
  /* the ledger's filters: the three states on one line, the fields two a line, the long search on its own */
  .ledger-bar { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; padding: 12px; }
  .ledger-bar > .pill { grid-column: span 2; justify-content: center; padding: 0 8px; }
  .ledger-bar > label { grid-column: span 3; order: 2; min-width: 0; }
  .ledger-bar > label.field { order: 1; }
  .ledger-bar > .search[data-k="reason"] { grid-column: 1 / -1; order: 3; }
  .ledger-bar > .count { grid-column: 1 / -1; order: 4; margin: 2px 0 0; }
  .ledger-bar .search { width: 100%; padding: 0 10px; gap: 6px; }
  .ledger-bar .search input::placeholder { font-size: 15px; }
  .ledger-bar .search input, .ledger-bar .field.compact select { width: 100%; }
  /* a ledger line's title: two lines before it's cut */
  .row .t1 { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: break-word; line-height: 1.3; }
  /* label · value rows: a narrower label column, so values (emails, IBANs) keep their room */
  .kv { grid-template-columns: minmax(96px, 34%) minmax(0, 1fr); gap: 12px; }
  /* under a ledger line: the category and the receipt wrap rather than being cut */
  .row .t3.net { flex-wrap: wrap; white-space: normal; row-gap: 3px; }
  .net-cat { white-space: nowrap; max-width: 100%; }
  /* a sheet's buttons that don't fit one line: the main one on top, as in the payment forms */
  .sheet-foot { flex-wrap: wrap-reverse; }
  /* Connect → the company: the match chip under the company's lines, never squeezing them */
  .net-co { flex-wrap: wrap; row-gap: 8px; }
  .net-co .net-co-t { flex: 1 1 100%; }
  /* My Profile → Connected services: the mark beside its name, the buttons under them */
  .net-svc { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px 14px; align-items: center; }
  .net-svc > .btn, .net-svc > .acts, .net-svc > .spin-row { grid-column: 1 / -1; }
  .net-svc > .acts { margin-top: 0; }
}
/* the smallest phones (iPhone SE, or any phone with a larger text size): titles may take two lines, filters one a line */
@media (max-width: 360px) {
  .h1 .t { font-size: 26px; white-space: normal; line-height: 1.1; }
  .ledger-bar > label { grid-column: 1 / -1; }
  .kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}