:root{
  --white:#FFFFFF;
  --bg-mint:#EAF3FC;
  --ink:#171A2B;
  --muted:#5B6079;
  --indigo:#0E9464;
  --indigo-dark:#076A48;
  --blue:#2563EB;
  --blue-dark:#1D4ED8;
  --coral:#D4A017;
  --line:rgba(23,26,43,0.09);
  --radius-lg:24px;
  --radius-md:16px;
  --radius-sm:10px;
  --danger:#DC2626;
  --danger-bg:#FEF2F2;
  --success:#0E9464;
  --success-bg:#EAF7F1;
}

*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:'Inter', sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.5;
}
h1,h2{font-family:'Sora', sans-serif; font-weight:700;}
code{font-family:monospace; background:var(--bg-mint); padding:2px 6px; border-radius:6px;}
a{color:var(--blue);}

/* ---------- Auth pages (login/register) ---------- */
.auth-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bg-mint);
  padding:24px;
}
.auth-wrap{width:100%; max-width:440px;}
.auth-card{
  background:var(--white);
  border-radius:var(--radius-lg);
  padding:40px 32px;
  box-shadow:0 20px 50px rgba(23,26,43,0.08);
}
.auth-card h1{font-size:26px; margin-bottom:8px;}
.auth-card .sub{color:var(--muted); font-size:14px; margin-bottom:24px;}
.auth-card form{display:flex; flex-direction:column; gap:6px;}
.auth-card label{font-size:13px; font-weight:600; margin-top:12px;}
.auth-card input, .auth-card select{
  font-family:inherit;
  padding:12px 14px;
  border:1.5px solid var(--line);
  border-radius:var(--radius-sm);
  font-size:15px;
  width:100%;
}
.auth-card input:focus, .auth-card select:focus{
  outline:none;
  border-color:var(--indigo);
}
.auth-alt{margin-top:20px; font-size:14px; color:var(--muted); text-align:center;}
.field-hint{margin-top:-8px; margin-bottom:12px; font-size:13px; text-align:right;}

.btn-primary{
  margin-top:20px;
  background:var(--indigo);
  color:var(--white);
  border:none;
  padding:14px 20px;
  border-radius:999px;
  font-weight:600;
  font-size:15px;
  cursor:pointer;
  transition:background .2s;
}
.btn-primary:hover{background:var(--indigo-dark);}
.btn-primary.btn-sm{margin-top:0; padding:10px 18px; font-size:14px;}

.btn-ghost-sm{
  display:inline-block;
  background:transparent;
  border:1.5px solid var(--line);
  color:var(--ink);
  padding:8px 14px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
}
.btn-ghost-sm:hover{border-color:var(--indigo);}

.alert{padding:12px 16px; border-radius:var(--radius-sm); font-size:14px; margin-bottom:16px;}
.alert-error{background:var(--danger-bg); color:var(--danger);}
.alert-success{background:var(--success-bg); color:var(--success);}
.alert ul{padding-left:18px;}

/* ---------- Dashboard ---------- */
.dash-page{background:#FAFBFC; min-height:100vh;}
.dash-header{
  background:var(--white);
  border-bottom:1px solid var(--line);
  padding:16px 0;
}
.dash-header-inner{
  max-width:1080px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.dash-logo{font-family:'Sora', sans-serif; font-weight:700; font-size:18px;}
.dash-header nav{display:flex; align-items:center; gap:16px;}
.dash-user-name{font-size:14px; color:var(--muted); font-weight:600;}

.dash-main{max-width:1080px; margin:0 auto; padding:32px 24px 80px;}
.dash-main h1{font-size:28px; margin-bottom:6px;}
.dash-main .sub{color:var(--muted); margin-bottom:24px;}

.stat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:16px;
  margin-bottom:36px;
}
.stat-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:20px;
}
.stat-label{display:block; font-size:13px; color:var(--muted); margin-bottom:8px; font-weight:600;}
.stat-value{display:block; font-size:24px; font-weight:700; font-family:'Sora', sans-serif;}
.stat-code{color:var(--indigo); letter-spacing:1px;}

.dash-block{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:24px;
  margin-bottom:24px;
}
.dash-block h2{font-size:18px; margin-bottom:6px;}
.dash-block .sub{color:var(--muted); font-size:14px; margin-bottom:16px;}

.copy-box{display:flex; gap:10px; align-items:center;}
.copy-box input{
  flex:1;
  padding:12px 14px;
  border:1.5px solid var(--line);
  border-radius:var(--radius-sm);
  font-size:14px;
  background:var(--bg-mint);
  color:var(--muted);
}
.copy-feedback{font-size:13px; color:var(--indigo); margin-top:8px; height:16px;}

.empty-state{color:var(--muted); font-size:14px; padding:12px 0;}

.dash-table{width:100%; border-collapse:collapse; font-size:14px;}
.dash-table th{
  text-align:left;
  padding:10px 12px;
  border-bottom:2px solid var(--line);
  color:var(--muted);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.dash-table td{padding:12px; border-bottom:1px solid var(--line);}

.badge{padding:4px 10px; border-radius:999px; font-size:12px; font-weight:600;}
.badge-active, .badge-paid{background:var(--success-bg); color:var(--success);}
.badge-inactive, .badge-pending{background:#FFF8E7; color:var(--coral);}
.badge-tier-gratis{background:#EEF0F7; color:var(--muted);}
.badge-tier-eksklusif{background:#EAF2FE; color:var(--blue-dark);}
.badge-tier-mitra{background:var(--success-bg); color:var(--indigo-dark);}

.search-form{display:flex; gap:10px; margin-bottom:20px; max-width:420px;}
.search-form input{
  flex:1;
  padding:10px 14px;
  border:1.5px solid var(--line);
  border-radius:var(--radius-sm);
  font-family:inherit;
  font-size:14px;
}

.commission-form{display:flex; flex-direction:column; gap:6px; max-width:420px;}
.commission-form label{font-size:13px; font-weight:600; margin-top:10px;}
.commission-form input, .commission-form select{
  padding:10px 14px;
  border:1.5px solid var(--line);
  border-radius:var(--radius-sm);
  font-family:inherit;
  font-size:14px;
}

@media (max-width:640px){
  .auth-card{padding:28px 20px;}
  .dash-table{display:block; overflow-x:auto; white-space:nowrap;}
}