:root {
  --ink:#141a26; --mut:#67718a; --brand:#7c5cff; --brand2:#5b3df5;
  --bg:#f4f5fb; --line:#e5e8f3; --card:#fff; --err:#d64545; --ok:#1fa36b;
}
* { box-sizing:border-box; margin:0; padding:0; }
/* the M5 lesson, encoded: any display:* on a class silently defeats the
   hidden attribute — restate it with priority. */
[hidden] { display:none !important; }
body { font:15px/1.6 'Segoe UI',system-ui,sans-serif; color:var(--ink); background:var(--bg); }
a { color:var(--brand); }
.logo { font-weight:800; font-size:1.15rem; letter-spacing:-.5px; }
.logo span { color:var(--brand); }
.logo-light, .logo-light span { color:#fff; }
.logo-light span { opacity:.75; }
.mut { color:var(--mut); }
.tiny { font-size:.8rem; }
.err { color:var(--err); font-size:.9rem; margin-top:4px; }
code { font-family:Consolas,monospace; background:#eef0fa; padding:1px 6px; border-radius:5px; font-size:.85em; }

.btn { background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#fff; border:0; padding:11px 22px; border-radius:10px; font-weight:600; font-size:.92rem; cursor:pointer; transition:transform .08s, box-shadow .15s; box-shadow:0 4px 14px rgba(124,92,255,.25); }
.btn:hover { transform:translateY(-1px); box-shadow:0 6px 18px rgba(124,92,255,.35); }
.btn.ghost { background:#fff; color:var(--brand); border:1px solid var(--line); box-shadow:none; }
.btn.small { padding:9px 16px; font-size:.84rem; }
.btn.wide { width:100%; }

/* ---------- login ---------- */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; background:var(--bg); }
.login-panel { display:grid; grid-template-columns:1fr 1fr; width:100%; max-width:780px; border-radius:20px; overflow:hidden; box-shadow:0 24px 70px rgba(20,22,43,.14); }
.login-brand { background:linear-gradient(150deg,#1c1440,#4c2fd9 90%); color:#fff; padding:44px 36px; display:flex; flex-direction:column; gap:14px; justify-content:center; }
.login-brand h2 { font-size:1.45rem; line-height:1.3; letter-spacing:-.4px; }
.login-brand p { color:#cdc7f4; font-size:.92rem; }
.login-card { background:#fff; padding:44px 36px; }
.login-card h1 { font-size:1.35rem; letter-spacing:-.4px; }
.login-card form { margin-top:20px; display:flex; flex-direction:column; gap:15px; }
.login-card label { font-size:.83rem; font-weight:600; display:flex; flex-direction:column; gap:6px; color:#3c4358; }
.login-card input { border:1.5px solid var(--line); border-radius:10px; padding:11px 13px; font-size:.95rem; transition:border-color .15s; }
.login-card input:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(124,92,255,.15); }
.login-card .tiny { margin-top:18px; }
@media (max-width:680px){ .login-panel { grid-template-columns:1fr; } .login-brand { padding:28px; } }

/* ---------- shell ---------- */
nav { display:flex; justify-content:space-between; align-items:center; padding:13px 28px; background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; }
.nav-right { display:flex; align-items:center; gap:14px; }
.tenant-chip { display:flex; align-items:center; gap:8px; background:var(--bg); border:1px solid var(--line); border-radius:20px; padding:6px 14px; font-size:.85rem; font-weight:600; }
.tenant-chip .dot { width:8px; height:8px; border-radius:50%; background:var(--ok); }
main { max-width:880px; margin:0 auto; padding:30px 22px 60px; display:flex; flex-direction:column; gap:20px; }
.page-head { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap; }
.page-head h1 { font-size:1.45rem; letter-spacing:-.5px; }
select { border:1px solid var(--line); border-radius:10px; padding:9px 12px; background:#fff; font-size:.85rem; color:var(--ink); }
footer { text-align:center; margin-top:8px; }

/* ---------- panels & cards ---------- */
.panel { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px 24px; }
.panel-head { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:14px; }
.panel h2 { font-size:1.05rem; letter-spacing:-.3px; }
.panel-label { font-size:.78rem; text-transform:uppercase; letter-spacing:.8px; color:var(--mut); font-weight:600; }

.quota-panel { padding:20px 24px; }
.quota-row { display:flex; justify-content:space-between; align-items:flex-end; gap:10px; flex-wrap:wrap; }
.quota-nums { font-size:1.9rem; font-weight:700; font-family:Consolas,monospace; margin-top:2px; }
.quota-nums span { font-size:1rem; font-weight:400; font-family:'Segoe UI',sans-serif; margin-left:6px; }
.bar { height:9px; background:var(--bg); border-radius:6px; margin-top:12px; overflow:hidden; }
.bar-fill { height:100%; width:0%; border-radius:6px; background:linear-gradient(90deg,var(--brand),var(--brand2)); transition:width .5s ease; }
.bar-fill.warn { background:linear-gradient(90deg,#f0a13d,#e8842b); }
.bar-fill.full { background:linear-gradient(90deg,#e46060,#d64545); }

.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px 20px; }
.card.stat { display:flex; gap:14px; align-items:center; }
.stat-ico { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.25rem; flex:0 0 auto; }
.stat-ico.i1 { background:#eef0ff; } .stat-ico.i2 { background:#fff4e5; } .stat-ico.i3 { background:#e8f8f0; } .stat-ico.i4 { background:#f3edff; }
.card .big { font-size:1.45rem; font-weight:700; font-family:Consolas,monospace; line-height:1.2; }
.card .l { color:var(--mut); font-size:.8rem; }

/* ---------- knowledge base ---------- */
.kb-actions { display:flex; flex-direction:column; gap:12px; margin-bottom:16px; }
.url-row { display:flex; gap:10px; flex-wrap:wrap; }
.url-row input[type=url] { flex:1; min-width:220px; border:1.5px solid var(--line); border-radius:10px; padding:10px 13px; font-size:.9rem; }
.url-row input[type=url]:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(124,92,255,.15); }
.upload-tile { display:flex; gap:14px; align-items:center; border:1.5px dashed #c9cfe6; border-radius:12px; padding:14px 18px; cursor:pointer; transition:border-color .15s, background .15s; }
.upload-tile:hover { border-color:var(--brand); background:#fbfaff; }
.up-ico { font-size:1.5rem; }
.job-status { font-size:.88rem; background:var(--bg); border-radius:10px; padding:10px 14px; margin-bottom:12px; }
table { width:100%; border-collapse:collapse; }
th { text-align:left; font-size:.74rem; text-transform:uppercase; letter-spacing:.7px; color:var(--mut); padding:8px 10px; border-bottom:1px solid var(--line); }
td { padding:11px 10px; border-bottom:1px solid var(--line); font-size:.9rem; }
tr:last-child td { border-bottom:0; }
.num-col { width:90px; }
td .del { background:none; border:0; color:var(--mut); cursor:pointer; font-size:.82rem; }
td .del:hover { color:var(--err); }
.empty { text-align:center; color:var(--mut); padding:26px 10px 18px; font-size:.9rem; }
.empty-ico { font-size:1.8rem; margin-bottom:6px; }

/* ---------- widget ---------- */
.code { background:#14162b; color:#d8dcff; border-radius:12px; padding:15px 18px; font-family:Consolas,monospace; font-size:.78rem; overflow-x:auto; white-space:pre-wrap; word-break:break-all; }
.meta-row { display:flex; gap:12px; align-items:center; margin-top:12px; flex-wrap:wrap; }
.pill { font-size:.75rem; font-weight:600; border-radius:14px; padding:4px 12px; background:#e8f8f0; color:var(--ok); }
.pill.off { background:#f1f2f8; color:var(--mut); }

/* ---------- insights (M22) ---------- */
.insights-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px 28px; }
@media (max-width:640px){ .insights-grid { grid-template-columns:1fr; } }
.ins-block { min-width:0; }
.ins-block .panel-label { margin-bottom:10px; }
.ins-list { list-style:none; display:flex; flex-direction:column; gap:7px; }
.ins-list li { font-size:.9rem; display:flex; justify-content:space-between; gap:10px; padding-bottom:6px; border-bottom:1px solid var(--line); }
.ins-list li:last-child { border-bottom:0; }
.ins-list.sugg li { color:var(--brand2); font-weight:600; }
.tag-bars { display:flex; flex-direction:column; gap:9px; }
.tag-bar-row { display:flex; align-items:center; gap:10px; font-size:.85rem; }
.tag-bar-row b { font-family:Consolas,monospace; margin-left:auto; }
.tag-bar { flex:1; height:8px; background:var(--bg); border-radius:5px; overflow:hidden; min-width:40px; }
.tag-bar-fill { display:block; height:100%; border-radius:5px; background:var(--brand); }
/* per-tag accent (chips + bars) */
.tag { font-size:.72rem; font-weight:700; border-radius:12px; padding:3px 9px; background:#eef0fa; color:#48506b; white-space:nowrap; }
.tag-sales { background:#e8f8f0; color:#1fa36b; } .tag-bar-fill.tag-sales { background:#1fa36b; }
.tag-support { background:#eef0ff; color:#5b3df5; } .tag-bar-fill.tag-support { background:#5b3df5; }
.tag-complaint { background:#fdeaea; color:#d64545; } .tag-bar-fill.tag-complaint { background:#d64545; }
.tag-pricing { background:#fff4e5; color:#c9781a; } .tag-bar-fill.tag-pricing { background:#e8842b; }
.tag-appointment { background:#e6f6fb; color:#1a8bb0; } .tag-bar-fill.tag-appointment { background:#1a8bb0; }
.tag-refund { background:#fdeaf4; color:#b02a7a; } .tag-bar-fill.tag-refund { background:#b02a7a; }
.tag-spam { background:#f1f2f8; color:#8a90a3; } .tag-bar-fill.tag-spam { background:#8a90a3; }
.tag-other { background:#eef0fa; color:#67718a; } .tag-bar-fill.tag-other { background:#a7aec6; }
.tag-unres { background:#fdeaea; color:#d64545; }
.lead-score { font-family:Consolas,monospace; font-weight:700; font-size:.85rem; border-radius:8px; padding:2px 8px; }
.lead-score.hot { background:#fdeaea; color:#d64545; }
.lead-score.warm { background:#fff4e5; color:#c9781a; }
.lead-score.cold { background:#f1f2f8; color:#8a90a3; }

/* conversations toolbar (M22) */
.conv-toolbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
.conv-toolbar input[type=search] { flex:1; min-width:180px; border:1.5px solid var(--line); border-radius:10px; padding:9px 13px; font-size:.9rem; }
.conv-toolbar input[type=search]:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(124,92,255,.15); }
.conv-toolbar .chk { display:flex; align-items:center; gap:6px; font-size:.85rem; color:var(--mut); white-space:nowrap; }

/* transcript intel header (M22) */
.transcript-intel { background:var(--bg); border-radius:12px; padding:12px 14px; margin-top:14px; display:flex; flex-direction:column; gap:6px; }
.ti-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:.85rem; }
.ti-sum { font-size:.92rem; font-weight:600; }

/* transcript modal (M14) */
.modal-back { position:fixed; inset:0; background:rgba(16,18,38,.55); display:flex; align-items:center; justify-content:center; padding:20px; z-index:50; }
.modal { background:#fff; border-radius:16px; padding:24px; width:100%; max-width:560px; max-height:86vh; overflow-y:auto; }
.transcript { display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.bubble { max-width:82%; padding:9px 13px; border-radius:13px; font-size:.9rem; white-space:pre-wrap; word-break:break-word; }
.bubble .who { display:block; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; opacity:.6; margin-bottom:3px; }
.bubble.user { align-self:flex-end; background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#fff; }
.bubble.bot { align-self:flex-start; background:var(--bg); color:var(--ink); }