:root{
  --bg:#F4F1E9; --card:#ffffff; --ink:#242a38; --muted:#8b90a0;
  --line:#ece8dd; --primary:#6C5CE7; --primary-2:#8B7BF7; --pink:#EC5B9B;
  --green:#27c093; --amber:#f6b73c; --red:#ef5b6d;
  --radius:18px; --radius-sm:12px; --shadow:0 6px 24px rgba(31,36,56,.06);
  --shadow-hover:0 10px 30px rgba(31,36,56,.10);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg); color:var(--ink); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}

/* ---- shell ---- */
.shell{display:flex;min-height:100vh}
.sidebar{
  width:248px;flex:0 0 248px;padding:22px 16px;position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;gap:26px;
}
.brand{display:flex;align-items:center;gap:10px;padding:6px 10px;font-size:20px;font-weight:600}
.brand-mark{font-size:26px}
.brand-text b{color:var(--primary)}
.nav{display:flex;flex-direction:column;gap:4px}
.nav-item{
  display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:var(--radius-sm);
  color:#5f6474;font-weight:500;transition:.15s;
}
.nav-item:hover{background:#fff;color:var(--ink)}
.nav-item.active{background:var(--primary);color:#fff;box-shadow:0 6px 16px rgba(108,92,231,.35)}
.nav-item.disabled{opacity:.45;cursor:default}
.nav-ico{width:22px;text-align:center;font-size:16px}
.soon{margin-left:auto;font-size:10px;background:#eee;color:#999;padding:2px 7px;border-radius:20px;font-weight:600}

/* ---- main ---- */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:22px 34px 10px}
.page-title{font-size:24px;font-weight:600;margin:0}
.topbar-right{display:flex;align-items:center;gap:14px}
.user-chip{display:flex;align-items:center;gap:9px;background:#fff;padding:6px 14px 6px 6px;border-radius:40px;box-shadow:var(--shadow)}
.avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--pink));color:#fff;display:grid;place-items:center;font-weight:600;font-size:14px}
.user-name{font-weight:500;font-size:14px}
.content{padding:16px 34px 40px;max-width:1200px}

/* ---- cards ---- */
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;margin-bottom:20px}
.card h2{margin:0 0 14px;font-size:17px;font-weight:600}
.grid{display:grid;gap:18px}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.grid.cols-4,.grid.cols-3,.grid.cols-2{grid-template-columns:1fr 1fr}.sidebar{display:none}}

/* ---- stat tiles ---- */
.stat{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 24px;transition:.15s}
.stat:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}
.stat .num{font-size:30px;font-weight:700;line-height:1}
.stat .lbl{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em;margin-top:8px;font-weight:600}
.stat.p .num{color:var(--primary)} .stat.g .num{color:var(--green)}
.stat.k .num{color:var(--pink)} .stat.a .num{color:var(--amber)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:12px;font-weight:600;font-size:14px;border:0;cursor:pointer;font-family:inherit;transition:.15s}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 6px 16px rgba(108,92,231,.30)}
.btn-primary:hover{background:#5b4bd6}
.btn-ghost{background:#fff;color:var(--ink);box-shadow:var(--shadow)}
.btn-ghost:hover{background:#faf9f5}

/* ---- forms ---- */
.field{margin-bottom:16px}
.field label{display:block;font-weight:600;font-size:13px;margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;font-family:inherit;font-size:15px;background:#fff;transition:.15s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px rgba(108,92,231,.12)}

/* ---- flash ---- */
.flash{padding:13px 18px;border-radius:12px;margin-bottom:18px;font-weight:500}
.flash-success{background:#e6f8f1;color:#12805c}
.flash-error{background:#fdecef;color:#c23046}
.flash-info{background:#eef0ff;color:#4a45c8}

/* ---- login ---- */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:20px}
.auth-card{width:100%;max-width:400px;background:#fff;border-radius:22px;box-shadow:var(--shadow-hover);padding:36px}
.auth-brand{text-align:center;font-size:26px;font-weight:700;margin-bottom:6px}
.auth-brand b{color:var(--primary)}
.auth-sub{text-align:center;color:var(--muted);margin-bottom:26px;font-size:14px}

/* ---- table ---- */
.table{width:100%;border-collapse:collapse}
.table th{text-align:left;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding:10px 12px;border-bottom:1px solid var(--line)}
.table td{padding:12px;border-bottom:1px solid var(--line)}
.table tr:last-child td{border-bottom:0}
.muted{color:var(--muted)}
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600}
.badge-client{background:#e6f8f1;color:#12805c}
.badge-lead{background:#fff3df;color:#b5760a}