/* Learn English - ePlanet Educational Services
   ASP.NET Core Razor Pages Version
   Design System with purple/blue color palette inspired by original React app
*/

/* =======================
   CSS Variables (Design Tokens)
   ======================= */
:root {
    /* Colors */
    --background: hsl(0, 0%, 98%);
    --foreground: hsl(222, 47%, 11%);

    --card: hsl(0, 0%, 100%);
    --card-foreground: hsl(222, 47%, 11%);

    /* Primary - ePlanet Blue */
    --primary: hsl(210, 100%, 45%);
    --primary-foreground: hsl(0, 0%, 100%);

    /* Secondary - Light blue */
    --secondary: hsl(210, 100%, 95%);
    --secondary-foreground: hsl(210, 100%, 35%);

    --muted: hsl(220, 14%, 96%);
    --muted-foreground: hsl(220, 9%, 46%);

    /* Accent - Deep blue */
    --accent: hsl(215, 89%, 42%);
    --accent-foreground: hsl(0, 0%, 100%);

    /* Success - Green for completed */
    --success: hsl(142, 76%, 36%);
    --success-foreground: hsl(0, 0%, 100%);

    /* Warning - Orange for in progress */
    --warning: hsl(25, 95%, 53%);
    --warning-foreground: hsl(0, 0%, 100%);

    --border: hsl(220, 13%, 91%);
    --input: hsl(220, 13%, 91%);

    /* Sidebar colors */
    --sidebar-background: hsl(210, 100%, 45%);
    --sidebar-foreground: hsl(0, 0%, 100%);

    /* Gradients */
    --gradient-start: hsl(210, 100%, 45%);
    --gradient-end: hsl(215, 89%, 42%);

    /* Spacing */
    --radius: 0.75rem;
}

/* =======================
   Global Styles
   ======================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: var(--background);
    color: var(--foreground);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;
    overflow-x: hidden;
}

/* =======================
   Login Page Styles
   ======================= */
.login-container {
    min-height: 100vh;
    display: flex;
}

.login-left {
    display: none;
    width: 50%;
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    color: var(--primary-foreground);
    position: relative;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .login-left {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 3rem;
    }
}

.login-decorative-circles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
}

.circle-1 {
    width: 16rem;
    height: 16rem;
    bottom: -5rem;
    left: -5rem;
}

.circle-2 {
    width: 12rem;
    height: 12rem;
    top: -2.5rem;
    right: -2.5rem;
}

.circle-3 {
    width: 8rem;
    height: 8rem;
    top: 33%;
    left: -2.5rem;
    opacity: 0.5;
}

.login-content {
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 28rem;
}

.login-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.brand-logo {
    width: auto;
    height: 80px;
    object-fit: contain;
}

@media (min-width: 768px) {
    .brand-logo {
        height: 100px;
    }
}

.login-brand h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.login-brand p {
    font-size: 1.125rem;
    opacity: 0.9;
}

.login-hero {
    margin-top: 2rem;
}

.hero-icon {
    margin: 0 auto 1.5rem;
}

.hero-icon svg {
    opacity: 0.8;
}

.login-hero h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.login-hero p {
    font-size: 1.125rem;
    opacity: 0.8;
    line-height: 1.7;
}

.login-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    background: var(--muted);
    min-height: 100vh;
}

@media (min-width: 768px) {
    .login-right {
        padding: 2rem;
    }
}

.login-mobile-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    margin-bottom: 2rem;
    color: var(--primary);
    text-align: center;
}

@media (min-width: 1024px) {
    .login-mobile-logo {
        display: none;
    }
}

.mobile-brand-logo {
    width: auto;
    height: 70px;
    object-fit: contain;
    margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
    .mobile-brand-logo {
        height: 90px;
    }
}

.mobile-logo-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.mobile-logo-text {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}

@media (min-width: 768px) {
    .mobile-logo-text {
        font-size: 1.75rem;
    }
}

.mobile-logo-subtitle {
    color: var(--muted-foreground);
    font-size: 0.8125rem;
    margin: 0;
    line-height: 1.4;
}

@media (min-width: 768px) {
    .mobile-logo-subtitle {
        font-size: 0.9375rem;
    }
}

.login-form-card {
    width: 100%;
    max-width: 28rem;
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
}

@media (min-width: 768px) {
    .login-form-card {
        padding: 2rem;
    }
}

.form-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.form-header h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
    .form-header h2 {
        font-size: 1.5rem;
    }
}

.form-header p {
    color: var(--muted-foreground);
    font-size: 0.875rem;
}

@media (min-width: 768px) {
    .form-header p {
        font-size: 1rem;
    }
}

.login-form {
    margin-bottom: 2rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--foreground);
}

.form-input {
    width: 100%;
    height: 2.75rem;
    padding: 0 0.875rem;
    font-size: 1rem;
    background: var(--card);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    transition: all 0.2s;
}

@media (min-width: 768px) {
    .form-input {
        height: 3rem;
        padding: 0 1rem;
        font-size: 1.125rem;
    }
}

.form-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 119, 230, 0.1);
}

.error-message {
    color: hsl(0, 84%, 60%);
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

.btn-primary {
    width: 100%;
    height: 2.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary-foreground);
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.3s;
}

@media (min-width: 768px) {
    .btn-primary {
        height: 3rem;
        font-size: 1.125rem;
    }
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(0, 119, 230, 0.4);
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.form-footer {
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    text-align: center;
}

.form-footer p {
    color: var(--muted-foreground);
    font-size: 0.875rem;
}

.support-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s;
}

.support-link:hover {
    color: var(--accent);
    text-decoration: underline;
}

/* =======================
   App Layout (Dashboard)
   ======================= */
.app-container {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.sidebar {
    width: 16rem;
    background: linear-gradient(180deg, var(--gradient-start), var(--gradient-end));
    color: var(--sidebar-foreground);
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    overflow-y: auto;
    z-index: 50;
    transition: width 0.3s, transform 0.3s;
}

@media (max-width: 1024px) {
    .sidebar {
        transform: translateX(-100%);
    }
    
    .sidebar.mobile-open {
        transform: translateX(0);
    }
}

.sidebar-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-brand-icon {
    width: 3rem;
    height: 3rem;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sidebar-brand-text h2 {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 0;
}

.sidebar-brand-text p {
    font-size: 0.75rem;
    opacity: 0.9;
}

/* Sidebar Collapse Button */
.sidebar-collapse-btn {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 0.5rem;
    width: 2rem;
    height: 2rem;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.9);
    transition: all 0.2s;
}

@media (min-width: 1025px) {
    .sidebar-collapse-btn {
        display: flex;
    }
}

.sidebar-collapse-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}

.sidebar-header {
    position: relative;
}

/* Collapsed Sidebar State */
.sidebar-collapsed {
    width: 4.5rem;
}

.sidebar-collapsed .sidebar-header {
    flex-direction: column;
    padding: 1rem 0.5rem;
    gap: 0.5rem;
}

.sidebar-collapsed .sidebar-brand-text {
    display: none;
}

.sidebar-collapsed .sidebar-collapse-btn {
    position: static;
    transform: none;
    margin-top: 0.5rem;
}

.sidebar-collapsed .sidebar-collapse-btn svg {
    transform: rotate(180deg);
}

.sidebar-collapsed .nav-link span,
.sidebar-collapsed .logout-btn span {
    display: none;
}

.sidebar-collapsed .nav-link,
.sidebar-collapsed .logout-btn {
    justify-content: center;
    padding: 0.75rem;
    border-left: none;
    border-radius: var(--radius);
}

.sidebar-collapsed .sidebar-brand-icon {
    margin: 0 auto;
}

.sidebar-collapsed .sidebar-footer {
    padding: 1rem 0.5rem;
}

.main-content-expanded {
    margin-left: 4.5rem;
}

.sidebar-nav {
    flex: 1;
    padding: 1rem;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    border-radius: var(--radius);
    transition: all 0.2s;
    margin-bottom: 0.25rem;
}

.nav-link:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.nav-link.active {
    background: rgba(255, 255, 255, 0.25) !important;
    color: white !important;
    font-weight: 600;
    border-left: 4px solid #fff;
    border-radius: 0 var(--radius) var(--radius) 0;
    padding-left: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.nav-link.active svg {
    stroke-width: 2.5;
    color: white;
}

/* Learnout users asked to drop the icons from every sidebar entry — hide
   the inline svgs and reclaim the icon gap so the labels sit flush left. */
body.panel-learnout .sidebar-nav .nav-link > svg { display: none; }
body.panel-learnout .sidebar-nav .nav-link { gap: 0; }

.sidebar-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Live Support pill — matches the reference the client sent: blue tile with a
   chat-bubble icon and a green "online" dot. Shown only for CompanyID = 478. */
.live-support-pill {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.75rem 1rem 0;
    padding: 0.7rem 0.9rem;
    background: linear-gradient(135deg, #1d4ed8, #2563eb);
    color: #fff;
    text-decoration: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
    position: relative;
}
.live-support-pill:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.45);
}
.live-support-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
}
.live-support-label { flex: 1; letter-spacing: 0.01em; }
.live-support-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
    flex-shrink: 0;
    animation: liveSupportPulse 2s ease-in-out infinite;
}
@keyframes liveSupportPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25); }
    50%      { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.10); }
}
/* When the sidebar collapses, keep only the icon so the pill fits the strip. */
.sidebar-collapsed .live-support-pill { justify-content: center; padding: 0.7rem; margin: 0.75rem 0.35rem 0; }
.sidebar-collapsed .live-support-label,
.sidebar-collapsed .live-support-dot { display: none; }

.logout-form {
    margin: 0;
}

.logout-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s;
}

.logout-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* Main Content */
.main-content {
    flex: 1;
    margin-left: 16rem;
    background: var(--background);
    transition: margin-left 0.3s;
    min-width: 0;
    overflow-x: hidden;
}

.main-content.main-content-expanded {
    margin-left: 4.5rem;
}

@media (max-width: 1024px) {
    .main-content {
        margin-left: 0;
    }
}

.mobile-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 4rem;
    padding: 0 1rem;
    background: var(--card);
    border-bottom: 1px solid var(--border);
}

@media (min-width: 1025px) {
    .mobile-header {
        display: none;
    }
}

.mobile-menu-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--foreground);
    padding: 0.5rem;
}

.mobile-header h2 {
    font-size: 1.25rem;
    font-weight: 600;
}

.content-wrapper {
    padding: 1rem;
}

@media (min-width: 768px) {
    .content-wrapper {
        padding: 1.5rem;
    }
}

@media (min-width: 1440px) {
    .content-wrapper {
        padding: 2rem;
    }
}

/* =======================
   Dashboard Styles
   ======================= */
.dashboard-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 1.5rem 2rem;
    box-sizing: border-box;
    overflow-x: hidden;
}
/* Chart.js canvases keep the layout honest even when the underlying
   pixel size is huge β€” otherwise cards would spill off-screen. */
.dashboard-container canvas,
.charts-section canvas {
    max-width: 100% !important;
    height: auto !important;
}
@media (max-width: 720px) {
    .dashboard-container { padding: 1rem; }
}

.welcome-banner {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    color: var(--primary-foreground);
    padding: 1.25rem;
    border-radius: 1rem;
    margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
    .welcome-banner {
        padding: 1.5rem;
    }
}

@media (min-width: 1440px) {
    .welcome-banner {
        padding: 2rem;
        border-radius: 1.25rem;
        margin-bottom: 1.5rem;
    }
}

.welcome-banner h1 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
    .welcome-banner h1 {
        font-size: 1.5rem;
    }
}

@media (min-width: 1440px) {
    .welcome-banner h1 {
        font-size: 1.75rem;
    }
}

.welcome-banner p {
    opacity: 0.95;
    font-size: 0.875rem;
}

@media (min-width: 768px) {
    .welcome-banner p {
        font-size: 1rem;
    }
}

.dashboard-grid {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 1280px) {
    .dashboard-grid {
        grid-template-columns: 1fr 18rem;
    }
}

@media (min-width: 1440px) {
    .dashboard-grid {
        grid-template-columns: 1fr 20rem;
    }
}

/* Stats Grid */
.stats-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

@media (min-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.875rem;
    }
}

@media (min-width: 1440px) {
    .stats-grid {
        gap: 1rem;
    }
}

.stat-card {
    background: var(--card);
    padding: 0.875rem;
    border-radius: var(--radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

@media (min-width: 1440px) {
    .stat-card {
        padding: 1rem;
        gap: 0.75rem;
    }
}

.stat-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon svg {
    width: 1.125rem;
    height: 1.125rem;
}

@media (min-width: 1440px) {
    .stat-icon {
        width: 3rem;
        height: 3rem;
    }

    .stat-icon svg {
        width: 1.25rem;
        height: 1.25rem;
    }
}

.stat-icon-success {
    background: var(--success);
    color: var(--success-foreground);
}

.stat-icon-primary {
    background: var(--primary);
    color: var(--primary-foreground);
}

.stat-icon-warning {
    background: var(--warning);
    color: var(--warning-foreground);
}

.stat-icon-accent {
    background: var(--accent);
    color: var(--accent-foreground);
}

.stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.25rem;
}

@media (min-width: 1440px) {
    .stat-value {
        font-size: 1.5rem;
    }
}

.stat-label {
    font-size: 0.7rem;
    color: var(--muted-foreground);
}

@media (min-width: 1440px) {
    .stat-label {
        font-size: 0.75rem;
    }
}

/* Sections */
.section {
    margin-bottom: 1.5rem;
}

.section-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
    .section-title {
        font-size: 1.125rem;
    }
}

.section-subtitle {
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .section-subtitle {
        font-size: 0.875rem;
    }
}

.section-grid {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .section-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 1024px) {
    .section-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

@media (min-width: 1440px) {
    .section-grid {
        gap: 1.5rem;
    }
}

/* Units List */
.units-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.unit-card {
    background: var(--card);
    padding: 1.25rem;
    border-radius: var(--radius);
    border-left: 4px solid var(--border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

@media (min-width: 1440px) {
    .unit-card {
        padding: 1.5rem;
    }
}

.unit-success {
    border-left-color: var(--success);
}

.unit-warning {
    border-left-color: var(--warning);
}

.unit-muted {
    border-left-color: var(--muted-foreground);
}

.unit-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.unit-name {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
    .unit-name {
        font-size: 1.125rem;
    }
}

.unit-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.unit-badge-success {
    background: hsl(142, 76%, 90%);
    color: hsl(142, 76%, 20%);
}

.unit-badge-warning {
    background: hsl(25, 95%, 90%);
    color: hsl(25, 95%, 25%);
}

.unit-badge-muted {
    background: var(--muted);
    color: var(--muted-foreground);
}

.unit-header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.unit-progress-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary);
}

@media (min-width: 768px) {
    .unit-progress-value {
        font-size: 1.5rem;
    }
}

.expand-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted-foreground);
    padding: 0.25rem;
    transition: all 0.2s;
}

.expand-btn:hover {
    color: var(--foreground);
}

.unit-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
    margin-bottom: 0.75rem;
}

.progress-bar {
    width: 100%;
    height: 0.5rem;
    background: var(--muted);
    border-radius: 0.25rem;
    overflow: hidden;
}

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

.progress-success {
    background: linear-gradient(90deg, var(--success), hsl(142, 76%, 40%));
}

.progress-warning {
    background: linear-gradient(90deg, var(--warning), hsl(25, 95%, 55%));
}

.progress-muted {
    background: var(--muted-foreground);
}

/* Subcategories */
.subcategories {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.subcategory-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
}

.subcategory-info {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.subcategory-name {
    font-size: 0.875rem;
    font-weight: 500;
}

.subcategory-time {
    font-size: 0.8125rem;
    color: var(--muted-foreground);
}

.subcategory-progress {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.subcategory-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--muted-foreground);
    min-width: 2.5rem;
    text-align: right;
}

.subcategory-bar {
    width: 7.5rem;
    height: 0.375rem;
    background: var(--muted);
    border-radius: 0.1875rem;
    overflow: hidden;
}

.subcategory-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--warning), hsl(25, 95%, 55%));
    transition: width 0.3s ease;
}

/* Chart */
.chart-card {
    background: var(--card);
    padding: 1.25rem;
    border-radius: var(--radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

@media (min-width: 1440px) {
    .chart-card {
        padding: 1.5rem;
    }
}

.chart-container {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    height: 15rem;
    gap: 0.5rem;
}

.chart-bar-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.chart-bar {
    width: 100%;
    max-width: 3rem;
    background: linear-gradient(180deg, var(--gradient-start), var(--gradient-end));
    border-radius: 0.5rem 0.5rem 0 0;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 0.5rem;
    min-height: 2rem;
    transition: all 0.3s ease;
}

.chart-bar:hover {
    filter: brightness(1.1);
}

.chart-value {
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
}

.chart-label {
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    margin-top: 0.5rem;
    font-weight: 500;
}

/* Courses */
.courses-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.course-card {
    background: var(--card);
    padding: 1.25rem;
    border-radius: var(--radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

@media (min-width: 1440px) {
    .course-card {
        padding: 1.5rem;
    }
}

.course-icon {
    width: 3rem;
    height: 3rem;
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    color: white;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.course-name {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
    .course-name {
        font-size: 1.125rem;
    }
}

.course-description {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    line-height: 1.5;
    margin-bottom: 1rem;
}

.course-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    margin-bottom: 0.5rem;
}

.course-percentage {
    font-weight: 700;
    color: var(--primary);
}

/* Dashboard Sidebar */
.dashboard-sidebar {
    display: none;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 1280px) {
    .dashboard-sidebar {
        display: flex;
    }
}

.sidebar-card {
    background: var(--card);
    padding: 1.25rem;
    border-radius: var(--radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

@media (min-width: 1440px) {
    .sidebar-card {
        padding: 1.5rem;
    }
}

.profile-card {
    text-align: center;
}

.profile-avatar {
    width: 5rem;
    height: 5rem;
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    margin: 0 auto 1rem;
}

.profile-name {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

@media (min-width: 768px) {
    .profile-name {
        font-size: 1.125rem;
    }
}

.profile-email {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.sidebar-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.language-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.language-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
}

.language-name {
    font-size: 0.875rem;
}

.language-badge {
    padding: 0.25rem 0.75rem;
    background: hsl(210, 100%, 95%);
    color: hsl(210, 100%, 35%);
    border-radius: 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
}

.reminders-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.reminder-item {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.reminder-checkbox {
    width: 1.25rem;
    height: 1.25rem;
    accent-color: var(--primary);
    cursor: pointer;
    margin-top: 0.125rem;
}

.reminder-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.reminder-title {
    font-size: 0.875rem;
}

.reminder-time {
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

/* =======================
   Utility Classes
   ======================= */
.gradient-primary {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
}

/* =======================
   Responsive Design
   ======================= */
@media (max-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .unit-header {
        flex-direction: column;
        gap: 0.75rem;
    }

    .unit-header-right {
        width: 100%;
        justify-content: space-between;
    }

    .chart-container {
        height: 12rem;
    }

    .subcategory-bar {
        width: 5rem;
    }

    .unit-meta {
        font-size: 0.8125rem;
        flex-wrap: wrap;
    }
}

/* Touch improvements for mobile */
@media (hover: none) and (pointer: coarse) {
    .nav-link {
        padding: 1rem;
        margin-bottom: 0.5rem;
    }

    .logout-btn {
        padding: 1rem;
    }

    .expand-btn {
        padding: 0.5rem;
        min-width: 2.5rem;
        min-height: 2.5rem;
    }
}

/* =======================
   Advanced Charts
   ======================= */

/* Charts Full Width Section */
.charts-section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Chart Card Enhanced */
.chart-card-full {
    background: var(--card);
    padding: 1.5rem;
    border-radius: var(--radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

@media (min-width: 1440px) {
    .chart-card-full {
        padding: 2rem;
    }
}

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

.chart-header h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0;
}

@media (min-width: 768px) {
    .chart-header h3 {
        font-size: 1.125rem;
    }
}

/* Chart Legend */
.chart-legend {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.legend-dot-practice {
    background: var(--primary);
}

.legend-dot-test {
    background: hsl(260, 80%, 60%);
}

/* Bar Chart Container with Y-axis */
.bar-chart-container {
    display: flex;
    gap: 0.5rem;
}

.bar-chart-y-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--muted-foreground);
    text-align: right;
    padding-right: 0.5rem;
    height: 200px;
    min-width: 2rem;
}

@media (min-width: 768px) {
    .bar-chart-y-axis {
        height: 220px;
    }
}

/* Grouped Bar Chart */
.grouped-bar-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 200px;
    padding: 0 0.5rem;
    border-bottom: 2px solid var(--border);
    border-left: 2px solid var(--border);
    position: relative;
    flex: 1;
}

@media (min-width: 768px) {
    .grouped-bar-chart {
        height: 220px;
    }
}

/* Y-axis labels */
.chart-y-axis {
    position: absolute;
    left: -2.5rem;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.bar-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    flex: 1;
    max-width: 60px;
}

.bar-pair {
    display: flex;
    gap: 3px;
    align-items: flex-end;
    height: 180px;
}

@media (min-width: 768px) {
    .bar-pair {
        gap: 4px;
        height: 200px;
    }
}

.bar-practice,
.bar-test {
    width: 14px;
    border-radius: 4px 4px 0 0;
    transition: all 0.3s ease;
    position: relative;
    min-height: 4px;
    cursor: pointer;
}

@media (min-width: 768px) {
    .bar-practice,
    .bar-test {
        width: 18px;
    }
}

.bar-practice {
    background: linear-gradient(180deg, var(--primary), hsl(210, 100%, 35%));
}

.bar-test {
    background: linear-gradient(180deg, hsl(260, 80%, 60%), hsl(260, 80%, 45%));
}

.bar-practice:hover,
.bar-test:hover {
    filter: brightness(1.15);
    transform: scaleY(1.02);
}

.bar-label {
    font-size: 0.65rem;
    color: var(--muted-foreground);
    margin-top: 0.5rem;
    white-space: nowrap;
    text-align: center;
}

@media (min-width: 768px) {
    .bar-label {
        font-size: 0.75rem;
    }
}

/* Line Chart */
.line-chart-wrapper {
    display: flex;
    gap: 0.5rem;
}

.line-chart-area {
    flex: 1;
    height: 180px;
    position: relative;
    border-bottom: 2px solid var(--border);
    border-left: 2px solid var(--border);
    background: linear-gradient(180deg, transparent 0%, transparent 16.66%, var(--border) 16.66%, var(--border) 16.8%, transparent 16.8%, transparent 33.33%, var(--border) 33.33%, var(--border) 33.46%, transparent 33.46%, transparent 50%, var(--border) 50%, var(--border) 50.13%, transparent 50.13%, transparent 66.66%, var(--border) 66.66%, var(--border) 66.8%, transparent 66.8%, transparent 83.33%, var(--border) 83.33%, var(--border) 83.46%, transparent 83.46%);
    background-size: 100% 100%;
}

.line-chart-area canvas {
    width: 100%;
    height: 100%;
    cursor: crosshair;
}

@media (min-width: 768px) {
    .line-chart-area {
        height: 200px;
    }
}

.line-chart-y-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--muted-foreground);
    text-align: right;
    padding-right: 0.5rem;
    min-width: 2rem;
    height: 180px;
}

@media (min-width: 768px) {
    .line-chart-y-axis {
        height: 200px;
    }
}

.line-chart-grid {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}

.grid-line {
    width: 100%;
    height: 1px;
    background: var(--border);
    opacity: 0.5;
}

.line-chart-svg {
    width: 100%;
    height: 100%;
}

.chart-line {
    fill: none;
    stroke: var(--primary);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.chart-area {
    fill: url(#areaGradient);
    opacity: 0.3;
}

.chart-point {
    fill: var(--card);
    stroke: var(--primary);
    stroke-width: 3;
    transition: all 0.2s ease;
    cursor: pointer;
}

.chart-point:hover {
    r: 8;
    stroke-width: 4;
}

.line-chart-x-axis {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0 0;
    font-size: 0.7rem;
    color: var(--muted-foreground);
}

@media (min-width: 768px) {
    .line-chart-x-axis {
        font-size: 0.75rem;
    }
}

.x-label {
    text-align: center;
    flex: 1;
}

/* Tooltip for charts */
.chart-tooltip {
    position: fixed;
    background: var(--foreground);
    color: var(--card);
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 1000;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Responsive Charts */
@media (max-width: 640px) {
    .grouped-bar-chart {
        height: 160px;
        overflow-x: auto;
        justify-content: flex-start;
        gap: 0.25rem;
    }

    .bar-pair {
        height: 140px;
    }

    .bar-practice,
    .bar-test {
        width: 10px;
    }

    .bar-group {
        min-width: 35px;
    }

    .line-chart {
        height: 150px;
    }

    .chart-legend {
        gap: 1rem;
    }
}

/* =======================
   Resources Page
   ======================= */
.resources-container {
    max-width: 100%;
}

.page-header {
    margin-bottom: 2rem;
}

.page-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.page-header p {
    color: var(--muted-foreground);
}

/* Resource Section */
.resource-section {
    margin-bottom: 2.5rem;
}

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

.section-title-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.section-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-icon-books {
    background: hsl(210, 100%, 95%);
    color: var(--primary);
}

.section-icon-sounds {
    background: hsl(340, 80%, 95%);
    color: hsl(340, 80%, 50%);
}

.section-icon-videos {
    background: hsl(260, 80%, 95%);
    color: hsl(260, 80%, 50%);
}

.section-icon-pronunciation {
    background: hsl(142, 76%, 92%);
    color: var(--success);
}

.section-title-group h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.view-all-link {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--primary);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: gap 0.2s;
}

.view-all-link:hover {
    gap: 0.5rem;
}

/* Carousel */
.carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.carousel-track {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0.5rem 0;
    flex: 1;
    min-width: 0;
}

.carousel-track::-webkit-scrollbar {
    display: none;
}

.carousel-arrow {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--foreground);
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.carousel-arrow-left {
    order: -1;
}

.carousel-arrow-right {
    order: 1;
}

.carousel-arrow:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    transform: scale(1.05);
}

.carousel-arrow:active {
    transform: scale(0.95);
}

/* Carousel Container - Using CSS Grid for precise layout */
.carousel-container {
    width: 100%;
}

.carousel-viewport {
    display: grid;
    grid-template-columns: 2.5rem 1fr 2.5rem;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

.carousel-items {
    grid-column: 2;
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0.5rem 0.5rem 0.5rem 0;
    min-width: 0;
}

.carousel-items::-webkit-scrollbar {
    display: none;
}

.carousel-btn {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--foreground);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.carousel-btn:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    transform: scale(1.1);
}

.carousel-btn:active {
    transform: scale(0.95);
}

.carousel-btn-left {
    grid-column: 1;
}

.carousel-btn-right {
    grid-column: 3;
}

/* Book Cards */
.book-card {
    flex-shrink: 0;
    width: 240px;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--card);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.book-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.book-card-visual {
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.book-card-blue .book-card-visual {
    background: linear-gradient(135deg, hsl(210, 100%, 55%), hsl(210, 100%, 45%));
}

.book-card-purple .book-card-visual {
    background: linear-gradient(135deg, hsl(270, 80%, 60%), hsl(270, 80%, 50%));
}

.book-card-green .book-card-visual {
    background: linear-gradient(135deg, hsl(142, 70%, 50%), hsl(142, 70%, 40%));
}

.book-card-orange .book-card-visual {
    background: linear-gradient(135deg, hsl(25, 95%, 55%), hsl(25, 95%, 45%));
}

.book-icon {
    color: white;
    opacity: 0.9;
}

.book-card-content {
    padding: 1rem;
}

.book-card-content h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.book-card-content p {
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    line-height: 1.4;
    margin-bottom: 0.75rem;
}

.book-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
}

.arrow-link {
    color: var(--primary);
    font-size: 1.25rem;
}

/* Track Cards */
.track-card {
    flex-shrink: 0;
    width: 240px;
    background: var(--card);
    border-radius: var(--radius);
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.track-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.track-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
}

.track-icon-pink {
    background: hsl(340, 80%, 95%);
    color: hsl(340, 80%, 50%);
}

.track-icon-coral {
    background: hsl(15, 90%, 95%);
    color: hsl(15, 90%, 50%);
}

.track-icon-green {
    background: hsl(142, 70%, 95%);
    color: hsl(142, 70%, 40%);
}

.track-icon-magenta {
    background: hsl(300, 70%, 95%);
    color: hsl(300, 70%, 45%);
}

.track-icon-rose {
    background: hsl(350, 80%, 95%);
    color: hsl(350, 80%, 50%);
}

.track-icon-green {
    background: hsl(142, 76%, 92%);
    color: hsl(142, 76%, 36%);
}

.track-icon-teal {
    background: hsl(175, 70%, 92%);
    color: hsl(175, 70%, 35%);
}

.track-icon-cyan {
    background: hsl(190, 80%, 92%);
    color: hsl(190, 80%, 40%);
}

.track-info h4 {
    font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.track-info p {
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    margin-bottom: 0.75rem;
}

.track-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.track-count {
    font-size: 0.8125rem;
    color: var(--muted-foreground);
}

.play-btn {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: none;
    background: hsl(340, 80%, 95%);
    color: hsl(340, 80%, 50%);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.play-btn:hover {
    background: hsl(340, 80%, 50%);
    color: white;
}

.play-btn-green {
    background: hsl(142, 76%, 92%);
    color: hsl(142, 76%, 36%);
}

.play-btn-green:hover {
    background: hsl(142, 76%, 36%);
    color: white;
}

.play-btn svg {
    margin-left: 2px;
}

/* Video Cards */
.video-card {
    flex-shrink: 0;
    width: 280px;
    cursor: pointer;
    transition: transform 0.2s;
}

.video-card:hover {
    transform: translateY(-4px);
}

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

.video-thumbnail {
    height: 160px;
    border-radius: var(--radius);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-thumbnail-blue {
    background: linear-gradient(135deg, hsl(210, 100%, 45%), hsl(210, 100%, 35%));
    height: 160px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.video-play-btn-white {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, background 0.2s;
}

.video-play-btn-white:hover {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.35);
}

.video-thumbnail-purple {
    background: linear-gradient(135deg, hsl(270, 80%, 65%), hsl(270, 80%, 50%));
}

.video-thumbnail-green {
    background: linear-gradient(135deg, hsl(142, 70%, 55%), hsl(142, 70%, 40%));
}

.video-thumbnail-orange {
    background: linear-gradient(135deg, hsl(25, 95%, 60%), hsl(25, 95%, 45%));
}

.video-thumbnail-pink {
    background: linear-gradient(135deg, hsl(340, 80%, 65%), hsl(340, 80%, 50%));
}

.video-thumbnail-cyan {
    background: linear-gradient(135deg, hsl(190, 90%, 50%), hsl(190, 90%, 35%));
}

.video-play-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.video-play-btn {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: white;
    color: var(--foreground);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.video-play-btn svg {
    margin-left: 4px;
}

.video-duration {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.video-info {
    padding: 0.75rem 0;
}

.video-info h4 {
    font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.video-info p {
    font-size: 0.8125rem;
    color: var(--muted-foreground);
}

/* Video Modal */
.video-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

.video-modal.active {
    opacity: 1;
    visibility: visible;
}

.video-modal-content {
    width: 90%;
    max-width: 900px;
    background: var(--card);
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
}

.video-modal-close {
    position: absolute;
    top: -3rem;
    right: 0;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 0.5rem;
}

.video-modal-close:hover {
    color: var(--primary);
}

.video-modal-title {
    padding: 1rem;
    font-size: 1.125rem;
    font-weight: 600;
    border-bottom: 1px solid var(--border);
}

.video-modal video {
    width: 100%;
    display: block;
    background: black;
}

.video-modal-body {
    padding: 0;
}

.video-modal-body video {
    width: 100%;
    max-height: 80vh;
    display: block;
    background: black;
}

/* Video Card New Elements */
.video-category-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.video-subcategory {
    display: block;
    font-size: 11px;
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.empty-message {
    padding: 2rem;
    color: var(--muted-foreground);
    font-style: italic;
}

/* Pronunciation Placeholder */
.pronunciation-placeholder {
    background: var(--muted);
    border-radius: var(--radius);
    padding: 3rem;
    text-align: center;
    color: var(--muted-foreground);
}

/* Responsive Resources */
@media (max-width: 768px) {
    .page-header h1 {
        font-size: 1.5rem;
    }

    .section-title-group h2 {
        font-size: 1.125rem;
    }

    .carousel-wrapper {
        gap: 0.5rem;
    }

    .carousel-arrow {
        width: 2rem;
        height: 2rem;
    }

    .carousel-arrow svg {
        width: 16px;
        height: 16px;
    }

    .book-card {
        width: 200px;
    }

    .book-card-visual {
        height: 120px;
    }

    .track-card {
        width: 200px;
    }

    .video-card {
        width: 240px;
    }

    .video-thumbnail {
        height: 135px;
    }
}

/* Ensure carousel arrows are always visible */
@media (max-width: 1280px) {
    .carousel-arrow {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* =======================
   Settings Page
   ======================= */
.settings-container {
    max-width: 800px;
    margin: 0 auto;
}

.settings-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.settings-card {
    background: var(--card);
    padding: 1.5rem;
    border-radius: var(--radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

@media (min-width: 768px) {
    .settings-card {
        padding: 2rem;
    }
}

.settings-card-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--foreground);
}

.settings-card-title svg {
    color: var(--primary);
}

/* Avatar Section */
.avatar-section {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
}

.avatar-preview {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

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

.avatar-initials {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
}

.avatar-upload {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.avatar-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: var(--muted);
    color: var(--foreground);
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.avatar-upload-btn:hover {
    background: var(--border);
}

.avatar-hint {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    margin: 0;
}

/* Form Elements */
.form-row {
    display: grid;
    gap: 1rem;
}

@media (min-width: 640px) {
    .form-row {
        grid-template-columns: 1fr 1fr;
    }
}

.form-hint {
    display: block;
    font-size: 0.75rem;
    color: var(--muted-foreground);
    margin-top: 0.375rem;
}

/* Account Info Display */
.info-row {
    display: grid;
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (min-width: 640px) {
    .info-row {
        grid-template-columns: 1fr 1fr;
    }
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.info-label {
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    font-weight: 500;
}

.info-value {
    font-size: 1rem;
    font-weight: 500;
    color: var(--foreground);
}

.info-value-code {
    font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
    background: var(--muted);
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    letter-spacing: 0.5px;
}

.info-note {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: hsl(210, 100%, 97%);
    border-radius: var(--radius);
    font-size: 0.8125rem;
    color: var(--muted-foreground);
}

.info-note svg {
    flex-shrink: 0;
    color: var(--primary);
    margin-top: 0.125rem;
}

/* Settings Actions */
.settings-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 0.5rem;
}

.settings-actions .btn-primary {
    width: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1.5rem;
}

/* Alert Messages */
.alert {
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.alert-success {
    background: hsl(142, 76%, 92%);
    color: hsl(142, 76%, 20%);
    border: 1px solid hsl(142, 76%, 80%);
}

/* Responsive Settings */
@media (max-width: 640px) {
    .avatar-section {
        flex-direction: column;
        text-align: center;
    }

    .settings-actions {
        justify-content: stretch;
    }

    .settings-actions .btn-primary {
        width: 100%;
        justify-content: center;
    }
}

/* =======================
   Enhanced Unit Cards
   ======================= */
.unit-card-enhanced {
    background: var(--card);
    padding: 1.5rem;
    border-radius: var(--radius);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .unit-card-enhanced {
        padding: 1.75rem;
    }
}

.unit-header-enhanced {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.unit-title-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.unit-name-enhanced {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--foreground);
    margin: 0;
}

@media (min-width: 768px) {
    .unit-name-enhanced {
        font-size: 1.25rem;
    }
}

.level-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    background: hsl(210, 100%, 95%);
    color: hsl(210, 100%, 40%);
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.expand-btn-enhanced {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted-foreground);
    padding: 0.5rem;
    border-radius: 0.5rem;
    transition: all 0.2s;
}

.expand-btn-enhanced:hover {
    background: var(--muted);
    color: var(--foreground);
}

/* Stats Grid */
.unit-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

@media (min-width: 640px) {
    .unit-stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .unit-stats-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 1rem;
    }
}

.unit-stat {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.unit-stat-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon-progress {
    background: hsl(210, 100%, 95%);
    color: hsl(210, 100%, 45%);
}

.stat-icon-score {
    background: hsl(45, 100%, 92%);
    color: hsl(45, 100%, 40%);
}

.stat-icon-total {
    background: hsl(260, 80%, 95%);
    color: hsl(260, 80%, 50%);
}

.stat-icon-answered {
    background: hsl(142, 76%, 92%);
    color: hsl(142, 76%, 36%);
}

.stat-icon-incorrect {
    background: hsl(0, 84%, 95%);
    color: hsl(0, 84%, 50%);
}

.stat-icon-time {
    background: hsl(25, 95%, 93%);
    color: hsl(25, 95%, 50%);
}

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

.unit-stat-label {
    font-size: 0.6875rem;
    color: var(--muted-foreground);
    line-height: 1.2;
}

.unit-stat-value {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--foreground);
    line-height: 1.2;
}

@media (min-width: 1024px) {
    .unit-stat-label {
        font-size: 0.75rem;
    }
    .unit-stat-value {
        font-size: 1rem;
    }
}

/* Multi-segment Progress Bar */
.multi-progress-bar {
    width: 100%;
    height: 0.625rem;
    background: var(--muted);
    border-radius: 0.3125rem;
    overflow: hidden;
    display: flex;
}

.progress-segment {
    height: 100%;
    transition: width 0.3s ease;
}

.progress-correct {
    background: linear-gradient(90deg, hsl(142, 76%, 42%), hsl(142, 76%, 36%));
}

.progress-pending {
    background: linear-gradient(90deg, hsl(45, 100%, 55%), hsl(45, 100%, 45%));
}

.progress-incorrect {
    background: linear-gradient(90deg, hsl(0, 84%, 60%), hsl(0, 84%, 50%));
}

.progress-notanswered {
    background: linear-gradient(90deg, hsl(30, 100%, 55%), hsl(30, 100%, 45%));
}

/* Enhanced Subcategories */
.subcategories-enhanced {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.subcategory-card {
    background: var(--muted);
    padding: 1rem;
    border-radius: 0.625rem;
}

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

.subcategory-name-enhanced {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--foreground);
}

.subcategory-badge {
    padding: 0.1875rem 0.625rem;
    border-radius: 0.75rem;
    font-size: 0.6875rem;
    font-weight: 600;
}

.subcategory-badge-success {
    background: hsl(142, 76%, 90%);
    color: hsl(142, 76%, 25%);
}

.subcategory-badge-warning {
    background: hsl(25, 95%, 90%);
    color: hsl(25, 95%, 30%);
}

.subcategory-badge-muted {
    background: hsl(220, 13%, 91%);
    color: hsl(220, 9%, 46%);
}

.subcategory-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-bottom: 0.75rem;
}

.sub-stat {
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.sub-stat strong {
    color: var(--foreground);
}

.sub-progress {
    height: 0.375rem;
}

.subcategory-footer {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.subcategory-footer .multi-progress-bar {
    flex: 1;
}

.subcategory-start-btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: var(--primary);
    color: white;
    border-radius: 0.5rem;
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 600;
    transition: all 0.2s;
    white-space: nowrap;
    margin-left: auto;
}

.subcategory-start-btn:hover {
    background: var(--primary-dark, hsl(262, 83%, 48%));
    transform: translateX(2px);
}

.subcategory-start-btn svg {
    transition: transform 0.2s;
}

.subcategory-start-btn:hover svg {
    transform: translateX(2px);
}

/* =======================
   Track Card Progress & Badges
   ======================= */
.track-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.track-status-badge {
    padding: 0.1875rem 0.5rem;
    border-radius: 0.5rem;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.track-badge-success {
    background: hsl(142, 76%, 90%);
    color: hsl(142, 76%, 25%);
}

.track-badge-warning {
    background: hsl(25, 95%, 90%);
    color: hsl(25, 95%, 30%);
}

.track-badge-muted {
    background: hsl(220, 13%, 91%);
    color: hsl(220, 9%, 46%);
}

.track-progress-bar {
    width: 100%;
    height: 0.375rem;
    background: var(--muted);
    border-radius: 0.1875rem;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.track-progress-fill {
    height: 100%;
    border-radius: 0.1875rem;
    transition: width 0.3s ease;
}

.track-progress-success {
    background: linear-gradient(90deg, hsl(142, 76%, 42%), hsl(142, 76%, 36%));
}

.track-progress-warning {
    background: linear-gradient(90deg, hsl(25, 95%, 55%), hsl(25, 95%, 45%));
}

.track-progress-muted {
    background: var(--muted-foreground);
}

/* =======================
   Unit Stats Grid 8 columns
   ======================= */
.unit-stats-grid-8 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

@media (min-width: 640px) {
    .unit-stats-grid-8 {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1200px) {
    .unit-stats-grid-8 {
        grid-template-columns: repeat(8, 1fr);
        gap: 0.5rem;
    }
}

/* =======================
   Unit Stats Grid 7 columns
   ======================= */
.unit-stats-grid-7 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

@media (min-width: 640px) {
    .unit-stats-grid-7 {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1200px) {
    .unit-stats-grid-7 {
        grid-template-columns: repeat(7, 1fr);
        gap: 0.5rem;
    }
}

.stat-icon-test {
    background: hsl(280, 70%, 95%);
    color: hsl(280, 70%, 50%);
}

.stat-icon-notanswered {
    background: hsl(45, 100%, 92%);
    color: hsl(45, 100%, 35%);
}

/* =======================
   Course Details Sidebar
   ======================= */
.course-details-card {
    background: var(--card);
}

.course-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
}

.course-info-item:not(:last-child) {
    border-bottom: 1px solid var(--border);
}

.course-info-label {
    font-size: 0.8125rem;
    color: var(--muted-foreground);
}

.course-info-value {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--foreground);
}

.course-name-highlight {
    color: var(--primary);
}

/* Course Progress Card */
.course-progress-card {
    background: linear-gradient(135deg, hsl(210, 100%, 45%), hsl(210, 100%, 35%));
    color: white;
    padding: 1.25rem;
    border-radius: var(--radius);
}

.course-progress-header {
    margin-bottom: 0.5rem;
}

.course-progress-title {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0 0 0.25rem 0;
}

.course-progress-subtitle {
    font-size: 0.8125rem;
    opacity: 0.8;
    margin: 0;
}

.course-progress-info {
    font-size: 0.75rem;
    opacity: 0.7;
    margin: 0 0 1rem 0;
    line-height: 1.4;
}

.course-stats-circles {
    display: flex;
    justify-content: space-around;
    margin-bottom: 1rem;
}

.course-stat-circle {
    text-align: center;
}

.circle-value {
    font-size: 0.9375rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.circle-label {
    font-size: 0.6875rem;
    opacity: 0.7;
}

.circle-highlight .circle-value {
    color: #fff;
}

.course-mini-progress {
    width: 100%;
    height: 0.75rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 0.375rem;
    overflow: hidden;
}

.course-mini-progress-fill {
    height: 100%;
    background: hsl(45, 100%, 50%);
    border-radius: 0.1875rem;
    transition: width 0.3s ease;
}

/* Score Cards Grid */
.score-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.625rem;
}

.score-card {
    padding: 1rem;
    border-radius: var(--radius);
    color: white;
    position: relative;
}

.score-card-value {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.score-card-icon {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    opacity: 0.8;
}

.score-card-label {
    font-size: 0.75rem;
    opacity: 0.9;
    line-height: 1.3;
}

.score-card-blue {
    background: linear-gradient(135deg, hsl(210, 100%, 50%), hsl(210, 100%, 40%));
}

.score-card-green {
    background: linear-gradient(135deg, hsl(142, 76%, 45%), hsl(142, 76%, 36%));
}

.score-card-red {
    background: linear-gradient(135deg, hsl(0, 84%, 55%), hsl(0, 84%, 45%));
}

.score-card-yellow {
    background: linear-gradient(135deg, hsl(40, 95%, 55%), hsl(40, 95%, 45%));
}

/* Dashboard Course Row - left content + right score cards */
.dashboard-course-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 1024px) {
    .dashboard-course-row {
        grid-template-columns: 1fr 1fr;
    }
}

.dashboard-course-left {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.dashboard-course-left .course-progress-card {
    flex: 1;
}

/* Dashboard Score Grid - 2x2 on right */
.dashboard-score-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.625rem;
}

.dashboard-score-grid .score-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* =======================
   Units Page
   ======================= */
.units-page-container {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Course Header with Book Cover */
.course-header-card {
    display: flex;
    gap: 2rem;
    background: var(--card);
    padding: 2rem;
    border-radius: var(--radius);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    margin-bottom: 2rem;
    align-items: center;
}

@media (max-width: 768px) {
    .course-header-card {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem;
        gap: 1.5rem;
    }
}

.course-book-cover {
    flex-shrink: 0;
}

.book-cover-visual {
    width: 140px;
    height: 180px;
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    border-radius: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 8px 24px rgba(0, 119, 230, 0.3);
    position: relative;
}

.book-cover-visual svg {
    opacity: 0.9;
}

.book-level-tag {
    position: absolute;
    bottom: 1rem;
    background: rgba(255, 255, 255, 0.2);
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.course-header-info {
    flex: 1;
}

.course-header-info h1 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

@media (min-width: 768px) {
    .course-header-info h1 {
        font-size: 2rem;
    }
}

.course-subtitle {
    color: var(--muted-foreground);
    margin-bottom: 1rem;
}

.course-header-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
    font-size: 0.9375rem;
    color: var(--muted-foreground);
}

@media (max-width: 768px) {
    .course-header-stats {
        justify-content: center;
        gap: 1rem;
    }
}

.course-header-stats strong {
    color: var(--foreground);
}

.course-header-progress {
    display: flex;
    align-items: center;
    gap: 1rem;
}

@media (max-width: 768px) {
    .course-header-progress {
        justify-content: center;
    }
}

.course-header-progress-bar {
    flex: 1;
    max-width: 300px;
    height: 0.625rem;
    background: var(--muted);
    border-radius: 0.3125rem;
    overflow: hidden;
}

.course-header-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--success), hsl(142, 76%, 40%));
    border-radius: 0.3125rem;
    transition: width 0.3s ease;
}

.course-header-progress-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--success);
}

/* Units Section */
.units-section {
    margin-bottom: 2rem;
}

.units-section-header {
    margin-bottom: 1.5rem;
}

.units-section-header h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.units-section-header p {
    color: var(--muted-foreground);
    font-size: 0.875rem;
}

/* Units Grid */
.units-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Unit Page Card */
.unit-page-card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    display: flex;
}

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

/* Unit Book Cover */
.unit-book-cover {
    flex-shrink: 0;
    width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    position: relative;
    padding: 1.5rem 1rem;
}

@media (max-width: 768px) {
    .unit-book-cover {
        width: 100%;
        height: 100px;
        flex-direction: row;
        gap: 1rem;
    }
}

.unit-cover-blue {
    background: linear-gradient(135deg, hsl(210, 100%, 55%), hsl(210, 100%, 40%));
}

.unit-cover-purple {
    background: linear-gradient(135deg, hsl(270, 80%, 60%), hsl(270, 80%, 45%));
}

.unit-cover-green {
    background: linear-gradient(135deg, hsl(142, 70%, 50%), hsl(142, 70%, 38%));
}

.unit-cover-orange {
    background: linear-gradient(135deg, hsl(25, 95%, 55%), hsl(25, 95%, 42%));
}

.unit-cover-pink {
    background: linear-gradient(135deg, hsl(340, 80%, 60%), hsl(340, 80%, 45%));
}

.unit-cover-teal {
    background: linear-gradient(135deg, hsl(175, 70%, 45%), hsl(175, 70%, 35%));
}

.unit-cover-icon {
    opacity: 0.9;
    margin-bottom: 0.75rem;
}

@media (max-width: 768px) {
    .unit-cover-icon {
        margin-bottom: 0;
    }
}

.unit-cover-level {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Unit Page Content */
.unit-page-content {
    flex: 1;
    padding: 1.5rem;
}

.unit-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.unit-page-title-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.unit-page-title-group h3 {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
}

@media (min-width: 768px) {
    .unit-page-title-group h3 {
        font-size: 1.25rem;
    }
}

/* Unit Page Stats */
.unit-page-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

@media (min-width: 640px) {
    .unit-page-stats {
        grid-template-columns: repeat(4, 1fr);
    }
}

.unit-page-stat {
    text-align: center;
    padding: 0.75rem;
    background: var(--muted);
    border-radius: 0.5rem;
}

.unit-page-stat-value {
    display: block;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--foreground);
}

.unit-page-stat-label {
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

/* Exercise Stats */
.unit-page-exercises {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.exercise-stat {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.8125rem;
}

.exercise-stat-value {
    font-weight: 700;
}

.exercise-stat-label {
    color: inherit;
    opacity: 0.8;
}

.exercise-stat-total {
    background: hsl(260, 80%, 95%);
    color: hsl(260, 80%, 40%);
}

.exercise-stat-correct {
    background: hsl(142, 76%, 92%);
    color: hsl(142, 76%, 30%);
}

.exercise-stat-incorrect {
    background: hsl(0, 84%, 95%);
    color: hsl(0, 84%, 40%);
}

.exercise-stat-pending {
    background: hsl(45, 100%, 92%);
    color: hsl(45, 100%, 30%);
}

/* Unit Page Progress */
.unit-page-progress {
    margin-bottom: 1rem;
}

/* Unit Page Subcategories */
.unit-page-subcategories {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.unit-page-subcategory {
    background: var(--muted);
    padding: 1rem;
    border-radius: 0.5rem;
}

.subcategory-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.subcategory-page-name {
    font-size: 0.9375rem;
    font-weight: 600;
}

.subcategory-page-stats {
    display: flex;
    gap: 1rem;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    margin-bottom: 0.5rem;
}

/* =======================
   Units Page V2 - New Layout
   ======================= */
.units-grid-v2 {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.unit-card-v2 {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

/* Unit Accordion Styles */
.unit-accordion-header {
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
}

.unit-accordion-header:hover {
    filter: brightness(1.05);
}

.unit-accordion-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.unit-accordion-arrow svg {
    stroke: white;
}

.unit-accordion.expanded .unit-accordion-arrow {
    transform: rotate(180deg);
}

.unit-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.unit-accordion.expanded .unit-accordion-content {
    max-height: 2000px;
}

/* Unit Header */
.unit-card-header-v2 {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1.25rem;
    color: white;
    cursor: pointer;
}

.unit-header-blue {
    background: linear-gradient(135deg, hsl(210, 100%, 55%), hsl(210, 100%, 40%));
}

.unit-header-purple {
    background: linear-gradient(135deg, hsl(270, 80%, 60%), hsl(270, 80%, 45%));
}

.unit-header-green {
    background: linear-gradient(135deg, hsl(142, 70%, 50%), hsl(142, 70%, 38%));
}

.unit-header-orange {
    background: linear-gradient(135deg, hsl(25, 95%, 55%), hsl(25, 95%, 42%));
}

.unit-header-pink {
    background: linear-gradient(135deg, hsl(340, 80%, 60%), hsl(340, 80%, 45%));
}

.unit-header-teal {
    background: linear-gradient(135deg, hsl(175, 70%, 45%), hsl(175, 70%, 35%));
}

.unit-header-grey {
    background: linear-gradient(135deg, hsl(220, 10%, 60%), hsl(220, 10%, 45%));
}

/* Unit Header Progress Bar */
.unit-header-progress {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.unit-header-progress-bar {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    overflow: hidden;
}

.unit-header-progress-fill {
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.unit-header-progress-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    min-width: 40px;
    text-align: right;
}

.unit-cover-inline {
    width: 3.5rem;
    height: 3.5rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.unit-header-info-v2 {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.unit-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.unit-title-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.unit-title-row h3 {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
}

@media (min-width: 768px) {
    .unit-title-row h3 {
        font-size: 1.25rem;
    }
}

.level-badge-light {
    display: inline-flex;
    padding: 0.25rem 0.625rem;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.unit-badge-v2 {
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.unit-badge-v2.unit-badge-success {
    background: rgba(255, 255, 255, 0.9);
    color: hsl(142, 76%, 30%);
}

.unit-badge-v2.unit-badge-warning {
    background: rgba(255, 255, 255, 0.9);
    color: hsl(25, 95%, 35%);
}

.unit-badge-v2.unit-badge-muted {
    background: rgba(255, 255, 255, 0.9);
    color: hsl(220, 9%, 46%);
}

/* Unit Body */
.unit-card-body-v2 {
    padding: 1.5rem;
}

.unit-multi-progress-container {
    margin-top: 1rem;
}

.unit-progress-section {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.unit-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.unit-progress-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--foreground);
}

.unit-progress-percent {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--foreground);
}

.unit-progress-bar {
    height: 10px;
    border-radius: 5px;
}

/* Subcategories V2 - Full Width */
.unit-subcategories-v2 {
    border-top: 1px solid var(--border);
    padding: 1rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.subcategory-card-v2 {
    background: var(--muted);
    padding: 1rem;
    border-radius: 0.625rem;
}

.subcategory-header-v2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.subcategory-name-v2 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--foreground);
}

.subcategory-name-link {
    text-decoration: none;
    transition: color 0.2s ease;
}

.subcategory-name-link:hover {
    color: hsl(210, 100%, 45%);
    text-decoration: underline;
}

.subcategory-progress-bar {
    width: 100%;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    margin-bottom: 0.75rem;
    overflow: hidden;
}

.subcategory-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, hsl(142, 76%, 45%), hsl(142, 76%, 55%));
    border-radius: 3px;
    transition: width 0.3s ease;
}

.subcategory-stats-v2 {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-bottom: 0.75rem;
}

.sub-stat-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
}

.sub-stat-item strong {
    color: var(--foreground);
}

.sub-stat-label {
    font-size: 0.6875rem;
    color: var(--muted-foreground);
    font-weight: 500;
}

.sub-stat-icon {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* =======================
   Units Page - Simplified Card Layout
   ======================= */
.units-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
}

@media (min-width: 768px) {
    .units-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Analytics: 1 column layout */
.section .units-card-grid {
    grid-template-columns: 1fr;
}

.unit-card-simple {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    border-left: 4px solid transparent;
    transition: box-shadow 0.2s ease;
}

.unit-card-simple:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.unit-border-green {
    border-left-color: hsl(142, 70%, 45%);
}

.unit-border-orange {
    border-left-color: hsl(25, 95%, 53%);
}

.unit-border-grey {
    border-left-color: hsl(220, 10%, 70%);
}

.unit-card-simple-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
}

.unit-card-simple-header:hover {
    background: var(--muted);
}

.unit-card-simple-left {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}

.unit-card-simple-info {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}

.unit-card-simple-info h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: var(--foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 768px) {
    .unit-card-simple-info h3 {
        font-size: 1.0625rem;
    }
}

/* Badge as plain text inside simple cards */
.unit-card-simple .unit-badge-v2 {
    background: none;
    padding: 0;
    border-radius: 0;
    font-size: 0.8125rem;
}

.unit-card-simple .unit-badge-v2.unit-badge-success {
    color: hsl(142, 70%, 40%);
}

.unit-card-simple .unit-badge-v2.unit-badge-warning {
    color: hsl(25, 95%, 48%);
}

.unit-card-simple .unit-badge-v2.unit-badge-muted {
    color: hsl(220, 10%, 55%);
}

/* Circular Progress Indicator */
.unit-progress-circle {
    width: 3.5rem;
    height: 3.5rem;
    flex-shrink: 0;
}

.unit-progress-circle svg {
    width: 100%;
    height: 100%;
}

.unit-progress-circle .circle-bg {
    fill: none;
    stroke: var(--muted);
    stroke-width: 3;
}

.unit-progress-circle .circle-fill {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    transition: stroke-dasharray 0.6s ease;
}

.unit-progress-circle .circle-text {
    fill: var(--foreground);
    font-size: 0.5rem;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: middle;
}

/* Dark arrow for simple cards (not on colored header) */
.unit-accordion-arrow-dark {
    background: var(--muted);
}

.unit-accordion-arrow-dark svg {
    stroke: var(--muted-foreground);
}

.unit-card-simple .unit-accordion-content {
    border-top: 1px solid var(--border);
}

/* Simplified Categories List */
.categories-simple-list {
    padding: 1rem 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.category-simple {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1rem;
    background: var(--muted);
    border-radius: 0.625rem;
    transition: background 0.2s ease;
}

.category-simple:hover {
    background: hsl(220, 14%, 93%);
}

.category-simple-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 120px;
    flex-shrink: 0;
}

.category-simple-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--foreground);
}

.category-simple-progress-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex: 1;
    min-width: 0;
}

.category-simple-progress-bar {
    flex: 1;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}

.category-simple-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, hsl(142, 76%, 45%), hsl(142, 76%, 55%));
    border-radius: 3px;
    transition: width 0.3s ease;
}

.category-simple-progress-text {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--muted-foreground);
    min-width: 36px;
    text-align: right;
}

.category-simple-start-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    color: white;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
}

.category-simple-start-btn:hover {
    opacity: 0.9;
    transform: translateX(2px);
}

/* Mobile: stack category items vertically */
@media (max-width: 640px) {
    .category-simple {
        flex-direction: column;
        align-items: stretch;
        gap: 0.625rem;
    }

    .category-simple-info {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        min-width: 0;
    }

    .category-simple-start-btn {
        align-self: flex-end;
    }
}

/* =======================
   Exercise Page
   ======================= */
.exercise-page {
    display: flex;
    gap: 1.5rem;
    min-height: calc(100vh - 4rem);
}

.exercise-sidebar {
    width: 280px;
    flex-shrink: 0;
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.exercise-sidebar-header {
    padding: 1.25rem;
    border-bottom: 1px solid var(--border);
}

.sidebar-book-link {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--foreground);
    text-decoration: none;
}

.sidebar-book-link:hover {
    color: var(--primary);
}

/* Unit & category dropdown navigation */
.sidebar-nav-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.35rem;
}
.sidebar-nav-row-category {
    padding-left: 1.55rem; /* align with unit name (past the back arrow) */
}
.sidebar-back-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--muted-foreground);
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.15s;
    flex-shrink: 0;
}
.sidebar-back-arrow:hover {
    color: var(--primary);
    background: var(--accent);
}
.sidebar-nav-dropdown {
    position: relative;
    flex: 1;
    min-width: 0;
}
.sidebar-nav-btn {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    background: none;
    border: none;
    padding: 0.15rem 0.3rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    color: #475569;
    text-align: left;
    width: 100%;
    transition: background 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-nav-btn-unit {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--foreground);
}
.sidebar-nav-btn:hover {
    background: var(--accent);
}
.sidebar-nav-chevron {
    flex-shrink: 0;
    opacity: 0.5;
    transition: transform 0.2s;
}
.sidebar-nav-dropdown.open .sidebar-nav-chevron {
    transform: rotate(180deg);
}
.sidebar-nav-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    min-width: 180px;
    max-height: 260px;
    overflow-y: auto;
    background: white;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    z-index: 50;
    padding: 0.25rem 0;
}
.sidebar-nav-dropdown.open .sidebar-nav-menu {
    display: block;
}
.sidebar-nav-menu-item {
    display: block;
    padding: 0.4rem 0.75rem;
    font-size: 0.83rem;
    color: var(--foreground);
    text-decoration: none;
    transition: background 0.12s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-nav-menu-item:hover {
    background: var(--accent);
}
.sidebar-nav-menu-item.active {
    background: #f1f5f9;
    color: #334155;
    font-weight: 600;
}

.sidebar-steps-label {
    display: block;
    font-size: 0.75rem;
    color: var(--muted-foreground);
    margin-top: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.exercise-steps-list {
    padding: 0.75rem;
}

.exercise-step-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem;
    border-radius: 0.5rem;
    text-decoration: none;
    color: var(--foreground);
    transition: all 0.2s;
    margin-bottom: 0.25rem;
}

.exercise-step-item:hover {
    background: var(--muted);
}

.exercise-step-item.active {
    background: hsl(262, 83%, 95%);
}

.exercise-step-item.active .step-indicator {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.exercise-step-item.passed .step-indicator {
    background: var(--success);
    color: white;
    border-color: var(--success);
}

.exercise-step-item.failed .step-indicator {
    background: #ef4444;
    color: white;
    border-color: #ef4444;
}

.step-exercise-id {
    font-size: 0.6rem;
    color: var(--muted-foreground);
    opacity: 0.5;
    min-width: 1.5rem;
    text-align: right;
    flex-shrink: 0;
}

.step-indicator {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 600;
    flex-shrink: 0;
    background: var(--card);
}

.step-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.step-title {
    font-weight: 600;
    font-size: 0.875rem;
}

.step-desc {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    line-height: 1.3;
}

/* Exercise Main Content */
.exercise-main {
    flex: 1;
    min-width: 0;
}

.exercise-content-card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.exercise-header {
    padding: 1.5rem 2rem 1rem;
    border-bottom: none;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.exercise-header h1 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    color: hsl(200, 50%, 35%);
}

.exercise-type-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--muted-foreground);
    background: var(--muted);
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.exercise-subtitle {
    padding: 0 2rem 1rem;
    margin: 0;
    font-size: 1.05rem;
    color: #1e293b;
    font-weight: 600;
    line-height: 1.5;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, #f8fafc, #eff6ff);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    border-left: 3px solid #3b82f6;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.exercise-subtitle-text { flex: 1 1 auto; min-width: 0; }
.exercise-subtitle-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #475569;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    flex: 0 0 auto;
}
.exercise-subtitle-edit-btn:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #1e293b;
}
.exercise-subtitle-edit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.exercise-subtitle-edit-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.4rem 0.6rem;
    border: 1px solid #93c5fd;
    border-radius: 6px;
    font-size: inherit;
    font-family: inherit;
    font-weight: 500;
    color: #0f172a;
    background: #ffffff;
    outline: none;
}
.exercise-subtitle-edit-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.exercise-subtitle-empty .exercise-subtitle-text::before {
    content: "(No title)";
    color: #94a3b8;
    font-style: italic;
    font-weight: 400;
}

/* === BookID 1136 — scoped subtitle redesign ============================== */
.exercise-subtitle.exercise-subtitle-1136 {
    padding: 1rem 1.75rem 1.1rem;
    background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 100%);
    border-left: 4px solid #6366f1;
    font-weight: 400;
    color: #1f2937;
}
.exercise-subtitle.exercise-subtitle-1136 .es-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
    color: #6366f1;
    margin-bottom: 0.35rem;
    line-height: 1.2;
}
.exercise-subtitle.exercise-subtitle-1136 .es-question {
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.55rem;
    line-height: 1.35;
}
.exercise-subtitle.exercise-subtitle-1136 .es-instruction {
    font-size: 0.92rem;
    font-weight: 400;
    color: #4b5563;
    line-height: 1.55;
    margin-top: 0.25rem;
}
.exercise-subtitle.exercise-subtitle-1136 .es-instruction + .es-instruction {
    margin-top: 0.4rem;
}

/* ========================================================================
   BookID 1136 — exercise content transformer output styling
   - Top row: image LEFT + TIP card RIGHT
   - Below: educational cards (museum entries)
   - Below: "Your task" multiple-choice wrapper
   ======================================================================== */
.bk1136-wrap {
    padding: 1.5rem 1.75rem 0.5rem;
}

/* ---- Top row: image + tip side-by-side ---- */
.bk1136-top-row {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: stretch;
    margin-bottom: 1.75rem;
}
.bk1136-top-row.is-image-only,
.bk1136-top-row.is-tip-only {
    grid-template-columns: minmax(0, 1fr);
}
@media (max-width: 880px) {
    .bk1136-top-row { grid-template-columns: minmax(0, 1fr); }
}

.bk1136-image {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.10);
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bk1136-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-height: 320px;
}

/* ---- TIP card (cream / butter yellow, lightbulb + check bullets) ---- */
.bk1136-tip {
    background: #fdf6dd;
    border: 1px solid #f3e2a4;
    border-radius: 14px;
    padding: 1.25rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    box-shadow: 0 2px 8px rgba(202, 138, 4, 0.08);
}
.bk1136-tip-header {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: #92400e;
}
.bk1136-tip-icon {
    display: inline-flex;
    width: 30px; height: 30px;
    align-items: center;
    justify-content: center;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    color: #d97706;
    flex-shrink: 0;
}
.bk1136-tip-heading {
    font-size: 1.15rem;
    font-weight: 700;
    color: #78350f;
    letter-spacing: -0.01em;
}
.bk1136-tip-body {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.bk1136-tip-line {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    color: #57534e;
    font-size: 0.92rem;
    line-height: 1.5;
}
.bk1136-tip-line .bk1136-check {
    color: #ca8a04;
    flex-shrink: 0;
    margin-top: 0.15rem;
}

/* ---- Educational cards (museum entries) ----
   Auto-resize: 1 card → full width, 2+ cards → 2 per row (extras wrap).
   Mobile collapses to 1 column. */
.bk1136-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem;
    margin: 0.5rem 0 1.5rem;
}
.bk1136-cards-grid:has(.bk1136-card:nth-child(1):last-child) {
    grid-template-columns: minmax(0, 1fr);
}
@media (max-width: 600px) {
    .bk1136-cards-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}
.bk1136-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-left: 4px solid #6366f1;
    border-radius: 12px;
    padding: 1.1rem 1.2rem;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.bk1136-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(99, 102, 241, 0.18);
    border-left-color: #4f46e5;
}
.bk1136-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.65rem;
    padding-bottom: 0.55rem;
    border-bottom: 2px solid #eef2ff;
    letter-spacing: -0.01em;
}
.bk1136-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.bk1136-card-line {
    font-size: 0.88rem;
    color: #4b5563;
    line-height: 1.5;
}
.bk1136-card-line.is-strong {
    font-weight: 600;
    color: #1f2937;
}
.bk1136-card-line.is-italic {
    font-style: italic;
    color: #6b7280;
}

/* ---- "Your task:" header before multiple-choice list ---- */
.bk1136-task-header {
    background: #f5f3ff;
    border-left: 4px solid #7c3aed;
    border-radius: 10px;
    padding: 0.95rem 1.2rem;
    margin: 1.25rem 1.5rem 1rem;
}
.bk1136-task-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #5b21b6;
    margin-bottom: 0.3rem;
}
.bk1136-task-desc {
    font-size: 0.92rem;
    color: #4c1d95;
    line-height: 1.5;
}

/* Slightly cleaner MC card appearance scoped to 1136 */
.multichoice-list-1136 .multichoice-card {
    border-radius: 10px;
}

/* BookID 1136 — hide the per-card numbering ("1.") and the "Multiple answers"
   badge, since the source question text already carries its own numbering.
   The rule covers every exercise type that renders an auto-incrementing prefix. */
.exercise-page-1136 .multichoice-num,
.exercise-page-1136 .multichoice-badge,
.exercise-page-1136 .truefalse-num,
.exercise-page-1136 .text-filling-num,
.exercise-page-1136 .matching-result-num,
.exercise-page-1136 .short-answer-num,
.exercise-page-1136 .word-ordering-num,
.exercise-page-1136 .writing-sentence-num,
.exercise-page-1136 .picture-dropdown-num,
.exercise-page-1136 .fillin-num,
.exercise-page-1136 .grouping-num,
.exercise-page-1136 .picture-word-num {
    display: none !important;
}

/* ---- BookID 1136 — hide left sidebar, move dropdowns to top of main ---- */
.exercise-page-1136 .exercise-sidebar {
    display: none;
}
.exercise-page-1136 .exercise-main {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
}

/* Top bar that replaces the sidebar */
.bk1136-topbar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1.5rem;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 50;
}
.bk1136-topbar-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 8px;
    color: #4f46e5;
    background: #eef2ff;
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.15s;
}
.bk1136-topbar-back:hover {
    background: #e0e7ff;
}
.bk1136-topbar-book {
    font-weight: 700;
    font-size: 0.95rem;
    color: #1e293b;
    text-decoration: none;
    letter-spacing: -0.01em;
}
.bk1136-topbar-book:hover {
    color: #4f46e5;
}
.bk1136-topbar-spacer {
    flex: 1 1 auto;
}
.bk1136-topbar .bk1136-topbar-dd {
    position: relative;
}
.bk1136-topbar .sidebar-nav-btn {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #334155;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.5rem 0.85rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    transition: all 0.15s;
}
.bk1136-topbar .sidebar-nav-btn:hover {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: #4338ca;
}
.bk1136-topbar .sidebar-nav-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 220px;
    max-width: 360px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
    padding: 0.4rem;
    z-index: 100;
    display: none;
    max-height: 60vh;
    overflow-y: auto;
}
/* Invisible bridge that fills the 6px gap between the button and the menu.
   Without it the parent loses :hover the moment the cursor crosses the gap
   and the menu snaps shut before the student can click anything. */
.bk1136-topbar .sidebar-nav-menu::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    height: 10px;
    background: transparent;
}
.bk1136-topbar .bk1136-topbar-dd:hover > .sidebar-nav-menu,
.bk1136-topbar .bk1136-topbar-dd:focus-within > .sidebar-nav-menu {
    display: block;
}
.bk1136-topbar .sidebar-nav-menu-item {
    display: block;
    padding: 0.5rem 0.7rem;
    border-radius: 6px;
    color: #334155;
    text-decoration: none;
    font-size: 0.88rem;
    line-height: 1.35;
}
.bk1136-topbar .sidebar-nav-menu-item:hover {
    background: #eef2ff;
    color: #4338ca;
}
.bk1136-topbar .sidebar-nav-menu-item.active {
    background: #e0e7ff;
    color: #4338ca;
    font-weight: 600;
}
.bk1136-topbar .sidebar-nav-menu-item.passed {
    color: #16a34a;
}
.bk1136-topbar .sidebar-nav-menu-item.failed {
    color: #dc2626;
}
.bk1136-topbar .sidebar-nav-menu-steps {
    min-width: 280px;
}
.bk1136-step-num {
    display: inline-block;
    width: 22px;
    text-align: center;
    font-weight: 700;
    color: #6366f1;
    margin-right: 0.4rem;
}
.bk1136-step-text {
    color: inherit;
}

@media (max-width: 768px) {
    .bk1136-topbar { padding: 0.55rem 0.9rem; gap: 0.4rem; }
    .bk1136-topbar-book { font-size: 0.85rem; }
    .bk1136-topbar .sidebar-nav-btn { font-size: 0.82rem; padding: 0.4rem 0.65rem; }
}

/* ---- BookID 1136 — Writing task UI (teacher-graded essay) ---- */
.bk1136-writing-body { padding: 0 1.5rem 1rem; }
.bk1136-writing-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 1.6rem 1.6rem 1.4rem;
    margin-top: 1rem;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
}
.bk1136-writing-header {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f3f4f6;
}
.bk1136-writing-badge {
    display: inline-block;
    background: #ede9fe;
    color: #5b21b6;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    margin-bottom: 0.5rem;
}
.bk1136-writing-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.01em;
}
.bk1136-writing-status {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.9rem 1.1rem;
    border-radius: 10px;
    margin-bottom: 1.2rem;
    border-left: 4px solid;
}
.bk1136-writing-status svg { flex-shrink: 0; margin-top: 0.1rem; }
.bk1136-writing-status-info       { background: #eff6ff; border-color: #3b82f6; color: #1e40af; }
.bk1136-writing-status-pending    { background: #fffbeb; border-color: #f59e0b; color: #92400e; }
.bk1136-writing-status-corrected  { background: #ecfdf5; border-color: #10b981; color: #065f46; }
.bk1136-writing-status-title { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.15rem; }
.bk1136-writing-status-desc  { font-size: 0.85rem; opacity: 0.85; line-height: 1.4; }
.bk1136-writing-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.4rem;
}
.bk1136-writing-textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 1rem 1.1rem;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    font-size: 0.95rem;
    line-height: 1.65;
    color: #1f2937;
    background: #fafafa;
    resize: vertical;
    min-height: 240px;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.bk1136-writing-textarea:focus {
    outline: none;
    border-color: #7c3aed;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}
.bk1136-writing-textarea[readonly] {
    background: #f9fafb;
    color: #6b7280;
    cursor: default;
}

/* Rich editor toolbar + contenteditable */
.bk1136-writing-toolbar {
    display: flex; flex-wrap: wrap; gap: 0.3rem;
    padding: 0.5rem;
    background: #f9fafb;
    border: 1px solid #d1d5db;
    border-radius: 10px 10px 0 0;
    border-bottom: none;
}
.bk1136-tb-btn {
    background: #fff;
    border: 1px solid #e5e7eb;
    color: #374151;
    padding: 0.35rem 0.65rem;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    min-width: 32px;
    transition: background 0.12s, border-color 0.12s;
}
.bk1136-tb-btn:hover { background: #ede9fe; border-color: #c4b5fd; color: #5b21b6; }
.bk1136-tb-divider { width: 1px; background: #e5e7eb; margin: 0 0.2rem; }

.bk1136-writing-editor {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d1d5db;
    border-radius: 0 0 10px 10px;
    padding: 1rem 1.1rem;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #1f2937;
    background: #fafafa;
    min-height: 240px;
    outline: none;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.bk1136-writing-editor:focus {
    border-color: #7c3aed;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}
.bk1136-writing-editor:empty::before {
    content: attr(data-placeholder);
    color: #9ca3af;
    pointer-events: none;
}

/* Corrected view (locked) — annotated essay + score/date + notes panel */
.bk1136-corrected-info { width: 100%; }
.bk1136-corrected-row {
    display: flex; flex-wrap: wrap; gap: 0.85rem;
    margin-top: 0.3rem;
    align-items: center;
    font-size: 0.85rem;
    color: #065f46;
}
.bk1136-corrected-score strong {
    color: #047857;
    font-size: 1.05rem;
    margin: 0 0.15rem;
}
.bk1136-corrected-date { opacity: 0.75; }

.bk1136-writing-corrected-essay {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 1rem 1.15rem;
    background: #fffaf5;
    font-size: 0.95rem;
    line-height: 1.75;
    color: #1f2937;
    min-height: 200px;
}
.bk1136-writing-corrected-essay mark.hl-red {
    background: #fee2e2; color: #991b1b;
    text-decoration: underline wavy #ef4444;
    padding: 0.05rem 0.15rem; border-radius: 3px;
}
.bk1136-writing-corrected-essay mark.hl-yellow {
    background: #fef3c7; color: #92400e;
    text-decoration: underline #f59e0b;
    padding: 0.05rem 0.15rem; border-radius: 3px;
}
.bk1136-writing-corrected-essay mark.hl-note {
    background: #fef3c7; color: #92400e;
    text-decoration: underline #f59e0b;
    padding: 0.05rem 0.15rem; border-radius: 3px;
    cursor: help; position: relative;
}
.bk1136-writing-corrected-essay mark.hl-note[data-note-num]::after {
    content: attr(data-note-num);
    position: absolute;
    top: -0.65em; right: -0.55em;
    background: #d97706; color: #fff;
    font-size: 0.65rem; font-weight: 700;
    min-width: 16px; height: 16px; line-height: 16px;
    padding: 0 4px; border-radius: 999px; text-align: center;
    box-shadow: 0 1px 3px rgba(217, 119, 6, 0.4);
}
.bk1136-writing-legend {
    display: flex; flex-wrap: wrap; gap: 0.85rem;
    margin: 0.6rem 0;
    font-size: 0.78rem; color: #6b7280;
}
.bk1136-writing-legend mark {
    padding: 0.05rem 0.3rem; border-radius: 3px; font-size: 0.78rem;
}
.bk1136-writing-legend > span {
    display: inline-flex; align-items: center; gap: 0.35rem;
}
.bk1136-writing-notes {
    margin-top: 0.6rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 0.85rem 1.05rem;
}
.bk1136-writing-notes-head {
    display: flex; align-items: center; gap: 0.45rem;
    font-weight: 700; color: #92400e; font-size: 0.88rem;
    margin-bottom: 0.55rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px dashed #fcd34d;
}
.bk1136-writing-notes-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 0.5rem;
}
.bk1136-writing-notes-item {
    display: flex; align-items: flex-start; gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    background: #fff;
    border: 1px solid #fde68a;
    border-radius: 7px;
}
.bk1136-writing-notes-num {
    flex-shrink: 0;
    width: 22px; height: 22px;
    background: #d97706; color: #fff;
    font-weight: 700; font-size: 0.72rem;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.bk1136-writing-notes-body { flex: 1; min-width: 0; }
.bk1136-writing-notes-quote {
    font-style: italic; color: #78350f; font-size: 0.8rem;
    margin-bottom: 0.2rem;
}
.bk1136-writing-notes-text { color: #1f2937; font-size: 0.88rem; line-height: 1.5; }
.bk1136-writing-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 0.85rem;
    flex-wrap: wrap;
}
.bk1136-writing-wordcount {
    font-size: 0.85rem;
    color: #6b7280;
    font-weight: 500;
}
.bk1136-writing-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.75rem 1.4rem;
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}
.bk1136-writing-submit-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(124, 58, 237, 0.4);
}
.bk1136-writing-submit-btn:disabled,
.bk1136-writing-submit-btn.is-loading {
    opacity: 0.7;
    cursor: wait;
    transform: none;
}

/* ---- BookID 1136 — custom modal (replaces native confirm/alert) ---- */
.bk1136-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.5);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 1000;
    animation: bk1136-modal-fade 0.18s ease-out;
}
.bk1136-modal-overlay.is-open { display: flex; }
@keyframes bk1136-modal-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.bk1136-modal {
    background: #fff;
    border-radius: 16px;
    padding: 1.6rem 1.6rem 1.4rem;
    max-width: 440px;
    width: 100%;
    text-align: center;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
    animation: bk1136-modal-pop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes bk1136-modal-pop {
    from { opacity: 0; transform: scale(0.92) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.bk1136-modal-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    margin: 0 auto 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bk1136-modal-icon-confirm { background: #ede9fe; color: #7c3aed; }
.bk1136-modal-icon-success { background: #dcfce7; color: #16a34a; }
.bk1136-modal-icon-warning { background: #fef3c7; color: #d97706; }
.bk1136-modal-icon-error   { background: #fee2e2; color: #dc2626; }
.bk1136-modal-icon-lock    { background: #fee2e2; color: #b91c1c; }
.bk1136-modal-title {
    margin: 0 0 0.5rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.01em;
}
.bk1136-modal-desc {
    margin: 0 0 1.3rem;
    color: #4b5563;
    font-size: 0.92rem;
    line-height: 1.55;
}
.bk1136-modal-actions {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.bk1136-modal-btn {
    padding: 0.65rem 1.3rem;
    border-radius: 9px;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: transform 0.12s, box-shadow 0.12s, background 0.12s;
    min-width: 110px;
}
.bk1136-modal-btn-primary {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    color: #fff;
    box-shadow: 0 3px 10px rgba(124, 58, 237, 0.3);
}
.bk1136-modal-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(124, 58, 237, 0.4);
}
.bk1136-modal-btn-secondary {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #e5e7eb;
}
.bk1136-modal-btn-secondary:hover {
    background: #e5e7eb;
}

/* ---- BookID 1136 — single compact Audio Tip card (header + player together) ---- */
/* Hide the centered "Tips" / "Tip" label that comes from the parsed content
   above the audio block — redundant with our purple card. */
.exercise-page-1136 .content-single-card > .content-card-label { display: none; }

.bk1136-audio-tip-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0.75rem auto 1rem;
    max-width: 640px;
    padding: 0.7rem 0.9rem 0.65rem;
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
    border: 1px solid #e9d5ff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.08);
}
.bk1136-audio-tip-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.bk1136-audio-tip-icon {
    display: inline-flex;
    width: 28px; height: 28px;
    align-items: center;
    justify-content: center;
    background: #ede9fe;
    color: #7c3aed;
    border-radius: 7px;
    flex-shrink: 0;
}
.bk1136-audio-tip-text {
    display: flex;
    flex-direction: column;
    gap: 0;
    line-height: 1.25;
}
.bk1136-audio-tip-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #5b21b6;
    letter-spacing: -0.01em;
}
.bk1136-audio-tip-desc {
    font-size: 0.78rem;
    color: #6b21a8;
    opacity: 0.8;
}
/* Player tucked inside the same purple card — no extra borders or padding */
.bk1136-audio-tip-wrap .custom-audio-player.custom-audio-player-1136 {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
}
.custom-audio-player.custom-audio-player-1136 .audio-play-btn {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    color: #fff;
    box-shadow: 0 3px 8px rgba(124, 58, 237, 0.3);
    width: 34px; height: 34px;
}
.custom-audio-player.custom-audio-player-1136 .audio-stop-btn {
    width: 28px; height: 28px;
}
.custom-audio-player.custom-audio-player-1136 .audio-seek-progress,
.custom-audio-player.custom-audio-player-1136 .audio-seek-bar::-webkit-slider-thumb {
    background: #7c3aed;
}
.custom-audio-player.custom-audio-player-1136 .audio-time {
    color: #6b21a8;
    font-size: 0.8rem;
}

/* ---- BookID 1136 — SAMPLE accordion (replaces purple onclick="showsample()" span) ---- */
.bk1136-sample {
    margin: 1rem 0;
    border: 1px solid #e9d5ff;
    border-radius: 12px;
    background: #faf5ff;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(124, 58, 237, 0.06);
}
.bk1136-sample-summary {
    list-style: none;
    cursor: pointer;
    padding: 0.95rem 1.15rem;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
    color: #6b21a8;
    font-weight: 600;
    user-select: none;
    transition: background 0.18s;
}
.bk1136-sample-summary::-webkit-details-marker { display: none; }
.bk1136-sample-summary:hover { background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%); }
.bk1136-sample-summary svg {
    color: #7c3aed;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.bk1136-sample[open] .bk1136-sample-summary svg { transform: rotate(180deg); }
.bk1136-sample-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.85rem;
}
.bk1136-sample-hint {
    margin-left: auto;
    font-size: 0.8rem;
    font-weight: 500;
    color: #9333ea;
    opacity: 0.8;
}
.bk1136-sample[open] .bk1136-sample-hint { display: none; }
.bk1136-sample-body {
    padding: 1.1rem 1.3rem;
    background: #ffffff;
    border-top: 1px solid #e9d5ff;
    font-size: 0.95rem;
    color: #374151;
    line-height: 1.65;
}
.bk1136-sample-body p,
.bk1136-sample-body span,
.bk1136-sample-body strong { font-family: inherit !important; font-size: inherit !important; }
.bk1136-sample-body strong { color: #581c87; }

/* ---- BookID 1136 loose-content card (e.g. A/B/C/D option list, Writing
       task description). Always left-align so writing prompts read like the
       old system. ---- */
.bk1136-loose {
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #3b82f6;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    color: #1e293b;
    line-height: 1.65;
    font-size: 0.95rem;
    text-align: left;
}
/* Override any inline text-align:center / font-size set in authored HTML */
.bk1136-loose,
.bk1136-loose *,
.bk1136-loose p,
.bk1136-loose div,
.bk1136-loose span {
    text-align: left !important;
}
.bk1136-loose > *:first-child { margin-top: 0; }
.bk1136-loose > *:last-child { margin-bottom: 0; }
.bk1136-loose strong { color: #0f172a; font-weight: 700; }
.bk1136-loose p { margin: 0 0 0.45rem; }
.bk1136-loose span[style*="font-size"] { font-size: inherit !important; }
.bk1136-loose br + br { display: none; }
/* Lists in loose content: top-level bullets hug the card's left edge,
   nested (light) bullets indent CLEARLY further so the hierarchy is obvious.
   Matches the old system's Speaking-task layout. */
.bk1136-loose ul,
.bk1136-loose ol {
    list-style-position: outside;
    margin: 0.25rem 0 0.6rem;
    padding-left: 1.5rem;        /* bold bullets near the card edge */
}
.bk1136-loose ul { list-style-type: disc; }
.bk1136-loose ul ul,
.bk1136-loose ol ol,
.bk1136-loose ul ol,
.bk1136-loose ol ul {
    padding-left: 2.75rem;       /* light sub-bullets shift visibly to the right */
    margin: 0.35rem 0;
}
.bk1136-loose ul ul { list-style-type: circle; }
.bk1136-loose ul ul ul { list-style-type: square; padding-left: 4rem; }
.bk1136-loose li { margin-bottom: 0.35rem; line-height: 1.55; }
.bk1136-loose li:last-child { margin-bottom: 0; }

/* "Language Tips" peeled out into its own warm-toned card so it stops sitting
   at the bottom of the main loose card with a giant blank gap above it. */
.bk1136-loose-tips {
    margin-top: 0.6rem;
    background: #fffbeb;
    border-color: #fcd34d;
    border-left-color: #f59e0b;
}
.bk1136-loose-tips p:first-child strong {
    color: #92400e;
    font-size: 1.05rem;
}

/* ---- BookID 1136 + Speaking — "Mark task as complete" card ---- */
.bk1136-tf-hidden { display: none !important; }

/* In Speaking category, the gauge / score stats don't make sense (it's a
   teacher-only outcome). Hide the entire results panel header so the page
   just shows the completion card + reset button. */
.exercise-page-1136-speaking .results-score-section { display: none !important; }

/* Speaking: the generic "Answer" button must stay in the DOM (the Mark Complete
   handler clicks it programmatically), but it shouldn't be visible to the student. */
.exercise-page-1136-speaking .exercise-check-section { display: none !important; }

/* ============================================================
   Writing Report page — student-facing list of essay submissions
   ============================================================ */
.writing-report-page {
    max-width: 980px;
    margin: 0 auto;
    padding: 2rem 1.75rem 3rem;
}
.writing-report-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #e5e7eb;
}
.writing-report-title {
    font-size: 1.85rem;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.015em;
    margin: 0 0 0.4rem;
}
.writing-report-subtitle {
    color: #6b7280;
    margin: 0;
    font-size: 0.95rem;
}

.writing-report-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}
.writing-report-stat {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    border-left: 4px solid #6366f1;
}
.writing-report-stat-pending   { border-left-color: #f59e0b; }
.writing-report-stat-corrected { border-left-color: #10b981; }
.writing-report-stat-avg       { border-left-color: #7c3aed; }
.writing-report-stat-num {
    font-size: 1.6rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.1;
}
.writing-report-stat-label {
    font-size: 0.78rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.writing-report-empty {
    text-align: center;
    padding: 4rem 1rem;
    color: #9ca3af;
}
.writing-report-empty svg { color: #d1d5db; margin-bottom: 1rem; }
.writing-report-empty h3 { color: #374151; font-size: 1.15rem; margin: 0 0 0.4rem; font-weight: 600; }
.writing-report-empty p  { color: #6b7280; font-size: 0.92rem; max-width: 420px; margin: 0 auto; line-height: 1.55; }

.writing-report-list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.writing-report-row {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.18s, border-color 0.18s;
}
.writing-report-row:hover { box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08); border-color: #d1d5db; }
.writing-report-row.is-corrected { border-left: 4px solid #10b981; }
.writing-report-row.is-pending   { border-left: 4px solid #f59e0b; }
.writing-report-row[open] { box-shadow: 0 6px 18px rgba(15, 23, 42, 0.1); }

.writing-report-row-summary {
    list-style: none;
    cursor: pointer;
    padding: 1.05rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    user-select: none;
}
.writing-report-row-summary::-webkit-details-marker { display: none; }
.writing-report-row-main { flex: 1; min-width: 0; }
.writing-report-row-title {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.3rem;
}
.writing-report-row-category { color: #4338ca; font-weight: 700; }
.writing-report-row-lesson   { color: #6b7280; font-weight: 500; }
.writing-report-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.82rem;
    color: #6b7280;
}
.writing-report-row-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.writing-report-row-status {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-shrink: 0;
}
.writing-report-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.32rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}
.writing-report-badge-corrected { background: #dcfce7; color: #15803d; }
.writing-report-badge-pending   { background: #fef3c7; color: #92400e; }
.writing-report-score {
    background: #ede9fe;
    color: #5b21b6;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0.32rem 0.7rem;
    border-radius: 8px;
}
.writing-report-chevron {
    color: #9ca3af;
    transition: transform 0.18s;
}
.writing-report-row[open] .writing-report-chevron { transform: rotate(180deg); }

.writing-report-row-body {
    padding: 0 1.25rem 1.25rem;
    border-top: 1px solid #f3f4f6;
    padding-top: 1rem;
}
.writing-report-section + .writing-report-section { margin-top: 1.1rem; }
.writing-report-section-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6366f1;
    margin-bottom: 0.45rem;
}
.writing-report-essay,
.writing-report-feedback {
    white-space: pre-wrap;
    background: #f9fafb;
    border: 1px solid #f3f4f6;
    border-radius: 8px;
    padding: 0.9rem 1.05rem;
    font-size: 0.92rem;
    line-height: 1.6;
    color: #1f2937;
}
.writing-report-feedback {
    background: #fff7ed;
    border-color: #fed7aa;
    color: #9a3412;
}
.writing-report-row-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}
.writing-report-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #4338ca;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
}
.writing-report-link:hover { text-decoration: underline; }
.writing-report-corrected-on {
    font-size: 0.8rem;
    color: #9ca3af;
}

/* Legend under the annotated essay so the student knows what each color means */
.writing-report-legend {
    display: flex; flex-wrap: wrap; gap: 0.85rem;
    margin-top: 0.6rem;
    font-size: 0.78rem; color: #6b7280;
}
.writing-report-legend mark {
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
    font-size: 0.78rem;
}
.writing-report-legend > span { display: inline-flex; align-items: center; gap: 0.35rem; }

/* Student notes panel under the corrected essay */
.writing-report-notes {
    margin-top: 0.9rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 0.85rem 1.05rem;
}
.writing-report-notes-head {
    display: flex; align-items: center; gap: 0.45rem;
    font-weight: 700; color: #92400e; font-size: 0.88rem;
    margin-bottom: 0.55rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px dashed #fcd34d;
}
.writing-report-notes-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 0.5rem;
}
.writing-report-notes-item {
    display: flex; align-items: flex-start; gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    background: #fff;
    border: 1px solid #fde68a;
    border-radius: 7px;
}
.writing-report-notes-num {
    flex-shrink: 0;
    width: 22px; height: 22px;
    background: #d97706; color: #fff;
    font-weight: 700; font-size: 0.72rem;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.writing-report-notes-body { flex: 1; min-width: 0; }
.writing-report-notes-quote {
    font-style: italic; color: #78350f; font-size: 0.8rem;
    margin-bottom: 0.2rem;
}
.writing-report-notes-text { color: #1f2937; font-size: 0.88rem; line-height: 1.5; }

/* Style the annotation marks when rendered inside the student's WritingReport feedback box */
.writing-report-feedback mark.hl-red {
    background: #fee2e2;
    color: #991b1b;
    text-decoration: underline wavy #ef4444;
    padding: 0.05rem 0.15rem;
    border-radius: 3px;
}
.writing-report-feedback mark.hl-yellow {
    background: #fef3c7;
    color: #92400e;
    text-decoration: underline #f59e0b;
    padding: 0.05rem 0.15rem;
    border-radius: 3px;
}
.writing-report-feedback mark.hl-note {
    background: #ede9fe;
    color: #5b21b6;
    text-decoration: underline dotted #7c3aed;
    padding: 0.05rem 0.15rem;
    border-radius: 3px;
    cursor: help;
    position: relative;
}
.writing-report-feedback mark.hl-note::after {
    content: '💬';
    font-size: 0.75em;
    margin-left: 0.2em;
}

/* ============================================================
   Teacher Writing Review — interactive annotation editor
   ============================================================ */
.wr-page {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.25rem 1.4rem 2.5rem;
}
.wr-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}
.wr-header h1 {
    margin: 0 0 0.25rem;
    font-size: 1.6rem;
    color: #111827;
    letter-spacing: -0.015em;
}
.wr-subtitle { color: #6b7280; margin: 0; font-size: 0.9rem; }

.wr-filter { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.wr-filter-btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    background: #f3f4f6;
    color: #374151;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.15s;
}
.wr-filter-btn:hover { background: #e5e7eb; }
.wr-filter-btn.active {
    background: #4338ca;
    color: #fff;
    box-shadow: 0 3px 8px rgba(67, 56, 202, 0.3);
}
.wr-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: rgba(255,255,255,0.85);
    color: #4338ca;
    font-size: 0.72rem;
    font-weight: 700;
}
.wr-filter-btn:not(.active) .wr-chip { background: #fff; color: #374151; }

.wr-empty {
    text-align: center;
    padding: 3.5rem 1rem;
    color: #9ca3af;
}
.wr-empty svg { color: #d1d5db; }
.wr-empty h3 { color: #374151; margin: 0.8rem 0 0.3rem; }
.wr-empty p  { color: #6b7280; max-width: 460px; margin: 0 auto; line-height: 1.55; }

.wr-notauth { text-align: center; padding: 4rem 1rem; }
.wr-notauth h2 { color: #111827; }
.wr-notauth p  { color: #6b7280; margin-bottom: 1.2rem; }

.wr-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 1.25rem;
    align-items: flex-start;
}
@media (max-width: 980px) {
    .wr-layout { grid-template-columns: 1fr; }
}

/* Submission list */
.wr-list {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 0.4rem;
    max-height: calc(100vh - 220px);
    overflow-y: auto;
    position: sticky;
    top: 1rem;
}
.wr-list-item {
    display: block;
    padding: 0.75rem 0.85rem;
    border-radius: 8px;
    text-decoration: none;
    color: #1f2937;
    margin-bottom: 0.2rem;
    border-left: 3px solid transparent;
    transition: background 0.12s, border-color 0.12s;
}
.wr-list-item:hover { background: #f9fafb; }
.wr-list-item.is-active { background: #eef2ff; border-left-color: #4338ca; }
.wr-list-item.is-pending   { border-left-color: #f59e0b; }
.wr-list-item.is-corrected { border-left-color: #10b981; }
.wr-list-item.is-active.is-pending,
.wr-list-item.is-active.is-corrected { background: #eef2ff; }
.wr-list-row {
    display: flex; justify-content: space-between; align-items: center;
    gap: 0.5rem; margin-bottom: 0.2rem;
}
.wr-list-student { font-weight: 600; font-size: 0.92rem; color: #111827; }
.wr-list-badge {
    font-size: 0.7rem; font-weight: 700;
    padding: 0.18rem 0.5rem; border-radius: 999px;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.wr-list-badge-pending   { background: #fef3c7; color: #92400e; }
.wr-list-badge-corrected { background: #dcfce7; color: #15803d; }
.wr-list-meta {
    display: flex; flex-wrap: wrap; gap: 0.35rem;
    font-size: 0.78rem; color: #6b7280;
}
.wr-list-meta-sm { margin-top: 0.25rem; align-items: center; }
.wr-list-score {
    margin-left: auto;
    background: #ede9fe; color: #5b21b6;
    padding: 0.1rem 0.4rem; border-radius: 5px;
    font-weight: 700; font-size: 0.75rem;
}

/* Detail / editor */
.wr-detail {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.4rem 1.5rem;
    min-height: 400px;
}
.wr-detail-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 1rem; flex-wrap: wrap;
    margin-bottom: 1rem; padding-bottom: 1rem;
    border-bottom: 1px solid #f3f4f6;
}
.wr-detail-student { font-size: 1.1rem; font-weight: 700; color: #111827; }
.wr-detail-pin {
    font-size: 0.7rem; font-weight: 600; color: #6b7280;
    background: #f3f4f6; padding: 0.15rem 0.45rem; border-radius: 5px;
    margin-left: 0.45rem;
}
.wr-detail-meta { font-size: 0.82rem; color: #6b7280; margin-top: 0.25rem; }
.wr-detail-status {
    font-size: 0.78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    padding: 0.35rem 0.75rem; border-radius: 999px;
    white-space: nowrap;
}
.wr-detail-status-pending   { background: #fef3c7; color: #92400e; }
.wr-detail-status-corrected { background: #dcfce7; color: #15803d; }

/* Toolbar */
.wr-toolbar {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
    padding: 0.55rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px 10px 0 0;
    border-bottom: none;
}
.wr-tool {
    display: inline-flex; align-items: center; gap: 0.35rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    color: #374151;
    padding: 0.4rem 0.7rem;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.wr-tool:hover { background: #eef2ff; border-color: #c7d2fe; color: #4338ca; }
.wr-tool-divider { width: 1px; background: #e5e7eb; margin: 0 0.25rem; }
.wr-tool-swatch {
    display: inline-block; width: 12px; height: 12px;
    border-radius: 3px; border: 1px solid rgba(0,0,0,0.08);
}
.wr-tool-swatch-red    { background: #fee2e2; box-shadow: inset 0 -2px 0 #ef4444; }
.wr-tool-swatch-yellow { background: #fef3c7; box-shadow: inset 0 -2px 0 #f59e0b; }

/* Editor */
.wr-editor-wrap {
    border: 1px solid #e5e7eb;
    border-radius: 0 0 10px 10px;
    background: #fff;
}
.wr-editor {
    padding: 1.2rem 1.4rem;
    min-height: 280px;
    font-size: 0.98rem;
    line-height: 1.75;
    color: #1f2937;
    white-space: pre-wrap;
    word-break: break-word;
    outline: none;
}
.wr-editor:focus { background: #fffdf5; }

/* Highlights inside the editor */
.wr-editor mark.hl-red {
    background: #fee2e2;
    color: #991b1b;
    text-decoration: underline wavy #ef4444;
    padding: 0.05rem 0.15rem;
    border-radius: 3px;
}
.wr-editor mark.hl-yellow {
    background: #fef3c7;
    color: #92400e;
    text-decoration: underline #f59e0b;
    padding: 0.05rem 0.15rem;
    border-radius: 3px;
}
.wr-editor mark.hl-note,
.writing-report-feedback mark.hl-note {
    background: #fef3c7;
    color: #92400e;
    text-decoration: underline #f59e0b;
    padding: 0.05rem 0.15rem;
    border-radius: 3px;
    cursor: help;
    position: relative;
}
/* Numbered superscript badge above ANY mark that has a teacher note attached,
   no matter what colour (red/yellow/etc). The mark must be position:relative. */
.wr-editor mark[data-note-num]::after,
.writing-report-feedback mark[data-note-num]::after,
.bk1136-writing-corrected-essay mark[data-note-num]::after {
    content: attr(data-note-num);
    position: absolute;
    top: -0.65em; right: -0.55em;
    background: #d97706;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(217, 119, 6, 0.4);
}
/* Marks with notes need positioning context for the badge above. */
.wr-editor mark, .writing-report-feedback mark, .bk1136-writing-corrected-essay mark { position: relative; }

/* Notes panel below the editor */
.wr-notes-panel {
    margin-top: 1rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 12px;
    padding: 1rem 1.15rem;
}
.wr-notes-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: #92400e;
    font-size: 0.92rem;
    margin-bottom: 0.6rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px dashed #fcd34d;
}
.wr-notes-count {
    margin-left: auto;
    background: #d97706;
    color: #fff;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
}
.wr-notes-empty {
    color: #92400e;
    font-size: 0.85rem;
    opacity: 0.8;
    line-height: 1.5;
}
.wr-notes-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.wr-notes-item {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.6rem 0.7rem;
    background: #fff;
    border: 1px solid #fde68a;
    border-radius: 8px;
}
.wr-notes-num {
    flex-shrink: 0;
    width: 24px; height: 24px;
    background: #d97706;
    color: #fff;
    font-weight: 700;
    font-size: 0.78rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wr-notes-body { flex: 1; min-width: 0; }
.wr-notes-quote {
    font-style: italic;
    color: #78350f;
    font-size: 0.82rem;
    margin-bottom: 0.25rem;
}
.wr-notes-text {
    color: #1f2937;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Note input modal — compact */
.wr-modal-note {
    max-width: 380px;
    text-align: left;
    padding: 1.1rem 1.2rem 1rem;
}
.wr-modal-note .wr-modal-icon {
    width: 38px; height: 38px;
    margin: 0 auto 0.55rem;
}
.wr-modal-note .wr-modal-icon svg { width: 20px; height: 20px; }
.wr-modal-note h3 {
    text-align: center;
    margin: 0 0 0.2rem;
    font-size: 0.98rem;
}
.wr-modal-note p {
    text-align: center;
    margin: 0 0 0.6rem;
    font-size: 0.78rem;
    color: #6b7280;
    line-height: 1.4;
}
.wr-note-snippet {
    background: #fef3c7;
    border-left: 3px solid #f59e0b;
    padding: 0.4rem 0.65rem;
    margin: 0 0 0.55rem;
    border-radius: 6px;
    color: #92400e;
    font-style: italic;
    font-size: 0.8rem;
    line-height: 1.4;
    max-height: 55px;
    overflow-y: auto;
}
.wr-note-textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d1d5db;
    border-radius: 7px;
    padding: 0.55rem 0.75rem;
    font-family: inherit;
    font-size: 0.88rem;
    line-height: 1.5;
    resize: vertical;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    min-height: 64px;
}
.wr-note-textarea:focus {
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}
.wr-modal-note .wr-modal-actions { margin-top: 0.7rem; gap: 0.5rem; }
.wr-modal-note .wr-btn {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    min-width: 90px;
}

/* Color picker inside the Add-note modal */
.wr-color-row {
    display: flex;
    gap: 0.45rem;
    justify-content: center;
    margin: 0 0 0.7rem;
    flex-wrap: wrap;
}
.wr-color {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 7px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: all 0.15s;
}
.wr-color span {
    display: inline-block;
    width: 11px; height: 11px;
    border-radius: 3px;
}
.wr-color-red    span { background: #fee2e2; box-shadow: inset 0 -2px 0 #ef4444; }
.wr-color-yellow span { background: #fef3c7; box-shadow: inset 0 -2px 0 #f59e0b; }
.wr-color-note   span { background: #ede9fe; box-shadow: inset 0 -2px 0 #7c3aed; }
.wr-color:hover { border-color: #d1d5db; background: #fff; }
.wr-color.active { background: #fff; color: #111827; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,0.15); }

/* Single-button toolbar emphasis (Add note becomes the primary tool) */
.wr-tool.wr-tool-note-primary {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    border-color: #fcd34d;
}
.wr-tool.wr-tool-note-primary:hover {
    background: linear-gradient(135deg, #fde68a, #fcd34d);
    color: #78350f;
    border-color: #f59e0b;
}

/* Autosave indicator (in the toolbar) */
.wr-autosave {
    margin-left: auto;
    font-size: 0.78rem;
    color: #6b7280;
    align-self: center;
    padding: 0 0.5rem;
}
.wr-autosave.is-saving { color: #4338ca; }
.wr-autosave.is-saved  { color: #15803d; }
.wr-autosave.is-error  { color: #b91c1c; }

/* Grade row */
.wr-grade-row {
    display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap;
    margin-top: 1.1rem;
}
.wr-grade-field { display: flex; flex-direction: column; gap: 0.3rem; }
.wr-grade-field label {
    font-size: 0.78rem; font-weight: 700;
    color: #374151; text-transform: uppercase; letter-spacing: 0.06em;
}
.wr-grade-input-group {
    display: flex; align-items: center; gap: 0.4rem;
    background: #f9fafb;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 0.45rem 0.7rem;
}
.wr-grade-input-group input {
    width: 80px; border: none; background: transparent;
    font-size: 1rem; font-weight: 700; color: #111827;
    outline: none;
}
.wr-grade-suffix { color: #9ca3af; font-size: 0.85rem; }
.wr-grade-spacer { flex: 1; }

/* Buttons */
.wr-btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    border-radius: 9px; border: none;
    font-size: 0.92rem; font-weight: 600; cursor: pointer;
    transition: transform 0.12s, box-shadow 0.12s;
}
.wr-btn-primary {
    background: linear-gradient(135deg, #4f46e5, #4338ca);
    color: #fff;
    box-shadow: 0 3px 10px rgba(79, 70, 229, 0.3);
}
.wr-btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(79, 70, 229, 0.4); }
.wr-btn:disabled, .wr-btn.is-loading { opacity: 0.7; cursor: wait; }

/* Help */
.wr-help {
    margin-top: 1.5rem;
    padding: 0.95rem 1.1rem;
    background: #eff6ff;
    border-left: 4px solid #3b82f6;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #1e3a8a;
}
.wr-help strong { display: block; margin-bottom: 0.3rem; font-size: 0.9rem; }
.wr-help ul { margin: 0; padding-left: 1.1rem; line-height: 1.55; }

/* Save modal */
.wr-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(17, 24, 39, 0.5);
    backdrop-filter: blur(3px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.wr-modal-overlay.is-open { display: flex; }
.wr-modal {
    background: #fff; border-radius: 14px;
    padding: 1.5rem 1.5rem 1.3rem;
    max-width: 400px; width: 90%;
    text-align: center;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
}
.wr-modal-icon {
    width: 60px; height: 60px;
    border-radius: 50%;
    margin: 0 auto 0.85rem;
    display: flex; align-items: center; justify-content: center;
}
.wr-modal-icon-success { background: #dcfce7; color: #16a34a; }
.wr-modal-icon-error   { background: #fee2e2; color: #dc2626; }
.wr-modal h3 { margin: 0 0 0.45rem; color: #111827; font-size: 1.15rem; }
.wr-modal p  { margin: 0 0 1.2rem; color: #4b5563; font-size: 0.92rem; line-height: 1.5; }

.bk1136-mark-complete-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    margin: 1.5rem 1.5rem;
    padding: 2.25rem 2rem;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfeff 100%);
    border: 1px solid #bbf7d0;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 4px 16px rgba(34, 197, 94, 0.08);
}
.bk1136-mark-complete-icon {
    width: 80px; height: 80px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #dcfce7;
    color: #16a34a;
    border-radius: 50%;
    margin-bottom: 0.25rem;
}
.bk1136-mark-complete-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #14532d;
    letter-spacing: -0.01em;
}
.bk1136-mark-complete-desc {
    font-size: 0.98rem;
    color: #166534;
    max-width: 480px;
    line-height: 1.55;
}
.bk1136-mark-complete-btn {
    margin-top: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.85rem 1.6rem;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.35);
}
.bk1136-mark-complete-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(34, 197, 94, 0.45);
}
.bk1136-mark-complete-btn:disabled,
.bk1136-mark-complete-btn.is-loading {
    opacity: 0.7;
    cursor: wait;
    transform: none;
}

.exercise-instruction {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.5rem;
    margin: 0.5rem 1.5rem 0.25rem;
    background: #fff;
    border-left: 3px solid #6366f1;
    border-radius: 0 10px 10px 0;
    color: #4338ca;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    box-shadow: 0 1px 6px rgba(99, 102, 241, 0.08);
}

.exercise-instruction svg {
    flex-shrink: 0;
    color: #6366f1;
    opacity: 0.8;
}

/* Exercise Progress Bar (universal for all types) */
.exercise-sticky-header {
    position: relative;
    z-index: 10;
    background: var(--card);
    padding-bottom: 0.5rem;
}
.exercise-sticky-header.is-stuck {
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    border-bottom: 1px solid var(--border);
    padding-top: 0.5rem;
}

.exercise-progress {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.exercise-progress-bar {
    flex: 1;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}

.exercise-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #2563eb);
    border-radius: 3px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.exercise-progress-text {
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
}

/* Spinner Overlay */
.exercise-spinner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spinner-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.spinner-ring {
    width: 48px;
    height: 48px;
    border: 4px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spinnerRotate 0.8s linear infinite;
}

@keyframes spinnerRotate {
    to { transform: rotate(360deg); }
}

.spinner-text {
    font-size: 1rem;
    font-weight: 600;
    color: #475569;
}

/* Exercise Results Panel */
.exercise-results {
    margin: 1.5rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-radius: 14px;
    border: 1px solid #e2e8f0;
}

.results-score-section {
    display: flex;
    align-items: center;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
}

.results-gauge {
    position: relative;
    width: 140px;
    height: 85px;
}

.gauge-svg {
    width: 100%;
    height: 100%;
}

.gauge-fill {
    transition: stroke-dasharray 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.gauge-label {
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    line-height: 1.2;
}

.gauge-percent {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
}

.gauge-status {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.gauge-pass { color: #16a34a; }
.gauge-fail { color: #dc2626; }

.results-stats {
    display: flex;
    gap: 0.75rem;
}

.result-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 1.25rem;
    border-radius: 10px;
    min-width: 72px;
}

.result-stat-num {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
}

.result-stat-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.25rem;
}

.result-correct {
    background: #dcfce7;
    color: #16a34a;
}

.result-wrong {
    background: #fee2e2;
    color: #dc2626;
}

.result-skipped {
    background: #fef3c7;
    color: #d97706;
}

.results-actions {
    display: flex;
    justify-content: center;
    margin-top: 1.25rem;
}

.btn-reset {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.5rem;
    background: #fff;
    color: #dc2626;
    border: 2px solid #fca5a5;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-reset:hover {
    background: #fef2f2;
    border-color: #ef4444;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.15);
}

/* Check Answers Button */
.exercise-check-section {
    display: flex;
    justify-content: center;
    padding: 1.25rem 1.5rem;
}

.btn-check-answers {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 2rem;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

.btn-check-answers:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35);
}

.btn-check-answers:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(37, 99, 235, 0.2);
}

.exercise-question-content {
    line-height: 1.7;
    font-size: 0.95rem;
}

/* Placement two-column layout: when the exercise carries an image, put the
   image on the left and the answer controls on the right instead of stacking
   them (the question was disappearing under the image on wide screens). The
   subtitle stays full-width above both columns; collapses to single column
   under 900px. */
@media (min-width: 900px) {
    body.placement-page .exercise-content-card:has(.exercise-question-content img) {
        display: grid;
        grid-template-columns: minmax(300px, 42%) 1fr;
        column-gap: 1.5rem;
        row-gap: 0.75rem;
        align-items: start;
    }
    body.placement-page .exercise-content-card:has(.exercise-question-content img) > .exercise-subtitle {
        grid-column: 1 / -1;
    }
    body.placement-page .exercise-content-card:has(.exercise-question-content img) > .exercise-question-content {
        grid-column: 1;
        margin: 0;
        position: sticky;
        top: 0.5rem;
    }
    body.placement-page .exercise-content-card:has(.exercise-question-content img) > .exercise-question-content img {
        width: 100% !important;
        max-height: 60vh !important;
    }
    body.placement-page .exercise-content-card:has(.exercise-question-content img) > *:not(.exercise-subtitle):not(.exercise-question-content) {
        grid-column: 2;
        min-width: 0;
    }
}

.exercise-question-content img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    float: none !important;
    position: relative !important;
    margin: 0 auto 1rem auto !important;
    clear: both;
}

/* Single-image content (reading exercises and HTML-inserted images):
   let it fill the column up to 900px wide and 900px tall, keeping the
   aspect ratio with object-fit:contain. The previous 467px height cap
   clipped tall/portrait reading images even though the intrinsic image
   fit within the width. */
.exercise-question-content:not(:has(> div ~ div)) img {
    max-width: 900px !important;
    max-height: 900px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto 1rem !important;
}

.exercise-question-content div[style*="flex"] img {
    display: inline-block !important;
    margin: 0 auto !important;
    clear: none;
    object-fit: contain;
    border-radius: 8px;
}

.exercise-question-content div[style*="flex"] > div {
    flex-shrink: 0;
}

.exercise-question-content .roundedCornerShadow,
.exercise-question-content .roundedCorner8 {
    width: auto !important;
    height: auto !important;
    max-width: 400px;
    margin: 0 auto 1rem auto;
    padding: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
}

.exercise-question-content .roundedCornerShadow img,
.exercise-question-content .roundedCorner8 img {
    height: auto !important;
    max-width: 500px !important;
    object-fit: contain;
    border-radius: 8px;
}

/* Hide broken legacy bullet image that comes through the thumbnail proxy
   (../Images/kids/TitleBullet.png). The source file is missing on the server
   so the broken icon was leaking into exercise content. */
/* ===== Lesson Files (PDF resource cards) ============================= */

/* Instruction banner above the PDF list */
.pdf-instruction-card {
    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
    border: 1px solid #bbf7d0;
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 2rem 1rem 2rem;
    box-shadow: 0 1px 2px rgba(16, 185, 129, 0.06);
}

.pdf-instruction-header {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.4rem;
}

.pdf-instruction-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    border-radius: 8px;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.28);
}

.pdf-instruction-heading {
    font-weight: 700;
    font-size: 1.15rem;
    color: #047857;
    letter-spacing: -0.01em;
}

.pdf-instruction-body {
    margin: 0;
    color: #334155;
    font-size: 0.92rem;
    line-height: 1.55;
    padding-left: 42px;
}

/* Grid of PDF cards */
.lesson-files-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
    padding: 0.5rem 2rem 2rem 2rem;
}

/* Individual PDF card — big red thumbnail + meta + button */
.pdf-file-card {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 1.1rem;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
    position: relative;
}

.pdf-file-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}

.pdf-file-thumb {
    flex: 0 0 auto;
    width: 84px;
    height: 100px;
    border-radius: 8px;
    background: linear-gradient(160deg, #ef4444 0%, #dc2626 100%);
    color: #fff;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 0.6rem;
    position: relative;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
}

/* Folded corner detail */
.pdf-file-thumb::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 22px;
    height: 22px;
    background: linear-gradient(225deg, #fff 50%, transparent 50%);
    border-top-right-radius: 8px;
}

.pdf-file-thumb-label {
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: 0.05em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.pdf-file-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.pdf-file-name {
    font-weight: 700;
    font-size: 1.02rem;
    color: #0f172a;
    line-height: 1.35;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.pdf-file-meta {
    font-size: 0.8rem;
    color: #64748b;
    margin-bottom: 0.15rem;
    word-break: break-word;
}

.pdf-file-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: auto;
    align-self: flex-start;
    padding: 0.55rem 1.05rem;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.2s, filter 0.15s;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.28);
    font-family: inherit;
}

.pdf-file-open-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
    filter: brightness(1.05);
}

.pdf-file-open-btn:active {
    transform: translateY(0);
}

/* Footer with Back button (bottom-right of the PDF page) */
.pdf-resource-footer {
    display: flex;
    justify-content: flex-end;
    padding: 0 2rem 1.75rem 2rem;
}

.pdf-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.4rem;
    background: #fff;
    color: #475569;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.2s, box-shadow 0.2s, color 0.2s;
}

.pdf-back-btn:hover {
    border-color: #94a3b8;
    color: #1e293b;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

/* Hide the steps sidebar entirely when the page renders PDF resources */
.exercise-page-pdf .exercise-sidebar {
    display: none;
}

.exercise-page-pdf .exercise-main {
    width: 100%;
    max-width: 100%;
}

/* PDF viewer overlay (modal) */
.pdf-viewer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.75);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.pdf-viewer-overlay.open {
    display: flex;
}

.pdf-viewer-frame {
    background: #fff;
    width: 100%;
    max-width: 1100px;
    height: 92vh;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
}

.pdf-viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
    background: linear-gradient(135deg, #1e293b, #0f172a);
    color: #fff;
    flex: 0 0 auto;
}

.pdf-viewer-title {
    font-weight: 600;
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pdf-viewer-close {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s;
}

.pdf-viewer-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.pdf-viewer-iframe {
    flex: 1 1 auto;
    width: 100%;
    border: 0;
    background: #525659;
}

.exercise-question-content img[src*="TitleBullet.png"],
.exercise-question-content img[src*="TitleBullet"] {
    display: none !important;
}

.exercise-question-content table {
    width: auto !important;
    margin: 0 auto 1rem auto;
}

.exercise-question-content table td {
    text-align: center;
    vertical-align: top;
    padding: 0.5rem 1rem;
}

.exercise-question-content .customimage {
    height: auto !important;
    background-color: transparent !important;
    padding: 0 !important;
}

.exercise-body {
    padding: 2rem;
}

/* Video Player */
.exercise-video-container {
    display: flex;
    justify-content: center;
    padding: 1rem;
}

.exercise-video-player {
    width: 100%;
    max-width: 480px;
    border-radius: 12px;
    background: #000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* Content Cards - Image + Audio + Label */
.content-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1.25rem;
    max-width: 100%;
}

.content-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    overflow: hidden;
    text-align: center;
    transition: box-shadow 0.2s, transform 0.2s;
}

.content-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* Question-prefix arrow (→). Rendered by wrapping the char in
   <span class="q-arrow"> at the DB level. Kept slightly bigger and bolder
   so it reads clearly as a "answer goes here" cue. */
.q-arrow {
    font-size: 1.6rem;
    font-weight: 700;
    color: #3b82f6;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.15rem;
    line-height: 1;
}

/* Card number label rendered under the play button (image-audio grid).
   Matches the styling of the inline numbers used inside raw-HTML audio
   players (bold, black, slightly larger). */
.content-card-num {
    text-align: center;
    color: #000;
    font-weight: 700;
    font-size: 1.15rem;
    margin-top: 6px;
}
.content-audio-compact .content-card-num {
    margin-top: 4px;
}

.content-card-image {
    background: transparent;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 160px;
    overflow: hidden;
    box-sizing: border-box;
}

.content-card-image img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 0;
    display: block;
}

.content-card-label {
    padding: 0.625rem 0.75rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--primary);
}

.content-card-play-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 auto 0.75rem;
    border: 2px solid var(--primary);
    border-radius: 50%;
    background: transparent;
    color: var(--primary);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.content-card-play-btn:hover,
.content-card-play-btn.playing {
    background: var(--primary);
    color: var(--primary-foreground);
}

/* Single content card (1 image + 1 audio) */
.content-single-card {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: hidden;
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.content-single-card-image {
    background: transparent;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.content-single-card-image img {
    max-width: 100%;
    max-height: 500px;
    object-fit: contain;
    border-radius: 0.5rem;
}

/* Compact audio cards (for separated image + audio layout) */
.content-audio-grid {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.content-audio-compact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    flex: 1;
    max-width: 160px;
}

.content-audio-label {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--primary);
    white-space: nowrap;
}

/* Custom Audio Player */
.custom-audio-player {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    margin: 1.25rem 2rem 0;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.audio-player-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    flex-shrink: 0;
}

.audio-play-btn {
    background: var(--primary);
    color: white;
}

.audio-play-btn:hover {
    background: #2563eb;
    transform: scale(1.05);
}

.audio-stop-btn {
    background: #e2e8f0;
    color: #64748b;
}

.audio-stop-btn:hover {
    background: #cbd5e1;
    color: #334155;
}

.audio-time {
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
    min-width: 36px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.audio-seek-wrapper {
    flex: 1;
    position: relative;
    height: 28px;
    display: flex;
    align-items: center;
}

.audio-seek-bar {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: #e2e8f0;
    border-radius: 3px;
    outline: none;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

.audio-seek-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: var(--primary);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(37, 99, 235, 0.3);
    transition: transform 0.15s;
}

.audio-seek-bar::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.audio-seek-bar::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--primary);
    border-radius: 50%;
    border: none;
    cursor: pointer;
}

.audio-seek-progress {
    position: absolute;
    top: 50%;
    left: 0;
    height: 6px;
    background: linear-gradient(90deg, #3b82f6, #2563eb);
    border-radius: 3px;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1;
}

/* PictureDropDown Exercise Template */
.picture-dropdown-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    padding-bottom: 0.5rem;
    margin-top: 1.5rem;
}

/* Picture-cards layout: only apply when the exercise content actually has
   multiple top-level cards. Single-image content (e.g. reading exercises
   with one embedded picture) falls through to the regular block rule above. */
.ex-img-400,
.exercise-question-content:has(> div > img):has(> div ~ div) img {
    width: 110px !important;
    height: 110px !important;
    max-width: 110px !important;
    max-height: 110px !important;
    object-fit: contain;
    background: #fff;
    display: block;
    margin: 0 auto;
}

/* Newer picture-cards layout used in Robot Power exercises (e.g. ex 7690,
   7749, 7724, 7725). Any img at ANY depth under a horizontal-flex container
   gets capped — including HTML-level width="150" attributes that would
   otherwise override generic rules. Bumped specificity with body prefix so
   this beats the single-image `.exercise-question-content:not(:has(...))`
   rule further up the file. */
body .exercise-question-content div[style*="display: flex"] img,
body .exercise-question-content div[style*="display:flex"] img,
body .exercise-question-content div[style*="display: flex"] img[width],
body .exercise-question-content div[style*="display:flex"] img[width] {
    max-width: 110px !important;
    max-height: 110px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
}
/* Also clamp any horizontal-flex row itself so the row can never spill past
   the exercise column (was letting cards escape when the intrinsic image
   width was 500+px). Force baseline-consistent stretch so every card is
   the same height and its number caption lines up with its neighbours. */
body .exercise-question-content > div[style*="display: flex"],
body .exercise-question-content > div[style*="display:flex"] {
    max-width: 100% !important;
    flex-wrap: wrap !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
    justify-content: center !important;
    row-gap: 20px !important;
    column-gap: 20px !important;
    gap: 20px !important;
    overflow: visible !important;
}
/* Card size — sensible baseline that lets 4-5 fit per row on a typical
   exercise column, and cleanly wraps to a new line when they don't. */
body .exercise-question-content > div[style*="display: flex"] > div,
body .exercise-question-content > div[style*="display:flex"] > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    min-height: 230px !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    padding: 6px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}
/* Any nested wrapper around the image should not shrink it. */
body .exercise-question-content > div[style*="display: flex"] > div > div {
    width: 100% !important;
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 180px !important;
}
/* Image: 180px tall. Overrides any inline max-height (e.g. 120px baked in
   by the content author). object-fit:contain keeps the aspect ratio. */
body .exercise-question-content > div[style*="display: flex"] > div img,
body .exercise-question-content > div[style*="display:flex"] > div img,
body .exercise-question-content > div[style*="display: flex"] > div > div img,
body .exercise-question-content > div[style*="display:flex"] > div > div img {
    width: auto !important;
    height: 180px !important;
    max-height: 180px !important;
    min-height: 180px !important;
    max-width: 100% !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
    flex: 0 0 180px !important;
}
/* Caption sits on the same baseline across cards. */
body .exercise-question-content > div[style*="display: flex"] > div > p,
body .exercise-question-content > div[style*="display:flex"] > div > p {
    margin: 0.5rem 0 0 !important;
    font-weight: 600;
    color: #1e293b;
    text-align: center;
    line-height: 1.2;
}
/* RobotPowerL3 reading exercises with partially-clipped "Look, listen and
   read." heading baked into the very top of the source PNG. Minimal crop
   from the top via cover + object-position:bottom so the heading strip
   disappears without eating into the comic panels. */
body .exercise-question-content[data-ex-id="8121"] img {
    max-width: 900px !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 759 / 208 !important;
    object-fit: cover !important;
    object-position: bottom center !important;
    display: block !important;
    margin: 0 auto 1rem !important;
}
body .exercise-question-content[data-ex-id="8123"] img {
    max-width: 900px !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 581 / 322 !important;
    object-fit: cover !important;
    object-position: bottom center !important;
    display: block !important;
    margin: 0 auto 1rem !important;
}
body .exercise-question-content[data-ex-id="8168"] img {
    max-width: 900px !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 541 / 298 !important;
    object-fit: cover !important;
    object-position: bottom center !important;
    display: block !important;
    margin: 0 auto 1rem !important;
}

/* RobotPowerL2 reading exercises where the SOURCE PNG bakes the
   "Write yes or no" / "Choose and write" instruction + red arrow into
   the bottom ~15% of the image. That prompt is already rendered by the
   exercise template underneath, so crop it out of the image itself.
   Only these 6 exercises have the baked-in prompt — the other 24 reading
   images are pure comic panels and must not be cropped. Uses
   aspect-ratio + object-fit so the crop stays proportional at every
   viewport width. */
body .exercise-question-content[data-ex-id="7830"] img,
body .exercise-question-content[data-ex-id="7831"] img,
body .exercise-question-content[data-ex-id="7832"] img,
body .exercise-question-content[data-ex-id="7848"] img,
body .exercise-question-content[data-ex-id="7849"] img,
body .exercise-question-content[data-ex-id="7850"] img {
    max-width: 700px !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 472 / 290 !important;
    object-fit: cover !important;
    object-position: top center !important;
    display: block !important;
    margin: 0 auto 1rem !important;
}

/* Ex 7864 (RobotPowerL2 unit4 listening ex2) — image (400×180 natural)
   centered on top, audio player centered underneath as a horizontal bar.
   The markup avoids inline display:flex to sidestep the picture-card
   rules; this section just tweaks the audio player + image sizing. */
body .exercise-question-content[data-ex-id="7864"] > div:first-child img {
    display: block !important;
    margin: 0 auto !important;
    width: auto !important;
    height: auto !important;
    max-width: 400px !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: initial !important;
    object-position: initial !important;
    transform: none !important;
}
body .exercise-question-content[data-ex-id="7864"] .ex7864-audio-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 15px !important;
    padding: 10px 0 !important;
    max-width: 100% !important;
}
body .exercise-question-content[data-ex-id="7864"] .ex7864-audio-row .custom-audio-player {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0.5rem 1rem !important;
    gap: 0.5rem !important;
}
body .exercise-question-content[data-ex-id="7864"] .ex7864-audio-row .custom-audio-player .audio-seek-wrapper {
    width: 150px !important;
    flex: 0 0 150px !important;
}

/* Ex 1023 (SM Reading) — legacy <table> put a 368px image on the left
   and text on the right, so each speaker line wrapped into 4-5 rows.
   Stack the table cells vertically: image on top (medium size, centered),
   full dialog text below at container width so each speaker's turn stays
   on one line and only wraps at the real page edge. */
body .exercise-question-content[data-ex-id="1023"] table,
body .exercise-question-content[data-ex-id="1023"] tbody,
body .exercise-question-content[data-ex-id="1023"] tr,
body .exercise-question-content[data-ex-id="1023"] td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    text-align: left !important;
}
body .exercise-question-content[data-ex-id="1023"] .roundedCornerShadow,
body .exercise-question-content[data-ex-id="1023"] .roundedCorner8 {
    width: 360px !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 4px !important;
    margin: 0 auto 1rem auto !important;
    box-sizing: border-box;
}
body .exercise-question-content[data-ex-id="1023"] img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

/* Ex 7854 / 7877 (RobotPowerL2 vocab ex1) — user asked to enlarge the
   picture content inside each card WITHOUT touching the card frame.
   transform:scale grows the visual only; the flex/grid layout box is
   untouched so the frame, border, and card size stay the same. */
body .exercise-question-content[data-ex-id="7854"] > div[style*="display: flex"] > div img,
body .exercise-question-content[data-ex-id="7854"] > div[style*="display:flex"] > div img,
body .exercise-question-content[data-ex-id="7854"] > div[style*="display: flex"] > div > div img,
body .exercise-question-content[data-ex-id="7854"] > div[style*="display:flex"] > div > div img,
body .exercise-question-content[data-ex-id="7877"] > div[style*="display: flex"] > div img,
body .exercise-question-content[data-ex-id="7877"] > div[style*="display:flex"] > div img,
body .exercise-question-content[data-ex-id="7877"] > div[style*="display: flex"] > div > div img,
body .exercise-question-content[data-ex-id="7877"] > div[style*="display:flex"] > div > div img {
    transform: scale(1.5) !important;
    transform-origin: center !important;
}

/* Ex 8134 / 8161 (RobotPowerL3 vocab ex2) — 6-7 picture cards. Force a
   4-column grid so the layout is exactly 4 on top + the rest aligned
   underneath (not the scattered wrap flex was producing). */
body .exercise-question-content[data-ex-id="8134"] > div[style*="display: flex"],
body .exercise-question-content[data-ex-id="8134"] > div[style*="display:flex"],
body .exercise-question-content[data-ex-id="8161"] > div[style*="display: flex"],
body .exercise-question-content[data-ex-id="8161"] > div[style*="display:flex"] {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    justify-items: center !important;
    align-items: stretch !important;
    row-gap: 20px !important;
    column-gap: 20px !important;
    gap: 20px !important;
    max-width: 100% !important;
    overflow: visible !important;
}
body .exercise-question-content[data-ex-id="8134"] > div[style*="display: flex"] > div,
body .exercise-question-content[data-ex-id="8134"] > div[style*="display:flex"] > div,
body .exercise-question-content[data-ex-id="8161"] > div[style*="display: flex"] > div,
body .exercise-question-content[data-ex-id="8161"] > div[style*="display:flex"] > div {
    width: 100% !important;
    max-width: 220px !important;
    min-width: 0 !important;
}
/* Embedded video block in an exercise — centre it in the column and cap it
   so it sits right above the picture-cards row (e.g. ex 7770). */
body .exercise-question-content > video {
    display: block !important;
    margin: 0 auto 1.25rem !important;
    max-width: min(600px, 100%) !important;
    height: auto !important;
    float: none !important;
}

/* Ex 7754 (RobotPowerL1 unit6 listening ex1) — legacy roundedCorner cards
   were letting the artwork clip because of inline fixed width/height. Force
   auto-sized cards with padding and cap the img so it fits fully inside. */
body .exercise-question-content[data-ex-id="7754"] .roundedCorner8,
body .exercise-question-content[data-ex-id="7754"] .roundedCornerShadow {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    padding: 10px !important;
    margin: 8px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    vertical-align: top !important;
    box-sizing: border-box !important;
}
body .exercise-question-content[data-ex-id="7754"] .roundedCorner8 img,
body .exercise-question-content[data-ex-id="7754"] .roundedCornerShadow img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 180px !important;
    max-height: 130px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    border-radius: 6px;
    background: transparent !important;
}
body .exercise-question-content[data-ex-id="7754"] table {
    margin: 0 auto !important;
    border-collapse: separate !important;
    border-spacing: 6px !important;
}
body .exercise-question-content[data-ex-id="7754"] table td {
    text-align: center !important;
    vertical-align: top !important;
    padding: 4px !important;
}
/* Cap each card's own width so the row stays within the exercise column.
   Turn each card into a fixed-height flex column so the caption line lines
   up across all cards regardless of the original image aspect ratio. */
.exercise-question-content > div[style*="display: flex"] > div,
.exercise-question-content > div[style*="display:flex"] > div {
    max-width: 150px;
    min-width: 0;
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 140px;
}
/* Force the image "slot" to be a fixed 110px box; the actual img already caps
   at 110px above via object-fit:contain — this just reserves consistent space. */
.exercise-question-content > div[style*="display: flex"] > div img,
.exercise-question-content > div[style*="display:flex"] > div img,
.exercise-question-content > div[style*="display: flex"] > div > div img,
.exercise-question-content > div[style*="display:flex"] > div > div img {
    height: 110px !important;
}
/* Consistent caption position across cards. */
.exercise-question-content > div[style*="display: flex"] > div > p,
.exercise-question-content > div[style*="display:flex"] > div > p {
    margin: 0.4rem 0 0 !important;
    font-weight: 600;
}

/* Per-image scale bump — original artwork is smaller than its siblings so
   object-fit:contain shrinks it visibly. Give it slightly more room. */
.exercise-question-content img[src*="2316495095.jpg"] {
    max-width: 130px !important;
    max-height: 130px !important;
    transform: scale(1.15);
    transform-origin: center;
}
/* Center the whole row of picture cards + widen the gap between them. */
.exercise-question-content > div[style*="display: flex"]:has(> div img),
.exercise-question-content > div[style*="display:flex"]:has(> div img),
.exercise-question-content > div[style*="display: flex"]:has(> div > div img),
.exercise-question-content > div[style*="display:flex"]:has(> div > div img) {
    justify-content: center !important;
    gap: 60px !important;
}

/* When the exercise content is a series of picture cards (the common
   <div style="display:flex"> pattern that legacy content uses), force a
   single horizontal row regardless of how the original HTML grouped them.
   `display: contents` on the inner flex wrappers makes their cards become
   direct flex items of the outer .exercise-question-content, so cards that
   were stranded outside the wrapper still join the same row. */
.exercise-question-content:has(> div > img):has(> div ~ div) {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    align-items: flex-start;
    justify-content: flex-start;
    padding-bottom: 6px;
    counter-reset: ex-card;
}

/* Only "unwrap" horizontal flex containers (the row holding the cards).
   Cards themselves often have display: flex + flex-direction: column —
   those must stay as boxes so their image + number stack vertically. */
.exercise-question-content:has(> div > img):has(> div ~ div) > div[style*="display: flex"]:not([style*="flex-direction: column"]):not([style*="flex-direction:column"]),
.exercise-question-content:has(> div > img):has(> div ~ div) > div[style*="display:flex"]:not([style*="flex-direction: column"]):not([style*="flex-direction:column"]) {
    display: contents !important;
}

/* Card = (a) a direct child of the question-content that is NOT a horizontal
   flex wrapper (i.e. it's an orphan card or a plain block card), OR
   (b) a child of a horizontal flex wrapper. We must NOT match the image
   wrapper inside orphan cards (which also has display: flex), so we exclude
   horizontal-flex parents from being treated as cards and only treat their
   CHILDREN as cards. */
.exercise-question-content:has(> div > img):has(> div ~ div) > div:not([style*="display: flex"]):not([style*="display:flex"]),
.exercise-question-content:has(> div > img):has(> div ~ div) > div[style*="flex-direction: column"],
.exercise-question-content:has(> div > img):has(> div ~ div) > div[style*="flex-direction:column"],
.exercise-question-content:has(> div > img):has(> div ~ div) > div[style*="display: flex"]:not([style*="flex-direction: column"]):not([style*="flex-direction:column"]) > div,
.exercise-question-content:has(> div > img):has(> div ~ div) > div[style*="display:flex"]:not([style*="flex-direction: column"]):not([style*="flex-direction:column"]) > div {
    flex: 0 0 auto;
    width: 120px;
    min-width: 120px;
    text-align: center;
    counter-increment: ex-card;
    position: relative;
}

/* Hide the legacy hand-typed number paragraph and inject a clean
   auto-counter (1, 2, 3...) so cards always get sequential numbers,
   even when the source data has duplicates or wrong values. */
.exercise-question-content:has(> div > img):has(> div ~ div) p {
    display: none !important;
}

.exercise-question-content:has(> div > img):has(> div ~ div) > div:not([style*="display: flex"]):not([style*="display:flex"])::after,
.exercise-question-content:has(> div > img):has(> div ~ div) > div[style*="flex-direction: column"]::after,
.exercise-question-content:has(> div > img):has(> div ~ div) > div[style*="flex-direction:column"]::after,
.exercise-question-content:has(> div > img):has(> div ~ div) > div[style*="display: flex"]:not([style*="flex-direction: column"]):not([style*="flex-direction:column"]) > div::after,
.exercise-question-content:has(> div > img):has(> div ~ div) > div[style*="display:flex"]:not([style*="flex-direction: column"]):not([style*="flex-direction:column"]) > div::after {
    content: counter(ex-card);
    display: block;
    margin-top: 6px;
    font-weight: 600;
    color: #475569;
    font-size: 0.95rem;
}

/* Per-exercise overrides for picture-card layouts.
   Scoped via data-ex-id so they don't affect other exercises. */
.exercise-question-content[data-ex-id="7868"],
.exercise-question-content[data-ex-id="7879"] {
    justify-content: center !important;
    gap: 32px !important;
}

.exercise-question-content[data-ex-id="7868"] img,
.exercise-question-content[data-ex-id="7879"] img {
    width: 270px !important;
    height: 270px !important;
    max-width: 270px !important;
    max-height: 270px !important;
}

.exercise-question-content[data-ex-id="7868"] > div,
.exercise-question-content[data-ex-id="7879"] > div {
    width: 280px !important;
    min-width: 280px !important;
}

/* Per-exercise overrides for legacy roundedCorner8 / roundedCornerShadow
   image clamp (default is 160×120). Enlarges the dialog header image to
   700×467 max while keeping aspect ratio. */
.exercise-question-content[data-ex-id="1462"] .roundedCorner8,
.exercise-question-content[data-ex-id="1462"] .roundedCornerShadow,
.exercise-question-content[data-ex-id="723"] .roundedCorner8,
.exercise-question-content[data-ex-id="723"] .roundedCornerShadow,
.exercise-question-content[data-ex-id="976"] .roundedCorner8,
.exercise-question-content[data-ex-id="976"] .roundedCornerShadow,
.exercise-question-content[data-ex-id="978"] .roundedCorner8,
.exercise-question-content[data-ex-id="978"] .roundedCornerShadow,
.exercise-question-content[data-ex-id="897"] .roundedCorner8,
.exercise-question-content[data-ex-id="897"] .roundedCornerShadow,
.exercise-question-content[data-ex-id="895"] .roundedCorner8,
.exercise-question-content[data-ex-id="895"] .roundedCornerShadow,
.exercise-question-content[data-ex-id="896"] .roundedCorner8,
.exercise-question-content[data-ex-id="896"] .roundedCornerShadow,
.exercise-question-content[data-ex-id="1020"] .roundedCorner8,
.exercise-question-content[data-ex-id="1020"] .roundedCornerShadow,
.exercise-question-content[data-ex-id="1954"] .roundedCorner8,
.exercise-question-content[data-ex-id="1954"] .roundedCornerShadow,
.exercise-question-content[data-ex-id="1955"] .roundedCorner8,
.exercise-question-content[data-ex-id="1955"] .roundedCornerShadow,
.exercise-question-content[data-ex-id="1956"] .roundedCorner8,
.exercise-question-content[data-ex-id="1956"] .roundedCornerShadow,
.exercise-question-content[data-ex-id="1966"] .roundedCorner8,
.exercise-question-content[data-ex-id="1966"] .roundedCornerShadow,
.exercise-question-content[data-ex-id="1967"] .roundedCorner8,
.exercise-question-content[data-ex-id="1967"] .roundedCornerShadow,
.exercise-question-content[data-ex-id="1968"] .roundedCorner8,
.exercise-question-content[data-ex-id="1968"] .roundedCornerShadow,
.exercise-question-content[data-ex-id="1992"] .roundedCorner8,
.exercise-question-content[data-ex-id="1992"] .roundedCornerShadow,
.exercise-question-content[data-ex-id="1997"] .roundedCorner8,
.exercise-question-content[data-ex-id="1997"] .roundedCornerShadow,
.exercise-question-content[data-ex-id="1994"] .roundedCorner8,
.exercise-question-content[data-ex-id="1994"] .roundedCornerShadow,
.exercise-question-content[data-ex-id="1998"] .roundedCorner8,
.exercise-question-content[data-ex-id="1998"] .roundedCornerShadow,
.exercise-question-content[data-ex-id="2000"] .roundedCorner8,
.exercise-question-content[data-ex-id="2000"] .roundedCornerShadow,
.exercise-question-content[data-ex-id="2018"] .roundedCorner8,
.exercise-question-content[data-ex-id="2018"] .roundedCornerShadow,
.exercise-question-content[data-ex-id="2019"] .roundedCorner8,
.exercise-question-content[data-ex-id="2019"] .roundedCornerShadow,
.exercise-question-content[data-ex-id="2020"] .roundedCorner8,
.exercise-question-content[data-ex-id="2020"] .roundedCornerShadow,
.exercise-question-content[data-ex-id="1072"] .roundedCorner8,
.exercise-question-content[data-ex-id="1072"] .roundedCornerShadow {
    width: auto !important;
    height: auto !important;
    max-width: 600px !important;
    margin: 0 auto 1rem auto !important;
}

.exercise-question-content[data-ex-id="1462"] .roundedCorner8 img,
.exercise-question-content[data-ex-id="1462"] .roundedCornerShadow img,
.exercise-question-content[data-ex-id="723"] .roundedCorner8 img,
.exercise-question-content[data-ex-id="723"] .roundedCornerShadow img,
.exercise-question-content[data-ex-id="976"] .roundedCorner8 img,
.exercise-question-content[data-ex-id="976"] .roundedCornerShadow img,
.exercise-question-content[data-ex-id="978"] .roundedCorner8 img,
.exercise-question-content[data-ex-id="978"] .roundedCornerShadow img,
.exercise-question-content[data-ex-id="897"] .roundedCorner8 img,
.exercise-question-content[data-ex-id="897"] .roundedCornerShadow img,
.exercise-question-content[data-ex-id="895"] .roundedCorner8 img,
.exercise-question-content[data-ex-id="895"] .roundedCornerShadow img,
.exercise-question-content[data-ex-id="896"] .roundedCorner8 img,
.exercise-question-content[data-ex-id="896"] .roundedCornerShadow img,
.exercise-question-content[data-ex-id="1020"] .roundedCorner8 img,
.exercise-question-content[data-ex-id="1020"] .roundedCornerShadow img,
.exercise-question-content[data-ex-id="1954"] .roundedCorner8 img,
.exercise-question-content[data-ex-id="1954"] .roundedCornerShadow img,
.exercise-question-content[data-ex-id="1955"] .roundedCorner8 img,
.exercise-question-content[data-ex-id="1955"] .roundedCornerShadow img,
.exercise-question-content[data-ex-id="1956"] .roundedCorner8 img,
.exercise-question-content[data-ex-id="1956"] .roundedCornerShadow img,
.exercise-question-content[data-ex-id="1966"] .roundedCorner8 img,
.exercise-question-content[data-ex-id="1966"] .roundedCornerShadow img,
.exercise-question-content[data-ex-id="1967"] .roundedCorner8 img,
.exercise-question-content[data-ex-id="1967"] .roundedCornerShadow img,
.exercise-question-content[data-ex-id="1968"] .roundedCorner8 img,
.exercise-question-content[data-ex-id="1968"] .roundedCornerShadow img,
.exercise-question-content[data-ex-id="1992"] .roundedCorner8 img,
.exercise-question-content[data-ex-id="1992"] .roundedCornerShadow img,
.exercise-question-content[data-ex-id="1997"] .roundedCorner8 img,
.exercise-question-content[data-ex-id="1997"] .roundedCornerShadow img,
.exercise-question-content[data-ex-id="1994"] .roundedCorner8 img,
.exercise-question-content[data-ex-id="1994"] .roundedCornerShadow img,
.exercise-question-content[data-ex-id="1998"] .roundedCorner8 img,
.exercise-question-content[data-ex-id="1998"] .roundedCornerShadow img,
.exercise-question-content[data-ex-id="2000"] .roundedCorner8 img,
.exercise-question-content[data-ex-id="2000"] .roundedCornerShadow img,
.exercise-question-content[data-ex-id="2018"] .roundedCorner8 img,
.exercise-question-content[data-ex-id="2018"] .roundedCornerShadow img,
.exercise-question-content[data-ex-id="2019"] .roundedCorner8 img,
.exercise-question-content[data-ex-id="2019"] .roundedCornerShadow img,
.exercise-question-content[data-ex-id="2020"] .roundedCorner8 img,
.exercise-question-content[data-ex-id="2020"] .roundedCornerShadow img,
.exercise-question-content[data-ex-id="1072"] .roundedCorner8 img,
.exercise-question-content[data-ex-id="1072"] .roundedCornerShadow img {
    width: 100% !important;
    height: auto !important;
    max-width: 600px !important;
    max-height: none !important;
    object-fit: contain !important;
    border-radius: 8px;
}

/* Exercise 5056 / 5218 specific: force each text-filling question on a single
   line (no wrap), shrink font + padding so long sentences fit on screen. */
.text-filling-list[data-ex-id="5056"] .text-filling-row,
.text-filling-list[data-ex-id="5218"] .text-filling-row {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    white-space: nowrap;
    font-size: 0.72rem !important;
    padding: 0.5rem 0.6rem !important;
    gap: 0.25rem !important;
}
.text-filling-list[data-ex-id="5056"] .text-filling-content,
.text-filling-list[data-ex-id="5056"] .text-filling-inline,
.text-filling-list[data-ex-id="5218"] .text-filling-content,
.text-filling-list[data-ex-id="5218"] .text-filling-inline {
    flex-wrap: nowrap !important;
    white-space: nowrap;
    font-size: 0.72rem !important;
    gap: 0.2rem !important;
}
.text-filling-list[data-ex-id="5056"] .text-filling-row *,
.text-filling-list[data-ex-id="5218"] .text-filling-row * {
    font-size: 0.72rem !important;
}
.text-filling-list[data-ex-id="5056"] .text-filling-row input,
.text-filling-list[data-ex-id="5218"] .text-filling-row input {
    font-size: 0.72rem !important;
    padding: 2px 4px !important;
}

/* Exercise 5129 / 1393 specific: dialog rows on a single line, tighter spacing
   so number + sentence + input fit without huge gaps. */
.dialog-list[data-ex-id="5129"] .dialog-row,
.dialog-list[data-ex-id="1393"] .dialog-row {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    white-space: nowrap;
    gap: 0.25rem !important;
    padding: 0.5rem 0.6rem !important;
    font-size: 0.85rem !important;
}
.dialog-list[data-ex-id="5129"] .dialog-text,
.dialog-list[data-ex-id="1393"] .dialog-text {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    white-space: nowrap;
    flex-wrap: nowrap;
}
.dialog-list[data-ex-id="5129"] .dialog-speaker,
.dialog-list[data-ex-id="1393"] .dialog-speaker {
    margin-right: 0 !important;
    min-width: 0 !important;
    width: auto !important;
}
.dialog-list[data-ex-id="5129"] .dialog-row *,
.dialog-list[data-ex-id="1393"] .dialog-row * {
    font-size: 0.85rem !important;
}
.dialog-list[data-ex-id="5129"] .dialog-row input,
.dialog-list[data-ex-id="1393"] .dialog-row input {
    padding: 2px 4px !important;
}

/* Ex 978 (SM5 Reading ordering) — answers are single digits (1-5).
   Switch the dialog-text container from flex to plain inline flow so the
   input and the surrounding <span>s share a real text baseline (flex was
   pushing the input onto its own line when DialogPart1 was empty). */
.dialog-list[data-ex-id="978"] .dialog-slot,
.dialog-list[data-ex-id="978"] .dialog-input {
    min-width: 42px !important;
    max-width: 60px !important;
    padding: 0.1rem 0.35rem !important;
    text-align: center !important;
    vertical-align: baseline !important;
    display: inline-block !important;
}
.dialog-list[data-ex-id="978"] .dialog-text {
    display: block !important;
    line-height: 1.7 !important;
}
.dialog-list[data-ex-id="978"] .dialog-part {
    display: inline !important;
    white-space: normal !important;
}
.dialog-list[data-ex-id="978"] .dialog-prefix {
    display: inline !important;
    width: auto !important;
    margin: 0 !important;
}

/* Exercises 7465 / 7466 / 7467 specific: center the audio player.
   Stack the legacy <table> cells vertically and center each row so the player
   sits centered below its label. */
.exercise-content-card[data-ex-id="7465"] .exercise-question-content,
.exercise-content-card[data-ex-id="7466"] .exercise-question-content,
.exercise-content-card[data-ex-id="7467"] .exercise-question-content {
    text-align: center !important;
    width: 100%;
}
.exercise-content-card[data-ex-id="7465"] .exercise-question-content table,
.exercise-content-card[data-ex-id="7466"] .exercise-question-content table,
.exercise-content-card[data-ex-id="7467"] .exercise-question-content table {
    display: block !important;
    width: 100% !important;
    margin: 0 auto !important;
    float: none !important;
    border-collapse: collapse;
}
.exercise-content-card[data-ex-id="7465"] .exercise-question-content tbody,
.exercise-content-card[data-ex-id="7466"] .exercise-question-content tbody,
.exercise-content-card[data-ex-id="7467"] .exercise-question-content tbody {
    display: block !important;
    width: 100% !important;
}
.exercise-content-card[data-ex-id="7465"] .exercise-question-content tr,
.exercise-content-card[data-ex-id="7466"] .exercise-question-content tr,
.exercise-content-card[data-ex-id="7467"] .exercise-question-content tr {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
}
.exercise-content-card[data-ex-id="7465"] .exercise-question-content td,
.exercise-content-card[data-ex-id="7466"] .exercise-question-content td,
.exercise-content-card[data-ex-id="7467"] .exercise-question-content td {
    display: block !important;
    text-align: center !important;
    width: auto !important;
}
.exercise-content-card[data-ex-id="7465"] .custom-audio-player,
.exercise-content-card[data-ex-id="7466"] .custom-audio-player,
.exercise-content-card[data-ex-id="7467"] .custom-audio-player {
    max-width: 600px !important;
    margin: 1rem auto !important;
    display: inline-flex !important;
}

/* Exercises 696 / 697 / 698 — reading passage beside a photo.
   The legacy content is a <table> with no width, holding a 306px fixed-width
   <div> around the image in cell 1 and the passage in cell 3. Table layout
   gives the passage whatever is left, which collapses to a couple of words per
   line and visually runs over the photo. Turn the row into a flex line so the
   image keeps its natural size and the passage takes the remaining width,
   dropping underneath once there is no room for both. */
.exercise-content-card[data-ex-id="696"] .exercise-question-content table,
.exercise-content-card[data-ex-id="697"] .exercise-question-content table,
.exercise-content-card[data-ex-id="698"] .exercise-question-content table,
.exercise-content-card[data-ex-id="696"] .exercise-question-content tbody,
.exercise-content-card[data-ex-id="697"] .exercise-question-content tbody,
.exercise-content-card[data-ex-id="698"] .exercise-question-content tbody {
    display: block !important;
    width: 100% !important;
}
.exercise-content-card[data-ex-id="696"] .exercise-question-content tr,
.exercise-content-card[data-ex-id="697"] .exercise-question-content tr,
.exercise-content-card[data-ex-id="698"] .exercise-question-content tr {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 1rem !important;
    width: 100% !important;
}
.exercise-content-card[data-ex-id="696"] .exercise-question-content td,
.exercise-content-card[data-ex-id="697"] .exercise-question-content td,
.exercise-content-card[data-ex-id="698"] .exercise-question-content td {
    display: block !important;
    width: auto !important;
    /* min-width:0 lets the passage cell shrink instead of forcing overflow */
    min-width: 0 !important;
    flex: 0 1 auto !important;
}
/* The passage cell claims the leftover width and wraps below the photo when
   the row can no longer hold both. */
.exercise-content-card[data-ex-id="696"] .exercise-question-content td:nth-child(3),
.exercise-content-card[data-ex-id="697"] .exercise-question-content td:nth-child(3),
.exercise-content-card[data-ex-id="698"] .exercise-question-content td:nth-child(3) {
    flex: 1 1 280px !important;
}
/* Release the hard-coded 306x201 box around the photo. */
.exercise-content-card[data-ex-id="696"] .exercise-question-content td > span > div,
.exercise-content-card[data-ex-id="697"] .exercise-question-content td > span > div,
.exercise-content-card[data-ex-id="698"] .exercise-question-content td > span > div {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
}
.exercise-content-card[data-ex-id="696"] .exercise-question-content img,
.exercise-content-card[data-ex-id="697"] .exercise-question-content img,
.exercise-content-card[data-ex-id="698"] .exercise-question-content img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* Exercise 910 (SM5L3LWMRP1) β€” the legacy content wraps the audio player
   inside a <td>, which squashes it to a few pixels wide. Break the table
   layout for the audio row and stretch the player to full width beneath
   the image. */
.exercise-content-card[data-ex-id="910"] .exercise-question-content table,
.exercise-content-card[data-ex-id="910"] .exercise-question-content tbody,
.exercise-content-card[data-ex-id="910"] .exercise-question-content tr,
.exercise-content-card[data-ex-id="910"] .exercise-question-content td {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
}
.exercise-content-card[data-ex-id="910"] .custom-audio-player {
    max-width: 640px !important;
    margin: 1.25rem auto !important;
    display: flex !important;
}

/* Exercise 826 specific: enlarge the reading image (native 410×402). */
.exercise-question-content[data-ex-id="826"] .roundedCorner8,
.exercise-question-content[data-ex-id="826"] .roundedCornerShadow {
    width: auto !important;
    height: auto !important;
    max-width: 600px !important;
    margin: 0 auto 1rem auto !important;
}
.exercise-question-content[data-ex-id="826"] .roundedCorner8 img,
.exercise-question-content[data-ex-id="826"] .roundedCornerShadow img {
    width: 600px !important;
    max-width: 600px !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
}

/* Exercise 1966 specific: portrait image too tall — clamp it down further. */
.exercise-question-content[data-ex-id="1966"] .roundedCorner8,
.exercise-question-content[data-ex-id="1966"] .roundedCornerShadow {
    max-width: 220px !important;
}
.exercise-question-content[data-ex-id="1966"] .roundedCornerShadow img,
.exercise-question-content[data-ex-id="1966"] .roundedCorner8 img {
    max-width: 220px !important;
    max-height: 300px !important;
}

/* Exercises 1992 and 1997 specific: slight reduction (portrait dog images). */
.exercise-question-content[data-ex-id="1992"] .roundedCorner8,
.exercise-question-content[data-ex-id="1992"] .roundedCornerShadow,
.exercise-question-content[data-ex-id="1997"] .roundedCorner8,
.exercise-question-content[data-ex-id="1997"] .roundedCornerShadow {
    max-width: 280px !important;
}
.exercise-question-content[data-ex-id="1992"] .roundedCorner8 img,
.exercise-question-content[data-ex-id="1992"] .roundedCornerShadow img,
.exercise-question-content[data-ex-id="1997"] .roundedCorner8 img,
.exercise-question-content[data-ex-id="1997"] .roundedCornerShadow img {
    max-width: 280px !important;
    max-height: 320px !important;
}

/* Exercises 2018, 2019, 2020 specific: slight enlargement (700 instead of 600). */
.exercise-question-content[data-ex-id="2018"] .roundedCorner8,
.exercise-question-content[data-ex-id="2018"] .roundedCornerShadow,
.exercise-question-content[data-ex-id="2019"] .roundedCorner8,
.exercise-question-content[data-ex-id="2019"] .roundedCornerShadow,
.exercise-question-content[data-ex-id="2020"] .roundedCorner8,
.exercise-question-content[data-ex-id="2020"] .roundedCornerShadow {
    max-width: 700px !important;
}
.exercise-question-content[data-ex-id="2018"] .roundedCorner8 img,
.exercise-question-content[data-ex-id="2018"] .roundedCornerShadow img,
.exercise-question-content[data-ex-id="2019"] .roundedCorner8 img,
.exercise-question-content[data-ex-id="2019"] .roundedCornerShadow img,
.exercise-question-content[data-ex-id="2020"] .roundedCorner8 img,
.exercise-question-content[data-ex-id="2020"] .roundedCornerShadow img {
    max-width: 700px !important;
}

.picture-dropdown-card {
    width: 145px;
    flex: 0 0 145px;
    min-width: 145px;
    border: 3px solid var(--border);
    border-radius: 0.75rem;
    overflow: hidden;
    text-align: center;
    background: var(--card);
    transition: border-color 0.2s;
}

.picture-dropdown-card.picture-dropdown-correct {
    border-color: #22c55e;
}

.picture-dropdown-card.picture-dropdown-incorrect {
    border-color: #ef4444;
}

.picture-dropdown-card.picture-dropdown-skipped {
    border: 3px solid #d97706;
    background: #fffbeb;
}

.picture-dropdown-card.picture-dropdown-unanswered {
    border-color: var(--border);
}

.picture-dropdown-image {
    padding: 0;
    background: hsl(210, 20%, 96%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 120px;
    overflow: hidden;
}

.picture-dropdown-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
    border-radius: 0;
    display: block;
    background: #fff;
    box-sizing: border-box;
}

.picture-dropdown-answer {
    padding: 0.5rem 0.75rem 0.75rem;
}

.picture-dropdown-select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 2px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 500;
    background: #fff;
    color: #1e293b;
    cursor: pointer;
    appearance: auto;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}

.picture-dropdown-select:hover {
    border-color: #93c5fd;
}

.picture-dropdown-select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.picture-dropdown-select-correct {
    border-color: #22c55e;
    color: #16a34a;
    font-weight: 600;
    background: #f0fdf4;
}

.picture-dropdown-select-incorrect {
    border-color: #ef4444;
    color: #dc2626;
    font-weight: 600;
    background: #fef2f2;
}

.picture-dropdown-select-skipped {
    border-color: #d97706;
    color: #92400e;
    background: #fffbeb;
}

.picture-dropdown-select-unanswered {
    border-color: #cbd5e1;
    color: #1e293b;
}

.picture-dropdown-correct {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.78rem;
    color: #16a34a;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    background: #dcfce7;
    border-radius: 4px;
}

/* TextFilling */
.text-filling-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.text-filling-content {
    flex: 1;
}

/* FillInDropDown rows: dropdown flows inline with sentence text */
.fidd-row {
    display: block !important;
}
.fidd-row .fidd-content {
    display: block;
}
.fidd-row .fidd-content .text-filling-num,
.fidd-row .fidd-content .text-filling-part {
    display: inline;
}
.fidd-row .fidd-content .text-filling-num {
    margin-right: 0.5rem;
    font-weight: 700;
    color: #3b82f6;
}
.fidd-row .fidd-content .fillin-dropdown-select {
    display: inline-block;
    vertical-align: middle;
    width: auto !important;
    min-width: 90px;
    max-width: 200px;
}
.fidd-row .fidd-content .text-filling-correct {
    display: inline-block;
    margin-left: 0.5rem;
    vertical-align: middle;
}

.text-filling-prefix {
    display: block;
    width: 100%;
    margin-bottom: 0.5rem;
    color: #1e293b;
}
.text-filling-inline {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.text-filling-row {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.text-filling-row:hover {
    border-color: #93c5fd;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.08);
}

.text-filling-row.text-filling-correct {
    background: #f0fdf4;
    border-color: #86efac;
}

.text-filling-row.text-filling-incorrect {
    background: #fef2f2;
    border-color: #fca5a5;
}

.text-filling-row.text-filling-skipped {
    background: #fffbeb;
    border-color: #fcd34d;
}

.text-filling-num {
    font-weight: 700;
    color: #3b82f6;
    min-width: 1.75rem;
    font-size: 0.9rem;
}

.text-filling-part {
    font-size: 0.95rem;
    color: #1e293b;
    line-height: 1.6;
}

.text-filling-input {
    border: none;
    border-bottom: 2px dashed #94a3b8;
    background: transparent;
    padding: 0.2rem 0.5rem;
    font-size: 0.95rem;
    min-width: 120px;
    max-width: 200px;
    outline: none;
    text-align: center;
    transition: all 0.25s;
    color: #334155;
    cursor: text;
}

.text-filling-input::placeholder {
    color: #94a3b8;
    font-style: italic;
}

.text-filling-input:hover {
    border-bottom-color: #3b82f6;
    border-bottom-style: solid;
    background: #eff6ff;
    border-radius: 4px 4px 0 0;
}

.text-filling-input:focus {
    border-bottom-color: #2563eb;
    border-bottom-style: solid;
    background: #eff6ff;
    border-radius: 4px 4px 0 0;
    box-shadow: 0 2px 0 0 #2563eb;
}

.text-filling-input-correct {
    border-bottom-color: #16a34a;
    border-bottom-style: solid;
    color: #16a34a;
    font-weight: 600;
    background: #f0fdf4;
    border-radius: 4px 4px 0 0;
}

.text-filling-input-incorrect {
    border-bottom-color: #dc2626;
    border-bottom-style: solid;
    color: #dc2626;
    background: #fef2f2;
    border-radius: 4px 4px 0 0;
}

/* Skipped: the student submitted without filling this gap. Amber keeps it
   clearly apart from a wrong answer (red) — it was never attempted.
   StatusClass already emits "skipped"; this rule was simply missing, so the
   field fell back to the untouched grey dashed style. */
.text-filling-input-skipped {
    border-bottom-color: #f59e0b;
    border-bottom-style: solid;
    color: #b45309;
    background: #fff7ed;
    border-radius: 4px 4px 0 0;
}

/* The correct-answer chip: an aside pushed to the end of the line.
   MUST stay scoped to span. "text-filling-correct" is overloaded — it is also
   the status class on the row itself (.text-filling-row.text-filling-correct),
   and .text-filling-list is a flex column, so an unscoped margin-left:auto
   here shunts every correctly-answered row to the right edge. The other
   properties leaked onto rows the same way before this was scoped. */
span.text-filling-correct {
    font-size: 0.8rem;
    color: #16a34a;
    font-weight: 600;
    /* Sits right after the gap it belongs to. NOT margin-left:auto — these rows
       are flex with wrap, so "auto" threw the chip onto its own line and broke
       the passage into fragments instead of reading as running text. */
    margin-left: 0.35rem;
    padding: 0.1rem 0.4rem;
    background: #dcfce7;
    border-radius: 4px;
    white-space: nowrap;
}

/* FillInDropDown - inline select */
.fillin-dropdown-select {
    border: none;
    border-bottom: 2px dashed #94a3b8;
    background: transparent;
    padding: 0.2rem 0.5rem;
    font-size: 0.95rem;
    min-width: 140px;
    max-width: 220px;
    outline: none;
    cursor: pointer;
    appearance: auto;
    transition: all 0.25s;
}

.fillin-dropdown-select:hover {
    border-bottom-color: #3b82f6;
    border-bottom-style: solid;
    background: #eff6ff;
    border-radius: 4px 4px 0 0;
}

.fillin-dropdown-select:focus {
    border-bottom-color: #2563eb;
    border-bottom-style: solid;
    background: #eff6ff;
    border-radius: 4px 4px 0 0;
    box-shadow: 0 2px 0 0 #2563eb;
}

.fillin-dropdown-select-correct {
    border-bottom-color: #16a34a;
    border-bottom-style: solid;
    color: #16a34a;
    font-weight: 600;
    background: #f0fdf4;
}

.fillin-dropdown-select-incorrect {
    border-bottom-color: #dc2626;
    border-bottom-style: solid;
    color: #dc2626;
    background: #fef2f2;
    border-radius: 4px 4px 0 0;
}

/* Words Matching Exercise */
.matching-exercise {
    padding: 0.5rem 0;
}
.matching-container {
    display: flex;
    align-items: flex-start;
    gap: 0;
    position: relative;
    padding: 1rem 0;
}
.matching-column {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
    z-index: 2;
}
.matching-column-left {
    align-items: flex-end;
    padding-right: 1.5rem;
}
.matching-column-right {
    align-items: flex-start;
    padding-left: 1.5rem;
}
.matching-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}
.matching-line {
    stroke: #f97316;
    stroke-width: 2.5;
    stroke-linecap: round;
}
.matching-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    border: 2px solid transparent;
    user-select: none;
    /* Was 220px — clipped phrases like "This souvenir reminds me of"
       into a second line with a lonely "of". 320px lets a full clause
       stay on one line; longer strings still wrap at word boundaries. */
    max-width: 320px;
    text-align: center;
    justify-content: center;
    overflow-wrap: normal;
    word-break: normal;
}
.matching-chip-left {
    background: #ecfccb;
    color: #365314;
    border-color: #bef264;
}
.matching-chip-left:hover {
    border-color: #84cc16;
    box-shadow: 0 2px 8px rgba(132, 204, 22, 0.25);
}
.matching-chip-left.selected {
    border-color: #65a30d;
    box-shadow: 0 0 0 3px rgba(101, 163, 13, 0.3);
}
.matching-chip-left.matched {
    background: #d9f99d;
    border-color: #a3e635;
    opacity: 0.7;
}
.matching-chip-right {
    background: #fef3c7;
    color: #78350f;
    border-color: #fde68a;
}
.matching-chip-right:hover {
    border-color: #f59e0b;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);
}
.matching-chip-right.matched {
    background: #fde68a;
    border-color: #fbbf24;
    opacity: 0.7;
}

/* Matching Results */
.matching-results {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 0;
}
.matching-result-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    font-size: 0.9rem;
}
.matching-result-correct {
    background: #f0fdf4;
    border-left: 3px solid #16a34a;
}
.matching-result-incorrect {
    background: #fef2f2;
    border-left: 3px solid #dc2626;
}
.matching-result-num {
    font-weight: 600;
    color: var(--muted-foreground);
    min-width: 1.5rem;
}
.matching-result-question {
    font-weight: 600;
    color: var(--foreground);
}
.matching-result-arrow {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.matching-result-answer {
    color: #16a34a;
    font-weight: 500;
}
.matching-result-wrong-answer {
    color: #dc2626;
    text-decoration: line-through;
}
.matching-result-correct-answer {
    color: #16a34a;
    font-weight: 600;
    font-style: italic;
}

/* GroupMaking Exercise */
.grouping-exercise {
    width: 100%;
}
.grouping-bank {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem;
    margin-bottom: 1.25rem;
    background: #f8fafc;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    min-height: 3rem;
}
.grouping-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 1rem;
    background: #e0f2fe;
    color: #0c4a6e;
    border: 1.5px solid #7dd3fc;
    border-radius: 20px;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}
.grouping-chip:hover {
    background: #bae6fd;
    border-color: #38bdf8;
}
.grouping-chip-selected {
    background: #3b82f6;
    color: #fff;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}
.grouping-chip-placed {
    opacity: 0.35;
    pointer-events: none;
    text-decoration: line-through;
}
.grouping-grid {
    display: grid;
    gap: 1rem;
}
.grouping-box {
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    min-height: 120px;
}
.grouping-box:hover {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.grouping-box-title {
    padding: 0.6rem 1rem;
    background: linear-gradient(135deg, #1e40af, #3b82f6);
    color: #fff;
    font-weight: 600;
    font-size: 0.92rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.grouping-box-items {
    padding: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    min-height: 50px;
}
.grouping-placed-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.75rem;
    background: #dbeafe;
    color: #1e3a5f;
    border: 1px solid #93c5fd;
    border-radius: 16px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}
.grouping-placed-item:hover {
    background: #fecaca;
    border-color: #f87171;
}
.grouping-placed-remove {
    font-size: 1rem;
    line-height: 1;
    color: #94a3b8;
    margin-left: 0.15rem;
}
.grouping-placed-item:hover .grouping-placed-remove {
    color: #dc2626;
}

/* GroupMaking Results */
.grouping-results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}
.grouping-result-box {
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid #e2e8f0;
}
.grouping-result-correct {
    border-color: #86efac;
    background: #f0fdf4;
}
.grouping-result-incorrect {
    border-color: #fca5a5;
    background: #fef2f2;
}
.grouping-result-title {
    padding: 0.6rem 1rem;
    font-weight: 600;
    font-size: 0.92rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.grouping-result-correct .grouping-result-title {
    background: #dcfce7;
    color: #166534;
}
.grouping-result-incorrect .grouping-result-title {
    background: #fee2e2;
    color: #991b1b;
}
.grouping-result-items {
    padding: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.grouping-result-item {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border-radius: 16px;
    font-size: 0.85rem;
    font-weight: 500;
}
.grouping-item-correct {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}
.grouping-item-wrong {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
    text-decoration: line-through;
}
.grouping-item-missing {
    background: #fff7ed;
    color: #9a3412;
    border: 1px dashed #fdba74;
    font-style: italic;
}

@media (max-width: 600px) {
    .grouping-grid {
        grid-template-columns: 1fr !important;
    }
    .grouping-results {
        grid-template-columns: 1fr;
    }
}

/* Short Answer Exercise */
.short-answer-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 0.5rem 0;
}
.short-answer-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: 10px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    transition: border-color 0.2s, background 0.2s;
}
.short-answer-row:hover {
    border-color: #cbd5e1;
}
.short-answer-num {
    font-weight: 700;
    font-size: 1rem;
    color: #6366f1;
    min-width: 2rem;
    padding-top: 0.1rem;
}
.short-answer-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.short-answer-prompt {
    font-size: 0.95rem;
    font-weight: 500;
    color: #334155;
}
.short-answer-input {
    width: 100%;
    padding: 0.6rem 0.85rem;
    font-size: 0.95rem;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #1e293b;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}
.short-answer-input-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
/* Row that keeps the two answer inputs (and the separator between
   them, e.g. ",") aligned on the same visual baseline. */
.short-answer-inputs-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.short-answer-separator {
    display: inline-block;
    font-weight: 600;
    color: #475569;
    padding: 0 2px;
}
.short-answer-input-wrapper .short-answer-input {
    width: auto;
}
.short-answer-punctuation {
    font-size: 1.2rem;
    font-weight: 700;
    color: #64748b;
    min-width: 14px;
}
.short-answer-input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.10);
}
.short-answer-input::placeholder {
    color: #94a3b8;
}
/* Result states */
/* Row status styling. Scoped to .short-answer-row on purpose: the same class
   names are also carried by the correct-answer <span>, which would otherwise
   pick up the row's border and background. See span.short-answer-correct
   below for the chip itself. */
.short-answer-row.short-answer-correct {
    border-color: #86efac;
    background: #f0fdf4;
}
.short-answer-row.short-answer-correct .short-answer-num {
    color: #16a34a;
}
.short-answer-row.short-answer-correct .short-answer-input {
    border-color: #86efac;
    background: #f0fdf4;
    color: #166534;
}
.short-answer-row.short-answer-incorrect {
    border-color: #fca5a5;
    background: #fef2f2;
}
.short-answer-row.short-answer-incorrect .short-answer-num {
    color: #dc2626;
}
.short-answer-row.short-answer-incorrect .short-answer-input {
    border-color: #fca5a5;
    background: #fef2f2;
    color: #991b1b;
}
.short-answer-row.short-answer-skipped {
    border-color: #fde68a;
    background: #fffbeb;
}
.short-answer-row.short-answer-skipped .short-answer-num {
    color: #d97706;
}
/* Was missing while correct/incorrect both styled their input — a skipped gap
   kept the neutral look and read as unanswered rather than deliberately blank. */
.short-answer-row.short-answer-skipped .short-answer-input {
    border-color: #fde68a;
    background: #fffbeb;
    color: #b45309;
}
span.short-answer-correct {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #16a34a;
    padding: 0.2rem 0;
}

@media (max-width: 600px) {
    .short-answer-row {
        flex-direction: column;
        gap: 0.4rem;
        padding: 0.85rem 1rem;
    }
    .short-answer-num {
        min-width: auto;
    }
}

/* Writing Sentences Exercise (type 15) */
.writing-sentence-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.writing-sentence-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    border-radius: 0.75rem;
    background: var(--card);
    border: 1px solid var(--border);
    transition: border-color 0.15s, background 0.15s;
}

.writing-sentence-row:hover {
    border-color: var(--primary);
}

.writing-sentence-row.writing-sentence-correct {
    border-color: #86efac;
    background: #f0fdf4;
}

.writing-sentence-row.writing-sentence-incorrect {
    border-color: #fca5a5;
    background: #fef2f2;
}

.writing-sentence-row.writing-sentence-skipped {
    border-color: #fde68a;
    background: #fffbeb;
}

.writing-sentence-num {
    font-weight: 700;
    color: var(--primary);
    min-width: 1.75rem;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.writing-sentence-content {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.writing-sentence-play-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, transform 0.1s;
}

.writing-sentence-play-btn:hover {
    background: var(--primary-hover, #4f46e5);
    transform: scale(1.08);
}

.writing-sentence-play-btn.playing {
    background: #0ea5e9;
}

.writing-sentence-input {
    flex: 1;
    min-width: 10rem;
    max-width: 22rem;
    padding: 0.5rem 0.875rem;
    border-radius: 0.5rem;
    border: 1.5px solid var(--border);
    background: var(--background);
    color: var(--foreground);
    font-size: 0.9375rem;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
}

.writing-sentence-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.10);
}

.writing-sentence-input::placeholder {
    color: #94a3b8;
}

.writing-sentence-input-correct {
    border-color: #86efac;
    background: #f0fdf4;
    color: #166534;
}

.writing-sentence-input-incorrect {
    border-color: #fca5a5;
    background: #fef2f2;
    color: #991b1b;
}

.writing-sentence-input-skipped {
    border-color: #fde68a;
    background: #fffbeb;
}

span.writing-sentence-correct {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #16a34a;
    padding: 0.2rem 0.5rem;
    background: #dcfce7;
    border-radius: 0.375rem;
}

@media (max-width: 600px) {
    .writing-sentence-row {
        flex-wrap: wrap;
        padding: 0.85rem 1rem;
    }
    .writing-sentence-content {
        width: 100%;
    }
    .writing-sentence-input {
        max-width: 100%;
        width: 100%;
    }
}

/* Word Ordering Exercise */
.word-ordering-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.word-ordering-row {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    background: var(--card);
    border: 1px solid var(--border);
    align-items: flex-start;
}

.word-ordering-num {
    font-weight: 700;
    color: var(--primary);
    min-width: 1.5rem;
    padding-top: 0.25rem;
}

.word-ordering-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.word-ordering-drop-zone {
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    border: 2px dashed #cbd5e1;
    border-radius: 0.5rem;
    background: #f8fafc;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    cursor: pointer;
    transition: border-color 0.2s;
}

.word-ordering-drop-zone:focus-within,
.word-ordering-drop-zone:hover {
    border-color: var(--primary);
}

.word-ordering-placeholder {
    color: #94a3b8;
    font-size: 0.85rem;
    font-style: italic;
}

.word-ordering-drop-zone .word-ordering-chip {
    background: var(--primary);
    color: #fff;
    border: none;
    cursor: pointer;
}

.word-ordering-drop-zone .word-ordering-chip:hover {
    background: #dc2626;
    transform: scale(0.95);
}

.word-ordering-bank {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.word-ordering-chip {
    padding: 0.35rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.9rem;
    font-weight: 500;
    border: 1px solid var(--primary);
    background: #fff;
    color: var(--primary);
    cursor: pointer;
    transition: all 0.15s;
}

.word-ordering-chip:hover {
    background: var(--primary);
    color: #fff;
    transform: translateY(-1px);
}

.word-ordering-chip.used {
    opacity: 0.3;
    pointer-events: none;
}

.word-ordering-answer {
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.95rem;
}

.word-ordering-answer-correct {
    background: #f0fdf4;
    border: 1px solid #86efac;
    color: #166534;
}

.word-ordering-answer-incorrect {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #991b1b;
}

.word-ordering-answer-skipped {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    color: #92400e;
}

.word-ordering-correct-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #16a34a;
}

.word-ordering-correct .word-ordering-num {
    color: #16a34a;
}

.word-ordering-incorrect .word-ordering-num {
    color: #dc2626;
}

@media (max-width: 600px) {
    .word-ordering-row {
        flex-direction: column;
        gap: 0.4rem;
        padding: 0.85rem 1rem;
    }
}

/* SpaceFilling - Word Bank Puzzle */

/* Instructions banner */
.sf-instructions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #eff6ff, #e0f2fe);
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    color: #1e40af;
    font-size: 0.88rem;
    font-weight: 500;
    animation: sfInstructionSlide 0.5s ease-out;
}

.sf-instructions-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    color: #3b82f6;
}

.sf-instructions.sf-hidden {
    opacity: 0;
    max-height: 0;
    margin: 0;
    padding: 0 1.25rem;
    overflow: hidden;
    transition: all 0.4s ease;
}

@keyframes sfInstructionSlide {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Progress indicator */
.sf-progress {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    animation: sfFadeIn 0.4s ease-out 0.2s both;
}

.sf-progress-bar {
    flex: 1;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}

.sf-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #2563eb);
    border-radius: 3px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.sf-progress-text {
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
}

.sf-progress.sf-complete .sf-progress-fill {
    background: linear-gradient(90deg, #22c55e, #16a34a);
}

.sf-progress.sf-complete .sf-progress-text {
    color: #16a34a;
}

@keyframes sfFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Word bank container */
.space-filling-bank {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-radius: 12px;
    border: 2px dashed #cbd5e1;
    min-height: 48px;
    position: relative;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.space-filling-bank.sf-bank-highlight {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    animation: sfBankPulse 2s ease-in-out infinite;
}

@keyframes sfBankPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); }
    50% { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.08); }
}

/* Word bank chips */
.word-bank-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 1rem;
    background: #fff;
    border: 2px solid #3b82f6;
    border-radius: 20px;
    color: #1e40af;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    animation: sfChipEntrance 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    position: relative;
    flex-grow: 0;
    flex-shrink: 0;
}

@keyframes sfChipEntrance {
    from { opacity: 0; transform: scale(0.6) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.word-bank-chip:hover {
    background: #3b82f6;
    color: #fff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 12px rgba(59,130,246,0.35);
}

.word-bank-chip:active {
    transform: translateY(0) scale(0.97);
    box-shadow: 0 1px 4px rgba(59,130,246,0.2);
}

.word-bank-chip.used {
    opacity: 0.3;
    pointer-events: none;
    border-color: #94a3b8;
    color: #94a3b8;
    background: #f1f5f9;
    box-shadow: none;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.word-bank-chip.sf-returning {
    animation: sfChipReturn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes sfChipReturn {
    from { opacity: 0; transform: scale(0.5) translateY(-10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Drag-and-drop feedback — chip mid-drag and slot under the cursor. Applies
   to both SpaceFilling (.word-bank-chip / .space-filling-slot) and Dialog
   drag mode (.dialog-chip / .dialog-slot). */
.word-bank-chip.dragging,
.dialog-chip.dragging {
    opacity: 0.4;
    transform: scale(0.94);
    cursor: grabbing;
}
.word-bank-chip,
.dialog-chip { cursor: grab; }
.word-bank-chip.used,
.dialog-chip.used { cursor: default; }

.space-filling-slot.drag-over,
.dialog-slot.drag-over {
    background: #dbeafe;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
    transform: scale(1.04);
}

/* Cloned chip that follows the finger on touch devices. */
.sf-drag-ghost {
    border-radius: 999px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    transform: scale(1.05);
}

/* Questions list */
.space-filling-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.space-filling-row {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.space-filling-row:hover {
    border-color: #93c5fd;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.08);
}

.space-filling-row.sf-row-active {
    border-color: #3b82f6;
    background: #fafbff;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.12), 0 4px 12px rgba(59, 130, 246, 0.08);
}

.space-filling-row.space-filling-correct {
    background: #f0fdf4;
    border-color: #86efac;
}

.space-filling-row.space-filling-incorrect {
    background: #fef2f2;
    border-color: #fca5a5;
}

.space-filling-row.space-filling-skipped {
    background: #fffbeb;
    border-color: #fcd34d;
}

/* Slot styling */
.space-filling-slot {
    display: inline-block;
    min-width: 120px;
    min-height: 30px;
    padding: 0.25rem 0.75rem;
    border: 2px dashed #c7d2dd;
    border-radius: 8px;
    text-align: center;
    font-size: 0.95rem;
    color: #334155;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: #f8fafc;
    position: relative;
}

.space-filling-slot:hover {
    border-color: #3b82f6;
    border-style: dashed;
    background: #eff6ff;
    transform: scale(1.02);
}

.space-filling-slot.active {
    border-color: #2563eb;
    border-style: solid;
    background: #dbeafe;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2), 0 0 16px rgba(37, 99, 235, 0.1);
    animation: sfSlotGlow 1.8s ease-in-out infinite;
    transform: scale(1.03);
}

@keyframes sfSlotGlow {
    0%, 100% {
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2), 0 0 16px rgba(37, 99, 235, 0.1);
        background: #dbeafe;
    }
    50% {
        box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.15), 0 0 24px rgba(37, 99, 235, 0.15);
        background: #eff6ff;
    }
}

.space-filling-slot.filled {
    border-style: solid;
    border-color: #3b82f6;
    color: #1e40af;
    font-weight: 600;
    background: #eff6ff;
    cursor: pointer;
}

.space-filling-slot.filled:hover {
    background: #dbeafe;
    border-color: #1d4ed8;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}

/* Verdict colours for the drop target itself. .filled paints every answered
   slot blue, so these need the extra class to outrank it. Mirrors the dialog
   slot rules further down. */
.space-filling-slot.filled.space-filling-slot-correct {
    border-color: #22c55e;
    background: #f0fdf4;
    color: #15803d;
}

.space-filling-slot.filled.space-filling-slot-incorrect {
    border-color: #ef4444;
    background: #fef2f2;
    color: #b91c1c;
}

.space-filling-slot.space-filling-slot-skipped {
    border-style: solid;
    border-color: #f59e0b;
    background: #fff7ed;
    color: #b45309;
}

.space-filling-slot.sf-just-filled {
    animation: sfSlotPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes sfSlotPop {
    0% { transform: scale(0.85); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.space-filling-slot.sf-just-cleared {
    animation: sfSlotClear 0.3s ease-out;
}

@keyframes sfSlotClear {
    0% { transform: scale(1.05); opacity: 0.5; }
    100% { transform: scale(1); opacity: 1; }
}

/* TrueFalse Exercise */
.truefalse-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.truefalse-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.truefalse-card:hover {
    border-color: #93c5fd;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.08);
}

.truefalse-card.truefalse-correct {
    background: #f0fdf4;
    border-color: #86efac;
}

.truefalse-card.truefalse-incorrect {
    background: #fef2f2;
    border-color: #fca5a5;
}

.truefalse-card.truefalse-skipped {
    background: #fffbeb;
    border-color: #fcd34d;
    opacity: 0.7;
}

.truefalse-question {
    font-size: 0.95rem;
    color: #1e293b;
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.truefalse-num {
    font-weight: 700;
    color: #3b82f6;
    margin-right: 0.4rem;
}

/* SELECTIMAGE variant of the True/False template — 2 clickable images
   instead of radio buttons. Radios stay in the DOM (hidden) so the
   existing answer-collection pipeline keeps working. */
.selectimage-options {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
}
.selectimage-choice {
    position: relative;
    display: block;
    cursor: pointer;
    border: 3px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.35rem;
    background: #fff;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    max-width: 260px;
    flex: 1 1 220px;
    overflow: hidden;
}
.selectimage-choice input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.selectimage-choice img {
    display: block;
    width: 100%;
    height: 200px;
    /* contain instead of cover — shows the whole picture (with white
       letterboxing when the aspect ratio doesn't match) so nothing
       important gets cropped off the edges. */
    object-fit: contain;
    background: #fff;
    border-radius: 8px;
}
.selectimage-choice:hover {
    border-color: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}
/* Persist the blue border once the student clicks a picture β€” the "selected"
   frame stays visible even after the cursor leaves. The pre-submit selection
   (before correct/incorrect is known) is highlighted via the radio's :checked
   state; after submit the .selected.correct / .selected.incorrect rules
   below override with green / red. */
.selectimage-choice:has(input[type="radio"]:checked) {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px #3b82f6;
}
/* Tint overlay so the image itself reads as correct/incorrect at a glance,
   not only the border. Applied instantly after clicking Answer thanks to the
   same .selected.correct / .selected.incorrect classes the server-side render
   uses on reload. */
.selectimage-choice.selected::after {
    content: "";
    position: absolute;
    inset: 0.35rem;
    border-radius: 8px;
    pointer-events: none;
    transition: background-color 0.15s ease;
}
.selectimage-choice.selected.correct {
    border-color: #10b981;
    box-shadow: 0 0 0 2px #10b981;
}
.selectimage-choice.selected.correct::after {
    background-color: rgba(16, 185, 129, 0.35);
}
.selectimage-choice.selected.incorrect {
    border-color: #ef4444;
    box-shadow: 0 0 0 2px #ef4444;
}
.selectimage-choice.selected.incorrect::after {
    background-color: rgba(239, 68, 68, 0.35);
}

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

.truefalse-option {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 100px;
}

.truefalse-option:hover {
    border-color: #93c5fd;
    background: #f0f7ff;
}

.truefalse-option input[type="radio"] {
    accent-color: #3b82f6;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.truefalse-label {
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.truefalse-true,
.truefalse-false {
    color: #1e293b;
}

/* Pre-submit selection state — three fallbacks so every browser lights up:
   1. .tf-selected class (JS-driven, works everywhere)
   2. :has() (modern browsers)
   3. sibling+:checked (works in every browser back to IE9) */
.truefalse-option.tf-selected,
.truefalse-option:has(input[type="radio"]:checked),
.truefalse-options label.truefalse-option input[type="radio"]:checked ~ .truefalse-label {
    border-color: #3b82f6 !important;
    background: #eff6ff !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3) !important;
}
.truefalse-options label.truefalse-option:has(input[type="radio"]:checked),
.truefalse-options label.truefalse-option.tf-selected {
    background: #dbeafe !important;
    border: 2px solid #2563eb !important;
    transform: scale(1.03);
}
.truefalse-option.tf-selected .truefalse-label,
.truefalse-option:has(input[type="radio"]:checked) .truefalse-label,
.truefalse-option input[type="radio"]:checked ~ .truefalse-label {
    color: #1d4ed8 !important;
    font-weight: 800 !important;
}

.truefalse-option.selected.correct {
    border-color: #22c55e;
    background: #f0fdf4;
}

.truefalse-option.selected.correct .truefalse-label {
    color: #16a34a;
}

.truefalse-option.selected.incorrect {
    border-color: #ef4444;
    background: #fef2f2;
}

.truefalse-option.selected.incorrect .truefalse-label {
    color: #dc2626;
}

.truefalse-correct-answer {
    margin-top: 0.5rem;
    font-size: 0.82rem;
    color: #16a34a;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    background: #dcfce7;
    border-radius: 4px;
    display: inline-block;
}

/* MultiChoice Exercise */
.multichoice-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.multichoice-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.25rem;
    transition: border-color 0.2s;
}

.multichoice-card.multichoice-correct {
    border-color: #22c55e;
    background: #f0fdf4;
}

.multichoice-card.multichoice-incorrect {
    border-color: #ef4444;
    background: #fef2f2;
}

.multichoice-card.multichoice-skipped {
    border-color: #f97316;
    background: #fff7ed;
}

.multichoice-question {
    font-weight: 600;
    font-size: 0.95rem;
    color: #1e293b;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.multichoice-num {
    color: var(--primary);
    font-weight: 700;
    flex-shrink: 0;
}

.multichoice-badge {
    font-size: 0.7rem;
    font-weight: 600;
    color: #6366f1;
    background: #eef2ff;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
}

.multichoice-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.multichoice-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    background: white;
}

.multichoice-option:hover {
    border-color: var(--primary);
    background: #f0f5ff;
}

.multichoice-option input[type="radio"],
.multichoice-option input[type="checkbox"] {
    display: none;
}

.multichoice-indicator {
    width: 20px;
    height: 20px;
    border: 2px solid #cbd5e1;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    transition: border-color 0.2s, background 0.2s;
}

.multichoice-option input[type="checkbox"] ~ .multichoice-indicator {
    border-radius: 4px;
}

.multichoice-option input:checked ~ .multichoice-indicator {
    border-color: var(--primary);
    background: var(--primary);
}

.multichoice-option input:checked ~ .multichoice-indicator::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 5px;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.multichoice-text {
    font-size: 0.9rem;
    color: #334155;
}

.multichoice-option.selected.correct {
    border-color: #22c55e;
    background: #f0fdf4;
}

.multichoice-option.selected.correct .multichoice-indicator {
    border-color: #22c55e;
    background: #22c55e;
}

.multichoice-option.selected.incorrect {
    border-color: #ef4444;
    background: #fef2f2;
}

.multichoice-option.selected.incorrect .multichoice-indicator {
    border-color: #ef4444;
    background: #ef4444;
}

.multichoice-option.correct-missed {
    border-color: #22c55e;
    border-style: dashed;
    background: #f0fdf4;
}

.multichoice-option.correct-missed .multichoice-indicator {
    border-color: #22c55e;
}

.multichoice-correct-answer {
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    color: #16a34a;
    background: #f0fdf4;
    border-radius: 6px;
    font-weight: 600;
}

/* Dialog Exercise */
.dialog-bank {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-radius: 12px;
    border: 2px dashed #cbd5e1;
    min-height: 48px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.dialog-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Story mode: no speaker on any row β€” run every row inline so the gaps
   read as continuous prose (one paragraph with blanks) instead of one
   blank per stacked line. Set on the wrapper by the server. */
.dialog-list-story {
    display: block !important;
    line-height: 1.9;
    font-size: 1rem;
    padding: 0.5rem 0.25rem;
}
.dialog-list-story .dialog-row {
    display: inline !important;
    gap: 0 !important;
}
.dialog-list-story .dialog-text {
    display: inline !important;
    flex: initial !important;
}
.dialog-list-story .dialog-part {
    display: inline !important;
    white-space: normal;
}
.dialog-list-story .dialog-prefix {
    display: block;
    margin-bottom: 0.5rem;
}
.dialog-list-story .dialog-input,
.dialog-list-story .dialog-slot {
    display: inline-block !important;
    vertical-align: baseline;
    /* 6.5em (~12 chars) used to override the stepped inline width set per gap,
       forcing every short answer back up to a wide box. Kept only as a floor for
       slots, which have no inline width of their own. */
    min-width: 4em;
    margin: 0 0.25rem;
}
/* The per-gap stepped width wins over the floor above. */
.dialog-list-story .dialog-input[style*="width"] {
    min-width: 0;
}
.dialog-list-story .dialog-correct {
    display: inline;
    margin-left: 0.35rem;
    font-size: 0.85em;
}

/* Mixed mode: some rows carry an inline speaker prefix ("1:" / "Ann:")
   inside DialogPart1. Those rows must break to a new line (block) so
   the reader sees "1: Harry has …", "2: Maria has gone …" as separate
   paragraphs, while non-speaker rows still flow inline as continuation
   of the previous speaker's turn. */
/* A speaker row must START a new line without CLAIMING the whole line.
   display:block did the first but also the second: it stretched to 100% width,
   so the continuation row that follows it ("never ___ to Thailand.") was pushed
   underneath even though it had room to sit alongside. Numbered items with two
   gaps therefore split across two lines while single-gap ones looked fine.
   A line break injected before the row gives the break without the full-width
   box, letting continuation rows flow on the same line. */
/* Numbered items: the label is "1:", not "Mrs Robinson:". The 70px reserve that
   keeps real speaker names aligned just leaves a hole after the number here. */
.dialog-list-mixed .dialog-speaker {
    min-width: 0;
    margin-right: 0.35rem;
}
/* One numbered sentence = one block with a hanging indent, so a long sentence
   that wraps lines its continuation up with the text instead of tucking it
   under the number. The rows inside stay inline and flow as one sentence.
   The block itself provides the line break — no ::before "\A" needed. */
.dialog-list-mixed .dialog-item {
    display: block;
    padding-left: 2.2em;
    text-indent: -2.2em;
    margin-bottom: 0.45rem;
}
.dialog-list-mixed .dialog-item:last-child {
    margin-bottom: 0;
}
/* text-indent inherits, and an inline-block starts its own line box — so the
   -2.2em was re-applied inside every gap, dragging its contents left and over
   the words before it ("If you" rendered as "If yo[box]"). Reset it on the
   boxes; the hanging indent belongs to the sentence, not to the gaps. */
.dialog-list-mixed .dialog-item .dialog-input,
.dialog-list-mixed .dialog-item .dialog-slot,
.dialog-list-mixed .dialog-item .dialog-correct,
.dialog-list-mixed .dialog-item .dialog-speaker {
    text-indent: 0;
}
.dialog-list-mixed .dialog-row.dialog-row-speaker-start {
    display: inline !important;
}

/* Story mode: never paint the whole .dialog-row row β€” multiple rows can
   sit on the same visual line, so we colour ONLY the input itself.
   The row background/border reset here undoes .dialog-row.dialog-correct /
   .dialog-incorrect / .dialog-skipped rules from further down. */
.dialog-list-story .dialog-row,
.dialog-list-story .dialog-row.dialog-correct,
.dialog-list-story .dialog-row.dialog-incorrect,
.dialog-list-story .dialog-row.dialog-skipped {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* Story mode: paint only the input's underline + text colour. Existing
   .dialog-input.dialog-input-correct / -incorrect already do this; we
   just make the underline a little thicker so the state is visible when
   the input sits inside continuous prose. */
.dialog-list-story .dialog-input {
    border-bottom-width: 2px;
}

/* Correct-answer hint after a wrong input: keep it inline right after
   the input, use a small pill instead of taking a whole line. */
.dialog-list-story .dialog-correct {
    display: inline-block;
    margin: 0 0.35rem;
    padding: 0.05rem 0.45rem;
    font-size: 0.78rem;
    vertical-align: baseline;
    line-height: 1.4;
}

.dialog-row {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.85rem 1.25rem;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.dialog-prefix {
    display: block;
    width: 100%;
    margin-bottom: 0.5rem;
    color: #1e293b;
}

.dialog-text {
    flex: 1;
}

.dialog-row.dialog-plain {
    background: #f8fafc;
    border-color: #f1f5f9;
}

.dialog-row:hover {
    border-color: #93c5fd;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.08);
}

.dialog-row.dialog-row-active {
    border-color: #3b82f6;
    background: #fafbff;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.12), 0 4px 12px rgba(59, 130, 246, 0.08);
}

/* Row background/border removed β€” we now colour only the input itself
   (see .dialog-input.dialog-input-correct / -incorrect). The correct
   answer pill drops onto the line below the input so the two visual
   signals β€” input state + expected answer β€” stay tied to each blank
   even when a row wraps to a second line. */
.dialog-row.dialog-correct,
.dialog-row.dialog-incorrect,
.dialog-row.dialog-skipped {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}
/* Correct-answer pill on its own line right under the input. */
/* Inline, right after the gap it belongs to. Was display:block + width:fit-content,
   which dropped the pill onto its own line — fine for a short two-speaker
   exchange, but these dialogs are also used for running passages (ex. 743),
   where it chopped the text into fragments instead of reading as prose. */
.dialog-row .dialog-correct {
    display: inline;
    margin-left: 0.35rem;
    font-size: 0.78rem;
    padding: 0.1rem 0.4rem;
    white-space: nowrap;
}

.dialog-speaker {
    font-weight: 700;
    color: #6366f1;
    white-space: nowrap;
    min-width: 70px;
    font-size: 0.9rem;
}

.dialog-text {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    flex-wrap: wrap;
    flex: 1;
    font-size: 0.95rem;
    color: #334155;
    line-height: 1.6;
}

.dialog-part {
    white-space: pre-wrap;
}

/* Dialog slot (DragDrop mode) - reuses space-filling-slot animations */
.dialog-slot {
    display: inline-block;
    min-width: 100px;
    min-height: 28px;
    padding: 0.2rem 0.75rem;
    border: 2px dashed #c7d2dd;
    border-radius: 8px;
    text-align: center;
    font-size: 0.95rem;
    color: #334155;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: #f8fafc;
}

.dialog-slot:hover {
    border-color: #3b82f6;
    background: #eff6ff;
    transform: scale(1.02);
}

.dialog-slot.active {
    border-color: #2563eb;
    border-style: solid;
    background: #dbeafe;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2), 0 0 16px rgba(37, 99, 235, 0.1);
    animation: sfSlotGlow 1.8s ease-in-out infinite;
    transform: scale(1.03);
}

.dialog-slot.filled {
    border-style: solid;
    border-color: #3b82f6;
    color: #1e40af;
    font-weight: 600;
    background: #eff6ff;
    cursor: pointer;
}

.dialog-slot.filled:hover {
    background: #dbeafe;
    border-color: #1d4ed8;
}

.dialog-slot.sf-just-filled {
    animation: sfSlotPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Dialog input (TextInput mode) */
.dialog-input {
    border: none;
    border-bottom: 2px dashed #94a3b8;
    background: transparent;
    padding: 0.15rem 0.5rem;
    font-size: 0.95rem;
    color: #1e293b;
    /* Floor only. The per-gap stepped width (inline style) does the real sizing;
       100px here would have clamped every short gap back up to ~12 characters. */
    min-width: 4em;
    box-sizing: content-box;
    outline: none;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    border-radius: 2px 2px 0 0;
    font-family: inherit;
}

.dialog-input:hover {
    border-bottom-style: solid;
    border-bottom-color: #3b82f6;
    background: #eff6ff;
}

.dialog-input:focus {
    border-bottom-style: solid;
    border-bottom-color: #2563eb;
    background: #eff6ff;
    box-shadow: 0 2px 0 0 #2563eb;
}

.dialog-input.dialog-input-correct {
    border-bottom-color: #22c55e;
    color: #16a34a;
    font-weight: 600;
}

.dialog-input.dialog-input-incorrect {
    border-bottom-color: #ef4444;
    color: #dc2626;
}

/* Left blank on submit — amber, so it reads as "not attempted" rather than
   "wrong". Was missing entirely, leaving skipped gaps in the neutral style. */
.dialog-input.dialog-input-skipped {
    border-bottom-color: #f59e0b;
    border-bottom-style: solid;
    color: #b45309;
    background: #fff7ed;
}

/* Drag-drop slots: after submitting, colour them like the typed gaps above.
   These need three classes to outrank .dialog-slot.filled, which paints every
   answered slot blue regardless of whether it was right. */
.dialog-slot.filled.dialog-slot-correct {
    border-color: #22c55e;
    background: #f0fdf4;
    color: #15803d;
}

.dialog-slot.filled.dialog-slot-incorrect {
    border-color: #ef4444;
    background: #fef2f2;
    color: #b91c1c;
}

.dialog-slot.dialog-slot-skipped {
    border-style: solid;
    border-color: #f59e0b;
    background: #fff7ed;
    color: #b45309;
}

/* Keep the submitted colours on hover — the exercise is over, nothing to drag. */
.dialog-slot.filled.dialog-slot-correct:hover {
    background: #dcfce7;
    border-color: #16a34a;
}

.dialog-slot.filled.dialog-slot-incorrect:hover {
    background: #fee2e2;
    border-color: #dc2626;
}

/* Correct-answer chip. Scoped to span on purpose: "dialog-correct" is also the
   row's status class (.dialog-row.dialog-correct). Unscoped, this block sits
   after .dialog-row with equal specificity and wins, so every correctly
   answered row inherited the chip's padding (0.15rem vs 0.85rem), font size
   and green bold text. Same trap as .text-filling-correct. */
span.dialog-correct {
    font-size: 0.82rem;
    color: #16a34a;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    background: #dcfce7;
    border-radius: 4px;
}

/* Picture Vocabulary Grid */
.picture-vocabulary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1.5rem;
}

.vocab-card {
    background: var(--card);
    border: 2px solid hsl(45, 90%, 60%);
    border-radius: 0.75rem;
    overflow: hidden;
    text-align: center;
}

.vocab-image {
    padding: 1rem;
    background: hsl(45, 90%, 97%);
}

.vocab-image-placeholder {
    width: 120px;
    height: 100px;
    margin: 0 auto;
    background: hsl(45, 50%, 92%);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: hsl(45, 30%, 60%);
}

.vocab-text {
    font-weight: 600;
    font-size: 0.9375rem;
    padding: 0.75rem;
    margin: 0;
}

.vocab-audio {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--muted);
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.audio-play-btn {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: none;
    background: var(--foreground);
    color: var(--card);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.audio-play-btn:hover {
    transform: scale(1.1);
}

.audio-progress {
    flex: 1;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
}

.audio-progress-fill {
    width: 0%;
    height: 100%;
    background: var(--foreground);
    border-radius: 2px;
}

/* Fill-in Exercise */
.fill-in-exercise {
    max-width: 600px;
}

.fill-in-instruction {
    font-size: 1rem;
    color: hsl(200, 50%, 35%);
    font-weight: 500;
    margin-bottom: 1.5rem;
}

.fill-in-instruction em {
    font-style: italic;
}

.fill-in-questions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.fill-in-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.fill-in-number {
    font-weight: 600;
    color: hsl(200, 50%, 40%);
    min-width: 2rem;
}

.fill-in-input {
    width: 160px;
    padding: 0.5rem 0.75rem;
    border: none;
    border-bottom: 2px solid var(--border);
    background: transparent;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s;
}

.fill-in-input:focus {
    border-color: var(--primary);
}

.fill-in-text {
    font-size: 1rem;
}

/* Multiple Choice Exercise */
.multiple-choice-exercise,
.mixed-exercise {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.mc-question {
    padding: 1rem;
    background: var(--muted);
    border-radius: 0.5rem;
}

.mc-question-text {
    font-weight: 600;
    margin-bottom: 0.75rem;
}

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

.mc-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
}

.mc-option:hover {
    border-color: var(--primary);
}

.mc-option input {
    accent-color: var(--primary);
}

.mc-option-text {
    font-size: 0.9375rem;
}

/* True/False Exercise */
.true-false-exercise {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tf-question {
    padding: 1rem;
    background: var(--muted);
    border-radius: 0.5rem;
}

.tf-question-text {
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.tf-options {
    display: flex;
    gap: 1rem;
}

.tf-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
}

.tf-option:hover {
    border-color: var(--primary);
}

.tf-option input {
    accent-color: var(--primary);
}

.tf-true {
    color: var(--success);
    font-weight: 600;
}

.tf-false {
    color: var(--destructive);
    font-weight: 600;
}

/* Submit Button */
.submit-exercise-btn {
    margin-top: 1.5rem;
    padding: 0.75rem 2rem;
    background: var(--success);
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.submit-exercise-btn:hover {
    background: hsl(142, 76%, 40%);
    transform: translateY(-1px);
}

/* Navigation */
.exercise-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 2rem;
    border-top: 1px solid var(--border);
    background: var(--muted);
}

.nav-btn {
    padding: 0.625rem 1.5rem;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
}

.nav-btn-back {
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--foreground);
}

.nav-btn-back:hover {
    background: var(--muted);
}

.nav-btn-next,
.nav-btn-finish {
    background: var(--primary);
    color: white;
}

.nav-btn-next:hover,
.nav-btn-finish:hover {
    background: hsl(262, 83%, 48%);
}

/* Responsive Exercise Page */
@media (max-width: 900px) {
    .exercise-page {
        flex-direction: column;
    }

    .exercise-sidebar {
        width: 100%;
    }

    .exercise-steps-list {
        display: flex;
        overflow-x: auto;
        gap: 0.5rem;
        padding: 0.75rem;
    }

    .exercise-step-item {
        flex-shrink: 0;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0.75rem;
        min-width: 100px;
    }

    .step-desc {
        display: none;
    }
}

@media (max-width: 600px) {
    .picture-vocabulary-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .exercise-body {
        padding: 1rem;
    }

    .exercise-navigation {
        padding: 1rem;
    }
}

/* =======================
   Pronunciation Guide Page
   ======================= */
.pronunciation-page {
    max-width: 100%;
    margin: 0 auto;
}

.pronunciation-page .page-header {
    margin-bottom: 2rem;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--muted-foreground);
    text-decoration: none;
    font-size: 0.875rem;
    margin-bottom: 1rem;
    transition: color 0.2s;
}

.back-link:hover {
    color: var(--primary);
}

.accordion-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.accordion-item {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    cursor: pointer;
    transition: background 0.2s;
}

.accordion-header:hover {
    background: var(--muted);
}

.accordion-header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.unit-color-bar {
    width: 4px;
    height: 40px;
    border-radius: 2px;
}

.unit-color-green { background: hsl(142, 76%, 45%); }
.unit-color-blue { background: hsl(210, 100%, 50%); }
.unit-color-purple { background: hsl(270, 80%, 55%); }
.unit-color-orange { background: hsl(25, 95%, 55%); }
.unit-color-teal { background: hsl(175, 70%, 40%); }
.unit-color-red { background: hsl(0, 75%, 55%); }

.unit-info h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.unit-info p {
    font-size: 0.8125rem;
    color: var(--muted-foreground);
}

.accordion-header-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.unit-status {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 1rem;
    font-weight: 500;
}

.unit-status-completed {
    background: hsl(142, 76%, 90%);
    color: hsl(142, 76%, 35%);
}

.unit-status-in-progress {
    background: hsl(45, 93%, 90%);
    color: hsl(45, 93%, 35%);
}

.unit-status-not-started {
    background: var(--muted);
    color: var(--muted-foreground);
}

.unit-progress-bar {
    width: 100px;
    height: 6px;
    background: var(--muted);
    border-radius: 3px;
    overflow: hidden;
}

.unit-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s;
}

.unit-progress-green { background: hsl(142, 76%, 45%); }
.unit-progress-blue { background: hsl(210, 100%, 50%); }
.unit-progress-purple { background: hsl(270, 80%, 55%); }
.unit-progress-orange { background: hsl(25, 95%, 55%); }
.unit-progress-teal { background: hsl(175, 70%, 40%); }
.unit-progress-red { background: hsl(0, 75%, 55%); }

.unit-progress-text {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--muted-foreground);
    min-width: 35px;
}

.accordion-arrow {
    transition: transform 0.3s;
}

.accordion-item.open .accordion-arrow {
    transform: rotate(180deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background: var(--muted);
}

.accordion-item.open .accordion-content {
    max-height: 1000px;
}

.words-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
    padding: 1rem;
}

.word-card {
    background: var(--card);
    border-radius: var(--radius);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.word-text {
    font-weight: 600;
    font-size: 0.9375rem;
}

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

.word-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, opacity 0.2s;
}

.word-btn:hover {
    transform: scale(1.1);
}

.word-btn:active {
    transform: scale(0.95);
}

.word-btn-play {
    background: hsl(45, 90%, 55%);
    color: white;
}

.word-btn-slow {
    background: hsl(25, 95%, 55%);
    color: white;
}

.word-btn-record {
    background: hsl(340, 70%, 45%);
    color: white;
}

@media (max-width: 768px) {
    .accordion-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .accordion-header-right {
        width: 100%;
        justify-content: space-between;
    }

    .unit-progress-bar {
        width: 80px;
    }

    .words-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =======================
   Interactive Books Page
   ======================= */
.books-page {
    max-width: 1000px;
    margin: 0 auto;
}

.books-page .page-header {
    margin-bottom: 2rem;
}

.featured-book {
    display: flex;
    gap: 2rem;
    background: var(--card);
    border-radius: var(--radius);
    padding: 2rem;
    margin-bottom: 2.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.featured-book-cover {
    flex-shrink: 0;
}

.book-cover-gradient {
    width: 160px;
    height: 200px;
    background: linear-gradient(135deg, hsl(210, 100%, 55%), hsl(270, 80%, 55%));
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.featured-book-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.featured-badge {
    display: inline-block;
    background: hsl(210, 100%, 95%);
    color: hsl(210, 100%, 45%);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    margin-bottom: 0.75rem;
    width: fit-content;
}

.featured-book-info h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.featured-book-info p {
    color: var(--muted-foreground);
    margin-bottom: 1.25rem;
}

.featured-progress {
    margin-bottom: 1.5rem;
}

.featured-progress-bar {
    height: 8px;
    background: var(--muted);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.featured-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, hsl(210, 100%, 55%), hsl(270, 80%, 55%));
    border-radius: 4px;
}

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

.featured-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--primary);
    color: var(--primary-foreground);
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius);
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
    width: fit-content;
}

.featured-btn:hover {
    background: hsl(210, 100%, 45%);
    transform: translateY(-2px);
}

.books-section h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
}

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

.book-item {
    background: var(--card);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

.book-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.book-item-cover {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.book-item-blue .book-item-cover { background: linear-gradient(135deg, hsl(210, 100%, 55%), hsl(210, 100%, 45%)); }
.book-item-purple .book-item-cover { background: linear-gradient(135deg, hsl(270, 80%, 60%), hsl(270, 80%, 50%)); }
.book-item-green .book-item-cover { background: linear-gradient(135deg, hsl(142, 76%, 45%), hsl(142, 76%, 35%)); }
.book-item-orange .book-item-cover { background: linear-gradient(135deg, hsl(25, 95%, 55%), hsl(25, 95%, 45%)); }

.book-item-info {
    padding: 1rem;
}

.book-item-status {
    font-size: 0.6875rem;
    padding: 0.2rem 0.5rem;
    border-radius: 1rem;
    font-weight: 500;
    display: inline-block;
    margin-bottom: 0.5rem;
}

.book-status-completed {
    background: hsl(142, 76%, 90%);
    color: hsl(142, 76%, 35%);
}

.book-status-in-progress {
    background: hsl(45, 93%, 90%);
    color: hsl(45, 93%, 35%);
}

.book-status-not-started {
    background: var(--muted);
    color: var(--muted-foreground);
}

.book-item-info h4 {
    font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.book-item-info p {
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    margin-bottom: 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.book-item-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.book-item-progress {
    flex: 1;
    height: 4px;
    background: var(--muted);
    border-radius: 2px;
    overflow: hidden;
}

.book-item-progress-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 2px;
}

@media (max-width: 768px) {
    .featured-book {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .book-cover-gradient {
        width: 120px;
        height: 150px;
    }

    .featured-badge {
        margin-left: auto;
        margin-right: auto;
    }

    .featured-btn {
        margin: 0 auto;
    }

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

/* =======================
   Tracks Page
   ======================= */
.tracks-page {
    max-width: 900px;
    margin: 0 auto;
}

.tracks-page .page-header {
    margin-bottom: 2rem;
}

.tracks-units {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.tracks-unit-card {
    background: var(--card);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.tracks-unit-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    border-bottom: 1px solid var(--border);
}

.tracks-unit-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.tracks-unit-blue .tracks-unit-icon { background: linear-gradient(135deg, hsl(210, 100%, 55%), hsl(210, 100%, 45%)); }
.tracks-unit-purple .tracks-unit-icon { background: linear-gradient(135deg, hsl(270, 80%, 60%), hsl(270, 80%, 50%)); }
.tracks-unit-green .tracks-unit-icon { background: linear-gradient(135deg, hsl(142, 76%, 45%), hsl(142, 76%, 35%)); }
.tracks-unit-orange .tracks-unit-icon { background: linear-gradient(135deg, hsl(25, 95%, 55%), hsl(25, 95%, 45%)); }

.tracks-unit-info {
    flex: 1;
}

.tracks-unit-info h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.tracks-unit-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
}

.tracks-unit-meta .dot {
    width: 4px;
    height: 4px;
    background: var(--muted-foreground);
    border-radius: 50%;
}

.tracks-unit-progress-circle {
    width: 50px;
    height: 50px;
    position: relative;
}

.tracks-unit-progress-circle svg {
    transform: rotate(-90deg);
}

.circle-bg {
    fill: none;
    stroke: var(--muted);
    stroke-width: 3;
}

.circle-progress {
    fill: none;
    stroke: var(--primary);
    stroke-width: 3;
    stroke-linecap: round;
}

.tracks-unit-blue .circle-progress { stroke: hsl(210, 100%, 50%); }
.tracks-unit-purple .circle-progress { stroke: hsl(270, 80%, 55%); }
.tracks-unit-green .circle-progress { stroke: hsl(142, 76%, 40%); }
.tracks-unit-orange .circle-progress { stroke: hsl(25, 95%, 50%); }

.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.6875rem;
    font-weight: 600;
}

.tracks-list {
    padding: 0.5rem 0;
}

.track-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    transition: background 0.2s;
}

.track-row:hover {
    background: var(--muted);
}

.track-status-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.track-completed .track-status-icon {
    background: hsl(142, 76%, 90%);
    color: hsl(142, 76%, 40%);
}

.track-in-progress .track-status-icon {
    background: hsl(210, 100%, 95%);
    color: hsl(210, 100%, 50%);
}

.track-not-started .track-status-icon {
    background: var(--muted);
    color: var(--muted-foreground);
}

.track-details {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.track-title {
    font-size: 0.9375rem;
}

.track-completed .track-title {
    color: var(--muted-foreground);
}

.track-duration {
    font-size: 0.8125rem;
    color: var(--muted-foreground);
}

.track-play-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--primary);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, background 0.2s;
    flex-shrink: 0;
}

.track-play-btn:hover {
    transform: scale(1.1);
    background: hsl(210, 100%, 45%);
}

.track-play-btn svg {
    margin-left: 2px;
}

@media (max-width: 600px) {
    .tracks-unit-header {
        flex-wrap: wrap;
    }

    .tracks-unit-progress-circle {
        order: -1;
        margin-left: auto;
    }

    .track-details {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
}

/* =======================
   Videos Page
   ======================= */
.videos-page {
    max-width: 1000px;
    margin: 0 auto;
}

.videos-page .page-header {
    margin-bottom: 2rem;
}

.videos-units {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.videos-unit-section {
    background: var(--card);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.videos-unit-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.videos-unit-color {
    width: 4px;
    height: 24px;
    border-radius: 2px;
}

.videos-color-blue { background: hsl(210, 100%, 50%); }
.videos-color-purple { background: hsl(270, 80%, 55%); }
.videos-color-green { background: hsl(142, 76%, 40%); }
.videos-color-orange { background: hsl(25, 95%, 50%); }

.videos-unit-header h3 {
    flex: 1;
    font-size: 1rem;
    font-weight: 600;
}

.videos-count {
    font-size: 0.8125rem;
    color: var(--muted-foreground);
}

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

.video-item {
    cursor: pointer;
    transition: transform 0.2s;
}

.video-item:hover {
    transform: translateY(-4px);
}

.videos-page .video-thumbnail {
    position: relative;
    height: 160px;
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.videos-page .video-thumb-blue { background: linear-gradient(135deg, hsl(210, 100%, 55%), hsl(210, 100%, 45%)); }
.videos-page .video-thumb-purple { background: linear-gradient(135deg, hsl(270, 80%, 60%), hsl(270, 80%, 50%)); }
.videos-page .video-thumb-green { background: linear-gradient(135deg, hsl(142, 76%, 45%), hsl(142, 76%, 35%)); }
.videos-page .video-thumb-orange { background: linear-gradient(135deg, hsl(25, 95%, 55%), hsl(25, 95%, 45%)); }
.videos-page .video-thumb-pink { background: linear-gradient(135deg, hsl(340, 70%, 55%), hsl(340, 70%, 45%)); }

.video-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: opacity 0.2s;
}

.video-item:hover .video-play-overlay {
    opacity: 1;
}

.video-play-icon {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--foreground);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.video-play-icon svg {
    margin-left: 4px;
}

.video-duration-badge {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    background: rgba(0, 0, 0, 0.75);
    color: white;
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

.video-completed-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 24px;
    height: 24px;
    background: hsl(142, 76%, 45%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-info h4 {
    font-size: 0.9375rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.video-completed .video-info h4 {
    color: var(--muted-foreground);
}

.video-progress-bar {
    height: 4px;
    background: var(--muted);
    border-radius: 2px;
    overflow: hidden;
}

.video-progress-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 2px;
}

@media (max-width: 600px) {
    .videos-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .videos-page .video-thumbnail {
        height: 120px;
    }
}

/* Lesson Cards */
.lesson-card {
    flex-shrink: 0;
    width: 200px;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--card);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.lesson-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.lesson-card-visual {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.lesson-card-blue .lesson-card-visual {
    background: linear-gradient(135deg, hsl(210, 100%, 55%), hsl(210, 100%, 45%));
}

.lesson-card-green .lesson-card-visual {
    background: linear-gradient(135deg, hsl(142, 70%, 50%), hsl(142, 70%, 40%));
}

.lesson-icon {
    color: white;
    opacity: 0.9;
}

.lesson-icon-blue {
    color: white;
}

.lesson-icon-green {
    color: white;
}

.lesson-card-content {
    padding: 0.75rem;
    text-align: center;
}

.lesson-card-content h3 {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--foreground);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Interactive Modal */
.interactive-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 0.3s, opacity 0.3s;
}

.interactive-modal.active {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s, opacity 0.3s;
}

.interactive-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.interactive-modal-content {
    position: absolute;
    top: 0;
    right: 0;
    width: 1000px;
    max-width: 100%;
    height: 100%;
    background: var(--background);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease-out;
}

.interactive-modal.active .interactive-modal-content {
    transform: translateX(0);
}

.interactive-modal-close {
    position: absolute;
    top: 0.5rem;
    left: -3rem;
    background: var(--background);
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: var(--muted-foreground);
    border-radius: var(--radius);
    transition: background 0.2s, color 0.2s;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.interactive-modal-close:hover {
    background: var(--muted);
    color: var(--foreground);
}

.interactive-modal-fullscreen {
    position: absolute;
    top: 3.5rem;
    left: -3rem;
    background: var(--background);
    border: none;
    padding: 0.5rem;
    border-radius: 0.375rem;
    cursor: pointer;
    color: var(--muted-foreground, #64748b);
    transition: all 0.15s;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.interactive-modal-fullscreen:hover {
    background: var(--muted);
    color: var(--foreground);
}

@media (max-width: 1280px) {
    .interactive-modal-fullscreen {
        left: 0.5rem;
        top: 3.5rem;
        background: rgba(255, 255, 255, 0.9);
    }
}

.interactive-modal-body {
    flex: 1;
    overflow: hidden;
}

.interactive-modal-body iframe {
    width: 100%;
    height: 100%;
    border: none;
}

@media (max-width: 1280px) {
    .interactive-modal-content {
        width: 100%;
    }

    .interactive-modal-close {
        left: 0.5rem;
        top: 0.5rem;
        background: rgba(255, 255, 255, 0.9);
    }
}

@media (max-width: 640px) {
    .lesson-card {
        width: 160px;
    }

    .lesson-card-visual {
        height: 100px;
    }
}

/* Video Modal - Centered */
.video-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    width: 90%;
    max-width: 900px;
    max-height: 90vh;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: all 0.3s ease;
}

.interactive-modal.active .video-modal-content {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

.video-modal-content .interactive-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    left: auto;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    z-index: 10;
}

.video-modal-content .interactive-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.video-modal-body {
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
}

.video-modal-body video {
    width: 100%;
    height: 100%;
    display: block;
}

/* Video Card Updates */
.video-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.video-thumbnail {
    position: relative;
}

.video-category-type {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Video Placeholder Image */
.video-placeholder-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    background: white;
}

.video-play-overlay {
    z-index: 2;
}

/* =======================
   Report Page
   ======================= */
.report-container {
    max-width: 100%;
}

.report-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

.report-print-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.report-print-btn:hover {
    background: hsl(210, 100%, 38%);
}

/* Report Header */
.report-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    color: white;
    padding: 1.5rem;
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
    gap: 1rem;
}

@media (max-width: 768px) {
    .report-header {
        flex-direction: column;
    }
}

.report-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.25rem 0;
}

.report-subtitle {
    font-size: 0.9375rem;
    opacity: 0.9;
    margin: 0;
}

.report-header-right {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    text-align: right;
}

@media (max-width: 768px) {
    .report-header-right {
        text-align: left;
    }
}

.report-meta {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.8125rem;
}

.report-meta-label {
    opacity: 0.75;
    min-width: 3.5rem;
}

.report-meta-value {
    font-weight: 600;
}

/* Report Sections */
.report-section {
    margin-bottom: 1.5rem;
}

.report-section-title {
    font-size: 1.0625rem;
    font-weight: 700;
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--primary);
    color: var(--foreground);
}

/* Summary Grid */
.report-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .report-summary-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.report-summary-card {
    background: var(--card);
    padding: 1rem;
    border-radius: var(--radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.report-summary-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 0.25rem;
}

.report-summary-label {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    margin-bottom: 0.5rem;
}

.report-summary-bar {
    width: 100%;
    height: 0.375rem;
    background: var(--border);
    border-radius: 0.1875rem;
    overflow: hidden;
}

.report-summary-bar-fill {
    height: 100%;
    border-radius: 0.1875rem;
    transition: width 0.3s ease;
}

.report-bar-blue {
    background: var(--primary);
}

.report-bar-green {
    background: var(--success);
}

/* Score Grid */
.report-score-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .report-score-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.report-score-item {
    padding: 1rem;
    border-radius: var(--radius);
    color: white;
    text-align: center;
}

.report-score-number {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.report-score-label {
    font-size: 0.75rem;
    opacity: 0.9;
}

.report-score-blue {
    background: linear-gradient(135deg, hsl(210, 100%, 50%), hsl(210, 100%, 40%));
}

.report-score-green {
    background: linear-gradient(135deg, hsl(142, 76%, 45%), hsl(142, 76%, 36%));
}

.report-score-red {
    background: linear-gradient(135deg, hsl(0, 84%, 55%), hsl(0, 84%, 45%));
}

.report-score-yellow {
    background: linear-gradient(135deg, hsl(40, 95%, 55%), hsl(40, 95%, 45%));
}

/* Report Table */
.report-table-wrapper {
    overflow-x: auto;
}

.report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    background: var(--card);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.report-table thead {
    background: hsl(210, 15%, 96%);
}

.report-table th {
    padding: 0.75rem 0.625rem;
    text-align: left;
    font-weight: 600;
    color: var(--muted-foreground);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.report-table td {
    padding: 0.75rem 0.625rem;
    border-top: 1px solid var(--border);
    vertical-align: middle;
}

.report-table tbody tr:hover {
    background: hsl(210, 15%, 98%);
}

.report-unit-name {
    font-weight: 600;
    color: var(--foreground);
    min-width: 10rem;
}

.report-cell-bar {
    width: 4rem;
    height: 0.375rem;
    background: var(--border);
    border-radius: 0.1875rem;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.375rem;
}

.report-cell-bar-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 0.1875rem;
}

.report-cell-value {
    font-weight: 500;
    white-space: nowrap;
}

.report-text-green {
    color: hsl(142, 76%, 36%);
}

.report-text-red {
    color: hsl(0, 84%, 50%);
}

/* Report Status Badges */
.report-status-badge {
    display: inline-block;
    padding: 0.1875rem 0.5rem;
    border-radius: 0.75rem;
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
}

.report-status-completed {
    background: hsl(142, 76%, 92%);
    color: hsl(142, 76%, 30%);
}

.report-status-progress {
    background: hsl(210, 100%, 92%);
    color: hsl(210, 100%, 35%);
}

.report-status-skipped {
    background: hsl(0, 0%, 93%);
    color: hsl(0, 0%, 45%);
}

.report-row-skipped {
    opacity: 0.6;
}

/* Report Footer */
.report-footer {
    text-align: center;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    color: var(--muted-foreground);
    font-size: 0.75rem;
}

/* =======================
   Print Styles
   ======================= */
@media print {
    /* Hide navigation and UI elements */
    .sidebar,
    .mobile-header,
    .no-print {
        display: none !important;
    }

    .main-content {
        margin-left: 0 !important;
    }

    .content-wrapper {
        padding: 0 !important;
    }

    body {
        background: white;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .report-header {
        background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end)) !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .report-score-item {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .report-table {
        font-size: 0.75rem;
    }

    .report-section {
        page-break-inside: avoid;
    }

    .report-container {
        max-width: 100%;
    }
}

/* Ex 7753 (RobotPowerL1 unit3 listening ex2) — user asked for a numbered
   caption above each picture card + extra top spacing so the images sit
   lower on the page. Scoped strictly to this exercise. */
.exercise-content-card[data-ex-id="7753"] .picture-dropdown-grid {
    counter-reset: pdd;
    margin-top: 2.5rem;
}
.exercise-content-card[data-ex-id="7753"] .picture-dropdown-card {
    counter-increment: pdd;
    position: relative;
    padding-top: 2.2rem;
}
.exercise-content-card[data-ex-id="7753"] .picture-dropdown-card::before {
    content: counter(pdd) ".";
    position: absolute;
    top: 0.4rem;
    left: 0;
    right: 0;
    text-align: center;
    font-weight: 800;
    font-size: 1.25rem;
    color: #1e293b;
}