:root {
    --bg-primary: #0a0a0b;
    --bg-secondary: #111113;
    --bg-card: #18181b;
    --border-color: #27272a;
    --text-primary: #fafafa;
    --text-secondary: #a1a1aa;
    --text-muted: #71717a;
    --accent-gold: #d4a843;
    --accent-gold-dark: #b8922f;
    --accent-green: #22c55e;
    --accent-red: #ef4444;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; background: var(--bg-primary); color: var(--text-primary); overflow: hidden; transition: background 0.3s, color 0.3s; }
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* LIGHT MODE BASE */
body.light { --bg-primary:#b8b8be; --bg-secondary:#a0a0a8; --bg-card:#c8c8ce; --border-color:#909098; --text-primary:#1a1a2e; --text-secondary:#44444d; --text-muted:#5a5a63; }
body.light .sidebar { background:var(--bg-card); border-right-color:var(--border-color); }
body.light .topbar { background:var(--bg-primary); border-bottom-color:var(--border-color); }
body.light .topbar-btn .badge { border-color:var(--bg-primary); }
body.light .sidebar-nav a:hover { background:var(--bg-secondary); color:var(--text-primary); }
body.light .sidebar-bottom a:hover { background:var(--bg-secondary); color:var(--text-primary); }
body.light .btn-logout:hover { background:rgba(239,68,68,0.1); }
body.light .modal { background:var(--bg-card); border-color:var(--border-color); }
body.light .modal-search input { background:var(--bg-secondary); border-color:var(--border-color); color:var(--text-primary); }
body.light .modal-item:hover { background:var(--bg-secondary); }
body.light .content-box { background:var(--bg-card); border-color:var(--border-color); }

/* SIDEBAR */
.sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 235px; background: var(--bg-card); border-right: 1px solid var(--border-color); display: flex; flex-direction: column; z-index: 100; padding: 1.25rem 0.75rem; }
.sidebar-logo { display: flex; align-items: center; justify-content: center; padding: 0 0.5rem; margin-bottom: 1.5rem; }
.sidebar-logo img { width: 174px; height: 88px; object-fit: contain; }
.sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.sidebar-nav a { display: flex; align-items: center; gap: 12px; padding: 0.75rem 1rem; border-radius: 10px; font-size: 0.9rem; font-weight: 500; color: var(--text-secondary); transition: all 0.2s; text-decoration: none; }
.sidebar-nav a:hover { background: var(--bg-secondary); color: var(--text-primary); }
.sidebar-nav a.active { background: rgba(212, 168, 67, 0.1); color: var(--accent-gold); font-weight: 600; }
.sidebar-nav a .material-symbols-outlined { font-size: 22px; }
.sidebar-logout { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--border-color); }
.sidebar-bottom { display: flex; align-items: center; justify-content: space-between; }
.sidebar-bottom-left { display: flex; align-items: center; gap: 8px; }
.sidebar-bottom a, .sidebar-bottom button { display: flex; align-items: center; gap: 8px; padding: 0.6rem 0.75rem; border-radius: 8px; font-size: 0.85rem; font-weight: 500; color: var(--text-secondary); transition: all 0.2s; text-decoration: none; background: none; border: none; cursor: pointer; font-family: inherit; }
.sidebar-bottom a:hover, .sidebar-bottom button:hover { background: var(--bg-secondary); color: var(--text-primary); }
.sidebar-bottom a.btn-logout { color: var(--accent-red); }
.sidebar-bottom a.btn-logout:hover { background: rgba(239, 68, 68, 0.1); }

/* TOPBAR */
.topbar { position: fixed; top: 0; left: 235px; right: 0; height: 56px; background: var(--bg-primary); border-bottom: 1px solid var(--border-color); display: flex; align-items: center; z-index: 100; padding: 0 1.5rem; }
.ticker-wrap { flex: 1; overflow: hidden; margin-right: 1.5rem; position: relative; }
.ticker-scroll { display: inline-flex; gap: 3rem; white-space: nowrap; animation: ticker 90s linear infinite; }
.ticker-scroll:hover { animation-play-state: paused; }
.ticker-set { display: inline-flex; gap: 3rem; padding-right: 3rem; }
@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-33.333%); } }
.ticker-item { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 500; }
.ticker-item .label { color: var(--text-muted); }
.ticker-item .price { font-family: 'JetBrains Mono', monospace; font-weight: 600; }
.ticker-item .change { font-size: 0.8rem; font-weight: 600; }
.ticker-item .change.positive { color: var(--accent-green); }
.ticker-item .change.negative { color: var(--accent-red); }
.topbar-actions { display: flex; align-items: center; gap: 0.5rem; }
.topbar-btn { position: relative; background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 6px; border-radius: 8px; transition: all 0.2s; }
.topbar-btn:hover { background: var(--bg-secondary); color: var(--text-primary); }
.topbar-btn .material-symbols-outlined { font-size: 24px; }
.topbar-btn .badge { position: absolute; top: 2px; right: 2px; width: 10px; height: 10px; background: var(--accent-gold); border-radius: 50%; border: 2px solid var(--bg-primary); }
.topbar-btn .badge.hidden { display: none; }
.topbar-btn .badge.active { display: block; width: auto; height: auto; min-width: 18px; padding: 0 4px; border-radius: 10px; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; background: var(--accent-red); color: white; animation: alertPulse 1s infinite; }
@keyframes alertPulse { 0%,100%{opacity:1;} 50%{opacity:0.5;} }
#btnNotifications.ringing .material-symbols-outlined { color:var(--accent-gold);transform-origin:50% 8%;animation:bellRing .72s ease-in-out infinite; }
#btnNotifications.ringing::after { content:"";position:absolute;inset:1px;border:1px solid rgba(201,163,95,.42);border-radius:3px;animation:bellHalo 1.2s ease-out infinite;pointer-events:none; }
@keyframes bellRing { 0%,100%{transform:rotate(0)}15%{transform:rotate(18deg)}30%{transform:rotate(-16deg)}45%{transform:rotate(12deg)}60%{transform:rotate(-9deg)}75%{transform:rotate(4deg)} }
@keyframes bellHalo { 0%{opacity:.8;transform:scale(.82)}100%{opacity:0;transform:scale(1.35)} }
.topbar-user { display: flex; align-items: center; gap: 10px; padding-left: 1rem; border-left: 1px solid var(--border-color); margin-left: 0.5rem; }
.topbar-user-name { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); }
.topbar-user-plan { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-gold); font-weight: 700; }

/* TICKER CONFIG MODAL */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:999; align-items:center; justify-content:center; }
.modal-overlay.open { display:flex; }
.modal { background:var(--bg-card); border:1px solid var(--border-color); border-radius:14px; width:480px; max-height:75vh; display:flex; flex-direction:column; box-shadow:0 25px 60px rgba(0,0,0,0.5); }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:1.25rem 1.5rem; border-bottom:1px solid var(--border-color); }
.modal-header h3 { font-size:1rem; font-weight:700; display:flex; align-items:center; gap:8px; }
.modal-close { background:none; border:none; color:var(--text-secondary); cursor:pointer; padding:4px; border-radius:6px; transition:0.2s; display:flex; }
.modal-close:hover { background:var(--bg-secondary); color:var(--text-primary); }
.modal-search { padding:1rem 1.5rem; position:relative; }
.modal-search input { width:100%; padding:0.7rem 1rem 0.7rem 2.5rem; background:var(--bg-secondary); border:1px solid var(--border-color); border-radius:10px; color:var(--text-primary); font-size:0.85rem; font-family:inherit; outline:none; }
.modal-search input:focus { border-color:var(--accent-gold); }
.modal-search .material-symbols-outlined { position:absolute; left:2.25rem; top:50%; transform:translateY(-50%); font-size:20px; color:var(--text-muted); }
.modal-list { flex:1; overflow-y:auto; padding:0 1.5rem 1rem; }
.modal-list::-webkit-scrollbar { width:5px; }
.modal-list::-webkit-scrollbar-thumb { background:var(--border-color); border-radius:3px; }
.modal-section-title { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-muted); font-weight:700; margin:1rem 0 0.5rem; }
.modal-item { display:flex; align-items:center; gap:12px; padding:0.65rem 0.75rem; border-radius:8px; cursor:pointer; transition:background 0.15s; }
.modal-item:hover { background:var(--bg-secondary); }
.modal-item-label { flex:1; }
.modal-item-name { font-size:0.85rem; font-weight:600; }
.modal-item-desc { font-size:0.75rem; color:var(--text-muted); }
.modal-item-symbol { font-size:0.7rem; font-family:'JetBrains Mono',monospace; color:var(--accent-gold); background:rgba(212,168,67,0.1); padding:0.15rem 0.5rem; border-radius:4px; font-weight:600; }
.modal-cb { width:20px; height:20px; accent-color:var(--accent-gold); cursor:pointer; flex-shrink:0; }

/* MAIN CONTENT AREA */
.dashboard-main { margin-left: 235px; margin-top: 56px; height: calc(100vh - 56px); overflow-y: auto; padding: 1.5rem; background: var(--bg-primary); }
.dashboard-main::-webkit-scrollbar { width: 6px; }
.dashboard-main::-webkit-scrollbar-track { background: var(--bg-secondary); }
.dashboard-main::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
.page-title { margin-bottom: 1.5rem; }
.page-title h1 { font-size: 1.5rem; font-weight: 700; }
.page-title p { color: var(--text-secondary); font-size: 0.9rem; }
.content-box { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 1.5rem; margin-bottom: 1.5rem; }
.content-box h3 { font-size: 1rem; font-weight: 600; margin-bottom: 1rem; }

/* ACCOUNT OVERLAY (shared by alerts, history, settings) */
.account-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:999; align-items:center; justify-content:center; }
.account-overlay.open { display:flex; }
.account-modal { background:var(--bg-card); border:1px solid var(--border-color); border-radius:14px; width:420px; box-shadow:0 25px 60px rgba(0,0,0,0.5); }
.account-modal-header { display:flex; align-items:center; justify-content:space-between; padding:1.25rem 1.5rem; border-bottom:1px solid var(--border-color); }
.account-modal-header h3 { font-size:1rem; font-weight:700; display:flex; align-items:center; gap:8px; }
.account-modal-body { padding:1.5rem; }
.account-row { display:flex; justify-content:space-between; align-items:center; padding:0.75rem 0; border-bottom:1px solid var(--border-color); }
.account-row:last-child { border-bottom:none; }
.account-row-label { font-size:0.8rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; }
.account-row-value { font-size:0.9rem; font-weight:600; color:var(--text-primary); }
.account-row-value.gold { color:var(--accent-gold); }
.account-plan-badge { display:inline-flex; align-items:center; gap:4px; padding:0.3rem 0.8rem; background:rgba(212,168,67,0.1); border:1px solid rgba(212,168,67,0.2); border-radius:20px; font-size:0.75rem; font-weight:700; color:var(--accent-gold); }

/* RESPONSIVE */
@media (max-width: 768px) { .sidebar { display: none; } .topbar { left: 0; } .dashboard-main { margin-left: 0; } }