/* =====================================================
/* =====================================================
   LIGHT / DARK MODE
   ===================================================== */
body.light{
  --bg:#f0f2f5;
  --s1:#ffffff;
  --s2:#f5f6f8;
  --s3:#e8eaed;
  --border:#dde0e6;
  --border2:#c8cdd6;
  --blue:#2962ff;
  --blue-h:#1e53e5;
  --blue-bg:rgba(41,98,255,0.08);
  --green:#0d9e8f;
  --green2:#0a7d71;
  --green-bg:rgba(13,158,143,0.09);
  --red:#e53935;
  --red2:#c62828;
  --red-bg:rgba(229,57,53,0.09);
  --amber:#e65100;
  --amber-bg:rgba(230,81,0,0.09);
  --purple:#5e35b1;
  --purple-bg:rgba(94,53,177,0.09);
  --text:#1a1d23;
  --text2:#4a5060;
  --text3:#8c92a0;
  --text4:#c0c5d0;
  background:#f0f2f5;
}

/* Light mode adjustments */
body.light .me-logo-name{ color:#1a1d23; }
body.light .me-logo-name span{ color:#2962ff; }
body.light .tv-pill.inst{ color:#1a1d23; }
body.light input[type=range]::-webkit-slider-thumb{ border-color:var(--bg); }
body.light .log-inp.pos{ color:var(--green); }
body.light .log-inp.neg{ color:var(--red); }
body.light .drop-zone{ background:var(--s2); }

/* ── Theme toggle button ── */
.theme-toggle{background:var(--s2);border:none;border-radius:6px;cursor:pointer;width:30px;height:30px;display:flex;align-items:center;justify-content:center;color:var(--text2);transition:color 0.15s,background 0.15s;flex-shrink:0;}
.theme-toggle:hover{color:var(--blue);background:var(--s3);}
.theme-toggle-icon{font-size:14px;}

html{background:var(--bg);}
body{font-family:var(--sans);background:var(--bg);color:var(--text);min-height:100vh;font-size:13px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;}

/* ══════════════════════════════
   TOPBAR + LOGO
══════════════════════════════ */
.topbar{
  height:50px;
  background:var(--s1);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;
  padding:0 14px;gap:10px;
  width:100%;overflow:hidden;
}

/* MicroEdge wordmark logo */
.me-logo{display:flex;align-items:center;text-decoration:none;}
.me-logo-text{display:flex;flex-direction:column;line-height:1;}
.me-logo-name{
  font-size:16px;font-weight:800;
  letter-spacing:0.08em;
  color:#ffffff;
  font-family:'Montserrat',sans-serif;
}
.me-logo-name span{color:#2962ff;}
.me-logo-sub{
  font-size:8px;font-weight:500;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--text3);
  margin-top:3px;
}

.topbar-right{margin-left:auto;display:flex;align-items:center;gap:6px;}
.tv-pill{font-size:11px;font-weight:500;padding:3px 9px;border-radius:3px;background:var(--s2);border:1px solid var(--border2);color:var(--text2);}
.tv-pill.live{color:var(--green);border-color:rgba(38,166,154,0.35);background:var(--green-bg);}
.tv-pill.inst{color:var(--text);font-weight:600;}

/* ══════════════════════════════
   LAST SESSION BAR
══════════════════════════════ */
.session-bar{background:var(--s1);border-bottom:1px solid var(--border);padding:8px 14px;}
.session-label{font-size:10px;font-weight:600;color:var(--text3);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:6px;}
.yesterday{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;}
.yday-card{background:var(--s2);border:1px solid var(--border);border-radius:4px;padding:5px 8px;}
.yday-label{font-size:10px;color:var(--text3);margin-bottom:2px;}
.yday-val{font-size:13px;font-weight:600;line-height:1.2;}
.yday-val.pos{color:var(--green);}
.yday-val.neg{color:var(--red);}
.yday-val.neu{color:var(--text2);}
.no-session{font-size:11px;color:var(--text3);padding:2px 0;}

/* ══════════════════════════════
   INSTRUMENT TOOLBAR
══════════════════════════════ */
.inst-toolbar{background:var(--s1);border-bottom:1px solid var(--border);padding:6px 10px;display:flex;align-items:center;gap:3px;overflow:hidden;width:100%;box-sizing:border-box;}
.inst-btn{height:28px;padding:0 9px;font-family:var(--sans);font-size:12px;font-weight:600;border-radius:3px;border:1px solid transparent;background:transparent;color:var(--text2);cursor:pointer;transition:all 0.1s;letter-spacing:0.01em;flex-shrink:0;}
.inst-btn:hover{background:var(--s2);color:var(--text);}
.inst-btn.active{background:var(--blue-bg);border-color:var(--blue);color:var(--blue);}
.inst-sep{width:1px;height:16px;background:var(--border2);margin:0 3px;flex-shrink:0;}
.inst-more-select{height:28px;padding:0 4px;background:transparent;border:1px solid transparent;border-radius:3px;color:var(--text2);font-family:var(--sans);font-size:9px;font-weight:600;cursor:pointer;outline:none;transition:all 0.1s;min-width:0;flex-shrink:1;max-width:120px;}
.inst-more-select:hover{background:var(--s2);color:var(--text);}
.inst-more-select.active{background:var(--blue-bg);border-color:var(--blue);color:var(--blue);}

/* ══════════════════════════════
   NAV TABS
══════════════════════════════ */
nav{background:var(--s1);border-bottom:1px solid var(--border);display:flex;overflow-x:auto;scrollbar-width:none;position:sticky;top:0;z-index:100;width:100%;box-sizing:border-box;}
nav::-webkit-scrollbar{display:none;}
.nav-btn{height:38px;padding:0 14px;font-family:var(--sans);font-size:12px;font-weight:500;color:var(--text3);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:color 0.1s;white-space:nowrap;}
.nav-btn:hover{color:var(--text2);}
.nav-btn.active{color:var(--text);border-bottom-color:var(--blue);}

/* ══════════════════════════════
   PAGES
══════════════════════════════ */
.page{display:none;}
.page.active{display:block;animation:fade 0.15s ease;}
@keyframes fade{from{opacity:0;}to{opacity:1;}}

/* ══════════════════════════════
   SECTIONS
══════════════════════════════ */
section{margin:8px;background:var(--s1);border:1px solid var(--border);border-radius:4px;overflow:hidden;box-sizing:border-box;}
.sec-head{height:34px;padding:0 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:7px;font-size:11px;font-weight:600;color:var(--text2);letter-spacing:0.05em;text-transform:uppercase;}
.sec-dot{width:4px;height:4px;border-radius:50%;flex-shrink:0;}
.sd-blue{background:var(--blue);}
.sd-green{background:var(--green);}
.sd-amber{background:var(--amber);}
.sd-purple{background:var(--purple);}

/* ══════════════════════════════
   CONTROLS
══════════════════════════════ */
.controls{padding:10px 12px;display:flex;flex-direction:column;gap:9px;}
.ctrl{display:flex;align-items:center;gap:8px;}
.ctrl label{font-size:12px;color:var(--text2);min-width:122px;flex-shrink:0;}
.ctrl input[type=range]{
  flex:1;-webkit-appearance:none;appearance:none;
  height:2px;background:var(--s3);border-radius:1px;outline:none;border:none;cursor:pointer;
}
.ctrl input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:14px;height:14px;border-radius:50%;
  background:var(--blue);cursor:pointer;border:2px solid var(--bg);
  box-shadow:0 0 0 1px var(--blue);
}
.ctrl-val{font-size:12px;font-weight:600;color:var(--text);min-width:56px;text-align:right;}

.ctrl input[type=number]{
  flex:1;height:30px;background:var(--s2);border:1px solid var(--border2);
  border-radius:3px;color:var(--text);font-family:var(--sans);font-size:13px;
  font-weight:500;padding:0 10px;outline:none;-moz-appearance:textfield;
  transition:border-color 0.1s;
}
.ctrl input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;}
.ctrl input[type=number]:focus{border-color:var(--blue);}

/* spec strip */
.spec-strip{display:flex;border-top:1px solid var(--border);}
.spec-item{flex:1;padding:6px 8px;border-right:1px solid var(--border);text-align:center;}
.spec-item:last-child{border-right:none;}
.spec-lbl{font-size:9px;font-weight:600;color:var(--text3);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:2px;}
.spec-val{font-size:12px;font-weight:600;color:var(--text);}

/* ══════════════════════════════
   METRICS
══════════════════════════════ */
.metrics{padding:8px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;}
.metric{background:var(--s2);border:1px solid var(--border);border-radius:4px;padding:9px 11px;box-shadow:0 2px 10px rgba(0,0,0,0.4),0 0 0 1px rgba(41,98,255,0.08);}
body.light .metric{box-shadow:none;}
.metric.full{grid-column:1/-1;}
.metric-lbl{font-size:10px;font-weight:500;color:var(--text3);letter-spacing:0.05em;text-transform:uppercase;margin-bottom:5px;}
.metric-val{font-size:19px;font-weight:600;color:var(--text);line-height:1.15;letter-spacing:-0.02em;}
.metric-val.green{color:var(--green);}
.metric-val.red{color:var(--red);}
.metric-val.amber{color:var(--amber);}
.metric-val.purple{color:var(--purple);}
.metric-sub{font-size:10px;color:var(--text3);margin-top:3px;line-height:1.4;}
.badge{display:inline-block;font-size:10px;font-weight:500;padding:2px 7px;border-radius:2px;margin-top:5px;}
.bg{background:var(--green-bg);color:var(--green2);}
.ba{background:var(--amber-bg);color:var(--amber);}
.br{background:var(--red-bg);color:var(--red2);}
.bp{background:var(--purple-bg);color:var(--purple);}
/* GOAL PROGRESS BAR */
.goal-bar-wrap{background:var(--s1);border-bottom:1px solid var(--border);padding:8px 14px;}
.goal-bar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px;}
.goal-bar-label{font-size:10px;font-weight:600;color:var(--text3);letter-spacing:0.08em;text-transform:uppercase;}
.goal-bar-pct{font-size:12px;font-weight:700;color:var(--blue);}
.goal-bar-track{height:4px;background:var(--s3);border-radius:2px;overflow:hidden;}
.goal-bar-fill{height:100%;border-radius:2px;background:var(--blue);transition:width 0.5s ease;}
.goal-bar-fill.done{background:var(--green);}
.goal-bar-sub{display:flex;justify-content:space-between;margin-top:4px;font-size:10px;color:var(--text3);}
/* STREAK CARDS */
.streak-grid{padding:8px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;}
.streak-card{background:var(--s2);border:1px solid var(--border);border-radius:4px;padding:9px 6px;text-align:center;overflow:hidden;}
.streak-val{font-size:16px;font-weight:700;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;}
.streak-val.green{color:var(--green);}
.streak-val.red{color:var(--red);}
.streak-val.amber{color:var(--amber);}
.streak-val.blue{color:var(--blue);}
.streak-lbl{font-size:10px;color:var(--text3);margin-top:4px;font-weight:500;}
/* CALENDAR */
.cal-wrap{padding:8px 10px 10px;}
.cal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.cal-nav{background:none;border:1px solid var(--border2);border-radius:3px;color:var(--text2);cursor:pointer;width:26px;height:26px;font-size:14px;display:flex;align-items:center;justify-content:center;}
.cal-nav:hover{border-color:var(--blue);color:var(--blue);}
.cal-month{font-size:12px;font-weight:600;color:var(--text);}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;}
.cal-day-hdr{font-size:9px;font-weight:600;color:var(--text3);text-align:center;padding:3px 0;letter-spacing:0.05em;}
.cal-day{aspect-ratio:1;border-radius:3px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px;font-weight:500;border:1px solid transparent;}
.cal-day.empty{background:transparent;border:none;}
.cal-day.no-trade{color:var(--text3);background:var(--s2);border-color:var(--border);}
.cal-day.win{background:rgba(38,166,154,0.2);color:var(--green);border-color:rgba(38,166,154,0.3);}
.cal-day.loss{background:rgba(239,83,80,0.18);color:var(--red);border-color:rgba(239,83,80,0.3);}
.cal-day.today{border-color:var(--blue)!important;}
.cal-day-pnl{font-size:8px;font-weight:600;line-height:1;margin-top:1px;}
.cal-day-acct{font-size:7px;color:inherit;opacity:0.65;line-height:1;margin-top:1px;}
.cal-day-acct{font-size:7px;color:inherit;opacity:0.65;line-height:1;margin-top:1px;}
.cal-legend{display:flex;gap:12px;margin-top:6px;padding:0 2px;}
.cal-leg-item{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--text3);}
.cal-leg-dot{width:8px;height:8px;border-radius:2px;flex-shrink:0;}
/* EXPORT BTN */
.export-btn{display:block;margin:6px 8px 2px auto;width:auto;padding:0 14px;height:28px;font-family:var(--sans);font-size:11px;font-weight:500;background:var(--s2);border:1px solid var(--border2);border-radius:3px;color:var(--text2);cursor:pointer;transition:all 0.1s;}
.export-btn:hover{border-color:var(--green);color:var(--green);}


/* ══════════════════════════════
   CHARTS
══════════════════════════════ */
.chart-wrap{padding:8px 10px 10px;}
.chart-box{position:relative;width:100%;}
.chart-legend{display:flex;gap:14px;padding:0 10px 8px;flex-wrap:wrap;}
.leg-item{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text2);}
.leg-line{width:14px;height:2px;border-radius:1px;flex-shrink:0;}

/* ══════════════════════════════
   SCENARIOS
══════════════════════════════ */
.scen-list{padding:8px;display:flex;flex-direction:column;gap:4px;}
.scen-row{display:flex;align-items:center;gap:8px;height:32px;padding:0 10px;background:var(--s2);border:1px solid var(--border);border-radius:3px;}
.scen-row.hi{border-color:var(--blue);background:var(--blue-bg);}
.scen-lbl{font-size:11px;font-weight:500;color:var(--text2);min-width:90px;}
.scen-bar-bg{flex:1;background:var(--s3);border-radius:1px;height:2px;overflow:hidden;}
.scen-bar{height:100%;border-radius:1px;transition:width 0.3s;}
.scen-val{font-size:11px;font-weight:600;color:var(--text);min-width:76px;text-align:right;}

/* info rows */
.info-row{padding:7px 12px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;font-size:11px;}
.info-row span:first-child{color:var(--text3);}
.info-row span:last-child{color:var(--text2);font-weight:500;}

/* ══════════════════════════════
   DAILY LOG
══════════════════════════════ */
.log-form{padding:10px 12px;display:flex;flex-direction:column;gap:7px;}
.log-row{display:flex;align-items:center;gap:8px;}
.log-row label{font-size:12px;color:var(--text2);min-width:122px;flex-shrink:0;}
.log-inp{flex:1;height:30px;background:var(--s2);border:1px solid var(--border2);border-radius:3px;color:var(--text);font-family:var(--sans);font-size:12px;padding:0 9px;outline:none;transition:border-color 0.1s;}
.log-inp:focus{border-color:var(--blue);}
.log-inp.pos{color:var(--green);}
.log-inp.neg{color:var(--red);}
.time-pair{display:flex;gap:6px;flex:1;}
.time-inp{flex:1;height:30px;background:var(--s2);border:1px solid var(--border2);border-radius:3px;color:var(--text);font-family:var(--sans);font-size:12px;text-align:center;outline:none;-moz-appearance:textfield;transition:border-color 0.1s;}
.time-inp::-webkit-inner-spin-button{-webkit-appearance:none;}
.time-inp:focus{border-color:var(--blue);}
.time-hint{font-size:10px;color:var(--text3);text-align:center;margin-top:2px;}

/* asset type selector (futures/options/equities) on log form */
.asset-type-btn{flex:1;height:30px;background:var(--s2);border:1px solid var(--border2);border-radius:3px;color:var(--text2);font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:0.02em;cursor:pointer;transition:all 0.1s;padding:0;}
.asset-type-btn:hover{border-color:var(--border2);color:var(--text);background:var(--s3);}
.asset-type-btn.active{background:var(--blue-bg);border-color:var(--blue);color:var(--blue);}

/* share toggle */
.share-bar{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-top:1px solid var(--border);background:rgba(41,98,255,0.04);}
.share-txt .t1{font-size:11px;color:var(--text2);font-weight:500;}
.share-txt .t2{font-size:10px;color:var(--text3);margin-top:1px;}
.toggle-wrap{position:relative;width:38px;height:21px;flex-shrink:0;}
.toggle-wrap input{opacity:0;width:0;height:0;}
.tog-slider{position:absolute;inset:0;background:var(--s3);border-radius:11px;cursor:pointer;transition:background 0.2s;}
.tog-slider::before{content:'';position:absolute;width:15px;height:15px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:transform 0.2s;}
.toggle-wrap input:checked + .tog-slider{background:var(--blue);}
.toggle-wrap input:checked + .tog-slider::before{transform:translateX(17px);}

.log-btn{display:block;width:calc(100% - 24px);height:34px;margin:8px 12px 12px;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:0.02em;background:var(--blue);border:none;border-radius:3px;color:#fff;cursor:pointer;transition:background 0.1s;}
.log-btn:hover{background:var(--blue-h);}
.log-btn:active{transform:scale(0.99);}

/* log history */
.log-hist{padding:0 8px 8px;}

/* ── Skeleton shimmer ── */
@keyframes sk-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.sk-block{border-radius:4px;background:linear-gradient(90deg,var(--s2) 25%,var(--s3) 50%,var(--s2) 75%);background-size:200% 100%;animation:sk-shimmer 1.4s ease-in-out infinite;}
.sk-line{height:11px;border-radius:3px;background:linear-gradient(90deg,var(--s2) 25%,var(--s3) 50%,var(--s2) 75%);background-size:200% 100%;animation:sk-shimmer 1.4s ease-in-out infinite;}
.sk-line.w100{width:100%;}.sk-line.w80{width:80%;}.sk-line.w60{width:60%;}.sk-line.w40{width:40%;}
.sk-wrap{padding:8px;display:flex;flex-direction:column;gap:8px;}
.sk-card{background:var(--s2);border:1px solid var(--border);border-radius:4px;padding:14px;margin-bottom:8px;}
.sk-stat-val{color:transparent!important;background:linear-gradient(90deg,var(--s2) 25%,var(--s3) 50%,var(--s2) 75%);background-size:200% 100%;animation:sk-shimmer 1.4s ease-in-out infinite;border-radius:3px;min-width:32px;display:inline-block;}
.log-entry{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:3px;padding:7px 10px;background:var(--s2);border:1px solid var(--border);border-radius:3px;margin-bottom:4px;align-items:center;}
.log-entry:first-child{border-left:2px solid var(--blue);}
.le-date{font-size:11px;color:var(--text3);}
.le-inst{font-size:11px;font-weight:600;color:var(--text2);}
.le-time{font-size:11px;color:var(--text2);}
.le-pnl{font-size:12px;font-weight:600;text-align:right;}
.le-pnl.pos{color:var(--green);}
.le-pnl.neg{color:var(--red);}
.le-note{grid-column:1/-1;font-size:10px;color:var(--text3);padding-top:2px;font-style:italic;}
.le-del{grid-column:1/-1;border:none;background:none;font-size:10px;color:var(--text3);cursor:pointer;text-align:right;font-family:var(--sans);padding-top:2px;}
.le-del:hover{color:var(--red);}

.log-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:8px;border-top:1px solid var(--border);}
.sum-card{background:var(--s2);border:1px solid var(--border);border-radius:3px;padding:7px 9px;}
.sum-lbl{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:0.05em;color:var(--text3);margin-bottom:3px;}
.sum-val{font-size:13px;font-weight:600;}
.sum-val.pos{color:var(--green);}
.sum-val.neg{color:var(--red);}
.sum-val.neu{color:var(--text);}
.empty-log{text-align:center;padding:22px;font-size:12px;color:var(--text3);}


/* ══════════════════════════════
   SETTINGS GEAR BUTTON
══════════════════════════════ */
.settings-btn{background:var(--s2);border:none;border-radius:6px;cursor:pointer;width:30px;height:30px;display:flex;align-items:center;justify-content:center;color:var(--text2);transition:color 0.15s,background 0.15s;flex-shrink:0;}
.settings-btn:hover{color:var(--blue);background:var(--s3);}
.settings-btn svg{width:15px;height:15px;flex-shrink:0;}

/* ── Market Brief ── */
.mb-trigger{background:none;border:none;cursor:pointer;font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:0.1em;padding:3px 8px;border-radius:3px;display:flex;align-items:center;gap:4px;flex-shrink:0;}
@keyframes mb-blink{0%,100%{color:var(--blue);}50%{color:var(--text3);}}
.mb-trigger.idle{animation:mb-blink 2.8s ease-in-out infinite;}
.mb-trigger.loading{color:var(--text3);animation:none;}
.mb-trigger.live{color:var(--blue);animation:none;}
.mb-trigger .mb-dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0;}
#mb-panel{position:fixed;bottom:0;left:0;right:0;background:var(--s1);border-top:1px solid var(--border2);z-index:5000;transform:translateY(100%);transition:transform 0.3s cubic-bezier(.23,1,.32,1);max-height:88vh;overflow-y:auto;}
#mb-panel.open{transform:translateY(0);}
#mb-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:4999;display:none;}
#mb-overlay.open{display:block;}
.mb-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 10px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--s1);z-index:1;}
.mb-title{font-size:10px;font-weight:700;letter-spacing:0.1em;color:var(--text2);text-transform:uppercase;}
.mb-ts{font-size:9px;color:var(--text3);}
.mb-close{background:none;border:none;color:var(--text3);font-size:16px;cursor:pointer;padding:0;font-family:var(--sans);line-height:1;}
.mb-refresh{background:none;border:1px solid var(--border2);border-radius:3px;color:var(--text3);font-size:10px;font-weight:500;padding:2px 8px;cursor:pointer;font-family:var(--sans);}
.mb-refresh:hover{border-color:var(--blue);color:var(--blue);}
.mb-session-bar{display:flex;align-items:center;justify-content:space-between;padding:5px 14px;background:var(--bg);border-bottom:1px solid var(--border);}
.mb-session-live{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:600;}
.mb-session-live.open-sess{color:var(--green);}
.mb-session-live.pre-sess{color:var(--amber);}
.mb-session-live.closed-sess{color:var(--text3);}
.mb-live-dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0;}
.mb-live-dot.pulse{animation:mb-blink 1.8s ease-in-out infinite;}
.mb-session-timer{font-size:9px;color:var(--text3);}
.mb-session-timer span{color:var(--text2);font-weight:600;}
.mb-body{padding:12px 14px 20px;}
.mb-indices{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-bottom:14px;}
.mb-idx{background:var(--s1);border:1px solid var(--border);border-radius:4px;padding:7px 10px;text-align:center;}
.mb-idx-label{font-size:8px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--text3);margin-bottom:3px;}
.mb-idx-value{font-size:13px;font-weight:700;letter-spacing:-0.02em;color:var(--text);line-height:1;}
.mb-idx-change{font-size:9px;font-weight:600;margin-top:2px;}
.mb-idx-change.up{color:var(--green);}
.mb-idx-change.down{color:var(--red);}
.mb-idx-change.flat{color:var(--text3);}
.mb-gauges{display:flex;gap:5px;margin-bottom:14px;}
.mb-gauge-card{flex:1;background:var(--s2);border-radius:4px;padding:6px 4px 5px;display:flex;flex-direction:column;align-items:center;gap:1px;}
.mb-gauge-lbl{font-size:8px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:0.05em;}
.mb-gauge-sub{font-size:8px;color:var(--text3);text-align:center;line-height:1.2;}
.mb-gauge-hist{font-size:7px;color:var(--text3);opacity:0.45;text-align:center;line-height:1.2;font-style:italic;}
.mb-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:14px;}
@media(max-width:500px){.mb-metrics{grid-template-columns:repeat(2,1fr);}}
.mb-metric{background:var(--s2);border-radius:4px;padding:8px 10px;}
.mb-metric-lbl{font-size:9px;font-weight:500;color:var(--text3);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:3px;}
.mb-metric-val{font-size:15px;font-weight:700;color:var(--text);letter-spacing:-0.02em;line-height:1.1;}
.mb-metric-val.pos{color:var(--green);}
.mb-metric-val.neg{color:var(--red);}
.mb-metric-val.warn{color:var(--amber);}
.mb-metric-note{font-size:9px;color:var(--text3);margin-top:2px;}
.mb-metric-note.pos{color:var(--green);}
.mb-metric-note.neg{color:var(--red);}
.mb-sec-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;margin-bottom:7px;}
.mb-section-lbl{font-size:9px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--text3);margin:0;}
.mb-sec-toggle{font-size:10px;color:var(--text3);transition:transform 0.2s;display:inline-block;}
.mb-sec-toggle.open{transform:rotate(180deg);}
.mb-sec-body{overflow:hidden;transition:max-height 0.25s ease;}
.mb-sec-body.collapsed{max-height:0!important;}
.mb-items{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;}
.mb-item{display:flex;align-items:flex-start;gap:8px;}
.mb-item-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:4px;}
.mb-item-dot.bull{background:#1d9e75;}
.mb-item-dot.bear{background:#e24b4a;}
.mb-tag{font-size:9px;font-weight:600;padding:1px 6px;border-radius:2px;flex-shrink:0;margin-top:2px;}
.mb-tag.macro{background:rgba(41,98,255,0.15);color:#7b9fff;}
.mb-tag.earnings{background:rgba(38,166,154,0.15);color:var(--green);}
.mb-tag.risk{background:rgba(239,83,80,0.15);color:var(--red);}
.mb-tag.geopolitical{background:rgba(255,152,0,0.15);color:var(--amber);}
.mb-item-right{flex:1;}
.mb-item-text{font-size:11px;color:var(--text2);line-height:1.55;}
.mb-item-age{font-size:9px;color:var(--text3);opacity:0.6;margin-top:2px;}
.mb-take{background:rgba(41,98,255,0.08);border-left:3px solid var(--blue);border-radius:0 3px 3px 0;padding:10px 12px;}
.mb-take-header{display:flex;align-items:center;gap:8px;margin-bottom:5px;}
.mb-take-lbl{font-size:9px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--blue);}
.mb-bias{display:flex;align-items:center;gap:3px;font-size:9px;font-weight:700;padding:2px 7px;border-radius:2px;letter-spacing:0.05em;}
.mb-bias.bull{background:rgba(38,166,154,0.15);color:var(--green);}
.mb-bias.bear{background:rgba(239,83,80,0.15);color:var(--red);}
.mb-bias.neut{background:rgba(255,152,0,0.12);color:var(--amber);}
.mb-take-text{font-size:11px;color:var(--text);line-height:1.65;}
.mb-take-history{margin-top:8px;display:flex;flex-direction:column;gap:4px;}
.mb-take-hist-item{background:rgba(255,255,255,0.03);border-left:2px solid var(--border2);border-radius:0 3px 3px 0;padding:7px 10px;}
.mb-take-hist-time{font-size:8px;font-weight:600;letter-spacing:0.08em;color:var(--text3);text-transform:uppercase;margin-bottom:3px;display:flex;align-items:center;gap:6px;}
.mb-take-hist-bias{font-size:8px;font-weight:600;padding:1px 5px;border-radius:2px;}
.mb-take-hist-bias.bull{background:rgba(38,166,154,0.12);color:var(--green);}
.mb-take-hist-bias.bear{background:rgba(239,83,80,0.1);color:var(--red);}
.mb-take-hist-bias.neut{background:rgba(255,152,0,0.1);color:var(--amber);}
.mb-take-hist-text{font-size:10px;color:var(--text3);line-height:1.6;}
.mb-take-hist-toggle{font-size:9px;color:var(--text3);cursor:pointer;margin-top:4px;display:inline-block;}
.mb-take-hist-toggle:hover{color:var(--text2);}
.mb-error{font-size:11px;color:var(--text3);text-align:center;padding:20px 0;}
.mb-skeleton{background:var(--s3);border-radius:3px;animation:mb-pulse 1.4s ease-in-out infinite;}
@keyframes mb-pulse{0%,100%{opacity:0.4;}50%{opacity:0.8;}}

/* ══════════════════════════════
   SETTINGS DRAWER
══════════════════════════════ */
#settings-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:4000;opacity:0;pointer-events:none;transition:opacity 0.25s;}
#settings-overlay.open{opacity:1;pointer-events:all;}
#settings-drawer{position:fixed;top:0;right:0;bottom:0;width:min(380px,100vw);background:var(--s1);border-left:1px solid var(--border);z-index:4001;transform:translateX(100%);transition:transform 0.3s cubic-bezier(.23,1,.32,1);display:flex;flex-direction:column;overflow:hidden;}
#settings-drawer.open{transform:translateX(0);}
.sd-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border);flex-shrink:0;}
.sd-title{font-size:14px;font-weight:700;color:var(--text);letter-spacing:-0.01em;}
.sd-close{background:none;border:none;color:var(--text3);font-size:18px;cursor:pointer;font-family:var(--sans);padding:2px 6px;line-height:1;transition:color 0.1s;}
.sd-close:hover{color:var(--text);}
.sd-body{flex:1;overflow-y:auto;padding:0 0 40px;}
.sd-section{padding:16px 16px 0;}
.sd-section-title{font-size:9px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--text3);margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border);}
.sd-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.sd-row label{font-size:11px;color:var(--text2);min-width:110px;flex-shrink:0;}
.sd-inp{flex:1;height:30px;background:var(--s2);border:1px solid var(--border2);border-radius:3px;color:var(--text);font-family:var(--sans);font-size:12px;padding:0 9px;outline:none;transition:border-color 0.1s;}
.sd-inp:focus{border-color:var(--blue);}
.sd-btn{height:30px;padding:0 14px;background:var(--s2);border:1px solid var(--border2);border-radius:3px;color:var(--text2);font-family:var(--sans);font-size:11px;font-weight:500;cursor:pointer;transition:all 0.1s;white-space:nowrap;}
.sd-btn:hover{border-color:var(--blue);color:var(--blue);}
.sd-btn.danger{border-color:rgba(239,83,80,0.3);color:var(--red);}
.sd-btn.danger:hover{background:rgba(239,83,80,0.1);border-color:var(--red);}
.sd-btn.primary{background:var(--blue);border-color:var(--blue);color:#fff;}
.sd-btn.primary:hover{background:var(--blue-h);}
.sd-toggle-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border);}
.sd-toggle-row:last-child{border-bottom:none;}
.sd-toggle-info{flex:1;}
.sd-toggle-label{font-size:12px;font-weight:500;color:var(--text);}
.sd-toggle-sub{font-size:10px;color:var(--text3);margin-top:2px;line-height:1.4;}
.sd-acct-list{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;}
.sd-acct-item{display:flex;align-items:center;gap:8px;background:var(--s2);border:1px solid var(--border);border-radius:4px;padding:8px 10px;}
.sd-acct-item .acct-info{flex:1;min-width:0;}
.sd-acct-item .acct-name-text{font-size:12px;font-weight:600;color:var(--text);}
.sd-acct-item .acct-sub-text{font-size:10px;color:var(--text2);}
.sd-divider{height:1px;background:var(--border);margin:16px 0 0;}
.sd-danger-zone{padding:16px;}
.sd-danger-title{font-size:9px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--red);margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid rgba(239,83,80,0.2);}
.sd-delete-confirm{margin-top:8px;display:none;flex-direction:column;gap:6px;}
.sd-delete-confirm.show{display:flex;}
.sd-delete-inp{height:32px;background:var(--s2);border:1px solid rgba(239,83,80,0.4);border-radius:3px;color:var(--red);font-family:var(--sans);font-size:12px;padding:0 9px;outline:none;width:100%;}
.sd-delete-inp::placeholder{color:var(--text3);}

/* ── EdgePro / Upgrade ── */
.ep-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:3px;font-size:10px;font-weight:700;letter-spacing:0.06em;}
.ep-badge.free{background:var(--s3);color:var(--text3);}
.ep-badge.trial{background:var(--amber-bg);color:var(--amber);border:1px solid rgba(255,152,0,0.3);}
.ep-badge.pro{background:var(--blue-bg);color:var(--blue);border:1px solid rgba(41,98,255,0.3);}
.ep-badge.gifted{background:var(--purple-bg);color:var(--purple);border:1px solid rgba(123,97,255,0.3);}
.ep-trial-bar{height:4px;background:var(--s3);border-radius:2px;overflow:hidden;margin:6px 0 3px;}
.ep-trial-fill{height:100%;background:var(--amber);border-radius:2px;}
.ep-section{background:var(--blue-bg);border:1px solid rgba(41,98,255,0.2);border-radius:4px;padding:12px 14px;}
.ep-logo{font-family:'Inter',-apple-system,sans-serif;font-weight:800;font-size:14px;letter-spacing:0.08em;color:#fff;margin-bottom:6px;}
.ep-logo span{color:var(--blue);}
#upgrade-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:6000;display:none;align-items:center;justify-content:center;padding:16px;}
#upgrade-modal-overlay.open{display:flex;}
#upgrade-modal{background:var(--s1);border:1px solid var(--border2);border-radius:8px;width:100%;max-width:420px;max-height:90vh;overflow-y:auto;}
.um-header{padding:20px 20px 16px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;justify-content:space-between;}
.um-close{background:none;border:none;color:var(--text3);font-size:18px;cursor:pointer;padding:0;font-family:var(--sans);}
.um-body{padding:20px;}
.um-plan-toggle{display:flex;background:var(--s2);border:1px solid var(--border);border-radius:4px;overflow:hidden;margin-bottom:16px;}
.um-plan-btn{flex:1;height:36px;background:none;border:none;font-family:var(--sans);font-size:11px;font-weight:600;color:var(--text3);cursor:pointer;transition:all 0.15s;position:relative;}
.um-plan-btn.active{background:var(--blue);color:#fff;}
.um-plan-btn .save-pill{position:absolute;top:-6px;right:6px;background:var(--green);color:#fff;font-size:8px;font-weight:700;padding:1px 5px;border-radius:8px;}
.um-price{text-align:center;margin-bottom:16px;}
.um-price-val{font-size:32px;font-weight:700;color:var(--text);line-height:1;}
.um-price-sub{font-size:11px;color:var(--text3);margin-top:3px;}
.um-features{display:flex;flex-direction:column;gap:5px;margin-bottom:16px;}
.um-feature{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text2);}
.um-feature-check{width:16px;height:16px;border-radius:50%;background:var(--green-bg);color:var(--green);display:flex;align-items:center;justify-content:center;font-size:8px;flex-shrink:0;}
.um-feature-soon{width:16px;height:16px;border-radius:50%;background:var(--blue-bg);color:#7b9fff;display:flex;align-items:center;justify-content:center;font-size:8px;flex-shrink:0;}
.um-divider{height:1px;background:var(--border);margin:14px 0;}
.um-coupon-toggle{font-size:11px;color:var(--blue);cursor:pointer;display:inline-block;margin-bottom:8px;background:none;border:none;font-family:var(--sans);padding:0;}
.um-coupon-row{display:flex;gap:6px;margin-bottom:8px;}
.um-coupon-inp{flex:1;height:32px;background:var(--s2);border:1px solid var(--border2);border-radius:3px;color:var(--text);font-family:var(--sans);font-size:12px;padding:0 9px;outline:none;}
.um-coupon-inp:focus{border-color:var(--blue);}
.um-coupon-apply{height:32px;padding:0 12px;background:var(--s2);border:1px solid var(--border2);border-radius:3px;color:var(--text2);font-size:11px;font-weight:600;font-family:var(--sans);cursor:pointer;}
.um-coupon-msg{font-size:10px;margin-bottom:8px;min-height:14px;}
.um-trial-btn{display:block;width:100%;height:42px;background:var(--blue);border:none;border-radius:4px;color:#fff;font-family:var(--sans);font-size:13px;font-weight:700;cursor:pointer;margin-bottom:8px;letter-spacing:0.02em;transition:background 0.15s;}
.um-trial-btn:hover{background:var(--blue-h);}
.um-sub-note{font-size:10px;color:var(--text3);text-align:center;line-height:1.5;}
.limit-banner{display:flex;align-items:center;gap:10px;background:var(--amber-bg);border:1px solid rgba(255,152,0,0.3);border-radius:4px;padding:10px 12px;margin:8px 0;}
.limit-banner-text{flex:1;font-size:11px;color:var(--text2);line-height:1.5;}
.limit-banner-text strong{color:var(--text);}
.limit-banner-cta{height:26px;padding:0 10px;background:var(--blue);border:none;border-radius:3px;color:#fff;font-size:10px;font-weight:700;font-family:var(--sans);cursor:pointer;white-space:nowrap;flex-shrink:0;}
.sd-profile-avatar{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;flex-shrink:0;cursor:pointer;position:relative;}
.sd-profile-avatar:hover::after{content:'✎';position:absolute;inset:0;background:rgba(0,0,0,0.5);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;}
.avatar-picker{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:8px;padding:10px;background:var(--s2);border:1px solid var(--border);border-radius:4px;}
.avatar-opt{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;border:2px solid transparent;transition:border-color 0.1s;}
.avatar-opt:hover,.avatar-opt.selected{border-color:var(--blue);}

/* ══════════════════════════════
   STATS PAGE TABS
══════════════════════════════ */
.stats-tabs{display:flex;gap:0;padding:10px 12px 0;border-bottom:1px solid var(--border);margin-bottom:0;flex-shrink:0;}
.stats-tab{height:34px;padding:0 16px;background:none;border:none;border-bottom:2px solid transparent;font-family:var(--sans);font-size:12px;font-weight:500;color:var(--text3);cursor:pointer;transition:all 0.1s;margin-bottom:-1px;}
.stats-tab:hover{color:var(--text2);}
.stats-tab.active{color:var(--text);border-bottom-color:var(--purple);}
.stats-tab-panel{display:none;}
.stats-tab-panel.active{display:block;}

/* ══════════════════════════════
   ACHIEVEMENTS
══════════════════════════════ */
.trader-level-card{margin:12px;background:var(--s2);border:1px solid var(--border);border-radius:6px;padding:14px;}
.tl-row{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.tl-avatar{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;flex-shrink:0;}
.tl-info{flex:1;}
.tl-name{font-size:14px;font-weight:700;color:var(--text);}
.tl-level{font-size:11px;color:var(--text2);margin-top:2px;}
.tl-xp-bar{height:6px;background:var(--s3);border-radius:3px;overflow:hidden;}
.tl-xp-fill{height:100%;background:linear-gradient(90deg,var(--blue),var(--purple));border-radius:3px;transition:width 0.6s ease;}
.tl-xp-label{display:flex;justify-content:space-between;font-size:10px;color:var(--text3);margin-top:4px;}
.profile-card{margin:0 12px 12px;background:var(--s2);border:1px solid var(--border);border-radius:6px;padding:12px;display:flex;align-items:center;gap:12px;}
.pc-right{flex:1;min-width:0;}
.pc-name{font-size:13px;font-weight:700;color:var(--text);}
.pc-since{font-size:10px;color:var(--text3);margin-top:1px;}
.pc-stats{display:flex;gap:12px;margin-top:8px;flex-wrap:wrap;}
.pc-stat{text-align:center;}
.pc-stat-val{font-size:13px;font-weight:700;color:var(--text);}
.pc-stat-lbl{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:0.06em;}
.pc-badges{display:flex;gap:4px;margin-top:8px;flex-wrap:wrap;}
.badge-chip{font-size:16px;title:attr(title);}
.achievement-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 12px 12px;}
.ach-card{background:var(--s2);border:1px solid var(--border);border-radius:5px;padding:10px 12px;display:flex;align-items:flex-start;gap:10px;transition:border-color 0.15s;}
.ach-card.unlocked{border-color:rgba(41,98,255,0.3);background:var(--blue-bg);}
.ach-card.locked{opacity:0.5;}
.ach-icon{font-size:22px;flex-shrink:0;line-height:1;}
.ach-info{flex:1;min-width:0;}
.ach-name{font-size:11px;font-weight:600;color:var(--text);line-height:1.3;}
.ach-desc{font-size:10px;color:var(--text2);margin-top:2px;line-height:1.4;}
.ach-prog{font-size:9px;color:var(--text3);margin-top:4px;}
.ach-prog-bar{height:3px;background:var(--s3);border-radius:2px;margin-top:3px;overflow:hidden;}
.ach-prog-fill{height:100%;background:var(--blue);border-radius:2px;}

/* ══════════════════════════════
   ACCOUNT SWITCHER
══════════════════════════════ */
.acct-switcher{margin:12px 12px 8px;background:var(--s2);border:1px solid var(--border2);border-radius:5px;padding:8px 10px;display:flex;align-items:center;gap:8px;cursor:pointer;transition:border-color 0.15s;user-select:none;}
/* Sidebar switcher is desktop-only — stay hidden by default at all
   viewport sizes. The @media(min-width:900px) block below reveals
   it when it gains the .hydrated class from renderAccountSelectors. */
#sidebar-acct-switcher,
#sidebar-acct-dropdown{ display:none!important; }
.acct-switcher:hover{border-color:var(--blue);}
.acct-switcher.open{border-color:var(--blue);border-bottom-left-radius:0;border-bottom-right-radius:0;}
.acct-avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;}
.acct-av-blue{background:var(--blue-bg);border:1px solid rgba(41,98,255,0.4);color:var(--blue);}
.acct-av-purple{background:rgba(123,97,255,0.12);border:1px solid rgba(123,97,255,0.4);color:#7b61ff;}
.acct-av-amber{background:rgba(255,152,0,0.1);border:1px solid rgba(255,152,0,0.35);color:var(--amber);}
.acct-av-green{background:rgba(38,166,154,0.12);border:1px solid rgba(38,166,154,0.4);color:var(--green);}
.acct-av-red{background:rgba(239,83,80,0.1);border:1px solid rgba(239,83,80,0.35);color:var(--red);}
.acct-info{flex:1;min-width:0;}
.acct-name-text{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.acct-sub-text{font-size:10px;color:var(--text2);margin-top:1px;}
.acct-chevron{font-size:10px;color:var(--text3);flex-shrink:0;transition:transform 0.2s;}
.acct-switcher.open .acct-chevron{transform:rotate(180deg);}
.acct-icon-btn{width:22px;height:22px;border-radius:3px;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:12px;font-family:var(--sans);transition:all 0.1s;flex-shrink:0;padding:0;}
.acct-icon-btn:hover{background:var(--s3);color:var(--text);}
.acct-icon-btn.del:hover{color:var(--red);}
.acct-dropdown{margin:0 12px 8px;background:var(--s2);border:1px solid var(--blue);border-top:none;border-radius:0 0 5px 5px;overflow:hidden;display:none;}
.acct-dropdown.open{display:block;}
.acct-drop-row{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--border);cursor:pointer;transition:background 0.1s;}
.acct-drop-row:last-child{border-bottom:none;}
.acct-drop-row:hover{background:var(--s3);}
.acct-drop-row.active{background:var(--blue-bg);}
.acct-drop-row.active .acct-name-text{color:var(--blue);}
.acct-drop-row.add-row{color:var(--blue);font-size:12px;font-weight:600;}
.acct-drop-row.add-row:hover{background:var(--blue-bg);}
.acct-check{font-size:11px;color:var(--blue);width:14px;text-align:center;flex-shrink:0;}
.acct-pnl-badge{margin-left:auto;font-size:10px;font-weight:600;padding:2px 6px;border-radius:3px;flex-shrink:0;white-space:nowrap;}
.acct-pnl-badge.pos{background:rgba(38,166,154,0.12);color:var(--green);}
.acct-pnl-badge.neg{background:rgba(239,83,80,0.1);color:var(--red);}
.acct-pnl-badge.neu{background:var(--s3);color:var(--text3);}
.acct-rename-inp{height:24px;background:var(--s1);border:1px solid var(--blue);border-radius:3px;color:var(--text);font-family:var(--sans);font-size:11px;padding:0 7px;outline:none;flex:1;min-width:0;}

/* ══════════════════════════════
   COMMUNITY
══════════════════════════════ */
.comm-hero{padding:12px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;}
.comm-stat{background:var(--s2);border:1px solid var(--border);border-radius:4px;padding:9px 10px;text-align:center;}
.cs-val{font-size:20px;font-weight:700;line-height:1.1;}
.cs-val.green{color:var(--green);}
.cs-val.amber{color:var(--amber);}
.cs-val.blue{color:var(--blue);}
.cs-lbl{font-size:10px;color:var(--text3);margin-top:3px;}
.comm-status{display:flex;align-items:center;gap:7px;padding:7px 12px 10px;font-size:11px;color:var(--text3);}
.csdot{width:6px;height:6px;border-radius:50%;flex-shrink:0;background:var(--border2);}
.csdot.live{background:var(--green);}
.refresh-btn{display:block;width:calc(100% - 16px);margin:0 8px 8px;height:30px;font-family:var(--sans);font-size:11px;font-weight:500;background:var(--s2);border:1px solid var(--border2);border-radius:3px;color:var(--text2);cursor:pointer;transition:all 0.1s;}
.refresh-btn:hover{border-color:var(--blue);color:var(--blue);}
.comm-note{padding:6px 12px 10px;font-size:10px;color:var(--text3);text-align:center;line-height:1.6;}

/* install tip */
.install-tip{margin:8px;background:var(--s1);border:1px solid var(--border);border-left:3px solid var(--blue);border-radius:3px;padding:9px 11px;font-size:11px;color:var(--text2);line-height:1.6;display:flex;gap:9px;align-items:flex-start;}
.install-tip strong{color:var(--blue);}

footer{text-align:center;padding:12px 12px 20px;font-size:10px;color:var(--text4);border-top:1px solid var(--border);margin-top:4px;}



/* Mobile default — full width single column */
#desktop-topbar{ display:none; }
#desktop-shell{ display:block; width:100%; max-width:100%; overflow-x:hidden; }
#desktop-sidebar{ display:block; width:100%; }
#desktop-main{ display:block; width:100%; }

/* Ensure html and body never exceed viewport */
html, body{ max-width:100vw; overflow-x:hidden; min-width:320px; }
/* =====================================================
   DESKTOP LAYOUT  (min-width: 900px)
   Left sidebar (260px) + scrollable main content
   Mobile stays single-column, unchanged
   ===================================================== */
@media(min-width:600px) and (max-width:899px){
  .topbar,.session-bar,.goal-bar-wrap,.inst-toolbar,nav,#app-main,.install-tip,footer{
    max-width:600px;margin-left:auto;margin-right:auto;
  }
}

@media(min-width:900px){
  /* ---- Reset mobile-only styles ---- */
  html,body{ overflow:hidden; height:100%; }

  /* ---- App shell ---- */
  #desktop-shell{
    display:flex;height:100vh;width:100%;overflow:hidden;
  }

  /* ---- Sidebar ---- */
  #desktop-sidebar{
    width:260px;flex-shrink:0;
    background:var(--s1);border-right:1px solid var(--border);
    display:flex;flex-direction:column;overflow-y:auto;height:100vh;
  }
  .topbar{
    height:auto;padding:16px 16px 12px;border-bottom:1px solid var(--border);
    flex-shrink:0;
  }
  .me-logo-name{ font-size:18px; }
  .topbar-right{ display:none; }

  /* Sidebar user pill */
  #sidebar-user-wrap{
    padding:10px 14px;border-bottom:1px solid var(--border);
    display:flex;align-items:center;gap:8px;
  }

  /* Sidebar session strip */
  .session-bar{
    border-bottom:1px solid var(--border);padding:10px 14px;flex-shrink:0;
  }
  .session-label{ font-size:9px; }
  .yesterday{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; }
  .yday-card{ padding:5px 7px; }
  .yday-val{ font-size:12px; }

  /* Sidebar goal bar */
  .goal-bar-wrap{ padding:8px 14px;border-bottom:1px solid var(--border); }

  /* Sidebar instrument buttons */
  .inst-toolbar{
    padding:8px 14px;flex-wrap:wrap;gap:5px;border-bottom:1px solid var(--border);
  }
  .inst-btn{ font-size:11px;padding:0 9px;height:26px; }

  /* ---- Sidebar account switcher ---- */
  /* Desktop-only clone of the log/stats acct switcher. Sits
     between goal bar and instrument toolbar. The inline
     display:none on the markup in app.html keeps it hidden
     on mobile AND while signed out on desktop — the
     `.hydrated` class below only gets added by
     renderAccountSelectors() once there's a current account. */
  #sidebar-acct-switcher.acct-switcher.hydrated{
    display:flex!important;
    margin:8px 14px 2px;
    padding:7px 10px;
    background:var(--s2);
    border-radius:5px;
    gap:8px;
  }
  #sidebar-acct-switcher .acct-name-text{ font-size:11px; }
  #sidebar-acct-switcher .acct-sub-text{ font-size:9px; }
  #sidebar-acct-switcher .acct-avatar{ width:24px;height:24px;font-size:9px; }
  #sidebar-acct-dropdown.acct-dropdown.hydrated{
    display:none!important; /* the .open class on .acct-dropdown sets it to block */
    margin:0 14px 8px;
    max-height:320px;
    overflow-y:auto;
  }
  #sidebar-acct-dropdown.acct-dropdown.hydrated.open{
    display:block!important;
  }
  #sidebar-acct-dropdown .acct-drop-row{ padding:7px 10px;gap:7px; }
  #sidebar-acct-dropdown .acct-drop-row .acct-name-text{ font-size:11px; }
  #sidebar-acct-dropdown .acct-drop-row .acct-sub-text{ font-size:9px; }
  #sidebar-acct-dropdown .acct-drop-row .acct-avatar{ width:22px;height:22px;font-size:9px; }

  /* Sidebar nav -- vertical */
  nav{
    flex-direction:column;overflow-x:visible;overflow-y:auto;
    position:static;border-bottom:none;flex:1;padding:6px 0;
  }
  .nav-btn{
    height:36px;padding:0 16px;border-bottom:none;
    border-left:2px solid transparent;text-align:left;
    font-size:12px;justify-content:flex-start;
    display:flex;align-items:center;
  }
  .nav-btn.active{
    border-left-color:var(--blue);border-bottom-color:transparent;
    background:var(--blue-bg);
  }
  .nav-btn:hover{ background:var(--s2); }

  /* Sidebar footer */
  .install-tip{ display:none!important; }
  footer{ display:none!important; }

  /* Desktop sidebar bottom branding */
  #desktop-sidebar::after{
    content:'MICROEDGE  --  NOT FINANCIAL ADVICE';
    display:block;padding:10px 14px 16px;
    font-size:9px;color:var(--text3);
    border-top:1px solid var(--border);
    margin-top:auto;letter-spacing:0.05em;
  }

  /* ---- Main content area ---- */
  #desktop-main{
    flex:1;overflow-y:auto;height:100vh;
    display:flex;flex-direction:column;
  }

  /* Desktop topbar strip (instrument + user pill) */
  #desktop-topbar{
    height:44px;background:var(--s1);border-bottom:1px solid var(--border);
    display:flex;align-items:center;padding:0 20px;gap:10px;flex-shrink:0;
  }
  #desktop-topbar .tv-pill.inst{ font-size:13px;font-weight:700; }

  /* Main scrollable area */
  #app-main{ padding:0;flex:1; }

  /* Wider page sections on desktop */
  .page{ max-width:none; }
  section{ margin:10px 16px; }

  /* Two-column metric grids on desktop */
  .metrics{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .metric.full{ grid-column:1/-1; }

  /* Stat cards 4-col on desktop */
  .streak-grid{
    grid-template-columns:repeat(6,minmax(0,1fr));
  }

  /* Calendar wider */
  .cal-grid{ gap:6px; }
  .cal-day{ font-size:14px; font-weight:600; }
  .cal-day-hdr{ font-size:12px; padding:5px 0; }
  .cal-day-pnl{ font-size:11px; }
  .cal-day-acct{ font-size:10px; }

  /* Charts taller on desktop */
  .chart-box[style*="height:180px"]{ height:220px!important; }
  .chart-box[style*="height:170px"]{ height:200px!important; }
  .chart-box[style*="height:200px"]{ height:240px!important; }

  /* Hide install tip on desktop */
  .install-tip{ display:none!important; }

  /* Desktop shell layout */
  #desktop-shell{ display:flex!important; }
  #desktop-topbar{ display:flex!important;align-items:center; }

  /* On desktop, topbar-right (mobile pill) is hidden - user pill is in desktop-topbar */
  .topbar-right{ display:none!important; }
}


/* ══ AUTH SCREEN ══ */
#auth-screen{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:calc(100vh - 50px);padding:2rem 1.5rem;text-align:center;
}
.auth-logo-name{font-size:28px;font-weight:800;letter-spacing:0.08em;color:#fff;margin-bottom:4px;font-family:'Montserrat',sans-serif;}
.auth-logo-sub{font-size:10px;font-weight:500;letter-spacing:0.22em;text-transform:uppercase;color:var(--text3);margin-bottom:2.5rem;}
.auth-tagline{font-size:14px;color:var(--text2);margin-bottom:2.5rem;line-height:1.6;max-width:280px;}
.auth-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;max-width:300px;height:46px;
  border-radius:4px;border:1px solid var(--border2);
  background:var(--s1);color:var(--text);
  font-family:var(--sans);font-size:13px;font-weight:500;
  cursor:pointer;transition:all 0.15s;margin-bottom:10px;
}
.auth-btn:hover{border-color:var(--blue);background:var(--blue-bg);color:var(--blue);}
.auth-btn svg{width:18px;height:18px;flex-shrink:0;}
.auth-divider{font-size:11px;color:var(--text3);margin:8px 0 16px;display:flex;align-items:center;gap:10px;width:100%;max-width:300px;}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border);}
.auth-note{font-size:10px;color:var(--text3);margin-top:1.5rem;max-width:280px;line-height:1.6;}
#pp-free-card:hover{border-color:var(--border2)!important;}
#pp-pro-card:hover{border-color:#5580ff!important;}
#pp-free-btn:hover{border-color:var(--text3)!important;color:var(--text)!important;}
#pp-pro-btn:hover{background:#1e53e5!important;}
.auth-error{font-size:11px;color:var(--red);margin-top:8px;min-height:16px;}
/* Welcome modal overrides — full width inputs */
#welcome-modal .auth-inp,
#welcome-modal .auth-submit,
#welcome-modal .auth-divider,
#welcome-modal .auth-btn { max-width:100% !important; width:100% !important; }
/* Email auth tabs */
.auth-tabs{display:flex;gap:4px;width:100%;max-width:300px;margin-bottom:16px;background:var(--s2);border-radius:20px;padding:3px;}
.auth-tab{flex:1;height:30px;background:transparent;border:none;color:var(--text2);font-family:var(--sans);font-size:11px;font-weight:600;cursor:pointer;border-radius:16px;transition:all 0.2s;}
.auth-tab:hover{color:var(--text);}
.auth-tab.active{background:var(--blue);color:#fff;box-shadow:0 2px 8px rgba(41,98,255,0.35);}
.auth-inp{width:100%;max-width:300px;height:42px;background:var(--s2);border:1px solid var(--border2);border-radius:4px;color:var(--text);font-family:var(--sans);font-size:13px;padding:0 12px;outline:none;margin-bottom:8px;transition:border-color 0.1s;}
.auth-inp:focus{border-color:var(--blue);}
.auth-inp::placeholder{color:var(--text3);}
.auth-submit{width:100%;max-width:300px;height:42px;background:var(--blue);border:none;border-radius:4px;color:#fff;font-family:var(--sans);font-size:13px;font-weight:600;cursor:pointer;transition:background 0.15s;margin-bottom:10px;}
.auth-submit:hover{background:var(--blue2);}
.auth-link{font-size:11px;color:var(--blue);cursor:pointer;background:none;border:none;font-family:var(--sans);padding:0;margin-bottom:12px;}
/* ══ USER PILL ══ */
.user-pill{
  display:flex;align-items:center;gap:6px;
  padding:3px 8px;border-radius:3px;
  background:var(--s2);border:1px solid var(--border2);
  cursor:pointer;transition:border-color 0.1s;
}
.user-pill:hover{border-color:var(--red);}
.user-avatar{width:20px;height:20px;border-radius:50%;background:var(--blue-bg);border:1px solid var(--blue);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:var(--blue);flex-shrink:0;}
.user-name{font-size:11px;font-weight:500;color:var(--text2);max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.signout-hint{font-size:9px;color:var(--text3);}

/* AI COACHING */
.ai-btn{display:inline-flex;align-items:center;gap:5px;margin-top:5px;padding:4px 10px;background:var(--purple-bg);border:1px solid rgba(123,97,255,0.35);border-radius:3px;color:var(--purple);font-size:10px;font-weight:600;font-family:var(--sans);cursor:pointer;transition:all 0.15s;}
.ai-btn:hover{background:var(--purple);color:#fff;}
.ai-btn:disabled{opacity:0.5;cursor:not-allowed;}
.ai-btn svg{width:11px;height:11px;flex-shrink:0;}
.ai-response{margin-top:7px;padding:9px 11px;background:var(--purple-bg);border:1px solid rgba(123,97,255,0.25);border-radius:4px;font-size:11px;color:var(--text2);line-height:1.65;grid-column:1/-1;}
.ai-response-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.ai-response-label{font-size:9px;font-weight:700;color:var(--purple);letter-spacing:0.1em;text-transform:uppercase;}
.ai-share-btn{padding:3px 8px;background:none;border:1px solid rgba(123,97,255,0.4);border-radius:3px;color:var(--purple);font-size:10px;font-weight:500;font-family:var(--sans);cursor:pointer;transition:all 0.1s;}
.ai-share-btn:hover{background:var(--purple);color:#fff;}
.ai-cat-select{height:24px;padding:0 6px;background:var(--s2);border:1px solid var(--border2);border-radius:3px;color:var(--text);font-family:var(--sans);font-size:10px;outline:none;}
.ai-share-row{display:flex;align-items:center;gap:6px;margin-top:7px;flex-wrap:wrap;}
.ai-shared-badge{font-size:10px;color:var(--green);font-weight:500;}
/* COMMUNITY LESSONS */
.lesson-card{background:var(--s2);border:1px solid var(--border);border-radius:4px;padding:11px 13px;margin-bottom:8px;}
.lesson-header{display:flex;align-items:center;gap:7px;margin-bottom:6px;flex-wrap:wrap;}
.lesson-cat{font-size:9px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:2px 7px;border-radius:3px;}
.cat-psychology{background:var(--purple-bg);color:var(--purple);}
.cat-risk{background:var(--red-bg);color:var(--red);}
.cat-strategy{background:var(--blue-bg);color:var(--blue);}
.cat-setup{background:var(--green-bg);color:var(--green);}
.cat-general{background:var(--s3);color:var(--text2);}
.lesson-meta{font-size:10px;color:var(--text3);}
.lesson-notes{font-size:11px;color:var(--text3);font-style:italic;margin-bottom:6px;padding:6px 8px;background:var(--bg);border-radius:3px;border-left:2px solid var(--border2);}
.lesson-ai{font-size:12px;color:var(--text2);line-height:1.65;}
.lesson-footer{display:flex;align-items:center;justify-content:space-between;margin-top:8px;}
.lesson-like{background:none;border:1px solid var(--border2);border-radius:3px;padding:3px 9px;font-size:11px;color:var(--text3);cursor:pointer;font-family:var(--sans);transition:all 0.1s;}
.lesson-like:hover{border-color:var(--green);color:var(--green);}
.lesson-like.liked{border-color:var(--green);color:var(--green);background:var(--green-bg);}
.lessons-filter{display:flex;gap:6px;padding:8px 10px;flex-wrap:wrap;border-bottom:1px solid var(--border);}
.cat-filter-btn{padding:4px 10px;border-radius:3px;border:1px solid var(--border2);background:none;font-size:10px;font-weight:600;color:var(--text2);cursor:pointer;font-family:var(--sans);transition:all 0.1s;letter-spacing:0.04em;}
.cat-filter-btn:hover{border-color:var(--blue);color:var(--blue);}
.cat-filter-btn.active{background:var(--blue-bg);border-color:var(--blue);color:var(--blue);}
.lessons-list{padding:8px;}
.lessons-empty{text-align:center;padding:28px;font-size:12px;color:var(--text3);}
.lessons-loading{text-align:center;padding:20px;font-size:11px;color:var(--text3);}

/* =====================================================
   TRADOVATE SETUP PANEL
   ===================================================== */
.tv-setup-btn{
  display:flex;align-items:center;justify-content:center;gap:7px;
  width:100%;height:40px;
  background:var(--blue);
  border:none;border-radius:4px;
  color:#fff;font-family:var(--sans);font-size:13px;font-weight:700;
  cursor:pointer;transition:all 0.15s;letter-spacing:0.03em;
}
.tv-setup-btn:hover{background:var(--blue-h);transform:translateY(-1px);}
.tv-setup-btn:active{transform:translateY(0);}

#tv-panel-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:200;
  animation:fadeIn 0.2s ease;
}
#tv-panel{
  position:fixed;bottom:0;left:0;right:0;
  background:var(--s1);border-top:1px solid var(--border);
  border-radius:12px 12px 0 0;z-index:201;
  max-height:85vh;overflow-y:auto;
  animation:slideUp 0.25s ease;
}
@media(min-width:900px){
  #tv-panel{
    left:auto;right:0;top:0;bottom:0;width:400px;
    border-radius:0;border-left:1px solid var(--border);border-top:none;
    animation:slideRight 0.25s ease;
    max-height:100vh;
  }
}
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
@keyframes slideUp{ from{transform:translateY(100%);} to{transform:translateY(0);} }
@keyframes slideRight{ from{transform:translateX(100%);} to{transform:translateX(0);} }

.tv-panel-header{
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:16px 16px 12px;border-bottom:1px solid var(--border);
  position:sticky;top:0;background:var(--s1);z-index:1;
}
.tv-panel-title{font-size:15px;font-weight:700;color:var(--text);letter-spacing:-0.01em;}
.tv-panel-sub{font-size:11px;color:var(--text3);margin-top:3px;}
.tv-panel-close{
  background:none;border:none;color:var(--text3);cursor:pointer;
  font-size:16px;padding:2px 6px;font-family:var(--sans);
  transition:color 0.1s;flex-shrink:0;
}
.tv-panel-close:hover{color:var(--text);}
.tv-panel-body{padding:12px 16px 24px;}

.tv-section-label{
  font-size:9px;font-weight:700;color:var(--text3);
  letter-spacing:0.12em;text-transform:uppercase;
  padding:8px 0 6px;
}
.tv-field{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px;background:var(--s2);border:1px solid var(--border);
  border-radius:4px;margin-bottom:6px;gap:10px;
}
.tv-field-info{flex:1;min-width:0;}
.tv-field-name{font-size:12px;font-weight:600;color:var(--text);margin-bottom:2px;}
.tv-field-desc{font-size:10px;color:var(--text3);line-height:1.4;}
.tv-field-right{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.tv-field-val{font-size:14px;font-weight:700;color:var(--blue);min-width:60px;text-align:right;}
.tv-field-pts{font-size:10px;color:var(--text3);min-width:40px;text-align:right;}
.tv-copy-btn{
  height:26px;padding:0 10px;background:var(--blue-bg);
  border:1px solid rgba(41,98,255,0.35);border-radius:3px;
  color:var(--blue);font-size:10px;font-weight:600;
  font-family:var(--sans);cursor:pointer;transition:all 0.1s;
  white-space:nowrap;
}
.tv-copy-btn:hover{background:var(--blue);color:#fff;}
.tv-copy-btn.copied{background:var(--green-bg);border-color:var(--green);color:var(--green);}

.tv-divider{height:1px;background:var(--border);margin:10px 0 4px;}

.tv-steps{display:flex;flex-direction:column;gap:6px;margin-top:4px;}
.tv-step{
  display:flex;align-items:flex-start;gap:8px;
  font-size:11px;color:var(--text2);line-height:1.5;
}
.tv-step-num{
  width:18px;height:18px;border-radius:50%;background:var(--blue-bg);
  border:1px solid rgba(41,98,255,0.3);color:var(--blue);
  font-size:9px;font-weight:700;display:flex;align-items:center;
  justify-content:center;flex-shrink:0;margin-top:1px;
}
.tv-note{
  margin-top:12px;padding:12px 14px;background:var(--amber-bg);
  border:1px solid rgba(255,152,0,0.3);border-radius:4px;
  font-size:11px;color:var(--amber);line-height:1.6;
}
.tv-note.action-card{
  background:rgba(255,152,0,0.07);
  border:1px solid rgba(255,152,0,0.35);
}
.tv-note-title{
  font-size:11px;font-weight:700;color:var(--amber);
  margin-bottom:4px;display:flex;align-items:center;gap:6px;
}
.tv-note-title::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:var(--amber);flex-shrink:0;
}
.tv-note-body{font-size:11px;color:#c8a558;line-height:1.6;margin-bottom:10px;}
.tv-note-suggestion{
  background:rgba(41,98,255,0.1);border:1px solid rgba(41,98,255,0.25);
  border-radius:3px;padding:7px 10px;margin-bottom:10px;
  display:flex;align-items:center;justify-content:space-between;
}
.tv-note-sug-lbl{font-size:9px;color:#565c6b;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:2px;}
.tv-note-sug-val{font-size:15px;font-weight:700;color:#2962ff;}
.tv-note-sug-sub{font-size:9px;color:#7b9fff;margin-top:1px;}
.tv-note-actions{display:flex;gap:8px;}
.tv-note-btn{
  flex:1;height:32px;border-radius:3px;font-family:var(--sans);
  font-size:11px;font-weight:600;cursor:pointer;border:none;
  transition:all 0.15s;
}
.tv-note-btn.accept{background:var(--blue);color:#fff;}
.tv-note-btn.accept:hover{background:var(--blue-h);}
.tv-note-btn.dismiss{background:transparent;color:var(--text3);border:1px solid var(--border2);}
.tv-note-btn.dismiss:hover{color:var(--text);border-color:var(--border);}

/* Tradovate panel goal inputs */
.tv-goal-context{ margin-bottom:14px; }
.tv-context-row{ display:flex;flex-wrap:wrap;gap:6px; }
.tv-ctx-item{ background:var(--s2);border:1px solid var(--border);border-radius:4px;padding:5px 9px;display:flex;flex-direction:column;gap:1px; }
.tv-ctx-lbl{ font-size:9px;font-weight:600;color:var(--text3);letter-spacing:0.07em;text-transform:uppercase; }
.tv-ctx-val{ font-size:12px;font-weight:600;color:var(--text); }
.tv-input-group{ margin-bottom:14px; }
.tv-input-label{ font-size:12px;font-weight:600;color:var(--text);display:block;margin-bottom:3px; }
.tv-input-hint{ font-size:10px;color:var(--text3);margin-bottom:6px; }
.tv-input{ width:100%;height:38px;background:var(--s2);border:1px solid var(--border2);border-radius:4px;color:var(--text);font-family:var(--sans);font-size:14px;font-weight:600;padding:0 12px;outline:none;transition:border-color 0.1s; }
.tv-input:focus{ border-color:var(--blue); }
.tv-error{ padding:8px 12px;background:var(--red-bg);border:1px solid rgba(239,83,80,0.3);border-radius:4px;font-size:11px;color:var(--red);margin-bottom:10px;line-height:1.5; }
.tv-generate-btn{ width:100%;height:42px;background:var(--blue);border:none;border-radius:4px;color:#fff;font-family:var(--sans);font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:background 0.1s; }
.tv-generate-btn:hover{ background:var(--blue-h); }
.tv-back-btn{ display:flex;align-items:center;gap:6px;margin-top:14px;background:none;border:1px solid var(--border2);border-radius:4px;color:var(--text2);font-family:var(--sans);font-size:11px;font-weight:500;padding:7px 12px;cursor:pointer;transition:all 0.1s; }
.tv-back-btn:hover{ border-color:var(--blue);color:var(--blue); }
/* Summary grid */
.tv-result-summary{ margin-bottom:14px; }
.tv-summary-grid{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px; }
.tv-summary-item{ background:var(--s2);border:1px solid var(--border);border-radius:4px;padding:8px 10px; }
.tv-summary-lbl{ font-size:9px;font-weight:600;color:var(--text3);letter-spacing:0.07em;text-transform:uppercase;margin-bottom:3px; }
.tv-summary-val{ font-size:16px;font-weight:700;line-height:1; }
.tv-summary-val.green{ color:var(--green); }
.tv-summary-val.blue{ color:var(--blue); }
.tv-summary-val.amber{ color:var(--amber); }
.tv-share-wrap{ margin-top:12px;background:var(--s2);border:1px solid var(--border);border-radius:4px;padding:10px 12px; }
.tv-share-label{ font-size:9px;font-weight:700;color:var(--text3);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:7px; }
.tv-share-text{ font-size:11px;color:var(--text2);line-height:1.7;margin-bottom:9px;font-style:italic; }
.tv-share-copy-btn{ display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:var(--s1);border:1px solid var(--border2);border-radius:3px;color:var(--text2);font-family:var(--sans);font-size:11px;font-weight:500;cursor:pointer;transition:all 0.1s; }
.tv-share-copy-btn:hover{ border-color:var(--blue);color:var(--blue); }
.tv-share-copy-btn.copied{ border-color:var(--green);color:var(--green);background:var(--green-bg); }

.tv-input-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;}
.tv-input-group{display:flex;flex-direction:column;gap:4px;}
.tv-input-label{font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:0.08em;}
.tv-input{height:38px;padding:0 10px;background:var(--s2);border:1px solid var(--border2);border-radius:4px;color:var(--text);font-family:var(--sans);font-size:14px;font-weight:600;outline:none;width:100%;box-sizing:border-box;transition:border-color 0.1s;}
.tv-input:focus{border-color:var(--blue);}
.tv-context-strip{padding:8px 10px;background:var(--blue-bg);border:1px solid rgba(41,98,255,0.2);border-radius:4px;font-size:11px;color:var(--text2);margin-bottom:4px;}
.tv-goal-summary{padding:10px 12px;background:var(--s2);border:1px solid var(--border);border-radius:4px;margin-bottom:4px;}
.tv-goal-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;padding:2px 0;}
.tv-goal-label{color:var(--text3);}
.tv-goal-val{font-weight:600;color:var(--text);}
.tv-goal-val.green{color:var(--green);}
.tv-goal-val.amber{color:var(--amber);}
.tv-goal-val.red{color:var(--red);}

.tv-calc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:4px;}
.tv-calc-box{background:var(--s2);border:1px solid var(--border);border-radius:4px;padding:7px 9px;}
.tv-calc-label{font-size:9px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:3px;}
.tv-calc-val{font-size:13px;font-weight:700;color:var(--blue);}

.lesson-ai-preview{font-size:12px;color:var(--text2);line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.lesson-ai-full{font-size:12px;color:var(--text2);line-height:1.6;display:none;}
.lesson-expand{background:none;border:none;color:var(--blue);font-size:11px;
  font-family:var(--sans);cursor:pointer;padding:2px 0;margin-top:2px;display:block;}
.lesson-expand:hover{text-decoration:underline;}
.lesson-card{background:var(--s2);border:1px solid var(--border);border-radius:4px;
  padding:9px 12px;margin-bottom:6px;}
.lesson-notes{font-size:11px;color:var(--text3);font-style:italic;margin-bottom:5px;
  padding:5px 7px;background:var(--bg);border-radius:3px;border-left:2px solid var(--border2);
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
.lesson-context{font-size:10px;color:var(--text3);margin-top:6px;display:flex;gap:8px;align-items:center;}

/* =====================================================
   SHARE IMAGE MODAL
   ===================================================== */
#share-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:300;display:none;align-items:center;justify-content:center;padding:20px;}
#share-modal{background:var(--s1);border:1px solid var(--border);border-radius:8px;width:100%;max-width:420px;overflow:hidden;}
#share-modal-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);}
#share-modal-title{font-size:13px;font-weight:600;color:var(--text);}
#share-modal-close{background:none;border:none;color:var(--text3);font-size:16px;cursor:pointer;font-family:var(--sans);padding:2px 6px;}
#share-canvas-wrap{padding:16px;background:var(--s2);}
#share-canvas{width:100%;border-radius:6px;display:block;}
#share-actions{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--border);}
.share-action-btn{flex:1;height:36px;border-radius:4px;border:1px solid var(--border2);background:none;color:var(--text2);font-family:var(--sans);font-size:12px;font-weight:600;cursor:pointer;transition:all 0.1s;}
.share-action-btn:hover{background:var(--blue-bg);border-color:var(--blue);color:var(--blue);}
.share-action-btn.primary{background:var(--blue);border-color:var(--blue);color:#fff;}
.share-action-btn.primary:hover{background:var(--blue-h);}

/* Share button on log entries */
.le-share-btn{grid-column:1/-1;border:none;background:none;font-size:10px;color:var(--blue);cursor:pointer;text-align:left;font-family:var(--sans);padding:2px 0;transition:opacity 0.1s;}
.le-share-btn:hover{opacity:0.7;}

/* =====================================================
   CALENDAR DAY PANEL (slide up)
   ===================================================== */
#cal-day-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:200;display:none;}
#cal-day-panel{position:fixed;bottom:0;left:0;right:0;background:var(--s1);border-top:1px solid var(--border);border-radius:12px 12px 0 0;z-index:201;max-height:70vh;overflow-y:auto;display:none;animation:slideUp 0.2s ease;}
#cal-day-panel-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--s1);}
#cal-day-panel-title{font-size:14px;font-weight:700;color:var(--text);}
#cal-day-panel-close{background:none;border:none;color:var(--text3);font-size:16px;cursor:pointer;font-family:var(--sans);}
#cal-day-panel-body{padding:12px 16px 24px;}
.cdp-metric{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--border);font-size:12px;}
.cdp-label{color:var(--text3);}
.cdp-val{font-weight:600;color:var(--text);}
.cdp-notes{margin-top:10px;padding:8px 10px;background:var(--s2);border-radius:4px;border-left:2px solid var(--border2);font-size:11px;color:var(--text2);font-style:italic;line-height:1.6;}
.cdp-ai{margin-top:10px;padding:10px 12px;background:var(--purple-bg);border:1px solid rgba(123,97,255,0.2);border-radius:4px;font-size:11px;color:var(--text2);line-height:1.7;}
.cdp-ai-label{font-size:9px;font-weight:700;color:var(--purple);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:5px;}
@media(min-width:900px){
  #cal-day-panel{left:260px;}
}

/* =====================================================
   PLAN PICKER — mobile responsive overrides
   =====================================================
   The plan picker overlay (#plan-picker-overlay) uses
   heavy inline styles for the card grid. On narrow
   viewports the two-column grid cramps text and wraps
   the "Start 14-day free trial" CTA awkwardly. Stack
   the cards vertically below 900px and aggressively
   compress vertical footprint below 600px so the primary
   CTA stays visible (or at least within one short scroll)
   on phones. The inline styles on these elements mean
   we have to use !important everywhere. */

@media(max-width:899px){
  /* Stack cards in one column below iPad-landscape width.
     Two-column at 768-899px was still cramping the text. */
  #pp-card-grid{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
}

@media(max-width:599px){
  /* ── Outer scroll container — minimal padding to reclaim
     every pixel of vertical space for the cards. */
  #plan-picker-overlay > div{
    padding:12px 10px 24px !important;
    align-items:flex-start !important;
  }
  #plan-picker-overlay > div > div{
    margin-top:0 !important;
  }

  /* ── Header: smaller title, less bottom margin. */
  #plan-picker-overlay [style*="margin-bottom:28px"]{
    margin-bottom:14px !important;
  }
  #plan-picker-overlay [style*="font-size:22px"]{
    font-size:18px !important;
    margin-bottom:4px !important;
  }
  /* "You can always upgrade later..." subtitle */
  #plan-picker-overlay [style*="font-size:13px"][style*="line-height:1.6"]{
    font-size:12px !important;
    line-height:1.4 !important;
  }

  /* ── Billing toggle — compact but still tappable. */
  #pp-billing-toggle{
    margin-bottom:12px !important;
    gap:8px !important;
  }
  #pp-toggle-monthly,
  #pp-toggle-annual{
    height:30px !important;
    font-size:11px !important;
    padding:0 12px !important;
  }

  /* ── Cards: tighter padding, compact feature list. */
  #pp-card-grid{
    gap:12px !important;
    margin-bottom:12px !important;
  }
  #pp-free-card,
  #pp-pro-card{
    padding:14px 14px 14px !important;
  }
  /* Price numbers — still prominent but smaller */
  #pp-free-card [style*="font-size:28px"],
  #pp-pro-card [style*="font-size:28px"]{
    font-size:22px !important;
    margin-bottom:2px !important;
  }
  /* "forever" / "per month" sub-labels */
  #pp-free-card [style*="font-size:11px"][style*="color:var(--text3)"][style*="margin-bottom:16px"],
  #pp-pro-card [style*="font-size:11px"][style*="color:var(--text3)"][style*="margin-bottom:16px"]{
    margin-bottom:10px !important;
  }
  /* Feature list lines — smaller gaps, slightly smaller text */
  #pp-free-card [style*="gap:7px"][style*="flex-direction:column"],
  #pp-pro-card  [style*="gap:7px"][style*="flex-direction:column"]{
    gap:5px !important;
  }
  #pp-free-card [style*="font-size:11px"][style*="display:flex"],
  #pp-pro-card  [style*="font-size:11px"][style*="display:flex"]{
    font-size:11px !important;
    line-height:1.4 !important;
  }
  /* Card CTA buttons — iOS minimum 44px tap target, tight top margin */
  #pp-free-btn,
  #pp-pro-btn{
    margin-top:12px !important;
    height:44px !important;
    white-space:nowrap !important;
    padding:0 8px !important;
  }

  /* ── Trial note at bottom — tighter */
  #plan-picker-overlay [style*="text-align:center"][style*="font-size:11px"]{
    font-size:10px !important;
    line-height:1.45 !important;
  }
}

/* Extra-small phones (iPhone SE 320px and similar) — be
   even more ruthless with vertical space. */
@media(max-width:374px){
  #plan-picker-overlay > div{
    padding:8px 8px 20px !important;
  }
  #pp-free-card,
  #pp-pro-card{
    padding:12px !important;
  }
  #pp-free-card [style*="font-size:28px"],
  #pp-pro-card [style*="font-size:28px"]{
    font-size:20px !important;
  }
  /* Drop "Everything in Free" on the EdgePro card — it's implied */
  #pp-pro-card [style*="gap:7px"][style*="flex-direction:column"] > div:first-child{
    display:none !important;
  }
}

/* Ensure the free-trial CTA never wraps even in cramped space */
#pp-pro-btn{
  white-space:nowrap;
  padding:0 8px;
}