@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap');
*{box-sizing:border-box}body{margin:0;background:#070b14;color:#edf3ff;font-family:Inter,Arial,sans-serif}.hidden{display:none!important}.brand{color:#6ea0ff;letter-spacing:.16em;font-weight:900;font-size:12px}.hero{display:flex;justify-content:space-between;gap:20px;padding:26px 34px;background:linear-gradient(145deg,#101a30,#07111f);border-bottom:1px solid #1d2940}h1{font-size:42px;margin:8px 0}h2,h3{margin:0 0 8px}p{color:#aebdd5}.publicBanner{margin-top:12px;padding:10px 13px;border:1px solid #2b5d9d;background:#0b1830;border-radius:14px;color:#a8c9ff;font-weight:700}.topActions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}.pill,.userPill{border:1px solid #34425d;background:#131c2d;padding:11px 16px;border-radius:999px}.riskBadge{float:right;background:#0e3a29;border:1px solid #247b55;color:#67f0a3;border-radius:999px;padding:8px 14px;font-weight:900}.modal{position:fixed;inset:0;background:#000a;z-index:20;display:flex;align-items:center;justify-content:center;padding:20px}.modalCard{max-width:1120px;width:100%;max-height:92vh;overflow:auto;background:linear-gradient(145deg,#101827,#08111f);border:1px solid #263348;border-radius:28px;padding:30px;box-shadow:0 30px 100px #000}.x{float:right;background:#18243a;border:1px solid #34425d;border-radius:50%;width:38px;height:38px}.featureGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}.featureGrid div{background:#0a1324;border:1px solid #24334e;border-radius:18px;padding:15px}.featureGrid span{display:block;color:#9fb0ca;font-size:13px}.authGrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}form{display:grid;gap:12px}input,select{background:#080e1a;border:1px solid #2a364d;color:#fff;border-radius:14px;padding:14px;font-size:15px}button{background:#4f7df3;color:white;border:0;border-radius:13px;padding:13px 17px;font-weight:900;cursor:pointer}.danger{background:#8b2424}.ghost{background:#121b2c;border:1px solid #2b3954}.purple{color:#d69bff}.smallRow{display:grid;grid-template-columns:1fr 1fr;gap:10px}main{max-width:1640px;margin:auto;padding:20px}.today{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin-bottom:18px}.today>div,.modeBox,.toolbar,.chartBox,.guide,.sectionHead,.ageBox,.investModel,.gate{background:#101827;border:1px solid #263348;border-radius:22px;padding:18px}.modeBox button{margin-right:8px}.tabs{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}.tab{background:#101827;border:1px solid #2a3956}.tab.active{background:#4f7df3}.toolbar{display:grid;grid-template-columns:1fr 170px 120px 90px 260px;gap:12px;margin-bottom:18px}.check{display:flex;align-items:center;gap:8px;background:#080e1a;border:1px solid #2a364d;border-radius:15px;padding:10px}.panel{display:none}.panel.active{display:block}.commandGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}.cmd,.kpi,.card,.incomeCard{background:#101827;border:1px solid #263348;border-radius:20px;padding:16px}.cmd small,.kpi small{color:#92a4c1;text-transform:uppercase;letter-spacing:.08em}.cmd b,.kpi b{font-size:22px;display:block;margin-top:5px}.cmd.buyBlock{border-color:#1d7a4a;background:#0f3024}.cmd.redBlock{border-color:#7a2525;background:#311313}.kpiGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:16px}.kpi.buy{border-color:#1d7a4a;background:#0f3024}.kpi.hold{border-color:#7a6520;background:#2b2514}.kpi.sell{border-color:#7a2525;background:#311313}.kpi.stale{border-color:#465268}.kpi.income{border-color:#265ca8;background:#101e3a}.work{display:grid;grid-template-columns:1fr 520px;gap:18px}.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.cardTop{display:flex;justify-content:space-between;gap:10px}.symbol{font-size:28px;font-weight:950}.price{font-size:26px;font-weight:900;margin:8px 0}.green{color:#64e18a}.red{color:#ff8383}.badge{padding:7px 10px;border-radius:999px;font-weight:900;font-size:12px;height:max-content}.sigBuy{background:#123c28;color:#6dffa4}.sigHold{background:#4a3b12;color:#ffd966}.sigSell{background:#4c1616;color:#ff9a9a}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}.metric{background:#080e1a;border-radius:13px;padding:10px}.metric small{color:#92a4c1;display:block;font-size:11px;text-transform:uppercase}.scoreBar{height:5px;background:#243049;border-radius:99px;overflow:hidden;margin-top:7px}.scoreFill{height:100%;background:#61d78e}.actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px;flex-wrap:wrap}.mini{font-size:12px;padding:8px 10px}.chartBox{position:sticky;top:12px;height:max-content}.chartHead{display:flex;justify-content:space-between;align-items:center}#tv_chart{height:580px;border-radius:18px;overflow:hidden;background:#050912}.sectionHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.incomeList{display:grid;gap:14px}.putTable{width:100%;border-collapse:collapse}.putTable th,.putTable td{padding:9px;border-bottom:1px solid #253249;text-align:left}.ageBox{margin-bottom:16px}.ageBox input{width:100%}.allocGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.alloc{background:#080e1a;border-radius:15px;padding:14px}.profileGrid{grid-template-columns:repeat(2,1fr);background:#101827;border:1px solid #263348;border-radius:22px;padding:20px}.disclaimer{max-width:1640px;margin:20px auto;padding:18px 24px;color:#9fb0ca;font-size:12px;line-height:1.5;border-top:1px solid #263348}.leapTag{display:inline-block;padding:6px 9px;border:1px solid #6d3db3;color:#d69bff;border-radius:999px;margin-top:8px;font-weight:900}@media(max-width:1000px){.hero,.today,.work,.authGrid,.featureGrid{grid-template-columns:1fr;display:grid}.toolbar{grid-template-columns:1fr}.cards,.kpiGrid,.commandGrid,.allocGrid{grid-template-columns:1fr}.chartBox{position:static}h1{font-size:32px}}

/* Alpha 2.4 Smart UX Final polish */
.hero{background:radial-gradient(circle at 10% 0%, rgba(74,119,255,.20), transparent 36%),linear-gradient(145deg,#111a2f,#07111f)}
.tabs{padding:6px;background:rgba(9,15,28,.76);border:1px solid #1f2e48;border-radius:18px;width:max-content;max-width:100%}
.tab{border-radius:14px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);transition:.18s ease}
.tab:hover,.mini:hover,.ghost:hover{transform:translateY(-1px);filter:brightness(1.08)}
.tab.active{background:linear-gradient(135deg,#4f7df3,#6f9cff);box-shadow:0 10px 28px rgba(79,125,243,.28)}
.addBtn,.saveBtn{background:linear-gradient(135deg,#4f7df3,#69a7ff);box-shadow:0 10px 28px rgba(79,125,243,.22)}
.mini{border:1px solid #304465;background:linear-gradient(145deg,#14213a,#0b1425);color:#dbe8ff;border-radius:999px}
.actions .mini:nth-child(1)::before{content:"📈 ";font-size:11px}
.actions .mini:nth-child(2)::before{content:"↻ ";font-size:12px}
.actions .mini:nth-child(3)::before{content:"💰 ";font-size:11px}
.actions .mini:nth-child(4)::before{content:"× ";font-size:12px}
.cmd.holdBlock,.kpi.hold{border-color:#8a7625!important;background:linear-gradient(145deg,#332b14,#18160e)!important}
.cmd.buyBlock,.kpi.buy{box-shadow:0 0 0 1px rgba(100,225,138,.05), inset 0 0 22px rgba(100,225,138,.05)}
.cmd.redBlock,.kpi.sell{box-shadow:0 0 0 1px rgba(255,131,131,.05), inset 0 0 22px rgba(255,131,131,.05)}
.scoreNum{float:right;font-size:12px;color:#cfe0ff;background:#15233a;border:1px solid #304465;border-radius:999px;padding:2px 7px;margin-left:6px}
.profileShell{display:grid;gap:16px}
.profileGrid label{display:grid;gap:7px;color:#9fb0ca;font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.profileGrid label input{text-transform:none;letter-spacing:0;color:#fff}
.dangerZone{background:#140b0e;border:1px solid #54222a;border-radius:20px;padding:18px}
.outlineDanger{border:1px solid #a33b49;background:linear-gradient(145deg,#5d1821,#2b0e13)}
.guidePro{padding:22px}.guideIntro{font-size:16px}
.guideGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
.guideCard{background:#080e1a;border:1px solid #263348;border-radius:18px;padding:18px}
.guideCard ul{margin:8px 0 0;padding-left:20px;color:#aebdd5}.guideCard li{margin:6px 0}
.toolbar{background:linear-gradient(145deg,rgba(16,24,39,.96),rgba(11,18,32,.96))}
.card{box-shadow:0 12px 30px rgba(0,0,0,.20)}
@media(max-width:1000px){.tabs{width:100%;display:grid;grid-template-columns:repeat(2,1fr)}.guideGrid{grid-template-columns:1fr}.toolbar{gap:10px}}


/* Alpha 2.4.2 Precision Fix */
.modeBox{transition:all .2s ease}
.scoreNum{
 font-size:10px !important;
 min-width:30px;
 line-height:1.05;
 padding:2px 6px !important;
 display:inline-block;
 text-align:center;
 vertical-align:middle;
 position:relative;
 top:-1px;
}
.metric b{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:6px;
 font-size:14px;
}
.explain{
 margin-top:10px;
 padding:10px 12px;
 border-radius:14px;
 background:rgba(10,18,30,.82);
 border:1px solid #22334f;
 color:#c7d6ec;
 font-size:12px;
 line-height:1.45;
}
.actions{margin-top:10px}
.proExplain{
    margin-top:10px;
    padding:10px 14px;
    border-radius:14px;
    background:rgba(255,255,255,0.025);
    border:1px solid rgba(255,255,255,0.04);

    font-size:11.5px !important;
    line-height:1.42 !important;
    font-weight:400 !important;
    color:#a9bdd3 !important;

    letter-spacing:0.15px;
}


/* Alpha 3.0 Public Beta Stable */
.hidden{display:none!important}
.guestCustomizeNote{
  grid-column:1 / -1;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(110,160,255,.35);
  background:rgba(35,75,140,.16);
  color:#cfe0ff;
  font-weight:800;
}
.feedbackLink{
  color:#8ab4ff;
  text-decoration:none;
  font-weight:900;
}
.feedbackLink:hover{text-decoration:underline}
.proExplain{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.05);
  font-size:12px !important;
  line-height:1.35 !important;
  font-weight:400 !important;
  color:#9fb3c8 !important;
  letter-spacing:0.1px;
}
.scoreNum{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:26px!important;
  height:18px!important;
  padding:0 6px!important;
  margin-left:6px!important;
  border-radius:999px!important;
  font-size:10px!important;
  line-height:18px!important;
}
@media(max-width:760px){
  .topActions{
    display:grid!important;
    grid-template-columns:1fr 1fr;
    gap:10px;
    width:100%;
  }
  .topActions .pill{grid-column:1/-1;text-align:center}
  .topActions button,.topActions .ghost,.topActions .danger{width:100%}
  .today{gap:12px}
  .modeBox{
    padding:14px!important;
  }
  .modeBox span{
    display:block;
    margin-bottom:8px;
    font-size:13px;
    color:#9fb0ca;
    text-transform:uppercase;
    letter-spacing:.08em;
  }
  .modeBox button{
    padding:10px 14px!important;
    margin:4px!important;
  }
  .toolbar{
    grid-template-columns:1fr!important;
    padding:14px!important;
  }
  .cards{
    gap:12px!important;
  }
  .card{
    padding:14px!important;
  }
}


/* Alpha 3.1 Safe Upgrade */
.hero{padding-top:22px!important;padding-bottom:22px!important}
.hero h1{margin-bottom:8px!important}
.topActions .ghost#loginOpen{border-color:rgba(110,160,255,.65)!important;box-shadow:0 0 0 1px rgba(110,160,255,.18),0 0 22px rgba(110,160,255,.10)!important}
#refreshAll:disabled{opacity:.85;cursor:wait}
.today{gap:12px!important}
#todayPlan{line-height:1.42!important}
.modeBox{padding-top:12px!important;padding-bottom:12px!important;min-height:auto!important}
.modeBox button{padding-top:9px!important;padding-bottom:9px!important}
.proExplain{font-size:11.8px!important;line-height:1.34!important}
.guideCard p,.guideCard li{font-size:14px}
@media(max-width:760px){
  .hero{padding-top:18px!important;padding-bottom:18px!important}
  .hero h1{font-size:36px!important;line-height:1.02!important}
  .hero p{font-size:16px!important;line-height:1.35!important}
  .publicBanner{font-size:14px!important;line-height:1.3!important;padding:12px!important}
  .today h2{margin-bottom:6px!important}
  #todayPlan{font-size:15px!important;line-height:1.35!important}
  .modeBox{padding:12px!important}
}

/* ----------------------------------------------------------------------
 * Additional styles for version 4.0.1 enhancements
 *
 * incomeHeader – styles the section headings for Cash‑Secured Puts and
 *                Covered Calls in the Income tab.  A subtle border and
 *                spacing help separate the sections visually.
 * classTag     – used on each signal card to display classification tags
 *                such as Buy, Hold, Sell, Stale or Income beneath the price.
 * req          – optional utility to highlight required fields (unused but
 *                reserved for future enhancements).
 */
.incomeHeader{
  margin-top:20px;
  padding-top:10px;
  border-top:1px solid #263348;
  font-size:22px;
  margin-bottom:8px;
}
.classTag{
  display:block;
  font-size:12px;
  color:#9fb0ca;
  margin-top:4px;
}
.req{
  color:#ff9a9a;
}


/* Alpha 3.2 Patch-Only Trust + Logic Polish */
.hero #publicBanner{display:none!important}
.sigMixed{background:#263244;color:#c8d2df}
.todayHeader{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.todayHeader h2{margin:0!important}
.todayHeader .riskBadge{float:none!important;white-space:nowrap}
.updatedLine{font-size:12px;color:#8fa3bd}
#todayPlan{line-height:1.31!important}
.kpiGrid{gap:8px!important}
.kpi{padding:10px!important}
.kpi small{font-size:11px!important}
.kpi b{font-size:22px!important}
.kpiHelper{
  margin:-6px 0 14px;
  color:#7f92ad;
  font-size:12px;
  line-height:1.3;
}
.miniNote{font-size:12px;color:#8fa3bd;margin-top:8px}
.hero{padding-top:18px!important;padding-bottom:18px!important}
.hero h1{margin-top:6px!important;margin-bottom:6px!important}
.hero p{margin-bottom:6px!important}
.modeBox{padding-top:10px!important;padding-bottom:10px!important}
.modeBox button{padding-top:8px!important;padding-bottom:8px!important}
.metric small{white-space:normal}
.topActions .ghost#loginOpen{
  border-color:rgba(110,160,255,.85)!important;
  box-shadow:0 0 0 1px rgba(110,160,255,.24),0 0 24px rgba(110,160,255,.15)!important;
}
@media(max-width:760px){
  .hero{padding-top:14px!important;padding-bottom:14px!important}
  .hero h1{font-size:34px!important}
  .todayHeader{align-items:flex-start}
  .todayHeader .riskBadge{font-size:12px;padding:7px 10px}
  .kpiGrid{grid-template-columns:repeat(5,1fr)!important;gap:6px!important}
  .kpi{padding:8px 5px!important;text-align:center}
  .kpi small{font-size:9.5px!important}
  .kpi b{font-size:18px!important}
  .kpiHelper{font-size:11px}
  #todayPlan{font-size:14px!important;line-height:1.31!important}
}


/* Alpha 3.2.1 Stability Patch */
.bar.sigBuy span{background:#35d07f!important}
.bar.sigHold span{background:#d8b400!important}
.bar.sigSell span{background:#ff5a5a!important}
.bar.sigMixed span{background:#7d8795!important}
.actions .mini{min-width:88px}
/* Batch B CSS Patch */

/* Compact View Mode row */
.modeBox{
  padding:10px 14px !important;
  min-height:auto !important;
}
.modeBox span{
  display:inline-block !important;
  margin-right:10px !important;
  margin-bottom:0 !important;
  font-size:12px !important;
  letter-spacing:.08em;
  color:#8fa3bd;
  text-transform:uppercase;
}
.modeBox button{
  padding:8px 14px !important;
  margin:0 6px 0 0 !important;
  min-width:88px;
}

/* Active selected mode */
.modeActive{
  background:linear-gradient(135deg,#4f7df3,#6f9cff) !important;
  border:1px solid #78a4ff !important;
  color:#fff !important;
  box-shadow:0 8px 22px rgba(79,125,243,.28);
}

/* Put toggle colors */
.putOn{
  background:#163922 !important;
  border:1px solid #2d9b57 !important;
  color:#77f0a4 !important;
}
.putOff{
  background:#2a1c12 !important;
  border:1px solid #8e6a2b !important;
  color:#ffd27a !important;
}

/* Covered call toggle colors */
.callOn{
  background:#372860 !important;
  border:1px solid #7f4fc9 !important;
  color:#d2b8ff !important;
}
.callOff{
  background:#1f223d !important;
  border:1px solid #5f6fa6 !important;
  color:#9aaef0 !important;
}

/* Mobile tighter */
@media(max-width:760px){
  .modeBox{
    display:flex !important;
    align-items:center;
    gap:8px;
    flex-wrap:nowrap;
    overflow-x:auto;
  }
  .modeBox button{
    min-width:82px;
    flex:0 0 auto;
  }
}
/* Signal score bar colors */
.sigBuy .scoreFill{
  background:#61e39a !important;
}

.sigHold .scoreFill{
  background:#f2c94c !important;
}

.sigSell .scoreFill{
  background:#ff6b6b !important;
}

.sigMixed .scoreFill{
  background:#8b93a7 !important;
}
/* View Mode final polish */
.modeBox{
  margin-top:8px !important;
  margin-bottom:10px !important;
  padding:10px 14px !important;
}

.modeBox span{
  min-width:92px;
}

.kpiHelper{
  margin-bottom:6px !important;
}

/*
  Investing education cards and age selector styles.  The ageBox now
  displays both a range slider and a numeric input side‑by‑side.  The
  slider grows to fill the available space, while the number input has
  a fixed width for consistency.  Education cards present ETF details
  in a simple grid; they reuse dark backgrounds and subtle borders to
  match the existing aesthetic.  On smaller screens the grid stacks
  into a single column for readability.
*/
.ageBox{
  display:flex;
  align-items:center;
  gap:14px;
}
#ageSlider{
  flex:1;
}
#ageInput{
  width:70px;
  background:#080e1a;
  border:1px solid #2a364d;
  color:#fff;
  border-radius:14px;
  padding:10px;
  font-size:15px;
}
.investCards{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}
@media(max-width:760px){
  .investCards{
    grid-template-columns:1fr;
  }
}
.investCard{
  background:#080e1a;
  border:1px solid #263348;
  border-radius:18px;
  padding:16px;
}
.investCard h4{
  margin:0 0 8px;
  font-size:20px;
  color:#cfe0ff;
}
.investCard p{
  margin:4px 0;
  font-size:13px;
  line-height:1.4;
  color:#9fb0ca;
}
.investCard b{
  color:#cfe0ff;
}

/* v4.0.1 security patch: clearer logged-in greeting near Logout */
.userPill{
  border-color:#2b5d9d!important;
  background:#0b1830!important;
  color:#a8c9ff!important;
  font-weight:900!important;
}

/* v4.0.1 combined testing patch: news categories, tooltips and S/R zones */
.newsNav{margin:12px 0 16px}
.newsSections{display:grid;gap:18px}
.newsSection{scroll-margin-top:18px}
.srMetric{grid-column:span 2}
.srMetric span{display:block;line-height:1.55;font-size:12px;color:#d7e2f7;margin-top:5px}
.metric small[title]{cursor:help}
@media(max-width:1000px){.srMetric{grid-column:span 1}}


/* SR mobile/desktop polish: setup + support + resistance stay in one row */
.srMetric .miniNote{font-size:11px}
.srRow{display:flex;align-items:baseline;gap:4px;line-height:1.28;margin:2px 0;flex-wrap:wrap}
.srRow b{display:inline!important;font-size:14px!important;min-width:20px;color:#fff}
.srRow span{font-weight:800;color:#fff;font-size:13px}
.srRow em{font-style:normal;color:#9fc2ff;font-size:11px;font-weight:600}
.tipLabel{display:block}
.tipWrap{position:relative;display:inline-flex;align-items:center}
.tipBtn{background:transparent!important;border:0!important;color:#b8ccff!important;padding:0 0 0 2px!important;margin:0!important;font-size:11px!important;line-height:1!important;min-width:auto!important;height:auto!important}
.tipPopup{display:none;position:absolute;left:0;top:18px;z-index:50;min-width:190px;max-width:260px;background:#0b1324;border:1px solid #2b3954;border-radius:10px;padding:8px 10px;color:#dbe7ff;font-size:12px;line-height:1.35;text-transform:none;letter-spacing:0;box-shadow:0 14px 30px rgba(0,0,0,.4)}
.tipWrap:hover .tipPopup{display:block}
.tipPopup.show{display:block}
@media(max-width:760px){
  .metrics{grid-template-columns:repeat(3,1fr)!important;gap:8px!important}
  .metric{padding:9px!important;min-width:0}
  .srRow{gap:3px}
  .srRow b{font-size:13px!important;min-width:18px}
  .srRow span{font-size:12.5px}
  .srRow em{font-size:10.5px}
  .tipPopup{left:auto;right:0;top:20px;max-width:220px}
}


/* v4.0.1 SR layout correction: Setup + Support + Resistance in same row, no sticky tooltip popups */
.metrics{grid-template-columns:repeat(3,1fr)!important}
.srMetric{grid-column:span 1!important}
.srMetric > span{display:block;line-height:1.34;font-size:12px;color:#d7e2f7;margin-top:6px}
.tipLabel{display:block;cursor:help;white-space:normal}
.tipWrap,.tipBtn,.tipPopup{display:none!important}
.srRow{display:flex;align-items:baseline;gap:5px;line-height:1.28;margin:2px 0;flex-wrap:wrap}
.srRow b{display:inline!important;font-size:14px!important;min-width:20px;color:#fff}
.srRow span{display:inline!important;margin:0!important;font-weight:800;color:#fff;font-size:13px;line-height:1.28}
.srRow em{font-style:normal;color:#9fc2ff;font-size:11px;font-weight:600}
@media(max-width:760px){
  .metrics{grid-template-columns:repeat(3,1fr)!important;gap:8px!important}
  .metric{padding:9px!important;min-width:0}
  .srMetric{grid-column:span 1!important}
  .srMetric > span{font-size:11.5px;line-height:1.28}
  .srRow{gap:3px;margin:2px 0}
  .srRow b{font-size:13px!important;min-width:18px}
  .srRow span{font-size:11.5px;line-height:1.25}
  .srRow em{font-size:10px}
}


/* v4.0.1 compact S/R rows: keep each S/R level on one line with S/M/W confidence codes */
.srMetric > span{display:block!important;margin-top:5px!important;line-height:1.2!important}
.srRow{display:grid!important;grid-template-columns:24px minmax(0,1fr) 18px!important;align-items:baseline!important;column-gap:4px!important;margin:1px 0!important;line-height:1.2!important;white-space:nowrap!important;overflow:hidden!important}
.srRow b{font-size:13px!important;min-width:0!important;color:#ffffff!important;line-height:1.2!important}
.srRow span{display:block!important;margin:0!important;overflow:hidden!important;text-overflow:clip!important;white-space:nowrap!important;font-size:12.5px!important;font-weight:900!important;color:#ffffff!important;line-height:1.2!important}
.srRow em{font-style:normal!important;color:#9fc2ff!important;font-size:11px!important;font-weight:900!important;line-height:1.2!important;text-align:right!important}
@media(max-width:760px){
  .srRow{grid-template-columns:22px minmax(0,1fr) 16px!important;column-gap:3px!important;margin:1px 0!important}
  .srRow b{font-size:12px!important}
  .srRow span{font-size:11.2px!important}
  .srRow em{font-size:10px!important}
}

/* S/R compact no-cut patch: fit three rows inside Support/Resistance metric boxes */
.srMetric{overflow:hidden!important}
.srMetric > span{display:block!important;margin-top:4px!important;line-height:1.08!important;overflow:hidden!important}
.srRow{
  display:grid!important;
  grid-template-columns:18px minmax(0,1fr) 11px!important;
  align-items:center!important;
  column-gap:2px!important;
  margin:0!important;
  line-height:1.08!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  width:100%!important;
}
.srRow b{
  display:block!important;
  font-size:11px!important;
  line-height:1.08!important;
  min-width:0!important;
  font-weight:900!important;
}
.srRow span{
  display:block!important;
  margin:0!important;
  overflow:hidden!important;
  text-overflow:clip!important;
  white-space:nowrap!important;
  font-family:"Arial Narrow",Arial,sans-serif!important;
  font-size:11px!important;
  line-height:1.08!important;
  font-weight:900!important;
  letter-spacing:-.35px!important;
}
.srRow em{
  display:block!important;
  font-style:normal!important;
  font-size:9.5px!important;
  line-height:1.08!important;
  font-weight:900!important;
  text-align:right!important;
  color:#9fc2ff!important;
}
@media(max-width:760px){
  .srMetric{padding:8px!important}
  .srRow{grid-template-columns:17px minmax(0,1fr) 10px!important;column-gap:1px!important}
  .srRow b{font-size:10.5px!important}
  .srRow span{font-size:10.4px!important;letter-spacing:-.45px!important}
  .srRow em{font-size:9px!important}
}

/* Final UX Patch — mobile real-estate and text cleanup */
.compactHead{align-items:center!important}
.incomeFooter,.leapsFooter,.newsFooter{margin-top:16px;color:#8fa3bd}
.signalsToolbar{margin-top:12px!important;margin-bottom:14px!important}
#profileGate{display:grid;gap:10px;justify-items:start}
#profileGate p{margin:0;color:#9fb0ca}

@media(max-width:760px){
  /* Header actions: market status full row, three compact buttons below */
  .topActions{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
  }
  .topActions #marketStatus{grid-column:1/-1!important;text-align:center!important}
  .topActions #refreshAll,.topActions #stopRefresh,.topActions #loginOpen,.topActions #userMenu{
    width:100%!important;
    padding:10px 8px!important;
    font-size:12px!important;
    text-align:center!important;
  }
  .topActions #logoutBtn{display:none!important}

  /* Mobile tabs: one horizontal swipe row */
  .tabs{
    width:100%!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    gap:8px!important;
    padding:6px!important;
    -webkit-overflow-scrolling:touch!important;
    scroll-snap-type:x proximity!important;
  }
  .tabs .tab{
    flex:0 0 auto!important;
    white-space:nowrap!important;
    padding:10px 13px!important;
    font-size:13px!important;
    scroll-snap-align:start!important;
  }

  /* Signals quick dashboard: Market/SPY/QQQ in one compact row */
  .commandGrid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
    margin-bottom:10px!important;
  }
  .cmd{
    padding:9px 5px!important;
    text-align:center!important;
    min-width:0!important;
  }
  .cmd small{font-size:9px!important;letter-spacing:.04em!important}
  .cmd b{font-size:13px!important;line-height:1.15!important;word-break:break-word!important}

  /* Toolbar moved below View Mode: compact mobile form */
  .signalsToolbar{
    padding:10px!important;
    gap:8px!important;
    margin-top:10px!important;
    margin-bottom:12px!important;
  }
  .signalsToolbar input,.signalsToolbar select,.signalsToolbar button,.signalsToolbar .check{
    padding:10px!important;
    font-size:13px!important;
  }
  .guestCustomizeNote{font-size:13px!important;padding:10px 12px!important}

  .compactHead{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
  }
  .compactHead h2{font-size:21px!important;margin:0!important;line-height:1.1!important}
  .compactHead .headBtns{flex-shrink:0!important}
  .compactHead button{padding:9px 10px!important;font-size:12px!important;white-space:nowrap!important}

  .newsNav{padding:10px!important}
  .newsNav button{font-size:12px!important;padding:8px 10px!important}
}

/* Final UX mobile hotfix: show Logout instead of greeting on logged-in mobile + fix profile overflow */
@media(max-width:760px){
  /* Logged-in mobile header should stay 3 buttons: Refresh | Stop | Logout */
  .topActions #userMenu{
    display:none!important;
  }
  .topActions #logoutBtn:not(.hidden){
    display:block!important;
    width:100%!important;
    padding:10px 8px!important;
    font-size:12px!important;
    text-align:center!important;
  }

  /* Prevent profile/auth content from stretching wider than the viewport */
  html,body{max-width:100%;overflow-x:hidden!important}
  main,.panel,#profile,#profileShell,#profileGate{
    max-width:100%!important;
    overflow-x:hidden!important;
  }
  .profileGrid{
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
    padding:16px!important;
    gap:12px!important;
  }
  .profileGrid label{
    min-width:0!important;
    width:100%!important;
  }
  .profileGrid input,
  .profileGrid button,
  .profileGrid .saveBtn{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .profileGrid .saveBtn{
    grid-column:1!important;
  }
  .dangerZone,
  #deleteAccountBtn{
    max-width:100%!important;
    width:100%!important;
    overflow:hidden!important;
  }

  /* Auth modal should also avoid horizontal overflow on iPhone Safari/Chrome */
  .modalCard{
    width:100%!important;
    max-width:calc(100vw - 24px)!important;
    padding:18px!important;
    overflow-x:hidden!important;
  }
  .authGrid{
    grid-template-columns:1fr!important;
    width:100%!important;
    overflow:hidden!important;
  }
  .authGrid form,
  .authGrid input,
  .authGrid button,
  .featureGrid,
  .featureGrid div{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
}

/* Guest preview lock labels */
.lockedTab{opacity:.86}
.lockedTab::after{content:''}
@media(max-width:760px){
  .lockedTab{white-space:nowrap}
}


/* --------------------------------------------------------------------------
   UI Style Toggle Patch v4.0.2
   Visual-only Classic / Modern toggle. Existing Classic styling remains default.
   -------------------------------------------------------------------------- */
.marketStatusWrap{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
}
.marketStatusWrap #marketStatus{
  min-width:max-content;
}
.uiThemeToggle{
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:999px!important;
  background:#121b2c!important;
  border:1px solid #2b3954!important;
  color:#bcd2ff!important;
  box-shadow:none!important;
  line-height:1!important;
  font-size:17px!important;
}
.uiThemeToggle:hover{
  transform:translateY(-1px);
  border-color:#6ea0ff!important;
  color:#ffffff!important;
}
.uiThemeToggle[data-mode="modern"]{
  background:linear-gradient(135deg,#4f7df3,#7c5cff)!important;
  border-color:rgba(255,255,255,.25)!important;
  color:#ffffff!important;
}

body.ui-modern{
  background:radial-gradient(circle at top left,rgba(79,125,243,.22),transparent 32%),
             radial-gradient(circle at 90% 10%,rgba(124,92,255,.16),transparent 26%),
             #070b14!important;
}
body.ui-modern .hero{
  background:linear-gradient(135deg,rgba(18,28,50,.98),rgba(7,17,31,.96))!important;
  border-bottom:1px solid rgba(110,160,255,.22)!important;
  box-shadow:0 14px 42px rgba(0,0,0,.24)!important;
}
body.ui-modern .brand{
  color:#8fb4ff!important;
}
body.ui-modern .pill,
body.ui-modern .userPill{
  background:rgba(255,255,255,.055)!important;
  border:1px solid rgba(155,184,255,.22)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
}
body.ui-modern button,
body.ui-modern .ghost,
body.ui-modern .tab{
  border-radius:14px!important;
}
body.ui-modern .ghost,
body.ui-modern .tab{
  background:rgba(255,255,255,.055)!important;
  border:1px solid rgba(155,184,255,.18)!important;
}
body.ui-modern .tab.active,
body.ui-modern #refreshAll,
body.ui-modern .saveBtn,
body.ui-modern .addBtn{
  background:linear-gradient(135deg,#4f7df3,#6d5dfc)!important;
  box-shadow:0 10px 24px rgba(79,125,243,.20)!important;
}
body.ui-modern .today>div,
body.ui-modern .modeBox,
body.ui-modern .toolbar,
body.ui-modern .chartBox,
body.ui-modern .guide,
body.ui-modern .sectionHead,
body.ui-modern .ageBox,
body.ui-modern .investModel,
body.ui-modern .gate,
body.ui-modern .cmd,
body.ui-modern .kpi,
body.ui-modern .card,
body.ui-modern .incomeCard,
body.ui-modern .profileGrid{
  background:linear-gradient(180deg,rgba(18,28,47,.94),rgba(10,17,31,.94))!important;
  border:1px solid rgba(155,184,255,.16)!important;
  border-radius:24px!important;
  box-shadow:0 16px 40px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04)!important;
}
body.ui-modern .card:hover,
body.ui-modern .incomeCard:hover,
body.ui-modern .cmd:hover,
body.ui-modern .kpi:hover{
  transform:translateY(-2px);
  border-color:rgba(155,184,255,.30)!important;
  box-shadow:0 20px 48px rgba(0,0,0,.28),0 0 0 1px rgba(110,160,255,.08)!important;
}
body.ui-modern .metric,
body.ui-modern .alloc,
body.ui-modern .check,
body.ui-modern input,
body.ui-modern select{
  background:rgba(5,10,20,.72)!important;
  border:1px solid rgba(155,184,255,.15)!important;
  border-radius:15px!important;
}
body.ui-modern .badge,
body.ui-modern .riskBadge,
body.ui-modern .leapTag{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
}
body.ui-modern .symbol{
  letter-spacing:-.03em!important;
}
body.ui-modern .price{
  letter-spacing:-.02em!important;
}
body.ui-modern .scoreBar{
  background:rgba(255,255,255,.10)!important;
}
body.ui-modern .scoreFill{
  box-shadow:0 0 18px rgba(97,215,142,.32)!important;
}

@media(max-width:760px){
  .topActions .marketStatusWrap{
    grid-column:1/-1!important;
    width:100%!important;
    justify-content:center!important;
  }
  .marketStatusWrap #marketStatus{
    flex:1 1 auto!important;
    text-align:center!important;
  }
  .uiThemeToggle{
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
  }
}

/* Keep theme toggle compact even under mobile header button rules. */
.topActions .uiThemeToggle{
  width:42px!important;
  min-width:42px!important;
  max-width:42px!important;
  flex:0 0 42px!important;
}
@media(max-width:760px){
  .topActions .uiThemeToggle{
    width:40px!important;
    min-width:40px!important;
    max-width:40px!important;
    flex:0 0 40px!important;
  }
}

/* --------------------------------------------------------------------------
   Modern UI V2 polish — visual-only overrides scoped to body.ui-modern.
   Classic UI remains untouched. No business logic/API behavior is changed.
--------------------------------------------------------------------------- */
body.ui-modern{
  --modern-bg:#070b14;
  --modern-surface:rgba(15,24,42,.92);
  --modern-surface-2:rgba(8,14,26,.92);
  --modern-line:rgba(148,170,220,.20);
  --modern-text:#edf4ff;
  --modern-muted:#9fb1cf;
  --modern-blue:#5d8cff;
  --modern-purple:#8c6dff;
  --modern-green:#35d07f;
  --modern-green-bg:rgba(20,95,57,.42);
  --modern-amber:#f5c94a;
  --modern-amber-bg:rgba(116,86,18,.44);
  --modern-red:#ff6f7d;
  --modern-red-bg:rgba(116,31,39,.46);
  --modern-watch:#b48cff;
  --modern-watch-bg:rgba(92,64,166,.42);
  --modern-neutral:#b8c3d6;
  --modern-neutral-bg:rgba(91,104,128,.36);
  color:var(--modern-text)!important;
  background:
    radial-gradient(circle at 16% 0%,rgba(93,140,255,.18),transparent 30%),
    radial-gradient(circle at 86% 4%,rgba(140,109,255,.16),transparent 28%),
    linear-gradient(180deg,#08101d 0%,#070b14 40%,#060a12 100%)!important;
}

/* Market/status row */
body.ui-modern .marketStatusWrap{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  padding:5px!important;
  border:1px solid rgba(148,170,220,.20)!important;
  border-radius:999px!important;
  background:rgba(8,14,26,.58)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 14px 32px rgba(0,0,0,.20)!important;
}
body.ui-modern #marketStatus,
body.ui-modern .pill#marketStatus{
  background:linear-gradient(135deg,rgba(30,44,74,.96),rgba(13,22,40,.96))!important;
  border:1px solid rgba(155,184,255,.26)!important;
  color:#dbe8ff!important;
  font-weight:950!important;
  letter-spacing:.01em!important;
  padding:10px 15px!important;
  border-radius:999px!important;
}
body.ui-modern .uiThemeToggle{
  background:linear-gradient(135deg,var(--modern-blue),var(--modern-purple))!important;
  border:1px solid rgba(255,255,255,.28)!important;
  box-shadow:0 10px 24px rgba(93,140,255,.26)!important;
}
body.ui-modern .uiThemeToggle:hover{
  box-shadow:0 14px 30px rgba(140,109,255,.32)!important;
}

/* Command cards: Market / SPY / QQQ with clear color lanes */
body.ui-modern .commandGrid{
  gap:14px!important;
}
body.ui-modern .cmd{
  position:relative!important;
  overflow:hidden!important;
  min-height:86px!important;
  border-radius:22px!important;
  backdrop-filter:blur(8px)!important;
}
body.ui-modern .cmd:before,
body.ui-modern .kpi:before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:5px;
  opacity:.95;
}
body.ui-modern .cmd small,
body.ui-modern .kpi small{
  color:var(--modern-muted)!important;
  font-size:11px!important;
  letter-spacing:.12em!important;
}
body.ui-modern .cmd b,
body.ui-modern .kpi b{
  color:#fff!important;
  letter-spacing:-.02em!important;
}
body.ui-modern .cmd.buyBlock,
body.ui-modern .kpi.buy{
  background:linear-gradient(135deg,var(--modern-green-bg),rgba(8,18,28,.94))!important;
  border-color:rgba(53,208,127,.42)!important;
  box-shadow:0 16px 36px rgba(53,208,127,.08),inset 0 1px 0 rgba(255,255,255,.05)!important;
}
body.ui-modern .cmd.buyBlock:before,
body.ui-modern .kpi.buy:before{background:var(--modern-green)}
body.ui-modern .cmd.holdBlock,
body.ui-modern .kpi.hold{
  background:linear-gradient(135deg,var(--modern-amber-bg),rgba(18,16,10,.94))!important;
  border-color:rgba(245,201,74,.42)!important;
  box-shadow:0 16px 36px rgba(245,201,74,.08),inset 0 1px 0 rgba(255,255,255,.05)!important;
}
body.ui-modern .cmd.holdBlock:before,
body.ui-modern .kpi.hold:before{background:var(--modern-amber)}
body.ui-modern .cmd.redBlock,
body.ui-modern .kpi.sell{
  background:linear-gradient(135deg,var(--modern-red-bg),rgba(23,10,13,.94))!important;
  border-color:rgba(255,111,125,.42)!important;
  box-shadow:0 16px 36px rgba(255,111,125,.08),inset 0 1px 0 rgba(255,255,255,.05)!important;
}
body.ui-modern .cmd.redBlock:before,
body.ui-modern .kpi.sell:before{background:var(--modern-red)}
body.ui-modern .kpi.stale{
  background:linear-gradient(135deg,var(--modern-neutral-bg),rgba(11,17,28,.94))!important;
  border-color:rgba(184,195,214,.28)!important;
}
body.ui-modern .kpi.stale:before{background:var(--modern-neutral)}
body.ui-modern .kpi.income{
  background:linear-gradient(135deg,var(--modern-watch-bg),rgba(12,16,35,.94))!important;
  border-color:rgba(180,140,255,.36)!important;
}
body.ui-modern .kpi.income:before{background:var(--modern-watch)}
body.ui-modern .riskBadge{
  background:linear-gradient(135deg,var(--modern-green-bg),rgba(8,18,28,.96))!important;
  border-color:rgba(53,208,127,.40)!important;
  color:#8df5b9!important;
  box-shadow:0 10px 22px rgba(53,208,127,.10)!important;
}

/* View mode / segmented controls */
body.ui-modern .modeBox{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  flex-wrap:wrap!important;
  padding:12px!important;
  background:rgba(9,15,28,.78)!important;
  border-radius:999px!important;
}
body.ui-modern .modeBox span{
  min-width:auto!important;
  padding:0 7px 0 2px!important;
  color:#aebddb!important;
  font-size:11px!important;
}
body.ui-modern .modeBox button,
body.ui-modern .ghost,
body.ui-modern #cspScrollBtn,
body.ui-modern #ccScrollBtn,
body.ui-modern #incomeSimpleBtn,
body.ui-modern #incomeProBtn,
body.ui-modern #simpleBtn,
body.ui-modern #proBtn,
body.ui-modern #leapsBtn{
  border-radius:999px!important;
  border:1px solid rgba(148,170,220,.22)!important;
  background:rgba(255,255,255,.055)!important;
  color:#d9e5ff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease!important;
}
body.ui-modern .modeBox button:hover,
body.ui-modern .ghost:hover{
  transform:translateY(-1px)!important;
  border-color:rgba(155,184,255,.45)!important;
}
body.ui-modern .modeActive,
body.ui-modern .tab.active{
  background:linear-gradient(135deg,var(--modern-blue),var(--modern-purple))!important;
  border-color:rgba(255,255,255,.32)!important;
  color:#fff!important;
  box-shadow:0 12px 28px rgba(93,140,255,.28)!important;
}
body.ui-modern .tab{
  border-radius:999px!important;
  padding:12px 17px!important;
}

/* Buttons */
body.ui-modern #refreshAll,
body.ui-modern .addBtn,
body.ui-modern .saveBtn,
body.ui-modern button:not(.uiThemeToggle):not(.danger):not(.ghost):not(.tab):not(.mini){
  border-radius:999px!important;
  background:linear-gradient(135deg,var(--modern-blue),var(--modern-purple))!important;
  box-shadow:0 12px 26px rgba(93,140,255,.22)!important;
}
body.ui-modern .danger,
body.ui-modern #stopRefresh{
  border-radius:999px!important;
  background:linear-gradient(135deg,#ff5f71,#b72b3a)!important;
  border:1px solid rgba(255,148,158,.40)!important;
  color:#fff!important;
  box-shadow:0 12px 26px rgba(255,95,113,.18)!important;
}
body.ui-modern .danger:hover,
body.ui-modern #stopRefresh:hover,
body.ui-modern #refreshAll:hover,
body.ui-modern .mini:hover{
  transform:translateY(-1px)!important;
}
body.ui-modern .mini{
  border-radius:999px!important;
  background:rgba(255,255,255,.06)!important;
  border:1px solid rgba(148,170,220,.20)!important;
  color:#dce8ff!important;
}
body.ui-modern .actions .mini:first-child{
  background:linear-gradient(135deg,var(--modern-blue),#3f6fe5)!important;
  border-color:rgba(255,255,255,.24)!important;
  color:#fff!important;
}
body.ui-modern .putOn{background:linear-gradient(135deg,#17864a,#0d5331)!important;border-color:rgba(53,208,127,.48)!important;color:#b9ffd4!important}
body.ui-modern .putOff{background:rgba(245,201,74,.12)!important;border-color:rgba(245,201,74,.32)!important;color:#ffe39a!important}
body.ui-modern .callOn{background:linear-gradient(135deg,#7047cf,#46308d)!important;border-color:rgba(180,140,255,.52)!important;color:#eadcff!important}
body.ui-modern .callOff{background:rgba(93,140,255,.11)!important;border-color:rgba(93,140,255,.30)!important;color:#c9d9ff!important}

/* Symbol cards / signal cards */
body.ui-modern .cards{
  gap:18px!important;
}
body.ui-modern .card,
body.ui-modern .incomeCard,
body.ui-modern .investCard,
body.ui-modern .guideCard{
  position:relative!important;
  background:linear-gradient(180deg,rgba(17,27,47,.96),rgba(8,14,26,.96))!important;
  border:1px solid rgba(148,170,220,.18)!important;
  border-radius:26px!important;
  box-shadow:0 18px 48px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.045)!important;
}
body.ui-modern .card{
  padding:18px!important;
}
body.ui-modern .card:after,
body.ui-modern .incomeCard:after,
body.ui-modern .investCard:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,.055),transparent 38%);
}
body.ui-modern .cardTop{
  align-items:flex-start!important;
}
body.ui-modern .symbol{
  color:#ffffff!important;
  font-size:29px!important;
  letter-spacing:-.045em!important;
}
body.ui-modern .card small,
body.ui-modern .incomeCard small{
  color:#9fb1cf!important;
}
body.ui-modern .price{
  margin:10px 0 8px!important;
  color:#f7fbff!important;
}
body.ui-modern .classTag{
  color:#b7c7e4!important;
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(148,170,220,.14)!important;
  border-radius:999px!important;
  padding:6px 10px!important;
  display:inline-block!important;
  min-height:28px!important;
}
body.ui-modern .metrics{
  gap:10px!important;
}
body.ui-modern .metric{
  background:rgba(6,11,21,.72)!important;
  border:1px solid rgba(148,170,220,.15)!important;
  border-radius:18px!important;
  padding:11px!important;
}
body.ui-modern .metric small{
  color:#95a7c7!important;
  letter-spacing:.08em!important;
}
body.ui-modern .scoreNum{
  background:rgba(255,255,255,.075)!important;
  border-color:rgba(148,170,220,.22)!important;
  color:#dfeaff!important;
}
body.ui-modern .scoreBar{
  height:7px!important;
  background:rgba(255,255,255,.10)!important;
  border-radius:999px!important;
}
body.ui-modern .scoreFill{
  border-radius:999px!important;
  box-shadow:0 0 16px currentColor!important;
}
body.ui-modern .proExplain{
  background:rgba(7,12,23,.66)!important;
  border:1px solid rgba(148,170,220,.14)!important;
  border-radius:18px!important;
  color:#cddaf2!important;
}

/* Signal / recommendation badges: clear colors for Buy, Hold, Sell/Avoid, Watch, Neutral */
body.ui-modern .badge{
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:999px!important;
  padding:8px 11px!important;
  font-size:11px!important;
  letter-spacing:.02em!important;
}
body.ui-modern .sigBuy{
  background:linear-gradient(135deg,rgba(53,208,127,.28),rgba(18,83,50,.58))!important;
  color:#9ff7c3!important;
  border-color:rgba(53,208,127,.40)!important;
}
body.ui-modern .sigHold{
  background:linear-gradient(135deg,rgba(245,201,74,.28),rgba(116,86,18,.55))!important;
  color:#ffe39a!important;
  border-color:rgba(245,201,74,.40)!important;
}
body.ui-modern .sigSell{
  background:linear-gradient(135deg,rgba(255,111,125,.28),rgba(116,31,39,.58))!important;
  color:#ffb5bd!important;
  border-color:rgba(255,111,125,.42)!important;
}
body.ui-modern .sigMixed,
body.ui-modern .badge:not(.sigBuy):not(.sigHold):not(.sigSell){
  background:linear-gradient(135deg,rgba(180,140,255,.20),rgba(78,62,135,.42))!important;
  color:#dccfff!important;
  border-color:rgba(180,140,255,.32)!important;
}

/* Investing tab */
body.ui-modern .ageBox{
  background:linear-gradient(180deg,rgba(17,27,47,.94),rgba(8,14,26,.94))!important;
  border-radius:24px!important;
  border:1px solid rgba(148,170,220,.18)!important;
}
body.ui-modern #ageInput{
  width:82px!important;
  border-radius:999px!important;
  text-align:center!important;
  background:rgba(6,11,21,.76)!important;
  border-color:rgba(148,170,220,.25)!important;
  color:#fff!important;
}
body.ui-modern #ageSlider{
  accent-color:var(--modern-blue)!important;
}
body.ui-modern #ageSlider::-webkit-slider-runnable-track{
  height:8px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,var(--modern-blue),var(--modern-purple))!important;
}
body.ui-modern #ageSlider::-webkit-slider-thumb{
  width:20px!important;
  height:20px!important;
  border-radius:50%!important;
  background:#fff!important;
  border:3px solid var(--modern-blue)!important;
  box-shadow:0 8px 18px rgba(93,140,255,.28)!important;
  margin-top:-6px!important;
}
body.ui-modern #ageSlider::-moz-range-track{
  height:8px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,var(--modern-blue),var(--modern-purple))!important;
}
body.ui-modern #ageSlider::-moz-range-thumb{
  width:18px!important;
  height:18px!important;
  border-radius:50%!important;
  background:#fff!important;
  border:3px solid var(--modern-blue)!important;
}
body.ui-modern .investModel{
  background:linear-gradient(180deg,rgba(17,27,47,.94),rgba(8,14,26,.94))!important;
}
body.ui-modern .investCard h4{
  color:#ffffff!important;
}
body.ui-modern .investCard p{
  color:#aebddb!important;
}
body.ui-modern .alloc{
  background:rgba(6,11,21,.72)!important;
  border:1px solid rgba(148,170,220,.15)!important;
  border-radius:18px!important;
}

/* Income tab / options tables */
body.ui-modern .incomeHeader{
  margin:18px 0 10px!important;
  color:#ffffff!important;
  letter-spacing:-.02em!important;
}
body.ui-modern .incomeCard{
  padding:18px!important;
}
body.ui-modern .putTable{
  border-collapse:separate!important;
  border-spacing:0!important;
  overflow:hidden!important;
  border-radius:16px!important;
}
body.ui-modern .putTable th{
  background:rgba(93,140,255,.15)!important;
  color:#dce8ff!important;
  border-bottom:1px solid rgba(148,170,220,.18)!important;
  font-size:12px!important;
  text-transform:uppercase!important;
  letter-spacing:.06em!important;
}
body.ui-modern .putTable td{
  background:rgba(6,11,21,.46)!important;
  border-bottom:1px solid rgba(148,170,220,.12)!important;
  color:#edf4ff!important;
}
body.ui-modern .putTable tr:hover td{
  background:rgba(93,140,255,.08)!important;
}
body.ui-modern .miniNote{
  color:#9fb1cf!important;
}

@media(max-width:760px){
  body.ui-modern .marketStatusWrap{
    border-radius:24px!important;
    justify-content:space-between!important;
  }
  body.ui-modern .modeBox{
    border-radius:22px!important;
    flex-wrap:nowrap!important;
  }
  body.ui-modern .modeBox span{
    flex:0 0 auto!important;
  }
  body.ui-modern .symbol{font-size:25px!important;}
}


/* --------------------------------------------------------------------------
   Selected segmented button state fix — Classic + Modern UI
   Visual-only: keeps view/income mode logic unchanged and only makes active
   buttons visibly selected after Simple/Pro toggles are clicked.
---------------------------------------------------------------------------- */
.modeBox button.modeActive,
.modeBox button[aria-current="true"],
#simpleBtn.modeActive,
#proBtn.modeActive,
#incomeSimpleBtn.modeActive,
#incomeProBtn.modeActive{
  background:linear-gradient(135deg,#4f7df3,#7aa2ff)!important;
  border:1px solid #91b4ff!important;
  color:#fff!important;
  box-shadow:0 8px 22px rgba(79,125,243,.34)!important;
}

body.ui-modern .modeBox button.modeActive,
body.ui-modern .modeBox button[aria-current="true"],
body.ui-modern #simpleBtn.modeActive,
body.ui-modern #proBtn.modeActive,
body.ui-modern #incomeSimpleBtn.modeActive,
body.ui-modern #incomeProBtn.modeActive{
  background:linear-gradient(135deg,var(--modern-blue),var(--modern-purple))!important;
  border-color:rgba(255,255,255,.38)!important;
  color:#fff!important;
  box-shadow:0 14px 30px rgba(93,140,255,.32), inset 0 1px 0 rgba(255,255,255,.16)!important;
  transform:translateY(-1px)!important;
}

body.ui-modern .modeBox button.modeActive:hover,
body.ui-modern .modeBox button[aria-current="true"]:hover{
  transform:translateY(-1px)!important;
  box-shadow:0 16px 34px rgba(93,140,255,.38), inset 0 1px 0 rgba(255,255,255,.18)!important;
}


/* --------------------------------------------------------------------------
   v4.0.7 UI/UX batch refinements — scoped, frontend-safe polish
   Applies to Classic and Modern unless explicitly scoped to body.ui-modern.
---------------------------------------------------------------------------- */
.signalsToolbar{
  grid-template-columns:minmax(220px,1.4fr) minmax(220px,1.5fr) auto auto auto!important;
  align-items:center!important;
}
.strategyCheck{
  min-width:78px;
  justify-content:center;
  font-weight:900;
  white-space:nowrap;
}
.symbolModeBox{
  margin-top:0!important;
  margin-bottom:14px!important;
}
.cardMeta{
  display:block;
  line-height:1.35;
  margin-top:2px;
}
.metaStatus,.metaTag{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 7px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  line-height:1.2;
  vertical-align:middle;
}
.metaBuy{background:#123c28;color:#6dffa4;border:1px solid rgba(109,255,164,.25)}
.metaHold{background:#4a3b12;color:#ffd966;border:1px solid rgba(255,217,102,.25)}
.metaSell{background:#4c1616;color:#ff9a9a;border:1px solid rgba(255,154,154,.25)}
.metaWatch{background:#182f5d;color:#a8c9ff;border:1px solid rgba(110,160,255,.28)}
.metaCsp{background:#163922;color:#77f0a4;border:1px solid rgba(45,155,87,.35)}
.metaCc{background:#372860;color:#d2b8ff;border:1px solid rgba(127,79,201,.35)}
.card .classTag{display:none!important}
.actions .mini::before{content:none!important}
.actions .chartMini::before{content:"📈 "!important;font-size:11px}
.actions .refreshMini::before{content:"↻ "!important;font-size:12px}
.actions .cspMini::before,.actions .ccMini::before{content:"💰 "!important;font-size:11px}
.actions .removeMini::before{content:"× "!important;font-size:12px}
.actions .customizeMini::before{content:"⚙ "!important;font-size:11px}
.tipLabel{cursor:help}
.symbolLegendCard,.readingHelpCard{border-color:rgba(110,160,255,.32)!important;background:linear-gradient(145deg,rgba(12,22,42,.96),rgba(8,14,26,.96))!important}

@media(max-width:760px){
  .signalsToolbar{
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  .signalsToolbar .strategyCheck{
    display:inline-flex!important;
    width:calc(50% - 6px)!important;
    min-width:0!important;
    margin:0!important;
  }
  .signalsToolbar .strategyCheck + .strategyCheck{
    margin-left:8px!important;
  }
  .actions{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:6px!important;
    justify-content:stretch!important;
  }
  .actions .mini{
    min-width:0!important;
    width:100%!important;
    padding:8px 6px!important;
    font-size:11px!important;
    white-space:nowrap!important;
  }
  .actions .chartMini{font-size:0!important}
  .actions .chartMini::before{font-size:14px!important;margin:0!important}
  .actions .refreshMini{font-size:0!important}
  .actions .refreshMini::before{content:"⟳"!important;font-size:15px!important;margin:0!important}
  .actions .removeMini{font-size:0!important}
  .actions .removeMini::before{content:"✕"!important;font-size:14px!important;margin:0!important}
  .actions .customizeMini{font-size:11px!important;grid-column:span 3!important}
}

body.ui-modern .metaStatus,body.ui-modern .metaTag{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 7px 14px rgba(0,0,0,.18);
}
body.ui-modern .symbolLegendCard,body.ui-modern .readingHelpCard{
  border-color:rgba(120,160,255,.30)!important;
  box-shadow:0 18px 42px rgba(0,0,0,.22)!important;
}

.guestCustomizeNote.attentionPulse{animation:asiPulse 1.4s ease}
@keyframes asiPulse{0%{box-shadow:0 0 0 0 rgba(110,160,255,.45)}100%{box-shadow:0 0 0 14px rgba(110,160,255,0)}}


/* v4.0.8 mobile UI refinements: tooltips, compact add panel, cleaner card header */
.tipLabel[data-tip]{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:2px!important;
  cursor:help!important;
  outline:none!important;
}
.tipLabel[data-tip]::after{
  content:attr(data-tip);
  display:none;
  position:absolute;
  left:0;
  top:calc(100% + 8px);
  z-index:80;
  width:max-content;
  max-width:230px;
  white-space:normal;
  text-transform:none!important;
  letter-spacing:0!important;
  font-size:12px!important;
  line-height:1.35!important;
  font-weight:700!important;
  color:#eaf1ff!important;
  background:#0b1324!important;
  border:1px solid #304465!important;
  border-radius:10px!important;
  padding:8px 10px!important;
  box-shadow:0 14px 34px rgba(0,0,0,.42)!important;
  pointer-events:none!important;
}
.tipLabel[data-tip]:hover::after,
.tipLabel[data-tip]:focus::after,
.tipLabel[data-tip].tipOpen::after{display:block!important}
.metric:nth-child(3n) .tipLabel[data-tip]::after{left:auto;right:0}

.cardIdentity{min-width:0;display:block}.cardMeta{margin-top:4px;margin-bottom:2px;color:#aebdd5}.cardTop .badge{flex:0 0 auto;text-align:center;max-width:170px;white-space:normal;line-height:1.15}.cardTop{align-items:flex-start}

@media(max-width:760px){
  .signalsToolbar{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(96px,1.25fr)!important;
    gap:8px!important;
    align-items:stretch!important;
  }
  .signalsToolbar #guestCustomizeNote{grid-column:1/-1!important}
  .signalsToolbar #searchBox{grid-column:1/2!important;min-width:0!important;width:100%!important;font-size:13px!important;padding:12px 10px!important}
  .signalsToolbar #symbolInput{grid-column:2/4!important;min-width:0!important;width:100%!important;font-size:13px!important;padding:12px 10px!important}
  .signalsToolbar .strategyCheck{
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:10px 7px!important;
    justify-content:center!important;
    border-radius:14px!important;
    font-size:13px!important;
  }
  .signalsToolbar .strategyCheck + .strategyCheck{margin-left:0!important}
  .signalsToolbar #addSymbol{
    width:100%!important;
    min-width:0!important;
    padding:10px 8px!important;
    border-radius:14px!important;
    white-space:nowrap!important;
  }
  .cardTop{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:8px!important;margin-bottom:2px!important}
  .cardTop .symbol{font-size:27px!important;line-height:1!important}
  .cardTop .badge{max-width:142px!important;padding:6px 8px!important;font-size:10.5px!important;line-height:1.15!important;margin-top:0!important}
  .cardMeta{display:block!important;width:100%!important;line-height:1.3!important;margin-top:0!important;margin-bottom:6px!important;font-size:12px!important}
  .metaStatus,.metaTag{font-size:10.5px!important;padding:2px 6px!important}
  .tipLabel[data-tip]::after{position:fixed!important;left:14px!important;right:14px!important;top:auto!important;bottom:18px!important;width:auto!important;max-width:none!important;text-align:left!important;z-index:999!important}
}

@media(max-width:430px){
  .signalsToolbar{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(86px,1.15fr)!important;gap:7px!important}
  .signalsToolbar #searchBox,.signalsToolbar #symbolInput{font-size:12.5px!important;padding-left:9px!important;padding-right:9px!important}
  .signalsToolbar .strategyCheck{font-size:12px!important;padding-left:5px!important;padding-right:5px!important}
  .signalsToolbar #addSymbol{font-size:12px!important;padding-left:5px!important;padding-right:5px!important}
  .cardTop .badge{max-width:128px!important;font-size:10px!important;padding:6px 7px!important}
}

body.ui-modern .tipLabel[data-tip]::after{background:#071226!important;border-color:rgba(155,184,255,.30)!important;box-shadow:0 18px 38px rgba(0,0,0,.50),0 0 0 1px rgba(110,160,255,.12)!important}
body.ui-modern .cardMeta{color:#c4d5f4!important}


/* v4.0.9: per-symbol-card Simple/Pro quick toggle uses the same global view mode */
.cardMetaRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:2px;
}
.cardMetaRow .cardMeta{
  min-width:0;
  flex:1 1 auto;
}
.cardModeToggle{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:3px;
  border:1px solid rgba(148,163,184,.22);
  border-radius:999px;
  background:rgba(15,23,42,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.cardModeBtn{
  border:0;
  border-radius:999px;
  padding:5px 9px;
  font-size:11px;
  font-weight:800;
  line-height:1;
  color:#9fb1ca;
  background:transparent;
  cursor:pointer;
  white-space:nowrap;
}
.cardModeBtn.active{
  color:#ffffff;
  background:#3b82f6;
  box-shadow:0 6px 16px rgba(59,130,246,.25);
}
.cardModeBtn.locked{
  color:#aab6c8;
}
.cardModeBtn:focus-visible{
  outline:2px solid rgba(96,165,250,.75);
  outline-offset:2px;
}
.ui-modern .cardModeToggle{
  background:rgba(255,255,255,.72);
  border-color:rgba(37,99,235,.18);
  box-shadow:0 8px 22px rgba(15,23,42,.08);
}
.ui-modern .cardModeBtn{
  color:#64748b;
}
.ui-modern .cardModeBtn.active{
  color:#ffffff;
  background:linear-gradient(135deg,#2563eb,#7c3aed);
  box-shadow:0 8px 18px rgba(37,99,235,.28);
}
@media (max-width:760px){
  .cardMetaRow{
    gap:8px;
  }
  .cardModeToggle{
    padding:2px;
  }
  .cardModeBtn{
    padding:5px 7px;
    font-size:10.5px;
  }
}
@media (max-width:390px){
  .cardMetaRow{
    align-items:flex-start;
    flex-direction:column;
    gap:6px;
  }
  .cardModeToggle{
    align-self:flex-end;
  }
}


/* v4.0.10 Modern UI mobile tooltip icon cleanup only
   Keeps Classic UI untouched. Prevents the ⓘ icon from wrapping onto its own line
   in compact Modern symbol-card metric labels such as Resistance and Weekly Momentum. */
@media(max-width:760px){
  body.ui-modern .metric small.tipLabel{
    display:block!important;
    position:relative!important;
    padding-right:13px!important;
    line-height:1.12!important;
    min-height:0!important;
    overflow:visible!important;
  }
  body.ui-modern .metric small.tipLabel .tipText{
    display:inline!important;
  }
  body.ui-modern .metric small.tipLabel .tipIcon{
    position:absolute!important;
    right:0!important;
    top:0!important;
    font-size:10px!important;
    line-height:1!important;
    opacity:.9!important;
  }
  body.ui-modern .scoreTile small.tipLabel{
    display:inline-flex!important;
    padding-right:0!important;
  }
  body.ui-modern .scoreTile small.tipLabel .tipIcon{
    position:static!important;
    font-size:11px!important;
  }
}

/* v4.0.11 final UI alignment + mobile guest/modern toggle fixes
   CSS-only patch. Classic/mobile behavior preserved unless explicitly targeted. */

/* Guest mobile must not show login-only controls; override later mobile display rules. */
.signalsToolbar .loginOnly.hidden,
.signalsToolbar .strategyCheck.loginOnly.hidden,
.signalsToolbar button.loginOnly.hidden,
.signalsToolbar input.loginOnly.hidden{
  display:none!important;
}
@media(max-width:760px){
  .signalsToolbar .loginOnly.hidden,
  .signalsToolbar .strategyCheck.loginOnly.hidden,
  .signalsToolbar button.loginOnly.hidden,
  .signalsToolbar input.loginOnly.hidden{
    display:none!important;
  }
}

/* Desktop width alignment: Today, tabs, Market/SPY/QQQ, KPI, banner and search rows line up. */
@media(min-width:1001px){
  main > .today,
  main > .tabs,
  #signals .commandGrid,
  #signals .kpiGrid,
  #signals .signalsToolbar,
  #signals .symbolModeBox,
  #signals .work{
    width:100%!important;
    max-width:none!important;
  }
  main > .today{
    display:grid!important;
    grid-template-columns:1fr!important;
  }
  main > .today > div{
    width:100%!important;
  }
  main > .tabs{
    display:flex!important;
    width:100%!important;
    max-width:100%!important;
    justify-content:flex-start!important;
  }
  #signals .commandGrid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

/* Modern UI only: make per-card Simple/Pro toggle clearer on dark cards. */
body.ui-modern .cardModeToggle{
  background:rgba(10,18,34,.94)!important;
  border-color:rgba(155,184,255,.30)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 18px rgba(0,0,0,.22)!important;
}
body.ui-modern .cardModeBtn{
  color:#d5e2ff!important;
  text-shadow:none!important;
}
body.ui-modern .cardModeBtn.active{
  color:#ffffff!important;
  background:linear-gradient(135deg,#4f7df3,#7c5cff)!important;
  box-shadow:0 7px 16px rgba(79,125,243,.34)!important;
}
body.ui-modern .cardModeBtn.locked{
  color:#f4d38a!important;
}

/* Modern UI only: keep card action buttons crisp and readable, closer to Classic style. */
body.ui-modern .actions .mini{
  background:rgba(15,27,48,.86)!important;
  border:1px solid rgba(155,184,255,.28)!important;
  color:#ffffff!important;
  box-shadow:none!important;
}
body.ui-modern .actions .mini:hover{
  border-color:rgba(110,160,255,.55)!important;
}

/* v4.0.12 Desktop tooltip cleanup
   Desktop: rely on native browser title tooltip only, so the custom inline tooltip bubble
   does not duplicate/overflow inside symbol cards.
   Mobile/tablet tap tooltip remains unchanged. */
@media (min-width:761px){
  .tipLabel[data-tip]::after,
  .tipLabel[data-tip]:hover::after,
  .tipLabel[data-tip]:focus::after,
  .tipLabel[data-tip].tipOpen::after,
  body.ui-modern .tipLabel[data-tip]::after,
  body.ui-modern .tipLabel[data-tip]:hover::after,
  body.ui-modern .tipLabel[data-tip]:focus::after,
  body.ui-modern .tipLabel[data-tip].tipOpen::after{
    display:none!important;
    content:none!important;
  }
}

/* v4.3.0 Today’s Plan V3.5 Intraday Live Update Layer */
.liveUpdateBox{
  margin-top:14px;
  padding:13px 14px;
  border:1px solid rgba(99,179,237,.35);
  border-radius:16px;
  background:linear-gradient(135deg,rgba(29,78,216,.16),rgba(15,23,42,.72));
  box-shadow:0 12px 34px rgba(0,0,0,.18);
  color:#eaf2ff;
  line-height:1.36;
}
.liveUpdateTitle{
  font-weight:900;
  letter-spacing:.06em;
  font-size:13px;
  color:#facc15;
  margin-bottom:3px;
}
.liveUpdateTime{
  font-size:12px;
  color:#9fc5f8;
  margin-bottom:10px;
}
.liveUpdateGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-bottom:10px;
}
.liveUpdateGrid>div,
.liveUpdateReasons,
.liveUpdateActions{
  padding:10px 11px;
  border-radius:12px;
  background:rgba(2,6,23,.38);
  border:1px solid rgba(148,163,184,.16);
}
.liveUpdateReasons{margin-bottom:10px}
.liveUpdateBox b{color:#fff}
.ui-modern .liveUpdateBox{
  border-color:rgba(125,211,252,.38);
  background:linear-gradient(135deg,rgba(59,130,246,.18),rgba(15,23,42,.78) 58%,rgba(30,41,59,.72));
  box-shadow:0 18px 44px rgba(15,23,42,.28), inset 0 1px 0 rgba(255,255,255,.06);
}
@media(max-width:760px){
  .liveUpdateBox{margin-top:12px;padding:12px;font-size:13.5px;border-radius:14px}
  .liveUpdateGrid{grid-template-columns:1fr;gap:8px}
  .liveUpdateGrid>div,.liveUpdateReasons,.liveUpdateActions{padding:9px 10px}
}


/* v4.3.2 small UI fixes: Income mobile table scroll + guest mobile controls + Buy status tag
   UI-only: no API, DB, signal score, Today's Plan, or refresh logic changes. */
@media(max-width:760px){
  /* Guest users should not see CSP / CC / Add controls on mobile. */
  .signalsToolbar .loginOnly.hidden,
  .signalsToolbar .strategyCheck.loginOnly.hidden,
  .signalsToolbar button.loginOnly.hidden,
  .signalsToolbar input.loginOnly.hidden,
  label.strategyCheck.loginOnly.hidden{
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  /* Income tables are wider than phone screens. Let each card scroll horizontally
     instead of clipping the Status/Cushion columns or forcing page overflow. */
  #income .incomeCard{
    overflow-x:auto!important;
    overflow-y:visible!important;
    -webkit-overflow-scrolling:touch!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }
  #income .putTable{
    min-width:520px!important;
    width:max-content!important;
    max-width:none!important;
    table-layout:auto!important;
  }
  #income .putTable th,
  #income .putTable td{
    white-space:nowrap!important;
    padding:8px 10px!important;
    font-size:13px!important;
  }
  #income .putTable td:nth-child(3){
    white-space:normal!important;
    min-width:96px!important;
  }
  #income .miniNote{
    min-width:520px!important;
    font-size:12.5px!important;
    line-height:1.3!important;
  }
}

@media(max-width:430px){
  #income .putTable{min-width:500px!important;}
  #income .miniNote{min-width:500px!important;}
  #income .putTable th,
  #income .putTable td{padding:7px 9px!important;font-size:12.5px!important;}
}


/* v4.4.0 / Today’s Plan V3.6 Weekly Positioning / Portfolio Playbook
   Frontend-only compact section inside existing Today’s Plan panel. */
.weeklyPlaybookBox{
  margin-top:14px;
  padding:14px;
  border:1px solid rgba(148,163,184,.22);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(15,23,42,.74),rgba(8,14,26,.82));
  box-shadow:0 14px 32px rgba(0,0,0,.16);
  color:#eaf2ff;
}
.playbookHead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:5px;
}
.playbookHead b{font-size:15px;color:#fff}
.playbookHead span{font-size:11.5px;color:#9fb0ca;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.playbookIntro{
  margin:4px 0 12px!important;
  color:#aebdd5!important;
  font-size:13px!important;
  line-height:1.35!important;
}
.playbookGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.playbookCat{
  border:1px solid rgba(148,163,184,.16);
  background:rgba(2,6,23,.38);
  border-radius:14px;
  padding:11px;
  min-width:0;
}
.playbookCat h4{
  margin:0 0 8px;
  color:#dbeafe;
  font-size:13px;
  letter-spacing:.02em;
}
.playbookItem{
  padding:8px 0;
  border-top:1px solid rgba(148,163,184,.12);
}
.playbookItem:first-of-type{border-top:0;padding-top:0}
.playbookItem b{font-size:13px;color:#fff}
.playbookItem p{
  margin:3px 0!important;
  color:#b8c7dd!important;
  font-size:12.5px!important;
  line-height:1.3!important;
}
.playbookItem small{
  color:#8fd3ff;
  font-weight:800;
  font-size:12px;
}
.playbookItem.empty p{margin-bottom:0!important;color:#91a4c0!important}
.playbookBadge{
  display:inline-block;
  margin-left:4px;
  padding:2px 6px;
  border-radius:999px;
  border:1px solid rgba(96,165,250,.25);
  background:rgba(59,130,246,.13);
  color:#bfdbfe;
  font-size:10.5px;
  font-weight:900;
  vertical-align:middle;
}
.playbookGuestNote{
  margin-top:10px;
  padding:9px 10px;
  border-radius:12px;
  border:1px solid rgba(96,165,250,.22);
  background:rgba(59,130,246,.10);
  color:#bfdbfe;
  font-size:12.5px;
  font-weight:800;
}
body.ui-modern .weeklyPlaybookBox{
  border-color:rgba(125,211,252,.30);
  background:linear-gradient(135deg,rgba(30,41,59,.86),rgba(15,23,42,.84) 55%,rgba(2,6,23,.72));
  box-shadow:0 20px 48px rgba(15,23,42,.30), inset 0 1px 0 rgba(255,255,255,.06);
}
body.ui-modern .playbookCat{
  background:rgba(15,23,42,.58);
  border-color:rgba(148,163,184,.20);
}
body.ui-modern .playbookBadge{
  background:rgba(14,165,233,.16);
  border-color:rgba(125,211,252,.25);
  color:#bae6fd;
}
@media(max-width:760px){
  .weeklyPlaybookBox{margin-top:12px;padding:12px;border-radius:15px}
  .playbookHead{align-items:flex-start;flex-direction:column;gap:2px}
  .playbookGrid{grid-template-columns:1fr;gap:9px}
  .playbookCat{padding:10px}
  .playbookIntro{font-size:12.5px!important}
  .playbookItem p{font-size:12.25px!important}
}


/* v4.4.1 Collapse/Expand controls for Today’s Plan and Weekly Playbook */
.todayHeaderRight{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
}
.collapseBtn{
  width:34px;
  height:34px;
  min-width:34px;
  padding:0!important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px!important;
  border:1px solid rgba(148,163,184,.28)!important;
  background:#101827!important;
  color:#dbeafe!important;
  font-size:16px!important;
  line-height:1!important;
  box-shadow:none!important;
  cursor:pointer;
}
.collapseBtn:hover,
.collapseBtn:focus{
  border-color:rgba(96,165,250,.55)!important;
  background:#16233a!important;
  outline:none;
}
.today.todayCollapsed #todayPlan{
  display:none!important;
}
.today.todayCollapsed{
  margin-bottom:12px!important;
}
.weeklyPlaybookBox.collapsed{
  padding:11px 13px!important;
}
.weeklyPlaybookBox.collapsed .playbookBody{
  display:none!important;
}
.playbookTitle{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.playbookHead .weeklyPlaybookToggle{
  margin-left:auto;
}
body.ui-modern .collapseBtn{
  background:rgba(15,23,42,.86)!important;
  border-color:rgba(125,211,252,.28)!important;
  color:#e0f2fe!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
}
body.ui-modern .collapseBtn:hover,
body.ui-modern .collapseBtn:focus{
  background:rgba(30,41,59,.95)!important;
  border-color:rgba(125,211,252,.55)!important;
}
body.ui-modern .weeklyPlaybookBox.collapsed{
  background:linear-gradient(135deg,rgba(30,41,59,.82),rgba(15,23,42,.76))!important;
}
@media(max-width:760px){
  .todayHeaderRight{gap:6px}
  .collapseBtn{width:31px;height:31px;min-width:31px;font-size:15px!important}
  .playbookHead{flex-direction:row!important;align-items:center!important;gap:8px!important}
  .playbookHead b{font-size:13.5px!important}
  .playbookHead span{font-size:10.5px!important}
  .weeklyPlaybookBox.collapsed{margin-top:10px!important;padding:10px 11px!important}
}

/* --------------------------------------------------------------------------
   v4.5.5 Floating Tab Navigation UI Patch — visual-only navigation styling
   Aligns main site tabs, Income/News section nav, and Simple/Pro toggles with
   Admin Recovery floating pill-style quick navigation. No logic changes.
---------------------------------------------------------------------------- */
:root{
  --asi-nav-bg:rgba(8,16,29,.88);
  --asi-nav-border:rgba(99,215,255,.20);
  --asi-nav-pill-bg:#0a1424;
  --asi-nav-pill-border:#263348;
  --asi-nav-pill-text:#cde8ff;
  --asi-nav-active-bg:linear-gradient(135deg,#4f7df3,#6d5dfc);
  --asi-nav-active-shadow:0 12px 28px rgba(79,125,243,.28);
}

main > .tabs,
.modeBox,
.newsNav{
  position:sticky;
  top:8px;
  z-index:18;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  flex-wrap:wrap!important;
  width:100%!important;
  max-width:100%!important;
  margin:12px 0 16px!important;
  padding:10px 12px!important;
  background:var(--asi-nav-bg)!important;
  border:1px solid var(--asi-nav-border)!important;
  border-radius:18px!important;
  box-shadow:0 12px 34px rgba(0,0,0,.24)!important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

main > .tabs{
  justify-content:flex-start!important;
}

.modeBox span,
.newsNav span{
  display:inline-flex!important;
  align-items:center!important;
  min-height:34px!important;
  padding:0 4px!important;
  color:#9fb0ca!important;
  font-size:12px!important;
  font-weight:900!important;
  letter-spacing:.04em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}

main > .tabs .tab,
.modeBox button,
.newsNav button,
.cardModeToggle .cardModeBtn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:999px!important;
  padding:8px 12px!important;
  min-height:34px!important;
  background:var(--asi-nav-pill-bg)!important;
  border:1px solid var(--asi-nav-pill-border)!important;
  color:var(--asi-nav-pill-text)!important;
  font-size:13px!important;
  font-weight:900!important;
  line-height:1.1!important;
  white-space:nowrap!important;
  box-shadow:none!important;
  transition:transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease!important;
}

main > .tabs .tab:hover,
main > .tabs .tab:focus,
.modeBox button:hover,
.modeBox button:focus,
.newsNav button:hover,
.newsNav button:focus,
.cardModeToggle .cardModeBtn:hover,
.cardModeToggle .cardModeBtn:focus{
  transform:translateY(-1px)!important;
  background:rgba(99,215,255,.14)!important;
  border-color:rgba(99,215,255,.36)!important;
  color:#fff!important;
}

main > .tabs .tab.active,
.modeBox button.modeActive,
.modeBox button[aria-current="true"],
#simpleBtn.modeActive,
#proBtn.modeActive,
#incomeSimpleBtn.modeActive,
#incomeProBtn.modeActive,
.cardModeToggle .cardModeBtn.active{
  background:var(--asi-nav-active-bg)!important;
  border-color:rgba(255,255,255,.30)!important;
  color:#fff!important;
  box-shadow:var(--asi-nav-active-shadow)!important;
}

/* Keep per-symbol card Simple/Pro compact, but visually aligned with the same pill family. */
.cardModeToggle{
  display:inline-flex!important;
  align-items:center!important;
  gap:4px!important;
  padding:4px!important;
  border-radius:999px!important;
  background:var(--asi-nav-bg)!important;
  border:1px solid var(--asi-nav-border)!important;
  box-shadow:0 8px 20px rgba(0,0,0,.18)!important;
}
.cardModeToggle .cardModeBtn{
  min-height:28px!important;
  padding:6px 9px!important;
  font-size:11px!important;
}

/* Modern mode keeps the same structure with a slightly more premium glow. */
body.ui-modern main > .tabs,
body.ui-modern .modeBox,
body.ui-modern .newsNav,
body.ui-modern .cardModeToggle{
  background:rgba(9,15,28,.82)!important;
  border-color:rgba(155,184,255,.24)!important;
  box-shadow:0 16px 40px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04)!important;
}
body.ui-modern main > .tabs .tab,
body.ui-modern .modeBox button,
body.ui-modern .newsNav button,
body.ui-modern .cardModeToggle .cardModeBtn{
  background:rgba(10,20,36,.92)!important;
  border-color:rgba(155,184,255,.18)!important;
  color:#d9e5ff!important;
}
body.ui-modern main > .tabs .tab.active,
body.ui-modern .modeBox button.modeActive,
body.ui-modern .modeBox button[aria-current="true"],
body.ui-modern #simpleBtn.modeActive,
body.ui-modern #proBtn.modeActive,
body.ui-modern #incomeSimpleBtn.modeActive,
body.ui-modern #incomeProBtn.modeActive,
body.ui-modern .cardModeToggle .cardModeBtn.active{
  background:linear-gradient(135deg,#4f7df3,#7c5cff)!important;
  border-color:rgba(255,255,255,.36)!important;
  color:#fff!important;
  box-shadow:0 14px 30px rgba(93,140,255,.32), inset 0 1px 0 rgba(255,255,255,.12)!important;
}

/* Desktop: keep major navigation in one elegant floating row when space allows. */
@media(min-width:1001px){
  main > .tabs{
    justify-content:flex-start!important;
  }
  main > .tabs .tab{
    flex:0 0 auto!important;
  }
  #income .modeBox,
  #news .newsNav,
  #signals .symbolModeBox{
    width:100%!important;
  }
}

/* Mobile: no horizontal overflow; buttons wrap cleanly and stay tappable. */
@media(max-width:760px){
  main > .tabs,
  .modeBox,
  .newsNav{
    position:relative!important;
    top:auto!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    padding:9px!important;
    margin:10px 0 12px!important;
  }
  main > .tabs .tab,
  .modeBox button,
  .newsNav button{
    width:100%!important;
    min-width:0!important;
    padding:9px 7px!important;
    font-size:12px!important;
  }
  .modeBox span,
  .newsNav span{
    grid-column:1/-1!important;
    min-height:auto!important;
    padding:0 2px 2px!important;
    font-size:11px!important;
  }
  #income .modeBox{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
  #income .modeBox span{
    grid-column:1/-1!important;
  }
  #income .modeBox button{
    font-size:11px!important;
    padding:8px 5px!important;
  }
  #signals .symbolModeBox{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  #signals .symbolModeBox span{
    grid-column:1/-1!important;
  }
  .cardModeToggle{
    gap:3px!important;
    padding:3px!important;
  }
  .cardModeToggle .cardModeBtn{
    width:auto!important;
    padding:6px 8px!important;
    font-size:10.5px!important;
  }
}

@media(max-width:390px){
  main > .tabs,
  .newsNav{
    grid-template-columns:1fr 1fr!important;
  }
  #income .modeBox{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}


/* --------------------------------------------------------------------------
   v4.5.6 Theme-correct navigation cleanup — UI/UX only.
   Fixes v4.5.5 overreach: only the main menu floats/sticks; View Mode,
   Income, and News controls stay normal in-flow. Classic and Modern now have
   separate colors. Also keeps the old inline LEAPS button hidden because LEAPS
   Ideas is already in the main menu.
---------------------------------------------------------------------------- */

/* Hidden always wins, even if earlier nav rules force display:flex. */
button[hidden],
#leapsBtn,
.modeBox button[hidden]{
  display:none!important;
}

/* Main top-level menu: the only sticky/floating navigation on the public site. */
main > .tabs{
  position:sticky!important;
  top:0!important;
  z-index:30!important;
  width:100%!important;
  max-width:100%!important;
  margin:12px 0 16px!important;
  padding:10px 12px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:9px!important;
  flex-wrap:wrap!important;
  border-radius:18px!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
}
main > .tabs .tab{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:999px!important;
  min-height:36px!important;
  padding:9px 14px!important;
  font-weight:900!important;
  line-height:1.1!important;
  white-space:nowrap!important;
  box-shadow:none!important;
}

/* Classic UI menu: clean classic SAI dark pills, no modern glow/gradient spillover. */
body:not(.ui-modern) main > .tabs{
  background:#07111f!important;
  border:1px solid #20314c!important;
  box-shadow:none!important;
}
body:not(.ui-modern) main > .tabs .tab{
  background:#101827!important;
  border:1px solid #2a3956!important;
  color:#d6e6ff!important;
}
body:not(.ui-modern) main > .tabs .tab.active{
  background:#4f7df3!important;
  border-color:#6ea0ff!important;
  color:#ffffff!important;
  box-shadow:none!important;
}

/* Modern UI menu: premium floating nav, scoped only to Modern mode. */
body.ui-modern main > .tabs{
  background:rgba(8,16,29,.86)!important;
  border:1px solid rgba(99,215,255,.20)!important;
  box-shadow:0 12px 34px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.04)!important;
}
body.ui-modern main > .tabs .tab{
  background:rgba(10,20,36,.92)!important;
  border:1px solid rgba(155,184,255,.18)!important;
  color:#d9e5ff!important;
}
body.ui-modern main > .tabs .tab.active{
  background:linear-gradient(135deg,#4f7df3,#7c5cff)!important;
  border-color:rgba(255,255,255,.36)!important;
  color:#ffffff!important;
  box-shadow:0 14px 30px rgba(93,140,255,.32), inset 0 1px 0 rgba(255,255,255,.12)!important;
}

/* Internal controls are not sticky/floating. Keep them inside the normal page flow. */
.modeBox,
.newsNav{
  position:relative!important;
  top:auto!important;
  z-index:auto!important;
  width:100%!important;
  max-width:100%!important;
  margin:12px 0 16px!important;
  padding:14px 16px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:10px!important;
  flex-wrap:wrap!important;
  border-radius:22px!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
body:not(.ui-modern) .modeBox,
body:not(.ui-modern) .newsNav{
  background:#101827!important;
  border:1px solid #263348!important;
  box-shadow:none!important;
}
body:not(.ui-modern) .modeBox span,
body:not(.ui-modern) .newsNav span{
  color:#9fb0ca!important;
}
body:not(.ui-modern) .modeBox button,
body:not(.ui-modern) .newsNav button,
body:not(.ui-modern) .cardModeToggle .cardModeBtn{
  background:#121b2c!important;
  border:1px solid #2b3954!important;
  color:#d6e6ff!important;
  box-shadow:none!important;
}
body:not(.ui-modern) .modeBox button.modeActive,
body:not(.ui-modern) .modeBox button[aria-current="true"],
body:not(.ui-modern) #simpleBtn.modeActive,
body:not(.ui-modern) #proBtn.modeActive,
body:not(.ui-modern) #incomeSimpleBtn.modeActive,
body:not(.ui-modern) #incomeProBtn.modeActive,
body:not(.ui-modern) .cardModeToggle .cardModeBtn.active{
  background:#4f7df3!important;
  border-color:#6ea0ff!important;
  color:#ffffff!important;
  box-shadow:none!important;
}

/* Modern internal controls: polished, but bounded and not floating. */
body.ui-modern .modeBox,
body.ui-modern .newsNav{
  background:rgba(9,15,28,.78)!important;
  border:1px solid rgba(155,184,255,.22)!important;
  box-shadow:0 10px 26px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04)!important;
}
body.ui-modern .modeBox button,
body.ui-modern .newsNav button,
body.ui-modern .cardModeToggle .cardModeBtn{
  background:rgba(10,20,36,.92)!important;
  border:1px solid rgba(155,184,255,.20)!important;
  color:#d9e5ff!important;
}
body.ui-modern .modeBox button.modeActive,
body.ui-modern .modeBox button[aria-current="true"],
body.ui-modern #simpleBtn.modeActive,
body.ui-modern #proBtn.modeActive,
body.ui-modern #incomeSimpleBtn.modeActive,
body.ui-modern #incomeProBtn.modeActive,
body.ui-modern .cardModeToggle .cardModeBtn.active{
  background:linear-gradient(135deg,#4f7df3,#7c5cff)!important;
  border-color:rgba(255,255,255,.34)!important;
  color:#ffffff!important;
  box-shadow:0 9px 22px rgba(93,140,255,.28)!important;
}

/* Keep per-card Simple/Pro compact and consistent in both themes. */
.cardModeToggle{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:3px!important;
  padding:3px!important;
  border-radius:999px!important;
  max-width:100%!important;
}
.cardModeToggle .cardModeBtn{
  min-width:auto!important;
  min-height:28px!important;
  padding:6px 9px!important;
  font-size:11px!important;
  line-height:1!important;
}

/* Mobile: main menu fits in two rows instead of four. */
@media(max-width:760px){
  main > .tabs{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:7px!important;
    padding:8px!important;
    margin:10px 0 12px!important;
    overflow:visible!important;
  }
  main > .tabs .tab{
    width:100%!important;
    min-width:0!important;
    padding:8px 3px!important;
    min-height:34px!important;
    font-size:10.5px!important;
    white-space:normal!important;
    line-height:1.08!important;
    text-align:center!important;
  }

  .modeBox,
  .newsNav{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:8px!important;
    padding:11px!important;
    margin:10px 0 12px!important;
  }
  .modeBox span,
  .newsNav span{
    flex:0 0 100%!important;
    min-height:auto!important;
    padding:0!important;
    font-size:11px!important;
    letter-spacing:.04em!important;
  }
  .modeBox button,
  .newsNav button{
    flex:1 1 0!important;
    min-width:0!important;
    padding:9px 6px!important;
    font-size:12px!important;
  }

  /* Signals View Mode has only Simple/Pro now; keep it inside borders. */
  #signals .symbolModeBox{
    display:flex!important;
    overflow:hidden!important;
  }
  #signals .symbolModeBox #simpleBtn,
  #signals .symbolModeBox #proBtn{
    flex:1 1 calc(50% - 4px)!important;
    max-width:calc(50% - 4px)!important;
  }

  /* Income controls can wrap to two compact rows if needed, no horizontal overflow. */
  #income .modeBox button{
    flex:1 1 calc(50% - 8px)!important;
    max-width:calc(50% - 4px)!important;
  }

  .newsNav button{
    flex:1 1 calc(50% - 8px)!important;
    max-width:calc(50% - 4px)!important;
  }
}

@media(max-width:390px){
  main > .tabs .tab{
    font-size:9.5px!important;
    padding-left:2px!important;
    padding-right:2px!important;
  }
}


/* --------------------------------------------------------------------------
   v4.5.7 UI Theme/Nav Fixes — UI/UX only.
   Scope: theme-correct buttons/tabs, mobile nav compaction, News/Income cleanup,
   and header polish. No API, DB, scoring, refresh, Today’s Plan, Symbol Card, or
   route logic changes.
---------------------------------------------------------------------------- */

/* Remove the deprecated inline LEAPS Ideas button from View Mode. LEAPS remains in main menu. */
#leapsBtn{display:none!important;}

/* Header polish: Modern mode gets premium brand treatment; Classic keeps clean classic SAI. */
body.ui-modern .hero{
  background:radial-gradient(circle at 72% 18%, rgba(124,92,255,.22), transparent 32%),
             linear-gradient(145deg,#152044 0%,#0a1528 48%,#07111f 100%)!important;
}
body.ui-modern .hero .brand{
  color:#93c5fd!important;
  text-shadow:0 0 18px rgba(125,211,252,.34)!important;
}
body.ui-modern .hero h1{
  color:#f3f7ff!important;
  letter-spacing:-.035em!important;
}
body.ui-modern .hero p{
  color:#bfdbfe!important;
}
body:not(.ui-modern) .hero .brand{color:#6ea0ff!important;text-shadow:none!important;}
body:not(.ui-modern) .hero h1{color:#edf3ff!important;}
body:not(.ui-modern) .hero p{color:#aebdd5!important;}

/* Modern Open Source / source links should feel like the Modern UI, not old classic link text. */
body.ui-modern .feedbackLink{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:max-content!important;
  max-width:100%!important;
  padding:8px 12px!important;
  border-radius:999px!important;
  color:#eff6ff!important;
  text-decoration:none!important;
  background:linear-gradient(135deg,#4f7df3,#7c5cff)!important;
  border:1px solid rgba(255,255,255,.24)!important;
  box-shadow:0 10px 22px rgba(79,125,243,.25)!important;
}
body.ui-modern .feedbackLink:hover,
body.ui-modern .feedbackLink:focus{
  transform:translateY(-1px)!important;
  box-shadow:0 13px 26px rgba(124,92,255,.30)!important;
}

/* News nav: remove Misc, prevent overlap, and highlight selected tab. */
.newsNav [data-news-jump="miscNews"]{display:none!important;}
.newsNav button.activeNews,
.newsNav button[aria-current="true"]{
  background:#4f7df3!important;
  border-color:#6ea0ff!important;
  color:#fff!important;
}
body.ui-modern .newsNav button.activeNews,
body.ui-modern .newsNav button[aria-current="true"]{
  background:linear-gradient(135deg,#4f7df3,#7c5cff)!important;
  border-color:rgba(255,255,255,.34)!important;
  color:#fff!important;
  box-shadow:0 9px 22px rgba(93,140,255,.28)!important;
}
.newsNav{overflow:visible!important;}
.newsNav button{min-width:max-content!important;}

/* Simple/Pro theme correction: inactive buttons must stay inactive in both themes. */
body:not(.ui-modern) .modeBox button:not(.modeActive):not([aria-current="true"]),
body:not(.ui-modern) .cardModeToggle .cardModeBtn:not(.active){
  background:#121b2c!important;
  border-color:#2b3954!important;
  color:#d6e6ff!important;
  box-shadow:none!important;
}
body.ui-modern .modeBox button:not(.modeActive):not([aria-current="true"]),
body.ui-modern .cardModeToggle .cardModeBtn:not(.active){
  background:rgba(10,20,36,.94)!important;
  border-color:rgba(155,184,255,.24)!important;
  color:#d9e5ff!important;
  box-shadow:none!important;
}
.cardModeToggle .cardModeBtn.active,
body:not(.ui-modern) .cardModeToggle .cardModeBtn.active{
  background:#4f7df3!important;
  border-color:#6ea0ff!important;
  color:#fff!important;
}
body.ui-modern .cardModeToggle .cardModeBtn.active{
  background:linear-gradient(135deg,#4f7df3,#7c5cff)!important;
  border-color:rgba(255,255,255,.34)!important;
  color:#fff!important;
  box-shadow:0 8px 18px rgba(93,140,255,.28)!important;
}

/* Desktop: keep symbol card actions in one clean row for logged-in users. */
@media(min-width:761px){
  .actions{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:8px!important;
    flex-wrap:nowrap!important;
  }
  .actions .mini,
  .actions button{
    flex:0 0 auto!important;
    white-space:nowrap!important;
  }
}

/* Mobile refinements */
@media(max-width:760px){
  /* Signals View Mode Simple/Pro: one row, inside border. */
  #signals .symbolModeBox{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    overflow:hidden!important;
  }
  #signals .symbolModeBox span{
    grid-column:1 / -1!important;
  }
  #signals .symbolModeBox #simpleBtn,
  #signals .symbolModeBox #proBtn{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
  }

  /* Income view: 4 compact buttons in one row where possible. */
  #income .modeBox{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:7px!important;
    overflow:hidden!important;
  }
  #income .modeBox span{
    grid-column:1 / -1!important;
  }
  #income .modeBox button{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:8px 3px!important;
    font-size:10.5px!important;
    line-height:1.05!important;
    white-space:normal!important;
  }

  /* News sections: two rows max after Misc removal; no overlap. */
  #news .newsNav{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:7px!important;
    overflow:hidden!important;
  }
  #news .newsNav span{
    grid-column:1 / -1!important;
  }
  #news .newsNav button{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:8px 3px!important;
    font-size:10px!important;
    line-height:1.05!important;
    white-space:normal!important;
  }

  /* Income CSP/CC cards: compact non-overflow tables. Pro can wrap into two lines. */
  #income .incomeCard{
    overflow:hidden!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }
  #income .putTable{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    table-layout:fixed!important;
    border-collapse:collapse!important;
  }
  #income .putTable th,
  #income .putTable td{
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
    padding:7px 4px!important;
    font-size:10.5px!important;
    line-height:1.15!important;
    vertical-align:top!important;
  }
  #income .putTable th:first-child,
  #income .putTable td:first-child{
    width:23%!important;
  }
  #income .putTable th:nth-child(2),
  #income .putTable td:nth-child(2){width:15%!important;}
  #income .putTable th:nth-child(3),
  #income .putTable td:nth-child(3){width:20%!important;}
  #income .putTable th:nth-child(4),
  #income .putTable td:nth-child(4){width:13%!important;}
  #income .putTable th:nth-child(5),
  #income .putTable td:nth-child(5){width:17%!important;}
  #income .miniNote{
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
    overflow-wrap:anywhere!important;
    font-size:11.5px!important;
    line-height:1.28!important;
  }
}

@media(max-width:390px){
  #income .modeBox{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  #news .newsNav{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  #income .putTable th,
  #income .putTable td{font-size:9.5px!important;padding:6px 3px!important;}
}


/* --------------------------------------------------------------------------
   v4.5.8 compact income/actions cleanup — UI/UX only.
   Scope: fixes mobile Income header/table wrapping and desktop symbol action
   overflow. No API, DB, scoring, refresh, routing, login, Today’s Plan,
   Symbol Card, Income calculation, or News loading logic changes.
---------------------------------------------------------------------------- */

/* Desktop/laptop symbol card action buttons: keep inside the card. */
@media(min-width:761px){
  .card{overflow:hidden!important;}
  .actions{
    width:100%!important;
    max-width:100%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:7px!important;
    flex-wrap:nowrap!important;
  }
  .actions .mini{
    min-width:0!important;
    flex:1 1 0!important;
    padding:9px 8px!important;
    font-size:12px!important;
    line-height:1.05!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  /* Chart can be compact/icon-first so the full row fits on laptops. */
  .actions .chartMini{
    flex:0 0 74px!important;
  }
  .actions .removeMini{
    flex:0 0 92px!important;
  }
}

/* Mobile Income header: keep title + Fetch button neat; allow wrap if needed. */
@media(max-width:760px){
  #income .sectionHead{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    flex-wrap:wrap!important;
    gap:10px!important;
    padding:16px 14px!important;
  }
  #income .sectionHead h2{
    font-size:24px!important;
    line-height:1.05!important;
    max-width:52%!important;
    margin:0!important;
  }
  #income #fetchOptions{
    width:auto!important;
    max-width:46%!important;
    padding:10px 11px!important;
    font-size:12px!important;
    line-height:1.1!important;
    white-space:normal!important;
  }

  /* Income mode buttons: 4 compact pills on larger phones, 2 rows only if very tight. */
  #income .modeBox{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:7px!important;
    padding:14px 12px!important;
  }
  #income .modeBox span{
    font-size:12px!important;
    letter-spacing:.08em!important;
  }
  #income .modeBox button{
    min-height:40px!important;
    padding:8px 4px!important;
    font-size:12px!important;
    line-height:1.05!important;
  }

  /* Income tables become readable mobile cards instead of squeezed columns. */
  #income .incomeCard{
    overflow:hidden!important;
    padding:16px 14px!important;
  }
  #income .putTable.simpleTable,
  #income .putTable.proTable,
  #income .putTable.simpleTable tbody,
  #income .putTable.proTable tbody{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }
  #income .putTable.simpleTable tr,
  #income .putTable.proTable tr{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    width:100%!important;
    border-bottom:1px solid rgba(120,150,210,.18)!important;
    padding:8px 0!important;
  }
  #income .putTable.simpleTable tr:first-child,
  #income .putTable.proTable tr:first-child{
    display:none!important;
  }
  #income .putTable.simpleTable td,
  #income .putTable.proTable td{
    display:flex!important;
    align-items:flex-start!important;
    justify-content:space-between!important;
    gap:8px!important;
    width:auto!important;
    min-width:0!important;
    border:0!important;
    border-radius:10px!important;
    padding:7px 8px!important;
    background:rgba(8,14,26,.45)!important;
    font-size:12px!important;
    line-height:1.15!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }
  #income .putTable.simpleTable td::before,
  #income .putTable.proTable td::before{
    flex:0 0 auto!important;
    color:#9fb4d4!important;
    font-size:10px!important;
    font-weight:900!important;
    letter-spacing:.08em!important;
    text-transform:uppercase!important;
  }
  #income .putTable.simpleTable td:nth-child(1)::before,
  #income .putTable.proTable td:nth-child(1)::before{content:"Exp";}
  #income .putTable.simpleTable td:nth-child(2)::before,
  #income .putTable.proTable td:nth-child(2)::before{content:"Strike";}
  #income .putTable.simpleTable td:nth-child(3)::before{content:"Income";}
  #income .putTable.proTable td:nth-child(3)::before{content:"Premium";}
  #income .putTable.simpleTable td:nth-child(4)::before,
  #income .putTable.proTable td:nth-child(7)::before{content:"Cushion";}
  #income .putTable.simpleTable td:nth-child(5)::before,
  #income .putTable.proTable td:nth-child(9)::before{content:"Status";}
  #income .putTable.proTable td:nth-child(4)::before{content:"Delta";}
  #income .putTable.proTable td:nth-child(5)::before{content:"IV";}
  #income .putTable.proTable td:nth-child(6)::before{content:"Theta";}
  #income .putTable.proTable td:nth-child(8)::before{content:"Annual";}
  #income .putTable.proTable td:nth-child(9){grid-column:1 / -1!important;}
  #income .miniNote{
    margin-top:10px!important;
    font-size:12px!important;
    line-height:1.3!important;
  }
}

@media(max-width:430px){
  #income .sectionHead h2{font-size:22px!important;max-width:50%!important;}
  #income #fetchOptions{font-size:11px!important;padding:9px 9px!important;max-width:48%!important;}
}

@media(max-width:370px){
  #income .sectionHead h2,
  #income #fetchOptions{max-width:100%!important;width:100%!important;}
  #income .modeBox{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}

/* --------------------------------------------------------------------------
   v4.5.9 mobile income compact cleanup — UI/UX only.
   Scope: tighter mobile Income header, readable one-row Simple option cards,
   two-row Pro option cards, and minor desktop action button fit. No business
   logic, APIs, calculations, routes, login, DB, Today’s Plan, Symbol Card,
   Income calculation, or News loading changes.
---------------------------------------------------------------------------- */

@media(max-width:760px){
  /* Income header: keep title + Fetch button in one compact row on iPhone-size screens. */
  #income .sectionHead{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    flex-wrap:nowrap!important;
    gap:8px!important;
    padding:14px 12px!important;
    min-height:0!important;
  }
  #income .sectionHead h2{
    flex:1 1 auto!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    font-size:19px!important;
    line-height:1.08!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:clip!important;
  }
  #income #fetchOptions{
    flex:0 0 auto!important;
    width:auto!important;
    max-width:164px!important;
    min-width:128px!important;
    padding:8px 9px!important;
    font-size:10.75px!important;
    line-height:1.05!important;
    border-radius:999px!important;
    white-space:normal!important;
  }

  /* Simple mode: show the five core fields in one compact readable row. */
  #income .putTable.simpleTable,
  #income .putTable.simpleTable tbody{
    display:block!important;
    width:100%!important;
  }
  #income .putTable.simpleTable tr:first-child{
    display:none!important;
  }
  #income .putTable.simpleTable tr:not(:first-child){
    display:grid!important;
    grid-template-columns:1.38fr .86fr 1.28fr .76fr .9fr!important;
    gap:5px!important;
    width:100%!important;
    padding:7px 0 8px!important;
    border-bottom:1px solid rgba(120,150,210,.18)!important;
  }
  #income .putTable.simpleTable td{
    display:block!important;
    min-width:0!important;
    width:auto!important;
    border:0!important;
    border-radius:9px!important;
    padding:6px 5px!important;
    background:rgba(8,14,26,.42)!important;
    font-size:10.8px!important;
    line-height:1.12!important;
    text-align:left!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  #income .putTable.simpleTable td::before{
    display:block!important;
    margin-bottom:2px!important;
    color:#9fb4d4!important;
    font-size:8.5px!important;
    font-weight:900!important;
    letter-spacing:.07em!important;
    text-transform:uppercase!important;
    line-height:1!important;
  }
  #income .putTable.simpleTable td:nth-child(1)::before{content:"Exp";}
  #income .putTable.simpleTable td:nth-child(2)::before{content:"Strike";}
  #income .putTable.simpleTable td:nth-child(3)::before{content:"Income";}
  #income .putTable.simpleTable td:nth-child(4)::before{content:"Cushion";}
  #income .putTable.simpleTable td:nth-child(5)::before{content:"Status";}

  /* Pro mode: keep every candidate to two compact rows instead of many stacked rows. */
  #income .putTable.proTable,
  #income .putTable.proTable tbody{
    display:block!important;
    width:100%!important;
  }
  #income .putTable.proTable tr:first-child{
    display:none!important;
  }
  #income .putTable.proTable tr:not(:first-child){
    display:grid!important;
    grid-template-columns:1.38fr .82fr .92fr .58fr .58fr!important;
    gap:5px!important;
    width:100%!important;
    padding:7px 0 8px!important;
    border-bottom:1px solid rgba(120,150,210,.18)!important;
  }
  #income .putTable.proTable td{
    display:block!important;
    min-width:0!important;
    width:auto!important;
    border:0!important;
    border-radius:9px!important;
    padding:6px 5px!important;
    background:rgba(8,14,26,.42)!important;
    font-size:10.4px!important;
    line-height:1.1!important;
    text-align:left!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  #income .putTable.proTable td::before{
    display:block!important;
    margin-bottom:2px!important;
    color:#9fb4d4!important;
    font-size:8.2px!important;
    font-weight:900!important;
    letter-spacing:.06em!important;
    text-transform:uppercase!important;
    line-height:1!important;
  }
  #income .putTable.proTable td:nth-child(1)::before{content:"Exp";}
  #income .putTable.proTable td:nth-child(2)::before{content:"Strike";}
  #income .putTable.proTable td:nth-child(3)::before{content:"Prem";}
  #income .putTable.proTable td:nth-child(4)::before{content:"Delta";}
  #income .putTable.proTable td:nth-child(5)::before{content:"IV";}
  #income .putTable.proTable td:nth-child(6)::before{content:"Theta";}
  #income .putTable.proTable td:nth-child(7)::before{content:"Cushion";}
  #income .putTable.proTable td:nth-child(8)::before{content:"Annual";}
  #income .putTable.proTable td:nth-child(9)::before{content:"Status";}
  #income .putTable.proTable td:nth-child(9){
    grid-column:auto!important;
  }

  #income .incomeCard{
    padding:15px 13px!important;
  }
  #income .incomeCard .symbol{
    font-size:26px!important;
  }
  #income .miniNote{
    margin-top:9px!important;
    font-size:11.8px!important;
    line-height:1.26!important;
  }
}

@media(max-width:430px){
  #income .sectionHead h2{font-size:18px!important;}
  #income #fetchOptions{max-width:152px!important;min-width:118px!important;font-size:10.25px!important;padding:7px 8px!important;}
  #income .putTable.simpleTable tr:not(:first-child){grid-template-columns:1.3fr .78fr 1.18fr .72fr .82fr!important;gap:4px!important;}
  #income .putTable.proTable tr:not(:first-child){grid-template-columns:1.32fr .78fr .86fr .54fr .54fr!important;gap:4px!important;}
  #income .putTable.simpleTable td{font-size:10px!important;padding:5px 4px!important;}
  #income .putTable.proTable td{font-size:9.7px!important;padding:5px 4px!important;}
}

@media(max-width:370px){
  /* Very small phones: allow header to wrap cleanly instead of overflowing. */
  #income .sectionHead{flex-wrap:wrap!important;}
  #income .sectionHead h2,
  #income #fetchOptions{width:100%!important;max-width:100%!important;}
}

@media(min-width:761px){
  /* Keep desktop/laptop row readable without forcing ellipsis unless really tight. */
  .actions .refreshMini{flex:0 0 88px!important;}
  .actions .chartMini{flex:0 0 82px!important;}
  .actions .cspMini,.actions .ccMini{flex:0 0 82px!important;}
  .actions .removeMini{flex:0 0 98px!important;}
}

/* --------------------------------------------------------------------------
   v4.6.0 SAI Logo Integration — UI/branding only.
   Uses provided SAI logo package; no app logic/API/calculation changes.
--------------------------------------------------------------------------- */
.srOnly{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
.heroBrandBlock{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:8px!important;
}
.siteLogoLink{
  display:inline-flex!important;
  align-items:center!important;
  max-width:min(640px,48vw)!important;
  line-height:0!important;
  text-decoration:none!important;
  border-radius:18px!important;
}
.siteLogoFull{
  display:block!important;
  width:clamp(320px,44vw,610px)!important;
  max-width:100%!important;
  height:auto!important;
  object-fit:contain!important;
}
.siteLogoIcon{
  display:none!important;
  width:62px!important;
  height:62px!important;
  object-fit:contain!important;
}
.heroTagline{
  margin:0!important;
  color:#aebdd5!important;
  font-size:18px!important;
  line-height:1.35!important;
}
body.ui-modern .siteLogoFull{
  filter:drop-shadow(0 16px 28px rgba(0,0,0,.26)) drop-shadow(0 0 18px rgba(125,211,252,.12));
}
body.ui-modern .siteLogoLink{
  box-shadow:none!important;
}
body.ui-modern .siteLogoIcon{
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.30)) drop-shadow(0 0 14px rgba(245,185,66,.16));
}
body.ui-modern .heroTagline{
  color:#bfdbfe!important;
  text-shadow:0 0 12px rgba(96,165,250,.12)!important;
}
body:not(.ui-modern) .siteLogoFull,
body:not(.ui-modern) .siteLogoIcon{
  filter:none!important;
}
body:not(.ui-modern) .heroTagline{
  color:#aebdd5!important;
  text-shadow:none!important;
}
@media(max-width:1000px){
  .siteLogoLink{max-width:min(560px,86vw)!important;}
  .siteLogoFull{width:min(560px,86vw)!important;}
  .heroTagline{font-size:16px!important;}
}
@media(max-width:560px){
  .heroBrandBlock{align-items:flex-start!important;gap:6px!important;}
  /* v4.6.1: keep the compact full SAI wordmark on mobile instead of icon-only,
     matching desktop branding while preventing wrap/overflow. */
  .siteLogoFull{display:block!important;width:min(278px,82vw)!important;max-width:82vw!important;height:auto!important;}
  .siteLogoIcon{display:none!important;}
  .siteLogoLink{max-width:82vw!important;}
  .heroTagline{font-size:14px!important;line-height:1.3!important;max-width:100%!important;}
}
@media(max-width:380px){
  .siteLogoFull{width:min(238px,80vw)!important;max-width:80vw!important;}
  .heroTagline{font-size:13px!important;}
}


/* --------------------------------------------------------------------------
   v4.6.2 Trimmed SAI Header Logo — UI/branding only.
   Uses cropped transparent wordmark to remove wasted top/bottom image space
   and avoid the visible dark rectangle mismatch in Classic/Modern headers.
--------------------------------------------------------------------------- */
.siteLogoLink{
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
  max-width:min(520px,42vw)!important;
}
.siteLogoFull{
  content:url('brand/sai-logo-dark-transparent-trimmed.png');
  width:auto!important;
  height:clamp(76px,6.4vw,116px)!important;
  max-width:min(520px,42vw)!important;
  max-height:116px!important;
  object-fit:contain!important;
  object-position:left center!important;
}
.heroBrandBlock{gap:6px!important;}
.heroTagline{margin-top:2px!important;}
.hero{padding-top:18px!important;padding-bottom:18px!important;align-items:center!important;}
body.ui-modern .siteLogoFull{
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.24)) drop-shadow(0 0 12px rgba(96,165,250,.10))!important;
}
body:not(.ui-modern) .siteLogoFull{filter:none!important;}
@media(max-width:1000px){
  .siteLogoLink{max-width:min(420px,86vw)!important;}
  .siteLogoFull{height:clamp(70px,11vw,96px)!important;max-width:min(420px,86vw)!important;max-height:96px!important;}
  .hero{padding-top:16px!important;padding-bottom:16px!important;}
}
@media(max-width:560px){
  .siteLogoLink{max-width:92vw!important;width:92vw!important;}
  .siteLogoFull{
    display:block!important;
    width:100%!important;
    height:auto!important;
    max-width:92vw!important;
    max-height:92px!important;
  }
  .heroBrandBlock{width:100%!important;align-items:flex-start!important;}
  .heroTagline{font-size:14px!important;line-height:1.28!important;margin-top:0!important;}
}
@media(max-width:380px){
  .siteLogoLink{max-width:90vw!important;width:90vw!important;}
  .siteLogoFull{max-height:82px!important;}
  .heroTagline{font-size:13px!important;}
}

/* v4.7 Guide Tab User Manual & Downloadable Guides */
.guideDownloadHub{
  margin:0 0 20px;
  padding:20px;
  border:1px solid rgba(79,125,243,.30);
  border-radius:24px;
  background:
    radial-gradient(circle at 12% 0%, rgba(111,124,255,.16), transparent 34%),
    linear-gradient(145deg, rgba(15,24,43,.98), rgba(8,15,28,.98));
  box-shadow:0 16px 38px rgba(0,0,0,.20), inset 0 0 0 1px rgba(255,255,255,.02);
}
.guideHubHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.guideEyebrow{margin:0 0 6px;color:#7fa7ff;text-transform:uppercase;letter-spacing:.16em;font-size:11px;font-weight:900}
.guideDownloadHub h3{font-size:24px;margin:0 0 8px;color:#f2f7ff}
.guideDownloadHub p{margin:6px 0;color:#b8c7de;line-height:1.45}
.guideHubNote{color:#d7e5ff!important;font-weight:650}
.guideRegisterNote{border:1px solid rgba(100,225,138,.22);background:rgba(13,55,38,.34);border-radius:14px;padding:10px 12px;color:#bfffd6!important;font-weight:700}
.downloadGuideGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.downloadGuideCard{display:flex;flex-direction:column;gap:9px;min-height:230px;padding:16px;border-radius:20px;border:1px solid rgba(52,66,93,.95);background:linear-gradient(145deg,rgba(13,22,39,.98),rgba(7,13,24,.98));box-shadow:0 10px 26px rgba(0,0,0,.18)}
.downloadGuideCard h4{margin:0;color:#f4f8ff;font-size:16px;line-height:1.2}
.downloadGuideCard p{font-size:13px;line-height:1.45;margin:0;color:#aebdd5;flex:1}
.guideIcon{width:42px;height:42px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(79,125,243,.26),rgba(118,94,255,.18));border:1px solid rgba(126,160,255,.30);font-size:20px}
.guideDownloadBtn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:#fff;font-weight:800;margin-top:auto;width:max-content;min-width:128px;border-radius:999px;padding:10px 14px;background:linear-gradient(135deg,#4f7df3,#7567ff);box-shadow:0 10px 24px rgba(79,125,243,.20)}
.guideDownloadBtn.disabled,.guideDownloadBtn:disabled{cursor:not-allowed;opacity:.58;background:linear-gradient(145deg,#18243a,#101827);border:1px solid #34425d;color:#b7c5db;box-shadow:none}
.guidePrivacyNote{font-size:12px!important;color:#91a5c3!important;margin:14px 2px 0!important}
body.ui-modern .guideDownloadHub{border-color:rgba(129,140,248,.42);box-shadow:0 18px 44px rgba(50,80,180,.20), inset 0 0 22px rgba(129,140,248,.06)}
body.ui-modern .downloadGuideCard{border-color:rgba(129,140,248,.26);background:linear-gradient(145deg,rgba(17,27,50,.98),rgba(10,17,34,.98))}
body:not(.ui-modern) .guideDownloadHub{background:linear-gradient(145deg,#101827,#08111f)}
@media(max-width:1100px){.downloadGuideGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.guideDownloadHub{padding:15px;border-radius:20px}.downloadGuideGrid{grid-template-columns:1fr;gap:12px}.downloadGuideCard{min-height:0;padding:14px}.guideDownloadHub h3{font-size:20px}.guideHubNote,.guideRegisterNote{font-size:13px}.guideDownloadBtn{width:100%}}

/* v4.8 Guide Help Center */
.asiHelpCenter{margin:22px 0 26px;padding:22px;border:1px solid rgba(96,165,250,.26);border-radius:24px;background:linear-gradient(145deg,rgba(15,23,42,.96),rgba(17,24,39,.9));box-shadow:0 18px 48px rgba(2,6,23,.28)}
.helpCenterHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px}
.helpCenterHeader h3{margin:4px 0 8px;font-size:clamp(1.35rem,2.2vw,2rem)}
.helpCenterHeader p{margin:0;color:#bcd2ee;line-height:1.45}.helpNavPills{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;max-width:520px}.helpNavPills a,.helpNavBtn{border:1px solid rgba(148,163,184,.32);background:rgba(15,23,42,.84);color:#eaf2ff;border-radius:999px;padding:9px 14px;font-weight:800;text-decoration:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.05);cursor:pointer}.helpNavPills a:hover,.helpNavBtn:hover{border-color:#7c8cff;background:rgba(76,91,255,.2)}
.helpSearchShell{padding:18px;border-radius:22px;background:rgba(2,6,23,.45);border:1px solid rgba(96,165,250,.18);margin-bottom:18px}.helpSearchLabel{display:block;margin-bottom:8px;color:#9fb8dc;font-weight:900;letter-spacing:.08em;text-transform:uppercase;font-size:.78rem}.helpSearchInput{width:100%;border:1px solid rgba(96,165,250,.28);background:#07111f;color:#fff;border-radius:18px;padding:14px 16px;font-size:1rem;outline:none}.helpSearchInput:focus{border-color:#7c8cff;box-shadow:0 0 0 3px rgba(124,140,255,.18)}.helpFilterPills{display:flex;flex-wrap:wrap;gap:9px;margin:14px 0}.helpFilter{border:1px solid rgba(148,163,184,.32);background:rgba(15,23,42,.86);color:#dbeafe;border-radius:999px;padding:9px 13px;font-weight:800;cursor:pointer}.helpFilter.active{border-color:#8fa2ff;background:linear-gradient(135deg,#5b8cff,#8069ff);color:#fff;box-shadow:0 10px 28px rgba(91,140,255,.25)}.advancedHelpSearch{border:1px solid rgba(148,163,184,.22);border-radius:18px;padding:12px 14px;background:rgba(15,23,42,.58)}.advancedHelpSearch summary{font-weight:900;color:#eaf2ff;cursor:pointer}.advancedHelpGrid{display:grid;grid-template-columns:repeat(3,minmax(150px,1fr));gap:12px;margin-top:14px}.advancedHelpGrid label{display:flex;flex-direction:column;gap:6px;color:#bcd2ee;font-weight:800}.advancedHelpGrid select{border:1px solid rgba(96,165,250,.24);border-radius:12px;background:#07111f;color:#fff;padding:9px 10px}.advancedHelpGrid .helpCheck{flex-direction:row;align-items:center}.helpResultCount{margin:12px 0 0;color:#93c5fd;font-weight:800}.helpTopicGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.helpTopicCard{border:1px solid rgba(96,165,250,.2);border-radius:20px;padding:16px;background:linear-gradient(160deg,rgba(15,23,42,.96),rgba(8,13,24,.96));box-shadow:0 12px 34px rgba(0,0,0,.22)}.helpTopicCard h4{margin:10px 0 8px;font-size:1.08rem}.helpTopicCard p{color:#cbdaf0;line-height:1.43}.helpTopicMeta,.helpTags{display:flex;gap:6px;flex-wrap:wrap}.helpTopicMeta span,.helpTags span{font-size:.73rem;font-weight:900;border:1px solid rgba(96,165,250,.24);background:rgba(37,99,235,.12);color:#bfdbfe;border-radius:999px;padding:4px 8px}.helpTags span{color:#dbeafe;background:rgba(124,140,255,.12)}.helpExpandBtn{margin-top:12px;border:1px solid rgba(96,165,250,.35);background:rgba(15,23,42,.84);color:#fff;border-radius:999px;padding:9px 13px;font-weight:900;cursor:pointer}.helpExpandBtn:hover{background:rgba(76,91,255,.22)}.helpTopicBody{margin-top:12px;border-top:1px solid rgba(148,163,184,.16);padding-top:12px}.helpTopicBody p{margin:8px 0}.helpNoResults{border:1px solid rgba(245,158,11,.35);background:rgba(245,158,11,.1);color:#fde68a;border-radius:18px;padding:16px;font-weight:800}
body.ui-modern .asiHelpCenter{background:linear-gradient(145deg,rgba(17,24,39,.96),rgba(29,35,77,.92));border-color:rgba(139,152,255,.38);box-shadow:0 22px 58px rgba(0,0,0,.34),0 0 38px rgba(124,140,255,.12)}body.ui-modern .helpTopicCard{background:linear-gradient(145deg,rgba(16,24,42,.98),rgba(25,34,73,.92));border-color:rgba(139,152,255,.3)}
@media (max-width: 1000px){.helpTopicGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.helpCenterHeader{flex-direction:column}.helpNavPills{justify-content:flex-start}.advancedHelpGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 640px){.asiHelpCenter{padding:16px;border-radius:20px}.helpFilterPills{gap:7px}.helpFilter,.helpNavPills a,.helpNavBtn{padding:8px 10px;font-size:.86rem}.helpTopicGrid,.advancedHelpGrid{grid-template-columns:1fr}.helpTopicCard{padding:14px}.helpCenterHeader h3{font-size:1.35rem}.helpSearchInput{font-size:.95rem;padding:12px 13px}}

/* v4.8.3 SAI Signal Card Pro Dynamic Color Coding
   UI/UX-only visual interpretation layer for Classic + Modern. */
.metric{
  position:relative;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.metric::before{
  content:"";
  position:absolute;
  left:0;
  top:12px;
  bottom:12px;
  width:3px;
  border-radius:999px;
  opacity:.72;
  background:rgba(148,163,184,.45);
}
.metric b{position:relative;z-index:1}
.metricHealthy{border-color:rgba(72,211,139,.34)!important;box-shadow:inset 0 0 0 1px rgba(72,211,139,.06)}
.metricHealthy::before{background:#38d98b}.metricHealthy b{color:#eafff4}
.metricWatch{border-color:rgba(245,203,92,.38)!important;box-shadow:inset 0 0 0 1px rgba(245,203,92,.06)}
.metricWatch::before{background:#f5c84f}.metricWatch b{color:#fff7d6}
.metricCaution{border-color:rgba(251,146,60,.40)!important;box-shadow:inset 0 0 0 1px rgba(251,146,60,.06)}
.metricCaution::before{background:#fb923c}.metricCaution b{color:#ffedd5}
.metricRisk{border-color:rgba(248,113,113,.42)!important;box-shadow:inset 0 0 0 1px rgba(248,113,113,.07)}
.metricRisk::before{background:#f87171}.metricRisk b{color:#fee2e2}
.metricInfo{border-color:rgba(96,165,250,.25)!important}.metricInfo::before{background:#60a5fa}.metricInfo b{color:#eaf3ff}
.metricBadge{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  margin-top:6px;
  border-radius:999px;
  padding:2px 7px;
  font-size:10px;
  line-height:1.1;
  font-weight:900;
  letter-spacing:.02em;
  white-space:nowrap;
}
.metricHealthyBadge{background:rgba(34,197,94,.18);border:1px solid rgba(34,197,94,.35);color:#9ff7c6}
.metricWatchBadge{background:rgba(245,158,11,.16);border:1px solid rgba(245,158,11,.34);color:#fde68a}
.metricCautionBadge{background:rgba(249,115,22,.16);border:1px solid rgba(249,115,22,.34);color:#fed7aa}
.metricRiskBadge{background:rgba(239,68,68,.16);border:1px solid rgba(239,68,68,.36);color:#fecaca}
.metricInfoBadge{background:rgba(59,130,246,.14);border:1px solid rgba(59,130,246,.30);color:#bfdbfe}
body.ui-modern .metricHealthy{background:linear-gradient(145deg,rgba(6,32,26,.92),rgba(9,18,32,.92))!important;box-shadow:0 0 18px rgba(34,197,94,.07),inset 0 0 0 1px rgba(34,197,94,.08)}
body.ui-modern .metricWatch{background:linear-gradient(145deg,rgba(35,28,9,.90),rgba(9,18,32,.92))!important;box-shadow:0 0 18px rgba(245,158,11,.07),inset 0 0 0 1px rgba(245,158,11,.07)}
body.ui-modern .metricCaution{background:linear-gradient(145deg,rgba(39,22,9,.90),rgba(9,18,32,.92))!important;box-shadow:0 0 18px rgba(249,115,22,.07),inset 0 0 0 1px rgba(249,115,22,.07)}
body.ui-modern .metricRisk{background:linear-gradient(145deg,rgba(42,13,18,.90),rgba(9,18,32,.92))!important;box-shadow:0 0 18px rgba(239,68,68,.07),inset 0 0 0 1px rgba(239,68,68,.07)}
body.ui-modern .metricInfo{background:linear-gradient(145deg,rgba(10,24,44,.92),rgba(9,18,32,.92))!important;box-shadow:0 0 18px rgba(59,130,246,.05),inset 0 0 0 1px rgba(59,130,246,.05)}
body:not(.ui-modern) .metricHealthy,body:not(.ui-modern) .metricWatch,body:not(.ui-modern) .metricCaution,body:not(.ui-modern) .metricRisk,body:not(.ui-modern) .metricInfo{background:#08111f}
.scoreNum{border-color:rgba(255,255,255,.16)}
@media(max-width:700px){
  .metric::before{top:10px;bottom:10px;width:2px}
  .metricBadge{font-size:9px;padding:2px 6px;margin-top:5px}
}


/* --------------------------------------------------------------------------
   v4.8.4 Income UI Simplification — UI/UX only
   Unifies CSP/CC display into one Income concept on Add Symbol and Symbol Cards.
--------------------------------------------------------------------------- */
.incomeUnifiedCheck{
  min-width:118px!important;
  padding-left:14px!important;
  padding-right:14px!important;
}
.metaIncome{
  background:rgba(42,32,16,.92)!important;
  color:#ffd981!important;
  border:1px solid rgba(255,207,89,.42)!important;
  box-shadow:0 0 0 1px rgba(255,207,89,.08), inset 0 0 12px rgba(255,185,63,.08);
}
body.ui-modern .metaIncome{
  background:linear-gradient(135deg,rgba(32,96,74,.92),rgba(85,58,145,.9))!important;
  color:#fff4bd!important;
  border-color:rgba(255,218,104,.42)!important;
  box-shadow:0 8px 20px rgba(90,120,255,.16), inset 0 0 14px rgba(255,220,120,.10);
}
.actions .incomeMini::before{content:"💰 "!important;font-size:11px}
.incomeMini{
  min-width:112px!important;
  flex:0 0 112px!important;
  white-space:nowrap!important;
}
.incomeOn{
  background:#203516!important;
  border-color:#8d6d2b!important;
  color:#ffd981!important;
}
.incomeOff{
  background:#141c2e!important;
  border-color:#394b69!important;
  color:#cfe2ff!important;
}
body.ui-modern .incomeOn{
  background:linear-gradient(135deg,#176447,#55349d)!important;
  border-color:rgba(255,218,104,.45)!important;
  color:#fff4bd!important;
}
body.ui-modern .incomeOff{
  background:rgba(15,24,42,.92)!important;
  border-color:rgba(127,153,190,.34)!important;
  color:#dce8ff!important;
}
@media(min-width:761px){
  .actions .incomeMini{flex:0 0 112px!important;}
  .actions{gap:8px!important;}
}
@media(max-width:760px){
  .signalsToolbar .incomeUnifiedCheck{
    width:100%!important;
    min-width:0!important;
    margin:0!important;
  }
  .cardMeta .metaIncome{
    font-size:10.5px!important;
    padding:2px 7px!important;
  }
  .actions{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
  .actions .incomeMini{
    min-width:0!important;
    width:100%!important;
    flex:auto!important;
  }
}
@media(max-width:420px){
  .cardMeta .metaIncome{font-size:0!important;gap:0!important;padding:3px 7px!important;}
  .cardMeta .metaIncome::after{content:"💰";font-size:12px!important;line-height:1;}
}


/* =========================================================
   v4.8.5 Signal card cleanup + unified Income toggle
   UI/UX only: keep dynamic indicator colors, remove crowded text badges.
   ========================================================= */
.metric .metricBadge{display:none!important;}
.metric b{margin-top:2px;}
.incomeMini.incomeOn{
  border-color:rgba(250,204,21,.55)!important;
  background:linear-gradient(135deg,rgba(245,158,11,.22),rgba(15,23,42,.92))!important;
  color:#fff7ed!important;
  box-shadow:0 0 0 1px rgba(245,158,11,.12),0 10px 24px rgba(245,158,11,.10);
}
.incomeMini.incomeOff{
  border-color:rgba(148,163,184,.28)!important;
}


/* =========================================================
   v4.8.6 Symbol Card Action Tag + Next Action
   UI/UX only: uses existing top badge and adds one concise action line.
   ========================================================= */
.nextActionLine{
  margin-top:9px;
  padding:8px 11px;
  border-radius:13px;
  border:1px solid rgba(96,165,250,.22);
  background:rgba(15,23,42,.54);
  color:#dbeafe;
  font-size:12px;
  line-height:1.35;
}
.nextActionLine b{color:#93c5fd;}
body.ui-modern .nextActionLine{
  border-color:rgba(129,140,248,.28);
  background:linear-gradient(135deg,rgba(30,41,59,.70),rgba(15,23,42,.54));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
body.ui-modern .nextActionLine b{color:#a5b4fc;}
.cardTop .badge{letter-spacing:.02em;text-transform:uppercase;}
@media(max-width:760px){
  .nextActionLine{font-size:11.5px!important;padding:7px 9px!important;margin-top:8px!important;}
  .cardTop .badge{font-size:10px!important;max-width:132px!important;}
}

/* =========================================================
   v4.8.7 Mobile Reading Legend / Quick Help
   Frontend UI help only. Applies to Classic + Modern UI.
   ========================================================= */
.signalHelpShell{
  margin:14px 0 16px;
  padding:10px;
  border:1px solid rgba(96,165,250,.20);
  border-radius:18px;
  background:rgba(15,23,42,.58);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.signalHelpTop{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.signalLegendToggle,.readCardsBtn{
  border:1px solid rgba(96,165,250,.28);
  border-radius:999px;
  background:rgba(15,23,42,.82);
  color:#dbeafe;
  font-weight:800;
  letter-spacing:.01em;
  padding:9px 14px;
  cursor:pointer;
  min-height:40px;
}
.signalLegendToggle{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-width:210px;
}
.legendChevron{transition:transform .18s ease;opacity:.88;}
.signalLegendToggle[aria-expanded="true"] .legendChevron{transform:rotate(180deg);}
.readCardsBtn{color:#fff;background:linear-gradient(135deg,#3b82f6,#6d5dfc);border-color:rgba(147,197,253,.42);}
.signalLegendBody{
  margin-top:10px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
.signalLegendBody span{
  display:flex;
  align-items:center;
  gap:7px;
  padding:8px 10px;
  border-radius:13px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(2,6,23,.36);
  color:#cbd5e1;
  font-size:12px;
  line-height:1.25;
}
.dotLegend{width:10px;height:10px;border-radius:50%;display:inline-block;flex:0 0 10px;}
.greenDot{background:#22c55e;box-shadow:0 0 10px rgba(34,197,94,.40);}
.yellowDot{background:#facc15;box-shadow:0 0 10px rgba(250,204,21,.35);}
.redDot{background:#ef4444;box-shadow:0 0 10px rgba(239,68,68,.35);}
.blueDot{background:#60a5fa;box-shadow:0 0 10px rgba(96,165,250,.35);}
body.ui-modern .signalHelpShell{
  border-color:rgba(129,140,248,.24);
  background:linear-gradient(135deg,rgba(15,23,42,.72),rgba(30,41,59,.42));
}
body.ui-modern .signalLegendToggle,
body.ui-modern .readCardsBtn{
  border-color:rgba(129,140,248,.34);
  box-shadow:0 8px 22px rgba(15,23,42,.20), inset 0 1px 0 rgba(255,255,255,.05);
}
.signalHelpModal{z-index:9999;}
.signalHelpCardModal{
  position:relative;
  width:min(920px,calc(100vw - 28px));
  max-height:88vh;
  overflow:auto;
  border-radius:24px;
  padding:22px;
  border:1px solid rgba(96,165,250,.28);
  background:linear-gradient(135deg,#0b1220,#111c31);
  color:#e5eefc;
  box-shadow:0 28px 70px rgba(0,0,0,.55);
}
.signalHelpCardModal h2{margin:0 0 14px;font-size:24px;}
.signalHelpCardModal h3{margin:0 0 8px;color:#bfdbfe;font-size:15px;}
.signalHelpCardModal section{
  border:1px solid rgba(148,163,184,.16);
  background:rgba(2,6,23,.28);
  border-radius:16px;
  padding:14px;
}
.signalHelpModalGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.signalHelpCardModal ol,.signalHelpCardModal ul{margin:0;padding-left:18px;color:#dbeafe;line-height:1.5;}
.helpDefinitionList{display:grid;grid-template-columns:minmax(105px,.7fr) 1fr;gap:7px 10px;margin:0;align-items:start;}
.helpDefinitionList dt{font-weight:900;color:#fff;font-size:12px;letter-spacing:.02em;}
.helpDefinitionList dd{margin:0;color:#cbd5e1;font-size:12px;line-height:1.35;}
.helpDefinitionList.compact{grid-template-columns:minmax(90px,.55fr) 1fr;}
.modalCloseBtn{
  position:absolute;right:14px;top:12px;
  width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(148,163,184,.28);
  background:rgba(15,23,42,.86);color:#e5eefc;
  font-size:24px;line-height:1;cursor:pointer;
}
body:not(.ui-modern) .signalHelpShell,
body:not(.ui-modern) .signalHelpCardModal{
  background:#0f1b2d;
  border-color:rgba(90,128,180,.28);
}
@media(max-width:760px){
  .signalHelpShell{margin:10px 0 14px;padding:9px;border-radius:16px;}
  .signalHelpTop{display:grid;grid-template-columns:1fr;gap:8px;}
  .signalLegendToggle,.readCardsBtn{width:100%;min-height:38px;padding:8px 12px;font-size:13px;}
  .signalLegendBody{grid-template-columns:1fr;gap:7px;}
  .signalLegendBody span{font-size:11.5px;padding:7px 9px;}
  .signalHelpCardModal{width:calc(100vw - 18px);max-height:86vh;padding:18px 14px;border-radius:20px;}
  .signalHelpCardModal h2{font-size:20px;padding-right:34px;}
  .signalHelpModalGrid{grid-template-columns:1fr;}
  .helpDefinitionList,.helpDefinitionList.compact{grid-template-columns:1fr;gap:3px;}
  .helpDefinitionList dt{margin-top:5px;}
}

/* v4.8.8 quick fix: keep Signal Color Legend collapsed until user expands it.
   Some browsers allow the explicit grid display below to override the hidden attribute. */
.signalLegendBody[hidden]{display:none !important;}

/* =========================================================
   v4.8.9 Mobile View Mode one-row compact fix
   UI/UX only: keep View Mode label + Simple/Pro in one row on mobile.
   Applies to Classic + Modern UI.
   ========================================================= */
@media(max-width:760px){
  .modeBox,
  .symbolModeBox{
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr) minmax(0,1fr)!important;
    align-items:center!important;
    gap:8px!important;
    padding:9px 10px!important;
    overflow:visible!important;
  }
  .modeBox span,
  .symbolModeBox span{
    margin:0!important;
    white-space:nowrap!important;
    font-size:11px!important;
    line-height:1!important;
    align-self:center!important;
  }
  .modeBox button,
  .symbolModeBox button,
  #simpleBtn,
  #proBtn{
    min-width:0!important;
    width:100%!important;
    margin:0!important;
    padding:8px 10px!important;
    font-size:12px!important;
    line-height:1.15!important;
    white-space:nowrap!important;
  }
}
@media(max-width:390px){
  .modeBox,
  .symbolModeBox{gap:6px!important;padding-left:8px!important;padding-right:8px!important;}
  .modeBox span,
  .symbolModeBox span{font-size:10px!important;letter-spacing:.04em!important;}
  .modeBox button,
  .symbolModeBox button,
  #simpleBtn,
  #proBtn{padding-left:7px!important;padding-right:7px!important;font-size:11.5px!important;}
}


/* =========================================================
   v4.8.10 Mobile compact View Mode + Help row fix
   UI/UX only: keep Signals view mode and help buttons compact on mobile.
   ========================================================= */
@media(max-width:760px){
  #signals .symbolModeBox{
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr) minmax(0,1fr)!important;
    align-items:center!important;
    gap:7px!important;
    padding:9px 10px!important;
    overflow:hidden!important;
  }
  #signals .symbolModeBox span{
    grid-column:auto!important;
    margin:0!important;
    padding:0!important;
    white-space:nowrap!important;
    font-size:10px!important;
    line-height:1!important;
    letter-spacing:.045em!important;
  }
  #signals .symbolModeBox #simpleBtn,
  #signals .symbolModeBox #proBtn{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:8px 6px!important;
    font-size:11.5px!important;
    line-height:1.05!important;
    white-space:nowrap!important;
  }

  .signalHelpTop{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:7px!important;
    align-items:center!important;
  }
  .signalLegendToggle,
  .readCardsBtn{
    width:100%!important;
    min-width:0!important;
    min-height:34px!important;
    padding:7px 8px!important;
    font-size:11px!important;
    line-height:1.05!important;
    white-space:nowrap!important;
  }
  .signalLegendToggle{
    gap:5px!important;
  }
  .signalLegendToggle span:first-child{
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
}
@media(max-width:390px){
  #signals .symbolModeBox{grid-template-columns:auto minmax(0,1fr) minmax(0,1fr)!important;gap:5px!important;}
  #signals .symbolModeBox span{font-size:9px!important;}
  #signals .symbolModeBox #simpleBtn,
  #signals .symbolModeBox #proBtn{font-size:10.5px!important;padding:7px 4px!important;}
  .signalLegendToggle,.readCardsBtn{font-size:10px!important;padding-left:6px!important;padding-right:6px!important;}
}

/* v4.9.0 - LEAPS Ideas actionable buckets */
#leaps .cards{display:block;}
.leapsHub{display:grid;gap:16px;}
.leapsHeaderCard{background:linear-gradient(145deg,#101827,#081322);border:1px solid #263a5a;border-radius:24px;padding:18px;display:flex;justify-content:space-between;gap:16px;align-items:flex-start;box-shadow:0 18px 50px rgba(0,0,0,.24);}
.leapsHeaderCard h2{margin:0 0 6px;font-size:26px;}
.leapsHeaderCard p{margin:0;color:#abc0dc;max-width:760px;line-height:1.35;}
.leapsCounts{display:grid;grid-template-columns:repeat(2,minmax(150px,1fr));gap:8px;min-width:360px;}
.leapsCounts span{display:flex;justify-content:space-between;gap:8px;border:1px solid #2e4264;background:#0b1322;border-radius:999px;padding:8px 11px;font-weight:900;color:#d8e7ff;font-size:12px;white-space:nowrap;}
.leapsCounts b{color:#fff;}
.leapsEdu{background:#0b1322;border:1px solid #263a5a;border-radius:20px;padding:12px 14px;color:#dbe8ff;}
.leapsEdu summary{cursor:pointer;font-weight:900;color:#d7e4ff;}
.leapsEdu p{font-size:13px;line-height:1.4;margin:8px 0 0;color:#aebfd8;}
.leapsBucket{display:grid;gap:12px;}
.leapsBucket h3{font-size:18px;letter-spacing:.01em;margin:0;color:#f2f7ff;}
.leapsBucketGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
.leapsCard{position:relative;border-radius:24px;overflow:hidden;}
.leapsCard:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:#6ea0ff;opacity:.9;}
.leaps-starter:before{background:#5ff0a2;}.leaps-pullback:before{background:#ffd45c;}.leaps-breakout:before{background:#57b7ff;}.leaps-reset:before{background:#a9c2e8;}
.leapsActionBadge{font-size:12px;white-space:nowrap;box-shadow:0 0 0 1px rgba(255,255,255,.06) inset;}
.leaps-starter .leapsActionBadge{background:#0e3a29;color:#7dffb0;border:1px solid #1f8c5d;}
.leaps-pullback .leapsActionBadge{background:#3e3212;color:#ffdf75;border:1px solid #876c1e;}
.leaps-breakout .leapsActionBadge{background:#12365a;color:#87cbff;border:1px solid #2d6faa;}
.leaps-reset .leapsActionBadge{background:#253044;color:#d2e3ff;border:1px solid #4b5f82;}
.leapsReason{margin:8px 0;color:#c4d3eb;line-height:1.35;}
.leapsActionLine,.leapsActionText{border:1px solid #283b5c;background:#08111f;border-radius:14px;padding:10px 12px;color:#d8e7ff;margin:10px 0 0;line-height:1.35;}
.leapsActionText{font-size:13px;color:#b9c9e1;}
.leapsMetrics{grid-template-columns:repeat(3,1fr);}
.leapsMetrics .metric b{font-size:14px;line-height:1.15;}
.leapsSrGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;}
.leapsSrGrid>div{background:#080e1a;border:1px solid #24334e;border-radius:14px;padding:10px;}
.leapsSrGrid small{display:block;text-transform:uppercase;letter-spacing:.08em;color:#9ab0cc;font-size:11px;margin-bottom:5px;}
.leapsSrGrid b{font-size:12px;display:block;line-height:1.25;}
.noLeaps{background:#080e1a;border:1px dashed #31415f;border-radius:16px;padding:12px;margin:0;}
.leapsDisclaimer{margin:4px 0 0;color:#94a9c8;}
body.ui-modern .leapsHeaderCard,body.ui-modern .leapsCard{background:linear-gradient(145deg,rgba(20,31,56,.96),rgba(8,16,31,.96));border-color:#2c456e;box-shadow:0 18px 60px rgba(92,118,255,.10), inset 0 0 0 1px rgba(255,255,255,.03);}
body.ui-modern .leapsCounts span,body.ui-modern .leapsEdu,body.ui-modern .leapsSrGrid>div,body.ui-modern .leapsActionLine,body.ui-modern .leapsActionText{border-color:#344b76;background:rgba(8,16,32,.82);}
@media(max-width:1000px){
  .leapsHeaderCard{display:grid;padding:14px;border-radius:20px;}
  .leapsHeaderCard h2{font-size:22px;}
  .leapsHeaderCard p{font-size:13px;}
  .leapsCounts{min-width:0;grid-template-columns:1fr 1fr;gap:7px;}
  .leapsCounts span{font-size:11px;padding:8px;}
  .leapsBucketGrid{grid-template-columns:1fr;gap:12px;}
  .leapsCard{padding:14px;}
  .leapsCardTop{align-items:flex-start;}
  .leapsActionBadge{font-size:11px;padding:7px 8px;max-width:150px;text-align:center;}
  .leapsMetrics{grid-template-columns:repeat(2,1fr);gap:8px;}
  .leapsSrGrid{grid-template-columns:1fr;}
}
@media(max-width:430px){
  .leapsCounts{grid-template-columns:1fr;}
  .leapsHeaderCard{gap:10px;}
  .leapsMetrics{grid-template-columns:1fr 1fr;}
  .leapsActionBadge{max-width:135px;}
}

/* v4.9.1 - compact action badge icons */
.badge.actionBadge{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;line-height:1.15;}
@media (max-width: 640px){
  .badge.actionBadge{gap:3px;font-size:.72rem;padding:5px 7px;max-width:44vw;justify-content:center;}
}

/* v4.9.3 - LEAPS compact cards + subtle Signal Card left glow */
/* UI-only: keep LEAPS logic/data unchanged while making the tab easier to scan. */
.leapsHub{gap:12px!important;}
.leapsHeaderCard{padding:14px 16px!important;border-radius:20px!important;}
.leapsHeaderCard h2{font-size:22px!important;margin-bottom:4px!important;}
.leapsHeaderCard p{font-size:13px!important;line-height:1.28!important;}
.leapsCounts{gap:6px!important;min-width:320px!important;}
.leapsCounts span{padding:7px 10px!important;font-size:11px!important;}
.leapsBucket{gap:9px!important;}
.leapsBucket h3{font-size:16px!important;margin-top:2px!important;}
.leapsBucketGrid{gap:12px!important;}
.leapsCard{padding:13px 14px!important;border-radius:20px!important;}
.leapsCard .symbol{font-size:23px!important;}
.leapsCard .price{font-size:20px!important;margin:5px 0!important;}
.leapsReason{font-size:13px!important;line-height:1.26!important;margin:5px 0!important;}
.leapsActionLine,.leapsActionText{padding:8px 10px!important;margin-top:7px!important;font-size:12.5px!important;line-height:1.28!important;border-radius:12px!important;}
.leapsMetrics{gap:7px!important;margin-top:8px!important;}
.leapsMetrics .metric{padding:8px!important;border-radius:12px!important;}
.leapsMetrics .metric small{font-size:10px!important;}
.leapsMetrics .metric b{font-size:13px!important;}
.leapsSrGrid{gap:7px!important;margin-top:7px!important;}
.leapsSrGrid>div{padding:8px!important;border-radius:12px!important;}
.leapsSrGrid small{font-size:10px!important;margin-bottom:3px!important;}
.leapsSrGrid b{font-size:11.5px!important;line-height:1.18!important;}
.leapsEdu{padding:10px 12px!important;border-radius:16px!important;}
.leapsEdu p{font-size:12.5px!important;line-height:1.32!important;}

/* Match the LEAPS-style left accent on Symbol Cards, without changing card logic. */
.card{position:relative!important;overflow:hidden;}
.card:not(.leapsCard)::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  border-radius:20px 0 0 20px;
  background:linear-gradient(180deg,#6ea0ff,#3dd7ff);
  opacity:.42;
  pointer-events:none;
}
body.ui-modern .card:not(.leapsCard)::before{
  width:5px;
  background:linear-gradient(180deg,#8aa4ff,#34d4ff,#6f7cff);
  opacity:.68;
  box-shadow:0 0 18px rgba(93,140,255,.42);
}
.card.sigBuy:not(.leapsCard)::before,.card:has(.badge.sigBuy):not(.leapsCard)::before{background:linear-gradient(180deg,#59f0a0,#27c78f);opacity:.62;}
.card.sigHold:not(.leapsCard)::before,.card:has(.badge.sigHold):not(.leapsCard)::before{background:linear-gradient(180deg,#ffe073,#f4b642);opacity:.58;}
.card.sigSell:not(.leapsCard)::before,.card:has(.badge.sigSell):not(.leapsCard)::before{background:linear-gradient(180deg,#ff7b8b,#ff4d5f);opacity:.58;}

@media(max-width:1000px){
  .leapsHeaderCard{padding:12px!important;border-radius:18px!important;}
  .leapsHeaderCard h2{font-size:20px!important;}
  .leapsCounts{min-width:0!important;grid-template-columns:1fr 1fr!important;}
  .leapsCounts span{font-size:10.5px!important;padding:7px 8px!important;}
  .leapsCard{padding:12px!important;border-radius:18px!important;}
  .leapsCard .symbol{font-size:22px!important;}
  .leapsActionBadge{font-size:10.5px!important;padding:6px 7px!important;}
  .leapsMetrics{grid-template-columns:repeat(2,1fr)!important;}
  .leapsSrGrid{grid-template-columns:1fr 1fr!important;}
}
@media(max-width:430px){
  .leapsCounts{grid-template-columns:1fr!important;}
  .leapsSrGrid{grid-template-columns:1fr!important;}
  .leapsActionLine,.leapsActionText{font-size:12px!important;}
}

/* v4.9.4 Theme Consistency + Signal UI Stabilization Patch
   UI/UX only: no API, DB, Today’s Plan, scoring, refresh, login route or data-flow changes. */
:root{
  --sai-btn-h:42px;
  --sai-btn-pad-x:16px;
}

/* Modal/login safety: modal always sits above sticky/floating nav and visually hides the page behind it. */
.modal{z-index:10000!important;background:rgba(0,0,0,.72)!important;backdrop-filter:blur(8px)!important}
body.modalOpen{overflow:hidden!important}
body.modalOpen main > .tabs{z-index:1!important}
.modalCard{position:relative!important;z-index:10001!important}

/* Header/logo area: rounded admin-style shell without increasing height too much. */
.hero{
  margin:12px auto 10px!important;
  width:calc(100% - 28px)!important;
  max-width:1840px!important;
  border-radius:24px!important;
  border:1px solid rgba(90,119,165,.22)!important;
  padding:18px 24px!important;
  overflow:hidden!important;
}
.heroTagline{font-size:15px!important;line-height:1.3!important;margin:8px 0 0!important;color:#b9c9e8!important}
.siteLogoFull{max-height:118px!important;width:auto!important;object-fit:contain!important}
body.ui-modern .hero{border-color:rgba(155,184,255,.24)!important;box-shadow:0 18px 44px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05)!important}
body.ui-modern .heroTagline{color:#cbd9ff!important}

/* Dynamic market/risk state color lanes that work in Modern and Classic despite theme overrides. */
.riskBadge.riskOn{background:#0e3a29!important;border-color:#247b55!important;color:#67f0a3!important}
.riskBadge.riskNeutral{background:#4a3b12!important;border-color:#8a7625!important;color:#ffd966!important}
.riskBadge.riskOff{background:#3a1111!important;border-color:#8c3030!important;color:#ff9a9a!important}
body.ui-modern .riskBadge.riskOn{background:linear-gradient(135deg,rgba(20,95,57,.52),rgba(8,18,28,.96))!important;border-color:rgba(53,208,127,.52)!important;color:#8df5b9!important}
body.ui-modern .riskBadge.riskNeutral{background:linear-gradient(135deg,rgba(116,86,18,.56),rgba(18,16,10,.96))!important;border-color:rgba(245,201,74,.52)!important;color:#ffe39a!important}
body.ui-modern .riskBadge.riskOff{background:linear-gradient(135deg,rgba(116,31,39,.56),rgba(23,10,13,.96))!important;border-color:rgba(255,111,125,.52)!important;color:#ffc2c8!important}
#marketStatus.marketOpen{background:#173a2a!important;color:#7ff0b0!important;border-color:#2f8d5c!important}
#marketStatus.marketClosed{background:#263447!important;color:#d7e2f0!important;border-color:#42556f!important}
body.ui-modern #marketStatus.marketOpen{background:linear-gradient(135deg,rgba(20,95,57,.50),rgba(8,18,28,.96))!important;color:#8df5b9!important;border-color:rgba(53,208,127,.52)!important}
body.ui-modern #marketStatus.marketClosed{background:linear-gradient(135deg,rgba(30,44,74,.96),rgba(13,22,40,.96))!important;color:#dbe8ff!important;border-color:rgba(155,184,255,.28)!important}

/* Unified button sizing: keep newer controls consistent, compact and theme-correct. */
button,.ghost,.tab,.mini,.addBtn,.saveBtn,#refreshAll,#stopRefresh,.signalLegendToggle,.readCardsBtn,.modeBox button,.cardModeBtn{
  min-height:var(--sai-btn-h);
  line-height:1.1!important;
}
.mini{padding:9px 13px!important;min-width:92px!important;text-align:center!important}
.actions{align-items:center!important}
.actions .mini{height:38px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;white-space:nowrap!important}
.chartMini,.refreshMini,.removeMini{background:#121b2c!important;border:1px solid #2b3954!important;color:#eef5ff!important;box-shadow:none!important}
body.ui-modern .chartMini,body.ui-modern .refreshMini,body.ui-modern .removeMini{background:rgba(15,27,48,.86)!important;border:1px solid rgba(155,184,255,.28)!important;color:#eef5ff!important;box-shadow:none!important}
.incomeMini.incomeOn{background:linear-gradient(135deg,#17864a,#0d5331)!important;border-color:rgba(53,208,127,.58)!important;color:#d4ffe4!important;box-shadow:0 8px 18px rgba(53,208,127,.16)!important}
.incomeMini.incomeOff{background:#121b2c!important;border:1px solid #2b3954!important;color:#eef5ff!important;box-shadow:none!important}
body.ui-modern .incomeMini.incomeOff{background:rgba(15,27,48,.86)!important;border-color:rgba(155,184,255,.28)!important;color:#eef5ff!important;box-shadow:none!important}

/* Simple/Pro selected state: one selected, one inactive, across Modern + Classic. */
.modeBox .ghost,.cardModeBtn,#incomeSimpleBtn,#incomeProBtn,#cspScrollBtn,#ccScrollBtn,.signalLegendToggle,.readCardsBtn,.newsNav .ghost{
  background:#121b2c!important;border:1px solid #2b3954!important;color:#d8e6ff!important;box-shadow:none!important;border-radius:999px!important;
}
.modeBox .modeActive,.modeBox .ghost.modeActive,.cardModeBtn.active,#incomeSimpleBtn.modeActive,#incomeProBtn.modeActive,.newsNav .activeNews{
  background:#4f7df3!important;border-color:#80a2ff!important;color:#fff!important;box-shadow:0 8px 18px rgba(79,125,243,.22)!important;
}
body.ui-modern .modeBox .ghost,body.ui-modern .cardModeBtn,body.ui-modern #incomeSimpleBtn,body.ui-modern #incomeProBtn,body.ui-modern #cspScrollBtn,body.ui-modern #ccScrollBtn,body.ui-modern .signalLegendToggle,body.ui-modern .readCardsBtn,body.ui-modern .newsNav .ghost{
  background:rgba(15,27,48,.86)!important;border:1px solid rgba(155,184,255,.28)!important;color:#d8e6ff!important;box-shadow:none!important;
}
body.ui-modern .modeBox .modeActive,body.ui-modern .modeBox .ghost.modeActive,body.ui-modern .cardModeBtn.active,body.ui-modern #incomeSimpleBtn.modeActive,body.ui-modern #incomeProBtn.modeActive,body.ui-modern .newsNav .activeNews{
  background:linear-gradient(135deg,#4f7df3,#7c5cff)!important;border-color:rgba(255,255,255,.32)!important;color:#fff!important;box-shadow:0 10px 22px rgba(79,125,243,.26)!important;
}

/* Signal help buttons: same height, theme-correct, not highlighted unless legend is open. */
.signalHelpTop{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;align-items:center!important}
.signalLegendToggle,.readCardsBtn{height:42px!important;padding:9px 14px!important;text-align:center!important;font-size:13px!important;display:flex!important;align-items:center!important;justify-content:center!important}
.signalLegendToggle[aria-expanded="true"]{background:#4f7df3!important;color:#fff!important;border-color:#80a2ff!important}
body.ui-modern .signalLegendToggle[aria-expanded="true"]{background:linear-gradient(135deg,#4f7df3,#7c5cff)!important;border-color:rgba(255,255,255,.32)!important;color:#fff!important}

/* KPI cards are now clickable filters. */
.kpiGrid .kpi{cursor:pointer!important;text-align:left!important;appearance:none!important;-webkit-appearance:none!important}
.kpiGrid .kpi.activeKpi{outline:2px solid rgba(255,255,255,.36)!important;box-shadow:0 0 0 3px rgba(79,125,243,.22),0 14px 28px rgba(0,0,0,.18)!important;transform:translateY(-1px)!important}
.kpiGrid .kpi:focus-visible{outline:2px solid #8fb4ff!important;outline-offset:2px!important}

/* Chart moved out of main page into modal for cleaner desktop/mobile card scanning. */
.work{grid-template-columns:1fr!important}
.chartBox{display:none!important}
@media(min-width:1180px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(min-width:760px) and (max-width:1179px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
.chartModalCard{max-width:min(1280px,96vw)!important;width:min(1280px,96vw)!important;padding:20px!important}
.chartModalHead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:12px}
.tvChartModal{height:min(74vh,760px);min-height:520px;border-radius:18px;overflow:hidden;background:#050912;border:1px solid rgba(155,184,255,.18)}
body.ui-modern .chartModalCard{background:linear-gradient(180deg,rgba(18,28,47,.98),rgba(10,17,31,.98))!important;border-color:rgba(155,184,255,.22)!important}

/* Profile readonly username field. */
.profileGrid input[readonly]{opacity:.88;background:#0b1324!important;color:#aebdd5!important;cursor:not-allowed!important}

/* Mobile polish: compact header and controls. */
@media(max-width:760px){
  .hero{width:calc(100% - 16px)!important;margin:8px auto!important;padding:14px 16px!important;border-radius:20px!important}
  .siteLogoFull{max-height:82px!important;max-width:100%!important}
  .heroTagline{font-size:13.5px!important;line-height:1.25!important}
  .topActions button,.topActions .pill,.topActions .userPill{min-height:40px!important;padding:9px 12px!important;font-size:13px!important}
  .signalHelpTop{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .signalLegendToggle,.readCardsBtn{height:38px!important;padding:8px 9px!important;font-size:11.5px!important;white-space:nowrap!important}
  .modeBox.symbolModeBox{display:grid!important;grid-template-columns:auto 1fr 1fr!important;gap:8px!important;align-items:center!important;border-radius:18px!important;padding:10px!important}
  .modeBox.symbolModeBox span{font-size:10.5px!important;white-space:nowrap!important}
  .modeBox.symbolModeBox button{height:38px!important;min-height:38px!important;padding:8px 10px!important;margin:0!important}
  .actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .actions .mini{width:100%!important;min-width:0!important;height:38px!important;font-size:12px!important;padding:8px 8px!important}
  .kpiGrid{grid-template-columns:repeat(5,1fr)!important;gap:6px!important}
  .kpiGrid .kpi{text-align:center!important;padding:8px 5px!important}
  .tvChartModal{height:70vh;min-height:430px}
  .chartModalCard{padding:14px!important;border-radius:20px!important}
}

/* v4.9.5 Final UI Polish + Action Filter Stabilization
   UI/UX only: no API, DB, calculation, Today’s Plan, Symbol Card scoring, Income logic, News feed logic, routes, or auth validation changes. */

/* Compact login-first auth modal */
.authModalCard{
  max-width:720px!important;
  padding:22px!important;
  border-radius:24px!important;
}
.authCompactHead{
  padding:0 44px 10px 0!important;
  border-bottom:1px solid rgba(148,163,184,.16)!important;
  margin-bottom:14px!important;
}
.authCompactHead h2{font-size:24px!important;margin:4px 0 4px!important;line-height:1.1!important;}
.authCompactHead p{font-size:13px!important;line-height:1.35!important;margin:0!important;max-width:620px!important;}
.authGridCompact{
  display:block!important;
  margin-top:0!important;
}
.authPanel{
  gap:10px!important;
  padding:14px!important;
  border-radius:18px!important;
  background:#0b1324!important;
  border:1px solid rgba(148,163,184,.18)!important;
}
.authPanel h3{font-size:18px!important;margin:0 0 3px!important;}
.authPanel input{padding:11px 12px!important;border-radius:12px!important;font-size:14px!important;}
.authPanel button{min-height:40px!important;padding:10px 14px!important;border-radius:999px!important;}
.authPanel small{font-size:12px!important;color:#aebdd5!important;line-height:1.3!important;}
.authSwitchBtn{margin-top:0!important;background:#121b2c!important;border:1px solid #2b3954!important;color:#dbe8ff!important;}
.signupHead{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;}
.signupHead h3{margin:0!important;}
.signupHead .authSwitchBtn{min-width:120px!important;}
.authBenefitsCompact{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:6px!important;
  margin:0 0 4px!important;
}
.authBenefitsCompact span{
  padding:5px 8px!important;
  border-radius:999px!important;
  background:rgba(79,125,243,.12)!important;
  border:1px solid rgba(110,160,255,.22)!important;
  color:#cfe0ff!important;
  font-size:11px!important;
  font-weight:800!important;
}
body.ui-modern .authPanel{
  background:linear-gradient(145deg,rgba(13,23,42,.96),rgba(8,15,28,.98))!important;
  border-color:rgba(155,184,255,.22)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
}
body.ui-modern .authCompactHead .brand{color:#8fd4ff!important;}
body.ui-modern .authBenefitsCompact span{background:rgba(62,211,255,.10)!important;border-color:rgba(62,211,255,.22)!important;color:#d6f3ff!important;}
@media(max-width:760px){
  .authModalCard{max-width:calc(100vw - 18px)!important;padding:16px!important;border-radius:20px!important;max-height:88vh!important;}
  .authCompactHead{padding-right:34px!important;margin-bottom:10px!important;}
  .authCompactHead h2{font-size:20px!important;}
  .authCompactHead p{font-size:12px!important;}
  .authPanel{padding:12px!important;gap:8px!important;}
  .authPanel input{padding:10px 11px!important;font-size:13px!important;}
  .authBenefitsCompact span{font-size:10.5px!important;padding:4px 7px!important;}
  .signupHead{align-items:flex-start!important;}
}

/* Signals compact control row: help buttons left, View Mode right on desktop; clean wrap on mobile. */
.signalsControlRow{
  display:grid!important;
  grid-template-columns:minmax(280px, .75fr) minmax(280px, .9fr)!important;
  gap:12px!important;
  align-items:stretch!important;
  margin:10px 0 14px!important;
}
.signalsControlRow .signalHelpShell,
.signalsControlRow .symbolModeBox{
  margin:0!important;
  min-height:54px!important;
}
.signalsControlRow .signalHelpShell{
  background:#101827!important;
  border:1px solid #263348!important;
  border-radius:22px!important;
  padding:10px!important;
}
.signalsControlRow .signalHelpTop{
  height:100%!important;
}
.signalsControlRow .symbolModeBox{
  display:flex!important;
  justify-content:flex-end!important;
  align-items:center!important;
  gap:8px!important;
  padding:10px!important;
}
body.ui-modern .signalsControlRow .signalHelpShell,
body.ui-modern .signalsControlRow .symbolModeBox{
  background:rgba(9,15,28,.82)!important;
  border-color:rgba(155,184,255,.24)!important;
  box-shadow:0 12px 28px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04)!important;
}
.signalLegendToggle,.readCardsBtn{
  background:#121b2c!important;
  border:1px solid #2b3954!important;
  color:#d8e6ff!important;
  box-shadow:none!important;
}
.readCardsBtn:hover,.signalLegendToggle:hover{
  border-color:#6ea0ff!important;
  background:#17223a!important;
}
body.ui-modern .readCardsBtn,body.ui-modern .signalLegendToggle{
  background:rgba(15,27,48,.86)!important;
  border-color:rgba(155,184,255,.28)!important;
  color:#d8e6ff!important;
  box-shadow:none!important;
}
body.ui-modern .readCardsBtn:hover,body.ui-modern .signalLegendToggle:hover{
  border-color:rgba(99,215,255,.42)!important;
  background:rgba(22,41,70,.94)!important;
  box-shadow:0 8px 18px rgba(79,125,243,.13)!important;
}
.signalLegendToggle[aria-expanded="true"]{background:#4f7df3!important;border-color:#80a2ff!important;color:#fff!important;}
body.ui-modern .signalLegendToggle[aria-expanded="true"]{background:linear-gradient(135deg,#4f7df3,#7c5cff)!important;border-color:rgba(255,255,255,.32)!important;color:#fff!important;}
.signalLegendBody[hidden]{display:none!important;}
.signalLegendBody{grid-column:1/-1!important;margin-top:8px!important;}
@media(max-width:900px){
  .signalsControlRow{grid-template-columns:1fr!important;gap:8px!important;}
  .signalsControlRow .symbolModeBox{justify-content:flex-start!important;}
}
@media(max-width:760px){
  .signalsControlRow{margin:8px 0 10px!important;}
  .signalsControlRow .signalHelpShell{padding:8px!important;border-radius:18px!important;}
  .signalsControlRow .signalHelpTop{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important;}
  .signalLegendToggle,.readCardsBtn{height:36px!important;min-height:36px!important;padding:7px 6px!important;font-size:10.5px!important;white-space:nowrap!important;}
  .signalsControlRow .symbolModeBox{display:grid!important;grid-template-columns:auto 1fr 1fr!important;gap:7px!important;padding:8px!important;border-radius:18px!important;min-height:46px!important;}
  .signalsControlRow .symbolModeBox span{font-size:10px!important;white-space:nowrap!important;padding:0!important;align-self:center!important;}
  .signalsControlRow .symbolModeBox button{min-height:35px!important;height:35px!important;padding:7px 8px!important;font-size:11px!important;margin:0!important;}
}

/* Action filter chips under KPI cards. */
.actionFilterBar{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  flex-wrap:wrap!important;
  margin:-2px 0 14px!important;
  padding:10px 12px!important;
  border-radius:18px!important;
  background:#101827!important;
  border:1px solid #263348!important;
}
.actionFilterLabel{
  color:#9fb0ca!important;
  font-size:11px!important;
  font-weight:900!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  margin-right:2px!important;
}
.actionFilterChip{
  min-height:34px!important;
  padding:8px 11px!important;
  border-radius:999px!important;
  background:#121b2c!important;
  border:1px solid #2b3954!important;
  color:#d8e6ff!important;
  font-size:12px!important;
  font-weight:900!important;
  box-shadow:none!important;
}
.actionFilterChip b{font-size:11px!important;color:#a8c8ff!important;margin-left:4px!important;}
.actionFilterChip.activeActionFilter{
  background:#4f7df3!important;
  border-color:#80a2ff!important;
  color:#fff!important;
  box-shadow:0 8px 18px rgba(79,125,243,.22)!important;
}
.actionFilterChip.activeActionFilter b{color:#fff!important;}
body.ui-modern .actionFilterBar{
  background:rgba(9,15,28,.82)!important;
  border-color:rgba(155,184,255,.24)!important;
  box-shadow:0 12px 28px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04)!important;
}
body.ui-modern .actionFilterChip{
  background:rgba(15,27,48,.86)!important;
  border-color:rgba(155,184,255,.28)!important;
  color:#d8e6ff!important;
}
body.ui-modern .actionFilterChip.activeActionFilter{
  background:linear-gradient(135deg,#4f7df3,#7c5cff)!important;
  border-color:rgba(255,255,255,.32)!important;
  color:#fff!important;
  box-shadow:0 10px 22px rgba(79,125,243,.26)!important;
}
@media(max-width:760px){
  .actionFilterBar{gap:6px!important;padding:8px!important;margin-bottom:10px!important;}
  .actionFilterLabel{flex:0 0 100%!important;font-size:10px!important;}
  .actionFilterChip{min-height:31px!important;padding:7px 8px!important;font-size:10.4px!important;}
  .actionFilterChip b{font-size:10px!important;}
}

/* Final Modern/Classic button-state cleanup. Normal buttons stay neutral; selected states are explicit. */
body.ui-modern .actions .chartMini,
body.ui-modern .actions .refreshMini,
body.ui-modern .actions .removeMini{
  background:rgba(15,27,48,.86)!important;
  border-color:rgba(155,184,255,.28)!important;
  color:#eef5ff!important;
  box-shadow:none!important;
}
body.ui-modern .actions .incomeMini.incomeOn,
.actions .incomeMini.incomeOn{
  background:linear-gradient(135deg,#17864a,#0d5331)!important;
  border-color:rgba(53,208,127,.58)!important;
  color:#d4ffe4!important;
  box-shadow:0 8px 18px rgba(53,208,127,.16)!important;
}
body.ui-modern .actions .incomeMini.incomeOff,
.actions .incomeMini.incomeOff{
  background:#121b2c!important;
  border:1px solid #2b3954!important;
  color:#eef5ff!important;
  box-shadow:none!important;
}
body.ui-modern .actions .incomeMini.incomeOff{background:rgba(15,27,48,.86)!important;border-color:rgba(155,184,255,.28)!important;}
.modeBox button:not(.modeActive):not([aria-current="true"]),
.cardModeBtn:not(.active),
body.ui-modern .modeBox button:not(.modeActive):not([aria-current="true"]),
body.ui-modern .cardModeBtn:not(.active){
  background:#121b2c!important;
  border-color:#2b3954!important;
  color:#d8e6ff!important;
  box-shadow:none!important;
}
body.ui-modern .modeBox button:not(.modeActive):not([aria-current="true"]),
body.ui-modern .cardModeBtn:not(.active){
  background:rgba(15,27,48,.86)!important;
  border-color:rgba(155,184,255,.28)!important;
}
.modeBox button.modeActive,.modeBox button[aria-current="true"],.cardModeBtn.active,
body.ui-modern .modeBox button.modeActive,body.ui-modern .modeBox button[aria-current="true"],body.ui-modern .cardModeBtn.active{
  background:linear-gradient(135deg,#4f7df3,#7c5cff)!important;
  border-color:rgba(255,255,255,.32)!important;
  color:#fff!important;
  box-shadow:0 10px 22px rgba(79,125,243,.24)!important;
}

/* Market/command colors: keep informative green/yellow/red in Modern instead of all-blue. */
body.ui-modern .cmd.buyBlock{background:linear-gradient(135deg,rgba(20,95,57,.52),rgba(8,18,28,.96))!important;border-color:rgba(53,208,127,.52)!important;}
body.ui-modern .cmd.holdBlock{background:linear-gradient(135deg,rgba(116,86,18,.56),rgba(18,16,10,.96))!important;border-color:rgba(245,201,74,.52)!important;}
body.ui-modern .cmd.redBlock{background:linear-gradient(135deg,rgba(116,31,39,.56),rgba(23,10,13,.96))!important;border-color:rgba(255,111,125,.52)!important;}
.cmd.holdBlock{border-color:#8a7625!important;background:linear-gradient(145deg,#332b14,#18160e)!important;}

/* Symbol-card left accent now follows the action badge instead of generic card color. */
.card.action-buy-watch:not(.leapsCard)::before{background:linear-gradient(180deg,#59f0a0,#27c78f)!important;opacity:.70!important;}
.card.action-pullback-buy:not(.leapsCard)::before{background:linear-gradient(180deg,#ffe073,#f4b642)!important;opacity:.70!important;}
.card.action-leaps-watch:not(.leapsCard)::before{background:linear-gradient(180deg,#8aa4ff,#7c5cff)!important;opacity:.72!important;}
.card.action-income-watch:not(.leapsCard)::before{background:linear-gradient(180deg,#f8d36a,#b98a1e)!important;opacity:.74!important;}
.card.action-hedge-watch:not(.leapsCard)::before{background:linear-gradient(180deg,#b48cff,#ff6f7d)!important;opacity:.72!important;}
.card.action-avoid-chase:not(.leapsCard)::before,
.card.action-avoid-wait:not(.leapsCard)::before{background:linear-gradient(180deg,#ff936d,#ff4d5f)!important;opacity:.72!important;}
.card.action-no-edge:not(.leapsCard)::before{background:linear-gradient(180deg,#78a6d8,#5e6f89)!important;opacity:.48!important;}
body.ui-modern .card:not(.leapsCard)::before{box-shadow:0 0 18px rgba(93,140,255,.24)!important;}

/* News ET format visual polish */
#newsUpdated{font-size:13px!important;color:#aebdd5!important;line-height:1.35!important;}


/* v4.9.6 hotfix: force Market/Risk dynamic colors to respect state in both themes. */
.riskBadge.riskOn,
.riskBadge[data-risk-state="riskOn"]{
  background:linear-gradient(145deg,#0e3a29,#0a2119)!important;
  border-color:#247b55!important;
  color:#67f0a3!important;
}
.riskBadge.riskNeutral,
.riskBadge[data-risk-state="riskNeutral"]{
  background:linear-gradient(145deg,#4a3b12,#211b0d)!important;
  border-color:#8a7625!important;
  color:#ffd966!important;
}
.riskBadge.riskOff,
.riskBadge[data-risk-state="riskOff"]{
  background:linear-gradient(145deg,#3a1111,#1e0b0b)!important;
  border-color:#8c3030!important;
  color:#ff9a9a!important;
}
body.ui-modern .riskBadge.riskOn,
body.ui-modern .riskBadge[data-risk-state="riskOn"]{
  background:linear-gradient(135deg,rgba(20,95,57,.62),rgba(8,18,28,.98))!important;
  border-color:rgba(53,208,127,.62)!important;
  color:#8df5b9!important;
  box-shadow:0 0 18px rgba(53,208,127,.16)!important;
}
body.ui-modern .riskBadge.riskNeutral,
body.ui-modern .riskBadge[data-risk-state="riskNeutral"]{
  background:linear-gradient(135deg,rgba(116,86,18,.66),rgba(18,16,10,.98))!important;
  border-color:rgba(245,201,74,.62)!important;
  color:#ffe39a!important;
  box-shadow:0 0 18px rgba(245,201,74,.14)!important;
}
body.ui-modern .riskBadge.riskOff,
body.ui-modern .riskBadge[data-risk-state="riskOff"]{
  background:linear-gradient(135deg,rgba(116,31,39,.66),rgba(23,10,13,.98))!important;
  border-color:rgba(255,111,125,.62)!important;
  color:#ffc2c8!important;
  box-shadow:0 0 18px rgba(255,111,125,.14)!important;
}
.cmd.marketCmd.riskOn,
body.ui-modern .cmd.marketCmd.riskOn{
  background:linear-gradient(135deg,rgba(20,95,57,.58),rgba(8,18,28,.96))!important;
  border-color:rgba(53,208,127,.58)!important;
}
.cmd.marketCmd.riskNeutral,
body.ui-modern .cmd.marketCmd.riskNeutral{
  background:linear-gradient(135deg,rgba(116,86,18,.62),rgba(18,16,10,.96))!important;
  border-color:rgba(245,201,74,.58)!important;
}
.cmd.marketCmd.riskOff,
body.ui-modern .cmd.marketCmd.riskOff{
  background:linear-gradient(135deg,rgba(116,31,39,.62),rgba(23,10,13,.96))!important;
  border-color:rgba(255,111,125,.58)!important;
}
#marketStatus.marketOpen,
body.ui-modern #marketStatus.marketOpen{
  background:linear-gradient(135deg,rgba(20,95,57,.56),rgba(8,18,28,.96))!important;
  color:#8df5b9!important;
  border-color:rgba(53,208,127,.58)!important;
}
#marketStatus.marketClosed,
body.ui-modern #marketStatus.marketClosed{
  background:linear-gradient(135deg,rgba(30,44,74,.96),rgba(13,22,40,.96))!important;
  color:#dbe8ff!important;
  border-color:rgba(155,184,255,.32)!important;
}

/* =========================================================
   v4.9.7 Final Modern UI Button/Market Cleanup
   UI/UX only. Neutral buttons stay sharp/professional; active states are explicit.
   ========================================================= */
/* Remove the overly-bright modern fills from neutral control buttons. */
body.ui-modern button:not(.tab.active):not(.modeActive):not(.active):not(.activeKpi):not(.activeActionFilter):not(.incomeOn):not(.addBtn):not(#refreshAll):not(#stopBtn):not(#loginOpen):not(#logoutBtn):not(.danger){
  background:rgba(15,27,48,.88)!important;
  border:1px solid rgba(155,184,255,.28)!important;
  color:#e7f0ff!important;
  box-shadow:none!important;
}
body.ui-modern button:not(.tab.active):not(.modeActive):not(.active):not(.activeKpi):not(.activeActionFilter):not(.incomeOn):not(.addBtn):not(#refreshAll):not(#stopBtn):not(#loginOpen):not(#logoutBtn):not(.danger):hover{
  background:rgba(22,41,70,.94)!important;
  border-color:rgba(99,215,255,.42)!important;
  box-shadow:0 8px 18px rgba(79,125,243,.10)!important;
}
/* Explicit selected controls only. */
body.ui-modern .tab.active,
body.ui-modern .modeBox .modeActive,
body.ui-modern .cardModeBtn.active,
body.ui-modern #incomeSimpleBtn.modeActive,
body.ui-modern #incomeProBtn.modeActive,
body.ui-modern .newsNav .activeNews{
  background:linear-gradient(135deg,#4f7df3,#7c5cff)!important;
  border-color:rgba(255,255,255,.34)!important;
  color:#fff!important;
  box-shadow:0 10px 22px rgba(79,125,243,.22)!important;
}
body.ui-modern .actions .chartMini,
body.ui-modern .actions .refreshMini,
body.ui-modern .actions .removeMini,
body.ui-modern .actions .customizeMini{
  background:rgba(15,27,48,.88)!important;
  border:1px solid rgba(155,184,255,.28)!important;
  color:#e7f0ff!important;
  box-shadow:none!important;
}
body.ui-modern .actions .incomeMini.incomeOn{
  background:linear-gradient(135deg,#16874d,#0e5534)!important;
  border-color:rgba(53,208,127,.62)!important;
  color:#d9ffe9!important;
  box-shadow:0 9px 18px rgba(53,208,127,.16)!important;
}
body.ui-modern .actions .incomeMini.incomeOff{
  background:rgba(15,27,48,.88)!important;
  border-color:rgba(155,184,255,.28)!important;
  color:#e7f0ff!important;
  box-shadow:none!important;
}
/* Card Simple/Pro: prevent both-looking-selected in modern. */
body.ui-modern .cardModeToggle .cardModeBtn{background:rgba(15,27,48,.88)!important;border-color:rgba(155,184,255,.28)!important;color:#e7f0ff!important;box-shadow:none!important;}
body.ui-modern .cardModeToggle .cardModeBtn.active{background:linear-gradient(135deg,#4f7df3,#7c5cff)!important;border-color:rgba(255,255,255,.34)!important;color:#fff!important;box-shadow:0 10px 20px rgba(79,125,243,.22)!important;}
/* Help/View mode row: allow the legend body to expand normally and never overlap cards. */
.signalsControlRow{align-items:start!important;overflow:visible!important;}
.signalsControlRow .signalHelpShell{height:auto!important;min-height:0!important;overflow:visible!important;align-self:start!important;}
.signalsControlRow .signalHelpTop{height:auto!important;min-height:0!important;}
.signalLegendBody{position:static!important;width:100%!important;clear:both!important;z-index:1!important;}
.signalLegendBody[hidden]{display:none!important;}
body.ui-modern .signalLegendToggle,
body.ui-modern .readCardsBtn,
.signalLegendToggle,
.readCardsBtn{
  background:#121b2c!important;
  border:1px solid #2b3954!important;
  color:#d8e6ff!important;
  box-shadow:none!important;
}
body.ui-modern .signalLegendToggle,
body.ui-modern .readCardsBtn{background:rgba(15,27,48,.88)!important;border-color:rgba(155,184,255,.28)!important;color:#e7f0ff!important;}
.signalLegendToggle[aria-expanded="true"],
body.ui-modern .signalLegendToggle[aria-expanded="true"]{
  background:#17223a!important;
  border-color:#6ea0ff!important;
  color:#fff!important;
  box-shadow:0 8px 18px rgba(79,125,243,.12)!important;
}
/* Action filter chips: keep inactive chips neutral. */
body.ui-modern .actionFilterChip{background:rgba(15,27,48,.88)!important;border-color:rgba(155,184,255,.28)!important;color:#e7f0ff!important;box-shadow:none!important;}
body.ui-modern .actionFilterChip.activeActionFilter{background:linear-gradient(135deg,#4f7df3,#7c5cff)!important;border-color:rgba(255,255,255,.34)!important;color:#fff!important;box-shadow:0 10px 22px rgba(79,125,243,.22)!important;}
/* KPI cards: preserve semantic colors instead of blue/purple blanket fill. */
body.ui-modern .kpi.buy{background:linear-gradient(135deg,rgba(20,95,57,.50),rgba(8,18,28,.96))!important;border-color:rgba(53,208,127,.52)!important;}
body.ui-modern .kpi.hold{background:linear-gradient(135deg,rgba(116,86,18,.54),rgba(18,16,10,.96))!important;border-color:rgba(245,201,74,.52)!important;}
body.ui-modern .kpi.sell{background:linear-gradient(135deg,rgba(116,31,39,.54),rgba(23,10,13,.96))!important;border-color:rgba(255,111,125,.52)!important;}
body.ui-modern .kpi.stale{background:linear-gradient(135deg,rgba(30,44,74,.70),rgba(9,18,32,.96))!important;border-color:rgba(155,184,255,.28)!important;}
body.ui-modern .kpi.income{background:linear-gradient(135deg,rgba(27,71,126,.62),rgba(9,18,32,.96))!important;border-color:rgba(96,165,250,.44)!important;}
body.ui-modern .kpi.activeKpi{outline:2px solid rgba(255,255,255,.36)!important;box-shadow:0 0 0 3px rgba(79,125,243,.18),0 14px 28px rgba(0,0,0,.18)!important;}
/* Market badges rely on classes; no inline colors. */
#marketStatus.marketClosed{background:linear-gradient(135deg,rgba(30,44,74,.96),rgba(13,22,40,.96))!important;color:#dbe8ff!important;border:1px solid rgba(155,184,255,.32)!important;}
#marketStatus.marketOpen{background:linear-gradient(135deg,rgba(20,95,57,.56),rgba(8,18,28,.96))!important;color:#8df5b9!important;border:1px solid rgba(53,208,127,.58)!important;}
/* Desktop action buttons stay aligned and readable. */
@media(min-width:761px){
  .actions{display:flex!important;flex-wrap:nowrap!important;justify-content:space-between!important;gap:8px!important;}
  .actions .mini{min-width:0!important;flex:1 1 0!important;max-width:118px!important;padding:8px 10px!important;font-size:12px!important;}
  .actions .chartMini{max-width:96px!important;}
}
@media(max-width:760px){
  .signalsControlRow{grid-template-columns:1fr!important;}
  .signalsControlRow .signalHelpShell{padding:8px!important;}
  .signalLegendBody{grid-template-columns:1fr!important;margin-top:8px!important;}
  .signalsControlRow .signalHelpTop{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important;}
  .signalLegendToggle,.readCardsBtn{height:36px!important;min-height:36px!important;font-size:10.5px!important;padding:7px 6px!important;}
}

/* v4.9.8 Classic Default + KPI Modern Cleanup
   UI/UX only: Classic is default; Modern remains optional beta visual mode. */

/* Modern KPI cards: use the same calm semantic style as Classic, with only subtle shine. */
body.ui-modern .kpiGrid .kpi{
  position:relative!important;
  overflow:hidden!important;
  border-radius:20px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 10px 22px rgba(0,0,0,.14)!important;
  transform:none!important;
}
body.ui-modern .kpiGrid .kpi:before{
  content:""!important;
  position:absolute!important;
  inset:0 auto 0 0!important;
  width:5px!important;
  opacity:.92!important;
}
body.ui-modern .kpiGrid .kpi small{
  color:#9fb5d8!important;
  letter-spacing:.12em!important;
}
body.ui-modern .kpiGrid .kpi b{
  color:#fff!important;
}
body.ui-modern .kpiGrid .kpi.buy{
  background:linear-gradient(145deg,rgba(15,48,36,.96),rgba(8,18,28,.96))!important;
  border-color:rgba(29,122,74,.72)!important;
}
body.ui-modern .kpiGrid .kpi.buy:before{background:#35d07f!important;}
body.ui-modern .kpiGrid .kpi.hold{
  background:linear-gradient(145deg,rgba(51,43,20,.96),rgba(18,16,10,.96))!important;
  border-color:rgba(138,118,37,.78)!important;
}
body.ui-modern .kpiGrid .kpi.hold:before{background:#f5c94a!important;}
body.ui-modern .kpiGrid .kpi.sell{
  background:linear-gradient(145deg,rgba(49,19,19,.96),rgba(23,10,13,.96))!important;
  border-color:rgba(122,37,37,.78)!important;
}
body.ui-modern .kpiGrid .kpi.sell:before{background:#ff6f7d!important;}
body.ui-modern .kpiGrid .kpi.stale{
  background:linear-gradient(145deg,rgba(16,24,39,.96),rgba(9,18,32,.96))!important;
  border-color:rgba(70,82,104,.92)!important;
}
body.ui-modern .kpiGrid .kpi.stale:before{background:#7f93b7!important;}
body.ui-modern .kpiGrid .kpi.income{
  background:linear-gradient(145deg,rgba(16,30,58,.96),rgba(9,18,32,.96))!important;
  border-color:rgba(38,92,168,.92)!important;
}
body.ui-modern .kpiGrid .kpi.income:before{background:#60a5fa!important;}
body.ui-modern .kpiGrid .kpi:hover{
  transform:translateY(-1px)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 14px 28px rgba(0,0,0,.18)!important;
}
body.ui-modern .kpiGrid .kpi.activeKpi{
  outline:none!important;
  border-color:rgba(216,230,255,.76)!important;
  box-shadow:0 0 0 2px rgba(216,230,255,.20),0 14px 28px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.06)!important;
}
body.ui-modern .kpiGrid .kpi.activeKpi:after{
  content:"";
  position:absolute;
  inset:auto 14px 9px 14px;
  height:3px;
  border-radius:999px;
  background:rgba(216,230,255,.60);
}

/* Keep action filters calm in Modern; selected gets a clean outline, not a heavy purple fill. */
body.ui-modern .actionFilterChip{
  background:rgba(15,27,48,.88)!important;
  border:1px solid rgba(155,184,255,.26)!important;
  color:#dce9ff!important;
  box-shadow:none!important;
}
body.ui-modern .actionFilterChip.activeActionFilter{
  background:rgba(20,35,62,.94)!important;
  border-color:rgba(216,230,255,.68)!important;
  color:#fff!important;
  box-shadow:0 0 0 2px rgba(216,230,255,.14),0 10px 22px rgba(0,0,0,.18)!important;
}

/* Modern neutral button baseline: avoid bright blue unless button is truly primary/selected. */
body.ui-modern .chartMini,
body.ui-modern .refreshMini,
body.ui-modern .removeMini,
body.ui-modern .readCardsBtn,
body.ui-modern .signalLegendToggle,
body.ui-modern .cardModeBtn:not(.active),
body.ui-modern .modeBox button:not(.modeActive):not([aria-current="true"]){
  background:rgba(15,27,48,.88)!important;
  border:1px solid rgba(155,184,255,.28)!important;
  color:#e7f0ff!important;
  box-shadow:none!important;
}
body.ui-modern .chartMini:hover,
body.ui-modern .refreshMini:hover,
body.ui-modern .removeMini:hover,
body.ui-modern .readCardsBtn:hover,
body.ui-modern .signalLegendToggle:hover{
  border-color:rgba(155,184,255,.48)!important;
  background:rgba(20,35,62,.95)!important;
}
body.ui-modern .signalLegendToggle[aria-expanded="true"]{
  background:rgba(20,35,62,.96)!important;
  border-color:rgba(216,230,255,.68)!important;
  box-shadow:0 0 0 2px rgba(216,230,255,.14)!important;
}

/* Selected segmented controls: clean selected state only. */
body.ui-modern .cardModeBtn.active,
body.ui-modern .modeBox button.modeActive,
body.ui-modern .modeBox button[aria-current="true"]{
  background:linear-gradient(135deg,#4f7df3,#7567f8)!important;
  border-color:rgba(255,255,255,.34)!important;
  color:#fff!important;
  box-shadow:0 9px 18px rgba(79,125,243,.22)!important;
}

/* Help row should expand normally and keep the card list below it. */
.signalHelpShell,
.signalsControlRow .signalHelpShell{
  overflow:visible!important;
  align-self:start!important;
}
.signalLegendBody[hidden]{display:none!important;}
.signalLegendBody:not([hidden]){
  display:grid!important;
  position:static!important;
  z-index:auto!important;
  margin-top:10px!important;
}
.signalsControlRow{
  align-items:start!important;
}

/* Mobile: keep Classic default compact and avoid horizontal overflow. */
@media(max-width:760px){
  body.ui-modern .kpiGrid .kpi.activeKpi:after{inset:auto 8px 6px 8px;height:2px;}
  .signalLegendBody:not([hidden]){grid-template-columns:1fr!important;}
}