/* =============================================================================
   QrTransfers — app.css (design system v2)
   One stylesheet for every page built on templates/layouts/*.html.
   Sections: 1 fonts · 2 tokens · 3 base · 4 layout primitives · 5 components
             6 shells (public / app / focus) · 7 pages · 8 utilities
   Rules: use tokens (var(--…)) — never raw colours; mobile-first (min-width queries);
   tap targets ≥ 44px; inputs ≥ 16px (no iOS zoom). See MIGRATION.md.
   ========================================================================== */

/* 1. Fonts (self-hosted, SIL OFL — static/fonts/LICENSE.txt) ---------------- */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2-variations"),
       url("../fonts/manrope-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("../fonts/manrope-latin-ext-wght-normal.woff2") format("woff2-variations"),
       url("../fonts/manrope-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url("../fonts/space-grotesk-latin-wght-normal.woff2") format("woff2-variations"),
       url("../fonts/space-grotesk-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url("../fonts/space-grotesk-latin-ext-wght-normal.woff2") format("woff2-variations"),
       url("../fonts/space-grotesk-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 2. Tokens ------------------------------------------------------------------ */
:root {
  color-scheme: light;

  /* brand */
  --brand-50: #eff6ff;
  --brand-100: #dbeafe;
  --brand-200: #bfdbfe;
  --brand-500: #2563eb;
  --brand-600: #1d4ed8;
  --brand-700: #1e40af;
  --brand-sky: #0b72c4;
  --brand-teal: #14b8a6;
  --grad-brand: linear-gradient(120deg, var(--brand-sky), var(--brand-500));
  --grad-brand-hover: linear-gradient(120deg, #0a64ad, var(--brand-600));

  /* neutrals / surfaces */
  --c-bg: #f4f7fc;
  --c-bg-accent: radial-gradient(60rem 30rem at -10% -10%, rgba(14, 165, 233, 0.10), transparent 70%),
                 radial-gradient(50rem 28rem at 110% -10%, rgba(20, 184, 166, 0.08), transparent 72%);
  --c-surface: #ffffff;
  --c-surface-2: #f8fafd;
  --c-surface-3: #eef2f8;
  --c-border: #dbe3f0;
  --c-border-strong: #b8c4d8;
  --c-text: #0f172a;
  --c-text-2: #334155;
  --c-muted: #5b6b82;
  --c-link: var(--brand-600);
  --c-focus: #2563eb;
  --c-on-brand: #ffffff;
  --c-overlay: rgba(15, 23, 42, 0.55);

  /* semantic */
  --c-success: #15803d;
  --c-success-bg: #ecfdf3;
  --c-success-border: #a7e3bd;
  --c-warning: #a24a06;
  --c-warning-bg: #fffbeb;
  --c-warning-border: #f6d58a;
  --c-danger: #b91c1c;
  --c-danger-bg: #fef2f2;
  --c-danger-border: #f5b5b5;
  --c-info: var(--brand-600);
  --c-info-bg: var(--brand-50);
  --c-info-border: var(--brand-200);
  --c-neutral-bg: #f1f5f9;
  --c-neutral: #475569;
  --c-plus: #6d28d9;
  --c-plus-bg: #f5f3ff;

  /* type */
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Space Grotesk", "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs: 0.75rem;    /* 12 */
  --fs-sm: 0.875rem;   /* 14 */
  --fs-base: 1rem;     /* 16 */
  --fs-md: 1.125rem;   /* 18 */
  --fs-lg: 1.25rem;    /* 20 */
  --fs-xl: 1.5rem;     /* 24 */
  --fs-2xl: 1.875rem;  /* 30 */
  --fs-3xl: 2.375rem;  /* 38 */
  --fs-display: clamp(2.1rem, 1.4rem + 3vw, 3.4rem);
  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-base: 1.55;

  /* spacing (4px grid) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --gutter: 1rem;

  /* shape / depth */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.06);
  --sh-2: 0 6px 20px rgba(15, 23, 42, 0.07), 0 1px 3px rgba(15, 23, 42, 0.05);
  --sh-3: 0 22px 50px rgba(15, 23, 42, 0.16);
  --sh-brand: 0 8px 20px rgba(37, 99, 235, 0.25);
  --ring: 0 0 0 3px rgba(37, 99, 235, 0.35);

  /* sizes */
  --tap: 44px;
  --control-h: 48px;
  --container: 1120px;
  --container-narrow: 760px;
  --topbar-h: 60px;
  --bottomnav-h: 64px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --brand-50: #0f1d3a;
    --brand-100: #15284f;
    --brand-200: #24407a;
    --c-bg: #0b1220;
    --c-bg-accent: radial-gradient(60rem 30rem at -10% -10%, rgba(14, 165, 233, 0.10), transparent 70%);
    --c-surface: #111a2e;
    --c-surface-2: #16213a;
    --c-surface-3: #1c2945;
    --c-border: #26355a;
    --c-border-strong: #3a4b74;
    --c-text: #e7edf7;
    --c-text-2: #cbd5e1;
    --c-muted: #94a3b8;
    --c-link: #8ab4ff;
    --c-focus: #8ab4ff;
    --c-overlay: rgba(2, 6, 23, 0.7);
    --c-success: #6ee7a0;
    --c-success-bg: #0e2a1e;
    --c-success-border: #1f5a3c;
    --c-warning: #fbcf72;
    --c-warning-bg: #2c2210;
    --c-warning-border: #6b5016;
    --c-danger: #fca5a5;
    --c-danger-bg: #2f1517;
    --c-danger-border: #7a2b2f;
    --c-info: #8ab4ff;
    --c-neutral-bg: #1c2945;
    --c-neutral: #cbd5e1;
    --c-plus: #c4b5fd;
    --c-plus-bg: #221a3d;
    --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sh-2: 0 8px 24px rgba(0, 0, 0, 0.35);
    --sh-3: 0 22px 50px rgba(0, 0, 0, 0.5);
    --ring: 0 0 0 3px rgba(138, 180, 255, 0.45);
  }
}

/* 3. Base -------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--topbar-h) + 12px);
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--c-text);
  background: var(--c-bg-accent), var(--c-bg);
  background-attachment: fixed;
  font-weight: 450;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; /* replaces css/mobile_no_overflow.css */
}
img, svg, video { max-width: 100%; height: auto; }
svg { flex-shrink: 0; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  margin: 0 0 var(--s-3);
  color: var(--c-text);
}
h1 { font-size: var(--fs-2xl); font-weight: 700; }
h2 { font-size: var(--fs-xl); font-weight: 700; }
h3 { font-size: var(--fs-md); font-weight: 650; }
p { margin: 0 0 var(--s-3); }
a { color: var(--c-link); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
strong, b { font-weight: 700; }
small { font-size: var(--fs-sm); }
code, kbd { font-family: var(--font-mono); font-size: 0.92em; background: var(--c-surface-3); padding: 0.1em 0.35em; border-radius: 6px; }
hr { border: 0; border-top: 1px solid var(--c-border); margin: var(--s-6) 0; }
dl { margin: 0; }
:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--brand-200); }
[hidden] { display: none !important; }

.skip-link {
  position: absolute;
  left: var(--s-3);
  top: -100px;
  z-index: 1000;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-text);
  box-shadow: var(--sh-2);
}
.skip-link:focus { top: var(--s-3); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* 4. Layout primitives ------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }
.container--slim { max-width: 480px; }
.stack { display: flex; flex-direction: column; gap: var(--s-4); }
.stack--sm { gap: var(--s-2); }
.stack--lg { gap: var(--s-6); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.cluster--end { justify-content: flex-end; }
.cluster--between { justify-content: space-between; }
.grid { display: grid; gap: var(--s-4); }
.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  :root { --gutter: 1.5rem; }
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.section { padding-block: var(--s-12); }
.section--tight { padding-block: var(--s-8); }

/* 5. Components -------------------------------------------------------------- */

/* 5.1 Brand wordmark */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  text-decoration: none;
  color: var(--c-text);
}
.brand__logo { width: 30px; height: 30px; object-fit: contain; }
.brand__word {
  font: 700 1.3rem/1 var(--font-display);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.brand__word span:nth-child(1) { color: #3d1f7f; }
.brand__word span:nth-child(2) { color: #292a93; }
.brand__word span:nth-child(3) { color: #167ec9; }
.brand__word span:nth-child(4) { color: #0f95c7; }
.brand__word span:nth-child(5),
.brand__word span:nth-child(6) { color: #13a3a8; }
.brand__word span:nth-child(7) { color: #1fae4a; }
.brand__word span:nth-child(8) { color: #7fb514; }
.brand__word span:nth-child(9) { color: #9db70f; }
.brand__word span:nth-child(10) { color: #c6a90e; }
.brand__word span:nth-child(11) { color: #d39f08; }
@media (prefers-color-scheme: dark) {
  .brand__word span:nth-child(1) { color: #b9a4f5; }
  .brand__word span:nth-child(2) { color: #9fa3ff; }
  .brand__word span:nth-child(3) { color: #5fb3f0; }
}
.brand--sm .brand__word { font-size: 1.1rem; }
.brand--sm .brand__logo { width: 24px; height: 24px; }

/* 5.2 Icons */
.icon { width: 20px; height: 20px; display: inline-block; vertical-align: -0.2em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 28px; height: 28px; }
.icon--xl { width: 40px; height: 40px; }

/* 5.3 Buttons */
.btn {
  --btn-bg: var(--c-surface);
  --btn-fg: var(--c-text);
  --btn-border: var(--c-border-strong);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--tap);
  padding: 0.625rem 1.15rem;
  border: 1px solid var(--btn-border);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: 700 var(--fs-base)/1.2 var(--font-body);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 160ms var(--ease), box-shadow 160ms var(--ease), transform 160ms var(--ease), border-color 160ms var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn--primary {
  --btn-fg: var(--c-on-brand);
  --btn-border: transparent;
  background: var(--grad-brand);
  box-shadow: var(--sh-brand);
}
.btn--primary:hover { background: var(--grad-brand-hover); }
.btn--secondary { --btn-bg: var(--c-surface); --btn-fg: var(--c-link); --btn-border: var(--brand-200); }
.btn--secondary:hover { --btn-bg: var(--brand-50); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--c-text-2); --btn-border: transparent; }
.btn--ghost:hover { --btn-bg: var(--c-surface-3); }
.btn--danger { --btn-bg: var(--c-danger); --btn-fg: #fff; --btn-border: transparent; }
@media (prefers-color-scheme: dark) { .btn--danger { --btn-bg: #b91c1c; } }
.btn--danger:hover { filter: brightness(0.95); }
.btn--sm { min-height: 36px; padding: 0.4rem 0.85rem; font-size: var(--fs-sm); white-space: nowrap; }
.btn--lg { min-height: 56px; padding: 0.85rem 1.5rem; font-size: var(--fs-md); }
.btn--block { display: flex; width: 100%; }
.btn--icon { padding: 0; width: var(--tap); border-radius: var(--r-pill); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; box-shadow: none; transform: none; }
.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2.5px solid var(--btn-fg);
  border-right-color: transparent;
  animation: spin 0.7s linear infinite;
}
.btn--primary.is-loading::after { border-color: #fff; border-right-color: transparent; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-google { --btn-bg: var(--c-surface); --btn-fg: var(--c-text); --btn-border: var(--c-border-strong); border-radius: var(--r-pill); }
.btn-google:hover { --btn-bg: var(--c-surface-2); }
.btn-google svg { width: 20px; height: 20px; }
.link-btn { background: none; border: 0; padding: 0; min-height: var(--tap); color: var(--c-link); font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.link-btn[disabled] { color: var(--c-muted); cursor: not-allowed; text-decoration: none; }

/* 5.4 Cards */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  padding: var(--s-5);
}
@media (min-width: 640px) { .card { padding: var(--s-6); } }
.card--flush { padding: 0; overflow: hidden; }
.card--raised { box-shadow: var(--sh-2); }
.card--interactive { text-decoration: none; color: inherit; transition: box-shadow 160ms var(--ease), transform 160ms var(--ease), border-color 160ms var(--ease); }
.card--interactive:hover { box-shadow: var(--sh-2); border-color: var(--brand-200); transform: translateY(-1px); }
.card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.card__title { margin: 0; font-size: var(--fs-lg); }
.card__footer { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--c-border); }
.card--highlight { border-color: var(--brand-200); background: linear-gradient(180deg, var(--brand-50), var(--c-surface) 70%); }

/* 5.5 Forms */
.form { display: flex; flex-direction: column; gap: var(--s-4); }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field__label { font-weight: 700; font-size: var(--fs-sm); color: var(--c-text); }
.field__optional { font-weight: 500; color: var(--c-muted); }
.field__required { color: var(--c-danger); margin-left: 2px; }
.field__help { font-size: var(--fs-sm); color: var(--c-muted); margin: 0; }
.field__error { display: flex; gap: 6px; align-items: flex-start; font-size: var(--fs-sm); font-weight: 600; color: var(--c-danger); margin: 0; }
.input, .select, .textarea {
  width: 100%;
  min-height: var(--control-h);
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--c-border-strong);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text);
  font: 500 1rem/1.4 var(--font-body); /* 16px: no iOS zoom */
  transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease);
  appearance: none;
  -webkit-appearance: none;
}
.textarea { min-height: 96px; resize: vertical; }
.select {
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235b6b82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
}
.input::placeholder, .textarea::placeholder { color: var(--c-muted); opacity: 0.85; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--c-muted); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand-500); box-shadow: var(--ring); }
.input[readonly] { background: var(--c-surface-2); }
.input[disabled], .select[disabled], .textarea[disabled] { background: var(--c-surface-3); color: var(--c-muted); cursor: not-allowed; }
.field--invalid .input, .field--invalid .select, .field--invalid .textarea,
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--c-danger); }
.input--code { text-align: center; font: 700 1.6rem/1 var(--font-mono); letter-spacing: 0.45em; padding-left: calc(0.9rem + 0.45em); }
.input--autofilled { border-color: var(--c-success-border); background: var(--c-success-bg); }
.input-group { position: relative; display: flex; align-items: stretch; }
.input-group .input { padding-right: 3.25rem; }
.input-group__addon {
  position: absolute; right: 2px; top: 2px; bottom: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--tap);
  padding: 0 0.6rem;
  border: 0; border-radius: 0 var(--r-md) var(--r-md) 0;
  background: transparent; color: var(--c-muted);
  font-weight: 700; cursor: pointer;
}
.input-group__addon:hover { color: var(--c-text); }
.input-group__suffix { pointer-events: none; cursor: default; }
.check { display: flex; align-items: flex-start; gap: var(--s-3); min-height: var(--tap); padding: var(--s-2) 0; cursor: pointer; font-size: var(--fs-sm); line-height: 1.45; color: var(--c-text-2); }
.check input[type="checkbox"], .check input[type="radio"] {
  flex: 0 0 22px; width: 22px; height: 22px; margin: 0; accent-color: var(--brand-500); cursor: pointer;
}
.check a { font-weight: 700; }
.check--boxed { padding: var(--s-3) var(--s-4); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface-2); }
.fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.fieldset__legend { padding: 0; margin-bottom: var(--s-2); font-weight: 700; }
.divider-text { display: flex; align-items: center; gap: var(--s-3); color: var(--c-muted); font-size: var(--fs-sm); }
.divider-text::before, .divider-text::after { content: ""; flex: 1; height: 1px; background: var(--c-border); }
.form-footer { text-align: center; color: var(--c-muted); font-size: var(--fs-sm); }
.form-footer a { font-weight: 700; }

/* 5.6 Alerts / flash */
.alert {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--c-info-border);
  border-radius: var(--r-md);
  background: var(--c-info-bg);
  color: var(--c-text);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.alert > .icon { margin-top: 1px; color: var(--c-info); }
.alert__body { flex: 1; min-width: 0; }
.alert__title { display: block; font-weight: 800; margin-bottom: 2px; }
.alert__body p:last-child { margin-bottom: 0; }
.alert__close { margin: -10px -12px -10px 0; flex: 0 0 auto; width: var(--tap); height: var(--tap); border: 0; background: transparent; color: inherit; border-radius: var(--r-pill); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.alert__close:hover { background: rgba(15, 23, 42, 0.06); }
.alert--success { background: var(--c-success-bg); border-color: var(--c-success-border); }
.alert--success > .icon { color: var(--c-success); }
.alert--warning { background: var(--c-warning-bg); border-color: var(--c-warning-border); }
.alert--warning > .icon { color: var(--c-warning); }
.alert--danger { background: var(--c-danger-bg); border-color: var(--c-danger-border); }
.alert--danger > .icon { color: var(--c-danger); }
.alert a { color: inherit; font-weight: 700; }
.flash-stack { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-4); }

/* 5.7 Badges & status pills */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--c-neutral-bg);
  color: var(--c-neutral);
  font-size: var(--fs-xs);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill--paid { background: var(--c-success-bg); color: var(--c-success); }
.pill--pending { background: var(--c-warning-bg); color: var(--c-warning); }
.pill--failed { background: var(--c-danger-bg); color: var(--c-danger); }
.pill--cancelled { background: var(--c-neutral-bg); color: var(--c-neutral); }
.pill--refunded { background: var(--c-plus-bg); color: var(--c-plus); }
.pill--info { background: var(--c-info-bg); color: var(--c-info); }
.pill--plain::before { display: none; }
.badge-verified {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px 2px 6px;
  border-radius: var(--r-pill);
  background: var(--c-info-bg);
  color: var(--c-info);
  font: 800 var(--fs-xs)/1.5 var(--font-body);
  vertical-align: middle;
  white-space: nowrap;
}
.badge-verified .icon { width: 14px; height: 14px; }
.badge-plus { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--c-plus-bg); color: var(--c-plus); font-size: var(--fs-xs); font-weight: 800; }

/* 5.8 Amount */
.amount { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.amount__currency { font-weight: 600; color: var(--c-muted); margin-left: 0.2em; font-size: 0.75em; }
.amount--xl { font-size: clamp(2.25rem, 1.6rem + 3vw, 3rem); line-height: 1.05; letter-spacing: -0.02em; }
.amount--lg { font-size: var(--fs-xl); }

/* 5.9 Description list (receipts, details) */
.dl { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: var(--s-2) var(--s-4); font-size: var(--fs-sm); }
.dl dt { color: var(--c-muted); font-weight: 600; }
.dl dd { margin: 0; text-align: right; font-weight: 700; color: var(--c-text); overflow-wrap: anywhere; }
.dl--rows { display: block; }
.dl--rows > div { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--c-border); }
.dl--rows > div:last-child { border-bottom: 0; }

/* 5.10 Tables (collapse to cards < 720px; give each <td> data-label) */
.table-wrap { width: 100%; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th { text-align: left; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-muted); font-weight: 800; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--c-border); white-space: nowrap; }
.table td { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--c-border); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--c-surface-2); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 719.98px) {
  .table--stack thead { display: none; }
  .table--stack, .table--stack tbody, .table--stack tr, .table--stack td { display: block; width: 100%; }
  .table--stack tr { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--c-border); }
  .table--stack tr:last-child { border-bottom: 0; }
  .table--stack td { display: flex; justify-content: space-between; gap: var(--s-3); padding: 4px 0; border: 0; text-align: right; }
  .table--stack td::before { content: attr(data-label); color: var(--c-muted); font-weight: 600; text-align: left; }
  .table--stack td.num { text-align: right; }
}

/* 5.11 List rows (activity feed / latest payments) */
.list { list-style: none; margin: 0; padding: 0; }
.list__item { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-5); border-top: 1px solid var(--c-border); min-height: 64px; color: inherit; text-decoration: none; }
.list__item:first-child { border-top: 0; }
a.list__item:hover { background: var(--c-surface-2); }
.list__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.list__title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list__meta { font-size: var(--fs-xs); color: var(--c-muted); }
.list__aside { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

/* 5.12 Empty state */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-2); padding: var(--s-10) var(--s-5); color: var(--c-muted); }
.empty__icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-50); color: var(--brand-500); margin-bottom: var(--s-2); }
.empty__title { color: var(--c-text); font-size: var(--fs-md); margin: 0; }
.empty__text { max-width: 36ch; margin: 0 0 var(--s-3); font-size: var(--fs-sm); }

/* 5.13 Stepper */
.stepper { list-style: none; margin: 0 0 var(--s-5); padding: 0; display: flex; gap: var(--s-2); counter-reset: step; }
.stepper__step { flex: 1; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-xs); font-weight: 700; color: var(--c-muted); counter-increment: step; }
.stepper__bar { height: 5px; border-radius: var(--r-pill); background: var(--c-surface-3); }
.stepper__label { display: flex; align-items: center; gap: 6px; }
.stepper__label::before { content: counter(step); display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--c-surface-3); color: var(--c-muted); font-size: 11px; }
.stepper__step.is-done .stepper__bar, .stepper__step.is-current .stepper__bar { background: var(--grad-brand); }
.stepper__step.is-done .stepper__label::before { content: "✓"; background: var(--brand-500); color: #fff; }
.stepper__step.is-current { color: var(--c-text); }
.stepper__step.is-current .stepper__label::before { background: var(--brand-500); color: #fff; }

/* 5.14 Modal (<dialog class="modal">) */
.modal { width: min(560px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 0; border-radius: var(--r-xl); background: var(--c-surface); color: var(--c-text); box-shadow: var(--sh-3); }
.modal::backdrop { background: var(--c-overlay); }
.modal__header { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--c-border); }
.modal__title { margin: 0; font-size: var(--fs-lg); }
.modal__body { padding: var(--s-5); overflow: auto; }
.modal__footer { display: flex; justify-content: flex-end; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-top: 1px solid var(--c-border); }
@media (max-width: 639.98px) {
  .modal { margin: auto auto 0; width: 100vw; max-width: 100vw; border-radius: var(--r-xl) var(--r-xl) 0 0; }
}

/* 5.15 Toasts (window.qrToast(message, type)) */
.toast-region { position: fixed; z-index: 2000; left: 50%; transform: translateX(-50%); bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: var(--s-2); width: min(420px, calc(100vw - 2rem)); pointer-events: none; }
.has-bottomnav .toast-region { bottom: calc(var(--bottomnav-h) + var(--s-3) + env(safe-area-inset-bottom, 0px)); }
.toast { pointer-events: auto; display: flex; gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: #0f172a; color: #f8fafc; box-shadow: var(--sh-3); font-size: var(--fs-sm); font-weight: 600; animation: toast-in 200ms var(--ease); }
.toast--success .icon { color: #6ee7a0; }
.toast--danger .icon { color: #fca5a5; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* 5.16 Dropdown menu (<details class="menu">) */
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu__panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 300; min-width: 240px; max-width: min(340px, calc(100vw - 2rem)); padding: var(--s-2); border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); box-shadow: var(--sh-3); }
.menu__item { display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: var(--tap); padding: 0 var(--s-3); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--c-text); font: 600 var(--fs-sm)/1.2 var(--font-body); text-decoration: none; cursor: pointer; text-align: left; }
.menu__item:hover { background: var(--c-surface-3); }
.menu__item .icon { color: var(--c-muted); }
.menu__sep { height: 1px; margin: var(--s-2) 0; background: var(--c-border); }
.menu__head { padding: var(--s-2) var(--s-3) var(--s-3); }
.menu__head strong { display: block; overflow: hidden; text-overflow: ellipsis; }
.menu__head span { display: block; font-size: var(--fs-xs); color: var(--c-muted); overflow: hidden; text-overflow: ellipsis; }

/* 5.17 Avatar */
.avatar { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--grad-brand); color: #fff; font: 700 0.95rem/1 var(--font-display); text-transform: uppercase; overflow: hidden; flex: 0 0 auto; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--lg { width: 56px; height: 56px; font-size: 1.35rem; }

/* 5.18 Copy field */
.copy-field { display: flex; gap: var(--s-2); align-items: stretch; }
.copy-field .input { font-family: var(--font-mono); font-size: 0.9rem; }

/* 5.19 Page header */
.page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-6); }
.page-header__title { margin: 0; font-size: var(--fs-2xl); }
.page-header__lead { margin: var(--s-1) 0 0; color: var(--c-muted); }

/* 5.20 Lang switch */
.lang-switch { display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap); padding: 0 var(--s-2); color: var(--c-text-2); font-weight: 700; font-size: var(--fs-sm); text-decoration: none; border-radius: var(--r-pill); }
.lang-switch:hover { background: var(--c-surface-3); }

/* 5.21 Prose (long-form public content) */
.prose { font-size: var(--fs-base); color: var(--c-text-2); }
.prose h1 { font-size: var(--fs-3xl); color: var(--c-text); }
.prose h2 { margin-top: var(--s-8); font-size: var(--fs-xl); }
.prose h3 { margin-top: var(--s-6); }
.prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 var(--s-4); }
.prose li { margin-bottom: var(--s-2); }
.prose img { border-radius: var(--r-md); }
.prose .lead { font-size: var(--fs-md); color: var(--c-muted); }
.prose details { border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); background: var(--c-surface-2); margin-bottom: var(--s-2); }
.prose summary { cursor: pointer; font-weight: 700; color: var(--c-text); min-height: 28px; }

/* 6. Shells ------------------------------------------------------------------ */

/* 6.1 Public (marketing) */
.site-header { position: sticky; top: 0; z-index: 200; background: color-mix(in srgb, var(--c-surface) 86%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--c-border); }
.site-header__inner { display: flex; align-items: center; gap: var(--s-3); min-height: var(--topbar-h); }
.site-nav { display: none; align-items: center; gap: var(--s-1); margin-left: var(--s-4); }
.site-nav a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s-3); border-radius: var(--r-pill); color: var(--c-text-2); font-weight: 600; font-size: var(--fs-sm); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { background: var(--c-surface-3); color: var(--c-text); }
.site-header__actions { margin-left: auto; display: flex; align-items: center; gap: var(--s-1); }
@media (max-width: 359.98px) { .site-header .brand__word { display: none; } }
.site-header__login { display: none; }
.mnav { position: relative; }
.mnav__panel { position: absolute; right: 0; top: calc(100% + 8px); width: min(320px, calc(100vw - 2rem)); padding: var(--s-3); border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); box-shadow: var(--sh-3); display: flex; flex-direction: column; gap: 2px; }
.mnav__panel a:not(.btn) { display: flex; align-items: center; min-height: var(--tap); padding: 0 var(--s-3); border-radius: var(--r-sm); color: var(--c-text); font-weight: 600; text-decoration: none; }
.mnav__panel a:not(.btn):hover { background: var(--c-surface-3); }
.mnav__panel .btn { margin-top: var(--s-2); }
@media (min-width: 960px) {
  .site-nav { display: flex; }
  .site-header__login { display: inline-flex; }
  .mnav { display: none; }
}
.site-main { padding-block: var(--s-8) var(--s-12); }
.site-footer { margin-top: var(--s-12); padding: var(--s-10) 0 calc(var(--s-8) + env(safe-area-inset-bottom, 0px)); background: var(--c-surface); border-top: 1px solid var(--c-border); font-size: var(--fs-sm); color: var(--c-muted); }
.site-footer__grid { display: grid; gap: var(--s-6); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-footer__brand { grid-column: 1 / -1; }
.site-footer h2 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-text); margin-bottom: var(--s-3); font-family: var(--font-body); font-weight: 800; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.site-footer li a { display: inline-flex; align-items: center; min-height: 32px; color: var(--c-text-2); text-decoration: none; }
.site-footer li a:hover { color: var(--c-link); text-decoration: underline; }
.site-footer__bottom { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); justify-content: space-between; align-items: center; margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--c-border); }
.site-footer__bottom a { color: var(--c-text-2); }
@media (min-width: 960px) {
  .site-footer__grid { grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: auto; }
}

/* 6.2 App (logged-in seller) */
.topbar { position: sticky; top: 0; z-index: 200; background: color-mix(in srgb, var(--c-surface) 90%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--c-border); padding-top: env(safe-area-inset-top, 0px); }
.topbar__inner { display: flex; align-items: center; gap: var(--s-2); min-height: var(--topbar-h); }
.topbar__nav { display: none; align-items: center; gap: 2px; margin-left: var(--s-6); }
.topbar__nav a { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap); padding: 0 var(--s-3); border-radius: var(--r-pill); color: var(--c-text-2); font-weight: 700; font-size: var(--fs-sm); text-decoration: none; }
.topbar__nav a:hover { background: var(--c-surface-3); color: var(--c-text); }
.topbar__nav a[aria-current="page"] { background: var(--brand-50); color: var(--c-link); }
.topbar__actions { margin-left: auto; display: flex; align-items: center; gap: var(--s-1); min-width: 0; }
.topbar__actions .menu { min-width: 0; }
.topbar__iconbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); border-radius: var(--r-pill); color: var(--c-text-2); }
.topbar__iconbtn:hover { background: var(--c-surface-3); color: var(--c-text); }
.topbar__count { position: absolute; top: 6px; right: 5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--c-danger); color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; border: 2px solid var(--c-surface); }
@media (prefers-color-scheme: dark) { .topbar__count { background: #dc2626; } }
.account-btn { min-width: 0; display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap); padding: 0 var(--s-1); border-radius: var(--r-pill); }
.account-btn:hover { background: var(--c-surface-3); }
.account-btn__name { display: none; font-weight: 700; font-size: var(--fs-sm); max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-text); }
.notif-list { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow: auto; }
.notif-list li { padding: var(--s-3); border-radius: var(--r-sm); }
.notif-list li + li { border-top: 1px solid var(--c-border); }
.notif-list strong { display: block; font-size: var(--fs-sm); }
.notif-list p { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--c-muted); white-space: pre-line; }
.notif-list .is-unread strong::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--brand-500); }
.app-main { padding-block: var(--s-6) calc(var(--bottomnav-h) + var(--s-10) + env(safe-area-inset-bottom, 0px)); }
.bottomnav { position: fixed; z-index: 250; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--c-surface); border-top: 1px solid var(--c-border); box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.05); }
.bottomnav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--c-muted); font-size: 11px; font-weight: 700; text-decoration: none; }
.bottomnav a .icon { width: 22px; height: 22px; }
.bottomnav a[aria-current="page"] { color: var(--c-link); }
.bottomnav a[aria-current="page"] .icon { stroke-width: 2.4; }
.impersonation-bar { background: #7c2d12; color: #fff7ed; font-size: var(--fs-sm); }
.impersonation-bar .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); padding-block: var(--s-2); }
.impersonation-bar button { min-height: 36px; padding: 0 var(--s-3); border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, 0.5); background: transparent; color: inherit; font-weight: 700; cursor: pointer; }
@media (min-width: 960px) {
  .topbar__nav { display: flex; }
  .account-btn__name { display: inline; }
  .bottomnav { display: none; }
  .app-main { padding-bottom: var(--s-16); }
  .has-bottomnav .toast-region { bottom: var(--s-4); }
}

/* 6.3 Focus (auth + payer) */
.focus { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.focus__header { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: calc(var(--s-2) + env(safe-area-inset-top, 0px)) var(--gutter) var(--s-2); }
.focus__main { flex: 1; width: 100%; max-width: 480px; margin: 0 auto; padding: var(--s-2) var(--gutter) var(--s-8); }
.focus--wide .focus__main { max-width: 560px; }
.focus__footer { padding: var(--s-4) var(--gutter) calc(var(--s-6) + env(safe-area-inset-bottom, 0px)); text-align: center; font-size: var(--fs-xs); color: var(--c-muted); }
.focus__footer a { color: var(--c-muted); }
.focus__footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-1) var(--s-4); }
.focus__footer nav a { display: inline-flex; align-items: center; min-height: 32px; }
.focus-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-xl); box-shadow: var(--sh-2); padding: var(--s-6) var(--s-5); }
@media (min-width: 480px) { .focus-card { padding: var(--s-8); } }
.focus-card__title { font-size: var(--fs-2xl); margin-bottom: var(--s-2); }
.focus-card__lead { color: var(--c-muted); margin-bottom: var(--s-5); }
.focus-card__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; margin: 0 auto var(--s-4); background: var(--brand-50); color: var(--brand-500); }
.focus-card__icon .icon { width: 32px; height: 32px; }
.focus-card__icon--success { background: var(--c-success-bg); color: var(--c-success); }
.focus-card__icon--warning { background: var(--c-warning-bg); color: var(--c-warning); }
.focus-card__icon--danger { background: var(--c-danger-bg); color: var(--c-danger); }
.focus-card__icon--neutral { background: var(--c-neutral-bg); color: var(--c-neutral); }
.focus-card--center { text-align: center; }
.focus-card--center .focus-card__lead { margin-inline: auto; max-width: 38ch; }

/* 7. Pages ------------------------------------------------------------------- */

/* 7.1 Landing */
.hero { padding: var(--s-10) 0 var(--s-8); }
.hero__grid { display: grid; gap: var(--s-8); align-items: center; }
.hero__eyebrow { display: inline-flex; align-items: center; gap: var(--s-2); padding: 6px 12px; border-radius: var(--r-pill); background: var(--brand-50); color: var(--c-link); font-weight: 800; font-size: var(--fs-xs); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: var(--s-4); }
.hero__title { font-size: var(--fs-display); line-height: 1.04; letter-spacing: -0.03em; margin-bottom: var(--s-4); }
.hero__title em { font-style: normal; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__lead { font-size: var(--fs-md); color: var(--c-muted); max-width: 46ch; margin-bottom: var(--s-6); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.hero__cta .btn { flex: 1 1 220px; }
@media (min-width: 640px) { .hero__cta .btn { flex: 0 0 auto; } }
.hero__trust { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-6); padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--c-text-2); font-weight: 600; }
.hero__trust li { display: inline-flex; align-items: center; gap: 6px; }
.hero__trust .icon { color: var(--c-success); }
.phone { justify-self: center; width: min(320px, 100%); padding: 12px; border-radius: 40px; background: #0f172a; box-shadow: var(--sh-3); }
.phone__screen { border-radius: 30px; background: var(--c-bg); padding: var(--s-5) var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }
.phone__payee { display: flex; align-items: center; gap: var(--s-3); }
.phone__payee strong { display: block; font-size: var(--fs-sm); }
.phone__payee > div > span { font-size: var(--fs-xs); color: var(--c-muted); }
.phone__amount { text-align: center; padding: var(--s-4) 0; }
.phone__method { display: flex; align-items: center; justify-content: space-between; padding: var(--s-3); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); font-size: var(--fs-sm); font-weight: 700; }
.phone__method small { color: var(--c-muted); font-weight: 600; }
@media (min-width: 900px) {
  .hero { padding: var(--s-16) 0 var(--s-12); }
  .hero__grid { grid-template-columns: 1.15fr 0.85fr; }
}
.section__head { max-width: 640px; margin: 0 auto var(--s-8); text-align: center; }
.section__head p { color: var(--c-muted); font-size: var(--fs-md); margin: 0; }
.section__kicker { display: block; margin-bottom: var(--s-2); color: var(--c-link); font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); counter-reset: steps; }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.steps li { counter-increment: steps; position: relative; }
.steps li::before { content: counter(steps); display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: var(--s-4); border-radius: 12px; background: var(--grad-brand); color: #fff; font: 700 1.1rem/1 var(--font-display); }
.steps h3 { margin-bottom: var(--s-2); }
.steps p { margin: 0; color: var(--c-muted); font-size: var(--fs-sm); }
.feature { display: flex; gap: var(--s-4); align-items: flex-start; }
.feature__icon { display: grid; place-items: center; flex: 0 0 44px; height: 44px; border-radius: 12px; background: var(--brand-50); color: var(--brand-500); }
.feature h3 { margin-bottom: var(--s-1); font-size: var(--fs-base); }
.feature p { margin: 0; color: var(--c-muted); font-size: var(--fs-sm); }
.price { display: grid; gap: var(--s-4); }
@media (min-width: 800px) { .price { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.price__value { font: 700 var(--fs-3xl)/1.1 var(--font-display); margin: var(--s-2) 0; letter-spacing: -0.02em; }
.price__value small { font-size: var(--fs-base); color: var(--c-muted); font-weight: 600; letter-spacing: 0; }
.price ul { list-style: none; padding: 0; margin: var(--s-4) 0 0; display: flex; flex-direction: column; gap: var(--s-2); font-size: var(--fs-sm); }
.price li { display: flex; gap: var(--s-2); align-items: flex-start; }
.price li .icon { color: var(--c-success); margin-top: 2px; }
.cta-band { text-align: center; padding: var(--s-10) var(--s-5); border-radius: var(--r-xl); background: var(--grad-brand); color: #fff; box-shadow: var(--sh-brand); }
.cta-band h2 { color: #fff; font-size: var(--fs-2xl); }
.cta-band p { color: rgba(255, 255, 255, 0.88); max-width: 46ch; margin: 0 auto var(--s-5); }
.cta-band .btn--light { --btn-bg: #fff; --btn-fg: var(--brand-600); --btn-border: transparent; }
.cta-band .btn--outline-light { --btn-bg: transparent; --btn-fg: #fff; --btn-border: rgba(255, 255, 255, 0.7); }

/* 7.2 Auth */
.auth-alt { display: flex; flex-direction: column; gap: var(--s-3); }
.pw-strength { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-xs); color: var(--c-muted); }
.pw-strength li { display: inline-flex; align-items: center; gap: 4px; }
.pw-strength li::before { content: "○"; font-weight: 800; }
.pw-strength li.is-ok { color: var(--c-success); }
.pw-strength li.is-ok::before { content: "✓"; }
.auth-email { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill); background: var(--c-surface-3); font-weight: 700; font-size: var(--fs-sm); color: var(--c-text); overflow-wrap: anywhere; }

/* 7.3 Payer */
.pay-card { padding: 0; overflow: visible; }
.pay-card__section { padding: var(--s-5); }
.pay-card__section + .pay-card__section { border-top: 1px solid var(--c-border); }
@media (min-width: 480px) { .pay-card__section { padding: var(--s-6); } }
.payee { display: flex; align-items: center; gap: var(--s-3); }
.payee__logo { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 16px; object-fit: cover; background: var(--c-surface-3); border: 1px solid var(--c-border); }
.payee__label { display: block; font-size: var(--fs-xs); font-weight: 700; color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.payee__name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 0; font-size: var(--fs-xl); overflow-wrap: anywhere; }
.pay-summary { text-align: center; }
.pay-summary__label { display: block; font-size: var(--fs-sm); color: var(--c-muted); font-weight: 600; margin-bottom: var(--s-1); }
.pay-summary__title { margin: var(--s-2) 0 0; font-weight: 700; font-size: var(--fs-md); overflow-wrap: anywhere; }
.pay-summary__desc { margin: var(--s-1) 0 0; color: var(--c-muted); font-size: var(--fs-sm); white-space: pre-line; overflow-wrap: anywhere; }
.pay-summary__meta { margin-top: var(--s-3); display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s-2); }
.amount-input { position: relative; }
.amount-input .input { height: 72px; padding-right: 5rem; font: 700 2rem/1 var(--font-display); text-align: left; letter-spacing: -0.01em; }
.amount-input__currency { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); font: 700 1.1rem/1 var(--font-display); color: var(--c-muted); pointer-events: none; }
.amount-input .input::-webkit-outer-spin-button, .amount-input .input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.amount-input .input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.pay-actions { position: sticky; bottom: 0; z-index: 20; margin: 0 calc(-1 * var(--s-5)) calc(-1 * var(--s-5)); padding: var(--s-4) var(--s-5) calc(var(--s-4) + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, color-mix(in srgb, var(--c-surface) 0%, transparent), var(--c-surface) 18%); border-radius: 0 0 var(--r-xl) var(--r-xl); }
@media (min-width: 480px) { .pay-actions { margin: 0 calc(-1 * var(--s-6)) calc(-1 * var(--s-6)); padding-inline: var(--s-6); } }
.pay-actions__note { margin: var(--s-2) 0 0; font-size: var(--fs-xs); color: var(--c-danger); font-weight: 600; text-align: center; min-height: 1em; }
.pay-actions__note:empty { display: none; }
.secure-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: var(--s-3) 0 0; font-size: var(--fs-xs); color: var(--c-muted); font-weight: 600; }
.secure-note .icon { width: 14px; height: 14px; }
.pay-extra { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-4); margin-top: var(--s-4); font-size: var(--fs-sm); }
.pay-extra a { color: var(--c-muted); display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); }
.profile-box { padding: var(--s-4); border-radius: var(--r-md); background: var(--c-surface-2); border: 1px solid var(--c-border); }
.code-row { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.code-row .input { max-width: 200px; letter-spacing: 0.3em; text-align: center; font-family: var(--font-mono); font-weight: 700; }
.image-preview { margin-top: var(--s-2); }
.image-preview img { max-height: 140px; border-radius: var(--r-sm); border: 1px solid var(--c-border); }
.section-label { margin: 0 0 var(--s-3); font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); font-family: var(--font-body); }

/* Stripe checkout */
.checkout-total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
#payment-element { min-height: 120px; }
#wallet-button-container { margin-bottom: var(--s-4); }
.gpay-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; border-radius: var(--r-pill); background: #000; color: #fff; font-weight: 700; font-size: var(--fs-md); text-decoration: none; }
.gpay-btn svg { width: 22px; height: 22px; }
body.in-chrome-payment .checkout-summary,
body.in-chrome-payment #payment-element,
body.in-chrome-payment #submit,
body.in-chrome-payment #instant-fallback-btn,
body.in-chrome-payment .secure-note,
body.in-chrome-payment .balance-pay,
body.in-chrome-payment .focus-card__title { display: none !important; }
body.in-chrome-payment #wallet-button-container { display: block !important; }
body.in-chrome-payment .focus__main { display: flex; flex-direction: column; justify-content: center; }
.payment-message:empty { display: none; }
.payment-message a { margin-left: var(--s-2); }

/* Result page */
.result-hero { text-align: center; }
.result-hero__icon { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto var(--s-4); border-radius: 50%; }
.result-hero__icon .icon { width: 36px; height: 36px; stroke-width: 2.4; }
.result-hero--paid .result-hero__icon { background: var(--c-success-bg); color: var(--c-success); animation: pop 420ms var(--ease); }
.result-hero--pending .result-hero__icon { background: var(--c-warning-bg); color: var(--c-warning); }
.result-hero--failed .result-hero__icon { background: var(--c-danger-bg); color: var(--c-danger); }
.result-hero--cancelled .result-hero__icon { background: var(--c-neutral-bg); color: var(--c-neutral); }
.result-hero__title { font-size: var(--fs-2xl); margin-bottom: var(--s-2); }
.result-hero__lead { color: var(--c-muted); margin: 0 auto; max-width: 38ch; }
@keyframes pop { 0% { transform: scale(0.6); opacity: 0; } 70% { transform: scale(1.08); } 100% { transform: scale(1); } }
.receipt { margin-top: var(--s-6); padding: var(--s-4) var(--s-5); border-radius: var(--r-lg); background: var(--c-surface-2); border: 1px dashed var(--c-border-strong); }
.receipt__head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); margin-bottom: var(--s-2); }
.receipt__head h2 { margin: 0; font-size: var(--fs-base); font-family: var(--font-body); font-weight: 800; }
.deliverable { padding: var(--s-3) var(--s-4); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); overflow-wrap: anywhere; }
.pre-line { white-space: pre-line; }
.input-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.input-row .input { flex: 1 1 220px; }
.input-row .btn { flex: 1 0 auto; }
.deliverable--number { text-align: center; font: 700 1.6rem/1.2 var(--font-display); color: var(--c-link); }
.spinner-dots { display: inline-flex; gap: 4px; }
.spinner-dots span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: blink 1.2s infinite both; }
.spinner-dots span:nth-child(2) { animation-delay: 0.2s; }
.spinner-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }

/* 7.4 Dashboard */
.next-step { display: flex; flex-direction: column; gap: var(--s-4); }
.next-step__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--grad-brand); color: #fff; flex: 0 0 48px; }
.next-step__body { flex: 1 1 auto; min-width: 0; }
.next-step__cta { flex: 0 0 auto; }
.next-step__body h2 { font-size: var(--fs-lg); margin-bottom: var(--s-1); }
.next-step__body p { margin: 0; color: var(--c-muted); }
@media (min-width: 720px) { .next-step { flex-direction: row; align-items: center; } .next-step__cta { margin-left: auto; } }
.checklist { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-2); }
.checklist li { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-sm); font-weight: 600; color: var(--c-text-2); }
.checklist .tick { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--c-border-strong); color: transparent; flex: 0 0 24px; }
.checklist .is-done .tick { background: var(--c-success); border-color: var(--c-success); color: #fff; }
.checklist .is-done span:last-child { color: var(--c-muted); text-decoration: line-through; }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat__label { font-size: var(--fs-xs); color: var(--c-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.stat__value { font: 700 var(--fs-xl)/1.2 var(--font-display); font-variant-numeric: tabular-nums; }
.quick-actions { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .quick-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.quick-action { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4); min-height: 104px; }
.quick-action .icon { width: 24px; height: 24px; color: var(--brand-500); }
.quick-action strong { font-size: var(--fs-sm); }
.quick-action small { color: var(--c-muted); font-size: var(--fs-xs); line-height: 1.35; }
.quick-action--locked { opacity: 0.85; }

/* 8. Utilities ---------------------------------------------------------------- */
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.muted { color: var(--c-muted); }
.small { font-size: var(--fs-sm); }
.xsmall { font-size: var(--fs-xs); }
.nowrap { white-space: nowrap; }
.break { overflow-wrap: anywhere; }
.m-0 { margin: 0 !important; }
.mt-2 { margin-top: var(--s-2) !important; }
.mt-4 { margin-top: var(--s-4) !important; }
.mt-6 { margin-top: var(--s-6) !important; }
.mt-8 { margin-top: var(--s-8) !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-4 { margin-bottom: var(--s-4) !important; }
.w-full { width: 100%; }
.hide-mobile { display: none !important; }
@media (min-width: 640px) { .hide-mobile { display: revert !important; } .hide-desktop { display: none !important; } }

/* Third-party widgets injected at runtime (cookie banner, notifications.js) */
#cookie-consent-banner { font-family: var(--font-body) !important; font-size: var(--fs-sm) !important; border-radius: var(--r-lg) !important; max-width: 720px; margin-inline: auto; }
#cookie-consent-banner .cc-btn { min-height: 40px; border-radius: var(--r-pill) !important; font-weight: 700; font-family: var(--font-body); }
#cookie-consent-actions { flex-wrap: wrap; }
.h3 { font-size: var(--fs-md); }
/* notifications.js popups: inside the viewport, never over the top bar / primary actions, auto-hide.
   Mobile: bottom (above the bottom nav). Desktop: top-right below the header. */
html[data-qr-layout="v2"] #notifications-container {
  top: auto !important; left: 16px !important; right: 16px !important;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  max-width: calc(100vw - 32px) !important; margin-left: auto;
}
html[data-qr-layout="v2"] body.has-bottomnav #notifications-container { bottom: calc(var(--bottomnav-h) + 12px + env(safe-area-inset-bottom, 0px)) !important; }
@media (min-width: 960px) {
  html[data-qr-layout="v2"] #notifications-container { top: calc(var(--topbar-h) + 12px) !important; bottom: auto !important; left: auto !important; max-width: 360px !important; }
  html[data-qr-layout="v2"] body.has-bottomnav #notifications-container { bottom: auto !important; }
}
html[data-qr-layout="v2"] #notifications-container .notification {
  font-family: var(--font-body); border-radius: var(--r-md) !important; background: var(--c-surface) !important;
  color: var(--c-text) !important; border-color: var(--c-border) !important; box-shadow: var(--sh-3) !important;
  animation: toast-in 200ms var(--ease), qr-autohide 400ms ease 8s forwards !important;
}
@keyframes qr-autohide { to { opacity: 0; visibility: hidden; transform: translateY(6px); } }
.menu__head strong, .menu__head span { white-space: nowrap; }
.page-header__title, .focus-card__title, .hero__title { overflow-wrap: anywhere; }
.page-header > div { min-width: 0; }
/* Phones: dropdowns become full-width sheets under the top bar (never clipped by the screen edge). */
@media (max-width: 639.98px) {
  .topbar .menu__panel { position: fixed; left: 12px; right: 12px; top: calc(var(--topbar-h) + 6px + env(safe-area-inset-top, 0px)); min-width: 0; max-width: none; }
}
/* Focus pages (auth/payer) keep the primary button at the bottom: show popups at the top instead. */
html[data-qr-layout="v2"] body.focus-page #notifications-container { top: calc(56px + env(safe-area-inset-top, 0px)) !important; bottom: auto !important; }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }

/* === p3-admin additions === */
/* A1. Admin / staff shell (layouts/admin.html) */
.admin-topbar { position: sticky; top: 0; z-index: 200; background: color-mix(in srgb, var(--c-surface) 92%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--c-border); padding-top: env(safe-area-inset-top, 0px); }
.admin-topbar__inner { display: flex; align-items: center; gap: var(--s-2); min-height: var(--topbar-h); padding-inline: var(--gutter); }
.admin-topbar__actions { margin-left: auto; display: flex; align-items: center; gap: var(--s-1); min-width: 0; }
.admin-topbar__actions .menu { min-width: 0; }
.admin-tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--r-pill); background: var(--c-text); color: var(--c-surface); font: 800 var(--fs-xs)/1.5 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; }
.admin-lock { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--s-3); border-radius: var(--r-pill); border: 1px solid transparent; font-size: var(--fs-sm); font-weight: 700; text-decoration: none; white-space: nowrap; }
.admin-lock--locked { background: var(--c-warning-bg); border-color: var(--c-warning-border); color: var(--c-warning); }
.admin-lock--open { background: var(--c-success-bg); border-color: var(--c-success-border); color: var(--c-success); }
.admin-lock__time { font-variant-numeric: tabular-nums; }
.admin-lock:hover { text-decoration: none; filter: brightness(0.97); }
@media (max-width: 479.98px) {
  .admin-lock__text { display: none; }
  .admin-lock--locked { padding: 0 10px; }
  .admin-topbar .brand__word { display: none; }
}
@media (max-width: 639.98px) {
  .admin-topbar .menu__panel { position: fixed; left: 12px; right: 12px; top: calc(var(--topbar-h) + 6px + env(safe-area-inset-top, 0px)); min-width: 0; max-width: none; }
}
.admin-shell { display: block; }
.admin-main { min-width: 0; padding: var(--s-6) var(--gutter) var(--s-12); }
.admin-main > * { max-width: 1240px; }
.admin-main--wide > * { max-width: none; }
.admin-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.admin-nav__group + .admin-nav__group { margin-top: var(--s-4); }
.admin-nav__label { margin: 0 0 var(--s-1); padding: 0 var(--s-3); font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); }
.admin-nav a { display: flex; align-items: center; gap: var(--s-3); min-height: 40px; padding: 0 var(--s-3); border-radius: var(--r-sm); color: var(--c-text-2); font-weight: 650; font-size: var(--fs-sm); text-decoration: none; }
.admin-nav a .icon { color: var(--c-muted); }
.admin-nav a:hover { background: var(--c-surface-3); color: var(--c-text); }
.admin-nav a[aria-current="page"] { background: var(--brand-50); color: var(--c-link); }
.admin-nav a[aria-current="page"] .icon { color: var(--c-link); }
.admin-nav--side { display: none; }
.admin-drawer .admin-nav { padding: var(--s-4) var(--s-3) calc(var(--s-6) + env(safe-area-inset-bottom, 0px)); overflow: auto; }
.admin-drawer[open] { display: flex; flex-direction: column; }
@media (max-width: 639.98px) { .admin-drawer { margin: 0 auto 0 0; height: 100dvh; max-height: 100dvh; width: min(320px, 88vw); border-radius: 0 var(--r-xl) var(--r-xl) 0; } }
@media (min-width: 640px) { .admin-drawer { margin: 0 auto 0 0; height: 100dvh; max-height: 100dvh; width: 300px; border-radius: 0 var(--r-xl) var(--r-xl) 0; } }
@media (min-width: 1024px) {
  .admin-topbar__menu { display: none; }
  .admin-shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); align-items: start; }
  .admin-nav--side { display: block; position: sticky; top: var(--topbar-h); max-height: calc(100dvh - var(--topbar-h)); overflow: auto; padding: var(--s-6) var(--s-3) var(--s-8) var(--s-4); border-right: 1px solid var(--c-border); }
  .admin-main { padding: var(--s-6) var(--s-8) var(--s-16); }
  .account-btn__name { display: inline; }
}

/* A2. Admin components: dense tables, filter bars, pagination, stat tiles, key/value, code */
.admin-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.admin-table th { position: sticky; top: 0; z-index: 1; text-align: left; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-muted); font-weight: 800; padding: var(--s-2) var(--s-3); background: var(--c-surface-2); border-bottom: 1px solid var(--c-border); white-space: nowrap; }
.admin-table td { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--c-border); vertical-align: top; }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table tbody tr:hover { background: var(--c-surface-2); }
.admin-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin-table .nowrap { white-space: nowrap; }
.admin-table .actions { white-space: nowrap; text-align: right; }
.admin-table .actions form { display: inline; }
.admin-table .cell-clip { max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-table .cell-wrap { min-width: 20ch; max-width: 60ch; overflow-wrap: anywhere; }
.admin-table tr.is-muted td { color: var(--c-muted); }
.admin-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.card--flush > .admin-table-wrap { border-radius: inherit; }
.admin-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3); }
.admin-filters .field { flex: 1 1 180px; }
.admin-filters .field--grow { flex: 3 1 260px; }
.admin-filters .btn { flex: 0 0 auto; }
.admin-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--c-border); }
.admin-toolbar__title { margin: 0; font-size: var(--fs-md); }
.admin-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--c-border); font-size: var(--fs-sm); color: var(--c-muted); }
.admin-pager__links { display: flex; gap: var(--s-2); }
.admin-stats { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); }
.admin-stat { padding: var(--s-4); }
.admin-stat__label { display: block; font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--c-muted); }
.admin-stat__value { display: block; margin-top: 2px; font: 700 var(--fs-xl)/1.15 var(--font-display); font-variant-numeric: tabular-nums; }
.admin-stat__hint { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--c-muted); }
.admin-kv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px var(--s-4); margin: 0; font-size: var(--fs-sm); }
.admin-kv dt { color: var(--c-muted); font-weight: 600; }
.admin-kv dd { margin: 0 0 var(--s-2); font-weight: 650; overflow-wrap: anywhere; }
@media (min-width: 640px) { .admin-kv { grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); } .admin-kv dd { margin: 0; } }
.admin-code { display: block; max-height: 320px; overflow: auto; margin: 0; padding: var(--s-3); border-radius: var(--r-sm); background: var(--c-surface-3); font: 500 var(--fs-xs)/1.5 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-mono { font-family: var(--font-mono); font-size: 0.92em; }
.admin-section-title { margin: var(--s-8) 0 var(--s-3); font-size: var(--fs-lg); }
.admin-section-title:first-child { margin-top: 0; }
.admin-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.admin-locked-note { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); color: var(--c-warning); font-weight: 700; }
.pill--warning { background: var(--c-warning-bg); color: var(--c-warning); }
.pill--danger { background: var(--c-danger-bg); color: var(--c-danger); }
.pill--success { background: var(--c-success-bg); color: var(--c-success); }
.admin-narrow { max-width: 640px; }
.admin-bullets { margin: 0 0 var(--s-3); padding-left: 1.2rem; font-size: var(--fs-sm); color: var(--c-text-2); }
.admin-bullets li { margin-bottom: var(--s-1); }
@media (max-width: 399.98px) {
  .admin-topbar .account-btn > .icon { display: none; }
  .admin-topbar .lang-switch span { display: none; }
  .admin-tag { padding: 2px 6px; letter-spacing: 0.03em; }
  .admin-lock__time { display: none; }
  .admin-lock { padding: 0 10px; }
  .admin-topbar__inner { gap: 6px; }
  .admin-topbar__actions { gap: 2px; }
}
@media (min-width: 1024px) { .admin-nav--side { min-height: calc(100dvh - var(--topbar-h)); } }

/* S1. Support pages (support_form, support_faq, support_links) */
.support-hero { margin-bottom: var(--s-6); }
.support-hero__title { margin: var(--s-2) 0 var(--s-2); font-size: var(--fs-3xl); overflow-wrap: anywhere; }
.support-hero__lead { margin: 0; max-width: 60ch; color: var(--c-muted); font-size: var(--fs-md); }
.support-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s-2); font-size: var(--fs-sm); color: var(--c-muted); }
.support-crumbs a { color: var(--c-text-2); }
.support-layout { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 960px) { .support-layout { grid-template-columns: minmax(0, 1fr) 320px; } }
.support-form-card { min-width: 0; }
.support-form__pair { gap: var(--s-4); }
.support-subform { padding: var(--s-4); border: 1px solid var(--c-border); border-left: 4px solid var(--brand-500); border-radius: var(--r-md); background: var(--c-surface-2); }
.support-subform .check { padding-bottom: 0; }
.support-counter { text-align: right; font-variant-numeric: tabular-nums; }
.support-counter.is-warning { color: var(--c-warning); }
.support-counter.is-danger { color: var(--c-danger); font-weight: 700; }
.support-file { width: 100%; min-height: var(--control-h); padding: var(--s-2); border: 1.5px dashed var(--c-border-strong); border-radius: var(--r-md); background: var(--c-surface-2); color: var(--c-text-2); font: 500 1rem/1.4 var(--font-body); }
.support-file::file-selector-button { margin-right: var(--s-3); min-height: 36px; padding: 0 var(--s-4); border: 1px solid var(--brand-200); border-radius: var(--r-pill); background: var(--c-surface); color: var(--c-link); font: 700 var(--fs-sm)/1 var(--font-body); cursor: pointer; }
.support-file:focus-visible { outline: none; border-color: var(--brand-500); box-shadow: var(--ring); }
.support-submit { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-2); }
.support-aside__card { padding: var(--s-5); }
.support-aside__title { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-3); font-size: var(--fs-base); font-family: var(--font-body); font-weight: 800; }
.support-aside__title .icon { color: var(--brand-500); }
.support-linklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.support-linklist a { display: flex; align-items: center; gap: var(--s-2); min-height: var(--tap); font-weight: 700; font-size: var(--fs-sm); text-decoration: none; }
.support-linklist a:hover span { text-decoration: underline; }
.support-tips { margin: 0; padding-left: 1.1rem; font-size: var(--fs-sm); color: var(--c-text-2); }
.support-tips li + li { margin-top: var(--s-2); }
.copy-field .support-helpid { font-family: var(--font-mono); font-size: 1rem; letter-spacing: 0.04em; min-width: 0; }
.support-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.support-card { display: flex; align-items: flex-start; gap: var(--s-4); height: 100%; padding: var(--s-5); }
.support-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.support-card__title { font-size: var(--fs-base); color: var(--c-text); }
.support-card__desc { font-size: var(--fs-sm); color: var(--c-muted); }
.support-card__chev { margin-top: 4px; color: var(--c-muted); }
.support-contact, .support-faq-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); }
.support-contact > div, .support-faq-cta > div { flex: 1 1 260px; min-width: 0; }

/* FAQ */
.support-faq-controls { display: flex; flex-direction: column; gap: var(--s-3); margin-bottom: var(--s-5); }
.support-search .input { padding-left: 0.9rem; }
.support-faq-filters > summary { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap); cursor: pointer; font-weight: 700; font-size: var(--fs-sm); color: var(--c-link); list-style: none; }
.support-faq-filters > summary::-webkit-details-marker { display: none; }
.support-faq-filters__grid { display: grid; gap: var(--s-3); grid-template-columns: 1fr; padding-top: var(--s-2); }
@media (min-width: 720px) { .support-faq-filters__grid { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; } }
.support-faq-layout { display: grid; gap: var(--s-5); align-items: start; }
.support-faq-cats { padding: var(--s-4); }
.support-faq-cats__panel { display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 959.98px) { .support-faq-cats { order: 2; } }
@media (min-width: 960px) {
  .support-faq-layout { grid-template-columns: 280px minmax(0, 1fr); }
  .support-faq-cats { position: sticky; top: calc(var(--topbar-h) + var(--s-4)); max-height: calc(100dvh - var(--topbar-h) - var(--s-8)); overflow: auto; }
}
.support-cat { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); width: 100%; min-height: var(--tap); padding: 0 var(--s-3); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--c-text); font: 650 var(--fs-sm)/1.25 var(--font-body); text-align: left; cursor: pointer; list-style: none; }
.support-cat::-webkit-details-marker { display: none; }
.support-cat:hover { background: var(--c-surface-3); }
.support-cat__count { flex: 0 0 auto; padding: 1px 8px; border-radius: var(--r-pill); background: var(--c-surface-3); color: var(--c-muted); font-size: var(--fs-xs); font-weight: 800; }
.support-cat-group[open] > .support-cat { background: var(--c-surface-2); }
.support-cat-group__subs { display: flex; flex-direction: column; padding: 2px 0 var(--s-2) var(--s-3); }
.support-subcat { display: block; width: 100%; min-height: 40px; padding: var(--s-2) var(--s-3); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--c-text-2); font: 600 var(--fs-sm)/1.3 var(--font-body); text-align: left; cursor: pointer; }
.support-subcat:hover { background: var(--c-surface-3); color: var(--c-text); }
.support-cat.is-active, .support-subcat.is-active { background: var(--brand-50); color: var(--c-link); }
.support-faq-results { min-width: 0; }
.support-faq-list { display: flex; flex-direction: column; gap: var(--s-2); }
.support-faq-item { border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); box-shadow: var(--sh-1); }
.support-faq-item[open] { border-color: var(--brand-200); }
.support-faq-item__q { display: flex; align-items: center; gap: var(--s-3); min-height: 52px; padding: var(--s-3) var(--s-4); cursor: pointer; font-weight: 700; color: var(--c-text); list-style: none; }
.support-faq-item__q::-webkit-details-marker { display: none; }
.support-faq-item__q::after { content: ""; flex: 0 0 auto; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--c-muted); border-bottom: 2px solid var(--c-muted); transform: rotate(45deg); transition: transform 160ms var(--ease); }
.support-faq-item[open] > .support-faq-item__q::after { transform: rotate(-135deg); }
.support-faq-item__qtext { min-width: 0; overflow-wrap: anywhere; }
.support-faq-item__body { padding: 0 var(--s-4) var(--s-4); }
.support-faq-item__a { margin: 0 0 var(--s-3); color: var(--c-text-2); white-space: pre-line; overflow-wrap: anywhere; }
.support-faq-item__meta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; }
.support-faq-item__meta .pill { white-space: normal; }
.support-faq-item mark { background: var(--c-warning-bg); color: inherit; border-radius: 3px; padding: 0 1px; }

/* S2. Error / rate-limit pages (http_error, rate_limited) */
.error-card__code { margin: 0 0 var(--s-1); font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); }
.error-card__detail { margin: 0 auto var(--s-3); max-width: 42ch; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--c-surface-2); border: 1px solid var(--c-border); font-size: var(--fs-sm); color: var(--c-text-2); overflow-wrap: anywhere; }
.error-card__retry { margin: 0; font-weight: 700; color: var(--c-text-2); font-variant-numeric: tabular-nums; }

/* S3. "Report an issue" link (account/_ui.html report_link) */
.report-link { margin-left: var(--s-3); font-weight: 600; color: inherit; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }

/* L1. Legal documents (templates/legal/_base.html) + help docs (templates/public/help_doc.html) */
.legal { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); }
.legal__aside { min-width: 0; }
.legal-toc { border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); box-shadow: var(--sh-1); font-size: var(--fs-sm); }
.legal-toc > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: var(--tap); padding: 0 var(--s-4); font-weight: 800; color: var(--c-text); cursor: pointer; list-style: none; }
.legal-toc > summary::-webkit-details-marker { display: none; }
.legal-toc > summary::after { content: ""; width: 8px; height: 8px; margin-right: 4px; border-right: 2px solid var(--c-muted); border-bottom: 2px solid var(--c-muted); transform: rotate(45deg); transition: transform 160ms var(--ease); }
.legal-toc[open] > summary::after { transform: rotate(-135deg); }
.legal-toc__list { list-style: none; margin: 0; padding: 0 var(--s-2) var(--s-3); max-height: 60vh; overflow: auto; }
.legal-toc__list a { display: block; padding: 6px var(--s-2); border-radius: var(--r-sm); color: var(--c-text-2); text-decoration: none; line-height: 1.35; overflow-wrap: anywhere; }
.legal-toc__list a:hover { background: var(--c-surface-3); color: var(--c-text); }
.legal-toc__list a[aria-current="true"] { background: var(--brand-50); color: var(--c-link); font-weight: 700; }
.legal-toc__sub a { padding-left: var(--s-5); font-size: var(--fs-xs); }
.legal-doc { min-width: 0; max-width: 74ch; padding: var(--s-5); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--sh-1); color: var(--c-text-2); font-size: var(--fs-base); line-height: 1.7; overflow-wrap: break-word; }
@media (min-width: 640px) { .legal-doc { padding: var(--s-8) var(--s-10); } }
.legal-doc__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: var(--s-4); font-size: var(--fs-sm); color: var(--c-muted); }
.legal-doc__crumbs a { color: var(--c-muted); font-weight: 600; }
.legal-doc__header { padding-bottom: var(--s-5); margin-bottom: var(--s-5); border-bottom: 1px solid var(--c-border); }
.legal-doc__header h1 { font-size: clamp(1.6rem, 1.25rem + 1.6vw, 2.2rem); margin-bottom: var(--s-3); overflow-wrap: anywhere; }
.legal-doc__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); }
.legal-doc__version { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--r-pill); background: var(--c-surface-3); color: var(--c-text-2); font-size: var(--fs-sm); font-weight: 650; }
.legal-doc__body h2 { margin: var(--s-10) 0 var(--s-3); font-size: var(--fs-lg); line-height: 1.3; scroll-margin-top: calc(var(--topbar-h) + 16px); }
.legal-doc__body h2:first-child { margin-top: 0; }
.legal-doc__body h3 { margin: var(--s-6) 0 var(--s-2); font-size: var(--fs-base); line-height: 1.35; scroll-margin-top: calc(var(--topbar-h) + 16px); }
.legal-doc__body p { margin: 0 0 var(--s-4); }
.legal-doc__body ul, .legal-doc__body ol { margin: 0 0 var(--s-4); padding-left: 1.3rem; }
.legal-doc__body li { margin-bottom: var(--s-2); }
.legal-doc__body li::marker { color: var(--c-muted); }
.legal-doc__body a { overflow-wrap: anywhere; }
.legal-doc__body .note, .legal-doc__body .box { margin: var(--s-4) 0; padding: var(--s-3) var(--s-4); border: 1px solid var(--c-info-border); border-left-width: 4px; border-radius: var(--r-md); background: var(--c-info-bg); color: var(--c-text); font-size: var(--fs-sm); }
.legal-doc__body .muted { color: var(--c-muted); }
.legal-doc__body code { overflow-wrap: anywhere; }
.legal-doc__body pre, .legal-doc__body table { display: block; max-width: 100%; overflow-x: auto; }
.legal-doc__footer { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-10); padding-top: var(--s-5); border-top: 1px solid var(--c-border); font-size: var(--fs-sm); }
.legal-doc__footer a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; }
@media (min-width: 1024px) {
  .legal { grid-template-columns: 260px minmax(0, 1fr); align-items: start; gap: var(--s-8); }
  .legal__aside { position: sticky; top: calc(var(--topbar-h) + var(--s-4)); }
  .legal-toc > summary { pointer-events: none; }
  .legal-toc > summary::after { display: none; }
  .legal-toc__list { max-height: calc(100dvh - var(--topbar-h) - 120px); }
}
/* Help docs (/help/*) */
.help-doc .legal-doc__body > nav a { display: flex; align-items: center; min-height: var(--tap); padding: 0 var(--s-3); border: 1px solid var(--c-border); border-radius: var(--r-md); margin-bottom: var(--s-2); text-decoration: none; font-weight: 650; color: var(--c-text); background: var(--c-surface-2); }
.help-doc .legal-doc__body > nav a:hover { border-color: var(--brand-200); background: var(--brand-50); }
.help-doc__lang { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 700; }
@media print {
  .site-header, .site-footer, .legal__aside, .legal-doc__print, .legal-doc__footer, .legal-doc__crumbs, #cookie-consent-banner, .toast-region, .impersonation-bar { display: none !important; }
  body { background: #fff !important; color: #000; }
  .site-main { padding: 0; }
  .legal { display: block; }
  .legal-doc { max-width: none; padding: 0; border: 0; box-shadow: none; color: #000; font-size: 11pt; line-height: 1.5; }
  .legal-doc__body h2, .legal-doc__body h3 { break-after: avoid; }
  .legal-doc__body a { color: #000; }
}
/* Seller terms (/terms/<slug>, templates/regulamin.html) */
.legal-seller { display: flex; flex-direction: column; gap: var(--s-4); }
.legal-seller .legal-doc__version { align-self: flex-start; }
.legal-seller__body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; color: var(--c-text-2); }
/* Documents without enough headings for a TOC (help index, short articles): one centred column. */
@media (min-width: 1024px) {
  .legal:has(> .legal__aside [data-legal-toc][hidden]) { grid-template-columns: minmax(0, 1fr); }
  .legal:has(> .legal__aside [data-legal-toc][hidden]) .legal-doc { margin-inline: auto; width: 100%; }
}
.legal:has(> .legal__aside [data-legal-toc][hidden]) .legal__aside { display: none; }

/* A30. Admin core pages: dashboard, users, seller subscriptions */
.admin-unlock-card { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); padding: var(--s-4) var(--s-5); border-color: var(--c-warning-border); background: var(--c-warning-bg); }
.admin-unlock-card__icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; background: var(--c-surface); color: var(--c-warning); }
.admin-unlock-card__body { flex: 1 1 220px; min-width: 0; }
.admin-meter { display: block; height: 6px; margin-top: var(--s-2); border-radius: var(--r-pill); background: var(--c-surface-3); overflow: hidden; }
.admin-meter__bar { display: block; height: 100%; border-radius: inherit; background: var(--brand-500); }
.admin-meter__bar--ok { background: var(--c-success); }
.admin-meter__bar--warn { background: var(--c-warning); }
.admin-meter__bar--muted { background: var(--c-neutral); }
a.admin-stat { text-decoration: none; color: inherit; }
.admin-range { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-3); }
.admin-range__dates { margin-left: auto; }
.admin-chips { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.admin-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--s-3); border-radius: var(--r-pill); border: 1px solid var(--c-border-strong); background: var(--c-surface); color: var(--c-text-2); font-size: var(--fs-sm); font-weight: 700; text-decoration: none; white-space: nowrap; }
.admin-chip:hover { border-color: var(--brand-200); color: var(--c-text); text-decoration: none; }
.admin-chip[aria-current="true"], .admin-chip[aria-current="page"] { background: var(--c-text); border-color: var(--c-text); color: var(--c-surface); }
.admin-chip__count { margin-left: 6px; font-variant-numeric: tabular-nums; opacity: 0.75; }
.admin-chart-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.admin-chart { min-width: 0; overflow: hidden; padding: var(--s-4) var(--s-5); }
.admin-chart__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.admin-chart__title { margin: 0; font-size: var(--fs-base); }
.admin-chart__total { font: 700 var(--fs-xl)/1 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin-chart__total small { font-size: var(--fs-sm); color: var(--c-muted); }
.admin-chart__sub { margin: var(--s-1) 0 var(--s-2); font-size: var(--fs-xs); color: var(--c-muted); }
.admin-chart .line-wrap { overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.admin-chart .line-chart { display: block; height: 140px; min-width: 100%; }
.admin-chart .line-grid { stroke: var(--c-border); stroke-width: 1; }
.admin-chart .line-path { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke: var(--brand-500); }
.admin-chart .line-dot { stroke: var(--c-surface); stroke-width: 1.5; opacity: 0.6; fill: var(--brand-500); cursor: pointer; transform-box: fill-box; transform-origin: center; transition: transform 0.15s ease, opacity 0.15s ease; }
.admin-chart .line-dot.active { opacity: 1; transform: scale(1.25); }
.admin-chart .line-cursor { stroke: var(--brand-200); stroke-width: 1.5; stroke-dasharray: 3 4; pointer-events: none; }
.admin-chart .nv { stroke: var(--brand-teal); }
.admin-chart .line-dot.nv { fill: var(--brand-teal); }
.admin-chart .pv { stroke: var(--brand-sky); }
.admin-chart .line-dot.pv { fill: var(--brand-sky); }
.admin-chart .crw { stroke: var(--c-neutral); }
.admin-chart .line-dot.crw { fill: var(--c-neutral); }
.admin-chart .txc { stroke: var(--c-success); }
.admin-chart .line-dot.txc { fill: var(--c-success); }
.admin-chart .txa { stroke: var(--c-plus); }
.admin-chart .line-dot.txa { fill: var(--c-plus); }
.admin-chart .line-path.reg, .admin-chart .line-dot.reg { stroke: var(--brand-500); }
.admin-chart .line-dot.reg { fill: var(--brand-500); stroke: var(--c-surface); }
.admin-chart .line-dot.nv, .admin-chart .line-dot.pv, .admin-chart .line-dot.crw, .admin-chart .line-dot.txc, .admin-chart .line-dot.txa { stroke: var(--c-surface); }
.admin-chart .line-labels { display: grid; grid-auto-flow: column; grid-auto-columns: var(--label-step, 28px); justify-content: start; margin-top: var(--s-2); padding: 0 12px; font-size: 10px; line-height: 1; color: var(--c-muted); }
.admin-chart .line-labels span { white-space: nowrap; }
.admin-chart .chart-inspector { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 40px; margin-top: var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); background: var(--c-surface-2); border: 1px solid var(--c-border); }
.admin-chart .chart-inspector-when { font-size: var(--fs-xs); color: var(--c-muted); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-chart .chart-inspector-value { font-size: var(--fs-sm); font-weight: 800; white-space: nowrap; }
.admin-card-head { padding: var(--s-4) var(--s-5) var(--s-2); }
.admin-card-head + .list .list__item:first-child { border-top: 1px solid var(--c-border); }
.list__item > .icon:first-child { color: var(--c-muted); }

/* Users */
.admin-user-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); }
.admin-user-head__main { flex: 1 1 240px; min-width: 0; }
.admin-user-head__name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0; font-size: var(--fs-xl); overflow-wrap: anywhere; }
.admin-user-head__email { margin: 2px 0 0; color: var(--c-muted); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.admin-user-head__pills { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.admin-actions-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); align-items: start; }
.admin-action-card { display: flex; flex-direction: column; gap: var(--s-3); }
.admin-action-card .card__title { font-size: var(--fs-md); }
.admin-action-card p { margin: 0; }
.admin-danger-zone { border-color: var(--c-danger-border); }
.admin-danger-zone .card__title { color: var(--c-danger); }
.admin-inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.admin-collapse > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: var(--tap); cursor: pointer; list-style: none; font-weight: 700; }
.admin-collapse > summary::-webkit-details-marker { display: none; }
.admin-collapse > summary .icon { transition: transform 160ms var(--ease); }
.admin-collapse[open] > summary .icon { transform: rotate(180deg); }
.admin-collapse__body { display: flex; flex-direction: column; gap: var(--s-3); padding-top: var(--s-3); }
.admin-table tr.is-selected td { background: var(--brand-50); }
.admin-table td .badge-verified { margin-left: 4px; }
.admin-table .admin-link-cell { max-width: 46ch; overflow-wrap: anywhere; }
.admin-list-empty { padding: var(--s-6) var(--s-4); text-align: center; color: var(--c-muted); font-size: var(--fs-sm); }
.admin-filters .select, .admin-filters .input { min-height: 44px; }

/* Seller subscriptions */
.admin-subs-amount { white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; }
.admin-users-table .cell-clip { max-width: 22ch; }
@media (min-width: 1280px) { .admin-users-table .cell-clip { max-width: 26ch; } }

/* A4. Admin ops pages: refunds, logs, support requests, IP limits, news */
.btn--danger-outline { --btn-bg: var(--c-surface); --btn-fg: var(--c-danger); --btn-border: var(--c-danger-border); }
.btn--danger-outline:hover { --btn-bg: var(--c-danger-bg); }
.btn--danger-text { --btn-fg: var(--c-danger); }
.btn--danger-text:hover { --btn-bg: var(--c-danger-bg); }
.admin-table tr.is-selected td { background: var(--brand-50); }
.refunds-actions { justify-content: flex-end; flex-wrap: nowrap; }

/* Logs */
.logs-filters { align-items: flex-end; }
.logs-filters .field { flex: 1 1 130px; }
.logs-filters .field--grow { flex: 3 1 220px; }
.logs-filters .logs-filters__weight { flex: 1 1 84px; max-width: 120px; }
.logs-count { padding: var(--s-2) var(--s-4) 0; }
.logs-table .logs-id { display: block; }
.logs-table .cell-wrap { min-width: 26ch; }
.logs-message { display: block; overflow-wrap: anywhere; }
.logs-details { margin-top: 4px; }
.logs-details > summary { cursor: pointer; font-size: var(--fs-xs); font-weight: 700; color: var(--c-link); min-height: 24px; }
.logs-details[open] > summary { margin-bottom: var(--s-2); }
.logs-details .admin-kv { font-size: var(--fs-xs); }
.logs-request { min-width: 14ch; }
.logs-path { display: block; max-width: 28ch; overflow-wrap: anywhere; color: var(--c-muted); }

/* Support requests */
.support-filters { padding: var(--s-4); }
.tickets { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.ticket { padding: var(--s-4) var(--s-5); }
.ticket__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s-2) var(--s-3); }
.ticket__subject { margin: 0; font-size: var(--fs-md); min-width: 0; flex: 1 1 260px; overflow-wrap: anywhere; }
.ticket__pills { display: flex; flex-wrap: wrap; gap: 6px; }
.ticket__meta { margin: var(--s-2) 0 0; font-size: var(--fs-sm); color: var(--c-muted); overflow-wrap: anywhere; }
.ticket__body { margin-top: var(--s-3); border-top: 1px solid var(--c-border); padding-top: var(--s-3); }
.ticket__body > summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.ticket__body > summary::-webkit-details-marker { display: none; }
.ticket__preview { color: var(--c-text-2); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.ticket__toggle { font-size: var(--fs-xs); font-weight: 800; color: var(--c-link); }
.ticket__body[open] .ticket__preview { display: none; }
.ticket__body[open] .ticket__toggle { margin-bottom: var(--s-2); }
.ticket__message { font-size: var(--fs-sm); color: var(--c-text); overflow-wrap: anywhere; padding: var(--s-3); border-radius: var(--r-sm); background: var(--c-surface-2); }
.ticket__meta-kv { margin-top: var(--s-3); font-size: var(--fs-xs); }
.ticket__actions { margin-top: var(--s-3); display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* IP limits */
.ip-bars { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.ip-bars li { display: grid; grid-template-columns: minmax(0, auto) minmax(40px, 1fr) minmax(0, auto); align-items: center; gap: var(--s-3); font-size: var(--fs-sm); }
.ip-bars__track { height: 10px; border-radius: var(--r-pill); background: var(--c-surface-3); overflow: hidden; }
.ip-bars__fill { display: block; height: 100%; border-radius: inherit; background: var(--grad-brand); }
.ip-bars__value { text-align: right; }
.ip-legend { gap: 6px; }
.ip-address { margin: calc(-1 * var(--s-4)) 0 var(--s-4); font-size: var(--fs-md); font-weight: 700; color: var(--c-text-2); }
.ip-usage-col { min-width: 120px; }
.meter { display: block; height: 8px; border-radius: var(--r-pill); background: var(--c-surface-3); overflow: hidden; }
.meter__fill { display: block; height: 100%; border-radius: inherit; background: var(--c-success); }
.meter--warning .meter__fill { background: var(--c-warning); }
.meter--danger .meter__fill { background: var(--c-danger); }
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--c-surface-3); }
.seg__item { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--s-3); border-radius: var(--r-pill); color: var(--c-text-2); font-weight: 700; font-size: var(--fs-sm); text-decoration: none; }
.seg__item:hover { color: var(--c-text); }
.seg__item[aria-current="page"] { background: var(--c-surface); color: var(--c-link); box-shadow: var(--sh-1); }

/* News */
.news-form-card + .news-list, .news-list + .news-form-card { margin-top: var(--s-6); }
.news-item { display: flex; align-items: center; gap: var(--s-3); min-width: 24ch; }
.news-item__img { width: 64px; height: 46px; flex: 0 0 64px; border-radius: var(--r-sm); object-fit: cover; background: var(--c-surface-3); }
.news-item__img--empty { display: grid; place-items: center; color: var(--c-muted); }
.news-item__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.news-status { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.news-actions { justify-content: flex-end; flex-wrap: nowrap; align-items: center; }
.news-lang { min-width: 0; padding: var(--s-4); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface-2); }
.news-lang__legend { display: flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-2); font-weight: 800; }
.news-file { padding: 0.55rem 0.7rem; }
.news-current-image { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-2); }
.news-current-image img { width: 72px; height: 52px; object-fit: cover; border-radius: var(--r-sm); background: var(--c-surface-3); }
.news-editor { border: 1.5px solid var(--c-border-strong); border-radius: var(--r-md); background: var(--c-surface); overflow: hidden; }
.news-editor:focus-within { border-color: var(--brand-500); box-shadow: var(--ring); }
.news-editor__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: var(--s-2); border-bottom: 1px solid var(--c-border); background: var(--c-surface-2); }
.news-editor__toolbar button, .news-editor__toolbar select { min-height: 36px; padding: 0 10px; border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-surface); color: var(--c-text); font: 700 var(--fs-sm)/1 var(--font-body); cursor: pointer; }
.news-editor__toolbar button:hover { background: var(--c-surface-3); }
.news-editor__toolbar select { font-size: 16px; }
.news-editor__toolbar input[type="color"] { font-size: 16px; width: 40px; height: 36px; padding: 2px; border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-surface); cursor: pointer; }
.news-editor__sep { width: 1px; align-self: stretch; margin: 2px 2px; background: var(--c-border); }
.news-editor__surface { min-height: 240px; max-height: 70vh; overflow: auto; padding: var(--s-3) var(--s-4); outline: none; font-size: var(--fs-base); line-height: 1.55; color: var(--c-text); overflow-wrap: anywhere; }
.news-editor__surface:empty::before { content: attr(data-placeholder); color: var(--c-muted); }
.news-editor__surface::after { content: ""; display: block; clear: both; }
.news-editor__surface img { float: right; max-width: min(46%, 280px); height: auto; border-radius: var(--r-sm); margin: 4px 0 12px 16px; }
.news-editor__surface img.news-float-right, .news-editor__surface img.news-float-none { float: right; margin: 4px 0 12px 16px; }
.news-editor__surface img.news-float-left { float: left; margin: 4px 16px 12px 0; }
.news-editor__surface img.news-float-nowrap { float: none; display: block; max-width: 100%; margin: 12px 0; }
.news-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
/* Stacked admin tables (< 720px): each row becomes a card-like block with labelled cells */
.admin-table.table--stack td { vertical-align: middle; }
@media (max-width: 719.98px) {
  .admin-table.table--stack thead { display: none; }
  .admin-table.table--stack tr { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--c-border); }
  .admin-table.table--stack tbody tr:last-child { border-bottom: 0; }
  .admin-table.table--stack td { padding: 4px 0; border: 0; min-width: 0; max-width: none; align-items: center; }
  .admin-table.table--stack td::before { flex: 0 0 auto; font-family: var(--font-body); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; }
  .admin-table.table--stack td > * { min-width: 0; }
  .admin-table.table--stack td.actions { justify-content: flex-end; padding-top: var(--s-2); }
  .admin-table.table--stack td.actions::before { display: none; }
  .admin-table.table--stack .cell-wrap { text-align: right; }
  .admin-table.table--stack .news-item { min-width: 0; text-align: left; }
  .admin-table.table--stack .news-status { align-items: flex-end; }
  .admin-table.table--stack .refunds-actions, .admin-table.table--stack .news-actions { flex-wrap: wrap; justify-content: flex-end; }
  .admin-table.table--stack .ip-usage-col .meter { width: 50%; }
}
.ticket__toggle--hide, .ticket__body[open] .ticket__toggle:not(.ticket__toggle--hide) { display: none; }
.ticket__body[open] .ticket__toggle--hide { display: inline; }
@media (max-width: 719.98px) {
  .news-table.table--stack td:first-child { justify-content: flex-start; text-align: left; }
  .news-table.table--stack td:first-child::before { display: none; }
}

/* A5. Staff panel (pracownicy/*) + Stripe diagnostics (test_stripe.html) */
.staff-grid { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
.staff-grid--focus .staff-main { order: -1; }
@media (min-width: 1100px) {
  .staff-grid { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); }
  .staff-grid--focus .staff-main { order: 0; }
  .staff-queue { position: sticky; top: calc(var(--topbar-h) + var(--s-4)); max-height: calc(100dvh - var(--topbar-h) - var(--s-8)); display: flex; flex-direction: column; }
  .staff-queue__list { overflow: auto; }
}
.staff-main { min-width: 0; }
.staff-queue__list { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow: auto; }
@media (min-width: 1100px) { .staff-queue__list { max-height: none; } }
.staff-queue__list li + li { border-top: 1px solid var(--c-border); }
.staff-msg { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: var(--s-3) var(--s-4); border: 0; border-left: 3px solid transparent; background: transparent; color: var(--c-text); font: inherit; text-align: left; cursor: pointer; }
.staff-msg:hover { background: var(--c-surface-2); }
.staff-msg.is-active { background: var(--brand-50); border-left-color: var(--brand-500); }
.staff-msg.is-handled .staff-msg__subject { color: var(--c-muted); }
.staff-msg__head { display: flex; justify-content: space-between; gap: var(--s-2); font-size: var(--fs-xs); color: var(--c-muted); }
.staff-msg__user { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--c-text-2); }
.staff-msg__time { flex: 0 0 auto; white-space: nowrap; }
.staff-msg__subject { font-weight: 700; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.staff-msg__preview { font-size: var(--fs-xs); color: var(--c-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.staff-msg__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--c-muted); }
.staff-detail__head { min-width: 0; }
.staff-message-body { padding: var(--s-4); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface-2); white-space: pre-line; overflow-wrap: anywhere; font-size: var(--fs-sm); line-height: 1.6; max-height: 420px; overflow: auto; }
.staff-attachments { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-1); font-size: var(--fs-sm); }
.staff-attachments a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; overflow-wrap: anywhere; }
.staff-actions { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.staff-action { gap: var(--s-3); padding: var(--s-4); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface-2); }
.staff-action .btn { margin-top: auto; }
.staff-action--warning { border-color: var(--c-warning-border); background: var(--c-warning-bg); }
.staff-action--danger { border-color: var(--c-danger-border); background: var(--c-danger-bg); }
.staff-action__title { display: flex; align-items: center; gap: var(--s-2); margin: 0; font-size: var(--fs-base); }
.staff-refund-actions { justify-content: flex-end; flex-wrap: nowrap; }
.staff-pad { padding: var(--s-3) var(--s-4); }
.staff-pad--top0 { padding-top: 0; }
.staff-records { border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface-2); }
.staff-records > summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); min-height: var(--tap); padding: var(--s-2) var(--s-4); cursor: pointer; font-weight: 700; font-size: var(--fs-sm); }
.staff-records[open] > summary { border-bottom: 1px solid var(--c-border); }
.staff-records > .admin-code, .staff-records > p { margin: var(--s-3); }
.staff-records > .admin-table-wrap { background: var(--c-surface); border-radius: 0 0 var(--r-md) var(--r-md); }
.staff-back { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); font-weight: 700; font-size: var(--fs-sm); text-decoration: none; }
.staff-reply { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); max-width: 1100px; }
@media (min-width: 1024px) { .staff-reply { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.admin-stat__value .pill { font-size: var(--fs-sm); }
.input.admin-mono { font-size: 1rem; }
.card > .card__title + p, .card > .card__title + .admin-bullets { margin-top: var(--s-2); }
#stripe-reconcile-form .field { flex: 0 1 260px; }
.staff-jump a { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); font-weight: 700; font-size: var(--fs-sm); text-decoration: none; }
@media (min-width: 1100px) { .staff-jump { display: none; } }
/* === end p3-admin === */
/* === p3-settings additions === */
/* Account / settings / billing pages (ustawienia, plan_manage, manage_subscriptions, sesje, zarzadzaj_saldo,
   api_platnosci, detailed_analysis, subscription_manage_guest). */

/* Settings: sub-nav (chips on phones, sticky column on desktop) + stacked sections */
.settings-layout { display: grid; gap: var(--s-5); }
.settings-jump { position: sticky; top: calc(var(--topbar-h) + var(--s-2)); z-index: 50; }
.settings-jump .select { box-shadow: var(--sh-2); font-weight: 700; }
.settings-nav { display: none; }
.settings-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.settings-nav a { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 40px; padding: 0 var(--s-3); border: 1px solid var(--c-border); border-radius: var(--r-pill); background: var(--c-surface); color: var(--c-text-2); font-size: var(--fs-sm); font-weight: 700; text-decoration: none; }
.settings-nav a:hover { border-color: var(--brand-200); color: var(--c-text); }
.settings-nav a[aria-current] { background: var(--brand-50); border-color: var(--brand-200); color: var(--c-link); }
.settings-nav .icon { color: var(--c-muted); }
.settings-nav a[aria-current] .icon { color: currentColor; }
.settings-nav .settings-nav__danger { color: var(--c-danger); }
.settings-sections { display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }
.settings-section { scroll-margin-top: calc(var(--topbar-h) + var(--s-4)); min-width: 0; }
.settings-section__head { margin-bottom: var(--s-4); }
.settings-section__head h2 { font-size: var(--fs-lg); margin-bottom: var(--s-1); }
.settings-section__head p { margin: 0; color: var(--c-muted); font-size: var(--fs-sm); }
.settings-section .flash-stack { margin-bottom: var(--s-4); }
.settings-section--danger { border-color: var(--c-danger-border); }
.settings-section--danger .settings-section__head h2 { color: var(--c-danger); }
.settings-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-3); padding-top: var(--s-2); }
.settings-actions--start { justify-content: flex-start; margin-top: var(--s-4); }
.settings-subactions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--c-border); }
.settings-actions--between { justify-content: space-between; align-items: center; }
.settings-password { padding-bottom: var(--s-4); margin-bottom: var(--s-2); border-bottom: 1px solid var(--c-border); }
.settings-subtitle { font-size: var(--fs-base); margin: 0; }
.settings-rows { list-style: none; margin: 0; padding: 0; }
.settings-row, .settings-callout { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); padding: var(--s-3) 0; }
.settings-row + .settings-row { border-top: 1px solid var(--c-border); }
.settings-callout { padding: var(--s-4); border: 1px dashed var(--c-border-strong); border-radius: var(--r-md); background: var(--c-surface-2); }
.settings-row__icon { display: grid; place-items: center; flex: 0 0 40px; height: 40px; border-radius: 12px; background: var(--brand-50); color: var(--brand-500); }
.settings-row__main { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.settings-row__main > span { font-size: var(--fs-sm); color: var(--c-muted); }
.settings-admin { padding: var(--s-4); border-radius: var(--r-md); background: var(--c-warning-bg); border: 1px solid var(--c-warning-border); }
.settings-admin h3 { font-size: var(--fs-base); margin-bottom: var(--s-1); }
.payout-account { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-md); background: var(--c-surface-2); border: 1px solid var(--c-border); }
.stat--boxed { padding: var(--s-4); border-radius: var(--r-md); border: 1px solid var(--c-border); background: var(--c-surface-2); min-width: 0; }
.notif-group { padding-top: var(--s-2); }
.notif-group + .notif-group { border-top: 1px solid var(--c-border); padding-top: var(--s-4); }
.notif-group .fieldset__legend { display: flex; align-items: center; gap: var(--s-2); }
.notif-group__subs { display: grid; gap: 0 var(--s-4); padding-left: var(--s-4); }
@media (min-width: 640px) { .notif-group__subs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.avatar--xl { width: 88px; height: 88px; font-size: 2rem; }
.avatar-edit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.avatar-edit__upload { cursor: pointer; }
.avatar-edit__upload:focus-within { box-shadow: var(--ring); }
.email-code { max-width: 220px; flex: 1 1 160px !important; }
.email-code-row .btn { flex: 0 0 auto; }
.bullets { margin: 0; padding-left: 1.2rem; color: var(--c-text-2); font-size: var(--fs-sm); display: grid; gap: var(--s-1); }
.report-link { font-weight: 700; white-space: nowrap; }
.avatar-editor__canvas-wrap { position: relative; width: min(320px, 100%); aspect-ratio: 1; margin: 0 auto; touch-action: none; }
.avatar-editor__canvas { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--c-surface-3); cursor: grab; box-shadow: 0 0 0 3px var(--c-surface), 0 0 0 5px var(--brand-200); }
.avatar-editor__canvas.is-dragging { cursor: grabbing; }
.avatar-editor__hint { position: absolute; left: 50%; bottom: var(--s-3); transform: translateX(-50%); padding: 4px 10px; border-radius: var(--r-pill); background: var(--c-overlay); color: #fff; font-size: var(--fs-xs); white-space: nowrap; pointer-events: none; }
.avatar-editor__zoom { display: flex; align-items: center; justify-content: center; gap: var(--s-2); margin-top: var(--s-4); }
.avatar-editor__zoom input[type="range"] { flex: 1 1 auto; max-width: 240px; accent-color: var(--brand-500); }
@media (min-width: 960px) {
  .settings-layout { grid-template-columns: 220px minmax(0, 1fr); align-items: start; gap: var(--s-8); }
  .settings-jump { display: none; }
  .settings-nav { display: block; position: sticky; top: calc(var(--topbar-h) + var(--s-4)); }
  .settings-nav ul { flex-direction: column; gap: 2px; }
  .settings-nav a { display: flex; border-color: transparent; background: transparent; border-radius: var(--r-sm); min-height: var(--tap); }
  .settings-nav a:hover { background: var(--c-surface-3); border-color: transparent; }
  .settings-nav a[aria-current] { background: var(--brand-50); border-color: transparent; }
}
/* Plan page */
.plan-grid { display: grid; gap: var(--s-5); align-items: start; }
@media (min-width: 800px) { .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plan-card { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.plan-card--plus { border-color: var(--brand-200); box-shadow: var(--sh-2); }
.plan-card--active { background: linear-gradient(180deg, var(--c-plus-bg), var(--c-surface) 45%); }
.plan-card__name { margin: 0; font-size: var(--fs-xl); }
.plan-card__name .badge-plus { font-size: var(--fs-base); padding: 4px 12px; }
.plan-card__price { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-2); }
.plan-card__price > span:last-child { color: var(--c-muted); font-weight: 600; font-size: var(--fs-sm); }
.plan-card .muted { margin: 0; font-size: var(--fs-sm); }
.plan-card__actions { display: flex; flex-direction: column; gap: var(--s-2); }
.plan-card__period { font-size: var(--fs-sm); }
.plan-features { list-style: none; margin: var(--s-2) 0 0; padding: var(--s-4) 0 0; border-top: 1px solid var(--c-border); display: flex; flex-direction: column; gap: var(--s-2); font-size: var(--fs-sm); }
.plan-features li { display: flex; gap: var(--s-2); align-items: flex-start; }
.plan-features .icon { color: var(--c-success); margin-top: 3px; }
.plan-faq { margin: var(--s-4) 0 0; display: grid; gap: var(--s-1); font-size: var(--fs-sm); }
.plan-faq dt { font-weight: 700; margin-top: var(--s-3); }
.plan-faq dt:first-child { margin-top: 0; }
.plan-faq dd { margin: 0; color: var(--c-muted); }
/* Standard vs Plus table (components/plans_table.html) */
.plans-table-wrap { width: 100%; }
.plans-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.plans-table th, .plans-table td { padding: var(--s-3) var(--s-3); border-bottom: 1px solid var(--c-border); text-align: left; vertical-align: middle; }
.plans-table thead th { font-size: var(--fs-xs); color: var(--c-muted); text-transform: uppercase; letter-spacing: .04em; }
.plans-table tbody th { font-weight: 600; width: 44%; }
.plans-table__plus { background: var(--c-plus-bg); }
.plans-table__yes { color: var(--c-success); display: inline-flex; }
.plans-table__no { color: var(--c-muted); }
@media (max-width: 639px) {
  .plans-table thead { display: none; }
  .plans-table, .plans-table tbody { display: block; }
  .plans-table tr { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--c-border); padding: var(--s-2) 0; }
  .plans-table th, .plans-table td { border-bottom: 0; padding: var(--s-1) var(--s-3); }
  .plans-table tbody th { grid-column: 1 / -1; width: auto; }
  .plans-table td::before { content: attr(data-label); display: block; font-size: var(--fs-xs); color: var(--c-muted); }
}
/* Subscriptions */
.plus-strip { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); }
.plus-strip__text { flex: 1 1 auto; min-width: 0; font-size: var(--fs-sm); color: var(--c-text-2); }
.plus-strip > .icon { color: var(--c-muted); }
.segmented { display: flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--c-surface-3); width: fit-content; max-width: 100%; }
.segmented a { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 40px; padding: 0 var(--s-4); border-radius: var(--r-pill); color: var(--c-text-2); font-weight: 700; font-size: var(--fs-sm); text-decoration: none; white-space: nowrap; }
.segmented a[aria-current] { background: var(--c-surface); color: var(--c-text); box-shadow: var(--sh-1); }
.segmented__count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-pill); background: var(--c-surface-2); color: var(--c-muted); font-size: var(--fs-xs); }
.sub-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-4); }
.sub-card { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.sub-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.sub-card__title { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sub-card__title h2 { margin: 0; font-size: var(--fs-md); overflow-wrap: anywhere; }
.sub-card__facts { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--c-surface-2); }
.sub-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.sub-extra { border-top: 1px solid var(--c-border); padding-top: var(--s-2); }
.sub-extra summary { cursor: pointer; font-weight: 700; font-size: var(--fs-sm); min-height: 32px; display: flex; align-items: center; }
.sub-extra .dl { margin-top: var(--s-2); }
.btn--danger-text { --btn-fg: var(--c-danger); }
.claim-card summary { list-style: none; display: flex; align-items: center; gap: var(--s-3); cursor: pointer; }
.claim-card summary::-webkit-details-marker { display: none; }
.claim-card summary > .icon { margin-left: auto; color: var(--c-muted); transition: transform 160ms var(--ease); }
.claim-card[open] summary > .icon { transform: rotate(180deg); }
.claim-card__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.claim-card__text span { font-size: var(--fs-sm); color: var(--c-muted); }
/* Sessions */
.stat-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.session-list__head { padding: var(--s-5) var(--s-5) 0; flex-wrap: wrap; }
.session { align-items: flex-start; flex-wrap: wrap; padding-block: var(--s-4); }
.session--current { background: var(--c-success-bg); }
.session .list__main { flex: 1 1 180px; }
.session__title { white-space: normal; overflow-wrap: anywhere; }
.session__pills { gap: var(--s-2); margin-top: var(--s-1); }
.session__pills:empty { display: none; }
.session .list__aside { align-self: center; }
/* Wallet */
.wallet-hero { display: flex; flex-direction: column; gap: var(--s-2); }
.wallet-op__icon { display: grid; place-items: center; flex: 0 0 36px; height: 36px; border-radius: 50%; background: var(--c-neutral-bg); color: var(--c-neutral); }
.wallet-op__icon--in { background: var(--c-success-bg); color: var(--c-success); }
.wallet-op__amount { display: inline-flex; align-items: baseline; font-family: var(--font-display); font-weight: 700; white-space: nowrap; }
.wallet-op__amount--in { color: var(--c-success); }
/* Payment API */
.api-card { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.api-card--off { background: var(--c-surface-2); }
.api-card__pills { gap: var(--s-2); justify-content: flex-end; }
.api-steps { margin: var(--s-3) 0 0; padding-left: 1.3rem; display: grid; gap: var(--s-3); font-size: var(--fs-sm); color: var(--c-text-2); }
.api-urls { margin: var(--s-1) 0 0; padding-left: 1.1rem; }
.api-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-4); }
@media (min-width: 720px) { .api-methods { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.copy-field .input { min-width: 0; }
.sub-card__head { flex-wrap: wrap; }
.sub-card__title { flex: 1 1 180px; }
@media (max-width: 479.98px) {
  .sub-card__facts { grid-template-columns: 1fr; gap: 0; }
  .sub-card__facts dd { text-align: left; margin-bottom: var(--s-2); }
  .api-card__pills { justify-content: flex-start; }
}
/* Analytics */
.analysis-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); }
.month-nav { display: flex; align-items: center; gap: var(--s-2); }
.month-nav strong, .month-nav__label { font-family: var(--font-display); font-size: var(--fs-md); }
.month-nav [aria-disabled="true"] { opacity: 0.35; }
.stat-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 960px) { .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); } }
.stat-grid .stat { min-width: 0; }
.stat-grid .stat__value { font-size: var(--fs-lg); overflow-wrap: anywhere; }
.analysis-head { flex-wrap: wrap; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chips a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--s-3); border: 1px solid var(--c-border); border-radius: var(--r-pill); color: var(--c-text-2); font-size: var(--fs-sm); font-weight: 700; text-decoration: none; }
.chips a[aria-current] { background: var(--brand-50); border-color: var(--brand-200); color: var(--c-link); }
.bar-chart__inspector { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); margin: 0 0 var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); background: var(--c-surface-2); font-size: var(--fs-sm); color: var(--c-muted); min-height: 40px; }
.bar-chart__inspector strong { color: var(--c-text); font-family: var(--font-display); white-space: nowrap; }
.bar-chart__bars { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; gap: 2px; height: 200px; touch-action: pan-y; }
.bar-chart__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; }
.bar-chart__bar { flex: 0 0 auto; height: max(var(--h), 2px); width: 100%; min-height: 2px; padding: 0; border: 0; border-radius: 4px 4px 1px 1px; background: var(--brand-200); cursor: pointer; transition: background 120ms var(--ease); }
.bar-chart__bar.is-zero { background: var(--c-surface-3); }
.bar-chart__bar.is-active, .bar-chart__bar:hover, .bar-chart__bar:focus-visible { background: var(--brand-500); }
.bar-chart__label { height: 16px; font-size: 10px; line-height: 16px; color: var(--c-muted); text-align: center; white-space: nowrap; overflow: visible; display: flex; justify-content: center; }
.bar-chart__bars { padding-bottom: 0; }
.bar-chart__col > .bar-chart__bar { max-height: calc(100% - 20px); }
.analysis-filters { display: grid; gap: var(--s-3); margin-bottom: var(--s-5); }
@media (min-width: 640px) { .analysis-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.donut-layout { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 760px) { .donut-layout { grid-template-columns: 240px minmax(0, 1fr); } }
.donut { position: relative; width: min(220px, 70vw); aspect-ratio: 1; margin: 0 auto; border-radius: 50%; }
.donut__center { position: absolute; inset: 22%; border-radius: 50%; background: var(--c-surface); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--s-2); }
.donut__center strong { font-family: var(--font-display); font-size: var(--fs-md); overflow-wrap: anywhere; }
.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.legend li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 2px var(--s-3); align-items: center; padding: var(--s-2) 0; border-bottom: 1px solid var(--c-border); font-size: var(--fs-sm); }
.legend li:last-child { border-bottom: 0; }
.legend__dot { width: 12px; height: 12px; border-radius: 50%; }
.legend__name { font-weight: 700; overflow-wrap: anywhere; }
.legend__value { grid-column: 2; color: var(--c-muted); }
.legend__pct { grid-column: 3; grid-row: 1 / span 2; font-family: var(--font-display); font-weight: 700; }
/* === end p3-settings === */
/* === p3-seller additions === */
/* Seller core pages: payments history + detail, QR & links, account (Stripe) form, presets, scanner. */

/* Tabs (server-side filter links; aria-current marks the active one) */
.tabs { display: flex; gap: var(--s-1); padding: 4px; border-radius: var(--r-pill); background: var(--c-surface-3); overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.tabs::-webkit-scrollbar { display: none; }
.tabs__item { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 var(--s-3); border-radius: var(--r-pill); color: var(--c-text-2); font-weight: 700; font-size: var(--fs-sm); text-decoration: none; white-space: nowrap; }
.tabs__item:hover { color: var(--c-text); }
.tabs__item[aria-current="page"], .tabs__item[aria-selected="true"] { background: var(--c-surface); color: var(--c-link); box-shadow: var(--sh-1); }
@media (max-width: 479.98px) { .tabs--grid-sm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: var(--r-md); } .tabs--grid-sm .tabs__item { border-radius: calc(var(--r-md) - 4px); } }
@media (min-width: 720px) { .tabs { display: inline-flex; align-self: flex-start; } .tabs__item { flex: 0 0 auto; } }

/* Segmented radio control: <div class="seg"><label><input type="radio"><span>…</span></label>…</div> */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; border-radius: var(--r-md); background: var(--c-surface-3); }
.seg label { position: relative; display: flex; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: var(--tap); padding: var(--s-2); border-radius: calc(var(--r-md) - 4px); text-align: center; font-weight: 700; font-size: var(--fs-sm); line-height: 1.25; color: var(--c-text-2); }
.seg small { font-weight: 500; font-size: var(--fs-xs); color: var(--c-muted); }
.seg input:checked + span { background: var(--c-surface); color: var(--c-link); box-shadow: var(--sh-1); }
.seg input:focus-visible + span { box-shadow: var(--ring); }
@media (max-width: 479.98px) { .seg--stack-sm { grid-auto-flow: row; } }

/* Back link above a page */
.back-link { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); margin-bottom: var(--s-2); color: var(--c-text-2); font-weight: 700; font-size: var(--fs-sm); text-decoration: none; }
.back-link:hover { color: var(--c-link); }

/* Amount with direction */
.tx-amount { display: inline-flex; align-items: baseline; gap: 1px; font-family: var(--font-display); font-weight: 700; white-space: nowrap; }
.tx-amount--in { color: var(--c-success); }
.tx-amount--in .amount__currency { color: inherit; opacity: 0.8; }
.tx-amount--muted { color: var(--c-muted); }
.tx-amount--void { color: var(--c-muted); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.dir { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; }
.dir--in { color: var(--c-success); }
.dir--out { color: var(--c-text-2); }

/* Payments history */
.history-search { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: flex-start; }
.history-search__q { flex: 1 1 260px; }
.history-more { flex: 0 0 auto; }
.history-more > summary { list-style: none; }
.history-more > summary::-webkit-details-marker { display: none; }
.history-more[open] { flex-basis: 100%; }
.history-more__panel { margin-top: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--c-border); }
.history-row.is-link { cursor: pointer; }
.history-row__date { white-space: nowrap; }
.history-row__date > span { display: block; }
.history-row__title { font-weight: 700; overflow-wrap: anywhere; }
.history-row__title a { color: var(--c-text); text-decoration: none; }
.history-row__title a:hover { color: var(--c-link); text-decoration: underline; }
.history-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 2px; }
.history-table td.num { white-space: nowrap; }
@media (max-width: 719.98px) {
  .history-table td::before { display: none; }
  .history-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s-3); }
  .history-table td { display: block; padding: 0; text-align: left; }
  .history-table .history-row__main { grid-column: 1; grid-row: 1; }
  .history-table td.num { grid-column: 2; grid-row: 1; text-align: right; }
  .history-table .history-row__date { grid-column: 1; grid-row: 2; display: flex; justify-content: flex-start; gap: 6px; font-size: var(--fs-xs); color: var(--c-muted); }
  .history-table .history-row__date > span { display: inline; }
  .history-table td[data-label]:nth-child(3) { grid-column: 2; grid-row: 2; text-align: right; }
}

/* Payment detail */
.detail-layout { display: grid; gap: var(--s-6); }
@media (min-width: 960px) { .detail-layout { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } }
.detail-hero { text-align: center; }
.detail-hero__amount { margin: var(--s-5) 0 var(--s-2); }
.detail-hero__amount .tx-amount { font-size: clamp(2.25rem, 1.6rem + 3vw, 3rem); line-height: 1.05; }
.detail-hero__title { font-size: var(--fs-xl); overflow-wrap: anywhere; margin-bottom: var(--s-1); }
.detail-party { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.detail-attachment { max-height: 120px; border-radius: var(--r-sm); border: 1px solid var(--c-border); }
.detail-admin { border-color: var(--c-danger-border); }
.dl--rows dd { min-width: 0; }
.dl__total dt, .dl__total dd { color: var(--c-text); font-weight: 800; }
@media print {
  .topbar, .bottomnav, .back-link, .detail-layout aside > section:last-child, .flash-stack, .toast-region, .skip-link { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; break-inside: avoid; }
  .detail-layout { grid-template-columns: 1fr; }
}
/* Generic bits for the seller forms */
.is-disabled { opacity: 0.55; }
.is-disabled input, .is-disabled textarea, .is-disabled select { cursor: not-allowed; }
.field__help.is-ok, .note.is-ok { color: var(--c-success); font-weight: 600; }
.field__help.is-warn, .note.is-warn { color: var(--c-warning); font-weight: 600; }
.field__help.is-error { color: var(--c-danger); font-weight: 600; }
.note { margin: 0; font-size: var(--fs-sm); color: var(--c-text-2); font-weight: 600; }
.note:empty { display: none; }
.input--file { padding: 0.55rem 0.7rem; min-height: var(--tap); font-size: var(--fs-sm); }
.input--file::file-selector-button { margin-right: var(--s-3); padding: 0.4rem 0.8rem; border: 1px solid var(--brand-200); border-radius: var(--r-pill); background: var(--c-surface); color: var(--c-link); font: 700 var(--fs-sm)/1.2 var(--font-body); cursor: pointer; }
.seg--sm span { min-height: 38px; padding: 6px var(--s-2); font-size: var(--fs-xs); }
.amount-mode { display: flex; flex-direction: column; gap: 6px; margin-top: var(--s-2); }
.disclosure { padding: 0; }
.disclosure > summary { list-style: none; cursor: pointer; }
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure__summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s-3); min-height: 64px; padding: var(--s-4) var(--s-5); border-radius: var(--r-lg); }
.disclosure__summary:hover { background: var(--c-surface-2); }
.disclosure__hint { flex: 1 1 200px; }
.disclosure__chev { margin-left: auto; color: var(--c-muted); transition: transform 160ms var(--ease); }
.disclosure[open] > summary .disclosure__chev { transform: rotate(180deg); }
.disclosure__body { padding: 0 var(--s-5) var(--s-5); }
@media (min-width: 640px) { .disclosure__summary { padding-inline: var(--s-6); } .disclosure__body { padding: 0 var(--s-6) var(--s-6); } }
.option-card { padding: var(--s-4); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface-2); }
.option-card__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-2); font-size: var(--fs-base); font-family: var(--font-body); font-weight: 800; }
.option-card__body { margin-top: var(--s-2); padding-top: var(--s-3); border-top: 1px dashed var(--c-border); }
.option-list { display: flex; flex-direction: column; gap: 2px; }
.option-list__sub { margin-left: calc(22px + var(--s-3)); margin-bottom: var(--s-2); }
.option-list .check { min-height: 40px; }
.hint-details > summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 700; color: var(--c-link); min-height: 32px; }
.tag-list code { display: inline-block; margin: 0 2px 4px 0; }
.plus-lock { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: 1px dashed var(--c-border-strong); border-radius: var(--r-md); background: var(--c-plus-bg); }
.plus-lock > div { flex: 1 1 200px; min-width: 0; }
.method-grid { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); }
@media (min-width: 640px) { .method-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }
.method-option { align-items: center; min-height: 52px; padding-block: var(--s-2); }
.method-option__text { display: flex; flex-direction: column; min-width: 0; }
.method-option__name { font-weight: 700; color: var(--c-text); }
.method-option__fee { font-size: var(--fs-xs); color: var(--c-muted); }
.method-option.is-disabled { opacity: 0.5; }

/* QR & links generator */
.qr-step { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; color: var(--c-text); }
.qr-step__n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--grad-brand); color: #fff; font-size: var(--fs-sm); flex: 0 0 28px; }
.card__title.qr-step { margin-bottom: var(--s-4); }
.qr-gen { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); grid-template-areas: "basics" "preview" "details" "more" "save"; }
.qr-gen__basics { grid-area: basics; }
.qr-gen__details { grid-area: details; }
.qr-gen__more { grid-area: more; }
.qr-gen__save { grid-area: save; }
.qr-gen__preview { grid-area: preview; min-width: 0; }
@media (min-width: 960px) {
  .qr-gen { grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: auto auto auto 1fr; grid-template-areas: "basics preview" "details preview" "more preview" "save preview"; align-items: start; }
  .qr-gen__preview { position: sticky; top: calc(var(--topbar-h) + var(--s-4)); }
}
.qr-gen__save-fields { align-items: start; }
.qr-gen__save-spacer { flex: 1 1 auto; }
.qr-gen__save-actions .inline-form { display: contents; }
#qr-save-status { order: 10; flex: 1 1 100%; }
#qr-save-status:empty { display: none; }
#qr-save-status.is-dirty { color: var(--c-warning); font-weight: 700; }
.qr-preview { display: flex; flex-direction: column; gap: var(--s-4); }
.qr-preview__canvas { display: flex; justify-content: center; padding: var(--s-3); border-radius: var(--r-lg); background: #fff; border: 1px solid var(--c-border); }
.qr-preview__canvas canvas { width: 100%; max-width: 280px; height: auto; display: block; }
.qr-preview__canvas--sm canvas { max-width: 220px; }
.qr-preview__summary { margin: 0; text-align: center; font-weight: 700; color: var(--c-text); overflow-wrap: anywhere; }
.qr-preview__summary:empty { display: none; }
.qr-preview__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.qr-preview__actions .btn { padding-inline: var(--s-3); font-size: var(--fs-sm); }
.qr-preview__actions .btn--primary { grid-column: 1 / -1; }
.qr-preview[data-qr-kind="flagship"] .qr-preview__canvas { border-color: var(--brand-200); box-shadow: 0 0 0 3px var(--brand-50); }
.copy-field .btn--icon { flex: 0 0 var(--control-h); width: var(--control-h); min-height: var(--control-h); }
.copy-field .input { min-width: 0; }
a.btn[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }
/* Forms on app pages */
.form-narrow { max-width: var(--container-narrow); }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
@media (max-width: 639.98px) { .form-actions .btn { flex: 1 1 100%; } }
.form-actions--sticky { position: sticky; bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px)); z-index: 30; padding: var(--s-3) var(--s-4); margin-inline: calc(-1 * var(--s-2)); border: 1px solid var(--c-border); border-radius: var(--r-lg); background: color-mix(in srgb, var(--c-surface) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--sh-2); }
@media (min-width: 960px) { .form-actions--sticky { bottom: var(--s-4); } }

/* My QR codes (skroty.html) */
.inline-form { display: inline-flex; margin: 0; }
.section-title { margin: 0 0 var(--s-4); font-size: var(--fs-lg); }
.qrcode-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.qrcode-card { display: flex; flex-wrap: wrap; gap: var(--s-4); min-width: 0; align-items: flex-start; }
.qrcode-card > .qrcode-card__actions { flex: 1 1 100%; padding-top: var(--s-3); border-top: 1px solid var(--c-border); }
.qrcode-card__thumb { flex: 0 0 104px; width: 104px; padding: 6px; border-radius: var(--r-md); background: #fff; border: 1px solid var(--c-border); }
.qrcode-card__thumb canvas { display: block; width: 100%; height: auto; }
.qrcode-card__body { display: flex; flex-direction: column; gap: var(--s-2); flex: 1; min-width: 0; }
.qrcode-card__eyebrow { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.qrcode-card__name { margin: 0; font-size: var(--fs-md); overflow-wrap: anywhere; }
.qrcode-card__name a { color: inherit; text-decoration: none; }
.qrcode-card__name a:hover { text-decoration: underline; }
.qrcode-card__amount { min-height: 28px; }
.qrcode-card__meta { gap: var(--s-2); }
.qrcode-card__meta .icon { vertical-align: -2px; }
.qrcode-card__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin-top: auto; }
.qrcode-card--pinned .qrcode-card__thumb { flex-basis: 136px; width: 136px; }
.qrcode-card--expired .qrcode-card__thumb { opacity: .45; }
.qrcode-row { flex-wrap: wrap; }
.qrcode-row .qrcode-card__actions { margin-top: 0; }
@media (max-width: 479.98px) {
  .qrcode-card { flex-direction: column; align-items: stretch; }
  .qrcode-card > .qrcode-card__body, .qrcode-card > .qrcode-card__actions { width: 100%; flex: 0 0 auto; }
  .qrcode-card__thumb, .qrcode-card--pinned .qrcode-card__thumb { width: 100%; max-width: 220px; flex-basis: auto; align-self: center; }
}
.qr-show .qr-preview__canvas canvas { max-width: 300px; }
/* QR scanner */
.scanner { position: relative; width: 100%; aspect-ratio: 3 / 4; max-height: min(70vh, 640px); margin-inline: auto; border-radius: var(--r-xl); overflow: hidden; background: #0b1220; box-shadow: var(--sh-2); }
@media (min-width: 640px) { .scanner { aspect-ratio: 4 / 3; } }
.scanner__reader, .scanner__reader video { position: absolute; inset: 0; width: 100%; height: 100%; }
.scanner__reader video { object-fit: cover; }
.scanner__box { position: absolute; top: 50%; left: 50%; width: min(64%, 62vh, 340px); aspect-ratio: 1; transform: translate(-50%, -50%); border: 3px solid #fff; border-radius: 20px; box-shadow: 0 0 0 9999px rgba(2, 6, 23, 0.5); pointer-events: none; }
.scanner__status { position: absolute; left: 0; right: 0; bottom: var(--s-4); width: fit-content; max-width: calc(100% - 2rem); margin-inline: auto !important; margin: 0; padding: 6px 14px; border-radius: var(--r-pill); background: rgba(2, 6, 23, 0.72); color: #fff; font-size: var(--fs-sm); font-weight: 700; text-align: center; }
.scanner__status.is-error { background: #b91c1c; }
.scanner__status.is-success { background: #15803d; }
.scanner__torch { position: absolute; top: var(--s-3); right: var(--s-3); display: grid; place-items: center; width: var(--tap); height: var(--tap); border: 0; border-radius: 50%; background: rgba(2, 6, 23, 0.6); color: #fff; cursor: pointer; }
.scanner__torch.is-on { background: #facc15; color: #0b1220; }
.scanner__fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-3); padding: var(--s-6); text-align: center; background: var(--c-surface); color: var(--c-text); }
.scanner__fallback .focus-card__icon { margin: 0; }
/* Receiving account form */
.account-layout { display: grid; gap: var(--s-6); }
@media (min-width: 960px) { .account-layout:has(> aside) { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } .account-layout > aside { position: sticky; top: calc(var(--topbar-h) + var(--s-4)); } }
.account-layout > .stack { min-width: 0; max-width: var(--container-narrow); }
.account-stepper .stepper { margin-bottom: 0; }
.stack > .card__title { margin-bottom: 0; }
.account-form .form-actions--sticky { max-width: calc(var(--container-narrow) + var(--s-4)); }
.qr-step--sm { font-size: var(--fs-md); }
.disclosure--inline { border: 1px solid var(--c-border); border-radius: var(--r-md); }
.disclosure--inline .disclosure__summary { min-height: 52px; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); }
.disclosure--inline .disclosure__body { padding: 0 var(--s-4) var(--s-4); }
.logo-current { display: flex; align-items: center; gap: var(--s-3); }
.logo-current img { width: 56px; height: 56px; object-fit: cover; border-radius: 14px; border: 1px solid var(--c-border); background: var(--c-surface-3); }
.summary-box { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); }
.account-next .tick { background: var(--brand-500); border-color: var(--brand-500); color: #fff; }
.danger-zone { border-color: var(--c-danger-border); }
.danger-text { color: var(--c-danger); }
/* === end p3-seller === */
/* === p4-fix-b additions === */
/* B1. Support ticket confirmation (support_sent.html) */
.text-left { text-align: left; }
.ticket-ref { font-family: var(--font-mono); font-size: var(--fs-md); letter-spacing: 0.02em; }
[data-support-sent] .dl--rows dd { display: inline-flex; align-items: center; gap: var(--s-1); }
.ticket-steps { margin: var(--s-3) 0 var(--s-4); padding-left: 1.3rem; display: grid; gap: var(--s-2); font-size: var(--fs-sm); color: var(--c-text-2); }
.ticket-steps li::marker { font-weight: 800; color: var(--brand-500); }
/* B2. Notification toasts (static/js/notifications.js): at most 2 + a "+N more" chip, short text. */
#notifications-container .notification-content { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
#notifications-container.is-suppressed { visibility: hidden; }
#notifications-container .notification-more { pointer-events: auto; display: inline-flex; align-items: center; gap: var(--s-1); min-height: 36px; padding: 0 var(--s-3); border: 1px solid var(--c-border); border-radius: var(--r-pill); background: var(--c-surface); color: var(--c-link); font: 700 var(--fs-sm)/1 var(--font-body); text-decoration: none; box-shadow: var(--sh-2); cursor: pointer; }
html[data-qr-layout="v2"] #notifications-container .notification-more { animation: toast-in 200ms var(--ease), qr-autohide 400ms ease 8s forwards; }
@media (max-width: 639.98px) {
  html[data-qr-layout="v2"] #notifications-container .notification { padding: 12px 14px !important; margin-bottom: 8px !important; }
  html[data-qr-layout="v2"] #notifications-container .notification-time { display: none; }
  #notifications-container .notification-content { -webkit-line-clamp: 2; }
}
/* === end p4-fix-b === */

/* === p10-limits: usage meters (components/tx_usage.html, components/qr_limit.html) === */
.usage { display: grid; gap: var(--s-2); }
.usage__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.usage__bar { height: 8px; border-radius: 999px; background: var(--c-neutral-bg); overflow: hidden; }
.usage__fill { height: 100%; border-radius: 999px; background: var(--brand-500); }
.usage--warning .usage__fill { background: var(--c-warning); }
.usage--full .usage__fill { background: var(--c-danger); }
.usage--warning .usage__note { color: var(--c-warning); }
.usage--full .usage__note { color: var(--c-danger); }
.qr-limit { border: 1px solid var(--c-warning-border); background: var(--c-warning-bg); border-radius: var(--r-md, 12px); padding: var(--s-4); }
/* === end p10-limits === */