:root {
    --bg: #0c0a08;
    --bg-2: #15120e;
    --bg-3: #1f1a14;
    --line: #2a2419;
    --line-bright: #3d3527;
    --text: #f5efe6;
    --text-dim: #9a9086;
    --brand: #fcab06;
    --brand-2: #fa7a0e;
    --accent: #03b8b0;
    --accent-dim: rgba(3, 184, 176, .12);
    --on-brand: #1a1000;
    --up: #2ebd85;
    --down: #f6465d;
    /* "Pending / caution" used to be amber, which is now the brand colour. Moved onto the
       sunglasses teal so a pending badge never reads as a primary action. */
    --warn: #03b8b0;
    --warn-dim: rgba(3, 184, 176, .12);
    --mono: "SF Mono", "Cascadia Code", "JetBrains Mono", Consolas, "Liberation Mono", monospace;
    --r-xs: 4px;
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-pill: 999px;
    --radius: var(--r-md);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.up { color: var(--up); }
.down { color: var(--down); }
.mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.container { max-width: 1240px; margin: 0 auto; padding: 0 20px; }

/* Header */
.nav {
    position: sticky; top: 0; z-index: 50;
    background: rgba(12,10,8,.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; gap: 28px; height: 60px; }
.logo { font-size: 22px; font-weight: 800; letter-spacing: -.5px; display: inline-flex; align-items: center; }
.logo-word { font-size: 21px; font-weight: 800; letter-spacing: -.5px; color: var(--text); }
.logo-word span { color: var(--brand); }
.nav-links { display: flex; gap: 24px; margin-left: 8px; }
.nav-links a { color: var(--text-dim); font-weight: 500; transition: color .15s; }
.nav-links a:hover, .nav-links a.active { color: var(--text); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 9px 18px; border-radius:var(--r-md); font-weight: 600; cursor: pointer;
    border: none; font-size: 14px; transition: filter .15s, background .15s; white-space: nowrap;
}
.btn-ghost { background: transparent; color: var(--text); }
.btn-ghost:hover { color: var(--brand); }
.btn-primary { background: var(--brand); color: var(--on-brand); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-up { background: var(--up); color: #fff; width: 100%; padding: 12px; }
.btn-down { background: var(--down); color: #fff; width: 100%; padding: 12px; }
.btn-block { width: 100%; }

/* Hero */
.hero { padding: 72px 0 40px; }
.hero h1 { font-size: 52px; line-height: 1.1; margin: 0 0 18px; font-weight: 800; letter-spacing: -1.5px; }
.hero h1 .grad { background: linear-gradient(90deg, var(--brand), var(--brand-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero p { font-size: 18px; color: var(--text-dim); max-width: 520px; margin: 0 0 28px; }
.hero-cta { display: flex; gap: 14px; }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }

/* ── Auxiliary graphics ──────────────────────────────────────────────────
   The mark's rays, unrolled. Built from gradients rather than an image so
   they weigh nothing, redraw at any viewport, and follow --brand when an
   operator recolours the site from admin. */

/* Radiating ray field. Sits behind hero content as a rising sun: the disc is
   far wider than the section and pulled up past the top edge, so only the
   lower fan shows. The parent needs overflow:hidden and the content above it
   needs position:relative. */
.tx-rays {
    position: absolute; left: 50%; top: 0; z-index: 0;
    width: min(1500px, 180vw); aspect-ratio: 1; translate: -50% -58%;
    pointer-events: none;
    background: repeating-conic-gradient(from -90deg at 50% 50%,
        rgba(252,171,6,.17) 0deg 1.05deg, transparent 1.05deg 5deg);
    -webkit-mask: radial-gradient(closest-side, transparent 31%, #000 46%, transparent 74%);
    mask: radial-gradient(closest-side, transparent 31%, #000 46%, transparent 74%);
}
/* Warm bloom on the horizon. Pairs with .tx-rays; also works alone. */
.tx-horizon {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(252,171,6,.13) 0%, transparent 70%);
}
/* Section divider: two rows of bars on different periods, so the comb reads
   uneven the way the mark's rays are uneven. */
.tx-ray-band {
    height: 15px; border: 0; margin: 40px 0;
    background-image:
        repeating-linear-gradient(90deg, var(--brand) 0 3px, transparent 3px 11px),
        repeating-linear-gradient(90deg, var(--brand-2) 0 3px, transparent 3px 17px);
    background-size: 100% 15px, 100% 8px;
    background-position: 0 0, 0 100%;
    background-repeat: no-repeat;
    opacity: .42;
    -webkit-mask: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
    mask: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}
/* Photographic backdrop. The image carries the sunrise; the overlay keeps
   text on it legible without dimming the whole frame. */
.tx-photo {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-size: cover; background-position: 50% 42%;
    -webkit-mask: linear-gradient(180deg, #000 45%, transparent 100%);
    mask: linear-gradient(180deg, #000 45%, transparent 100%);
    opacity: .5;
}

/* Cards / tables */
.card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); }
.section-title { font-size: 24px; font-weight: 700; margin: 48px 0 20px; }

.ticker-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tcard { padding: 16px; }
.tcard .pair { display: flex; align-items: center; gap: 8px; color: var(--text-dim); font-weight: 600; }
.tcard .price { font-size: 22px; font-weight: 700; margin: 8px 0 2px; font-variant-numeric: tabular-nums; }

table.mkt { width: 100%; border-collapse: collapse; }
table.mkt th { text-align: left; color: var(--text-dim); font-weight: 500; font-size: 13px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
table.mkt td { padding: 14px 16px; border-bottom: 1px solid var(--line); }
table.mkt tbody tr { transition: background .12s; }
table.mkt tbody tr:hover { background: var(--bg-3); cursor: pointer; }
table.mkt th.r, table.mkt td.r { text-align: right; }
.coin { display: flex; align-items: center; gap: 10px; }
/* asset mark from coinSym() — usable outside .coin (contract lists, position cards) */
.sym { position: relative; width: 30px; height: 30px; border-radius: 50%; background: var(--bg-3); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--brand); overflow: hidden; flex-shrink: 0; }
.coin b { font-weight: 600; }
.coin small { color: var(--text-dim); }
.pill { padding: 4px 10px; border-radius:var(--r-sm); font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; }
.pill.up { background: rgba(46,189,133,.12); }
.pill.down { background: rgba(246,70,93,.12); }

/* Trade layout */
.trade-wrap { display: grid; grid-template-columns: 1fr 250px 300px; gap: 14px; margin: 16px 0; }
.trade-wrap.no-book { grid-template-columns: 1fr 320px; }

/* Order book */
.book-panel { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.book-tabs { display: flex; border-bottom: 1px solid var(--line); }
.book-tabs button { flex: 1; padding: 10px; background: none; border: none; color: var(--text-dim); font-weight: 600; cursor: pointer; font-size: 13px; }
.book-tabs button.active { color: var(--text); box-shadow: inset 0 -2px 0 var(--brand); }
.book-head { display: flex; justify-content: space-between; padding: 8px 12px; color: var(--text-dim); font-size: 11px; }
.book-side { display: flex; flex-direction: column; }
.book-row { position: relative; display: flex; justify-content: space-between; padding: 2px 12px; font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; cursor: pointer; }
.book-row:hover { background: var(--bg-3); }
.book-row .bar { position: absolute; top: 0; bottom: 0; right: 0; opacity: .14; }
.book-row .px { position: relative; z-index: 1; }
.book-row .sz { position: relative; z-index: 1; color: var(--text-dim); }
.book-row.ask .px { color: var(--down); }
.book-row.ask .bar { background: var(--down); }
.book-row.bid .px { color: var(--up); }
.book-row.bid .bar { background: var(--up); }
.book-mid { padding: 8px 12px; border-block: 1px solid var(--line); font-family: var(--mono); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 8px; }
.book-mid small { color: var(--text-dim); font-size: 11px; font-weight: 400; }
.trades-list { overflow-y: auto; }
.trade-row { display: flex; justify-content: space-between; padding: 3px 12px; font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.trade-row .t { color: var(--text-dim); }
.trade-head { display: flex; align-items: center; gap: 24px; padding: 16px 20px; }
.trade-head .big { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.chart-box { height: 460px; padding: 8px; }

/* session-closed notice */
.mc-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; padding: 9px 14px;
          border: 1px solid var(--line-bright); border-left: 2px solid var(--warn); border-radius:var(--r-sm);
          background: rgba(255,255,255,.03); font-size: 13px; line-height: 1.5; }
.mc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); flex: none; }
.mc-label { color: var(--text); font-weight: 600; }
.mc-detail { color: var(--text-dim); }

/* indicator strip under a chart (spot + perpetuals) */
.fx-ind { display: flex; align-items: center; gap: 5px; padding: 7px 8px 9px; border-top: 1px solid var(--line);
          overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0; }
.fx-ind::-webkit-scrollbar { display: none; }
.fx-ind-lab { flex: none; font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
              color: var(--text-dim); padding: 0 3px; }
.fx-ind-sep { flex: none; width: 1px; height: 15px; background: var(--line); margin: 0 5px; }
.fx-ind-btn { flex: none; background: none; border: 1px solid transparent; color: var(--text-dim); font: inherit;
              font-size: 11.5px; font-weight: 650; padding: 4px 9px; border-radius:var(--r-sm); cursor: pointer;
              transition: color .13s, background .13s, border-color .13s; }
.fx-ind-btn:hover { color: var(--text); }
.fx-ind-btn.on { background: rgba(252,171,6,.13); border-color: var(--brand); color: var(--brand); }
.stat { display: flex; flex-direction: column; }
.stat small { color: var(--text-dim); font-size: 12px; }
.order-panel { padding: 18px; }
.tabs { display: flex; gap: 4px; background: var(--bg-3); border-radius:var(--r-md); padding: 4px; margin-bottom: 16px; }
.tabs button { flex: 1; padding: 8px; border: none; background: transparent; color: var(--text-dim); border-radius:var(--r-sm); cursor: pointer; font-weight: 600; }
.tabs button.active { background: var(--bg); color: var(--text); }
.field { margin-bottom: 12px; }
.field label { display: block; color: var(--text-dim); font-size: 12px; margin-bottom: 6px; }
.field input { width: 100%; background: var(--bg-3); border: 1px solid var(--line); border-radius:var(--r-sm); color: var(--text); padding: 11px 12px; font-size: 14px; }
.field input:focus { outline: none; border-color: var(--brand); }
.seg { display: flex; gap: 8px; margin-bottom: 14px; }
.seg button { flex: 1; padding: 9px; border-radius:var(--r-sm); border: 1px solid var(--line); background: transparent; color: var(--text-dim); cursor: pointer; font-weight: 600; }
.seg button.buy.active { background: rgba(46,189,133,.15); color: var(--up); border-color: var(--up); }
.seg button.sell.active { background: rgba(246,70,93,.15); color: var(--down); border-color: var(--down); }
.bal-line { display: flex; justify-content: space-between; color: var(--text-dim); font-size: 13px; margin-bottom: 14px; font-variant-numeric: tabular-nums; }

/* Auth */
.auth-wrap { min-height: calc(100vh - 60px); display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.auth-card { width: 100%; max-width: 420px; padding: 36px; }
.auth-card h2 { margin: 0 0 6px; font-size: 26px; }
.auth-card .sub { color: var(--text-dim); margin-bottom: 26px; }
.auth-card .field input { padding: 13px; }
.alert { background: rgba(246,70,93,.12); color: var(--down); padding: 11px 14px; border-radius:var(--r-sm); margin-bottom: 16px; font-size: 13px; }
.auth-foot { text-align: center; color: var(--text-dim); margin-top: 20px; }
.auth-foot a { color: var(--brand); font-weight: 600; }
.bonus-note { background: rgba(252,171,6,.08); border: 1px solid rgba(252,171,6,.2); color: var(--brand); padding: 12px 14px; border-radius:var(--r-sm); font-size: 13px; margin-bottom: 20px; }

/* Assets */
.asset-hero { padding: 28px; margin: 20px 0; display: flex; align-items: flex-end; gap: 40px; }
.asset-hero .total { font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; }
.asset-hero small { color: var(--text-dim); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Footer */
.footer { border-top: 1px solid var(--line); margin-top: 64px; padding: 32px 0; color: var(--text-dim); font-size: 13px; }
.footer .disc { margin-top: 8px; opacity: .8; }

/* Footer links were 20px tall — a 13px line box with nothing around it. The hit area is
   grown with padding rather than type size, so the footer reads the same and the links
   are simply easier to hit; row-gap stays at 0 because the height now does that job. */
.footer-nav { display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 0; margin-bottom: 12px; }
.footer-nav a { display: inline-flex; align-items: center; min-height: 32px; }

/* Mobile bottom navigation (Bitget-style) */
.mnav { display: none; }
.mnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: rgba(12,10,8,.96); backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
}
.mnav-inner { display: flex; }
.mnav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; color: var(--text-dim); font-size: 10px; font-weight: 600; }
.mnav a.active { color: var(--brand); }
.mnav a svg { width: 22px; height: 22px; }

@media (max-width: 1024px) {
    .trader-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 900px) {
    .container { padding: 0 14px; }
    .hero { padding: 40px 0 24px; }
    .hero-grid { grid-template-columns: 1fr; gap: 24px; }
    .hero h1 { font-size: 34px; letter-spacing: -1px; }
    .hero p { font-size: 16px; }
    .hero-cta { flex-direction: column; }
    .hero-cta .btn { width: 100%; }
    .ticker-cards { grid-template-columns: repeat(2, 1fr); }
    .trade-wrap, .trade-wrap.no-book { grid-template-columns: 1fr; }
    .nav-links { display: none; }
    .grid-2 { grid-template-columns: 1fr; }
    .section-title { font-size: 20px; margin: 32px 0 16px; }

    /* show mobile bottom nav, pad body so content clears it */
    body { padding-bottom: 68px; }
    .mnav { display: block; }
    .footer { margin-bottom: 60px; }
    /* full 44px targets where they actually matter — thumbs, not cursors */
    .footer-nav { column-gap: 18px; }
    .footer-nav a { min-height: 44px; }

    /* horizontal-scroll any table-bearing card so columns never break layout */
    .card:has(table.mkt) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table.mkt { min-width: 560px; }
    table.mkt th, table.mkt td { padding: 12px 12px; }

    /* trade header: let stats scroll instead of overflowing */
    .trade-head { gap: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 14px; white-space: nowrap; }
    .trade-head .stat { flex-shrink: 0; }
    .trade-head .big { font-size: 20px; }
    /* sticky right-edge hint so it is obvious the stats row scrolls */
    .trade-head::after { content: '›'; position: sticky; right: 0; flex: 0 0 auto; align-self: center; padding: 4px 0 4px 22px; margin-left: -10px; color: var(--text-dim); font-size: 18px; line-height: 1; background: linear-gradient(90deg, transparent, var(--bg-2) 60%); pointer-events: none; }
    /* was 320 before the indicator strip; toolbar + strip take ~85px off the candles */
    .chart-box { height: 400px; }

    /* keep the session notice to one line: on a phone the full sentence wrapped to five
       and cost more vertical space than it was worth above the chart */
    .mc-long { display: none; }
    .mc-bar { gap: 8px; padding: 8px 12px; font-size: 12.5px; }
    .order-panel { padding: 16px; }
    /* stacked trade layout: order form before the (very tall) order book */
    .trade-wrap .book-panel { order: 2; }

    /* assets summary stacks */
    .asset-hero { flex-direction: column; align-items: flex-start; gap: 18px; padding: 20px; }
    .asset-hero .total { font-size: 28px; } /* @design-ok size override; tabular is set on the base rule */

    .trader-grid { grid-template-columns: 1fr !important; }

    .auth-card { padding: 26px 20px; }
    .nav-inner { gap: 12px; }
    .nav-right { gap: 8px; }
    .nav-right .btn { padding: 8px 13px; font-size: 13px; }
    .logo { font-size: 20px; }
    .logo-word { font-size: 18px; }
    .wallet-pill { font-size: 11px; }
}

@media (max-width: 384px) {
    /* wordmark + pill + Disconnect cannot all fit the narrowest phones:
       keep "TAIYO X", drop the address text (dot alone still marks the wallet) */
    .wp-addr { display: none; }
    .wallet-pill { padding: 4px 8px; }
}

@media (max-width: 380px) {
    .ticker-cards { grid-template-columns: 1fr; }
    .hero h1 { font-size: 29px; }
}

/* Accessibility: visible keyboard focus ring (box-shadow survives inline outline:none) */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
    box-shadow: 0 0 0 3px rgba(252,171,6,.45);
    border-color: var(--brand);
    outline: none;
}

/* Shared confirm modal */
.bx-modal-back {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(0,0,0,.62); backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center; padding: 20px;
    opacity: 0; transition: opacity .18s ease;
}
.bx-modal-back.on { opacity: 1; }
.bx-modal {
    width: 100%; max-width: 400px;
    background: var(--bg-2); border: 1px solid var(--line); border-radius:var(--r-md);
    padding: 24px; box-shadow: 0 24px 70px rgba(0,0,0,.6);
    transform: translateY(8px) scale(.98); transition: transform .18s ease;
}
.bx-modal-back.on .bx-modal { transform: translateY(0) scale(1); }
.bx-modal-title { margin: 0 0 8px; font-size: 18px; font-weight: 700; }
.bx-modal-msg { color: var(--text-dim); font-size: 14px; line-height: 1.55; margin-bottom: 22px; white-space: pre-line; }
.bx-modal-actions { display: flex; gap: 10px; }
.bx-btn {
    flex: 1; padding: 11px; border: none; border-radius:var(--r-sm);
    font-weight: 600; font-size: 14px; cursor: pointer; transition: filter .15s;
}
.bx-btn-cancel { background: var(--bg-3); color: var(--text); }
.bx-btn-cancel:hover { filter: brightness(1.2); }
.bx-btn-danger { background: var(--down); color: #fff; }
.bx-btn-primary { background: linear-gradient(90deg, var(--brand), var(--brand-2)); color: var(--on-brand); }
.bx-btn-danger:hover, .bx-btn-primary:hover { filter: brightness(1.08); }

/* Toast */
.bx-toast {
    position: fixed; left: 50%; bottom: 88px; transform: translate(-50%, 16px);
    z-index: 210; max-width: 90vw;
    background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--brand);
    color: var(--text); padding: 12px 18px; border-radius:var(--r-md); font-size: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,.5); opacity: 0; transition: opacity .25s, transform .25s;
}
.bx-toast.on { opacity: 1; transform: translate(-50%, 0); }
.bx-toast.err { border-left-color: var(--down); }
.bx-toast.ok  { border-left-color: var(--up); }

/* Skeleton shimmer utility */
.skeleton {
    background: linear-gradient(90deg, var(--bg-3) 25%, var(--line) 37%, var(--bg-3) 63%);
    background-size: 400% 100%; border-radius:var(--r-sm);
    animation: bx-shimmer 1.3s ease infinite;
}
@keyframes bx-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* ---- Live data feel: price flash ---- */
@keyframes bxFlashUp   { 0% { background: rgba(46,189,133,.30); } 100% { background: transparent; } }
@keyframes bxFlashDown { 0% { background: rgba(246,70,93,.30); }  100% { background: transparent; } }
.flash-up   { animation: bxFlashUp .65s ease-out; }
.flash-down { animation: bxFlashDown .65s ease-out; }
.js-price, #last-price, #mid-price { border-radius:var(--r-sm); }

/* ---- Sparkline mini-trend ---- */
td.spark-cell { width: 96px; text-align: right; }
canvas.spark { width: 84px; height: 26px; display: inline-block; vertical-align: middle; }

/* ---- Button loading spinner ---- */
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
    content: ''; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px;
    margin: -8px 0 0 -8px; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff;
    border-radius: 50%; animation: bxSpin .6s linear infinite;
}
@keyframes bxSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .flash-up, .flash-down { animation: none; }
    .btn.is-loading::after { animation: none; }
}
/* hide the sparkline column on phones — full chart is one tap away on the trade page */
@media (max-width: 900px) {
    #mkt-table th:nth-child(4), #mkt-table td.spark-cell { display: none; }
}