:root {
  --bg-app:#fff; --bg-subtle:#F7F8FA; --bg-surface:#fff; --bg-hover:#F2F4F7; --bg-active:#ECEFF3;
  --border-subtle:#E6E8EC; --border-default:#D5D9DF; --border-strong:#B7BDC6;
  --text-primary:#0C0E12; --text-secondary:#3B4149; --text-tertiary:#6B7280;
  --accent:#4F46E5; --accent-hover:#4338CA; --accent-subtle:#EEF0FF;
  --success:#067647; --success-bg:#E7F6ED; --warning:#B54708; --warning-bg:#FEF3E6;
  --danger:#D92D20; --danger-bg:#FDECEA; --info:#175CD3; --info-bg:#E8F0FE;
  --neutral:#475467; --neutral-bg:#F2F4F7; --pending:#6941C6; --pending-bg:#F4EEFF;
  --radius:10px; --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg-app:#0B0D0F; --bg-subtle:#121417; --bg-surface:#16191D; --bg-hover:#1E2228; --bg-active:#23282F;
    --border-subtle:#23262B; --border-default:#2C3138; --border-strong:#3A404A;
    --text-primary:#F4F6F8; --text-secondary:#C2C7CE; --text-tertiary:#8A9098;
    --accent:#7C7CF5; --accent-hover:#8E8EF7; --accent-subtle:#1E1E3A;
    --success:#3DD68C; --success-bg:#10281C; --warning:#F5A524; --warning-bg:#2A1D0A;
    --danger:#F97066; --danger-bg:#2C1512; --info:#6BA6FF; --info-bg:#0E1D33;
    --neutral:#98A2B3; --neutral-bg:#1E2228; --pending:#B692F6; --pending-bg:#221735;
  }
}
* { box-sizing:border-box; }
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg-subtle); color:var(--text-primary); font-size:14px; line-height:1.5; }
h1,h2,h3 { margin:0 0 .4em; }
h2 { font-size:15px; }
a { color:var(--accent); text-decoration:none; }
code { background:var(--bg-subtle); padding:1px 5px; border-radius:5px; font-size:12px; }
.muted { color:var(--text-tertiary); font-size:13px; }
.hidden { display:none !important; }

/* Topbar */
.topbar { display:flex; align-items:center; gap:20px; height:56px; padding:0 20px;
  background:var(--bg-surface); border-bottom:1px solid var(--border-subtle); position:sticky; top:0; z-index:10; }
.brand { font-weight:700; display:flex; align-items:center; gap:8px; }
.brand .dot { width:10px; height:10px; border-radius:50%; background:var(--accent); }
.brand .sub { font-weight:500; color:var(--text-tertiary); font-size:12px; text-transform:uppercase; letter-spacing:.06em; }
.tabs { display:flex; gap:4px; }
.tab { background:none; border:none; padding:8px 14px; border-radius:8px; cursor:pointer; color:var(--text-secondary);
  font-size:14px; font-weight:500; display:flex; align-items:center; gap:7px; }
.tab:hover { background:var(--bg-hover); }
.tab.active { background:var(--accent-subtle); color:var(--accent); }
.badge { background:var(--neutral-bg); color:var(--text-secondary); border-radius:20px; padding:1px 8px; font-size:12px; font-weight:600; }
.tab.active .badge { background:var(--accent); color:#fff; }
.topbar-right { margin-left:auto; }

/* Buttons / inputs */
button.primary { background:var(--accent); color:#fff; border:none; padding:9px 16px; border-radius:8px; font-weight:600; cursor:pointer; font-size:14px; }
button.primary:hover { background:var(--accent-hover); }
button.secondary, .ghost-btn { background:var(--bg-surface); color:var(--text-primary); border:1px solid var(--border-default);
  padding:8px 14px; border-radius:8px; font-weight:500; cursor:pointer; font-size:13px; display:inline-block; }
button.secondary:hover, .ghost-btn:hover { background:var(--bg-hover); }
input, select, textarea { font:inherit; color:var(--text-primary); background:var(--bg-surface);
  border:1px solid var(--border-default); border-radius:8px; padding:8px 10px; width:100%; }
input:focus, select:focus, textarea:focus { outline:2px solid var(--accent); outline-offset:-1px; border-color:var(--accent); }
textarea { resize:vertical; }
label { display:block; font-size:12px; font-weight:600; color:var(--text-secondary); margin-bottom:10px; }
label input, label select { margin-top:4px; }

/* Layout */
main { max-width:1200px; margin:0 auto; padding:20px; }
.col-single, .col-narrow { display:flex; flex-direction:column; gap:16px; }
.col-narrow { max-width:640px; }
.split { display:grid; grid-template-columns:minmax(320px,420px) 1fr; gap:16px; align-items:start; }
@media (max-width:820px){ .split{ grid-template-columns:1fr; } }

.card { background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); }
.card h2 { margin-top:0; }
.card > button { margin-top:12px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
.form-grid label:first-child, .form-grid label:nth-child(2) { grid-column:span 1; }

/* Stat row */
.stat-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; }
.stat { background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--radius); padding:14px 16px; }
.stat .n { font-size:24px; font-weight:700; }
.stat .l { font-size:12px; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:.04em; }
.stat.alert .n { color:var(--danger); }

/* Lead list */
.toolbar { display:flex; gap:10px; margin-bottom:12px; }
.toolbar input { flex:2; } .toolbar select { flex:1; }
.lead-list { display:flex; flex-direction:column; gap:8px; max-height:calc(100vh - 190px); overflow:auto; }
.lead-row { background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:10px; padding:12px 14px; cursor:pointer; }
.lead-row:hover { background:var(--bg-hover); }
.lead-row.selected { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.lead-row .name { font-weight:600; }
.lead-row .meta { font-size:12px; color:var(--text-tertiary); display:flex; gap:10px; margin-top:2px; flex-wrap:wrap; }

/* Status chips */
.chip { display:inline-block; padding:2px 9px; border-radius:20px; font-size:12px; font-weight:600; }
.chip.new{background:var(--neutral-bg);color:var(--neutral);}
.chip.called{background:var(--info-bg);color:var(--info);}
.chip.awaiting_callback{background:var(--warning-bg);color:var(--warning);}
.chip.booked{background:var(--success-bg);color:var(--success);}
.chip.not_interested,.chip.wrong_number,.chip.closed{background:var(--neutral-bg);color:var(--text-tertiary);}
.chip.do_not_call{background:var(--danger-bg);color:var(--danger);}
.chip.trial_agreed{background:var(--pending-bg);color:var(--pending);}
.chip.in_build{background:var(--info-bg);color:var(--info);}
.chip.ready_for_callback{background:var(--success-bg);color:var(--success);}

/* Detail pane */
.detail-pane { background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--radius); padding:20px; min-height:400px; box-shadow:var(--shadow); }
.detail-pane .empty, .empty { color:var(--text-tertiary); text-align:center; padding:60px 20px; }
.detail-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.detail-head h2 { font-size:19px; }
.head-actions { display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.head-actions .small-btn { text-align:center; min-width:130px; }
.call-btn { background:var(--success); color:#fff; padding:11px 18px; border-radius:9px; font-weight:700; font-size:16px; display:inline-flex; gap:8px; align-items:center; text-decoration:none; }
.call-btn:hover { filter:brightness(1.05); }

/* Google info: photos + reviews */
.photos { display:flex; gap:8px; margin:6px 0 10px; overflow-x:auto; }
.photos img { height:110px; width:auto; border-radius:8px; border:1px solid var(--border-subtle); object-fit:cover; flex:0 0 auto; }
.reviews { margin-top:10px; display:flex; flex-direction:column; gap:8px; }
.review { background:var(--bg-subtle); border:1px solid var(--border-subtle); border-radius:8px; padding:9px 11px; font-size:13px; }
.review-head { display:flex; gap:8px; align-items:center; font-size:12px; }
.rev-stars { color:var(--warning); letter-spacing:1px; }
.review-text { margin-top:4px; color:var(--text-secondary); }
.kv { color:var(--text-secondary); font-size:13px; margin:3px 0; }
.section { margin-top:20px; padding-top:18px; border-top:1px solid var(--border-subtle); }
.section h3 { font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-tertiary); }
.status-buttons { display:flex; flex-wrap:wrap; gap:8px; }
.status-buttons button { border:1px solid var(--border-default); background:var(--bg-surface); color:var(--text-secondary);
  padding:7px 12px; border-radius:8px; cursor:pointer; font-weight:600; font-size:13px; }
.status-buttons button.on { background:var(--accent); color:#fff; border-color:var(--accent); }
.note, .task { background:var(--bg-subtle); border:1px solid var(--border-subtle); border-radius:8px; padding:10px 12px; margin-bottom:8px; font-size:13px; }
.note .ts, .task .ts { color:var(--text-tertiary); font-size:11px; margin-top:4px; }
.task { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.task.overdue { border-color:var(--danger); }
.row-add { display:flex; gap:8px; margin-top:8px; }
.row-add textarea, .row-add input { flex:1; }
.badge-web { background:var(--success-bg); color:var(--success); font-size:12px; font-weight:600; padding:2px 9px; border-radius:20px; }
.badge-web.has { background:var(--warning-bg); color:var(--warning); }

/* Due lists */
.due-group { margin-top:16px; }
.due-group h3 { font-size:13px; text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px; }
.due-group.overdue h3 { color:var(--danger); }
.due-group.ready h3 { color:var(--success); }
.stat.ready { border-color:var(--success); }
.stat.ready .n { color:var(--success); }
.status-buttons button:disabled { opacity:.5; cursor:default; }
.due-item { display:flex; align-items:center; gap:12px; background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:10px; padding:12px 14px; margin-bottom:8px; }
.due-item .grow { flex:1; }
.due-item .when { font-size:12px; color:var(--text-tertiary); }
.small-btn { padding:6px 10px; font-size:12px; border-radius:7px; border:1px solid var(--border-default); background:var(--bg-surface); cursor:pointer; color:var(--text-primary); }
.small-btn:hover { background:var(--bg-hover); }
.link { color:var(--accent); cursor:pointer; font-weight:600; }

.result { margin-top:12px; font-size:13px; background:var(--bg-subtle); border-radius:8px; padding:10px 12px; }
.compliance { background:var(--warning-bg); border-color:var(--warning); color:var(--text-secondary); font-size:13px; }

/* Auth screen */
.auth-screen { position:fixed; inset:0; background:var(--bg-subtle); display:flex; align-items:center; justify-content:center; z-index:200; padding:20px; }
.auth-card { background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:14px; padding:28px; width:100%; max-width:380px; box-shadow:var(--shadow); }
.auth-card .brand { margin-bottom:18px; }
.auth-card h2 { font-size:20px; margin-bottom:4px; }
.auth-card label { margin-top:14px; }
.auth-error { color:var(--danger); font-size:13px; margin-top:12px; min-height:16px; }
.auth-msg { color:var(--success); font-size:13px; margin-top:8px; }
.auth-links { margin-top:14px; display:flex; justify-content:space-between; font-size:13px; }
.auth-links a { cursor:pointer; }
.reset-flag { color:var(--warning); font-size:11px; font-weight:600; }
.who { color:var(--text-secondary); font-size:13px; font-weight:600; }
.topbar-right { margin-left:auto; display:flex; align-items:center; gap:12px; }

/* Users list */
.user-row { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--border-subtle); }
.user-row:last-child { border-bottom:none; }
.user-row .grow { flex:1; }
.user-row .role { font-size:11px; text-transform:uppercase; letter-spacing:.04em; font-weight:700; }
.user-row .role.admin { color:var(--accent); }
.user-row.disabled { opacity:.5; }

/* Website brief */
.brief-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
.brief-grid label { margin-bottom:10px; }
.brief-grid label.wide { grid-column:1 / -1; }
.brief-sub { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-tertiary); margin:14px 0 8px; }
.feat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:6px 12px; }
.chk { display:flex; align-items:center; gap:7px; font-weight:500; font-size:13px; color:var(--text-secondary); text-transform:none; letter-spacing:0; margin:0; }
.chk input { width:auto; }
.ask-tag { background:var(--warning-bg); color:var(--warning); font-size:10px; font-weight:700; padding:1px 6px; border-radius:20px; text-transform:uppercase; }
.verify-tag { background:var(--danger-bg); color:var(--danger); font-size:10px; font-weight:700; padding:1px 6px; border-radius:20px; text-transform:uppercase; }
.g-tag { background:var(--info-bg); color:var(--info); font-size:10px; font-weight:600; padding:1px 6px; border-radius:20px; }
.brief-actions { display:flex; gap:10px; margin-top:14px; }

/* Pill / tag input */
.tag-input { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:4px;
  border:1px solid var(--border-default); border-radius:8px; padding:6px 8px; background:var(--bg-surface); min-height:38px; cursor:text; }
.tag-input:focus-within { outline:2px solid var(--accent); outline-offset:-1px; border-color:var(--accent); }
.tag-input input { border:none; outline:none; flex:1; min-width:120px; width:auto; padding:2px; background:transparent; }
.pill { display:inline-flex; align-items:center; gap:6px; background:var(--accent-subtle); color:var(--accent);
  border-radius:6px; padding:3px 8px; font-size:13px; font-weight:600; }
.pill .pill-txt { cursor:text; }
.pill:hover { box-shadow:inset 0 0 0 1px var(--accent); }
.pill .x { cursor:pointer; opacity:.55; font-weight:700; font-size:11px; }
.pill .x:hover { opacity:1; }
.pill-edit { border:none; outline:none; background:transparent; color:var(--accent);
  font:inherit; font-weight:600; font-size:13px; width:auto; min-width:30px; padding:0; }

/* Service suggestion chips */
.svc-suggest { margin-top:8px; }
.svc-suggest-head { font-size:12px; color:var(--text-tertiary); margin-bottom:6px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.svc-suggest-head select { width:auto; padding:3px 8px; font-size:12px; }
.svc-chips { display:flex; flex-wrap:wrap; gap:6px; }
.svc-chip { border:1px dashed var(--border-strong); background:var(--bg-surface); color:var(--text-secondary);
  border-radius:20px; padding:4px 10px; font-size:12px; cursor:pointer; font-weight:500; }
.svc-chip:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-subtle); }
.svc-chip.used { opacity:.4; text-decoration:line-through; pointer-events:none; }
.cat-chips { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0; }
.cat-pill[data-base="0"] { background:var(--success-bg); color:var(--success); }

/* Logo field */
.logo-field { margin-top:4px; }
.logo-row { display:flex; gap:8px; align-items:center; }
.logo-row input[type=text] { flex:1; }
.file-btn { flex:0 0 auto; background:var(--bg-surface); border:1px solid var(--border-default); color:var(--text-primary);
  padding:8px 14px; border-radius:8px; font-weight:500; font-size:13px; cursor:pointer; }
.file-btn:hover { background:var(--bg-hover); }
.logo-preview { margin-top:8px; }
.logo-preview img { max-height:70px; max-width:200px; border:1px solid var(--border-subtle); border-radius:8px; padding:4px; background:var(--bg-surface); }

/* Modal */
.modal { position:fixed; inset:0; background:rgba(10,12,15,.55); display:flex; align-items:center; justify-content:center; z-index:150; padding:20px; }
.modal-card { background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:14px; padding:22px; width:100%; max-width:760px; box-shadow:var(--shadow); }
.modal-head { display:flex; justify-content:space-between; align-items:center; }
.modal-head h3 { margin:0; }
#prompt-text { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; line-height:1.5; margin-top:10px; white-space:pre; }
.modal-actions { display:flex; justify-content:flex-end; margin-top:14px; }

/* Toast */
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--text-primary); color:var(--bg-app);
  padding:11px 18px; border-radius:9px; font-weight:600; font-size:13px; box-shadow:var(--shadow); z-index:100; }