:root{
  --navy:#0E2A47;
  --navy-2:#163a5f;
  --gold:#C9A84A;
  --cloud:#F5F8FC;
  --ink:#1b2430;
  --muted:#5b6b7d;
  --border:#e1e8f0;
  --surface:#ffffff;
  --bg:#eef2f7;
  --success:#1e7d4f;
  --success-bg:#e7f6ee;
  --warning:#95660a;
  --warning-bg:#fdf1dc;
  --danger:#b3261e;
  --danger-bg:#fbe9e8;
}
@media (prefers-color-scheme: dark){
  :root{
    --ink:#e8edf4;
    --muted:#9fb0c3;
    --border:#26364a;
    --surface:#101a29;
    --bg:#0a1220;
    --cloud:#132038;
    --success-bg:#0f2a1d;
    --warning-bg:#2c210a;
    --danger-bg:#2b1412;
  }
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Public Sans', -apple-system, Segoe UI, Roboto, sans-serif;
  font-size:14px;
  line-height:1.5;
}
h1,h2,h3{
  font-family:'Source Serif 4', Georgia, serif;
  color:var(--navy);
  margin:0 0 .4em;
  text-wrap:balance;
}
@media (prefers-color-scheme: dark){ h1,h2,h3{ color:#dfe8f5; } }
a{color:var(--navy-2);}
.container{max-width:1200px;margin:0 auto;padding:0 20px;}

/* ---- Top nav ---- */
.topbar{
  background:var(--navy);
  color:#fff;
  border-bottom:3px solid var(--gold);
}
.topbar .container{
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  padding-block:12px;
}
.brand{
  font-family:'Source Serif 4', Georgia, serif;
  font-weight:600; font-size:1.15rem; color:#fff; text-decoration:none;
  letter-spacing:.02em;
  white-space:nowrap;
}
.brand small{display:block; font-family:'Public Sans',sans-serif; font-size:.62rem; letter-spacing:.14em; color:var(--gold); text-transform:uppercase; font-weight:600;}
.nav{display:flex; gap:4px; flex-wrap:wrap; flex:1;}
.nav a{
  color:#cfd9e6; text-decoration:none; padding:8px 12px; border-radius:6px;
  font-size:.88rem; font-weight:600;
}
.nav a:hover{background:rgba(255,255,255,.08); color:#fff;}
.nav a.active{background:var(--gold); color:var(--navy);}
.userbadge{display:flex; align-items:center; gap:10px; color:#dfe8f5; font-size:.85rem;}
.userbadge .role{
  background:rgba(201,168,74,.18); border:1px solid var(--gold); color:var(--gold);
  padding:2px 8px; border-radius:999px; font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
}
.userbadge a{color:#cfd9e6; text-decoration:underline; font-size:.8rem;}

main{padding-block:28px 60px;}
.page-head{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:20px;}
.page-head p{color:var(--muted); margin:.2em 0 0;}

.btn{
  display:inline-flex; align-items:center; gap:6px; justify-content:center;
  border:1px solid var(--border); background:var(--surface); color:var(--ink);
  padding:8px 14px; border-radius:7px; font-size:.85rem; font-weight:600; cursor:pointer;
  text-decoration:none; line-height:1.2;
}
.btn:hover{border-color:var(--navy-2);}
.btn.primary{background:var(--navy); border-color:var(--navy); color:#fff;}
.btn.primary:hover{background:var(--navy-2);}
.btn.gold{background:var(--gold); border-color:var(--gold); color:var(--navy);}
.btn.danger{background:var(--danger); border-color:var(--danger); color:#fff;}
.btn.danger-txt{background:transparent; border-color:transparent; color:var(--danger);}
.btn.small{padding:5px 10px; font-size:.78rem;}
.btn[disabled]{opacity:.5; cursor:not-allowed;}

.card{background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:18px;}
.grid{display:grid; gap:16px;}
.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;} }
@media (max-width:600px){ .grid.cols-4,.grid.cols-3,.grid.cols-2{grid-template-columns:1fr;} }

.stat{padding:16px 18px;}
.stat .label{font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700;}
.stat .value{font-family:'Source Serif 4',serif; font-size:1.7rem; color:var(--navy); font-variant-numeric:tabular-nums; margin-top:4px;}
@media (prefers-color-scheme: dark){ .stat .value{color:#dfe8f5;} }
.stat .sub{font-size:.76rem; color:var(--muted); margin-top:2px;}

table{width:100%; border-collapse:collapse; font-size:.86rem;}
th,td{padding:10px 12px; text-align:left; border-bottom:1px solid var(--border);}
th{font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; background:var(--cloud);}
tr:hover td{background:var(--cloud);}
.table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:10px;}
.table-wrap table{border:none;}
.table-wrap .table-wrap{border:none;}

.pill{display:inline-block; padding:3px 10px; border-radius:999px; font-size:.72rem; font-weight:700; letter-spacing:.02em;}
.pill.success{background:var(--success-bg); color:var(--success);}
.pill.warning{background:var(--warning-bg); color:var(--warning);}
.pill.danger{background:var(--danger-bg); color:var(--danger);}
.pill.neutral{background:var(--cloud); color:var(--muted);}

.flash{padding:12px 16px; border-radius:8px; margin-bottom:18px; font-size:.88rem; font-weight:600;}
.flash.success{background:var(--success-bg); color:var(--success); border:1px solid var(--success);}
.flash.error{background:var(--danger-bg); color:var(--danger); border:1px solid var(--danger);}

form.inline{display:inline;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px 18px;}
@media (max-width:700px){ .form-grid{grid-template-columns:1fr;} }
.field{display:flex; flex-direction:column; gap:5px;}
.field.full{grid-column:1/-1;}
.field label{font-size:.75rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.03em;}
.field input, .field select, .field textarea{
  padding:9px 11px; border:1px solid var(--border); border-radius:7px; font-size:.88rem;
  background:var(--surface); color:var(--ink); font-family:inherit;
}
.field textarea{resize:vertical; min-height:70px;}
.field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold);}

.modal-overlay{
  position:fixed; inset:0; background:rgba(10,18,32,.55); display:flex; align-items:flex-start;
  justify-content:center; padding:40px 16px; overflow-y:auto; z-index:50;
}
.modal{background:var(--surface); border-radius:12px; max-width:640px; width:100%; padding:24px; border:1px solid var(--border);}
.modal h2{margin-top:0;}
.modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:20px; border-top:1px solid var(--border); padding-top:16px;}

/* ---- Kanban ---- */
.kanban{display:flex; gap:14px; overflow-x:auto; padding-bottom:10px;}
.kanban-col{background:var(--cloud); border:1px solid var(--border); border-radius:10px; min-width:250px; flex:1 0 250px; padding:12px;}
.kanban-col h3{font-family:'Public Sans',sans-serif; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); display:flex; justify-content:space-between; margin-bottom:10px;}
.kanban-col h3 .count{background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:1px 8px; font-weight:700; color:var(--ink);}
.lead-card{background:var(--surface); border:1px solid var(--border); border-radius:9px; padding:12px; margin-bottom:10px;}
.lead-card .brand{font-weight:700; color:var(--navy); font-size:.92rem; margin-bottom:2px;}
@media (prefers-color-scheme: dark){ .lead-card .brand{color:#dfe8f5;} }
.lead-card .meta{font-size:.76rem; color:var(--muted); margin-bottom:8px;}
.lead-card .value{font-variant-numeric:tabular-nums; font-weight:700; font-size:.84rem; color:var(--ink);}
.lead-card .row-actions{display:flex; gap:6px; margin-top:8px; flex-wrap:wrap;}
.lead-card select{font-size:.75rem; padding:4px 6px; border-radius:6px; border:1px solid var(--border);}

.tabs{display:flex; gap:4px; border-bottom:2px solid var(--border); margin-bottom:20px; flex-wrap:wrap;}
.tabs a{padding:9px 16px; text-decoration:none; color:var(--muted); font-weight:700; font-size:.85rem; border-bottom:2px solid transparent; margin-bottom:-2px;}
.tabs a.active{color:var(--navy); border-color:var(--gold);}
@media (prefers-color-scheme: dark){ .tabs a.active{color:#dfe8f5;} }

.empty{color:var(--muted); font-style:italic; padding:20px; text-align:center;}
.small-muted{color:var(--muted); font-size:.78rem;}
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--navy); padding:20px;}
.login-card{background:var(--surface); padding:32px; border-radius:14px; width:100%; max-width:380px; border-top:4px solid var(--gold);}
.login-card h1{text-align:center; margin-bottom:4px;}
.login-card .sub{text-align:center; color:var(--muted); font-size:.82rem; margin-bottom:22px;}
.login-card .field{margin-bottom:14px;}
.login-card .btn{width:100%;}