@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700;800&family=DM+Mono:wght@300;400;500&display=swap');

:root {
  --bg:        #0a0a0a;
  --bg2:       #101010;
  --bg3:       #181818;
  --bg4:       #202020;
  --line:      rgba(255,255,255,0.05);
  --line2:     rgba(255,255,255,0.08);
  --text:      #ffffff;
  --text2:     #d8d8d8;
  --text3:     #9e9e9e;
  --green:     #1EB88A;
  --green-dim: rgba(29,184,122,0.13);
  --green-hi:  #25d48e;
  --red:       #FF6B6B;
  --red-dim:   rgba(240,79,106,0.12);
  --amber:     #e8a030;
  --amber-dim: rgba(232,160,48,0.12);
  --blue:      #3d7ef5;
  --blue-dim:  rgba(61,126,245,0.12);
  --purple:    #F1F757;
  --purple-dim:rgba(241,247,87,0.12);
  --purple-hi: #f5fa7a;
  --accent:    #F1F757;
  --yellow:    #F1F757;
  --yellow-dim:rgba(241,247,87,0.12);
  --r:         12px;
  --r-lg:      18px;
  --font:      'Montserrat', sans-serif;
  --font-head: 'Montserrat', sans-serif;
  --font-mono: 'DM Mono', monospace;
  --sidebar:   64px;
  --topbar:    96px;
}
[data-theme="light"] {
  --bg:        #f4f5fa;
  --bg2:       #ffffff;
  --bg3:       #eef0f6;
  --bg4:       #e2e5ef;
  --line:      rgba(0,0,0,0.07);
  --line2:     rgba(0,0,0,0.14);
  --text:      #0e1120;
  --text2:     #505b78;
  --text3:     #8e97b3;
  --green:     #158a5e;
  --green-dim: rgba(21,138,94,0.1);
  --green-hi:  #1EB88A;
  --red:       #cc3352;
  --red-dim:   rgba(204,51,82,0.1);
  --amber:     #b36e08;
  --amber-dim: rgba(179,110,8,0.1);
  --blue:      #2660d4;
  --blue-dim:  rgba(38,96,212,0.1);
  --purple:    #5c34d4;
  --purple-dim:rgba(92,52,212,0.1);
  --purple-hi: #7c5cfc;
  --accent:    #5c34d4;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.5;overflow:hidden}


.shell{display:flex;height:100vh;background:var(--bg)}
/* sidebar: fixed overlay — zero impact on flex layout */
.sidebar-wrap{width:148px;flex-shrink:0;position:relative;z-index:100}
.sidebar{position:absolute;top:50%;transform:translateY(-50%);left:43px;width:62px;background:rgba(13,13,13,0.9);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.09);border-radius:22px;padding:8px 0;overflow:hidden;transition:width .28s cubic-bezier(.4,0,.2,1),box-shadow .28s;display:flex;flex-direction:column}
.sidebar-wrap:hover .sidebar{width:210px;box-shadow:0 0 40px rgba(241,247,87,0.05),0 8px 32px rgba(0,0,0,0.7)}
/* body takes full width; left-padding prevents overlap with fixed sidebar */
.body{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.topbar{height:var(--topbar);display:flex;align-items:center;justify-content:space-between;padding:0 24px 0 0;background:var(--bg);flex-shrink:0;border-bottom:none;position:relative;z-index:400}
.topbar::after{display:none}
.main{flex:1;overflow-y:auto;overflow-x:hidden;padding:48px 48px 48px;scrollbar-width:thin;scrollbar-color:var(--bg4) transparent}
.main::-webkit-scrollbar{width:4px}
.main::-webkit-scrollbar-track{background:transparent}
.main::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:4px}
.page{display:none;animation:fadeUp 0.18s ease}
.page.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ── SIDEBAR ── */
.nav{display:flex;flex-direction:column;padding:4px 0;overflow:visible}
.nav-section{display:none}
/* pill=58px, padding=11px each side → 58-22=36px = exact icon width → perfectly centred */
.nav-item{height:50px;display:flex;align-items:center;padding:0 8px;margin:2px 0;cursor:pointer;user-select:none;white-space:nowrap;color:rgba(255,255,255,0.58);transition:color .15s;border-radius:0}
/* on hover pill expands, show label from icon position */
.sidebar-wrap:hover .nav-item{padding:0 10px!important}
.nav-icon{width:44px;min-width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s}
.nav-item:hover{color:rgba(255,255,255,0.85)}
.nav-item:hover .nav-icon{background:rgba(255,255,255,0.06)}
.nav-item.active:hover,.nav-item.active:hover .nav-icon{background:var(--bg);color:var(--yellow)}
.nav-item.active{color:var(--yellow)}
.nav-item.active .nav-icon{outline:2px solid var(--yellow);outline-offset:0px;background:var(--bg)}
.nav-item.active .nav-icon svg{color:var(--yellow)}
.nav-item svg{width:22px;height:22px;flex-shrink:0}
.nav-label{font-size:14px;margin-left:10px;opacity:0;transition:opacity .18s .12s,margin .18s .12s;white-space:nowrap;overflow:hidden;max-width:0;display:block;flex-shrink:0}

.sidebar-wrap:hover .nav-label{opacity:1;max-width:140px}
.nav-chev{flex-shrink:0;margin-left:auto;padding-right:10px;opacity:0;transition:opacity .18s .12s}
.sidebar-wrap:hover .nav-chev{opacity:0.5}
.nav-sub{padding-left:0}
.nav-sub .nav-item{height:38px!important;padding:0 14px!important}
.nav-sub .nav-icon{width:30px;min-width:30px;height:30px;border-radius:9px}
.nav-sub .nav-icon svg{width:15px;height:15px}
.nav-sub .nav-label{font-size:13px}
.nav-sub .nav-item.active .nav-icon{outline:2px solid var(--yellow);outline-offset:0px;background:var(--bg)}
.nav-sub .nav-item.active .nav-icon svg{color:var(--yellow)}

.status-dot{width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block;margin-right:6px;box-shadow:0 0 6px rgba(29,184,122,0.5)}

/* ── TOPBAR ── */
.tb-left{display:flex;align-items:center;gap:12px;padding-left:0}
.tb-right{display:flex;align-items:center;gap:10px}
.page-heading{font-family:var(--font-head);font-size:17px;font-weight:600;color:var(--text);letter-spacing:-0.3px}
.tb-badge{font-size:11px;padding:2px 8px;border-radius:20px;background:var(--purple-dim);color:var(--purple-hi);font-family:var(--font-mono);letter-spacing:0.3px}
.icon-btn{width:44px;height:44px;border-radius:var(--r);border:1px solid var(--line2);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text2);transition:all 0.12s;position:relative}
.icon-btn:hover{background:var(--bg3);color:var(--text);border-color:var(--line2)}
.icon-btn .tip{display:none;position:absolute;top:calc(100% + 6px);right:0;background:var(--bg3);border:1px solid var(--line2);border-radius:var(--r);padding:4px 10px;font-size:12px;white-space:nowrap;color:var(--text);z-index:99;pointer-events:none}
.icon-btn:hover .tip{display:block}
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--r);border:1px solid var(--line2);background:transparent;color:var(--text);font-size:14px;cursor:pointer;font-family:var(--font);transition:all 0.12s}
.btn:hover{background:var(--bg3)}
.btn-accent{background:var(--green);color:#000;border-color:var(--green);font-weight:500}
.btn-accent:hover{background:#00ccad;border-color:#00ccad}
.btn-sm{padding:6px 12px;font-size:13px}

/* ── CARDS ── */
.card{background:#0e0e0e;border:1px solid rgba(255,255,255,0.06);border-radius:var(--r-lg);padding:22px}
.card-sm{background:#0e0e0e;border:1px solid rgba(255,255,255,0.06);border-radius:var(--r);padding:14px 16px}
.card-title{font-size:13px;text-transform:uppercase;letter-spacing:0.7px;color:var(--text3);margin-bottom:14px;font-family:var(--font-mono)}

/* ── METRICS ROW ── */
.metrics{display:grid;gap:14px;margin-bottom:22px}
.m4{grid-template-columns:repeat(4,minmax(0,1fr))}
.m3{grid-template-columns:repeat(3,minmax(0,1fr))}
.m2{grid-template-columns:repeat(2,minmax(0,1fr))}
.metric{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;position:relative;overflow:hidden;transition:border-color 0.15s}
.metric:hover{border-color:var(--line2)}
.metric::after{content:'';position:absolute;inset:0;border-radius:var(--r-lg);pointer-events:none}
.metric-label{font-size:13px;color:var(--text3);letter-spacing:0.5px;text-transform:uppercase;font-family:var(--font-mono);margin-bottom:8px}
.metric-value{font-size:28px;font-weight:600;font-family:var(--font-head);letter-spacing:-0.5px;line-height:1;font-variant-numeric:slashed-zero}
.metric-sub{font-size:13px;margin-top:6px;color:var(--text3)}
.metric-sub.pos{color:var(--green)}
.metric-sub.neg{color:var(--red)}
.pos{color:var(--green)}
.neg{color:var(--red)}

/* ── CHARTS ── */
.chart-wrap{position:relative;width:100%}
.h180{height:180px}
.h220{height:220px}
.h260{height:260px}
.h150{height:150px}
.h100{height:100px}

/* ── TABLES ── */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
thead tr{border-bottom:1px solid var(--line)}
th{text-align:left;padding:9px 12px;font-size:12px;letter-spacing:0.6px;text-transform:uppercase;color:var(--text3);font-weight:400;font-family:var(--font-mono);white-space:nowrap}
td{padding:11px 12px;border-bottom:1px solid var(--line);color:var(--text);vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr{cursor:pointer;transition:background 0.1s}
tbody tr:hover td{background:rgba(255,255,255,0.025)}
.mono{font-family:var(--font-mono);font-size:13px;font-weight:500;letter-spacing:0.3px;font-variant-numeric:slashed-zero}
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:12px;font-family:var(--font-mono);font-weight:500}
.badge-pos{background:var(--green-dim);color:var(--green)}
.badge-neg{background:var(--red-dim);color:var(--red)}
.badge-blue{background:var(--blue-dim);color:var(--blue)}
.badge-amber{background:var(--amber-dim);color:var(--amber)}

/* ── PERIOD PILLS ── */
.period-row{display:flex;gap:4px;margin-bottom:14px}
.ph-conclusion{margin-bottom:20px;padding:18px 20px;border:2px solid rgba(241,247,87,0.25);border-radius:12px;font-size:13px;color:rgba(255,255,255,0.85);line-height:1.7}
.am-insight-card{margin-bottom:18px;padding:14px 18px;border-radius:10px;border:1px solid rgba(255,255,255,0.1);border-left-width:4px;font-size:13px;color:rgba(255,255,255,0.88);line-height:1.65;display:none}
.am-insight-card .am-insight-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.9px;opacity:.7;margin-bottom:6px;display:flex;align-items:center;gap:6px}
.am-chart-conclusion{margin-top:12px;padding:10px 14px;border-radius:8px;border:1px solid rgba(255,255,255,0.08);font-size:12px;color:rgba(255,255,255,0.7);line-height:1.6;display:none}
.ph-how-to-read{margin-top:16px;padding:18px 20px;border:1px solid rgba(255,255,255,0.08);border-radius:12px}
.ph-htr-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.9px;color:rgba(255,255,255,0.45);margin-bottom:12px}
.ph-htr-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}
.ph-htr-grid div{font-size:12px;color:rgba(255,255,255,0.6);line-height:1.6}
.ph-htr-grid strong{color:rgba(255,255,255,0.85);font-weight:600}
.period-btn{padding:5px 12px;font-size:13px;border-radius:20px;border:1px solid var(--line);background:transparent;color:var(--text2);cursor:pointer;font-family:var(--font-mono);transition:all 0.12s}
.period-btn:hover{border-color:var(--line2);color:var(--text)}
.period-btn.active{background:var(--green-dim);border-color:var(--green);color:var(--green)}

/* ── KV GRID ── */
.kv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px}
.kv{background:var(--bg3);border-radius:var(--r);padding:12px 14px;border:1px solid var(--line)}
.kv-label{font-size:12px;color:rgba(255,255,255,0.75);letter-spacing:0.5px;text-transform:uppercase;font-family:var(--font-mono);margin-bottom:5px}
.kv-value{font-size:16px;font-weight:500;font-family:var(--font-head);font-variant-numeric:slashed-zero}

/* ── BACK ── */
.back{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:var(--text2);cursor:pointer;margin-bottom:16px;padding:6px 14px;border:1px solid var(--line2);border-radius:20px;background:var(--bg2);transition:all 0.15s;letter-spacing:.2px}
.back:hover{color:var(--text);border-color:rgba(255,255,255,0.2);background:var(--bg3)}

/* ── STEPS ── */
.step{display:flex;gap:12px;margin-bottom:16px}
.step-n{width:24px;height:24px;min-width:24px;border-radius:50%;background:var(--green-dim);border:1px solid var(--green);color:var(--green);font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono)}
.step-title{font-size:14px;font-weight:500;margin-bottom:3px}
.step-desc{font-size:14px;color:var(--text2);line-height:1.55}
.code-pill{font-family:var(--font-mono);font-size:13px;background:var(--bg3);border:1px solid var(--line2);padding:2px 7px;border-radius:4px;color:var(--text)}

/* ── DROP ZONE ── */
.drop-zone{border:1.5px dashed var(--line2);border-radius:var(--r-lg);padding:40px 24px;text-align:center;cursor:pointer;transition:all 0.15s;margin-bottom:20px}
.drop-zone:hover{border-color:var(--green);background:var(--green-dim)}
.dz-title{font-size:16px;font-weight:500;margin-bottom:6px;font-family:var(--font-head)}
.dz-sub{font-size:14px;color:var(--text2)}

/* ── BOND BAR ── */
.bond-bar-wrap{background:var(--bg4);border-radius:4px;height:3px;overflow:hidden;margin:6px 0}
.bond-bar{height:3px;border-radius:4px;background:var(--green)}

/* ── TAGS ── */
.tag{display:inline-block;padding:1px 7px;font-size:11px;border-radius:20px;margin-left:6px;font-family:var(--font-mono)}
.tag-c{background:var(--green-dim);color:var(--green)}
.tag-r{background:var(--amber-dim);color:var(--amber)}
.tag-d{background:var(--blue-dim);color:var(--blue)}

/* ── CALENDAR ── */
.cal-month-head{font-size:12px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:0.6px;padding:18px 0 8px;border-bottom:1px solid var(--line);margin-bottom:10px;font-family:var(--font-mono)}
.cal-event{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-radius:var(--r);border:1px solid var(--line);margin-bottom:6px;transition:border-color 0.12s}
.cal-event:hover{border-color:var(--line2)}
.cal-date{font-size:13px;color:var(--text3);font-family:var(--font-mono);min-width:80px}
.cal-title{font-size:14px;flex:1}
.cal-amt{font-size:14px;font-family:var(--font-mono);font-weight:500;color:var(--green)}

/* ── NEWS ── */
.news-item{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);cursor:pointer;transition:opacity 0.12s}
.news-item:last-child{border-bottom:none}
.news-item:hover{opacity:0.8}
.news-chip{width:56px;height:44px;min-width:56px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:12px;font-weight:600}
.news-tag{font-size:11px;font-weight:600;color:var(--green);margin-bottom:3px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:0.4px}
.news-title{font-size:14px;font-weight:500;line-height:1.4;margin-bottom:3px}
.news-preview{font-size:13px;color:var(--text2);line-height:1.45}

/* ── MODAL ── */
.modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:500;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.modal-bg.open{display:flex}
.modal{background:var(--bg2);border:1px solid var(--line2);border-radius:var(--r-lg);padding:28px;width:480px;max-width:95vw;max-height:90vh;overflow-y:auto}
.modal-title{font-family:var(--font-head);font-size:18px;font-weight:600;margin-bottom:22px;letter-spacing:-0.3px}
.modal-footer{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
.modal input,.modal select,.modal textarea{background:var(--bg3);border:1px solid var(--line2);border-radius:var(--r);padding:10px 14px;color:var(--text);font-size:15px;font-family:var(--font);outline:none;transition:border-color .15s;width:100%;box-sizing:border-box}
.modal input:focus,.modal select:focus,.modal textarea:focus{border-color:rgba(241,247,87,0.5)}
.modal input::placeholder,.modal textarea::placeholder{color:var(--text3)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.form-field{display:flex;flex-direction:column;gap:5px}
.form-field.full{grid-column:span 2}
.form-label{font-size:13px;color:var(--text3);letter-spacing:0.5px;text-transform:uppercase;font-family:var(--font-mono)}
.form-field input,.form-field select{background:var(--bg3);border:1px solid var(--line2);border-radius:var(--r);padding:9px 12px;color:var(--text);font-size:14px;font-family:var(--font);outline:none;transition:border-color 0.12s}
.form-field input:focus,.form-field select:focus{border-color:var(--green)}
.settings-menu-item{display:flex;align-items:center;gap:9px;width:100%;padding:9px 12px;background:transparent;border:none;border-radius:8px;color:var(--text2);font-size:14px;font-family:var(--font);cursor:pointer;text-align:left;transition:background .12s,color .12s}
.settings-menu-item:hover{background:var(--bg3);color:var(--text)}
.form-field select option{background:var(--bg3)}

/* ── FILTER BAR ── */
.filter-bar{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.chk-label{display:flex;align-items:center;gap:7px;font-size:14px;cursor:pointer;color:var(--text2)}
.chk-label input[type=checkbox]{accent-color:var(--green);width:14px;height:14px}

/* ── GRID LAYOUTS ── */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.grid-65-35{display:grid;grid-template-columns:1fr 380px;gap:14px}


/* ── COMPARE ── */
.compare-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:20px;font-size:13px;border:1px solid var(--line2);cursor:pointer;font-family:var(--font-mono)}
.compare-badge .dot{width:8px;height:8px;border-radius:50%}

/* ── REPORT ── */
.report-table td:first-child{color:var(--text2)}
.report-table td:last-child{font-family:var(--font-mono);text-align:right}

/* ── EMPTY STATE ── */
.empty{text-align:center;padding:60px 20px;color:var(--text3)}
.empty-icon{font-size:32px;margin-bottom:12px;opacity:0.4}
.empty-title{font-size:15px;color:var(--text2);margin-bottom:6px;font-family:var(--font-head)}
.empty-sub{font-size:13px;color:var(--text3)}

/* ── ANALYST BAR ── */
.analyst-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 14px;background:var(--bg3);border-radius:var(--r);border-left:3px solid var(--purple);margin-bottom:8px}
.analyst-rec{border-radius:20px;padding:3px 12px;font-size:13px;font-weight:600;border:1px solid}
/* ── TICKER PILL ── */
.ticker-pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:14px;font-weight:500}
.ticker-dot{width:7px;height:7px;border-radius:50%}

/* ── PROFILE DROPDOWN ── */
.prof-item{padding:10px 16px;font-size:14px;color:var(--text2);cursor:pointer;transition:background .1s}
.prof-item:hover{background:var(--bg3);color:var(--text)}



/* ── GLOBAL SEARCH ── */
.gsearch-item{padding:10px 14px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;border-bottom:1px solid var(--line)}
.gsearch-item:last-child{border-bottom:none}
.news-link{font-size:14px;color:var(--text);text-decoration:none;font-weight:500;display:block;margin-bottom:3px;line-height:1.4}
.news-link:hover{color:var(--purple-hi)}
.peer-tag{cursor:pointer;background:var(--bg3);border:1px solid var(--line2);border-radius:var(--r);padding:4px 10px;font-size:13px;font-family:var(--font-mono);color:var(--text2)}
.peer-tag:hover{border-color:var(--purple)}
.gsearch-item:hover{background:var(--bg3)}
.gsearch-ticker{font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--text)}
.gsearch-name{font-size:13px;color:var(--text2);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gsearch-add{font-size:11px;color:var(--purple-hi);font-family:var(--font-mono)}

/* ── MARKET SUMMARY ── */
.market-index-card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;transition:border-color .15s}
.market-index-card:hover{border-color:var(--line2)}
.mi-label{font-size:11px;color:var(--text3);letter-spacing:.5px;text-transform:uppercase;font-family:var(--font-mono);margin-bottom:6px}
.mi-value{font-size:21px;font-weight:600;font-family:var(--font-head);font-variant-numeric:slashed-zero;letter-spacing:-.3px}
.mi-change{font-size:13px;margin-top:4px}
.mi-chart{height:50px;margin-top:8px}

/* ── CALENDAR GRID ── */
.cal-quarter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cal-quarter{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px}
.cal-q-head{font-size:11px;font-weight:600;color:var(--purple-hi);text-transform:uppercase;letter-spacing:.6px;font-family:var(--font-mono);margin-bottom:10px}
.cal-month-block{margin-bottom:12px}
.cal-month-label{font-size:12px;font-weight:600;color:var(--text2);margin-bottom:6px;text-transform:uppercase;letter-spacing:.4px;font-family:var(--font-mono)}
.cal-ev-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;padding:4px 0;border-bottom:1px solid var(--line)}
.cal-ev-row:last-child{border-bottom:none}
.cal-ev-date{color:var(--text3);font-family:var(--font-mono);min-width:48px;font-size:12px}
.cal-ev-name{color:var(--text2);flex:1;padding:0 8px}
.cal-ev-amt{color:var(--green);font-family:var(--font-mono);font-size:12px}

/* ── REPORT TABS ── */
.rtab{padding:7px 16px;border-radius:20px;border:1px solid var(--line);font-size:13px;cursor:pointer;font-family:var(--font-mono);color:var(--text2);background:transparent;transition:all .12s}
.rtab:hover{border-color:var(--line2);color:var(--text)}
.rtab.active{background:var(--purple-dim);border-color:var(--purple);color:var(--purple-hi)}

/* ── STOCK DETAIL EXTENDED ── */
.detail-tab{padding:7px 14px;border-radius:20px;border:1px solid var(--line);font-size:13px;cursor:pointer;color:var(--text2);background:transparent;font-family:var(--font-mono);transition:all .12s}
.detail-tab.active{background:var(--purple-dim);border-color:var(--purple);color:var(--purple-hi)}

/* ── ALLOC TABS ── */
.alloc-tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.alloc-tab{padding:5px 12px;border-radius:20px;border:1px solid var(--line);font-size:12px;cursor:pointer;color:var(--text2);background:transparent;font-family:var(--font-mono);transition:all .12s}
.alloc-tab.active{background:var(--purple-dim);border-color:var(--purple);color:var(--purple-hi)}

/* ── WATCHLIST TABLE ── */
.wl-table{overflow-x:auto}
.wl-table table{width:100%;border-collapse:collapse}
.wl-table th,.wl-table td{white-space:nowrap}

/* ── WATCHLIST TABS ── */
.wl-tab-wrap{position:relative;display:inline-flex;align-items:center}
.wl-dropdown{display:none;position:absolute;top:calc(100% + 8px);left:0;background:var(--bg2);border:1px solid var(--line2);border-radius:14px;padding:6px;z-index:600;min-width:190px;box-shadow:0 12px 32px rgba(0,0,0,0.7)}
.wl-dropdown-item{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;cursor:pointer;border-radius:9px;color:var(--text2);transition:background .1s;white-space:nowrap}
.wl-dropdown-item:hover{background:var(--bg3);color:var(--text)}
.wl-dropdown-item.danger{color:var(--red)}
.wl-dropdown-item.danger:hover{background:var(--red-dim)}
.wl-dropdown-sep{height:1px;background:var(--line);margin:4px 8px}

/* ── MARKET TICKER ── */
@keyframes mktScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes spin{to{transform:rotate(360deg)}}
.mkt-paused{animation-play-state:paused!important}

*,*::before,*::after{font-family:'Montserrat',sans-serif!important}
body{background:#0a0a0a!important}
.shell{background:#0a0a0a!important}

.topbar{background:rgba(10,10,10,0.75)!important;backdrop-filter:blur(16px)!important;border-bottom:1px solid rgba(255,255,255,0.04)!important}
.card{border-radius:20px!important;border:none!important;background:#111111!important}
.metric{border-radius:20px!important;border:none!important;background:#111111!important;padding:24px 26px!important}
.metric-value{font-size:28px!important;font-weight:300!important;letter-spacing:-0.5px!important}
#m-unreal{font-size:38px!important}
#dash-pnl,#m-passive,#m-realised-pnl{font-size:34px!important}
.btn-accent{background:#F1F757!important;color:#141414!important;border-color:#F1F757!important;font-weight:600!important}
.period-btn.active{background:rgba(241,247,87,0.08)!important;border-color:#F1F757!important;color:#F1F757!important;font-weight:600!important}
.asset-menu-item{padding:9px 14px;font-size:13px;color:var(--text2);cursor:pointer;transition:background .1s}.asset-menu-item:hover{background:var(--bg3);color:var(--text)}

.acc-tab{padding:12px 20px;background:none;border:none;border-bottom:2px solid transparent;color:var(--text3);font-size:13px;cursor:pointer;font-weight:500;white-space:nowrap;transition:all .15s}
.acc-tab:hover{color:var(--text2)}
.acc-tab.active{color:#F1F757;border-bottom-color:#F1F757}
.acc-toggle-row{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:var(--bg3);border-radius:10px;cursor:pointer;gap:12px}
.acc-toggle{width:40px;height:22px;appearance:none;-webkit-appearance:none;background:rgba(255,255,255,0.12);border-radius:11px;position:relative;cursor:pointer;transition:background .2s;flex-shrink:0;border:none;outline:none}
.acc-toggle:checked{background:#1EB88A}
.acc-toggle::after{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:3px;left:3px;transition:left .2s;pointer-events:none}
.acc-toggle:checked::after{left:21px}

.wf-gate{position:absolute;inset:0;z-index:80;display:flex;align-items:flex-start;justify-content:center;border-radius:inherit;pointer-events:all;padding-top:24px}
.wf-gate-blur{position:absolute;inset:0;background:rgba(8,10,18,0.3);border-radius:inherit}
.wf-gate-card{position:relative;z-index:2;text-align:center;padding:20px 24px;width:100%;max-width:360px;background:rgba(14,17,26,0.97);border:1px solid rgba(255,255,255,0.1);border-radius:14px;box-shadow:0 8px 32px rgba(0,0,0,0.6)}
.wf-gate-icon{margin-bottom:10px}
.wf-gate-title{font-size:15px;font-weight:700;margin-bottom:6px;color:#fff}
.wf-gate-desc{font-size:13px;color:rgba(255,255,255,0.5);margin-bottom:16px;line-height:1.6}
.wf-gate-btn{padding:10px 24px;border:none;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;transition:opacity .15s}
.wf-gate-btn:hover{opacity:0.85}
.wf-gate-blurred-child{filter:blur(3px) brightness(0.65);pointer-events:none;user-select:none;transition:filter .2s}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px;flex-wrap:wrap}

/* ══════════════════════════════════════════════════════════════
   MOBILE (≤768px) — everything in this block is purely additive
   and only applies below the breakpoint. Nothing above is edited,
   so desktop rendering is untouched. This file (/css/app.css) is
   loaded by every EN and UK app page via the same absolute path,
   so this one block fixes the whole app at once.

   Besides the app shell and the shared layout classes (.metrics,
   .grid-2/3/65-35, .kv-grid, .form-row), many pages lay out cards
   with hand-rolled inline `style="display:grid;..."` markup rather
   than a shared class. As a safety net, any element whose inline
   style contains `display:grid` is also collapsed to one column
   here, and any child with an inline `grid-column`/`grid-row`
   placement is reset to `auto` so it doesn't try to render in a
   column/row that no longer exists once the parent is 1 column.
   ══════════════════════════════════════════════════════════════ */
@media (max-width:768px){

  /* ── SIDEBAR → BOTTOM NAV BAR ──
     Taken out of the flex row entirely (position:fixed) and pinned
     across the bottom of the screen instead of down the side, so
     .body/.main reclaim the full viewport width. If there are more
     nav items than fit on screen, the bar scrolls horizontally
     rather than squishing/clipping items. */
  .sidebar-wrap{
    position:fixed;left:0;right:0;bottom:0;top:auto;
    width:100%;height:60px;
    transform:none;
  }
  .sidebar{
    position:static;transform:none;left:0;width:100%;height:100%;
    border-radius:16px 16px 0 0;
    display:flex;flex-direction:row;align-items:stretch;
    padding:0;overflow-x:auto;overflow-y:hidden;
  }
  .sidebar-wrap:hover .sidebar{width:100%;box-shadow:none}
  .nav{flex-direction:row;align-items:stretch;padding:0;width:100%}
  .nav-item{
    flex-direction:column;justify-content:center;align-items:center;
    height:100%;min-width:56px;flex:1 0 auto;
    padding:6px 4px!important;margin:0;gap:2px;
  }
  .sidebar-wrap:hover .nav-item{padding:6px 4px!important}
  .nav-icon{width:26px;min-width:26px;height:26px;border-radius:8px}
  .nav-icon svg{width:14px;height:14px}
  .nav-label{
    display:block!important;opacity:1!important;max-width:none!important;
    margin:0;font-size:9.5px;white-space:nowrap;overflow:visible;
  }
  .nav-chev{display:none!important}

  /* Reclaim the space the sidebar used to take, and leave room at
     the bottom so content doesn't render underneath the fixed bar. */
  .body{padding-bottom:60px}

  /* ── TOPBAR ── */
  .topbar{height:auto;min-height:56px;flex-wrap:wrap;padding:8px 10px;gap:8px}
  .tb-left svg{width:100px!important;height:auto!important}
  .tb-right{gap:6px;flex-wrap:wrap}
  #gsearch{width:100px!important}
  #gsearch:focus{width:150px!important}
  .icon-btn{width:38px;height:38px}
  #locale-btn{min-width:38px;padding:0 8px;font-size:11px}
  #notif-drop{width:280px;max-width:88vw}
  #profile-drop{min-width:180px}

  /* ── MAIN CONTENT AREA ── */
  .main{padding:18px 14px 32px}

  /* ── CONTENT / FORM GRID SYSTEMS (shared classes) ──
     These stack full-width on mobile — form fields, key/value pairs,
     calendar quarters etc. read fine as one column. */
  .grid-2,.grid-3,.grid-65-35,
  .kv-grid,.form-row,.ph-htr-grid,.cal-quarter-grid{
    grid-template-columns:1fr!important;
  }

  /* ── METRIC CARD GRIDS ──
     Stat cards (Market Value, P&L, etc.) are short and wide, not
     tall — stacking 4-6 of them in one column just means endless
     scrolling for little payoff. These get 2 columns instead.
     Scoped narrowly (exact 3-equal-column pattern + a .metric direct
     child) so it only catches the actual metric rows on the Dashboard
     and Stocks page, not unrelated 3-column layouts elsewhere (pricing
     cards, import-method pickers) that happen to also use 3 equal
     columns but aren't short stat cards. */
  .m4,.m3,.m2,
  [style*="grid-template-columns:1fr 1fr 1fr"]:has(> .metric){
    grid-template-columns:repeat(2,1fr)!important;
  }
  .metric{padding:14px 16px}
  .metric-value{font-size:20px!important}
  #m-total{font-size:32px!important}
  #m-unreal{font-size:26px!important}
  #dash-pnl,#m-passive,#m-realised-pnl{font-size:22px!important}
  /* Stocks page top metric row uses raw inline font-sizes (not the
     .metric-value class) sized for a full-width column — shrink them
     so the numbers don't overflow now that cards are half-width. */
  #s-mv{font-size:24px!important}
  #s-unreal-pnl,#s-day-pnl{font-size:19px!important}
  #s-real-pnl,#s-buying-power,#s-cnt{font-size:19px!important}

  /* ── OTHER HAND-ROLLED INLINE GRIDS (safety net, see comment above) ──
     Anything not caught by the metric-card rule above (which wins
     on specificity when it matches) falls back to a single column. */
  [style*="display:grid"]{grid-template-columns:1fr!important}
  [style*="grid-column"]{grid-column:auto!important}
  [style*="grid-row"]{grid-row:auto!important}

  /* ── CARDS / MODALS ── */
  .card{padding:16px}
  .card-sm{padding:12px 14px}
  .modal{padding:20px 18px}

  /* ── TABLES ── */
  table{font-size:12.5px}
  th,td{padding:8px 8px}

  /* ── MISC ── */
  .filter-bar{flex-wrap:wrap;gap:10px}
  .period-row{flex-wrap:wrap}
}