/* ============================================================
   Wathba Platform — Unified Design System
   (يشترك فيه: التسجيل/الدخول، لوحة الطالب، لوحة المشرف)
   ============================================================ */

:root {
    --c-primary: #041EBD;
    --c-primary-light: #1a35db;
    --c-secondary: #00BBD4;
    --c-bg: #F4F7FB;
    --c-text-main: #1E293B;
    --c-text-light: #64748B;
    --c-white: #FFFFFF;

    --c-success: #16A34A;
    --c-warning: #D97706;
    --c-danger:  #DC2626;
    --c-info:    #0284C7;

    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.85);
    --glass-shadow: 0 16px 40px rgba(4, 30, 189, 0.08);
    --glass-blur: blur(22px);

    --grad-primary: linear-gradient(135deg, var(--c-primary), var(--c-primary-light));
    --grad-text: linear-gradient(to left, var(--c-primary), var(--c-secondary));
    --grad-mesh: linear-gradient(135deg, #041EBD 0%, #00BBD4 100%);

    --radius-lg: 32px;
    --radius-md: 20px;
    --radius-sm: 12px;
    --trans: 0.3s cubic-bezier(.4,0,.2,1);
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Alexandria', sans-serif; }
html { scroll-behavior: smooth; }
body {
    background: var(--c-bg);
    color: var(--c-text-main);
    line-height: 1.7;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button, input, select, textarea { font-family: inherit; outline: none; border: none; }
img { max-width: 100%; display: block; }

/* ---------- خلفية متحركة مشتركة ---------- */
.bg-mesh { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.orb { position: absolute; border-radius: 50%; filter: blur(120px); opacity: .45; animation: floatOrb 22s infinite alternate ease-in-out; }
.orb-1 { width: 600px; height: 600px; background: var(--c-secondary); top: -220px; right: -120px; }
.orb-2 { width: 480px; height: 480px; background: var(--c-primary); top: 45%; left: -200px; animation-delay: -6s; }
.orb-3 { width: 620px; height: 620px; background: rgba(4,30,189,.35); bottom: -280px; right: 15%; animation-delay: -12s; }
@keyframes floatOrb { 0%{transform:translate(0,0) scale(1);} 50%{transform:translate(60px,90px) scale(1.08);} 100%{transform:translate(-40px,-60px) scale(.92);} }

.text-gradient { background: var(--grad-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; }
.glass-panel { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); border-radius: var(--radius-lg); }

/* ---------- أزرار مشتركة ---------- */
.btn { display: inline-flex; align-items:center; justify-content:center; gap:10px; padding:13px 28px; border-radius:50px; font-weight:600; font-size:1rem; cursor:pointer; transition: var(--trans); border:none; }
.btn-primary { background: var(--grad-primary); color:#fff; box-shadow: 0 8px 24px rgba(4,30,189,.3); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(4,30,189,.4); }
.btn-primary:disabled { opacity:.6; cursor:not-allowed; transform:none; }
.btn-glass { background: rgba(255,255,255,.75); color: var(--c-primary); border:1px solid rgba(255,255,255,.9); }
.btn-glass:hover { background:#fff; transform: translateY(-3px); }
.btn-outline { background: transparent; color: var(--c-primary); border: 2px solid var(--c-primary); }
.btn-outline:hover { background: var(--c-primary); color:#fff; }
.btn-danger-outline { background:transparent; border:2px solid var(--c-danger); color:var(--c-danger); }
.btn-danger-outline:hover { background:var(--c-danger); color:#fff; }
.btn-sm { padding: 8px 18px; font-size: .9rem; }
.btn-block { width: 100%; }
.btn-icon { width:44px; height:44px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.7); color:var(--c-primary); box-shadow:0 4px 15px rgba(0,0,0,.05); transition:var(--trans); }
.btn-icon:hover { background:var(--c-primary); color:#fff; transform: translateY(-2px); }

.spinner { width:20px; height:20px; border:3px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation: spin .8s linear infinite; display:none; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading .spinner { display:inline-block; }
.loading .btn-label { opacity: .6; }

/* ============================================================
   1) صفحات المصادقة (auth.php) — ملء الشاشة بخطوات متحركة
   ============================================================ */
.auth-body { display:flex; align-items:center; justify-content:center; min-height:100vh; padding: 30px 16px; }

.auth-brand { position:fixed; top:30px; right:40px; display:flex; align-items:center; gap:10px; font-weight:700; color:var(--c-primary); font-size:1.2rem; z-index:20; }
.auth-brand i { color: var(--c-secondary); }

.auth-shell {
    width: 100%; max-width: 620px;
    background: linear-gradient(145deg, rgba(255,255,255,.75), rgba(255,255,255,.45));
    backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255,255,255,.9);
    box-shadow: 0 25px 70px rgba(4,30,189,.12);
    border-radius: 40px;
    padding: 50px 46px 40px;
    position: relative;
    overflow: hidden;
    animation: shellIn .6s cubic-bezier(.16,1,.3,1);
}
@keyframes shellIn { from { opacity:0; transform: translateY(40px) scale(.97);} to { opacity:1; transform:none; } }

/* شريط تبديل تسجيل الدخول / إنشاء حساب */
.auth-tabs { display:flex; background: rgba(4,30,189,.06); border-radius: 50px; padding:6px; margin-bottom: 34px; position: relative; }
.auth-tab { flex:1; text-align:center; padding: 13px 10px; border-radius:50px; font-weight:700; cursor:pointer; z-index:2; color: var(--c-text-light); transition: color .3s; }
.auth-tab.active { color:#fff; }
.auth-tab-indicator { position:absolute; top:6px; bottom:6px; width: calc(50% - 6px); background: var(--grad-primary); border-radius:50px; transition: transform .35s cubic-bezier(.65,0,.35,1); box-shadow: 0 8px 20px rgba(4,30,189,.3); z-index:1; }

/* شريط تقدم خطوات التسجيل */
.steps-progress { display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom: 36px; }
.step-dot { width:38px; height:38px; border-radius:50%; background:#fff; border:2px solid rgba(4,30,189,.15); display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--c-text-light); transition: var(--trans); font-size:.95rem; }
.step-dot.active { background: var(--grad-primary); color:#fff; border-color:transparent; box-shadow:0 8px 20px rgba(4,30,189,.3); transform: scale(1.1); }
.step-dot.done { background: var(--c-secondary); color:#fff; border-color:transparent; }
.step-line { width:36px; height:3px; background: rgba(4,30,189,.12); border-radius:3px; overflow:hidden; }
.step-line-fill { height:100%; width:0%; background: var(--grad-primary); transition: width .5s ease; }

.auth-view, .step-pane, .forgot-pane { display:none; }
.auth-view.active, .step-pane.active, .forgot-pane.active { display:block; animation: paneIn .45s cubic-bezier(.16,1,.3,1); }
@keyframes paneIn { from { opacity:0; transform: translateX(20px);} to { opacity:1; transform:none; } }
[dir="rtl"] .step-pane.active, [dir="rtl"] .forgot-pane.active { animation-name: paneInRTL; }
@keyframes paneInRTL { from { opacity:0; transform: translateX(-20px);} to { opacity:1; transform:none; } }

.auth-heading { text-align:center; margin-bottom: 30px; }
.auth-heading h2 { font-size: 1.8rem; color: var(--c-primary); margin-bottom:8px; }
.auth-heading p { color: var(--c-text-light); font-size: .98rem; }

.field-group { margin-bottom: 20px; position: relative; }
.field-group label { display:block; font-weight:700; font-size: .92rem; margin-bottom:8px; color: var(--c-text-main); }
.field-group label .req { color: var(--c-danger); }
.input-wrap { position: relative; }
.input-wrap i.f-ic { position:absolute; top:50%; right:18px; transform:translateY(-50%); color: var(--c-secondary); font-size:1.05rem; }
.field-input, .field-select {
    width:100%; padding: 15px 48px 15px 18px; border-radius: 16px;
    background: rgba(255,255,255,.75); border: 1.5px solid rgba(4,30,189,.1);
    font-size: 1rem; color: var(--c-text-main); transition: var(--trans);
}
.field-input:focus, .field-select:focus { border-color: var(--c-secondary); background:#fff; box-shadow: 0 0 0 4px rgba(0,187,212,.12); }
.field-input.error, .field-select.error { border-color: var(--c-danger); }
.field-hint { font-size: .82rem; color: var(--c-text-light); margin-top:6px; }
.field-error { font-size: .82rem; color: var(--c-danger); margin-top:6px; display:none; }
.field-group.has-error .field-error { display:block; }

.pw-toggle { position:absolute; top:50%; left:16px; transform:translateY(-50%); cursor:pointer; color: var(--c-text-light); }

.two-col { display:grid; grid-template-columns: 1fr 1fr; gap:18px; }

/* أزرار اختيار الجنس */
.gender-choice { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.gender-btn {
    display:flex; flex-direction:column; align-items:center; gap:10px; padding: 26px 10px;
    border-radius:20px; background: rgba(255,255,255,.6); border:2px solid rgba(4,30,189,.1); cursor:pointer; transition: var(--trans);
}
.gender-btn i { font-size: 2rem; color: var(--c-secondary); transition: var(--trans); }
.gender-btn span { font-weight:700; }
.gender-btn:hover { transform: translateY(-4px); }
.gender-btn.selected { background: var(--grad-primary); border-color:transparent; box-shadow: 0 10px 25px rgba(4,30,189,.3); }
.gender-btn.selected i, .gender-btn.selected span { color:#fff; }

.step-actions { display:flex; gap:14px; margin-top: 30px; }
.step-actions .btn { flex:1; }

.auth-switch-line { text-align:center; margin-top:24px; color: var(--c-text-light); font-size:.95rem; }
.auth-switch-line a { color: var(--c-primary); font-weight:700; }

.strength-meter { display:flex; gap:5px; margin-top:8px; }
.strength-bar { flex:1; height:5px; border-radius:5px; background: rgba(4,30,189,.1); transition: var(--trans); }

/* استعادة كلمة المرور */
.reset-icon-badge { width:80px; height:80px; border-radius:50%; background: linear-gradient(135deg, rgba(4,30,189,.1), rgba(0,187,212,.15)); display:flex; align-items:center; justify-content:center; margin: 0 auto 20px; font-size:2rem; color:var(--c-primary); }

/* ============================================================
   2) Popup / Modal + Toast مشترك
   ============================================================ */
.modal-overlay { position:fixed; inset:0; background: rgba(15,23,42,.55); backdrop-filter: blur(6px); z-index: 3000; display:none; align-items:center; justify-content:center; padding:20px; }
.modal-overlay.active { display:flex; animation: fadeIn .25s ease; }
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
.modal-box { background:#fff; border-radius: 28px; max-width:540px; width:100%; max-height: 88vh; overflow-y:auto; box-shadow: 0 30px 80px rgba(0,0,0,.25); animation: modalIn .35s cubic-bezier(.16,1,.3,1); }
@keyframes modalIn { from{opacity:0; transform: translateY(30px) scale(.96);} to{opacity:1; transform:none;} }
.modal-head { display:flex; align-items:center; justify-content:space-between; padding:24px 28px; border-bottom:1px solid #eef1f6; }
.modal-head h3 { color: var(--c-primary); font-size:1.3rem; }
.modal-close { width:38px; height:38px; border-radius:50%; background:#f1f5f9; display:flex; align-items:center; justify-content:center; cursor:pointer; color: var(--c-text-light); transition: var(--trans); }
.modal-close:hover { background: var(--c-danger); color:#fff; }
.modal-body { padding: 28px; }
.modal-foot { padding: 20px 28px; border-top:1px solid #eef1f6; display:flex; gap:12px; justify-content:flex-end; }

.toast-stack { position:fixed; top:24px; left:24px; z-index: 4000; display:flex; flex-direction:column; gap:12px; }
.toast { display:flex; align-items:center; gap:12px; background:#fff; padding:16px 20px; border-radius:16px; box-shadow: 0 15px 40px rgba(0,0,0,.15); min-width:280px; border-right:4px solid var(--c-info); animation: toastIn .35s ease; }
@keyframes toastIn { from{opacity:0; transform:translateX(-40px);} to{opacity:1; transform:none;} }
.toast.success { border-color: var(--c-success); } .toast.success i{color:var(--c-success);}
.toast.error { border-color: var(--c-danger); } .toast.error i{color:var(--c-danger);}
.toast.warning { border-color: var(--c-warning); } .toast.warning i{color:var(--c-warning);}
.toast i { font-size:1.3rem; color:var(--c-info); }
.toast span { font-weight:600; font-size:.95rem; }

/* ============================================================
   3) لوحة تحكم الطالب (dashboard.php) — بدون قائمة جانبية
   ============================================================ */
.dash-navbar { position: sticky; top:0; z-index: 500; background: rgba(255,255,255,.85); backdrop-filter: blur(18px); border-bottom:1px solid rgba(4,30,189,.08); }
.dash-navbar .container { display:flex; align-items:center; justify-content:space-between; padding: 14px 24px; }
.dash-brand { display:flex; align-items:center; gap:10px; font-weight:800; color: var(--c-primary); font-size:1.25rem; }
.dash-brand i { color: var(--c-secondary); }
.dash-nav-actions { display:flex; align-items:center; gap:16px; }
.notif-bell { position:relative; cursor:pointer; font-size:1.3rem; color: var(--c-primary); }
.notif-badge { position:absolute; top:-6px; left:-8px; background: var(--c-danger); color:#fff; font-size:.68rem; width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.user-chip { display:flex; align-items:center; gap:10px; background: rgba(4,30,189,.06); padding:6px 16px 6px 6px; border-radius:50px; cursor:pointer; }
.user-chip .avatar { width:34px; height:34px; border-radius:50%; background: var(--grad-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; }

.container { max-width:1280px; margin:0 auto; padding: 0 24px; }
.dash-main { padding: 40px 0 80px; }

.dash-welcome { margin-bottom: 34px; }
.dash-welcome h1 { font-size: 1.9rem; color: var(--c-primary); margin-bottom:6px; }
.dash-welcome p { color: var(--c-text-light); }

.dash-grid { display:grid; grid-template-columns: 380px 1fr; gap: 28px; align-items:start; }

/* بطاقة الطالب */
.student-card-wrap { perspective: 1400px; }
.student-card {
    position:relative; border-radius: 26px; padding: 28px; color:#fff; min-height: 220px;
    background: var(--grad-mesh); overflow:hidden; box-shadow: 0 25px 50px rgba(4,30,189,.3);
}
.student-card::before { content:''; position:absolute; inset:0; background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100" height="100"%3E%3Ccircle cx="50" cy="50" r="1" fill="white" opacity="0.15"/%3E%3C/svg%3E'); opacity:.3; }
.student-card::after { content:''; position:absolute; width:220px; height:220px; background: rgba(255,255,255,.08); border-radius:50%; top:-90px; left:-60px; }
.sc-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom: 34px; position:relative; z-index:2;}
.sc-logo { font-weight:800; font-size:1.1rem; display:flex; align-items:center; gap:8px; }
.sc-chip { width:44px; height:34px; border-radius:8px; background: linear-gradient(135deg,#ffd76b,#ffb238); }
.sc-name { font-size:1.35rem; font-weight:800; margin-bottom:4px; position:relative; z-index:2; }
.sc-code { letter-spacing: 3px; font-size:1.1rem; font-weight:700; opacity:.95; margin-bottom: 18px; position:relative; z-index:2; }
.sc-bottom { display:flex; justify-content:space-between; align-items:flex-end; font-size:.82rem; opacity:.9; position:relative; z-index:2; }
.sc-bottom div span { display:block; font-weight:700; font-size:.95rem; opacity:1; margin-top:2px; }
.card-download-btn { width:100%; margin-top:18px; }

.side-stack { display:flex; flex-direction:column; gap:20px; margin-top: 20px; }
.mini-stat { background:#fff; border-radius:20px; padding:18px 20px; display:flex; align-items:center; gap:14px; box-shadow: 0 8px 24px rgba(0,0,0,.04); }
.mini-stat .m-ic { width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; background: rgba(4,30,189,.08); color: var(--c-primary); }
.mini-stat b { display:block; font-size:1.25rem; color:var(--c-primary); }
.mini-stat span { font-size:.85rem; color:var(--c-text-light); }

/* بطاقات الدورات */
.section-title-row { display:flex; align-items:center; justify-content:space-between; margin-bottom: 20px; }
.section-title-row h2 { font-size:1.4rem; color:var(--c-primary); }
.courses-row { display:grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 34px; }
.course-card { background:#fff; border-radius:24px; overflow:hidden; box-shadow: 0 10px 30px rgba(0,0,0,.05); transition: var(--trans); border:1px solid #eef1f6; }
.course-card:hover { transform: translateY(-6px); box-shadow: 0 20px 45px rgba(4,30,189,.12); }
.course-cover { height:150px; background-size:cover; background-position:center; position:relative; }
.course-cover .badge-level { position:absolute; bottom:12px; right:12px; background: rgba(255,255,255,.9); padding:6px 14px; border-radius:50px; font-size:.8rem; font-weight:700; color:var(--c-primary); }
.course-body { padding:22px; }
.course-body h3 { font-size:1.2rem; color:var(--c-primary); margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.course-body p { font-size:.92rem; color:var(--c-text-light); margin-bottom: 16px; min-height: 44px; }
.course-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.price-tag { font-weight:800; color: var(--c-secondary); }

/* حالة الطلب */
.app-status-card { background:#fff; border-radius:22px; padding:24px; box-shadow: 0 10px 30px rgba(0,0,0,.05); margin-bottom:20px; border:1px solid #eef1f6; }
.status-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.status-badge { padding:6px 16px; border-radius:50px; font-size:.82rem; font-weight:700; }
.status-badge.warning { background:rgba(217,119,6,.12); color:var(--c-warning); }
.status-badge.success { background:rgba(22,163,74,.12); color:var(--c-success); }
.status-badge.info { background:rgba(2,132,199,.12); color:var(--c-info); }
.status-badge.danger { background:rgba(220,38,38,.12); color:var(--c-danger); }

.timeline { display:flex; justify-content:space-between; position:relative; margin: 30px 0 10px; }
.timeline::before { content:''; position:absolute; top:17px; right:5%; left:5%; height:3px; background: rgba(4,30,189,.1); z-index:1; }
.tl-step { flex:1; text-align:center; position:relative; z-index:2; }
.tl-dot { width:36px; height:36px; border-radius:50%; background:#fff; border:3px solid rgba(4,30,189,.15); display:flex; align-items:center; justify-content:center; margin:0 auto 10px; color: var(--c-text-light); font-weight:700; transition: var(--trans); }
.tl-step.done .tl-dot { background: var(--c-secondary); border-color: var(--c-secondary); color:#fff; }
.tl-step.current .tl-dot { background: var(--grad-primary); border-color: transparent; color:#fff; box-shadow:0 8px 20px rgba(4,30,189,.3); animation: pulseDot2 1.6s infinite; }
@keyframes pulseDot2 { 0%,100%{box-shadow:0 0 0 0 rgba(4,30,189,.3);} 50%{box-shadow:0 0 0 10px rgba(4,30,189,0);} }
.tl-step span { font-size:.78rem; color: var(--c-text-light); font-weight:600; }

.bank-box { background: linear-gradient(135deg, rgba(4,30,189,.04), rgba(0,187,212,.06)); border:1px dashed rgba(4,30,189,.25); border-radius:18px; padding:20px; margin: 16px 0; }
.bank-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px dashed rgba(0,0,0,.06); font-size:.92rem; }
.bank-row:last-child { border-bottom:none; }
.bank-row b { color: var(--c-primary); }
.copy-btn { color: var(--c-secondary); cursor:pointer; font-size:.85rem; }

.upload-zone { border:2px dashed rgba(4,30,189,.25); border-radius:18px; padding:32px; text-align:center; cursor:pointer; transition: var(--trans); background: rgba(4,30,189,.02); }
.upload-zone:hover, .upload-zone.dragover { border-color: var(--c-secondary); background: rgba(0,187,212,.05); }
.upload-zone i { font-size:2.2rem; color: var(--c-secondary); margin-bottom:10px; }
.upload-preview { margin-top:16px; display:none; }
.upload-preview img { max-height:180px; border-radius:12px; margin: 0 auto; }

.schedule-table { width:100%; border-collapse:collapse; margin-top:14px; }
.schedule-table th, .schedule-table td { padding:12px 14px; text-align:right; font-size:.92rem; }
.schedule-table thead { background: rgba(4,30,189,.05); }
.schedule-table th { color: var(--c-primary); font-weight:700; }
.schedule-table tbody tr { border-bottom:1px solid #f1f5f9; }

/* صفحة تفاصيل الدورة */
.course-hero { border-radius:32px; overflow:hidden; position:relative; min-height:320px; display:flex; align-items:flex-end; background-size:cover; background-position:center; margin-bottom: 30px;}
.course-hero::before { content:''; position:absolute; inset:0; background: linear-gradient(to top, rgba(4,10,60,.85), rgba(4,10,60,.2)); }
.course-hero-content { position:relative; z-index:2; padding: 40px; color:#fff; }
.course-hero-content h1 { font-size:2.2rem; margin-bottom:10px; }
.detail-grid { display:grid; grid-template-columns: 2fr 1fr; gap: 30px; }
.syllabus-list li { display:flex; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid #f1f5f9; }
.syllabus-list li i { color: var(--c-secondary); }
.sticky-card { position:sticky; top:90px; }

/* ============================================================
   4) لوحة تحكم المشرف (admin)
   ============================================================ */
.admin-body { background: #F4F7FB; }
.admin-topbar { position:sticky; top:0; z-index:500; background: rgba(255,255,255,.9); backdrop-filter: blur(18px); border-bottom:1px solid rgba(4,30,189,.08); }
.admin-topbar .container { display:flex; align-items:center; justify-content:space-between; padding:14px 24px; }
.admin-tabs-nav { display:flex; gap:6px; background: rgba(4,30,189,.05); padding:6px; border-radius:50px; }
.admin-tabs-nav a { padding: 10px 20px; border-radius:50px; font-weight:700; font-size:.92rem; color: var(--c-text-light); transition: var(--trans); display:flex; align-items:center; gap:8px;}
.admin-tabs-nav a.active, .admin-tabs-nav a:hover { background: var(--grad-primary); color:#fff; }

.kpi-grid { display:grid; grid-template-columns: repeat(5, 1fr); gap:20px; margin: 30px 0; }
.kpi-card { background:#fff; border-radius:22px; padding:22px; box-shadow: 0 10px 26px rgba(0,0,0,.04); position:relative; overflow:hidden; border:1px solid #eef1f6; }
.kpi-card::before { content:''; position:absolute; width:90px; height:90px; background: rgba(4,30,189,.05); border-radius:50%; top:-30px; left:-30px; }
.kpi-top { display:flex; justify-content:space-between; align-items:flex-start; position:relative; z-index:2; }
.kpi-ic { width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.15rem; }
.kpi-num { font-size:2rem; font-weight:800; color: var(--c-primary); margin:14px 0 4px; position:relative; z-index:2;}
.kpi-label { font-size:.88rem; color: var(--c-text-light); position:relative; z-index:2;}
.kpi-trend { font-size:.78rem; font-weight:700; padding:3px 10px; border-radius:50px; }
.kpi-trend.up { background: rgba(22,163,74,.12); color: var(--c-success); }
.kpi-trend.down { background: rgba(220,38,38,.12); color: var(--c-danger); }

.charts-grid { display:grid; grid-template-columns: 2fr 1fr; gap: 22px; margin-bottom: 22px; }
.chart-card { background:#fff; border-radius:24px; padding:24px; box-shadow: 0 10px 26px rgba(0,0,0,.04); border:1px solid #eef1f6; }
.chart-card h3 { font-size:1.1rem; color:var(--c-primary); margin-bottom:18px; display:flex; align-items:center; gap:8px;}
.charts-grid-3 { display:grid; grid-template-columns: repeat(3,1fr); gap:22px; margin-bottom:22px; }

.data-table-card { background:#fff; border-radius:24px; padding: 10px 0 24px; box-shadow: 0 10px 26px rgba(0,0,0,.04); border:1px solid #eef1f6; overflow:hidden; }
.dt-head { display:flex; justify-content:space-between; align-items:center; padding: 20px 24px 10px; flex-wrap:wrap; gap:12px; }
.dt-head h3 { color: var(--c-primary); font-size:1.15rem; }
.dt-search { position:relative; }
.dt-search input { padding:10px 40px 10px 16px; border-radius:50px; background:#f1f5f9; width:240px; font-size:.9rem; }
.dt-search i { position:absolute; top:50%; right:14px; transform:translateY(-50%); color:var(--c-text-light); }
.filter-chip { padding:8px 16px; border-radius:50px; background:#f1f5f9; font-size:.85rem; font-weight:600; cursor:pointer; color:var(--c-text-light); transition: var(--trans); }
.filter-chip.active { background: var(--grad-primary); color:#fff; }
.filter-chips { display:flex; gap:8px; flex-wrap:wrap; padding: 0 24px 14px; }

table.data-table { width:100%; border-collapse:collapse; }
table.data-table th { text-align:right; padding:14px 24px; font-size:.82rem; color:var(--c-text-light); border-bottom:1px solid #f1f5f9; font-weight:700;}
table.data-table td { text-align:right; padding:16px 24px; font-size:.9rem; border-bottom:1px solid #f8fafc; vertical-align:middle;}
table.data-table tbody tr { transition: var(--trans); }
table.data-table tbody tr:hover { background: rgba(4,30,189,.02); }
.td-user { display:flex; align-items:center; gap:12px; }
.td-avatar { width:38px; height:38px; border-radius:50%; background: var(--grad-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; }
.action-icons { display:flex; gap:8px; }
.action-icons .btn-icon { width:36px; height:36px; font-size:.9rem; }
.action-icons .approve { color: var(--c-success); } .action-icons .approve:hover { background: var(--c-success); color:#fff;}
.action-icons .reject { color: var(--c-danger); } .action-icons .reject:hover { background: var(--c-danger); color:#fff;}
.action-icons .view { color: var(--c-info); } .action-icons .view:hover { background: var(--c-info); color:#fff;}

.pagination { display:flex; justify-content:center; gap:8px; padding-top: 20px; }
.page-btn { width:36px; height:36px; border-radius:10px; background:#f1f5f9; display:flex; align-items:center; justify-content:center; font-weight:700; cursor:pointer; font-size:.85rem; }
.page-btn.active { background: var(--grad-primary); color:#fff; }

.form-card { background:#fff; border-radius:24px; padding:30px; box-shadow: 0 10px 26px rgba(0,0,0,.04); border:1px solid #eef1f6; }
.form-grid { display:grid; grid-template-columns: 1fr 1fr; gap:20px; }
.upload-image-box { border:2px dashed rgba(4,30,189,.25); border-radius:18px; padding:20px; text-align:center; cursor:pointer; background: rgba(4,30,189,.02); position:relative; overflow:hidden; min-height:160px; display:flex; align-items:center; justify-content:center; flex-direction:column; }
.upload-image-box img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none; }
.char-counter { text-align:left; font-size:.78rem; color: var(--c-text-light); margin-top:4px; }
.char-counter.limit { color: var(--c-danger); font-weight:700; }

.receipt-preview-box { text-align:center; }
.receipt-preview-box img { max-width:100%; max-height:400px; border-radius:16px; margin: 0 auto; box-shadow: 0 10px 30px rgba(0,0,0,.1); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .dash-grid, .charts-grid, .detail-grid { grid-template-columns: 1fr; }
    .kpi-grid { grid-template-columns: repeat(3,1fr); }
    .charts-grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .auth-shell { padding: 34px 22px; border-radius:28px; }
    .two-col, .courses-row, .form-grid { grid-template-columns: 1fr; }
    .kpi-grid, .charts-grid-3 { grid-template-columns: 1fr 1fr; }
    .admin-tabs-nav { display:none; }
    .dt-search input { width:150px; }
}