/* Your main top navigation bar */ .main-navbar-container { position: fixed; top: 0; z-index: 100; /* Highest */ } /* The Market Pills bar we fixed earlier */ .topbar-secondary { position: sticky; top: 64px; /* Adjust based on navbar height */ z-index: 90; /* High, but lower than main navbar */ } /* The Dashboard Panels that are currently overlapping */ .panel { position: relative; z-index: 10; /* Lower than both bars */ } /* Ensure the wrapper doesn't create a weird stacking context */ .dash-grid { position: relative; z-index: 1; } .sidebar { /* or whatever your class name is */ position: sticky; top: 110px; /* Should be navbar height + secondary bar height */ z-index: 50; height: calc(100vh - 110px); } .sidebar { /* or whatever your class name is */ position: sticky; top: 110px; /* Should be navbar height + secondary bar height */ z-index: 50; height: calc(100vh - 110px); } .dash-grid { margin-top: 20px; /* Add space so the first panel doesn't touch the bar */ } /* ══════════════════════════════════════════════ THEME VARIABLES — Applied to element ══════════════════════════════════════════════ */ :root, [data-theme="dark"] { --bg: #0f172a; --panel: #1e293b; --input-bg: #0b1120; --border: #334155; --border2: #1e293b; --txt: #f8fafc; --muted: #94a3b8; --muted2: #475569; --shadow: 0 4px 18px rgba(0,0,0,.4); } [data-theme="light"] { --bg: #f1f5f9; --panel: #ffffff; --input-bg: #f8fafc; --border: #e2e8f0; --border2: #f1f5f9; --txt: #0f172a; --muted: #64748b; --muted2: #94a3b8; --shadow: 0 2px 10px rgba(0,0,0,.08); } /* accent colors — same in both themes */ :root { --blue: #3b82f6; --blue2: #2563eb; --cyan: #06b6d4; --green: #10b981; --red: #ef4444; --gold: #f59e0b; --orange: #f97316; --purple: #8b5cf6; --r: 10px; } /* ── RESET ── */ *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; } html, body { height:100%; background: var(--bg); color: var(--txt); font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; transition: background .25s, color .25s; } /* ── LAYOUT ── */ #app { display:flex; width:100%; min-height:100vh; } /* ══════════ SIDEBAR ══════════ */ .sidebar { width:240px; min-width:240px; background: var(--panel); border-right: 1px solid var(--border); position: fixed; top:70px; left:0; height:calc(100vh - 70px); z-index:200; display:flex; flex-direction:column; overflow-y:auto; transition: transform .28s ease, background .25s, border-color .25s; } .sidebar::-webkit-scrollbar { width:0; } .nsec { padding:20px 18px 8px; font-size:.65rem; color:var(--muted2); text-transform:uppercase; letter-spacing:1.2px; font-weight:800; } .nitem { display:flex; align-items:center; gap:12px; padding:12px 18px; margin: 0 10px 4px 10px; color:var(--muted); font-size:.84rem; font-weight:600; cursor:pointer; border:none; background:none; text-align:left; border-radius: 8px; transition:.15s ease; position:relative; } .nitem:hover { background:rgba(59,130,246,.08); color:var(--txt); } .nitem.active { background:var(--blue); color:#fff; font-weight:700; box-shadow: 0 4px 12px rgba(59,130,246,0.3); } .nitem i { width:18px; text-align:center; font-size:.85rem; opacity:0.8; } .nitem.active i { opacity:1; } .sb-footer { margin-top:auto; padding:16px; border-top:1px solid var(--border); flex-shrink:0; } .upgrade-card { background:linear-gradient(135deg,rgba(245,158,11,.1),rgba(249,115,22,.06)); border:1px solid rgba(245,158,11,.28); border-radius:var(--r); padding:15px; text-align:center; cursor:pointer; transition:.18s; } .upgrade-card:hover { border-color:rgba(245,158,11,.55); transform:translateY(-2px); box-shadow: 0 4px 15px rgba(245,158,11,.15); } .upgrade-card .crown { font-size:1.6rem; margin-bottom:6px; } .upgrade-card h4 { font-size:.8rem; color:var(--gold); font-weight:900; text-transform:uppercase; letter-spacing:.5px; } .upgrade-card p { font-size:.65rem; color:var(--muted); margin-top:4px; font-weight: 500;} /* ══════════ MAIN WRAP ══════════ */ .main-wrap { flex:1; margin-left:240px; display:flex; flex-direction:column; min-height:100vh; transition:margin .28s; } /* ══════════ TOP BAR SECONARY ══════════ */ .topbar-secondary { background: var(--panel); border-bottom: 1px solid var(--border); padding: 0 20px; height: 50px; display: flex; align-items:center; justify-content:space-between; position: sticky; top:70px; z-index:100; transition: background .25s, border-color .25s; flex-shrink:0; } /* Market pills — compact */ .mkt-pills { display:flex; gap:6px; align-items:center; } .mpill { display:flex; align-items:center; gap:4px; background: var(--input-bg); border:1px solid var(--border); border-radius:5px; padding:3px 9px; font-size:.72rem; font-weight:600; white-space:nowrap; transition: background .25s, border-color .25s; } .mpill .lbl { color:var(--muted); font-size:.65rem; margin-right:2px; } .dot { width:5px; height:5px; border-radius:50%; flex-shrink:0; animation:blink 1.6s infinite; } .dot-g { background:var(--green); } .dot-r { background:var(--red); } @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} } .mpill .val { font-family:'Courier New',monospace; font-size:.75rem; } .tb-right { display:flex; align-items:center; gap:6px; flex-wrap:nowrap; } .timer-pill { font-family:'Courier New',monospace; font-size:.82rem; font-weight:700; background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.25); color:var(--red); border-radius:5px; padding:4px 10px; letter-spacing:.8px; display:flex; align-items:center; gap:4px; white-space:nowrap; } .tbtn { padding:5px 12px; border-radius:6px; font-size:.76rem; font-weight:600; cursor:pointer; border:1px solid var(--border); background:var(--input-bg); color:var(--muted); transition:.13s; display:flex; align-items:center; gap:5px; font-family:'Segoe UI',sans-serif; white-space:nowrap; flex-shrink:0; } .tbtn:hover { color:var(--txt); border-color:var(--blue); } /* ══════════ CONTENT ══════════ */ .content { padding:18px 20px; flex:1; } .tab-pane { display:none; animation:fup .2s ease; } .tab-pane.active { display:block; } @keyframes fup { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:translateY(0)} } /* ══════════ CAPITAL BANNER ══════════ */ .cap-banner { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-bottom:16px; } .cap-card { background:var(--panel); border:1px solid var(--border); border-radius:var(--r); padding:12px 14px; display:flex; align-items:center; gap:10px; box-shadow:var(--shadow); transition:background .25s, border-color .25s; } .cap-ico { width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:.85rem; flex-shrink:0; } .ci-o { background:rgba(59,130,246,.12); color:var(--blue); } .ci-c { background:rgba(16,185,129,.12); color:var(--green); } .ci-p { background:rgba(239,68,68,.12); color:var(--red); } .ci-r { background:rgba(245,158,11,.12); color:var(--gold); } .ci-b { background:rgba(139,92,246,.12); color:var(--purple); } .cap-info h5 { font-size:.6rem; color:var(--muted); text-transform:uppercase; letter-spacing:.6px; font-weight:600; margin-bottom:3px; transition: .3s; } .cap-info .cv { font-family:'Courier New',monospace; font-size:.9rem; font-weight:700; line-height:1.2; } .cap-inp { font-family:'Courier New',monospace; font-weight:700; font-size:.82rem; width:100px; padding:4px 8px; background:transparent; border:1px solid transparent; border-radius:5px; color:var(--txt); outline:none; transition:.13s; } .cap-inp:focus { border-color:var(--blue); background:var(--input-bg); } /* ══════════ STATS ROW ══════════ */ .stats-row { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-bottom:16px; } .sc { background:var(--panel); border:1px solid var(--border); border-radius:var(--r); padding:12px 14px; position:relative; overflow:hidden; transition:background .25s, border-color .25s; box-shadow:var(--shadow); } .sc::after { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--sa, var(--blue)); } .sc h4 { font-size:.61rem; color:var(--muted); text-transform:uppercase; letter-spacing:.7px; font-weight:600; margin-bottom:5px; display:flex; justify-content:space-between; align-items:center;} .sc .sv { font-family:'Courier New',monospace; font-size:1.08rem; font-weight:700; line-height:1.2; } .sc .ss { font-size:.65rem; color:var(--muted); margin-top:3px; } .sc-g{--sa:var(--green)} .sc-r{--sa:var(--red)} .sc-b{--sa:var(--blue)} .sc-c{--sa:var(--cyan)} .sc-o{--sa:var(--gold)} .sc-p{--sa:var(--purple)} /* ══════════ PANELS ══════════ */ .panel { background:var(--panel); border:1px solid var(--border); border-radius:var(--r); padding:18px; margin-bottom:16px; box-shadow:var(--shadow); transition:background .25s, border-color .25s; } .phdr { display:flex; align-items:center; gap:8px; margin-bottom:15px; padding-bottom:12px; border-bottom:1px solid var(--border); } .phdr h3 { font-size:.9rem; font-weight:700; color:var(--txt); margin:0; } .phdr i { color:var(--blue); font-size:.82rem; } .live-dot { margin-left:auto; font-size:.58rem; padding:3px 8px; border-radius:10px; background:rgba(16,185,129,.1); color:var(--green); border:1px solid rgba(16,185,129,.22); font-weight:700; letter-spacing:.3px; } /* ══════════ DASH GRID ══════════ */ .dash-grid { display:grid; grid-template-columns:320px 1fr; gap:16px; align-items:start; } /* ══════════ FORM ══════════ */ .fgrid { display:grid; grid-template-columns:1fr 1fr; gap:9px; } .fg { display:flex; flex-direction:column; gap:4px; } .fg.full { grid-column:span 2; } .fg label { font-size:.68rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.4px; } .ctrl { width:100%; padding:8px 11px; background:var(--input-bg); border:1px solid var(--border); color:var(--txt); border-radius:7px; font-size:.84rem; font-family:'Segoe UI',sans-serif; outline:none; transition:.13s; } .ctrl:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(59,130,246,.1); } .ctrl option { background:var(--panel); color:var(--txt); } .btn-save { width:100%; padding:11px; background:linear-gradient(to right,var(--blue),var(--blue2)); color:#fff; border:none; border-radius:8px; font-weight:700; font-size:.9rem; cursor:pointer; margin-top:4px; font-family:'Segoe UI',sans-serif; transition:.13s; display:flex; align-items:center; justify-content:center; gap:7px; } .btn-save:hover { opacity:.88; box-shadow:0 5px 18px rgba(59,130,246,.3); } /* ══════════ TABLES ══════════ */ .tbl-wrap { overflow-x:auto; overflow-y:auto; max-height:450px; border-radius: 8px; } .tbl-wrap::-webkit-scrollbar { width:6px; height:6px; } .tbl-wrap::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; } table { width:100%; border-collapse:collapse; font-size:.82rem; text-align:left; } th { position:sticky; top:0; background:var(--panel); padding:14px 16px; color:var(--muted); text-transform:uppercase; font-size:.65rem; font-weight:800; letter-spacing:.8px; border-bottom:2px solid var(--border); white-space:nowrap; z-index:2; } td { padding:14px 16px; border-bottom:1px solid var(--border2); vertical-align:middle; font-weight:500; } tr:hover td { background:rgba(59,130,246,.04); } .sub { font-size:.68rem; color:var(--muted); display:block; margin-top:4px; font-weight:400; } /* ══════════ BADGES ══════════ */ .badge { padding:3px 7px; border-radius:4px; font-size:.63rem; font-weight:700; display:inline-block; letter-spacing:.3px; } .b-ce { background:rgba(16,185,129,.12); color:var(--green); border:1px solid rgba(16,185,129,.22); } .b-pe { background:rgba(239,68,68,.12); color:var(--red); border:1px solid rgba(239,68,68,.22); } .b-eq { background:rgba(59,130,246,.12); color:var(--blue); border:1px solid rgba(59,130,246,.22); } .b-fut { background:rgba(245,158,11,.12); color:var(--gold); border:1px solid rgba(245,158,11,.22); } .etag { padding:2px 7px; border-radius:4px; font-size:.65rem; font-weight:600; display:inline-block; } .e-calm { background:rgba(16,185,129,.1); color:var(--green); } .e-fomo { background:rgba(245,158,11,.1); color:var(--gold); } .e-greed { background:rgba(249,115,22,.1); color:var(--orange); } .e-revenge { background:rgba(239,68,68,.1); color:var(--red); } .e-conf { background:rgba(59,130,246,.1); color:var(--blue); } .txt-g { color:var(--green)!important; font-weight:700; } .txt-r { color:var(--red)!important; font-weight:700; } .streak-badge { font-size:.6rem; padding:2px 6px; border-radius:4px; font-weight:700; display:inline-flex; align-items:center; gap:3px; } .streak-w { background:rgba(16,185,129,.15); color:var(--green); } .streak-l { background:rgba(239,68,68,.15); color:var(--red); } /* ══════════ CHARTS & ANALYTICS ══════════ */ .charts-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; } .chart-wrap { position:relative; height:250px; } .an-row { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px; } .an-card { background:var(--panel); border:1px solid var(--border); border-radius:var(--r); padding:14px; text-align:center; box-shadow:var(--shadow); } .an-ico { font-size:1.3rem; margin-bottom:5px; } .an-num { font-family:'Courier New',monospace; font-size:1.25rem; font-weight:700; margin-bottom:3px; } .an-lbl { font-size:.62rem; color:var(--muted); text-transform:uppercase; letter-spacing:.6px; font-weight:600; } /* ══════════ NOTION PROPS ══════════ */ .prop-row { display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-bottom:1px solid var(--border2); } .prop-key { font-size:.76rem; color:var(--muted); display:flex; align-items:center; gap:7px; } .prop-val { font-size:.8rem; font-weight:600; text-align:right; max-width:58%; } /* ══════════ MARKET WATCH & RISK ══════════ */ .mw-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:12px; } .mw-item { background:var(--input-bg); border:1px solid var(--border); border-radius:8px; padding:11px 13px; display:flex; justify-content:space-between; align-items:center; } .mw-nm { font-size:.77rem; font-weight:700; } .mw-v { font-family:'Courier New',monospace; font-size:.83rem; font-weight:700; text-align:right; } .mw-c { font-size:.65rem; margin-top:2px; text-align:right; } .ro-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; } .ro-item { background:var(--input-bg); border:1px solid var(--border); border-radius:8px; padding:12px; transition:background .25s; } .ro-lbl { font-size:.62rem; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; font-weight:600; margin-bottom:4px; } .ro-val { font-family:'Courier New',monospace; font-size:1.05rem; font-weight:700; } /* ══════════ PRO LOCK & MODAL ══════════ */ .pro-cell { position:relative; display:inline-flex; align-items:center; justify-content:center; min-width:48px; vertical-align:middle; } .pro-blur { filter:blur(5px); pointer-events:none; user-select:none; opacity:.22; } .pro-tag { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:5; font-size:.56rem; font-weight:900; color:var(--gold); background:rgba(245,158,11,.05); border-radius:3px; gap:2px; } .chart-lock { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; background:rgba(15,23,42,.8); backdrop-filter:blur(6px); border-radius:8px; cursor:pointer; z-index:10; gap:10px; } [data-theme="light"] .chart-lock { background:rgba(248,250,252,.88); } .chart-lock i { font-size:2.2rem; color:var(--gold); } .chart-lock span { font-size:.74rem; font-weight:800; color:var(--gold); letter-spacing:1px; text-transform:uppercase; } #pro-modal { position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.82); backdrop-filter:blur(8px); display:none; align-items:center; justify-content:center; opacity:0; transition:opacity .28s; padding:16px; } .modal-box { background:var(--panel); width:100%; max-width:440px; padding:34px 28px; border-radius:16px; border:1px solid rgba(245,158,11,.35); box-shadow:0 0 60px rgba(245,158,11,.12); text-align:center; transform:scale(.93); transition:transform .28s; } .modal-box.up { transform:scale(1); } .mc { font-size:2.8rem; margin-bottom:13px; } .modal-box h2 { font-size:1.3rem; font-weight:900; text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px; color:var(--gold); } .modal-box p { color:var(--muted); font-size:.86rem; margin-bottom:20px; line-height:1.6; } .mf-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-bottom:22px; text-align:left; } .mf { background:var(--input-bg); border:1px solid var(--border); border-radius:7px; padding:8px 10px; font-size:.74rem; display:flex; align-items:center; gap:6px; } .mf i { color:var(--green); font-size:.7rem; } .btn-mu { display:block; width:100%; padding:13px; background:linear-gradient(to right,var(--gold),var(--orange)); color:#fff; border:none; border-radius:10px; font-weight:900; font-size:.96rem; cursor:pointer; letter-spacing:.5px; text-transform:uppercase; box-shadow:0 8px 25px rgba(245,158,11,.3); transition:.18s; margin-bottom:12px; font-family:'Segoe UI',sans-serif; } .btn-mu:hover { transform:translateY(-2px); box-shadow:0 14px 35px rgba(245,158,11,.45); } .btn-later { background:none; border:none; color:var(--muted); font-size:.78rem; cursor:pointer; font-family:'Segoe UI',sans-serif; } .btn-later:hover { color:var(--txt); } /* ══════════ SIDEBAR OVERLAY ══════════ */ .sb-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:150; backdrop-filter:blur(2px); } /* ══════════ RESPONSIVE ══════════ */ @media(max-width:1280px) { .stats-row { grid-template-columns:repeat(3,1fr); } .cap-banner { grid-template-columns:repeat(3,1fr); } .mw-grid { grid-template-columns:repeat(2,1fr); } } @media(max-width:1024px) { .sidebar { transform:translateX(-100%); } .sidebar.open { transform:translateX(0); } .sb-overlay.open { display:block; } .main-wrap { margin-left:0; } .hamburger { display:flex; } .dash-grid { grid-template-columns:1fr; } .charts-grid { grid-template-columns:1fr; } .an-row { grid-template-columns:repeat(2,1fr); } } @media(max-width:768px) { .stats-row { grid-template-columns:repeat(2,1fr); } .cap-banner { grid-template-columns:1fr 1fr; } .content { padding:12px 14px; } .fgrid { grid-template-columns:1fr; } .fg.full { grid-column:span 1; } .mf-grid { grid-template-columns:1fr; } .ro-grid { grid-template-columns:1fr; } #expiry-cal { grid-template-columns:repeat(2,1fr)!important; } } @media(max-width:480px) { .stats-row { grid-template-columns:repeat(2,1fr); } .cap-banner { grid-template-columns:1fr; } .an-row { grid-template-columns:1fr 1fr; } }