@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
:root { --bg:#07111f; --surface:#0b192b; --surface-2:#0e2138; --line:rgba(177,205,235,.14); --text:#eff7ff; --muted:#96a9be; --aqua:#48e1c1; --blue:#6ba8ff; --red:#ff7b8c; --amber:#ffca6a; --font:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --mono:'DM Mono','SFMono-Regular',Consolas,monospace; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--text); background:radial-gradient(circle at 78% -10%,#123b5c 0,transparent 31rem),var(--bg); font-family:var(--font); } button,input,select,textarea { font:inherit; } button { cursor:pointer; } main { width:min(1440px,100%); padding:0 4.5rem 3rem; margin-left:250px; } .sidebar { position:fixed; z-index:5; inset:0 auto 0 0; width:250px; padding:2rem 1.35rem; border-right:1px solid var(--line); background:rgba(7,17,31,.9); backdrop-filter:blur(20px); display:flex; flex-direction:column; } .brand { display:flex; align-items:center; gap:.65rem; color:#fff; text-decoration:none; font-size:1.2rem; font-weight:800; letter-spacing:-.06em; margin-bottom:3.5rem; } .brand>span:last-child span { color:var(--aqua); }.brand-mark { width:2rem; height:2rem; display:grid; place-items:center; color:#062025; background:var(--aqua); border-radius:.55rem; font-family:var(--mono); font-size:.9rem; } .eyebrow { color:var(--aqua); font-family:var(--mono); font-size:.66rem; font-weight:500; letter-spacing:.12em; margin:0 0:.6rem; } .sidebar .eyebrow { color:var(--muted); margin-left:.7rem; } nav { display:grid; gap:.3rem; margin-top:1rem; } .nav-link { color:var(--muted); text-decoration:none; border-radius:.6rem; padding:.75rem .7rem; font-size:.86rem; font-weight:700; transition:.2s; } .nav-link:hover,.nav-link.active { color:#fff; background:rgba(93,167,255,.12); } .sidebar-note { margin-top:auto; border:1px solid var(--line); border-radius:.7rem; padding:.8rem; color:#c8d8e8; font-size:.72rem; } .sidebar-note small { color:var(--muted); display:block; margin:.5rem 0 0 1rem; line-height:1.4; }.status-dot { display:inline-block; width:.45rem; height:.45rem; border-radius:50%; background:var(--aqua); box-shadow:0 0 12px var(--aqua); margin-right:.35rem; }.topbar { min-height:194px; display:flex; align-items:center; justify-content:space-between; gap:2rem; }.topbar h1 { font-size:clamp(1.7rem,3.1vw,2.6rem); letter-spacing:-.06em; line-height:1.12; margin:0; }.clock { text-align:right; font-family:var(--mono); color:var(--aqua); font-size:1.1rem; }.clock small { display:block; color:var(--muted); font-family:var(--font); font-size:.68rem; margin-top:.25rem; }.mobile-menu { display:none; }.section { padding:2.1rem 0 4.6rem; scroll-margin-top:1rem; }.section-heading { display:flex; justify-content:space-between; gap:2rem; align-items:end; margin-bottom:1.25rem; }.section-heading h2 { font-size:1.55rem; letter-spacing:-.045em; margin:0; }.subtle,.session-note,.search-help { color:var(--muted); font-size:.78rem; margin:0; line-height:1.5; }.data-badge { color:var(--aqua); background:rgba(72,225,193,.1); padding:.38rem .6rem; border:1px solid rgba(72,225,193,.25); border-radius:999px; font-family:var(--mono); font-size:.64rem; }.quote-search { display:flex; background:#fff; border-radius:.8rem; overflow:hidden; margin-bottom:.55rem; }.quote-search input { flex:1; min-width:0; border:0; outline:0; padding:1rem 1.1rem; color:#10253c; font-weight:700; font-size:.9rem; }.quote-search button,.primary-button { border:0; color:#042026; background:var(--aqua); padding:0 1.1rem; font-weight:800; font-size:.82rem; }.quote-search button span { margin-left:.4rem; }.quote-error { min-height:1.1rem; color:var(--amber); font-size:.72rem; margin:.5rem 0; }.quote-grid { display:grid; grid-template-columns:1.3fr .7fr; gap:1rem; margin-top:.75rem; }.card { background:linear-gradient(140deg,rgba(16,38,63,.96),rgba(8,25,43,.93)); border:1px solid var(--line); border-radius:.85rem; }.quote-main { padding:1.25rem 1.4rem; }.instrument-name { display:flex; justify-content:space-between; color:var(--muted); font-size:.72rem; }.asset-chip { background:rgba(107,168,255,.14); color:#a7ceff; border-radius:999px; padding:.25rem .43rem; font-family:var(--mono); font-size:.61rem; letter-spacing:.07em; }.price-line { display:flex; align-items:baseline; gap:.6rem; margin:1.2rem 0 1.4rem; }.price-line strong { letter-spacing:-.07em; font-size:clamp(2rem,4vw,3.2rem); }.price-line span { color:var(--muted); font-family:var(--mono); font-size:.7rem; }.quote-details { display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; border-top:1px solid var(--line); padding-top:.85rem; }.quote-details span,.result-row span,.journal-summary span { color:var(--muted); display:block; font-size:.66rem; margin-bottom:.26rem; }.quote-details b { font-family:var(--mono); font-size:.72rem; }.market-coverage { padding:1.25rem 1.35rem; }.market-coverage h3,.journal-form h3,.journal-list h3 { margin:.15rem 0 .75rem; font-size:1rem; letter-spacing:-.03em; }.market-coverage p:not(.eyebrow) { color:var(--muted); font-size:.74rem; line-height:1.55; }.coverage-tags { display:flex; gap:.35rem; flex-wrap:wrap; margin-top:1.2rem; }.coverage-tags span { border:1px solid var(--line); color:#c8dae9; border-radius:999px; padding:.25rem .45rem; font-family:var(--mono); font-size:.6rem; }.calculator-section { border-top:1px solid var(--line); }.calculator-layout { display:grid; grid-template-columns:180px 1fr; gap:1rem; }.calculator-tabs { display:flex; flex-direction:column; gap:.4rem; }.calc-tab { text-align:left; color:var(--muted); background:transparent; border:1px solid transparent; padding:.75rem; border-radius:.55rem; font-weight:700; font-size:.76rem; }.calc-tab.active { color:var(--text); border-color:var(--line); background:var(--surface-2); }.calculator-card { overflow:hidden; }.calculator-form { display:none; padding:1.45rem; }.calculator-form.active { display:block; }.form-title { display:flex; align-items:start; justify-content:space-between; margin-bottom:1.25rem; }.form-title h3 { margin:0; font-size:1.05rem; letter-spacing:-.035em; }.form-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; }.form-grid label { display:grid; gap:.37rem; color:#c8d8e8; font-size:.67rem; font-weight:700; }.form-grid input,.form-grid select,.form-grid textarea { width:100%; color:var(--text); background:#071626; border:1px solid var(--line); border-radius:.42rem; padding:.65rem .6rem; outline:0; font-size:.8rem; font-family:var(--mono); }.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus { border-color:var(--blue); }.form-grid select { font-family:var(--font); }.input-prefix,.input-suffix { position:relative; display:flex; align-items:center; }.input-prefix input { padding-left:1.4rem; }.input-suffix input { padding-right:3.5rem; }.input-prefix span,.input-suffix span { position:absolute; z-index:1; color:var(--muted); font-size:.7rem; }.input-prefix span { left:.55rem; }.input-suffix span { right:.55rem; }.result-row { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; border-top:1px solid var(--line); margin-top:1.3rem; padding-top:1.2rem; }.result-row strong { color:var(--aqua); font-family:var(--mono); font-size:1.15rem; }.result-row small { color:var(--muted); display:block; font-size:.64rem; margin-top:.4rem; }.one-result { grid-template-columns:1fr; }.session-now { color:#d5e8fb; font-size:.76rem; }.session-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; }.session-card { padding:1rem; position:relative; overflow:hidden; }.session-card.open { border-color:rgba(72,225,193,.42); }.session-card.closed { opacity:.62; }.session-card.open:after { content:''; position:absolute; inset:auto -1rem -.9rem auto; height:3rem; width:3rem; border-radius:50%; background:var(--aqua); filter:blur(20px); opacity:.3; }.session-card h3 { margin:.5rem 0 .3rem; font-size:.95rem; }.session-card p { color:var(--muted); font-size:.7rem; margin:0; }.session-card b { display:block; margin-top:.8rem; color:#daebf9; font-family:var(--mono); font-size:.68rem; }.session-card .open-text { color:var(--aqua); }.session-note { margin-top:.9rem; }.journal-section { border-top:1px solid var(--line); }.journal-layout { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }.journal-form { padding:1.25rem; }.full-width { grid-column:1/-1; }.form-grid textarea { min-height:5.6rem; resize:vertical; font-family:var(--font); }.primary-button { border-radius:.45rem; height:2.4rem; margin-top:1rem; }.journal-side { display:grid; gap:1rem; }.journal-summary { padding:1rem 1.1rem; display:grid; grid-template-columns:repeat(3,1fr); }.journal-summary div+div { border-left:1px solid var(--line); padding-left:1rem; }.journal-summary strong { font-family:var(--mono); color:var(--aqua); font-size:.95rem; }.journal-list { padding:1rem 1.1rem; min-height:180px; }.journal-list-head { display:flex; justify-content:space-between; align-items:center; }.text-button { color:var(--aqua); border:0; background:transparent; padding:0; font-size:.7rem; font-weight:800; }.text-button.danger { color:var(--red); }.entries-empty { color:var(--muted); font-size:.75rem; padding:1.7rem 0; }.journal-entry { display:grid; grid-template-columns:1fr auto; gap:.5rem; border-top:1px solid var(--line); padding:.7rem 0; }.journal-entry b { font-size:.73rem; }.journal-entry small { display:block; color:var(--muted); font-size:.65rem; margin-top:.18rem; }.journal-entry .trade-pnl { font-family:var(--mono); font-size:.75rem; align-self:center; }.positive { color:var(--aqua)!important; }.negative { color:var(--red)!important; } footer { color:var(--muted); border-top:1px solid var(--line); padding-top:1.5rem; font-size:.67rem; }.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
@media (max-width:900px) { .sidebar { width:200px; }.sidebar .brand { margin-bottom:2rem; } main { margin-left:200px; padding:0 2rem 2rem; }.quote-grid,.journal-layout { grid-template-columns:1fr; }.session-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:650px) { main { margin:0; padding:0 1.05rem 2rem; }.sidebar { transform:translateX(-100%); transition:.2s; width:255px; }.sidebar.visible { transform:translateX(0); box-shadow:25px 0 50px rgba(0,0,0,.4); }.topbar { min-height:142px; align-items:center; }.mobile-menu { display:block; color:var(--text); background:transparent; border:0; font-size:1.25rem; padding:0; }.topbar>div:nth-child(2) { flex:1; }.topbar h1 { font-size:1.55rem; }.clock { display:none; }.section { padding:1.4rem 0 3.4rem; }.section-heading { align-items:start; flex-direction:column; gap:.55rem; }.quote-search button { font-size:0; padding:0 1rem; }.quote-search button span { font-size:1.15rem; margin:0; }.quote-details { grid-template-columns:1fr 1fr; }.calculator-layout { grid-template-columns:1fr; }.calculator-tabs { flex-direction:row; overflow-x:auto; padding-bottom:.25rem; }.calc-tab { white-space:nowrap; }.calculator-form { padding:1.1rem; }.form-grid { grid-template-columns:1fr 1fr; }.result-row { grid-template-columns:1fr; gap:.7rem; }.session-grid { grid-template-columns:1fr 1fr; }.journal-summary { grid-template-columns:1fr 1fr 1fr; }.journal-summary strong { font-size:.8rem; }.journal-summary div+div { padding-left:.55rem; } }

/* Responsive navigation overrides: the menu can collapse at every size and content never overflows the viewport. */
body { overflow-x:hidden; }
main { width:auto; min-width:0; transition:margin .24s ease,padding .24s ease; }
.sidebar { transition:transform .24s ease,box-shadow .24s ease; }
.mobile-menu { display:block; color:var(--text); background:transparent; border:0; font-size:1.25rem; padding:0; }
body.nav-collapsed .sidebar { transform:translateX(-100%); }
body.nav-collapsed main { margin-left:0; }

@media (max-width:900px) {
  main { width:auto; margin-left:0; padding:0 2rem 2rem; }
  .sidebar { width:255px; transform:translateX(-100%); }
  .sidebar.visible { transform:translateX(0); box-shadow:25px 0 50px rgba(0,0,0,.4); }
  body.nav-collapsed .sidebar { transform:translateX(-100%); }
}

@media (max-width:650px) {
  main { margin-left:0; padding:0 1.05rem 2rem; }
  .topbar-actions { min-width:0; }
  .calculator-card,.calculator-layout,.quote-grid,.card { min-width:0; }
}