/* =========================================================================
   MARKET WIDGETS. Each card picks its own colour through --wc (an "r g b"
   triplet), so every page can have its own palette:
     <div class="wbox" style="--wc: 96 165 250"> ... </div>
   Ready-made palettes: .wc-mint .wc-sky .wc-violet .wc-amber .wc-gold .wc-coral .wc-teal .wc-lime
   ========================================================================= */
.wbox { --wc: var(--rgb-accent); --up: 52 211 153; --neg: 228 100 124; position: relative; display: grid; gap: 1rem; align-content: start; padding: clamp(1.1rem, 2vw, 1.6rem); border-radius: 1rem; border: 1px solid rgb(var(--wc) / .22); background: linear-gradient(180deg, rgb(var(--wc) / .07), rgb(var(--wc) / .02) 40%, rgb(var(--rgb-surface) / .35)); min-width: 0; }
.wc-mint { --wc: 52 211 153; } .wc-sky { --wc: 96 165 250; } .wc-violet { --wc: 167 139 250; } .wc-amber { --wc: 251 191 36; }
.wc-gold { --wc: 234 179 8; } .wc-coral { --wc: 251 113 133; } .wc-teal { --wc: 45 212 191; } .wc-lime { --wc: 163 230 53; }
.wbox__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.wbox__title { font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; color: var(--c-ink); }
.wbox__tag { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--f-mono); font-size: var(--fs-cap); letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--wc)); }
.wbox__tag::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: rgb(var(--wc)); animation: w-live 1.8s ease-in-out infinite; }
@keyframes w-live { 50% { opacity: .25; } }
.wbox__note { font-size: .75rem; color: var(--c-ink-4); }
.wgrid { display: grid; gap: 1rem; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.wgrid > .wbox { grid-column: span 6; }
.wgrid > .wbox.span-4 { grid-column: span 4; } .wgrid > .wbox.span-5 { grid-column: span 5; } .wgrid > .wbox.span-7 { grid-column: span 7; }
.wgrid > .wbox.span-8 { grid-column: span 8; } .wgrid > .wbox.span-12 { grid-column: span 12; }
@media (max-width: 64rem) { .wgrid > .wbox, .wgrid > .wbox[class*="span-"] { grid-column: span 12; } }

.w { min-width: 0; font-variant-numeric: tabular-nums; }
.w-chg { font-family: var(--f-mono); font-size: .82rem; color: rgb(var(--up)); }
.w-chg.neg { color: rgb(var(--neg)); }
.w-num { font-family: var(--f-mono); font-size: .9rem; color: var(--c-ink); transition: color .6s; }
.w-num.is-up, .w-chart__price.is-up { animation: w-up .9s; } .w-num.is-down, .w-chart__price.is-down { animation: w-down .9s; }
@keyframes w-up { 0% { color: rgb(var(--up)); } } @keyframes w-down { 0% { color: rgb(var(--neg)); } }
.w-dim { color: var(--c-ink-3); }

/* quotes */
.w-table { display: grid; }
.w-tr { display: grid; grid-template-columns: minmax(0, 1.5fr) 1fr .8fr 6rem .8fr; align-items: center; gap: .75rem; padding: .62rem 0; border-top: 1px solid var(--c-line); }
.w-table:not(:has(.w-th > :nth-child(5))) .w-tr { grid-template-columns: minmax(0, 1.5fr) 1fr .8fr 6rem; }
.w-th { border-top: 0; padding-top: 0; font-family: var(--f-mono); font-size: var(--fs-cap); letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink-4); }
.w-tr > :not(:first-child) { text-align: right; justify-self: end; }
.w-sym { display: grid; min-width: 0; } .w-sym b { font-family: var(--f-mono); font-weight: 600; font-size: .88rem; color: var(--c-ink); } .w-sym small { font-size: .74rem; color: var(--c-ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-spark { width: 6rem; height: 1.75rem; display: block; }
.w-spark path { stroke: rgb(var(--up)); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.w-spark.is-neg path { stroke: rgb(var(--neg)); }
@media (max-width: 40rem) { .w-hide-s { display: none !important; } .w-tr { grid-template-columns: minmax(0, 1.3fr) 1fr .9fr .8fr; gap: .5rem; } .w-table:not(:has(.w-th > :nth-child(5))) .w-tr { grid-template-columns: minmax(0, 1.4fr) 1fr .9fr; } }
@media (max-width: 40rem) { .w-tick { font-size: 20px; } .w-val { font-size: 17px; } .w-pt { r: 5px; } }

/* chart */
.w-chart__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.w-chart__sym { font-family: var(--f-mono); font-size: 1rem; color: var(--c-ink); margin-right: .6rem; }
.w-chart__name { font-size: .82rem; color: var(--c-ink-4); }
.w-chart__q { display: flex; align-items: baseline; gap: .7rem; }
.w-chart__price { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.4rem, 2.4vw, 2rem); color: var(--c-ink); letter-spacing: -.02em; }
.w-tabs { display: flex; gap: .35rem; margin: .8rem 0 .4rem; }
.w-tabs button { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .08em; padding: .3rem .65rem; border-radius: var(--radius-pill); color: var(--c-ink-3); border: 1px solid var(--c-line); }
.w-tabs button.is-on { color: rgb(var(--wc)); border-color: rgb(var(--wc) / .55); background: rgb(var(--wc) / .1); }
.wbox:has(> .w--chart) { grid-template-rows: 1fr; } .w--chart { display: flex; flex-direction: column; height: 100%; }
.w-chart__plot { position: relative; flex: 1 1 auto; min-height: clamp(10rem, 22vw, 14rem); padding-right: 4.2rem; }
.w-chart__plot svg { width: 100%; height: 100%; display: block; }
.w-grid { stroke: var(--c-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.w-line { fill: none; stroke: rgb(var(--wc)); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.w-line--ghost { stroke: rgb(var(--wc) / .35); stroke-dasharray: 4 4; }
.w-area { fill: rgb(var(--wc) / .12); stroke: none; }
.w-last { stroke: rgb(var(--wc) / .5); stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.w-wick { stroke: rgb(var(--up)); vector-effect: non-scaling-stroke; } .w-wick.neg { stroke: rgb(var(--neg)); }
.w-body { fill: rgb(var(--up)); } .w-body.neg { fill: rgb(var(--neg)); }
.w-chart__tip { position: absolute; transform: translate(-50%, -130%); padding: .3rem .55rem; border-radius: .4rem; background: #0b1018; border: 1px solid rgb(var(--wc) / .4); font-family: var(--f-mono); font-size: .72rem; color: var(--c-ink); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s; }
.w-chart__tip.is-on { opacity: 1; }
.w-chart__axis { position: absolute; right: 0; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: space-between; text-align: right; font-family: var(--f-mono); font-size: .68rem; color: var(--c-ink-4); padding: .2rem 0; }

/* heatmap */
.w--heatmap { height: 100%; } .w-heat { display: flex; flex-wrap: wrap; gap: 4px; height: 100%; align-content: stretch; min-height: 13rem; }
.w-heat__t { --a: .3; min-height: 5rem; padding: .55rem .6rem; border-radius: .45rem; display: grid; align-content: space-between; background: rgb(var(--up) / var(--a)); transition: background .6s; min-width: 4.6rem; }
.w-heat__t.neg { background: rgb(var(--neg) / var(--a)); }
.w-heat__t b { font-family: var(--f-mono); font-size: .8rem; color: var(--c-ink); }
.w-heat__t span { font-family: var(--f-mono); font-size: .74rem; color: var(--c-ink-2); }

/* stats */
.w-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1px; background: var(--c-line); border-radius: .7rem; overflow: hidden; }
.w-stat { display: grid; gap: .35rem; padding: 1rem; background: #090d14; }
.w-stat b { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.3rem, 2.2vw, 1.75rem); color: rgb(var(--wc)); letter-spacing: -.02em; }
.w-stat b small { font-size: .55em; font-weight: 500; color: var(--c-ink-3); margin-left: .3rem; }
.w-stat span { font-size: .8rem; color: var(--c-ink-3); }

/* sessions */
.w-sess { --sess-label: 6.5rem; --sess-state: 5.5rem; position: relative; display: grid; gap: .6rem; }
.w-sess__r { display: grid; grid-template-columns: var(--sess-label) 1fr var(--sess-state); align-items: center; }
.w-sess__n { font-size: .9rem; color: var(--c-ink-2); }
.w-sess__track { position: relative; height: .7rem; border-radius: 1rem; background: rgb(var(--rgb-surface) / .8); }
.w-sess__track i { position: absolute; top: 0; bottom: 0; border-radius: 1rem; background: rgb(var(--wc) / .3); }
.w-sess__r.is-open .w-sess__track i { background: rgb(var(--wc)); }
.w-sess__s { text-align: right; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .08em; color: var(--c-ink-4); }
.w-sess__r.is-open .w-sess__s { color: rgb(var(--wc)); }
.w-sess__scale { display: flex; justify-content: space-between; margin-left: var(--sess-label); margin-right: var(--sess-state); font-family: var(--f-mono); font-size: .66rem; color: var(--c-ink-4); }
.w-sess__now { position: absolute; top: -.4rem; bottom: 1.3rem; width: 1px; background: var(--c-ink); }
.w-sess__now::after { content: attr(data-t); position: absolute; top: -1.2rem; left: 50%; transform: translateX(-50%); font-family: var(--f-mono); font-size: .66rem; color: var(--c-ink); white-space: nowrap; }
@media (max-width: 40rem) { .w-sess { --sess-label: 4.6rem; --sess-state: 4.4rem; } .w-sess__n { font-size: .8rem; } .w-sess__scale span:nth-child(2), .w-sess__scale span:nth-child(4) { visibility: hidden; } }

/* curve */
.w-curve { width: 100%; height: auto; display: block; }
.w-pt { fill: rgb(var(--wc)); }
.w-tick { fill: var(--c-ink-4); font-family: var(--f-mono); font-size: 11px; }
.w-val { fill: var(--c-ink-2); font-family: var(--f-mono); font-size: 10px; }
.w-legend { display: flex; gap: 1.25rem; font-size: .76rem; color: var(--c-ink-3); }
.w-legend i { display: inline-block; width: 1rem; height: 2px; margin-right: .4rem; vertical-align: middle; background: rgb(var(--wc)); }
.w-legend .ghost i { background: rgb(var(--wc) / .35); }

/* bars */
.w-bars { display: grid; gap: .7rem; }
.w-bar { display: grid; grid-template-columns: minmax(6rem, 10rem) 1fr 3.6rem; align-items: center; gap: .8rem; font-size: .85rem; color: var(--c-ink-2); }
.w-bar div { height: .55rem; border-radius: 1rem; background: rgb(var(--rgb-surface) / .8); overflow: hidden; }
.w-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: rgb(var(--wc)); transition: width 1.1s var(--ease-out); }
.w-bars.is-in .w-bar i { width: var(--w); }
.w-bar.neg i { background: rgb(var(--neg)); }
.w-bar b { text-align: right; font-family: var(--f-mono); font-weight: 500; font-size: .8rem; color: var(--c-ink); }

/* order book */
.w-book { display: grid; gap: 2px; font-family: var(--f-mono); font-size: .78rem; }
.w-book__h, .w-book__r { display: flex; justify-content: space-between; padding: .28rem .6rem; }
.w-book__h { color: var(--c-ink-4); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.w-book__r { position: relative; color: var(--c-ink-2); }
.w-book__r::before { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: var(--d); border-radius: .25rem; transition: width .5s; }
.w-book__r.ask::before { background: rgb(var(--neg) / .16); } .w-book__r.bid::before { background: rgb(var(--up) / .16); }
.w-book__r.ask span:first-child { color: rgb(var(--neg)); } .w-book__r.bid span:first-child { color: rgb(var(--up)); }
.w-book__r span { position: relative; }
.w-book__mid { display: flex; justify-content: space-between; align-items: baseline; padding: .55rem .6rem; border-block: 1px solid var(--c-line); }
.w-book__mid b { font-size: 1.05rem; color: var(--c-ink); } .w-book__mid span { color: var(--c-ink-4); font-size: .7rem; }

/* gauge */
.w--gauge { display: grid; justify-items: center; }
.w-gauge { width: min(100%, 15rem); height: auto; }
.w-gauge__bg, .w-gauge__fg { fill: none; stroke-width: 12; stroke-linecap: round; }
.w-gauge__bg { stroke: rgb(var(--neg) / .35); } .w-gauge__fg { stroke: rgb(var(--up)); transition: stroke-dasharray .9s var(--ease-out); }
.w-gauge__n { stroke: var(--c-ink); stroke-width: 2; transition: transform .9s var(--ease-out); }
.w-gauge__lbl { display: flex; justify-content: space-between; align-items: baseline; width: min(100%, 15rem); font-size: .74rem; color: var(--c-ink-3); }
.w-gauge__lbl b { font-family: var(--f-display); font-size: 1.4rem; color: var(--c-ink); }
.w-gauge__cap { font-size: .8rem; color: var(--c-ink-4); text-align: center; margin-top: .3rem; }
.wbox:has(> .w--heatmap) { grid-template-rows: auto 1fr; align-content: stretch; } .wbox:has(> .w--heatmap) > .w--heatmap { min-height: 13rem; } .w-heat__t { flex-grow: var(--g, 1); }