/* PASINDU206 TRADER — Liquid Glass remaster layer (loaded after style.css + dashboard.css) */
:root {
  --success: #2FD58A;
  --glass: rgba(14, 28, 56, 0.48);
  --glass-strong: rgba(10, 22, 46, 0.66);
  --glass-edge: rgba(150, 200, 255, 0.14);
  --glass-hi: rgba(255, 255, 255, 0.07);
  --ease: cubic-bezier(.22,.8,.24,1);
}

/* ---------- Ambient background (CSS only, GPU transforms) ---------- */
body { background: radial-gradient(1200px 800px at 70% -10%, #0B1E44 0%, transparent 60%), var(--bg); }
.ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; transition: opacity .6s var(--ease); }
.ambient .orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; will-change: transform; }
.ambient .o1 { width: 520px; height: 520px; left: -120px; top: -140px; background: radial-gradient(circle, rgba(46,140,255,.55), transparent 70%); animation: drift1 26s ease-in-out infinite alternate; }
.ambient .o2 { width: 460px; height: 460px; right: -140px; top: 30%; background: radial-gradient(circle, rgba(90,200,255,.42), transparent 70%); animation: drift2 32s ease-in-out infinite alternate; }
.ambient .o3 { width: 380px; height: 380px; left: 35%; bottom: -160px; background: radial-gradient(circle, rgba(70,90,255,.35), transparent 70%); animation: drift3 38s ease-in-out infinite alternate; }
.ambient .sheen { position: absolute; inset: -50%; background: linear-gradient(115deg, transparent 45%, rgba(140,200,255,.05) 50%, transparent 55%); animation: sheen 18s linear infinite; }
@keyframes drift1 { to { transform: translate3d(180px, 120px, 0) scale(1.15); } }
@keyframes drift2 { to { transform: translate3d(-200px, -90px, 0) scale(.9); } }
@keyframes drift3 { to { transform: translate3d(-140px, -120px, 0) scale(1.1); } }
@keyframes sheen { from { transform: translateX(-30%); } to { transform: translateX(30%); } }

html.motion-off .ambient .orb, html.motion-off .ambient .sheen { animation: none; }
html.motion-off .ambient .sheen { opacity: 0; }
html.motion-off *, html.motion-off *::before, html.motion-off *::after { animation-duration: 0s !important; }
@media (prefers-reduced-motion: reduce) {
  .ambient .orb, .ambient .sheen { animation: none !important; }
  * { transition-duration: .01ms !important; }
}

.login-screen, .app-shell { position: relative; z-index: 1; }

/* ---------- Liquid glass sidebar ---------- */
.sidebar {
  background: linear-gradient(180deg, rgba(10,22,46,.62), rgba(6,14,32,.72));
  backdrop-filter: blur(18px) saturate(140%);
  border-right: 1px solid var(--glass-edge);
  box-shadow: inset -1px 0 0 var(--glass-hi);
}
.nav { position: relative; gap: 3px; }
.nav-indicator {
  position: absolute; left: 0; right: 0; top: 0; height: 40px; border-radius: 11px; pointer-events: none;
  background: linear-gradient(135deg, rgba(46,140,255,.26), rgba(90,200,255,.10));
  border: 1px solid rgba(120,190,255,.32);
  box-shadow: 0 0 22px rgba(46,140,255,.28), inset 0 1px 0 rgba(255,255,255,.14);
  transition: transform .38s var(--ease), height .38s var(--ease), opacity .2s;
  opacity: 0;
}
.nav-indicator::before { content: ""; position: absolute; left: -1px; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: linear-gradient(var(--accent-2), var(--accent)); box-shadow: 0 0 10px var(--accent-2); }
.nav-item { position: relative; z-index: 1; height: 40px; padding: 0 12px; border-radius: 11px; transition: color .2s var(--ease), background .2s var(--ease), transform .15s var(--ease); }
.nav-item:hover { background: rgba(255,255,255,.05); color: var(--text); }
.nav-item:active { transform: scale(.98); }
.nav-item.active { background: transparent; box-shadow: none; color: var(--text); }
.nav-icon { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 8px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.05); transition: inherit; }
.nav-item.active .nav-icon { color: var(--accent-2); background: rgba(46,140,255,.18); border-color: rgba(120,190,255,.3); }
.powered { display: inline-flex; align-items: center; gap: 5px; }
.footer-meta { flex-wrap: wrap; gap: 4px; }

/* ---------- Topbar ---------- */
.topbar { background: rgba(6,14,32,.5); backdrop-filter: blur(14px); border-bottom: 1px solid var(--glass-edge); position: sticky; top: 0; z-index: 5; }
.anim-toggle, .user-pill {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--glass-edge); color: var(--text-dim); font: 500 12px var(--font-ui);
  box-shadow: inset 0 1px 0 var(--glass-hi); transition: all .2s var(--ease);
}
.anim-toggle { cursor: pointer; }
.anim-toggle:hover { color: var(--text); border-color: rgba(120,190,255,.35); }
.anim-toggle:active { transform: scale(.96); }
.anim-toggle strong { color: var(--accent-2); }
.anim-toggle .anim-off { display: none; }
html.motion-off .anim-toggle .anim-on { display: none; }
html.motion-off .anim-toggle .anim-off { display: inline-flex; }
html.motion-off .anim-toggle strong { color: var(--text-dim); }
.anim-on, .anim-off { display: inline-flex; }
.user-pill { color: var(--text); }
.user-pill .avatar { width: 22px; height: 22px; font-size: 11px; }
.avatar { overflow: hidden; flex-shrink: 0; }
.avatar-image { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* ---------- Glass cards ---------- */
.stat-card, .panel {
  background: linear-gradient(160deg, rgba(20,40,78,.55), rgba(10,22,46,.45));
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 10px 30px -12px rgba(0,0,0,.5);
  border-radius: 16px;
}
.stat-card { position: relative; overflow: hidden; transition: transform .2s var(--ease), border-color .2s, box-shadow .2s; }
.stat-card::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 50%; background: linear-gradient(180deg, rgba(255,255,255,.05), transparent); pointer-events: none; }
.stat-card:hover { transform: translateY(-2px); border-color: rgba(120,190,255,.32); box-shadow: inset 0 1px 0 var(--glass-hi), 0 14px 34px -12px rgba(46,140,255,.35); }
.stat-label { display: inline-flex; align-items: center; gap: 8px; }
.stat-icon { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 8px; color: var(--accent-2); background: rgba(46,140,255,.14); border: 1px solid rgba(120,190,255,.18); }
.stat-icon svg { width: 15px; height: 15px; }
.stat-value { font-size: 22px; letter-spacing: -.3px; transition: color .3s; }
.stat-value.positive { color: var(--success); text-shadow: 0 0 14px rgba(47,213,138,.2); }
.stat-value.negative { color: var(--danger); }
.stat-value.flash { animation: flash .7s var(--ease); }
@keyframes flash { 0% { opacity: .35; transform: translateY(3px); } 100% { opacity: 1; transform: none; } }

/* ---------- MT5 status ---------- */
.mt5-panel { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-bottom: 14px; }
.mt5-brand { display: flex; align-items: center; gap: 12px; min-width: 220px; }
.mt5-mark { width: 40px; height: 40px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font: 700 12px var(--font-mono); color: var(--text); background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 0 18px var(--glow); }
.mt5-title { font-weight: 600; font-size: 14px; }
.mt5-state { font-size: 12.5px; display: inline-flex; align-items: center; gap: 7px; color: var(--text-dim); }
.mt5-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim); }
.mt5-panel[data-state="connected"] .mt5-state { color: var(--success); }
.mt5-panel[data-state="connected"] .mt5-state::before { background: var(--success); box-shadow: 0 0 8px var(--success); animation: pulse 2s infinite; }
.mt5-panel[data-state="connecting"] .mt5-state { color: var(--warning); }
.mt5-panel[data-state="connecting"] .mt5-state::before { background: var(--warning); animation: pulse 1s infinite; }
.mt5-panel[data-state="disconnected"] .mt5-state::before { background: var(--danger); }
.mt5-panel[data-state="auth-error"] .mt5-state { color: var(--danger); }
.mt5-panel[data-state="auth-error"] .mt5-state::before { background: var(--danger); }
@keyframes pulse { 50% { opacity: .35; } }
.mt5-grid { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.mt5-grid div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mt5-grid span { font-size: 11.5px; color: var(--text-dim); }
.mt5-grid strong { font: 500 13px var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Page transitions & buttons ---------- */
.page.active { animation: pageIn .35s var(--ease); }
@keyframes pageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.btn { transition: transform .12s var(--ease), box-shadow .2s, background .2s; }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 6px 18px -6px var(--glow), inset 0 1px 0 rgba(255,255,255,.25); }
.empty-state { background: rgba(255,255,255,.02); border-color: var(--glass-edge); }
.panel, .data-table { max-width: 100%; }
.panel:has(.data-table) { overflow-x: auto; }

/* ---------- Login glass ---------- */
.login-card { background: linear-gradient(160deg, rgba(20,40,78,.6), rgba(8,18,40,.55)); backdrop-filter: blur(18px) saturate(140%); border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-hi), 0 30px 80px -20px rgba(0,0,0,.6); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) { .mt5-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 900px) {
  .anim-label, .clock { display: none; }
  .user-pill #headerUserLabel { display: none; }
  .sidebar { background: rgba(6,14,32,.92); }
}
@media (max-width: 560px) {
  .topbar-right { gap: 6px; }
  .pill-mode { display: none; }
  .stat-value { font-size: 18px; }
  .content { padding: 14px !important; }
  .kv-list.two-col { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .mt5-panel { flex-direction: column; align-items: stretch; gap: 14px; }
  .mt5-grid { grid-template-columns: 1fr 1fr; }
  .topbar .pill-status { font-size: 0; gap: 0; padding: 0 10px; }
  .page-title { font-size: 16px; }
}