/* TN Deed Assistant — web portal: shared design system + the signed-in console.
 *
 * Style: Trust & Authority. Deep navy for authority, a restrained gold for the few things that
 * deserve emphasis (the featured offer, the active place, a premium mark), generous white space, and
 * a serif display voice for headings — the register of a deed, not of a gadget.
 *
 * Colours are semantic tokens only — no raw hex below the token blocks, so light and dark stay in
 * step. Every text/background pair in the token blocks is chosen for WCAG AA (4.5:1 for body text).
 * No build step and NO EXTERNAL FONTS: the portal must work on a machine with no internet, so both
 * typefaces are system stacks — a book serif (Palatino / Iowan / Georgia) and the platform UI sans.
 */

/* ============================================================ tokens */
:root {
  color-scheme: light;

  /* brand */
  --primary:        #16325C;   /* deep navy — authority; primary actions, the console rail */
  --primary-hover:  #0F2548;
  --primary-2:      #214A86;   /* the lighter end of navy gradients */
  --on-primary:     #FFFFFF;
  --secondary:      #1D4ED8;   /* links, focus, selected state — 6.7:1 on white */
  --accent:         #047857;   /* paid / positive — 5.4:1 on white */
  --danger:         #B91C1C;
  --warning:        #92400E;

  /* gold — used sparingly: featured offer, active rail, premium marks */
  --gold:           #B8892C;   /* rules, borders, icon fills */
  --gold-ink:       #7A5A12;   /* gold as TEXT on light surfaces — 6.6:1 on white */
  --gold-soft:      #FBF5E4;
  --gold-line:      #E8D5A4;
  --on-gold:        #1E1604;   /* text on a gold fill — 9:1 */

  /* surfaces */
  --bg:             #F6F7FB;
  --surface:        #FFFFFF;
  --surface-2:      #F0F3F8;
  --surface-3:      #E7ECF4;
  --border:         #E2E7EF;
  --border-strong:  #C9D2DF;

  /* text — all pairs ≥4.5:1 on --surface and --bg */
  --fg:             #0B1B33;
  --fg-muted:       #45536C;
  --fg-subtle:      #5B6881;

  /* tonal backgrounds for status */
  --accent-bg:      #ECFDF5;
  --danger-bg:      #FEF2F2;
  --warning-bg:     #FFF8EB;
  --info-bg:        #EEF3FF;

  /* the dark band (hero, final call to action, wallet card) — the same in both themes */
  --ink-bg:         #0B1B33;
  --ink-bg-2:       #13305A;
  --ink-fg:         #F3F6FB;
  --ink-muted:      #B7C4D9;   /* 8.6:1 on --ink-bg */

  /* scale */
  --r-sm: 6px; --r: 10px; --r-lg: 16px; --r-xl: 22px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px;

  /* navy-tinted elevation: 1 = resting card, 2 = raised / hover, 3 = overlay */
  --shadow-1: 0 1px 2px rgba(11,27,51,.05), 0 1px 3px rgba(11,27,51,.04);
  --shadow-2: 0 10px 24px -8px rgba(11,27,51,.14), 0 2px 6px rgba(11,27,51,.05);
  --shadow-3: 0 28px 56px -16px rgba(11,27,51,.30), 0 4px 12px rgba(11,27,51,.08);

  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', 'URW Palladio L', Georgia, serif;
  --sans: 'Inter', 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, 'Nirmala UI', sans-serif;
  --mono: 'Cascadia Mono', 'Fira Code', Consolas, 'SF Mono', ui-monospace, monospace;

  --ease: cubic-bezier(.22,.9,.28,1);
  --z-drawer: 40; --z-nav: 30; --z-toast: 100;
}

[data-theme="dark"] {
  color-scheme: dark;
  --primary:        #8DB0EE;
  --primary-hover:  #A5C2F4;
  --primary-2:      #6E97DE;
  --on-primary:     #081528;
  --secondary:      #93B8F7;
  --accent:         #34D399;
  --danger:         #F87171;
  --warning:        #FBBF24;

  --gold:           #D6AE5B;
  --gold-ink:       #E7C77E;
  --gold-soft:      #221B0C;
  --gold-line:      #5C4A22;
  --on-gold:        #1E1604;

  --bg:             #080F1D;
  --surface:        #0F192B;
  --surface-2:      #152137;
  --surface-3:      #1C2A44;
  --border:         #233150;
  --border-strong:  #34466B;

  --fg:             #EAF0FA;
  --fg-muted:       #AAB7CD;
  --fg-subtle:      #8E9CB5;

  --accent-bg:      #062A20;
  --danger-bg:      #2C1414;
  --warning-bg:     #2A1F06;
  --info-bg:        #0F1F3A;

  --ink-bg:         #050B17;
  --ink-bg-2:       #0E2244;

  --shadow-1: 0 1px 2px rgba(0,0,0,.45);
  --shadow-2: 0 10px 24px -8px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.35);
  --shadow-3: 0 28px 56px -16px rgba(0,0,0,.75);
}

*, *::before, *::after { box-sizing: border-box; }

/* The [hidden] attribute is how this app shows and hides whole views. The UA stylesheet's
 * `[hidden] { display: none }` loses to ANY author `display` rule, so .login and .shell — both
 * `display: grid` — stayed on screen together. Author-level and !important so it always wins. */
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0; font-weight: 650; line-height: 1.25; letter-spacing: -.005em; }
p { text-wrap: pretty; }
a { color: var(--secondary); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
::selection { background: color-mix(in srgb, var(--gold) 35%, transparent); }

/* The display voice: page titles and section heads. */
.serif { font-family: var(--serif); font-weight: 600; letter-spacing: -.01em; }

/* Numbers must never jitter as values change. */
.num, td.num, .kpi__value, .metric__value { font-variant-numeric: tabular-nums; }
code, .mono { font-family: var(--mono); font-size: .92em; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.skip-link {
  position: absolute; left: -9999px; top: var(--sp-2);
  background: var(--surface); padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r); box-shadow: var(--shadow-2); z-index: 200;
}
.skip-link:focus { left: var(--sp-2); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================ icons */
.icon {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}
.icon--sm { width: 15px; height: 15px; }
.icon--lg { width: 22px; height: 22px; }
[data-theme="light"] .icon--dark, [data-theme="dark"] .icon--light { display: none; }

/* THE MARK — the app's own drawing, the same file the desktop app and its installers carry.
   It arrives on its own white card, so the tile is the picture: the radius clips it, the shadow
   lifts it, and nothing is drawn behind or over it. One class, four places (site header and footer,
   the console appbar, the sign-in aside). */
.logo {
  display: block; width: 34px; height: 34px; flex: none;
  border-radius: 10px; object-fit: cover;
  box-shadow: 0 2px 6px rgba(11,27,51,.25), 0 0 0 1px rgba(11,27,51,.06);
  transition: transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s cubic-bezier(.2,.8,.3,1);
}
a:hover > .logo, .site-header__brand:hover .logo, .appbar__brand:hover .logo {
  transform: translateY(-1px); box-shadow: 0 6px 16px -6px rgba(11,27,51,.45), 0 0 0 1px rgba(11,27,51,.08);
}
/* On the navy bars the card needs a rim of light rather than a dark one. */
.appbar .logo, .auth-aside__brand .logo, [data-theme="dark"] .logo {
  box-shadow: 0 2px 8px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.22);
}
@media (prefers-reduced-motion: reduce) { .logo { transition: none; } }

/* ============================================================ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 40px; padding: 0 var(--sp-5);
  border: 1px solid transparent; border-radius: var(--r);
  font: inherit; font-weight: 600; font-size: 14px; letter-spacing: .005em;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .2s ease, transform .12s ease;
}
.btn .icon { width: 17px; height: 17px; }
.btn--primary {
  background: linear-gradient(180deg, var(--primary-2), var(--primary));
  color: var(--on-primary);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 1px 2px rgba(11,27,51,.2);
}
.btn--primary:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--primary), var(--primary-hover));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 18px -6px color-mix(in srgb, var(--primary) 55%, transparent);
}
[data-theme="dark"] .btn--primary { background: var(--primary); box-shadow: none; }
[data-theme="dark"] .btn--primary:hover:not(:disabled) { background: var(--primary-hover); }
/* Gold is for the one call that matters most on a dark band. */
.btn--gold {
  background: linear-gradient(180deg, #E6C675, #C99B3C);
  color: var(--on-gold);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 2px rgba(0,0,0,.25);
}
.btn--gold:hover:not(:disabled) { background: linear-gradient(180deg, #EDD08A, #D1A646); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 10px 22px -8px rgba(201,155,60,.6); }
.btn--default { background: var(--surface); color: var(--fg); border-color: var(--border-strong); box-shadow: var(--shadow-1); }
.btn--default:hover:not(:disabled) { background: var(--surface-2); border-color: color-mix(in srgb, var(--primary) 30%, var(--border-strong)); }
.btn--ghost { background: transparent; color: var(--fg-muted); }
.btn--ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--fg); }
/* Outline on a dark band. */
.btn--light { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.28); }
.btn--light:hover:not(:disabled) { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); }
.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover:not(:disabled) { filter: brightness(.93); }
.btn--sm { min-height: 32px; padding: 0 var(--sp-3); font-size: 12.5px; border-radius: 8px; }
.btn--lg { min-height: 48px; padding: 0 var(--sp-6); font-size: 15px; border-radius: 12px; }
.btn--block { width: 100%; }
.btn:active:not(:disabled) { transform: scale(.98); }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

.icon-btn {
  display: grid; place-items: center;
  width: 38px; height: 38px; flex: none;
  background: transparent; border: 0; border-radius: var(--r);
  color: var(--fg-muted); cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}
.icon-btn:hover { background: var(--surface-2); color: var(--fg); }

/* ============================================================ forms */
.field { display: grid; gap: 6px; margin-bottom: var(--sp-4); }
.field > label { font-size: 13px; font-weight: 600; color: var(--fg); }
.field__help { font-size: 12.5px; color: var(--fg-subtle); margin: 0; line-height: 1.5; }

/* Match every text-like input rather than an explicit type list — `tel` was missing from that list and
 * the phone field silently fell back to the browser default, 21px tall against 38px everywhere else. */
input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]),
select, textarea {
  width: 100%; min-height: 42px; padding: var(--sp-2) var(--sp-3);
  font: inherit; font-size: 14.5px; color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--r);
  box-shadow: inset 0 1px 1px rgba(11,27,51,.03);
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
input:not([type="radio"]):not([type="checkbox"]):hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--primary) 35%, var(--border-strong)); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--secondary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--secondary) 16%, transparent);
}
input:disabled, select:disabled, textarea:disabled { background: var(--surface-2); color: var(--fg-subtle); cursor: not-allowed; }
input::placeholder, textarea::placeholder { color: var(--fg-subtle); opacity: .85; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); width: 16px; height: 16px; }

/* ============================================================ sign in (legacy console card) */
.login { display: grid; place-items: center; min-height: 100dvh; padding: var(--sp-4); }
.login__card {
  width: 100%; max-width: 400px; padding: var(--sp-6);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-3);
}
.login__brand { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.login__brand h1 { font-size: 18px; font-family: var(--serif); }
.login__brand p { margin: 0; font-size: 12.5px; color: var(--fg-subtle); }
.login__note { margin: var(--sp-4) 0 0; font-size: 12px; color: var(--fg-subtle); line-height: 1.5; }

/* ============================================================ shell
   The console is one horizontal frame: the brand band across the top (the mark, the balance, the
   account menu) with the sections as tabs along its lower edge, then the page. Nothing runs down the
   side, so a phone keeps its whole width for the page itself. */
.shell {
  display: flex; flex-direction: column; min-height: 100dvh;
  background:
    radial-gradient(1100px 280px at 50% -60px, color-mix(in srgb, var(--primary) 9%, transparent), transparent 70%),
    var(--bg);
}

.appbar {
  position: sticky; top: 0; z-index: var(--z-nav);
  color: #E8EEF6;
  background:
    radial-gradient(60% 140% at 0% 0%, rgba(214,174,91,.14), transparent 55%),
    linear-gradient(120deg, #16325C 0%, #0F2548 45%, #0B1B33 100%);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.07);
  transition: box-shadow .25s ease;
}
/* a hairline of gold where the band meets the page */
.appbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(214,174,91,.55) 20%, rgba(214,174,91,.55) 80%, transparent);
}
.appbar.is-scrolled { box-shadow: inset 0 -1px 0 rgba(255,255,255,.07), 0 12px 28px -14px rgba(11,27,51,.55); }
[data-theme="dark"] .appbar {
  background:
    radial-gradient(60% 140% at 0% 0%, rgba(214,174,91,.10), transparent 55%),
    linear-gradient(120deg, #0E1F3B 0%, #0A1629 55%, #060D1A 100%);
}

.appbar__row {
  display: flex; align-items: center; gap: var(--sp-3);
  max-width: 1280px; margin: 0 auto; min-height: 62px; padding: var(--sp-2) var(--sp-6);
}
.appbar__brand { display: flex; align-items: center; gap: var(--sp-3); color: #fff; text-decoration: none; min-width: 0; }
.appbar__name { font-family: var(--serif); font-weight: 600; font-size: 17px; line-height: 1.15; letter-spacing: .005em; white-space: nowrap; }
.appbar__name span {
  display: block; font-family: var(--sans); font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #E3C77F;
}
.appbar__actions { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
.appbar .icon-btn { color: rgba(232,238,246,.8); }
.appbar .icon-btn:hover { background: rgba(255,255,255,.1); color: #fff; }
.appbar .pill { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: #D7E0EE; }
.appbar .pill--ok { color: #7EE2B8; }
.appbar .pill--down { color: #FCA5A5; }

/* The balance, always in reach — and a shortcut to buying more. */
.coin-chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 38px; padding: 0 14px 0 5px; border-radius: 999px;
  color: #fff; text-decoration: none; font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,.08); border: 1px solid rgba(214,174,91,.4);
  transition: background-color .18s ease, border-color .18s ease, transform .18s var(--ease);
}
.coin-chip:hover { background: rgba(255,255,255,.14); border-color: rgba(214,174,91,.75); transform: translateY(-1px); }
.coin-chip__coin {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--on-gold);
  background: radial-gradient(circle at 35% 30%, #F4DC9A, #C99B3C 70%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35);
}
.coin-chip__coin .icon { width: 16px; height: 16px; }
.coin-chip__value { font-weight: 750; font-size: 15px; }
.coin-chip__unit { font-size: 12.5px; color: #C9D4E5; }
@keyframes chip-glow {
  0%   { box-shadow: 0 0 0 0 rgba(214,174,91,.0); }
  30%  { box-shadow: 0 0 0 6px rgba(214,174,91,.28); }
  100% { box-shadow: 0 0 0 12px rgba(214,174,91,0); }
}
.coin-chip--changed { animation: chip-glow .9s var(--ease); }

/* Account: initials in a gold seal, the name beside it, a menu below. */
.account { position: relative; }
.account__btn {
  display: flex; align-items: center; gap: 10px;
  min-height: 42px; padding: 3px 10px 3px 3px; border-radius: 999px;
  background: transparent; border: 1px solid transparent; color: #fff; font: inherit; cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease;
}
.account__btn:hover, .account__btn[aria-expanded="true"] { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); }
.avatar {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%;
  font-size: 12.5px; font-weight: 750; letter-spacing: .04em; color: #0B1B33;
  background: linear-gradient(145deg, #F4DC9A, #C99B3C);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.4);
}
.avatar--lg { width: 42px; height: 42px; font-size: 14px; }
.account__label { display: grid; text-align: left; line-height: 1.2; max-width: 180px; }
.account__label > span:first-child { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account__role { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #E3C77F; }
.account__chev { color: rgba(232,238,246,.7); transition: transform .22s var(--ease); }
.account__btn[aria-expanded="true"] .account__chev { transform: rotate(180deg); }

.account__menu {
  position: absolute; right: 0; top: calc(100% + 10px); width: 272px; z-index: 5;
  padding: 6px; color: var(--fg);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow-3);
  transform-origin: top right; animation: menu-in .18s var(--ease);
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px) scale(.96); } }
.account__who {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 10px 10px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--border);
}
.account__who > span:last-child { display: grid; min-width: 0; line-height: 1.3; }
.account__who strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account__who strong + span { font-size: 12.5px; color: var(--fg-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account__item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 42px; padding: 0 10px; border-radius: 9px;
  color: var(--fg); text-decoration: none; font: inherit; font-size: 14px; font-weight: 550;
  background: none; border: 0; cursor: pointer; text-align: left;
  transition: background-color .14s ease, color .14s ease;
}
.account__item .icon { color: var(--fg-muted); }
.account__item:hover, .account__item:focus-visible { background: var(--surface-2); outline: none; }
/* Signing out is set apart from going somewhere. */
.account__item--out { margin-top: 4px; border-top: 1px solid var(--border); border-radius: 0 0 9px 9px; }
.account__item--out:hover, .account__item--out:focus-visible { color: var(--danger); background: var(--danger-bg); }
.account__item--out:hover .icon { color: var(--danger); }

/* Sections as tabs along the band's lower edge. The strip scrolls sideways when the tabs outrun the
   width; a gold marker slides to the current one. */
.tabbar { max-width: 1280px; margin: 0 auto; padding: 0 calc(var(--sp-6) - var(--sp-3)); }   /* tab text lines up with the bar above */
.tabs {
  position: relative; display: flex; align-items: stretch; gap: 2px;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative; display: inline-flex; align-items: center; gap: 8px; flex: none;
  min-height: 46px; padding: 0 var(--sp-3);
  color: rgba(232,238,246,.72); text-decoration: none; white-space: nowrap;
  font-size: 14px; font-weight: 550; border-radius: 10px 10px 0 0;
  transition: color .16s ease, background-color .16s ease;
}
.tab .icon { width: 17px; height: 17px; opacity: .85; transition: color .16s ease; }
.tab:hover { color: #fff; background: rgba(255,255,255,.06); }
.tab[aria-current="page"] { color: #fff; font-weight: 650; }
.tab[aria-current="page"] .icon { opacity: 1; color: #F1D58E; }
.tab:focus-visible { outline-offset: -3px; }
/* Many tabs (an administrator's) drop their icons to stay on one line at desktop widths. */
.tabs--dense .tab .icon { display: none; }
.tabs__sep { flex: none; width: 1px; margin: 12px 6px; background: rgba(255,255,255,.16); }
.tabs__ink {
  position: absolute; left: 0; bottom: 0; width: 100px; height: 3px; pointer-events: none;
  border-radius: 3px 3px 0 0; background: linear-gradient(90deg, #F1D58E, #C99B3C);
  transform-origin: left center; opacity: 0;
  transition: transform .34s cubic-bezier(.32,.72,0,1), opacity .2s ease;
}
.tabs__ink--instant { transition: none; }

/* The page's own title, in the display voice, with what the page is for beneath it. */
.page-head { width: 100%; max-width: 1280px; margin: 0 auto; padding: var(--sp-6) var(--sp-6) var(--sp-1); }
.page-head__title { font-family: var(--serif); font-weight: 600; font-size: 30px; letter-spacing: -.015em; line-height: 1.15; }
.page-head__sub { margin: 6px 0 0; color: var(--fg-muted); font-size: 14.5px; }
.page-head__sub:empty { display: none; }
.page-head.is-new .page-head__title { animation: rise .32s var(--ease) both; }
.page-head.is-new .page-head__sub { animation: rise .32s var(--ease) .05s both; }

.main { flex: 1; width: 100%; max-width: 1280px; margin: 0 auto; padding: var(--sp-5) var(--sp-6) var(--sp-7); min-width: 0; }
.main:focus { outline: none; }

/* ============================================================ layout helpers */
.stack { display: grid; gap: var(--sp-5); }
.row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.row--end { justify-content: flex-end; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--fg-muted); }
.subtle { color: var(--fg-subtle); font-size: 12.5px; }
/* Read aloud, not shown — e.g. "was" before a struck-through list price. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* The offer editor's worked-out price: list, discount, price, coins, per coin. */
.offer-price { margin: 4px 0 var(--sp-4); padding: var(--sp-4); border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--border); }
.offer-price__head { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: var(--sp-3); }
.offer-price .defs__row { grid-template-columns: 110px 1fr; }
.offer-price dd { font-variant-numeric: tabular-nums; }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1);
}
.card__head {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border);
}
.card__head h2 { font-size: 15.5px; font-weight: 650; }
.card__body { padding: var(--sp-5); }
.card__body--flush { padding: 0; }

/* ============================================================ KPIs */
.kpis { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.kpi {
  position: relative; overflow: hidden;
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1);
}
.kpi::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--primary-2), var(--primary));
  opacity: .9;
}
.kpi__label {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 11.5px; font-weight: 650; color: var(--fg-muted);
  text-transform: uppercase; letter-spacing: .08em;
}
.kpi__value { font-size: 30px; font-weight: 700; line-height: 1.1; margin-top: var(--sp-3); letter-spacing: -.02em; }
.kpi__sub { font-size: 12.5px; color: var(--fg-subtle); margin-top: 4px; }
.kpi--accent::before { background: var(--accent); }
.kpi--accent .kpi__value { color: var(--accent); }
.kpi--danger::before { background: var(--danger); }
.kpi--danger .kpi__value { color: var(--danger); }

/* ============================================================ tables */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
thead th {
  position: sticky; top: 0;
  padding: var(--sp-3) var(--sp-4);
  text-align: left; white-space: nowrap;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-muted); background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
tbody td { padding: 14px var(--sp-4); border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background-color .12s ease; }
tbody tr:hover { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
tbody tr[data-clickable] { cursor: pointer; }
td.num, th.num { text-align: right; }
.cell-strong { font-weight: 600; }

/* ============================================================ status */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 650; white-space: nowrap; letter-spacing: .01em;
  border: 1px solid transparent;
}
/* Every status carries a word, never colour alone. */
.badge--ok      { background: var(--accent-bg);  color: var(--accent);  border-color: color-mix(in srgb, var(--accent) 28%, transparent); }
.badge--danger  { background: var(--danger-bg);  color: var(--danger);  border-color: color-mix(in srgb, var(--danger) 28%, transparent); }
.badge--warn    { background: var(--warning-bg); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 28%, transparent); }
.badge--neutral { background: var(--surface-2);  color: var(--fg-muted); border-color: var(--border); }
.badge--gold    { background: var(--gold-soft);  color: var(--gold-ink); border-color: var(--gold-line); }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px var(--sp-3); border-radius: 999px;
  font-size: 11.5px; font-weight: 650;
  background: var(--surface-2); color: var(--fg-muted); border: 1px solid var(--border);
}
.pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .85; }
.pill--ok   { background: var(--accent-bg); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 28%, transparent); }
.pill--down { background: var(--danger-bg); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 28%, transparent); }

.alert {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r);
  font-size: 13.5px; line-height: 1.55; margin: 0;
  border: 1px solid transparent;
}
.alert .icon { margin-top: 1px; }
.alert--error { background: var(--danger-bg); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 28%, transparent); }
.alert--warn  { background: var(--warning-bg); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 28%, transparent); }
.alert--info  { background: var(--info-bg); color: var(--secondary); border-color: color-mix(in srgb, var(--secondary) 22%, transparent); }

/* ============================================================ empty / loading */
.empty { display: grid; gap: var(--sp-2); place-items: center; padding: var(--sp-7) var(--sp-5); text-align: center; }
.empty h3 { font-family: var(--serif); font-size: 18px; font-weight: 600; }
.empty p { margin: 0; color: var(--fg-subtle); font-size: 13.5px; max-width: 44ch; }
.empty .btn { margin-top: var(--sp-3); }

/* Skeletons reserve the row's real height, so nothing shifts when data lands. */
.skeleton { border-radius: var(--r-sm); background: var(--surface-2); animation: pulse 1.4s ease-in-out infinite; }
.skeleton--row { height: 44px; margin-bottom: var(--sp-2); }
.skeleton--kpi { height: 104px; border-radius: var(--r-lg); }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .55 } }

/* ============================================================ charts */
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart__bar { fill: var(--primary-2); transition: fill .16s ease; }
.chart__bar:hover { fill: var(--gold); }
.chart__grid { stroke: var(--border); stroke-width: 1; }
.chart__axis { fill: var(--fg-subtle); font-size: 10px; font-family: var(--mono); }
.chart-legend { display: flex; gap: var(--sp-4); flex-wrap: wrap; font-size: 12px; color: var(--fg-muted); margin-top: var(--sp-3); }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* Horizontal breakdown bars — clearer than a pie beyond ~5 categories. */
.bars { display: grid; gap: var(--sp-3); }
.bars__row { display: grid; grid-template-columns: 140px 1fr 52px; gap: var(--sp-3); align-items: center; font-size: 13px; }
.bars__track { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bars__fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primary-2), var(--primary)); }

/* ============================================================ drawer */
.drawer { position: fixed; inset: 0; z-index: var(--z-drawer); }
.drawer__scrim { position: absolute; inset: 0; background: rgba(8,15,29,.55); backdrop-filter: blur(2px); animation: fade .18s ease-out; }
.drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(580px, 100%);
  display: flex; flex-direction: column;
  background: var(--bg); box-shadow: var(--shadow-3);
  border-left: 1px solid var(--border);
  animation: slide-in .24s cubic-bezier(.32,.72,0,1);
}
@keyframes fade { from { opacity: 0 } }
@keyframes slide-in { from { transform: translateX(28px); opacity: .4 } }
.drawer__head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.drawer__head h2 { font-family: var(--serif); font-size: 19px; font-weight: 600; flex: 1; min-width: 0; }
.drawer__body { padding: var(--sp-5); overflow-y: auto; flex: 1; display: grid; gap: var(--sp-5); align-content: start; }

.defs { display: grid; gap: var(--sp-3); margin: 0; }
.defs__row { display: grid; grid-template-columns: 140px 1fr; gap: var(--sp-3); font-size: 13.5px; align-items: baseline; }
.defs__row dt { color: var(--fg-muted); }
.defs__row dd { margin: 0; word-break: break-word; }

/* ============================================================ toasts */
.toasts {
  position: fixed; right: var(--sp-5); bottom: var(--sp-5);
  display: grid; gap: var(--sp-2); z-index: var(--z-toast);
  max-width: min(400px, calc(100vw - 32px));
}
.toast {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--fg-muted);
  border-radius: var(--r); box-shadow: var(--shadow-3);
  font-size: 13.5px; animation: toast-in .22s var(--ease);
}
.toast--ok    { border-left-color: var(--accent); }
.toast--error { border-left-color: var(--danger); }
@keyframes toast-in { from { transform: translateY(10px); opacity: 0 } }

/* ============================================================ uploads (administrators)
   Publishing the desktop app and the portal templates: a card with a seal-like badge, a drop zone that
   answers a dragged file, a progress bar that shows the real bytes sent, and a quiet check when done. */
.card--upload { position: relative; overflow: hidden; }
.card--upload::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--primary-2), var(--gold) 60%, var(--primary-2));
  background-size: 200% 100%; opacity: .9;
}
.card--upload:hover::before { animation: sheen 2.4s linear infinite; }
.card__badge {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px;
  color: #F1D58E; background: linear-gradient(145deg, #214A86, #0B1B33);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 6px 14px -6px rgba(11,27,51,.5);
}
.card__badge .icon { width: 17px; height: 17px; }
.card__aside { margin-left: auto; }

.upload-grid { display: grid; gap: 0 var(--sp-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.upload-grid--3 { grid-template-columns: minmax(0, 120px) minmax(0, 130px) minmax(0, 1fr); }
.upload-grid--4 { grid-template-columns: minmax(0, 110px) minmax(0, 130px) minmax(0, 120px) minmax(0, 1fr); }
.upload-acts { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-4); }
.upload-acts .field__help { flex: 1; min-width: 200px; }

/* The drop zone — a real file input under a label, so a click, a keypress or a drop all work. */
.drop {
  position: relative; display: grid; justify-items: center; gap: 4px; text-align: center;
  padding: var(--sp-5) var(--sp-4); border-radius: 14px; cursor: pointer;
  border: 1.5px dashed var(--border-strong);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  transition: border-color .18s ease, background-color .18s ease, box-shadow .22s ease, transform .22s var(--ease);
}
.drop:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border-strong)); }
.drop:focus-within { outline: 2px solid var(--secondary); outline-offset: 2px; }
.drop__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.drop__icon {
  display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 4px; border-radius: 50%;
  color: var(--gold-ink); background: var(--gold-soft); border: 1px solid var(--gold-line);
  transition: transform .25s var(--ease);
}
.drop__title { font-weight: 650; font-size: 14px; }
.drop__hint { font-size: 12.5px; color: var(--fg-subtle); max-width: 52ch; }
@keyframes drop-bob { 50% { transform: translateY(-5px); } }
.drop.is-over {
  border-style: solid; border-color: var(--gold); background: var(--gold-soft); transform: scale(1.012);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--gold) 16%, transparent);
}
.drop.is-over .drop__icon { animation: drop-bob .9s var(--ease) infinite; }
.drop.has-file { border-style: solid; border-color: color-mix(in srgb, var(--accent) 45%, var(--border-strong)); }
.drop.has-file .drop__icon { color: var(--accent); background: var(--accent-bg); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.drop__file {
  display: flex; align-items: center; gap: 10px; margin-top: var(--sp-2); max-width: 100%;
  padding: 8px 12px; border-radius: 10px; text-align: left;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-1);
  animation: rise .28s var(--ease);
}
.drop__file .icon { color: var(--primary); }
.drop__file span { display: grid; min-width: 0; line-height: 1.3; }
.drop__file strong { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drop__file small { font-size: 12px; color: var(--fg-subtle); }
.drop__file em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 650; color: var(--secondary); }

/* Progress: the real share of bytes sent; stripes drift while it is still going. */
.progress { display: grid; gap: 6px; margin-top: var(--sp-4); }
.progress__track { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; border: 1px solid var(--border); }
.progress__fill {
  display: block; height: 100%; transform-origin: left center; transform: scaleX(0);
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.22) 0 8px, transparent 8px 16px),
    linear-gradient(90deg, var(--primary-2), var(--gold));
  background-size: 32px 100%, 100% 100%;
  transition: transform .2s ease-out, background-color .3s ease;
  animation: stripes .8s linear infinite;
}
@keyframes stripes { to { background-position: 32px 0, 0 0; } }
.progress__text { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.progress--done .progress__fill { animation: none; background: var(--accent); }
.progress--done .progress__text { color: var(--accent); font-weight: 600; }
.check-draw { width: 16px; height: 16px; stroke-width: 2.4; }
.check-draw path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: draw .42s var(--ease) .08s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* What is on file for the chosen document type, and where the picked file will land. */
.tpl-now { margin-top: var(--sp-4); display: grid; gap: var(--sp-3); }
.tpl-now:empty { display: none; }
.tpl-now__head { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted); }
.tpl-now__none { margin: 0; font-size: 13px; color: var(--fg-subtle); }
.tpl-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tpl-chip {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 11px; border-radius: 999px;
  font-size: 12.5px; background: var(--surface-2); border: 1px solid var(--border); color: var(--fg-muted);
  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
.tpl-chip b { color: var(--fg); font-weight: 650; }
.tpl-chip em { font-style: normal; color: var(--fg-subtle); font-size: 11.5px; }
/* the kind chosen is the kind an upload would replace */
.tpl-chip.is-kind { background: var(--gold-soft); border-color: var(--gold-line); color: var(--gold-ink); }
.tpl-now.is-shown .tpl-chip { animation: rise .3s var(--ease) both; animation-delay: calc(var(--i, 0) * 35ms); }
.tpl-now__dest, .tpl-now__warn {
  display: flex; align-items: flex-start; gap: var(--sp-2); padding: 10px 12px; border-radius: var(--r);
  font-size: 13px; line-height: 1.5; animation: rise .28s var(--ease);
}
.tpl-now__dest { background: var(--accent-bg); color: var(--fg); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); }
.tpl-now__dest .icon { color: var(--accent); margin-top: 2px; }
.tpl-now__dest strong { overflow-wrap: anywhere; }
.tpl-now__warn { background: var(--warning-bg); color: var(--warning); border: 1px solid color-mix(in srgb, var(--warning) 28%, transparent); }
.tpl-now__warn .icon { margin-top: 2px; }
#tpl-error, #rel-error { margin-top: var(--sp-3); }

@media (max-width: 640px) {
  .upload-grid, .upload-grid--3, .upload-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .card__aside { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .card--upload:hover::before, .drop.is-over .drop__icon, .progress__fill, .drop__file,
  .tpl-now.is-shown .tpl-chip, .tpl-now__dest, .tpl-now__warn { animation: none !important; }
  .check-draw path { animation: none; stroke-dashoffset: 0; }
  .drop.is-over { transform: none; }
}

/* ============================================================ responsive */
@media (max-width: 1023px) {
  .appbar__row { padding: var(--sp-2) var(--sp-4); }
  .tabbar { padding: 0; }
  /* the strip fades at its edges so a tab cut off by the width reads as "more this way" */
  .tabs { mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); padding: 0 4px; }
  .page-head { padding: var(--sp-5) var(--sp-4) 0; }
  .main { padding: var(--sp-4) var(--sp-4) var(--sp-7); }
  .account__label { display: none; }
  .account__btn { padding: 3px; }
  .account__chev { display: none; }
}
@media (max-width: 640px) {
  .appbar__row { min-height: 56px; gap: var(--sp-2); }
  .appbar__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .appbar .pill { display: none; }
  .tab { min-height: 44px; padding: 0 var(--sp-3); font-size: 13.5px; }
  .page-head__title { font-size: 24px; }
  .page-head__sub { font-size: 13.5px; }
  .defs__row { grid-template-columns: 1fr; gap: 2px; }
  .bars__row { grid-template-columns: 96px 1fr 40px; }
  .toasts { right: var(--sp-3); left: var(--sp-3); bottom: var(--sp-3); max-width: none; }
  .card__head, .card__body { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .card__body--flush { padding: 0; }                       /* its rows carry their own padding */
  /* A long label (an installer's file name) wraps inside its button rather than widening the page. */
  .card .btn { max-width: 100%; white-space: normal; text-align: center; line-height: 1.3; padding-block: 8px; }
  .account__menu { width: min(272px, calc(100vw - 24px)); }

  /* A table becomes a stack of cards: each row a card, each cell labelled with its column
     (labelTables() in app.js writes the labels). Two across, so a row stays short. */
  .table-wrap { overflow: visible; }
  .table-wrap table, .table-wrap tbody { display: block; }
  .table-wrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table-wrap tbody tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px var(--sp-4);
    padding: 14px var(--sp-4); border-bottom: 1px solid var(--border);
  }
  .table-wrap tbody tr:last-child { border-bottom: 0; }
  .table-wrap tbody td { display: block; min-width: 0; padding: 0; border: 0; text-align: left; overflow-wrap: anywhere; }
  .table-wrap td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-subtle);
  }
  .table-wrap tbody td:first-child { grid-column: 1 / -1; }
  .table-wrap tbody td.cell-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: flex-end; }
  .table-wrap tbody td.cell-actions:empty { display: none; }
}
@media (max-width: 420px) {
  .tab .icon { display: none; }
  .coin-chip__unit { display: none; }
  .coin-chip { padding-right: 12px; }
}

/* ============================================================ UPI payment (Buy coins)
   The QR the cloud makes for exactly this purchase, beside the facts a payer checks: amount, payee,
   UPI ID and the TNDA- note. The QR sits on white in both themes — a scanner needs the contrast. */
.card--pay { border-color: var(--gold-line); box-shadow: var(--shadow-2); overflow: hidden; }
.card--pay .card__head { background: linear-gradient(90deg, var(--gold-soft), transparent 70%); }
.upi { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.upi__qr { margin: 0; display: grid; justify-items: center; gap: var(--sp-2); }
.upi__qrimg {
  width: 236px; height: 236px; padding: 10px; background: #fff;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: 0 0 0 5px var(--gold-soft), var(--shadow-2);
}
.upi__qrimg svg { display: block; width: 100%; height: 100%; }
.upi__qr figcaption { font-size: 12px; font-weight: 650; color: var(--fg-muted); letter-spacing: .02em; }
.upi__facts { display: grid; gap: var(--sp-3); min-width: 0; max-width: 420px; }
.upi__amount { font-size: 34px; font-weight: 700; line-height: 1.1; color: var(--fg); letter-spacing: -.02em; }
.upi__for { margin-top: calc(-1 * var(--sp-2)); font-size: 13px; color: var(--fg-muted); }
/* label above value: the facts column is narrow beside the QR, and a UPI ID must never wrap mid-way */
.upi__defs { gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--border); }
.upi__defs .defs__row { grid-template-columns: 1fr; gap: 2px; }
.upi__defs dt { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.upi__defs dd { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.upi__defs dd .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upi__copy { flex: none; }
.upi .mono, .upi__utr input { font-family: var(--mono); }
.upi__apps { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--fg-muted); }
.upi__open { display: none; text-decoration: none; }                         /* a upi:// link only helps on the phone that pays */
.upi__steps { margin-top: var(--sp-5); }
.upi__utr { margin-top: var(--sp-4); }
.upi__utr input { max-width: 280px; font-size: 17px; letter-spacing: .1em; }
.upi__acts { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); }
@media (max-width: 640px) {
  .upi { grid-template-columns: 1fr; justify-items: stretch; }
  .upi__qr { justify-self: center; }
  .upi__open { display: inline-flex; align-items: center; justify-content: center; }
}
@media (pointer: coarse) { .upi__open { display: inline-flex; align-items: center; justify-content: center; } }