:root{
  --bg:#0B0F1A; --surface:#12182A; --surface2:#161E30; --border:#1E2A42;
  --accent:#7B5CFF; --accent2:#00D4FF; --accent-dark:#3B1FCC;
  --text:#E8F0FF; --muted:#6B82A8; --green:#00FFB0; --gold:#E8C840; --red:#FF6B6B;
  --r-card:20px; --r-row:14px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--bg)}
body{background:var(--bg);color:var(--text);font-family:'Exo 2',system-ui,sans-serif;
  font-size:15px;line-height:1.5;min-height:100vh;overflow-x:hidden}
.orb{position:fixed;top:-200px;right:-130px;width:400px;height:400px;border-radius:50%;
  background:rgba(123,92,255,.20);filter:blur(120px);pointer-events:none;z-index:0}

.step{display:none;position:relative;z-index:1;max-width:520px;margin:0 auto;
  padding:calc(20px + var(--pad-top, 0px)) 20px
          calc(28px + env(safe-area-inset-bottom,0px));
  min-height:100vh;
  flex-direction:column}
.step.on{display:flex;animation:fade .22s ease}
.step{min-height:var(--tg-viewport-stable-height, 100vh)}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.bar{display:flex;align-items:center;gap:12px;margin-bottom:22px;min-height:34px}
.back{width:34px;height:34px;flex:none;border-radius:50%;border:1px solid var(--border);
  background:var(--surface);display:grid;place-items:center;cursor:pointer}
.back svg{width:16px;height:16px;stroke:var(--muted);fill:none;stroke-width:2;stroke-linecap:round}
.dots{display:flex;gap:5px;margin-left:auto}
.dot{width:22px;height:3px;border-radius:2px;background:var(--border);transition:background .25s}
.dot.on{background:var(--accent)}

h1{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:27px;color:#fff;
  line-height:1.15;margin-bottom:9px}
.lede{font-size:14px;color:var(--muted);line-height:1.65;margin-bottom:20px}
.grow{flex:1;min-height:12px}

/* ---- logo + intro ---- */
.logo{position:relative;width:100%;max-width:290px;aspect-ratio:1200/431;margin:0 auto 16px}
.ltr,.rift{position:absolute;display:block}
.logowrap{position:relative;width:148px;height:148px;margin:0 auto 24px}
.logowrap::before{content:'';position:absolute;inset:-32%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(123,92,255,.42) 0%,rgba(123,92,255,.16) 42%,rgba(123,92,255,0) 70%)}
.logo{position:relative;width:100%;height:100%;display:block}
#spark{opacity:0}
.wordmark{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:38px;color:#fff;
  text-align:center;letter-spacing:.09em;line-height:1;margin-bottom:12px}
.tagline{font-size:10.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--muted);
  text-align:center;margin-bottom:26px}

/* played once on first launch, skipped afterwards */
.intro #spark{animation:spark .45s ease-out .15s both}
.intro .ltr{animation:pop .8s cubic-bezier(.2,.9,.3,1) both}
.intro .ltr:nth-child(1){animation-delay:.55s}
.intro .ltr:nth-child(2){animation-delay:.08s}
.intro .ltr:nth-child(3){animation-delay:.86s}
.intro .ltr:nth-child(4){animation-delay:1.16s}
.intro .ltr:nth-child(6){animation-delay:.36s}
.intro .ltr:nth-child(7){animation-delay:1.01s}
.intro .ltr:nth-child(8){animation-delay:.22s}
.intro .ltr:nth-child(9){animation-delay:.71s}
.intro .rift{animation:rift 1.15s ease-out 1.65s both}
@keyframes pop{
  from{opacity:0;transform:translateY(9px) scale(.86)}
  to{opacity:1;transform:none}
}
@keyframes rift{
  0%{opacity:0;clip-path:inset(50% 0 50% 0);filter:brightness(2.4)}
  55%{opacity:1;clip-path:inset(0 0 0 0);filter:brightness(2.4)}
  100%{opacity:1;clip-path:inset(0 0 0 0);filter:brightness(1)}
}
.intro #star{animation:star .55s cubic-bezier(.2,.9,.25,1) .5s both}
.intro #ring{animation:ring .65s ease-out .9s both}
.intro .wordmark{animation:rise .45s ease-out 1.3s both}
.intro .tagline{animation:rise .6s ease-out 2.55s both}
.intro .lede{animation:rise .6s ease-out 2.72s both}
.intro .btns{animation:rise .65s ease-out 2.9s both}

@keyframes spark{
  0%{opacity:0;transform:scale(.2)}
  55%{opacity:1;transform:scale(1.5)}
  100%{opacity:0;transform:scale(.4)}
}
@keyframes star{
  from{opacity:0;transform:scale(.05) rotate(-70deg)}
  to{opacity:1;transform:scale(1) rotate(0)}
}
@keyframes ring{
  from{stroke-dashoffset:560;opacity:0}
  to{stroke-dashoffset:0;opacity:1}
}
@keyframes rise{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}
#spark,#star{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:reduce){
  .intro #spark,.intro #star,.intro #ring,.intro .wordmark,
  .intro .tagline,.intro .lede,.intro .btns{animation:none}
}

.btn{display:block;width:100%;font-family:inherit;font-size:14px;font-weight:700;
  padding:15px 20px;border-radius:999px;border:1px solid var(--accent);
  background:rgba(123,92,255,.12);color:var(--accent);cursor:pointer;
  transition:transform .12s,opacity .2s;margin-top:10px;text-align:center}
.btn:active{transform:scale(.97)}
.btn.solid{background:linear-gradient(135deg,var(--accent-dark),var(--accent));
  border-color:transparent;color:#fff}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn.quiet{border-color:var(--border);background:transparent;color:var(--muted)}

label{display:block;font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px}
/* Every text field, not only the password one. The amount and memo on Send
   were falling through to the browser's own styling - white boxes in the
   middle of a dark screen. */
input[type=text],input[type=email],input[type=number],input[type=search],
input[type=password],textarea{width:100%;background:rgba(123,92,255,.04);
  border:1px solid var(--border);border-radius:12px;color:var(--text);
  font-family:inherit;font-size:15px;padding:14px 15px;outline:none;
  transition:border-color .2s,box-shadow .2s;-webkit-appearance:none}
input:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(123,92,255,.10)}
textarea{resize:none;min-height:110px;line-height:1.8}
.field{margin-bottom:16px}

/* segmented control */
.seg{display:flex;gap:6px;background:var(--surface);border:1px solid var(--border);
  border-radius:999px;padding:4px;margin-bottom:18px}
.seg button{flex:1;background:transparent;border:none;border-radius:999px;padding:10px 8px;
  font-family:inherit;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;
  transition:all .18s}
.seg button.on{background:linear-gradient(135deg,var(--accent-dark),var(--accent));color:#fff}

.meter{height:4px;border-radius:2px;background:var(--border);overflow:hidden;margin-top:10px}
.meter i{display:block;height:100%;width:0;background:var(--red);transition:width .3s,background .3s}
.meter-txt{font-size:12px;color:var(--muted);margin-top:7px;min-height:18px}

.warn{display:flex;gap:11px;align-items:flex-start;background:rgba(232,200,64,.05);
  border:1px solid rgba(232,200,64,.28);border-radius:var(--r-row);padding:14px;margin-bottom:16px}
.warn svg{width:17px;height:17px;stroke:var(--gold);fill:none;stroke-width:1.8;flex:none;margin-top:2px}
.warn p{font-size:12.5px;color:var(--muted);line-height:1.65}
.warn b{color:var(--gold);font-weight:600}
.warn.red{background:rgba(255,107,107,.05);border-color:rgba(255,107,107,.28)}
.warn.red svg{stroke:var(--red)} .warn.red b{color:var(--red)}

/* seed grid */
.seedwrap{position:relative;margin-bottom:12px}
.seed{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:14px}
.seed.long{grid-template-columns:repeat(3,1fr);gap:6px}
.word{display:flex;align-items:baseline;gap:5px;background:var(--surface2);
  border:1px solid var(--border);border-radius:9px;padding:8px 7px}
.word i{font-style:normal;font-size:9.5px;color:var(--muted);min-width:14px}
.word b{font-weight:600;font-size:13px}
.seed.long .word b{font-size:12px}
.veil{position:absolute;inset:0;border-radius:var(--r-card);
  background:rgba(11,15,26,.72);backdrop-filter:blur(9px);
  display:grid;place-items:center;cursor:pointer;text-align:center;padding:20px}
.veil.gone{display:none}
.veil svg{width:26px;height:26px;stroke:var(--accent);fill:none;stroke-width:1.7;margin-bottom:9px}
.veil p{font-size:13px;color:var(--text);font-weight:600}
.veil span{font-size:12px;color:var(--muted);display:block;margin-top:4px}

.copyrow{display:flex;gap:8px;margin-bottom:14px}
.copybtn{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:12px;font-family:inherit;font-size:13px;font-weight:600;color:var(--text);
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .15s}
.copybtn:active{transform:scale(.97)}
.copybtn.done{border-color:var(--green);color:var(--green)}
.copybtn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}

.check{display:flex;gap:11px;align-items:flex-start;cursor:pointer;padding:4px 2px;margin-bottom:6px}
.box{width:21px;height:21px;flex:none;border-radius:6px;border:1.5px solid var(--border);
  display:grid;place-items:center;margin-top:1px;transition:all .18s}
.box svg{width:12px;height:12px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;opacity:0}
.check.on .box{background:var(--accent);border-color:var(--accent)}
.check.on .box svg{opacity:1}
.check p{font-size:13px;color:var(--muted);line-height:1.6}

/* ---- verification: slots + tray ---- */
.slots{display:flex;gap:10px;margin-bottom:22px}
.slot{flex:1;background:var(--surface);border:1.5px dashed var(--border);border-radius:var(--r-row);
  padding:14px 10px;text-align:center;min-height:78px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;transition:all .18s}
.slot.hot{border-color:var(--accent);background:rgba(123,92,255,.08);transform:scale(1.03)}
.slot.filled{border-style:solid;border-color:var(--accent);background:rgba(123,92,255,.08);cursor:pointer}
.slot.ok{border-color:var(--green);background:rgba(0,255,176,.08)}
.slot.bad{border-color:var(--red);background:rgba(255,107,107,.08)}
.slot-n{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.slot-w{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:17px;color:#fff;min-height:22px}
.slot.ok .slot-w{color:var(--green)} .slot.bad .slot-w{color:var(--red)}

.tray{display:flex;flex-wrap:wrap;gap:7px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-card);padding:14px;min-height:60px}
.chip{background:var(--surface2);border:1px solid var(--border);border-radius:999px;
  padding:9px 15px;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--text);
  cursor:grab;touch-action:none;user-select:none;transition:transform .12s,opacity .18s,border-color .18s}
.chip.sel{border-color:var(--accent);background:rgba(123,92,255,.14);color:var(--accent)}
.chip.used{opacity:0;pointer-events:none;width:0;padding:0;margin:0;border:0;overflow:hidden}
.dragghost{position:fixed;z-index:999;pointer-events:none;background:rgba(123,92,255,.9);
  border:1px solid var(--accent);border-radius:999px;padding:9px 15px;font-size:13.5px;
  font-weight:600;color:#fff;box-shadow:0 8px 26px rgba(0,0,0,.5);transform:translate(-50%,-50%)}
.hint{font-size:12px;color:var(--muted);text-align:center;margin-top:12px;line-height:1.6}

.addr{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);
  padding:18px;margin-bottom:14px;position:relative;overflow:hidden}
.addr::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--green),transparent);opacity:.5}
.addr code{display:block;font-family:ui-monospace,monospace;font-size:12.5px;color:var(--green);
  word-break:break-all;line-height:1.6}
.blob{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-row);
  padding:14px;font-family:ui-monospace,monospace;font-size:10.5px;color:var(--muted);
  word-break:break-all;line-height:1.55;max-height:110px;overflow:auto;margin-bottom:14px}

.spin{width:20px;height:20px;border:2px solid rgba(123,92,255,.25);border-top-color:var(--accent);
  border-radius:50%;animation:sp .7s linear infinite;display:inline-block;vertical-align:-4px;margin-right:8px}
@keyframes sp{to{transform:rotate(360deg)}}
.err{font-size:13px;color:var(--red);margin-top:12px;line-height:1.6}
.pinrow{display:flex;gap:10px;justify-content:center;margin:6px 0 14px}
.pindot{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--border);transition:all .18s}
.pindot.on{background:var(--accent);border-color:var(--accent);box-shadow:0 0 12px rgba(123,92,255,.6)}
.pindot.bad{background:var(--red);border-color:var(--red);box-shadow:none}
.pinin{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.pinbox{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);
  padding:22px 18px;margin-bottom:16px;cursor:text;text-align:center}
.pinbox label{margin-bottom:14px}
.tiny{font-size:11.5px;color:var(--muted);text-align:center;line-height:1.6;margin-top:10px}
.wtop{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.wava{width:40px;height:40px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--accent-dark),var(--accent2))}
.wwho{flex:1;min-width:0}
.wname{font-weight:600;font-size:15px;line-height:1.2}
.waddr{font-size:12px;color:var(--muted);margin-top:1px;font-family:ui-monospace,monospace}
.bal{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-card);padding:24px 20px;margin-bottom:18px;text-align:center}
.bal::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.55}
.bal-label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.bal-value{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:40px;line-height:1;color:#fff;
  text-shadow:0 0 30px rgba(123,92,255,.32)}
.acts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:24px}
.act{display:flex;flex-direction:column;align-items:center;gap:7px;background:none;border:none;
  color:var(--text);font-family:inherit;font-size:11.5px;cursor:pointer;transition:transform .12s}
.act:active{transform:scale(.92)}
.act i{display:grid;place-items:center;width:52px;height:52px;border-radius:18px;
  background:rgba(123,92,255,.10);border:1px solid rgba(123,92,255,.28)}
.act svg{width:20px;height:20px;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.head{display:flex;align-items:baseline;justify-content:space-between;margin:0 4px 10px}
.head h2{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:17px;color:#fff}
.head span{font-size:12px;color:var(--muted)}
.sline{display:flex;justify-content:space-between;gap:12px;padding:9px 0;
  border-bottom:1px solid var(--border);font-size:13px;color:var(--muted)}
.sline b{color:var(--text);font-weight:600;text-align:right}
.sline.strong{color:var(--text)}
.sbad{margin-top:12px;padding:10px 12px;border-radius:12px;font-size:13px;
  color:var(--gold);background:rgba(232,200,64,.10);border:1px solid rgba(232,200,64,.28)}
/* a price carried through a pool too thin to sell into */
.row-fiat.soft{color:var(--muted);font-weight:600}
.head-r{display:flex;align-items:center;gap:10px}
.dust{background:transparent;border:1px solid var(--border);border-radius:999px;
  padding:4px 10px;font-family:inherit;font-size:11px;font-weight:600;
  color:var(--muted);cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.dust.on{color:var(--accent);border-color:var(--accent);background:rgba(123,92,255,.14)}
.rows{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:22px}
.row{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-row);padding:12px 15px}
.sym{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;flex:none;
  font-family:'Rajdhani',sans-serif;font-weight:700;font-size:14px;color:#0B0F1A;overflow:hidden}
.sym img{width:100%;height:100%;object-fit:contain;display:block}
.sym.has-img{background:var(--surface2);border:1px solid var(--border)}
.row-main{flex:1;min-width:0}
.row-name{font-weight:600;font-size:15px}
.row-amt{font-size:12.5px;color:var(--muted);margin-top:1px}
.row-val{text-align:right;flex:none}
.row-fiat{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:16px;color:#fff}
.row-sub{font-size:11px;margin-top:2px;color:var(--muted)}
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;
  background:rgba(11,15,26,.94);backdrop-filter:blur(16px);border-top:1px solid var(--border);
  padding-bottom:env(safe-area-inset-bottom,0px)}
.tabs.on{display:flex}
.tab{flex:1;background:none;border:none;padding:9px 0 8px;display:flex;flex-direction:column;
  align-items:center;gap:4px;color:var(--muted);font-family:inherit;font-size:10.5px;cursor:pointer}
.tab svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tab.sel{color:var(--accent)}
.wpad{padding-bottom:74px}
.set{display:flex;align-items:center;gap:13px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-row);padding:15px;margin-bottom:8px;font-size:14px;cursor:pointer}
.set svg{width:18px;height:18px;stroke:var(--muted);fill:none;stroke-width:1.7;flex:none}
.set span{flex:1}
.set.danger span{color:var(--red)} .set.danger svg{stroke:var(--red)}
.empty{text-align:center;padding:34px 16px;color:var(--muted);font-size:13px;line-height:1.7}
.store{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);background:var(--surface2);border:1px solid var(--border);
  border-radius:999px;padding:4px 11px;margin:0 auto 18px}
.store{border-color:rgba(0,255,176,.35);background:rgba(0,255,176,.06)}
.store b{color:var(--green);font-weight:700}
.store.weak{border-color:rgba(232,200,64,.4);background:rgba(232,200,64,.07)}
.store.weak b{color:var(--gold)}
.crash{position:fixed;left:8px;right:8px;bottom:8px;z-index:9999;display:none;
  background:rgba(255,107,107,.14);border:1px solid var(--red);border-radius:12px;
  padding:12px 14px;font-family:ui-monospace,monospace;font-size:11px;color:#FFD9D9;
  line-height:1.5;max-height:40vh;overflow:auto;word-break:break-word}
.crash.on{display:block}
#rt{display:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* the armed state of the send button */
.btn.solid.danger{background:linear-gradient(180deg,#E8564A,#C93A2E);
  box-shadow:0 8px 24px rgba(232,86,74,.28)}

/* ══ patch47: консоль на 4 ячейки ══ */
.acts{grid-template-columns:repeat(4,1fr);gap:1px;padding:1px;margin-bottom:22px;
  background:linear-gradient(120deg,rgba(123,92,255,.55),rgba(0,212,255,.35) 55%,rgba(30,42,66,.9));
  clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),
    calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px)}
.act{background:#12182A;padding:15px 2px 12px;gap:8px;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:600;color:#6B82A8;white-space:nowrap;
  position:relative;overflow:hidden}
.act:active{transform:none}
.act::after{content:'';position:absolute;left:50%;bottom:0;width:0;height:70px;
  transform:translateX(-50%);border-radius:50%;filter:blur(18px);background:#7B5CFF;
  opacity:0;transition:width .25s,opacity .25s}
.act:active::after{width:120px;opacity:.5}
.act i{width:auto;height:auto;background:none;border:none;border-radius:0;box-shadow:none;
  position:relative;z-index:1}
.act svg{width:21px;height:21px;stroke:#E8F0FF}
#act-swap{color:#E8F0FF}
#act-swap svg{stroke:#00D4FF}
#act-swap::before{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;z-index:1;
  background:linear-gradient(90deg,transparent,#00D4FF,transparent)}

/* ══ patch47: реклама ══ */
.ads{position:relative;border:1px solid #1E2A42;border-radius:16px;overflow:hidden;
  background:#161E30;margin:0 -10px 22px}
.ads[hidden]{display:none}
.ads-track{display:flex;transition:transform .55s cubic-bezier(.4,.14,.2,1)}
.ad{flex:0 0 100%;min-height:104px;padding:15px 16px 17px;display:flex;flex-direction:column;
  gap:5px;justify-content:center;position:relative;cursor:pointer}
.ad .tag{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#6B82A8;font-weight:600}
.ad h3{margin:0;font-family:'Rajdhani',sans-serif;font-size:20px;font-weight:600;color:#E8F0FF}
.ad p{margin:0;font-size:12px;color:#A9BBDD;line-height:1.45;max-width:78%}
.ad .glow{position:absolute;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;
  filter:blur(46px);opacity:.5}
.ad .cta{position:absolute;right:14px;bottom:14px;width:30px;height:30px;border-radius:10px;
  border:1px solid #1E2A42;display:grid;place-items:center;background:rgba(11,15,26,.5)}
.ad .cta svg{width:14px;height:14px;stroke:#E8F0FF;stroke-width:1.8;fill:none;stroke-linecap:round}
.ads-ticks{position:absolute;left:16px;bottom:12px;display:flex;gap:5px;z-index:2}
.ads-ticks .t{width:16px;height:2px;border-radius:2px;background:rgba(107,130,168,.4);overflow:hidden}
.ads-ticks .t i{display:block;height:100%;width:0;background:#00D4FF}
.ads-ticks .t.on i{width:100%;transition:width 6s linear}
.ads-ticks .t.done i{width:100%}
@media (prefers-reduced-motion:reduce){.ads-track{transition:none}.ads-ticks .t.on i{width:100%}}

/* ══ patch48: опорные активы ══ */
.core{display:grid;grid-template-columns:1fr 1px 1fr;border:1px solid #1E2A42;border-radius:16px;
  background:linear-gradient(160deg,rgba(123,92,255,.09),rgba(18,24,42,0) 55%),#12182A;
  overflow:hidden;margin:0 0 22px;position:relative;min-height:96px}
.core::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(123,92,255,.7),rgba(0,212,255,.5),transparent)}
.core-seam{background:linear-gradient(180deg,transparent,#1E2A42 20%,#1E2A42 80%,transparent)}
.core-cell{padding:15px 15px 13px;display:flex;flex-direction:column;gap:3px;min-width:0}
.core-top{display:flex;align-items:center;gap:8px}
.core-top img,.core-top i,.core-top .ic{width:24px;height:24px;border-radius:50%;flex:none;
  display:block;object-fit:cover}
.core-dot{width:24px;height:24px;border-radius:50%;flex:none;
  background:linear-gradient(140deg,#22304C,#161E30);border:1px solid #1E2A42}
.core-sym{font-size:13px;font-weight:600;letter-spacing:.06em;color:#E8F0FF}
.core-usd{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:23px;color:#fff;margin-top:6px}
.core-usd.soft{color:var(--muted)}
.core-qty{font-family:'Rajdhani',sans-serif;font-size:12px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ══ patch51: экран обмена ══ */
.sw-pane{position:relative;display:flex;flex-direction:column;gap:1px;margin:0 0 14px}
.sw-side{background:#12182A;border:1px solid #1E2A42;border-radius:14px;padding:13px 14px}
.sw-lbl{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px}
.sw-row{display:flex;align-items:center;gap:10px}
.sw-row input{flex:1;min-width:0;background:none;border:0;outline:none;color:#fff;
  font-family:'Rajdhani',sans-serif;font-weight:700;font-size:26px;padding:0}
.sw-out{flex:1;min-width:0;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:26px;
  color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sw-out.dim{color:var(--muted)}
.sw-pick{flex:none;background:#161E30;border:1px solid #1E2A42;border-radius:10px;
  color:#E8F0FF;font-family:inherit;font-size:13px;font-weight:600;padding:9px 10px;
  max-width:44%}
.sw-flip{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:38px;height:38px;border-radius:50%;border:1px solid #1E2A42;background:#0B0F1A;
  display:grid;place-items:center;cursor:pointer;padding:0}
.sw-flip svg{width:17px;height:17px;stroke:#00D4FF;stroke-width:1.7;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.sw-flip:active{transform:translate(-50%,-50%) scale(.92)}
.sw-detail{min-height:20px;margin:0 4px 14px;display:flex;flex-direction:column;gap:6px}

/* The outcome, which used to look exactly like the quote it replaced. */
.sw-result{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:14px;
  background:var(--surface2);border:1px solid var(--border);
  animation:sw-in .2s ease-out both}
.sw-result.done{border-color:rgba(0,255,176,.35);
  background:linear-gradient(180deg,rgba(0,255,176,.07),transparent 70%),var(--surface2)}
.sw-result-top{display:flex;align-items:center;gap:10px;font-size:15px;color:#E8F0FF}
.sw-result-top b{font-weight:600}
.sw-tick{width:20px;height:20px;flex:none;fill:none;stroke:#00FFB0;stroke-width:2.5;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:26;stroke-dashoffset:26;animation:sw-draw .35s ease-out .05s forwards}
.sw-result p{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}
.sw-result a{font-family:'Rajdhani',sans-serif;font-size:12px;letter-spacing:.04em;
  color:var(--accent2);text-decoration:none;word-break:break-all}
.sw-result a:hover{text-decoration:underline}
@keyframes sw-draw{to{stroke-dashoffset:0}}
@keyframes sw-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .sw-result{animation:none}.sw-tick{animation:none;stroke-dashoffset:0}}
.sw-line{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.sw-line b{font-family:'Rajdhani',sans-serif;font-weight:600;color:#E8F0FF}
.sw-line.warn b{color:var(--gold)}
.sw-line.bad b{color:var(--red)}

/* the asset being sent, chosen the same way the swap screen chooses one */
.sd-pick{display:flex;align-items:center;gap:10px;width:100%;padding:11px 14px;
  border-radius:14px;background:var(--surface2);border:1px solid var(--border);
  color:var(--text);font:inherit;cursor:pointer;transition:border-color .15s}
.sd-pick:hover{border-color:var(--accent2)}
.sd-pick b{flex:1;text-align:left;font-size:15px;font-weight:600;letter-spacing:.03em}
.sd-pick svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--muted);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sd-ico .sym{width:26px;height:26px;font-size:12px}

/* ---- confirm ---- */
/* What is being paid and what comes back, before anything else on the panel.
   The numbers a person checks are the two amounts; everything under them is
   detail they may or may not read. */
.cf-pair{display:flex;align-items:center;gap:12px;margin:2px 0 14px;
  padding:14px;border-radius:14px;background:var(--surface2);border:1px solid var(--border)}
.cf-side{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;
  text-align:center}
.cf-side b{font-size:16px;font-weight:600;color:#E8F0FF;word-break:break-all;line-height:1.3}
.cf-side i{font-family:'Rajdhani',sans-serif;font-style:normal;font-size:12px;color:var(--muted)}
.cf-ico .sym{width:34px;height:34px;font-size:14px}
.cf-arrow{width:20px;height:20px;flex:none;fill:none;stroke:var(--accent2);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#cf-lines{margin:0 2px 16px}
/* a swap that costs five percent should not be one tap from an ordinary one */
#cf-go.risky{background:linear-gradient(135deg,#FF6B8A,#C2255C)}

/* ---- receive ---- */
/* The code sits on white because that is what a camera expects; every other
   surface here is dark, so it gets a card of its own rather than a hole. */
.qr{display:flex;align-items:center;justify-content:center;
  width:min(260px,68vw);aspect-ratio:1;margin:22px auto 18px;
  background:#fff;border-radius:18px;padding:12px;
  box-shadow:0 12px 40px -18px rgba(0,212,255,.5)}
.qr svg{width:100%;height:100%;display:block}
.qr .spin{border-top-color:#12182A;border-color:rgba(0,0,0,.15);border-top-color:#12182A}
.rc-addr{margin:0 auto 18px;max-width:340px;padding:12px 14px;border-radius:12px;
  background:var(--surface2);border:1px solid var(--border);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:1.7;
  color:var(--text);word-break:break-all;text-align:center}

/* the header address is a button now, and must not look like one */
button.waddr{background:none;border:0;padding:0;font:inherit;color:inherit;
  cursor:pointer;text-align:left}
button.waddr:active{opacity:.6}
/* the one figure on the review screen that is a promise */
.sw-line.big{align-items:baseline;margin:2px 0 4px}
.sw-line.big span{font-size:13px;color:#E8F0FF}
.sw-line.big b{font-size:20px;letter-spacing:.01em}
/* a sentence under a number, for when the number alone would mislead */
.sw-note{margin:-2px 0 4px;font-size:11px;line-height:1.5;color:var(--muted)}

.sw-slip{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:0 4px 16px;font-size:12px;color:var(--muted)}
.sw-slip-opts{display:flex;gap:6px}
.sw-slip-opts button{padding:5px 10px;border-radius:9px;cursor:pointer;
  background:var(--surface2);border:1px solid var(--border);color:var(--muted);
  font-family:'Rajdhani',sans-serif;font-size:12px;letter-spacing:.04em;
  transition:color .12s,border-color .12s,background .12s}
.sw-slip-opts button:hover{color:var(--text)}
.sw-slip-opts button.on{color:var(--text);border-color:var(--accent2);
  background:rgba(0,212,255,.1)}

/* ══ patch53: выбор токена и бегунок ══ */
.sw-pick{display:flex;align-items:center;gap:7px;flex:none;max-width:46%;
  background:#161E30;border:1px solid #1E2A42;border-radius:12px;
  color:#E8F0FF;font-family:inherit;font-size:13px;font-weight:600;
  padding:7px 9px;cursor:pointer}
.sw-pick img,.sw-pick .ic,.sw-pick i{width:22px;height:22px;border-radius:50%;flex:none;display:block}
.sw-pick span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sw-caret{width:14px;height:14px;flex:none;stroke:var(--muted);stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.sw-pick:active{border-color:#00D4FF}

.sw-range{-webkit-appearance:none;appearance:none;width:100%;height:22px;margin:12px 0 0;
  background:none;cursor:pointer}
.sw-range::-webkit-slider-runnable-track{height:3px;border-radius:3px;
  background:linear-gradient(90deg,#7B5CFF,#00D4FF)}
.sw-range::-moz-range-track{height:3px;border-radius:3px;
  background:linear-gradient(90deg,#7B5CFF,#00D4FF)}
.sw-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;
  border-radius:50%;background:#0B0F1A;border:2px solid #00D4FF;margin-top:-8px;
  box-shadow:0 0 10px -2px #00D4FF}
.sw-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#0B0F1A;
  border:2px solid #00D4FF}
.sw-pcts{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}
.sw-pct{background:#161E30;border:1px solid #1E2A42;border-radius:9px;color:var(--muted);
  font-family:inherit;font-size:11px;font-weight:600;letter-spacing:.06em;padding:7px 2px;cursor:pointer}
.sw-pct:active{color:#E8F0FF;border-color:#00D4FF}

.sw-sheet{position:fixed;inset:0;z-index:50;background:rgba(6,9,16,.72);
  display:flex;align-items:flex-end;backdrop-filter:blur(3px)}
.sw-sheet[hidden]{display:none}
/* The sheet used to be a flat panel with a browser scrollbar down its side.
   It reads as part of the app now: a lit top edge where it meets the dim
   screen behind it, a grab handle that says which way it closes, and a track
   that belongs to the same palette as everything else. */
.sw-sheet-in{width:100%;max-width:520px;margin:0 auto;
  background:linear-gradient(180deg,#18203A 0,var(--surface) 120px);
  border-top:1px solid rgba(0,212,255,.28);border-radius:22px 22px 0 0;
  box-shadow:0 -20px 50px -20px rgba(0,0,0,.8),0 -1px 0 rgba(123,92,255,.35);
  padding:10px 16px calc(18px + env(safe-area-inset-bottom,0px));
  max-height:78vh;display:flex;flex-direction:column;
  animation:sw-up .22s cubic-bezier(.2,.9,.3,1) both}
.sw-sheet-in::before{content:'';display:block;width:38px;height:4px;flex:none;
  margin:2px auto 10px;border-radius:2px;background:var(--border)}
@keyframes sw-up{from{transform:translateY(14%)}to{transform:none}}

/* A bottom sheet is the right shape on a phone, where the bottom edge is where
   the thumb is and the screen ends at the sheet. On a desktop window it just
   presses the last row against the border of the display - which is what read
   as the list being cut off. Wide enough for a dialog, it becomes one: centred,
   rounded on every corner, and never touching an edge. */
@media (min-width:720px) and (min-height:560px){
  .sw-sheet{align-items:center;padding:24px}
  .sw-sheet-in{border-radius:20px;border:1px solid rgba(0,212,255,.22);
    border-top-color:rgba(0,212,255,.28);
    background:linear-gradient(180deg,#18203A 0,var(--surface) 140px);
    padding:14px 16px 12px;max-height:min(70vh,620px);
    animation-name:sw-fade}
  /* the handle says "drag me down", which is not what a dialog does */
  .sw-sheet-in::before{display:none}
}
@keyframes sw-fade{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
/* flex:none, or the header shares the squeeze with the list and the whole
   column drifts. It is furniture; only the list is allowed to give. */
.sw-sheet-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;
  flex:none;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.sw-x{background:none;border:0;color:#00D4FF;font-family:inherit;font-size:12px;
  font-weight:600;cursor:pointer;padding:4px}
#sw-count{font-family:'Rajdhani',sans-serif;font-size:11px;letter-spacing:.08em;
  color:var(--muted);text-transform:none}

/* A ticker is short and the list is long, so the field earns its place the
   moment there is more than a screenful. */
.sw-find{position:relative;display:flex;align-items:center;margin:2px 0 10px;flex:none}
.sw-find-i{position:absolute;left:11px;width:15px;height:15px;pointer-events:none;
  stroke:var(--muted);stroke-width:2;fill:none;stroke-linecap:round}
.sw-find input{width:100%;background:var(--surface2);border:1px solid var(--border);
  border-radius:11px;padding:10px 12px 10px 34px;color:var(--text);
  font-family:inherit;font-size:14px;outline:none;transition:border-color .15s}
.sw-find input::placeholder{color:var(--muted)}
.sw-find input:focus{border-color:var(--accent2)}

/* Firefox takes the two-value form; WebKit needs the pseudo-elements. Both say
   the same thing: a thin track in the app's own colours instead of the
   platform's grey bar down the middle of the sheet. */
/* min-height:0 is the whole fix. A flex child will not shrink below its own
   content unless told it may, so the list ignored the sheet's max-height, the
   sheet grew past the screen, and its last rows went under the bottom edge.
   Every other value here was already right. */
.sw-list{overflow-y:auto;display:flex;flex-direction:column;
  flex:1 1 auto;min-height:0;
  scrollbar-width:thin;scrollbar-color:var(--border) transparent;
  overscroll-behavior:contain}
.sw-list{padding-bottom:4px;scroll-padding-block-end:8px}
.sw-list::-webkit-scrollbar{width:4px}
.sw-list::-webkit-scrollbar-track{background:transparent}
.sw-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.sw-list::-webkit-scrollbar-thumb:hover{background:var(--accent2)}
.sw-item{display:flex;align-items:center;gap:11px;width:100%;background:none;border:0;
  border-bottom:1px solid rgba(30,42,66,.6);padding:11px 8px;cursor:pointer;
  font-family:inherit;color:#E8F0FF;text-align:left;border-radius:10px;
  transition:background .12s}
.sw-item:last-child{border-bottom:0}
.sw-item:hover{background:rgba(22,30,48,.55)}
.sw-item:active{background:rgba(22,30,48,.9)}
.sw-item img,.sw-item .ic,.sw-item i{width:30px;height:30px;border-radius:50%;flex:none;display:block}
/* a row, so the tag sits beside the ticker instead of after it in the text
   flow - where it wrapped, and then wrapped again inside itself */
.sw-item-s{flex:1;min-width:0;display:flex;align-items:center;gap:7px;
  font-size:14px;font-weight:600;letter-spacing:.03em}
.sw-hop{flex:none;white-space:nowrap;padding:1px 6px;border-radius:6px;
  font-family:'Rajdhani',sans-serif;font-weight:500;font-size:10px;letter-spacing:.06em;
  color:var(--muted);background:var(--surface2);border:1px solid var(--border);
  vertical-align:middle}
.sw-item-r{display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:0}
.sw-item-v{font-family:'Rajdhani',sans-serif;font-size:13px;color:var(--muted)}
.sw-item-u{font-family:'Rajdhani',sans-serif;font-size:12px;color:#00FFB0}
.sw-item-u:empty,.sw-item-v:empty{display:none}
.sw-none{padding:18px 4px;font-size:13px;line-height:1.5;color:var(--muted);text-align:center}

/* ══ patch55: кнопки обмена внизу экрана ══
   Поля читаются сверху вниз, а действие ждёт там, где его ищет большой палец.
   Пустота между ними принадлежит экрану, а не кнопке. */
/* An id beats .step{display:none}, so this has to say when, not just how -
   otherwise the swap screen is drawn on top of every other tab. */
#st-swap.on{display:flex;flex-direction:column}
#st-swap #sw-note{margin:0 4px 14px}
#st-swap #sw-go{margin-top:auto}
#st-swap .btn.quiet{margin-top:10px}

/* ══ patch58: зоны проскальзывания ══
   Дорожка бегунка красится по пулу, а не по балансу: докуда сделка дёшева,
   докуда терпима, и где начинается потеря. Это видно пальцем, до всяких цифр. */
.sw-range::-webkit-slider-runnable-track{
  background:var(--sw-zones,linear-gradient(90deg,#7B5CFF,#00D4FF))}
.sw-range::-moz-range-track{
  background:var(--sw-zones,linear-gradient(90deg,#7B5CFF,#00D4FF))}
/* Sits directly under the amount it describes, in the quiet weight - the
   number above is the one being typed, this one only says what it means. */
.sw-usd{font-family:'Rajdhani',sans-serif;font-size:13px;color:var(--muted);
  margin-top:2px;min-height:17px;letter-spacing:.02em}
.sw-usd:empty{min-height:0}

.sw-hint{margin-top:9px;font-size:11px;line-height:1.4;color:var(--muted)}
.sw-hint b{font-family:'Rajdhani',sans-serif;font-weight:600;color:#00FFB0}

/* ══ patch59: история ══ */
/* The date, which a flat column of rows hides and a reader is always looking
   for. Sticky, so it is still there once the list has been scrolled into. */
.ac-day{position:sticky;top:0;z-index:2;margin:18px 0 2px;padding:6px 4px;
  font-family:'Rajdhani',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  background:linear-gradient(180deg,var(--bg) 65%,transparent)}
.ac-day:first-child{margin-top:2px}
.ac-row{display:flex;align-items:center;gap:12px;padding:12px 4px;
  border-bottom:1px solid rgba(30,42,66,.6);cursor:pointer}
.ac-row:last-child{border-bottom:0}
.ac-row:active{background:rgba(22,30,48,.7)}
/* The badge, which is the only thing on this screen a person reads without
   reading. A rounded square with a grey outline says nothing; a disc lit from
   inside in the colour of what happened says it before the words do. */
.ac-mark{--tint:#7B8AA5;width:40px;height:40px;border-radius:50%;flex:none;
  display:grid;place-items:center;position:relative;
  background:radial-gradient(circle at 32% 26%,
    color-mix(in srgb, var(--tint) 26%, transparent), transparent 68%), #131A2B;
  border:1px solid color-mix(in srgb, var(--tint) 32%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),
             0 8px 18px -12px color-mix(in srgb, var(--tint) 70%, transparent)}
.ac-mark svg{width:19px;height:19px;stroke:var(--tint);stroke-width:1.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.ac-mark.in{--tint:#00FFB0}
.ac-mark.out{--tint:#FF6B8A}
.ac-mark.swap{--tint:#00D4FF}
.ac-mark.stake{--tint:#7B5CFF}
.ac-mark.gift{--tint:#E8C840}
.ac-mark.code{--tint:#7B8AA5}
/* failure is a mark on the badge rather than a recolouring of it: what the
   transaction was and whether it worked are two different facts */
.ac-mark.fail::after{content:'';position:absolute;right:-1px;bottom:-1px;
  width:13px;height:13px;border-radius:50%;background:var(--red);
  border:2px solid var(--bg);
  -webkit-mask:linear-gradient(#000,#000);mask:none}
.ac-mark.fail{--tint:#FF6B8A}

/* older engines ignore color-mix and would render no tint at all */
@supports not (color: color-mix(in srgb, red 50%, transparent)){
  .ac-mark{background:#161E30;border-color:#1E2A42}
}
.ac-mid{flex:1;min-width:0}
.ac-t{font-size:14px;font-weight:600;letter-spacing:.02em}
.ac-s{font-size:11px;color:var(--muted);font-family:'Rajdhani',sans-serif;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-r{text-align:right;flex:none}
.ac-v{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:15px}
.ac-v.in{color:#00FFB0}
.ac-w{font-size:10px;color:var(--muted);font-family:'Rajdhani',sans-serif}
.ac-bad{color:var(--red);font-size:11px;font-family:'Rajdhani',sans-serif}

/* ---- one transaction ---- */
.tx-body{overflow-y:auto;min-height:0;flex:1;scrollbar-width:thin;
  scrollbar-color:var(--border) transparent}
.tx-head{display:flex;align-items:center;gap:12px;margin:2px 0 14px}
.tx-head b{display:block;font-size:16px;font-weight:600;color:#E8F0FF}
.tx-head i{display:block;font-style:normal;font-size:11px;color:var(--muted);
  font-family:'Rajdhani',sans-serif;margin-top:2px}
.tx-line{display:flex;justify-content:space-between;gap:12px;padding:7px 0;
  font-size:12px;color:var(--muted);border-bottom:1px solid rgba(30,42,66,.5)}
.tx-line b{font-family:'Rajdhani',sans-serif;font-weight:600;color:#E8F0FF;
  text-align:right;word-break:break-all}
.tx-line.in b{color:#00FFB0}
.tx-line.out b{color:#FF6B8A}
.tx-who{margin:-2px 0 6px;font-size:11px;color:var(--muted);
  font-family:'Rajdhani',sans-serif;text-align:right}
.tx-moves{margin-bottom:8px}
.tx-fail{margin:0 0 12px;padding:11px 13px;border-radius:12px;font-size:12px;line-height:1.5;
  color:#FFB3C4;background:rgba(255,107,138,.08);border:1px solid rgba(255,107,138,.3)}
.tx-fail p{margin:6px 0 0;font-family:ui-monospace,monospace;font-size:11px;
  color:var(--muted);word-break:break-all}
.tx-hash{margin:12px 0 4px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;line-height:1.6;color:var(--muted);word-break:break-all}
.tx-acts{display:flex;gap:10px;margin:12px 0 0}
.tx-acts .btn{flex:1;margin:0}

/* ══ patch62: баланс во время пересчёта ══
   Приглушённый - значит «это прошлая цифра, идёт проверка». Не спиннер:
   число остаётся читаемым, потому что оно всё ещё верное. */
.bal-value.stale{color:var(--muted);transition:color .35s ease}

/* ══ patch67: NFT ══
   Префикс hm-, потому что .seg уже занят экраном создания кошелька. */
.hm-seg{display:flex;border:1px solid var(--border);border-radius:12px;overflow:hidden;
  background:var(--surface);margin:0 0 14px}
.hm-seg-b{flex:1;background:none;border:0;color:var(--muted);font-family:inherit;font-weight:600;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:11px 6px;cursor:pointer;
  position:relative;transition:color .18s}
.hm-seg-b.on{color:#E8F0FF}
.hm-seg-b.on::after{content:'';position:absolute;left:14%;right:14%;bottom:0;height:2px;
  background:linear-gradient(90deg,#7B5CFF,#00D4FF)}
.hm-seg-n{font-family:'Rajdhani',sans-serif;font-weight:700;margin-left:6px;color:var(--muted)}

.nft-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:14px}
.nft-card{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--surface)}
.nft-art{aspect-ratio:1;position:relative;background:linear-gradient(150deg,#1B2338,#12182A);
  display:grid;place-items:center;overflow:hidden}
.nft-art img{width:100%;height:100%;object-fit:cover;display:block}
.nft-art .ph{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:26px;color:#2C3A57}
.nft-meta{padding:9px 10px 11px;min-width:0}
.nft-id{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nft-col{font-size:10px;color:var(--muted);letter-spacing:.06em;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ══ patch68: широкое окно ══
   Одна ширина на всё приложение. Панель вкладок раньше растягивалась на весь
   экран, потому что прибита к краям - на телефоне это одно и то же, на
   десктопе колонка оказывалась по центру, а вкладки по углам. */
:root{--app-w:520px}
.tabs{left:50%;right:auto;transform:translateX(-50%);
  width:100%;max-width:var(--app-w)}
.step{max-width:var(--app-w)}

/* Десктопный вебвью Telegram отдаёт окно шире видимой части, поэтому 100%
   центрирует по тому, чего не видно. Правильная величина - ширина вьюпорта,
   ту же пару у высоты приложение уже использует. */
body{width:100%;max-width:100vw;margin:0 auto}
.tabs{max-width:min(var(--app-w),100vw)}

/* ---------------- P2P market ----------------
   The widget fills the screen under a thin header. The height follows the
   Telegram viewport, the same variable .step uses. */
#st-p2p{padding:10px 10px 0;display:none;flex-direction:column}
#st-p2p.on{display:flex}
.p2p-top{display:flex;align-items:center;gap:12px;margin:0 4px 10px;flex:none}
.p2p-top h2{margin:0;font-size:17px}
.p2p-frame{flex:1;min-height:calc(var(--tg-viewport-stable-height, 100vh) - 64px);
  border-radius:16px;overflow:hidden;border:1px solid var(--border);background:var(--surface)}
.p2p-frame iframe{display:block;width:100%;height:calc(var(--tg-viewport-stable-height, 100vh) - 66px);border:0}
.p2p-frame .empty{padding:40px 0;text-align:center;color:var(--muted)}
.p2p-lines{display:flex;flex-direction:column;gap:1px;border-radius:12px;overflow:hidden;
  border:1px solid var(--border);margin-bottom:10px;flex:none}
.p2p-line{display:flex;justify-content:space-between;gap:14px;padding:10px 12px;background:var(--surface2);
  font-size:13px;line-height:1.45}
.p2p-line span{color:var(--muted);flex:none}
.p2p-line b{font-weight:600;color:var(--text);text-align:right;word-break:break-word}
#p2p-left{text-transform:none;letter-spacing:0;font-size:11px}
#p2p-sheet .sw-sheet-in{overflow-y:auto}

/* Noble USDC notice on the home screen */
.warn.sunset[hidden]{display:none}
.warn.sunset{position:relative;display:flex;flex-direction:column;gap:4px;padding-right:34px;margin:12px 0}
.warn.sunset b{font-weight:600}
.warn.sunset span{line-height:1.5}
.warn.sunset a{color:var(--accent);text-decoration:underline;align-self:flex-start}
.sunset-x{position:absolute;top:6px;right:8px;width:24px;height:24px;border:0;background:none;
  color:inherit;opacity:.6;font-size:18px;line-height:1;cursor:pointer}

/* ---------------- staking ---------------- */
.stk-acts{display:flex;gap:10px;margin-bottom:14px}
.stk-acts .btn{flex:1;margin:0}
.stk-acts .btn[disabled]{opacity:.45}
.stk-row{flex-wrap:wrap;cursor:pointer}
.stk-row.open{border-color:var(--accent)}
.stk-row-acts{flex-basis:100%;display:flex;gap:8px;padding-top:10px;margin-top:4px;border-top:1px solid var(--border)}
.stk-row-acts .dust{flex:1;padding:8px 0}
.stk-ico{background:var(--surface2);color:var(--muted);font-weight:700}
.stk-flag{font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--border);border-radius:6px;padding:1px 5px;margin-left:4px;vertical-align:middle}
.stk-flag.bad{color:var(--red);border-color:var(--red)}
.stk-sort{display:flex;gap:6px;margin:10px 0}
.stk-vals{display:flex;flex-direction:column;gap:0}
button.row.stk-val{width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer}
/* The header stays put and only the body scrolls: when the whole panel
   scrolled, Close went off the top with the list and the sheet could not be
   shut. */
#stk-sheet-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
.stk-ico{overflow:hidden}
.stk-ico img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}

/* ---------------- staking screen ---------------- */
.stk-cap{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.stk-big{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:34px;line-height:1;color:#fff}
.stk-big small{font-family:'Exo 2',sans-serif;font-size:15px;font-weight:500;color:var(--muted)}
.stk-hero{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:18px;
  display:flex;flex-direction:column;gap:16px;margin-bottom:14px}
.stk-hero-top{display:flex;align-items:center;gap:16px}
.stk-ring{position:relative;width:112px;height:112px;flex:none}
.stk-ring-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.stk-ring-in b{font-family:'Rajdhani',sans-serif;font-size:24px;line-height:1}
.stk-ring-in small{font-size:10px;color:var(--muted)}
.stk-hero-num{display:flex;flex-direction:column;gap:5px;min-width:0}
.stk-hero-num small{font-size:13px;color:var(--muted)}
.stk-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.stk-tiles div{background:var(--surface2);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.stk-tiles small{font-size:11px;color:var(--muted)}
.stk-tiles b{font-family:'Rajdhani',sans-serif;font-size:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g{color:var(--green)}.c{color:var(--accent2)}
.stk-legend{display:flex;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--muted)}
.stk-legend span{display:flex;align-items:center;gap:6px}
.stk-legend i{width:8px;height:8px;border-radius:2px;display:inline-block}
.stk-legend i.free{background:var(--border);box-shadow:inset 0 0 0 1px #33466B}
.stk-bigacts{display:flex;gap:10px}
.stk-bigact{flex:1 1 0;min-height:66px;background:var(--surface);border:1px solid var(--border);border-radius:16px;
  color:var(--text);font-family:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;padding:8px 4px}
.stk-bigact svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.stk-bigact b{font-size:13px;font-weight:600}
.stk-bigact small{font-size:11px;color:var(--muted)}
.stk-bigact small.g{color:var(--green)}
.stk-bigact.main{background:var(--accent);border-color:var(--accent);color:#fff}
.stk-bigact[disabled]{opacity:.45;cursor:default}
.stk-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:14px;margin-bottom:10px;cursor:pointer;
  display:flex;flex-direction:column;gap:12px}
.stk-card.open{border-color:var(--accent)}
.stk-card.bad{border-color:rgba(255,107,107,.45)}
.stk-card-top{display:flex;align-items:center;gap:12px}
.stk-card-top .stk-ico{width:44px;height:44px;flex:none}
.stk-card-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.stk-card-name{display:flex;align-items:center;gap:8px;min-width:0}
.stk-card-name span{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stk-card-name em{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:6px;padding:2px 6px;flex:none}
.stk-card-name em.ok{color:var(--green);background:rgba(0,255,176,.10)}
.stk-card-name em.bad{color:#FF8A8A;background:rgba(255,107,107,.12)}
.stk-card-mid small{font-size:12px;color:var(--muted)}
.stk-card-val{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.stk-card-val b{font-family:'Rajdhani',sans-serif;font-size:18px}
.stk-card-val small{font-size:12px}
.stk-card-warn{font-size:12px;color:#FF8A8A}
.stk-card .stk-row-acts{border-top:1px solid var(--border);padding-top:10px;margin:0}
.stk-bar{height:4px;border-radius:2px;background:var(--border);overflow:hidden}
.stk-bar i{display:block;height:100%;background:var(--accent);border-radius:2px}
.stk-card.bad .stk-bar i{background:var(--red)}
.stk-bar.c{height:6px}.stk-bar.c i{background:var(--accent2)}
.stk-unb{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:14px;margin-bottom:10px;display:flex;flex-direction:column;gap:9px}
.stk-unb-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.stk-unb-top b{font-family:'Rajdhani',sans-serif;font-size:18px}
.stk-unb small{font-size:12px;color:var(--muted)}
.stk-hero-empty{border-color:#2A2F5A}
.stk-hero-empty p{margin:0;font-size:14px;line-height:1.55;color:#C6D3EA}
.stk-hero-empty .btn{margin:0}
.stk-apr-line{font-size:13px;color:var(--muted)}.stk-apr-line b{color:var(--text)}
.stk-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.stk-steps div{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:5px}
.stk-steps span{width:24px;height:24px;border-radius:50%;background:var(--border);color:#B9A8FF;font-family:'Rajdhani',sans-serif;
  font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center}
.stk-steps b{font-size:14px}.stk-steps small{font-size:12px;color:var(--muted)}
.stk-wd{text-align:left;margin:10px 4px 0;color:var(--gold)}

/* ---------------- governance ---------------- */
button.row.gov-row{width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer}
.gov-row .row-name{white-space:normal;line-height:1.35}
.gov-mine{color:var(--green);font-weight:600}
.gov-todo{color:var(--accent);font-weight:600}
.gov-ok{color:var(--green)}
.gov-bad{color:var(--muted)}
.gov-st-passed{color:var(--green)}.gov-st-rejected,.gov-st-failed{color:var(--red)}
.gov-st-voting{color:var(--accent)}.gov-st-deposit{color:var(--muted)}
.gov-bar{display:flex;height:6px;border-radius:3px;overflow:hidden;background:var(--surface2);margin:8px 0 4px}
.gov-bar i{display:block;height:100%}
.gov-bar .y,.gov-legend .y::before{background:#3ecf8e}
.gov-bar .n,.gov-legend .n::before{background:#f06a6a}
.gov-bar .v,.gov-legend .v::before{background:#b04ae8}
.gov-bar .a,.gov-legend .a::before{background:#8a93a6}
.gov-legend{display:flex;flex-wrap:wrap;gap:10px;font-size:11px;color:var(--muted)}
.gov-legend span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:4px}
.gov-title{margin:0 0 10px;font-size:16px;line-height:1.35}
.gov-text{white-space:pre-wrap;word-break:break-word;font-size:13px;line-height:1.55;color:var(--text);
  background:var(--surface2);border-radius:12px;padding:12px;margin:10px 0}
.gov-text.clip{max-height:220px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 70%,transparent)}
.gov-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0 10px}
.gov-opt{padding:12px 0}
.gov-opt.on{border-color:var(--accent);color:var(--accent)}
#gov-sheet-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
#st-gov .warn a{color:var(--accent)}
.tab{position:relative}
.tab-badge{position:absolute;top:4px;left:calc(50% + 6px);min-width:16px;height:16px;padding:0 4px;border-radius:8px;
  background:var(--surface2);color:var(--text);font-size:10px;font-weight:700;line-height:16px;text-align:center}
.tab-badge.todo{background:var(--accent);color:#fff}
.gov-voters{display:flex;flex-direction:column;gap:6px}
.gov-voters .gov-voter.more{display:none}
.gov-voters.all .gov-voter.more{display:block}
.gov-voter{background:var(--surface2);border-radius:10px;padding:8px 10px}
.gov-voter-top{display:flex;align-items:center;gap:8px;font-size:13px}
.gov-rank{color:var(--muted);font-size:11px;min-width:18px}
.gov-who{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gov-vp{color:var(--muted);font-size:11px}
.gov-v{font-size:11px;font-weight:600;padding:2px 6px;border-radius:6px;white-space:nowrap}
.gov-v.y{color:#3ecf8e;background:rgba(62,207,142,.12)}.gov-v.n{color:#f06a6a;background:rgba(240,106,106,.12)}
.gov-v.v{color:#c77dff;background:rgba(176,74,232,.14)}.gov-v.a{color:#a7b0c2;background:rgba(138,147,166,.14)}
.gov-v.none{color:var(--muted);font-weight:500}
.gov-memo{margin-top:6px;font-size:12.5px;line-height:1.5;white-space:pre-wrap;word-break:break-word;color:var(--text)}
#gov-memo{width:100%;box-sizing:border-box;resize:vertical;font:inherit}
body.sheet-open .tabs{visibility:hidden}
.gov-link{color:var(--accent);text-decoration:underline;word-break:break-all}

/* ══ GRAM swap: Cross-chain card + maker screen ══ */
.xc{display:block;width:100%;text-align:left;font-family:inherit;color:var(--text);cursor:pointer;
  background:linear-gradient(135deg,rgba(0,152,234,.14),rgba(123,92,255,.10) 60%,var(--surface));
  border:1px solid rgba(0,152,234,.35);border-radius:var(--r-card);padding:12px 14px 13px;margin:-8px 0 20px;
  transition:transform .12s}
.xc[hidden]{display:none}
.xc:active{transform:scale(.98)}
.xc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.xc-label{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600}
.xc-badge{font-size:9px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--gold);
  border:1px solid rgba(232,200,64,.45);border-radius:999px;padding:2px 8px}
.p2p-top .xc-badge{margin-left:auto}
.xc-main{display:flex;align-items:center;gap:12px}
.xc-ico{display:flex;flex:none}
.xc-ico .sym{width:30px;height:30px;font-size:13px}
.xc-ico .sym+.sym{margin-left:-9px;box-shadow:0 0 0 2px var(--surface)}
.xc-txt{display:flex;flex-direction:column;min-width:0;flex:1}
.xc-txt b{font-family:'Rajdhani',sans-serif;font-size:17px;color:#fff;line-height:1.2}
.xc-txt span{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xc-go{width:18px;height:18px;flex:none;stroke:var(--muted);fill:none;stroke-width:2;stroke-linecap:round}
.gx-intro{font-size:12.5px;color:var(--muted);line-height:1.6;margin:4px 4px 14px}
.gx-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 4px 6px;font-size:12.5px;color:var(--muted)}
.gx-bar b{color:var(--text);margin-left:6px}
.gx-bar i{display:block;font-style:normal;font-size:11px;opacity:.75}
.gx-list{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.gx-item{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-row);padding:11px 12px}
.gx-l{flex:1;min-width:0;font-size:13px;color:var(--muted)}
.gx-l b{color:var(--text)}
.gx-l span{display:block;font-size:11.5px;margin-top:2px;line-height:1.5}
.gx-none{font-size:12.5px;color:var(--muted);margin:0 4px}
.gx-tag{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;border-radius:999px;padding:2px 8px;
  border:1px solid var(--border);color:var(--muted);flex:none}
.gx-tag.pending{color:var(--gold);border-color:rgba(232,200,64,.45)}
.gx-tag.locked{color:var(--green);border-color:rgba(0,255,176,.35)}
.gx-tag.unanswered{color:var(--red);border-color:rgba(255,107,107,.4)}
.gx-rates{display:flex;flex-direction:column;gap:2px;margin:-2px 2px 12px;padding:0 0 12px;border-bottom:1px solid var(--border)}
.gx-rates b{font-family:'Rajdhani',sans-serif;font-size:17px;color:#fff}
.gx-rates span{font-size:11.5px;color:var(--muted)}
.gx-amt{background:var(--surface2);border:1px solid var(--border);border-radius:16px;padding:12px 14px}
.gx-amt:focus-within{border-color:rgba(123,92,255,.6)}
.gx-amt-top{display:flex;align-items:center;justify-content:space-between;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);font-weight:600;min-height:24px}
.gx-mkt{letter-spacing:0;text-transform:none;font-weight:500;font-size:11.5px}
.gx-amt-in{display:flex;align-items:center;gap:10px;margin-top:4px}
.gx-amt-in input[type=text]{flex:1;min-width:0;background:none;border:0;padding:2px 0;font-family:'Rajdhani',sans-serif;
  font-size:28px;font-weight:700;color:#fff;box-shadow:none}
.gx-amt-in input[type=text]:focus{box-shadow:none}
.gx-tok{display:flex;align-items:center;gap:7px;flex:none;font-weight:700;font-size:14px;color:var(--text);
  background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:999px;padding:5px 11px 5px 5px}
.gx-tok .sym{width:24px;height:24px;font-size:11px}
.gx-swap-ico{display:flex;justify-content:center;margin:-7px 0;position:relative;z-index:1}
.gx-swap-ico svg{width:30px;height:30px;padding:6px;border-radius:50%;background:var(--surface);border:1px solid var(--border);
  stroke:var(--accent2);fill:none;stroke-width:2;stroke-linecap:round}
.gx-chips{display:flex;gap:6px;margin-top:10px}
.gx-chip{font-family:inherit;font-size:12px;font-weight:600;color:var(--muted);background:transparent;cursor:pointer;
  border:1px solid var(--border);border-radius:999px;padding:5px 12px}
.gx-chip.on{color:#fff;border-color:var(--accent);background:rgba(123,92,255,.18)}
.gx-chip:disabled{opacity:.35;cursor:not-allowed}
.gx-amt-top .gx-chip{padding:2px 10px;font-size:11px;letter-spacing:.06em}
.gx-ton{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);margin:14px 2px 0}
.gx-ton b{color:var(--text);font-weight:600}
.gx-ton[hidden],.gx-ton-edit[hidden]{display:none}
.gx-ton-edit{margin:14px 0 0}
.gx-link{margin-left:auto;background:none;border:0;color:var(--accent2);font-family:inherit;font-size:12px;cursor:pointer}
.gx-more{margin-top:14px;font-size:12.5px;color:var(--muted)}
.gx-more summary{cursor:pointer;list-style:none}
.gx-more summary::before{content:'+ '}
.gx-more[open] summary::before{content:'‘2 '}
.gx-sum{margin-top:14px;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;gap:1px}
.gx-sum[hidden]{display:none}
.gx-sum div{display:flex;justify-content:space-between;gap:12px;padding:9px 12px;background:var(--surface2);font-size:12.5px}
.gx-sum span{color:var(--muted);flex:none}
.gx-sum b{color:var(--text);text-align:right;font-weight:600}
.gx-form{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:16px 14px 14px;margin-bottom:10px}
.gx-msg{font-size:12.5px;color:var(--muted);min-height:18px;margin:8px 4px 0;word-break:break-word}
.gx-msg.bad{color:var(--red)}
.gx-raw{margin-top:10px;font-size:11.5px;color:var(--muted)}
.gx-raw summary{cursor:pointer}
.gx-raw pre{white-space:pre-wrap;word-break:break-all;background:var(--surface2);border-radius:10px;padding:10px;margin-top:6px;
  font-size:10.5px;color:var(--text)}
.gx-item .gx-answer{width:auto;flex:none;margin:0;padding:8px 14px;font-size:12.5px;border-radius:999px}
.xc-n{margin-left:auto;margin-right:8px;min-width:20px;height:20px;border-radius:999px;background:var(--red);color:#fff;
  font-size:11px;font-weight:700;display:grid;place-items:center;padding:0 6px;animation:xcPulse 1.6s ease-in-out infinite}
.xc-n[hidden]{display:none}
@keyframes xcPulse{50%{box-shadow:0 0 0 6px rgba(255,107,107,.18)}}
.gx-alert{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-start;justify-content:center;
  padding:calc(70px + env(safe-area-inset-top,0px)) 16px 0;background:rgba(5,8,16,.55);backdrop-filter:blur(3px)}
.gx-alert[hidden]{display:none}
.gx-alert-in{width:100%;max-width:420px;background:var(--surface);border:1px solid rgba(0,152,234,.5);border-radius:20px;
  padding:18px 18px 16px;box-shadow:0 18px 50px rgba(0,0,0,.5);animation:gxDrop .28s ease-out}
@keyframes gxDrop{from{transform:translateY(-14px);opacity:0}}
.gx-alert-top{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:700}
.gx-alert-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}
.gx-alert-in b{display:block;font-family:'Rajdhani',sans-serif;font-size:24px;color:#fff;margin:10px 0 4px}
.gx-alert-in p{font-size:12.5px;color:var(--muted);line-height:1.5;margin:0 0 14px}
.gx-alert-btns{display:flex;gap:10px}
.gx-alert-btns .dust{flex:1;padding:12px 0}
.gx-alert-btns .btn{flex:2;margin:0}
.gx-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.gx-rec{font-size:11.5px;color:var(--muted)}
.gx-deal{align-items:flex-start}
.gx-steps{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}
.gx-steps span{font-size:10.5px;padding:3px 8px;border-radius:999px;border:1px solid var(--border);color:var(--muted)}
.gx-steps span.ok{color:var(--green);border-color:rgba(0,255,176,.35)}
.gx-steps span.ok::before{content:'\2713  '}
.gx-steps span.now{color:#fff;border-color:var(--accent);background:rgba(123,92,255,.18)}
.gx-deal .gx-tag.pending{animation:xcPulse 1.6s ease-in-out infinite}
/* GRAM look: icon, blue frame, a faded mark behind the text */
.gx-alert-in{position:relative;overflow:hidden;border-color:rgba(51,166,245,.65);
  background:radial-gradient(120% 90% at 100% 0%,rgba(51,166,245,.20),transparent 60%),var(--surface);
  box-shadow:0 18px 50px rgba(0,0,0,.5),0 0 0 1px rgba(51,166,245,.15),0 0 36px rgba(51,166,245,.18)}
.gx-alert-in::after{content:'';position:absolute;right:-46px;top:-38px;width:210px;height:210px;pointer-events:none;
  background:url('../tokens/GRAM.webp') center/contain no-repeat;opacity:.09;filter:blur(1.5px);transform:rotate(-12deg)}
.gx-alert-in>*{position:relative;z-index:1}
.gx-alert-ico{display:flex;flex:none}
.gx-alert-ico .sym{width:28px;height:28px;font-size:12px}
.gx-alert-in .btn.solid{background:linear-gradient(135deg,#1F8FE5,#5B6CFF)}
.gx-deal-ico{margin-top:2px}
.gx-deal-ico .sym{width:26px;height:26px;font-size:11px}
.gx-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin:6px 0 16px;border-radius:14px;
  background:var(--surface);border:1px solid var(--border)}
.gx-tab{font-family:inherit;font-size:13px;font-weight:700;color:var(--muted);background:transparent;border:0;
  border-radius:10px;padding:10px 0;cursor:pointer;letter-spacing:.04em}
.gx-tab.on{color:#fff;background:linear-gradient(135deg,rgba(51,166,245,.35),rgba(123,92,255,.35))}
#gx-pane-buy[hidden],#gx-pane-sell[hidden],.gx-buybox[hidden],#gx-buys-head[hidden]{display:none}
.gx-tc{margin-bottom:14px}
.gx-buybox{background:var(--surface);border:1px solid rgba(51,166,245,.5);border-radius:var(--r-card);padding:14px;margin-bottom:16px}
.gx-bb-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.gx-bb-top b{font-family:'Rajdhani',sans-serif;font-size:18px;color:#fff}
.gx-buybox .btn.solid{margin-top:12px;background:linear-gradient(135deg,#1F8FE5,#5B6CFF)}
.gx-offer .gx-buy-btn{background:linear-gradient(135deg,#1F8FE5,#5B6CFF)}
.gx-hero{position:relative;overflow:hidden;border-radius:20px;padding:16px 16px 14px;margin-bottom:16px;
  background:radial-gradient(120% 90% at 100% 0%,rgba(51,166,245,.20),transparent 60%),var(--surface);
  border:1px solid rgba(51,166,245,.55);box-shadow:0 0 30px rgba(51,166,245,.12)}
.gx-hero[hidden]{display:none}
.gx-hero.done{border-color:rgba(0,255,176,.5);background:radial-gradient(120% 90% at 100% 0%,rgba(0,255,176,.16),transparent 60%),var(--surface)}
.gx-hero-top{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.gx-hero-big{display:block;font-family:'Rajdhani',sans-serif;font-size:30px;color:#fff;margin:8px 0 0;line-height:1.1}
.gx-hero.done .gx-hero-big{color:var(--green)}
.gx-hero-sub{margin:0;font-size:13px;color:var(--muted)}
.gx-hero p{font-size:12.5px;color:var(--muted);line-height:1.55;margin:10px 0 0}
.gx-steps.big{gap:8px;margin-top:12px}
.gx-steps.big span{font-size:12px;padding:6px 11px}
.gx-steps span.now{position:relative}
.gx-steps span.now::after{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;margin-left:7px;
  background:#fff;vertical-align:middle;animation:gxBlink 1s ease-in-out infinite}
@keyframes gxBlink{50%{opacity:.15}}
.gx-problem{margin-top:10px;font-size:12.5px;line-height:1.5;color:var(--gold);background:rgba(232,200,64,.08);
  border:1px solid rgba(232,200,64,.3);border-radius:10px;padding:8px 10px}
.gx-problem .gx-link{margin-left:4px}
.gx-hero .gx-refund{margin-top:12px;width:100%}
.gx-hero-links{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:12px}
.gx-hero-links a{color:var(--accent2)}
.gx-hero-close{margin-top:12px;width:100%;padding:10px 0}