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