:root {
  --bg: #04060c;
  --panel: rgba(14, 20, 36, 0.72);
  --line: rgba(160, 185, 255, 0.12);
  --line-strong: rgba(160, 185, 255, 0.22);
  --ink: #eaf0ff;
  --muted: #8d9bbd;
  --gold: #f4c25b;
  --bull: #2de2a0;
  --bear: #ff5d73;
  --neutral: #9aa7c7;
  --radius: 22px;
  --display: "Unbounded", "Segoe UI", system-ui, sans-serif;
  --text: "Manrope", "Segoe UI", system-ui, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --header: 62px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 130px; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); font-family: var(--text); font-size: 16px; line-height: 1.5; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
svg { display: block; max-width: 100%; }

#bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.vignette { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 80% at 50% 0%, transparent 30%, rgba(4, 6, 12, 0.75) 100%), linear-gradient(180deg, rgba(4, 6, 12, 0) 60%, rgba(4, 6, 12, 0.85) 100%); }
.noise { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.07; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.page { position: relative; z-index: 2; }

/* Preloader */
.preloader { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--bg); transition: opacity 0.7s var(--ease), visibility 0.7s; }
.is-ready .preloader { opacity: 0; visibility: hidden; }
.preloader-mark { display: grid; justify-items: center; gap: 18px; }
.preloader-mark svg { width: 74px; height: 74px; }
.preloader-mark .bar { transform-box: fill-box; transform-origin: bottom; animation: bar-rise 1.1s var(--ease) infinite alternate; }
.preloader-mark .bar:nth-child(2) { animation-delay: 0.15s; }
.preloader-mark .bar:nth-child(3) { animation-delay: 0.3s; }
.preloader-word { font-family: var(--display); font-size: 12px; letter-spacing: 0.5em; color: var(--muted); padding-left: 0.5em; }
@keyframes bar-rise { from { transform: scaleY(0.35); } to { transform: scaleY(1); } }

/* Shell */
.wrap { width: min(1180px, 100% - 28px); margin-inline: auto; }
.header { position: sticky; top: 0; z-index: 50; height: var(--header); display: flex; align-items: center; border-bottom: 1px solid transparent; transition: background 0.3s, backdrop-filter 0.3s, border-color 0.3s; }
.header.scrolled { background: rgba(4, 6, 12, 0.78); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-color: var(--line); }
.header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; letter-spacing: 0.14em; font-size: 13px; }
.logo svg { width: 32px; height: 32px; }
.logo b { color: var(--gold); }
.nav { display: none; gap: 30px; font-size: 14px; color: var(--muted); }
.nav a { transition: color 0.25s; }
.nav a:hover { color: var(--ink); }
.header-actions { display: flex; align-items: center; gap: 10px; }

.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; overflow: hidden; min-height: 52px; padding: 0 26px; border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.04); font-weight: 800; font-size: 15px; cursor: pointer; transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s; }
.btn:hover { transform: translateY(-2px); border-color: rgba(244, 194, 91, 0.5); }
.btn:active { transform: scale(0.98); }
.btn-gold { color: #1a1204; border-color: transparent; background: linear-gradient(120deg, #ffe3a3, #f4c25b 45%, #ffb62e); box-shadow: 0 12px 40px -12px rgba(244, 194, 91, 0.7); }
.btn-gold:hover { border-color: transparent; box-shadow: 0 16px 54px -8px rgba(244, 194, 91, 0.95); }
.btn-gold::after { content: ""; position: absolute; inset: 0; transform: translateX(-120%) skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent); transition: transform 0.8s var(--ease); }
.btn-gold:hover::after { transform: translateX(120%) skewX(-20deg); }
.btn-small { min-height: 40px; padding: 0 18px; font-size: 14px; }
.btn-good { color: #04251a; border-color: transparent; background: linear-gradient(120deg, #7bf0c4, var(--bull)); }
.btn-bad { color: #fff; border-color: transparent; background: linear-gradient(120deg, #ff8a9a, var(--bear)); }
.btn[disabled], .btn.is-disabled { opacity: 0.5; pointer-events: none; }
.btn .arrow { transition: transform 0.3s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.full { width: 100%; }

[data-reveal] { opacity: 0; transform: translateY(24px); filter: blur(6px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease), filter 0.8s var(--ease); transition-delay: var(--d, 0s); }
[data-reveal].in { opacity: 1; transform: none; filter: none; }
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; }
.split .w > span { display: inline-block; transform: translateY(105%); transition: transform 1s var(--ease); transition-delay: calc(var(--i) * 70ms + 0.5s); }
.is-ready .split .w > span { transform: none; }
.shimmer { background: linear-gradient(100deg, var(--gold) 20%, #fff2cc 45%, var(--gold) 70%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 5s linear infinite; }
@keyframes shimmer { to { background-position: -220% 0; } }

.glass { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.pad { padding: 20px; }
.tilt { transform-style: preserve-3d; transition: transform 0.25s ease-out; }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bull); box-shadow: 0 0 0 0 rgba(45, 226, 160, 0.7); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(45, 226, 160, 0); } 100% { box-shadow: 0 0 0 0 rgba(45, 226, 160, 0); } }
.tone-strong_bull, .tone-bull { --tone: var(--bull); }
.tone-strong_bear, .tone-bear { --tone: var(--bear); }
.tone-neutral { --tone: var(--neutral); }

/* Landing */
.hero { padding: 56px 0 40px; text-align: center; }
@keyframes spin { to { transform: rotate(360deg); } }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 11px; letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; background: rgba(255, 255, 255, 0.03); }
.hero h1 { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 9.2vw, 68px); line-height: 1.06; letter-spacing: -0.03em; margin: 18px auto 14px; max-width: 14ch; }
.hero .lead { color: var(--muted); font-size: clamp(15px, 2.2vw, 18px); max-width: 480px; margin: 0 auto; }
.hero-actions { display: grid; gap: 12px; margin: 26px auto 0; max-width: 380px; }
.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 30px auto 0; max-width: 420px; }
.stat { padding: 14px 6px; border-radius: 18px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); }
.stat b { display: block; font-family: var(--display); font-size: 22px; }
.stat span { font-size: 12px; color: var(--muted); }

.section { padding: 44px 0; }
.section-head { margin-bottom: 24px; text-align: center; }
.kicker { color: var(--gold); font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; font-weight: 800; }
.section-head h2 { font-family: var(--display); font-size: clamp(22px, 5.6vw, 40px); line-height: 1.14; letter-spacing: -0.02em; margin-top: 12px; }
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.feature { padding: 18px 16px; transition: transform 0.5s var(--ease), border-color 0.4s; }
.feature:hover { transform: translateY(-4px); border-color: rgba(244, 194, 91, 0.4); }
.feature .icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: rgba(244, 194, 91, 0.1); color: var(--gold); margin-bottom: 14px; }
.feature .icon svg { width: 22px; height: 22px; }
.feature h3 { font-family: var(--display); font-size: 14px; line-height: 1.25; margin-bottom: 6px; }
.feature p { color: var(--muted); font-size: 13px; line-height: 1.45; }
.timeline { display: grid; gap: 0; max-width: 560px; margin-inline: auto; }
.tl-item { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding-bottom: 26px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px; background: linear-gradient(var(--gold), rgba(244, 194, 91, 0)); opacity: 0.5; }
.tl-item:last-child::before { display: none; }
.tl-num { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(244, 194, 91, 0.6); background: rgba(244, 194, 91, 0.08); font-family: var(--display); font-size: 15px; color: var(--gold); }
.tl-item h3 { font-family: var(--display); font-size: 15px; margin: 4px 0 6px; }
.tl-item p { color: var(--muted); font-size: 14px; }
.cta { padding: 34px 20px; text-align: center; position: relative; overflow: hidden; }
.cta::before { content: ""; position: absolute; width: 480px; height: 480px; left: 50%; top: -260px; transform: translateX(-50%); background: radial-gradient(circle, rgba(244, 194, 91, 0.26), transparent 65%); pointer-events: none; }
.cta h2 { font-family: var(--display); font-size: clamp(21px, 5vw, 34px); line-height: 1.2; position: relative; }
.cta p { color: var(--muted); margin: 12px auto 22px; max-width: 420px; position: relative; font-size: 15px; }
.cta .btn { position: relative; }
.footer { padding: 28px 0 40px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; text-align: center; }
.footer .risk { max-width: 640px; margin: 12px auto 8px; opacity: 0.8; }

/* Access */
.access-shell { min-height: 100vh; display: grid; place-items: center; padding: 88px 14px 40px; }
.access-card { width: min(440px, 100%); padding: 24px 20px; }
.tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); margin-bottom: 24px; position: relative; }
.tabs button { position: relative; z-index: 1; min-height: 42px; border: 0; background: none; border-radius: 999px; cursor: pointer; color: var(--muted); font-weight: 800; transition: color 0.3s; }
.tabs button.active { color: #1a1204; }
.tabs .thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: linear-gradient(120deg, #ffe3a3, #f4c25b); transition: transform 0.45s var(--ease); }
.tabs[data-active="register"] .thumb { transform: translateX(100%); }
.panel[hidden] { display: none; }
.panel h1 { font-family: var(--display); font-size: 22px; line-height: 1.2; margin-bottom: 10px; }
.panel .sub { color: var(--muted); font-size: 14px; margin-bottom: 20px; }
.field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.field input { width: 100%; height: 58px; padding: 0 18px; border-radius: 16px; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.04); font-family: var(--display); font-size: 20px; letter-spacing: 0.12em; outline: none; transition: border-color 0.3s, box-shadow 0.3s; }
.field input:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(244, 194, 91, 0.14); }
.field input::placeholder { color: rgba(141, 155, 189, 0.45); }
.form-error { min-height: 22px; margin: 10px 0 4px; color: var(--bear); font-size: 14px; }
.form-hint { margin-top: 14px; font-size: 13px; color: var(--muted); text-align: center; }
.reg-steps { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 14px; }
.reg-steps li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; color: var(--muted); font-size: 14px; }
.reg-steps li b { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(244, 194, 91, 0.5); color: var(--gold); font-family: var(--display); font-size: 12px; }
.reg-steps strong { color: var(--ink); }
.status { text-align: center; padding: 6px 0; }
.status .badge-ring { position: relative; width: 92px; height: 92px; margin: 4px auto 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(244, 194, 91, 0.08); border: 1px solid rgba(244, 194, 91, 0.4); }
.status .badge-ring::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 62%, var(--gold)); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); animation: spin 1.6s linear infinite; }
.status .badge-ring svg { width: 38px; height: 38px; color: var(--gold); animation: hourglass 3.2s ease-in-out infinite; }
@keyframes hourglass { 0%, 40% { transform: rotate(0); } 60%, 100% { transform: rotate(180deg); } }
.status.rejected .badge-ring { background: rgba(255, 93, 115, 0.1); border-color: rgba(255, 93, 115, 0.5); }
.status.rejected .badge-ring::before { display: none; }
.status.rejected .badge-ring svg { color: var(--bear); animation: none; }
.status h1 { font-family: var(--display); font-size: 21px; margin-bottom: 10px; }
.status p { color: var(--muted); font-size: 14px; margin-bottom: 8px; }
.status .id-pill { display: inline-block; margin: 8px 0 16px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line-strong); font-family: var(--display); letter-spacing: 0.12em; font-size: 14px; }
.status .actions { display: grid; gap: 10px; margin-top: 14px; }

/* Cabinet */
.id-chip { display: none; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 13px; color: var(--muted); }
.id-chip b { color: var(--ink); font-family: var(--display); letter-spacing: 0.08em; margin-left: 6px; }
.tf-switch { display: grid; grid-template-columns: repeat(5, 1fr); width: 100%; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); }
.tf-switch button { height: 42px; padding: 0 2px; border: 0; border-radius: 999px; background: none; color: var(--muted); font-size: 13px; font-weight: 800; cursor: pointer; transition: background 0.3s, color 0.3s; }
.tf-switch button.active { background: linear-gradient(120deg, #ffe3a3, #f4c25b); color: #1a1204; }
.cab-page { display: grid; gap: 14px; padding: 14px 0 120px; }
.cab { display: grid; gap: 14px; }
.col { display: grid; gap: 14px; align-content: start; }
.card-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.card-title h3 { font-family: var(--display); font-size: 14px; }
.card-title small { color: var(--muted); font-size: 12px; }

.signal { position: relative; overflow: hidden; padding: 20px 16px 18px; }
.signal::before { content: ""; position: absolute; width: 420px; height: 420px; left: 50%; top: -230px; transform: translateX(-50%); background: radial-gradient(circle, color-mix(in srgb, var(--tone, var(--neutral)) 32%, transparent), transparent 68%); transition: background 1s; pointer-events: none; }
.gauge { position: relative; width: 100%; max-width: 300px; margin-inline: auto; }
.gauge svg { width: 100%; height: auto; overflow: visible; }
.gauge .needle { transform-origin: 150px 150px; transform: rotate(var(--angle, 0deg)); transition: transform 1.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.gauge .arc-glow { filter: drop-shadow(0 0 10px var(--glow, rgba(244, 194, 91, 0.5))); }
.verdict { position: relative; text-align: center; margin-top: -6px; }
.verdict h2 { font-family: var(--display); font-size: clamp(19px, 5.4vw, 26px); text-transform: uppercase; color: var(--tone, var(--ink)); text-shadow: 0 0 34px color-mix(in srgb, var(--tone, #fff) 55%, transparent); }
.verdict p { color: var(--muted); margin-top: 6px; font-size: 13px; }
.counts { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }
.count { padding: 12px 6px; border-radius: 16px; text-align: center; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); }
.count b { display: block; font-family: var(--display); font-size: 24px; }
.count span { font-size: 11px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.count.bull b { color: var(--bull); }
.count.bear b { color: var(--bear); }
.refresh { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; font-size: 12px; color: var(--muted); }
.ring { width: 18px; height: 18px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 3; }
.ring .back { stroke: rgba(255, 255, 255, 0.1); }
.ring .front { stroke: var(--gold); stroke-linecap: round; stroke-dasharray: 44; }

.idea-side { display: inline-flex; padding: 6px 14px; border-radius: 999px; font-family: var(--display); font-size: 12px; font-weight: 700; }
.idea-side.buy { background: rgba(45, 226, 160, 0.14); color: var(--bull); }
.idea-side.sell { background: rgba(255, 93, 115, 0.14); color: var(--bear); }
.idea-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.idea-cell { padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); }
.idea-cell span { display: block; font-size: 11px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.idea-cell b { display: block; margin-top: 4px; font-size: 16px; font-variant-numeric: tabular-nums; }
.idea-cell.stop b { color: var(--bear); }
.idea-cell.target b { color: var(--bull); }
.empty-note { color: var(--muted); font-size: 14px; }
.small-print { margin-top: 12px; font-size: 11px; color: var(--muted); opacity: 0.8; line-height: 1.4; }
.mtf { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.mtf button { padding: 10px 2px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); cursor: pointer; text-align: center; transition: transform 0.3s var(--ease), border-color 0.3s; }
.mtf button.active { border-color: var(--gold); }
.mtf b { display: block; font-size: 12px; }
.mtf span { display: block; margin-top: 4px; font-size: 10px; font-weight: 800; color: var(--tone, var(--neutral)); }
.mtf i { display: block; height: 3px; margin: 7px 8px 0; border-radius: 3px; background: var(--tone, var(--neutral)); opacity: 0.85; }

.seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); }
.seg button { height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--muted); font-size: 13px; font-weight: 800; cursor: pointer; white-space: nowrap; transition: background 0.3s, color 0.3s; }
.seg button.active { background: rgba(244, 194, 91, 0.16); color: var(--gold); }
.seg.wide { display: grid; width: 100%; }
.chart-card { padding: 10px; overflow: hidden; }
.chart-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 4px 10px; }
.chart-head small { color: var(--muted); font-size: 12px; }
#tv_chart { height: 440px; border-radius: 14px; overflow: hidden; }
#ta_widget { min-height: 440px; }
.chart-pane[hidden] { display: none; }
.analysis { padding: 16px; }
.pane[hidden] { display: none; }
.group-list { display: grid; gap: 14px; margin-top: 16px; }
.group-row .top { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; margin-bottom: 7px; }
.group-row .top span { color: var(--muted); font-size: 12px; }
.stack { display: flex; height: 8px; border-radius: 8px; overflow: hidden; background: rgba(255, 255, 255, 0.06); }
.stack i { display: block; height: 100%; width: 0; transition: width 1.2s var(--ease); }
.stack .b { background: var(--bull); }
.stack .n { background: #4a5573; }
.stack .r { background: var(--bear); }
.levels { display: grid; gap: 6px; margin-top: 16px; }
.level { display: flex; justify-content: space-between; padding: 11px 14px; border-radius: 14px; font-size: 14px; font-variant-numeric: tabular-nums; background: rgba(255, 255, 255, 0.03); }
.level.r span { color: var(--bear); }
.level.s span { color: var(--bull); }
.level.p { background: rgba(244, 194, 91, 0.1); }
.level.p span { color: var(--gold); }
.level.now { outline: 1px solid var(--gold); background: rgba(244, 194, 91, 0.06); }
.filters { display: flex; gap: 6px; overflow-x: auto; margin: 16px 0 12px; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.chip { flex: none; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--muted); font-size: 13px; font-weight: 800; cursor: pointer; transition: all 0.25s; }
.chip.active { background: var(--gold); border-color: var(--gold); color: #1a1204; }
.search { width: 100%; height: 44px; padding: 0 16px; margin-bottom: 8px; border-radius: 14px; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.04); outline: none; }
.search:focus { border-color: var(--gold); }
#indList { margin-top: 4px; }
.ind-group h4 { position: sticky; top: 0; z-index: 1; margin: 0; padding: 12px 0 8px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); background: #0c1322; }
.ind { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); }
.ind .name { font-size: 14px; font-weight: 700; }
.ind .val { grid-column: 1; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.badge { grid-row: 1 / span 2; grid-column: 2; min-width: 92px; padding: 6px 10px; border-radius: 999px; text-align: center; font-size: 12px; font-weight: 800; }
.badge.bull { color: var(--bull); background: rgba(45, 226, 160, 0.12); }
.badge.bear { color: var(--bear); background: rgba(255, 93, 115, 0.12); }
.badge.neutral { color: var(--neutral); background: rgba(154, 167, 199, 0.12); }
.source-line { margin-top: 14px; font-size: 11px; color: var(--muted); }
.bottom-nav { position: fixed; z-index: 60; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 6px; border-radius: 24px; background: rgba(10, 15, 28, 0.88); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--line-strong); box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.8); }
.bottom-nav a { display: grid; justify-items: center; gap: 2px; padding: 8px 0; border-radius: 18px; font-size: 11px; font-weight: 800; color: var(--muted); transition: background 0.3s, color 0.3s; }
.bottom-nav a svg { width: 20px; height: 20px; }
.bottom-nav a.active { background: rgba(244, 194, 91, 0.12); color: var(--gold); }
.loading { position: relative; overflow: hidden; }
.loading::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.06) 50%, transparent 80%); background-size: 200% 100%; animation: skeleton 1.4s infinite; }
@keyframes skeleton { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Admin */
.admin-wrap { padding: 16px 0 60px; }
.admin-login { min-height: calc(100vh - var(--header)); display: grid; place-items: center; padding: 20px 14px; }
.admin-top { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.admin-top h1 { font-family: var(--display); font-size: clamp(20px, 5vw, 30px); }
.admin-top p { color: var(--muted); font-size: 13px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.stat-card { padding: 14px 16px; position: relative; overflow: hidden; }
.stat-card span { font-size: 12px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.stat-card b { display: block; margin-top: 4px; font-family: var(--display); font-size: 28px; }
.stat-card.warn b { color: var(--gold); }
.stat-card.good b { color: var(--bull); }
.stat-card.danger b { color: var(--bear); }
.stat-card.flash { animation: flash 1.2s var(--ease); }
@keyframes flash { 0% { box-shadow: 0 0 0 0 rgba(244, 194, 91, 0.8); } 100% { box-shadow: 0 0 0 22px rgba(244, 194, 91, 0); } }
.admin-tools { display: grid; gap: 10px; margin-bottom: 14px; }
.add-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.add-row input { height: 46px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.04); outline: none; font-family: var(--display); letter-spacing: 0.1em; }
.add-row input:focus { border-color: var(--gold); }
.req-list { display: grid; gap: 10px; }
.req { padding: 16px; display: grid; gap: 12px; animation: row-in 0.5s var(--ease) both; }
@keyframes row-in { from { opacity: 0; transform: translateY(10px); } }
.req-main { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.req-id { font-family: var(--display); font-size: 20px; letter-spacing: 0.08em; }
.req-meta { color: var(--muted); font-size: 12px; line-height: 1.5; }
.req-status { padding: 5px 12px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.req-status.pending { color: var(--gold); background: rgba(244, 194, 91, 0.14); }
.req-status.approved { color: var(--bull); background: rgba(45, 226, 160, 0.12); }
.req-status.rejected { color: var(--bear); background: rgba(255, 93, 115, 0.12); }
.req-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.req-actions .btn { min-height: 42px; padding: 0 16px; font-size: 13px; flex: 1 1 auto; }
.req.is-new { border-color: rgba(244, 194, 91, 0.55); }

/* Signal desk */
.desk { position: relative; overflow: hidden; padding: 18px 16px 16px; }
.desk::before { content: ""; position: absolute; left: 50%; top: -160px; width: 420px; height: 280px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(244, 194, 91, 0.16), transparent); pointer-events: none; }
.desk > * { position: relative; }
.desk-head .kicker { display: block; margin-bottom: 6px; font-size: 10px; }
.desk-head h2 { font-family: var(--display); font-size: clamp(19px, 5.4vw, 28px); line-height: 1.2; }
.desk-head p { margin-top: 6px; color: var(--muted); font-size: 12.5px; }
.desk-head p b { color: var(--gold); }
.strat-grid { display: block; margin: 0 0 6px; }
.strat-list { display: block; overflow: hidden; border-radius: 16px; background: rgba(255, 255, 255, 0.04); }
.strat { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: 14px; align-items: center; width: 100%; padding: 13px 14px; text-align: left; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; cursor: pointer; transition: background 0.2s; }
.strat:last-child { border-bottom: 0; }
.strat:hover { background: rgba(255, 255, 255, 0.04); }
.strat-check { order: 2; display: block; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid rgba(141, 155, 189, 0.5); transition: background 0.2s, border-color 0.2s; }
.strat-text { order: 1; display: grid; gap: 3px; min-width: 0; }
.strat-text b { font-size: 14.5px; line-height: 1.25; }
.strat-text em { font-style: normal; font-size: 12px; line-height: 1.4; color: var(--muted); }
.strat.active .strat-check { border-color: var(--gold); background: var(--gold) url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%231a1204' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat; }
.desk-step { display: flex; align-items: center; gap: 10px; margin: 20px 0 12px; }
.desk-step b { font-family: var(--display); font-size: 14px; }
.desk-step small { margin-left: auto; font-size: 12px; color: var(--muted); }
.step-no { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; font-family: var(--display); font-size: 12px; color: var(--gold); border: 1px solid rgba(244, 194, 91, 0.5); background: rgba(244, 194, 91, 0.08); }
.tf-hint { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.section-title { margin-top: 10px; }
.section-title h2 { font-family: var(--display); font-size: clamp(18px, 4.6vw, 24px); }
.section-title p { margin-top: 4px; font-size: 13px; color: var(--muted); }
.desk-foot { display: grid; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.desk-foot .tf-hint { margin: 0; }
.desk-foot .btn { width: 100%; }

.pick-card { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; margin-top: 18px; padding: 14px 16px; text-align: left; border-radius: 20px; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.04); cursor: pointer; transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s; }
.pick-card:hover { transform: translateY(-2px); border-color: rgba(244, 194, 91, 0.55); box-shadow: 0 18px 44px -26px rgba(244, 194, 91, 0.8); }
.pick-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; color: var(--gold); background: rgba(244, 194, 91, 0.1); border: 1px solid rgba(244, 194, 91, 0.3); }
.pick-icon svg { width: 22px; height: 22px; }
.pick-text { display: grid; gap: 2px; min-width: 0; }
.pick-text small { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.pick-text b { font-family: var(--display); font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.pick-text em { font-style: normal; font-size: 12px; font-weight: 800; color: var(--gold); }
.pick-action { padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 800; color: #1a1204; background: linear-gradient(120deg, #ffe3a3, #f4c25b); }

/* Indicator picker modal */
.modal-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(2, 4, 10, 0.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.28s var(--ease); }
.modal-backdrop.open { opacity: 1; }
.modal { position: fixed; inset: 0; z-index: 91; display: grid; place-items: center; padding: 12px; pointer-events: none; }
.modal-card { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; width: min(720px, 100%); height: min(720px, calc(100vh - 24px)); height: min(720px, calc(100dvh - 24px)); border-radius: 26px; border: 1px solid var(--line-strong); background: #0b1120; box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.05); pointer-events: auto; opacity: 0; transform: translateY(26px) scale(0.98); transition: opacity 0.28s var(--ease), transform 0.4s var(--ease); }
.modal.open .modal-card { opacity: 1; transform: none; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 20px 14px; border-bottom: 1px solid var(--line); }
.modal-head h2 { font-family: var(--display); font-size: 18px; }
.modal-head p { margin-top: 4px; font-size: 13px; color: var(--muted); }
.modal-body { min-height: 0; padding: 4px 20px 20px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(244, 194, 91, 0.4) transparent; }
.modal-body .tf-hint { min-height: 38px; }
.modal-foot { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; padding: 14px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.modal-foot .btn { min-height: 50px; padding: 0 16px; }
.pick-tools { display: flex; gap: 8px; margin-bottom: 12px; }
body.modal-open, body.drawer-open { overflow: hidden; }

/* Analysis view: the page fades out and the bot "thinks" in the centre of the screen. */
.cab-page > * { transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), filter 0.35s var(--ease); }
.cab-page.leaving > :not(#analyzing) { opacity: 0; transform: translateY(12px) scale(0.985); filter: blur(6px); pointer-events: none; }
.cab-page.focus > :not(#analyzing) { display: none; }
body.thinking .bottom-nav { display: none; }
body.thinking .cab-page { padding-bottom: 14px; }
.analyzing { display: grid; justify-items: center; align-content: center; min-height: calc(100vh - var(--header) - 40px); padding: 24px 0; text-align: center; animation: think-in 0.6s var(--ease) both; }
@keyframes think-in { from { opacity: 0; transform: scale(0.94); } }
.orbit { position: relative; display: grid; place-items: center; width: 150px; height: 150px; margin-bottom: 26px; }
.orbit::before { content: ""; position: absolute; inset: -30px; border-radius: 50%; background: radial-gradient(circle, rgba(244, 194, 91, 0.28), transparent 68%); animation: halo 2.4s ease-in-out infinite; }
.orbit .orbit-rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; shape-rendering: geometricPrecision; }
.orbit .track { stroke: rgba(160, 185, 255, 0.07); stroke-width: 1.5; }
.orbit .arc { stroke-width: 3; stroke-linecap: round; transform-box: fill-box; transform-origin: center; }
.orbit .a1 { stroke: var(--gold); stroke-dasharray: 34 66; animation: spin 1.5s linear infinite; filter: drop-shadow(0 0 5px rgba(244, 194, 91, 0.75)); }
.orbit .a2 { stroke: #5fe3ff; stroke-dasharray: 26 74; animation: spin 2.1s linear infinite reverse; filter: drop-shadow(0 0 5px rgba(95, 227, 255, 0.65)); }
.orbit .a3 { stroke: #a98bff; stroke-dasharray: 20 80; animation: spin 2.9s linear infinite; filter: drop-shadow(0 0 5px rgba(169, 139, 255, 0.65)); }
.orbit .orbit-core { position: relative; width: 38px; height: 38px; }
.orbit .core-bar { transform-box: fill-box; transform-origin: bottom; animation: bar-rise 0.9s var(--ease) infinite alternate; }
.orbit .core-bar:nth-child(2) { animation-delay: 0.15s; }
.orbit .core-bar:nth-child(3) { animation-delay: 0.3s; }
@keyframes halo { 0%, 100% { opacity: 0.5; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.08); } }
.analyzing h3 { font-family: var(--display); font-size: clamp(17px, 4.6vw, 22px); }
.analyzing-sub { margin: 8px 0 18px; max-width: 420px; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.think-progress { width: min(360px, 100%); height: 4px; margin-bottom: 24px; border-radius: 4px; overflow: hidden; background: rgba(255, 255, 255, 0.08); }
.think-progress i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, #f4c25b, #ffe3a3); box-shadow: 0 0 12px rgba(244, 194, 91, 0.8); transition: width 0.6s var(--ease); }
.analyzing.failed h3 { color: var(--bear); }
.analyzing.failed .arc, .analyzing.failed .orbit::before, .analyzing.failed .core-bar { animation: none; }
.analyzing.failed .orbit { filter: hue-rotate(-40deg) saturate(1.2); opacity: 0.6; }
.analyzing.failed .think-progress i { background: var(--bear); box-shadow: none; }
.analyzing #analyzingBack { margin-top: 22px; }
.analyzing ul { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 9px; max-width: 360px; text-align: left; }
.analyzing li { position: relative; padding-left: 28px; font-size: 14px; color: rgba(141, 155, 189, 0.55); transition: color 0.4s; }
.analyzing li::before { content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid rgba(141, 155, 189, 0.4); transition: all 0.4s var(--ease); }
.analyzing li.active { color: var(--ink); }
.analyzing li.active::before { border-color: var(--gold); border-top-color: transparent; animation: spin 0.8s linear infinite; }
.analyzing li.done { color: var(--muted); }
.analyzing li.done::before { border-color: var(--bull); background: var(--bull) url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2304251a' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 10px no-repeat; animation: none; }

.sig-result { display: grid; gap: 14px; animation: row-in 0.6s var(--ease) both; }
.res-card { padding: 16px; }
.res-head { display: grid; gap: 14px; align-items: center; border-left: 3px solid var(--neutral); }
.res-head.buy { border-left-color: var(--bull); box-shadow: 0 30px 80px -40px rgba(45, 226, 160, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.res-head.sell { border-left-color: var(--bear); box-shadow: 0 30px 80px -40px rgba(255, 93, 115, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.res-side { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.side-pill { display: inline-flex; padding: 12px 20px; border-radius: 999px; font-family: var(--display); font-size: 16px; font-weight: 700; letter-spacing: 0.04em; }
.side-pill.buy { color: #04251a; background: linear-gradient(120deg, #7bf0c4, var(--bull)); }
.side-pill.sell { color: #fff; background: linear-gradient(120deg, #ff8a9a, var(--bear)); }
.side-pill.wait { color: var(--ink); background: rgba(154, 167, 199, 0.18); }
.res-info h2 { font-family: var(--display); font-size: 17px; }
.res-info p { margin-top: 4px; color: var(--muted); font-size: 13px; }
.res-wait { color: var(--muted); font-size: 14px; }
.res-conf { display: flex; align-items: center; gap: 12px; }
.res-conf small { max-width: 130px; font-size: 11px; line-height: 1.35; color: var(--muted); }
.conf { --c1: #ffe3a3; --c2: var(--gold); position: relative; width: 88px; height: 88px; flex: none; }
.conf.buy { --c1: #9bf5d3; --c2: var(--bull); }
.conf.sell { --c1: #ffa3b0; --c2: var(--bear); }
.conf::before { content: ""; position: absolute; inset: 15px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c2) 16%, transparent), transparent 72%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); pointer-events: none; }
.conf svg { position: relative; width: 100%; height: 100%; overflow: visible; shape-rendering: geometricPrecision; }
.conf circle, .conf path { fill: none; }
.conf .ticks { stroke: rgba(160, 185, 255, 0.2); stroke-width: 0.9; stroke-linecap: round; }
.conf .track { stroke: rgba(255, 255, 255, 0.07); stroke-width: 7; }
.conf .front { stroke-width: 7; stroke-linecap: round; transition: stroke-dasharray 1.4s var(--ease); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--c2) 60%, transparent)); }
.conf .knob { transform-origin: 44px 44px; transition: transform 1.4s var(--ease); }
.conf .knob circle { fill: #fff; filter: drop-shadow(0 0 3px var(--c2)); }
.conf.empty .knob { opacity: 0; }
.conf .stop-a { stop-color: var(--c1); }
.conf.empty .front { opacity: 0; }
.conf .stop-b { stop-color: var(--c2); }
.conf-text { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.conf-text b { font-family: var(--display); font-size: 19px; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.conf-text span { margin-top: 5px; font-size: 8px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c2); }
.res-chart { padding: 10px; }
.res-chart .chart-head { padding: 4px 6px 10px; }
.res-chart .chart-head h3 { font-family: var(--display); font-size: 14px; }
.canvas-holder { width: 100%; border-radius: 14px; overflow: hidden; background: #0a101f; }
.canvas-holder canvas { display: block; }
.plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.plan-cell { padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); }
.plan-cell span { display: block; font-size: 11px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.plan-cell b { display: block; margin-top: 4px; font-size: 17px; font-variant-numeric: tabular-nums; }
.plan-cell em { display: block; margin-top: 2px; font-style: normal; font-size: 11px; color: var(--muted); }
.plan-cell.entry { border-color: rgba(234, 240, 255, 0.35); }
.plan-cell.zone { border-color: rgba(244, 194, 91, 0.4); background: rgba(244, 194, 91, 0.06); }
.plan-cell.zone b { color: var(--gold); font-size: 15px; }
.plan-cell.stop b, .plan-cell.bear b { color: var(--bear); }
.plan-cell.target b, .plan-cell.bull b { color: var(--bull); }
.plan-warn { margin-top: 12px; padding: 10px 14px; border-radius: 14px; font-size: 13px; color: var(--gold); background: rgba(244, 194, 91, 0.08); border: 1px solid rgba(244, 194, 91, 0.25); }
.res-split { display: grid; gap: 14px; align-items: start; }
.res-col { display: grid; gap: 14px; align-content: start; }
.sub-title { margin: 16px 0 8px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.trend-verdict { margin-bottom: 10px; padding: 12px 14px; border-radius: 14px; font-size: 15px; background: rgba(154, 167, 199, 0.1); }
.trend-verdict.up { color: var(--bull); background: rgba(45, 226, 160, 0.1); }
.trend-verdict.down { color: var(--bear); background: rgba(255, 93, 115, 0.1); }
.res-trend .ind:last-of-type { border-bottom: 0; }
.mtf-chips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.chip-tf { padding: 9px 2px; text-align: center; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); }
.chip-tf b { display: block; font-size: 12px; }
.chip-tf span { font-size: 15px; font-weight: 800; color: var(--neutral); }
.chip-tf.up span { color: var(--bull); }
.chip-tf.down span { color: var(--bear); }
.chip-tf.current { border-color: var(--gold); }
.stat-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.stat-tile { padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); }
.stat-tile span { display: block; font-size: 11px; color: var(--muted); letter-spacing: 0.05em; text-transform: uppercase; }
.stat-tile b { display: block; margin-top: 4px; font-family: var(--display); font-size: 17px; }
.stat-tile em { display: block; margin-top: 3px; font-style: normal; font-size: 11px; color: var(--muted); }
.stat-tile.good b { color: var(--bull); }
.stat-tile.bad b { color: var(--bear); }
.recent-dots { display: flex; flex-wrap: wrap; gap: 6px; }
.recent-dots i { width: 14px; height: 14px; border-radius: 50%; }
.recent-dots .win { background: var(--bull); }
.recent-dots .loss { background: var(--bear); }
.desc-block { padding: 12px 0; border-bottom: 1px solid var(--line); }
.desc-block:last-child { border-bottom: 0; padding-bottom: 0; }
.desc-block h4 { margin-bottom: 5px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.desc-block p { font-size: 14px; line-height: 1.6; color: #c9d3ee; }
.res-readings .ind:last-of-type { border-bottom: 0; }
.res-levels .level em { margin-left: 10px; font-style: normal; font-size: 11px; color: var(--muted); }
.res-levels .level { justify-content: flex-start; gap: 6px; }
.res-levels .level b { margin-left: auto; }

/* Admin dashboard */
.admin-tabs { margin-bottom: 14px; }
.tab-pane { display: grid; gap: 14px; }
.tab-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; border-radius: 9px; font-style: normal; font-size: 11px; color: #1a1204; background: var(--gold); }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kpi { position: relative; padding: 14px 16px; overflow: hidden; animation: row-in 0.5s var(--ease) both; }
.kpi::before { content: ""; position: absolute; right: -30px; top: -30px; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, var(--accent, var(--gold)), transparent 70%); opacity: 0.16; }
.kpi.gold { --accent: var(--gold); } .kpi.cyan { --accent: #5fe3ff; } .kpi.green { --accent: var(--bull); } .kpi.violet { --accent: #a98bff; } .kpi.warn { --accent: var(--gold); }
.kpi span { font-size: 11px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.kpi b { display: block; margin-top: 4px; font-family: var(--display); font-size: 26px; color: var(--accent, var(--ink)); }
.kpi-delta { display: block; min-height: 16px; margin-top: 2px; font-style: normal; font-size: 12px; font-weight: 800; color: var(--muted); }
.kpi-delta.up { color: var(--bull); }
.kpi-delta.down { color: var(--bear); }
.kpi small { display: block; margin-top: 4px; font-size: 11px; color: var(--muted); }
.panel-card { padding: 16px; }
.panel-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.panel-head h2 { font-family: var(--display); font-size: 16px; }
.panel-head p { margin-top: 4px; font-size: 13px; color: var(--muted); }
.chart-box { position: relative; width: 100%; }
.chart-box canvas { display: block; width: 100%; }
.chart-tip { position: absolute; z-index: 5; display: grid; gap: 2px; min-width: 150px; padding: 10px 12px; border-radius: 12px; font-size: 12px; pointer-events: none; background: rgba(8, 12, 24, 0.94); border: 1px solid var(--line-strong); box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.8); }
.chart-tip b { margin-bottom: 3px; color: var(--gold); }
.chart-tip span { color: var(--muted); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.legend i { display: inline-block; width: 12px; height: 4px; margin-right: 6px; border-radius: 3px; vertical-align: middle; }
.table-scroll { max-height: 380px; margin-top: 16px; overflow: auto; border-radius: 14px; border: 1px solid var(--line); scrollbar-width: thin; scrollbar-color: rgba(244, 194, 91, 0.4) transparent; }
.period-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.period-table th, .period-table td { padding: 9px 12px; text-align: right; white-space: nowrap; }
.period-table th:first-child, .period-table td:first-child { text-align: left; }
.period-table thead th { position: sticky; top: 0; z-index: 1; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); background: #0c1322; }
.period-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.025); }
.period-table td.zero { color: rgba(141, 155, 189, 0.45); }
.period-table tfoot td { position: sticky; bottom: 0; font-weight: 800; color: var(--gold); background: #0c1322; border-top: 1px solid var(--line-strong); }
.admin-cols { display: grid; gap: 14px; align-items: start; }
.countries { display: grid; gap: 12px; }
.country { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; }
.cc { display: inline-grid; place-items: center; min-width: 40px; height: 28px; padding: 0 8px; border-radius: 9px; font-family: var(--display); font-size: 11px; letter-spacing: 0.06em; color: var(--gold); background: rgba(244, 194, 91, 0.1); border: 1px solid rgba(244, 194, 91, 0.3); }
.country-name { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; margin-bottom: 6px; }
.country-name b { font-size: 14px; }
.country-name small { font-size: 12px; color: var(--muted); }
.stack .g { background: var(--gold); }
.funnel { display: grid; gap: 12px; }
.funnel-row .top { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 14px; }
.funnel-row .top b { font-size: 13px; }
.sub-head { margin: 20px 0 10px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.settings-card { max-width: 640px; }
.field input.plain-input { height: 52px; font-family: var(--text); font-size: 15px; letter-spacing: 0; }
.form-ok { min-height: 22px; margin: 10px 0 4px; color: var(--bull); font-size: 14px; }
.settings-actions { display: grid; gap: 10px; margin-top: 8px; }
.req-main .cc { margin-left: auto; }

@media (min-width: 720px) {
  .wrap { width: min(1180px, 100% - 48px); }
  .desk { padding: 26px 24px 22px; }
  .desk-foot { grid-template-columns: 1fr auto; align-items: center; }
  .desk-foot .btn { width: auto; min-width: 260px; }
  .res-head { padding: 20px 22px; }
  .plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .settings-actions { grid-template-columns: auto auto; justify-content: start; }
  .panel-card { padding: 20px; }
  .nav { display: flex; }
  .id-chip { display: inline-flex; }
  .hero { padding: 96px 0 70px; }
  .hero-actions { grid-auto-flow: column; max-width: none; justify-content: center; }
  .feature-grid { grid-template-columns: repeat(4, 1fr); }
  .feature { padding: 24px 20px; }
  .section { padding: 72px 0; }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .admin-tools { grid-template-columns: auto 1fr; align-items: center; }
  .add-row { max-width: 360px; justify-self: end; width: 100%; }
}
@media (min-width: 980px) {
  :root { --header: 68px; }
  .tf-switch { max-width: 560px; }
  .cab { grid-template-columns: 5fr 7fr; gap: 18px; }
  .cab-page { padding-bottom: 60px; gap: 18px; }
  .col.left { position: sticky; top: calc(var(--header) + 16px); align-self: start; }
  #tv_chart, #ta_widget { height: 560px; }
  .bottom-nav { display: none; }
  .res-split { grid-template-columns: 1fr 1fr; }
  .admin-cols { grid-template-columns: 1fr 1fr; }
  .kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .kpi b { font-size: 24px; }
  .plan-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .plan-cell b { font-size: 15px; }
  .plan-cell.zone b { font-size: 13px; }
  .req { grid-template-columns: 1.1fr 1fr; align-items: center; }
  .req-actions { justify-content: flex-end; }
  .req-actions .btn { flex: 0 0 auto; }
}
/* Trade tracking, history, admin search and logs */
.cab-page > *, .cab > *, .sig-result > *, .res-split > *, .res-col > *, .tab-pane > *, .admin-cols > *, .col > * { min-width: 0; }
.canvas-holder, .chart-box { min-width: 0; max-width: 100%; overflow: hidden; }
.live-chip { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; margin-right: 8px; padding: 6px 12px; border-radius: 999px; font-size: 13px; background: rgba(45, 226, 160, 0.1); border: 1px solid rgba(45, 226, 160, 0.3); }
.live-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--bull); box-shadow: 0 0 0 0 rgba(45, 226, 160, 0.7); animation: pulse 2s infinite; }
.live-chip b { font-variant-numeric: tabular-nums; }
.res-chart .chart-head { flex-wrap: wrap; row-gap: 8px; }
.trade-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 14px 18px; border-left: 3px solid var(--gold); }
.trade-banner.win { border-left-color: var(--bull); }
.trade-banner.loss { border-left-color: var(--bear); }
.trade-banner.expired { border-left-color: var(--neutral); }
.trade-id small { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.trade-id b { display: block; margin-top: 2px; font-size: 14px; }
.trade-state { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.trade-state em, .hist-result em { font-style: normal; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.state-pill { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 800; color: var(--gold); background: rgba(244, 194, 91, 0.14); white-space: nowrap; }
.state-pill.win { color: var(--bull); background: rgba(45, 226, 160, 0.14); }
.state-pill.loss { color: var(--bear); background: rgba(255, 93, 115, 0.14); }
.state-pill.expired { color: var(--neutral); background: rgba(154, 167, 199, 0.14); }
.history { padding: 18px 16px; }
.hist-stats { margin-bottom: 14px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.hist-stats .stat-tile { grid-column: span 2; padding: 10px; }
.hist-stats .stat-tile:nth-child(n+4) { grid-column: span 3; }
.hist-stats .stat-tile span { font-size: 10px; }
.hist-stats .stat-tile b { font-size: 16px; }
.hist-list { display: grid; gap: 8px; max-height: 640px; overflow-y: auto; padding-right: 2px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(244, 194, 91, 0.4) transparent; }
.hist-item { display: grid; gap: 10px; padding: 12px 14px; text-align: left; border-radius: 16px; border: 1px solid var(--line); border-left: 3px solid var(--gold); background: rgba(255, 255, 255, 0.03); cursor: pointer; transition: transform 0.3s var(--ease), border-color 0.3s, background 0.3s; }
.hist-item:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.05); }
.hist-item.win { border-left-color: var(--bull); }
.hist-item.loss { border-left-color: var(--bear); }
.hist-item.expired { border-left-color: var(--neutral); }
.hist-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.hist-head b { font-size: 14px; }
.hist-head small { margin-left: auto; font-size: 12px; color: var(--muted); }
.side-mini { padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.side-mini.buy { color: var(--bull); background: rgba(45, 226, 160, 0.14); }
.side-mini.sell { color: var(--bear); background: rgba(255, 93, 115, 0.14); }
.hist-levels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.hist-levels span { display: block; min-width: 0; }
.hist-levels small { display: block; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.hist-levels b { display: block; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hist-result { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

.search-box { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.04); transition: border-color 0.3s, box-shadow 0.3s; }
.search-box:focus-within { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(244, 194, 91, 0.12); }
.search-box svg { flex: none; width: 18px; height: 18px; color: var(--muted); }
.search-box input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font-size: 15px; }
.admin-tools select { height: 48px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--line-strong); background: #0d1424; color: var(--ink); outline: none; }
.admin-tools select:focus { border-color: var(--gold); }
.seg button i { margin-left: 6px; padding: 1px 7px; border-radius: 9px; font-style: normal; font-size: 11px; background: rgba(255, 255, 255, 0.08); }
.seg button.active i { background: rgba(244, 194, 91, 0.25); }
.scroll-seg { display: flex; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.scroll-seg::-webkit-scrollbar { display: none; }
.scroll-seg button { flex: none; }
.req.pending { border-left: 3px solid var(--gold); }
.req.approved { border-left: 3px solid var(--bull); }
.req.rejected { border-left: 3px solid var(--bear); }
.req-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin-top: 10px; }
.req-facts span { display: block; min-width: 0; }
.req-facts small { display: block; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.req-facts b { display: block; font-size: 13px; overflow-wrap: anywhere; }
.req-warn { margin-top: 10px; font-size: 12px; color: var(--gold); }
.logs-card { padding: 8px 14px 14px; }
.log-list { display: grid; }
.log-day { margin: 16px 0 6px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.log { display: grid; grid-template-columns: 62px auto 1fr; gap: 4px 10px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.log:last-child { border-bottom: 0; }
.log time { padding-top: 3px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.log-kind { padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; color: var(--muted); background: rgba(154, 167, 199, 0.12); white-space: nowrap; }
.log-kind.login { color: #5fe3ff; background: rgba(95, 227, 255, 0.12); }
.log-kind.security { color: var(--bear); background: rgba(255, 93, 115, 0.14); }
.log-kind.signal { color: #a98bff; background: rgba(169, 139, 255, 0.14); }
.log-kind.trade { color: var(--bull); background: rgba(45, 226, 160, 0.12); }
.log-kind.admin { color: var(--gold); background: rgba(244, 194, 91, 0.14); }
.log.warn .log-body b { color: var(--gold); }
.log.error .log-body b { color: var(--bear); }
.log-body { min-width: 0; }
.log-body b { display: block; font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.log-body small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.admin-tabs button { padding: 0 8px; font-size: 12.5px; }
.admin-tools > * { min-width: 0; }
.add-row input { min-width: 0; width: 100%; font-size: 14px; letter-spacing: 0.04em; }
.add-row .btn { white-space: nowrap; }

@media (max-width: 719px) {
  .log { grid-template-columns: auto 1fr; }
  .log time { grid-column: 1; }
  .log-kind { justify-self: start; grid-column: 2; }
  .log-body { grid-column: 1 / -1; }
  .res-chart .chart-head .btn { flex: 1 1 100%; }
  .live-chip { margin-left: 0; }
}
@media (min-width: 720px) {
  .hist-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .hist-stats .stat-tile, .hist-stats .stat-tile:nth-child(n+4) { grid-column: auto; padding: 12px; }
  .hist-stats .stat-tile b { font-size: 17px; }
  .hist-item { grid-template-columns: 1.3fr 1.4fr auto; align-items: center; gap: 16px; }
  .req-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admin-tools:has(.search-box) { grid-template-columns: 1fr auto; }
  .admin-tabs button { padding: 0 14px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  [data-reveal] { opacity: 1; transform: none; filter: none; }
  .split .w > span { transform: none; }
}
.plan-grid.two.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Result report: trade ladder, factors, analysis panes */
.chart-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; flex: 1; }
.res-plan, .res-analysis { padding: 18px 16px; }
.ladder { display: grid; gap: 6px; }
.ladder-row { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); transition: background 0.3s; }
.ladder-row .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--neutral); }
.ladder-name b { display: block; font-size: 14px; }
.ladder-name small { display: block; font-size: 12px; color: var(--muted); }
.ladder-row strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.ladder-row.entry { background: rgba(255, 255, 255, 0.04); }
.ladder-row.entry .dot { background: var(--ink); }
.ladder-row.sl strong { color: var(--bear); }
.ladder-row.sl .dot { background: var(--bear); }
.ladder-row.tp .dot { background: var(--bull); }
.ladder-row.tp strong { color: var(--bull); }
.ladder-row.now { border-color: rgba(244, 194, 91, 0.5); background: rgba(244, 194, 91, 0.07); }
.ladder-row.now .dot { background: var(--gold); box-shadow: 0 0 0 0 rgba(244, 194, 91, 0.7); animation: pulse 2s infinite; }
.ladder-row.done { background: rgba(255, 255, 255, 0.015); }
.ladder-row.done .ladder-name b { text-decoration: line-through; text-decoration-color: rgba(141, 155, 189, 0.5); }
.plan-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.plan-tile { padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); }
.plan-tile span { display: block; font-size: 11px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.plan-tile b { display: block; margin-top: 4px; font-size: 15px; font-variant-numeric: tabular-nums; }
.plan-tile em { display: block; margin-top: 2px; font-style: normal; font-size: 11px; color: var(--muted); }
.analysis-tabs { display: flex; width: 100%; margin: 4px 0 16px; }
.pane-body[hidden] { display: none; }
.pane-block { margin-top: 18px; }
.pane-block:first-child { margin-top: 0; }
.pane-block > .sub-title:first-child { margin-top: 0; }
.meter { margin-bottom: 14px; }
.meter-track { position: relative; height: 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.08); }
.meter-track i { position: absolute; top: 0; bottom: 0; border-radius: 10px; transition: left 0.8s var(--ease), width 0.8s var(--ease); }
.meter-track i.pos, .dbar i.pos { background: var(--bull); }
.meter-track i.neg, .dbar i.neg { background: var(--bear); }
.tick { position: absolute; top: -4px; width: 2px; height: 18px; margin-left: -1px; border-radius: 2px; background: rgba(234, 240, 255, 0.35); }
.tick.zero { left: 50%; background: rgba(234, 240, 255, 0.7); }
.meter-caption { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.meter-caption b { color: var(--ink); font-size: 12px; text-align: center; }
.factor { padding: 12px 0; border-bottom: 1px solid var(--line); }
.factor:last-child { border-bottom: 0; }
.factor-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.factor-head b { font-size: 14px; }
.factor-vote { min-width: 52px; padding: 3px 10px; border-radius: 999px; text-align: center; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.factor-vote.bull { color: var(--bull); background: rgba(45, 226, 160, 0.12); }
.factor-vote.bear { color: var(--bear); background: rgba(255, 93, 115, 0.12); }
.factor-vote.neutral { color: var(--neutral); background: rgba(154, 167, 199, 0.12); }
.dbar { position: relative; height: 6px; margin: 9px 0 7px; border-radius: 6px; background: rgba(255, 255, 255, 0.06); }
.dbar::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: rgba(234, 240, 255, 0.35); }
.dbar i { position: absolute; top: 0; bottom: 0; border-radius: 6px; }
.factor small { display: block; font-size: 12px; line-height: 1.4; color: var(--muted); }
.fact { padding: 12px 0; border-bottom: 1px solid var(--line); }
.fact:last-child { border-bottom: 0; }
.fact-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fact-head b { font-size: 14px; }
.fact-head .val { font-size: 12px; color: var(--muted); }
.fact p { margin-top: 6px; font-size: 13px; line-height: 1.5; color: #c9d3ee; }
.range-gauge { position: relative; height: 8px; margin: 12px 0 6px; border-radius: 8px; background: linear-gradient(90deg, rgba(45, 226, 160, 0.55), rgba(154, 167, 199, 0.3) 50%, rgba(255, 93, 115, 0.55)); }
.range-gauge i { position: absolute; top: -4px; width: 4px; height: 16px; margin-left: -2px; border-radius: 3px; background: var(--ink); box-shadow: 0 0 10px rgba(234, 240, 255, 0.8); }
.fvg-row { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; padding: 10px 14px; margin-bottom: 6px; border-radius: 14px; background: rgba(255, 255, 255, 0.03); border-left: 3px solid var(--neutral); }
.fvg-row.bull { border-left-color: var(--bull); }
.fvg-row.bear { border-left-color: var(--bear); }
.fvg-row b { font-size: 14px; font-variant-numeric: tabular-nums; }
.fvg-row small { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
.fvg-type { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.fvg-row.bull .fvg-type { color: var(--bull); }
.fvg-row.bear .fvg-type { color: var(--bear); }

/* History drawer */
.id-label { margin-right: 2px; letter-spacing: 0.1em; }
.id-chip svg { width: 16px; height: 16px; flex: none; color: var(--gold); }
.id-chip { align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.03); cursor: pointer; transition: border-color 0.3s, color 0.3s; }
.id-chip:hover { border-color: rgba(244, 194, 91, 0.5); color: var(--ink); }
.id-chip b { margin-left: 0; }
.chip-dot { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 8px; padding: 0 5px; border-radius: 9px; font-style: normal; font-size: 11px; font-weight: 800; color: #1a1204; background: var(--gold); }
.drawer-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(2, 4, 10, 0.65); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity 0.3s var(--ease); }
.drawer-backdrop.open { opacity: 1; }
.drawer { position: fixed; z-index: 81; top: 0; right: 0; bottom: 0; width: min(480px, 100%); background: #0b1120; border-left: 1px solid var(--line-strong); box-shadow: -30px 0 80px -30px rgba(0, 0, 0, 0.9); transform: translateX(100%); transition: transform 0.35s var(--ease); }
.drawer.open { transform: none; }
.drawer-inner { display: grid; gap: 14px; align-content: start; height: 100%; padding: 20px 16px calc(24px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(244, 194, 91, 0.4) transparent; }
.drawer-inner > * { min-width: 0; }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.drawer-head h2 { font-family: var(--display); font-size: 18px; }
.drawer-head p { margin-top: 4px; font-size: 13px; color: var(--muted); }
.drawer-head b { color: var(--ink); }
.drawer-close { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.04); color: var(--muted); cursor: pointer; transition: color 0.25s, border-color 0.25s, transform 0.3s var(--ease); }
.drawer-close:hover { color: var(--ink); border-color: rgba(244, 194, 91, 0.5); transform: rotate(90deg); }
.drawer-close svg { width: 18px; height: 18px; }
.drawer .hist-list { max-height: none; overflow: visible; }
.drawer .stat-tile { padding: 10px 8px; }
.drawer .stat-tile span { font-size: 9.5px; letter-spacing: 0; }

@media (min-width: 720px) {
  .strat-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modal-card { height: min(720px, calc(100vh - 48px)); height: min(720px, calc(100dvh - 48px)); }
  .modal-head { padding: 24px 28px 16px; }
  .pick-bar { padding: 12px 28px; }
  .tf-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tf-cards button { grid-template-columns: 1fr; row-gap: 4px; padding: 14px; }
  .tf-cards button::before { grid-row: auto; margin-bottom: 4px; }
  .modal-body { padding: 4px 28px 24px; }
  .modal-foot { padding: 16px 28px 20px; grid-template-columns: 1fr 2fr; }
  .drawer-inner { padding: 24px 22px 30px; }
}
@media (max-width: 719px) {
  .modal { align-items: end; padding: 0; }
  .modal-card { width: 100%; height: 88vh; height: 88dvh; border-radius: 26px 26px 0 0; transform: translateY(60px); }
  .strat { grid-template-columns: minmax(0, 1fr) 22px; gap: 12px; padding: 12px 14px; }
  .strat-check { width: 22px; height: 22px; }
  .strat.active .strat-check { background-size: 13px; }
  .strat-text b { font-size: 14px; }
  .pick-bar { padding: 10px 16px; }
  .modal-body .tf-hint { min-height: 0; }
  .modal-head { padding: 14px 16px 12px; }
  .modal-body { padding: 4px 16px 16px; }
  .modal-foot { padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); }
  .conf { width: 76px; height: 76px; }
  .conf-text b { font-size: 15px; }
  .conf-text span { font-size: 7.5px; letter-spacing: 0.04em; }
  .badge { min-width: 78px; padding: 5px 8px; font-size: 11px; }
  .ind .name { font-size: 13px; }
  #ta_widget { min-height: 330px; }
  .pick-card { grid-template-columns: 44px minmax(0, 1fr); }
  .pick-icon { width: 44px; height: 44px; }
  .pick-action { display: none; }
}

/* Desk, result head, chart bar and the post-signal market panel */
.pick-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.045); }
.pick-summary b { display: block; font-family: var(--display); font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; }
.pick-summary em { padding: 4px 12px; border-radius: 999px; font-style: normal; font-size: 12px; font-weight: 800; color: var(--gold); background: rgba(244, 194, 91, 0.1); border: 1px solid rgba(244, 194, 91, 0.3); white-space: nowrap; }
.step-card { margin-top: 26px; padding: 0; }
.step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.step-head .step-no { width: 30px; height: 30px; font-size: 13px; }
.step-head b { display: block; font-family: var(--display); font-size: 14px; }
.step-head small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.tf-cards { display: grid; gap: 8px; }
.tf-cards button { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 13px 14px; text-align: left; border-radius: 16px; border: 1.5px solid transparent; background: rgba(255, 255, 255, 0.045); cursor: pointer; transition: transform 0.3s var(--ease), border-color 0.3s, background 0.3s; }
.tf-cards button::before { content: ""; grid-row: 1 / span 2; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid rgba(141, 155, 189, 0.5); transition: border-color 0.3s, background 0.3s, box-shadow 0.3s; }
.tf-cards button:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.07); }
.tf-cards b { font-family: var(--display); font-size: 14px; }
.tf-cards small { font-size: 12px; color: var(--muted); }
.tf-cards button.active { border-color: rgba(244, 194, 91, 0.7); background: rgba(244, 194, 91, 0.09); box-shadow: none; }
.tf-cards button.active::before { border-color: var(--gold); background: radial-gradient(circle, var(--gold) 0 45%, transparent 50%); box-shadow: 0 0 12px rgba(244, 194, 91, 0.6); }
.step-card .btn-pick { margin-top: 12px; }
.step-card .btn-gold { width: 100%; min-height: 56px; }
.pick-chips { margin-top: 10px; }
.pick-bar { display: grid; gap: 10px; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.pick-search { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-strong); transition: border-color 0.3s, box-shadow 0.3s; }
.pick-search:focus-within { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(244, 194, 91, 0.12); }
.pick-search svg { width: 18px; height: 18px; flex: none; color: var(--muted); }
.pick-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font-size: 15px; }
.pick-presets { display: flex; gap: 8px; overflow-x: auto; padding: 2px; margin: 0 -2px; scrollbar-width: none; }
.pick-presets::-webkit-scrollbar { display: none; }
.pick-presets .chip { flex: none; height: 32px; font-size: 12.5px; }
.modal-head p b { color: var(--gold); font-family: var(--display); font-weight: 700; }
.strat-section { margin-top: 20px; }
.strat-section:first-child { margin-top: 6px; }
.strat-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.strat-head h4 { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.gcount { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.gtoggle { margin-left: auto; padding: 4px 0; border: 0; background: none; font-size: 12px; font-weight: 800; color: var(--gold); cursor: pointer; }
.pick-empty { padding: 24px 0; text-align: center; }
.pick-chips { display: flex; gap: 6px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
.pick-chips::-webkit-scrollbar { display: none; }
.pick-chip { flex: none; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--muted); border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); }
.desk-actions { display: grid; gap: 10px; margin-top: 14px; }
.btn-pick { min-height: 54px; color: var(--gold); border-color: rgba(244, 194, 91, 0.55); background: rgba(244, 194, 91, 0.08); font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; }
.btn-pick svg { width: 20px; height: 20px; flex: none; }
.btn-pick:hover { background: rgba(244, 194, 91, 0.14); }
.desk-actions .btn { width: 100%; min-height: 54px; }
.res-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.chart-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 2px 10px; }
.chart-seg { flex: 1; max-width: 300px; }
.chart-seg button { padding: 0 10px; }
.icon-btn:disabled { opacity: 0.35; pointer-events: none; }
.icon-btn { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.04); color: var(--muted); cursor: pointer; transition: color 0.25s, border-color 0.25s; }
.icon-btn:hover { color: var(--gold); border-color: rgba(244, 194, 91, 0.5); }
.icon-btn svg { width: 18px; height: 18px; }
.market { display: grid; gap: 14px; animation: row-in 0.6s var(--ease) both; }
.market > * { min-width: 0; }
.ta-card { padding: 16px; overflow: hidden; }
.ta-card .card-title { margin-bottom: 8px; }
.verdict-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding: 12px 14px; border-radius: 16px; background: color-mix(in srgb, var(--tone, var(--neutral)) 12%, transparent); border: 1px solid color-mix(in srgb, var(--tone, var(--neutral)) 32%, transparent); }
.vs-main small { display: block; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.vs-main b { display: block; margin-top: 2px; font-family: var(--display); font-size: 14px; text-transform: uppercase; color: var(--tone, var(--ink)); }
.vs-counts { display: flex; gap: 14px; }
.vs-counts span { display: grid; justify-items: center; font-size: 10px; color: var(--muted); }
.vs-counts b { font-family: var(--display); font-size: 17px; color: var(--ink); }
.vs-counts .bull b { color: var(--bull); }
.vs-counts .bear b { color: var(--bear); }
.ind-shown { margin: 2px 0 6px; font-size: 12px; color: var(--muted); }
.ind-group { border-bottom: 1px solid var(--line); }
.ind-head { display: grid; grid-template-columns: minmax(0, 1fr) auto 14px; gap: 10px; align-items: center; width: 100%; padding: 14px 2px; border: 0; background: none; text-align: left; cursor: pointer; }
.ind-head b { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.ind-sum { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chev { width: 8px; height: 8px; margin-top: -3px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform 0.3s var(--ease); }
.ind-group.open .chev { margin-top: 3px; transform: rotate(-135deg); }
.ind-body { padding-bottom: 8px; animation: row-in 0.3s var(--ease) both; }
.ind-body .ind:last-child { border-bottom: 0; }
.res-wait { margin-top: 12px; }
.res-reasons { display: grid; gap: 7px; margin: 14px 0 0; padding: 0; list-style: none; }
.res-reasons li { position: relative; padding-left: 18px; font-size: 12.5px; line-height: 1.4; color: #c9d3ee; }
.res-reasons li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.res-head.buy .res-reasons li::before { background: var(--bull); }
.res-head.sell .res-reasons li::before { background: var(--bear); }
.filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; overflow: visible; }
.filters .chip { min-width: 0; padding: 0 6px; white-space: nowrap; }
.ind { grid-template-columns: minmax(0, 1fr) auto; }
.ind .name, .ind .val { min-width: 0; overflow-wrap: anywhere; }
.new-signal { display: grid; gap: 14px; padding: 18px 16px; text-align: center; animation: row-in 0.5s var(--ease) both; }
.new-signal b { display: block; font-family: var(--display); font-size: 15px; }
.new-signal small { display: block; margin-top: 4px; font-size: 12px; line-height: 1.4; color: var(--muted); }
.new-signal .btn { width: 100%; min-height: 56px; }

@media (max-width: 719px) {
  .desk { padding: 24px 18px 22px; }
  .desk-head .kicker { font-size: 11px; letter-spacing: 0.22em; }
  .desk-head h2 { font-size: 25px; letter-spacing: -0.01em; }
  .desk-head p { margin-top: 10px; font-size: 13px; line-height: 1.55; }
  .step-card { margin-top: 30px; padding: 0; }
  .step-head { gap: 14px; margin-bottom: 16px; }
  .step-head .step-no { width: 34px; height: 34px; font-size: 14px; font-weight: 800; color: #1a1204; border: 0; background: linear-gradient(135deg, #ffe3a3, #f4c25b); box-shadow: 0 8px 20px -8px rgba(244, 194, 91, 0.8); }
  .step-head b { font-size: 16px; }
  .step-head small { margin-top: 3px; font-size: 12.5px; line-height: 1.35; overflow-wrap: anywhere; }
  .tf-cards { gap: 8px; }
  .tf-cards button { padding: 13px 16px; border-radius: 16px; column-gap: 14px; }
  .tf-cards button::before { width: 20px; height: 20px; }
  .tf-cards b { font-size: 15px; }
  .tf-cards small { margin-top: 2px; font-size: 12.5px; line-height: 1.35; }
  .pick-summary { padding: 17px 16px; border-radius: 16px; }
  .pick-summary b { font-size: 16px; }
  .step-card .btn { width: 100%; min-height: 54px; padding: 0 16px; font-size: 14px; }
  .step-card .btn-gold { min-height: 58px; font-size: 15px; box-shadow: 0 16px 44px -14px rgba(244, 194, 91, 0.85); }
  .btn-pick { font-size: 13px; letter-spacing: 0.05em; background: rgba(244, 194, 91, 0.1); }
  .step-card .btn-pick { margin-top: 14px; }
  .new-signal .btn { min-height: 50px; font-size: 14px; }
}

/* Indicator picker: card rows, sticky group headers, meter, "selected only" switch */
.modal-card { position: relative; overflow: hidden; }
.modal-head { position: relative; align-items: center; }
.mh-text { min-width: 0; }
.sheet-grip { display: none; position: absolute; top: 7px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 4px; background: rgba(160, 185, 255, 0.28); }
.pick-meter { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.pick-meter i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #ffe3a3, var(--gold)); box-shadow: 0 0 10px rgba(244, 194, 91, 0.7); transition: width 0.35s var(--ease); }
.pick-bar { gap: 10px; background: rgba(255, 255, 255, 0.02); }
.pick-search input { font-size: 16px; }
.pick-search input:focus-visible { outline: none; }
.pick-clear { display: grid; place-items: center; flex: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: var(--muted); cursor: pointer; transition: background 0.2s, color 0.2s; }
.pick-clear:hover { background: rgba(255, 255, 255, 0.18); color: var(--ink); }
.pick-clear svg { width: 12px; height: 12px; }
.pick-sub { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 24px; font-size: 12px; color: var(--muted); }
.only-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; border: 0; background: none; font-size: 12px; font-weight: 800; color: var(--muted); cursor: pointer; transition: color 0.25s; }
.only-toggle i { position: relative; width: 30px; height: 18px; border-radius: 18px; background: rgba(255, 255, 255, 0.14); transition: background 0.25s; }
.only-toggle i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform 0.25s var(--ease), background 0.25s; }
.only-toggle.on { color: var(--gold); }
.only-toggle.on i { background: var(--gold); }
.only-toggle.on i::after { transform: translateX(12px); background: #1a1204; }
.strat-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; overflow: visible; border-radius: 0; background: none; }
.strat { border: 1.5px solid transparent; border-radius: 16px; background: rgba(255, 255, 255, 0.04); transition: background 0.2s, border-color 0.2s, transform 0.2s var(--ease); }
.strat:last-child { border-bottom: 1.5px solid transparent; }
.strat:hover { background: rgba(255, 255, 255, 0.07); }
.strat:active { transform: scale(0.985); }
.strat.active { border-color: rgba(244, 194, 91, 0.6); background: rgba(244, 194, 91, 0.09); }
.strat.active .strat-check { animation: check-pop 0.35s var(--ease); }
.strat-text mark { padding: 0 1px; border-radius: 3px; color: var(--gold); background: rgba(244, 194, 91, 0.22); }
@keyframes check-pop { 0% { transform: scale(0.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
.strat-section { margin-top: 8px; }
.strat-section:first-child { margin-top: 0; }
.strat-head { position: sticky; top: 0; z-index: 2; margin: 0 -2px 4px; padding: 14px 2px 10px; background: linear-gradient(#0b1120 78%, rgba(11, 17, 32, 0)); }
.gcount { padding: 2px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); font-weight: 700; }
.strat-section.has-picked .gcount { color: var(--gold); background: rgba(244, 194, 91, 0.12); }
.gtoggle { padding: 5px 12px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 12px; transition: border-color 0.2s, background 0.2s; }
.gtoggle:hover { border-color: rgba(244, 194, 91, 0.6); background: rgba(244, 194, 91, 0.08); }
.pick-empty { display: grid; justify-items: center; gap: 14px; padding: 40px 0; text-align: center; }
.pick-empty[hidden] { display: none; }
.modal-foot { background: rgba(255, 255, 255, 0.02); }
.pick-chip.more { color: var(--gold); border-color: rgba(244, 194, 91, 0.35); }

/* Focus rings for keyboard users */
button:focus-visible, a:focus-visible, input:focus-visible, .strat:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.field input:focus-visible, .search:focus-visible, .add-row input:focus-visible, .search-box input:focus-visible { outline: none; }

/* Timeframe radio: vector dot instead of a hard-stop gradient */
.tf-cards button.active::before { border-color: var(--gold); background: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='4.6' fill='%23f4c25b'/%3E%3C/svg%3E") center / 100% 100% no-repeat; box-shadow: 0 0 12px rgba(244, 194, 91, 0.55); }

/* Request button shows the cooldown as a fill */
.btn-gold.cooling { color: var(--ink); border: 1px solid var(--line-strong); background: linear-gradient(90deg, rgba(244, 194, 91, 0.5) var(--cd, 0%), rgba(255, 255, 255, 0.07) var(--cd, 0%)); box-shadow: none; }
.btn-gold.cooling::after { display: none; }
.btn-gold.cooling[disabled] { opacity: 0.92; }
.step-card .btn-gold.cooling { box-shadow: none; }

/* Live trade status */
.trade-status { --dot: var(--gold); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-bottom: 12px; padding: 12px 14px; border-radius: 16px; background: color-mix(in srgb, var(--dot) 9%, transparent); border: 1px solid color-mix(in srgb, var(--dot) 32%, transparent); }
.trade-status.win { --dot: var(--bull); }
.trade-status.loss { --dot: var(--bear); }
.trade-status.expired { --dot: var(--neutral); }
.ts-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 10px color-mix(in srgb, var(--dot) 70%, transparent); }
.trade-status.open .ts-dot { animation: ring-pulse 2s infinite; }
@keyframes ring-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dot) 65%, transparent); } 70%, 100% { box-shadow: 0 0 0 10px transparent; } }
.ts-text b { display: block; font-size: 14px; }
.ts-text small { display: block; margin-top: 1px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.trade-status strong { font-family: var(--display); font-size: 14px; color: var(--dot); font-variant-numeric: tabular-nums; white-space: nowrap; }

.toast { position: fixed; z-index: 120; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: max-content; max-width: min(420px, calc(100% - 28px)); padding: 12px 18px; border-radius: 14px; border: 1px solid rgba(255, 93, 115, 0.5); background: rgba(40, 12, 20, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-size: 14px; font-weight: 700; text-align: center; animation: toast-in 0.35s var(--ease) both; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 12px); } }

/* Chart crosshair layer */
.canvas-holder { position: relative; }
.chart-overlay { position: absolute; left: 0; top: 0; cursor: crosshair; touch-action: pan-y; }

@media (min-width: 720px) {
  .strat-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .conf { width: 92px; height: 92px; }
}
@media (max-width: 719px) {
  .sheet-grip { display: block; }
  .modal-head { padding-top: 24px; }
  .pick-presets { margin: 0 -16px; padding: 2px 16px; }
  .toast { bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* Desktop: keep the request desk and the new-signal card at a readable width */
.step-card .btn-pick { width: 100%; }
@media (min-width: 720px) {
  .desk, .new-signal { width: min(820px, 100%); margin-inline: auto; }
  .new-signal { grid-template-columns: 1fr auto; align-items: center; text-align: left; }
  .new-signal .btn { width: auto; min-width: 260px; }
}

/* Access page: register buttons, loading button, shake, approval animation */
.btn-stack { display: grid; gap: 10px; }
.btn-stack .form-error { min-height: 0; margin: 0; }
.btn-stack .form-error:empty { display: none; }
.btn-ghost { min-height: 48px; border-color: var(--line-strong); background: transparent; color: var(--muted); }
.btn-ghost:hover { color: var(--ink); }
.reg-steps { gap: 16px; margin-bottom: 22px; }
.reg-steps li { position: relative; }
.reg-steps li:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 36px; bottom: -14px; width: 2px; border-radius: 2px; background: linear-gradient(rgba(244, 194, 91, 0.5), rgba(244, 194, 91, 0.04)); }
.btn .spin { display: none; width: 16px; height: 16px; flex: none; border-radius: 50%; background: conic-gradient(transparent 0 35%, #1a1204); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); animation: spin 0.8s linear infinite; }
.btn.loading .spin { display: block; }
.btn.loading .arrow { display: none; }
.btn[disabled].loading { opacity: 1; }
.field.shake { animation: shake 0.4s var(--ease); }
@keyframes shake { 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }

.granted { padding: 8px 0 4px; text-align: center; animation: think-in 0.5s var(--ease) both; }
.granted h1 { transition: color 0.4s; }
.granted.done h1 { color: var(--bull); }
.grant-orb { position: relative; width: 120px; height: 120px; margin: 4px auto 22px; }
.grant-orb::before, .grant-orb::after { content: ""; position: absolute; inset: 14px; border-radius: 50%; border: 1.5px solid rgba(244, 194, 91, 0.5); animation: ripple 2.2s var(--ease) infinite; pointer-events: none; }
.grant-orb::after { animation-delay: 1.1s; }
.granted.done .grant-orb::before, .granted.done .grant-orb::after { border-color: rgba(45, 226, 160, 0.55); }
@keyframes ripple { from { transform: scale(0.8); opacity: 0.9; } to { transform: scale(1.75); opacity: 0; } }
.grant-orb svg { position: relative; width: 100%; height: 100%; overflow: visible; shape-rendering: geometricPrecision; }
.g-track { stroke: rgba(160, 185, 255, 0.1); stroke-width: 3; }
.g-sweep { stroke: var(--gold); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 28 72; transform-box: fill-box; transform-origin: center; animation: spin 1.2s linear infinite; filter: drop-shadow(0 0 6px rgba(244, 194, 91, 0.8)); }
.g-core { fill: rgba(244, 194, 91, 0.07); stroke: rgba(244, 194, 91, 0.25); transition: fill 0.5s, stroke 0.5s; }
.g-bars rect { transform-box: fill-box; transform-origin: bottom; animation: bar-rise 0.9s var(--ease) infinite alternate; }
.g-bars rect:nth-child(2) { animation-delay: 0.15s; }
.g-bars rect:nth-child(3) { animation-delay: 0.3s; }
.g-bars { transition: opacity 0.25s; }
.g-check { stroke: var(--bull); stroke-width: 5.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; }
.granted.done .g-sweep { animation: none; stroke: var(--bull); stroke-dasharray: 100 0; filter: drop-shadow(0 0 8px rgba(45, 226, 160, 0.8)); transition: stroke-dasharray 0.6s var(--ease), stroke 0.4s; }
.granted.done .g-core { fill: rgba(45, 226, 160, 0.13); stroke: rgba(45, 226, 160, 0.5); }
.granted.done .g-bars { opacity: 0; }
.granted.done .g-check { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset 0.6s 0.25s var(--ease), opacity 0.2s 0.2s; }
.grant-steps { list-style: none; display: grid; gap: 10px; max-width: 290px; margin: 18px auto; padding: 0; text-align: left; }
.grant-steps li { position: relative; padding-left: 28px; font-size: 14px; color: rgba(141, 155, 189, 0.55); transition: color 0.4s; }
.grant-steps li::before { content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid rgba(141, 155, 189, 0.4); transition: border-color 0.4s, background-color 0.4s; }
.grant-steps li.active { color: var(--ink); }
.grant-steps li.active::before { border-color: transparent; background: conic-gradient(transparent 0 35%, var(--gold)); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); animation: spin 0.8s linear infinite; }
.grant-steps li.done { color: var(--muted); }
.grant-steps li.done::before { border-color: var(--bull); background: var(--bull) url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2304251a' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 10px no-repeat; -webkit-mask: none; mask: none; animation: none; }
.grant-bar { height: 4px; border-radius: 4px; overflow: hidden; background: rgba(255, 255, 255, 0.08); }
.grant-bar i { display: block; width: 0; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #f4c25b, #ffe3a3); box-shadow: 0 0 12px rgba(244, 194, 91, 0.8); }
.granted:not([hidden]) .grant-bar i { animation: grant-fill var(--total, 2.2s) linear forwards; }
.granted.done .grant-bar i { background: var(--bull); box-shadow: 0 0 12px rgba(45, 226, 160, 0.8); }
@keyframes grant-fill { to { width: 100%; } }

/* Landing call-to-action: light falls from the top edge as a soft cone */
.cta { background: linear-gradient(180deg, rgba(160, 185, 255, 0.07), rgba(160, 185, 255, 0.015) 55%, transparent), var(--panel); border-color: rgba(160, 185, 255, 0.14); box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.07); }
.cta::before { display: none; }
.cta::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(244, 194, 91, 0.5) 50%, transparent); pointer-events: none; }

/* History drawer */
.hist-sum { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px; border-radius: 20px; border: 1px solid var(--line); background: linear-gradient(135deg, rgba(244, 194, 91, 0.08), rgba(255, 255, 255, 0.03)); }
.conf.mini { width: 76px; height: 76px; }
.hs-total small { display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.hs-total b { font-family: var(--display); font-size: 24px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.hs-total.pos b { color: var(--bull); }
.hs-total.neg b { color: var(--bear); }
.hs-counts { display: flex; justify-content: space-between; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); }
.hs-counts span { display: grid; gap: 1px; }
.hs-counts b { font-family: var(--display); font-size: 16px; color: var(--ink); }
.hs-counts .good b { color: var(--bull); }
.hs-counts .bad b { color: var(--bear); }
#histFilter { display: flex; width: 100%; }
#histFilter button { flex: 1 0 auto; padding: 0 8px; font-size: 12.5px; }
#histFilter button i { margin-left: 5px; padding: 1px 6px; }
.hist-list { display: grid; gap: 14px; }
.hist-group { display: grid; gap: 8px; }
.hist-day { margin: 4px 2px 0; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.hist-row { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 10px; gap: 12px; align-items: center; width: 100%; padding: 12px 14px; text-align: left; border-radius: 18px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.035); cursor: pointer; transition: transform 0.25s var(--ease), background 0.25s, border-color 0.25s; }
.hist-row:hover { transform: translateY(-1px); border-color: var(--line-strong); background: rgba(255, 255, 255, 0.065); }
.hist-row:active { transform: scale(0.985); }
.hist-row.open { border-color: rgba(244, 194, 91, 0.3); }
.hist-row.loading { opacity: 0.55; pointer-events: none; }
.hr-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; }
.hr-icon svg { width: 20px; height: 20px; }
.hr-icon.buy { color: var(--bull); background: rgba(45, 226, 160, 0.12); }
.hr-icon.sell { color: var(--bear); background: rgba(255, 93, 115, 0.12); }
.hr-main { display: grid; gap: 2px; min-width: 0; }
.hr-main b { font-size: 15px; }
.hr-main small { overflow: hidden; font-size: 12px; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.hr-side { display: grid; justify-items: end; gap: 4px; }
.hr-side strong { font-family: var(--display); font-size: 15px; font-variant-numeric: tabular-nums; }
.hr-side strong.pos { color: var(--bull); }
.hr-side strong.neg { color: var(--bear); }
.hr-side .state-pill { padding: 3px 10px; font-size: 11px; }
.hr-chev { width: 7px; height: 7px; justify-self: center; border-top: 2px solid var(--muted); border-right: 2px solid var(--muted); opacity: 0.7; transform: rotate(45deg); transition: transform 0.25s var(--ease), border-color 0.25s; }
.hist-row:hover .hr-chev { border-color: var(--gold); transform: translateX(2px) rotate(45deg); }
.hist-empty { display: grid; justify-items: center; gap: 10px; padding: 36px 16px; text-align: center; border-radius: 20px; border: 1px dashed var(--line-strong); }
.hist-empty b { font-family: var(--display); font-size: 15px; }
.hist-empty p { max-width: 280px; font-size: 13px; color: var(--muted); }
.hist-note { font-size: 12px; color: var(--muted); }
.hist-note summary { cursor: pointer; }
.hist-note p { margin-top: 8px; line-height: 1.5; }

/* Signal explanation */
.res-insight { padding: 18px 16px; }
.know-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.know-chip { display: grid; gap: 2px; min-width: 0; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.035); }
.know-chip small { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.know-chip b { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.know-chip.good { border-color: rgba(45, 226, 160, 0.28); }
.know-chip.good b { color: var(--bull); }
.know-chip.warn { border-color: rgba(244, 194, 91, 0.32); }
.know-chip.warn b { color: var(--gold); }
.know-chip.bad { border-color: rgba(255, 93, 115, 0.38); }
.know-chip.bad b { color: var(--bear); }
.insight { border-top: 1px solid var(--line); }
.insight summary { position: relative; padding: 13px 22px 13px 0; font-size: 14px; font-weight: 800; cursor: pointer; list-style: none; }
.insight summary::-webkit-details-marker { display: none; }
.insight summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 7px; height: 7px; margin-top: -5px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform 0.3s var(--ease); }
.insight[open] summary::after { margin-top: -2px; transform: rotate(-135deg); }
.insight p { padding: 0 0 14px; font-size: 13.5px; line-height: 1.65; color: #c9d3ee; }
@media (min-width: 720px) { .know-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); } }


/* Cabinet tabs: Analysis / Request / History are always available */
.bottom-nav button { display: grid; justify-items: center; gap: 2px; padding: 8px 0; border: 0; border-radius: 18px; background: none; font-size: 11px; font-weight: 800; color: var(--muted); cursor: pointer; transition: background 0.3s, color 0.3s; }
.bottom-nav button svg { width: 20px; height: 20px; }
.bottom-nav button.active { background: rgba(244, 194, 91, 0.12); color: var(--gold); }
@media (min-width: 720px) {
  .bottom-nav { left: 50%; right: auto; width: min(460px, calc(100% - 24px)); transform: translateX(-50%); }
}
@media (min-width: 980px) {
  .bottom-nav { display: grid; }
  .cab-page { padding-bottom: 120px; }
}
.analysis-empty { display: grid; justify-items: center; gap: 10px; padding: 44px 20px; text-align: center; }
.analysis-empty svg { width: 40px; height: 40px; color: var(--muted); }
.analysis-empty b { font-family: var(--display); font-size: 16px; }
.analysis-empty p { max-width: 320px; margin-bottom: 6px; font-size: 13.5px; color: var(--muted); }
@media (min-width: 720px) { .analysis-empty { width: min(820px, 100%); margin-inline: auto; } }

/* Chart layer toggles */
.layer-chips { display: flex; gap: 6px; margin: 0 2px 10px; }
.layer-chips .chip { height: 28px; padding: 0 12px; font-size: 12px; }

/* Native summary: the same indicator votes the signal check uses */
.sum-pane { padding: 4px 2px 8px; }
.sum-pane .gauge { max-width: 260px; }
.sum-verdict { margin-top: -6px; text-align: center; }
.sum-verdict b { display: block; font-family: var(--display); font-size: 19px; text-transform: uppercase; }
.sum-verdict small { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.sum-verdict.bull b { color: var(--bull); }
.sum-verdict.bear b { color: var(--bear); }
.sum-verdict.neutral b { color: var(--neutral); }
.sum-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 16px 0 12px; }
.sum-counts span { padding: 12px 6px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); text-align: center; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.sum-counts b { display: block; font-family: var(--display); font-size: 22px; letter-spacing: 0; color: var(--ink); }
.sum-counts .bull b { color: var(--bull); }
.sum-counts .bear b { color: var(--bear); }
.sum-match { margin-bottom: 4px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); font-size: 13px; line-height: 1.45; text-align: center; color: var(--muted); }
.sum-match.ok { color: var(--ink); background: rgba(244, 194, 91, 0.08); }

.chart-seg { min-width: 0; max-width: 360px; }
.chart-seg button { min-width: 0; padding: 0 6px; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }

/* Desktop: pill, title and ring share one row; the reasons run below */
@media (min-width: 900px) {
  .res-head { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "pill info ring" "reasons reasons reasons"; column-gap: 24px; row-gap: 4px; }
  .res-head .res-top { display: contents; }
  .res-head .side-pill { grid-area: pill; }
  .res-head .conf { grid-area: ring; }
  .res-head .res-info { grid-area: info; }
  .res-head .res-reasons, .res-head .res-wait { grid-area: reasons; }
}

/* Weekend outlook and risk management */
.desk-closed { margin-top: 10px; padding: 10px 14px; border-radius: 14px; font-size: 13px; line-height: 1.5; color: #ffd98a; background: rgba(244, 194, 91, 0.09); border: 1px solid rgba(244, 194, 91, 0.28); }
.outlook-note { padding: 10px 14px; border-radius: 14px; font-size: 13px; line-height: 1.5; color: #ffd98a; background: rgba(244, 194, 91, 0.09); border: 1px solid rgba(244, 194, 91, 0.26); }
.res-risk { display: grid; gap: 12px; padding: 18px 16px; }
.res-risk .card-title { margin-bottom: 0; }
.risk-form { display: grid; gap: 12px; }
.risk-field, .risk-pct { display: grid; gap: 6px; min-width: 0; }
.risk-field span, .risk-pct span { font-size: 12px; font-weight: 700; color: var(--muted); }
.risk-field input { width: 100%; height: 44px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--line-strong, rgba(160, 185, 255, 0.24)); background: rgba(255, 255, 255, 0.04); color: var(--ink); font: inherit; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; outline: none; transition: border-color 0.25s, box-shadow 0.25s; }
.risk-field input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(244, 194, 91, 0.16); }
.risk-field input::placeholder { color: rgba(141, 155, 189, 0.6); font-weight: 600; }
.risk-pct .seg { width: 100%; }
.risk-pct .seg button { padding: 0 8px; }
.risk-note { font-size: 12.5px; line-height: 1.5; color: #ffd98a; }
.risk-out { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.risk-cell { display: grid; gap: 3px; min-width: 0; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); }
.risk-cell span { font-size: 11px; font-weight: 700; color: var(--muted); }
.risk-cell b { font-family: var(--display); font-size: 15px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.risk-cell.gold b { color: var(--gold); }
.risk-cell.bear b { color: var(--bear); }
.risk-cell.warn b { color: #ffd98a; font-size: 13px; }
.risk-table { display: grid; gap: 2px; }
.risk-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 9px 2px; font-size: 13px; border-bottom: 1px solid var(--line); }
.risk-row em { font-style: normal; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.risk-row b { min-width: 74px; text-align: right; color: var(--bull); font-variant-numeric: tabular-nums; }
.risk-row.total { border-bottom: 0; font-weight: 800; }
.risk-rule { font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.res-risk .card-title, .res-plan .card-title { flex-wrap: wrap; row-gap: 2px; }
.res-risk .card-title h3 { white-space: nowrap; }

.layer-chips .chip { height: 30px; padding: 0 12px 0 10px; font-size: 12px; display: inline-flex; align-items: center; gap: 7px; }
.layer-chips .chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sw, var(--gold)); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08); }
.layer-chips .chip:nth-child(1) { --sw: linear-gradient(135deg, #ff7d92 50%, #4fe8b1 50%); }
.layer-chips .chip:nth-child(2) { --sw: #5fe3ff; }
.layer-chips .chip:nth-child(3) { --sw: #eaf0ff; }
.layer-chips .chip.active::before { box-shadow: 0 0 0 2px rgba(26, 18, 4, 0.35); }
/* Cabinet tab bar: docked like a native app on phones, a floating capsule on larger screens */
.bottom-nav { left: 0; right: 0; bottom: 0; width: auto; transform: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); border: 0; border-top: 1px solid var(--line-strong); border-radius: 22px 22px 0 0; background: rgba(9, 13, 25, 0.95); box-shadow: 0 -14px 34px -14px rgba(0, 0, 0, 0.75); }
.bottom-nav button { position: relative; gap: 4px; min-height: 56px; padding: 9px 4px 6px; border-radius: 16px; font-size: 11px; -webkit-tap-highlight-color: transparent; }
.bottom-nav button svg { width: 24px; height: 24px; transition: transform 0.3s var(--ease); }
.bottom-nav button.active { background: none; color: var(--gold); }
.bottom-nav button.active svg { transform: translateY(-1px) scale(1.06); }
.bottom-nav button.active::before { content: ""; position: absolute; top: -7px; left: 50%; width: 28px; height: 3px; margin-left: -14px; border-radius: 0 0 3px 3px; background: var(--gold); box-shadow: 0 0 12px rgba(244, 194, 91, 0.7); }
.bottom-nav button:active { background: rgba(255, 255, 255, 0.06); }
.bottom-nav button:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
@media (min-width: 720px) {
  .bottom-nav { left: 50%; right: auto; bottom: 14px; width: min(460px, calc(100% - 24px)); transform: translateX(-50%); padding: 6px; border: 1px solid var(--line-strong); border-radius: 24px; }
  .bottom-nav button.active { background: rgba(244, 194, 91, 0.12); }
  .bottom-nav button.active::before { display: none; }
}
@media (min-width: 900px) {
  .res-head { grid-template-areas: "pill info ring" "reasons reasons reasons" "note note note"; }
  .res-head .outlook-note { grid-area: note; margin-top: 10px; }
}
/* Flat tab bar: no frame, no rounded top edge */
.bottom-nav { padding: 4px 6px calc(4px + env(safe-area-inset-bottom)); border: 0; border-top: 1px solid rgba(160, 185, 255, 0.1); border-radius: 0; background: #0a0f1d; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.bottom-nav button { min-height: 54px; margin: 0 2px; border-radius: 14px; }
.bottom-nav button.active { background: rgba(244, 194, 91, 0.1); }
.bottom-nav button.active::before { display: none; }
.bottom-nav button.active svg { transform: none; }
@media (min-width: 720px) {
  .bottom-nav { border: 1px solid rgba(160, 185, 255, 0.14); border-radius: 20px; background: rgba(10, 15, 29, 0.94); box-shadow: 0 16px 40px -14px rgba(0, 0, 0, 0.7); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
}
/* Layer toggles */
.layer-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 2px 0 10px; }
.layer-chips .chip { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.035); color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.layer-chips .chip::before { width: 10px; height: 10px; box-shadow: none; opacity: 0.4; transition: opacity 0.25s, box-shadow 0.25s; }
.layer-chips .chip.active { background: rgba(244, 194, 91, 0.1); border-color: rgba(244, 194, 91, 0.5); color: var(--ink); }
.layer-chips .chip.active::before { opacity: 1; box-shadow: 0 0 8px rgba(255, 255, 255, 0.35); }
.layer-chips .chip:active { transform: scale(0.97); }
@media (min-width: 560px) { .layer-chips { display: flex; } .layer-chips .chip { padding: 0 16px 0 14px; } }

/* Risk calculator */
.risk-form { display: grid; gap: 14px; }
.risk-field input { height: 48px; }
.risk-apply { width: 100%; height: 48px; justify-content: center; }
.risk-result { display: grid; gap: 10px; }
.risk-result:empty { display: none; }
.risk-cell small { font-size: 11px; color: var(--muted); }
.risk-out { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.risk-alert { display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; font-size: 13px; line-height: 1.5; border: 1px solid rgba(244, 194, 91, 0.3); background: rgba(244, 194, 91, 0.09); color: #ffd98a; }
.risk-alert b { font-size: 13.5px; }
.risk-alert p { margin: 0; color: #e6d3a5; }
.risk-alert.bad { border-color: rgba(255, 93, 115, 0.4); background: rgba(255, 93, 115, 0.1); color: #ff9aa9; }
.risk-alert.bad p { color: #f2c3ca; }
@media (min-width: 720px) {
  .risk-form { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
  .risk-field, .risk-apply { grid-column: 1 / -1; }
}.risk-out { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.risk-out .risk-cell:nth-child(3) { grid-column: 1 / -1; }
@media (min-width: 720px) { .risk-out { grid-template-columns: repeat(3, minmax(0, 1fr)); } .risk-out .risk-cell:nth-child(3) { grid-column: auto; } }
.risk-out { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.risk-out .risk-cell:nth-child(3) { grid-column: 1 / -1; }
@media (min-width: 720px) { .risk-out { grid-template-columns: repeat(3, minmax(0, 1fr)); } .risk-out .risk-cell:nth-child(3) { grid-column: auto; } }
.feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feature { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 359px) { .feature-grid { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 900px) { .feature-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.req-main { flex-wrap: wrap; row-gap: 6px; min-width: 0; }
.req-main > * { min-width: 0; }
@media (max-width: 360px) { .req-id { font-size: 17px; letter-spacing: 0.04em; } .req { padding: 14px 12px; } }

.stats-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.stats-tools p { margin: 0; font-size: 13px; color: var(--muted); }
#clearStats.armed { background: #ff3b57; box-shadow: 0 0 0 3px rgba(255, 59, 87, 0.3); animation: ring-pulse 1.2s infinite; }
.log-body small { overflow-wrap: anywhere; line-height: 1.5; }
.log-kind.visit { color: #5fe3ff; background: rgba(95, 227, 255, 0.12); }.log-kind.visit { color: #d7e0f7; background: rgba(201, 211, 238, 0.12); }

.stats-since { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.danger-zone { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; margin-top: 36px; border-color: rgba(255, 93, 115, 0.22); }
.danger-zone h2 { font-size: 15px; }
.danger-zone p { margin: 4px 0 0; font-size: 13px; color: var(--muted); max-width: 520px; }
.confirm-backdrop { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; background: rgba(3, 6, 14, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.confirm-backdrop[hidden] { display: none; }
.confirm { width: min(440px, 100%); padding: 24px 22px; border-radius: 22px; border: 1px solid rgba(255, 93, 115, 0.35); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9); animation: row-in 0.35s var(--ease) both; }
.confirm h3 { font-family: var(--display); font-size: 17px; line-height: 1.35; }
.confirm p { margin: 10px 0 20px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.confirm-actions .btn { min-height: 46px; padding: 0 12px; justify-content: center; }
/* Cooldown button: a rounded progress fill inside the track, no hover lift, no arrow */
.btn-gold.cooling { isolation: isolate; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.06); background-clip: padding-box; box-shadow: none; }
.btn-gold.cooling::before { content: ""; position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 3px; width: max(0px, calc(var(--cd, 0%) - 6px)); border-radius: 999px; background: linear-gradient(90deg, rgba(244, 194, 91, 0.32), rgba(244, 194, 91, 0.55)); transition: width 1s linear; }
.btn-gold.cooling .arrow { display: none; }
.btn[disabled]:hover, .btn[disabled]:active { transform: none; border-color: var(--line-strong); }
.btn[disabled]:hover .arrow { transform: none; }

/* Reduced-motion users still need the loader and the result ring to move: they are feedback, not decoration. */
@media (prefers-reduced-motion: reduce) {
  .orbit .a1 { animation: spin 2.2s linear infinite !important; }
  .orbit .a2 { animation: spin 3s linear infinite reverse !important; }
  .orbit .a3 { animation: spin 4s linear infinite !important; }
  .orbit .core-bar { animation: bar-rise 1.2s ease-in-out infinite alternate !important; }
  .analyzing li.active::before, .btn .spin { animation: spin 1.2s linear infinite !important; }
  .think-progress i, .conf .front, .conf .knob { transition-duration: 1.2s !important; }
}
/* The tab bar stays on top and usable with the history drawer open and during the analysis animation */
.bottom-nav { z-index: 90; transition: opacity 0.3s var(--ease); }
.drawer-inner { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
body.thinking .bottom-nav { display: grid; opacity: 0.45; pointer-events: none; }
body.thinking .cab-page { padding-bottom: 110px; }
.layer-notes { display: grid; gap: 8px; margin: 10px 0 2px; }
.layer-notes p { position: relative; margin: 0; padding: 0 0 0 16px; font-size: 12.5px; line-height: 1.55; color: #c9d3ee; }
.layer-notes p::before { content: ""; position: absolute; left: 0; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--sw, var(--gold)); }.drawer-inner { grid-auto-rows: max-content; }