/* Tradeo "Aurora" look. Loaded after app.css. dark = Aurora Glass (default), light = Aurora Light. */
.fx { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.fx i { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; animation: drift 24s ease-in-out infinite alternate; }
.fx i:nth-child(1) { width: 560px; height: 560px; left: -140px; top: -120px; }
.fx i:nth-child(2) { width: 640px; height: 640px; right: -180px; top: 8%; animation-duration: 30s; animation-delay: -8s; }
.fx i:nth-child(3) { width: 520px; height: 520px; left: 30%; bottom: -220px; animation-duration: 27s; animation-delay: -15s; }
@keyframes drift { to { transform: translate(90px, 60px) scale(1.18); } }
@media (prefers-reduced-motion: reduce) { .fx i, .tape .track { animation: none !important; } }
:root[data-theme="dark"] body::before, :root[data-theme="light"] body::before { display: none; }
/* ============ 1. AURORA GLASS ============ */
:root[data-theme="dark"] {
  --bg: #070b1f; --bg2: #0b1130; --panel: rgba(22,28,66,.55); --panel2: rgba(34,42,92,.6); --line: rgba(140,150,255,.16); --line2: rgba(160,170,255,.28);
  --text: #eef1ff; --muted: #a3acd9; --faint: #6b75ad;
  --brand: #8b7bff; --brand2: #22d3ee; --lime: #5eead4; --accent3: #f472b6;
  --brand-grad: linear-gradient(135deg, #8b7bff 0%, #c06cf5 45%, #22d3ee 100%);
  --up: #34e8a5; --down: #ff6b8b; --warn: #ffc857; --up-bg: rgba(52,232,165,.14); --down-bg: rgba(255,107,139,.14);
  --shadow: 0 12px 44px rgba(5,8,40,.55); --radius: 20px;
}
:root[data-theme="dark"] .fx i:nth-child(1) { background: #6d4aff; } :root[data-theme="dark"] .fx i:nth-child(2) { background: #ec4899; opacity: .38; } :root[data-theme="dark"] .fx i:nth-child(3) { background: #06b6d4; opacity: .42; }
:root[data-theme="dark"] .card { backdrop-filter: blur(18px) saturate(140%); background: linear-gradient(160deg, rgba(40,48,110,.5), rgba(18,24,60,.5)); border-color: var(--line); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.08); }
:root[data-theme="dark"] .card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(139,123,255,.55), transparent 35%, transparent 65%, rgba(34,211,238,.45)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
:root[data-theme="dark"] .side, :root[data-theme="dark"] .top, :root[data-theme="dark"] .tape { background: rgba(9,13,40,.55); backdrop-filter: blur(20px); }
:root[data-theme="dark"] .nav a.on { background: linear-gradient(90deg, rgba(139,123,255,.35), rgba(34,211,238,.06)); box-shadow: inset 3px 0 0 #a78bfa, 0 0 24px rgba(139,123,255,.2); }
:root[data-theme="dark"] .logo i { box-shadow: 0 0 28px rgba(139,123,255,.8); }
:root[data-theme="dark"] .btn.primary { box-shadow: 0 8px 30px rgba(139,123,255,.55), 0 0 0 1px rgba(255,255,255,.12) inset; }
:root[data-theme="dark"] .top h1 { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="dark"] .kpi:nth-child(5n+1) .v { color: #a78bfa; } :root[data-theme="dark"] .kpi:nth-child(5n+2) .v { color: #22d3ee; } :root[data-theme="dark"] .kpi:nth-child(5n+3) .v { color: #f472b6; } :root[data-theme="dark"] .kpi:nth-child(5n+4) .v { color: #5eead4; } :root[data-theme="dark"] .kpi:nth-child(5n) .v { color: #fbbf24; }
:root[data-theme="dark"] .idx:hover, :root[data-theme="dark"] .scard:hover { box-shadow: 0 16px 50px rgba(139,123,255,.3); }

/* auth hero */

.kpi { overflow: hidden; }
:root[data-theme="dark"] .toast, :root[data-theme="dark"] .menu, :root[data-theme="dark"] .tip { background: rgba(18,24,60,.92); backdrop-filter: blur(18px); }

/* ============ Aurora Light ============ */
:root[data-theme="light"] {
  --bg: #f4f2ff; --bg2: #ece9ff; --panel: rgba(255,255,255,.8); --panel2: #ffffff; --line: rgba(120,100,230,.16); --line2: rgba(120,100,230,.3);
  --text: #1b1740; --muted: #5d5a85; --faint: #9a97c0;
  --brand: #6d4aff; --brand2: #0ea5e9; --lime: #14b8a6;
  --brand-grad: linear-gradient(135deg, #6d4aff 0%, #c026d3 50%, #0ea5e9 100%);
  --up: #0b9f6a; --down: #e0305a; --up-bg: rgba(11,159,106,.12); --down-bg: rgba(224,48,90,.1);
  --shadow: 0 10px 36px rgba(109,74,255,.14); --radius: 20px;
}
:root[data-theme="light"] .fx i:nth-child(1) { background: #c4b5fd; } :root[data-theme="light"] .fx i:nth-child(2) { background: #fbcfe8; } :root[data-theme="light"] .fx i:nth-child(3) { background: #a5f3fc; }
:root[data-theme="light"] .card { backdrop-filter: blur(16px); background: linear-gradient(160deg, rgba(255,255,255,.92), rgba(255,255,255,.7)); border-color: rgba(255,255,255,.9); box-shadow: var(--shadow), inset 0 1px 0 #fff; }
:root[data-theme="light"] .side, :root[data-theme="light"] .top, :root[data-theme="light"] .tape { background: rgba(255,255,255,.6); backdrop-filter: blur(20px); }
:root[data-theme="light"] .nav a.on { background: linear-gradient(90deg, rgba(109,74,255,.18), rgba(14,165,233,.04)); box-shadow: inset 3px 0 0 var(--brand); }
:root[data-theme="light"] .top h1 { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="light"] .btn.primary { box-shadow: 0 8px 26px rgba(109,74,255,.4); }
:root[data-theme="light"] .auth .hero { background: radial-gradient(800px 500px at 20% 20%, rgba(139,123,255,.35), transparent 60%), radial-gradient(600px 450px at 90% 90%, rgba(236,72,153,.2), transparent 60%), rgba(255,255,255,.4); }

/* ============ polish ============ */
::selection { background: rgba(139,123,255,.45); color: #fff; }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #8b7bff, #22d3ee); background-clip: content-box; border: 2px solid transparent; border-radius: 8px; }
:root[data-theme="dark"] input:focus, :root[data-theme="dark"] select:focus, :root[data-theme="dark"] textarea:focus { border-color: #a78bfa; box-shadow: 0 0 0 3px rgba(139,123,255,.28), 0 0 22px rgba(139,123,255,.25); }
:root[data-theme="light"] input:focus, :root[data-theme="light"] select:focus, :root[data-theme="light"] textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(109,74,255,.2); }
:root[data-theme="dark"] .seg button.on { background: linear-gradient(135deg, rgba(139,123,255,.55), rgba(34,211,238,.3)); color: #fff; }
:root[data-theme="light"] .seg button.on { background: var(--brand-grad); color: #fff; }
:root[data-theme="dark"] .chip.on, :root[data-theme="dark"] .chip:hover { border-color: #a78bfa; color: #fff; }
:root[data-theme="dark"] .tbl tr:hover td { background: rgba(139,123,255,.1); }
:root[data-theme="dark"] .bar i, :root[data-theme="light"] .bar i { box-shadow: 0 0 12px rgba(139,123,255,.6); }
.page > .grid > .card, .page > .card { animation: rise .55s cubic-bezier(.2,.8,.2,1) both; }
.page > .grid > .card:nth-child(2) { animation-delay: .05s; } .page > .grid > .card:nth-child(3) { animation-delay: .1s; } .page > .grid > .card:nth-child(4) { animation-delay: .15s; } .page > .grid > .card:nth-child(5) { animation-delay: .2s; } .page > .grid > .card:nth-child(6) { animation-delay: .25s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.985); } }
@media (prefers-reduced-motion: reduce) { .page > .grid > .card, .page > .card { animation: none; } }

/* ============ today's trade entries: its own gold highlight so it stands apart from the violet glass cards ============ */
:root[data-theme] .card.idp { position: relative; overflow: visible; padding-top: 24px; border: 2px solid rgba(251,191,36,.75); background: linear-gradient(135deg, rgba(251,191,36,.24), rgba(244,114,182,.10) 55%, rgba(251,191,36,.08)), var(--panel); box-shadow: 0 0 0 4px rgba(251,191,36,.10), 0 18px 64px rgba(251,191,36,.28), inset 0 1px 0 rgba(255,255,255,.12); }
:root[data-theme="dark"] .card.idp::before { display: none; } .card.idp::before-unused { background: linear-gradient(135deg, rgba(251,191,36,.8), rgba(251,191,36,.05) 40%, rgba(244,114,182,.05) 60%, rgba(251,191,36,.6)); }
.card.idp::after { content: "TODAY"; position: absolute; top: -13px; left: 22px; padding: 4px 14px; border-radius: 99px; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; color: #2a1b00; background: linear-gradient(90deg, #fbbf24, #fb923c); box-shadow: 0 4px 16px rgba(251,191,36,.55); }
.card.idp h3 { background: linear-gradient(90deg, #fbbf24, #fb923c); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 17px; }
.card.idp .idcard { background: color-mix(in srgb, var(--panel2) 78%, rgba(251,191,36,.10)); border-color: rgba(251,191,36,.22); }
.card.idp .idwhy { border-left-color: #fbbf24; background: rgba(251,191,36,.09); }
.card.idp .idtoggle.on { border-color: rgba(251,191,36,.6); }
:root[data-theme="light"] .card.idp.idp { border-color: rgba(217,119,6,.5); background: linear-gradient(135deg, rgba(251,191,36,.22), rgba(255,255,255,.85) 60%), var(--panel); box-shadow: 0 0 0 1px rgba(217,119,6,.14), 0 14px 44px rgba(217,119,6,.18); }
:root[data-theme="light"] .card.idp h3 { background: linear-gradient(90deg, #b45309, #ea580c); -webkit-background-clip: text; background-clip: text; color: transparent; }