/* ─── GOOGLE FONTS ────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ─── DESIGN TOKENS ───────────────────────────────────── */
:root {
  /* Primary action — near-black (inverts to near-white in dark mode) */
  --blue:       #111827;
  --blue-d:     #000000;
  --blue-bg:    rgba(0,0,0,.04);

  /* Neutrals */
  --bg:         #F5F6F8;
  --surface:    #FFFFFF;
  --surface-2:  #F9FAFB;
  --border:     #E8EAF0;
  --text:       #101828;
  --text-2:     #5A6478;
  --text-3:     #9AA3B2;

  /* Status — used only for data-driven indicators */
  --green:      #00B37E;
  --green-bg:   rgba(0,179,126,.08);
  --red:        #E53935;
  --red-bg:     rgba(229,57,53,.08);
  --amber:      #F59E0B;
  --amber-bg:   rgba(245,158,11,.08);
  --gold:       #F9C338;
  --gold-bg:    rgba(249,195,56,.08);

  /* Layout */
  --topnav-h:   50px;
  --radius:     8px;
  --radius-sm:  5px;
  --radius-lg:  14px;
  --shadow-sm:  0 1px 3px rgba(16,24,40,.05), 0 1px 2px rgba(16,24,40,.03);
  --shadow:     0 2px 8px rgba(16,24,40,.07), 0 1px 3px rgba(16,24,40,.04);
  --shadow-lg:  0 8px 28px rgba(16,24,40,.1), 0 2px 8px rgba(16,24,40,.05);
  --transition: .14s cubic-bezier(.4,0,.2,1);
}

[data-theme="dark"] {
  --bg:         #0D0F14;
  --surface:    #161B24;
  --surface-2:  #1E2330;
  --border:     #252D3D;
  --text:       #F2F4F7;
  --text-2:     #8C96A8;
  --text-3:     #56637A;
  --blue:       #F1F5F9;
  --blue-d:     #FFFFFF;
  --blue-bg:    rgba(255,255,255,.07);
  --green:      #00D68F;
  --green-bg:   rgba(0,214,143,.09);
  --red:        #FF5C5C;
  --red-bg:     rgba(255,92,92,.09);
  --amber:      #FFC107;
  --amber-bg:   rgba(255,193,7,.09);
  --gold:       #FFD54F;
  --gold-bg:    rgba(255,213,79,.09);
  --shadow-sm:  0 1px 3px rgba(0,0,0,.3);
  --shadow:     0 2px 8px rgba(0,0,0,.35);
  --shadow-lg:  0 8px 28px rgba(0,0,0,.5);
}

/* ─── RESET ───────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:13px}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);color:var(--text);
  height:100vh;overflow:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background var(--transition),color var(--transition)
}
input,button,select,textarea{font-family:inherit}

/* ─── AUTH SCREEN ─────────────────────────────────────── */
#auth-screen{
  position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  background:var(--bg);z-index:200;overflow-y:auto
}
#auth-screen.visible,#auth-screen[style*="flex"]{display:flex}
.login-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 10% 30%, rgba(235,124,5,.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 70%, rgba(249,195,56,.04) 0%, transparent 60%)
}
.login-wrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px;padding:32px 20px}
.login-mark{
  width:48px;height:48px;border-radius:13px;
  background:linear-gradient(135deg,#EB7C05,#F9C338);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(235,124,5,.3);
  color:#fff
}
.login-headline{font-size:26px;font-weight:800;letter-spacing:-.04em;text-align:center}
.login-headline span{background:linear-gradient(90deg,#EB7C05,#F9C338);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.login-sub{font-size:12px;color:var(--text-2);margin-top:-14px;text-align:center;font-weight:500}
.login-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:16px;padding:28px 32px;width:400px;
  box-shadow:var(--shadow-lg)
}
.lf-group{position:relative;margin-bottom:14px}
.lf-input{
  width:100%;background:var(--surface-2);border:1.5px solid var(--border);
  border-radius:var(--radius-sm);color:var(--text);padding:11px 14px;
  font-size:13px;font-weight:500;outline:none;
  transition:border-color var(--transition),box-shadow var(--transition)
}
.lf-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-bg)}
.lf-label{
  position:absolute;left:11px;top:-7px;background:var(--surface);
  padding:0 4px;font-size:10px;font-weight:700;color:var(--text-2);
  text-transform:uppercase;letter-spacing:.04em
}
.login-btn{
  width:100%;background:linear-gradient(135deg,#EB7C05,#C96800);color:#fff;
  border:none;border-radius:var(--radius-sm);padding:12px;
  font-size:13px;font-weight:700;cursor:pointer;letter-spacing:.01em;
  box-shadow:0 3px 12px rgba(235,124,5,.35);
  transition:all var(--transition);margin-top:4px
}
.login-btn:hover{box-shadow:0 5px 18px rgba(235,124,5,.5);transform:translateY(-1px)}
.login-footer{font-size:10px;color:var(--text-3);text-align:center;max-width:300px;line-height:1.7;font-weight:500}
.login-divider{display:flex;align-items:center;gap:10px;margin:12px 0}
.login-divider span{font-size:11px;color:var(--text-3)}
.login-divider::before,.login-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.auth-err{font-size:12px;margin-top:6px;display:none}
.login-admin-link{display:block;text-align:center;margin-top:12px;font-size:11px;font-weight:600;color:var(--text-3);cursor:pointer;transition:color var(--transition);user-select:none}
.login-admin-link:hover{color:var(--blue)}
.login-card.admin-mode{border-top:3px solid var(--blue);padding-top:25px}
.admin-mode-badge{display:none;align-items:center;gap:6px;background:var(--blue-bg);color:var(--blue);border-radius:20px;padding:3px 10px;font-size:10px;font-weight:800;letter-spacing:.04em;margin-bottom:12px}
.login-card.admin-mode .admin-mode-badge{display:inline-flex}
.auth-tab-btn{padding:6px 16px;border-radius:20px;border:1.5px solid var(--border);background:var(--surface-2);color:var(--text-2);font-size:12px;font-weight:600;cursor:pointer;transition:all var(--transition)}
.auth-tab-btn.active{background:var(--blue-bg);color:var(--blue);border-color:var(--blue)}

/* ─── APP LAYOUT ──────────────────────────────────────── */
#app-screen{display:none;flex-direction:column;height:100vh;overflow:hidden}
#app-screen.visible,#app-screen[style*="flex"]{display:flex}

/* ─── TOP NAV ─────────────────────────────────────────── */
.topnav{
  height:var(--topnav-h);flex-shrink:0;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;
  padding:0 14px;
  position:relative;z-index:100
}
.topnav-brand{
  display:flex;align-items:center;gap:8px;
  text-decoration:none;flex-shrink:0;
  padding-right:14px;border-right:1px solid var(--border)
}
.brand-icon{
  width:30px;height:30px;border-radius:8px;
  background:linear-gradient(135deg,#EB7C05,#F9C338);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;box-shadow:0 2px 8px rgba(235,124,5,.3)
}
.brand-icon svg{color:#fff}
.brand-name{font-size:14px;font-weight:800;letter-spacing:-.03em;color:var(--text)}
.brand-name em{font-style:normal;color:var(--blue)}
.topnav-tabs{
  display:flex;align-items:stretch;height:100%;flex:1;
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;padding:0 4px
}
.topnav-tabs::-webkit-scrollbar{display:none}

/* Nav items */
.nav-item{
  display:flex;align-items:center;gap:6px;
  padding:0 11px;cursor:pointer;
  border:none;background:transparent;
  color:var(--text-3);font-size:12px;font-weight:600;
  white-space:nowrap;height:100%;
  position:relative;flex-shrink:0;
  transition:color var(--transition);
  border-bottom:2px solid transparent;
  margin-bottom:-1px
}
.nav-item:hover{color:var(--text-2);background:var(--surface-2)}
.nav-item.active{color:var(--blue);border-bottom-color:var(--blue)}
.nav-item .nav-icon{width:15px;height:15px;flex-shrink:0;opacity:.55;transition:opacity var(--transition)}
.nav-item i.nav-icon{width:auto;height:auto;font-size:15px;line-height:1}
.nav-item:hover .nav-icon,.nav-item.active .nav-icon{opacity:1}
.nav-label{font-size:12px;font-weight:600}

/* Hide old sidebar-only elements */
.sb-brand,.sb-divider,.sb-user,.sb-nav,.sb-footer,.sb-avatar,.sb-uname,.sb-role,.sidebar{display:none!important}
.nav-icon-wrap{display:none}

.topnav-right{
  display:flex;align-items:center;gap:6px;flex-shrink:0;
  margin-left:auto;padding-left:12px;border-left:1px solid var(--border)
}
#topbar-clock{font-size:11px;color:var(--text-3);font-weight:500;font-variant-numeric:tabular-nums}
.demo-badge{
  background:var(--amber-bg);color:var(--amber);
  padding:2px 8px;border-radius:20px;font-size:9px;font-weight:800;
  letter-spacing:.06em;border:1px solid rgba(245,158,11,.25);
  animation:pulse 2s infinite;white-space:nowrap
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}
.topbar-title{display:none}
.theme-btn{
  display:flex;align-items:center;gap:5px;
  padding:5px 10px;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:transparent;
  color:var(--text-3);font-size:11px;font-weight:600;cursor:pointer;
  transition:all var(--transition);white-space:nowrap
}
.theme-btn:hover{border-color:var(--blue);color:var(--blue)}
.nav-user{
  display:flex;align-items:center;gap:6px;
  padding:4px 8px;border-radius:var(--radius-sm)
}
.nav-avatar{
  width:28px;height:28px;border-radius:50%;
  background:linear-gradient(135deg,#EB7C05,#F9C338);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:800;flex-shrink:0
}
.nav-uname{font-size:12px;font-weight:600;color:var(--text)}
.signout-btn{
  display:flex;align-items:center;gap:5px;
  padding:5px 10px;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:transparent;
  color:var(--text-3);font-size:11px;font-weight:600;cursor:pointer;
  transition:all var(--transition);white-space:nowrap
}
.signout-btn:hover{border-color:var(--red);color:var(--red)}

/* ─── MAIN AREA ───────────────────────────────────────── */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.page-wrap{
  flex:1;display:flex;flex-direction:column;
  overflow:hidden;
  padding:10px 14px;
  scroll-behavior:smooth
}
.page-wrap::-webkit-scrollbar{width:4px}
.page-wrap::-webkit-scrollbar-track{background:transparent}
.page-wrap::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px}

/* Legacy topbar (hidden) */
.topbar{display:none}

/* ─── PAGES ───────────────────────────────────────────── */
.page{
  display:none;flex-direction:column;flex:1;
  gap:8px;overflow-y:auto;min-height:0;
  animation:pageIn .18s ease
}
.page.active{display:flex}
@keyframes pageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ─── SHARED COMPONENTS ───────────────────────────────── */
.card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:13px 15px;
  box-shadow:var(--shadow-sm)
}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.card-title{font-size:12px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:7px}
.icon-badge{
  width:24px;height:24px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0
}
.ib-blue{background:var(--blue-bg);color:var(--blue)}
.ib-green{background:var(--green-bg);color:var(--green)}
.ib-amber{background:var(--amber-bg);color:var(--amber)}
.ib-red{background:var(--red-bg);color:var(--red)}

/* Chip/badge */
.chip{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:700;letter-spacing:.02em}
.chip-green{background:var(--green-bg);color:var(--green)}
.chip-red{background:var(--red-bg);color:var(--red)}
.chip-amber{background:var(--amber-bg);color:var(--amber)}
.chip-blue{background:var(--blue-bg);color:var(--blue)}
.chip-grey{background:var(--surface-2);color:var(--text-2)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:7px 15px;border-radius:var(--radius-sm);
  font-size:12px;font-weight:600;cursor:pointer;
  border:none;transition:all var(--transition);
  letter-spacing:.01em;white-space:nowrap
}
.btn-primary{
  background:var(--blue);color:var(--surface);
  box-shadow:none
}
.btn-primary:hover{background:var(--blue-d)}
.btn-primary:disabled{opacity:.4;cursor:not-allowed}
.btn-outline{background:transparent;color:var(--blue);border:1.5px solid var(--blue)}
.btn-outline:hover{background:var(--blue-bg)}
.btn-ghost{
  background:transparent;color:var(--text-2);
  border:1px solid var(--border)
}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-bg)}

/* ─── HOME / PORTFOLIO PAGE ───────────────────────────── */

/* Portfolio page: hero fixed, holdings fills remaining */
#page-home{overflow:hidden}

.hero-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;flex-shrink:0}
.hero-card{
  background:var(--surface);
  border:1.5px solid var(--border);
  border-top:2.5px solid var(--border);   /* overridden per-card below */
  border-radius:var(--radius);padding:12px 16px;
  position:relative;
}
/* Each tile gets a distinct top accent so they all look symmetric and solid */
.hero-main {border-top-color:var(--blue)}
.hero-green{border-top-color:var(--green)}
.hero-amber{border-top-color:var(--amber)}
/* Remove old gradient pseudo-elements */
.hero-main::before,.hero-main::after,
.hero-green::after,.hero-amber::after{display:none}

.hero-label{
  font-size:10px;font-weight:700;
  color:var(--text-3);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px
}
.hero-value{
  font-size:22px;font-weight:800;letter-spacing:-.04em;
  line-height:1;color:var(--text)
}
.hero-main .hero-value{color:var(--text)}
.hero-sub{font-size:11px;margin-top:4px;color:var(--text-2);font-weight:500}

/* Holdings card fills remaining height */
#holdings-card{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}
#holdings-card .card-header{flex-shrink:0}
#holdings-scroll{flex:1;overflow-y:auto;overflow-x:auto;min-height:0}

/* Position table */
.pos-table{width:100%;border-collapse:collapse;font-size:12px}
.pos-table th{
  text-align:left;padding:7px 10px;color:var(--text-3);
  font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;border-bottom:1px solid var(--border);
  background:var(--surface-2);position:sticky;top:0;z-index:1
}
.pos-table td{padding:9px 10px;border-bottom:1px solid var(--border)}
.pos-table tr:last-child td{border-bottom:none}
.pos-table tbody tr{transition:background var(--transition)}
.pos-table tbody tr:hover td{background:var(--surface-2)}
.ticker-cell{font-weight:800;color:var(--text);font-size:12px;letter-spacing:.02em}

/* ─── RESEARCH PAGE ───────────────────────────────────── */
#page-research{overflow:hidden}
#research-results{
  flex:1;min-height:0;overflow:hidden;
  display:flex;flex-direction:column;gap:8px!important
}

.search-wrap{position:relative;flex-shrink:0}
.search-bar{
  display:flex;align-items:center;gap:0;
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:50px;padding:4px 4px 4px 16px;
  transition:border-color var(--transition),box-shadow var(--transition)
}
.search-bar:focus-within{
  border-color:var(--blue);
  box-shadow:0 0 0 3px var(--blue-bg)
}
.search-icon{margin-right:6px;opacity:.3;flex-shrink:0;display:flex;align-items:center}
.search-input{
  flex:1;background:transparent;border:none;color:var(--text);
  font-size:13px;font-weight:500;outline:none
}
.search-btn{
  background:var(--blue);color:var(--surface);
  border:none;border-radius:40px;padding:8px 20px;
  font-size:12px;font-weight:700;cursor:pointer;
  transition:all var(--transition)
}
.search-btn:hover{background:var(--blue-d)}

/* Ticker autocomplete */
.ticker-dropdown{
  position:absolute;top:calc(100% + 5px);left:0;right:0;
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:10px;box-shadow:0 6px 24px rgba(16,24,40,.1);
  overflow:hidden;z-index:200;max-height:260px;overflow-y:auto
}
.ticker-item{display:flex;align-items:center;gap:10px;padding:8px 14px;cursor:pointer;transition:background var(--transition)}
.ticker-item:hover,.ticker-item.active{background:var(--surface-2)}
.ticker-sym{font-weight:800;font-size:12px;color:var(--text);min-width:48px}
.ticker-name{font-size:12px;color:var(--text);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ticker-exch{font-size:10px;color:var(--text-3);padding:1px 6px;border-radius:4px;background:var(--bg);white-space:nowrap}
.ticker-type{font-size:10px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.04em;min-width:30px}

/* Company header card — fixed height */
#research-results > .card{flex-shrink:0}

/* ── Score Strip — compact horizontal ── */
.score-grid{
  display:flex;gap:0;
  border:1px solid var(--border);border-radius:var(--radius-sm);
  /* overflow:visible so ::after badge tooltips are not clipped */
  overflow:visible;margin-top:10px
}
.score-card{
  flex:1;padding:9px 11px;
  border:none;border-right:1px solid var(--border);
  background:var(--surface);border-radius:0;
  transition:background var(--transition)
}
.score-card:hover{background:var(--surface-2);box-shadow:none}
/* Restore rounded corners on first/last cells (no longer provided by overflow:hidden) */
.score-card:first-child{border-radius:var(--radius-sm) 0 0 var(--radius-sm)}
/* Override old sc-clean which set !important rules */
.sc-clean{background:var(--surface)!important;border:none!important}
.sc-excel,.sc-poor,.sc-neutral,.sc-med{}

/* Score strip internals */
.sc-label{
  font-size:9px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--text-3);margin-bottom:3px
}
.sc-number{
  font-size:22px;font-weight:800;letter-spacing:-.04em;
  line-height:1;margin-bottom:2px;color:var(--text)
}
.sc-trend-val{
  font-size:14px;font-weight:700;letter-spacing:-.01em;
  margin:3px 0 2px;color:var(--text)
}
.sc-sub{font-size:9px;color:var(--text-3);margin-bottom:5px;font-weight:500;line-height:1.4}
.sc-bar-wrap{height:2px;background:var(--border);border-radius:1px;overflow:hidden}
.sc-bar-fill{height:100%;border-radius:1px;transition:width .7s cubic-bezier(.4,0,.2,1)}
.score-icon{display:none}

/* Signal tile (last in strip) */
.score-signal{
  flex:1.3;padding:9px 12px;
  border:none;border-left:2px solid var(--border);
  background:var(--surface-2);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  display:flex;flex-direction:column;justify-content:center;
  transition:all var(--transition)
}
.signal-icon{display:none}
.signal-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3)}
.signal-value{font-size:12px;font-weight:800;margin:3px 0 1px}
.signal-total{font-size:20px;font-weight:800;letter-spacing:-.03em}

/* Data age badge */
#data-age{font-size:10px;color:var(--text-3);font-weight:500;margin-top:4px;display:none}

/* Company header */
.company-row{display:flex;align-items:center;gap:12px}
.co-logo{
  width:38px;height:38px;border-radius:9px;
  background:var(--blue-bg);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0
}
.co-name{font-size:17px;font-weight:800;letter-spacing:-.03em}
.co-sub{font-size:12px;color:var(--text-2);margin-top:2px;display:flex;align-items:center;gap:6px}
.co-tag{background:var(--surface-2);color:var(--text-2);padding:1px 7px;border-radius:20px;font-size:10px;font-weight:600;border:1px solid var(--border)}
.price-right{margin-left:auto;text-align:right}
.price-big{font-size:24px;font-weight:800;letter-spacing:-.03em}
.price-chg{font-size:12px;font-weight:600;margin-top:2px}
.ma-pill{
  display:inline-flex;align-items:center;gap:4px;
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:20px;padding:4px 10px;font-size:11px;color:var(--text-2)
}

/* Research columns — fill remaining height */
.r-cols{
  flex:1;display:grid;grid-template-columns:1fr 1fr;
  gap:8px;overflow:hidden;min-height:0
}
.col{display:flex;flex-direction:column;gap:8px;overflow-y:auto;min-height:0}
.col::-webkit-scrollbar{width:3px}
.col::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}

.metrics-t{width:100%;border-collapse:collapse;font-size:12px}
.metrics-t tr{border-bottom:1px solid var(--border)}
.metrics-t tr:last-child{border-bottom:none}
.metrics-t tr:hover td{background:var(--surface-2)}
.metrics-t td{padding:6px 4px}
.metrics-t td:first-child{color:var(--text-2);font-size:11px;font-weight:500}
.metrics-t td:last-child{font-weight:700;text-align:right}
.section-head{
  font-size:9px;font-weight:700;color:var(--text-3);
  text-transform:uppercase;letter-spacing:.1em;
  padding:8px 0 3px;display:flex;align-items:center;gap:6px
}
.section-head::after{content:'';flex:1;height:1px;background:var(--border)}

/* Fibonacci */
.fib-t{width:100%;border-collapse:collapse;font-size:12px}
.fib-t th{text-align:left;padding:6px;color:var(--text-2);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--border)}
.fib-t td{padding:6px;border-bottom:1px solid var(--border)}
.fib-t tr:last-child td{border-bottom:none}
.fib-t tr.golden{background:linear-gradient(90deg,var(--gold-bg),transparent)}
.fib-t tr.golden td{color:var(--gold);font-weight:700}
.fib-status{margin-top:8px;padding:8px 12px;border-radius:var(--radius-sm);font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px}

/* RSI */
.rsi-btns{display:flex;gap:4px;margin-bottom:10px}
.rsi-btn{
  padding:4px 11px;border-radius:20px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--text-2);font-size:11px;font-weight:600;
  cursor:pointer;transition:all var(--transition)
}
.rsi-btn:hover{border-color:var(--blue);color:var(--blue)}
.rsi-btn.active{background:var(--blue-bg);color:var(--blue);border-color:var(--blue)}
.rsi-big{font-size:32px;font-weight:800;letter-spacing:-.04em;line-height:1}
.rsi-lbl{font-size:11px;color:var(--text-2);margin-top:3px;font-weight:500}
.rsi-bar{height:5px;background:var(--surface-2);border-radius:3px;margin:8px 0 3px;overflow:hidden;border:1px solid var(--border)}
.rsi-fill{height:100%;border-radius:3px;transition:all .4s cubic-bezier(.4,0,.2,1)}
.rsi-scale{display:flex;justify-content:space-between;font-size:9px;color:var(--text-3);margin-bottom:10px;font-weight:600}
.rsi-rows{display:flex;flex-direction:column;gap:3px}
.rsi-row{
  display:flex;align-items:center;gap:8px;padding:6px 8px;
  border-radius:var(--radius-sm);font-size:12px;
  border:1px solid transparent;cursor:pointer;transition:all var(--transition)
}
.rsi-row:hover{background:var(--surface-2)}
.rsi-row.sel{background:var(--blue-bg);border-color:var(--border)}
.rsi-tf{width:26px;color:var(--text-2);font-weight:700;font-size:10px}
.rsi-v{min-width:34px;font-weight:800;font-size:14px}
.rsi-sig{font-size:11px;color:var(--text-2)}

/* News */
.news-item{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);cursor:pointer;transition:all var(--transition)}
.news-item:last-child{border-bottom:none}
.news-item:hover{padding-left:4px}
.news-text-wrap{flex:1}
.news-headline{font-size:12px;line-height:1.5;font-weight:500}
.news-src{font-size:10px;color:var(--text-3);margin-top:2px}

/* ─── ADVISOR PAGE ────────────────────────────────────── */
.ks-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:8px}
.ks-card{
  border-radius:var(--radius);padding:12px 14px;
  border:1px solid var(--border);background:var(--surface);
}
.ks-label{font-size:9px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:4px}
.ks-value{font-size:18px;font-weight:800;letter-spacing:-.02em}

/* Fib context */
.fib-ctx{
  background:var(--surface);border:1px solid var(--border);
  border-left:3px solid var(--gold);
  border-radius:var(--radius);padding:12px 14px
}
.fib-ctx-title{font-size:10px;font-weight:800;color:var(--gold);text-transform:uppercase;letter-spacing:.07em;margin-bottom:8px;display:flex;align-items:center;gap:5px}
.fib-ctx-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;padding:5px 0;border-bottom:1px solid var(--border)}
.fib-ctx-row:last-child{border-bottom:none}

/* Advisory Brief */
.brief-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden
}
.brief-banner{
  background:var(--blue);
  padding:10px 16px;
  display:flex;align-items:center;justify-content:space-between
}
.brief-banner-left{font-size:10px;font-weight:800;color:var(--surface);letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.brief-banner-date{font-size:11px;color:var(--surface);font-weight:500;opacity:.7}
.brief-body{padding:16px}
.brief-action{font-size:15px;font-weight:800;letter-spacing:-.02em;color:var(--text);margin-bottom:10px;line-height:1.35}
.brief-para{font-size:13px;line-height:1.7;color:var(--text);margin-bottom:10px}
.brief-actions{display:flex;gap:8px;padding:0 16px 14px}

/* Save form */
.save-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}

/* ─── JOURNAL ─────────────────────────────────────────── */
.jo-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;flex-shrink:0}
.jo-stat{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:10px 12px;
  text-align:center
}
.jo-stat-val{font-size:20px;font-weight:800;letter-spacing:-.04em;margin-bottom:2px}
.jo-stat-lbl{font-size:10px;color:var(--text-2);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.journal-table{width:100%;border-collapse:collapse;font-size:12px}
.journal-table th{
  text-align:left;padding:7px 12px;color:var(--text-3);
  font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;border-bottom:1px solid var(--border);
  background:var(--surface-2);position:sticky;top:0;z-index:1
}
.journal-table td{padding:9px 12px;border-bottom:1px solid var(--border)}
.journal-table tr:last-child td{border-bottom:none}
.journal-table tbody tr{transition:all var(--transition)}
.journal-table tbody tr:hover td{background:var(--surface-2)}
.journal-table .profit td{border-left:3px solid var(--green)}
.journal-table .loss td{border-left:3px solid var(--red)}
.journal-table .watch td{border-left:3px solid var(--border)}

/* Journal page layout */
#page-journal{overflow:hidden}
#journal-card{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}
#journal-scroll{flex:1;overflow-y:auto;overflow-x:auto;min-height:0}

/* ─── SETTINGS ────────────────────────────────────────── */
.settings-tabs{display:flex;gap:5px;margin-bottom:10px;flex-wrap:wrap;flex-shrink:0}
.toggle-switch{position:relative;display:inline-block;width:40px;height:22px;flex-shrink:0}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;cursor:pointer;inset:0;background:var(--border);border-radius:22px;transition:.3s}
.toggle-slider:before{content:"";position:absolute;width:16px;height:16px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.3s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.toggle-switch input:checked+.toggle-slider{background:var(--green)}
.toggle-switch input:checked+.toggle-slider:before{transform:translateX(18px)}
.stab-btn{
  padding:5px 14px;border-radius:20px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--text-2);font-size:11px;
  font-weight:600;cursor:pointer;transition:all var(--transition)
}
.stab-btn.active{background:var(--blue-bg);color:var(--blue);border-color:var(--blue)}
.stab-panel{display:none}
.stab-panel.active{display:block}
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.sf{display:flex;flex-direction:column;gap:5px}
.sf-label{
  font-size:10px;font-weight:700;color:var(--text-2);
  text-transform:uppercase;letter-spacing:.04em;
  display:flex;align-items:center;justify-content:space-between
}
.sf-label a{font-size:10px;color:var(--blue);text-decoration:none;font-weight:600;text-transform:none;letter-spacing:0}
.sf-label a:hover{text-decoration:underline}
.sf-input{
  background:var(--surface-2);border:1.5px solid var(--border);
  border-radius:var(--radius-sm);color:var(--text);padding:8px 11px;
  font-size:12px;font-weight:500;outline:none;
  transition:all var(--transition);width:100%
}
.sf-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-bg);background:var(--surface)}
.sf-help{font-size:10px;color:var(--text-3)}
.cost-card{
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius);padding:12px 14px;margin-bottom:12px
}
.cost-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;padding:5px 0;border-bottom:1px solid var(--border)}
.cost-row:last-child{border-bottom:none}
.cost-val{font-weight:700;color:var(--blue)}

/* ─── AI QUICK BUTTON ─────────────────────────────────── */
.ai-quick-btn{
  background:var(--blue);color:var(--surface);
  border:none;border-radius:20px;padding:4px 10px;font-size:11px;
  font-weight:700;cursor:pointer;display:inline-flex;align-items:center;
  gap:3px;transition:all var(--transition);white-space:nowrap
}
.ai-quick-btn:hover{background:var(--blue-d)}

/* ─── MODAL ───────────────────────────────────────────── */
.modal-overlay{
  position:fixed;inset:0;background:rgba(16,24,40,.4);
  backdrop-filter:blur(4px);z-index:150;display:flex;
  align-items:center;justify-content:center;animation:fadeIn .12s ease
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-card{
  background:var(--surface);border-radius:14px;width:470px;
  max-height:85vh;overflow-y:auto;
  box-shadow:0 20px 50px rgba(16,24,40,.2),0 3px 12px rgba(16,24,40,.08);
  animation:slideUp .18s ease
}
@keyframes slideUp{from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal-banner{
  background:var(--blue);
  padding:12px 16px;border-radius:14px 14px 0 0;
  display:flex;align-items:center;justify-content:space-between
}
.modal-banner-title{color:var(--surface);font-weight:700;font-size:12px;display:flex;align-items:center;gap:6px}
.modal-close{
  background:rgba(128,128,128,.2);border:none;color:var(--surface);
  width:24px;height:24px;border-radius:50%;cursor:pointer;
  font-size:12px;display:flex;align-items:center;justify-content:center;
  transition:background var(--transition)
}
.modal-close:hover{background:rgba(128,128,128,.35)}
.modal-body{padding:16px}
.modal-scores{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:12px}
.mscore{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px}
.mscore-lbl{font-size:9px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:2px}
.mscore-val{font-size:20px;font-weight:800;letter-spacing:-.02em}
.modal-advice{
  background:var(--surface-2);border:1px solid var(--border);
  border-left:3px solid var(--text-3);border-radius:var(--radius-sm);
  padding:12px 14px;font-size:12px;line-height:1.7;margin-bottom:12px;color:var(--text)
}
.modal-fibnote{
  background:var(--surface-2);border-left:2px solid var(--amber);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:8px 12px;font-size:11px;color:var(--text-2);
  font-weight:600;margin-bottom:12px
}
.modal-actions{display:flex;gap:7px}

/* ─── DISCOVER PAGE ───────────────────────────────────── */
/* Flat compact header — no gradient */
.disc-header{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:12px 16px;
  flex-shrink:0
}
.disc-title{font-size:15px;font-weight:800;letter-spacing:-.02em;color:var(--text)}
.disc-sub{font-size:11px;color:var(--text-2);margin-top:2px;font-weight:500}
.disc-meta{font-size:11px;color:var(--text-2);margin-top:4px}
/* 3-column grid for more density */
.disc-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:8px;overflow-y:auto;flex:1;align-content:start
}
.disc-grid::-webkit-scrollbar{width:3px}
.disc-grid::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
.disc-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;
  transition:box-shadow var(--transition)
}
.disc-card:hover{box-shadow:var(--shadow)}
.disc-card-top{padding:12px 14px 10px;border-bottom:1px solid var(--border)}
.disc-card-logo{
  width:30px;height:30px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:8px
}
.disc-ticker{font-size:15px;font-weight:800;letter-spacing:-.02em}
.disc-co{font-size:11px;color:var(--text-2);margin-top:1px;font-weight:500}
.disc-card-body{padding:9px 14px}
.disc-reason{font-size:11px;line-height:1.55;color:var(--text-2);margin-bottom:8px}
.disc-scores-row{display:flex;gap:4px;margin-bottom:8px;flex-wrap:wrap}
.disc-score-pill{padding:2px 7px;border-radius:20px;font-size:10px;font-weight:700}
.disc-actions{display:flex;gap:5px;flex-wrap:wrap}
.disc-why{font-size:9px;font-weight:800;color:var(--text-3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:3px}

/* Discover page layout */
#page-discover{overflow:hidden}

/* ─── DISCOVER ROW LIST ────────────────────────────────── */
/* Column header bar */
.disc-list-header{
  display:grid;
  grid-template-columns:32px 1fr 100px 70px 200px 68px 90px 110px;
  gap:0 10px;
  align-items:center;
  padding:6px 14px;
  border-bottom:1px solid var(--border);
  font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--text-3)
}
/* Individual row */
.disc-row{
  display:grid;
  grid-template-columns:32px 1fr 100px 70px 200px 68px 90px 110px;
  gap:0 10px;
  align-items:center;
  padding:9px 14px;
  border-bottom:1px solid var(--border);
  background:var(--surface);
  transition:background var(--transition)
}
.disc-row:last-of-type{border-bottom:none}
.disc-row:hover{background:var(--surface-2)}
/* Rank number */
.disc-rank{font-size:13px;font-weight:800;text-align:center}
/* Ticker + company */
.disc-stock{min-width:0}
.disc-sym{font-size:13px;font-weight:800;letter-spacing:-.02em;display:block}
.disc-name{font-size:11px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Sector tag */
.disc-sector-tag{
  font-size:10px;font-weight:600;color:var(--text-2);
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:4px;padding:2px 6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:inline-block
}
/* Live price */
.disc-price{font-size:12px;font-weight:700;color:var(--text);font-family:monospace;letter-spacing:-.01em}
.dlh-price{text-align:left}
/* Score chips row */
.disc-sc-chips{display:flex;gap:4px;flex-wrap:nowrap}
.disc-sc{
  font-size:10px;font-weight:700;
  padding:2px 6px;border-radius:4px
}
/* Total score */
.disc-total-score{font-size:12px;text-align:right;white-space:nowrap}
.disc-total-score strong{font-size:14px;font-weight:800}
.disc-total-score span{font-size:10px;color:var(--text-3)}
/* Signal cell */
.disc-signal-cell{text-align:center}
/* Action icons */
.disc-row-actions{display:flex;gap:4px;align-items:center;justify-content:flex-end}
.disc-icon-btn{
  width:28px;height:28px;
  border:1px solid var(--border);
  border-radius:6px;
  background:transparent;
  color:var(--text-2);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--transition);
  flex-shrink:0;
  position:relative
}
.disc-icon-btn:hover{
  background:var(--blue-bg);
  color:var(--text);
  border-color:var(--text-3)
}
.disc-icon-btn.active{
  background:var(--blue);
  color:var(--surface);
  border-color:var(--blue)
}
.disc-icon-btn.dim{opacity:.35;pointer-events:none}
/* Tooltip via title attr is built-in; enhance with CSS ::after */
.disc-icon-btn[title]:hover::after{
  content:attr(title);
  position:absolute;bottom:calc(100% + 5px);left:50%;
  transform:translateX(-50%);
  background:#1e293b;color:#e2e8f0;
  padding:4px 8px;border-radius:5px;
  font-size:10px;font-weight:500;white-space:nowrap;
  pointer-events:none;z-index:9999
}
/* Expandable AI reason row */
.disc-reason-row{
  display:none;
  gap:8px;align-items:flex-start;
  padding:8px 14px 10px 56px;   /* indent past rank + stock cols */
  font-size:11px;line-height:1.6;color:var(--text-2);
  background:var(--surface-2);border-bottom:1px solid var(--border)
}
.disc-reason-row.open{display:flex}

/* ─── DATA SOURCE BADGES ───────────────────────────────── */
.src-badge{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:700;
  padding:1px 5px;border-radius:3px;
  margin-left:5px;cursor:help;
  position:relative;vertical-align:middle;
  line-height:1.5;letter-spacing:.02em
}
/* Type colours */
.src-yf  {background:rgba(59,130,246,.13);color:#3b82f6}
.src-calc{background:rgba(139,92,246,.13);color:#8b5cf6}
.src-fh  {background:rgba(245,158,11,.13);color:#d97706}
.src-ai  {background:rgba(16,185,129,.13);color:#10b981}
/* Tooltip */
.src-badge::after{
  content:attr(data-tip);
  position:absolute;
  bottom:calc(100% + 6px);
  left:50%;
  transform:translateX(-50%);
  background:#1e293b;color:#e2e8f0;
  padding:6px 10px;border-radius:6px;
  font-size:11px;font-weight:400;
  opacity:0;pointer-events:none;
  transition:opacity .15s;
  z-index:9999;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
  width:max-content;max-width:280px;
  white-space:normal;text-align:left;
  line-height:1.5
}
.src-badge:hover::after{opacity:1}

/* ─── TERMINOLOGY TOOLTIP ICON ─────────────────────────── */
/* Always-visible ℹ icon explaining any term. Independent of source badges. */
.tip-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;
  border:1.5px solid var(--text-3);border-radius:50%;
  font-size:9px;font-weight:800;font-style:normal;
  color:var(--text-3);cursor:help;
  margin-left:5px;vertical-align:middle;
  position:relative;flex-shrink:0;line-height:1;
  transition:border-color var(--transition),color var(--transition)
}
.tip-icon:hover{border-color:var(--blue);color:var(--blue)}
/* Tooltip rendered by JS global tooltip (#global-tooltip) so it bypasses
   any ancestor overflow:hidden. The ::after approach is disabled. */
.tip-icon::after{display:none}
/* ─── GLOBAL JS TOOLTIP ─────────────────────────────────── */
#global-tooltip{
  display:none;position:fixed;z-index:9999;
  background:#1e293b;color:#e2e8f0;
  padding:7px 11px;border-radius:6px;
  font-size:11px;font-weight:400;line-height:1.55;
  box-shadow:0 4px 14px rgba(0,0,0,.28);
  max-width:300px;white-space:normal;word-wrap:break-word;
  text-align:left;pointer-events:none;
  transition:opacity .12s;opacity:0
}
#global-tooltip.visible{display:block;opacity:1}

/* ─── ABOUT PAGE ──────────────────────────────────────── */
.about-hero{
  background:linear-gradient(135deg,#16161A 0%,#0D0F14 100%);
  border-radius:var(--radius);padding:20px 24px;color:#fff;
  flex-shrink:0
}
.about-hero::before,.about-hero::after{display:none}
.about-hero-title{font-size:17px;font-weight:800;letter-spacing:-.03em;margin-bottom:4px}
.about-hero-sub{font-size:12px;opacity:.65;line-height:1.6;max-width:480px}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.about-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px;overflow-y:auto}
.about-section-title{font-size:12px;font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:7px}
.formula-block{
  background:var(--surface-2);border:1px solid var(--border);
  border-left:2px solid var(--text-3);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:8px 12px;font-family:'Roboto Mono','Courier New',monospace;
  font-size:11px;line-height:1.6;margin-bottom:8px;color:var(--text)
}
.about-rule{display:flex;align-items:flex-start;gap:8px;padding:6px 0;border-bottom:1px solid var(--border);font-size:12px}
.about-rule:last-child{border-bottom:none}
.about-rule-icon{font-size:13px;flex-shrink:0;margin-top:1px}
.sl-row{display:flex;align-items:center;gap:8px;font-size:12px;padding:6px 8px;border-radius:var(--radius-sm);border:1px solid var(--border);margin-bottom:5px}
.sl-badge{font-size:9px;font-weight:800;padding:2px 8px;border-radius:20px;width:80px;text-align:center;flex-shrink:0}

/* ─── SIGNAL INFO BUTTON ──────────────────────────────── */
/* Clean SVG-based ⓘ button — no text character */
.sig-info-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;
  border:none;background:transparent;
  color:var(--text-3);
  cursor:pointer;padding:0;flex-shrink:0;
  transition:color var(--transition),background var(--transition);
  vertical-align:middle
}
.sig-info-btn svg{width:15px;height:15px;pointer-events:none}
.sig-info-btn:hover{color:var(--blue);background:var(--blue-bg);border-radius:50%}

/* ─── SIGNAL SCANNING ANIMATION ──────────────────────── */
@keyframes sig-scan{to{stroke-dashoffset:0}}
@keyframes sig-spin{to{transform:rotate(360deg)}}
.sig-scanning{
  display:inline-flex;align-items:center;gap:5px;
  font-size:10px;color:var(--text-3)
}
.sig-scanning::before{
  content:'';display:inline-block;
  width:13px;height:13px;border-radius:50%;
  border:2px solid var(--border);
  border-top-color:var(--blue);
  animation:sig-spin .75s linear infinite;
  flex-shrink:0
}

/* ─── BUTTON SPINNER ─────────────────────────────────── */
.btn-spinner{
  display:inline-block;width:11px;height:11px;
  border:2px solid rgba(0,0,0,.12);
  border-top-color:currentColor;
  border-right-color:currentColor;
  border-radius:50%;animation:sig-spin .6s linear infinite;
  vertical-align:middle;margin-right:4px
}

/* ─── ADVICE DISCLAIMER ───────────────────────────────── */
.advice-disclaimer{
  margin-top:12px;padding:9px 12px;
  border-top:1px solid var(--border);
  font-size:10px;line-height:1.6;
  color:var(--text-3);font-style:italic
}
.advice-disclaimer strong{color:var(--text-2);font-style:normal}

/* ─── UTILITY ─────────────────────────────────────────── */
.pos{color:var(--green)}.neg{color:var(--red)}
.flex-row{display:flex;align-items:center;gap:10px}
select.sf-input{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235A6478' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat:no-repeat;background-position:right 10px center;background-size:12px;padding-right:30px
}
.select-pill{
  appearance:none;-webkit-appearance:none;
  background:var(--surface);border:1px solid var(--border);
  border-radius:20px;color:var(--text);
  padding:4px 22px 4px 10px;
  font-size:11px;font-weight:600;cursor:pointer;outline:none;
  transition:all var(--transition);
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235A6478' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat:no-repeat;background-position:right 8px center;background-size:10px
}
.select-pill:focus,.select-pill:hover{border-color:var(--blue);color:var(--blue);outline:none}
[data-theme="dark"] .select-pill{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239CA3AF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e")
}

/* Deprecated score classes — keep stubs to avoid JS errors */
.score-lbl,.score-num,.score-sub,.score-bar,.score-fill{}
@keyframes barFill{from{width:0}to{width:var(--w)}}

/* ══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE  (≤ 640px)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* Dynamic viewport height handles iOS address-bar shrink */
  body { height: 100dvh; }

  /* ── Auth ──────────────────────────────────────────────── */
  .login-wrap { padding: 20px 16px; gap: 14px; }
  .login-card { width: calc(100vw - 32px); max-width: 420px; padding: 22px 18px; }
  .login-headline { font-size: 22px; }

  /* ── Topnav: icon-only tabs, stripped right section ─────── */
  .topnav { padding: 0 8px; }
  .brand-name { display: none; }
  .topnav-brand { padding-right: 8px; border-right: none; }
  .nav-label { display: none; }
  .nav-item { padding: 0 9px; }
  #topbar-clock { display: none; }
  .demo-badge { display: none; }
  /* Show only the SVG icon in theme + signout btns — clip the text */
  .theme-btn { width: 28px; padding: 5px 7px; overflow: hidden; }
  .signout-btn { width: 28px; padding: 5px 7px; overflow: hidden; }
  .nav-uname { display: none; }
  .topnav-right { gap: 4px; padding-left: 8px; }

  /* ── Page content area ─────────────────────────────────── */
  .page-wrap { padding: 8px 10px; }

  /* ── Home: 2-col hero, let page scroll ─────────────────── */
  #page-home { overflow-y: auto; }
  .hero-row { grid-template-columns: 1fr 1fr; }
  #holdings-card { flex: none; }
  #holdings-scroll { max-height: 55vh; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pos-table { min-width: 520px; }

  /* ── Research: stack to single column ──────────────────── */
  #page-research { overflow-y: auto; }
  #research-results { overflow: visible; min-height: unset; }
  .r-cols { grid-template-columns: 1fr; overflow: visible; min-height: unset; }
  .col { overflow-y: visible; min-height: unset; }

  /* Score strip wraps to 2×2 + full-width signal */
  .score-grid { flex-wrap: wrap; }
  .score-card { flex: 1 1 calc(50% - 1px); }
  .score-signal { flex: 1 1 100%; border-left: none; border-top: 2px solid var(--border); }

  /* ── Advisor: 2-col score tiles, single-col save form ──── */
  .ks-grid { grid-template-columns: 1fr 1fr; }
  .save-form-grid { grid-template-columns: 1fr; }

  /* ── Discover: single column ──────────────────────────── */
  #page-discover { overflow-y: auto; }
  .disc-grid { grid-template-columns: 1fr; }

  /* ── Journal: 3-col stats, let page scroll ─────────────── */
  #page-journal { overflow-y: auto; }
  #journal-card { flex: none; }
  #journal-scroll { max-height: 60vh; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .journal-table { min-width: 660px; }
  .jo-stats { grid-template-columns: repeat(3, 1fr); }

  /* ── About: stack to single column ─────────────────────── */
  .about-grid { grid-template-columns: 1fr; }

  /* ── Settings: single column ───────────────────────────── */
  .settings-grid { grid-template-columns: 1fr; }

  /* ── Modal: full-width sheet slides up from bottom ──────── */
  .modal-overlay { align-items: flex-end; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .modal-card {
    width: 100%;
    margin: 0;
    max-height: 92dvh;
    border-radius: 20px 20px 0 0;
  }
  .modal-banner { border-radius: 20px 20px 0 0; }
  .modal-scores { grid-template-columns: 1fr 1fr; }
}

/* Very small phones (≤ 380px) */
@media (max-width: 380px) {
  .hero-row { grid-template-columns: 1fr; }
  .jo-stats { grid-template-columns: 1fr 1fr; }
  .nav-item { padding: 0 6px; }
}