/* ===================================
   MATURA ROZSZERZONA - WOW REDESIGN v5
   Glassmorphism + Neon Accents
   =================================== */

:root {
    --mr-purple: #8b5cf6;
    --mr-purple-dark: #6d28d9;
    --mr-purple-light: #c4b5fd;
    --mr-green: #34d399;
    --mr-orange: #fbbf24;
    --mr-red: #f87171;
    --mr-gradient: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
    --mr-gradient-green: linear-gradient(135deg, #059669 0%, #10b981 100%);
    --mr-surface: #12122c;
}

/* === Container === */
.lesson-container {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 20px 20px;
}

/* ============================================
   PAGE HEADER - GLASSMORPHISM
   ============================================ */
.lesson-page-header {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #3730a3 100%);
    border-radius: 16px;
    padding: 24px 28px;
    margin-bottom: 22px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.light-mode .lesson-page-header {
    background: linear-gradient(135deg, #4c1d95 0%, #6d28d9 100%);
}
.lesson-page-header::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 30% 50%, rgba(167,139,250,0.2) 0%, transparent 50%);
    pointer-events: none;
}

.lesson-breadcrumb {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 6px;
    font-size: 11px; margin-bottom: 10px;
    color: rgba(255,255,255,0.7);
    position: relative;
}
.lesson-breadcrumb a { color: rgba(255,255,255,0.85); text-decoration: none; transition: color 0.2s; }
.lesson-breadcrumb a:hover { color: white; text-decoration: underline; }
.lesson-breadcrumb span { color: rgba(255,255,255,0.5); }

.lesson-page-header h1 {
    font-size: 23px; font-weight: 800; color: white;
    margin: 0 0 10px; text-transform: uppercase; letter-spacing: 0.5px;
    position: relative;
}
.lesson-page-header .lesson-meta {
    display: flex; justify-content: center; gap: 14px;
    font-size: 12px; color: rgba(255,255,255,0.85); position: relative;
}
.lesson-page-header .lesson-meta span { display: flex; align-items: center; gap: 5px; }
.lesson-page-header .lesson-meta i { color: #a7f3d0; font-size: 11px; }


/* ============================================
   LOGIN NOTICE
   ============================================ */
.login-prompt {
    background: linear-gradient(135deg, #b45309, #d97706);
    border-radius: 12px; padding: 12px 18px;
    margin-top: -15px; margin-bottom: 16px;
    display: flex; align-items: center; justify-content: center; gap: 12px;
}
.login-prompt-icon {
    width: 36px; height: 36px;
    background: rgba(255,255,255,0.2); backdrop-filter: blur(8px);
    border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.login-prompt-icon i { font-size: 16px; color: white; }
.login-prompt-content strong { display: block; color: white; font-size: 13px; margin-bottom: 1px; }
.login-prompt-content span { color: rgba(255,255,255,0.9); font-size: 12px; }
.login-prompt a { color: #fef3c7; font-weight: 700; }

.light-mode .login-prompt { background: linear-gradient(135deg, #fef3c7, #fde68a); }
.light-mode .login-prompt-icon { background: rgba(120,53,15,0.15); }
.light-mode .login-prompt-icon i { color: #92400e; }
.light-mode .login-prompt-content strong { color: #92400e; }
.light-mode .login-prompt-content span { color: #a16207; }
.light-mode .login-prompt a { color: #78350f; }

/* ============================================
   TASK CARD - GLASSMORPHISM
   ============================================ */
.task {
    border-radius: 16px;
    margin-bottom: 26px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    border: 1px solid rgba(167,139,250,0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.task:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}
.light-mode .task { box-shadow: 0 4px 14px rgba(100,60,200,0.10); border-color: #a99cc8; }
.light-mode .task:hover { box-shadow: 0 6px 20px rgba(100,60,200,0.1); }

.task-source {
    background: var(--mr-purple) !important;
    padding: 9px 18px !important;
    font-size: 11px !important; color: #ffffff !important;
    font-weight: 600 !important; letter-spacing: 0.4px;
}

.task-body {
    background: #ffffff !important;
    padding: 22px 26px !important;
}
.task-number {
    font-size: 14px !important; font-weight: 700 !important;
    color: #111827 !important; margin-bottom: 10px;
}
.task-content {
    font-size: 15px !important; line-height: 1.8; color: #1f2937 !important;
}
.task-content .MathJax { color: #111827 !important; }

/* Task Actions */
.task-actions {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 10px 16px; background: var(--bg-section);
    border-bottom: 1px solid var(--border-color);
}
.goto-lesson-btn {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 14px; background: var(--mr-purple);
    color: white; border: none; border-radius: 8px;
    font-size: 12px; font-weight: 600; text-decoration: none; transition: all 0.2s;
}
.goto-lesson-btn:hover { background: #6d28d9; }
.flag-btn {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 14px; background: var(--bg-card);
    border: 1px solid var(--border-color); border-radius: 8px;
    font-size: 12px; font-weight: 600; color: var(--text-muted);
    cursor: pointer; transition: all 0.2s;
}
.flag-btn i { font-size: 14px; }
.flag-btn:hover { border-color: var(--mr-orange); color: var(--mr-orange); }
.flag-btn.flagged { background: var(--mr-orange); border-color: var(--mr-orange); color: white; }

/* ============================================
   SOLUTION BUTTONS - WITH RIPPLE
   ============================================ */
.task-solutions-btns {
    display: flex; padding: 12px 18px; gap: 10px;
    background: var(--bg-section);
}

.solution-btn {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 16px; background: var(--bg-card);
    border: 2px solid var(--border-color); border-radius: 12px;
    cursor: pointer; font-size: 13px; font-weight: 600;
    color: var(--text-main); transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative; overflow: hidden;
}
.solution-btn .btn-icon { font-size: 16px; }
.solution-btn .btn-text { font-size: 13px; }
.solution-btn:hover { border-color: var(--mr-purple); background: rgba(139,92,246,0.06); transform: translateY(-2px); }

/* Ripple effect */
.solution-btn .ripple {
    position: absolute; border-radius: 50%;
    background: rgba(139,92,246,0.25);
    transform: scale(0); animation: rippleAnim 0.6s ease-out;
    pointer-events: none;
}
@keyframes rippleAnim { to { transform: scale(4); opacity: 0; } }

/* Video btn */
.solution-btn.video-btn .btn-icon { color: #ef4444; }
.solution-btn.video-btn:hover { border-color: #ef4444; background: rgba(239,68,68,0.05); }
.solution-btn.video-btn.active { background: #ef4444; color: white; border-color: #ef4444; }
.solution-btn.video-btn.active .btn-icon { color: white; }

/* Written btn */
.solution-btn.written-btn .btn-icon { color: #3b82f6; }
.solution-btn.written-btn:hover { border-color: #3b82f6; background: rgba(59,130,246,0.05); }
.solution-btn.written-btn.active { background: #3b82f6; color: white; border-color: #3b82f6; }
.solution-btn.written-btn.active .btn-icon { color: white; }

/* Answer btn */
.solution-btn.answer-btn .btn-icon { color: var(--mr-green); }
.solution-btn.answer-btn:hover { border-color: var(--mr-green); background: rgba(16,185,129,0.05); }
.solution-btn.answer-btn.active { background: var(--mr-green); color: white; border-color: var(--mr-green); }
.solution-btn.answer-btn.active .btn-icon { color: white; }

/* Solution Content */
.solution-content {
    display: none; padding: 28px 32px;
    background: var(--bg-section);
    animation: expandIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.solution-content.show { display: block; }

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

/* Skeleton loader for video */
.video-skeleton {
    position: relative; padding-bottom: 56.25%; height: 0;
    border-radius: 16px; overflow: hidden;
    background: linear-gradient(110deg, #1a1a2e 8%, #252540 18%, #1a1a2e 33%);
    background-size: 200% 100%;
    animation: skeletonShine 1.5s linear infinite;
}
.light-mode .video-skeleton {
    background: linear-gradient(110deg, #e2e8f0 8%, #f1f5f9 18%, #e2e8f0 33%);
    background-size: 200% 100%;
}
@keyframes skeletonShine { to { background-position-x: -200%; } }
.video-skeleton::after {
    content: '\f04b'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 3rem; color: rgba(139,92,246,0.3);
}

/* Video */
.video-wrapper {
    position: relative; padding-bottom: 56.25%; height: 0;
    border-radius: 16px; overflow: hidden; background: #000;
    box-shadow: 0 15px 50px rgba(0,0,0,0.3);
}
.video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* Solution Steps */
.solution-steps {
    background: var(--bg-card); border-radius: 16px;
    padding: 24px; border: 1px solid var(--border-color);
}
.step { padding: 16px 0; border-bottom: 1px solid var(--border-color); }
.step:last-child { border-bottom: none; padding-bottom: 0; }
.step:first-child { padding-top: 0; }
.step-title {
    font-weight: 700; color: var(--mr-purple);
    margin-bottom: 10px; font-size: 13px;
    text-transform: uppercase; letter-spacing: 1px;
}
.step-content { color: var(--text-main); font-size: 15px; line-height: 1.9; }

/* Answer Box - Reveal Animation */
.answer-box {
    padding: 16px 20px; background: var(--mr-green);
    border-radius: 10px; text-align: center;
    animation: answerReveal 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes answerReveal {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
.answer-label {
    font-size: 9px; text-transform: uppercase; letter-spacing: 1px;
    color: white; margin-bottom: 4px; font-weight: 600;
}
.answer-value { font-size: 16px; font-weight: 700; color: white; }

/* ============================================
   LESSON FOOTER
   ============================================ */
.lesson-footer {
    display: flex; flex-direction: column; gap: 12px;
    margin-top: 32px; padding-top: 24px; border-top: 2px solid var(--border-color);
}
.complete-lesson-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 15px 24px; background: var(--mr-green); color: white;
    border: none; border-radius: 12px; font-weight: 700; font-size: 15px;
    cursor: pointer; transition: all 0.3s;
    box-shadow: 0 2px 10px rgba(16,185,129,0.3);
}
.complete-lesson-btn:hover { background: #059669; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(16,185,129,0.4); }
.complete-lesson-btn.completed { background: #047857; }
.complete-lesson-btn i { font-size: 18px; }

.next-lesson-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 15px 24px; background: var(--mr-purple); color: white;
    border-radius: 12px; text-decoration: none; font-weight: 700; font-size: 14px;
    transition: all 0.3s; box-shadow: 0 2px 10px rgba(124,58,237,0.3);
}
.next-lesson-btn:hover { background: #6d28d9; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(124,58,237,0.4); }
.next-lesson-btn i { font-size: 16px; transition: transform 0.3s; }
.next-lesson-btn:hover i { transform: translateX(5px); }

/* ============================================
   THEORY PAGE
   ============================================ */
.video-section {
    background: var(--bg-card); border-radius: 20px;
    overflow: hidden; margin-bottom: 28px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.1);
}
.video-section-header {
    padding: 20px 28px; background: var(--mr-gradient);
    font-weight: 800; color: white;
    display: flex; align-items: center; gap: 14px; font-size: 16px;
}
.video-section-header i { font-size: 24px; }

.content-section {
    background: var(--bg-card); border-radius: 20px; padding: 32px;
    margin-bottom: 28px; box-shadow: 0 8px 40px rgba(0,0,0,0.1);
    transition: all 0.4s; border: 2px solid transparent;
}
.content-section:hover {
    transform: translateY(-3px); border-color: rgba(124,58,237,0.15);
    box-shadow: 0 15px 50px rgba(124,58,237,0.12);
}
.content-section h2 {
    font-size: 22px; font-weight: 800; color: var(--text-main);
    margin: 0 0 24px; padding-bottom: 16px;
    border-bottom: 4px solid var(--mr-purple); display: inline-block;
}
.content-section p { color: var(--text-main); line-height: 1.9; margin: 0 0 14px; font-size: 16px; }
.content-section ul, .content-section ol { color: var(--text-main); line-height: 2.1; padding-left: 28px; margin: 0; font-size: 16px; }
.content-section li { margin-bottom: 10px; }

.formula-box {
    background: linear-gradient(135deg, rgba(124,58,237,0.1), rgba(139,92,246,0.05));
    border-radius: 16px; padding: 36px; text-align: center;
    margin: 24px 0; border: 2px solid rgba(124,58,237,0.2);
}

.info-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px; margin-top: 24px;
}
.info-card {
    background: var(--bg-section); border-radius: 16px; padding: 24px;
    border: 2px solid var(--border-color); transition: all 0.3s;
}
.info-card:hover { border-color: var(--mr-purple); transform: translateY(-4px); box-shadow: 0 10px 30px rgba(124,58,237,0.15); }
.info-card h3 { font-size: 12px; font-weight: 800; color: var(--mr-purple); margin: 0 0 16px; text-transform: uppercase; letter-spacing: 1.5px; }
.info-card ul { margin: 0; padding-left: 20px; }
.info-card li { font-size: 15px; margin-bottom: 8px; }

.tip-box {
    background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(139,92,246,0.06));
    border-left: 5px solid var(--mr-purple);
    border-radius: 0 16px 16px 0;
    padding: 22px 28px; margin-top: 24px; font-size: 16px;
}
.tip-box strong { color: var(--mr-purple); }

/* ===== SCROLL PROGRESS RAIL ===== */
.mr-scroll-rail {
    position: fixed; right: 0; top: 0; bottom: 0;
    width: 4px; z-index: 90;
    background: rgba(167,139,250,0.06);
    cursor: pointer;
    opacity: 0; transition: opacity 0.4s;
}
.mr-scroll-rail.visible { opacity: 1; }
.light-mode .mr-scroll-rail { background: rgba(124,58,237,0.10); }
.mr-scroll-rail:hover { width: 8px; }
.mr-scroll-rail::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0;
    height: var(--scroll-pct, 0%);
    background: linear-gradient(180deg, #8b5cf6 0%, #c084fc 100%);
    border-radius: 0 0 4px 4px;
    transition: height 0.08s linear;
}
/* Scroll pct tooltip on hover */
.mr-scroll-pct {
    position: fixed; right: 16px;
    background: #111128; color: #c4b5fd;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; font-weight: 600;
    padding: 4px 8px; border-radius: 6px;
    border: 1px solid rgba(167,139,250,0.15);
    pointer-events: none;
    opacity: 0; transition: opacity 0.2s;
    white-space: nowrap;
}
.light-mode .mr-scroll-pct { background: #fff; color: #6d28d9; border-color: #a99cc8; box-shadow: 0 2px 8px rgba(100,60,200,0.1); }
.mr-scroll-rail:hover + .mr-scroll-pct,
.mr-scroll-pct.visible { opacity: 1; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 600px) {
    .lesson-container { padding: 0 12px; }
    .lesson-page-header h1 { font-size: 17px; }
    .lesson-page-header .lesson-meta { flex-wrap: wrap; gap: 8px; }
    .task-source { padding: 8px 14px !important; }
    .task-body { padding: 16px !important; background: #ffffff !important; }
    .task-content { font-size: 14px !important; color: #1f2937 !important; }
    .task-number { color: #111827 !important; }
    .task-actions { flex-wrap: wrap; justify-content: center; }
    .task-solutions-btns { flex-direction: column; gap: 8px; padding: 10px 12px; }
    .solution-btn { padding: 12px 14px; min-height: 48px; }
    .login-prompt { flex-direction: column; text-align: center; padding: 12px; gap: 8px; }
}

/* ============================================
   PREMIUM / LOCKED CONTENT
   ============================================ */
.premium-lesson-banner {
    display: flex; align-items: center; gap: 20px;
    padding: 22px 26px;
    background: linear-gradient(135deg, rgba(139,92,246,0.12), rgba(236,72,153,0.08));
    border: 2px solid rgba(139,92,246,0.25);
    border-radius: 16px; margin-bottom: 24px;
}
.premium-banner-icon {
    width: 52px; height: 52px;
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; color: white; flex-shrink: 0;
    animation: premiumPulse 2s ease-in-out infinite alternate;
}
@keyframes premiumPulse {
    0% { box-shadow: 0 0 0 0 rgba(139,92,246,0.4); }
    100% { box-shadow: 0 0 20px 4px rgba(139,92,246,0.15); }
}
.premium-banner-content { flex: 1; }
.premium-banner-content strong { display: block; font-size: 1.1rem; color: var(--text-main); margin-bottom: 4px; }
.premium-banner-content p { margin: 0 0 12px; color: var(--text-muted); font-size: 0.9rem; }
.premium-banner-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.premium-banner-btns .btn-register {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 20px; background: linear-gradient(135deg, #10b981, #059669);
    color: white; border-radius: 10px; text-decoration: none;
    font-weight: 600; font-size: 0.9rem; transition: all 0.3s;
}
.premium-banner-btns .btn-register:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(16,185,129,0.4); }
.premium-banner-btns .btn-login {
    display: inline-flex; align-items: center;
    padding: 10px 20px; background: transparent;
    color: var(--text-muted); border: 1px solid var(--border-color);
    border-radius: 10px; text-decoration: none; font-size: 0.9rem; transition: all 0.2s;
}
.premium-banner-btns .btn-login:hover { border-color: var(--text-main); color: var(--text-main); }
@media (max-width: 600px) { .premium-lesson-banner { flex-direction: column; text-align: center; } .premium-banner-btns { justify-content: center; } }

/* Locked solution buttons */
.solution-btn.locked-btn { background: rgba(100,100,100,0.15); border-color: rgba(100,100,100,0.25); cursor: pointer; opacity: 0.7; }
.solution-btn.locked-btn .btn-icon { background: rgba(100,100,100,0.3); color: #888; }
.solution-btn.locked-btn:hover { background: rgba(139,92,246,0.12); border-color: rgba(139,92,246,0.35); opacity: 1; }
.solution-btn.locked-btn:hover .btn-icon { background: rgba(139,92,246,0.2); color: var(--mr-purple); }

/* ============================================
   PREMIUM PROMPT MODAL - REDESIGNED
   ============================================ */
.premium-prompt-overlay {
    position: fixed; inset: 0;
    background: rgba(5,5,20,0.88);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999; opacity: 0; visibility: hidden; transition: all 0.3s;
}
.light-mode .premium-prompt-overlay { background: rgba(0,0,0,0.6); }
.premium-prompt-overlay.show { opacity: 1; visibility: visible; }

.premium-prompt {
    background: #111128;
    border: 1px solid rgba(167,139,250,0.15);
    border-radius: 22px; padding: 40px;
    max-width: 420px; width: 90%;
    text-align: center;
    transform: scale(0.9) translateY(16px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 25px 70px rgba(0,0,0,0.5), 0 0 60px -10px rgba(139,92,246,0.15);
    position: relative; overflow: hidden;
}
.light-mode .premium-prompt { background: #fff; border-color: #a99cc8; box-shadow: 0 25px 70px rgba(100,60,200,0.20); }
.premium-prompt-overlay.show .premium-prompt { transform: scale(1) translateY(0); }

/* Animated diamond icon */
.pp-diamond {
    animation: diamondPulse 2s ease-in-out infinite;
}
@keyframes diamondPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(139,92,246,0.4), 0 0 20px rgba(139,92,246,0.2); }
    50% { box-shadow: 0 0 0 12px rgba(139,92,246,0), 0 0 30px rgba(139,92,246,0.3); }
}

.premium-prompt-icon {
    width: 74px; height: 74px;
    background: linear-gradient(135deg, var(--mr-purple), #9333ea, #ec4899);
    background-size: 200% 200%; animation: gradShift 3s ease infinite, diamondPulse 2s ease-in-out infinite;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    margin: 0 auto 22px; font-size: 1.9rem; color: white;
}
@keyframes gradShift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

.premium-prompt h3 { margin: 0 0 12px; font-size: 1.4rem; color: #f1f5f9; font-weight: 700; }
.light-mode .premium-prompt h3 { color: #1e1b4b; }
.pp-subtitle { margin: 0 0 16px !important; color: #8b92a8; font-size: 0.93rem; line-height: 1.7; }
.light-mode .pp-subtitle { color: #52525b; }

/* Social proof */
.pp-social-proof {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px; margin-bottom: 18px;
    background: rgba(167,139,250,0.06); border: 1px solid rgba(167,139,250,0.12);
    border-radius: 20px; font-size: 0.78rem; color: #8b92a8;
}
.light-mode .pp-social-proof { background: rgba(124,58,237,0.06); color: #52525b; border-color: rgba(124,58,237,0.15); }
.pp-social-proof i { color: var(--mr-purple); }

/* Features list */
.pp-features {
    display: flex; flex-direction: column; gap: 8px;
    margin-bottom: 20px; text-align: left; padding: 0 10px;
}
.pp-features span {
    display: flex; align-items: center; gap: 10px;
    font-size: 0.88rem; color: #8b92a8;
}
.light-mode .pp-features span { color: #4b5563; }
.pp-features i { color: var(--mr-green); font-size: 0.75rem; }

.premium-prompt-btns { display: flex; gap: 12px; justify-content: center; }
.premium-prompt-btns .btn {
    padding: 13px 26px; border-radius: 12px;
    font-weight: 700; font-size: 0.95rem; cursor: pointer; border: none; transition: all 0.3s;
}
/* Gradient CTA */
.pp-cta-btn {
    background: linear-gradient(135deg, var(--mr-purple), #9333ea) !important;
    color: white !important; display: inline-flex !important; align-items: center; gap: 8px;
    box-shadow: 0 4px 15px rgba(139,92,246,0.35);
    animation: ctaPulse 2.5s ease-in-out infinite alternate;
}
@keyframes ctaPulse {
    0% { box-shadow: 0 4px 15px rgba(139,92,246,0.35); }
    100% { box-shadow: 0 4px 25px rgba(139,92,246,0.55); }
}
.pp-cta-btn:hover { transform: translateY(-3px) !important; box-shadow: 0 8px 30px rgba(139,92,246,0.5) !important; }

.premium-prompt-btns .btn-primary {
    background: linear-gradient(135deg, var(--mr-purple), #9333ea); color: white;
}
.premium-prompt-btns .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(139,92,246,0.4); }
.premium-prompt-btns .btn-secondary {
    background: transparent; color: #8b92a8; border: 1px solid rgba(167,139,250,0.15);
}
.light-mode .premium-prompt-btns .btn-secondary { color: #52525b; border-color: #a99cc8; }
.premium-prompt-btns .btn-secondary:hover { border-color: rgba(167,139,250,0.3); }

/* Trial badge */
.trial-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(245,158,11,0.1));
    border: 1px solid rgba(245,158,11,0.3); border-radius: 20px;
    font-size: 0.75rem; font-weight: 600; color: #f59e0b;
}
.trial-badge i { font-size: 0.7rem; }

.content-blurred { filter: blur(5px); user-select: none; pointer-events: none; position: relative; }
.content-blurred::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.1); }

/* ============================================
   MOBILE STICKY CTA
   ============================================ */
.mr-mobile-cta {
    display: none; position: fixed; bottom: 0; left: 0; right: 0;
    padding: 12px 16px env(safe-area-inset-bottom, 12px);
    background: rgba(10,10,26,0.96);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(167,139,250,0.1);
    z-index: 999;
    transform: translateY(100%); transition: transform 0.4s ease;
}
.light-mode .mr-mobile-cta { background: rgba(255,255,255,0.96); border-color: #a99cc8; }
.mr-mobile-cta.visible { transform: translateY(0); }
.mr-mobile-cta-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 15px;
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: white; border-radius: 14px; text-decoration: none;
    font-weight: 700; font-size: 1rem;
    box-shadow: 0 0 20px rgba(139,92,246,0.4);
}
@media (max-width: 768px) {
    .mr-mobile-cta { display: block; }
    .mr-back-to-top { bottom: 80px; right: 16px; }
}

/* ============================================
   MICRO-INTERACTIONS & REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}