:root{
  --bg:#f4f6f9; --card:#ffffff; --ink:#0f172a; --ink-2:#334155; --muted:#5b6678; --line:#e2e8f0;
  --accent:#0f766e; --accent-ink:#ffffff; --accent-soft:#e6f4f2; --warn:#b42318; --warn-soft:#fdecea;
  --won:#15803d; --lost:#6b7280; --r:14px;
  --status-new:#1d4ed8; --status-contacted:#7c3aed; --status-quoted:#b45309; --status-won:#15803d; --status-lost:#6b7280;
}
*{box-sizing:border-box;}
html,body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%;}
[hidden]{display:none!important;}
#app{max-width:880px;margin:0 auto;padding:calc(16px + env(safe-area-inset-top,0px)) 16px calc(32px + env(safe-area-inset-bottom,0px));}
h1{font-size:1.5rem;line-height:1.2;margin:0;}
h2{font-size:1.05rem;margin:0 0 12px;}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}

.btn{font:inherit;font-weight:650;border-radius:10px;border:1px solid transparent;padding:12px 18px;cursor:pointer;min-height:44px;}
.btn.primary{background:var(--accent);color:var(--accent-ink);width:100%;}
.btn.primary[disabled]{opacity:.6;cursor:progress;}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--ink-2);}
.btn.small{padding:8px 12px;min-height:40px;font-size:.9rem;}

.login{min-height:80vh;display:grid;place-items:center;}
.login-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px 22px;width:100%;max-width:380px;box-shadow:0 10px 30px -18px rgba(15,23,42,.35);}
.logo{width:48px;height:48px;border-radius:12px;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:800;font-size:1.3rem;margin-bottom:14px;}
.login-card p{color:var(--muted);margin:6px 0 18px;}
.login-card label{display:block;font-weight:650;font-size:.9rem;margin-bottom:6px;}
.login-card input{width:100%;font:inherit;padding:12px 14px;border:1px solid #cbd5e1;border-radius:10px;margin-bottom:14px;background:#fff;color:var(--ink);}
.error{color:var(--warn);background:var(--warn-soft);border-radius:10px;padding:10px 12px;margin:12px 0 0;font-size:.92rem;}

.top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin:4px 0 16px;}
.eyebrow{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;}
.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px;}
.seg{display:flex;background:#e8ecf2;border-radius:12px;padding:4px;gap:4px;}
.seg button{font:inherit;font-size:.9rem;font-weight:650;border:0;background:transparent;color:var(--ink-2);padding:8px 12px;border-radius:9px;cursor:pointer;min-height:40px;}
.seg button[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(15,23,42,.12);}
.client-pick select{font:inherit;padding:9px 12px;border-radius:10px;border:1px solid #cbd5e1;background:#fff;min-height:44px;}

.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;}
.tile .k{font-size:.78rem;color:var(--muted);font-weight:650;}
.tile .v{font-size:1.5rem;font-weight:750;margin-top:4px;font-variant-numeric:tabular-nums;}
.tile .s{font-size:.78rem;color:var(--muted);margin-top:2px;}
.note{font-size:.8rem;color:var(--muted);margin:8px 2px 16px;}

.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:14px;}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.panel-head h2{margin:0;}
.bar-row{display:grid;grid-template-columns:130px 1fr 34px;gap:10px;align-items:center;margin:8px 0;font-size:.92rem;}
.bar{height:10px;background:#eef2f6;border-radius:6px;overflow:hidden;}
.bar span{display:block;height:100%;background:var(--accent);border-radius:6px;}
.bar-row .n{text-align:right;font-variant-numeric:tabular-nums;font-weight:650;}

.lead{border-top:1px solid var(--line);padding:14px 0;}
.lead:first-child{border-top:0;}
.lead-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;}
.lead-name{font-weight:700;font-size:1.05rem;}
.lead-meta{font-size:.84rem;color:var(--muted);margin-top:2px;}
.pill{display:inline-block;font-size:.75rem;font-weight:700;padding:3px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent);white-space:nowrap;}
.pill.status-new{background:#e8efff;color:var(--status-new);}
.pill.status-contacted{background:#f1eaff;color:var(--status-contacted);}
.pill.status-quoted{background:#fff3e0;color:var(--status-quoted);}
.pill.status-won{background:#e7f6ec;color:var(--status-won);}
.pill.status-lost{background:#eef0f3;color:var(--status-lost);}
.lead-msg{margin:10px 0 0;color:var(--ink-2);font-size:.95rem;white-space:pre-wrap;word-break:break-word;}
.lead-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;align-items:center;}
.lead-actions a.btn{text-decoration:none;display:inline-flex;align-items:center;}
.lead-actions a.call{background:var(--accent);color:#fff;}
.lead-actions select,.lead-actions input{font:inherit;padding:9px 10px;border-radius:10px;border:1px solid #cbd5e1;background:#fff;min-height:44px;color:var(--ink);}
.lead-actions input{width:130px;}
.lead-actions .save-state{font-size:.84rem;color:var(--muted);}
.empty{color:var(--muted);padding:18px 0 6px;}
.updated{font-size:.78rem;color:var(--muted);text-align:center;}

@media (max-width:640px){
  .tiles{grid-template-columns:repeat(2,1fr);}
  .bar-row{grid-template-columns:100px 1fr 30px;}
  .seg{width:100%;}
  .seg button{flex:1;}
  .client-pick,.client-pick select{width:100%;}
}