@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Manrope:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink:#12132A;
  --ink-soft:#1B1C3D;
  --lime:#C6FF3D;
  --cream:#F7F5EF;
  --coral:#FF5A3C;
  --muted:#8a8a9a;
  --line: rgba(247,245,239,.12);
  --line-dark: rgba(18,19,42,.1);
  --radius: 14px;
}
*{box-sizing:border-box;}
body{
  margin:0; min-height:100vh; background:var(--cream); color:var(--ink);
  font-family:'Manrope',sans-serif; font-size:15px;
}
.mono{font-family:'IBM Plex Mono',monospace;}
a{color:inherit;}

/* ---------- LOGIN ---------- */
.login-shell{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(1100px 500px at 20% -10%, #1c1e4a 0%, var(--ink) 55%);
  padding:24px;
}
.login-card{
  background:var(--cream); border-radius:20px; padding:40px 36px; width:100%; max-width:380px;
  box-shadow:0 30px 60px rgba(0,0,0,.35);
}
.login-brand{display:flex; align-items:center; gap:10px; font-family:'Space Grotesk'; font-weight:700; font-size:16px; margin-bottom:28px;}
.login-brand svg{width:24px; height:24px;}
.login-card h1{font-family:'Space Grotesk'; font-size:22px; margin:0 0 6px;}
.login-card .sub{font-size:13px; color:var(--muted); margin-bottom:26px;}
.field{margin-bottom:16px;}
.field label{display:block; font-family:'IBM Plex Mono'; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:6px;}
.field input{
  width:100%; padding:11px 14px; border-radius:10px; border:1px solid var(--line-dark);
  font-family:'Manrope'; font-size:14px; background:#fff;
}
.field input:focus{outline:2px solid var(--ink); outline-offset:1px;}
.btn-block{
  width:100%; padding:13px; border-radius:10px; border:none; background:var(--ink); color:var(--cream);
  font-weight:700; font-size:14px; cursor:pointer; margin-top:6px;
}
.btn-block:hover{background:var(--ink-soft);}
.btn-block:disabled{opacity:.6; cursor:default;}
.error-box{
  background:rgba(255,90,60,.1); border:1px solid rgba(255,90,60,.35); color:#b23c26;
  font-size:13px; padding:10px 12px; border-radius:10px; margin-bottom:16px; display:none;
}
.error-box.show{display:block;}

/* ---------- DASHBOARD SHELL ---------- */
.topbar{
  background:var(--ink); color:var(--cream); padding:16px 28px;
  display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:10;
}
.topbar .brand{display:flex; align-items:center; gap:10px; font-family:'Space Grotesk'; font-weight:700; font-size:15px;}
.topbar .brand svg{width:22px; height:22px;}
.topbar .tag{font-family:'IBM Plex Mono'; font-size:11px; color:var(--lime); border:1px solid rgba(198,255,61,.35); padding:4px 10px; border-radius:100px; margin-left:10px;}
.topbar-right{display:flex; align-items:center; gap:16px;}
.topbar-right span{font-size:13px; color:rgba(247,245,239,.7);}
.btn-ghost-sm{
  background:transparent; border:1px solid rgba(247,245,239,.3); color:var(--cream);
  font-size:12px; padding:7px 14px; border-radius:100px; cursor:pointer;
}
.btn-ghost-sm:hover{border-color:var(--cream);}

.dash-wrap{max-width:1180px; margin:0 auto; padding:32px 28px 80px;}

/* stat cards */
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:36px;}
@media (max-width:820px){ .stat-grid{grid-template-columns:repeat(2,1fr);} }
.stat-card{background:#fff; border:1px solid var(--line-dark); border-radius:16px; padding:20px;}
.stat-card .label{font-family:'IBM Plex Mono'; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:10px;}
.stat-card .value{font-family:'Space Grotesk'; font-size:28px; font-weight:700;}
.stat-card .value.lime{color:#7a9c1e;}
.stat-card .value.coral{color:var(--coral);}

/* filters */
.filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px;}
.filters input, .filters select{
  padding:9px 12px; border-radius:10px; border:1px solid var(--line-dark); font-size:13px; background:#fff; font-family:'Manrope';
}
.filters input{flex:1; min-width:180px;}

/* table */
.table-shell{background:#fff; border:1px solid var(--line-dark); border-radius:16px; overflow:hidden;}
table{width:100%; border-collapse:collapse;}
thead th{
  text-align:left; font-family:'IBM Plex Mono'; font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--muted); padding:14px 16px; border-bottom:1px solid var(--line-dark); white-space:nowrap;
}
tbody td{padding:14px 16px; border-bottom:1px solid var(--line-dark); font-size:13.5px; vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:#fafaf7;}
.acc-name{font-weight:700;}
.acc-email{font-size:12px; color:var(--muted);}

.badge{display:inline-block; font-family:'IBM Plex Mono'; font-size:10.5px; padding:3px 9px; border-radius:100px; text-transform:uppercase; letter-spacing:.03em;}
.badge-active{background:rgba(198,255,61,.18); color:#5b7a17;}
.badge-past_due{background:rgba(255,180,60,.18); color:#946617;}
.badge-suspended, .badge-cancelled{background:rgba(255,90,60,.14); color:#b23c26;}

.plan-pill{font-family:'IBM Plex Mono'; font-size:10.5px; padding:3px 9px; border-radius:100px; background:var(--ink); color:var(--cream); text-transform:uppercase;}

.usage-bar{width:100px; height:6px; border-radius:100px; background:var(--line-dark); overflow:hidden; margin-top:5px;}
.usage-bar-fill{height:100%; background:var(--ink);}
.usage-bar-fill.warn{background:var(--coral);}
.usage-text{font-size:11.5px; color:var(--muted); font-family:'IBM Plex Mono';}

.empty-state, .loading-state{padding:60px 20px; text-align:center; color:var(--muted); font-size:14px;}

/* ---------- CLIENT PANEL: plan banner ---------- */
.plan-banner{
  background:var(--ink); color:var(--cream); border-radius:16px; padding:20px 24px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:28px;
}
.plan-banner .plan-name{font-family:'Space Grotesk'; font-weight:700; font-size:16px;}
.plan-banner .plan-name .pill{font-family:'IBM Plex Mono'; font-size:10.5px; background:var(--lime); color:var(--ink); padding:3px 10px; border-radius:100px; margin-left:8px; text-transform:uppercase;}
.plan-banner .plan-metrics{display:flex; gap:26px; flex-wrap:wrap;}
.plan-banner .metric{font-family:'IBM Plex Mono'; font-size:11.5px; color:rgba(247,245,239,.7);}
.plan-banner .metric strong{display:block; font-family:'Space Grotesk'; font-size:17px; color:var(--cream); font-weight:700;}
.plan-banner .metric strong.warn{color:var(--coral);}
.plan-banner a.upgrade{
  font-family:'IBM Plex Mono'; font-size:11.5px; color:var(--lime); text-decoration:none; border:1px solid rgba(198,255,61,.35);
  padding:7px 14px; border-radius:100px; white-space:nowrap;
}

/* ---------- CLIENT PANEL: campaign cards ---------- */
.section-toolbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:12px;}
.section-toolbar h2{font-family:'Space Grotesk'; font-size:18px; margin:0;}
.btn-primary-sm{
  background:var(--ink); color:var(--cream); border:none; font-family:'Manrope'; font-weight:700; font-size:13px;
  padding:10px 18px; border-radius:10px; cursor:pointer;
}
.btn-primary-sm:hover{background:var(--ink-soft);}

.campaign-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:16px;}
.campaign-card{background:#fff; border:1px solid var(--line-dark); border-radius:16px; padding:20px; display:flex; flex-direction:column; gap:12px;}
.campaign-card .top-row{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.campaign-card .swatch{width:14px; height:14px; border-radius:4px; flex-shrink:0; border:1px solid var(--line-dark);}
.campaign-card h3{font-family:'Space Grotesk'; font-size:15.5px; margin:0; flex-grow:1;}
.campaign-card .slug{font-family:'IBM Plex Mono'; font-size:11px; color:var(--muted);}
.campaign-card .card-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:auto;}
.btn-tiny{
  font-family:'Manrope'; font-size:12px; font-weight:600; padding:7px 12px; border-radius:8px; cursor:pointer;
  border:1px solid var(--line-dark); background:#fff; color:var(--ink);
}
.btn-tiny:hover{background:#f2f1ec;}
.btn-tiny.primary{background:var(--ink); color:var(--cream); border-color:transparent;}
.btn-tiny.primary:hover{background:var(--ink-soft);}
.btn-tiny.danger{color:var(--coral); border-color:rgba(255,90,60,.3);}

/* ---------- MODAL ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(18,19,42,.55); display:none; align-items:center; justify-content:center; z-index:100; padding:20px;
}
.modal-overlay.show{display:flex;}
.modal-box{background:var(--cream); border-radius:18px; padding:28px 26px; width:100%; max-width:420px;}
.modal-box h3{font-family:'Space Grotesk'; margin:0 0 18px;}
.modal-actions{display:flex; gap:10px; justify-content:flex-end; margin-top:20px;}
.btn-secondary-sm{background:transparent; border:1px solid var(--line-dark); color:var(--ink); font-size:13px; padding:9px 16px; border-radius:10px; cursor:pointer; font-family:'Manrope'; font-weight:600;}

/* ---------- PRIZES ---------- */
.prize-row{
  display:flex; align-items:center; gap:16px; background:#fff; border:1px solid var(--line-dark);
  border-radius:14px; padding:16px 18px; margin-bottom:10px;
}
.prize-row .prize-swatch{width:34px; height:34px; border-radius:8px; flex-shrink:0; border:1px solid var(--line-dark);}
.prize-row .prize-main{flex-grow:1; min-width:0;}
.prize-row .prize-main h4{font-family:'Space Grotesk'; font-size:14.5px; margin:0 0 3px;}
.prize-row .prize-main p{font-size:12.5px; color:var(--muted); margin:0;}
.prize-row .prize-stats{display:flex; gap:18px; flex-shrink:0;}
.prize-row .prize-stats .stat{font-family:'IBM Plex Mono'; font-size:11px; color:var(--muted); text-align:center;}
.prize-row .prize-stats .stat strong{display:block; font-family:'Space Grotesk'; font-size:15px; color:var(--ink);}
.prize-row .prize-actions{display:flex; gap:6px; flex-shrink:0;}
.prize-row.inactive{opacity:.5;}
.back-link{font-size:13px; color:var(--muted); text-decoration:none; display:inline-block; margin-bottom:14px;}
.back-link:hover{color:var(--ink);}
.campaign-header{display:flex; align-items:center; gap:12px; margin-bottom:6px; flex-wrap:wrap;}
.campaign-header h1{font-family:'Space Grotesk'; font-size:24px; margin:0;}