:root{--bg:#0f1115;--card:#151823;--muted:#9aa4b2;--text:#eef2ff;--primary:#7c3aed;--border:#222638;--green:#22c55e;--red:#ef4444;--yellow:#f59e0b;--blue:#3b82f6}
*{box-sizing:border-box}
body{margin:0;background:#0b0e14;color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.app-main{max-width:1100px;margin:0 auto;padding:24px}
.app-header .brand-text{font-size:18px}
.app-nav a{transition:background .2s ease,border-color .2s ease}
a{color:#93c5fd}
h1,h2,h3{margin:0 0 12px 0}
.app-header{position:sticky;top:0;display:flex;gap:16px;align-items:center;justify-content:space-between;padding:14px 20px;background:#0b0e14;border-bottom:1px solid var(--border)}
.brand{font-weight:700;letter-spacing:.4px}
.brand-group{display:flex;gap:10px;align-items:center}
.brand-img{height:24px;width:auto}
.brand-text{font-weight:800}
.app-nav{display:flex;gap:8px}
.app-nav a{color:var(--text);text-decoration:none;padding:8px 12px;border:1px solid var(--border);border-radius:8px;background:#0f1322}
.app-nav a.active{background:var(--primary);border-color:var(--primary)}
.ghost{background:transparent;border:1px solid var(--border);color:var(--text);padding:8px 12px;border-radius:8px}
.app-main{padding:24px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;box-shadow:0 1px 2px rgba(0,0,0,.4);text-align:center}
.layout{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-top:20px;align-items:start}
.list{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px}
.panel{background:linear-gradient(180deg,#121622,#0f1115);border:1px solid #262a3e;border-radius:20px;padding:20px;box-shadow:0 12px 36px rgba(0,0,0,.35)}
.lead-header{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.lead-title{font-size:20px;font-weight:800}
.lead-sub{color:var(--muted);margin-top:2px}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.actions .ghost{background:#0f1322;border-color:#2b3148}
.actions .ghost:hover{border-color:#7c3aed}
table{width:100%;border-collapse:collapse}
th,td{border-bottom:1px solid var(--border);padding:10px}
thead th{position:sticky;top:0;background:#151823;z-index:1}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:14px;padding:4px 8px;border-radius:999px;background:#0f1322}
.online{color:var(--green)}.offline{color:var(--red)}.in_call{color:var(--yellow)}.idle{color:var(--blue)}
.muted{color:var(--muted)}
input,select,button{background:#0f1322;border:1px solid var(--border);color:var(--text);padding:10px;border-radius:8px}
button.primary{background:var(--primary);border-color:var(--primary)}
.primary:hover{filter:brightness(1.1)}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.btn{padding:14px 20px;border-radius:14px;border-width:1px;border-style:solid;cursor:pointer;transition:transform .05s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease}
.btn-red{background:linear-gradient(180deg,#2b0f13,#1e0f14);border-color:#7f1d1d;color:#fecaca}
.btn-red:hover{border-color:#ef4444;box-shadow:0 8px 24px rgba(239,68,68,.2)}
.btn-blue{background:linear-gradient(180deg,#101a2c,#0f1624);border-color:#1e3a8a;color:#bfdbfe}
.btn-blue:hover{border-color:#3b82f6;box-shadow:0 8px 24px rgba(59,130,246,.2)}
.btn-yellow{background:linear-gradient(180deg,#201f12,#1a1912);border-color:#a16207;color:#fde68a}
.btn-yellow:hover{border-color:#f59e0b;box-shadow:0 8px 24px rgba(245,158,11,.2)}
.btn-green{background:linear-gradient(180deg,#142417,#0f1e14);border-color:#166534;color:#a7f3d0}
.btn-green:hover{border-color:#22c55e;box-shadow:0 8px 24px rgba(34,197,94,.2)}
.panel{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:20px;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.lead-info{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.25)}
.ghost{padding:10px 14px;border-radius:12px;border:1px solid var(--border);cursor:pointer}
.ghost.tag{border-color:#475569;background:#0f1322;color:#e2e8f0}
.ghost.tag.active{background:#172031;border-color:#7c3aed;color:#c4b5fd}
.seg{display:flex;gap:10px}
.seg button{min-width:140px}
.seg .active{outline:2px solid var(--primary)}
.ghost.active{background:#1b2031;border-color:#7c3aed;color:#c4b5fd}
.pop{position:absolute;background:#0f1322;border:1px solid var(--border);border-radius:10px;padding:8px;box-shadow:0 8px 24px rgba(0,0,0,.3);z-index:10}
.pop button{display:block;width:100%;text-align:left;padding:8px 10px;border-radius:8px}
.pop button:hover{background:#12182a}
.input-icon{position:relative}
.input-icon input{padding-left:40px}
.input-icon .icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);opacity:.7}
.eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);opacity:.7;cursor:pointer}
.login-bg{min-height:100vh;background:radial-gradient(1000px 500px at 50% 10%, rgba(124,58,237,.25), transparent), #0b0e14;}
.panel-strong{width:420px;background:rgba(21,24,35,.9);backdrop-filter:blur(4px);border:1px solid var(--border);border-radius:16px;padding:24px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.panel-title{margin-top:0;margin-bottom:18px}
.fields{display:flex;flex-direction:column;gap:12px;margin-bottom:14px}
.btn-wrap{margin-top:6px}
.btn-xl{height:44px;font-weight:600;border-radius:12px}
.hint{font-size:12px;color:#8b93a8;margin-top:6px}
.tools{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.tools input{width:260px}