:root{
  --bg:#0a0a0a; --bg2:#141414; --bg3:#1c1c1c; --line:#2a2a2a;
  --red:#e63030; --red2:#ff4444; --txt:#f2f2f2; --mut:#9a9a9a;
  --ok:#2ecc71; --warn:#f1c40f;
  --novo:#3b82f6; --contatado:#a855f7; --qualificado:#06b6d4;
  --negociando:#f1c40f; --ganho:#2ecc71; --perdido:#888;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--txt);font-family:Inter,system-ui,sans-serif;font-size:15px;-webkit-font-smoothing:antialiased}
.hidden{display:none !important}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:15px}
a{color:var(--red2);text-decoration:none}

/* LOGIN */
.login-view{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:32px 26px;width:100%;max-width:360px;display:flex;flex-direction:column;gap:14px}
.login-logo{color:var(--red);font-weight:800;font-size:20px;letter-spacing:.5px}
.login-card h1{font-size:16px;color:var(--mut);font-weight:500;margin-bottom:6px}
.login-card label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--mut)}
.login-card input{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px;color:var(--txt)}
.login-card input:focus{outline:none;border-color:var(--red)}
.login-card button{background:var(--red);color:#fff;border:none;border-radius:10px;padding:13px;font-weight:700;margin-top:6px}
.login-card button:disabled{opacity:.6}
.login-err{color:var(--red2);font-size:13px;min-height:16px;text-align:center}

/* TOPBAR */
.app-view{max-width:1100px;margin:0 auto;padding-bottom:40px}
.topbar{position:sticky;top:0;z-index:10;background:rgba(10,10,10,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:14px 16px}
.brand{color:var(--red);font-size:17px}.brand strong{color:var(--txt)}
.topbar-right{display:flex;align-items:center;gap:12px}
.whoami{color:var(--mut);font-size:13px}
.btn-ghost{background:var(--bg3);border:1px solid var(--line);color:var(--txt);border-radius:9px;padding:9px 11px}

/* STATS */
.stats-bar{display:flex;gap:8px;overflow-x:auto;padding:14px 16px 4px;scrollbar-width:none}
.stats-bar::-webkit-scrollbar{display:none}
.stat-chip{flex:0 0 auto;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:13px;color:var(--mut);white-space:nowrap}
.stat-chip b{color:var(--txt);font-size:16px;margin-right:5px}

/* FILTERS */
.filters{display:flex;gap:8px;padding:10px 16px;flex-wrap:wrap}
.filters input,.filters select{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:11px;color:var(--txt)}
.filters #fSearch{flex:1 1 220px}
.filters select{flex:0 1 auto}
.filters input:focus,.filters select:focus{outline:none;border-color:var(--red)}

/* LEADS */
.leads-list{display:flex;flex-direction:column;gap:10px;padding:8px 16px}
.lead-card{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px}
.lead-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.lead-name{font-weight:700;font-size:16px}
.lead-sub{color:var(--mut);font-size:13px;margin-top:2px}
.lead-meta{display:flex;flex-wrap:wrap;gap:6px}
.tag{background:var(--bg3);border:1px solid var(--line);border-radius:7px;padding:3px 8px;font-size:12px;color:var(--mut)}
.tag i{margin-right:4px;opacity:.7}
.tag-ok{border-color:#1e7f55;color:#5fd39a}
.lead-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.wa-btn{background:#1f9d55;color:#fff;border:none;border-radius:9px;padding:10px 13px;font-weight:600;display:inline-flex;align-items:center;gap:7px}
.open-btn{background:var(--bg3);border:1px solid var(--line);color:var(--txt);border-radius:9px;padding:10px 13px}
.status-select{border:none;border-radius:9px;padding:10px 12px;font-weight:600;color:#fff;appearance:none;-webkit-appearance:none}
.st-novo{background:var(--novo)}.st-contatado{background:var(--contatado)}.st-qualificado{background:var(--qualificado)}
.st-negociando{background:var(--negociando);color:#222}.st-ganho{background:var(--ganho);color:#0a2a16}.st-perdido{background:var(--perdido)}
.empty{color:var(--mut);text-align:center;padding:40px 16px}

/* PAGER */
.pager{display:flex;justify-content:center;align-items:center;gap:14px;padding:18px;color:var(--mut)}
.pager button{background:var(--bg3);border:1px solid var(--line);color:var(--txt);border-radius:9px;padding:9px 14px}
.pager button:disabled{opacity:.4}

/* DRAWER */
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:20}
.drawer{position:fixed;top:0;right:0;height:100dvh;width:min(440px,100%);background:var(--bg2);border-left:1px solid var(--line);z-index:21;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:16px}
.drawer h2{font-size:20px}
.drawer .dr-close{position:absolute;top:14px;right:14px;background:var(--bg3);border:1px solid var(--line);color:var(--txt);border-radius:9px;padding:8px 11px}
.dr-block{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:14px}
.dr-block h3{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--mut);margin-bottom:10px}
.dr-row{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:14px;border-bottom:1px dashed var(--line)}
.dr-row:last-child{border-bottom:none}
.dr-row span{color:var(--mut)}.dr-row b{text-align:right;word-break:break-word}
.dr-controls{display:flex;flex-direction:column;gap:10px}
.dr-controls select,.dr-controls textarea{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:11px;color:var(--txt);width:100%}
.dr-controls textarea{min-height:80px;resize:vertical}
.dr-save{background:var(--red);color:#fff;border:none;border-radius:10px;padding:12px;font-weight:700}
.timeline{display:flex;flex-direction:column;gap:0}
.tl-item{display:flex;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:13px}
.tl-item:last-child{border-bottom:none}
.tl-dot{flex:0 0 9px;height:9px;border-radius:50%;background:var(--red);margin-top:5px}
.tl-body{flex:1}
.tl-ev{font-weight:600}
.tl-ts{color:var(--mut);font-size:12px}
.badge{font-size:11px;padding:2px 7px;border-radius:6px;margin-left:6px}
.badge-ok{background:rgba(46,204,113,.15);color:var(--ok)}
.badge-err{background:rgba(230,48,48,.15);color:var(--red2)}

@media (min-width:680px){
  .lead-card{flex-direction:row;align-items:center;justify-content:space-between}
  .lead-left{flex:1}
  .lead-actions{flex:0 0 auto}
}