/* ================================================================
   COMPETITIVE BANKING MARKET SHARE INTELLIGENCE — Design System
   ================================================================ */
:root {
  --bg:#f1f5f9; --card:#fff; --border:#e2e8f0;
  --navy:#0f172a; --navy2:#1e293b; --slate:#334155;
  --muted:#64748b; --subtle:#94a3b8;
  --accent:#3b82f6; --pos:#16a34a; --neg:#dc2626; --warn:#d97706; --info:#0891b2;
  --r:8px; --sh:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
  --sh2:0 4px 6px rgba(0,0,0,.07),0 2px 4px rgba(0,0,0,.04);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--slate);font-size:14px;line-height:1.5}
a{color:inherit}

/* ── HEADER ── */
.ch{background:var(--navy);color:#fff;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.ch-title h1{font-size:17px;font-weight:700;letter-spacing:-.3px}
.ch-title p{font-size:11px;color:#94a3b8;margin-top:1px}
.ch-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bank-sel select{background:#1e293b;color:#fff;border:1px solid #334155;padding:7px 12px;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;outline:none;min-width:220px}
.bank-sel select:focus{border-color:var(--accent)}
.status-badge{font-size:11px;padding:4px 10px;border-radius:20px;font-weight:600;background:#1e293b;color:#94a3b8;border:1px solid #334155;white-space:nowrap}
.status-badge.ok{background:#14532d;color:#86efac;border-color:#166534}
.status-badge.err{background:#7f1d1d;color:#fca5a5;border-color:#991b1b}
.nav-link-ext{font-size:11px;color:#94a3b8;text-decoration:none;padding:4px 10px;border-radius:4px;border:1px solid #334155;white-space:nowrap}
.nav-link-ext:hover{color:#fff;border-color:#64748b}

/* ── NAV ── */
.cn{background:var(--navy2);border-bottom:1px solid #334155;overflow-x:auto;white-space:nowrap}
.cn::-webkit-scrollbar{height:3px}.cn::-webkit-scrollbar-thumb{background:#334155}
.cn-inner{display:flex;padding:0 16px}
.cn-btn{color:#94a3b8;background:none;border:none;border-bottom:2px solid transparent;padding:10px 13px;font-size:12px;font-weight:500;cursor:pointer;white-space:nowrap;transition:all .15s}
.cn-btn:hover{color:#e2e8f0}
.cn-btn.active{color:#fff;border-bottom-color:var(--accent)}

/* ── LAYOUT ── */
.cm{padding:20px 22px;max-width:1400px;margin:0 auto}
.cs{display:none}.cs.active{display:block}
.cs-hd{margin-bottom:14px}
.cs-hd h2{font-size:15px;font-weight:700;color:var(--navy)}
.cs-hd p{font-size:12px;color:var(--muted);margin-top:1px}

/* ── CARDS ── */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh);padding:16px 18px}
.card-sm{padding:11px 14px}
.cg{display:grid;gap:11px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g5{grid-template-columns:repeat(5,1fr)}
@media(max-width:1100px){.g5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.g4,.g5{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.g2,.g3,.g4,.g5{grid-template-columns:1fr}}

/* ── KPI ── */
.kl{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:3px}
.kv{display:block;font-size:24px;font-weight:700;color:var(--navy);line-height:1.1}
.kv.sm{font-size:19px}
.ks{display:block;font-size:11px;color:var(--muted);margin-top:3px}
.kmv{display:block;font-size:12px;font-weight:600;margin-top:3px}

/* ── COLORS ── */
.pos{color:var(--pos)}.neg{color:var(--neg)}.neu{color:var(--muted)}.wrn{color:var(--warn)}.inf{color:var(--info)}

/* ── RANK BADGE ── */
.rb{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;font-size:11px;font-weight:700;background:#f1f5f9;color:var(--slate);border:2px solid var(--border)}
.rb.r1{background:#fef9c3;color:#854d0e;border-color:#fde047}
.rb.r2{background:#f1f5f9;color:#475569;border-color:#94a3b8}
.rb.r3{background:#fef3e2;color:#92400e;border-color:#fed7aa}

/* ── TABLE ── */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ct{width:100%;border-collapse:collapse;font-size:13px}
.ct th{background:#f8fafc;text-align:left;padding:8px 11px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);border-bottom:1px solid var(--border)}
.ct td{padding:8px 11px;border-bottom:1px solid #f1f5f9;vertical-align:middle}
.ct tr:last-child td{border-bottom:none}
.ct tr:hover td{background:#f8fafc}
.ct tr.sel-row td{background:#eff6ff!important}
.ct tr.sel-row:hover td{background:#dbeafe!important}
.bk-cell{display:flex;align-items:center;gap:6px}

/* ── INSIGHT BLOCKS ── */
.ib{background:#f8fafc;border-left:3px solid var(--accent);border-radius:0 6px 6px 0;padding:10px 14px;font-size:12px;color:var(--slate);margin-top:10px}
.ib.success{border-left-color:var(--pos);background:#f0fdf4}
.ib.warn{border-left-color:var(--warn);background:#fffbeb}
.ib.danger{border-left-color:var(--neg);background:#fef2f2}
.ib.info{border-left-color:var(--info);background:#f0f9ff}
.ib-title{font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px;display:flex;align-items:center;gap:4px}

/* ── CONFIDENCE ── */
.cb{display:inline-block;font-size:10px;font-weight:600;padding:2px 7px;border-radius:10px;margin-left:6px;vertical-align:middle}
.cb-hi{background:#dcfce7;color:#166534}
.cb-md{background:#fef9c3;color:#854d0e}
.cb-ca{background:#fee2e2;color:#991b1b}

/* ── ALERTS ── */
.ag{display:flex;flex-direction:column;gap:8px}
.ac{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border-radius:6px;border:1px solid;font-size:12px}
.ac.red{background:#fef2f2;border-color:#fecaca}
.ac.yellow{background:#fffbeb;border-color:#fde68a}
.ac.green{background:#f0fdf4;border-color:#bbf7d0}
.ac.blue{background:#eff6ff;border-color:#bfdbfe}
.ac-icon{font-size:15px;flex-shrink:0;margin-top:1px}
.ac-body{flex:1}
.ac-title{font-weight:700;margin-bottom:2px}
.ac-desc{color:var(--muted)}

/* ── BANK DOT ── */
.bd{width:8px;height:8px;border-radius:50%;flex-shrink:0;display:inline-block}

/* ── MOMENTUM ROW ── */
.mv-row{display:flex;align-items:center;justify-content:space-between;padding:6px 0;border-bottom:1px solid #f1f5f9;font-size:12px}
.mv-row:last-child{border-bottom:none}
.mv-bank{font-weight:600;display:flex;align-items:center;gap:5px}
.mv-share{color:var(--muted);font-size:11px}
.mv-val{font-weight:700;min-width:60px;text-align:right;font-size:12px}

/* ── CHART ── */
.chart-wrap{min-height:280px}
.chart-title{font-size:13px;font-weight:600;color:var(--navy);margin-bottom:10px}

/* ── SCANNER CARDS ── */
.sc-card{border-radius:6px;padding:12px 14px;border:1px solid transparent}
.sc-card .sc-tag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px}
.sc-card .sc-cat{font-weight:600;font-size:13px}
.sc-card .sc-detail{font-size:12px;color:var(--muted);margin-top:2px}

/* ── METHODOLOGY ── */
details{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;margin-bottom:10px}
details summary{padding:11px 16px;font-size:13px;font-weight:600;cursor:pointer;background:#f8fafc;user-select:none;list-style:none;display:flex;align-items:center;gap:8px}
details summary::before{content:'▶';font-size:10px;color:var(--muted);transition:transform .2s}
details[open] summary::before{transform:rotate(90deg)}
details[open] summary{border-bottom:1px solid var(--border)}
details .d-body{padding:14px 16px;font-size:12px;line-height:1.7;color:var(--slate)}
details .d-body code{background:#f1f5f9;padding:1px 5px;border-radius:3px;font-family:monospace;font-size:11px}

/* ── MINI BAR ── */
.mbar-wrap{background:#f1f5f9;border-radius:3px;height:4px;margin-top:5px;overflow:hidden}
.mbar{height:100%;border-radius:3px;background:var(--accent);transition:width .3s}

/* ── FOOTER ── */
.cf{text-align:center;padding:18px;font-size:11px;color:var(--subtle);border-top:1px solid var(--border);margin-top:28px}
.cf a{color:var(--muted);text-decoration:none}

/* ── FORMULA TABLE ── */
.ft{width:100%;border-collapse:collapse;font-size:12px}
.ft td{padding:6px 10px;border-bottom:1px solid #f1f5f9}
.ft tr:last-child td{border-bottom:none}
.ft td:first-child{font-weight:600;width:35%;color:var(--navy)}