:root {
  --bg: #0e1420; --card: #161f30; --text: #e7ecf5; --muted: #8b96ab;
  --accent: #3ee6b4; --error: #ff6b6b; --border: #2a374f;
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family: "Segoe UI", Tahoma, sans-serif; padding: 20px 20px 80px; }
.card { background: var(--card); border:1px solid var(--border); border-radius:14px; padding:24px; max-width:480px; margin:0 auto; }
h1 { font-size:20px; margin:0 0 20px; }
label { display:block; font-size:14px; color:var(--muted); margin:16px 0 6px; }
input, select { width:100%; background:#0e1420; border:1px solid var(--border); border-radius:8px; padding:10px 12px; color:var(--text); font-size:15px; }
input:focus, select:focus { outline:2px solid var(--accent); outline-offset:1px; }
small.hint { display:block; color:var(--muted); font-size:12.5px; margin-top:4px; }
small.error-inline { display:block; color:var(--error); font-size:12.5px; margin-top:4px; }
small.ok-inline { display:block; color:var(--accent); font-size:12.5px; margin-top:4px; }
.code-row { display:flex; gap:8px; align-items:center; }
.code-row input { flex:1; text-align:center; letter-spacing:1px; font-weight:bold; }
button { cursor:pointer; border:none; border-radius:8px; font-weight:600; font-size:15px; }
.btn-primary { background:var(--accent); color:#08211a; padding:12px; width:100%; margin-top:20px; }
.btn-secondary { background:transparent; border:1px solid var(--border); color:var(--text); padding:10px 14px; width:100%; margin-top:10px; }
.btn-secondary:hover { border-color:var(--accent); }
/* أزرار صغيرة بجانب حقل الكود — بديل style="width:auto;margin-top:0" */
.btn-inline { width:auto; margin-top:0; }
.checkbox-row { display:flex; align-items:flex-start; gap:8px; margin-top:18px; }
.checkbox-row input { width:auto; margin-top:3px; }
.checkbox-row label { margin:0; font-size:13.5px; color:var(--text); }
.error-text { color:var(--error); font-size:14px; margin-top:12px; }
.success-box { text-align:center; padding:40px 10px; }
.success-box .icon { font-size:48px; }
.muted { color:var(--muted); font-size:14px; }
/* بديل style="text-align:center;margin-top:16px" على فقرات الروابط أسفل الفورم */
.muted-link-row { text-align:center; margin-top:16px; }
.link-accent { color:var(--accent); }
button:disabled { opacity:.6; cursor:not-allowed; }
.status-row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid #1c2537; font-size:14px; text-align:right; }
.badge { padding:4px 10px; border-radius:999px; font-size:13px; font-weight:600; }
.badge.pending { background:#3a3410; color:#e6c93e; }
.badge.approved { background:#0e3a25; color:var(--accent); }
.badge.rejected { background:#3a1414; color:var(--error); }

/* كلاس موحّد لإخفاء أي عنصر بدل style="display:none" المباشر —
   !important يضمن الغلبة على أي display افتراضي (block/flex/grid) لنفس العنصر */
.hidden { display:none !important; }

.cf-turnstile-wrap { margin-top:16px; }

/* --- اختيار صورة الحساب --- */
.avatar-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:8px; }
.avatar-option { border:2px solid var(--border); border-radius:10px; padding:8px; text-align:center; cursor:pointer; background:#0e1420; }
.avatar-option img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:8px; background:#1c2537; }
.avatar-option.selected { border-color:var(--accent); }
.avatar-option span { display:block; font-size:11px; color:var(--muted); margin-top:4px; }

/* --- شريط التنقل السفلي --- */
.bottom-nav { position:fixed; bottom:0; left:0; right:0; background:var(--card); border-top:1px solid var(--border); display:flex; }
.bottom-nav button { flex:1; text-align:center; padding:12px 0; color:var(--muted); background:transparent; border:none; font-size:13px; border-radius:0; }
.bottom-nav button.active { color:var(--accent); font-weight:600; }

/* --- الملف الشخصي --- */
.avatar-header { display:flex; align-items:center; gap:14px; }
.avatar-header img { width:64px; height:64px; border-radius:50%; object-fit:cover; background:#0e1420; border:2px solid var(--accent); }
.avatar-header .name { font-size:17px; font-weight:600; }
.avatar-header .uid { font-size:13px; color:var(--muted); direction:ltr; text-align:right; }
.points { font-size:28px; font-weight:700; color:var(--accent); text-align:center; padding:10px 0; }
.points-label { text-align:center; color:var(--muted); font-size:12.5px; margin-top:-6px; }
.warn-text { color:var(--error); font-size:13px; margin-top:8px; }
.ok-text { color:var(--accent); font-size:13px; margin-top:8px; }
.cooldown-note { background:#3a3410; color:#e6c93e; border-radius:8px; padding:10px 12px; font-size:13px; margin-top:10px; }
.name-warning { font-size:12px; color:#e6c93e; margin-top:6px; }
.stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
.stat-box { background:#0e1420; border:1px solid var(--border); border-radius:10px; padding:12px; text-align:center; }
.stat-box .num { font-size:20px; font-weight:700; }
.stat-box .label { font-size:12px; color:var(--muted); margin-top:2px; }
.coming-soon { text-align:center; color:var(--muted); font-size:12.5px; margin-top:10px; }
.section-title { font-size:15px; color:var(--muted); margin:22px 0 12px; }
.row { display:flex; justify-content:space-between; gap:10px; font-size:14px; padding:8px 0; border-bottom:1px solid #1c2537; }
.row:last-child { border-bottom:none; }
.row span:first-child { color:var(--muted); }
.row span:last-child { text-align:left; direction:ltr; font-weight:600; }

/* بدائل هوامش كانت مضبوطة عبر style="margin-top:..." على أزرار بعينها */
.mt-14 { margin-top:14px; }
.mt-20 { margin-top:20px; }