:root {
  --tw-purple: #4a345b;
  --tw-maroon: #95204f;
  --bg: #0f0e13;
  --bg2: #12111a;
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.72);
  --muted2: rgba(255,255,255,.55);
  --surface: rgba(255,255,255,.08);
  --surface2: rgba(255,255,255,.12);
  --border: rgba(255,255,255,.14);
  --grad: linear-gradient(135deg, var(--tw-purple) 0%, var(--tw-maroon) 100%);
  --grad-soft: linear-gradient(135deg, rgba(74,52,91,.75), rgba(149,32,79,.75));
  --gold: #d4af37;
  --gold-dark: #b8941f;
  --green: #2c5530;
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 12px;
  --ease: cubic-bezier(.2,.8,.2,1);
  --shadow: 0 10px 30px rgba(0,0,0,.25);
  --shadow-lg: 0 18px 60px rgba(0,0,0,.45);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Tajawal','Amiri', sans-serif;
  background:
    radial-gradient(1200px 700px at 15% 10%, rgba(149,32,79,.25), transparent 55%),
    radial-gradient(1000px 600px at 85% 20%, rgba(74,52,91,.30), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  color: var(--text);
  min-height: 100vh;
  direction: rtl;
  line-height: 1.55;
  padding: 6px;
}
.container { max-width: 1240px; margin: 0 auto; }

.login-hero {
  background: linear-gradient(120deg, rgba(74,52,91,.96), rgba(149,32,79,.92));
}
.login-card {
  max-width: 520px;
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.04));
}
.login-form { position: relative; }
.login-label {
  color: rgba(255,255,255,.8);
  font-size: .86em;
  margin-top: 2px;
}
.login-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.16));
  color: var(--text);
  outline: none;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.login-input::placeholder { color: rgba(255,255,255,.45); }
.login-input:focus {
  border-color: rgba(212,175,55,.45);
  box-shadow: 0 0 0 4px rgba(149,32,79,.22), 0 0 25px rgba(212,175,55,.14);
  transform: translateY(-1px);
}
.login-btn {
  margin-top: 8px;
  font-size: 1.03em;
}

/* ── Header ── */
.header {
  border-radius: var(--r-lg);
  padding: 10px 14px;
  background: var(--grad);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: var(--shadow-lg);
  position: relative; overflow: hidden;
  margin-bottom: 6px; text-align: center;
}
.header::after {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(800px 320px at 25% 0%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(700px 360px at 90% 20%, rgba(255,255,255,.10), transparent 60%);
  pointer-events:none;
}
.header h1 {
  position: relative; z-index:1;
  font-family: 'Amiri', serif;
  font-size: clamp(22px, 3.2vw, 38px);
  line-height: 1.15; margin-bottom: 4px;
  text-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.header p { position: relative; z-index:1; color: rgba(255,255,255,.85); font-size: 14px; }

/* ── Progress Section ── */
.progress-section {
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.05));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 8px 10px;
  margin-bottom: 6px;
  box-shadow: var(--shadow);
}

/* ── Admin Dashboard ── */
.admin-dashboard {
  display: none;
  margin-bottom: 10px;
}
.admin-dashboard.visible { display: block; }
.admin-intro {
  background: linear-gradient(145deg, rgba(212,175,55,.12), rgba(149,32,79,.10));
  border: 1px solid rgba(212,175,55,.35);
  border-radius: var(--r-md);
  padding: 10px;
  margin-bottom: 8px;
}
.admin-quick-actions {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.admin-intro-title {
  font-family: 'Amiri', serif;
  font-size: 1.35em;
  color: var(--gold);
}
.admin-intro-sub {
  color: var(--muted);
  font-size: .92em;
}
.admin-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px;
}
.admin-card {
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px;
  box-shadow: var(--shadow);
}
.admin-card h3 {
  margin-bottom: 8px;
  font-size: 1em;
  color: var(--gold);
}
.admin-card.users { grid-column: span 12; }
.admin-card.assign { grid-column: span 12; }
.step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(212,175,55,.2);
  border: 1px solid rgba(212,175,55,.45);
  color: var(--gold);
  font-weight: 800;
  margin-left: 6px;
  font-size: .85em;
}
.helper-text {
  color: var(--muted2);
  font-size: .82em;
  margin-bottom: 6px;
}
.assign-advanced {
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  background: rgba(0,0,0,.14);
  padding: 8px 10px;
}
.assign-advanced summary {
  cursor: pointer;
  color: var(--muted);
  font-size: .9em;
  font-weight: 700;
}
.assign-advanced[open] summary {
  color: var(--gold);
  margin-bottom: 4px;
}
.admin-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}
.kpi {
  background: rgba(0,0,0,.2);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: 6px;
  text-align: center;
}
.kpi-value {
  font-size: 1.15em;
  font-weight: 800;
  color: var(--gold);
}
.kpi-label {
  font-size: .76em;
  color: var(--muted2);
}
.admin-form-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 6px;
}
.admin-form-row .grow-3 { grid-column: span 3; }
.admin-form-row .grow-4 { grid-column: span 4; }
.admin-form-row .grow-5 { grid-column: span 5; }
.admin-form-row .grow-6 { grid-column: span 6; }
.admin-form-row .grow-8 { grid-column: span 8; }
.admin-form-row .grow-12 { grid-column: span 12; }
.admin-users-wrap {
  max-height: 340px;
  overflow: auto;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 8px;
  background: rgba(0,0,0,.12);
}
.admin-user-list-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 10px;
}
.admin-user-card {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
}
.admin-user-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.admin-user-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.admin-user-name { font-weight: 800; color: var(--gold); }
.admin-user-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  color: var(--muted2);
  font-size: .78em;
}
.admin-progress-wrap {
  margin-top: 4px;
}
.admin-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: .74em;
  color: var(--muted);
  margin-bottom: 4px;
}
.admin-progress-track {
  width: 100%;
  height: 7px;
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
  overflow: hidden;
}
.admin-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #d4af37, #a52762);
  transition: width .3s ease;
}
.admin-users-empty {
  color: var(--muted2);
  font-size: .9em;
  padding: 10px;
  text-align: center;
}

.admin-view-switch {
  display: flex;
  gap: 6px;
  background: rgba(0,0,0,.2);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 4px;
}
.btn-admin-mode {
  padding: 7px 12px;
  border-radius: 999px;
  font-size: .85em;
}
.btn-admin-mode.active {
  background: var(--grad);
  border-color: rgba(255,255,255,.25);
  box-shadow: 0 6px 18px rgba(149,32,79,.28);
}

.btn-danger {
  padding: 5px 10px;
  border-radius: 10px;
  border-color: rgba(255,120,120,.35);
  background: rgba(244,67,54,.18);
  color: #ffc5c5;
}
.btn-danger:hover {
  background: rgba(244,67,54,.3);
}

.admin-mode .annotator-workspace,
.admin-mode .shortcuts {
  display: none !important;
}
.progress-top {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px; margin-bottom: 10px;
}
.progress-stats { display: flex; gap: 24px; }
.progress-stat { text-align: center; }
.progress-value { font-size: 1.3em; font-weight: 800; color: var(--gold); }
.progress-label { font-size: 0.78em; color: var(--muted); }
.progress-bar-wrap {
  width: 100%; background: rgba(255,255,255,.08);
  border-radius: 10px; height: 22px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
}
.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--tw-purple), var(--tw-maroon));
  transition: width .4s var(--ease);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75em; font-weight: 800; color: white; min-width: 36px;
}

/* ── Navigation ── */
.nav-section {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px; flex-wrap: wrap; gap: 8px;
}
.filter-group { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.nav-buttons { display: flex; gap: 8px; align-items: center; }

select, input[type="number"], input[type="text"], input[type="password"] {
  padding: 10px 12px; border-radius: var(--r-sm);
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.18); color: var(--text);
  font-family: inherit; font-size: 0.9em; outline: none;
}
select option { background: #1e1b2e; }
select:focus, input:focus {
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 0 0 4px rgba(74,52,91,.18);
}
input::placeholder { color: rgba(255,255,255,.42); }

/* Keep browser autofill aligned with dark theme */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--text);
  box-shadow: 0 0 0 1000px rgba(0,0,0,.18) inset;
  transition: background-color 5000s ease-in-out 0s;
}

.btn {
  padding: 10px 18px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: var(--surface); color: var(--text);
  cursor: pointer; font-weight: 800; font-family: inherit;
  transition: transform .18s var(--ease), background .18s var(--ease);
}
.btn:hover { transform: translateY(-1px); background: var(--surface2); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.btn-accent {
  background: var(--grad-soft);
  border-color: rgba(255,255,255,.22);
}
.btn-accent:hover { filter: brightness(1.1); }
.btn-save {
  background: linear-gradient(135deg, #2c5530, #3a7d3e); color: white;
  border-color: rgba(255,255,255,.2);
}
.btn-save:hover { filter: brightness(1.15); }
.btn-save-next {
  background: var(--grad); color: white;
  border-color: rgba(255,255,255,.2); font-size: 1.05em;
}
.btn-save-next:hover { filter: brightness(1.1); }

/* ── Sample Info Card ── */
.sample-info {
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.05));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 8px 10px;
  margin-bottom: 6px;
  box-shadow: var(--shadow);
}
.sample-header {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px;
}
.surah-title {
  font-family: 'Amiri', serif;
  font-size: 1.5em; color: var(--gold);
  text-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.sample-meta { display: flex; gap: 16px; color: var(--muted); font-size: 0.85em; }
.meta-item { display: flex; align-items: center; gap: 4px; }

/* ── Audio Player ── */
.audio-section {
  background: rgba(0,0,0,.25); padding: 8px;
  border-radius: var(--r-md); margin-bottom: 14px;
  text-align: center; border: 1px solid var(--border);
}
audio { width: 100%; max-width: 520px; border-radius: 8px; }
.playback-controls { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.playback-btn {
  padding: 7px 16px; border-radius: 20px; border: 1px solid rgba(255,255,255,.18);
  background: var(--surface); color: var(--text); cursor: pointer;
  font-family: inherit; font-size: 0.85em;
  transition: background .2s, transform .15s;
}
.playback-btn:hover { background: var(--surface2); transform: translateY(-1px); }

/* ── Uthmani Text Display ── */
.uthmani-section {
  background: linear-gradient(180deg, rgba(212,175,55,.08), rgba(212,175,55,.03));
  border: 1px solid rgba(212,175,55,.25);
  padding: 10px; border-radius: var(--r-lg);
  margin-bottom: 6px; text-align: center;
  box-shadow: var(--shadow);
}
.uthmani-label {
  font-family: 'Amiri', serif; font-size: 0.9em;
  color: var(--gold); margin-bottom: 12px; opacity: .7;
}
.uthmani-text {
  font-family: 'Amiri', serif; font-size: 1.8em;
  color: var(--text); line-height: 1.7; direction: rtl;
  word-spacing: 6px; letter-spacing: 1px;
}
.sura-ayah-ref {
  font-size: 0.8em; color: var(--muted2); margin-top: 10px;
}

/* ── Aya Text Display ── */
.aya-section {
  background: linear-gradient(145deg, #fefcf7, #f9f6f0);
  padding: 10px 8px; border-radius: var(--r-lg);
  margin-bottom: 6px; text-align: center;
  border: 3px solid var(--gold);
  box-shadow: 0 8px 30px rgba(0,0,0,.10);
  position: relative;
}
.aya-section::before {
  content:''; position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 25% 25%, rgba(212,175,55,0.05) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(44,85,48,0.05) 0%, transparent 50%);
  border-radius: var(--r-lg); pointer-events:none;
}
.aya-text {
  font-family: 'Amiri', serif;
  font-size: 1.55em; line-height: 1.65; color: #1a1a1a;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 2px;
  direction: rtl; position: relative; z-index: 1;
}
.letter-box {
  display: inline-flex; flex-direction: column; align-items: center;
  padding: 3px 3px; border-radius: 8px; cursor: pointer;
  transition: all .2s var(--ease);
  border: 2px solid transparent; min-width: 30px; position: relative;
}
.letter-box:hover { background: rgba(74,52,91,.12); }
.letter-box.selected {
  border-color: var(--tw-maroon);
  background: rgba(149,32,79,.12);
  box-shadow: 0 0 0 3px rgba(149,32,79,.15);
}
.letter-box.has-error {
  border-color: #d32f2f; background: rgba(211,47,47,.12);
}
.letter-box.corrected {
  border-color: var(--gold); background: rgba(212,175,55,.15);
}
.letter-box.has-rules { border-bottom: 2px solid rgba(149,32,79,.5); }
.letter-char { font-size: 1em; }
.letter-haraka-label {
  font-size: 0.55em; color: #888; margin-top: 1px;
  font-family: 'Tajawal', sans-serif; white-space: nowrap;
}
.letter-status {
  position: absolute; top: -8px; right: -8px;
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.65em; font-weight: bold; color: white;
}
.status-error { background: #d32f2f; }
.status-corrected { background: var(--gold-dark); }
.space-char { width: 16px; }

/* ── Letter Editor Panel ── */
.editor-panel {
  display: none;
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
  padding: 10px; border-radius: var(--r-lg);
  margin-bottom: 6px; border: 1px solid rgba(149,32,79,.4);
  box-shadow: var(--shadow);
  position: fixed;
  top: 92px;
  left: 10px;
  width: min(470px, 46vw);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  z-index: 500;
  backdrop-filter: blur(8px);
}
.editor-panel.visible { display: block; }
.editor-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px; flex-wrap: wrap; gap: 10px;
}
.editor-letter {
  font-family: 'Amiri', serif;
  font-size: 2em; color: var(--gold);
  text-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.letter-change { display: flex; align-items: center; gap: 10px; }
.letter-input {
  width: 44px; height: 44px; font-size: 1.6em; text-align: center;
  border-radius: var(--r-sm); border: 2px solid var(--tw-maroon);
  background: rgba(0,0,0,.2); color: var(--text);
  font-family: 'Amiri', serif; outline: none;
}
.letter-input:focus { box-shadow: 0 0 0 4px rgba(149,32,79,.2); }

/* ── Tajweed Tags ── */
.tajweed-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tajweed-tag {
  padding: 4px 11px; border-radius: 16px; font-size: 0.82em;
  font-weight: 700; display: inline-flex; align-items: center; gap: 4px;
}
.tag-sifat { background: rgba(74,52,91,.35); color: #c9a0dc; border: 1px solid rgba(74,52,91,.5); }
.tag-rule { background: rgba(149,32,79,.25); color: #e8a0bc; border: 1px solid rgba(149,32,79,.4); }
.tag-haraka { background: rgba(212,175,55,.2); color: var(--gold); border: 1px solid rgba(212,175,55,.3); }
.tag-makhraj { background: rgba(44,85,48,.25); color: #8bc990; border: 1px solid rgba(44,85,48,.4); }
.tag-pause { background: rgba(33,150,243,.2); color: #90caf9; border: 1px solid rgba(33,150,243,.3); }

/* ── Editor Info Sections ── */
.editor-info-section {
  padding: 8px; background: rgba(0,0,0,.12);
  border-radius: var(--r-sm); margin-bottom: 6px;
  border: 1px solid rgba(255,255,255,.06);
}
.editor-info-label {
  font-size: 0.82em; color: var(--muted2); margin-bottom: 6px;
  font-weight: 700;
}

/* ── Section Header Row ── */
.section-header-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 4px;
}
.section-toggle-btns {
  display: flex; gap: 5px;
}
.section-toggle-btn {
  padding: 3px 12px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--border); font-family: inherit;
  font-size: 0.75em; transition: all .2s var(--ease);
  background: transparent; color: var(--muted);
}
.section-toggle-btn:hover { background: rgba(255,255,255,.08); }
.section-toggle-btn.correct.active { background: rgba(76,175,80,.2); color: #4caf50; border-color: rgba(76,175,80,.4); }
.section-toggle-btn.error.active { background: rgba(244,67,54,.2); color: #f44336; border-color: rgba(244,67,54,.4); }

/* ── Rules Toggle ── */
.rule-toggle-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 8px; border-radius: var(--r-sm);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.rule-toggle-row:last-child { border-bottom: none; }
.rule-toggle-name { color: var(--text); font-size: 0.9em; }
.rule-toggle-en { color: var(--muted2); font-size: 0.75em; margin-right: 8px; }
.rule-toggle-btns { display: flex; gap: 5px; }
.rule-toggle-btn {
  padding: 3px 10px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--border); font-family: inherit;
  font-size: 0.74em; transition: all .2s var(--ease);
  background: transparent; color: var(--muted);
}
.rule-toggle-btn:hover { background: rgba(255,255,255,.08); }
.rule-toggle-btn.correct.active { background: rgba(76,175,80,.2); color: #4caf50; border-color: rgba(76,175,80,.4); }
.rule-toggle-btn.error.active { background: rgba(244,67,54,.2); color: #f44336; border-color: rgba(244,67,54,.4); }

.no-tajweed-msg {
  text-align: center; padding: 16px; color: var(--muted2); font-style: italic;
}

/* ── Rules Grid (legacy fallback) ── */
.rules-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px; margin-top: 14px;
}
.rule-card {
  background: rgba(0,0,0,.15); padding: 12px;
  border-radius: var(--r-sm); border: 1px solid var(--border);
}
.rule-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.rule-name { font-weight: 700; color: rgba(255,255,255,.85); font-size: 0.95em; }
.rule-name-en { font-size: 0.75em; color: var(--muted2); }
.rule-options { display: flex; flex-wrap: wrap; gap: 5px; }
.rule-option {
  padding: 5px 12px; border-radius: 20px; border: 1px solid var(--border);
  cursor: pointer; font-family: inherit; font-size: 0.82em;
  transition: all .2s var(--ease);
  background: transparent; color: var(--muted);
}
.rule-option:hover { background: rgba(255,255,255,.08); color: var(--text); }
.rule-option.selected {
  background: var(--grad); color: white;
  border-color: rgba(255,255,255,.25);
  box-shadow: 0 2px 8px rgba(149,32,79,.3);
}

/* ── Grade Section ── */
.grade-section {
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.05));
  border: 1px solid var(--border);
  padding: 18px; border-radius: var(--r-lg);
  margin-bottom: 14px; box-shadow: var(--shadow);
}
.grade-header {
  font-family: 'Amiri', serif;
  font-size: 1.15em; margin-bottom: 14px;
  color: var(--gold); text-align: center;
}
.grade-options { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.grade-btn {
  padding: 12px 22px; border-radius: 14px;
  border: 2px solid transparent; cursor: pointer;
  font-family: inherit; font-size: 0.95em; font-weight: 700;
  transition: all .2s var(--ease);
  background: var(--surface); color: var(--muted);
}
.grade-btn:hover { background: var(--surface2); }
.grade-btn.selected { border-color: currentColor; }
.grade-btn.correct { color: #4caf50; }
.grade-btn.correct.selected { background: rgba(76,175,80,.15); }
.grade-btn.minor { color: #ff9800; }
.grade-btn.minor.selected { background: rgba(255,152,0,.15); }
.grade-btn.major { color: #f44336; }
.grade-btn.major.selected { background: rgba(244,67,54,.15); }
.grade-btn.not-quran { color: var(--muted2); }
.grade-btn.not-quran.selected { background: rgba(255,255,255,.06); }

/* ── Notes ── */
.notes-section { margin-bottom: 8px; }
.notes-textarea {
  width: 100%; min-height: 46px; padding: 8px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: rgba(0,0,0,.2);
  color: var(--text); font-family: inherit; font-size: 0.95em; resize: vertical;
  outline: none;
}
.notes-textarea:focus { border-color: rgba(149,32,79,.5); box-shadow: 0 0 0 3px rgba(149,32,79,.15); }

/* ── Action Buttons ── */
.action-section {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 0; flex-wrap: wrap; gap: 10px;
}

/* ── Shortcuts ── */
.shortcuts {
  position: fixed; bottom: 10px; left: 10px;
  background: rgba(0,0,0,.85); padding: 10px 14px;
  border-radius: var(--r-sm); font-size: 0.7em; color: var(--muted);
  border: 1px solid var(--border); backdrop-filter: blur(8px);
}

@media (max-height: 900px) {
  .shortcuts { display: none; }
}
.shortcut-key {
  background: rgba(255,255,255,.15); padding: 2px 6px;
  border-radius: 4px; font-family: monospace; color: var(--text);
}

/* ── Loading ── */
.loading {
  display: flex; justify-content: center; align-items: center;
  padding: 50px; color: var(--muted);
}
.spinner {
  width: 36px; height: 36px;
  border: 3px solid rgba(255,255,255,.1);
  border-top-color: var(--tw-maroon); border-radius: 50%;
  animation: spin .8s linear infinite; margin-left: 14px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Toast ── */
.toast {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
  background: var(--grad); color: white; padding: 12px 24px;
  border-radius: var(--r-sm); font-size: 1em; z-index: 1000;
  opacity: 0; transition: opacity .3s; box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,.2);
}
.toast.visible { opacity: 1; }
.toast.error { background: linear-gradient(135deg, #b71c1c, #d32f2f); }

/* ── Sample List ── */
.sample-list {
  display: none; background: rgba(0,0,0,.3);
  padding: 12px; border-radius: var(--r-lg); max-height: 380px;
  overflow-y: auto; margin-bottom: 14px;
  border: 1px solid var(--border); box-shadow: var(--shadow);
}
.sample-list.visible { display: block; }
.sample-list::-webkit-scrollbar { width: 6px; }
.sample-list::-webkit-scrollbar-track { background: transparent; }
.sample-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 3px; }
.sample-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; border-radius: var(--r-sm); cursor: pointer;
  transition: background .2s;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.sample-row:hover { background: rgba(255,255,255,.08); }
.sample-row.annotated { background: rgba(76,175,80,.08); }
.sample-row-info { display: flex; gap: 14px; align-items: center; }
.sample-row-num { color: var(--muted2); min-width: 45px; font-size: 0.85em; }
.sample-row-surah { color: var(--gold); min-width: 110px; font-weight: 700; }
.sample-row-text {
  color: var(--muted); font-size: 0.88em;
  max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sample-row-status { font-size: 1em; }

.letter-hover-card {
  position: fixed;
  z-index: 520;
  min-width: 160px;
  max-width: 260px;
  background: linear-gradient(180deg, rgba(16,16,24,.96), rgba(22,20,32,.96));
  border: 1px solid rgba(212,175,55,.35);
  border-radius: 12px;
  padding: 8px 10px;
  box-shadow: var(--shadow-lg);
  pointer-events: none;
}
.letter-hover-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.letter-hover-char {
  font-family: 'Amiri', serif;
  font-size: 1.35em;
  color: var(--gold);
}
.letter-hover-line {
  font-size: .8em;
  color: var(--muted);
  line-height: 1.35;
}

@media (max-width: 980px) {
  .admin-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-user-list-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .admin-form-row .grow-3,
  .admin-form-row .grow-4,
  .admin-form-row .grow-5,
  .admin-form-row .grow-6,
  .admin-form-row .grow-8,
  .admin-form-row .grow-12 { grid-column: span 12; }
  .admin-user-meta { grid-template-columns: repeat(1, minmax(0, 1fr)); }

  .editor-panel {
    left: 8px;
    right: 8px;
    width: auto;
    top: auto;
    bottom: 8px;
    max-height: 54vh;
  }
}