* { margin: 0; padding: 0; box-sizing: border-box; }

        :root {
            --bg-primary: #faf8f5;
            --bg-secondary: #ffffff;
            --bg-card: #ffffff;
            --text-primary: #1e1e2a;
            --text-secondary: #4a5568;
            --accent: #c4450c;
            --accent-soft: #e36b2c;
            --accent-light: #fce9df;
            --border-light: #ede6dd;
            --border-medium: #e2d9ce;
            --shadow-sm: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 2px 8px rgba(0, 0, 0, 0.02);
            --shadow-hover: 0 20px 30px -8px rgba(196, 69, 12, 0.08);
            --gold-grad: linear-gradient(135deg, #c4450c 0%, #e67e22 80%);
            --header-bg: rgba(255, 255, 255, 0.86);
            --footer-bg: #1a1e24;
            --doha-bg: #fff7f0;
        }

        body.dark {
            --bg-primary: #0f1115;
            --bg-secondary: #1a1e26;
            --bg-card: #1e2430;
            --text-primary: #edf2f7;
            --text-secondary: #b0bed0;
            --accent: #f39c12;
            --accent-soft: #f1a23d;
            --accent-light: #2d2a24;
            --border-light: #2d3748;
            --border-medium: #3a4556;
            --shadow-sm: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
            --shadow-hover: 0 20px 30px -8px rgba(243, 156, 18, 0.12);
            --gold-grad: linear-gradient(135deg, #f39c12 0%, #e67e22 90%);
            --header-bg: rgba(15, 17, 21, 0.9);
            --footer-bg: #0b0d11;
            --doha-bg: #2a241c;
        }

        body {
            font-family: 'Inter', sans-serif;
            background: var(--bg-primary);
            color: var(--text-primary);
            line-height: 1.65;
            transition: background 0.25s ease, color 0.2s;
            font-size: 16px;
        }

        .container { max-width: 1280px; margin: 0 auto; padding: 0 2rem; }

        /* ----- sticky header (professional) ----- */
        .site-header {
            position: sticky; top: 0; z-index: 50;
            background: var(--header-bg); backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--border-light);
            padding: 0.9rem 0;
        }
        .header-inner {
            display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
        }
        .logo-area h2 {
            font-weight: 700; font-size: 1.7rem; letter-spacing: -0.02em;
            background: var(--gold-grad); -webkit-background-clip: text; background-clip: text;
            color: transparent; margin-bottom: 4px;
        }
        .logo-area .header-tagline {
            font-size: 0.8rem; font-weight: 500; color: var(--text-secondary);
            display: flex; align-items: center; gap: 8px;
        }
        .header-actions { display: flex; align-items: center; gap: 20px; }
        .usa-badge-sm {
            background: var(--accent-light); padding: 6px 16px; border-radius: 40px;
            font-size: 0.8rem; font-weight: 600; color: var(--accent);
            border: 1px solid var(--border-medium);
        }
        .theme-toggle-btn {
            background: var(--bg-card); border: 1px solid var(--border-medium);
            border-radius: 40px; padding: 6px 12px; display: flex; align-items: center; gap: 8px;
            cursor: pointer; font-weight: 500; color: var(--text-primary);
            box-shadow: var(--shadow-sm);
        }

        /* Meta description block */
        .meta-description-block {
            background: var(--bg-card); border-radius: 28px; padding: 1.5rem 2rem;
            margin: 2rem 0; border: 1px solid var(--border-light);
            box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: space-between;
        }
        .meta-text p { color: var(--text-secondary); }
        .seo-badge {
            background: var(--accent-light); padding: 8px 20px; border-radius: 60px;
            font-weight: 600; color: var(--accent);
        }

        /* Chalisa master card — all boxes similar */
        .chalisa-master {
            background: var(--bg-card); border-radius: 36px;
            box-shadow: var(--shadow-sm); border: 1px solid var(--border-light);
            padding: 2.5rem 2.2rem; margin: 2.2rem 0;
        }

        /* Unified doha box style (starting and ending doha identical look) */
        .doha-unified {
            background: var(--doha-bg);
            border-radius: 24px;
            padding: 2rem 2rem;
            border-left: 6px solid var(--accent);
            border: 1px solid var(--border-medium);
            box-shadow: var(--shadow-sm);
            margin-bottom: 2.2rem;
            text-align: center;
        }
        .doha-title {
            font-size: 1.5rem; font-weight: 700; color: var(--accent);
            margin-bottom: 1rem; letter-spacing: 0.5px;
        }
        .doha-hinglish {
            font-family: 'Merriweather', serif; font-weight: 700; font-size: 1.3rem;
            color: var(--text-primary); line-height: 1.6;
        }
        .doha-meaning {
            margin-top: 1.2rem; color: var(--text-secondary);
            border-top: 1px dashed var(--border-medium); padding-top: 1.2rem;
        }

        /* Verse cards — same as before, unified */
        .verses-grid { display: flex; flex-direction: column; gap: 1rem; }
        .verse-card {
            background: var(--bg-primary); border-radius: 20px; padding: 1.3rem 1.8rem;
            border: 1px solid var(--border-light); box-shadow: 0 2px 6px rgba(0,0,0,0.02);
            border-left: 5px solid var(--accent-soft); transition: all 0.2s;
        }
        .verse-card:hover {
            background: var(--bg-card); border-left-color: var(--accent);
            box-shadow: var(--shadow-hover); transform: translateY(-2px);
        }
        .chaupai-num {
            font-size: 0.7rem; font-weight: 700; letter-spacing: 1.5px;
            color: var(--accent); text-transform: uppercase; margin-bottom: 8px;
        }
        .hinglish-text {
            font-family: 'Merriweather', serif; font-weight: 600; font-size: 1.05rem;
            color: var(--text-primary); line-height: 1.5; margin-bottom: 8px;
        }
        .english-meaning {
            color: var(--text-secondary); font-size: 0.92rem;
            border-top: 1px dashed var(--border-medium); padding-top: 10px;
        }

        /* info cards */
        .info-grid {
            display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin: 2.8rem 0;
        }
        .info-card {
            background: var(--bg-card); border-radius: 28px; padding: 1.8rem 1.5rem;
            border: 1px solid var(--border-light); box-shadow: var(--shadow-sm);
            text-align: center; transition: transform 0.2s;
        }
        .info-card:hover { transform: translateY(-5px); }
        .info-card i { font-size: 2rem; color: var(--accent); margin-bottom: 0.8rem; }

        /* footer */
        .site-footer {
            background: var(--footer-bg); color: #e0e0e0; border-radius: 40px 40px 0 0;
            margin-top: 3rem; padding: 3rem 2rem 2rem;
        }
        .footer-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 30px; }
        .footer-col h4 { color: white; margin-bottom: 1.2rem; }
        .footer-col ul { list-style: none; }
        .footer-col li { margin-bottom: 0.6rem; }
        .footer-col a { color: #bbb; text-decoration: none; }
        .footer-col a:hover { color: var(--accent-soft); }
        .footer-bottom {
            border-top: 1px solid #2d3748; margin-top: 2.5rem; padding-top: 1.8rem;
            text-align: center; font-size: 0.85rem; color: #9aa5b5;
        }

        .back-to-top {
            position: fixed; bottom: 30px; right: 30px;
            background: var(--accent); color: white; width: 48px; height: 48px;
            border-radius: 30px; display: flex; align-items: center; justify-content: center;
            cursor: pointer; opacity: 0; transition: 0.2s; box-shadow: 0 8px 18px rgba(0,0,0,0.2);
            border: none; z-index: 100;
        }
        .back-to-top.visible { opacity: 1; }

        .legal-page {
            max-width: 900px; margin: 2rem auto; background: var(--bg-card);
            padding: 2.5rem; border-radius: 32px; border: 1px solid var(--border-light);
        }
        .hidden-page { display: none; }
        .active-page { display: block; }

        @media (max-width: 768px) {
            .container { padding: 0 1.2rem; }
            .footer-grid { grid-template-columns: 1fr 1fr; }
            .info-grid { grid-template-columns: 1fr; }
            .meta-description-block { flex-direction: column; align-items: flex-start; gap: 15px; }
        }