:root {




















  --brand-gold: #c7a24a;




  color-scheme: dark;



  --bg: #0e1621;
  --card: #151f2c;
  --card2: #1c2836;
  --surface-3: #24313f;
  --line: #2b3847;





  --field-line: #6c7a8a;
  --scrim: rgba(0, 0, 0, .6);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, .45);


  --seed-shadow: rgba(0, 0, 0, .55);



  --card-shadow: none;
  --hdr: #151f2c;
  --hdr-text: #e9edf3;
  --hdr-text-2: #bac4d2;
  --hdr-muted: #8d9aad;
  --hdr-chip: #1c2836;
  --hdr-line: #2b3847;
  --hdr-green: #3db37c;
  --hdr-green-soft: #1b3437;
  --hdr-edge: #2b3847;


  --text: #e9edf3;
  --text-2: #bac4d2;
  --muted: #8d9aad;





  --gold: var(--brand-gold);
  --gold-ink: #d9b865;
  --gold-dim: #b8943f;

  --on-gold: #0e1621;


  --gold-edge: transparent;







  --gold-soft: #323635;
  --gold-line: rgba(199, 162, 74, .32);



  --green: #3db37c;
  --green-soft: #1b3437;
  --green-line: rgba(61, 179, 124, .30);
  --red: #e26a6a;



  --red-btn: #c84d4d;
  --red-ink: #e47777;
  --red-soft: #322a35;
  --red-line: rgba(226, 106, 106, .30);
  --on-danger: #ffffff;

  --warn: #f0c453;
  --warn-bg: #2f3331;
  --warn-line: rgba(240, 196, 83, .28);
  --blue: #5995ff;




  --buy: var(--green);
  --sell: var(--red);



  --focus: var(--brand-gold);



  --hatch: rgba(255, 255, 255, .022);

  --track: rgba(255, 255, 255, .20);

  --radius: 16px;




  --tabbar-h: 68px;



  --ios-sheet: #1c1c1e;
  --ios-row: #2c2c2e;
  --ios-line: #3a3a3c;
  --ios-ink: #ffffff;
  --ios-ink-2: #8e8e93;
  --ios-blue: #0a84ff;
  --ios-green: #30d158;
  --ios-knob: #ffffff;
  --ios-bar: rgba(28, 28, 30, .96);
  --ios-dim: rgba(0, 0, 0, .4);
  --ios-wall: linear-gradient(165deg, #45577d 0%, #232c42 55%, #10141d 100%);
  --ios-tile: rgba(255, 255, 255, .18);
  --ios-home-ink: #ffffff;
  --ios-bezel: #1d1f23;
  --ios-island: #000000;
  --ios-tap: rgba(255, 255, 255, .5);
  --ios-tap-ring: rgba(255, 255, 255, .85);
  --a2-shot: url("icons/a2hs-dark-safari.webp");
  --a2-shot-app: url("icons/a2hs-dark-app.webp");
}
















:root[data-theme="light"] {
  color-scheme: light;

  --bg: #f7f6f2;
  --card: #ffffff;
  --card2: #ededea;
  --surface-3: #e3e4e3;
  --line: #dedfde;
  --field-line: #798392;
  --scrim: rgba(16, 35, 63, .38);
  --shadow-lg: 0 10px 30px rgba(16, 35, 63, .13);

  --seed-shadow: rgba(16, 35, 63, .30);
  --card-shadow: 0 1px 2px rgba(16, 35, 63, .05), 0 4px 14px rgba(16, 35, 63, .05);
  --hdr: #10233f;
  --hdr-text: #ffffff;
  --hdr-text-2: #dde3ec;
  --hdr-muted: #b9c2cf;
  --hdr-chip: #283952;
  --hdr-line: #3a4a62;
  --hdr-green: #86d9ad;
  --hdr-green-soft: #234051;
  --hdr-edge: #10233f;

  --text: #1b1e23;
  --text-2: #3e4652;
  --muted: #5e6672;

  --gold-ink: #7b632a;

  --on-gold: #10233f;
  --gold-dim: #7b632a;
  --gold-edge: #a88531;
  --gold-soft: #f6f0e2;
  --gold-line: rgba(199, 162, 74, .45);

  --green: #1a734c;
  --green-soft: #e9f3ef;
  --green-line: rgba(31, 138, 91, .30);
  --red: #b73838;
  --red-btn: #c84a4a;
  --red-ink: #b73838;
  --red-soft: #faefef;
  --red-line: rgba(200, 74, 74, .28);
  --warn: #766029;
  --warn-bg: #f6efdf;
  --warn-line: rgba(184, 134, 11, .30);
  --blue: #3461b0;

  --focus: #10233f;


  --hatch: rgba(23, 26, 31, .05);
  --track: rgba(23, 26, 31, .14);

  --ios-sheet: #f2f2f7;
  --ios-row: #ffffff;
  --ios-line: #d1d1d6;
  --ios-ink: #000000;
  --ios-ink-2: #8a8a8e;
  --ios-blue: #007aff;
  --ios-green: #34c759;
  --ios-knob: #ffffff;
  --ios-bar: rgba(248, 248, 248, .96);
  --ios-dim: rgba(0, 0, 0, .25);
  --ios-wall: linear-gradient(165deg, #b7cdea 0%, #86a8d8 55%, #5c7fb6 100%);
  --ios-tile: rgba(255, 255, 255, .5);
  --ios-home-ink: #ffffff;
  --ios-bezel: #1d1f23;
  --ios-island: #000000;
  --ios-tap: rgba(30, 30, 30, .3);
  --ios-tap-ring: rgba(30, 30, 30, .55);
  --a2-shot: url("icons/a2hs-light-safari.webp");
  --a2-shot-app: url("icons/a2hs-light-app.webp");
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }













button, .btn, a, summary, label,
.cal-d, .list-item.tappable, .dropzone, .refcopy, .maxline {
  touch-action: manipulation;
}
html, body { margin: 0; padding: 0; }













@font-face {
  font-family: "Vazirmatn";
  src: local("Vazirmatn"), local("Vazir"),
       url("./fonts/Vazirmatn-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: local("Vazirmatn Bold"), local("Vazir Bold"),
       url("./fonts/Vazirmatn-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

body {
  background: var(--bg);
  color: var(--text);
  overflow-x: clip;
  font-family: "Vazirmatn", "Vazir", "IRANSans", "Sahel", Tahoma, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
}










#app {
  padding-bottom: calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom));
}

header {
  display: flex; align-items: center; justify-content: space-between;




  padding: max(18px, calc(env(safe-area-inset-top) + 10px)) 20px 14px;
  position: sticky; top: 0; background: var(--hdr); z-index: 10;
  border-bottom: 1px solid var(--hdr-edge);


  --text: var(--hdr-text); --text-2: var(--hdr-text-2); --muted: var(--hdr-muted);
  --card2: var(--hdr-chip); --line: var(--hdr-line); --field-line: var(--hdr-muted);
  --green: var(--hdr-green); --green-soft: var(--hdr-green-soft);
  color: var(--text);
}
header .brand { font-weight: 700; font-size: 18px; margin: 0; flex: none; }




header { overflow-x: clip; }




header .who {
  display: inline-flex;


  padding: 4px 10px 4px 4px; cursor: pointer; align-items: center; gap: 6px;
  background: var(--card2); border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px; color: var(--muted); min-width: 0; flex: 0 1 auto;
}
header .who:hover { border-color: var(--field-line); }
.who-num {
  direction: ltr; unicode-bidi: isolate;
  font-variant-numeric: tabular-nums; letter-spacing: .3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}


.who-role {
  background: var(--gold-soft); color: var(--gold-ink);
  border-radius: 999px; padding: 2px 8px; font-size: 11px; font-weight: 700;
  line-height: 1.5; flex: none;
}
.hdr-end { display: flex; align-items: center; gap: 2px; min-width: 0; flex: 1 1 auto; justify-content: flex-end; }
.hdr-end .bell { min-width: 40px; min-height: 40px; padding: 4px; flex: none; }
.hdr-end .who { margin-inline-start: 6px; }

@media (max-width: 380px) {


  header .who { padding-inline-end: 8px; }
  .who-role { display: none; }
  header .who .tag { display: none; }
}



.bell {
  position: relative; background: none; border: none; color: var(--muted);
  padding: 6px; border-radius: 10px; line-height: 0;
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}
.bell svg { width: 21px; height: 21px; }


.bell.has-unread { color: var(--gold-ink); }
.bell .badge {
  position: absolute; top: -1px; inset-inline-end: -1px; margin: 0;
  min-width: 16px; padding: 0 4px; font-size: 10px; line-height: 16px; border-radius: 8px;
}

main { padding: 16px 16px 0; }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px; margin-bottom: 14px;
  box-shadow: var(--card-shadow);
}
.card h3 { margin: 0 0 12px; font-size: 14px; color: var(--muted); font-weight: 600; letter-spacing: .3px; text-transform: uppercase; }

.balances { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }




.balance { background: var(--card2); border-radius: 12px; padding: 14px; min-width: 0; }
.balance .value, .balance .locked { min-width: 0; }
.balance .label { font-size: 12px; color: var(--muted); }









.balance .value {
  font-size: calc(clamp(15px, 4.6vw, 20px) * var(--fit, 1));
  font-weight: 700; margin-top: 6px;
  overflow-wrap: anywhere; font-variant-numeric: tabular-nums;
}
.balance .locked { font-size: 11px; color: var(--muted); margin-top: 4px; }
.balance.gold .value { color: var(--gold-ink); }

.prices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.price { background: var(--card2); border-radius: 12px; padding: 14px; text-align: center; }
.price .label { font-size: 12px; color: var(--muted); }

.price .value {
  font-size: clamp(15px, 4.6vw, 20px); font-weight: 700; margin-top: 6px; line-height: 1.2;
  overflow-wrap: anywhere; font-variant-numeric: tabular-nums;
}
.price .sub-value { font-size: 14px; font-weight: 600; margin-top: 8px; opacity: .75; }
.price .unit { font-size: 10px; color: var(--muted); margin-top: 1px; }












.price .value, .price .sub-value { color: var(--text); transition: color .45s ease; }
.price { transition: background .3s; }
.price.flash-up .value, .price.flash-up .sub-value { color: var(--green); transition: none; }
.price.flash-down .value, .price.flash-down .sub-value { color: var(--red-ink); transition: none; }
.price.flash-up { animation: flashUp .75s ease; }
.price.flash-down { animation: flashDown .75s ease; }
@keyframes flashUp { 0% { background: var(--green-soft); } 100% { background: var(--card2); } }
@keyframes flashDown { 0% { background: var(--red-soft); } 100% { background: var(--card2); } }




@media (prefers-reduced-motion: reduce) {
  .price.flash-up, .price.flash-down { animation: none; }
  .price.flash-up .value, .price.flash-up .sub-value,
  .price.flash-down .value, .price.flash-down .sub-value { color: var(--text); }
}











.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.mkt-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0;
  padding: 4px 9px 4px 7px; border-radius: 999px; text-transform: none;
  border: 1px solid transparent; white-space: nowrap;
}
.mkt-pill > i { width: 7px; height: 7px; border-radius: 50%; flex: none; }

.mkt-pill.open {
  color: var(--green);
  background: var(--green-soft);
  border-color: var(--green-line);
}
.mkt-pill.open > i { background: var(--green); animation: mktPulse 2s ease-in-out infinite; }

.mkt-pill.shut {
  color: var(--gold-dim);
  background: var(--gold-soft);
  border-color: var(--gold-line);
}


.mkt-pill.shut > i { background: var(--gold-dim); }








.live-dot {
  display: inline-block; width: 7px; height: 7px; margin-inline-end: 5px;
  border-radius: 50%; vertical-align: 1px; flex: none;
  border: 1.5px solid currentColor; background: transparent;
}
.live-dot.on {
  background: var(--green); border-color: var(--green);
  animation: mktPulse 2s ease-in-out infinite;
}

@keyframes mktPulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--green-line); opacity: 1; }
  70%      { box-shadow: 0 0 0 5px transparent; opacity: .85; }
}



.prices.shut .price .value,
.prices.shut .price .sub-value { filter: grayscale(1); opacity: .62; }
.prices.shut .price { background: repeating-linear-gradient(
    135deg, var(--card2), var(--card2) 7px, var(--hatch) 7px, var(--hatch) 14px); }
.prices.shut .price.flash-up, .prices.shut .price.flash-down { animation: none; }


.q-fee { font-size: 12.5px; color: var(--text-2); }
.q-fee.q-fee-neg { color: var(--green); }




.q-disc { font-size: 12.5px; color: var(--green); font-weight: 700; }
#q-disc-row .ghost-btn { margin-inline-start: 6px; }
.disc { margin: 6px 0 8px; }
.disc-form { display: flex; gap: 8px; margin-top: 8px; }
.disc-form input { flex: 1 1 auto; min-width: 0; margin: 0; padding: 10px 12px; }
.disc-form button { flex: 0 0 auto; margin: 0; padding: 10px 18px; }
.disc .err { margin: 6px 0 0; }
.disc-card {
  padding: 12px 14px; margin: 0 0 10px; background: var(--card2);
  border: 1px dashed var(--gold-line); border-radius: 12px;
}
.disc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.disc-code { font-family: monospace; font-size: 20px; font-weight: 700; letter-spacing: 2px; }
.disc-what { margin: 4px 0 2px; font-size: 13.5px; font-weight: 600; }
.disc-sub { color: var(--green); }




.spark { display: block; width: 100%; margin: 12px 0 0; padding: 0 2px; background: none; border: 0; color: var(--text); text-align: start; }
.spark svg { width: 100%; height: 44px; display: block; color: var(--green); }
.spark.down svg { color: var(--red-ink); }
.spark svg stop { stop-color: currentColor; }
.spark svg #spark-line { stroke: currentColor; }
.spark-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); margin-top: 4px; }
.chg { font-weight: 700; color: var(--green); }
.down .chg, .chg.down { color: var(--red-ink); }
.spark .hint { font-size: 11px; color: var(--muted); }
.ch-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 10px; }
.ch-head h2 { margin: 0; font-size: 17px; }
.ch-now { white-space: nowrap; font-size: 19px; font-weight: 800; }
.ch-now small { font-size: 11px; color: var(--muted); font-weight: 400; margin-inline-start: 4px; }
.ranges { display: flex; gap: 6px; margin: 0 0 12px; }
.ranges button { flex: 1; margin: 0; padding: 8px 0; font-size: 12.5px; white-space: nowrap; background: var(--card2); color: var(--text-2); border: 1px solid var(--line); border-radius: 10px; }
.ranges button.on { background: var(--gold-soft); color: var(--gold-ink); border-color: var(--gold-line); font-weight: 700; }
.ch-big { position: relative; color: var(--green); touch-action: pan-y; }
.ch-big.down { color: var(--red-ink); }
.ch-big svg { width: 100%; height: 190px; display: block; }
.ch-big svg stop { stop-color: currentColor; }
.ch-big svg #ch-line { stroke: currentColor; }
.ch-big #ch-grid line { stroke: var(--text); stroke-opacity: .08; }
.ch-big #ch-cursor { stroke: var(--text); stroke-opacity: .4; }
.ch-big #ch-dot { fill: currentColor; stroke: var(--card); stroke-width: 2; }
.ch-tip { position: absolute; top: 6px; background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; font-size: 12px; box-shadow: 0 4px 14px rgba(0,0,0,.25); pointer-events: none; white-space: nowrap; }
.ch-tip b { display: block; font-size: 13px; }
.ch-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 13px; }
.ch-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 6px; direction: ltr; }
.stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 12px 0 4px; }
.stat { background: var(--card2); border-radius: 12px; padding: 10px; text-align: center; }
.stat .k { font-size: 11px; color: var(--muted); }
.stat .v { font-size: 13.5px; font-weight: 700; margin-top: 4px; }
.ch-note { font-size: 11.5px; margin: 8px 0 0; }


.notice { display: flex; align-items: flex-start; gap: 14px; text-align: right; }
.notice-icon {
  flex: none; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center; font-size: 20px; line-height: 1;
  background: var(--gold-soft); border: 1px solid var(--gold-line);
}
.notice-title { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.notice-body { margin: 0; font-size: 13px; line-height: 1.75; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .mkt-pill.open > i, .live-dot.on { animation: none; }
}






.card.fold { padding: 0; }
.card.fold > summary {
  list-style: none; cursor: pointer; padding: 16px 18px;
  display: flex; align-items: center; gap: 8px;
}
.card.fold > summary::-webkit-details-marker { display: none; }
.card.fold > summary h3 { margin: 0; flex: 1; }


.card.fold > summary::after {
  content: ""; width: 7px; height: 7px; flex: none;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translateY(-2px); transition: transform .18s ease;
}
.card.fold[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.card.fold[open] > summary { border-bottom: 1px solid var(--line); }
.card.fold > *:not(summary) { margin-left: 18px; margin-right: 18px; }
.card.fold > *:last-child { margin-bottom: 18px; }

@media (prefers-reduced-motion: reduce) {
  .card.fold > summary::after { transition: none; }
}












.seg {
  display: flex; gap: 4px;
  background: var(--card2); border: 1px solid var(--line);
  border-radius: 12px; padding: 4px;
}
.seg button {
  flex: 1; padding: 7px 4px; font-size: 12px; font-weight: 600; border-radius: 9px;
  background: transparent; color: var(--muted); border: 1px solid transparent;
}
.seg button:hover:not(.on) { color: var(--text); }
.seg button.on { background: var(--gold); color: var(--on-gold); border-color: var(--gold-edge, var(--gold)); }


.seg button:focus-visible { outline-offset: 1px; }








.nx-quick {
  display: flex; gap: 4px; margin-bottom: 10px;
  background: var(--card2); border: 1px solid var(--line);
  border-radius: 12px; padding: 4px;
}
.nx-quick button {
  flex: 1; padding: 8px 4px; font-size: 13px; font-weight: 600; border-radius: 9px;
  background: transparent; color: var(--text-2); border: 1px solid transparent;
  min-height: 40px;
}
.nx-quick button:hover { color: var(--text); background: var(--surface-3); }

.nx-quick .nx-step { flex: 0 0 42px; color: var(--muted); font-size: 17px; font-weight: 500; }
.nx-quick .nx-step:hover { color: var(--gold-ink); }







.nx-note {
  margin: -2px 0 10px; font-size: 12px; color: var(--gold-ink);
  font-variant-numeric: tabular-nums;
}
.nx-note.lore {
  font-size: 11.5px; line-height: 1.7; font-variant-numeric: normal;
}








.nx-tray {
  display: flex; align-items: center; justify-content: center;
  gap: 5px; flex-wrap: wrap; min-height: 19px; margin: 0 0 8px;
  pointer-events: none;
}
.nx-seed {
  width: 14px; height: 16px;
  background: url("./landing/seed.webp") center/contain no-repeat;
  filter: drop-shadow(0 1px 2px var(--seed-shadow));
  animation: nxDrop .5s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes nxDrop {
  0%   { transform: translateY(-26px) scale(.5) rotate(-30deg); opacity: 0; }
  70%  { transform: translateY(3px)   scale(1.05); opacity: 1; }
  100% { transform: none; opacity: 1; }
}


.nx-seed.more {
  width: auto; height: auto; background: none; filter: none;
  font-size: 11px; color: var(--gold-ink); font-style: normal;
  font-variant-numeric: tabular-nums; align-self: center;
}

@media (prefers-reduced-motion: reduce) {
  .nx-seed { animation: none; }
}


.seg button.on.danger { background: var(--red-btn); border-color: var(--red-btn); color: var(--on-danger); }

.row { display: flex; gap: 10px; }
.row > * { flex: 1; }









button, .btn {
  font: inherit; font-weight: 600; border-radius: 12px;
  padding: 14px; cursor: pointer; color: var(--on-gold); background: var(--gold);
  border: 1px solid var(--gold-edge);
  transition: transform .05s ease, opacity .2s;
}
button:active { transform: scale(.98); }
button.secondary { background: var(--card2); color: var(--text); border: 1px solid var(--field-line); }









button.buy { background: var(--gold); color: var(--on-gold); }
button.sell {
  background: transparent; color: var(--text); border-color: transparent;
  box-shadow: inset 0 0 0 1px var(--field-line);
}
button.sell:hover, button.sell:focus-visible { box-shadow: inset 0 0 0 1px var(--gold-ink); }
button:disabled { opacity: .5; cursor: not-allowed; }

.lim-closed { margin-top: 10px; gap: 8px; }
.lim-closed button { font-size: 12.5px; padding: 9px 6px; white-space: nowrap; }
.lim-shut {
  margin: 0 0 12px; padding: 8px 11px; border-radius: 10px; font-size: 13px; line-height: 1.7;
  color: var(--gold-ink); background: var(--gold-soft); border: 1px solid var(--gold-line);
}




input, select, textarea {
  width: 100%; font: inherit; padding: 13px; border-radius: 12px;
  border: 1px solid var(--field-line); background: var(--card2); color: var(--text);
  margin-bottom: 10px;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
label { font-size: 12px; color: var(--muted); display: block; margin-bottom: 6px; }



input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }





.cal {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px; margin: 6px 0 12px; box-shadow: 0 10px 30px rgba(60, 52, 38, .18);
}
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 8px; font-weight: 700; }
.cal-nav {
  flex: 0 0 auto; width: 30px; height: 30px; padding: 0; border-radius: 6px;
  background: var(--card); border: 1px solid var(--line); color: var(--text);
  font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.cal-w { font-size: 11px; color: var(--muted); padding: 4px 0; }
.cal-d {
  padding: 6px 0; min-height: 34px; border-radius: 6px; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; user-select: none;
}
.cal-d:hover { background: var(--card2); }
.cal-d.empty { pointer-events: none; visibility: hidden; }
.cal-d.today { outline: 1px solid var(--gold-dim); }
.cal-d.rng { background: var(--gold-soft); }
.cal-d.sel { background: var(--gold-soft); color: var(--gold-ink, var(--text)); font-weight: 700; }
.cal-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; gap: 8px; }

.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; max-width: 480px; margin: 0 auto;
  display: flex; background: var(--card); border-top: 1px solid var(--line);

  padding-bottom: env(safe-area-inset-bottom);

  z-index: 20;
}
.tabbar button {
  flex: 1; background: none; border: none; color: var(--muted); border-radius: 0;
  padding: 12px 4px; font-size: 12px; font-weight: 600;
}
.tabbar button.active { color: var(--gold-ink); }


.tabbar button .ic { display: block; width: 22px; height: 22px; margin: 0 auto 3px; }
svg.ic, svg.ic-sm, .bank-ok svg {
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
svg.ic-sm { width: 15px; height: 15px; vertical-align: -2px; }





.or-line {
  display: flex; align-items: center; gap: 12px; margin: 16px 0 12px;
  color: var(--muted); font-size: 12px;
}
.or-line::before, .or-line::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); }
.btn-google {
  width: 100%; margin: 0; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--card2); color: var(--text); border: 1px solid var(--field-line);
  font-weight: 600;
}
.btn-google .g-logo { width: 18px; height: 18px; flex: 0 0 auto; }

.btn-passkey {
  width: 100%; margin: 10px 0 0; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--card2); color: var(--text); border: 1px solid var(--field-line); font-weight: 600;
}
.btn-passkey .ic { width: 20px; height: 20px; color: var(--gold-ink); }

.pk-list { display: flex; flex-direction: column; gap: 6px; margin: 0 0 8px; }
.pk-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--card2); border: 1px solid var(--line); border-radius: 12px; font-size: 13px;
}
.pk-row .pk-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pk-row small { color: var(--muted); font-size: 11.5px; }
.pk-row .tag { flex: 0 0 auto; }
.pk-row button { flex: 0 0 auto; margin: 0; padding: 6px 10px; font-size: 12px; }
.pk-empty { color: var(--muted); font-size: 13px; text-align: center; padding: 10px 0; }

.dev-others { width: 100%; margin: 0 0 6px; }
.dev-h { font-size: 14px; margin: 14px 0 6px; }
.dev-events { display: flex; flex-direction: column; max-height: 260px; overflow-y: auto; }
.dev-ev { display: flex; flex-direction: column; gap: 2px; padding: 8px 2px; border-bottom: 1px solid var(--line); font-size: 13px; }
.dev-ev:last-child { border-bottom: none; }
.dev-ev small { color: var(--muted); font-size: 11.5px; }
.dev-ev.bad > span { color: var(--red-ink); }
#auth .logo { color: var(--gold-ink); }

.list-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px;
}
.list-item:last-child { border-bottom: none; }


.list-item.removing {
  opacity: 0; max-height: 0 !important; padding-top: 0; padding-bottom: 0;
  border-bottom-color: transparent; transform: translateX(-8px);
}
.list-item .sub { font-size: 12px; color: var(--muted); margin-top: 3px; }



.tag {
  font-size: 11px; padding: 3px 8px; border-radius: 20px; font-weight: 600;
  border: 1px solid transparent;
}
.tag.COMPLETED, .tag.APPROVED, .tag.PAID, .tag.VERIFIED, .tag.RECONCILED,
.tag.CONFIRMED, .tag.SUCCESS { background: var(--green-soft); color: var(--green); border-color: var(--green-line); }


.tag.PENDING, .tag.PROCESSING_UPSTREAM, .tag.UNKNOWN, .tag.PROCESSING,
.tag.UPSTREAM_FILLED, .tag.BALANCE_LOCKED { background: var(--gold-soft); color: var(--gold-ink); border-color: var(--gold-line); }
.tag.FAILED, .tag.REJECTED, .tag.CANCELLED, .tag.MISMATCH,
.tag.FROZEN, .tag.UPSTREAM_REJECTED, .tag.NOT_FOUND { background: var(--red-soft); color: var(--red-ink); border-color: var(--red-line); }


.tag.info { background: var(--card2); color: var(--muted); border-color: var(--line); }


.notif .n-title { color: var(--muted); }
.notif.unread .n-title { color: var(--text); font-weight: 600; }
.notif.unread { border-inline-start: 2px solid var(--gold-ink); padding-inline-start: 10px; }



.bank-ok {
  font-size: 10px; font-weight: 600; color: var(--green); opacity: .75;
  margin-inline-start: 6px; white-space: nowrap;
}
.bank-ok svg { width: 11px; height: 11px; vertical-align: -1px; margin-inline-end: 2px; }

.bank-warn { font-size: 10px; padding: 2px 6px; margin-inline-start: 6px; }



.list-item.settled { animation: settled 1.2s ease; }
@keyframes settled {
  0% { background: var(--gold-soft); }
  100% { background: transparent; }
}





.wallet-card { padding: 0; overflow: hidden; }
.wbal { text-align: center; padding: 18px 18px 16px; background: var(--card2); border-bottom: 1px solid var(--line); }
.wbal .muted { font-size: 13px; }
.wbal-v { font-size: 22px; font-weight: 700; margin-top: 4px; }
.wtabs { display: flex; border-bottom: 1px solid var(--line); }
.wtabs button {
  flex: 1 1 0; margin: 0; padding: 16px 6px 14px; min-height: 52px; border: 0; border-radius: 0;
  background: none; color: var(--muted); font-size: 15px; font-weight: 600; position: relative;
}
.wtabs button::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 4px; border-radius: 4px 4px 0 0;
  background: var(--gold); opacity: 0; transition: opacity .15s;
}
.wtabs button.active { color: var(--text); font-weight: 700; }
.wtabs button.active::after { opacity: 1; }
.wtabs button:active { transform: none; }
.wpane { padding: 18px; }
.wpane > button[data-click="requestDelivery"], .wpane > button[data-click="requestWithdrawal"] { width: 100%; }
#wd-list .tag, #req-list .tag { white-space: nowrap; flex: none; }
#wd-list .wd-head .tag { margin-inline-start: 6px; vertical-align: middle; }
#wd-list .sub { overflow-wrap: anywhere; }
.wsub { font-size: 14px; margin: 18px 0 8px; padding-top: 14px; border-top: 1px solid var(--line); }

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

.subtabs button {


  flex: 0 0 auto; padding: 9px 14px; min-height: 40px; border-radius: 20px; font-size: 13px;
  background: var(--card2); color: var(--muted); border: 1px solid var(--line);
}
.subtabs button.active { background: var(--gold); color: var(--on-gold); border-color: var(--gold-edge, var(--gold)); }
.badge {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 5px;
  border-radius: 9px; background: var(--red-btn); color: var(--on-danger);
  font-size: 11px; line-height: 18px; text-align: center; font-weight: 700;
}
.subtabs button.active .badge { background: var(--on-gold); color: var(--gold); }





.card.foldable > h3 { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 8px; }
.card.foldable > h3::after {
  content: ""; margin-inline-start: auto; width: 7px; height: 7px; flex: 0 0 auto;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .15s ease; opacity: .55;
}
.card.folded > h3 { margin-bottom: 0; }
.card.folded > h3::after { transform: rotate(-135deg) translate(-2px, -2px); }


.card.folded > :not(h3) { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .card.foldable > h3::after { transition: none; }
}







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





a:focus-visible { border-radius: 6px; }

.tabbar button:focus-visible,
.subtabs button.active:focus-visible,
.seg button.on:focus-visible { outline-color: var(--text); }






.tag.kyc-off { background: var(--red-soft); color: var(--red-ink); border-color: var(--red-line); }


.tag.kyc-on  { background: var(--green-soft); color: var(--green); border-color: var(--green-line); }
.tag.kyc-wait { background: var(--gold-soft); color: var(--gold-ink); border-color: var(--gold-line); }

.pf-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
}
.pf-av {
  width: 46px; height: 46px; border-radius: 50%; background: var(--gold); color: var(--on-gold);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; flex: none;
}
.pf-who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.pf-name { font-size: 17px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }


.ptabs { display: flex; gap: 2px; margin: 0 0 12px; padding: 3px; background: var(--card2); border: 1px solid var(--line); border-radius: 12px; }
.ptabs button { flex: 1; margin: 0; padding: 8px 0; font-size: 12.5px; white-space: nowrap; background: none; color: var(--muted); border: none; border-radius: 9px; }
.ptabs button.on { background: var(--card); color: var(--text); font-weight: 700; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.pf-code {
  text-align: center; font-family: monospace; font-size: 22px; letter-spacing: 4px; padding: 10px;
  border: 1px dashed var(--gold-line); border-radius: 12px; background: var(--card2); margin-bottom: 10px;
}
.pf-exit { margin-top: 14px; }
.pf-exit .pf-item-t b { color: var(--red-ink); }
.pf-exit .pf-item-ic { color: var(--red-ink); }



.pf-h { font-size: 14px; margin: 22px 0 6px; }

.pf-item {
  display: flex; align-items: center; gap: 12px; width: 100%; margin: 4px 0 8px; padding: 12px 12px;
  background: var(--card2); color: var(--text); border: 1px solid var(--field-line); border-radius: 12px;
  text-align: start; font-weight: 400;
}

.apk-bar {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  background: var(--card2); border-bottom: 1px solid var(--line);
}
.apk-ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #1b2a22; }
.apk-ic svg { width: 22px; height: 22px; }
.apk-t { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.apk-t b { font-size: 13.5px; font-weight: 700; }
.apk-t small { font-size: 11px; color: var(--muted); }
.apk-get {
  flex: 0 0 auto; padding: 7px 14px; border-radius: 999px; text-decoration: none;
  background: var(--brand-gold); color: var(--on-gold); font-size: 13px; font-weight: 700;
}

a.pf-item { text-decoration: none; box-sizing: border-box; }
.pf-item-ic {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  background: var(--gold-soft); color: var(--gold-ink);
}
.pf-item-ic .ic { width: 18px; height: 18px; }
.pf-item-t { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pf-item-t b { font-size: 14px; font-weight: 700; }
.pf-item-t small { font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.pf-item-chev { flex: 0 0 auto; width: 18px; height: 18px; color: var(--muted); }
.pf-item:hover, .pf-item:focus-visible { border-color: var(--gold-line); }


.invite-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0 12px; }
.invite-btn {
  display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 8px 2px 6px; margin: 0;
  background: none; border: 0; color: var(--text-2); font-size: 11.5px; font-weight: 600; border-radius: 12px;
}
.invite-btn:hover, .invite-btn:focus-visible { background: var(--card2); }
.invite-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; }
.invite-ic svg { width: 46px; height: 46px; display: block; }
.invite-ic svg.brand { fill: currentColor; }
.invite-btn.tg .invite-ic { color: #2aabee; }
.invite-btn.wa .invite-ic { color: #25d366; }
.invite-btn.bale .invite-ic { color: #37b26c; }
.invite-btn.copy .invite-ic { background: var(--card2); border: 1px solid var(--field-line); color: var(--gold-ink); }
.invite-btn.copy .invite-ic .ic { width: 20px; height: 20px; }



.fullpage {
  position: fixed; inset: 0; z-index: 50; background: var(--bg); display: flex; flex-direction: column;
}
.fullpage-bar {
  display: flex; align-items: center; gap: 6px;
  padding: max(14px, calc(env(safe-area-inset-top) + 8px)) 12px 10px;
  border-bottom: 1px solid var(--line); background: var(--bg);
}
.fullpage-bar h2 { margin: 0; font-size: 17px; }
.fullpage-back {
  width: 40px; height: 40px; padding: 0; margin: 0; border-radius: 50%; display: grid; place-items: center;
  background: none; border: 0; color: var(--text);
}
.fullpage-back .ic { width: 22px; height: 22px; transform: scaleX(-1); }
.fullpage-back:hover, .fullpage-back:focus-visible { background: var(--card2); }
.fullpage-body { flex: 1 1 auto; overflow-y: auto; padding: 20px 20px calc(24px + env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.fullpage-body form { max-width: 420px; margin: 0 auto; }
.fullpage-body label { margin-top: 6px; }
.pp-hint { margin: -6px 0 10px; }
#pp-go { width: 100%; margin-top: 8px; }

.done-box { max-width: 420px; margin: 40px auto 0; text-align: center; }
.done-mark {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 14px;
  background: var(--green-soft); color: var(--green); border: 1px solid var(--green-line);
}
.done-mark .ic { width: 30px; height: 30px; stroke-width: 2.2; }
.done-box h3 { margin: 0 0 6px; font-size: 17px; }
.done-box p { margin: 0 0 18px; line-height: 1.8; }
.done-box button { width: 100%; }


#profile-overlay .kv { font-size: 14px; }

.ltr-input { direction: ltr; text-align: center; letter-spacing: 2px; }
#kyc-form label { display: block; font-size: 13px; color: var(--muted); margin: 12px 0 6px; }
#kyc-form label:first-child { margin-top: 0; }
#kyc-form input {
  width: 100%; min-height: 48px; padding: 0 14px;
  background: var(--card2); border: 1px solid var(--field-line); border-radius: 12px;
  color: var(--text); font: inherit;
}

.hidden { display: none !important; }
.center { text-align: center; }
.muted { color: var(--muted); font-size: 13px; }
.pos { color: var(--green); } .neg { color: var(--red); }




.qv { border-radius: 6px; padding: 2px 6px; margin: -2px -6px; }
.qv.qflash-up   { animation: qUp   .8s ease; }
.qv.qflash-down { animation: qDown .8s ease; }
@keyframes qUp   { 0% { background: var(--green-soft); } 100% { background: transparent; } }
@keyframes qDown { 0% { background: var(--red-soft); } 100% { background: transparent; } }

.maxline {
  font-size: 12px; color: var(--gold-ink); margin: -6px 0 10px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; user-select: none;
}

#q-confirm { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-inline: 8px; }

.maxline.hit { animation: maxhit .45s ease; }
@keyframes maxhit { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .maxline.hit { animation: none; font-weight: 700; } }



#toast-host {
  position: fixed; bottom: calc(var(--tabbar-h) + 22px + env(safe-area-inset-bottom)); left: 50%;
  transform: translateX(-50%); z-index: 100;
  display: flex; flex-direction: column-reverse; align-items: center; gap: 8px;
  width: max-content; max-width: min(90vw, 440px); pointer-events: none;
}
.toast {
  background: var(--card2); border: 1px solid var(--line); color: var(--text);
  padding: 12px 18px; border-radius: 12px; font-size: 14px;
  max-width: 100%; box-shadow: var(--shadow-lg);
}


.toast.err, .toast.ok { display: flex; align-items: center; gap: 9px; text-align: start; }
.toast .toast-mark {
  flex: none; display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%;
  font-style: normal; font-size: 12px; font-weight: 700; line-height: 1;
}
.toast.err { border-color: var(--red); }
.toast.err .toast-mark { background: var(--red-soft); color: var(--red-ink); }
.toast.ok { border-color: var(--green); }
.toast.ok .toast-mark { background: var(--green-soft); color: var(--green); }











.overlay {
  --gap-top: max(20px, calc(env(safe-area-inset-top) + 14px));
  --gap-bottom: max(20px, calc(env(safe-area-inset-bottom) + 14px));
  position: fixed; inset: 0; background: var(--scrim); display: flex;
  align-items: center; justify-content: center; z-index: 50;
}

#ask-overlay { z-index: 70;
  padding: var(--gap-top) 20px var(--gap-bottom);
}



.sheet {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow-lg);
  padding: 22px; width: 100%; max-width: 380px;
  max-height: calc(100dvh - var(--gap-top) - var(--gap-bottom));
  display: flex; flex-direction: column;
}
.sheet h2 { margin: 0 0 4px; }


.sheet-scroll {
  overflow-y: auto; flex: 1; min-height: 0; margin: 0 -22px; padding: 0 22px;

  -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y;
}
.sheet-actions { flex-shrink: 0; padding-top: 14px; }
.kv { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.kv:last-of-type { border-bottom: none; }
.kv .k { color: var(--muted); }
.spin { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--track); border-top-color: var(--gold); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }














#auth {
  min-height: 100svh;
  padding: 40px 24px 76px;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
}





#auth .logo { text-align: center; margin-bottom: 10px; line-height: 0; }
#auth .logo img { width: 72px; height: 72px; object-fit: contain; }
#auth h1 { text-align: center; margin: 0 0 4px; font-size: 24px; }


.au-lede {
  margin: 0 0 26px; color: var(--muted);
  font-size: 14px; font-weight: 600; text-align: center;
}
.au-lede:empty { display: none; }
#auth h1:has(+ .au-lede:empty) { margin-bottom: 22px; }


.au-hint { font-size: 12px; line-height: 1.9; margin: -2px 0 8px; }


#auth form > button[type="submit"] { width: 100%; }


#au-phone, #au-code { direction: ltr; text-align: center; letter-spacing: 2px; }

#au-pass { text-align: center; }
#au-code { font-size: 20px; letter-spacing: 8px; }
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }


.err {
  margin: -6px 0 12px; font-size: 13px; color: var(--red-ink);
  line-height: 1.6;
}




.bd-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.bd-head h3 { margin: 0; font-size: 14px; color: var(--muted); font-weight: 600; letter-spacing: .3px; text-transform: uppercase; }
.bd-live { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bd-live.stale { color: var(--red); }



.bd-src { background: var(--card2); border-radius: 14px; padding: 12px; }
.bd-src-head { display: flex; align-items: center; gap: 8px; font-size: 11px; margin-bottom: 10px; }
.chip {
  font-size: 10px; font-weight: 700; letter-spacing: .5px; padding: 2px 8px;
  border-radius: 999px; background: var(--line); color: var(--muted);
}
.bd-src-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bd-src-side { text-align: center; }
.bd-src-side .k { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.bd-src-side b { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bd-src-side .s { font-size: 13px; font-weight: 600; opacity: .7; margin-top: 6px; font-variant-numeric: tabular-nums; }
.bd-src-side .u { font-size: 10px; color: var(--muted); margin-top: 1px; }

.bd-src-side.buy b, .bd-src-side.buy .s { color: var(--green); }
.bd-src-side.sell b, .bd-src-side.sell .s { color: var(--red); }
.bd-src-spread { text-align: center; font-size: 11px; color: var(--muted); margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.bd-src-spread b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }


.bd-ctl { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 14px; }
.bd-ctl-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 13px; font-weight: 600; }
.bd-master { display: flex; align-items: stretch; gap: 10px; }
.bd-master-val { flex: 1; background: var(--card2); border-radius: 14px; padding: 10px 6px; text-align: center; }


.bd-halves { display: flex; }
.bd-half { flex: 1; }
.bd-half + .bd-half { border-inline-start: 1px solid var(--line); }
.bd-half .lbl { display: block; font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.bd-half b { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bd-master-cap { font-size: 11px; color: var(--muted); margin-top: 2px; }


.bd-half b.bump, .bd-src b.bump, .bd-src .s.bump { animation: bd-bump .35s ease-out; }
@keyframes bd-bump { 0% { transform: scale(1.12); } 100% { transform: scale(1); } }

.bd-arrow { flex: 0 0 64px; padding: 0; line-height: 0; background: var(--card2); border: 1px solid var(--line); border-radius: 14px; }
.bd-arrow:active { background: var(--line); }
.bd-arrow.up { color: var(--green); }
.bd-arrow.down { color: var(--red); }
.bd-arrow[disabled] { opacity: .45; }

.bd-single { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.bd-single .k { font-size: 11px; color: var(--muted); white-space: nowrap; }
.bd-single-btns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; flex: 1; }
.bd-single-btns button { padding: 7px 0; font-size: 12px; background: var(--card2); color: var(--muted); border: 1px solid var(--line); border-radius: 10px; }
.bd-single-btns button:active { background: var(--line); color: var(--text); }
.bd-single-btns button.up { color: var(--green); }
.bd-single-btns button.down { color: var(--red); }


.bd-ours { text-align: center; font-size: 12px; color: var(--muted); margin-top: 12px; }
.bd-ours b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.bd-ours b.bump { animation: bd-bump .35s ease-out; }




.tbl-scroll { overflow-x: auto; margin: 0 -2px; -webkit-overflow-scrolling: touch; }
.bd-table { width: 100%; min-width: 340px; margin-top: 14px; border-collapse: collapse; font-size: 12px; }
.bd-table th { font-weight: 600; color: var(--muted); text-align: end; padding: 8px 4px; border-bottom: 1px solid var(--line); font-size: 11px; }
.bd-table th:first-child, .bd-table td:first-child { text-align: start; }
.bd-table td { text-align: end; padding: 9px 4px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.bd-table tr:last-child td { border-bottom: none; }
.bd-table .lvl { font-weight: 600; }



.bd-table .grp { border-inline-start: 1px solid var(--line); padding-inline-start: 10px; }
.bd-table thead .sub th { font-size: 10px; color: var(--muted); font-weight: 600;
  text-align: center; padding: 0 4px 8px; border-bottom: 1px solid var(--line); }
.bd-table thead tr:first-child th { border-bottom: none; padding-bottom: 4px; }

.bd-table .mrg { color: var(--green); }






.bd-table .mrg.bad { color: var(--red); font-weight: 700; }
.bd-table .mrg.bad::before {
  content: "!"; display: inline-grid; place-items: center;
  width: 14px; height: 14px; margin-inline-end: 5px; vertical-align: -2px;
  border-radius: 50%; background: var(--red-soft); border: 1px solid var(--red-line);
  font-size: 10px; line-height: 1;
}

.mk-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.mk-head h3 { font-size: 14px; color: var(--muted); font-weight: 600; letter-spacing: .3px; text-transform: uppercase; }
.mk-step { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin: 0; }
.mk-step select { width: auto; margin: 0; padding: 6px 8px; font-size: 12px; }

.mk-row { border-top: 1px solid var(--line); padding: 14px 0 4px; }
.mk-row:first-child { border-top: none; padding-top: 0; }
.mk-level { font-weight: 700; margin-bottom: 10px; }
.mk-field { display: inline-block; width: calc(50% - 5px); }
.mk-field + .mk-field { margin-inline-start: 10px; }


.stepper { display: flex; align-items: stretch; gap: 6px; }
.stepper input { text-align: center; margin: 0; }
.stepper .st {
  flex: 0 0 38px; padding: 0; background: var(--card2); color: var(--text);
  border: 1px solid var(--line); border-radius: 12px; line-height: 0;
}
.stepper .st:active { background: var(--line); }

.mk-prev { font-size: 12px; color: var(--muted); margin: 10px 0 0; line-height: 1.9; }
.mk-prev b { color: var(--text); font-weight: 600; }


.mk-prev.bad { color: var(--red); }
.mk-save { padding: 10px; margin-top: 10px; width: 100%; }




.warn {
  margin-top: 8px;
  padding: 9px 11px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--warn);
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
}









.gate-note {
  margin-bottom: 12px; padding: 10px 12px; border-radius: 10px;
  background: var(--warn-bg); border: 1px solid var(--warn-line);
  color: var(--text); font-size: 13px; line-height: 1.9; text-align: right;
}
.gate-note button {
  display: inline; width: auto; margin: 0 6px 0 0; padding: 0;
  background: none; border: 0; border-radius: 0;
  color: var(--gold-ink); font: inherit; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

header .tag { white-space: nowrap; }


input.locked {
  background: var(--bg); color: var(--muted);
  border-style: dashed; cursor: default;
}





.cal-sel {
  flex: 1 1 auto; min-width: 0; text-align: center; text-align-last: center;
  background: transparent; color: var(--text);
  border: 0; border-radius: 6px; padding: 4px 2px;
  font: inherit; font-size: 14px; font-weight: 700; appearance: none; -webkit-appearance: none;
}
.cal-sel:focus { outline: 1px solid var(--gold-dim); }

.field-row { display: flex; align-items: stretch; gap: 8px; }
.field-row input { flex: 1 1 auto; min-width: 0; }
.field-row button { flex: 0 0 auto; width: auto; margin: 0; padding: 0 14px; }
.field-row button .ic { width: 20px; height: 20px; }











.dropzone {
  display: grid; justify-items: center; gap: 6px;
  width: 100%; margin: 0 0 12px; padding: 20px 16px;
  background: var(--card2); color: var(--text);
  border: 1px dashed var(--line); border-radius: 14px;
  font: inherit; font-weight: 400; text-align: center; cursor: pointer;
}
.dz-badge {
  display: grid; place-items: center; width: 40px; height: 40px;
  margin-bottom: 2px; border-radius: 50%;
  background: var(--gold-soft); color: var(--gold-ink);
}
.dz-badge .ic { width: 20px; height: 20px; }
.dz-title { font-size: 14px; font-weight: 600; }

.dz-hint { font-size: 12px; color: var(--muted); }
.dropzone:hover, .dropzone:focus-visible {
  border-color: var(--gold-dim); background: var(--surface-3);
}



.filecard {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 0 0 12px; padding: 12px;
  background: var(--card2); border: 1px solid var(--line); border-radius: 14px;
}
.filecard-thumb {
  flex: 0 0 auto; width: 56px; height: 56px; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--line); background: var(--bg);
}
.filecard-body { min-width: 0; }
.filecard-title { font-size: 13px; font-weight: 600; }
.filecard-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.filecard-acts { display: flex; gap: 16px; margin-top: 8px; }




.kw-bar { display: flex; gap: 5px; margin: 0 0 12px; }
.kw-bar:empty { display: none; }
.kw-bar i { flex: 1; height: 5px; border-radius: 3px; background: var(--line); }
.kw-bar i.ok { background: var(--green); }
.kw-bar i.on { background: var(--gold); }
.kw-steps { display: flex; flex-direction: column; gap: 7px; }
.kw-st { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); }
.kw-st .n { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: var(--line); color: var(--muted); }
.kw-st b { display: block; font-size: 14px; }
.kw-st span.s { display: block; font-size: 12px; color: var(--muted); }
.kw-st.ok .n { background: var(--green-soft); color: var(--green); }
.kw-st.wait .n { background: var(--warn-bg); color: var(--warn); }
.kw-st.on { border-color: var(--gold-line); background: var(--gold-soft); }
.kw-st.on .n { background: var(--gold); color: var(--on-gold); }
.kw-st.rej { border-color: var(--red-line); background: var(--red-soft); }
.kw-st.rej .n { background: var(--red-soft); color: var(--red-ink); }
.kw-st.rej span.s { color: var(--red-ink); }
.kw-st .kw-edit { margin-inline-start: auto; background: none; border: 0; color: var(--gold-ink); font: inherit; font-size: 12.5px; padding: 4px; cursor: pointer; }

.ghost-btn {
  width: auto; margin: 0; padding: 0; background: none; border: 0;
  color: var(--gold-ink); font: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer;
}
.ghost-btn.danger { color: var(--red-ink); }
.ghost-btn:hover { text-decoration: underline; text-underline-offset: 3px; }









.receipt-shot {
  min-height: 180px; border-radius: 10px; background: #fff;
  border: 1px solid var(--line);
  display: grid; place-items: center;
}
.receipt-full { display: block; width: 100%; height: auto; border-radius: 10px; }



.chip-btn {
  display: inline-flex; align-items: center; gap: 6px;
  width: auto; margin: 8px 0 0; padding: 5px 10px;
  background: none; border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); font: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer;
}
.chip-btn .ic { width: 14px; height: 14px; }
.chip-btn:hover { border-color: var(--gold-dim); color: var(--gold-ink); }






#au-step-waiting { text-align: center; padding: 8px 0 4px; }
.wait-mark {
  display: grid; place-items: center;
  width: 56px; height: 56px; margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--gold-soft); color: var(--gold-ink);
}
.wait-mark .ic { width: 26px; height: 26px; }
#au-step-waiting button { width: auto; margin: 0 auto; padding: 0 18px; }

#su-ref { letter-spacing: .18em; text-transform: uppercase; }








.q-after {


  margin-top: 8px; padding-top: 4px;
}


.q-after .k { color: var(--muted); }
.q-after .kv span:last-child { color: var(--text); font-weight: 600; }
.q-valid {
  margin: 10px 0 0; font-size: 12px; color: var(--muted); text-align: center;
  font-variant-numeric: tabular-nums;
}










.sheet-actions .row > button.secondary { flex: 0 0 38%; }
.sheet-actions .row > button:not(.secondary) { flex: 1 1 auto; }




.presets { display: flex; gap: 8px; margin: -4px 0 12px; }
.presets button {
  flex: 1; width: auto; margin: 0; padding: 9px 4px;
  background: var(--card2); border: 1px solid var(--line); color: var(--text);
  font-size: 13px; font-weight: 600; border-radius: 10px;
  font-variant-numeric: tabular-nums;
}
.presets button:active { transform: scale(.97); }



.leadtime {
  margin: -4px 0 12px; padding: 9px 11px; border-radius: 10px;
  background: var(--card2); border: 1px solid var(--line);
  color: var(--muted); font-size: 12px; line-height: 1.9;
}



.refcopy {
  width: auto; margin: 0; padding: 2px 0; background: none; border: 0;
  color: inherit; font: inherit; direction: ltr; text-align: left;
  cursor: pointer; border-bottom: 1px dashed var(--line);
}
.refcopy:hover, .refcopy:focus-visible { color: var(--text); }
.refcopy.copied { color: var(--green); border-bottom-color: transparent; }


.list-item.tappable { cursor: pointer; }
.list-item.tappable:active { background: var(--card2); }
.list-item.tappable:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 8px;
}


.price-dir { margin-inline-start: 6px; font-size: 15px; font-weight: 700; }
.price-dir.up { color: var(--green); }
.price-dir.down { color: var(--red-ink); }









.sk { display: block; border-radius: 8px; background: var(--card2); animation: skPulse 1.4s ease-in-out infinite; }
.sk-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.sk-row:last-child { border-bottom: none; }
.sk-line { height: 12px; margin-bottom: 8px; }
.sk-line:last-child { margin-bottom: 0; }
.sk-w70 { width: 70%; } .sk-w45 { width: 45%; } .sk-w30 { width: 30%; }
.sk-tag { width: 62px; height: 24px; border-radius: 999px; flex: 0 0 auto; }
@keyframes skPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }




.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}




.offline-bar {
  position: sticky; top: 0; z-index: 60;
  padding: 9px 14px; text-align: center;
  background: var(--warn-bg); border-bottom: 1px solid var(--warn-line);
  color: var(--warn); font-size: 12.5px; line-height: 1.7;
}


.toast.has-action {
  display: flex; align-items: center; gap: 10px; text-align: start;














  pointer-events: auto;
}
.toast.has-action button {
  width: auto; margin: 0; padding: 6px 12px; flex: 0 0 auto;
  background: var(--gold); color: var(--on-gold); border-radius: 8px;
  font-size: 12.5px; font-weight: 700;
}
.toast.has-action .toast-x {
  background: none; border: none; color: var(--muted); padding: 6px 4px; font-weight: 400;
}





.empty { padding: 26px 12px 20px; text-align: center; }
.empty-mark {
  display: grid; place-items: center; width: 46px; height: 46px;
  margin: 0 auto 12px; border-radius: 50%;
  background: var(--card2); color: var(--muted);
}
.empty-mark .ic { width: 22px; height: 22px; }
.empty-title { margin: 0 0 5px; font-size: 14px; font-weight: 600; }
.empty-body { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 2; }
.empty-cta { width: auto; margin: 14px auto 0; padding: 10px 18px; }





@media (prefers-reduced-motion: no-preference) {
  .overlay:not(.hidden) { animation: ovFade .16s ease-out; }
  .overlay:not(.hidden) .sheet { animation: sheetUp .2s cubic-bezier(.2,.8,.3,1); }
  @keyframes ovFade { from { opacity: 0; } }
  @keyframes sheetUp { from { transform: translateY(10px); opacity: .6; } }
}











.theme-btn { color: var(--muted); }
.theme-btn .ic { width: 20px; height: 20px; }
.theme-btn:hover { color: var(--text); }


.theme-btn .sun-core { fill: currentColor; stroke: none; }








.theme-anim, .theme-anim * {
  transition: background-color .18s ease, color .18s ease,
              border-color .18s ease, box-shadow .18s ease !important;
}
@media (prefers-reduced-motion: reduce) {
  .theme-anim, .theme-anim * { transition: none !important; }
}




.terms-agree {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 4px 4px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.7;
}
.terms-agree input { width: 18px; height: 18px; flex: none; accent-color: var(--gold); }
#terms-agree .terms-agree { align-items: flex-start; padding: 8px 4px 0; font-size: 13px; line-height: 1.7; }
#terms-agree .terms-agree input { margin-top: 3px; }
#terms-body h3 { margin: 18px 0 6px; font-size: 15px; }
#terms-body p { margin: 0 0 8px; line-height: 2; font-size: 14px; }



.depmsg {
  border: 1px dashed var(--gold-line); background: var(--gold-soft); border-radius: 12px;
  padding: 12px 14px; margin: 10px 0; font-size: 14px; line-height: 2; color: var(--gold-ink);
}
.share-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 4px 0 14px; }
.share {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 12px;
  font-weight: 700; font-size: 14px; text-decoration: none; color: #fff; flex: 1; justify-content: center;
}
.share .ic { width: 18px; height: 18px; stroke: currentColor; }
.share.tg { background: #2aabee; }
.share.bale { background: #37b26c; }
.share[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.steps { margin: 0; padding-inline-start: 20px; font-size: 13px; color: var(--text-2); line-height: 1.9; }
.tag.OPEN, .tag.PARTIAL { background: var(--gold-soft); color: var(--gold-ink); border-color: var(--gold-line); }
.tag.DONE { background: var(--green-soft); color: var(--green); border-color: var(--green-line); }
.tag.READY { background: var(--green); color: #fff; border-color: var(--green); }
.list-item.ready { border-inline-start: 3px solid var(--green); }
.ready-line { color: var(--green); font-weight: 700; font-size: 13px; margin: 4px 0; }
.stmt-sum { display: flex; gap: 12px; margin-bottom: 10px; font-size: 13px; }
.stmt-sum span { flex: 1; background: var(--card2); border-radius: 10px; padding: 8px 10px; }
.stmt-sum b { display: block; font-size: 15px; margin-top: 2px; }
.stmt-row { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.stmt-row:last-child { border-bottom: none; }
.stmt-row.reversed .stmt-desc { text-decoration: line-through; color: var(--muted); }

.stmt-row.tappable { cursor: pointer; }
.stmt-row.tappable:active { background: var(--card2); }
.rc-clip { font-size: 11px; color: var(--gold-ink); background: var(--gold-soft); border-radius: 999px; padding: 0 7px; white-space: nowrap; }
.doc-rc { margin-top: 10px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--card2); }
.doc-rc img { display: block; width: 100%; height: auto; }
.doc-rc p { margin: 14px; text-align: center; }
.doc-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.doc-strip::-webkit-scrollbar { display: none; }
.doc-shot { flex: 0 0 100%; scroll-snap-align: center; min-height: 80px; display: grid; place-items: center; }
.doc-nav { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 6px; font-size: 13px; color: var(--muted); background: var(--card); border-bottom: 1px solid var(--line); }
.doc-nav .ghost-btn { font-size: 18px; line-height: 1; padding: 4px 12px; }
.stmt-desc { display: flex; justify-content: space-between; gap: 8px; }
.stmt-desc .sub { font-size: 12px; color: var(--muted); white-space: nowrap; }
.stmt-row { padding: 10px 0; }
.stmt-desc > span:first-child { line-height: 1.7; }
.stmt-chg { display: flex; gap: 14px; margin-top: 4px; font-size: 13px; font-variant-numeric: tabular-nums; }

.stmt-chg b { display: inline-flex; direction: ltr; gap: 4px; font-weight: 600; }
.stmt-chg b .n { unicode-bidi: bidi-override; direction: ltr; }
.stmt-chg b .u { font-weight: 400; }
.stmt-bal { margin-top: 3px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.stmt-bal b { font-weight: 400; color: var(--muted); }
.pos { color: var(--green); } .neg { color: var(--red-ink); }






.sc-value b { transition: color .25s; }
.sc-value b.up { color: var(--green, #2e9e5b); }
.sc-value b.down { color: var(--red, #c8453c); }
.sc-stack {
  position: relative; height: 560px; margin: 0;


  overflow: hidden;
}
.sc-card {
  position: absolute; inset: 0 30px; background: var(--card); border: 1px solid var(--line);
  border-radius: 18px; padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px;

  will-change: transform, opacity; transition: transform .24s cubic-bezier(.2,.7,.2,1), opacity .24s;
  touch-action: pan-y; user-select: none; -webkit-user-select: none;

  overflow: hidden;
}
.sc-card > * { flex: 0 0 auto; }


.sc-card.side-l { transform: translate3d(calc(-100% - 8px),0,0) scale(.96); opacity: .72; z-index: 1; }
.sc-card.side-r { transform: translate3d(calc(100% + 8px),0,0) scale(.96); opacity: .72; z-index: 1; }


.sc-card.taken .sc-photo img { filter: grayscale(.8) brightness(.55); }
.sc-card.taken .sc-where, .sc-card.taken .sc-specs, .sc-card.taken .sc-value, .sc-card.taken .sc-bar, .sc-card.taken .sc-meta { opacity: .45; }
.sc-mark {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.sc-mark span {
  transform: rotate(-14deg); padding: 8px 18px; border: 2px solid rgba(255,255,255,.85); border-radius: 8px;
  color: #fff; font-weight: 800; font-size: 16px; letter-spacing: .02em; background: rgba(0,0,0,.35);
  text-shadow: 0 1px 2px rgba(0,0,0,.6); white-space: nowrap;
}
.sc-mark.mine span { border-color: var(--gold); color: var(--gold); }
.sc-card.top { z-index: 3; cursor: grab; }

.sc-stack.still .sc-card { transition: none; }
.sc-stack.still .sc-card.top { cursor: grabbing; }
.sc-photo {
  position: relative; border-radius: 14px; overflow: hidden; background: #000;
  flex: 1 1 auto !important; min-height: 90px;
}
.sc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; }


.sc-drag-label {
  position: absolute; top: 12px; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: rgba(0,0,0,.5); color: var(--text); opacity: 0; transition: opacity .12s; pointer-events: none;
}
.sc-drag-label.next { left: 12px; }
.sc-drag-label.prev { right: 12px; }


.sc-where { text-align: center; font-size: 12.5px; color: var(--muted); margin: 0; }
.sc-specs {
  display: flex; justify-content: space-between; align-items: baseline; gap: 6px;
  padding: 10px 2px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: 13px; white-space: nowrap;
}
.sc-specs small { color: var(--muted); font-size: 12px; }
.sc-specs b { font-weight: 700; }
.sc-value { text-align: center; margin: 2px 0 0; line-height: 1.25; }
.sc-value b { font-size: 23px; font-weight: 800; letter-spacing: -.01em; }
.sc-value small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }



.sc-bar { height: 6px; background: var(--surface-3, #232932); border-radius: 6px; overflow: hidden; margin: 6px 2px 0; direction: ltr; }
.sc-bar i { display: block; height: 100%; background: var(--gold); width: 0; border-radius: 6px; transition: width .4s; font-style: normal; }
.sc-bar.full i { background: var(--green, #33c27f); }
.sc-meta { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; margin: 0 2px; font-size: 12px; color: var(--muted); }
.sc-meta > :last-child { text-align: left; }
.sc-meta .ok { color: var(--green, #33c27f); font-weight: 700; }
.sc-meta .pct { font-weight: 800; color: var(--text); font-size: 13px; }
.sc-left { text-align: center; margin: 2px 0 0; font-size: 14px; line-height: 1.5; }
.sc-left b { font-weight: 700; }
.sc-left small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }
.sc-left.ready { color: var(--gold-ink); }
.sc-actions { display: flex; margin-top: 2px; }
.sc-actions button { margin: 0; flex: 1 1 auto; padding: 14px 8px; font-size: 15px; border-radius: 14px; }
.sc-hint { text-align: center; font-size: 11px; margin: 6px 0 0; }

button.link { background: none; border: 0; padding: 0; color: var(--gold-ink); font: inherit; font-weight: 700; text-decoration: underline dotted; cursor: pointer; }
.sheet-sm { max-width: 340px; }

.ph-sheet { max-width: 320px; padding: 18px; text-align: center; }
.ph-sheet h2 { font-size: 17px; }
.ph-sheet #ph-to { font-size: 13px; margin: 4px 0 12px; min-height: 1.6em; }
.ph-sheet #ph-code { text-align: center; font-size: 20px; letter-spacing: 6px; padding: 9px; margin-bottom: 6px; }
.ph-sheet .err { margin: 0 0 4px; font-size: 13px; }
.ph-sheet .ph-resend { display: block; margin: 2px auto 14px; }
.ph-sheet .ph-resend:disabled { color: var(--muted); opacity: 1; }
.ph-sheet .row { gap: 8px; }
.ph-sheet .row > button { flex: 1 1 0; padding: 11px; font-size: 15px; }
.sheet-sm p { margin: 8px 0 0; line-height: 1.7; }

.pc-img { width: 100%; max-height: 180px; object-fit: cover; border-radius: 12px; margin-bottom: 12px; background: #000; }


.photo-overlay { position: fixed; inset: 0; background: #000; z-index: 60; display: flex; flex-direction: column; }
.photo-stage { flex: 1 1 auto; overflow: hidden; display: flex; align-items: center; justify-content: center; touch-action: pinch-zoom; }
.photo-stage img { max-width: 100%; max-height: 100%; transform-origin: center; transition: transform .2s; -webkit-user-drag: none; }
.photo-stage img.zoomed { transition: none; }
.photo-close {
  position: absolute; top: max(14px, env(safe-area-inset-top)); left: 14px; width: 40px; height: 40px; padding: 0;
  border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; border: 0; font-size: 18px; z-index: 2;
}
.photo-counter { position: absolute; bottom: max(18px, env(safe-area-inset-bottom)); left: 0; right: 0; text-align: center; color: #aaa; font-size: 13px; }





.chat-overlay { padding: 0; align-items: stretch; }
.chat-sheet {
  max-width: 480px; max-height: none; height: 100dvh; margin: 0 auto;
  border-radius: 0; border: none; padding: 0; background: var(--bg);
}
@media (min-width: 520px) {
  .chat-overlay { padding: var(--gap-top) 20px var(--gap-bottom); align-items: center; }
  .chat-sheet { height: min(720px, calc(100dvh - var(--gap-top) - var(--gap-bottom))); border-radius: 18px; border: 1px solid var(--line); }
}
.chat-head {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  padding-top: max(14px, env(safe-area-inset-top)); background: var(--card); border-bottom: 1px solid var(--line);
}
.chat-av {
  width: 38px; height: 38px; border-radius: 50%; background: var(--gold); color: var(--on-gold);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; flex-shrink: 0;
}
.chat-who { display: flex; flex-direction: column; min-width: 0; }
.chat-who b { font-size: 15px; }
.chat-who small { font-size: 11px; color: var(--muted); }
.chat-who small.on { color: var(--green); }
.chat-x { margin-inline-start: auto; background: none; border: none; color: var(--muted); font-size: 18px; padding: 6px 8px; width: auto; }
.chat-msgs {
  flex: 1; min-height: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.chat-m { max-width: 80%; padding: 9px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.7; word-break: break-word; }
.chat-m.op { background: var(--card); border: 1px solid var(--line); align-self: flex-start; border-bottom-right-radius: 4px; }
.chat-m.me { background: var(--gold); color: var(--on-gold); align-self: flex-end; border-bottom-left-radius: 4px; }
.chat-m .t { display: block; font-size: 10px; margin-top: 3px; color: var(--muted); }
.chat-m.me .t { color: rgba(11, 13, 16, .6); }
.chat-m.sys { align-self: center; max-width: 92%; font-size: 11.5px; color: var(--muted); background: var(--card); border: 1px solid var(--line); padding: 5px 12px; border-radius: 12px; text-align: center; }
.chat-img { display: block; max-width: 220px; max-height: 220px; border-radius: 10px; margin-bottom: 4px; }
.chat-doc { display: inline-block; margin-bottom: 4px; text-decoration: underline; }
.chat-inp {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  padding-bottom: max(10px, env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--line);
}
.chat-inp input[type="text"] { flex: 1; margin: 0; border-radius: 20px; padding: 10px 14px; }
.chat-attach, .chat-send { width: 40px; height: 40px; border-radius: 50%; padding: 0; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.chat-attach { background: none; border: 1px solid var(--line); color: var(--muted); }
.chat-send { background: var(--text); color: var(--bg); border: none; }
.chat-send .ic, .chat-attach .ic { width: 20px; height: 20px; }



.vid-phrase { font-size: 22px; font-weight: 700; text-align: center; line-height: 1.7;
  padding: 10px 12px; margin: 0 0 12px; border-radius: 12px; background: var(--card2); color: var(--text); }
.vid-box { position: relative; aspect-ratio: 3 / 4; max-height: 46vh; margin: 0 auto; border-radius: 14px;
  overflow: hidden; background: var(--surface-3); }
.vid-box video { width: 100%; height: 100%; object-fit: cover; display: block; }
#vid-live { transform: scaleX(-1); }
.vid-rec { position: absolute; top: 10px; inset-inline-start: 10px; display: flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px; background: var(--scrim); color: var(--text); font-size: 13px; }
.vid-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); }














.a2-lede { margin: 4px 0 0; font-size: 13px; line-height: 1.8; }

@media (max-height: 600px) { .a2-lede { display: none; } }
.a2-phone { width: fit-content; margin: 8px auto 2px; padding: 5px; border-radius: 30px; background: var(--ios-bezel); }
.a2-screen {
  --u: calc(100cqw / 390);
  position: relative; height: clamp(200px, calc(100dvh - 412px), 400px); aspect-ratio: 390 / 844; container-type: inline-size;
  overflow: hidden; border-radius: 25px; background: var(--bg);

  contain: layout paint;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; color: var(--ios-ink);
}
.a2-screen .ic { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.a2-status { position: absolute; inset: 0 0 auto; height: calc(47 * var(--u)); z-index: 1;
  display: flex; align-items: center; justify-content: space-between; padding: calc(6 * var(--u)) calc(34 * var(--u)) 0;
  background: var(--bg); color: var(--text); font-size: calc(16 * var(--u)); }
.a2-island { position: absolute; top: calc(11 * var(--u)); left: 50%; z-index: 3; width: calc(124 * var(--u)); height: calc(36 * var(--u));
  margin-left: calc(-62 * var(--u)); border-radius: calc(18 * var(--u)); background: var(--ios-island); }
.a2-bars { display: flex; align-items: flex-end; gap: calc(2 * var(--u)); height: calc(11 * var(--u)); }
.a2-bars i { width: calc(3 * var(--u)); background: currentColor; border-radius: 1px; }
.a2-bars i:nth-child(1) { height: 35%; } .a2-bars i:nth-child(2) { height: 55%; }
.a2-bars i:nth-child(3) { height: 78%; } .a2-bars i:nth-child(4) { height: 100%; }
.a2-shot { position: absolute; top: calc(47 * var(--u)); left: 0; right: 0; height: calc(700 * var(--u));
  background: var(--a2-shot) top center / 100% auto no-repeat, var(--bg); }
.a2-shot-app { height: calc(797 * var(--u)); background-image: var(--a2-shot-app); }
.a2-safari { position: absolute; inset: auto 0 0; height: calc(97 * var(--u)); background: var(--ios-bar);
  border-top: 1px solid var(--ios-line); }
.a2-url { margin: calc(6 * var(--u)) calc(12 * var(--u)) 0; height: calc(36 * var(--u)); border-radius: calc(12 * var(--u));
  display: flex; align-items: center; justify-content: center; background: var(--ios-row); font-size: calc(15 * var(--u)); }
.a2-tools { display: flex; justify-content: space-around; align-items: center; height: calc(44 * var(--u)); color: var(--ios-blue); }
.a2-tools .a2-off { opacity: .35; }
.a2-dim { position: absolute; inset: 0; background: var(--ios-dim); opacity: 0; }
.a2-share { position: absolute; inset: 30% 0 0; padding: calc(14 * var(--u)) calc(16 * var(--u));
  border-radius: calc(14 * var(--u)) calc(14 * var(--u)) 0 0; background: var(--ios-sheet);
  font-size: calc(16 * var(--u)); transform: translateY(100%); }
.a2-share-head, .a2-add-card { display: flex; align-items: center; gap: calc(12 * var(--u)); }
.a2-share-head img { width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: calc(10 * var(--u)); }
.a2-share-head > span, .a2-add-card > span { display: flex; flex-direction: column; gap: calc(2 * var(--u)); min-width: 0; }
.a2-share-head b { font-size: calc(15 * var(--u)); text-align: left; }
.a2-share-head small, .a2-add-card small { font-size: calc(13 * var(--u)); color: var(--ios-ink-2); }
.a2-apps { display: flex; gap: calc(20 * var(--u)); height: calc(70 * var(--u)); align-items: center; margin-top: calc(14 * var(--u)); }
.a2-apps i { width: calc(54 * var(--u)); height: calc(54 * var(--u)); border-radius: 50%; background: var(--ios-row); }
.a2-group { margin-top: calc(12 * var(--u)); border-radius: calc(12 * var(--u)); overflow: hidden; background: var(--ios-row); }
.a2-row { display: flex; align-items: center; justify-content: space-between; height: calc(44 * var(--u));
  padding: 0 calc(14 * var(--u)); }
.a2-row + .a2-row { border-top: 1px solid var(--ios-line); }
.a2-row .ic { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.a2-add { position: absolute; inset: calc(50 * var(--u)) 0 0; border-radius: calc(12 * var(--u)) calc(12 * var(--u)) 0 0;
  background: var(--ios-sheet); font-size: calc(16 * var(--u)); transform: translateY(100%); }
.a2-add-bar { display: flex; align-items: center; justify-content: space-between; height: calc(52 * var(--u));
  padding: 0 calc(16 * var(--u)); color: var(--ios-blue); }
.a2-add-bar b { color: var(--ios-ink); font-size: calc(16 * var(--u)); }
.a2-add-go { font-weight: 600; }
.a2-add-card { margin: calc(14 * var(--u)) calc(16 * var(--u)) 0; padding: calc(12 * var(--u));
  border-radius: calc(12 * var(--u)); background: var(--ios-row); }
.a2-add-card img { width: calc(60 * var(--u)); height: calc(60 * var(--u)); border-radius: calc(13 * var(--u)); }
.a2-add-card b { font-size: calc(17 * var(--u)); text-align: left; font-weight: 500; }
.a2-web { justify-content: space-between; height: calc(44 * var(--u)); padding-block: 0; }
.a2-toggle { position: relative; width: calc(51 * var(--u)); height: calc(31 * var(--u)); border-radius: calc(16 * var(--u)); background: var(--ios-green); }
.a2-toggle::after { content: ""; position: absolute; top: calc(2 * var(--u)); right: calc(2 * var(--u));
  width: calc(27 * var(--u)); height: calc(27 * var(--u)); border-radius: 50%; background: var(--ios-knob); }
.a2-home { position: absolute; inset: 0; background: var(--ios-wall); opacity: 0; padding-top: calc(70 * var(--u)); }
.a2-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: calc(84 * var(--u)); row-gap: calc(12 * var(--u));
  padding: 0 calc(27 * var(--u)); justify-items: center; align-items: start; }
.a2-grid i, .a2-dock i { width: calc(62 * var(--u)); height: calc(62 * var(--u)); border-radius: calc(14 * var(--u)); background: var(--ios-tile); }
.a2-app { display: flex; flex-direction: column; align-items: center; gap: calc(5 * var(--u)); transform: scale(0); }
.a2-app img { width: calc(62 * var(--u)); height: calc(62 * var(--u)); border-radius: calc(14 * var(--u)); }
.a2-app small { font-size: calc(12 * var(--u)); color: var(--ios-home-ink); }
.a2-dock { position: absolute; inset: auto calc(12 * var(--u)) calc(20 * var(--u)); height: calc(92 * var(--u));
  border-radius: calc(30 * var(--u)); background: var(--ios-tile); display: flex; justify-content: space-around; align-items: center; }
.a2-open { position: absolute; inset: 0; background: var(--bg); opacity: 0; transform-origin: 39.2% 23.3%; }
.a2-tap { position: absolute; left: 50%; top: 96.1%; width: calc(46 * var(--u)); height: calc(46 * var(--u));
  margin: calc(-23 * var(--u)) 0 0 calc(-23 * var(--u)); border-radius: 50%; opacity: 0; z-index: 2;
  background: var(--ios-tap); box-shadow: 0 0 0 calc(3 * var(--u)) var(--ios-tap-ring); }

.a2-steps { list-style: none; counter-reset: a2; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.a2-steps li { counter-increment: a2; position: relative; padding: 6px 40px 6px 10px; border-radius: 12px;
  font-size: 13.5px; line-height: 1.75; color: var(--text-2); }
.a2-steps li::before { content: counter(a2, persian); position: absolute; right: 10px; top: 7px; width: 22px; height: 22px;
  border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--card2); color: var(--text); }
.a2-steps li small { display: block; font-size: 12px; color: var(--muted); }
.a2-steps b { color: var(--text); }
.a2-ic { width: 18px; height: 18px; vertical-align: -3px; color: var(--ios-blue); }
.a2-warn { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 1.8;
  background: var(--gold-soft); color: var(--text); }

.a2-run .a2-tap   { animation: a2-tap 12s linear infinite; }
.a2-run .a2-dim   { animation: a2-dim 12s ease infinite; }
.a2-run .a2-share { animation: a2-share 12s ease infinite; }
.a2-run .a2-hit   { animation: a2-hit 12s linear infinite; }
.a2-run .a2-add   { animation: a2-add 12s ease infinite; }
.a2-run .a2-add-go { animation: a2-go 12s linear infinite; }
.a2-run .a2-home  { animation: a2-home 12s ease infinite; }
.a2-run .a2-app   { animation: a2-app 12s ease infinite; }
.a2-run .a2-open  { animation: a2-open 12s ease infinite; }
.a2-run .a2-steps li:nth-child(1) { animation: a2-s1 12s linear infinite; }
.a2-run .a2-steps li:nth-child(2) { animation: a2-s2 12s linear infinite; }
.a2-run .a2-steps li:nth-child(3) { animation: a2-s3 12s linear infinite; }

@keyframes a2-tap {
  0%, 7%   { left: 50%; top: 96.1%; opacity: 0; transform: scale(1.5); }
  10%      { left: 50%; top: 96.1%; opacity: 1; transform: scale(1); }
  13%      { left: 50%; top: 96.1%; opacity: 1; transform: scale(.8); }
  16%      { left: 50%; top: 96.1%; opacity: 0; transform: scale(1); }
  17%, 29% { left: 80%; top: 57.5%; opacity: 0; transform: scale(1.5); }
  32%      { left: 80%; top: 57.5%; opacity: 1; transform: scale(1); }
  35%      { left: 80%; top: 57.5%; opacity: 1; transform: scale(.8); }
  38%      { left: 80%; top: 57.5%; opacity: 0; transform: scale(1); }
  39%, 53% { left: 91.3%; top: 9%; opacity: 0; transform: scale(1.5); }
  56%      { left: 91.3%; top: 9%; opacity: 1; transform: scale(1); }
  59%      { left: 91.3%; top: 9%; opacity: 1; transform: scale(.8); }
  62%      { left: 91.3%; top: 9%; opacity: 0; transform: scale(1); }
  63%, 80% { left: 39.2%; top: 23.3%; opacity: 0; transform: scale(1.5); }
  83%      { left: 39.2%; top: 23.3%; opacity: 1; transform: scale(1); }
  86%      { left: 39.2%; top: 23.3%; opacity: 1; transform: scale(.8); }
  89%, 100% { left: 39.2%; top: 23.3%; opacity: 0; transform: scale(1); }
}
@keyframes a2-dim   { 0%, 17% { opacity: 0; } 21%, 66% { opacity: 1; } 69%, 100% { opacity: 0; } }
@keyframes a2-share { 0%, 16% { transform: translateY(100%); opacity: 1; } 21%, 43% { transform: none; opacity: 1; }
                      45%, 100% { transform: none; opacity: 0; } }
@keyframes a2-hit   { 0%, 34% { background: transparent; } 35%, 42% { background: var(--ios-line); } 43%, 100% { background: transparent; } }
@keyframes a2-add   { 0%, 40% { transform: translateY(100%); opacity: 1; } 45%, 67% { transform: none; opacity: 1; }
                      69%, 100% { transform: none; opacity: 0; } }
@keyframes a2-go    { 0%, 58% { opacity: 1; } 59%, 63% { opacity: .4; } 64%, 100% { opacity: 1; } }
@keyframes a2-home  { 0%, 66% { opacity: 0; } 69%, 90% { opacity: 1; } 93%, 100% { opacity: 0; } }
@keyframes a2-app   { 0%, 71% { transform: scale(0); } 75% { transform: scale(1.15); } 77%, 100% { transform: scale(1); } }
@keyframes a2-open  { 0%, 88% { opacity: 0; transform: scale(.2); } 92%, 98% { opacity: 1; transform: none; }
                      100% { opacity: 0; transform: none; } }
@keyframes a2-s1 { 0%, 19% { background: var(--gold-soft); color: var(--text); } 21%, 100% { background: transparent; color: var(--text-2); } }
@keyframes a2-s2 { 0%, 19% { background: transparent; color: var(--text-2); } 21%, 43% { background: var(--gold-soft); color: var(--text); }
                   45%, 100% { background: transparent; color: var(--text-2); } }
@keyframes a2-s3 { 0%, 43% { background: transparent; color: var(--text-2); } 45%, 98% { background: var(--gold-soft); color: var(--text); }
                   100% { background: transparent; color: var(--text-2); } }



#card-limits { margin-top: 16px; }
.nowrap { white-space: nowrap; }
#lim-box .warn { margin: 10px 0 0; }

.cal-d.off { opacity: .35; pointer-events: none; }
.cal-nav:disabled { opacity: .35; }
#lim-exp button { white-space: nowrap; }


.lim-time { align-items: center; }
.lim-hm-btn {
  background: var(--card2); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 12px; font: inherit; font-size: 15px; width: auto; min-height: 0;
}
.lim-hm-btn b { font-weight: 700; }



#tp-overlay { z-index: 71; align-items: flex-end; padding: 0; }
.tp-sheet {
  width: 100%; max-width: 480px; border-radius: 18px 18px 0 0; border-bottom: 0;
  padding-bottom: max(16px, calc(env(safe-area-inset-bottom) + 10px));
}
.tp-sheet h2 { margin-bottom: 2px; }
.tp-sheet #tp-day { margin: 0 0 6px; font-size: 14px; }
.tp-wheels {
  position: relative; display: flex; justify-content: center; align-items: center; gap: 8px;
  height: 220px; margin: 4px 0;
}
.tp-band {
  position: absolute; left: 16px; right: 16px; top: 88px; height: 44px;
  background: var(--card2); border-radius: 10px; pointer-events: none;
}
.tp-wheel {
  position: relative; width: 84px; height: 220px; overflow-y: auto; overscroll-behavior: contain;
  scroll-snap-type: y mandatory; scrollbar-width: none; padding: 88px 0; box-sizing: border-box;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
}
.tp-wheel::-webkit-scrollbar { display: none; }
.tp-i {
  height: 44px; line-height: 44px; text-align: center; scroll-snap-align: center;
  font-size: 22px; color: var(--muted); cursor: pointer; user-select: none;
}
.tp-i.on { color: var(--text); font-size: 26px; font-weight: 700; }
.tp-colon { position: relative; font-size: 24px; }
.tp-note { min-height: 1.4em; margin: 0; text-align: center; color: var(--red); font-size: 13px; }





#ann-overlay { z-index: 65; padding: var(--gap-top) 20px var(--gap-bottom); }
.ann-sheet { padding-top: 0; overflow: hidden; }
.ann-sheet > :first-child:not(.ann-img) { margin-top: 22px; }
.ann-sheet:focus, .ann-sheet:focus-visible { outline: none; }

.ann-scroll { padding-bottom: 6px; }
.ann-img { display: block; width: calc(100% + 44px); margin: 0 -22px 16px; max-height: 42dvh; object-fit: cover; }
.ann-title { font-size: 19px; line-height: 1.6; margin: 0 0 8px; }
.ann-body { font-size: 15px; line-height: 2; color: var(--text-2); overflow-wrap: anywhere; }
.ann-body p, .ann-body div { margin: 0; }
.ann-body p + p { margin-top: 8px; }
.ann-body ul, .ann-body ol { margin: 6px 0; padding-inline-start: 22px; }
.ann-body h3 { font-size: 17px; margin: 6px 0; color: var(--text); }
.ann-body b, .ann-body strong { color: var(--text); }
.ann-body a { color: var(--gold-ink); text-decoration: underline; }
.ann-body .c-gold { color: var(--gold-ink); }
.ann-body .c-red { color: var(--red-ink); }
.ann-body .c-green { color: var(--green); }
.ann-body .c-muted { color: var(--muted); }
.ann-body .t-big { font-size: 1.25em; }
.ann-body .t-small { font-size: .85em; }
.ann-body .ta-c { text-align: center; }

.ann-s .ann-title { font-size: 16px; }
.ann-s .ann-body { font-size: 13px; line-height: 1.85; }
.ann-s .ann-body h3 { font-size: 15px; }
.ann-s .sheet-actions button { font-size: 13px; padding: 10px; }
.ann-l .ann-title { font-size: 22px; }
.ann-l .ann-body { font-size: 17px; }
.ann-l .ann-body h3 { font-size: 19px; }
.ann-l .sheet-actions button { font-size: 17px; padding: 16px; }
.ann-code {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  margin: 14px 0 2px; padding: 12px 14px; border-radius: 12px;
  background: var(--gold-soft); border: 1px dashed var(--gold-line); color: var(--gold-ink);
  font: inherit; cursor: pointer;
}
.ann-code b { font-size: 18px; letter-spacing: 2px; }
.ann-code span { font-size: 13px; }
.ann-code.done span { color: var(--green); }

.ann-pv { margin: 0; min-height: 100dvh; background: var(--bg); overflow: hidden; }
.ann-pv-bg { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }


.vg-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vg-head h2 { margin-bottom: 0; }
.vg-link {
  display: inline-flex; align-items: center; gap: 5px; width: auto; margin: 0; padding: 6px 11px;
  border-radius: 999px; border: 1px solid var(--gold-line); background: var(--gold-soft); color: var(--gold-ink);
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.vg-link .ic { width: 13px; height: 13px; }

.vg-bar { display: flex; justify-content: flex-end; margin: 0 0 10px; }
.vg-bar.mid { justify-content: center; margin: 14px 0 0; }
.vg-card {
  position: relative; display: flex; align-items: center; margin: 0 0 14px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--gold-line); box-shadow: var(--card-shadow);
}
.vg-card-go {
  flex: 1 1 auto; display: flex; align-items: center; gap: 12px; width: auto; margin: 0; padding: 12px 14px;
  background: none; border: 0; color: var(--text); text-align: start; font-weight: 400;
}
.vg-ph {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-gold); color: var(--on-gold);
}
.vg-ph .ic { width: 20px; height: 20px; margin-inline-start: 3px; }
.vg-card-t b { display: block; font-size: 15px; }
.vg-card-t small { color: var(--muted); font-size: 12.5px; }
.vg-x {
  flex: 0 0 auto; width: 40px; height: 40px; margin: 0 4px 0 6px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--muted); font-size: 20px; line-height: 1;
}
.vg-list { display: flex; flex-direction: column; gap: 10px; }
.vg-row {
  display: flex; gap: 12px; align-items: center; width: 100%; margin: 0; padding: 10px; border-radius: 14px;
  background: var(--card2); border: 1px solid var(--field-line); color: var(--text); text-align: start; font-weight: 400;
}
.vg-th { position: relative; flex: 0 0 auto; width: 64px; height: 112px; border-radius: 10px; overflow: hidden; background: #000; }
.vg-th img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.vg-th i { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.18); }
.vg-th i span { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.92); color: #111; display: grid; place-items: center; }
.vg-th i .ic { width: 14px; height: 14px; margin-inline-start: 2px; }
.vg-t b { display: block; font-size: 14.5px; margin-bottom: 3px; }
.vg-t small { display: block; color: var(--muted); font-size: 12px; line-height: 1.7; }
.vg-t .d { display: inline-block; margin-top: 5px; font-size: 11.5px; color: var(--gold-ink); background: var(--gold-soft); padding: 2px 8px; border-radius: 999px; }
.vg-player { position: fixed; inset: 0; z-index: 68; background: #000; display: flex; flex-direction: column; }
.vg-pbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #fff;
  padding: max(14px, calc(env(safe-area-inset-top) + 8px)) 16px 10px;
}
.vg-pbar b { font-size: 16px; }
.vg-pbar button { width: auto; margin: 0; padding: 7px 14px; background: rgba(255,255,255,.14); color: #fff; border: 0; border-radius: 999px; font-size: 13px; }
.vg-stage { position: relative; flex: 1 1 auto; min-height: 0; display: flex; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.vg-player video { flex: 1 1 auto; width: 100%; min-height: 0; object-fit: contain; background: #000; }
.vg-wait {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font-size: 13px; pointer-events: none;
}


.sc-count { margin: 6px 0 0; text-align: center; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

.dz-cam { width: 100%; margin-top: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.dz-cam .ic { width: 18px; height: 18px; }
#card-overlay .sheet-actions button .ic { width: 18px; height: 18px; vertical-align: -3px; }


.bd-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 8px 0 4px; }
.bd-d { min-height: 40px; padding: 0; border-radius: 10px; border: 1px solid var(--line); background: var(--card2, var(--card));
  color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.bd-d.on { background: var(--brand-gold); border-color: var(--brand-gold); color: var(--on-gold); }


.pf-bd { padding: 6px 12px 6px 6px; }
.pf-bd-main { flex: 1 1 auto; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 6px;
  background: none; border: 0; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.pf-bd.off .pf-item-ic { background: var(--surface-3, var(--card)); color: var(--muted); }
.sw { flex: 0 0 auto; position: relative; width: 50px; height: 30px; padding: 0; border-radius: 15px; border: 0;
  background: var(--field-line); cursor: pointer; transition: background .2s; }
.sw::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: inset-inline-start .2s; }
.sw[aria-checked="true"] { background: var(--brand-gold); }
.sw[aria-checked="true"]::after { inset-inline-start: 23px; }



.chat-dot { position: absolute; top: 8px; inset-inline-start: 8px; width: 8px; height: 8px; border-radius: 50%;
  background: #8b97a6; box-shadow: 0 0 0 2px var(--bg); pointer-events: none; }
.chat-dot.on { background: #2fbf71; animation: chat-wink 4.5s ease-out infinite; }
@keyframes chat-wink {
  0%, 30%, 100% { box-shadow: 0 0 0 2px var(--bg), 0 0 0 2px rgba(47,191,113,0); transform: scale(1); }
  6%  { transform: scale(1.25); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px rgba(47,191,113,.55); }
  14% { transform: scale(1);    box-shadow: 0 0 0 2px var(--bg), 0 0 0 9px rgba(47,191,113,0); }
  20% { transform: scale(1.18); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px rgba(47,191,113,.45); }
}
@media (prefers-reduced-motion: reduce) { .chat-dot.on { animation: none; } }


@keyframes sc-nudge {
  0%   { transform: translate3d(0,0,0); }
  24%  { transform: translate3d(18px,0,0) rotate(.7deg); }
  50%  { transform: translate3d(-8px,0,0) rotate(-.3deg); }
  72%  { transform: translate3d(3px,0,0); }
  100% { transform: translate3d(0,0,0); }
}
.sc-card.top.nudge { animation: sc-nudge 1.2s cubic-bezier(.36,.07,.19,.97) both; }
@media (prefers-reduced-motion: reduce) { .sc-card.top.nudge { animation: none; } }


.au-alt { display: block; margin: 14px auto 0; font-size: 13px; }
#su-eye { flex: 0 0 auto; font-size: 13px; padding-inline: 12px; }


.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #e5484d;
  box-shadow: 0 0 0 3px rgba(229, 72, 77, .18); flex: 0 0 auto; vertical-align: middle; animation: live-pulse 2.4s ease-in-out infinite; }
@keyframes live-pulse { 50% { box-shadow: 0 0 0 5px rgba(229, 72, 77, .06); } }
.live-strip { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; margin-top: 0;
  font: inherit; font-size: 13px; color: var(--text); text-align: start; cursor: pointer; }
.live-l { font-size: 11.5px; color: var(--text-2); }
.live-x { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-c { color: var(--muted); font-size: 11px; white-space: nowrap; }
.live-sheet { max-height: 88vh; overflow-y: auto; }
.live-sheet h2 { display: flex; align-items: center; gap: 8px; }
.lv-stats { display: flex; text-align: center; background: var(--card2); border: 1px solid var(--line);
  border-radius: 12px; padding: 8px 0; margin-bottom: 8px; }
.lv-stats div { flex: 1; } .lv-stats div + div { border-inline-start: 1px solid var(--line); }
.lv-stats b { display: block; font-size: 15px; font-variant-numeric: tabular-nums; }
.lv-stats span { color: var(--muted); font-size: 11.5px; }
.lv-it { display: flex; align-items: center; gap: 9px; padding: 8px 4px; border-bottom: 1px solid var(--line); border-radius: 8px; }
.lv-it:last-child { border-bottom: 0; }
.lv-it.fresh { animation: lv-in 1.8s ease-out; }
@keyframes lv-in { from { background: rgba(231, 181, 60, .16); } to { background: transparent; } }
.lv-av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
  color: #fff; font-weight: 700; font-size: 12px; }
.lv-tx { flex: 1 1 auto; font-size: 13px; line-height: 1.6; }
.lv-tm { color: var(--muted); font-size: 10.5px; white-space: nowrap; }
.lv-pos { color: var(--green); } .lv-neg { color: var(--red-ink); }
.lv-tag { font-size: 10px; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 0 4px; }
#pf-live .pf-item-ic { display: grid; place-items: center; }
@media (prefers-reduced-motion: reduce) { .live-dot, .lv-it.fresh { animation: none; } }



.st-overlay { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 0;
  background: var(--bg); padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
.st-overlay.hidden { display: none; }
.st-bar { display: flex; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--card); }
.st-bar button { flex: 1; margin: 0; }
.st-scroll { flex: 1 1 auto; overflow: auto; -webkit-overflow-scrolling: touch; background: #fff; }
.st-doc { font-family: Vazirmatn, Tahoma, sans-serif; font-size: 12px; color: #1c1a14; background: #fff; padding: 14px;
  font-feature-settings: "tnum" 1; min-width: 780px; }
.st-doc .st-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px;
  border-bottom: 2px solid #1c1a14; padding-bottom: 12px; }
.st-doc h1 { font-size: 18px; margin: 0 0 4px; color: #1c1a14; }
.st-doc .meta { color: #666; font-size: 11px; line-height: 1.7; }
.st-doc .brand { text-align: left; font-weight: 700; font-size: 16px; }
.st-doc .brand small { display: block; font-weight: 400; color: #666; font-size: 10px; }
.st-doc table { width: 100%; border-collapse: collapse; }
.st-doc th, .st-doc td { border: 1px solid #d9d4c7; padding: 5px 6px; vertical-align: top; color: #1c1a14; }
.st-doc th { background: #f1eee6; font-weight: 700; font-size: 11px; white-space: nowrap; }
.st-doc td.num, .st-doc th.num { text-align: left; direction: ltr; white-space: nowrap; }
.st-doc td.desc { min-width: 200px; }
.st-doc td.bal { background: #faf8f2; font-weight: 700; }
.st-doc td.neg { color: #b3261e; }
.st-doc tr.rev td { color: #999; text-decoration: line-through; }
.st-doc tfoot td { background: #1c1a14; color: #fff; font-weight: 700; }
.st-doc tfoot td.bal { background: #1c1a14; color: #fff; }
.st-doc tfoot td.neg { color: #ff9c94; }
.st-doc .foot { margin-top: 14px; color: #666; font-size: 10px; display: flex; justify-content: space-between; gap: 12px; }
@media print {
  body.printing-st > *:not(#st-overlay) { display: none !important; }
  body.printing-st { background: #fff !important; }
  body.printing-st #st-overlay { position: static !important; display: block !important; background: #fff !important; padding: 0 !important; }
  body.printing-st .st-bar { display: none !important; }
  body.printing-st .st-scroll { overflow: visible !important; }
  html:has(body.printing-st), body.printing-st { width: auto !important; max-width: none !important; min-width: 0 !important;
    margin: 0 !important; padding: 0 !important; overflow: visible !important; }
  body.printing-st #st-overlay, body.printing-st .st-scroll { width: 100% !important; max-width: none !important; inset: auto !important; }
  body.printing-st .st-doc { min-width: 0; width: 100%; padding: 0; font-size: 10px; }
  body.printing-st .st-doc th, body.printing-st .st-doc td { padding: 3px 4px; font-size: 9.5px; }
  body.printing-st .st-doc td.desc { min-width: 0; }
  body.printing-st .st-doc table { table-layout: auto; }
  @page { size: A4 landscape; margin: 12mm; }
}



.chat-quick { display: flex; gap: 8px; align-self: flex-start; margin: -2px 0 4px; }
.chat-quick button { width: auto; min-height: 36px; padding: 6px 14px; font-size: 13px; border-radius: 999px; }
.chat-m.ai-ans { max-width: 88%; }
.ai-typing { display: flex; gap: 4px; padding: 12px 14px; }
.ai-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: ai-dot 1.2s infinite ease-in-out; }
.ai-typing span:nth-child(2) { animation-delay: .15s; } .ai-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes ai-dot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }


header .who.sup { position: relative; padding: 6px 12px; gap: 6px; color: var(--hdr-text, inherit); }
header .who.sup .ic { width: 18px; height: 18px; }
header .who.sup .sup-l { font-size: 13px; font-weight: 600; }
header .who.sup .chat-dot { position: static; flex: none; }

header .who.sup .chat-dot.on { animation: none; }
header .who.sup .badge { position: absolute; top: -4px; inset-inline-start: -4px; }
header .who.sup.has-unread { border-color: var(--gold-edge); }
.tabbar button { position: relative; }

.tabbar #who-kyc { position: absolute; top: 8px; left: calc(50% - 16px); width: 9px; height: 9px; padding: 0;
  border-radius: 50%; font-size: 0; line-height: 0; border: 0; overflow: hidden; }
.tabbar #who-kyc.kyc-off { background: var(--red); }
.tabbar #who-kyc.kyc-wait { background: var(--gold-ink); }
.tabbar #who-kyc.kyc-on, .tabbar #who-kyc.hidden { display: none; }

#profile-overlay.as-page { background: var(--bg); align-items: stretch; justify-content: center;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); z-index: 19; }
#profile-overlay.as-page .sheet { max-width: 480px; max-height: none; height: 100%; border-radius: 0;
  border: 0; box-shadow: none; padding-top: max(18px, env(safe-area-inset-top)); }
#profile-overlay.as-page .pf-close { display: none; }
#profile-overlay.as-page .sheet-actions:not(:has(button:not(.hidden):not(.pf-close))) { display: none; }

.bank-box { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 4px 0 12px; background: var(--card2); }
.bank-box .bank-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.bank-box .ln { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 3px 0; color: var(--text-2); }
.bank-box .ln .ltr { direction: ltr; unicode-bidi: isolate; }
.bank-box p { margin: 6px 0 0; }
.wd-saved { font-size: 11px; margin-inline-start: 6px; }


.plus-box { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 4px 0 12px; background: var(--card2); }
.fold .fold-h { display: flex; align-items: center; gap: 8px; width: 100%; padding: 0; margin: 0; background: none;
  border: 0; color: inherit; font: inherit; font-weight: 400; text-align: start; }
.fold .fold-h::after { content: ""; margin-inline-start: auto; width: 8px; height: 8px; border: solid var(--muted);
  border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s; }
.fold.open .fold-h::after { transform: rotate(-135deg); }
.fold .fold-b { display: none; margin-top: 8px; }
.fold.open .fold-b { display: block; }
.plus-box .pl-up { font-size: 11.5px; color: var(--gold-ink); background: var(--gold-soft); border-radius: 999px; padding: 1px 9px; }
.plus-box .pl-top b { font-size: 15px; }
.pl-table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 8px 0 10px; }
.pl-table th, .pl-table td { padding: 5px 4px; border-bottom: 1px solid var(--line); text-align: start; }
.pl-table th { color: var(--muted); font-weight: 400; font-size: 11.5px; }
.pl-table td:first-child { color: var(--text-2); }
.pl-table td.pl-better { color: var(--green); font-weight: 700; }
.pl-btn { width: 100%; font-size: 14px; }
.pl-sub { text-align: center; margin: 6px 0 0; }
.plus-hint { display: block; width: 100%; text-align: start; font: inherit; font-size: 12.5px; font-weight: 400;
  background: var(--gold-soft); color: var(--gold-ink); border: 0; border-radius: 8px; padding: 7px 10px; margin: 6px 0; }
.plus-hint u { font-weight: 700; text-underline-offset: 3px; }


.al-off { display: none !important; }
.al-say {
  margin: 4px 0 0; padding: 8px 11px; border-radius: 10px; font-size: 13px; line-height: 1.8;
  color: var(--gold-ink); background: var(--gold-soft); border: 1px solid var(--gold-line);
}
.al-chk { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: 14px; cursor: pointer; }
.al-chk input { width: 18px; height: 18px; flex: none; accent-color: var(--gold); margin: 0; }
.al-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.al-row:last-child { border-bottom: 0; }
.al-row .sub { color: var(--muted); font-size: 12px; }