/* ==========================================================================
   NOVA v2 (2026-10-13) -- full sci-fi "mission control" look. Default skin.
   Scoped to html[data-fx="nova"] (layered on data-theme="dark"); removing the
   attribute restores the previous look exactly. Decoration + tokens only: no
   behaviour, no trading logic. Motion is transform/opacity based, pauses in
   hidden tabs and is disabled under prefers-reduced-motion.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

@property --nova-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

html[data-fx="nova"][data-theme] {
  --font-ui: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-disp: 'Rajdhani', 'Inter', 'Segoe UI', sans-serif;
  --font-num: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --disp-w: 700; --disp-ls: .04em;

  --canvas: #03050b; --surface: #0a0f22; --surface-2: #0f1733; --sunken: #060a18;
  --line: rgba(80, 130, 255, .20); --line-strong: rgba(34, 211, 238, .38);
  --ink-1: #ecf2ff; --ink-2: #a3b4de; --ink-3: #7384b3;
  --brand: #ecf2ff; --mark-from: #22d3ee; --mark-to: #8b5cf6;
  --accent: #22d3ee; --accent-2: #8b5cf6; --accent-3: #ec4899; --accent-ink: #67e8f9;
  --accent-soft: rgba(34, 211, 238, .13); --accent-contrast: #021016;
  --buy: #2ee6a6; --buy-soft: rgba(46, 230, 166, .13);
  --sell: #ff5470; --sell-soft: rgba(255, 84, 112, .14);
  --glow-a: rgba(34, 211, 238, .38); --glow-b: rgba(139, 92, 246, .32);
  --sh-1: inset 0 1px 0 rgba(255, 255, 255, .04);
  --sh-2: inset 0 1px 0 rgba(255, 255, 255, .05), 0 12px 40px -18px #000;
  --sh-3: 0 24px 60px -20px rgba(34, 211, 238, .35);
  --r-xs: 3px; --r-sm: 4px; --r: 6px; --r-lg: 8px;
  --top-bg: rgba(3, 5, 11, .72);
  --grad: linear-gradient(135deg, #22d3ee 0%, #3b82f6 50%, #8b5cf6 100%);
  --grad-ink: #021016;
  --grad-glow: 0 8px 26px -10px rgba(34, 211, 238, .8);
  --nav-on-bg: rgba(34, 211, 238, .14); --nav-on-ink: #67e8f9;
  --hero-bg: transparent;
  --bg-art: none;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --cut: 14px;
  --edge: linear-gradient(135deg, rgba(34, 211, 238, .75), rgba(139, 92, 246, .55) 55%, rgba(34, 211, 238, .18));
  --fill: linear-gradient(160deg, #101a3a 0%, #090e20 100%);
  color-scheme: dark;
}

/* ============================ AMBIENT WORLD ============================ */
html[data-fx="nova"] { background: var(--canvas); }
html[data-fx="nova"] body { background: transparent !important; }

/* nebula glows + static HUD grid (no decorative motion) */
html[data-fx="nova"]::before {
  content: ""; position: fixed; inset: -64px 0 0 0; z-index: -3; pointer-events: none;
  background:
    radial-gradient(55vw 45vh at 12% -5%, rgba(139, 92, 246, .34), transparent 70%),
    radial-gradient(50vw 40vh at 92% 2%, rgba(34, 211, 238, .26), transparent 70%),
    radial-gradient(45vw 40vh at 55% 112%, rgba(236, 72, 153, .14), transparent 70%),
    linear-gradient(rgba(80, 130, 255, .16) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(90deg, rgba(80, 130, 255, .16) 1px, transparent 1px) 0 0 / 64px 64px;
  -webkit-mask-image: linear-gradient(#000 25%, transparent 92%); mask-image: linear-gradient(#000 25%, transparent 92%);
}



/* ============================ TYPOGRAPHY ============================ */
html[data-fx="nova"] h1, html[data-fx="nova"] .nd-h1, html[data-fx="nova"] .hm-hero-h1 {
  font-family: var(--font-disp); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
html[data-fx="nova"] .nd-panel-t, html[data-fx="nova"] .hm-sec-h, html[data-fx="nova"] .drop .mnav-title,
html[data-fx="nova"] .strat-name {
  font-family: var(--font-disp); letter-spacing: .12em; text-transform: uppercase; font-weight: 700; font-size: 1.12em;
}
html[data-fx="nova"] .hm-sec-h::before, html[data-fx="nova"] .nd-panel-t::before {
  content: "//"; color: var(--accent); margin-right: 8px; text-shadow: 0 0 10px var(--accent);
}
html[data-fx="nova"] .nd-stat .vl, html[data-fx="nova"] .hm-snap-vl, html[data-fx="nova"] .stat-tile .value,
html[data-fx="nova"] .tbi-px, html[data-fx="nova"] .funds-v {
  font-family: var(--font-num); font-variant-numeric: tabular-nums; font-feature-settings: "zero";
}
html[data-fx="nova"] .nd-stat .lb, html[data-fx="nova"] .hm-snap-lb, html[data-fx="nova"] .stat-tile .label {
  font-family: var(--font-disp); letter-spacing: .12em; font-size: 12px; font-weight: 600; color: var(--ink-2);
}

html[data-fx="nova"] .hm-hero-h1, html[data-fx="nova"] .nd-h1 {
  text-shadow: 0 0 26px rgba(34, 211, 238, .35);
}

/* ============================ HEADER / NAV ============================ */
html[data-fx="nova"] .tbar { position: relative; background: var(--top-bg) !important; border-bottom: 0 !important; }
html[data-fx="nova"] .tbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--accent) 25%, var(--accent-2) 55%, var(--accent-3) 80%, transparent);
  background-size: 200% 100%; animation: novaEnergy 6s linear infinite; opacity: .85;
}
@keyframes novaEnergy { to { background-position: -200% 0; } }
html[data-fx="nova"] .navlink { font-family: var(--font-ui); letter-spacing: .05em; text-transform: uppercase; font-size: 12.5px; font-weight: 600; }
html[data-fx="nova"] .navlink:hover { color: var(--accent-ink); text-shadow: 0 0 12px var(--glow-a); }
html[data-fx="nova"] .navlink.on {
  background: linear-gradient(180deg, transparent, var(--accent-soft)) !important; color: var(--accent-ink) !important;
  box-shadow: inset 0 -2px 0 var(--accent), 0 12px 24px -14px var(--accent); text-shadow: 0 0 12px var(--glow-a);
}
html[data-fx="nova"] .wordmark { font-family: var(--font-disp); letter-spacing: .1em; text-transform: uppercase; font-size: 17px; font-weight: 700; }
html[data-fx="nova"] .tbar-brand-compact .mark { box-shadow: 0 0 22px -2px var(--glow-a); animation: novaBreathe 4s ease-in-out infinite; }
@keyframes novaBreathe { 50% { filter: brightness(1.25); } }
html[data-fx="nova"] .drop-panel {
  transform: translateY(-8px) scale(.97); transform-origin: top;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
  background: linear-gradient(160deg, rgba(16, 26, 58, .98), rgba(8, 12, 28, .98));
  border: 1px solid var(--line-strong); border-radius: 6px;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .85), 0 0 30px -10px var(--glow-a);
}
html[data-fx="nova"] .drop.open .drop-panel { transform: none; }

/* safety chips (kill-switch trip stays static + solid) */
html[data-fx="nova"] .sbar { background: rgba(3, 5, 11, .55); border-bottom: 1px solid var(--line); }
html[data-fx="nova"] .sb-chip { font-family: var(--font-num); font-size: 11px; border-radius: 3px; letter-spacing: .02em; }
html[data-fx="nova"] .sbar .sb-label { font-family: var(--font-disp); letter-spacing: .16em; font-size: 12.5px; font-weight: 700; }
html[data-fx="nova"] #sb-nse.ok .sb-dot, html[data-fx="nova"] #sb-mcx.ok .sb-dot { position: relative; box-shadow: none; }
html[data-fx="nova"] #sb-nse.ok .sb-dot::after, html[data-fx="nova"] #sb-mcx.ok .sb-dot::after, html[data-fx="nova"] .spick.is-on .dot::after,
html[data-fx="nova"] .status-pill.on .dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--buy);
  animation: novaPing 1.9s cubic-bezier(0, 0, .2, 1) infinite;
}
html[data-fx="nova"] .spick.is-on .dot, html[data-fx="nova"] .status-pill.on .dot { position: relative; box-shadow: none; background: var(--buy); }
html[data-fx="nova"] .sb-chip.crit .sb-dot { animation: none; }
@keyframes novaPing { to { transform: scale(2.8); opacity: 0; } }

/* ============================ CHAMFERED HUD PANELS ============================
   Edge = element background (gradient), face = ::before inset 1px, both clipped
   to the same cut-corner polygon. */
html[data-fx="nova"] .hm-tile, html[data-fx="nova"] .hm-snap-card, html[data-fx="nova"] .nd-stat,
html[data-fx="nova"] .spick, html[data-fx="nova"] .nd-panel {
  position: relative; isolation: isolate; border: 0 !important; box-shadow: none !important; overflow: hidden;
  background: var(--edge) !important;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: transform .25s var(--ease), filter .25s var(--ease);
}
html[data-fx="nova"] .hm-tile::before, html[data-fx="nova"] .hm-snap-card::before, html[data-fx="nova"] .nd-stat::before,
html[data-fx="nova"] .spick::before, html[data-fx="nova"] .nd-panel::before {
  content: ""; position: absolute; inset: 1px; z-index: -1; background: var(--fill);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
html[data-fx="nova"] .nd-panel { --cut: 20px; }
html[data-fx="nova"] .hm-tile:hover, html[data-fx="nova"] .spick:hover, html[data-fx="nova"] .nd-stat:hover {
  transform: translateY(-3px); filter: brightness(1.25) drop-shadow(0 0 14px var(--glow-a)); box-shadow: none !important; border-color: transparent !important;
}
html[data-fx="nova"] .nd-stat > *, html[data-fx="nova"] .hm-snap-card > * { position: relative; z-index: 1; }

/* hero stat gets a neon number */
html[data-fx="nova"] .nd-h1 { font-size: 38px; }
html[data-fx="nova"] .nd-stat.hero .vl { font-size: 38px; text-shadow: 0 0 22px var(--glow-a); }

/* ============================ HOME HERO + RADAR ============================ */
html[data-fx="nova"] .hm-hero {
  position: relative; overflow: hidden; border: 1px solid var(--line-strong); padding: 34px 30px;
  background:
    radial-gradient(60% 120% at 100% 50%, rgba(34, 211, 238, .13), transparent 70%),
    radial-gradient(50% 100% at 0% 0%, rgba(139, 92, 246, .16), transparent 70%),
    linear-gradient(160deg, rgba(14, 22, 50, .92), rgba(7, 11, 26, .92));
  clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px);
  box-shadow: none;
}
html[data-fx="nova"] .hm-hero-eyebrow {
  font-family: var(--font-disp); letter-spacing: .2em; font-size: 13px; font-weight: 600; color: var(--accent-ink); display: flex; align-items: center; gap: 10px;
}
html[data-fx="nova"] .hm-hero-eyebrow::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--buy); flex: none;
  box-shadow: 0 0 12px var(--buy); animation: novaBlink 1.6s steps(2, jump-none) infinite;
}
@keyframes novaBlink { 50% { opacity: .25; } }
html[data-fx="nova"] .hm-hero-h1 { font-size: 46px; line-height: 1.1; margin: 4px 0 12px; }
html[data-fx="nova"] .hm-hero-h1 span {
  opacity: 1; background: linear-gradient(90deg, #22d3ee, #8b5cf6, #ec4899, #22d3ee); background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  text-shadow: none;
}
html[data-fx="nova"] .hm-hero-sub { color: var(--ink-2); font-size: 14px; max-width: 46ch; }
html[data-fx="nova"] .hm-btn {
  border-radius: 0; font-family: var(--font-disp); letter-spacing: .1em; text-transform: uppercase; font-size: 15px; font-weight: 700; padding: 11px 24px;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
html[data-fx="nova"] .hm-btn.solid { background: var(--grad); color: var(--grad-ink); }
html[data-fx="nova"] .hm-btn.ghost { background: rgba(34, 211, 238, .08); border: 0; color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
html[data-fx="nova"] .hm-btn:hover { filter: brightness(1.15) drop-shadow(0 0 10px var(--glow-a)); }


/* ============================ QUICK LAUNCH MODULES ============================ */
html[data-fx="nova"] .hm-tiles { counter-reset: nvmod; gap: 14px; }
html[data-fx="nova"] .hm-tile { counter-increment: nvmod; padding: 18px 20px; }
html[data-fx="nova"] .hm-tile::after {
  content: "MODULE 0" counter(nvmod); position: absolute; right: 22px; top: 7px; z-index: 1;
  font-family: var(--font-num); font-size: 9px; letter-spacing: .16em; color: var(--ink-3);
}
html[data-fx="nova"] .hm-tile-nm { font-family: var(--font-disp); font-size: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
html[data-fx="nova"] .hm-tile-ic {
  background: rgba(34, 211, 238, .08); border-radius: 0; width: 44px; height: 44px; flex-basis: 44px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
html[data-fx="nova"] .hm-tile-ic svg { filter: drop-shadow(0 0 6px currentColor); }
html[data-fx="nova"] .hm-tile:hover .hm-tile-ar { color: var(--accent-ink); transform: translateX(4px); }
html[data-fx="nova"] .hm-tile-ar { transition: transform .2s var(--ease), color .2s; }

/* ============================ LOAD-IN STAGGER ============================ */
html[data-fx="nova"] .hm-hero, html[data-fx="nova"] .nd-stat, html[data-fx="nova"] .hm-snap-card,
html[data-fx="nova"] .hm-tile, html[data-fx="nova"] .spick, html[data-fx="nova"] .nd-panel { animation-fill-mode: both; }
html[data-fx="nova"] .hm-hero, html[data-fx="nova"] .nd-panel { animation: novaRise .6s var(--ease) both; }
html[data-fx="nova"] .hm-tile, html[data-fx="nova"] .spick { animation: novaRise .55s var(--ease) both; }
html[data-fx="nova"] .hm-tile:nth-child(2), html[data-fx="nova"] .spick:nth-child(2) { animation-delay: 60ms; }
html[data-fx="nova"] .hm-tile:nth-child(3), html[data-fx="nova"] .spick:nth-child(3) { animation-delay: 120ms; }
html[data-fx="nova"] .hm-tile:nth-child(4), html[data-fx="nova"] .spick:nth-child(4) { animation-delay: 180ms; }
html[data-fx="nova"] .hm-tile:nth-child(5), html[data-fx="nova"] .spick:nth-child(5) { animation-delay: 240ms; }
html[data-fx="nova"] .hm-tile:nth-child(n+6) { animation-delay: 300ms; }
@keyframes novaRise { from { opacity: 0; transform: translateY(14px); } }

/* ============================ STRATEGY TABS + CARD ============================ */
html[data-fx="nova"] .spick.is-active { background: conic-gradient(from var(--nova-a), var(--accent), var(--accent-2), var(--accent-3), var(--accent)) !important; animation: novaSpin 5s linear infinite; }
@supports not (background: conic-gradient(from var(--nova-a), red, blue)) { html[data-fx="nova"] .spick.is-active { background: var(--grad) !important; animation: none; } }
@keyframes novaSpin { to { --nova-a: 360deg; } }
html[data-fx="nova"] .spick.is-active::before { background: linear-gradient(160deg, #12204a, #0a1128); }
html[data-fx="nova"] .spick .nm { font-family: var(--font-disp); font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
html[data-fx="nova"] .spick.is-active .nm { color: var(--accent-ink); text-shadow: 0 0 10px var(--glow-a); }
html[data-fx="nova"] .spick-ic { background: rgba(34, 211, 238, .08); border-radius: 0; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }

html[data-fx="nova"] .surface.strat {
  position: relative; border: 1px solid var(--line-strong); border-radius: 2px;
  background: linear-gradient(160deg, rgba(14, 22, 50, .94), rgba(7, 11, 26, .96)); box-shadow: 0 0 60px -30px var(--glow-a);
}
html[data-fx="nova"] .surface.strat::before {
  content: ""; position: absolute; inset: 6px; pointer-events: none; z-index: 1; opacity: .8;
  background:
    linear-gradient(var(--accent), var(--accent)) top left / 18px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) top left / 2px 18px no-repeat,
    linear-gradient(var(--accent), var(--accent)) top right / 18px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) top right / 2px 18px no-repeat,
    linear-gradient(var(--accent-2), var(--accent-2)) bottom left / 18px 2px no-repeat,
    linear-gradient(var(--accent-2), var(--accent-2)) bottom left / 2px 18px no-repeat,
    linear-gradient(var(--accent-2), var(--accent-2)) bottom right / 18px 2px no-repeat,
    linear-gradient(var(--accent-2), var(--accent-2)) bottom right / 2px 18px no-repeat;
}
html[data-fx="nova"] .surface.strat .strat-head { background: linear-gradient(90deg, rgba(34, 211, 238, .10), transparent 70%); }
html[data-fx="nova"] .surface.strat .card-head .name { font-family: var(--font-disp); letter-spacing: .05em; text-transform: uppercase; font-size: 23px; font-weight: 700; }
html[data-fx="nova"] .surface.strat .card-head .icon { border-radius: 0; box-shadow: 0 0 26px -6px var(--glow-a); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
html[data-fx="nova"] .surface.strat .kn-tab { border-radius: 2px; }
html[data-fx="nova"] .surface.strat .kn-tab label { border-radius: 2px; font-family: var(--font-disp); font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
html[data-fx="nova"] .surface.strat .kn-tab input:checked + label { background: var(--grad); color: var(--grad-ink); box-shadow: 0 6px 18px -8px var(--glow-a); }
html[data-fx="nova"] .surface.strat .kn-row input { background: var(--sunken); border-color: var(--line); color: var(--ink-1); border-radius: 2px; }
html[data-fx="nova"] .surface.strat .kn-row-label { font-family: var(--font-disp); font-size: 12px; font-weight: 600; letter-spacing: .1em; }
html[data-fx="nova"] input:focus, html[data-fx="nova"] select:focus {
  border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft), 0 0 20px -6px var(--glow-a) !important; outline: none;
}
html[data-fx="nova"] input, html[data-fx="nova"] select { transition: box-shadow .2s, border-color .2s; }
html[data-fx="nova"] .kn-cta, html[data-fx="nova"] .btn.pri, html[data-fx="nova"] button.primary {
  background: var(--grad); color: var(--grad-ink); border-color: transparent; border-radius: 0;
  font-family: var(--font-disp); letter-spacing: .1em; text-transform: uppercase; font-size: 15px; font-weight: 700;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: filter .2s var(--ease), transform .15s var(--ease);
}
html[data-fx="nova"] .kn-cta:hover, html[data-fx="nova"] .btn.pri:hover, html[data-fx="nova"] button.primary:hover { filter: brightness(1.12) drop-shadow(0 0 12px var(--glow-a)); transform: translateY(-1px); }
html[data-fx="nova"] .kill, html[data-fx="nova"] .stop { border-radius: 2px; font-family: var(--font-disp); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* ============================ GENERIC SURFACES (all other pages) ============================ */
html[data-fx="nova"] .surface { border-color: var(--line); background: linear-gradient(160deg, rgba(14, 22, 50, .9), rgba(7, 11, 26, .94)); box-shadow: inset 0 1px 0 rgba(34, 211, 238, .22), 0 14px 40px -24px #000; border-radius: 3px; }
html[data-fx="nova"] .card-body .stat-tile { background: rgba(34, 211, 238, .04); border-color: var(--line); border-radius: 2px; }

/* ============================ EMERGENCY BAR (solid, never animated) ============================ */
html[data-fx="nova"] .nd-ebar {
  z-index: 70; background: #2a050d !important; border-top: 2px solid var(--sell); border-radius: 0 !important;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .6) !important; -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-fx="nova"] .nd-ebar *, html[data-fx="nova"] .nd-ebar::before, html[data-fx="nova"] .nd-ebar::after { animation: none !important; }
html[data-fx="nova"] .nd-ebtn:not(.ghost) { background: var(--sell); color: #fff; min-height: 44px; box-shadow: none; border-radius: 2px; font-family: var(--font-disp); font-size: 16px; font-weight: 700; letter-spacing: .1em; }
html[data-fx="nova"] .nd-ebtn:not(.ghost):hover { filter: brightness(1.12); }
html[data-fx="nova"] .nd-ebar-t { color: #ffd9df; font-family: var(--font-disp); font-size: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* ============================ P&L FLASH ============================ */
html[data-fx="nova"] .nv-flash { animation: novaFlash .9s ease-out; }
@keyframes novaFlash { from { text-shadow: 0 0 18px currentColor, 0 0 5px currentColor; } to { text-shadow: 0 0 0 transparent; } }

/* ============================ STYLE PICKER ENTRY ============================ */
.sp-sw.nova { background: conic-gradient(from 200deg, #03050b 0 40%, #22d3ee 40% 72%, #8b5cf6 72% 100%); }
html:not([data-fx="nova"]) .stylepick .sp-opt[data-fx="nova"] .sp-ck { opacity: 0; }
html[data-fx="nova"] .stylepick .sp-opt[data-set="dark"]:not([data-fx]) .sp-ck { opacity: 0; }
html[data-fx="nova"] .stylepick .sp-opt[data-fx="nova"] .sp-ck { opacity: 1; }

/* ============================ SAFETY: hidden tab / reduced motion ============================ */
html.nv-paused[data-fx="nova"] *, html.nv-paused[data-fx="nova"]::before, html.nv-paused[data-fx="nova"]::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  html[data-fx="nova"] *, html[data-fx="nova"] *::before, html[data-fx="nova"] *::after,
  html[data-fx="nova"]::before { animation: none !important; transition: none !important; }
}

/* strategy card header strip: larger label in the new display font */
html[data-fx="nova"] .surface.strat .strat-name { font-size: 14px; letter-spacing: .1em; }
html[data-fx="nova"] .surface.strat .strat-name span { font-size: 14px; }

/* ==========================================================================
   NOVA on the /v2 shell (JAF Terminal v2 beta pages) -- same tokens, fonts
   and HUD language so every page of the site looks like one product.
   ========================================================================== */
html[data-fx="nova"][data-theme] {
  --bg: #03050b; --bg-2: rgba(3, 5, 11, .55); --panel: #0a0f22; --panel-2: #0f1733;
  --line: rgba(80, 130, 255, .20); --line-2: rgba(34, 211, 238, .38);
  --text: #ecf2ff; --text-2: #a3b4de; --text-3: #7384b3;
  --accent-soft: rgba(34, 211, 238, .13);
  --pos: #2ee6a6; --pos-soft: rgba(46, 230, 166, .13); --neg: #ff5470; --neg-soft: rgba(255, 84, 112, .14);
  --radius: 4px; --radius-sm: 3px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --shadow: 0 12px 40px -22px #000;
}
html[data-fx="nova"] #theme { display: none; }
html[data-fx="nova"] .topbar {
  background: var(--top-bg) !important; border-bottom: 0; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
html[data-fx="nova"] .topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--accent) 25%, var(--accent-2) 55%, var(--accent-3) 80%, transparent);
  background-size: 200% 100%; animation: novaEnergy 6s linear infinite; opacity: .85;
}
html[data-fx="nova"] .brand { font-family: var(--font-disp); letter-spacing: .1em; text-transform: uppercase; font-size: 17px; font-weight: 700; }
html[data-fx="nova"] .brand .mark { background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 0 22px -2px var(--glow-a); border-radius: 3px; }
html[data-fx="nova"] .brand small { border-radius: 2px; border-color: var(--line-2); color: var(--accent-ink); font-family: var(--font-num); letter-spacing: .08em; }
html[data-fx="nova"] .nav-item > button, html[data-fx="nova"] .nav-item > a {
  letter-spacing: .05em; text-transform: uppercase; font-size: 12.5px; font-weight: 600;
}
html[data-fx="nova"] .nav-item > button:hover, html[data-fx="nova"] .nav-item > a:hover, html[data-fx="nova"] .nav-item.open > button {
  background: transparent; color: var(--accent-ink); text-shadow: 0 0 12px var(--glow-a);
}
html[data-fx="nova"] .nav-item > .active {
  background: linear-gradient(180deg, transparent, var(--accent-soft)); color: var(--accent-ink);
  box-shadow: inset 0 -2px 0 var(--accent), 0 12px 24px -14px var(--accent); text-shadow: 0 0 12px var(--glow-a);
}
html[data-fx="nova"] .menu {
  background: linear-gradient(160deg, rgba(16, 26, 58, .98), rgba(8, 12, 28, .98)); border: 1px solid var(--line-2);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .85), 0 0 30px -10px var(--glow-a);
}
html[data-fx="nova"] .menu a:hover { background: var(--accent-soft); color: var(--accent-ink); }
html[data-fx="nova"] .iconbtn { border-radius: 3px; background: rgba(34, 211, 238, .06); border-color: var(--line); }
html[data-fx="nova"] .avatar { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #021016; }
html[data-fx="nova"] .indices, html[data-fx="nova"] .clock { font-family: var(--font-num); }

html[data-fx="nova"] .safety { background: rgba(3, 5, 11, .55); border-bottom: 1px solid var(--line); }
html[data-fx="nova"] .safety .label { font-family: var(--font-disp); letter-spacing: .16em; font-size: 12.5px; font-weight: 700; color: var(--accent-ink); }
html[data-fx="nova"] .chip { font-family: var(--font-num); font-size: 11px; border-radius: 3px; letter-spacing: .02em; background: rgba(10, 15, 34, .7); }
html[data-fx="nova"] #s-nse.ok .dot, html[data-fx="nova"] #s-mcx.ok .dot { position: relative; box-shadow: none; }
html[data-fx="nova"] #s-nse.ok .dot::after, html[data-fx="nova"] #s-mcx.ok .dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--pos); animation: novaPing 1.9s cubic-bezier(0, 0, .2, 1) infinite; }
html[data-fx="nova"] .chip.crit .dot { animation: none; }
html[data-fx="nova"] .safety .manage { color: var(--accent-ink); }

html[data-fx="nova"] .page-head h1 { font-family: var(--font-disp); font-size: 34px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; text-shadow: 0 0 26px rgba(34, 211, 238, .35); }
html[data-fx="nova"] .card {
  background: linear-gradient(160deg, rgba(14, 22, 50, .9), rgba(7, 11, 26, .94)); border-color: var(--line);
  box-shadow: inset 0 1px 0 rgba(34, 211, 238, .22), 0 14px 40px -24px #000;
}
html[data-fx="nova"] .card-h { border-bottom-color: var(--line); background: linear-gradient(90deg, rgba(34, 211, 238, .08), transparent 70%); }
html[data-fx="nova"] .card-h h2 { font-family: var(--font-disp); font-size: 17px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
html[data-fx="nova"] .card-h h2::before { content: "//"; color: var(--accent); margin-right: 8px; text-shadow: 0 0 10px var(--accent); }

/* KPI cards = chamfered HUD tiles, same as dashboard P&L cards */
html[data-fx="nova"] .kpi {
  position: relative; isolation: isolate; overflow: hidden; border: 0; box-shadow: none; background: var(--edge); --cut: 14px;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
html[data-fx="nova"] .kpi::before {
  content: ""; position: absolute; inset: 1px; z-index: -1; background: var(--fill);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
html[data-fx="nova"] .kpi .k { font-family: var(--font-disp); font-size: 12px; font-weight: 600; letter-spacing: .12em; color: var(--ink-2); }
html[data-fx="nova"] table.t th { font-family: var(--font-disp); font-size: 12.5px; font-weight: 600; letter-spacing: .1em; color: var(--ink-2); }
html[data-fx="nova"] table.t tbody tr:hover td { background: rgba(34, 211, 238, .06); }
html[data-fx="nova"] .tag { border-radius: 2px; font-family: var(--font-num); }
html[data-fx="nova"] .strat .name { font-family: var(--font-disp); font-size: 16px; font-weight: 700; letter-spacing: .04em; }
html[data-fx="nova"] .foot { font-family: var(--font-num); letter-spacing: .06em; }


/* ==========================================================================
   NOVA -- LIVE LAYER. Every effect below is driven by real platform state
   (market status, kill switch, strategy running flags, positions, P&L, loss
   limit). Nothing here is decoration for its own sake.
   ========================================================================== */

/* ---- header energy line reflects reality: flowing = a market is live,
        dim/static = both closed, solid red = kill switch ON ---- */
html[data-fx="nova"][data-mkt="closed"] .tbar::after, html[data-fx="nova"][data-mkt="closed"] .topbar::after { animation: none; opacity: .3; }
html[data-fx="nova"][data-kill="1"] .tbar::after, html[data-fx="nova"][data-kill="1"] .topbar::after {
  animation: none; opacity: 1; background: var(--sell); box-shadow: 0 0 18px var(--sell);
}
html[data-fx="nova"][data-kill="1"]::before {
  background:
    radial-gradient(55vw 45vh at 12% -5%, rgba(255, 84, 112, .20), transparent 70%),
    radial-gradient(50vw 40vh at 92% 2%, rgba(255, 84, 112, .12), transparent 70%),
    linear-gradient(rgba(255, 84, 112, .10) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(90deg, rgba(255, 84, 112, .10) 1px, transparent 1px) 0 0 / 64px 64px;
}

/* ---- market session timeline (inserted under the safety bar by nova.js) ---- */
#nvSession { display: none; }
html[data-fx="nova"] #nvSession {
  display: flex; gap: 28px; flex-wrap: wrap; align-items: center; padding: 7px 18px;
  background: rgba(3, 5, 11, .5); border-bottom: 1px solid var(--line); font-family: var(--font-num); font-size: 11px; color: var(--ink-2);
}
.nv-sess { display: flex; align-items: center; gap: 10px; min-width: 260px; flex: 1 1 300px; max-width: 520px; }
.nv-sess-lb { font-family: var(--font-disp); font-weight: 700; letter-spacing: .14em; font-size: 12.5px; color: var(--ink-1); flex: none; }
.nv-sess-trk { position: relative; flex: 1; height: 5px; background: rgba(80, 130, 255, .18); border-radius: 1px; overflow: visible; }
.nv-sess-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 1px; transition: width 1s linear; }
.nv-sess-pin { position: absolute; top: -4px; width: 2px; height: 13px; background: #fff; box-shadow: 0 0 8px var(--accent); left: 0; transition: left 1s linear; display: none; }
.nv-sess.open .nv-sess-pin { display: block; }
.nv-sess.open .nv-sess-lb::after { content: " LIVE"; color: var(--buy); font-size: 10.5px; letter-spacing: .12em; }
.nv-sess.closed .nv-sess-fill { background: rgba(115, 132, 179, .35); }
.nv-sess-tx { flex: none; min-width: 168px; text-align: right; white-space: nowrap; }
.nv-sess.open .nv-sess-tx { color: var(--buy); }

/* ---- daily loss-limit meter under the P&L figures ---- */
.nv-risk { display: none; }
html[data-fx="nova"] .nv-risk { display: flex; align-items: center; gap: 9px; margin-top: 8px; font-family: var(--font-num); font-size: 10px; letter-spacing: .04em; color: var(--ink-3); }
.nv-risk-lb { font-family: var(--font-disp); font-weight: 700; letter-spacing: .12em; font-size: 11px; flex: none; color: var(--ink-2); }
.nv-risk-trk { flex: 1; height: 5px; background: rgba(80, 130, 255, .18); border-radius: 1px; overflow: hidden; min-width: 50px; }
.nv-risk-trk i { display: block; height: 100%; width: 0; background: var(--buy); transition: width .8s var(--ease), background .4s; }
.nv-risk.warn .nv-risk-trk i { background: #ffc15c; } .nv-risk.crit .nv-risk-trk i { background: var(--sell); box-shadow: 0 0 10px var(--sell); }
.nv-risk-tx { flex: none; }
.nv-risk.crit .nv-risk-tx { color: var(--sell); }

/* ---- P&L cards: edge colour follows the sign of the number ---- */
html[data-fx="nova"] .nd-stat.nv-pos, html[data-fx="nova"] .hm-snap-card.nv-pos { --edge: linear-gradient(135deg, rgba(46, 230, 166, .9), rgba(46, 230, 166, .22)); }
html[data-fx="nova"] .nd-stat.nv-neg, html[data-fx="nova"] .hm-snap-card.nv-neg { --edge: linear-gradient(135deg, rgba(255, 84, 112, .95), rgba(255, 84, 112, .24)); }

/* ---- direction-aware tick flash (green up / red down) ---- */
html[data-fx="nova"] .nv-up { animation: novaUp .9s ease-out; }
html[data-fx="nova"] .nv-dn { animation: novaDn .9s ease-out; }
@keyframes novaUp { from { text-shadow: 0 0 18px var(--buy), 0 0 4px var(--buy); } to { text-shadow: 0 0 0 transparent; } }
@keyframes novaDn { from { text-shadow: 0 0 18px var(--sell), 0 0 4px var(--sell); } to { text-shadow: 0 0 0 transparent; } }

/* ---- running strategies: heartbeat line (flat + dim when stopped) ---- */
html[data-fx="nova"] .spick::after {
  content: ""; position: absolute; right: 12px; top: 50%; width: 44px; height: 16px; margin-top: -8px; z-index: 1; opacity: .35;
  background: linear-gradient(var(--ink-3), var(--ink-3)) 0 50% / 100% 1px no-repeat;
}
html[data-fx="nova"] .spick.is-on::after {
  opacity: .95; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='16' viewBox='0 0 44 16'%3E%3Cpolyline fill='none' stroke='%232ee6a6' stroke-width='1.4' stroke-linejoin='round' points='0,8 10,8 13,8 16,2 20,14 24,8 44,8'/%3E%3C/svg%3E") 0 0 / 44px 16px repeat-x;
  animation: novaEcg 1.5s linear infinite;
}
@keyframes novaEcg { to { background-position-x: -44px; } }

/* ---- running strategy card: a monitoring beam along the top edge ---- */
html[data-fx="nova"] .surface.strat.is-running::after {
  content: ""; position: absolute; top: 0; left: 0; width: 30%; height: 2px; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--buy), transparent); box-shadow: 0 0 12px var(--buy);
  animation: novaMonitor 2.8s ease-in-out infinite;
}
@keyframes novaMonitor { from { transform: translateX(-100%); } to { transform: translateX(340%); } }

/* ---- Desk Radar (Home hero): blips are REAL strategies and positions ---- */
.nv-hud { display: none; }
html[data-fx="nova"] .nv-hud { display: flex; flex-direction: column; align-items: center; gap: 10px; position: absolute; right: 26px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.nv-radar { position: relative; width: 270px; height: 270px; }
.nv-radar > i { position: absolute; border-radius: 50%; }
.nv-r1 { inset: 0; border: 1px dashed rgba(34, 211, 238, .45); }
.nv-r2 { inset: 45px; border: 1px solid rgba(34, 211, 238, .30); }
.nv-r3 { inset: 90px; border: 1px dotted rgba(34, 211, 238, .40); }
.nv-ticks { inset: 8px; background: repeating-conic-gradient(rgba(103, 232, 249, .5) 0 .7deg, transparent .7deg 7.5deg);
  -webkit-mask: radial-gradient(circle, transparent 66%, #000 67%, #000 71%, transparent 72%); mask: radial-gradient(circle, transparent 66%, #000 67%, #000 71%, transparent 72%); }
.nv-cross { inset: 0; border-radius: 0 !important;
  background: linear-gradient(rgba(34, 211, 238, .26), rgba(34, 211, 238, .26)) 50% 0 / 1px 100% no-repeat, linear-gradient(rgba(34, 211, 238, .26), rgba(34, 211, 238, .26)) 0 50% / 100% 1px no-repeat; }
.nv-sweep { inset: 10px; background: conic-gradient(from 0deg, rgba(34, 211, 238, .42), rgba(34, 211, 238, 0) 26%, transparent); animation: novaSpinT 6s linear infinite; }
@keyframes novaSpinT { to { transform: rotate(360deg); } }
html[data-fx="nova"][data-kill="1"] .nv-sweep { background: conic-gradient(from 0deg, rgba(255, 84, 112, .5), rgba(255, 84, 112, 0) 26%, transparent); }
.nv-core { left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; background: var(--accent); box-shadow: 0 0 20px 3px var(--glow-a); }
html[data-fx="nova"][data-kill="1"] .nv-core { background: var(--sell); box-shadow: 0 0 20px 3px rgba(255, 84, 112, .6); }
.nv-blip { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; background: transparent; border: 1px solid var(--ink-3); }
.nv-blip b { position: absolute; left: 50%; top: -17px; transform: translateX(-50%); font: 700 10px var(--font-num); color: var(--ink-3); letter-spacing: .04em; }
.nv-blip.live { background: var(--buy); border-color: var(--buy); box-shadow: 0 0 12px var(--buy); }
.nv-blip.live b { color: var(--buy); }
.nv-blip.live::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--buy); animation: novaPing 2s cubic-bezier(0, 0, .2, 1) infinite; }
.nv-blip.pos { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; background: var(--accent-ink); border-color: var(--accent-ink); box-shadow: 0 0 9px var(--accent); }
.nv-legend { display: none; }
html[data-fx="nova"] .nv-legend { display: grid; grid-template-columns: repeat(2, minmax(150px, max-content)); gap: 12px 34px; margin-top: 22px; max-width: 560px; }
.nv-legend div { display: flex; flex-direction: column; gap: 2px; border-left: 2px solid var(--accent); padding-left: 11px; }
.nv-legend span { color: var(--ink-3); font-family: var(--font-disp); font-weight: 700; letter-spacing: .14em; font-size: 12px; }
.nv-legend em { font: 600 14px var(--font-num); font-style: normal; color: var(--ink-1); letter-spacing: .02em; }
.nv-legend em.g { color: var(--buy); } .nv-legend em.r { color: var(--sell); } .nv-legend em.m { color: var(--ink-3); }
.nv-legend div:has(em.r) { border-left-color: var(--sell); } .nv-legend div:has(em.g) { border-left-color: var(--buy); }
html[data-fx="nova"] .hm-hero { min-height: 340px; }
@media (max-width: 1100px) { html[data-fx="nova"] .nv-hud { opacity: .3; right: -60px; } html[data-fx="nova"] .hm-hero-h1 { font-size: 32px; } }
@media (prefers-reduced-motion: reduce) { html[data-fx="nova"] .spick.is-on::after { animation: none; } }

.nv-blip { position: absolute; border-radius: 50%; }
#nvScan { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: .6; background: radial-gradient(120% 90% at 50% 40%, transparent 58%, rgba(0, 0, 0, .5) 100%); }
html[data-fx="nova"][data-kill="1"] #nvScan { background: radial-gradient(120% 90% at 50% 40%, transparent 50%, rgba(255, 84, 112, .16) 100%); }

/* layout fixes */
html[data-fx="nova"] .hm-snap-card { flex-wrap: wrap; }
html[data-fx="nova"] .hm-snap-card .nv-risk { flex: 0 0 100%; }
html[data-fx="nova"] .hm-snap-vl, html[data-fx="nova"] .hm-snap-lb { white-space: nowrap; }
html[data-fx="nova"] .kpis > .card + .card { margin-top: 0; }

/* mobile: header first, status bars compact below it (no tall stack above the header) */
@media (max-width: 600px) {
  body.app { display: flex; flex-direction: column; }
  body.app > .mbar { order: -4; }
  body.app > .paper-flag { order: -3; }
  body.app > #sbar { order: -2; }
  body.app > #nvSession { order: -1; }
  body.app > .shell { order: 0; }
  html[data-fx="nova"] #nvSession { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; flex-wrap: nowrap; gap: 3px; padding: 6px 12px; }
  html[data-fx="nova"] #nvSession .nv-sess { width: 100%; min-width: 0; max-width: 100%; flex: 0 0 auto; flex-wrap: nowrap; gap: 8px; justify-content: space-between; }
  .nv-sess-trk { display: none; }
  .nv-sess-lb { font-size: 11px; letter-spacing: .08em; }
  .nv-sess-tx { flex: 1 1 auto; min-width: 0; text-align: right; white-space: normal; font-size: 11px; line-height: 1.25; }
}