/* =========================
   Base
========================= */
* { box-sizing: border-box }
html { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; -webkit-text-size-adjust: 100% }
body { background:#f6f7fb; margin:0; color:#111827 }
.container { max-width: 920px; margin: 40px auto; padding: 0 16px }
.card { background:#fff; border-radius:16px; box-shadow:0 8px 24px rgba(0,0,0,.06); padding:24px }
.title { margin:0 0 16px; font-weight:800 }

/* Colors & tokens */
:root{
  --brand1:#5b8cff;         /* primary blue */
  --brand2:#7a5cff;         /* purple */
  --ring:#a3bffa33;         /* focus ring */
  --danger:#ef4444;
  --success:#10b981;

  --field-bg:#fff;
  --field-b:#D0D5DD;
  --field-text:#111827;
  --field-ph:#98A2B3;
  --field-focus:#5b8cff;
  --field-ring:rgba(91,140,255,.18);

  /* extra tokens */
  --primary:#6d28d9;
  --primary-dark:#5b21b6;
  --slate-900:#0f172a;
  --slate-700:#334155;
  --slate-200:#e5e7eb;
}

/* =========================
   Alerts
========================= */
.alert{
  display:flex; align-items:center; gap:8px;
  padding:12px 14px; border-radius:12px; margin:10px 0; font-weight:600
}
.alert .ic{ font-size:18px; line-height:1 }
.alert.success{ background:#ecfdf5; color:#065f46; border:1.5px solid #86efac }
.alert.danger{  background:#fef2f2; color:#991b1b; border:1.5px solid #fca5a5; box-shadow:0 0 0 3px #fee2e2 inset }

/* =========================
   Buttons (Modern)
========================= */
button, .btn{
  border:none;
  padding:12px 18px;
  border-radius:12px;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font:600 16px/1.15 system-ui,-apple-system,Segoe UI,Roboto,Arial;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  transition:transform .15s ease, box-shadow .15s ease, filter .2s ease, opacity .2s ease;
}
.btn svg{ width:20px; height:20px; flex:0 0 20px }

/* Primary gradient */
.btn--primary{
  color:#fff !important;
  background:linear-gradient(135deg,var(--brand1),var(--brand2));
  box-shadow:0 8px 20px rgba(123,92,255,.25);
}
.btn--primary:hover{ filter:brightness(1.05); transform:translateY(-1px) }
.btn--primary:active{ transform:translateY(0); box-shadow:0 4px 12px rgba(123,92,255,.25) }
.btn--primary:focus-visible{ outline:0; box-shadow:0 0 0 6px var(--ring) }

.btn--ghost{ background:#fff; border:1.5px solid #E5E7EB; color:#111827 }
.btn--ghost:hover{ border-color:#CBD5E1; background:#f9fafb }

.btn--xl{ padding:16px 22px; font-size:17px; border-radius:16px }
.btn--block{ width:100%; justify-content:center }

button[disabled], .btn[disabled]{ opacity:.65; cursor:not-allowed; filter:none }
.btn--primary[disabled]{ box-shadow:none }

/* Variants for topbar/secondary usage */
.btn-primary{
  background:var(--primary);
  color:#fff !important;
  border:1.5px solid var(--primary-dark);
  border-radius:14px;
}
.btn-primary:hover{ filter:brightness(1.05) }
.btn-dark{
  background:#334155;
  color:#fff !important;
  border:1.5px solid #1f2937;
  border-radius:14px;
}

/* Loading state */
.btn.is-loading{ position:relative; pointer-events:none; color:transparent }
.btn.is-loading::after{
  content:""; position:absolute; inset-inline-start:50%; inset-block-start:50%;
  width:18px; height:18px; margin:-9px 0 0 -9px;
  border:2px solid #fff; border-right-color:transparent; border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }

/* =========================
   Inputs (Modern)
========================= */
label{ display:block; margin:0 0 8px; font-weight:700; color:#111827; font-size:.95rem }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="file"],
input[type="search"],
select,
textarea{
  appearance:none;
  width:100%;
  height:46px;
  background:var(--field-bg);
  color:var(--field-text);
  border:1.5px solid var(--field-b);
  border-radius:12px;
  padding:0 14px;
  line-height:1.2;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  box-shadow:0 1px 0 rgba(16,24,40,.03);
}
textarea{ min-height:110px; padding:12px 14px; resize:vertical }

input::placeholder, textarea::placeholder{ color:var(--field-ph) }
input:hover, select:hover, textarea:hover{ border-color:#C3CAD5 }
input:focus, select:focus, textarea:focus{
  outline:0; border-color:var(--field-focus); box-shadow:0 0 0 4px var(--field-ring)
}
input:disabled, select:disabled, textarea:disabled{
  background:#f8fafc; color:#6b7280; cursor:not-allowed
}

/* Numbers tidier */
input[type="number"]{ -moz-appearance:textfield; padding-inline-end:12px }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{ height:22px }

/* Pretty select arrow */
select{
  background-image:
    linear-gradient(45deg, transparent 50%, #9aa4b2 50%),
    linear-gradient(135deg, #9aa4b2 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-inline-end:34px;
}

/* Checkbox */
input[type="checkbox"]{ width:18px; height:18px; vertical-align:middle; accent-color:#6d28d9 }
.checkbox{ display:flex; align-items:center; gap:8px }

/* Invalid helper */
.is-invalid{ border-color:#ef4444 !important; box-shadow:0 0 0 4px rgba(239,68,68,.15) !important }
.hint{ display:block; color:#667085; font-size:.85rem; margin-top:6px }

/* =========================
   Layout helpers
========================= */
.grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
.grid .full{ grid-column:1 / -1 }

.lesson-grid{ display:grid; grid-template-columns:repeat(2, minmax(260px, 1fr)); gap:20px; align-items:end }
.counter{ margin-top:12px; font-weight:700; color:#111827 }
.actions{ display:flex; justify-content:center; align-items:center; gap:8px; margin-top:18px }
.actions .btn, .actions button{ min-width:180px; height:48px; border-radius:14px }

/* Chapters chips */
.chaps{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px }
.chap-btn{
  padding:10px 16px; border:1.5px solid var(--primary); border-radius:999px; background:#fff; color:var(--primary);
  font-weight:800; transition:background .15s, color .15s, box-shadow .15s, border-color .15s
}
.chap-btn:hover{ background:#f3e8ff }
.chap-btn.expanded{ background:var(--primary); color:#fff; border-color:var(--primary); box-shadow:0 6px 18px rgba(109,40,217,.25) }

/* =========================
   Topbar
========================= */
.topbar{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  background:#111; color:#fff; padding:10px 16px
}
.topbar > div:last-child{ display:flex; gap:8px; flex-wrap:wrap }
.topbar a.btn, .topbar .logout{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  padding:10px 14px !important; border-radius:12px !important; font-weight:700 !important; line-height:1.1 !important;
  white-space:nowrap !important; text-align:center !important; direction:rtl; min-width:140px; height:auto !important;
}
.topbar a[href="/subscribe"], .topbar a[href="/subscribe.php"]{ background:#6d28d9 !important; color:#fff !important }
.topbar a[href="/logout"], .topbar a[href="/logout.php"], .topbar .logout{ background:#ef4444 !important; color:#fff !important }
#pwaInstallBtn{ background:#22c55e !important; color:#fff !important }
#pwaInstallBtn:hover{ opacity:.9 }

/* زر لوحة التحكم */
.topbar a[href^="/admin"]{
  display:inline-flex !important; align-items:center; justify-content:center;
  padding:10px 14px !important; border-radius:12px !important;
  background:#2563eb !important; color:#fff !important;
  border:1.5px solid #1e40af !important; text-decoration:none !important; min-width:140px;
}
.topbar a[href^="/admin"]:hover{ filter:brightness(1.05) }

/* =========================
   Inputs polish for examForm
========================= */
:root{
  --fg:#111827;
  --b0:#E6EAF0;
  --b1:#C7D2FE;
  --focus:#6d28d9;
  --focusRing: rgba(109,40,217,.18);
  --in-bg:#fff;
  --ph:#9AA4B2;
}
#examForm input[type="text"],
#examForm input[type="number"],
#examForm select,
#examForm textarea{
  background: var(--in-bg);
  color: var(--fg);
  border: 2px solid var(--b0);
  border-radius: 14px;
  height: 48px;
  padding: 0 14px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, transform .15s ease;
  box-shadow: 0 1px 0 rgba(16,24,40,.03);
}
#examForm input[type="text"],
#examForm input[type="number"],
#examForm select{ background-image: linear-gradient(180deg, rgba(99,102,241,.04), transparent) }
#examForm input::placeholder, #examForm textarea::placeholder{ color: var(--ph) }
#examForm input:hover, #examForm select:hover, #examForm textarea:hover{ border-color: var(--b1) }
#examForm input:focus, #examForm select:focus, #examForm textarea:focus{
  outline:0; border-color:var(--focus); box-shadow:0 0 0 4px var(--focusRing); transform:translateY(-1px)
}
#examForm input[type="number"]{ -moz-appearance:textfield; padding-inline-end:12px }
#examForm input[type="number"]::-webkit-outer-spin-button,
#examForm input[type="number"]::-webkit-inner-spin-button{ height:22px }
#examForm label{ color:#0f172a; font-weight:700; margin-bottom:8px }
#examForm .lesson-grid{ gap:22px }

/* سطر "السنين السابقة والاسترشادي" */
#examForm .checkbox.past-only label{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; border:2px solid #7c3aed; background:#f5f3ff; color:#4c1d95;
  border-radius:14px; font-weight:800; box-shadow:0 4px 18px rgba(124,58,237,.12);
  transition: background .15s ease, color .15s ease, box-shadow .2s ease, border-color .15s ease;
  position:relative;
}
#examForm .checkbox.past-only label::before{ content:"★"; font-size:14px; color:#7c3aed; line-height:1 }
@keyframes subtlePulse{
  0%{ box-shadow:0 0 0 0 rgba(124,58,237,.20) }
  70%{ box-shadow:0 0 0 10px rgba(124,58,237,0) }
  100%{ box-shadow:0 0 0 0 rgba(124,58,237,0) }
}
#examForm .checkbox.past-only input[type="checkbox"]:not(:checked) + *{ animation:subtlePulse 2.5s infinite }
#examForm .checkbox.past-only input[type="checkbox"]:checked + *{
  background:#6d28d9; color:#fff; border-color:#6d28d9; box-shadow:0 8px 22px rgba(109,40,217,.28)
}
#examForm .checkbox.past-only input[type="checkbox"]:checked + *::before{ color:#fff }

/* =========================
   CTA bar (sticky create button)
========================= */
.cta-bar{
  position: sticky; bottom: 8px; z-index: 60;
  padding:10px; margin-top:16px;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(248,250,252,.85) 30%, #fff 100%);
  border-radius:16px;
}
.cta-bar .btn{
  width:100%;
  background:linear-gradient(135deg,#5b8cff,#7a5cff) !important;
  color:#fff !important; border:none; box-shadow:0 8px 20px rgba(123,92,255,.25);
}

/* =========================
   Mobile
========================= */
@media (max-width: 720px){
  html, body{ background:#f8fafc !important }
  .container{ padding:12px !important; margin:20px auto !important }
  .card{ border-radius:16px !important; padding:14px !important; box-shadow:0 6px 18px rgba(0,0,0,.05) !important }

  .grid{ grid-template-columns:1fr !important; gap:12px !important }
  .grid .full{ grid-column:auto !important }
  .lesson-grid{ grid-template-columns:1fr !important; gap:14px !important }

  /* حقول أكبر ولمس أسهل */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="file"],
  input[type="search"],
  select{ height:50px !important; font-size:16px !important; padding:10px 12px !important; border-radius:14px !important }

  /* أزرار التوب بار تكسّر سطرين كويس */
  .topbar .actions{ display:flex; flex-wrap:wrap; gap:8px }
  .topbar .actions .btn{ flex:1 1 48%; min-height:44px }

  /* شارات الفصول: سطر قابل للتمرير أفقي */
  .chaps{
    overflow-x:auto; flex-wrap:nowrap; padding-bottom:8px; gap:8px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .chaps::-webkit-scrollbar{ display:none }
  .chap-btn{ min-width:104px; }

  /* أزرار أسفل الفورم بعرض الشاشة */
  .actions .btn, .actions button{ width:100% !important }
}

/* =========================
   Dark tweak
========================= */
@media (prefers-color-scheme: dark){
  .btn--primary{ box-shadow:0 8px 28px rgba(123,92,255,.35) }
}
/* ===== Boost input readability (bigger font & taller fields) ===== */
:root{
  --in-font-size: 18px;   /* حجم الخط داخل الحقول */
  --in-height:    56px;   /* ارتفاع الحقل */
}

#examForm input[type="text"],
#examForm input[type="email"],
#examForm input[type="password"],
#examForm input[type="number"],
#examForm input[type="search"],
#examForm select,
#examForm textarea{
  font-size: var(--in-font-size) !important;
  height: var(--in-height) !important;
  padding: 12px 16px !important;
  line-height: 1.35 !important;
  border-radius: 16px !important;
}

/* Placeholder أكبر سنة */
#examForm input::placeholder,
#examForm textarea::placeholder{
  font-size: calc(var(--in-font-size) - 2px) !important;
}

/* رقم أنضف */
#examForm input[type="number"]{
  -moz-appearance: textfield;
  padding-inline-end: 14px !important;
}
#examForm input[type="number"]::-webkit-outer-spin-button,
#examForm input[type="number"]::-webkit-inner-spin-button{
  height: 24px;
}

/* مساحة تحت الليبل */
#examForm label{ margin-bottom: 10px !important; }

/* موبايل: نخليها أقل سنة عشان العرض الضيق */
@media (max-width: 640px){
  :root{
    --in-font-size: 17px;
    --in-height:    54px;
  }
}
.btn.is-loading{ position:relative; pointer-events:none; color:transparent }
.btn.is-loading::after{
  content:""; position:absolute; inset-inline-start:50%; inset-block-start:50%;
  width:18px; height:18px; margin:-9px 0 0 -9px;
  border:2px solid #fff; border-right-color:transparent; border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }