/* PASINDU206 TRADER — motion + icon layer (loaded last) */
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --sp  { syntax: "<number>"; inherits: true; initial-value: 0; }

:root {
  --c-blue: #5AA9FF; --c-cyan: #4FD8F0; --c-green: #2FD58A;
  --c-gold: #F5B942; --c-red: #FF6B7A; --c-violet: #A78BFA;
}

/* ================= ICONS ================= */
svg.ic { width: 16px; height: 16px; flex-shrink: 0; }
.c-blue   { --ic: var(--c-blue); }   .c-cyan { --ic: var(--c-cyan); }
.c-green  { --ic: var(--c-green); }  .c-gold { --ic: var(--c-gold); }
.c-red    { --ic: var(--c-red); }    .c-violet { --ic: var(--c-violet); }

.h-ico, .stat-icon.c-blue, .stat-icon.c-cyan, .stat-icon.c-green, .stat-icon.c-gold, .stat-icon.c-red, .stat-icon.c-violet {
  color: var(--ic);
  background: color-mix(in srgb, var(--ic) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--ic) 32%, transparent);
  box-shadow: 0 0 14px -4px var(--ic);
}
.h-ico { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 9px; margin-right: 10px; vertical-align: middle; }
.panel-head h2 { display: inline-flex; align-items: center; }
.panel:hover .h-ico svg, .stat-card:hover .stat-icon svg { animation: icoPop .6s var(--ease); }
@keyframes icoPop { 0% { transform: scale(1) rotate(0); } 40% { transform: scale(1.25) rotate(-10deg); } 70% { transform: scale(.95) rotate(6deg); } 100% { transform: scale(1) rotate(0); } }
.h-ico { animation: icoFloat 4.5s ease-in-out infinite; }
@keyframes icoFloat { 50% { transform: translateY(-2px); } }

/* sidebar icons: colour per page */
.nav-item[data-route="overview"] .nav-icon { --ic: var(--c-blue); }
.nav-item[data-route="market"] .nav-icon { --ic: var(--c-green); }
.nav-item[data-route="signals"] .nav-icon { --ic: var(--c-red); }
.nav-item[data-route="positions"] .nav-icon { --ic: var(--c-cyan); }
.nav-item[data-route="history"] .nav-icon { --ic: var(--c-violet); }
.nav-item[data-route="strategy"] .nav-icon { --ic: var(--c-gold); }
.nav-item[data-route="risk"] .nav-icon { --ic: var(--c-green); }
.nav-item[data-route="settings"] .nav-icon { --ic: var(--c-blue); }
.nav-item[data-route="notifications"] .nav-icon { --ic: var(--c-gold); }
.nav-item[data-route="logs"] .nav-icon { --ic: var(--c-cyan); }
.nav-item[data-route="account"] .nav-icon { --ic: var(--c-violet); }
.nav-item .nav-icon { color: color-mix(in srgb, var(--ic, var(--c-blue)) 78%, #8CA0C4); }
.nav-item:hover .nav-icon { color: var(--ic); background: color-mix(in srgb, var(--ic) 16%, transparent); border-color: color-mix(in srgb, var(--ic) 35%, transparent); transform: translateX(2px); }
.nav-item:hover .nav-icon svg { animation: icoWiggle .55s var(--ease); }
.nav-item.active .nav-icon { color: var(--ic); background: color-mix(in srgb, var(--ic) 20%, transparent); border-color: color-mix(in srgb, var(--ic) 45%, transparent); box-shadow: 0 0 16px -2px var(--ic); animation: navGlow 2.8s ease-in-out infinite; }
@keyframes icoWiggle { 0%,100% { transform: rotate(0) scale(1); } 25% { transform: rotate(-14deg) scale(1.15); } 60% { transform: rotate(10deg) scale(1.1); } }
@keyframes navGlow { 50% { box-shadow: 0 0 24px 0 var(--ic); } }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; position: relative; overflow: hidden; }
.btn .btn-ic { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.btn:hover:not(:disabled) .btn-ic { transform: scale(1.18) rotate(-6deg); }
.btn[data-command="emergency-stop"]:hover:not(:disabled) .btn-ic, .btn-danger:hover:not(:disabled) .btn-ic { animation: icoWiggle .5s; }
.btn-primary::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); }
.btn-primary:hover:not(:disabled)::after { animation: shine .8s var(--ease); }
@keyframes shine { to { left: 130%; } }
.btn .ripple { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255,255,255,.35); pointer-events: none; animation: ripple .6s ease-out forwards; }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }

/* login + labels */
.lbl-ic { width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; color: var(--accent-2); }
.login-kicker { display: inline-flex; align-items: center; gap: 6px; }
label:has(+ input:focus) .lbl-ic, label:has(+ .password-field input:focus) .lbl-ic { color: var(--c-green); transform: scale(1.2); }
.lbl-ic { transition: transform .2s var(--ease), color .2s; }

/* symbol + empty states */
.sym { display: inline-flex; align-items: center; gap: 6px; }
.gold-ic { color: var(--c-gold); width: 15px; height: 15px; filter: drop-shadow(0 0 6px rgba(245,185,66,.6)); animation: coinSpin 6s ease-in-out infinite; }
@keyframes coinSpin { 0%,80%,100% { transform: rotateY(0); } 90% { transform: rotateY(180deg); } }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.empty-state.hidden { display: none; }
.empty-ico { display: inline-flex; width: 46px; height: 46px; align-items: center; justify-content: center; border-radius: 14px; color: var(--accent-2); background: rgba(46,140,255,.1); border: 1px dashed rgba(120,190,255,.3); animation: breathe 3.2s ease-in-out infinite; }
.empty-ico svg { width: 22px; height: 22px; }
@keyframes breathe { 50% { transform: translateY(-4px) scale(1.06); box-shadow: 0 8px 22px -8px var(--glow); } }

/* bell rings when there is an unread dot */
#notifBtn:has(.badge-dot:not([hidden])) svg { animation: bellRing 2.4s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes bellRing { 0%,60%,100% { transform: rotate(0); } 66% { transform: rotate(14deg); } 72% { transform: rotate(-12deg); } 78% { transform: rotate(8deg); } 84% { transform: rotate(-5deg); } }
.icon-btn { transition: transform .15s var(--ease), background .2s; }
.icon-btn:hover { transform: translateY(-1px); }

/* ================= BACKGROUND ================= */
.ambient .o4 { width: 340px; height: 340px; right: 18%; bottom: 8%; background: radial-gradient(circle, rgba(245,185,66,.22), transparent 70%); animation: drift2 44s ease-in-out infinite alternate-reverse; }
.ambient .grid {
  position: absolute; inset: -40% -20% -10% -20%; opacity: .5; transform-origin: 50% 0; transform: perspective(700px) rotateX(62deg);
  background-image: linear-gradient(rgba(90,170,255,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(90,170,255,.16) 1px, transparent 1px);
  background-size: 64px 64px; animation: gridMove 7s linear infinite;
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 70%);
}
@keyframes gridMove { to { background-position: 0 64px, 64px 0; } }
.ambient #bgFx { position: absolute; inset: 0; width: 100%; height: 100%; }
.ambient .orb { transition: translate .9s var(--ease); }
html.motion-off .ambient .grid { animation: none; opacity: .25; }
html.motion-off .ambient .o4 { animation: none; }
html.motion-off .ambient #bgFx { display: none; }

/* ================= TABS / NAV ================= */
.app-shell:not(.hidden) .nav-item { animation: navIn .5s var(--ease) backwards; }
.nav-item:nth-of-type(1){animation-delay:.04s}.nav-item:nth-of-type(2){animation-delay:.08s}.nav-item:nth-of-type(3){animation-delay:.12s}
.nav-item:nth-of-type(4){animation-delay:.16s}.nav-item:nth-of-type(5){animation-delay:.20s}.nav-item:nth-of-type(6){animation-delay:.24s}
.nav-item:nth-of-type(7){animation-delay:.28s}.nav-item:nth-of-type(8){animation-delay:.32s}.nav-item:nth-of-type(9){animation-delay:.36s}
.nav-item:nth-of-type(10){animation-delay:.40s}.nav-item:nth-of-type(11){animation-delay:.44s}
@keyframes navIn { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
.nav-indicator { overflow: hidden; }
.nav-indicator::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.16) 50%, transparent 70%); transform: translateX(-100%); animation: indSheen 3.6s ease-in-out infinite; }
@keyframes indSheen { 60%,100% { transform: translateX(100%); } }
.nav-item.pressed { transform: scale(.96); }

.brand-mark { border-radius: 50%; box-shadow: 0 0 0 2px rgba(90,200,255,.25), 0 0 22px -2px var(--glow); animation: logoGlow 4s ease-in-out infinite; }
@keyframes logoGlow { 50% { box-shadow: 0 0 0 2px rgba(90,200,255,.5), 0 0 34px 2px var(--glow); } }
.sidebar .brand { position: relative; }
.sidebar .brand::after { content: ""; position: absolute; left: 6px; top: 4px; width: 40px; height: 40px; border-radius: 50%; pointer-events: none; border: 2px solid transparent; border-top-color: var(--accent-2); border-right-color: rgba(90,200,255,.3); animation: spin 5s linear infinite; }

/* page switch: direction-aware slide + stagger */
.page.active { animation: pageFwd .5s var(--ease) backwards; }
html[data-dir="back"] .page.active { animation-name: pageBack; }
@keyframes pageFwd  { from { opacity: 0; transform: translate3d(26px, 0, 0) scale(.992); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes pageBack { from { opacity: 0; transform: translate3d(-26px, 0, 0) scale(.992); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

.page.active .card-grid > *, .page.active > .panel, .page.active .panel-row > * {
  animation: rise .6s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 70ms + 60ms);
}
@keyframes rise { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
.page.active :is(.card-grid, .panel-row) > :nth-child(1) { --i: 0; } .page.active :is(.card-grid, .panel-row) > :nth-child(2) { --i: 1; }
.page.active :is(.card-grid, .panel-row) > :nth-child(3) { --i: 2; } .page.active :is(.card-grid, .panel-row) > :nth-child(4) { --i: 3; }
.page.active :is(.card-grid, .panel-row) > :nth-child(5) { --i: 4; } .page.active :is(.card-grid, .panel-row) > :nth-child(6) { --i: 5; }
.page.active :is(.card-grid, .panel-row) > :nth-child(7) { --i: 6; } .page.active :is(.card-grid, .panel-row) > :nth-child(8) { --i: 7; }
.page.active > :nth-child(2) { --i: 2; } .page.active > :nth-child(3) { --i: 3; }
.page.active > .panel-row:nth-child(2) { --i: 0; }
.page.active > .panel-row, .page.active > .mt5-panel { animation-delay: calc(var(--i, 0) * 70ms + 60ms); }
/* nested panel-rows already animate their children; don't double up */
.page.active > .panel-row { animation: none; }

.page-title.swap { animation: titleSwap .45s var(--ease); }
@keyframes titleSwap { from { opacity: 0; transform: translateY(-8px); letter-spacing: 2px; } to { opacity: 1; transform: none; } }

/* ================= WINDOWS (cards / panels) ================= */
.stat-card, .panel {
  position: relative; --mx: 50%; --my: -30%;
  background:
    radial-gradient(380px circle at var(--mx) var(--my), rgba(90,200,255, calc(var(--sp) * .13)), transparent 55%),
    linear-gradient(160deg, rgba(20,40,78,.55), rgba(10,22,46,.45));
  transition: --sp .35s ease, transform .25s var(--ease), border-color .2s, box-shadow .25s;
}
.stat-card:hover, .panel:hover { --sp: 1; }
.panel:hover { border-color: rgba(120,190,255,.28); box-shadow: inset 0 1px 0 var(--glass-hi), 0 18px 44px -16px rgba(46,140,255,.35); }
.stat-card::before, .panel::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: conic-gradient(from var(--ang), transparent 0 68%, var(--accent-2) 84%, #fff 88%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spinAng 3.5s linear infinite paused;
}
.stat-card:hover::before, .panel:hover::before { opacity: .9; animation-play-state: running; }
@keyframes spinAng { to { --ang: 360deg; } }
.panel:has(.data-table)::before { display: none; }

.stat-value.flash { animation: flash .7s var(--ease), glowFlash 1s ease-out; }
@keyframes glowFlash { 0% { text-shadow: 0 0 18px var(--accent-2); } 100% { text-shadow: none; } }

/* tables, lists, checklists */
.data-table tbody tr { transition: background .2s, transform .2s var(--ease); }
.data-table tbody tr:hover { background: rgba(90,170,255,.08); transform: translateX(3px); }
.kv { transition: background .2s, padding .2s var(--ease); border-radius: 8px; }
.kv:hover { background: rgba(255,255,255,.03); padding-left: 8px; padding-right: 8px; }
.check-item .check-dot { transition: transform .3s var(--ease), box-shadow .3s; }
.check-item:hover .check-dot { transform: scale(1.35); box-shadow: 0 0 10px var(--accent-2); }
.notif-list > li { animation: rise .4s var(--ease) both; }

/* status dots */
.dot-online, .dot-warning { position: relative; }
.dot-online::after, .dot-warning::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: ping 1.8s ease-out infinite; }
.dot-offline { animation: pulse 2.2s ease-in-out infinite; }
@keyframes ping { to { transform: scale(3.2); opacity: 0; } }
.pill { transition: transform .2s var(--ease), border-color .2s; }
.pill:hover { transform: translateY(-1px); }
.user-pill .avatar { box-shadow: 0 0 0 2px rgba(90,200,255,.3); }
.user-chip .avatar { box-shadow: 0 0 0 2px rgba(90,200,255,.3); }

/* login */
.login-card { animation: loginIn .8s var(--ease) both; }
@keyframes loginIn { from { opacity: 0; transform: translateY(30px) scale(.96); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
.login-card > * { animation: rise .6s var(--ease) both; }
.login-card > :nth-child(1){animation-delay:.15s}.login-card > :nth-child(2){animation-delay:.22s}.login-card > :nth-child(3){animation-delay:.28s}
.login-card > :nth-child(4){animation-delay:.34s}.login-card > :nth-child(5){animation-delay:.40s}.login-card > :nth-child(6){animation-delay:.46s}
.login-card > :nth-child(7){animation-delay:.52s}.login-card > :nth-child(8){animation-delay:.58s}.login-card > :nth-child(9){animation-delay:.64s}
.login-error:not(:empty) { animation: shake .45s; }
@keyframes shake { 20%,60% { transform: translateX(-6px); } 40%,80% { transform: translateX(6px); } }
.app-shell:not(.hidden) .topbar { animation: topIn .6s var(--ease) backwards; }
@keyframes topIn { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }

/* ================= SAFETY ================= */
html.motion-off *, html.motion-off *::before, html.motion-off *::after { animation-duration: 0s !important; animation-delay: 0s !important; }
html.motion-off .stat-card::before, html.motion-off .panel::before { display: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; animation-delay: 0s !important; }
  .ambient #bgFx { display: none; }
}
@media (max-width: 900px) { .ambient .grid { display: none; } }

/* Live Market stat row: full width so labels + icons fit */
.panel-row:has(> .card-grid-compact) { grid-template-columns: 1fr; }
.card-grid-compact .stat-label { white-space: nowrap; }
@media (max-width: 1100px) { .card-grid-compact { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .card-grid-compact { grid-template-columns: 1fr 1fr; } }