/* =========================================================================
   CSI Research Dashboard v10 — Complete Design System
   Dark fintech SaaS · 8px grid · Spectral · Green #35DC6E
   ========================================================================= */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  /* ── v5 "Chip Stock Investor" emerald-teal + violet palette ── */
  --bg:            #080b14;
  --bg-sidebar:    #080b14;
  --bg-topbar:     rgba(8,11,20,.96);
  --bg-card:       #0f1623;   /* solid navy surface — v5 --surface */
  --bg-card-hv:    #131b2e;
  --bg-elevated:   #151d2e;   /* v5 --surface-2 */
  --bg-input:      #151d2e;
  --bg-overlay:    rgba(4,6,14,.88);

  --border:        rgba(255,255,255,.07);
  --border-hv:     rgba(255,255,255,.14);  /* v5 --border-2 */
  --border-green:  rgba(45,212,191,.40);   /* v5 --brand-line (teal) */
  --border-blue:   rgba(99,179,237,.2);

  /* Brand = teal (#2dd4bf) — v5's primary accent */
  --green:         #2dd4bf;
  --green-bright:  #5eead4;
  --green-dim:     rgba(45,212,191,.13);  /* v5 --brand-soft */
  --green-glow:    rgba(45,212,191,.22);
  --green-text:    #2dd4bf;

  --red:           #f87171;   /* v5 --down */
  --red-dim:       rgba(248,113,113,.14);
  --amber:         #FBBF24;
  --amber-dim:     rgba(251,191,36,.1);
  --blue:          #60A5FA;
  --blue-dim:      rgba(96,165,250,.1);
  --purple:        #8b5cf6;   /* v5 --accent — exact violet */

  /* Text hierarchy — v5 scale */
  --t1:  #e9eef6;   /* v5 --text */
  --t2:  #93a0b6;   /* v5 --text-muted */
  --t3:  #5d6a81;   /* v5 --text-dim */
  --t4:  #2d3748;

  --sidebar-w: 290px;

  --r1: 4px;  --r2: 6px;  --r3: 8px;  --r4: 10px;
  --r5: 12px; --r6: 16px; --r7: 20px; --rpill: 999px;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s7:32px; --s8:40px; --s9:48px; --s10:64px;

  /* Base UI font — keeps form controls (which don't inherit) on Spectral too */
  --font:'Spectral',serif;

  --ease: cubic-bezier(.4,0,.2,1);
  --t-fast: 120ms var(--ease);
  --t-base: 200ms var(--ease);
  --t-slow: 300ms var(--ease);

  /* v5 shadow scale */
  --shadow:    0 1px 2px rgba(0,0,0,.55);
  --shadow-md: 0 18px 44px -16px rgba(0,0,0,.75);
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:14px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{
  font-family:'Spectral',serif;
  background:var(--bg);
  color:var(--t1);
  line-height:1.5;
  min-height:100vh;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{background:none;border:none;cursor:pointer;font:inherit;color:inherit}
ul,ol{list-style:none}
img{max-width:100%;display:block}
input,select,textarea{font:inherit}
svg{display:block;flex-shrink:0}

/* ── Animated BG ─────────────────────────────────────────────────────────── */
body::before{
  content:'';
  position:fixed;
  inset:0;
  background:
    radial-gradient(ellipse 800px 600px at 20% 0%, rgba(45,212,191,.055) 0%, transparent 60%),
    radial-gradient(ellipse 600px 400px at 80% 100%, rgba(139,92,246,.042) 0%, transparent 60%);
  pointer-events:none;
  z-index:0;
}

/* ── Shell ───────────────────────────────────────────────────────────────── */
.app{display:flex;min-height:100vh;position:relative;z-index:1}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.sidebar{
  width:var(--sidebar-w);
  min-height:100vh;
  background:var(--bg-sidebar);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  position:fixed;
  inset-block:0;
  left:0;
  z-index:100;
  overflow:hidden;
}
.sidebar::before{
  content:'';
  position:absolute;
  top:-100px;left:-60px;
  width:280px;height:280px;
  background:radial-gradient(circle,rgba(45,212,191,.07) 0%,transparent 70%);
  pointer-events:none;
}

.sidebar-logo{
  display:flex;align-items:center;gap:var(--s3);
  padding:0 var(--s5);
  border-bottom:1px solid var(--border);
  height:57px;flex-shrink:0;position:relative;z-index:1;
  cursor:pointer;text-decoration:none;
}
.sidebar-logo img.mark{height:30px;width:auto;flex-shrink:0}
.sidebar-logo img.full{height:22px;width:auto}

.sidebar-nav{
  flex:1;padding:var(--s3) 0;overflow-y:auto;overflow-x:hidden;
  position:relative;z-index:1;
}
.sidebar-nav::-webkit-scrollbar{width:3px}
.sidebar-nav::-webkit-scrollbar-thumb{background:var(--t4);border-radius:2px}

.nav-group-label{
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--t3);padding:var(--s4) var(--s3) var(--s2);
}

.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:10px var(--s3);
  color:var(--t2);font-size:14px;font-weight:500;
  cursor:pointer;position:relative;
  transition:color var(--t-fast),background var(--t-fast);
  user-select:none;white-space:nowrap;
}
.nav-item svg{width:17px;height:17px;flex-shrink:0;transition:color var(--t-fast)}
.nav-item:hover{color:var(--t1);background:rgba(255,255,255,.04)}
.nav-item.active{color:var(--green)}
.nav-item.active::before{
  content:'';position:absolute;left:0;top:5px;bottom:5px;
  width:2.5px;background:var(--green);border-radius:0 2px 2px 0;
  box-shadow:0 0 8px var(--green-glow);
}
.nav-item.active svg{color:var(--green)}
.nav-chevron{
  width:13px;height:13px;margin-left:auto;color:var(--t3);flex-shrink:0;
  transition:transform var(--t-base),color var(--t-fast);
}
.nav-item.open .nav-chevron{transform:rotate(90deg);color:var(--t2)}

/* sub-nav */
.sub-nav{overflow:hidden;max-height:0;transition:max-height var(--t-slow)}
.sub-nav.open{max-height:260px}
.sub-item{
  display:flex;align-items:center;gap:var(--s2);
  padding:6px var(--s3) 6px 52px;
  font-size:13px;font-weight:500;color:var(--t3);
  cursor:pointer;transition:color var(--t-fast),background var(--t-fast);
  white-space:nowrap;
}
.sub-item::before{
  content:'';width:4px;height:4px;border-radius:50%;
  background:currentColor;opacity:.5;flex-shrink:0;
}
.sub-item:hover{color:var(--t2);background:rgba(255,255,255,.025)}
.sub-item.active{color:var(--green-text)}
.sub-item.active::before{opacity:1}

/* sidebar bottom */
.sidebar-foot{
  padding:var(--s4) var(--s3);border-top:1px solid var(--border);
  flex-shrink:0;position:relative;z-index:1;
}
.user-row{display:flex;align-items:center;gap:var(--s3)}
.user-avatar{
  width:30px;height:30px;border-radius:50%;
  background:var(--green-dim);border:1.5px solid var(--green);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:var(--green);flex-shrink:0;
}
.user-name{font-size:12px;font-weight:600;color:var(--t1)}
.user-role{font-size:10px;color:var(--t3);margin-top:1px}

/* ── Main ────────────────────────────────────────────────────────────────── */
.main{flex:1;min-width:0;margin-left:var(--sidebar-w);min-height:100vh;display:flex;flex-direction:column}

/* ── Topbar ──────────────────────────────────────────────────────────────── */
.topbar{
  height:57px;background:var(--bg-topbar);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  display:flex;align-items:center;gap:var(--s4);padding:0 var(--s7);
  position:sticky;top:0;z-index:90;flex-shrink:0;
  margin-left:var(--sidebar-w);
}
@media(max-width:768px){.topbar{margin-left:0}}
.topbar-title{font-size:14px;font-weight:600;flex:1;color:var(--t1)}
.topbar-title span{font-weight:400;color:var(--t3);margin-left:4px}

.search-wrap{
  display:flex;align-items:center;gap:var(--s2);
  background:var(--bg-input);border:1px solid var(--border);
  border-radius:var(--r3);padding:0 var(--s3);height:34px;width:240px;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.search-wrap:focus-within{border-color:var(--border-green);box-shadow:0 0 0 3px var(--green-dim)}
.search-wrap svg{width:13px;height:13px;color:var(--t3);flex-shrink:0}
.search-wrap input{
  background:none;border:none;outline:none;
  color:var(--t1);font-size:12px;flex:1;min-width:0;
}
.search-wrap input::placeholder{color:var(--t3)}
.kbd{
  font-size:10px;color:var(--t3);background:var(--bg-elevated);
  border:1px solid var(--border);border-radius:3px;padding:1px 5px;
  font-family:'JetBrains Mono',monospace;flex-shrink:0;
}
.tb-actions{display:flex;align-items:center;gap:6px}
.tb-icon{
  width:34px;height:34px;border-radius:var(--r3);
  display:flex;align-items:center;justify-content:center;
  color:var(--t2);position:relative;
  transition:color var(--t-fast),background var(--t-fast);
}
.tb-icon:hover{color:var(--t1);background:var(--bg-elevated)}
.tb-icon svg{width:17px;height:17px}
.notif-dot{
  position:absolute;top:7px;right:7px;width:6px;height:6px;
  background:var(--green);border-radius:50%;border:1.5px solid var(--bg-topbar);
}
.tb-div{width:1px;height:22px;background:var(--border);margin:0 4px}
.tb-user{
  display:flex;align-items:center;gap:var(--s2);padding:5px var(--s2);
  border-radius:var(--r3);cursor:pointer;transition:background var(--t-fast);
}
.tb-user:hover{background:var(--bg-elevated)}
.tb-avatar{
  width:28px;height:28px;border-radius:50%;
  background:var(--green-dim);border:1.5px solid var(--green);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;color:var(--green);flex-shrink:0;
}
.tb-uname{font-size:12px;font-weight:600}
.tb-user svg{width:12px;height:12px;color:var(--t3)}

/* market ticker */
.ticker-bar{
  display:flex;align-items:center;gap:var(--s6);
  padding:0 var(--s7);height:36px;
  background:rgba(255,255,255,.015);
  border-bottom:1px solid var(--border);
  overflow-x:auto;scrollbar-width:none;flex-shrink:0;
}
.ticker-bar::-webkit-scrollbar{display:none}
.ticker-item{display:flex;align-items:center;gap:6px;flex-shrink:0;font-size:11px}
.ticker-name{color:var(--t3);font-weight:500}
.ticker-val{color:var(--t1);font-weight:700;font-variant-numeric:tabular-nums}
.ticker-chg{font-weight:600;font-variant-numeric:tabular-nums}
.up{color:var(--green)}.dn{color:var(--red)}
.ticker-live{
  margin-left:auto;display:flex;align-items:center;gap:5px;
  font-size:10px;font-weight:700;color:var(--green);flex-shrink:0;
}
.live-dot{
  width:5px;height:5px;border-radius:50%;background:var(--green);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}

/* ── Page ────────────────────────────────────────────────────────────────── */
.page{flex:1;padding:var(--s7);overflow-y:auto}
.tab-panel{display:none}
.tab-panel.active{display:block;animation:fadeUp 220ms var(--ease) forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--r5);
  overflow:hidden;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.card:hover{border-color:var(--border-hv)}
.card.glow:hover{
  border-color:var(--border-green);
  box-shadow:0 0 0 1px var(--border-green),0 8px 32px rgba(0,0,0,.4);
}
.card-hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--s3) var(--s5);border-bottom:1px solid var(--border);
}
.card-title{font-size:14px;font-weight:700;color:var(--t3);letter-spacing:.07em;text-transform:uppercase}
.card-link{
  font-size:11px;font-weight:600;color:var(--green-text);
  display:flex;align-items:center;gap:3px;transition:opacity var(--t-fast);
}
.card-link:hover{opacity:.7}
.card-link svg{width:10px;height:10px}
.card-body{padding:var(--s5)}

/* ── Dashboard list-card content: breathing room below the last row ───────── */
#dashAnnouncements,
#dashArticleList,
#dashAlertsList,
#dashThesesProgress,
#dashThesesComplete,
#dashRecentlyWatched,
#dashRecentlyRead,
#dashSavedDCF,
#dashSavedArticles{
  padding-bottom:var(--s4);
}
/* Theses + alerts card lists — no well; rows sit directly on the card, inset from
   the sides like Your Saved Companies (.dco-grid), so no row border touches the card edge */
#dashThesesProgress,
#dashThesesComplete,
#dashAlertsList{padding:var(--s3) var(--s5)}

/* Announcements: no inner scrollbar, and no partial row. The list is cut to
   ACTIVITY_ROWS items in JS, and fitAnnouncementRows() drops any row that still
   won't fit whole once its text wraps — row heights vary with that wrap, so
   nothing here can predict the boundary. "View all →" carries the rest. */
#dashAnnouncements{
  overflow:hidden;
  padding-bottom:var(--s3);
}

/* Recently Watched + Recommended Videos: their cards are stretched to the height
   of the tallest card in the row, and that leftover height used to pool below the
   last row while the first row sat tight against the header. Auto block margins
   split it evenly above and below instead, so each list is centred with matching
   breathing room top and bottom. The rows carry their own 9px, so no padding is
   added here. Auto margins resolve to 0 once a list overflows its card, leaving
   it free to scroll as before. */
#dashRecentlyWatched,
#dashRecommendedVideos{
  flex:0 1 auto;
  margin-block:auto;
  padding-bottom:0;
}

/* ── Greeting ─────────────────────────────────────────────────────────────── */
.greeting{display:flex;align-items:center;gap:var(--s4);margin-bottom:var(--s7)}
.greeting-avatar{
  width:44px;height:44px;border-radius:50%;
  background:var(--green-dim);border:2px solid var(--green);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:700;color:var(--green);flex-shrink:0;
}
.greeting h1{font-size:22px;font-weight:700;line-height:1.2;letter-spacing:-.3px}
.greeting p{font-size:12px;color:var(--t3);margin-top:2px}

/* ── Home grid ───────────────────────────────────────────────────────────── */
.home-grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) minmax(0,1fr);
  gap:var(--s5);
}
@media(max-width:1280px){.home-grid{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.home-grid{grid-template-columns:1fr}}

/* ── Article list ─────────────────────────────────────────────────────────── */
.article-rows{display:flex;flex-direction:column}
.article-row{
  display:flex;flex-direction:column;gap:3px;
  padding:var(--s4) var(--s5);border-bottom:1px solid var(--border);
  cursor:pointer;transition:background var(--t-fast);
}
.article-row:last-child{border-bottom:none}
.article-row:hover{background:rgba(255,255,255,.025)}
.article-cat{
  font-size:10px;font-weight:700;color:var(--green-text);
  text-transform:uppercase;letter-spacing:.07em;
}
.article-title-text{font-size:13px;font-weight:600;color:var(--t1);line-height:1.4}
.article-meta-row{font-size:11px;color:var(--t3);display:flex;align-items:center;gap:6px}

/* ── Video grid ──────────────────────────────────────────────────────────── */
.video-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.video-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.video-card{
  border-radius:var(--r4);overflow:hidden;
  background:var(--bg-card);border:1px solid var(--border);
  cursor:pointer;
  transition:transform var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast);
}
.video-card:hover{
  transform:translateY(-2px);
  border-color:var(--border-green);
  box-shadow:0 12px 36px rgba(0,0,0,.5),0 0 0 1px var(--border-green);
}
.video-thumb{
  aspect-ratio:16/9;overflow:hidden;position:relative;
  background:linear-gradient(135deg,#0f1a14,#0a1020);
}
.video-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 400ms var(--ease)}
.video-card:hover .video-thumb img{transform:scale(1.03)}
.play-overlay{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.35);transition:background var(--t-fast);
}
.video-card:hover .play-overlay{background:rgba(0,0,0,.5)}
.play-btn-circle{
  width:44px;height:44px;border-radius:50%;
  background:rgba(45,212,191,.18);border:2px solid var(--green);
  display:flex;align-items:center;justify-content:center;
  transition:background var(--t-fast),transform var(--t-fast);
  backdrop-filter:blur(4px);
}
.video-card:hover .play-btn-circle{background:rgba(45,212,191,.3);transform:scale(1.1)}
.play-btn-circle svg{width:18px;height:18px;fill:var(--green);margin-left:2px}
.video-info{padding:var(--s3) var(--s4)}
.video-title{font-size:12px;font-weight:600;color:var(--t1);line-height:1.35;margin-bottom:3px}
.video-date{font-size:10px;color:var(--t3)}

/* ── Sub-tab bar ─────────────────────────────────────────────────────────── */
.subtab-bar{
  display:flex;align-items:center;gap:2px;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--r5);padding:4px;margin-bottom:var(--s6);
  overflow-x:auto;scrollbar-width:none;
}
.subtab-bar::-webkit-scrollbar{display:none}
.subtab-btn{
  flex-shrink:0;display:flex;align-items:center;gap:6px;
  padding:7px var(--s4);border-radius:var(--r4);
  font-size:12px;font-weight:500;color:var(--t2);
  transition:color var(--t-fast),background var(--t-fast);white-space:nowrap;
}
.subtab-btn:hover{color:var(--t1);background:rgba(255,255,255,.04)}
.subtab-btn.active{color:var(--green);background:var(--green-dim);font-weight:600}
.subtab-btn svg{width:13px;height:13px}
.subtab-panel{display:none}
.subtab-panel.active{display:block;animation:fadeUp 200ms var(--ease) forwards}

/* ── Filter bar ──────────────────────────────────────────────────────────── */
.filter-bar{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s5);flex-wrap:wrap}
.filter-sel{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r3);
  color:var(--t2);font-size:12px;padding:6px var(--s3);outline:none;cursor:pointer;
  transition:border-color var(--t-fast);
}
.filter-sel:focus{border-color:var(--border-green)}
.search-inline{
  flex:1;min-width:140px;background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--r3);color:var(--t1);font-size:12px;padding:6px var(--s3);
  outline:none;transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.search-inline:focus{border-color:var(--border-green);box-shadow:0 0 0 3px var(--green-dim)}
.search-inline::placeholder{color:var(--t3)}

/* ── Article card grid ───────────────────────────────────────────────────── */
.article-card-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--s5);
}
.article-card{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r5);
  overflow:hidden;cursor:pointer;
  transition:transform var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast);
}
.article-card:hover{
  transform:translateY(-2px);border-color:var(--border-green);
  box-shadow:0 8px 28px rgba(0,0,0,.4),0 0 0 1px var(--border-green);
}
.article-card-thumb{
  aspect-ratio:16/7;overflow:hidden;
  background:linear-gradient(135deg,var(--bg-elevated),rgba(0,0,0,.2));
  position:relative;
}
.article-card-thumb::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent 50%,rgba(6,9,17,.6));
  pointer-events:none;
}
.article-card-thumb img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 400ms var(--ease);
}
.article-card:hover .article-card-thumb img{transform:scale(1.04)}
.article-card-body{padding:var(--s4)}
.article-card-cat{font-size:10px;font-weight:700;color:var(--green-text);text-transform:uppercase;letter-spacing:.07em;margin-bottom:4px}
.article-card-title{font-size:13px;font-weight:600;color:var(--t1);line-height:1.4;margin-bottom:var(--s2)}
.article-card-meta{font-size:10px;color:var(--t3);display:flex;align-items:center;gap:6px}

/* ── Company card grid ───────────────────────────────────────────────────── */
.co-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--s4)}
.co-card{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r5);
  padding:var(--s5);cursor:pointer;
  transition:transform var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast);
  display:flex;flex-direction:column;gap:var(--s3);
}
.co-card:hover{transform:translateY(-2px);border-color:var(--border-green);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.co-card-hd{display:flex;align-items:center;gap:var(--s3)}
.co-logo{
  width:36px;height:36px;border-radius:var(--r3);
  background:var(--bg-elevated);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.co-logo img{width:26px;height:26px;object-fit:contain}
.co-ticker{font-size:14px;font-weight:700}
.co-name{font-size:10px;color:var(--t3)}
.co-desc{font-size:11px;color:var(--t2);line-height:1.5}
.co-foot{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:var(--s3);border-top:1px solid var(--border);
}

/* ── Pill ────────────────────────────────────────────────────────────────── */
.pill{
  display:inline-flex;align-items:center;gap:3px;
  font-size:10px;font-weight:700;padding:2px 8px;border-radius:var(--rpill);line-height:1.4;
}
.pill-g{background:var(--green-dim);color:var(--green)}
.pill-r{background:var(--red-dim);color:var(--red)}
.pill-a{background:var(--amber-dim);color:var(--amber)}
.pill-b{background:var(--blue-dim);color:var(--blue)}
.pill-m{background:rgba(255,255,255,.06);color:var(--t2)}

/* ── Financial ───────────────────────────────────────────────────────────── */
.fin-search{display:flex;gap:var(--s3);margin-bottom:var(--s6)}
.fin-ticker-input{
  width:160px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r3);
  color:var(--t1);font-size:15px;font-weight:700;padding:var(--s3) var(--s4);
  outline:none;text-transform:uppercase;letter-spacing:.08em;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.fin-ticker-input:focus{border-color:var(--border-green);box-shadow:0 0 0 3px var(--green-dim)}
.fin-kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);margin-bottom:var(--s6)}
@media(max-width:1000px){.fin-kpi-row{grid-template-columns:repeat(2,1fr)}}

/* ── KPI tile ────────────────────────────────────────────────────────────── */
.kpi{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r5);
  padding:var(--s5) var(--s5);
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.kpi:hover{border-color:var(--border-green);box-shadow:0 0 0 1px var(--border-green)}
.kpi-label{font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--s2)}
.kpi-val{font-size:24px;font-weight:800;color:var(--t1);line-height:1;font-variant-numeric:tabular-nums}
.kpi-sub{font-size:11px;color:var(--t3);margin-top:var(--s2)}

/* ── Btn ─────────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px var(--s5);border-radius:var(--r3);font-size:12px;font-weight:600;
  transition:transform var(--t-fast),box-shadow var(--t-fast),background var(--t-fast),border-color var(--t-fast);
  cursor:pointer;border:1px solid transparent;white-space:nowrap;
}
/* `display:inline-flex` beats the UA sheet's [hidden]{display:none}, so a
   hidden button would otherwise still render. */
.btn[hidden]{display:none}
.btn:active{transform:scale(.97)!important}
.btn-primary{background:var(--green);color:#000;border-color:var(--green)}
.btn-primary:hover{background:var(--green-bright);transform:translateY(-1px);box-shadow:0 4px 16px var(--green-glow)}
.btn-secondary{background:var(--bg-elevated);color:var(--t1);border-color:var(--border)}
.btn-secondary:hover{background:rgba(255,255,255,.1);border-color:var(--border-hv)}
.btn-ghost{background:transparent;color:var(--t2);border-color:var(--border)}
.btn-ghost:hover{color:var(--t1);background:var(--bg-elevated)}
.btn svg{width:13px;height:13px}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none!important}

/* load more */
.load-more{display:flex;justify-content:center;padding:var(--s6) 0 var(--s2)}

/* ── ITC ─────────────────────────────────────────────────────────────────── */
.itc-layout{display:grid;grid-template-columns:260px 1fr;gap:var(--s6)}
@media(max-width:900px){.itc-layout{grid-template-columns:1fr}}
.itc-list{display:flex;flex-direction:column;gap:var(--s3)}
.itc-item{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r4);
  padding:var(--s4) var(--s5);cursor:pointer;
  transition:border-color var(--t-fast),background var(--t-fast);
}
.itc-item:hover{border-color:var(--border-hv)}
.itc-item.checked{border-color:var(--green);background:var(--green-dim)}
.itc-row{display:flex;align-items:center;gap:var(--s3)}
.itc-box{
  width:18px;height:18px;border-radius:var(--r1);border:2px solid var(--border-hv);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:background var(--t-fast),border-color var(--t-fast);
}
.itc-item.checked .itc-box{background:var(--green);border-color:var(--green)}
.itc-box svg{width:10px;height:10px;stroke:black;stroke-width:3;display:none}
.itc-item.checked .itc-box svg{display:block}
.itc-text{font-size:13px;font-weight:600}
.itc-sub{font-size:11px;color:var(--t3);margin-top:3px;padding-left:30px}
.score-display{
  background:linear-gradient(135deg,var(--green-dim),rgba(45,212,191,.03));
  border:1px solid var(--border-green);border-radius:var(--r5);
  padding:var(--s6);text-align:center;
}
.score-num{font-size:40px;font-weight:800;color:var(--green);line-height:1;font-variant-numeric:tabular-nums}
.score-label{font-size:11px;color:var(--t3);font-weight:600;text-transform:uppercase;letter-spacing:.07em;margin-bottom:var(--s2)}
.score-verdict{font-size:12px;color:var(--t2);margin-top:var(--s3);line-height:1.5}

/* ── DCF ─────────────────────────────────────────────────────────────────── */
.dcf-layout{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6)}
@media(max-width:900px){.dcf-layout{grid-template-columns:1fr}}
.input-group{display:flex;flex-direction:column;gap:5px}
.input-label{font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.08em}
.input-field{
  background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r3);
  color:var(--t1);font-size:14px;font-weight:600;padding:var(--s3) var(--s4);
  outline:none;font-variant-numeric:tabular-nums;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.input-field:focus{border-color:var(--border-green);box-shadow:0 0 0 3px var(--green-dim)}
.dcf-result-card{
  background:linear-gradient(135deg,rgba(45,212,191,.06) 0%,rgba(45,212,191,.02) 100%);
  border:1px solid var(--border-green);border-radius:var(--r5);
  padding:var(--s7);display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:var(--s3);
}
.dcf-result-label{font-size:11px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.08em}
.dcf-result-val{font-size:48px;font-weight:800;color:var(--green);line-height:1;font-variant-numeric:tabular-nums}
.dcf-result-sub{font-size:12px;color:var(--t2);line-height:1.5;max-width:220px}

/* ── Webinar ─────────────────────────────────────────────────────────────── */
.webinar-list{display:flex;flex-direction:column;gap:var(--s4)}
.webinar-card{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r5);
  padding:var(--s5) var(--s6);display:flex;align-items:center;gap:var(--s5);
  transition:border-color var(--t-fast),background var(--t-fast);
}
.webinar-card:hover{border-color:var(--border-hv);background:var(--bg-card-hv)}
.webinar-date{
  flex-shrink:0;background:var(--bg-elevated);border:1px solid var(--border);
  border-radius:var(--r4);padding:var(--s3) var(--s4);text-align:center;min-width:52px;
}
.webinar-month{font-size:9px;font-weight:800;color:var(--green);text-transform:uppercase;letter-spacing:.07em}
.webinar-day{font-size:20px;font-weight:800;line-height:1.1}
.webinar-info{flex:1}
.webinar-title{font-size:13px;font-weight:600;color:var(--t1);margin-bottom:3px}
.webinar-meta{font-size:11px;color:var(--t3);display:flex;align-items:center;gap:5px}

/* ── Transaction table ───────────────────────────────────────────────────── */
.table-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:12px}
thead th{
  text-align:left;padding:var(--s3) var(--s4);
  font-size:10px;font-weight:700;color:var(--t3);
  text-transform:uppercase;letter-spacing:.07em;
  border-bottom:1px solid var(--border);white-space:nowrap;
}
tbody tr{border-bottom:1px solid var(--border);transition:background var(--t-fast);cursor:pointer}
tbody tr:last-child{border-bottom:none}
tbody tr:hover{background:rgba(255,255,255,.025)}
tbody td{padding:var(--s3) var(--s4);color:var(--t2);vertical-align:middle}
tbody td:first-child{color:var(--t1)}
.buy{color:var(--green);font-weight:700}
.sell{color:var(--red);font-weight:700}

/* ── Filter tabs ─────────────────────────────────────────────────────────── */
.ftabs{display:flex;align-items:center;gap:var(--s1)}
.ftab{
  padding:5px 14px;border-radius:var(--rpill);font-size:11px;font-weight:600;
  color:#94a3b8;background:var(--bg-elevated);border:1px solid var(--border);cursor:pointer;
  transition:all var(--t-fast);
}
.ftab:hover{color:var(--t2);border-color:var(--border-hv)}
.ftab.active{color:var(--green);background:var(--green-dim);border-color:var(--border-green)}

/* ── Company row ─────────────────────────────────────────────────────────── */
.co-rows{display:flex;flex-direction:column}
.co-row{
  display:flex;align-items:center;gap:var(--s3);
  padding:10px var(--s5);border-bottom:1px solid var(--border);
  cursor:pointer;transition:background var(--t-fast);
}
.co-row:last-child{border-bottom:none}
.co-row:hover{background:rgba(255,255,255,.025)}
.co-row-logo{
  width:30px;height:30px;border-radius:var(--r2);background:var(--bg-elevated);
  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;
}
.co-row-logo img{width:22px;height:22px;object-fit:contain}
.co-row-info{flex:1;min-width:0}
.co-row-ticker{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.co-row-name{font-size:10px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.empty{display:flex;flex-direction:column;align-items:center;gap:var(--s4);padding:var(--s10) var(--s6);text-align:center}
.empty-icon{
  width:44px;height:44px;border-radius:var(--r5);background:var(--bg-elevated);
  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--t3);
}
.empty-icon svg{width:20px;height:20px}
.empty-title{font-size:14px;font-weight:600;color:var(--t2)}
.empty-desc{font-size:12px;color:var(--t3);max-width:300px;line-height:1.6}

/* ── Skeleton ────────────────────────────────────────────────────────────── */
.skel{
  background:linear-gradient(90deg,var(--bg-elevated) 25%,rgba(255,255,255,.08) 50%,var(--bg-elevated) 75%);
  background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:var(--r2);
}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── Trend cards (How CSI Invests) ──────────────────────────────────────── */
.trend-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--s5)}
.trend-card{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r5);
  padding:var(--s6);text-align:center;
  transition:border-color var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast);
}
.trend-card:hover{border-color:var(--border-green);transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.35)}
.trend-icon{width:44px;height:44px;border-radius:var(--r4);background:var(--bg-elevated);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;margin:0 auto var(--s4);color:var(--t2)}
.trend-icon svg{width:22px;height:22px}
.trend-card h3{font-size:14px;font-weight:700;margin-bottom:var(--s2)}
.trend-card p{font-size:12px;color:var(--t2);line-height:1.6;margin-bottom:var(--s4)}

/* ── Video modal ─────────────────────────────────────────────────────────── */
.modal-overlay{
  position:fixed;inset:0;background:var(--bg-overlay);backdrop-filter:blur(6px);
  z-index:500;display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity var(--t-base);
}
.modal-overlay.open{opacity:1;pointer-events:auto}
.modal{
  background:var(--bg-sidebar);border:1px solid var(--border-hv);border-radius:var(--r6);
  overflow:hidden;transform:scale(.94) translateY(10px);transition:transform var(--t-slow);
  box-shadow:0 32px 80px rgba(0,0,0,.7);
}
.modal-overlay.open .modal{transform:scale(1) translateY(0)}
.modal-video .modal{width:min(880px,calc(100vw - 32px))}
.modal-sm .modal{width:min(520px,calc(100vw - 32px))}
.modal-image .modal{width:min(1100px,calc(100vw - 32px));max-height:calc(100vh - 32px);display:flex;flex-direction:column}
.ig-modal-img-wrap{display:flex;align-items:center;justify-content:center;background:#000;overflow:auto;max-height:calc(100vh - 90px)}
.ig-modal-img-wrap img{max-width:100%;max-height:calc(100vh - 90px);display:block}
.ig-modal-caption{padding:var(--s4) var(--s5);font-size:13px;font-weight:600;color:var(--t1);text-align:center;border-top:1px solid var(--border)}

.modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--s4) var(--s5);border-bottom:1px solid var(--border);
}
.modal-title{font-size:14px;font-weight:700}
.modal-x{
  width:30px;height:30px;border-radius:var(--r3);display:flex;align-items:center;justify-content:center;
  color:var(--t3);cursor:pointer;transition:color var(--t-fast),background var(--t-fast);
}
.modal-x:hover{color:var(--t1);background:var(--bg-elevated)}
.modal-x svg{width:14px;height:14px}
.modal-body{padding:var(--s5)}
.modal-foot{display:flex;justify-content:flex-end;gap:var(--s3);padding:var(--s4) var(--s5);border-top:1px solid var(--border)}

/* YouTube iframe */
.yt-wrap{position:relative;padding-bottom:56.25%;height:0;overflow:hidden}
.yt-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:none;border-radius:var(--r3)}

/* ── QA form ─────────────────────────────────────────────────────────────── */
.form-field{display:flex;flex-direction:column;gap:5px;margin-bottom:var(--s4)}
.form-label{font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.08em}
.form-input{
  background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r3);
  color:var(--t1);font-size:13px;padding:var(--s3) var(--s4);outline:none;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.form-input:focus{border-color:var(--border-green);box-shadow:0 0 0 3px var(--green-dim)}
.form-input::placeholder{color:var(--t3)}
textarea.form-input{min-height:130px;resize:vertical;line-height:1.5}

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--t4);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--t3)}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media(max-width:1024px){
  :root{--sidebar-w:60px}
  .sidebar-logo img.full,.nav-item .nav-label,.sub-nav,.nav-group-label,.user-name,.user-role{display:none}
  .nav-item{justify-content:center;padding:var(--s3)}
  .nav-item .nav-icon{display:flex!important}
  .nav-chevron{display:none}
  .nav-item.active::before{left:0;top:0;bottom:0;height:auto;width:2px}
  .user-avatar{margin:0 auto}
  .fin-kpi-row{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  :root{--sidebar-w:0px}
  .sidebar{display:none}
  .main{margin-left:0}
  .page{padding:var(--s5)}
  .topbar{padding:0 var(--s5)}
  .ticker-bar{padding:0 var(--s5)}
  .search-wrap{width:160px}
  .home-grid{grid-template-columns:1fr}
  .video-grid-2,.video-grid-3{grid-template-columns:1fr}
  .dcf-layout,.itc-layout{grid-template-columns:1fr}
  .seg-grid{grid-template-columns:repeat(2,1fr)}
  .fin-kpi-row{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ═══════════════════════════════════════════════════════════════════════════
   V10 SUPPLEMENTAL STYLES — fills all classes used by index.html + app.js
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Layout: shell ───────────────────────────────────────────────────────── */
.main{
  margin-left:var(--sidebar-w);
  min-height:100vh;
  padding:var(--s7);
}
@media(max-width:768px){.main{margin-left:0;padding:var(--s4)}}

/* ── Animated orbs ───────────────────────────────────────────────────────── */
.bg-orb{position:fixed;border-radius:50%;pointer-events:none;filter:blur(80px);z-index:0}
.bg-orb-1{width:700px;height:500px;top:-150px;left:-200px;background:radial-gradient(circle,rgba(45,212,191,.052),transparent 70%)}
.bg-orb-2{width:600px;height:600px;bottom:-200px;right:-150px;background:radial-gradient(circle,rgba(139,92,246,.038),transparent 70%)}
.bg-orb-3{width:400px;height:400px;top:40%;left:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(45,212,191,.022),transparent 70%)}

/* ── Sidebar extras ──────────────────────────────────────────────────────── */
.logo-full{height:32px;width:auto}
.logo-full-light{height:32px;width:auto;display:none}
.logo-mark{height:36px;width:auto;display:none}
/* light mode: swap the white wordmark for the dark-text version */
body.light .logo-full{display:none}
body.light .logo-full-light{display:block}
.nav-icon{width:18px;height:18px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.nav-icon svg{width:17px;height:17px}
.nav-label{font-size:13px}
.sidebar-footer{
  padding:var(--s4) var(--s5);border-top:1px solid var(--border);flex-shrink:0;
}
.btn-sidebar-link{
  display:flex;align-items:center;gap:8px;padding:8px var(--s3);border-radius:var(--r3);
  font-size:12px;font-weight:500;color:var(--t2);
  transition:color var(--t-fast),background var(--t-fast);
}
.btn-sidebar-link:hover{color:var(--t1);background:rgba(255,255,255,.05)}
.btn-sidebar-link svg{flex-shrink:0}

/* ── Mobile menu btn ─────────────────────────────────────────────────────── */
.menu-btn{
  display:none;width:36px;height:36px;border-radius:var(--r3);
  align-items:center;justify-content:center;color:var(--t2);
  transition:color var(--t-fast),background var(--t-fast);flex-shrink:0;
}
.menu-btn:hover{color:var(--t1);background:var(--bg-elevated)}
@media(max-width:768px){
  .menu-btn{display:flex}
  .sidebar{display:flex;transform:translateX(-100%);transition:transform var(--t-slow)}
  .sidebar.open{transform:translateX(0)}
  :root{--sidebar-w:0px}
}

/* ── Topbar extras ───────────────────────────────────────────────────────── */
.topbar-title{font-size:14px;font-weight:600;flex:1;color:var(--t1)}
.topbar-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}

/* ── Tab sections ────────────────────────────────────────────────────────── */
.tab-section{display:none;min-width:0} /* flex item of .main — without this, wide content (e.g. the statements table) forces .main wider instead of scrolling internally */
.tab-section.active{display:block;animation:fadeUp 200ms var(--ease) forwards}

/* ── Section heading ─────────────────────────────────────────────────────── */
.section-header{margin-bottom:var(--s6)}
.section-title{font-size:22px;font-weight:700;color:var(--t1);letter-spacing:-.3px;margin-bottom:4px}
.section-sub{font-size:13px;color:var(--t3);line-height:1.5}

/* ── Spacing utils ───────────────────────────────────────────────────────── */
.mt-4{margin-top:var(--s5)}
.mt-6{margin-top:var(--s7)}

/* ── KPI row ─────────────────────────────────────────────────────────────── */
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);margin-bottom:var(--s5)}
@media(max-width:1100px){.kpi-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.kpi-row{grid-template-columns:1fr 1fr}}
.kpi-card{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r5);
  padding:var(--s5) var(--s5);
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.kpi-card:hover{border-color:var(--border-green);box-shadow:0 0 0 1px var(--border-green)}
.kpi-label{font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--s2)}
.kpi-val{font-size:28px;font-weight:800;color:var(--t1);line-height:1;font-variant-numeric:tabular-nums;margin-bottom:var(--s2)}
.kpi-meta{font-size:11px;color:var(--t3)}
.kpi-meta.green{color:var(--green-text)}
.kpi-meta.amber{color:var(--amber)}

/* ── Card body text ──────────────────────────────────────────────────────── */
.card-body-text{font-size:13px;color:var(--t2);line-height:1.6;padding:var(--s4) var(--s5)}
.card-hd + .card-body-text{padding-top:var(--s5)}

/* ── Btn sm ──────────────────────────────────────────────────────────────── */
.btn-sm{padding:5px 12px;font-size:11px}

/* ── Video category filter chips ──────────────────────────────────────── */
.video-cat-chips{display:flex;gap:var(--s2);flex-wrap:wrap;padding:0 var(--s5) var(--s3)}
.video-cat-chip{
  display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--r3);
  font-size:12px;font-weight:600;cursor:pointer;background:transparent;border:1px solid var(--border);
  color:var(--t2);transition:all var(--t-fast);
}
.video-cat-chip:hover{color:var(--t1);background:var(--bg-card-hv)}
.video-cat-chip.active{background:var(--green-dim);border-color:var(--border-green);color:var(--green)}
.video-cat-count{font-size:10px;font-weight:700;opacity:.65}

/* ── Glossary (How CSI Invests → Glossary) ──────────────────────────────── */
.gl-toolbar{
  display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;
  padding:0 var(--s5) var(--s4);
}
.gl-search{
  flex:1 1 260px;min-width:0;padding:9px 14px;border-radius:var(--r3);
  background:var(--bg-card-hv);border:1px solid var(--border);color:var(--t1);
  font-size:13px;font-family:inherit;transition:border-color var(--t-fast);
}
.gl-search::placeholder{color:var(--t3)}
.gl-search:focus{outline:none;border-color:var(--border-green)}
.gl-rail{display:flex;gap:var(--s1);flex-wrap:wrap}
.gl-rail-letter{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:var(--r2);text-decoration:none;
  font-size:11px;font-weight:700;color:var(--t2);border:1px solid var(--border);
  transition:all var(--t-fast);
}
.gl-rail-letter:hover{color:var(--green);border-color:var(--border-green);background:var(--green-dim)}

.gl-list{padding:0 var(--s5) var(--s5);display:flex;flex-direction:column;gap:var(--s3)}
.gl-letter-head{
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--green);margin:var(--s4) 0 0;scroll-margin-top:90px;
}
.gl-letter-head:first-child{margin-top:0}
.gl-card{
  background:var(--bg-card-hv);border:1px solid var(--border);
  border-radius:var(--r4);padding:var(--s4) var(--s5);
  transition:border-color var(--t-fast);
}
.gl-card:hover{border-color:var(--border-hv)}
.gl-card-hd{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;margin-bottom:6px}
.gl-term{font-size:15px;font-weight:700;color:var(--t1);margin:0;letter-spacing:-.01em}
.gl-full{font-size:12px;color:var(--green);font-weight:600}
.gl-def{font-size:13px;line-height:1.65;color:var(--t2);margin:0}

.gl-note{padding:var(--s5)}
.gl-note-title{
  font-size:14px;font-weight:700;color:var(--t1);margin:0 0 var(--s3);
  padding-bottom:var(--s3);border-bottom:1px solid var(--border);
}
.gl-note-p{font-size:13px;line-height:1.7;color:var(--t2);margin:0 0 var(--s3)}
.gl-note-p:last-child{margin-bottom:0}

@media(max-width:768px){
  .gl-rail{display:none}   /* the search box is the only affordance worth keeping this narrow */
  .gl-card-hd{gap:var(--s1)}
}

/* ── Video grid (auto-fill, 3 col) ──────────────────────────────────────── */
.video-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:var(--s5);
  padding:var(--s4) var(--s5);
}
.video-thumb{
  border-radius:var(--r4);overflow:hidden;
  background:var(--bg-card);border:1px solid var(--border);
  cursor:pointer;
  transition:transform var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast);
}
.video-thumb.has-video:hover{
  transform:translateY(-2px);border-color:var(--border-green);
  box-shadow:0 12px 36px rgba(0,0,0,.5),0 0 0 1px var(--border-green);
}
.video-thumb img{
  width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
  transition:transform 400ms var(--ease);
}
.video-thumb.has-video:hover img{transform:scale(1.03)}
.play-overlay{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.35);transition:background var(--t-fast);
}
.video-thumb.has-video:hover .play-overlay{background:rgba(0,0,0,.5)}
.play-btn-circle{
  width:44px;height:44px;border-radius:50%;
  background:rgba(45,212,191,.18);border:2px solid var(--green);
  display:flex;align-items:center;justify-content:center;
  transition:background var(--t-fast),transform var(--t-fast);
  backdrop-filter:blur(4px);
}
.video-thumb.has-video:hover .play-btn-circle{background:rgba(45,212,191,.3);transform:scale(1.1)}
.play-btn-circle svg{fill:var(--green);margin-left:2px}
.video-thumb{position:relative}
.thumb-placeholder{
  aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;
  color:var(--t4);
  background:linear-gradient(135deg,#0c1319,#0a1020);
}
.video-info{padding:var(--s3) var(--s4)}
.video-date{font-size:10px;color:var(--t3);margin-bottom:3px}
.video-note{font-size:10px;color:var(--t3);margin-top:4px;font-style:italic}

/* ── Info banner ─────────────────────────────────────────────────────────── */
.info-banner{
  display:flex;align-items:flex-start;gap:12px;
  background:var(--blue-dim);border:1px solid var(--border-blue);border-radius:var(--r4);
  padding:var(--s4) var(--s5);margin:var(--s4) var(--s5);font-size:13px;color:var(--t2);line-height:1.6;
}
.info-banner svg{color:var(--blue);flex-shrink:0;margin-top:1px}
.info-banner a{color:var(--green-text);text-decoration:underline;text-underline-offset:2px}
.info-banner.error-banner{background:var(--red-dim);border-color:rgba(244,86,106,.25)}
.info-banner.error-banner svg{color:var(--red)}

/* ── Article card inner ──────────────────────────────────────────────────── */
.article-card{display:block;color:inherit;padding:0}
.article-card-inner{padding:var(--s5)}
.article-meta{font-size:10px;color:var(--t3);margin-bottom:5px}
.article-title{font-size:13px;font-weight:600;color:var(--t1);line-height:1.45;margin-bottom:8px}
.article-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.article-tag{
  font-size:10px;font-weight:600;padding:2px 8px;border-radius:var(--rpill);
  background:var(--bg-elevated);border:1px solid var(--border);color:var(--t3);
}
.article-read-more{
  display:flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--green-text);
  transition:gap var(--t-fast);
}
.article-card:hover .article-read-more{gap:7px}

/* ── Webinar cards ───────────────────────────────────────────────────────── */
.webinar-card{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  padding:var(--s5) var(--s6);border-bottom:1px solid var(--border);
  transition:background var(--t-fast);
}
.webinar-card:last-child{border-bottom:none}
.webinar-card:hover{background:rgba(255,255,255,.02)}
.webinar-card.past{opacity:.65}
.webinar-left{flex:1;min-width:0}
.webinar-badge{
  display:inline-flex;align-items:center;padding:2px 8px;border-radius:var(--rpill);
  font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  margin-bottom:6px;
}
.badge-green{background:var(--green-dim);color:var(--green);border:1px solid var(--border-green)}
.badge-dim{background:var(--bg-elevated);color:var(--t3);border:1px solid var(--border)}
.webinar-title{font-size:13px;font-weight:600;color:var(--t1);margin-bottom:5px;line-height:1.35}
.webinar-date{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--t3)}
.webinar-actions{flex-shrink:0}
.btn-zoom{background:var(--green);color:#000;border-color:var(--green)}
.btn-zoom:hover{background:var(--green-bright);transform:translateY(-1px);box-shadow:0 4px 14px var(--green-glow)}

/* ── Badge (generic) ─────────────────────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:var(--rpill);
  font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
}

/* ── Search input standalone ─────────────────────────────────────────────── */
.search-input{
  background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r3);
  color:var(--t1);font-size:12px;padding:7px var(--s4);outline:none;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.search-input:focus{border-color:var(--border-green);box-shadow:0 0 0 3px var(--green-dim)}
.search-input::placeholder{color:var(--t3)}
.search-wrap .search-input{background:none;border:none;box-shadow:none;padding:0}
.search-wrap .search-input:focus{border:none;box-shadow:none}

/* ── Financial dashboard ─────────────────────────────────────────────────── */
.fin-ticker-row{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;padding:0 var(--s5)}
.fin-profile{
  padding:var(--s5) var(--s5) var(--s4);border-bottom:1px solid var(--border);
}
.fin-profile-name{font-size:18px;font-weight:700;color:var(--t1);margin-bottom:4px}
.fin-profile-meta{display:flex;gap:var(--s4);flex-wrap:wrap}
.fin-profile-meta span{font-size:11px;color:var(--t3)}
.fin-tables-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);padding:var(--s5);
}
@media(max-width:800px){.fin-tables-grid{grid-template-columns:1fr}}
.fin-table-title{font-size:11px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:var(--s3)}
.fin-table{width:100%;border-collapse:collapse;font-size:12px;border-radius:var(--r4);overflow:hidden}
.fin-table th{
  text-align:left;padding:var(--s2) var(--s3);
  font-size:10px;font-weight:700;color:var(--t3);
  text-transform:uppercase;letter-spacing:.06em;
  border-bottom:1px solid var(--border);background:rgba(255,255,255,.02);
}
.fin-table td{
  padding:var(--s2) var(--s3);border-bottom:1px solid var(--border);
  font-size:12px;color:var(--t2);font-variant-numeric:tabular-nums;
}
.fin-table tr:last-child td{border-bottom:none}
.fin-table tr:hover td{background:rgba(255,255,255,.02);color:var(--t1)}
.fin-label{color:var(--t2)!important;font-weight:500}
.fin-empty{text-align:center;color:var(--t3);padding:var(--s5)!important}
.skeleton-row{
  height:40px;border-radius:var(--r3);margin-bottom:var(--s3);
  background:linear-gradient(90deg,var(--bg-elevated) 25%,rgba(255,255,255,.07) 50%,var(--bg-elevated) 75%);
  background-size:200% 100%;animation:shimmer 1.4s infinite;
}

/* ── ITC checklist ───────────────────────────────────────────────────────── */
.itc-item{
  display:flex;align-items:flex-start;gap:12px;
  padding:var(--s4) var(--s5);border-bottom:1px solid var(--border);
  cursor:pointer;transition:background var(--t-fast),border-color var(--t-fast);
}
.itc-item:last-child{border-bottom:none}
.itc-item:hover{background:rgba(255,255,255,.02)}
.itc-item.checked{background:var(--green-dim)}
.itc-check{
  width:22px;height:22px;border-radius:var(--r2);border:2px solid var(--border-hv);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;
  transition:background var(--t-fast),border-color var(--t-fast);
}
.itc-item.checked .itc-check{background:var(--green);border-color:var(--green)}
.itc-check svg{stroke:black;opacity:0;transition:opacity var(--t-fast)}
.itc-item.checked .itc-check svg{opacity:1}
.itc-body{flex:1;min-width:0}
.itc-label{font-size:13px;font-weight:600;color:var(--t1);margin-bottom:2px}
.itc-desc{font-size:11px;color:var(--t3);line-height:1.5}
.score-display{
  display:flex;flex-direction:column;align-items:center;
  background:linear-gradient(135deg,var(--green-dim),rgba(45,212,191,.03));
  border:1px solid var(--border-green);border-radius:var(--r5);
  padding:var(--s5) var(--s6);text-align:center;margin:var(--s5) var(--s5) 0;
}
.score-num{font-size:36px;font-weight:800;color:var(--green);line-height:1;font-variant-numeric:tabular-nums}
.score-label{font-size:10px;color:var(--t3);font-weight:700;text-transform:uppercase;letter-spacing:.07em;margin-top:4px}
.score-high .score-num{color:var(--green)}
.score-mid .score-num{color:var(--amber)}
.score-low .score-num{color:var(--red)}

/* ── Trends grid ─────────────────────────────────────────────────────────── */
.trends-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--s5);
  padding:var(--s4) var(--s5) var(--s5);
}
.trend-card{padding:var(--s6);transition:border-color var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast)}
.trend-card:hover{border-color:var(--border-green);transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.35)}
.trend-icon{font-size:28px;margin-bottom:var(--s4);line-height:1}
.trend-title{font-size:14px;font-weight:700;color:var(--t1);margin-bottom:3px}
.trend-sub{font-size:10px;font-weight:700;color:var(--green-text);text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--s3)}
.trend-body{font-size:12px;color:var(--t2);line-height:1.6}

/* ── DCF Calculator (Svelte FD replica) ─────────────────────────────────── */
.dcfv2-card{max-width:680px;margin-left:auto;margin-right:auto}
.dcfv2-search-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px 12px;margin-bottom:4px;
  border-bottom:1px solid var(--border);
}
.dcfv2-search-group{display:flex;align-items:center;gap:8px}
.dcfv2-ticker{
  width:120px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r3);
  color:var(--t1);font-size:13px;font-weight:700;letter-spacing:.06em;
  padding:7px 11px;text-transform:uppercase;
  transition:border-color var(--t-fast);
}
.dcfv2-ticker:focus{border-color:var(--border-green);outline:none;box-shadow:0 0 0 3px var(--green-dim)}
.dcfv2-status{min-height:14px;padding:0 16px 4px;font-size:11px;color:var(--t3)}
.dcfv2-chk{accent-color:var(--green);width:13px;height:13px;cursor:pointer;flex-shrink:0}

/* Custom-weight override row (Reverse DCF Calculator) — .dcf-row/.dcf-label/
   .dcf-input-group/.dcf-text-input/.dcf-slider are also class names used by
   the embedded Fiscal.ai Financial Dashboard's own DCF Calculator tab; these
   rules used to be bare/unscoped and leaked into that widget (forcing its
   EPS/FCF weight rows into a 2-column layout and its stock-info line into a
   single flex row, neither of which the raw bundle does by default). Scoped
   under the unique wrapper classes actually used here so they only apply to
   this override row and the Save Scenario modal's notify-range row. */
.dcf-override-row.dcf-row{
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  padding:14px 0 8px;border-bottom:1px solid var(--border);
}
.dcf-override-row .dcf-label{
  flex-shrink:0;width:110px;font-size:12px;font-weight:600;color:var(--t2);
}
.dcf-chk-label{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:600;color:var(--t2);cursor:pointer;user-select:none;
}
.dcf-custom-weight-row{display:none;align-items:center;gap:8px;padding-left:21px}
.dcf-custom-weight-row.is-visible{display:flex}
.dcf-custom-weight-row .dcf-label{width:auto}

/* Save Scenario modal — notify-range slider row */
.dcf-modal-notify-range .dcf-input-group{display:flex;align-items:center;gap:10px;flex:1}
.dcf-slider{flex:1;accent-color:var(--green);cursor:pointer;min-width:0}
.dcf-slider:disabled{opacity:.25;cursor:default}
.dcf-modal-notify-range .dcf-text-input{
  width:68px;flex-shrink:0;
  background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r2);
  color:var(--t1);font-size:12px;font-weight:700;padding:5px 8px;text-align:right;
  font-variant-numeric:tabular-nums;
  transition:border-color var(--t-fast);
}
.dcf-modal-notify-range .dcf-text-input:focus{border-color:var(--border-green);outline:none;box-shadow:0 0 0 2px var(--green-dim)}

/* Modal */
.dcf-modal-backdrop{
  display:none;position:fixed;inset:0;z-index:1000;
  background:rgba(0,0,0,.65);
  align-items:center;justify-content:center;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.dcf-modal-backdrop.is-open{display:flex}
.dcf-modal{
  background:#1a2030;border:1px solid var(--border);border-radius:14px;
  padding:32px;width:min(440px,90vw);box-shadow:0 28px 60px rgba(0,0,0,.7);
}
.dcf-modal-title{font-size:18px;font-weight:700;color:var(--t1);margin-bottom:20px}
.dcf-modal-label{
  display:block;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--t3);margin-bottom:8px;
}
.dcf-modal-input{
  display:block;width:100%;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r3);
  color:var(--t1);font-size:14px;font-weight:700;padding:10px 14px;margin-bottom:18px;
}
.dcf-modal-input:focus{border-color:var(--border-green);outline:none;box-shadow:0 0 0 3px var(--green-dim)}
.dcf-modal-notify-label{
  display:flex;align-items:center;gap:10px;
  font-size:13px;font-weight:600;color:var(--t2);cursor:pointer;margin-bottom:16px;
}
.dcf-modal-notify-range{margin-bottom:24px}
.dcf-modal-notify-range .dcf-modal-label{margin-bottom:10px}
.dcf-modal-notify-range .dcf-input-group{align-items:center}
.dcf-modal-notify-range .dcf-text-input{width:50px}
.dcf-modal-btns{display:flex;gap:12px}
.dcf-modal-btns .btn{flex:1;justify-content:center;font-size:13px;font-weight:700;letter-spacing:.06em}
.save-flash{font-size:11px;font-weight:700;color:var(--green-text)}

/* ── Changelog / What's New ─────────────────────────────────────────────── */
.cl-pill{
  margin-left:auto;min-width:16px;height:16px;padding:0 5px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:800;line-height:1;
  background:var(--green);color:#04221d;
}
.cl-modal{width:min(560px,92vw);padding:0;display:flex;flex-direction:column;max-height:84vh}

/* ── All saved companies modal ("View all" on the dashboard widget) ──────── */
.savedco-modal{width:min(900px,94vw);padding:0;display:flex;flex-direction:column;max-height:88vh;overflow:hidden}
.savedco-filters{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:10px 28px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.012);
}
.savedco-body{flex:1;min-height:0;overflow-y:auto}
.savedco-body .dco-grid,
.savedco-body .dco-listview{padding:16px 28px}
.savedco-body .dco-grid{grid-template-columns:1fr 1fr}
@media (max-width:640px){
  .savedco-filters{padding-left:16px;padding-right:16px}
  .savedco-body .dco-grid,.savedco-body .dco-listview{padding:14px 16px}
  .savedco-body .dco-grid{grid-template-columns:1fr}
}
.cl-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:24px 28px 18px;border-bottom:1px solid var(--border);
}
.cl-sub{font-size:12.5px;color:var(--t3);margin:0}
.cl-close{
  flex-shrink:0;width:30px;height:30px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;color:var(--t3);cursor:pointer;transition:all var(--t-fast);
}
.cl-close:hover{background:var(--bg-elevated);color:var(--t1)}
.cl-body{padding:8px 28px 24px;overflow-y:auto}
.cl-entry{padding:18px 0;border-bottom:1px solid var(--border)}
.cl-entry:last-child{border-bottom:none}
.cl-ver-row{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.cl-ver{font-size:14px;font-weight:800;color:var(--t1);letter-spacing:.01em}
.cl-date{font-size:11px;font-weight:600;color:var(--t3)}
.cl-latest{
  margin-left:auto;font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 8px;border-radius:20px;background:var(--green-dim);color:var(--green-text);
}
.cl-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.cl-li{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.5;color:var(--t2)}
.cl-li strong{color:var(--t1);font-weight:700}
.cl-li code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  background:var(--bg-elevated);border:1px solid var(--border);border-radius:4px;padding:1px 5px;color:var(--t1);
}
.cl-tag{
  flex-shrink:0;margin-top:1px;font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 7px;border-radius:5px;min-width:54px;text-align:center;
}
.cl-tag.t-new{background:var(--green-dim);color:var(--green-text)}
.cl-tag.t-improved{background:var(--blue-dim);color:var(--blue)}
.cl-tag.t-fixed{background:var(--amber-dim);color:var(--amber)}
.cl-tag.t-removed{background:var(--red-dim);color:var(--red)}

/* ── Supply chain result ─────────────────────────────────────────────────── */
.seg-result{
  background:var(--bg-card);border:1px solid var(--border-green);border-radius:var(--r5);
  padding:var(--s5) var(--s6);animation:fadeUp 180ms var(--ease) forwards;
}
.seg-result-hd{margin-bottom:var(--s4)}
.seg-result-hd strong{font-size:15px;font-weight:700;color:var(--t1);display:block;margin-bottom:4px}
.seg-result-desc{font-size:12px;color:var(--t2);line-height:1.5}
.seg-tickers{display:flex;flex-wrap:wrap;gap:var(--s2)}
.ticker-pill{
  padding:4px 12px;border-radius:var(--rpill);
  background:var(--bg-elevated);border:1px solid var(--border);
  font-size:12px;font-weight:700;color:var(--t1);letter-spacing:.04em;
  transition:border-color var(--t-fast),color var(--t-fast),background var(--t-fast);
  cursor:default;
}
.ticker-pill:hover{border-color:var(--border-green);color:var(--green);background:var(--green-dim)}

/* ── Company cards ───────────────────────────────────────────────────────── */
.co-card{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r5);
  padding:var(--s5);
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3);
  transition:transform var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast);
}
.co-card:hover{transform:translateY(-2px);border-color:var(--border-green);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.co-logo{
  width:40px;height:40px;border-radius:var(--r3);
  background:var(--bg-elevated);border:1px solid var(--border);
  object-fit:contain;padding:4px;
}
.co-info{flex:1;min-width:0}
.co-name{font-size:14px;font-weight:700;color:var(--t1)}
.co-ticker{font-size:11px;color:var(--t3);font-weight:500;margin-bottom:2px}
.co-segment{font-size:10px;color:var(--green-text);font-weight:600;text-transform:uppercase;letter-spacing:.05em}

/* ── Education grid ──────────────────────────────────────────────────────── */
.edu-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--s5);
  margin-bottom:var(--s6);
}
.edu-card{padding:var(--s6);transition:border-color var(--t-fast),transform var(--t-fast)}
.edu-card:hover{border-color:var(--border-green);transform:translateY(-2px)}
.edu-icon{
  width:48px;height:48px;border-radius:var(--r5);
  background:var(--green-dim);border:1px solid var(--border-green);
  display:flex;align-items:center;justify-content:center;
  color:var(--green);margin-bottom:var(--s4);
}
.edu-title{font-size:15px;font-weight:700;color:var(--t1);margin-bottom:var(--s3)}
.edu-body{font-size:13px;color:var(--t2);line-height:1.65}

/* ── Process steps ───────────────────────────────────────────────────────── */
.process-steps{display:flex;flex-direction:column;gap:0;padding:var(--s4) var(--s5)}
.process-step{
  display:flex;gap:var(--s5);padding:var(--s5) 0;border-bottom:1px solid var(--border);
}
.process-step:last-child{border-bottom:none}
.step-num{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:var(--green-dim);border:1.5px solid var(--green);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;color:var(--green);
}
.step-body{flex:1;min-width:0;padding-top:4px}
.step-body h4{font-size:14px;font-weight:700;color:var(--t1);margin-bottom:6px}
.step-body p{font-size:13px;color:var(--t2);line-height:1.6}

/* ── Buy/Sell — v4-style timeline ────────────────────────────────────────── */
#stocks-buy-sell-board{padding:var(--s4) 0 var(--s5)}

.bs-intro{font-size:13px;color:var(--t3);margin-bottom:var(--s4)}

.bs-new-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;margin-bottom:var(--s4);
  background:var(--green-dim);border:1px solid var(--border-green);
  border-radius:var(--rpill);font-size:12px;font-weight:500;
  color:var(--green);cursor:pointer;
}

/* Filter chips */
.bs-filter-rail{
  display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;
  margin-bottom:var(--s5);scrollbar-width:thin;
}
.bs-filter-rail::-webkit-scrollbar{height:4px}
.bs-filter-rail::-webkit-scrollbar-thumb{background:var(--border-hv);border-radius:99px}
.bs-chip{
  flex-shrink:0;display:inline-flex;align-items:center;
  padding:6px 14px;border-radius:var(--rpill);
  border:1px solid var(--border);background:none;
  font-size:12px;font-weight:500;color:var(--t2);
  cursor:pointer;transition:color var(--t-fast),border-color var(--t-fast),background var(--t-fast);
}
.bs-chip:hover{color:var(--t1);border-color:var(--border-hv)}
.bs-chip.active{
  border-color:var(--border-green);
  background:var(--green-dim);
  color:var(--green);
}

/* Timeline wrapper */
.bs-timeline{position:relative;padding-left:28px}
.bs-timeline::before{
  content:'';position:absolute;left:7px;top:8px;bottom:8px;
  width:1px;background:var(--border-hv);
}

/* Individual item */
.bs-item{position:relative;margin-bottom:var(--s4)}
.bs-item:last-child{margin-bottom:0}

/* Timeline dot */
.bs-dot{
  position:absolute;left:-28px;top:14px;
  width:14px;height:14px;
  border-radius:50%;border:2px solid var(--bg);
}
.bs-dot-green{background:var(--green)}
.bs-dot-red{background:var(--red)}
.bs-dot-amber{background:var(--amber)}
.bs-dot-blue{background:var(--blue)}

/* Card */
.bs-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--r4);padding:var(--s4);
  transition:border-color var(--t-fast);
}
.bs-card:hover{border-color:var(--border-hv)}

/* Card header row */
.bs-card-hd{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}

/* Type badge */
.bs-badge{
  display:inline-flex;align-items:center;
  padding:2px 8px;border-radius:var(--rpill);
  font-size:11px;font-weight:600;letter-spacing:.04em;
  border:1px solid transparent;
}
.bs-badge-green{background:var(--green-dim);color:var(--green);border-color:var(--border-green)}
.bs-badge-red{background:var(--red-dim);color:var(--red);border-color:rgba(248,113,113,.3)}
.bs-badge-amber{background:var(--amber-dim);color:var(--amber);border-color:rgba(251,191,36,.3)}
.bs-badge-blue{background:var(--blue-dim);color:var(--blue);border-color:rgba(96,165,250,.25)}

/* Pinned label */
.bs-pinned{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:500;color:var(--amber)}

/* Date */
.bs-date{margin-left:auto;font-size:12px;color:var(--t3);white-space:nowrap}

/* Title */
.bs-title{font-size:15px;font-weight:600;color:var(--t1);margin-bottom:4px}

/* Body */
.bs-body{font-size:13px;line-height:1.6;color:var(--t2)}
.bs-body a{color:var(--green);text-decoration:none}
.bs-body a:hover{text-decoration:underline}
.bs-body p{margin-bottom:6px}
.bs-body p:last-child{margin-bottom:0}

/* Empty / spinner */
.bs-empty{padding:var(--s7) 0;text-align:center;font-size:14px;color:var(--t3)}
.bs-spinner{
  width:24px;height:24px;margin:var(--s6) auto;
  border:2px solid var(--border-hv);border-top-color:var(--green);
  border-radius:50%;animation:spin .7s linear infinite;
}

/* ── Modal close btn ─────────────────────────────────────────────────────── */
.modal{position:relative}
.modal-close{
  position:absolute;top:var(--s4);right:var(--s4);z-index:10;
  width:32px;height:32px;border-radius:var(--r3);
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);color:var(--t2);
  transition:color var(--t-fast),background var(--t-fast);
}
.modal-close:hover{color:var(--t1);background:rgba(255,255,255,.15)}
.modal-video{width:min(900px,calc(100vw - 32px))}

/* ── fin-ticker-row within card ──────────────────────────────────────────── */
.card-hd .fin-ticker-row{padding:0}

/* ── Fix: subtab-bar inside tab ──────────────────────────────────────────── */
.tab-section .subtab-bar{margin-top:0}

/* ── Responsive extras ───────────────────────────────────────────────────── */
@media(max-width:768px){
  .logo-full,.logo-full-light{display:none}
  body.light .logo-full-light{display:none}
  .logo-mark{display:block}
  .kpi-row{grid-template-columns:1fr 1fr}
  .trends-grid,.edu-grid{grid-template-columns:1fr}
  .dcf-field-group{grid-template-columns:1fr 1fr}
  .fin-tables-grid{grid-template-columns:1fr}
  .process-step{flex-direction:column;gap:var(--s3)}
}
@media(max-width:480px){
  .section-title{font-size:18px}
  .kpi-row{grid-template-columns:1fr 1fr;gap:var(--s3)}
  .kpi-val{font-size:22px}
  .video-grid{grid-template-columns:1fr}
  .dcf-field-group{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOPBAR — Search bar + right actions
   ═══════════════════════════════════════════════════════════════════════════ */

.tb-search{
  flex:1;max-width:460px;position:relative;
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.05);border:1px solid var(--border);
  border-radius:var(--r3);padding:0 var(--s3);height:36px;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.tb-search:focus-within{border-color:var(--border-green);box-shadow:0 0 0 3px var(--green-dim)}
.tb-search-icon{color:var(--t3);flex-shrink:0}
.tb-search-input{
  flex:1;min-width:0;background:none;border:none;outline:none;
  color:var(--t1);font-size:12px;
}
.tb-search-input::placeholder{color:var(--t3)}
.tb-search-results{
  position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:200;
  max-height:360px;overflow-y:auto;
  background:var(--bg-sidebar);border:1px solid var(--border-hv);border-radius:var(--r4);
  padding:6px;box-shadow:0 18px 50px -12px rgba(0,0,0,.6);
  animation:fadeUp 140ms var(--ease) forwards;
}
.tsr-group-label{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);padding:8px 10px 4px}
.tsr-item{
  display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--r2);
  font-size:12px;font-weight:500;color:var(--t1);cursor:pointer;transition:background var(--t-fast);
}
.tsr-item:hover{background:var(--bg-elevated)}
.tsr-item-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tsr-ticker{font-weight:700;color:var(--green-text);flex-shrink:0;margin-right:6px}
.tsr-meta{flex-shrink:0;font-size:10px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.tsr-empty{padding:16px 10px;text-align:center;font-size:12px;color:var(--t3)}
.tb-right{display:flex;align-items:center;gap:6px;margin-left:auto;flex-shrink:0}
.tb-right .tb-live,
.tb-right .acct-wrap>.btn,
.tb-right .tb-user{height:34px;padding-top:0;padding-bottom:0}
.tb-live{
  display:flex;align-items:center;gap:5px;
  font-size:10px;font-weight:700;color:var(--green);letter-spacing:.06em;
  padding:4px 10px;border-radius:var(--rpill);
  background:var(--green-dim);border:1px solid var(--border-green);
}
.tb-bell{
  width:34px;height:34px;border-radius:var(--r3);
  display:flex;align-items:center;justify-content:center;
  color:var(--t2);transition:color var(--t-fast),background var(--t-fast);
}
.tb-bell:hover{color:var(--t1);background:var(--bg-elevated)}
.tb-av{
  width:28px;height:28px;border-radius:50%;
  background:var(--green-dim);border:1.5px solid var(--green);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;color:var(--green);flex-shrink:0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD HOME — Multi-column layout + all widgets
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Greeting bar ─────────────────────────────────────────────────────────── */
.dash-greet-bar{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s5);
  margin-bottom:var(--s5);padding:var(--s4) var(--s5);
}
.dash-greet-left{display:flex;flex-direction:column;align-items:center;gap:3px}
.da-av{
  width:42px;height:42px;border-radius:50%;
  background:var(--green-dim);border:2px solid var(--green);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;color:var(--green);flex-shrink:0;
}
.dash-hello{font-size:18px;font-weight:700;color:var(--t1);letter-spacing:-.3px}
.dash-tagline{font-size:11px;color:var(--t3);margin-top:2px}

/* ── Dashboard home rows — each row is an equal 3-col grid of cards ──────── */
.dash-grid-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-bottom:16px;
  align-items:stretch;
}
/* Every card tops out at the same height, so the four rows read as one even
   band rather than stair-stepping from ~250px to ~1500px. The cap is on the
   card, not on its list, so cards carrying an extra toolbar above the list
   (Saved Companies) still line up with their neighbours. A card whose list runs
   longer than the cap scrolls inside itself; cards with little to show (the
   thesis and alert lists) stay short rather than being padded out to match. */
.dash-grid-row > .card{
  display:flex;flex-direction:column;
  max-height:var(--dash-card-h,468px);
}
.dash-grid-row > .card > .card-foot-row{margin-top:auto}
.dash-grid-row > .card > #savedCoList{flex:1}
.dash-grid-row > .card > *:last-child:not(.card-hd){
  flex:1 1 auto;
  overflow-y:auto;
  min-height:0;
}
.dash-grid-row > .card > *:last-child:not(.card-hd)::-webkit-scrollbar{width:6px}
.dash-grid-row > .card > *:last-child:not(.card-hd)::-webkit-scrollbar-thumb{
  background:var(--border);border-radius:3px;
}
.dash-grid-row > .card > *:last-child:not(.card-hd)::-webkit-scrollbar-track{background:transparent}

/* ── Resizable cards ──────────────────────────────────────────────────────
   #dashCardGrid is a fine 12-column grid so a card's WIDTH can be tuned in small
   steps: a card spans --dc-w columns (default 4 = one third of the row). Its
   HEIGHT is free pixels (--dc-h). Both come from custom props set per card by
   initCardResize() in app.js and are read here (not as inline styles) so the
   responsive rules below can neutralise them. Custom sizes apply on desktop
   only; the grid drops to 2-up (tablet) and 1-up (mobile), where per-card widths
   and pixel heights are meaningless. */
#dashCardGrid{grid-template-columns:repeat(12,1fr)}
#dashCardGrid > .dcard{position:relative;grid-column:span var(--dc-w,4)}
#dashCardGrid > .dcard.dcard-sized{height:var(--dc-h);max-height:none;align-self:start}

/* Resize handles, one per EDGE — top & bottom change height, left & right change
   width. No corner handle. They stay invisible and click-through until the card
   is hovered, so at rest they never block a button or scrollbar underneath. */
.dcard-rz{position:absolute;z-index:6;opacity:0;pointer-events:none;touch-action:none;transition:opacity var(--t-fast)}
.dcard:hover .dcard-rz{opacity:1;pointer-events:auto}
/* Side handles start below the card header and stop above the footer so they
   never sit over a header action button (e.g. "View all →"). The top handle is
   a centred strip clear of the header's title and button. */
.dcard-rz-e{top:48px;bottom:12px;right:0;width:10px;cursor:ew-resize}
.dcard-rz-w{top:48px;bottom:12px;left:0;width:10px;cursor:ew-resize}
.dcard-rz-s{left:12px;right:12px;bottom:0;height:10px;cursor:ns-resize}
.dcard-rz-n{left:52px;right:52px;top:0;height:9px;cursor:ns-resize}
.dcard-rz-e::after,.dcard-rz-w::after{content:"";position:absolute;top:50%;transform:translateY(-50%);width:3px;height:32px;border-radius:2px;background:var(--t3)}
.dcard-rz-e::after{right:2px}
.dcard-rz-w::after{left:2px}
.dcard-rz-n::after,.dcard-rz-s::after{content:"";position:absolute;left:50%;transform:translateX(-50%);height:3px;width:32px;border-radius:2px;background:var(--t3)}
.dcard-rz-n::after{top:2px}
.dcard-rz-s::after{bottom:2px}
.dcard-rz:hover::after{background:var(--green)}
.dcard.dcard-resizing{outline:2px solid var(--border-green);outline-offset:-2px;user-select:none}
.dcard.dcard-resizing .dcard-rz{opacity:1;pointer-events:auto}
/* Keep the drag smooth: while resizing, the card's inner content shouldn't
   swallow the pointer (the handle keeps it via setPointerCapture). */
.dash-grid-row.dcard-resizing-active .dcard-resizing *{pointer-events:none}
.dash-grid-row.dcard-resizing-active .dcard-resizing .dcard-rz{pointer-events:auto}

@media(max-width:1100px){
  #dashCardGrid{grid-template-columns:1fr 1fr}
  #dashCardGrid > .dcard{grid-column:auto}
  #dashCardGrid > .dcard.dcard-sized{height:auto;max-height:var(--dash-card-h,468px)}
}
@media(max-width:768px){
  #dashCardGrid{grid-template-columns:1fr}
  /* Single column: let each card run to its natural height; per-card widths and
     the resize handles are switched off. */
  .dash-grid-row > .card{max-height:none}
  .dash-grid-row > .card > *:last-child:not(.card-hd){overflow-y:visible}
  #dashCardGrid > .dcard{grid-column:auto}
  #dashCardGrid > .dcard.dcard-sized{height:auto;max-height:none}
  .dcard-rz{display:none}
}


/* ── Saved companies toolbar (tabs + view toggle) ────────────────────────── */
.dco-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px var(--s5);border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.012);
}
.co-filter-row{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.ftab-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:16px;height:16px;padding:0 4px;margin-left:4px;border-radius:var(--rpill);
  font-size:9px;font-weight:800;background:rgba(255,255,255,.08);color:var(--t2);
}
.ftab.active .ftab-count{background:var(--green-dim);color:var(--green)}
.dco-view-toggle{display:flex;gap:2px;flex-shrink:0}
.dco-vt{
  width:26px;height:26px;border-radius:var(--r2);
  display:flex;align-items:center;justify-content:center;
  color:var(--t4);transition:all var(--t-fast);
}
.dco-vt:hover{color:var(--t2)}
.dco-vt.active{background:var(--green-dim);color:var(--green)}

/* ── Split-dropdown filter tabs ─────────────────────────────────────────── */
.ftab-dd-wrap{position:relative;display:inline-flex}
.ftab-split-label{
  border-radius:var(--rpill) 0 0 var(--rpill);
  padding-right:8px;
  border-right:none;
}
.ftab-split-arrow{
  border-radius:0 var(--rpill) var(--rpill) 0;
  padding:5px 8px;
  display:flex;align-items:center;justify-content:center;
  border-left:1px solid rgba(255,255,255,.04);
}
.ftab-split-label.active{color:var(--green);background:var(--green-dim);border-color:var(--border-green)}
.ftab-split-arrow.active{color:var(--green);background:var(--green-dim);border-color:var(--border-green);border-left-color:rgba(45,212,191,.18)}
.ftab-split-label:hover,.ftab-split-arrow:hover{color:var(--t2);border-color:var(--border-hv)}
.ftab-split-label.active:hover,.ftab-split-arrow.active:hover{color:var(--green)}

/* Dropdown panel */
.ftab-dd-menu{
  position:absolute;top:calc(100% + 5px);left:0;z-index:300;
  background:var(--bg-card);
  border:1px solid var(--border-green);
  border-radius:var(--r3);
  padding:4px;min-width:230px;
  box-shadow:0 8px 32px rgba(0,0,0,.45),0 0 0 1px var(--border-green);
  animation:ddIn .12s ease;
}
@keyframes ddIn{from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:translateY(0)}}
.ftab-dd-item{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:9px 12px;border-radius:var(--r2);
  font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--green);background:none;cursor:pointer;text-align:left;
  transition:background var(--t-fast);
}
.ftab-dd-item:hover{background:var(--green-dim)}
.ftab-dd-dot{
  width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0;
}
.ftab-dd-txt{flex:1;min-width:0}
/* The item is a toggle — the check marks this tab as grouped by segment. */
.ftab-dd-check{flex-shrink:0;opacity:0;transition:opacity var(--t-fast)}
.ftab-dd-item.on{background:var(--green-dim)}
.ftab-dd-item.on .ftab-dd-check{opacity:1}

/* ── Saved companies grouped by supply-chain segment ─────────────────────── */
.dco-grouped{display:flex;flex-direction:column;gap:14px;padding:12px var(--s5)}
/* The inner grid/list already sits inside the grouped wrapper's padding. */
.dco-grouped .dco-grid,
.dco-grouped .dco-listview{padding:0}
.dco-seg-head{
  display:flex;align-items:center;gap:8px;
  padding:0 2px 8px;margin-bottom:2px;
  border-bottom:1px solid var(--border);
}
.dco-seg-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.dco-seg-name{
  flex:1;min-width:0;margin:0;
  font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--t2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dco-seg-count{
  flex-shrink:0;font-size:10px;font-weight:800;font-variant-numeric:tabular-nums;
  min-width:18px;padding:1px 6px;border-radius:999px;text-align:center;
  background:var(--bg-elevated);border:1px solid var(--border);color:var(--t3);
}
/* ── Company grid cards ──────────────────────────────────────────────────── */
.dco-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px var(--s5)}
.dco-listview{display:flex;flex-direction:column;gap:6px;padding:12px var(--s5)}
.dco-card{
  background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r4);
  padding:11px 12px;display:flex;flex-direction:column;gap:9px;
  transition:border-color var(--t-fast),background var(--t-fast);
  position:relative;
}
.dco-card.dco-dragging{opacity:.35;outline:2px dashed var(--border-hv);outline-offset:-2px}
.dco-card.dco-drag-over{
  outline:2px solid var(--green);outline-offset:-2px;
  box-shadow:0 0 0 3px var(--green-dim);
  border-color:var(--border-green);
}
.dco-card:hover{border-color:var(--border-green);background:var(--bg-card-hv)}
.dco-remove{
  position:absolute;top:6px;right:6px;z-index:2;
  width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r2);color:var(--t4);background:transparent;cursor:pointer;
  opacity:0;transition:opacity var(--t-fast),color var(--t-fast),background var(--t-fast);
}
.dco-card:hover .dco-remove{opacity:1}
.dco-remove:hover{color:var(--red);background:var(--red-dim)}
.dco-listview .dco-remove{position:static;opacity:1;flex-shrink:0;order:3}
.dco-listview .dco-card{
  flex-direction:row;align-items:center;justify-content:space-between;
  gap:16px;padding:14px 16px;
}
/* The name block takes the slack so price and shares line up down the column. */
.dco-listview .dco-card-head{flex:1 1 auto}
.dco-listview .dco-card-foot{flex-shrink:0}
@media (max-width:640px){
  .dco-listview .dco-card{gap:10px;padding:12px}
}
.dco-card-head{display:flex;align-items:center;gap:9px;min-width:0}
.dco-logo{
  width:30px;height:30px;border-radius:var(--r2);flex-shrink:0;
  background:#fff;border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-size:10px;font-weight:800;color:var(--t2);
}
.dco-logo.mono{background:var(--bg-card)}
.dco-logo img{width:22px;height:22px;object-fit:contain}
.dco-meta{min-width:0}
.dco-name{font-size:12px;font-weight:800;color:var(--t1);font-variant-numeric:tabular-nums;line-height:1.2}
.dco-fullname{font-size:10px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.dco-card-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.dco-listview .dco-card-foot{align-items:center}
.dco-price-wrap{min-width:0}
.dco-price{font-size:14px;font-weight:800;color:var(--t1);font-variant-numeric:tabular-nums;line-height:1.1}
.dco-chg{font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:2px}
.dco-chg.up{color:var(--green)}
.dco-chg.dn{color:var(--red)}
.dco-spark{width:70px;height:30px;flex-shrink:0}

/* ── Card foot row ───────────────────────────────────────────────────────── */
.card-foot-row{
  border-top:1px solid var(--border);padding:var(--s3) var(--s5);
  background:rgba(255,255,255,.012);
}
.btn-text-link{
  background:none;border:none;cursor:pointer;font:inherit;
  font-size:14px;font-weight:600;color:var(--green-text);
  transition:opacity var(--t-fast);padding:0;
}
.btn-text-link:hover{opacity:.7}
.red-link{color:var(--red)!important}

/* ── Dashboard article rows (DAR) ────────────────────────────────────────── */
.dar{
  display:flex;align-items:stretch;border-bottom:1px solid var(--border);
  position:relative;transition:background var(--t-fast);
}
.dar:last-child{border-bottom:none}
.dar:hover{background:rgba(255,255,255,.025)}
.dar-link{
  display:flex;align-items:flex-start;gap:11px;flex:1;
  padding:11px var(--s5);text-decoration:none;min-width:0;
}
.dar-thumb{
  width:46px;height:46px;border-radius:var(--r2);flex-shrink:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.dar-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.dar-thumb-ph.dar-thumb-green{background:linear-gradient(135deg,#0f2a1a,#0a1f10)}
.dar-thumb-ph.dar-thumb-blue{background:linear-gradient(135deg,#0a1020,#0e1530)}
.dar-thumb-ph.dar-thumb-amber{background:linear-gradient(135deg,#1a1000,#251500)}
.dar-thumb-ph::after{content:'';width:18px;height:18px;border-radius:4px;background:rgba(255,255,255,.07)}
.dar-body{flex:1;min-width:0}
.dar-meta{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.dar-cat{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.07em}
.dar-cat-green{color:var(--green-text)}
.dar-cat-blue{color:var(--blue)}
.dar-cat-amber{color:var(--amber)}
.dar-date{font-size:10px;color:var(--t3)}
.dar-title{
  font-size:12px;font-weight:600;color:var(--t1);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.dar:hover .dar-title{color:var(--green-text)}
.dar-img{
  width:52px;height:52px;border-radius:var(--r2);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.dar-img-0{background:linear-gradient(135deg,#0f2a1a,#0a1f10)}
.dar-img-1{background:linear-gradient(135deg,#0a1020,#0e1530)}
.dar-img-2{background:linear-gradient(135deg,#1a1000,#251500)}
.dar-img-3{background:linear-gradient(135deg,#120a20,#1a1030)}
.dar-img-glow{
  position:absolute;inset:0;
  background:radial-gradient(circle at 60% 40%,rgba(45,212,191,.18) 0%,transparent 70%);
}
.dar-img svg{position:relative;z-index:1}
.save-art-btn{
  padding:0 var(--s3);display:flex;align-items:center;justify-content:center;
  color:var(--t3);transition:color var(--t-fast);border-left:1px solid var(--border);
  cursor:pointer;flex-shrink:0;min-width:32px;align-self:stretch;
}
.save-art-btn:hover{color:var(--t1)}
.save-art-btn.saved{color:var(--green)}

/* article card save button in grid view */
.article-card{position:relative}
.article-card .save-art-btn{
  position:absolute;top:var(--s3);right:var(--s3);
  width:28px;height:28px;border-radius:var(--r2);
  background:var(--bg-elevated);border:1px solid var(--border);
  padding:0;border-left:none;align-self:unset;
}
.article-card .save-art-btn:hover{background:var(--bg-card-hv)}

/* ── Announcement compact rows ───────────────────────────────────────────── */
.ann-type{
  display:inline-block;font-size:9px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;padding:3px 8px;border-radius:var(--r1);
}
.ann-type-ann{background:rgba(96,165,250,.14);color:var(--blue)}
.ann-type-upd{background:rgba(251,191,36,.13);color:var(--amber)}
.ann-type-res,.ann-type-buy{background:var(--green-dim);color:var(--green)}
.ann-type-sell{background:var(--red-dim);color:var(--red)}
.ann-row{padding:10px var(--s5);border-top:1px solid var(--border);cursor:pointer;transition:background var(--t-fast)}
.ann-row:hover,.ann-row:focus-visible{background:rgba(255,255,255,.05)}
.ann-row:active{background:rgba(255,255,255,.09)}
.ann-row:focus-visible{outline:1px solid var(--border-green);outline-offset:-1px}
body.light .ann-row:hover,body.light .ann-row:focus-visible{background:rgba(15,25,45,.04)}
body.light .ann-row:active{background:rgba(15,25,45,.08)}
.ann-row-top{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.ann-row-ago{font-size:10px;color:var(--t3)}
.ann-row-body{font-size:12px;color:#94a3b8;line-height:1.45}

/* ── Announcement detail modal ───────────────────────────────────────────── */
.ann-modal-meta{display:flex;align-items:center;gap:8px}
.ann-modal-title{margin-top:10px}
.ann-modal-body{margin-top:10px;max-height:50vh;overflow-y:auto}

/* ── Latest videos grid (2×2) ────────────────────────────────────────────── */
/* The bottom row stretches every card to the tallest (Recently Read), so this
   card is taller than its two videos need. Rather than leave dead space under
   them, the grid claims the leftover height and splits it evenly between the
   two rows; each thumbnail then grows to absorb its share.

   That makes the thumb box taller than 16/9, and since the img is object-fit:
   cover it crops the artwork's left/right edges. min-height keeps the video
   usable if the row ever collapses; max-height caps how far past 16/9 the box
   can stretch, so a very tall row can't crop the artwork to a sliver. */
/* Latest Videos card body: a two-up thumbnail grid, then the CSI Live rows. */
.dvg-body{display:flex;flex-direction:column;min-height:0}
.dash-vid-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:10px;padding:12px var(--s5);flex:0 0 auto;
}
.dvg-card{
  cursor:pointer;border:1px solid var(--border);border-radius:var(--r4);
  padding:var(--s2);transition:border-color var(--t-fast);
  display:flex;flex-direction:column;min-height:0;
}
.dvg-card:hover{border-color:var(--border-green)}
/* Side by side the two thumbnails share the card's width, so they take their
   height from the 16:9 frame rather than stretching to fill the card. */
.dvg-thumb{
  position:relative;overflow:hidden;border-radius:var(--r3);
  background:#0b1018;border:1px solid var(--border);
  flex:none;aspect-ratio:16/9;
}
.dvg-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 300ms var(--ease)}
.dvg-card:hover .dvg-thumb img{transform:scale(1.05)}
.dvg-card:hover .dvg-thumb{border-color:var(--border-green)}
.dvg-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:30px;height:30px;border-radius:50%;
  background:rgba(0,0,0,.5);border:1.5px solid var(--green);color:var(--green);
  display:flex;align-items:center;justify-content:center;
  transition:background var(--t-fast),transform var(--t-fast);
}
.dvg-card:hover .dvg-play{background:rgba(45,212,191,.35);transform:translate(-50%,-50%) scale(1.1)}
.dvg-dur{
  position:absolute;bottom:5px;right:5px;
  padding:1px 5px;border-radius:var(--r1);
  font-size:9px;font-weight:700;color:#fff;background:rgba(0,0,0,.78);font-variant-numeric:tabular-nums;
}
.dvg-title{
  font-size:11px;font-weight:600;color:var(--t1);line-height:1.3;margin-top:7px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.dvg-card:hover .dvg-title{color:var(--green-text)}
.dvg-date{font-size:10px;color:var(--t3);margin-top:3px}

/* ── Latest CSI Live rows (beneath the Latest Videos thumbnails) ─────────── */
.dvg-live{flex:1 1 auto;min-height:0;padding:0 var(--s5) 12px}
.dvl-row{
  padding:9px 11px;margin-bottom:8px;cursor:pointer;
  background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r4);
  transition:border-color var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast);
}
.dvl-row:last-child{margin-bottom:0}
.dvl-row:hover{border-color:var(--border-green);transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.28)}
body.light .dvl-row:hover{box-shadow:0 10px 24px rgba(15,25,45,.16),0 4px 10px rgba(15,25,45,.1)}
.dvl-type{
  display:block;font-size:9px;font-weight:800;text-transform:uppercase;
  letter-spacing:.07em;color:var(--green-text);
}
.dvl-title{
  font-size:12px;font-weight:600;color:var(--t1);line-height:1.4;margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.dvl-row:hover .dvl-title{color:var(--green-text)}
.dvl-date{font-size:10px;color:var(--t3);margin-top:3px}

/* ── Recently watched rows ───────────────────────────────────────────────── */
.rw-row{
  display:flex;align-items:center;gap:11px;
  padding:9px var(--s5);border-bottom:1px solid var(--border);
  transition:background var(--t-fast);
}
.rw-row:last-child{border-bottom:none}
.rw-row.has-video{cursor:pointer}
.rw-row.has-video:hover{background:rgba(255,255,255,.025)}

/* Watched rows are told apart from padded suggestions by their label alone:
   "Watched 2h ago" against a suggestion's publish date. */
.rw-thumb{
  position:relative;flex-shrink:0;
  width:72px;aspect-ratio:16/9;
  border-radius:var(--r3);overflow:hidden;
  background:#0b1018;border:1px solid var(--border);
}
.rw-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.rw-no-thumb{display:block;width:100%;height:100%;background:var(--bg-elevated)}
.rw-row.has-video:hover .rw-thumb{border-color:var(--border-green)}
.rw-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:20px;height:20px;border-radius:50%;
  background:rgba(0,0,0,.6);color:#fff;
  display:flex;align-items:center;justify-content:center;
  padding-left:1px; /* optical centring of the triangle */
  transition:background var(--t-fast),color var(--t-fast);
}
.rw-row.has-video:hover .rw-play{background:var(--green);color:#04120f}
.rw-info{flex:1;min-width:0}
.rw-title{
  font-size:11px;font-weight:600;color:var(--t1);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.rw-row.has-video:hover .rw-title{color:var(--green-text)}
.rw-date{font-size:10px;color:var(--t3);margin-top:2px}

/* ── Compact video rows (Recommended Videos) ─────────────────────────────── */
/* Same row rhythm as .rw-row, but with a small 16:9 thumbnail in place of the
   watched checkmark. The thumbnail is fixed-size: left to itself the YouTube
   mqdefault image renders at its natural 320×180 and each row grows to ~235px.
   Thumb size, play button and date spacing track .rw-row's exactly: the two
   cards sit side by side, so their rows have to land on the same baseline. */
.cvr{
  display:flex;align-items:center;gap:11px;
  padding:9px var(--s5);border-bottom:1px solid var(--border);
  transition:background var(--t-fast);
}
.cvr:last-child{border-bottom:none}
.cvr.has-video{cursor:pointer}
.cvr.has-video:hover{background:rgba(255,255,255,.025)}
.cvr-thumb{
  position:relative;flex-shrink:0;
  width:72px;aspect-ratio:16/9;border-radius:var(--r3);overflow:hidden;
  background:#0b1018;border:1px solid var(--border);
}
.cvr-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cvr-no-thumb{width:100%;height:100%;background:var(--bg-elevated)}
.cvr-play{
  position:absolute;inset:0;margin:auto;
  width:20px;height:20px;border-radius:50%;
  background:rgba(0,0,0,.6);color:#fff;
  display:flex;align-items:center;justify-content:center;
  padding-left:1px; /* optical centring of the triangle */
  transition:background var(--t-fast);
}
.cvr.has-video:hover .cvr-play{background:var(--green)}
.cvr-info{flex:1;min-width:0}
.cvr-title{
  font-size:11px;font-weight:600;color:var(--t1);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.cvr.has-video:hover .cvr-title{color:var(--green-text)}
.cvr-date{font-size:10px;color:var(--t3);margin-top:2px}

/* ── Saved DCF scenario rows ─────────────────────────────────────────────── */
.dcf-row{
  display:flex;align-items:center;gap:11px;
  padding:10px var(--s5);border-bottom:1px solid var(--border);
  transition:background var(--t-fast);
}
.dcf-row:last-child{border-bottom:none}
.dcf-row.has-ticker{cursor:pointer}
.dcf-row.has-ticker:hover{background:rgba(255,255,255,.025)}
.dcf-row.has-ticker:hover .dcf-row-title{color:var(--green-text)}
.dcf-row-icon{
  width:28px;height:28px;border-radius:var(--r2);flex-shrink:0;
  background:var(--green-dim);color:var(--green);
  display:flex;align-items:center;justify-content:center;
}
.dcf-row-info{flex:1;min-width:0}
.dcf-row-title{
  font-size:11px;font-weight:600;color:var(--t1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dcf-row-date{font-size:10px;color:var(--t3);margin-top:1px}
.dcf-row-delta{
  font-size:11px;font-weight:800;font-variant-numeric:tabular-nums;flex-shrink:0;
}
.dcf-row-delta.up{color:var(--green)}
.dcf-row-delta.dn{color:var(--red)}
/* Live current price + upside/downside vs the scenario's fair value */
.dcf-row-quote{
  display:flex;flex-direction:column;align-items:flex-end;
  gap:1px;flex-shrink:0;text-align:right;
}
.dcf-row-price{
  font-size:12px;font-weight:800;color:var(--t1);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.dcf-row-upside{
  font-size:10px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;
}
.dcf-row-upside.up{color:var(--green)}
.dcf-row-upside.dn{color:var(--red)}

/* ── Centered footer link ────────────────────────────────────────────────── */
.foot-link-c{display:block;width:100%;text-align:center}

/* ── Generic compact list rows (Recently Read / Saved Articles) ──────────── */
.dl-row{
  display:flex;align-items:center;gap:11px;
  padding:10px var(--s5);border-bottom:1px solid var(--border);
  text-decoration:none;transition:background var(--t-fast);
}
.dl-row:last-child{border-bottom:none}
.dl-row:hover{background:rgba(255,255,255,.025)}
.dl-icon{
  width:28px;height:28px;border-radius:var(--r2);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.dl-icon-green{background:var(--green-dim);color:var(--green)}
.dl-icon-blue{background:var(--blue-dim);color:var(--blue)}
.dl-icon-amber{background:var(--amber-dim);color:var(--amber)}
.dl-info{flex:1;min-width:0}
.dl-title{
  font-size:11px;font-weight:600;color:var(--t1);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
a.dl-row:hover .dl-title{color:var(--green-text)}
.dl-date{font-size:10px;color:var(--t3);margin-top:1px}
.dl-remove{
  width:24px;height:24px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r2);color:var(--t4);flex-shrink:0;cursor:pointer;
  transition:color var(--t-fast),background var(--t-fast);
}
.dl-remove:hover{color:var(--red);background:var(--red-dim)}

/* ── Card-tile layout for list widgets ───────────────────────────────────────
   The Dashboard Home list widgets — Latest CSI Articles, Saved Articles,
   Recently Read, Recently Watched, Recommended Videos and Saved DCF Scenarios —
   render each item as its own bordered tile instead of a flat row split by a
   divider rule. The container becomes a padded, gapped column so the tiles sit
   apart; the per-item bottom divider is replaced by a full border + rounded
   corners on every item, including the last. */
.dash-cardlist{
  display:flex;flex-direction:column;gap:var(--s2);
  /* 20px sides (--s5) so these tiled lists line up with the card header and
     every other dashboard card, which all inset their content 20px. */
  padding:var(--s3) var(--s5);
}
.dash-cardlist .dar,
.dash-cardlist .dl-row,
.dash-cardlist .rw-row,
.dash-cardlist .cvr,
.dash-cardlist .dcf-row,
.dash-cardlist .ann-row{
  border:1px solid var(--border);
  border-radius:var(--r3);
  background:var(--bg-elevated);
  overflow:hidden;
}
/* Lift on hover. Article, read and announcement tiles are wholly clickable; the
   video and DCF tiles are clickable only when they carry a target (a playable
   video, a ticker), so scope their hover to those variants and leave inert
   suggestion tiles flat rather than implying a click they don't have. */
.dash-cardlist .dar:hover,
.dash-cardlist .dl-row:hover,
.dash-cardlist .rw-row.has-video:hover,
.dash-cardlist .cvr.has-video:hover,
.dash-cardlist .dcf-row.has-ticker:hover,
.dash-cardlist .ann-row:hover,
.dash-cardlist .ann-row:focus-visible{
  border-color:var(--border-hv);
  background:var(--bg-card-hv);
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.dash-empty-state{
  display:flex;flex-direction:column;align-items:center;
  padding:var(--s5) var(--s5);text-align:center;gap:var(--s2);
}
.des-icon{color:var(--t3)}
.des-title{font-size:12px;font-weight:600;color:var(--t2)}
.des-desc{font-size:11px;color:var(--t3);line-height:1.5;max-width:220px}

/* ── DCF save row ────────────────────────────────────────────────────────── */
.dcf-save-row{display:flex;justify-content:flex-end;margin-top:var(--s4)}

/* ── Responsive dashboard ────────────────────────────────────────────────── */
@media(max-width:768px){
  .dash-greet-bar{flex-direction:column;align-items:flex-start;gap:var(--s4)}
  .co-filter-row{flex-wrap:wrap}
}
@media(max-width:480px){
  .dash-grid-row{grid-template-columns:1fr}
  .dco-grid{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIDEBAR NAV — horizontal icon + label, left accent bar
   ═══════════════════════════════════════════════════════════════════════════ */
.sidebar-nav{padding:var(--s3) var(--s2);display:flex;flex-direction:column;gap:2px}
.nav-item{
  display:flex;flex-direction:row;align-items:center;
  gap:12px;text-align:left;
  padding:10px 12px;
  border-radius:var(--r3);
  background:transparent;position:relative;
}
.nav-item::before{
  content:'';position:absolute;
  left:0;top:8px;bottom:8px;width:3px;
  background:var(--green);border-radius:0 3px 3px 0;
  box-shadow:0 0 8px rgba(45,212,191,.5);
  opacity:0;transform:scaleY(.5);
  transition:opacity 160ms var(--ease),transform 180ms var(--ease);
}
.nav-item.active::before{opacity:1;transform:scaleY(1)}
.nav-item .nav-icon{
  width:28px;height:28px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--r3);
  color:var(--t3);transition:color var(--t-fast),background var(--t-fast);
}
.nav-item .nav-icon svg{width:18px;height:18px}
.nav-label{
  font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;
  line-height:1.3;color:inherit;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nav-item:hover{color:var(--t1);background:rgba(255,255,255,.04)}
.nav-item:hover .nav-icon{color:var(--t2)}
.nav-item.active{
  color:var(--green);
  background:linear-gradient(90deg,rgba(45,212,191,.12),rgba(45,212,191,.03) 60%,transparent);
  box-shadow:none;
}
.nav-item.active .nav-icon{color:var(--green)}
.nav-item.active .nav-label{font-weight:600}

/* ── Market Snapshot panel ───────────────────────────────────────────────── */
.snap-panel{
  background:rgba(255,255,255,.022);border:1px solid var(--border);
  border-radius:var(--r4);padding:12px;
}
.snap-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.snap-title{font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--t3)}
.snap-live{display:flex;align-items:center;gap:4px;font-size:8px;font-weight:800;letter-spacing:.06em;color:var(--green)}
.snap-list{display:flex;flex-direction:column;gap:9px;margin-bottom:11px}
.snap-row{display:grid;grid-template-columns:1fr auto;align-items:center;row-gap:1px;column-gap:6px}
.snap-name{font-size:10px;font-weight:600;color:var(--t2);grid-row:1}
.snap-val{font-size:11px;font-weight:700;color:var(--t1);font-variant-numeric:tabular-nums;grid-column:1;grid-row:2}
.snap-chg{font-size:10px;font-weight:700;grid-column:2;grid-row:2;text-align:right;font-variant-numeric:tabular-nums}
.snap-more{display:block;font-size:10px;font-weight:600;color:var(--green-text);padding-top:9px;border-top:1px solid var(--border)}
.snap-more:hover{opacity:.7}

/* ═══════════════════════════════════════════════════════════════════════════
   KPI STAT ROW — 5 compact metric cards
   ═══════════════════════════════════════════════════════════════════════════ */
.up{color:var(--green)}.dn{color:var(--red)}
.spark-svg{display:block;width:100%;height:100%}

.kpi-stat-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:16px;
}
@media(max-width:1200px){.kpi-stat-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.kpi-stat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.kpi-stat-grid{grid-template-columns:1fr}}

.kpi-stat{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r5);
  padding:16px 16px 0;display:flex;flex-direction:column;overflow:hidden;position:relative;
  transition:border-color var(--t-fast),transform var(--t-fast);
}
.kpi-stat:hover{border-color:var(--border-green);transform:translateY(-2px)}
.kpi-stat[data-kpi-nav]:hover{border-color:var(--green);box-shadow:0 4px 18px -6px rgba(53,220,110,.18)}
.kpi-stat[data-kpi-nav]::after{content:'↗';position:absolute;top:12px;right:12px;font-size:10px;color:var(--t3);opacity:0;transition:opacity var(--t-fast)}
.kpi-stat[data-kpi-nav]:hover::after{opacity:1}
.kpi-stat-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.kpi-stat-label{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--t3);line-height:1.3}
.kpi-stat-icon{
  width:30px;height:30px;border-radius:var(--r3);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.kpi-stat-icon-green{background:var(--green-dim);color:var(--green)}
.kpi-stat-icon-amber{background:var(--amber-dim);color:var(--amber)}
.kpi-stat-value{font-size:24px;font-weight:800;color:var(--t1);letter-spacing:-.5px;font-variant-numeric:tabular-nums;margin-top:10px;line-height:1.1}
.kpi-stat-sub{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:600;margin-top:4px}
.kpi-stat-sub-up{color:var(--green)}
.kpi-stat-sub-flat{color:var(--t3)}
.kpi-stat-spark{height:38px;margin:10px -16px 0}

/* ═══════════════════════════════════════════════════════════════════════════
   THEME TOGGLE · CUSTOMIZE PANEL · LIGHT MODE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Theme toggle button ─────────────────────────────────────────────────── */
.tb-theme{
  width:34px;height:34px;border-radius:var(--r3);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:var(--t2);
  transition:color var(--t-fast),background var(--t-fast);
}
.tb-theme:hover{color:var(--t1);background:var(--bg-elevated)}
.tb-theme .ic-sun{display:none}
body.light .tb-theme .ic-moon{display:none}
body.light .tb-theme .ic-sun{display:block}

/* ── Customize Dashboard popover ─────────────────────────────────────────── */
.customize-wrap{position:relative}
.customize-panel{
  position:absolute;top:calc(100% + 8px);right:0;z-index:200;width:264px;
  background:var(--bg-sidebar);border:1px solid var(--border-hv);border-radius:var(--r4);
  padding:8px;box-shadow:0 16px 48px rgba(0,0,0,.45);
  animation:fadeUp 140ms var(--ease) forwards;
}
.cp-title{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);padding:8px 10px 6px}
.cp-row{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:var(--r2);font-size:12px;font-weight:500;color:var(--t1);
  transition:background var(--t-fast);
}
.cp-row:hover{background:var(--bg-elevated)}
.cp-row input{accent-color:var(--green);width:15px;height:15px;cursor:pointer;flex-shrink:0;margin-left:auto}
.cp-drag-row{cursor:default}
.cp-drag-handle{
  display:flex;align-items:center;flex-shrink:0;
  color:var(--t3);cursor:grab;padding:2px 2px;border-radius:4px;transition:color var(--t-fast);
}
.cp-drag-handle:active{cursor:grabbing}
.cp-drag-row:hover .cp-drag-handle{color:var(--t2)}
.cp-row-label{flex:1;min-width:0}
.cp-drag-row.cp-dragging{opacity:.4}
.cp-drag-row.cp-drag-over{background:var(--green-dim);outline:1px solid var(--border-green)}
/* Investment Research Hub is a full-width section, not a card: show/hide only,
   pinned below the flat, draggable card list. */
.cp-hub-row{margin-top:4px;padding-top:12px;border-top:1px solid var(--border);font-weight:600}
.cp-reset{
  width:100%;margin-top:6px;padding:8px;border-radius:var(--r2);
  font-size:11px;font-weight:600;color:var(--green-text);
  border:1px solid var(--border);background:transparent;transition:all var(--t-fast);
}
.cp-reset:hover{background:var(--green-dim);border-color:var(--border-green)}

/* ── Section hide (from customize) ───────────────────────────────────────── */
[data-dash-section].section-hidden{display:none}

/* ── LIGHT MODE ──────────────────────────────────────────────────────────── */
body.light{
  --bg:#EEF1F7;
  --bg-sidebar:#FFFFFF;
  --bg-topbar:rgba(255,255,255,.85);
  --bg-card:#FFFFFF;
  --bg-card-hv:#F4F7FB;
  --bg-elevated:#EDF1F7;
  --bg-input:#EEF2F8;
  --bg-overlay:rgba(20,30,50,.45);
  --border:rgba(15,25,45,.1);
  --border-hv:rgba(15,25,45,.2);
  --green-dim:rgba(45,203,99,.12);
  --green-glow:rgba(45,203,99,.18);
  --t1:#0F1729;
  --t2:#475467;
  --t3:#8590A2;
  --t4:#B6BECC;
}
body.light::before{
  background:
    radial-gradient(ellipse 800px 600px at 20% 0%, rgba(45,212,191,.08) 0%, transparent 60%),
    radial-gradient(ellipse 600px 400px at 80% 100%, rgba(99,102,241,.05) 0%, transparent 60%);
}
/* light-mode fixes for elements that used white-on-dark assumptions */
body.light .nav-item:hover{background:rgba(15,25,45,.04)}
body.light .donut-track{stroke:rgba(15,25,45,.1)}
body.light .dco-logo.mono,
body.light .dco-logo{background:#F1F4F9}
body.light .snap-panel,
body.light .co-filter-row,
body.light .savedco-filters,
body.light .card-foot-row{background:rgba(15,25,45,.02)}
body.light .dvg-thumb{background:#E7ECF3}
body.light .sidebar::before{opacity:.5}
body.light .video-thumb img,
body.light .dvg-thumb img{filter:none}
body.light .dco-card{background:rgba(15,25,45,.02)}

/* ═══════════════════════════════════════════════════════════════════════════
   INFOGRAPHICS GRID · SUBMIT-A-QUESTION FORM
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Infographics ────────────────────────────────────────────────────────── */
.ig-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--s5);
  padding:var(--s4) var(--s5) var(--s5);
}
.ig-card{
  display:flex;flex-direction:column;border-radius:var(--r4);overflow:hidden;cursor:pointer;
  background:var(--bg-card);border:1px solid var(--border);
  transition:transform var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast);
}
.ig-card:hover{transform:translateY(-3px);border-color:var(--border-green);box-shadow:0 12px 30px rgba(0,0,0,.4)}
.ig-cover{
  aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;
  color:var(--green);position:relative;
}
.ig-cover svg{width:46px;height:46px;opacity:.9}
.ig-cover-0{background:linear-gradient(135deg,#0f2a1a,#0a1f10)}
.ig-cover-1{background:linear-gradient(135deg,#0a1428,#0e1a38)}
.ig-cover-2{background:linear-gradient(135deg,#1a1228,#241636)}
.ig-cover-3{background:linear-gradient(135deg,#0a1f24,#0e2a30)}
.ig-cover-4{background:linear-gradient(135deg,#1f1606,#2a1d08)}
.ig-cover-5{background:linear-gradient(135deg,#102015,#16301f)}
.ig-cover-1{color:var(--blue)}
.ig-cover-2{color:var(--purple)}
.ig-cover-4{color:var(--amber)}
.ig-body{padding:var(--s4) var(--s5)}
.ig-title{font-size:13px;font-weight:600;color:var(--t1);line-height:1.35;margin-bottom:4px}
.ig-card:hover .ig-title{color:var(--green-text)}
.ig-meta{font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.06em}

/* ── Submit a Question form ──────────────────────────────────────────────── */
.qa-form{padding:0 var(--s5) var(--s5);max-width:680px}
.qa-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin-bottom:var(--s4)}
@media(max-width:600px){.qa-row{grid-template-columns:1fr}}
.qa-form .form-field{margin-bottom:var(--s4)}
.qa-textarea{resize:vertical;min-height:96px;line-height:1.5}
.qa-result{margin-top:var(--s4);font-size:13px;font-weight:500;display:none}
.qa-result.qa-ok{display:block;color:var(--green-text)}
.qa-result.qa-err{display:block;color:var(--red)}

/* ═══════════════════════════════════════════════════════════════════════════
   DEPTH PASS — elevation, sheen, and hover lift (de-flatten)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Cards: subtle top sheen + soft drop shadow */
.card{
  background-image:linear-gradient(180deg, rgba(255,255,255,.025) 0%, rgba(255,255,255,0) 42%);
  box-shadow:0 14px 34px -18px rgba(0,0,0,.75), 0 1px 0 rgba(255,255,255,.03) inset;
}
.card:hover{
  box-shadow:0 20px 44px -18px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.05) inset;
}
body.light .card{
  background-image:linear-gradient(180deg, rgba(15,25,45,.015) 0%, rgba(15,25,45,0) 42%);
  box-shadow:0 6px 16px rgba(15,25,45,.12), 0 2px 6px rgba(15,25,45,.08), 0 1px 0 rgba(255,255,255,.7) inset;
}
body.light .card:hover{
  box-shadow:0 10px 26px rgba(15,25,45,.16), 0 3px 8px rgba(15,25,45,.10), 0 1px 0 rgba(255,255,255,.8) inset;
}

/* KPI stat + edu/trend cards: a touch more lift + hover raise */
.kpi-stat,.edu-card,.trend-card,.co-card,.ig-card{
  box-shadow:0 16px 38px -20px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.035) inset;
  transition:transform var(--t-base),border-color var(--t-fast),box-shadow var(--t-base);
}
.kpi-stat:hover{transform:translateY(-2px);border-color:var(--border-green);
  box-shadow:0 26px 50px -20px rgba(0,0,0,.85), 0 0 0 1px var(--border-green), 0 1px 0 rgba(255,255,255,.05) inset;}
body.light .kpi-stat,
body.light .edu-card,
body.light .trend-card,
body.light .co-card,
body.light .ig-card,
body.light .article-card,
body.light .bs-card,
body.light .ca-master-card,
body.light .dcfv4-chart-card,
body.light .dco-card,
body.light .irh-card,
body.light .kpi-card,
body.light .kpi-stat-card,
body.light .proj-card,
body.light .rp-card,
body.light .cmp-chart-card,
body.light .webinar-card,
body.light .dcf-result-card,
body.light .video-card,
body.light .seg-card,
body.light .isl-card,
body.light .th-card-row{box-shadow:0 8px 20px rgba(15,25,45,.14), 0 3px 8px rgba(15,25,45,.09), 0 1px 0 rgba(255,255,255,.7) inset}
body.light #coCardGrid .co-card{background:#fff;box-shadow:0 8px 20px rgba(15,25,45,.14), 0 3px 8px rgba(15,25,45,.09);border-color:#e5e7eb;}
body.light #coCardGrid .co-card:hover{border-color:#0d9488;box-shadow:0 12px 28px rgba(15,25,45,.18), 0 4px 10px rgba(15,25,45,.12);}

/* Card borders match the Dashboard Home nav pill's teal outline in light mode */
body.light .card,
body.light .kpi-stat,
body.light .edu-card,
body.light .trend-card,
body.light .co-card,
body.light .ig-card,
body.light .article-card,
body.light .bs-card,
body.light .ca-master-card,
body.light .dcfv4-chart-card,
body.light .dco-card,
body.light .irh-card,
body.light .kpi-card,
body.light .kpi-stat-card,
body.light .proj-card,
body.light .rp-card,
body.light .cmp-chart-card,
body.light .webinar-card,
body.light .dcf-result-card,
body.light .video-card,
body.light .seg-card,
body.light .isl-card,
body.light .th-card-row,
body.light .co-modal-card,
body.light #coCardGrid .co-card{border-color:var(--border-green)}

/* Card header gets a faint divider gradient for separation */
.card-hd{
  background:linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,0));
}
body.light .card-hd{background:linear-gradient(180deg, rgba(15,25,45,.012), rgba(15,25,45,0))}

/* Sidebar + topbar: depth edges */
.sidebar{box-shadow:1px 0 0 rgba(255,255,255,.04), 8px 0 28px -12px rgba(0,0,0,.6)}
.topbar{box-shadow:0 6px 20px -14px rgba(0,0,0,.7)}
body.light .sidebar{box-shadow:1px 0 0 rgba(15,25,45,.06), 10px 0 30px -16px rgba(15,25,45,.12)}
body.light .topbar{box-shadow:0 6px 18px -14px rgba(15,25,45,.12)}

/* Active nav item: deeper, more dimensional */
.nav-item.active{
  box-shadow:inset 0 0 0 1px var(--border-green), 0 8px 22px -12px rgba(45,212,191,.4), 0 1px 0 rgba(255,255,255,.05) inset;
}

/* Avatars: small lifts for tactility */
.tb-av{box-shadow:0 4px 12px -4px rgba(45,212,191,.5)}

/* Section subtab bar: slight inset depth */
.subtab-bar{box-shadow:0 2px 8px -4px rgba(0,0,0,.5) inset, 0 1px 0 rgba(255,255,255,.025)}
body.light .subtab-bar{box-shadow:0 2px 8px -5px rgba(15,25,45,.12) inset}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCOUNT DROPDOWN
   ═══════════════════════════════════════════════════════════════════════════ */
.acct-wrap{position:relative}
.acct-menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:200;width:236px;
  background:var(--bg-sidebar);border:1px solid var(--border-hv);border-radius:var(--r4);
  padding:6px;box-shadow:0 18px 50px -12px rgba(0,0,0,.6);
  animation:fadeUp 140ms var(--ease) forwards;
}
.acct-head{
  display:flex;align-items:center;gap:10px;padding:9px 10px 11px;margin-bottom:5px;
  border-bottom:1px solid var(--border);
}
.acct-name{font-size:13px;font-weight:700;color:var(--t1)}
.acct-sub{font-size:10px;font-weight:600;color:var(--green-text);text-transform:uppercase;letter-spacing:.05em;margin-top:1px}
.acct-item{
  display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r2);
  font-size:12px;font-weight:500;color:var(--t1);transition:background var(--t-fast);
}
.acct-item:hover{background:var(--bg-elevated)}
.acct-item svg{width:16px;height:16px;color:var(--t3);flex-shrink:0}
.acct-item:hover svg{color:var(--t2)}
.acct-div{height:1px;background:var(--border);margin:5px 4px}
.acct-logout{color:var(--red)}
.acct-logout svg{color:var(--red)!important}
.acct-logout:hover{background:var(--red-dim)}

/* ═══════════════════════════════════════════════════════════════════════════
   RESEARCH PAGES — filter sidebar + research-page cards (research-page CPT)
   ═══════════════════════════════════════════════════════════════════════════ */
.mb-6{margin-bottom:var(--s7)}

/* ── Layout: filter sidebar + results ────────────────────────────────────── */
.rp-layout{display:grid;grid-template-columns:236px minmax(0,1fr);gap:var(--s5);align-items:start}
@media(max-width:900px){.rp-layout{grid-template-columns:1fr}}

.rp-filters{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r5);
  padding:var(--s5);display:flex;flex-direction:column;gap:var(--s5);
  position:sticky;top:73px;
  box-shadow:0 14px 34px -18px rgba(0,0,0,.75),0 1px 0 rgba(255,255,255,.03) inset;
}
@media(max-width:900px){.rp-filters{position:static}}
.rp-filter-group{display:flex;flex-direction:column;gap:var(--s2)}
.rp-filter-label{
  font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);
}
.rp-search-wrap{width:100%;height:36px}
.rp-select{
  width:100%;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r3);
  color:var(--t1);font-size:12px;padding:8px var(--s3);outline:none;cursor:pointer;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 14 14' fill='none' stroke='%238894AA' stroke-width='1.8'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;padding-right:28px;
}
.rp-select:focus{border-color:var(--border-green);box-shadow:0 0 0 3px var(--green-dim)}
.rp-select option{background:var(--bg-sidebar);color:var(--t1)}

.rp-radio-list{display:flex;flex-direction:column;gap:1px}
.rp-radio{
  display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:var(--r2);
  font-size:12px;font-weight:500;color:var(--t2);cursor:pointer;
  transition:background var(--t-fast),color var(--t-fast);
}
.rp-radio:hover{background:rgba(255,255,255,.04);color:var(--t1)}
.rp-radio.active{background:var(--green-dim);color:var(--green)}
.rp-radio-dot{
  width:14px;height:14px;border-radius:50%;border:2px solid var(--border-hv);
  flex-shrink:0;position:relative;transition:border-color var(--t-fast);
}
.rp-radio.active .rp-radio-dot{border-color:var(--green)}
.rp-radio.active .rp-radio-dot::after{
  content:'';position:absolute;inset:2px;border-radius:50%;background:var(--green);
}
.rp-radio-name{flex:1;min-width:0}
.rp-radio-count{
  font-size:10px;font-weight:700;color:var(--t3);font-variant-numeric:tabular-nums;
  background:var(--bg-elevated);border-radius:var(--rpill);padding:1px 7px;
}
.rp-radio.active .rp-radio-count{background:rgba(45,212,191,.15);color:var(--green)}

/* ── Results column ──────────────────────────────────────────────────────── */
.rp-main{display:flex;flex-direction:column;gap:var(--s4);min-width:0}
.rp-result-bar{font-size:11px;font-weight:600;color:var(--t3);letter-spacing:.02em}
.rp-grid{
  display:flex;flex-wrap:wrap;gap:var(--s4);
}
.rp-grid .rp-card{flex:0 0 calc((100% - 64px)/5);min-width:0}
@media(max-width:1500px){.rp-grid .rp-card{flex-basis:calc((100% - 48px)/4)}}
@media(max-width:1150px){.rp-grid .rp-card{flex-basis:calc((100% - 32px)/3)}}
@media(max-width:820px){.rp-grid .rp-card{flex-basis:calc((100% - 16px)/2)}}
@media(max-width:480px){.rp-grid .rp-card{flex-basis:100%}}

/* ── Research-page card (screenshot design: image + title overlay) ───────── */
.rp-card{
  display:flex;flex-direction:column;
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r5);
  overflow:hidden;cursor:pointer;color:inherit;
  transition:transform var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast);
  box-shadow:0 14px 34px -18px rgba(0,0,0,.75),0 1px 0 rgba(255,255,255,.03) inset;
}
.rp-card:hover{
  transform:translateY(-2px);border-color:var(--border-green);
  box-shadow:0 22px 46px -20px rgba(0,0,0,.82),0 0 0 1px var(--border-green);
}

/* Image section with dark-tech gradient fallback */
.rp-card-img{
  position:relative;width:100%;height:165px;flex-shrink:0;
  background:linear-gradient(135deg,#050f1a 0%,#082035 45%,#041a12 100%);
  background-size:cover;background-position:center;overflow:hidden;
}
/* Cyan tint overlay on placeholder (no real image) */
.rp-card-img:not([style*="background-image"])::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 60% 40%,rgba(0,220,180,.13) 0%,transparent 70%),
             radial-gradient(ellipse at 20% 70%,rgba(0,120,255,.09) 0%,transparent 60%);
  pointer-events:none;
}

/* Top bar: category/FEATURED left · company name right */
.rp-card-topbar{
  position:absolute;top:0;left:0;right:0;z-index:3;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 12px;
  background:rgba(0,0,0,.48);backdrop-filter:blur(3px);
}
.rp-type{
  font-size:9px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--green-text);line-height:1.3;
}
.rp-feat-badge{
  font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;
  color:#0a1a0f;background:var(--green-text);
  border-radius:3px;padding:2px 7px;line-height:1.4;
}
.rp-card-co{
  font-size:10px;font-weight:700;color:rgba(255,255,255,.82);
  letter-spacing:.01em;flex-shrink:0;
}

/* Title overlaid on dark gradient at bottom of image */
.rp-card-overlay{
  position:absolute;bottom:0;left:0;right:0;z-index:2;
  padding:48px 12px 11px;
  background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.55) 55%,transparent 100%);
}
.rp-card-title{
  font-size:12px;font-weight:800;color:#fff;
  line-height:1.35;margin:0;letter-spacing:.03em;text-transform:uppercase;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.rp-card:hover .rp-card-title{color:var(--green-text)}

/* Body below image */
.rp-body{padding:var(--s3) var(--s4) var(--s4);display:flex;flex-direction:column;gap:var(--s3);flex:1}
.rp-tags{display:flex;flex-wrap:wrap;gap:4px}
.rp-tag{
  font-size:9px;font-weight:700;padding:2px 7px;border-radius:var(--rpill);
  background:var(--bg-elevated);border:1px solid var(--border);color:var(--t2);
  white-space:nowrap;
}
.rp-tag-more{color:var(--t3);background:transparent;border-color:transparent}
.rp-excerpt{
  font-size:11px;color:var(--t2);line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.rp-foot{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  margin-top:auto;padding-top:var(--s3);border-top:1px solid var(--border);
}
.rp-date{font-size:10px;color:var(--t3)}
.rp-foot-actions{display:flex;align-items:center;gap:10px}
.rp-foot-actions .save-art-btn{
  border-left:none;min-width:auto;padding:0;align-self:auto;
  width:24px;height:24px;border-radius:50%;
  background:var(--bg-elevated);border:1px solid var(--border);
}
.rp-foot-actions .save-art-btn:hover{background:var(--bg-card-hv)}
.rp-readlink{
  font-size:11px;font-weight:700;color:var(--green-text);
  display:flex;align-items:center;gap:4px;transition:gap var(--t-fast);
}
.rp-card:hover .rp-readlink{gap:7px}
.rp-readlink svg{width:11px;height:11px}
.rp-empty{
  grid-column:1/-1;text-align:center;color:var(--t3);font-size:13px;
  padding:var(--s9) var(--s5);
}


/* ── How CSI Invests — "Our Approach" heading ────────────────────────────── */
.invest-approach-hd{
  font-size:16px;font-weight:700;color:var(--t1);letter-spacing:-.2px;
  margin:0 0 var(--s5);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FINANCIAL DASHBOARD — Fiscal.ai Svelte app mount (same bundle as live site)
   The bundle ships its own (dark) styles in index.css; we only size the mount.
   ═══════════════════════════════════════════════════════════════════════════ */
.fin-app-wrap{
  border:1px solid var(--border);border-radius:var(--r5);overflow:hidden;
  background:var(--bg-card);
}
#csi-financial-dashboard-app{width:100%;min-height:72vh;font-family:inherit}
@media(max-width:768px){#csi-financial-dashboard-app{min-height:unset}}

/* ═══════════════════════════════════════════════════════════════════════════
   ITC FRAME — iframe wrapper for the WordPress-rendered Investment Thesis Checklist
   ═══════════════════════════════════════════════════════════════════════════ */
.itc-frame-wrap{border-radius:var(--r5);overflow:hidden}
.itc-frame{width:100%;min-height:640px;border:none;display:block;background:transparent;transition:height .2s ease}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPANY DETAIL MODAL
   ═══════════════════════════════════════════════════════════════════════════ */
/* ─── Company Detail Modal — 2-panel layout ─────────────────────────── */
.co-modal{
  position:fixed;inset:0;z-index:1200;
  display:flex;align-items:center;justify-content:center;
  padding:32px 0; /* guaranteed top/bottom margin around the card */

  /* Type scale for the modal: title → subtitle → section → group → body → meta */
  --co-fs-title:26px;
  --co-fs-subtitle:15px;
  --co-fs-section:12px;
  --co-fs-group:11.5px;
  --co-fs-body:14.5px;
  --co-fs-meta:13px;
}
.co-modal[hidden]{display:none}
.co-modal-scrim{
  position:fixed;inset:0;background:rgba(0,0,0,.72);
  backdrop-filter:blur(4px);z-index:0;
}
.co-modal-card{
  position:relative;z-index:1;
  /* Fixed target size; capped to the viewport (minus the 32px top/bottom margin) so it never overflows. */
  width:1359px;height:919px;
  max-width:100vw;max-height:calc(100vh - 64px);
  background:#0d1220;
  border:1px solid var(--border);border-radius:0;
  display:flex;flex-direction:row; /* ← horizontal 2-panel */
  animation:coModalIn .18s ease;
  overflow:hidden;
}
@keyframes coModalIn{from{opacity:0} to{opacity:1}}

/* ── LEFT PANEL ──────────────────────────────────────────────────────── */
.co-modal-left{
  width:380px;flex-shrink:0;
  display:flex;flex-direction:column;
  border-right:1px solid var(--border);
  overflow:hidden;
}
.co-modal-left-head{
  display:flex;align-items:center;gap:16px;
  padding:24px 26px 20px;border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.co-modal-logo-wrap{
  width:60px;height:60px;border-radius:var(--r4);
  background:var(--bg-elevated);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;
}
.co-modal-logo{width:44px;height:44px;object-fit:contain}
.co-modal-name{
  font-size:var(--co-fs-title);font-weight:800;color:var(--t1);
  margin:0;line-height:1.15;letter-spacing:-.02em;
}
.co-modal-ticker-price{
  font-size:var(--co-fs-subtitle);font-weight:600;color:var(--green);
  margin:6px 0 0;letter-spacing:.01em;
}
.co-modal-profile-label{padding:20px 26px 0;flex-shrink:0}
.co-modal-desc-text{
  font-size:var(--co-fs-body);line-height:1.75;color:var(--t2);margin:0;
  padding:12px 26px 18px;
  flex:1;overflow-y:auto;
  text-align:justify;
}
.co-modal-left-footer{
  display:flex;flex-direction:column;gap:10px;
  padding:18px 26px;border-top:1px solid var(--border);flex-shrink:0;
}
/* Buttons stretch full-width here, so center their labels instead of the flex default (left). */
.co-modal-left-footer .btn{justify-content:center}

/* ── RIGHT PANEL ─────────────────────────────────────────────────────── */
.co-modal-right{
  flex:1;min-width:0;
  display:flex;flex-direction:column;
  position:relative;
}
.co-modal-close-btn{
  position:absolute;top:14px;right:16px;z-index:2;
  width:36px;height:36px;border-radius:var(--r3);
  display:flex;align-items:center;justify-content:center;
  color:var(--t3);background:none;border:none;cursor:pointer;
  transition:all var(--t-fast);
}
.co-modal-close-btn:hover{color:var(--t1);background:var(--bg-elevated)}

/* 3-column row: thesis | notes | dcf — capped so the graph below always keeps room.
   min(52vh, 478px) resolves to ~52% of the card whether it's at full 919px or shrunk to fit. */
.co-modal-cols{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;
  border-bottom:1px solid var(--border);
  flex-shrink:0;max-height:min(52vh, 478px);
}
.co-modal-col{
  padding:20px 24px;display:flex;flex-direction:column;gap:6px;
  border-right:1px solid var(--border);
  overflow-y:auto;
}
.co-modal-col:last-child{border-right:none}
.co-modal-col-head{
  font-size:var(--co-fs-section);font-weight:700;letter-spacing:.12em;
  color:var(--t3);text-transform:uppercase;margin:0 0 10px;
}
.co-modal-col-top{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;
}
.co-modal-col-top .co-modal-col-head{margin:0}
/* Keep whichever column sits top-right clear of the floating close button. */
.co-modal-col:nth-child(3) .co-modal-col-top{padding-right:44px}
.co-modal-cl-group{
  font-size:var(--co-fs-group);font-weight:700;letter-spacing:.08em;
  color:var(--green);text-transform:uppercase;margin:14px 0 6px;
}
.co-modal-cl-group:first-child{margin-top:0}
.co-modal-cl-item{
  font-size:var(--co-fs-body);color:var(--t2);line-height:1.5;
  display:flex;gap:10px;padding:3px 0;
}
.co-modal-cl-marker{color:var(--t3);font-weight:700;flex-shrink:0;width:14px;text-align:center}
.co-modal-cl-marker--yes{color:var(--green)}
.co-modal-cl-marker--no{color:#f87171}
.co-modal-cl-text{flex:1}
.co-modal-cl-counts{
  display:flex;gap:14px;margin-top:16px;padding-top:12px;
  border-top:1px solid var(--border);
  font-size:var(--co-fs-meta);font-weight:600;color:var(--t3);
}
.co-modal-cl-count--yes{color:var(--green)}
.co-modal-cl-count--no{color:#f87171}
/* Collapsed rows, so every note type is visible at once without scrolling. */
.co-modal-notes-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.co-modal-note-item{
  display:block;
  background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r3);
}
/* Single line, never wrapping: a wrapped chevron makes the rows uneven. */
.co-modal-note-head{
  width:100%;display:flex;align-items:center;gap:8px;flex-wrap:nowrap;
  min-height:40px;padding:0 12px;background:none;border:none;cursor:pointer;
  font-family:var(--font);text-align:left;
  border-radius:var(--r3);transition:background var(--t-fast);
}
.co-modal-note-head:hover{background:rgba(255,255,255,.03)}
.co-modal-note-head:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
.co-modal-note-chev{
  margin-left:auto;flex-shrink:0;color:var(--t3);
  transition:transform var(--t-fast);
}
.co-modal-note-head[aria-expanded="true"] .co-modal-note-chev{transform:rotate(180deg)}
.co-modal-note-panel{padding:0 12px 12px;display:flex;flex-direction:column;gap:10px}
/* `display:flex` is an author rule, so it beats the UA sheet's [hidden]{display:none}. */
.co-modal-note-panel[hidden]{display:none}
.co-modal-note-actions{display:flex;gap:8px}
.co-modal-note-openbtn{
  background:none;border:1px solid rgba(53,220,110,.35);border-radius:var(--r3);
  color:var(--green);font-family:var(--font);font-size:var(--co-fs-meta);font-weight:600;
  padding:5px 10px;cursor:pointer;transition:background var(--t-fast);
}
.co-modal-note-openbtn:hover{background:rgba(53,220,110,.10)}
.co-modal-note-text{flex:1;font-size:var(--co-fs-body);line-height:1.5;color:var(--t2);word-break:break-word;display:block;margin:0;white-space:pre-wrap}
.co-modal-note-remove{
  background:none;border:1px solid var(--border);border-radius:var(--r3);
  cursor:pointer;color:var(--t3);font-family:var(--font);
  font-size:var(--co-fs-meta);padding:5px 10px;
  line-height:1;flex-shrink:0;transition:color var(--t-fast),border-color var(--t-fast);
}
.co-modal-note-remove:hover{color:#f87171}

/* Notes gathered from the thesis wizard / checklist carry a source badge.
   It may shrink and ellipsize, but must never wrap the row onto two lines. */
.co-modal-note-badge{
  font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;white-space:nowrap;
  background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--t3);
  min-width:0;overflow:hidden;text-overflow:ellipsis;
}
.co-modal-note-badge--qualitative{color:#7dd3fc;border-color:rgba(125,211,252,.35);background:rgba(125,211,252,.10)}
.co-modal-note-badge--financial{color:#fbbf24;border-color:rgba(251,191,36,.35);background:rgba(251,191,36,.10)}
.co-modal-note-badge--valuation{color:var(--green);border-color:rgba(53,220,110,.35);background:rgba(53,220,110,.10)}
.co-modal-note-badge--conviction{color:#c4b5fd;border-color:rgba(196,181,253,.35);background:rgba(196,181,253,.10)}
.co-modal-note-badge--checklist{color:#f9a8d4;border-color:rgba(249,168,212,.35);background:rgba(249,168,212,.10)}
/* The date now sits inside the expanded panel, above the note text. */
.co-modal-note-date{font-size:var(--co-fs-meta);color:var(--t3);margin:0}
.co-modal-note-origin{font-size:10px;font-style:italic;color:var(--t3);opacity:.8;flex-shrink:0}

@media (prefers-reduced-motion:reduce){
  .co-modal-note-head,.co-modal-note-chev,.co-modal-note-openbtn{transition:none}
}
.co-modal-empty{font-size:var(--co-fs-meta);color:var(--t3);margin:0;font-style:italic}
.co-modal-dcf-item{
  display:flex;align-items:flex-start;gap:10px;padding:10px 12px;
  background:var(--bg-elevated);border:1px solid var(--border);
  border-radius:var(--r3);margin-bottom:8px;
}
.co-modal-dcf-price{font-size:19px;font-weight:700;color:var(--green);margin-bottom:3px}
.co-modal-dcf-params{font-size:var(--co-fs-meta);color:var(--t3)}

/* Graph fills all remaining height of right panel */
.co-modal-graph-section{
  flex:1;display:flex;flex-direction:column;min-height:260px;
  padding:18px 24px 12px;
}
.co-modal-graph-inner{flex:1;display:flex;flex-direction:column;min-height:0;margin-top:6px}
.co-modal-fiscal-powered{font-size:var(--co-fs-meta);color:var(--t3);margin:0 0 3px;flex-shrink:0}
.co-modal-fiscal-label{
  font-size:var(--co-fs-group);font-weight:700;letter-spacing:.1em;
  color:var(--t3);text-transform:uppercase;margin:0 0 10px;flex-shrink:0;
}
.co-modal-chart{flex:1;width:100%;min-height:0}
.co-modal-chart svg{width:100%;height:100%;display:block}
.co-modal-chart-legend{display:flex;gap:22px;margin-top:8px;flex-shrink:0;padding-bottom:4px}
.co-modal-chart-legend[hidden]{display:none}
.co-modal-legend-item{display:flex;align-items:center;gap:8px;font-size:var(--co-fs-meta);color:var(--t2)}
.co-modal-legend-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0}

/* Responsive */
@media(max-width:900px){
  .co-modal{
    --co-fs-title:22px;
    --co-fs-subtitle:14px;
    --co-fs-body:14px;
  }
  .co-modal-card{flex-direction:column}
  .co-modal-left{width:100%;flex-shrink:0;max-height:40vh;border-right:none;border-bottom:1px solid var(--border)}
  .co-modal-desc-text{max-height:130px}
  .co-modal-cols{grid-template-columns:1fr 1fr}
  .co-modal-col:nth-child(2){border-right:none}
  .co-modal-col:nth-child(3) .co-modal-col-top{padding-right:0}
  .co-modal-col:nth-child(2) .co-modal-col-top{padding-right:44px}
}
@media(max-width:560px){
  .co-modal{
    --co-fs-title:20px;
    --co-fs-body:13.5px;
    --co-fs-meta:12px;
  }
  .co-modal-left-head{padding:18px 18px 16px}
  .co-modal-profile-label,.co-modal-desc-text,.co-modal-left-footer{padding-left:18px;padding-right:18px}
  .co-modal-col{padding:16px 18px}
  .co-modal-graph-section{padding:14px 18px 10px}
  .co-modal-cols{grid-template-columns:1fr}
  .co-modal-col{border-right:none !important}
  .co-modal-col:nth-child(2) .co-modal-col-top{padding-right:0}
  .co-modal-col:nth-child(1) .co-modal-col-head{padding-right:44px}
}

/* ── Investment Research Hub ────────────────────────────────────────────── */
.irh-wrap{
  margin-top:var(--s7);
  padding-bottom:var(--s6);
}
.irh-hd{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s5);
  margin-bottom:var(--s5);
}
.irh-title{
  font-size:1.15rem;font-weight:700;color:var(--t1);letter-spacing:-.01em;
}
.irh-sub{
  font-size:.8rem;color:var(--t2);margin-top:4px;
}
.irh-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:var(--s4);
}

/* IRH project card */
.irh-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--r5);
  padding:var(--s5);
  display:flex;flex-direction:column;gap:var(--s3);
  transition:border-color var(--t-base),background var(--t-base);
}
.irh-card:hover{ border-color:var(--border-hv); background:var(--bg-card-hv); }
.irh-card-head{
  display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap;
}
.irh-ticker{
  font-size:.9rem;font-weight:700;color:var(--green);
  background:var(--green-dim);border:1px solid var(--border-green);
  padding:2px 8px;border-radius:var(--rpill);
}
.irh-company{
  font-size:.75rem;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Step pills row */
.irh-steps{
  display:flex;gap:6px;flex-wrap:wrap;
}
.irh-step{
  display:flex;align-items:center;gap:4px;
  font-size:.68rem;color:var(--t3);
  padding:3px 7px;border-radius:var(--rpill);
  border:1px solid var(--border);
  background:rgba(255,255,255,.025);
  transition:color var(--t-fast),border-color var(--t-fast),background var(--t-fast);
}
.irh-step.done{
  color:var(--green);border-color:var(--border-green);background:var(--green-dim);
}
.irh-step-dot{
  width:5px;height:5px;border-radius:50%;
  background:currentColor;flex-shrink:0;
}

/* Progress bar */
.irh-bar-wrap{display:flex;align-items:center;gap:var(--s3);}
.irh-bar{
  flex:1;height:4px;border-radius:var(--rpill);
  background:rgba(255,255,255,.07);overflow:hidden;
}
.irh-bar-fill{
  height:100%;border-radius:var(--rpill);
  background:linear-gradient(90deg,var(--green),var(--green-bright));
  transition:width .4s var(--ease);
}
.irh-pct{font-size:.7rem;color:var(--t2);white-space:nowrap;}
.irh-continue{width:100%;justify-content:center;margin-top:2px;}

/* Empty state (shared) */
.irh-empty{
  display:flex;flex-direction:column;align-items:center;gap:var(--s4);
  padding:var(--s8) var(--s5);color:var(--t2);font-size:.875rem;text-align:center;
  grid-column:1/-1;
}
.irh-empty-lg{ padding:var(--s9) var(--s5); }

/* ── Research Projects Subtab ────────────────────────────────────────────── */
.proj-card{
  border:1px solid var(--border);border-radius:var(--r4);
  overflow:hidden;
  transition:border-color var(--t-base);
}
.proj-card.proj-highlight{
  border-color:var(--green);
  box-shadow:0 0 0 2px var(--green-glow);
  animation:projPulse .6s var(--ease);
}
@keyframes projPulse{
  0%{box-shadow:0 0 0 0 var(--green-glow)}
  50%{box-shadow:0 0 0 6px var(--green-glow)}
  100%{box-shadow:0 0 0 2px var(--green-glow)}
}
.proj-card-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s4) var(--s5);
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.018);
}
.proj-head-left{display:flex;align-items:baseline;gap:var(--s3);}
.proj-ticker{
  font-size:.9rem;font-weight:700;color:var(--green);
  background:var(--green-dim);border:1px solid var(--border-green);
  padding:2px 10px;border-radius:var(--rpill);
}
.proj-name{font-size:.8rem;color:var(--t2);}
.proj-head-right{display:flex;align-items:center;gap:var(--s4);}
.proj-progress-wrap{display:flex;align-items:center;gap:var(--s3);}
.proj-pbar{width:100px;height:5px;border-radius:var(--rpill);background:rgba(255,255,255,.08);overflow:hidden;}
.proj-pbar-fill{
  height:100%;border-radius:var(--rpill);
  background:linear-gradient(90deg,var(--green),var(--green-bright));
  transition:width .4s var(--ease);
}
.proj-pct{font-size:.72rem;color:var(--t2);white-space:nowrap;}
.proj-delete{color:var(--t3);padding:4px 6px;}
.proj-delete:hover{color:var(--red);}

.proj-steps{display:flex;flex-direction:column;}
.proj-step{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s4) var(--s5);
  border-bottom:1px solid var(--border);
  transition:background var(--t-fast);
}
.proj-step:last-child{border-bottom:none;}
.proj-step:hover{background:rgba(255,255,255,.022);}
.proj-step.done .proj-step-name{color:var(--t2);}
.proj-step-left{display:flex;align-items:center;gap:var(--s4);flex:1;}
.proj-step-num{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:.72rem;font-weight:700;
  border:1.5px solid var(--border);
  color:var(--t2);background:rgba(255,255,255,.04);
}
.proj-step-num.done{
  border-color:var(--green);color:var(--green);background:var(--green-dim);
}
.proj-step-name{font-size:.82rem;font-weight:500;color:var(--t1);}
.proj-step-actions{display:flex;align-items:center;gap:var(--s2);flex-shrink:0;}

/* ── Start a Project Wizard Modal ───────────────────────────────────────── */
.proj-wizard-backdrop{
  position:fixed;inset:0;z-index:300;
  background:var(--bg-overlay);
  display:flex;align-items:center;justify-content:center;
  padding:var(--s5);
}
.proj-wizard-backdrop[hidden]{ display:none; }
.proj-wizard{
  background:#0d1220;
  border:1px solid var(--border-hv);
  border-radius:var(--r6);
  width:100%;max-width:440px;
  padding:var(--s7);
  box-shadow:0 24px 80px rgba(0,0,0,.6);
}
.proj-wizard-title{
  font-size:1.1rem;font-weight:700;margin-bottom:6px;
}
.proj-wizard-desc{
  font-size:.82rem;color:var(--t2);margin-bottom:var(--s5);line-height:1.55;
}
.proj-wizard-label{
  display:block;font-size:.68rem;font-weight:600;letter-spacing:.06em;
  color:var(--t2);text-transform:uppercase;margin-bottom:6px;
}
.proj-wizard-optional{
  font-size:.7rem;font-weight:400;text-transform:none;letter-spacing:0;color:var(--t3);
}
.proj-wizard-input{
  width:100%;padding:9px 12px;
  background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r3);
  color:var(--t1);font-size:.875rem;margin-bottom:var(--s4);
  transition:border-color var(--t-fast);
}
.proj-wizard-input:focus{outline:none;border-color:var(--green);}

.proj-wizard-steps-preview{
  background:rgba(45,212,191,.04);border:1px solid var(--border-green);
  border-radius:var(--r4);padding:var(--s4) var(--s5);margin:var(--s4) 0;
}
.pwsp-hd{font-size:.72rem;font-weight:600;color:var(--t2);margin-bottom:var(--s3);text-transform:uppercase;letter-spacing:.05em;}
.pwsp-row{
  display:flex;align-items:center;gap:var(--s3);
  font-size:.8rem;color:var(--t1);padding:4px 0;
}
.pwsp-num{
  width:20px;height:20px;border-radius:50%;
  background:var(--green-dim);border:1px solid var(--border-green);
  color:var(--green);font-size:.65rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.proj-wizard-error{
  font-size:.8rem;color:var(--red);min-height:1.2em;margin-bottom:var(--s2);
}
.proj-wizard-btns{
  display:flex;gap:var(--s3);justify-content:flex-end;margin-top:var(--s4);
}

/* Responsive tweaks */
@media(max-width:640px){
  .irh-grid{grid-template-columns:1fr 1fr;}
  .proj-step{flex-wrap:wrap;gap:var(--s3);}
  .proj-step-actions{width:100%;justify-content:flex-end;}
  .proj-pbar{width:70px;}
}
@media(max-width:400px){
  .irh-grid{grid-template-columns:1fr;}
}

/* ── Sidebar accordion sub-nav (v4 layout) ──────────────────────────────── */
.sub-nav.open{max-height:360px}
.sub-nav-inner{
  margin:3px 0 5px 12px;
  border-left:1px solid var(--border);
  padding:2px 0 3px 0;
  display:flex;flex-direction:column;gap:1px;
}
.nav-group .sub-item{
  display:flex;align-items:flex-start;gap:8px;
  padding:6px 10px 6px 26px;
  font-size:13px;font-weight:500;color:var(--t3);
  background:none;border:none;text-align:left;width:100%;
  border-radius:var(--r2);cursor:pointer;
  transition:color var(--t-fast),background var(--t-fast);
  white-space:normal;line-height:1.35;
}
.nav-group .sub-item::before{display:none}
.sub-dot{
  width:6px;height:6px;border-radius:50%;
  background:currentColor;opacity:.4;flex-shrink:0;
  margin-top:4px;
  transition:opacity var(--t-fast),background var(--t-fast);
}
.nav-group .sub-item:hover{color:var(--t1);background:rgba(255,255,255,.03)}
.nav-group .sub-item:hover .sub-dot{opacity:.7}
.nav-group .sub-item.active{color:var(--green-text)}
.nav-group .sub-item.active .sub-dot{background:var(--green);opacity:1}
.sub-badge{
  margin-left:auto;padding:1px 6px;border-radius:99px;
  background:rgba(245,184,61,.15);font-size:9px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;color:#f5b83d;flex-shrink:0;
}
@media(max-width:1024px){
  .sub-nav-inner{display:none}
}

/* =========================================================================
   v5 DESIGN SYSTEM OVERRIDES — applied on top of v10 layout
   Matches Dashboard v5's visual language: solid surfaces, teal-brand, shadows,
   pill nav active, underline subtabs, v5 typography hierarchy.
   ========================================================================= */

/* ── Solid card surfaces + v5 shadow elevation ──────────────────────────── */
.card{
  background:var(--bg-card);   /* now #0f1623, solid navy */
  box-shadow:var(--shadow);
}
.card:hover{
  border-color:var(--border-hv);
  box-shadow:0 4px 16px rgba(0,0,0,.45);
}
.card.glow:hover{
  border-color:var(--border-green);
  box-shadow:0 0 0 1px var(--border-green),0 12px 36px rgba(0,0,0,.5);
}

/* ── Topbar — solid surface, no blur ────────────────────────────────────── */
.topbar{
  background:var(--bg-topbar);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.tb-search{
  background:var(--bg-elevated);
  border:1px solid var(--border);
}
.tb-search:focus-within{
  border-color:var(--border-green);
  box-shadow:0 0 0 3px var(--green-dim);
}

/* ── Sidebar — v5 style: same bg as page, no sidebar-specific dark ──────── */
.sidebar{
  background:var(--bg-sidebar);
  border-right:1px solid var(--border);
}
.sidebar-foot{
  border-top:1px solid var(--border);
}

/* ── Nav items — v5 pill active (filled teal-dim bg) ───────────────────── */
.nav-item{
  border-radius:var(--r3);
  color:var(--t2);
  transition:background var(--t-fast),color var(--t-fast);
}
.nav-item:hover{
  background:rgba(255,255,255,.045);
  color:var(--t1);
}
.nav-item.active{
  background:var(--green-dim);  /* teal tinted pill */
  color:var(--green);
  font-weight:600;
}
.nav-item.active svg{color:var(--green);}
/* remove left rail — v5 uses pill, not rail */
.nav-item.active::before{display:none;}

/* ── Subtab bar — v5 underline style ───────────────────────────────────── */
.subtab-bar{
  border-bottom:1px solid var(--border);
  background:transparent;
  gap:0;
  padding:0;
}
.subtab-btn{
  border-radius:0;
  padding:11px var(--s5);
  margin-bottom:-1px;
  border-bottom:2px solid transparent;
  background:transparent;
  color:var(--t2);
  font-size:13px;
  font-weight:500;
  transition:color var(--t-fast),border-color var(--t-fast);
}
.subtab-btn:hover{
  color:var(--t1);
  background:transparent;
}
.subtab-btn.active{
  color:var(--green);
  background:transparent;
  border-bottom-color:var(--green);
  font-weight:600;
}
/* Anchor variant (e.g. "Build Custom Supply Chain" → its own page) */
a.subtab-btn-link{
  text-decoration:none;
  display:inline-flex;
  align-items:center;
}

/* ── Card header + title — v5 style ────────────────────────────────────── */
.card-hd{
  padding:var(--s3) var(--s5);
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.018);
}
.card-title{
  font-size:14px;
  font-weight:700;
  color:#94a3b8;
  letter-spacing:.06em;
  text-transform:uppercase;
}

/* ── Section headers — v5 prominent style ───────────────────────────────── */
.section-title{
  font-size:24px;
  font-weight:700;
  color:var(--t1);
  letter-spacing:-.025em;
}
.section-sub{
  color:var(--t2);
  font-size:14px;
}

/* ── KPI stat cards — match v5 solid surface ───────────────────────────── */
.kpi-stat-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}
.kpi-stat-card:hover{
  border-color:var(--border-hv);
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(0,0,0,.45);
}

/* ── Dashboard greeting bar ─────────────────────────────────────────────── */
.dash-greet-bar{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--r5);
  box-shadow:var(--shadow);
}

/* ── Buttons — v5 style ─────────────────────────────────────────────────── */
.btn-primary{
  background:var(--green);
  color:#04140f;
  border-color:var(--green);
  font-weight:700;
}
.btn-primary:hover{
  background:var(--green-bright);
  border-color:var(--green-bright);
  transform:translateY(-1px);
  box-shadow:0 4px 14px var(--green-glow);
}
.btn-secondary{
  background:var(--bg-elevated);
  color:var(--t1);
  border-color:var(--border-hv);
}
.btn-secondary:hover{
  background:rgba(255,255,255,.09);
  border-color:var(--t3);
}
.btn-ghost{
  background:transparent;
  color:var(--green);
  border-color:var(--border);
}
.btn-ghost:hover{
  background:var(--green-dim);
  border-color:var(--border-green);
  color:var(--green);
}

/* The "Clear" buttons in the Recently Read / Recently Watched card headers read
   as text links, not outlined buttons. Keep the 1px border transparent rather
   than removing it so the button's size and baseline don't shift.
   Vertical padding is zeroed so the button can't grow the header taller than
   its title — that keeps these headers on the same 12px rhythm as every other
   card, whose header holds a flat .btn-text-link. */
#clearReadBtn,#clearWatchedBtn{
  padding:0;background:transparent;border-color:transparent;
}
#clearReadBtn:hover,#clearWatchedBtn:hover{
  background:transparent;border-color:transparent;opacity:.7;
}

/* ── Inputs — v5 solid surface ──────────────────────────────────────────── */
.search-wrap{
  background:var(--bg-elevated);
  border-color:var(--border);
}
.search-wrap:focus-within{
  border-color:var(--border-green);
  box-shadow:0 0 0 3px var(--green-dim);
}
.tb-search-input{color:var(--t1);}
.tb-search-input::placeholder{color:var(--t3);}

/* ── Badges ─────────────────────────────────────────────────────────────── */
.badge-green{
  background:var(--green-dim);
  color:var(--green);
  border:1px solid var(--border-green);
}

/* ── Dashboard article list rows ────────────────────────────────────────── */
.dar{background:transparent;}
.dar:hover{background:rgba(255,255,255,.03);}

/* ── Article cards ──────────────────────────────────────────────────────── */
.article-card{
  background:var(--bg-card);
  box-shadow:var(--shadow);
}
.article-card:hover{
  border-color:var(--border-hv);
  box-shadow:var(--shadow-md);
  transform:translateY(-2px);
}

/* ── Company cards ──────────────────────────────────────────────────────── */
.co-card{
  background:var(--bg-elevated);
  box-shadow:var(--shadow);
}
.co-card:hover{border-color:var(--border-hv);}

/* ── Supply chain layout — v7 style ─────────────────────────────────────── */
.sc-wrap{
  display:grid;
  grid-template-columns:1fr 288px;
  gap:var(--s5);
  align-items:start;
}
.sc-wrap > div{min-width:0}
/* Header: "SUPPLY CHAIN ANALYSIS •" + placeholder */
.sc-section-hd{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;
}
.sc-section-title{
  display:flex;align-items:center;gap:8px;
  font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--t1);
}
.sc-section-dot{
  width:11px;height:11px;border-radius:50%;
  background:var(--green);flex-shrink:0;
}
.sc-placeholder-text{
  font-size:11.5px;color:var(--t3);
}
.sc-custom-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px 4px 8px;border-radius:var(--r2);
  font-size:11px;font-weight:600;letter-spacing:.02em;
  color:var(--green);border:1px solid var(--border-green);
  background:var(--green-dim);
  text-decoration:none;white-space:nowrap;flex-shrink:0;
  transition:background var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast);
  position:relative;
}
.sc-custom-btn:hover{
  background:var(--green-glow);
  border-color:var(--green);
  box-shadow:0 0 10px var(--green-glow);
}
.sc-custom-btn::after{
  content:attr(data-tooltip);
  position:absolute;bottom:calc(100% + 7px);right:0;
  background:var(--bg-elevated);border:1px solid var(--border-hv);
  color:var(--t1);font-size:11px;font-weight:500;letter-spacing:.01em;
  padding:5px 9px;border-radius:var(--r2);white-space:nowrap;
  pointer-events:none;opacity:0;transform:translateY(4px);
  transition:opacity var(--t-fast),transform var(--t-fast);
  box-shadow:0 4px 12px rgba(0,0,0,.5);
}
.sc-custom-btn:hover::after{
  opacity:1;transform:translateY(0);
}
/* Segment grid — exact v7 */
.seg-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:6px;
}
/* Segment button — exact v7 clip-path arrow shape */
.seg-card{
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:7px;
  padding:14px 5px 12px;
  background:rgba(255,255,255,.05);
  border-radius:7px;
  border:none;
  cursor:pointer;
  text-align:center;
  transition:background var(--t-fast);
  user-select:none;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%,10px 50%);
}
.seg-card.empty{visibility:hidden;pointer-events:none;}
/* Icon — real per-segment SVG (already colored internally), neutralized to
   gray by default via filter and revealed in its true color on hover/active
   so only the icon itself carries the accent, not the whole tile. */
.seg-icon{
  display:block;
  width:26px;height:26px;
  flex-shrink:0;
}
.seg-icon svg{
  display:block;width:100%;height:100%;
  filter:grayscale(1) brightness(1.5);
  transition:filter var(--t-fast);
}
.seg-card:hover .seg-icon svg{filter:none;}
.seg-card.active .seg-icon svg{filter:none;}
/* Light mode: brightness(1.5) washes the grayscale icons out to near-white on a
   light background — darken them instead so they stay legible (audit D2). */
body.light .seg-icon svg{filter:grayscale(1) brightness(.55);}
body.light .seg-card:hover .seg-icon svg{filter:none;}
body.light .seg-card.active .seg-icon svg{filter:none;}
/* Fallback path-only icons (no icon SVG on record) have no fill/stroke of
   their own and need CSS to supply both — real icons must never get these,
   since they'd inherit down onto paths with no local stroke and paint a
   colored outline over the icon's own baked-in fill. */
.seg-icon-fallback svg{
  stroke:rgba(200,210,200,.55);stroke-width:1.5;fill:none;
  transition:filter var(--t-fast),stroke var(--t-fast);
}
.seg-card:hover .seg-icon-fallback svg{stroke:rgba(200,210,200,.85);}
.seg-card.active .seg-icon-fallback svg{stroke:var(--green);}
body.light .seg-icon-fallback svg{stroke:#4b5563;}
body.light .seg-card:hover .seg-icon-fallback svg{stroke:#374151;}
body.light .seg-card.active .seg-icon-fallback svg{stroke:var(--green);}
/* Label — exact v7 */
.seg-title{
  font-size:10px;font-weight:600;
  color:var(--t2);
  line-height:1.3;
  transition:color var(--t-fast);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  height:calc(10px * 1.3 * 2);
  width:100%;
  text-align:center;
}
.seg-card:hover .seg-title{color:var(--t1);}
.seg-card.active .seg-title{color:var(--green-text);}

/* ── Segment detail panel ────────────────────────────────────────────────── */
.sc-detail-panel{
  background:rgba(255,255,255,.04);
  border:1px solid var(--seg-accent-border, rgba(45,212,191,.22));
  border-radius:var(--r4);padding:var(--s5) var(--s6);
  animation:fadeUp 180ms var(--ease) forwards;
  transition:border-color var(--t-fast);
}
.sc-detail-hd{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4)}
.sc-detail-icon{
  display:block;width:22px;height:22px;flex-shrink:0;
}
.sc-detail-icon svg{
  display:block;width:100%;height:100%;
}
.sc-detail-title{font-size:14px;font-weight:700;color:var(--t1)}

/* ── Industry stock lists sidebar — v7 style ────────────────────────────── */
.isl-sidebar{
  display:flex;flex-direction:column;
  position:sticky;top:var(--s7);
}
.isl-sidebar-hd{
  font-size:10.5px;font-weight:800;color:var(--t1);
  letter-spacing:.09em;text-transform:uppercase;
  margin-bottom:10px;
}
.isl-card{
  display:block;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:8px;
  margin-bottom:7px;
  background:rgba(255,255,255,.05);
  cursor:pointer;text-decoration:none;
  transition:border-color var(--t-fast);
}
.isl-card:hover{border-color:rgba(45,212,191,.3);}
.isl-badge{
  font-size:8px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;
  color:var(--green-text);
  margin-bottom:4px;
}
.isl-title{font-size:11px;font-weight:600;color:var(--t1);line-height:1.35;margin-bottom:3px}
.isl-ago{font-size:10px;color:var(--t3)}
@media(max-width:1100px){
  .sc-wrap{grid-template-columns:1fr}
  .isl-sidebar{position:static}
}
@media(max-width:768px){
  .sc-wrap{grid-template-columns:1fr}
  .seg-grid{grid-template-columns:repeat(3,1fr)}
}

/* ── Segment detail — description, sub-segments, key players ─────────────── */
.sc-detail-desc{
  font-size:12px;line-height:1.5;color:var(--t2);
  margin:0 0 var(--s4);
}
.sc-detail-subsegs{margin-bottom:var(--s4)}
.sc-detail-subsegs ul{list-style:none;display:flex;flex-direction:column;gap:4px;margin:0;padding:0}
.sc-detail-subseg-item{
  font-size:11.5px;color:var(--t2);
  padding-left:14px;position:relative;
}
.sc-detail-subseg-item::before{
  content:'';position:absolute;left:0;top:7px;
  width:4px;height:4px;border-radius:50%;
  background:var(--t3);
}
.sc-players-block{margin-top:var(--s5)}
.sc-players-hd{
  display:flex;align-items:center;gap:8px;
  font-size:10.5px;font-weight:800;color:var(--t1);
  letter-spacing:.09em;text-transform:uppercase;
  margin-bottom:8px;
}
.sc-players-toggle{
  width:16px;height:16px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  border:none;background:none;color:var(--t2);cursor:pointer;
  font-size:13px;font-weight:700;line-height:1;padding:0;
  transition:color var(--t-fast);
}
.sc-players-toggle:hover{color:var(--t1)}
.sc-players-rail{
  display:flex;flex-wrap:wrap;gap:8px;min-width:0;
}
.sc-players-rail.collapsed{display:none}
.sc-player-chip{
  flex-shrink:0;display:inline-flex;align-items:center;gap:7px;
  padding:5px 12px 5px 5px;border-radius:var(--rpill);
  border:1px solid var(--border);background:rgba(255,255,255,.04);
  text-decoration:none;
  transition:border-color var(--t-fast),background var(--t-fast);
}
.sc-player-chip:has(.sc-player-star){padding-left:9px}
.sc-player-star{color:var(--amber);font-size:11px;flex-shrink:0}
.sc-player-chip:hover{border-color:var(--border-green);background:var(--green-dim)}
.sc-player-logo{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;
  background:#fff;border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.sc-player-logo img{width:100%;height:100%;object-fit:contain}
.sc-player-name{
  font-size:11.5px;font-weight:600;color:var(--t1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sc-expand-btn{
  display:inline-flex;align-items:center;
  margin-left:auto;flex-shrink:0;
  padding:4px 10px;border-radius:var(--r2);
  font-size:11px;font-weight:600;letter-spacing:.02em;
  color:var(--seg-accent, var(--green));
  border:1px solid var(--seg-accent-border, var(--border-green));
  background:var(--seg-accent-dim, var(--green-dim));cursor:pointer;white-space:nowrap;
  text-decoration:none;
  transition:background var(--t-fast),border-color var(--t-fast);
}
.sc-expand-btn:hover{box-shadow:0 0 8px currentColor}
.isl-filter-pill{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:6px 8px 6px 12px;margin-bottom:10px;
  border-radius:var(--rpill);
  border:1px solid var(--border-green);background:var(--green-dim);
  font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  color:var(--green);
}
.isl-filter-pill-x{
  width:18px;height:18px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r2);color:var(--green);background:transparent;cursor:pointer;
  transition:color var(--t-fast),background var(--t-fast);
}
.isl-filter-pill-x:hover{color:var(--red);background:var(--red-dim)}

/* ── DCF panel ──────────────────────────────────────────────────────────── */
.dcfv2-card{
  background:var(--bg-card);
  box-shadow:var(--shadow);
}

/* ── Modal surfaces ─────────────────────────────────────────────────────── */
.dcf-modal{
  background:var(--bg-elevated);
  border-color:var(--border-green);
  box-shadow:var(--shadow-md);
}
.co-modal-card{
  background:var(--bg-card);
  box-shadow:var(--shadow-md);
}
.co-modal-left{
  background:var(--bg-elevated);
}

/* ── Webinar cards ──────────────────────────────────────────────────────── */
.webinar-card{
  background:var(--bg-card);
  box-shadow:var(--shadow);
}
.webinar-card:hover{border-color:var(--border-hv);}

/* ── Research project cards (IRH) ───────────────────────────────────────── */
.irh-card{
  background:var(--bg-card);
  box-shadow:var(--shadow);
}
.irh-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.45);}
.proj-card{
  background:var(--bg-card);
  box-shadow:var(--shadow);
}
.proj-card-head{
  background:rgba(255,255,255,.018);
}

/* ── Light theme token adjustments ──────────────────────────────────────── */
body.light{
  --bg:          #eef2f7;
  --bg-sidebar:  #ffffff;
  --bg-topbar:   rgba(255,255,255,.97);
  --bg-card:     #ffffff;
  --bg-card-hv:  #f3f6fb;
  --bg-elevated: #f3f6fb;
  --bg-input:    #f3f6fb;
  --border:      rgba(15,23,42,.10);
  --border-hv:   rgba(15,23,42,.18);
  --border-green:rgba(13,148,136,.30);
  --green:       #0d9488;
  --green-bright:#0b7d72;
  --green-dim:   rgba(13,148,136,.10);
  --green-glow:  rgba(13,148,136,.20);
  --green-text:  #0d9488;
  --red:         #dc2626;
  --red-dim:     rgba(220,38,38,.10);
  --t1:          #0f1828;
  --t2:          #56627a;
  --t3:          #8a96ab;
  --t4:          #d1d9e6;
  --shadow:      0 1px 2px rgba(15,23,42,.08);
  --shadow-md:   0 14px 34px -14px rgba(15,23,42,.20);
}

/* ── Add Reminder button ─────────────────────────────────────────────────── */
.btn-reminder{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 12px;border-radius:var(--r3);
  font-size:12px;font-weight:600;
  color:var(--t2);border:1px solid var(--border);background:transparent;
  cursor:pointer;transition:color var(--t-fast),border-color var(--t-fast),background var(--t-fast);
  white-space:nowrap;
}
.btn-reminder:hover{color:var(--green);border-color:var(--green);background:var(--green-dim)}
.webinar-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ── ITC Research Notes ──────────────────────────────────────────────────── */
.itc-notes-meta{display:flex;align-items:center;gap:8px;margin-left:auto}
.itc-notes-ticker{width:80px;text-transform:uppercase}
.itc-notes-textarea{
  width:100%;min-height:140px;resize:vertical;
  background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r3);
  padding:12px 14px;font-size:13px;font-family:inherit;color:var(--t1);line-height:1.6;
  transition:border-color var(--t-fast);outline:none;
}
.itc-notes-textarea:focus{border-color:var(--green)}
.itc-notes-textarea::placeholder{color:var(--t3)}
.itc-notes-saved{
  font-size:11px;font-weight:600;color:var(--green-text);
  opacity:0;transition:opacity 0.25s;pointer-events:none;
}
.itc-notes-saved.visible{opacity:1}

/* ── DCF upside/downside row ─────────────────────────────────────────────── */
.dcf-upside-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 14px;border-radius:var(--r3);
  background:var(--bg-elevated);border:1px solid var(--border);
  margin-top:6px;
}
.dcf-upside-value{font-size:18px;font-weight:700}
.dcf-upside-value.up{color:var(--green)}
.dcf-upside-value.down{color:var(--red,#f87171)}

/* ── DCF v4 layout ───────────────────────────────────────────────────────── */
.dcfv4-layout{
  display:grid;grid-template-columns:1fr 1.4fr;gap:20px;align-items:stretch;
}
@media(max-width:900px){.dcfv4-layout{grid-template-columns:1fr}}

/* Left panel */
.dcfv4-assumptions{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r4);
  padding:24px;display:flex;flex-direction:column;gap:18px;
}
.dcfv4-panel-hd{
  display:flex;align-items:center;gap:8px;
  font-size:14px;font-weight:700;color:var(--green);letter-spacing:.01em;
}
.dcfv4-label{font-size:11px;font-weight:600;color:var(--t3);letter-spacing:.04em;text-transform:uppercase;display:block;margin-bottom:6px}
.dcfv4-field{display:flex;flex-direction:column}
.dcfv4-field-full{width:100%}
.dcfv4-ticker-row{display:flex;gap:8px;align-items:stretch}
.dcfv4-ticker-row input{flex:1}
.dcfv4-ticker-input{
  font-size:15px;font-weight:600;
}
.dcfv4-input{
  background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r3);
  padding:10px 14px;font-size:14px;font-weight:500;color:var(--t1);font-family:inherit;
  outline:none;transition:border-color var(--t-fast);width:100%;
}
.dcfv4-input:focus{border-color:var(--green)}
.dcfv4-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dcfv4-stock-meta{display:flex;flex-direction:column;gap:3px}
.dcfv4-stock-meta span{font-size:11px;color:var(--t3)}
.dcfv4-save-btn{width:100%;justify-content:center;gap:7px;margin-top:4px;font-size:13px;font-weight:600}

/* Right results */
.dcfv4-results{display:flex;flex-direction:column;gap:16px;height:100%}
.dcfv4-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:700px){.dcfv4-stats{grid-template-columns:1fr}}
.dcfv4-stat{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r4);
  padding:18px 20px;
}
.dcfv4-stat-label{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);margin-bottom:8px}
.dcfv4-stat-value{font-size:28px;font-weight:700;color:var(--t1);letter-spacing:-.5px}

/* Chart card */
.dcfv4-chart-card{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r4);padding:20px;flex:1;
}
.dcfv4-chart-hd{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.dcfv4-chart-hd .dcfv4-chart-title{margin-right:auto}
/* Share action for the DCF calculators — a full-width bar above the box it
   captures, so it reads as "share this whole thing", not "share the chart".
   Overrides the base .csi-share-btn styles injected by assets/csi-share.js. */
.dcf-share-bar{display:flex;justify-content:flex-end;margin-bottom:12px}
.dcf-share-bar .csi-share-btn{
  font-size:13px;font-weight:600;padding:9px 16px;border-radius:var(--r3);
  color:var(--green);background:rgba(45,212,191,.10);border-color:rgba(45,212,191,.38);
}
.dcf-share-bar .csi-share-btn:hover{
  background:rgba(45,212,191,.18);border-color:var(--green);color:var(--green);
}
.dcf-share-bar .csi-share-btn svg{width:15px;height:15px}
body.light .dcf-share-bar .csi-share-btn{
  color:var(--green);background:rgba(13,148,136,.08);border-color:rgba(13,148,136,.35);
}
body.light .dcf-share-bar .csi-share-btn:hover{
  background:rgba(13,148,136,.15);border-color:var(--green);color:var(--green);
}
.dcfv4-chart-title{font-size:13px;font-weight:600;color:var(--t1)}
.dcfv4-verdict{font-size:11px;font-weight:700;padding:3px 10px;border-radius:99px;letter-spacing:.03em}
.dcfv4-verdict.undervalued{background:rgba(53,220,110,.15);color:var(--green)}
.dcfv4-verdict.overvalued{background:rgba(248,113,113,.15);color:#f87171}
.dcfv4-canvas{width:100%;height:260px;display:block;border-radius:var(--r2)}
.dcfv4-disclaimer{font-size:10px;color:var(--t3);margin-top:10px}

/* Override row inside v4 layout */
.dcfv4-assumptions .dcf-override-row{padding:0;border-bottom:none;align-items:flex-start}
.dcfv4-assumptions .dcf-chk-label{align-self:flex-start}
.dcfv4-assumptions .dcf-custom-weight-row{
  flex-direction:column;align-items:flex-start;gap:6px;
  padding-left:0;margin-top:8px;width:100%;
}
.dcfv4-assumptions .dcf-custom-weight-row .dcf-label{
  font-size:11px;font-weight:600;color:var(--t3);letter-spacing:.04em;
  text-transform:uppercase;width:auto;
}
.dcfv4-assumptions .dcf-custom-weight-row #dcfCustomWeight{
  width:100%;padding:10px 14px;font-size:14px;
}

/* ── Customize panel divider ─────────────────────────────────────────────── */
.cp-divider{height:1px;background:var(--border);margin:6px 0}

/* ── Drag-to-reorder home widgets ─────────────────────────────────────────── */
.dcard[draggable="true"]{cursor:grab}
.dcard.dragging{opacity:.32;outline:2px dashed var(--border-hv);outline-offset:-2px;cursor:grabbing}
.dcard.drag-over{
  outline:2px solid var(--green);outline-offset:-2px;
  box-shadow:0 0 0 4px var(--green-dim),var(--shadow-md);
  transition:outline var(--t-fast),box-shadow var(--t-fast);
}

/* ── Company Analysis layout ─────────────────────────────────────────────── */
.coa-layout{display:flex;gap:var(--s5);align-items:flex-start}
.coa-sidebar{
  width:200px;flex-shrink:0;position:sticky;top:var(--s6);
  display:flex;flex-direction:column;gap:var(--s4);
}
.coa-search-wrap{
  display:flex;align-items:center;gap:var(--s2);
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r4);
  padding:0 var(--s3);
}
.coa-search-wrap svg{color:var(--t3);flex-shrink:0}
.coa-search{
  flex:1;background:none;border:none;outline:none;
  font-size:13px;color:var(--t1);padding:8px 0;
  font-family:inherit;
}
.coa-search::placeholder{color:var(--t3)}
.coa-filter-group{display:flex;flex-direction:column;gap:var(--s2)}
.coa-filter-label{font-size:13px;font-weight:700;color:var(--t1);padding:0 2px}
.coa-industry-select{
  width:100%;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r3);
  color:var(--t1);font-size:12px;font-family:inherit;padding:7px 8px;outline:none;cursor:pointer;
  appearance:auto;
}
.coa-industry-select:focus{border-color:var(--border-green)}
.coa-country-list{display:flex;flex-direction:column;gap:0;max-height:440px;overflow-y:auto;position:relative;}
.coa-country-fade{
  position:sticky;bottom:0;left:0;right:0;height:28px;margin-top:-28px;
  pointer-events:none;background:linear-gradient(to bottom, transparent, var(--bg));
}
.coa-radio{
  display:flex;align-items:center;gap:8px;
  font-size:13px;color:var(--t2);padding:5px 4px;
  cursor:pointer;user-select:none;line-height:1.3;
}
.coa-radio input[type="radio"]{
  accent-color:var(--green);width:15px;height:15px;flex-shrink:0;cursor:pointer;margin:0;
}
.coa-radio.is-active{color:var(--t1);font-weight:700}
.coa-radio:hover{color:var(--t1)}
.coa-radio-count{color:var(--t2);font-size:13px}
.coa-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--s3)}
.coa-result-bar{font-size:12px;color:var(--t3);padding:0 2px}

/* ── Company cards (v10 directory style) ─────────────────────────────────── */
#coCardGrid.co-card-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
#coCardGrid .co-card{
  border:1px solid rgba(255,255,255,.08);border-radius:16px;overflow:hidden;cursor:default;
  transition:border-color var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast);
  display:flex;flex-direction:column;text-decoration:none;padding:18px;gap:0;
  background:rgba(28,34,28,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 2px 10px rgba(0,0,0,.28);
}
#coCardGrid .co-card:hover{border-color:rgba(45,212,191,.4);transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.45);}
#coCardGrid .co-logo-area{
  flex:none;width:100%;height:104px;padding:8px 6px;
  display:flex;align-items:center;justify-content:center;background:transparent;
}
#coCardGrid .co-logo-img{max-width:80%;max-height:76px;width:auto;height:auto;object-fit:contain;display:block;}
/* Near-white logos (uploaded for the dark card) go invisible on the white
   light-mode card — flagged by markWashedCompanyLogos() in app.js via
   canvas pixel sampling; forced to a dark silhouette here so they read. */
body.light #coCardGrid .co-logo-img[data-csi-washed="1"]{filter:brightness(0) saturate(100%) contrast(1.1);}
#coCardGrid .co-body{
  display:flex;flex-direction:column;gap:3px;min-width:0;
  padding-top:14px;margin-top:2px;
}
#coCardGrid .co-name{font-size:15px;font-weight:700;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0;margin:0;}
#coCardGrid .co-ticker{font-size:12px;font-weight:600;color:var(--accent,#2dd4bf);}
#coCardGrid .co-foot{
  display:flex;justify-content:center;align-items:center;
  padding-top:13px;margin-top:13px;
  border-top:1px solid rgba(255,255,255,.08);
}
#coCardGrid .co-view-link{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12px;font-weight:700;color:var(--accent,#2dd4bf);
  background:none;border:none;padding:0;margin:0;font-family:inherit;cursor:pointer;
}
#coCardGrid .co-view-arrow{width:13px;height:13px;flex:none;transition:transform var(--t-fast);}
#coCardGrid .co-card:hover .co-view-arrow{transform:translateX(3px);}

@media(max-width:1100px){#coCardGrid.co-card-grid{grid-template-columns:repeat(4,1fr);}}
@media(max-width:768px){
  .coa-layout{flex-direction:column}
  .coa-sidebar{width:100%;position:static}
  .coa-seg-list{flex-direction:row;flex-wrap:wrap}
  #coCardGrid.co-card-grid{grid-template-columns:repeat(2,1fr);}
}

/* ── Dedicated full-screen ARTICLE PAGE (separate page, staging content) ──── */
.article-page[hidden]{display:none!important;}
.article-page{
  position:fixed;inset:0;z-index:1000;
  display:flex;flex-direction:column;
  background:var(--bg,#080b14);
}
.article-page-frame{flex:1;width:100%;border:0;display:block;background:#fff;}
body.light .article-page{background:#f3f4f6;}

/* ═══ Company Analysis (unified ticker page) ═══════════════════════════════ */
.ca-wrap{display:flex;flex-direction:column;gap:var(--s5)}
.ca-search{position:relative;display:flex;align-items:center;gap:var(--s3)}
.ca-search-icon{position:absolute;left:14px;color:var(--t3);pointer-events:none}
.ca-search-input{
  flex:1;height:46px;padding:0 var(--s4) 0 40px;
  background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r4);
  color:var(--t1);font-size:15px;letter-spacing:.3px;outline:none;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.ca-search-input:focus{border-color:var(--border-green);box-shadow:0 0 0 3px var(--green-dim)}
.ca-search-input::placeholder{color:var(--t3)}
.ca-search .btn{height:46px;padding:0 var(--s6);flex-shrink:0}
.ca-status{min-height:0}
.ca-loading{color:var(--t2);font-size:14px}
.ca-error{
  padding:var(--s4);border-radius:var(--r4);
  background:var(--red-dim);border:1px solid rgba(248,113,113,.3);color:var(--t1);font-size:14px;
}

/* ── Master card — one container for all CA sections ──────────────────────── */
#caBody{min-width:0} /* flex item of .ca-wrap — without this the statements table below forces it wide instead of scrolling */
.ca-master-card{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r5);
  overflow:hidden;display:flex;flex-direction:column;
}
.ca-section{border-bottom:1px solid var(--border);min-width:0} /* flex item of .ca-master-card — same reason */
.ca-section:last-child{border-bottom:none}

/* ── Section: header ────────────────────────────────────────────────────── */
.ca-header{
  padding:var(--s5) var(--s6);display:flex;flex-direction:column;gap:var(--s4);
}
.ca-hd-main{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4)}
.ca-hd-name{font-size:24px;font-weight:700;color:var(--t1);margin:0;line-height:1.2}
.ca-hd-ticker{display:inline-block;margin-top:4px;font-size:13px;color:var(--t2);letter-spacing:.4px}
.ca-hd-price{text-align:right;flex-shrink:0}
.ca-hd-price-val{font-size:26px;font-weight:700;color:var(--green)}
.ca-hd-price-cur{font-size:11px;color:var(--t3);letter-spacing:.5px}
.ca-hd-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s6);
  padding-top:var(--s4);border-top:1px solid var(--border);font-size:13px;color:var(--t2);
}
.ca-hd-meta b{color:var(--t3);font-weight:600;margin-right:6px;font-size:11px;text-transform:uppercase;letter-spacing:.5px}
.ca-hd-ir{margin-left:auto;color:var(--green);font-weight:600;text-decoration:none}
.ca-hd-ir:hover{color:var(--green-bright)}

/* key metrics strip — bottom section of .ca-header-card */
.ca-metrics{display:flex;border-top:1px solid var(--border)}
.ca-metric{
  flex:1;padding:var(--s4) var(--s5);display:flex;flex-direction:column;gap:6px;
  border-right:1px solid var(--border);
}
.ca-metric:last-child{border-right:none}
.ca-metric-label{font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.ca-metric-val{font-size:20px;font-weight:700;color:var(--t1)}
.ca-metric-val.pos{color:var(--green)}
.ca-metric-val.neg{color:var(--red)}

/* ── Section: checklists ────────────────────────────────────────────────── */
.ca-section-checklists{display:flex;align-items:flex-start}
.ca-checklist-pane{flex:1;min-width:0;display:flex;flex-direction:column}
.ca-checklist-pane+.ca-checklist-pane{border-left:1px solid var(--border)}
.ca-pane-hd{display:flex;align-items:center;justify-content:space-between;padding:var(--s3) var(--s5);border-bottom:1px solid var(--border)}
.ca-chk-hint{font-size:11px;color:var(--t3)}
.ca-chk-list{padding:0 var(--s5)}
.ca-chk-item{
  padding:var(--s3) 0;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;
}
.ca-chk-item:last-child{border-bottom:none}
.ca-chk-main{display:flex;flex-direction:column;gap:1px;min-width:0}
.ca-chk-q{display:flex;align-items:center;gap:var(--s2)}
.ca-chk-qtext{font-size:13px;font-weight:600;color:var(--t1)}
.ca-chk-help{
  width:16px;height:16px;border-radius:50%;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--bg-elevated);border:1px solid var(--border);color:var(--t3);
  font-size:10px;font-weight:700;cursor:help;
}
.ca-chk-data{font-size:12px;color:var(--t2)}
.ca-chk-data b{color:var(--t1);font-weight:700}
.ca-chk-actions{display:flex;gap:var(--s2);flex-shrink:0}
.ca-chk-btn{
  padding:4px 12px;border-radius:var(--rpill);font-size:11px;font-weight:600;cursor:pointer;
  background:var(--bg-elevated);border:1px solid var(--border);color:var(--t2);
  transition:all var(--t-fast);
}
.ca-chk-btn:hover{border-color:var(--border-hv);color:var(--t1)}
.ca-chk-btn.confirm.on{background:var(--green-dim);border-color:var(--border-green);color:var(--green)}
.ca-chk-btn.flag.on{background:var(--amber-dim);border-color:rgba(251,191,36,.4);color:var(--amber)}

/* financial statements */
.ca-statements .card-hd{padding:var(--s4) var(--s5);border-bottom:1px solid var(--border)}
.ca-stmt-empty{padding:var(--s6);color:var(--t3);font-size:14px;text-align:center}

/* news placeholder */
.ca-news .card-hd{display:flex;align-items:center;gap:var(--s3);padding:var(--s4) var(--s5);border-bottom:1px solid var(--border)}
.ca-news .card-body-text{padding:var(--s5)}
.ca-soon-badge{
  padding:3px 10px;border-radius:var(--rpill);font-size:11px;font-weight:700;letter-spacing:.4px;
  background:var(--amber-dim);border:1px solid rgba(251,191,36,.35);color:var(--amber);
}

/* ── Section: CSI-curated company content (segment, description, research) ── */
.ca-csi{padding:var(--s5) var(--s6);display:flex;flex-direction:column;gap:var(--s4)}
.ca-csi-hd{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.ca-csi-badge{
  padding:3px 10px;border-radius:var(--rpill);font-size:11px;font-weight:700;letter-spacing:.4px;
  background:var(--green-dim);border:1px solid var(--green);color:var(--green);
}
.ca-csi-seg{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  padding:4px 12px;border-radius:var(--rpill);font-size:12px;font-weight:600;
  background:var(--bg2);border:1px solid var(--border);color:var(--t1);
  transition:border-color .15s,color .15s;
}
.ca-csi-seg:hover{border-color:var(--green);color:var(--green)}
.ca-csi-links{display:flex;gap:var(--s3);margin-left:auto;flex-wrap:wrap}
.ca-csi-link{font-size:12px;font-weight:600;color:var(--t2);text-decoration:none}
.ca-csi-link:hover{color:var(--green);text-decoration:underline}
.ca-csi-desc{font-size:14px;line-height:1.65;color:var(--t2);margin:0;max-width:80ch}
.ca-csi-research{margin-top:var(--s2)}
.ca-csi-research .ca-pane-hd{padding-left:0;padding-right:0}
.ca-csi-research .rp-grid{padding-top:var(--s4)}

/* No fiscal.ai financials for this listing — show only the CSI section. */
#caBody.ca-csi-only .ca-section:not(.ca-csi){display:none}

/* Softer than .ca-error: the company exists, only its financials are missing. */
.ca-note{
  padding:var(--s4);border-radius:var(--r4);
  background:var(--amber-dim);border:1px solid rgba(251,191,36,.3);color:var(--t1);font-size:14px;
}

@media (max-width:640px){
  .ca-csi{padding:var(--s4)}
  .ca-csi-links{margin-left:0;width:100%}
}


@media(max-width:980px){
  .ca-section-checklists{flex-direction:column}
  .ca-checklist-pane+.ca-checklist-pane{border-left:none;border-top:1px solid var(--border)}
}
@media(max-width:720px){
  .ca-metrics{flex-wrap:wrap}
  .ca-metric{flex:0 0 50%;box-sizing:border-box}
  .ca-metric:nth-child(even){border-right:none}
  .ca-metric:nth-child(n+3){border-top:1px solid var(--border)}
}
@media(max-width:560px){
  .ca-hd-main{flex-direction:column}
  .ca-hd-price{text-align:left}
  .ca-hd-ir{margin-left:0}
}

.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* ═══ Investment Thesis stepper (Feature 2) ════════════════════════════════ */
.ca-hd-actions{margin-left:auto;display:flex;align-items:center;gap:var(--s4)}
.ca-hd-actions .ca-hd-ir{margin-left:0}
.btn-sm{padding:6px 14px;font-size:12px}

.ca-save-wrap{position:relative;display:inline-flex}
.ca-save-btn{display:flex;align-items:center;gap:6px}
.ca-save-btn.is-saved{color:var(--green);border-color:var(--border-green)}
.ca-save-menu{
  position:absolute;top:calc(100% + 5px);left:0;z-index:300;
  background:var(--bg-card);
  border:1px solid var(--border-green);
  border-radius:var(--r3);
  padding:4px;min-width:170px;
  box-shadow:0 8px 32px rgba(0,0,0,.45),0 0 0 1px var(--border-green);
  animation:ddIn .12s ease;
}
.ca-save-item{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:8px 10px;border-radius:var(--r2);
  font-size:11.5px;font-weight:600;color:var(--t2);cursor:pointer;
  transition:background var(--t-fast);
}
.ca-save-item:hover{background:var(--green-dim);color:var(--t1)}
.ca-save-item input{accent-color:var(--green);cursor:pointer}

.th-wrap{display:flex;flex-direction:column;gap:var(--s5)}
.th-empty{max-width:560px;margin:var(--s8) auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--s3)}
.th-empty-icon{color:var(--green);opacity:.9}
.th-empty-title{font-size:22px;font-weight:700;color:var(--t1);margin:0}
.th-empty-sub{font-size:14px;color:var(--t2);margin:0;line-height:1.5}
.th-empty-search{display:flex;gap:var(--s3);width:100%;max-width:420px;margin-top:var(--s2)}
.th-empty-search .ca-search-input{padding-left:var(--s4)}
.th-inprogress{width:100%;max-width:480px;margin-top:var(--s5);text-align:left}
.th-ip-title{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--t3);font-weight:600;margin-bottom:var(--s2)}
.th-ip-row{display:flex;align-items:center;gap:var(--s3);width:100%;padding:var(--s3) var(--s4);margin-bottom:6px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r4);cursor:pointer;transition:border-color var(--t-fast)}
.th-ip-row:hover{border-color:var(--border-hv)}
.th-ip-tk{font-weight:700;color:var(--t1);font-size:14px}
.th-ip-date{margin-left:auto;font-size:12px;color:var(--t3)}
.th-badge{padding:2px 9px;border-radius:var(--rpill);font-size:10px;font-weight:700;letter-spacing:.4px;background:var(--bg-elevated);color:var(--t2);border:1px solid var(--border)}
.th-badge.buy{background:var(--green-dim);color:var(--green);border-color:var(--border-green)}
.th-badge.watchlist{background:var(--amber-dim);color:var(--amber);border-color:rgba(251,191,36,.4)}
.th-badge.pass{background:var(--red-dim);color:var(--red);border-color:rgba(248,113,113,.3)}
.th-badge.wip{background:var(--blue-dim);color:var(--blue);border-color:var(--border-blue)}

/* stepper head + indicator */
.th-head{display:flex;flex-direction:column;gap:var(--s4)}
.th-co{display:flex;align-items:baseline;gap:var(--s3)}
.th-co-name{font-size:20px;font-weight:700;color:var(--t1)}
.th-co-tk{font-size:13px;color:var(--t2);letter-spacing:.4px}
.th-steps{display:flex;list-style:none;padding:0;margin:0;gap:var(--s2);counter-reset:none;flex-wrap:wrap}
.th-step{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:var(--rpill);background:var(--bg-card);border:1px solid var(--border);cursor:pointer;transition:all var(--t-fast)}
.th-step:hover{border-color:var(--border-hv)}
.th-step-num{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;background:var(--bg-elevated);color:var(--t3);border:1px solid var(--border)}
.th-step-name{font-size:12.5px;font-weight:600;color:var(--t2);white-space:nowrap}
.th-step.active{border-color:var(--border-green);background:var(--green-dim)}
.th-step.active .th-step-num{background:var(--green);color:#04201c;border-color:var(--green)}
.th-step.active .th-step-name{color:var(--green)}
.th-step.done .th-step-num{background:var(--green-dim);color:var(--green);border-color:var(--border-green)}
.th-step.done .th-step-name{color:var(--t1)}

/* step body */
.th-body{padding:var(--s6);display:flex;flex-direction:column;gap:var(--s4)}
.th-step-hd{display:flex;flex-direction:column;gap:4px;margin-bottom:var(--s2)}
.th-step-title{font-size:17px;font-weight:700;color:var(--t1);margin:0}
.th-step-sub{font-size:13px;color:var(--t2)}
.th-field{display:flex;flex-direction:column;gap:var(--s2)}
.th-label{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--t3);font-weight:600}
.th-textarea{width:100%;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r4);color:var(--t1);font-size:14px;padding:var(--s3) var(--s4);font-family:inherit;resize:vertical;outline:none}
.th-textarea:focus{border-color:var(--border-green);box-shadow:0 0 0 3px var(--green-dim)}
.th-help-link{font-size:12.5px;color:var(--t3)}
.th-help-link a{color:var(--green);text-decoration:none}
.th-chk{padding:0}
.th-decision{display:flex;gap:var(--s2)}
.th-dec-btn{flex:1;padding:12px;border-radius:var(--r4);font-size:14px;font-weight:600;cursor:pointer;background:var(--bg-elevated);border:1px solid var(--border);color:var(--t2);transition:all var(--t-fast)}
.th-dec-btn:hover{border-color:var(--border-hv);color:var(--t1)}
.th-dec-btn.on.buy{background:var(--green-dim);border-color:var(--border-green);color:var(--green)}
.th-dec-btn.on.watchlist{background:var(--amber-dim);border-color:rgba(251,191,36,.4);color:var(--amber)}
.th-dec-btn.on.pass{background:var(--red-dim);border-color:rgba(248,113,113,.3);color:var(--red)}
.th-saved-note{font-size:12px;color:var(--t3);margin-left:var(--s3)}

/* nav */
.th-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.th-nav-right{display:flex;gap:var(--s3);margin-left:auto}

/* toast */
.th-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--bg-elevated);border:1px solid var(--border-green);color:var(--t1);padding:10px 20px;border-radius:var(--rpill);font-size:13px;font-weight:600;box-shadow:var(--shadow-md);opacity:0;pointer-events:none;transition:all var(--t-base);z-index:9999}
.th-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media(max-width:640px){
  .th-steps{gap:6px}
  .th-step{padding:6px 10px}
  .th-step-name{display:none}
  .th-step.active .th-step-name{display:inline}
}

/* ═══ Dashboard Home: Investment Theses cards (Feature 5) ══════════════════ */
.th-card-row{display:flex;align-items:center;gap:var(--s3);width:100%;padding:var(--s3) var(--s4);margin-bottom:6px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r4);cursor:pointer;text-align:left;transition:border-color var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast)}
.th-card-row:last-child{margin-bottom:0}
/* Row hover — same green-border + lift + shadow as the .co-card tiles; no bg change so triggered rows keep their tint */
.th-card-row:hover{border-color:var(--border-green);box-shadow:0 6px 18px rgba(0,0,0,.28);transform:translateY(-1px)}
body.light .th-card-row:hover{box-shadow:0 10px 24px rgba(15,25,45,.16),0 4px 10px rgba(15,25,45,.1)}
.th-cr-id{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.th-cr-name{font-size:13.5px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.th-cr-tk{font-size:11px;color:var(--t3);letter-spacing:.3px;text-transform:uppercase}
.th-cr-date{font-size:11px;color:var(--t3);flex-shrink:0}
/* Empty state floats inside the well as a row, matching .th-card-row's inset */
.th-card-empty{padding:var(--s5) var(--s4);text-align:center;font-size:13px;color:var(--t3);background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r4)}

/* ═══ Multi-company comparison (Market Analysis — Feature 3) ═══════════════ */
.cmp-wrap{display:flex;flex-direction:column;gap:var(--s4)}
.cmp-add{position:relative;display:flex;align-items:center;gap:var(--s3)}
.cmp-add .ca-search-icon{position:absolute;left:14px;color:var(--t3);pointer-events:none}
.cmp-add .ca-search-input{flex:1;padding-left:40px}
.cmp-add .btn{height:46px;padding:0 var(--s6);flex-shrink:0}
.cmp-empty{padding:var(--s9) var(--s4);text-align:center;font-size:14px;color:var(--t3);background:var(--bg-card);border:1px dashed var(--border);border-radius:var(--r5)}
.cmp-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r5);background:var(--bg-card)}
.cmp-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px}
.cmp-table th,.cmp-table td{padding:12px 16px;text-align:right;border-bottom:1px solid var(--border)}
.cmp-table thead th{vertical-align:top;background:var(--bg-elevated);border-bottom:1px solid var(--border)}
.cmp-rowlabel{text-align:left;color:var(--t2);font-weight:500;position:sticky;left:0;background:var(--bg-card);z-index:1}
.cmp-table thead .cmp-rowlabel{background:var(--bg-elevated)}
.cmp-co{min-width:170px}
.cmp-co-name{font-size:14px;font-weight:700;color:var(--t1);text-align:left;line-height:1.25}
.cmp-co-tk{font-size:11px;color:var(--t3);text-align:left;margin-top:2px;letter-spacing:.3px}
.cmp-co-actions{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s3);justify-content:flex-start}
.cmp-remove{width:24px;height:24px;border-radius:50%;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;font-size:16px;line-height:1;background:var(--bg-card);border:1px solid var(--border);color:var(--t3);cursor:pointer;transition:all var(--t-fast)}
.cmp-remove:hover{border-color:rgba(248,113,113,.4);color:var(--red)}
.cmp-val{color:var(--t1);font-variant-numeric:tabular-nums}
.cmp-val.best{color:var(--green);font-weight:700;background:var(--green-dim)}
.cmp-table tbody tr:hover td{background:var(--bg-card-hv)}
.cmp-table tbody tr:hover .cmp-rowlabel{background:var(--bg-card-hv)}
.cmp-table tbody tr:hover .cmp-val.best{background:var(--green-dim)}

/* ═══ Alert system (Feature 4) ═════════════════════════════════════════════ */
.tb-bell{position:relative;width:36px;height:36px;border-radius:var(--r4);display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid transparent;color:var(--t2);cursor:pointer;transition:all var(--t-fast)}
.tb-bell:hover{background:var(--bg-card-hv);color:var(--t1)}
.tb-bell-badge{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--red);color:#fff;font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;line-height:1}

/* alert modal extras (reuses .dcf-modal*) */
.alert-modal-price{font-size:13px;color:var(--t2);margin:-4px 0 var(--s4)}
.alert-modal-price strong{color:var(--green)}
.alert-type-toggle{display:flex;gap:var(--s2);margin-bottom:var(--s4)}
.alert-type-btn{flex:1;padding:9px;border-radius:var(--r3);font-size:13px;font-weight:600;cursor:pointer;background:var(--bg-elevated);border:1px solid var(--border);color:var(--t2);transition:all var(--t-fast)}
.alert-type-btn:hover{border-color:var(--border-hv);color:var(--t1)}
.alert-type-btn.active{background:var(--green-dim);border-color:var(--border-green);color:var(--green)}
.rem-datetime{display:flex;gap:var(--s3)}
.rem-datetime>div{flex:1}
.alert-row-reminder .alert-row-tk{color:var(--t1)}

/* dashboard active-alerts card */
.dash-alerts-count{font-size:11px;color:var(--t3);font-weight:600}
.alert-row{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);margin-bottom:6px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r4);cursor:pointer;transition:border-color var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast)}
.alert-row:last-child{margin-bottom:0}
/* Row hover — matches .th-card-row; leaves background untouched so triggered (green) rows keep their tint */
.alert-row:hover{border-color:var(--border-green);box-shadow:0 6px 18px rgba(0,0,0,.28);transform:translateY(-1px)}
body.light .alert-row:hover{box-shadow:0 10px 24px rgba(15,25,45,.16),0 4px 10px rgba(15,25,45,.1)}
.alert-row.triggered{border-color:var(--border-green);background:var(--green-dim)}
.alert-row-id{display:flex;align-items:center;gap:var(--s2);min-width:120px}
.alert-row-tk{font-size:13.5px;font-weight:700;color:var(--t1)}
.alert-flag{font-size:9px;font-weight:700;letter-spacing:.4px;padding:2px 6px;border-radius:999px;background:var(--green);color:#04201c}
.alert-thesis-link{font-size:11px;color:var(--green);cursor:pointer}
.alert-row-cond{flex:1;font-size:12.5px;color:var(--t2)}
.alert-row-price{font-size:13px;font-weight:600;color:var(--t1);font-variant-numeric:tabular-nums}
.alert-row-x{width:24px;height:24px;border-radius:50%;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;font-size:15px;line-height:1;background:transparent;border:1px solid var(--border);color:var(--t3);cursor:pointer;transition:all var(--t-fast)}
.alert-row-x:hover{border-color:rgba(248,113,113,.4);color:var(--red)}

/* ══ Staging Audit V1 additions ═══════════════════════════════════════════ */
/* Sidebar sub-item rendered as a link (Build Custom Supply Chain — D7) */
.sub-item-link{text-decoration:none}

/* Company Analysis — fiscal.ai description moved up under the header (E6) */
/* Full card width — the old max-width:78ch column read as broken (audit E2) */
.ca-hd-desc{margin:var(--s3) 0 0;font-size:13.5px;line-height:1.6;color:var(--t2)}

/* Company Analysis — embedded Financial Dashboard section (E5) */
.ca-fin-dash .fin-app-wrap{margin-top:var(--s3)}

/* Investment Thesis — Step 4 inline Reverse DCF calculator (audit E3) */
.th-dcf-calc{
  display:grid;grid-template-columns:1fr 1.3fr;gap:var(--s5);
  background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r4);
  padding:var(--s5);margin-bottom:var(--s4);
}
@media(max-width:1000px){.th-dcf-calc{grid-template-columns:1fr}}
.th-dcf-fund{font-size:12px;color:var(--t3);margin-bottom:var(--s4)}
.th-dcf-inputs .dcfv4-field{gap:5px}
.th-dcf-inputs #thDcfSave{margin-top:var(--s4)}
.th-dcf-inputs .dcf-override-row{padding:0 0 4px;border-bottom:none;align-items:flex-start}
.th-dcf-out{display:flex;flex-direction:column;gap:10px}
.th-dcf-out .dcfv4-stat{padding:12px 14px}
.th-dcf-out .dcfv4-stat-value{font-size:20px}
.th-dcf-out .dcfv4-stats{grid-template-columns:repeat(3,1fr)}
@media(max-width:560px){.th-dcf-out .dcfv4-stats{grid-template-columns:1fr}}

/* Dashboard Home — per-widget show/hide (B) */
.dcard.widget-hidden{display:none}
.cp-row-label-sub{font-weight:500;color:var(--t2)}

/* ═══ v1.68 additions ═══════════════════════════════════════════════════════
   Fuzzy-search autocomplete · portfolio shares · KPI info · Compare charts · saved-only preset */

/* Research-article ticker chip */
.rp-tag-tk{font-weight:700;letter-spacing:.2px}

/* Company autocomplete dropdown (Compare + Company Analysis search) */
.csi-ac-menu{position:absolute;z-index:2147483000;max-height:288px;overflow-y:auto;
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r4);
  box-shadow:0 12px 34px rgba(0,0,0,.35);padding:4px}
.csi-ac-item{display:flex;align-items:baseline;gap:8px;width:100%;text-align:left;
  padding:7px 10px;border:0;background:transparent;border-radius:var(--r3);cursor:pointer;
  color:var(--t1);font-family:var(--font);font-size:13px}
.csi-ac-item:hover,.csi-ac-item.active{background:rgba(45,212,191,.12)}
.csi-ac-tk{font-weight:700;color:var(--green);min-width:52px;font-size:12px}
.csi-ac-nm{color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Portfolio shares input on saved-company cards */
.dco-shares{display:flex;align-items:center;gap:6px;margin-top:8px;padding-top:8px;
  border-top:1px dashed var(--border)}
/* In a row the divider runs down the side, not across the top. */
.dco-listview .dco-shares{
  flex-shrink:0;margin-top:0;padding-top:0;border-top:none;
  padding-left:16px;border-left:1px dashed var(--border);
}
@media (max-width:640px){
  .dco-listview .dco-shares{padding-left:10px}
}
.dco-shares-lbl{font-size:11px;color:var(--t3);font-weight:600}
.dco-shares-input{width:64px;padding:3px 6px;font-size:12px;font-family:var(--font);
  background:transparent;border:1px solid var(--border);border-radius:var(--r2);color:var(--t1)}
.dco-shares-input:focus{outline:none;border-color:var(--green)}
.dco-shares-val{margin-left:auto;font-size:12px;font-weight:700;color:var(--green)}

/* KPI info marker */
.kpi-info{font-size:10px;color:var(--t3);cursor:help;vertical-align:top}

/* Saved-only preset button in customize panel */
.cp-preset{width:100%;margin-top:6px;padding:7px 10px;font-size:12px;font-weight:600;
  font-family:var(--font);background:rgba(45,212,191,.10);color:var(--green);
  border:1px solid rgba(45,212,191,.3);border-radius:var(--r3);cursor:pointer}
.cp-preset:hover{background:rgba(45,212,191,.18)}

/* Compare charts */
.cmp-charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:16px}
.cmp-chart-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r4);padding:14px}
.cmp-chart-hd{font-size:12px;font-weight:700;color:var(--t1);margin-bottom:10px;display:flex;
  align-items:baseline;gap:8px;flex-wrap:wrap}
.cmp-chart-hint{font-size:10px;font-weight:500;color:var(--t3)}
.cmp-donut-wrap{display:flex;align-items:center;gap:12px}
.cmp-donut{width:104px;height:104px;flex-shrink:0}
.cmp-legend{display:flex;flex-direction:column;gap:5px}
.cmp-leg{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--t2)}
.cmp-leg i{width:10px;height:10px;border-radius:3px;flex-shrink:0}
.cmp-bar-row{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:8px;margin-bottom:7px}
.cmp-bar-lbl{font-size:11px;font-weight:700;color:var(--t2)}
.cmp-bar-track{height:10px;background:rgba(140,150,170,.14);border-radius:6px;overflow:hidden}
.cmp-bar-fill{display:block;height:100%;border-radius:6px;min-width:2px}
.cmp-bar-fill.neg{opacity:.55}
.cmp-bar-val{font-size:11px;font-weight:600;color:var(--t1);text-align:right}
.cmp5{display:flex;gap:14px;align-items:flex-end;justify-content:space-around;min-height:96px}
.cmp5-group{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1}
.cmp5-bars{display:flex;align-items:flex-end;gap:3px;height:74px}
.cmp5-bar{width:8px;border-radius:2px 2px 0 0;min-height:2px}
.cmp5-lbl{font-size:11px;font-weight:700;color:var(--t2)}
/* Clickable metric rows */
.cmp-rowlabel-click{cursor:pointer}
.cmp-rowlabel-click:hover{color:var(--green)}
.cmp-rowlabel-click.active{color:var(--green);font-weight:700}

/* ═══════════════════════════════════════════════════════════════════════════
   V4 SIDEBAR SKIN — ported from dashboard-v4 (Sidebar.tsx + nav.ts)
   Icons: lucide 0.546.0 @ 24px viewBox. Labels: Plus Jakarta Sans.
   Structure is v10's (six areas); only the look/motion comes from v4.
   Brand stays v10 teal (--green:#2dd4bf); v4's #35dc6e is deliberately NOT used.
   Appended last so it beats the "v5 DESIGN SYSTEM OVERRIDES" block above.
   ═══════════════════════════════════════════════════════════════════════════ */

/* v4's Tailwind transition-colors/-transform default */
:root{ --v4-ease:cubic-bezier(.4,0,.2,1); --v4-dur:150ms; --v4-nav-muted:#94a3b8; }

.sidebar-nav{ padding:var(--s2) var(--s3); gap:4px; }

/* ── Area button: rounded-xl px-3 py-2.5 gap-3 text-[14px] font-medium ───── */
.nav-item{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px;
  border-radius:16px;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-size:14px; font-weight:500; line-height:1.2;
  color:var(--v4-nav-muted); background:transparent; box-shadow:none;
  transition:background var(--v4-dur) var(--v4-ease),color var(--v4-dur) var(--v4-ease);
}
.nav-item:hover{ background:rgba(255,255,255,.045); color:var(--t1); }
.nav-item.active{
  background:var(--bg-elevated);   /* v4 bg-card-2 — a solid raised surface */
  color:var(--t1);                 /* v4 text-copy — NOT the brand color */
  box-shadow:none;
}
.nav-item.active .nav-label{ font-weight:600; }
/* v4 has no left accent rail — the icon tile carries the active signal */
.nav-item.active::before{ display:none; }

/* ── Icon tile: grid h-7 w-7 rounded-lg, brand-dim when active ──────────── */
.nav-item .nav-icon{
  width:28px; height:28px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:8px;
  background:transparent; color:var(--t3);
  transition:background var(--v4-dur) var(--v4-ease),color var(--v4-dur) var(--v4-ease);
}
.nav-item .nav-icon svg{ width:18px; height:18px; }
.nav-item:hover .nav-icon{ color:var(--t2); }
.nav-item.active .nav-icon{ background:var(--green-dim); color:var(--green); }
.nav-item.active .nav-icon svg{ color:var(--green); }

.nav-label{
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-size:14px; flex:1; text-align:left;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ── Chevron: h-4 w-4, stays faint even when the area is active ─────────── */
.nav-item .nav-chevron{
  width:16px; height:16px; margin-left:auto; flex-shrink:0;
  color:var(--t3);
  transition:transform var(--v4-dur) var(--v4-ease);
}
.nav-item.open .nav-chevron{ transform:rotate(90deg); color:var(--t3); }
.nav-item.active .nav-chevron{ color:var(--t3); }

/* ── Sub-nav: ml-[26px] border-l pl-3 space-y-0.5 ──────────────────────── */
.sub-nav-inner{
  margin:4px 0 4px 26px;
  border-left:none;            /* line removed per request (was the v4 guide rail) */
  padding:0 0 0 12px;
  display:flex; flex-direction:column; gap:2px;
}
.nav-group .sub-item{
  display:flex; align-items:center; gap:8px;
  padding:6px 12px;
  border-radius:8px;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-size:13px; font-weight:500; line-height:1.35;
  color:var(--v4-nav-muted); background:none; border:none; text-align:left; width:100%;
  cursor:pointer; white-space:normal;
  transition:background var(--v4-dur) var(--v4-ease),color var(--v4-dur) var(--v4-ease);
}
.nav-group .sub-item:hover{ color:var(--t1); background:rgba(255,255,255,.03); }
.nav-group .sub-item.active{ color:var(--green); background:transparent; }

/* dot: h-1.5 w-1.5 rounded-full — line-strong when idle, brand when active */
.sub-dot{
  width:6px; height:6px; border-radius:9999px; flex-shrink:0; margin-top:0;
  background:rgba(148,163,184,.32); opacity:1;
  transition:background var(--v4-dur) var(--v4-ease);
}
.nav-group .sub-item:hover .sub-dot{ background:rgba(148,163,184,.5); }
.nav-group .sub-item.active .sub-dot{ background:var(--green); }

/* ── Light mode ────────────────────────────────────────────────────────── */
/* #94a3b8 is v4's DARK muted; on the white light-mode sidebar it fails contrast,
   so light mode keeps its own --t2 (#475467). */
body.light .nav-item{ color:var(--t2); }
body.light .nav-group .sub-item{ color:var(--t2); }
body.light .nav-item:hover{ background:rgba(15,25,45,.045); }
body.light .nav-item.active{ background:var(--bg-elevated); color:var(--t1); }
body.light .nav-group .sub-item:hover{ background:rgba(15,25,45,.035); }
body.light .sub-dot{ background:rgba(15,23,42,.22); }
body.light .nav-group .sub-item:hover .sub-dot{ background:rgba(15,23,42,.38); }
body.light .nav-group .sub-item.active .sub-dot{ background:var(--green); }

/* ── Collapsed 60px icon rail (re-declared: the @media block above this one
      loses to these same-specificity rules purely on source order) ───────── */
@media(max-width:1024px){
  .sidebar-nav{ padding:var(--s3) var(--s1); }
  .nav-item{ justify-content:center; gap:0; padding:8px; border-radius:12px; }
  .nav-item .nav-label{ display:none; }
  .nav-item .nav-chevron{ display:none; }
  .sub-nav-inner{ display:none; }
  .nav-item.active{ background:transparent; }
  .nav-item.active .nav-icon{ background:var(--green-dim); }
}

@media(prefers-reduced-motion:reduce){
  .nav-item,.nav-item .nav-icon,.nav-item .nav-chevron,
  .nav-group .sub-item,.sub-dot{ transition:none; }
}