/* App overrides on top of the design system (style.css is the 390px design canvas). */
:root{--app-w:430px}
html,body{width:100%;max-width:var(--app-w);margin:0 auto}
html{background:var(--bg0)}
body{min-height:100vh;min-height:100dvh;position:relative;overflow-x:hidden}
.tabbar{width:100%;max-width:var(--app-w);left:50%;right:auto;transform:translateX(-50%);height:auto;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 8px)}
body.has-tab{padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))}
.inputbar{width:100%;max-width:var(--app-w);left:50%;right:auto;transform:translateX(-50%);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 10px)}
.top-safe{height:env(safe-area-inset-top,0px)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
[hidden]{display:none!important}
html.i18n-wait body{visibility:hidden}
[dir=rtl] .nav .side.r{justify-content:flex-start}

/* Overlays: .ov is shown by adding .show (design used #hash states) */
.ov{transition:opacity .18s}
.ov:not(.show){pointer-events:none}

/* Toast */
.toast{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%);max-width:80%;padding:12px 18px;border-radius:14px;background:rgba(6,23,16,.96);border:1px solid var(--line2);color:var(--t1);font-size:14px;z-index:200;box-shadow:var(--glow);text-align:center;pointer-events:none;opacity:0;transition:opacity .2s}
.toast.show{opacity:1}
.toast.err{border-color:rgba(255,77,98,.5);box-shadow:0 0 18px rgba(255,77,98,.35)}

/* Loading / empty */
.skel{background:linear-gradient(90deg,rgba(88,255,150,.05),rgba(88,255,150,.12),rgba(88,255,150,.05));background-size:200% 100%;animation:skel 1.2s infinite;border-radius:8px;min-height:14px}
@keyframes skel{from{background-position:200% 0}to{background-position:-200% 0}}
.empty{padding:40px 16px;text-align:center;color:var(--t3);font-size:13px}
.spin{width:18px;height:18px;border-radius:50%;border:2px solid rgba(57,255,126,.25);border-top-color:var(--neon);animation:spin .8s linear infinite;display:inline-block;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}
.btn[disabled],.btn.loading{opacity:.55;pointer-events:none}

/* Price flash */
.flash-up{animation:fu .6s}.flash-down{animation:fd .6s}
@keyframes fu{from{background:rgba(43,234,122,.22)}to{background:transparent}}
@keyframes fd{from{background:rgba(255,77,98,.22)}to{background:transparent}}

/* Red-up / green-down preference (settings): html[data-updown=red] */
html[data-updown=red]{--up:#FF4D62;--down:#2BEA7A;--grad-up:linear-gradient(90deg,#E8344B,#FF6B7A);--grad-down:linear-gradient(90deg,#1FD873,#5CFF8E)}
/* RTL: mirror directional arrows */
[dir=rtl] .arr,[dir=rtl] [data-back] svg,[dir=rtl] .i-right{transform:scaleX(-1)}
[dir=rtl] .num,[dir=rtl] .up,[dir=rtl] .down{unicode-bidi:plaintext}
/* Desktop: keep sheets inside the phone-width column, frame the column */
.ov .sheet{max-width:var(--app-w);margin:0 auto}
@media (min-width:600px){html{background:#010604}body{box-shadow:0 0 0 1px rgba(88,255,150,.08),0 0 60px rgba(0,0,0,.6)}}
/* Copy trading invite (assets/js/copy.js): own overlay so a backdrop tap never dismisses it */
.cpov{display:none;position:fixed;inset:0;z-index:120;background:rgba(1,8,4,.78);backdrop-filter:blur(3px);overflow-y:auto;padding:max(24px,env(safe-area-inset-top,0px)) 16px max(24px,env(safe-area-inset-bottom,0px))}
.cpov.show{display:flex;align-items:center;justify-content:center}
.cpdlg{position:relative;width:100%;max-width:calc(var(--app-w) - 32px);margin:auto;padding:20px 18px 18px;border-radius:22px;text-align:start;
  background:radial-gradient(90% 50% at 50% 0%,rgba(57,255,126,.14),transparent 70%) padding-box,linear-gradient(180deg,#0F2D1D,#071710) padding-box,var(--fx-hair-hot,var(--line2)) border-box;
  border:1px solid transparent;box-shadow:0 0 60px rgba(57,255,126,.18),0 24px 60px -20px rgba(0,0,0,.9);animation:fx-fade .25s ease-out}
.cp-bot{width:110px;margin:-58px auto -4px;display:block}
.cp-k{display:flex;align-items:center;gap:7px;font:700 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--fx-cy,#3CF0FF)}
.cp-title{font:700 19px/1.3 var(--disp);margin:10px 0 10px;overflow-wrap:anywhere}
.cp-pair{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.cp-pair>b{font:700 16px/1.2 "Inter";margin-inline-end:2px}
.cp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.cp-grid.two{grid-template-columns:1fr 1fr}
.cp-grid>div{padding:10px;border-radius:12px;background:rgba(5,18,11,.6);border:1px solid rgba(88,255,150,.09);min-width:0}
.cp-grid small{display:block;font-size:11px;color:var(--t2);margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-grid b{font:700 15px/1.2 "Inter";white-space:nowrap}
.cp-f{margin-top:14px}
.cp-lb{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--t2);margin-bottom:7px}
.cp-rg{color:var(--t3);font-variant-numeric:tabular-nums}
.cp-f .input input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--t1);font:700 17px/1 "Inter"}
.cp-f .input .u{color:var(--t2);font-size:13px;font-weight:600}
.cp-q{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}
.cp-q b{height:30px;display:grid;place-items:center;border-radius:9px;font:600 12px/1 var(--sans);color:var(--t2);background:rgba(22,56,36,.55);border:1px solid rgba(88,255,150,.12);cursor:pointer}
.cp-q b:active{color:var(--neon);border-color:var(--neon)}
.cp-x{position:absolute;top:12px;inset-inline-end:12px;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;color:var(--t2);background:rgba(3,14,8,.5);border:1px solid rgba(88,255,150,.14);z-index:3}
.cp-x svg{width:15px;height:15px}
.cpdlg>.btn.pri{display:flex;width:100%;margin-top:14px}
.cp-amt{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:14px;background:rgba(3,14,8,.55);border:1px solid rgba(88,255,150,.14)}
.cp-amt small{display:block;font-size:12px;color:var(--t2)}
.cp-amt b{display:block;margin-top:4px;font:800 22px/1.1 var(--disp);color:var(--t1)}
.cp-pct{font-size:11.5px;color:var(--neon);white-space:nowrap}
.cp-av{display:flex;align-items:center;gap:6px;margin-top:9px;font-size:12px;color:var(--t2)}
.cp-av b{color:var(--t1);font-size:12.5px}
.cp-av a{margin-inline-start:auto;color:var(--neon);font-weight:600}
.cp-err{margin-top:8px;font-size:12px;color:var(--down)}
.cp-note{font-size:11.5px;line-height:1.5;color:var(--t3);margin:12px 0 14px}
.cpdlg .btn.dis{pointer-events:none}

/* ---------- VIP tier badges (App.vipBadge) ---------- */
.vipx{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:2px;height:22px;padding:0 9px 0 3px;border-radius:11px;font:800 11.5px/1 var(--disp);letter-spacing:.02em;white-space:nowrap;vertical-align:middle;overflow:hidden;border:1px solid transparent}
.vipx svg{width:27px;height:21px;flex:none;margin:-3px 0 -3px -2px;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.35))}
.vipx b{font:inherit;position:relative;z-index:1}
.vipx.sm{height:18px;padding:0 7px 0 2px;font-size:10px;border-radius:9px}
.vipx.sm svg{width:22px;height:17px}
.vipx.lg{height:30px;padding:0 13px 0 4px;font-size:15px;border-radius:15px;gap:3px}
.vipx.lg svg{width:38px;height:29px;margin:-4px 0 -4px -3px}
.vipx.t0{color:#DDE3E9;background:linear-gradient(100deg,#48515B,#262C33);border-color:rgba(174,182,191,.45)}
.vipx.t1{color:#FFE7CF;background:linear-gradient(100deg,#B97A45,#6B3816);border-color:rgba(244,190,138,.55);box-shadow:0 0 8px rgba(185,122,69,.35)}
.vipx.t2{color:#26303A;background:linear-gradient(100deg,#F4F7FA,#AEB9C5);border-color:rgba(255,255,255,.8);box-shadow:0 0 8px rgba(220,230,240,.35)}
.vipx.t3{color:#2A1600;background:linear-gradient(100deg,#FFE58A,#FFB93D);border-color:rgba(255,240,180,.8);box-shadow:0 0 10px rgba(255,190,60,.4)}
.vipx.t4{color:#102614;background:linear-gradient(100deg,#FFE58A,#F2B53A 55%,#2BD072);border-color:rgba(160,255,190,.7);box-shadow:0 0 12px rgba(43,208,114,.4)}
.vipx.t5{color:#1E2A38;background:linear-gradient(100deg,#FFFFFF,#CAD8E8 55%,#93C1EE);border-color:rgba(255,255,255,.9);box-shadow:0 0 12px rgba(147,193,238,.5)}
.vipx.t6{color:#fff;background:linear-gradient(100deg,#5FA6FF,#1D47C2);border-color:rgba(169,209,255,.8);box-shadow:0 0 14px rgba(47,111,224,.55)}
.vipx.t7{color:#fff;background:linear-gradient(100deg,#FF6170,#9E1027);border-color:rgba(255,182,188,.8);box-shadow:0 0 14px rgba(210,31,55,.55)}
.vipx.t8{color:#fff;background:linear-gradient(100deg,#BC85FF,#5419B5);border-color:rgba(230,194,255,.85);box-shadow:0 0 16px rgba(116,54,219,.6)}
.vipx.t9{color:#04212B;background:linear-gradient(100deg,#D2FDFF,#45CFEC 50%,#8A96FF);border-color:rgba(240,255,255,.95);box-shadow:0 0 18px rgba(53,205,235,.65)}
.vipx.t10{color:#FFE58A;background:linear-gradient(100deg,#2A1F06,#120D03 55%,#2E2208);border:0;box-shadow:0 0 18px rgba(232,180,40,.55),inset 0 0 0 1px rgba(255,229,138,.35)}
.vipx.t10 b{background:linear-gradient(90deg,#FFF1B0,#FFC93D,#FFF1B0);-webkit-background-clip:text;background-clip:text;color:transparent}
.vipx.t10::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--vipa,0deg),#FFE58A,#FF5A7A,#3CF0FF,#B57BFF,#FFE58A);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:vipx-spin 3.6s linear infinite}
.vipx.vipx-shine::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;z-index:0;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:vipx-shine 3.2s ease-in-out infinite}
.vipx.locked{filter:grayscale(.75) brightness(.85);opacity:.7;box-shadow:none}
.vipx.locked::after,.vipx.locked::before{display:none}
@property --vipa{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes vipx-spin{to{--vipa:360deg}}
@keyframes vipx-shine{0%,60%{left:-60%}100%{left:130%}}
@media (prefers-reduced-motion:reduce){.vipx::after,.vipx::before{animation:none}}
/* VIP upgrade pop-up (app.js showVipUpgrade) */
.dlg.vipup{padding-top:28px}
.dlg.vipup .vipup-badge{display:flex;justify-content:center;margin-bottom:6px;transform:scale(1.35);transform-origin:center}
.dlg.vipup h3{color:var(--neon)}
.dlg.vipup .grid2{margin-top:18px}
/* Keyboard open (app.js keepSheetsAboveKeyboard): the overlay is fitted above the keyboard; sheets get compact and scroll if needed */
html.kb-open .ov.show .sheet{max-height:100%;overflow-y:auto;padding-bottom:12px;border-radius:18px 18px 0 0}
html.kb-open .ov.show .sheet .grab{display:none}
html.kb-open .ov.show .sheet.cap .cfoot{display:none}
html.kb-open .ov.show .sheet.cap .ch{margin-top:0}
html.kb-open .ov.show .sheet.cap .ch .to{display:none}
html.kb-open .ov.show .sheet.cap .pz{margin-top:10px}
html.kb-open .ov.show .sheet.cap .otp4{margin-top:10px}
html.kb-open .ov.show .sheet.cap .otp4 b{height:48px}
html.kb-open .ov.show .sheet.cap .btn{margin-top:10px}
@media (max-height:520px){html.kb-open .ov.show .sheet.cap .pz{aspect-ratio:300/84}}