/* Super2Store customer site styles. Notes and owner decisions per rule: git history and docs/PROJECT_STATE.md. */
@font-face { font-family: "Tajawal"; font-weight: 500; font-display: swap; src: url("fonts/tajawal-arabic-500-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "Tajawal"; font-weight: 700; font-display: swap; src: url("fonts/tajawal-arabic-700-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "Tajawal"; font-weight: 800; font-display: swap; src: url("fonts/tajawal-arabic-800-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "Tajawal"; font-weight: 500; font-display: swap; src: url("fonts/tajawal-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Tajawal"; font-weight: 700; font-display: swap; src: url("fonts/tajawal-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Tajawal"; font-weight: 800; font-display: swap; src: url("fonts/tajawal-latin-800-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }

:root {

  --brand: #aa00ff;
  --brand-strong: #8a00cf;
  --brand-ink: #ffffff;
  --brand-soft: #f5e6ff;
  --bar-icon: #3b0059;
  --bar-bg: linear-gradient(135deg, #b822ff, #7d00d4);
  --accent: #0ea5e9;
  --good: #22a447;
  --warn: #f59e0b;
  --bad: #e53935;

  --bg: #f5f2fa;
  --surface: #ffffff;
  --surface-2: #eee8f7;
  --line: #ebe4f5;
  --text: #212a2e;
  --muted: #707a7e;
  --skeleton: #ece6f4;
  --shadow: 0 4px 18px rgb(70 20 110 / 8%);

  --radius-s: 10px;
  --radius: 14px;
  --radius-l: 18px;
  --gap: 12px;
  --pad: 14px;
  --appbar-h: 58px;

  --control-h: 42px;
  --btn-h: 42px;
  --chip-h: 34px;

  --tabbar-h: 72px;
  --safe-b: env(safe-area-inset-bottom, 0px);

  --fast: 90ms;
  --base: 160ms;
  --ease: cubic-bezier(.2, .7, .3, 1);

  --font: "Tajawal", "Segoe UI", Tahoma, system-ui, sans-serif;
  color-scheme: light;
}

:root[data-theme="dark"] {

  --brand: #b44bff;
  --brand-strong: #9a2bea;
  --brand-soft: #34204a;
  --bg: #0e0b12;
  --surface: #1f1a27;
  --surface-2: #2e2738;
  --line: #433a50;
  --text: #f4f2f7;
  --muted: #b9b1c4;
  --skeleton: #2e2738;
  --shadow: 0 0 0 1px rgb(255 255 255 / 7%), 0 6px 20px rgb(0 0 0 / 50%);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font: 500 15px/1.6 var(--font);
  -webkit-tap-highlight-color: transparent;
  padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 34px);
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

:root [hidden][hidden] { display: none; }
h1, h2, h3, p { margin: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.noscript { padding: 24px; text-align: center; }
.num { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }

.splash {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  background: var(--bg);
  transition: opacity var(--base) var(--ease);
}
:root[data-ready="1"] .splash { opacity: 0; pointer-events: none; }
.splash > *, .progress > * { grid-area: 1 / 1; }
.splash-img { max-width: 64px; max-height: 64px; object-fit: contain; border-radius: 16px; }
.splash.has-logo .splash-logo, .progress.has-logo .progress-logo { visibility: hidden; }
.splash-logo, .brand-fallback {
  display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: 20px;
  background: var(--brand); color: var(--brand-ink);
  font-weight: 800; font-size: 22px; letter-spacing: .5px;
}
.loader-ring {
  width: 108px; height: 108px; border-radius: 50%; border: 3px solid transparent;
  border-top-color: var(--brand); border-right-color: var(--brand);
  animation: spin 1.1s linear infinite;
}
.loader-ring.inner {
  width: 86px; height: 86px;
  border-color: transparent; border-bottom-color: color-mix(in srgb, var(--brand) 45%, transparent);
  border-left-color: color-mix(in srgb, var(--brand) 45%, transparent);
  animation: spin .8s linear infinite reverse;
}
.progress {
  position: fixed; top: 50%; left: 50%; z-index: 80; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%;
  background: var(--surface); box-shadow: var(--shadow); pointer-events: none;
}
.progress[hidden] { display: none; }
.progress .loader-ring { width: 76px; height: 76px; }
.progress .loader-ring.inner { width: 58px; height: 58px; }
.progress-logo {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px;
  background: var(--brand); color: var(--brand-ink); font-weight: 800; font-size: 13px;
}
.progress-img { max-width: 36px; max-height: 36px; object-fit: contain; border-radius: 10px; }

.appbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 4px;
  height: var(--appbar-h);
  padding: 0 8px;
  background: var(--bar-bg); color: var(--brand-ink);
  border-radius: 0 0 22px 22px; box-shadow: 0 6px 18px rgb(120 0 200 / 22%);
}
.brand { display: flex; align-items: center; height: 44px; margin-inline-start: auto; }
.brand .brand-name { display: none; margin-inline-start: 8px; font-weight: 800; font-size: 15px; color: var(--ink); white-space: nowrap; max-width: 42vw; overflow: hidden; text-overflow: ellipsis; }
.brand-logo { height: 42px; width: auto; }
.brand .brand-fallback {
  width: 40px; height: 40px; border-radius: 12px; font-size: 15px;
  background: rgb(255 255 255 / 18%);
}
.appbar-actions { display: flex; align-items: center; gap: 2px; }
.icon-btn {
  display: grid; place-items: center;
  width: 42px; height: 42px; border: 0; border-radius: 12px;
  background: transparent; color: inherit;
}
.icon-btn svg { width: 24px; height: 24px; }
.appbar .icon-btn svg { stroke-width: 2.2; }
.appbar .back svg { width: 26px; height: 26px; }
.balance-chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 40px; padding: 0 6px; border: 0; border-radius: 999px;
  background: transparent; color: var(--brand-ink);
  font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; direction: ltr;
}

.balance-chip .plus {
  display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; flex: none;
  background: var(--brand-ink); color: var(--brand);
}
.balance-chip .plus svg { width: 9px; height: 9px; stroke-width: 3.6; }
.balance-chip .amount { display: block; line-height: 1; padding-top: 1px; }

.level-mark {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: #fff; color: var(--lc); box-shadow: 0 1px 3px rgb(0 0 0 / 18%); overflow: hidden;
}
.level-mark svg { width: 18px; height: 18px; }
.level-mark.has-image { background: transparent; box-shadow: none; border-radius: 0; }
.level-mark img { width: 100%; height: 100%; object-fit: contain; }
.level-mark.sm { width: 18px; height: 18px; }
.level-mark.sm:not(.has-image) { box-shadow: inset 0 0 0 1.5px var(--lc); }
.level-mark.sm svg { width: 12px; height: 12px; }

.notice-slot:empty { display: none; }
.notice {
  display: flex; align-items: center; gap: 8px; margin: 10px 18px 0;
  padding: 6px 12px; border-radius: 14px; background: #ffb300; color: #3a2600;
  font-size: 12px; font-weight: 700; box-shadow: 0 4px 14px rgb(180 110 0 / 18%);
}
.notice svg { width: 18px; height: 18px; flex: none; }
.notice .btn {
  margin-inline-start: auto; min-height: 30px; height: 30px; padding: 0 10px; border-radius: 8px; flex: none;
  background: #212a2e; color: #fff; font-size: 12px;
}

.outlet { display: block; outline: none; }
.view {
  display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr);
  max-width: 960px; margin: 0 auto; padding: 14px 18px 8px;
  animation: view-in var(--base) var(--ease);
}
@keyframes view-in { from { opacity: 0; transform: translateY(6px); } }
.view > *, .stack > *, .card > * { min-width: 0; }
.view-title { font-size: 20px; font-weight: 800; }
.view-subtitle { color: var(--muted); font-size: 14px; margin-top: 2px; }
.section-title { font-size: 17px; font-weight: 800; }

* { -webkit-tap-highlight-color: transparent; }
:focus, :focus-visible { outline: none; }
:root[data-input="keyboard"] :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
button, a[href], summary, [role="button"], .press {
  --press-scale: .96;
  transition: transform 220ms var(--ease), background-color var(--base) var(--ease), border-color var(--base) var(--ease), color var(--base) var(--ease);
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.is-pressed { transform: scale(var(--press-scale)); transition-duration: 140ms; }

.press-host { position: relative; }
.press-wave-clip { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 1; }
.press-wave { position: absolute; border-radius: 50%; background: var(--brand); opacity: .2; transform: scale(0); animation: press-wave 560ms ease-out forwards; }
.press-wave.on-solid { background: #fff; opacity: .3; }
@keyframes press-wave { to { transform: scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .press-wave-clip { display: none; } }
.btn.block, summary, .copy-field, .drawer-item, .telegram-card, .redeem-head, .picker-btn, .date-field, .method, .row-card > summary, .picker-option, .pay-bar > summary { --press-scale: .97; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--btn-h); padding: 0 18px; border: 0; border-radius: 999px;
  background: var(--brand); color: var(--brand-ink);
  font-weight: 700; font-size: 15px;
}
.btn svg { width: 18px; height: 18px; }
.btn.secondary { background: var(--surface-2); color: var(--text); }
.btn.ghost { background: transparent; color: var(--brand); }
.btn.danger { background: var(--bad); color: #fff; }
.btn.block { width: 100%; }
.btn[disabled], .btn[aria-busy="true"] { opacity: .55; pointer-events: none; }
.btn[aria-busy="true"]::before {
  content: ""; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-inline-end-color: transparent;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.link-btn { border: 0; background: none; color: var(--brand); font-weight: 700; padding: 6px 2px; }

.card {
  background: var(--surface); border-radius: var(--radius-l);
  box-shadow: var(--shadow); padding: var(--pad);
}

.search {
  display: flex; align-items: center; gap: 8px;
  height: var(--control-h); padding: 0 16px; border-radius: 999px;
  background: var(--surface); color: var(--muted); box-shadow: var(--shadow);
}
.search svg { width: 20px; height: 20px; flex: none; }
.search-go { display: grid; place-items: center; flex: none; width: 36px; height: 36px; margin-inline-end: -8px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--brand); }
.search input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent;
  color: var(--text); font-size: 14px;
}
.search input::placeholder { color: var(--muted); }

.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chips::-webkit-scrollbar { display: none; }

.chip {
  --cc: var(--brand);
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  height: var(--chip-h); padding-inline: 12px 5px; border: 0; border-radius: 999px;
  background: var(--surface); color: var(--text); font-size: 12px; font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--line), 0 2px 6px rgb(70 20 110 / 6%);
}
.chip-count {
  display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  background: var(--surface-2); color: var(--text); font-size: 11px; font-weight: 700;
}

.chip-mark { display: grid; place-items: center; width: 15px; height: 15px; margin-inline: 1px 3px; border-radius: 50%; background: var(--cc); color: #fff; }
.chip-mark svg { width: 10px; height: 10px; stroke-width: 3.4; }
.chip[aria-pressed="true"] { background: var(--brand); color: #fff; box-shadow: 0 4px 12px rgb(170 0 255 / 28%); }
.chip[aria-pressed="true"] .chip-count { background: rgb(255 255 255 / 24%); color: #fff; }

.chips { flex-wrap: nowrap; overflow-x: auto; padding: 6px 10px 14px; margin: -2px -10px -6px; }
.chips.wrap { flex-wrap: wrap; overflow: visible; }

.field { display: grid; gap: 6px; }
.field > span { font-size: 13px; font-weight: 700; color: var(--muted); }
.input, .select {
  width: 100%; height: var(--control-h); padding: 0 16px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--text); outline: 0;
}

.input, .select, .picker-btn, .date-field {
  transition: border-color 300ms var(--ease), box-shadow 300ms var(--ease);
}
.input:focus, .select:focus, .picker-btn:focus-visible, .picker-btn[aria-expanded="true"], .date-field:focus-within {
  border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand);
}
.select { appearance: none; -webkit-appearance: none; }
.input[dir="ltr"] { text-align: left; }
.input-row { display: flex; gap: 8px; }
.input-row > .select { flex: 0 0 40%; }
.password-wrap { position: relative; }
.password-wrap .input { padding-inline-end: 52px; }
.password-wrap .icon-btn {
  position: absolute; inset-inline-end: 4px; top: 4px; color: var(--muted);
}
.hint { font-size: 12px; color: var(--muted); }
.form-error { color: var(--bad); font-size: 14px; min-height: 1em; }
.form-error:empty { display: none; }
.stack { display: grid; gap: 14px; }

.segmented {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: 4px; border-radius: 999px; background: var(--surface-2);
}
.segmented button {
  height: 40px; border: 0; border-radius: 999px; background: transparent;
  color: var(--muted); font-weight: 700;
}
.segmented button[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }

.banner {
  display: grid; overflow: hidden; border-radius: 20px; box-shadow: var(--shadow);
  aspect-ratio: 16 / 5; max-height: 220px; background: var(--skeleton);
}
.banner img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--base) var(--ease); }
.banner img.loaded { opacity: 1; }

.banner-host { display: grid; }
.banner-carousel { position: relative; display: block; touch-action: pan-y; user-select: none; }
.banner-track { display: flex; width: 100%; height: 100%; transition: transform 300ms var(--ease); }
.banner-slide { flex: 0 0 100%; width: 100%; height: 100%; padding: 0; border: 0; background: none; display: block; }
.banner-slide img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.banner-dots { position: absolute; inset-inline: 0; bottom: 8px; display: flex; justify-content: center; gap: 6px; }
.banner-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgb(255 255 255 / 55%); box-shadow: 0 1px 3px rgb(0 0 0 / 30%); transition: width 220ms var(--ease), background-color 220ms var(--ease); }
.banner-dot[aria-current="true"] { width: 20px; background: #fff; }
@media (prefers-reduced-motion: reduce) { .banner-track { transition: none; } }
.banner.placeholder {
  place-items: center; align-content: center; text-align: center; gap: 2px; padding: 10px;
  background: linear-gradient(135deg, var(--brand), var(--brand-strong));
  color: var(--brand-ink);
}
.banner.placeholder .brand-fallback { width: 44px; height: 44px; font-size: 15px; border-radius: 14px; background: rgb(255 255 255 / 18%); }
.banner.placeholder strong { font-size: 18px; line-height: 1.3; }
.banner.placeholder span { opacity: .85; font-size: 14px; }

.ticker {
  display: flex; align-items: center; overflow: hidden;
  height: 42px; padding: 0 4px; border-radius: 14px;
  background: var(--surface); color: var(--brand-strong); font-size: 14px; font-weight: 800;
  box-shadow: var(--shadow);
}
:root[data-theme="dark"] .ticker { color: #d9a3ff; }
.ticker-window { flex: 1; min-width: 0; overflow: hidden; height: 100%; display: flex; align-items: center; }
.ticker-track {
  display: inline-flex; gap: 48px; white-space: nowrap; padding-inline-start: 100%;
  animation: ticker var(--ticker-time, 18s) linear infinite;
}
.ticker-window:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(100%); } }
/* English (left to right): the news enters from the right and runs left (owner 2026-11-02). */
:root[dir="ltr"] .ticker-track { animation-name: ticker-ltr; }
@keyframes ticker-ltr { to { transform: translateX(-100%); } }
.telegram-card {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 8px 14px;
  border: 0; border-radius: 16px; background: linear-gradient(135deg, #2aa8ec, #1677c9); color: #fff;
  font-weight: 800; font-size: 15px; text-align: start; box-shadow: 0 6px 16px rgb(22 119 201 / 25%);
}
.telegram-card svg { width: 22px; height: 22px; flex: none; }
.telegram-card .pill {
  margin-inline-start: auto; padding: 3px 14px; border-radius: 999px;
  background: #fff; color: #1677c9; font-size: 13px;
}
.telegram-card .grow { display: grid; gap: 1px; }
.telegram-card small { font-size: 12px; font-weight: 600; opacity: .9; }

.wt-card-host:empty { display: none; }
.wt-card {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 14px;
  border: 0; border-radius: 18px; color: #fff; text-align: start; font-weight: 800; font-size: 16px;
  background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 55%, #000));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--brand) 32%, transparent);
}
.wt-card-ic {
  display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 12px;
  background: rgb(255 255 255 / 18%);
}
.wt-card-ic svg { width: 24px; height: 24px; }
.wt-card .grow { display: grid; gap: 2px; min-width: 0; }
.wt-card small { font-size: 12px; font-weight: 600; opacity: .9; }
.wt-card .pill { margin-inline-start: auto; padding: 4px 14px; border-radius: 999px; background: #fff; color: var(--brand); font-size: 13px; }
.transfer-form { padding: 14px; }
.transfer-verified { margin: -6px 2px 0; font-size: 13px; font-weight: 800; }
.transfer-verified.good { color: #1f9d45; }
.transfer-verified.bad { color: #d93636; }
.transfer-verified.wait { color: var(--muted); }
.policy-links { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.policy-link {
  border: 0; background: transparent; color: var(--muted); padding: 6px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 700;
}
.policy-link:hover { color: var(--brand); }

.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; align-items: start; }
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 900px) { .tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.tile {
  display: grid; align-content: start; gap: 6px; border: 0; padding: 6px 6px 10px; border-radius: 16px;
  background: var(--surface); box-shadow: var(--shadow); text-align: center; color: var(--text);
}
.tile-media {
  position: relative; aspect-ratio: 1; border-radius: 12px;
  overflow: hidden; background: var(--skeleton);
}
.tile-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--base) var(--ease); }
.tile-media img.loaded { opacity: 1; }
.tile-media .tile-fallback {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand); font-weight: 800; font-size: 22px;
}
.tile-name { font-size: 13px; font-weight: 700; line-height: 1.35; }

.ribbon {
  position: absolute; inset-inline-end: 6px; top: 6px; padding: 2px 9px; border-radius: 8px;
  background: #d81b60; color: #fff; font-size: 12px; font-weight: 700;
}
.ribbon.offer { background: var(--warn); color: #3a2600; }
.product-tile { gap: 3px; }
.product-tile .tile-name { font-size: 13px; }
.tile-price { color: var(--good); font-size: 13px; font-weight: 800; }
.tile-price.hidden-price { color: var(--muted); font-size: 11px; font-weight: 700; }
.tile-old { color: var(--muted); font-size: 11px; }
.product-tile.off .tile-media img { filter: grayscale(1); opacity: .6; }
.product-tile.off .tile-price { color: var(--muted); }

.buy-banner { width: 100%; aspect-ratio: 16 / 6; object-fit: cover; border-radius: var(--radius); }
.buy-card {
  display: grid; gap: 16px; padding: 18px 16px; border-radius: 14px;
  background: var(--surface); border: 1px solid #d9a3ff; box-shadow: var(--shadow);
}
.buy-head { display: flex; align-items: flex-start; gap: 12px; }
.buy-actions.single { grid-template-columns: 1fr; }
.buy-head .grow { flex: 1; min-width: 0; display: grid; gap: 8px; }
.buy-name { font-size: 17px; font-weight: 800; overflow-wrap: anywhere; }
.buy-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.buy-price { display: grid; justify-items: center; gap: 2px; flex: none; }
.buy-price s, .buy-price small { color: var(--muted); font-size: 12px; }
.price-pill {
  padding: 6px 14px; border-radius: 999px; background: var(--brand); color: var(--brand-ink);
  font-size: 15px; font-weight: 800; white-space: nowrap;
}
.req { color: var(--bad); }
.input.area { height: auto; min-height: 96px; padding: 12px 16px; border-radius: 18px; resize: vertical; }
.buy-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.buy-actions .btn { font-size: 16px; }
.btn.outline-bad { background: transparent; color: var(--bad); border: 1.5px solid var(--bad); }
.buy-safety { text-align: center; font-size: 13px; color: var(--muted); }
.buy-info { display: grid; gap: 8px; }
.buy-info strong { display: flex; align-items: center; gap: 6px; font-size: 15px; }
.buy-info strong svg { width: 20px; height: 20px; color: var(--warn); }
.buy-info p { white-space: pre-line; color: var(--muted); font-size: 14px; line-height: 1.9; overflow-wrap: anywhere; }

.skeleton { background: var(--skeleton); border-radius: var(--radius-s); animation: pulse 1.2s ease-in-out infinite; }
.skeleton.line { height: 14px; }
.skeleton.title { height: 22px; width: 50%; }
@keyframes pulse { 50% { opacity: .55; } }

.state {
  display: grid; justify-items: center; gap: 8px; text-align: center;
  padding: 24px 16px; border-radius: 16px; background: var(--surface);
  box-shadow: var(--shadow); color: var(--muted);
}
.state svg { width: 40px; height: 40px; color: var(--brand); }
.state strong { color: var(--text); font-size: 16px; }

.tabbar {
  position: fixed; inset-inline: 12px; bottom: calc(10px + var(--safe-b)); z-index: 40;
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
  height: calc(var(--tabbar-h) - 10px); border-radius: 22px;
  background: var(--bar-bg); box-shadow: 0 8px 26px rgb(120 0 200 / 30%);
}
:root[data-theme="dark"] .tabbar { box-shadow: 0 8px 26px rgb(0 0 0 / 55%); }
.tab {
  display: grid; place-items: center; height: 100%;
  border: 0; background: none; color: #fff; overflow: visible;
}
.tab .tab-icon {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px;
  transition: background-color 220ms var(--ease);
}
.tab svg { width: 26px; height: 26px; }
.tab[aria-current="page"] .tab-icon { background: rgb(255 255 255 / 22%); }

.tab.home .tab-icon {
  width: 62px; height: 62px; border-radius: 50%; transform: translateY(-26px);
  background: linear-gradient(135deg, #c13cff, #7d00d4);
  box-shadow: 0 12px 24px rgb(125 0 212 / 45%), 0 4px 8px rgb(60 0 110 / 25%);
}
.tab.home svg { width: 28px; height: 28px; }
.tab.home[aria-current="page"] .tab-icon { background: linear-gradient(135deg, #c13cff, #7d00d4); }
:root[data-theme="dark"] .tab.home .tab-icon { box-shadow: 0 12px 26px rgb(150 0 255 / 40%), 0 4px 10px rgb(0 0 0 / 55%); }

.scrim {
  position: fixed; inset: 0; z-index: 60; background: rgb(12 10 20 / 45%);
  animation: fade-in var(--base) var(--ease);
}
@keyframes fade-in { from { opacity: 0; } }

.drawer {
  position: fixed; top: calc(var(--appbar-h) + 6px); bottom: calc(var(--tabbar-h) + var(--safe-b) + 6px);
  inset-inline-start: 0; z-index: 70; /* owner 2026-11-03: Arabic from the right, English from the left */
  width: min(70vw, 280px); overflow-y: auto; overscroll-behavior: contain;
  border-start-end-radius: 22px; border-end-end-radius: 22px;
  background: var(--surface); box-shadow: var(--shadow);
  transform: translateX(100%); visibility: hidden;
  transition: transform var(--base) var(--ease), visibility 0s linear var(--base);
}
[dir="ltr"] .drawer { transform: translateX(-100%); }
.drawer.open { transform: none; visibility: visible; transition: transform var(--base) var(--ease); }
.drawer-head {
  display: grid; justify-items: center; gap: 6px; padding: 18px 14px 12px; text-align: center;
  border-bottom: 1px solid var(--line);
}
.drawer-head .drawer-logo { height: 46px; width: auto; }
.drawer-head .brand-fallback { width: 46px; height: 46px; font-size: 16px; border-radius: 14px; }
.drawer-head .who { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; }
.drawer-head .name { font-size: 15px; font-weight: 700; }
.drawer-head .meta { font-size: 12px; color: var(--muted); }
.drawer-head .money { font-size: 18px; font-weight: 700; color: var(--good); }

.head-actions { display: flex; justify-content: center; gap: 12px; }

.head-btn {
  position: relative; display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: 12px; overflow: hidden;
  background: transparent; color: var(--hc);
}
.head-btn svg { width: 20px; height: 20px; }
.theme-ic { position: absolute; inset: 0; display: grid; place-items: center; transition: transform 200ms var(--ease), opacity 200ms var(--ease); }
.theme-btn .moon { transform: rotate(-90deg) scale(.4); opacity: 0; }
.theme-btn.is-dark { --hc: #7c8cff; }
.theme-btn.is-dark .sun { transform: rotate(90deg) scale(.4); opacity: 0; }
.theme-btn.is-dark .moon { transform: none; opacity: 1; }
.theme-btn .moon svg { fill: currentColor; }
.who-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.level-pill, .kyc-pill {
  display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 2px 10px 2px 8px; border: 0; border-radius: 999px;
  background: var(--surface-2); color: var(--text); font-size: 11.5px; font-weight: 800;
}
.kyc-pill svg { width: 13px; height: 13px; }
.kyc-pill { color: var(--muted); }
.kyc-pill.wait { background: #fff4d6; color: #8a5a00; }
.kyc-pill.again { background: #ffe4e4; color: #b42318; }
:root[data-theme="dark"] .kyc-pill.wait { background: #3a2c08; color: #fcd34d; }
:root[data-theme="dark"] .kyc-pill.again { background: #3d1414; color: #fca5a5; }
.kyc-mark { display: inline-grid; place-items: center; color: #1d9bf0; }
.kyc-mark svg { width: 18px; height: 18px; }
.currency-pill {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 12px; border-radius: 999px;
  background: #fff3b0; color: #6b5200; font-size: 12px; font-weight: 800; white-space: nowrap;
}
.currency-pill svg { width: 14px; height: 14px; }

.drawer-head { position: relative; padding-bottom: 26px; }
.currency-pill.on-line {
  position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%); z-index: 1;
  min-height: 30px; border: 1.5px solid #f2d04a; background: #fff3b0; color: #6b5200;
  box-shadow: 0 2px 8px rgb(180 140 0 / 22%);
}
:root[data-theme="dark"] .currency-pill.on-line { background: #3a3208; color: #fde68a; border-color: #8a7414; }
.currency-pill.on-line.is-pressed { transform: translateX(-50%) scale(var(--press-scale)); }
.currency-pill.on-line svg { color: currentColor; }
.guest-card {
  display: grid; gap: 10px; width: 100%; padding: 18px 16px; border-radius: 26px;
  background: var(--brand); color: var(--brand-ink); text-align: center;
}
.guest-card strong { font-size: 24px; font-weight: 800; }
.guest-card p { font-size: 14px; opacity: .92; }
.guest-card .btn { min-height: 40px; }
.guest-card .btn.go { background: var(--good); color: #fff; }
.guest-card .btn.alt { background: #fff; color: #212a2e; }
.drawer-nav { display: grid; gap: 2px; padding: 28px 10px 40px; }
body:has(.drawer.open) .appbar, body:has(.drawer.open) .tabbar { z-index: 72; }

.drawer-item {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 42px; padding: 0 18px;
  border: 0; border-radius: 10px; background: none; color: var(--text); font-weight: 500; font-size: 14px; text-align: start;
}
.drawer-ic { display: grid; place-items: center; width: 19px; height: 19px; flex: none; color: var(--ic); }
.drawer-ic svg { width: 19px; height: 19px; }

:root[data-theme="dark"] .drawer-ic { color: color-mix(in srgb, var(--ic) 62%, #fff); }
:root[data-theme="dark"] .head-btn { color: color-mix(in srgb, var(--hc) 62%, #fff); }

.drawer-item[aria-current="page"] { background: var(--surface-2); font-weight: 700; }

.switch {
  position: relative; flex: none; width: 56px; height: 32px; border: 0; border-radius: 999px; padding: 0;
  background: #c3c7cc; transition: background-color 200ms var(--ease);
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 4px rgb(0 0 0 / 30%);
  transition: transform 200ms var(--ease);
}
.switch::before {

  content: ""; position: absolute; z-index: 1; top: 50%; left: 15px; width: 2.5px; height: 11px;
  margin-top: -5.5px; border-radius: 2px; background: #9aa0a6;
  transform: rotate(90deg);
  transition: transform 200ms var(--ease), background-color 200ms var(--ease), height 200ms var(--ease);
}
.switch[aria-checked="true"] { background: var(--good); }
.switch[aria-checked="true"]::after { transform: translateX(24px); }
.switch[aria-checked="true"]::before {
  width: 6px; height: 12px; margin-top: -8px; border-radius: 0; background: transparent;
  border-right: 2.5px solid var(--good); border-bottom: 2.5px solid var(--good);
  transform: translateX(22px) rotate(45deg);
}
.switch[disabled] { opacity: .5; }

.auth { max-width: 440px; }
.auth-head { display: grid; justify-items: center; gap: 10px; text-align: center; padding-top: 8px; }
.auth-divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.google-shell { position: relative; width: 100%; height: var(--btn-h); }
.google-face {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 100%;
  border-radius: 999px; background: #1a73e8; color: #fff; font-weight: 700; font-size: 15px;
  pointer-events: none;
}
.google-g { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; flex: none; }
.google-g svg { width: 18px; height: 18px; }
.google-mount { position: absolute; inset: 0; overflow: hidden; opacity: .01; display: grid; place-items: center; }
.google-mount > div, .google-mount iframe { width: 100%; max-width: 100%; }
.google-shell.is-loading .google-face, .google-shell.is-off .google-face { opacity: .55; }
.google-shell.is-off .google-mount { display: none; }
.google-hint:empty { display: none; }
.rules { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; font-size: 12px; color: var(--muted); }
.rules li[data-ok="true"] { color: var(--good); }

.toasts {
  position: fixed; inset-inline: 0; top: calc(var(--appbar-h) + 8px); z-index: 85;
  display: grid; justify-items: center; gap: 8px; pointer-events: none; padding: 0 12px;
}

.toasts[popover] {
  margin: 0; border: 0; background: transparent; color: inherit; overflow: visible;
  width: auto; height: auto; bottom: auto; inset-inline: 0; top: calc(var(--appbar-h) + 8px);
}
.toasts:popover-open { display: grid; }

.toast {
  --tt: var(--brand);
  pointer-events: auto; display: flex; align-items: center; gap: 10px; width: min(100%, 460px);
  padding: 11px 14px; border-radius: 14px;
  background: var(--tt); color: #fff; box-shadow: 0 8px 24px color-mix(in srgb, var(--tt) 35%, rgb(0 0 0 / 25%));
  font-size: 14px; font-weight: 700; animation: toast-in 200ms var(--ease);
}
.toast.good { --tt: #1f9d45; }
.toast.bad { --tt: #d93636; }
.toast.warn { --tt: #e08a00; }
.toast.info { --tt: #1e88e5; }
.toast.leaving { opacity: 0; transform: translateY(-10px); transition: opacity 160ms var(--ease), transform 160ms var(--ease); }
.toast-ic {
  display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%;
  background: rgb(255 255 255 / 22%); color: #fff;
}
.toast-ic svg { width: 19px; height: 19px; stroke-width: 2.4; }
.toast-text { flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: 1.5; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-12px) scale(.98); } }

.gate { max-width: 460px; }
.gate .links { display: grid; gap: 10px; }

.badge {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px;
  font-size: 12px; font-weight: 800; background: var(--surface-2); color: var(--muted);
}
.badge.good { background: color-mix(in srgb, var(--good) 13%, transparent); color: var(--good); }
.badge.warn { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.badge.bad { background: color-mix(in srgb, var(--bad) 12%, transparent); color: var(--bad); }
.details { display: grid; gap: 8px; margin: 0; }
.detail-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.detail-row dt { color: var(--muted); }
.detail-row dd { margin: 0; font-weight: 700; text-align: end; overflow-wrap: anywhere; }

.date-box { display: grid; gap: 4px; padding-top: 18px; }
.date-range { display: flex; align-items: center; gap: 10px; }
.date-field {
  position: relative; flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px;
  height: var(--control-h); padding: 0 16px; border: 1px solid var(--brand); border-radius: 999px;
  background: var(--surface-2); color: var(--text); font-weight: 500; font-size: 14px;
}

.date-field small {
  position: absolute; top: -19px; inset-inline-start: 16px; padding: 0;
  background: none; color: var(--muted); font-size: 12px; font-weight: 700; line-height: 16px;
}
.date-field svg { width: 18px; height: 18px; flex: none; color: var(--brand); }
.date-field .num { direction: ltr; }
.date-search {
  display: grid; place-items: center; width: var(--control-h); height: var(--control-h); flex: none; border: 0; border-radius: 50%;
  background: var(--brand); color: #fff; box-shadow: 0 3px 8px rgb(110 0 170 / 28%);
}
.date-search svg { width: 22px; height: 22px; }
.date-search.ready { animation: nudge 1.2s var(--ease) infinite; }
@keyframes nudge { 50% { box-shadow: 0 0 0 7px rgb(170 0 255 / 18%), 0 6px 14px rgb(170 0 255 / 30%); } }

.sheet {
  width: min(94vw, 440px); max-height: 86dvh; overflow-y: auto; border: 0; border-radius: 22px; padding: 18px;
  background: var(--surface); color: var(--text); display: grid; gap: 12px;
}
.sheet::backdrop { background: rgb(12 10 20 / 50%); }
.sheet[open] { animation: sheet-in 200ms var(--ease); }
.sheet.leaving { opacity: 0; transform: translateY(14px); transition: opacity 150ms var(--ease), transform 150ms var(--ease); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(18px) scale(.98); } }
.sheet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.picker-sheet { margin-bottom: max(12px, var(--safe-b)); }

.outcome-sheet { margin: auto; }

.stock-lots { display: grid; gap: 6px; padding: 10px; border-radius: 14px; background: var(--surface-2); }
.stock-lot { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.stock-lot.newer strong { color: var(--warn); }
.stock-lot.total { padding-top: 6px; border-top: 1px dashed var(--line); font-weight: 800; }
.stock-choice .outcome-actions { margin-top: 4px; }
.stock-codes { display: grid; gap: 8px; }
.stock-code { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px dashed var(--line); }
.stock-code code { direction: ltr; font-size: 15px; font-weight: 800; overflow-wrap: anywhere; }

.stock-code code { min-width: 0; flex: 1 1 auto; font-size: 14px; letter-spacing: .2px; }
.stock-code .info-copy { flex: 0 0 auto; white-space: nowrap; }
.outcome-sheet .sheet-grip { display: none; }
.outcome-sheet[open] { animation: outcome-in 220ms var(--ease); }
@keyframes outcome-in { from { opacity: 0; transform: scale(.92); } }
.outcome-sheet.leaving { transform: scale(.96); }
.sheet-grip { justify-self: center; width: 42px; height: 5px; border-radius: 999px; background: var(--line); }
.picker { position: relative; min-width: 0; }

.popover {
  position: fixed; z-index: 75; left: var(--pl); top: var(--pt); bottom: var(--pb); width: var(--pw);
  max-height: var(--pmax); overflow-y: auto; display: grid; gap: 8px; align-content: start; padding: 10px;
  border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 14px 34px rgb(30 0 60 / 22%);
  transform-origin: top center; animation: pop-in 160ms var(--ease);
}
.popover.up { transform-origin: bottom center; }
.popover.leaving { opacity: 0; transform: scale(.97); transition: opacity 130ms var(--ease), transform 130ms var(--ease); }
:root[data-theme="dark"] .popover { box-shadow: 0 0 0 1px rgb(255 255 255 / 6%), 0 14px 34px rgb(0 0 0 / 60%); }
@keyframes pop-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
.popover.up { animation-name: pop-up; }
@keyframes pop-up { from { opacity: 0; transform: translateY(6px) scale(.97); } }
.popover .picker-option { min-height: 40px; }
.picker-btn svg { transition: transform 200ms var(--ease); }
.picker-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.picker-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: var(--control-h); padding: 0 16px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); text-align: start; font-weight: 700;
}
.picker-btn.empty { color: var(--muted); font-weight: 500; }
.picker-btn svg { width: 18px; height: 18px; color: var(--brand); flex: none; }
.picker-btn[disabled] { opacity: .55; }
.picker-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-list { display: grid; gap: 6px; }
.picker-option {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px; padding: 0 14px;
  border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); text-align: start; font-weight: 700;
}
.picker-option[aria-selected="true"] { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.picker-option svg { width: 20px; height: 20px; flex: none; stroke-width: 2.6; }
.picker-search { height: 44px; position: sticky; top: -18px; z-index: 1; }
.picker-none { text-align: center; padding: 12px; }
.cal-nav { display: flex; align-items: center; justify-content: space-between; }
.cal-title { display: inline-flex; gap: 6px; font-size: 16px; font-weight: 800; }
.cal-pick { padding: 4px 10px; border: 0; border-radius: 10px; background: var(--brand-soft); color: var(--brand); font: inherit; font-weight: 800; }
.cal-pick[aria-pressed="true"] { background: var(--brand); color: #fff; }
.cal-grid.cal-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: 240px; overflow-y: auto; gap: 6px; }
.cal-choice { min-height: 38px; border: 0; border-radius: 12px; background: var(--surface-2); color: var(--text); font-weight: 700; font-size: 13px; }
.cal-choice[aria-pressed="true"] { background: var(--brand); color: #fff; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; }
.cal-head { font-size: 12px; color: var(--muted); font-weight: 800; padding: 4px 0; }
.cal-day {
  height: 40px; border: 0; border-radius: 12px; background: transparent; color: var(--text); font-weight: 700;
}
.cal-day.today { box-shadow: inset 0 0 0 1.5px var(--brand); color: var(--brand); }
.cal-day[aria-pressed="true"] { background: var(--brand); color: #fff; }
.cal-day[disabled] { opacity: .3; }

.popover .cal-nav .icon-btn { width: 36px; height: 36px; color: var(--brand); }
.popover .cal-title { font-size: 14px; color: var(--text); }
.popover .cal-grid { gap: 3px; }
.popover .cal-day { height: 34px; border-radius: 10px; }
.cal-actions { display: flex; justify-content: center; }
.cal-today { min-height: 34px; font-size: 13px; padding: 0 18px; }
.outcome { position: relative; display: grid; justify-items: center; gap: 10px; text-align: center; padding: 10px 6px 4px; }
.outcome-art { position: relative; width: 180px; height: 150px; display: grid; place-items: center; }
.outcome-ic {
  position: relative; z-index: 1; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%;
  background: var(--oc); color: #fff; box-shadow: 0 10px 24px color-mix(in srgb, var(--oc) 40%, transparent);
  animation: pop-in 420ms cubic-bezier(.2, 1.4, .4, 1) both;
}
.outcome-ic svg { width: 48px; height: 48px; stroke-width: 3; stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw 420ms 260ms var(--ease) forwards; }
.outcome.good { --oc: var(--good); }
.outcome.bad { --oc: var(--bad); }
.outcome.warn { --oc: var(--warn); }
.bubble-dot {
  position: absolute; border-radius: 50%; background: color-mix(in srgb, var(--oc) 30%, transparent);
  animation: float-dot 3.2s ease-in-out infinite;
}
.bubble-dot.d0 { width: 34px; height: 34px; top: 4px; left: 44px; }
.bubble-dot.d1 { width: 14px; height: 14px; top: 28px; left: 20px; animation-delay: .4s; }
.bubble-dot.d2 { width: 22px; height: 22px; top: 18px; right: 30px; animation-delay: .8s; }
.bubble-dot.d3 { width: 10px; height: 10px; top: 4px; right: 12px; animation-delay: 1.2s; }
.bubble-dot.d4 { width: 26px; height: 26px; bottom: 6px; left: 12px; animation-delay: .2s; }
.bubble-dot.d5 { width: 16px; height: 16px; bottom: 18px; right: 22px; animation-delay: 1s; }
.bubble-dot.d6 { width: 30px; height: 30px; bottom: 0; right: 56px; animation-delay: 1.6s; }
.bubble-dot.d7 { width: 9px; height: 9px; bottom: 40px; left: 4px; animation-delay: 2s; }
@keyframes pop-in { from { transform: scale(.3); opacity: 0; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes float-dot { 50% { transform: translateY(-8px); } }
.outcome-actions { display: grid; gap: 8px; }

.arc-scrim { position: fixed; inset: 0; z-index: 44; }
.support-arc { position: fixed; inset: 0; z-index: 45; pointer-events: none; }
.arc-item {
  position: absolute; left: calc(var(--cx) - 24px); top: calc(var(--cy) - 24px);
  display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; padding: 0;
  background: var(--sc); color: #fff; box-shadow: 0 6px 16px rgb(0 0 0 / 22%); text-decoration: none;
  opacity: 0; transform: translate(0, 0) scale(.3); pointer-events: auto;
  transition: transform 260ms cubic-bezier(.3, 1.4, .5, 1), opacity 160ms var(--ease);
  transition-delay: calc(var(--i) * 30ms);
}
.arc-item svg { width: 24px; height: 24px; }
.support-arc.open .arc-item { opacity: 1; transform: translate(var(--x), var(--y)) scale(1); }
.support-arc.open .arc-item.is-pressed { transform: translate(var(--x), var(--y)) scale(var(--press-scale)); }
.tab.arc-anchor .tab-icon { background: rgb(255 255 255 / 22%); }

.notice-sheet { width: min(92vw, 420px); padding: 16px 16px 18px; }
.notice-sheet .sheet-grip { display: none; }
.notice-card { --nk: var(--brand); display: grid; gap: 12px; }
.notice-card[data-kind="notice"] { --nk: #f59e0b; }
.notice-card[data-kind="update"] { --nk: #1e88e5; }
.notice-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-inline-end: 34px; }
.notice-kind {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--nk) 14%, transparent); color: var(--nk); font-size: 13px; font-weight: 800;
}
.notice-kind svg { width: 16px; height: 16px; }
.notice-count { font-size: 12px; font-weight: 800; color: var(--muted); }
.notice-body { max-height: 56dvh; overflow-y: auto; font-size: 15px; line-height: 1.8; }

.notice-image { border-radius: 14px; overflow: hidden; background: var(--soft, rgba(0,0,0,.04)); }
.notice-image img { display: block; width: 100%; max-height: 42dvh; object-fit: contain; opacity: 0; transition: opacity 200ms; }
.notice-image img.loaded { opacity: 1; }
.notice-action { background: transparent; color: var(--nk); border: 1.5px solid var(--nk); }
.btn.warn-btn { background: var(--warn); color: #3a2600; }

.balance-card {
  display: grid; justify-items: center; gap: 2px; padding: 16px; border-radius: 8px; text-align: center;
  background: var(--good); color: #fff; box-shadow: var(--shadow);
}
.balance-card small { opacity: .92; font-size: 15px; font-weight: 800; }
.balance-card strong { font-size: 24px; font-weight: 800; }
.balance-card .row { display: flex; gap: 8px; margin-top: 8px; }
.balance-card .btn { min-height: 36px; font-size: 14px; background: rgb(255 255 255 / 22%); color: #fff; }

.redeem {
  display: grid; gap: 12px; padding: 16px; border-radius: 22px;
  background: var(--brand); color: var(--brand-ink); box-shadow: 0 6px 16px rgb(170 0 255 / 25%);
}
.redeem-head { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; padding: 0; background: none; color: inherit; text-align: start; }
.redeem-head .grow { flex: 1; display: grid; }
.redeem-head strong { font-size: 15px; font-weight: 800; }
.redeem-head small { font-size: 12px; opacity: .85; }
.redeem-head .badge-ic {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: rgb(255 255 255 / 22%);
}
.redeem-head .badge-ic svg { width: 24px; height: 24px; }
.redeem form { display: flex; gap: 8px; }
.redeem .input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .5px; background: #fff; color: #212a2e; }
.redeem .btn { background: #fff; color: var(--brand); }

.methods { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 12px; }

.method {
  display: grid; gap: 6px; align-content: start; padding: 8px 8px 10px; border: 0; border-radius: 16px;
  background: var(--surface); text-align: center; color: var(--text); box-shadow: var(--shadow);
}
.method .tile-media { display: grid; place-items: center; border-radius: 10px; background: linear-gradient(135deg, var(--brand), var(--brand-strong)); }
.method-initials { color: #fff; font-size: 22px; font-weight: 800; letter-spacing: .5px; }
.method .tile-name { font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.method-lock {
  position: absolute; inset: auto 0 0; display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 5px 4px; background: rgb(0 0 0 / 62%); color: #fff; font-size: 11px; font-weight: 800; white-space: nowrap;
}
.method-lock svg { width: 13px; height: 13px; }
.method-mode {
  justify-self: center; display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 800; background: var(--surface-2); color: var(--muted);
}
.method-mode svg { width: 12px; height: 12px; }
.method-mode.auto { background: #e3fbe3; color: #1b7a34; }
.methods.density-compact { gap: 8px; }
.methods.density-compact .method { gap: 4px; padding: 6px 6px 8px; border-radius: 12px; }
.methods.density-compact .tile-name { font-size: 12px; }
.methods.density-wide { gap: 16px; }
.methods.density-wide .method { gap: 8px; padding: 12px 12px 14px; border-radius: 16px; }
.methods.density-wide .tile-name { font-size: 14px; }
:root[data-theme="dark"] .method-mode.auto { background: #14361f; color: #86efac; }

.method-head { display: flex; align-items: center; gap: 12px; }
.method-head .tile-media { width: 56px; flex: none; display: grid; place-items: center; }
.method-head .tile-media svg { width: 28px; height: 28px; color: var(--brand); }
.instructions { white-space: pre-line; font-size: 14px; line-height: 1.8; }
.copy-field {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  min-height: 46px; padding: 8px 14px; border: 1px dashed var(--brand); border-radius: var(--radius);
  background: var(--brand-soft); color: var(--text); text-align: start;
}
.copy-field small { display: block; color: var(--muted); font-size: 12px; }
.copy-field strong { direction: ltr; unicode-bidi: isolate; overflow-wrap: anywhere; }
.copy-field svg { width: 20px; height: 20px; color: var(--brand); flex: none; }
.amount-field { position: relative; }

.amount-field .input { padding: 0 16px 0 72px; font-size: 18px; font-weight: 700; direction: ltr; text-align: left; }
.amount-field .suffix {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-weight: 700; pointer-events: none;
}
/* English (left to right): the field's name sits on the left, so the
   currency moves to the right end (owner 2026-11-03: they overlapped). */
:root[dir="ltr"] .amount-field .suffix { left: auto; right: 16px; }
:root[dir="ltr"] .amount-field .input { padding: 0 72px 0 16px; }
.file-pick {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius);
  border: 1px dashed var(--line); background: var(--surface-2);
}
.file-pick svg { width: 24px; height: 24px; color: var(--brand); flex: none; }
.file-pick .grow { flex: 1; min-width: 0; display: grid; }
.file-pick small { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.timer {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius);
  background: var(--surface-2);
}
.timer > svg { width: 28px; height: 28px; color: var(--brand); flex: none; }
.timer .grow { display: grid; gap: 2px; }
.timer small { color: var(--muted); font-size: 12px; }
.timer strong { font-size: 22px; font-variant-numeric: tabular-nums; direction: ltr; }
.timer.expired strong { color: var(--bad); }
.note { padding: 10px 12px; border-radius: var(--radius); background: var(--surface-2); font-size: 13px; color: var(--muted); }
.result { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 24px 12px; }
.result svg { width: 48px; height: 48px; }
.result.good svg { color: var(--good); }
.result.warn svg { color: var(--warn); }
.result.bad svg { color: var(--bad); }
.result .row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

.list { display: grid; gap: 10px; }
.row-card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); }
.row-card > summary {
  display: flex; align-items: center; gap: 12px; padding: 14px; cursor: pointer; list-style: none;
}
.row-card > summary::-webkit-details-marker { display: none; }
.row-card > summary > svg { width: 24px; height: 24px; flex: none; color: var(--brand); }
.row-card .grow { flex: 1; min-width: 0; display: grid; gap: 2px; }
.row-card .grow small { color: var(--muted); font-size: 12px; }
.row-card .amount { font-weight: 800; direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.row-card .amount.in { color: var(--good); }
.row-card .amount.out { color: var(--bad); }
.row-card .body { display: grid; gap: 12px; padding: 0 14px 14px; }
.row-card[open] > summary { padding-bottom: 8px; }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.row-actions .btn { min-height: 38px; font-size: 14px; }
.more { justify-self: center; }
.proof { width: 100%; max-height: 480px; object-fit: contain; border-radius: var(--radius); background: var(--surface-2); }
.total-pill {
  justify-self: start; padding: 4px 16px; border-radius: 999px; border: 1.5px solid var(--warn);
  color: #b26a00; font-size: 13px; font-weight: 800;
}
:root[data-theme="dark"] .total-pill { color: #ffc35a; }
.orders-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.orders-summary .total-pill { justify-self: auto; }
.export-btn { height: 36px; padding: 0 14px; font-size: 13px; gap: 6px; }
.export-btn svg { width: 18px; height: 18px; }
.dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--brand); }
.announce {
  display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--brand); color: var(--brand-ink);
  font-size: 14px; font-weight: 700;
}
.announce svg { width: 20px; height: 20px; flex: none; }
.announce p { white-space: pre-line; overflow-wrap: anywhere; }
.thread-box { display: grid; gap: 10px; padding: 14px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.thread-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bubble { display: grid; gap: 4px; max-width: 88%; padding: 10px 12px; border-radius: 14px; font-size: 14px; }
.bubble p { white-space: pre-line; overflow-wrap: anywhere; }
.bubble small { color: var(--muted); font-size: 11px; }
.bubble.me { justify-self: start; background: var(--brand); color: var(--brand-ink); border-start-start-radius: 4px; }
.bubble.me small { color: rgb(255 255 255 / 80%); }
.bubble.them { justify-self: end; background: var(--surface-2); border-start-end-radius: 4px; }
.channels { display: flex; gap: 10px; flex-wrap: wrap; }
.channel {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 14px;
  border-radius: 999px; background: var(--surface-2); font-weight: 800;
}
.channel svg { width: 20px; height: 20px; }
.channel.whatsapp { background: #25d366; color: #fff; }
.channel.telegram { background: #29a9eb; color: #fff; }
.channel.facebook { background: #1877f2; color: #fff; }
.channel.instagram { background: #e1306c; color: #fff; }

.avatar-wrap { position: relative; justify-self: center; }
.avatar {
  display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; overflow: hidden;
  background: var(--surface-2); color: var(--brand); box-shadow: var(--shadow); border: 3px solid var(--surface);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar svg { width: 44px; height: 44px; }
.avatar-pick {
  position: absolute; bottom: 2px; inset-inline-start: 0; display: grid; place-items: center;
  width: 32px; height: 32px; border: 2px solid var(--surface); border-radius: 50%; background: var(--brand); color: #fff;
}
.avatar-pick svg { width: 16px; height: 16px; }
.status-line { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.status-line svg { width: 22px; height: 22px; color: var(--muted); }
.status-line.good svg { color: var(--good); }
.status-line.warn svg { color: var(--warn); }
.switch-row { display: flex; align-items: center; gap: 12px; }
.switch-row .grow { flex: 1; display: grid; gap: 2px; }
.switch-row small { color: var(--muted); font-size: 12px; }
.steps { display: grid; gap: 6px; margin: 0; padding-inline-start: 20px; color: var(--muted); font-size: 14px; }
.level-hero {
  display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 16px;
  background: var(--brand); color: var(--brand-ink);
}
.level-hero .grow { display: grid; gap: 2px; }
.level-hero small, .level-hero span { opacity: .9; font-size: 13px; }
.level-hero strong { font-size: 22px; font-weight: 800; }
.level-art {
  display: grid; place-items: center; width: 56px; height: 56px; flex: none; overflow: hidden; border-radius: 16px;
  background: var(--level-color, var(--brand)); color: #fff; font-weight: 800; font-size: 18px;
  box-shadow: 0 0 0 3px rgb(255 255 255 / 35%);
}
.level-art img { width: 100%; height: 100%; object-fit: cover; }
.level-track { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.level-bar { display: block; height: 100%; }
.level-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--good); }

.qr { justify-self: center; width: 200px; height: 200px; padding: 8px; border-radius: 12px; background: #fff; }
.codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.codes code {
  padding: 8px; border-radius: 8px; background: var(--surface-2); text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; direction: ltr;
}
.file-pick.done { border-style: solid; border-color: var(--good); }
.file-pick.done > svg { color: var(--good); }
.file-pick .btn { min-height: 36px; padding: 0 14px; font-size: 13px; }

.flow { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 20px; }
.flow svg { width: 22px; height: 22px; color: var(--brand); }
.consent { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; font-weight: 700; }

.consent input {
  appearance: none; -webkit-appearance: none; position: relative; display: grid; place-items: center;
  width: 24px; height: 24px; margin: 0; flex: none; border: 2px solid var(--brand); border-radius: 7px; background: var(--surface);
  transition: background-color 160ms var(--ease), transform 150ms var(--ease);
}
.consent input::after {
  content: ""; width: 6px; height: 11px; margin-top: -3px; border-right: 2.5px solid #fff; border-bottom: 2.5px solid #fff;
  transform: rotate(45deg) scale(0); transition: transform 160ms var(--ease);
}
.consent input:checked { background: var(--brand); }
.consent input:checked::after { transform: rotate(45deg) scale(1); }
.consent input:active { transform: scale(.9); }

.rich { display: grid; gap: 6px; font-size: 14px; line-height: 1.9; color: var(--text); overflow-wrap: anywhere; }
.rich p, .rich li { margin: 0; }
.rich ol, .rich ul { margin: 0; padding-inline-start: 22px; }
.rich a { color: var(--brand); text-decoration: underline; }
.rich .rich-large { font-size: 1.4em; }
.rich .rich-title { font-size: 1.85em; font-weight: 800; line-height: 1.5; }
.rich .rich-subtitle { font-size: 1.42em; font-weight: 800; line-height: 1.6; }
.rich .rich-s12 { font-size: 12px; }
.rich .rich-s14 { font-size: 14px; }
.rich .rich-s16 { font-size: 16px; }
.rich .rich-s18 { font-size: 18px; }
.rich .rich-s20 { font-size: 20px; }
.rich .rich-s24 { font-size: 24px; line-height: 1.6; }
.rich .rich-s28 { font-size: 28px; line-height: 1.5; }
.rich .rich-s32 { font-size: 32px; line-height: 1.4; }
.rich .rich-mark { background: #fff4a3; color: #17202b; border-radius: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.rich .rich-c { color: var(--rc); }
:root[data-theme="dark"] .rich .rich-c.rich-ink:not(.rich-mark) { color: color-mix(in srgb, var(--rc) 45%, #fff); }
.rich .align-center { text-align: center; }
.rich .align-left { text-align: left; }
.rich .align-justify { text-align: justify; }
.about-hero {
  display: grid; gap: 10px; padding: 20px 16px; border-radius: 18px; background: var(--brand); color: var(--brand-ink);
}
.about-hero h1 { font-size: 14px; opacity: .85; }
.about-hero strong { font-size: 24px; font-weight: 800; }
.about-hero .rich { color: var(--brand-ink); }
.about-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.about-tags span { padding: 3px 12px; border-radius: 999px; background: rgb(255 255 255 / 20%); font-size: 12px; font-weight: 800; }
.switch-row > svg { width: 22px; height: 22px; color: var(--brand); flex: none; }
.status-head { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 800; }
.status-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: 999px; color: #fff; font-size: 15px; font-weight: 800;
  background: var(--muted);
}
.status-pill svg { width: 18px; height: 18px; stroke-width: 2.4; }
.status-pill.good { background: var(--good); } .status-pill.bad { background: var(--bad); } .status-pill.warn { background: var(--warn); }
.info-row strong.spent { color: var(--bad); }
.info-row strong.done { color: var(--good); }
.info-list { display: grid; gap: 8px; }
.info-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 10px 14px;
  border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); font-size: 14px;
}
.info-row > span { color: var(--muted); font-weight: 700; flex: none; }
.info-row strong { font-weight: 800; text-align: end; overflow-wrap: anywhere; min-width: 0; }
.info-list.soft .info-row { background: var(--surface-2); box-shadow: none; }
.info-copy {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0; border: 0; padding: 4px 6px; border-radius: 8px;
  background: transparent; color: var(--text); font-weight: 800; text-align: end; overflow-wrap: anywhere;
}
.info-copy svg { width: 16px; height: 16px; flex: none; color: var(--brand); }
.reply-box { display: grid; gap: 10px; padding: 14px 16px; border-radius: 14px; background: var(--surface-2); }
.reply-title { display: flex; align-items: center; gap: 6px; font-size: 15px; }
.reply-title svg { width: 18px; height: 18px; color: var(--brand); }
.reply-line { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.reply-line .info-copy { flex: none; white-space: nowrap; }
.reply-actions { display: flex; flex: none; gap: 6px; align-items: center; }
.reply-actions .info-copy { flex: none; white-space: nowrap; }
.info-copy.report { color: var(--brand); }

.receipt { --rt: var(--good); display: grid; gap: 10px; padding: 12px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid color-mix(in srgb, var(--rt) 28%, var(--line)); }
.receipt.bad { --rt: var(--bad); }
.receipt.warn { --rt: var(--warn); }
.receipt.info { --rt: var(--info); }
.receipt-head { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--rt) 13%, var(--surface)); text-align: center; }
.receipt-head small { color: var(--muted); font-size: 12px; font-weight: 700; }
.receipt-head strong { color: var(--rt); font-size: 22px; font-weight: 800; }
.receipt-rows { display: grid; gap: 0; margin: 0; }
.receipt-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 2px; border-bottom: 1px dashed var(--line); }
.receipt-row:last-child { border-bottom: 0; }
.receipt-row dt { color: var(--muted); font-size: 13px; }
.receipt-row dd { margin: 0; color: var(--text); font-size: 14px; font-weight: 700; text-align: end; overflow-wrap: anywhere; }
.report-sheet { width: min(92vw, 560px); max-height: 88vh; overflow: auto; }
.report-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.report-image { display: block; width: 100%; max-height: 70vh; object-fit: contain; border-radius: var(--radius); background: var(--surface-2); margin-top: 8px; }
.reply-line p { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; white-space: pre-line; }
.objection-btn { justify-self: center; min-width: 60%; border-radius: 10px; }
.ledger-balance { display: flex; gap: 8px; font-size: 11.5px; font-weight: 700; }
.ledger-balance .after { color: var(--good); }
.ledger-balance .before { color: var(--bad); }

.pay-bar { --pc: var(--muted); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.pay-bar.good { --pc: var(--good); } .pay-bar.bad { --pc: var(--bad); } .pay-bar.warn { --pc: var(--warn); } .pay-bar.muted { --pc: #7A8499; } .pay-bar.info { --pc: var(--info); }
.pay-bar > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px 9px 16px; padding-inline: 16px 10px;
  background: var(--pc); color: #fff; list-style: none; cursor: pointer; border-radius: 16px;
}
.pay-bar > summary::-webkit-details-marker { display: none; }
.pay-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; font-weight: 700; font-size: 15px; }
.pay-state { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; flex: none; }
.pay-chev { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgb(255 255 255 / 22%); }
.pay-chev svg { width: 18px; height: 18px; transition: transform 160ms var(--ease); }
.pay-bar[open] .pay-chev svg { transform: rotate(180deg); }
.pay-bar .body { display: grid; gap: 12px; padding: 14px 16px; }

.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.copy-chip {
  --cc: #7c6cff;
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin: 2px 0; padding: 6px 6px 6px 12px; padding-inline: 12px 6px;
  border: 1.5px solid var(--cc); border-radius: 12px; background: color-mix(in srgb, var(--cc) 12%, transparent);
  color: var(--cc); font-weight: 800; direction: ltr; unicode-bidi: isolate; vertical-align: middle;
}
.copy-chip .copy-value { overflow-wrap: anywhere; text-align: left; }
.copy-act {
  display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 4px 10px; border-radius: 9px;
  background: var(--cc); color: #fff; font-size: 12px; direction: rtl;
}
.copy-act svg { width: 14px; height: 14px; }

.method-card { gap: 16px; padding: 20px 18px; }
.method-title { font-size: 26px; font-weight: 800; text-align: start; direction: ltr; unicode-bidi: plaintext; }
.method-rich .rich { font-size: 14px; color: var(--muted); }
.net-field {
  display: grid; gap: 2px; padding: 10px 20px; border-radius: 999px; background: #e3fbe3; color: #2e7d32;
}
:root[data-theme="dark"] .net-field { background: #14361f; color: #86efac; }
.net-field small { font-size: 12px; font-weight: 700; opacity: .9; }
.net-value { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 18px; font-weight: 800; }
.net-value .suffix { font-size: 14px; opacity: .8; }
.request-btn { font-size: 16px; }
.transfer-card { gap: 14px; background: var(--surface-2); box-shadow: none; }

.pay-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px; border-radius: 20px; background: var(--bar-bg); color: #fff;
  box-shadow: 0 10px 24px rgb(120 0 200 / 28%);
}
.pay-hero-main { display: grid; gap: 4px; min-width: 0; }
.pay-hero-main > small { color: rgb(255 255 255 / 82%); font-size: 12px; font-weight: 700; }
.pay-hero-amount {
  display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: #fff;
  font-size: 24px; font-weight: 800; text-align: start; overflow-wrap: anywhere;
}
.pay-hero-amount svg { width: 18px; height: 18px; flex: none; opacity: .85; }
.pay-hero-net { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: baseline; padding: 3px 10px; border-radius: 999px; background: rgb(255 255 255 / 18%); color: #fff; font-size: 12px; font-weight: 700; justify-self: start; }
.pay-hero-net .num { color: #b9ffcb; font-weight: 800; }
.timer-ring { display: grid; justify-items: center; gap: 6px; text-align: center; font-weight: 700; flex: none; }
.timer-ring > small { max-width: 120px; font-size: 11px; line-height: 1.4; }
.pay-hero .timer-ring > small { color: rgb(255 255 255 / 82%); }
.ring-box { position: relative; display: grid; place-items: center; width: 96px; height: 96px; }
.ring {
  --left: 1; --rc: #ffc93c;
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--rc) calc(var(--left) * 360deg), rgb(255 255 255 / 20%) 0);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%); mask: radial-gradient(circle, transparent 60%, #000 61%);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--rc) 55%, transparent));
}
.ring-box strong { position: relative; font-size: 22px; font-weight: 800; color: #fff; }
.timer-ring.hurry .ring { --rc: #ff5b5b; }
.timer-ring.expired .ring { background: rgb(255 255 255 / 25%); filter: none; }
.timer-ring.expired strong { color: #ffd1d1; }
.timer-ring.locked .ring { background: #4ade80; }
.timer-ring.locked strong { color: #fff; }

.pay-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; }
.pay-steps li { display: grid; gap: 4px; justify-items: center; color: var(--muted); font-size: 11px; font-weight: 700; }
.pay-steps li.current { color: var(--brand); }
@keyframes step-glow { 50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent); } }

.pay-important {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 16px;
  background: #fff4d6; color: #6b4300; border: 1px solid #f5c76a;
}
:root[data-theme="dark"] .pay-important { background: #3a2c08; color: #fde3a1; border-color: #7a5a14; }
.pay-important-ic { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: #f59e0b; color: #fff; }
.pay-important-ic svg { width: 17px; height: 17px; }
.pay-important strong { font-size: 14px; font-weight: 800; }
.pay-important ul { margin: 4px 0 0; padding-inline-start: 18px; display: grid; gap: 3px; font-size: 13px; line-height: 1.6; }
.address-box { display: grid; justify-items: center; gap: 14px; padding: 16px; border-radius: 16px; background: var(--surface); }
.address-copy {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px;
  background: var(--surface-2); color: var(--text); font-size: 13px; font-weight: 700; text-align: left; overflow-wrap: anywhere;
}
.address-copy span { flex: 1; min-width: 0; }
.address-copy svg { width: 18px; height: 18px; flex: none; color: var(--brand); }
.address-qr { width: 150px; height: 150px; padding: 6px; border-radius: 10px; background: #fff; }
.txid { border-radius: 22px; }
.complete-btn { background: #00b140; font-size: 16px; }
.cancel-pay { justify-self: center; color: var(--muted); }
.copy-field.coloured { border-color: var(--cc); background: color-mix(in srgb, var(--cc) 10%, var(--surface)); }
.copy-field.coloured strong { color: var(--cc); }

:root[data-theme="dark"] .copy-chip, :root[data-theme="dark"] .copy-field.coloured strong { color: color-mix(in srgb, var(--cc) 65%, #fff); }

.product-sheet { position: fixed; margin: auto; width: min(94vw, 460px); padding: 14px 14px 18px; border-radius: 24px; }
.product-sheet .sheet-grip { display: none; }
.sheet-close { position: absolute; top: 8px; inset-inline-end: 8px; z-index: 2; width: 38px; height: 38px; color: var(--muted); }
.sheet-close svg { width: 20px; height: 20px; }
.product-sheet-body { display: grid; gap: 12px; }
.product-sheet .buy-card { border: 0; box-shadow: none; padding: 6px 2px 0; }
.product-sheet .buy-head { padding-inline-end: 34px; }
.product-sheet .buy-banner { border-radius: 12px; }

.account-rows { gap: 8px; }
.proof-pick {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 1.5px dashed #c9b3dd;
  border-radius: 14px; background: var(--surface-2); color: var(--text); text-align: start;
}
.proof-pick > svg { width: 24px; height: 24px; flex: none; color: var(--brand); }
.proof-pick .grow { flex: 1; min-width: 0; display: grid; gap: 1px; }
.proof-pick strong { font-size: 13px; }
.proof-pick small { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.proof-act { flex: none; padding: 5px 14px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 13px; font-weight: 700; }
.proof-pick[disabled] { opacity: .55; }
.method-card .amount-field .input { font-size: 17px; }

.home-view { display: flex; flex-direction: column; min-height: calc(100dvh - var(--appbar-h) - var(--tabbar-h) - var(--safe-b) - 34px); }
.notice-slot:not(:empty) ~ .outlet .home-view { min-height: calc(100dvh - var(--appbar-h) - var(--tabbar-h) - var(--safe-b) - 82px); }
.home-view > .policy-links { margin-top: auto; padding-top: 12px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms; animation-iteration-count: 1; transition-duration: 1ms; }
}

.sheet .view-subtitle { white-space: pre-line; }
.agent-link { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px;
  background: linear-gradient(135deg, var(--brand-soft), var(--surface)); border: 1px solid var(--line); box-shadow: var(--shadow); }
.agent-link-text { display: grid; gap: 4px; flex: 1; min-width: 0; }
.agent-link-text small { color: var(--muted); font-weight: 700; font-size: 12px; }
.agent-link-text strong { font-size: 13px; overflow-wrap: anywhere; color: var(--brand-strong); }
.agent-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.agent-tools .search { flex: 1 1 260px; }
.agent-back-list { justify-self: start; }
.agent-date { text-align: start; cursor: pointer; }
.agent-profit-period { display: flex; flex-wrap: wrap; gap: 4px; font-size: 13px; color: var(--muted); }
.agent-profit-period b { color: var(--text, inherit); }
.agent-profit-period b.good { color: var(--good); }

.rate-list { gap: 10px; }
.rate-strip { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; background: var(--brand-soft); color: var(--brand-strong); font-size: 13px; font-weight: 700; }
.rate-strip svg { width: 18px; height: 18px; flex: none; }
.rate-strip b { margin-inline-start: auto; font-size: 14px; }

.buy-title { display: flex; align-items: flex-start; gap: 10px; }
.buy-title { align-items: center; }
.buy-title .buy-name { flex: 0 1 auto; min-width: 0; margin: 0; }
.fav-btn { display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 0;
  background: transparent; color: #e11d48; cursor: pointer; }
.fav-btn svg { width: 28px; height: 28px; }
.fav-btn.on svg { fill: currentColor; }

.player-name { margin: -4px 0 0; font-size: 13px; font-weight: 800; }
.player-name.good { color: var(--good); }
.player-name.bad { color: #e53935; }
.player-name.wait { color: var(--muted); font-weight: 600; }

.nf-box { position: relative; min-width: 0; }

body .field.nf.nf .nf-box :is(.input, .select, .picker-btn),
body .field.nf.nf .nf-box :is(.input, .select, .picker-btn):is(:hover, :focus, :focus-visible, [aria-expanded="true"]) {
  border-color: transparent; box-shadow: none;
}
.nf-outline {
  position: absolute; inset: -7px 0 0; margin: 0; padding: 0 var(--nf-pad, 18px);
  border: 1px solid var(--field-line, var(--line)); border-radius: 999px;
  pointer-events: none; min-width: 0; text-align: start; z-index: 1;
  transition: border-color 200ms var(--ease), border-width 200ms var(--ease);
}
.nf-outline > legend {
  float: none; width: auto; max-width: .01px; height: 14px; padding: 0; margin: 0;
  font-size: 12px; font-weight: 700; line-height: 14px; visibility: hidden; white-space: nowrap; overflow: hidden;
  transition: max-width 120ms var(--ease);
}
.nf-outline > legend > span { display: inline-block; padding: 0 5px; }
.field.nf.nf-up .nf-outline > legend { max-width: 100%; transition: max-width 200ms var(--ease) 40ms; }
.field.nf.nf-focus .nf-outline { border-color: var(--brand); border-width: 2px; }
.field.nf > .nf-box > .nf-label, .field.nf .nf-box > .nf-label {
  position: absolute; inset-inline-start: calc(var(--nf-pad, 18px) + 5px); top: 50%; z-index: 2;
  transform: translateY(-50%); max-width: calc(100% - 2 * var(--nf-pad, 18px) - 10px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none;
  font-size: 14px; font-weight: 600; color: var(--muted); line-height: 1.2; background: none;
  transition: top 180ms var(--ease), font-size 180ms var(--ease), color 180ms var(--ease);
}
.field.nf.nf-area > .nf-box > .nf-label { top: 22px; }
.field.nf.nf-up > .nf-box > .nf-label, .field.nf.nf-up .nf-box > .nf-label { top: 0; font-size: 12px; font-weight: 700; }
.field.nf.nf-focus > .nf-box > .nf-label, .field.nf.nf-focus .nf-box > .nf-label { color: var(--brand); }
.field.nf:not(.nf-up) .input::placeholder { color: transparent; }
.field.nf:not(.nf-up) .picker-btn.empty .picker-text { color: transparent; }
.field.nf .amount-field .suffix { z-index: 2; }
@media (prefers-reduced-motion: reduce) { .nf-outline, .nf-outline > legend, .field.nf .nf-label { transition: none; } }

.exec-strip {
  position: absolute; inset-inline: 0; bottom: 0; padding: 3px 6px; text-align: center;
  font-size: 11px; font-weight: 800; line-height: 1.5; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: rgb(110 110 125 / 88%);
}
.exec-strip.auto { background: rgb(0 150 70 / 90%); }
.exec-strip.manual { background: rgb(230 150 0 / 92%); color: #2e1c00; }
.exec-strip.unknown { font-size: 11px; white-space: normal; line-height: 1.3; }

.price-pill { position: relative; overflow: hidden; isolation: isolate; animation: price-glow 2.6s ease-in-out infinite; }
.price-pill::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / 38%) 50%, transparent 70%);
  transform: translateX(-120%); animation: price-shine 2.6s ease-in-out infinite;
}
@keyframes price-shine { 55%, 100% { transform: translateX(120%); } }
@keyframes price-glow { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand) 16%, transparent); } }
.buy-price small { color: #c99700; font-weight: 800; }
:root[data-theme="dark"] .buy-price small { color: #ffd34d; }

.view.buy-view { display: grid; gap: 12px; width: min(100% - 32px, 460px); margin: 16px auto; padding: 14px 14px 18px;
  border-radius: 24px; background: var(--surface); box-shadow: var(--shadow); }
.buy-view .buy-card { border: 0; box-shadow: none; padding: 6px 2px 0; background: transparent; }
.buy-view .buy-banner { border-radius: 12px; }

body{min-height:calc(100dvh / var(--zoom,1))}
.home-view{min-height:calc(100dvh / var(--zoom,1) - var(--appbar-h) - var(--tabbar-h) - var(--safe-b) - 34px)}

.cat-tiles { grid-template-columns: repeat(var(--cat-cols, 3), minmax(0, 1fr)); }
.product-tiles { grid-template-columns: repeat(var(--prod-cols, 3), minmax(0, 1fr)); }
@media (min-width: 640px) {
  .cat-tiles { grid-template-columns: repeat(calc(var(--cat-cols, 3) + 1), minmax(0, 1fr)); }
  .product-tiles { grid-template-columns: repeat(calc(var(--prod-cols, 3) + 1), minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .cat-tiles { grid-template-columns: repeat(calc(var(--cat-cols, 3) * 2), minmax(0, 1fr)); }
  .product-tiles { grid-template-columns: repeat(calc(var(--prod-cols, 3) * 2), minmax(0, 1fr)); }
}
html[data-cat-card="off"] .tiles > .tile:not(.product-tile),
html[data-prod-card="off"] .tiles > .product-tile { background: transparent; box-shadow: none; padding: 0 0 4px; }

.buy-head .grow .buy-price { justify-items: start; }
.buy-facts { display: grid; grid-template-columns: 1fr 1fr; border-radius: 14px; overflow: hidden;
  background: color-mix(in srgb, var(--brand) 5%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent); }
.buy-fact { display: grid; gap: 2px; padding: 10px 12px; align-content: start; }
.buy-fact + .buy-fact { border-inline-start: 1px solid color-mix(in srgb, var(--brand) 14%, transparent); }
.buy-fact small { color: var(--muted); font-size: 11.5px; font-weight: 700; }
.buy-fact b { font-size: 14px; font-weight: 800; }
.buy-fact span { color: var(--muted); font-size: 11.5px; font-weight: 700; }
.buy-fact.auto b { color: var(--good); }
.buy-fact.manual b { color: #b87400; }
:root[data-theme="dark"] .buy-fact.manual b { color: #ffc24a; }

.op-no { direction: ltr; unicode-bidi: isolate; font-size: 11.5px; font-weight: 800; color: var(--muted, currentColor); opacity: .85; font-variant-numeric: tabular-nums; }
.pay-bar summary .op-no { color: inherit; opacity: .8; }
.buy-head.v5 .buy-price{display:grid;justify-items:start;gap:2px;margin:0}
.buy-facts.v5{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0;padding:0;border:0;background:none}
.buy-fact.v5{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;border:1px solid var(--line);background:var(--surface,var(--panel));min-width:0}
.buy-fact.v5 .buy-fact-ic{flex:none;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand)}
.buy-fact.v5 .buy-fact-ic svg{width:19px;height:19px}
.buy-fact.v5.auto .buy-fact-ic{background:color-mix(in srgb,var(--ok,#079c60) 14%,transparent);color:var(--ok,#079c60)}
.buy-fact.v5.manual .buy-fact-ic{background:color-mix(in srgb,var(--warn,#b65a0c) 14%,transparent);color:var(--warn,#b65a0c)}
.buy-fact.v5 .buy-fact-txt{display:grid;gap:2px;min-width:0}
.buy-fact.v5 .buy-fact-txt small{font-size:11px;color:var(--muted);font-weight:700}
.buy-fact.v5 .buy-fact-txt b{font-size:13px;font-weight:800;line-height:1.35;overflow-wrap:anywhere}
.v6 .buy-title .buy-price{margin-inline-start:auto;justify-items:end}
.v6 .buy-tags{margin-top:8px}
.lang-pill{position:absolute;top:14px;inset-inline-end:14px;display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;border:0;border-radius:99px;background:linear-gradient(135deg,#0ea5e9,#2563eb);color:#fff;font-weight:800;font-size:13px}
.lang-pill svg{width:16px}

/* Owner 2026-11-02 (batch 1) */
.price-pill,.tile-price,.tile-old,.buy-price small,.buy-price s{font-variant-numeric:tabular-nums}
.input,.select,.picker-btn{height:max(var(--control-h),48px);font-size:15px}
.input.area{height:auto}
.field.nf{--field-line:color-mix(in srgb,var(--text) 24%,var(--surface))}
.field.nf .nf-label{font-size:14.5px}
form.stack,.card-fields{gap:20px}
.product-sheet .buy-head{padding-inline-end:30px}
.buy-head.v6 .buy-title{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 8px}
.buy-head.v6 .buy-title .buy-name{grid-column:1;font-size:18px}
.buy-head.v6 .buy-title .fav-btn{grid-column:2;grid-row:1}
.v6 .buy-title .buy-price{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0;justify-items:start}
.price-pill{font-size:16px;padding:8px 16px}
.buy-price small{font-size:13px}
.buy-facts.v5{margin-top:2px}
.export-btn{background:#107C41;color:#fff;font-weight:800}

/* Owner 2026-11-02 (batch 4): strong meaning colours like the admin panel; no double-tap zoom; one page head. */
:root:root:root{--good:#0FB56D;--warn:#F59E0B;--bad:#F0384F;--info:#2F5BFF;--violet:#7C4DFF;--cyan:#06A7E8;--grey:#7A8499}
html,body{touch-action:manipulation}
.pg .card{border:1.5px solid color-mix(in srgb,var(--brand) 14%,var(--surface));box-shadow:0 10px 24px -16px rgb(60 0 110/45%)}
.buy-head.v6 .buy-title{display:flex;align-items:center;gap:8px}.buy-head.v6 .buy-title .buy-name{flex:1 1 auto;min-width:0}.v6 .buy-title .buy-price{display:grid;justify-items:center;gap:2px;flex:none;margin:0;margin-inline-start:auto}
/* Owner 2026-11-02: one list look on every page */
.note-row,.order-card,.ledger-row,.rate-row,.row-card,.transfer-row,.pay-bar,.agent-customer{border-radius:var(--radius-l)}
.row-card .grow strong {font-size:14px;font-weight:800}
.row-card .grow small {font-size:11.5px}
.view-wait{padding-top:0;opacity:0;animation:wait-in .2s .3s forwards}.wait-card{height:76px;border-radius:var(--radius-l)}
.view:has(.skeleton,.state)+.view-wait{display:none}
@keyframes wait-in{to{opacity:1}}
input.input.is-invalid,textarea.input.is-invalid,.field.is-invalid .nf-outline,.field.nf.nf-focus.is-invalid .nf-outline{border-color:var(--bad)}.field.is-invalid .nf-label,.field.nf.is-invalid.nf-up .nf-box>.nf-label{color:var(--bad)}
/* readable strong colours (owner 2026-11-02): same hues, text stays clear */
.pay-bar.good>summary{background:#0D9F60}.pay-bar.warn>summary{color:#2e1c00}
.tile-price{color:#0D9F60}.badge.warn{color:#B26B00}:root[data-theme="dark"] .badge.warn{color:#FFC24A}:root[data-theme="dark"] .tile-price{color:var(--good)}
/* one button size: main actions 46, the rest 42 (owner 2026-11-02) */
.btn.block,.buy-actions .btn,.request-btn,.complete-btn{min-height:46px}