:root {
  --qa-bg: #fcfbf8;
  --qa-card: #ffffff;
  --qa-border: #d4b35a;
  --qa-text: #2d2a4a;
  --qa-muted: #6b6a7d;
  --qa-accent: #2bb1a0;
  --qa-yellow: #f4c84a;
  --qa-green:  #5fb88a;
  --qa-blue:   #5aa9e6;
  --qa-red:    #e57373;
  --qa-purple: #9b7ed1;
}
.qa-root { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--qa-text); background: var(--qa-bg); padding: 16px; border-radius: 12px; max-width: 100%; box-sizing: border-box; }
.qa-root * { box-sizing: border-box; }
.qa-toolbar { background: var(--qa-card); border-radius: 12px; padding: 12px 16px; box-shadow: 0 1px 2px rgba(0,0,0,.05); display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.qa-label { font-size: 11px; letter-spacing: 1.2px; color: var(--qa-muted); font-weight: 700; }
.qa-controls { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.qa-colors { display:flex; align-items:center; gap:8px; }
.qa-color { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(0,0,0,.1); cursor: pointer; padding: 0; transition: transform .15s ease; }
.qa-color.is-active { transform: scale(1.15); border-color: #222; }
.qa-color-yellow { background: var(--qa-yellow); }
.qa-color-green  { background: var(--qa-green); }
.qa-color-blue   { background: var(--qa-blue); }
.qa-color-red    { background: var(--qa-red); }
.qa-color-purple { background: var(--qa-purple); }
.qa-color-erase  { background: #fff; color:#888; font-weight: 700; }
.qa-surah-select { padding: 6px 10px; border-radius: 8px; border:1px solid #ddd; font-size:14px; max-width: 220px; }
.qa-pager { display:flex; align-items:center; gap:8px; color: var(--qa-muted); font-weight:600; font-size:13px; }
.qa-pager button { background:#fff; border:1px solid #ddd; border-radius:8px; padding:4px 10px; cursor:pointer; font-size:16px; }

.qa-hint { color: var(--qa-accent); text-align:center; margin: 10px 0 14px; font-size: 14px; }

.qa-page { background: var(--qa-card); border: 2px solid var(--qa-border); border-radius: 12px; padding: 20px; min-height: 300px; }
.qa-loading { text-align:center; color: var(--qa-muted); padding: 40px 0; }

.qa-ayah { display:flex; flex-direction: row-reverse; flex-wrap: wrap; justify-content: flex-start; gap: 4px 14px; padding: 14px 0; border-bottom: 1px dashed #eee; align-items: flex-start; }
.qa-ayah:last-child { border-bottom: 0; }
.qa-ayah-num { display:inline-flex; align-items:center; justify-content:center; min-width: 34px; height: 34px; padding: 0 6px; color: #8a82b6; font-weight: 700; font-size: 13px; }
.qa-word { display:flex; flex-direction: column; align-items: center; padding: 4px 6px; border-radius: 8px; cursor: pointer; transition: background .15s ease; }
.qa-word:hover { background: rgba(0,0,0,.03); }
.qa-word .qa-ar { font-family: "Amiri", "Scheherazade New", "Noto Naskh Arabic", "Traditional Arabic", serif; font-size: 26px; line-height: 1.6; direction: rtl; color: var(--qa-text); }
.qa-word .qa-tr { font-size: 12px; color: var(--qa-muted); margin-top: 2px; }
.qa-word.qa-hl-yellow { background: rgba(244,200,74,.45); }
.qa-word.qa-hl-green  { background: rgba(95,184,138,.35); }
.qa-word.qa-hl-blue   { background: rgba(90,169,230,.35); }
.qa-word.qa-hl-red    { background: rgba(229,115,115,.35); }
.qa-word.qa-hl-purple { background: rgba(155,126,209,.35); }
.qa-word.is-selected { outline: 2px solid var(--qa-accent); }

.qa-notes-block { margin-top: 18px; background: var(--qa-card); border-radius: 12px; padding: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.qa-notes-title { font-size: 12px; letter-spacing: 1.2px; color: var(--qa-muted); font-weight: 700; margin-bottom: 8px; }
.qa-notes { width:100%; min-height: 90px; border:1px solid #e3e1ea; border-radius: 8px; padding: 10px; font-size: 14px; resize: vertical; background:#f7f6f2; color: var(--qa-text); }
.qa-notes-meta { display:flex; justify-content:space-between; align-items:center; margin-top: 8px; }
.qa-notes-status { font-size: 12px; color: var(--qa-muted); }
.qa-save-note { background: var(--qa-accent); color:#fff; border:0; border-radius: 20px; padding: 8px 16px; cursor:pointer; font-weight: 600; }
.qa-save-note:hover { filter: brightness(.95); }

.qa-login-warning { margin-top: 12px; background: #fff5e6; color:#7a4a00; border-radius:8px; padding: 10px 14px; font-size: 13px; }

@media (max-width: 600px) {
  .qa-root { padding: 10px; }
  .qa-toolbar { padding: 10px; }
  .qa-word .qa-ar { font-size: 22px; }
  .qa-word .qa-tr { font-size: 11px; }
  .qa-ayah { gap: 4px 8px; }
  .qa-surah-select { max-width: 100%; }
}
/* Audio buttons */
.qa-ayah-side { display:flex; flex-direction:column; align-items:center; gap:4px; }
.qa-play-ayah { background: var(--qa-accent); color:#fff; border:0; border-radius:50%; width:28px; height:28px; cursor:pointer; font-size:12px; line-height:1; padding:0; }
.qa-play-ayah:hover { filter: brightness(.95); }
.qa-play-word { background: transparent; border:0; cursor:pointer; font-size:13px; padding:2px 4px; margin-top:2px; opacity:.55; transition: opacity .15s ease; line-height:1; }
.qa-play-word:hover { opacity: 1; }
.qa-word { position: relative; }
.qa-ayah.is-selected-ayah { background: rgba(43,177,160,.06); border-radius: 8px; }

/* My Notes summary */
.qa-mynotes-root { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--qa-text); background: var(--qa-bg); padding: 16px; border-radius: 12px; }
.qa-mynotes-title { margin: 0 0 16px; font-size: 20px; color: var(--qa-text); }
.qa-mynotes-surah { background: var(--qa-card); border-radius: 12px; padding: 14px 18px; margin-bottom: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.qa-mynotes-surah-title { margin: 0 0 10px; font-size: 16px; color: var(--qa-accent); border-bottom: 1px solid #eee; padding-bottom: 6px; }
.qa-mynotes-item { padding: 8px 0; border-bottom: 1px dashed #eee; }
.qa-mynotes-item:last-child { border-bottom: 0; }
.qa-mynotes-ref { font-size: 12px; color: var(--qa-muted); font-weight: 600; letter-spacing: .5px; margin-bottom: 4px; }
.qa-mynotes-note { font-size: 14px; line-height: 1.5; white-space: pre-wrap; background:#f7f6f2; border-radius: 6px; padding: 8px 10px; }
.qa-empty { background: var(--qa-card); border-radius: 12px; padding: 30px; text-align: center; color: var(--qa-muted); }