:root { --ink:#14231e; --muted:#6c7974; --line:#dfe7e1; --paper:#fff; --wash:#f5f8f5; --green:#087e4d; --green-dark:#075e3b; --orange:#f7a817; --orange-soft:#fff5dc; --shadow:0 24px 70px rgba(25,57,43,.09); }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:var(--wash); font-family:"DM Sans",sans-serif; }
button,input,select { font:inherit; }
a { color:inherit; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.leads-shell { max-width:1160px; min-height:100vh; margin:0 auto; padding:42px 28px 70px; }
.auth-gate { max-width:460px; margin:12vh auto 0; padding:48px; border-radius:22px; background:var(--paper); box-shadow:var(--shadow); }
.brand-lockup,.brand-mini { display:flex; align-items:center; gap:10px; color:var(--green); font-size:12px; font-weight:800; letter-spacing:.15em; line-height:1.05; text-decoration:none; }
.brand-lockup img { width:44px; height:44px; border-radius:11px; }
.brand-mini img { width:30px; height:30px; border-radius:8px; }
.eyebrow { margin:40px 0 10px; color:var(--green); font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
h1,h2 { font-family:Manrope,sans-serif; letter-spacing:-.04em; line-height:1.08; }
h1 { margin:0 0 12px; font-size:clamp(34px,5vw,52px); }
.muted { margin:0 0 28px; color:var(--muted); }
.sign-in-form { display:grid; gap:14px; }
.login-field { display:grid; gap:6px; color:var(--ink); font-size:13px; font-weight:700; }
.login-field input { width:100%; border:1px solid var(--line); border-radius:9px; padding:12px 14px; color:var(--ink); background:var(--paper); outline:none; }
.login-field input:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(8,126,77,.12); }
.login-note { margin:14px 0 0; color:var(--muted); font-size:12px; }
.button { display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:9px; padding:12px 16px; font-weight:700; text-decoration:none; cursor:pointer; }
.button.primary { width:100%; color:#fff; background:var(--green); }
.button.primary:hover { background:var(--green-dark); }
.button.secondary { color:var(--green); background:var(--orange-soft); }
.button.ghost { color:var(--muted); background:transparent; }
.auth-status,.workspace-error { min-height:22px; margin:16px 0; color:#b43d24; font-size:14px; font-weight:600; }
.back-link { display:inline-block; margin-top:20px; color:var(--green); font-size:14px; font-weight:700; text-decoration:none; }
.workspace-header { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding-bottom:32px; border-bottom:1px solid var(--line); }
.workspace-header .eyebrow { margin:26px 0 8px; }
.workspace-header h1 { margin:0; font-size:clamp(35px,5vw,58px); }
.header-actions { display:flex; align-items:center; gap:8px; }
.summary-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:24px 0; }
.summary-card { padding:18px; border:1px solid var(--line); border-radius:14px; background:var(--paper); }
.summary-card span { display:block; color:var(--muted); font-size:13px; font-weight:700; }
.summary-card strong { display:block; margin-top:10px; color:var(--green); font-family:Manrope,sans-serif; font-size:32px; }
.summary-card.accent { border-color:#f4d48e; background:var(--orange-soft); }
.toolbar { display:flex; align-items:end; justify-content:space-between; gap:16px; margin:28px 0 8px; }
.search { flex:1; }
.search input,.filter select { width:100%; border:1px solid var(--line); border-radius:9px; padding:12px 14px; color:var(--ink); background:var(--paper); outline:none; }
.search input:focus,.filter select:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(8,126,77,.12); }
.filter { display:grid; min-width:180px; gap:6px; color:var(--muted); font-size:12px; font-weight:700; }
.leads-list { display:grid; gap:10px; }
.lead-card { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 20px; border:1px solid var(--line); border-radius:14px; background:var(--paper); }
.lead-main { display:flex; align-items:center; min-width:0; gap:13px; }
.avatar { display:grid; place-items:center; flex:0 0 42px; width:42px; height:42px; border-radius:50%; color:var(--green); background:#dcf4e5; font-size:13px; font-weight:800; }
.lead-copy { min-width:0; }
.lead-heading { display:flex; align-items:center; flex-wrap:wrap; gap:9px; }
.lead-heading h2 { margin:0; font-size:18px; }
.status-dot { display:inline-flex; padding:4px 8px; border-radius:99px; color:var(--green); background:#e7f6ed; font-size:11px; font-weight:800; }
.status-dot.contacted { color:#8c6400; background:#fff2c9; }.status-dot.qualified { color:#1766a4; background:#e4f1fb; }.status-dot.not-qualified { color:#9c402d; background:#fce9e4; }.status-dot.closed { color:#666; background:#edf0ee; }
.lead-meta,.lead-detail { margin:4px 0 0; color:var(--muted); font-size:13px; }
.lead-meta a { color:var(--green); text-decoration:none; }.lead-detail strong { color:var(--ink); }
.lead-action { flex:0 0 150px; }.lead-action label { display:grid; gap:6px; color:var(--muted); font-size:11px; font-weight:700; }.lead-action select { width:100%; border:1px solid var(--line); border-radius:8px; padding:9px 8px; color:var(--ink); background:var(--paper); }
.empty-state { padding:70px 20px; text-align:center; border:1px dashed #cbd9cf; border-radius:14px; background:rgba(255,255,255,.7); }.empty-mark { display:grid; place-items:center; width:45px; height:45px; margin:0 auto 16px; border-radius:50%; color:var(--green); background:#dcf4e5; font-weight:800; }.empty-state h2 { margin:0 0 8px; font-size:24px; }.empty-state p { margin:0; color:var(--muted); }
@media (max-width:700px) { .leads-shell { padding:22px 16px 45px; }.auth-gate { margin-top:7vh; padding:30px 24px; }.workspace-header { align-items:flex-start; flex-direction:column; padding-bottom:24px; }.header-actions { width:100%; }.header-actions .button { flex:1; }.summary-grid { grid-template-columns:repeat(2,1fr); }.toolbar { align-items:stretch; flex-direction:column; }.filter { min-width:0; }.lead-card { align-items:stretch; flex-direction:column; gap:14px; padding:16px; }.lead-action { flex-basis:auto; }.lead-action select { padding:11px; } }