.KantumruyPro { font-family: 'Kantumruy Pro', sans-serif; }

        body.bg-white {
            background:
                radial-gradient(circle at top right, rgba(91, 33, 182, 0.10), transparent 22%),
                radial-gradient(circle at top left, rgba(37, 99, 235, 0.10), transparent 24%),
                linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
        }

        .ai-hero {
            position: relative;
            overflow: hidden;
            border-radius: 24px;
            padding: 18px 16px 6px;
            margin-top: 6px;
            background: linear-gradient(135deg, rgba(18, 28, 66, 0.95), rgba(63, 29, 114, 0.90));
            box-shadow: 0 18px 40px rgba(21, 24, 67, 0.18);
            border: 1px solid rgba(255,255,255,0.08);
        }

        .ai-hero::before {
            content: "";
            position: absolute;
            top: -30%;
            right: -10%;
            width: 220px;
            height: 220px;
            background: radial-gradient(circle, rgba(56,189,248,0.32), transparent 62%);
            pointer-events: none;
        }

        .ai-hero::after {
            content: "";
            position: absolute;
            left: -8%;
            bottom: -20%;
            width: 180px;
            height: 180px;
            background: radial-gradient(circle, rgba(168,85,247,0.22), transparent 62%);
            pointer-events: none;
        }

        .ai-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 14px;
            border-radius: 999px;
            background: rgba(255,255,255,0.10);
            border: 1px solid rgba(255,255,255,0.12);
            color: #e9f3ff;
            font-size: 12px;
            font-weight: 700;
            margin-bottom: 14px;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }

        .ai-hero-title {
            color: #ffffff;
            margin-bottom: 10px;
            text-shadow: 0 6px 20px rgba(59,130,246,0.25);
        }

        .ai-author-row { color: rgba(255,255,255,0.82) !important; }
        .ai-author-row a { color: #8be9ff !important; }

        .lead { font-size: 18px; line-height: 1.8; }
        .ai-hero .lead { color: rgba(255,255,255,0.92); }

        .ai-section-card, figure, .blog-card {
            background: rgba(255,255,255,0.78);
            border: 1px solid rgba(143, 155, 179, 0.16);
            box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
        }

        .ai-section-card {
            border-radius: 22px;
            padding: 18px 16px;
            margin-top: 14px;
        }

        .lesson-highlight {
            background: linear-gradient(135deg, rgba(239,246,255,0.95), rgba(245,243,255,0.96));
            border: 1px solid rgba(99,102,241,0.12);
            border-radius: 18px;
            padding: 16px;
            margin: 14px 0;
            box-shadow: 0 10px 24px rgba(99,102,241,0.06);
            position: relative;
            overflow: hidden;
        }

        .lesson-highlight::before {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at top right, rgba(56,189,248,0.18), transparent 35%);
            pointer-events: none;
        }

        #appCapsule p { font-size: 17px; line-height: 1.85; }
        #appCapsule li { font-size: 17px; line-height: 1.85; margin-bottom: 4px; }
        #appCapsule h1 { font-size: 28px; font-weight: 800; }
        #appCapsule h2 { font-size: 22px; font-weight: 800; }

        #appCapsule h3 {
            font-size: 20px;
            margin-top: 20px;
            margin-bottom: 10px;
            position: relative;
            padding-left: 14px;
        }

        #appCapsule h3::before {
            content: "";
            position: absolute;
            left: 0;
            top: 7px;
            width: 6px;
            height: 22px;
            border-radius: 999px;
            background: linear-gradient(180deg, #2563eb, #a855f7);
        }

        #appCapsule h3:nth-of-type(4n+1)::before { background: linear-gradient(180deg, #2563eb, #06b6d4); }
        #appCapsule h3:nth-of-type(4n+2)::before { background: linear-gradient(180deg, #8b5cf6, #ec4899); }
        #appCapsule h3:nth-of-type(4n+3)::before { background: linear-gradient(180deg, #10b981, #84cc16); }
        #appCapsule h3:nth-of-type(4n)::before { background: linear-gradient(180deg, #f59e0b, #ef4444); }

        figure img {
            border-radius: 18px;
            width: 100%;
            display: block;
            box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10);
        }

        figure { margin: 18px 0; padding: 14px; border-radius: 22px; }

        .blog-card {
            border-radius: 18px;
            overflow: hidden;
            transition: transform .25s ease, box-shadow .25s ease;
        }

        .blog-card .text { padding: 12px 12px 14px; }
        .blog-card .title { font-size: 16px; line-height: 1.6; margin: 0; }

        .next-card-title {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
            padding: 8px 14px;
            border-radius: 999px;
            background: linear-gradient(135deg, rgba(59,130,246,0.10), rgba(168,85,247,0.10));
            border: 1px solid rgba(99,102,241,0.10);
        }

        .blog-header-info .chip-media a { transition: transform .2s ease; }
        .blog-header-info .chip-media a:hover, .blog-card:hover { transform: translateY(-2px); }

        .lesson-note {
            position: relative;
            background: linear-gradient(135deg, rgba(255,193,7,0.12), rgba(255,87,34,0.12));
            border: 1px solid rgba(255,152,0,0.25);
            border-radius: 16px;
            padding: 16px;
            margin: 16px 0;
            backdrop-filter: blur(10px);
            box-shadow: 0 10px 25px rgba(255,152,0,0.08);
        }

        .lesson-note::before {
            content: "⚠️ AI NOTE";
            display: block;
            font-size: 12px;
            font-weight: bold;
            margin-bottom: 6px;
            color: #ff9800;
        }

        .lesson-summary-box {
            position: relative;
            background: linear-gradient(135deg, rgba(56,189,248,0.10), rgba(168,85,247,0.10));
            border: 1px solid rgba(99,102,241,0.18);
            border-radius: 18px;
            padding: 18px;
            margin-top: 18px;
            backdrop-filter: blur(12px);
            box-shadow: 0 12px 28px rgba(99,102,241,0.08);
        }

        .lesson-summary-box::before {
            content: "🧠 AI SUMMARY";
            display: block;
            font-size: 12px;
            font-weight: bold;
            margin-bottom: 8px;
            color: #6366f1;
        }

        .beginner-box {
            position: relative;
            background: linear-gradient(135deg, rgba(37,99,235,0.10), rgba(14,165,233,0.10));
            border: 1px solid rgba(37,99,235,0.25);
            border-radius: 18px;
            padding: 18px;
            margin-top: 18px;
            backdrop-filter: blur(12px);
            box-shadow: 0 12px 28px rgba(37,99,235,0.08);
        }

        .beginner-box::before {
            content: "🚀 BEGINNER GUIDE";
            display: block;
            font-size: 12px;
            font-weight: bold;
            margin-bottom: 8px;
            color: #2563eb;
        }

        .prompt-box {
            position: relative;
            background: linear-gradient(135deg, rgba(15,23,42,0.96), rgba(30,41,59,0.96));
            color: #e2e8f0;
            border: 1px solid rgba(99,102,241,0.18);
            border-radius: 18px;
            padding: 16px;
            margin: 14px 0;
            box-shadow: 0 14px 30px rgba(15,23,42,0.12);
            overflow: hidden;
        }

        .prompt-box::before {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at top right, rgba(56,189,248,0.14), transparent 35%);
            pointer-events: none;
        }

        .prompt-label {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 12px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 700;
            margin-bottom: 12px;
            color: #c7d2fe;
            background: rgba(99,102,241,0.12);
            border: 1px solid rgba(129,140,248,0.16);
        }

        .prompt-text {
            white-space: pre-wrap;
            word-break: break-word;
            font-size: 15px;
            line-height: 1.8;
            margin: 0 0 14px 0;
            color: #f8fafc;
        }

        .copy-prompt-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border: 0;
            border-radius: 12px;
            padding: 10px 14px;
            background: linear-gradient(to right, #2563eb, #7c3aed);
            color: #fff;
            font-weight: 700;
            font-family: 'Kantumruy Pro', sans-serif;
            box-shadow: 0 10px 22px rgba(79,70,229,0.22);
            cursor: pointer;
        }

        .copy-prompt-btn.copied {
            background: linear-gradient(to right, #059669, #10b981);
        }