:root {
  /* Light pastel brand: ink lines with marker washes, same as the site and web app. */
  color-scheme: light;
  --navy:#121A26; --navy-md:#4338CA; --emerald:#059669; --amber:#F59E0B;
  --red:#EF4444; --slate:#3A4556; --slate-lt:#DEE3FF; --dark:#121A26;
  --surface:#FFFFFF; --bg:#EEF1F8; --border:#D3D9E6; --purple:#7C3AED;
  --mint:#8FEBC2; --mint-soft:#D3F5E4; --lav:#B4C1FD; --lav-soft:#DEE3FF;
}
* { margin:0; padding:0; box-sizing:border-box; font-family:'Plus Jakarta Sans',system-ui,sans-serif; }
body { background:var(--bg); color:var(--dark); height:100vh; overflow:hidden; }
button { cursor:pointer; }

/* ── Login ── */
#login { display:flex; align-items:center; justify-content:center; height:100vh;
  background:
    linear-gradient(rgba(30,42,58,.05) 1px, transparent 1px) 0 0 / 26px 26px,
    linear-gradient(90deg, rgba(30,42,58,.05) 1px, transparent 1px) 0 0 / 26px 26px,
    linear-gradient(135deg, var(--lav-soft), var(--mint-soft)); }
.login-card { background:#fff; border-radius:18px; padding:44px 40px; width:380px; text-align:center;
  border:1.5px solid var(--navy); box-shadow:8px 8px 0 var(--lav); }
.login-card .logo { width:64px; height:64px; margin:0 auto 12px; display:block; }
.login-card h1 { font-size:22px; font-weight:800; margin-bottom:6px; }
.login-card p { color:var(--slate); font-size:13px; margin-bottom:26px; }
.gbtn { display:inline-flex; align-items:center; gap:10px; background:var(--mint); color:var(--navy);
  border:1.5px solid var(--navy); padding:13px 26px; border-radius:999px; font-size:14px; font-weight:700;
  box-shadow:3px 3px 0 var(--navy); }
.gbtn:hover { transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--navy); }
#login-error { color:var(--red); font-size:12px; margin-top:14px; display:none; }

/* ── Shell ── */
#app { display:none; height:100vh; }
#app.on { display:flex; }
#sidebar { width:220px; background:var(--lav-soft); color:var(--navy); display:flex; flex-direction:column;
  flex-shrink:0; border-right:1px solid var(--border); }
#sidebar .brand { font-weight:800; font-size:17px; padding:18px 18px 14px; display:flex; align-items:center; gap:9px; }
#sidebar .brand img { width:30px; height:30px; }
#nav { flex:1; overflow-y:auto; padding:6px 10px; }
#nav a { display:flex; align-items:center; gap:10px; color:var(--slate); text-decoration:none;
  padding:10px 12px; border-radius:10px; font-size:13px; font-weight:600; margin-bottom:2px; }
#nav a:hover { background:rgba(30,42,58,.06); color:var(--navy); }
#nav a.active { background:#fff; color:var(--navy); box-shadow:inset 3px 0 0 var(--mint), 0 0 0 1px var(--border); }
.side-foot { padding:14px 16px; border-top:1px solid var(--border); }
.side-foot .agent { font-size:11.5px; opacity:.8; margin-bottom:8px; word-break:break-all; }
.side-foot button { width:100%; background:#fff; color:var(--navy); border:1px solid var(--border);
  padding:8px; border-radius:8px; font-size:12px; font-weight:600; }
#main { flex:1; min-width:0; overflow-y:auto; }
#page { padding:22px; min-height:100%; display:flex; flex-direction:column; gap:16px; }
#page.fullh { height:100vh; overflow:hidden; }

.page-title { font-size:20px; font-weight:800; }
.page-sub { font-size:12.5px; color:var(--slate); margin-top:2px; }

/* ── Cards / stats ── */
.cards { display:flex; flex-wrap:wrap; gap:12px; }
.stat { background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:12px 18px; min-width:130px; }
.stat .v { font-size:22px; font-weight:800; }
.stat .l { font-size:11.5px; color:var(--slate); font-weight:600; }
.stat.c-blue .v { color:var(--navy-md); } .stat.c-amber .v { color:var(--amber); }
.stat.c-green .v { color:var(--emerald); } .stat.c-red .v { color:var(--red); }
.stat.c-purple .v { color:var(--purple); }

/* ── Panels (CRUD) ── */
.panel { background:var(--surface); border:1px solid var(--border); border-radius:14px; }
.panel-head { display:flex; align-items:center; padding:14px 18px; gap:12px;
  border-bottom:1px solid var(--border); }
.panel-title { font-weight:800; font-size:14.5px; }
.panel-hint { font-size:11.5px; color:var(--slate); margin-top:1px; }
.panel-head .sp { flex:1; }
.btn { background:var(--navy-md); color:#fff; border:none; border-radius:9px;
  padding:8px 14px; font-size:12.5px; font-weight:700; }
.btn.green { background:var(--emerald); }
.btn.ghost { background:var(--slate-lt); color:var(--dark); }
.btn.danger { background:var(--red); }
.btn:disabled { background:var(--border); color:var(--slate); cursor:default; }

.form-card { padding:14px 18px; border-bottom:1px solid var(--border); background:#F8FAFC;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; }
.form-card .ff { display:flex; flex-direction:column; gap:3px; }
.form-card .ff.wide { grid-column:1 / -1; }
.form-card label { font-size:11px; font-weight:700; color:var(--slate); }
.form-card input, .form-card select, .form-card textarea { border:1px solid var(--border);
  border-radius:8px; padding:8px 10px; font-size:12.5px; outline:none; background:#fff; }
.form-card textarea { resize:vertical; min-height:54px; }
.form-actions { grid-column:1 / -1; display:flex; gap:8px; }

.tbl-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:12.5px; }
th { text-align:left; padding:9px 14px; color:var(--slate); font-size:11px; font-weight:700;
  border-bottom:1px solid var(--border); white-space:nowrap; }
td { padding:9px 14px; border-bottom:1px solid var(--slate-lt); vertical-align:top; }
tbody tr { cursor:pointer; }
tbody tr:hover { background:var(--bg); }
.empty-row { text-align:center; color:var(--slate); padding:22px !important; cursor:default; }

.badge { display:inline-block; font-size:10px; font-weight:700; padding:2px 8px; border-radius:9px;
  background:var(--slate-lt); color:var(--slate); white-space:nowrap; }
.badge.blue { background:#DBEAFE; color:var(--navy-md); }
.badge.amber { background:#FEF3C7; color:#B45309; }
.badge.green { background:#D1FAE5; color:#047857; }
.badge.red { background:#FEE2E2; color:#B91C1C; }
.badge.purple { background:#EDE9FE; color:var(--purple); }

/* ── Toast ── */
#toast { position:fixed; bottom:22px; left:50%; transform:translateX(-50%);
  background:var(--dark); color:#fff; padding:10px 20px; border-radius:10px; font-size:13px;
  display:none; z-index:99; max-width:80vw; }

/* ── Support module ── */
.sup-stats { display:flex; gap:12px; flex-shrink:0; }
.sup-main { display:flex; flex:1; min-height:0; gap:16px; }
.queue { width:360px; display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--border); border-radius:14px; overflow:hidden; flex-shrink:0; }
.queue-head { padding:13px 16px; border-bottom:1px solid var(--border); display:flex; gap:8px; }
.queue-head select, .queue-head input { border:1px solid var(--border); border-radius:8px;
  padding:7px 10px; font-size:12.5px; outline:none; }
.queue-head input { flex:1; min-width:0; }
.tickets { flex:1; overflow-y:auto; }
.tk { padding:13px 16px; border-bottom:1px solid var(--slate-lt); cursor:pointer; }
.tk:hover { background:var(--bg); }
.tk.active { background:#EFF6FF; border-left:3px solid var(--navy-md); }
.tk .subj { font-weight:700; font-size:13.5px; display:flex; align-items:center; gap:6px; }
.tk .meta { font-size:11.5px; color:var(--slate); margin-top:3px; }
.dot { width:8px; height:8px; border-radius:50%; background:var(--red); flex-shrink:0; }
.b-open { background:#DBEAFE; color:var(--navy-md); }
.b-in_progress { background:#FEF3C7; color:#B45309; }
.b-resolved { background:#D1FAE5; color:#047857; }
.thread { flex:1; display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--border); border-radius:14px; overflow:hidden; min-width:0; }
.thread-head { padding:14px 18px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:12px; }
.thread-head .t { flex:1; min-width:0; }
.thread-head .t .s { font-weight:800; font-size:15px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.thread-head .t .u { font-size:12px; color:var(--slate); }
.thread-head select { border:1px solid var(--border); border-radius:8px; padding:7px 10px;
  font-size:12.5px; font-weight:600; }
.msgs { flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:12px; }
.msg { max-width:68%; }
.msg .bubble { padding:10px 14px; border-radius:13px; font-size:13.5px; line-height:1.55;
  white-space:pre-wrap; word-break:break-word; }
.msg.user { align-self:flex-start; }
.msg.user .bubble { background:var(--slate-lt); border-bottom-left-radius:4px; }
.msg.agent { align-self:flex-end; }
.msg.agent .bubble { background:var(--navy-md); color:#fff; border-bottom-right-radius:4px; }
.msg .who { font-size:10.5px; color:var(--slate); margin-top:3px; }
.msg.agent .who { text-align:right; }
.composer { padding:12px 16px; border-top:1px solid var(--border); display:flex; gap:10px; }
.composer textarea { flex:1; border:1px solid var(--border); border-radius:12px; resize:none;
  padding:11px 14px; font-size:13.5px; outline:none; min-height:44px; max-height:120px; }
.composer button { background:var(--navy-md); color:#fff; border:none; border-radius:12px;
  padding:0 22px; font-weight:700; font-size:13.5px; }
.placeholder { flex:1; display:flex; align-items:center; justify-content:center;
  flex-direction:column; color:var(--slate); gap:10px; }
.placeholder .e { font-size:44px; }

/* ── Investor page ── */
.metric-section { background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:16px 18px; }
.metric-section h3 { font-size:13px; font-weight:800; color:var(--slate); text-transform:uppercase;
  letter-spacing:.4px; margin-bottom:12px; }
.metric-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px; }
.metric { border:1px solid var(--border); border-radius:12px; padding:12px 14px; }
.metric .mv { font-size:24px; font-weight:800; }
.metric .ml { font-size:11px; color:var(--slate); font-weight:600; margin-top:2px; }
.metric.hero { background:linear-gradient(135deg,var(--lav-soft),var(--mint-soft)); border:1.5px solid var(--navy); }
.metric.hero .mv { color:var(--navy); }
.metric.hero .ml { color:var(--slate); }

/* ── Research brief ── */
.brief { background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:18px; font-size:13.5px; line-height:1.6; white-space:pre-wrap; }
.note-warn { background:#FFFBEB; border:1px solid #FDE68A; color:#92400E; border-radius:10px;
  padding:10px 14px; font-size:12px; }