/* Design Tokens & Theme Variables */
.mark-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(16, 185, 129, 0.12) !important;
    color: #047857 !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
    padding: 2px 10px !important;
    border-radius: 24px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    margin-left: 8px !important;
    vertical-align: middle !important;
}

:root {
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-heading: 'Outfit', sans-serif;
    
    /* Global Sizing */
    --border-radius-sm: 6px;
    --border-radius-md: 12px;
    --border-radius-lg: 20px;
    --border-radius-xl: 30px;
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    
    /* Harmonious Status Colors */
    --color-ready: #10b981;       /* Vibrant Green */
    --color-almost: #f59e0b;      /* Warm Amber */
    --color-needs: #ef4444;       /* Alert Red */
    
    /* Strand Colors */
    --color-strand-number: #f59e0b;       /* Warm Amber */
    --color-strand-algebra: #ef4444;      /* Alert Red */
    --color-strand-shape: #8b5cf6;        /* Vibrant Purple (Tailwind Violet-500) */
    --color-strand-data: #10b981;         /* Vibrant Green */
    --color-strand-mytopics: #06b6d4;     /* Electric Cyan */
    --color-strand-mychapters: #06b6d4;   /* Electric Cyan */
    
    /* Draggable interactive plot point */
    --color-drag-point: #f97316;
    
    /* Conversion graph grid contrast tokens */
    --cg-grid-minor: rgba(255, 255, 255, 0.18);
    --cg-grid-major: rgba(255, 255, 255, 0.40);
    --grid-line-subtle: rgba(255, 255, 255, 0.18);

    --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);
}

/* Dark Theme (Default) */
html[data-theme="dark"] {
    --bg-primary: #070a13;
    --bg-secondary: #0d1326;
    --bg-tertiary: #141c33;
    
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    
    --primary: #3b82f6;
    --primary-hover: #60a5fa;
    --primary-bg-light: rgba(59, 130, 246, 0.1);
    
    --border: rgba(255, 255, 255, 0.06);
    --border-focus: #3b82f6;
    --grid-line: rgba(255, 255, 255, 0.28);
    --grid-line-subtle: rgba(255, 255, 255, 0.18);
    --cg-grid-minor: rgba(255, 255, 255, 0.18);
    --cg-grid-major: rgba(255, 255, 255, 0.40);
    --color-drag-point: #fb923c;
    
    --card-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
    --glass-bg: rgba(13, 19, 38, 0.8);
    --glass-border: rgba(255, 255, 255, 0.04);
    --math-highlight-bg: rgba(96, 165, 250, 0.08);
    --math-selection-bg: rgba(96, 165, 250, 0.2);
    --table-header-bg: #1e3a8a;
    --venn-shade-fill: rgba(59, 130, 246, 0.45);
    --venn-shade-hover: rgba(59, 130, 246, 0.6);
    --venn-shade-unshaded-hover: rgba(59, 130, 246, 0.2);
}

/* Light Theme */
html[data-theme="light"] {
    --bg-primary: #f8fafc;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f1f5f9;
    
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --primary-bg-light: rgba(37, 99, 235, 0.08);
    
    --border: #e2e8f0;
    --border-focus: #2563eb;
    --grid-line: #94a3b8;
    --grid-line-subtle: #94a3b8;
    --cg-grid-minor: #94a3b8;
    --cg-grid-major: #64748b;
    --color-drag-point: #ea580c;
    
    --card-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.08);
    --glass-bg: rgba(255, 255, 255, 0.9);
    --glass-border: #e2e8f0;
    --math-highlight-bg: rgba(37, 99, 235, 0.06);
    --math-selection-bg: rgba(37, 99, 235, 0.15);
    --table-header-bg: #e2e8f0;
    --venn-shade-fill: rgba(29, 78, 216, 0.55);
    --venn-shade-hover: rgba(29, 78, 216, 0.7);
    --venn-shade-unshaded-hover: rgba(37, 99, 235, 0.25);
}

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

body {
    font-family: var(--font-sans);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    line-height: 1.5;
    transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* Header Styles */
.app-header {
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
    height: 46px;
    display: flex;
    align-items: center;
}

/* Adjustments for smaller header height */
.app-header .logo-text {
    font-size: 18px;
}
.app-header .badge {
    font-size: 11px;
    padding: 2px 8px;
}
.app-header .btn-add-subject {
    width: 20px;
    height: 20px;
    font-size: 12px;
    margin-left: 6px;
}
.app-header .btn-icon {
    width: 32px;
    height: 32px;
}
.app-header .btn {
    padding: 6px 12px;
    font-size: 13px;
}
.app-header .user-display {
    padding: 4px 8px;
    font-size: 13px;
}

.header-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Logo Dropdown Wrapper & Chevron */
.logo-dropdown-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.logo-btn-container {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.logo-chevron-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 3px 5px;
    height: 26px;
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-fast) ease-in-out;
}

.logo-chevron-btn:hover,
.logo-dropdown-wrapper:hover .logo-chevron-btn,
.logo-chevron-btn.active {
    color: var(--primary);
    background-color: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.25);
}

.logo-chevron {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease-in-out;
}

.logo-dropdown-wrapper:hover .logo-chevron,
.logo-chevron-btn.active .logo-chevron {
    transform: rotate(180deg);
}

/* Logo Dropdown Menu */
.logo-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 230px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-md);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    z-index: 1000;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.logo-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    width: 100%;
    height: 10px;
}

.logo-dropdown-wrapper:hover .logo-dropdown-menu,
.logo-dropdown-menu.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.logo-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 600;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    box-sizing: border-box;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.logo-dropdown-item i,
.logo-dropdown-item svg {
    width: 17px;
    height: 17px;
    color: var(--primary);
    flex-shrink: 0;
}

.logo-dropdown-item:hover {
    background-color: rgba(59, 130, 246, 0.12);
    color: var(--primary);
}

.logo-dropdown-item.active {
    background-color: rgba(59, 130, 246, 0.16);
    color: var(--primary);
}

.logo-dropdown-item-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.logo-item-title {
    font-size: 13.5px;
    font-weight: 600;
    color: inherit;
    line-height: 1.2;
    white-space: nowrap;
}

.logo-item-arrow {
    width: 14px;
    height: 14px;
    color: var(--text-secondary);
    margin-left: auto;
    opacity: 0.7;
    transition: transform var(--transition-fast), color var(--transition-fast);
}

.logo-dropdown-item:hover .logo-item-arrow {
    color: var(--primary);
    opacity: 1;
    transform: translateX(2px);
}

.logo-text {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    user-select: none;
    cursor: pointer;
}

.logo-word {
    background: linear-gradient(135deg, var(--primary), #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.logo-3000,
.logo-two {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 7px;
    height: 20px;
    line-height: 1;
    font-size: 12px;
    font-weight: 900;
    font-family: var(--font-heading);
    letter-spacing: -0.3px;
    color: #ffffff;
    background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 35%, #8b5cf6 70%, #ec4899 100%);
    border-radius: 6px;
    transform: rotate(-6deg) translateY(-0.5px);
    box-shadow: 0 2px 7px rgba(139, 92, 246, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.6);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    flex-shrink: 0;
}

.logo-text:hover .logo-3000,
.logo-text:hover .logo-two {
    transform: rotate(8deg) scale(1.15) translateY(-1.5px);
    box-shadow: 0 4px 14px rgba(168, 85, 247, 0.7), inset 0 1px 1px rgba(255, 255, 255, 0.8);
}

.logo-text:active .logo-3000,
.logo-text:active .logo-two {
    transform: rotate(0deg) scale(0.95);
}

.header-actions {
    display: flex;
    align-items: center;
    position: relative;
}

.header-btn-cluster {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.user-display {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-secondary);
    background-color: var(--bg-tertiary);
    padding: 6px 12px;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border);
}

.user-display svg {
    width: 16px;
    height: 16px;
}

/* Main Layout */
.app-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 24px;
}

.app-container {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: var(--border-radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-primary {
    background-color: var(--primary);
    color: #ffffff;
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}

.btn-try-again {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25);
}

.btn-try-again:hover {
    opacity: 0.95;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(139, 92, 246, 0.35);
}

.btn-outline {
    background-color: transparent;
    border-color: var(--border);
    color: var(--text-secondary);
}

.btn-outline:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.workings-segmented-control {
    display: flex;
    align-items: center;
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    background-color: #1e3a5f;
    border: 1px solid var(--primary);
    width: 100%;
}

.workings-segmented-btn {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    padding: 6px 0;
    line-height: 1;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s;
}

.workings-segmented-btn:hover {
    opacity: 0.8;
}

.workings-segmented-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.workings-segmented-label {
    padding: 6px 8px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    user-select: none;
    line-height: 1;
    white-space: nowrap;
    border-left: 1px solid rgba(255,255,255,0.25);
    border-right: 1px solid rgba(255,255,255,0.25);
    flex-shrink: 0;
}

.workings-add-single-btn {
    display: block;
    width: 100%;
    background-color: #1e3a5f;
    border: 1px solid var(--primary);
    border-radius: var(--border-radius-sm);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 8px;
    line-height: 1.3;
    text-align: center;
    transition: opacity 0.15s;
}

.workings-add-single-btn:hover {
    opacity: 0.85;
}

.connected-workings-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.working-step-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.working-step-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    min-width: 50px;
    flex-shrink: 0;
    text-align: right;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    align-self: flex-start;
    white-space: nowrap;
}

.workings-and-answer-layout {
    display: flex;
    gap: 8px;
    align-items: stretch;
    width: 100%;
}

.workings-and-answer-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.workings-sidebar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
    width: 120px;
}

.workings-sidebar .btn {
    margin-top: auto;
}

.answer-check-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.answer-check-row .math-input-wrapper {
    flex: 1;
}

.btn-icon {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border);
    color: var(--text-primary);
}

.btn-icon:hover {
    background-color: var(--border);
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 30px;
}

.badge-primary {
    background-color: var(--primary-bg-light);
    color: var(--primary);
}

.badge-ready {
    background-color: rgba(16, 185, 129, 0.1);
    color: var(--color-ready);
}

.badge-almost {
    background-color: rgba(245, 158, 11, 0.1);
    color: var(--color-almost);
}

.badge-needs {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--color-needs);
}

/* Cards */
.card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-lg);
    padding: 24px;
    box-shadow: var(--card-shadow);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

/* Desk Lamp Theme Toggle (Gooseneck Desklight with Yellow Bulb) */
.desk-lamp-toggle {
    position: relative;
    border: 1px solid transparent;
    transition: all var(--transition-fast) cubic-bezier(0.34, 1.56, 0.64, 1);
}

.desk-lamp-toggle:hover {
    border-color: rgba(250, 204, 21, 0.4);
    background-color: var(--border);
    transform: translateY(-1px);
}

.pixar-desk-lamp {
    width: 22px;
    height: 22px;
    overflow: visible;
    display: block;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.desk-lamp-toggle:hover .pixar-desk-lamp {
    transform: scale(1.08);
}

.lamp-head {
    transform-origin: 8.5px 5px;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.desk-lamp-toggle:hover .lamp-head {
    transform: rotate(6deg);
}

.desk-lamp-toggle:active .lamp-head {
    transform: rotate(-3deg) scale(0.96);
}

.lamp-bulb {
    transition: fill var(--transition-fast) ease, filter var(--transition-fast) ease;
}

/* Dark Theme - Radiant Glowing Yellow Desk Lamp */
html[data-theme="dark"] .lamp-bulb {
    fill: #facc15;
    filter: drop-shadow(0 0 3px #facc15) drop-shadow(0 0 7px rgba(250, 204, 21, 0.85));
}

html[data-theme="dark"] .desk-lamp-toggle:hover .lamp-bulb {
    filter: drop-shadow(0 0 4px #facc15) drop-shadow(0 0 10px rgba(250, 204, 21, 1));
}

/* Light Theme - Warm Golden Yellow Desk Lamp with Dark Matte Body */
html[data-theme="light"] .lamp-bulb {
    fill: #f59e0b;
    filter: drop-shadow(0 0 2px rgba(245, 158, 11, 0.7));
}

html[data-theme="light"] .desk-lamp-toggle:hover .lamp-bulb {
    filter: drop-shadow(0 0 3px rgba(245, 158, 11, 0.9));
}

/* Page Loader styling */
.page-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 16px;
    color: var(--text-secondary);
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Auth Screens */
.auth-wrapper {
    max-width: 420px;
    width: 100%;
    margin: 60px auto;
}

.auth-title {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 8px;
}

.auth-subtitle {
    color: var(--text-secondary);
    text-align: center;
    font-size: 14px;
    margin-bottom: 32px;
}

.form-group {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
}

.form-input {
    font-family: var(--font-sans);
    font-size: 15px;
    padding: 12px 16px;
    border-radius: var(--border-radius-md);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border);
    color: var(--text-primary);
    outline: none;
    transition: border-color var(--transition-fast);
}

.form-input:focus {
    border-color: var(--border-focus);
}

.auth-footer {
    text-align: center;
    margin-top: 24px;
    font-size: 14px;
    color: var(--text-secondary);
}

.auth-footer a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}

.auth-error {
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: var(--color-needs);
    padding: 12px;
    border-radius: var(--border-radius-md);
    font-size: 14px;
    margin-bottom: 20px;
}

.auth-field-hint {
    font-size: 12.5px;
    color: var(--text-secondary);
    margin-top: 2px;
    line-height: 1.4;
    transition: color var(--transition-fast);
}

.auth-field-hint.auth-hint-error {
    color: var(--color-needs, #ef4444) !important;
    font-weight: 500;
}

.form-input.input-error,
html[data-theme="light"] .auth-wrapper .form-input.input-error,
html[data-theme="light"] .login-modal-card .form-input.input-error {
    border-color: var(--color-needs, #ef4444) !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25) !important;
}

/* Age Slider Control */
.age-slider-form-group {
    margin-bottom: 18px;
}

.age-slider-container {
    width: 100%;
}

.age-slider-track {
    position: relative;
    display: flex;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-xl);
    padding: 4px;
    user-select: none;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}

.age-slider-glider {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(50% - 4px);
    background: linear-gradient(135deg, var(--primary), #2563eb);
    border-radius: calc(var(--border-radius-xl) - 4px);
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}

.age-slider-glider.active {
    opacity: 1;
}

.age-slider-glider.glider-left {
    transform: translateX(0);
}

.age-slider-glider.glider-right {
    transform: translateX(100%);
}

.age-slider-btn {
    flex: 1;
    position: relative;
    z-index: 2;
    padding: 10px 14px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: calc(var(--border-radius-xl) - 4px);
    transition: color var(--transition-fast);
    outline: none;
}

.age-slider-btn:hover {
    color: var(--text-primary);
}

.age-slider-btn:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 1px;
}

.age-slider-btn.active {
    color: #ffffff !important;
    font-weight: 700;
}

/* Revealed Email & Notices */
.email-revealed-group {
    animation: authFadeIn 0.25s ease-out;
}

@keyframes authFadeIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.email-dynamic-label {
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
    margin-bottom: 2px;
}

.email-dynamic-label strong {
    color: var(--text-primary);
    font-weight: 700;
}

html[data-theme="dark"] .email-dynamic-label strong {
    color: #ffffff;
}

.parent-confirm-group {
    margin-top: 6px;
    padding: 10px 12px;
    background: rgba(59, 130, 246, 0.06);
    border: 1px solid rgba(59, 130, 246, 0.18);
    border-radius: var(--border-radius-md);
    animation: authFadeIn 0.2s ease-out;
}

/* Legal & Checkbox Elements */
.auth-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.auth-checkbox {
    width: 17px;
    height: 17px;
    margin-top: 2px;
    accent-color: var(--primary);
    cursor: pointer;
    flex-shrink: 0;
}

.auth-checkbox-text {
    flex: 1;
}

.auth-legal-link {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: var(--primary);
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-family: inherit;
    font-size: inherit;
    vertical-align: baseline;
    display: inline;
}

.auth-legal-link:hover {
    color: var(--primary-hover);
}

.auth-terms-group {
    margin-top: 10px;
    margin-bottom: 14px;
}

/* Service Tier Transparency Note */
.auth-notice-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px;
    background-color: rgba(245, 158, 11, 0.08);
    border: 1.5px dotted rgba(245, 158, 11, 0.5);
    border-radius: var(--border-radius-md);
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-secondary);
    margin-bottom: 14px;
}

.auth-notice-icon {
    flex-shrink: 0;
    color: #f59e0b;
    margin-top: 2px;
}

.auth-notice-text {
    flex: 1;
}

.auth-notice-text strong {
    color: var(--text-primary);
}

/* Dashboard view */
/* Dashboard view */
.dashboard-title {
    font-family: var(--font-heading);
    font-size: 30px;
    font-weight: 800;
    margin-top: 4px;
    margin-bottom: 8px;
    text-align: center;
    background: linear-gradient(135deg, var(--primary), #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dashboard-wrapper .card {
    padding: 12px;
}

/* Filter dropdowns */
.filter-dropdown-btn {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 6px 12px;
    border-radius: var(--border-radius-md);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.filter-dropdown-btn:hover {
    border-color: var(--primary);
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 150;
    min-width: 150px;
    padding: 4px 0;
    max-height: 250px;
    overflow-y: auto;
}

.dropdown-item {
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.dropdown-item:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.dropdown-item.active {
    background-color: var(--primary-bg-light);
    color: var(--primary);
    font-weight: 700;
}

.dropdown-group-header {
    padding: 6px 12px 4px 12px;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary);
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.03);
    transition: all var(--transition-fast);
    border-top: 1px solid var(--border);
    margin-top: 4px;
}

.dropdown-group-header:first-of-type {
    border-top: none;
    margin-top: 0;
}

.dropdown-group-header:hover {
    background-color: var(--primary-bg-light);
}

.dropdown-group-header.active {
    background-color: var(--primary-bg-light);
    color: var(--primary);
    font-weight: 800;
}

.dropdown-item.indented {
    padding-left: 24px;
    font-size: 12px;
    color: var(--text-secondary);
}

.dropdown-item.indented:hover {
    color: var(--text-primary);
    background-color: var(--bg-tertiary);
}

/* Circular stage badges */
.stage-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--primary);
    color: var(--primary);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 12px;
    background-color: var(--primary-bg-light);
    flex-shrink: 0;
    box-sizing: border-box;
}

.stage-circle.topic-stage {
    width: 26px;
    height: 26px;
    font-size: 11px;
    border-color: var(--border);
    color: var(--text-secondary);
    background-color: var(--bg-tertiary);
}

/* Strand Colors & Formatting */
.topic-row-item {
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.topic-row-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}



.topic-row-item.strand-number {
    border-left: 4px solid var(--color-strand-number) !important;
    background-color: #191512 !important;
}
.topic-row-item.strand-algebra {
    border-left: 4px solid var(--color-strand-algebra) !important;
    background-color: #190d17 !important;
}
.topic-row-item.strand-shape {
    border-left: 4px solid var(--color-strand-shape) !important;
    background-color: #121025 !important;
}
.topic-row-item.strand-data {
    border-left: 4px solid var(--color-strand-data) !important;
    background-color: #06181c !important;
}

html[data-theme="light"] .topic-row-item.strand-number {
    background-color: #f7eedc !important;
}
html[data-theme="light"] .topic-row-item.strand-algebra {
    background-color: #f7e9e9 !important;
}
html[data-theme="light"] .topic-row-item.strand-shape {
    background-color: #ece9fa !important;
}
html[data-theme="light"] .topic-row-item.strand-data {
    background-color: #def3ee !important;
}

/* Stage circle color matching */
.topic-row-item.strand-number .topic-stage {
    border-color: var(--color-strand-number) !important;
    color: var(--color-strand-number) !important;
    background-color: rgba(245, 158, 11, 0.08) !important;
}
.topic-row-item.strand-algebra .topic-stage {
    border-color: var(--color-strand-algebra) !important;
    color: var(--color-strand-algebra) !important;
    background-color: rgba(239, 68, 68, 0.08) !important;
}
.topic-row-item.strand-shape .topic-stage {
    border-color: var(--color-strand-shape) !important;
    color: var(--color-strand-shape) !important;
    background-color: rgba(139, 92, 246, 0.08) !important;
}
.topic-row-item.strand-data .topic-stage {
    border-color: var(--color-strand-data) !important;
    color: var(--color-strand-data) !important;
    background-color: rgba(16, 185, 129, 0.08) !important;
}

/* Dashboard Topic Titles - 50-50 mix of white and major strand color */
.topic-row-item.strand-number .topic-title-text {
    color: #facf85 !important;
    color: color-mix(in srgb, #ffffff 50%, var(--color-strand-number)) !important;
}
.topic-row-item.strand-algebra .topic-title-text {
    color: #f7a2a2 !important;
    color: color-mix(in srgb, #ffffff 50%, var(--color-strand-algebra)) !important;
}
.topic-row-item.strand-shape .topic-title-text {
    color: #c5aefb !important;
    color: color-mix(in srgb, #ffffff 50%, var(--color-strand-shape)) !important;
}
.topic-row-item.strand-data .topic-title-text {
    color: #88dcc0 !important;
    color: color-mix(in srgb, #ffffff 50%, var(--color-strand-data)) !important;
}

html[data-theme="light"] .topic-row-item.strand-number .topic-title-text {
    color: #b45309 !important;
}
html[data-theme="light"] .topic-row-item.strand-algebra .topic-title-text {
    color: #b91c1c !important;
}
html[data-theme="light"] .topic-row-item.strand-shape .topic-title-text {
    color: #6d28d9 !important;
}
html[data-theme="light"] .topic-row-item.strand-data .topic-title-text {
    color: #047857 !important;
}

/* Dashboard Search Box Neon Blue Emphasis & Filter Toggle Button */
.dashboard-search-input {
    border: 2px solid #00d2ff !important;
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.3), inset 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.dashboard-search-input:focus {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.5), inset 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

html[data-theme="light"] .dashboard-search-input {
    border: 2px solid #0284c7 !important;
    box-shadow: 0 0 8px rgba(2, 132, 199, 0.25), inset 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

html[data-theme="light"] .dashboard-search-input:focus {
    border-color: #0369a1 !important;
    box-shadow: 0 0 14px rgba(2, 132, 199, 0.4), inset 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.dashboard-search-icon {
    color: #00d2ff !important;
}

html[data-theme="light"] .dashboard-search-icon {
    color: #0284c7 !important;
}

.dashboard-filter-toggle-btn {
    border: 1.5px solid var(--border);
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    transition: all var(--transition-fast);
}

.dashboard-filter-toggle-btn:hover {
    border-color: #00d2ff !important;
    color: #00d2ff !important;
}

.dashboard-filter-toggle-btn.active {
    background-color: rgba(0, 210, 255, 0.12) !important;
    border-color: #00d2ff !important;
    color: #00d2ff !important;
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.25);
}

html[data-theme="light"] .dashboard-filter-toggle-btn:hover,
html[data-theme="light"] .dashboard-filter-toggle-btn.active {
    border-color: #0284c7 !important;
    color: #0284c7 !important;
    background-color: rgba(2, 132, 199, 0.08) !important;
    box-shadow: 0 0 8px rgba(2, 132, 199, 0.2);
}

/* 25% Larger Mixed Test Button in My Topics Header */
.btn-mixed-test-large {
    background: linear-gradient(135deg, #0284c7 0%, #00d2ff 100%) !important;
    border: none !important;
    color: #ffffff !important;
    padding: 6px 15px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    min-width: 95px !important;
    border-radius: var(--border-radius-md) !important;
    box-shadow: 0 2px 10px rgba(0, 210, 255, 0.35) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
}

.btn-mixed-test-large:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 210, 255, 0.55) !important;
}

.btn-mixed-test-large:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* Mixed Practice Button in My Topics Header */
.btn-mixed-practice-large {
    background: rgba(245, 158, 11, 0.1) !important;
    border: 1.5px solid var(--color-almost) !important;
    color: var(--color-almost) !important;
    padding: 5px 14px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    min-width: 95px !important;
    border-radius: var(--border-radius-md) !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast), opacity var(--transition-fast);
}

.btn-mixed-practice-large:hover:not(:disabled) {
    background: rgba(245, 158, 11, 0.2) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35) !important;
}

.btn-mixed-practice-large:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

html[data-theme="light"] .btn-mixed-practice-large {
    color: #d97706 !important;
    border-color: #d97706 !important;
    background: rgba(217, 119, 6, 0.08) !important;
}

html[data-theme="light"] .btn-mixed-practice-large:hover:not(:disabled) {
    background: rgba(217, 119, 6, 0.16) !important;
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.25) !important;
}

/* My Topics Draggable List and Drag Item */
.my-topics-drag-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.my-topic-drag-item {
    cursor: default;
    transition: transform 0.15s ease, opacity 0.15s ease, border-color 0.15s ease;
}

.my-topic-drag-item.is-dragging {
    opacity: 0.35 !important;
    transform: scale(0.99);
}

.my-topic-drag-item.drag-over-top {
    border-top: 2.5px solid #00d2ff !important;
}

.my-topic-drag-item.drag-over-bottom {
    border-bottom: 2.5px solid #00d2ff !important;
}

.my-topic-drag-handle {
    cursor: grab;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
    transition: color var(--transition-fast);
    touch-action: none;
}

.my-topic-drag-handle:hover {
    color: #00d2ff;
}

.my-topic-drag-item:active .my-topic-drag-handle {
    cursor: grabbing;
}

/* Get Started Button for untested / 0-score topics */
.btn-get-started {
    background: linear-gradient(135deg, var(--primary) 0%, #2563eb 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.btn-get-started:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.45);
}

/* Strand indicator pill badge */
.strand-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 5px;
    font-size: 9px;
    font-weight: 700;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.strand-badge.badge-number {
    background-color: rgba(245, 158, 11, 0.12);
    color: var(--color-strand-number);
}
.strand-badge.badge-algebra {
    background-color: rgba(239, 68, 68, 0.12);
    color: var(--color-strand-algebra);
}
.strand-badge.badge-shape {
    background-color: rgba(139, 92, 246, 0.12);
    color: var(--color-strand-shape);
}
.strand-badge.badge-data {
    background-color: rgba(16, 185, 129, 0.12);
    color: var(--color-strand-data);
}

/* ── Chapter card strand coloring ───────────────────────────────────── */
/* Pastel background tint on the chapter card                            */
.chapter-row-card.strand-number {
    background-color: rgba(245, 158, 11, 0.08);
}
.chapter-row-card.strand-algebra {
    background-color: rgba(239, 68, 68, 0.08);
}
.chapter-row-card.strand-shape {
    background-color: rgba(139, 92, 246, 0.08);
}
.chapter-row-card.strand-data {
    background-color: rgba(16, 185, 129, 0.08);
}

/* Light mode: deeper pastel so the tint is perceptible on white */
html[data-theme="light"] .chapter-row-card.strand-number {
    background-color: rgba(245, 158, 11, 0.13);
}
html[data-theme="light"] .chapter-row-card.strand-algebra {
    background-color: rgba(239, 68, 68, 0.10);
}
html[data-theme="light"] .chapter-row-card.strand-shape {
    background-color: rgba(139, 92, 246, 0.11);
}
html[data-theme="light"] .chapter-row-card.strand-data {
    background-color: rgba(16, 185, 129, 0.11);
}

/* Chapter stage circle — matches the strand accent colour */
.chapter-row-card.strand-number .stage-circle {
    border-color: var(--color-strand-number);
    color: var(--color-strand-number);
    background-color: rgba(245, 158, 11, 0.10);
}
.chapter-row-card.strand-algebra .stage-circle {
    border-color: var(--color-strand-algebra);
    color: var(--color-strand-algebra);
    background-color: rgba(239, 68, 68, 0.10);
}
.chapter-row-card.strand-shape .stage-circle {
    border-color: var(--color-strand-shape);
    color: var(--color-strand-shape);
    background-color: rgba(139, 92, 246, 0.10);
}
.chapter-row-card.strand-data .stage-circle {
    border-color: var(--color-strand-data);
    color: var(--color-strand-data);
    background-color: rgba(16, 185, 129, 0.10);
}

/* Topics dropdown panel — lighter tint so topic boxes sit darker within it */
.chapter-row-card.strand-number > .topics-dropdown {
    background-color: rgba(245, 158, 11, 0.04);
}
.chapter-row-card.strand-algebra > .topics-dropdown {
    background-color: rgba(239, 68, 68, 0.04);
}
.chapter-row-card.strand-shape > .topics-dropdown {
    background-color: rgba(139, 92, 246, 0.04);
}
.chapter-row-card.strand-data > .topics-dropdown {
    background-color: rgba(16, 185, 129, 0.04);
}
html[data-theme="light"] .chapter-row-card.strand-number > .topics-dropdown {
    background-color: rgba(245, 158, 11, 0.07);
}
html[data-theme="light"] .chapter-row-card.strand-algebra > .topics-dropdown {
    background-color: rgba(239, 68, 68, 0.06);
}
html[data-theme="light"] .chapter-row-card.strand-shape > .topics-dropdown {
    background-color: rgba(139, 92, 246, 0.06);
}
html[data-theme="light"] .chapter-row-card.strand-data > .topics-dropdown {
    background-color: rgba(16, 185, 129, 0.06);
}

/* ── Topics dropdown slide animation ────────────────────────────────── */
.topics-dropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}
.topics-dropdown.open {
    max-height: 3000px;
    transition: max-height 0.38s cubic-bezier(0.25, 1, 0.5, 1);
}

.topics-list-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 10px 6px 28px;
}

.health-bar-container {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    min-width: 90px;
}

.health-bar-track {
    width: 100%;
    height: 6px;
    background-color: var(--border);
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

html[data-theme="light"] .health-bar-track {
    border: 1px solid #000000;
}

.health-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.health-bar-status {
    font-size: 9px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

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

.readiness-ring-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.readiness-gauge {
    position: relative;
    width: 180px;
    height: 180px;
    margin: 20px 0;
}

.gauge-svg {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}

.gauge-bg {
    fill: none;
    stroke: var(--border);
    stroke-width: 12;
}

.gauge-fill {
    fill: none;
    stroke: var(--primary);
    stroke-dasharray: 502; /* 2 * PI * r (r=80) */
    stroke-dashoffset: 502;
    stroke-width: 12;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s ease-out;
}

.gauge-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-heading);
    font-size: 36px;
    font-weight: 800;
}

.gauge-label {
    font-size: 12px;
    color: var(--text-muted);
}

.chapters-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chapter-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
}

.chapter-row-card {
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast) !important;
}

.chapter-row-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-focus);
    box-shadow: var(--shadow-md);
}

.chapter-info {
    flex: 1;
}

.chapter-title-text {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
}

.chapter-meta {
    font-size: 13px;
    color: var(--text-muted);
    display: flex;
    gap: 16px;
}

/* Topic View Hub */
.breadcrumb-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.breadcrumb-nav span {
    color: var(--text-secondary);
}

.topic-header-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 12px;
}

.topic-title-group h1 {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 0px;
    letter-spacing: -0.5px;
}

.topic-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.topic-stat-box {
    flex: 1;
    min-width: 260px;
    padding: 6px 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.topic-stage-box {
    flex: 0 0 110px;
    min-width: 100px;
    max-width: 120px;
    padding: 6px 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}

.topic-stage-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0;
}

.topic-stage-val {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
    text-align: center;
}

.topic-stat-box.stat-bg-ready {
    background-color: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.4);
}
.topic-stat-box.stat-bg-almost {
    background-color: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.4);
}
.topic-stat-box.stat-bg-needs {
    background-color: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
}

html[data-theme="light"] .topic-stat-box.stat-bg-ready {
    background-color: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.35);
}
html[data-theme="light"] .topic-stat-box.stat-bg-almost {
    background-color: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.35);
}
html[data-theme="light"] .topic-stat-box.stat-bg-needs {
    background-color: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.35);
}

.topic-stat-box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}

.topic-stat-box-title {
    font-size: 11px;
    line-height: 1.2;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.readiness-help-btn {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
    line-height: 1;
}

.readiness-help-btn:hover {
    background-color: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
    transform: scale(1.1);
}

.topic-readiness-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3px;
}

.topic-readiness-val {
    font-family: var(--font-heading);
    font-size: 16px;
    line-height: 1.2;
    font-weight: 800;
}

.topic-readiness-badge {
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 9.5px;
    line-height: 1.2;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.topic-readiness-bar-track {
    width: 100%;
    height: 12px;
    background-color: var(--border);
    border-radius: 6px;
    overflow: hidden;
    padding: 1px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

html[data-theme="light"] .topic-readiness-bar-track {
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.topic-readiness-bar-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.topic-stat-split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    height: 100%;
    align-items: center;
}

.stat-sub-box {
    text-align: center;
    padding: 3px 6px;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-md);
}

.stat-sub-label {
    font-size: 9.5px;
    line-height: 1.1;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 1px;
}

.stat-sub-val {
    font-family: var(--font-heading);
    font-size: 14px;
    line-height: 1.15;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0px;
}

.stat-sub-time {
    font-size: 9.5px;
    line-height: 1.1;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Pupil Readiness Explanation Modal */
.readiness-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.2s ease-out;
}

.readiness-modal-content {
    background-color: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    max-width: 520px;
    width: 100%;
    padding: 28px;
    position: relative;
    animation: slideUp 0.25s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

.topic-tab-nav {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border);
    gap: 28px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.tab-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 600;
    padding: 12px 4px;
    cursor: pointer;
    position: relative;
    outline: none;
}

.tab-btn.active {
    color: var(--text-primary);
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--primary);
}

/* Add to / Remove from My Topics Button in Topic Tab Navigation */
.btn-topic-my-topics {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 700;
    color: #06b6d4;
    background: rgba(6, 182, 212, 0.08);
    border: 1.5px solid rgba(6, 182, 212, 0.35);
    border-radius: 20px;
    padding: 6px 14px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    align-self: center;
    user-select: none;
    line-height: 1;
    margin-bottom: 2px;
}

.btn-topic-my-topics:hover {
    background: rgba(6, 182, 212, 0.18);
    border-color: #06b6d4;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.25);
}

.btn-topic-my-topics:active {
    transform: translateY(0);
}

.btn-topic-my-topics.is-in-my-topics {
    color: #10b981;
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.35);
}

.btn-topic-my-topics.is-in-my-topics:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.4);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
}

html[data-theme="light"] .btn-topic-my-topics {
    color: #0891b2;
    background: rgba(6, 182, 212, 0.08);
    border-color: rgba(8, 145, 178, 0.4);
}

html[data-theme="light"] .btn-topic-my-topics:hover {
    background: rgba(6, 182, 212, 0.16);
    border-color: #0891b2;
}

html[data-theme="light"] .btn-topic-my-topics.is-in-my-topics {
    color: #059669;
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(5, 150, 105, 0.4);
}

html[data-theme="light"] .btn-topic-my-topics.is-in-my-topics:hover {
    color: #dc2626;
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(220, 38, 38, 0.4);
}

.btn-topic-my-topics.my-topics-btn-pulse {
    animation: myTopicsBtnPulse 0.45s ease-out;
}

@keyframes myTopicsBtnPulse {
    0% { transform: scale(1); }
    35% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

/* Method Tabs Navigation (Overview, Column, Grid, Lattice) in Learn section, questions & Try-It */
.method-tabs-nav {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.method-tabs-nav .btn,
.method-tabs-nav button {
    background-color: var(--primary-bg-light) !important;
    border: 1.5px solid rgba(59, 130, 246, 0.4) !important;
    color: var(--primary) !important;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    outline: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.method-tabs-nav .btn:hover,
.method-tabs-nav button:hover {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
    transform: translateY(-1px);
}

.method-tabs-nav .btn.active,
.method-tabs-nav button.active {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
    transform: translateY(-1px);
}

/* Topic Map Flowchart Section */
.topic-map-container {
    padding: 32px 24px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 24px;
}

.topic-map-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 900px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .topic-map-grid {
        display: grid;
        grid-template-columns: 1fr 90px 1fr;
        grid-template-rows: auto 44px auto 44px auto;
        grid-template-areas:
            "prior       .            ."
            "arrow1      .            ."
            "current     double-arrow related"
            "arrow2      .            ."
            "next        .            .";
        align-items: center;
    }
}

.map-area-prior { grid-area: prior; }
.map-area-current { grid-area: current; }
.map-area-next { grid-area: next; }
.map-area-related { grid-area: related; }

.map-arrow-vertical-1 {
    grid-area: arrow1;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-muted);
}
.map-arrow-vertical-2 {
    grid-area: arrow2;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-muted);
}
.map-arrow-horizontal {
    grid-area: double-arrow;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-muted);
}

.map-section-box {
    background-color: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-md);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.map-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.map-topic-card {
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}
.map-topic-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.current-topic-box {
    background-color: var(--bg-primary);
    border: 2px solid var(--primary);
    border-radius: var(--border-radius-lg);
    padding: 18px 20px;
    box-shadow: 0 0 18px rgba(99, 102, 241, 0.22);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.current-topic-card-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border);
}

.current-topic-card-inner .stage-circle.topic-stage {
    width: 39px !important;
    height: 39px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
}

.current-topic-card-inner h4 {
    font-family: var(--font-heading);
    font-size: 20px !important;
    font-weight: 700 !important;
    margin: 0;
}


.tab-content {
    margin-bottom: 40px;
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

/* Markdown Rendering Custom Styles */
.markdown-content h1, .markdown-content h2, .markdown-content h3 {
    font-family: var(--font-heading);
    margin-top: 24px;
    margin-bottom: 12px;
}

.markdown-content h2 { font-size: 22px; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.markdown-content p { margin-bottom: 16px; color: var(--text-secondary); }
.markdown-content ul, .markdown-content ol { margin-left: 20px; margin-bottom: 16px; color: var(--text-secondary); }
.markdown-content li { margin-bottom: 8px; }
.markdown-content blockquote {
    background-color: var(--bg-tertiary);
    border-left: 4px solid var(--primary);
    padding: 12px 16px;
    margin: 16px 0;
    border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
}

/* Assessment / Test Interface */
.assessment-container {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}

.assessment-container.assessment-container-wide,
.assessment-container:has(.cf-graph-container),
.assessment-container:has([data-interactive-type="draw-cumulative-frequency-graph"]) {
    max-width: 1040px;
}

.assessment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.assessment-progress-bar {
    height: 6px;
    background-color: var(--border);
    border-radius: 10px;
    width: 100%;
    margin-bottom: 16px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #a855f7);
    width: 0%;
    transition: width 0.3s ease;
}

.question-card {
    padding: 20px !important;
    margin-bottom: 12px !important;
    min-height: auto !important;
    border: 2px solid var(--primary) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1) !important;
}

.question-meta {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    margin-bottom: 12px;
}

.question-prompt {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.worked-example .question-prompt,
#hint-content .question-prompt,
.example-prompt {
    font-family: var(--font-heading);
    font-size: 18px; /* 2pt smaller than standard 20px question prompt */
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-primary);
    margin-bottom: 12px;
}

/* Remove rectangle/box emphasis from code, variables, and math-fields inside question prompts */
.question-prompt code,
.worked-example .question-prompt code,
#hint-content .question-prompt code,
.example-prompt code {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    font-size: inherit !important;
    color: inherit !important;
    display: inline !important;
    box-shadow: none !important;
}

.question-prompt math-field,
.worked-example .question-prompt math-field,
#hint-content .question-prompt math-field,
.example-prompt math-field {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    font-size: inherit !important;
    color: inherit !important;
}

.question-prompt .math-var,
.worked-example .question-prompt .math-var,
#hint-content .question-prompt .math-var,
.example-prompt .math-var {
    font-size: inherit !important;
}

.question-prompt sup,
sup {
    font-size: 0.7em;
    line-height: 0;
    vertical-align: super;
}

.answer-input-group {
    display: flex;
    gap: 16px;
    align-items: center;
    position: relative;
}

.math-input-wrapper {
    flex: 1;
    position: relative;
}

.input-answer {
    width: 100%;
    font-size: 18px;
    padding: 14px 18px;
    border-radius: var(--border-radius-md);
    background-color: var(--bg-tertiary);
    border: 2px solid var(--border);
    color: var(--text-primary);
    outline: none;
}

.input-answer:focus {
    border-color: var(--border-focus);
}

.test-mode-badge {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border);
    padding: 8px 16px;
    border-radius: var(--border-radius-md);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Math On-screen Keyboard Component styling */
.math-keyboard {
    background-color: var(--bg-secondary);
    border-top: 2px solid var(--border);
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 9px 14px;
    display: flex;
    justify-content: center;
    z-index: 1000;
    transform: translateY(100%);
    transition: transform var(--transition-normal);
    box-shadow: 0 -10px 30px rgba(0,0,0,0.3);
}

.math-keyboard.visible {
    transform: translateY(0);
}

.keyboard-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    max-width: 100%;
}

.keyboard-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4.5px;
    width: 432px;
    flex-shrink: 0;
}

/* Arrow Navigation Pad */
.arrow-pad {
    display: grid;
    grid-template-columns: repeat(3, calc((432px - 31.5px) / 8));
    grid-template-rows: repeat(4, 32.4px);
    gap: 4.5px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    user-select: none;
}

.arrow-btn {
    width: 100%;
    height: 32.4px;
    font-size: 14.4px;
}

.arrow-btn.arrow-up {
    grid-column: 2;
    grid-row: 1;
}

.arrow-btn.arrow-left {
    grid-column: 1;
    grid-row: 2;
}

.arrow-btn.arrow-right {
    grid-column: 3;
    grid-row: 2;
}

.arrow-btn.arrow-down {
    grid-column: 2;
    grid-row: 3;
}

.key-btn.switch-keyboard-btn {
    grid-column: 3;
    grid-row: 4;
    width: 100%;
    height: 32.4px;
    font-size: 18px !important;
    line-height: 1;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast, 0.15s), background-color var(--transition-fast, 0.15s);
}

.math-keyboard.has-switch-btn .switch-keyboard-btn {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

@media (max-width: 650px) {
    .keyboard-container {
        gap: 7px;
    }
}

@media (max-width: 620px) {
    .keyboard-container {
        transform: scale(0.9);
        transform-origin: bottom center;
    }
}

@media (max-width: 520px) {
    .keyboard-container {
        transform: scale(0.78);
        transform-origin: bottom center;
    }
}

@media (max-width: 420px) {
    .keyboard-container {
        transform: scale(0.68);
        transform-origin: bottom center;
    }
}

.key-btn {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-bottom: 2px solid rgba(0,0,0,0.4);
    border-radius: var(--border-radius-sm);
    color: var(--text-primary);
    font-size: 19px;
    font-weight: 600;
    height: 32.4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        inset 0 -1px 0 rgba(0,0,0,0.2),
        0 2px 4px rgba(0,0,0,0.25);
    position: relative;
}

.key-btn.multi-char-key {
    font-size: 15.75px;
}

.key-btn:hover {
    background-color: var(--border);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        inset 0 -1px 0 rgba(0,0,0,0.2),
        0 4px 8px rgba(0,0,0,0.3);
}

.key-btn:active {
    transform: translateY(1px);
    box-shadow:
        inset 0 -1px 0 rgba(255,255,255,0.06),
        inset 0 1px 0 rgba(0,0,0,0.25),
        0 1px 2px rgba(0,0,0,0.15);
    border-bottom-width: 1px;
}

.key-btn.action-key {
    background-color: rgba(96, 165, 250, 0.15);
    color: #7ab8fd;
    border-color: rgba(96, 165, 250, 0.35);
    border-bottom-color: rgba(96, 165, 250, 0.5);
    box-shadow:
        inset 0 1px 0 rgba(147, 197, 253, 0.18),
        inset 0 -1px 0 rgba(30, 80, 160, 0.3),
        0 2px 4px rgba(0,0,0,0.25);
}

.keyboard-toggle-btn {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--primary);
    cursor: pointer;
    font-size: 20px;
}

/* Practice Hints / Feedback Panel */
.practice-feedback-panel {
    margin-top: 20px;
    padding: 16px;
    border-radius: var(--border-radius-md);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border);
}

.feedback-correct {
    border-color: var(--color-ready);
    background-color: rgba(16, 185, 129, 0.08);
    color: var(--color-ready);
}

.feedback-caution {
    border-color: var(--color-almost);
    background-color: rgba(245, 158, 11, 0.08);
    color: var(--color-almost);
}

.feedback-incorrect {
    border-color: var(--color-needs);
    background-color: rgba(239, 68, 68, 0.08);
    color: var(--color-needs);
}

.feedback-caution-content {
    color: var(--color-almost);
    margin-top: 8px;
}

.feedback-caution-content p {
    color: var(--color-almost);
    font-size: 14px;
    margin-top: 4px;
    margin-bottom: 0;
}

html[data-theme="light"] .feedback-caution-content,
html[data-theme="light"] .feedback-caution-content p {
    color: #b45309;
}

.hint-box {
    margin-top: 16px;
    background-color: var(--primary-bg-light);
    border: 1px dashed var(--primary);
    padding: 12px;
    border-radius: var(--border-radius-md);
    font-size: 14px;
}

/* Results View */
.results-card {
    text-align: center;
    padding: 40px;
}

.score-badge {
    font-family: var(--font-heading);
    font-size: 44px;
    font-weight: 800;
    margin: 20px 0;
    color: var(--primary);
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.score-marks-detail {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-secondary);
}

.assessment-review-list {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: left;
}

.review-item {
    border-left: 4px solid var(--border);
    padding-left: 16px;
}

.review-item.correct {
    border-left-color: var(--color-ready);
}

.review-item.incorrect {
    border-left-color: var(--color-needs);
}

.review-item.partial {
    border-left-color: var(--color-almost);
}

.review-feedback {
    font-size: 14px;
    margin-top: 6px;
    color: var(--text-muted);
}

/* Course Switcher & Header Dropdown */
.course-switcher-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.course-switcher-btn {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    background-color: var(--primary-bg-light);
    color: var(--primary);
    transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.course-switcher-btn:hover,
.course-switcher-btn.active {
    background-color: var(--bg-tertiary);
    border-color: var(--primary);
}

.course-chevron {
    width: 12px;
    height: 12px;
    transition: transform 0.2s ease-in-out;
}

.course-switcher-btn.active .course-chevron,
.course-dropdown-menu.visible ~ .course-switcher-btn .course-chevron {
    transform: rotate(180deg);
}

.course-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 220px;
    background-color: var(--bg-surface, var(--bg-secondary));
    border: 1px solid var(--border);
    border-radius: var(--border-radius-md);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    z-index: 1000;
    padding: 6px;
    display: none;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.course-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    width: 100%;
    height: 10px;
}

.course-dropdown-menu.visible {
    display: flex;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.course-dropdown-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.course-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: var(--border-radius-sm);
    background: transparent;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.course-dropdown-item:hover,
.course-dropdown-item:focus-visible {
    background-color: var(--bg-tertiary);
    color: var(--primary);
    outline: none;
}

.course-dropdown-item.active {
    font-weight: 700;
    color: var(--primary);
    background-color: var(--primary-bg-light);
}

.course-dropdown-divider {
    height: 1px;
    background-color: var(--border);
    margin: 4px 0;
}

.course-dropdown-browse-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: var(--border-radius-sm);
    background: transparent;
    color: var(--primary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.course-dropdown-browse-btn:hover,
.course-dropdown-browse-btn:focus-visible {
    background-color: var(--bg-tertiary);
    outline: none;
}

.course-dropdown-browse-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.course-dropdown-browse-icon {
    width: 15px;
    height: 15px;
    color: var(--primary);
}

.course-dropdown-browse-arrow {
    width: 13px;
    height: 13px;
    opacity: 0.7;
    transition: transform var(--transition-fast);
}

.course-dropdown-browse-btn:hover .course-dropdown-browse-arrow {
    transform: translateX(2px);
    opacity: 1;
}

/* Curriculum Badge '+' Selector (Legacy) */
.btn-add-subject {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    margin-left: 8px;
    transition: all var(--transition-fast);
}

.btn-add-subject:hover {
    background-color: var(--primary-bg-light);
    color: var(--primary);
    border-color: var(--primary);
    transform: scale(1.1);
}

/* Header Navigation Links */
.app-nav {
    display: flex;
    gap: 24px;
}

.nav-link {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 15px;
    transition: color var(--transition-fast);
    padding: 8px 0;
    position: relative;
}

.nav-link:hover, .nav-link.active {
    color: var(--primary);
}

/* Practice Mode Input-Nested Hint Button */
.math-input-wrapper {
    position: relative;
    flex: 1;
}

.input-answer {
    width: 100%;
    padding-right: 64px !important; /* Offset text to prevent overlapping the hint button */
}

/* ─── Multiple-Choice Question Buttons ─────────────────────────────────────── */
.mc-choices {
    display: grid;
    grid-template-columns: repeat(var(--mc-cols, 5), 1fr);
    gap: 10px;
    margin: 8px 0 16px;
    width: 100%;
}

.mc-btn {
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--border);
    border-radius: var(--border-radius-sm);
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.1s;
    user-select: none;
    line-height: 1.3;
    box-sizing: border-box;
}

@media (max-width: 640px) {
    .mc-choices {
        grid-template-columns: 1fr !important;
    }
}

.mc-btn:hover:not(:disabled) {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, var(--bg-secondary));
    transform: translateY(-1px);
}

.mc-btn:active:not(:disabled) {
    transform: translateY(0);
}

.mc-btn.mc-selected {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 18%, var(--bg-secondary));
    color: var(--primary);
}

.mc-btn.mc-correct {
    border-color: var(--color-ready, #22c55e);
    background: color-mix(in srgb, var(--color-ready, #22c55e) 15%, var(--bg-secondary));
    color: var(--color-ready, #22c55e);
    cursor: default;
}

.mc-btn.mc-wrong {
    border-color: var(--color-needs, #ef4444);
    background: color-mix(in srgb, var(--color-needs, #ef4444) 15%, var(--bg-secondary));
    color: var(--color-needs, #ef4444);
    cursor: default;
}

.mc-btn:disabled {
    cursor: default;
    opacity: 0.9;
}

.mc-btn math-field.inline-math-prompt,
.mc-btn math-field[read-only].inline-math-prompt,
.mc-btn math-field[readonly].inline-math-prompt,
.mc-btn math-field::part(container),
.mc-btn math-field::part(content) {
    font-size: 18px !important;
    color: inherit !important;
    --text-color: inherit !important;
    pointer-events: none !important;
}

.mc-btn.mc-selected math-field.inline-math-prompt,
.mc-btn.mc-selected math-field[read-only].inline-math-prompt {
    color: var(--primary) !important;
    --text-color: var(--primary) !important;
}

.mc-btn.mc-correct math-field.inline-math-prompt,
.mc-btn.mc-correct math-field[read-only].inline-math-prompt {
    color: var(--color-ready, #22c55e) !important;
    --text-color: var(--color-ready, #22c55e) !important;
}

.mc-btn.mc-wrong math-field.inline-math-prompt,
.mc-btn.mc-wrong math-field[read-only].inline-math-prompt {
    color: var(--color-needs, #ef4444) !important;
    --text-color: var(--color-needs, #ef4444) !important;
}

[data-mc-choice] {
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

[data-mc-choice]:hover {
    transform: translateY(-2px);
    border-color: var(--primary) !important;
    box-shadow: 0 4px 12px rgba(56, 189, 248, 0.15);
}

[data-mc-choice].card-selected,
[data-mc-choice][data-selected="true"] {
    border-color: var(--primary) !important;
    background-color: rgba(56, 189, 248, 0.14) !important;
    box-shadow: 0 0 0 2px var(--primary), 0 4px 12px rgba(56, 189, 248, 0.25) !important;
}

svg g[data-mc-choice][data-selected="true"] rect {
    stroke: var(--primary) !important;
    stroke-width: 2.5px !important;
    fill: rgba(56, 189, 248, 0.18) !important;
}


.input-hint-btn-rect {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--color-almost);
    color: #0f172a; /* high contrast dark text on orange background */
    border: none;
    border-radius: 4px;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.5px;
    padding: 4px 8px;
    cursor: pointer;
    z-index: 5;
    transition: all var(--transition-fast);
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.2);
}

.input-hint-btn-rect:hover {
    opacity: 0.9;
    transform: translateY(-50%) scale(1.05);
}

.input-hint-btn-rect.active {
    background-color: #d97706; /* darker orange */
    color: #ffffff;
}

/* Test Mode Overlapping Navigation Layout */
.test-paper-wrapper {
    position: relative;
    width: 100%;
}

.test-nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--bg-secondary);
    border: 2px solid var(--border);
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    z-index: 10;
}

.test-nav-arrow:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-50%) scale(1.08);
}

.test-nav-arrow:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}

.test-nav-arrow-left {
    left: -23px; /* Overlaps exactly half the square on the left border */
}

.test-nav-arrow-right {
    right: -23px; /* Overlaps exactly half the square on the right border */
}

/* Test Submission Confirmation Box */
.test-submit-warning-card {
    margin-top: 32px;
    background-color: rgba(245, 158, 11, 0.05);
    border: 1px dashed var(--color-almost);
    padding: 24px;
    border-radius: var(--border-radius-lg);
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    text-align: center;
}

/* Grid of page selection dots */
.test-pages-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.dot-btn {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background-color: var(--border);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.dot-btn.active {
    background-color: var(--primary);
    transform: scale(1.25);
}

.dot-btn.answered {
    border: 1px solid var(--primary);
}

/* Modal Overlay and Card */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.modal-overlay.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.modal-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-lg);
    max-width: 600px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: var(--card-shadow);
    transform: scale(0.95);
    transition: transform var(--transition-normal);
}

.modal-overlay.visible .modal-card {
    transform: scale(1);
}

.modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2 {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 800;
}

.modal-close-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 28px;
    cursor: pointer;
    line-height: 1;
    padding: 4px;
    transition: color var(--transition-fast);
}

.modal-close-btn:hover {
    color: var(--color-needs);
}

.modal-header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    margin-left: auto;
}

.modal-header-actions .modal-logo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    font-size: 17px;
    outline: none;
    border-radius: 6px;
    padding: 2px 4px;
    transition: transform var(--transition-fast);
}

.modal-header-actions .modal-logo:focus-visible,
#header-logo:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

.modal-header-actions .modal-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    line-height: 1;
}

@media (max-width: 560px) {
    .modal-header-actions {
        gap: 10px;
    }
    .modal-header-actions .modal-logo {
        font-size: 15px;
        gap: 4px;
    }
    .modal-header-actions .modal-logo .logo-3000 {
        padding: 1px 5px;
        height: 18px;
        font-size: 11px;
    }
}

@media (max-width: 400px) {
    .modal-header-actions {
        gap: 8px;
    }
    .modal-header-actions .modal-logo {
        font-size: 13px;
    }
}

.modal-body {
    padding: 24px;
}

/* Curricula Grid */
.curricula-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.curricula-card {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-md);
    padding: 14px 10px;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.curricula-card:hover {
    border-color: var(--primary);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.curricula-card.active {
    border-color: var(--primary);
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, rgba(59, 130, 246, 0.05) 100%);
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.12);
}

.curricula-icon {
    font-size: 22px;
    color: var(--primary);
    margin-bottom: 6px;
    display: flex;
    justify-content: center;
}

.curricula-icon svg {
    width: 22px;
    height: 22px;
}

.curricula-card h3 {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--text-primary);
}

.curricula-status {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
}

.curricula-status.active,
.curricula-status.available {
    background-color: rgba(16, 185, 129, 0.12);
    color: var(--color-ready);
}

.curricula-status.soon {
    background-color: rgba(59, 130, 246, 0.12);
    color: var(--primary);
}

.curricula-status.later {
    background-color: rgba(148, 163, 184, 0.12);
    color: var(--text-muted);
}

/* About Us Modal Content Styling */
.about-body-text {
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.about-body-text p {
    color: var(--text-secondary) !important;
    margin-bottom: 12px;
    line-height: 1.6;
}

.about-body-text strong {
    color: var(--text-secondary) !important;
    font-weight: 600;
}

.about-key-ideas {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 14px 0 18px 0;
}

.about-key-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--text-secondary) !important;
    font-size: 15px;
    line-height: 1.5;
}

.about-key-item svg,
.about-key-item i {
    width: 17px;
    height: 17px;
    margin-top: 3px;
    flex-shrink: 0;
    color: #ffffff;
}

html[data-theme="light"] .about-key-item svg,
html[data-theme="light"] .about-key-item i {
    color: var(--text-primary);
}

.about-key-item strong {
    color: var(--text-secondary) !important;
    font-weight: 600;
}

.about-curricula-heading {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 24px 0 10px;
}

.policy-modal-body .curricula-grid + h1,
.policy-modal-body .about-body-text + h1,
.curricula-grid + h1,
.about-closing-slogan {
    margin-top: 28px;
    margin-bottom: 8px;
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 800;
    color: var(--text-primary) !important;
}

.about-closing-slogan strong {
    color: var(--text-primary) !important;
}

.policy-modal-body a,
.policy-modal-body .inline-policy-link,
.about-body-text a,
.about-body-text .inline-policy-link {
    color: var(--primary) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    background: none;
    border: none;
    padding: 0;
    font-size: inherit;
    font-family: inherit;
    cursor: pointer;
    font-weight: 600;
    display: inline;
    transition: color var(--transition-fast);
}

.policy-modal-body a:hover,
.policy-modal-body .inline-policy-link:hover,
.about-body-text a:hover,
.about-body-text .inline-policy-link:hover {
    color: var(--primary-hover, #60a5fa) !important;
}

/* Colored code rectangles around variables/expressions/equations */
.markdown-content code,
.hint-box code,
.practice-feedback-panel code,
.test-paper-wrapper code,
.now-you-try-content code {
    background-color: var(--primary-bg-light);
    border: 1px solid var(--primary);
    border-radius: var(--border-radius-sm);
    padding: 2px 6px;
    font-family: var(--font-sans);
    font-weight: 600;
    color: var(--text-primary);
    display: inline-block;
    margin: 2px;
}

/* Worked Examples formatting in Learn section */
.worked-example {
    margin: 18px 0;
    padding: 18px;
    border-radius: var(--border-radius-md);
    background-color: var(--bg-secondary);
    border: 2px solid var(--color-ready) !important;
    border-left: 6px solid var(--color-ready) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.05) !important;
}

.worked-example h3, .worked-example h4 {
    margin-bottom: 10px;
    color: var(--color-ready);
    font-family: var(--font-heading);
    font-weight: 700;
}

/* Key memorisation boxes (Rules, Formulas, Remember this) */
.rule-box {
    position: relative;
    margin: 24px 0 20px 0;
    padding: 20px;
    border-radius: var(--border-radius-md);
    background-color: rgba(245, 158, 11, 0.04);
    border: 2px solid var(--color-almost) !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.05) !important;
}

.rule-box::before {
    content: attr(data-label);
    position: absolute;
    top: -12px;
    left: 16px;
    background-color: var(--color-almost);
    color: #0f172a; /* high contrast dark text */
    font-size: 11px;
    font-weight: 800;
    padding: 2px 10px;
    border-radius: 30px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Purple Prerequisite / "Before I start" boxes */
.rule-box.purple,
.rule-box[data-label="Before I start" i],
.rule-box[data-label="Before you start" i],
.rule-box[data-label="Before you begin" i] {
    margin: 16px 0 20px 0;
    background-color: rgba(139, 92, 246, 0.05);
    border: 2px solid var(--color-strand-shape, #8b5cf6) !important;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.06) !important;
}

.rule-box.purple::before,
.rule-box[data-label="Before I start" i]::before,
.rule-box[data-label="Before you start" i]::before,
.rule-box[data-label="Before you begin" i]::before {
    background-color: var(--color-strand-shape, #8b5cf6);
    color: #ffffff; /* High-contrast crisp white text on purple */
}

html[data-theme="light"] .rule-box.purple,
html[data-theme="light"] .rule-box[data-label="Before I start" i],
html[data-theme="light"] .rule-box[data-label="Before you start" i],
html[data-theme="light"] .rule-box[data-label="Before you begin" i] {
    background-color: rgba(139, 92, 246, 0.06);
    border: 2px solid #7c3aed !important;
}

html[data-theme="light"] .rule-box.purple::before,
html[data-theme="light"] .rule-box[data-label="Before I start" i]::before,
html[data-theme="light"] .rule-box[data-label="Before you start" i]::before,
html[data-theme="light"] .rule-box[data-label="Before you begin" i]::before {
    background-color: #7c3aed;
    color: #ffffff;
}

/* Prerequisite Topic Hyperlinks inside "Before I start" boxes */
.topic-prereq-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    vertical-align: middle;
    margin: 2px 4px;
    padding: 3px 10px 3px 6px;
    border-radius: 20px;
    background: rgba(139, 92, 246, 0.12);
    border: 1px solid rgba(139, 92, 246, 0.38);
    color: var(--text-primary);
    font-size: 0.92em;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .topic-prereq-link {
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.32);
    color: #4c1d95;
}

.topic-prereq-link:hover {
    background: rgba(139, 92, 246, 0.24);
    border-color: var(--color-strand-shape, #8b5cf6);
    color: #ffffff;
    transform: translateY(-1.5px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
    text-decoration: none;
}

html[data-theme="light"] .topic-prereq-link:hover {
    background: rgba(124, 58, 237, 0.16);
    border-color: #7c3aed;
    color: #3b0764;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.22);
}

.topic-prereq-link:active {
    transform: translateY(0);
}

.topic-prereq-link .minor-strand-pixelart-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.topic-prereq-link:hover .minor-strand-pixelart-wrapper {
    transform: scale(1.15);
}

.topic-prereq-link .topic-link-title {
    line-height: 1.2;
    white-space: normal;
}

/* Line Feature Cards in Learn / Help sections */
.line-feature-card {
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.line-feature-card:hover {
    transform: translateY(-2px);
}

.line-feature-card.purple {
    background-color: rgba(168, 85, 247, 0.08);
    border: 1.5px solid rgba(168, 85, 247, 0.4);
}
.line-feature-card.purple:hover {
    border-color: #a855f7 !important;
    box-shadow: 0 0 14px rgba(168, 85, 247, 0.45);
}

.line-feature-card.blue {
    background-color: rgba(2, 132, 199, 0.08);
    border: 1.5px solid rgba(2, 132, 199, 0.4);
}
.line-feature-card.blue:hover {
    border-color: #0284c7 !important;
    box-shadow: 0 0 14px rgba(2, 132, 199, 0.45);
}

.line-feature-card.green {
    background-color: rgba(16, 185, 129, 0.08);
    border: 1.5px solid rgba(16, 185, 129, 0.4);
}
.line-feature-card.green:hover {
    border-color: #10b981 !important;
    box-shadow: 0 0 14px rgba(16, 185, 129, 0.45);
}

.line-feature-card.amber {
    background-color: rgba(245, 158, 11, 0.08);
    border: 1.5px solid rgba(245, 158, 11, 0.4);
}
.line-feature-card.amber:hover {
    border-color: #f59e0b !important;
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.45);
}

/* ==========================================================================
   Multi-Theme Flip Card Component System
   ========================================================================== */
.flip-card-grid,
[class*="-flip-grid"] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 16px 0 20px 0;
}
@media (max-width: 768px) {
    .flip-card-grid,
    [class*="-flip-grid"] {
        grid-template-columns: 1fr !important;
    }
}
.flip-card,
[class*="-flip-card"] {
    background-color: transparent;
    perspective: 1000px;
    cursor: pointer;
    user-select: none;
}
.flip-inner,
[class*="-flip-inner"] {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: left;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}
.flip-card.flipped .flip-inner,
.flip-card.flipped [class*="-flip-inner"],
[class*="-flip-card"].flipped .flip-inner,
[class*="-flip-card"].flipped [class*="-flip-inner"] {
    transform: rotateY(180deg);
}
.card-front, .card-back,
[class*="-card-front"], [class*="-card-back"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 10px;
    padding: 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.card-back,
[class*="-card-back"] {
    transform: rotateY(180deg);
}

/* Theme 1: Green (Vibrant Emerald / Ready) */
.theme-green .card-front,
.theme-green [class*="-card-front"],
[class*="-flip-card"].theme-green [class*="-card-front"] {
    background: rgba(16, 185, 129, 0.08) !important;
    border: 1.5px solid rgba(16, 185, 129, 0.45) !important;
}
.theme-green:hover .card-front,
.theme-green:hover [class*="-card-front"],
.theme-green .card-front:hover,
.theme-green [class*="-card-front"]:hover,
[class*="-flip-card"].theme-green:hover [class*="-card-front"],
[class*="-flip-card"].theme-green [class*="-card-front"]:hover {
    border-color: #10b981 !important;
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.2) !important;
}
.theme-green .card-back,
.theme-green [class*="-card-back"],
[class*="-flip-card"].theme-green [class*="-card-back"] {
    background: #092017 !important;
    border: 2px solid #10b981 !important;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.25) !important;
}
.theme-green .flip-hint-badge,
.theme-green [class*="flip-hint-badge"],
[class*="-flip-card"].theme-green .flip-hint-badge,
[class*="-flip-card"].theme-green [class*="flip-hint-badge"] {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34d399 !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
}
.theme-green .flip-back-badge,
.theme-green [class*="flip-back-badge"],
[class*="-flip-card"].theme-green .flip-back-badge,
[class*="-flip-card"].theme-green [class*="flip-back-badge"] {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #34d399 !important;
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
}
html[data-theme="light"] .theme-green .card-front,
html[data-theme="light"] .theme-green [class*="-card-front"],
html[data-theme="light"] [class*="-flip-card"].theme-green [class*="-card-front"] {
    background: #f0fdf4 !important;
    border: 1.5px solid #86efac !important;
}
html[data-theme="light"] .theme-green:hover .card-front,
html[data-theme="light"] .theme-green:hover [class*="-card-front"],
html[data-theme="light"] .theme-green .card-front:hover,
html[data-theme="light"] .theme-green [class*="-card-front"]:hover,
html[data-theme="light"] [class*="-flip-card"].theme-green:hover [class*="-card-front"],
html[data-theme="light"] [class*="-flip-card"].theme-green [class*="-card-front"]:hover {
    border-color: #10b981 !important;
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.15) !important;
}
html[data-theme="light"] .theme-green .card-back,
html[data-theme="light"] .theme-green [class*="-card-back"],
html[data-theme="light"] [class*="-flip-card"].theme-green [class*="-card-back"] {
    background: #ffffff !important;
    border: 2px solid #059669 !important;
    box-shadow: 0 8px 24px rgba(5, 150, 105, 0.15) !important;
}
html[data-theme="light"] .theme-green .flip-hint-badge,
html[data-theme="light"] .theme-green [class*="flip-hint-badge"],
html[data-theme="light"] [class*="-flip-card"].theme-green .flip-hint-badge,
html[data-theme="light"] [class*="-flip-card"].theme-green [class*="flip-hint-badge"],
html[data-theme="light"] .theme-green .flip-back-badge,
html[data-theme="light"] .theme-green [class*="flip-back-badge"],
html[data-theme="light"] [class*="-flip-card"].theme-green .flip-back-badge,
html[data-theme="light"] [class*="-flip-card"].theme-green [class*="flip-back-badge"] {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #047857 !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

/* Theme 2: Blue (Electric Sapphire / Primary) */
.theme-blue .card-front,
.theme-blue [class*="-card-front"],
[class*="-flip-card"].theme-blue [class*="-card-front"] {
    background: rgba(59, 130, 246, 0.08) !important;
    border: 1.5px solid rgba(59, 130, 246, 0.45) !important;
}
.theme-blue:hover .card-front,
.theme-blue:hover [class*="-card-front"],
.theme-blue .card-front:hover,
.theme-blue [class*="-card-front"]:hover,
[class*="-flip-card"].theme-blue:hover [class*="-card-front"],
[class*="-flip-card"].theme-blue [class*="-card-front"]:hover {
    border-color: #3b82f6 !important;
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.2) !important;
}
.theme-blue .card-back,
.theme-blue [class*="-card-back"],
[class*="-flip-card"].theme-blue [class*="-card-back"] {
    background: #0d1a33 !important;
    border: 2px solid #3b82f6 !important;
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.25) !important;
}
.theme-blue .flip-hint-badge,
.theme-blue [class*="flip-hint-badge"],
[class*="-flip-card"].theme-blue .flip-hint-badge,
[class*="-flip-card"].theme-blue [class*="flip-hint-badge"] {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #60a5fa !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
}
.theme-blue .flip-back-badge,
.theme-blue [class*="flip-back-badge"],
[class*="-flip-card"].theme-blue .flip-back-badge,
[class*="-flip-card"].theme-blue [class*="flip-back-badge"] {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #60a5fa !important;
    border: 1px solid rgba(59, 130, 246, 0.4) !important;
}
html[data-theme="light"] .theme-blue .card-front,
html[data-theme="light"] .theme-blue [class*="-card-front"],
html[data-theme="light"] [class*="-flip-card"].theme-blue [class*="-card-front"] {
    background: #eff6ff !important;
    border: 1.5px solid #93c5fd !important;
}
html[data-theme="light"] .theme-blue:hover .card-front,
html[data-theme="light"] .theme-blue:hover [class*="-card-front"],
html[data-theme="light"] .theme-blue .card-front:hover,
html[data-theme="light"] .theme-blue [class*="-card-front"]:hover,
html[data-theme="light"] [class*="-flip-card"].theme-blue:hover [class*="-card-front"],
html[data-theme="light"] [class*="-flip-card"].theme-blue [class*="-card-front"]:hover {
    border-color: #3b82f6 !important;
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.15) !important;
}
html[data-theme="light"] .theme-blue .card-back,
html[data-theme="light"] .theme-blue [class*="-card-back"],
html[data-theme="light"] [class*="-flip-card"].theme-blue [class*="-card-back"] {
    background: #ffffff !important;
    border: 2px solid #2563eb !important;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.15) !important;
}
html[data-theme="light"] .theme-blue .flip-hint-badge,
html[data-theme="light"] .theme-blue [class*="flip-hint-badge"],
html[data-theme="light"] [class*="-flip-card"].theme-blue .flip-hint-badge,
html[data-theme="light"] [class*="-flip-card"].theme-blue [class*="flip-hint-badge"],
html[data-theme="light"] .theme-blue .flip-back-badge,
html[data-theme="light"] .theme-blue [class*="flip-back-badge"],
html[data-theme="light"] [class*="-flip-card"].theme-blue .flip-back-badge,
html[data-theme="light"] [class*="-flip-card"].theme-blue [class*="flip-back-badge"] {
    background: rgba(37, 99, 235, 0.1) !important;
    color: #1d4ed8 !important;
    border: 1px solid rgba(37, 99, 235, 0.25) !important;
}

/* Theme 3: Purple (Royal Violet / Shape) */
.theme-purple .card-front,
.theme-purple [class*="-card-front"],
[class*="-flip-card"].theme-purple [class*="-card-front"] {
    background: rgba(139, 92, 246, 0.08) !important;
    border: 1.5px solid rgba(139, 92, 246, 0.45) !important;
}
.theme-purple:hover .card-front,
.theme-purple:hover [class*="-card-front"],
.theme-purple .card-front:hover,
.theme-purple [class*="-card-front"]:hover,
[class*="-flip-card"].theme-purple:hover [class*="-card-front"],
[class*="-flip-card"].theme-purple [class*="-card-front"]:hover {
    border-color: #8b5cf6 !important;
    box-shadow: 0 6px 16px rgba(139, 92, 246, 0.2) !important;
}
.theme-purple .card-back,
.theme-purple [class*="-card-back"],
[class*="-flip-card"].theme-purple [class*="-card-back"] {
    background: #17112c !important;
    border: 2px solid #8b5cf6 !important;
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.25) !important;
}
.theme-purple .flip-hint-badge,
.theme-purple [class*="flip-hint-badge"],
[class*="-flip-card"].theme-purple .flip-hint-badge,
[class*="-flip-card"].theme-purple [class*="flip-hint-badge"] {
    background: rgba(139, 92, 246, 0.15) !important;
    color: #c084fc !important;
    border: 1px solid rgba(139, 92, 246, 0.3) !important;
}
.theme-purple .flip-back-badge,
.theme-purple [class*="flip-back-badge"],
[class*="-flip-card"].theme-purple .flip-back-badge,
[class*="-flip-card"].theme-purple [class*="flip-back-badge"] {
    background: rgba(139, 92, 246, 0.2) !important;
    color: #c084fc !important;
    border: 1px solid rgba(139, 92, 246, 0.4) !important;
}
html[data-theme="light"] .theme-purple .card-front,
html[data-theme="light"] .theme-purple [class*="-card-front"],
html[data-theme="light"] [class*="-flip-card"].theme-purple [class*="-card-front"] {
    background: #f5f3ff !important;
    border: 1.5px solid #c4b5fd !important;
}
html[data-theme="light"] .theme-purple:hover .card-front,
html[data-theme="light"] .theme-purple:hover [class*="-card-front"],
html[data-theme="light"] .theme-purple .card-front:hover,
html[data-theme="light"] .theme-purple [class*="-card-front"]:hover,
html[data-theme="light"] [class*="-flip-card"].theme-purple:hover [class*="-card-front"],
html[data-theme="light"] [class*="-flip-card"].theme-purple [class*="-card-front"]:hover {
    border-color: #8b5cf6 !important;
    box-shadow: 0 6px 16px rgba(139, 92, 246, 0.15) !important;
}
html[data-theme="light"] .theme-purple .card-back,
html[data-theme="light"] .theme-purple [class*="-card-back"],
html[data-theme="light"] [class*="-flip-card"].theme-purple [class*="-card-back"] {
    background: #ffffff !important;
    border: 2px solid #7c3aed !important;
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.15) !important;
}
html[data-theme="light"] .theme-purple .flip-hint-badge,
html[data-theme="light"] .theme-purple [class*="flip-hint-badge"],
html[data-theme="light"] [class*="-flip-card"].theme-purple .flip-hint-badge,
html[data-theme="light"] [class*="-flip-card"].theme-purple [class*="flip-hint-badge"],
html[data-theme="light"] .theme-purple .flip-back-badge,
html[data-theme="light"] .theme-purple [class*="flip-back-badge"],
html[data-theme="light"] [class*="-flip-card"].theme-purple .flip-back-badge,
html[data-theme="light"] [class*="-flip-card"].theme-purple [class*="flip-back-badge"] {
    background: rgba(124, 58, 237, 0.1) !important;
    color: #6d28d9 !important;
    border: 1px solid rgba(124, 58, 237, 0.25) !important;
}

/* Theme 4: Amber (Warm Amber / Number) */
.theme-amber .card-front,
.theme-amber [class*="-card-front"],
[class*="-flip-card"].theme-amber [class*="-card-front"] {
    background: rgba(245, 158, 11, 0.08) !important;
    border: 1.5px solid rgba(245, 158, 11, 0.45) !important;
}
.theme-amber:hover .card-front,
.theme-amber:hover [class*="-card-front"],
.theme-amber .card-front:hover,
.theme-amber [class*="-card-front"]:hover,
[class*="-flip-card"].theme-amber:hover [class*="-card-front"],
[class*="-flip-card"].theme-amber [class*="-card-front"]:hover {
    border-color: #f59e0b !important;
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.2) !important;
}
.theme-amber .card-back,
.theme-amber [class*="-card-back"],
[class*="-flip-card"].theme-amber [class*="-card-back"] {
    background: #231607 !important;
    border: 2px solid #f59e0b !important;
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.25) !important;
}
.theme-amber .flip-hint-badge,
.theme-amber [class*="flip-hint-badge"],
[class*="-flip-card"].theme-amber .flip-hint-badge,
[class*="-flip-card"].theme-amber [class*="flip-hint-badge"] {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
}
.theme-amber .flip-back-badge,
.theme-amber [class*="flip-back-badge"],
[class*="-flip-card"].theme-amber .flip-back-badge,
[class*="-flip-card"].theme-amber [class*="flip-back-badge"] {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
}
html[data-theme="light"] .theme-amber .card-front,
html[data-theme="light"] .theme-amber [class*="-card-front"],
html[data-theme="light"] [class*="-flip-card"].theme-amber [class*="-card-front"] {
    background: #fffbeb !important;
    border: 1.5px solid #fde68a !important;
}
html[data-theme="light"] .theme-amber:hover .card-front,
html[data-theme="light"] .theme-amber:hover [class*="-card-front"],
html[data-theme="light"] .theme-amber .card-front:hover,
html[data-theme="light"] .theme-amber [class*="-card-front"]:hover,
html[data-theme="light"] [class*="-flip-card"].theme-amber:hover [class*="-card-front"],
html[data-theme="light"] [class*="-flip-card"].theme-amber [class*="-card-front"]:hover {
    border-color: #f59e0b !important;
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.15) !important;
}
html[data-theme="light"] .theme-amber .card-back,
html[data-theme="light"] .theme-amber [class*="-card-back"],
html[data-theme="light"] [class*="-flip-card"].theme-amber [class*="-card-back"] {
    background: #ffffff !important;
    border: 2px solid #d97706 !important;
    box-shadow: 0 8px 24px rgba(217, 119, 6, 0.15) !important;
}
html[data-theme="light"] .theme-amber .flip-hint-badge,
html[data-theme="light"] .theme-amber [class*="flip-hint-badge"],
html[data-theme="light"] [class*="-flip-card"].theme-amber .flip-hint-badge,
html[data-theme="light"] [class*="-flip-card"].theme-amber [class*="flip-hint-badge"],
html[data-theme="light"] .theme-amber .flip-back-badge,
html[data-theme="light"] .theme-amber [class*="flip-back-badge"],
html[data-theme="light"] [class*="-flip-card"].theme-amber .flip-back-badge,
html[data-theme="light"] [class*="-flip-card"].theme-amber [class*="flip-back-badge"] {
    background: rgba(217, 119, 6, 0.1) !important;
    color: #b45309 !important;
    border: 1px solid rgba(217, 119, 6, 0.25) !important;
}

/* Theme 5: Cyan (Electric Cyan / Strand) */
.theme-cyan .card-front,
.theme-cyan [class*="-card-front"],
[class*="-flip-card"].theme-cyan [class*="-card-front"] {
    background: rgba(6, 182, 212, 0.08) !important;
    border: 1.5px solid rgba(6, 182, 212, 0.45) !important;
}
.theme-cyan:hover .card-front,
.theme-cyan:hover [class*="-card-front"],
.theme-cyan .card-front:hover,
.theme-cyan [class*="-card-front"]:hover,
[class*="-flip-card"].theme-cyan:hover [class*="-card-front"],
[class*="-flip-card"].theme-cyan [class*="-card-front"]:hover {
    border-color: #06b6d4 !important;
    box-shadow: 0 6px 16px rgba(6, 182, 212, 0.2) !important;
}
.theme-cyan .card-back,
.theme-cyan [class*="-card-back"],
[class*="-flip-card"].theme-cyan [class*="-card-back"] {
    background: #081d24 !important;
    border: 2px solid #06b6d4 !important;
    box-shadow: 0 8px 24px rgba(6, 182, 212, 0.25) !important;
}
.theme-cyan .flip-hint-badge,
.theme-cyan [class*="flip-hint-badge"],
[class*="-flip-card"].theme-cyan .flip-hint-badge,
[class*="-flip-card"].theme-cyan [class*="flip-hint-badge"] {
    background: rgba(6, 182, 212, 0.15) !important;
    color: #22d3ee !important;
    border: 1px solid rgba(6, 182, 212, 0.3) !important;
}
.theme-cyan .flip-back-badge,
.theme-cyan [class*="flip-back-badge"],
[class*="-flip-card"].theme-cyan .flip-back-badge,
[class*="-flip-card"].theme-cyan [class*="flip-back-badge"] {
    background: rgba(6, 182, 212, 0.2) !important;
    color: #22d3ee !important;
    border: 1px solid rgba(6, 182, 212, 0.4) !important;
}
html[data-theme="light"] .theme-cyan .card-front,
html[data-theme="light"] .theme-cyan [class*="-card-front"],
html[data-theme="light"] [class*="-flip-card"].theme-cyan [class*="-card-front"] {
    background: #ecfeff !important;
    border: 1.5px solid #a5f3fc !important;
}
html[data-theme="light"] .theme-cyan:hover .card-front,
html[data-theme="light"] .theme-cyan:hover [class*="-card-front"],
html[data-theme="light"] .theme-cyan .card-front:hover,
html[data-theme="light"] .theme-cyan [class*="-card-front"]:hover,
html[data-theme="light"] [class*="-flip-card"].theme-cyan:hover [class*="-card-front"],
html[data-theme="light"] [class*="-flip-card"].theme-cyan [class*="-card-front"]:hover {
    border-color: #06b6d4 !important;
    box-shadow: 0 6px 16px rgba(6, 182, 212, 0.15) !important;
}
html[data-theme="light"] .theme-cyan .card-back,
html[data-theme="light"] .theme-cyan [class*="-card-back"],
html[data-theme="light"] [class*="-flip-card"].theme-cyan [class*="-card-back"] {
    background: #ffffff !important;
    border: 2px solid #0891b2 !important;
    box-shadow: 0 8px 24px rgba(8, 145, 178, 0.15) !important;
}
html[data-theme="light"] .theme-cyan .flip-hint-badge,
html[data-theme="light"] .theme-cyan [class*="flip-hint-badge"],
html[data-theme="light"] [class*="-flip-card"].theme-cyan .flip-hint-badge,
html[data-theme="light"] [class*="-flip-card"].theme-cyan [class*="flip-hint-badge"],
html[data-theme="light"] .theme-cyan .flip-back-badge,
html[data-theme="light"] .theme-cyan [class*="flip-back-badge"],
html[data-theme="light"] [class*="-flip-card"].theme-cyan .flip-back-badge,
html[data-theme="light"] [class*="-flip-card"].theme-cyan [class*="flip-back-badge"] {
    background: rgba(8, 145, 178, 0.1) !important;
    color: #0e7490 !important;
    border: 1px solid rgba(8, 145, 178, 0.25) !important;
}

/* Theme 6: Rose (Vibrant Rose / Alert) */
.theme-rose .card-front,
.theme-rose [class*="-card-front"],
[class*="-flip-card"].theme-rose [class*="-card-front"] {
    background: rgba(244, 63, 94, 0.08) !important;
    border: 1.5px solid rgba(244, 63, 94, 0.45) !important;
}
.theme-rose:hover .card-front,
.theme-rose:hover [class*="-card-front"],
.theme-rose .card-front:hover,
.theme-rose [class*="-card-front"]:hover,
[class*="-flip-card"].theme-rose:hover [class*="-card-front"],
[class*="-flip-card"].theme-rose [class*="-card-front"]:hover {
    border-color: #f43f5e !important;
    box-shadow: 0 6px 16px rgba(244, 63, 94, 0.2) !important;
}
.theme-rose .card-back,
.theme-rose [class*="-card-back"],
[class*="-flip-card"].theme-rose [class*="-card-back"] {
    background: #250d15 !important;
    border: 2px solid #f43f5e !important;
    box-shadow: 0 8px 24px rgba(244, 63, 94, 0.25) !important;
}
.theme-rose .flip-hint-badge,
.theme-rose [class*="flip-hint-badge"],
[class*="-flip-card"].theme-rose .flip-hint-badge,
[class*="-flip-card"].theme-rose [class*="flip-hint-badge"] {
    background: rgba(244, 63, 94, 0.15) !important;
    color: #fb7185 !important;
    border: 1px solid rgba(244, 63, 94, 0.3) !important;
}
.theme-rose .flip-back-badge,
.theme-rose [class*="flip-back-badge"],
[class*="-flip-card"].theme-rose .flip-back-badge,
[class*="-flip-card"].theme-rose [class*="flip-back-badge"] {
    background: rgba(244, 63, 94, 0.2) !important;
    color: #fb7185 !important;
    border: 1px solid rgba(244, 63, 94, 0.4) !important;
}
html[data-theme="light"] .theme-rose .card-front,
html[data-theme="light"] .theme-rose [class*="-card-front"],
html[data-theme="light"] [class*="-flip-card"].theme-rose [class*="-card-front"] {
    background: #fff1f2 !important;
    border: 1.5px solid #fecdd3 !important;
}
html[data-theme="light"] .theme-rose:hover .card-front,
html[data-theme="light"] .theme-rose:hover [class*="-card-front"],
html[data-theme="light"] .theme-rose .card-front:hover,
html[data-theme="light"] .theme-rose [class*="-card-front"]:hover,
html[data-theme="light"] [class*="-flip-card"].theme-rose:hover [class*="-card-front"],
html[data-theme="light"] [class*="-flip-card"].theme-rose [class*="-card-front"]:hover {
    border-color: #f43f5e !important;
    box-shadow: 0 6px 16px rgba(244, 63, 94, 0.15) !important;
}
html[data-theme="light"] .theme-rose .card-back,
html[data-theme="light"] .theme-rose [class*="-card-back"],
html[data-theme="light"] [class*="-flip-card"].theme-rose [class*="-card-back"] {
    background: #ffffff !important;
    border: 2px solid #e11d48 !important;
    box-shadow: 0 8px 24px rgba(225, 29, 72, 0.15) !important;
}
html[data-theme="light"] .theme-rose .flip-hint-badge,
html[data-theme="light"] .theme-rose [class*="flip-hint-badge"],
html[data-theme="light"] [class*="-flip-card"].theme-rose .flip-hint-badge,
html[data-theme="light"] [class*="-flip-card"].theme-rose [class*="flip-hint-badge"],
html[data-theme="light"] .theme-rose .flip-back-badge,
html[data-theme="light"] .theme-rose [class*="flip-back-badge"],
html[data-theme="light"] [class*="-flip-card"].theme-rose .flip-back-badge,
html[data-theme="light"] [class*="-flip-card"].theme-rose [class*="flip-back-badge"] {
    background: rgba(225, 29, 72, 0.1) !important;
    color: #be123c !important;
    border: 1px solid rgba(225, 29, 72, 0.25) !important;
}

/* Static View Info Box System (Non-interactive Themed Info Cards) */
.view-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 20px 0;
}
@media (max-width: 768px) {
    .view-info-grid {
        grid-template-columns: 1fr;
    }
}
.view-info-box {
    border-radius: 10px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
    cursor: default;
    user-select: text;
}
.view-info-box h4 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
}
.view-info-box p {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
}
.view-info-box.theme-blue {
    background: rgba(59, 130, 246, 0.08);
    border: 1.5px solid rgba(59, 130, 246, 0.45);
}
.view-info-box.theme-blue h4,
.view-info-box.theme-blue strong.rule-tag {
    color: #38bdf8;
}
.view-info-box.theme-amber {
    background: rgba(245, 158, 11, 0.08);
    border: 1.5px solid rgba(245, 158, 11, 0.45);
}
.view-info-box.theme-amber h4,
.view-info-box.theme-amber strong.rule-tag {
    color: #f59e0b;
}
.view-info-box.theme-purple {
    background: rgba(168, 85, 247, 0.08);
    border: 1.5px solid rgba(168, 85, 247, 0.45);
}
.view-info-box.theme-purple h4,
.view-info-box.theme-purple strong.rule-tag {
    color: #a855f7;
}

html[data-theme="light"] .view-info-box.theme-blue {
    background: #eff6ff;
    border: 1.5px solid #93c5fd;
}
html[data-theme="light"] .view-info-box.theme-blue h4,
html[data-theme="light"] .view-info-box.theme-blue strong.rule-tag {
    color: #0284c7;
}
html[data-theme="light"] .view-info-box.theme-amber {
    background: #fffbeb;
    border: 1.5px solid #fde68a;
}
html[data-theme="light"] .view-info-box.theme-amber h4,
html[data-theme="light"] .view-info-box.theme-amber strong.rule-tag {
    color: #d97706;
}
html[data-theme="light"] .view-info-box.theme-purple {
    background: #faf5ff;
    border: 1.5px solid #e9d5ff;
}
html[data-theme="light"] .view-info-box.theme-purple h4,
html[data-theme="light"] .view-info-box.theme-purple strong.rule-tag {
    color: #7e22ce;
}


/* Interactive "Now you try it" box replacing details accordion */
.now-you-try-box {
    margin: 12px 0 24px 0;
    border: 2px solid var(--color-almost) !important; /* styled in amber to emphasize try state */
    border-radius: var(--border-radius-md);
    background-color: var(--bg-tertiary);
    padding: 16px;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.08) !important;
}

.now-you-try-content {
    font-size: 14px;
}

.now-you-try-question-prompt {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 16px;
    color: var(--text-primary);
}

/* Smaller inputs and buttons for inline questions */
.input-answer-sm {
    width: 100%;
    font-size: 14px;
    padding: 8px 12px;
    border-radius: var(--border-radius-sm);
    background-color: var(--bg-secondary);
    border: 1.5px solid var(--border);
    color: var(--text-primary);
    outline: none;
    transition: border-color var(--transition-fast);
}

.input-answer-sm:focus {
    border-color: var(--border-focus);
}

.form-group-sm {
    margin-bottom: 8px;
    text-align: left;
}

.form-label-sm {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 4px;
    display: block;
}

.now-you-try-feedback {
    display: none;
    margin-bottom: 12px;
    padding: 10px 14px;
    border-radius: var(--border-radius-sm);
    font-size: 13px;
    text-align: left;
}

.now-you-try-feedback.feedback-correct {
    background-color: rgba(16, 185, 129, 0.1);
    color: var(--color-ready);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.now-you-try-feedback.feedback-caution {
    background-color: rgba(245, 158, 11, 0.1);
    color: var(--color-almost);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.now-you-try-feedback.feedback-incorrect {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--color-needs);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.btn-sm {
    padding: 6px 12px !important;
    font-size: 12px !important;
    border-radius: var(--border-radius-sm) !important;
}

/* SVG pictures styling in "Where is this useful" */
.where-useful-container,
.where-useful-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
    justify-content: center;
}

.where-useful-card {
    flex: 1 1 280px;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-lg);
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.where-useful-card h3 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--color-ready) !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
}

.where-useful-card p {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--text-primary) !important;
    margin-top: 10px !important;
    line-height: 1.6 !important;
}

.where-useful-card img,
.where-useful-image img,
.where-useful-section img {
    width: 100% !important;
    max-width: 300px !important;
    height: 160px !important;
    object-fit: cover !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--border-radius-md) !important;
    margin-top: 14px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    box-sizing: border-box !important;
}

.where-useful-card svg {
    width: 100% !important;
    max-width: 340px !important;
    height: auto !important;
    min-height: 120px !important;
    margin-top: 16px !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--border-radius-md) !important;
    background-color: var(--bg-primary) !important;
    padding: 14px !important;
    box-sizing: border-box !important;
}

.where-useful-card svg text {
    font-size: 14px !important;
    font-weight: 600 !important;
    fill: var(--text-primary) !important;
}

/* Learn tab cards matched to practice mode border and shadow */
#tab-panel-learn .card {
    border: 2px solid var(--primary) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1) !important;
}

/* "Where is this useful" section styled as a card below worked examples */
.where-useful-section {
    margin-top: 24px;
    padding: 20px;
    background-color: var(--bg-secondary);
    border: 2px solid var(--primary) !important;
    border-radius: var(--border-radius-lg) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.05) !important;
}

.where-useful-section h1 {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    color: var(--text-primary) !important;
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
}

.where-useful-section h2,
.where-useful-section h3 {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    color: var(--color-ready) !important;
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    font-size: 18px !important;
}

/* MathLive Math Field Custom Styles */
math-field::part(virtual-keyboard-toggle) {
    display: none !important;
}

math-field::part(menu-toggle) {
    display: none !important;
}

math-field::part(placeholder) {
    font-style: normal !important;
    font-family: var(--font-body), sans-serif !important;
    color: var(--text-muted) !important;
    opacity: 0.6;
}

/* Custom Math Keyboard Button Styles */
.key-btn.shift-key,
.key-btn.hide-key,
.key-btn.del-key,
.key-btn.switch-keyboard-btn {
    background-color: rgba(245, 158, 11, 0.1) !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
    border-bottom: 2px solid rgba(180, 100, 0, 0.5) !important;
    color: #f59e0b !important;
    font-size: 13.5px;
    font-weight: bold;
    box-shadow:
        inset 0 1px 0 rgba(255, 210, 100, 0.15),
        inset 0 -1px 0 rgba(120, 60, 0, 0.2),
        0 2px 4px rgba(0,0,0,0.25);
}

.key-btn.shift-active,
.key-btn.hide-key:hover,
.key-btn.del-key:hover,
.key-btn.switch-keyboard-btn:hover {
    background-color: #f59e0b !important;
    color: white !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.2),
        inset 0 -1px 0 rgba(120, 60, 0, 0.3),
        0 0 8px rgba(245, 158, 11, 0.5),
        0 2px 4px rgba(0,0,0,0.25);
}

/* Floating Switch Keyboard Button (visible when switched to system keyboard in uncertain situation) */
.switch-keyboard-floating-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    width: 44px;
    height: 44px;
    border-radius: var(--border-radius-sm, 6px);
    background-color: #f59e0b;
    border: 1px solid #d97706;
    border-bottom: 2px solid rgba(180, 100, 0, 0.8);
    color: #ffffff;
    font-size: 22px;
    font-weight: bold;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    user-select: none;
    transition: transform var(--transition-fast, 0.15s), background-color var(--transition-fast, 0.15s);
}

.switch-keyboard-floating-btn:hover {
    background-color: #d97706;
    transform: scale(1.06);
}

.switch-keyboard-floating-btn:active {
    transform: scale(0.95);
}

.key-btn.space-btn {
    font-size: 13.5px;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.math-keyboard.is-shifted .key-btn[data-shift-label=""] {
    cursor: default;
}

.math-keyboard.is-shifted .key-btn[data-shift-label=""]:hover {
    background-color: var(--bg-tertiary);
    transform: none;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        inset 0 -1px 0 rgba(0,0,0,0.2),
        0 2px 4px rgba(0,0,0,0.25);
}

.math-keyboard.is-shifted .key-btn[data-shift-label=""]:active {
    transform: none;
    border-bottom-width: 2px;
}

.math-keyboard.is-shifted .key-btn.op-key {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border);
    border-bottom-color: rgba(0, 0, 0, 0.4);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        0 2px 4px rgba(0, 0, 0, 0.25);
}

/* Question Prompt Mathfield Overrides */
.question-prompt-mathfield,
math-field[read-only],
math-field[readonly] {
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    pointer-events: none !important;
    user-select: none !important;
    color: var(--text-primary) !important;
    display: block !important;
    width: 100% !important;
    --background: transparent !important;
    --text-color: var(--text-primary) !important;
    --caret-color: transparent !important;
    --contains-highlight: transparent !important;
}

.question-prompt-mathfield::part(container),
math-field[read-only]::part(container),
math-field[readonly]::part(container) {
    background-color: transparent !important;
    background: transparent !important;
    color: var(--text-primary) !important;
    border: none !important;
    box-shadow: none !important;
}

math-field.inline-math-prompt,
math-field[read-only].inline-math-prompt,
math-field[readonly].inline-math-prompt {
    display: inline-block !important;
    font-size: inherit !important;
    width: auto !important;
    max-width: 100% !important;
    vertical-align: baseline !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    min-height: 0 !important;
    min-width: 0 !important;
}

math-field.inline-math-prompt::part(container) {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    min-height: 0 !important;
    min-width: 0 !important;
}

code math-field.inline-math-prompt,
code math-field[read-only].inline-math-prompt,
code math-field[readonly].inline-math-prompt,
.question-prompt math-field.inline-math-prompt,
.question-prompt math-field[read-only].inline-math-prompt,
#help-markdown-container code math-field,
#examples-markdown-container code math-field,
.worked-example code math-field,
#hint-content code math-field {
    vertical-align: middle !important;
    line-height: 1 !important;
}

/* Global Math-Field Theme Defaults */
math-field {
    --background: transparent !important;
    --text-color: var(--text-primary) !important;
}

/* Editable Math Field Cursor, Caret, Highlights, and Selection */
math-field:not([read-only]):not([readonly]) {
    --caret-color: #60a5fa !important;
    --caret-width: 3px !important;
    caret-color: #60a5fa;
    --contains-highlight-background-color: var(--math-highlight-bg) !important;
    --contains-highlight: var(--math-highlight-bg) !important;
    --selection-background-color: var(--math-selection-bg) !important;
    --selection-color: inherit !important;
}

/* ── Fraction Key Button ─────────────────────────────────────────── */
.frac-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

/* Normal state: ■ over horizontal line over ■ */
.frac-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    line-height: 1;
}

.frac-top,
.frac-bot {
    font-size: 10px;
    line-height: 1;
    user-select: none;
}

.frac-line {
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    flex-shrink: 0;
}

/* Shifted state: ■ ■/■ (mixed fraction) */
/* The whole-number square sits to the left, vertically centred on the fraction line */
.frac-btn.shifted {
    position: relative;
    padding-left: 12.6px;
}

.frac-btn.shifted .frac-icon {
    position: relative;
}

.frac-btn.shifted .frac-icon::before {
    content: "\25A0";  /* ■ */
    font-size: 10px;
    display: block;
    position: absolute;
    /* Sit exactly on the fraction line: frac-top (10px) + gap (2px) + half of line (1px) */
    top: calc(10px + 2px + 1px);
    transform: translate(-19.8px, -50%);
    line-height: 1;
}

/* Normal state: Column Vector ( ■ over ■ in parentheses ) */
.vector-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.vector-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-family: var(--font-math, 'KaTeX_Math', 'Cambria Math', serif);
}

.vector-paren {
    font-size: 18px;
    font-weight: 300;
    line-height: 1;
    transform: scaleY(1.35);
    user-select: none;
    color: currentColor;
}

.vector-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    margin: 0 1px;
}

.vector-top,
.vector-bot {
    font-size: 6.75px;
    line-height: 1;
    user-select: none;
    color: currentColor;
}

/* ── SVG Diagrams Styling ────────────────────────────────────────── */
.question-prompt svg,
.now-you-try-question-prompt svg,
.worked-example svg:not(.where-useful-card svg),
#help-markdown-container svg:not(.where-useful-card svg) {
    border: 1px solid var(--border);
    display: block;
    margin: 12px 0;
}

/* Style emphasis in help and worked examples to use standard body font italics */
#help-markdown-container em,
#examples-markdown-container em,
.now-you-try-box em,
.worked-example em,
#hint-content em {
    font-family: inherit !important;
    font-style: italic !important;
    font-size: inherit !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    color: inherit !important;
}

#help-markdown-container .now-you-try-box math-field.inline-math-prompt,
#examples-markdown-container .now-you-try-box math-field.inline-math-prompt,
.now-you-try-box math-field.inline-math-prompt {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
}

/* Unified mathematical element emphasis tags across Learn section, worked examples, and hints */
#help-markdown-container code,
#examples-markdown-container code,
.worked-example code,
#hint-content code {
    background-color: var(--primary-bg-light) !important;
    border: 1px solid var(--primary) !important;
    border-radius: var(--border-radius-sm) !important;
    padding: 2px 6px !important;
    font-family: var(--font-sans) !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    display: inline-block !important;
    margin: 2px !important;
    vertical-align: middle !important;
}
.math-var,
#help-markdown-container .math-var,
#examples-markdown-container .math-var,
.worked-example .math-var,
#hint-content .math-var {
    font-family: 'Times New Roman', Times, serif !important;
    font-style: italic !important;
    font-size: 1.15em !important;
    display: inline !important;
}

/* Dark mode: High-contrast bold text in Learn theory / help content */
html[data-theme="dark"] #tab-panel-learn strong,
html[data-theme="dark"] #tab-panel-learn b {
    color: var(--text-primary);
}

/* Preserve default styling inside Worked Examples and "Where is this useful" */
html[data-theme="dark"] #tab-panel-learn .worked-example strong,
html[data-theme="dark"] #tab-panel-learn .worked-example b,
html[data-theme="dark"] #tab-panel-learn .worked-example-box strong,
html[data-theme="dark"] #tab-panel-learn .worked-example-box b,
html[data-theme="dark"] #worked-examples-wrapper-card strong,
html[data-theme="dark"] #worked-examples-wrapper-card b,
html[data-theme="dark"] #tab-panel-learn .where-useful-section strong,
html[data-theme="dark"] #tab-panel-learn .where-useful-section b,
html[data-theme="dark"] #where-useful-box-container strong,
html[data-theme="dark"] #where-useful-box-container b {
    color: inherit;
}

/* Warning highlight for empty required inputs in Test Mode */
@keyframes yellow-fade-out {
    0% {
        background-color: rgba(245, 158, 11, 0.15); /* Yellow/amber fill */
        border-color: var(--color-almost);            /* Yellow/amber outline */
    }
    100% {
        background-color: var(--bg-tertiary);        /* Fade back to default */
        border-color: var(--border);
    }
}

.highlight-empty-warning {
    animation: yellow-fade-out 1s ease-out forwards !important;
}

/* Curriculum Title Centered */
.curriculum-heading {
    text-align: center;
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 800;
    margin: 24px 0 16px;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

/* Sort Section Headers, My Topics, and Minor Stream Bars */
.sort-section-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 24px;
    margin-bottom: 12px;
    padding: 0 4px;
}

.sort-section-title-line {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.sort-section-title {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.sort-section-line {
    flex: 1;
    height: 1px;
    transition: background-color var(--transition-normal, 0.25s ease);
}

/* My Topics Heading Colors & Actions */
.sort-section-header.strand-mytopics .sort-section-title,
.sort-section-header.strand-mychapters .sort-section-title {
    font-size: 19.5px;
    padding: 6px 18px;
    border-radius: 30px;
    border: 1.5px solid var(--color-strand-mytopics, var(--color-strand-mychapters));
    color: var(--color-strand-mytopics, var(--color-strand-mychapters));
    background-color: rgba(6, 182, 212, 0.12);
    line-height: 1;
    display: inline-flex;
    align-items: center;
}
.sort-section-header.strand-mytopics .sort-section-line,
.sort-section-header.strand-mychapters .sort-section-line {
    background-color: rgba(6, 182, 212, 0.4);
}

.my-topics-btn-group,
.my-chapters-btn-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-mytopics-action,
.btn-mychapters-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-strand-mytopics, var(--color-strand-mychapters));
    background: rgba(6, 182, 212, 0.08);
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: var(--border-radius-md);
    padding: 4px 10px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-mytopics-action:hover:not(:disabled),
.btn-mychapters-action:hover:not(:disabled) {
    background: rgba(6, 182, 212, 0.2);
    border-color: var(--color-strand-mytopics, var(--color-strand-mychapters));
    transform: translateY(-1px);
}

.btn-mytopics-action:disabled,
.btn-mychapters-action:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Strand Section Heading Colors - Matches Stage Circles */
.sort-section-header.strand-number .sort-section-title {
    border-color: var(--color-strand-number);
    color: var(--color-strand-number);
    background-color: rgba(245, 158, 11, 0.08);
}
.sort-section-header.strand-number .sort-section-line {
    background-color: rgba(245, 158, 11, 0.35);
}

.sort-section-header.strand-algebra .sort-section-title {
    border-color: var(--color-strand-algebra);
    color: var(--color-strand-algebra);
    background-color: rgba(239, 68, 68, 0.08);
}
.sort-section-header.strand-algebra .sort-section-line {
    background-color: rgba(239, 68, 68, 0.35);
}

.sort-section-header.strand-shape .sort-section-title {
    border-color: var(--color-strand-shape);
    color: var(--color-strand-shape);
    background-color: rgba(139, 92, 246, 0.08);
}
.sort-section-header.strand-shape .sort-section-line {
    background-color: rgba(139, 92, 246, 0.35);
}

.sort-section-header.strand-data .sort-section-title {
    border-color: var(--color-strand-data);
    color: var(--color-strand-data);
    background-color: rgba(16, 185, 129, 0.08);
}
.sort-section-header.strand-data .sort-section-line {
    background-color: rgba(16, 185, 129, 0.35);
}

/* Major Strand Navigation Tabs on Sort Section Header */
.major-strands-header .sort-section-title-line {
    flex-wrap: wrap;
    row-gap: 8px;
}

.major-strand-course-prefix {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    user-select: none;
    padding-left: 2px;
}

.major-strand-course-name {
    font-family: var(--font-heading);
    font-size: 19.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #ffffff;
    border: 1.5px solid #ffffff;
    border-radius: 30px;
    padding: 6px 18px;
    background-color: rgba(255, 255, 255, 0.08);
    white-space: nowrap;
    line-height: 1;
    cursor: default;
    display: inline-flex;
    align-items: center;
}

html[data-theme="light"] .major-strand-course-name {
    color: var(--text-primary);
    border-color: var(--text-primary);
    background-color: rgba(15, 23, 42, 0.06);
}

.major-strand-course-arrow {
    color: var(--text-muted);
    opacity: 0.85;
    flex-shrink: 0;
    display: block;
    transition: color var(--transition-fast, 0.15s ease), opacity var(--transition-fast, 0.15s ease);
}

.major-strands-buttons-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.major-strand-btn {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid transparent;
    white-space: nowrap;
    background: transparent;
    cursor: pointer;
    transition: all var(--transition-fast, 0.15s ease);
    outline: none;
    user-select: none;
}

.major-strand-btn:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

/* Inactive State: Greyed out text with outline in strand colour */
.major-strand-btn.strand-number {
    border-color: var(--color-strand-number);
    color: var(--text-muted);
}
.major-strand-btn.strand-number:hover:not(.active) {
    color: var(--text-primary);
    background-color: rgba(245, 158, 11, 0.08);
}

.major-strand-btn.strand-algebra {
    border-color: var(--color-strand-algebra);
    color: var(--text-muted);
}
.major-strand-btn.strand-algebra:hover:not(.active) {
    color: var(--text-primary);
    background-color: rgba(239, 68, 68, 0.08);
}

.major-strand-btn.strand-shape {
    border-color: var(--color-strand-shape);
    color: var(--text-muted);
}
.major-strand-btn.strand-shape:hover:not(.active) {
    color: var(--text-primary);
    background-color: rgba(139, 92, 246, 0.08);
}

.major-strand-btn.strand-data {
    border-color: var(--color-strand-data);
    color: var(--text-muted);
}
.major-strand-btn.strand-data:hover:not(.active) {
    color: var(--text-primary);
    background-color: rgba(16, 185, 129, 0.08);
}

/* Active State: Full strand color, background tint, and subtle glow */
.major-strand-btn.strand-number.active {
    border-color: var(--color-strand-number);
    color: var(--color-strand-number);
    background-color: rgba(245, 158, 11, 0.14);
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.22);
}

.major-strand-btn.strand-algebra.active {
    border-color: var(--color-strand-algebra);
    color: var(--color-strand-algebra);
    background-color: rgba(239, 68, 68, 0.14);
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.22);
}

.major-strand-btn.strand-shape.active {
    border-color: var(--color-strand-shape);
    color: var(--color-strand-shape);
    background-color: rgba(139, 92, 246, 0.14);
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.22);
}

.major-strand-btn.strand-data.active {
    border-color: var(--color-strand-data);
    color: var(--color-strand-data);
    background-color: rgba(16, 185, 129, 0.14);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.22);
}

/* Search Mode Button in Major Strands Navigation */
.major-strand-btn.major-strand-search-btn {
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--text-muted);
    padding: 4px 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.major-strand-btn.major-strand-search-btn:hover:not(.active) {
    color: var(--text-primary);
    border-color: var(--text-secondary);
    background-color: rgba(255, 255, 255, 0.08);
}
.major-strand-btn.major-strand-search-btn.active {
    border-color: #3b82f6;
    color: #60a5fa;
    background-color: rgba(59, 130, 246, 0.14);
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.22);
}
html[data-theme="light"] .major-strand-btn.major-strand-search-btn {
    border-color: rgba(0, 0, 0, 0.18);
}
html[data-theme="light"] .major-strand-btn.major-strand-search-btn.active {
    border-color: #2563eb;
    color: #1d4ed8;
    background-color: rgba(37, 99, 235, 0.12);
}

.sort-section-header.strand-search .sort-section-line {
    background-color: rgba(59, 130, 246, 0.35);
}

@media (max-width: 480px) {
    .sort-section-header.strand-mytopics .sort-section-title,
    .sort-section-header.strand-mychapters .sort-section-title {
        font-size: 15px;
        padding: 5px 14px;
        border-radius: 24px;
        letter-spacing: 0.06em;
    }
    .major-strand-course-prefix {
        gap: 6px;
    }
    .major-strand-course-name {
        font-size: 15px;
        padding: 5px 14px;
        border-radius: 24px;
        letter-spacing: 0.06em;
    }
    .major-strand-course-arrow {
        width: 20px;
        height: 9px;
    }
    .major-strand-btn {
        font-size: 11.5px;
        padding: 3px 8px;
        letter-spacing: 0.05em;
    }
    .major-strand-btn.major-strand-search-btn {
        padding: 3px 7px;
    }
}

/* Stage Section Heading Colors - Neutral Theme */
.sort-section-header.sort-stage .sort-section-title {
    border-color: var(--border-focus);
    color: #ffffff !important;
    background-color: var(--border-focus);
}
.sort-section-header.sort-stage .sort-section-line {
    background-color: var(--border-focus);
    opacity: 0.5;
}

/* Minor Stream Selector Buttons */
.minor-streams-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-left: 4px;
    margin-top: 2px;
}

.minor-stream-btn {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 10px;
    border-radius: 16px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
}

/* Number Minor Stream Buttons */
.sort-section-header.strand-number .minor-stream-btn {
    border-color: rgba(245, 158, 11, 0.3);
    color: var(--text-muted);
}
.sort-section-header.strand-number .minor-stream-btn:hover {
    border-color: var(--color-strand-number);
    color: var(--color-strand-number);
    background-color: rgba(245, 158, 11, 0.08);
}
.sort-section-header.strand-number .minor-stream-btn.active {
    border-color: var(--color-strand-number);
    color: var(--color-strand-number);
    background-color: rgba(245, 158, 11, 0.18);
    font-weight: 800;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.25);
}

/* Algebra Minor Stream Buttons */
.sort-section-header.strand-algebra .minor-stream-btn {
    border-color: rgba(239, 68, 68, 0.3);
    color: var(--text-muted);
}
.sort-section-header.strand-algebra .minor-stream-btn:hover {
    border-color: var(--color-strand-algebra);
    color: var(--color-strand-algebra);
    background-color: rgba(239, 68, 68, 0.08);
}
.sort-section-header.strand-algebra .minor-stream-btn.active {
    border-color: var(--color-strand-algebra);
    color: var(--color-strand-algebra);
    background-color: rgba(239, 68, 68, 0.18);
    font-weight: 800;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.25);
}

/* Shape / Geometry Minor Stream Buttons */
.sort-section-header.strand-shape .minor-stream-btn {
    border-color: rgba(139, 92, 246, 0.3);
    color: var(--text-muted);
}
.sort-section-header.strand-shape .minor-stream-btn:hover {
    border-color: var(--color-strand-shape);
    color: var(--color-strand-shape);
    background-color: rgba(139, 92, 246, 0.08);
}
.sort-section-header.strand-shape .minor-stream-btn.active {
    border-color: var(--color-strand-shape);
    color: var(--color-strand-shape);
    background-color: rgba(139, 92, 246, 0.18);
    font-weight: 800;
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.25);
}

/* Data Minor Stream Buttons */
.sort-section-header.strand-data .minor-stream-btn {
    border-color: rgba(16, 185, 129, 0.3);
    color: var(--text-muted);
}
.sort-section-header.strand-data .minor-stream-btn:hover {
    border-color: var(--color-strand-data);
    color: var(--color-strand-data);
    background-color: rgba(16, 185, 129, 0.08);
}
.sort-section-header.strand-data .minor-stream-btn.active {
    border-color: var(--color-strand-data);
    color: var(--color-strand-data);
    background-color: rgba(16, 185, 129, 0.18);
    font-weight: 800;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.25);
}

/* Stage Circle Hover, Sheen & Green Tick Badge */
.stage-circle-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.my-chapters-green-tick {
    position: absolute;
    bottom: -2px;
    left: -2px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background-color: var(--color-ready);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 0 5px rgba(16, 185, 129, 0.8);
}

.stage-circle-wrapper.topic-stage-wrapper .my-chapters-green-tick {
    width: 9px;
    height: 9px;
    bottom: -1px;
    left: -1px;
}

.stage-circle {
    position: relative;
    overflow: hidden;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.stage-circle .stage-hover-icon {
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.stage-circle:hover .stage-text {
    display: none;
}

.stage-circle:hover .stage-hover-icon {
    display: flex;
    animation: arrowBounce 0.5s infinite alternate ease-in-out;
}

.stage-circle:hover {
    border-color: var(--color-strand-mytopics, var(--color-strand-mychapters)) !important;
    color: var(--color-strand-mytopics, var(--color-strand-mychapters)) !important;
    animation: stageCircleSheen 0.6s ease-in-out forwards;
}

.chevron-icon {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes stageCircleSheen {
    0% {
        box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.7);
        background-color: rgba(6, 182, 212, 0.1);
    }
    50% {
        box-shadow: 0 0 12px 3px rgba(6, 182, 212, 0.5);
        background-color: rgba(6, 182, 212, 0.3);
    }
    100% {
        box-shadow: 0 0 4px 1px rgba(6, 182, 212, 0.3);
        background-color: rgba(6, 182, 212, 0.2);
    }
}

@keyframes arrowBounce {
    0% { transform: translateY(2px); }
    100% { transform: translateY(-2px); }
}

/* Equipment Symbols (Calculator & Pen/Paper Workings) */
.pen-paper-symbol,
.calc-symbol,
.no-calc-symbol {
    cursor: help;
    transition: transform 0.15s ease;
}

.pen-paper-symbol:hover,
.calc-symbol:hover,
.no-calc-symbol:hover {
    transform: scale(1.08);
}

/* My Topics Action Tooltip & Flying Squares Animation */
.my-topics-action-tooltip {
    position: fixed;
    z-index: 100000;
    background-color: #06b6d4;
    color: #ffffff;
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    border-radius: 9px;
    padding: 8px 16px;
    font-size: 13.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 10px 25px -4px rgba(6, 182, 212, 0.65), 0 4px 12px -2px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, var(--init-translate-y, 6px)) scale(0.92);
    transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: visible;
}

.my-topics-action-tooltip.show {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
}

.my-topics-action-tooltip.fade-out {
    opacity: 0 !important;
    transform: translate(-50%, var(--fade-translate-y, -6px)) scale(0.96) !important;
    transition: opacity 1.8s cubic-bezier(0.4, 0, 0.2, 1), transform 1.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.my-topics-action-tooltip .tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    left: 50%;
    transform: translateX(-50%);
}

.my-topics-action-tooltip.arrow-below .tooltip-arrow {
    bottom: -6px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #06b6d4;
}

.my-topics-action-tooltip.arrow-above .tooltip-arrow {
    top: -6px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #06b6d4;
}

/* Flying Squares Emitters */
.my-topics-action-tooltip .flying-square {
    position: absolute;
    width: 11px;
    height: 11px;
    border-radius: 3px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    opacity: 0;
}

.my-topics-action-tooltip .flying-square.fly-up {
    top: -6px;
    animation: squareFlyUp 1.25s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
}

.my-topics-action-tooltip .flying-square.fly-down {
    bottom: -6px;
    animation: squareFlyDown 1.25s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
}

@keyframes squareFlyUp {
    0% {
        opacity: 0;
        transform: translate(0, 0) rotate(0deg) scale(0.4);
    }
    12% {
        opacity: 1;
        transform: translate(calc(var(--fly-x) * 0.15), calc(var(--fly-y) * 0.15)) rotate(calc(var(--fly-rot) * 0.2)) scale(1.2);
    }
    55% {
        opacity: 0.95;
        transform: translate(calc(var(--fly-x) * 0.6), calc(var(--fly-y) * 0.6)) rotate(calc(var(--fly-rot) * 0.65)) scale(1.05);
    }
    85% {
        opacity: 0.65;
        transform: translate(calc(var(--fly-x) * 0.9), calc(var(--fly-y) * 0.9)) rotate(calc(var(--fly-rot) * 0.9)) scale(0.85);
    }
    100% {
        opacity: 0;
        transform: translate(var(--fly-x), var(--fly-y)) rotate(var(--fly-rot)) scale(0.35);
    }
}

@keyframes squareFlyDown {
    0% {
        opacity: 0;
        transform: translate(0, 0) rotate(0deg) scale(0.4);
    }
    12% {
        opacity: 1;
        transform: translate(calc(var(--fly-x) * 0.15), calc(var(--fly-y) * 0.15)) rotate(calc(var(--fly-rot) * 0.2)) scale(1.2);
    }
    55% {
        opacity: 0.95;
        transform: translate(calc(var(--fly-x) * 0.6), calc(var(--fly-y) * 0.6)) rotate(calc(var(--fly-rot) * 0.65)) scale(1.05);
    }
    85% {
        opacity: 0.65;
        transform: translate(calc(var(--fly-x) * 0.9), calc(var(--fly-y) * 0.9)) rotate(calc(var(--fly-rot) * 0.9)) scale(0.85);
    }
    100% {
        opacity: 0;
        transform: translate(var(--fly-x), var(--fly-y)) rotate(var(--fly-rot)) scale(0.35);
    }
}

/* Minor Strand Pixelart Graphic Styling */
.minor-strand-pixelart-wrapper {
    position: relative;
    overflow: visible;
    transition: transform 0.2s ease, filter 0.2s ease;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
    border-radius: 4px;
}

.minor-strand-pixelart-wrapper:hover {
    transform: scale(1.12);
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4));
}
.minor-strand-pixelart-wrapper:hover .sim-beacon {
    transform: scale(1.2);
    filter: drop-shadow(0 0 3px #f59e0b);
    transition: transform 0.2s ease, filter 0.2s ease;
}

/* ── Minimal Micro-Animations for Chapter & Topic Pixelart Icons ── */

/* 1. Sheen Animation */
.minor-strand-pixelart-wrapper.anim-sheen {
    overflow: hidden !important;
    border-radius: 4px;
    animation: pixelSheenPulse 1.2s ease-in-out;
}

.minor-strand-pixelart-wrapper.anim-sheen::after {
    content: '';
    position: absolute;
    top: -30%;
    left: -130%;
    width: 70%;
    height: 160%;
    background: linear-gradient(
        115deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.4) 40%,
        rgba(255, 255, 255, 0.85) 50%,
        rgba(255, 255, 255, 0.4) 60%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(22deg);
    pointer-events: none;
    animation: pixelSheenSweep 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    border-radius: 4px;
    z-index: 5;
}

@keyframes pixelSheenSweep {
    0% { left: -130%; opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { left: 170%; opacity: 0; }
}

@keyframes pixelSheenPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5)); }
    100% { transform: scale(1); }
}

/* 2. Rearrange Animation */
.minor-strand-pixelart-wrapper.anim-rearrange {
    animation: iconRearrangeWobble 1.4s ease-in-out;
}

.minor-strand-pixelart-wrapper.anim-rearrange svg rect:nth-child(3n) {
    animation: pixelRearrange1 1.4s ease-in-out;
}
.minor-strand-pixelart-wrapper.anim-rearrange svg rect:nth-child(3n+1) {
    animation: pixelRearrange2 1.4s ease-in-out;
}
.minor-strand-pixelart-wrapper.anim-rearrange svg rect:nth-child(3n+2) {
    animation: pixelRearrange3 1.4s ease-in-out;
}

@keyframes iconRearrangeWobble {
    0% { transform: scale(1); }
    25% { transform: scale(1.09) rotate(-3deg); }
    50% { transform: scale(1.05) rotate(3deg); }
    75% { transform: scale(1.08) rotate(-1.5deg); }
    100% { transform: scale(1) rotate(0deg); }
}

@keyframes pixelRearrange1 {
    0% { transform: translate(0, 0); }
    30% { transform: translate(-1.2px, -1.2px); }
    70% { transform: translate(0.6px, 0.6px); }
    100% { transform: translate(0, 0); }
}

@keyframes pixelRearrange2 {
    0% { transform: translate(0, 0); }
    30% { transform: translate(1.2px, -0.8px); }
    70% { transform: translate(-0.8px, 0.4px); }
    100% { transform: translate(0, 0); }
}

@keyframes pixelRearrange3 {
    0% { transform: translate(0, 0); }
    30% { transform: translate(-0.6px, 1.2px); }
    70% { transform: translate(0.4px, -0.8px); }
    100% { transform: translate(0, 0); }
}

/* 3. Twinkle Animation */
.minor-strand-pixelart-wrapper.anim-twinkle {
    animation: iconTwinklePulse 1.3s ease-in-out;
}

.minor-strand-pixelart-wrapper.anim-twinkle::before {
    content: '✦';
    position: absolute;
    top: -5px;
    right: -5px;
    color: #fbbf24;
    font-size: 13px;
    line-height: 1;
    pointer-events: none;
    text-shadow: 0 0 6px rgba(251, 191, 36, 0.9), 0 0 10px rgba(255, 255, 255, 0.9);
    animation: starTwinkleAnim 1.3s ease-in-out forwards;
    z-index: 5;
}

.minor-strand-pixelart-wrapper.anim-twinkle::after {
    content: '✦';
    position: absolute;
    bottom: -4px;
    left: -4px;
    color: #38bdf8;
    font-size: 11px;
    line-height: 1;
    pointer-events: none;
    text-shadow: 0 0 6px rgba(56, 189, 248, 0.9), 0 0 10px rgba(255, 255, 255, 0.9);
    animation: starTwinkleAnim 1.3s ease-in-out 0.25s forwards;
    z-index: 5;
}

@keyframes starTwinkleAnim {
    0% { transform: scale(0) rotate(0deg); opacity: 0; }
    35% { transform: scale(1.4) rotate(90deg); opacity: 1; }
    65% { transform: scale(0.9) rotate(180deg); opacity: 0.8; }
    100% { transform: scale(0) rotate(270deg); opacity: 0; }
}

@keyframes iconTwinklePulse {
    0% { transform: scale(1); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25)); }
    40% { transform: scale(1.08); filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.8)) drop-shadow(0 0 3px rgba(255, 255, 255, 0.9)); }
    100% { transform: scale(1); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25)); }
}

/* ── Strand-Specific Inventive Micro-Animations ── */

.minor-strand-pixelart-wrapper.anim-strand-action {
    animation: strandWrapperPop 1.4s ease-in-out;
}

@keyframes strandWrapperPop {
    0% { transform: scale(1); }
    30% { transform: scale(1.08); filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.45)); }
    70% { transform: scale(1.04); }
    100% { transform: scale(1); }
}

/* 1. Sequences: Bars light up one by one (1 -> 2 -> 3 -> 4) */
.minor-strand-pixelart-wrapper.anim-strand-action .seq-bar-1 { animation: seqGlow1 1.4s ease-in-out; }
.minor-strand-pixelart-wrapper.anim-strand-action .seq-bar-2 { animation: seqGlow2 1.4s ease-in-out; }
.minor-strand-pixelart-wrapper.anim-strand-action .seq-bar-3 { animation: seqGlow3 1.4s ease-in-out; }
.minor-strand-pixelart-wrapper.anim-strand-action .seq-bar-4 { animation: seqGlow4 1.4s ease-in-out; }

@keyframes seqGlow1 {
    0%, 100% { fill: inherit; opacity: 0.6; }
    15%, 45% { fill: #06b6d4; opacity: 1; filter: drop-shadow(0 0 5px #06b6d4); transform: translateY(-1px); }
}
@keyframes seqGlow2 {
    0%, 100% { fill: inherit; opacity: 0.7; }
    30%, 60% { fill: #06b6d4; opacity: 1; filter: drop-shadow(0 0 5px #06b6d4); transform: translateY(-1px); }
}
@keyframes seqGlow3 {
    0%, 100% { fill: inherit; opacity: 0.8; }
    45%, 75% { fill: #06b6d4; opacity: 1; filter: drop-shadow(0 0 5px #06b6d4); transform: translateY(-1px); }
}
@keyframes seqGlow4 {
    0%, 100% { fill: inherit; opacity: 0.9; }
    60%, 90% { fill: #06b6d4; opacity: 1; filter: drop-shadow(0 0 5px #06b6d4); transform: translateY(-1px); }
}

/* 2. Algebra Skills & Number Skills: Symbols swirl around inside image */
.minor-strand-pixelart-wrapper.anim-strand-action .alg-syms,
.minor-strand-pixelart-wrapper.anim-strand-action .num-syms {
    transform-origin: 8px 8px;
    animation: symsSwirl 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 2b. Powers & Roots: Radical glows and base variable pulses */
.minor-strand-pixelart-wrapper.anim-strand-action .power-root-radical {
    animation: radicalGlow 1.3s ease-in-out;
}
.minor-strand-pixelart-wrapper.anim-strand-action .power-base {
    transform-origin: 11px 8px;
    animation: powerBasePulse 1.3s ease-in-out;
}

@keyframes powerBasePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3) translateY(-0.5px); }
}
@keyframes radicalGlow {
    0%, 100% { filter: none; }
    50% { filter: drop-shadow(0 0 5px #f97316); }
}

@keyframes symsSwirl {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.15); }
    100% { transform: rotate(360deg) scale(1); }
}

/* 3. Graphing: Line (not axes) rotates 360 degrees around center */
.minor-strand-pixelart-wrapper.anim-strand-action .graph-line {
    transform-origin: 7px 8px;
    animation: graphLineRotate 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* 4. Collecting Data: Page flips on clipboard */
.minor-strand-pixelart-wrapper.anim-strand-action .clip-page {
    transform-origin: 8px 4px;
    animation: clipboardPageFlip 1.3s ease-in-out;
}

@keyframes clipboardPageFlip {
    0% { transform: scaleY(1); opacity: 1; }
    35% { transform: scaleY(0.08) translateY(-2px); opacity: 0.5; }
    65% { transform: scaleY(-0.8); opacity: 0.8; }
    100% { transform: scaleY(1); opacity: 1; }
}

/* 5. Percentages: Slash sweeps like radar */
.minor-strand-pixelart-wrapper.anim-strand-action .percent-slash {
    transform-origin: 7px 6px;
    animation: percentSlashSweep 1.3s ease-in-out;
}
@keyframes percentSlashSweep {
    0% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.2) rotate(180deg); }
    100% { transform: scale(1) rotate(360deg); }
}

/* 6. Fractions: Numerator & Denominator swap positions */
.minor-strand-pixelart-wrapper.anim-strand-action .frac-num { animation: fracHopDown 1.3s ease-in-out; }
.minor-strand-pixelart-wrapper.anim-strand-action .frac-den { animation: fracHopUp 1.3s ease-in-out; }
.minor-strand-pixelart-wrapper.anim-strand-action .frac-bar { animation: fracBarFlash 1.3s ease-in-out; }

@keyframes fracHopDown {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(7px) scale(1.1); }
}
@keyframes fracHopUp {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px) scale(1.1); }
}
@keyframes fracBarFlash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; transform: scaleX(1.2); }
}

/* 7. Ratio & Proportion: 1:2 rhythm pulse */
.minor-strand-pixelart-wrapper.anim-strand-action .ratio-left { animation: ratioBounceLeft 1.4s ease-in-out; }
.minor-strand-pixelart-wrapper.anim-strand-action .ratio-right { animation: ratioBounceRight 1.4s ease-in-out; }

@keyframes ratioBounceLeft {
    0%, 100% { transform: translateY(0); }
    20%, 40% { transform: translateY(-3px) scaleY(1.15); }
}
@keyframes ratioBounceRight {
    0%, 100% { transform: translateY(0); }
    50%, 70% { transform: translateY(-4px) scaleY(1.15); }
    75%, 90% { transform: translateY(-2px); }
}

/* 7b. Standard Form: x10^n exponent hop & multiplication pulse */
.minor-strand-pixelart-wrapper.anim-strand-action .sf-power { animation: sfPowerHop 1.4s ease-in-out; }
.minor-strand-pixelart-wrapper.anim-strand-action .sf-times { animation: sfTimesPulse 1.4s ease-in-out; }

@keyframes sfPowerHop {
    0%, 100% { transform: translateY(0) scale(1); }
    30%, 50% { transform: translateY(-2px) scale(1.15); }
}
@keyframes sfTimesPulse {
    0%, 100% { transform: scale(1); }
    40% { transform: scale(1.25); }
}

/* 7c. Proportion: 1-to-2 scaling leap with looping scale-factor arrow */
.minor-strand-pixelart-wrapper.anim-strand-action .prop-left { animation: propBounceLeft 1.4s ease-in-out; }
.minor-strand-pixelart-wrapper.anim-strand-action .prop-loop { animation: propLoopSweep 1.4s ease-in-out; }
.minor-strand-pixelart-wrapper.anim-strand-action .prop-right { animation: propBounceRight 1.4s ease-in-out; }

@keyframes propBounceLeft {
    0%, 100% { transform: translateY(0); }
    15%, 35% { transform: translateY(-2px); }
}
@keyframes propLoopSweep {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1); }
    45%, 65% { transform: scale(1.18) translateY(-1px); }
}
@keyframes propBounceRight {
    0%, 100% { transform: translateY(0); }
    50%, 75% { transform: translateY(-3px) scaleY(1.1); }
}

/* 8. Shapes & Solids: 3D Isometric cube rotation */
.minor-strand-pixelart-wrapper.anim-strand-action .cube-body {
    transform-origin: 8px 8px;
    animation: cubeSpin3D 1.4s ease-in-out;
}
@keyframes cubeSpin3D {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.12); }
    100% { transform: rotate(360deg) scale(1); }
}

/* 8b. Bespoke 2D Area & Perimeter Shapes */
.minor-strand-pixelart-wrapper.anim-strand-action .trapezium-body {
    transform-origin: 8px 8px;
    animation: trapeziumBounce 1.3s ease-in-out;
}
@keyframes trapeziumBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    30% { transform: translateY(-3px) scale(1.08, 0.95); }
    60% { transform: translateY(1px) scale(0.95, 1.05); }
    80% { transform: translateY(-1px) scale(1.02); }
}

.minor-strand-pixelart-wrapper.anim-strand-action .pi-body,
.minor-strand-pixelart-wrapper.anim-strand-action .circle-body,
.minor-strand-pixelart-wrapper.anim-strand-action .circumference-body {
    transform-origin: 8px 8px;
    animation: piBounce 1.3s ease-in-out;
}
@keyframes piBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    30% { transform: translateY(-3px) scale(1.1); }
    60% { transform: translateY(1px) scale(0.96); }
    80% { transform: translateY(-1px) scale(1.03); }
}

.minor-strand-pixelart-wrapper.anim-strand-action .triangle-shape,
.minor-strand-pixelart-wrapper.anim-strand-action .scalene-triangle-shape {
    transform-origin: 8px 8px;
    animation: triangleWiggle 1.3s ease-in-out;
}
@keyframes triangleWiggle {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(-8deg) scale(1.1); }
    50% { transform: rotate(8deg) scale(1.1); }
    75% { transform: rotate(-4deg) scale(1.05); }
}

.minor-strand-pixelart-wrapper.anim-strand-action .parallelogram-body {
    transform-origin: 8px 8px;
    animation: parallelogramShift 1.3s ease-in-out;
}
@keyframes parallelogramShift {
    0%, 100% { transform: skewX(0deg) scale(1); }
    35% { transform: skewX(-12deg) scale(1.08); }
    70% { transform: skewX(8deg) scale(0.96); }
}

.minor-strand-pixelart-wrapper.anim-strand-action .rectangle-body {
    transform-origin: 8px 8px;
    animation: rectanglePulse 1.3s ease-in-out;
}
@keyframes rectanglePulse {
    0%, 100% { transform: scale(1); }
    40% { transform: scale(1.14, 1.08); }
    70% { transform: scale(0.95, 0.95); }
}

.minor-strand-pixelart-wrapper.anim-strand-action .compound-body {
    transform-origin: 8px 8px;
    animation: compoundHop 1.3s ease-in-out;
}
@keyframes compoundHop {
    0%, 100% { transform: translateY(0); }
    30% { transform: translateY(-3px) rotate(4deg); }
    60% { transform: translateY(1px) rotate(-3deg); }
    80% { transform: translateY(-1px); }
}

.minor-strand-pixelart-wrapper.anim-strand-action .perimeter-body {
    transform-origin: 8px 8px;
    animation: perimeterPulse 1.3s ease-in-out;
}
@keyframes perimeterPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.75; transform: scale(1.1); }
}

/* 9. Measures: Ruler tick marks slide horizontally */
.minor-strand-pixelart-wrapper.anim-strand-action .ruler-ticks {
    animation: rulerSlide 1.3s ease-in-out;
}
@keyframes rulerSlide {
    0% { transform: translateX(0); }
    50% { transform: translateX(2.5px); }
    100% { transform: translateX(0); }
}

/* 10. Angles: Angle arc sweeps 0 to 90 degrees */
.minor-strand-pixelart-wrapper.anim-strand-action .angle-arc {
    transform-origin: 4px 10px;
    animation: angleArcSweep 1.3s ease-in-out;
}
@keyframes angleArcSweep {
    0% { transform: scale(0.3) rotate(-45deg); opacity: 0.4; }
    50% { transform: scale(1.3) rotate(0deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* 11. Constructions: Compass pivots and draws arc */
.minor-strand-pixelart-wrapper.anim-strand-action .compass-body {
    transform-origin: 4px 10px;
    animation: compassPivot 1.4s ease-in-out;
}
@keyframes compassPivot {
    0% { transform: rotate(0deg); }
    30% { transform: rotate(-15deg); }
    70% { transform: rotate(15deg); }
    100% { transform: rotate(0deg); }
}

/* 12. Transformations: Shape reflects across arrow */
.minor-strand-pixelart-wrapper.anim-strand-action .trans-shape1 {
    animation: transReflect 1.4s ease-in-out;
}
@keyframes transReflect {
    0% { transform: translate(0, 0); }
    50% { transform: translate(7px, 5px) scale(-1, 1); }
    100% { transform: translate(0, 0); }
}

/* 13. Graphs & Charts: Bars grow up sequentially */
.minor-strand-pixelart-wrapper.anim-strand-action .chart-bar-1 { animation: barRise1 1.3s ease-in-out; }
.minor-strand-pixelart-wrapper.anim-strand-action .chart-bar-2 { animation: barRise2 1.3s ease-in-out; }
.minor-strand-pixelart-wrapper.anim-strand-action .chart-bar-3 { animation: barRise3 1.3s ease-in-out; }

@keyframes barRise1 {
    0%, 100% { transform: scaleY(1); }
    30% { transform: scaleY(1.3) translateY(-1px); transform-origin: bottom; }
}
@keyframes barRise2 {
    0%, 100% { transform: scaleY(1); }
    45% { transform: scaleY(1.25) translateY(-1px); transform-origin: bottom; }
}
@keyframes barRise3 {
    0%, 100% { transform: scaleY(1); }
    60% { transform: scaleY(1.35) translateY(-1px); transform-origin: bottom; }
}

/* 14. Averages & Range: Scale beam tilts left, right, balances */
.minor-strand-pixelart-wrapper.anim-strand-action .scale-beam {
    transform-origin: 8px 9px;
    animation: scaleTilt 1.4s ease-in-out;
}
@keyframes scaleTilt {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(-12deg); }
    60% { transform: rotate(12deg); }
    100% { transform: rotate(0deg); }
}

/* 15. Probability: Die tumbles and rolls 360 deg */
.minor-strand-pixelart-wrapper.anim-strand-action .dice-body {
    transform-origin: 8px 8px;
    animation: diceTumble 1.3s ease-in-out;
}
@keyframes diceTumble {
    0% { transform: rotate(0deg) scale(1); }
    40% { transform: rotate(-180deg) scale(1.15); }
    80% { transform: rotate(-360deg) scale(0.95); }
    100% { transform: rotate(-360deg) scale(1); }
}

/* 16. Pythagoras & Trigonometry: Hypotenuse glows and pulses */
.minor-strand-pixelart-wrapper.anim-strand-action .triangle-hypotenuse {
    transform-origin: 7px 7px;
    animation: trianglePulse 1.3s ease-in-out;
}
@keyframes trianglePulse {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(225, 29, 72, 0)); transform: scale(1); }
    50% { filter: drop-shadow(0 0 3px #e11d48); transform: scale(1.12); }
}

/* 17. Time & Timetables: Circular clock minute hand spins 360°, hour hand ticks forward 2 hours, body pulses with cyan halo */
.minor-strand-pixelart-wrapper.anim-strand-action .clock-minute-hand {
    animation: clockMinuteSpin 1.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.minor-strand-pixelart-wrapper.anim-strand-action .clock-hour-hand {
    animation: clockHourTick 1.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.minor-strand-pixelart-wrapper.anim-strand-action .clock-body {
    animation: clockBodyPulse 1.3s ease-in-out;
}

@keyframes clockMinuteSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes clockHourTick {
    0% { transform: rotate(0deg); }
    70% { transform: rotate(60deg); }
    100% { transform: rotate(60deg); }
}
@keyframes clockBodyPulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(56, 189, 248, 0)); }
    35% { transform: scale(1.06); filter: drop-shadow(0 0 5px rgba(56, 189, 248, 0.75)); }
    75% { transform: scale(0.98); }
}

/* 18. Density: Floating balls bob with buoyant oscillation inside transparent glass cube */
.minor-strand-pixelart-wrapper.anim-strand-action .density-ball-1 { animation: densityFloat1 1.4s ease-in-out; }
.minor-strand-pixelart-wrapper.anim-strand-action .density-ball-2 { animation: densityFloat2 1.4s ease-in-out; }
.minor-strand-pixelart-wrapper.anim-strand-action .density-ball-3 { animation: densityFloat3 1.4s ease-in-out; }
.minor-strand-pixelart-wrapper.anim-strand-action .density-ball-4 { animation: densityFloat4 1.4s ease-in-out; }
.minor-strand-pixelart-wrapper.anim-strand-action .density-ball-5 { animation: densityFloat5 1.4s ease-in-out; }
.minor-strand-pixelart-wrapper.anim-strand-action .density-glass-sheen { animation: densitySheenFlash 1.4s ease-in-out; }

@keyframes densityFloat1 {
    0%, 100% { transform: translateY(0); }
    35% { transform: translateY(-2px) scale(1.1); }
    70% { transform: translateY(0.8px); }
}
@keyframes densityFloat2 {
    0%, 100% { transform: translateY(0); }
    30% { transform: translateY(1.5px) scale(0.95); }
    65% { transform: translateY(-1.2px) scale(1.08); }
}
@keyframes densityFloat3 {
    0%, 100% { transform: translateY(0) scale(1); }
    40% { transform: translateY(-2.2px) scale(1.15); filter: drop-shadow(0 0 3px #38bdf8); }
    75% { transform: translateY(0.5px); }
}
@keyframes densityFloat4 {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(1.2px); }
    60% { transform: translateY(-1.8px) scale(1.1); }
}
@keyframes densityFloat5 {
    0%, 100% { transform: translateY(0); }
    35% { transform: translateY(-1.6px) scale(1.1); }
    70% { transform: translateY(1px); }
}
@keyframes densitySheenFlash {
    0%, 100% { opacity: 0; }
    35% { opacity: 0.6; transform: translateX(2px); }
    60% { opacity: 0; transform: translateX(6px); }
}

/* 19. Speed & Distance-Time: Car races forward, wheels spin, suspension bobs, exhaust puffs */
.minor-strand-pixelart-wrapper.anim-strand-action .car-body {
    animation: carRaceBounce 1.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.minor-strand-pixelart-wrapper.anim-strand-action .car-wheel-left,
.minor-strand-pixelart-wrapper.anim-strand-action .car-wheel-right {
    animation: carWheelSpin 0.65s linear 2;
}
.minor-strand-pixelart-wrapper.anim-strand-action .car-exhaust {
    animation: carExhaustPuff 1.3s ease-out;
}
.minor-strand-pixelart-wrapper.anim-strand-action .car-beam {
    animation: carBeamFlash 1.3s ease-in-out;
}
.minor-strand-pixelart-wrapper.anim-strand-action .car-road {
    animation: carRoadShift 1.3s linear;
}

@keyframes carRaceBounce {
    0%, 100% { transform: translateX(0) translateY(0); }
    15% { transform: translateX(-1px) translateY(0.5px); }
    35% { transform: translateX(2px) translateY(-1px); }
    55% { transform: translateX(2.5px) translateY(0); }
    75% { transform: translateX(1.5px) translateY(-0.5px); }
}
@keyframes carWheelSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes carExhaustPuff {
    0% { opacity: 0; transform: translateX(0) scale(0.6); }
    25% { opacity: 1; transform: translateX(-2px) scale(1.2); }
    50% { opacity: 0.6; transform: translateX(-4px) scale(1.5); }
    100% { opacity: 0; transform: translateX(-6px) scale(0.4); }
}
@keyframes carBeamFlash {
    0%, 100% { opacity: 0.35; }
    30%, 70% { opacity: 0.9; filter: drop-shadow(0 0 4px #facc15); }
}
@keyframes carRoadShift {
    0% { transform: translateX(0); }
    50% { transform: translateX(-2px); }
    100% { transform: translateX(0); }
}

/* 20. Pressure = Force / Area: Arrow stamps down forcefully, surface flexes, shockwaves erupt */
.minor-strand-pixelart-wrapper.anim-strand-action .pressure-arrow {
    animation: pressureArrowStamp 1.3s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.minor-strand-pixelart-wrapper.anim-strand-action .pressure-surface {
    animation: pressureSurfaceFlex 1.3s ease-in-out;
}
.minor-strand-pixelart-wrapper.anim-strand-action .pressure-waves {
    animation: pressureShockwaveBurst 1.3s ease-out;
}

@keyframes pressureArrowStamp {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(-2px); }
    45% { transform: translateY(1.5px) scaleY(1.08); }
    60% { transform: translateY(1.5px) scaleY(1.08); }
    75% { transform: translateY(-0.5px); }
}
@keyframes pressureSurfaceFlex {
    0%, 100% { transform: translateY(0) scaleY(1); }
    45%, 60% { transform: translateY(1px) scaleY(0.85); filter: drop-shadow(0 0 3px rgba(112, 26, 117, 0.4)); }
    75% { transform: translateY(0) scaleY(1); }
}
@keyframes pressureShockwaveBurst {
    0%, 40% { opacity: 0; transform: scale(0.4); }
    46% { opacity: 1; transform: scale(1.3); filter: drop-shadow(0 0 5px #c026d3); }
    65% { opacity: 0.8; transform: scale(1.15); }
    100% { opacity: 0; transform: scale(0.8); }
}

/* 21. Simultaneous Equations: Crossing lines draw in, beacon flashes radiantly, projection coordinates lock in */
.minor-strand-pixelart-wrapper.anim-strand-action .sim-line1 {
    transform-origin: 4px 10px;
    animation: simLine1Slide 1.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.minor-strand-pixelart-wrapper.anim-strand-action .sim-line2 {
    transform-origin: 5px 3px;
    animation: simLine2Slide 1.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.minor-strand-pixelart-wrapper.anim-strand-action .sim-beacon {
    animation: simBeaconFlash 1.3s ease-out;
}
.minor-strand-pixelart-wrapper.anim-strand-action .sim-proj {
    animation: simProjPulse 1.3s ease-in-out;
}

@keyframes simLine1Slide {
    0% { transform: translate(-3px, 3px); opacity: 0.3; }
    50% { transform: translate(0, 0); opacity: 1; }
    100% { transform: translate(0, 0); opacity: 1; }
}
@keyframes simLine2Slide {
    0% { transform: translate(-3px, -3px); opacity: 0.3; }
    50% { transform: translate(0, 0); opacity: 1; }
    100% { transform: translate(0, 0); opacity: 1; }
}
@keyframes simBeaconFlash {
    0%, 35% { transform: scale(0.4); opacity: 0; filter: none; }
    50% { transform: scale(1.4); opacity: 1; filter: drop-shadow(0 0 4px #f59e0b); }
    70% { transform: scale(1.1); opacity: 1; filter: drop-shadow(0 0 2px #f59e0b); }
    100% { transform: scale(1); opacity: 1; filter: none; }
}
@keyframes simProjPulse {
    0%, 45% { opacity: 0; }
    60% { opacity: 1; filter: drop-shadow(0 0 2px #818cf8); }
    85% { opacity: 1; }
    100% { opacity: 1; }
}


.my-topics-empty,
.my-chapters-empty {
    padding: 14px 16px;
    font-size: 13px;
    color: var(--text-muted);
    font-style: italic;
    background: rgba(6, 182, 212, 0.04);
    border: 1px dashed rgba(6, 182, 212, 0.25);
    border-radius: var(--border-radius-md);
    margin-bottom: 12px;
    text-align: center;
}

/* ── Inequality Drag-and-Drop Choice Layout ─────────────────────── */
.inequality-drag-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-size: 28px;
    font-weight: 700;
    margin: 12px 0;
}

.inequality-drag-layout .ineq-left,
.inequality-drag-layout .ineq-right {
    min-width: 60px;
    text-align: center;
}

.drop-target-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 2px dashed var(--border);
    border-radius: var(--border-radius-md);
    font-size: 24px;
    font-weight: 700;
    color: var(--text-muted);
    background-color: var(--bg-tertiary);
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
    user-select: none;
}

.drop-target-box.filled {
    border-style: solid;
    border-color: var(--primary);
    color: var(--text-primary);
    background-color: var(--primary-bg-light);
}

.drop-target-box.drag-over {
    border-color: var(--primary);
    background-color: rgba(59, 130, 246, 0.15);
}

.drag-options-container {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 8px 0;
}

.drag-options-container .choice-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 2px solid var(--border);
    border-radius: var(--border-radius-md);
    font-size: 22px;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    transition: all var(--transition-fast);
}

.drag-options-container .choice-option:hover {
    border-color: var(--primary-hover);
    background-color: var(--primary-bg-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.drag-options-container .choice-option:active {
    transform: translateY(0);
}

.drag-options-container .choice-option.selected {
    border-color: var(--primary);
    background-color: var(--primary-bg-light);
    box-shadow: 0 0 0 2px var(--primary);
}

/* Prime Factor Tree Styling */
.tree-node-input, .tree-interactive-input {
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    outline: none;
    padding: 0;
    width: 100%;
    height: 100%;
}

.node-group {
    position: relative;
}

.node-group .plus-btn, .node-group .minus-btn {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.node-group:hover .plus-btn, .node-group:hover .minus-btn {
    opacity: 1;
}

.plus-btn circle, .minus-btn circle {
    transition: fill var(--transition-fast);
}

.plus-btn:hover circle {
    fill: #d97706;
}

.minus-btn:hover circle {
    fill: #dc2626;
}

.two-variables-input-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 16px;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
}

.input-answer-two-vars {
    min-width: 58px;
    width: auto;
    min-height: 44px;
    height: 44px;
    font-size: 16px;
    padding: 0 8px !important;
    border-radius: var(--border-radius-sm);
    background-color: var(--bg-tertiary);
    border: 1.5px solid var(--border);
    color: var(--text-primary);
    text-align: center;
    outline: none;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    box-sizing: border-box !important;
    transition: border-color var(--transition-fast);
}

.input-answer-two-vars:focus {
    border-color: var(--border-focus);
}

/* Tightly spaced tables for questions, Learn section, worked examples, and Try-It boxes */
.question-prompt table,
.now-you-try-question-prompt table,
.now-you-try-box table,
.worked-example-box table,
#hint-content table,
#help-markdown-container table,
#examples-markdown-container table,
.worked-example table,
.tally-chart-container table,
.pictogram-table table {
    width: auto;
    max-width: 100%;
    margin: 8px auto !important;
    font-size: 13px;
    border-collapse: collapse;
    text-align: center;
}

.worked-example th, .worked-example td,
.question-prompt th, .question-prompt td,
.now-you-try-question-prompt th, .now-you-try-question-prompt td,
.now-you-try-box th, .now-you-try-box td,
#hint-content th, #hint-content td,
#help-markdown-container th, #help-markdown-container td,
#examples-markdown-container th, #examples-markdown-container td,
.tally-chart-container th, .tally-chart-container td,
.pictogram-table th, .pictogram-table td {
    padding: 6px 12px !important;
    font-size: 13px;
    line-height: 1.2;
    border: 1px solid var(--text-primary) !important;
    text-align: center !important;
    vertical-align: middle !important;
    color: var(--text-primary) !important;
}

.worked-example th,
.question-prompt th,
.now-you-try-question-prompt th,
.now-you-try-box th,
#hint-content th,
#help-markdown-container th,
#examples-markdown-container th,
.tally-chart-container th,
.pictogram-table th {
    background-color: var(--bg-secondary) !important;
    font-weight: 600 !important;
    text-align: center !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--text-primary) !important;
}

.worked-example table tr,
.question-prompt table tr,
.now-you-try-question-prompt table tr,
.now-you-try-box table tr,
.worked-example table thead,
.question-prompt table thead,
.now-you-try-question-prompt table thead,
.now-you-try-box table thead {
    border: none !important;
}

.question-prompt tbody tr:first-child td,
.now-you-try-question-prompt tbody tr:first-child td,
.now-you-try-box tbody tr:first-child td,
.worked-example-box tbody tr:first-child td,
.worked-example tbody tr:first-child td {
    border-top: 1px solid var(--text-primary) !important;
}

/* Remove cell outlines and header background from 3rd column (fx) and explicit Totals row in frequency tables */
.mean-frequency-table th:nth-child(3),
.mean-frequency-table td:nth-child(3),
.mean-frequency-table tr.totals-row td,
.mean-frequency-table tr.total-row td,
.tally-chart-container table tr td:nth-child(3),
.tally-chart-container table tr th:nth-child(3),
.tally-chart-container table tr.totals-row td,
.tally-chart-container table tr.total-row td {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Centred text in answer boxes specific to mean-from-a-frequency-table & frequency tables */
.two-way-table:not(.speed-two-way-table):not(.speed-multi-journey-table),
.sample-space-table,
.question-prompt table.two-way-table:not(.speed-two-way-table):not(.speed-multi-journey-table),
.question-prompt table.sample-space-table,
.now-you-try-question-prompt table.two-way-table:not(.speed-two-way-table):not(.speed-multi-journey-table),
.now-you-try-question-prompt table.sample-space-table,
#user-question-content table.two-way-table:not(.speed-two-way-table):not(.speed-multi-journey-table),
#user-question-content table.sample-space-table,
.worked-example table.two-way-table:not(.speed-two-way-table):not(.speed-multi-journey-table),
.worked-example table.sample-space-table,
.completed-table-feedback-container table:not(.speed-two-way-table):not(.speed-multi-journey-table) {
    width: auto !important;
    margin: 10px auto !important;
    border-collapse: collapse !important;
}

.two-way-table:not(.speed-two-way-table):not(.speed-multi-journey-table) th,
.two-way-table:not(.speed-two-way-table):not(.speed-multi-journey-table) td,
.sample-space-table th,
.sample-space-table td,
.question-prompt table.two-way-table:not(.speed-two-way-table):not(.speed-multi-journey-table) th,
.question-prompt table.two-way-table:not(.speed-two-way-table):not(.speed-multi-journey-table) td,
.question-prompt table.sample-space-table th,
.question-prompt table.sample-space-table td,
#user-question-content table.two-way-table:not(.speed-two-way-table):not(.speed-multi-journey-table) th,
#user-question-content table.two-way-table:not(.speed-two-way-table):not(.speed-multi-journey-table) td,
#user-question-content table.sample-space-table th,
#user-question-content table.sample-space-table td,
.completed-table-feedback-container table:not(.speed-two-way-table):not(.speed-multi-journey-table) th,
.completed-table-feedback-container table:not(.speed-two-way-table):not(.speed-multi-journey-table) td {
    padding: 5px 8px !important;
    min-width: 44px;
    max-width: 72px;
    text-align: center !important;
    vertical-align: middle !important;
    font-size: 13px !important;
}

.two-way-table:not(.speed-two-way-table):not(.speed-multi-journey-table) th:first-child,
.two-way-table:not(.speed-two-way-table):not(.speed-multi-journey-table) td:first-child,
.question-prompt table.two-way-table:not(.speed-two-way-table):not(.speed-multi-journey-table) th:first-child,
.question-prompt table.two-way-table:not(.speed-two-way-table):not(.speed-multi-journey-table) td:first-child,
.completed-table-feedback-container table:not(.speed-two-way-table):not(.speed-multi-journey-table) th:first-child,
.completed-table-feedback-container table:not(.speed-two-way-table):not(.speed-multi-journey-table) td:first-child {
    min-width: 60px;
    max-width: 90px;
    text-align: left !important;
    padding-left: 8px !important;
}

/* ==========================================================================
   Speed for Multiple Journeys & Compound Measures Working Tables
   ========================================================================== */
.speed-two-way-table,
.speed-multi-journey-table,
table.speed-two-way-table,
table.speed-multi-journey-table,
.markdown-content table.speed-two-way-table,
.worked-example table.speed-two-way-table,
.question-prompt table.speed-multi-journey-table,
#user-question-content table.speed-multi-journey-table {
    width: 100% !important;
    max-width: 620px !important;
    margin: 16px auto !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 2px solid var(--border) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background-color: var(--bg-secondary) !important;
    box-shadow: var(--shadow-sm, 0 2px 6px rgba(0, 0, 0, 0.08)) !important;
}

/* Corner radius rounding on the 4 outermost corner cells */
.speed-two-way-table thead tr:first-child th:first-child,
.speed-two-way-table tr:first-child th:first-child,
.speed-multi-journey-table thead tr:first-child th:first-child,
.speed-multi-journey-table tr:first-child th:first-child {
    border-top-left-radius: 6px !important;
}

.speed-two-way-table thead tr:first-child th:last-child,
.speed-two-way-table tr:first-child th:last-child,
.speed-multi-journey-table thead tr:first-child th:last-child,
.speed-multi-journey-table tr:first-child th:last-child {
    border-top-right-radius: 6px !important;
}

.speed-two-way-table tbody tr:last-child td:first-child,
.speed-two-way-table tr:last-child td:first-child,
.speed-multi-journey-table tbody tr:last-child td:first-child,
.speed-multi-journey-table tr:last-child td:first-child {
    border-bottom-left-radius: 6px !important;
}

.speed-two-way-table tbody tr:last-child td:last-child,
.speed-two-way-table tr:last-child td:last-child,
.speed-multi-journey-table tbody tr:last-child td:last-child,
.speed-multi-journey-table tr:last-child td:last-child {
    border-bottom-right-radius: 6px !important;
}

/* Top row header styling: Strong emphasis (not blue) across the entire header row */
.speed-two-way-table thead tr,
.speed-multi-journey-table thead tr {
    background-color: #334155 !important; /* Deep neutral slate (not blue) */
    border-bottom: 2px solid #1e293b !important;
}

.speed-two-way-table th,
.speed-multi-journey-table th,
table.speed-two-way-table th,
table.speed-multi-journey-table th,
.markdown-content table.speed-two-way-table th,
.worked-example table.speed-two-way-table th,
.question-prompt table.speed-multi-journey-table th,
#user-question-content table.speed-multi-journey-table th {
    padding: 11px 14px !important;
    background-color: #334155 !important; /* Emphasised dark slate header (not blue) */
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 16px !important; /* 2pt larger (was 14px) */
    letter-spacing: 0.02em !important;
    border: none !important;
    border-bottom: 2px solid #1e293b !important;
    border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
    text-align: center !important;
    min-width: 100px !important;
    max-width: none !important;
    white-space: nowrap !important;
}

html[data-theme="dark"] .speed-two-way-table th,
html[data-theme="dark"] .speed-multi-journey-table th,
html[data-theme="dark"] table.speed-two-way-table th,
html[data-theme="dark"] table.speed-multi-journey-table th,
html[data-theme="dark"] .markdown-content table.speed-two-way-table th,
html[data-theme="dark"] .worked-example table.speed-two-way-table th,
html[data-theme="dark"] .question-prompt table.speed-multi-journey-table th,
html[data-theme="dark"] #user-question-content table.speed-multi-journey-table th {
    background-color: #334155 !important;
    color: #ffffff !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.25) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* First header (top-left empty corner cell) */
.speed-two-way-table th:first-child,
.speed-multi-journey-table th:first-child,
table.speed-two-way-table th:first-child,
table.speed-multi-journey-table th:first-child,
.markdown-content table.speed-two-way-table th:first-child,
.worked-example table.speed-two-way-table th:first-child,
.question-prompt table.speed-multi-journey-table th:first-child,
#user-question-content table.speed-multi-journey-table th:first-child {
    text-align: left !important;
    padding-left: 14px !important;
    min-width: 130px !important;
    max-width: 160px !important;
    border-right: 2px solid var(--border) !important;
    border-bottom: 2px solid #1e293b !important;
    background-color: #1e293b !important; /* Neutral deep slate corner anchor */
    color: #ffffff !important;
    font-weight: 800 !important;
}

html[data-theme="light"] .speed-two-way-table th:first-child,
html[data-theme="light"] .speed-multi-journey-table th:first-child,
html[data-theme="light"] table.speed-two-way-table th:first-child,
html[data-theme="light"] table.speed-multi-journey-table th:first-child {
    background-color: #1e293b !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .speed-two-way-table th:first-child,
html[data-theme="dark"] .speed-multi-journey-table th:first-child,
html[data-theme="dark"] table.speed-two-way-table th:first-child,
html[data-theme="dark"] table.speed-multi-journey-table th:first-child {
    background-color: #1e293b !important;
    color: #ffffff !important;
}

.speed-two-way-table th:last-child,
.speed-multi-journey-table th:last-child {
    border-right: none !important;
    border-left: 2px solid var(--border) !important;
}

/* Inner data cells */
.speed-two-way-table td,
.speed-multi-journey-table td,
table.speed-two-way-table td,
table.speed-multi-journey-table td,
.markdown-content table.speed-two-way-table td,
.worked-example table.speed-two-way-table td,
.question-prompt table.speed-multi-journey-table td,
#user-question-content table.speed-multi-journey-table td {
    padding: 10px 12px !important;
    border: none !important;
    border-bottom: 1px solid var(--border) !important;
    border-right: 1px solid var(--border) !important;
    text-align: center !important;
    vertical-align: middle !important;
    font-size: 16px !important; /* 2pt larger (was 14px) */
    color: var(--text-primary) !important;
    background-color: var(--bg-secondary) !important;
    min-width: 100px !important;
    max-width: none !important;
    line-height: 1.4 !important;
}

/* Left column (Measure column: Distance, Time, Speed): neutral distinct header styling */
.speed-two-way-table td:first-child,
.speed-multi-journey-table td:first-child,
table.speed-two-way-table td:first-child,
table.speed-multi-journey-table td:first-child,
.markdown-content table.speed-two-way-table td:first-child,
.worked-example table.speed-two-way-table td:first-child,
.question-prompt table.speed-multi-journey-table td:first-child,
#user-question-content table.speed-multi-journey-table td:first-child {
    text-align: left !important;
    padding-left: 14px !important;
    font-weight: 700 !important;
    font-size: 16px !important; /* 2pt larger (was 14px) */
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-right: 2px solid var(--border) !important;
    min-width: 130px !important;
    max-width: 160px !important;
    white-space: nowrap !important;
}

.speed-two-way-table td:last-child,
.speed-multi-journey-table td:last-child {
    border-right: none !important;
    border-left: 2px solid var(--border) !important;
    background-color: rgba(59, 130, 246, 0.08) !important;
    font-weight: 700 !important;
}

html[data-theme="dark"] .speed-two-way-table td:last-child,
html[data-theme="dark"] .speed-multi-journey-table td:last-child {
    background-color: rgba(59, 130, 246, 0.14) !important;
}

/* Bottom row (Speed row) */
.speed-two-way-table tbody tr:last-child td,
.speed-multi-journey-table tbody tr:last-child td {
    border-bottom: none !important;
    border-top: 2px solid var(--border) !important;
}

.speed-two-way-table tbody tr:last-child td:first-child,
.speed-multi-journey-table tbody tr:last-child td:first-child {
    background-color: var(--bg-tertiary) !important;
    font-weight: 800 !important;
}

/* Neutralise code pill borders inside speed table cells */
.speed-two-way-table code,
.speed-multi-journey-table code {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: inherit !important;
    color: inherit !important;
    font-weight: inherit !important;
    box-shadow: none !important;
}

.speed-multi-journey-table .speed-table-mf {
    min-width: 80px !important;
    max-width: 110px !important;
    height: 40px !important; /* 2pt/4px taller */
    font-size: 18px !important; /* 2pt larger (was 16px) */
    margin: 0 auto !important;
}

.sample-space-table th:first-child,
.sample-space-table td:first-child,
.question-prompt table.sample-space-table th:first-child,
.question-prompt table.sample-space-table td:first-child {
    min-width: 44px;
    max-width: 64px;
    text-align: center !important;
    font-weight: 700 !important;
}

/* Sample Space Diagrams: distinct formatting for top row and left column (grey in light mode) */
.sample-space-table {
    border-collapse: collapse !important;
    margin: 12px auto !important;
}

/* Borders for sample space diagrams */
.sample-space-table th,
.sample-space-table td,
.question-prompt table.sample-space-table th,
.question-prompt table.sample-space-table td,
.now-you-try-question-prompt table.sample-space-table th,
.now-you-try-question-prompt table.sample-space-table td,
#user-question-content table.sample-space-table th,
#user-question-content table.sample-space-table td,
.worked-example table.sample-space-table th,
.worked-example table.sample-space-table td,
.completed-table-feedback-container table.sample-space-table th,
.completed-table-feedback-container table.sample-space-table td {
    border: 1px solid var(--border) !important;
}

html[data-theme="light"] .sample-space-table th,
html[data-theme="light"] .sample-space-table td,
html[data-theme="light"] .question-prompt table.sample-space-table th,
html[data-theme="light"] .question-prompt table.sample-space-table td,
html[data-theme="light"] .now-you-try-question-prompt table.sample-space-table th,
html[data-theme="light"] .now-you-try-question-prompt table.sample-space-table td,
html[data-theme="light"] #user-question-content table.sample-space-table th,
html[data-theme="light"] #user-question-content table.sample-space-table td,
html[data-theme="light"] .worked-example table.sample-space-table th,
html[data-theme="light"] .worked-example table.sample-space-table td,
html[data-theme="light"] #help-markdown-container table.sample-space-table th,
html[data-theme="light"] #help-markdown-container table.sample-space-table td,
html[data-theme="light"] #examples-markdown-container table.sample-space-table th,
html[data-theme="light"] #examples-markdown-container table.sample-space-table td,
html[data-theme="light"] .completed-table-feedback-container table.sample-space-table th,
html[data-theme="light"] .completed-table-feedback-container table.sample-space-table td {
    border: 1px solid #cbd5e1 !important;
}

html[data-theme="dark"] .sample-space-table th,
html[data-theme="dark"] .sample-space-table td,
html[data-theme="dark"] .question-prompt table.sample-space-table th,
html[data-theme="dark"] .question-prompt table.sample-space-table td,
html[data-theme="dark"] .now-you-try-question-prompt table.sample-space-table th,
html[data-theme="dark"] .now-you-try-question-prompt table.sample-space-table td,
html[data-theme="dark"] #user-question-content table.sample-space-table th,
html[data-theme="dark"] #user-question-content table.sample-space-table td,
html[data-theme="dark"] .worked-example table.sample-space-table th,
html[data-theme="dark"] .worked-example table.sample-space-table td,
html[data-theme="dark"] #help-markdown-container table.sample-space-table th,
html[data-theme="dark"] #help-markdown-container table.sample-space-table td,
html[data-theme="dark"] #examples-markdown-container table.sample-space-table th,
html[data-theme="dark"] #examples-markdown-container table.sample-space-table td,
html[data-theme="dark"] .completed-table-feedback-container table.sample-space-table th,
html[data-theme="dark"] .completed-table-feedback-container table.sample-space-table td {
    border: 1px solid #2e4470 !important;
}

/* Inner data cells: white in light mode, dark in dark mode */
.sample-space-table tbody td,
.question-prompt table.sample-space-table tbody td,
.now-you-try-question-prompt table.sample-space-table tbody td,
#user-question-content table.sample-space-table tbody td,
.worked-example table.sample-space-table tbody td,
#help-markdown-container table.sample-space-table tbody td,
#examples-markdown-container table.sample-space-table tbody td,
.completed-table-feedback-container table.sample-space-table tbody td {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    font-weight: 500 !important;
}

html[data-theme="light"] .sample-space-table tbody td,
html[data-theme="light"] .question-prompt table.sample-space-table tbody td,
html[data-theme="light"] .now-you-try-question-prompt table.sample-space-table tbody td,
html[data-theme="light"] #user-question-content table.sample-space-table tbody td,
html[data-theme="light"] .worked-example table.sample-space-table tbody td,
html[data-theme="light"] #help-markdown-container table.sample-space-table tbody td,
html[data-theme="light"] #examples-markdown-container table.sample-space-table tbody td,
html[data-theme="light"] .completed-table-feedback-container table.sample-space-table tbody td {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

html[data-theme="dark"] .sample-space-table tbody td,
html[data-theme="dark"] .question-prompt table.sample-space-table tbody td,
html[data-theme="dark"] .now-you-try-question-prompt table.sample-space-table tbody td,
html[data-theme="dark"] #user-question-content table.sample-space-table tbody td,
html[data-theme="dark"] .worked-example table.sample-space-table tbody td,
html[data-theme="dark"] #help-markdown-container table.sample-space-table tbody td,
html[data-theme="dark"] #examples-markdown-container table.sample-space-table tbody td,
html[data-theme="dark"] .completed-table-feedback-container table.sample-space-table tbody td {
    background-color: #0d1326 !important;
    color: #f8fafc !important;
}

/* Top row & Left column headers: distinct grey in light mode, lighter blue in dark mode */
.sample-space-table th,
.sample-space-table thead tr th,
.sample-space-table thead tr td,
.sample-space-table tbody tr th,
.sample-space-table tr th:first-child,
.sample-space-table tr td:first-child,
.question-prompt table.sample-space-table th,
.question-prompt table.sample-space-table thead tr th,
.question-prompt table.sample-space-table thead tr td,
.question-prompt table.sample-space-table tbody tr th,
.question-prompt table.sample-space-table tr th:first-child,
.question-prompt table.sample-space-table tr td:first-child,
.now-you-try-question-prompt table.sample-space-table th,
.now-you-try-question-prompt table.sample-space-table thead tr th,
.now-you-try-question-prompt table.sample-space-table thead tr td,
.now-you-try-question-prompt table.sample-space-table tbody tr th,
.now-you-try-question-prompt table.sample-space-table tr th:first-child,
.now-you-try-question-prompt table.sample-space-table tr td:first-child,
#user-question-content table.sample-space-table th,
#user-question-content table.sample-space-table thead tr th,
#user-question-content table.sample-space-table thead tr td,
#user-question-content table.sample-space-table tbody tr th,
#user-question-content table.sample-space-table tr th:first-child,
#user-question-content table.sample-space-table tr td:first-child,
.worked-example table.sample-space-table th,
.worked-example table.sample-space-table thead tr th,
.worked-example table.sample-space-table thead tr td,
.worked-example table.sample-space-table tbody tr th,
.worked-example table.sample-space-table tr th:first-child,
.worked-example table.sample-space-table tr td:first-child,
#help-markdown-container table.sample-space-table th,
#help-markdown-container table.sample-space-table thead tr th,
#help-markdown-container table.sample-space-table thead tr td,
#help-markdown-container table.sample-space-table tbody tr th,
#help-markdown-container table.sample-space-table tr th:first-child,
#help-markdown-container table.sample-space-table tr td:first-child,
#examples-markdown-container table.sample-space-table th,
#examples-markdown-container table.sample-space-table thead tr th,
#examples-markdown-container table.sample-space-table thead tr td,
#examples-markdown-container table.sample-space-table tbody tr th,
#examples-markdown-container table.sample-space-table tr th:first-child,
#examples-markdown-container table.sample-space-table tr td:first-child,
.completed-table-feedback-container table.sample-space-table th,
.completed-table-feedback-container table.sample-space-table thead tr th,
.completed-table-feedback-container table.sample-space-table thead tr td,
.completed-table-feedback-container table.sample-space-table tbody tr th,
.completed-table-feedback-container table.sample-space-table tr th:first-child,
.completed-table-feedback-container table.sample-space-table tr td:first-child {
    background-color: var(--table-header-bg, #e2e8f0) !important;
    color: var(--text-primary) !important;
    font-weight: 700 !important;
}

html[data-theme="light"] .sample-space-table th,
html[data-theme="light"] .sample-space-table thead tr th,
html[data-theme="light"] .sample-space-table thead tr td,
html[data-theme="light"] .sample-space-table tbody tr th,
html[data-theme="light"] .sample-space-table tr th:first-child,
html[data-theme="light"] .sample-space-table tr td:first-child,
html[data-theme="light"] .question-prompt table.sample-space-table th,
html[data-theme="light"] .question-prompt table.sample-space-table thead tr th,
html[data-theme="light"] .question-prompt table.sample-space-table thead tr td,
html[data-theme="light"] .question-prompt table.sample-space-table tbody tr th,
html[data-theme="light"] .question-prompt table.sample-space-table tr th:first-child,
html[data-theme="light"] .question-prompt table.sample-space-table tr td:first-child,
html[data-theme="light"] .now-you-try-question-prompt table.sample-space-table th,
html[data-theme="light"] .now-you-try-question-prompt table.sample-space-table thead tr th,
html[data-theme="light"] .now-you-try-question-prompt table.sample-space-table thead tr td,
html[data-theme="light"] .now-you-try-question-prompt table.sample-space-table tbody tr th,
html[data-theme="light"] .now-you-try-question-prompt table.sample-space-table tr th:first-child,
html[data-theme="light"] .now-you-try-question-prompt table.sample-space-table tr td:first-child,
html[data-theme="light"] #user-question-content table.sample-space-table th,
html[data-theme="light"] #user-question-content table.sample-space-table thead tr th,
html[data-theme="light"] #user-question-content table.sample-space-table thead tr td,
html[data-theme="light"] #user-question-content table.sample-space-table tbody tr th,
html[data-theme="light"] #user-question-content table.sample-space-table tr th:first-child,
html[data-theme="light"] #user-question-content table.sample-space-table tr td:first-child,
html[data-theme="light"] .worked-example table.sample-space-table th,
html[data-theme="light"] .worked-example table.sample-space-table thead tr th,
html[data-theme="light"] .worked-example table.sample-space-table thead tr td,
html[data-theme="light"] .worked-example table.sample-space-table tbody tr th,
html[data-theme="light"] .worked-example table.sample-space-table tr th:first-child,
html[data-theme="light"] .worked-example table.sample-space-table tr td:first-child,
html[data-theme="light"] #help-markdown-container table.sample-space-table th,
html[data-theme="light"] #help-markdown-container table.sample-space-table thead tr th,
html[data-theme="light"] #help-markdown-container table.sample-space-table thead tr td,
html[data-theme="light"] #help-markdown-container table.sample-space-table tbody tr th,
html[data-theme="light"] #help-markdown-container table.sample-space-table tr th:first-child,
html[data-theme="light"] #help-markdown-container table.sample-space-table tr td:first-child,
html[data-theme="light"] #examples-markdown-container table.sample-space-table th,
html[data-theme="light"] #examples-markdown-container table.sample-space-table thead tr th,
html[data-theme="light"] #examples-markdown-container table.sample-space-table thead tr td,
html[data-theme="light"] #examples-markdown-container table.sample-space-table tbody tr th,
html[data-theme="light"] #examples-markdown-container table.sample-space-table tr th:first-child,
html[data-theme="light"] #examples-markdown-container table.sample-space-table tr td:first-child,
html[data-theme="light"] .completed-table-feedback-container table.sample-space-table th,
html[data-theme="light"] .completed-table-feedback-container table.sample-space-table thead tr th,
html[data-theme="light"] .completed-table-feedback-container table.sample-space-table thead tr td,
html[data-theme="light"] .completed-table-feedback-container table.sample-space-table tbody tr th,
html[data-theme="light"] .completed-table-feedback-container table.sample-space-table tr th:first-child,
html[data-theme="light"] .completed-table-feedback-container table.sample-space-table tr td:first-child {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
    font-weight: 700 !important;
}

html[data-theme="dark"] .sample-space-table th,
html[data-theme="dark"] .sample-space-table thead tr th,
html[data-theme="dark"] .sample-space-table thead tr td,
html[data-theme="dark"] .sample-space-table tbody tr th,
html[data-theme="dark"] .sample-space-table tr th:first-child,
html[data-theme="dark"] .sample-space-table tr td:first-child,
html[data-theme="dark"] .question-prompt table.sample-space-table th,
html[data-theme="dark"] .question-prompt table.sample-space-table thead tr th,
html[data-theme="dark"] .question-prompt table.sample-space-table thead tr td,
html[data-theme="dark"] .question-prompt table.sample-space-table tbody tr th,
html[data-theme="dark"] .question-prompt table.sample-space-table tr th:first-child,
html[data-theme="dark"] .question-prompt table.sample-space-table tr td:first-child,
html[data-theme="dark"] .now-you-try-question-prompt table.sample-space-table th,
html[data-theme="dark"] .now-you-try-question-prompt table.sample-space-table thead tr th,
html[data-theme="dark"] .now-you-try-question-prompt table.sample-space-table thead tr td,
html[data-theme="dark"] .now-you-try-question-prompt table.sample-space-table tbody tr th,
html[data-theme="dark"] .now-you-try-question-prompt table.sample-space-table tr th:first-child,
html[data-theme="dark"] .now-you-try-question-prompt table.sample-space-table tr td:first-child,
html[data-theme="dark"] #user-question-content table.sample-space-table th,
html[data-theme="dark"] #user-question-content table.sample-space-table thead tr th,
html[data-theme="dark"] #user-question-content table.sample-space-table thead tr td,
html[data-theme="dark"] #user-question-content table.sample-space-table tbody tr th,
html[data-theme="dark"] #user-question-content table.sample-space-table tr th:first-child,
html[data-theme="dark"] #user-question-content table.sample-space-table tr td:first-child,
html[data-theme="dark"] .worked-example table.sample-space-table th,
html[data-theme="dark"] .worked-example table.sample-space-table thead tr th,
html[data-theme="dark"] .worked-example table.sample-space-table thead tr td,
html[data-theme="dark"] .worked-example table.sample-space-table tbody tr th,
html[data-theme="dark"] .worked-example table.sample-space-table tr th:first-child,
html[data-theme="dark"] .worked-example table.sample-space-table tr td:first-child,
html[data-theme="dark"] #help-markdown-container table.sample-space-table th,
html[data-theme="dark"] #help-markdown-container table.sample-space-table thead tr th,
html[data-theme="dark"] #help-markdown-container table.sample-space-table thead tr td,
html[data-theme="dark"] #help-markdown-container table.sample-space-table tbody tr th,
html[data-theme="dark"] #help-markdown-container table.sample-space-table tr th:first-child,
html[data-theme="dark"] #help-markdown-container table.sample-space-table tr td:first-child,
html[data-theme="dark"] #examples-markdown-container table.sample-space-table th,
html[data-theme="dark"] #examples-markdown-container table.sample-space-table thead tr th,
html[data-theme="dark"] #examples-markdown-container table.sample-space-table thead tr td,
html[data-theme="dark"] #examples-markdown-container table.sample-space-table tbody tr th,
html[data-theme="dark"] #examples-markdown-container table.sample-space-table tr th:first-child,
html[data-theme="dark"] #examples-markdown-container table.sample-space-table tr td:first-child,
html[data-theme="dark"] .completed-table-feedback-container table.sample-space-table th,
html[data-theme="dark"] .completed-table-feedback-container table.sample-space-table thead tr th,
html[data-theme="dark"] .completed-table-feedback-container table.sample-space-table thead tr td,
html[data-theme="dark"] .completed-table-feedback-container table.sample-space-table tbody tr th,
html[data-theme="dark"] .completed-table-feedback-container table.sample-space-table tr th:first-child,
html[data-theme="dark"] .completed-table-feedback-container table.sample-space-table tr td:first-child {
    background-color: #1e3a8a !important;
    color: #f8fafc !important;
    font-weight: 700 !important;
}

/* Corner operation cell (+, ×, −) */
html[data-theme="light"] .sample-space-table thead tr th:first-child,
html[data-theme="light"] .sample-space-table tr:first-child th:first-child,
html[data-theme="light"] .question-prompt table.sample-space-table thead tr th:first-child,
html[data-theme="light"] .question-prompt table.sample-space-table tr:first-child th:first-child,
html[data-theme="light"] #help-markdown-container table.sample-space-table thead tr th:first-child,
html[data-theme="light"] #help-markdown-container table.sample-space-table tr:first-child th:first-child,
html[data-theme="light"] #examples-markdown-container table.sample-space-table thead tr th:first-child,
html[data-theme="light"] #examples-markdown-container table.sample-space-table tr:first-child th:first-child {
    background-color: #cbd5e1 !important;
    color: #0f172a !important;
    font-weight: 900 !important;
    font-size: 15px !important;
}

html[data-theme="dark"] .sample-space-table thead tr th:first-child,
html[data-theme="dark"] .sample-space-table tr:first-child th:first-child,
html[data-theme="dark"] .question-prompt table.sample-space-table thead tr th:first-child,
html[data-theme="dark"] .question-prompt table.sample-space-table tr:first-child th:first-child,
html[data-theme="dark"] #help-markdown-container table.sample-space-table thead tr th:first-child,
html[data-theme="dark"] #help-markdown-container table.sample-space-table tr:first-child th:first-child,
html[data-theme="dark"] #examples-markdown-container table.sample-space-table thead tr th:first-child,
html[data-theme="dark"] #examples-markdown-container table.sample-space-table tr:first-child th:first-child {
    background-color: #1d4ed8 !important;
    color: #ffffff !important;
    font-weight: 900 !important;
    font-size: 15px !important;
}

/* Exact values reference table */
.exact-values-table,
#help-markdown-container table.exact-values-table,
#examples-markdown-container table.exact-values-table {
    table-layout: fixed !important;
    width: 100% !important;
    min-width: 520px !important;
    border-collapse: collapse !important;
    text-align: center !important;
    margin: 16px auto !important;
    border: 1px solid var(--border) !important;
}

.exact-values-table th,
.exact-values-table td,
#help-markdown-container table.exact-values-table th,
#help-markdown-container table.exact-values-table td,
#examples-markdown-container table.exact-values-table th,
#examples-markdown-container table.exact-values-table td {
    width: 16.666% !important;
    text-align: center !important;
    vertical-align: middle !important;
    padding: 14px 6px !important;
    font-size: 19px !important;
    line-height: 1.4 !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
    box-sizing: border-box !important;
}

.exact-values-table th,
#help-markdown-container table.exact-values-table th,
#examples-markdown-container table.exact-values-table th {
    background-color: var(--bg-tertiary) !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    border-bottom: 2px solid var(--border) !important;
}

.exact-values-table td:first-child,
#help-markdown-container table.exact-values-table td:first-child,
#examples-markdown-container table.exact-values-table td:first-child {
    font-weight: 700 !important;
    background-color: var(--bg-secondary) !important;
}

.exact-values-table code,
#help-markdown-container table.exact-values-table code,
#examples-markdown-container table.exact-values-table code {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    font-size: inherit !important;
}

.exact-values-table math-field,
#help-markdown-container table.exact-values-table math-field,
#examples-markdown-container table.exact-values-table math-field {
    font-size: 20px !important;
    vertical-align: middle !important;
}
html[data-theme="light"] .sample-space-input {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

html[data-theme="light"] .sample-space-input:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 1px var(--primary) !important;
}

.two-way-table-input,
.sample-space-input {
    width: 46px !important;
    max-width: 50px !important;
    height: 28px !important;
    text-align: center !important;
    padding: 2px 4px !important;
    border: 1px solid var(--border) !important;
    border-radius: 4px !important;
    background-color: var(--bg-tertiary);
    color: var(--text-primary) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    outline: none !important;
    box-sizing: border-box !important;
}

.two-way-table-input:not(:disabled),
.sample-space-input:not(:disabled) {
    background-color: var(--bg-tertiary) !important;
}

.two-way-table-input:focus,
.sample-space-input:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 1px var(--primary) !important;
}

/* Graphing Table of Values - matching Expand & Simplify Double Brackets grid look & feel */
.graphing-table {
    table-layout: fixed !important;
    width: 100% !important;
    max-width: 528px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 2px solid var(--text-secondary) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: var(--bg-secondary) !important;
    text-align: center !important;
    margin: 14px auto !important;
    box-shadow: var(--shadow-sm) !important;
}

/* Sizing adjustments based on column counts */
.graphing-table:has(tr:first-child > :nth-child(7)) {
    max-width: 528px !important;
}

.graphing-table:has(tr:first-child > :nth-child(5):last-child),
.graphing-table:has(tr:first-child > :nth-child(6):last-child) {
    max-width: 440px !important;
}

.graphing-table:has(tr:first-child > :nth-child(4):last-child) {
    max-width: 320px !important;
}

.graphing-table th,
.graphing-table td {
    overflow: hidden !important;
    text-align: center !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
    height: 52px !important;
    padding: 4px 6px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
}

/* First column (x and y headers) */
.graphing-table th:first-child,
.graphing-table td:first-child {
    width: 52px !important;
    background: rgba(59, 130, 246, 0.12) !important;
    border-right: 2px solid var(--text-secondary) !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    font-style: italic !important;
}

/* Header row (x values) */
.graphing-table tr:first-child th,
.graphing-table tr:first-child td {
    background: rgba(59, 130, 246, 0.06) !important;
    border-bottom: 2px solid var(--text-secondary) !important;
}

/* Top-left corner cell */
.graphing-table tr:first-child th:first-child,
.graphing-table tr:first-child td:first-child {
    background: rgba(59, 130, 246, 0.16) !important;
    border-right: 2px solid var(--text-secondary) !important;
    border-bottom: 2px solid var(--text-secondary) !important;
}

/* Column dividers */
.graphing-table th:not(:last-child),
.graphing-table td:not(:last-child) {
    border-right: 1.5px solid var(--border) !important;
}

.graphing-table th:first-child,
.graphing-table td:first-child {
    border-right: 2px solid var(--text-secondary) !important;
}

/* Interactive cell cursor and focus/selection highlight */
.graphing-table td:has(.graph-table-input:not([disabled])) {
    cursor: pointer !important;
}

.graphing-table td:has(.graph-table-input:focus),
.graphing-table td:focus-within {
    background-color: rgba(59, 130, 246, 0.18) !important;
}

/* Graph table input element */
.graph-table-input {
    width: 100% !important;
    max-width: 100% !important;
    height: 42px !important;
    text-align: center !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    border: 1.5px solid var(--border) !important;
    border-radius: 6px !important;
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    padding: 2px 4px !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
    -moz-appearance: textfield;
    appearance: textfield;
}

.graph-table-input::-webkit-outer-spin-button,
.graph-table-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.graph-table-input:focus {
    border-color: var(--primary, #3b82f6) !important;
    box-shadow: 0 0 0 2.5px rgba(59, 130, 246, 0.4) !important;
    background-color: var(--bg-primary, #ffffff) !important;
    outline: none !important;
}

.frequency-tree-input {
    width: 100% !important;
    height: 100% !important;
    text-align: center !important;
    border: none !important;
    background: transparent !important;
    color: var(--text-primary) !important;
    font-size: 15px !important;
    font-weight: bold !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: normal !important;
    box-sizing: border-box !important;
}

/* Cumulative Frequency Table Inputs */
.cf-table-input {
    width: 100% !important;
    height: 100% !important;
    min-height: 38px !important;
    text-align: center !important;
    border: none !important;
    background: transparent;
    color: var(--text-primary) !important;
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    outline: none !important;
    padding: 8px 14px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.cf-table-input:not(:disabled) {
    background: transparent !important;
    border: none !important;
}

.cf-table-input:focus:not(:disabled) {
    background-color: rgba(59, 130, 246, 0.08) !important;
}

.cf-table-input:disabled {
    color: var(--text-primary) !important;
    opacity: 1 !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}

td:has(.cf-table-input) {
    padding: 0 !important;
}

.mean-table-input,
.mean-final-input,
.xf-input,
.total-f-input,
.total-xf-input,
.freq-input,
.tally-freq-input,
#now-you-try-answer-mean,
#user-answer-mean,
.tally-chart-container math-field,
.tally-chart-container input {
    text-align: center !important;
}

.mean-table-input::part(container),
.mean-table-input::part(content),
.mean-final-input::part(container),
.mean-final-input::part(content),
#user-answer-mean::part(container),
#user-answer-mean::part(content),
#now-you-try-answer-mean::part(container),
#now-you-try-answer-mean::part(content),
.tally-chart-container math-field::part(container),
.tally-chart-container math-field::part(content) {
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}

/* Stem & Leaf Diagrams */
.stem-leaf-display,
.stem-leaf-widget {
    font-family: var(--font-sans) !important;
    font-variant-numeric: tabular-nums !important;
    text-align: left !important;
}

.stem-leaf-display table,
.stem-leaf-widget table {
    border-collapse: collapse !important;
    margin: 4px 0 !important;
    font-family: var(--font-sans) !important;
    font-variant-numeric: tabular-nums !important;
    text-align: left !important;
    width: auto !important;
}

.stem-leaf-display td,
.stem-leaf-widget td,
.question-prompt .stem-leaf-display td,
.question-prompt .stem-leaf-widget td,
.now-you-try-question-prompt .stem-leaf-display td,
.now-you-try-question-prompt .stem-leaf-widget td,
.now-you-try-box .stem-leaf-display td,
.now-you-try-box .stem-leaf-widget td,
.worked-example .stem-leaf-display td,
.worked-example .stem-leaf-widget td,
#help-markdown-container .stem-leaf-display td,
#examples-markdown-container .stem-leaf-display td,
.completed-diagram-feedback-container .stem-leaf-widget td {
    border: none !important;
    font-family: var(--font-sans) !important;
    font-variant-numeric: tabular-nums !important;
    line-height: 1.4 !important;
}

.stem-leaf-display tr,
.stem-leaf-widget tr,
.question-prompt .stem-leaf-display tr,
.question-prompt .stem-leaf-widget tr {
    border: none !important;
}

/* Stem column (left cell): right-aligned text against the vertical line */
.stem-leaf-display td:first-child,
.stem-leaf-widget td:first-child,
.question-prompt .stem-leaf-display td:first-child,
.question-prompt .stem-leaf-widget td:first-child,
.now-you-try-question-prompt .stem-leaf-display td:first-child,
.now-you-try-question-prompt .stem-leaf-widget td:first-child,
.now-you-try-box .stem-leaf-display td:first-child,
.now-you-try-box .stem-leaf-widget td:first-child,
.worked-example .stem-leaf-display td:first-child,
.worked-example .stem-leaf-widget td:first-child,
#help-markdown-container .stem-leaf-display td:first-child,
#examples-markdown-container .stem-leaf-display td:first-child,
.completed-diagram-feedback-container .stem-leaf-widget td:first-child {
    text-align: right !important;
    border-right: 2px solid var(--text-primary) !important;
    padding: 4px 12px 4px 8px !important;
    font-weight: 700 !important;
    min-width: 32px !important;
}

/* Leaves column (right cell): strictly left-aligned text, starting immediately after the vertical line */
.stem-leaf-display td:last-child,
.stem-leaf-widget td:last-child,
.question-prompt .stem-leaf-display td:last-child,
.question-prompt .stem-leaf-widget td:last-child,
.now-you-try-question-prompt .stem-leaf-display td:last-child,
.now-you-try-question-prompt .stem-leaf-widget td:last-child,
.now-you-try-box .stem-leaf-display td:last-child,
.now-you-try-box .stem-leaf-widget td:last-child,
.worked-example .stem-leaf-display td:last-child,
.worked-example .stem-leaf-widget td:last-child,
#help-markdown-container .stem-leaf-display td:last-child,
#examples-markdown-container .stem-leaf-display td:last-child,
.completed-diagram-feedback-container .stem-leaf-widget td:last-child {
    text-align: left !important;
    padding: 4px 16px !important;
    letter-spacing: 6px !important;
}

.stem-leaf-widget .leaf-row-input {
    text-align: left !important;
    font-family: var(--font-sans) !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: 2px;
}

.stem-leaf-widget .stem-input {
    text-align: center !important;
    font-family: var(--font-sans) !important;
    font-variant-numeric: tabular-nums !important;
}

.stem-leaf-key-box {
    font-family: var(--font-sans) !important;
    font-variant-numeric: normal !important;
    text-align: left !important;
}

.stem-leaf-key-input {
    text-align: left !important;
    font-family: var(--font-sans) !important;
    font-variant-numeric: normal !important;
}

/* Explicitly eliminate any horizontal line across the top of stem and leaf diagrams */
.stem-leaf-display table,
.stem-leaf-widget table,
.stem-leaf-display thead,
.stem-leaf-widget thead,
.stem-leaf-display tbody,
.stem-leaf-widget tbody,
.stem-leaf-display tr,
.stem-leaf-widget tr,
.stem-leaf-display th,
.stem-leaf-widget th,
.stem-leaf-display td,
.stem-leaf-widget td,
.question-prompt .stem-leaf-display table,
.question-prompt .stem-leaf-widget table,
.question-prompt .stem-leaf-display tr,
.question-prompt .stem-leaf-widget tr,
.question-prompt .stem-leaf-display td,
.question-prompt .stem-leaf-widget td,
.question-prompt .stem-leaf-display tr:first-child td,
.question-prompt .stem-leaf-widget tr:first-child td,
.question-prompt .stem-leaf-display tbody tr:first-child td,
.question-prompt .stem-leaf-widget tbody tr:first-child td,
.now-you-try-question-prompt .stem-leaf-display tr:first-child td,
.now-you-try-question-prompt .stem-leaf-widget tr:first-child td,
.now-you-try-question-prompt .stem-leaf-display tbody tr:first-child td,
.now-you-try-question-prompt .stem-leaf-widget tbody tr:first-child td,
.now-you-try-box .stem-leaf-display tr:first-child td,
.now-you-try-box .stem-leaf-widget tr:first-child td,
.now-you-try-box .stem-leaf-display tbody tr:first-child td,
.now-you-try-box .stem-leaf-widget tbody tr:first-child td,
.worked-example-box .stem-leaf-display tr:first-child td,
.worked-example-box .stem-leaf-widget tr:first-child td,
.worked-example .stem-leaf-display tr:first-child td,
.worked-example .stem-leaf-widget tr:first-child td,
#help-markdown-container .stem-leaf-display tr:first-child td,
#help-markdown-container .stem-leaf-display tbody tr:first-child td,
#examples-markdown-container .stem-leaf-display tr:first-child td,
#examples-markdown-container .stem-leaf-display tbody tr:first-child td,
.completed-diagram-feedback-container .stem-leaf-widget tr:first-child td,
.completed-diagram-feedback-container .stem-leaf-widget tbody tr:first-child td {
    border-top: none !important;
}

/* Stem & Leaf Diagrams: Ensure standalone block display (never inline) below context and above question */
.stem-leaf-display {
    display: block !important;
    width: fit-content !important;
    margin: 16px 0 !important;
    clear: both !important;
    text-align: left !important;
}

.stem-leaf-widget {
    display: block !important;
    width: fit-content !important;
    margin: 16px 0 !important;
    clear: both !important;
    text-align: left !important;
}

.stem-leaf-widget > div {
    display: block !important;
    width: fit-content !important;
}

/* 3-Box Stem & Leaf Key Completion Widget */
.stem-leaf-key-widget {
    margin: 14px 0;
    font-family: var(--font-sans) !important;
    font-variant-numeric: tabular-nums !important;
    text-align: left;
}

.stem-leaf-key-widget-inner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.stem-leaf-widget .stem-leaf-key-box .stem-leaf-key-widget {
    margin: 0 !important;
}

.stem-leaf-widget .stem-leaf-key-box .stem-leaf-key-widget-inner,
.stem-leaf-widget .stem-leaf-key-box .stem-leaf-key-widget-static {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}


.stem-key-box {
    text-align: center !important;
    font-family: var(--font-sans) !important;
    font-variant-numeric: tabular-nums !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    height: 40px;
    border: 1.5px solid var(--border);
    border-radius: 4px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    transition: border-color var(--transition-fast);
}

.stem-key-box:focus {
    border-color: var(--primary) !important;
    outline: none;
    box-shadow: 0 0 0 2px var(--primary-bg-light);
}

.stem-key-stem-input,
.stem-key-leaf-input {
    width: 44px;
}

.stem-key-val-input {
    width: 68px;
}

.stem-key-divider-pipe {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    padding: 0 2px;
}

.stem-key-divider-eq {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    padding: 0 4px;
}

.stem-key-unit-label {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-left: 4px;
}

/* Tally Chart custom interactive layout rules */
.raw-data-badge-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.raw-data-badge {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 13px;
    color: var(--text-primary);
}
.tally-cell-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 4px 8px;
    position: relative;
}
.tally-controls {
    display: flex;
    gap: 4px;
    margin-left: 8px;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.tally-cell-container:hover .tally-controls {
    opacity: 1 !important;
}
@media (max-width: 768px) {
    .tally-controls {
        opacity: 1 !important;
    }
}
.tally-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    user-select: none;
    transition: background-color 0.15s;
}
.tally-btn:hover {
    background-color: var(--bg-secondary);
}
.tally-chart-container table {
    width: auto;
    max-width: 100%;
    margin: 0;
    font-size: 13px;
    border-collapse: collapse;
}
.tally-chart-container th, .tally-chart-container td {
    padding: 3px 8px;
    font-size: 13px;
    line-height: 1.2;
    border: 1px solid var(--border);
}
.tally-chart-container th {
    background-color: var(--bg-tertiary);
    font-weight: 600;
}
.freq-input {
    width: 56px;
    text-align: center;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 14px;
}


/* Pictogram Styling Rules */
.pictogram-chart-wrapper {
    box-shadow: var(--shadow-sm);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}



/* Pictogram Styling Rules */
.pictogram-chart-wrapper {
    box-shadow: var(--shadow-sm);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.pictogram-table th {
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 10px 8px;
    border-bottom: 2px solid var(--border);
    text-align: left;
}

.pictogram-table td {
    border-bottom: 1px solid var(--border);
    padding: 12px 8px;
    vertical-align: middle;
}

.pictogram-cell-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.pictogram-icon-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-height: 28px;
}

.pictogram-controls {
    display: flex;
    gap: 6px;
    margin-left: 12px;
    flex-shrink: 0;
}

/* Style for embedded SVG math fields */
foreignObject {
    overflow: visible !important;
}

math-field.input-answer-two-vars {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 58px;
    width: auto;
    min-height: 44px;
    height: 44px;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* Override width and height for SVGs which define their own dimensions via foreignObject */
foreignObject math-field.input-answer-two-vars {
    width: 100% !important;
    min-width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
}

math-field.input-answer-two-vars::part(container) {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 4px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

math-field.input-answer-two-vars::part(content) {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

math-field.input-answer-two-vars::part(virtual-keyboard-toggle),
math-field.input-answer-two-vars::part(menu-toggle) {
    display: none !important;
}

/* Show Example Toggle Button */
.btn-show-example {
    background: var(--bg-secondary);
    border: 1.5px solid var(--color-almost);
    color: var(--color-almost);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: all var(--transition-fast) ease-in-out;
}

.btn-show-example:hover {
    background: var(--color-almost);
    color: #ffffff;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.25);
}

.btn-show-example.active {
    background: var(--color-ready);
    border-color: var(--color-ready);
    color: #ffffff;
}

.btn-show-example.active:hover {
    background: #059669;
    border-color: #059669;
}

/* Mark checkmark badges inside worked examples */
.mark-tick-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
    border: 1px solid rgba(16, 185, 129, 0.35);
    padding: 4px 12px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 800;
    margin-left: 12px;
    vertical-align: middle;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.1);
}

.green-circle-tick,
.mark-badge > span:first-child,
.mark-tick-badge > span:first-child,
.worked-example span[style*="border-radius: 50%"],
.worked-example span[style*="border-radius:50%"],
#help-markdown-container span[style*="border-radius: 50%"],
#help-markdown-container span[style*="border-radius:50%"],
#examples-markdown-container span[style*="border-radius: 50%"],
#examples-markdown-container span[style*="border-radius:50%"],
#hint-content span[style*="border-radius: 50%"],
#hint-content span[style*="border-radius:50%"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    aspect-ratio: 1 / 1 !important;
    background-color: #10b981 !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

/* Worked Example container box style */
.worked-example-box {
    margin-top: 16px;
    background-color: rgba(16, 185, 129, 0.08);
    border: 2px dashed var(--color-ready);
    padding: 18px;
    border-radius: var(--border-radius-md);
    font-size: 14px;
    text-align: left;
}

/* ── Emphasized Page Help "?" Button & Popup Modal ────────────────────── */
.page-help-dropdown-wrapper {
    position: relative;
    display: inline-block;
}

.btn-help-emphasized {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border-radius: 20px;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all var(--transition-fast) ease-in-out;
    flex-shrink: 0;
}

.btn-help-emphasized:hover,
.page-help-dropdown-wrapper:hover .btn-help-emphasized {
    transform: translateY(-1px);
    box-shadow: 0 0 18px rgba(139, 92, 246, 0.6), 0 4px 8px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
}

.btn-help-emphasized:active {
    transform: translateY(0) scale(0.98);
}

.help-btn-symbol {
    font-family: var(--font-heading);
    font-size: 19px;
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.help-chevron {
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease-in-out;
}

.page-help-dropdown-wrapper:hover .help-chevron {
    transform: rotate(180deg);
}

/* Hover Dropdown Menu */
.help-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 210px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-md);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    z-index: 1000;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Invisible hover bridge to prevent menu closing when moving cursor across gap */
.help-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    width: 100%;
    height: 10px;
}

.page-help-dropdown-wrapper:hover .help-dropdown-menu,
.help-dropdown-menu.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.help-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    text-align: left;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.help-dropdown-item i {
    width: 18px;
    height: 18px;
    color: var(--primary);
    flex-shrink: 0;
}

.help-dropdown-item:hover {
    background-color: rgba(59, 130, 246, 0.12);
    color: var(--primary);
}

.help-dropdown-item:hover i {
    color: var(--primary);
}

/* ── Floating Beta Version Button & Submenu ────────────────────── */
.header-actions {
    position: relative;
}

.beta-version-dropdown-wrapper {
    position: relative;
    display: inline-block;
}

.btn-beta-version {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border-radius: 20px;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all var(--transition-fast) ease-in-out;
    flex-shrink: 0;
}

.btn-beta-version:hover,
.beta-version-dropdown-wrapper:hover .btn-beta-version {
    transform: translateY(-1px);
    box-shadow: 0 0 18px rgba(139, 92, 246, 0.6), 0 4px 8px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
}

.btn-beta-version:active {
    transform: translateY(0) scale(0.98);
}

.beta-btn-text {
    font-family: var(--font-heading); /* Same font as What is this skill heading in learn section */
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.beta-chevron {
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease-in-out;
}

.beta-version-dropdown-wrapper:hover .beta-chevron {
    transform: rotate(180deg);
}

/* Hover Dropdown Menu */
.beta-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 210px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-md);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    z-index: 1000;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Invisible hover bridge */
.beta-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    width: 100%;
    height: 10px;
}

.beta-version-dropdown-wrapper:hover .beta-dropdown-menu,
.beta-dropdown-menu.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.beta-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    text-align: left;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.beta-dropdown-item i {
    width: 18px;
    height: 18px;
    color: var(--primary);
    flex-shrink: 0;
}

.beta-dropdown-item:hover {
    background-color: rgba(59, 130, 246, 0.12);
    color: var(--primary);
}

.beta-dropdown-item:hover i {
    color: var(--primary);
}

.beta-dropdown-divider {
    height: 1px;
    background-color: var(--border);
    margin: 4px 0;
}

/* ── User Dropdown Menu & Modals ───────────────────────────────── */
.user-dropdown-wrapper {
    position: relative;
    display: inline-block;
}

.btn-user-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border-radius: 20px;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all var(--transition-fast) ease-in-out;
    flex-shrink: 0;
}

.btn-user-menu:hover,
.user-dropdown-wrapper:hover .btn-user-menu,
.btn-user-menu.active {
    transform: translateY(-1px);
    box-shadow: 0 0 18px rgba(139, 92, 246, 0.6), 0 4px 8px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
}

.btn-user-menu:active {
    transform: translateY(0) scale(0.98);
}

.user-btn-icon {
    width: 18px;
    height: 18px;
}

.user-chevron {
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease-in-out;
}

.user-dropdown-wrapper:hover .user-chevron,
.user-dropdown-menu.visible ~ .btn-user-menu .user-chevron,
.btn-user-menu.active .user-chevron {
    transform: rotate(180deg);
}

.user-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 190px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-md);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    z-index: 1000;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.user-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    width: 100%;
    height: 10px;
}

.user-dropdown-wrapper:hover .user-dropdown-menu,
.user-dropdown-menu.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    text-align: left;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.user-dropdown-item i,
.user-dropdown-item svg {
    width: 18px;
    height: 18px;
    color: var(--primary);
    flex-shrink: 0;
}

.user-dropdown-item:hover {
    background-color: rgba(59, 130, 246, 0.12);
    color: var(--primary);
}

.user-dropdown-item:hover i,
.user-dropdown-item:hover svg {
    color: var(--primary);
}

.user-dropdown-item.user-item-logout:hover {
    background-color: rgba(239, 68, 68, 0.12);
    color: var(--color-needs);
}

.user-dropdown-item.user-item-logout:hover i,
.user-dropdown-item.user-item-logout:hover svg {
    color: var(--color-needs);
}

/* User Info Modal & Credentials */
.user-modal-card,
.settings-modal-card,
.logout-modal-card {
    max-width: 440px;
    width: 90%;
}

.modal-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.modal-title-group h2 {
    margin: 0;
    font-size: 20px;
    font-family: var(--font-heading);
}

.modal-subtitle {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.user-modal-icon-badge {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}

.settings-modal-icon-badge {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(139, 92, 246, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a855f7;
}

.credential-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.credential-field + .credential-field {
    margin-top: 16px;
}

.credential-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.credential-input-wrapper {
    display: flex;
    align-items: center;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    transition: border-color var(--transition-fast);
}

.credential-input-wrapper:focus-within {
    border-color: var(--primary);
}

.credential-input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 10px 14px;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    outline: none;
}

.credential-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 10px 12px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.credential-action-btn:hover {
    color: var(--primary);
    background-color: rgba(59, 130, 246, 0.08);
}

.credential-action-btn i,
.credential-action-btn svg {
    width: 17px;
    height: 17px;
}

.credential-hint {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 6px;
    line-height: 1.4;
}

.credential-toast {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 8px 12px;
    background-color: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: var(--border-radius-sm);
    color: var(--color-ready);
    font-size: 13px;
    font-weight: 600;
}

.credential-toast i,
.credential-toast svg {
    width: 16px;
    height: 16px;
}

/* Settings Modal & Theme Switch */
.settings-theme-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-md);
}

.settings-theme-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.settings-theme-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.settings-theme-desc {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
}

.theme-switch-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    outline: none;
}

.theme-switch-track {
    display: flex;
    align-items: center;
    width: 62px;
    height: 34px;
    background-color: var(--border);
    border-radius: 17px;
    padding: 3px;
    transition: background-color 0.25s ease-in-out, box-shadow 0.25s ease;
    position: relative;
}

html[data-theme="dark"] .theme-switch-track {
    background: linear-gradient(135deg, #1e293b, #334155);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

html[data-theme="light"] .theme-switch-track {
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

.theme-switch-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.25s ease;
    color: #1e293b;
}

html[data-theme="dark"] .theme-switch-thumb {
    transform: translateX(0);
    color: #60a5fa;
    background-color: #0f172a;
}

html[data-theme="light"] .theme-switch-thumb {
    transform: translateX(28px);
    color: #f59e0b;
    background-color: #ffffff;
}

.theme-switch-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.25s ease;
}

/* Logout Modal */
.logout-modal-body {
    padding: 32px 24px 24px 24px;
    text-align: center;
}

.logout-icon-badge {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.12);
    color: var(--color-needs);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.logout-icon-badge i,
.logout-icon-badge svg {
    width: 28px;
    height: 28px;
}

.logout-modal-title {
    font-size: 22px;
    font-family: var(--font-heading);
    margin: 0 0 8px 0;
    color: var(--text-primary);
}

.logout-modal-text {
    color: var(--text-secondary);
    font-size: 14px;
    margin: 0 0 24px 0;
    line-height: 1.5;
}

.logout-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.logout-modal-actions .btn {
    flex: 1;
    padding: 10px 16px;
}

.btn-logout-confirm {
    background-color: var(--color-needs);
    color: #ffffff;
    border: 1px solid transparent;
}

.btn-logout-confirm:hover {
    background-color: #dc2626;
}

/* Modal Badge Variants & Beta Forms */
.help-header-icon-badge.red-badge {
    background: linear-gradient(135deg, #ef4444, #f97316);
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.35);
}

.help-header-icon-badge.yellow-badge {
    background: linear-gradient(135deg, #f59e0b, #eab308);
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.35);
}

.help-header-icon-badge.purple-badge {
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
    box-shadow: 0 4px 10px rgba(139, 92, 246, 0.35);
}

.beta-feedback-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.beta-feedback-form .form-label {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.beta-feedback-form .form-control {
    width: 100%;
    padding: 10px 14px;
    background-color: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-sm);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 14px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.beta-feedback-form .form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.beta-checkbox-item {
    padding: 8px 12px;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-sm);
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.beta-checkbox-item:hover {
    background-color: rgba(59, 130, 246, 0.08);
    border-color: var(--primary);
}

.beta-checkbox-item input[type="checkbox"] {
    accent-color: var(--primary);
    width: 16px;
    height: 16px;
}

.beta-success-view {
    text-align: center;
    padding: 32px 16px;
}

.beta-success-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    font-size: 32px;
}

.beta-success-view h3 {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.beta-success-view p {
    color: var(--text-secondary);
    font-size: 15px;
    max-width: 440px;
    margin: 0 auto 24px auto;
    line-height: 1.5;
}


/* Help Modal Popup Customizations */
.help-modal-card {
    max-width: 820px !important;
    width: 92% !important;
    max-height: 88vh;
    overflow-y: auto;
    padding: 0 !important;
    border-radius: var(--border-radius-lg);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}

.help-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border);
    background-color: var(--bg-primary);
    position: sticky;
    top: 0;
    z-index: 10;
}

.help-header-title {
    display: flex;
    align-items: center;
    gap: 14px;
}

.help-header-title h2 {
    font-size: 22px;
    font-weight: 800;
    margin: 0;
    line-height: 1.2;
}

.help-header-icon-badge {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(99, 102, 241, 0.3);
}

.help-modal-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin: 2px 0 0 0;
    font-weight: 500;
}

.help-modal-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Learn-Style Hero Banner */
.help-hero-banner {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.08));
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: var(--border-radius-md);
    padding: 18px 20px;
}

.help-hero-banner.green-theme {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.08));
    border-color: rgba(16, 185, 129, 0.3);
}

.help-hero-banner.green-theme .help-hero-icon {
    background-color: var(--color-ready);
}

.help-hero-banner.orange-theme {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(217, 119, 6, 0.08));
    border-color: rgba(245, 158, 11, 0.3);
}

.help-hero-banner.orange-theme .help-hero-icon {
    background-color: var(--color-almost);
}

.help-hero-banner.blue-theme {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(37, 99, 235, 0.08));
    border-color: rgba(59, 130, 246, 0.3);
}

.help-hero-banner.blue-theme .help-hero-icon {
    background-color: var(--primary);
}

.help-hero-banner.purple-theme {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(147, 51, 234, 0.08));
    border-color: rgba(168, 85, 247, 0.3);
}

.help-hero-banner.purple-theme .help-hero-icon {
    background-color: #a855f7;
}

.help-hero-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background-color: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.help-hero-text h3 {
    margin: 0 0 4px 0;
    font-size: 18.5px;
    font-weight: 800;
    color: var(--text-primary);
}

.help-hero-text p {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Rule Boxes */
.help-rule-box {
    background-color: rgba(59, 130, 246, 0.06);
    border-left: 4px solid var(--primary);
    padding: 14px 18px;
    border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
}

.help-rule-box.alert {
    background-color: rgba(239, 68, 68, 0.06);
    border-left-color: var(--color-needs);
}

.help-rule-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 15px;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.help-rule-desc {
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Visual Feature Cards Grid */
.help-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
}

.help-feature-card {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-md);
    padding: 16px 18px;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.help-feature-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    border-color: rgba(99, 102, 241, 0.4);
}

.help-feature-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.help-feature-header h4 {
    margin: 0;
    font-size: 16.5px;
    font-weight: 800;
    color: var(--text-primary);
}

.help-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: white;
    font-weight: 800;
    font-size: 13px;
    flex-shrink: 0;
    box-shadow: 0 2px 5px rgba(99, 102, 241, 0.3);
}

.help-feature-card p {
    margin: 0;
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.45;
}

.help-inline-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    background-color: var(--bg-primary);
    border: 1px solid var(--border);
    font-size: 12px;
    font-weight: 700;
}

.help-badge-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.help-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
}

.help-status-pill.green {
    background-color: rgba(16, 185, 129, 0.12);
    color: var(--color-ready);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.help-status-pill.orange {
    background-color: rgba(245, 158, 11, 0.12);
    color: var(--color-almost);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.help-status-pill.red {
    background-color: rgba(239, 68, 68, 0.12);
    color: var(--color-needs);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Tooltip Banner in Page Help Modal */
.help-modal-tool-tip {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.22);
    border-radius: var(--border-radius-md, 12px);
    padding: 10px 16px;
    margin-top: 10px;
    box-sizing: border-box;
    width: 100%;
}

html[data-theme="light"] .help-modal-tool-tip {
    background-color: rgba(59, 130, 246, 0.07);
    border-color: rgba(59, 130, 246, 0.25);
}

.method-help-btn-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1.5px solid var(--border);
    font-weight: 800;
    font-size: 13px;
    margin: 0 2px;
    vertical-align: middle;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.help-tool-tip-text {
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--text-secondary);
}

.help-tool-tip-text strong {
    color: var(--text-primary);
}

/* Modal Footer & Tutorial Button */
.help-modal-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 16px;
    margin-top: 8px;
    border-top: 1px solid var(--border);
    width: 100%;
}

.btn-tutorial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    color: #ffffff;
    padding: 12px 28px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 15px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
    transition: all var(--transition-fast) ease-in-out;
}

.btn-tutorial:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(168, 85, 247, 0.5);
    background: linear-gradient(135deg, #4f46e5 0%, #9333ea 100%);
}

.btn-tutorial:active {
    transform: translateY(0);
    gap: 8px;
}

/* Tutorial Slideshow Customizations */
.tutorial-slideshow-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.tutorial-slide-content {
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tutorial-controls-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    width: 100%;
    margin-top: 8px;
}

.tutorial-dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tutorial-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--border);
    border: none;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
    padding: 0;
}

.tutorial-dot:hover {
    background-color: var(--text-muted);
}

.tutorial-dot.active {
    width: 26px;
    border-radius: 10px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.6);
}

.tutorial-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 20px;
    font-weight: 600;
    padding: 8px 18px;
}

/* Tutorial Screenshot Image Cards */
.tutorial-image-card {
    border-radius: var(--border-radius-md, 12px);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    margin: 12px 0 12px 0;
    background: var(--bg-primary);
}

.tutorial-image-card img {
    width: 100%;
    height: auto;
    max-height: 330px;
    object-fit: cover;
    object-position: top;
    display: block;
}

/* Tutorial Headings - Larger, High-Hierarchy Presentation */
#page-help-modal.tutorial-mode .help-header-title h2 {
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

#page-help-modal.tutorial-mode .help-modal-subtitle {
    font-size: 14px;
    font-weight: 600;
}

#page-help-modal.tutorial-mode .help-header-icon-badge {
    width: 46px;
    height: 46px;
    font-size: 22px;
}

.is-site-tutorial .help-hero-banner {
    padding: 20px 22px;
}

.is-site-tutorial .help-hero-icon {
    width: 48px;
    height: 48px;
    font-size: 24px;
    border-radius: 12px;
}

.is-site-tutorial .help-hero-text h3 {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}

.is-site-tutorial .help-hero-text p {
    font-size: 14.5px;
    line-height: 1.45;
}

.is-site-tutorial .help-feature-header {
    gap: 12px;
    margin-bottom: 10px;
}

.is-site-tutorial .help-feature-header h4 {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.is-site-tutorial .help-step-number {
    width: 30px;
    height: 30px;
    font-size: 14px;
}

.is-site-tutorial .help-rule-title {
    font-size: 17px;
    font-weight: 800;
    margin-bottom: 6px;
}

.is-site-tutorial .help-rule-desc {
    font-size: 14px;
    line-height: 1.45;
}

@media (max-width: 640px) {
    #page-help-modal.tutorial-mode .help-header-title h2 {
        font-size: 20px;
    }
    .is-site-tutorial .help-hero-text h3 {
        font-size: 18px;
    }
    .is-site-tutorial .help-feature-header h4 {
        font-size: 16px;
    }
}

/* Custom Cancellation for MathLive */
.cancel-red {
    position: relative;
    display: inline-block;
    padding: 0 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 100'%3E%3Cline x1='0' y1='100' x2='100' y2='0' stroke='%23ef4444' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    font-weight: bold;
}

/* ── Column Addition Grid Styling ──────────────────────────────── */
.column-addition-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
    user-select: none;
}

.column-addition-grid {
    display: inline-grid;
    grid-template-columns: 36px repeat(var(--col-count, 4), 44px);
    gap: 0;
    background-color: var(--bg-tertiary, #1f2937);
    border: 2px solid var(--border, #374151);
    border-radius: 10px;
    padding: 16px 20px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    font-family: monospace, inherit;
}

.col-add-cell {
    width: 44px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--border, rgba(255, 255, 255, 0.15));
    box-sizing: border-box;
}

.col-add-cell.plus-cell {
    width: 36px;
    border: none;
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary, #ffffff);
}

.col-add-input {
    width: 36px;
    height: 38px;
    border-radius: 6px;
    border: 1.5px solid var(--border, #4b5563);
    background-color: var(--bg-primary, #111827);
    color: var(--text-primary, #ffffff);
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
}

.col-add-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

.col-add-input[readonly], .col-add-input[disabled] {
    background-color: transparent;
    border-color: transparent;
    color: var(--text-primary, #ffffff);
    font-weight: 800;
    pointer-events: none;
}

.column-addition-line {
    grid-column: 1 / -1;
    height: 3px;
    background-color: var(--text-primary, #ffffff);
    margin: 6px 0;
    border-radius: 2px;
}

.col-add-cell.carry-cell {
    height: 40px;
    border: none;
}

.col-add-input.carry-input {
    width: 30px;
    height: 32px;
    font-size: 15px;
    font-weight: 800;
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.4);
    background-color: rgba(245, 158, 11, 0.1);
}

.col-add-input.carry-input:focus {
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.3);
}

/* ── Column Subtraction Grid Styling ─────────────────────────────── */
.column-subtraction-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
    user-select: none;
}

.column-subtraction-grid {
    display: inline-grid;
    grid-template-columns: 36px repeat(var(--col-count, 4), 44px);
    gap: 0;
    background-color: var(--bg-tertiary, #1f2937);
    border: 2px solid var(--border, #374151);
    border-radius: 10px;
    padding: 16px 20px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    font-family: monospace, inherit;
}

.col-sub-cell {
    width: 44px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--border, rgba(255, 255, 255, 0.15));
    box-sizing: border-box;
    position: relative;
}

.col-sub-cell.minus-cell {
    width: 36px;
    border: none;
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary, #ffffff);
}

.col-sub-input {
    width: 36px;
    height: 38px;
    border-radius: 6px;
    border: 1.5px solid var(--border, #4b5563);
    background-color: var(--bg-primary, #111827);
    color: var(--text-primary, #ffffff);
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s, color 0.2s, text-decoration 0.2s;
    font-family: inherit;
}

.col-sub-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

.col-sub-input[readonly], .col-sub-input[disabled] {
    background-color: transparent;
    border-color: transparent;
    color: var(--text-primary, #ffffff);
    font-weight: 800;
}

.col-sub-input[readonly].crossed-out, .col-sub-input[disabled].crossed-out, .col-sub-input.crossed-out {
    text-decoration: line-through solid #ef4444 3px;
    color: #9ca3af !important;
}

.column-subtraction-line {
    grid-column: 1 / -1;
    height: 3px;
    background-color: var(--text-primary, #ffffff);
    margin: 6px 0;
    border-radius: 2px;
}

.col-sub-cell.borrow-cell {
    height: 40px;
    border: none;
}

.col-sub-input.borrow-input {
    width: 34px;
    height: 32px;
    font-size: 15px;
    font-weight: 800;
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.4);
    background-color: rgba(245, 158, 11, 0.1);
}

.col-sub-input.borrow-input:focus {
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.3);
}

.stop-sign-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #ef4444;
    cursor: pointer;
    z-index: 10;
    user-select: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    transition: opacity 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    -webkit-appearance: none;
    opacity: 0;
    pointer-events: none;
}

.col-sub-cell:hover .stop-sign-btn {
    opacity: 1;
    pointer-events: auto;
}

.stop-sign-btn::after {
    content: '';
    display: block;
    width: 8px;
    height: 2px;
    background-color: #ffffff;
    border-radius: 1px;
}

.stop-sign-btn:hover {
    transform: scale(1.25);
    background-color: #dc2626;
}

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

.stop-sign-btn.active-strike {
    background-color: #6b7280;
}

/* Bus Stop Division Styles */
.bus-stop-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
    user-select: none;
}

.bus-stop-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    margin: 12px 0;
}

.bus-stop-grid {
    display: inline-grid;
    gap: 0;
    background-color: var(--bg-tertiary, #1f2937);
    border: 2px solid var(--border, #374151);
    border-radius: 10px;
    padding: 16px 20px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    font-family: monospace, inherit;
}

.bus-stop-side-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-tertiary, #1f2937);
    border: 2px dashed var(--border, #4b5563);
    border-radius: 10px;
    padding: 10px 14px;
    gap: 8px;
    min-width: 110px;
    min-height: 80px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: border-color 0.2s, background-color 0.2s;
    box-sizing: border-box;
}

.bus-stop-side-box .bank-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary, #9ca3af);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    user-select: none;
    white-space: nowrap;
}

.bus-stop-edit-btn-group {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.bus-stop-col-btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1.5px solid var(--border, #4b5563);
    background-color: var(--bg-primary, #111827);
    color: var(--text-primary, #ffffff);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, opacity 0.15s;
    user-select: none;
    padding: 0;
}

.bus-stop-col-btn.bus-stop-btn-dot {
    font-size: 26px;
    font-weight: 900;
    line-height: 0.6;
    padding-bottom: 8px;
}

.bus-stop-col-btn:hover:not(:disabled) {
    background-color: var(--primary, #3b82f6);
    border-color: var(--primary, #3b82f6);
    color: #ffffff;
}

.bus-stop-col-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.bus-stop-cell {
    width: 48px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--border, rgba(255, 255, 255, 0.15));
    box-sizing: border-box;
    position: relative;
}

.bus-stop-cell.divisor-cell {
    width: 56px;
    border: none;
    font-size: 24px;
    font-weight: 800;
    color: var(--text-primary, #ffffff);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 4px;
}

.bus-stop-input.divisor-input {
    width: 48px;
    height: 42px;
    text-align: center;
    font-size: 20px;
    font-weight: 800;
}

.bus-stop-cell.bracket-cell {
    width: 12px;
    border: none;
    position: relative;
}

.bus-stop-cell.bracket-cell::after {
    content: '';
    position: absolute;
    top: 4px;
    bottom: 4px;
    right: 2px;
    width: 3px;
    background-color: var(--text-primary, #ffffff);
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.bus-stop-cell.dot-cell {
    width: 20px;
    border: none;
    font-size: 24px;
    font-weight: 900;
    color: var(--text-primary, #ffffff);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    user-select: none;
}

.bus-stop-cell.dot-cell {
    cursor: default !important;
}

.bus-stop-input {
    width: 42px;
    height: 42px;
    border-radius: 6px;
    border: 1.5px solid var(--border, #4b5563);
    background-color: var(--bg-primary, #111827);
    color: var(--text-primary, #ffffff);
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s, color 0.2s, text-decoration 0.2s;
    font-family: inherit;
}

.bus-stop-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

.bus-stop-input[readonly], .bus-stop-input[disabled] {
    background-color: transparent;
    border-color: transparent;
    color: var(--text-primary, #ffffff);
    font-weight: 800;
}

.bus-stop-input.crossed-out {
    text-decoration: line-through solid #ef4444 3px;
    color: #9ca3af !important;
}

.bus-stop-top-line {
    grid-column: 3 / -1;
    height: 3px;
    background-color: var(--text-primary, #ffffff);
    margin-bottom: 4px;
    border-radius: 2px;
}

.bus-stop-cell:hover .stop-sign-btn {
    opacity: 1;
    pointer-events: auto;
}

/* ── Column Multiplication Grid Overrides ─────────────────────────────── */
.column-mult-grid {
    grid-template-columns: 32px repeat(var(--col-count, 4), 38px);
}
.column-mult-grid .col-add-cell {
    width: 38px;
    height: 41px;
}
.column-mult-grid .col-add-cell.plus-cell {
    width: 32px;
}
.column-mult-grid .col-add-input {
    width: 30px;
    height: 32px;
    font-size: 16px;
}
.column-mult-grid .col-add-cell.carry-cell {
    height: 28px;
}
.column-mult-grid .col-add-input.carry-input {
    width: 24px;
    height: 24px;
    font-size: 13px;
}
.column-mult-grid .column-addition-line {
    margin: 2px 0;
}

/* Lattice Grid Styling */
.lattice-container {
    position: relative;
    margin: 20px auto;
}

.lattice-grid {
    display: inline-grid;
    grid-template-columns: 60px repeat(var(--col-count, 2), 60px) 40px;
    grid-template-rows: 40px repeat(var(--row-count, 2), 60px) 60px;
}

.lattice-header {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 20px;
    color: var(--text-primary, #ffffff);
}

.lattice-cell {
    box-sizing: border-box;
}

.lattice-inner {
    border-right: 1px solid var(--border, #374151);
    border-bottom: 1px solid var(--border, #374151);
}

.lattice-diag {
    background: linear-gradient(to bottom right, transparent 49%, #0ea5e9 49%, #0ea5e9 51%, transparent 51%);
}

.lattice-tens-input, .lattice-units-input, .lattice-sum-input, .lattice-carry-input {
    position: absolute;
    background: transparent;
    border: none;
    color: var(--text-primary, #ffffff);
    text-align: center;
    outline: none;
    transform: translate(-50%, -50%);
}

.lattice-tens-input, .lattice-units-input {
    width: 24px;
    height: 24px;
    font-size: 16px;
}

.lattice-sum-input {
    width: 30px;
    height: 30px;
    font-size: 22px;
    font-weight: 800;
    color: #10b981;
}

.lattice-carry-input {
    width: 20px;
    height: 20px;
    font-size: 14px;
    color: #ef4444;
}

/* Grid Multiplication Method Styles */
.grid-cell-input {
    width: 76px;
    height: 38px;
    border-radius: 6px;
    border: 1.5px solid var(--border, #4b5563);
    background-color: var(--bg-primary, #111827);
    color: var(--text-primary, #ffffff);
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    outline: none;
    box-sizing: border-box;
    padding: 4px 6px;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
}

.grid-cell-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

.grid-cell-input[readonly], .grid-cell-input[disabled] {
    background-color: transparent;
    border-color: transparent;
    color: var(--text-primary, #ffffff);
    font-weight: 800;
    pointer-events: none;
}

/* Multi-Method / Lattice Final Answer Box Styling */
.final-answer-container {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.final-answer-label {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary, #ffffff);
}

.multi-method-final-answer {
    width: 140px;
    height: 44px;
    border-radius: var(--border-radius-md, 8px);
    border: 2px solid var(--border, #4b5563);
    background-color: var(--bg-tertiary, #1f2937);
    color: var(--text-primary, #ffffff);
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    outline: none;
    box-sizing: border-box;
    padding: 6px 12px;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
}

.multi-method-final-answer:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

.multi-method-final-answer[readonly], .multi-method-final-answer[disabled] {
    background-color: var(--bg-tertiary, #1f2937);
    color: var(--text-primary, #ffffff);
    opacity: 0.9;
}

/* ==========================================================================
   Offline, Network Status & Retry Page Styling
   ========================================================================== */

/* Top Floating Network Status Banner */
.network-status-banner {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    animation: bannerSlideDown 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes bannerSlideDown {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.network-status-banner.banner-offline {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.95), rgba(220, 38, 38, 0.95));
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.network-status-banner.banner-online {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.95), rgba(5, 150, 105, 0.95));
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.network-banner-content {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 1000px;
    width: 100%;
    justify-content: center;
}

.network-banner-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.network-banner-btn {
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #ffffff;
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    margin-left: 8px;
    transition: background 0.15s ease, transform 0.15s ease;
}

.network-banner-btn:hover {
    background: rgba(255, 255, 255, 0.35);
    transform: translateY(-1px);
}

/* Offline Full-Page View */
.offline-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(80vh - 80px);
    padding: 32px 16px;
    width: 100%;
}

.offline-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-xl, 24px);
    box-shadow: var(--card-shadow, 0 10px 30px -10px rgba(0, 0, 0, 0.5));
    max-width: 560px;
    width: 100%;
    padding: 40px 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.offline-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ef4444, #f59e0b, #3b82f6);
}

.offline-icon-wrapper {
    position: relative;
    width: 96px;
    height: 96px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.offline-icon-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.15);
    animation: offlinePulse 2.4s ease-in-out infinite;
}

@keyframes offlinePulse {
    0% {
        transform: scale(0.9);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.15);
        opacity: 0.3;
    }
    100% {
        transform: scale(0.9);
        opacity: 0.8;
    }
}

.offline-icon-circle {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.12);
    border: 1.5px solid rgba(239, 68, 68, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ef4444;
}

.offline-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.25);
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.offline-title {
    font-family: var(--font-heading, 'Outfit', sans-serif);
    font-size: 26px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 10px;
    letter-spacing: -0.02em;
}

.offline-subtitle {
    font-size: 15px;
    line-height: 1.55;
    color: var(--text-secondary);
    margin-bottom: 24px;
    max-width: 440px;
}

.offline-tips-box {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-md, 12px);
    padding: 16px 20px;
    margin-bottom: 24px;
    text-align: left;
    width: 100%;
}

.offline-tips-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.offline-tips-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.offline-tips-list li {
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.4;
}

.offline-tip-bullet {
    color: var(--primary);
    font-weight: bold;
    flex-shrink: 0;
}

.offline-actions {
    display: flex;
    gap: 12px;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
}

.offline-actions .btn {
    min-width: 160px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 700;
    font-size: 14px;
}

.offline-status-msg {
    margin-top: 16px;
    font-size: 13px;
    min-height: 20px;
    transition: all 0.2s ease;
}

.offline-status-msg.status-checking {
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.offline-status-msg.status-failed {
    color: var(--color-needs, #ef4444);
    animation: shakeAnim 0.35s ease-in-out;
}

.offline-status-msg.status-success {
    color: var(--color-ready, #10b981);
    font-weight: 700;
}

@keyframes shakeAnim {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

.offline-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    display: inline-block;
}

/* ==========================================================================
   Equation Balancing Method Styles
   ========================================================================== */
.equation-balancing-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 16px 0;
    user-select: none;
    width: 100%;
}

.equation-balancing-grid {
    display: inline-grid;
    grid-template-columns: minmax(100px, max-content) 44px minmax(100px, max-content);
    gap: 8px 12px;
    align-items: center;
    background-color: var(--bg-tertiary, #1f2937);
    border: 2px solid var(--border, #374151);
    border-radius: 12px;
    padding: 20px 24px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    font-family: inherit;
    box-sizing: border-box;
}

.eq-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.eq-cell.eq-term.eq-initial {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary, #ffffff);
    text-align: center;
    padding: 6px 0;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
}

math-field.eq-bal-initial {
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

math-field.eq-bal-initial::part(container) {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    min-width: 0 !important;
}

math-field.eq-bal-initial::part(content) {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    min-width: 0 !important;
}

math-field.eq-bal-initial::part(virtual-keyboard-toggle),
math-field.eq-bal-initial::part(menu-toggle) {
    display: none !important;
}

.eq-cell.eq-equals {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-primary, #ffffff);
    text-align: center;
    user-select: none;
}

.eq-cell.eq-spacer {
    height: 36px;
}

math-field.eq-bal-sym {
    min-width: 44px;
    width: 52px;
    max-width: 60px;
    height: 42px;
    padding: 0 4px;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    box-sizing: border-box;
}

.equation-balancing-grid.eq-bal-inequality {
    grid-template-columns: minmax(100px, max-content) 56px minmax(100px, max-content);
}

.equation-balancing-grid.eq-bal-compound {
    grid-template-columns: minmax(70px, max-content) 44px minmax(90px, max-content) 44px minmax(70px, max-content);
    gap: 8px 10px;
}

.equation-balancing-grid.eq-bal-compound .eq-bal-input {
    min-width: 60px;
}

.equation-balancing-grid.eq-bal-compound .eq-bal-input.eq-bal-amber {
    min-width: 60px;
}

.eq-bal-input.eq-bal-sym {
    min-width: 44px;
    max-width: 56px;
    padding: 2px 4px;
}

.equation-balancing-grid.eq-bal-compound .eq-bal-input.eq-bal-sym {
    min-width: 44px;
    max-width: 48px;
    padding: 2px 2px;
}

.eq-bal-input {
    min-width: 90px;
    min-height: 42px;
    height: auto;
    border-radius: 8px;
    border: 1.5px solid var(--border, #4b5563);
    background-color: var(--bg-primary, #111827);
    color: var(--text-primary, #ffffff);
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 10px;
    box-sizing: border-box;
}

.eq-bal-input:focus,
.eq-bal-input:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

.eq-bal-input.eq-bal-amber {
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.4);
    background-color: rgba(245, 158, 11, 0.1);
    font-weight: 800;
    font-size: 18px;
    min-height: 36px;
    height: auto;
    min-width: 80px;
}

.eq-bal-input.eq-bal-amber:focus,
.eq-bal-input.eq-bal-amber:focus-within {
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.3);
}

.eq-bal-input[readonly], .eq-bal-input[disabled] {
    opacity: 0.9;
    pointer-events: none;
}

.eq-bal-input.is-correct {
    border-color: #10b981 !important;
    background-color: rgba(16, 185, 129, 0.12) !important;
    color: #10b981 !important;
}

.eq-bal-input.is-wrong {
    border-color: #ef4444 !important;
    background-color: rgba(239, 68, 68, 0.12) !important;
    color: #ef4444 !important;
}

/* Static badge/box used in help.md & examples.md */
.eq-bal-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    height: 38px;
    border-radius: 8px;
    border: 1.5px solid var(--border, #4b5563);
    background-color: var(--bg-primary, #111827);
    color: var(--text-primary, #ffffff);
    font-size: 18px;
    font-weight: 700;
    padding: 2px 10px;
    box-sizing: border-box;
}

.eq-bal-box.eq-bal-amber {
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.4);
    background-color: rgba(245, 158, 11, 0.1);
    font-weight: 800;
}

.equation-balancing-container-box {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 600px) {
    .equation-balancing-grid {
        padding: 12px 8px;
        gap: 6px 8px;
        max-width: 100%;
    }
    .equation-balancing-grid.eq-bal-compound {
        grid-template-columns: minmax(42px, max-content) 26px minmax(56px, max-content) 26px minmax(42px, max-content);
        gap: 6px 3px;
        padding: 10px 4px;
        margin: 0 auto;
    }
    .equation-balancing-grid.eq-bal-compound .eq-bal-input {
        min-width: 42px;
        font-size: 15px;
        padding: 2px 2px;
    }
    .equation-balancing-grid.eq-bal-compound .eq-bal-input.eq-bal-amber {
        min-width: 42px;
        font-size: 15px;
        padding: 2px 2px;
    }
    .equation-balancing-grid.eq-bal-compound .eq-bal-input.eq-bal-sym {
        min-width: 26px;
        max-width: 32px;
        font-size: 15px;
        padding: 2px 0px;
    }
}

/* ==========================================================================
   Global App Footer & Policy Popups
   ========================================================================== */

.app-main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.app-footer {
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border);
    margin-top: auto;
    width: 100%;
    font-family: var(--font-sans);
    color: var(--text-secondary);
    transition: background-color var(--transition-normal), border-color var(--transition-normal);
}

.footer-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 22px 24px 14px;
    box-sizing: border-box;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
    margin-bottom: 18px;
}

.footer-col-title {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.footer-link-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.footer-link-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-family: inherit;
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
    text-align: left;
    transition: color var(--transition-fast), transform var(--transition-fast);
    display: inline-flex;
    align-items: center;
    line-height: 1.4;
}

.footer-link-btn:hover {
    color: var(--primary);
    transform: translateX(2px);
}

.footer-link-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 2px;
}

.footer-legal-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.footer-link-divider {
    color: var(--text-muted);
    font-size: 12px;
    user-select: none;
}

.footer-bottom {
    padding-top: 10px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--text-muted);
    flex-wrap: wrap;
    gap: 12px;
}

.footer-copyright {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
}

/* Responsive Breakpoint for Mobile/Tablet */
@media (max-width: 768px) {
    .footer-container {
        padding: 16px 20px 10px;
    }
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-bottom: 12px;
    }
    .footer-col-title {
        margin-bottom: 6px;
    }
}

/* Policy & Information Modal */
.policy-modal-card {
    max-width: 820px;
    width: 92%;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--card-shadow);
}

.policy-modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-secondary);
    border-top-left-radius: var(--border-radius-lg);
    border-top-right-radius: var(--border-radius-lg);
    flex-shrink: 0;
}

.policy-header-title {
    display: flex;
    align-items: center;
    gap: 14px;
}

.policy-header-icon-badge {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--primary-bg-light);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.policy-header-title h2 {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
}

.policy-modal-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 2px 0 0;
    line-height: 1.2;
}

.policy-modal-subnav {
    padding: 12px 24px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.policy-switcher-group {
    display: inline-flex;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 3px;
    gap: 4px;
}

.policy-switch-btn {
    background: transparent;
    border: none;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-sans);
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all var(--transition-fast);
}

.policy-switch-btn.active {
    background: var(--primary);
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.policy-switch-btn:hover:not(.active) {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.policy-modal-body {
    padding: 28px;
    overflow-y: auto;
    flex: 1;
    color: var(--text-primary);
    line-height: 1.65;
    font-size: 15px;
}

.policy-modal-body h1 {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 8px;
}

.policy-modal-body h2 {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 28px 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}

.policy-modal-body h3 {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 20px 0 10px;
}

.policy-modal-body p {
    margin-bottom: 14px;
    color: var(--text-secondary);
}

.policy-modal-body strong {
    color: var(--text-primary);
}

.policy-modal-body ul, .policy-modal-body ol {
    margin: 12px 0 18px 24px;
    color: var(--text-secondary);
}

.policy-modal-body li {
    margin-bottom: 8px;
}

.policy-modal-body hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 24px 0;
}

.policy-modal-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.policy-modal-body th, .policy-modal-body td {
    padding: 10px 14px;
    border: 1px solid var(--border);
    text-align: left;
}

.policy-modal-body th {
    background: var(--bg-tertiary);
    font-weight: 600;
    color: var(--text-primary);
}

.policy-placeholder-callout {
    display: flex;
    gap: 14px;
    background: rgba(245, 158, 11, 0.1);
    border: 1.5px dashed var(--color-almost);
    border-radius: 12px;
    padding: 16px 20px;
    margin: 16px 0 24px;
    align-items: flex-start;
}

.policy-placeholder-icon {
    font-size: 22px;
    line-height: 1;
}

.policy-placeholder-callout strong {
    color: var(--color-almost);
    display: block;
    font-size: 14px;
    margin-bottom: 4px;
}

.policy-placeholder-callout p {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
}

/* ── Method Help Popup Styles (Multiplication & Division) ──────────────── */
.method-help-btn {
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.method-help-btn:hover {
    background-color: var(--primary, #3b82f6) !important;
    border-color: var(--primary, #3b82f6) !important;
    color: #ffffff !important;
    transform: scale(1.08);
}

.method-help-footer-note {
    margin-top: 10px;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

/* ── JSXGraph Coordinate Board Labels ──────────────────────────────────── */
.jxgbox .JXGtext {
    line-height: 1.2;
}

.jxgbox .JXGtext span {
    white-space: nowrap;
}

/* Y-axis title rotated 90 degrees anticlockwise to the left of the axis */
.jxgbox .jxg-y-axis-title {
    transform: rotate(-90deg) !important;
    transform-origin: center center !important;
    white-space: nowrap !important;
}

/* Position x-axis labels consistently across all sections */
.jxgbox .jxg-x-axis-label {
    transform: translateY(2px) !important;
}

/* Position y-axis labels alongside the gridlines (lower and slightly right by 6px + 12pt) */
.jxgbox .jxg-y-axis-label {
    transform: translate(1px, calc(6px + 12pt)) !important;
}

/* Move y-axis labels up 5px for all draw cumulative frequency graph questions (calc(6px + 8pt - 5px) = calc(1px + 8pt)) */
.jxgbox.cf-graph-board .jxg-y-axis-label,
.cf-graph-container .jxgbox .jxg-y-axis-label,
.cf-graph-board .jxg-y-axis-label,
.cf-graph-container .jxg-y-axis-label,
[data-interactive-type="draw-cumulative-frequency-graph"] .jxg-y-axis-label,
.jxgbox .jxg-cf-y-axis-label,
.jxgbox .cf-draw-y-axis-label {
    transform: translate(1px, calc(1px + 8pt)) !important;
}

/* Axis title / name letter 'y' at the top of the axis stays in its designated position */
.jxgbox .jxg-y-axis-name {
    transform: translate(1px, 0) !important;
}

/* ── Admin Screen Styles ────────────────────────────────────────────────── */
.admin-stat-card {
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

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

.admin-user-card {
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.admin-user-card:hover {
    border-color: var(--primary);
}

.admin-user-row {
    transition: background-color var(--transition-fast);
}

.admin-user-row:hover {
    background-color: var(--bg-tertiary);
}

.admin-user-details-drawer {
    animation: slideDownDrawer 0.25s ease-out;
}

@keyframes slideDownDrawer {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.btn-toggle-role {
    transition: all var(--transition-fast);
}

.btn-toggle-role:hover {
    transform: scale(1.02);
}

/* ══════════════════════════════════════════════════════════════════════════
   HEADER SIGN IN BUTTON
   ══════════════════════════════════════════════════════════════════════════ */
.btn-header-signin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 34px;
    padding: 0 16px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--primary) 0%, #2563eb 100%);
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    box-shadow: 0 0 12px rgba(79, 70, 229, 0.35), 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all var(--transition-fast) ease-in-out;
    font-family: var(--font-heading);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    text-decoration: none;
}

.btn-header-signin:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 18px rgba(79, 70, 229, 0.55), 0 4px 8px rgba(0, 0, 0, 0.25);
    background: linear-gradient(135deg, #4338ca 0%, #1d4ed8 100%);
    color: #ffffff;
}

.btn-header-signin:active {
    transform: translateY(0) scale(0.98);
}

.signin-btn-icon {
    width: 15px;
    height: 15px;
}

.signin-btn-text {
    line-height: 1;
}

@media (max-width: 520px) {
    .btn-header-signin {
        padding: 0 11px;
    }
    .signin-btn-text {
        display: none;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   LANDING PAGE STYLES
   ══════════════════════════════════════════════════════════════════════════ */
.landing-page-wrapper {
    max-width: 1140px;
    margin: 0 auto;
    padding: 16px 20px 80px 20px;
    font-size: 16.5px;
}

/* ── Hero Section ──────────────────────────────────────────────────────── */
.landing-hero-section {
    text-align: center;
    padding: 48px 16px 40px 16px;
    position: relative;
}

.landing-hero-logo-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 24px;
}

.landing-hero-logo {
    font-family: var(--font-heading);
    font-size: clamp(34px, 5.5vw, 54px);
    font-weight: 900;
    letter-spacing: -0.035em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 1.5vw, 14px);
    user-select: none;
    line-height: 1;
    cursor: default;
}

.landing-hero-logo .logo-word {
    background: linear-gradient(135deg, var(--primary) 0%, #8b5cf6 50%, #38bdf8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 12px rgba(99, 102, 241, 0.25));
}

.landing-hero-logo .logo-3000 {
    font-size: clamp(18px, 2.8vw, 28px);
    height: clamp(32px, 4.8vw, 48px);
    padding: clamp(2px, 0.5vw, 4px) clamp(10px, 1.5vw, 16px);
    border-radius: clamp(8px, 1.2vw, 12px);
    transform: rotate(-6deg) translateY(-2px);
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.5), inset 0 1.5px 2px rgba(255, 255, 255, 0.7);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    letter-spacing: -0.02em;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.landing-hero-logo:hover .logo-3000 {
    transform: rotate(6deg) scale(1.1) translateY(-3px);
    box-shadow: 0 6px 22px rgba(168, 85, 247, 0.7), inset 0 1.5px 2px rgba(255, 255, 255, 0.85);
}

.landing-hero-logo:active .logo-3000 {
    transform: rotate(0deg) scale(0.96);
}

.landing-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 30px;
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: var(--primary);
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 24px;
    letter-spacing: 0.01em;
}

.landing-hero-badge i {
    width: 16px;
    height: 16px;
}

.landing-hero-title {
    font-family: var(--font-heading);
    font-size: clamp(34px, 5.5vw, 56px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 0 auto 20px auto;
    max-width: 900px;
}

.landing-gradient-text {
    background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #34d399 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.landing-hero-subtitle {
    font-size: clamp(16px, 2.2vw, 18.5px);
    line-height: 1.65;
    color: var(--text-secondary);
    max-width: 720px;
    margin: 0 auto 36px auto;
}

.landing-hero-subtitle strong {
    color: var(--text-primary);
}

.landing-hero-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 48px;
}

.btn-landing-cta {
    padding: 13px 28px;
    font-size: 17px;
    font-weight: 700;
    border-radius: 30px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: linear-gradient(135deg, var(--primary) 0%, #2563eb 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 16px rgba(79, 70, 229, 0.35);
    transition: all var(--transition-fast) ease;
}

.btn-landing-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(79, 70, 229, 0.5);
    background: linear-gradient(135deg, #4338ca 0%, #1d4ed8 100%);
}

.btn-landing-curricula {
    padding: 13px 26px;
    font-size: 17px;
    font-weight: 700;
    border-radius: 30px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    transition: all var(--transition-fast) ease;
}

.btn-landing-curricula:hover {
    transform: translateY(-2px);
}

.landing-hero-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    max-width: 860px;
    margin: 0 auto;
}

.landing-stat-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-lg);
    padding: 14px 18px;
    text-align: left;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.landing-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.landing-stat-icon.green {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.landing-stat-icon.blue {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.landing-stat-icon.purple {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.landing-stat-icon i {
    width: 20px;
    height: 20px;
}

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

.landing-stat-content strong {
    font-size: 16.5px;
    font-weight: 800;
    color: var(--text-primary);
}

.landing-stat-content span {
    font-size: 14.5px;
    color: var(--text-secondary);
}

/* ── Section Headers ────────────────────────────────────────────────────── */
.landing-section-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 40px auto;
}

.landing-section-badge {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(99, 102, 241, 0.12);
    color: var(--primary);
    border: 1px solid rgba(99, 102, 241, 0.25);
    margin-bottom: 12px;
}

.landing-section-title {
    font-family: var(--font-heading);
    font-size: clamp(26px, 3.8vw, 36px);
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--text-primary);
    margin: 0 0 12px 0;
    line-height: 1.25;
}

.landing-section-title:last-child {
    margin-bottom: 0;
}

.landing-section-subtitle {
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}

/* ── Singular Overview: 5 Steps Grid ───────────────────────────────────── */
.landing-overview-section {
    margin-top: 64px;
}

.landing-steps-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 48px;
}

.landing-step-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-lg);
    padding: 26px 24px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.landing-step-card:hover {
    transform: translateY(-2px);
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.landing-step-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.landing-step-num {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 900;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}

.landing-step-icon-badge {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.landing-step-icon-badge.blue {
    background: rgba(59, 130, 246, 0.14);
    color: #3b82f6;
}

.landing-step-icon-badge.purple {
    background: rgba(139, 92, 246, 0.14);
    color: #8b5cf6;
}

.landing-step-icon-badge.green {
    background: rgba(16, 185, 129, 0.14);
    color: #10b981;
}

.landing-step-icon-badge.orange {
    background: rgba(245, 158, 11, 0.14);
    color: #f59e0b;
}

.landing-step-icon-badge.teal {
    background: rgba(20, 184, 166, 0.14);
    color: #14b8a6;
}

.landing-step-icon-badge i {
    width: 22px;
    height: 22px;
}

.landing-step-title {
    font-family: var(--font-heading);
    font-size: 18.5px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 10px 0;
    line-height: 1.3;
}

.landing-step-desc {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}

.landing-step-desc code {
    font-size: 13px;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    color: var(--primary);
    font-weight: 600;
}

.landing-step-card-wide {
    grid-column: 1 / -1;
    display: flex;
    gap: 22px;
    align-items: flex-start;
}

.landing-step-wide-content {
    flex: 1;
}

@media (max-width: 768px) {
    .landing-steps-grid {
        grid-template-columns: 1fr;
    }
    .landing-step-card-wide {
        flex-direction: column;
    }
}

/* ── UI Preview Showcase Banner (Zoomed-In) ────────────────────────────── */
.landing-preview-banner {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-xl);
    padding: 32px 24px;
    margin-top: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.landing-preview-header {
    text-align: center;
    margin-bottom: 28px;
}

.landing-preview-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13.5px;
    font-weight: 700;
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
    margin-bottom: 8px;
}

.landing-preview-tag i {
    width: 14px;
    height: 14px;
}

.landing-preview-header h2,
.landing-preview-header h3 {
    font-family: var(--font-heading);
    font-size: clamp(26px, 3.8vw, 36px);
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.25;
}

.landing-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.landing-preview-item {
    display: flex;
    flex-direction: column;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
    cursor: pointer;
    user-select: none;
    position: relative;
}

.landing-preview-item:hover,
.landing-preview-item:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
    border-color: var(--primary);
    outline: none;
}

.landing-preview-img-wrapper {
    height: 180px;
    overflow: hidden;
    background: var(--bg-primary);
    position: relative;
}

.landing-preview-zoom-hint {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(15, 23, 42, 0.82);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    color: #f8fafc;
    pointer-events: none;
    opacity: 0.85;
    transition: opacity var(--transition-fast), transform var(--transition-fast), background var(--transition-fast);
}

.landing-preview-item:hover .landing-preview-zoom-hint,
.landing-preview-item:focus-visible .landing-preview-zoom-hint {
    opacity: 1;
    transform: scale(1.04);
    background: var(--primary);
    color: #ffffff;
    border-color: transparent;
}

.landing-preview-zoom-hint i {
    width: 12px;
    height: 12px;
}

.landing-preview-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: transform var(--transition-normal);
}

.landing-preview-item:hover .landing-preview-img-wrapper img {
    transform: scale(1.03);
}

.landing-preview-caption {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.landing-preview-caption strong {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-primary);
}

.landing-preview-caption span {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-secondary);
}

@media (max-width: 860px) {
    .landing-preview-grid {
        grid-template-columns: 1fr;
    }
    .landing-preview-img-wrapper {
        height: 180px;
    }
}

/* ── Platform Showcase Image Detail Lightbox Modal ────────────────────── */
.landing-image-modal-card {
    max-width: 960px;
    width: 94%;
    max-height: 92vh;
    border-radius: var(--border-radius-xl);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.96);
    transition: transform var(--transition-normal);
}

.modal-overlay.visible .landing-image-modal-card {
    transform: scale(1);
}

.landing-image-modal-header {
    padding: 18px 24px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-secondary);
}

.landing-image-modal-title-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.landing-image-modal-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary);
}

.landing-image-modal-badge i {
    width: 14px;
    height: 14px;
}

.landing-image-modal-header h2 {
    font-family: var(--font-heading);
    font-size: clamp(17px, 2.4vw, 21px);
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.25;
}

.landing-image-modal-body {
    padding: 20px 24px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.landing-image-modal-img-container {
    width: 100%;
    max-height: 52vh;
    min-height: 220px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.2);
}

.landing-image-modal-img-container img {
    width: 100%;
    height: auto;
    max-height: 52vh;
    object-fit: contain;
    display: block;
}

.landing-image-modal-detail-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.landing-image-modal-headline {
    font-family: var(--font-heading);
    font-size: 15.5px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
}

.landing-image-modal-points-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.landing-image-modal-point-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-sm);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.landing-image-modal-point-card strong {
    font-size: 15px;
    font-weight: 800;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.landing-image-modal-point-card p {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0;
}

.landing-image-modal-footer {
    padding: 12px 24px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-secondary);
}

.landing-image-modal-counter {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .landing-image-modal-points-grid {
        grid-template-columns: 1fr;
    }
    .landing-image-modal-body {
        padding: 14px 16px;
    }
    .landing-image-modal-header {
        padding: 14px 16px;
    }
    .landing-image-modal-footer {
        padding: 10px 16px;
    }
}

/* ── Core Purpose & Topic Readiness Showcase Box ──────────────────────── */
.landing-readiness-showcase-section {
    margin-top: 56px;
}

.landing-readiness-box {
    background: linear-gradient(145deg, var(--bg-secondary) 0%, rgba(79, 70, 229, 0.04) 100%);
    border: 1.5px solid rgba(99, 102, 241, 0.35);
    border-radius: var(--border-radius-xl);
    padding: 36px 32px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.readiness-box-header {
    text-align: center;
    max-width: 780px;
    margin: 0 auto 36px auto;
}

.readiness-box-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(99, 102, 241, 0.14);
    color: var(--primary);
    border: 1px solid rgba(99, 102, 241, 0.3);
    margin-bottom: 12px;
}

.readiness-box-badge i {
    width: 15px;
    height: 15px;
}

.readiness-box-title {
    font-family: var(--font-heading);
    font-size: clamp(24px, 3.6vw, 34px);
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 14px 0;
    line-height: 1.25;
}

.readiness-box-title:last-child {
    margin-bottom: 0;
}

.readiness-box-intro {
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--text-secondary);
    margin: 0;
}

.readiness-box-intro strong {
    color: var(--text-primary);
}

.readiness-box-content-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 28px;
    align-items: stretch;
}

/* Simulated Dashboard Widget */
.readiness-dashboard-widget {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-lg);
    padding: 22px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 14px;
}

.widget-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-size: 16.5px;
    font-weight: 800;
    color: var(--text-primary);
}

.widget-title i {
    width: 17px;
    height: 17px;
    color: var(--primary);
}

.widget-hint {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.widget-topics-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.widget-topic-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-md);
    transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.widget-topic-row.decaying-highlight {
    border-color: rgba(245, 158, 11, 0.45);
    background: rgba(245, 158, 11, 0.05);
}

.widget-topic-stage {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    border: 1.5px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    color: var(--text-primary);
    flex-shrink: 0;
}

.widget-topic-main {
    flex: 1;
    min-width: 0;
}

.widget-topic-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    gap: 8px;
}

.widget-topic-name {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.widget-readiness-label {
    font-size: 13px;
    font-weight: 800;
    flex-shrink: 0;
}

.widget-readiness-label.green { color: #10b981; }
.widget-readiness-label.orange { color: #f59e0b; }
.widget-readiness-label.red { color: #ef4444; }

.widget-bar-track {
    width: 100%;
    height: 7px;
    background: var(--bg-primary);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--border);
    margin-bottom: 5px;
}

.widget-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease;
}

.widget-bar-fill.green { background: linear-gradient(90deg, #10b981 0%, #34d399 100%); }
.widget-bar-fill.orange { background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%); }
.widget-bar-fill.red { background: linear-gradient(90deg, #ef4444 0%, #f87171 100%); }

.widget-topic-meta {
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.widget-topic-meta i {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: -2px;
}

.widget-topic-meta.decaying-text { color: #d97706; font-weight: 600; }
.widget-topic-meta.alert-text { color: #dc2626; font-weight: 600; }

.widget-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 14px;
    margin-top: 14px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 8px;
}

.widget-legend-item {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 5px;
}

.widget-legend-item .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.widget-legend-item .dot.green { background: #10b981; }
.widget-legend-item .dot.orange { background: #f59e0b; }
.widget-legend-item .dot.red { background: #ef4444; }

/* Explanation Card */
.readiness-explanation-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-lg);
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.explanation-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 700;
    background: rgba(99, 102, 241, 0.12);
    color: var(--primary);
    width: fit-content;
    margin-bottom: 12px;
}

.explanation-pill i {
    width: 14px;
    height: 14px;
}

.explanation-heading {
    font-family: var(--font-heading);
    font-size: 19px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 16px 0;
    line-height: 1.3;
}

.explanation-points {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
}

.explanation-point {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.point-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(99, 102, 241, 0.12);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.point-icon i {
    width: 16px;
    height: 16px;
}

.point-text > strong {
    display: block;
    font-size: 15.5px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 3px;
}

.point-text p {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--text-secondary);
    margin: 0;
}

.point-text p strong {
    display: inline;
    font-size: inherit;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.readiness-takeaway-banner {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(59, 130, 246, 0.12) 100%);
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-radius: var(--border-radius-md);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--text-primary);
}

.readiness-takeaway-banner i {
    width: 20px;
    height: 20px;
    color: #10b981;
    flex-shrink: 0;
}

@media (max-width: 860px) {
    .readiness-box-content-grid {
        grid-template-columns: 1fr;
    }
    .landing-readiness-box {
        padding: 24px 18px;
    }
}

/* ── Audience Slider Section ───────────────────────────────────────────── */
.landing-audience-section {
    margin-top: 72px;
}

.audience-slider-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

.audience-slider-container {
    width: 100%;
    margin-bottom: 24px;
}

.audience-slider-track {
    position: relative;
    display: flex;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-xl);
    padding: 4px;
    user-select: none;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
}

.audience-slider-glider {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(25% - 2px);
    background: linear-gradient(135deg, var(--primary) 0%, #2563eb 100%);
    border-radius: calc(var(--border-radius-xl) - 4px);
    z-index: 1;
    pointer-events: none;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.35);
}

.audience-slider-btn {
    flex: 1;
    position: relative;
    z-index: 2;
    padding: 12px 16px;
    font-family: var(--font-heading);
    font-size: 16.5px;
    font-weight: 700;
    text-align: center;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: calc(var(--border-radius-xl) - 4px);
    transition: color var(--transition-fast);
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.audience-slider-btn i {
    width: 17px;
    height: 17px;
}

.audience-slider-btn:hover {
    color: var(--text-primary);
}

.audience-slider-btn:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 1px;
}

.audience-slider-btn.active {
    color: #ffffff !important;
    font-weight: 800;
}

@media (max-width: 600px) {
    .audience-slider-btn {
        padding: 10px 8px;
        font-size: 14.5px;
        gap: 5px;
    }
    .audience-slider-btn i {
        width: 14px;
        height: 14px;
    }
}

/* ── Audience Panels ───────────────────────────────────────────────────── */
.audience-panel {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-xl);
    padding: 32px 30px;
    box-shadow: var(--card-shadow);
    animation: audienceFadeIn 0.25s ease-out;
}

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

.audience-panel-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.audience-panel-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.audience-panel-icon.blue {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.audience-panel-icon.green {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.audience-panel-icon.purple {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.audience-panel-icon.orange {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.audience-panel-icon i {
    width: 26px;
    height: 26px;
}

.audience-panel-title {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 4px 0;
    line-height: 1.25;
}

.audience-panel-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

.audience-benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-top: 24px;
}

.audience-benefit-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-md);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.benefit-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--primary);
}

.benefit-card-header i {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.benefit-card-header h4 {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.3;
}

.audience-benefit-card p {
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}

.audience-benefit-card code {
    font-size: 14px;
    padding: 2px 5px;
    border-radius: 4px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    color: var(--primary);
    font-weight: 700;
}

@media (max-width: 700px) {
    .audience-benefits-grid {
        grid-template-columns: 1fr;
    }
    .audience-panel {
        padding: 24px 18px;
    }
}

/* ── Bottom Call to Action Banner ──────────────────────────────────────── */
.landing-cta-banner {
    margin-top: 64px;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.12) 0%, rgba(37, 99, 235, 0.12) 100%);
    border: 1.5px solid rgba(99, 102, 241, 0.35);
    border-radius: var(--border-radius-xl);
    padding: 48px 24px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.landing-cta-content h2 {
    font-family: var(--font-heading);
    font-size: clamp(24px, 3.5vw, 32px);
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 12px 0;
}

.landing-cta-content p {
    font-size: 17.5px;
    line-height: 1.6;
    color: var(--text-secondary);
    max-width: 560px;
    margin: 0 auto 28px auto;
}

.landing-cta-btn-group {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.landing-cta-btn-group .btn {
    font-size: 17px;
}

.landing-page-wrapper .help-status-pill {
    font-size: 13px;
}

/* ══════════════════════════════════════════════════════════════════════════
   LOGIN POPUP MODAL STYLES
   ══════════════════════════════════════════════════════════════════════════ */
body.modal-open {
    overflow: hidden !important;
}

#login-modal {
    overflow: hidden;
}

.login-modal-card {
    max-width: 480px;
    width: 92%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    border-radius: var(--border-radius-xl);
    background: #111a33;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.05);
    overflow: hidden !important;
}

html[data-theme="light"] .login-modal-card {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(15, 23, 42, 0.06);
}

.login-modal-header {
    flex-shrink: 0;
    padding: 20px 24px 16px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
}

html[data-theme="light"] .login-modal-header {
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.login-modal-body {
    flex: 1 1 auto;
    padding: 20px 24px 22px 24px;
    overflow-y: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE / Edge */
}

.login-modal-body::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Blink */
    width: 0;
    height: 0;
}

.auth-modal-tab-container {
    margin-bottom: 18px;
}

.auth-modal-tab-track {
    position: relative;
    display: flex;
    background-color: #090e1d;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--border-radius-lg);
    padding: 3px;
    user-select: none;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

html[data-theme="light"] .auth-modal-tab-track {
    background-color: #f1f5f9;
    border: 1px solid #cbd5e1;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}

.auth-modal-tab-glider {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc(50% - 3px);
    background: linear-gradient(135deg, var(--primary) 0%, #2563eb 100%);
    border-radius: calc(var(--border-radius-lg) - 3px);
    z-index: 1;
    pointer-events: none;
    transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}

.auth-modal-tab-glider.glider-left {
    transform: translateX(0);
}

.auth-modal-tab-glider.glider-right {
    transform: translateX(100%);
}

.auth-modal-tab-btn {
    flex: 1;
    position: relative;
    z-index: 2;
    padding: 9px 14px;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: calc(var(--border-radius-lg) - 3px);
    transition: color var(--transition-fast);
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.auth-modal-tab-btn i {
    width: 15px;
    height: 15px;
}

.auth-modal-tab-btn:hover {
    color: var(--text-primary);
}

.auth-modal-tab-btn.active {
    color: #ffffff !important;
    font-weight: 800;
}

/* Username & Password Form Inputs - Enhanced Contrast */
.login-modal-card .form-group,
.auth-wrapper .form-group {
    margin-bottom: 16px;
}

.login-modal-card .form-label,
.auth-wrapper .form-label {
    color: #e2e8f0;
    font-size: 13.5px;
    font-weight: 600;
}

html[data-theme="light"] .login-modal-card .form-label,
html[data-theme="light"] .auth-wrapper .form-label {
    color: #1e293b;
    font-weight: 600;
}

.login-modal-card .form-input,
.auth-wrapper .form-input {
    color-scheme: dark;
    background-color: #1a264a !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: #f8fafc !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.login-modal-card .form-input::placeholder,
.auth-wrapper .form-input::placeholder {
    color: #94a3b8;
    opacity: 0.75;
}

.login-modal-card .form-input:focus,
.auth-wrapper .form-input:focus {
    background-color: #1e2c56 !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
}

/* Prevent browser autofill from altering textbox color in dark mode (WebKit / Blink) */
.login-modal-card .form-input:-webkit-autofill,
.login-modal-card .form-input:-webkit-autofill:hover, 
.login-modal-card .form-input:-webkit-autofill:active,
.auth-wrapper .form-input:-webkit-autofill,
.auth-wrapper .form-input:-webkit-autofill:hover,
.auth-wrapper .form-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #1a264a inset !important;
    box-shadow: 0 0 0 1000px #1a264a inset !important;
    -webkit-text-fill-color: #f8fafc !important;
    color: #f8fafc !important;
    caret-color: #f8fafc !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    transition: background-color 5000000s ease-in-out 0s, color 5000000s ease-in-out 0s;
}

.login-modal-card .form-input:-webkit-autofill:focus,
.auth-wrapper .form-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #1e2c56 inset, 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
    box-shadow: 0 0 0 1000px #1e2c56 inset, 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
    -webkit-text-fill-color: #f8fafc !important;
    color: #f8fafc !important;
    caret-color: #f8fafc !important;
    border-color: #3b82f6 !important;
    transition: background-color 5000000s ease-in-out 0s, color 5000000s ease-in-out 0s;
}

/* Prevent browser autofill from altering textbox color in dark mode (W3C Standard :autofill) */
.login-modal-card .form-input:autofill,
.login-modal-card .form-input:autofill:hover, 
.login-modal-card .form-input:autofill:active,
.auth-wrapper .form-input:autofill,
.auth-wrapper .form-input:autofill:hover,
.auth-wrapper .form-input:autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #1a264a inset !important;
    box-shadow: 0 0 0 1000px #1a264a inset !important;
    -webkit-text-fill-color: #f8fafc !important;
    color: #f8fafc !important;
    caret-color: #f8fafc !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    transition: background-color 5000000s ease-in-out 0s, color 5000000s ease-in-out 0s;
}

.login-modal-card .form-input:autofill:focus,
.auth-wrapper .form-input:autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #1e2c56 inset, 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
    box-shadow: 0 0 0 1000px #1e2c56 inset, 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
    -webkit-text-fill-color: #f8fafc !important;
    color: #f8fafc !important;
    caret-color: #f8fafc !important;
    border-color: #3b82f6 !important;
    transition: background-color 5000000s ease-in-out 0s, color 5000000s ease-in-out 0s;
}

/* Prevent browser autofill from altering textbox color in dark mode (Gecko / Firefox) */
.login-modal-card .form-input:-moz-autofill,
.login-modal-card .form-input:-moz-autofill:hover,
.login-modal-card .form-input:-moz-autofill-preview,
.auth-wrapper .form-input:-moz-autofill,
.auth-wrapper .form-input:-moz-autofill:hover,
.auth-wrapper .form-input:-moz-autofill-preview {
    box-shadow: 0 0 0 1000px #1a264a inset !important;
    -moz-text-fill-color: #f8fafc !important;
    color: #f8fafc !important;
    caret-color: #f8fafc !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    filter: none !important;
}

.login-modal-card .form-input:-moz-autofill:focus,
.auth-wrapper .form-input:-moz-autofill:focus {
    box-shadow: 0 0 0 1000px #1e2c56 inset, 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
    -moz-text-fill-color: #f8fafc !important;
    color: #f8fafc !important;
    caret-color: #f8fafc !important;
    border-color: #3b82f6 !important;
    filter: none !important;
}

html[data-theme="light"] .login-modal-card .form-input,
html[data-theme="light"] .auth-wrapper .form-input {
    color-scheme: light;
    background-color: #f8fafc !important;
    border: 1.5px solid #64748b !important;
    color: #0f172a !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .login-modal-card .form-input::placeholder,
html[data-theme="light"] .auth-wrapper .form-input::placeholder {
    color: #64748b;
    opacity: 0.85;
}

html[data-theme="light"] .login-modal-card .form-input:focus,
html[data-theme="light"] .auth-wrapper .form-input:focus {
    background-color: #ffffff !important;
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2), inset 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

/* Light Theme Autofill Overrides */
html[data-theme="light"] .login-modal-card .form-input:-webkit-autofill,
html[data-theme="light"] .login-modal-card .form-input:-webkit-autofill:hover, 
html[data-theme="light"] .auth-wrapper .form-input:-webkit-autofill,
html[data-theme="light"] .auth-wrapper .form-input:-webkit-autofill:hover {
    -webkit-box-shadow: 0 0 0 1000px #f8fafc inset !important;
    box-shadow: 0 0 0 1000px #f8fafc inset !important;
    -webkit-text-fill-color: #0f172a !important;
    color: #0f172a !important;
    caret-color: #0f172a !important;
    border: 1.5px solid #64748b !important;
    transition: background-color 5000000s ease-in-out 0s, color 5000000s ease-in-out 0s;
}

html[data-theme="light"] .login-modal-card .form-input:-webkit-autofill:focus,
html[data-theme="light"] .auth-wrapper .form-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset, 0 0 0 3px rgba(37, 99, 235, 0.2) !important;
    box-shadow: 0 0 0 1000px #ffffff inset, 0 0 0 3px rgba(37, 99, 235, 0.2) !important;
    -webkit-text-fill-color: #0f172a !important;
    color: #0f172a !important;
    caret-color: #0f172a !important;
    border-color: #2563eb !important;
    transition: background-color 5000000s ease-in-out 0s, color 5000000s ease-in-out 0s;
}

html[data-theme="light"] .login-modal-card .form-input:autofill,
html[data-theme="light"] .login-modal-card .form-input:autofill:hover, 
html[data-theme="light"] .auth-wrapper .form-input:autofill,
html[data-theme="light"] .auth-wrapper .form-input:autofill:hover {
    -webkit-box-shadow: 0 0 0 1000px #f8fafc inset !important;
    box-shadow: 0 0 0 1000px #f8fafc inset !important;
    -webkit-text-fill-color: #0f172a !important;
    color: #0f172a !important;
    caret-color: #0f172a !important;
    border: 1.5px solid #64748b !important;
    transition: background-color 5000000s ease-in-out 0s, color 5000000s ease-in-out 0s;
}

html[data-theme="light"] .login-modal-card .form-input:autofill:focus,
html[data-theme="light"] .auth-wrapper .form-input:autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset, 0 0 0 3px rgba(37, 99, 235, 0.2) !important;
    box-shadow: 0 0 0 1000px #ffffff inset, 0 0 0 3px rgba(37, 99, 235, 0.2) !important;
    -webkit-text-fill-color: #0f172a !important;
    color: #0f172a !important;
    caret-color: #0f172a !important;
    border-color: #2563eb !important;
    transition: background-color 5000000s ease-in-out 0s, color 5000000s ease-in-out 0s;
}

html[data-theme="light"] .login-modal-card .form-input:-moz-autofill,
html[data-theme="light"] .login-modal-card .form-input:-moz-autofill:hover,
html[data-theme="light"] .login-modal-card .form-input:-moz-autofill-preview,
html[data-theme="light"] .auth-wrapper .form-input:-moz-autofill,
html[data-theme="light"] .auth-wrapper .form-input:-moz-autofill:hover,
html[data-theme="light"] .auth-wrapper .form-input:-moz-autofill-preview {
    box-shadow: 0 0 0 1000px #f8fafc inset !important;
    -moz-text-fill-color: #0f172a !important;
    color: #0f172a !important;
    caret-color: #0f172a !important;
    border: 1.5px solid #64748b !important;
    filter: none !important;
}

html[data-theme="light"] .login-modal-card .form-input:-moz-autofill:focus,
html[data-theme="light"] .auth-wrapper .form-input:-moz-autofill:focus {
    box-shadow: 0 0 0 1000px #ffffff inset, 0 0 0 3px rgba(37, 99, 235, 0.2) !important;
    -moz-text-fill-color: #0f172a !important;
    color: #0f172a !important;
    caret-color: #0f172a !important;
    border-color: #2563eb !important;
    filter: none !important;
}

.login-modal-card .auth-footer {
    margin-top: 18px;
}

/* ==========================================================================
   HCF Product of Prime Factors: Interactive Boxes & Venn Diagram
   ========================================================================== */

/* Base styling for interactive boxes (Tree SVGs and Venn Diagram container) */
.hcf-interactive-box {
    border: 1.5px solid var(--border) !important;
    background-color: var(--bg-tertiary) !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast) !important;
}

/* Light up borders when answering a question and mouse is inside (or focused within) */
.hcf-answering-mode:hover,
.hcf-answering-mode:focus-within,
.hcf-answering-mode.is-focused,
.hcf-tree-column:hover .hcf-answering-mode {
    border-color: #00d2ff !important;
    box-shadow: 0 0 14px rgba(0, 210, 255, 0.45), inset 0 0 6px rgba(0, 210, 255, 0.08) !important;
}

html[data-theme="light"] .hcf-answering-mode:hover,
html[data-theme="light"] .hcf-answering-mode:focus-within,
html[data-theme="light"] .hcf-answering-mode.is-focused,
html[data-theme="light"] .hcf-tree-column:hover .hcf-answering-mode {
    border-color: #0284c7 !important;
    box-shadow: 0 0 12px rgba(2, 132, 199, 0.35), inset 0 0 4px rgba(2, 132, 199, 0.05) !important;
}

/* Venn Diagram Set Outlines: Transparent fill (no background colour) */
.venn-set-circle {
    fill: none !important;
    fill-opacity: 0 !important;
    stroke: #00d2ff;
    stroke-width: 2.5px !important;
    transition: stroke var(--transition-fast), filter var(--transition-fast);
}

html[data-theme="light"] .venn-set-circle {
    stroke: #0284c7;
    filter: none;
}

/* Set 1: Neon Blue Outline */
.venn-set-1,
.venn-set-circle-1,
.venn-set-circle-left,
.venn-set-blue {
    stroke: #00d2ff !important;
    filter: drop-shadow(0 0 4px rgba(0, 210, 255, 0.45));
}

html[data-theme="light"] .venn-set-1,
html[data-theme="light"] .venn-set-circle-1,
html[data-theme="light"] .venn-set-circle-left,
html[data-theme="light"] .venn-set-blue {
    stroke: #0284c7 !important;
    filter: none;
}

/* Set 2: Neon Green Outline */
.venn-set-2,
.venn-set-circle-2,
.venn-set-circle-right,
.venn-set-green {
    stroke: #10b981 !important;
    filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.45));
}

html[data-theme="light"] .venn-set-2,
html[data-theme="light"] .venn-set-circle-2,
html[data-theme="light"] .venn-set-circle-right,
html[data-theme="light"] .venn-set-green {
    stroke: #059669 !important;
    filter: none;
}

/* Set 3 (Future): Neon Purple Outline */
.venn-set-3,
.venn-set-circle-3,
.venn-set-purple {
    stroke: #a855f7 !important;
    filter: drop-shadow(0 0 4px rgba(168, 85, 247, 0.45));
}

html[data-theme="light"] .venn-set-3,
html[data-theme="light"] .venn-set-circle-3,
html[data-theme="light"] .venn-set-purple {
    stroke: #7c3aed !important;
    filter: none;
}

/* Venn Diagram text entry boxes */
.venn-input {
    width: 100%;
    height: 100%;
    text-align: center;
    border: 1.5px dashed var(--border) !important;
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    outline: none;
    padding: 6px;
    resize: none;
    box-sizing: border-box;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* Focus state for Venn inputs */
.venn-input:focus {
    border-style: solid !important;
    border-color: #00d2ff !important;
    box-shadow: 0 0 8px rgba(0, 210, 255, 0.4) !important;
}

html[data-theme="light"] .venn-input:focus {
    border-color: #0284c7 !important;
    box-shadow: 0 0 6px rgba(2, 132, 199, 0.3) !important;
}

/* ==========================================================================
   Conversion Graphs: High-Contrast Grid Squares & Conversion Line
   ========================================================================== */
.conversion-graph-svg,
.interactive-conversion-graph svg {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
}

/* Minor grid lines (2mm small squares): clear, sharp, high-contrast in both modes */
.conversion-graph-svg .cg-grid-minor,
.conversion-graph-svg line[stroke-width="0.6"],
.conversion-graph-svg line[stroke-width="0.8"],
.interactive-conversion-graph svg line[stroke-width="0.6"],
.interactive-conversion-graph svg line[stroke-width="0.8"],
.worked-example svg line[stroke-width="0.6"],
.worked-example svg line[stroke-width="0.8"],
#help-markdown-container svg line[stroke-width="0.6"],
#help-markdown-container svg line[stroke-width="0.8"],
#examples-markdown-container svg line[stroke-width="0.6"],
#examples-markdown-container svg line[stroke-width="0.8"] {
    stroke: var(--cg-grid-minor) !important;
    stroke-width: 0.8px !important;
    opacity: 1 !important;
}

/* Major grid lines (1cm / 5 squares): prominent division marks in both modes */
.conversion-graph-svg .cg-grid-major,
.conversion-graph-svg line[stroke-width="1.2"],
.conversion-graph-svg line[stroke-width="1.4"],
.interactive-conversion-graph svg line[stroke-width="1.2"],
.interactive-conversion-graph svg line[stroke-width="1.4"],
.worked-example svg line[stroke-width="1.2"],
.worked-example svg line[stroke-width="1.4"],
#help-markdown-container svg line[stroke-width="1.2"],
#help-markdown-container svg line[stroke-width="1.4"],
#examples-markdown-container svg line[stroke-width="1.2"],
#examples-markdown-container svg line[stroke-width="1.4"] {
    stroke: var(--cg-grid-major) !important;
    stroke-width: 1.4px !important;
    opacity: 1 !important;
}

/* Blue conversion line: vibrant in dark mode, deep in light mode */
.conversion-graph-svg .conversion-line,
.interactive-conversion-graph svg .conversion-line {
    stroke: #0284c7;
}

html[data-theme="dark"] .conversion-graph-svg .conversion-line,
html[data-theme="dark"] .interactive-conversion-graph svg .conversion-line {
    stroke: #38bdf8;
}

/* ==========================================================================
   Transformations & Shape Translation Widget
   ========================================================================== */

.transform-shape-widget {
    user-select: none;
    -webkit-user-select: none;
}

.transform-shape-box {
    transition: all var(--transition-fast);
}

.transform-shape-box:hover {
    border-color: var(--color-almost, #f59e0b) !important;
    background-color: var(--bg-tertiary);
}

.transform-mode-btn {
    transition: all var(--transition-fast);
}

.transform-mode-btn.active {
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
    background-color: var(--primary-bg-light, rgba(37, 99, 235, 0.15)) !important;
}

.transform-mode-btn.disabled {
    cursor: not-allowed !important;
}

.transform-undo-btn {
    transition: all var(--transition-fast);
}

.transform-undo-btn:not(:disabled):hover {
    background-color: var(--bg-tertiary);
    border-color: var(--color-almost, #f59e0b);
    color: var(--color-almost, #f59e0b);
}

.transform-add-ray-btn,
.transform-toggle-handle-btn,
.transform-tracing-paper-btn,
.transform-draw-shape-btn,
.transform-add-vector-btn,
.pe-undo-btn {
    background-color: var(--primary, #3b82f6) !important;
    border: 1px solid var(--primary, #3b82f6) !important;
    color: #ffffff !important;
    transition: all var(--transition-fast);
}

.transform-add-ray-btn:hover:not(:disabled),
.transform-toggle-handle-btn:hover:not(:disabled),
.transform-tracing-paper-btn:hover:not(:disabled),
.transform-draw-shape-btn:hover:not(:disabled),
.transform-add-vector-btn:hover:not(:disabled),
.pe-undo-btn:hover:not(:disabled) {
    background-color: var(--primary-hover, #2563eb) !important;
    border-color: var(--primary-hover, #2563eb) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35) !important;
    transform: translateY(-1px);
}

.pe-undo-btn:active:not(:disabled) {
    transform: translateY(0);
}

/* Reflection Arrow Buttons in Transform Shape Widget */
.transform-refl-btn {
    background-color: var(--primary-bg-light) !important;
    border: 1.5px solid var(--primary, #3b82f6) !important;
    color: var(--primary, #3b82f6) !important;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.transform-refl-btn:hover:not(:disabled) {
    background-color: var(--primary-hover, #60a5fa) !important;
    border-color: var(--primary-hover, #60a5fa) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35) !important;
    transform: translateY(-1px);
}

.transform-refl-btn.active,
.transform-refl-btn.btn-primary {
    background-color: var(--primary, #3b82f6) !important;
    border-color: var(--primary, #3b82f6) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    box-shadow: 0 0 14px rgba(59, 130, 246, 0.5) !important;
    transform: translateY(-1px);
}

.transform-refl-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

html[data-theme="light"] .transform-refl-btn {
    background-color: var(--primary-bg-light, rgba(37, 99, 235, 0.08)) !important;
    border-color: var(--primary, #2563eb) !important;
    color: var(--primary, #2563eb) !important;
}

html[data-theme="light"] .transform-refl-btn:hover:not(:disabled) {
    background-color: var(--primary, #2563eb) !important;
    border-color: var(--primary, #2563eb) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35) !important;
}

html[data-theme="light"] .transform-refl-btn.active,
html[data-theme="light"] .transform-refl-btn.btn-primary {
    background-color: var(--primary, #2563eb) !important;
    border-color: var(--primary, #2563eb) !important;
    color: #ffffff !important;
    box-shadow: 0 0 14px rgba(37, 99, 235, 0.45) !important;
}

/* Interactive Venn diagram shading */
.venn-shade-region {
    cursor: pointer;
    transition: fill 0.15s ease, opacity 0.15s ease;
}

.venn-shade-region:hover {
    filter: brightness(1.15);
}

.venn-shade-region[data-shaded="true"]:not([data-checked="true"]) {
    fill: var(--venn-shade-fill, rgba(59, 130, 246, 0.45)) !important;
}

.venn-shade-region[data-shaded="true"]:not([data-checked="true"]):hover {
    fill: var(--venn-shade-hover, rgba(59, 130, 246, 0.6)) !important;
}

.venn-shade-region[data-shaded="false"]:not([data-checked="true"]) {
    fill: transparent !important;
}

.venn-shade-region[data-shaded="false"]:not([data-checked="true"]):hover {
    fill: var(--venn-shade-unshaded-hover, rgba(59, 130, 246, 0.2)) !important;
}

/* Checked marking state styles */
.venn-shade-region[data-checked="true"][data-mark="correct"] {
    fill: rgba(16, 185, 129, 0.55) !important;
}

.venn-shade-region[data-checked="true"][data-mark="incorrect"] {
    fill: rgba(239, 68, 68, 0.55) !important;
}

.venn-shade-region[data-checked="true"][data-mark="missed"] {
    fill: rgba(16, 185, 129, 0.25) !important;
}

.venn-shade-region[data-checked="true"][data-mark="empty"] {
    fill: transparent !important;
}

/* Static (non-interactive) completed Venn diagram shading */
.venn-shade-region-static[data-shaded="true"] {
    fill: var(--venn-shade-fill, rgba(59, 130, 246, 0.45)) !important;
}

.venn-shade-region-static[data-shaded="false"] {
    fill: transparent !important;
}

/* Topic Draft Badges */
.topic-draft-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 1px 7px;
    border-radius: 4px;
    background-color: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.35);
    line-height: 1.4;
    vertical-align: middle;
    user-select: none;
    margin-left: 6px;
}

[data-theme="light"] .topic-draft-badge {
    background-color: rgba(217, 119, 6, 0.12);
    color: #b45309;
    border: 1px solid rgba(217, 119, 6, 0.35);
}

.topic-draft-badge-lg {
    font-size: 11px;
    padding: 2px 9px;
    border-radius: 5px;
    margin-left: 10px;
}

/* Grid Method Double Brackets Table & Math-Fields Centering and Fixed Sizing */
.grid-method-double-brackets-table {
    table-layout: fixed !important;
    width: 375px !important;
    max-width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.grid-method-double-brackets-table th,
.grid-method-double-brackets-table td {
    overflow: hidden !important;
    text-align: center !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}

.grid-method-double-brackets-table .grid-square-cell {
    cursor: pointer !important;
    user-select: none;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.grid-method-double-brackets-table .grid-square-cell:has(math-field:focus),
.grid-method-double-brackets-table .grid-square-cell:focus-within,
.grid-method-double-brackets-table .grid-square-cell.selected-cell {
    background-color: rgba(59, 130, 246, 0.2) !important;
}

.grid-method-double-brackets-table math-field {
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 2px 4px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
}

.grid-method-double-brackets-table math-field:focus,
.grid-method-double-brackets-table math-field:focus-within,
.grid-method-double-brackets-table .grid-square-cell.selected-cell math-field {
    border-color: var(--primary, #3b82f6) !important;
    box-shadow: 0 0 0 2.5px rgba(59, 130, 246, 0.4) !important;
    background-color: var(--bg-primary, #ffffff) !important;
}

/* Horizontal centring of the formula is applied by injecting a stylesheet into
   each math-field's shadow root (see centreGridMathField in gridMethodDoubleBrackets.js). */
.grid-method-double-brackets-table math-field::part(container) {
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.grid-method-double-brackets-table math-field::part(virtual-keyboard-toggle),
.grid-method-double-brackets-table math-field::part(menu-toggle) {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.grid-double-bracket-final-input {
    text-align: center !important;
    padding: 4px 12px !important;
    box-sizing: border-box !important;
}

.grid-double-bracket-final-input::part(virtual-keyboard-toggle),
.grid-double-bracket-final-input::part(menu-toggle) {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Interactive Vector Grid Drawing Handles: amber and hover-only */
.vg-draggable-vector .vg-handles-group {
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.vg-draggable-vector:hover .vg-handles-group,
.vg-draggable-vector.is-dragging .vg-handles-group {
    opacity: 1;
    pointer-events: auto;
}

/* ==========================================================================
   Question Prompt Annotator & Pen Tool
   ========================================================================== */

/* Prompt container adjustments to host overlay canvas */
.question-prompt,
.now-you-try-question-prompt {
    position: relative;
    min-height: 48px;
}

.question-prompt.drawing-active,
.now-you-try-question-prompt.drawing-active {
    user-select: none;
    -webkit-user-select: none;
}

/* Question Prompt Actions Column (Show Example + Pen Tool) */
.question-prompt-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
    margin-top: 4px;
}

/* Prompt Annotation Canvas */
.prompt-annotation-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
    touch-action: none;
}

.prompt-annotation-canvas.active {
    pointer-events: auto;
}

/* Pen Button Wrapper & Split Group */
.prompt-pen-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    z-index: 15;
}

.prompt-pen-btn-group {
    display: inline-flex;
    align-items: stretch;
    border-radius: 20px;
    background: var(--bg-secondary);
    border: 1.5px solid var(--border);
    transition: all var(--transition-fast) ease-in-out;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.prompt-pen-btn-group:hover {
    border-color: var(--text-secondary);
}

.btn-prompt-pen {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 10px 6px 14px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    cursor: pointer;
    transition: all var(--transition-fast) ease-in-out;
}

.pen-btn-icon {
    flex-shrink: 0;
}

.pen-btn-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
    margin-left: 2px;
    flex-shrink: 0;
}

.btn-prompt-pen-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-left: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 6px 10px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    cursor: pointer;
    transition: all var(--transition-fast) ease-in-out;
}

.btn-prompt-pen-arrow:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-primary);
}

/* Active State: Button goes vibrant GREEN */
.prompt-pen-btn-group.active {
    background: var(--color-ready, #10b981) !important;
    border-color: #059669 !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.35);
}

.prompt-pen-btn-group.active:hover {
    background: #059669 !important;
    border-color: #047857 !important;
}

.prompt-pen-btn-group.active .btn-prompt-pen,
.prompt-pen-btn-group.active .btn-prompt-pen-arrow {
    color: #ffffff !important;
}

.prompt-pen-btn-group.active .btn-prompt-pen-arrow {
    border-left-color: rgba(255, 255, 255, 0.35);
}

.prompt-pen-btn-group.active .btn-prompt-pen-arrow:hover {
    background: rgba(0, 0, 0, 0.12);
}

/* Question Card Bottom Bar (Pen on Left, Check Answer on Right) */
.question-card-bottom-bar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    gap: 12px;
    margin-top: 16px;
}

.test-question-bottom-bar {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    width: 100%;
    margin-top: 16px;
}

.now-you-try-bottom-bar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    margin-top: 12px;
    margin-bottom: 8px;
    gap: 12px;
}

.question-bottom-left-actions {
    display: flex;
    align-items: flex-end;
    flex-shrink: 0;
}

/* Dropdown Colour Menu */
.prompt-pen-dropdown-menu {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    right: auto;
    min-width: 175px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-md, 8px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.35), 0 8px 10px -6px rgba(0, 0, 0, 0.25);
    padding: 8px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.prompt-pen-menu-header {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    padding: 4px 6px 2px;
}

.prompt-pen-colors-grid {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.prompt-pen-color-choice {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 5px 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--border-radius-sm, 6px);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: all var(--transition-fast) ease-in-out;
}

.prompt-pen-color-choice:hover {
    background-color: rgba(59, 130, 246, 0.12);
    color: var(--primary);
}

.prompt-pen-color-choice.selected {
    background-color: rgba(59, 130, 246, 0.16);
    border-color: rgba(59, 130, 246, 0.4);
}

.prompt-pen-color-choice .color-circle {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.prompt-pen-menu-divider {
    height: 1px;
    background-color: var(--border);
    margin: 4px 0;
}

.prompt-pen-undo-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    background: transparent;
    border: none;
    border-radius: var(--border-radius-sm, 6px);
    color: var(--text-primary);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast) ease-in-out;
}

.prompt-pen-undo-btn:hover:not(:disabled) {
    background-color: rgba(59, 130, 246, 0.12);
    color: var(--primary);
}

.prompt-pen-undo-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.prompt-pen-clear-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    background: transparent;
    border: none;
    border-radius: var(--border-radius-sm, 6px);
    color: var(--color-needs, #ef4444);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast) ease-in-out;
}

.prompt-pen-clear-btn:hover {
    background-color: rgba(239, 68, 68, 0.12);
}

/* ── Simultaneous Equations Column Elimination Display & Grid ──── */
.simultaneous-column-display {
    font-family: var(--font-mono, monospace), 'Courier New', Courier, monospace;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    background-color: var(--bg-tertiary, #1f2937);
    border: 1px solid var(--border, #374151);
    border-radius: var(--border-radius-sm, 6px);
    padding: 10px 18px;
    margin: 8px 0;
    color: var(--text-primary, #ffffff);
    overflow-x: auto;
    white-space: pre;
    display: inline-block;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.simultaneous-column-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 14px 0;
    width: 100%;
    box-sizing: border-box;
    user-select: none;
}

.simultaneous-column-top-bar {
    width: 390px;
    max-width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 6px;
    box-sizing: border-box;
}

.simultaneous-column-grid {
    display: inline-grid;
    margin: 0 auto;
    grid-template-columns: minmax(38px, 46px) minmax(48px, 72px) minmax(32px, 40px) minmax(48px, 72px) 26px minmax(48px, 72px);
    gap: 5px;
    align-items: center;
    justify-items: center;
    background-color: var(--bg-tertiary, #1f2937);
    border: 2px solid var(--border, #374151);
    border-radius: var(--border-radius-md, 10px);
    padding: 14px 18px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    max-width: 100%;
    box-sizing: border-box;
}

.sim-col-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 40px;
    width: 100%;
}

.sim-col-cell.sim-op-cell {
    font-size: 20px;
    font-weight: 800;
    text-align: center;
    justify-content: center;
}

.sim-col-cell.sim-equals-cell {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary, #ffffff);
    user-select: none;
    text-align: center;
    justify-content: center;
}

.sim-col-input {
    width: 100%;
    min-height: 38px;
    border-radius: var(--border-radius-sm, 6px);
    border: 1.5px solid var(--border, #4b5563);
    background-color: var(--bg-primary, #111827);
    color: var(--text-primary, #ffffff);
    font-size: 17px;
    font-weight: 700;
    text-align: center;
    padding: 0 4px;
    box-sizing: border-box;
    transition: border-color var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
}

math-field.sim-col-input {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

math-field.sim-col-input::part(container) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    text-align: center !important;
}

math-field.sim-col-input::part(content) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 auto !important;
}

math-field.sim-col-input::part(virtual-keyboard-toggle),
math-field.sim-col-input::part(menu-toggle) {
    display: none !important;
}

.sim-col-input:focus,
.sim-col-input:focus-within {
    border-color: var(--primary, #3b82f6);
    box-shadow: 0 0 0 2px var(--primary-bg-light, rgba(59, 130, 246, 0.25));
}

.sim-col-input.sim-op-input {
    font-weight: 800;
    font-size: 19px;
    color: var(--color-ready, #10b981);
}

.sim-col-input[readonly],
.sim-col-input[disabled] {
    background-color: transparent;
    border-color: transparent;
    color: var(--text-primary, #ffffff);
    font-weight: 800;
    pointer-events: none;
    text-align: center !important;
}

.simultaneous-column-line {
    grid-column: 1 / -1;
    height: 3px;
    background-color: var(--text-primary, #ffffff);
    margin: 4px 0;
    border-radius: 2px;
}

/* Mini elimination tool for worked examples (20% smaller = 0.8x) */
.simultaneous-column-container.mini-elimination-tool {
    margin: 8px 0;
    width: auto;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.mini-elimination-tool .simultaneous-column-grid {
    grid-template-columns: 37px 54px 32px 54px 21px 58px;
    gap: 4px;
    padding: 10px 14px;
    border-radius: 8px;
    border-width: 1.5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.mini-elimination-tool .sim-col-cell {
    min-height: 32px;
}

.mini-elimination-tool .sim-col-input {
    min-height: 30px;
    height: 30px;
    font-size: 13.5px;
    font-weight: 700;
    padding: 0 2px;
    border-radius: 5px;
    border: 1.5px solid var(--border, #4b5563) !important;
    background-color: var(--bg-primary, #111827) !important;
    color: var(--text-primary, #ffffff) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
}

.mini-elimination-tool .sim-col-cell.sim-op-cell {
    font-size: 16px;
    font-weight: 800;
}

.mini-elimination-tool .sim-col-input.sim-op-input {
    font-size: 15px;
    font-weight: 800;
    color: var(--color-ready, #10b981) !important;
}

.mini-elimination-tool .sim-col-cell.sim-equals-cell {
    font-size: 17px;
    font-weight: 800;
    color: var(--text-primary, #ffffff);
}

.mini-elimination-tool .simultaneous-column-line {
    height: 2px;
    margin: 3px 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE TITLEBAR & COMPRESSED QUICK ACTIONS
   ══════════════════════════════════════════════════════════════════════════ */
.app-header {
    width: 100%;
    box-sizing: border-box;
}

.header-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
    transition: padding var(--transition-fast) ease;
}

/* Narrower screens (where buttons plus a little extra will overlap) */
@media (max-width: 840px) {
    .header-container {
        padding: 0 16px;
    }

    /* Left-hand options like course switcher and standalone nav hide because they are in the logo chevron dropdown */
    .logo-group #course-switcher-wrapper {
        display: none !important;
    }
    #app-nav {
        display: none !important;
    }

    /* The three top-right buttons compress into ONE button with 3 sections */
    .header-btn-cluster {
        display: inline-flex !important;
        align-items: stretch !important;
        height: 34px !important;
        background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%) !important;
        border: 2px solid rgba(255, 255, 255, 0.25) !important;
        border-radius: 20px !important;
        box-shadow: 0 0 12px rgba(99, 102, 241, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2) !important;
        padding: 0 !important;
        gap: 0 !important;
        overflow: visible !important;
        position: relative !important;
    }

    /* Section wrappers inside the compressed button */
    .header-btn-cluster > *:not([style*="display: none"]) {
        display: inline-flex !important;
        align-items: stretch !important;
        position: relative !important;
    }

    /* Subtle vertical divider between the 3 sections */
    .header-btn-cluster > *:not([style*="display: none"]):not(:last-child) {
        border-right: 1px solid rgba(255, 255, 255, 0.25) !important;
    }

    /* Remove standalone styling from individual buttons so they form sections */
    .header-btn-cluster .cluster-section {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        height: 100% !important;
        padding: 0 11px !important;
        gap: 0 !important;
        color: #ffffff !important;
        transform: none !important;
    }

    /* Hover and focus highlights for each section */
    .header-btn-cluster .cluster-section:hover,
    .header-btn-cluster .cluster-section:focus-visible,
    .header-btn-cluster .cluster-section.active,
    .header-btn-cluster > *:hover .cluster-section {
        background: rgba(255, 255, 255, 0.18) !important;
    }

    /* Rounded outer ends of the single compressed button */
    .header-btn-cluster > *:not([style*="display: none"]):first-child .cluster-section {
        border-top-left-radius: 18px !important;
        border-bottom-left-radius: 18px !important;
    }
    .header-btn-cluster > *:not([style*="display: none"]):last-child .cluster-section {
        border-top-right-radius: 18px !important;
        border-bottom-right-radius: 18px !important;
    }

    /* Hide individual chevrons in compressed mode */
    .header-btn-cluster .help-chevron,
    .header-btn-cluster .user-chevron,
    .header-btn-cluster .beta-chevron {
        display: none !important;
    }

    /* Hide sign-in text so icon represents section 2 */
    .header-btn-cluster .signin-btn-text {
        display: none !important;
    }

    .header-btn-cluster .beta-btn-text {
        font-size: 11px !important;
        letter-spacing: 0.05em !important;
        padding: 0 !important;
    }

    .header-btn-cluster .help-btn-symbol {
        font-size: 15px !important;
        font-weight: 800 !important;
    }

    .header-btn-cluster .user-btn-icon,
    .header-btn-cluster .signin-btn-icon {
        width: 16px !important;
        height: 16px !important;
    }
}

@media (max-width: 480px) {
    .header-container {
        padding: 0 10px;
    }
    .logo-text {
        font-size: 16px;
    }
    .logo-3000 {
        font-size: 10.5px;
        height: 18px;
        padding: 1px 5px;
    }
    .header-btn-cluster .cluster-section {
        padding: 0 9px !important;
    }
}

/* ==========================================================================
   Practice Mode Locked State (after Check Answer is clicked)
   ========================================================================== */
.question-card.practice-question-locked #question-form {
    pointer-events: none;
}

.question-card.practice-question-locked #practice-buttons-container {
    pointer-events: auto;
}

.question-card.practice-question-locked #practice-feedback {
    pointer-events: auto;
}

.question-card.practice-question-locked #btn-show-example {
    pointer-events: none !important;
    opacity: 0.45 !important;
    cursor: not-allowed !important;
}

.question-card.practice-question-locked .prompt-pen-wrapper {
    pointer-events: none !important;
    opacity: 0.45 !important;
    cursor: not-allowed !important;
}

.question-card.practice-question-locked .prompt-annotation-canvas {
    pointer-events: none !important;
}

.question-card.practice-question-locked #hint-content {
    pointer-events: none !important;
    opacity: 0.6 !important;
}

.question-card.practice-question-locked .question-prompt svg,
.question-card.practice-question-locked .question-prompt canvas,
.question-card.practice-question-locked .question-prompt .jxgbox,
.question-card.practice-question-locked .question-prompt .chart-diagram,
.question-card.practice-question-locked .question-chart-container svg,
.question-card.practice-question-locked .question-chart-container canvas,
.question-card.practice-question-locked .question-chart-container .jxgbox,
.question-card.practice-question-locked .question-chart-container .chart-diagram,
.question-card.practice-question-locked .workings-segmented-control {
    pointer-events: none !important;
}

.question-card.practice-question-locked math-field,
.question-card.practice-question-locked .input-answer,
.question-card.practice-question-locked .user-workings-step-input {
    cursor: default !important;
}

/* Multi-line auto-expanding text answer boxes */
textarea.word-answer-input,
textarea.input-answer,
textarea.input-answer-sm {
    resize: none;
    overflow-y: hidden;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: break-word;
    field-sizing: content;
    box-sizing: border-box;
    line-height: 1.4;
    width: 100%;
}

.word-answer-display,
.input-answer-sm.word-answer-display,
.input-answer.word-answer-display {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: break-word;
    line-height: 1.4;
    box-sizing: border-box;
    width: 100%;
}