/* ==========================================================================
   Telkini v144 — واجهة قائمة Lesen بنفس تصميم الموقع المرجعي
   (العنوان، تبويبات Prüfungen/Teile/Sprach بمؤشر ملوّن متحرك، البطاقات وحركاتها، الشريط العلوي للأجزاء)
   كل القواعد محصورة داخل #lesen-view وشاشات الامتحان — لا تغيير على باقي الأقسام.
   ========================================================================== */

/* ---------- العنوان ---------- */
#lesen-view > div > h1 {
  font-family: 'Poppins', 'Inter', 'Cairo', sans-serif; font-weight: 700; letter-spacing: -0.025em; line-height: 1;
  color: #1e293b; font-size: 48px;
}
@media (min-width: 640px) { #lesen-view > div > h1 { font-size: 60px; } }
@media (min-width: 768px) { #lesen-view > div > h1 { font-size: 72px; } }
.dark #lesen-view > div > h1 { color: #f1f5f9; }

/* ---------- B1 / B2 ---------- */
#lesen-view .tk-level-pill { background: #f3f4f6; padding: 4px; border-radius: 16px; }
.dark #lesen-view .tk-level-pill { background: rgba(30,41,59,.9); }
#lesen-view .tk-level-pill button { border-radius: 12px; transition: background-color .3s, color .3s, box-shadow .3s; }
#lesen-view .tk-level-pill button.text-white { box-shadow: 0 4px 12px rgba(16,185,129,.25); }

/* ---------- تبويبات Prüfungen / Teile / Sprach ---------- */
#lesen-view .lesen-tabs-card.tk-tabs-slide {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.dark #lesen-view .lesen-tabs-card.tk-tabs-slide {
  background: rgba(255,255,255,.06); border-color: transparent; backdrop-filter: blur(24px);
  box-shadow: inset 1px 1px 4px rgba(255,255,255,.2), inset -1px -1px 6px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.15);
}
#lesen-view .tk-tabs-slide > div { position: relative; gap: 0 !important; }
#lesen-view .tk-tabs-slide .tk-tab-ind {
  position: absolute; top: 0; left: 0; z-index: 0; border-radius: 12px; pointer-events: none; will-change: transform, width;
  transition: transform .5s cubic-bezier(.34,1.32,.64,1), width .5s cubic-bezier(.34,1.32,.64,1), height .3s ease, background-color .35s ease, box-shadow .35s ease;
}
#lesen-view .tk-tabs-slide .category-tab {
  position: relative; z-index: 1; background: transparent !important; box-shadow: none !important; transform: none !important;
  color: rgba(0,0,0,.4) !important; font-family: 'Poppins', 'Inter', sans-serif; font-weight: 700 !important;
  padding: 12px 16px !important; border-radius: 12px; transition: color .3s ease !important;
}
#lesen-view .tk-tabs-slide .category-tab span { font-size: 15px; }
#lesen-view .tk-tabs-slide .category-tab:hover { color: rgba(0,0,0,.6) !important; }
#lesen-view .tk-tabs-slide .category-tab.tk-tab-on, #lesen-view .tk-tabs-slide .category-tab.tk-tab-on:hover { color: #fff !important; }
.dark #lesen-view .tk-tabs-slide .category-tab { color: rgba(255,255,255,.4) !important; }
.dark #lesen-view .tk-tabs-slide .category-tab:hover { color: rgba(255,255,255,.7) !important; }
.dark #lesen-view .tk-tabs-slide .category-tab.tk-tab-on { color: #fff !important; }
#lesen-view .tk-tabs-slide .category-tab svg, #lesen-view .tk-tabs-slide .category-tab i { color: inherit !important; transition: transform .3s ease; }
#lesen-view .tk-tabs-slide .category-tab.tk-tab-on svg { transform: scale(1.1); filter: drop-shadow(0 0 6px rgba(255,255,255,.5)); }

/* الجوال: شبكة 3 × 2 والأيقونة فوق الاسم (مثل المرجع) */
@media (max-width: 639px) {
  #lesen-view .lesen-tabs-card.tk-tabs-slide { overflow: visible; padding: 8px; }
  #lesen-view .tk-tabs-slide > div { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); min-width: 0 !important; gap: 6px !important; }
  #lesen-view .tk-tabs-slide .category-tab { flex-direction: column; gap: 2px !important; padding: 8px 4px !important; }
  #lesen-view .tk-tabs-slide .category-tab span { font-size: 10px; }
  #lesen-view .tk-tabs-slide .category-tab svg, #lesen-view .tk-tabs-slide .category-tab i { width: 20px !important; height: 20px !important; }
}

/* ---------- البطاقات ---------- */
#topics-grid { gap: 16px; }
#topics-grid .topic-card {
  border: 2px solid #e5e7eb !important; border-radius: 16px !important; padding: 20px !important; background: #fff;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1) !important;
  transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s cubic-bezier(.4,0,.2,1), border-color .3s cubic-bezier(.4,0,.2,1), opacity .3s !important;
}
#topics-grid .topic-card:hover {
  transform: scale(1.01); border-color: #6ee7b7 !important;
  box-shadow: 0 20px 25px -5px rgba(16,185,129,.1), 0 8px 10px -6px rgba(16,185,129,.1) !important;
}
#topics-grid .topic-card:active { transform: scale(.99); }
#topics-grid .topic-card h3 {
  font-family: 'Inter', 'Cairo', sans-serif; font-size: 16px !important; font-weight: 500 !important; color: #111827;
  text-transform: capitalize; transition: color .2s ease;
}
#topics-grid .topic-card:hover h3 { color: #10b981 !important; }
#topics-grid .topic-card .border-t { border-color: #f3f4f6 !important; padding-top: 12px; }
#topics-grid .topic-card .border-t > div:first-child > span:first-child:not(.pro-badge-gray) {
  font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 6px; letter-spacing: .025em;
  background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0;
}
.dark #topics-grid .topic-card { background: #111827; border-color: #1f2937 !important; }
.dark #topics-grid .topic-card:hover { border-color: #047857 !important; }
.dark #topics-grid .topic-card h3 { color: #f3f4f6; }
.dark #topics-grid .topic-card:hover h3 { color: #34d399 !important; }
.dark #topics-grid .topic-card .border-t { border-color: rgba(51,65,85,.6) !important; }
.dark #topics-grid .topic-card .border-t > div:first-child > span:first-child:not(.pro-badge-gray) { background: rgba(6,78,59,.3); color: #34d399; border-color: rgba(6,95,70,.5); }
/* عند المرور على بطاقة تخفت البقية قليلاً (مثل المرجع) */
#topics-grid:hover .topic-card:not(:hover) { opacity: .97; }

/* ---------- الشريط العلوي لأجزاء النص (Teil 1 … Sprach 2) ---------- */
.ex-header > [data-ex-pill], .tk-sec-vhead > [data-ex-pill] { background: #f1f5f9 !important; border: 1px solid #e2e8f0 !important; padding: 4px 8px !important; }
.dark .ex-header > [data-ex-pill], .dark .tk-sec-vhead > [data-ex-pill] { background: #0f172a !important; border-color: rgba(51,65,85,.6) !important; }
@media (min-width: 1280px) { .ex-header > [data-ex-pill] button, .tk-sec-vhead > [data-ex-pill] button { min-width: 112px; } }
.ex-header > [data-ex-pill] .ex-pill-thumb, .tk-sec-vhead > [data-ex-pill] .ex-pill-thumb { box-shadow: 0 2px 8px rgba(0,0,0,.14), 0 1px 3px rgba(0,0,0,.10); }
.dark .ex-header > [data-ex-pill] .ex-pill-thumb, .dark .tk-sec-vhead > [data-ex-pill] .ex-pill-thumb { background: #475569; box-shadow: 0 2px 8px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.25); }
.ex-header > [data-ex-pill] button > span:last-child, .tk-sec-vhead > [data-ex-pill] button > span:last-child { font-size: 13px; font-weight: 800; }
.ex-header > [data-ex-pill] button .ex-pill-kicker, .tk-sec-vhead > [data-ex-pill] button .ex-pill-kicker { font-weight: 400; letter-spacing: .1em; opacity: .4; }
.ex-header > [data-ex-pill] button.is-active .ex-pill-kicker, .tk-sec-vhead > [data-ex-pill] button.is-active .ex-pill-kicker { color: inherit; opacity: .4; }

@media (prefers-reduced-motion: reduce) {
  #lesen-view .tk-tabs-slide .tk-tab-ind, #topics-grid .topic-card { transition: none !important; }
  #topics-grid .topic-card:hover { transform: none; }
}