/* ============================================================
   Yes Crypto — Design System (dark, data-first)
   ============================================================ */
:root {
  --bg: #0D1117; --bg2: #12161F; --surface: #161B22; --surface2: #1F2530; --surface3: #262D3A; --line: #2A3140;
  --txt: #E6EDF3; --txt2: #9DA5B4; --txt3: #6E7681;
  --pos: #2F9E7B; --neg: #D9534F; --warn: #F59E0B; --accent: #58A6FF; --violet: #A371F7;
  --radius: 14px;
}
* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body { background: radial-gradient(1200px 600px at 10% -10%, rgba(88,166,255,.08), transparent 60%), radial-gradient(900px 500px at 110% 10%, rgba(163,113,247,.07), transparent 60%), var(--bg); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--surface3); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }
.safe-top { padding-top: env(safe-area-inset-top); }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom); }
.mono { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
.tnum { font-variant-numeric: tabular-nums; }

/* glass / surfaces */
.glass { background: rgba(13,17,23,.78); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); }
.card { background: linear-gradient(180deg, rgba(255,255,255,.015), transparent), var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.card-2 { background: var(--surface2); border: 1px solid var(--line); border-radius: var(--radius); }
.card-hover { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.card-hover:hover { transform: translateY(-2px); border-color: #3a4356; box-shadow: 0 10px 30px -12px rgba(0,0,0,.6); }
.inset { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; }

/* logo */
.logo-mark { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-size: 13px;
  background: linear-gradient(135deg, var(--accent), var(--violet)); box-shadow: 0 6px 18px -6px rgba(88,166,255,.7); }

/* nav */
.bnav { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10.5px; font-weight: 600; color: var(--txt3); letter-spacing: .02em; transition: color .15s; position: relative; }
.bnav i { font-size: 18px; }
.bnav.active { color: var(--accent); }
.bnav.active::before { content: ''; position: absolute; top: 0; width: 28px; height: 2px; border-radius: 2px; background: var(--accent); }
.dnav { display: inline-flex; align-items: center; gap: 7px; padding: 11px 13px; color: var(--txt2); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; }
.dnav i { font-size: 12px; opacity: .8; }
.dnav:hover { color: var(--txt); }
.dnav.active { color: var(--txt); border-color: var(--accent); }
.icon-btn { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--txt2); background: var(--surface); border: 1px solid var(--line); transition: all .15s; }
.icon-btn:hover { color: var(--txt); background: var(--surface2); }
.badge-dot { position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--neg); box-shadow: 0 0 0 2px var(--bg); }

/* live pill */
.live-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; background: rgba(47,158,123,.12); color: var(--pos); border: 1px solid rgba(47,158,123,.3); }
.live-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pos); box-shadow: 0 0 0 0 rgba(47,158,123,.6); animation: pulse 1.8s infinite; }
.live-pill.off { background: rgba(217,83,79,.12); color: var(--neg); border-color: rgba(217,83,79,.3); }
.live-pill.off .dot { background: var(--neg); animation: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(47,158,123,.6);} 70% { box-shadow: 0 0 0 7px rgba(47,158,123,0);} 100% { box-shadow: 0 0 0 0 rgba(47,158,123,0);} }

/* ticker strip */
.ticker-track { display: flex; gap: 28px; white-space: nowrap; animation: marquee 60s linear infinite; }
.ticker-track:hover { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0);} to { transform: translateX(-50%);} }
.tick { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--txt2); }
.tick b { color: var(--txt); font-weight: 600; }

/* badges */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 7px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border: 1px solid transparent; white-space: nowrap; }
.badge-pos { background: rgba(47,158,123,.14); color: #4fd3a8; border-color: rgba(47,158,123,.3); }
.badge-neg { background: rgba(217,83,79,.14); color: #ff7b76; border-color: rgba(217,83,79,.3); }
.badge-warn { background: rgba(245,158,11,.14); color: #ffbd45; border-color: rgba(245,158,11,.3); }
.badge-muted { background: var(--surface2); color: var(--txt2); border-color: var(--line); }
.badge-accent { background: rgba(88,166,255,.14); color: #8cc4ff; border-color: rgba(88,166,255,.3); }
.badge-violet { background: rgba(163,113,247,.14); color: #c3a2ff; border-color: rgba(163,113,247,.3); }
.badge-critical { background: linear-gradient(135deg, rgba(217,83,79,.3), rgba(245,158,11,.25)); color: #fff; border-color: rgba(217,83,79,.5); animation: glow 2s infinite; }
@keyframes glow { 0%,100% { box-shadow: 0 0 0 0 rgba(217,83,79,0);} 50% { box-shadow: 0 0 14px 0 rgba(217,83,79,.45);} }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--surface2); color: var(--txt2); border: 1px solid var(--line); }
.chip img { width: 14px; height: 14px; border-radius: 50%; }

/* probability bars */
.prob-bar { height: 8px; border-radius: 999px; background: var(--surface3); overflow: hidden; position: relative; }
.prob-bar > span { display: block; height: 100%; border-radius: 999px; transition: width .8s cubic-bezier(.2,.8,.2,1); }
.prob-bar.pump > span { background: linear-gradient(90deg, #1f7a5e, #4fd3a8); }
.prob-bar.dump > span { background: linear-gradient(90deg, #a8403c, #ff7b76); }
.prob-big { font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }

/* gauge */
.gauge { position: relative; width: 120px; height: 120px; }
.gauge svg { transform: rotate(-90deg); }
.gauge circle { fill: none; stroke-width: 10; stroke-linecap: round; }
.gauge .track { stroke: var(--surface3); }
.gauge .val { transition: stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1); }
.gauge .num { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 14px; border-radius: 10px; font-size: 13px; font-weight: 600; border: 1px solid var(--line); background: var(--surface2); color: var(--txt); transition: all .15s; cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--surface3); border-color: #3a4356; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: linear-gradient(135deg, var(--accent), #3b82f6); border-color: transparent; color: #fff; box-shadow: 0 8px 20px -8px rgba(88,166,255,.7); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-pos { background: rgba(47,158,123,.18); border-color: rgba(47,158,123,.4); color: #4fd3a8; }
.btn-neg { background: rgba(217,83,79,.18); border-color: rgba(217,83,79,.4); color: #ff7b76; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--txt2); }
.btn-ghost:hover { background: var(--surface2); color: var(--txt); }
.btn-sm { padding: 6px 10px; font-size: 12px; border-radius: 8px; }
.btn-xs { padding: 4px 8px; font-size: 11px; border-radius: 7px; }

/* inputs */
.input, .select, .textarea { width: 100%; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font-size: 13.5px; color: var(--txt); outline: none; transition: border-color .15s, box-shadow .15s; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(88,166,255,.15); }
.input::placeholder { color: var(--txt3); }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239DA5B4' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
.label { display: block; font-size: 11.5px; font-weight: 600; color: var(--txt2); margin-bottom: 6px; letter-spacing: .02em; text-transform: uppercase; }
.toggle { position: relative; width: 42px; height: 24px; border-radius: 999px; background: var(--surface3); border: 1px solid var(--line); transition: background .2s; cursor: pointer; flex-shrink: 0; }
.toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; }
.toggle.on { background: var(--accent); border-color: var(--accent); }
.toggle.on::after { transform: translateX(18px); }
.range { width: 100%; accent-color: var(--accent); }

/* segmented */
.seg { display: inline-flex; padding: 3px; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; gap: 2px; }
.seg button { padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--txt2); transition: all .15s; white-space: nowrap; }
.seg button.active { background: var(--surface2); color: var(--txt); box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.filter-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.filter-row::-webkit-scrollbar { display: none; }
.pill-btn { padding: 7px 13px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--txt2); background: var(--surface); border: 1px solid var(--line); white-space: nowrap; transition: all .15s; }
.pill-btn.active { background: var(--txt); color: var(--bg); border-color: var(--txt); }

/* section titles */
.sec-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sec-title h2 { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--txt2); display: flex; align-items: center; gap: 8px; }
.sec-title h2 i { color: var(--accent); font-size: 12px; }

/* stat */
.stat { padding: 12px 14px; }
.stat .k { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--txt3); }
.stat .v { font-size: 20px; font-weight: 800; letter-spacing: -.02em; margin-top: 3px; font-variant-numeric: tabular-nums; }
.stat .s { font-size: 11px; color: var(--txt2); margin-top: 2px; }

/* table */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.tbl th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--txt3); font-weight: 600; padding: 8px 12px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); }
.tbl td { padding: 10px 12px; border-bottom: 1px solid rgba(42,49,64,.6); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr { transition: background .12s; cursor: pointer; }
.tbl tbody tr:hover { background: rgba(255,255,255,.025); }

/* modal / sheet */
.modal { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); display: flex; align-items: flex-start; justify-content: center; padding: 10vh 16px 16px; }
.modal .box { width: 100%; max-width: 560px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px -20px rgba(0,0,0,.8); animation: pop .18s ease; }
@keyframes pop { from { opacity: 0; transform: translateY(-8px) scale(.98);} to { opacity: 1; transform: none;} }
.sheet { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); display: flex; align-items: flex-end; justify-content: center; }
.sheet .box { width: 100%; max-width: 640px; max-height: 92vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 20px 20px 0 0; animation: up .22s cubic-bezier(.2,.8,.2,1); }
@media (min-width: 768px) { .sheet { align-items: center; padding: 16px; } .sheet .box { border-radius: 16px; } }
@keyframes up { from { transform: translateY(40px); opacity: 0;} to { transform: none; opacity: 1;} }
.sheet .handle { width: 40px; height: 4px; border-radius: 4px; background: var(--surface3); margin: 10px auto 0; }

/* toast */
.toast { padding: 11px 14px; border-radius: 12px; background: var(--surface2); border: 1px solid var(--line); font-size: 13px; display: flex; gap: 10px; align-items: center; box-shadow: 0 12px 30px -10px rgba(0,0,0,.7); animation: pop .18s ease; }
.toast.ok { border-color: rgba(47,158,123,.4); } .toast.err { border-color: rgba(217,83,79,.4); }

/* skeleton */
.sk { background: linear-gradient(90deg, var(--surface2) 25%, var(--surface3) 50%, var(--surface2) 75%); background-size: 200% 100%; animation: sk 1.4s infinite; border-radius: 8px; }
@keyframes sk { from { background-position: 200% 0;} to { background-position: -200% 0;} }

/* misc */
.fade-in { animation: fade .3s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px);} to { opacity: 1; transform: none;} }
.flash-up { animation: flashUp .6s ease; } .flash-down { animation: flashDown .6s ease; }
@keyframes flashUp { 0% { color: #4fd3a8; } 100% { color: inherit; } }
@keyframes flashDown { 0% { color: #ff7b76; } 100% { color: inherit; } }
.sparkline { width: 100%; height: 36px; }
.divider { height: 1px; background: var(--line); }
.why li { position: relative; padding-left: 16px; font-size: 13px; color: var(--txt2); line-height: 1.45; }
.why li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.why.neg li::before { background: var(--neg); } .why.pos li::before { background: var(--pos); }
pre.json { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 12px; font-size: 11.5px; line-height: 1.5; overflow-x: auto; color: #c9d1d9; font-family: 'JetBrains Mono', monospace; }
.json .k { color: #79c0ff; } .json .s { color: #a5d6ff; } .json .n { color: #d2a8ff; } .json .b { color: #ffa657; }
.disclaimer { font-size: 11px; color: var(--txt3); text-align: center; padding: 16px 0 4px; }
.depth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; font-size: 11.5px; }
.depth-cell { position: relative; padding: 3px 8px; overflow: hidden; display: flex; justify-content: space-between; }
.depth-cell > span { position: relative; z-index: 1; }
.depth-cell .fill { position: absolute; top: 0; bottom: 0; opacity: .18; }
.depth-cell.bid .fill { right: 0; background: var(--pos); } .depth-cell.ask .fill { left: 0; background: var(--neg); }
.event-impact-HIGH { border-left: 3px solid var(--neg); } .event-impact-MED { border-left: 3px solid var(--warn); } .event-impact-LOW { border-left: 3px solid var(--txt3); }
.slot { border: 1px dashed rgba(88,166,255,.4); background: rgba(88,166,255,.05); border-radius: 12px; padding: 12px 14px; font-size: 12.5px; color: var(--txt2); }
.slot b { color: #8cc4ff; }
.hero-num { font-size: 42px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.grad-text { background: linear-gradient(135deg, #58A6FF, #A371F7); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tv-chart { height: 320px; border-radius: 12px; overflow: hidden; }
@media (max-width: 640px) { .tv-chart { height: 260px; } .hero-num { font-size: 34px; } }
.heat { border-radius: 10px; padding: 10px; min-height: 76px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; transition: transform .15s; border: 1px solid rgba(255,255,255,.04); }
.heat:hover { transform: scale(1.03); }
.scroll-x { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.scroll-x::-webkit-scrollbar { display: none; }
.scroll-x > * { flex-shrink: 0; }