/* ============================================================================
   0Bit SWAP WIDGET — v2
   Orange rebrand + in-panel morphing token picker (Stargate-inspired, original).
   Whole theme rebrands from --accent in :root.
   ========================================================================== */
:root{
  /* —— brand accent: 0Bit orange (chroma eased down near white) —— */
  --accent:      oklch(0.71 0.185 50);     /* vivid CTA orange */
  --accent-text: oklch(0.81 0.145 58);     /* orange on dark text/links */
  --accent-weak: oklch(0.31 0.066 48);     /* active-tab fill / soft glow */
  --accent-line: oklch(0.71 0.185 50 / 0.30);
  --accent-glow: oklch(0.71 0.185 50 / 0.55);

  /* —— flat surfaces (hex mirrors for panel chrome) —— */
  --chrome:       #111111;
  --panel-top:    #111111;
  --panel-bottom: #1f1f1f;
  --panel-hover:  #1f1f1f;
  --panel-hover-to: #2a2a2a;
  --tab-pill-bg:  color-mix(in srgb, var(--panel-bottom) 95%, black);
  --tab-pill-bg-h:color-mix(in srgb, var(--panel-bottom) 88%, black);

  /* —— page chrome (--bg mirrors --chrome; panels use --bg-elev / --panel-*) —— */
  --bg:        #111111;
  --bg-elev:   oklch(0.205 0.013 52);      /* From / To panels */
  --bg-inset:  oklch(0.258 0.012 52);      /* pills, selector, list rows */
  --bg-hover:  oklch(0.295 0.014 52);
  --line:      oklch(0.34 0.012 52 / 0.65);

  /* —— text (warm-tinted neutrals) —— */
  --text:      oklch(0.975 0.007 60);
  --muted:     oklch(0.71 0.013 56);
  --faint:     oklch(0.55 0.012 56);

  /* —— high-contrast default CTA (warm off-white) —— */
  --cta-bg:    oklch(0.965 0.015 70);
  --cta-bg-h:  oklch(0.99 0.013 70);
  --cta-text:  oklch(0.19 0.02 52);

  --r-card: 22px; --r-pill: 999px; --r-btn: 14px;
  --ease:  cubic-bezier(0.22, 1, 0.36, 1);    /* ease-out-quint */
  --ease2: cubic-bezier(0.16, 1, 0.3, 1);     /* ease-out-expo-ish */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
}

html{
  color-scheme: light dark;
}

@media (prefers-color-scheme: light){
  :root{
    color-scheme: light;
    --accent-text: oklch(0.52 0.17 48);
    --accent-weak: oklch(0.93 0.04 50);
    --accent-line: oklch(0.71 0.185 50 / 0.35);
    --accent-glow: oklch(0.71 0.185 50 / 0.35);

    --chrome:       #ffffff;
    --panel-top:    #ffffff;
    --panel-bottom: #f5f5f5;
    --panel-hover:  #f0f0f0;
    --panel-hover-to: #e8e8e8;

    --bg:        #ffffff;
    --bg-elev:   oklch(0.97 0.005 60);
    --bg-inset:  oklch(0.945 0.006 60);
    --bg-hover:  oklch(0.915 0.008 60);
    --line:      oklch(0.82 0.008 60 / 0.75);

    --text:      oklch(0.22 0.02 52);
    --muted:     oklch(0.48 0.012 52);
    --faint:     oklch(0.58 0.012 52);

    --cta-bg:    oklch(0.24 0.025 52);
    --cta-bg-h:  oklch(0.19 0.025 52);
    --cta-text:  oklch(0.98 0.01 70);
  }
}

@media (prefers-color-scheme: dark){
  :root{
    color-scheme: dark;
    --accent-text: oklch(0.81 0.145 58);
    --accent-weak: oklch(0.31 0.066 48);
    --accent-line: oklch(0.71 0.185 50 / 0.30);
    --accent-glow: oklch(0.71 0.185 50 / 0.55);

    --chrome:       #111111;
    --panel-top:    #111111;
    --panel-bottom: #1f1f1f;
    --panel-hover:  #1f1f1f;
    --panel-hover-to: #2a2a2a;

    --bg:        #111111;
    --bg-elev:   oklch(0.205 0.013 52);
    --bg-inset:  oklch(0.258 0.012 52);
    --bg-hover:  oklch(0.295 0.014 52);
    --line:      oklch(0.34 0.012 52 / 0.65);

    --text:      oklch(0.975 0.007 60);
    --muted:     oklch(0.71 0.013 56);
    --faint:     oklch(0.55 0.012 56);

    --cta-bg:    oklch(0.965 0.015 70);
    --cta-bg-h:  oklch(0.99 0.013 70);
    --cta-text:  oklch(0.19 0.02 52);
  }
  /* dark: inset ring on sliding tab pill */
  .tab-ind{ box-shadow:0 0 0 1px var(--line) inset; }
}

*{ box-sizing:border-box; }
html,body{ min-height:100%; }
html{ background:var(--chrome); }
body{
  margin:0;
  font-family:"Geist", system-ui, sans-serif;
  background: var(--chrome);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  min-height:100dvh; padding:14px; overflow-x:hidden; scrollbar-width:none;
}
/* iframe embed: grow with content; top-align so parent height math is stable */
html[data-embed="1"] body{ align-items:flex-start; min-height:0; }
body::-webkit-scrollbar{ display:none; }

/* In an iframe the host frame sizes to us — never add our OWN inner scrollbar
   (that's the "scroll wheel in the middle"); let the panels/picker grow freely. */
html[data-embed="1"] .widget-body{ max-height:none; overflow:visible; }
/* ?layout=center → sit natively in a tall host frame: centered, no caps, no box.
   Used by the marketing site so the widget feels part of the page, not a small
   scrollable embed. */
/* `safe center` → centered when it fits, but falls back to TOP-align the moment the
   widget is taller than the frame, so the tabs/top panel are never clipped (an open
   dropdown can push it past the viewport). overflow-y:auto lets the rest scroll. */
html[data-layout="center"] body{ align-items:center; justify-content:safe center; min-height:100dvh; padding:18px; overflow-y:auto; }
html[data-layout="center"] .widget-body{ max-height:none; overflow:visible; }

/* ——————————————————————————————————————————————— shell */
.widget{ position:relative; z-index:1; width:100%; max-width:418px;
  display:flex; flex-direction:column; gap:10px; }
/* tab bar → bottom panel (+ flip): capped content block; CTA + footer sit below */
.widget-body{ display:flex; flex-direction:column; gap:10px; flex:0 0 auto; min-height:0;
  max-height:506px; overflow-x:hidden; overflow-y:auto; scrollbar-width:thin;
  scrollbar-color:var(--bg-inset) transparent; }
.widget-body::-webkit-scrollbar{ width:6px; }
.widget-body::-webkit-scrollbar-thumb{ background:var(--bg-inset); border-radius:99px; }


/* segmented tabs with a sliding indicator (Buy / Sell / Swap) */
/* no container box around the tabs — they sit bare on the page (Uniswap-style) */
.tabs{ position:relative; display:grid; grid-template-columns:1fr 1fr 1fr; gap:0; }
/* the gray pill only wraps the ACTIVE tab and slides between them on click */
.tab-ind{ position:absolute; top:0; bottom:0; left:0; width:calc(100%/3); z-index:0;
  border-radius:var(--r-pill); background:var(--tab-pill-bg); will-change:transform, opacity;
  border:none; box-shadow:none; }
.tabs[data-active="sell"] .tab-ind{ transform:translateX(100%); }
.tabs[data-active="swap"] .tab-ind{ transform:translateX(200%); }
.tab{ position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center;
  gap:7px; border:0; cursor:pointer; font:inherit; font-size:15px; font-weight:600; color:var(--muted);
  background:transparent; padding:11px 8px; border-radius:var(--r-pill);
  transition:color .3s var(--ease); outline:none; }
.tab svg{ width:17px; height:17px; }
.tab[aria-selected="true"]{ color:var(--text); }
.tab:focus,
.tab:focus-visible{ outline:none; box-shadow:none; }

@media (prefers-color-scheme: light){
  .tabs,
  .tab-ind{
    border:none !important;
    box-shadow:none !important;
    outline:none !important;
  }
  .tab-ind{ background:var(--tab-pill-bg); }
  .tab,
  .tab:focus,
  .tab:focus-visible,
  .tab[aria-selected="true"]{
    border:none !important;
    outline:none !important;
    box-shadow:none !important;
  }
}

/* ——————————————————————————————————————————————— panels (Uniswap-style two-tone, no borders) */
.panel{ position:relative; background:var(--bg-elev); border:0;
  border-radius:var(--r-card); overflow:hidden;
  transition:background .3s var(--ease), box-shadow .3s var(--ease); }
.panel[data-side="from"]{ background:var(--panel-top); border:1px solid var(--line); }
.panel[data-side="to"]{ background:var(--panel-bottom); }
/* active picker: no glow/highlight on the box — it just grows to show the list. */
.panel.picking{ box-shadow:none; }

/* The panel HEIGHT is animated in JS (measured open<->close). The two views
   just swap; the picker fades + lifts in as the panel grows top->bottom. */
.view-in{ overflow:hidden; }
.view-picker{ display:none; opacity:0; transform:translateY(-6px);
  transition:opacity .32s var(--ease), transform .42s var(--ease2); }
.panel.picking .view-default{ display:none; }
.panel.picking .view-picker{ display:block; opacity:1; transform:none; }

.pad{ padding:var(--s4); display:flex; flex-direction:column; gap:var(--s3); }

.panel-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  width:100%; min-height:22px; padding:2px 0; }
.side-label{ font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--faint); line-height:1.2; }
.wallet-link{ color:var(--accent-text); font-size:13px; font-weight:600; cursor:pointer;
  background:none; border:0; padding:0; font-family:inherit;
  display:inline-flex; align-items:center; gap:6px; line-height:1.2; }
.head-wallet{ flex:1 1 0; min-width:0; }
.head-wallet .wl-addr{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.widget[data-mode="sell"] .head-wallet{ flex:0 1 auto; }
.wallet-link::after{ content:""; width:5px; height:5px; border-radius:50%; background:var(--accent); opacity:.9; flex:0 0 auto; }
.wallet-link:hover{ color:var(--text); }

.custom-addr{ display:flex; align-items:center; gap:8px; flex:0 0 auto; margin:0;
  color:var(--muted); font-size:13px; font-weight:500; line-height:1; cursor:pointer; user-select:none; }
.custom-addr .switch{ flex:0 0 auto; }
.switch{ position:relative; --sw-w:34px; --sw-h:19px; --sw-pad:2px; --sw-knob:13px;
  --sw-travel:calc(var(--sw-w) - var(--sw-knob) - var(--sw-pad) * 2 - 2px);
  width:var(--sw-w); height:var(--sw-h); flex:0 0 auto; }
.switch input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; z-index:1; }
.switch .track{ position:absolute; inset:0; display:flex; align-items:center; padding:var(--sw-pad);
  border-radius:999px; background:var(--bg-inset); border:1px solid var(--line);
  transition:background .22s var(--ease), border-color .22s var(--ease); }
.switch .knob{ width:var(--sw-knob); height:var(--sw-knob); flex:0 0 auto; border-radius:50%;
  background:var(--text); transform:translateX(0);
  transition:transform .26s var(--ease2), background .22s var(--ease); }
.switch input:checked + .track{ background:var(--accent-weak); border-color:var(--accent-line); }
.switch input:checked + .track .knob{
  transform:translateX(var(--sw-travel));
  background:var(--accent-text); }

/* custom destination address (revealed by the Custom Address toggle).
   When ON: the destination wallet is hidden (you're not sending to it) and a
   "Send to address" tag + the input take its place. */
.addr-tag{ display:none; font-size:12px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--faint); line-height:1.2; flex:1 1 auto; min-width:0; }
.panel.custom-on .head-wallet{ display:none; }
.panel.custom-on .addr-tag{ display:flex; align-items:center; }
.custom-addr-row{ display:none; overflow:hidden; }
.panel.custom-on .custom-addr-row{ display:block; animation:customRowIn .42s var(--ease2); }
@keyframes customRowIn{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:none; }
}
.widget.picking .panel:not(.picking) .custom-addr-row{ display:none; }
/* Sell sends to the connected wallet only — no custom destination */
.widget[data-mode="sell"] .custom-addr,
.widget[data-mode="sell"] .custom-addr-row{ display:none !important; }
.custom-addr-row .addr-input,
[data-custom-row] input{ width:100%; height:44px; padding:0 14px; border-radius:12px; background:var(--bg-inset);
  border:none; color:var(--text); font:inherit; font-size:16px; outline:none;
  font-variant-numeric:tabular-nums; transition:background .18s var(--ease); }
.custom-addr-row .addr-input::placeholder,
[data-custom-row] input::placeholder{ color:var(--faint); }
.custom-addr-row .addr-input:focus,
[data-custom-row] input:focus{ background:var(--bg-hover); }

/* token identity + selector */
/* the HEADER + coin row together are the dropdown trigger — they highlight as one
   block (You pay + coin / wallet + custom + coin), full width. Numbers stay out. */
.sel-head{ display:flex; flex-direction:column; gap:var(--s3);
  width:calc(100% + 32px); margin:-16px -16px 0; padding:16px 16px 8px;
  border-radius:0; cursor:pointer; transition:background .18s var(--ease); }
.sel-head:hover{ background:var(--panel-hover); }
.panel[data-side="to"] .sel-head:hover{ background:var(--panel-hover-to); }
.token-row{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); }
.token-id{ display:flex; align-items:center; gap:12px; min-width:0; }
.logo{ width:40px; height:40px; border-radius:50%; flex:0 0 auto; position:relative;
  display:grid; place-items:center; box-shadow:0 4px 16px -6px rgba(0,0,0,.65); }
.logo svg{ width:40px; height:40px; }
/* real token logos + country flags load as <img>; crop to the round logo slot. */
/* DIRECT child only, so these never resize the nested chain-badge <img>. */
.logo > img{ width:40px; height:40px; border-radius:50%; object-fit:cover; display:block; }
.logo > .flag-img{ background:#1c1a18; }
.row .logo > img{ width:34px; height:34px; }
.pair .logo > img{ width:30px; height:30px; }
.chain-dot{ position:absolute; right:-3px; bottom:-3px; width:17px; height:17px; border-radius:50%;
  border:2.5px solid var(--bg-elev); display:grid; place-items:center; }
.chain-dot svg{ width:17px; height:17px; }
.token-meta{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.token-sym{ font-size:18px; font-weight:700; letter-spacing:-0.01em; line-height:1.1; }
.token-chain{ font-size:13px; color:var(--muted); font-weight:500; }
.token-sym,
.token-chain{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.panel.unselected .token-sym{ color:var(--muted); }
.panel.unselected .logo{ box-shadow:none; }

/* chevron at the far right of the coin row */
.tr-chev{ width:20px; height:20px; color:var(--muted); flex:0 0 auto; transition:color .18s var(--ease); }
.token-row:hover .tr-chev{ color:var(--text); }

/* amount line */
.amount-row{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); min-height:40px; width:100%; }
/* Half/Max only show on Swap — hidden on Buy and Sell */
.widget:not([data-mode="swap"]) .amount-actions{ display:none; }
/* Buy: hide wallet balance + bar on the top (from) panel only */
.widget[data-mode="buy"] .panel[data-side="from"] .panel-foot .bal{ display:none; }
/* Sell: hide wallet balance + bar on the bottom (to) panel only */
.widget[data-mode="sell"] .panel[data-side="to"] .panel-foot .bal{ display:none; }
.amount{ flex:1 1 0; display:block; width:100%; min-width:0; max-width:100%; margin:0; padding:0;
  border:0; border-radius:0; background:none; outline:none; color:var(--text); text-align:left;
  font-family:inherit; font-weight:600; font-size:31px; letter-spacing:-0.02em; line-height:1.05;
  font-variant-numeric:tabular-nums; -webkit-appearance:none; appearance:none;
  transform-origin:left center; will-change:transform; }
.amount::placeholder{ color:var(--faint); }
.amount.read{ color:var(--faint); }
.amount.read.has-value{ color:var(--text); }
.amount-actions{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.mini{ border:1px solid var(--line); background:var(--bg-inset); color:var(--muted);
  border-radius:var(--r-pill); cursor:pointer; font:inherit; font-weight:600; font-size:12.5px;
  height:30px; transition:all .16s var(--ease); }
.mini:hover{ color:var(--text); border-color:oklch(0.46 0.012 52); background:var(--bg-hover); }
.mini.max{ padding:0 13px; color:var(--accent-text); }
.mini.half{ padding:0 11px; }

.panel-foot{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); min-height:16px; }
.usd{ font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; }
.bal{ font-size:12.5px; color:var(--faint); display:inline-flex; align-items:center; gap:7px; }
.bal-bar{ height:4px; width:64px; border-radius:999px; background:var(--bg-inset); overflow:hidden; }
.bal-bar > i{ display:block; height:100%; width:0%; border-radius:999px; background:var(--accent);
  transition:width .4s var(--ease2); }

/* ——— in-panel PICKER view ——— */
.picker{ display:flex; flex-direction:column; gap:var(--s3); padding:var(--s4); }
.picker-head{ display:flex; align-items:center; gap:10px; }
.search{ flex:1 1 auto; display:flex; align-items:center; gap:9px; height:42px; padding:0 14px;
  background:var(--bg-inset); border:1px solid var(--line); border-radius:var(--r-pill);
  transition:border-color .2s var(--ease), background .2s var(--ease); }
.search:focus-within{ border-color:var(--accent-line); background:var(--bg-hover); }
.search svg{ width:17px; height:17px; color:var(--faint); flex:0 0 auto; }
.search input{ flex:1 1 auto; min-width:0; border:0; background:none; outline:none; color:var(--text);
  font:inherit; font-size:16px; font-weight:500; }
.search input::placeholder{ color:var(--faint); }
.picker-close{ width:42px; height:42px; flex:0 0 auto; border-radius:50%; background:var(--bg-inset);
  border:1px solid var(--line); color:var(--muted); cursor:pointer; display:grid; place-items:center;
  transition:color .18s var(--ease), background .18s var(--ease); }
.picker-close:hover{ color:var(--text); background:var(--bg-hover); }
.picker-close svg{ width:18px; height:18px; }

/* chain filter pills */
.chains{ display:flex; gap:7px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
.chains::-webkit-scrollbar{ display:none; }
.chip{ flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 13px 0 8px;
  border-radius:var(--r-pill); background:var(--bg-inset); border:1px solid var(--line);
  color:var(--muted); cursor:pointer; font:inherit; font-size:13px; font-weight:600;
  transition:all .18s var(--ease); }
.chip[data-chip="all"]{ padding:0 14px; }
.chip:hover{ color:var(--text); background:var(--bg-hover); }
.chip svg{ width:16px; height:16px; }
/* real network logo inside the chip + the small chain badge on a token logo */
.chip .chain-ic{ width:20px; height:20px; border-radius:50%; flex:0 0 auto; object-fit:cover;
  background:#0d0c0b; box-shadow:0 0 0 1px rgba(255,255,255,.06); }
.chain-dot .chain-ic{ width:17px; height:17px; border-radius:50%; object-fit:cover; display:block; }
.chip[aria-pressed="true"]{ color:var(--accent-text); background:var(--accent-weak);
  border-color:var(--accent-line); box-shadow:0 0 0 1px var(--accent-line); }

/* token list */
/* picker open (Stargate-style): the OTHER panel + flip STAY visible, collapsed to
   just its coin bar (so you can still see/switch the other coin); only the big CTA
   + footer hide to free space for a tall token list. */
.widget.picking .cta,
.widget.picking .foot{ display:none; }
.widget.picking .panel:not(.picking) .panel-head,
.widget.picking .panel:not(.picking) .amount-row,
.widget.picking .panel:not(.picking) .panel-foot{ display:none; }
/* collapsed coin bar (the other panel is picking): its highlight fills the WHOLE
   bar — extend it to the box bottom too (top is already covered) */
.widget.picking .panel:not(.picking) .sel-head{ margin-bottom:-16px; padding-bottom:16px; }
/* Viewport-aware with a FLOOR + CAP via clamp(): shrinks to fit a short frame so
   the open dropdown never makes the widget overflow (which would clip the top/tabs
   when centered), grows up to 312px when there's room, and never collapses to ~0
   in a tiny iframe (the old `calc(100dvh - N)` went negative → empty list). */
.list{ display:flex; flex-direction:column; gap:2px;
  max-height:clamp(188px, calc(60dvh - 168px), 312px);
  overflow-y:auto; margin:0 -6px; padding:0 6px; scrollbar-width:thin; scrollbar-color:var(--bg-inset) transparent; }
/* section headers (Popular / All) */
.list-sec{ font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--faint);
  padding:11px 6px 5px; position:sticky; top:0; background:var(--bg-elev); z-index:1; }
.list-sec:first-child{ padding-top:2px; }
.list::-webkit-scrollbar{ width:8px; }
.list::-webkit-scrollbar-thumb{ background:var(--bg-inset); border-radius:99px; border:2px solid transparent;
  background-clip:padding-box; }
.row{ display:flex; align-items:center; gap:12px; width:100%; background:none; border:0; cursor:pointer;
  text-align:left; color:var(--text); padding:9px 11px; border-radius:13px; font:inherit;
  transition:background .14s var(--ease); }
.row:hover{ background:var(--bg-inset); }
.row .logo{ width:34px; height:34px; box-shadow:none; }
.row .logo svg{ width:34px; height:34px; }
.row .chain-dot{ width:15px; height:15px; border-color:var(--bg-elev); }
.row .chain-dot svg{ width:15px; height:15px; }
.r-meta{ display:flex; flex-direction:column; gap:0; flex:1 1 auto; min-width:0; }
.r-sym{ font-weight:600; font-size:14.5px; }
.r-chain{ font-size:12.5px; color:var(--muted); }
.r-right{ text-align:right; }
.r-bal{ font-size:13.5px; font-weight:600; font-variant-numeric:tabular-nums; }
.r-usd{ font-size:12px; color:var(--faint); font-variant-numeric:tabular-nums; }
.row.sel{ background:var(--accent-weak); }
.r-bal.fiat-symbol{ opacity:.55; }
.empty{ padding:26px 10px; text-align:center; color:var(--faint); font-size:13.5px; }
/* staggered reveal of the picker contents when it opens */
.panel.picking .row{ animation:rowin .4s var(--ease2) backwards; }
.panel.picking .delay-0{ animation-delay:0ms; }
.panel.picking .delay-1{ animation-delay:20ms; }
.panel.picking .delay-2{ animation-delay:40ms; }
.panel.picking .delay-3{ animation-delay:60ms; }
.panel.picking .delay-4{ animation-delay:80ms; }
.panel.picking .delay-5{ animation-delay:100ms; }
.panel.picking .delay-6{ animation-delay:120ms; }
.panel.picking .delay-7{ animation-delay:140ms; }
.panel.picking .delay-8{ animation-delay:160ms; }
.panel.picking .delay-9{ animation-delay:180ms; }
.panel.picking .delay-10{ animation-delay:200ms; }
.panel.picking .delay-11{ animation-delay:220ms; }
.panel.picking .delay-12{ animation-delay:240ms; }
.panel.picking .picker-head{ animation:rowin .42s var(--ease2) backwards; }
.panel.picking .chains{ animation:rowin .42s var(--ease2) .05s backwards; }
@keyframes rowin{ from{ opacity:0; transform:translateY(8px); } }

/* flip button on the seam */
.flip-wrap{ position:relative; height:0; display:grid; place-items:center; z-index:3; margin:-8px 0; }
.flip{ position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:14px;
  background:var(--bg-inset); border:3px solid var(--bg); color:var(--muted); cursor:pointer;
  display:grid; place-items:center; will-change:transform;
  transition:color .18s var(--ease), background .18s var(--ease); }
.flip:hover{ color:var(--accent-text); background:var(--bg-hover); }
.flip svg{ width:18px; height:18px; }

/* CTA */
.cta{ margin-top:var(--s2); width:100%; border:0; cursor:pointer; font-family:inherit; font-size:16px;
  font-weight:700; letter-spacing:-0.01em; color:var(--cta-text); background:var(--cta-bg);
  border-radius:var(--r-pill); padding:18px; position:relative; overflow:hidden;
  transition:background .2s var(--ease), transform .12s var(--ease), opacity .18s var(--ease), box-shadow .3s var(--ease); }
.cta:hover{ background:var(--cta-bg-h); }
.cta:active{ transform:scale(0.99); }
.cta.ready{ color:oklch(0.20 0.03 52); background:var(--accent); box-shadow:0 16px 40px -16px var(--accent-glow); }
.cta.ready:hover{ background:oklch(0.74 0.185 50); }
.cta:disabled{ opacity:.5; cursor:not-allowed; box-shadow:none; }
/* sheen sweep on the ready CTA */
.cta.ready::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 35%, oklch(1 0 0 / 0.22) 50%, transparent 65%);
  transform:translateX(-120%); }
.cta.ready:hover::after{ animation:sheen .9s var(--ease) forwards; }
@keyframes sheen{ to{ transform:translateX(120%); } }

.foot{ display:flex; flex-direction:column; align-items:center; gap:16px; margin-top:var(--s3); }
.powered{ display:inline-flex; align-items:center; gap:6px; color:var(--faint); font-size:13.2px; font-weight:500; }
.bitmark{ display:inline-flex; align-items:center; gap:3px; }
.powered b{ color:var(--text); font-weight:700; letter-spacing:0.02em; }
.powered .mark{ height:17.6px; width:auto; display:block; }

/* ——— odometer: rolling digits on the receive amount ——— */
.od{ display:inline-flex; align-items:flex-end; line-height:1; }
.od-d{ display:inline-block; height:1em; overflow:hidden; }
.od-strip{ display:flex; flex-direction:column; transition:transform .62s var(--ease2); }
.od-strip > span{ display:block; height:1em; }
.od-sep{ display:inline-block; }

/* ——— quote skeleton: shimmer while a fresh quote computes ——— */
.panel[data-side="to"] .amount-row{ position:relative; min-height:40px; }
.q-skl{ position:absolute; left:0; top:50%; transform:translateY(-50%); height:30px; width:46%;
  border-radius:10px; background:var(--bg-inset); overflow:hidden; opacity:0; pointer-events:none;
  transition:opacity .16s var(--ease); }
.q-skl::after{ content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, oklch(1 0 0 /0.10), transparent); animation:shimmer 1.15s infinite; }
.panel[data-side="to"].quoting [data-out]{ opacity:0; }
.panel[data-side="to"].quoting .q-skl{ opacity:1; }

/* ——— CTA working state: progress fill + spinner + checkmark draw ——— */
.cta__fill{ position:absolute; left:0; top:0; bottom:0; width:0; z-index:0;
  background:oklch(0.78 0.17 52 / .5); }
.cta__c{ position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center; gap:9px; }
.cta .ic{ width:18px; height:18px; display:inline-grid; place-items:center; }
.cta .ic svg{ width:18px; height:18px; }
.cta .ic.sp{ animation:spin .7s linear infinite; }
.cta .ic.ck path{ stroke-dasharray:30; stroke-dashoffset:30; animation:draw .42s var(--ease) .02s forwards; }
.fly-clone{ box-shadow:0 10px 26px -8px rgba(0,0,0,.6); border-radius:50%; }

/* ——— first-paint entrance: staggered rise ——— */
@keyframes rise{ from{ opacity:0; transform:translateY(16px); } }
.widget{ opacity:0; }
.widget.enter{ opacity:1; }
.widget.enter > *{ animation:rise .6s var(--ease2) backwards; }
.widget.enter > *:nth-child(1){ animation-delay:.04s; }
.widget.enter > *:nth-child(2){ animation-delay:.28s; }
.widget.enter > *:nth-child(3){ animation-delay:.34s; }

/* ——— boot / loading skeleton (shown until fonts + first paint are ready) ——— */
.boot{ position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  padding:18px; background:var(--chrome); transition:opacity .45s var(--ease), transform .5s var(--ease2); }
.boot.gone{ opacity:0; transform:scale(.985); pointer-events:none; }
.boot-in{ width:100%; max-width:418px; display:flex; flex-direction:column; gap:var(--s3); }
.boot-status{ display:flex; align-items:center; gap:10px; color:var(--muted);
  font-size:13px; font-weight:500; padding:2px 4px 6px; }
.boot-spin{ width:16px; height:16px; flex:0 0 auto; border-radius:50%;
  border:2px solid var(--line); border-top-color:var(--accent-text); animation:spin .7s linear infinite; }
.sk{ position:relative; overflow:hidden; background:var(--panel-bottom); border:1px solid var(--line); }
.sk::after{ content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, oklch(1 0 0 /0.06), transparent); animation:shimmer 1.3s infinite; }
.sk-tabs{ height:54px; border-radius:var(--r-pill); }
.sk-panel{ height:166px; border-radius:var(--r-card); }
.sk-cta{ height:58px; border-radius:var(--r-pill); margin-top:var(--s2); }

@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes shimmer{ to{ transform:translateX(100%); } }
@keyframes draw{ to{ stroke-dashoffset:0; } }

/* ——— tab row: Buy/Sell/Swap segmented control + a SEPARATE wallet button ——— */
.tabbar{ display:flex; align-items:stretch; gap:8px; }
.tabbar .tabs{ flex:1 1 auto; }
/* its own outlined pill, sitting right beside (not part of) the segmented tabs —
   shows the connected wallet's start (looks like a wallet selector). */
.tab-settings{ position:relative; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:0 14px; border-radius:var(--r-pill); background:var(--tab-pill-bg);
  border:0; color:var(--text); cursor:pointer; font:inherit;
  font-size:13.5px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap;
  transition:background .18s var(--ease), color .18s var(--ease); }
.tab-settings[hidden]{ display:none; }
.tab-settings:hover{ background:var(--tab-pill-bg-h); }
.tab-settings svg{ width:14px; height:14px; opacity:.6; }
.tab-settings .wl-ic{ width:16px; height:16px; }
.notify-badge{ min-width:19px; height:19px; padding:0 6px; border-radius:999px; display:inline-grid;
  place-items:center; background:var(--accent); color:#1d0c00; font-size:11px; font-weight:800;
  line-height:1; font-variant-numeric:tabular-nums; box-shadow:0 0 0 2px var(--chrome); }
.notify-badge[hidden]{ display:none; }
.tab-settings .notify-badge{ margin-left:1px; }
/* connected-wallet icon (MetaMask, Coinbase, …) shown next to the address */
.wl-ic{ width:15px; height:15px; border-radius:4px; flex:0 0 auto; object-fit:cover;
  background:var(--bg-inset); }
/* connected-wallet icon (MetaMask, Coinbase, …) shown next to the address */
.wl-ic{ width:15px; height:15px; border-radius:4px; flex:0 0 auto; object-fit:cover;
  background:var(--bg-inset); }
.avatar{ width:52px; height:52px; border-radius:16px; flex:0 0 auto; background:var(--bg-inset);
  box-shadow:0 6px 18px -6px rgba(0,0,0,.55), inset 0 0 0 1px oklch(1 0 0 / .08); }
.avatar.sm{ width:22px; height:22px; border-radius:7px; box-shadow:none; }

/* ——— account / settings view (full-cover, after connect) ——— */
.acct{ position:fixed; inset:0; z-index:40; background:var(--chrome); display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:20px 18px; overflow:hidden;
  opacity:0; transform:translateX(20px);
  transition:opacity .32s var(--ease), transform .42s var(--ease2); }
.acct::-webkit-scrollbar{ display:none; }
.acct[hidden]{ display:none; }
.acct.show{ opacity:1; transform:none; }
.acct-in{ width:100%; max-width:418px; max-height:min(605px, calc(100dvh - 40px)); margin:0 auto; display:flex; flex-direction:column; gap:var(--s3);
  overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; }
.acct-in::-webkit-scrollbar{ display:none; }
.acct-body{ display:flex; flex-direction:column; gap:var(--s3); }

.acct-top{ display:flex; align-items:center; gap:12px; padding:0 var(--s1) var(--s2); }
.acct-title{ font-size:17px; font-weight:700; letter-spacing:-0.01em; }

.profile{ position:relative; display:flex; flex-direction:column; gap:var(--s5);
  padding:var(--s5) var(--s4); background:var(--chrome); border:1px solid var(--line);
  border-radius:var(--r-card); }
.profile-alert{ position:absolute; top:13px; right:13px; border:0; padding:0; background:transparent; cursor:pointer; }
.profile-alert .notify-badge{ min-width:22px; height:22px; font-size:11.5px; }
.profile-id{ display:flex; align-items:center; gap:14px; }
.profile-meta{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.addr-row{ display:flex; align-items:center; gap:9px; }
.addr{ font-size:17px; font-weight:700; letter-spacing:-0.01em; font-variant-numeric:tabular-nums; }
.copy{ width:27px; height:27px; flex:0 0 auto; border-radius:8px; background:var(--bg-inset);
  border:1px solid var(--line); color:var(--muted); cursor:pointer; display:grid; place-items:center;
  transition:color .16s var(--ease), background .16s var(--ease); }
.copy:hover{ color:var(--accent-text); background:var(--bg-hover); }
.copy svg{ width:14px; height:14px; }
.net{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--muted); font-weight:500; }
.net .dot{ width:7px; height:7px; border-radius:50%; background:oklch(0.78 0.16 150);
  box-shadow:0 0 9px oklch(0.78 0.16 150 / .8); }
.balance{ position:relative; z-index:1; display:flex; flex-direction:column; gap:3px; }
.balance .lbl{ font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
.balance .amt{ font-size:31px; font-weight:700; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }

.acct-menu{ display:flex; flex-direction:column; gap:var(--s3); }
.acct-group{ background:var(--panel-bottom); border:0; border-radius:var(--r-card); overflow:hidden; }
.acct-row{ display:flex; align-items:center; gap:13px; width:100%; background:var(--panel-bottom); border:0; cursor:pointer;
  text-align:left; color:var(--text); font:inherit; padding:13px var(--s4);
  transition:background .14s var(--ease); }
.acct-row:hover{ background:var(--panel-hover-to); }
.acct-ic{ width:36px; height:36px; flex:0 0 auto; border-radius:11px; background:var(--panel-hover);
  border:1px solid var(--line); display:grid; place-items:center; color:var(--accent-text); }
.acct-ic svg{ width:18px; height:18px; }
.acct-rmeta{ display:flex; flex-direction:column; gap:1px; flex:1 1 auto; min-width:0; }
.acct-label{ font-size:14.5px; font-weight:600; }
.acct-sub{ font-size:12.5px; color:var(--faint); }
.acct-row .chev{ width:18px; height:18px; flex:0 0 auto; color:var(--faint);
  border:none; background:none; box-shadow:none; outline:none;
  transition:transform .2s var(--ease), color .2s var(--ease); }
.acct-row:hover .chev{ color:var(--muted); transform:translateX(3px); }

.logout{ margin-top:var(--s2); width:100%; }
.acct-foot{ display:flex; justify-content:center; margin-top:var(--s3); }
body:has(.acct.show) .widget > .foot{ display:none; }
body:has(.acct.show) .acct-foot:has(.powered){ display:none; }

.acct-body.in .stagger{ animation:acctrow .46s var(--ease2) backwards; }
@keyframes acctrow{ from{ opacity:0; transform:translateY(12px); } }

/* row variants */
.acct-row.static{ cursor:default; }
.acct-row.static:hover{ background:var(--panel-bottom); }
.acct-row .switch{ flex:0 0 auto; }
.acct-val{ flex:0 0 auto; max-width:150px; font-size:13.5px; color:var(--muted); font-variant-numeric:tabular-nums;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acct-action{ flex:0 0 auto; font-size:13.5px; font-weight:600; color:var(--accent-text); }
.acct-ic.danger{ color:oklch(0.72 0.17 25); }
.rtag{ flex:0 0 auto; font-size:11.5px; font-weight:700; color:var(--faint); padding:4px 10px; border-radius:999px;
  background:var(--bg-inset); border:1px solid var(--line); }
.rtag.ok{ color:oklch(0.84 0.15 152); background:oklch(0.30 0.06 152 / .35); border-color:oklch(0.5 0.1 152 / .4); }
.row-badge{ flex:0 0 auto; box-shadow:none; }

/* secondary full-width button */
.acct-btn{ width:100%; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid var(--line); background:var(--bg-elev); color:var(--text); font:inherit; font-size:14px;
  font-weight:600; padding:15px; border-radius:var(--r-card); cursor:pointer; transition:background .16s var(--ease); }
.acct-btn:hover{ background:var(--bg-inset); }
.acct-btn svg{ width:17px; height:17px; }

/* trade activity */
.month{ font-size:12.5px; font-weight:700; letter-spacing:.02em; color:var(--muted); padding:6px var(--s1) 0; }
.act-row{ align-items:center; }
.pair{ flex:0 0 auto; display:inline-flex; align-items:center; }
.pair .logo{ width:30px; height:30px; box-shadow:0 2px 8px -3px rgba(0,0,0,.6); }
.pair .logo svg{ width:30px; height:30px; }
.pair .o2{ margin-left:-11px; box-shadow:0 0 0 2.5px var(--bg-elev); }
.act-meta{ display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12.5px; color:var(--faint); }
.pill{ font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:999px; letter-spacing:.02em; }
.pill.ok{ color:oklch(0.84 0.15 152); background:oklch(0.30 0.06 152 / .4); }
.pill.pending{ color:oklch(0.84 0.15 75); background:oklch(0.32 0.07 75 / .4); }
.pill.bad{ color:oklch(0.76 0.18 25); background:oklch(0.34 0.08 25 / .42); }
.pill.cancelled{ color:var(--muted); background:var(--bg-inset); }
.act-view{ display:inline-flex; align-items:center; gap:1px; color:var(--accent-text); font-weight:600; text-decoration:none; }
.act-view svg{ width:13px; height:13px; }
.act-inline-btn{ border:0; background:transparent; padding:0; font:inherit; cursor:pointer; }
.act-cancel{ border:0; background:transparent; padding:0; color:oklch(0.72 0.18 25); font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; }
.act-cancel:disabled{ opacity:.62; cursor:default; }
.act-amt{ flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:1px; text-align:right; }
.amt-out{ font-size:13.5px; font-weight:700; font-variant-numeric:tabular-nums; }
.amt-in{ font-size:12px; color:var(--faint); font-variant-numeric:tabular-nums; }
.act-host{ display:flex; flex-direction:column; gap:var(--s3); }
.act-load{ padding:32px 10px; text-align:center; color:var(--faint); font-size:13.5px; }
.order-row .acct-rmeta{ min-width:0; }
.activity-order-sheet{ display:flex; flex-direction:column; gap:14px; }
.order-summary{ display:flex; flex-direction:column; gap:8px; padding:12px 14px; border-radius:var(--r-card);
  background:var(--bg-inset); border:1px solid var(--line); }
.order-summary-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.order-summary-title{ font-size:13.5px; font-weight:750; }
.order-summary-copy{ color:var(--muted); font-size:12.5px; line-height:1.4; }
.order-summary-stats{ display:flex; flex-wrap:wrap; gap:6px; }
.order-stat{ display:inline-flex; align-items:center; gap:5px; border-radius:999px; padding:5px 8px;
  background:var(--panel-bottom); color:var(--muted); font-size:11.5px; font-weight:650; }
.order-progress{ display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; padding:6px 0 2px; }
.order-progress .ck-big{ width:52px; height:52px; }
.order-progress .ck-s{ max-width:330px; }
.order-progress .ck-progress{ width:100%; }
.order-lock-note{ padding:11px 12px; border-radius:12px; color:var(--muted); background:var(--bg-inset);
  font-size:12.5px; line-height:1.4; }
.cancel-warning{ display:flex; flex-direction:column; gap:12px; }
.cancel-warning-box{ padding:12px 14px; border-radius:14px; background:oklch(0.34 0.08 35 / .28);
  border:1px solid oklch(0.62 0.16 35 / .45); color:var(--muted); font-size:13px; line-height:1.45; }
.cancel-warning-box strong{ color:var(--text); }
.sheet-actions{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.sheet-actions .acct-btn{ min-height:46px; padding:12px; }
.sheet-actions .danger{ border-color:oklch(0.62 0.16 35 / .55); color:oklch(0.74 0.18 35); }
.sheet-actions .danger:hover{ background:oklch(0.40 0.11 35 / .24); }

/* empty state + misc */
.empty-acct{ display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center; padding:40px 20px;
  background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--r-card); }
.acct-ic.big{ width:54px; height:54px; border-radius:16px; }
.acct-ic.big svg{ width:24px; height:24px; }
.ea-t{ font-weight:700; font-size:15px; }
.ea-s{ color:var(--faint); font-size:13px; max-width:30ch; }

/* payment methods — borderless empty state + add button */
.payments-panel{ display:flex; flex-direction:column; gap:var(--s3); }
.payments-panel .empty-acct,
.payments-panel .acct-btn{ border:none; background:var(--panel-bottom); }
.payments-panel .acct-btn:hover{ background:var(--bg-inset); }

/* trade activity — borderless empty state */
.act-host .empty-acct{ border:none; background:var(--panel-bottom); }
.ver{ color:var(--faint); font-size:12px; }

/* ——— connect-wallet modal ——— */
/* solid page-dark cover (NOT a translucent backdrop) — inside the fixed-size
   iframe a dim/blur backdrop would only fill the iframe rect and read as a box.
   Matching #111111 makes it seamless with the page, like the account view. */
.modal{ position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:18px;
  background:var(--chrome); opacity:0; transition:opacity .26s var(--ease); }
.modal[hidden]{ display:none; }
.modal.show{ opacity:1; }
.modal-card{ position:relative; width:100%; max-width:384px; max-height:min(605px, calc(100dvh - 36px)); overflow:auto;
  scrollbar-width:none; display:flex; flex-direction:column; gap:13px;
  padding:28px 22px 20px; background:var(--bg-elev); border:1px solid var(--line); border-radius:24px;
  box-shadow:none;
  transform:translateY(12px) scale(.97); transition:transform .34s var(--ease2); }
.modal-card::-webkit-scrollbar{ display:none; }
.modal.show .modal-card{ transform:none; }
@media (prefers-color-scheme: light){
  .modal-card{ background:#ffffff; }
  .modal-card .field input{
    background:#e9e9e9; border:none;
  }
  .modal-card .field input:hover{ background:#e0e0e0; }
  .modal-card .field input:focus{
    border:none; background:#e0e0e0;
  }
  .modal-cta{
    background:color-mix(in srgb, var(--accent) 50%, transparent);
    border:none; color:var(--accent);
  }
  .modal-cta:hover{
    background:color-mix(in srgb, var(--accent) 60%, transparent);
    color:var(--accent);
  }
  .modal-card .prov{
    background:#e9e9e9; border:none;
  }
  .modal-card .prov:hover{
    background:#e0e0e0; border:none;
  }
  .modal-back,
  .modal-x{
    background:color-mix(in srgb, #e9e9e9 70%, black); border:none;
    color:color-mix(in srgb, var(--text) 85%, black);
  }
  .modal-back:hover,
  .modal-x:hover{
    background:color-mix(in srgb, #e9e9e9 60%, black); border:none;
  }
}
.modal-head{ display:grid; grid-template-columns:38px 1fr 38px; align-items:center; margin:0 0 3px; }
.modal-back,
.modal-x{ width:38px; height:38px; flex:0 0 auto; border-radius:12px; background:var(--bg-elev);
  border:none; color:color-mix(in srgb, var(--muted) 85%, black); cursor:pointer; display:grid; place-items:center;
  transition:color .16s var(--ease), background .16s var(--ease); }
.modal-back:hover,
.modal-x:hover{ background:var(--bg-hover); }
.modal-back svg,
.modal-x svg{ width:18px; height:18px; }
@media (prefers-color-scheme: dark){
  .modal-card{ background:#111111; border-color:#2f2f2f; }
  .modal-card .prov,
  .modal-back,
  .modal-x{
    background:#1f1f1f;
    border-color:#303030;
  }
  .modal-card .prov:hover,
  .modal-back:hover,
  .modal-x:hover{
    background:#252525;
    border-color:#383838;
  }
}
.modal-head .modal-title{ margin:0; grid-column:2; text-align:center; }
.modal-head .modal-x{ position:static; justify-self:end; }
.modal-x{ position:absolute; top:15px; right:15px; }
.modal-title{ margin:0 0 3px; text-align:center; font-size:21px; font-weight:700; letter-spacing:-0.02em; }
.field{ display:flex; }
.field input{ width:100%; height:50px; padding:0 16px; border-radius:14px; background:var(--bg-inset);
  border:1px solid var(--line); color:var(--text); font:inherit; font-size:16px; outline:none;
  transition:border-color .18s var(--ease), background .18s var(--ease); }
.field input::placeholder{ color:var(--faint); }
.field input:focus{ border-color:var(--accent-line); background:var(--bg-hover); }
.modal-cta{ height:50px; border:1px solid var(--accent-line); border-radius:14px; cursor:pointer; font:inherit;
  font-size:15px; font-weight:700; color:var(--accent-text); background:var(--accent-weak);
  transition:background .18s var(--ease), color .18s var(--ease); }
.modal-cta:hover{ background:oklch(0.37 0.085 47); color:var(--text); }
.or{ display:flex; align-items:center; gap:12px; color:var(--faint); font-size:12.5px; margin:2px 0; }
.or::before, .or::after{ content:""; flex:1 1 auto; height:1px; background:var(--line); }
.prov{ display:flex; align-items:center; justify-content:center; gap:11px; height:50px; border-radius:14px;
  border:1px solid var(--line); background:var(--bg-inset); color:var(--text); cursor:pointer; font:inherit;
  font-size:14.5px; font-weight:600; transition:background .16s var(--ease), border-color .16s var(--ease); }
.prov:hover{ background:var(--bg-hover); border-color:oklch(0.46 0.012 52); }
.prov svg{ width:20px; height:20px; flex:0 0 auto; }
.cm-note{ margin:0; text-align:center; font-size:12.5px; font-weight:500; color:oklch(0.8 0.14 60); line-height:1.5; }
.cm-note[hidden]{ display:none; }

/* ——— sub-sheet (verify / password / payment) ——— */
.sheet{ position:fixed; inset:0; z-index:62; display:flex; align-items:center; justify-content:center; padding:18px;
  background:var(--chrome); opacity:0; transition:opacity .26s var(--ease); }
.sheet[hidden]{ display:none; }
.sheet.show{ opacity:1; }
.sheet-card{ position:relative; width:100%; max-width:384px; max-height:min(605px, calc(100dvh - 36px)); overflow:auto;
  scrollbar-width:none; display:flex; flex-direction:column; gap:14px; padding:26px 20px 20px;
  background:var(--bg-elev); border:none; border-radius:24px;
  box-shadow:none;
  transform:translateY(12px) scale(.97); transition:transform .34s var(--ease2); }
@media (prefers-color-scheme: light){
  .sheet-card{ background:var(--panel-bottom); border:none; box-shadow:none; }
  .sheet-card:has(.sheet-form){ background:var(--panel-bottom); }
  .sheet-form input, .sheet-form select,
  .sheet-form input[type="password"]{
    background-color:var(--panel-hover) !important; border:none; box-shadow:none;
    color:var(--text);
    appearance:none; -webkit-appearance:none;
  }
  .sheet-form select{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23444' d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 14px center;
  }
  .sheet-form select option{
    background-color:#f5f5f5; color:var(--text);
  }
  .sheet-form input:hover, .sheet-form select:hover{ background-color:var(--panel-hover-to) !important; }
  .sheet-form input:focus, .sheet-form select:focus{
    border:none; box-shadow:none; background-color:var(--panel-hover) !important;
  }
  .sheet-form input:-webkit-autofill,
  .sheet-form input:-webkit-autofill:hover,
  .sheet-form input:-webkit-autofill:focus,
  .sheet-form input:-webkit-autofill:active{
    -webkit-box-shadow:0 0 0 1000px var(--panel-hover) inset !important;
    box-shadow:0 0 0 1000px var(--panel-hover) inset !important;
    -webkit-text-fill-color:var(--text) !important;
    caret-color:var(--text);
    border:none;
    transition:background-color 99999s ease-out 0s;
  }
  .sheet-card .modal-cta{
    background:color-mix(in srgb, var(--accent) 50%, transparent);
    border:none; color:var(--accent);
  }
  .sheet-card .modal-cta:hover{
    background:color-mix(in srgb, var(--accent) 60%, transparent);
    color:var(--accent);
  }
  .sheet-card .modal-x{
    background:color-mix(in srgb, var(--panel-bottom) 70%, black); border:none;
    color:color-mix(in srgb, var(--text) 85%, black);
  }
  .sheet-card .modal-x:hover{
    background:color-mix(in srgb, var(--panel-bottom) 60%, black); border:none;
  }
}
.sheet-card::-webkit-scrollbar{ display:none; }
.sheet.show .sheet-card{ transform:none; }
.sheet-title{ margin:0 2px 0; text-align:center; font-size:19px; font-weight:700; letter-spacing:-0.02em; }
.sheet-body{ display:flex; flex-direction:column; gap:12px; }
.ck-wrap{ display:flex; flex-direction:column; gap:14px; }
.ck-sum{ display:flex; flex-direction:column; gap:6px; padding:12px 14px; border-radius:14px;
  background:var(--bg-inset); font-size:13.5px; }
.ck-sum b{ font-weight:600; }
.ck-line{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ck-faint{ color:var(--faint); font-size:12.5px; }
.ck-label{ margin-bottom:6px; }
.ck-label-tight{ margin:4px 0 6px; }
.ck-quote{ color:var(--accent-text); font-size:11.5px; font-weight:600; text-align:right; }
.ck-rows{ display:flex; flex-direction:column; gap:1px; border-radius:14px; overflow:hidden; background:var(--bg-inset); }
.ck-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 14px; }
.ck-row + .ck-row{ border-top:1px solid var(--line); }
.ck-l{ color:var(--muted); font-size:12.5px; flex:0 0 auto; }
.ck-v{ display:inline-flex; align-items:center; gap:8px; color:var(--text); font-size:13px;
  font-variant-numeric:tabular-nums; word-break:break-all; text-align:right; }
.ck-copy{ flex:0 0 auto; width:26px; height:26px; border-radius:8px; border:1px solid var(--line);
  background:var(--bg-elev); color:var(--muted); cursor:pointer; display:grid; place-items:center; }
.ck-copy svg{ width:14px; height:14px; }
.ck-copy.ok{ color:var(--accent-text); border-color:var(--accent-line); }
.ck-opts{ display:flex; flex-direction:column; gap:8px; }
.ck-opt{ display:flex; align-items:center; gap:11px; padding:12px 14px; border-radius:13px;
  border:1px solid var(--line); background:var(--bg-inset); cursor:pointer; font-size:13.5px; transition:border-color .15s,background .15s; }
.ck-opt:hover{ background:var(--bg-hover); }
.ck-opt.sel{ border-color:var(--accent); background:var(--accent-weak); }
.ck-opt.locked{ cursor:default; }
.ck-opt.locked:hover{ background:var(--accent-weak); }
.ck-opt .ck-dot{ width:16px; height:16px; border-radius:50%; border:2px solid var(--line); flex:0 0 auto; }
.ck-opt.sel .ck-dot{ border-color:var(--accent); box-shadow:inset 0 0 0 3px var(--accent); }
.ck-opt .ck-on{ margin-left:auto; color:var(--faint); font-size:12px; }
.ck-field{ width:100%; height:46px; padding:0 14px; border-radius:12px; background:var(--bg-inset);
  border:1px solid var(--line); color:var(--text); font:inherit; font-size:16px; outline:none; }
.ck-field:focus{ border-color:var(--accent-line); }
select.ck-field{ appearance:none; }
.ck-mb{ margin-bottom:10px; }
.ck-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ck-terms{ display:flex; align-items:flex-start; gap:10px; font-size:12.5px; color:var(--muted); cursor:pointer; }
.ck-terms input{ margin-top:2px; accent-color:var(--accent); }
.ck-status{ display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; padding:18px 6px; }
.ck-status.compact{ padding:6px 0 2px; }
.ck-spin{ width:42px; height:42px; color:var(--accent); }
.ck-spin svg{ width:42px; height:42px; animation:ckspin 1s linear infinite; }
@keyframes ckspin{ to{ transform:rotate(360deg); } }
.ck-big{ width:54px; height:54px; border-radius:50%; display:grid; place-items:center; }
.ck-big.ok{ background:var(--accent-weak); color:var(--accent-text); }
.ck-big.ok svg{ width:30px; height:30px; }
.ck-big.bad{ background:rgba(220,80,60,.14); color:#e26a52; }
.ck-big.bad svg{ width:28px; height:28px; }
.ck-big.pending{ background:var(--bg-inset); color:var(--muted); }
.ck-big.pending svg{ width:30px; height:30px; }
.ck-t{ font-size:16px; font-weight:600; }
.ck-s{ font-size:13px; color:var(--muted); max-width:320px; line-height:1.5; }
.ck-network-note{ display:flex; flex-direction:column; gap:4px; padding:11px 12px; border:1px solid var(--accent-line);
  border-radius:12px; background:var(--accent-weak); color:var(--muted); font-size:12.5px; line-height:1.35; }
.ck-network-note strong{ color:var(--text); }
.ck-confirm{ display:flex; align-items:flex-start; gap:10px; color:var(--muted); font-size:12.5px; line-height:1.35; cursor:pointer; }
.ck-confirm input{ margin-top:2px; accent-color:var(--accent); }
.ck-progress{ display:flex; flex-direction:column; gap:8px; padding:4px 0; }
.ck-status-bar{ height:8px; border-radius:999px; background:var(--line); overflow:hidden; }
.ck-status-fill{ height:100%; width:25%; border-radius:inherit; background:var(--accent); transition:width .25s var(--ease); }
.ck-status-fill.p25{ width:25%; }
.ck-status-fill.p50{ width:50%; }
.ck-status-fill.p75{ width:75%; }
.ck-status-fill.p100{ width:100%; }
.ck-status-fill.fail{ background:#e26a52; }
.ck-stage-row{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.ck-stage{ color:var(--faint); font-size:11.5px; line-height:1.25; text-align:center; }
.ck-stage.done,.ck-stage.active{ color:var(--text); font-weight:650; }
.ck-stage.fail{ color:#e26a52; font-weight:650; }
.ck-step{ position:relative; display:grid; grid-template-columns:22px 1fr; gap:10px; padding:0 0 14px; }
.ck-step:last-child{ padding-bottom:0; }
.ck-step::before{ content:""; position:absolute; left:8px; top:18px; bottom:0; width:2px; background:var(--line); }
.ck-step:last-child::before{ display:none; }
.ck-step-dot{ width:18px; height:18px; border-radius:50%; border:2px solid var(--line); background:var(--bg-elev); z-index:1; }
.ck-step.done .ck-step-dot{ border-color:var(--accent); background:var(--accent); }
.ck-step.active .ck-step-dot{ border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-weak); }
.ck-step.fail .ck-step-dot{ border-color:#e26a52; background:#e26a52; }
.ck-step-title{ color:var(--text); font-size:13.5px; font-weight:650; line-height:1.25; }
.ck-step-sub{ margin-top:3px; color:var(--muted); font-size:12.5px; line-height:1.35; }
.ck-actions{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ck-err{ font-size:12.5px; color:#e26a52; }
.ck-err[hidden]{ display:none; }
.ck-link{ color:var(--accent-text); text-decoration:none; font-weight:600; font-size:13px; }
.ck-link-btn{ border:0; background:none; padding:0; cursor:pointer; font:inherit; }
.ck-mut{ color:var(--faint); font-size:12px; word-break:break-all; }
.ck-back{ background:none; border:0; color:var(--muted); font:inherit; font-size:13px; cursor:pointer; padding:6px 0; align-self:flex-start; }
.sheet-msg-detail{ color:var(--faint); font-size:12px; }
.sheet-form{ display:flex; flex-direction:column; gap:11px; }
.sheet-form input, .sheet-form select{ height:48px; padding:0 14px; border-radius:13px; background-color:var(--panel-bottom);
  border:none; color:var(--text); font:inherit; font-size:16px; outline:none;
  appearance:none; -webkit-appearance:none;
  transition:background .18s var(--ease); }
.sheet-form select{
  padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
.sheet-form input:hover, .sheet-form select:hover{ background-color:var(--panel-hover); }
.sheet-form input:focus, .sheet-form select:focus{ background-color:var(--panel-bottom); }
.sheet-form input:-webkit-autofill,
.sheet-form input:-webkit-autofill:hover,
.sheet-form input:-webkit-autofill:focus,
.sheet-form input:-webkit-autofill:active{
  -webkit-box-shadow:0 0 0 1000px var(--panel-bottom) inset;
  box-shadow:0 0 0 1000px var(--panel-bottom) inset;
  -webkit-text-fill-color:var(--text);
  caret-color:var(--text);
  border:none;
  transition:background-color 99999s ease-out 0s;
}
.sheet-err{ margin:0; font-size:12.5px; color:oklch(0.72 0.17 25); }
.sheet-err[hidden]{ display:none; }
.sheet-msg, .sheet-load{ padding:18px 6px 8px; text-align:center; color:var(--muted); font-size:13.5px; line-height:1.5; }
.kyc-frame{ width:100%; height:min(500px, calc(100dvh - 150px)); border:0; border-radius:14px; background:var(--panel-bottom); }
.kyc-ph{ display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center; padding:22px 8px 10px; }
.kyc-ph .badge{ width:54px; height:54px; border-radius:16px; background:var(--panel-hover); border:none;
  display:grid; place-items:center; color:var(--accent-text); }
.kyc-ph .badge svg{ width:24px; height:24px; }
.sheet-ok{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:20px 8px; text-align:center; color:var(--accent-text); }
.sheet-ok svg{ width:34px; height:34px; }
.pay-method-card{ display:flex; align-items:center; gap:12px; padding:13px; border-radius:15px;
  background:var(--panel-hover); border:1px solid var(--line); }
.pay-method-icon{ width:38px; height:38px; flex:0 0 auto; border-radius:12px; display:grid; place-items:center;
  color:var(--accent-text); background:var(--panel-bottom); }
.pay-method-icon svg{ width:19px; height:19px; }
.pay-method-copy{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.pay-method-title{ font-size:14.5px; font-weight:700; }
.pay-method-sub{ font-size:12.5px; color:var(--faint); }
.pay-method-pill{ flex:0 0 auto; font-size:11.5px; font-weight:700; color:var(--accent-text);
  background:var(--accent-weak); border-radius:999px; padding:5px 9px; }
.session-tools{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 2px; }
.session-count{ color:var(--faint); font-size:12.5px; font-weight:600; }
.session-list{ display:flex; flex-direction:column; gap:8px; }
.session-row{ display:flex; align-items:center; gap:11px; padding:12px; border-radius:14px; background:var(--panel-bottom); }
.session-icon{ width:36px; height:36px; flex:0 0 auto; border-radius:11px; background:var(--panel-hover);
  display:grid; place-items:center; color:var(--accent-text); }
.session-icon svg{ width:18px; height:18px; }
.session-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.session-name{ font-size:14px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.session-meta{ font-size:12px; color:var(--faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.session-current{ flex:0 0 auto; font-size:11.5px; font-weight:700; color:oklch(0.84 0.15 152);
  background:oklch(0.30 0.06 152 / .35); border-radius:999px; padding:5px 9px; }
.session-danger{ flex:0 0 auto; height:32px; padding:0 10px; border-radius:10px; border:1px solid oklch(0.62 0.16 35 / .55);
  background:oklch(0.35 0.09 35 / .22); color:var(--accent-text); font:inherit; font-size:12px; font-weight:700; cursor:pointer; }
.session-danger:hover{ background:oklch(0.40 0.11 35 / .28); }
.session-danger.wide{ height:34px; padding:0 12px; }
.session-empty{ display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center; padding:22px 8px 8px;
  color:var(--muted); font-size:13.5px; line-height:1.45; }
.session-empty .acct-ic{ margin-bottom:2px; }
.session-empty .acct-btn{ margin-top:4px; }

/* ——————————————————————————————————————————————— MOBILE (data-device) ———
   Keep the primary widget full-width on phones, but keep account/sheet/modal
   surfaces capped to the same compact shell used by the embedded widget. */
/* gate.0bit.app (top-level): center the widget vertically, but `safe center` so an
   open dropdown that makes it taller than the screen top-aligns instead of clipping
   the tabs; the page scrolls for the rest. Uncap the body so the picker isn't
   squished into a 506px box (the "cut/cramped dropdown"). */
html[data-standalone] body{ justify-content:safe center; overflow-y:auto; }
html[data-standalone] .widget-body{ max-height:none; overflow:visible; }
html[data-device="mobile"] body{ padding:0; align-items:stretch; }
html[data-device="mobile"] .widget{ max-width:none; padding:16px 16px 28px; }
html[data-device="mobile"] .acct{ padding:0; align-items:stretch; justify-content:flex-start; }
html[data-device="mobile"] .modal,
html[data-device="mobile"] .sheet{ padding:14px; align-items:center; justify-content:safe center; }
html[data-device="mobile"] .acct-in{ max-width:none; max-height:min(605px, 100dvh); padding:20px 16px 32px; }
html[data-device="mobile"] .modal-card,
html[data-device="mobile"] .sheet-card{ max-width:384px; width:100%; min-height:0; max-height:min(605px, calc(100dvh - 28px));
  border-radius:24px; box-shadow:none; justify-content:flex-start; padding:26px 18px 20px; }
html[data-device="mobile"] .kyc-frame{ height:min(500px, calc(100dvh - 150px)); border-radius:12px; }
html[data-device="mobile"] .tabs{ font-size:16px; }
html[data-device="mobile"] .amount{ font-size:34px; }
@media (max-width:700px), (pointer:coarse){
  input:not([type="checkbox"]):not([type="radio"]),
  textarea,
  select,
  .ck-field{ font-size:16px !important; }
  input.amount{ font-size:34px !important; }
}
.legal{ margin:4px 2px 0; text-align:center; color:var(--faint); font-size:11.5px; line-height:1.55; }
.legal a{ color:var(--accent-text); text-decoration:none; }
.legal a:hover{ text-decoration:underline; }
.modal-foot{ display:flex; justify-content:center; margin-top:4px; }

/* NOTE: motion is core to this widget's identity, so it is intentionally NOT
   gated behind prefers-reduced-motion — that was disabling every animation on
   machines with "reduce motion" enabled. Re-add an
   @media (prefers-reduced-motion: reduce){ ... } block here to honour it. */