:root {
  --bg-color: linear-gradient(135deg, #eef6fb 0%, #dcecf7 38%, #cfe3f1 68%, #bfd8ea 100%);
  --text-color: #10222d;
  --muted-text: rgba(16, 34, 45, 0.8);

  --card-bg: rgba(255, 255, 255, 0.72);
  --card-border: rgba(138, 177, 203, 0.35);

  --field-bg: rgba(255, 255, 255, 0.88);
  --field-border: rgba(125, 164, 189, 0.35);
  --field-focus: rgba(66, 176, 214, 0.45);
  --field-shadow: 0 10px 30px rgba(16, 34, 45, 0.08);

  --btn-bg: linear-gradient(90deg, #2ab5d6 0%, #51c8e2 50%, #79d9ea 100%);
  --btn-text: #ffffff;
  --btn-hover: linear-gradient(90deg, #21a6c6 0%, #46bdd8 50%, #6bcfe1 100%);
  --btn-active: linear-gradient(90deg, #1c97b5 0%, #3eb0ca 50%, #60c4d5 100%);

  --accent: #42b9d7;
  --accent-soft: rgba(66, 185, 215, 0.12);
  --accent-dark: #178eaf;

  --gold: #caa861;
  --success: #38b56d;

  --ayah-bg: rgba(255, 255, 255, 0.96);
  --ayah-border: rgba(165, 197, 220, 0.9);
  --ayah-hover: rgba(245, 251, 255, 0.98);
  --ayah-active-bg: rgba(255, 247, 225, 0.98);
  --ayah-active-border: #d2a94f;
  --ayah-text-color: #111111;
  --ayah-number-color: #2f6fb2;

  --instruction-color: #16384b;

  --border-radius: 18px;
  --border-radius-lg: 26px;
  --glass-blur: blur(18px);
  --soft-shadow: 0 18px 45px rgba(16, 34, 45, 0.12);
  --glow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 0 35px rgba(66, 185, 215, 0.08);
}

@font-face {
  font-family: 'PDMS-Saleem';
  src: url('alfont_com_AlFont_com_pdms-saleem-quranfont.otf') format('opentype');
}

body.dark-mode {
  --bg-color: linear-gradient(135deg, #071018 0%, #0d1b25 38%, #132734 68%, #193646 100%);
  --text-color: #f3efe6;
  --muted-text: rgba(243, 239, 230, 0.86);

  --card-bg: rgba(255, 255, 255, 0.08);
  --card-border: rgba(255, 255, 255, 0.12);

  --field-bg: rgba(255, 255, 255, 0.1);
  --field-border: rgba(255, 255, 255, 0.14);
  --field-focus: rgba(116, 239, 245, 0.35);
  --field-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);

  --btn-bg: linear-gradient(90deg, #31b7cf 0%, #4fcae0 50%, #72d8e8 100%);
  --btn-text: #ffffff;
  --btn-hover: linear-gradient(90deg, #2aa9c0 0%, #45bdd2 50%, #67cede 100%);
  --btn-active: linear-gradient(90deg, #2298ae 0%, #3faec3 50%, #5ec2d0 100%);

  --accent: #73e3ea;
  --accent-soft: rgba(115, 227, 234, 0.15);
  --accent-dark: #3bc5d1;
  --gold: #e1c078;

  --ayah-bg: rgba(18, 35, 46, 0.94);
  --ayah-border: rgba(108, 151, 180, 0.45);
  --ayah-hover: rgba(24, 46, 61, 0.96);
  --ayah-active-bg: rgba(70, 58, 31, 0.95);
  --ayah-active-border: #d6ae59;
  --ayah-text-color: #f7f3ea;
  --ayah-number-color: #9fd3ff;

  --instruction-color: #e5f7ff;
  --glow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 35px rgba(115, 227, 234, 0.08);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Amiri', serif;
  direction: ltr;
  background: var(--bg-color);
  color: var(--text-color);
  padding: 30px;
  margin: 0;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  transition: background 0.3s, color 0.3s;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 15% 18%, rgba(122, 227, 236, 0.12), transparent 22%),
    radial-gradient(circle at 84% 12%, rgba(202, 168, 97, 0.12), transparent 22%),
    radial-gradient(circle at 10% 92%, rgba(86, 215, 239, 0.1), transparent 18%),
    radial-gradient(circle at 90% 82%, rgba(116, 239, 245, 0.08), transparent 20%);
  pointer-events: none;
  z-index: 0;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.01), rgba(255,255,255,0.01)),
    url("images/islamic-pattern.png");
  background-repeat: repeat;
  background-size: auto, 340px;
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}

#studentFormSection,
#ayahSection,
.recorder,
#successMessage,
#audioErrorBox,
#warningMessage {
  position: relative;
  z-index: 1;
  opacity: 1 !important;
  filter: none !important;
  pointer-events: auto !important;
}

/* =========================
   GENERIC FORM ELEMENTS
========================= */

select,
input {
  margin: 10px 0;
  padding: 14px 16px;
  width: 100%;
  max-width: 500px;
  font-size: 18px;
  border-radius: 16px;
  border: 1px solid var(--field-border);
  background: var(--field-bg);
  color: var(--text-color);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  opacity: 1 !important;
}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

select option {
  background: #ffffff;
  color: #10222d;
}

body.dark-mode select option {
  background: #16232c;
  color: #ffffff;
}

select,
input,
button,
label,
p,
h1,
h2,
h3,
h4,
h5,
h6,
span,
div {
  filter: none;
}

/* تحييد وتصفير أزرار الاختيار (Radio Buttons) تماماً لمنع تمددها كخطوط أفقية */
input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  pointer-events: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  box-shadow: none !important;
}

/* =========================
   AYAH SECTION
========================= */

#ayahSection {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.48), rgba(255,255,255,0.28)),
    url('images/background.jpg') no-repeat center center fixed;
  background-size: cover;
  padding: 30px;
  border-radius: 28px;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  max-width: 1100px;
  margin: auto;
  box-sizing: border-box;
  opacity: 1 !important;
}

body.dark-mode #ayahSection {
  background:
    linear-gradient(180deg, rgba(8, 21, 31, 0.9), rgba(16, 39, 52, 0.9)),
    url('images/background.jpg') no-repeat center center fixed;
  background-size: cover;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}

header {
  position: relative;
  overflow: hidden;

  background:
    linear-gradient(
      115deg,
      rgba(0, 0, 0, 0.88) 0%,
      rgba(8, 6, 3, 0.72) 45%,
      rgba(0, 0, 0, 0.9) 100%
    ),
    url("images/noory-bg.png");

 background-size: cover, contain;
  background-position: center;
  background-repeat: no-repeat;

  color: #ffffff;
  padding: 125px 28px 115px;
  text-align: center;
  border-radius: 34px;
  margin-bottom: 30px;

  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);

  isolation: isolate;
  opacity: 1 !important;
}

header::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, rgba(255, 205, 120, 0.26), transparent 42%),
    radial-gradient(circle at 50% 85%, rgba(255, 180, 60, 0.18), transparent 36%);
  animation: glow 7s ease-in-out infinite;
  z-index: -1;
  pointer-events: none;
}

@keyframes glow {
  0% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
  100% { opacity: 0.55; transform: scale(1); }
}

header::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      120deg,
      transparent 0%,
      rgba(255, 255, 255, 0.08) 45%,
      rgba(255, 230, 170, 0.16) 50%,
      rgba(255, 255, 255, 0.08) 55%,
      transparent 100%
    );
  transform: translateX(-130%);
  animation: sweep 9s ease-in-out infinite;
  z-index: -1;
  pointer-events: none;
}

@keyframes sweep {
  0% { transform: translateX(-130%); }
  45% { transform: translateX(130%); }
  100% { transform: translateX(130%); }
}

header h1 {
  display: none !important;
}

header p {
  position: relative;
  z-index: 3;
  max-width: 96%;
  margin: 310px auto 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.4;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.96);
  text-align: center;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.78);
}

body.dark-mode header {
  background:
    linear-gradient(
      115deg,
      rgba(0, 0, 0, 0.94) 0%,
      rgba(5, 5, 5, 0.82) 45%,
      rgba(0, 0, 0, 0.96) 100%
    ),
    url("images/noory-bg.png");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.52),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.mode-buttons {
  position: absolute;
  top: 24px;
  left: 28px;
  right: 28px;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 0;
  pointer-events: none;
}

.mode-buttons button {
  min-width: 180px;
  min-height: 54px;
  margin: 0;
  padding: 10px 24px;
  font-size: 19px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  font-family: 'Cairo', sans-serif;
  font-weight: 800;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  opacity: 1 !important;
  pointer-events: auto;
}

.mode-buttons button:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.mode-buttons button:active {
  transform: translateY(0) scale(0.97);
}

/* تمييز الزر النشط حالياً بناءً على وضع الصفحة */
body:not(.dark-mode) .mode-buttons button[onclick*="LightMode"] {
  background: rgba(255, 255, 255, 0.28) !important;
  border-color: #f4aa2d !important;
  box-shadow: 0 0 20px rgba(244, 170, 45, 0.3);
  font-weight: 900;
}

body.dark-mode .mode-buttons button[onclick*="DarkMode"] {
  background: rgba(255, 255, 255, 0.28) !important;
  border-color: #f4aa2d !important;
  box-shadow: 0 0 20px rgba(244, 170, 45, 0.3);
  font-weight: 900;
}

button.action-btn {
  background: rgba(255, 255, 255, 0.22);
  color: var(--text-color);
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  padding: 14px 25px;
  font-size: 18px;
  font-weight: bold;
  transition: 0.3s;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
  opacity: 1 !important;
}

button.action-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.ayah-instruction {
  display: none !important;
}

/* =========================
   SURAH / AYAH RANGE AREA
========================= */

.surah-range-wrapper {
  max-width: 900px;
  margin: 0 auto 24px;
}

.surah-field,
.range-row,
.load-btn-row {
  width: 100%;
}

.surah-field {
  margin-bottom: 18px;
}

.range-row {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 18px;
}

.field-box {
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
}

.field-box label {
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-color);
  font-family: 'Cairo', sans-serif;
}

body.dark-mode .field-box label,
body.dark-mode .ayah-range-row label,
body.dark-mode .surah-select-row label {
  color: #f8f4ea;
}

.field-box input,
.field-box select {
  width: 100%;
  max-width: 100%;
  min-height: 60px;
  padding: 14px 18px;
  border-radius: 18px;
  border: 1px solid var(--field-border);
  background: var(--field-bg);
  color: var(--text-color);
  font-size: 18px;
  box-shadow: var(--field-shadow);
}

.field-box select option {
  background: #ffffff;
  color: #10222d;
}

body.dark-mode .field-box select option {
  background: #1b2a34;
  color: #ffffff;
}

.load-btn-row {
  display: flex;
  justify-content: center;
}

.load-btn-row button,
#loadAyahsBtn,
#loadBtn {
  min-width: 240px;
  min-height: 58px;
  border: none;
  border-radius: 18px;
  font-size: 18px;
  font-weight: 800;
  background: var(--btn-bg);
  color: var(--btn-text);
  box-shadow: 0 14px 28px rgba(42, 181, 214, 0.2);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.load-btn-row button:hover,
#loadAyahsBtn:hover,
#loadBtn:hover {
  background: var(--btn-hover);
  transform: translateY(-2px);
}

.load-btn-row button:active,
#loadAyahsBtn:active,
#loadBtn:active {
  background: var(--btn-active);
  transform: translateY(0) scale(0.99);
}

.surah-select-row {
  display: block;
  width: 100%;
  margin-bottom: 18px;
}

.ayah-range-row {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 18px;
}

.ayah-range-row .form-group,
.surah-select-row .form-group {
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
}

.ayah-range-row label,
.surah-select-row label {
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-color);
  font-family: 'Cairo', sans-serif;
}

.ayah-range-row input,
.ayah-range-row select,
.surah-select-row input,
.surah-select-row select {
  width: 100%;
  max-width: 100%;
  min-height: 60px;
  padding: 14px 18px;
  border-radius: 18px;
}

/* =========================
   AYAH CARDS
========================= */

.ayah {
  background: var(--ayah-bg);
  border: 2px solid var(--ayah-border);
  border-radius: 22px;
  padding: 24px 24px 20px;
  margin: 22px 0;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
  backdrop-filter: var(--glass-blur);
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
  opacity: 1 !important;
}

.ayah:hover {
  background: var(--ayah-hover);
  transform: translateY(-1px);
}

.ayah.active-ayah {
  background: var(--ayah-active-bg);
  border-color: var(--ayah-active-border);
  box-shadow: 0 0 0 4px rgba(210, 169, 79, 0.14), 0 10px 25px rgba(0,0,0,0.1);
}

.ayah-text {
  display: block !important;
  width: 100%;
  direction: rtl !important;
  text-align: center !important;
  font-family: 'Scheherazade New', serif;
  font-size: 34px;
  line-height: 2.3;
  color: var(--ayah-text-color);
  margin-bottom: 14px;
  unicode-bidi: plaintext;
  word-spacing: 2px;
  white-space: normal !important;
  writing-mode: horizontal-tb !important;
  opacity: 1 !important;
  text-shadow: none;
}

.ayah-text.indopak {
  font-family: 'PDMS-Saleem', serif;
}

.ayah-text.uthmani {
  font-family: 'Scheherazade New', serif;
}

.ayah-text span,
.ayah .ayah-text span,
.ayah .ayah-text .ayah-number {
  display: inline !important;
  writing-mode: horizontal-tb !important;
}

.ayah-chunk,
.ayah-chunk:hover,
.ayah-chunk.active-chunk {
  background: transparent !important;
  box-shadow: none !important;
  cursor: default !important;
  padding: 0 !important;
  margin: 0 !important;
}

.ayah-number {
  direction: ltr;
  margin-right: 10px;
  margin-left: 6px;
  font-size: 0.95em;
  font-weight: bold;
  color: var(--ayah-number-color);
  vertical-align: middle;
  white-space: nowrap;
}

.ayah-number::before {
  content: "[";
  margin-left: 1px;
}

.ayah-number::after {
  content: "]";
  margin-right: 1px;
}

.controls {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  opacity: 1 !important;
}

.controls button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  min-width: 110px;
  font-size: 16px;
  font-weight: bold;
  color: var(--btn-text);
  background: var(--btn-bg);
  border: none;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(42, 181, 214, 0.18);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  opacity: 1 !important;
}

.controls button:hover {
  background: var(--btn-hover);
  transform: translateY(-2px);
}

.controls button:active {
  background: var(--btn-active);
  transform: scale(0.97);
}

.controls button svg {
  vertical-align: middle;
  fill: #ffffff;
  width: 18px;
  height: 18px;
}

/* =========================
   RECORDER
========================= */

.recorder {
  position: fixed;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255,255,255,0.16);
  padding: 20px 12px;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  z-index: 999;
  transition: top 0.3s ease, left 0.3s ease;
  width: 88px;
  height: auto;
  opacity: 1 !important;
}

.recorder button {
  padding: 10px 18px;
  font-size: 16px;
  color: white;
  background: #2f4655;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  transition: opacity 0.3s, transform 0.3s, background 0.3s;
  opacity: 1 !important;
}

.recorder button:hover {
  opacity: 0.92;
}

.recorder button:active {
  transform: scale(1.06);
}

.recording {
  animation: blink 1s infinite;
  background: #d60000 !important;
}

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0.35; }
  100% { opacity: 1; }
}

.timeline {
  height: 5px;
  background: rgba(255,255,255,0.22);
  border-radius: 3px;
  flex-grow: 1;
  overflow: hidden;
  position: relative;
}

.progress {
  height: 100%;
  background: #ff4b4b;
  width: 0%;
  transition: width 0.2s;
}

#recordedAudio {
  margin-top: 20px;
  width: 100%;
  display: none;
}

audio#mainPlayer {
  display: none;
}

/* =========================
   MESSAGES
========================= */

#thanksMessage {
  margin-top: 60px;
}

#submitBtn {
  margin-top: 20px;
  outline: 2px solid transparent;
  transition: outline 0.3s;
}

#submitBtn:focus,
#submitBtn:target,
#submitBtn.scroll-visible {
  outline: 3px solid red;
}

.font-size-buttons {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.font-size-buttons button {
  min-width: 190px;
  padding: 10px 20px;
  font-size: 17px;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  transition: all 0.3s ease;
  opacity: 1 !important;
}

.font-size-buttons button:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  border-color: #f4aa2d !important;
  color: #f4aa2d !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(244, 170, 45, 0.2);
}

#successMessage {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.97);
  color: #12639f;
  padding: 20px 30px;
  border-radius: 16px;
  box-shadow: 0 0 22px rgba(0,0,0,0.18);
  font-size: 20px;
  z-index: 9999;
  text-align: center;
  border: 1px solid rgba(0,0,0,0.06);
}

body.dark-mode #successMessage {
  background: rgba(18, 35, 46, 0.98);
  color: #e9f7ff;
  border-color: rgba(255,255,255,0.08);
}

#audioErrorBox,
#warningMessage {
  font-family: Arial, sans-serif;
  border-radius: 12px;
  opacity: 1 !important;
}

.loading,
.disabled,
.dimmed,
.faded,
.is-loading,
.is-disabled {
  opacity: 1 !important;
  filter: none !important;
}

.loading *,
.disabled *,
.dimmed *,
.faded *,
.is-loading *,
.is-disabled * {
  opacity: 1 !important;
  filter: none !important;
}

/* =========================
   RESPONSIVE (Global)
========================= */

@media (max-width: 900px) {
  body {
    padding: 18px;
  }

  #ayahSection {
    padding: 18px;
  }

  .range-row,
  .ayah-range-row {
    gap: 14px;
  }

  .field-box,
  .ayah-range-row .form-group,
  .surah-select-row .form-group {
    flex: 1 1 100%;
  }

  .ayah {
    padding: 18px 16px 16px;
    border-radius: 18px;
  }

  .ayah-text {
    font-size: 28px;
    line-height: 2.1;
  }

  .controls button {
    min-width: 96px;
    font-size: 15px;
    padding: 9px 14px;
  }
}

@media (max-width: 600px) {
  body {
    padding: 14px;
  }

  .field-box label,
  .ayah-range-row label,
  .surah-select-row label {
    font-size: 16px;
  }

  .field-box input,
  .field-box select,
  .load-btn-row button,
  #loadAyahsBtn,
  #loadBtn {
    min-height: 54px;
    font-size: 16px;
  }

  .ayah-text {
    font-size: 24px;
    line-height: 2;
  }

  .ayah-number {
    font-size: 0.9em;
  }

  .controls {
    gap: 8px;
  }

  .controls button {
    min-width: 88px;
    font-size: 14px;
    padding: 8px 12px;
  }

  .recorder {
    width: 74px;
    padding: 14px 10px;
    right: 8px;
  }

  .recorder button {
    padding: 8px 10px;
    font-size: 14px;
  }
}

/* =========================
   PREMIUM HEADER FINAL OVERRIDES
========================= */

@media (max-width: 900px) {
  header {
    padding: 100px 18px 86px;
    border-radius: 26px;
  }

  header p {
    margin-top: 265px;
    max-width: 98%;
    font-size: clamp(18px, 3vw, 24px);
    white-space: nowrap;
  }

  .mode-buttons {
    top: 18px;
    left: 18px;
    right: 18px;
  }

  .mode-buttons button {
    min-width: 150px;
    min-height: 48px;
    font-size: 16px;
    padding: 10px 16px;
    border-radius: 50px;
  }

  .font-size-buttons button {
    min-width: 170px;
    font-size: 15px;
    border-radius: 50px;
  }
}

@media (max-width: 600px) {
  header {
    padding: 96px 14px 70px;
    border-radius: 22px;
  }

  header p {
    margin-top: 228px;
    font-size: 15px;
    white-space: nowrap;
  }

  .mode-buttons {
    top: 12px;
    left: 12px;
    right: 12px;
    gap: 8px;
  }

  .mode-buttons button {
    min-width: 0;
    width: auto;
    min-height: 44px;
    padding: 8px 12px;
    font-size: 14px;
    border-radius: 50px;
  }

  .font-size-buttons {
    margin-top: 18px;
    gap: 8px;
  }

  .font-size-buttons button {
    min-width: 0;
    width: auto;
    font-size: 13px;
    padding: 8px 10px;
    border-radius: 50px;
  }
}

/* =========================================================
   FIRST SCREEN / STUDENT FORM — ULTRA-PREMIUM GLASSMORPHISM
========================================================= */

#studentFormSection {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(100%, 1200px);
  max-width: 1200px;
  min-height: 620px;
  margin: 42px auto;
  padding: 90px 64px 40px calc(40% + 64px);
  overflow: hidden;
  direction: ltr;

  background:
    radial-gradient(circle at 92% 12%, rgba(244, 170, 45, 0.14), transparent 30%),
    linear-gradient(145deg, rgba(38, 42, 51, 0.85) 0%, rgba(26, 29, 36, 0.9) 48%, rgba(18, 20, 26, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  box-shadow:
    0 30px 80px rgba(5, 10, 20, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 40px rgba(244, 170, 45, 0.03);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

#studentFormSection h2 {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 76px;
  margin: 0;
  padding: 0 28px;

  background: linear-gradient(135deg, rgba(21, 152, 195, 0.88) 0%, rgba(8, 127, 169, 0.92) 52%, rgba(5, 108, 146, 0.95) 100%);
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
  font-family: 'Cairo', sans-serif;
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 800;
  line-height: 1;
  text-align: center;
  letter-spacing: 0.2px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#studentFormSection h2::before {
  display: none;
}

#studentFormSection::before {
  content: "";
  position: absolute;
  top: 76px;
  bottom: 0;
  left: 0;
  width: 40%;
  z-index: 1;
  pointer-events: none;

  background:
    url("images/noory-bg.png") center / contain no-repeat,
    linear-gradient(160deg, #1a1a1a 0%, #2a2015 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: inset -18px 0 34px rgba(10, 20, 30, 0.3);
}

#studentFormSection::after {
  content: "";
  position: absolute;
  inset: 76px 0 0 40%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 85% 8%, rgba(244, 170, 45, 0.12), transparent 30%),
    radial-gradient(circle at 16% 92%, rgba(36, 178, 221, 0.08), transparent 32%);
}

#studentFormSection .welcome-subtitle,
#studentFormSection .form-subtitle,
#studentFormSection p.form-subtitle {
  display: none;
}

#studentForm {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  z-index: 3;
  display: block !important;
  width: 100% !important;
  min-width: min(100%, 560px) !important;
  max-width: 560px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  direction: ltr !important;
}

/* إلغاء الـ Grid عن صفوف الحقول وجعلها تترتب عمودياً لتوسيع الخانات وتوسيط النموذج بالكامل */
#studentForm > .form-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
  margin: 0 0 20px 0 !important;
  width: 100% !important;
}

/* محاذاة التسميات (Name, Email...) أعلى خانات الإدخال مباشرة وحذف المحاذاة الجانبية */
#studentForm > .form-group:not(:has(.font-preview-row)) > label {
  margin: 0 0 4px 0 !important;
  color: rgba(255, 255, 255, 0.95) !important;
  font-family: 'Cairo', sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  text-align: left !important;
  white-space: nowrap;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* محاذاة تسمية اختيار الخط بالأعلى وتوسيعها وتلوينها بالذهبي وتوسيطها */
#studentForm > .form-group:nth-of-type(5) > label {
  display: block !important;
  width: 100% !important;
  margin: 0 0 8px 0 !important;
  color: #f4aa2d !important;
  font-family: 'Cairo', sans-serif;
  font-size: 18px !important;
  font-weight: 800 !important;
  text-align: center !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* =========================================================
   إصلاح: فرض العرض الكامل على كل حقول الإدخال داخل النموذج
   بالقوة (!important) حتى تتغلب على أي inline style أو
   attribute (مثل size أو width) موجودة في HTML نفسه.
   هذا هو سبب ظهور الحقول ضيقة وملتصقة يمين النموذج في الصورة.
========================================================= */
#studentForm input[type="text"],
#studentForm input[type="email"],
#studentForm input[type="date"],
#studentForm input[type="time"],
#studentForm select {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  margin: 0 !important;
  padding: 0 18px !important;

  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.2),
    0 4px 10px rgba(0, 0, 0, 0.1);
  font-family: 'Cairo', sans-serif;
  font-size: 16px;
  line-height: 52px;
  -webkit-appearance: none;
  appearance: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#studentForm input:hover,
#studentForm select:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.25);
}

#studentForm input:focus,
#studentForm select:focus {
  outline: none;
  border-color: #f4aa2d;
  background: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 0 0 4px rgba(244, 170, 45, 0.15),
    0 8px 24px rgba(244, 170, 45, 0.2),
    inset 0 2px 4px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

#studentForm input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

#studentForm input[readonly] {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  cursor: default;
}

#studentForm select option {
  background: #1a1d24;
  color: #ffffff;
}

#studentForm > .form-group:nth-of-type(5) {
  align-items: center;
  margin-top: 20px;
  margin-bottom: 0;
}

#studentForm > .form-group:nth-of-type(5) > label {
  align-self: center;
  font-size: 17px !important;
  line-height: 1.55;
}

/* تنسيق بطاقات الخطوط الزجاجية العريضة (لو العنصر فعلياً بطاقات .font-preview-card) */
#studentForm .font-preview-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  width: 100% !important;
  margin: 0 !important;
}

#studentForm .font-preview-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  max-width: none;
  min-height: 150px;
  margin: 0;
  padding: 16px 12px;
  overflow: visible;

  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  color: #ffffff;
  text-align: center;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#studentForm .font-preview-card:hover {
  transform: translateY(-3px);
  border-color: rgba(244, 170, 45, 0.6);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}

#studentForm .font-preview-card img {
  display: block;
  width: 100%;
  max-width: 130px;
  height: 70px;
  min-height: 0;
  margin: 0 auto 12px;
  padding: 6px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}

#studentForm .font-preview-card:hover img {
  transform: scale(1.03);
}

#studentForm .font-preview-card br {
  display: none;
}

#studentForm .font-preview-card strong,
#studentForm .font-preview-card span,
#studentForm .font-preview-card .font-title,
#studentForm .font-preview-card .font-name {
  display: block;
  width: 100%;
  color: rgba(255, 255, 255, 0.85);
  font-family: 'Cairo', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: normal;
  transition: color 0.3s ease;
}

#studentForm .font-preview-card:hover strong {
  color: #ffffff;
}

#studentForm .font-preview-card.selected,
#studentForm .font-preview-card:has(input[type="radio"]:checked) {
  background: linear-gradient(180deg, rgba(244, 170, 45, 0.18), rgba(244, 170, 45, 0.06));
  border-color: #f4aa2d;
  box-shadow:
    0 0 0 3px rgba(244, 170, 45, 0.2),
    0 12px 30px rgba(0, 0, 0, 0.3);
}

#studentForm .font-preview-card:has(input[type="radio"]:checked) strong {
  color: #f4aa2d;
}

#studentForm .font-preview-card:has(input[type="radio"]:checked)::after,
#studentForm .font-preview-card.selected::after {
  content: "✓";
  position: absolute;
  top: -8px;
  right: -8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffd066 0%, #f4aa2d 100%);
  color: #1e2229;
  font-size: 15px;
  line-height: 26px;
  font-weight: 900;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  z-index: 2;
}

/* =========================================================
   إصلاح: لو اختيار نوع الخط فعلياً عبارة عن
   <input type="range"> عادي (كما يظهر في الصورة كشريط رأسي
   رفيع مقطوع)، يجب منع المتصفح من عرضه بالوضع الافتراضي
   الرأسي جوه عمود ضيق، وجعله أفقياً بعرض النموذج بالكامل.
========================================================= */
#studentForm input[type="range"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  writing-mode: horizontal-tb !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 8px !important;
  margin: 14px 0 !important;
  padding: 0 !important;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  outline: none;
  cursor: pointer;
}

#studentForm input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffd066 0%, #f4aa2d 100%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  margin-top: -8px;
}

#studentForm input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffd066 0%, #f4aa2d 100%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

#studentForm input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
}

#studentForm input[type="range"]::-moz-range-track {
  height: 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
}

/* زر البدء الذهبي الفاخر */
#startButton {
  display: block;
  width: 100%;
  max-width: none;
  min-height: 54px;
  margin: 24px 0 0;
  padding: 14px 22px;

  background: linear-gradient(135deg, #ffd066 0%, #f4aa2d 50%, #d28c1c 100%);
  color: #1e2229;
  border: 1px solid rgba(255, 213, 121, 0.8);
  border-radius: 10px;
  box-shadow:
    0 12px 25px rgba(210, 140, 28, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  font-family: 'Cairo', sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.5px;
  text-transform: none;
  white-space: nowrap;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#startButton:hover {
  background: linear-gradient(135deg, #ffe085 0%, #f7b847 50%, #e09724 100%);
  transform: translateY(-2px);
  box-shadow:
    0 16px 30px rgba(210, 140, 28, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

#startButton:active {
  transform: translateY(0) scale(0.99);
}

/* تعديلات الوضع الداكن المخصصة */
body.dark-mode #studentFormSection {
  background:
    radial-gradient(circle at 92% 12%, rgba(244, 170, 45, 0.1), transparent 28%),
    linear-gradient(145deg, rgba(20, 22, 28, 0.88) 0%, rgba(14, 16, 20, 0.93) 48%, rgba(8, 10, 12, 0.97) 100%);
}

body.dark-mode #studentFormSection h2,
body.dark-mode #studentForm > .form-group > label,
body.dark-mode #studentForm .font-preview-card strong {
  color: #ffffff;
}

body.dark-mode #studentForm input[type="text"],
body.dark-mode #studentForm input[type="email"],
body.dark-mode #studentForm input[type="date"],
body.dark-mode #studentForm input[type="time"],
body.dark-mode #studentForm select {
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
}

body.dark-mode #studentForm input[readonly] {
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
}

/* =========================================================
   RESPONSIVE (Student Form Grid Fixes)
========================================================= */

@media (max-width: 940px) {
  #studentFormSection {
    width: min(100%, 860px);
    max-width: 860px;
    min-height: 660px;
    padding: 104px 36px 42px calc(40% + 36px);
  }

  #studentFormSection::before {
    width: 40%;
    background: url("images/noory-bg.png") center / contain no-repeat, #1a1a1a;
  }

  #studentFormSection::after {
    left: 40%;
  }

  #studentForm > .form-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  #studentForm > .form-group > label {
    font-size: 16px;
  }

  #studentForm .font-preview-card {
    min-height: 140px;
  }
}

@media (max-width: 700px) {
  #studentFormSection {
    width: 100%;
    max-width: 100%;
    min-height: 0;
    margin: 18px auto;
    padding: 360px 18px 24px;
    border-radius: 14px;
  }

  #studentFormSection h2 {
    height: 68px;
    font-size: clamp(24px, 7vw, 32px);
  }

  #studentFormSection::before {
    top: 68px;
    left: 0;
    width: 100%;
    height: 260px;
    bottom: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    background: url("images/noory-bg.png") center / contain no-repeat, #1a1a1a;
  }

  #studentFormSection::after {
    inset: 328px 0 0 0;
  }

  #studentForm {
    max-width: 520px;
    margin: 0 auto !important;
  }

  #studentForm > .form-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    margin-bottom: 15px;
  }

  #studentForm > .form-group > label {
    display: block;
    margin-bottom: 7px;
    font-size: 15px !important;
    text-align: left;
  }

  #studentForm input[type="text"],
  #studentForm input[type="email"],
  #studentForm input[type="date"],
  #studentForm input[type="time"],
  #studentForm select {
    min-height: 50px;
    font-size: 16px;
  }

  #studentForm .font-preview-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  #studentForm .font-preview-card {
    min-height: 135px;
    padding: 12px 8px;
  }

  #studentForm .font-preview-card img {
    height: 68px;
  }

  #startButton {
    min-height: 50px;
    margin-top: 20px;
    font-size: 17px;
  }
}

@media (max-width: 430px) {
  #studentFormSection {
    padding-top: 330px;
  }

  #studentFormSection::before {
    height: 230px;
  }

  #studentFormSection::after {
    inset: 298px 0 0 0;
  }

  #studentForm .font-preview-row {
    grid-template-columns: 1fr;
  }

  #studentForm .font-preview-card {
    min-height: 125px;
  }

  #startButton {
    white-space: normal;
  }
}