/* Home Page Styles - Clean White Design */

/* Loading Styles */
.home-loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50vh;
}

.loading-spinner {
    text-align: center;
}

.spinner {
    border: 4px solid #e2e8f0;
    border-top: 4px solid #3b82f6;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

.loading-text {
    margin-top: 1rem;
    color: #64748b;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Animation Classes */
.fade-in {
    opacity: 0;
    animation: fadeIn 0.8s ease-in-out forwards;
}

.slide-up {
    opacity: 0;
    transform: translateY(20px);
    animation: slideUp 0.8s ease-out forwards;
}

/* Animation Keyframes */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stagger animation delays for multiple elements */
.fade-in:nth-child(1) { animation-delay: 0.1s; }
.fade-in:nth-child(2) { animation-delay: 0.2s; }
.fade-in:nth-child(3) { animation-delay: 0.3s; }

.slide-up:nth-child(1) { animation-delay: 0.1s; }
.slide-up:nth-child(2) { animation-delay: 0.2s; }
.slide-up:nth-child(3) { animation-delay: 0.3s; }
.slide-up:nth-child(4) { animation-delay: 0.4s; }

/* Student App Container — soft violet wash so white cards pop */
.student-app {
    min-height: 100vh;
    background:
        radial-gradient(1000px 420px at 85% -80px, rgba(217, 70, 239, 0.07), transparent 65%),
        radial-gradient(900px 400px at 8% -60px, rgba(99, 102, 241, 0.09), transparent 60%),
        linear-gradient(180deg, var(--skrol-tint, #f5f2ff) 0%, #faf9ff 55%, #ffffff 100%);
}

/* Hero Section - White Background */
.hero-section {
    background: #ffffff;
    padding: 3rem 0;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e2e8f0;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000000' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E") repeat;
    z-index: 1;
}

/*.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 2;
}*/

.hero-text {
    color: #1e293b;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: #1e293b;
}

.hero-subtitle {
    font-size: 1.25rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    color: #64748b;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Mobile responsive - stack buttons vertically */
@media (max-width: 768px) {
    .hero-actions {
        flex-direction: column !important;
        gap: 1rem !important;
        width: 100%;
        align-items: center !important;
    }
    
    .hero-actions .btn {
        width: 100% !important;
        max-width: 320px !important;
        justify-content: center;
    }
}

/*.hero-image {
    position: relative;
    height: 400px;
}*/

/*.hero-books {
    position: relative;
    width: 100%;
    height: 100%;
}
*/
/*.floating-book {
    position: absolute;
    font-size: 3rem;
    animation: float 6s ease-in-out infinite;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 3;
    color: #3b82f6;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.floating-book:hover {
    transform: scale(1.08) !important;
    color: #2563eb;
}
*/
/*.book-1 { top: 10%; left: 20%; animation-delay: 0s; }
.book-2 { top: 30%; right: 10%; animation-delay: 1s; }
.book-3 { bottom: 30%; left: 10%; animation-delay: 2s; }
.book-4 { bottom: 10%; right: 30%; animation-delay: 3s; }
.book-5 { top: 50%; left: 50%; animation-delay: 4s; transform: translate(-50%, -50%); }
*/
/* Animation Keyframes for Floating Books */
@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(1deg); }
}

/* Features Section - Clean and Professional */
.features-section {
    /*padding: 5rem 0;*/
    background: #f8fafc;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.feature-card {
    text-align: center;
    padding: 1.5rem;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid #e2e8f0;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.12);
    border-color: #cbd5e1;
}

.feature-icon {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin: 0 auto 1.5rem;
    color: white;
}


.feature-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: #1e293b;
}

.feature-description {
    color: #64748b;
    line-height: 1.6;
    font-size: 0.938rem;
}

/* Stats Section - Minimal */
.stats-section {
    padding: 4rem 0;
    background: #ffffff;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
}

.stat-item {
    text-align: center;
    padding: 1.5rem;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #3b82f6;
}

.stat-label {
    font-size: 0.938rem;
    color: #64748b;
    font-weight: 500;
}

/* CTA Section */
.cta-section {
    background: #f8fafc;
    padding: 5rem 0;
}

.cta-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.cta-title {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #1e293b;
}

.cta-subtitle {
    font-size: 1.125rem;
    color: #64748b;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.cta-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

/* ========================================
   PERSONALIZED STUDENT DASHBOARD - WHITE BACKGROUND
   ======================================== */

/* Personalized Hero Section — navy→violet brand banner (echoes the Grammar path units) */
.personalized-hero-section {
    position: relative;
    background: var(--skrol-grad-hero, linear-gradient(135deg, #1e1b4b 0%, #4c1d95 55%, #7c3aed 100%));
    padding: 2.75rem 0 2.5rem;
    border-bottom: none;
    border-radius: 0 0 28px 28px;
    overflow: hidden;
    box-shadow: 0 14px 34px -14px rgba(76, 29, 149, 0.45);
}

/* Soft decorative glows, same spirit as the unit banners */
.personalized-hero-section::before,
.personalized-hero-section::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.personalized-hero-section::before {
    width: 300px;
    height: 300px;
    top: -140px;
    right: -80px;
    background: radial-gradient(circle, rgba(217, 70, 239, 0.35), transparent 70%);
}

.personalized-hero-section::after {
    width: 240px;
    height: 240px;
    bottom: -130px;
    left: -60px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.22), transparent 70%);
}

.personalized-hero-section .container {
    position: relative;
    z-index: 1;
}

.welcome-header {
    text-align: center;
    margin-bottom: 2rem;
}

.welcome-title {
    font-size: 2.25rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    color: #ffffff;
    font-family: var(--font-display, inherit);
}

.welcome-subtitle {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.82);
}

/* Quick Stats Grid - White Background */
.quick-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
}

.quick-stat-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 10px 26px -10px rgba(30, 27, 75, 0.35);
}

.quick-stat-card:hover {
    background: #ffffff;
    transform: translateY(-3px);
    border-color: rgba(217, 70, 239, 0.35);
    box-shadow: 0 16px 32px -10px rgba(30, 27, 75, 0.45);
}

.stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
    color: white;
}

.fire-gradient { background: linear-gradient(135deg, #f97316, #ef4444); }
.blue-gradient { background: linear-gradient(135deg, #3b82f6, #6366f1); }
.purple-gradient { background: linear-gradient(135deg, #8b5cf6, #d946ef); }
.green-gradient { background: linear-gradient(135deg, #10b981, #34d399); }

.stat-content {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1;
    color: #1e293b;
}

.stat-label {
    font-size: 0.875rem;
    margin-top: 0.25rem;
    color: #64748b;
}

/* Continue Reading Section */
.continue-reading-section {
    padding: 3rem 0;
    background: #ffffff;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.section-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
}

.books-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.book-progress-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 16px -4px rgba(76, 29, 149, 0.10);
    transition: all 0.3s ease;
    border: 1px solid rgba(139, 92, 246, 0.10);
}

.book-progress-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--skrol-shadow, 0 8px 24px -6px rgba(109, 40, 217, 0.18));
    border-color: rgba(139, 92, 246, 0.35);
}

.book-cover {
    position: relative;
    height: 240px;
    overflow: hidden;
    background: #f1f5f9;
}

.book-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.progress-overlay {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.75rem;
}

.progress-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(30, 41, 59, 0.85);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 0.875rem;
}

.book-info {
    padding: 1.5rem;
}

.book-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #1e293b;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.book-author {
    font-size: 0.875rem;
    color: #64748b;
    margin-bottom: 1rem;
}

.progress-bar-wrapper {
    margin-bottom: 1rem;
}

.progress-bar {
    height: 6px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.progress-fill {
    height: 100%;
    background: #3b82f6;
    transition: width 0.3s ease;
}

.progress-text {
    font-size: 0.75rem;
    color: #64748b;
}

.book-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.last-read {
    font-size: 0.75rem;
    color: #94a3b8;
}

/* Vocabulary Reminder Section */
.vocab-reminder-section {
    padding: 2rem 0;
    background: #f8fafc;
}

.vocab-reminder-card {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    border-radius: 12px;
    padding: 2rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    color: white;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.vocab-reminder-icon {
    font-size: 3.5rem;
    flex-shrink: 0;
    opacity: 0.95;
}

.vocab-reminder-content {
    flex-grow: 1;
}

.vocab-reminder-content h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.vocab-reminder-content p {
    opacity: 0.95;
    font-size: 0.938rem;
}

/* Recent Activity Section */
.recent-activity-section {
    padding: 3rem 0;
    background: #ffffff;
}

.activity-timeline {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}

.activity-timeline::before {
    content: '';
    position: absolute;
    left: 28px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e2e8f0;
}

.activity-item {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    position: relative;
}

.activity-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #3b82f6;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    z-index: 2;
}

.activity-content {
    flex-grow: 1;
    background: #f8fafc;
    padding: 1.25rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.activity-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: #1e293b;
}

.activity-description {
    color: #64748b;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.activity-time {
    font-size: 0.75rem;
    color: #94a3b8;
}

/* ========================================
   VOCABULARY LEARNING SECTION - CLEAN WHITE BACKGROUND
   ======================================== */

.vocabulary-section {
    padding: 5rem 0;
    background: #ffffff !important;
    position: relative;
    overflow: hidden;
    border-top: 1px solid #e2e8f0;
}

/* Remove pattern overlay for pure white background */
.vocabulary-section::before {
    display: none !important;
    background: none !important;
    content: none !important;
}

/* Section titles and subtitles in black */
.vocabulary-section .section-title {
    color: #000000 !important;
    font-weight: 600;
}

.vocabulary-section .section-subtitle {
    color: #000000 !important;
    font-size: 1.125rem;
}

.vocabulary-quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 3rem;
}

.vocab-action-card {
    background: #ffffff !important;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    text-decoration: none;
    color: #1e293b;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.vocab-action-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
    color: #1e293b;
    border-color: #cbd5e1;
}

.vocab-action-card.highlight {
    border: 2px solid #3b82f6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.vocab-action-card.highlight:hover {
    border-color: #2563eb;
    box-shadow: 0 12px 32px rgba(59, 130, 246, 0.3);
}

.vocab-icon {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 1.875rem;
    color: white;
}

/* Vocabulary action card text in black */
.vocab-action-card h3 {
    font-size: 1.375rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: #000000 !important;
}

.vocab-action-card p {
    color: #000000 !important;
    font-size: 0.938rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.action-arrow {
    display: inline-block;
    font-size: 1.25rem;
    font-weight: 600;
    color: #3b82f6;
    transition: transform 0.3s;
}

.vocab-action-card:hover .action-arrow {
    transform: translateX(4px);
}

.vocabulary-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
}

.vocab-feature {
    background: #f8fafc !important;
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #1e293b;
    font-weight: 500;
    border: 1px solid #e2e8f0;
    transition: all 0.3s;
    font-size: 0.938rem;
}

.vocab-feature:hover {
    background: #f1f5f9;
    transform: translateX(4px);
    border-color: #cbd5e1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.vocab-feature i {
    font-size: 1.375rem;
}

/* Ensure text color is black in vocabulary features */
.vocabulary-features .vocab-feature span {
    color: #000000 !important;
}

/* Animation for vocabulary cards */
@keyframes float-up-professional {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.vocab-action-card {
    animation: float-up-professional 0.5s ease-out forwards;
}

.vocab-action-card:nth-child(1) {
    animation-delay: 0.1s;
}

.vocab-action-card:nth-child(2) {
    animation-delay: 0.2s;
}

.vocab-action-card:nth-child(3) {
    animation-delay: 0.3s;
}

/* ========================================
   VOCABULARY PAGE - COMPLETE STYLES WITH CLEAN WHITE DESIGN
   ======================================== */

/* Main Wrapper — soft violet wash, matching the dashboard */
.vocabulary-wrapper {
    min-height: 100vh;
    background: linear-gradient(180deg, var(--skrol-tint, #f5f2ff) 0%, #ffffff 60%) !important;
    padding-bottom: 3rem;
}

/* Hero Header — brand navy→violet banner (matches the dashboard hero) */
.hero-header {
    position: relative;
    background: var(--skrol-grad-hero, linear-gradient(135deg, #1e1b4b 0%, #4c1d95 55%, #7c3aed 100%)) !important;
    padding: 2.5rem 2rem 3.5rem;
    color: #ffffff !important;
    box-shadow: 0 14px 34px -14px rgba(76, 29, 149, 0.45);
    border-bottom: none;
    border-radius: 0 0 28px 28px;
    overflow: hidden;
}

.hero-header::before {
    content: '';
    position: absolute;
    width: 280px;
    height: 280px;
    top: -130px;
    right: -70px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(217, 70, 239, 0.35), transparent 70%);
    pointer-events: none;
}

.hero-header > * {
    position: relative;
    z-index: 1;
}

.hero-title-section {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.icon-wrapper {
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.14) !important;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #ffffff !important;
    border: 2px solid rgba(255, 255, 255, 0.22);
}

/* Hero action buttons sit on the dark gradient now */
.hero-header .btn-modern-outline {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #ffffff !important;
    border: 2px solid rgba(255, 255, 255, 0.45) !important;
}

.hero-header .btn-modern-outline:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
}

.hero-header .btn-hero-primary {
    background: #ffffff !important;
    color: var(--skrol-violet-deep, #5b21b6) !important;
    box-shadow: 0 4px 0 rgba(30, 27, 75, 0.35);
}

.hero-header .btn-hero-primary:hover {
    background: #f5f2ff !important;
    transform: translateY(-2px);
}

.hero-header .btn-hero-primary:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 rgba(30, 27, 75, 0.35);
}

.hero-header .btn-hero-advanced {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: rgba(255, 255, 255, 0.85);
}

.hero-header .btn-hero-advanced:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.6);
    color: #ffffff;
}

.vocabulary-content {
    max-width: 1400px;
    /*margin: 2rem auto 0 !important;*/
    padding: 0 2rem;
}

/* Modern Stats Cards */
.stat-card-modern {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: 2rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    box-shadow: var(--shadow-lg);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

.stat-card-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--skrol-grad-accent, linear-gradient(135deg, #d946ef, #8b5cf6)) !important;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.stat-card-modern:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.stat-card-modern:hover::before {
    transform: scaleX(1);
}

.stat-icon-modern {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: white;
    flex-shrink: 0;
}

/* Solid color backgrounds using centralized variables */
.yellow-gradient {
    background: var(--warning-color) !important;
}

.stat-details {
    flex: 1;
}

.stat-value-modern {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-primary) !important;
    line-height: 1;
    letter-spacing: -0.02em;
}

.stat-label-modern {
    font-size: 0.875rem;
    color: var(--text-secondary) !important;
    margin-top: 0.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-trend {
    color: var(--text-muted);
    font-size: 1.25rem;
}

/* Modern Filter Bar */
.filter-bar-modern {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    border: 1px solid var(--border-color);
}

.filter-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    color: var(--text-primary) !important;
    font-size: 1rem;
}

.filter-label i {
    color: var(--primary-color);
}

.filter-options {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    flex: 1;
}

.filter-chip {
    background: var(--bg-tertiary);
    border: 2px solid transparent;
    border-radius: 100px;
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-chip:hover {
    background: var(--bg-secondary);
    color: var(--text-primary) !important;
}

.filter-chip.active {
    background: var(--skrol-grad-primary, linear-gradient(135deg, #8b5cf6, #6366f1));
    color: white;
    border-color: var(--skrol-violet, #8b5cf6);
}

.filter-chip i {
    font-size: 0.75rem;
}

/* Modern Buttons */
.btn-modern {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1.75rem;
    border-radius: 100px;
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    box-shadow: var(--shadow-sm);
}

.btn-modern:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-modern:active {
    transform: translateY(0);
}

.btn-modern-primary {
    background: var(--skrol-grad-primary, linear-gradient(135deg, #8b5cf6, #6366f1)) !important;
    color: white !important;
}

.btn-modern-primary:hover {
    background: linear-gradient(135deg, #7c3aed, #4f46e5) !important;
}

.btn-modern-outline {
    background: transparent !important;
    color: var(--primary-color) !important;
    border: 2px solid var(--primary-color) !important;
}

.btn-modern-outline:hover {
    background: var(--bg-secondary) !important;
}

.btn-modern-danger {
    background: var(--danger-color);
    color: white;
}

.btn-modern-danger:hover {
    background: #dc2626;
}

.btn-icon-modern {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-icon-modern:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary) !important;
}

.delete-btn:hover {
    background: #fee2e2;
    color: var(--danger-color);
}

/* Modern Words Grid */
.words-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 1.5rem;
}

.word-card-modern {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    box-shadow: var(--shadow-md);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--border-color);
}

.word-card-modern:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-color);
}

.word-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    gap: 1rem;
}

.word-title-section {
    flex: 1;
}

.word-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary) !important;
    margin: 0 0 0.75rem 0;
    letter-spacing: -0.01em;
}

.word-meta {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pos-badge {
    background: var(--primary-color) !important;
    color: white;
    padding: 0.375rem 0.875rem;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.lang-badge {
    background: var(--bg-tertiary);
    color: var(--text-primary) !important;
    padding: 0.375rem 0.875rem;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 700;
}

.word-definition-modern {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 1rem;
    font-size: 0.9375rem;
}

.word-example-modern {
    background: var(--bg-secondary);
    border-left: 3px solid var(--primary-color);
    padding: 1rem 1.25rem;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin-bottom: 1.25rem;
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.word-example-modern i {
    color: var(--primary-color);
    font-size: 0.875rem;
    margin-top: 0.25rem;
    flex-shrink: 0;
}

.word-example-modern span {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    font-style: italic;
    line-height: 1.6;
}

.word-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1.25rem;
    border-top: 2px solid var(--bg-tertiary);
    gap: 1rem;
}

.progress-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.stage-badge {
    padding: 0.375rem 0.875rem;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    width: fit-content;
}

.stage-new {
    background: #dbeafe;
    color: #1e40af;
}

.stage-learning {
    background: #fef3c7;
    color: #92400e;
}

.stage-review {
    background: #ddd6fe;
    color: #5b21b6;
}

.stage-mastered {
    background: #d1fae5;
    color: #065f46;
}

.review-info {
    font-size: 0.8125rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.word-metrics {
    display: flex;
    gap: 1rem;
}

.metric-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.metric-item.success {
    color: var(--success-color);
}

/* Loading State */
.loading-state-modern {
    text-align: center;
    padding: 6rem 2rem;
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
}

.loader-modern {
    width: 48px;
    height: 48px;
    border: 4px solid var(--bg-tertiary);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1.5rem;
}

.loading-state-modern p {
    color: var(--text-secondary);
    font-weight: 500;
}

/* Empty State */
.empty-state-modern {
    text-align: center;
    padding: 6rem 2rem;
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
}

.empty-icon {
    width: 96px;
    height: 96px;
    margin: 0 auto 2rem;
    background: var(--bg-secondary) !important;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--primary-color) !important;
    border: 2px solid var(--border-color);
}

.empty-state-modern h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary) !important;
    margin-bottom: 0.5rem;
}

.empty-state-modern p {
    color: var(--text-secondary);
    margin-bottom: 2rem;
    font-size: 1.0625rem;
}

/* Alert */
.alert-modern {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: var(--shadow-md);
    border: 1px solid;
}

.alert-error {
    border-color: #fecaca;
    color: var(--danger-color);
    background: #fef2f2 !important;
}

/* Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal-overlay.show {
    opacity: 1;
    visibility: visible;
}

.modal-modern {
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    max-width: 480px;
    width: 90%;
    box-shadow: var(--shadow-xl);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.modal-overlay.show .modal-modern {
    transform: scale(1);
}

.modal-header-modern {
    padding: 2rem 2rem 1rem;
    text-align: center;
}

.modal-icon-warning {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    background: #fef3c7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--warning-color);
}

.modal-header-modern h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary) !important;
    margin: 0;
}

.modal-body-modern {
    padding: 0 2rem 2rem;
    text-align: center;
}

.modal-body-modern p {
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    line-height: 1.6;
}

.modal-body-modern strong {
    color: var(--text-primary) !important;
}

.warning-text {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.modal-footer-modern {
    padding: 1.5rem 2rem 2rem;
    display: flex;
    gap: 1rem;
    justify-content: center;
}

/* Toast */
.toast-modern {
    position: fixed;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    background: white;
    padding: 1rem 1.5rem;
    border-radius: 100px;
    box-shadow: var(--shadow-xl);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 320px;
    border: 1px solid var(--border-color);
    transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.toast-modern.show {
    bottom: 2rem;
}

.toast-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.toast-icon .fa-check-circle {
    color: var(--success-color);
}

.toast-icon .fa-exclamation-circle {
    color: var(--danger-color);
}

.toast-message {
    font-weight: 600;
    color: var(--text-primary) !important;
    font-size: 0.9375rem;
}

.spinner-small {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* ========================================
   CONFIRMATION MODAL FOR DELETING WORDS
   ======================================== */

.confirmation-modal {
    background: white;
    border-radius: 12px;
    max-width: 450px;
    width: 90%;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: scale(0.8) translateY(20px);
    transition: transform 0.3s ease;
}

.definition-overlay.show .confirmation-modal {
    transform: scale(1) translateY(0);
}

.confirmation-header {
    padding: 24px 24px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #e5e7eb;
}

.confirmation-header i {
    font-size: 2rem;
}

.confirmation-header h4 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1f2937;
}

.confirmation-body {
    padding: 24px;
}

.confirmation-body p {
    margin: 0 0 12px;
    color: #374151;
    line-height: 1.6;
}

.confirmation-body p:last-child {
    margin-bottom: 0;
}

.confirmation-actions {
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    background: #f9fafb;
}

.confirmation-actions .btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.confirmation-actions .btn-secondary {
    background: white;
    color: #374151;
    border: 1px solid #d1d5db;
}

.confirmation-actions .btn-secondary:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.confirmation-actions .btn-danger {
    background: #dc2626;
    color: white;
}

.confirmation-actions .btn-danger:hover:not(:disabled) {
    background: #b91c1c;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.confirmation-actions .btn-danger:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 768px) {
    .hero-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }
    
    .hero-title { font-size: 2.5rem; }
    .hero-actions { justify-content: center; }
    .hero-image { height: 250px; }
    .floating-book { font-size: 2rem; }
    
    .welcome-title { font-size: 1.875rem; }
    
    .quick-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .quick-stat-card {
        flex-direction: column;
        text-align: center;
        padding: 1.25rem;
    }
    
    .stat-icon {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }
    
    .books-grid { grid-template-columns: 1fr; }
    
    .vocab-reminder-card {
        flex-direction: column;
        text-align: center;
        padding: 1.75rem;
    }
    
    .vocab-reminder-icon { font-size: 3rem; }
    
    .activity-timeline::before { left: 20px; }
    .activity-icon {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    /* Vocabulary section responsive */
    .vocabulary-section {
        padding: 3rem 0;
    }

    .vocabulary-quick-actions {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .vocabulary-features {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .vocab-action-card {
        padding: 1.5rem;
    }

    .vocab-icon {
        width: 64px;
        height: 64px;
        font-size: 1.5rem;
    }

    /* Vocabulary page responsive */
    .hero-header {
        padding: 2rem 1rem;
    }

    .vocabulary-content {
        padding: 0 1rem;
    }

    .stats-section {
        grid-template-columns: 1fr;
    }

    .words-grid-modern {
        grid-template-columns: 1fr;
    }

    .filter-bar-modern {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-options {
        flex-direction: column;
    }

    .filter-chip {
        justify-content: center;
    }

    /* Confirmation modal responsive */
    .confirmation-modal {
        width: 95%;
    }
    
    .confirmation-actions {
        flex-direction: column-reverse;
    }
    
    .confirmation-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .hero-title { font-size: 2rem; }
    .hero-subtitle { font-size: 1rem; }
    
    .quick-stats-grid { grid-template-columns: 1fr; }
    
    .section-header {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
    
    .btn-lg {
        width: 100%;
        max-width: 280px;
    }
}

/* ========================================
   QUICKSTATS CARDS - MOBILE OPTIMIZATION
   Single Row Horizontal Scrollable Layout
   ======================================== */

/* Mobile devices (tablets and below) */
@media (max-width: 768px) {
    /* Horizontal scrollable row for mobile */
    .quick-stats-grid {
        display: flex !important;
        flex-direction: row !important;
        gap: 0.75rem !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding-bottom: 0.5rem !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        /* Hide scrollbar completely for cleaner look */
        scrollbar-width: none !important; /* Firefox */
        -ms-overflow-style: none !important; /* IE/Edge */
    }
    
    /* Hide scrollbar for Webkit browsers (Chrome, Safari, Edge) */
    .quick-stats-grid::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
    
    /* Compact card design for mobile - Fixed width */
    .quick-stat-card {
        flex: 0 0 auto !important;
        width: 140px !important;
        min-width: 140px !important;
        flex-direction: column !important;
        text-align: center !important;
        padding: 0.875rem 0.75rem !important;
        gap: 0.625rem !important;
        scroll-snap-align: start !important;
    }
    
    /* Compact icon for mobile */
    .quick-stat-card .stat-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 1rem !important;
        margin: 0 auto !important;
    }
    
    /* Adjust text sizes for mobile readability */
    .quick-stat-card .stat-value {
        font-size: 1.5rem !important;
        line-height: 1.2 !important;
    }
    
    .quick-stat-card .stat-label {
        font-size: 0.75rem !important;
        line-height: 1.3 !important;
        white-space: normal !important;
        word-wrap: break-word !important;
    }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
    /* Even more compact for very small screens */
    .quick-stats-grid { 
        gap: 0.625rem !important;
    }
    
    .quick-stat-card {
        width: 130px !important;
        min-width: 130px !important;
        padding: 0.75rem 0.625rem !important;
        gap: 0.5rem !important;
    }
    
    .quick-stat-card .stat-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.9375rem !important;
    }
    
    .quick-stat-card .stat-value {
        font-size: 1.375rem !important;
    }
    
    .quick-stat-card .stat-label {
        font-size: 0.6875rem !important;
    }
}

/* Ensure proper spacing on PersonalizedHeroSection */
@media (max-width: 768px) {
    .personalized-hero-section {
        padding: 2rem 0 2rem !important;
    }
    
    .welcome-header {
        margin-bottom: 1.25rem !important;
    }
    
    .welcome-title {
        font-size: 1.625rem !important;
    }
    
    .welcome-subtitle {
        font-size: 1rem !important;
    }
}

@media (max-width: 480px) {
    .personalized-hero-section {
        padding: 1.5rem 0 1.5rem !important;
    }
    
    .welcome-title {
        font-size: 1.5rem !important;
    }
    
    .welcome-subtitle {
        font-size: 0.9375rem !important;
    }
}

/* ========================================
   CONTINUE LESSONS SECTION
   ======================================== */

.continue-lessons-section {
    padding: 3rem 0;
    background: var(--bg-primary, #ffffff);
}

.continue-lessons-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.continue-lessons-section .section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary, #1a1a2e);
    display: flex;
    align-items: center;
    margin: 0;
}

.continue-lessons-section .section-title i {
    color: var(--skrol-violet, #8b5cf6);
}

.continue-lessons-section .btn-link {
    color: var(--primary-color, #4f46e5);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.continue-lessons-section .btn-link:hover {
    color: var(--primary-hover, #4338ca);
}

.lessons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.lesson-progress-card {
    background: var(--card-bg, #ffffff);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(139, 92, 246, 0.10);
    box-shadow: 0 4px 16px -4px rgba(76, 29, 149, 0.10);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
}

.lesson-progress-card:hover {
    transform: translateY(-4px);
    border-color: rgba(139, 92, 246, 0.35);
    box-shadow: var(--skrol-shadow, 0 8px 24px -6px rgba(109, 40, 217, 0.18));
}

.lesson-thumbnail {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: #1a1a2e;
}

.lesson-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.lesson-progress-card:hover .lesson-thumbnail img {
    transform: scale(1.05);
}

.thumbnail-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1e1b4b, #4c1d95);
    color: #c4b5fd;
    font-size: 3rem;
}

.continue-lessons-section .progress-overlay {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
}

.progress-badge {
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.play-overlay i {
    font-size: 3.5rem;
    color: white;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.lesson-progress-card:hover .play-overlay {
    opacity: 1;
}

.lesson-info {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.lesson-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a2e);
    margin-bottom: 0.25rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lesson-level {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--skrol-violet-dark, #7c3aed);
    background: var(--skrol-tint-strong, #ede9fe);
    padding: 0.125rem 0.6rem;
    border-radius: 999px;
    display: inline-block;
    width: fit-content;
    margin-bottom: 0.75rem;
}

.lesson-info .progress-bar-wrapper {
    margin-bottom: 0.75rem;
}

.lesson-info .progress-bar {
    height: 6px;
    background: var(--border-color, #e5e7eb);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.25rem;
}

.lesson-info .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #8b5cf6, #d946ef);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.lesson-info .progress-text {
    font-size: 0.75rem;
    color: var(--text-secondary, #6c757d);
}

.lesson-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    gap: 0.5rem;
}

.lesson-actions .btn-primary {
    background: var(--skrol-grad-primary, linear-gradient(135deg, #8b5cf6, #6366f1));
    border: none;
    padding: 0.375rem 0.9rem;
    font-size: 0.875rem;
    font-weight: 700;
    border-radius: 999px;
    box-shadow: 0 3px 0 var(--skrol-violet-deep, #5b21b6);
    transition: all 0.15s;
}

.lesson-actions .btn-primary:hover {
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    transform: translateY(-1px);
    box-shadow: 0 4px 0 var(--skrol-violet-deep, #5b21b6);
}

.lesson-actions .btn-primary:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--skrol-violet-deep, #5b21b6);
}

.current-step {
    font-size: 0.75rem;
    color: var(--text-secondary, #6c757d);
    display: flex;
    align-items: center;
}

.lesson-progress-card.slide-up {
    animation: slideUp 0.5s ease forwards;
    opacity: 0;
}

.lesson-progress-card.slide-up:nth-child(1) { animation-delay: 0.1s; }
.lesson-progress-card.slide-up:nth-child(2) { animation-delay: 0.15s; }
.lesson-progress-card.slide-up:nth-child(3) { animation-delay: 0.2s; }
.lesson-progress-card.slide-up:nth-child(4) { animation-delay: 0.25s; }
.lesson-progress-card.slide-up:nth-child(5) { animation-delay: 0.3s; }
.lesson-progress-card.slide-up:nth-child(6) { animation-delay: 0.35s; }

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .continue-lessons-section {
        padding: 2rem 1rem;
    }

    .lessons-grid {
        grid-template-columns: 1fr;
    }

    .continue-lessons-section .section-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ===== Getting Started (first-run activation card) ===== */
.getting-started-card {
    max-width: 1100px;
    margin: 1rem auto 2rem;
    padding: 0 1rem;
}

.gs-hero {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: var(--skrol-grad-hero, linear-gradient(135deg, #1e1b4b 0%, #4c1d95 55%, #7c3aed 100%));
    color: #fff;
    border-radius: 18px;
    padding: 1.75rem;
    box-shadow: 0 10px 30px rgba(76, 29, 149, 0.28);
    flex-wrap: wrap;
}

.gs-hero-icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}

.gs-hero-text {
    flex: 1 1 240px;
}

.gs-title {
    margin: 0 0 0.25rem;
    font-size: 1.5rem;
    font-weight: 800;
}

.gs-subtitle {
    margin: 0;
    opacity: 0.92;
    font-size: 0.98rem;
}

.gs-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    color: #4c1d95;
    border: none;
    border-radius: 999px;
    padding: 0.8rem 1.5rem;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}

.gs-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.gs-checklist {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

.gs-step {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: 14px;
    padding: 1rem 1.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.gs-step-check {
    font-size: 1.5rem;
    color: #c7ccd6;
    line-height: 1;
}

.gs-step.done .gs-step-check {
    color: #43c463;
}

.gs-step.done {
    border-color: #c6f0d2;
    background: #f5fcf7;
}

.gs-step-label {
    flex: 1;
    font-weight: 600;
    color: #1f2937;
}

.gs-step.done .gs-step-label {
    color: #4b5563;
    text-decoration: line-through;
    text-decoration-color: #9fdbb0;
}

.gs-step-progress {
    font-size: 0.85rem;
    font-weight: 700;
    color: #6b7280;
    background: #f3f4f6;
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
}

@media (max-width: 768px) {
    .gs-hero {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .gs-cta {
        width: 100%;
        justify-content: center;
    }
}

/* ===== Nav streak badge ===== */
.nav-streak-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: linear-gradient(135deg, #ff6b6b, #ff8e53);
    color: #fff;
    border-radius: 999px;
    padding: 0.3rem 0.7rem;
    font-weight: 800;
    font-size: 0.9rem;
    margin-left: 0.6rem;
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.35);
    white-space: nowrap;
}

.nav-streak-badge i {
    font-size: 0.95rem;
}

/* ===== Daily goal card (ring + presets) ===== */
.daily-goal-card {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto 1.5rem;
    background: #fff;
    border: 1px solid var(--skrol-tint-border, #e2dbfa);
    border-radius: 18px;
    padding: 1.5rem 1.75rem;
    box-shadow: 0 4px 16px -4px rgba(76, 29, 149, 0.10);
}

.daily-goal-card.goal-met {
    background: linear-gradient(135deg, #f0fff6, #ffffff);
    border: 1px solid #c6f0d2;
}

.dg-ring {
    --dg-pct: 0;
    flex-shrink: 0;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: conic-gradient(var(--skrol-violet, #8b5cf6) calc(var(--dg-pct) * 1%), var(--skrol-tint-strong, #ede9fe) 0);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.4s ease;
}

.daily-goal-card.goal-met .dg-ring {
    background: conic-gradient(#43c463 calc(var(--dg-pct) * 1%), #eef0f4 0);
}

.dg-ring-inner {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.dg-ring-value {
    font-size: 1.25rem;
    font-weight: 800;
    color: #1f2937;
}

.dg-ring-sep {
    color: #c7ccd6;
    margin: 0 1px;
}

.dg-ring-check {
    font-size: 2rem;
    color: #43c463;
}

.dg-body {
    flex: 1;
    min-width: 0;
}

.dg-title {
    margin: 0 0 0.25rem;
    font-size: 1.15rem;
    font-weight: 800;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.dg-title i {
    color: var(--skrol-fuchsia, #d946ef);
}

.dg-status {
    margin: 0 0 0.75rem;
    color: #6b7280;
    font-size: 0.95rem;
}

.dg-status-done {
    color: #2fa45a;
    font-weight: 700;
}

.dg-presets {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.dg-preset {
    min-width: 44px;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    border: 1.5px solid #e5e7eb;
    background: #fff;
    color: #4b5563;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.dg-preset:hover {
    border-color: var(--skrol-violet, #8b5cf6);
    color: var(--skrol-violet-dark, #7c3aed);
}

.dg-preset.active {
    background: var(--skrol-grad-primary, linear-gradient(135deg, #8b5cf6, #6366f1));
    border-color: var(--skrol-violet, #8b5cf6);
    color: #fff;
    box-shadow: 0 2px 0 var(--skrol-violet-deep, #5b21b6);
}

@media (max-width: 768px) {
    .daily-goal-card {
        padding: 1.25rem;
        gap: 1rem;
    }

    .dg-ring {
        width: 78px;
        height: 78px;
    }

    .dg-ring-inner {
        width: 60px;
        height: 60px;
    }
}

/* ===== Level / XP card ===== */
.level-card {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(135deg, #fffbeb, #ffffff 45%);
    border: 1px solid #fde9c0;
    border-radius: 18px;
    padding: 1.5rem 1.75rem;
    box-shadow: 0 4px 16px -4px rgba(180, 83, 9, 0.10);
}

.level-ring {
    --lvl-pct: 0;
    flex-shrink: 0;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: conic-gradient(var(--skrol-gold, #f59e0b) calc(var(--lvl-pct) * 1%), #f6edda 0);
    display: flex;
    align-items: center;
    justify-content: center;
}

.level-ring-inner {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fff3d6, #ffffff);
    display: flex;
    align-items: center;
    justify-content: center;
}

.level-ring-num {
    font-size: 1.6rem;
    font-weight: 900;
    color: #d98a00;
}

.level-body {
    flex: 1;
    min-width: 0;
}

.level-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.level-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.level-title i {
    color: #f5a623;
}

.level-xp-total {
    font-weight: 800;
    color: #6b7280;
    font-size: 0.95rem;
    white-space: nowrap;
}

.level-bar {
    height: 12px;
    background: #eef0f4;
    border-radius: 999px;
    overflow: hidden;
}

.level-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
    border-radius: 999px;
    transition: width 0.5s ease;
}

.level-hint {
    margin: 0.5rem 0 0;
    color: #6b7280;
    font-size: 0.9rem;
}

/* ===== Achievements ===== */
.achievements-section {
    max-width: 1100px;
    margin: 0 auto 2rem;
    padding: 0 0.25rem;
}

.ach-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.ach-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 800;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ach-title i {
    color: #f5a623;
}

.ach-count {
    font-weight: 700;
    color: #6b7280;
    font-size: 0.9rem;
}

.ach-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}

.ach-badge {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: #fff;
    border: 1px solid var(--skrol-tint-border, #e2dbfa);
    border-radius: 14px;
    padding: 1rem;
    box-shadow: 0 2px 10px rgba(76, 29, 149, 0.06);
    transition: all 0.2s ease;
}

.ach-badge:hover {
    transform: translateY(-2px);
}

.ach-badge.locked {
    opacity: 0.6;
}

.ach-badge.earned {
    border-color: #fcd34d;
    background: linear-gradient(135deg, #fffaf0, #ffffff);
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.16);
}

.ach-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #fff;
    background: linear-gradient(135deg, #c7ccd6, #aab0bd);
}

.ach-badge.earned .ach-icon {
    background: var(--skrol-grad-gold, linear-gradient(135deg, #fbbf24, #f59e0b));
    box-shadow: 0 3px 10px rgba(245, 158, 11, 0.4);
}

.ach-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ach-name {
    font-weight: 800;
    color: #1f2937;
    font-size: 0.98rem;
}

.ach-desc {
    font-size: 0.82rem;
    color: #6b7280;
}

.ach-progress {
    font-size: 0.78rem;
    font-weight: 700;
    color: #9aa1ad;
    margin-top: 0.15rem;
}

.ach-check {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    color: #43c463;
    font-size: 1.1rem;
}

@media (max-width: 768px) {
    .level-card {
        padding: 1.25rem;
        gap: 1rem;
    }

    .level-ring {
        width: 72px;
        height: 72px;
    }

    .level-ring-inner {
        width: 56px;
        height: 56px;
    }

    .ach-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Daily reminder banner ===== */
.reminder-banner {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    max-width: 1100px;
    margin: 0 auto 1.25rem;
    padding: 0.9rem 1.1rem;
    border-radius: 14px;
    border: 1px solid transparent;
}

.reminder-banner.reminder-warn {
    background: #fff6ed;
    border-color: #ffd9ad;
}

.reminder-banner.reminder-info {
    background: var(--skrol-tint, #f5f2ff);
    border-color: var(--skrol-tint-border, #e2dbfa);
}

.reminder-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #fff;
}

.reminder-warn .reminder-icon {
    background: linear-gradient(135deg, #ff6b6b, #ff8e53);
}

.reminder-info .reminder-icon {
    background: var(--skrol-grad-primary, linear-gradient(135deg, #8b5cf6, #6366f1));
}

.reminder-message {
    flex: 1;
    margin: 0;
    font-weight: 600;
    color: #1f2937;
    font-size: 0.95rem;
}

.reminder-cta {
    flex-shrink: 0;
    background: var(--skrol-grad-primary, linear-gradient(135deg, #8b5cf6, #6366f1));
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 0.5rem 1.1rem;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow: 0 3px 0 var(--skrol-violet-deep, #5b21b6);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.reminder-cta:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--skrol-violet-deep, #5b21b6);
}

.reminder-cta:hover {
    transform: translateY(-1px);
}

.reminder-dismiss {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: #9aa1ad;
    cursor: pointer;
    font-size: 0.95rem;
    padding: 0.25rem;
}

.reminder-dismiss:hover {
    color: #6b7280;
}

@media (max-width: 768px) {
    .reminder-banner {
        flex-wrap: wrap;
    }

    .reminder-message {
        flex: 1 1 100%;
        order: 3;
    }
}

/* ===== AI Tutor promo card ===== */
.ai-promo {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    max-width: 1100px;
    margin: 0 auto 1.5rem;
    padding: 1.5rem 1.75rem;
    border-radius: 18px;
    background: linear-gradient(135deg, #1e1b4b, #312e81, #4f46e5);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(49, 46, 129, 0.32);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    flex-wrap: wrap;
}

.ai-promo:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(49, 46, 129, 0.42);
}

.ai-promo-icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
}

.ai-promo-body {
    flex: 1 1 220px;
}

.ai-promo-title {
    margin: 0 0 0.25rem;
    font-size: 1.25rem;
    font-weight: 800;
}

.ai-promo-text {
    margin: 0;
    opacity: 0.9;
    font-size: 0.95rem;
}

.ai-promo-cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    color: #312e81;
    border: none;
    border-radius: 999px;
    padding: 0.7rem 1.4rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.ai-promo-cta:hover {
    transform: translateY(-1px);
}

/* ===== AI Tutor chat page ===== */
.ai-tutor-page {
    max-width: 820px;
    margin: 0 auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 110px);
    /* Dynamic viewport height so the bottom input bar isn't pushed behind the mobile
       browser chrome / home indicator (100vh is the *large* viewport on mobile). */
    height: calc(100dvh - 110px);
    min-height: 480px;
}

.ai-tutor-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.ai-back {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #374151;
    font-size: 1.1rem;
    cursor: pointer;
}

.ai-tutor-heading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ai-avatar {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2c5364, #203a43);
    color: #fff;
    font-size: 1.4rem;
}

.ai-tutor-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 800;
    color: #1f2937;
}

.ai-tutor-subtitle {
    margin: 0;
    font-size: 0.85rem;
    color: #6b7280;
}

.ai-chat {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    background: #f7f9fb;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ai-bubble {
    max-width: 80%;
    padding: 0.75rem 1rem;
    border-radius: 16px;
    font-size: 0.97rem;
    line-height: 1.5;
    word-wrap: break-word;
}

.ai-bubble.assistant {
    align-self: flex-start;
    background: #fff;
    color: #1f2937;
    border: 1px solid #eef0f4;
    border-bottom-left-radius: 4px;
}

.ai-bubble.user {
    align-self: flex-end;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.ai-starters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-self: flex-start;
}

.ai-starter {
    background: #fff;
    border: 1.5px solid #cfe0ff;
    color: #4f46e5;
    border-radius: 999px;
    padding: 0.5rem 1rem;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ai-starter:hover {
    background: #eef4ff;
}

.ai-typing {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.ai-typing span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #9aa1ad;
    animation: ai-blink 1.2s infinite;
}

.ai-typing span:nth-child(2) {
    animation-delay: 0.2s;
}

.ai-typing span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes ai-blink {
    0%, 60%, 100% {
        opacity: 0.3;
    }
    30% {
        opacity: 1;
    }
}

.ai-notice {
    align-self: center;
    color: #6b7280;
    font-size: 0.88rem;
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: 10px;
    padding: 0.5rem 0.85rem;
}

.ai-input-bar {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.85rem;
    /* Keep the composer (text field / mic / send / end) clear of the device's bottom
       safe area. Harmless on desktop where the inset resolves to 0. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.ai-input {
    flex: 1;
    min-width: 0; /* allow the field to shrink inside the flex row instead of forcing overflow */
    border: 1.5px solid #e5e7eb;
    border-radius: 999px;
    padding: 0.8rem 1.2rem;
    font-size: 1rem;
    outline: none;
}

.ai-input:focus {
    border-color: #667eea;
}

.ai-send {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
}

.ai-send:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ai-locked {
    text-align: center;
    padding: 3rem 1rem;
    color: #6b7280;
}

.ai-locked i {
    font-size: 3rem;
    color: #f5a623;
}

.ai-locked h2 {
    margin: 1rem 0 0.5rem;
    color: #1f2937;
}

.ai-loading {
    display: flex;
    justify-content: center;
    padding: 3rem;
}

@media (max-width: 768px) {
    .ai-tutor-page {
        height: calc(100vh - 140px);
        height: calc(100dvh - 140px);
        padding: 0.75rem;
    }

    .ai-bubble {
        max-width: 90%;
    }

    .ai-promo {
        padding: 1.25rem;
    }

    .ai-promo-cta {
        width: 100%;
        justify-content: center;
    }
}

/* ===== AI Role Play ===== */
.rp-promo {
    background: linear-gradient(135deg, #6d28d9, #a21caf);
    box-shadow: 0 10px 30px rgba(109, 40, 217, 0.30);
}

.rp-promo:hover {
    box-shadow: 0 14px 34px rgba(109, 40, 217, 0.42);
}

.rp-promo-cta {
    color: #6d28d9;
}

/* ===== AI Role Play — redesigned (cream · deep navy · honey, house style) =====
   Design tokens scoped to the role-play surfaces so the generic names can't leak
   or collide globally. The detail sheet renders as a sibling of .rp-page, so it
   gets the tokens too. */
.rp-page,
.rp-sheet,
.rp-sheet-backdrop,
.rpc-page {
    --rp-canvas: #faf7f2;
    --rp-card: #ffffff;
    --rp-soft: #f2eee5;
    --rp-soft-2: #eae4d6;
    --rp-ink: #15171a;
    --rp-ink-2: #4a4d54;
    --rp-ink-3: #82847f;
    --rp-ink-4: #b5b3ac;
    --rp-line: #e5dfd2;
    --rp-line-strong: #d4cdbc;
    --rp-navy: #0f3d5c;
    --rp-navy-2: #1a5479;
    --rp-navy-soft: #e6eff5;
    --rp-honey: #e0ac3b;
    --rp-honey-soft: #f8e9c0;
    --rp-honey-ink: #a9760f;
    --rp-done: #2f6f4f;
    --rp-done-soft: #dcebe0;
    --rp-danger: #b33a3a;
    --rp-danger-soft: #f6e0e0;
}

.rp-avatar {
    background: linear-gradient(150deg, #12344c, var(--rp-navy));
    color: var(--rp-honey);
}

.rp-page {
    max-width: 760px;
    margin: 0 auto;
    padding: 1rem 1rem 2rem;
    background: radial-gradient(900px 500px at 50% -12%, #f6f1e6 0%, transparent 60%), var(--rp-canvas);
    border-radius: 20px;
    color: var(--rp-ink);
}

.rp-section-title {
    margin: 1.6rem 0 0.6rem;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--rp-ink);
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}

/* Count badge next to a section heading. */
.rp-count {
    display: inline-block;
    background: var(--rp-soft);
    color: var(--rp-ink-3);
    font-size: 0.72rem;
    font-weight: 800;
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
    font-variant-numeric: tabular-nums;
}

/* Sheet icon + level chip (shared with the detail sheet head). */
.rp-card-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #12344c, var(--rp-navy-2));
    color: #fff;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.rp-level {
    display: inline-flex;
    align-items: center;
    background: var(--rp-navy-soft);
    color: var(--rp-navy);
    font-weight: 800;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    border-radius: 999px;
    padding: 0.25rem 0.6rem;
}

/* ── Mode-start buttons (detail sheet) ── */
.rp-start {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: none;
    border-radius: 999px;
    padding: 0.7rem 1rem;
    font-weight: 800;
    font-size: 0.92rem;
    cursor: pointer;
    background: var(--rp-navy);
    color: #fff;
    box-shadow: 0 8px 18px -8px rgba(15, 61, 92, 0.6);
    transition: transform 0.15s ease;
}

.rp-start:hover:not(:disabled) {
    transform: translateY(-1px);
}

.rp-start:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.rp-start-voice {
    background: var(--rp-honey-soft);
    color: #7d5a0d;
    border: 1.5px solid var(--rp-honey);
    box-shadow: none;
}

/* ── Continue where you left off (hero) ── */
.rp-resume-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.rp-resume-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    text-align: start;
    cursor: pointer;
    overflow: hidden;
    background: linear-gradient(135deg, #12344c 0%, var(--rp-navy) 55%, var(--rp-navy-2) 100%);
    border: none;
    border-radius: 20px;
    padding: 1.05rem 1.1rem;
    box-shadow: 0 18px 36px -18px rgba(15, 61, 92, 0.55);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.rp-resume-card::after {
    content: "";
    position: absolute;
    inset-inline-end: -30px;
    top: -34px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
}

.rp-resume-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 22px 42px -18px rgba(15, 61, 92, 0.62);
}

.rp-resume-card .rp-tile-icon {
    background: rgba(255, 255, 255, 0.13);
    color: var(--rp-honey);
}

.rp-resume-card .rp-tile-title {
    color: #fff;
}

.rp-resume-card .rp-tile-sub {
    color: rgba(255, 255, 255, 0.72);
    font-weight: 600;
}

.rp-resume-go {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: #fff;
    color: var(--rp-navy);
    font-weight: 800;
    font-size: 0.82rem;
    border-radius: 999px;
    padding: 0.5rem 0.85rem;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
}

/* ── Search + level chips — the primary way to find one scenario among ~140. ── */
.rp-filters {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin-bottom: 0.9rem;
}

.rp-search {
    position: relative;
    display: flex;
    align-items: center;
}

.rp-search > .bi-search {
    position: absolute;
    inset-inline-start: 0.95rem;
    color: var(--rp-ink-3);
    font-size: 0.95rem;
    pointer-events: none;
}

.rp-search-input {
    width: 100%;
    height: 48px;
    background: var(--rp-card);
    color: var(--rp-ink);
    border: 1px solid var(--rp-line);
    border-radius: 14px;
    padding-inline: 2.6rem;
    font-size: 0.97rem;
    outline: none;
    box-shadow: 0 1px 2px rgba(20, 15, 10, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rp-search-input::placeholder {
    color: var(--rp-ink-4);
}

.rp-search-input:focus {
    border-color: var(--rp-navy);
    box-shadow: 0 0 0 3px rgba(15, 61, 92, 0.12);
}

/* Hide the browser's built-in search clear (X) so only our styled .rp-search-clear shows. */
.rp-search-input::-webkit-search-cancel-button,
.rp-search-input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.rp-search-clear {
    position: absolute;
    inset-inline-end: 0.7rem;
    border: none;
    background: transparent;
    color: var(--rp-ink-4);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.2rem;
}

.rp-level-chips {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.15rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.rp-level-chips::-webkit-scrollbar {
    display: none;
}

.rp-chip {
    flex-shrink: 0;
    height: 36px;
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--rp-line);
    background: var(--rp-card);
    color: var(--rp-ink-2);
    font-weight: 700;
    font-size: 0.84rem;
    border-radius: 999px;
    padding: 0 0.95rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}

.rp-chip:hover {
    border-color: var(--rp-line-strong);
}

.rp-chip.active {
    background: var(--rp-navy);
    border-color: var(--rp-navy);
    color: #fff;
    box-shadow: 0 4px 12px -4px rgba(15, 61, 92, 0.5);
}

/* ── Scenario tiles — one scannable row each; tap opens the detail sheet. ── */
.rp-scenarios {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 0.6rem;
}

.rp-tile {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
    text-align: start;
    cursor: pointer;
    background: var(--rp-card);
    border: 1px solid var(--rp-line);
    border-radius: 16px;
    padding: 0.8rem 0.85rem;
    box-shadow: 0 1px 2px rgba(20, 15, 10, 0.04);
    transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.rp-tile:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -10px rgba(20, 15, 10, 0.18);
}

.rp-tile:active {
    transform: translateY(1px);
}

.rp-tile-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #12344c, var(--rp-navy-2));
    color: #fff;
    font-size: 1.3rem;
}

.rp-tile-body {
    flex: 1;
    min-width: 0; /* lets the text ellipsize instead of stretching the row */
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.rp-tile-title {
    font-weight: 700;
    font-size: 0.96rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--rp-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rp-tile-sub {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--rp-ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rp-tile-sub i {
    font-size: 0.68rem;
    flex-shrink: 0;
    color: var(--rp-ink-4);
}

.rp-tile-voice {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rp-honey-soft);
    color: var(--rp-honey-ink);
    font-size: 0.78rem;
}

.rp-tile-level {
    flex-shrink: 0;
    background: var(--rp-navy-soft);
    color: var(--rp-navy);
    font-weight: 800;
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    border-radius: 999px;
    padding: 0.22rem 0.5rem;
}

.rp-tile-go {
    flex-shrink: 0;
    color: var(--rp-ink-4);
    font-size: 0.95rem;
}

/* ── Previous sessions — compact rows with a score ring. ── */
.rp-session-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rp-session-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    text-align: start;
    cursor: pointer;
    background: var(--rp-card);
    border: 1px solid var(--rp-line);
    border-radius: 13px;
    padding: 0.7rem 0.8rem;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.rp-session-card:hover {
    box-shadow: 0 6px 16px -10px rgba(20, 15, 10, 0.18);
}

.rp-session-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rp-soft);
    color: var(--rp-ink-2);
    font-size: 1rem;
}

.rp-session-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.rp-session-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--rp-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rp-session-meta {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--rp-ink-3);
}

/* Circular score ring — forest green ≥80, honey below. */
.rp-session-ring {
    position: relative;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    color: var(--rp-done);
}

.rp-session-ring.mid {
    color: var(--rp-honey-ink);
}

.rp-session-ring svg {
    position: absolute;
    inset: 0;
    display: block;
}

.rp-session-ring .rp-ring-track {
    stroke: var(--rp-soft-2);
}

.rp-session-ring .rp-ring-value {
    stroke: currentColor;
}

.rp-session-ring .v {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 800;
    color: currentColor;
    font-variant-numeric: tabular-nums;
}

/* ===== Scenario detail bottom sheet (mobile) / dialog (desktop) ===== */
.rp-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 26, 0.44);
    z-index: 1050;
    animation: rp-fade 0.18s ease;
}

.rp-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1051;
    background: var(--rp-card);
    border-radius: 24px 24px 0 0;
    padding: 0.75rem 1.35rem calc(1.4rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -18px 50px -12px rgba(20, 15, 10, 0.35);
    max-height: 88vh;
    overflow-y: auto;
    animation: rp-slide-up 0.24s cubic-bezier(0.3, 1, 0.4, 1);
    color: var(--rp-ink);
}

@keyframes rp-slide-up {
    from { transform: translateY(40px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes rp-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.rp-sheet-handle {
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: var(--rp-line-strong);
    margin: 0 auto 1rem;
}

.rp-sheet-close {
    position: absolute;
    top: 0.85rem;
    inset-inline-end: 1rem;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: var(--rp-soft);
    color: var(--rp-ink-2);
    font-size: 0.9rem;
    cursor: pointer;
}

.rp-sheet-head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 0.9rem;
    padding-inline-end: 2.5rem; /* clears the close button */
}

.rp-sheet-title {
    margin: 0 0 0.35rem;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--rp-ink);
}

.rp-sheet-desc {
    margin: 0 0 0.9rem;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--rp-ink-2);
}

.rp-sheet-roles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
}

.rp-sheet-roles span {
    display: block;
    background: var(--rp-soft);
    border-radius: 13px;
    padding: 0.7rem 0.8rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--rp-ink);
}

.rp-sheet-roles i {
    color: var(--rp-ink-3);
    margin-inline-end: 0.35rem;
}

.rp-sheet-actions {
    display: flex;
    gap: 0.6rem;
    margin-top: 1.2rem;
}

.rp-sheet-actions .rp-start {
    height: 52px;
    padding: 0.85rem 1rem;
    font-size: 0.95rem;
}

/* Flip directional glyphs for right-to-left cultures (Arabic). */
html[dir="rtl"] .rp-tile-go,
html[dir="rtl"] .rp-tile-sub i {
    transform: scaleX(-1);
}

@media (min-width: 769px) {
    /* On wider screens the sheet becomes a centered modal dialog. */
    .rp-sheet {
        left: 50%;
        right: auto;
        bottom: auto;
        top: 50%;
        transform: translate(-50%, -50%);
        width: min(460px, 92vw);
        border-radius: 20px;
        padding: 1.5rem;
        max-height: 86vh;
        animation: rp-pop 0.18s ease;
    }

    @keyframes rp-pop {
        from { opacity: 0; transform: translate(-50%, -46%) scale(0.97); }
        to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    }

    .rp-sheet-handle {
        display: none;
    }
}

/* ===== Role-play conversation page — chat session redesign =====
   Space-first mobile chat: compact header, goals collapsed into a floating
   pill + bottom sheet, session actions in an overflow menu, mic folded into
   the input bar. Scoped under .rpc-page; house tokens (--rp-*) declared above. */

.rpc-page {
    position: relative;
    /* The student layout's .page-content is a flex container: without width + min-width
       the page refuses to shrink below its content's min-width (the nowrap header line)
       and overflows narrow viewports. */
    width: 100%;
    min-width: 0;
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 110px);
    /* Dynamic viewport height so the bottom input bar isn't pushed behind the mobile
       browser chrome / home indicator (100vh is the *large* viewport on mobile). */
    /* --rp-kbh is the soft-keyboard height set by roleplay-viewport.js (0 when closed):
       subtracting it shrinks the page to the visible area so the keyboard can't pan the
       header + latest line off the top. */
    height: calc(100dvh - 110px - var(--rp-kbh, 0px));
    min-height: 480px;
    background: radial-gradient(900px 500px at 50% -12%, #f6f1e6 0%, transparent 60%), var(--rp-canvas);
    border: 1px solid var(--rp-line);
    border-radius: 20px;
    overflow: hidden;
    color: var(--rp-ink);
}

/* ── Compact header ── */
.rpc-top {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: var(--rp-card);
    border-bottom: 1px solid var(--rp-line);
    position: relative;
    z-index: 10;
}

.rpc-back,
.rpc-menu-btn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--rp-ink-2);
    font-size: 1.15rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rpc-back:hover,
.rpc-back:active,
.rpc-menu-btn:hover,
.rpc-menu-btn:active {
    background: var(--rp-soft);
}

.rpc-id {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.rpc-ico {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: linear-gradient(150deg, #12344c, var(--rp-navy));
    color: var(--rp-honey);
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rpc-id-tx {
    flex: 1;
    min-width: 0;
}

.rpc-ti {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.15;
    color: var(--rp-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rpc-ro {
    margin: 1px 0 0;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--rp-ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 5px;
}

.rpc-ro-arr {
    flex-shrink: 0;
    color: var(--rp-ink-4);
    font-size: 0.65rem;
}

[dir="rtl"] .rpc-back i,
[dir="rtl"] .rpc-ro-arr {
    transform: scaleX(-1);
}

/* ── Chat scroll — the star of the layout ── */
.rpc-chat {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Floating goals pill — sticks to the top of the scroll area */
.rpc-pill-row {
    position: sticky;
    top: 0;
    z-index: 5;
    align-self: flex-start;
    padding: 2px 0 6px;
}

.rpc-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 13px;
    border: 1px solid var(--rp-line);
    border-radius: 999px;
    background: var(--rp-card);
    box-shadow: 0 1px 2px rgba(20, 15, 10, 0.06);
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--rp-ink-2);
    cursor: pointer;
}

.rpc-pill .n {
    color: var(--rp-navy);
    font-variant-numeric: tabular-nums;
}

.rpc-day {
    align-self: center;
    margin: 4px 0 10px;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rp-ink-4);
}

/* Bubbles */
.rpc-msg {
    display: flex;
    flex-direction: column;
    max-width: 86%;
}

.rpc-msg.user {
    align-self: flex-end;
    align-items: flex-end;
}

.rpc-msg.ai {
    align-self: flex-start;
    align-items: flex-start;
}

.rpc-msg + .rpc-msg {
    margin-top: 8px;
}

.rpc-msg.cont {
    margin-top: 3px;
}

.rpc-bub {
    position: relative;
    padding: 10px 14px;
    font-size: 0.94rem;
    line-height: 1.45;
    word-wrap: break-word;
    max-width: 100%;
}

.rpc-msg.user .rpc-bub {
    background: var(--rp-navy);
    color: #fff;
    border-start-start-radius: 18px;
    border-start-end-radius: 18px;
    border-end-end-radius: 5px;
    border-end-start-radius: 18px;
    box-shadow: 0 4px 12px -6px rgba(15, 61, 92, 0.45);
}

.rpc-msg.user.cont .rpc-bub {
    border-start-end-radius: 5px;
}

.rpc-msg.ai .rpc-bub {
    background: var(--rp-card);
    border: 1px solid var(--rp-line);
    border-start-start-radius: 18px;
    border-start-end-radius: 18px;
    border-end-end-radius: 18px;
    border-end-start-radius: 5px;
    box-shadow: 0 1px 2px rgba(20, 15, 10, 0.04);
}

.rpc-msg.ai.cont .rpc-bub {
    border-start-start-radius: 5px;
}

.rpc-voice-mark {
    font-size: 0.75rem;
    margin-inline-end: 0.35rem;
    opacity: 0.8;
}

/* Listen button hangs off the AI bubble */
.rpc-ai-row {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    max-width: 100%;
}

.rpc-listen {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border: 1px solid var(--rp-line);
    border-radius: 50%;
    background: var(--rp-card);
    color: var(--rp-navy);
    font-size: 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(20, 15, 10, 0.06);
}

.rpc-listen.playing {
    background: var(--rp-navy);
    border-color: var(--rp-navy);
    color: #fff;
}

/* Correction tip — slim, attached under the bubble */
.rpc-tip {
    margin-top: 5px;
    max-width: 100%;
    display: flex;
    gap: 8px;
    align-items: flex-start;
    background: var(--rp-honey-soft);
    border: 1px solid rgba(224, 172, 59, 0.55);
    border-radius: 12px;
    padding: 8px 11px;
    font-size: 0.8rem;
    line-height: 1.45;
    color: #6e5310;
}

.rpc-tip i {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--rp-honey-ink);
}

/* Vocab chips */
.rpc-vocab {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    max-width: 100%;
}

.rpc-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-size: 0.76rem;
    font-weight: 800;
    color: var(--rp-navy);
    background: var(--rp-navy-soft);
    border-radius: 999px;
    padding: 4px 10px;
}

.rpc-chip small {
    font-weight: 600;
    color: var(--rp-ink-3);
    font-size: 0.7rem;
}

/* Inline translation reveal */
.rpc-trans-btn {
    margin-top: 5px;
    border: none;
    background: none;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--rp-ink-3);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px;
}

.rpc-trans {
    margin: 4px 0 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--rp-ink-3);
    font-style: italic;
    padding: 0 4px;
}

/* Typing indicator */
.rpc-typing {
    align-self: flex-start;
    margin-top: 8px;
    background: var(--rp-card);
    border: 1px solid var(--rp-line);
    border-start-start-radius: 18px;
    border-start-end-radius: 18px;
    border-end-end-radius: 18px;
    border-end-start-radius: 5px;
    padding: 13px 15px;
    display: flex;
    gap: 4px;
    box-shadow: 0 1px 2px rgba(20, 15, 10, 0.04);
}

.rpc-typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--rp-ink-4);
    animation: rpc-blink 1.1s infinite;
}

.rpc-typing span:nth-child(2) {
    animation-delay: 0.15s;
}

.rpc-typing span:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes rpc-blink {
    0%, 60%, 100% { transform: none; opacity: 0.5; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* Notices (errors, premium lock, mic/audio problems) */
.rpc-notice {
    align-self: center;
    margin: 8px 12px;
    color: var(--rp-ink-2);
    font-size: 0.85rem;
    background: var(--rp-card);
    border: 1px solid var(--rp-line);
    border-radius: 12px;
    padding: 0.5rem 0.85rem;
    text-align: center;
}

.rpc-notice-detail {
    display: block;
    margin-top: 2px;
    color: var(--rp-ink-3);
    font-size: 0.72rem;
}

/* Recovery action inside a notice — on mobile this opens the OS app-settings page, the only
   place a denied microphone permission can be turned back on. */
.rpc-notice-action {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 6px;
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--rp-line);
    border-radius: 999px;
    background: var(--rp-card, transparent);
    color: var(--rp-ink-2);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

/* ── Answering support: suggested replies (A1/A2/B1) and hints (B2) ──
   Both sit between the transcript and the composer, outside the scroll area, so the
   help stays reachable while the learner reads back through the conversation. Their
   own max-height keeps a long option list from crowding out the chat. */
.rpc-sugg,
.rpc-hints {
    flex-shrink: 0;
    border-top: 1px solid var(--rp-line);
    background: var(--rp-soft);
    padding: 8px 12px;
    max-height: 42vh;
    overflow-y: auto;
}

.rpc-sugg-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 7px;
    border: none;
    background: none;
    padding: 2px 0;
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--rp-ink-3);
}

.rpc-sugg-head i {
    color: var(--rp-navy);
    font-size: 0.85rem;
}

.rpc-sugg-head .ti {
    text-align: start;
}

.rpc-sugg-head .n {
    color: var(--rp-navy);
    font-variant-numeric: tabular-nums;
}

.rpc-sugg-head .ch {
    margin-inline-start: auto;
    color: var(--rp-ink-4);
}

.rpc-sugg-hint {
    margin: 4px 0 7px;
    font-size: 0.74rem;
    line-height: 1.4;
    color: var(--rp-ink-3);
}

.rpc-sugg-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rpc-sugg-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: start;
    border: 1px solid var(--rp-line-strong);
    border-radius: 14px;
    background: var(--rp-card);
    padding: 9px 12px;
    cursor: pointer;
    color: var(--rp-ink);
    box-shadow: 0 1px 2px rgba(20, 15, 10, 0.04);
    transition: border-color 0.12s ease, transform 0.12s ease;
}

.rpc-sugg-opt:hover,
.rpc-sugg-opt:focus-visible {
    border-color: var(--rp-navy);
}

.rpc-sugg-opt:active {
    transform: scale(0.99);
}

.rpc-sugg-opt.playing {
    border-color: var(--rp-navy);
    background: var(--rp-navy-soft);
}

.rpc-sugg-opt .tx {
    flex: 1;
    min-width: 0;
}

.rpc-sugg-opt .t {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.35;
}

.rpc-sugg-opt small {
    display: block;
    margin-top: 2px;
    font-size: 0.74rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--rp-ink-3);
}

.rpc-sugg-opt > i {
    flex-shrink: 0;
    color: var(--rp-navy);
    font-size: 0.95rem;
}

[dir="rtl"] .rpc-sugg-opt > i.bi-arrow-return-left {
    transform: scaleX(-1);
}

/* B2: hints are asked for, not offered */
.rpc-hints-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--rp-line-strong);
    border-radius: 999px;
    background: var(--rp-card);
    padding: 7px 15px;
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--rp-ink-2);
    cursor: pointer;
}

.rpc-hints-btn i {
    color: var(--rp-honey-ink);
}

.rpc-hints-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.rpc-hints-err {
    margin: 6px 0 0;
    font-size: 0.74rem;
    color: var(--rp-danger);
}

.rpc-hints-card {
    background: var(--rp-honey-soft);
    border: 1px solid rgba(224, 172, 59, 0.55);
    border-radius: 14px;
    padding: 10px 12px;
}

.rpc-hints-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rpc-hints-top i {
    color: var(--rp-honey-ink);
}

.rpc-hints-top h2 {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #6e5310;
}

.rpc-hints-top .x {
    margin-inline-start: auto;
    border: none;
    background: none;
    padding: 2px 4px;
    font-size: 0.8rem;
    color: #6e5310;
    cursor: pointer;
}

.rpc-hints-card ul {
    margin: 7px 0 0;
    padding-inline-start: 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rpc-hints-card li {
    font-size: 0.82rem;
    line-height: 1.45;
    color: #6e5310;
}

/* ── Input bar — one row, everything reachable ── */
.rpc-bar {
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    background: var(--rp-card);
    border-top: 1px solid var(--rp-line);
    padding: 8px 10px;
    /* Keep the composer clear of the device's bottom safe area. Harmless on
       desktop where the inset resolves to 0. */
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}

.rpc-field {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--rp-card);
    border: 1px solid var(--rp-line-strong);
    border-radius: 24px;
    padding: 5px 6px;
    padding-inline-start: 16px;
    min-height: 44px;
}

.rpc-field:focus-within {
    border-color: var(--rp-navy);
    box-shadow: 0 0 0 3px var(--rp-navy-soft);
}

.rpc-field input {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    outline: none;
    font: inherit;
    font-size: 0.94rem;
    color: var(--rp-ink);
}

.rpc-field input::placeholder {
    color: var(--rp-ink-4);
}

.rpc-mic-sm {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--rp-ink-3);
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rpc-mic-sm:hover,
.rpc-mic-sm:active {
    background: var(--rp-soft-2);
}

.rpc-send {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--rp-navy);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 14px -6px rgba(15, 61, 92, 0.55);
    transition: transform 0.12s ease, opacity 0.12s ease;
}

.rpc-send:disabled {
    opacity: 0.35;
    box-shadow: none;
    cursor: default;
}

.rpc-send:active:not(:disabled) {
    transform: scale(0.94);
}

[dir="rtl"] .rpc-send i {
    transform: scaleX(-1);
}

/* Voice mode bar */
.rpc-voice-hint {
    flex-shrink: 0;
    margin: 0;
    padding: 6px 12px;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--rp-ink-3);
}

.rpc-bar.voice {
    justify-content: center;
    align-items: center;
    gap: 18px;
    padding-top: 12px;
}

.rpc-kbd {
    width: 44px;
    height: 44px;
    border: 1px solid var(--rp-line);
    border-radius: 50%;
    background: var(--rp-soft);
    color: var(--rp-ink-2);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rpc-bar-spacer {
    width: 44px;
    flex-shrink: 0;
}

.rpc-mic-big {
    position: relative;
    width: 62px;
    height: 62px;
    border: none;
    border-radius: 50%;
    background: var(--rp-navy);
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px -8px rgba(15, 61, 92, 0.6);
}

.rpc-mic-big:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.rpc-mic-big.rec {
    background: var(--rp-danger);
    box-shadow: 0 10px 24px -8px rgba(179, 58, 58, 0.6);
}

.rpc-mic-big.rec::before,
.rpc-mic-big.rec::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(179, 58, 58, 0.5);
    animation: rpc-pulse 1.6s ease-out infinite;
    pointer-events: none;
}

.rpc-mic-big.rec::after {
    animation-delay: 0.8s;
}

@keyframes rpc-pulse {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(1.7); opacity: 0; }
}

/* ── Overlays: scrim, overflow menu, delete confirm, goals sheet ── */
.rpc-scrim {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: rgba(15, 23, 26, 0.32);
    animation: rpc-fade 0.16s ease;
}

@keyframes rpc-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.rpc-menu {
    position: absolute;
    top: 58px;
    inset-inline-end: 12px;
    z-index: 21;
    min-width: 230px;
    background: var(--rp-card);
    border-radius: 16px;
    box-shadow: 0 14px 40px -16px rgba(20, 15, 10, 0.35), 0 0 0 1px var(--rp-line);
    padding: 6px;
    animation: rpc-pop 0.18s cubic-bezier(0.3, 1.2, 0.4, 1);
}

@keyframes rpc-pop {
    from { transform: scale(0.92); opacity: 0; }
    to { transform: none; opacity: 1; }
}

.rpc-mi {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 11px 12px;
    border: none;
    border-radius: 11px;
    background: none;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--rp-ink);
    cursor: pointer;
    text-align: start;
}

.rpc-mi:hover:not(:disabled),
.rpc-mi:active:not(:disabled) {
    background: var(--rp-soft);
}

.rpc-mi:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.rpc-mi .ic {
    color: var(--rp-ink-3);
    display: flex;
    width: 18px;
    justify-content: center;
}

.rpc-mi.danger {
    color: var(--rp-danger);
}

.rpc-mi.danger .ic {
    color: var(--rp-danger);
}

.rpc-mi small {
    margin-inline-start: auto;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--rp-ink-4);
}

.rpc-menu hr {
    border: 0;
    border-top: 1px solid var(--rp-line);
    margin: 5px 8px;
}

/* Delete confirm dialog */
.rpc-confirm {
    position: absolute;
    left: 24px;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 22;
    max-width: 400px;
    margin: 0 auto;
    background: var(--rp-card);
    border-radius: 20px;
    padding: 22px 20px 16px;
    text-align: center;
    box-shadow: 0 14px 40px -16px rgba(20, 15, 10, 0.35), 0 0 0 1px var(--rp-line);
    animation: rpc-pop 0.18s cubic-bezier(0.3, 1.2, 0.4, 1);
}

.rpc-confirm .ic {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin: 0 auto 12px;
    background: var(--rp-danger-soft);
    color: var(--rp-danger);
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rpc-confirm h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--rp-ink);
}

.rpc-confirm p {
    margin: 6px 0 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--rp-ink-2);
}

.rpc-confirm .acts {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rpc-confirm .del {
    height: 46px;
    border: none;
    border-radius: 999px;
    background: var(--rp-danger);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    box-shadow: 0 6px 14px -6px rgba(179, 58, 58, 0.5);
}

.rpc-confirm .del:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.rpc-confirm .cancel {
    height: 42px;
    border: none;
    border-radius: 999px;
    background: none;
    color: var(--rp-ink-2);
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rpc-confirm .cancel:hover,
.rpc-confirm .cancel:active {
    background: var(--rp-soft);
}

/* Goals bottom sheet */
.rpc-sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 21;
    background: var(--rp-card);
    border-radius: 24px 24px 0 0;
    padding: 10px 22px 30px;
    box-shadow: 0 -18px 50px -12px rgba(20, 15, 10, 0.35);
    animation: rpc-up 0.24s cubic-bezier(0.3, 1, 0.4, 1);
}

@keyframes rpc-up {
    from { transform: translateY(40px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

.rpc-sheet-handle {
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: var(--rp-line-strong);
    margin: 0 auto 16px;
}

.rpc-sheet h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--rp-ink);
    display: flex;
    align-items: center;
    gap: 8px;
}

.rpc-sheet h2 i {
    color: var(--rp-navy);
}

.rpc-sheet .sub {
    margin: 3px 0 0;
    font-size: 0.78rem;
    color: var(--rp-ink-3);
}

.rpc-goals {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rpc-goal {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 13px;
    background: var(--rp-soft);
    border-radius: 13px;
    font-size: 0.88rem;
    line-height: 1.4;
    color: var(--rp-ink-2);
}

.rpc-goal .ck {
    flex-shrink: 0;
    margin-top: 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rp-navy);
}

/* ── End-of-session feedback card ── */
.rpc-fb {
    align-self: stretch;
    margin-top: 14px;
    background: var(--rp-card);
    border: 1px solid var(--rp-line);
    border-radius: 20px;
    padding: 18px;
    box-shadow: 0 6px 18px -8px rgba(20, 15, 10, 0.12);
}

.rpc-fb-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.rpc-fb-ring {
    position: relative;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
}

.rpc-fb-ring svg {
    position: absolute;
    inset: 0;
    display: block;
}

.rpc-fb-ring .track {
    fill: none;
    stroke: var(--rp-soft-2);
    stroke-width: 5;
}

.rpc-fb-ring .bar {
    fill: none;
    stroke: var(--rp-done);
    stroke-width: 5;
    stroke-linecap: round;
}

.rpc-fb-ring .v {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--rp-done);
    font-variant-numeric: tabular-nums;
}

.rpc-fb-head h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--rp-ink);
}

.rpc-fb-head .s {
    margin: 2px 0 0;
    font-size: 0.78rem;
    color: var(--rp-ink-3);
}

.rpc-fb-grid {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.rpc-fb-item {
    background: var(--rp-soft);
    border-radius: 13px;
    padding: 11px 13px;
}

.rpc-fb-item .k {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rp-ink-3);
}

.rpc-fb-item p {
    margin: 3px 0 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--rp-ink-2);
}

.rpc-fb-item ul {
    margin: 3px 0 0;
    padding-inline-start: 1.1rem;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--rp-ink-2);
}

.rpc-fb-item .rpc-vocab {
    margin-top: 6px;
}

.rpc-fb-acts {
    margin-top: 14px;
    display: flex;
    gap: 9px;
}

.rpc-fb-acts button {
    flex: 1;
    height: 46px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.rpc-fb-acts .again {
    border: none;
    background: var(--rp-navy);
    color: #fff;
    box-shadow: 0 6px 14px -6px rgba(15, 61, 92, 0.5);
}

.rpc-fb-acts .again:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.rpc-fb-acts .browse {
    border: 1px solid var(--rp-line);
    background: var(--rp-soft);
    color: var(--rp-ink-2);
}

/* "Words to practice" (struggle words) block inside the feedback card. */
.rpc-struggle-hint {
    margin: 3px 0 0;
    font-size: 0.78rem;
    color: var(--rp-ink-3);
}

.rpc-struggle-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.rpc-struggle-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--rp-line);
    border-radius: 11px;
    padding: 8px 10px;
}

.rpc-struggle-row .tx {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.rpc-struggle-row .w {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--rp-ink);
}

.rpc-struggle-row .t {
    font-size: 0.78rem;
    color: var(--rp-ink-2);
}

.rpc-struggle-row .d {
    font-size: 0.74rem;
    line-height: 1.4;
    color: var(--rp-ink-3);
}

.rpc-struggle-row .r {
    margin-top: 2px;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--rp-ink-3);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.rpc-struggle-add {
    flex-shrink: 0;
    border: none;
    border-radius: 999px;
    height: 32px;
    padding: 0 12px;
    font-size: 0.76rem;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--rp-navy);
    color: #fff;
}

.rpc-struggle-add:disabled {
    cursor: default;
    opacity: 0.75;
}

.rpc-struggle-add.added {
    background: var(--rp-done);
    opacity: 1;
}

.rpc-struggle-add-all {
    margin-top: 9px;
    width: 100%;
    height: 38px;
    border-radius: 999px;
    border: 1px solid var(--rp-line);
    background: #fff;
    color: var(--rp-ink-2);
    font-size: 0.8rem;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.rpc-struggle-add-all:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.rpc-struggle-err {
    margin: 7px 0 0;
    font-size: 0.76rem;
    color: #b3261e;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Learning-objectives block on the scenario detail sheet (list page). */
.rp-objectives {
    align-self: stretch;
    background: var(--rp-honey-soft);
    border: 1px solid rgba(224, 172, 59, 0.55);
    border-radius: 12px;
    padding: 0.7rem 1rem;
    font-size: 0.88rem;
    color: #6b5536;
}

.rp-objectives ul {
    margin: 0.35rem 0 0;
    padding-inline-start: 1.2rem;
}

/* Small inline spinner shared with the role-play list page. */
.rp-btn-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: currentColor;
    border-radius: 50%;
    display: inline-block;
    animation: rp-spin 0.8s linear infinite;
}

@keyframes rp-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 768px) {
    .rp-card-actions {
        flex-direction: column;
    }

    .rpc-msg {
        max-width: 90%;
    }

    .rpc-confirm {
        left: 16px;
        right: 16px;
    }
}

/* Immersive chat on phones (same breakpoint that shows the bottom tab bar):
   hide the tab bar on this page only and give the reclaimed space to the chat.
   The composer then sits on the true bottom edge; its own safe-area padding
   (see .rpc-bar) keeps it clear of the home indicator. */
@media (max-width: 859.98px) {
    body:has(.rpc-page) .mobile-bottom-nav {
        display: none;
    }

    .page-content:has(.rpc-page) {
        padding-bottom: 0;
    }

    .rpc-page {
        /* Only the sticky top navbar remains above the chat. --rp-kbh (set by
           roleplay-viewport.js, 0 when the keyboard is closed) shrinks the page to the
           visible area so the soft keyboard can't pan the header off the top. */
        height: calc(100vh - var(--nav-height, 64px));
        height: calc(100dvh - var(--nav-height, 64px) - var(--rp-kbh, 0px));
        min-height: 0;
        border: 0;
        border-radius: 0;
    }
}