.tafseer-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background:#0006;animation:.3s fadeIn;position:fixed;inset:0}.tafseer-panel{background:color-mix(in srgb, var(--theme-bg-elevated) 97%, var(--color-primary) 3%);z-index:1001;border-left:1px solid color-mix(in srgb, var(--color-primary) 15%, transparent);flex-direction:column;width:100%;max-width:520px;transition:transform .6s cubic-bezier(.16,1,.3,1);display:flex;position:fixed;top:0;bottom:0;right:0;transform:translate(100%);box-shadow:-8px 0 32px #00000026}.tafseer-panel.open{transform:translate(0)}.tafseer-header{padding:var(--space-4) var(--space-6);border-bottom:1px solid color-mix(in srgb, var(--color-primary) 10%, transparent);background:color-mix(in srgb, var(--theme-bg) 95%, var(--color-primary) 5%);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);justify-content:space-between;align-items:center;display:flex}.tafseer-header h2{font-family:var(--font-heading);font-size:var(--font-size-base);letter-spacing:.05em;text-transform:uppercase;color:var(--color-gold);margin:0;font-weight:700}.close-btn{cursor:pointer;color:var(--color-text-muted);padding:var(--spacing-sm);border-radius:var(--radius-full);background:0 0;border:none;justify-content:center;align-items:center;min-width:44px;min-height:44px;transition:background-color .2s,color .2s,transform .2s;display:flex}.close-btn:hover{background:var(--color-surface-hover);color:var(--color-text)}.tafseer-scroll-area{padding:var(--space-8) var(--space-10);scroll-behavior:smooth;flex:1;overflow-y:auto}.tafseer-controls{gap:var(--space-5);margin-bottom:var(--space-8);display:grid}.tafseer-control-block{gap:var(--space-3);display:grid}.tafseer-control-label{font-family:var(--font-heading);letter-spacing:.12em;text-transform:uppercase;color:var(--theme-text-muted);font-size:.78rem}.tafseer-chip-row{gap:var(--space-3);flex-wrap:wrap;display:flex}.tafseer-chip,.compare-toggle-btn{border:1px solid color-mix(in srgb, var(--color-primary) 14%, transparent);background:color-mix(in srgb, var(--theme-bg) 88%, var(--color-primary) 12%);color:var(--theme-text);border-radius:var(--radius-full);font-family:var(--font-sans);cursor:pointer;min-height:44px;padding:.55rem .9rem;font-size:.92rem;line-height:1;transition:background-color .2s,border-color .2s,color .2s,transform .2s,box-shadow .2s}.tafseer-chip:hover,.compare-toggle-btn:hover{border-color:color-mix(in srgb, var(--color-primary) 40%, transparent);transform:translateY(-1px)}.tafseer-chip.active,.compare-toggle-btn.active{background:linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 88%, black 12%), color-mix(in srgb, var(--color-primary-light) 72%, var(--color-primary) 28%));color:#fff;box-shadow:var(--shadow-glow-emerald);border-color:#0000}.close-btn:focus,.close-btn:focus-visible,.tafseer-chip:focus,.tafseer-chip:focus-visible,.compare-toggle-btn:focus,.compare-toggle-btn:focus-visible{outline-width:3px;outline-style:solid;outline-color:color-mix(in srgb, var(--color-primary) 72%, white 28%);outline-offset:3px}.tafseer-toolbar-row{justify-content:space-between;align-items:center;gap:var(--space-4);flex-wrap:wrap;display:flex}.tafseer-mode-hint{color:var(--theme-text-muted);font-size:.95rem}.tafseer-verse-context{margin-bottom:var(--space-10);padding:var(--space-6);background:color-mix(in srgb, var(--color-primary) 5%, transparent);border-radius:var(--radius-lg);border:1px solid color-mix(in srgb, var(--color-primary) 10%, transparent)}.tafseer-verse-context .verse-arabic{font-family:var(--font-arabic);color:var(--theme-text);margin-bottom:var(--space-4);text-align:right;direction:rtl;font-size:clamp(2rem,5vw,2.5rem);line-height:2.2}.tafseer-verse-context .verse-translation{font-family:var(--font-sans);font-size:var(--font-size-base);color:var(--theme-text-muted);opacity:.9;font-style:italic;line-height:1.6}.tafseer-divider{background:var(--color-border);height:1px;margin:var(--spacing-xl) 0}.tafseer-content{font-family:var(--font-sans);color:var(--theme-text);letter-spacing:.01em;font-size:1.15rem;line-height:1.8}.tafseer-content-grid{gap:var(--space-6);display:grid}.tafseer-content-grid.compare{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.tafseer-content-wrapper{min-width:0}.content-source-label{font-family:var(--font-heading);text-transform:uppercase;letter-spacing:.2em;color:color-mix(in srgb, var(--theme-text) 30%, transparent);margin-bottom:var(--space-4);border:1px solid color-mix(in srgb, var(--theme-text) 10%, transparent);border-radius:var(--radius-full);padding:2px 8px;font-size:.75rem;font-weight:800;display:inline-block}.tafseer-content p{margin-bottom:var(--space-6);opacity:.95}.tafseer-content b,.tafseer-content strong{color:var(--color-gold);font-weight:600}.tafseer-content h1,.tafseer-content h2,.tafseer-content h3{font-family:var(--font-heading);color:var(--color-gold);text-transform:uppercase;letter-spacing:.15em;margin-top:var(--space-10);margin-bottom:var(--space-4);border-bottom:1px solid color-mix(in srgb, var(--color-gold) 20%, transparent);padding-bottom:var(--space-2);width:auto;font-size:.9rem;display:inline-block}.tafseer-content .arabic{font-family:var(--font-arabic);text-align:right;margin:var(--space-8) 0;color:color-mix(in srgb, var(--theme-text) 90%, var(--color-primary-light) 10%);direction:rtl;font-size:clamp(1.8rem,4vw,2.2rem);line-height:2.4;display:block}.tafseer-loading{padding:var(--spacing-4xl) 0;color:var(--color-text-muted);justify-content:center;align-items:center;gap:var(--spacing-md);flex-direction:column;display:flex}.tafseer-loading .spinner{border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;width:32px;height:32px;animation:1s linear infinite spin}.tafseer-inline-note,.tafseer-error{padding:var(--space-4) var(--space-5);border-radius:var(--radius-lg);background:color-mix(in srgb, var(--theme-bg) 90%, var(--color-gold) 10%);border:1px solid color-mix(in srgb, var(--color-gold) 20%, transparent);color:var(--theme-text)}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media (width<=768px){.tafseer-panel{max-width:100%}.tafseer-scroll-area{padding:var(--space-6)}.tafseer-content-grid.compare{grid-template-columns:1fr}}