/* Mobile-first, modern UI */
:root{
  --bg:#0b1510; --surface:#0f2018; --text:#e7f3ec; --muted:#a9b8b0; --border:#1e2d26;
  --accent:#1db954; --accent-2:#15a34a; --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.25);
}
:root.light{ --bg:#f6faf7; --surface:#ffffff; --text:#0c1913; --muted:#3c4a44; --border:#dce8e1; --shadow:0 10px 24px rgba(0,0,0,.08); }
*{box-sizing:border-box}
html,body{height:100%} body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,'Tajawal',Arial;line-height:1.7}
a{color:var(--text);text-decoration:none}
.container{max-width:1100px;margin-inline:auto;padding:0 16px}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:40px;height:40px}
.brand-text{display:flex;flex-direction:column}
.nav{display:none;gap:12px}
.controls{display:flex;align-items:center;gap:8px}
.hamburger{display:inline-block}
.mobile-nav{display:grid;gap:6px;padding:10px;border-top:1px solid var(--border);background:var(--surface)}
.mobile-nav.hidden{display:none}
.cta{background:var(--accent);color:#001807;padding:8px 12px;border-radius:12px}
.btn{display:inline-block;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:var(--surface);color:var(--text)}
.btn.primary{background:var(--accent);border-color:transparent;color:#001807;font-weight:800;box-shadow:var(--shadow)}
.page{padding-bottom:40px}
.hero{display:grid;gap:16px;padding:28px 0}
.hero-text .cta-row{display:flex;gap:8px;flex-wrap:wrap}
.stats{display:flex;gap:16px;margin-top:8px;opacity:.9}
.stats div{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);padding:8px 12px;border-radius:12px}
.hero-illu .card{background:var(--surface);border:1px solid var(--border);padding:16px;border-radius:var(--radius)}
.grid-3{display:grid;gap:16px;grid-template-columns:1fr}
.card{background:var(--surface);border:1px solid var(--border);padding:16px;border-radius:var(--radius);box-shadow:var(--shadow)}
.list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.link{border-bottom:1px dashed var(--border);padding-bottom:2px}
.form-grid{display:grid;gap:12px;grid-template-columns:1fr}
.form-grid label{display:grid;gap:6px}
.form-grid .full{grid-column:1/-1}
input,select,textarea{padding:10px;border-radius:12px;border:1px solid var(--border);background:#14281f;color:var(--text)}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.row{display:flex;gap:8px;flex-wrap:wrap}
.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:12px}
.table{width:100%;border-collapse:collapse}
th,td{padding:8px;border-bottom:1px solid var(--border);text-align:start}
.site-footer{border-top:1px solid var(--border);padding:18px 0;margin-top:24px;opacity:.9;text-align:center}

/* Desktop */
@media (min-width: 840px){
  .nav{display:flex}
  .hamburger{display:none}
  .mobile-nav{display:none}
  .hero{grid-template-columns: 1.3fr 1fr;align-items:center}
  .grid-3{grid-template-columns: repeat(3, 1fr)}
  .form-grid{grid-template-columns: repeat(2, 1fr)}
}