/* Wolf Scanner — shared theme + components.
   Linked first in every page <head> so the theme variables, the global
   navigation bar and a few cross-page components live in ONE place instead of
   being copy-pasted into each template. Page-specific CSS still lives in each
   page's own <style> block and can override anything here. */

:root {
    --wolf-blue: #00d2ff;
    --wolf-blue-dim: rgba(0, 210, 255, 0.16);
    --wolf-gold: #ffcf4b;
    --wolf-champagne: #e8ca8d;     /* nav accent — muted champagne, quieter than the data gold */
    --wolf-dark: #171a26;
    --wolf-slate: #0d1220;
    --wolf-bg: #0d1220;            /* alias some pages use */
    /* Surfaces: a touch lighter and cooler-neutral than before, so cards
       separate from the page instead of melting into it. */
    --wolf-card: rgba(33, 40, 62, 0.82);
    --wolf-card-hi: rgba(41, 49, 74, 0.82);   /* hover / raised */
    --wolf-border: rgba(255, 255, 255, 0.10);
    --wolf-border-hi: rgba(255, 255, 255, 0.18);
    --wolf-muted: #93a3b8;
    --wolf-text: #f2f6fb;
    --long: #16a34a;
    --long-bg: rgba(22, 163, 74, 0.14);
    --short: #dc2626;
    --short-bg: rgba(220, 38, 38, 0.14);
    --radius: 14px;
    /* Card shadow + a 1px inner top highlight — the highlight is what makes dark
       glass cards read as "lit from above" instead of flat rectangles. */
    --shadow: 0 16px 44px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --page-max: 1440px;        /* ONE shared content width for every page + the nav */
    /* ONE shared background for every page. Rebuilt 2026-08 for depth: the old
       version was a flat near-black with two corner glows, which read as
       "unfinished dark mode". Now a soft vertical lift (lighter at the top,
       where the eye lands first), an indigo/violet mid-tone so the base is not
       dead cold black, the brand cyan + gold as quiet corner auroras, a
       vignette to pull focus inward, and a finer, dimmer grid.
       Order matters: gradients paint front-to-back, so the grid is listed
       first and the base wash last. */
    --page-bg-glow:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 56px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 56px),
        radial-gradient(ellipse 120% 70% at 50% 120%, rgba(0, 0, 0, 0.55), transparent 60%),
        radial-gradient(ellipse 90% 55% at 12% -8%, rgba(0, 190, 255, 0.13), transparent 62%),
        radial-gradient(ellipse 70% 50% at 92% 8%, rgba(138, 110, 255, 0.10), transparent 60%),
        radial-gradient(ellipse 80% 60% at 88% 96%, rgba(255, 190, 90, 0.055), transparent 58%),
        linear-gradient(178deg, #151c2e 0%, #111726 38%, #0d1220 100%);
}

/* ── Global polish — one copy here instead of per-page duplicates ─────────── */
* { -webkit-tap-highlight-color: transparent; }
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-variant-numeric: tabular-nums;   /* every metric column lines up */
}
/* Brand signature: a hairline beam across the very top of every page. */
body::before {
    content: ""; position: fixed; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent 2%, var(--wolf-blue) 30%, var(--wolf-gold) 70%, transparent 98%);
    opacity: .55; z-index: 2147483000; pointer-events: none;
}
::selection { background: rgba(0, 210, 255, 0.32); color: #fff; }
:focus-visible { outline: 2px solid var(--wolf-blue); outline-offset: 2px; }
html { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 210, 255, 0.35); }

/* ── Global navigation bar (shared partial _nav.html) ─────────────────────
   Redesigned 2026-07-05: typography-led "private terminal" look. No emoji, no
   per-page rainbow pills — quiet letterspaced small-caps in silver, a single
   champagne accent for the page you are ON (hairline underline + faint tint),
   colour otherwise reserved for the live regime chips. */
.tb-nav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--wolf-border); }

.nav-pill {
    position: relative; display: inline-flex; align-items: center;
    font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
    padding: 7px 10px; border-radius: 8px; text-decoration: none;
    border: 1px solid transparent; color: var(--wolf-muted); background: transparent;
    transition: color .18s, background .18s, border-color .18s;
}
/* chips + lang + logout travel as one unit: flush right on a shared row,
   wrapping to a clean full second row when the pills need the width —
   never an orphaned lone "Logout" (the old wrap behaviour). */
.nav-status { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; }
/* hairline champagne underline, grows in on hover / stays lit on the active page */
.nav-pill::after {
    content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--wolf-champagne), transparent);
    transform: scaleX(0); opacity: 0; transition: transform .22s ease, opacity .22s ease;
}
.nav-pill:hover { color: var(--wolf-text); background: rgba(255, 255, 255, 0.035); }
.nav-pill:hover::after { transform: scaleX(1); opacity: .55; }
.nav-pill.active {
    color: var(--wolf-champagne);
    background: linear-gradient(180deg, rgba(232, 202, 141, 0.09), rgba(232, 202, 141, 0.02));
    border-color: rgba(232, 202, 141, 0.26);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.nav-pill.active::after { transform: scaleX(1); opacity: .9; }
.nav-pill.active:hover { color: var(--wolf-champagne); }
.nav-pill:active { transform: translateY(1px); }
/* logout stays quiet until you mean it */
.nav-pill.logout:hover { color: #f87171; background: rgba(239, 68, 68, 0.08); }
/* thin divider between the pages and the session controls */
.nav-sep { width: 1px; height: 15px; background: var(--wolf-border); margin: 0 8px; flex: 0 0 auto; }
/* group dividers between nav clusters (overview · trading · markets · admin):
   a hair taller with a soft vertical fade so each reads as a section break
   rather than a hard rule. */
.nav-gsep { height: 20px; margin: 0 10px;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,.14) 22%, rgba(255,255,255,.14) 78%, transparent); }

@media (max-width: 720px) {
    .tb-nav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-top: 8px; scrollbar-width: none; }
    .tb-nav::-webkit-scrollbar { display: none; }
    .tb-nav .nav-pill { flex: 0 0 auto; white-space: nowrap; }
    /* right-edge fade = "there's more, swipe" — without it the cut-off pills
       read as a rendering bug and nobody finds the regime chips at the end */
    .tb-nav {
        mask-image: linear-gradient(90deg, #000 88%, transparent 99%);
        -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 99%);
    }
}

/* Standalone wrapper so the nav looks right on pages that don't have index's
   elaborate header. (Blur softened to 10px — 2026 glassmorphism favours subtler
   translucency over heavy blur.) */
.nav-standalone {
    max-width: var(--page-max); margin: 0 auto 14px; padding: 10px 14px;
    background: rgba(23, 26, 38, 0.82); border: 1px solid var(--wolf-border);
    border-radius: var(--radius); box-shadow: var(--shadow);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    position: sticky; top: 8px; z-index: 200;   /* glass nav stays reachable while scrolling */
}
.nav-standalone .tb-nav { border-top: none; padding-top: 0; }

/* ── Cross-page BTC regime chip (lives in the nav, fed by /api/dashboard_summary)
   so the trend that gates every trade is visible on EVERY page, not just home.
   It is the single most important market-state signal, so it reads as a live
   status indicator — pulsing dot + directional arrow + regime-tinted glow — not
   just another grey pill. Arrow (▲/▼/◆) carries the meaning too → colourblind-safe. */
.nav-regime {
    margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
    font-size: .6rem; font-weight: 700; letter-spacing: .1em;
    padding: 5px 12px 5px 10px; border-radius: 999px; white-space: nowrap;
    border: 1px solid var(--wolf-border); color: var(--wolf-muted);
    background: rgba(255, 255, 255, 0.03);
    transition: border-color .2s, box-shadow .2s, background .2s, color .2s;
}
.nav-regime .nr-tag { opacity: .6; }
.nav-regime .nr-state { font-weight: 800; }
.nav-regime .nr-dot {
    width: 7px; height: 7px; border-radius: 50%; background: currentColor;
    flex: 0 0 auto; box-shadow: 0 0 6px currentColor;
}
/* BULL — green, lit + pulsing (glow softened for the quieter 2026-07 nav) */
.nav-regime.bull {
    color: #4ade80; border-color: rgba(34,197,94,.4);
    background: linear-gradient(180deg, rgba(34,197,94,.14), rgba(34,197,94,.04));
    box-shadow: 0 0 10px rgba(34,197,94,.18), inset 0 1px 0 rgba(255,255,255,.06);
}
.nav-regime.bull .nr-dot { animation: nr-pulse-green 1.9s ease-out infinite; }
/* BEAR — red, lit + pulsing */
.nav-regime.bear {
    color: #f87171; border-color: rgba(239,68,68,.4);
    background: linear-gradient(180deg, rgba(239,68,68,.14), rgba(239,68,68,.04));
    box-shadow: 0 0 10px rgba(239,68,68,.18), inset 0 1px 0 rgba(255,255,255,.06);
}
.nav-regime.bear .nr-dot { animation: nr-pulse-red 1.9s ease-out infinite; }
/* NEUTRAL — gold, calm (no pulse: nothing is gating right now) */
.nav-regime.neutral {
    color: var(--wolf-gold); border-color: rgba(255,207,75,.45);
    background: linear-gradient(180deg, rgba(255,207,75,.15), rgba(255,207,75,.04));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
/* OFF — filter disabled, muted */
.nav-regime.off { color: var(--wolf-muted); border-color: var(--wolf-border); background: rgba(255,255,255,.03); }
.nav-regime.off .nr-dot { box-shadow: none; opacity: .5; }
/* Volatility regime variants (same chip component, VOL semantics):
   HIGH = lit cyan (big moves), NORMAL = calm, DEAD = greyed red (chop warning). */
.nav-regime.vol-high {
    color: var(--wolf-blue); border-color: rgba(0,210,255,.5);
    background: linear-gradient(180deg, rgba(0,210,255,.20), rgba(0,210,255,.06));
    box-shadow: 0 0 14px rgba(0,210,255,.25), inset 0 1px 0 rgba(255,255,255,.06);
}
.nav-regime.vol-normal {
    color: #b9c6d8; border-color: rgba(255,255,255,.16);
    background: rgba(255,255,255,.04);
}
.nav-regime.vol-dead {
    color: #fca5a5; border-color: rgba(239,68,68,.4);
    background: rgba(239,68,68,.08);
}
.nav-regime.vol-dead .nr-dot { box-shadow: none; opacity: .6; }
@keyframes nr-pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(34,197,94,.6), 0 0 6px #4ade80; }
    70% { box-shadow: 0 0 0 7px rgba(34,197,94,0), 0 0 6px #4ade80; }
    100% { box-shadow: 0 0 0 0 rgba(34,197,94,0), 0 0 6px #4ade80; }
}
@keyframes nr-pulse-red {
    0% { box-shadow: 0 0 0 0 rgba(239,68,68,.6), 0 0 6px #f87171; }
    70% { box-shadow: 0 0 0 7px rgba(239,68,68,0), 0 0 6px #f87171; }
    100% { box-shadow: 0 0 0 0 rgba(239,68,68,0), 0 0 6px #f87171; }
}
@media (prefers-reduced-motion: reduce) { .nav-regime .nr-dot { animation: none !important; } }
@media (max-width: 720px) { .nav-regime { margin-left: 8px; } }

/* ── Protection status badges (SL/TP) — used on Account + Dashboard ─────── */
.prot-badge { display: inline-flex; align-items: center; gap: 4px; font-size: .6rem; font-weight: 800;
    letter-spacing: .03em; padding: 2px 8px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.prot-yes { color: #34d399; background: rgba(16,185,129,0.14); border-color: rgba(16,185,129,0.45); }
.prot-no  { color: #f87171; background: rgba(239,68,68,0.16); border-color: rgba(239,68,68,0.55); }
.prot-partial { color: var(--wolf-gold); background: rgba(255,207,75,0.12); border-color: rgba(255,207,75,0.4); }

/* ════════════════════════════════════════════════════════════════════════════
   Strategy-2 page + BB-Terminal-inspired signal scorecard (added 2026-06-28)
   A compact "is the confluence bullish or bearish right now" card: a 0–100 ring
   gauge + a bias chip + a factor breakdown. Reused by the Strategy-2 page and the
   home Strategy-1 summary so both strategies read as parallel scorecards.
   ════════════════════════════════════════════════════════════════════════════ */
.scorecard {
    background: var(--wolf-card); border: 1px solid var(--wolf-border);
    border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 18px; display: flex; flex-direction: column; gap: 14px;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    transition: border-color .2s, box-shadow .2s;
}
.scorecard:hover { border-color: rgba(0, 210, 255, 0.22); }
.scorecard-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.gauge {
    --score: 50; --ring: var(--wolf-gold);
    position: relative; width: 132px; height: 132px; border-radius: 50%;
    background: conic-gradient(var(--ring) calc(var(--score) * 1%), rgba(255,255,255,.06) 0);
    display: grid; place-items: center; flex: 0 0 auto;
    transition: background .5s ease;
}
.gauge::before {
    content: ""; position: absolute; inset: 11px; border-radius: 50%;
    background: var(--wolf-slate); border: 1px solid var(--wolf-border);
}
.gauge-inner { position: relative; text-align: center; }
.gauge-score { font-size: 2.1rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.gauge-cap { font-size: .56rem; font-weight: 700; letter-spacing: .12em; color: var(--wolf-muted); text-transform: uppercase; }
.scorecard-meta { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.bias-chip {
    display: inline-flex; align-items: center; gap: 6px; width: fit-content;
    font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    padding: 6px 12px; border-radius: 999px; border: 1px solid var(--wolf-border);
}
.bias-chip.long    { color: var(--long);  background: var(--long-bg);  border-color: rgba(22,163,74,.4); }
.bias-chip.short   { color: var(--short); background: var(--short-bg); border-color: rgba(220,38,38,.4); }
.bias-chip.neutral { color: var(--wolf-gold); background: rgba(255,207,75,.10); border-color: rgba(255,207,75,.35); }

.factor-list { display: flex; flex-direction: column; gap: 3px; }
.factor-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 8px 11px; border-radius: 10px; background: rgba(255,255,255,.02);
}
.factor-row .fac-label { font-size: .78rem; color: var(--wolf-text); }
.factor-row .fac-weight { font-size: .62rem; color: var(--wolf-muted); margin-left: 6px; }
.fac-state {
    font-size: .64rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    padding: 3px 9px; border-radius: 999px; min-width: 56px; text-align: center;
}
.fac-state.bull    { color: var(--long);  background: var(--long-bg); }
.fac-state.bear    { color: var(--short); background: var(--short-bg); }
.fac-state.neutral { color: var(--wolf-muted); background: rgba(255,255,255,.05); }

/* tiny inline-SVG sparkline of recent scores (no chart library) */
.sparkline { width: 100%; height: 46px; display: block; }
.sparkline polyline { fill: none; stroke: var(--wolf-blue); stroke-width: 2; vector-effect: non-scaling-stroke; }

/* Primary action button. Defined once here (shared) so pages that link app.css —
   e.g. the Account page's live-strategy Save — get the branded button instead of
   an unstyled default. Pages with their own inline .btn-wolf still override. */
.btn-wolf {
    background: linear-gradient(180deg, #2be0ff, #00b8e6);
    border: none;
    color: #001018;
    font-weight: 800;
    font-size: 0.8rem;
    letter-spacing: .02em;
    padding: 8px 16px;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 210, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: transform .15s, box-shadow .15s, filter .15s;
}
.btn-wolf:hover { filter: brightness(1.08); color: #001018; transform: translateY(-1px); box-shadow: 0 5px 18px rgba(0,210,255,.35), inset 0 1px 0 rgba(255,255,255,.35); }
.btn-wolf:active { transform: translateY(1px) scale(.99); }
.btn-wolf:disabled { opacity: .65; transform: none; cursor: default; filter: none; }
