:root {
    --ink: #132238;
    --muted: #667085;
    --line: #e7edf3;
    --paper: #ffffff;
    --canvas: #f5f8fb;
    --navy: #102f4f;
    --blue: #1e6fa8;
    --teal: #179c8e;
    --gold: #d5a244;
    --danger: #c94a55;
    --success: #16836f;
    --shadow: 0 16px 45px rgba(24, 51, 77, .10);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: 'Cairo', 'IBM Plex Sans Arabic', sans-serif; line-height: 1.7; }
a { color: inherit; text-decoration: none; }
.container { width: min(1160px, calc(100% - 36px)); margin-inline: auto; }
.site-header { background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; backdrop-filter: blur(12px); }
.nav-wrap { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--navy); }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; color: #fff; font-size: 22px; font-weight: 800; background: linear-gradient(145deg, var(--teal), var(--blue)); border-radius: 13px 5px 13px 5px; box-shadow: 0 7px 15px rgba(30,111,168,.23); }
.brand strong { display: block; font-size: 17px; line-height: 1.2; }
.brand small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.main-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.main-nav a { padding: 8px 14px; color: #506277; font-size: 13px; font-weight: 600; border-radius: 10px; transition: .2s ease; }
.main-nav a:hover { color: var(--blue); background: #eef6fa; }
.main-nav .nav-login { color: var(--blue); border: 1px solid #c8e0eb; }
.main-nav .nav-logout { color: var(--danger); }
main { min-height: calc(100vh - 156px); }
.hero { padding: 70px 0 56px; background: radial-gradient(circle at 15% 15%, rgba(23,156,142,.12), transparent 24%), radial-gradient(circle at 90% 12%, rgba(30,111,168,.12), transparent 25%), linear-gradient(180deg, #fff 0%, #f5f8fb 100%); }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 55px; align-items: center; }
.eyebrow { display: inline-flex; gap: 7px; align-items: center; color: var(--teal); font-size: 12px; font-weight: 800; letter-spacing: .3px; }
.eyebrow::before { content: ''; width: 28px; height: 3px; background: var(--gold); border-radius: 20px; }
h1 { margin: 14px 0 14px; color: var(--navy); font-size: clamp(28px, 4vw, 47px); line-height: 1.28; letter-spacing: -.7px; }
.hero p { max-width: 590px; margin: 0; color: var(--muted); font-size: 16px; }
.search-card, .panel, .result-card, .auth-card { background: var(--paper); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); }
.search-card { padding: 25px; border-top: 4px solid var(--teal); }
.search-card h2 { margin: 0 0 5px; color: var(--navy); font-size: 22px; }
.search-card p { margin: 0 0 20px; color: var(--muted); font-size: 13px; }
.search-form { display: flex; gap: 10px; align-items: end; }
.field { flex: 1; }
label { display: block; margin-bottom: 7px; color: #45576b; font-size: 12px; font-weight: 700; }
input, select { width: 100%; min-height: 45px; padding: 9px 13px; color: var(--ink); background: #fbfdfe; border: 1px solid #d6e1e8; border-radius: 11px; font: inherit; font-size: 13px; outline: none; transition: .2s ease; }
input:focus, select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(23,156,142,.12); }
.btn { min-height: 45px; display: inline-flex; justify-content: center; align-items: center; gap: 8px; padding: 9px 17px; color: #fff; background: var(--navy); border: 0; border-radius: 11px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: .2s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 16px rgba(16,47,79,.15); }
.btn-primary { background: linear-gradient(135deg, var(--teal), var(--blue)); }
.btn-secondary { color: var(--navy); background: #eaf3f7; }
.btn-outline { color: var(--blue); background: #fff; border: 1px solid #cbdfe8; }
.btn-danger { background: var(--danger); }
.btn-small { min-height: 35px; padding: 5px 12px; font-size: 12px; }
.quick-points { display: flex; gap: 22px; margin-top: 25px; color: var(--muted); font-size: 12px; }
.quick-points span::before { content: '✓'; margin-left: 5px; color: var(--teal); font-weight: 800; }
.hero-art { position: relative; min-height: 310px; display: grid; place-items: center; }
.orbit { width: 265px; height: 265px; position: relative; display: grid; place-items: center; border: 1px solid #d6e9e9; border-radius: 50%; }
.orbit::before, .orbit::after { content: ''; position: absolute; border-radius: 50%; border: 1px dashed #bddbd8; }
.orbit::before { inset: 24px; }
.orbit::after { inset: 54px; border-style: solid; border-color: #e6d5ac; }
.center-emblem { width: 110px; height: 110px; display: grid; place-items: center; color: #fff; font-size: 42px; font-weight: 800; background: linear-gradient(145deg, var(--navy), var(--blue)); border-radius: 35px 10px 35px 10px; box-shadow: 0 18px 35px rgba(16,47,79,.24); }
.float-badge { position: absolute; display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: #fff; border: 1px solid var(--line); border-radius: 13px; box-shadow: 0 12px 28px rgba(19,34,56,.10); color: var(--navy); font-size: 12px; font-weight: 700; }
.float-badge strong { color: var(--teal); font-size: 17px; }
.badge-one { top: 5px; right: 8px; }.badge-two { bottom: 19px; left: 4px; }.badge-three { bottom: 8px; right: 48px; }
.section { padding: 55px 0; }.section-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 22px; }.section-head h2 { margin: 0; color: var(--navy); font-size: 24px; }.section-head p { margin: 0; color: var(--muted); font-size: 13px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }.feature { padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: 17px; }.feature-icon { width: 39px; height: 39px; display: grid; place-items: center; margin-bottom: 12px; color: var(--teal); background: #e8f7f4; border-radius: 12px; font-weight: 800; }.feature h3 { margin: 0 0 5px; color: var(--navy); font-size: 16px; }.feature p { margin: 0; color: var(--muted); font-size: 12px; }
.page-head { padding: 42px 0 26px; }.page-head h1 { margin: 0 0 6px; font-size: 32px; }.page-head p { margin: 0; color: var(--muted); font-size: 13px; }
.result-wrap { padding-bottom: 60px; }.result-card { overflow: hidden; }.result-top { padding: 26px; display: flex; justify-content: space-between; align-items: center; gap: 20px; background: linear-gradient(135deg, #effaf8, #f4f9fc); border-bottom: 1px solid var(--line); }.student-name { margin: 0; color: var(--navy); font-size: 25px; }.student-meta { margin: 4px 0 0; color: var(--muted); font-size: 13px; }.status-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; font-size: 12px; font-weight: 800; }.status-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }.status-success { color: var(--success); background: #dcf6ef; }.status-danger { color: var(--danger); background: #fce7e9; }.status-neutral { color: #67768a; background: #edf1f5; }.result-content { padding: 25px; }.summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 28px; }.summary-box { padding: 17px; background: #fafcfd; border: 1px solid var(--line); border-radius: 14px; }.summary-box span { display: block; color: var(--muted); font-size: 11px; }.summary-box strong { display: block; margin-top: 3px; color: var(--navy); font-size: 21px; }.subject-table { width: 100%; border-collapse: collapse; }.subject-table th { padding: 12px 10px; color: #5a6b7d; background: #f6f9fb; font-size: 11px; text-align: right; }.subject-table td { padding: 13px 10px; border-bottom: 1px solid var(--line); font-size: 13px; }.subject-table td:first-child { color: var(--blue); font-weight: 700; }.empty-value { color: #a4afbb; }
.admin-shell { padding: 37px 0 60px; }.admin-title { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }.admin-title h1 { margin: 0; font-size: 30px; }.admin-title p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }.admin-actions { display: flex; gap: 8px; flex-wrap: wrap; }.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-bottom: 22px; }.stat { padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }.stat span { color: var(--muted); font-size: 11px; }.stat strong { display: block; margin-top: 5px; color: var(--navy); font-size: 25px; }.panel { padding: 22px; margin-bottom: 20px; box-shadow: none; }.panel-title { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 16px; }.panel-title h2 { margin: 0; color: var(--navy); font-size: 18px; }.panel-title p { margin: 0; color: var(--muted); font-size: 12px; }.table-scroll { overflow-x: auto; }.admin-table { width: 100%; min-width: 760px; border-collapse: collapse; }.admin-table th, .admin-table td { padding: 11px 10px; border-bottom: 1px solid var(--line); text-align: right; font-size: 12px; white-space: nowrap; }.admin-table th { color: #65768a; background: #f8fafc; font-size: 11px; }.admin-table td strong { color: var(--navy); }.empty-state { padding: 30px; color: var(--muted); text-align: center; }
.auth-page { min-height: calc(100vh - 156px); display: grid; place-items: center; padding: 36px 0; }.auth-card { width: min(440px, 100%); padding: 30px; }.auth-card h1 { margin: 0 0 5px; font-size: 26px; }.auth-card p { margin: 0 0 23px; color: var(--muted); font-size: 13px; }.form-stack { display: grid; gap: 15px; }.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }.form-grid > div:first-child, .form-grid > div:nth-child(2) { grid-column: span 1; }.form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 7px; }.hint { padding: 13px 15px; color: #587084; background: #f0f7fa; border: 1px solid #d6e8ee; border-radius: 11px; font-size: 12px; }
.upload-zone { padding: 30px; text-align: center; background: linear-gradient(135deg, #f6fcfb, #f5f9fc); border: 1px dashed #9dcac5; border-radius: 16px; }.upload-zone input { max-width: 470px; margin: 12px auto 0; background: #fff; }.upload-zone p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }.check-list { margin: 0; padding: 0 20px 0 0; color: #556b7d; font-size: 12px; }.check-list li { margin: 6px 0; }.alert { padding: 14px 16px; border-radius: 12px; font-size: 12px; }.alert-error { color: #963c45; background: #fff0f1; border: 1px solid #f2cbd0; }.alert-success { color: #126858; background: #eaf9f5; border: 1px solid #c3ebdf; }.preview-table { max-height: 470px; overflow: auto; }.preview-table table { min-width: 1260px; }.progress-note { margin: 14px 0 0; color: var(--muted); font-size: 12px; }
.flash-wrap { padding-top: 15px; }.flash { padding: 11px 14px; border-radius: 10px; font-size: 12px; }.flash-success { color: #126858; background: #eaf9f5; border: 1px solid #c3ebdf; }.flash-error { color: #963c45; background: #fff0f1; border: 1px solid #f2cbd0; }
.site-footer { padding: 23px 0; color: #7c8b9b; background: #fff; border-top: 1px solid var(--line); font-size: 11px; }.footer-inner { display: flex; justify-content: space-between; gap: 20px; }.footer-inner strong { display: block; color: var(--navy); font-size: 12px; }.footer-inner span { display: block; }
@media (max-width: 800px) { .hero-grid { grid-template-columns: 1fr; gap: 24px; }.hero { padding-top: 42px; }.hero-art { min-height: 255px; }.feature-grid { grid-template-columns: 1fr; }.stat-grid { grid-template-columns: repeat(2, 1fr); }.admin-title { align-items: start; flex-direction: column; }.main-nav a { padding-inline: 7px; font-size: 11px; }.nav-wrap { align-items: flex-start; flex-direction: column; padding: 13px 0; gap: 9px; }.search-form { flex-direction: column; align-items: stretch; }.result-top { align-items: flex-start; flex-direction: column; }.summary-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .container { width: min(100% - 24px, 1160px); }.stat-grid { gap: 8px; }.stat { padding: 13px; }.stat strong { font-size: 20px; }.quick-points { flex-direction: column; gap: 4px; }.auth-card, .panel, .search-card, .result-content { padding: 18px; }.footer-inner { align-items: flex-start; flex-direction: column; gap: 8px; } }