/* ═══════════════════════════════════════════════════
           Surah Al-Kawthar — Premium Visual Design v1.0.8
           ═══════════════════════════════════════════════════ */

        .app-root {
          min-height: 100vh;
          background: #f0f4f8;
          font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
          color: #0f172a;
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 0 0 4rem 0;
        }

        /* ── Hero Header ── */
        .app-header {
          width: 100%;
          text-align: center;
          padding: 3rem 1.5rem 2.5rem;
          background: linear-gradient(135deg, #0f172a 0%, #1e293b 40%, #0f2847 100%);
          color: #ffffff;
          position: relative;
          margin-bottom: 2.5rem;
          overflow: hidden;
        }

        .app-header::before {
          content: '';
          position: absolute;
          inset: 0;
          background: radial-gradient(ellipse at 30% 20%, rgba(59, 130, 246, 0.15) 0%, transparent 60%),
                      radial-gradient(ellipse at 70% 80%, rgba(139, 92, 246, 0.12) 0%, transparent 50%);
          pointer-events: none;
        }

        .app-header::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          height: 6px;
          background: linear-gradient(90deg, #3b82f6, #8b5cf6, #06b6d4, #3b82f6);
          background-size: 300% 100%;
          animation: shimmer 4s ease infinite;
        }

        @keyframes shimmer {
          0%, 100% { background-position: 0% 50%; }
          50% { background-position: 100% 50%; }
        }

        .badge-pill {
          display: inline-flex;
          align-items: center;
          gap: 0.5rem;
          background: rgba(59, 130, 246, 0.15);
          color: #93c5fd;
          border: 1px solid rgba(59, 130, 246, 0.3);
          padding: 0.4rem 1rem;
          border-radius: 9999px;
          font-size: 0.78rem;
          font-weight: 700;
          letter-spacing: 0.08em;
          text-transform: uppercase;
          margin-bottom: 1rem;
          backdrop-filter: blur(4px);
        }

        .back-nav-link {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          color: #94a3b8;
          text-decoration: none;
          font-size: 0.82rem;
          font-weight: 600;
          margin-bottom: 1.25rem;
          transition: color 0.2s ease;
          position: relative;
          z-index: 1;
        }
        .back-nav-link:hover { color: #60a5fa; }

        .surah-title-row {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 1.5rem;
          flex-wrap: wrap;
          margin-bottom: 0.75rem;
          position: relative;
          z-index: 1;
        }

        h1.surah-title {
          font-size: 2.6rem;
          font-weight: 800;
          color: #ffffff;
          letter-spacing: -0.03em;
        }

        .surah-title-ar {
          font-family: 'Amiri Quran', 'Amiri', serif;
          font-size: 3.2rem;
          color: #60a5fa;
          direction: rtl;
          text-shadow: 0 0 40px rgba(96, 165, 250, 0.3);
        }

        p.surah-subtitle {
          color: #94a3b8;
          font-size: 1rem;
          max-width: 640px;
          margin: 0 auto;
          line-height: 1.6;
          position: relative;
          z-index: 1;
        }

        /* ── Stats Bar ── */
        .stats-row {
          display: flex;
          justify-content: center;
          gap: 2rem;
          margin-top: 1.5rem;
          position: relative;
          z-index: 1;
        }

        .stat-chip {
          display: flex;
          align-items: center;
          gap: 0.4rem;
          background: rgba(255, 255, 255, 0.06);
          border: 1px solid rgba(255, 255, 255, 0.1);
          padding: 0.4rem 0.85rem;
          border-radius: 8px;
          backdrop-filter: blur(4px);
        }

        .stat-chip-num {
          font-family: 'JetBrains Mono', monospace;
          font-weight: 700;
          font-size: 0.95rem;
          color: #60a5fa;
        }

        .stat-chip-label {
          font-size: 0.75rem;
          color: #94a3b8;
          font-weight: 500;
        }

        /* ── Controls Bar ── */
        .controls-wrapper {
          width: 100%;
          max-width: 1080px;
          background: #ffffff;
          border: 1px solid #e2e8f0;
          border-radius: 16px;
          padding: 1rem 1.5rem;
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex-wrap: wrap;
          gap: 0.75rem;
          box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 6px 16px -4px rgba(0,0,0,0.06);
          margin: -1.25rem auto 2rem auto;
          position: relative;
          z-index: 10;
        }

        .control-group {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          flex-wrap: wrap;
        }

        .control-label {
          font-size: 0.75rem;
          font-weight: 700;
          color: #475569;
          text-transform: uppercase;
          letter-spacing: 0.06em;
          margin-right: 0.25rem;
        }

        .segmented-group {
          display: flex;
          background: #f1f5f9;
          padding: 3px;
          border-radius: 10px;
          gap: 2px;
          border: 1px solid #e2e8f0;
        }

        .seg-btn {
          border: none;
          background: transparent;
          padding: 0.5rem 0.9rem;
          font-size: 0.78rem;
          font-weight: 600;
          color: #64748b;
          border-radius: 8px;
          cursor: pointer;
          transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .seg-btn:hover { color: #1e293b; background: rgba(255,255,255,0.5); }
        .seg-btn.active {
          background: #ffffff;
          color: #2563eb;
          box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
        }

        .toggle-btn {
          border: 1px solid #e2e8f0;
          background: #ffffff;
          padding: 0.5rem 0.9rem;
          font-size: 0.78rem;
          font-weight: 600;
          color: #475569;
          border-radius: 10px;
          cursor: pointer;
          display: inline-flex;
          align-items: center;
          gap: 0.4rem;
          transition: all 0.2s ease;
        }
        .toggle-btn:hover { background: #f8fafc; border-color: #94a3b8; }
        .toggle-btn.is-active {
          background: #eff6ff;
          border-color: #93c5fd;
          color: #1d4ed8;
          box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.08);
        }

        /* ── Verse Cards ── */
        .verses-canvas {
          width: 100%;
          max-width: 1080px;
          padding: 0 1.5rem;
          display: flex;
          flex-direction: column;
          gap: 1.5rem;
          margin-bottom: 2.5rem;
        }

        
        .verse-box.is-playing {
          border-color: #3b82f6 !important;
          box-shadow: 0 0 25px rgba(59, 130, 246, 0.25) !important;
          background: #f8fbff !important;
        }

        .verse-box {
          background: #ffffff;
          border: 1px solid #e2e8f0;
          border-radius: 20px;
          padding: 2rem 2.25rem;
          box-shadow: 0 1px 3px rgba(0,0,0,0.02), 0 8px 24px -8px rgba(0,0,0,0.06);
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          position: relative;
        }

        .verse-box:hover {
          box-shadow: 0 1px 3px rgba(0,0,0,0.03), 0 12px 32px -8px rgba(0,0,0,0.1);
          border-color: #cbd5e1;
        }

        .verse-box::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 3px;
          border-radius: 20px 20px 0 0;
          background: linear-gradient(90deg, #3b82f6, #8b5cf6);
          opacity: 0;
          transition: opacity 0.3s ease;
        }

        .verse-box:hover::before { opacity: 1; }

        .verse-meta-row {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 1.5rem;
        }

        .ayah-pill {
          font-size: 0.72rem;
          font-weight: 700;
          padding: 0.3rem 0.75rem;
          background: linear-gradient(135deg, #eff6ff, #e0e7ff);
          color: #3b82f6;
          border-radius: 8px;
          border: 1px solid #c7d2fe;
          font-family: 'JetBrains Mono', monospace;
          letter-spacing: 0.04em;
        }

        .instruction-hint {
          font-size: 0.72rem;
          color: #94a3b8;
          display: flex;
          align-items: center;
          gap: 4px;
        }

        .instruction-hint::before {
          content: '👆';
          font-size: 0.8rem;
        }

        /* ── Arabic Sentence ── */
        .sentence {
          direction: rtl;
          unicode-bidi: embed;
          font-family: 'Amiri Quran', 'Amiri', serif;
          font-size: 3.4rem;
          line-height: 2.2;
          text-align: center;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          justify-content: center;
          gap: 1.25rem 2rem;
          padding: 1rem 0;
        }

        /* ── Word Cluster & Joined Compounds ── */
        .word-cluster {
          display: inline-flex;
          align-items: baseline;
          position: relative;
        }

        .word-cluster.compound-word {
          border-radius: 14px;
          transition: all 0.2s ease;
          background: rgba(241, 245, 249, 0.45);
          border: 1px dashed rgba(148, 163, 184, 0.4);
          padding: 2px;
          gap: 0;
        }

        .word-cluster.compound-word:hover {
          background: rgba(239, 246, 255, 0.7);
          border-color: rgba(59, 130, 246, 0.5);
        }

        /* Prefix (e.g. Fa in Fa-salli): in RTL, appears on the right */
        .gram-word.joined-prefix {
          padding-inline-start: 0.5rem;
          padding-inline-end: 0;
          margin-inline-end: 0;
          border-start-end-radius: 0;
          border-end-end-radius: 0;
        }

        /* Stem (e.g. Salli in Fa-salli): in RTL, appears on the left */
        .gram-word.joined-stem {
          padding-inline-start: 0;
          padding-inline-end: 0.6rem;
          margin-inline-start: 0;
          border-start-start-radius: 0;
          border-end-start-radius: 0;
        }

        
        /* ── Remove internal outline border when clicking FA before SALI ── */
        .gram-word.joined-prefix.is-selected,
        .gram-word.joined-stem.is-selected {
          outline: none !important;
          box-shadow: none !important;
        }

        .gram-word.joined-prefix.is-selected {
          background: rgba(59, 130, 246, 0.16);
          border-top: 2.5px solid #3b82f6;
          border-bottom: 2.5px solid #3b82f6;
          border-inline-start: 2.5px solid #3b82f6;
          border-inline-end: none !important;
          border-left: none !important;
          border-start-end-radius: 0 !important;
          border-end-end-radius: 0 !important;
        }

        .gram-word.joined-stem.is-selected {
          background: rgba(59, 130, 246, 0.16);
          border-top: 2.5px solid #3b82f6;
          border-bottom: 2.5px solid #3b82f6;
          border-inline-end: 2.5px solid #3b82f6;
          border-inline-start: none !important;
          border-right: none !important;
          border-start-start-radius: 0 !important;
          border-end-start-radius: 0 !important;
        }

        /* ── Color Dimension Explainer Guide & Legends ── */
        .color-dimension-guide-wrapper {
          width: 100%;
          max-width: 1080px;
          margin: 0 auto 1.75rem auto;
          padding: 0 1.5rem;
        }

        .color-guide-card {
          background: #ffffff;
          border: 1px solid #e2e8f0;
          border-radius: 16px;
          padding: 1.25rem 1.5rem;
          box-shadow: 0 2px 10px -2px rgba(0,0,0,0.04);
        }

        .color-guide-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex-wrap: wrap;
          gap: 0.5rem;
          margin-bottom: 0.65rem;
        }

        .color-guide-title {
          font-size: 0.92rem;
          font-weight: 800;
          color: #0f172a;
          display: flex;
          align-items: center;
          gap: 0.45rem;
        }

        .color-guide-active-tag {
          font-size: 0.72rem;
          font-weight: 700;
          background: #eff6ff;
          color: #1d4ed8;
          border: 1px solid #bfdbfe;
          padding: 0.2rem 0.6rem;
          border-radius: 6px;
        }

        .color-guide-benefit {
          font-size: 0.86rem;
          color: #475569;
          line-height: 1.6;
          margin: 0 0 1rem 0;
          background: #f8fafc;
          padding: 0.75rem 1rem;
          border-radius: 10px;
          border-left: 3px solid #3b82f6;
        }

        .legend-chips-row {
          display: flex;
          flex-wrap: wrap;
          gap: 0.6rem;
        }

        .legend-chip {
          display: inline-flex;
          align-items: center;
          gap: 0.45rem;
          background: #ffffff;
          border: 1px solid #e2e8f0;
          padding: 0.35rem 0.75rem;
          border-radius: 8px;
          font-size: 0.76rem;
          transition: all 0.15s ease;
        }

        .legend-chip:hover {
          border-color: #cbd5e1;
          background: #f8fafc;
        }

        .legend-color-dot {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          display: inline-block;
          flex-shrink: 0;
        }

        .legend-chip-title {
          font-weight: 700;
          color: #1e293b;
        }

        .legend-chip-desc {
          color: #64748b;
        }

        /* ── Single Continuous Mushaf Flow ── */
        .mushaf-card {
          width: 100%;
          background: #ffffff;
          border: 1px solid #e2e8f0;
          border-radius: 24px;
          padding: 2rem 2.25rem;
          box-shadow: 0 4px 20px -4px rgba(0,0,0,0.04);
          transition: all 0.3s ease;
        }

        .mushaf-card-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex-wrap: wrap;
          gap: 1rem;
          padding-bottom: 1.25rem;
          border-bottom: 1px solid #f1f5f9;
          margin-bottom: 1.5rem;
        }

        .mushaf-header-left {
          display: flex;
          align-items: center;
          gap: 0.85rem;
        }

        .surah-mushaf-title {
          font-family: 'Amiri Quran', 'Amiri', serif;
          font-size: 1.7rem;
          color: #1e3a8a;
          direction: rtl;
        }

        .surah-mushaf-badge {
          font-family: 'JetBrains Mono', monospace;
          font-size: 0.72rem;
          font-weight: 700;
          background: #eff6ff;
          color: #2563eb;
          padding: 0.25rem 0.65rem;
          border-radius: 6px;
          border: 1px solid #dbeafe;
        }

        .mushaf-header-actions {
          display: flex;
          align-items: center;
          gap: 0.5rem;
        }

        .mushaf-audio-btn {
          background: #eff6ff;
          color: #1d4ed8;
          border: 1px solid #bfdbfe;
          border-radius: 8px;
          padding: 0.4rem 0.85rem;
          font-size: 0.78rem;
          font-weight: 700;
          cursor: pointer;
          display: inline-flex;
          align-items: center;
          gap: 0.4rem;
          transition: all 0.2s ease;
        }
        .mushaf-audio-btn:hover {
          background: #dbeafe;
        }
        .mushaf-audio-btn.is-active {
          background: #2563eb;
          color: #ffffff;
          border-color: #1d4ed8;
        }

        .mushaf-copy-btn {
          background: #f8fafc;
          color: #475569;
          border: 1px solid #e2e8f0;
          border-radius: 8px;
          padding: 0.4rem 0.8rem;
          font-size: 0.78rem;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.2s ease;
        }
        .mushaf-copy-btn:hover {
          background: #f1f5f9;
        }

        /* ── Inline Grammar Reveal Card (Pushes Quranic Arabic Down) ── */
        .inline-grammar-reveal-card {
          margin-bottom: 2rem;
          background: linear-gradient(135deg, #f8fbff 0%, #ffffff 100%);
          border: 2px solid #93c5fd;
          border-radius: 18px;
          padding: 1.5rem 1.75rem;
          box-shadow: 0 8px 24px -4px rgba(37, 99, 235, 0.12);
          animation: revealSlideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        @keyframes revealSlideDown {
          from { opacity: 0; transform: translateY(-12px) scale(0.98); }
          to { opacity: 1; transform: translateY(0) scale(1); }
        }

        .reveal-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex-wrap: wrap;
          gap: 1rem;
          padding-bottom: 1rem;
          border-bottom: 1px solid #dbeafe;
          margin-bottom: 1.25rem;
        }

        .reveal-word-badge {
          display: flex;
          align-items: center;
          gap: 1rem;
        }

        .reveal-ar-text {
          font-family: 'Amiri Quran', 'Amiri', serif;
          font-size: 2.5rem;
          color: #1d4ed8;
          line-height: 1;
          background: #eff6ff;
          padding: 0.25rem 0.85rem;
          border-radius: 12px;
          border: 1.5px solid #bfdbfe;
          direction: rtl;
        }

        .reveal-meta {
          display: flex;
          flex-direction: column;
          gap: 0.25rem;
        }

        .reveal-lemma {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          font-size: 1.05rem;
          color: #0f172a;
        }

        .reveal-role-tag {
          font-size: 0.72rem;
          font-weight: 700;
          background: #f1f5f9;
          color: #475569;
          padding: 0.15rem 0.5rem;
          border-radius: 6px;
        }

        .reveal-location-tag {
          font-family: 'JetBrains Mono', monospace;
          font-size: 0.72rem;
          font-weight: 700;
          color: #3b82f6;
        }

        .reveal-header-right {
          display: flex;
          align-items: center;
          gap: 0.6rem;
        }

        .reveal-deep-btn {
          background: #eff6ff;
          border: 1px solid #bfdbfe;
          color: #1d4ed8;
          font-size: 0.78rem;
          font-weight: 700;
          padding: 0.45rem 0.9rem;
          border-radius: 8px;
          cursor: pointer;
          transition: all 0.2s ease;
        }
        .reveal-deep-btn:hover {
          background: #dbeafe;
        }

        .close-reveal-btn {
          background: #f1f5f9;
          border: 1px solid #e2e8f0;
          color: #64748b;
          font-size: 0.85rem;
          font-weight: 700;
          width: 32px;
          height: 32px;
          border-radius: 8px;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.2s ease;
        }
        .close-reveal-btn:hover {
          background: #e2e8f0;
          color: #0f172a;
        }

        /* Beneficial Meaning Card (Plain English, NO Jargon) */
        .beneficial-meaning-card {
          background: #f0fdf4;
          border: 1px solid #bbf7d0;
          border-left: 4px solid #16a34a;
          border-radius: 12px;
          padding: 1.1rem 1.35rem;
          margin-bottom: 1.1rem;
        }

        .meaning-header {
          font-size: 0.82rem;
          font-weight: 800;
          color: #15803d;
          text-transform: uppercase;
          letter-spacing: 0.05em;
          display: flex;
          align-items: center;
          gap: 0.4rem;
          margin-bottom: 0.45rem;
        }

        .meaning-text {
          font-size: 1.02rem;
          line-height: 1.7;
          color: #14532d;
          margin: 0;
          font-weight: 500;
        }

        .reveal-quick-facts {
          display: flex;
          flex-wrap: wrap;
          gap: 0.65rem;
        }

        .reveal-chip {
          background: #ffffff;
          border: 1px solid #e2e8f0;
          padding: 0.4rem 0.85rem;
          border-radius: 8px;
          font-size: 0.78rem;
          display: flex;
          align-items: center;
          gap: 0.4rem;
          box-shadow: 0 1px 2px rgba(0,0,0,0.02);
        }

        .reveal-chip .chip-label {
          color: #64748b;
          font-weight: 600;
        }

        .reveal-chip .chip-val {
          color: #0f172a;
          font-weight: 700;
        }

        .reveal-chip .chip-val.ar-font {
          font-family: 'Amiri', serif;
          font-size: 1.1rem;
          color: #2563eb;
        }

        /* ── Continuous Mushaf Paragraph (Flowing Naturally) ── */
        .mushaf-paragraph {
          direction: rtl;
          unicode-bidi: embed;
          font-family: 'Amiri Quran', 'Amiri', serif;
          font-size: 3.5rem;
          line-height: 2.3;
          text-align: center;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          justify-content: center;
          gap: 1.25rem 1.8rem;
          padding: 1.5rem 0.5rem;
          margin-bottom: 2rem;
          border-bottom: 1px solid #f1f5f9;
        }

        .ayah-end-medallion {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          position: relative;
          cursor: pointer;
          font-family: 'Amiri Quran', 'Amiri', serif;
          font-size: 3rem;
          color: #d97706;
          margin: 0 0.5rem;
          line-height: 1;
          user-select: none;
          transition: transform 0.2s ease, color 0.2s ease;
        }

        .ayah-end-medallion:hover {
          transform: scale(1.15);
          color: #2563eb;
        }

        .ayah-end-medallion.is-playing {
          color: #2563eb;
          animation: pulseAyah 1.5s infinite;
        }

        @keyframes pulseAyah {
          0%, 100% { transform: scale(1); }
          50% { transform: scale(1.18); }
        }

        .medallion-symbol {
          line-height: 1;
        }

        .medallion-num {
          position: absolute;
          top: 52%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-family: 'Amiri', serif;
          font-size: 1.15rem;
          font-weight: 700;
          color: #92400e;
          pointer-events: none;
        }

        .ayah-end-medallion:hover .medallion-num {
          color: #1e40af;
        }

        /* ── Translations Below Continuous Flow ── */
        .mushaf-translations-container {
          background: #f8fafc;
          border: 1px solid #e2e8f0;
          border-radius: 16px;
          padding: 1.25rem 1.5rem;
        }

        .trans-header {
          font-size: 0.85rem;
          font-weight: 800;
          color: #334155;
          margin-bottom: 0.85rem;
          display: flex;
          align-items: center;
          gap: 0.4rem;
        }

        .translations-list {
          display: flex;
          flex-direction: column;
          gap: 0.75rem;
        }

        .trans-line-item {
          display: flex;
          align-items: baseline;
          gap: 0.75rem;
          padding: 0.65rem 0.85rem;
          border-radius: 10px;
          transition: all 0.2s ease;
        }

        .trans-line-item.is-highlighted-verse {
          background: #eff6ff;
          border-left: 3px solid #3b82f6;
        }

        .trans-badge {
          font-family: 'JetBrains Mono', monospace;
          font-size: 0.72rem;
          font-weight: 700;
          background: #e2e8f0;
          color: #475569;
          padding: 0.2rem 0.5rem;
          border-radius: 4px;
          white-space: nowrap;
        }

        .trans-line-item.is-highlighted-verse .trans-badge {
          background: #3b82f6;
          color: #ffffff;
        }

        .trans-quote {
          margin: 0;
          font-size: 0.98rem;
          color: #334155;
          line-height: 1.6;
        }


        /* ── Instant Inline Inspector (Zero Scrolling Required!) ── */
        .instant-inline-inspector {
          margin: 1.25rem 0 1rem 0;
          background: linear-gradient(135deg, #f8fbff 0%, #ffffff 100%);
          border: 2px solid #bfdbfe;
          border-radius: 18px;
          padding: 1.4rem 1.6rem;
          box-shadow: 0 4px 20px -4px rgba(37, 99, 235, 0.12);
          animation: instantCardSlide 0.28s cubic-bezier(0.16, 1, 0.3, 1);
          text-align: left;
        }

        @keyframes instantCardSlide {
          from { opacity: 0; transform: translateY(-8px) scale(0.99); }
          to { opacity: 1; transform: translateY(0) scale(1); }
        }

        .instant-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex-wrap: wrap;
          gap: 0.75rem;
          padding-bottom: 0.9rem;
          border-bottom: 1px solid #e2e8f0;
          margin-bottom: 1.1rem;
        }

        .instant-word-badge {
          display: flex;
          align-items: center;
          gap: 0.85rem;
        }

        .instant-ar-text {
          font-family: 'Amiri Quran', 'Amiri', serif;
          font-size: 2.3rem;
          color: #1d4ed8;
          line-height: 1;
          background: #eff6ff;
          padding: 0.25rem 0.75rem;
          border-radius: 10px;
          border: 1px solid #bfdbfe;
          direction: rtl;
        }

        .instant-sub-meta {
          display: flex;
          flex-direction: column;
          gap: 0.25rem;
        }

        .instant-sub-title {
          font-size: 0.95rem;
          color: #0f172a;
          font-weight: 700;
        }

        .instant-location-pill {
          font-family: 'JetBrains Mono', monospace;
          font-size: 0.72rem;
          font-weight: 700;
          background: #e0e7ff;
          color: #4338ca;
          padding: 0.2rem 0.55rem;
          border-radius: 6px;
          width: fit-content;
        }

        .instant-scroll-btn {
          background: #ffffff;
          border: 1px solid #cbd5e1;
          color: #334155;
          font-size: 0.78rem;
          font-weight: 700;
          padding: 0.45rem 0.9rem;
          border-radius: 8px;
          cursor: pointer;
          display: inline-flex;
          align-items: center;
          gap: 0.4rem;
          transition: all 0.2s ease;
        }
        .instant-scroll-btn:hover {
          background: #eff6ff;
          border-color: #3b82f6;
          color: #1d4ed8;
        }

        .instant-irab-box {
          background: #eff6ff;
          border: 1px solid #bfdbfe;
          border-radius: 12px;
          padding: 0.85rem 1.15rem;
          margin-bottom: 0.85rem;
        }

        .instant-irab-label {
          font-size: 0.7rem;
          font-weight: 800;
          color: #1e40af;
          text-transform: uppercase;
          letter-spacing: 0.06em;
          margin-bottom: 0.35rem;
        }

        .instant-irab-arabic {
          direction: rtl;
          font-family: 'Amiri', serif;
          font-size: 1.35rem;
          font-weight: 700;
          color: #1e3a8a;
          line-height: 1.8;
        }

        .instant-easy-english-box {
          background: #f0fdf4;
          border: 1px solid #bbf7d0;
          border-left: 4px solid #16a34a;
          border-radius: 12px;
          padding: 0.9rem 1.15rem;
          margin-bottom: 0.85rem;
        }

        .instant-easy-label {
          font-size: 0.75rem;
          font-weight: 800;
          color: #15803d;
          text-transform: uppercase;
          letter-spacing: 0.05em;
          display: flex;
          align-items: center;
          gap: 0.4rem;
          margin-bottom: 0.4rem;
        }

        .instant-easy-text {
          font-size: 0.95rem;
          line-height: 1.7;
          color: #166534;
          margin: 0;
          font-weight: 500;
        }

        .instant-facts-row {
          display: flex;
          flex-wrap: wrap;
          gap: 0.6rem;
        }

        .instant-fact-chip {
          background: #f8fafc;
          border: 1px solid #e2e8f0;
          padding: 0.35rem 0.75rem;
          border-radius: 8px;
          font-size: 0.75rem;
          display: flex;
          align-items: center;
          gap: 0.4rem;
        }

        .instant-fact-chip .fact-title {
          color: #64748b;
          font-weight: 600;
        }

        .instant-fact-chip .fact-val {
          color: #0f172a;
          font-weight: 700;
        }

        .instant-fact-chip .fact-val.ar-font {
          font-family: 'Amiri', serif;
          font-size: 1.05rem;
          color: #2563eb;
        }

        /* POS Color Mode */
        .pos-mode .verb-past { color: #1e40af; }
        .pos-mode .verb-present { color: #2563eb; }
        .pos-mode .verb-imperative { color: #0891b2; text-shadow: 0 0 20px rgba(8,145,178,0.4); }
        .pos-mode .noun { color: #059669; }
        .pos-mode .preposition { color: #7c3aed; }
        .pos-mode .particle { color: #6d28d9; }
        .pos-mode .negative { color: #dc2626; }
        .pos-mode .pronoun { color: #d97706; }

        /* Case Mode */
        .case-mode .case-marfoo { color: #2563eb; }
        .case-mode .case-mansoob { color: #059669; }
        .case-mode .case-majroor { color: #7c3aed; }
        .case-mode .case-mabni { color: #64748b; }

        /* Syntax Mode */
        .syntax-mode .syntax-inna { color: #d97706; }
        .syntax-mode .syntax-subject { color: #dc2626; }
        .syntax-mode .syntax-object { color: #059669; }
        .syntax-mode .syntax-verb { color: #0284c7; }
        .syntax-mode .syntax-predicate { color: #2563eb; }
        .syntax-mode .syntax-preposition { color: #7c3aed; }
        .syntax-mode .syntax-pronoun { color: #e11d48; }

        /* Animations */
        @keyframes pulsePast {
          0%, 100% { text-shadow: 0 0 0 rgba(30,64,175,0.2); }
          50% { text-shadow: 0 0 18px rgba(30,64,175,0.5); }
        }
        .pulse-past { animation: pulsePast 3s ease-in-out infinite; }

        /* ── Clickable Word Token ── */
        .gram-word {
          cursor: pointer;
          position: relative;
          display: inline-block;
          padding: 0.15rem 0.55rem;
          border-radius: 10px;
          transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
          user-select: none;
        }
        .gram-word:hover {
          background: rgba(59, 130, 246, 0.07);
          transform: translateY(-3px) scale(1.02);
          text-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .gram-word.is-selected {
          background: rgba(59, 130, 246, 0.12);
          outline: 2.5px solid #3b82f6;
          outline-offset: 2px;
          border-radius: 12px;
        }

        /* Tooltip */
        .gram-word::after {
          content: attr(data-tooltip);
          position: absolute;
          bottom: 125%;
          right: 50%;
          transform: translateX(50%);
          background: #0f172a;
          color: #f1f5f9;
          padding: 8px 14px;
          border-radius: 10px;
          white-space: nowrap;
          font-family: 'Plus Jakarta Sans', sans-serif;
          font-size: 0.78rem;
          font-weight: 500;
          opacity: 0;
          pointer-events: none;
          transition: opacity 0.2s ease, transform 0.2s ease;
          box-shadow: 0 8px 24px -4px rgba(0,0,0,0.3);
          z-index: 50;
          border: 1px solid rgba(255,255,255,0.08);
        }
        .show-tooltips .gram-word:hover::after {
          opacity: 1;
          transform: translateX(50%) translateY(-6px);
        }

        .verse-translation {
          margin-top: 1.5rem;
          color: #475569;
          font-size: 1.02rem;
          line-height: 1.65;
          border-top: 1px solid #f1f5f9;
          padding-top: 1rem;
          font-weight: 400;
          font-style: italic;
        }

        /* ── Detail Inspector Panel ── */
        .detail-inspector {
          width: 100%;
          max-width: 1080px;
          padding: 0 1.5rem;
        }

        .detail-inspector-inner {
          background: #ffffff;
          border: 1px solid #e2e8f0;
          border-radius: 24px;
          padding: 2.25rem;
          box-shadow: 0 1px 3px rgba(0,0,0,0.02), 0 20px 40px -12px rgba(0,0,0,0.08);
          animation: inspectorIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        }

        @keyframes inspectorIn {
          from { opacity: 0; transform: translateY(16px) scale(0.98); }
          to { opacity: 1; transform: translateY(0) scale(1); }
        }

        .inspector-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-bottom: 1px solid #f1f5f9;
          padding-bottom: 1.5rem;
          margin-bottom: 1.75rem;
          flex-wrap: wrap;
          gap: 1rem;
        }

        .word-hero-left {
          display: flex;
          align-items: center;
          gap: 1.5rem;
        }

        .word-arabic-hero {
          font-family: 'Amiri Quran', 'Amiri', serif;
          font-size: 3.6rem;
          color: #2563eb;
          line-height: 1;
          text-shadow: 0 2px 12px rgba(37, 99, 235, 0.15);
        }

        .word-sub-meta {
          display: flex;
          flex-direction: column;
          gap: 0.35rem;
        }

        .word-translit {
          font-size: 1.2rem;
          font-weight: 700;
          color: #0f172a;
          letter-spacing: -0.01em;
        }

        .word-role-badge {
          display: inline-flex;
          align-items: center;
          font-size: 0.72rem;
          font-weight: 700;
          color: #64748b;
          background: #f1f5f9;
          border: 1px solid #e2e8f0;
          padding: 0.25rem 0.6rem;
          border-radius: 6px;
          font-family: 'JetBrains Mono', monospace;
        }

        .irab-text {
          direction: rtl;
          font-family: 'Amiri', serif;
          font-size: 1.15rem;
          color: #1e40af;
          background: #eff6ff;
          padding: 0.75rem 1rem;
          border-radius: 12px;
          border: 1px solid #dbeafe;
          line-height: 1.8;
          max-width: 420px;
        }

        /* ── AI Tutor ── */
        .ai-tutor-container {
          background: linear-gradient(135deg, #fafbff 0%, #f0f4ff 100%);
          border: 1px solid #dbeafe;
          border-radius: 16px;
          padding: 1.5rem;
          margin-bottom: 1.75rem;
        }

        .ai-tutor-nav {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 1.15rem;
          flex-wrap: wrap;
          gap: 0.75rem;
        }

        .ai-tutor-title {
          font-size: 0.95rem;
          font-weight: 800;
          display: flex;
          align-items: center;
          gap: 0.5rem;
          color: #1e293b;
        }

        .ai-level-pills {
          display: flex;
          background: #e2e8f0;
          padding: 3px;
          border-radius: 10px;
          gap: 2px;
        }

        .ai-pill-btn {
          border: none;
          background: transparent;
          padding: 0.45rem 0.85rem;
          font-size: 0.75rem;
          font-weight: 700;
          color: #64748b;
          border-radius: 8px;
          cursor: pointer;
          transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .ai-pill-btn:hover { color: #334155; }
        .ai-pill-btn.active {
          background: #ffffff;
          color: #2563eb;
          box-shadow: 0 1px 3px rgba(0,0,0,0.08);
        }

        .ai-content-box {
          font-size: 0.95rem;
          line-height: 1.75;
          color: #334155;
          background: #ffffff;
          padding: 1.15rem 1.35rem;
          border-radius: 12px;
          border-left: 4px solid #3b82f6;
          box-shadow: 0 1px 2px rgba(0,0,0,0.03);
        }

        .ai-content-box.level-beginner { border-left-color: #22c55e; }
        .ai-content-box.level-intermediate { border-left-color: #3b82f6; }
        .ai-content-box.level-advanced { border-left-color: #8b5cf6; }

        /* ── Morphological Grid ── */
        .morpho-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
          gap: 0.85rem;
          margin-bottom: 1.75rem;
        }

        .morpho-card {
          background: #f8fafc;
          border: 1px solid #e2e8f0;
          border-radius: 12px;
          padding: 1.1rem 1.25rem;
          transition: all 0.2s ease;
        }
        .morpho-card:hover {
          background: #f1f5f9;
          border-color: #cbd5e1;
        }

        .morpho-label {
          font-size: 0.7rem;
          font-weight: 700;
          color: #94a3b8;
          text-transform: uppercase;
          letter-spacing: 0.06em;
          margin-bottom: 0.4rem;
        }

        .morpho-val {
          font-size: 1rem;
          font-weight: 700;
          color: #1e293b;
        }

        /* ── Syntax Tree ── */
        .syntax-tree-card {
          background: #ffffff;
          border: 1px solid #e2e8f0;
          border-radius: 16px;
          padding: 1.5rem;
          margin-bottom: 1.75rem;
        }

        .tree-title {
          font-size: 0.82rem;
          font-weight: 700;
          color: #475569;
          margin-bottom: 1rem;
          text-transform: uppercase;
          letter-spacing: 0.06em;
          display: flex;
          align-items: center;
          gap: 0.5rem;
        }

        .syntax-chain {
          display: flex;
          flex-direction: column;
          gap: 0.6rem;
        }

        .syntax-edge {
          display: flex;
          align-items: center;
          gap: 0.85rem;
          background: #f8fafc;
          padding: 0.75rem 1.15rem;
          border-radius: 10px;
          font-size: 0.85rem;
          border: 1px solid #f1f5f9;
          transition: all 0.15s ease;
        }
        .syntax-edge:hover {
          background: #f1f5f9;
          border-color: #e2e8f0;
        }

        .edge-badge {
          background: #eff6ff;
          color: #1d4ed8;
          border: 1px solid #bfdbfe;
          padding: 0.2rem 0.6rem;
          border-radius: 6px;
          font-size: 0.68rem;
          font-weight: 700;
          font-family: 'JetBrains Mono', monospace;
          white-space: nowrap;
        }

        /* ── Comparison Grid ── */
        .comparison-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: 1.25rem;
        }

        .comp-card {
          background: #ffffff;
          border: 1px solid #e2e8f0;
          border-radius: 16px;
          padding: 1.5rem;
        }

        .comp-title {
          font-size: 0.78rem;
          font-weight: 700;
          color: #475569;
          text-transform: uppercase;
          letter-spacing: 0.06em;
          margin-bottom: 1rem;
          display: flex;
          align-items: center;
          gap: 0.5rem;
        }

        .quran-ayah-item {
          border-left: 3px solid #3b82f6;
          background: linear-gradient(90deg, #f8fafc, #ffffff);
          padding: 0.85rem 1.1rem;
          border-radius: 0 12px 12px 0;
          margin-bottom: 0.75rem;
          transition: all 0.15s ease;
        }
        .quran-ayah-item:hover {
          background: linear-gradient(90deg, #eff6ff, #ffffff);
          border-left-color: #2563eb;
        }

        .quran-ayah-ar {
          font-family: 'Amiri Quran', 'Amiri', serif;
          font-size: 1.4rem;
          color: #1e293b;
          direction: rtl;
          margin-bottom: 0.3rem;
        }

        .quran-ayah-exp {
          font-size: 0.78rem;
          color: #64748b;
          font-weight: 500;
        }

        .chip-list {
          display: flex;
          flex-wrap: wrap;
          gap: 0.5rem;
        }

        .intel-chip {
          background: #f8fafc;
          border: 1px solid #e2e8f0;
          padding: 0.4rem 0.85rem;
          border-radius: 9999px;
          font-size: 0.78rem;
          color: #334155;
          transition: all 0.15s ease;
        }
        .intel-chip:hover {
          background: #eff6ff;
          border-color: #bfdbfe;
        }

        .intel-chip strong {
          font-family: 'Amiri', serif;
          font-size: 1.1rem;
          color: #1d4ed8;
          margin-right: 0.35rem;
        }

        /* ── Footer ── */
        .app-footer {
          width: 100%;
          max-width: 1080px;
          margin: 2rem auto 0;
          padding: 2rem 1.5rem;
          text-align: center;
          border-top: 1px solid #e2e8f0;
        }

        .footer-text {
          color: #94a3b8;
          font-size: 0.82rem;
          margin-bottom: 0.4rem;
        }

        .footer-version {
          font-family: 'JetBrains Mono', monospace;
          font-weight: 600;
          font-size: 0.8rem;
          color: #3b82f6;
          background: #eff6ff;
          border: 1px solid #bfdbfe;
          display: inline-block;
          padding: 0.25rem 0.85rem;
          border-radius: 6px;
        }

        /* ── Responsive ── */
        @media (max-width: 768px) {
          .app-header {
            padding: 2rem 1rem 2rem;
          }
          h1.surah-title { font-size: 1.8rem; }
          .surah-title-ar { font-size: 2.4rem; }
          .sentence { font-size: 2.4rem; gap: 0.75rem 1rem; }
          .controls-wrapper {
            margin: -1rem 1rem 1.5rem 1rem;
            padding: 0.85rem 1rem;
          }
          
        .verse-box.is-playing {
          border-color: #3b82f6 !important;
          box-shadow: 0 0 25px rgba(59, 130, 246, 0.25) !important;
          background: #f8fbff !important;
        }

        .verse-box { padding: 1.5rem; border-radius: 16px; }
          .detail-inspector-inner { padding: 1.5rem; border-radius: 16px; }
          .word-arabic-hero { font-size: 2.8rem; }
          .stats-row { gap: 0.75rem; flex-wrap: wrap; }
          .comparison-grid { grid-template-columns: 1fr; }
        }

/* ═══════════════════════════════════════════════════
   Bismillah Calligraphy Banner & Nouman Ali Khan Gems
   ═══════════════════════════════════════════════════ */

.bismillah-banner {
  text-align: center;
  padding: 1.25rem 1rem 0.75rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px dashed rgba(226, 232, 240, 0.8);
}

.bismillah-arabic {
  font-family: 'Amiri Quran', 'Amiri', serif;
  font-size: 2.1rem;
  color: #1e3a8a;
  line-height: 1.6;
  text-shadow: 0 1px 4px rgba(30, 58, 138, 0.12);
  margin-bottom: 0.25rem;
}

.bismillah-sub {
  font-size: 0.82rem;
  color: #64748b;
  font-style: italic;
  font-weight: 500;
}

/* Nouman Ali Khan Gem Card */
.nak-gem-container {
  margin-top: 1.5rem;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 40%, #ffffff 100%);
  border: 1px solid #fde68a;
  border-left: 5px solid #d97706;
  border-radius: 18px;
  padding: 1.75rem;
  box-shadow: 0 4px 15px -3px rgba(217, 119, 6, 0.08);
  animation: inspectorIn 0.35s ease;
}

.nak-gem-header {
  margin-bottom: 1.25rem;
  border-bottom: 1px solid rgba(253, 230, 138, 0.7);
  padding-bottom: 1rem;
}

.nak-badge-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
  flex-wrap: wrap;
}

.nak-mic-badge {
  background: #78350f;
  color: #fef3c7;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 9999px;
  letter-spacing: 0.03em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.nak-category-pill {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 9999px;
  text-transform: uppercase;
}

.nak-gem-title {
  margin: 0 0 0.35rem;
  font-size: 1.18rem;
  font-weight: 800;
  color: #78350f;
  line-height: 1.4;
}

.nak-gem-summary {
  margin: 0;
  font-size: 0.88rem;
  color: #92400e;
  font-weight: 600;
  line-height: 1.5;
}

.nak-gem-body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.nak-deep-dive-text {
  font-size: 0.94rem;
  color: #334155;
  line-height: 1.75;
  font-weight: 450;
  background: rgba(255, 255, 255, 0.75);
  padding: 1.15rem 1.35rem;
  border-radius: 12px;
  border: 1px solid rgba(253, 230, 138, 0.5);
}

.nak-submorphemes-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1.15rem;
}

.nak-box-title {
  font-size: 0.84rem;
  font-weight: 800;
  color: #1e293b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.nak-morpheme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.65rem;
}

.nak-morpheme-item {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.nak-morpheme-ar {
  font-family: 'Amiri Quran', 'Amiri', serif;
  font-size: 1.35rem;
  color: #2563eb;
  font-weight: 700;
}

.nak-morpheme-type {
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
}

.nak-morpheme-meaning {
  font-size: 0.8rem;
  color: #334155;
  line-height: 1.4;
  font-weight: 500;
}

.nak-balaghah-secret {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border: 1px solid #a7f3d0;
  border-left: 4px solid #059669;
  border-radius: 10px;
  padding: 0.85rem 1.15rem;
}

.nak-secret-label {
  font-size: 0.78rem;
  font-weight: 800;
  color: #065f46;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 5px;
}

.nak-secret-text {
  font-size: 0.88rem;
  color: #047857;
  line-height: 1.55;
  font-weight: 600;
}