/* =============================================================
   سیستم طراحی مشترک آموزشگاه زبان
   پالت رنگ بر پایه‌ی روانشناسی رنگ:
   - آبی/نیلی (Trust Blue): آرامش، تمرکز، اعتماد -> رنگ اصلی برند
   - سبز-فیروزه‌ای (Growth Teal): پیشرفت و یادگیری -> موفقیت/تایید
   - زرد کهربایی: هشدار / در انتظار
   - قرمز ملایم: فقط برای خطا، نه دکمه‌های عادی
   ============================================================= */

:root{
    --primary:#3d5af1;
    --primary-dark:#2a3eb1;
    --primary-light:#eef1ff;
    --accent:#17c3b2;
    --accent-dark:#0f9e91;
    --success:#2ecc71;
    --warning:#f5a623;
    --danger:#e94560;
    --bg:#f6f8fc;
    --surface:#ffffff;
    --border:#e6eaf2;
    --text:#1a2036;
    --text-dim:#6b7285;
    --text-faint:#a4aabb;
    --radius-sm:10px;
    --radius:16px;
    --radius-lg:22px;
    --shadow-sm:0 2px 10px rgba(20,30,60,0.05);
    --shadow:0 8px 30px rgba(20,30,60,0.08);
    --font:'Vazirmatn', system-ui, sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    font-family:var(--font);
    background:var(--bg);
    color:var(--text);
    direction:rtl;
    line-height:1.7;
    -webkit-tap-highlight-color:transparent;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button, input, select, textarea{font-family:var(--font)}
::selection{background:rgba(61,90,241,.18)}

.container{max-width:1180px;margin:0 auto;padding:0 20px}

/* ===== دکمه‌ها ===== */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:12px 26px;border-radius:30px;border:none;cursor:pointer;
    font-family:var(--font);font-weight:600;font-size:14px;transition:.25s;
}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 6px 20px rgba(61,90,241,.25)}
.btn-primary:hover{background:var(--primary-dark);transform:translateY(-2px)}
.btn-accent{background:var(--accent);color:#fff;box-shadow:0 6px 20px rgba(23,195,178,.25)}
.btn-accent:hover{background:var(--accent-dark);transform:translateY(-2px)}
.btn-outline{background:transparent;border:1.5px solid var(--border);color:var(--text)}
.btn-outline:hover{border-color:var(--primary);color:var(--primary)}
.btn-danger{background:transparent;color:var(--danger);border:1px solid rgba(233,69,96,.3)}
.btn-danger:hover{background:rgba(233,69,96,.08)}
.btn-sm{padding:8px 16px;font-size:13px}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* ===== کارت‌ها ===== */
.card{
    background:var(--surface);border:1px solid var(--border);
    border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-sm);
}
.card:hover{box-shadow:var(--shadow)}

/* ===== فرم‌ها ===== */
.form-group{margin-bottom:18px}
.form-group label{display:block;font-size:13px;font-weight:600;color:var(--text-dim);margin-bottom:6px}
.form-control{
    width:100%;padding:12px 16px;border-radius:var(--radius-sm);
    border:1.5px solid var(--border);background:var(--bg);color:var(--text);
    font-size:14.5px;transition:.2s;
}
.form-control:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light);background:#fff}

/* ===== نشان سطح CEFR ===== */
.level-badge{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:38px;height:26px;padding:0 8px;border-radius:8px;
    font-size:12px;font-weight:800;letter-spacing:.5px;
}
.level-A1,.level-A2{background:#e8f6ff;color:#1f7fc4}
.level-B1,.level-B2{background:#e9fbf3;color:#189e6b}
.level-C1,.level-C2{background:#fdf0e5;color:#c9772f}

/* ===== وضعیت‌ها ===== */
.badge{display:inline-block;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600}
.badge-success{background:rgba(46,204,113,.12);color:#1e9e57}
.badge-warning{background:rgba(245,166,35,.12);color:#c47f0f}
.badge-danger{background:rgba(233,69,96,.1);color:var(--danger)}
.badge-muted{background:#eef0f5;color:var(--text-dim)}

/* ===== هشدارها ===== */
.alert{padding:12px 18px;border-radius:var(--radius-sm);font-size:14px;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.alert-danger{background:rgba(233,69,96,.08);border:1px solid rgba(233,69,96,.25);color:var(--danger)}
.alert-success{background:rgba(46,204,113,.08);border:1px solid rgba(46,204,113,.25);color:#1e9e57}

/* ===== ابزارهای کمکی ===== */
.text-dim{color:var(--text-dim)}
.text-center{text-align:center}
.mt-1{margin-top:8px} .mt-2{margin-top:16px} .mt-3{margin-top:24px}
.flex{display:flex} .flex-between{display:flex;justify-content:space-between;align-items:center}
.gap-1{gap:8px} .gap-2{gap:16px}

/* ===== اسکرول‌بار سبک ===== */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#d6dbe6;border-radius:10px}

@media(max-width:640px){
    .container{padding:0 14px}
    .card{padding:18px}
}