.nav a:first-of-type{background:none;color:inherit;font-weight:400}
.nav a[aria-current=page],.nav a:hover{background:var(--soft);color:var(--violet);font-weight:650}
.screen{padding-top:20px}.screen .intro{margin:10px 0 24px}
.wallet-hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:210px;padding:clamp(18px,4vw,40px);border:1px solid #e7daf3;border-radius:20px;background:#eee4f8}
.wallet-hero::before{content:"";position:absolute;right:-58px;top:-95px;width:260px;height:260px;border:1px solid #d9c5ec;border-radius:50%;box-shadow:0 0 0 25px #ddcbef77,0 0 0 55px #ddcbef44;pointer-events:none}
.wallet-hero>*{position:relative}.hero-icon{color:#794bb8;transform:rotate(-12deg);margin-right:24px}.hero-icon svg{width:clamp(40px,8vw,85px);height:auto}
.balance-label{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:14px;margin-top:12px}.eye{display:grid;place-items:center;background:transparent;border:0;color:var(--violet);border-radius:8px;padding:6px}.eye svg{width:16px;height:16px}.balance{font-size:clamp(38px,7vw,74px);line-height:1;letter-spacing:-.07em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.balance small{font-size:clamp(13px,2vw,19px);letter-spacing:0;color:#64467d;font-weight:650}
.quick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:12px}.quick a{display:flex;align-items:center;gap:10px;padding:10px 13px;background:white;border:1px solid var(--line);border-radius:11px;font-size:14px;font-weight:650}.quick a:first-child{color:white;background:var(--violet);border-color:var(--violet)}.quick a:first-child .icon{background:#ffffff29;color:white}
.home-grid{margin-top:17px}.heading-row,.asset,.operation{display:flex;align-items:center;gap:10px;justify-content:space-between}.heading-row{flex-wrap:wrap}.link{color:var(--violet);font-size:13px;font-weight:650}.asset,.operation{padding:12px 0;border-top:1px solid var(--line);margin-top:9px}.asset>div,.operation>div{flex:1;min-width:0;overflow-wrap:anywhere}.asset small,.operation small{display:block;margin-top:4px;color:var(--muted)}.asset strong,.operation strong{font-variant-numeric:tabular-nums;text-align:right}.positive{color:#22674a}
.field{display:grid;gap:6px;margin-top:13px;font-size:14px;font-weight:650}.field input,.field select,#filter{min-width:0;max-width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;background:white;color:var(--ink);font:inherit}.field input,.field select{width:100%}.form .primary,.summary form .primary{margin-top:12px}#pay-form .primary{margin-top:12px}.secondary{border:1px solid var(--line);background:white;color:var(--ink);border-radius:8px;padding:8px 12px;margin-top:8px}.scan{display:grid;place-items:center;background:var(--soft);border-radius:10px;min-height:120px;color:var(--violet);overflow:hidden;margin-top:12px}.scan svg{width:50px;height:50px}.scan:has(video:not([hidden])) svg{display:none}.scan video{width:100%;max-height:230px;object-fit:cover}dd{overflow-wrap:anywhere}details{border-bottom:1px solid var(--line);padding:12px 0}details p{margin-top:7px;color:var(--muted);line-height:1.5}summary{cursor:pointer}dialog{color:var(--ink);width:min(400px,calc(100% - 24px));border:1px solid var(--line);border-radius:14px;padding:20px}dialog::backdrop{background:#22133366}dialog .primary{margin-top:16px}dialog .secondary{width:100%}
@media(max-width:600px){main{padding-bottom:calc(70px + env(safe-area-inset-bottom))}.nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;z-index:4;left:0;right:0;bottom:0;background:white;border-top:1px solid var(--line);padding:5px 4px max(6px,env(safe-area-inset-bottom));gap:3px}.nav small,.nav a[href="#fund"]{display:none}.nav a{padding:4px 1px;flex-direction:column;gap:2px;text-align:center;font-size:10px}.nav a svg{width:17px;height:17px}.wallet-hero{min-height:155px}.hero-icon{margin-right:4px}.quick a{flex-direction:column;text-align:center;gap:4px;padding:7px 2px;font-size:11px}.quick .icon{width:28px;height:28px}}

/* Preview the same compact layout on desktop and inside the Telegram WebView. */
body {
  display: grid;
  place-items: center;
  min-height: 100dvh;
}
.shell {
  width: min(100%, 390px);
  height: min(760px, calc(100dvh - 32px));
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
}
aside {
  display: contents;
}
.brand {
  grid-row: 1;
  margin: 0;
  min-height: 54px;
  padding: 10px 16px;
  background: white;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
}
.mark { width: 27px; height: 27px; }
.nav {
  position: static;
  grid-row: 3;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 3px;
  padding: 5px 4px max(6px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: white;
}
.nav small, .nav a[href="#fund"], .aside-note { display: none; }
.nav a {
  min-height: 44px;
  padding: 4px 1px;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  text-align: center;
  font-size: 10px;
}
.nav a svg { width: 18px; height: 18px; }
main {
  grid-row: 2;
  min-height: 0;
  overflow: auto;
  overscroll-behavior-y: contain;
  padding: 0 16px 22px;
  scrollbar-width: thin;
}
.bar { min-height: 45px; }
.screen { padding-top: 14px; }
.screen .intro { margin: 6px 0 18px; }
h1 { font-size: clamp(28px, 8vw, 36px); }
.columns { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.form, .summary { padding: 16px; }
.wallet-hero { min-height: 150px; padding: 18px; }
.hero-icon { margin-right: 4px; }
.hero-icon svg { width: 49px; }
.balance { font-size: 43px; }
.quick a { flex-direction: column; text-align: center; gap: 4px; padding: 7px 2px; font-size: 11px; }
.quick .icon { width: 28px; height: 28px; }
.method { min-height: 58px; padding: 8px; gap: 6px; }
.method strong { font-size: 13px; }
.method .icon { width: 27px; height: 27px; }
.method .icon svg { width: 16px; height: 16px; }
.dot { width: 11px; height: 11px; }
.method:has(input:checked) .dot { border-width: 3px; }
@media (max-width: 600px) {
  .shell { width: 100%; height: 100dvh; border: 0; border-radius: 0; }
}

/* HOODRICH monochrome wallet */
:root {
  color-scheme: dark;
  --paper: #050505;
  --ink: #f6f6f6;
  --muted: #a7a7a7;
  --line: #363636;
  --violet: #f1f1f1;
  --soft: #1b1b1b;
  font-family: "Golos Text", "Segoe UI", sans-serif;
}
body { background: #111; }
.shell { height: min(845px, calc(100dvh - 32px)); border-color: #303030; background: var(--paper); }
.masthead {
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 59px;
  padding: 0 17px;
}
.brand {
  min-height: 0;
  padding: 0;
  background: none;
  border: 0;
  font: 800 29px/1 "Bahnschrift Condensed", "Arial Narrow", "Segoe UI", sans-serif;
  letter-spacing: -.055em;
}
.tag { border: 1px solid #adadad; border-radius: 6px; background: transparent; color: var(--ink); padding: 4px 8px; }
main { padding: 0 16px 18px; }
main:has(.home:not([hidden])) { padding-inline: 0; }
main:has(.home:not([hidden])) .bar { display: none; }
.home { padding-top: 6px; }
.bank-card { margin: 0 6px; overflow: hidden; }
.bank-card svg { display: block; width: 100%; height: auto; aspect-ratio: 824 / 550; overflow: hidden; }
.balance-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1px 8px;
  margin: 6px 17px 0;
  padding: 7px 0 10px;
  border-bottom: 1px solid #5b5b5b;
}
.balance-label { font-size: 13px; margin: 0; gap: 3px; }
.eye { padding: 6px; color: #c4c4c4; }
.balance-value, .asset > strong, .operation > strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.balance-value { font-size: clamp(13px, 4.1vw, 17px); }
.quick { margin: 17px 12px 0; gap: 7px; }
.quick a {
  min-height: 70px;
  justify-content: center;
  gap: 6px;
  border-color: #2c2c2c;
  border-radius: 8px;
  background: #131313;
  color: var(--ink);
  font-size: 12px;
}
.quick a svg { width: 23px; height: 23px; }
.quick a:first-child { color: #050505; background: #f7f7f7; border-color: #f7f7f7; }
.quick a:hover { border-color: #888; }
.home-grid { display: block; margin: 17px 17px 0; }
.home-section h2 { font-size: 19px; line-height: 1.2; letter-spacing: -.035em; }
.home-section + .home-section { border-top: 1px solid #535353; margin-top: 6px; padding-top: 12px; }
.home-section .heading-row { border-bottom: 1px solid #535353; padding-bottom: 8px; }
.home-section .link { font-size: 12px; font-weight: 500; color: #ddd; }
.asset, .operation { padding: 10px 0; margin: 0; min-height: 50px; font-size: 13px; }
.asset, .heading-row + div .operation:first-child { border-top: 0; }
.asset small, .operation small { font-size: 11px; margin-top: 2px; }
.operation .positive { color: inherit; }
.row-icon { display: grid; place-items: center; flex: none; width: 30px; height: 22px; color: #ddd; }
.row-icon svg { width: 21px; height: 21px; }
.nav {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top-color: #535353;
  padding: 5px 6px max(8px, env(safe-area-inset-bottom));
  background: #070707;
}
.nav a { position: relative; color: #b8b8b8; font-weight: 500; gap: 4px; }
.nav a:first-of-type { color: #b8b8b8; }
.nav a[aria-current=page], .nav a:hover { background: none; color: white; }
.nav a[aria-current=page]::after {
  content: "";
  position: absolute;
  bottom: -4px;
  width: 20px;
  height: 2px;
  background: #fff;
}
.form, .summary, dialog { background: #101010; }
.summary dt, .entry span { color: var(--muted); }
.summary .total { border-color: var(--line); }
.method:has(input:checked) { border-color: #bbb; background: #222; }
.method .icon, .method:nth-child(1) .icon, .method:nth-child(2) .icon { color: #eee; background: #262626; }
.field input, .field select, #filter, .presets button, .secondary { color: var(--ink); background: #151515; }
.entry { border-color: var(--line); }
.primary { color: #080808; background: #f6f6f6; }
.primary:hover:not(:disabled) { background: #d9d9d9; }
@media (max-width: 600px) {
  .shell { height: 100dvh; }
}

/* Match the reference tab bar's spacing while keeping short screens usable. */
.nav {
  min-height: clamp(64px, calc(15dvh - 15px), 114px);
  align-items: start;
  padding-top: 12px;
}
.nav a { font-size: 12px; gap: 5px; }
.nav a svg { width: 21px; height: 21px; }
.nav a[aria-current=page]::after { bottom: -5px; }

/* Metallic SVG glyphs use the same path for the bevel, face and highlight. */
.glyph-face { display: none; }
.glyph-depth, .glyph-metal, .glyph-light { fill: none; }
.glyph-depth { stroke: #525252; stroke-width: 2.25; }
.glyph-metal { stroke: url(#silver-metal); stroke-width: 1.9; }
.glyph-light { stroke: #fff; stroke-width: .55; opacity: .52; }
.quick a:first-child .glyph-depth { stroke: #adadad; }
.quick a:first-child .glyph-metal { stroke: url(#graphite-metal); }
.quick a:first-child .glyph-light { stroke: #a6a6a6; opacity: .48; }
.quick a svg { width: 25px; height: 25px; }
.nav a:not([aria-current=page]) svg { opacity: .79; }
.bank-card #card-suffix {
  stroke: none;
  fill: #f5f5f5;
  font: 700 36px/1 "Bahnschrift", "Arial Narrow", "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
}

.payout-tabs { margin: 0 0 14px; display: grid; grid-template-columns: 1fr 1fr; }
.payout-tabs button { min-height: 41px; }
.payout .presets button[aria-pressed=true] { background: #ededed; color: #111; border-color: #ededed; }
.payout-form h2, .payout-log h2 { font-size: 19px; }
.payout-info, .payout-quote {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid #333;
  border-radius: 10px;
  background: #171717;
}
.payout-info dl, .payout-quote dl { margin: 10px 0 0; }
.payout-info dl div, .payout-quote dl div { display: flex; justify-content: space-between; gap: 9px; padding: 6px 0; font-size: 12px; }
.payout dt { color: var(--muted); }
.payout dd { margin: 0; text-align: right; font-weight: 650; }
.payout-step { display: flex; gap: 8px; align-items: center; margin: 17px 0 0; padding-top: 12px; border-top: 1px solid #333; font-size: 14px; }
.payout-step span, .payout-kicker { color: #bcbcbc; font-size: 11px; letter-spacing: .08em; }
.payout-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px; margin-top: 7px; }
.quiet-button { background: transparent; border: 0; color: #dedede; text-align: left; padding: 5px 0; text-decoration: underline; text-underline-offset: 3px; font-size: 12px; }
.payout-quote h3 { font-size: 15px; margin: 0; }
.payout-log { margin-top: 13px; }
.payout-filters { margin-top: 4px; }
.payout-dates { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.payout-list-item { padding: 12px 0; border-bottom: 1px solid #333; }
.payout-list-item small { color: #aaa; display: block; margin-top: 4px; }
.payout-list-item .heading-row { font-size: 13px; }
#quote-result:empty, #withdraw-message:empty { display: none; }

/* Open balance, brushed-metal actions and navigation. */
.masthead-profile { display:grid; place-items:center; width:38px; height:38px; color:#bdbdbd; border-radius:8px; }
.masthead-profile:hover { color:#fff; background:#191919; }
.masthead-profile svg { width:24px; height:24px; }
.balance-strip {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(93px,34%);
  align-items:start;
  gap:4px 10px;
  margin:12px 17px 0;
  padding:0;
  border:0;
}
.balance-main, .home-rate { min-width:0; }
.balance-label, .home-rate-label {
  display:flex;
  align-items:center;
  gap:3px;
  min-height:34px;
  margin:0;
  color:#b9b9b9;
  font-size:clamp(11px,3.2vw,13px);
}
.balance-value, .home-rate strong {
  display:block;
  margin:0 0 4px;
  font-size:clamp(25px,8.9vw,37px);
  letter-spacing:-.055em;
  line-height:1.1;
  font-variant-numeric:tabular-nums;
  white-space:normal;
  overflow-wrap:anywhere;
}
.balance-value small { display:inline-block; font-size:.52em; letter-spacing:-.02em; }
.balance-rub, .home-rate > small { color:#bdbdbd; font-size:13px; line-height:1.35; font-variant-numeric:tabular-nums; }
.balance-rub { font-weight:650; overflow-wrap:anywhere; }
.home-rate { text-align:right; }
.home-rate-label { justify-content:flex-end; white-space:nowrap; }
.home-rate > small { display:block; }
.rate-refresh { display:grid; place-items:center; flex:none; width:28px; height:32px; border:0; border-radius:6px; background:transparent; color:#ddd; padding:3px; }
.rate-refresh:hover { background:#202020; }
.rate-refresh svg { width:16px; height:16px; }
.rate-status { grid-column:1/-1; margin:0; color:#aaa; font-size:11px; }
.quick { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:17px 14px 0; }
.quick a {
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:43px;
  padding:6px 8px;
  border:1px solid #4c4c4c;
  border-radius:8px;
  background:repeating-linear-gradient(135deg,#ffffff05 0 1px,transparent 1px 3px),linear-gradient(150deg,#272727,#151515);
  color:#f1f1f1;
  font-size:14px;
  font-weight:650;
}
.quick a svg { width:21px; height:21px; }
.quick a.quick-pay {
  grid-column:1/-1;
  justify-content:flex-start;
  min-height:48px;
  padding:7px 14px;
  border-color:#eee;
  background:repeating-linear-gradient(135deg,#00000005 0 1px,transparent 1px 3px),linear-gradient(153deg,#fff,#e3e3e3);
  color:#080808;
  font-size:17px;
  font-weight:750;
}
.quick a.quick-pay svg { width:24px; height:24px; }
.quick-arrow { margin-left:auto; }
.quick a:hover { filter:brightness(1.13); }
.quick a:active { filter:brightness(.94); }
.home-grid { margin-top:20px; }
.home-section + .home-section { border-top-color:#343434; }
.home-section .heading-row { border-bottom:0; padding-bottom:4px; }
.home-section .operation { border-top-color:#282828; }
.home-section .operation .row-icon { width:29px; height:24px; }
.nav a { gap:6px; font-weight:550; }
.nav a svg { width:27px; height:27px; }
.nav a svg .glyph-metal { stroke-width:1.72; }
.nav a svg .glyph-depth { stroke-width:2.1; }
.nav a:not([aria-current=page]) svg { opacity:.9; }
.nav a[aria-current=page]::after { bottom:-6px; width:23px; border-radius:2px; }

.quick a.quick-pay svg { stroke:#080808; stroke-width:1.9; }

/* Compact, single-method deposit. */
main:has(.deposit-screen:not([hidden])) .bar { display:none; }
.deposit-screen { padding-top:7px; }
.deposit-back { display:inline-flex; align-items:center; gap:6px; min-height:38px; color:#d7d7d7; font-size:14px; }
.deposit-back svg { width:17px; height:17px; }
.deposit-screen .intro { margin:5px 0 18px; }
.deposit-screen h1 { margin:0 0 4px; }
.deposit-method {
  display:flex;
  align-items:center;
  gap:11px;
  padding:11px 13px;
  border:1px solid #4b4b4b;
  border-radius:11px;
  background:linear-gradient(146deg,#222,#111);
}
.deposit-method > div { flex:1; min-width:0; }
.deposit-method strong, .deposit-method small { display:block; }
.deposit-method strong { font-size:16px; }
.deposit-method small { margin-top:3px; color:#bcbcbc; font-size:12px; }
.deposit-method > b { font-size:13px; }
.deposit-method .deposit-coin { width:29px; height:29px; }
.deposit-screen .amount { margin-top:18px; }
.deposit-screen .entry { background:linear-gradient(146deg,#1b1b1b,#101010); border-color:#525252; }
.deposit-screen .entry input { font-size:28px; font-weight:720; padding:9px 0; }
.deposit-screen .presets { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.deposit-screen .presets button { min-height:37px; border-color:#4a4a4a; }
.deposit-screen .presets button[aria-pressed=true] { background:#ececec; border-color:#f3f3f3; color:#111; font-weight:750; }
.deposit-screen .deposit-create {
  justify-content:space-between;
  margin-top:16px;
  min-height:46px;
  padding:10px 13px;
  background:repeating-linear-gradient(135deg,#00000005 0 1px,transparent 1px 3px),linear-gradient(153deg,#fff,#e3e3e3);
}
.deposit-create svg { width:22px; height:22px; stroke:#080808; stroke-width:1.9; }
.deposit-screen #result:empty { display:none; }
.deposit-history { margin-top:18px; padding-top:14px; border-top:1px solid #484848; }
.deposit-history h2 { font-size:17px; }
.deposit-history .link { color:#ddd; font-size:12px; }
.deposit-history .empty { justify-content:center; margin:0; padding:23px 0 13px; }
.deposit-invoice { margin-top:12px; padding:10px 12px; border:1px solid #343434; border-radius:9px; background:#141414; }
.deposit-invoice dl { margin:0; }
.deposit-invoice dl div { display:flex; justify-content:space-between; gap:8px; padding:5px 0; font-size:13px; }
.deposit-invoice dt { color:#bdbdbd; }
.deposit-invoice dd { margin:0; text-align:right; font-weight:650; }

/* Compact withdrawal flow. */
main:has(.payout:not([hidden])) .bar { display:none; }
.payout { padding-top:4px; }
.payout-hero { position:relative; isolation:isolate; min-height:105px; padding-bottom:12px; overflow:hidden; }
.payout-hero h1 { margin:2px 0 3px; }
.payout-hero p { color:#bdbdbd; font-size:14px; }
.payout-photo {
  position:absolute;
  z-index:-1;
  top:0;
  right:-15px;
  width:61%;
  height:auto;
  aspect-ratio:493/249;
  opacity:.85;
  mask-image:linear-gradient(to right,transparent,#000 38%),linear-gradient(to bottom,#000 68%,transparent);
  mask-composite:intersect;
  pointer-events:none;
}
.payout-tabs { gap:2px; margin:0 0 9px; padding:2px; border:1px solid #555; border-radius:9px; background:#141414; }
.payout-tabs button { display:flex; align-items:center; justify-content:center; gap:7px; min-height:40px; padding:5px; border:0; background:none; font-size:14px; }
.payout-tabs button svg { width:20px; height:20px; }
.payout-tabs button[aria-pressed=true] { background:linear-gradient(145deg,#fff,#ddd); }
.payout-tabs button[aria-pressed=true] svg { stroke:#111; }
.payout-group { padding:9px 0 8px; border-bottom:1px solid #353535; }
.payout-step { gap:4px; margin:0 0 6px; padding:0; border:0; font-size:15px; font-weight:700; }
.payout-step span { color:#ddd; font-size:13px; letter-spacing:0; }
.payout-group .field { margin:0; }
.payout-group .field select { min-height:39px; border-color:#4b4b4b; }
.payout .payout-info { margin:3px 0 0; padding:0; border:0; background:none; }
.payout-info summary { color:#bdbdbd; font-size:12px; padding:4px 0; }
.payout-info p, .payout-info dl { margin-top:3px; }
.payout-group .payout-card-input {
  display:grid;
  grid-template-columns:25px minmax(0,1fr);
  gap:1px 9px;
  align-items:center;
  padding:6px 9px;
  border:1px solid #4b4b4b;
  border-radius:8px;
  background:#151515;
}
.payout-card-input svg { grid-row:1/3; width:21px; height:21px; color:#ddd; }
.payout-card-input span { font-size:12px; }
.payout-card-input input { border:0; background:none; padding:0 0 2px; font-size:13px; }
.payout-inline { margin-top:4px; }
.payout .payout-visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.payout-group .entry { margin:0; background:#151515; border-color:#4b4b4b; }
.payout-group .entry input { padding:7px 0; font-weight:700; }
.payout-group .presets { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin:6px 0 0; }
.payout-group .presets button { min-height:33px; padding:4px 1px; font-size:12px; }
.payout-group .hint, .payout-quote .hint { margin-top:4px; font-size:11px; }
#payout-limits:empty { display:none; }
.payout .payout-quote { margin-top:9px; padding:7px 10px; background:linear-gradient(146deg,#222,#111); border-color:#4b4b4b; }
.payout .payout-quote dl { margin:0; }
.payout .payout-quote dl div + div { border-top:1px solid #383838; }
.payout .payout-quote dl div { padding:4px 0; font-size:13px; }
.payout-quote .quiet-button { padding:4px 0 0; }
.payout .payout-submit {
  justify-content:space-between;
  min-height:45px;
  margin-top:10px;
  padding-inline:12px;
  background:repeating-linear-gradient(135deg,#00000005 0 1px,transparent 1px 3px),linear-gradient(153deg,#fff,#e3e3e3);
}
.payout-submit svg { width:21px; height:21px; stroke:#080808; stroke-width:1.9; }
.payout .payout-log { margin-top:5px; padding:0; }
.payout-log > summary { display:flex; align-items:center; gap:9px; min-height:42px; }
.payout-log > summary::-webkit-details-marker { display:none; }
.payout-log-arrow { width:17px; height:17px; margin-left:auto; }
.payout-log[open] .payout-log-arrow { transform:rotate(90deg); }

.payout-direction { position:relative; }
.payout-direction .payout-info:not([open]) { height:0; margin:0; }
.payout-direction .payout-info summary { position:absolute; right:0; top:5px; max-width:50%; text-align:right; }
.payout-step .payout-inline { margin:0 0 0 auto; gap:6px; justify-content:flex-end; }
.payout-step .quiet-button { font-size:11px; padding:0; line-height:1.3; }
.payout-quote-tools { display:flex; justify-content:space-between; align-items:baseline; gap:4px 8px; flex-wrap:wrap; }
.payout-quote-tools .quiet-button { font-size:11px; }
.shell:has(.payout:not([hidden])) .nav { min-height:76px; }

.payout-hero { margin-right:-16px; }
.payout-photo {
  top:0;
  right:0;
  width:min(61%,235px);
  aspect-ratio:462/230;
  opacity:1;
  mask-image:linear-gradient(to right,transparent,#000 28%);
}
.payout-country { position:relative; }
.payout-group .payout-country select { padding-left:43px; }
.payout-globe {
  position:absolute;
  left:11px;
  top:50%;
  transform:translateY(-50%);
  width:23px;
  height:23px;
  color:#ececec;
  pointer-events:none;
}
.payout-group .payout-card-input { grid-template-columns:37px minmax(0,1fr); }
.payout-card-input .payout-card-glyph {
  display:grid;
  grid-row:1/3;
  place-items:center start;
  align-self:stretch;
  border-right:1px solid #5b5b5b;
}
.payout-card-input .payout-card-glyph svg { width:24px; height:24px; stroke-width:1.9; }

/* Camera-first payment screen. Corners and sweep share one coordinate box. */
.nav { grid-template-columns:repeat(3,minmax(0,1fr)); }
main:has(.qr-screen:not([hidden])) .bar { display:none; }
.qr-screen { padding-top:6px; }
.qr-screen .qr-intro { text-align:center; margin:7px 0 15px; }
.qr-intro h1 { margin:0 0 5px; }
.qr-intro p { font-size:14px; }
.qr-viewfinder {
  display:grid;
  place-items:center;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  height:clamp(150px,23dvh,188px);
  border:1px solid #888;
  border-radius:15px;
  background:
    linear-gradient(#ffffff07 1px,transparent 1px) center/42px 42px,
    linear-gradient(90deg,#ffffff07 1px,transparent 1px) center/42px 42px,
    repeating-linear-gradient(140deg,#ffffff03 0 1px,transparent 1px 3px),
    radial-gradient(ellipse at center,#202020,#0b0b0b 73%);
  box-shadow:inset 0 0 0 1px #ffffff1a;
}
.qr-viewfinder video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.qr-target {
  --corner-size:24px;
  position:relative;
  display:grid;
  place-items:center;
  width:min(62%,190px);
  height:72%;
  pointer-events:none;
}
.qr-corner {
  position:absolute;
  width:var(--corner-size);
  height:var(--corner-size);
  border:3px solid #e2e2e2;
  border-radius:9px 0 0;
}
.qr-corner.top-left { top:0; left:0; border-right:0; border-bottom:0; }
.qr-corner.top-right { top:0; right:0; border-left:0; border-bottom:0; border-radius:0 9px 0 0; }
.qr-corner.bottom-left { bottom:0; left:0; border-right:0; border-top:0; border-radius:0 0 0 9px; }
.qr-corner.bottom-right { bottom:0; right:0; border-left:0; border-top:0; border-radius:0 0 9px; }
.qr-mark { width:43px; height:43px; stroke:url(#silver-metal); stroke-width:2.5; }
.qr-viewfinder:has(video:not([hidden])) .qr-mark { visibility:hidden; }
.qr-sweep {
  position:absolute;
  inset:1px 0 auto;
  height:calc(100% - 2px);
}
.qr-sweep::before {
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:1px;
  background:linear-gradient(90deg,#aaa,#fff 35% 65%,#aaa);
  box-shadow:0 0 8px #fff9;
  animation:qr-sweep 2.6s ease-in-out infinite alternate;
}
@keyframes qr-sweep { to { top:calc(100% - 1px); } }
@media (prefers-reduced-motion:reduce) { .qr-sweep::before { animation:none; top:50%; } }
.qr-camera-status { display:flex; align-items:center; gap:7px; min-height:17px; margin:9px 0; color:#c2c2c2; font-size:12px; }
.qr-camera-status::before { content:""; flex:none; width:7px; height:7px; border-radius:50%; background:#b6b6b6; }
.qr-screen .qr-camera-button { gap:9px; min-height:46px; margin:0; background:linear-gradient(145deg,#fff,#dcdcdc); }
.qr-camera-button svg { width:22px; height:22px; stroke:#080808; stroke-width:1.9; }
.qr-source-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:8px; }
.qr-source-actions button { display:flex; align-items:center; justify-content:center; gap:6px; min-height:42px; padding:5px 3px; border:1px solid #555; border-radius:8px; background:linear-gradient(145deg,#252525,#151515); color:#eee; font-size:12px; font-weight:650; }
.qr-source-actions button svg { width:18px; height:18px; }
.qr-source-actions button[aria-pressed=true], .qr-source-actions button:hover { border-color:#bbb; }
.qr-payment-note { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:13px; color:#aaa; font-size:12px; }
.qr-payment-note svg { width:17px; height:17px; }
.qr-screen #link-panel .primary { margin-top:7px; min-height:40px; }
.qr-screen #pay-form .hint:empty { display:none; }

/* Distribute the idle scanner across the available mobile viewport. */
.qr-screen:not(:has(#link-panel:not([hidden]), #gallery-panel:not([hidden]))) {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:100%;
}
.qr-screen .deposit-back { align-self:flex-start; }
.qr-guide {
  margin-top:15px;
  padding:12px;
  border:1px solid #303030;
  border-radius:10px;
  background:linear-gradient(145deg,#181818,#0f0f0f);
}
.qr-guide h2 { display:flex; align-items:center; justify-content:center; gap:7px; margin:0 0 10px; font-size:14px; }
.qr-guide h2 svg { width:17px; height:17px; color:#c6c6c6; }
.qr-guide ol { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; list-style:none; margin:0; padding:0; }
.qr-guide li { display:flex; align-items:flex-start; gap:6px; min-width:0; }
.qr-guide li + li { padding-left:9px; border-left:1px solid #383838; }
.qr-guide-index { flex:none; color:#aaa; font-size:11px; font-variant-numeric:tabular-nums; }
.qr-guide strong, .qr-guide small { display:block; }
.qr-guide strong { font-size:12px; line-height:1.25; }
.qr-guide small { margin-top:4px; color:#aaa; font-size:11px; line-height:1.25; }
.qr-screen:has(#qr-open-review:not([hidden])) .qr-guide { display:none; }

/* Payment details open in a separate sheet above the scanner. */
.qr-open-review { width:100%; min-height:42px; margin-top:10px; }
.qr-review {
  position:fixed;
  inset:auto 0 max(10px,calc((100dvh - 845px) / 2 + 12px));
  width:min(368px,calc(100% - 20px));
  max-height:calc(100dvh - 44px);
  margin:0 auto;
  padding:16px;
  border:1px solid #464646;
  border-radius:16px;
  background:#141414;
  box-shadow:0 8px 50px #000c;
  overflow:auto;
  overscroll-behavior:contain;
}
.qr-review::backdrop { background:#000a; backdrop-filter:blur(3px); }
.qr-review-header { display:flex; align-items:flex-start; justify-content:space-between; gap:9px; margin-bottom:12px; }
.qr-review-header .eyebrow { margin:0 0 4px; color:#aaa; font-size:10px; }
.qr-review-header h2 { margin:0; font-size:23px; }
.qr-review-close { display:grid; place-items:center; width:34px; height:34px; background:#242424; color:#eee; border:1px solid #404040; border-radius:8px; }
.qr-review-close:hover { background:#353535; }
.qr-review-close svg { width:17px; height:17px; }
.qr-review dl { margin:0; }
.qr-review dl > div { display:flex; justify-content:space-between; align-items:baseline; gap:9px; padding:7px 0; font-size:13px; }
.qr-review dt { color:#bcbcbc; }
.qr-review dd { margin:0; min-width:0; text-align:right; overflow-wrap:anywhere; font-weight:650; font-variant-numeric:tabular-nums; }
.qr-review .qr-review-price { margin-top:9px; padding:5px 11px; border:1px solid #393939; border-radius:9px; background:linear-gradient(145deg,#222,#181818); }
.qr-review .qr-review-total { margin-top:3px; border-top:1px solid #454545; }
.qr-review .qr-review-total dd { font-size:18px; }
.qr-review .primary, .qr-review .secondary { min-height:42px; }
.qr-review .primary { margin-top:10px; }
.qr-review .qr-review-status { margin:8px 0 0; }
@media(max-width:600px) {
  .qr-review {
    bottom:0;
    width:100%;
    max-height:calc(100dvh - 24px);
    border-radius:16px 16px 0 0;
    padding-bottom:max(17px,env(safe-area-inset-bottom));
  }
}

/* History ledger */
main:has(.history-screen:not([hidden])) .bar { display:none; }
.history-screen { padding:20px 2px 0; }
.history-intro h1 { margin:0 0 5px; font-size:35px; }
.history-intro p { color:var(--muted); font-size:14px; line-height:1.45; }
.history-period {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  position:relative;
  margin-top:20px;
  background:#111;
  border:1px solid #3d3d3d;
  border-radius:11px;
}
.history-period select {
  grid-column:1 / -1;
  grid-row:1;
  appearance:none;
  width:100%;
  min-height:44px;
  padding:0 38px 0 43px;
  color:var(--ink);
  background:transparent;
  border:0;
  border-radius:inherit;
  cursor:pointer;
  font:inherit;
  font-size:14px;
  font-weight:600;
}
.history-period svg { grid-row:1; width:18px; height:18px; z-index:1; pointer-events:none; }
.history-period svg:first-child { grid-column:1; margin-left:14px; }
.history-period svg:last-child { grid-column:3; margin-right:13px; }
.history-period option { background:#161616; color:var(--ink); }
.history-filters { display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; }
.history-filters button {
  flex:1 0 auto;
  min-height:38px;
  padding:0 clamp(8px, 2.5vw, 12px);
  border:1px solid #3b3b3b;
  border-radius:100px;
  color:#c8c8c8;
  background:#111;
  font-size:12px;
  white-space:nowrap;
}
.history-filters button[aria-pressed=true] {
  border-color:#eee;
  background:#050505;
  color:#fff;
  font-weight:650;
}
.history-ledger h2 {
  margin:24px 0 0;
  padding-bottom:8px;
  font-size:16px;
  letter-spacing:-.025em;
}
.history-ledger .operation { gap:10px; min-height:66px; padding:8px 0; font-size:14px; }
.history-ledger .operation:last-child { border-bottom:1px solid var(--line); }
.history-ledger .operation > div { font-weight:650; }
.history-ledger .operation small { margin-top:3px; font-size:12px; font-weight:400; }
.history-ledger .operation strong { white-space:normal; flex-shrink:0; max-width:46%; }
.history-ledger .operation strong span { color:var(--muted); font-weight:500; font-size:12px; }
.history-details-button {
  display:grid; place-items:center; flex:none; width:24px; min-height:44px; padding:0;
  border:0; color:var(--muted); background:transparent; font-size:22px;
}
.history-ledger .row-icon {
  width:39px;
  height:39px;
  padding:8px;
  background:#151515;
  border:1px solid #303030;
  border-radius:10px;
}
.history-empty {
  display:grid;
  justify-items:center;
  padding:clamp(25px, 8dvh, 64px) 0 10px;
  text-align:center;
}
.history-empty svg { width:110px; height:100px; margin-bottom:17px; }
.history-empty h2 { font-size:clamp(20px, 6vw, 25px); }
.history-empty p {
  max-width:25ch;
  margin-top:8px;
  color:var(--muted);
  font-size:14px;
  line-height:1.45;
}
.history-empty a {
  display:grid;
  place-items:center;
  min-width:175px;
  min-height:44px;
  margin-top:26px;
  padding:0 18px;
  border:1px solid #d4d4d4;
  border-radius:11px;
  font-size:14px;
  font-weight:650;
}
.history-empty a:hover { background:#181818; }
.shell:has(.history-screen:not([hidden]), .profile-screen:not([hidden])) .nav {
  min-height:0;
  padding-bottom:calc(14px + env(safe-area-inset-bottom));
}
.shell:has(.history-screen:not([hidden]), .profile-screen:not([hidden])) .nav a[aria-current=page]::after {
  width:56px;
  bottom:-4px;
}

/* Profile */
main:has(.profile-screen:not([hidden])) .bar,
.shell:has(.profile-screen:not([hidden])) .masthead-profile { display:none; }
.profile-screen { padding:20px 2px 0; }
.profile-screen h1 { margin:0 0 18px; font-size:35px; }
.profile-hero {
  position:relative;
  display:flex;
  align-items:center;
  isolation:isolate;
  min-height:184px;
  padding:16px;
  overflow:hidden;
  border:1px solid #626262;
  border-radius:12px;
  background:#0a0a0a;
}
.profile-photo {
  position:absolute;
  z-index:0;
  inset:0 0 0 auto;
  width:71%;
  height:100%;
  object-fit:cover;
  object-position:50% 56%;
  filter:grayscale(1) brightness(.82);
}
.profile-hero::after {
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  background:linear-gradient(90deg, #0a0a0a 19%, rgba(10,10,10,.92) 34%, rgba(10,10,10,.35) 52%, transparent 68%);
  pointer-events:none;
}
.profile-identity { position:relative; z-index:2; display:grid; min-width:0; width:49%; }
.profile-monogram {
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  margin-bottom:10px;
  border:1px solid #9e9e9e;
  border-radius:50%;
  background:#080808;
  font:800 24px/1 "Bahnschrift Condensed","Arial Narrow","Segoe UI",sans-serif;
}
.profile-identity strong { font-size:16px; line-height:1.25; }
.profile-handle { margin-top:4px; color:#b4b4b4; font-size:13px; }
.profile-identity strong, .profile-handle {
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  text-shadow:0 1px 4px #000;
}
.profile-group { margin-top:25px; }
.profile-group h2 { margin-bottom:10px; font-size:21px; letter-spacing:-.035em; }
.profile-link {
  display:grid;
  grid-template-columns:22px minmax(0,1fr) 15px;
  align-items:center;
  gap:13px;
  min-height:47px;
  padding:8px 4px;
  border-top:1px solid var(--line);
  font-size:15px;
}
.profile-link:last-child { border-bottom:1px solid var(--line); }
.profile-link:hover { background:#101010; }
.profile-link svg { width:21px; height:21px; color:#d9d9d9; }
.profile-link .profile-chevron { width:15px; height:15px; color:#aaa; }
@media (max-height:700px) {
  .profile-screen { padding-top:14px; }
  .profile-screen h1 { margin-bottom:14px; }
  .profile-hero { min-height:164px; }
  .profile-group { margin-top:19px; }
}