/* YM design system: shared by YM Oracle and YM Exchange. Same tokens, two looks (dark and light, chosen by the device), same components.
   Keep this file in sync with the YM Oracle pages (landing, join, admin, dashboard). */
:root {
  --bg:#0a0c10; --panel:#161a22; --line:#242938; --line2:#1f2430; --mist:#8891a3; --paper:#eef1f6;
  --accent:#8b5cf6; --accentText:#a78bfa; --long:#22c55e; --short:#ef4444; --shortText:#f87171; --pending:#f2b134;
  --hero:linear-gradient(135deg,#1e2436,#161a22); --longTint:#1a2e22; --shortTint:#2e1a1a;
  --warnBg:#2a2416; --warnBorder:#4a3d1a; --failBg:#2a1a1e; --failBorder:#4a2a30; --chip:#1e222c;
  --overlay:rgba(0,0,0,.6); --shadow:0 4px 12px rgba(0,0,0,.25); --shadowBig:0 8px 24px rgba(0,0,0,.35); --glow:rgba(34,197,94,.18);
  --onAccent:#fff; --font:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace; color-scheme:dark;
}
/* Two looks only: dark (above) and light. The device chooses by default; the toggle in the top bar can override it (saved as ym_theme). */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:#f4f5f8; --panel:#ffffff; --line:#e2e5ec; --line2:#eceef3; --mist:#6a7285; --paper:#12151c;
    --accent:#6d28d9; --accentText:#6d28d9; --long:#15803d; --short:#dc2626; --shortText:#dc2626; --pending:#b45309;
    --hero:linear-gradient(135deg,#ffffff,#eceffa); --longTint:#dcfce7; --shortTint:#fee2e2;
    --warnBg:#fef6e0; --warnBorder:#f3dfa2; --failBg:#fdecec; --failBorder:#f5c6c6; --chip:#eceef3;
    --overlay:rgba(20,24,34,.35); --shadow:0 2px 10px rgba(30,40,70,.07); --shadowBig:0 8px 24px rgba(30,40,70,.10); --glow:rgba(21,128,61,.16);
    color-scheme:light;
  }
}
:root[data-theme="light"] {
    --bg:#f4f5f8; --panel:#ffffff; --line:#e2e5ec; --line2:#eceef3; --mist:#6a7285; --paper:#12151c;
    --accent:#6d28d9; --accentText:#6d28d9; --long:#15803d; --short:#dc2626; --shortText:#dc2626; --pending:#b45309;
    --hero:linear-gradient(135deg,#ffffff,#eceffa); --longTint:#dcfce7; --shortTint:#fee2e2;
    --warnBg:#fef6e0; --warnBorder:#f3dfa2; --failBg:#fdecec; --failBorder:#f5c6c6; --chip:#eceef3;
    --overlay:rgba(20,24,34,.35); --shadow:0 2px 10px rgba(30,40,70,.07); --shadowBig:0 8px 24px rgba(30,40,70,.10); --glow:rgba(21,128,61,.16);
    color-scheme:light;
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip}
body{margin:0;overflow-x:clip;background:var(--bg);color:var(--paper);font-family:var(--font);font-size:14px;line-height:1.5;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;transition:background .35s,color .35s}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
[hidden]{display:none!important}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}

/* logo: the original YM Exchange artwork, recolored by theme through its own transparency */
.logo{display:block;height:34px;aspect-ratio:947/605;background:var(--paper);-webkit-mask:url(/img/logo-white.png) center/contain no-repeat;mask:url(/img/logo-white.png) center/contain no-repeat;transition:background .35s}
.logo.lg{height:44px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;border-radius:12px;border:1px solid var(--accent);background:var(--accent);color:var(--onAccent);font-weight:600;font-size:14px;transition:transform .15s,filter .2s,border-color .2s}
.btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
.btn:disabled{opacity:.5;cursor:default;transform:none;filter:none}
.btn.ghost{background:var(--panel);border-color:var(--line);color:var(--paper)}
.btn.ghost:hover{border-color:var(--accent);filter:none}
.btn.soft{background:var(--chip);border-color:transparent;color:var(--accentText)}
.btn.white{background:var(--paper);border-color:var(--paper);color:var(--bg)}
.btn.sm{min-height:36px;padding:0 14px;font-size:13px;border-radius:10px}
.btn.block{width:100%}

/* surfaces */
.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow);transition:background .35s,border-color .2s}
.lbl{display:block;font-size:12px;font-weight:500;color:var(--mist);margin:0 0 8px;letter-spacing:.02em}
.inp{width:100%;min-height:46px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg);font-size:15px;font-weight:500;outline:none;transition:border-color .15s,box-shadow .15s}
select.inp{padding-right:10px}
.inp:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.inp::placeholder{color:var(--mist);opacity:.7}
.chip{min-height:38px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:var(--panel);font-weight:500;font-size:13px;transition:border-color .15s}
.chip:hover:not(:disabled){border-color:var(--accent)}
.chip.on{background:var(--accent);border-color:var(--accent);color:var(--onAccent)}
.chip:disabled{opacity:.45;cursor:default}
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:600;background:var(--chip);color:var(--mist);letter-spacing:.02em}
.pill.ok{background:var(--longTint);color:var(--long)}
.pill.wait{background:var(--warnBg);color:var(--pending)}
.pill.no{background:var(--shortTint);color:var(--shortText)}
.pill.done{background:var(--accent);color:var(--onAccent)}
.row{display:flex;gap:12px;align-items:center}.between{justify-content:space-between}.wrapf{flex-wrap:wrap}.stack{display:flex;flex-direction:column;gap:16px}
.mut{color:var(--mist);font-size:13px}
.err:empty{display:none}
.err:not(:empty){display:flex;align-items:flex-start;gap:10px;padding:11px 13px;border-radius:12px;background:var(--failBg);border:1px solid var(--failBorder);box-shadow:inset 3px 0 0 var(--short);color:var(--paper);font-weight:500;font-size:13.5px;line-height:1.45;animation:errin .22s ease-out}
.err:not(:empty)::before{content:"";flex:none;width:18px;height:18px;margin-top:1px;border-radius:50%;background:var(--short) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 2.600v4M6 9.200v.01' stroke='%23fff' stroke-width='1.700' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center/12px no-repeat}
@keyframes errin{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.err:not(:empty){animation:none}}
.mono{font-family:var(--mono)}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(20px);background:var(--paper);color:var(--bg);padding:12px 18px;border-radius:12px;font-weight:500;font-size:13px;opacity:0;transition:all .3s;z-index:300;max-width:92vw;box-shadow:var(--shadowBig);pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%)}
@keyframes up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.fade{animation:up .35s ease both}

/* theme switcher (same behaviour and storage key as YM Oracle) */
.thm{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--mist);flex:none;transition:color .15s,border-color .15s}
.thm:hover{color:var(--paper);border-color:var(--accent)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- order status tracker + waiting-room games ---- */
.trk{display:flex;align-items:flex-start;margin:16px 0 4px}
.trk .s{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;font-size:12px;color:var(--mist);text-align:center}
.trk .s::before{content:"";position:absolute;top:9px;right:50%;width:100%;height:2px;background:var(--line)}
.trk .s:first-child::before{display:none}
.trk .s.done::before,.trk .s.now::before{background:var(--long)}
.trk .d{position:relative;z-index:1;width:20px;height:20px;border-radius:50%;background:var(--panel);border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--onAccent)}
.trk .s.done .d{background:var(--long);border-color:var(--long)}
.trk .s.now .d{border-color:var(--accent);background:var(--panel);animation:trkp 1.8s ease-out infinite}
.trk .s.now{color:var(--paper);font-weight:600}.trk .s.done{color:var(--paper)}
@keyframes trkp{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 45%,transparent)}70%,100%{box-shadow:0 0 0 9px transparent}}
.job{padding:16px 0;border-top:1px solid var(--line)}.job:first-of-type{border-top:0}
.job .jh{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
@media(prefers-reduced-motion:reduce){.trk .s.now .d{animation:none}}
.ymg-ov{position:fixed;inset:0;z-index:1000;background:var(--overlay);display:flex;align-items:center;justify-content:center;padding:16px;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.ymg-ov[hidden]{display:none}
.ymg{width:100%;max-width:440px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadowBig);padding:18px 18px 16px}
.ymg-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.ymg-h b{font-size:17px;font-weight:600}
.ymg-x{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--mist);font-size:20px;line-height:1}
.ymg-chip{display:flex;align-items:center;gap:8px;background:var(--chip);color:var(--mist);border-radius:12px;padding:9px 12px;font-size:12.5px;margin-bottom:14px}
.ymg-chip .d{width:8px;height:8px;border-radius:50%;background:var(--pending);flex:none;animation:trkp 1.8s ease-out infinite}
.ymg-chip.ok{background:var(--longTint);color:var(--long);font-weight:600}
.ymg-hub{display:flex;flex-direction:column;gap:12px}.ymg-or{text-align:center;color:var(--mist);font-size:12px}
.ymg-tiles{display:grid;gap:10px}
.ymg-t{display:grid;grid-template-columns:1fr auto;gap:2px 10px;text-align:left;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:13px 14px;color:var(--paper);transition:border-color .15s,transform .15s}
.ymg-t:hover{border-color:var(--accent);transform:translateY(-1px)}.ymg-t b{font-size:14px;font-weight:600}.ymg-t span{grid-column:1;color:var(--mist);font-size:12px}.ymg-t i{grid-column:2;grid-row:1/3;align-self:center;font-style:normal;font-size:12px;color:var(--accentText);font-family:var(--mono)}
.ymg-coins{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--mist);margin:-4px 2px 12px}.ymg-coins[hidden]{display:none}.ymg-coins b{color:var(--paper);font-family:var(--mono)}
.ymg-over em{font-style:normal;font-weight:600;color:var(--accentText);font-size:13px;min-height:18px;max-width:240px}
.ymg-note{margin:2px 0 0;color:var(--mist);font-size:11.5px;line-height:1.55;text-align:center}
.ymg-bar{display:flex;justify-content:space-between;font-size:12.5px;color:var(--mist);margin-bottom:10px}.ymg-bar b{color:var(--paper);font-family:var(--mono)}
.ymg-stage{position:relative;background:var(--bg);border:1px solid var(--line);border-radius:16px;overflow:hidden;min-height:200px;padding:0}
.ymg-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}.ymg-hint{color:var(--mist);font-size:12px}
.ymg-over{position:absolute;inset:0;background:color-mix(in srgb,var(--bg) 86%,transparent);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.ymg-over b{font-size:20px;font-weight:600}.ymg-over span{color:var(--mist);font-size:13px;margin-bottom:6px}
.ymg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:10px}
.ymg-c{position:relative;aspect-ratio:5/2;border:0;padding:0;background:none;perspective:600px}
.ymg-c .f,.ymg-c .k{position:absolute;inset:0;border-radius:10px;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;transition:transform .35s}
.ymg-c .f{background:var(--chip);color:var(--accentText);font-family:var(--mono);font-weight:600;font-size:14px;border:1px solid var(--line)}
.ymg-c .k{transform:rotateY(180deg);overflow:hidden;border:1px solid var(--line);background:var(--panel);font-size:11px;color:var(--mist)}
.ymg-c .k img{width:100%;height:100%;object-fit:cover;display:block}
.ymg-c.on .f,.ymg-c.ok .f{transform:rotateY(180deg)}.ymg-c.on .k,.ymg-c.ok .k{transform:none}
.ymg-c.ok .k{border-color:var(--long);box-shadow:0 0 0 2px color-mix(in srgb,var(--long) 40%,transparent)}
@media(prefers-reduced-motion:reduce){.ymg-c .f,.ymg-c .k{transition:none}}

.vrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:14px}
.vrow:first-of-type{border-top:0}

/* ---- quick games on the landing page: invite card and visitor end screen ---- */
.gi{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:14px;width:max-content;max-width:min(460px,calc(100vw - 32px));background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:12px 12px 12px 14px;box-shadow:var(--shadowBig);animation:up .35s ease both}
.gi .ic{flex:none;width:42px;height:42px;border-radius:50%;background:radial-gradient(circle at 30% 26%,color-mix(in srgb,var(--pending) 55%,#fff),var(--pending) 62%);color:rgba(0,0,0,.62);display:flex;align-items:center;justify-content:center;font:600 20px var(--font)}
.gi .t{min-width:0}.gi .t b{display:block;font-size:14px;font-weight:600}.gi .t span{display:block;font-size:12.5px;color:var(--mist);margin-top:1px}
.gi .b{display:flex;align-items:center;gap:4px;flex:none}.gi .x{background:none;border:0;color:var(--mist);font-size:22px;line-height:1;padding:4px 8px}
@media(max-width:560px){.gi{left:16px;right:86px;transform:none;width:auto;max-width:none}.gi .ic{display:none}}
.ymg-sub{font-style:normal;color:var(--mist);font-size:12.5px;max-width:260px;margin-top:-2px}
.ymg-over .btn{min-width:200px}

/* game share sheet and the visitor "enough games" screen */
.ymg-sheet{position:absolute;inset:0;z-index:5;background:color-mix(in srgb,var(--bg) 78%,transparent);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:16px}
.ymg-sh{background:var(--panel);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);width:min(100%,380px);max-height:100%;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:12px}
.ymg-shh{display:flex;align-items:center;justify-content:space-between}.ymg-shh b{font-size:16px;font-weight:600}
.ymg-prev{display:flex;justify-content:center;align-items:center;min-height:120px;color:var(--mist);font-size:13px;text-align:center}
.ymg-prev img{display:block;max-width:100%;max-height:52vh;width:auto;border-radius:14px;border:1px solid var(--line)}
.ymg-sha{display:grid;grid-template-columns:1fr 1fr;gap:8px}.ymg-sha .btn{min-width:0;text-decoration:none;text-align:center}
.ymg-limit{text-align:center;gap:12px;padding:18px 4px}.ymg-limit b{font-size:20px;font-weight:600;display:block}.ymg-limit p{margin:0;color:var(--mist);font-size:14px;line-height:1.6}
.ymg-sha .btn:last-child:nth-child(odd){grid-column:1/-1}

/* weekly leaderboard */
.ymg-lb{display:flex;flex-direction:column;gap:12px}
.ymg-tabs{display:flex;gap:6px;flex-wrap:wrap}.ymg-tabs button{background:var(--chip);color:var(--mist);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font:500 12.5px var(--sans,inherit)}.ymg-tabs button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.ymg-rows{display:flex;flex-direction:column;gap:6px;min-height:120px}
.ymg-row{display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:9px 12px;font-size:14px}
.ymg-row i{font:600 13px var(--mono);font-style:normal;color:var(--mist)}.ymg-row b{font:600 14px var(--mono)}.ymg-row span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ymg-row.you{border-color:var(--accent);background:var(--chip)}.ymg-row.you i{color:var(--accentText)}

/* live support chat */
.chatbadge{position:absolute;top:-2px;right:-2px;min-width:20px;height:20px;border-radius:10px;background:var(--short);color:#fff;font:600 11px/20px var(--mono);font-style:normal;text-align:center;padding:0 5px;border:2px solid var(--bg)}
.chat{position:fixed;right:calc(18px + env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom));z-index:80;width:min(380px,calc(100vw - 24px));height:min(560px,calc(100vh - 36px));height:min(560px,calc(100dvh - 36px));display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadowBig,0 24px 60px rgba(0,0,0,.45));overflow:hidden}
.chat[hidden]{display:none}
@media(max-width:900px){.chat{z-index:95}}
@media(max-width:560px){.chat{right:0;left:0;bottom:0;width:auto;height:min(78vh,640px);height:min(78dvh,640px);border-radius:20px 20px 0 0}}
.chath{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 14px 12px 16px;border-bottom:1px solid var(--line)}
.chatw b{display:block;font-size:15px;font-weight:600}.chatw span{display:block;font-size:12px;color:var(--mist);margin-top:1px}
.chatx{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--mist);font-size:20px;line-height:1}
.chatl{flex:1;min-height:0;overflow:auto;padding:14px 14px 6px;display:flex;flex-direction:column;gap:8px}
.cm{display:flex;flex-direction:column;max-width:84%}.cm.mine{align-self:flex-end;align-items:flex-end}.cm.them{align-self:flex-start}
.cb{padding:9px 12px;border-radius:16px 16px 16px 5px;background:var(--chip);font-size:14px;line-height:1.5;overflow-wrap:anywhere;white-space:pre-wrap}
.cm.mine .cb{background:var(--accent);color:var(--onAccent,#fff);border-radius:16px 16px 5px 16px}
.cb a{color:inherit;text-decoration:underline}.cm small{font-size:11px;color:var(--mist);margin-top:3px}
.chatc{display:flex;flex-wrap:wrap;gap:6px;padding:4px 14px 8px}.chatc[hidden]{display:none}
.chatc button{background:transparent;border:1px solid var(--line);color:var(--accentText);border-radius:999px;padding:6px 11px;font:500 12.5px var(--font)}.chatc button:hover{border-color:var(--accent)}
.chatf{display:flex;align-items:flex-end;gap:8px;padding:10px 12px;border-top:1px solid var(--line)}
.chatf textarea{flex:1;min-width:0;resize:none;background:var(--bg);border:1px solid var(--line);border-radius:12px;color:var(--paper);padding:9px 11px;font:14px/1.4 var(--font);max-height:110px}
.chatf textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}
.chatwa{padding:0 14px 12px;font-size:12px;text-align:center}.chatwa a{color:var(--mist);text-decoration:underline}
@media(prefers-reduced-motion:no-preference){.chat:not([hidden]){animation:up .25s ease both}}

/* nudges: a quiet card in the bottom-left corner */
.nd{position:fixed;left:calc(18px + env(safe-area-inset-left));bottom:calc(18px + env(safe-area-inset-bottom));z-index:55;width:min(330px,calc(100vw - 36px));background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:13px 14px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px;transition:opacity .3s,transform .3s}
.nd .t b{display:block;font-size:14px;font-weight:600}.nd .t span{display:block;font-size:12.5px;color:var(--mist);margin-top:2px;line-height:1.5}
.nd .r{display:flex;align-items:center;gap:10px}.nd .nx{background:none;border:0;color:var(--mist);font:500 12.5px var(--font);padding:6px 4px}
.nd.out{opacity:0;transform:translateY(8px)}
@media(prefers-reduced-motion:no-preference){.nd:not(.out){animation:up .35s ease both}}
@media(max-width:900px){.nd{right:86px;width:auto}body:has(#nav) .nd{bottom:86px}}

/* legal pages */
.lgw{width:min(760px,100% - 32px);margin-inline:auto}
.lgh{border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 90%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lgh .lgw{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:14px}.lgh nav{display:flex;align-items:center;gap:6px}.lgh nav a:not(.btn){padding:8px 10px;border-radius:10px;color:var(--mist);font-size:14px}.lgh nav a:not(.btn):hover,.lgh nav a[aria-current]{color:var(--paper)}
.lg{padding-block:44px 28px}.lgk{margin:0;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accentText)}
.lg h1{margin:8px 0 0;font-size:clamp(30px,5vw,42px);font-weight:500;letter-spacing:-1px;text-wrap:balance}.lgd{margin:8px 0 28px;color:var(--mist);font-size:13px}
.lg section{padding:20px 0;border-top:1px solid var(--line)}.lg h2{margin:0 0 8px;font-size:17px;font-weight:600;letter-spacing:-.2px}
.lg p,.lg li{color:var(--mist);font-size:15px;line-height:1.75;max-width:68ch}.lg p{margin:0 0 8px}.lg ul{margin:0;padding-left:20px;display:grid;gap:6px}.lg li b{color:var(--paper);font-weight:600}
.lg a{color:var(--accentText);text-decoration:underline;text-underline-offset:3px}.lgq{margin-top:20px!important;padding-top:20px;border-top:1px solid var(--line)}
.lgf{border-top:1px solid var(--line);color:var(--mist);font-size:12px;margin-top:24px}.lgf .lgw{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;padding-block:22px 34px}.lgf nav{display:flex;gap:18px}.lgf a:hover{color:var(--paper)}
@media(max-width:480px){.lgh nav a:not(.btn){display:none}}

/* landing: how it works + FAQ, footer link button */
.sh{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:22px}.sh h2{margin:0;line-height:1.15;font-size:clamp(24px,4vw,34px);font-weight:500;letter-spacing:-.9px;max-width:22ch;text-wrap:balance}
.hiw{margin:64px 0 0}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;counter-reset:s}
.steps li{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:20px 20px 22px;display:grid;gap:8px;align-content:start}
.steps .n{position:absolute;top:18px;right:20px;font:500 13px var(--mono);color:var(--mist)}
.steps .si{width:44px;height:44px;border-radius:13px;background:var(--chip);color:var(--accentText);display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.steps h3{margin:0;font-size:17px;font-weight:600;letter-spacing:-.3px}.steps p{margin:0;color:var(--mist);font-size:14px;line-height:1.65}
@media(min-width:861px){.steps li:not(:last-child)::after{content:"";position:absolute;top:40px;right:-15px;width:16px;border-top:2px dashed var(--line);z-index:1}}
@media(max-width:860px){.steps{grid-template-columns:1fr}}
.faq{margin:64px 0 0;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:28px 48px;align-items:start}.faq .sh{margin:0;position:sticky;top:24px}
@media(max-width:860px){.faq{grid-template-columns:1fr}.faq .sh{position:static}}
.fq{border-top:1px solid var(--line)}.fq details{border-bottom:1px solid var(--line)}
.fq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 2px;cursor:pointer;font-size:16px;font-weight:500}
.fq summary::-webkit-details-marker{display:none}.fq summary::after{content:"+";flex:none;width:28px;height:28px;border-radius:50%;background:var(--chip);color:var(--accentText);display:flex;align-items:center;justify-content:center;font:500 18px/1 var(--mono);transition:transform .2s}
.fq details[open] summary::after{content:"\2212"}.fq summary:hover{color:var(--accentText)}.fq summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
.fq details p{margin:0 0 18px;padding-right:44px;color:var(--mist);font-size:14.5px;line-height:1.75;max-width:62ch}.fq details p a{color:var(--accentText);text-decoration:underline;text-underline-offset:3px}
.lnk{background:none;border:0;padding:6px 0;color:var(--accentText);font:inherit;cursor:pointer}.lnk[hidden]{display:none}
.lgn{display:block;margin-top:10px;color:var(--mist);font-size:12px;line-height:1.6}.lgn a{text-decoration:underline}
.lgl{margin:0 0 20px!important;font-size:18px!important;line-height:1.65!important;color:var(--paper)!important;max-width:60ch}
.lgp{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px 20px;margin:0 0 12px}.lgp b{display:block;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accentText);margin-bottom:8px}.lgp ul{margin:0;padding-left:20px}.lgp li{color:var(--paper)}

/* Nothing on any page can be selected, copied or dragged. Copying is done with the Copy buttons.
   Only the boxes you type in stay selectable. */
html, body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
input, textarea, [contenteditable="true"] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
img, svg, canvas, a { -webkit-user-drag: none; user-drag: none; }
@media print { body { display: none !important; } }
/* game canvases set touch-action:none themselves (games.js); a page-wide rule here could block scrolling. Everything else always scrolls vertically, on every page. */
html,body{touch-action:pan-x pan-y pinch-zoom}.ymg,.ymg-hub,.ymg-tiles,.gcard,.gcard *,.ymg-lb{touch-action:pan-y}

/* Gift cards: dropdowns with flags and icons, value tiles with quantity, custom total */
.dd{position:relative}.ddb{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:52px;padding:10px 14px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--paper);font:inherit;font-size:16px;text-align:left;cursor:pointer}
.ddb.ph .ddv{color:var(--mist)}.ddb.static{cursor:default}.dd.open .ddb{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}.dd.open .ddb svg{transform:rotate(180deg)}.ddb svg{flex:none;color:var(--mist);transition:transform .15s}
.ddv{display:flex;align-items:center;gap:10px;min-width:0}.fl{font-size:22px;line-height:1;flex:none}.dn{font-weight:500}.dc{color:var(--mist);font-size:14px}
.ddl{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;max-height:300px;overflow:auto;padding:6px;border:1px solid var(--line);border-radius:14px;background:var(--panel);box-shadow:var(--shadowBig,0 12px 40px rgba(0,0,0,.4))}
.ddo{display:flex;align-items:center;gap:10px;width:100%;padding:13px 10px;border:0;border-radius:10px;background:transparent;color:var(--paper);font:inherit;font-size:16px;text-align:left;cursor:pointer}.ddo:hover,.ddo:focus-visible,.ddo.on{background:var(--chip)}
.deng{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.gtl{white-space:nowrap;font-size:14px}
.den{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:60px;padding:12px 4px;border:1.5px solid var(--line);border-radius:14px;background:var(--panel);color:var(--paper);font-weight:600;font-size:16px;cursor:pointer;touch-action:manipulation}
.den.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--panel));color:var(--accentText);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);min-height:86px}
.stp{display:flex;align-items:center;gap:2px;font-size:13px}.stp i{font-style:normal;min-width:20px;text-align:center}.stp button{width:23px;height:23px;border:0;border-radius:50%;background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--accentText);font-size:17px;line-height:1;font-weight:700;cursor:pointer;padding:0}
.amt{position:relative}.amt span{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--mist);font-weight:600;pointer-events:none}.amt .inp{padding-left:44px;font-size:20px;font-weight:600}
.out.wa{background:var(--hero)}
@media (max-width:340px){.deng{grid-template-columns:repeat(3,minmax(0,1fr))}}

.ddo .rt{margin-left:auto;font-weight:600;color:var(--accentText)}


/* ---------- v0.14 dashboard polish ---------- */
/* Support launcher: brand colour, headset, and a label so it is never lost in a corner */
.chatfab{position:fixed;right:calc(16px + env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));z-index:70;display:flex;align-items:center;gap:9px;height:52px;padding:0 18px 0 12px;border-radius:999px;border:0;color:var(--onAccent,#fff);font:600 14px var(--font);background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 62%,#000));box-shadow:0 10px 28px color-mix(in srgb,var(--accent) 42%,transparent),0 2px 6px rgba(0,0,0,.35);transition:transform .15s,box-shadow .2s}
.chatfab:hover{transform:translateY(-2px)}.chatfab.up{bottom:calc(86px + env(safe-area-inset-bottom))}.chatfab.on{display:none}
.chatfab .cfi{position:relative;display:flex;width:30px;height:30px;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.18)}.chatfab .cfi svg{width:19px;height:19px}
.chatfab .cfd{position:absolute;right:-1px;bottom:0;width:9px;height:9px;border-radius:50%;background:#34d27b;border:2px solid color-mix(in srgb,var(--accent) 70%,#000)}
.chatfab:not(.on)::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid var(--accent);opacity:0;animation:cfpulse 3.2s ease-out 1.5s 3}
@keyframes cfpulse{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(1.35)}}@media(prefers-reduced-motion:reduce){.chatfab::after{animation:none}}
@media(max-width:900px){.chatfab.dock{bottom:82px}}
.chatbadge{top:-4px;right:-2px}
.chath{gap:12px;justify-content:flex-start}.chath .chatw{flex:1}.chath .chatx{margin-left:auto}
.chata{position:relative;flex:none;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 62%,#000));color:var(--onAccent,#fff)}.chata svg{width:22px;height:22px}.chata i{position:absolute;right:0;bottom:0;width:10px;height:10px;border-radius:50%;background:#34d27b;border:2px solid var(--panel)}

/* Nav: clear active marker */
.nav button{position:relative}.nav button.on::before{content:"";position:absolute;left:-14px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
@media(max-width:900px){.nav button.on::before{left:22%;right:22%;top:0;bottom:auto;width:auto;height:3px;border-radius:0 0 3px 3px}}

/* Home: balance and quick actions */
.bal .eye{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--mist);cursor:pointer}.bal .eye svg{width:18px;height:18px}.bal .eye:hover{color:var(--paper);border-color:var(--accent)}
.chipn{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accentText);font-size:12.5px;font-weight:600}.chipn i{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:wlive 2s infinite}
.qas{display:flex;flex-direction:column;gap:12px}
.qa{flex:1;display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:18px;border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow);color:inherit;font:inherit;text-align:left;cursor:pointer;transition:transform .15s,border-color .2s}
.qa:hover{transform:translateY(-2px);border-color:var(--accent)}
.qi{flex:none;display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 30%,transparent),color-mix(in srgb,var(--accent) 10%,transparent));color:var(--accentText)}.qi svg{width:24px;height:24px}
.qt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.qt b{font-size:17px;font-weight:600}.qt small{font-size:13px;color:var(--mist)}
.sch{flex:none;display:flex;color:var(--mist)}.sch svg{width:18px;height:18px}

/* Setup checklist with a progress ring */
.onb{display:flex;flex-direction:column;gap:14px;background:var(--hero);border-color:color-mix(in srgb,var(--accent) 25%,var(--line))}
.onbh{display:flex;align-items:center;gap:16px}.onbt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.onbt b{font-size:18px;font-weight:600}.onbt span{font-size:13px;color:var(--mist)}
.onbx{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--mist);font-size:20px;line-height:1;cursor:pointer}
.ring{position:relative;flex:none;width:62px;height:62px}.ring svg{width:100%;height:100%;transform:rotate(-90deg)}.ring circle{fill:none;stroke-width:5}.ring .rt{stroke:var(--line)}
.ring .rp{stroke:var(--accent);stroke-linecap:round;animation:ringin .9s cubic-bezier(.3,.7,.2,1) both}@keyframes ringin{from{stroke-dashoffset:var(--c)}}@media(prefers-reduced-motion:reduce){.ring .rp{animation:none}}
.ring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:600 14px var(--mono)}
.onbs{display:flex;flex-direction:column;gap:6px}
.ostep{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border-radius:14px;border:1px solid var(--line);background:var(--panel);color:var(--paper);font:inherit;font-size:14.5px;text-align:left;cursor:pointer;transition:border-color .15s}
.ostep:hover:not(.done){border-color:var(--accent)}.ostep .otx{flex:1}
.ostep .chk{flex:none;display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;border:2px solid var(--line);font-size:12px;color:var(--onAccent,#fff)}
.ostep.done{background:transparent;border-color:transparent;color:var(--mist);cursor:default}.ostep.done .chk{background:var(--long);border-color:var(--long)}.ostep.done .otx{text-decoration:none;opacity:.75}

/* Bank accounts */
.bkh{display:flex;justify-content:flex-end;font-size:12.5px}.bkl{display:flex;flex-direction:column;gap:10px}
.choice{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;padding:14px;border:1.5px solid var(--line);border-radius:16px;background:var(--bg);color:inherit;font:inherit;cursor:pointer}
.choice.on{border-color:var(--accentText);background:var(--hero)}
.choice .rd{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--line);margin-top:2px;display:grid;place-items:center}
.choice.on .rd{border-color:var(--accentText)}.choice.on .rd::after{content:'';width:10px;height:10px;border-radius:50%;background:var(--accentText)}
.choice b{display:block}.choice small{display:block;color:var(--mut,#8b93a7);margin-top:2px;font-size:12.5px}
.bkb{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:99px;background:rgba(139,92,246,.16);color:var(--accentText);white-space:nowrap}
.bk{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:16px;background:var(--bg)}
.bki{flex:none;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 30%,transparent),color-mix(in srgb,var(--accent) 10%,transparent));color:var(--accentText);font-weight:700}
.bkt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.bkt b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bkt span{font-size:13px;color:var(--mist)}.bkrm{color:var(--shortText,#f87171)}
.bke{display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 12px;text-align:center;border:1.5px dashed var(--line);border-radius:16px;color:var(--mist)}.bke svg{width:30px;height:30px;color:var(--accentText)}.bke b{color:var(--paper);font-weight:600}.bke span{font-size:13px}
.bform{display:flex;flex-direction:column;gap:14px}.bform[hidden]{display:none}

/* Settings */
.sett{display:flex;flex-direction:column;gap:22px;max-width:640px;width:100%}
.sprof{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:20px;border:1px solid var(--line);background:var(--hero)}.sprof .stx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.sprof .stx b{font-size:17px;font-weight:600}.sprof .stx small{font-size:13px;color:var(--mist);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.av.big{width:52px;height:52px;font-size:16px;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 62%,#000));color:var(--onAccent,#fff)}
.sgrp{display:flex;flex-direction:column;gap:8px}.sgl{padding:0 6px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mist)}
.sbox{border:1px solid var(--line);border-radius:20px;background:var(--panel);overflow:hidden;box-shadow:var(--shadow)}
.srow{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border:0;border-top:1px solid var(--line);background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;text-decoration:none;transition:background .15s}
.srow:first-child{border-top:0}.srow:hover{background:var(--chip)}
.sic{flex:none;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:11px;background:var(--chip);color:var(--accentText)}.sic svg{width:20px;height:20px}
.stx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}.stx b{font-weight:600;font-size:15px}.stx small{font-size:12.5px;color:var(--mist)}
.sval{flex:none;font-size:13px;color:var(--mist);font-weight:500}.sval .mono{font-family:var(--mono);letter-spacing:1px;color:var(--accentText)}
.swr{display:flex;align-items:center;justify-content:space-between;gap:14px}.swr b{display:block;font-weight:600}.swr small{display:block;font-size:12.5px;color:var(--mist);margin-top:2px}

/* Sheets: a bottom sheet on phones, a centred card on larger screens */
.sheet{gap:16px;max-height:88vh;max-height:88dvh;overflow:auto}
.shh{display:flex;align-items:center;justify-content:space-between}.shh b{font-size:19px;font-weight:600}.shx{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--mist);font-size:20px;line-height:1;cursor:pointer}
.invc{display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px;border-radius:18px;border:1.5px dashed color-mix(in srgb,var(--accent) 55%,var(--line));background:var(--bg)}.invc span{font-size:12px;color:var(--mist);letter-spacing:.06em;text-transform:uppercase}.invc b{font:600 30px var(--mono);letter-spacing:4px;color:var(--accentText)}
.mini2{display:flex;gap:10px}.mini2>div{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 6px;border-radius:14px;background:var(--chip)}.mini2 b{font-size:20px;font-weight:600}.mini2 span{font-size:12px;color:var(--mist)}
@media(max-width:600px){body .modal{align-items:flex-end;padding:0}body .modal .card{width:100%;border-radius:24px 24px 0 0;padding:20px 18px calc(22px + env(safe-area-inset-bottom))}body .modal.open .card{animation:sheetup .25s ease both}@keyframes sheetup{from{transform:translateY(40px);opacity:0}}}

/* v0.14.1 compact icon-only support launcher */
.chatfab{width:46px;height:46px;padding:0;gap:0;justify-content:center;right:14px;bottom:14px}
.chatfab .cfi{width:100%;height:100%;background:none}.chatfab .cfi svg{width:23px;height:23px}
.chatfab .cfd{right:3px;bottom:3px}
.chatfab.up{bottom:calc(80px + env(safe-area-inset-bottom))}@media(max-width:900px){.chatfab.dock{bottom:calc(76px + env(safe-area-inset-bottom));width:44px;height:44px}}

/* v0.15 YM Games page */
.gm{display:flex;flex-direction:column;gap:18px}.gmbody{gap:16px}
.gmb{position:relative;overflow:hidden;border-radius:22px;color:var(--onAccent,#fff);background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#0b0716));box-shadow:0 14px 34px color-mix(in srgb,var(--accent) 30%,transparent)}
.gmb-bg{position:absolute;inset:0;background:radial-gradient(circle at 88% 8%,rgba(255,255,255,.28),transparent 42%),radial-gradient(circle at 6% 110%,rgba(255,255,255,.16),transparent 46%);pointer-events:none}
.gmb-bg::after{content:"";position:absolute;right:-18px;top:-22px;width:150px;height:150px;border-radius:50%;border:26px solid rgba(255,255,255,.1)}
.gmb-in{position:relative;display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center;justify-content:space-between;padding:24px 26px}
.gmb-t{flex:1 1 260px;min-width:0}.gmb-k{display:inline-block;font:600 11px var(--mono,monospace);letter-spacing:.16em;padding:4px 10px;border-radius:99px;background:rgba(255,255,255,.18)}
.gmb h2{margin:10px 0 4px;font-size:26px;font-weight:700;letter-spacing:-.4px;line-height:1.15}.gmb p{margin:0;opacity:.85;font-size:13.5px;line-height:1.5;max-width:380px}
.gmb-c{flex:1 1 240px;display:flex;flex-direction:column;gap:14px;max-width:340px}
.gmb-bal{display:flex;align-items:center;gap:12px}.gmb-bal b{display:block;font-size:30px;font-weight:700;letter-spacing:-.6px;line-height:1}.gmb-bal small{opacity:.85;font-size:12.5px}
.gcoin{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;font:800 20px var(--font,sans-serif);color:#6b4300;background:radial-gradient(circle at 32% 28%,#fff1a8,#f7b928 58%,#d98a00);box-shadow:inset 0 -3px 0 rgba(0,0,0,.14),0 4px 12px rgba(0,0,0,.28)}.gcoin.big{width:46px;height:46px}
.gmb-y>div:first-child{display:flex;justify-content:space-between;gap:10px;font-size:12px;opacity:.9;margin-bottom:6px}.gmb-y b{font-weight:600;white-space:nowrap}
.gbar{position:relative;height:8px;border-radius:99px;background:rgba(255,255,255,.22);overflow:visible}.gbar i{display:block;height:100%;border-radius:inherit;background:#fff;min-width:0;transition:width .5s}
.gbar.sm{height:6px;margin:8px 0 6px;background:var(--chip)}.gbar.sm i{background:var(--accent)}.gbar.sm u{position:absolute;top:-3px;width:2px;height:12px;background:var(--mist);opacity:.6;border-radius:2px}
.card .gbar{background:var(--chip)}.card .gbar i{background:var(--accent)}
.gmt{display:flex;gap:4px;background:var(--panel);border:1px solid var(--line);padding:4px;border-radius:14px}.gmt button{flex:1;min-height:40px;border:0;border-radius:10px;background:transparent;font-weight:500;font-size:13.5px;color:var(--mist);transition:background .15s,color .15s}
.gmt button.on{background:var(--accent);color:var(--onAccent);font-weight:600}
.gg{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.gc{position:relative;display:flex;align-items:center;gap:14px;padding:14px;border-radius:18px;border:1px solid var(--line);background:var(--panel);text-align:left;color:inherit;font:inherit;overflow:hidden;transition:transform .15s,border-color .15s}
.gc:hover{transform:translateY(-2px);border-color:var(--g1)}.gc:active{transform:scale(.98)}
.gc-ic{flex:none;display:flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:16px;font-size:30px;background:linear-gradient(135deg,var(--g1),var(--g2));box-shadow:0 8px 18px color-mix(in srgb,var(--g1) 38%,transparent)}
.gc-n{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}.gc-n b{font-size:15px;font-weight:600}.gc-n small{font-size:12.5px;color:var(--mist);line-height:1.35}
.gc-go{flex:none;padding:7px 14px;border-radius:99px;background:var(--chip);font-size:12.5px;font-weight:600}.gc:hover .gc-go{background:var(--accent);color:var(--onAccent)}
.gmrow{gap:10px}.gmrow .btn{flex:1}.gmtd{gap:10px}
.gmrw{display:flex;align-items:center;gap:18px}.gmring{position:relative;flex:none;width:80px;height:80px;display:flex;align-items:center;justify-content:center}.gmring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.gmring .rt{fill:none;stroke:var(--chip);stroke-width:6}.gmring .rp{fill:none;stroke:var(--accent);stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset .6s}
.gmrw-t{min-width:0}.gmrw-t b{display:block;font-size:24px;font-weight:600;letter-spacing:-.4px}.gmrw-t small{color:var(--mist);font-size:13px}
.gstep{display:flex;gap:12px;align-items:flex-start}.gstep b{display:block;font-size:14px;font-weight:600}.gstep small{display:block;font-size:12.5px;color:var(--mist);line-height:1.45;margin-top:1px}
.gn{flex:none;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;background:var(--chip);color:var(--accentText)}
.gpromo{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;font-size:13px;font-weight:500;background:var(--longTint);color:var(--long)}.gpromo.off{background:var(--chip);color:var(--mist)}
.live2{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 0 currentColor;animation:gpl 2s infinite}@keyframes gpl{70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}@media(prefers-reduced-motion:reduce){.live2{animation:none}}
.gmcode .navr .btn{flex:1;text-align:center;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.ginv{display:flex;gap:12px;align-items:flex-start;padding-top:12px;border-top:1px solid var(--line)}.ginv:first-of-type{border-top:0;padding-top:4px}
.gav{flex:none;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;background:var(--chip);color:var(--accentText)}.gi-t{flex:1;min-width:0}.gtags{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.gchips{display:flex;flex-wrap:wrap;gap:8px}.gchips button{min-height:40px;padding:0 16px;border-radius:12px;border:1.5px solid var(--line);background:var(--panel);color:inherit;font:500 14px var(--font);transition:border-color .15s}
.gchips button:hover{border-color:var(--accent)}.gchips button.on{background:var(--accent);border-color:var(--accent);color:var(--onAccent);font-weight:600}
@media(max-width:900px){.gmb-in{padding:20px 18px}.gmb h2{font-size:22px}.gmb-c{max-width:none}.gg{grid-template-columns:1fr}.nav button[data-v=banks]{display:none}}

.ymg-offer{font-style:normal;color:var(--accentText);font-size:12px;max-width:270px;line-height:1.4;margin-top:2px}

.ymg-over em.ymg-pb{font-size:15px;color:var(--pending);animation:pbpop .5s ease-out}.ymg-over em.ymg-prog{font-size:12.5px}.ymg-over em.ymg-prog.dim{color:var(--mist);font-weight:500}@keyframes pbpop{0%{transform:scale(.7);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}

/* iPhone and touch fixes: 16px form text stops Safari zooming the page on focus (that zoom leaves the layout off-centre); hover lifts do not stick after a tap;
   side padding keeps content clear of the notch in landscape. */
input:not([type=checkbox]):not([type=radio]),select,textarea,.inp,.chatf textarea{font-size:16px}
input.inp,textarea.inp{-webkit-appearance:none;appearance:none}
body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
@media (hover:none){.btn:hover,.ymg-t:hover,.chatfab:hover,.qa:hover,.gc:hover,.tile:hover,.v:hover,.wafab:hover,.gcard:hover{transform:none!important;filter:none!important}.btn:hover{border-color:var(--accent)}.btn.ghost:hover{border-color:var(--line)}}

/* iPhone: taps never zoom the page, and fixed bottom items clear the home bar */
a,button,summary,label,input,select,textarea,.btn{touch-action:manipulation}

/* iPhone notch and Dynamic Island: the installed app draws under the status bar, so everything starts below it and nothing scrolls behind it */
body{padding-top:env(safe-area-inset-top)}
html::before{content:"";position:fixed;top:0;left:0;right:0;height:env(safe-area-inset-top);background:var(--bg);z-index:9990;pointer-events:none}
.lgh{top:env(safe-area-inset-top)}
.ymg-ov{padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom))}

/* v0.19: app feel — no browser bounce/refresh, loading placeholders, tab transition, pull-to-refresh bubble */
html,body{overscroll-behavior-y:none}
.skel{border-radius:20px;background:linear-gradient(100deg,var(--panel) 30%,color-mix(in srgb,var(--panel) 70%,var(--mist)) 50%,var(--panel) 70%);background-size:220% 100%;border:1px solid var(--line);animation:skel 1.3s linear infinite}
@keyframes skel{from{background-position:120% 0}to{background-position:-120% 0}}
.vin{animation:vin .22s ease both}
@keyframes vin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#ptr{position:fixed;left:50%;top:calc(env(safe-area-inset-top) - 30px);width:36px;height:36px;margin-left:-18px;border-radius:50%;background:var(--panel);border:1px solid var(--line);box-shadow:0 6px 18px rgba(0,0,0,.25);display:grid;place-items:center;z-index:9000;opacity:0;pointer-events:none;transition:opacity .15s}
#ptr.on{opacity:1}
#ptr i{width:16px;height:16px;border-radius:50%;border:2px solid var(--mist);border-top-color:var(--accent)}
#ptr.spin{transition:transform .2s,opacity .15s}#ptr.spin i{animation:ptrs .7s linear infinite}
@keyframes ptrs{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.skel,.vin,#ptr.spin i{animation:none}}
.chatfab{transition:transform .25s ease,opacity .2s,bottom .2s}.chatfab.away{transform:translateY(120px);opacity:0;pointer-events:none}

/* v0.20.5: legal pages get a Back button; gift-card WhatsApp notice keeps its own layout */
.lgl2{display:flex;align-items:center;gap:10px;min-width:0}.lgb{display:inline-flex;align-items:center;gap:2px;padding:8px 12px 8px 8px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--paper);font-size:14px;font-weight:600}.lgb:hover{border-color:var(--accent)}
.lgbk{padding:10px 0 4px}.lgbk .btn{width:100%}
.lgh{background:color-mix(in srgb,var(--bg) 96%,transparent)}

/* chat: typing dots and the "Seen" label */
.typing .cb,.cmm.typing{display:inline-flex;gap:4px;align-items:center;padding:12px 14px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--mist);opacity:.45;animation:ymdot 1.2s infinite ease-in-out}.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes ymdot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.typing i{animation:none;opacity:.7}}
.cm small.seen{color:var(--accentText)}.cmm .seenl{color:inherit;opacity:.9}
.seg{display:flex;gap:4px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:4px}.seg button{flex:1;border:0;background:transparent;color:var(--mist);min-height:38px;border-radius:9px;font-weight:500;font-size:13px}.seg button.on{background:var(--accent);color:var(--onAccent);font-weight:600}

/* v0.29.0 games sheet: fit iPhone. The overlay already pads for the notch and home bar, so the card's max height must subtract the same insets (it used to be 100dvh - 32px, which pushed the header under the status bar). */
.ymg-ov{padding:calc(max(12px,env(safe-area-inset-top)) + 8px) 12px calc(max(12px,env(safe-area-inset-bottom)) + 8px);overflow:hidden}
.ymg{max-height:calc(100vh - max(12px,env(safe-area-inset-top)) - max(12px,env(safe-area-inset-bottom)) - 32px);max-height:calc(100dvh - max(12px,env(safe-area-inset-top)) - max(12px,env(safe-area-inset-bottom)) - 32px);overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.ymg-h{position:sticky;top:-18px;z-index:2;background:var(--panel);margin:-18px -18px 8px;padding:16px 18px 10px}
@media(max-width:480px){.ymg{border-radius:20px;padding:16px 14px 14px}.ymg-h{margin:-16px -14px 8px;padding:14px 14px 10px;top:-16px}.ymg-tiles{gap:8px}}

/* v0.29.0 coin and network picker with logos */
.clg{flex:none;display:inline-grid;place-items:center;border-radius:50%;font-weight:800;font-family:var(--font);line-height:1;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 2px 8px rgba(0,0,0,.28);letter-spacing:-.02em}
.cpick{width:100%;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;border:1px solid var(--line);background:var(--panel);color:var(--paper);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .15s,background .15s}
.cpick:hover,.cpick:focus-visible{border-color:var(--accent);outline:0}.cpick:active{background:color-mix(in srgb,var(--accent) 8%,var(--panel))}
.cpick .sch{margin-left:auto;color:var(--mist);display:flex}.cpick .sch svg{width:18px;height:18px}
.pkt{display:flex;flex-direction:column;min-width:0;gap:1px}.pkt b{font-size:15px;font-weight:700}.pkt small{font-size:12.5px;color:var(--mist);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pkl{display:flex;flex-direction:column;gap:6px;max-height:min(58vh,460px);overflow:auto;margin-top:10px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.pkr{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:14px;border:1px solid transparent;background:transparent;color:var(--paper);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pkr[hidden]{display:none}.pkr:hover,.pkr:active{background:color-mix(in srgb,var(--accent) 8%,var(--panel))}.pkr.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--panel))}
.pkc{margin-left:auto;color:var(--accentText);display:flex;font-weight:800}.pkc svg{width:18px;height:18px}
.lk-alt2{border:0;background:transparent;color:var(--accentText);font:600 13px var(--font);padding:8px 0 0;cursor:pointer}

.chrate{align-self:center;display:flex;flex-direction:column;align-items:center;gap:6px;margin:10px 0;font-size:13px;color:var(--mist)}.chst{display:flex;gap:4px}.chst button{border:0;background:transparent;font-size:26px;line-height:1;color:var(--line);cursor:pointer;padding:2px}.chst button:hover,.chst button:focus-visible{color:#f5b301}.chst:hover button{color:#f5b301}.chst button:hover~button{color:var(--line)}

/* support chat: a normal chat screen on phones (like WhatsApp), a floating window on desktop */
.chatx .x2{display:none;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.chatsend{flex:none;width:44px;height:44px;border-radius:50%;border:0;display:flex;align-items:center;justify-content:center;background:var(--accent);color:var(--onAccent,#fff);cursor:pointer}.chatsend svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.chatsend:disabled{opacity:.5}
.chatf{align-items:flex-end}.chatf textarea{border-radius:22px;padding:11px 16px;min-height:44px}
@media(max-width:560px){
  .chat{top:var(--vvt,0px);bottom:auto;left:0;right:0;width:auto;height:var(--vvh,100dvh);max-height:none;border-radius:0;border:0;z-index:2000}
  .chath{padding:calc(10px + env(safe-area-inset-top)) 12px 10px 6px;gap:8px;background:var(--panel)}
  .chath .chatx{order:-1;margin:0;border:0;width:38px;height:38px;border-radius:50%;color:var(--paper);display:flex;align-items:center;justify-content:center}
  .chatx .x1{display:none}.chatx .x2{display:block}
  .chatl{background:var(--bg);padding:14px 12px 8px}
  .chatf{padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:var(--panel)}
  .chatwa{display:none}
  .chatfab{bottom:calc(16px + env(safe-area-inset-bottom))}
}
@keyframes cslide{from{transform:translateX(28px);opacity:0}to{transform:none;opacity:1}}
@media(max-width:560px) and (prefers-reduced-motion:no-preference){.chat:not([hidden]){animation:cslide .22s ease both}}

/* ---- YM Games identity: profile card, avatars, ranks ---- */
.ymg-me{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:10px 12px;margin-bottom:12px;color:inherit;font:inherit;cursor:pointer}
.ymg-me:hover,.ymg-me:focus-visible{border-color:var(--accent);outline:none}
.ymg-me .ymav{flex:none}.ymg-mei,.ymg-pfh>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ymg-mei strong,.ymg-pfh strong{font-size:15.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ymg-pfh strong{font-size:18px}
.ymg-mei em,.ymg-pfh em{font-style:normal;font-size:12.5px;color:var(--accentText);font-weight:600}
.ymg-mei small,.ymg-pfh small{font-size:11.5px;color:var(--mist)}
.ymg-mei u,.ymg-pfh u{display:block;height:6px;border-radius:99px;background:var(--line);overflow:hidden;text-decoration:none}.ymg-mei s,.ymg-pfh s{display:block;height:100%;background:linear-gradient(90deg,var(--long),#f5b301);border-radius:99px;transition:width .5s}
.ymg-me>i{font-style:normal;font-size:12px;color:var(--mist);border:1px solid var(--line);border-radius:99px;padding:4px 10px}
.ymg-pf{display:flex;flex-direction:column;gap:10px}.ymg-pfh{display:flex;align-items:center;gap:14px}
.ymg-lab{font:600 12px var(--mono);color:var(--mist);text-transform:uppercase;letter-spacing:.06em;margin-top:6px}
.ymg-tagrow{display:flex;gap:8px}.ymg-tagrow .inp{flex:1;min-width:0}
#ymgTagMsg.bad{color:var(--shortText)}
.ymg-avs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.ymg-avb{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:6px 2px 4px;color:inherit;font:inherit;cursor:pointer}
.ymg-avb small{font-size:9.5px;color:var(--mist);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ymg-avb.on{border-color:var(--accent);background:var(--chip)}.ymg-avb.lock .ymav{opacity:.35;filter:grayscale(.7)}.ymg-avb:focus-visible{outline:2px solid var(--accent)}
.ymg-avb .ymav{width:100%;max-width:54px;height:auto}
.ymg-lad{display:flex;flex-direction:column;gap:6px}
.ymg-lr{display:grid;grid-template-columns:18px 1fr auto;gap:10px;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:8px 12px;font-size:14px;opacity:.7}
.ymg-lr small{font-size:11.5px;color:var(--mist)}.ymg-lr.on{opacity:1;border-color:var(--accent);background:var(--chip)}.ymg-lr.done{opacity:.9}
.ymg-dot{width:14px;height:14px;border-radius:50%;border:3px solid var(--r);box-sizing:border-box;box-shadow:0 0 0 1px rgba(0,0,0,.28)}
.ymg-who{display:flex!important;align-items:center;gap:8px;overflow:hidden}.ymg-who strong{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ymg-who .ymav{flex:none}
.ymg-rkb{font-style:normal;font-size:10.5px;font-weight:700;border:1px solid var(--line);border-radius:99px;padding:1px 7px;color:var(--mist);flex:none}
.ymg-xpl{display:block;font-style:normal;font-size:13px;font-weight:600;color:var(--accentText);min-height:1em}
.ymg-cele{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:var(--overlay);padding:20px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:ymgCele .35s ease}
.ymg-celec{width:100%;max-width:360px;background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:22px 18px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;box-shadow:var(--shadowBig)}
.ymg-celec>small{font:600 12px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--mist)}
.ymg-ring{width:132px;height:132px;border-radius:50%;border:7px solid var(--r);background:#12151c;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px rgba(0,0,0,.25),0 0 34px -4px var(--r);animation:ymgPop .6s cubic-bezier(.2,1.4,.4,1)}
.ymg-ring b{font-size:19px;font-weight:800;padding:0 10px;line-height:1.15}
.ymg-celec p{margin:0;display:flex;flex-direction:column;gap:4px}.ymg-celec p strong{font-size:18px}.ymg-celec p span{font-size:13.5px;color:var(--mist)}
.ymg-new{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}.ymg-celec .btn{width:100%}
@keyframes ymgCele{from{opacity:0}to{opacity:1}}@keyframes ymgPop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.ymg-cele,.ymg-ring{animation:none}}
/* the "Get the app" bar steps aside while a sheet is open, so it never covers a button */
body:has(#modal.open) #ymi-bar { display: none !important; }

/* QR code of a deposit address: always dark on white so any wallet can scan it, in light or dark mode */
.qrb{position:relative;width:156px;height:156px;margin:4px auto 12px;padding:10px;background:#fff;border-radius:16px;box-shadow:0 0 0 1px var(--line)}.qrb svg{display:block;width:100%;height:100%}
.qrl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;padding:4px;background:#fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.06)}

/* rolling, blinking eyes for "we are watching for it" */
.eyes{display:inline-block;overflow:visible}.eyes .pp{animation:eyeroll 2.8s ease-in-out infinite}.eyes .eb{transform-box:fill-box;transform-origin:center;animation:eyeblink 4.6s infinite}
@keyframes eyeroll{0%{transform:translate(-5px,-4px)}20%{transform:translate(5px,-4px)}40%{transform:translate(6px,3px)}60%{transform:translate(-2px,5px)}80%{transform:translate(-6px,2px)}100%{transform:translate(-5px,-4px)}}
@keyframes eyeblink{0%,90%,100%{transform:scaleY(1)}94%{transform:scaleY(.08)}}
@media (prefers-reduced-motion:reduce){.eyes .pp,.eyes .eb{animation:none}}

/* Auto cash out banner at the top of Settings (shown until it is switched on) */
.aoc{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:15px 16px;border-radius:20px;border:0;color:#fff;cursor:pointer;position:relative;overflow:hidden;background:radial-gradient(120% 160% at 0% 0%,#10b981 0%,#0f766e 58%,#063b36 100%);box-shadow:0 14px 30px -20px rgba(16,185,129,.9)}
.aoc::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.16) 1.2px,transparent 1.3px);background-size:14px 14px;-webkit-mask-image:linear-gradient(115deg,transparent 45%,#000 100%);mask-image:linear-gradient(115deg,transparent 45%,#000 100%);pointer-events:none}
.aoc .aoi{flex:0 0 auto;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.18);display:grid;place-items:center;position:relative;z-index:1}.aoc .aoi svg{width:21px;height:21px}
.aoc .aot{flex:1;min-width:0;position:relative;z-index:1}.aoc .aot b{display:block;font-size:15px;font-weight:600}.aoc .aot small{display:block;font-size:12.5px;opacity:.9;line-height:1.35;margin-top:2px}
.aoc .aog{flex:0 0 auto;position:relative;z-index:1;background:#fff;color:#065f46;font-weight:700;font-size:13px;padding:8px 14px;border-radius:999px}
.aoc:active{transform:scale(.99)}

.gstreak{font-size:13px;font-weight:600;padding:10px 14px;border-radius:14px;background:rgba(251,146,60,.14);margin-bottom:10px}

.wd{position:fixed;inset:0;z-index:5000;background:var(--bg);color:var(--paper);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);animation:wdin .22s ease both}
@keyframes wdin{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.wdh{display:grid;grid-template-columns:48px 1fr 70px;align-items:center;padding:10px 12px;text-align:center}.wdh b{font-size:16px;font-weight:600}.wdb{width:40px;height:40px;border:0;background:transparent;color:var(--paper);display:flex;align-items:center;justify-content:center;border-radius:50%}.wdc{border:0;background:transparent;color:var(--accentText);font:600 14px var(--font);text-align:right;padding:8px 4px;cursor:pointer}
.wdm{flex:1;overflow:auto;padding:18px 20px;display:flex;flex-direction:column;gap:14px;width:100%;max-width:460px;margin:0 auto}
.wda{font-size:44px;font-weight:700;letter-spacing:-.03em;text-align:center;margin-top:10px}.wdq{text-align:center;color:var(--mist);font-size:14px;margin-top:-8px}
.wdcard{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:6px 16px;margin-top:6px}.wdto{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}.wdto b{display:block;font-size:15px}.wdto span:not(.bki){display:block;color:var(--mist);font-size:13px;margin-top:2px}
.wdr{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-top:1px solid var(--line);font-size:14.5px}.wdto+.wdr{border-top:0}.wdr span{color:var(--mist)}.wdr b{font-weight:600}
.wdn{text-align:center;color:var(--mist);font-size:13px;line-height:1.5}
.wdf{padding:12px 20px calc(16px + env(safe-area-inset-bottom));width:100%;max-width:460px;margin:0 auto}.wdf .btn{min-height:54px;font-size:16px}
.wdc2{align-items:center;text-align:center;gap:10px}.wdc2 .logo{height:34px;margin-top:6px}.wdc2 h2{margin:6px 0 0;font-size:22px;font-weight:700}.wdc2 .mut{font-size:14px;margin-top:-4px}
.wdd{display:flex;gap:14px;margin:12px 0 2px}.wdd i{width:15px;height:15px;border-radius:50%;border:2px solid var(--mist);transition:background .12s,border-color .12s}.wdd i.on{background:var(--accent);border-color:var(--accent)}.wdd.shake{animation:lkshake .35s}
@keyframes lkshake{0%,100%{transform:none}20%{transform:translateX(-9px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
.wde{min-height:22px;font-size:13.5px;font-weight:500}.wde:not(:empty){padding:6px 12px;border-radius:10px;background:var(--failBg);border:1px solid var(--failBorder)}
.wdp{display:grid;grid-template-columns:repeat(3,76px);gap:14px 20px;justify-content:center;margin-top:auto;padding-bottom:10px}.wdp button{width:76px;height:76px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--paper);font:600 26px var(--font);display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.wdp button:active{background:var(--accent);border-color:var(--accent);color:#fff}.wdp button.f{border-color:transparent;background:transparent;color:var(--accentText)}.wdp button svg{width:28px;height:28px}
.wdorb{width:132px;height:132px;border:0;border-radius:50%;margin:24px 0;background:radial-gradient(circle at 32% 26%,color-mix(in srgb,var(--accent) 88%,#fff),var(--accent) 58%,color-mix(in srgb,var(--accent) 66%,#000));color:var(--onAccent,#fff);display:grid;place-items:center;cursor:pointer;box-shadow:0 18px 40px color-mix(in srgb,var(--accent) 40%,transparent)}.wdorb svg{width:60px;height:60px}
.wdok{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:20px}.wdok h2{margin:8px 0 0;font-size:24px}.wdtick{width:84px;height:84px;border-radius:50%;background:var(--accent);color:var(--onAccent,#fff);display:grid;place-items:center;animation:wdpop .4s cubic-bezier(.2,1.4,.4,1) both}@keyframes wdpop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
@media(max-height:700px){.wdp{grid-template-columns:repeat(3,62px);gap:8px 16px}.wdp button{width:62px;height:62px;font-size:22px}.wda{font-size:38px}}
@media(prefers-reduced-motion:reduce){.wd,.wdtick,.wdd.shake{animation:none}}
/* history search + filter chips, empty state, offline bar */
.hsr{display:flex;flex-direction:column;gap:10px}.hch{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}.hch::-webkit-scrollbar{display:none}
.hc{flex:0 0 auto;border:1px solid var(--line);background:var(--panel);color:var(--mist);font:inherit;font-size:13.5px;font-weight:600;padding:8px 14px;border-radius:99px;cursor:pointer}
.hc.on{background:var(--accent);border-color:var(--accent);color:var(--onAccent)}
.empty{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:34px 12px}.emi{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);margin-bottom:4px}.emi svg{width:24px;height:24px}
#offbar{position:fixed;left:0;right:0;top:0;z-index:4000;padding:calc(8px + env(safe-area-inset-top)) 14px 8px;text-align:center;font-size:13.5px;font-weight:600;background:#b45309;color:#fff;transform:translateY(-110%);transition:transform .25s}#offbar.on{transform:none}
button.chipn{border:0;font:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:8px;text-align:left}.chipn .chev{font-size:18px;line-height:1;margin-left:2px;opacity:.7}
.invc[data-copy]{cursor:pointer}.invc[data-copy] small{font-size:12px;color:var(--mist)}
.wdalt{margin-top:18px;border:0;background:transparent;color:var(--accentText);font:600 14px var(--font);padding:10px;cursor:pointer}
/* withdraw amount (fintech style): balance on top, big amount field with comma grouping, Withdraw all */
.wdf2{gap:20px}.wdbal{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border-radius:18px;background:color-mix(in srgb,var(--accent) 9%,var(--panel));border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line))}.wdbal span{font-size:13px;color:var(--mist)}.wdbal b{font-size:30px;letter-spacing:-.02em}
.wdall{border:0;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accentText);font:700 13px var(--font);padding:7px 14px;border-radius:99px;cursor:pointer}.wdall:active{transform:scale(.97)}
.amtbox{display:flex;align-items:center;gap:6px;margin-top:10px;padding:6px 16px;border-radius:18px;border:1.5px solid var(--line);background:var(--bg)}.amtbox:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.amtc{font-size:30px;font-weight:700;color:var(--mist)}.amtbox input{font-size:34px!important;flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--paper);font:700 34px var(--font);letter-spacing:-.02em;padding:10px 0;font-variant-numeric:tabular-nums}.amtbox input::placeholder{color:var(--mist);opacity:.5}

.bkm{position:relative;overflow:hidden;font-weight:800;letter-spacing:-.02em}.bki.bkm{font-size:15px}.bkimg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff;padding:10%;box-sizing:border-box}.bki.bkm .bkimg{border-radius:inherit}
.bkimg.full{padding:0;background:transparent;object-fit:cover}

/* v0.45 staff safeguards */
.sbx{border:1px solid var(--line);border-radius:12px;padding:10px 12px;}
.sbx.warn{border-color:var(--pending);background:color-mix(in srgb,var(--pending) 8%,transparent)}
.sbx.bad{border-color:var(--short);background:color-mix(in srgb,var(--short) 8%,transparent)}
.sbx.good{border-color:var(--long);background:color-mix(in srgb,var(--long) 8%,transparent)}
.sbx.ck{display:flex;gap:10px;align-items:center;cursor:pointer;font-size:14px}.sbx.ck input{width:20px;height:20px;flex:none;accent-color:var(--accent)}