body {
            background: linear-gradient(135deg, #fff0f4 0%, #fce4ec 35%, #f8f9ff 70%, #fff5f8 100%);
            background-attachment: fixed;
            font-family: 'Inter', sans-serif;
            color: #1e293b;
            min-height: 100vh;
        }

        .glass-panel {
            background: rgba(255, 255, 255, 0.78);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.8);
            box-shadow: 0 10px 30px -5px rgba(248, 96, 134, 0.08), 0 4px 12px -2px rgba(0, 0, 0, 0.03);
        }

        .glass-card {
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.9);
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .glass-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 35px -5px rgba(248, 96, 134, 0.15);
            border-color: rgba(255, 190, 207, 0.8);
        }

        .glass-pink {
            background: rgba(255, 238, 242, 0.85);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 190, 207, 0.6);
        }

        .glass-input {
            background: rgba(255, 255, 255, 0.9);
            border: 1px solid rgba(255, 190, 207, 0.5);
            backdrop-filter: blur(8px);
        }

        .glass-input:focus {
            border-color: #f86086;
            box-shadow: 0 0 0 4px rgba(248, 96, 134, 0.15);
            outline: none;
        }

        /* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        ::-webkit-scrollbar-track {
            background: rgba(255, 238, 242, 0.5);
        }
        ::-webkit-scrollbar-thumb {
            background: rgba(248, 96, 134, 0.3);
            border-radius: 10px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: rgba(248, 96, 134, 0.6);
        }

        .pulse-pink {
            animation: pulse-glow 2s infinite;
        }

        @keyframes pulse-glow {
            0%, 100% { box-shadow: 0 0 15px rgba(248, 96, 134, 0.3); }
            50% { box-shadow: 0 0 25px rgba(248, 96, 134, 0.6); }
        }

        .nav-active {
            background-color: #f86086 !important;
            color: #ffffff !important;
            box-shadow: 0 4px 12px rgba(248, 96, 134, 0.3);
        }

        .markdown-content h1 { font-size: 1.5rem; font-weight: 700; margin-top: 1rem; margin-bottom: 0.5rem; color: #1e293b; }
        .markdown-content h2 { font-size: 1.25rem; font-weight: 700; margin-top: 1rem; margin-bottom: 0.5rem; color: #c2214b; }
        .markdown-content h3 { font-size: 1.1rem; font-weight: 600; margin-top: 0.75rem; margin-bottom: 0.25rem; color: #334155; }
        .markdown-content ul { list-style-type: disc; padding-left: 1.25rem; margin-bottom: 0.75rem; }
        .markdown-content ol { list-style-type: decimal; padding-left: 1.25rem; margin-bottom: 0.75rem; }
        .markdown-content p { margin-bottom: 0.75rem; line-height: 1.6; }
        .markdown-content code { background: #ffeef2; color: #c2214b; padding: 0.2rem 0.4rem; border-radius: 0.25rem; font-size: 0.875em; }
        .markdown-content blockquote { border-left: 4px solid #f86086; padding-left: 0.75rem; color: #475569; font-style: italic; margin-bottom: 0.75rem; }
        .markdown-content table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
        .markdown-content th, .markdown-content td { border: 1px solid #ffdce5; padding: 0.5rem; text-align: left; font-size: 0.875rem; }
        .markdown-content th { background: #fff5f7; color: #a01b3d; }

/* Used on quiz option buttons in review mode instead of an inline style="cursor:default"
   attribute — keeps the CSP's style-src free of 'unsafe-inline' for this case. */
.no-pointer {
    cursor: default;
}