/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@font-face {
    font-family: 'WenKai';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../assets/fonts/wenkai-regular.woff2') format('woff2');
}

/* CSS Custom Properties (Design Tokens) */
:root {
    /* Color System */
    --color-white: #ffffff;
    --color-gray-50: #f8fafc;
    --color-gray-100: #f1f5f9;
    --color-gray-200: #e2e8f0;
    --color-gray-300: #cbd5e1;
    --color-gray-400: #94a3b8;
    --color-gray-500: #64748b;
    --color-gray-600: #475569;
    --color-gray-700: #334155;
    --color-gray-800: #1e293b;
    --color-gray-900: #0f172a;

    /* Brand Colors */
    --color-brand-primary: #667eea;
    --color-brand-secondary: #764ba2;
    --color-brand-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    /* Semantic Colors */
    --color-success: #10b981;
    --color-success-bg: #f0fdf4;
    --color-warning: #f59e0b;
    --color-warning-bg: #fffbeb;
    --color-error: #ef4444;
    --color-error-bg: #fef2f2;
    --color-info: #3b82f6;
    --color-info-bg: #eff6ff;

    /* Spacing System */
    --space-xs: 0.25rem;
    /* 4px */
    --space-sm: 0.5rem;
    /* 8px */
    --space-md: 1rem;
    /* 16px */
    --space-lg: 1.5rem;
    /* 24px */
    --space-xl: 2rem;
    /* 32px */
    --space-2xl: 3rem;
    /* 48px */

    /* Font System */
    --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    --font-family-mono: 'SF Mono', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;

    /* Font Sizes */
    --font-size-xs: 0.75rem;
    /* 12px */
    --font-size-sm: 0.875rem;
    /* 14px */
    --font-size-base: 1rem;
    /* 16px */
    --font-size-lg: 1.125rem;
    /* 18px */
    --font-size-xl: 1.25rem;
    /* 20px */
    --font-size-2xl: 1.5rem;
    /* 24px */
    --font-size-3xl: 1.875rem;
    /* 30px */
    --font-size-4xl: 2.25rem;
    /* 36px */
    --font-size-5xl: 3rem;
    /* 48px */

    /* Font Weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Line Heights */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;

    /* Border Radius */
    --border-radius-sm: 0.25rem;
    /* 4px */
    --border-radius-md: 0.375rem;
    /* 6px */
    --border-radius-lg: 0.5rem;
    /* 8px */
    --border-radius-xl: 0.75rem;
    /* 12px */
    --border-radius-2xl: 1rem;
    /* 16px */
    --border-radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* Transitions */
    --transition-fast: 150ms ease-out;
    --transition-normal: 200ms ease-out;
    --transition-slow: 300ms ease-out;

    /* Library configuration panel */
    --library-config-bg: rgba(255, 255, 255, 0.9);
    --library-config-border: rgba(115, 115, 115, 0.25);
    --library-config-text: var(--color-gray-700);
    --library-config-meta: rgba(51, 65, 85, 0.65);
    --library-config-item-bg: rgba(217, 203, 186, 0.35);
    --library-config-item-border: rgba(115, 115, 115, 0.25);
    --library-config-item-active-bg: rgba(102, 126, 234, 0.18);
    --library-config-item-active-border: rgba(102, 126, 234, 0.35);

    /* Exam item tokens */
    --exam-item-bg: #d9cbba;
    --exam-item-border-color: #737373;
    --exam-item-border-width: 2px;

    /* Suite practice card */
    --suite-card-title-color: var(--color-gray-900);
    --suite-card-description-color: var(--color-gray-600);
    --suite-card-icon-color: var(--color-brand-primary);
    --suite-card-icon-bg: rgba(255, 255, 255, 0.65);
    --suite-card-accent-overlay: linear-gradient(135deg, rgba(102, 126, 234, 0.16), rgba(118, 75, 162, 0.08));
    --suite-card-accent-opacity: 0.35;

    /* Vocab tokens */
    --bg: #f6f7fb;
    --panel: #ffffff;
    --line: #e6e8ee;
    --lineSubtle: #eef0f5;
    --text: #1f2937;
    --muted: #6b7280;
    --accent: #6c63ff;
    --accentSoft: #eef2ff;
    --success: #10b981;
    --danger: #ef4444;
    --warn: #f59e0b;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-7: 28px;
    --sp-8: 32px;
    initial-value: 135deg;
}

body {
    font-family: var(--font-family-primary);
    background: linear-gradient(var(--body-gradient-angle), #ffd89b 0%, #6accc7 100%);
    animation: bodyGradientRotation 120s ease-in-out infinite;
    min-height: 100vh;
    color: var(--color-gray-900);
    line-height: var(--line-height-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@keyframes bodyGradientRotation {
    0% {
        --body-gradient-angle: 135deg;
    }

    50% {
        --body-gradient-angle: 225deg;
    }

    100% {
        --body-gradient-angle: 495deg;
    }
}

body.no-scroll {
    overflow: hidden;
}

.is-hidden {
    display: none !important;
}

.view#more-view {
    display: none;
}

.view#more-view.active {
    display: block;
}

.container {
    color: var(--color-gray-900);
    margin-bottom: var(--space-sm);
    letter-spacing: -0.025em;
}

.header p {
    font-size: var(--font-size-lg);
    color: var(--color-gray-600);
    font-weight: var(--font-weight-normal);
}

/* Message Notifications */
.message-container {
    position: fixed;
    top: var(--space-xl);
    right: var(--space-xl);
    width: 380px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    pointer-events: none;
}

.message {
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--border-radius-lg);
    margin-bottom: var(--space-md);
    border-left: 4px solid;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    pointer-events: auto;
    animation: slideIn var(--transition-normal);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(10px);
    font-weight: var(--font-weight-medium);
}

.message-label {
    font-weight: var(--font-weight-semibold);
}

.message-text {
    font-weight: var(--font-weight-medium);
}

.message-leaving {
    opacity: 0;
    transform: translateX(10%);
    transition: opacity var(--transition-normal), transform var(--transition-normal);
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.message.success {
    background: var(--color-success-bg);
    border-color: var(--color-success);
    color: #065f46;
}

.message.error {
    background: var(--color-error-bg);
    border-color: var(--color-error);
    color: #7f1d1d;
}

.message.info {
    background: var(--color-info-bg);
    border-color: var(--color-info);
    color: #1e3a8a;
}

.message.warning {
    background: var(--color-warning-bg);
    border-color: var(--color-warning);
    color: #92400e;
}

.validation-report__card {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: var(--border-radius-xl);
    padding: var(--space-xl);
    margin: var(--space-xl) 0;
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(8px);
    color: var(--color-gray-900);
}

.validation-report__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.validation-report__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    color: rgba(51, 65, 85, 0.85);
}

.validation-report__meta-item strong {
    display: block;
    font-size: var(--font-size-sm);
    color: rgba(51, 65, 85, 0.65);
}

.validation-report__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.validation-report__entry {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--border-radius-md);
    background: rgba(248, 250, 252, 0.8);
    border: 1px solid rgba(148, 163, 184, 0.28);
}

.validation-report__entry[data-validation-status="valid"] {
    border-color: rgba(16, 185, 129, 0.45);
    background: rgba(240, 253, 244, 0.9);
}

.validation-report__entry[data-validation-status="error"] {
    border-color: rgba(239, 68, 68, 0.45);
    background: rgba(254, 242, 242, 0.9);
}

.validation-report__entry-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-weight: var(--font-weight-medium);
}

.validation-report__errors {
    margin-left: var(--space-lg);
    color: rgba(71, 85, 105, 0.9);
    font-size: var(--font-size-sm);
    list-style: disc;
}

.validation-report__status {
    margin-top: var(--space-md);
    font-weight: var(--font-weight-semibold);
    color: rgba(30, 41, 59, 0.95);
}

.validation-report__actions {
    margin-top: var(--space-lg);
    display: flex;
    justify-content: flex-end;
}

.validation-report__actions .btn {
    pointer-events: auto;
}

.performance-report__card {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: var(--border-radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-md);
    margin: var(--space-xl) 0;
}

.performance-report__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    color: var(--color-gray-900);
}

.performance-report__section {
    margin-bottom: var(--space-lg);
    background: rgba(248, 250, 252, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: var(--border-radius-lg);
    padding: var(--space-lg);
}

.performance-report__section-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-md);
    color: rgba(30, 41, 59, 0.9);
}

.performance-report__metrics {
    display: grid;
    gap: var(--space-sm);
}

.performance-report__metric {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--border-radius-md);
    background: rgba(255, 255, 255, 0.9);
}

.performance-report__metric-label {
    color: rgba(71, 85, 105, 0.9);
    font-size: var(--font-size-sm);
}

.performance-report__metric-value {
    font-weight: var(--font-weight-semibold);
    color: rgba(30, 41, 59, 0.95);
}

.performance-report__actions {
    margin-top: var(--space-lg);
    display: flex;
    justify-content: flex-end;
}

.performance-report__actions .btn {
    pointer-events: auto;
}

.performance-report__empty {
    color: rgba(71, 85, 105, 0.9);
    font-size: var(--font-size-sm);
    margin: var(--space-md) 0;
}

.main-nav {
    display: flex;
    justify-content: center;
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
    flex-wrap: wrap;
}

.nav-btn {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    color: var(--color-gray-700);
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--border-radius-full);
    cursor: pointer;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-normal);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    position: relative;
    overflow: hidden;
}

.nav-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--color-brand-gradient);
    transition: left var(--transition-normal);
    z-index: -1;
}

.nav-btn:hover {
    border-color: var(--color-brand-primary);
    color: var(--color-white);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.nav-btn:hover::before {
    left: 0;
}

.nav-btn.active {
    background: var(--color-brand-gradient);
    border-color: transparent;
    color: var(--color-white);
    box-shadow: var(--shadow-md);
}

.nav-btn.active::before {
    left: 0;
}

.view {
    display: none;
    background: #F2F2F2;
    padding: var(--space-2xl);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-lg);
    border: 2px solid #737373;
    min-height: 400px;
}

#vocab-view.view {
    background: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
    border-radius: var(--border-radius-2xl);
    overflow: hidden;
    min-height: 0;
}

.view.active {
    display: block;
}

.view>h2 {
    margin-bottom: var(--space-xl);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
    letter-spacing: -0.025em;
}

.more-view-subtitle {
    margin-bottom: var(--space-xl);
    font-size: var(--font-size-lg);
    color: rgba(30, 41, 59, 0.75);
    text-align: center;
}

.more-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-xl);
}

.tool-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding: var(--space-xl);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.9) 0%, rgba(230, 242, 255, 0.9) 100%);
    border: 2px solid rgba(115, 115, 115, 0.4);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-lg);
    text-align: left;
    color: var(--color-gray-800);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
    cursor: pointer;
}

.tool-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: rgba(102, 126, 234, 0.65);
}

.tool-card-icon {
    font-size: 2.5rem;
}

.tool-card-content h3 {
    font-size: var(--font-size-2xl);
    color: var(--color-gray-900);
    margin-bottom: var(--space-sm);
}

.tool-card-content p {
    font-size: var(--font-size-sm);
    line-height: 1.65;
    color: rgba(30, 41, 59, 0.7);
}

.tool-card-arrow {
    align-self: flex-end;
    font-weight: var(--font-weight-semibold);
    color: var(--color-brand-primary);
}


.vocab-view-shell {
    --vocab-paper: #f8f1e4;
    --vocab-paper-deep: #efe2cf;
    --vocab-paper-bright: #fff9f1;
    --vocab-ink: #2b241c;
    --vocab-muted: #6f6256;
    --vocab-accent: #c4684b;
    --vocab-accent-strong: #a6553d;
    --vocab-accent-soft: #f2dfd3;
    --vocab-surface: rgba(255, 250, 242, 0.92);
    --vocab-line-strong: rgba(176, 145, 113, 0.55);
    --vocab-line: #e2d3bf;
    --vocab-shadow: 0 22px 40px rgba(78, 60, 38, 0.18);
    --vocab-shadow-soft: 0 12px 24px rgba(78, 60, 38, 0.14);
    --vocab-shadow-fine: 0 4px 10px rgba(78, 60, 38, 0.12);
    --vocab-shadow-strong: 0 30px 60px rgba(78, 60, 38, 0.24);
    --vocab-font-body: 'WenKai', 'Kaiti SC', 'STKaiti', 'Songti SC', 'STSong', 'SimSun', serif;
    --vocab-font-title: 'WenKai', 'Kaiti SC', 'STKaiti', 'Songti SC', 'STSong', 'SimSun', serif;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    color: var(--vocab-ink);
    font-family: var(--vocab-font-body);
    font-synthesis: weight;
    background-color: var(--vocab-paper);
    background-image:
        radial-gradient(circle at 18% 15%, rgba(255, 246, 230, 0.9), transparent 45%),
        radial-gradient(circle at 85% 10%, rgba(255, 230, 200, 0.45), transparent 55%),
        radial-gradient(circle at 88% 88%, rgba(210, 175, 135, 0.2), transparent 50%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 45%);
    overflow: hidden;
}

.vocab-view-shell::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 10% 25%, rgba(204, 165, 120, 0.18), transparent 45%),
        radial-gradient(circle at 92% 32%, rgba(255, 255, 255, 0.35), transparent 55%);
    pointer-events: none;
}

.vocab-view-shell::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    background-image:
        repeating-linear-gradient(0deg, rgba(224, 210, 192, 0.15) 0, rgba(224, 210, 192, 0.15) 1px, transparent 1px, transparent 36px),
        repeating-linear-gradient(90deg, rgba(239, 231, 219, 0.12) 0, rgba(239, 231, 219, 0.12) 1px, transparent 1px, transparent 46px);
    opacity: 0.35;
    pointer-events: none;
}

.vocab-view-shell > * {
    position: relative;
    z-index: 1;
}

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

.vocab-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(12px);
    background: rgba(248, 241, 229, 0.92);
    border-bottom: 1px solid var(--vocab-line);
    box-shadow: 0 8px 18px rgba(78, 60, 38, 0.12);
    padding: 0 var(--sp-6, 24px);
    animation: vocabSceneIn 0.6s ease both;
}

.vocab-topbar__container {
    margin: 0 auto;
    width: min(1400px, 100%);
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--sp-4, 16px);
    align-items: center;
    min-height: 64px;
}

.vocab-topbar__section {
    display: flex;
    align-items: center;
    gap: var(--sp-3, 12px);
    min-width: 0;
}

.vocab-topbar__section--left {
    grid-column: span 4;
}

.vocab-topbar__section--center {
    grid-column: span 4;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-2, 8px);
}

.vocab-topbar__section--right {
    grid-column: span 4;
    justify-content: flex-end;
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 10px;
}

.vocab-topbar__titles {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vocab-topbar__heading {
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 600;
    margin: 0;
    color: var(--vocab-ink);
    font-family: var(--vocab-font-title);
    letter-spacing: 0.02em;
}

.vocab-topbar__subtitle {
    font-size: 13px;
    color: var(--vocab-muted);
    margin: 0;
}

.vocab-progress {
    position: relative;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: rgba(172, 150, 124, 0.25);
    overflow: hidden;
}

.vocab-progress__track {
    width: 100%;
    height: 100%;
}

.vocab-progress__fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(120deg, #d68057 0%, #c4684b 65%, #b85d46 100%);
    transition: width 0.3s ease;
}

.vocab-progress__chips {
    display: flex;
    gap: var(--sp-2, 8px);
    flex-wrap: wrap;
}

.chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 12px;
    border-radius: 999px;
    font-size: var(--fz-xs, 12px);
    font-weight: 500;
    background: rgba(255, 250, 242, 0.92);
    border: 1px solid var(--vocab-line);
    color: var(--vocab-muted);
    box-shadow: 0 2px 6px rgba(78, 60, 38, 0.08);
}

.vocab-topbar__menu {
    position: relative;
    width: 40px;
    justify-self: end;
}

.vocab-topbar__section--right > .btn[data-action='primary-cta'] {
    white-space: nowrap;
    min-width: 152px;
    min-height: 40px;
    padding-inline: 18px;
}

.vocab-topbar__menu > .btn.btn-icon {
    width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
}

.vocab-list-switcher {
    position: relative;
}

.vocab-list-switcher .switcher-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--border-radius-lg, var(--radius-md, 12px));
    border: 1px solid var(--vocab-line);
    background: rgba(255, 250, 242, 0.92);
    color: var(--vocab-ink);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(78, 60, 38, 0.12);
    width: 100%;
}

.vocab-list-switcher .switcher-btn:hover {
    border-color: rgba(176, 145, 113, 0.8);
    background: rgba(255, 252, 247, 0.96);
}

.vocab-list-switcher .current-list-name {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vocab-list-switcher .switcher-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 240px;
    background: #fffaf2;
    border: 1px solid var(--vocab-line);
    border-radius: 14px;
    box-shadow: var(--vocab-shadow-soft);
    overflow: hidden;
    z-index: 120;
}

.vocab-list-switcher .dropdown-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
}

.vocab-list-switcher .list-option {
    display: grid;
    grid-template-columns: 20px 1fr auto 18px;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    color: var(--vocab-ink);
    font-size: 13px;
}

.vocab-list-switcher .list-option:hover {
    background: rgba(196, 104, 75, 0.12);
}

.vocab-list-switcher .list-option.active {
    background: rgba(196, 104, 75, 0.2);
}

.vocab-list-switcher .list-count {
    font-variant-numeric: tabular-nums;
    color: var(--vocab-muted);
}

.vocab-list-switcher .active-indicator {
    color: var(--vocab-accent);
    font-weight: 700;
}

@media (max-width: 768px) {
    .vocab-list-switcher .current-list-name {
        display: none;
    }

    .vocab-menu__list-switcher .vocab-list-switcher .current-list-name {
        display: inline;
    }

    .vocab-list-switcher .switcher-btn {
        padding: 8px 10px;
    }

    .vocab-list-switcher .switcher-dropdown {
        min-width: 200px;
    }
}

.vocab-view-shell .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2, 8px);
    padding: var(--sp-3, 12px) var(--sp-5, 20px);
    border-radius: 999px;
    font-size: var(--fz-sm, 14px);
    font-weight: 600;
    border: 1px solid rgba(168, 135, 104, 0.4);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
    background: linear-gradient(180deg, #d77a56 0%, #c4684b 100%);
    color: #ffffff;
    box-shadow: 0 8px 16px rgba(78, 60, 38, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.vocab-view-shell .btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(78, 60, 38, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.vocab-view-shell .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.vocab-view-shell .btn-primary {
    background: linear-gradient(180deg, #d77a56 0%, #c4684b 100%);
    color: #ffffff;
}

.vocab-view-shell .btn-primary:hover:not(:disabled) {
    background: linear-gradient(180deg, #db8661 0%, #b85d46 100%);
}

.vocab-view-shell .btn-outline {
    background: rgba(255, 250, 242, 0.96);
    color: var(--vocab-ink);
    border-color: var(--vocab-line);
    box-shadow: 0 6px 14px rgba(78, 60, 38, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.vocab-view-shell .btn-outline:hover:not(:disabled) {
    background: rgba(255, 252, 247, 1);
    box-shadow: 0 8px 18px rgba(78, 60, 38, 0.16);
}

.vocab-view-shell .btn-soft {
    background: rgba(196, 104, 75, 0.12);
    color: var(--vocab-accent-strong);
    border-color: transparent;
    padding: var(--sp-2, 8px) var(--sp-3, 12px);
}

.vocab-view-shell .btn-soft:hover:not(:disabled) {
    background: rgba(196, 104, 75, 0.2);
    transform: none;
    box-shadow: none;
}

.vocab-view-shell .btn-ghost {
    background: transparent;
    color: var(--vocab-muted);
    border-color: transparent;
}

.vocab-view-shell .btn-ghost:hover:not(:disabled) {
    background: rgba(110, 92, 72, 0.1);
    box-shadow: none;
    transform: none;
}

.vocab-view-shell .btn-link {
    background: transparent;
    color: var(--vocab-accent-strong);
    border-color: transparent;
    padding: 0;
}

.vocab-view-shell .btn-link:hover:not(:disabled) {
    text-decoration: underline;
    transform: none;
    box-shadow: none;
}

.vocab-view-shell .btn.btn-sm {
    padding: var(--sp-2, 8px) var(--sp-4, 16px);
    font-size: var(--fz-xs, 12px);
}

.vocab-view-shell .btn-icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    border: 1px solid var(--vocab-line);
    background: rgba(255, 250, 242, 0.9);
    color: var(--vocab-ink);
    box-shadow: 0 6px 12px rgba(78, 60, 38, 0.14);
}

.vocab-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    display: flex;
    flex-direction: column;
    min-width: 220px;
    border-radius: var(--border-radius-xl, var(--radius-lg, 16px));
    background: #fffaf2;
    box-shadow: var(--vocab-shadow-soft);
    border: 1px solid var(--vocab-line);
    padding: 8px;
    z-index: 120;
}

.vocab-menu[hidden] {
    display: none;
}

.vocab-menu button {
    appearance: none;
    background: none;
    border: none;
    padding: 10px 16px;
    font-size: var(--fz-sm, 14px);
    color: var(--vocab-ink);
    text-align: left;
    cursor: pointer;
}

.vocab-menu button:hover {
    background: rgba(196, 104, 75, 0.14);
    color: var(--vocab-accent-strong);
}

.vocab-menu__panel {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vocab-menu__panel[hidden] {
    display: none;
}

.vocab-menu__list-switcher {
    padding-top: 2px;
}

.vocab-menu__list-switcher .vocab-list-switcher {
    width: 100%;
}

.vocab-menu__list-switcher .vocab-list-switcher .current-list-name {
    max-width: 140px;
}

.vocab-menu__list-switcher .vocab-list-switcher .switcher-dropdown {
    position: static;
    margin-top: 8px;
    min-width: 0;
    width: 100%;
}

.vocab-topbar-spacer {
    height: 72px;
}

.vocab-due-banner {
    padding: 0 var(--sp-6, 24px);
    margin-top: var(--sp-4, 16px);
    animation: vocabSceneIn 0.7s ease both;
}

.vocab-due-banner__container {
    width: min(1280px, 100%);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3, 12px);
    padding: var(--sp-3, 12px) var(--sp-4, 16px);
    border-radius: var(--border-radius-xl, var(--radius-lg, 16px));
    border: 1px solid rgba(200, 150, 98, 0.5);
    background: linear-gradient(180deg, #fff3d1 0%, #f8e4b5 100%);
    color: var(--vocab-ink);
    box-shadow: var(--vocab-shadow-fine);
    position: relative;
    overflow: hidden;
}

.vocab-due-banner__container::after {
    content: '';
    position: absolute;
    right: 16px;
    top: -8px;
    width: 56px;
    height: 18px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 3px 6px rgba(78, 60, 38, 0.14);
    transform: rotate(2deg);
    opacity: 0.8;
    pointer-events: none;
}

.vocab-due-banner__content {
    display: flex;
    align-items: center;
    gap: var(--sp-2, 8px);
    font-size: var(--fz-sm, 14px);
}

.vocab-due-banner__icon {
    font-size: 18px;
}

.vocab-body {
    flex: 1;
    padding: var(--sp-8, 32px) var(--sp-6, 24px) var(--sp-9, 40px);
}

.vocab-body__container {
    width: min(1400px, 100%);
    margin: 0 auto;
}

.vocab-body__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--sp-5, 20px);
    align-items: start;
}

.vocab-view-shell[data-side-panel='hidden'] .vocab-body__grid {
    justify-content: center;
    justify-items: stretch;
}

.vocab-session-card {
    grid-column: span 12;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
}

.vocab-session-card>.vocab-card {
    width: 100%;
    min-height: clamp(380px, 54vh, 640px);
    animation: vocabSceneIn 0.55s ease both;
}

.vocab-side-panel {
    grid-column: span 12;
    background: linear-gradient(180deg, #fff7ea 0%, #f1e1cc 100%);
    border-radius: var(--border-radius-xl, var(--radius-lg, 16px));
    border: 1px solid var(--vocab-line);
    border-left: 4px solid rgba(180, 128, 92, 0.5);
    padding: var(--sp-5, 20px);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4, 16px);
    box-shadow: var(--vocab-shadow-fine);
    animation: vocabSceneIn 0.7s ease both;
}

.vocab-side-panel[hidden] {
    display: none;
}

.vocab-card {
    background: linear-gradient(180deg, #fffaf2 0%, #f2e2cc 100%);
    border-radius: var(--border-radius-xl, var(--radius-lg, 16px));
    box-shadow: var(--vocab-shadow);
    border: 1px solid var(--vocab-line);
    padding: var(--sp-7, 28px) var(--sp-8, 32px);
    display: flex;
    flex-direction: column;
    gap: var(--sp-5, 20px);
    position: relative;
    overflow: hidden;
}

.vocab-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 15% 12%, rgba(255, 255, 255, 0.7), transparent 55%),
        repeating-linear-gradient(0deg, rgba(215, 198, 177, 0.14) 0, rgba(215, 198, 177, 0.14) 1px, transparent 1px, transparent 34px);
    opacity: 0.35;
    pointer-events: none;
}

.vocab-card > * {
    position: relative;
    z-index: 1;
}

.vocab-card--loading,
.vocab-card--placeholder {
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--vocab-muted);
    min-height: 280px;
}

.vocab-card--empty {
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--sp-3, 12px);
    padding: var(--sp-7, 28px) var(--sp-6, 24px);
}

.vocab-card__illustration {
    font-size: 48px;
}

.vocab-card__empty-title {
    font-size: var(--fz-lg, 20px);
    font-weight: 600;
    color: var(--vocab-ink);
}

.vocab-card__empty-text {
    font-size: var(--fz-sm, 14px);
    color: var(--vocab-muted);
}

.vocab-card__wordline {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3, 12px);
    padding-bottom: var(--sp-3, 12px);
    text-align: center;
    border-bottom: 1px dashed rgba(176, 145, 113, 0.35);
}

.vocab-card__word {
    font-size: clamp(36px, 4vw, 46px);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--vocab-ink);
    font-family: var(--vocab-font-title);
    text-align: center;
}

.vocab-card__meaning {
    padding: var(--sp-3, 12px) var(--sp-4, 16px);
    border-radius: var(--border-radius-lg, var(--radius-md, 12px));
    border: 1px solid rgba(196, 104, 75, 0.28);
    border-left: 4px solid rgba(196, 104, 75, 0.45);
    background: rgba(196, 104, 75, 0.1);
    color: var(--vocab-ink);
    font-size: 16px;
    line-height: 1.7;
}

.vocab-card__reveal {
    display: flex;
    justify-content: center;
}

.vocab-card__instruction {
    font-size: var(--fz-sm, 14px);
    color: var(--vocab-muted);
    letter-spacing: 0.02em;
}

.vocab-card--recognition .vocab-card__actions {
    margin-top: auto;
}

.vocab-card--spelling .vocab-card__input-block {
    margin-top: auto;
}

.vocab-card__input-block {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3, 12px);
}

.vocab-card__input-block input {
    width: 100%;
    padding: var(--sp-4, 16px) var(--sp-5, 20px);
    font-size: 18px;
    border-radius: 16px;
    border: 1px solid var(--vocab-line);
    background: linear-gradient(180deg, #fffaf2 0%, #f7ebd7 100%);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    color: var(--vocab-ink);
    box-shadow: inset 0 1px 2px rgba(120, 90, 60, 0.08);
}

.vocab-card__input-block input:focus {
    outline: none;
    border-color: var(--vocab-accent);
    box-shadow: 0 0 0 3px rgba(196, 104, 75, 0.16);
}

.vocab-card__input-actions,
.vocab-card__actions {
    display: flex;
    gap: var(--sp-3, 12px);
    justify-content: center;
    width: 100%;
}

.vocab-card__input-actions {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(180px, 1.4fr);
    align-items: stretch;
}

.vocab-card__input-actions .btn {
    width: 100%;
    min-height: 46px;
}

.vocab-card__actions--inline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    width: 100%;
    align-items: stretch;
    justify-content: stretch;
}

.vocab-card__actions--inline .btn {
    width: 100%;
}

.vocab-card__actions--center {
    justify-content: center;
}


.vocab-card__actions--stack {
    flex-direction: column;
    width: 100%;
    gap: var(--sp-2, 8px);
    align-items: stretch;
}

.vocab-card--summary,
.vocab-card--complete {
    align-items: center;
    text-align: center;
    gap: var(--sp-3, 12px);
}

.vocab-card__summary-head {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2, 8px);
    align-items: center;
}

.vocab-card__summary-queue {
    font-size: var(--fz-xs, 12px);
    color: var(--vocab-muted);
}

.vocab-card--feedback {
    gap: var(--sp-3, 12px);
    border: 1px solid var(--vocab-line);
    border-left-width: 4px;
    box-shadow: var(--vocab-shadow-soft);
    background: linear-gradient(180deg, #fffdf7 0%, #f6e8d3 100%);
}

.vocab-card--feedback.vocab-card--correct {
    border-color: rgba(79, 149, 104, 0.55);
    border-left-color: rgba(79, 149, 104, 0.8);
    background: linear-gradient(180deg, rgba(244, 252, 246, 0.95) 0%, rgba(230, 243, 235, 0.98) 100%);
}

.vocab-card--feedback.vocab-card--near {
    border-color: rgba(200, 140, 66, 0.55);
    border-left-color: rgba(200, 140, 66, 0.85);
    background: linear-gradient(180deg, rgba(255, 248, 231, 0.96) 0%, rgba(248, 233, 200, 0.98) 100%);
}

.vocab-card--feedback.vocab-card--wrong {
    border-color: rgba(190, 95, 88, 0.6);
    border-left-color: rgba(190, 95, 88, 0.9);
    background: linear-gradient(180deg, rgba(255, 244, 242, 0.96) 0%, rgba(246, 222, 217, 0.98) 100%);
}

.vocab-card__attempts {
    margin: 0;
    font-size: var(--fz-xs, 12px);
    color: #b66d3f;
}

.vocab-card-error {
    padding: var(--sp-4, 16px);
    border-radius: var(--border-radius-lg, var(--radius-md, 12px));
    border: 1px solid rgba(190, 95, 88, 0.5);
    background: rgba(255, 246, 242, 0.9);
    color: #9b3f2d;
    text-align: center;
}

.vocab-feedback__head {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3, 12px);
}

.vocab-feedback__icon {
    font-size: 32px;
}

.vocab-feedback__details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--sp-3, 12px);
    padding: var(--sp-3, 12px) var(--sp-4, 16px);
    border-radius: var(--border-radius-lg, var(--radius-md, 12px));
    border: 1px dashed rgba(176, 145, 113, 0.35);
    background: rgba(255, 250, 242, 0.7);
}

.vocab-feedback__details dt {
    font-size: var(--fz-xs, 12px);
    font-weight: var(--fw-medium, 500);
    color: var(--vocab-muted);
}

.vocab-feedback__details dd {
    margin: 2px 0 0;
    font-size: var(--fz-sm, 14px);
    color: var(--vocab-ink);
}

.vocab-feedback__typed {
    font-size: var(--fz-sm, 14px);
    color: var(--vocab-muted);
}

.vocab-side-panel {
    position: relative;
}

.vocab-side-panel__section {
    padding-bottom: var(--sp-3, 12px);
    border-bottom: 1px dashed rgba(176, 145, 113, 0.28);
}

.vocab-side-panel__section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.vocab-side-panel__toggle {
    display: none;
    justify-content: space-between;
    align-items: center;
    padding: var(--sp-3, 12px);
    border-radius: var(--border-radius-lg, var(--radius-md, 12px));
    border: 1px solid var(--vocab-line);
    background: var(--vocab-surface);
    box-shadow: var(--vocab-shadow-fine);
    color: var(--vocab-ink);
}

.vocab-side-panel__surface {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5, 20px);
}

.vocab-side-panel__section h3 {
    font-size: var(--fz-sm, 14px);
    color: var(--vocab-muted);
    margin-bottom: var(--sp-2, 8px);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vocab-side-panel__section p,
.vocab-side-panel__section textarea {
    font-size: var(--fz-sm, 14px);
    color: var(--vocab-ink);
    line-height: 1.6;
}

.vocab-side-panel__section textarea {
    width: 100%;
    min-height: 96px;
    resize: vertical;
    padding: var(--sp-3, 12px);
    border-radius: var(--border-radius-lg, var(--radius-md, 12px));
    border: 1px solid var(--vocab-line);
    background: var(--vocab-paper-bright);
    color: var(--vocab-ink);
    box-shadow: inset 0 1px 2px rgba(120, 90, 60, 0.08);
}

.vocab-side-panel__note-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2, 8px);
    justify-content: space-between;
    flex-wrap: wrap;
}

.vocab-side-panel__note-status {
    font-size: var(--fz-xs, 12px);
    color: var(--vocab-muted);
}

.vocab-bottom-bar {
    position: sticky;
    bottom: 0;
    z-index: 100;
    padding: var(--sp-3, 12px) var(--sp-6, 24px);
    background: rgba(248, 241, 229, 0.94);
    border-top: 1px solid var(--vocab-line);
    box-shadow: 0 -12px 24px rgba(78, 60, 38, 0.16);
    backdrop-filter: blur(12px);
}

.vocab-bottom-bar[hidden] {
    display: none;
}

.vocab-bottom-bar__container {
    width: min(860px, 100%);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
}

.vocab-bottom-bar__actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-3, 12px);
    width: 100%;
}

.vocab-bottom-bar__actions .btn-result {
    width: 100%;
    min-height: 48px;
}

.btn-result {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-width: 72px;
    padding: 12px 16px;
    border-radius: 16px;
    border: 1px solid var(--vocab-line);
    font-weight: var(--fw-medium, 500);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: var(--vocab-surface);
    color: var(--vocab-ink);
    box-shadow: var(--vocab-shadow-fine);
}

.btn-result:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
}

.btn-result[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-result--danger {
    background: rgba(196, 104, 75, 0.16);
    color: #9b3f2d;
    border-color: rgba(190, 95, 88, 0.55);
}

.btn-result--neutral {
    background: rgba(150, 130, 110, 0.12);
    color: var(--vocab-muted);
    border-color: rgba(150, 130, 110, 0.4);
}

.btn-result--success {
    background: rgba(120, 170, 140, 0.2);
    color: #2f6b4f;
    border-color: rgba(120, 170, 140, 0.5);
}

.vocab-bottom-spacer {
    height: 72px;
}

.vocab-bottom-spacer[hidden] {
    display: none;
}

@media (min-width: 1024px) {
    .vocab-session-card {
        grid-column: span 8;
    }

    .vocab-side-panel {
        grid-column: span 4;
    }

    .vocab-view-shell[data-side-panel='hidden'] .vocab-session-card {
        grid-column: 1 / -1;
    }
}

@media (max-width: 1023px) {
    .vocab-topbar__container {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .vocab-topbar__section--left,
    .vocab-topbar__section--center,
    .vocab-topbar__section--right {
        grid-column: span 6;
    }

    .vocab-topbar__section--right {
        justify-content: flex-start;
        grid-template-columns: auto auto;
        width: auto;
    }

    .vocab-bottom-bar__container {
        width: min(720px, 100%);
    }

    .vocab-bottom-bar__actions {
        gap: var(--sp-2, 8px);
    }

    .vocab-side-panel__toggle {
        display: inline-flex;
    }

    .vocab-side-panel {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: var(--border-radius-xl, var(--radius-lg, 16px)) var(--border-radius-xl, var(--radius-lg, 16px)) 0 0;
        box-shadow: 0 -14px 28px rgba(78, 60, 38, 0.22);
        transform: translateY(calc(100% - 52px));
        transition: transform 0.3s ease;
        max-height: 70vh;
    }

    .vocab-side-panel[data-expanded='true'] {
        transform: translateY(0);
    }

    .vocab-side-panel__surface {
        overflow-y: auto;
    }
}

@media (max-width: 767px) {
    .vocab-body {
        padding: var(--sp-4, 16px);
    }

    .vocab-topbar {
        padding: var(--sp-3, 12px) var(--sp-4, 16px);
    }

    .vocab-topbar__container {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .vocab-topbar__section--center {
        display: none;
    }

    .vocab-topbar__section--right {
        width: auto;
        grid-template-columns: auto auto;
        gap: 8px;
    }

    .vocab-topbar__section--right > .btn[data-action='primary-cta'] {
        min-width: 132px;
    }

    .vocab-topbar__menu {
        justify-self: end;
    }

    .vocab-bottom-bar__container {
        width: 100%;
    }

    .vocab-bottom-bar__actions {
        gap: var(--sp-2, 8px);
    }

    .vocab-bottom-bar__actions .btn-result {
        min-height: 48px;
    }

    .vocab-card__actions--inline {
        grid-template-columns: 1fr;
    }

    .vocab-card__input-actions {
        grid-template-columns: 1fr;
    }

    .vocab-session-card>.vocab-card {
        min-height: 360px;
        padding: var(--sp-5, 20px) var(--sp-5, 20px);
    }
}

.clock-overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1200;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);
    overflow: hidden;
}

.clock-overlay.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.clock-overlay:not(.is-hidden) {
    opacity: 1;
    visibility: visible;
}

.clock-overlay-inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}


.clock-action-btn {
    position: absolute;
    top: clamp(16px, 4vw, 48px);
    width: 48px;
    height: 48px;
    border: none;
    background: transparent;
    color: rgba(226, 232, 240, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    z-index: 20;
    pointer-events: auto;
    transition: opacity var(--transition-fast), transform var(--transition-fast), color var(--transition-fast);
}

.clock-action-btn:hover {
    color: rgba(226, 232, 240, 1);
    transform: translateY(-1px);
}

.clock-action-btn:active {
    transform: translateY(0) scale(0.98);
}

.clock-fullscreen-btn {
    left: clamp(16px, 4vw, 48px);
}

.clock-action-btn .fullscreen-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    transform: translate(-50%, -50%);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.clock-fullscreen-btn .icon-exit {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.92);
}

.clock-close-btn .icon-close {
    opacity: 1;
}

.clock-fullscreen-btn.is-fullscreen .icon-enter {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.92);
}

.clock-fullscreen-btn.is-fullscreen .icon-exit {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.clock-close-btn {
    right: clamp(16px, 4vw, 48px);
}

#analog-clock-canvas {
    width: 100vmin;
    height: 100vmin;
    max-width: none;
    max-height: none;
    display: block;
}

.clock-view-stack {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.clock-view {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
}

.clock-view.is-active {
    display: flex;
}

.clock-pagination {
    position: absolute;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(12px);
    transition: opacity var(--transition-fast), visibility var(--transition-fast);
}

.clock-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(148, 163, 184, 0.55);
    background: rgba(71, 85, 105, 0.45);
    padding: 0;
    cursor: pointer;
    transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.clock-dot.is-active {
    background: rgba(226, 232, 240, 0.85);
    border-color: rgba(241, 245, 249, 0.9);
    transform: scale(1.1);
}

.clock-dot:hover {
    background: rgba(226, 232, 240, 0.55);
    border-color: rgba(226, 232, 240, 0.7);
}

.clock-overlay-inner.controls-hidden .clock-close-btn,
.clock-overlay-inner.controls-hidden .clock-fullscreen-btn,
.clock-overlay-inner.controls-hidden .clock-pagination {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


.flip-clock {
    display: flex;
    align-items: center;
    gap: clamp(16px, 4vw, 32px);
}

.flip-separator {
    color: rgba(226, 232, 240, 0.78);
    font-size: clamp(48px, 14vmin, 112px);
    font-weight: 600;
    letter-spacing: 4px;
    text-shadow: 0 6px 24px rgba(15, 15, 15, 0.45);
}


.flip-digit {
    position: relative;
    width: clamp(80px, 18vmin, 148px);
    height: clamp(118px, 28vmin, 228px);
    border-radius: 18px;
    background:
        radial-gradient(120% 120% at 50% 0%, rgba(59, 130, 246, 0.12) 0%, rgba(15, 23, 42, 0) 42%),
        linear-gradient(180deg, #111827 0%, #010617 100%);
    box-shadow:
        inset 0 0 0 1px rgba(148, 163, 184, 0.25),
        inset 0 -18px 24px rgba(15, 23, 42, 0.65),
        0 28px 48px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    transform-style: preserve-3d;
}

.flip-digit::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(15, 23, 42, 0) 45%, rgba(15, 23, 42, 0.8) 100%);
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0.55;
}

.flip-digit::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1.6px;
    background: rgba(15, 23, 42, 0.9);
    box-shadow: 0 6px 14px rgba(2, 6, 23, 0.45);
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 6;
}

.flip-digit .digit-current,
.flip-digit .digit-next {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(62px, 15vmin, 150px);
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba(226, 232, 240, 0.96);
    text-shadow: 0 14px 36px rgba(0, 0, 0, 0.72);
    transform: translateY(0);
    backface-visibility: hidden;
    will-change: transform;
}

.flip-digit .digit-next {
    transform: translateY(100%);
}

.flip-digit.is-rolling .digit-current {
    animation: digitRollCurrent 0.58s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.flip-digit.is-rolling .digit-next {
    animation: digitRollNext 0.58s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes digitRollCurrent {
    0% {
        transform: translateY(0%);
    }

    100% {
        transform: translateY(-100%);
    }
}

@keyframes digitRollNext {
    0% {
        transform: translateY(100%);
    }

    100% {
        transform: translateY(0%);
    }
}

.digital-clock {
    font-size: clamp(72px, 20vmin, 180px);
    font-weight: 700;
    letter-spacing: clamp(8px, 2vw, 24px);
    color: rgba(226, 232, 240, 0.95);
    text-shadow: 0 0 16px rgba(148, 163, 184, 0.35);
    display: flex;
    align-items: center;
    gap: clamp(16px, 3vw, 28px);
}

.digital-clock .digital-pulse {
    animation: digitalPulse 1s infinite;
}

.ambient-clock {
    font-size: clamp(68px, 18vmin, 168px);
    font-weight: 600;
    letter-spacing: clamp(6px, 1.5vw, 18px);
    color: rgba(148, 163, 184, 0.22);
    text-shadow: 0 0 18px rgba(15, 23, 42, 0.25);
    display: flex;
    align-items: center;
    gap: clamp(14px, 2.4vw, 22px);
}

.ambient-clock__colon {
    opacity: 0.4;
}

@keyframes digitalPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

@media (max-width: 768px) {
    .tool-card {
        padding: var(--space-lg);
    }

    .tool-card-content h3 {
        font-size: var(--font-size-xl);
    }

    .tool-card-content p {
        font-size: var(--font-size-sm);
    }
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-xl);
}

.browse-title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    position: relative;
}

.browse-title-trigger {
    border: none;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius-full);
    width: 42px;
    height: 42px;
    font-size: 1.4rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
    color: inherit;
    flex-shrink: 0;
    position: relative;
}

.browse-title-trigger:hover,
.browse-title-trigger:focus {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
    outline: none;
}

.browse-title-trigger::after {
    content: none;
}

.browse-title-dot {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ef4444;
    border: 1px solid rgba(255, 255, 255, 0.92);
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.28), 0 0 6px rgba(239, 68, 68, 0.8);
    opacity: 0;
    transform: scale(0.7);
    transform-origin: center;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    pointer-events: none;
    z-index: 1;
}

#browse-title {
    margin: 0;
    flex: 1;
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.browse-preference-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: rgba(30, 41, 59, 0.92);
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: var(--border-radius-lg);
    padding: var(--space-md) var(--space-lg);
    box-shadow: var(--shadow-lg);
    z-index: 20;
    min-width: 180px;
}

.browse-preference-option {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-100);
    cursor: pointer;
    user-select: none;
    padding: var(--space-xs) 0;
    border-radius: var(--border-radius-md);
    transition: color var(--transition-fast);
}

.browse-preference-option:hover {
    color: #ffffff;
}

.browse-preference-option input {
    appearance: none;
    width: 18px;
    height: 18px;
    cursor: pointer;
    border-radius: 6px;
    border: var(--exam-item-border-width) solid var(--exam-item-border-color);
    background: var(--exam-item-bg);
    display: grid;
    place-items: center;
    transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}

.browse-preference-option input::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: rgba(248, 113, 113, 0.95);
    transform: scale(0.25);
    opacity: 0;
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.browse-preference-option input[type="checkbox"]:checked {
    border-color: var(--exam-item-border-color);
    background: var(--exam-item-bg);
}

.browse-preference-option input[type="checkbox"]:checked::after {
    transform: scale(1);
    opacity: 1;
}

.browse-preference-option input[type="checkbox"]:focus-visible {
    outline: none;
    border-color: rgba(248, 113, 113, 0.8);
}

.browse-preference-text {
    color: var(--color-gray-100);
    font-size: var(--font-size-sm);
}

.browse-title-trigger.active {
    background: rgba(255, 255, 255, 0.16);
    color: var(--color-brand-primary);
    box-shadow: none;
}

.browse-title-trigger.active::after {
    content: none;
}

.browse-title-trigger.active .browse-title-dot {
    opacity: 1;
    transform: scale(1);
}

.browse-title-trigger.active:hover,
.browse-title-trigger.active:focus {
    background: rgba(255, 255, 255, 0.22);
    color: var(--color-brand-primary);
    box-shadow: none;
}

#type-filter-buttons {
    margin-left: auto;
    display: flex;
    gap: var(--space-sm);
}

/* Bloom Light Palette（青橙玻璃质感） */
:root {
    --bloom-surface: rgba(255, 252, 247, 0.95);
    --bloom-surface-strong: rgba(248, 243, 235, 0.92);
    --bloom-border: rgba(232, 189, 145, 0.35);
    --bloom-border-strong: rgba(232, 189, 145, 0.5);
    --bloom-sheen: linear-gradient(135deg, rgba(252, 214, 172, 0.32), rgba(173, 228, 210, 0.28));
    --bloom-highlight: linear-gradient(120deg, #f6b26b 0%, #35c0a1 100%);
    --bloom-shadow: 0 18px 46px rgba(215, 180, 140, 0.2), 0 10px 28px rgba(53, 192, 161, 0.14);
}

.category-card {
    background: var(--bloom-surface);
    background-image: var(--bloom-sheen), linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(250, 244, 236, 0.9));
    padding: var(--space-xl);
    border-radius: var(--border-radius-xl);
    border: 1px solid var(--bloom-border);
    transition: all var(--transition-normal);
    box-shadow: var(--bloom-shadow);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(14px);
}

.category-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--bloom-highlight);
    opacity: 0.9;
    box-shadow: 0 6px 24px rgba(124, 231, 255, 0.25);
}

.category-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 58px rgba(92, 119, 230, 0.2), 0 12px 30px rgba(124, 231, 255, 0.16);
    border-color: var(--bloom-border-strong);
}

.category-card:hover::before {
    opacity: 1;
}

.category-header {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-lg);
}

.category-icon {
    font-size: 2.5rem;
    margin-right: var(--space-lg);
    opacity: 0.8;
}

.category-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
    margin-bottom: var(--space-xs);
}

.category-meta {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    font-weight: var(--font-weight-medium);
}

.overview-section-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    grid-column: 1 / -1;
    margin: var(--space-lg) 0 var(--space-md);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-800);
}

.overview-section-icon {
    font-size: 1.75rem;
}

.overview-section-label {
    letter-spacing: 0.01em;
}

.overview-empty {
    grid-column: 1 / -1;
    padding: var(--space-xl);
    text-align: center;
    border-radius: var(--border-radius-xl);
    background: rgba(148, 163, 184, 0.12);
    color: var(--color-gray-600);
    border: 1px dashed rgba(148, 163, 184, 0.35);
}

.category-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-top: var(--space-xl);
}

.category-action-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--border-radius-lg);
    font-weight: var(--font-weight-medium);
}

.category-action-icon {
    font-size: 1.25rem;
    line-height: 1;
}

.category-card .category-actions {
    display: flex !important;
    gap: var(--space-md) !important;
    margin-top: var(--space-xl) !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
}

/* Button System */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--border-radius-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    background: #BF755A;
    color: #F2F2F2;
}

.btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #BF755A, #a0654a);
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

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

/* Primary Button */
.btn-primary {
    background: #BF755A;
    color: #F2F2F2;
    border-color: transparent;
}

.btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #BF755A, #a0654a);
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

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

/* Secondary Button */
.btn-secondary {
    background: #525918;
    color: #F2F2F2;
    border-color: transparent;
}

.btn-secondary:hover:not(:disabled) {
    background: linear-gradient(135deg, #525918, #3a3d10);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Success Button */
.btn-success {
    background: #5450BF;
    color: #F2F2F2;
    border-color: transparent;
}

.btn-success:hover:not(:disabled) {
    background: linear-gradient(135deg, #5450BF, #3a3a8f);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Warning Button */
.btn-warning {
    background: #BF75A5;
    color: #F2F2F2;
    border-color: transparent;
}

.btn-warning:hover:not(:disabled) {
    background: linear-gradient(135deg, #BF75A5, #8f5a7d);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Info Button */
.btn-info {
    background: #BF755A;
    color: #F2F2F2;
    border-color: transparent;
}

.btn-info:hover:not(:disabled) {
    background: linear-gradient(135deg, #BF755A, #a0654a);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Button Sizes */
.btn-sm {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-xs);
}

.btn-lg {
    padding: var(--space-lg) var(--space-xl);
    font-size: var(--font-size-base);
}

.exam-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-md);
    max-height: 72vh;
    overflow-y: auto;
    padding-left: var(--space-sm);
    align-content: start;
}

.exam-list-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-2xl) var(--space-xl);
    text-align: center;
    border-radius: var(--border-radius-xl);
    background: rgba(226, 232, 240, 0.16);
    border: 1px dashed rgba(148, 163, 184, 0.4);
    color: var(--color-gray-700);
}

.exam-list-empty-icon {
    font-size: 2.5rem;
}

.exam-list-empty-text {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.exam-list-empty-hint {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

.exam-list-empty-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
}

.exam-list-empty-action {
    min-width: 140px;
    font-weight: var(--font-weight-medium);
}

.completion-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
    background: var(--color-gray-400);
}

.completion-dot--excellent {
    background: var(--color-success-500, #10b981);
}

.completion-dot--strong {
    background: #f59e0b;
}

.completion-dot--average {
    background: #f97316;
}

.completion-dot--weak {
    background: #ef4444;
}

.exam-list::-webkit-scrollbar {
    width: 6px;
}

.exam-list::-webkit-scrollbar-track {
    background: var(--color-gray-100);
    border-radius: var(--border-radius-full);
}

.exam-list::-webkit-scrollbar-thumb {
    background: var(--color-gray-300);
    border-radius: var(--border-radius-full);
}

.exam-list::-webkit-scrollbar-thumb:hover {
    background: var(--color-gray-400);
}

.exam-item {
    background: var(--bloom-surface);
    background-image: none;
    padding: var(--space-lg);
    border-radius: var(--border-radius-xl);
    border: 1px solid transparent;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    transition: all var(--transition-normal);
    box-shadow: var(--bloom-shadow);
    position: relative;
    backdrop-filter: blur(12px);
}

.exam-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 44px rgba(215, 180, 140, 0.18), 0 10px 26px rgba(53, 192, 161, 0.14);
    border-color: var(--bloom-border-strong);
    background: linear-gradient(140deg, rgba(252, 226, 199, 0.96), rgba(188, 228, 213, 0.9));
}

.exam-item:hover .exam-item-action-btn {
    opacity: 1;
    transform: scale(1);
}

.exam-info {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex: 1;
}

.exam-info h4 {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    line-height: var(--line-height-tight);
}

.exam-meta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    font-size: var(--font-size-sm);
    color: #3a4148;
    font-weight: var(--font-weight-medium);
    margin-top: var(--space-xs);
    padding: 6px 10px;
    border-radius: var(--border-radius-lg);
    background: rgba(232, 189, 145, 0.18);
}

.exam-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
    width: 100%;
}

.exam-item-action-btn {
    opacity: 0.95;
    transform: translateY(0);
    transition: all var(--transition-normal);
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-sm);
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(232, 189, 145, 0.4);
    background: linear-gradient(135deg, #f6b26b, #35c0a1);
    color: #0f1416;
    box-shadow: 0 8px 20px rgba(215, 180, 140, 0.14), 0 4px 10px rgba(53, 192, 161, 0.12);
}

.exam-item-action-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    background: linear-gradient(135deg, #ffc48c, #45d7b6);
    box-shadow: 0 12px 26px rgba(215, 180, 140, 0.18), 0 6px 14px rgba(53, 192, 161, 0.14);
}

.exam-item-action-btn.btn-secondary {
    background: rgba(255, 255, 255, 0.94);
    color: #2f3a3f;
    border: 1px solid rgba(232, 189, 145, 0.35);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.exam-item-action-btn.btn-secondary:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(252, 226, 199, 0.96), rgba(188, 228, 213, 0.9));
    color: #2f3a3f;
    box-shadow: 0 12px 22px rgba(215, 180, 140, 0.18), 0 6px 14px rgba(53, 192, 161, 0.12);
}

.exam-item-action-btn:disabled,
.exam-item-action-btn[aria-disabled="true"] {
    opacity: 0.45;
    filter: grayscale(0.3);
    box-shadow: none;
    cursor: not-allowed;
}

.exam-item--suite-selecting {
    border: 1.5px dashed rgba(102, 126, 234, 0.55);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(236, 242, 255, 0.86));
    box-shadow: 0 14px 28px rgba(102, 126, 234, 0.12), 0 8px 20px rgba(53, 192, 161, 0.1);
    cursor: pointer;
}

.exam-item--suite-selecting:hover {
    transform: translateY(-2px);
    border-color: rgba(102, 126, 234, 0.8);
    box-shadow: 0 18px 34px rgba(102, 126, 234, 0.18), 0 10px 24px rgba(53, 192, 161, 0.12);
}

.exam-item--suite-selecting .exam-item-action-btn {
    opacity: 0.5;
}

.exam-item--suite-selected {
    border: 1px solid rgba(16, 185, 129, 0.55);
    box-shadow: 0 14px 30px rgba(16, 185, 129, 0.14), 0 8px 18px rgba(53, 192, 161, 0.12);
}

.suite-custom-selection-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    margin-top: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(102, 126, 234, 0.12);
    color: #334155;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    backdrop-filter: blur(8px);
}

.suite-custom-selection-portal {
    position: fixed;
    inset: 0;
    z-index: 2600;
    pointer-events: none;
}

.suite-custom-selection__backdrop {
    display: none;
}

.suite-custom-selection__panel {
    position: fixed;
    top: 50%;
    right: 24px;
    width: min(380px, calc(100vw - 48px));
    transform: translateY(-50%) scale(1);
    transform-origin: center center;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    border-radius: 28px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.78), rgba(242, 245, 255, 0.62));
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 28px 60px rgba(15, 23, 42, 0.18), 0 8px 20px rgba(102, 126, 234, 0.12);
    backdrop-filter: blur(24px) saturate(1.1);
    transition: transform 420ms cubic-bezier(0.22, 1.15, 0.36, 1), right 420ms cubic-bezier(0.22, 1.15, 0.36, 1), width 420ms cubic-bezier(0.22, 1.15, 0.36, 1);
}

.suite-custom-selection__panel--floating {
    right: auto;
    left: 0;
    top: 0;
    transform: none !important;
    transition: box-shadow 220ms ease;
}

.suite-custom-selection__panel.is-dragging {
    box-shadow: 0 34px 78px rgba(15, 23, 42, 0.24), 0 14px 34px rgba(51, 65, 85, 0.2);
}

.suite-custom-selection__panel--ready {
    right: auto;
    left: 50%;
    width: min(460px, calc(100vw - 32px));
    transform: translate(-50%, -50%) scale(1.08);
    animation: suiteCustomSelectionPop 420ms cubic-bezier(0.22, 1.15, 0.36, 1);
}

.suite-custom-selection__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

.suite-custom-selection__panel.is-dragging .suite-custom-selection__header {
    cursor: grabbing;
}

.suite-custom-selection__eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(71, 85, 105, 0.72);
    margin-bottom: 4px;
}

.suite-custom-selection__title-main {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

.suite-custom-selection__progress {
    flex: 0 0 auto;
    min-width: 84px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: #334155;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.44);
}

.suite-custom-selection__body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.suite-custom-selection__group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.suite-custom-selection__group-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(71, 85, 105, 0.72);
}

.suite-custom-selection__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(226, 232, 240, 0.72);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

.suite-custom-selection__row--selected {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(236, 242, 255, 0.86));
    border-color: rgba(102, 126, 234, 0.18);
}

.suite-custom-selection__row--pending {
    opacity: 0.86;
}

.suite-custom-selection__row-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.suite-custom-selection__title {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.35;
    word-break: break-word;
}

.suite-custom-selection__meta {
    font-size: 12px;
    color: rgba(51, 65, 85, 0.74);
}

.suite-custom-selection__delete {
    flex: 0 0 auto;
    align-self: center;
    border: none;
    background: rgba(239, 68, 68, 0.1);
    color: #b91c1c;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

.suite-custom-selection__delete:hover {
    transform: translateY(-1px);
    background: rgba(239, 68, 68, 0.16);
}

.suite-custom-selection__empty {
    padding: 12px 14px;
    border-radius: 18px;
    border: 1px dashed rgba(148, 163, 184, 0.5);
    color: rgba(71, 85, 105, 0.8);
    background: rgba(255, 255, 255, 0.55);
    font-size: 13px;
}

.suite-custom-selection__footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.suite-custom-selection__button {
    border: none;
    border-radius: 999px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.suite-custom-selection__button:hover {
    transform: translateY(-1px);
}

.suite-custom-selection__button--primary {
    color: #F2F2F2;
    background: #BF755A;
    box-shadow: 0 10px 22px rgba(191, 117, 90, 0.28);
}

.suite-custom-selection__button--primary:hover {
    background: linear-gradient(135deg, #BF755A, #a0654a);
}

.suite-custom-selection__button--secondary {
    color: #334155;
    background: rgba(255, 255, 255, 0.74);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.2);
}

@keyframes suiteCustomSelectionPop {
    0% {
        transform: translate(-50%, -50%) scale(0.82);
    }

    70% {
        transform: translate(-50%, -50%) scale(1.12);
    }

    100% {
        transform: translate(-50%, -50%) scale(1.08);
    }
}

.practice-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

#browse-view .exam-list {
    padding-right: 5px;
}

.loading {
    text-align: center;
    padding: var(--space-2xl);
    color: var(--color-gray-600);
}

.spinner {
    border: 3px solid var(--color-gray-200);
    border-radius: var(--border-radius-full);
    border-top: 3px solid var(--color-brand-primary);
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto var(--space-lg);
}

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

    100% {
        transform: rotate(360deg);
    }
}



.search-box {
    margin-bottom: var(--space-xl);
    position: relative;
}

.search-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.search-input-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.search-input {
    width: 100%;
    padding: var(--space-md) 45px var(--space-md) var(--space-lg);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--border-radius-lg);
    background: var(--color-white);
    color: var(--color-gray-900);
    font-size: var(--font-size-base);
    font-family: var(--font-family-primary);
    transition: all var(--transition-normal);
    outline: none;

}

.search-clear-btn[hidden] {
    display: none !important;
}

.search-clear-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--color-gray-100);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-500);
    cursor: pointer;
    transition: all var(--transition-fast);
    padding: 0;
    opacity: 0.8;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    z-index: 2;
}

.search-input-wrap .search-clear-btn {
    right: 12px;
}

.search-clear-btn:hover {
    background: var(--color-gray-200);
    color: var(--color-gray-700);
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

.search-clear-btn:active {
    transform: translateY(-50%) scale(0.95);
}

.search-clear-btn svg {
    width: 14px;
    height: 14px;
}

.search-input:focus {
    border-color: var(--color-brand-primary);

}

.search-input::placeholder {
    color: var(--color-gray-400);
    font-weight: var(--font-weight-normal);
}

.browse-sort-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.browse-sort-icon {
    position: absolute;
    right: 14px;
    pointer-events: none;
    color: var(--color-gray-500);
    display: flex;
    align-items: center;
    justify-content: center;
}

.browse-sort-select {
    min-width: 150px;
    appearance: none;
    -webkit-appearance: none;
    padding: var(--space-md) 36px var(--space-md) var(--space-lg);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--border-radius-lg);
    background: var(--color-white);
    color: var(--color-gray-900);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    outline: none;
    cursor: pointer;
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-sm);
}

.browse-sort-select:hover {
    border-color: var(--color-gray-400);
}

.browse-sort-select:focus {
    border-color: var(--color-brand-primary);
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.18);
}

@media (max-width: 768px) {
    .search-row {
        flex-direction: column;
        align-items: stretch;
    }

    .browse-sort-select {
        width: 100%;
    }
}



/* 练习记录样式 */
.practice-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-xl);
    margin-bottom: var(--space-2xl);
}

.stat-card {
    background: #F2F2F2;
    padding: var(--space-xl);
    border-radius: var(--border-radius-xl);
    text-align: center;
    border: 2px solid #737373;
    box-shadow: var(--shadow-lg);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-brand-gradient);
}

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

.stat-number {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-brand-primary);
    margin-bottom: var(--space-sm);
    line-height: var(--line-height-tight);
}

.stat-label {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.practice-history {
    background: linear-gradient(135deg, #e8e8e8 0%, #ffffff 50%, #e8e8e8 100%);
    border-radius: var(--border-radius-xl);
    padding: var(--space-xl);
    border: 2px solid #737373;
}

/* Override inline style for practice history header to fix button alignment */
.practice-history>div:first-of-type {
    justify-content: flex-start !important;
    gap: 20px;
}

.practice-history>div:first-of-type>div:last-child {
    margin-left: auto;
}

.practice-history-list,
#practice-history-list,
#history-list {
    overflow-y: visible;
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 8px;
    width: 100%;
}

.practice-history-list .record-selection,
#practice-history-list .record-selection {
    display: none;
    align-items: center;
    justify-content: center;
    margin-right: var(--space-sm);
}

.practice-history-list .history-item-selectable .record-selection,
#practice-history-list .history-item-selectable .record-selection {
    display: flex;
}

.practice-history-list .record-selection input[type="checkbox"],
#practice-history-list .record-selection input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.history-item {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: var(--space-lg);
    align-items: center;
    padding: var(--space-md) var(--space-lg);
    background: #F0EDE8;
    border-radius: var(--border-radius-lg);
    border: 2px solid #737373;
    box-shadow: var(--shadow-lg);
    transition: all var(--transition-normal);
    margin-bottom: 0;
    position: relative;
    backdrop-filter: blur(10px);
    color: #0D0D0D;
}

.history-item:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-gray-300);
}

/* .history-item:last-child 规则不再需要 */

.delete-record-btn {
    background: none;
    border: none;
    font-size: var(--font-size-sm);
    cursor: pointer;
    opacity: 0;
    transition: all var(--transition-normal);
    padding: var(--space-sm);
    border-radius: var(--border-radius-full);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-500);
}

.history-item:hover .delete-record-btn {
    opacity: 0.8;
}

.delete-record-btn:hover {
    opacity: 1;
    background: var(--color-error-bg);
    color: var(--color-error);
    transform: scale(1.1);
}

.history-item.deleting {
    opacity: 0.5;
    transform: scale(0.95);
    transition: all 0.3s ease;
}

.history-item.deleted {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border: none;
    margin-top: -1px;
    transform: translateX(50px);
    transition: all 0.5s ease;
}

.history-item-selected {
    background: linear-gradient(135deg, #fff5f5 0%, #ffe5e5 100%) !important;
    border-color: #ff6b6b !important;
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.2) !important;
}

.history-item-selected:hover {
    background: linear-gradient(135deg, #ffebeb 0%, #ffd5d5 100%) !important;
    border-color: #ff5252 !important;
}

.record-meta-line {
    display: flex;
    align-items: baseline;
    margin-top: 8px;
    gap: 20px;
    opacity: 0.8;
    color: #0D0D0D;
}

.record-date {
    white-space: nowrap;
}

.record-duration-value {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.record-duration-value .duration-time {
    font-size: 1.1em;
}

.record-percentage-container {
    justify-self: stretch;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    text-align: right;
    padding-right: var(--space-sm);
}

.record-actions-container {
    display: flex;
    justify-content: flex-end;
    flex-shrink: 0;
}

.record-percentage {
    font-weight: bold;
    font-size: 1.2em;
    color: #0D0D0D;
}

.record-info-selectable {
    cursor: pointer;
}

.history-item-selectable {
    border-style: dashed;
}

.practice-history-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    gap: var(--space-md);
    text-align: center;
    opacity: 0.7;
    color: #0D0D0D;
}

.practice-history-empty-icon {
    font-size: 3em;
}

.practice-history-empty-text {
    font-size: var(--font-size-base);
}



@media (max-width: 768px) {

    /* 练习历史列表 - 小屏幕单列 */
    .practice-history-list,
    #practice-history-list,
    #history-list {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .message-container {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        margin-bottom: 20px;
    }

    .container {
        padding: 10px;
    }

    .header {
        padding: 20px;
        margin-bottom: 20px;
    }

    .header h1 {
        font-size: 1.5em;
    }

    .main-nav {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .nav-btn {
        width: 100%;
        max-width: 300px;
        padding: 12px 20px;
        font-size: 14px;
    }

    .category-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .category-card {
        padding: 20px;
    }

    .category-actions {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    .exam-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        padding: 15px;
    }

    .exam-actions {
        width: 100%;
        justify-content: stretch;
        flex-direction: column;
        gap: 8px;
    }

    .exam-actions .btn {
        width: 100%;
        margin: 0;
    }

    .view {
        padding: 20px;
    }

    .search-input {
        font-size: 16px;
        /* 防止iOS缩放 */
    }

    .practice-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .stat-card {
        padding: 15px;
    }

    .stat-number {
        font-size: 1.5em;
    }

    /* 设置页面移动优化 */
    #settings-view div[style*="display: flex"] {
        flex-direction: column !important;
        gap: 10px !important;
    }

    #settings-view .btn {
        width: 100%;
        margin: 5px 0 !important;
    }

    /* 报告显示优化 */
    .performance-report,
    .backup-list,
    .validation-report,
    .ux-report {
        margin: 10px 0 !important;
        padding: 15px !important;
    }

    /* 虚拟滚动容器优化 */
    #virtual-scroll-container {
        height: 400px !important;
    }
}

/* Developer Modal Styles */
.developer-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
}

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

.backup-list-container {
    width: 100%;
    max-width: 1080px;
    margin: var(--space-2xl) auto 0;
}

.backup-list-card {
    width: 100%;
    background: var(--bloom-surface-strong);
    background-image: var(--bloom-sheen), linear-gradient(140deg, rgba(255, 255, 255, 0.95), rgba(248, 241, 232, 0.88));
    border: 1px solid var(--bloom-border);
    border-radius: var(--border-radius-2xl);
    padding: var(--space-xl);
    backdrop-filter: blur(14px);
    box-shadow: var(--bloom-shadow);
    color: var(--color-gray-700);
}

.backup-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
    flex-wrap: wrap;
}

.backup-list-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: #2f3a3f;
}

.backup-list-title-icon {
    font-size: 1.6rem;
    color: #d48a46;
}

.backup-list-dismiss {
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--border-radius-md);
}

.backup-list-scroll {
    max-height: 640px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-md);
}

.backup-entry {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md);
    border-radius: var(--border-radius-xl);
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(232, 189, 145, 0.35);
    transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.backup-entry:hover {
    background: linear-gradient(135deg, rgba(252, 226, 199, 0.78), rgba(188, 228, 213, 0.72));
    box-shadow: 0 14px 28px rgba(215, 180, 140, 0.18), 0 8px 20px rgba(53, 192, 161, 0.14);
    transform: translateY(-1px);
}

.backup-entry-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--color-gray-700);
    word-break: break-all;
}

.backup-entry-meta {
    font-size: var(--font-size-sm);
    color: rgba(51, 65, 85, 0.6);
}

.backup-entry-actions {
    display: flex;
    justify-content: flex-end;
}

.backup-entry-actions .btn {
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--border-radius-lg);
    font-size: var(--font-size-sm);
    box-shadow: none;
}

.backup-entry-restore {
    min-width: 88px;
}

.backup-list-empty {
    text-align: center;
    padding: var(--space-xl);
    border-radius: var(--border-radius-xl);
    background: rgba(255, 252, 247, 0.9);
    color: #3a4148;
    border: 1px dashed rgba(232, 189, 145, 0.35);
}

.backup-list-empty-icon {
    font-size: 2.2rem;
    margin-bottom: var(--space-sm);
}

.backup-list-empty-hint {
    margin-top: var(--space-sm);
    font-size: var(--font-size-sm);
    color: rgba(51, 65, 85, 0.65);
}

.library-config-list {
    margin-top: var(--space-xl);
    position: relative;
    z-index: 10;
}

.library-config-panel {
    background: var(--library-config-bg);
    border: 1px solid var(--library-config-border);
    border-radius: var(--border-radius-xl);
    padding: var(--space-lg);
    color: var(--library-config-text);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(6px);
}

.library-config-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md);
}

.library-config-panel__title {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--library-config-text);
}

.library-config-panel__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-xs);
    border-radius: var(--border-radius-full);
    background: rgba(102, 126, 234, 0.15);
    color: var(--library-config-text);
    font-size: var(--font-size-xs);
    line-height: 1.2;
}

.library-config-panel__list {
    max-height: 320px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin: var(--space-md) 0 var(--space-lg);
}

.library-config-panel__item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--border-radius-lg);
    background: var(--library-config-item-bg);
    border: 1px solid var(--library-config-item-border);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.library-config-panel__item:hover {
    transform: translateY(-1px);

    background: rgba(217, 203, 186, 0.55);
}

.library-config-panel__item--active {
    background: var(--library-config-item-active-bg);
    border-color: var(--library-config-item-active-border);
}

.library-config-panel__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--library-config-text);
}

.library-config-panel__meta {
    font-size: var(--font-size-xs);
    color: var(--library-config-meta);
}

.library-config-panel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.library-config-panel__actions .btn {
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-xs);
    box-shadow: none;
}

.library-config-panel__footer {
    margin-top: var(--space-md);
}

.library-config-panel__close {
    width: 100%;
}

.library-config-panel__empty {
    text-align: center;
    padding: var(--space-lg);
    border-radius: var(--border-radius-lg);
    background: var(--library-config-item-bg);
    border: 1px dashed var(--library-config-item-border);
    color: var(--library-config-meta);
}

.library-config-panel__empty-icon {
    display: block;
    font-size: 2rem;
    margin-bottom: var(--space-sm);
}

.library-config-panel__empty-hint {
    font-size: var(--font-size-sm);
    color: var(--library-config-meta);
}

.backup-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-2xl) var(--space-lg);
    z-index: 3000;
}

.backup-modal {
    width: min(640px, 92vw);
    max-height: 80vh;
    background: rgba(255, 255, 255, 0.96);
    border-radius: var(--border-radius-xl);
    border: 1px solid rgba(115, 115, 115, 0.25);
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    color: var(--color-gray-700);
}

.backup-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg) var(--space-xl);
    border-bottom: 1px solid rgba(115, 115, 115, 0.2);
}

.backup-modal-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--color-gray-700);
}

.backup-modal-body {
    padding: var(--space-lg) var(--space-xl);
    overflow-y: auto;
    max-height: 50vh;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.backup-modal-footer {
    padding: var(--space-lg) var(--space-xl);
    border-top: 1px solid rgba(115, 115, 115, 0.2);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-xs);
}

.developer-modal-content {
    background: var(--color-white);
    border-radius: var(--border-radius-2xl);
    padding: var(--space-2xl);
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
    transform: scale(0.9) translateY(-20px);
    transition: all var(--transition-normal);
    border: 1px solid var(--color-gray-200);
}

.developer-modal.show .developer-modal-content {
    transform: scale(1) translateY(0);
}

.developer-modal h2 {
    text-align: center;
    margin-bottom: var(--space-xl);
    color: var(--color-gray-900);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
}

.developer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.developer-card {
    background: var(--color-gray-50);
    padding: var(--space-lg);
    border-radius: var(--border-radius-lg);
    text-align: center;
    border: 1px solid var(--color-gray-200);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.developer-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-brand-gradient);
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.developer-card:hover {
    background: var(--color-white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-gray-300);
}

.developer-card:hover::before {
    opacity: 1;
}

.developer-name {
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    font-size: var(--font-size-base);
    margin-bottom: var(--space-sm);
}

.developer-emoji {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-md);
    display: block;
}

.modal-close-btn {
    background: var(--color-white);
    border: 1px solid var(--color-gray-300);
    color: var(--color-gray-700);
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--border-radius-lg);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-normal);
    display: block;
    margin: 0 auto;
}

.modal-close-btn:hover {
    background: var(--color-gray-50);
    border-color: var(--color-gray-400);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Redesigned Theme Modal */
.theme-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(8px);
    z-index: 2000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.theme-modal.show {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
}

.theme-modal-content {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 24px;
    width: min(900px, 92vw);
    max-height: 85vh;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
    border: 1px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.theme-modal.show .theme-modal-content {
    transform: scale(1);
}

.theme-modal-header {
    padding: 24px 32px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.theme-modal-header h3 {
    font-size: 1.75rem;
    font-weight: 800;
    background: linear-gradient(135deg, #0f172a 0%, #334155 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
    letter-spacing: -0.02em;
}

.theme-modal-close {
    background: rgba(0, 0, 0, 0.05);
    border: none;
    color: #64748b;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.theme-modal-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #0f172a;
    transform: rotate(90deg);
}

.theme-modal-body {
    padding: 0;
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.theme-options-viewport {
    padding: 32px;
    overflow-y: auto;
    flex: 1;
}

.theme-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;
}

.theme-option {
    background: #ffffff;
    border-radius: 20px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.theme-option::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--theme-accent-start, #e2e8f0), var(--theme-accent-end, #cbd5e1));
    opacity: 0.1;
    z-index: 0;
    transition: opacity 0.3s ease;
}

.theme-option:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
}

.theme-option:hover::before {
    opacity: 0.2;
}

.theme-info {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.theme-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.theme-desc {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.5;
}

.theme-option .btn {
    position: relative;
    z-index: 2;
    width: 100%;
    margin-top: auto;
    /* Push to bottom if content varies */
    padding: 12px 20px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 0.95rem;
    justify-content: center;
    letter-spacing: 0.02em;

    /* Premium Gradient */
    background: linear-gradient(135deg, var(--theme-accent-start, #334155) 0%, var(--theme-accent-end, #0f172a) 100%);
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.15);

    /* Text Contrast Enhancement */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);

    /* Depth */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

/* Glassy Shine Effect */
.theme-option .btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(255, 255, 255, 0.2), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.theme-option .btn:hover {
    transform: translateY(-2px) scale(1.02);
    color: #ffffff !important;
    box-shadow: 0 12px 20px -8px var(--theme-accent-start, rgba(0, 0, 0, 0.2));
    border-color: rgba(255, 255, 255, 0.4);
    filter: brightness(1.05);
}

.theme-option .btn:hover::after {
    opacity: 1;
}

.theme-option .btn:active {
    transform: translateY(0) scale(0.98);
    filter: brightness(0.95);
}

/* Academic & Bloom: Reduce brightness on hover for better text contrast */
.theme-option:nth-child(1) .btn:hover,
.theme-option:nth-child(2) .btn:hover {
    filter: brightness(0.95);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Theme Specific Accents */
.theme-option:nth-child(1) {
    --theme-accent-start: #3b82f6;
    --theme-accent-end: #1d4ed8;
}

/* Academic */
.theme-option:nth-child(2) {
    --theme-accent-start: #f59e0b;
    --theme-accent-end: #d97706;
}

/* Bloom */
.theme-option:nth-child(3) {
    --theme-accent-start: #0ea5e9;
    --theme-accent-end: #0284c7;
}

/* Blue */
.theme-option:nth-child(4) {
    --theme-accent-start: #ec4899;
    --theme-accent-end: #db2777;
}

/* Melody */
.theme-option:nth-child(5) {
    --theme-accent-start: #8b5cf6;
    --theme-accent-end: #7c3aed;
}

/* HarryPotter */
.theme-option:nth-child(6) {
    --theme-accent-start: #fcd34d;
    --theme-accent-end: #fbbf24;
}

/* XiaoDaiDai */

/* Responsive */
@media (max-width: 640px) {
    .theme-options {
        grid-template-columns: 1fr;
    }

    .theme-modal-header h3 {
        font-size: 1.25rem;
    }
}

/* 设置界面模块样式 */
#settings-view>div>div {
    position: relative;
    border: 1px solid var(--bloom-border);
    border-radius: var(--border-radius-lg);
    margin-bottom: var(--space-xl);
    padding: var(--space-xl);
    background: var(--bloom-surface-strong);
    background-image: var(--bloom-sheen), linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(248, 241, 232, 0.9));
    box-shadow: var(--bloom-shadow);
    backdrop-filter: blur(16px);
}

#settings-view>div>div>div {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

#settings-view>div>div>div>div {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

/* 小屏幕设备进一步优化 */
@media (max-width: 480px) {
    .container {
        padding: 5px;
    }

    .header {
        padding: 15px;
    }

    .header h1 {
        font-size: 1.3em;
    }

    .nav-btn {
        padding: 10px 15px;
        font-size: 13px;
    }

    .category-card,
    .exam-item {
        padding: 12px;
    }

    .btn {
        padding: 8px 12px;
        font-size: 13px;
    }

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

    .message {
        padding: 10px;
        font-size: 12px;
    }

    .developer-modal-content {
        padding: 20px;
        margin: 20px;
    }

    .developer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .developer-card {
        padding: 12px;
    }

    .developer-name {
        font-size: 0.9em;
    }
}

/* Modal System */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity var(--transition-normal);
}

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

.modal-container {
    background: var(--color-white);
    border-radius: var(--border-radius-2xl);
    box-shadow: var(--shadow-xl);
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    transform: translateY(-20px) scale(0.95);
    transition: all var(--transition-normal);
    color: var(--color-gray-900);
    border: 1px solid var(--color-gray-200);
}

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

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-xl) var(--space-2xl);
    border-bottom: 1px solid var(--color-gray-200);
    background: var(--color-gray-50);
}

.modal-title {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
}

.modal-close {
    background: none;
    border: none;
    font-size: var(--font-size-xl);
    color: var(--color-gray-500);
    cursor: pointer;
    padding: var(--space-sm);
    border-radius: var(--border-radius-md);
    transition: all var(--transition-normal);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    background: var(--color-gray-200);
    color: var(--color-gray-700);
}

.modal-body {
    padding: var(--space-2xl);
    max-height: 60vh;
    overflow-y: auto;
}

.record-summary h4 {
    margin: 0 0 16px 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
    padding: 12px 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 8px;
}

.record-summary .record-summary-replay-trigger {
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.record-summary .record-summary-replay-trigger:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(17, 24, 39, 0.22);
}

.record-summary .record-summary-replay-trigger:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.85);
    outline-offset: 2px;
}

.record-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.meta-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #f8fafc;
    border-radius: 8px;
    border-left: 4px solid #e2e8f0;
}

.meta-label {
    font-weight: 500;
    color: #64748b;
}

.meta-value {
    font-weight: 600;
    color: var(--text-color, #1e293b);
}

.score-highlight {
    color: #059669 !important;
    font-size: 1.1em;
}

.answer-details h5 {
    margin: 0 0 16px 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
    padding-bottom: 8px;
    border-bottom: 2px solid #e5e7eb;
}

.suite-entry {
    margin: var(--space-lg) 0;
    padding: var(--space-lg);
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius-lg);
}

.suite-entry+.suite-entry {
    margin-top: var(--space-xl);
}

.suite-entry h5 {
    margin: 0 0 var(--space-md) 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-800);
}

.suite-entry .answers-summary {
    margin-top: 0;
    margin-bottom: var(--space-md);
}

.answer-table-container {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid var(--border-color, #e5e7eb);
}

.answer-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    background: var(--bg-color, #ffffff);
}

.answer-table thead {
    background: var(--header-bg, #f8fafc);
}

.answer-table th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    color: var(--text-color, #374151);
    border-bottom: 2px solid var(--border-color, #e5e7eb);
}

.answer-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light, #f1f5f9);
    color: var(--text-color, #1e293b);
}

.answer-row.correct {
    background: var(--success-bg, #f0fdf4);
}

.answer-row.incorrect {
    background: var(--error-bg, #fef2f2);
}

.question-num {
    font-weight: 600;
    color: var(--text-color, #1e293b);
    text-align: center;
    width: 80px;
}

.user-answer {
    color: var(--text-color, #1e293b);
    font-family: 'Courier New', monospace;
}

.correct-answer {
    color: var(--success-color, #059669);
    font-family: 'Courier New', monospace;
    font-weight: 500;
}

.result {
    text-align: center;
    font-weight: bold;
    font-size: 1.1em;
    width: 60px;
}

.result.correct {
    color: var(--success-color, #059669);
}

.result.incorrect {
    color: var(--error-color, #dc2626);
}

.no-details {
    text-align: center;
    color: #6b7280;
    font-style: italic;
    padding: 40px 20px;
    background: #f9fafb;
    border-radius: 8px;
    margin: 0;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-md);
    padding: var(--space-xl) var(--space-2xl);
    border-top: 1px solid var(--color-gray-200);
    background: var(--color-gray-50);
}

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

/* Modal Button Styles */
.modal-footer .btn-primary {
    background: var(--color-brand-gradient);
    color: var(--color-white);
}

.modal-footer .btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.modal-footer .btn-secondary {
    background: var(--color-gray-600);
    color: var(--color-white);
}

.modal-footer .btn-secondary:hover:not(:disabled) {
    background: var(--color-gray-700);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* 可点击的练习记录标题样式 */
.practice-record-title {
    color: black;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    border-bottom: 1px solid transparent;
    font-size: 1.1em;
    /* 加大标题字体 */
}

/* Library loader modal */
.library-loader-overlay {
    align-items: center;
    justify-content: center;
}

.library-loader-modal {
    width: min(90vw, 900px);
    max-width: 900px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.9));
    color: #1e293b;
    border: none;
    border-radius: 20px;
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px);
}

.library-loader-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border-bottom: none;
    border-radius: 20px 20px 0 0;
    padding: 24px 30px;
}

.library-loader-header .modal-title {
    color: inherit;
    font-size: 1.5rem;
    font-weight: 600;
}

.library-loader-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
}

.library-loader-close:hover {
    background: rgba(255, 255, 255, 0.35);
    transform: translateY(-1px);
}

.library-loader-body {
    padding: 30px;
}

.library-loader-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.library-loader-card {
    border-radius: 16px;
    padding: 24px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.library-loader-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(102, 126, 234, 0.18);
}

.library-loader-card--reading {
    border: 2px solid rgba(102, 126, 234, 0.2);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.08), rgba(118, 75, 162, 0.05));
}

.library-loader-card--listening {
    border: 2px solid rgba(118, 75, 162, 0.2);
    background: linear-gradient(135deg, rgba(118, 75, 162, 0.08), rgba(102, 126, 234, 0.05));
}

.library-loader-card-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: #4c1d95;
}

.library-loader-card--reading .library-loader-card-title {
    color: #667eea;
}

.library-loader-card-description {
    margin: 0;
    color: #64748b;
    line-height: 1.6;
}

.library-loader-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.library-loader-primary,
.library-loader-secondary {
    border-radius: 10px;
    padding: 12px 20px;
    font-weight: 600;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.library-loader-primary {
    border: none;
    color: #fff;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 12px 24px rgba(102, 126, 234, 0.25);
}

.library-loader-card--listening .library-loader-primary {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

.library-loader-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 32px rgba(102, 126, 234, 0.28);
}

.library-loader-secondary {
    background: rgba(102, 126, 234, 0.1);
    border: 2px solid rgba(102, 126, 234, 0.3);
    color: #667eea;
}

.library-loader-card--listening .library-loader-secondary {
    background: rgba(118, 75, 162, 0.1);
    border-color: rgba(118, 75, 162, 0.3);
    color: #764ba2;
}

.library-loader-secondary:hover {
    transform: translateY(-1px);
    background: rgba(102, 126, 234, 0.16);
}

.library-loader-card--listening .library-loader-secondary:hover {
    background: rgba(118, 75, 162, 0.16);
}

.library-loader-hint {
    margin: 0;
    margin-top: 4px;
    font-size: 0.85rem;
    color: #94a3b8;
}

.library-loader-instructions {
    margin-top: 24px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05), rgba(118, 75, 162, 0.05));
    border-radius: 12px;
    border: 1px solid rgba(102, 126, 234, 0.1);
    color: #64748b;
}

.library-loader-instructions-title {
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 12px;
    font-size: 1.1rem;
}

.library-loader-instructions-list {
    margin: 0;
    padding-left: 20px;
    line-height: 1.7;
}

.library-loader-footer {
    padding: 20px 30px;
    background: rgba(248, 250, 252, 0.8);
    border-radius: 0 0 20px 20px;
    border-top: 1px solid rgba(226, 232, 240, 0.5);
}

.library-loader-close-btn {
    background: rgba(100, 116, 139, 0.1);
    border: 2px solid rgba(100, 116, 139, 0.2);
    color: #64748b;
    border-radius: 10px;
    padding: 12px 24px;
    font-weight: 600;
}

.library-loader-close-btn:hover {
    background: rgba(100, 116, 139, 0.18);
}

.library-loader-input {
    display: none;
}

@media (max-width: 900px) {
    .library-loader-body {
        padding: 24px;
    }

    .library-loader-grid {
        grid-template-columns: 1fr;
    }
}

.practice-record-title:hover {
    color: #333333;
    /* A dark gray for hover */
    border-bottom-color: #333333;
    text-decoration: none;
}

.practice-record-title:active {
    color: #666666;
}

/* 导出对话框样式 */
.export-options h4 {
    margin: 0 0 16px 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
}

.format-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.format-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.format-option:hover {
    border-color: #3b82f6;
    background: #f8fafc;
}

.format-option input[type="radio"] {
    margin-top: 2px;
}

.format-option input[type="radio"]:checked+.option-content {
    color: #1e40af;
}

.format-option:has(input[type="radio"]:checked) {
    border-color: #3b82f6;
    background: #eff6ff;
}

.option-content strong {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
}

.option-content p {
    margin: 0;
    font-size: 0.9rem;
    color: #6b7280;
    line-height: 1.4;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .modal-container {
        width: 95%;
        margin: 20px;
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 16px;
    }

    .record-meta {
        grid-template-columns: 1fr;
    }

    .meta-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .answer-table {
        font-size: 0.8rem;
    }

    .answer-table th,
    .answer-table td {
        padding: 8px 12px;
    }

    .modal-footer {
        flex-direction: column;
    }

    .modal-footer .btn {
        width: 100%;
        justify-content: center;
    }

    .format-option {
        padding: 12px;
    }

    .option-content strong {
        font-size: 0.9rem;
    }

    .option-content p {
        font-size: 0.8rem;
    }
}

.exam-item-action-btn {
    padding: 8px 16px;
    font-size: 14px;
}

/* Bloom Theme Dark Mode Styles */
body.bloom-dark-mode {
    background: radial-gradient(120% 120% at 20% 20%, rgba(53, 192, 161, 0.12), transparent 42%), linear-gradient(135deg, #0c1416 0%, #0f1d1f 55%, #0c1618 100%);
    color: #e7f0ea;
    --exam-item-bg: rgba(12, 25, 28, 0.92);
    --exam-item-border-color: rgba(69, 196, 170, 0.45);
    --exam-item-border-width: 1.5px;
}

.bloom-dark-mode .container {
    color: #e7f0ea;
}

.bloom-dark-mode .header {
    background: rgba(10, 18, 20, 0.94);
    border: 1px solid rgba(245, 178, 107, 0.3);
}

.bloom-dark-mode .header h1,
.bloom-dark-mode .header p {
    color: #e7f0ea;
}

.bloom-dark-mode .nav-btn {
    background: rgba(20, 38, 42, 0.9);
    border: 1px solid rgba(53, 192, 161, 0.3);
    color: #e7f0ea;
}

.bloom-dark-mode .nav-btn:hover {
    background: linear-gradient(135deg, rgba(31, 60, 66, 0.94), rgba(25, 48, 54, 0.94));
    border-color: rgba(245, 178, 107, 0.5);
    color: #ffffff;
}

.bloom-dark-mode .nav-btn.active {
    background: var(--color-brand-gradient);
    border-color: transparent;
    color: var(--color-white);
}

body.bloom-dark-mode,
body.blue-dark-mode,
:root[data-theme="blue"] body.blue-dark-mode {
    --library-config-bg: rgba(15, 23, 42, 0.85);
    --library-config-border: rgba(148, 163, 184, 0.35);
    --library-config-text: #e2e8f0;
    --library-config-meta: rgba(226, 232, 240, 0.75);
    --library-config-item-bg: rgba(148, 163, 184, 0.14);
    --library-config-item-border: rgba(148, 163, 184, 0.25);
    --library-config-item-active-bg: rgba(59, 130, 246, 0.24);
    --library-config-item-active-border: rgba(59, 130, 246, 0.55);
}


.bloom-dark-mode .view {
    background: rgba(10, 18, 20, 0.92);
    border: 1px solid rgba(53, 192, 161, 0.28);
    color: #e7f0ea;
}

.bloom-dark-mode .view>h2 {
    color: #e7f0ea;
}

.bloom-dark-mode .category-card {
    background: linear-gradient(145deg, rgba(13, 28, 31, 0.94), rgba(18, 36, 40, 0.9));
    border: 1px solid rgba(53, 192, 161, 0.35);
    color: #e7f0ea;
}


.bloom-dark-mode .category-title,
.bloom-dark-mode .category-meta {
    color: #e7f0ea;
}

.bloom-dark-mode .btn {
    background: linear-gradient(135deg, rgba(58, 100, 92, 0.92), rgba(45, 78, 69, 0.92));
    color: #e7f0ea;
    border: 1px solid rgba(53, 192, 161, 0.32);
}

.bloom-dark-mode .btn:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(76, 131, 119, 0.96), rgba(56, 100, 88, 0.96));
    border-color: rgba(245, 178, 107, 0.45);
}

.bloom-dark-mode .btn-primary,
.bloom-dark-mode .btn-info {
    background: linear-gradient(135deg, #f6b26b, #35c0a1);
    color: #0f1416;
    border-color: rgba(245, 178, 107, 0.6);
}

.bloom-dark-mode .btn-primary:hover:not(:disabled),
.bloom-dark-mode .btn-info:hover:not(:disabled) {
    background: linear-gradient(135deg, #ffc48c, #45d7b6);
}

.bloom-dark-mode .btn-secondary {
    background: rgba(23, 44, 48, 0.92);
    color: #e7f0ea;
    border-color: rgba(53, 192, 161, 0.28);
}

.bloom-dark-mode .btn-secondary:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(32, 60, 66, 0.96), rgba(26, 50, 55, 0.96));
}

.bloom-dark-mode .btn-success {
    background: linear-gradient(135deg, #35c0a1, #27a587);
    color: #0f1416;
    border-color: rgba(53, 192, 161, 0.55);
}

.bloom-dark-mode .btn-success:hover:not(:disabled) {
    background: linear-gradient(135deg, #47d7b6, #2fb48f);
}

.bloom-dark-mode .btn-warning {
    background: linear-gradient(135deg, #f6b26b, #e6863d);
    color: #0f1416;
    border-color: rgba(245, 178, 107, 0.65);
}

.bloom-dark-mode .btn-warning:hover:not(:disabled) {
    background: linear-gradient(135deg, #ffcb8f, #f39a56);
}

.bloom-dark-mode .exam-item {
    background: var(--exam-item-bg);
    border: var(--exam-item-border-width) solid var(--exam-item-border-color);
    color: #e7f0ea;
}

.bloom-dark-mode .exam-info h4,
.bloom-dark-mode .exam-meta {
    color: #e7f0ea;
}

.bloom-dark-mode .stat-card {
    background: linear-gradient(145deg, rgba(12, 25, 28, 0.95), rgba(16, 32, 36, 0.93));
    border: 1px solid rgba(53, 192, 161, 0.35);
    color: #e7f0ea;
}

.bloom-dark-mode .stat-number {
    color: #8de6c8;
}

.bloom-dark-mode .stat-label {
    color: #d5e7de;
}

.bloom-dark-mode .practice-history {
    background: linear-gradient(135deg, rgba(12, 25, 28, 0.96) 0%, rgba(18, 36, 40, 0.95) 50%, rgba(12, 25, 28, 0.96) 100%);
    border: 1px solid rgba(53, 192, 161, 0.3);
}

.bloom-dark-mode .history-item {
    background: rgba(14, 28, 31, 0.92);
    border: 1px solid rgba(53, 192, 161, 0.3);
    color: #e7f0ea;
}

.bloom-dark-mode .record-meta-line,
.bloom-dark-mode .record-date,
.bloom-dark-mode .record-duration-value,
.bloom-dark-mode .record-percentage {
    color: #e7f0ea;
}

.bloom-dark-mode .search-input {
    background: rgba(13, 26, 29, 0.92);
    border: 1px solid rgba(53, 192, 161, 0.28);
    color: #e7f0ea;
}

.bloom-dark-mode .search-input:focus {
    border-color: #f6b26b;
    box-shadow: 0 0 0 3px rgba(245, 178, 107, 0.18);
}

.bloom-dark-mode .search-input::placeholder {
    color: rgba(217, 232, 224, 0.7);
}

.bloom-dark-mode #settings-view>div>div {
    background: linear-gradient(145deg, rgba(12, 25, 28, 0.96), rgba(16, 32, 36, 0.94));
    border: 1px solid rgba(53, 192, 161, 0.3);
    color: #e7f0ea;
    box-shadow: 0 18px 42px rgba(8, 12, 14, 0.55);
}

.bloom-dark-mode .modal-container {
    background: rgba(12, 24, 27, 0.98);
    border: 1px solid rgba(53, 192, 161, 0.32);
    color: #e7f0ea;
}

.bloom-dark-mode .modal-header {
    background: rgba(10, 18, 20, 0.95);
    border-bottom: 1px solid rgba(53, 192, 161, 0.32);
}

.bloom-dark-mode .modal-title {
    color: #e7f0ea;
}

.bloom-dark-mode .modal-close {
    color: #d5e7de;
}

.bloom-dark-mode .modal-close:hover {
    background: rgba(27, 48, 52, 0.92);
    color: #ffffff;
}

.bloom-dark-mode .modal-body {
    color: #e7f0ea;
}

.bloom-dark-mode .modal-footer {
    background: rgba(10, 18, 20, 0.95);
    border-top: 1px solid rgba(53, 192, 161, 0.32);
}

.bloom-dark-mode .developer-modal-content {
    background: linear-gradient(145deg, rgba(12, 24, 27, 0.96), rgba(16, 32, 36, 0.94));
    border: 1px solid rgba(53, 192, 161, 0.3);
}

.bloom-dark-mode .developer-modal h2,
.bloom-dark-mode .developer-name {
    color: #e7f0ea;
}

.bloom-dark-mode .developer-card {
    background: rgba(10, 18, 20, 0.95);
    border: 1px solid rgba(53, 192, 161, 0.28);
}

.bloom-dark-mode .developer-card:hover {
    background: rgba(18, 32, 36, 0.96);
    border-color: rgba(245, 178, 107, 0.45);
}

.bloom-dark-mode .modal-close-btn {
    background: rgba(25, 46, 50, 0.92);
    border: 1px solid rgba(53, 192, 161, 0.3);
    color: #e7f0ea;
}

.bloom-dark-mode .modal-close-btn:hover {
    background: rgba(34, 60, 64, 0.96);
    border-color: rgba(245, 178, 107, 0.45);
}

.bloom-dark-mode .theme-modal-content {
    background: rgba(12, 24, 27, 0.98);
    border: 1px solid rgba(53, 192, 161, 0.28);
}

.bloom-dark-mode .theme-modal-header {
    background: rgba(10, 18, 20, 0.95);
    border-bottom: 1px solid rgba(53, 192, 161, 0.28);
}

.bloom-dark-mode .theme-modal-header h3 {
    color: #e7f0ea;
}

.bloom-dark-mode .theme-modal-close {
    color: #d5e7de;
}

.bloom-dark-mode .theme-modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #e7f0ea;
}

.bloom-dark-mode .theme-option {
    background: rgba(13, 26, 29, 0.9);
    border: 1px solid rgba(53, 192, 161, 0.28);
}

.bloom-dark-mode .theme-option:hover {
    background: rgba(20, 38, 42, 0.92);
    border-color: rgba(245, 178, 107, 0.45);
}

.bloom-dark-mode .theme-name,
.bloom-dark-mode .theme-desc {
    color: #e7f0ea;
}

.bloom-dark-mode .practice-record-title {
    color: #e7f0ea;
}

.bloom-dark-mode .practice-record-title:hover {
    color: #ffffff;
    border-bottom-color: #ffffff;
}

.bloom-dark-mode .practice-record-title:active {
    color: #b8c5e6;
}

/* Dark mode scrollbar */
.bloom-dark-mode ::-webkit-scrollbar {
    width: 8px;
}

.bloom-dark-mode ::-webkit-scrollbar-track {
    background: #0c1618;
    border-radius: 4px;
}

.bloom-dark-mode ::-webkit-scrollbar-thumb {
    background: rgba(53, 192, 161, 0.55);
    border-radius: 4px;
}

.bloom-dark-mode ::-webkit-scrollbar-thumb:hover {
    background: rgba(245, 178, 107, 0.7);
}

/* Bloom theme dark mode button style */
.btn-bloom-dark {
    background: linear-gradient(135deg, #0f191b, #172828);
    color: #e7f0ea;
    border-color: rgba(53, 192, 161, 0.32);
}

.btn-bloom-dark:hover:not(:disabled) {
    background: linear-gradient(135deg, #1b2d2f, #21403f);
    border-color: rgba(245, 178, 107, 0.45);
}

.btn-bloom-light {
    background: linear-gradient(135deg, #f6b26b, #35c0a1);
    color: #0f1416;
    border-color: rgba(245, 178, 107, 0.6);
}

.btn-bloom-light:hover:not(:disabled) {
    background: linear-gradient(135deg, #ffc48c, #45d7b6);
    border-color: rgba(245, 178, 107, 0.75);
}

/* =====================
   Blue Theme Overrides
   Palette:
   #0554F2 #1154D9 #57B7F2 #C4E1F2 #BAF241 #0788D9 #07B0F2 #05C7F2 #05DBF2
   ===================== */
:root[data-theme="blue"],
body.theme-blue {
    /* Override brand tokens to drive existing gradient usages */
    --color-brand-primary: #0554F2;
    --color-brand-secondary: #1154D9;
    --color-brand-gradient: linear-gradient(135deg, #0554F2 0%, #1154D9 100%);

    /* Additional semantic tokens for overrides */
    --blue-primary: #0554F2;
    --blue-primary-600: #1154D9;
    --blue-primary-400: #0788D9;
    --blue-secondary: #57B7F2;
    --blue-accent: #07B0F2;
    --blue-accent-600: #05C7F2;
    --blue-accent-500: #05DBF2;
    --blue-success: #BAF241;
    --blue-bg-tint: #C4E1F2;
    /* container half-width approximation for boat path */
    --blue-container-half: min(600px, 46vw);
    --blue-boat-outside: 12vw;
    --blue-boat-top: 46vh;
    /* Move waves from page bottom to boat position */
    --blue-wave-front-y: calc(var(--blue-boat-top) + 8px);
    --blue-wave-back-y: calc(var(--blue-boat-top) - 32px);
    /* how far boat starts/ends outside container */
    --blue-boat-width: 140px;
    --blue-boat-half: 70px;

    /* Exam item tokens */
    --exam-item-bg: #ffffff;
    --exam-item-border-color: rgba(5, 84, 242, 0.18);
    --exam-item-border-width: 1px;
}

/* Base */
:root[data-theme="blue"] body,
body.theme-blue {
    /* Sea scene: waves + islands + seagulls + foam transition + soft tints + sea/beach base */
    background-image:
        /* wave front */
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='160' viewBox='0 0 1200 160' preserveAspectRatio='none'><path fill='%2307B0F2' fill-opacity='0.30' d='M0,72 C 100,104 200,40 300,72 C 400,104 500,40 600,72 C 700,104 800,40 900,72 C 1000,104 1100,40 1200,72 L1200,160 L0,160 Z'/></svg>"),
        /* wave back */
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1000' height='200' viewBox='0 0 1000 200' preserveAspectRatio='none'><path fill='%2305C7F2' fill-opacity='0.40' d='M0,112 C 120,144 240,80 360,112 C 480,144 600,80 720,112 C 840,144 960,80 1080,112 L1080,200 L0,200 Z'/></svg>"),
        /* islands + palms */
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='220' viewBox='0 0 800 220'><defs><g id='island'><ellipse cx='70' cy='190' rx='65' ry='16' fill='%2305B0F2' fill-opacity='0.25'/><ellipse cx='70' cy='186' rx='55' ry='10' fill='%2305DBF2' fill-opacity='0.35'/><rect x='66' y='130' width='6' height='50' fill='%230788D9' /><path d='M69 130 l-18 12 l20 -6 l18 12 l-14 -18 l-6 0 z' fill='%2307B0F2' fill-opacity='0.9'/></g></defs><use href='%23island' x='0' y='0'/><use href='%23island' x='220' y='-8'/><use href='%23island' x='440' y='6'/><use href='%23island' x='660' y='-4'/></svg>"),
        /* seagulls */
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='700' height='120' viewBox='0 0 700 120'><path d='M20 40 q 20 -20 40 0' stroke='%2305C7F2' stroke-width='2' fill='none' stroke-opacity='0.6'/><path d='M80 50 q 18 -18 36 0' stroke='%2307B0F2' stroke-width='2' fill='none' stroke-opacity='0.5'/><path d='M160 30 q 22 -22 44 0' stroke='%2305DBF2' stroke-width='2' fill='none' stroke-opacity='0.5'/><path d='M240 45 q 20 -20 40 0' stroke='%2307B0F2' stroke-width='2' fill='none' stroke-opacity='0.5'/><path d='M320 35 q 20 -20 40 0' stroke='%2305C7F2' stroke-width='2' fill='none' stroke-opacity='0.5'/><path d='M400 42 q 18 -18 36 0' stroke='%2307B0F2' stroke-width='2' fill='none' stroke-opacity='0.5'/><path d='M480 28 q 22 -22 44 0' stroke='%2305DBF2' stroke-width='2' fill='none' stroke-opacity='0.5'/><path d='M560 46 q 20 -20 40 0' stroke='%2307B0F2' stroke-width='2' fill='none' stroke-opacity='0.5'/></svg>"),
        /* foam transition band */
        linear-gradient(180deg, transparent 66%, rgba(255, 255, 255, 0.95) 69%, rgba(255, 255, 255, 0.85) 72%, transparent 76%),
        /* soft tints */
        radial-gradient(1200px 700px at 0% 100%, rgba(7, 176, 242, 0.10), transparent 60%),
        radial-gradient(1000px 600px at 100% 0%, rgba(5, 199, 242, 0.08), transparent 60%),
        /* sea + beach base */
        linear-gradient(180deg,
            #FFFFFF 0%,
            #F5FAFF 12%,
            #CFEAFB 22%,
            #07B0F2 42%,
            #4FC3F7 58%,
            #E9F7FF 64%,
            #FFFDF8 70%,
            #FFF5D6 82%,
            #FFF0C2 92%,
            #FFF7E6 100%);
    background-repeat: repeat-x, repeat-x, repeat-x, repeat-x, no-repeat, no-repeat, no-repeat, no-repeat;
    background-attachment: fixed;
    background-size: 1200px 160px, 1000px 200px, 800px 220px, 700px 120px, 100% 100%, 140% 140%, 140% 140%, 100% 100%;
    background-position: 0 var(--blue-wave-front-y), 0 var(--blue-wave-back-y), 0 calc(100% - 220px), 0 8%, center, 0% 0%, 100% 100%, center;
    animation: blueSeaSlide 18s linear infinite;
    color: var(--color-gray-900);
    will-change: background-position;
}

@keyframes blueSeaSlide {
    0% {
        background-position: 0 var(--blue-wave-front-y), 0 var(--blue-wave-back-y), 0 calc(100% - 220px), 0 8%, center, 0% 0%, 100% 100%, center;
    }

    100% {
        background-position: 200% var(--blue-wave-front-y), 200% var(--blue-wave-back-y), 0 calc(100% - 220px), 0 8%, center, 0% 0%, 100% 100%, center;
    }
}

/* Boat element: behind all content, drifting right->left with gentle bobbing */
:root[data-theme="blue"] body::before,
body.theme-blue::before {
    content: "";
    position: fixed;
    top: var(--blue-boat-top);
    /* middle blue band center */
    left: calc(100vw + var(--blue-boat-outside));
    width: var(--blue-boat-width);
    height: 80px;
    pointer-events: none;
    z-index: 0;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='80' viewBox='0 0 140 80'><g><path d='M12 60 L128 60 L110 75 L30 75 Z' fill='%230788D9' fill-opacity='0.85' stroke='%230554F2' stroke-width='2'/><rect x='70' y='18' width='3.5' height='42' fill='%230554F2'/><path d='M72 20 L72 58 L110 40 Z' fill='%23FFFFFF' fill-opacity='0.95' stroke='%2305C7F2' stroke-width='1.5'/><circle cx='92' cy='46' r='1.5' fill='%2305C7F2'/></g></svg>") center/contain no-repeat;
    transform: translateY(0) rotate(-2deg);
    transform-origin: 50% 60%;
    animation: boatDrift 26s linear infinite;
}

/* Blue dark mode boat with light */
body.theme-blue.blue-dark-mode::before,
:root[data-theme="blue"] body.blue-dark-mode::before {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='80' viewBox='0 0 140 80'><defs><radialGradient id='boatLight'><stop offset='0%' stop-color='%23FFEB3B' stop-opacity='0.8'/><stop offset='40%' stop-color='%23FFC107' stop-opacity='0.4'/><stop offset='100%' stop-color='%23FF9800' stop-opacity='0'/></radialGradient></defs><g><path d='M12 60 L128 60 L110 75 L30 75 Z' fill='%231565C0' fill-opacity='0.9' stroke='%230D47A1' stroke-width='2'/><rect x='70' y='18' width='3.5' height='42' fill='%230D47A1'/><path d='M72 20 L72 58 L110 40 Z' fill='%23E3F2FD' fill-opacity='0.9' stroke='%231976D2' stroke-width='1.5'/><circle cx='92' cy='46' r='1.5' fill='%231976D2'/><ellipse cx='45' cy='55' rx='35' ry='20' fill='url(%23boatLight)' opacity='0.6'/><circle cx='40' cy='58' r='3' fill='%23FFEB3B' opacity='0.9'/></g></svg>") center/contain no-repeat;
    filter: drop-shadow(0 0 8px rgba(255, 235, 59, 0.4));
}

@keyframes boatDrift {

    /* Uniform speed leftward, with gentler bow bob/tilt */
    0% {
        left: calc(100vw + var(--blue-boat-outside));
        transform: translateY(0) rotate(-2deg);
    }

    10% {
        transform: translateY(-3px) rotate(2.5deg);
    }

    20% {
        transform: translateY(3px) rotate(-2.5deg);
    }

    30% {
        transform: translateY(-3px) rotate(3deg);
    }

    40% {
        transform: translateY(3px) rotate(-2deg);
    }

    50% {
        transform: translateY(-3px) rotate(3deg);
    }

    60% {
        transform: translateY(3px) rotate(-2.5deg);
    }

    70% {
        transform: translateY(-3px) rotate(2deg);
    }

    80% {
        transform: translateY(3px) rotate(-2deg);
    }

    90% {
        transform: translateY(-3px) rotate(2deg);
    }

    100% {
        left: calc(-1 * (var(--blue-boat-width) + var(--blue-boat-outside)));
        transform: translateY(0) rotate(-2deg);
    }
}

/* Ensure content paints above the boat pseudo element */
:root[data-theme="blue"] .container,
body.theme-blue .container,
:root[data-theme="blue"] .view,
body.theme-blue .view,
:root[data-theme="blue"] header,
body.theme-blue header,
:root[data-theme="blue"] nav,
body.theme-blue nav,
:root[data-theme="blue"] footer,
body.theme-blue footer {
    position: relative;
    z-index: 1;
}

/* Header */
:root[data-theme="blue"] .header,
body.theme-blue .header {
    background: #ffffff;
    border: 1px solid rgba(5, 84, 242, 0.22);
}

:root[data-theme="blue"] .header h1,
body.theme-blue .header h1 {
    color: #0B1F33;
}

/* Views */
:root[data-theme="blue"] .view,
body.theme-blue .view {
    background: #ffffff;
    border: 1px solid rgba(5, 84, 242, 0.18);
}

/* Category/Card */
:root[data-theme="blue"] .category-card,
body.theme-blue .category-card {
    background: #ffffff;
    border: 1px solid rgba(5, 84, 242, 0.18);
    box-shadow: 0 10px 24px rgba(17, 84, 217, 0.08);
}


:root[data-theme="blue"] .category-card::before,
body.theme-blue .category-card::before {
    background: var(--color-brand-gradient);
    opacity: 1;
}

/* Exam items */
:root[data-theme="blue"] .exam-item,
body.theme-blue .exam-item {
    background: var(--exam-item-bg);
    border: var(--exam-item-border-width) solid var(--exam-item-border-color);
}

:root[data-theme="blue"] .exam-item:hover,
body.theme-blue .exam-item:hover {
    border-color: rgba(5, 84, 242, 0.35);
    box-shadow: 0 6px 18px rgba(17, 84, 217, 0.10);
}

/* Buttons */
:root[data-theme="blue"] .btn,
body.theme-blue .btn {
    background: var(--blue-primary);
    color: #ffffff;
    border-color: var(--blue-primary-600);
}

:root[data-theme="blue"] .btn:hover:not(:disabled),
body.theme-blue .btn:hover:not(:disabled) {
    background: var(--blue-primary-600);
    box-shadow: 0 8px 20px rgba(17, 84, 217, 0.18);
}

:root[data-theme="blue"] .btn-primary,
body.theme-blue .btn-primary {
    background: var(--blue-primary);
    border-color: var(--blue-primary-600);
}

:root[data-theme="blue"] .btn-secondary,
body.theme-blue .btn-secondary {
    background: var(--blue-secondary);
    border-color: var(--blue-primary-400);
}

:root[data-theme="blue"] .btn-info,
body.theme-blue .btn-info {
    background: var(--blue-accent);
    border-color: var(--blue-accent-600);
}

:root[data-theme="blue"] .btn-success,
body.theme-blue .btn-success {
    background: var(--blue-success);
    color: #0B1F33;
    border-color: #98D936;
}

:root[data-theme="blue"] .btn-warning,
body.theme-blue .btn-warning {
    background: var(--blue-accent-500);
    border-color: var(--blue-accent-600);
}

/* Search input, inputs */
:root[data-theme="blue"] .search-input,
:root[data-theme="blue"] input,
:root[data-theme="blue"] select,
:root[data-theme="blue"] textarea,
body.theme-blue .search-input,
body.theme-blue input,
body.theme-blue select,
body.theme-blue textarea {
    border: 1px solid rgba(5, 84, 242, 0.22);
    background: #ffffff;
    color: var(--color-gray-900);
}

:root[data-theme="blue"] .search-input:focus,
:root[data-theme="blue"] input:focus,
:root[data-theme="blue"] select:focus,
:root[data-theme="blue"] textarea:focus,
body.theme-blue .search-input:focus,
body.theme-blue input:focus,
body.theme-blue select:focus,
body.theme-blue textarea:focus {
    border-color: var(--blue-primary-400);
    box-shadow: 0 0 0 3px rgba(17, 84, 217, 0.18);
    outline: none;
}

:root[data-theme="blue"],
body.theme-blue {
    --library-config-bg: #ffffff;
    --library-config-border: rgba(5, 84, 242, 0.18);
    --library-config-text: #0B1F33;
    --library-config-meta: rgba(17, 84, 217, 0.65);
    --library-config-item-bg: rgba(5, 84, 242, 0.08);
    --library-config-item-border: rgba(5, 84, 242, 0.2);
    --library-config-item-active-bg: rgba(5, 84, 242, 0.16);
    --library-config-item-active-border: rgba(5, 84, 242, 0.45);
}

body.theme-blue .library-config-panel__badge,
:root[data-theme="blue"] .library-config-panel__badge {
    background: rgba(17, 84, 217, 0.15);
    color: #0B1F33;
}

/* Nav buttons use brand gradient via tokens */
:root[data-theme="blue"] .nav-btn:hover,
body.theme-blue .nav-btn:hover {
    border-color: var(--color-brand-primary);
}

:root[data-theme="blue"] .nav-btn.active,
body.theme-blue .nav-btn.active {
    background: var(--color-brand-gradient);
}

/* Panels/Stats */
:root[data-theme="blue"] .stat-card,
body.theme-blue .stat-card {
    background: #ffffff;
    border: 1px solid rgba(5, 84, 242, 0.18);
}

/* Settings sections */
:root[data-theme="blue"] #settings-view>div>div,
body.theme-blue #settings-view>div>div {
    background: #ffffff;
    border: 1px solid rgba(5, 84, 242, 0.18);
    box-shadow: 0 8px 20px rgba(17, 84, 217, 0.08);
}

/* Practice history container + items */
:root[data-theme="blue"] .practice-history,
body.theme-blue .practice-history {
    background: linear-gradient(135deg, var(--blue-bg-tint) 0%, #ffffff 60%, var(--blue-bg-tint) 100%);
    border: 1px solid rgba(5, 84, 242, 0.18);
}

:root[data-theme="blue"] .history-item,
body.theme-blue .history-item {
    background: #ffffff;
    border: 1px solid rgba(5, 84, 242, 0.18);
    color: #0B1F33;
}

:root[data-theme="blue"] .history-item:hover,
body.theme-blue .history-item:hover {
    border-color: rgba(5, 84, 242, 0.35);
    box-shadow: 0 6px 18px rgba(17, 84, 217, 0.10);
}

:root[data-theme="blue"] .record-meta-line,
body.theme-blue .record-meta-line {
    color: #274b6f;
}

:root[data-theme="blue"] .record-percentage,
body.theme-blue .record-percentage {
    color: #0B1F33;
}

/* Blue dark mode text color fixes */
body.theme-blue.blue-dark-mode .history-item,
:root[data-theme="blue"] body.blue-dark-mode .history-item {
    color: #ffffff !important;
}

body.theme-blue.blue-dark-mode .record-meta-line,
body.theme-blue.blue-dark-mode .record-date,
body.theme-blue.blue-dark-mode .record-duration-value,
body.theme-blue.blue-dark-mode .record-percentage,
:root[data-theme="blue"] body.blue-dark-mode .record-meta-line,
:root[data-theme="blue"] body.blue-dark-mode .record-date,
:root[data-theme="blue"] body.blue-dark-mode .record-duration-value,
:root[data-theme="blue"] body.blue-dark-mode .record-percentage {
    color: #ffffff !important;
}

body.theme-blue.blue-dark-mode .exam-info h4,
body.theme-blue.blue-dark-mode .exam-meta,
:root[data-theme="blue"] body.blue-dark-mode .exam-info h4,
:root[data-theme="blue"] body.blue-dark-mode .exam-meta {
    color: #ffffff !important;
}

/* Blue dark mode practice record titles */
body.theme-blue.blue-dark-mode .practice-record-title,
body.theme-blue.blue-dark-mode .record-title,
body.theme-blue.blue-dark-mode .record-title.clickable,
:root[data-theme="blue"] body.blue-dark-mode .practice-record-title,
:root[data-theme="blue"] body.blue-dark-mode .record-title,
:root[data-theme="blue"] body.blue-dark-mode .record-title.clickable {
    color: #ffffff !important;
}

body.theme-blue.blue-dark-mode .practice-record-title:hover,
body.theme-blue.blue-dark-mode .record-title:hover,
body.theme-blue.blue-dark-mode .record-title.clickable:hover,
:root[data-theme="blue"] body.blue-dark-mode .practice-record-title:hover,
:root[data-theme="blue"] body.blue-dark-mode .record-title:hover,
:root[data-theme="blue"] body.blue-dark-mode .record-title.clickable:hover {
    color: #e8f2ff !important;
}

/* Blue dark mode header and overview titles */
body.theme-blue.blue-dark-mode .header h1,
body.theme-blue.blue-dark-mode .header p,
body.theme-blue.blue-dark-mode .view>h2,
:root[data-theme="blue"] body.blue-dark-mode .header h1,
:root[data-theme="blue"] body.blue-dark-mode .header p,
:root[data-theme="blue"] body.blue-dark-mode .view>h2 {
    color: #ffffff !important;
}

/* Blue dark mode additional text contrast fixes */
body.theme-blue.blue-dark-mode .container,
body.theme-blue.blue-dark-mode .view,
body.theme-blue.blue-dark-mode .category-card,
body.theme-blue.blue-dark-mode .exam-item,
body.theme-blue.blue-dark-mode .stat-card,
body.theme-blue.blue-dark-mode .practice-history,
body.theme-blue.blue-dark-mode .more-view-subtitle,
body.theme-blue.blue-dark-mode .overview-section-title,
body.theme-blue.blue-dark-mode .tool-card-content h3,
body.theme-blue.blue-dark-mode .tool-card-content p,
:root[data-theme="blue"] body.blue-dark-mode .container,
:root[data-theme="blue"] body.blue-dark-mode .view,
:root[data-theme="blue"] body.blue-dark-mode .category-card,
:root[data-theme="blue"] body.blue-dark-mode .exam-item,
:root[data-theme="blue"] body.blue-dark-mode .stat-card,
:root[data-theme="blue"] body.blue-dark-mode .practice-history,
:root[data-theme="blue"] body.blue-dark-mode .more-view-subtitle,
:root[data-theme="blue"] body.blue-dark-mode .overview-section-title,
:root[data-theme="blue"] body.blue-dark-mode .tool-card-content h3,
:root[data-theme="blue"] body.blue-dark-mode .tool-card-content p {
    color: #ffffff !important;
}

/* Blue dark mode stat card numbers */
body.theme-blue.blue-dark-mode .stat-number,
body.theme-blue.blue-dark-mode .stat-label,
:root[data-theme="blue"] body.blue-dark-mode .stat-number,
:root[data-theme="blue"] body.blue-dark-mode .stat-label {
    color: #ffffff !important;
}

/* Blue dark mode search and form elements */
body.theme-blue.blue-dark-mode .search-input,
body.theme-blue.blue-dark-mode .search-input::placeholder,
:root[data-theme="blue"] body.blue-dark-mode .search-input,
:root[data-theme="blue"] body.blue-dark-mode .search-input::placeholder {
    color: #ffffff !important;
    background: rgba(12, 26, 54, 0.9) !important;
    border-color: rgba(87, 183, 242, 0.4) !important;
}

/* Blue dark mode moon effect for header */
body.theme-blue.blue-dark-mode .header h1::before,
:root[data-theme="blue"] body.blue-dark-mode .header h1::before {
    content: "🌙";
    margin-right: 8px;
    filter:
        drop-shadow(0 0 10px rgba(255, 255, 224, 0.8)) drop-shadow(0 0 20px rgba(230, 230, 250, 0.6)) drop-shadow(0 0 30px rgba(176, 196, 222, 0.4));
    animation: moonGlow 5s ease-in-out infinite alternate;
    display: inline-block;
}

@keyframes moonGlow {
    0% {
        filter:
            drop-shadow(0 0 8px rgba(255, 255, 224, 0.7)) drop-shadow(0 0 16px rgba(230, 230, 250, 0.5)) drop-shadow(0 0 24px rgba(176, 196, 222, 0.3));
        transform: scale(1) rotate(-5deg);
    }

    50% {
        filter:
            drop-shadow(0 0 12px rgba(255, 255, 224, 0.9)) drop-shadow(0 0 24px rgba(230, 230, 250, 0.7)) drop-shadow(0 0 36px rgba(176, 196, 222, 0.5));
        transform: scale(1.05) rotate(3deg);
    }

    100% {
        filter:
            drop-shadow(0 0 10px rgba(255, 255, 224, 0.8)) drop-shadow(0 0 20px rgba(230, 230, 250, 0.6)) drop-shadow(0 0 30px rgba(176, 196, 222, 0.4));
        transform: scale(1.02) rotate(-2deg);
    }
}

/* Blue dark mode navigation and tool cards */
body.theme-blue.blue-dark-mode .nav-btn,
body.theme-blue.blue-dark-mode .tool-card,
body.theme-blue.blue-dark-mode .more-tools-grid .tool-card,
:root[data-theme="blue"] body.blue-dark-mode .nav-btn,
:root[data-theme="blue"] body.blue-dark-mode .tool-card,
:root[data-theme="blue"] body.blue-dark-mode .more-tools-grid .tool-card {
    color: #ffffff !important;
    background: rgba(12, 26, 54, 0.9) !important;
    border-color: rgba(87, 183, 242, 0.4) !important;
}

/* Blue dark mode empty states and hints */
body.theme-blue.blue-dark-mode .exam-list-empty,
body.theme-blue.blue-dark-mode .exam-list-empty-text,
body.theme-blue.blue-dark-mode .exam-list-empty-hint,
body.theme-blue.blue-dark-mode .practice-history-empty,
body.theme-blue.blue-dark-mode .practice-history-empty-text,
body.theme-blue.blue-dark-mode .overview-empty,
:root[data-theme="blue"] body.blue-dark-mode .exam-list-empty,
:root[data-theme="blue"] body.blue-dark-mode .exam-list-empty-text,
:root[data-theme="blue"] body.blue-dark-mode .exam-list-empty-hint,
:root[data-theme="blue"] body.blue-dark-mode .practice-history-empty,
:root[data-theme="blue"] body.blue-dark-mode .practice-history-empty-text,
:root[data-theme="blue"] body.blue-dark-mode .overview-empty {
    color: #ffffff !important;
    background: rgba(12, 26, 54, 0.8) !important;
    border-color: rgba(87, 183, 242, 0.3) !important;
}

/* Blue Dark Mode (toggle via .blue-dark-mode on body) */
body.theme-blue.blue-dark-mode,
:root[data-theme="blue"] body.blue-dark-mode {
    --exam-item-bg: rgba(12, 26, 54, 0.85);
    --exam-item-border-color: rgba(87, 183, 242, 0.28);
    --exam-item-border-width: 1px;

    background-image:
        /* wave front */
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='160' viewBox='0 0 1200 160' preserveAspectRatio='none'><path fill='%2307B0F2' fill-opacity='0.25' d='M0,72 C 100,104 200,40 300,72 C 400,104 500,40 600,72 C 700,104 800,40 900,72 C 1000,104 1100,40 1200,72 L1200,160 L0,160 Z'/></svg>"),
        /* wave back */
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1000' height='200' viewBox='0 0 1000 200' preserveAspectRatio='none'><path fill='%2305C7F2' fill-opacity='0.30' d='M0,112 C 120,144 240,80 360,112 C 480,144 600,80 720,112 C 840,144 960,80 1080,112 L1080,200 L0,200 Z'/></svg>"),
        /* islands + palms */
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='220' viewBox='0 0 800 220'><defs><g id='island'><ellipse cx='70' cy='190' rx='65' ry='16' fill='%2305B0F2' fill-opacity='0.18'/><ellipse cx='70' cy='186' rx='55' ry='10' fill='%2305DBF2' fill-opacity='0.25'/><rect x='66' y='130' width='6' height='50' fill='%234A2C17' /><path d='M69 130 l-18 12 l20 -6 l18 12 l-14 -18 l-6 0 z' fill='%232D5A3D'/></g></defs><use href='%23island' x='0' y='0'/><use href='%23island' x='220' y='-8'/><use href='%23island' x='440' y='6'/><use href='%23island' x='660' y='-4'/></svg>"),
        /* seagulls */
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='700' height='120' viewBox='0 0 700 120'><path d='M20 40 q 20 -20 40 0' stroke='%2305C7F2' stroke-width='2' fill='none' stroke-opacity='0.35'/><path d='M80 50 q 18 -18 36 0' stroke='%2307B0F2' stroke-width='2' fill='none' stroke-opacity='0.3'/><path d='M160 30 q 22 -22 44 0' stroke='%2305DBF2' stroke-width='2' fill='none' stroke-opacity='0.3'/><path d='M240 45 q 20 -20 40 0' stroke='%2307B0F2' stroke-width='2' fill='none' stroke-opacity='0.3'/><path d='M320 35 q 20 -20 40 0' stroke='%2305C7F2' stroke-width='2' fill='none' stroke-opacity='0.3'/><path d='M400 42 q 18 -18 36 0' stroke='%2307B0F2' stroke-width='2' fill='none' stroke-opacity='0.3'/><path d='M480 28 q 22 -22 44 0' stroke='%2305DBF2' stroke-width='2' fill='none' stroke-opacity='0.3'/><path d='M560 46 q 20 -20 40 0' stroke='%2307B0F2' stroke-width='2' fill='none' stroke-opacity='0.3'/></svg>"),
        /* foam transition band - refined and natural for night mode */
        linear-gradient(180deg,
            transparent 64%,
            rgba(173, 216, 230, 0.15) 67%,
            rgba(135, 206, 235, 0.25) 69%,
            rgba(135, 206, 235, 0.35) 70%,
            rgba(135, 206, 235, 0.25) 71%,
            rgba(135, 206, 235, 0.15) 73%,
            rgba(173, 216, 230, 0.08) 75%,
            transparent 78%),
        /* dark tints */
        radial-gradient(1200px 700px at 0% 100%, rgba(7, 176, 242, 0.14), transparent 60%),
        radial-gradient(1000px 600px at 100% 0%, rgba(5, 199, 242, 0.12), transparent 60%),
        /* dark sea/beach base */
        linear-gradient(180deg, #0d203f 0%, #0e3c66 38%, #0d2a4e 54%, #0e3359 62%, #091322 70%);
    background-attachment: fixed;
    background-size: 1200px 160px, 1000px 200px, 800px 220px, 700px 120px, 100% 100%, 160% 160%, 160% 160%, 100% 100%;
    background-position: 0 var(--blue-wave-front-y), 0 var(--blue-wave-back-y), 0 calc(100% - 220px), 0 8%, center, 0% 0%, 100% 100%, center;
    animation: blueSeaSlide 20s linear infinite;
    color: #e8f2ff;
    will-change: background-position;
}

body.theme-blue.blue-dark-mode .header,
body.theme-blue.blue-dark-mode .view,
body.theme-blue.blue-dark-mode .category-card,
body.theme-blue.blue-dark-mode .exam-item,
body.theme-blue.blue-dark-mode .stat-card,
body.theme-blue.blue-dark-mode #settings-view>div>div,
body.theme-blue.blue-dark-mode .practice-history,
body.theme-blue.blue-dark-mode .history-item {
    background: var(--exam-item-bg);
    border: var(--exam-item-border-width) solid var(--exam-item-border-color);
    color: #e8f2ff;
}


body.theme-blue.blue-dark-mode .record-meta-line,
body.theme-blue.blue-dark-mode .record-percentage,
body.theme-blue.blue-dark-mode .category-title,
body.theme-blue.blue-dark-mode .category-meta {
    color: #ffffff;
}

/* Blue dark mode text color - precise selectors only */
body.theme-blue.blue-dark-mode .view > h2,
body.theme-blue.blue-dark-mode .more-view-subtitle,
body.theme-blue.blue-dark-mode .overview-section-title,
body.theme-blue.blue-dark-mode .overview-section-label,
body.theme-blue.blue-dark-mode .tool-card-content h3,
body.theme-blue.blue-dark-mode .tool-card-content p,
body.theme-blue.blue-dark-mode .practice-history > div:first-child,
body.theme-blue.blue-dark-mode .browse-title-bar h2,
body.theme-blue.blue-dark-mode #browse-title,
body.theme-blue.blue-dark-mode .hero-header h1,
body.theme-blue.blue-dark-mode .hero-panel h3,
body.theme-blue.blue-dark-mode .hero-panel__title,
body.theme-blue.blue-dark-mode .hero-panel__muted,
body.theme-blue.blue-dark-mode .hero-section h3,
body.theme-blue.blue-dark-mode .hero-surface,
body.theme-blue.blue-dark-mode .system-management-panel h3,
body.theme-blue.blue-dark-mode .data-management-panel h3,
body.theme-blue.blue-dark-mode .hero-settings-group h3,
:root[data-theme="blue"] body.blue-dark-mode .view > h2,
:root[data-theme="blue"] body.blue-dark-mode .more-view-subtitle,
:root[data-theme="blue"] body.blue-dark-mode .overview-section-title,
:root[data-theme="blue"] body.blue-dark-mode .overview-section-label,
:root[data-theme="blue"] body.blue-dark-mode .tool-card-content h3,
:root[data-theme="blue"] body.blue-dark-mode .tool-card-content p,
:root[data-theme="blue"] body.blue-dark-mode .practice-history > div:first-child,
:root[data-theme="blue"] body.blue-dark-mode .browse-title-bar h2,
:root[data-theme="blue"] body.blue-dark-mode #browse-title,
:root[data-theme="blue"] body.blue-dark-mode .hero-header h1,
:root[data-theme="blue"] body.blue-dark-mode .hero-panel h3,
:root[data-theme="blue"] body.blue-dark-mode .hero-panel__title,
:root[data-theme="blue"] body.blue-dark-mode .hero-panel__muted,
:root[data-theme="blue"] body.blue-dark-mode .hero-section h3,
:root[data-theme="blue"] body.blue-dark-mode .hero-surface,
:root[data-theme="blue"] body.blue-dark-mode .system-management-panel h3,
:root[data-theme="blue"] body.blue-dark-mode .data-management-panel h3,
:root[data-theme="blue"] body.blue-dark-mode .hero-settings-group h3 {
    color: #ffffff !important;
}

body.theme-blue.blue-dark-mode .btn,
body.theme-blue.blue-dark-mode .btn-primary,
body.theme-blue.blue-dark-mode .btn-info {
    background: #0554F2;
    border-color: #1154D9;
    color: #ffffff;
}

body.theme-blue.blue-dark-mode .btn:hover:not(:disabled) {
    background: #1154D9;
    box-shadow: 0 8px 20px rgba(17, 84, 217, 0.28);
}

/* Blue dark mode practice stats cards */
body.theme-blue.blue-dark-mode .practice-stats .stat-card,
:root[data-theme="blue"] body.blue-dark-mode .practice-stats .stat-card {
    background: var(--exam-item-bg) !important;
    border-color: var(--exam-item-border-color) !important;
    color: #ffffff !important;
}

body.theme-blue.blue-dark-mode .practice-stats .stat-number,
body.theme-blue.blue-dark-mode .practice-stats .stat-label,
:root[data-theme="blue"] body.blue-dark-mode .practice-stats .stat-number,
:root[data-theme="blue"] body.blue-dark-mode .practice-stats .stat-label {
    color: #ffffff !important;
}

/* Blue waves now drawn as body background layers; pseudo-elements removed to ensure waves stay behind content. */

/* Footer or subtle tinted sections */
:root[data-theme="blue"] footer,
body.theme-blue footer {
    background: var(--blue-bg-tint);
}

/* Scrollbar */
:root[data-theme="blue"] ::-webkit-scrollbar-thumb,
body.theme-blue ::-webkit-scrollbar-thumb {
    background: var(--blue-primary-400);
    border: 3px solid #ffffff;
    border-radius: 10px;
}

@keyframes sailDrift {
    0% {
        left: calc(100vw + var(--blue-boat-outside));
    }

    100% {
        left: calc(-1 * (var(--blue-boat-width) + var(--blue-boat-outside)));
    }
}

@keyframes sailFlutter {
    0% {
        transform: rotate(0deg) skewX(0deg) scaleX(1);
        transform-origin: 70% 28%;
    }

    15% {
        transform: rotate(12deg) skewX(8deg) scaleX(0.985);
        transform-origin: 74% 26%;
    }

    30% {
        transform: rotate(-16deg) skewX(-11deg) scaleX(1.03);
        transform-origin: 68% 30%;
    }

    45% {
        transform: rotate(14deg) skewX(9deg) scaleX(0.99);
        transform-origin: 75% 27%;
    }

    60% {
        transform: rotate(-12deg) skewX(-8deg) scaleX(1.02);
        transform-origin: 69% 30%;
    }

    75% {
        transform: rotate(10deg) skewX(7deg) scaleX(0.99);
        transform-origin: 72% 28%;
    }

    100% {
        transform: rotate(-10deg) skewX(-7deg) scaleX(1.01);
        transform-origin: 70% 29%;
    }
}

/* Mini game modal */
.mini-game-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 1200;
}

.mini-game-modal.active {
    opacity: 1;
    pointer-events: auto;
}

.mini-game-modal[hidden] {
    display: none;
}

.mini-game-content {
    width: min(440px, 92vw);
    background: linear-gradient(165deg, rgba(255, 236, 213, 0.95) 0%, rgba(255, 204, 170, 0.9) 45%, rgba(243, 249, 24, 0.15) 100%);
    border-radius: 24px;
    box-shadow: 0 28px 68px rgba(176, 1, 5, 0.26);
    border: 1px solid rgba(176, 1, 5, 0.4);
    padding: 28px;
    color: #351012;
}

.mini-game-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.mini-game-header h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #8f2a2d;
    margin: 0;
}

.mini-game-close {
    border: none;
    background: rgba(176, 1, 5, 0.1);
    color: #8f2a2d;
    font-size: 1.25rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.mini-game-close:hover {
    background: rgba(176, 1, 5, 0.22);
    transform: rotate(8deg);
}

.mini-game-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.mini-game-question {
    font-size: 1.08rem;
    font-weight: 600;
    margin: 0;
    padding: 12px 16px;
    border-radius: 18px;
    background: rgba(255, 236, 213, 0.75);
    border: 1px solid rgba(176, 1, 5, 0.2);
    color: #571719;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.mini-game-question.reveal {
    background: linear-gradient(120deg, rgba(176, 1, 5, 0.14), rgba(255, 204, 170, 0.3));
    color: #b00105;
    transform: scale(1.01);
}

.mini-game-input {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mini-game-input.hidden {
    display: none;
}

.mini-game-input input {
    width: 100%;
    border-radius: 18px;
    border: 2px solid rgba(176, 1, 5, 0.18);
    padding: 12px 16px;
    font-size: 1rem;
    background: rgba(255, 255, 255, 0.92);
    color: #471013;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mini-game-input input:focus {
    border-color: #b00105;
    box-shadow: 0 0 0 3px rgba(243, 249, 24, 0.35);
}

.mini-game-input input.is-error {
    border-color: #b00105;
    box-shadow: 0 0 0 4px rgba(176, 1, 5, 0.18);
    animation: sparkShake 0.42s ease;
    background: rgba(176, 1, 5, 0.06);
}

.mini-game-feedback {
    min-height: 24px;
    font-size: 0.92rem;
    margin: 0;
    color: #6a1a1d;
}

.mini-game-footer {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.mini-game-progress {
    font-size: 0.85rem;
    color: #7f3028;
}

.mini-game-next {
    border: none;
    border-radius: 20px;
    padding: 11px 22px;
    background: linear-gradient(135deg, #b00105, #e81f25);
    color: #fff5e6;
    font-weight: 650;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.mini-game-next:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
}

.mini-game-next:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 32px rgba(176, 1, 5, 0.32);
}

@keyframes sparkShake {

    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-4px);
    }

    40% {
        transform: translateX(4px);
    }

    60% {
        transform: translateX(-3px);
    }

    80% {
        transform: translateX(3px);
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#overview-quick-lane.quick-lane {
    margin: 24px 0 28px;
    padding: 22px;
    border-radius: 24px;
    background: linear-gradient(120deg, rgba(176, 1, 5, 0.08), rgba(255, 204, 170, 0.22));
    border: 1px solid rgba(176, 1, 5, 0.28);
    box-shadow: 0 20px 44px rgba(176, 1, 5, 0.16);
}

.quick-lane-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.quick-lane-header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: #8f1f22;
}

.quick-lane-header p {
    margin: 6px 0 0;
    font-size: 0.9rem;
    color: #5b1a1d;
}

.quick-lane-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: linear-gradient(120deg, #f3f918, #ffd85a);
    color: #5c230b;
    font-weight: 600;
    font-size: 0.82rem;
    box-shadow: inset 0 0 0 1px rgba(92, 35, 11, 0.18);
}

.quick-lane-actions {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.lane-chip {
    border: 1px solid rgba(176, 1, 5, 0.32);
    background: linear-gradient(135deg, rgba(255, 236, 213, 0.88), rgba(255, 204, 170, 0.92));
    color: #65181b;
    border-radius: 999px;
    padding: 10px 18px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.lane-chip:hover,
.lane-chip:focus-visible {
    transform: translateY(-1px);
    border-color: #b00105;
    box-shadow: 0 12px 28px rgba(176, 1, 5, 0.28);
    outline: none;
}

.lane-chip:active {
    transform: translateY(0);
    box-shadow: 0 6px 16px rgba(176, 1, 5, 0.24);
}

.vocab-settings-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(92, 70, 46, 0.35);
    backdrop-filter: blur(6px);
    z-index: 1200;
    padding: 24px;
}

.vocab-settings-modal[hidden] {
    display: none;
}

.vocab-settings-modal__dialog {
    width: min(420px, 100%);
    background: linear-gradient(180deg, #fffaf2 0%, #f1e3cf 100%);
    border-radius: 20px;
    border: 1px solid var(--vocab-line);
    box-shadow: var(--vocab-shadow-strong);
    padding: 24px;
    color: var(--vocab-ink);
    position: relative;
    z-index: 1;
}

.vocab-settings-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}

.vocab-settings-modal__header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-family: var(--vocab-font-title);
}

.vocab-settings-modal__subtitle {
    margin: 6px 0 0;
    font-size: 0.9rem;
    color: var(--vocab-muted);
}

.vocab-settings-modal__backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.vocab-settings-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.vocab-settings-form__group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vocab-settings-form__group label {
    font-weight: 600;
    font-size: 0.95rem;
}

.vocab-settings-form__group input[type="number"] {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--vocab-line);
    background: var(--vocab-paper-bright);
    color: var(--vocab-ink);
    font-size: 0.95rem;
    box-shadow: inset 0 1px 2px rgba(120, 90, 60, 0.08);
}

.vocab-settings-form__group input[type="number"]:focus {
    outline: none;
    border-color: var(--vocab-accent);
    box-shadow: 0 0 0 3px rgba(196, 104, 75, 0.18);
}

.vocab-settings-form__hint {
    margin: 0;
    font-size: 0.82rem;
    color: var(--vocab-muted);
}

.vocab-settings-form__checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
}

.vocab-settings-form__checkbox input {
    width: 18px;
    height: 18px;
}

.vocab-settings-form__error {
    min-height: 20px;
    font-size: 0.85rem;
    color: #b5534b;
}

.vocab-settings-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.vocab-settings-modal__actions .btn {
    min-width: 96px;
}

@media (max-width: 768px) {
    .vocab-settings-modal {
        padding: 16px;
    }

    .vocab-settings-modal__dialog {
        width: 100%;
        padding: 20px;
    }
}

/* Developer Easter Egg - Connected Heart */
#dev-poi {
    overflow: visible;
    z-index: 10;
}

.heart-interaction {
    position: absolute;
    /* Position at the center of the gap (assuming --space-lg gap) */
    left: calc(100% + var(--space-lg) / 2);
    top: 50%;
    /* Center the element itself on that point */
    transform: translate(-50%, -50%) scale(0);
    font-size: 1.5rem;
    color: #fca5a5;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(244, 63, 94, 0.3));
    z-index: 20;
    line-height: 1;
    user-select: none;
}

#dev-poi:hover .heart-interaction,
#dev-poi:has(+ #dev-nana:hover) .heart-interaction {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
    animation: heartBeat 1s infinite ease-in-out;
}

@keyframes heartBeat {
    0% {
        transform: translate(-50%, -50%) scale(1.1);
    }

    14% {
        transform: translate(-50%, -50%) scale(1.35);
    }

    28% {
        transform: translate(-50%, -50%) scale(1.1);
    }

    42% {
        transform: translate(-50%, -50%) scale(1.35);
    }

    70% {
        transform: translate(-50%, -50%) scale(1.1);
    }

    100% {
        transform: translate(-50%, -50%) scale(1.1);
    }
}

@media (max-width: 480px) {
    .heart-interaction {
        /* Mobile gap is 10px, so half is 5px */
        left: calc(100% + 5px);
        font-size: 1.2rem;
    }
}

/* Achievement System Styles */
.achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 15px;
    padding: 20px;
    max-height: 60vh;
    overflow-y: auto;
}

.achievement-card {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    border: 2px solid #e5e7eb;
    transition: all 0.3s ease;
    opacity: 0.6;
    filter: grayscale(1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.achievement-card.unlocked {
    background: #fff;
    border-color: #fbbf24;
    opacity: 1;
    filter: grayscale(0);
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.2);
    transform: translateY(-2px);
}

.achievement-icon {
    font-size: 2.5em;
    margin-bottom: 10px;
    display: block;
}

.achievement-title {
    font-weight: bold;
    font-size: 0.9em;
    margin-bottom: 5px;
    color: var(--color-gray-800);
}

.achievement-desc {
    font-size: 0.75em;
    color: var(--color-gray-500);
    line-height: 1.3;
}

/* Achievement Tiers */
.achievement-card.tier-1.unlocked {
    border-color: #cd7f32; /* Bronze */
    box-shadow: 0 4px 12px rgba(205, 127, 50, 0.2);
    background: linear-gradient(145deg, #fff, #fff0e0);
}

.achievement-card.tier-2.unlocked {
    border-color: #c0c0c0; /* Silver */
    box-shadow: 0 4px 12px rgba(192, 192, 192, 0.2);
    background: linear-gradient(145deg, #fff, #f0f0f0);
}

.achievement-card.tier-3.unlocked {
    border-color: #ffd700; /* Gold */
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.2);
    background: linear-gradient(145deg, #fff, #fff8dc);
}

.achievement-card.tier-1 .achievement-icon { text-shadow: 0 2px 4px rgba(205, 127, 50, 0.3); }
.achievement-card.tier-2 .achievement-icon { text-shadow: 0 2px 4px rgba(192, 192, 192, 0.3); }
.achievement-card.tier-3 .achievement-icon { text-shadow: 0 2px 4px rgba(255, 215, 0, 0.3); }
/* Unified reading/listening browse refinements */
.browse-refinement-panel {
    display: grid;
    gap: 12px;
    margin: 14px 0 16px;
    padding: 14px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(248, 250, 252, 0.72)),
        repeating-linear-gradient(90deg, rgba(14, 165, 233, 0.05) 0 1px, transparent 1px 16px);
}

.browse-filter-row {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.browse-filter-label {
    color: rgba(51, 65, 85, 0.82);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.browse-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.browse-chip {
    min-height: 34px;
    padding: 0 13px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.78);
    color: #334155;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    cursor: pointer;
    transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.browse-chip:hover,
.browse-chip:focus-visible {
    border-color: rgba(14, 116, 144, 0.42);
    transform: translateY(-1px);
    outline: none;
}

.browse-chip.active,
.browse-chip[aria-pressed="true"] {
    border-color: #0f766e;
    background: #0f766e;
    color: #ffffff;
}

.frequency-guide {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 2px;
    color: #475569;
    font-size: 12px;
}

.frequency-guide span {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 9px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.66);
}

.frequency-guide strong {
    margin-right: 5px;
    color: #0f766e;
}

.exam-section {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
}

.exam-section-header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 38px;
    padding: 0 4px 0 2px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(248, 250, 252, 0.82));
    backdrop-filter: blur(10px);
}

.exam-section-title {
    color: #0f172a;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 0;
}

.exam-section-count {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.exam-section-body {
    display: grid;
    gap: 10px;
}

#browse-view .exam-item {
    border-radius: 10px;
}

#browse-view .exam-meta {
    color: #64748b;
    font-size: 12px;
    line-height: 1.55;
}

body.bloom-dark-mode .browse-refinement-panel,
body.theme-blue.blue-dark-mode .browse-refinement-panel {
    border-color: rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.44);
}

body.bloom-dark-mode .browse-filter-label,
body.theme-blue.blue-dark-mode .browse-filter-label,
body.bloom-dark-mode .frequency-guide,
body.theme-blue.blue-dark-mode .frequency-guide,
body.bloom-dark-mode .exam-section-count,
body.theme-blue.blue-dark-mode .exam-section-count {
    color: rgba(226, 232, 240, 0.72);
}

body.bloom-dark-mode .browse-chip,
body.theme-blue.blue-dark-mode .browse-chip,
body.bloom-dark-mode .frequency-guide span,
body.theme-blue.blue-dark-mode .frequency-guide span {
    border-color: rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.46);
    color: #e2e8f0;
}

body.bloom-dark-mode .exam-section-header,
body.theme-blue.blue-dark-mode .exam-section-header {
    border-color: rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.78);
}

body.bloom-dark-mode .exam-section-title,
body.theme-blue.blue-dark-mode .exam-section-title {
    color: #f8fafc;
}

@media (max-width: 720px) {
    .browse-filter-row {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .browse-chip {
        flex: 1 1 calc(33.333% - 8px);
        padding: 0 8px;
    }

    .exam-section-header {
        position: static;
    }
}

/* Final coordinated shell: align every main view and rebuild practice review UI. */
:root {
    --studio-ink: #12151c;
    --studio-ink-2: #2e343d;
    --studio-muted: #707783;
    --studio-line: rgba(18, 21, 28, 0.10);
    --studio-panel: rgba(255, 255, 255, 0.78);
    --studio-paper: #fbfaf6;
    --studio-champagne: #c3a76a;
    --studio-celadon: #88b9aa;
    --studio-shadow: 0 28px 84px rgba(25, 30, 38, 0.12);
}

html,
html body.hero-body,
html body.theme-blue,
html body.bloom-dark-mode,
html body.theme-blue.blue-dark-mode {
    background:
        radial-gradient(1200px 720px at 14% -8%, rgba(255, 255, 255, 0.96), transparent 62%),
        radial-gradient(760px 520px at 96% 12%, rgba(196, 205, 205, 0.48), transparent 64%),
        linear-gradient(142deg, #f7f6f1 0%, #eef2ef 48%, #faf9f5 100%) !important;
}

.container.hero-shell {
    grid-template-columns: minmax(0, 1fr) minmax(292px, 342px) !important;
    align-items: stretch;
    gap: 20px !important;
    width: min(1488px, calc(100vw - 52px)) !important;
}

.container.hero-shell > .view {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0;
}

.hero-header,
.main-nav.hero-nav {
    min-height: 252px !important;
    align-self: stretch !important;
}

.hero-header {
    padding: 36px 40px !important;
    border-radius: 30px !important;
    background:
        radial-gradient(620px 310px at 90% 72%, rgba(198, 187, 160, 0.28), transparent 64%),
        radial-gradient(540px 260px at 10% 0%, rgba(255, 255, 255, 0.82), transparent 72%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(239, 241, 237, 0.80)) !important;
    box-shadow: var(--studio-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
}

.hero-header h1 {
    max-width: 820px !important;
    font-size: clamp(48px, 5vw, 82px) !important;
}

.hero-header h1::before {
    color: var(--studio-champagne) !important;
    letter-spacing: 0.08em !important;
}

.hero-header h1::after {
    color: #676f7a !important;
    font-size: 16px !important;
}

.main-nav.hero-nav {
    padding: 14px !important;
    border-radius: 30px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(243, 243, 239, 0.68)) !important;
    box-shadow: var(--studio-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

.nav-btn.hero-nav__btn {
    min-height: 44px !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.60) !important;
    color: #646c78 !important;
}

.nav-btn.hero-nav__btn.active {
    background:
        linear-gradient(135deg, #171b23, #3c424c) !important;
    color: #fffaf0 !important;
}

.nav-btn.hero-nav__btn.active::before,
.nav-btn.hero-nav__btn.active::after {
    background: var(--studio-champagne) !important;
}

#overview-view,
#browse-view,
#cambridge-view,
#practice-view,
#more-view,
#settings-view {
    margin-top: 2px !important;
}

#practice-view {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    padding: 22px !important;
    border: 1px solid rgba(255, 255, 255, 0.86) !important;
    border-radius: 32px !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(246, 245, 240, 0.72)) !important;
    box-shadow: 0 34px 96px rgba(25, 30, 38, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
}

#practice-view.view.active {
    display: grid !important;
}

#practice-view.view:not(.active) {
    display: none !important;
}

#practice-view > .hero-panel__header:first-child {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 22px !important;
    align-items: end !important;
    min-height: 168px;
    padding: 28px 30px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 26px !important;
    background:
        radial-gradient(520px 240px at 84% 18%, rgba(195, 167, 106, 0.22), transparent 64%),
        radial-gradient(560px 300px at 0% 100%, rgba(136, 185, 170, 0.20), transparent 68%),
        linear-gradient(135deg, #151922 0%, #303640 100%) !important;
    box-shadow: 0 28px 72px rgba(18, 21, 28, 0.20) !important;
}

#practice-view > .hero-panel__header:first-child .hero-panel__title {
    color: #fffaf0 !important;
    font-size: clamp(28px, 3vw, 42px) !important;
    line-height: 1.1 !important;
}

.practice-title-block {
    display: grid;
    gap: 12px;
}

.practice-title-block::before {
    content: "REVIEW CONSOLE";
    width: max-content;
    padding: 7px 11px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    color: rgba(255, 250, 240, 0.78);
    background: rgba(255, 255, 255, 0.08);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.10em;
}

.practice-dashboard-subtitle {
    max-width: 560px !important;
    color: rgba(255, 250, 240, 0.68) !important;
    font-size: 15px !important;
}

.practice-dashboard-actions {
    align-self: end;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    padding: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.practice-quick-action {
    min-height: 44px !important;
    padding: 0 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fffaf0 !important;
    box-shadow: none !important;
}

.practice-dashboard-actions .practice-quick-action:last-child,
.practice-quick-action.active {
    background: linear-gradient(135deg, #fffaf0, #d8c38b) !important;
    color: #1c1a14 !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18) !important;
}

.practice-stats.hero-grid {
    display: grid !important;
    grid-template-columns: 1.18fr 1.18fr 0.92fr 0.92fr !important;
    gap: 14px !important;
    margin: 0 !important;
}

.practice-stats .hero-card,
.practice-stats .hero-card--stat {
    position: relative;
    min-height: 156px !important;
    padding: 22px 22px 20px !important;
    border: 1px solid var(--studio-line) !important;
    border-radius: 22px !important;
    background:
        linear-gradient(150deg, rgba(255, 255, 255, 0.92), rgba(247, 246, 241, 0.76)) !important;
    box-shadow: 0 16px 48px rgba(25, 30, 38, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
    overflow: hidden;
}

.practice-stats .hero-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--studio-champagne), var(--studio-celadon));
    opacity: 0.88;
}

.practice-stats .hero-card::after {
    content: "";
    position: absolute;
    right: -36px;
    bottom: -42px;
    width: 118px;
    height: 118px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(195, 167, 106, 0.16), transparent 66%);
    pointer-events: none;
}

.practice-stats .hero-card__label {
    color: #626a76 !important;
    font-size: 14px !important;
    font-weight: 820 !important;
}

.practice-stats .hero-card__value {
    margin: 22px 0 12px !important;
    color: var(--studio-ink) !important;
    font-size: clamp(42px, 3.6vw, 64px) !important;
    font-weight: 900 !important;
    line-height: 0.9 !important;
}

.practice-stats .hero-card__meta {
    color: #8a9099 !important;
    font-size: 14px !important;
}

.practice-history.hero-panel {
    display: grid;
    gap: 18px;
    margin: 0 !important;
    padding: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.86) !important;
    border-radius: 28px !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(247, 246, 241, 0.70)) !important;
    box-shadow: 0 18px 62px rgba(25, 30, 38, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.90) !important;
}

.practice-history > .hero-panel__header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 18px !important;
    align-items: center !important;
    padding: 0 !important;
    border: 0 !important;
}

.practice-history-heading {
    display: flex !important;
    align-items: center;
    gap: 16px !important;
    min-width: 0;
}

.practice-history-heading .hero-panel__title {
    margin: 0 !important;
    color: var(--studio-ink) !important;
    font-size: 24px !important;
    white-space: nowrap;
}

#record-type-filter-buttons.shui-segmented-control {
    padding: 5px !important;
    border: 1px solid var(--studio-line) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.72) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}

#record-type-filter-buttons .shui-segmented-btn {
    min-width: 72px;
    min-height: 36px;
    border-radius: 999px !important;
    color: #59616d !important;
    font-weight: 800 !important;
}

#record-type-filter-buttons .shui-segmented-btn.active {
    background: linear-gradient(135deg, #171b23, #3f4650) !important;
    color: #fffaf0 !important;
    box-shadow: 0 10px 24px rgba(18, 21, 28, 0.18) !important;
}

.practice-history-actions {
    display: flex !important;
    justify-content: flex-end !important;
    flex-wrap: wrap;
    gap: 10px !important;
}

.practice-history-actions .btn {
    min-height: 40px !important;
    padding: 0 15px !important;
    border-radius: 999px !important;
    font-weight: 820 !important;
}

#practice-view .practice-history-actions .btn-secondary,
#practice-view .practice-history-actions .hero-btn--ghost {
    border: 1px solid var(--studio-line) !important;
    background: rgba(255, 255, 255, 0.74) !important;
    color: var(--studio-ink) !important;
}

#practice-view .practice-history-actions .btn-info {
    border-color: transparent !important;
    background: linear-gradient(135deg, #88b9aa, #4c8177) !important;
    color: #ffffff !important;
}

#practice-view .practice-history-actions .btn-warning,
#practice-view .practice-history-actions .hero-btn--warn {
    border-color: transparent !important;
    background: linear-gradient(135deg, #e6cf95, #c3a76a) !important;
    color: #211b11 !important;
}

.practice-history-list,
#practice-history-list,
#history-list {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
    gap: 14px !important;
}

#history-list > div[style] {
    min-height: 260px;
    border: 1px dashed rgba(18, 21, 28, 0.16);
    border-radius: 22px;
    background:
        radial-gradient(280px 180px at 50% 0%, rgba(195, 167, 106, 0.13), transparent 70%),
        rgba(255, 255, 255, 0.58);
}

@media (max-width: 1100px) {
    .container.hero-shell {
        grid-template-columns: 1fr !important;
    }

    .hero-header,
    .main-nav.hero-nav {
        grid-column: 1 !important;
        min-height: auto !important;
    }

    .main-nav.hero-nav {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }

    .practice-stats.hero-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    .container.hero-shell {
        width: min(100vw - 22px, 720px) !important;
    }

    .hero-header,
    .main-nav.hero-nav,
    #practice-view {
        border-radius: 24px !important;
    }

    .main-nav.hero-nav,
    #practice-view > .hero-panel__header:first-child,
    .practice-history > .hero-panel__header,
    .practice-stats.hero-grid {
        grid-template-columns: 1fr !important;
    }

    .practice-dashboard-actions,
    .practice-history-actions {
        justify-content: flex-start !important;
    }

    .practice-history-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Apple-inspired shell refresh. Scope is the main dashboard only; practice pages stay untouched. */
:root {
    --apple-bg: #f5f5f7;
    --apple-surface: rgba(255, 255, 255, 0.82);
    --apple-surface-strong: rgba(255, 255, 255, 0.94);
    --apple-border: rgba(0, 0, 0, 0.08);
    --apple-text: #1d1d1f;
    --apple-muted: #6e6e73;
    --apple-blue: #0071e3;
    --apple-blue-soft: rgba(0, 113, 227, 0.12);
    --apple-green: #0a7f68;
    --apple-shadow: 0 18px 48px rgba(0, 0, 0, 0.08);
}

body.hero-body,
body.theme-blue,
body.bloom-dark-mode,
body.theme-blue.blue-dark-mode {
    background: var(--apple-bg) !important;
    color: var(--apple-text) !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", "Microsoft YaHei", sans-serif !important;
    letter-spacing: 0 !important;
}

body.hero-body::before,
body.hero-body::after,
body.theme-blue::before,
body.theme-blue::after {
    display: none !important;
}

.container.hero-shell {
    width: min(1440px, calc(100vw - 56px));
    margin: 0 auto;
    padding: 72px 0 64px;
}

.hero-header {
    margin-bottom: 36px;
}

.hero-header h1 {
    display: flex;
    align-items: center;
    gap: 18px;
    color: var(--apple-text) !important;
    font-size: clamp(40px, 5vw, 72px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.02 !important;
}

.hero-header h1 > span {
    color: var(--apple-muted) !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
}

.hero-badge--cta {
    min-height: 32px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    background: #ff3b30 !important;
    color: #fff !important;
    box-shadow: none !important;
    font-size: 14px !important;
}

.main-nav.hero-nav {
    position: sticky;
    top: 18px;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    margin: 0 0 44px;
    padding: 7px;
    border: 1px solid var(--apple-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.74);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
}

.nav-btn.hero-nav__btn {
    min-height: 48px;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--apple-muted) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

.nav-btn.hero-nav__btn:hover,
.nav-btn.hero-nav__btn:focus-visible {
    background: rgba(255, 255, 255, 0.7) !important;
    color: var(--apple-text) !important;
    transform: none !important;
}

.nav-btn.hero-nav__btn.active {
    background: #fff !important;
    color: var(--apple-text) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.10) !important;
}

.hero-panel,
.view.hero-panel,
#browse-view,
#more-view,
#overview-view,
#practice-view {
    border: 1px solid var(--apple-border) !important;
    border-radius: 28px !important;
    background: var(--apple-surface) !important;
    box-shadow: var(--apple-shadow) !important;
    backdrop-filter: blur(28px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(170%) !important;
}

.hero-panel__header,
.browse-title-bar {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.hero-panel__title,
#browse-title,
.overview-section-title {
    color: var(--apple-text) !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
}

.category-grid {
    gap: 18px !important;
}

.category-card,
.stat-card,
.history-item,
.tool-card,
.exam-item {
    border: 1px solid var(--apple-border) !important;
    border-radius: 18px !important;
    background: var(--apple-surface-strong) !important;
    color: var(--apple-text) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
}

.category-card::before,
.category-card::after {
    display: none !important;
}

.category-card:hover,
.tool-card:hover,
.exam-item:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.10) !important;
}

.browse-refinement-panel {
    margin: 16px 0 18px !important;
    border: 1px solid var(--apple-border) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.76) !important;
    box-shadow: none !important;
}

.browse-chip,
.shui-segmented-btn,
.browse-sort-select,
.search-input {
    border: 1px solid var(--apple-border) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    color: var(--apple-text) !important;
    box-shadow: none !important;
}

.browse-chip.active,
.browse-chip[aria-pressed="true"],
.shui-segmented-btn.active,
.shui-segmented-btn[aria-pressed="true"] {
    border-color: transparent !important;
    background: var(--apple-blue) !important;
    color: #fff !important;
}

.frequency-guide span {
    border-color: transparent !important;
    background: rgba(0, 113, 227, 0.08) !important;
    color: var(--apple-muted) !important;
}

.frequency-guide strong {
    color: var(--apple-blue) !important;
}

.exam-list {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    max-height: 66vh !important;
    padding: 0 8px 16px 0 !important;
}

.exam-section {
    grid-column: 1 / -1 !important;
    width: 100%;
    margin: 0 0 18px !important;
}

.exam-section-header {
    top: 0;
    min-height: 48px;
    padding: 0 2px 8px !important;
    border-bottom: 1px solid var(--apple-border) !important;
    background: rgba(245, 245, 247, 0.86) !important;
}

.exam-section-title {
    color: var(--apple-text) !important;
    font-size: 22px !important;
    font-weight: 800 !important;
}

.exam-section-count {
    color: var(--apple-muted) !important;
}

.exam-section-body {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 12px !important;
}

#browse-view .exam-info h4 {
    color: var(--apple-text) !important;
    font-size: 17px !important;
    line-height: 1.28 !important;
}

#browse-view .exam-meta {
    color: var(--apple-muted) !important;
}

#browse-view .exam-item-action-btn,
.btn {
    border-radius: 12px !important;
    font-weight: 700 !important;
}

#browse-view .exam-item-action-btn[data-action="start"],
.btn-primary {
    border-color: transparent !important;
    background: var(--apple-blue) !important;
    color: #fff !important;
}

#browse-view .exam-item-action-btn[data-action="pdf"],
.btn-secondary {
    border-color: transparent !important;
    background: rgba(0, 0, 0, 0.05) !important;
    color: var(--apple-text) !important;
}

#more-view .hero-panel__title {
    font-size: 0 !important;
}

#more-view .hero-panel__title::after {
    content: "\5355\8BCD\80CC\8BF5";
    font-size: 30px;
}

#more-view .more-view-subtitle {
    color: transparent !important;
    font-size: 0 !important;
}

#more-view .more-view-subtitle::after {
    content: "\4F7F\7528\95F4\9694\91CD\590D\7EE7\7EED\4F60\7684\96C5\601D\8BCD\6C47\4EFB\52A1\3002";
    color: var(--apple-muted);
    font-size: 16px;
}

#more-view .tool-card[data-action="open-clock"],
#more-view .tool-card[onclick*="showAchievements"] {
    display: none !important;
}

#more-view .more-tools-grid {
    display: grid !important;
    grid-template-columns: minmax(280px, 520px) !important;
    justify-content: start !important;
}

#more-view .tool-card[data-action="open-vocab"] {
    min-height: 210px;
}

#more-view .tool-card[data-action="open-vocab"] .tool-card-icon {
    font-size: 0 !important;
}

#more-view .tool-card[data-action="open-vocab"] .tool-card-icon::after {
    content: "Aa";
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: rgba(0, 113, 227, 0.10);
    color: var(--apple-blue);
    font-size: 24px;
    font-weight: 800;
}

#more-view .tool-card[data-action="open-vocab"] .tool-card-content h3 {
    font-size: 0 !important;
}

#more-view .tool-card[data-action="open-vocab"] .tool-card-content h3::after {
    content: "\5355\8BCD\80CC\8BF5";
    color: var(--apple-text);
    font-size: 26px;
}

#more-view .tool-card[data-action="open-vocab"] .tool-card-content p {
    font-size: 0 !important;
}

#more-view .tool-card[data-action="open-vocab"] .tool-card-content p::after {
    content: "SM-2 \95F4\9694\91CD\590D\FF0C\7EE7\7EED\4F60\7684\6838\5FC3\8BCD\6C47\590D\4E60\3002";
    color: var(--apple-muted);
    font-size: 15px;
    line-height: 1.55;
}

#more-view .tool-card[data-action="open-vocab"] .tool-card-arrow {
    font-size: 0 !important;
}

#more-view .tool-card[data-action="open-vocab"] .tool-card-arrow::after {
    content: "\8FDB\5165";
    color: var(--apple-blue);
    font-size: 15px;
    font-weight: 800;
}

@media (max-width: 900px) {
    .container.hero-shell {
        width: min(100vw - 24px, 720px);
        padding-top: 28px;
    }

    .hero-header h1 {
        font-size: 38px !important;
        flex-wrap: wrap;
    }

    .main-nav.hero-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-radius: 24px;
    }

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

/* Final contrast guard for the weak-review toggle. Keep this at file end. */
#practice-view #weak-review-btn.practice-quick-action {
    background: rgba(255, 255, 255, 0.84) !important;
    color: var(--desk-ink) !important;
    transition:
        transform 0.22s var(--desk-ease),
        box-shadow 0.22s var(--desk-ease),
        background 0.22s var(--desk-ease),
        border-color 0.22s var(--desk-ease) !important;
}

#practice-view #weak-review-btn.practice-quick-action:hover,
#practice-view #weak-review-btn.practice-quick-action:focus-visible {
    background: rgba(255, 255, 255, 0.96) !important;
    color: var(--desk-ink) !important;
}

#practice-view #weak-review-btn.practice-quick-action.active,
#practice-view #weak-review-btn.practice-quick-action[aria-pressed="true"] {
    border-color: transparent !important;
    background: linear-gradient(135deg, #0a84ff, #0066d6) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 30px rgba(10, 132, 255, 0.24) !important;
}

#practice-view #weak-review-btn.practice-quick-action.active:hover,
#practice-view #weak-review-btn.practice-quick-action[aria-pressed="true"]:hover,
#practice-view #weak-review-btn.practice-quick-action.active:focus-visible,
#practice-view #weak-review-btn.practice-quick-action[aria-pressed="true"]:focus-visible {
    color: #ffffff !important;
}

/* Fix weak-review toggle contrast: active text must stay readable. */
#weak-review-btn.practice-quick-action {
    background: rgba(255, 255, 255, 0.84) !important;
    color: var(--desk-ink) !important;
}

#weak-review-btn.practice-quick-action:hover,
#weak-review-btn.practice-quick-action:focus-visible {
    background: rgba(255, 255, 255, 0.96) !important;
    color: var(--desk-ink) !important;
}

#weak-review-btn.practice-quick-action.active,
#weak-review-btn.practice-quick-action[aria-pressed="true"] {
    border-color: transparent !important;
    background: linear-gradient(135deg, #0a84ff, #0066d6) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 30px rgba(10, 132, 255, 0.24) !important;
}

#weak-review-btn.practice-quick-action.active:hover,
#weak-review-btn.practice-quick-action[aria-pressed="true"]:hover,
#weak-review-btn.practice-quick-action.active:focus-visible,
#weak-review-btn.practice-quick-action[aria-pressed="true"]:focus-visible {
    color: #ffffff !important;
}

/* Final Apple-style home shell polish. Keep this scoped to the dashboard shell. */
:root {
    --apple-bg: #f7f8f6;
    --apple-surface: rgba(255, 255, 255, 0.72);
    --apple-surface-strong: rgba(255, 255, 255, 0.88);
    --apple-border: rgba(25, 37, 45, 0.10);
    --apple-text: #111827;
    --apple-muted: #667085;
    --apple-blue: #1f7a72;
    --apple-blue-soft: rgba(31, 122, 114, 0.12);
    --apple-green: #2f8f74;
    --apple-shadow: 0 22px 70px rgba(31, 41, 55, 0.11);
    --ielts-accent: #1f7a72;
    --ielts-accent-strong: #145d57;
    --ielts-accent-soft: rgba(31, 122, 114, 0.13);
    --ielts-ink: #111827;
    --ielts-secondary: #eef2f2;
}

body.hero-body,
body.theme-blue,
body.bloom-dark-mode,
body.theme-blue.blue-dark-mode {
    position: relative;
    z-index: 0;
    isolation: isolate;
    min-height: 100vh;
    overflow-x: hidden;
    background:
        linear-gradient(125deg, rgba(236, 242, 241, 0.92) 0%, rgba(248, 249, 247, 0.92) 34%, rgba(239, 245, 249, 0.94) 68%, rgba(250, 250, 248, 0.98) 100%),
        repeating-linear-gradient(90deg, rgba(17, 24, 39, 0.025) 0 1px, transparent 1px 88px),
        #f7f8f6 !important;
    animation: none !important;
}

body.hero-body::before,
body.theme-blue::before {
    content: "";
    display: block !important;
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(108deg, transparent 0%, transparent 14%, rgba(180, 214, 212, 0.46) 14%, rgba(180, 214, 212, 0.18) 33%, transparent 33%),
        linear-gradient(286deg, transparent 0%, rgba(206, 222, 232, 0.34) 18%, transparent 46%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 248, 247, 0.72));
}

body.hero-body::after,
body.theme-blue::after {
    content: "";
    display: block !important;
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.42) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.34) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.56), transparent 70%);
}

html,
html body.hero-body,
html body.theme-blue,
html body.bloom-dark-mode,
html body.theme-blue.blue-dark-mode {
    background:
        linear-gradient(135deg, #f8f9f7 0%, #edf3f2 42%, #f6f8fa 72%, #fbfbf9 100%),
        repeating-linear-gradient(90deg, rgba(17, 24, 39, 0.026) 0 1px, transparent 1px 92px),
        repeating-linear-gradient(0deg, rgba(17, 24, 39, 0.018) 0 1px, transparent 1px 92px) !important;
    background-attachment: fixed !important;
}

html body.hero-body::before,
html body.hero-body::after,
html body.theme-blue::before,
html body.theme-blue::after {
    display: none !important;
}

#shui-three-bg {
    display: none !important;
}

.container.hero-shell,
.message-container,
#boot-overlay {
    position: relative;
    z-index: 1;
}

.container.hero-shell {
    padding-top: 58px;
}

.hero-header {
    margin-bottom: 30px;
}

.hero-header h1 {
    width: auto !important;
    max-width: 960px;
    font-size: clamp(42px, 5.4vw, 76px) !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
    color: var(--ielts-ink) !important;
    text-wrap: balance;
}

.main-nav.hero-nav {
    border: 1px solid rgba(255, 255, 255, 0.78) !important;
    background: rgba(255, 255, 255, 0.58) !important;
    box-shadow: 0 18px 52px rgba(31, 41, 55, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}

.nav-btn.hero-nav__btn {
    color: #667085 !important;
}

.nav-btn.hero-nav__btn:hover,
.nav-btn.hero-nav__btn:focus-visible {
    background: rgba(255, 255, 255, 0.72) !important;
    color: var(--ielts-ink) !important;
}

.nav-btn.hero-nav__btn.active {
    background: linear-gradient(180deg, #ffffff 0%, #eef5f4 100%) !important;
    color: var(--ielts-accent-strong) !important;
    box-shadow: 0 12px 28px rgba(31, 122, 114, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

.hero-panel,
.hero-section,
#browse-view,
#overview-view,
#practice-view,
#more-view,
.browse-refinement-panel {
    border-color: rgba(255, 255, 255, 0.72) !important;
    background: rgba(255, 255, 255, 0.62) !important;
    box-shadow: 0 24px 78px rgba(31, 41, 55, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

.browse-chip.active,
.browse-chip[aria-pressed="true"],
.shui-segmented-btn.active,
.shui-segmented-btn[aria-pressed="true"],
#browse-view .exam-item-action-btn[data-action="start"],
.btn-primary,
.vocab-view-shell .btn-primary {
    border-color: transparent !important;
    background: linear-gradient(180deg, #2c8c83 0%, #176a63 100%) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(31, 122, 114, 0.24) !important;
}

.browse-chip:hover,
.shui-segmented-btn:hover,
.btn-primary:hover:not(:disabled),
.vocab-view-shell .btn-primary:hover:not(:disabled),
#browse-view .exam-item-action-btn[data-action="start"]:hover:not(:disabled) {
    transform: translateY(-1px);
    background: linear-gradient(180deg, #329b91 0%, #145d57 100%) !important;
}

#browse-view .exam-item-action-btn[data-action="pdf"],
.btn-secondary,
.browse-sort-select,
.search-input {
    background: rgba(255, 255, 255, 0.74) !important;
    color: var(--ielts-ink) !important;
    border-color: rgba(25, 37, 45, 0.08) !important;
}

.frequency-guide span {
    background: var(--ielts-accent-soft) !important;
}

.frequency-guide strong,
#more-view .tool-card[data-action="open-vocab"] .tool-card-arrow::after,
#more-view .tool-card[data-action="open-vocab"] .tool-card-icon::after {
    color: var(--ielts-accent-strong) !important;
}

#more-view .more-tools-grid {
    grid-template-columns: minmax(280px, 560px) !important;
}

#more-view .tool-card[data-action="open-vocab"] {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(240, 247, 246, 0.86)) !important;
    border-color: rgba(255, 255, 255, 0.82) !important;
}

#more-view .tool-card[data-action="open-vocab"] .tool-card-icon::after {
    background: rgba(31, 122, 114, 0.12) !important;
}

@media (max-width: 900px) {
    .container.hero-shell {
        padding-top: 34px;
    }

    .hero-header h1 {
        font-size: 40px !important;
        line-height: 1.08 !important;
    }
}

/* Study dashboard refinement: compact Apple-like workspace for browse/practice. */
.container.hero-shell {
    padding-top: 38px;
}

.hero-header {
    margin-bottom: 22px;
}

.hero-header h1 {
    font-size: clamp(42px, 4vw, 62px) !important;
    line-height: 1.02 !important;
}

.main-nav.hero-nav {
    margin-bottom: 34px !important;
}

#browse-view .browse-refinement-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 20px 22px !important;
}

#part-filter-buttons [data-part-filter="P5"],
.browse-chip[data-part-filter="P5"] {
    display: none !important;
}

.cambridge-import-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 2px;
    padding: 14px 16px;
    border: 1px solid rgba(31, 122, 114, 0.14);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(237, 248, 246, 0.9), rgba(255, 255, 255, 0.78));
}

.cambridge-import-card__copy {
    display: grid;
    gap: 3px;
    color: var(--ielts-ink);
}

.cambridge-import-card__copy strong {
    font-size: 15px;
    font-weight: 850;
}

.cambridge-import-card__copy span {
    color: var(--apple-muted);
    font-size: 13px;
    line-height: 1.45;
}

.cambridge-import-card__button {
    min-height: 38px;
    white-space: nowrap;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #2c8c83 0%, #176a63 100%) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(31, 122, 114, 0.20) !important;
}

#practice-view {
    padding: 44px 48px !important;
}

#practice-view > .hero-panel__header:first-child {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 22px;
    align-items: end;
    margin-bottom: 26px;
}

.practice-title-block {
    display: grid;
    gap: 8px;
}

.practice-dashboard-subtitle {
    max-width: 520px;
    margin: 0;
    color: var(--apple-muted);
    font-size: 15px;
    line-height: 1.55;
}

.practice-dashboard-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.practice-quick-action {
    min-height: 42px;
    padding: 0 18px !important;
    border-radius: 999px !important;
}

.practice-quick-action.active {
    border-color: transparent !important;
    background: linear-gradient(180deg, #2c8c83 0%, #176a63 100%) !important;
    color: #fff !important;
}

.practice-stats.hero-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px !important;
    margin-bottom: 24px !important;
}

.practice-stats .hero-card,
.practice-stats .hero-card--stat {
    min-height: 150px;
    padding: 22px 24px !important;
    border: 1px solid rgba(25, 37, 45, 0.08) !important;
    border-radius: 22px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(247, 251, 250, 0.86)) !important;
    box-shadow: 0 16px 42px rgba(31, 41, 55, 0.07) !important;
}

.practice-stats .hero-card__label {
    color: #667085 !important;
    font-size: 14px !important;
    font-weight: 750 !important;
}

.practice-stats .hero-card__value {
    margin: 18px 0 12px;
    color: var(--ielts-ink) !important;
    font-size: clamp(34px, 3.2vw, 52px) !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
}

.practice-stats .hero-card__meta {
    color: #7a8597 !important;
    font-size: 13px !important;
}

.practice-history.hero-panel {
    padding: 26px 28px !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, 0.72) !important;
}

.practice-history > .hero-panel__header {
    display: grid !important;
    grid-template-columns: minmax(280px, 1fr) auto;
    gap: 18px;
    align-items: center;
    margin-bottom: 18px;
}

.practice-history-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.practice-history-heading .hero-panel__title {
    margin: 0 !important;
}

.practice-history-actions {
    display: flex !important;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px !important;
}

.practice-history-actions .btn {
    min-height: 40px;
    border-radius: 999px !important;
}

#practice-view .shui-segmented-btn.active,
#practice-view .shui-segmented-btn[aria-pressed="true"] {
    border-color: rgba(36, 41, 51, 0.16) !important;
    background: linear-gradient(135deg, var(--premium-slate), #4b4f57) !important;
    color: #fffdf8 !important;
    box-shadow: 0 14px 28px rgba(36, 41, 51, 0.16) !important;
}

#practice-view .shui-segmented-btn:not(.active) {
    background: rgba(255, 255, 255, 0.70) !important;
    color: var(--premium-ink) !important;
}

#practice-view .practice-history-actions .btn-secondary,
#practice-view .practice-history-actions .hero-btn--ghost {
    border: 1px solid rgba(20, 23, 29, 0.09) !important;
    background: rgba(255, 255, 255, 0.72) !important;
    color: var(--premium-ink) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

#practice-view .practice-history-actions .btn-info {
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--premium-slate), #4b4f57) !important;
    color: #fffdf8 !important;
    box-shadow: 0 16px 34px rgba(36, 41, 51, 0.18) !important;
}

#practice-view .practice-history-actions .btn-warning,
#practice-view .practice-history-actions .hero-btn--warn {
    border-color: transparent !important;
    background: linear-gradient(135deg, #d8c69c, var(--premium-accent)) !important;
    color: #27231a !important;
    box-shadow: 0 16px 34px rgba(181, 155, 99, 0.22) !important;
}

.practice-history-list,
#practice-history-list,
#history-list {
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)) !important;
    gap: 12px !important;
    padding: 4px !important;
    max-height: min(58vh, 640px);
    overflow: auto;
}

#history-list > div[style] {
    grid-column: 1 / -1;
    min-height: 260px;
    border: 1px dashed rgba(31, 122, 114, 0.22);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.55);
}

.history-item {
    grid-template-columns: auto minmax(0, 1fr) auto auto !important;
    border: 1px solid rgba(25, 37, 45, 0.08) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.84) !important;
    box-shadow: 0 12px 34px rgba(31, 41, 55, 0.07) !important;
}

.history-item:hover {
    border-color: rgba(31, 122, 114, 0.24) !important;
    box-shadow: 0 18px 46px rgba(31, 41, 55, 0.10) !important;
}

@media (max-width: 1100px) {
    .practice-stats.hero-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .practice-history > .hero-panel__header,
    #practice-view > .hero-panel__header:first-child {
        grid-template-columns: 1fr;
    }

    .practice-dashboard-actions,
    .practice-history-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 720px) {
    .container.hero-shell {
        width: min(100vw - 24px, 720px);
        padding-top: 24px;
    }

    .hero-header h1 {
        font-size: 34px !important;
    }

    #practice-view {
        padding: 28px 18px !important;
    }

    .practice-stats.hero-grid,
    .practice-history-list,
    #practice-history-list,
    #history-list {
        grid-template-columns: 1fr !important;
    }

    .cambridge-import-card {
        align-items: stretch;
        flex-direction: column;
    }

    .cambridge-import-card__button {
        width: 100%;
    }
}

.library-loader-modal {
    border: 1px solid rgba(255, 255, 255, 0.76) !important;
    border-radius: 26px !important;
    background: rgba(255, 255, 255, 0.88) !important;
    box-shadow: 0 28px 84px rgba(17, 24, 39, 0.24) !important;
    overflow: hidden;
    backdrop-filter: blur(26px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(26px) saturate(170%) !important;
}

.library-loader-modal .modal-header,
.modal-header.library-loader-header {
    border-bottom: 1px solid rgba(25, 37, 45, 0.08) !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(236, 246, 244, 0.9)) !important;
    color: var(--ielts-ink) !important;
}

.library-loader-modal .modal-title,
#library-loader-title {
    color: var(--ielts-ink) !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
}

.library-loader-modal .modal-close,
.library-loader-close {
    background: rgba(31, 122, 114, 0.10) !important;
    color: var(--ielts-accent-strong) !important;
}

.library-loader-card {
    border: 1px solid rgba(31, 122, 114, 0.16) !important;
    border-radius: 22px !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(241, 248, 247, 0.86)) !important;
    box-shadow: 0 14px 38px rgba(31, 41, 55, 0.08) !important;
}

.library-loader-card-title {
    color: var(--ielts-accent-strong) !important;
    letter-spacing: 0 !important;
}

.library-loader-card-description,
.library-loader-hint,
.library-loader-instructions {
    color: #667085 !important;
}

.library-loader-primary {
    border-color: transparent !important;
    background: linear-gradient(180deg, #2c8c83 0%, #176a63 100%) !important;
    color: #fff !important;
    box-shadow: 0 12px 28px rgba(31, 122, 114, 0.22) !important;
}

.library-loader-secondary,
.library-loader-close-btn {
    border: 1px solid rgba(25, 37, 45, 0.08) !important;
    background: rgba(255, 255, 255, 0.82) !important;
    color: var(--ielts-ink) !important;
}

/* Distinct app masthead: replaces the old large-title + white-pill navigation. */
.container.hero-shell {
    width: min(1480px, calc(100vw - 48px));
    padding-top: 30px;
}

.hero-header {
    position: relative;
    min-height: 158px;
    margin: 0 !important;
    padding: 28px 34px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 10px 10px 0 0;
    background:
        linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(18, 72, 68, 0.96) 58%, rgba(12, 18, 28, 0.98)),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 72px);
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.18);
    overflow: hidden;
}

.hero-header::before {
    content: "IELTS PRACTICE DESK";
    position: absolute;
    top: 26px;
    right: 32px;
    padding: 7px 12px;
    border: 1px solid rgba(164, 231, 221, 0.24);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(216, 255, 248, 0.76);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.hero-header::after {
    content: "";
    position: absolute;
    right: -96px;
    bottom: -110px;
    width: 420px;
    height: 260px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(80, 214, 194, 0.32), transparent 66%);
    pointer-events: none;
}

.hero-header h1 {
    position: relative;
    z-index: 1;
    display: grid !important;
    gap: 14px;
    width: min(780px, 100%) !important;
    max-width: none !important;
    margin: 0 !important;
    color: #f8fafc !important;
    font-size: clamp(34px, 4.4vw, 68px) !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    line-height: 0.98 !important;
}

.hero-header h1::before {
    content: "READING / LISTENING / VOCAB";
    color: #79d8ca;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.16em;
}

.hero-header h1::after {
    content: "题库、练习记录和复盘工具集中在一个工作台。";
    max-width: 560px;
    color: rgba(226, 232, 240, 0.70);
    font-size: 15px;
    font-weight: 550;
    line-height: 1.55;
}

.main-nav.hero-nav {
    position: relative !important;
    top: auto !important;
    z-index: 22;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0 !important;
    margin: 0 0 38px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 0 10px 10px !important;
    background: #0b1220 !important;
    box-shadow: 0 22px 54px rgba(15, 23, 42, 0.20) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: hidden;
}

.nav-btn.hero-nav__btn {
    position: relative;
    width: 100% !important;
    max-width: none !important;
    min-height: 62px !important;
    padding: 0 18px !important;
    border: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: rgba(226, 232, 240, 0.68) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.nav-btn.hero-nav__btn:last-child {
    border-right: 0 !important;
}

.nav-btn.hero-nav__btn::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background: linear-gradient(180deg, #63e6d1, #1f7a72);
    opacity: 0;
    transition: width 0.18s ease, opacity 0.18s ease;
}

.nav-btn.hero-nav__btn:hover,
.nav-btn.hero-nav__btn:focus-visible {
    transform: none !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
}

.nav-btn.hero-nav__btn.active {
    background:
        linear-gradient(180deg, rgba(31, 122, 114, 0.28), rgba(31, 122, 114, 0.12)),
        #101b2c !important;
    color: #ecfffb !important;
    box-shadow: inset 0 -3px 0 #63e6d1 !important;
}

.nav-btn.hero-nav__btn.active::before {
    width: 5px;
    opacity: 1;
}

.nav-btn.hero-nav__btn.active::after {
    content: "";
    position: absolute;
    inset: 12px 16px auto auto;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #63e6d1;
    box-shadow: 0 0 18px rgba(99, 230, 209, 0.80);
}

@media (max-width: 900px) {
    .container.hero-shell {
        width: min(100vw - 22px, 720px);
        padding-top: 22px;
    }

    .hero-header {
        min-height: 150px;
        padding: 24px 22px;
    }

    .hero-header::before {
        position: static;
        display: inline-flex;
        width: max-content;
        margin-bottom: 18px;
    }

    .hero-header h1 {
        font-size: clamp(34px, 10vw, 48px) !important;
    }

    .hero-header h1::after {
        font-size: 14px;
    }

    .main-nav.hero-nav {
        grid-template-columns: 1fr;
    }

    .nav-btn.hero-nav__btn {
        justify-content: flex-start !important;
        min-height: 54px !important;
        border-right: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
}

/* Premium titanium workspace shell: light Apple-style panel + vertical dock. */
:root {
    --premium-ink: #14171d;
    --premium-muted: #747985;
    --premium-hairline: rgba(20, 23, 29, 0.10);
    --premium-glass: rgba(255, 255, 255, 0.70);
    --premium-glass-strong: rgba(255, 255, 255, 0.88);
    --premium-accent: #b59b63;
    --premium-accent-soft: rgba(181, 155, 99, 0.16);
    --premium-slate: #242933;
    --premium-shadow: 0 28px 82px rgba(30, 35, 44, 0.12);
}

html,
html body.hero-body,
html body.theme-blue,
html body.bloom-dark-mode,
html body.theme-blue.blue-dark-mode {
    background:
        radial-gradient(900px 520px at 12% 8%, rgba(255, 255, 255, 0.98), transparent 58%),
        radial-gradient(920px 620px at 88% 0%, rgba(219, 224, 228, 0.62), transparent 62%),
        linear-gradient(145deg, #f4f3ef 0%, #eef1f0 45%, #f8f7f3 100%) !important;
}

.container.hero-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(310px, 380px);
    gap: 18px 20px;
    width: min(1480px, calc(100vw - 56px));
    padding-top: 28px;
}

.hero-header {
    grid-column: 1;
    min-height: 246px;
    margin: 0 !important;
    padding: 34px 38px;
    border: 1px solid rgba(255, 255, 255, 0.86);
    border-radius: 34px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.90), rgba(243, 244, 242, 0.74) 54%, rgba(232, 234, 231, 0.80)),
        linear-gradient(90deg, rgba(255, 255, 255, 0.42), transparent 38%);
    box-shadow: var(--premium-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.92);
    overflow: hidden;
    backdrop-filter: blur(28px) saturate(165%);
    -webkit-backdrop-filter: blur(28px) saturate(165%);
}

.hero-header::before {
    content: "IELTS STUDIO";
    position: static;
    display: inline-flex;
    width: max-content;
    margin-bottom: 28px;
    padding: 8px 13px;
    border: 1px solid rgba(20, 23, 29, 0.10);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.62);
    color: #5f6570;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.16em;
}

.hero-header::after {
    content: "";
    position: absolute;
    right: -120px;
    bottom: -150px;
    width: 520px;
    height: 360px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 40% 38%, rgba(181, 155, 99, 0.20), transparent 58%),
        radial-gradient(circle at 68% 62%, rgba(120, 128, 140, 0.18), transparent 68%);
    pointer-events: none;
}

.hero-header h1 {
    position: relative;
    z-index: 1;
    display: grid !important;
    gap: 12px;
    width: min(780px, 100%) !important;
    max-width: none !important;
    margin: 0 !important;
    color: var(--premium-ink) !important;
    font-size: clamp(44px, 5.2vw, 84px) !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    line-height: 0.98 !important;
    text-shadow: none !important;
}

.hero-header h1::before {
    content: "Reading  Listening  Review";
    color: var(--premium-accent);
    font-size: 13px;
    font-weight: 850;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.hero-header h1::after {
    content: "把题库、练习记录和复盘节奏放进一个安静的学习工作台。";
    max-width: 560px;
    color: var(--premium-muted);
    font-size: 16px;
    font-weight: 560;
    line-height: 1.55;
}

.main-nav.hero-nav {
    grid-column: 2;
    position: relative !important;
    top: auto !important;
    align-self: stretch;
    z-index: 22;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    min-height: 246px;
    margin: 0 !important;
    padding: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.86) !important;
    border-radius: 34px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(244, 245, 243, 0.64)) !important;
    box-shadow: var(--premium-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(28px) saturate(165%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(165%) !important;
    overflow: visible;
}

.nav-btn.hero-nav__btn {
    position: relative;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 42px !important;
    padding: 0 16px !important;
    border: 1px solid rgba(20, 23, 29, 0.07) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.54) !important;
    color: #5d6470 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
    font-size: 14px !important;
    font-weight: 760 !important;
    letter-spacing: 0 !important;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.nav-btn.hero-nav__btn::before {
    content: "";
    position: absolute;
    inset: 9px auto 9px 9px;
    width: 3px;
    border-radius: 999px;
    background: transparent;
    opacity: 1;
    transition: background 0.18s ease;
}

.nav-btn.hero-nav__btn:hover,
.nav-btn.hero-nav__btn:focus-visible {
    transform: translateY(-1px) !important;
    background: rgba(255, 255, 255, 0.82) !important;
    color: var(--premium-ink) !important;
    box-shadow: 0 10px 26px rgba(30, 35, 44, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

.nav-btn.hero-nav__btn.active {
    border-color: rgba(36, 41, 51, 0.18) !important;
    background:
        linear-gradient(135deg, rgba(36, 41, 51, 0.96), rgba(70, 74, 82, 0.92)) !important;
    color: #fffdf8 !important;
    box-shadow: 0 16px 34px rgba(36, 41, 51, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

.nav-btn.hero-nav__btn.active::before {
    background: var(--premium-accent);
}

.nav-btn.hero-nav__btn.active::after {
    content: "";
    position: absolute;
    inset: 50% 14px auto auto;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--premium-accent);
    box-shadow: 0 0 18px rgba(181, 155, 99, 0.62);
    transform: translateY(-50%);
}

#practice-view {
    grid-column: 1 / -1;
    margin-top: 18px;
    padding: 36px !important;
    border-radius: 34px !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.80), rgba(247, 247, 244, 0.68)) !important;
    border-color: rgba(255, 255, 255, 0.84) !important;
    box-shadow: 0 30px 92px rgba(30, 35, 44, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
}

#practice-view > .hero-panel__header:first-child {
    grid-template-columns: minmax(0, 1fr) minmax(260px, auto);
    align-items: center;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(20, 23, 29, 0.08) !important;
}

.practice-dashboard-subtitle {
    color: var(--premium-muted);
}

.practice-quick-action {
    min-height: 42px;
    border: 1px solid rgba(20, 23, 29, 0.09) !important;
    background: rgba(255, 255, 255, 0.74) !important;
    color: var(--premium-ink) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

.practice-dashboard-actions .practice-quick-action:last-child,
.practice-quick-action.active {
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--premium-slate), #4b4f57) !important;
    color: #fffdf8 !important;
    box-shadow: 0 15px 32px rgba(36, 41, 51, 0.18) !important;
}

.practice-stats.hero-grid {
    grid-template-columns: 1.15fr 1.15fr 0.9fr 0.9fr;
    gap: 14px !important;
}

.practice-stats .hero-card,
.practice-stats .hero-card--stat {
    min-height: 134px;
    padding: 20px 22px !important;
    border-color: rgba(20, 23, 29, 0.07) !important;
    border-radius: 24px !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(246, 246, 243, 0.72)) !important;
    box-shadow: 0 18px 44px rgba(30, 35, 44, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

.practice-stats .hero-card__label {
    color: #656b76 !important;
}

.practice-stats .hero-card__value {
    color: var(--premium-ink) !important;
}

.practice-stats .hero-card__meta {
    color: #8a909a !important;
}

@media (max-width: 1100px) {
    .container.hero-shell {
        grid-template-columns: 1fr;
    }

    .hero-header,
    .main-nav.hero-nav,
    #practice-view {
        grid-column: 1;
    }

    .main-nav.hero-nav {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        min-height: auto;
    }

    .nav-btn.hero-nav__btn {
        justify-content: center !important;
        min-height: 54px !important;
    }

    .practice-stats.hero-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .container.hero-shell {
        width: min(100vw - 22px, 720px);
        padding-top: 22px;
    }

    .hero-header {
        min-height: 218px;
        padding: 26px 24px;
        border-radius: 28px;
    }

    .hero-header h1 {
        font-size: clamp(38px, 12vw, 54px) !important;
    }

    .main-nav.hero-nav {
        grid-template-columns: 1fr !important;
        border-radius: 28px !important;
    }

    .nav-btn.hero-nav__btn {
        justify-content: flex-start !important;
    }

    #practice-view {
        padding: 24px 18px !important;
        border-radius: 28px !important;
    }

    #practice-view > .hero-panel__header:first-child,
    .practice-stats.hero-grid {
        grid-template-columns: 1fr;
    }
}

/* Minimal Apple desk final pass: compact layout, cleaner hierarchy, richer button motion. */
:root {
    --desk-ink: #111318;
    --desk-muted: #69717d;
    --desk-soft: rgba(255, 255, 255, 0.72);
    --desk-card: rgba(255, 255, 255, 0.84);
    --desk-line: rgba(17, 19, 24, 0.09);
    --desk-blue: #0a84ff;
    --desk-mint: #62b8a5;
    --desk-sand: #d7c18a;
    --desk-shadow: 0 24px 70px rgba(32, 37, 46, 0.10);
    --desk-ease: cubic-bezier(.2, .8, .2, 1);
}

html,
html body.hero-body,
html body.theme-blue,
html body.bloom-dark-mode,
html body.theme-blue.blue-dark-mode {
    background:
        radial-gradient(920px 520px at 24% -12%, rgba(255, 255, 255, 0.96), transparent 64%),
        radial-gradient(760px 460px at 84% 0%, rgba(210, 219, 217, 0.50), transparent 68%),
        linear-gradient(145deg, #f7f8f5 0%, #eef2f0 54%, #faf9f4 100%) !important;
}

.container.hero-shell {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    width: min(1280px, calc(100vw - 48px)) !important;
    margin: 0 auto !important;
    padding-top: 42px !important;
}

.container.hero-shell > .view,
.hero-header,
.main-nav.hero-nav {
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0;
}

.hero-header {
    min-height: 148px !important;
    padding: 28px 32px !important;
    border: 1px solid rgba(255, 255, 255, 0.88) !important;
    border-radius: 28px !important;
    background:
        radial-gradient(560px 220px at 88% 42%, rgba(215, 193, 138, 0.18), transparent 68%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(244, 246, 243, 0.76)) !important;
    box-shadow: var(--desk-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(24px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
}

.hero-header::before {
    content: "IELTS STUDIO" !important;
    position: static !important;
    display: inline-flex !important;
    width: max-content !important;
    margin: 0 0 16px !important;
    padding: 7px 12px !important;
    border: 1px solid var(--desk-line) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.66) !important;
    color: #5d6571 !important;
    box-shadow: none !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    letter-spacing: 0.11em !important;
}

.hero-header::after {
    width: 280px !important;
    height: 190px !important;
    right: -70px !important;
    bottom: -90px !important;
    background: radial-gradient(circle, rgba(10, 132, 255, 0.10), transparent 66%) !important;
}

.hero-header h1 {
    width: min(760px, 100%) !important;
    gap: 8px !important;
    color: var(--desk-ink) !important;
    font-size: clamp(42px, 4.8vw, 64px) !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
}

.hero-header h1::before {
    content: "Reading  Listening  Review" !important;
    color: var(--desk-blue) !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    letter-spacing: 0.08em !important;
}

.hero-header h1::after {
    content: "题库、练习记录和复盘工具集中在一个安静的学习工作台。" !important;
    max-width: 520px !important;
    color: var(--desk-muted) !important;
    font-size: 15px !important;
    font-weight: 560 !important;
    line-height: 1.55 !important;
}

.main-nav.hero-nav {
    position: relative !important;
    top: auto !important;
    z-index: 22 !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 7px !important;
    min-height: auto !important;
    margin: 0 0 10px !important;
    padding: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.82) !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, 0.58) !important;
    box-shadow: 0 18px 54px rgba(32, 37, 46, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
    overflow: visible !important;
    backdrop-filter: blur(22px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(150%) !important;
}

.nav-btn.hero-nav__btn,
.practice-quick-action,
.practice-history-actions .btn,
#record-type-filter-buttons .shui-segmented-btn {
    transform: translateZ(0);
    transition:
        transform 0.22s var(--desk-ease),
        box-shadow 0.22s var(--desk-ease),
        background 0.22s var(--desk-ease),
        border-color 0.22s var(--desk-ease),
        color 0.22s var(--desk-ease) !important;
}

.nav-btn.hero-nav__btn {
    justify-content: center !important;
    width: 100% !important;
    min-height: 50px !important;
    padding: 0 14px !important;
    border: 1px solid transparent !important;
    border-radius: 18px !important;
    background: transparent !important;
    color: #596272 !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    overflow: hidden;
}

.nav-btn.hero-nav__btn::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    border-radius: inherit !important;
    background:
        linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.72) 42%, transparent 70%),
        rgba(255, 255, 255, 0.70) !important;
    opacity: 0 !important;
    transform: translateX(-42%) !important;
    transition: opacity 0.22s var(--desk-ease), transform 0.42s var(--desk-ease) !important;
}

.nav-btn.hero-nav__btn::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: 7px !important;
    top: auto !important;
    width: 18px !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: var(--desk-blue) !important;
    box-shadow: 0 4px 14px rgba(10, 132, 255, 0.28) !important;
    opacity: 0 !important;
    transform: translateX(-50%) scaleX(0.6) !important;
}

.nav-btn.hero-nav__btn:hover,
.nav-btn.hero-nav__btn:focus-visible {
    transform: translateY(-2px) !important;
    border-color: rgba(10, 132, 255, 0.10) !important;
    background: rgba(255, 255, 255, 0.72) !important;
    color: var(--desk-ink) !important;
    box-shadow: 0 12px 26px rgba(32, 37, 46, 0.10) !important;
}

.nav-btn.hero-nav__btn:hover::before,
.nav-btn.hero-nav__btn:focus-visible::before {
    opacity: 1 !important;
    transform: translateX(38%) !important;
}

.nav-btn.hero-nav__btn:active,
.practice-quick-action:active,
.practice-history-actions .btn:active,
#record-type-filter-buttons .shui-segmented-btn:active {
    transform: scale(0.97) !important;
}

.nav-btn.hero-nav__btn.active {
    border-color: rgba(10, 132, 255, 0.14) !important;
    background: rgba(255, 255, 255, 0.92) !important;
    color: var(--desk-ink) !important;
    box-shadow: 0 16px 34px rgba(32, 37, 46, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

.nav-btn.hero-nav__btn.active::before {
    opacity: 0 !important;
}

.nav-btn.hero-nav__btn.active::after {
    opacity: 1 !important;
    transform: translateX(-50%) scaleX(1) !important;
}

#overview-view,
#browse-view,
#practice-view,
#more-view,
#settings-view {
    margin-top: 8px !important;
}

#practice-view {
    gap: 16px !important;
    padding: 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.84) !important;
    border-radius: 28px !important;
    background: rgba(255, 255, 255, 0.56) !important;
    box-shadow: var(--desk-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}

#practice-view.view.active {
    display: grid !important;
}

#practice-view.view:not(.active) {
    display: none !important;
}

#practice-view > .hero-panel__header:first-child {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 18px !important;
    align-items: center !important;
    min-height: auto !important;
    padding: 24px 26px !important;
    border: 1px solid var(--desk-line) !important;
    border-radius: 22px !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.90), rgba(247, 248, 244, 0.80)) !important;
    box-shadow: 0 14px 42px rgba(32, 37, 46, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

.practice-title-block {
    gap: 8px !important;
}

.practice-title-block::before {
    content: "Review" !important;
    width: max-content !important;
    padding: 6px 10px !important;
    border: 1px solid rgba(10, 132, 255, 0.13) !important;
    border-radius: 999px !important;
    background: rgba(10, 132, 255, 0.08) !important;
    color: #1265bd !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    letter-spacing: 0.04em !important;
}

#practice-view > .hero-panel__header:first-child .hero-panel__title {
    color: var(--desk-ink) !important;
    font-size: clamp(28px, 3vw, 38px) !important;
    line-height: 1.1 !important;
}

.practice-dashboard-subtitle {
    max-width: 540px !important;
    color: var(--desk-muted) !important;
    font-size: 14px !important;
}

.practice-dashboard-actions {
    display: flex !important;
    gap: 8px !important;
    justify-content: flex-end !important;
    padding: 6px !important;
    border: 1px solid var(--desk-line);
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.62) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

.practice-quick-action {
    min-height: 40px !important;
    padding: 0 16px !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--desk-ink) !important;
    box-shadow: none !important;
}

.practice-quick-action:hover,
.practice-history-actions .btn:hover,
#record-type-filter-buttons .shui-segmented-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 26px rgba(32, 37, 46, 0.10) !important;
}

.practice-dashboard-actions .practice-quick-action:last-child,
.practice-quick-action.active {
    background: linear-gradient(135deg, #111318, #3a414d) !important;
    color: #ffffff !important;
}

.practice-stats.hero-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 0 !important;
}

.practice-stats .hero-card,
.practice-stats .hero-card--stat {
    min-height: 126px !important;
    padding: 18px 20px !important;
    border: 1px solid var(--desk-line) !important;
    border-radius: 20px !important;
    background: var(--desk-card) !important;
    box-shadow: 0 12px 32px rgba(32, 37, 46, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
}

.practice-stats .hero-card::before {
    height: 3px !important;
    background: linear-gradient(90deg, var(--desk-blue), var(--desk-mint)) !important;
    opacity: 0.75 !important;
}

.practice-stats .hero-card::after {
    display: none !important;
}

.practice-stats .hero-card__label {
    color: #68717e !important;
    font-size: 13px !important;
    font-weight: 820 !important;
}

.practice-stats .hero-card__value {
    margin: 18px 0 10px !important;
    color: var(--desk-ink) !important;
    font-size: clamp(36px, 3.2vw, 56px) !important;
    line-height: 0.95 !important;
}

.practice-stats .hero-card__meta {
    color: #8a929c !important;
    font-size: 13px !important;
}

.practice-history.hero-panel {
    gap: 14px !important;
    margin: 0 !important;
    padding: 18px !important;
    border: 1px solid var(--desk-line) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.76) !important;
    box-shadow: 0 14px 42px rgba(32, 37, 46, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.90) !important;
}

.practice-history > .hero-panel__header {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 14px !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

.practice-history-heading {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
}

.practice-history-heading .hero-panel__title {
    margin: 0 !important;
    color: var(--desk-ink) !important;
    font-size: 22px !important;
    white-space: nowrap;
}

#record-type-filter-buttons.shui-segmented-control {
    padding: 4px !important;
    border: 1px solid var(--desk-line) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.64) !important;
    box-shadow: none !important;
}

#record-type-filter-buttons .shui-segmented-btn {
    min-width: 64px !important;
    min-height: 34px !important;
    border-radius: 999px !important;
    color: #596272 !important;
    font-weight: 820 !important;
}

#record-type-filter-buttons .shui-segmented-btn.active,
#record-type-filter-buttons .shui-segmented-btn[aria-pressed="true"] {
    background: #ffffff !important;
    color: var(--desk-ink) !important;
    box-shadow: 0 10px 24px rgba(32, 37, 46, 0.10) !important;
}

.practice-history-actions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

.practice-history-actions .btn {
    min-height: 38px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    font-weight: 820 !important;
}

#practice-view .practice-history-actions .btn-secondary,
#practice-view .practice-history-actions .hero-btn--ghost {
    border: 1px solid var(--desk-line) !important;
    background: rgba(255, 255, 255, 0.70) !important;
    color: var(--desk-ink) !important;
}

#practice-view .practice-history-actions .btn-info {
    border-color: transparent !important;
    background: linear-gradient(135deg, #111318, #39404a) !important;
    color: #ffffff !important;
}

#practice-view .practice-history-actions .btn-warning,
#practice-view .practice-history-actions .hero-btn--warn {
    border-color: transparent !important;
    background: linear-gradient(135deg, #ead79f, #d4b96f) !important;
    color: #211b11 !important;
}

.practice-history-list,
#practice-history-list,
#history-list {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 12px !important;
    padding: 0 !important;
    max-height: min(54vh, 580px) !important;
}

#history-list > div[style] {
    min-height: 230px !important;
    border: 1px dashed rgba(17, 19, 24, 0.14) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.58) !important;
}

.history-item {
    border-radius: 16px !important;
    transition: transform 0.22s var(--desk-ease), box-shadow 0.22s var(--desk-ease), border-color 0.22s var(--desk-ease) !important;
}

.history-item:hover {
    transform: translateY(-2px);
    border-color: rgba(10, 132, 255, 0.16) !important;
}

@media (max-width: 900px) {
    .container.hero-shell {
        width: min(100vw - 22px, 720px) !important;
        padding-top: 24px !important;
    }

    .hero-header {
        min-height: 178px !important;
        padding: 24px 22px !important;
        border-radius: 24px !important;
    }

    .hero-header h1 {
        font-size: clamp(38px, 11vw, 52px) !important;
    }

    .main-nav.hero-nav,
    #practice-view > .hero-panel__header:first-child,
    .practice-history > .hero-panel__header,
    .practice-stats.hero-grid {
        grid-template-columns: 1fr !important;
    }

    .nav-btn.hero-nav__btn {
        justify-content: flex-start !important;
    }

    #practice-view {
        padding: 14px !important;
        border-radius: 24px !important;
    }

    .practice-dashboard-actions,
    .practice-history-actions {
        justify-content: flex-start !important;
        width: 100%;
    }

    .practice-history-heading {
        align-items: flex-start !important;
        flex-direction: column !important;
    }
}

/* Final contrast guard for the weak-review toggle. Keep this at file end. */
#practice-view #weak-review-btn.practice-quick-action {
    background: rgba(255, 255, 255, 0.84) !important;
    color: var(--desk-ink) !important;
}

#practice-view #weak-review-btn.practice-quick-action:hover,
#practice-view #weak-review-btn.practice-quick-action:focus-visible {
    background: rgba(255, 255, 255, 0.96) !important;
    color: var(--desk-ink) !important;
}

#practice-view #weak-review-btn.practice-quick-action.active,
#practice-view #weak-review-btn.practice-quick-action[aria-pressed="true"] {
    border-color: transparent !important;
    background: linear-gradient(135deg, #0a84ff, #0066d6) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 30px rgba(10, 132, 255, 0.24) !important;
}

#practice-view #weak-review-btn.practice-quick-action.active:hover,
#practice-view #weak-review-btn.practice-quick-action[aria-pressed="true"]:hover,
#practice-view #weak-review-btn.practice-quick-action.active:focus-visible,
#practice-view #weak-review-btn.practice-quick-action[aria-pressed="true"]:focus-visible {
    color: #ffffff !important;
}
.practice-stats--split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 26px 0 28px;
}

.practice-skill-panel {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(20, 26, 36, 0.09);
    border-radius: 18px;
    background:
        linear-gradient(140deg, rgba(255, 255, 255, 0.86), rgba(247, 250, 250, 0.64)),
        radial-gradient(circle at 0% 0%, rgba(64, 156, 255, 0.10), transparent 30%);
    box-shadow: 0 18px 42px rgba(30, 41, 59, 0.07);
    padding: 18px;
    transition: transform 180ms var(--desk-ease), box-shadow 180ms var(--desk-ease), border-color 180ms var(--desk-ease);
}

.practice-skill-panel:hover {
    transform: translateY(-2px);
    border-color: rgba(10, 132, 255, 0.18);
    box-shadow: 0 24px 54px rgba(30, 41, 59, 0.10);
}

.practice-skill-panel[data-skill="listening"] {
    background:
        linear-gradient(140deg, rgba(255, 255, 255, 0.88), rgba(249, 250, 248, 0.66)),
        radial-gradient(circle at 0% 0%, rgba(197, 159, 73, 0.12), transparent 32%);
}

.practice-skill-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.practice-skill-panel__header h3 {
    margin: 0;
    color: #121821;
    font-size: 20px;
    line-height: 1.15;
    letter-spacing: 0;
}

.practice-skill-panel__eyebrow {
    color: #667085;
    font-size: 12px;
    font-weight: 760;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.practice-skill-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.practice-metric {
    min-width: 0;
    min-height: 96px;
    border: 1px solid rgba(20, 26, 36, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.66);
    padding: 14px 13px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.70);
    transition: background-color 180ms var(--desk-ease), transform 180ms var(--desk-ease), border-color 180ms var(--desk-ease);
}

.practice-metric:hover {
    border-color: rgba(10, 132, 255, 0.14);
    background: rgba(255, 255, 255, 0.90);
    transform: translateY(-1px);
}

.practice-metric .hero-card__label {
    color: #667085;
    font-size: 12px;
    font-weight: 720;
    letter-spacing: 0;
}

.practice-metric .hero-card__value {
    margin-top: 12px;
    color: #10141d;
    font-size: clamp(24px, 2.2vw, 32px);
    line-height: 0.98;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}

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

@media (max-width: 720px) {
    .practice-skill-metrics {
        grid-template-columns: 1fr;
    }

    .practice-skill-panel {
        padding: 15px;
    }
}

.cambridge-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    border: 1px solid rgba(20, 26, 36, 0.08);
    border-radius: 24px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(247, 250, 250, 0.62)),
        radial-gradient(circle at 100% 0%, rgba(10, 132, 255, 0.10), transparent 34%);
    padding: 28px;
    box-shadow: 0 18px 50px rgba(30, 41, 59, 0.08);
}

.cambridge-kicker,
.cambridge-card__eyebrow {
    display: inline-flex;
    color: #667085;
    font-size: 12px;
    font-weight: 780;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cambridge-subtitle {
    max-width: 560px;
    margin: 10px 0 0;
    color: #667085;
    font-weight: 650;
}

.cambridge-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.cambridge-summary span {
    border: 1px solid rgba(20, 26, 36, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    padding: 9px 12px;
    color: #667085;
    font-weight: 700;
}

.cambridge-summary strong {
    color: #10141d;
}

.cambridge-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
    gap: 12px;
    margin: 18px 0;
}

.cambridge-book-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px;
}

.cambridge-pill {
    flex: 0 0 auto;
    border: 1px solid rgba(20, 26, 36, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.70);
    color: #344054;
    padding: 10px 14px;
    font-weight: 760;
    transition: transform 180ms var(--desk-ease), background-color 180ms var(--desk-ease), color 180ms var(--desk-ease);
}

.cambridge-pill:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.94);
}

.cambridge-pill.active {
    border-color: transparent;
    background: #10141d;
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(16, 20, 29, 0.16);
}

.cambridge-search {
    width: 100%;
    min-height: 46px;
    border: 1px solid rgba(20, 26, 36, 0.09);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    color: #10141d;
    padding: 0 16px;
    font-weight: 700;
    outline: none;
}

.cambridge-search:focus {
    border-color: rgba(10, 132, 255, 0.35);
    box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.10);
}

.cambridge-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 16px;
    align-items: start;
}

.cambridge-books {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.cambridge-card,
.cambridge-player {
    border: 1px solid rgba(20, 26, 36, 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.74);
    box-shadow: 0 18px 44px rgba(30, 41, 59, 0.07);
}

.cambridge-card {
    padding: 18px;
}

.cambridge-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.cambridge-card h3 {
    margin: 5px 0 0;
    color: #10141d;
    font-size: 24px;
    line-height: 1.1;
}

.cambridge-card__count {
    flex: 0 0 auto;
    border-radius: 999px;
    background: rgba(16, 20, 29, 0.06);
    color: #344054;
    padding: 8px 10px;
    font-weight: 760;
}

.cambridge-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.cambridge-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    border: 1px solid rgba(20, 26, 36, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: #10141d;
    padding: 0 13px;
    font-weight: 780;
    text-decoration: none;
    transition: transform 180ms var(--desk-ease), background-color 180ms var(--desk-ease);
}

.cambridge-action.primary {
    border-color: transparent;
    background: #10141d;
    color: #ffffff;
}

.cambridge-action:hover,
.cambridge-section:hover {
    transform: translateY(-1px);
}

.cambridge-tests {
    display: grid;
    gap: 10px;
}

.cambridge-test {
    display: grid;
    gap: 10px;
    border: 1px solid rgba(20, 26, 36, 0.07);
    border-radius: 14px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.6);
}

.cambridge-test__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.cambridge-test__title {
    color: #475467;
    font-weight: 800;
}

.cambridge-test__summary {
    margin-top: 3px;
    color: #667085;
    font-size: 12px;
    font-weight: 650;
}

.cambridge-sections {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.cambridge-section {
    min-width: 0;
    border: 1px solid rgba(20, 26, 36, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
    color: #10141d;
    padding: 9px 8px;
    font-weight: 800;
    transition: transform 180ms var(--desk-ease), border-color 180ms var(--desk-ease), background-color 180ms var(--desk-ease);
}

.cambridge-section:focus-visible {
    outline: 3px solid rgba(10, 132, 255, 0.20);
    outline-offset: 2px;
}

.cambridge-section small {
    display: block;
    margin-top: 3px;
    color: #667085;
    font-size: 10px;
    font-weight: 700;
}

.cambridge-action.compact {
    min-height: 32px;
    padding: 0 11px;
    font-size: 12px;
}

.cambridge-action.tiny {
    min-height: 28px;
    padding: 0 10px;
    font-size: 12px;
}

.cambridge-player {
    position: sticky;
    top: 18px;
    padding: 18px;
}

.cambridge-player__label {
    color: #667085;
    font-size: 12px;
    font-weight: 780;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cambridge-player__title {
    margin: 8px 0 14px;
    color: #10141d;
    font-size: 20px;
    font-weight: 820;
    line-height: 1.2;
}

.cambridge-player audio {
    width: 100%;
}

.cambridge-muted,
.cambridge-empty-line,
.cambridge-empty {
    color: #667085;
    font-weight: 700;
}

.cambridge-empty {
    grid-column: 1 / -1;
    border: 1px dashed rgba(20, 26, 36, 0.14);
    border-radius: 18px;
    padding: 30px;
    text-align: center;
}

.cambridge-workspace {
    margin: 8px 0 18px;
    border: 1px solid rgba(20, 26, 36, 0.1);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 20px 48px rgba(30, 41, 59, 0.08);
    padding: 16px;
}

.cambridge-workspace__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

.cambridge-workspace__kicker {
    color: #667085;
    font-size: 12px;
    font-weight: 780;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cambridge-workspace__header h3 {
    margin: 4px 0 0;
    color: #10141d;
    font-size: 24px;
    line-height: 1.15;
}

.cambridge-workspace__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cambridge-workspace__body {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr);
    gap: 12px;
    align-items: start;
}

.cambridge-workspace__pdf {
    min-height: 680px;
    border: 1px solid rgba(20, 26, 36, 0.1);
    border-radius: 14px;
    overflow: hidden;
    background: #ffffff;
}

.cambridge-workspace__pdf iframe {
    width: 100%;
    height: 680px;
    border: 0;
}

.cambridge-workspace__side {
    display: grid;
    gap: 12px;
}

.cambridge-workspace__player,
.cambridge-workspace__answers {
    border: 1px solid rgba(20, 26, 36, 0.1);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
    padding: 12px;
}

.cambridge-workspace-audio-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 10px;
}

.cambridge-section.workspace {
    text-align: left;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.2;
}

.cambridge-workspace__player audio {
    width: 100%;
}

.cambridge-workspace__answers-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    color: #344054;
    font-weight: 760;
}

.cambridge-workspace-answer-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.cambridge-answer-cell {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(20, 26, 36, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.85);
    padding: 5px 7px;
}

.cambridge-answer-cell span {
    color: #667085;
    font-size: 12px;
    font-weight: 780;
}

.cambridge-answer-cell input {
    width: 100%;
    border: none;
    border-radius: 7px;
    min-height: 28px;
    padding: 0 7px;
    background: rgba(16, 24, 40, 0.04);
    color: #10141d;
    font-size: 13px;
    font-weight: 700;
    outline: none;
}

.cambridge-answer-cell input:focus {
    box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.18);
    background: rgba(10, 132, 255, 0.06);
}

@media (max-width: 1180px) {
    .cambridge-layout,
    .cambridge-toolbar,
    .cambridge-hero {
        grid-template-columns: 1fr;
    }

    .cambridge-layout {
        display: block;
    }

    .cambridge-player {
        position: static;
        margin-top: 14px;
    }

    .cambridge-workspace__body {
        grid-template-columns: 1fr;
    }

    .cambridge-workspace__pdf,
    .cambridge-workspace__pdf iframe {
        min-height: 560px;
        height: 560px;
    }
}

@media (max-width: 860px) {
    .cambridge-books {
        grid-template-columns: 1fr;
    }

    .cambridge-hero {
        display: block;
        padding: 20px;
    }

    .cambridge-summary {
        justify-content: flex-start;
        margin-top: 16px;
    }

    .cambridge-workspace__header {
        display: block;
    }

    .cambridge-workspace__actions {
        margin-top: 10px;
    }

    .cambridge-workspace-audio-list,
    .cambridge-workspace-answer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cambridge-action {
        min-height: 36px;
    }
}

/* Black-and-white vocabulary review UI. Scoped to the vocab page only. */
html:has(#vocab-view.active),
body:has(#vocab-view.active),
body.hero-body:has(#vocab-view.active),
body.theme-blue:has(#vocab-view.active),
.container.hero-shell:has(#vocab-view.active) {
    background: #ffffff !important;
    background-image: none !important;
    color: #000000 !important;
}

body:has(#vocab-view.active)::before,
body:has(#vocab-view.active)::after,
body.hero-body:has(#vocab-view.active)::before,
body.hero-body:has(#vocab-view.active)::after,
body.theme-blue:has(#vocab-view.active)::before,
body.theme-blue:has(#vocab-view.active)::after {
    display: none !important;
}

body:has(#vocab-view.active) .main-nav.hero-nav,
body:has(#vocab-view.active) .nav-btn.hero-nav__btn,
body:has(#vocab-view.active) .nav-btn.hero-nav__btn.active,
body:has(#vocab-view.active) .hero-panel,
body:has(#vocab-view.active) .view.hero-panel {
    border-color: #000000 !important;
    background: #ffffff !important;
    background-image: none !important;
    color: #000000 !important;
    box-shadow: none !important;
}

body:has(#vocab-view.active) .nav-btn.hero-nav__btn.active,
body:has(#vocab-view.active) .nav-btn.hero-nav__btn:hover,
body:has(#vocab-view.active) .nav-btn.hero-nav__btn:focus-visible {
    background: #000000 !important;
    color: #ffffff !important;
}

#vocab-view,
#vocab-view.active,
#vocab-view .vocab-view-shell,
#vocab-view .vocab-body,
#vocab-view .vocab-body__container,
#vocab-view .vocab-body__grid {
    background: #ffffff !important;
    color: #000000 !important;
    box-shadow: none !important;
}

#vocab-view .vocab-view-shell {
    min-height: 100vh;
}

#vocab-view *,
#vocab-view *::before,
#vocab-view *::after {
    border-color: #000000 !important;
    color: #000000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

#vocab-view .vocab-topbar,
#vocab-view .vocab-topbar__container,
#vocab-view .vocab-menu,
#vocab-view .vocab-menu__panel,
#vocab-view .vocab-due-banner,
#vocab-view .vocab-due-banner__container,
#vocab-view .vocab-session-card,
#vocab-view .vocab-session-card > .vocab-card,
#vocab-view .vocab-card,
#vocab-view .vocab-card::before,
#vocab-view .vocab-side-panel,
#vocab-view .vocab-side-panel__surface,
#vocab-view .vocab-side-panel__toggle,
#vocab-view .vocab-settings-modal__dialog,
#vocab-view .vocab-settings-form__group input,
#vocab-view .vocab-side-panel__section textarea,
#vocab-view .vocab-feedback__details,
#vocab-view .vocab-feedback__details > div,
#vocab-view .vocab-card__meaning,
#vocab-view .vocab-card__input-block,
#vocab-view .chip,
#vocab-view .vocab-list-switcher,
#vocab-view .switcher-dropdown,
#vocab-view .switcher-btn {
    background: #ffffff !important;
    background-image: none !important;
}

#vocab-view .vocab-topbar {
    border-bottom: 1px solid #000000 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#vocab-view .vocab-progress__track {
    background: #ffffff !important;
    border: 1px solid #000000 !important;
}

#vocab-view .vocab-progress__fill {
    background: #000000 !important;
}

#vocab-view .btn,
#vocab-view .vocab-view-shell .btn,
#vocab-view .vocab-menu button,
#vocab-view .vocab-side-panel__toggle,
#vocab-view .switcher-btn,
#vocab-view .vocab-list-switcher button {
    border: 1px solid #000000 !important;
    background: #ffffff !important;
    background-image: none !important;
    color: #000000 !important;
    box-shadow: none !important;
    transform: none !important;
}

#vocab-view .btn-primary,
#vocab-view .vocab-view-shell .btn-primary,
#vocab-view .btn-soft:hover:not(:disabled),
#vocab-view .btn-outline:hover:not(:disabled),
#vocab-view .btn-ghost:hover:not(:disabled),
#vocab-view .vocab-menu button:hover,
#vocab-view .switcher-btn:hover,
#vocab-view .vocab-list-switcher button:hover {
    border-color: #000000 !important;
    background: #000000 !important;
    background-image: none !important;
    color: #ffffff !important;
}

#vocab-view .btn-primary *,
#vocab-view .vocab-view-shell .btn-primary *,
#vocab-view .btn-soft:hover:not(:disabled) *,
#vocab-view .btn-outline:hover:not(:disabled) *,
#vocab-view .btn-ghost:hover:not(:disabled) * {
    color: #ffffff !important;
}

#vocab-view .btn:disabled,
#vocab-view .vocab-view-shell .btn:disabled {
    opacity: 0.45 !important;
    background: #ffffff !important;
    color: #000000 !important;
}

#vocab-view .vocab-card--feedback,
#vocab-view .vocab-card--feedback.vocab-card--correct,
#vocab-view .vocab-card--feedback.vocab-card--near,
#vocab-view .vocab-card--feedback.vocab-card--wrong,
#vocab-view .vocab-card-error,
#vocab-view .vocab-card--summary,
#vocab-view .vocab-card--complete {
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid #000000 !important;
}

#vocab-view .vocab-card--feedback [style],
#vocab-view .vocab-card--feedback [style] *,
#vocab-view .vocab-card--complete [style],
#vocab-view .vocab-card--summary [style] {
    background: #ffffff !important;
    background-image: none !important;
    border-color: #000000 !important;
    color: #000000 !important;
}

#vocab-view .vocab-feedback__icon,
#vocab-view .vocab-card__illustration,
#vocab-view .vocab-due-banner__icon {
    filter: grayscale(1) contrast(10) !important;
}

#vocab-view .vocab-side-panel__section,
#vocab-view .vocab-settings-modal__header,
#vocab-view .vocab-feedback__details,
#vocab-view .vocab-card__wordline {
    border-color: #000000 !important;
}

#vocab-view input,
#vocab-view textarea,
#vocab-view select {
    border: 1px solid #000000 !important;
    background: #ffffff !important;
    color: #000000 !important;
    box-shadow: none !important;
}

#vocab-view input:focus,
#vocab-view textarea:focus,
#vocab-view select:focus,
#vocab-view button:focus-visible {
    outline: 2px solid #000000 !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

#vocab-view .vocab-settings-modal__backdrop {
    background: #ffffff !important;
    opacity: 0.92 !important;
}

#vocab-view .vocab-bottom-bar,
#vocab-view .vocab-bottom-bar__surface {
    display: none !important;
}

/* Balanced top navigation: equal columns, centered labels. */
.container.hero-shell .main-nav.hero-nav,
body:has(#vocab-view.active) .main-nav.hero-nav {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: center !important;
    gap: 8px !important;
    width: min(100%, 1280px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 8px !important;
}

.container.hero-shell .nav-btn.hero-nav__btn,
body:has(#vocab-view.active) .nav-btn.hero-nav__btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 48px !important;
    padding: 0 12px !important;
    text-align: center !important;
    white-space: nowrap !important;
}

.container.hero-shell .nav-btn.hero-nav__btn.active,
body:has(#vocab-view.active) .nav-btn.hero-nav__btn.active {
    width: 100% !important;
    min-width: 0 !important;
    transform: none !important;
}

.container.hero-shell .nav-btn.hero-nav__btn svg,
.container.hero-shell .nav-btn.hero-nav__btn i,
body:has(#vocab-view.active) .nav-btn.hero-nav__btn svg,
body:has(#vocab-view.active) .nav-btn.hero-nav__btn i {
    flex: 0 0 auto !important;
}

@media (max-width: 760px) {
    .container.hero-shell .main-nav.hero-nav,
    body:has(#vocab-view.active) .main-nav.hero-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        border-radius: 24px !important;
    }

    .container.hero-shell .nav-btn.hero-nav__btn,
    body:has(#vocab-view.active) .nav-btn.hero-nav__btn {
        min-height: 44px !important;
    }
}

/* Vocabulary page: align with the main soft workstation UI. */
:root {
    --vocab-desk-bg: #f7f8f6;
    --vocab-desk-surface: rgba(255, 255, 255, 0.74);
    --vocab-desk-surface-strong: rgba(255, 255, 255, 0.92);
    --vocab-desk-border: rgba(25, 37, 45, 0.11);
    --vocab-desk-ink: #111827;
    --vocab-desk-muted: #667085;
    --vocab-desk-accent: #1f7a72;
    --vocab-desk-accent-strong: #145d57;
    --vocab-desk-accent-soft: rgba(31, 122, 114, 0.12);
    --vocab-desk-shadow: 0 22px 70px rgba(31, 41, 55, 0.10);
    --vocab-desk-soft-shadow: 0 12px 34px rgba(31, 41, 55, 0.08);
}

html:has(#vocab-view.active),
body:has(#vocab-view.active),
body.hero-body:has(#vocab-view.active),
body.theme-blue:has(#vocab-view.active),
.container.hero-shell:has(#vocab-view.active) {
    background:
        linear-gradient(135deg, #f8f9f7 0%, #edf3f2 42%, #f6f8fa 72%, #fbfbf9 100%),
        repeating-linear-gradient(90deg, rgba(17, 24, 39, 0.026) 0 1px, transparent 1px 92px),
        repeating-linear-gradient(0deg, rgba(17, 24, 39, 0.018) 0 1px, transparent 1px 92px) !important;
    background-attachment: fixed !important;
    color: var(--vocab-desk-ink) !important;
}

body.hero-body:has(#vocab-view.active)::before,
body.theme-blue:has(#vocab-view.active)::before {
    content: "";
    display: block !important;
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(108deg, transparent 0%, transparent 14%, rgba(180, 214, 212, 0.42) 14%, rgba(180, 214, 212, 0.16) 33%, transparent 33%),
        linear-gradient(286deg, transparent 0%, rgba(206, 222, 232, 0.30) 18%, transparent 46%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 248, 247, 0.70));
}

body.hero-body:has(#vocab-view.active)::after,
body.theme-blue:has(#vocab-view.active)::after {
    content: "";
    display: block !important;
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.42) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.34) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.46), transparent 70%);
}

body:has(#vocab-view.active) .main-nav.hero-nav {
    border: 1px solid var(--vocab-desk-border) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.74) !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
}

body:has(#vocab-view.active) .nav-btn.hero-nav__btn {
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--vocab-desk-muted) !important;
    box-shadow: none !important;
}

body:has(#vocab-view.active) .nav-btn.hero-nav__btn.active,
body:has(#vocab-view.active) .nav-btn.hero-nav__btn:hover,
body:has(#vocab-view.active) .nav-btn.hero-nav__btn:focus-visible {
    background: #ffffff !important;
    color: var(--vocab-desk-ink) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.10) !important;
}

#vocab-view,
#vocab-view.active,
#vocab-view .vocab-view-shell,
#vocab-view .vocab-body,
#vocab-view .vocab-body__container,
#vocab-view .vocab-body__grid {
    background: transparent !important;
    color: var(--vocab-desk-ink) !important;
    box-shadow: none !important;
}

#vocab-view *,
#vocab-view *::before,
#vocab-view *::after {
    border-color: var(--vocab-desk-border) !important;
    color: inherit !important;
    text-shadow: none !important;
}

#vocab-view .vocab-topbar {
    margin: 0 0 28px !important;
    border: 1px solid var(--vocab-desk-border) !important;
    border-radius: 28px !important;
    background: var(--vocab-desk-surface) !important;
    box-shadow: var(--vocab-desk-shadow) !important;
    backdrop-filter: blur(28px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(170%) !important;
}

#vocab-view .vocab-topbar__container,
#vocab-view .vocab-menu__panel,
#vocab-view .vocab-session-card,
#vocab-view .vocab-session-card > .vocab-card,
#vocab-view .vocab-card,
#vocab-view .vocab-card::before,
#vocab-view .vocab-side-panel,
#vocab-view .vocab-side-panel__surface,
#vocab-view .vocab-settings-modal__dialog,
#vocab-view .vocab-feedback__details,
#vocab-view .vocab-card__meaning,
#vocab-view .vocab-card__input-block,
#vocab-view .chip,
#vocab-view .vocab-list-switcher,
#vocab-view .switcher-dropdown,
#vocab-view .switcher-btn {
    background: var(--vocab-desk-surface-strong) !important;
    background-image: none !important;
}

#vocab-view .vocab-session-card > .vocab-card,
#vocab-view .vocab-side-panel__surface,
#vocab-view .vocab-menu__panel,
#vocab-view .vocab-settings-modal__dialog {
    border: 1px solid var(--vocab-desk-border) !important;
    border-radius: 24px !important;
    box-shadow: var(--vocab-desk-shadow) !important;
}

#vocab-view .vocab-card {
    min-height: 520px;
}

#vocab-view .vocab-card--recognition,
#vocab-view .vocab-card--feedback,
#vocab-view .vocab-card--complete,
#vocab-view .vocab-card--empty,
#vocab-view .vocab-card--summary {
    background: var(--vocab-desk-surface-strong) !important;
}

#vocab-view .vocab-topbar__heading,
#vocab-view .vocab-card__word,
#vocab-view .vocab-card__empty-title,
#vocab-view .vocab-feedback__head h3,
#vocab-view .vocab-side-panel__section h3 {
    color: var(--vocab-desk-ink) !important;
}

#vocab-view .vocab-topbar__subtitle,
#vocab-view .vocab-card__instruction,
#vocab-view .vocab-card__empty-text,
#vocab-view .vocab-side-panel__section p,
#vocab-view .vocab-feedback__details dt,
#vocab-view .chip {
    color: var(--vocab-desk-muted) !important;
}

#vocab-view .vocab-progress__track {
    height: 8px;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(17, 24, 39, 0.10) !important;
}

#vocab-view .vocab-progress__fill {
    border-radius: inherit;
    background: var(--vocab-desk-accent) !important;
}

#vocab-view .chip {
    border: 1px solid var(--vocab-desk-border) !important;
    background: rgba(255, 255, 255, 0.82) !important;
}

#vocab-view .btn,
#vocab-view .vocab-view-shell .btn,
#vocab-view .vocab-menu button,
#vocab-view .vocab-side-panel__toggle,
#vocab-view .switcher-btn,
#vocab-view .vocab-list-switcher button {
    border: 1px solid var(--vocab-desk-border) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    background-image: none !important;
    color: var(--vocab-desk-ink) !important;
    box-shadow: 0 10px 28px rgba(31, 41, 55, 0.06) !important;
    transform: none !important;
}

#vocab-view .btn-primary,
#vocab-view .vocab-view-shell .btn-primary,
#vocab-view .btn-soft:hover:not(:disabled),
#vocab-view .btn-outline:hover:not(:disabled),
#vocab-view .btn-ghost:hover:not(:disabled),
#vocab-view .vocab-menu button:hover,
#vocab-view .switcher-btn:hover,
#vocab-view .vocab-list-switcher button:hover {
    border-color: transparent !important;
    background: var(--vocab-desk-accent) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 30px rgba(31, 122, 114, 0.22) !important;
}

#vocab-view .btn-primary *,
#vocab-view .vocab-view-shell .btn-primary *,
#vocab-view .btn-soft:hover:not(:disabled) *,
#vocab-view .btn-outline:hover:not(:disabled) *,
#vocab-view .btn-ghost:hover:not(:disabled) * {
    color: #ffffff !important;
}

#vocab-view .btn:disabled,
#vocab-view .vocab-view-shell .btn:disabled {
    opacity: 0.55 !important;
    background: rgba(255, 255, 255, 0.74) !important;
    color: var(--vocab-desk-muted) !important;
    box-shadow: none !important;
}

#vocab-view .vocab-card__actions--inline .btn {
    min-height: 52px;
}

#vocab-view .vocab-card__actions--inline .btn-primary {
    background: var(--vocab-desk-accent) !important;
}

#vocab-view .vocab-card--feedback.vocab-card--correct,
#vocab-view .vocab-card--feedback.vocab-card--near,
#vocab-view .vocab-card--feedback.vocab-card--wrong,
#vocab-view .vocab-card-error {
    border: 1px solid var(--vocab-desk-border) !important;
    background: var(--vocab-desk-surface-strong) !important;
}

#vocab-view .vocab-card--feedback [style],
#vocab-view .vocab-card--feedback [style] *,
#vocab-view .vocab-card--complete [style],
#vocab-view .vocab-card--summary [style] {
    background: rgba(255, 255, 255, 0.70) !important;
    background-image: none !important;
    border-color: var(--vocab-desk-border) !important;
    color: var(--vocab-desk-ink) !important;
}

#vocab-view .vocab-feedback__details {
    border: 1px solid var(--vocab-desk-border) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.68) !important;
}

#vocab-view .vocab-feedback__details dd {
    color: var(--vocab-desk-ink) !important;
}

#vocab-view .vocab-feedback__icon,
#vocab-view .vocab-card__illustration,
#vocab-view .vocab-due-banner__icon {
    filter: none !important;
}

#vocab-view .vocab-side-panel__surface {
    background: rgba(255, 255, 255, 0.78) !important;
}

#vocab-view .vocab-side-panel__toggle {
    background: rgba(255, 255, 255, 0.92) !important;
    color: var(--vocab-desk-ink) !important;
}

#vocab-view .vocab-side-panel__section,
#vocab-view .vocab-settings-modal__header,
#vocab-view .vocab-card__wordline {
    border-color: var(--vocab-desk-border) !important;
}

#vocab-view input,
#vocab-view textarea,
#vocab-view select {
    border: 1px solid var(--vocab-desk-border) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.86) !important;
    color: var(--vocab-desk-ink) !important;
    box-shadow: none !important;
}

#vocab-view input:focus,
#vocab-view textarea:focus,
#vocab-view select:focus,
#vocab-view button:focus-visible {
    outline: 2px solid rgba(31, 122, 114, 0.36) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

#vocab-view .vocab-settings-modal__backdrop {
    background: rgba(247, 248, 246, 0.78) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    opacity: 1 !important;
}

#vocab-view .vocab-bottom-bar,
#vocab-view .vocab-bottom-bar__surface {
    display: none !important;
}

/* Final vocab review layout: one centered study panel, no side details panel. */
#vocab-view .vocab-view-shell {
    --vocab-font-body: var(--font-family-primary) !important;
    --vocab-font-title: var(--font-family-primary) !important;
    font-family: var(--font-family-primary) !important;
}

#vocab-view,
#vocab-view *,
#vocab-view button,
#vocab-view input,
#vocab-view textarea,
#vocab-view select {
    font-family: var(--font-family-primary) !important;
    letter-spacing: 0 !important;
}

#vocab-view .vocab-side-panel {
    display: none !important;
}

#vocab-view .vocab-body {
    padding: 48px 32px 56px !important;
}

#vocab-view .vocab-body__container {
    width: min(1240px, 100%) !important;
}

#vocab-view .vocab-body__grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    align-items: stretch !important;
    gap: 0 !important;
}

#vocab-view .vocab-session-card {
    grid-column: 1 / -1 !important;
    width: min(1120px, 100%) !important;
    max-width: 1120px !important;
    margin: 0 auto !important;
}

#vocab-view .vocab-session-card > .vocab-card {
    width: 100% !important;
    min-height: clamp(500px, 56vh, 680px) !important;
}

#vocab-view .vocab-card__word {
    font-family: var(--font-family-primary) !important;
    font-size: clamp(40px, 4vw, 56px) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
}

#vocab-view .vocab-card__meaning,
#vocab-view .vocab-card__instruction,
#vocab-view .vocab-feedback__details,
#vocab-view .vocab-feedback__head,
#vocab-view .vocab-card__empty-title,
#vocab-view .vocab-card__empty-text {
    font-family: var(--font-family-primary) !important;
}

@media (max-width: 760px) {
    #vocab-view .vocab-body {
        padding: 28px 16px 40px !important;
    }

    #vocab-view .vocab-session-card {
        width: 100% !important;
    }

    #vocab-view .vocab-session-card > .vocab-card {
        min-height: 480px !important;
    }
}