/* =====================================================
   بنك الأسئلة الإلكتروني — هوية بصرية "ورقة الامتحان الرسمية"
   لوحة الألوان: كحلي أكاديمي + عنبري (ختم الشهادات) على خلفية ورقية فاتحة
   ===================================================== */

:root{
    --bg: #F1F2F6;
    --paper: #FFFFFF;
    --navy: #16223F;
    --navy-2: #223059;
    --navy-tint: #EEF0F6;
    --amber: #C97B2E;
    --amber-dark: #A9611D;
    --amber-tint: #F6E7D2;
    --success: #2E7D5B;
    --success-tint: #E1F1E9;
    --danger: #C1443C;
    --danger-tint: #FBE7E5;
    --text: #20242F;
    --text-muted: #666E7D;
    --border: #DFE2E9;
    --radius-lg: 18px;
    --radius-md: 12px;
    --radius-sm: 8px;
    --shadow: 0 6px 24px rgba(22,34,63,.08);
    --font-display: 'Cairo', 'Tajawal', sans-serif;
    --font-body: 'Tajawal', 'Cairo', sans-serif;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
    margin:0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

.container{
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
}

a{ color: inherit; text-decoration: none; }

h1,h2,h3,h4{
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--navy);
    margin: 0 0 .5em;
}

p{ margin: 0 0 1em; }

/* ===== إطار متقطّع بأسلوب "خط التقطيع" في أوراق الامتحانات ===== */
.dashline{
    height: 0;
    border-top: 2px dashed var(--border);
    margin: 28px 0;
}

/* ===== الترويسة ===== */
.topbar{ background: var(--navy); color:#fff; }
.topbar-inner{
    display:flex; align-items:center; justify-content:space-between;
    padding: 16px 24px;
}
.brand{ display:flex; align-items:center; gap:12px; color:#fff; }
.brand-seal{ color: var(--amber); display:flex; }
.brand-text{ display:flex; flex-direction:column; line-height:1.3; }
.brand-text strong{ font-family: var(--font-display); font-size: 19px; }
.brand-text small{ color:#B9C0D6; font-size:12px; }

.topnav{ display:flex; align-items:center; gap: 22px; font-weight:600; font-size:15px; }
.topnav a{ opacity:.92; transition:.15s; }
.topnav a:hover{ opacity:1; color: var(--amber); }
.nav-hello{ color:#B9C0D6; font-size:14px; font-weight:500; }
.btn-nav-outline{
    border:1.5px solid rgba(255,255,255,.35);
    padding:7px 16px; border-radius: 999px; opacity:1 !important;
}
.btn-nav-outline:hover{ background: var(--amber); border-color: var(--amber); }

.topbar-dashline{
    height:0; border-top: 3px dotted rgba(255,255,255,.18);
}

/* ===== المحتوى العام ===== */
.site-main{ padding: 44px 0 60px; min-height: 60vh; }

.alert{
    padding: 14px 18px; border-radius: var(--radius-sm); margin-bottom: 22px;
    font-weight:600; border:1px solid transparent;
}
.alert-success{ background: var(--success-tint); color: var(--success); border-color: #bfe4d1; }
.alert-danger{ background: var(--danger-tint); color: var(--danger); border-color: #f0c6c2; }
.alert-info{ background: var(--navy-tint); color: var(--navy-2); border-color:#d7ddef; }

/* ===== الصفحة الرئيسية (Hero) ===== */
.hero{
    text-align:center; padding: 56px 20px 40px;
}
.hero .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    background: var(--amber-tint); color: var(--amber-dark);
    font-weight:700; font-size:13px; padding:6px 16px; border-radius:999px;
    margin-bottom:18px;
}
.hero h1{
    font-size: clamp(28px, 4.5vw, 44px);
    margin-bottom:.3em;
}
.hero p.lead{
    color: var(--text-muted); font-size:18px; max-width:560px; margin:0 auto 34px;
}

.role-cards{
    display:grid; grid-template-columns: 1fr 1fr; gap: 24px;
    max-width: 780px; margin: 0 auto;
}
@media (max-width:640px){ .role-cards{ grid-template-columns: 1fr; } }

.role-card{
    background: var(--paper); border-radius: var(--radius-lg);
    padding: 32px 26px; box-shadow: var(--shadow); border:1px solid var(--border);
    text-align:right; transition: transform .18s, box-shadow .18s;
    display:flex; flex-direction:column; gap:10px;
}
.role-card:hover{ transform: translateY(-4px); box-shadow: 0 14px 30px rgba(22,34,63,.14); }
.role-card .icon{
    width:52px; height:52px; border-radius: 14px; display:flex; align-items:center; justify-content:center;
    background: var(--navy-tint); color: var(--navy); margin-bottom: 6px;
}
.role-card.student .icon{ background: var(--amber-tint); color: var(--amber-dark); }
.role-card h3{ margin-bottom:2px; }
.role-card p{ color: var(--text-muted); font-size: 14.5px; margin-bottom: 14px; }

/* ===== الأزرار ===== */
.btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-family: var(--font-display); font-weight:700; font-size:15px;
    padding: 12px 26px; border-radius: 999px; border:none; cursor:pointer;
    transition: .15s; text-align:center;
}
.btn-primary{ background: var(--navy); color:#fff; }
.btn-primary:hover{ background: var(--navy-2); }
.btn-amber{ background: var(--amber); color:#fff; }
.btn-amber:hover{ background: var(--amber-dark); }
.btn-outline{ background:transparent; border:1.5px solid var(--navy); color: var(--navy); }
.btn-outline:hover{ background: var(--navy); color:#fff; }
.btn-danger-outline{ background:transparent; border:1.5px solid var(--danger); color: var(--danger); }
.btn-danger-outline:hover{ background: var(--danger); color:#fff; }
.btn-sm{ padding: 7px 16px; font-size:13.5px; }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.55; cursor:not-allowed; }

/* ===== البطاقات / اللوحات ===== */
.card{
    background: var(--paper); border-radius: var(--radius-lg);
    border: 1px solid var(--border); box-shadow: var(--shadow);
    padding: 28px;
    margin-bottom: 24px;
}
.card-header{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom: 18px; padding-bottom:16px; border-bottom: 2px dashed var(--border);
}
.card-header h2, .card-header h3{ margin:0; }

.form-card{ max-width: 480px; margin: 0 auto; }

/* ===== النماذج ===== */
label{ display:block; font-weight:700; margin-bottom:6px; font-size:14.5px; color: var(--navy); }
.field{ margin-bottom: 18px; }
.field small.hint{ display:block; color:var(--text-muted); font-weight:400; margin-top:5px; font-size:13px; }

input[type=text], input[type=password], input[type=number], input[type=file],
select, textarea{
    width:100%; padding: 12px 14px; border-radius: var(--radius-sm);
    border: 1.5px solid var(--border); background: var(--paper);
    font-family: var(--font-body); font-size:15px; color: var(--text);
    transition:.15s;
}
input:focus, select:focus, textarea:focus{
    outline:none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(22,34,63,.12);
}
textarea{ resize: vertical; min-height: 90px; }

/* ===== شارات ترقيم دائرية (بطاقة السؤال) ===== */
.q-badge{
    width: 34px; height:34px; min-width:34px; border-radius:50%;
    background: var(--navy); color:#fff; display:flex; align-items:center; justify-content:center;
    font-family: var(--font-display); font-weight:800; font-size:14px;
}
.tag{
    display:inline-flex; align-items:center; padding: 3px 12px; border-radius:999px;
    font-size:12.5px; font-weight:700; background: var(--navy-tint); color: var(--navy-2);
}
.tag-amber{ background: var(--amber-tint); color: var(--amber-dark); }

/* ===== جداول ===== */
table{ width:100%; border-collapse: collapse; }
th, td{ padding: 12px 14px; text-align: right; border-bottom: 1px solid var(--border); font-size:14.5px; }
th{ color: var(--navy); font-family: var(--font-display); font-weight:700; background: var(--navy-tint); }
tr:last-child td{ border-bottom:none; }
.table-wrap{ overflow-x:auto; border-radius: var(--radius-md); border:1px solid var(--border); }
.table-wrap table{ border:none; }

/* ===== لوحة تحكم المعلم ===== */
.stat-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; margin-bottom: 28px; }
@media (max-width:720px){ .stat-grid{ grid-template-columns: 1fr; } }
.stat-box{
    background: var(--paper); border-radius: var(--radius-lg); border:1px solid var(--border);
    padding: 22px 24px; box-shadow: var(--shadow);
    position:relative; overflow:hidden;
}
.stat-box::before{
    content:''; position:absolute; inset-inline-end:-18px; top:-18px;
    width:70px; height:70px; border-radius:50%; background: var(--amber-tint);
}
.stat-box .num{ font-family: var(--font-display); font-size:34px; font-weight:800; color: var(--navy); position:relative; }
.stat-box .lbl{ color: var(--text-muted); font-size:14px; position:relative; }

.dash-grid{ display:grid; grid-template-columns: 260px 1fr; gap: 26px; align-items:start; }
@media (max-width:860px){ .dash-grid{ grid-template-columns: 1fr; } }

.side-menu{
    background: var(--paper); border-radius: var(--radius-lg); border:1px solid var(--border);
    padding: 12px; box-shadow: var(--shadow);
}
.side-menu a{
    display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius: var(--radius-sm);
    font-weight:700; color: var(--navy); font-size:14.5px; margin-bottom:4px;
}
.side-menu a:hover, .side-menu a.active{ background: var(--navy); color:#fff; }

/* ===== صفحة الاختبار ===== */
.exam-header{
    background: var(--navy); color:#fff; border-radius: var(--radius-lg);
    padding: 22px 28px; margin-bottom: 26px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
}
.exam-header h2{ color:#fff; margin:0; }
.exam-header .meta{ color:#B9C0D6; font-size:14px; }
.exam-progress{
    background: rgba(255,255,255,.15); border-radius:999px; height:8px; width:220px; overflow:hidden;
}
.exam-progress span{ display:block; height:100%; background: var(--amber); width:0%; transition:.2s; }

.question-card{
    background: var(--paper); border-radius: var(--radius-lg); border:1px solid var(--border);
    box-shadow: var(--shadow); padding: 24px 26px; margin-bottom: 20px;
}
.question-card .q-head{ display:flex; gap:14px; align-items:flex-start; margin-bottom: 16px; }
.question-card .q-text{ font-family: var(--font-display); font-weight:700; font-size:17px; color: var(--text); }

.option-list{ display:flex; flex-direction:column; gap:10px; margin-inline-start: 48px; }
.option-item{
    display:flex; align-items:center; gap:12px; padding: 12px 16px;
    border:1.5px solid var(--border); border-radius: var(--radius-md); cursor:pointer; transition:.15s;
}
.option-item:hover{ border-color: var(--amber); background: var(--amber-tint); }
.option-item input{ width:auto; accent-color: var(--navy); }
.option-item.correct{ border-color: var(--success); background: var(--success-tint); }
.option-item.wrong{ border-color: var(--danger); background: var(--danger-tint); }
.opt-letter{
    width:26px; height:26px; border-radius:50%; border:1.5px solid var(--border);
    display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:700; color:var(--text-muted);
}

/* ===== صفحة النتيجة - الختم ===== */
.result-wrap{ text-align:center; max-width: 560px; margin: 0 auto; }
.seal{
    width: 168px; height:168px; margin: 8px auto 20px; position:relative;
    display:flex; align-items:center; justify-content:center;
}
.seal svg{ width:100%; height:100%; }
.seal .seal-pct{
    position:absolute; font-family: var(--font-display); font-weight:800; font-size:34px; color: var(--navy);
}
.seal .seal-pct small{ display:block; font-size:13px; font-weight:700; color: var(--text-muted); }

.grade-pill{
    display:inline-block; padding:8px 22px; border-radius:999px; font-weight:800; font-family: var(--font-display);
    margin-bottom: 22px; font-size:15px;
}
.grade-excellent, .grade-verygood{ background: var(--success-tint); color: var(--success); }
.grade-good{ background: var(--amber-tint); color: var(--amber-dark); }
.grade-pass{ background: var(--navy-tint); color: var(--navy-2); }
.grade-weak{ background: var(--danger-tint); color: var(--danger); }

.review-list{ text-align: right; margin-top: 30px; }

/* ===== مناطق فارغة / تنبيه ===== */
.empty-state{
    text-align:center; padding: 50px 20px; color: var(--text-muted);
}
.empty-state .icon{ font-size:40px; margin-bottom:14px; }

/* ===== استيراد الملفات ===== */
.template-box{
    background: var(--navy-tint); border: 1.5px dashed var(--navy-2);
    border-radius: var(--radius-md); padding: 18px 20px; font-family: monospace, 'Tajawal';
    font-size: 13.5px; line-height:2; color: var(--navy-2); white-space:pre-wrap; margin-bottom: 20px;
}
.upload-drop{
    border: 2px dashed var(--border); border-radius: var(--radius-md);
    padding: 30px; text-align:center; color: var(--text-muted); margin-bottom:16px;
    background: var(--paper);
}

/* ===== تذييل ===== */
.site-footer{ padding: 30px 0 40px; color: var(--text-muted); font-size:13.5px; text-align:center; }
.footer-dashline{ border-top: 2px dashed var(--border); margin-bottom: 20px; }

/* ===== أدوات مساعدة ===== */
.flex-between{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.text-muted{ color: var(--text-muted); }
.text-center{ text-align:center; }
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.gap-links{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }

/* focus visibility for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
    outline: 3px solid var(--amber); outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
    *{ transition:none !important; scroll-behavior:auto !important; }
}
.teacher-card{

transition:.3s;

}

.teacher-card:hover{

transform:translateY(-5px);

box-shadow:0 15px 35px rgba(0,0,0,.15);

}

.teacher-photo{

width:120px;

height:120px;

border-radius:50%;

object-fit:cover;

border:4px solid #eee;

}
.teacher-card{

border:none;
border-radius:18px;
transition:.3s;
overflow:hidden;

}

.teacher-card:hover{

transform:translateY(-8px);
box-shadow:0 18px 35px rgba(0,0,0,.15);

}

.teacher-photo{

width:110px;
height:110px;
border-radius:50%;
object-fit:cover;
border:4px solid #f1f1f1;

}

.stat-number{

font-size:22px;
font-weight:bold;
color:#0d6efd;

}

.stat-title{

font-size:13px;
color:#777;

}
/* ==========================================
   Responsive Design
========================================== */

img,
svg,
video,
iframe{
    max-width:100%;
    height:auto;
}

body{
    overflow-x:hidden;
}

/* ����� ������� */
@media (max-width:992px){

.container{
    padding:0 18px;
}

.topbar-inner{
    flex-direction:column;
    gap:18px;
    text-align:center;
}

.topnav{
    justify-content:center;
    flex-wrap:wrap;
    gap:10px;
}

.hero{
    padding:40px 10px 25px;
}

.hero p.lead{
    font-size:16px;
}

.role-cards{
    grid-template-columns:1fr;
}

.stat-grid{
    grid-template-columns:1fr;
}

.card{
    padding:20px;
}

.exam-header{
    flex-direction:column;
    align-items:flex-start;
}

.exam-progress{
    width:100%;
}

.option-list{
    margin-inline-start:0;
}

.question-card{
    padding:18px;
}

.table-wrap{
    overflow-x:auto;
}

}

/* ������� */
@media (max-width:768px){

.container{
    padding:0 15px;
}

.brand{
    flex-direction:column;
    text-align:center;
}

.brand-text small{
    display:none;
}

.topnav{
    width:100%;
    display:flex;
    flex-direction:column;
}

.topnav a,
.btn-nav-outline{
    width:100%;
    text-align:center;
}

.hero h1{
    font-size:30px;
}

.hero .lead{
    font-size:15px;
}

.role-card{
    padding:22px 18px;
}

.btn{
    width:100%;
}

.card-header{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
}

.flex-between{
    flex-direction:column;
    align-items:stretch;
}

.teacher-photo{
    width:90px;
    height:90px;
}

table{
    min-width:650px;
}

}

/* ������� ������� ���� */
@media (max-width:480px){

.container{
    padding:0 12px;
}

.hero{
    padding:30px 5px;
}

.hero h1{
    font-size:26px;
}

.hero .lead{
    font-size:14px;
}

.brand-text strong{
    font-size:18px;
}

.question-card{
    padding:15px;
}

.option-item{
    padding:10px;
    gap:8px;
}

.q-badge{
    width:30px;
    height:30px;
    min-width:30px;
}

.stat-box{
    padding:18px;
}

.stat-box .num{
    font-size:28px;
}

.teacher-photo{
    width:75px;
    height:75px;
}

}
/* ===========================
   Mobile Navigation
=========================== */

.menu-toggle{
    display:none;
    width:48px;
    height:48px;
    border:none;
    background:none;
    cursor:pointer;
    position:relative;
}

.menu-toggle span{
    display:block;
    width:28px;
    height:3px;
    background:#fff;
    margin:6px auto;
    border-radius:5px;
    transition:.35s;
}

.menu-toggle.active span:nth-child(1){
    transform:translateY(9px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2){
    opacity:0;
}

.menu-toggle.active span:nth-child(3){
    transform:translateY(-9px) rotate(-45deg);
}

@media (max-width:768px){

.topbar-inner{
    position:relative;
}

.menu-toggle{
    display:block;
}

.topnav{

    position:absolute;

    top:100%;

    right:0;

    left:0;

    background:#16223F;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    max-height:0;

    opacity:0;

    transition:max-height .4s ease,
               opacity .3s ease;

    border-top:1px solid rgba(255,255,255,.15);

}

.topnav.show{

    max-height:500px;

    opacity:1;

}

.topnav a{

    width:100%;

    padding:15px;

    border-bottom:1px solid rgba(255,255,255,.08);

    text-align:center;

}

.nav-hello{

    padding:15px;

    text-align:center;

}

}