/*
 * Liquid glass: one shared look for the wallet picker and the terms consent dialog (owner, 2026-10-20).
 *
 *   .glass-ovl   the overlay: a light dim plus a blur of the page behind
 *   .glass       the panel: a deep surface at ~84 % alpha (90 % light), blurred and saturated, a hairline border
 *                with a light highlight along the top, a soft large shadow, 28 px radius
 *   .glass-tile  a row or list item inside a panel: a lighter glass tile; a teal glow on hover and focus
 *   .glass-btn   a secondary button: glass outline (the primary teal button stays as it is)
 *
 * Contrast (test/launch-wallets.test.tsx and test/dialog-glass.test.ts read the numbers below): text on the panel and
 * on its tiles is at least 4.5:1 with the page behind at its darkest (black) and its lightest (white), seen through
 * the overlay. Inside a panel the muted text colours are swapped for the lighter (dark theme) or darker (light theme)
 * `--glass-muted` and `--glass-ink-2`, which keep that ratio.
 *
 * Fallbacks: `prefers-reduced-transparency` and browsers without `backdrop-filter` get a solid panel and overlay;
 * `prefers-reduced-motion` gets no animated blur or glow. Phones keep the bottom sheet (wallet.css, terms.css).
 *
 * Every dialog, sheet and popover of the app wears this glass through the shared frame (glass-sheet.css: `.gsovl`,
 * `.gsheet`, `.gpop`), so its look is tuned here once. Since 2026-10-29 (owner: "a bit darker to match the website
 * vibe") the panel is deeper (`--glass-bg`, `--glass-solid`), the sheen and the top highlight are fainter and the page
 * behind is dimmed more (`--glass-ovl`); the light theme is a touch deeper too, within the contrast above.
 *
 * The motion and sheen tokens below (`--lk-*`, named for the lock sheets where they began) and the keyframes at the end
 * are shared by the glass sheets (glass-sheet.css: the lock and trade sheets) and the glass cards on the page (lock.css).
 */
:root{
  --glass-bg:rgba(14,15,17,.84);
  --glass-accent:#4DD4C4;
  --glass-solid:#121315;
  --glass-tile:rgba(255,255,255,.045);
  --glass-tile-hover:rgba(255,255,255,.08);
  --glass-tile-deep:rgba(255,255,255,.10);
  --glass-line:rgba(255,255,255,.10);
  --glass-highlight:rgba(255,255,255,.12);
  --glass-edge:rgba(255,255,255,.03);
  --glass-ovl:rgba(5,6,8,.52);
  --glass-ovl-solid:rgba(5,6,8,.84);
  --glass-ovl-blur:blur(10px) saturate(140%);
  --glass-ink:#F3F4F4;
  --glass-ink-2:#D3D4D7;
  --glass-muted:#B4B5BB;
  --glass-shadow:0 30px 80px -20px rgba(0,0,0,.75),0 12px 32px -18px rgba(0,0,0,.55);
  --glass-shadow-pop:0 24px 56px -18px rgba(0,0,0,.7),0 6px 18px -10px rgba(0,0,0,.45);
  --glass-glow:rgba(77,212,196,.55);
  --glass-blur:blur(24px) saturate(160%);
}
:root{
  --lk-spring:cubic-bezier(.34,1.42,.64,1);
  --lk-ease:cubic-bezier(.32,.72,0,1);
  --lk-sheen:rgba(255,255,255,.045);
  --lk-tint:rgba(77,212,196,.10);
  --lk-box:rgba(255,255,255,.40);
  --lk-ring:rgba(10,10,11,.75);
  --lk-gloss:.30;
  --lk-inset:rgba(0,0,0,.28);
}
:root[data-theme="light"]{
  --lk-sheen:rgba(255,255,255,.42);
  --lk-tint:rgba(8,119,107,.07);
  --lk-box:rgba(13,22,24,.45);
  --lk-ring:rgba(255,255,255,.9);
  --lk-gloss:.14;
  --lk-inset:rgba(13,22,24,.08);
}
:root[data-theme="light"]{
  --glass-bg:rgba(246,248,248,.90);
  --glass-accent:#066A5F;
  --glass-solid:#F5F7F7;
  --glass-tile:rgba(255,255,255,.55);
  --glass-tile-hover:rgba(255,255,255,.85);
  --glass-tile-deep:rgba(13,22,24,.08);
  --glass-line:rgba(13,22,24,.12);
  --glass-highlight:rgba(255,255,255,.9);
  --glass-edge:rgba(255,255,255,.5);
  --glass-ovl:rgba(13,22,24,.26);
  --glass-ovl-solid:rgba(13,22,24,.58);
  --glass-ink:#0D1618;
  --glass-ink-2:#33403F;
  --glass-muted:#46524F;
  --glass-shadow:0 30px 80px -24px rgba(13,22,24,.40),0 10px 30px -18px rgba(13,22,24,.28);
  --glass-shadow-pop:0 22px 50px -20px rgba(13,22,24,.32),0 4px 14px -8px rgba(13,22,24,.18);
  --glass-glow:rgba(8,119,107,.45);
}

/* ---------- overlay ---------- */
.ovl.glass-ovl{background:radial-gradient(70% 55% at 50% 35%,var(--lk-tint),transparent 70%),var(--glass-ovl);
  -webkit-backdrop-filter:var(--glass-ovl-blur);backdrop-filter:var(--glass-ovl-blur)}

/* ---------- panel ---------- */
.glass{
  --muted:var(--glass-muted);--ink-2:var(--glass-ink-2);--ink:var(--glass-ink);--accent:var(--glass-accent);
  color:var(--glass-ink);
  background:linear-gradient(180deg,var(--glass-highlight),transparent 1.5px),var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);border-radius:28px;
  box-shadow:inset 0 1px 0 var(--glass-highlight),var(--glass-shadow);
  background-clip:padding-box;
}
.glass :focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- tiles (rows, list items, the account row) ---------- */
.glass .glass-tile{background:var(--glass-tile);border:1px solid var(--glass-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
.glass .glass-tile:is(a,button):not(:disabled):hover,.glass .glass-tile:is(a,button):focus-visible{
  background:var(--glass-tile-hover);border-color:var(--glass-glow);
  box-shadow:0 0 0 1px var(--glass-glow),0 8px 28px -12px var(--glow)}
.glass .glass-tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- secondary button: glass outline ---------- */
.glass .glass-btn{background:var(--glass-tile);color:var(--glass-ink);border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.glass .glass-btn:not(:disabled):hover{border-color:var(--glass-glow);background:var(--glass-tile-hover);box-shadow:0 0 18px -8px var(--glow)}

/* ---------- a "coming soon" row: greyed, no hover ---------- */
.glass .glass-tile.is-soon,.glass .glass-tile.is-soon:hover{background:transparent;border-style:dashed;box-shadow:none;cursor:default;transform:none}
.glass .glass-tile.is-soon > *{opacity:.6}
.glass .glass-tile.is-soon img{filter:grayscale(1)}

/* ---------- accessibility fallbacks: a solid panel ---------- */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .ovl.glass-ovl{background:var(--glass-ovl-solid)}
  .glass{background:var(--glass-solid)}
}
@media (prefers-reduced-transparency:reduce){
  .ovl.glass-ovl{background:var(--glass-ovl-solid);-webkit-backdrop-filter:none;backdrop-filter:none}
  .glass{background:var(--glass-solid);-webkit-backdrop-filter:none;backdrop-filter:none}
  .glass .glass-btn{-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-reduced-motion:reduce){
  .ovl.glass-ovl,.glass{animation:none}
  .glass .glass-tile,.glass .glass-btn{transition:none}
  .glass .glass-tile:is(a,button):not(:disabled):hover{box-shadow:0 0 0 1px var(--glass-glow)}
}

/* ---------- shared motion: rise in on a spring, glide in, pop, a halo, a drawn tick, a due pulse ---------- */
@keyframes lkrise{0%{opacity:0;transform:translateY(22px) scale(.95)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes lkin{from{opacity:0;transform:translateY(10px) scale(.985);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes lkup{from{transform:translateY(100%)}to{transform:none}}
@keyframes lkpop{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:none}}
@keyframes lkhalo{0%{opacity:.6;transform:scale(.9)}100%{opacity:0;transform:scale(1.6)}}
@keyframes lkdraw{to{stroke-dashoffset:0}}
@keyframes lkdue{0%{box-shadow:0 0 0 0 var(--glow)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
/*
 * The glass frame: one liquid-glass look for every dialog, sheet and popover of the app (owner, 2026-10-29: the claim
 * sheet in glass too, every glass pop-up a little darker, and the same across the whole app). Its tokens are in
 * glass.css, so a change there moves every dialog together; nothing here or in a dialog's own file sets a colour of
 * its own for the frame.
 *
 *   overlay   `.gsovl` beside the overlay's own class (`.txovl`, `.ovl`, `.srch-ovl`, `.shr-ovl`, the phone scrims
 *             `.popscrim` and `.sheetscrim`): the page dimmed, a faint accent tint and a 10 px blur
 *   panel     `.gsheet.glass`: a frosted, saturated panel over the blurred page, a specular sheen across the top, a
 *             hairline edge light, a deep soft shadow (the transaction sheets, the claim, profile, follow list and
 *             image sheets, the creator drawer, the wallet picker, the terms dialog, search, the share sheets)
 *   popover   `.gpop.glass`: the same glass with a smaller radius and shadow (the account menu, the alerts panel, the
 *             Track picker, the language and timeframe menus)
 *   phone     `.gsheet-phone`: the token page's Buy / Sell panel, a glass bottom sheet on phones only
 *   inside    the page's surface colours (`--surface*`, `--raise`, `--line*`) are swapped for the glass tiles and
 *             line, so an input, a list row, a switch or a quiet button inside any dialog is glass too
 *
 * The transaction sheets (`.txsheet.gsheet`: the lock, claim and extend sheets, lock.css; the Buy / Sell / Swap sheet,
 * trade-sheet.css; the creator fee claim, the profile editor, the follow list, the image adjuster) also share the
 * column layout, the stepper, the tiles, the glossy pill and the waiting, done and failed states below:
 *
 *   sheet     the head, the stepper and the foot keep their place and the body scrolls between them, so the main
 *             button never scrolls out of view; a spring in (a bottom sheet rising on phones)
 *   stepper   a glass rail with glass beads
 *   tiles     the amounts, the breakdown and the segmented controls are glass tiles
 *   buttons   a glossy pill with a light sweep on hover; quiet ones are glass
 *   states    a liquid ring while working, a check that pops in and draws itself when done, an amber bead on failure
 *
 * The accent follows `--accent` on the panel, so a sheet can tint itself (a sell is warm, trade-sheet.css).
 * Fallbacks at the end: no `backdrop-filter` or `prefers-reduced-transparency` give a solid panel and overlay;
 * `prefers-reduced-motion` stops every animation and the hover lifts. Blur stays at the panel's 24 px and the
 * overlay's 10 px; nothing moves on scroll.
 */

/* ---------- overlay ---------- */
.gsovl:is(.txovl,.ovl,.srch-ovl,.shr-ovl,.popscrim,.sheetscrim){
  background:radial-gradient(70% 55% at 50% 35%,var(--lk-tint),transparent 70%),var(--glass-ovl);
  -webkit-backdrop-filter:var(--glass-ovl-blur);backdrop-filter:var(--glass-ovl-blur);animation:txfade .3s ease-out}

/* ---------- panel and popover ---------- */
.glass:is(.gsheet,.gpop){
  --surface:var(--glass-tile);--surface-2:var(--glass-tile);--surface-3:var(--glass-tile-deep);--raise:var(--glass-solid);
  --line:var(--glass-line);--line-soft:var(--glass-line);
  background:linear-gradient(180deg,var(--glass-highlight),transparent 1.5px),
    radial-gradient(120% 70% at 10% -12%,var(--lk-sheen),transparent 55%),
    radial-gradient(90% 60% at 100% 0%,var(--lk-tint),transparent 65%),
    var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);background-clip:padding-box;
  box-shadow:inset 0 1px 0 var(--glass-highlight),inset 1px 0 0 var(--glass-edge),inset -1px 0 0 var(--glass-edge),
    inset 0 -30px 60px -50px var(--glass-glow),var(--glass-shadow)}
.glass.gsheet{border-radius:30px}
.glass.gpop{border-radius:18px;box-shadow:inset 0 1px 0 var(--glass-highlight),inset 1px 0 0 var(--glass-edge),inset -1px 0 0 var(--glass-edge),
  var(--glass-shadow-pop)}

/* ---------- each dialog's own shape on the frame ---------- */
/* The creator drawer: against the right edge on desktop, a bottom sheet on phones. */
.crdrawer.gsheet.glass{border-width:0 0 0 1px;border-radius:30px 0 0 30px}
@media(max-width:900px){
  .crdrawer.gsheet.glass{border-width:1px 0 0;border-radius:30px 30px 0 0}
}
@media(max-width:620px){
  /* The wallet picker and the terms dialog: bottom sheets on phones. */
  .gsheet.glass:is(.walletpick,.termspick){border-bottom:none;border-radius:30px 30px 0 0}
  /* Search: the whole screen on phones. */
  .srch-sheet.gsheet.glass{border-width:0;border-radius:0}
}
/* The share sheets: the whole screen on phones. */
@media(max-width:760px){.shr-sheet.gsheet.glass{border-width:0;border-radius:0}}
/* The Track picker: a bottom sheet on phones. */
@media(max-width:560px){.trackpick.gpop.glass{border-bottom:none;border-radius:22px 22px 0 0}}
/* The token page's Buy / Sell panel: a glass bottom sheet on phones (on a desktop it stays a card on the page). */
@media(max-width:900px){
  .tpage > .tradecard.gsheet-phone{
    --muted:var(--glass-muted);--ink-2:var(--glass-ink-2);--ink:var(--glass-ink);--accent:var(--glass-accent);
    --surface:var(--glass-tile);--surface-2:var(--glass-tile);--surface-3:var(--glass-tile-deep);--raise:var(--glass-solid);
    --line:var(--glass-line);--line-soft:var(--glass-line);
    color:var(--glass-ink);
    background:linear-gradient(180deg,var(--glass-highlight),transparent 1.5px),
      radial-gradient(120% 70% at 10% -12%,var(--lk-sheen),transparent 55%),
      radial-gradient(90% 60% at 100% 0%,var(--lk-tint),transparent 65%),
      var(--glass-bg);
    -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
    border:1px solid var(--glass-line);border-bottom:none;border-radius:30px 30px 0 0;background-clip:padding-box;
    box-shadow:inset 0 1px 0 var(--glass-highlight),inset 0 -30px 60px -50px var(--glass-glow),var(--glass-shadow)}
  .tpage > .tradecard.gsheet-phone > .ctadock{background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
  .tpage > .tradecard.gsheet-phone .sheetclose{background:var(--glass-line);box-shadow:inset 0 1px 0 var(--glass-highlight);width:40px}
}

/* ---------- inside: rows and figures as glass tiles; a picked or hovered row a lighter one ---------- */
.gsheet :is(.claimlist li,.crd-figs > div){border:1px solid var(--glass-line);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.gsheet .claimlist li{border-radius:16px}
.glass:is(.gsheet,.gpop) :is(.srch-opt.on,.actrow:hover,.up-flist button:hover,.shr-tog:hover,.langmenu button:hover){background:var(--glass-tile-hover)}

/* ---------- the transaction sheets ---------- */
.txsheet.gsheet{display:flex;flex-direction:column;overflow:hidden;animation:lkrise .55s var(--lk-spring) both;transition:box-shadow .6s ease}
/* A column: the head, the stepper and the foot keep their place, the body scrolls between them. */
.txsheet.gsheet > *{flex:none}
/* A sheet without a scrolling body (the follow list, the image adjuster) scrolls as a whole. */
.txsheet.gsheet:not(:has(> .txbody)){overflow-y:auto}
.gsheet > .txbody{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:0 -6px;padding:0 6px 4px}
/* Done: the panel takes a soft glow in its accent. */
.txsheet.gsheet[data-phase="done"]{box-shadow:inset 0 1px 0 var(--glass-highlight),inset 0 -40px 80px -50px var(--glass-glow),
  var(--glass-shadow),0 0 90px -30px var(--glass-glow)}
@media(max-width:900px){
  .txsheet.gsheet{border-radius:30px 30px 0 0;border-bottom:none;animation:lkup .5s var(--lk-ease) both}
  .gsheet .txgrab{background:var(--glass-line);box-shadow:inset 0 1px 0 var(--glass-highlight);width:40px}
}
.gsheet .txhead h2{font-size:19px;letter-spacing:-.02em}
.gsheet .txx{background:var(--glass-tile);border:1px solid var(--glass-line);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  color:var(--ink-2);transition:transform .45s var(--lk-spring),background .2s ease,color .2s ease}
.gsheet .txx:hover{background:var(--glass-tile-hover);color:var(--ink);transform:rotate(90deg)}
/* What a new step brings in glides in; what stays put (a status line) does not move. */
.gsheet .txbody{animation:none}
.gsheet .txbody > *{animation:lkin .45s var(--lk-spring) both}
.gsheet .txbody > :nth-child(2){animation-delay:.04s}
.gsheet .txbody > :nth-child(3){animation-delay:.08s}
.gsheet .txbody > :nth-child(n+4){animation-delay:.12s}

/* ---------- the stepper: a glass rail with glass beads ---------- */
.gsheet .txtrack{padding:12px 4px 10px;border-radius:22px;background:var(--glass-tile);border:1px solid var(--glass-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.gsheet .txtrack li:not(:first-child)::before{background:var(--glass-line)}
.gsheet .txtrack li:not(:first-child)::after{box-shadow:0 0 8px var(--glow);transition:transform .6s var(--lk-ease)}
.gsheet .txtrack li b{border-color:var(--glass-line);color:var(--muted);
  background:radial-gradient(circle at 50% 10%,rgba(255,255,255,.14),transparent 70%),var(--glass-solid);
  transition:background .3s ease,border-color .3s ease,color .3s ease,box-shadow .3s ease,transform .5s var(--lk-spring)}
.gsheet .txtrack li.on b{transform:scale(1.12);color:var(--accent);border-color:var(--accent);
  background:radial-gradient(circle at 50% 12%,rgba(255,255,255,.30),transparent 60%),color-mix(in srgb,var(--accent) 16%,var(--glass-solid))}
.gsheet .txtrack li.done b{color:var(--accent-ink);border-color:var(--accent);box-shadow:0 4px 14px -4px var(--glow);
  background:radial-gradient(circle at 50% 8%,rgba(255,255,255,.40),transparent 55%),linear-gradient(180deg,var(--accent),var(--brand))}

/* ---------- glass tiles: the amounts, the breakdown, the segmented controls ---------- */
.gsheet .txamt{border-radius:22px;border-color:var(--glass-line);padding:16px 18px;
  background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 60%),var(--glass-tile);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.gsheet .txamt .a{font-size:28px}
.gsheet .quote{border-top:none;margin-top:12px;padding:12px 14px;border-radius:18px;background:var(--glass-tile);
  border:1px solid var(--glass-line);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.gsheet .quote .ql.total{border-top-color:var(--glass-line)}
.gsheet .quote .hint{margin-top:4px}
.gsheet .seg{background:var(--glass-tile);border-color:var(--glass-line);box-shadow:inset 0 1px 3px var(--lk-inset)}
.gsheet .seg button{transition:background .3s ease,color .2s ease,box-shadow .3s ease,transform .45s var(--lk-spring)}
.gsheet .seg button:hover{color:var(--ink)}
.gsheet .seg button:active{transform:scale(.94)}
.gsheet .seg button[aria-pressed="true"]{color:var(--ink);
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.03)),color-mix(in srgb,var(--accent) 16%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent),0 6px 16px -8px var(--glow)}

/* ---------- buttons: a glossy pill, a light sweep on hover; glass for the quiet ones ---------- */
.gsheet .cta{position:relative;overflow:hidden;border-radius:999px;color:var(--accent-ink);
  background:linear-gradient(180deg,rgba(255,255,255,var(--lk-gloss)),rgba(255,255,255,0) 48%),
    linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 84%,#000));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.16),0 0 0 1px color-mix(in srgb,var(--accent) 60%,transparent),
    0 12px 28px -14px var(--glass-glow);
  transition:transform .45s var(--lk-spring),box-shadow .3s ease,filter .2s ease,opacity .2s ease}
.gsheet .cta::after{content:"";position:absolute;inset:0;pointer-events:none;transform:translateX(-120%);
  background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.26) 50%,transparent 68%)}
.gsheet .cta:not(:disabled):hover{filter:none;transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.16),0 0 0 1px var(--accent),0 16px 36px -14px var(--glass-glow)}
.gsheet .cta:not(:disabled):hover::after{transform:translateX(120%);transition:transform .9s var(--lk-ease)}
.gsheet .cta:not(:disabled):active{transform:scale(.97);transition-duration:.12s}
.gsheet .cta:disabled{box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.gsheet .txclose{width:auto;margin:10px auto 0;padding:8px 18px;border-radius:999px;color:var(--ink-2);
  transition:background .2s ease,color .2s ease}
.gsheet .txclose:hover{background:var(--glass-tile-hover);color:var(--ink)}
.gsheet .txfoot{margin-top:10px}

/* ---------- the waiting, done and failed states ---------- */
.gsheet .txcenter{padding:20px 4px 10px;gap:10px}
.gsheet .txcenter h3{font-size:19px}
/* Working: a liquid ring. */
.gsheet .txspin{width:48px;height:48px;border:0;
  background:conic-gradient(from 0deg,transparent 0 12%,color-mix(in srgb,var(--accent) 25%,transparent) 40%,var(--accent));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4.5px),#000 calc(100% - 4px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 4.5px),#000 calc(100% - 4px));animation:txspin .9s linear infinite}
/* Done: the check pops in on a spring, a halo rings out, the tick draws itself. */
.gsheet .txcheck{position:relative;width:78px;height:78px;animation:lkpop .7s var(--lk-spring) both}
.gsheet .txcheck::before{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--accent);opacity:0;
  animation:lkhalo 1.2s .2s ease-out both}
.gsheet .txcheck svg{filter:drop-shadow(0 0 16px var(--glow))}
.gsheet .txcheck circle{fill:color-mix(in srgb,var(--accent) 16%,transparent);stroke:var(--accent);stroke-width:1.5}
.gsheet .txcheck path{stroke-dasharray:34;stroke-dashoffset:34;animation:lkdraw .45s .28s cubic-bezier(.65,0,.35,1) forwards}
/* Failed or nothing to sign: an amber glass bead. */
.gsheet .txfail{width:64px;height:64px;font-size:24px;animation:lkpop .6s var(--lk-spring) both}
.gsheet .txfail.warn{border:1px solid color-mix(in srgb,var(--warn) 40%,transparent);
  background:radial-gradient(circle at 50% 10%,rgba(255,255,255,.22),transparent 60%),color-mix(in srgb,var(--warn) 14%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 0 32px -10px var(--warn)}

/* ---------- fallbacks: a solid panel and overlay ---------- */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .gsovl:is(.txovl,.ovl,.srch-ovl,.shr-ovl,.popscrim,.sheetscrim){background:var(--glass-ovl-solid)}
  .glass:is(.gsheet,.gpop){background:linear-gradient(180deg,var(--glass-highlight),transparent 1.5px),var(--glass-solid)}
  @media(max-width:900px){
    .tpage > .tradecard.gsheet-phone,.tpage > .tradecard.gsheet-phone > .ctadock{background:var(--glass-solid)}
  }
}
@media (prefers-reduced-transparency:reduce){
  .gsovl:is(.txovl,.ovl,.srch-ovl,.shr-ovl,.popscrim,.sheetscrim){background:var(--glass-ovl-solid);-webkit-backdrop-filter:none;backdrop-filter:none}
  .glass:is(.gsheet,.gpop){background:linear-gradient(180deg,var(--glass-highlight),transparent 1.5px),var(--glass-solid);-webkit-backdrop-filter:none;backdrop-filter:none}
  @media(max-width:900px){
    .tpage > .tradecard.gsheet-phone,.tpage > .tradecard.gsheet-phone > .ctadock{background:var(--glass-solid);-webkit-backdrop-filter:none;backdrop-filter:none}
  }
}
@media (prefers-reduced-motion:reduce){
  .gsovl:is(.txovl,.ovl,.srch-ovl,.shr-ovl,.popscrim,.sheetscrim),.txsheet.gsheet,.gsheet .txbody > *,.gsheet .txcheck,.gsheet .txcheck::before,.gsheet .txfail{animation:none!important}
  .gsheet .txcheck path{animation:none!important;stroke-dashoffset:0}
  .gsheet .txcheck::before{opacity:0}
  .gsheet .txspin{animation-duration:2.4s}
  .gsheet .txtrack li.on b,.gsheet .seg button:active,.gsheet .cta:not(:disabled):hover,.gsheet .cta:not(:disabled):active,
  .gsheet .txx:hover{transform:none}
  .gsheet .txtrack li:not(:first-child)::after{transition:none}
  .gsheet .cta::after{display:none}
}

/*
 * Scrollbars inside the glass (owner, 2026-10-29): with a mouse attached, or "Show scroll bars: Always" on macOS, the
 * browser draws its classic light-grey bar, which covered the right edge of a sheet's content. Every scrolling area in a
 * sheet or popover gets a thin dark thumb on a clear track, and its room is reserved (`scrollbar-gutter`), so it never
 * covers the content nor shifts it when it appears.
 */
.gsheet, .gsheet *, .gpop, .gpop * {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ink) 22%, transparent) transparent;
}
.gsheet > .txbody, .txsheet.gsheet:not(:has(> .txbody)) { scrollbar-gutter: stable; }
.gsheet ::-webkit-scrollbar, .gsheet::-webkit-scrollbar, .gpop ::-webkit-scrollbar, .gpop::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; }
.gsheet ::-webkit-scrollbar-track, .gsheet::-webkit-scrollbar-track, .gpop ::-webkit-scrollbar-track, .gpop::-webkit-scrollbar-track { background: transparent; }
.gsheet ::-webkit-scrollbar-thumb, .gsheet::-webkit-scrollbar-thumb, .gpop ::-webkit-scrollbar-thumb, .gpop::-webkit-scrollbar-thumb {
  border-radius: 999px; border: 2px solid transparent; background-clip: padding-box;
  background-color: color-mix(in srgb, var(--ink) 22%, transparent);
}
.gsheet ::-webkit-scrollbar-thumb:hover, .gpop ::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--ink) 38%, transparent); }
.gsheet ::-webkit-scrollbar-corner, .gpop ::-webkit-scrollbar-corner { background: transparent; }