/* RUBREK Pay design system: Apple's current design language (HIG, Liquid Glass era) for the web.
   One sheet for every surface: back-office, merchant and agent cabinets, the payment page, the demo shop.
   System palette and type scale follow Apple's iOS/macOS values; the app tint is the RUBREK orange.
   Glass (translucent material) is for the navigation layer only, never for content.
   Notes and sources: .scratch/rubrek-pay-v2/research/apple-hig.md */

/* ───────── tokens ───────── */
:root {
  color-scheme: light dark;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", system-ui, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro", system-ui, "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI Variable Display", "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* brand: --accent decorates (bars, icons, focus); fills and text use shades that pass WCAG AA */
  --accent: #F94603;
  --tint: #CC3902;            /* filled buttons: white text 5.06:1 */
  --tint-text: #C43A00;       /* links and tinted labels on white and #F2F2F7 */
  --tint-soft: rgba(249, 70, 3, .12);
  --on-tint: #fff;

  /* Apple system colors, light */
  --green: #34C759; --green-text: #248A3D;
  --red: #FF3B30;   --red-text: #D70015;
  --orange: #FF9500; --orange-text: #C93400;
  --yellow: #FFCC00;
  --blue: #007AFF;  --blue-text: #0040DD;
  --indigo: #5856D6; --purple: #AF52DE; --teal: #30B0C7; --mint: #00C7BE;
  --gray: #8E8E93; --gray2: #AEAEB2; --gray3: #C7C7CC; --gray4: #D1D1D6; --gray5: #E5E5EA; --gray6: #F2F2F7;

  --label: #000;
  --label-2: #6E6E73;         /* apple.com secondary text; iOS 60% grey fails 4.5:1 on white */
  --label-3: rgba(60, 60, 67, .3);
  --label-4: rgba(60, 60, 67, .18);
  --separator: rgba(60, 60, 67, .18);
  --separator-opaque: #C6C6C8;
  --fill: rgba(120, 120, 128, .2);
  --fill-2: rgba(120, 120, 128, .16);
  --fill-3: rgba(118, 118, 128, .12);
  --fill-4: rgba(116, 116, 128, .08);

  --bg: #F2F2F7;              /* systemGroupedBackground */
  --surface: #fff;            /* secondarySystemGroupedBackground: cards, lists */
  --surface-2: #F2F2F7;       /* tertiary: nested blocks inside cards */
  --elevated: #fff;           /* sheets, popovers */

  /* materials (glass): navigation layer, sheets, toasts */
  --glass: rgba(255, 255, 255, .62);
  --glass-thick: rgba(250, 250, 252, .84);
  --glass-edge: rgba(255, 255, 255, .75);
  --glass-shadow: 0 10px 34px rgba(0, 0, 0, .09), 0 1px 3px rgba(0, 0, 0, .05), inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 0 0 .5px rgba(0, 0, 0, .05);
  --glass-blur: blur(24px) saturate(180%);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .04), 0 0 0 .5px rgba(0, 0, 0, .03);
  --shadow-pop: 0 24px 70px rgba(0, 0, 0, .18), 0 2px 8px rgba(0, 0, 0, .06);
  --wash: radial-gradient(1200px 700px at -10% -20%, rgba(249, 70, 3, .10), transparent 60%),
          radial-gradient(900px 600px at 110% 0%, rgba(255, 149, 0, .07), transparent 55%);

  /* shape and rhythm: 4-pt grid, concentric radii (outer = inner + padding) */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 26px; --r-sheet: 30px; --r-pill: 999px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;
  --control: 36px; --control-lg: 50px;
  --ease: cubic-bezier(.32, .72, 0, 1);        /* Apple-like spring, no overshoot */
  --ease-bounce: cubic-bezier(.34, 1.36, .64, 1);
  --dur: .32s;
  --sidebar-w: 248px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tint: #CC3902;
    --tint-text: #FF7A3D;
    --tint-soft: rgba(255, 106, 43, .18);
    --green: #30D158; --green-text: #30D158;
    --red: #FF453A;   --red-text: #FF6961;
    --orange: #FF9F0A; --orange-text: #FFB340;
    --yellow: #FFD60A;
    --blue: #0A84FF;  --blue-text: #409CFF;
    --indigo: #5E5CE6; --purple: #BF5AF2; --teal: #40C8E0; --mint: #63E6E2;
    --gray: #8E8E93; --gray2: #636366; --gray3: #48484A; --gray4: #3A3A3C; --gray5: #2C2C2E; --gray6: #1C1C1E;
    --label: #fff;
    --label-2: rgba(235, 235, 245, .6);
    --label-3: rgba(235, 235, 245, .3);
    --label-4: rgba(235, 235, 245, .16);
    --separator: rgba(84, 84, 88, .6);
    --separator-opaque: #38383A;
    --fill: rgba(120, 120, 128, .36);
    --fill-2: rgba(120, 120, 128, .32);
    --fill-3: rgba(118, 118, 128, .24);
    --fill-4: rgba(118, 118, 128, .18);
    --bg: #000;
    --surface: #1C1C1E;
    --surface-2: #2C2C2E;
    --elevated: #2C2C2E;
    --glass: rgba(40, 40, 44, .58);
    --glass-thick: rgba(36, 36, 40, .86);
    --glass-edge: rgba(255, 255, 255, .14);
    --glass-shadow: 0 10px 34px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 .5px rgba(255, 255, 255, .08);
    --shadow-card: 0 0 0 .5px rgba(255, 255, 255, .06);
    --shadow-pop: 0 24px 70px rgba(0, 0, 0, .6), 0 0 0 .5px rgba(255, 255, 255, .1);
    --wash: radial-gradient(1200px 700px at -10% -20%, rgba(249, 70, 3, .16), transparent 60%),
            radial-gradient(900px 600px at 110% 0%, rgba(255, 149, 0, .08), transparent 55%);
  }
}

/* Reduce Transparency: glass becomes solid. Increase Contrast: stronger edges and separators. */
@media (prefers-reduced-transparency: reduce) {
  :root { --glass: var(--surface); --glass-thick: var(--surface); --glass-blur: none; }
}
@media (prefers-contrast: more) {
  :root { --separator: var(--separator-opaque); --label-2: var(--label); --tint-text: var(--tint); }
  .card, .panel, .totals > div, .sidebar, .glass { outline: 1px solid var(--separator-opaque); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; }
}

/* ───────── base ───────── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; font: 400 15px/1.4 var(--font); letter-spacing: -.012em; color: var(--label);
  background: var(--wash), var(--bg); background-attachment: fixed;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis: none;
}
::selection { background: var(--tint-soft); }
a { color: var(--tint-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
h1, h2, h3 { font-family: var(--font-display); margin: 0; }
h1 { font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -.022em; }
h2 { font-size: 17px; line-height: 1.3; font-weight: 600; letter-spacing: -.02em; }
h3 { font-size: 15px; line-height: 1.3; font-weight: 600; }
p { margin: 0; }
code, pre, kbd { font-family: var(--font-mono); font-size: .9em; letter-spacing: 0; }
:focus { outline: none; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; border-radius: 8px; }
.muted { color: var(--label-2); }
.small { font-size: 13px; }
.note { color: var(--label-2); font-size: 13px; line-height: 1.4; margin: var(--s2) 0 0; }
.num, td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.mb { margin-bottom: var(--s4); }
.err { color: var(--red-text); margin: 0; min-height: 1em; font-size: 13px; }

/* ───────── app shell: sidebar on desktop, floating tab bar on phones ───────── */
body.app { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
body.app:has(.sidebar[hidden]), body.app:has(#nav:empty) { grid-template-columns: minmax(0, 1fr); }
body.app:has(#nav:empty) .sidebar { display: none; }
.sidebar {
  position: sticky; top: 0; height: 100vh; display: flex; z-index: 5;
}
.sidebar-in {
  flex: 1; display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3) 6px; min-height: 0;
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-right: .5px solid var(--separator);
}
.brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 12px; font: 600 15px/1.2 var(--font-display); letter-spacing: -.02em; }
.brand small { display: block; font: 400 12px/1.3 var(--font); color: var(--label-2); letter-spacing: 0; }
.mark {
  flex: none; width: 30px; height: 30px; border-radius: 22.5%; display: grid; place-items: center;
  color: #fff; font: 700 17px/1 var(--font-rounded); letter-spacing: 0;
  background: linear-gradient(160deg, #FF7A3D 0%, #F94603 55%, #D93F00 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(0, 0, 0, .12), 0 2px 6px rgba(249, 70, 3, .3);
}
.mark.lg { width: 64px; height: 64px; font-size: 36px; border-radius: 22.5%; }
.tabs { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; min-height: 0; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a, .tabs button {
  display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 6px 10px; border-radius: var(--r-sm);
  color: var(--label); font: 500 14px/1.2 var(--font); letter-spacing: -.01em; text-decoration: none; border: 0; background: none; cursor: pointer; text-align: left;
  transition: background-color .15s;
}
.tabs a:hover, .tabs button:hover { background: var(--fill-4); text-decoration: none; }
.tabs a.on, .tabs button.on { background: var(--fill); font-weight: 600; }
.tabs a::before, .tabs button::before {
  content: ""; flex: none; width: 19px; height: 19px; background: var(--accent);
  -webkit-mask: var(--i, var(--i-dot)) center / contain no-repeat; mask: var(--i, var(--i-dot)) center / contain no-repeat;
}
.tabs a .cnt { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--red); color: #fff; font: 600 12px/20px var(--font-rounded); text-align: center; }
.me { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) 6px 2px; border-top: .5px solid var(--separator); }
.me .who, .me #who { flex: 1; min-width: 0; margin: 0; font-size: 13px; color: var(--label-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.content { min-width: 0; display: flex; flex-direction: column; }
main { width: 100%; max-width: 1240px; margin: 0 auto; padding: var(--s6) var(--s8) 64px; }

/* the same shell on phones: brand up top, sections in a floating glass tab bar */
@media (max-width: 820px) {
  body.app { display: block; padding-bottom: 96px; }
  .sidebar { position: static; height: auto; padding: 0; display: block; }
  .sidebar-in { display: contents; }
  .brand { position: sticky; top: 0; z-index: 6; padding: 12px 16px; margin: 0; background: var(--glass-thick);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-bottom: .5px solid var(--separator); }
  .me { position: fixed; top: 8px; right: 12px; z-index: 7; border: 0; padding: 0; }
  .me .who, .me #who { display: none; }
  .tabs {
    position: fixed; z-index: 8; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); flex-direction: row; gap: 0;
    padding: 6px; border-radius: var(--r-pill); overflow-x: auto; background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow); border: .5px solid var(--glass-edge);
  }
  .tabs a, .tabs button { flex: 1 0 auto; flex-direction: column; gap: 3px; min-width: 64px; padding: 7px 10px 6px; border-radius: var(--r-pill);
    font: 500 10.5px/1.1 var(--font); letter-spacing: 0; justify-content: center; text-align: center; color: var(--label-2); }
  .tabs a.on, .tabs button.on { background: var(--fill-3); color: var(--tint-text); }
  .tabs a::before, .tabs button::before { width: 22px; height: 22px; }
  .tabs a .cnt { position: absolute; margin: -4px 0 0 18px; min-width: 16px; height: 16px; font-size: 10px; line-height: 16px; padding: 0 4px; }
  .tabs a { position: relative; }
  main { padding: var(--s4) var(--s4) 32px; }
  h1 { font-size: 28px; }
  main > .bar:first-child, main > section > .bar:first-child { position: static; margin: var(--s2) 0 var(--s4); padding: 0; }
  body.scrolled main > .bar:first-child, body.scrolled main > section > .bar:first-child { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  body.scrolled main > .bar:first-child h1, body.scrolled main > section > .bar:first-child h1 { font-size: 28px; }
}

/* ───────── page header, toolbars ───────── */
.bar { display: flex; align-items: center; gap: var(--s3); margin: var(--s2) 0 var(--s5); flex-wrap: wrap; }
/* the page header (first bar of a screen) sticks and turns into a solid toolbar once content scrolls under it */
main > .bar:first-child, main > section > .bar:first-child { margin: 0 calc(-1 * var(--s8)) var(--s5); padding: var(--s3) var(--s8);
  position: sticky; top: 0; z-index: 4; transition: background-color .2s, box-shadow .2s; }
body.scrolled main > .bar:first-child, body.scrolled main > section > .bar:first-child { background: var(--glass-thick); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: 0 .5px 0 var(--separator); }
body.scrolled main > .bar:first-child h1, body.scrolled main > section > .bar:first-child h1 { font-size: 20px; }
/* section headers further down a screen are titles, not the page title (a card opens with its back link) */
main > .bar:not(:first-child):not(.back + .bar) h1, main > section > .bar:not(:first-child) h1 { font-size: 20px; letter-spacing: -.02em; }
.bar h1 { margin-right: auto; }
.back { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 var(--s1); color: var(--tint-text); font-size: 15px; }
.back::before { content: ""; width: 10px; height: 16px; background: currentColor; -webkit-mask: var(--i-chev-left) center / contain no-repeat; mask: var(--i-chev-left) center / contain no-repeat; }
.acts-bar { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s3); align-items: center; }
.h2 { font: 600 20px/1.25 var(--font-display); letter-spacing: -.02em; margin: var(--s6) 0 var(--s3); }
.h2:first-child { margin-top: 0; }
h3.sub, .sect h3 { font: 600 13px/1.3 var(--font); color: var(--label-2); margin: var(--s5) 0 var(--s2); text-transform: none; letter-spacing: 0; }

/* ───────── buttons (capsules) ───────── */
button { font: inherit; color: inherit; cursor: pointer; }
.primary, .ghost, .mini, a.btn, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--control); padding: 0 16px;
  border-radius: var(--r-pill); border: 0; font: 600 14px/1 var(--font); letter-spacing: -.01em; white-space: nowrap; text-decoration: none;
  transition: transform .2s var(--ease), background-color .15s, filter .15s, box-shadow .2s;
}
.primary { background: var(--tint); color: var(--on-tint); box-shadow: 0 1px 2px rgba(217, 63, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .22); }
.primary:hover { filter: brightness(1.06); text-decoration: none; }
.ghost, a.btn, .btn { background: var(--fill-3); color: var(--label); }
.ghost:hover, a.btn:hover, .btn:hover { background: var(--fill-2); text-decoration: none; }
.mini { min-height: 28px; padding: 0 11px; font-size: 13px; font-weight: 500; background: var(--fill-3); color: var(--label); }
.mini:hover { background: var(--fill-2); }
.primary:active, .ghost:active, .mini:active, .btn:active { transform: scale(.96); }
body.app .ghost, body.app a.btn, body.app .btn { border-radius: var(--r-sm); }
body.app .mini { border-radius: 8px; }
button:disabled, .primary:disabled { opacity: .45; cursor: default; transform: none; filter: none; }
.danger { color: var(--red-text) !important; }
.lg { min-height: var(--control-lg); font-size: 17px; padding: 0 24px; }
.block { width: 100%; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--tint-text); font: inherit; cursor: pointer; }
.linkbtn:hover { text-decoration: underline; text-underline-offset: 2px; }
td .linkbtn { color: var(--label); font-weight: 600; text-align: left; }
td .acts { display: flex; gap: 6px; flex-wrap: wrap; }

/* ───────── form controls ───────── */
label { display: grid; gap: 6px; font: 500 13px/1.3 var(--font); color: var(--label-2); }
label.inline { display: flex; align-items: center; gap: var(--s2); }
input, select, textarea {
  font: 400 15px/1.3 var(--font); color: var(--label); min-height: var(--control); padding: 8px 12px; min-width: 0;
  border: 1px solid transparent; border-radius: var(--r-sm); background: var(--fill-4); transition: background-color .15s, box-shadow .15s, border-color .15s;
}
textarea { min-height: 88px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--label-3); }
input:hover, select:hover, textarea:hover { background: var(--fill-3); }
input:focus, select:focus, textarea:focus { background: var(--surface); border-color: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: 0 0 0 4px var(--tint-soft); outline: none; }
select {
  -webkit-appearance: none; appearance: none; padding-right: 32px; cursor: pointer;
  background-image: var(--i-updown); background-repeat: no-repeat; background-position: right 10px center; background-size: 10px 16px;
}
input[type="date"], input[type="datetime-local"] { font-variant-numeric: tabular-nums; }
/* switch (iOS toggle) for checkboxes inside .check */
.check { display: flex; align-items: center; gap: var(--s3); color: var(--label); font: 400 15px/1.3 var(--font); cursor: pointer; }
.check input[type="checkbox"], input.switch {
  -webkit-appearance: none; appearance: none; flex: none; width: 46px; height: 28px; min-height: 0; padding: 0; border: 0; border-radius: var(--r-pill);
  background: var(--fill); position: relative; cursor: pointer; transition: background-color .25s var(--ease);
}
.check input[type="checkbox"]::after, input.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18), 0 0 0 .5px rgba(0, 0, 0, .04); transition: transform .3s var(--ease-bounce);
}
.check input[type="checkbox"]:checked, input.switch:checked { background: var(--green); }
.check input[type="checkbox"]:checked::after, input.switch:checked::after { transform: translateX(18px); }
.check input[type="checkbox"]:focus-visible { box-shadow: 0 0 0 4px var(--tint-soft); }
.hint { font: 400 12px/1.35 var(--font); color: var(--label-2); }

/* ───────── cards, panels, grouped lists ───────── */
.card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-card); overflow-x: auto; }
.card + *:not(.note) { margin-top: var(--s6); }
.card.narrow { max-width: 380px; margin: 8vh auto; padding: var(--s8) var(--s6) var(--s6); display: grid; gap: var(--s4); text-align: left; }
.card.narrow h1 { font-size: 26px; text-align: center; }
.card.narrow .primary { min-height: var(--control-lg); font-size: 16px; margin-top: var(--s1); }
.card.narrow::before {
  content: "R"; justify-self: center; width: 64px; height: 64px; border-radius: 22.5%; display: grid; place-items: center; margin-bottom: var(--s1);
  color: #fff; font: 700 36px/1 var(--font-rounded); background: linear-gradient(160deg, #FF7A3D 0%, #F94603 55%, #D93F00 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 24px rgba(249, 70, 3, .3);
}
.panel { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-card); padding: var(--s5); min-width: 0; }
.panel > h2 { margin: 0 0 var(--s4); display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.panel h2 .muted { font: 400 13px/1.3 var(--font); }
.grid2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s4); margin-bottom: var(--s4); }
.grid2 > div:not(.panel) { display: grid; gap: var(--s4); align-content: start; }
.grid2 > div:not(.panel) > .panel + .panel { margin-top: 0; }
@media (max-width: 1000px) { .grid2 { grid-template-columns: minmax(0, 1fr); } }
.empty { padding: var(--s8) var(--s5); color: var(--label-2); text-align: center; }
.glass { background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow); border: .5px solid var(--glass-edge); }

/* key-value rows (inset grouped list) */
.kv { display: grid; grid-template-columns: minmax(150px, max-content) minmax(0, 1fr); margin: 0; font-size: 15px; }
.kv dt, .kv dd { padding: 11px 0; border-bottom: .5px solid var(--separator); }
.kv dt { color: var(--label-2); padding-right: var(--s5); }
.kv dd { margin: 0; word-break: break-word; }
.kv dt:nth-last-of-type(1), .kv dd:last-of-type { border-bottom: 0; }
.sect .kv { grid-template-columns: minmax(200px, 40%) minmax(0, 1fr); }
.sect .kv dd { white-space: pre-line; }
.panel .kv code { word-break: break-all; }

/* ───────── tables ───────── */
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 11px 14px; vertical-align: middle; white-space: nowrap; }
th { font: 500 12px/1.3 var(--font); color: var(--label-2); letter-spacing: 0; border-bottom: .5px solid var(--separator); position: sticky; top: 0; background: var(--surface); z-index: 1; }
td { border-bottom: .5px solid var(--separator); }
tr:last-child td { border-bottom: 0; }
tbody tr, table tr:not(:first-child) { transition: background-color .12s; }
table tr:not(:first-child):hover td { background: var(--fill-4); }
td a { color: var(--label); font-weight: 600; text-decoration: none; }
td a:hover { color: var(--tint-text); }
.matrix td, .matrix th { text-align: center; }
.matrix td:first-child, .matrix th:first-child { text-align: left; }
.matrix td, td.wrap { white-space: normal; }
td.wrap { min-width: 280px; }
details.tbl summary { cursor: pointer; color: var(--tint-text); font-size: 13px; margin-top: var(--s2); }
details.tbl table { margin-top: var(--s2); }

/* ───────── status pills, badges ───────── */
.pill { display: inline-flex; align-items: center; gap: 5px; min-height: 22px; padding: 0 9px; border-radius: var(--r-pill);
  font: 600 12px/1 var(--font); letter-spacing: 0; background: var(--fill-3); color: var(--label-2); white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }
.pill.ok { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green-text); }
.pill.bad { background: color-mix(in srgb, var(--red) 13%, transparent); color: var(--red-text); }
.pill.warn { background: color-mix(in srgb, var(--orange) 16%, transparent); color: var(--orange-text); }
.pill.info { background: color-mix(in srgb, var(--blue) 13%, transparent); color: var(--blue-text); }

/* ───────── metric tiles ───────── */
.totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s3); margin-bottom: var(--s4); }
.totals > div { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-card); padding: var(--s4) var(--s4) 14px; display: grid; gap: 2px; align-content: start; min-width: 0; }
.totals > div > span:first-child { font: 500 13px/1.3 var(--font); color: var(--label-2); }
.totals b { display: block; font: 600 24px/1.2 var(--font-rounded); letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; }
.totals > div > span:last-child:not(:first-child) { font-size: 12px; color: var(--label-2); }
.totals .our b { color: var(--green-text); }
.totals .due b { color: var(--tint-text); }

/* ───────── segmented controls (period chips, sub-tabs) ───────── */
.chips, .subtabs { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--r-pill); background: var(--fill-3); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar, .subtabs::-webkit-scrollbar { display: none; }
.chips button, .subtabs a {
  flex: none; border: 0; background: none; min-height: 30px; padding: 0 14px; border-radius: var(--r-pill); display: inline-flex; align-items: center;
  font: 500 13px/1 var(--font); color: var(--label); text-decoration: none; white-space: nowrap; transition: background-color .2s var(--ease), box-shadow .2s;
}
.chips button:hover, .subtabs a:hover { text-decoration: none; background: var(--fill-4); }
.chips button.on, .subtabs a.on { background: var(--surface); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .04); }
@media (prefers-color-scheme: dark) { .chips button.on, .subtabs a.on { background: #636366; } }
.subtabs { display: flex; width: max-content; margin: var(--s1) 0 var(--s5); }
.filters { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.filters input, .filters select { min-height: 32px; padding-top: 5px; padding-bottom: 5px; font-size: 14px; }

/* ───────── alerts, notes, callouts ───────── */
.alerts { display: grid; gap: 0; }
.alert { display: flex; gap: var(--s3); align-items: flex-start; padding: 12px 2px; border-bottom: .5px solid var(--separator); color: inherit; text-decoration: none; }
.alert:last-child { border-bottom: 0; }
a.alert:hover { text-decoration: none; background: var(--fill-4); border-radius: var(--r-sm); }
.alert .ico { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 13px/1 var(--font-rounded); color: #fff; background: var(--gray); }
.alert.bad .ico { background: var(--red); } .alert.warn .ico { background: var(--orange); } .alert.info .ico { background: var(--accent); }
.alert b { display: block; font-weight: 600; }
.alert span { color: var(--label-2); font-size: 13px; }
.warnbox { background: color-mix(in srgb, var(--orange) 12%, var(--surface)); color: var(--label); border-radius: var(--r-md); padding: 12px 14px; font-size: 14px; margin-bottom: var(--s3); }
.funnel { display: grid; }
.funnel div { display: flex; justify-content: space-between; gap: var(--s3); padding: 10px 0; border-bottom: .5px solid var(--separator); }
.funnel div:last-child { border-bottom: 0; }

/* ───────── code, secrets, references ───────── */
pre.code { background: #1C1C1E; color: #F2F2F7; border-radius: var(--r-md); padding: 14px 16px; font: 12.5px/1.55 var(--font-mono); overflow-x: auto; margin: 0; white-space: pre; }
@media (prefers-color-scheme: dark) { pre.code { background: #000; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .1); } }
.secret { display: flex; gap: var(--s2); align-items: center; }
.secret code, .ref code { flex: 1; background: var(--fill-4); border-radius: var(--r-sm); padding: 9px 12px; word-break: break-all; font-size: 12.5px; }
.ref { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }

/* ───────── sheets (dialogs), toasts, tooltips ───────── */
dialog {
  border: 0; padding: 0; width: min(540px, 94vw); max-height: 88vh; border-radius: var(--r-sheet); color: var(--label);
  background: var(--glass-thick); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-pop);
}
dialog[open] { animation: sheet-in .42s var(--ease); }
dialog::backdrop { background: rgba(0, 0, 0, .32); animation: fade-in .3s ease; } /* HIG: a dimming layer behind sheets, no blur */
@keyframes sheet-in { from { opacity: 0; transform: translateY(24px) scale(.97); } }
@keyframes fade-in { from { opacity: 0; } }
.dlg { padding: var(--s6); display: grid; gap: var(--s4); }
.dlg h2 { font: 700 22px/1.2 var(--font-display); letter-spacing: -.02em; }
.dlg .row { display: flex; gap: var(--s2); justify-content: flex-end; margin-top: var(--s2); }
.dlg .row button { min-width: 110px; }
.dlg .hint { font-size: 12px; color: var(--label-2); }
.dlg .check { color: var(--label); }
.dlg input, .dlg select, .dlg textarea { background: var(--fill-3); }
.dlg input:focus, .dlg select:focus, .dlg textarea:focus { background: var(--surface); }
@media (max-width: 600px) {
  dialog { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--r-sheet) var(--r-sheet) 0 0; max-height: 92vh; padding-bottom: env(safe-area-inset-bottom); }
  @keyframes sheet-in { from { transform: translateY(100%); } }
  .dlg .row { flex-direction: column-reverse; } .dlg .row button { width: 100%; min-height: 46px; }
}
#toast {
  position: fixed; top: 16px; left: 50%; transform: translate(-50%, -24px); z-index: 50; padding: 12px 20px; border-radius: var(--r-pill);
  background: var(--glass-thick); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-pop);
  color: var(--label); font: 600 14px/1.2 var(--font); opacity: 0; pointer-events: none; transition: opacity .25s, transform .45s var(--ease-bounce);
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
.tip { position: fixed; z-index: 40; padding: 8px 11px; border-radius: var(--r-sm); font: 500 12px/1.4 var(--font); pointer-events: none; color: var(--label);
  background: var(--glass-thick); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-pop); }

/* demo-stand notice: a slim capsule above the page */
.demo {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin: var(--s4) var(--s8) 0; padding: 9px 16px; border-radius: var(--r-pill);
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow); border: .5px solid var(--glass-edge);
  font-size: 13px; color: var(--label-2);
}
.demo::before { content: "Демо"; padding: 3px 8px; border-radius: var(--r-pill); background: var(--accent); color: #fff; font: 700 11px/1 var(--font); letter-spacing: .02em; }
.demo a { color: var(--tint-text); font-weight: 600; }
@media (max-width: 820px) { .demo { margin: var(--s3) var(--s4) 0; border-radius: var(--r-lg); } }

/* ───────── charts (SVG drawn by the apps) ───────── */
.chart { position: relative; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart text { font: 500 11px var(--font); fill: var(--label-2); }
.chart line { stroke: var(--separator); }
.chart path { fill: var(--accent); transition: opacity .15s; }
.chart:hover path { opacity: .55; }
.chart path:hover, .chart rect:hover + path { opacity: 1; }
.meter { height: 8px; border-radius: var(--r-pill); background: var(--fill-3); overflow: hidden; margin: 8px 0 6px; }
.meter .fill { display: block; height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, #FF7A3D, var(--accent)); }

/* ───────── scrollbars ───────── */
* { scrollbar-width: thin; scrollbar-color: var(--fill) transparent; }

/* ───────── icons: SF Symbols-style outlines, used as masks (tab bar, sidebar, buttons) ───────── */
:root {
  --i-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E");
  --i-chev-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M8.5 1.5 2 8l6.5 6.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-updown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M2 6l3-3 3 3M2 10l3 3 3-3' fill='none' stroke='%238E8E93' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='2'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='2'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='2'/%3E%3Crect x='13.5' y='13.5' width='7' height='7' rx='2'/%3E%3C/svg%3E");
  --i-tray: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M3.5 13.5 6 5.5A2 2 0 0 1 7.9 4h8.2A2 2 0 0 1 18 5.5l2.5 8V18a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2z'/%3E%3Cpath d='M3.5 13.5h5l1 2h5l1-2h5'/%3E%3C/svg%3E");
  --i-store: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M4 9.5V19a1.5 1.5 0 0 0 1.5 1.5h13A1.5 1.5 0 0 0 20 19V9.5'/%3E%3Cpath d='M3 9l1.6-4.6A1.5 1.5 0 0 1 6 3.5h12a1.5 1.5 0 0 1 1.4.9L21 9a3 3 0 0 1-6 0 3 3 0 0 1-6 0 3 3 0 0 1-6 0z'/%3E%3Cpath d='M10 20.5v-5h4v5'/%3E%3C/svg%3E");
  --i-card: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2.5'/%3E%3Cpath d='M2.5 9.5h19M6 15h4'/%3E%3C/svg%3E");
  --i-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 16.5v-9M8 11.5l4-4 4 4'/%3E%3C/svg%3E");
  --i-people: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 19.5c.6-3.4 3.2-5.5 6.5-5.5s5.9 2.1 6.5 5.5'/%3E%3Cpath d='M15.5 4.8a3.5 3.5 0 0 1 0 6.4M18 14.3c1.9.8 3.1 2.6 3.5 5.2'/%3E%3C/svg%3E");
  --i-person: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3Cpath d='M6.3 18.4c1.2-2 3.2-3.2 5.7-3.2s4.5 1.2 5.7 3.2'/%3E%3C/svg%3E");
  --i-chart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M4 20.5h16'/%3E%3Crect x='5' y='11' width='3.5' height='6.5' rx='1'/%3E%3Crect x='10.25' y='6' width='3.5' height='11.5' rx='1'/%3E%3Crect x='15.5' y='13' width='3.5' height='4.5' rx='1'/%3E%3C/svg%3E");
  --i-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E");
  --i-house: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M3.5 10.5 12 3.5l8.5 7'/%3E%3Cpath d='M5.5 9v10a1.5 1.5 0 0 0 1.5 1.5h10a1.5 1.5 0 0 0 1.5-1.5V9'/%3E%3Cpath d='M10 20.5v-6h4v6'/%3E%3C/svg%3E");
  --i-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M10 14a4.5 4.5 0 0 0 6.4 0l3-3a4.5 4.5 0 0 0-6.4-6.4l-1.2 1.2'/%3E%3Cpath d='M14 10a4.5 4.5 0 0 0-6.4 0l-3 3a4.5 4.5 0 0 0 6.4 6.4l1.2-1.2'/%3E%3C/svg%3E");
  --i-code: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M8 7l-5 5 5 5M16 7l5 5-5 5M13.5 4.5l-3 15'/%3E%3C/svg%3E");
  --i-cash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='2.5' y='6' width='19' height='12' rx='2.5'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3Cpath d='M6 9.5v5M18 9.5v5'/%3E%3C/svg%3E");
  --i-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M12 3 4.5 6v5.5c0 4.6 3.2 8.2 7.5 9.5 4.3-1.3 7.5-4.9 7.5-9.5V6z'/%3E%3Cpath d='M8.8 12.2l2.2 2.2 4.2-4.4'/%3E%3C/svg%3E");
  --i-bolt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M13 2.5 4.5 13.5H12l-1 8 8.5-11H12z'/%3E%3C/svg%3E");
  --i-qr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='3.5' y='3.5' width='6' height='6' rx='1.2'/%3E%3Crect x='14.5' y='3.5' width='6' height='6' rx='1.2'/%3E%3Crect x='3.5' y='14.5' width='6' height='6' rx='1.2'/%3E%3Cpath d='M14.5 14.5h2.5v2.5M20.5 14.5v.01M14.5 20.5h.01M17.5 20.5h3v-3'/%3E%3C/svg%3E");
  --i-cart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M3 4h2.2l2.3 11.2a1.5 1.5 0 0 0 1.5 1.3h8.6a1.5 1.5 0 0 0 1.5-1.2L20.5 8H6.1'/%3E%3Ccircle cx='9.5' cy='20' r='1.3'/%3E%3Ccircle cx='17' cy='20' r='1.3'/%3E%3C/svg%3E");
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --i-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E");
}
:root { --i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 20 20'/%3E%3C/svg%3E"); }
.ico-mask { display: inline-block; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; flex: none; }

/* section icons by route (back-office, merchant cabinet, agent cabinet) */
#nav a[href="#/"], #nav a[href="#/dashboard"], #nav a[href="#/overview"], .tabs [data-tab="overview"] { --i: var(--i-grid); }
#nav a[href="#/applications"] { --i: var(--i-tray); }
#nav a[href="#/merchants"] { --i: var(--i-store); }
#nav a[href="#/payments"] { --i: var(--i-card); }
#nav a[href="#/payouts"], .tabs [data-tab="payouts"] { --i: var(--i-up); }
#nav a[href="#/agents"] { --i: var(--i-people); }
#nav a[href="#/team"] { --i: var(--i-shield); }
#nav a[href="#/reports"] { --i: var(--i-chart); }
#nav a[href="#/log"] { --i: var(--i-clock); }
#nav a[href="#/links"] { --i: var(--i-link); }
#nav a[href="#/integration"] { --i: var(--i-code); }
#nav a[href="#/profile"] { --i: var(--i-person); }
#nav a[href="#/clients"], .tabs [data-tab="clients"] { --i: var(--i-store); }

/* agent cabinet: its section buttons live in a static .tabs that is hidden before sign-in */
body.app:has(.tabs[hidden]) { grid-template-columns: minmax(0, 1fr); }
body.app:has(.tabs[hidden]) .sidebar { display: none; }