/* =========================================================
           RESET
        ========================================================= */

        * {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

            font-family: 'Poppins', sans-serif;

        }


        body {

            background: #F8FBFF;

            color: #0B1F41;

            transition: 0.3s;

        }


        /* =========================================================
           TOP BAR
        ========================================================= */

        .topbar {

            min-height: 70px;

            background: linear-gradient(
                135deg,
                #1F6FE5,
                #155DC4
            );

            color: white;

            display: flex;

            align-items: center;

            padding: 12px 18px;

            position: sticky;

            top: 0;

            z-index: 1000;

            box-shadow:
                0 4px 15px rgba(31,111,229,0.18);

        }


        .back-btn {

            width: 42px;

            height: 42px;

            border-radius: 50%;

            background: rgba(255,255,255,0.15);

            color: white;

            text-decoration: none;

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 27px;

            font-weight: 500;

            transition: 0.25s ease;

            flex-shrink: 0;

        }


        .back-btn:hover {

            background: rgba(255,255,255,0.25);

            transform: translateX(-3px);

        }


        .topbar h1 {

            font-size: 21px;

            line-height: 1.3;

            font-weight: 700;

            margin-left: 15px;

            flex: 1;

        }


        /* =========================================================
           THEME BUTTON
        ========================================================= */

        .theme-btn {

            width: 42px;

            height: 42px;

            border: none;

            border-radius: 50%;

            background: white;

            color: #0B1F41;

            cursor: pointer;

            font-size: 18px;

            display: flex;

            align-items: center;

            justify-content: center;

            flex-shrink: 0;

        }


        /* =========================================================
           MAIN PAGE
        ========================================================= */

        .solution-page {

            width: 100%;

            max-width: 1400px;

            margin: 0 auto;

            padding: 25px 15px 50px;

        }


        /* =========================================================
           TOPIC BOX
        ========================================================= */

        .topic-box {

            width: 100%;

            margin-bottom: 25px;

            padding: 25px;

            background: linear-gradient(
                135deg,
                #EAF5FF,
                #DCEEFF
            );

            border: 1px solid #D3E9FF;

            border-radius: 20px;

            box-shadow:
                0 4px 15px rgba(31,111,229,0.06);

        }


        .topic-box h2 {

            color: #0B1F41;

            font-size: 25px;

            line-height: 1.35;

            font-weight: 800;

            margin-bottom: 10px;

        }


        .topic-box p {

            color: #536174;

            font-size: 15px;

            line-height: 1.7;

        }


        /* =========================================================
           PYQ INFORMATION
        ========================================================= */

        .paper-info {

            display: flex;

            flex-wrap: wrap;

            gap: 10px;

            margin-top: 16px;

        }


        .info-tag {

            display: inline-block;

            padding: 7px 13px;

            border-radius: 30px;

            background: #D3E9FF;

            color: #1F6FE5;

            font-size: 12px;

            font-weight: 700;

        }


        /* =========================================================
           LOADING MESSAGE
        ========================================================= */

        #loading-message {

            text-align: center;

            padding: 25px 15px;

            margin-bottom: 15px;

            color: #64748B;

            font-size: 16px;

            font-weight: 500;

        }


        /* =========================================================
           PDF CONTAINER
        ========================================================= */

        #pdf-container {

            width: 100%;

            padding: 0;

        }


        /* =========================================================
           PDF PAGES
        ========================================================= */

        canvas {

            width: 100% !important;

            height: auto !important;

            display: block;

            margin: 0 auto 18px;

            background: white;

            border-radius: 8px;

            box-shadow:
                0 3px 15px rgba(11,31,65,0.10);

        }


        /* =========================================================
           BOTTOM BACK BUTTON
        ========================================================= */

        .bottom-back {

            text-align: center;

            padding: 30px 15px 10px;

        }


        .bottom-btn {

            display: inline-flex;

            align-items: center;

            justify-content: center;

            gap: 8px;

            background: #1F6FE5;

            color: white;

            text-decoration: none;

            padding: 12px 22px;

            border-radius: 11px;

            font-size: 15px;

            font-weight: 700;

            box-shadow:
                0 5px 12px rgba(31,111,229,0.18);

            transition: 0.25s ease;

        }


        .bottom-btn:hover {

            background: #155DC4;

            transform: translateY(-2px);

        }


        /* =========================================================
           SEO SECTION
        ========================================================= */

        .seo-section {

            width: 95%;

            max-width: 1400px;

            margin: 40px auto;

            padding: 30px;

            background: #ffffff;

            border: 1px solid #E2EEF9;

            border-radius: 20px;

            box-shadow:
                0 3px 15px rgba(11,31,65,0.06);

            line-height: 1.8;

            color: #444;

        }


        .seo-section h2 {

            color: #0B1F41;

            font-size: 1.8rem;

            font-weight: 700;

            margin-top: 0;

            margin-bottom: 15px;

            line-height: 1.4;

        }


        .seo-section h3 {

            color: #0B1F41;

            font-size: 1.2rem;

            font-weight: 600;

            margin-top: 25px;

            margin-bottom: 10px;

            line-height: 1.4;

        }


        .seo-section p {

            margin-bottom: 16px;

            font-size: 1rem;

            line-height: 1.8;

        }


        .seo-section ul {

            margin: 15px 0;

            padding-left: 25px;

        }


        .seo-section li {

            margin-bottom: 8px;

            line-height: 1.7;

        }


        .seo-section strong {

            color: #0B1F41;

        }


        /* =========================================================
           WHATSAPP SHARE
        ========================================================= */

        .whatsapp-share {

            position: fixed;

            bottom: 20px;

            right: 20px;

            width: 60px;

            height: 60px;

            border-radius: 50%;

            background: #25D366;

            display: flex;

            align-items: center;

            justify-content: center;

            box-shadow:
                0 4px 12px rgba(0,0,0,0.22);

            z-index: 9999;

        }


        .whatsapp-share img {

            width: 32px;

            height: 32px;

            filter: invert(1);

        }


        /* =========================================================
           MOBILE
        ========================================================= */

        @media (max-width: 768px) {

            .topbar {

                min-height: 64px;

                padding: 10px 12px;

            }


            .back-btn {

                width: 38px;

                height: 38px;

                font-size: 24px;

            }


            .topbar h1 {

                font-size: 16px;

                margin-left: 10px;

            }


            .theme-btn {

                width: 38px;

                height: 38px;

                font-size: 16px;

            }


            .solution-page {

                padding: 18px 10px 35px;

            }


            .topic-box {

                padding: 20px 17px;

                border-radius: 17px;

                margin-bottom: 20px;

            }


            .topic-box h2 {

                font-size: 20px;

                line-height: 1.35;

                margin-bottom: 8px;

            }


            .topic-box p {

                font-size: 13px;

                line-height: 1.6;

            }


            .paper-info {

                gap: 7px;

                margin-top: 12px;

            }


            .info-tag {

                font-size: 10px;

                padding: 6px 10px;

            }


            #loading-message {

                font-size: 14px;

                padding: 20px 10px;

            }


            canvas {

                margin-bottom: 12px;

                border-radius: 5px;

            }


            .bottom-back {

                padding: 25px 10px 5px;

            }


            .bottom-btn {

                padding: 11px 18px;

                font-size: 13px;

            }


            .seo-section {

                width: calc(100% - 20px);

                margin: 25px auto;

                padding: 20px;

                border-radius: 15px;

            }


            .seo-section h2 {

                font-size: 1.35rem;

            }


            .seo-section h3 {

                font-size: 1.05rem;

            }


            .seo-section p,
            .seo-section li {

                font-size: 0.95rem;

            }


            .whatsapp-share {

                width: 52px;

                height: 52px;

                bottom: 15px;

                right: 15px;

            }


            .whatsapp-share img {

                width: 28px;

                height: 28px;

            }

        }


        /* =========================================================
           SMALL MOBILE
        ========================================================= */

        @media (max-width: 400px) {

            .topbar h1 {

                font-size: 14px;

            }


            .topic-box h2 {

                font-size: 18px;

            }


            .topic-box p {

                font-size: 12px;

            }


            .info-tag {

                font-size: 9px;

            }


            .seo-section {

                padding: 17px;

            }


            .seo-section h2 {

                font-size: 1.2rem;

            }

        }

    /* =========================================================
   DARK MODE
========================================================= */

body.dark {

    background: #0F172A;

    color: #E2E8F0;

}


/* =========================================================
   TOP BAR
========================================================= */

body.dark .topbar {

    background: linear-gradient(
        135deg,
        #123C7A,
        #0B2854
    );

}


/* =========================================================
   THEME BUTTON
========================================================= */

body.dark .theme-btn {

    background: #1E293B;

    color: #F8FAFC;

}


/* =========================================================
   TOPIC BOX
========================================================= */

body.dark .topic-box {

    background: linear-gradient(
        135deg,
        #172554,
        #1E3A5F
    );

    border-color: #294B73;

}


body.dark .topic-box h2 {

    color: #F8FAFC;

}


body.dark .topic-box p {

    color: #CBD5E1;

}


/* =========================================================
   INFORMATION TAGS
========================================================= */

body.dark .info-tag {

    background: #1E3A8A;

    color: #BFDBFE;

}


/* =========================================================
   LOADING MESSAGE
========================================================= */

body.dark #loading-message {

    color: #CBD5E1;

}


/* =========================================================
   PDF
========================================================= */

body.dark canvas {

    background: #1E293B;

    box-shadow:
        0 3px 15px rgba(0,0,0,0.35);

}


/* =========================================================
   SEO SECTION
========================================================= */

body.dark .seo-section {

    background: #1E293B;

    border-color: #334155;

    color: #CBD5E1;

    box-shadow:
        0 3px 15px rgba(0,0,0,0.30);

}


body.dark .seo-section h2 {

    color: #F8FAFC;

}


body.dark .seo-section h3 {

    color: #E2E8F0;

}


body.dark .seo-section p {

    color: #CBD5E1;

}


body.dark .seo-section li {

    color: #CBD5E1;

}


body.dark .seo-section strong {

    color: #F8FAFC;

}


/* =========================================================
   BOTTOM BACK BUTTON
========================================================= */

body.dark .bottom-btn {

    background: #2563EB;

    color: white;

}


body.dark .bottom-btn:hover {

    background: #1D4ED8;

}