:root {
  --bg: #0a0d13;
  --surface: #131722;
  --surface-2: #1b2130;
  --border: #232a3a;
  --text: #e8ebf2;
  --muted: #8a93a6;
  --up: #16c784;
  --up-soft: rgba(22, 199, 132, .14);
  --down: #ea3943;
  --gold: #f0b90b;
  --gold-soft: rgba(240, 185, 11, .14);
  --brk: #9b8cff;
  --brk-soft: rgba(155, 140, 255, .16);
  --info: #4aa8ff;
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-border-color: var(--border);
  /* Solo-Leveling "SYSTEM" chrome palette (cyan), used app-wide */
  --sl-cyan: #2fd6ff;
  --sl-dim: #86b9cc;
  --sl-line: rgba(47, 214, 255, .34);
  --sl-glow: 0 0 26px rgba(47, 214, 255, .18);
  --sl-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
body { background: var(--bg); color: var(--text); }
.muted { color: var(--muted) !important; }

/* 3D radar backdrop: sits behind everything; content surfaces paint over it. */
#bg3d { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; opacity: .55; }

/* Bootstrap tooltips themed to the dark UI */
.tooltip { --bs-tooltip-bg: #0d1320; --bs-tooltip-color: var(--text); --bs-tooltip-opacity: 1; --bs-tooltip-max-width: 280px; font-size: 12px; }
.tooltip .tooltip-inner { border: 1px solid var(--border); border-radius: 10px; text-align: left; padding: 8px 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
[data-bs-toggle="tooltip"] { cursor: help; }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
.up { color: var(--up); } .gold { color: var(--gold); } .brk { color: var(--brk); }

/* ------------------------------------------------------------------ navbar */
.cr-nav { background: rgba(13, 17, 26, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.cr-logo { position: relative; font-size: 26px; display: inline-grid; place-items: center; width: 34px; height: 34px; }
.cr-radar { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--up); opacity: 0; animation: ping 2.4s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes ping { 0% { transform: scale(.5); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }
.cr-title { font-weight: 700; font-size: 18px; line-height: 1; }
.cr-sub { color: var(--muted); font-size: 11px; }
.cr-stats { gap: 22px; margin-left: 8px; }
.cr-stat { display: flex; flex-direction: column; line-height: 1.15; }
.cr-stat .v { font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; }
.cr-stat .k { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .5px; }
.cr-conn { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); border: 1px solid var(--border); border-radius: 20px; padding: 3px 10px; }
.cr-conn .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); transition: .3s; }
.cr-conn.live .dot { background: var(--up); box-shadow: 0 0 8px var(--up); }
.cr-conn.dead .dot { background: #ea3943; }
.cr-gear { font-size: 16px; background: var(--surface-2); border: 1px solid var(--border); --bs-btn-padding-y: .2rem; }
.cr-gear:hover { background: var(--surface); }

/* ------------------------------------------------------------------- tabs */
.cr-tabs { display: flex; align-items: center; gap: 8px; padding-top: 12px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.cr-tab { background: transparent; border: none; color: var(--muted); font: inherit; font-weight: 600; font-size: 14px; padding: 8px 14px; border-radius: 10px 10px 0 0; cursor: pointer; position: relative; transition: .15s; }
.cr-tab:hover { color: var(--text); }
.cr-tab.active { color: var(--text); background: var(--surface); }
.cr-tab.active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: var(--up); border-radius: 2px; }
.cr-tab[data-tab="vol"].active::after { background: var(--gold); }
.cr-tab[data-tab="brk"].active::after { background: var(--brk); }
.cr-tab[data-tab="hops"].active::after { background: var(--up); }
.cr-tab[data-tab="fake"].active::after { background: var(--down); }
.cr-tab .ic { margin-right: 4px; }
.cr-tab .cnt { display: inline-block; min-width: 20px; text-align: center; font-size: 12px; background: var(--surface-2); border-radius: 20px; padding: 1px 7px; margin-left: 4px; }

/* ---- controls bar: sort + live filter + clear + settings, under the tabs, right-aligned ---- */
.cr-controls { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding-top: 10px; padding-bottom: 2px; flex-wrap: wrap; }
.cr-controls-r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

/* ---- per-tab inline config (type a value or drag the line; sets your own threshold) ---- */
.tabcfg { display: flex; align-items: center; gap: 8px; margin-right: auto; font-size: 12px; color: var(--muted);
  border: 1px solid var(--glass-border); border-left: 2px solid var(--accent); border-radius: 8px; padding: 3px 10px;
  background: linear-gradient(160deg, var(--glass), var(--glass-2)); }
.tc-lbl { font-weight: 700; color: var(--accent); white-space: nowrap; font-family: var(--ff-num, ui-monospace, monospace); letter-spacing: .3px; }
.tc-num { width: 54px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; color: var(--text);
  font-family: var(--ff-num, ui-monospace, monospace); font-size: 12px; padding: 2px 6px; text-align: right; }
.tc-num:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(47, 214, 255, .22); }
.tc-num::-webkit-outer-spin-button, .tc-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tc-suf { color: var(--muted); margin-left: -4px; }
.tc-line { width: 104px; accent-color: var(--accent); cursor: pointer; }
.tc-hint { font-size: 10px; color: var(--muted); opacity: .7; white-space: nowrap; }
@media (max-width: 820px) { .tc-line, .tc-hint { display: none; } .tabcfg { margin-right: 6px; } }

/* ----------------------------------------------------------------- cards */
main { min-height: 50vh; }
.cr-card { animation: cardIn .35s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.signal { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--up); border-radius: 14px; padding: 14px 16px; height: 100%; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.signal.vol { border-left-color: var(--gold); }
.signal.brk { border-left-color: var(--brk); }

/* ---- Hops / Fake state: bottom status strip + card tint ---- */
.sig-state { display: block; margin-top: 10px; padding: 4px 10px; border-radius: 8px; font-size: 11px; font-weight: 800; letter-spacing: .4px; text-align: center; }
.sig-state.hops { color: var(--up); background: var(--up-soft); border: 1px solid rgba(22, 199, 132, .45); }
.sig-state.fake { color: var(--down); background: rgba(234, 57, 67, .12); border: 1px solid rgba(234, 57, 67, .45); }
.sig-state.retest { color: #2fd6ff; background: rgba(47, 214, 255, .12); border: 1px solid rgba(47, 214, 255, .55); text-shadow: 0 0 8px rgba(47, 214, 255, .5); animation: mkPulse 1.5s ease-in-out infinite; }
.sig-state.run { color: var(--up); background: var(--up-soft); border: 1px solid rgba(22, 199, 132, .6); text-shadow: 0 0 10px rgba(22, 199, 132, .6); }
.signal.hops-card { border-left-color: var(--up); box-shadow: inset 0 0 0 1px rgba(22, 199, 132, .3); }
.signal.fake-card { border-left-color: var(--down); opacity: .8; }
.signal.fake-card:hover { opacity: 1; }
.signal:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.signal.flash { animation: flashUp 1.3s ease-out; }
.signal.vol.flash { animation: flashGold 1.3s ease-out; }
.signal.brk.flash { animation: flashBrk 1.3s ease-out; }
@keyframes flashUp { 0% { box-shadow: 0 0 24px var(--up); background: var(--up-soft); } 100% { box-shadow: none; background: var(--surface); } }
@keyframes flashGold { 0% { box-shadow: 0 0 24px var(--gold); background: var(--gold-soft); } 100% { box-shadow: none; background: var(--surface); } }
@keyframes flashBrk { 0% { box-shadow: 0 0 24px var(--brk); background: var(--brk-soft); } 100% { box-shadow: none; background: var(--surface); } }
.sig-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.sig-badge { font-size: 10.5px; font-weight: 700; letter-spacing: .6px; padding: 3px 8px; border-radius: 6px; background: var(--up-soft); color: var(--up); }
.signal.vol .sig-badge { background: var(--gold-soft); color: var(--gold); }
.signal.brk .sig-badge { background: var(--brk-soft); color: var(--brk); }
.sig-sym { font-size: 19px; font-weight: 700; margin: 6px 0 1px; }
.sig-time { color: var(--muted); font-size: 11px; }
.sig-move { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; margin: 8px 0 4px; line-height: 1; color: var(--up); }
.signal.vol .sig-move { color: var(--gold); }
.signal.brk .sig-move { color: var(--brk); font-size: 22px; }
.sig-move small { font-size: 13px; font-weight: 600; opacity: .8; margin-left: 6px; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; }
.chip { font-size: 11px; padding: 2px 8px; border-radius: 20px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.chip.hot { color: var(--gold); border-color: rgba(240, 185, 11, .4); }
.chip { transition: background .2s, border-color .2s, color .2s; }
.chip.score { font-weight: 700; }
.chip.score.s-hi { color: var(--up); border-color: rgba(22, 199, 132, .5); background: var(--up-soft); animation: scoreGlow 2.6s ease-in-out infinite; }
@keyframes scoreGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(22, 199, 132, 0); } 50% { box-shadow: 0 0 10px 0 rgba(22, 199, 132, .35); } }
.chip.score.s-mid { color: var(--gold); border-color: rgba(240, 185, 11, .5); background: var(--gold-soft); }
.chip.score.s-lo { color: var(--muted); }
.chip.green { color: var(--up); }
.sig-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); }
.sig-price { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; }
.sig-open { font-size: 12px; color: var(--info); text-decoration: none; }
.sig-open:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- banner */
.cr-banner { border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; font-size: 13px; border: 1px solid var(--border); }
.cr-banner.ok { background: var(--surface); color: var(--muted); border-color: var(--border); }
.cr-banner.warn { background: rgba(240, 185, 11, .1); color: #f6c945; border-color: rgba(240, 185, 11, .45); }
.cr-banner code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; font-size: 12px; color: var(--text); }
.cr-banner b { color: var(--text); }

/* ------------------------------------------------------------- empty state */
.cr-empty { text-align: center; padding: 60px 20px; }
.cr-empty h4 { font-weight: 700; margin-top: 18px; }
.cr-empty-radar { position: relative; width: 110px; height: 110px; margin: 0 auto; }
.cr-empty-radar span { position: absolute; inset: 0; border: 2px solid var(--up); border-radius: 50%; opacity: 0; animation: ping 2.6s ease-out infinite; }
.cr-empty-radar span:nth-child(2) { animation-delay: .9s; }
.cr-empty-radar span:nth-child(3) { animation-delay: 1.8s; }
.cr-bull { max-width: 560px; margin: 14px auto 0; font-size: 12.5px; color: var(--muted); background: var(--up-soft); border: 1px solid rgba(22, 199, 132, .3); border-radius: 12px; padding: 10px 14px; }
.cr-bull b { color: var(--text); }

/* ---------------------------------------------------------------- toasts */
.cr-toasts { position: fixed; top: 70px; right: 16px; z-index: 1080; display: flex; flex-direction: column; gap: 10px; max-width: 320px; }
.cr-toast { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--up); border-radius: 12px; padding: 11px 14px; cursor: pointer; overflow: hidden; position: relative; animation: toastIn .3s cubic-bezier(.2, .8, .2, 1) both; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
.cr-toast.vol { border-left-color: var(--gold); }
.cr-toast.brk { border-left-color: var(--brk); }
.cr-toast.out { animation: toastOut .3s ease forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateX(110%); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(110%); } }
.cr-toast .tt { font-weight: 700; font-size: 14px; display: flex; justify-content: space-between; gap: 8px; }
.cr-toast .tt .big { color: var(--up); } .cr-toast.vol .tt .big { color: var(--gold); } .cr-toast.brk .tt .big { color: var(--brk); }
.cr-toast .tb { font-size: 12px; color: var(--muted); margin-top: 2px; }
.cr-toast .bar { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--up); animation: toastBar 6s linear forwards; }
.cr-toast.vol .bar { background: var(--gold); }
.cr-toast.brk .bar { background: var(--brk); }
@keyframes toastBar { from { width: 100%; } to { width: 0; } }

/* ----------------------------------------------------------- coin modal */
.cr-modal { background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: 14px; }
.cr-modal .modal-header { border-bottom: 1px solid var(--border); }
.cr-modal .modal-title { font-weight: 700; }
.coin-loading { color: var(--muted); padding: 24px; text-align: center; }
.coin-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.coin-price { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.coin-badge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--border); text-transform: capitalize; }
.coin-badge.up { color: var(--up); border-color: rgba(22,199,132,.4); }
.coin-badge.down { color: var(--down); border-color: rgba(234,57,67,.4); }
.coin-badge.muted { color: var(--muted); }
.coin-sub { color: var(--muted); font-size: 12px; margin: 8px 0; }
.coin-chart { margin: 8px 0 12px; }
.pchart { width: 100%; height: 110px; display: block; }
.pchart .cg { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 3; }
.pchart .cl { font-size: 11px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.pchart .cl.hi { fill: var(--up); } .pchart .cl.lo { fill: var(--down); }
.pchart .cl.last { fill: var(--text); font-weight: 700; }
.chart-cap { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 2px; }
.chart-cap .up { color: var(--up); } .chart-cap .down { color: var(--down); }
.ema-table { width: 100%; font-size: 13px; border-collapse: collapse; }
.ema-table th { color: var(--muted); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; padding: 4px 6px; border-bottom: 1px solid var(--border); text-align: left; }
.ema-table td { padding: 6px; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.ema-table td.r, .ema-table th.r { text-align: right; }
.ema-table .up { color: var(--up); } .ema-table .down { color: var(--down); }
.coin-links { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

/* --------------------------------------------------------------- settings */
.cr-panel { background: var(--surface); border-left: 1px solid var(--border); width: 370px; }
.cr-sec { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); margin: 18px 0 10px; padding-bottom: 5px; border-bottom: 1px solid var(--border); }
.cr-sec .ic { margin-right: 4px; }
.cr-sec .cr-en { margin-left: auto; min-height: 0; margin-bottom: 0; padding-left: 2.2em; }
.cr-en { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); text-transform: none; letter-spacing: 0; font-weight: 400; }
.cr-group { margin-bottom: 16px; }
.cr-matrix { width: 100%; font-size: 13px; border-collapse: collapse; }
.cr-matrix th { color: var(--muted); font-weight: 500; font-size: 15px; text-align: center; padding: 2px 4px; }
.cr-matrix th:first-child { text-align: left; }
.cr-matrix td { padding: 6px 4px; text-align: center; border-top: 1px solid var(--border); }
.cr-matrix td:first-child { text-align: left; white-space: nowrap; }
.cr-matrix input { width: 17px; height: 17px; accent-color: var(--up); cursor: pointer; }
.cr-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; display: block; }
.cr-label b { color: var(--gold); }
.cr-hint { font-size: 11px; color: var(--muted); }
.cr-saved { font-size: 11px; color: var(--up); opacity: 0; transition: opacity .2s; margin-left: 6px; }
.cr-saved.show { opacity: 1; }
.cr-panel .btn-group .btn.active { font-weight: 700; }
.form-control, .form-control:focus { background: var(--surface-2); border-color: var(--border); color: var(--text); }

@media (max-width: 575px) { .sig-move { font-size: 26px; } .cr-panel { width: 100%; } .cr-toasts { left: 12px; right: 12px; max-width: none; } }

/* ========================================================================== */
/* ===============  UCA Radar — mission-control theme upgrade  ============== */
/* ========================================================================== */

/* premium tokens (added; existing vars above are untouched) */
:root {
  --accent: #2fd6ff;                 /* mission-control cyan */
  --accent-soft: rgba(47, 214, 255, .14);
  --glass: rgba(19, 23, 34, .72);
  --glass-2: rgba(27, 33, 48, .62);
  --glass-border: rgba(120, 140, 180, .16);
  --glow-up: 0 0 18px rgba(22, 199, 132, .45);
  --glow-gold: 0 0 18px rgba(240, 185, 11, .45);
  --glow-brk: 0 0 18px rgba(155, 140, 255, .45);
  --shadow-2: 0 14px 40px rgba(0, 0, 0, .55);
}

/* full-viewport backdrop, no horizontal scrollbar, hideable */
#bg3d { width: 100%; height: 100%; display: block; opacity: .6; }

/* ---- header / logo lockup ---- */
.cr-logo { filter: drop-shadow(0 0 10px rgba(47, 214, 255, .4)); }
.cr-ring { position: absolute; inset: -4px; border-radius: 50%; background: conic-gradient(from 0deg, var(--accent), transparent 55%, var(--up)); opacity: .35; -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%); mask: radial-gradient(circle, transparent 60%, #000 61%); animation: spin 8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.cr-title { font-weight: 800; letter-spacing: .3px; background: linear-gradient(90deg, var(--text), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cr-tag { font-size: 9px; font-weight: 700; letter-spacing: 1px; color: var(--accent); border: 1px solid var(--glass-border); border-radius: 6px; padding: 1px 5px; margin-left: 6px; vertical-align: middle; }

/* ---- glass surfaces (override backgrounds only) ---- */
.cr-nav { background: linear-gradient(180deg, rgba(13, 17, 26, .96), rgba(13, 17, 26, .82)); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--glass-border); }
/* glass gradient WITHOUT backdrop-filter: keeps the look but renders the big move
   number perfectly crisp (filtered layers soften text) and is lighter at 80 cards. */
.signal { background: linear-gradient(160deg, var(--glass), var(--glass-2)); border-color: var(--glass-border); border-left-color: var(--up); }
.signal.vol { border-left-color: var(--gold); }
.signal.brk { border-left-color: var(--brk); }
.cr-toast, .cr-modal, .cr-panel { background: linear-gradient(160deg, var(--glass), var(--glass-2)); backdrop-filter: blur(10px); }
.cr-toast, .cr-modal { box-shadow: var(--shadow-2); }

/* flash keyframes resettle to the glass tint (not flat surface) */
@keyframes flashUp { 0% { box-shadow: 0 0 24px var(--up); background: var(--up-soft); } 100% { box-shadow: none; background: var(--glass); } }
@keyframes flashGold { 0% { box-shadow: 0 0 24px var(--gold); background: var(--gold-soft); } 100% { box-shadow: none; background: var(--glass); } }
@keyframes flashBrk { 0% { box-shadow: 0 0 24px var(--brk); background: var(--brk-soft); } 100% { box-shadow: none; background: var(--glass); } }

/* ---- compact card + score ring header ---- */
.signal { padding: 12px 14px; }
.sig-top { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 10px; }
.sig-id { min-width: 0; }
.sig-sym { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sig-move { font-size: 23px; margin: 6px 0 2px; }
.signal.brk .sig-move { font-size: 19px; }
.chips { margin: 9px 0 2px; }
.sig-foot { margin-top: 8px; padding-top: 7px; }

/* whole-card confidence tint by Scalp-Score band (subtle top glow) */
.signal.s-hi { box-shadow: inset 0 22px 38px -30px var(--up); }
.signal.s-mid { box-shadow: inset 0 22px 38px -30px var(--gold); }
/* hover wins over the band tint (declared AFTER it) */
.signal:hover { box-shadow: var(--shadow-2), var(--glow-up); }
.signal.vol:hover { box-shadow: var(--shadow-2), var(--glow-gold); }
.signal.brk:hover { box-shadow: var(--shadow-2), var(--glow-brk); }
.signal:hover .sig-ring-wrap { transform: scale(1.05); transition: transform .15s; }

/* score ring: pure-CSS conic gradient; number lives in an unmasked layer */
@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }
.sig-ring-wrap { --c: var(--muted); position: relative; width: 44px; height: 44px; flex: 0 0 auto; }
.sig-ring-wrap.s-hi { --c: var(--up); }
.sig-ring-wrap.s-mid { --c: var(--gold); }
.sig-ring-wrap.s-lo { --c: var(--muted); }
.sig-ring-wrap.warm { opacity: .6; }
.sig-ring-wrap .sig-ring { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--surface-2) 0);
  -webkit-mask: radial-gradient(closest-side, transparent 67%, #000 68%);
          mask: radial-gradient(closest-side, transparent 67%, #000 68%);
  animation: ringSweep .6s ease-out both; }
.sig-ring-wrap .sig-ring-v { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: var(--c); font-variant-numeric: tabular-nums; }
@keyframes ringSweep { from { --p: 0; } }

/* ---- continuation / fresh-window chips ---- */
.chip.pop { color: var(--up); border-color: rgba(22, 199, 132, .5); background: var(--up-soft); font-weight: 700; }
.chip.run { color: var(--gold); border-color: rgba(240, 185, 11, .4); }
.chip.ext { color: var(--down); border-color: rgba(234, 57, 67, .35); }
.chip.post { color: var(--info); border-color: rgba(74, 168, 255, .45); }

/* ---- 24h-reset countdown widget ---- */
.cr-reset { color: var(--muted); font-size: 12px; border: 1px solid var(--border); border-radius: 20px; padding: 2px 10px; white-space: nowrap; transition: color .3s, border-color .3s, background .3s; }
.cr-reset b { color: var(--text); font-variant-numeric: tabular-nums; }
.cr-reset.fresh { color: var(--up); border-color: rgba(22, 199, 132, .5); background: var(--up-soft); }
body.fresh-window .cr-tabs { box-shadow: inset 0 -2px 0 var(--up); }
.cr-strategy { max-width: 600px; margin: 10px auto 0; font-size: 12.5px; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; }
.cr-strategy b { color: var(--text); }

/* ---- interactive price-chart hover crosshair ---- */
.pchart .ph-cross { transition: opacity .12s ease; pointer-events: none; }
.pchart .ph-vline { stroke: var(--info); stroke-width: 1; stroke-dasharray: 2 3; opacity: .6; transition: x1 .08s linear, x2 .08s linear; }
.pchart .ph-dot { fill: var(--info); transition: cx .08s linear, cy .08s linear; }
.pchart .ph-lbl { font-size: 11px; font-weight: 700; fill: var(--text); font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--bg); stroke-width: 3px; transition: x .08s linear, y .08s linear; }
@media (prefers-reduced-motion: reduce) { .pchart .ph-vline, .pchart .ph-dot, .pchart .ph-lbl, .sig-ring-wrap .sig-ring { transition: none; animation: none; } }

/* ---- display prefs ---- */
.cr-anim-off *, .cr-anim-off *::before, .cr-anim-off *::after { animation: none !important; transition: none !important; }
.cr-compact .signal { padding: 9px 12px; border-radius: 11px; }
.cr-compact .sig-move { font-size: 20px; margin: 4px 0 2px; }
.cr-compact .sig-sym { font-size: 15px; }
.cr-compact .sig-ring-wrap { width: 38px; height: 38px; }
.cr-compact .chips { margin: 7px 0 1px; }
.cr-compact .sig-foot { margin-top: 6px; padding-top: 5px; }
.form-control-color { width: 40px; padding: 2px; background: var(--surface-2); border-color: var(--border); }

/* stronger entrance for brand-new coins (first pop / fresh window) */
.signal.firstpop { animation: firstPop 1.6s cubic-bezier(.2, .8, .2, 1); }
@keyframes firstPop { 0% { box-shadow: 0 0 0 2px var(--up), 0 0 34px var(--up); background: var(--up-soft); transform: scale(1.015); } 100% { box-shadow: none; background: var(--glass); transform: none; } }
.signal.vol.firstpop { animation-name: firstPopGold; }
.signal.brk.firstpop { animation-name: firstPopBrk; }
@keyframes firstPopGold { 0% { box-shadow: 0 0 0 2px var(--gold), 0 0 34px var(--gold); background: var(--gold-soft); transform: scale(1.015); } 100% { box-shadow: none; background: var(--glass); transform: none; } }
@keyframes firstPopBrk { 0% { box-shadow: 0 0 0 2px var(--brk), 0 0 34px var(--brk); background: var(--brk-soft); transform: scale(1.015); } 100% { box-shadow: none; background: var(--glass); transform: none; } }

/* tab cross-fade */
.cr-pane.pane-in { animation: paneIn .22s ease both; }
@keyframes paneIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ========================================================================== */
/* =================  Pre-Jump radar + market-regime read  ================= */
/* ========================================================================== */

/* Pre-Jump cards + tab use the cyan accent (distinct from green/gold/purple) */
.cr-tab[data-tab="pre"].active::after { background: var(--accent); }
.signal.pre { border-left-color: var(--accent); }
.signal.pre .sig-badge { background: var(--accent-soft); color: var(--accent); }
.signal.pre .sig-move { color: var(--accent); font-size: 26px; }
.signal.pre:hover { box-shadow: var(--shadow-2), 0 0 18px rgba(47, 214, 255, .4); }
.signal.pre.firstpop { animation-name: firstPopPre; }
@keyframes firstPopPre { 0% { box-shadow: 0 0 0 2px var(--accent), 0 0 34px var(--accent); background: var(--accent-soft); transform: scale(1.015); } 100% { box-shadow: none; background: var(--glass); transform: none; } }
.sig-reason { font-size: 11.5px; margin: 6px 0 0; min-height: 0; }

/* Market-regime pill in the navbar */
.cr-market { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; border-radius: 20px; padding: 3px 11px; cursor: pointer; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); transition: .25s; }
.cr-market .mk-ico { font-weight: 800; }
.cr-market.good { color: var(--up); border-color: rgba(22, 199, 132, .5); background: var(--up-soft); }
.cr-market.bad { color: var(--down); border-color: rgba(234, 57, 67, .5); background: rgba(234, 57, 67, .12); animation: mkPulse 2.4s ease-in-out infinite; }
.cr-market.mid { color: var(--gold); border-color: rgba(240, 185, 11, .5); background: var(--gold-soft); }
.cr-market.warm { color: var(--muted); }
.cr-market:hover { filter: brightness(1.15); }
@keyframes mkPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(234, 57, 67, 0); } 50% { box-shadow: 0 0 10px 0 rgba(234, 57, 67, .4); } }

/* Market explainer modal */
.mk-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.mk-big { font-size: 19px; font-weight: 800; }
.mk-head.good .mk-big { color: var(--up); } .mk-head.bad .mk-big { color: var(--down); }
.mk-head.mid .mk-big { color: var(--gold); } .mk-head.warm .mk-big { color: var(--muted); }
.mk-score { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mk-score small { font-size: 11px; font-weight: 500; color: var(--muted); }
.mk-bar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: var(--surface-2); margin-bottom: 6px; }
.mk-seg { height: 100%; } .mk-seg.good { background: var(--up); } .mk-seg.mid { background: var(--gold); } .mk-seg.bad { background: var(--down); } .mk-seg.flat { background: var(--muted); }
.mk-counts { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.mk-counts .good { color: var(--up); } .mk-counts .mid { color: var(--gold); } .mk-counts .bad { color: var(--down); }
.mk-why { font-size: 13px; color: var(--text); background: var(--surface-2); border-radius: 10px; padding: 9px 12px; }
.mk-timing { font-size: 12.5px; color: var(--text); background: var(--accent-soft); border: 1px solid rgba(47, 214, 255, .35); border-radius: 10px; padding: 8px 12px; margin-top: 8px; }
.mk-timing b { color: var(--accent); font-variant-numeric: tabular-nums; }
.mk-leader { font-size: 12.5px; color: var(--up); margin: 8px 0 0; }
.mk-ex-title { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 12px 0 6px; }
.mk-ex { display: flex; flex-direction: column; gap: 5px; }
.mk-row { display: grid; grid-template-columns: 1fr auto auto auto auto; gap: 8px; align-items: center; font-size: 12.5px; padding: 5px 9px; border-radius: 8px; background: var(--surface-2); border-left: 3px solid var(--border); animation: mkRowIn .3s ease both; }
@keyframes mkRowIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.mk-row.followed { border-left-color: var(--up); } .mk-row.faded { border-left-color: var(--gold); } .mk-row.dumped { border-left-color: var(--down); } .mk-row.flat { border-left-color: var(--muted); }
.mk-sym { font-weight: 700; }
.mk-out { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.mk-row.followed .mk-out { color: var(--up); } .mk-row.faded .mk-out { color: var(--gold); } .mk-row.dumped .mk-out { color: var(--down); }
.mk-gain { font-variant-numeric: tabular-nums; }
.mk-when { font-family: var(--ff-num, ui-monospace, monospace); font-size: 11px; color: var(--accent); white-space: nowrap; }
.mk-age { color: var(--muted); font-size: 11px; }
/* click a coin row (or the leader line) -> its details */
.mk-row { cursor: pointer; transition: background .12s, transform .12s; }
.mk-row:hover { background: var(--surface); transform: translateX(2px); }
.mk-row.slow { border-left-style: dashed; }
.mk-leader { cursor: pointer; }
.mk-leader:hover { text-decoration: underline; }
/* data-freshness indicator (proves it's live) */
.mk-fresh { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); margin: -2px 0 10px; }
.mk-fresh .mk-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.mk-fresh.live { color: var(--up); } .mk-fresh.live .mk-dot { background: var(--up); box-shadow: 0 0 8px var(--up); }
.mk-fresh.stale { color: var(--gold); } .mk-fresh.stale .mk-dot { background: var(--gold); }
/* slow-grind warning */
.mk-slow { font-size: 12.5px; color: #f6c945; background: rgba(240, 185, 11, .10); border: 1px solid rgba(240, 185, 11, .4); border-radius: 10px; padding: 8px 12px; margin-top: 8px; }
.mk-slow b { color: var(--text); }

/* Seamless backdrop: a soft top glow that FADES TO TRANSPARENT over a solid base
   (no mid-screen seam), tinted by the live market "mood". Fixed so it never bands. */
/* --mood is registered so it INTERPOLATES — the tint fades smoothly between regimes
   (older engines that lack @property just snap to the right colour, which is fine). */
@property --mood { syntax: "<color>"; inherits: true; initial-value: rgba(47, 214, 255, .05); }
:root { --mood: rgba(47, 214, 255, .05); }      /* default: faint cool cyan */
body { background-color: var(--bg); background-image: radial-gradient(120% 80% at 50% -20%, var(--mood), transparent 62%); background-attachment: fixed; transition: --mood .8s ease; }
body.mood-good { --mood: rgba(22, 199, 132, .12); }   /* breaks working -> focused green */
body.mood-bad  { --mood: rgba(234, 57, 67, .13); }    /* fakeout chop  -> warning red */
body.mood-calm { --mood: rgba(74, 168, 255, .08); }   /* slow/warming  -> cold blue */

/* ---- crisp, lively numbers + curated micro-interactions ---- */
.sig-move, .sig-ring-v, .coin-price { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
@keyframes movePop { 0% { transform: scale(1.12); opacity: .55; } 100% { transform: scale(1); opacity: 1; } }
.signal.flash .sig-move, .signal.firstpop .sig-move { animation: movePop .45s cubic-bezier(.2, .8, .2, 1); transform-origin: left center; }
.btn:active, .cr-tab:active, .cr-gear:active, .cr-market:active { transform: translateY(1px); }
.cr-gear { transition: background .15s, transform .1s; }
/* loading shimmer (coin/market modal) */
.coin-loading { position: relative; overflow: hidden; }
.coin-loading::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .06) 50%, transparent 70%); animation: shimmer 1.2s linear infinite; }
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ---- candlestick chart in the coin modal ---- */
.pchart .cw { stroke-width: 1; }
.pchart .cw.cu { stroke: var(--up); } .pchart .cw.cd { stroke: var(--down); }
.pchart .cb.cu { fill: var(--up); } .pchart .cb.cd { fill: var(--down); }
.pchart .lastln { stroke: var(--info); opacity: .4; }
/* the "this candle fired the alert" marker */
.pchart .cmk-line { stroke: var(--accent); stroke-dasharray: 2 2; opacity: .6; }
.pchart .cmk-arrow { fill: var(--accent); font-size: 9px; font-weight: 700; transform-box: fill-box; transform-origin: center; animation: cmkBob 1.1s ease-in-out infinite; }
@keyframes cmkBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(2.5px); } }
/* hover clock under the price */
.pchart .ph-time { font-size: 9.5px; fill: var(--muted); font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--bg); stroke-width: 3px; }

/* ---- per-tab sort bar (left of the filter box) ---- */
.cr-sort { flex: 0 0 auto; }

/* ---- the live FILTER info-box, pinned to the right ---- */
.cr-crit { flex: 0 0 auto; margin-left: 10px; max-width: 42vw; display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 11px 4px 9px; border: 1px solid var(--glass-border); border-left: 2px solid var(--accent);
  border-radius: 8px; background: linear-gradient(160deg, var(--glass), var(--glass-2)); overflow: hidden; position: relative; }
.cr-crit::after { content: ""; position: absolute; top: 4px; right: 4px; width: 5px; height: 5px; border-top: 1px solid var(--accent); border-right: 1px solid var(--accent); opacity: .6; }
.crit-tag { font-size: 8.5px; font-weight: 800; letter-spacing: 1.5px; color: var(--accent); flex: 0 0 auto; }
.crit-val { font-family: var(--ff-num, ui-monospace, monospace); font-size: 11.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-crit.crit-in .crit-val { animation: critIn .35s ease; }
@keyframes critIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

/* ---- Market Breakout Behavior: meta row + scrollable list ---- */
.mk-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: -2px 0 10px; }
.mk-meta .mk-fresh { margin: 0; }
.mk-frame { font-size: 11px; color: var(--muted); white-space: nowrap; }
.mk-frame b { color: var(--accent); font-variant-numeric: tabular-nums; }
.mk-ex { max-height: 40vh; overflow-y: auto; padding-right: 4px; }

/* ==================================================================== *
 *  Solo-Leveling "SYSTEM" theme — scoped to the Market Behavior panel.  *
 *  Dark, electric-cyan glow, sharp edges, corner brackets, monospace,   *
 *  extra breathing room. The Prediction Journal (shared .mk-*) keeps     *
 *  its normal look because every rule here is scoped to #market-*.       *
 * ==================================================================== */
#market-modal {
  --sl-cyan: #2fd6ff;
  --sl-dim: #86b9cc;
  --sl-line: rgba(47, 214, 255, .38);
  --sl-glow: 0 0 26px rgba(47, 214, 255, .20);
  --sl-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Menlo, Consolas, monospace;
}
#market-modal .modal-dialog { max-width: 560px; }
#market-modal .cr-modal {
  background:
    linear-gradient(160deg, rgba(8, 14, 24, .97), rgba(12, 20, 34, .9)),
    repeating-linear-gradient(0deg, rgba(47, 214, 255, .035) 0 1px, transparent 1px 3px);
  border: 1px solid var(--sl-line);
  border-radius: 2px;
  box-shadow: var(--sl-glow), 0 26px 64px rgba(0, 0, 0, .65), inset 0 0 60px rgba(47, 214, 255, .04);
}
/* pulsing energy line across the top edge */
#market-modal .cr-modal::before {
  content: ""; position: absolute; left: 8%; right: 8%; top: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--sl-cyan), transparent);
  box-shadow: 0 0 12px var(--sl-cyan); animation: slPulse 3.2s ease-in-out infinite;
}
@keyframes slPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
#market-modal .modal-header {
  border-bottom: 1px solid var(--sl-line);
  background: linear-gradient(180deg, rgba(47, 214, 255, .08), transparent);
}
#market-modal .modal-title {
  font-family: var(--sl-mono); font-size: 14px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--sl-cyan); text-shadow: 0 0 12px rgba(47, 214, 255, .5);
}
#market-modal .modal-title::before { content: "❰ "; opacity: .65; }
#market-modal .modal-title::after  { content: " ❱"; opacity: .65; }

/* L-shaped corner brackets framing the panel body */
#market-body { position: relative; padding: 6px 4px 2px; }
#market-body::before, #market-body::after {
  content: ""; position: absolute; width: 15px; height: 15px; pointer-events: none; opacity: .85;
  filter: drop-shadow(0 0 5px rgba(47, 214, 255, .6));
}
#market-body::before { top: 0; left: -2px; border-top: 2px solid var(--sl-cyan); border-left: 2px solid var(--sl-cyan); }
#market-body::after { bottom: 2px; right: -2px; border-bottom: 2px solid var(--sl-cyan); border-right: 2px solid var(--sl-cyan); }

/* verdict header */
#market-body .mk-head { align-items: center; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px dashed var(--sl-line); }
#market-body .mk-big { font-family: var(--sl-mono); font-size: 19px; letter-spacing: 1px; text-transform: uppercase; text-shadow: 0 0 14px currentColor; }
#market-body .mk-score { font-family: var(--sl-mono); font-size: 25px; color: var(--sl-cyan); text-shadow: 0 0 16px rgba(47, 214, 255, .45); }
#market-body .mk-score small { color: var(--sl-dim); letter-spacing: .4px; }

/* status / countdown meta */
#market-body .mk-meta { margin-bottom: 14px; }
#market-body .mk-frame { font-family: var(--sl-mono); letter-spacing: .3px; }
#market-body .mk-frame b { color: var(--sl-cyan); text-shadow: 0 0 8px rgba(47, 214, 255, .4); }

/* follow-through bar — sharp, framed, glowing segments */
#market-body .mk-bar { height: 14px; border-radius: 0; border: 1px solid var(--sl-line); background: rgba(0, 0, 0, .45); padding: 1px; gap: 1px; box-shadow: inset 0 0 12px rgba(0, 0, 0, .6); margin-bottom: 8px; }
#market-body .mk-seg { box-shadow: 0 0 10px currentColor; }
#market-body .mk-seg.good { background: var(--up); color: var(--up); }
#market-body .mk-seg.mid  { background: var(--gold); color: var(--gold); }
#market-body .mk-seg.bad  { background: var(--down); color: var(--down); }
#market-body .mk-seg.flat { background: var(--muted); color: var(--muted); }
#market-body .mk-counts { font-family: var(--sl-mono); letter-spacing: .3px; margin-bottom: 16px; }

/* note panels — square, cyan rail + inner glow */
#market-body .mk-why, #market-body .mk-timing, #market-body .mk-slow {
  border-radius: 0; border: 1px solid var(--sl-line); border-left: 2px solid var(--sl-cyan);
  background: rgba(12, 20, 34, .75); box-shadow: inset 4px 0 14px -8px var(--sl-cyan); padding: 11px 14px; margin-top: 10px;
}
#market-body .mk-timing b { color: var(--sl-cyan); }

/* recent-breakout list */
#market-body .mk-ex-title { font-family: var(--sl-mono); color: var(--sl-dim); letter-spacing: 1.6px; border-bottom: 1px solid rgba(47, 214, 255, .16); padding-bottom: 5px; margin: 16px 0 8px; }
#market-body .mk-ex { max-height: 42vh; gap: 6px; }
#market-body .mk-leader { font-family: var(--sl-mono); border: 1px solid var(--sl-line); border-radius: 0; padding: 8px 12px; background: rgba(47, 214, 255, .06); box-shadow: var(--sl-glow); }
#market-body .mk-row { border-radius: 0; background: rgba(13, 22, 36, .6); border-left-width: 2px; padding: 7px 11px; font-family: var(--sl-mono); letter-spacing: .2px; }
#market-body .mk-row:hover { background: rgba(47, 214, 255, .09); box-shadow: -3px 0 14px -5px var(--sl-cyan); transform: translateX(3px); }
#market-body .mk-when { color: var(--sl-cyan); }
#market-body .cr-hint { font-family: var(--sl-mono); font-size: 10.5px; letter-spacing: .2px; color: var(--sl-dim); opacity: .8; margin-top: 14px; }

/* ==================================================================== *
 *  Solo-Leveling "SYSTEM" theme — extended app-wide: every modal, the   *
 *  Prediction Journal, the Settings panel, the tabs and the toasts.     *
 *  Data colours (green up / red down / gold vol / purple brk) keep      *
 *  their meaning; the CHROME takes the electric-cyan system identity.    *
 * ==================================================================== */

/* -- every modal: sharp cyan frame + pulsing top energy line + system header -- */
.cr-modal { border-radius: 3px; border: 1px solid var(--sl-line); box-shadow: var(--sl-glow), 0 26px 64px rgba(0, 0, 0, .62); }
.cr-modal::before { content: ""; position: absolute; left: 9%; right: 9%; top: 0; height: 2px; pointer-events: none; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--sl-cyan), transparent); box-shadow: 0 0 12px var(--sl-cyan); animation: slPulse 3.2s ease-in-out infinite; }
.cr-modal .modal-header { border-bottom: 1px solid var(--sl-line); background: linear-gradient(180deg, rgba(47, 214, 255, .07), transparent); }
.cr-modal .modal-title { font-family: var(--sl-mono); letter-spacing: .4px; color: var(--sl-cyan); text-shadow: 0 0 10px rgba(47, 214, 255, .4); }

/* -- Prediction Journal: mirror the market panel's system look -- */
#predict-body .mk-head { align-items: center; margin-bottom: 14px; padding-bottom: 11px; border-bottom: 1px dashed var(--sl-line); }
#predict-body .mk-big { font-family: var(--sl-mono); font-size: 18px; letter-spacing: 1px; text-transform: uppercase; text-shadow: 0 0 14px currentColor; }
#predict-body .mk-score { font-family: var(--sl-mono); font-size: 23px; color: var(--sl-cyan); text-shadow: 0 0 16px rgba(47, 214, 255, .45); }
#predict-body .mk-score small { color: var(--sl-dim); }
#predict-body .mk-bar { height: 14px; border-radius: 0; border: 1px solid var(--sl-line); background: rgba(0, 0, 0, .45); padding: 1px; gap: 1px; }
#predict-body .mk-seg { box-shadow: 0 0 10px currentColor; }
#predict-body .mk-seg.good { color: var(--up); } #predict-body .mk-seg.bad { color: var(--down); }
#predict-body .mk-counts { font-family: var(--sl-mono); letter-spacing: .3px; }
#predict-body .mk-ex-title { font-family: var(--sl-mono); color: var(--sl-dim); letter-spacing: 1.6px; border-bottom: 1px solid rgba(47, 214, 255, .16); padding-bottom: 5px; margin: 16px 0 8px; }
#predict-body .mk-row { border-radius: 0; background: rgba(13, 22, 36, .6); border-left-width: 2px; padding: 7px 11px; font-family: var(--sl-mono); letter-spacing: .2px; }
#predict-body .mk-row:hover { background: rgba(47, 214, 255, .09); box-shadow: -3px 0 14px -5px var(--sl-cyan); transform: translateX(3px); }
#predict-modal .pj-top { border-radius: 0; background: rgba(13, 22, 36, .6); border-left: 2px solid var(--up); font-family: var(--sl-mono); }
#predict-modal .pj-pred { color: var(--sl-cyan); }
#predict-modal .pj-adapt { border-radius: 0; border-left: 2px solid var(--sl-cyan); background: rgba(12, 20, 34, .75); box-shadow: inset 4px 0 14px -8px var(--sl-cyan); }
#predict-modal .pj-manage { border-top: 1px solid var(--sl-line); }
#predict-modal .pj-backup { border-radius: 0; background: rgba(13, 22, 36, .6); }
#predict-modal .pj-bk-name { font-family: var(--sl-mono); }
#predict-modal .cr-hint { font-family: var(--sl-mono); font-size: 10.5px; letter-spacing: .2px; color: var(--sl-dim); opacity: .85; }

/* -- tabs: monospace labels, cyan-tinted count chips, system underline glow -- */
.cr-tabs { border-bottom-color: var(--sl-line); }
.cr-tab { font-family: var(--sl-mono); letter-spacing: .4px; }
.cr-tab.active { text-shadow: 0 0 10px rgba(47, 214, 255, .25); }
.cr-tab .cnt { font-family: var(--sl-mono); border: 1px solid var(--sl-line); background: rgba(47, 214, 255, .08); color: var(--sl-dim); }
.cr-tab.active .cnt { color: var(--sl-cyan); background: rgba(47, 214, 255, .14); }
.cr-tab[data-tab="pct"].active::after { box-shadow: 0 0 9px var(--up); }
.cr-tab[data-tab="vol"].active::after { box-shadow: 0 0 9px var(--gold); }
.cr-tab[data-tab="brk"].active::after { box-shadow: 0 0 9px var(--brk); }
.cr-tab[data-tab="pre"].active::after { box-shadow: 0 0 9px var(--up); }
.cr-tab[data-tab="hops"].active::after { box-shadow: 0 0 9px var(--up); }
.cr-tab[data-tab="fake"].active::after { box-shadow: 0 0 9px var(--down); }

/* -- toasts: sharp cyan-framed system cards (per-kind accent kept) -- */
.cr-toast { border-radius: 2px; border: 1px solid var(--sl-line); border-left: 3px solid var(--sl-cyan);
  background: linear-gradient(160deg, rgba(8, 14, 24, .97), rgba(12, 20, 34, .92)); box-shadow: var(--sl-glow), 0 12px 30px rgba(0, 0, 0, .5); }
.cr-toast .tt { font-family: var(--sl-mono); letter-spacing: .4px; }
.cr-toast .tb { font-family: var(--sl-mono); font-size: 11px; }

/* -- Settings panel: cyan edge + monospace system headers -- */
.cr-panel { border-left: 1px solid var(--sl-line); box-shadow: inset 1px 0 0 rgba(47, 214, 255, .14), -8px 0 40px rgba(0, 0, 0, .5); }
.cr-panel .offcanvas-title { font-family: var(--sl-mono); letter-spacing: 1px; color: var(--sl-cyan); text-shadow: 0 0 10px rgba(47, 214, 255, .35); }
.cr-acc-h { font-family: var(--sl-mono); letter-spacing: .4px; }
.cr-sec { font-family: var(--sl-mono); color: var(--sl-dim); border-bottom-color: var(--sl-line); }

/* ---- on hover the whole card takes its CONFIDENCE colour (green = strong,
   orange = ok, grey = weak) — matching the score ring, not always green.
   Placed last so it wins over the kind-coloured hover glow above. ---- */
.signal { transition: transform .15s, box-shadow .15s, background .2s; }
.signal.s-hi:hover { background: linear-gradient(160deg, var(--up-soft), var(--glass-2)); box-shadow: var(--shadow-2), var(--glow-up); }
.signal.s-mid:hover { background: linear-gradient(160deg, var(--gold-soft), var(--glass-2)); box-shadow: var(--shadow-2), var(--glow-gold); }
.signal.s-lo:hover, .signal.s-na:hover { background: linear-gradient(160deg, rgba(138, 147, 166, .12), var(--glass-2)); box-shadow: var(--shadow-2); }

/* ---- Prediction Journal panel (reuses the .mk-* / .cr-market patterns) ---- */
.pj-tops { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; }
.pj-top { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; font-size: 12px; padding: 4px 9px; border-radius: 8px; background: var(--surface-2); border-left: 3px solid var(--up); }
.pj-setup { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-rate { color: var(--up); font-weight: 800; font-variant-numeric: tabular-nums; }
.pj-n { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.pj-pred { font-family: var(--ff-num, ui-monospace, monospace); font-size: 11px; color: var(--accent); font-variant-numeric: tabular-nums; }

.pj-adapt { font-size: 11px; color: var(--text); background: var(--surface-2); border-left: 3px solid var(--accent); border-radius: 8px; padding: 5px 9px; margin: 6px 0; line-height: 1.5; }

/* ---- manage learning data (backup / download / restore / reset) ---- */
.pj-manage { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--glass-border); }
.pj-dbsize { color: var(--muted); font-size: 11px; font-weight: 500; }
.pj-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 6px; }
.pj-actions .btn { font-size: 12px; }
.pj-backups { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.pj-backup { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; font-size: 11px; padding: 4px 9px; border-radius: 8px; background: var(--surface-2); }
.pj-bk-name { font-family: var(--ff-num, ui-monospace, monospace); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-bk-size { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pj-bk-acts { display: inline-flex; gap: 4px; }
.pj-bk-acts .btn { padding: 1px 7px; font-size: 11px; line-height: 1.4; }

/* ---- card mini candlestick chart (from the alert's compact OHLC array) ---- */
.sig-chart { position: relative; width: 100%; margin: 7px 0 2px; }
.sig-spark { display: block; width: 100%; height: 50px; }
.sig-spark.candles line { stroke-width: 1px; }
.sig-spark.candles .cu { stroke: var(--up, #16c784); fill: var(--up, #16c784); }
.sig-spark.candles .cd { stroke: var(--down, #f6465d); fill: var(--down, #f6465d); }
.signal.vol .sig-spark.candles .cu { stroke: var(--gold, #f0b90b); fill: var(--gold, #f0b90b); }
/* faint reference lines: high (gray, top), low (red, bottom), resistance (gold), current (accent) */
.sig-spark.candles .hl-hi { stroke: var(--muted, #8a93a3); opacity: 0.30; }
.sig-spark.candles .hl-lo { stroke: var(--down, #f6465d); opacity: 0.32; }
.sig-spark.candles .rl { stroke: var(--gold, #f0b90b); opacity: 0.55; }
.sig-spark.candles .cur { stroke: var(--accent, #16c784); opacity: 0.45; }
/* round dot marking where the current price sits on the last candle */
.sig-dot { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--up, #16c784);
  transform: translate(-50%, -50%); box-shadow: 0 0 5px var(--up, #16c784); pointer-events: none; }
.sig-dot.up { background: var(--up, #16c784); box-shadow: 0 0 6px var(--up, #16c784); }
.sig-dot.down { background: var(--down, #f6465d); box-shadow: 0 0 6px var(--down, #f6465d); }
/* faint price tags pinned to the right gutter — high (top), low (bottom), R = resistance */
.sig-hl { position: absolute; right: 1px; font-size: 8.5px; line-height: 1.1; font-variant-numeric: tabular-nums;
  color: var(--muted, #8a93a3); pointer-events: none; background: rgba(10, 14, 20, 0.5); padding: 0 2px; border-radius: 2px; }
.sig-hl.hi { top: 0; }
.sig-hl.lo { bottom: 0; color: var(--down, #f6465d); opacity: 0.85; }
.sig-hl.r { transform: translateY(-50%); color: var(--gold, #f0b90b); }
.cr-compact .sig-chart { margin: 4px 0 1px; }
.cr-compact .sig-spark { height: 34px; }

/* hover tooltip on a card's mini candle chart (price + % move at the cursor) */
.hover-label { position: absolute; top: 1px; transform: translateX(-50%); pointer-events: none;
  background: rgba(10, 14, 20, 0.95); color: var(--text); border: 1px solid var(--glass-border);
  padding: 1px 6px; border-radius: 4px; font-size: 9.5px; font-variant-numeric: tabular-nums;
  font-weight: 600; white-space: nowrap; z-index: 5; opacity: 0; transition: opacity 0.1s ease; }

/* ---- per-card seconds-to-close countdown (centre of the foot row) ---- */
.sig-cd { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--muted); font-family: var(--ff-num, ui-monospace, monospace); }

/* ---- interactive detail chart (lightweight-charts) ---- */
.lw-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0 10px; }
.lw-tf { margin: 0; }
.lw-cd { font-size: 12px; font-variant-numeric: tabular-nums; font-family: var(--ff-num, ui-monospace, monospace);
  color: var(--accent); border: 1px solid var(--glass-border); border-radius: 8px; padding: 3px 10px; white-space: nowrap; }
.lw-cd.soon { color: var(--gold); border-color: rgba(240, 185, 11, .5); }
#lwchart { width: 100%; height: 340px; position: relative; }
#lwchart .coin-loading { padding: 130px 0; }

/* ---- collapsible settings groups (accordion) ---- */
.cr-acc { border-top: 1px solid var(--glass-border); }
.cr-acc:first-of-type { border-top: 0; }
.cr-acc-h { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; background: transparent; border: 0; color: var(--text); cursor: pointer;
  font-weight: 700; font-size: 13px; padding: 12px 2px; text-align: left; }
.cr-acc-h:hover { color: var(--accent); }
.cr-acc-chev { transition: transform 0.18s ease; color: var(--muted); font-size: 11px; }
.cr-acc-h[aria-expanded="true"] .cr-acc-chev { transform: rotate(180deg); }
.cr-acc-body { padding-bottom: 6px; }
/* nested "Advanced / More" sub-expander inside a group */
.cr-acc-sub { margin: 2px 0 6px; }
.cr-acc-h2 { display: inline-flex; align-items: center; gap: 5px; background: transparent; border: 0;
  color: var(--muted); cursor: pointer; font-size: 11px; font-weight: 600; padding: 4px 2px; }
.cr-acc-h2:hover { color: var(--accent); }
.cr-acc-h2[aria-expanded="true"] .cr-acc-chev { transform: rotate(180deg); }
.cr-acc-h2 .cr-acc-chev { transition: transform 0.18s ease; }

/* ---- accounts: top-bar control + owner lock + per-user filter chips ---- */
.cr-auth { display: inline-flex; align-items: center; gap: 8px; }
.cr-auth .cr-user { font-weight: 700; color: var(--text); cursor: pointer; font-size: 13px; }
.cr-auth .cr-user:hover { color: var(--accent); }
.cr-owner-badge { margin-left: 2px; font-size: 12px; }
.cr-lock { font-size: 11px; font-weight: 600; color: var(--gold, #f0b90b); margin-left: 6px; }
.cr-fchips { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.cr-fchips .cr-en { margin: 0; }
/* Engine controls disabled for non-owners read as clearly locked. */
.cr-panel input:disabled, .cr-panel button:disabled, .cr-panel .form-range:disabled,
.cr-panel .btn.cr-disabled { opacity: 0.45; cursor: not-allowed; }

/* ---- at-a-glance frame clock in the navbar (4h block + 24h reset) ---- */
.cr-clock { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; color: var(--muted); border: 1px solid var(--glass-border); border-radius: 20px; padding: 3px 12px; white-space: nowrap; background: var(--glass); }
.cr-clock .fc-seg { display: inline-flex; align-items: baseline; gap: 4px; }
.cr-clock .fc-k { font-size: 9px; font-weight: 800; letter-spacing: .5px; color: var(--accent); }
.cr-clock b { font-family: var(--ff-num, ui-monospace, monospace); color: var(--text); font-variant-numeric: tabular-nums; font-weight: 600; }
body.fresh-window .cr-clock { color: var(--up); border-color: rgba(22, 199, 132, .5); }
@media (max-width: 1100px) { .cr-clock { display: none; } }

/* ---- UCAGG easter-egg control + freedom overlay ---- */
.cr-ucagg { text-align: center; color: var(--muted); font-size: 11px; letter-spacing: 3px; cursor: pointer; opacity: .5; margin-top: 14px; user-select: none; transition: opacity .2s, color .2s; }
.cr-ucagg:hover { opacity: 1; color: var(--accent); }
#cr-freedom { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, rgba(47, 214, 255, .12), rgba(8, 10, 16, .94) 70%); backdrop-filter: blur(4px); cursor: pointer; animation: fadeIn .4s ease both; }
#cr-freedom .fr-card { text-align: center; padding: 32px 28px; }
#cr-freedom .fr-bird { font-size: 72px; animation: frFloat 3s ease-in-out infinite; }
#cr-freedom .fr-title { font-size: 34px; font-weight: 800; letter-spacing: 2px; margin-top: 8px; background: linear-gradient(90deg, var(--up), var(--accent), var(--brk)); -webkit-background-clip: text; background-clip: text; color: transparent; animation: frHue 6s linear infinite; }
#cr-freedom .fr-sub { color: var(--text); margin-top: 8px; font-size: 14px; }
#cr-freedom .fr-1998 { font-family: var(--ff-num, ui-monospace, monospace); font-size: 56px; font-weight: 800; color: var(--accent); letter-spacing: 6px; margin-top: 6px; text-shadow: 0 0 24px rgba(47, 214, 255, .6); }
#cr-freedom .fr-hint { color: var(--muted); font-size: 11px; margin-top: 18px; }
@keyframes frFloat { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-14px) rotate(3deg); } }
@keyframes frHue { to { filter: hue-rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* pre toast theme */
.cr-toast.pre { border-left-color: var(--accent); } .cr-toast.pre .tt .big { color: var(--accent); } .cr-toast.pre .bar { background: var(--accent); }

/* smoother modal entrance (the content "pops"; dialog transform stays Bootstrap's) */
.modal.show .cr-modal { animation: modalPop .26s cubic-bezier(.2, .8, .2, 1); }
@keyframes modalPop { from { opacity: .4; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* ---- responsive / phone + tablet ---- */
@media (max-width: 991px) {
  .cr-stats { display: none !important; }   /* nav stats hidden on small (still in /status) */
}
@media (max-width: 767px) {
  .cr-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .cr-tabs::-webkit-scrollbar { display: none; }
  .cr-tab { flex: 0 0 auto; }
  .cr-crit { display: none; }
  .cr-reset { display: none; }            /* the countdown is non-essential on phones */
  .cr-market .mk-label { display: none; } /* keep just the icon to save width */
  .cr-title { font-size: 16px; }
  .sig-move { font-size: 21px; }
}
@media (max-width: 575px) {
  .cr-nav { padding-top: 6px; padding-bottom: 6px; }
  .modal-dialog { margin: 8px; }
}