/* Market Radar — dark + light fintech theme */
:root{
  --bg:#0b0e14; --ink:#e7ecf5; --muted:#8b93a7;
  --card:#161a24; --panel:#1c2130; --hover:#252b3d;
  --line:rgba(139,147,167,0.16);
  --up:#2ec38a; --down:#ff5c6c; --eye:#f5b544;
}
/* light theme: soft light-gray, not pure white */
.app.light{
  --bg:#eceef2; --ink:#1b2130; --muted:#5b6472;
  --card:#f7f8fb; --panel:#ffffff; --hover:#eef1f6;
  --line:rgba(20,24,40,0.10);
}
*{box-sizing:border-box;}
html,body{margin:0;background:var(--bg);}
.app{min-height:100vh;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  max-width:1180px;margin:0 auto;padding:18px 22px 60px;transition:background .2s,color .2s;}

/* header — brand left, all controls on one line right */
.header{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid var(--line);}
.brand{flex:0 0 auto;display:flex;align-items:center;gap:8px;font-size:1.4rem;
  font-weight:800;letter-spacing:-0.02em;}
.brand-mark{color:var(--up);}
.brand-1{color:var(--ink);}
.brand-2{color:var(--muted);font-weight:600;}
.controls{flex:1 1 540px;display:flex;align-items:center;gap:8px;
  flex-wrap:nowrap;justify-content:flex-end;}
.dd{flex:0 1 168px;min-width:0;}
.dd-sm{flex:0 1 118px;min-width:0;}
.search{flex:1 1 130px;min-width:80px;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;color:var(--ink);padding:9px 12px;font-size:0.9rem;outline:none;}
.search::placeholder{color:var(--muted);}

/* theme toggle — visible radio buttons */
.theme-toggle{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:0 2px;}
.theme-toggle label{display:flex;align-items:center;gap:5px;cursor:pointer;
  color:var(--muted);font-size:0.82rem;white-space:nowrap;}
.theme-toggle input[type="radio"]{appearance:auto;-webkit-appearance:auto;
  accent-color:var(--up);width:14px;height:14px;margin:0;}
.theme-toggle label:has(input:checked){color:var(--ink);font-weight:600;}

/* share (copy to clipboard) button */
.share-wrap{flex:0 0 auto;display:flex;align-items:center;}
.share-btn{color:var(--eye)!important;background:rgba(245,181,68,0.12);border:1px solid var(--eye);
  border-radius:10px;padding:8px;width:36px;height:36px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;}
.share-btn:hover{background:rgba(245,181,68,0.22);}

/* disclaimer banner */
.disclaimer{background:rgba(245,181,68,0.10);border:1px solid rgba(245,181,68,0.30);
  color:var(--ink);font-size:0.78rem;border-radius:10px;padding:8px 12px;margin-bottom:14px;}

/* ---- Dropdown (Dash 4 native, --Dash-* tokens): dark trigger ----
   The open menu uses Dash's own (readable) styling; we only darken the
   closed trigger so it matches the app instead of showing white-on-white. */
.app .dash-dropdown,.app .dash-dropdown-trigger{
  background:var(--panel)!important;border-color:var(--line)!important;}
.app .dash-dropdown{border:1px solid var(--line)!important;border-radius:10px!important;}
.app .dash-dropdown-value,.app .dash-dropdown-value-item,
.app .dash-dropdown-value-count,.app .dash-dropdown-trigger-icon{
  color:var(--ink)!important;fill:var(--ink)!important;}
.app .dash-dropdown-placeholder{color:var(--muted)!important;}

/* pulse KPIs */
.pulse{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:16px;}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px 15px;}
.kpi-label{color:var(--muted);font-size:0.7rem;text-transform:uppercase;letter-spacing:0.05em;}
.kpi-value{color:var(--ink);font-size:1.45rem;font-weight:750;margin-top:4px;font-variant-numeric:tabular-nums;}
.kpi-sub{color:var(--muted);font-size:0.76rem;margin-top:2px;}

/* movers */
.movers{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px;}
.mover-col{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 14px;}
.mover-title{font-size:0.78rem;font-weight:700;letter-spacing:0.04em;margin-bottom:6px;}
.mover-title.up{color:var(--up);}
.mover-title.down{color:var(--down);}
.mover{display:flex;align-items:center;gap:10px;padding:6px;border-radius:8px;cursor:pointer;}
.mover:hover{background:var(--hover);}
.mover-tkr{font-weight:700;min-width:92px;color:var(--ink);}
.mover-name{color:var(--muted);font-size:0.85rem;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mover-pct{font-weight:700;font-variant-numeric:tabular-nums;}

/* grid — two graphs per row */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:14px 16px 12px;cursor:pointer;position:relative;
  transition:transform .12s ease,border-color .12s ease;}
.card:hover{transform:translateY(-2px);border-color:var(--muted);}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;}
.card-ticker{font-weight:800;font-size:1.05rem;letter-spacing:-0.01em;color:var(--ink);}
.card-name{color:var(--muted);font-size:0.82rem;margin-top:1px;}
.card-price-wrap{text-align:right;}
.card-price{font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink);}
.pill{display:inline-block;margin-top:4px;padding:2px 8px;border-radius:999px;
  font-size:0.78rem;font-weight:700;font-variant-numeric:tabular-nums;}
.card-sector{color:var(--muted);font-size:0.72rem;margin:6px 0 2px;text-transform:uppercase;letter-spacing:0.04em;}
.card-spark .js-plotly-plot{width:100%;}
.card-rets{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:6px;
  border-top:1px solid var(--line);padding-top:8px;}
.mini{text-align:center;}
.mini-label{color:var(--muted);font-size:0.66rem;letter-spacing:0.03em;}
.mini-val{font-size:0.82rem;font-weight:700;font-variant-numeric:tabular-nums;}
.empty{color:var(--muted);padding:40px;text-align:center;grid-column:1/-1;}

/* 👁 watch highlight (buy-the-dip) — amber glow + eye badge */
.card.watch{border-color:var(--eye);animation:glow-eye 2.4s ease-in-out infinite;}
.eye-badge{position:absolute;top:-9px;right:12px;font-size:0.64rem;font-weight:800;
  letter-spacing:0.05em;padding:2px 9px;border-radius:999px;background:var(--panel);
  border:1px solid var(--eye);color:var(--eye);}
@keyframes glow-eye{
  0%,100%{box-shadow:0 0 0 1px rgba(245,181,68,0.40),0 0 14px rgba(245,181,68,0.18);}
  50%{box-shadow:0 0 0 1px rgba(245,181,68,0.85),0 0 26px rgba(245,181,68,0.42);}
}

/* country separators (Eyed view) */
.section-head{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;
  margin:10px 2px 0;padding:8px 4px 6px;border-bottom:1px solid var(--line);}
.sh-name{font-size:1.05rem;font-weight:800;color:var(--ink);}
.sh-count{font-size:0.72rem;font-weight:700;color:var(--eye);text-transform:uppercase;letter-spacing:0.05em;
  border:1px solid var(--eye);border-radius:999px;padding:2px 9px;}

/* overlay / modal */
.overlay{position:fixed;inset:0;background:rgba(5,7,11,0.66);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;z-index:50;padding:20px;}
.overlay.hidden{display:none;}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:18px;
  width:min(760px,96vw);max-height:92vh;overflow:auto;padding:18px 20px;
  box-shadow:0 30px 80px rgba(0,0,0,0.45);}
.modal-head{display:flex;justify-content:space-between;align-items:center;}
.modal-title{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.mt-tkr{font-size:1.4rem;font-weight:800;color:var(--ink);}
.mt-name{color:var(--ink);font-size:0.95rem;}
.mt-sector{color:var(--muted);font-size:0.75rem;text-transform:uppercase;letter-spacing:0.05em;}
.close-btn{background:transparent;border:1px solid var(--line);color:var(--muted);
  border-radius:10px;width:34px;height:34px;font-size:1rem;cursor:pointer;}
.close-btn:hover{color:var(--ink);border-color:var(--muted);}
.modal-kpis{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin:14px 0;}
.mk{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px;text-align:center;}
.mk-l{color:var(--muted);font-size:0.66rem;text-transform:uppercase;}
.mk-v{color:var(--ink);font-weight:700;font-size:0.9rem;font-variant-numeric:tabular-nums;margin-top:2px;}
.seg{display:flex;gap:6px;margin:4px 0 6px;flex-wrap:wrap;}
.seg label{background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:5px 14px;font-size:0.82rem;color:var(--muted);cursor:pointer;}
.seg input{display:none;}
.seg label:has(input:checked){border-color:var(--up);color:var(--up);}
.modal-fund{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px;
  color:var(--ink);font-size:0.9rem;}
.modal-fund .fk{color:var(--muted);font-size:0.72rem;text-transform:uppercase;display:block;margin-bottom:2px;}

/* news */
.news-title{font-size:0.8rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;
  color:var(--muted);margin:18px 0 8px;padding-top:14px;border-top:1px solid var(--line);}
.news-list{display:flex;flex-direction:column;gap:2px;}
.news-item{display:block;text-decoration:none;color:var(--ink);padding:10px 12px;
  border-radius:10px;border:1px solid transparent;transition:background .12s,border-color .12s;}
a.news-item:hover{background:var(--card);border-color:var(--line);}
.news-headline{font-weight:600;font-size:0.92rem;line-height:1.35;color:var(--ink);}
.news-summary{color:var(--muted);font-size:0.82rem;margin-top:3px;line-height:1.4;}
.news-meta{color:var(--muted);font-size:0.72rem;margin-top:4px;text-transform:uppercase;letter-spacing:0.03em;}
.news-empty{color:var(--muted);font-size:0.85rem;padding:8px 4px;}

.foot{color:var(--muted);font-size:0.76rem;text-align:center;margin-top:28px;}

/* ---------------- responsive / mobile ---------------- */
@media(max-width:900px){
  .pulse{grid-template-columns:repeat(2,1fr);}
  .modal-kpis{grid-template-columns:repeat(4,1fr);}
}
@media(max-width:680px){
  .app{padding:14px 12px 48px;}
  .header{gap:10px;}
  .controls{flex:1 1 100%;width:100%;gap:8px;flex-wrap:wrap;justify-content:flex-start;}
  .dd,.dd-sm{flex:1 1 46%;min-width:0;}
  .search{flex:1 1 100%;min-width:0;}
  .theme-toggle{flex:1 1 100%;}
  .grid{grid-template-columns:1fr;}     /* one graph per row on phones */
  .movers{grid-template-columns:1fr;}
  .modal-fund{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:420px){
  .pulse{grid-template-columns:1fr;}
  .modal-kpis{grid-template-columns:repeat(2,1fr);}
}