.sw-v2{cursor:pointer;transition:all .2s ease;border-bottom:2px solid transparent;border-radius:4px;padding:0 2px;display:inline-block}.sw-v2:hover{background:#ffffff1a}.ann-type-word{border-bottom-color:#1d4ed866}.ann-type-phrasal_verb{border-bottom-color:#0891b280}.ann-type-idiom{border-bottom-color:#7c3eed80}.ann-type-collocation{border-bottom-color:#065f4680}.ann-type-noun_phrase{border-bottom-color:#be185d80}.ann-type-grammar_structure{border-bottom-color:#b4530980}.ann-type-relative_clause{border-bottom-color:#4338ca80}.ann-type-verb_phrase{border-bottom-color:#0369a180}.ann-type-prepositional_phrase{border-bottom-color:#47556980}.sw-v2.ann-active{background:var(--cyan-glow, rgba(0, 212, 255, .2))!important;border-bottom-color:var(--cyan, #00d4ff)!important;box-shadow:0 0 10px #00d4ff1a}.ann-popup{position:absolute;z-index:10000;width:280px;background:#1a1d23;border:1px solid rgba(255,255,255,.1);border-radius:16px;box-shadow:0 10px 30px #00000080,0 0 0 1px #ffffff0d;overflow:hidden;color:#e2e8f0;font-family:Plus Jakarta Sans,sans-serif;pointer-events:auto}.ann-popup-header{padding:12px 16px;background:#ffffff08;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.05)}.ann-type-badge{font-size:.65rem;font-weight:800;padding:3px 10px;border-radius:99px;text-transform:uppercase;letter-spacing:.05em;color:#fff}.ann-popup-close{background:none;border:none;color:#94a3b8;cursor:pointer;font-size:14px;padding:4px;line-height:1;transition:color .2s}.ann-popup-close:hover{color:#fff}.ann-popup-body{padding:16px}.ann-surface{font-size:1.25rem;font-weight:700;color:#fff;margin-bottom:4px}.ann-meaning{font-size:1rem;font-weight:600;color:var(--cyan, #00d4ff);margin-bottom:12px}.ann-explanation{font-size:.85rem;line-height:1.5;color:#94a3b8;margin-bottom:16px}.ann-divider{height:1px;background:#ffffff0d;margin:12px 0}.ann-example-label{font-size:.7rem;font-weight:700;color:#64748b;text-transform:uppercase;margin-bottom:6px}.ann-example-en{font-size:.9rem;font-style:italic;color:#cbd5e1;margin-bottom:4px;line-height:1.4}.ann-example-tr{font-size:.85rem;color:#64748b;line-height:1.4}.ann-individual-label{font-size:.7rem;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}.ann-individuals{display:flex;flex-direction:column;gap:5px;margin-bottom:4px}.ann-ind-row{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}.ann-ind-word{font-weight:700;color:#e2e8f0;font-size:.88rem;font-style:italic;min-width:0}.ann-ind-sep{color:#475569;font-size:.8rem;flex-shrink:0}.ann-ind-meaning{color:#94a3b8;font-size:.85rem}.ann-ind-note{color:#475569;font-size:.75rem;width:100%;line-height:1.3;padding-left:2px}.animate-pop{animation:annPopIn .2s cubic-bezier(.175,.885,.32,1.275)}@keyframes annPopIn{0%{opacity:0;transform:scale(.9) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}.story-text{line-height:1.85;font-size:1.15rem}.story-text p{margin-bottom:1.25rem}

/* ═══════════════════════════════════════════════════════════
   READING WORKSHOP — UI COMPONENTS
   ═══════════════════════════════════════════════════════════ */

.reading-workshop-container{width:100%;display:block;font-family:Plus Jakarta Sans,sans-serif;padding-bottom:40px}

/* ── Collapsible header ──────────────────────────────────── */
.reading-header{background:var(--bg-card,#131929);border-bottom:1px solid rgba(255,255,255,.07);position:sticky;top:0;z-index:50;transition:all .3s ease}

.rh-handle{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;cursor:pointer;user-select:none;gap:10px}
.rh-handle:hover{background:rgba(255,255,255,.03)}
.rh-handle-left{display:flex;align-items:center;gap:10px}
.rh-handle-icon{font-size:1.1rem;filter:drop-shadow(0 0 6px rgba(var(--a1-rgb),.4))}
.rh-handle-label{font-size:.85rem;font-weight:700;color:var(--text-2,#94a3b8);letter-spacing:.02em}
.rh-handle-chevron{font-size:.75rem;color:var(--text-3,#64748b);transition:transform .3s ease}
.reading-header.rh-collapsed .rh-handle-chevron{transform:rotate(-90deg)}

.rh-body{overflow:hidden;transition:max-height .35s cubic-bezier(.4,0,.2,1),opacity .25s ease;max-height:400px;opacity:1}
.reading-header.rh-collapsed .rh-body{max-height:0;opacity:0;pointer-events:none}

.rh-body-inner{padding:16px 20px 20px}
.rh-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px;flex-wrap:wrap}

.rh-left{display:flex;align-items:center;gap:14px}
.rh-left-icon{font-size:2rem;filter:drop-shadow(0 0 10px rgba(var(--a1-rgb),.35))}
.rh-left-text h1{font-size:1.15rem;font-weight:800;color:var(--text-1,#f1f5f9);margin:0 0 3px;letter-spacing:-.02em}
.rh-left-text p{font-size:.8rem;color:var(--text-3,#64748b);margin:0;line-height:1.4}

.rh-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* ── Mode toggle (Okuma / Egzersiz) ──────────────────────── */
.reading-mode-toggle{display:flex;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:3px;gap:2px}
.rm-btn{padding:7px 14px;border-radius:9px;border:none;background:transparent;color:var(--text-3,#64748b);font-size:.8rem;font-weight:700;cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1);white-space:nowrap;font-family:inherit}
.rm-btn:hover{color:var(--text-1,#f1f5f9);background:rgba(255,255,255,.06)}
.rm-btn.active{background:rgba(var(--a1-rgb),.15);color:var(--cyan,#00d4ff);box-shadow:0 0 12px rgba(var(--a1-rgb),.15),inset 0 1px rgba(var(--a1-rgb),.1)}

/* ── Level + shuffle tabs ─────────────────────────────────── */
.rh-bottom{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.level-tabs{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.level-tab{padding:6px 14px;border-radius:99px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);color:var(--text-3,#64748b);font-size:.78rem;font-weight:700;cursor:pointer;transition:all .2s ease;font-family:inherit}
.level-tab:hover{background:rgba(255,255,255,.1);color:var(--text-2,#94a3b8);border-color:rgba(255,255,255,.2)}
.level-tab.active{background:rgba(var(--a1-rgb),.15);color:var(--cyan,#00d4ff);border-color:rgba(var(--a1-rgb),.35);box-shadow:0 0 10px rgba(var(--a1-rgb),.15)}
.shuffle-tab{padding:6px 14px;border-radius:99px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:var(--text-3,#64748b);font-size:.78rem;font-weight:700;cursor:pointer;transition:all .2s ease;font-family:inherit;margin-left:4px}
.shuffle-tab:hover{background:rgba(var(--a2-rgb),.12);color:var(--violet,#7c3aed);border-color:rgba(var(--a2-rgb),.3)}
.shuffle-tab.active{background:rgba(var(--a2-rgb),.15);color:var(--violet-light,#a78bfa);border-color:rgba(var(--a2-rgb),.35)}

/* ── Story content area ───────────────────────────────────── */
.story-wrapper{padding:24px 20px;max-width:900px;width:100%;margin:0 auto;box-sizing:border-box}

/* ── btn-play-audio ───────────────────────────────────────── */
.btn-play-audio{display:flex;align-items:center;gap:6px;padding:8px 16px;font-size:.82rem;white-space:nowrap}
.audio-icon{font-size:.95rem}

/* ── Story done badge ─────────────────────────────────────── */
.story-done-badge{font-size:.72rem;animation:storyDonePop .35s cubic-bezier(.175,.885,.32,1.275) both}
@keyframes storyDonePop{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}

@media(max-width:768px){
.ann-popup{position:fixed!important;left:50%!important;transform:translateX(-50%)!important;top:auto!important;bottom:12px!important;right:auto!important;width:calc(100vw - 28px)!important;max-width:420px;border-radius:16px;z-index:99999;max-height:52vh;overflow-y:auto}
.ann-popup-header{padding:9px 14px}
.ann-popup-body{padding:12px 14px}
.ann-surface{font-size:1.05rem;margin-bottom:3px}
.ann-meaning{font-size:0.88rem;margin-bottom:8px}
.ann-explanation{font-size:0.78rem;line-height:1.45;margin-bottom:10px}
.ann-divider{margin:8px 0}
.ann-example-label{font-size:0.65rem;margin-bottom:4px}
.ann-example-en{font-size:0.8rem;margin-bottom:3px}
.ann-example-tr{font-size:0.76rem}
.ann-individual-label{font-size:0.65rem;margin-bottom:5px}
.ann-individuals{gap:4px}
.ann-ind-word{font-size:0.8rem}
.ann-ind-meaning{font-size:0.76rem}
.ann-ind-note{font-size:0.7rem}
.ann-type-badge{font-size:0.6rem;padding:2px 8px}

/* Reading workshop mobile */
.rh-body-inner{padding:12px 14px 16px}
.rh-top{margin-bottom:12px}
.rh-left-icon{font-size:1.5rem}
.rh-left-text h1{font-size:.95rem}
.rh-left-text p{font-size:.72rem}
.rh-right{gap:7px}
.rm-btn{padding:6px 10px;font-size:.73rem}
.level-tab,.shuffle-tab{padding:5px 11px;font-size:.72rem}
.story-wrapper{padding:18px 16px 20px}
.story-text{font-size:1rem;line-height:1.85}
.story-title{font-size:1.1rem}
.btn-play-audio{padding:7px 13px;font-size:.78rem}
.reading-workshop-container{padding-bottom:24px}
}

/* ═══════════════════════════════════════════════════════════
   CEFR BADGE in level tabs
   ═══════════════════════════════════════════════════════════ */
.cefr-badge {
  font-size: .65rem;
  font-weight: 700;
  opacity: .65;
  margin-left: 4px;
  letter-spacing: .02em;
}
.level-tab.active .cefr-badge { opacity: 1; }

/* ═══════════════════════════════════════════════════════════
   READING QUIZ — comprehension question button & modal
   ═══════════════════════════════════════════════════════════ */

/* Start button below story */
.rq-start-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px auto 0;
  padding: 10px 22px;
  background: linear-gradient(135deg, rgba(124,58,237,.15), rgba(0,212,255,.1));
  border: 1px solid rgba(124,58,237,.35);
  border-radius: 99px;
  color: #c4b5fd;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
}
.rq-start-btn:hover:not(:disabled) {
  background: rgba(124,58,237,.25);
  border-color: rgba(124,58,237,.6);
  color: #e9d5ff;
  transform: translateY(-1px);
}
.rq-start-btn:disabled { opacity: .6; cursor: default; }
.rq-badge {
  background: rgba(0,212,255,.15);
  border: 1px solid rgba(0,212,255,.3);
  border-radius: 99px;
  padding: 2px 8px;
  font-size: .72rem;
  color: var(--cyan, #00d4ff);
}

/* Overlay */
.rq-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(4px);
}

/* Modal */
.rq-modal {
  background: #13192a;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  width: 100%;
  max-width: 480px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  animation: rqIn .25s cubic-bezier(.175,.885,.32,1.275);
}
@keyframes rqIn {
  from { opacity: 0; transform: scale(.92) translateY(20px); }
  to   { opacity: 1; transform: scale(1)  translateY(0); }
}

.rq-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.rq-title { font-size: .9rem; font-weight: 800; color: #e2e8f0; }
.rq-progress { font-size: .75rem; color: #64748b; font-weight: 600; }
.rq-close {
  background: none; border: none; color: #64748b;
  cursor: pointer; font-size: 14px; padding: 4px;
  transition: color .15s;
}
.rq-close:hover { color: #e2e8f0; }

.rq-progress-bar {
  height: 3px;
  background: rgba(255,255,255,.07);
}
.rq-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--violet,#7c3aed), var(--cyan,#00d4ff));
  transition: width .4s ease;
}

.rq-story-title {
  font-size: .72rem;
  color: #64748b;
  font-weight: 600;
  padding: 12px 20px 0;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.rq-question {
  font-size: 1rem;
  font-weight: 700;
  color: #e2e8f0;
  padding: 10px 20px 16px;
  line-height: 1.5;
}
.rq-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 20px 20px;
}
.rq-opt {
  text-align: left;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 12px 16px;
  color: #cbd5e1;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
  line-height: 1.4;
}
.rq-opt:hover:not(:disabled) {
  background: rgba(124,58,237,.15);
  border-color: rgba(124,58,237,.4);
  color: #e2e8f0;
}
.rq-opt.rq-correct {
  background: rgba(16,185,129,.15);
  border-color: #10b981;
  color: #6ee7b7;
}
.rq-opt.rq-wrong {
  background: rgba(244,63,94,.1);
  border-color: #f43f5e;
  color: #fda4af;
}

.rq-feedback {
  margin: 0 20px 16px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: .85rem;
  font-weight: 600;
}
.rq-fb-correct { background: rgba(16,185,129,.1); color: #6ee7b7; border: 1px solid rgba(16,185,129,.2); }
.rq-fb-wrong   { background: rgba(244,63,94,.08); color: #fda4af; border: 1px solid rgba(244,63,94,.2); }

/* Result screen */
.rq-result {
  padding: 32px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.rq-result-emoji  { font-size: 3rem; }
.rq-result-score  { font-size: 1.5rem; font-weight: 800; color: #e2e8f0; }
.rq-result-pct    { font-size: 1rem; color: #94a3b8; }
.rq-result-xp     { font-size: 1.1rem; font-weight: 700; color: var(--cyan,#00d4ff); }

@media (max-width: 480px) {
  .rq-modal { border-radius: 16px; }
  .rq-question { font-size: .9rem; }
  .rq-opt { font-size: .82rem; padding: 10px 14px; }
}