:root {
  --primary-green:#34d529;
  --dark-green:#00B052;
  --darker-green:#009942;
  --light-green:#33E081;
  --bg-dark:#0F0F0F;
  --bg-dark-secondary:#1A1A1A;
  --bg-dark-tertiary:#252525;
  --text-light:#FFFFFF;
  --text-gray:#B0B0B0;
  --text-dark-gray:#808080;
  --gradient-primary: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);
  --gradient-dark: linear-gradient(135deg,#1A1A1A 0%,#2D2D2D 100%);
  --shadow-green: 0 20px 40px rgba(0, 213, 99, 0.15);
  --shadow-dark: 0 20px 40px rgba(0, 0, 0, 0.3);
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg-dark);
  color: var(--text-light);
}

.container{max-width:1200px;margin:0 auto;padding:24px}
.btn{
  display:inline-block;
  padding:12px 20px;
  background: var(--gradient-primary);
  border:none;border-radius:12px;
  color:#fff;
  font-weight:600;
  text-decoration:none;
  box-shadow: var(--shadow-green);
  transition: transform .15s ease, box-shadow .2s ease;
  cursor:pointer;
}
.btn:hover{transform: translateY(-1px)}
.card{
  background: var(--bg-dark-secondary);
  border-radius:16px;
  padding:24px;
  box-shadow: var(--shadow-dark);
}
.hero{
  background: radial-gradient(1200px 600px at 20% -10%,rgba(0,176,82,.25),transparent 60%);
  padding: 64px 0 32px;
}
.grid{display:grid; gap:24px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.kpi{display:flex;align-items:center;gap:12px}
.kpi .value{font-size:28px;font-weight:800}
.kpi .label{color:var(--text-gray);font-size:14px}
input,select,textarea{
  width:100%;padding:12px 14px;border-radius:12px;border:1px solid #2c2c2c;background:#141414;color:#fff;
}
label{display:block;margin:8px 0 6px;color:#d2d2d2;font-size:14px}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.form-actions{display:flex;gap:12px;align-items:center}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:12px;border-bottom:1px solid #2b2b2b}
.table th{color:#bfbfbf;text-align:left;font-weight:600;font-size:14px}
.badge{padding:6px 10px;border-radius:999px;background:#1f1f1f;border:1px solid #2b2b2b;font-size:12px;color:#d9d9d9}
.note{color:var(--text-gray);font-size:13px}
.header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;background:#0c0c0c;border-bottom:1px solid #1f1f1f;position:sticky;top:0;z-index:50}
.logo{display:flex;align-items:center;gap:10px}
.logo img{height:28px}
.nav a{color:#cfcfcf;text-decoration:none;margin:0 12px;font-size:14px}
footer{border-top:1px solid #1f1f1f;color:#a0a0a0;padding:24px 0;margin-top:40px}
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.55)}
.modal .modal-card{background:#121212;border:1px solid #242424;border-radius:16px;max-width:520px;padding:24px}
.modal.show{display:flex}
.alert{padding:12px 14px;border-radius:10px;background:#142417;border:1px solid #1f3c22;color:#b6f3c9;font-size:14px}
.text-center{text-align:center}
small.muted{color:#9a9a9a}