/* /Components/AppFooter.razor.rz.scp.css */
.app-footer[b-efnitq6wj3] {
    width: 100%;
    border-top: 1px solid var(--ig-border, #e2e8f0);
    background-color: var(--ig-surface, #ffffff);
    color: var(--ig-text, #0f172a);
    font-size: 0.875rem;
    box-sizing: border-box;
    position: relative;
    z-index: 10;
}

.footer-container[b-efnitq6wj3] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px clamp(16px, 4vw, 40px) 24px;
    box-sizing: border-box;
}

.footer-main[b-efnitq6wj3] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 36px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

/* ── BRAND SECTION ── */
.footer-brand[b-efnitq6wj3] {
    max-width: 440px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-brand-header[b-efnitq6wj3] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-brand-icon[b-efnitq6wj3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
    color: #ffffff;
    font-size: 1rem;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
}

.footer-brand-title[b-efnitq6wj3] {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ig-text, #0f172a);
}

.footer-badge[b-efnitq6wj3] {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.1);
    color: var(--ig-primary, #2563eb);
    border: 1px solid rgba(37, 99, 235, 0.2);
}

.footer-desc[b-efnitq6wj3] {
    margin: 0;
    color: var(--ig-text-secondary, #475569);
    font-size: 0.88rem;
    line-height: 1.6;
}

/* ── LINKS GRID ── */
.footer-links-grid[b-efnitq6wj3] {
    display: flex;
    gap: 48px;
    flex-wrap: wrap;
}

.footer-col[b-efnitq6wj3] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-col-title[b-efnitq6wj3] {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ig-text, #0f172a);
    margin-bottom: 2px;
}

.footer-item-link[b-efnitq6wj3] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--ig-text-secondary, #475569);
    text-decoration: none !important;
    font-size: 0.86rem;
    font-weight: 500;
    transition: color 0.15s ease, transform 0.15s ease;
}

.footer-item-link i[b-efnitq6wj3] {
    font-size: 0.85rem;
    color: var(--ig-text-secondary, #64748b);
    transition: color 0.15s ease;
}

.footer-item-link:hover[b-efnitq6wj3] {
    color: var(--ig-primary, #2563eb);
    transform: translateX(2px);
}

.footer-item-link:hover i[b-efnitq6wj3] {
    color: var(--ig-primary, #2563eb);
}

/* ── BOTTOM BAR ── */
.footer-bottom-bar[b-efnitq6wj3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px solid var(--ig-border, #e2e8f0);
}

.footer-copy[b-efnitq6wj3] {
    color: var(--ig-text-secondary, #64748b);
    font-size: 0.82rem;
}

.footer-copy-brand[b-efnitq6wj3] {
    font-weight: 700;
    color: var(--ig-text, #0f172a);
}

.footer-cert-tags[b-efnitq6wj3] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.footer-tag[b-efnitq6wj3] {
    display: inline-flex;
    align-items: center;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ig-text-secondary, #475569);
    gap: 4px;
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
    .footer-main[b-efnitq6wj3] {
        flex-direction: column;
        gap: 24px;
    }
    .footer-links-grid[b-efnitq6wj3] {
        gap: 32px;
        width: 100%;
        justify-content: space-between;
    }
    .footer-bottom-bar[b-efnitq6wj3] {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* ── DARK THEME ── */
[data-theme="dark"] .app-footer[b-efnitq6wj3] {
    background-color: #090d16;
    border-top-color: #1e293b;
}

[data-theme="dark"] .footer-badge[b-efnitq6wj3] {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
    color: #60a5fa;
}

[data-theme="dark"] .footer-bottom-bar[b-efnitq6wj3] {
    border-top-color: #1e293b;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .app-footer[b-efnitq6wj3] {
        background-color: #090d16;
        border-top-color: #1e293b;
    }
    :root:not([data-theme="light"]) .footer-badge[b-efnitq6wj3] {
        background: rgba(59, 130, 246, 0.15);
        border-color: rgba(59, 130, 246, 0.3);
        color: #60a5fa;
    }
    :root:not([data-theme="light"]) .footer-bottom-bar[b-efnitq6wj3] {
        border-top-color: #1e293b;
    }
}
/* /Components/AuthModal.razor.rz.scp.css */
/* ========================================================================= */
/* LIGHT, LUXURIOUS AUTH MODAL (MATCHING HOME PAGE BRANDING)                */
/* ========================================================================= */
.modal-backdrop[b-hvae7anmx0] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050;
    animation: fadeIn-b-hvae7anmx0 0.25s ease-out;
    padding: 20px;
    box-sizing: border-box;
}

.modal-content[b-hvae7anmx0] {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 2.5rem;
    width: 100%;
    max-width: 440px;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.15), 0 0 0 1px rgba(226, 232, 240, 0.8);
    color: #1e293b;
    animation: slideUp-b-hvae7anmx0 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

.btn-close[b-hvae7anmx0] {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #f1f5f9;
    border: none;
    color: #64748b;
    font-size: 1rem;
    cursor: pointer;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-close:hover[b-hvae7anmx0] {
    background: #e2e8f0;
    color: #0f172a;
    transform: rotate(90deg);
}

.modal-header[b-hvae7anmx0] {
    text-align: center;
    margin-bottom: 1.8rem;
}

.modal-header h2[b-hvae7anmx0] {
    font-size: 1.75rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 0.4rem;
    letter-spacing: -0.02em;
}

.modal-header p[b-hvae7anmx0] {
    color: #64748b;
    font-size: 0.92rem;
    margin: 0;
}

.form-group[b-hvae7anmx0] {
    margin-bottom: 1.2rem;
}

.form-group label[b-hvae7anmx0] {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #334155;
}

[b-hvae7anmx0] .form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    border: 1.5px solid #cbd5e1;
    background-color: #f8fafc;
    color: #0f172a;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

[b-hvae7anmx0] .form-control:focus {
    outline: none;
    background-color: #ffffff;
    border-color: #0284c7;
    box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.15);
}

[b-hvae7anmx0] .form-control::placeholder {
    color: #94a3b8;
}

.btn-primary[b-hvae7anmx0] {
    width: 100%;
    padding: 0.85rem;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    margin-top: 1rem;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);
}

.btn-primary:hover:not(:disabled)[b-hvae7anmx0] {
    background: linear-gradient(135deg, #0369a1 0%, #075985 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(2, 132, 199, 0.4);
}

.btn-primary:active:not(:disabled)[b-hvae7anmx0] {
    transform: translateY(0);
}

.btn-primary:disabled[b-hvae7anmx0] {
    background: #cbd5e1;
    color: #64748b;
    box-shadow: none;
    cursor: not-allowed;
}

.modal-footer[b-hvae7anmx0] {
    text-align: center;
    margin-top: 1.4rem;
    font-size: 0.88rem;
    color: #64748b;
}

.modal-footer a[b-hvae7anmx0] {
    color: #0284c7;
    text-decoration: none;
    font-weight: 700;
    transition: color 0.2s;
}

.modal-footer a:hover[b-hvae7anmx0] {
    color: #0369a1;
    text-decoration: underline;
}

.alert-error[b-hvae7anmx0] {
    background-color: #fef2f2;
    border-left: 4px solid #ef4444;
    color: #991b1b;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 500;
    margin-bottom: 1.2rem;
    border: 1px solid #fecaca;
    border-left-width: 4px;
}

.alert-success[b-hvae7anmx0] {
    background-color: #f0fdf4;
    border-left: 4px solid #22c55e;
    color: #166534;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 500;
    margin-bottom: 1.2rem;
    border: 1px solid #bbf7d0;
    border-left-width: 4px;
}

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

@keyframes slideUp-b-hvae7anmx0 {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.divider[b-hvae7anmx0] {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 1.4rem 0 1.2rem;
    color: #94a3b8;
}

.divider[b-hvae7anmx0]::before,
.divider[b-hvae7anmx0]::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #e2e8f0;
}

.divider span[b-hvae7anmx0] {
    padding: 0 12px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.05em;
}

.google-auth-container[b-hvae7anmx0] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.google-auth-container > div[b-hvae7anmx0] {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* ══════════════════════════════════════════════════════════════ */
/* CHẾ ĐỘ TỐI (DARK MODE) CHO AUTH MODAL                         */
/* ══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .modal-content[b-hvae7anmx0] {
    background-color: #0f172a;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08);
    color: #f8fafc;
}

[data-theme="dark"] .btn-close[b-hvae7anmx0] {
    background: #1e293b;
    color: #94a3b8;
}

[data-theme="dark"] .btn-close:hover[b-hvae7anmx0] {
    background: #334155;
    color: #f8fafc;
}

[data-theme="dark"] .modal-header h2[b-hvae7anmx0] {
    color: #f8fafc;
}

[data-theme="dark"] .modal-header p[b-hvae7anmx0] {
    color: #94a3b8;
}

[data-theme="dark"] .form-group label[b-hvae7anmx0] {
    color: #cbd5e1;
}

[data-theme="dark"][b-hvae7anmx0]  .form-control {
    background-color: #1e293b;
    border-color: #334155;
    color: #f8fafc;
}

[data-theme="dark"][b-hvae7anmx0]  .form-control:focus {
    background-color: #1e293b;
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}

[data-theme="dark"] .auth-footer p[b-hvae7anmx0] {
    color: #94a3b8;
}

[data-theme="dark"] .divider[b-hvae7anmx0]::before,
[data-theme="dark"] .divider[b-hvae7anmx0]::after {
    border-bottom-color: #334155;
}

[data-theme="dark"] .divider span[b-hvae7anmx0] {
    color: #64748b;
}

[data-theme="dark"] .alert-error[b-hvae7anmx0] {
    background-color: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

[data-theme="dark"] .alert-success[b-hvae7anmx0] {
    background-color: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.3);
    color: #86efac;
}

/* ══════════════════════════════════════════════════════════════ */
/* TURNSTILE CAPTCHA WRAPPER & VALIDATION STYLING                */
/* ══════════════════════════════════════════════════════════════ */
.turnstile-wrapper[b-hvae7anmx0] {
    margin: 14px 0 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 65px;
}

[b-hvae7anmx0] .form-control.invalid {
    border-color: #ef4444 !important;
    background-color: #fef2f2 !important;
}

[data-theme="dark"][b-hvae7anmx0]  .form-control.invalid {
    border-color: #ef4444 !important;
    background-color: rgba(239, 68, 68, 0.1) !important;
}

[b-hvae7anmx0] .validation-message {
    color: #ef4444;
    font-size: 0.8rem;
    margin-top: 5px;
    display: block;
    font-weight: 500;
}

/* /Components/BrandLogo.razor.rz.scp.css */
/* ================================================
   BRAND LOGO - Nguồn duy nhất cho style logo
   Dùng: <BrandLogo /> hoặc <BrandLogo Theme="white" />
   File ảnh: wwwroot/images/ieltsHSK-logo.png
   ================================================ */

.brand-logo[b-3qanxwi5ai] {
    display: inline-flex;
    align-items: center;
    text-decoration: none !important;
    transition: opacity 0.2s ease;
}

.brand-logo:hover[b-3qanxwi5ai] {
    opacity: 0.8;
    text-decoration: none !important;
}

.brand-logo__img[b-3qanxwi5ai] {
    height: 36px;
    width: auto;
    display: block;
}

/* Theme: dark — dành cho nền sáng (trang chủ, IELTS dashboard) */
/* Ảnh hiển thị màu gốc, không cần filter */
.brand-logo--dark .brand-logo__img[b-3qanxwi5ai] {
    filter: none;
}

/* Theme: white — dành cho nền tối/đỏ (HSK sidebar) */
/* invert(1): đảo màu → nền trắng thành đen, chữ tối thành trắng */
/* screen: phần đen trở thành trong suốt → chỉ còn chữ trắng */
.brand-logo--white .brand-logo__img[b-3qanxwi5ai] {
    filter: invert(1);
    mix-blend-mode: screen;
}

/* Trong chế độ Tối (Dark Mode), logo dark tự động đảo màu sang chữ trắng để hiển thị rõ */
[data-theme="dark"] .brand-logo--dark .brand-logo__img[b-3qanxwi5ai] {
    filter: invert(1);
    mix-blend-mode: screen;
}
/* /Components/DropletScrollbar.razor.rz.scp.css */
/* Container của thanh cuộn giọt nước */
.drop-scroll[b-moc8kbrlrw] {
    position: fixed;
    top: 72px;
    right: 14px;
    bottom: 20px;
    width: 36px;
    z-index: 995;
    opacity: 0.78;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    touch-action: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: auto;
}

.drop-scroll:hover[b-moc8kbrlrw] {
    opacity: 1;
}

.drop-scroll.is-dragging[b-moc8kbrlrw],
.drop-scroll:active[b-moc8kbrlrw] {
    cursor: grabbing;
    opacity: 1;
}

/* ══════════════════════════════════════════════════════════════ */
/* RÃNH TRƯỢT THỦY TINH HIỆN ĐẠI (ULTRA-SLEEK FROSTED GLASS RAIL) */
/* Loại bỏ toàn bộ các dấu chấm dày đặc, thay bằng rãnh nano mờ   */
/* ══════════════════════════════════════════════════════════════ */

.drop-scroll__track[b-moc8kbrlrw] {
    position: absolute;
    left: 50%;
    top: 8px;
    bottom: 8px;
    width: 4px;
    transform: translateX(-50%);
    background: var(--drop-rail-bg);
    border: 1px solid var(--drop-rail-border);
    border-radius: 9999px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: var(--drop-rail-shadow);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Đầu chặn tinh tế 2 cực (Milestone endpoints) */
.drop-scroll__track[b-moc8kbrlrw]::before,
.drop-scroll__track[b-moc8kbrlrw]::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    transform: translateX(-50%);
    background: var(--drop-rail-dot);
    box-shadow: 0 0 6px var(--drop-rail-glow);
    opacity: 0.7;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.drop-scroll__track[b-moc8kbrlrw]::before {
    top: -3px;
}

.drop-scroll__track[b-moc8kbrlrw]::after {
    bottom: -3px;
}

.drop-scroll:hover .drop-scroll__track[b-moc8kbrlrw],
.drop-scroll.is-dragging .drop-scroll__track[b-moc8kbrlrw] {
    width: 5px;
    background: var(--drop-rail-bg-hover);
    border-color: var(--drop-rail-border-hover);
    box-shadow: 0 0 14px var(--drop-rail-glow);
}

.drop-scroll:hover .drop-scroll__track[b-moc8kbrlrw]::before,
.drop-scroll:hover .drop-scroll__track[b-moc8kbrlrw]::after,
.drop-scroll.is-dragging .drop-scroll__track[b-moc8kbrlrw]::before,
.drop-scroll.is-dragging .drop-scroll__track[b-moc8kbrlrw]::after {
    opacity: 1;
    transform: translateX(-50%) scale(1.2);
}

/* ══════════════════════════════════════════════════════════════ */
/* GIỌT NƯỚC THỦY TINH TRONG SUỐT XUYÊN THẤU (GLASSMORPHIC THUMB) */
/* ══════════════════════════════════════════════════════════════ */

.drop-scroll__drop[b-moc8kbrlrw] {
    position: absolute;
    left: 50%;
    top: 0;
    width: 40px;
    height: 88px;
    margin-left: -20px;
    margin-top: -44px;
    transform-origin: 50% 50%;
    will-change: transform;
    pointer-events: auto;
    filter: drop-shadow(0 4px 12px var(--drop-glow-ambient)) drop-shadow(0 1px 3px rgba(15, 23, 42, 0.2));
    transition: filter 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.drop-scroll.is-dragging .drop-scroll__drop[b-moc8kbrlrw],
.drop-scroll:active .drop-scroll__drop[b-moc8kbrlrw] {
    filter: drop-shadow(0 0 20px var(--drop-glow-active)) drop-shadow(0 6px 14px rgba(15, 23, 42, 0.35));
}

.drop-path[b-moc8kbrlrw] {
    fill: url(#dropFillLight);
    stroke: url(#dropRimGrad);
    stroke-width: 1px;
    stroke-opacity: 0.85;
}

.drop-caustic[b-moc8kbrlrw] {
    pointer-events: none;
}

.drop-specular[b-moc8kbrlrw] {
    pointer-events: none;
    transition: transform 0.05s ease-out;
}

.drop-bottom-glint[b-moc8kbrlrw] {
    opacity: 0.45;
    pointer-events: none;
    transition: transform 0.05s ease-out;
}

.drop-core-glow[b-moc8kbrlrw] {
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════ */
/* CHẾ ĐỘ SÁNG (LIGHT MODE) */
/* ══════════════════════════════════════════════════════════════ */

:root[b-moc8kbrlrw], [data-theme="light"][b-moc8kbrlrw] {
    --drop-rail-bg: rgba(2, 132, 199, 0.1);
    --drop-rail-bg-hover: rgba(2, 132, 199, 0.18);
    --drop-rail-border: rgba(2, 132, 199, 0.2);
    --drop-rail-border-hover: rgba(2, 132, 199, 0.45);
    --drop-rail-dot: #0284c7;
    --drop-rail-glow: rgba(2, 132, 199, 0.45);
    --drop-rail-shadow: inset 0 1px 3px rgba(2, 132, 199, 0.1);
    --drop-glow-ambient: rgba(2, 132, 199, 0.42);
    --drop-glow-active: rgba(2, 132, 199, 0.75);
}

/* ══════════════════════════════════════════════════════════════ */
/* CHẾ ĐỘ TỐI (DARK MODE - ÁNH SÁNG NEON XUYÊN THẤU NHƯ THẺ HSK/IELTS) */
/* ══════════════════════════════════════════════════════════════ */

[data-theme="dark"][b-moc8kbrlrw],
:root:not([data-theme="light"])[b-moc8kbrlrw] {
    --drop-rail-bg: rgba(255, 255, 255, 0.06);
    --drop-rail-bg-hover: rgba(56, 189, 248, 0.16);
    --drop-rail-border: rgba(56, 189, 248, 0.22);
    --drop-rail-border-hover: rgba(56, 189, 248, 0.6);
    --drop-rail-dot: #38bdf8;
    --drop-rail-glow: rgba(56, 189, 248, 0.65);
    --drop-rail-shadow: 0 0 10px rgba(56, 189, 248, 0.15), inset 0 0 4px rgba(56, 189, 248, 0.1);
    --drop-glow-ambient: rgba(56, 189, 248, 0.65);
    --drop-glow-active: rgba(56, 189, 248, 0.95);
}

[data-theme="dark"] .drop-path[b-moc8kbrlrw],
:root:not([data-theme="light"]) .drop-path[b-moc8kbrlrw] {
    fill: url(#dropFillDark);
    stroke-opacity: 0.9;
}

[data-theme="dark"] .drop-bottom-glint[b-moc8kbrlrw],
:root:not([data-theme="light"]) .drop-bottom-glint[b-moc8kbrlrw] {
    opacity: 0.35;
}

/* Ẩn khi mở modal */
:global(body.modal-open) .drop-scroll[b-moc8kbrlrw] {
    display: none !important;
}

/* Responsive trên màn hình nhỏ */
@media (max-width: 640px) {
    .drop-scroll[b-moc8kbrlrw] {
        top: 64px;
        right: 8px;
        bottom: 16px;
        width: 32px;
    }
}
/* /Components/Games/HskShooterGameModal.razor.rz.scp.css */
/* ==========================================================================
   MODAL 2 & 3: FULLSCREEN DESKTOP GAME OVERLAY (CLEAN MONOCHROME DARK VIEWPORT)
   ========================================================================== */
.fullscreen-game-overlay[b-socn4oa7hy] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #090d16;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    outline: none;
    user-select: none;
    animation: fadeIn-b-socn4oa7hy 0.2s ease;
    color: #f8fafc;
}

.fullscreen-game-overlay.hsk-game-overlay[b-socn4oa7hy] {
    background: #070a12;
}

/* Fixed Top Bar */
.fullscreen-topbar[b-socn4oa7hy] {
    height: 64px;
    background: #0f172a;
    border-bottom: 1px solid #1e293b;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    flex-shrink: 0;
    z-index: 100;
}

.fullscreen-topbar.hsk-topbar[b-socn4oa7hy] {
    border-bottom-color: #1e293b;
}

.topbar-left[b-socn4oa7hy] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.fs-game-badge[b-socn4oa7hy] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-weight: 800;
    font-size: 0.78rem;
    padding: 0.3rem 0.75rem;
    border-radius: 9999px;
    letter-spacing: 0.06em;
}

.fs-game-badge.hsk-badge-pill[b-socn4oa7hy] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.fs-game-title[b-socn4oa7hy] {
    font-size: 1.1rem;
    font-weight: 800;
    color: #f8fafc;
}

.topbar-center[b-socn4oa7hy] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.fs-stat-pill[b-socn4oa7hy] {
    background: #1e293b;
    border: 1px solid #334155;
    padding: 0.35rem 0.85rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #f8fafc;
}

.topbar-right[b-socn4oa7hy] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-fs-tool[b-socn4oa7hy] {
    background: #1e293b;
    border: 1px solid #334155;
    color: #cbd5e1;
    padding: 0.45rem 0.95rem;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.btn-fs-tool:hover[b-socn4oa7hy] {
    background: #334155;
    color: #ffffff;
}

.btn-fs-exit[b-socn4oa7hy] {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #f87171;
    padding: 0.45rem 1.15rem;
    border-radius: 10px;
    font-weight: 800;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
}

.btn-fs-exit:hover[b-socn4oa7hy] {
    background: #ef4444;
    color: #ffffff;
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.5);
    transform: translateY(-1px);
}


/* ==========================================================================
   MODAL 3: FULLSCREEN HSK VOCAB SHOOTER BATTLEFIELD
   ========================================================================== */
.hsk-battlefield[b-socn4oa7hy] {
    position: relative;
    overflow: hidden;
    flex: 1;
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    cursor: crosshair;
    background: #090d16;
}

/* Falling Word Bubble */
.falling-word[b-socn4oa7hy] {
    position: absolute;
    top: -90px;
    left: var(--x-pos, 50%);
    transform: translateX(-50%);
    animation: hskFall-b-socn4oa7hy var(--fall-duration, 6s) linear forwards;
    background: #111827;
    border: 2px solid #374151;
    border-radius: 14px;
    padding: 0.75rem 1.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.65);
    pointer-events: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    white-space: nowrap;
    z-index: 5;
    min-width: 72px;
}

.falling-word.paused-anim[b-socn4oa7hy],
.hsk-bullet.paused-anim[b-socn4oa7hy],
.hsk-impact-burst.paused-anim[b-socn4oa7hy],
.is-paused .falling-word[b-socn4oa7hy],
.is-paused .hsk-bullet[b-socn4oa7hy],
.is-paused .hsk-impact-burst[b-socn4oa7hy] {
    animation-play-state: paused !important;
}

@keyframes hskFall-b-socn4oa7hy {
    0% {
        top: -90px;
        opacity: 0;
        transform: translateX(-50%) scale(0.9);
    }
    6% {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
    85% {
        opacity: 1;
    }
    95% {
        opacity: 0.5;
    }
    100% {
        top: calc(100% - 150px);
        opacity: 0;
        transform: translateX(-50%) scale(0.85);
    }
}

.word-hanzi[b-socn4oa7hy] {
    font-size: 2.3rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
    letter-spacing: 0.05em;
}

.word-pinyin[b-socn4oa7hy] {
    font-size: 0.88rem;
    font-weight: 700;
    color: #38bdf8;
    letter-spacing: 0.05em;
    margin-top: 0.25rem;
    transition: opacity 0.2s;
}

.word-pinyin.pinyin-hidden[b-socn4oa7hy] {
    display: none;
}

.falling-word.targeted[b-socn4oa7hy] {
    border-color: #f59e0b;
    box-shadow: 0 0 25px rgba(245, 158, 11, 0.8);
    transform: translateX(-50%) scale(1.08);
}

.falling-word.targeted .word-pinyin[b-socn4oa7hy] {
    color: #fbbf24;
}

.falling-word.destroyed[b-socn4oa7hy] {
    animation: wordExplode-b-socn4oa7hy 0.35s ease-out forwards !important;
}

@keyframes wordExplode-b-socn4oa7hy {
    0% {
        transform: translateX(-50%) scale(1);
        opacity: 1;
    }
    50% {
        transform: translateX(-50%) scale(1.4);
        opacity: 0.85;
    }
    100% {
        transform: translateX(-50%) scale(0.2);
        opacity: 0;
    }
}

/* Fighter Airplane */
.hsk-airplane[b-socn4oa7hy] {
    position: absolute;
    bottom: 5.5rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 3.4rem;
    color: #f8fafc;
    pointer-events: none;
    z-index: 10;
    animation: jetHover-b-socn4oa7hy 2s ease-in-out infinite alternate;
}

@keyframes jetHover-b-socn4oa7hy {
    0% { transform: translateX(-50%) translateY(0); }
    100% { transform: translateX(-50%) translateY(-6px); }
}

/* Pinyin Input Dock */
.hsk-input-dock[b-socn4oa7hy] {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 440px;
    z-index: 20;
}

.hsk-input-dock input[b-socn4oa7hy] {
    width: 100%;
    padding: 0.85rem 1.4rem;
    border-radius: 9999px;
    background: #0f172a;
    border: 2px solid #38bdf8;
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 800;
    text-align: center;
    letter-spacing: 0.08em;
    outline: none;
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.3);
    box-sizing: border-box;
}

.hsk-input-dock input:focus[b-socn4oa7hy] {
    border-color: #ffffff;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
}

.hsk-input-dock input[b-socn4oa7hy]::placeholder {
    color: #64748b;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: normal;
}

/* HSK Dialog Cards (Pause / GameOver) */
.hsk-dialog-card[b-socn4oa7hy] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #0f172a;
    border: 2px solid #334155;
    border-radius: 22px;
    padding: 2.25rem;
    max-width: 460px;
    width: 90%;
    text-align: center;
    box-shadow: 0 25px 65px rgba(0, 0, 0, 0.85);
    z-index: 50;
    animation: scaleIn-b-socn4oa7hy 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.hsk-dialog-card.gameover[b-socn4oa7hy] {
    border-color: #ef4444;
}

.hsk-dialog-card h2[b-socn4oa7hy] {
    font-size: 1.45rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 0.5rem 0;
}

.hsk-dialog-card p[b-socn4oa7hy] {
    font-size: 0.92rem;
    color: #94a3b8;
    margin: 0 0 1.5rem 0;
}

.hsk-score-grid[b-socn4oa7hy] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.hsk-score-box[b-socn4oa7hy] {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 14px;
    padding: 0.85rem 0.5rem;
}

.hsk-score-box .val[b-socn4oa7hy] {
    font-size: 1.55rem;
    font-weight: 800;
}

.hsk-score-box .lbl[b-socn4oa7hy] {
    font-size: 0.74rem;
    color: #94a3b8;
    margin-top: 0.25rem;
    font-weight: 600;
}

.hsk-dialog-btns[b-socn4oa7hy] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.btn-hsk-resume[b-socn4oa7hy] {
    padding: 0.9rem;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 14px;
    color: #ffffff;
    font-weight: 800;
    font-size: 0.98rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-hsk-resume:hover[b-socn4oa7hy] {
    background: #1e293b;
    transform: translateY(-2px);
}

.btn-hsk-quit[b-socn4oa7hy] {
    padding: 0.8rem;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 14px;
    color: #cbd5e1;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-hsk-quit:hover[b-socn4oa7hy] {
    background: #334155;
    color: #ffffff;
}

/* ==========================================================================
   ANIMATIONS & SPINNERS
   ========================================================================== */
@keyframes fadeIn-b-socn4oa7hy {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes scaleIn-b-socn4oa7hy {
    from { transform: scale(0.94); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes pop-b-socn4oa7hy {
    0% { transform: scale(0.9); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1.0); }
}

@keyframes flip-b-socn4oa7hy {
    0% { transform: rotateX(0deg); }
    50% { transform: rotateX(90deg); }
    100% { transform: rotateX(0deg); }
}

@keyframes shake-b-socn4oa7hy {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

.spinner[b-socn4oa7hy] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-top-color: #0f172a;
    border-radius: 50%;
    animation: spin-b-socn4oa7hy 0.8s linear infinite;
}

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

/* ==========================================================================
   STAGE SYSTEM - HSK SHOOTER
   ========================================================================== */

/* Pinyin Toggle Button (on topbar) */
.btn-pinyin-toggle[b-socn4oa7hy] {
    background: #1e293b;
    border: 1px solid #334155;
    color: #38bdf8;
    padding: 0.4rem 0.85rem;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.btn-pinyin-toggle:hover[b-socn4oa7hy] {
    background: #334155;
    color: #7dd3fc;
}

.btn-pinyin-toggle.pinyin-off[b-socn4oa7hy] {
    color: #64748b;
    border-color: #1e293b;
}

.btn-pinyin-toggle.pinyin-locked[b-socn4oa7hy] {
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.45);
    background: rgba(245, 158, 11, 0.1);
}

.btn-pinyin-toggle.pinyin-locked:hover[b-socn4oa7hy] {
    background: rgba(245, 158, 11, 0.22);
    border-color: #f59e0b;
    color: #fef08a;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.35);
}

.btn-pinyin-toggle.pinyin-locked:active[b-socn4oa7hy] {
    transform: scale(0.96);
}

/* Stage Indicator Badge */
.hsk-stage-badge[b-socn4oa7hy] {
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: #38bdf8;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 0.3rem 0.75rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.hsk-stage-badge.boss-stage[b-socn4oa7hy] {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.4);
    color: #f87171;
    animation: bossGlow-b-socn4oa7hy 1.5s ease-in-out infinite alternate;
}

@keyframes bossGlow-b-socn4oa7hy {
    from { box-shadow: 0 0 6px rgba(239, 68, 68, 0.3); }
    to   { box-shadow: 0 0 18px rgba(239, 68, 68, 0.7); }
}

/* Stage Progress Bar (inside battlefield, top) */
.hsk-stage-progress-bar[b-socn4oa7hy] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #1e293b;
    z-index: 30;
}

.hsk-stage-progress-fill[b-socn4oa7hy] {
    height: 100%;
    background: linear-gradient(90deg, #38bdf8, #34d399);
    transition: width 0.4s ease;
}

/* Stage Complete Banner */
.hsk-stage-complete-overlay[b-socn4oa7hy] {
    position: absolute;
    inset: 0;
    background: rgba(7, 10, 18, 0.88);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 60;
    animation: fadeIn-b-socn4oa7hy 0.3s ease;
}

.hsk-stage-complete-card[b-socn4oa7hy] {
    background: linear-gradient(135deg, #0f172a, #1e293b);
    border: 2px solid #38bdf8;
    border-radius: 24px;
    padding: 2.5rem 2rem;
    max-width: 420px;
    width: 90%;
    text-align: center;
    box-shadow: 0 0 60px rgba(56, 189, 248, 0.25);
    animation: scaleIn-b-socn4oa7hy 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.stage-complete-trophy[b-socn4oa7hy] {
    font-size: 3.5rem;
    margin-bottom: 0.75rem;
    animation: pop-b-socn4oa7hy 0.4s ease;
}

.hsk-stage-complete-card h2[b-socn4oa7hy] {
    font-size: 1.55rem;
    font-weight: 800;
    color: #38bdf8;
    margin: 0 0 0.5rem 0;
}

.hsk-stage-complete-card p[b-socn4oa7hy] {
    font-size: 0.92rem;
    color: #94a3b8;
    margin: 0 0 1.5rem 0;
}

.stage-complete-stats[b-socn4oa7hy] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.75rem;
}

.stage-stat-pill[b-socn4oa7hy] {
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 12px;
    padding: 0.65rem 0.5rem;
}

.stage-stat-pill .val[b-socn4oa7hy] {
    font-size: 1.35rem;
    font-weight: 800;
    color: #f8fafc;
}

.stage-stat-pill .lbl[b-socn4oa7hy] {
    font-size: 0.7rem;
    color: #64748b;
    margin-top: 0.2rem;
}

/* Save Progress Dialog */
.hsk-save-dialog[b-socn4oa7hy] {
    position: absolute;
    inset: 0;
    background: rgba(7, 10, 18, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 70;
    animation: fadeIn-b-socn4oa7hy 0.2s ease;
}

.hsk-save-card[b-socn4oa7hy] {
    background: #0f172a;
    border: 1.5px solid #f59e0b;
    border-radius: 20px;
    padding: 2rem;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 0 40px rgba(245, 158, 11, 0.2);
    animation: scaleIn-b-socn4oa7hy 0.25s ease;
}

.hsk-save-card .save-icon[b-socn4oa7hy] { font-size: 2.5rem; margin-bottom: 0.75rem; }
.hsk-save-card h3[b-socn4oa7hy] { font-size: 1.25rem; font-weight: 800; color: #fbbf24; margin: 0 0 0.5rem; }
.hsk-save-card p[b-socn4oa7hy] { font-size: 0.88rem; color: #94a3b8; margin: 0 0 0.5rem; }

.save-warning-box[b-socn4oa7hy] {
    background: rgba(245, 158, 11, 0.08);
    border: 1px dashed rgba(245, 158, 11, 0.4);
    border-radius: 10px;
    padding: 0.75rem;
    font-size: 0.82rem;
    color: #fbbf24;
    margin: 0.75rem 0 1.5rem;
    line-height: 1.45;
}

.hsk-save-btns[b-socn4oa7hy] {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.btn-save-yes[b-socn4oa7hy] {
    padding: 0.85rem;
    background: #0f172a;
    border: 1.5px solid #f59e0b;
    border-radius: 12px;
    color: #fbbf24;
    font-weight: 800;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-save-yes:hover[b-socn4oa7hy] { background: rgba(245, 158, 11, 0.1); }

.btn-save-no[b-socn4oa7hy] {
    padding: 0.75rem;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 12px;
    color: #94a3b8;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-save-no:hover[b-socn4oa7hy] { background: #334155; color: #ffffff; }

/* ==========================================================================
   STAGE MAP MODAL
   ========================================================================== */
.stage-map-overlay[b-socn4oa7hy] {
    position: absolute;
    inset: 0;
    background: rgba(7, 10, 18, 0.95);
    backdrop-filter: blur(10px);
    z-index: 80;
    display: flex;
    flex-direction: column;
    animation: fadeIn-b-socn4oa7hy 0.25s ease;
}

.stage-map-header[b-socn4oa7hy] {
    height: 68px;
    background: #0f172a;
    border-bottom: 1px solid #1e293b;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    flex-shrink: 0;
}

.stage-map-header .header-left h3[b-socn4oa7hy] {
    font-size: 1.05rem;
    font-weight: 800;
    color: #38bdf8;
    margin: 0;
    display: flex;
    align-items: center;
}

.stage-map-header .header-sub[b-socn4oa7hy] {
    font-size: 0.78rem;
    color: #64748b;
    margin-top: 0.2rem;
    display: block;
}

.stage-map-header .header-right[b-socn4oa7hy] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-resume-from-map[b-socn4oa7hy] {
    background: #0ea5e9;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 0.45rem 1rem;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.2s;
}

.btn-resume-from-map:hover[b-socn4oa7hy] {
    background: #0284c7;
    box-shadow: 0 0 12px rgba(14, 165, 233, 0.5);
}

.btn-close-map[b-socn4oa7hy] {
    background: #1e293b;
    border: 1px solid #334155;
    color: #94a3b8;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 1rem;
}

.btn-close-map:hover[b-socn4oa7hy] { background: #ef4444; color: #fff; border-color: #ef4444; }

.stage-map-scroll[b-socn4oa7hy] {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    scrollbar-width: thin;
    scrollbar-color: #38bdf8 transparent;
    cursor: grab;
    user-select: none;
    max-width: 850px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.stage-map-scroll.is-dragging[b-socn4oa7hy] {
    cursor: grabbing;
    scroll-behavior: auto;
}

/* Summit Banner at Top (Kéo lên cao để thấy đỉnh tháp) */
.stage-map-summit[b-socn4oa7hy] {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(245, 158, 11, 0.25));
    border: 2px solid #f59e0b;
    border-radius: 16px;
    padding: 1.1rem 1.35rem;
    margin-bottom: 0.5rem;
    box-shadow: 0 0 25px rgba(245, 158, 11, 0.35);
}

.stage-map-summit .summit-crown[b-socn4oa7hy] {
    font-size: 2.3rem;
    animation: crownFloat-b-socn4oa7hy 1.2s ease-in-out infinite alternate;
}

@keyframes crownFloat-b-socn4oa7hy {
    0% { transform: translateY(0); }
    100% { transform: translateY(-5px); }
}

.stage-map-summit .summit-title[b-socn4oa7hy] {
    font-size: 1.05rem;
    font-weight: 900;
    color: #fbbf24;
    letter-spacing: 0.04em;
}

.stage-map-summit .summit-sub[b-socn4oa7hy] {
    font-size: 0.82rem;
    color: #cbd5e1;
    margin-top: 0.2rem;
}

/* Base Banner at Bottom */
.stage-map-base[b-socn4oa7hy] {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(30, 41, 59, 0.6);
    border: 1.5px solid #334155;
    border-radius: 16px;
    padding: 0.9rem 1.25rem;
    margin-top: 0.5rem;
}

.stage-map-base .base-flag[b-socn4oa7hy] {
    font-size: 1.8rem;
}

.stage-map-base .base-title[b-socn4oa7hy] {
    font-size: 0.92rem;
    font-weight: 800;
    color: #94a3b8;
}

.stage-map-base .base-sub[b-socn4oa7hy] {
    font-size: 0.78rem;
    color: #64748b;
}

.stage-map-row[b-socn4oa7hy] {
    background: #111827;
    border: 1.5px solid #1e293b;
    border-radius: 16px;
    padding: 1rem 1.25rem;
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 1rem;
    transition: all 0.2s ease;
}

.stage-map-row.stage-done[b-socn4oa7hy] {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.06);
}

.stage-map-row.stage-active[b-socn4oa7hy] {
    border-color: #38bdf8;
    background: rgba(56, 189, 248, 0.08);
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.2);
}

.stage-map-row.stage-locked[b-socn4oa7hy] {
    opacity: 0.45;
    border-color: #1e293b;
    background: rgba(15, 23, 42, 0.5);
}

.stage-map-row.stage-boss[b-socn4oa7hy] {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}

.stage-map-row.stage-boss.stage-active[b-socn4oa7hy] {
    box-shadow: 0 0 28px rgba(239, 68, 68, 0.3);
}

.stage-num-circle[b-socn4oa7hy] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #1e293b;
    border: 2px solid #334155;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 800;
    color: #cbd5e1;
    flex-shrink: 0;
}

.stage-map-row.stage-done .stage-num-circle[b-socn4oa7hy] {
    background: rgba(16, 185, 129, 0.15);
    border-color: #10b981;
    color: #34d399;
}

.stage-map-row.stage-active .stage-num-circle[b-socn4oa7hy] {
    background: rgba(56, 189, 248, 0.18);
    border-color: #38bdf8;
    color: #38bdf8;
    animation: bossGlow-b-socn4oa7hy 1.5s ease-in-out infinite alternate;
}

.stage-map-row.stage-boss .stage-num-circle[b-socn4oa7hy] {
    background: rgba(239, 68, 68, 0.18);
    border-color: #ef4444;
    color: #f87171;
}

.stage-map-row.stage-locked .stage-num-circle[b-socn4oa7hy] {
    background: #0f172a;
    border-color: #334155;
    color: #64748b;
}

.stage-map-info[b-socn4oa7hy] { min-width: 0; }

.stage-map-title[b-socn4oa7hy] {
    font-size: 0.98rem;
    font-weight: 800;
    color: #f8fafc;
    margin-bottom: 0.3rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.stage-map-sub[b-socn4oa7hy] {
    font-size: 0.78rem;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Status Tags */
.active-tag[b-socn4oa7hy] {
    font-size: 0.72rem;
    font-weight: 800;
    background: #38bdf8;
    color: #0f172a;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    animation: pulseActive-b-socn4oa7hy 1s ease-in-out infinite alternate;
}

@keyframes pulseActive-b-socn4oa7hy {
    0% { transform: scale(1); box-shadow: 0 0 5px rgba(56, 189, 248, 0.5); }
    100% { transform: scale(1.06); box-shadow: 0 0 15px rgba(56, 189, 248, 0.9); }
}

.done-tag[b-socn4oa7hy] {
    font-size: 0.72rem;
    font-weight: 700;
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid #10b981;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
}

.locked-tag[b-socn4oa7hy] {
    font-size: 0.72rem;
    font-weight: 700;
    background: rgba(51, 65, 85, 0.4);
    color: #94a3b8;
    border: 1px solid #334155;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
}

.diff-chip[b-socn4oa7hy] {
    padding: 0.15rem 0.55rem;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
}

.diff-chip.easy[b-socn4oa7hy]   { background: rgba(16, 185, 129, 0.15); color: #34d399; }
.diff-chip.medium[b-socn4oa7hy] { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.diff-chip.hard[b-socn4oa7hy]   { background: rgba(239, 68, 68, 0.15);  color: #f87171; }
.diff-chip.boss[b-socn4oa7hy]   { background: rgba(239, 68, 68, 0.2);   color: #f87171; border: 1px solid #ef444460; }

.stage-word-count[b-socn4oa7hy] { font-size: 0.8rem; color: #475569; white-space: nowrap; }

.btn-stage-play[b-socn4oa7hy] {
    padding: 0.55rem 1.15rem;
    border-radius: 10px;
    font-size: 0.84rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    border: 1.5px solid #38bdf8;
    background: rgba(56, 189, 248, 0.1);
    color: #38bdf8;
}

.btn-stage-play.current[b-socn4oa7hy] {
    background: #38bdf8;
    color: #0f172a;
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.4);
}

.btn-stage-play.current:hover[b-socn4oa7hy] {
    background: #0284c7;
    color: #ffffff;
}

.btn-stage-play.replay[b-socn4oa7hy] {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    color: #34d399;
}

.btn-stage-play.replay:hover[b-socn4oa7hy] {
    background: #10b981;
    color: #0f172a;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}

.btn-stage-play.locked[b-socn4oa7hy] {
    border-color: #1e293b;
    background: rgba(30, 41, 59, 0.3);
    color: #475569;
    cursor: not-allowed;
    pointer-events: none;
}

/* Corner Floating Map Button in Battlefield */
.hsk-corner-map-fab[b-socn4oa7hy] {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 1rem;
    background: rgba(15, 23, 42, 0.9);
    border: 1.5px solid #38bdf8;
    border-radius: 12px;
    color: #38bdf8;
    cursor: pointer;
    box-shadow: 0 0 18px rgba(56, 189, 248, 0.35), 0 4px 12px rgba(0, 0, 0, 0.5);
    transition: all 0.2s ease;
    backdrop-filter: blur(8px);
}

.hsk-corner-map-fab:hover[b-socn4oa7hy] {
    background: #38bdf8;
    color: #0f172a;
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(56, 189, 248, 0.6);
}

.hsk-corner-map-fab i[b-socn4oa7hy] {
    font-size: 1.25rem;
}

.hsk-corner-map-fab .fab-text[b-socn4oa7hy] {
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 1.15;
}

.hsk-corner-map-fab .fab-title[b-socn4oa7hy] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    opacity: 0.85;
}

.hsk-corner-map-fab .fab-stage[b-socn4oa7hy] {
    font-size: 0.88rem;
    font-weight: 900;
}

/* Stage Badge Button in Topbar */
.hsk-stage-badge-btn[b-socn4oa7hy] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: rgba(56, 189, 248, 0.12);
    border: 1.5px solid #38bdf8;
    color: #38bdf8;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hsk-stage-badge-btn:hover[b-socn4oa7hy] {
    background: #38bdf8;
    color: #0f172a;
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.5);
}

.hsk-stage-badge-btn.boss-stage[b-socn4oa7hy] {
    background: rgba(239, 68, 68, 0.15);
    border-color: #ef4444;
    color: #f87171;
}

.stage-badge-tag[b-socn4oa7hy] {
    font-size: 0.7rem;
    background: rgba(0, 0, 0, 0.35);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
}

/* Resume progress confirmation */
.hsk-resume-overlay[b-socn4oa7hy] {
    position: absolute;
    inset: 0;
    background: rgba(7, 10, 18, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 90;
    animation: fadeIn-b-socn4oa7hy 0.2s ease;
}

.hsk-resume-card[b-socn4oa7hy] {
    background: #0f172a;
    border: 1.5px solid #38bdf8;
    border-radius: 22px;
    padding: 2.25rem;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 0 50px rgba(56, 189, 248, 0.2);
    animation: scaleIn-b-socn4oa7hy 0.25s ease;
}

.hsk-resume-card .resume-icon[b-socn4oa7hy] { font-size: 2.5rem; margin-bottom: 0.75rem; }
.hsk-resume-card h3[b-socn4oa7hy] { font-size: 1.2rem; font-weight: 800; color: #38bdf8; margin: 0 0 0.5rem; }
.hsk-resume-card p[b-socn4oa7hy]  { font-size: 0.88rem; color: #94a3b8; margin: 0 0 1.5rem; }

.hsk-resume-btns[b-socn4oa7hy] {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.btn-resume-continue[b-socn4oa7hy] {
    padding: 0.9rem;
    background: rgba(56, 189, 248, 0.1);
    border: 1.5px solid #38bdf8;
    border-radius: 12px;
    color: #38bdf8;
    font-weight: 800;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-resume-continue:hover[b-socn4oa7hy] { background: #38bdf8; color: #0f172a; }

.btn-resume-restart[b-socn4oa7hy] {
    padding: 0.75rem;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 12px;
    color: #94a3b8;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-resume-restart:hover[b-socn4oa7hy] { background: #334155; color: #ffffff; }

.kbd-badge[b-socn4oa7hy] {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 6px;
    padding: 0.1rem 0.45rem;
    font-size: 0.78rem;
    font-weight: 700;
    margin: 0 0.35rem;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    letter-spacing: 0.03em;
}

/* =========================================================================
   HSK LASER BULLET & IMPACT EXPLOSION
   ========================================================================= */
.hsk-bullet[b-socn4oa7hy] {
    position: absolute;
    pointer-events: none;
    z-index: 12;
    transform: translate(-50%, -50%);
    animation: flyLaser-b-socn4oa7hy 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.bullet-bolt[b-socn4oa7hy] {
    width: 6px;
    height: 38px;
    background: linear-gradient(180deg, #ffffff 0%, #38bdf8 50%, #f59e0b 100%);
    border-radius: 999px;
    box-shadow: 0 0 14px #38bdf8, 0 0 28px rgba(56, 189, 248, 0.8), 0 0 40px #f59e0b;
    filter: drop-shadow(0 0 8px #ffffff);
}

@keyframes flyLaser-b-socn4oa7hy {
    0% {
        left: var(--start-x);
        top: var(--start-y);
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.6);
    }
    100% {
        left: var(--target-x);
        top: var(--target-y);
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.3);
    }
}

/* Impact Shockwave & Particle Burst */
.hsk-impact-burst[b-socn4oa7hy] {
    position: absolute;
    left: var(--target-x);
    top: var(--target-y);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 14;
    display: flex;
    align-items: center;
    justify-content: center;
}

.impact-ring[b-socn4oa7hy] {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 3px solid #f59e0b;
    box-shadow: 0 0 25px #f59e0b, inset 0 0 15px #38bdf8;
    animation: impactShockwave-b-socn4oa7hy 0.32s ease-out forwards;
}

.impact-flash[b-socn4oa7hy] {
    position: absolute;
    font-size: 2.4rem;
    animation: impactFlash-b-socn4oa7hy 0.3s ease-out forwards;
    filter: drop-shadow(0 0 15px #f59e0b);
}

@keyframes impactShockwave-b-socn4oa7hy {
    0% {
        transform: scale(0.2);
        opacity: 1;
    }
    100% {
        transform: scale(2.2);
        opacity: 0;
    }
}

@keyframes impactFlash-b-socn4oa7hy {
    0% {
        transform: scale(0.4);
        opacity: 1;
    }
    50% {
        transform: scale(1.4);
        opacity: 0.9;
    }
    100% {
        transform: scale(0.3);
        opacity: 0;
    }
}

/* =========================================================================
   STAGE COUNTDOWN & BGM STYLES
   ========================================================================= */
.stage-countdown-box[b-socn4oa7hy] {
    margin: 1.25rem 0 0.5rem;
    padding: 1rem 1.25rem;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.sc-label[b-socn4oa7hy] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #94a3b8;
}

.sc-circle[b-socn4oa7hy] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.25) 0%, rgba(15, 23, 42, 0.9) 70%);
    border: 2px solid #38bdf8;
    box-shadow: 0 0 25px rgba(56, 189, 248, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulseCount-b-socn4oa7hy 1s infinite ease-in-out;
}

.sc-number[b-socn4oa7hy] {
    font-size: 2.4rem;
    font-weight: 900;
    color: #ffffff;
    line-height: 1;
    text-shadow: 0 0 15px #38bdf8;
}

.sc-sub[b-socn4oa7hy] {
    font-size: 0.82rem;
    color: #cbd5e1;
}

@keyframes pulseCount-b-socn4oa7hy {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); box-shadow: 0 0 35px rgba(56, 189, 248, 0.8); }
    100% { transform: scale(1); }
}

/* BGM toggle in topbar */
.btn-bgm[b-socn4oa7hy] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #cbd5e1;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-bgm:hover[b-socn4oa7hy] {
    background: rgba(51, 65, 85, 0.85);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.3);
}

.btn-bgm.active[b-socn4oa7hy] {
    background: rgba(56, 189, 248, 0.2);
    border-color: #38bdf8;
    color: #38bdf8;
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.35);
}

/* CEFR Filter Chips in Wordle Info - Clear, high contrast B&W styling */
.cefr-btn-group[b-socn4oa7hy] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.35rem;
}

.cefr-chip[b-socn4oa7hy] {
    padding: 0.55rem 0.95rem;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #334155;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cefr-chip:hover[b-socn4oa7hy] {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #94a3b8;
}

.cefr-chip.active[b-socn4oa7hy] {
    background: #0f172a;
    color: #ffffff;
    border-color: #0f172a;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);
}

/* Keyboard Shortcut Badge for Wordle Helper Buttons */
.kbd-badge-sm[b-socn4oa7hy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    margin-left: 6px;
    font-size: 0.72rem;
    font-weight: 800;
    font-family: inherit;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.4);
    color: #f1f5f9;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    vertical-align: middle;
}

/* Combo Pill in Topbar */
.hsk-combo-pill[b-socn4oa7hy] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(245, 158, 11, 0.25)) !important;
    border: 1px solid #f59e0b !important;
    color: #fbbf24 !important;
    font-weight: 800;
    animation: comboPillPulse-b-socn4oa7hy 0.8s ease-in-out infinite alternate;
}

@keyframes comboPillPulse-b-socn4oa7hy {
    0% { transform: scale(1); box-shadow: 0 0 8px rgba(245, 158, 11, 0.4); }
    100% { transform: scale(1.06); box-shadow: 0 0 16px rgba(239, 68, 68, 0.7); }
}

/* Floating Flaming Combo Banner in Battlefield */
.hsk-combo-banner[b-socn4oa7hy] {
    position: absolute;
    top: 60px;
    right: 28px;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1.2rem;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.92));
    border: 2px solid #f59e0b;
    border-radius: 9999px;
    box-shadow: 0 0 25px rgba(245, 158, 11, 0.5), 0 8px 20px rgba(0, 0, 0, 0.6);
    pointer-events: none;
    animation: comboPop-b-socn4oa7hy 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hsk-combo-banner .combo-fire[b-socn4oa7hy] {
    font-size: 1.5rem;
    animation: fireFlicker-b-socn4oa7hy 0.6s ease-in-out infinite alternate;
}

.hsk-combo-banner .combo-count[b-socn4oa7hy] {
    font-size: 1.45rem;
    font-weight: 900;
    color: #f59e0b;
    font-family: monospace;
    text-shadow: 0 0 10px rgba(245, 158, 11, 0.8);
}

.hsk-combo-banner .combo-text[b-socn4oa7hy] {
    font-size: 1rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.08em;
}

@keyframes comboPop-b-socn4oa7hy {
    0% { transform: scale(0.6); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes fireFlicker-b-socn4oa7hy {
    0% { transform: scale(1) rotate(-4deg); }
    100% { transform: scale(1.18) rotate(6deg); }
}

/* Screen Damage Flash when losing a life */
.hsk-damage-flash[b-socn4oa7hy] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 50;
    box-shadow: inset 0 0 90px 35px rgba(239, 68, 68, 0.7);
    background: rgba(239, 68, 68, 0.15);
    animation: damageFade-b-socn4oa7hy 0.35s ease-out forwards;
}

@keyframes damageFade-b-socn4oa7hy {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* In-game Realtime Missed Alert Toast (Hiện đáp án từ vừa bỏ lỡ) */
.hsk-missed-alert-banner[b-socn4oa7hy] {
    position: absolute;
    bottom: 95px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 25;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 1.25rem;
    background: rgba(15, 23, 42, 0.94);
    border: 1.5px solid #ef4444;
    border-radius: 9999px;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.4), 0 8px 24px rgba(0, 0, 0, 0.6);
    pointer-events: none;
    animation: missedAlertSlide-b-socn4oa7hy 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}

@keyframes missedAlertSlide-b-socn4oa7hy {
    0% { transform: translate(-50%, 20px) scale(0.9); opacity: 0; }
    100% { transform: translate(-50%, 0) scale(1); opacity: 1; }
}

.hsk-missed-alert-banner .missed-tag[b-socn4oa7hy] {
    font-size: 0.78rem;
    font-weight: 800;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.18);
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    letter-spacing: 0.04em;
}

.hsk-missed-alert-banner .missed-hanzi[b-socn4oa7hy] {
    font-size: 1.25rem;
    font-weight: 800;
    color: #ffffff;
}

.hsk-missed-alert-banner .missed-pinyin[b-socn4oa7hy] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fbbf24;
}

.hsk-missed-alert-banner .missed-meaning[b-socn4oa7hy] {
    font-size: 0.88rem;
    font-weight: 600;
    color: #cbd5e1;
}

/* Review Section for Missed Words in Dialogs */
.hsk-review-section[b-socn4oa7hy] {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    margin-top: 1rem;
    margin-bottom: 1.2rem;
    text-align: left;
}

.review-header[b-socn4oa7hy] {
    font-size: 0.86rem;
    color: #f87171;
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
}

.review-items-scroll[b-socn4oa7hy] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    max-height: 140px;
    overflow-y: auto;
    padding-right: 4px;
}

.review-item[b-socn4oa7hy] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: rgba(30, 41, 59, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 0.35rem 0.75rem;
    font-size: 0.82rem;
}

.review-hanzi[b-socn4oa7hy] {
    font-size: 1.05rem;
    font-weight: 800;
    color: #ffffff;
}

.review-pinyin[b-socn4oa7hy] {
    color: #38bdf8;
    font-weight: 700;
}

.review-meaning[b-socn4oa7hy] {
    color: #94a3b8;
}

/* ==========================================================================
   PLAYER AVATAR PRESENCE ON STAGE MAP & FAB
   ========================================================================== */

/* 1. Header user status in stage map modal */
.stage-map-header .header-left[b-socn4oa7hy] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.header-user-status[b-socn4oa7hy] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(30, 41, 59, 0.85);
    border: 1.5px solid rgba(56, 189, 248, 0.45);
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.25);
}

.header-user-avt[b-socn4oa7hy] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
    flex-shrink: 0;
    border: 1.5px solid #ffffff;
}

.header-user-meta[b-socn4oa7hy] {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    text-align: left;
}

.user-meta-name[b-socn4oa7hy] {
    font-size: 0.82rem;
    font-weight: 800;
    color: #f8fafc;
}

.user-meta-floor[b-socn4oa7hy] {
    font-size: 0.72rem;
    font-weight: 700;
    color: #38bdf8;
}

/* 2. Avatar circle in the stage number column */
.stage-num-circle.has-player-avatar[b-socn4oa7hy] {
    position: relative;
    border: none;
    background: transparent;
}

.player-map-avatar-circle[b-socn4oa7hy] {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.7);
    border: 2.5px solid #ffffff;
    cursor: default;
}

.player-map-avatar-circle .avatar-icon[b-socn4oa7hy] {
    position: relative;
    z-index: 2;
    animation: bounceAvt-b-socn4oa7hy 2s ease-in-out infinite;
}

@keyframes bounceAvt-b-socn4oa7hy {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px) scale(1.08); }
}

.player-map-avatar-circle .floor-num-badge[b-socn4oa7hy] {
    position: absolute;
    bottom: -4px;
    right: -4px;
    background: #0f172a;
    border: 1.5px solid #38bdf8;
    color: #38bdf8;
    font-size: 0.62rem;
    font-weight: 900;
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    z-index: 3;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Sonar radar pulse radiating from user avatar */
.sonar-wave[b-socn4oa7hy] {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid #38bdf8;
    animation: sonarPing-b-socn4oa7hy 1.8s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    z-index: 1;
    pointer-events: none;
}

@keyframes sonarPing-b-socn4oa7hy {
    0% {
        transform: scale(0.85);
        opacity: 0.9;
    }
    100% {
        transform: scale(1.65);
        opacity: 0;
    }
}

/* 3. Player Location Tag in the stage title */
.player-location-tag[b-socn4oa7hy] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.25), rgba(99, 102, 241, 0.3));
    border: 1.5px solid #38bdf8;
    color: #ffffff;
    padding: 0.2rem 0.7rem 0.2rem 0.35rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 800;
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.35);
    animation: locationPulse-b-socn4oa7hy 2s ease-in-out infinite alternate;
}

@keyframes locationPulse-b-socn4oa7hy {
    0% { box-shadow: 0 0 8px rgba(56, 189, 248, 0.3); }
    100% { box-shadow: 0 0 22px rgba(56, 189, 248, 0.75); }
}

.player-location-tag .tag-avt[b-socn4oa7hy] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    flex-shrink: 0;
    border: 1.5px solid rgba(255, 255, 255, 0.8);
}

.player-location-tag .tag-text[b-socn4oa7hy] {
    letter-spacing: 0.03em;
    color: #e0f2fe;
}

.player-location-tag .tag-beacon[b-socn4oa7hy] {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 8px #10b981;
    animation: beaconBlink-b-socn4oa7hy 1s ease-in-out infinite alternate;
}

@keyframes beaconBlink-b-socn4oa7hy {
    0% { opacity: 0.4; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1.3); }
}

/* 4. Mini Avatar in Topbar & Floating Corner FAB */
.topbar-user-avt[b-socn4oa7hy] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    flex-shrink: 0;
    margin-right: 0.15rem;
}

.fab-user-avatar[b-socn4oa7hy] {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    border: 2px solid #38bdf8;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.5);
    flex-shrink: 0;
}

.fab-avatar-online[b-socn4oa7hy] {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 9px;
    height: 9px;
    background: #10b981;
    border: 1.5px solid #0f172a;
    border-radius: 50%;
    box-shadow: 0 0 6px #10b981;
}

/* Active stage row highlight enhancement */
.stage-map-row.stage-active[b-socn4oa7hy] {
    border-color: #38bdf8;
    background: linear-gradient(90deg, rgba(56, 189, 248, 0.16) 0%, rgba(15, 23, 42, 0.85) 100%);
    box-shadow: 0 0 28px rgba(56, 189, 248, 0.35);
    transform: scale(1.01);
}




/* ==========================================================================
   CANDY CRUSH STYLE WINDING PATH MAP
   ========================================================================== */
.candy-crush-map[b-socn4oa7hy] { display: flex; flex-direction: column; align-items: center; padding: 2rem 1rem; gap: 0; }
.cc-summit[b-socn4oa7hy] { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; margin-bottom: 2rem; animation: crownFloat-b-socn4oa7hy 1.2s ease-in-out infinite alternate; }
.cc-summit-crown[b-socn4oa7hy] { font-size: 3rem; filter: drop-shadow(0 0 15px rgba(245, 158, 11, 0.6)); }
.cc-summit-title[b-socn4oa7hy] { font-size: 1.1rem; font-weight: 900; color: #fbbf24; letter-spacing: 0.05em; text-shadow: 0 0 10px rgba(245, 158, 11, 0.5); text-align: center; }
.cc-path-container[b-socn4oa7hy] { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 500px; gap: 0; position: relative; }
.cc-node[b-socn4oa7hy] { position: relative; display: flex; flex-direction: column; align-items: center; margin: 1.5rem 0; width: 100%; z-index: 2; }
.cc-node-circle[b-socn4oa7hy] { width: 56px; height: 56px; border-radius: 50%; background: #1e293b; border: 3px solid #334155; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 800; color: #cbd5e1; cursor: pointer; transition: all 0.2s ease; position: relative; z-index: 3; }
.cc-node.cc-done .cc-node-circle[b-socn4oa7hy] { background: rgba(16, 185, 129, 0.2); border-color: #10b981; color: #34d399; }
.cc-node.cc-active .cc-node-circle[b-socn4oa7hy] { background: rgba(56, 189, 248, 0.25); border-color: #38bdf8; box-shadow: 0 0 25px rgba(56, 189, 248, 0.6); transform: scale(1.15); }
.cc-node.cc-boss .cc-node-circle[b-socn4oa7hy] { background: rgba(239, 68, 68, 0.2); border-color: #ef4444; color: #f87171; width: 64px; height: 64px; font-size: 1.5rem; }
.cc-node.cc-locked .cc-node-circle[b-socn4oa7hy] { background: #0f172a; border-color: #1e293b; color: #475569; opacity: 0.5; cursor: not-allowed; }
.cc-node:not(.cc-locked):hover .cc-node-circle[b-socn4oa7hy] { transform: scale(1.1); border-color: #38bdf8; box-shadow: 0 0 15px rgba(56, 189, 248, 0.4); }
.cc-stars[b-socn4oa7hy] { margin-top: 0.35rem; font-size: 0.75rem; letter-spacing: 2px; color: #fbbf24; }
.cc-connector[b-socn4oa7hy] { position: absolute; width: 60px; height: 60px; border: 3px dashed #334155; border-left: none; border-radius: 0 30px 30px 0; z-index: 1; top: 50%; }
.cc-connector.cc-conn-right[b-socn4oa7hy] { left: calc(50% + 28px); transform: translateY(-50%); }
.cc-connector.cc-conn-left[b-socn4oa7hy] { right: calc(50% + 28px); transform: translateY(-50%) scaleX(-1); }
.cc-node.cc-done .cc-connector[b-socn4oa7hy] { border-color: #10b981; }
.cc-base[b-socn4oa7hy] { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; margin-top: 2rem; }
.cc-base-flag[b-socn4oa7hy] { font-size: 2rem; }
.cc-base-title[b-socn4oa7hy] { font-size: 0.85rem; font-weight: 800; color: #64748b; letter-spacing: 0.05em; }

/* ==========================================================================
   BOSS STAGE (TẦNG 25 - MA VƯƠNG HÁN TỰ) UI & EFFECTS
   ========================================================================== */

/* 1. Boss Warning Ribbon Hazard Overlay */
.boss-warning-overlay[b-socn4oa7hy] {
    position: absolute;
    inset: 0;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(5, 7, 15, 0.92);
    backdrop-filter: blur(8px);
    overflow: hidden;
}

.hazard-ribbon[b-socn4oa7hy] {
    height: 48px;
    width: 130%;
    background: repeating-linear-gradient(45deg, #f59e0b, #f59e0b 26px, #0a0a0a 26px, #0a0a0a 52px);
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.7);
    animation: hazardScroll-b-socn4oa7hy 1.2s linear infinite;
}

.hazard-top[b-socn4oa7hy] {
    position: absolute;
    top: 14%;
    transform: rotate(-3.5deg);
}

.hazard-bottom[b-socn4oa7hy] {
    position: absolute;
    bottom: 14%;
    transform: rotate(3.5deg);
}

@keyframes hazardScroll-b-socn4oa7hy {
    from { background-position: 0 0; }
    to { background-position: 74px 0; }
}

.boss-warning-card[b-socn4oa7hy] {
    background: rgba(15, 23, 42, 0.96);
    border: 2px solid #ef4444;
    border-radius: 20px;
    padding: 2.2rem 3rem;
    text-align: center;
    box-shadow: 0 0 60px rgba(239, 68, 68, 0.5), inset 0 0 30px rgba(239, 68, 68, 0.2);
    animation: warningPulse-b-socn4oa7hy 1s ease-in-out infinite alternate;
    max-width: 620px;
    width: 90%;
    z-index: 2;
}

.warning-alert-tag[b-socn4oa7hy] {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.95rem;
    font-weight: 900;
    color: #fecaca;
    background: rgba(220, 38, 38, 0.4);
    border: 1px solid #ef4444;
    padding: 0.4rem 1.3rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    letter-spacing: 2px;
    margin-bottom: 1rem;
    animation: blinkAlert-b-socn4oa7hy 0.8s ease-in-out infinite;
}

.warning-boss-name[b-socn4oa7hy] {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.2rem;
    font-weight: 900;
    color: #f87171;
    letter-spacing: 2px;
    margin: 0 0 0.8rem 0;
    text-shadow: 0 0 25px rgba(239, 68, 68, 0.8);
}

.warning-stage-info[b-socn4oa7hy] {
    font-size: 0.95rem;
    font-weight: 800;
    color: #fbbf24;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

@keyframes warningPulse-b-socn4oa7hy {
    from { transform: scale(0.98); box-shadow: 0 0 40px rgba(239, 68, 68, 0.4); }
    to { transform: scale(1.02); box-shadow: 0 0 70px rgba(239, 68, 68, 0.7); }
}

@keyframes blinkAlert-b-socn4oa7hy {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* 2. Boss Dialogue Cutscene Modal */
.boss-dialogue-overlay[b-socn4oa7hy] {
    position: absolute;
    inset: 0;
    z-index: 1250;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 2.5rem;
    background: rgba(3, 7, 18, 0.75);
    backdrop-filter: blur(5px);
}

.boss-dialogue-modal[b-socn4oa7hy] {
    display: flex;
    gap: 1.5rem;
    background: linear-gradient(145deg, #090d16, #111827);
    border: 2px solid #8b5cf6;
    border-radius: 20px;
    padding: 1.5rem 2rem;
    max-width: 780px;
    width: 92%;
    box-shadow: 0 0 40px rgba(139, 92, 246, 0.4), 0 20px 40px rgba(0, 0, 0, 0.7);
    align-items: center;
    animation: dialogueSlideUp-b-socn4oa7hy 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dialogueSlideUp-b-socn4oa7hy {
    from { transform: translateY(50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.boss-dialogue-portrait-box[b-socn4oa7hy] {
    position: relative;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
    border-radius: 20px;
    background: radial-gradient(circle, #2e1065 0%, #0f172a 85%);
    border: 2px solid #a855f7;
    box-shadow: 0 0 25px rgba(168, 85, 247, 0.5), inset 0 0 15px rgba(244, 63, 94, 0.3);
    padding: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.boss-dialogue-avatar[b-socn4oa7hy] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 18px rgba(244, 63, 94, 0.85)) drop-shadow(0 0 30px rgba(168, 85, 247, 0.6));
    animation: bossAvatarFloat-b-socn4oa7hy 2.5s ease-in-out infinite alternate;
}

.boss-dialogue-aura[b-socn4oa7hy] {
    position: absolute;
    inset: -6px;
    border-radius: 24px;
    border: 1.5px dashed rgba(244, 63, 94, 0.6);
    animation: orbSparksRing-b-socn4oa7hy 8s linear infinite;
    pointer-events: none;
}

@keyframes bossAvatarFloat-b-socn4oa7hy {
    from { transform: translateY(0); }
    to { transform: translateY(-8px); }
}

@keyframes auraPulse-b-socn4oa7hy {
    0%, 100% { transform: scale(0.95); opacity: 0.6; }
    50% { transform: scale(1.15); opacity: 1; }
}

.boss-dialogue-content[b-socn4oa7hy] {
    flex: 1;
    min-width: 0;
}

.boss-dialogue-header[b-socn4oa7hy] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    flex-wrap: wrap;
}

.boss-dialogue-crown[b-socn4oa7hy] {
    font-size: 1.3rem;
}

.boss-dialogue-title[b-socn4oa7hy] {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.05rem;
    font-weight: 900;
    color: #f43f5e;
    text-shadow: 0 0 10px rgba(244, 63, 94, 0.6);
    letter-spacing: 1px;
}

.boss-dialogue-badge[b-socn4oa7hy] {
    font-size: 0.75rem;
    font-weight: 800;
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid #ef4444;
    color: #fca5a5;
    padding: 0.15rem 0.6rem;
    border-radius: 9999px;
}

.boss-dialogue-speech[b-socn4oa7hy] {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid #374151;
    border-radius: 12px;
    padding: 0.85rem 1.1rem;
    min-height: 60px;
    margin-bottom: 0.75rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.boss-dialogue-chinese[b-socn4oa7hy] {
    font-size: 1.2rem;
    font-weight: 800;
    color: #fbbf24;
    text-shadow: 0 0 12px rgba(245, 158, 11, 0.8);
    letter-spacing: 2px;
    margin-bottom: 0.35rem;
    font-family: 'Noto Serif SC', 'Songti SC', 'SimSun', serif;
}

.boss-speech-text[b-socn4oa7hy] {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #f8fafc;
    margin: 0;
    font-weight: 600;
}

.typewriter-blink[b-socn4oa7hy] {
    display: inline-block;
    color: #38bdf8;
    font-weight: 900;
    animation: blinkCursor-b-socn4oa7hy 0.6s infinite;
    margin-left: 2px;
}

@keyframes blinkCursor-b-socn4oa7hy {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.boss-dialogue-actions[b-socn4oa7hy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dialogue-shortcut-hint[b-socn4oa7hy] {
    font-size: 0.75rem;
    color: #94a3b8;
}

.dialogue-shortcut-hint kbd[b-socn4oa7hy] {
    background: #1e293b;
    border: 1px solid #475569;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    color: #e2e8f0;
}

.btn-boss-dialogue-advance[b-socn4oa7hy] {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    border: none;
    padding: 0.45rem 1.1rem;
    border-radius: 8px;
    font-weight: 800;
    font-size: 0.85rem;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.5);
    transition: all 0.2s;
}

.btn-boss-dialogue-advance:hover[b-socn4oa7hy] {
    background: linear-gradient(135deg, #f87171, #ef4444);
    transform: translateY(-1px);
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.8);
}

/* 3. Boss Floating Actor & Arena HUD */
.boss-arena-hud[b-socn4oa7hy] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 95;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.boss-floating-actor[b-socn4oa7hy] {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 100;
    animation: bossFloatingHover-b-socn4oa7hy 3.2s ease-in-out infinite alternate;
    pointer-events: auto;
}

.boss-actor-shadow-portal[b-socn4oa7hy] {
    position: absolute;
    bottom: -15px;
    width: 135px;
    height: 26px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(168, 85, 247, 0.7) 0%, rgba(147, 51, 234, 0.35) 50%, transparent 80%);
    filter: blur(4px);
    box-shadow: 0 0 25px rgba(168, 85, 247, 0.6);
    animation: portalPulse-b-socn4oa7hy 1.6s ease-in-out infinite alternate;
}

.boss-actor-sprite[b-socn4oa7hy] {
    width: 145px;
    height: 145px;
    object-fit: contain;
    filter: drop-shadow(0 0 25px rgba(168, 85, 247, 0.9)) drop-shadow(0 0 45px rgba(225, 29, 72, 0.7));
    transition: filter 0.15s ease, transform 0.15s ease;
    animation: bossBreathing-b-socn4oa7hy 2.4s ease-in-out infinite alternate;
}

.boss-arena-hud.boss-damaged .boss-actor-sprite[b-socn4oa7hy] {
    filter: drop-shadow(0 0 45px rgba(255, 255, 255, 1)) brightness(3.5) contrast(1.6);
    animation: bossDamagedShake-b-socn4oa7hy 0.25s ease-in-out;
}

@keyframes bossFloatingHover-b-socn4oa7hy {
    from { transform: translateX(-50%) translateY(0); }
    to { transform: translateX(-50%) translateY(-12px); }
}

@keyframes bossBreathing-b-socn4oa7hy {
    from { transform: scale(1); }
    to { transform: scale(1.03); }
}

@keyframes portalPulse-b-socn4oa7hy {
    from { transform: scale(0.9); opacity: 0.5; }
    to { transform: scale(1.15); opacity: 0.85; }
}

@keyframes bossDamagedShake-b-socn4oa7hy {
    0%, 100% { transform: translateX(-50%) rotate(0); }
    25% { transform: translateX(-54%) rotate(-5deg); }
    75% { transform: translateX(-46%) rotate(5deg); }
}

/* Energy Orb Charged by Boss (Wave 2 & Wave 3) */
.boss-charging-energy-orb[b-socn4oa7hy] {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 102;
    pointer-events: none;
}

.boss-orb-aura-bg[b-socn4oa7hy] {
    position: absolute;
    width: 140px;
    height: 140px;
    object-fit: contain;
    animation: orbAuraSpin-b-socn4oa7hy 6s linear infinite;
    filter: drop-shadow(0 0 25px rgba(168, 85, 247, 0.9)) drop-shadow(0 0 45px rgba(244, 63, 94, 0.7));
    opacity: 0.9;
}

.boss-orb-core-img[b-socn4oa7hy] {
    position: relative;
    width: 70px;
    height: 70px;
    object-fit: contain;
    animation: orbCorePulse-b-socn4oa7hy 0.9s ease-in-out infinite alternate, orbCoreSpin-b-socn4oa7hy 3s linear infinite reverse;
    filter: drop-shadow(0 0 20px #e879f9) drop-shadow(0 0 35px #a855f7) brightness(1.2);
    z-index: 2;
}

.energy-orb-sparks[b-socn4oa7hy] {
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    border: 2px dashed rgba(250, 204, 21, 0.7);
    box-shadow: 0 0 25px rgba(244, 63, 94, 0.5);
    animation: orbSparksRing-b-socn4oa7hy 1.8s linear infinite;
}

@keyframes orbAuraSpin-b-socn4oa7hy {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes orbCoreSpin-b-socn4oa7hy {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes orbCorePulse-b-socn4oa7hy {
    from { transform: scale(0.88); filter: drop-shadow(0 0 15px #c084fc); }
    to { transform: scale(1.15); filter: drop-shadow(0 0 35px #f43f5e) drop-shadow(0 0 50px #a855f7); }
}

@keyframes orbSparksRing-b-socn4oa7hy {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Boss Top Status HUD Bar */
.boss-top-hud-bar[b-socn4oa7hy] {
    background: rgba(10, 15, 30, 0.88);
    border: 1px solid rgba(239, 68, 68, 0.5);
    border-top: none;
    border-radius: 0 0 16px 16px;
    padding: 0.4rem 1.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(239, 68, 68, 0.3);
    pointer-events: auto;
    min-width: 320px;
}

.boss-hud-header-row[b-socn4oa7hy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 1rem;
}

.boss-hud-name[b-socn4oa7hy] {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.88rem;
    font-weight: 900;
    color: #f87171;
    letter-spacing: 1px;
    text-shadow: 0 0 8px rgba(248, 113, 113, 0.6);
}

.boss-hud-phase-tag[b-socn4oa7hy] {
    font-size: 0.72rem;
    font-weight: 800;
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.35);
    padding: 0.15rem 0.6rem;
    border-radius: 9999px;
}

.boss-charge-timer-container[b-socn4oa7hy] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.boss-charge-track[b-socn4oa7hy] {
    width: 100%;
    height: 6px;
    background: rgba(30, 41, 59, 0.9);
    border-radius: 9999px;
    overflow: hidden;
    border: 1px solid #475569;
}

.boss-charge-fill[b-socn4oa7hy] {
    height: 100%;
    background: linear-gradient(90deg, #f59e0b, #ef4444);
    border-radius: 9999px;
    transition: width 0.1s linear;
    box-shadow: 0 0 8px #ef4444;
}

.boss-charge-timer-text[b-socn4oa7hy] {
    font-size: 0.72rem;
    font-weight: 800;
    color: #fca5a5;
    letter-spacing: 0.5px;
}

/* 4. Orbiting Words Area (Wave 2 & Wave 3) */
.boss-orbit-track-area[b-socn4oa7hy] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 105;
}

.boss-orbit-word[b-socn4oa7hy] {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(15, 23, 42, 0.92);
    border: 2px solid #a855f7;
    border-radius: 12px;
    padding: 0.4rem 0.8rem;
    box-shadow: 0 0 16px rgba(168, 85, 247, 0.6);
    pointer-events: auto;
    transition: transform 0.1s linear;
    z-index: 106;
}

.boss-orbit-word .orbit-shield-ring[b-socn4oa7hy] {
    position: absolute;
    inset: -5px;
    border-radius: 14px;
    border: 1.5px dashed rgba(192, 132, 252, 0.5);
    animation: orbSpin 6s linear infinite;
}

.boss-orbit-word .orbit-hanzi[b-socn4oa7hy] {
    font-size: 1.35rem;
    font-weight: 900;
    color: #f8fafc;
    line-height: 1.1;
}

.boss-orbit-word .orbit-pinyin[b-socn4oa7hy] {
    font-size: 0.75rem;
    font-weight: 700;
    color: #38bdf8;
    margin-top: 0.15rem;
}

.boss-orbit-word.targeted[b-socn4oa7hy] {
    border-color: #facc15;
    box-shadow: 0 0 25px rgba(250, 204, 21, 0.9);
    transform: translate(-50%, -50%) scale(1.15);
}

.boss-orbit-word.hit-flash[b-socn4oa7hy] {
    background: #ffffff !important;
    color: #000000 !important;
    filter: brightness(2);
}

/* 5. Giant Laser Blast (When Boss Charge Explodes) */
.boss-giant-laser-blast[b-socn4oa7hy] {
    position: absolute;
    inset: 0;
    z-index: 120;
    pointer-events: none;
    overflow: hidden;
}

.laser-screen-flash[b-socn4oa7hy] {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(239, 68, 68, 0.45) 0%, rgba(168, 85, 247, 0.3) 50%, rgba(0, 0, 0, 0.6) 100%);
    animation: laserFlashAnim-b-socn4oa7hy 0.35s ease-out;
}

.laser-beam-wrapper[b-socn4oa7hy] {
    position: absolute;
    top: 90px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.boss-laser-sprite[b-socn4oa7hy] {
    position: absolute;
    top: 0;
    left: 50%;
    width: calc(100vh - 110px);
    max-width: 900px;
    height: 140px;
    transform-origin: 0% 50%;
    transform: rotate(90deg) translateY(-50%);
    object-fit: fill;
    filter: drop-shadow(0 0 25px #ef4444) drop-shadow(0 0 55px #a855f7) brightness(1.3);
    animation: laserRumbleAnim-b-socn4oa7hy 0.08s infinite alternate;
}

.laser-impact-crater[b-socn4oa7hy] {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 240px;
    height: 50px;
    border-radius: 50%;
    background: radial-gradient(ellipse, #ffffff 0%, #f43f5e 40%, rgba(168, 85, 247, 0.6) 70%, transparent 100%);
    box-shadow: 0 0 60px #ef4444, 0 0 100px #a855f7;
    animation: craterShockwave-b-socn4oa7hy 0.4s ease-out infinite alternate;
}

@keyframes laserRumbleAnim-b-socn4oa7hy {
    0% { transform: rotate(90deg) translateY(-50%) scaleY(1); }
    50% { transform: rotate(90deg) translateY(-50%) scaleY(1.12); }
    100% { transform: rotate(90deg) translateY(-50%) scaleY(0.95); }
}

@keyframes laserFlashAnim-b-socn4oa7hy {
    0% { opacity: 0.9; }
    100% { opacity: 0; }
}

@keyframes craterShockwave-b-socn4oa7hy {
    from { transform: translateX(-50%) scale(0.9); opacity: 0.8; }
    to { transform: translateX(-50%) scale(1.2); opacity: 1; filter: brightness(1.3); }
}

/* 6. Boss Wave Announcement Banner */
.boss-wave-announcement-banner[b-socn4oa7hy] {
    position: absolute;
    top: 28%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 120;
    background: linear-gradient(90deg, transparent, rgba(15, 23, 42, 0.95) 15%, rgba(15, 23, 42, 0.95) 85%, transparent);
    border-top: 2px solid #ef4444;
    border-bottom: 2px solid #ef4444;
    padding: 0.75rem 2.5rem;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    animation: bannerPopIn-b-socn4oa7hy 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.boss-wave-announcement-banner span[b-socn4oa7hy] {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.15rem;
    font-weight: 900;
    color: #fbbf24;
    text-shadow: 0 0 15px rgba(245, 158, 11, 0.8);
    letter-spacing: 2px;
}

@keyframes bannerPopIn-b-socn4oa7hy {
    from { transform: translateX(-50%) scale(0.7); opacity: 0; }
    to { transform: translateX(-50%) scale(1); opacity: 1; }
}

/* 6b. Boss Skill Chant Shout Banner (Tung chiêu đọc tên tiếng Trung) */
.boss-skill-chant-banner[b-socn4oa7hy] {
    position: absolute;
    top: 32%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 130;
    background: radial-gradient(ellipse at center, rgba(35, 6, 25, 0.97) 0%, rgba(18, 3, 14, 0.98) 70%, transparent 100%);
    border-top: 3px solid #f43f5e;
    border-bottom: 3px solid #f43f5e;
    box-shadow: 0 0 50px rgba(244, 63, 94, 0.8), inset 0 0 25px rgba(239, 68, 68, 0.5);
    padding: 1.1rem 3.5rem;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    animation: skillChantImpact-b-socn4oa7hy 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.skill-chant-tag[b-socn4oa7hy] {
    font-size: 0.72rem;
    font-weight: 900;
    color: #fca5a5;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 0.3rem;
}

.skill-chant-chinese[b-socn4oa7hy] {
    font-size: 2.3rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 4px;
    font-family: 'Noto Serif SC', 'Songti SC', 'SimSun', serif;
    text-shadow: 0 0 15px #f43f5e, 0 0 35px #ef4444, 0 0 55px #a855f7;
    animation: skillGlowPulse-b-socn4oa7hy 0.8s ease-in-out infinite alternate;
}

.skill-chant-vn[b-socn4oa7hy] {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    color: #fde047;
    text-shadow: 0 0 12px rgba(250, 204, 21, 0.8);
    letter-spacing: 2px;
    margin-top: 0.35rem;
}

@keyframes skillChantImpact-b-socn4oa7hy {
    0% { transform: translateX(-50%) scale(0.6); opacity: 0; filter: brightness(3); }
    50% { transform: translateX(-50%) scale(1.1); opacity: 1; }
    100% { transform: translateX(-50%) scale(1); opacity: 1; filter: brightness(1); }
}

@keyframes skillGlowPulse-b-socn4oa7hy {
    from { filter: drop-shadow(0 0 10px #f43f5e); }
    to { filter: drop-shadow(0 0 25px #ef4444) brightness(1.2); }
}

/* 6c. Boss Taunt / Reaction Speech Bubble (Nói sau khi vượt qua đợt) */
.boss-taunt-speech-bubble[b-socn4oa7hy] {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 125;
    background: linear-gradient(135deg, rgba(20, 5, 25, 0.95), rgba(10, 3, 15, 0.97));
    border: 2px solid #a855f7;
    border-radius: 18px;
    padding: 0.75rem 1.4rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.6), inset 0 0 15px rgba(244, 63, 94, 0.3);
    pointer-events: none;
    animation: tauntSlideDown-b-socn4oa7hy 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    max-width: 90vw;
}

.taunt-avatar-thumb[b-socn4oa7hy] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid #f43f5e;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 0 12px rgba(244, 63, 94, 0.7);
}

.taunt-avatar-thumb img[b-socn4oa7hy] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.taunt-speech-body[b-socn4oa7hy] {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.taunt-boss-title[b-socn4oa7hy] {
    font-size: 0.68rem;
    font-weight: 900;
    color: #f43f5e;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.taunt-chinese[b-socn4oa7hy] {
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
    font-family: 'Noto Serif SC', 'Songti SC', 'SimSun', serif;
    letter-spacing: 1.5px;
    text-shadow: 0 0 10px rgba(168, 85, 247, 0.9);
    margin-top: 0.1rem;
}

.taunt-vn[b-socn4oa7hy] {
    font-size: 0.84rem;
    font-style: italic;
    font-weight: 600;
    color: #e2e8f0;
    margin-top: 0.2rem;
}

@keyframes tauntSlideDown-b-socn4oa7hy {
    from { transform: translateX(-50%) translateY(-25px); opacity: 0; }
    to { transform: translateX(-50%) translateY(0); opacity: 1; }
}

/* 7. Minion overhead bubble, flying imp actor, and hit flash */
.falling-word.is-minion[b-socn4oa7hy] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-width: unset !important;
    overflow: visible;
}

/* Chữ hiện TRÊN ĐẦU LÍNH (Overhead Bubble) */
.minion-overhead-bubble[b-socn4oa7hy] {
    position: relative;
    background: linear-gradient(135deg, rgba(38, 12, 34, 0.96), rgba(18, 7, 24, 0.96));
    border: 2px solid #f43f5e;
    border-radius: 12px;
    padding: 0.35rem 0.85rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(244, 63, 94, 0.55), inset 0 0 12px rgba(168, 85, 247, 0.3);
    white-space: nowrap;
    z-index: 6;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
    min-width: 72px;
}

.minion-bubble-pointer[b-socn4oa7hy] {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #f43f5e;
    transition: border-top-color 0.15s;
}

.minion-mini-badge[b-socn4oa7hy] {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #ef4444, #991b1b);
    border: 1px solid #fca5a5;
    border-radius: 9999px;
    padding: 0.05rem 0.45rem;
    font-size: 0.6rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.5px;
    white-space: nowrap;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.8);
    pointer-events: none;
    animation: minionBadgePulse-b-socn4oa7hy 1.2s ease-in-out infinite alternate;
}

/* Thân lính (Tiểu quái) ở DƯỚI CHỮ */
.minion-actor-unit[b-socn4oa7hy] {
    position: relative;
    width: 75px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
    pointer-events: none;
}

.minion-sprite-img[b-socn4oa7hy] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 12px rgba(244, 63, 94, 0.85)) drop-shadow(0 0 22px rgba(168, 85, 247, 0.6));
    animation: minionFlyWobble-b-socn4oa7hy 1.6s ease-in-out infinite alternate;
    transition: filter 0.15s, transform 0.15s;
}

.minion-flight-aura[b-socn4oa7hy] {
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(244, 63, 94, 0.7) 0%, rgba(168, 85, 247, 0.4) 50%, transparent 80%);
    filter: blur(3px);
    animation: minionAuraPulse-b-socn4oa7hy 1.2s ease-in-out infinite alternate;
    pointer-events: none;
}

/* Target highlight when user types matching letters */
.falling-word.is-minion.targeted .minion-overhead-bubble[b-socn4oa7hy] {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 25px rgba(56, 189, 248, 0.9), inset 0 0 12px rgba(56, 189, 248, 0.4) !important;
    transform: scale(1.06);
}

.falling-word.is-minion.targeted .minion-bubble-pointer[b-socn4oa7hy] {
    border-top-color: #38bdf8 !important;
}

.falling-word.is-minion.targeted .minion-sprite-img[b-socn4oa7hy] {
    filter: drop-shadow(0 0 20px #38bdf8) brightness(1.25);
    transform: scale(1.08);
}

/* Hit Flash on damage */
.falling-word.is-minion.hit-flash .minion-overhead-bubble[b-socn4oa7hy] {
    background: #ffffff !important;
    border-color: #ffffff !important;
}

.falling-word.is-minion.hit-flash .minion-sprite-img[b-socn4oa7hy] {
    filter: brightness(4) drop-shadow(0 0 35px #ffffff) !important;
    transform: scale(1.2) !important;
}

/* Explosion when destroyed */
.falling-word.is-minion.destroyed[b-socn4oa7hy] {
    animation: minionVanish-b-socn4oa7hy 0.35s ease-out forwards !important;
}

@keyframes minionFlyWobble-b-socn4oa7hy {
    0% { transform: translateY(0) rotate(-2deg); }
    100% { transform: translateY(-5px) rotate(2deg); }
}

@keyframes minionAuraPulse-b-socn4oa7hy {
    from { transform: translateX(-50%) scale(0.9); opacity: 0.5; }
    to { transform: translateX(-50%) scale(1.15); opacity: 0.9; }
}

@keyframes minionBadgePulse-b-socn4oa7hy {
    from { transform: translateX(-50%) scale(0.95); }
    to { transform: translateX(-50%) scale(1.05); }
}

@keyframes minionVanish-b-socn4oa7hy {
    0% { transform: translateX(-50%) scale(1); opacity: 1; }
    50% { transform: translateX(-50%) scale(1.35); opacity: 0.85; filter: brightness(3); }
    100% { transform: translateX(-50%) scale(0.1); opacity: 0; }
}

.falling-word.hit-flash[b-socn4oa7hy] {
    background: #ffffff !important;
    color: #000000 !important;
    filter: brightness(2);
    transform: scale(1.1);
}

/* 8. Plants vs. Zombies Style Boss Battle Progress Bar */
.boss-pvz-progress-bar-wrap[b-socn4oa7hy] {
    width: 88%;
    max-width: 680px;
    margin: 0 auto 0.75rem auto;
    position: relative;
    z-index: 110;
}

.boss-pvz-track[b-socn4oa7hy] {
    position: relative;
    width: 100%;
    height: 16px;
    background: rgba(15, 23, 42, 0.95);
    border: 2px solid #475569;
    border-radius: 9999px;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8), 0 0 15px rgba(56, 189, 248, 0.2);
    margin-top: 14px;
}

.boss-pvz-fill[b-socn4oa7hy] {
    height: 100%;
    border-radius: 9999px;
    background: linear-gradient(90deg, #38bdf8 0%, #a855f7 50%, #f43f5e 100%);
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.8);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pvz-flag[b-socn4oa7hy] {
    position: absolute;
    top: -14px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 5;
    transition: all 0.3s ease;
    pointer-events: none;
}

.pvz-flag .flag-icon[b-socn4oa7hy] {
    font-size: 1.1rem;
    filter: grayscale(1) opacity(0.5);
    transition: all 0.3s ease;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.pvz-flag .flag-label[b-socn4oa7hy] {
    font-size: 0.62rem;
    font-weight: 800;
    color: #94a3b8;
    margin-top: -2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(15, 23, 42, 0.9);
    padding: 0 4px;
    border-radius: 4px;
}

.pvz-flag.flag-reached .flag-icon[b-socn4oa7hy] {
    filter: grayscale(0) opacity(1) drop-shadow(0 0 8px #f59e0b);
    transform: scale(1.25);
    animation: flagWave-b-socn4oa7hy 0.6s ease-in-out infinite alternate;
}

.pvz-flag.flag-reached .flag-label[b-socn4oa7hy] {
    color: #fbbf24;
    font-weight: 900;
}

.pvz-final-flag .flag-icon[b-socn4oa7hy] {
    font-size: 1.35rem;
}

@keyframes flagWave-b-socn4oa7hy {
    from { transform: scale(1.25) rotate(-5deg); }
    to { transform: scale(1.25) rotate(5deg); }
}

.pvz-runner[b-socn4oa7hy] {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #0f172a;
    border: 2px solid #38bdf8;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 12px #38bdf8;
    z-index: 6;
    transition: left 0.3s ease;
    pointer-events: none;
}

.pvz-runner .runner-icon[b-socn4oa7hy] {
    font-size: 0.8rem;
    transform: rotate(45deg);
}

.boss-pvz-meta[b-socn4oa7hy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
    padding: 0 4px;
}

.pvz-phase-title[b-socn4oa7hy] {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.82rem;
    font-weight: 900;
    color: #f8fafc;
    letter-spacing: 0.5px;
    text-shadow: 0 0 8px rgba(248, 250, 252, 0.4);
}

.pvz-percent-text[b-socn4oa7hy] {
    font-size: 0.72rem;
    font-weight: 800;
    color: #38bdf8;
    letter-spacing: 1px;
    font-family: 'Orbitron', sans-serif;
}

/* ==========================================================================
   DEV / TEST MODE: FULL STAGE UNLOCK STYLES
   ========================================================================== */
.test-mode-toggle-card[b-socn4oa7hy] {
    margin-top: 1rem;
    padding: 0.8rem 1rem;
    background: rgba(15, 23, 42, 0.7);
    border: 1px dashed rgba(245, 158, 11, 0.4);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.test-mode-toggle-card:hover[b-socn4oa7hy] {
    background: rgba(245, 158, 11, 0.1);
    border-color: #f59e0b;
}
/* /Components/Games/WordleGameModal.razor.rz.scp.css */
/* ==========================================================================
   MODAL 2 & 3: FULLSCREEN DESKTOP GAME OVERLAY (CLEAN MONOCHROME DARK VIEWPORT)
   ========================================================================== */
.fullscreen-game-overlay[b-z43v8ctuua] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #090d16;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    outline: none;
    user-select: none;
    animation: fadeIn-b-z43v8ctuua 0.2s ease;
    color: #f8fafc;
}

.fullscreen-game-overlay.hsk-game-overlay[b-z43v8ctuua] {
    background: #070a12;
}

/* Fixed Top Bar */
.fullscreen-topbar[b-z43v8ctuua] {
    height: 64px;
    background: #0f172a;
    border-bottom: 1px solid #1e293b;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    flex-shrink: 0;
    z-index: 100;
}

.fullscreen-topbar.hsk-topbar[b-z43v8ctuua] {
    border-bottom-color: #1e293b;
}

.topbar-left[b-z43v8ctuua] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.fs-game-badge[b-z43v8ctuua] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-weight: 800;
    font-size: 0.78rem;
    padding: 0.3rem 0.75rem;
    border-radius: 9999px;
    letter-spacing: 0.06em;
}

.fs-game-badge.hsk-badge-pill[b-z43v8ctuua] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.fs-game-title[b-z43v8ctuua] {
    font-size: 1.1rem;
    font-weight: 800;
    color: #f8fafc;
}

.topbar-center[b-z43v8ctuua] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.fs-stat-pill[b-z43v8ctuua] {
    background: #1e293b;
    border: 1px solid #334155;
    padding: 0.35rem 0.85rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #f8fafc;
}

.topbar-right[b-z43v8ctuua] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-fs-tool[b-z43v8ctuua] {
    background: #1e293b;
    border: 1px solid #334155;
    color: #cbd5e1;
    padding: 0.45rem 0.95rem;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.btn-fs-tool:hover[b-z43v8ctuua] {
    background: #334155;
    color: #ffffff;
}

.btn-fs-exit[b-z43v8ctuua] {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #f87171;
    padding: 0.45rem 1.15rem;
    border-radius: 10px;
    font-weight: 800;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
}

.btn-fs-exit:hover[b-z43v8ctuua] {
    background: #ef4444;
    color: #ffffff;
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.5);
    transform: translateY(-1px);
}

/* ==========================================================================
   WORDLE FULLSCREEN BODY & 2-COLUMN DESKTOP LAYOUT
   ========================================================================== */
.fullscreen-game-body[b-z43v8ctuua] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    position: relative;
}

.fs-loading-box[b-z43v8ctuua] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    color: #94a3b8;
}

.wordle-desktop-layout[b-z43v8ctuua] {
    display: grid;
    grid-template-columns: 370px 490px;
    gap: 2.5rem;
    max-width: 940px;
    width: 100%;
    align-items: start;
    margin: auto;
}

@media (max-width: 900px) {
    .wordle-desktop-layout[b-z43v8ctuua] {
        grid-template-columns: 1fr;
        max-width: 500px;
        gap: 1.5rem;
    }
}

/* Wordle Clue Column (Left) */
.wordle-clue-column[b-z43v8ctuua] {
    width: 100%;
}

.clue-panel[b-z43v8ctuua] {
    background: #111827;
    border: 1px solid #1f293d;
    border-radius: 20px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.clue-tags-row[b-z43v8ctuua] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.badge-pos[b-z43v8ctuua] {
    background: #1f2937;
    color: #34d399;
    font-weight: 800;
    font-size: 0.72rem;
    padding: 0.25rem 0.65rem;
    border-radius: 6px;
    border: 1px solid #374151;
}

.badge-cefr[b-z43v8ctuua] {
    background: #1f2937;
    color: #38bdf8;
    font-weight: 800;
    font-size: 0.72rem;
    padding: 0.25rem 0.65rem;
    border-radius: 6px;
    border: 1px solid #374151;
}

.badge-topic[b-z43v8ctuua], .badge-len[b-z43v8ctuua] {
    background: #1f2937;
    color: #cbd5e1;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.25rem 0.65rem;
    border-radius: 6px;
    border: 1px solid #374151;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.clue-meaning-card[b-z43v8ctuua] {
    background: #1e293b;
    border: 1px solid #334155;
    border-left: 4px solid #10b981;
    border-radius: 14px;
    padding: 1rem 1.25rem;
}

.meaning-lbl[b-z43v8ctuua] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #94a3b8;
}

.meaning-txt[b-z43v8ctuua] {
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
    margin-top: 0.35rem;
}

.hints-active-box[b-z43v8ctuua] {
    background: rgba(245, 158, 11, 0.1);
    border: 1px dashed rgba(245, 158, 11, 0.45);
    border-radius: 12px;
    padding: 0.65rem 0.95rem;
    font-size: 0.82rem;
    color: #fbbf24;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.hint-char-chip[b-z43v8ctuua] {
    background: rgba(245, 158, 11, 0.25);
    border: 1px solid rgba(245, 158, 11, 0.5);
    color: #fef08a;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    font-size: 0.82rem;
}

.clue-sentence-card[b-z43v8ctuua] {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.sent-lbl[b-z43v8ctuua] {
    font-size: 0.82rem;
    font-weight: 700;
    color: #38bdf8;
}

.sent-en-txt[b-z43v8ctuua] {
    font-size: 0.96rem;
    line-height: 1.55;
    color: #f8fafc;
    font-style: italic;
}

[b-z43v8ctuua] .blank-target {
    font-weight: 800;
    color: #fbbf24;
    text-decoration: underline;
    font-style: normal;
    letter-spacing: 0.12em;
}

.sent-vi-txt[b-z43v8ctuua] {
    font-size: 0.85rem;
    color: #94a3b8;
    line-height: 1.45;
    border-top: 1px dashed #334155;
    padding-top: 0.55rem;
}

.btn-toggle-trans[b-z43v8ctuua] {
    background: transparent;
    border: none;
    color: #818cf8;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0;
}

.btn-toggle-trans:hover[b-z43v8ctuua] {
    text-decoration: underline;
}

.clue-helper-actions[b-z43v8ctuua] {
    display: flex;
    gap: 0.75rem;
}

.btn-action-hint[b-z43v8ctuua], .btn-action-sound[b-z43v8ctuua] {
    flex: 1;
    padding: 0.7rem 1rem;
    border-radius: 12px;
    background: #1e293b;
    border: 1px solid #334155;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

.btn-action-hint[b-z43v8ctuua] {
    color: #fbbf24;
}

.btn-action-hint:hover:not(:disabled)[b-z43v8ctuua] {
    background: rgba(245, 158, 11, 0.15);
    border-color: #f59e0b;
}

.btn-action-hint:disabled[b-z43v8ctuua] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-action-sound[b-z43v8ctuua] {
    color: #38bdf8;
}

.btn-action-sound:hover[b-z43v8ctuua] {
    background: rgba(56, 189, 248, 0.15);
    border-color: #38bdf8;
}

/* Wordle Board Column (Right) */
.wordle-board-column[b-z43v8ctuua] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.15rem;
    width: 100%;
}

.fullscreen-grid-wrapper[b-z43v8ctuua] {
    display: flex;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.wordle-grid[b-z43v8ctuua] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wordle-row[b-z43v8ctuua] {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.wordle-row.shake[b-z43v8ctuua] {
    animation: shake-b-z43v8ctuua 0.4s ease;
}

.wordle-cell[b-z43v8ctuua] {
    width: 52px;
    height: 52px;
    border: 2px solid #374151;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    font-weight: 800;
    color: #ffffff;
    background: #111827;
    text-transform: uppercase;
    user-select: none;
    transition: all 0.15s ease;
}

@media (max-width: 480px) {
    .wordle-cell[b-z43v8ctuua] {
        width: 40px;
        height: 40px;
        font-size: 1.35rem;
    }
}

.wordle-cell.pop[b-z43v8ctuua] {
    animation: pop-b-z43v8ctuua 0.12s ease-in-out;
    border-color: #9ca3af;
    background: #1f2937;
}

.wordle-cell.correct[b-z43v8ctuua] {
    background: #10b981;
    border-color: #10b981;
    color: #ffffff;
    animation: flip-b-z43v8ctuua 0.4s ease;
}

.wordle-cell.present[b-z43v8ctuua] {
    background: #f59e0b;
    border-color: #f59e0b;
    color: #ffffff;
    animation: flip-b-z43v8ctuua 0.4s ease;
}

.wordle-cell.absent[b-z43v8ctuua] {
    background: #1f2937;
    border-color: #1f2937;
    color: #6b7280;
    animation: flip-b-z43v8ctuua 0.4s ease;
}

/* Toast Alert */
.fs-toast-alert[b-z43v8ctuua] {
    background: #ef4444;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.55rem 1.35rem;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
    animation: fadeIn-b-z43v8ctuua 0.2s ease;
}

/* Virtual Keyboard */
.fullscreen-keyboard[b-z43v8ctuua] {
    width: 100%;
    max-width: 490px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.keyboard-row[b-z43v8ctuua] {
    display: flex;
    justify-content: center;
    gap: 5px;
}

.key-btn[b-z43v8ctuua] {
    height: 48px;
    min-width: 32px;
    flex: 1;
    max-width: 44px;
    border: none;
    border-radius: 8px;
    background: #1f2937;
    color: #f8fafc;
    font-weight: 800;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    transition: all 0.15s ease;
    border: 1px solid #374151;
}

.key-btn:hover[b-z43v8ctuua] {
    background: #374151;
    color: #ffffff;
}

.key-enter[b-z43v8ctuua], .key-backspace[b-z43v8ctuua] {
    flex: 1.5;
    max-width: 65px;
    font-size: 0.8rem;
}

.key-btn.correct[b-z43v8ctuua] { background: #10b981; border-color: #10b981; color: #ffffff; }
.key-btn.present[b-z43v8ctuua] { background: #f59e0b; border-color: #f59e0b; color: #ffffff; }
.key-btn.absent[b-z43v8ctuua] { background: #090d16; border-color: #1f2937; color: #475569; opacity: 0.45; }

/* Wordle Result Card inside Fullscreen */
.fs-modal-backdrop[b-z43v8ctuua] {
    position: absolute;
    inset: 0;
    background: rgba(3, 7, 18, 0.85);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 1.25rem;
    animation: fadeIn-b-z43v8ctuua 0.25s ease;
}

.fs-result-card[b-z43v8ctuua] {
    background: #0f172a;
    border: 2px solid #334155;
    border-radius: 22px;
    max-width: 480px;
    width: 100%;
    padding: 2.25rem;
    text-align: center;
    box-shadow: 0 25px 65px rgba(0, 0, 0, 0.85);
    animation: scaleIn-b-z43v8ctuua 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.fs-result-card.won[b-z43v8ctuua] {
    border-color: #10b981;
    box-shadow: 0 25px 65px rgba(0, 0, 0, 0.85), 0 0 35px rgba(16, 185, 129, 0.25);
}

.fs-result-card.lost[b-z43v8ctuua] {
    border-color: #f59e0b;
    box-shadow: 0 25px 65px rgba(0, 0, 0, 0.85), 0 0 35px rgba(245, 158, 11, 0.25);
}

.res-trophy[b-z43v8ctuua] {
    font-size: 3.2rem;
    display: block;
    margin-bottom: 0.4rem;
}

.fs-result-card h2[b-z43v8ctuua] {
    font-size: 1.35rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 0.35rem 0;
}

.res-subtitle[b-z43v8ctuua] {
    font-size: 0.9rem;
    color: #94a3b8;
    margin: 0 0 1.35rem 0;
}

.res-summary-box[b-z43v8ctuua] {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 14px;
    padding: 1.25rem;
    text-align: left;
    margin-bottom: 1.5rem;
}

.res-word-row[b-z43v8ctuua] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.rw-word[b-z43v8ctuua] {
    font-size: 1.5rem;
    font-weight: 800;
    color: #38bdf8;
    letter-spacing: 0.05em;
}

.btn-res-audio[b-z43v8ctuua] {
    background: none;
    border: none;
    color: #818cf8;
    font-size: 1.25rem;
    cursor: pointer;
    transition: color 0.2s;
}

.btn-res-audio:hover[b-z43v8ctuua] {
    color: #a5b4fc;
}

.rw-phonetic[b-z43v8ctuua] {
    font-size: 0.85rem;
    color: #94a3b8;
    font-family: monospace;
    margin: 0.25rem 0 0.5rem 0;
}

.rw-meaning[b-z43v8ctuua] {
    font-size: 0.95rem;
    color: #e2e8f0;
    margin-bottom: 0.6rem;
}

.rw-example[b-z43v8ctuua] {
    background: rgba(15, 23, 42, 0.7);
    border-left: 3px solid #6366f1;
    padding: 0.55rem 0.85rem;
    border-radius: 8px;
    font-size: 0.85rem;
}

.ex-en[b-z43v8ctuua] {
    color: #cbd5e1;
    font-style: italic;
}

.ex-vi[b-z43v8ctuua] {
    color: #94a3b8;
    margin-top: 0.25rem;
}

.res-action-buttons[b-z43v8ctuua] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.btn-res-next-big[b-z43v8ctuua] {
    padding: 0.9rem;
    background: #0f172a;
    border: 1px solid #0f172a;
    border-radius: 14px;
    color: #ffffff;
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s;
}

.btn-res-next-big:hover[b-z43v8ctuua] {
    background: #1e293b;
    border-color: #1e293b;
    transform: translateY(-2px);
}

.btn-res-exit-sub[b-z43v8ctuua] {
    padding: 0.8rem;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 14px;
    color: #cbd5e1;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-res-exit-sub:hover[b-z43v8ctuua] {
    background: #334155;
    color: #ffffff;
}


/* ==========================================================================
   ANIMATIONS & SPINNERS
   ========================================================================== */
@keyframes fadeIn-b-z43v8ctuua {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes scaleIn-b-z43v8ctuua {
    from { transform: scale(0.94); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes pop-b-z43v8ctuua {
    0% { transform: scale(0.9); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1.0); }
}

@keyframes flip-b-z43v8ctuua {
    0% { transform: rotateX(0deg); }
    50% { transform: rotateX(90deg); }
    100% { transform: rotateX(0deg); }
}

@keyframes shake-b-z43v8ctuua {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

.spinner[b-z43v8ctuua] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-top-color: #0f172a;
    border-radius: 50%;
    animation: spin-b-z43v8ctuua 0.8s linear infinite;
}

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


/* ==========================================================================
   QUANTUM CIPHER / BẺ KHÓA BOM LƯỢNG TỬ (BRIEFCASE UI)
   ========================================================================== */
.quantum-game-overlay[b-z43v8ctuua] {
    background: #04070d;
}

.quantum-topbar[b-z43v8ctuua] {
    background: rgba(13, 20, 32, 0.94);
    border-bottom: 1px solid rgba(0, 240, 255, 0.4);
    box-shadow: 0 4px 20px rgba(0, 240, 255, 0.15);
}

.quantum-badge[b-z43v8ctuua] {
    background: rgba(0, 240, 255, 0.15);
    border: 1px solid #00f0ff;
    color: #00f0ff;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.6);
}

.quantum-topbar .mode-tag[b-z43v8ctuua] {
    font-size: 0.68rem;
    background: rgba(239, 68, 68, 0.25);
    border: 1px solid #ef4444;
    color: #ef4444;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 800;
    letter-spacing: 1.5px;
    animation: pulse-red 1.2s infinite;
}

.quantum-mode-selector[b-z43v8ctuua] {
    display: flex;
    align-items: center;
    background: #070b13;
    border: 1px solid rgba(56, 189, 248, 0.4);
    border-radius: 6px;
    padding: 2px;
    gap: 2px;
}

.quantum-mode-selector .mode-lbl[b-z43v8ctuua] {
    font-size: 0.68rem;
    color: #94a3b8;
    padding: 0 4px;
    font-weight: 700;
}

.quantum-mode-selector .btn-mode[b-z43v8ctuua] {
    background: transparent;
    border: none;
    color: #7dd3fc;
    padding: 4px 9px;
    border-radius: 4px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.70rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s;
}

.quantum-mode-selector .btn-mode:hover[b-z43v8ctuua] { color: #fff; }
.quantum-mode-selector .btn-mode.active[b-z43v8ctuua] {
    background: #00f0ff;
    color: #020617;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.6);
}

.quantum-body[b-z43v8ctuua] {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* MAIN BRIEFCASE WORKSPACE (1024x573 aspect ratio) */
.stage-box[b-z43v8ctuua] {
    position: relative;
    width: 100%;
    max-width: 1380px;
    aspect-ratio: 1024 / 573;
    background: #020408;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.9), 0 0 45px rgba(0, 240, 255, 0.2);
    border: 2px solid rgba(0, 240, 255, 0.4);
}

.briefcase-bg[b-z43v8ctuua] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    z-index: 1;
}

.interactive-layer[b-z43v8ctuua] {
    position: absolute;
    inset: 0;
    z-index: 10;
}

/* ====================================================
   LEFT DOOR: TACTICAL PHONE HUD
   ==================================================== */
.phone-dock-left[b-z43v8ctuua] {
    position: absolute;
    left: 2.93%;
    top: 7.85%;
    width: 21.0%;
    height: 83.77%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    z-index: 15;
}

.phone-casing[b-z43v8ctuua] {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #16202e 0%, #0d1520 100%);
    border: 2px solid #2d3e52;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), 0 0 15px rgba(0, 240, 255, 0.2), inset 0 1px 2px rgba(255, 255, 255, 0.15);
    display: flex;
    flex-direction: column;
    padding: 8px 6px;
    overflow: hidden;
}

.phone-screen[b-z43v8ctuua] {
    position: relative;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 30%, #07192e 0%, #030a14 100%);
    border: 1.5px solid rgba(0, 240, 255, 0.55);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    padding: 8px 8px;
    overflow: hidden;
    box-shadow: inset 0 0 25px rgba(0, 240, 255, 0.2);
}

.phone-screen[b-z43v8ctuua]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(0, 240, 255, 0.04) 50%, rgba(0, 0, 0, 0.3) 50%);
    background-size: 100% 3px;
    pointer-events: none;
    z-index: 5;
}

.screen-topbar[b-z43v8ctuua] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(56, 189, 248, 0.35);
    padding-bottom: 4px;
    margin-bottom: 6px;
    z-index: 10;
}
.screen-title[b-z43v8ctuua] {
    font-family: 'Orbitron', monospace;
    font-size: clamp(7.5px, 0.72vw, 10.5px);
    color: #38bdf8;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 4px;
    letter-spacing: 0.5px;
    text-shadow: 0 0 6px rgba(56, 189, 248, 0.8);
}
.screen-title .dot[b-z43v8ctuua] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #00f0ff;
    box-shadow: 0 0 5px #00f0ff;
    animation: pulse-cyan-b-z43v8ctuua 1s infinite alternate;
}
@keyframes pulse-cyan-b-z43v8ctuua { 0% { opacity: 0.4; } 100% { opacity: 1; } }

.screen-stat[b-z43v8ctuua] {
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(6.5px, 0.6vw, 9px);
    color: #94a3b8;
}

/* Meaning Box */
.clue-viet-box[b-z43v8ctuua] {
    background: rgba(14, 165, 233, 0.12);
    border-left: 2.5px solid #00f0ff;
    border-radius: 4px;
    padding: 6px 8px;
    margin-bottom: 6px;
    z-index: 10;
}
.clue-viet-label[b-z43v8ctuua] {
    font-size: clamp(6.5px, 0.62vw, 8.5px);
    color: #7dd3fc;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}
.clue-viet-text[b-z43v8ctuua] {
    font-size: clamp(10px, 0.88vw, 13px);
    font-weight: 700;
    color: #f0fdf4;
    line-height: 1.3;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.35);
}

/* Sentence Box */
.clue-sentence-box[b-z43v8ctuua] {
    background: rgba(2, 6, 23, 0.65);
    border: 1px dashed rgba(56, 189, 248, 0.4);
    border-radius: 4px;
    padding: 6px 8px;
    margin-bottom: 6px;
    z-index: 10;
}
.clue-sentence-label[b-z43v8ctuua] {
    font-size: clamp(6.5px, 0.62vw, 8.5px);
    color: #94a3b8;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}
.clue-sentence-text[b-z43v8ctuua] {
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(8px, 0.75vw, 11px);
    color: #cbd5e1;
    line-height: 1.35;
}
.clue-sentence-text[b-z43v8ctuua]  .blank-target {
    color: #facc15;
    font-weight: 800;
    text-shadow: 0 0 8px rgba(250, 204, 21, 0.6);
    border-bottom: 1.5px solid #facc15;
    padding: 0 2px;
}
.sent-vi-trans[b-z43v8ctuua] {
    font-size: clamp(7.5px, 0.7vw, 10px);
    color: #94a3b8;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dashed rgba(56, 189, 248, 0.25);
}

/* Action Buttons inside Phone Screen */
.phone-tools[b-z43v8ctuua] {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 10;
}
.btn-screen-act[b-z43v8ctuua] {
    background: rgba(14, 165, 233, 0.18);
    border: 1px solid rgba(56, 189, 248, 0.45);
    color: #bae6fd;
    padding: 5px 8px;
    border-radius: 4px;
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(7px, 0.68vw, 9.5px);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.btn-screen-act:hover[b-z43v8ctuua] {
    background: #00f0ff;
    color: #020617;
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.6);
    transform: translateY(-1px);
}
.btn-screen-act.btn-hint-first[b-z43v8ctuua] {
    border-color: rgba(250, 204, 21, 0.6);
    color: #fef08a;
    background: rgba(234, 179, 8, 0.18);
}
.btn-screen-act.btn-hint-first:hover[b-z43v8ctuua] {
    background: #facc15;
    color: #000;
    box-shadow: 0 0 12px rgba(250, 204, 21, 0.6);
}

/* ====================================================
   CENTER: TIMER + PLASMA CORE + 2-ROW TILES
   ==================================================== */
.center-hud-timer[b-z43v8ctuua] {
    position: absolute;
    left: 28.5%;
    top: 13.8%;
    width: 12.2%;
    height: 14.5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: rotate(-13.5deg) skewX(-5deg);
    pointer-events: none;
    transition: all 0.2s;
    z-index: 15;
}
.center-hud-timer .timer-val[b-z43v8ctuua] {
    font-family: 'Orbitron', monospace;
    font-size: clamp(18px, 2.2vw, 38px);
    font-weight: 900;
    color: #ff2233;
    text-shadow: 0 0 12px rgba(255, 34, 51, 0.95), 0 0 26px rgba(255, 34, 51, 0.6);
    letter-spacing: 3px;
}
.center-hud-timer.urgent-30 .timer-val[b-z43v8ctuua] {
    color: #ff3344;
    animation: pulse-warn 0.8s infinite alternate;
}
.center-hud-timer.urgent-20 .timer-val[b-z43v8ctuua] {
    color: #ff1133;
    animation: pulse-fast 0.45s infinite alternate;
}
.center-hud-timer.urgent-10 .timer-val[b-z43v8ctuua] {
    color: #ff0011;
    animation: pulse-critical 0.22s infinite alternate;
    text-shadow: 0 0 16px #ff0000, 0 0 35px #ff0055;
}

/* Plasma Reactor Core Spark Emitter */
.plasma-reactor-spark[b-z43v8ctuua] {
    position: absolute;
    left: 38.57%;
    top: 27.05%;
    width: 22.95%;
    height: 15.71%;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 12;
}
.plasma-reactor-spark img[b-z43v8ctuua] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 12px #00f0ff);
    opacity: 0.92;
    animation: pulse-core 0.8s infinite alternate;
}

/* 2-ROW CIPHER TILES ON CENTER BRUSHED TITANIUM PLATES */
.plate-row1-lock[b-z43v8ctuua] {
    position: absolute;
    left: 28.32%;
    top: 58.46%;
    width: 42.97%;
    height: 12.22%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(3px, 0.55vw, 9px);
    padding: 2px 10px;
    z-index: 15;
}

.plate-row2-input[b-z43v8ctuua] {
    position: absolute;
    left: 28.32%;
    top: 71.55%;
    width: 42.97%;
    height: 19.20%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(3px, 0.55vw, 9px);
    padding: 4px 10px;
    z-index: 15;
}

.row-deck-badge[b-z43v8ctuua] {
    position: absolute;
    left: 10px;
    font-family: 'Orbitron', monospace;
    font-size: clamp(7.5px, 0.7vw, 10.5px);
    font-weight: 900;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.row-deck-badge.badge-lock[b-z43v8ctuua] {
    color: #22c55e;
    text-shadow: 0 0 8px rgba(34, 197, 94, 0.7);
}
.row-deck-badge.badge-input[b-z43v8ctuua] {
    color: #00f0ff;
    text-shadow: 0 0 8px rgba(0, 240, 255, 0.6);
}
.row-deck-badge .led-dot[b-z43v8ctuua] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.badge-lock .led-dot[b-z43v8ctuua] { background: #22c55e; box-shadow: 0 0 6px #22c55e; }
.badge-input .led-dot[b-z43v8ctuua] { background: #00f0ff; box-shadow: 0 0 6px #00f0ff; }

/* Outer Socket: Dark Recessed Metal */
.tile-socket[b-z43v8ctuua] {
    background: #0d131c;
    padding: clamp(1.5px, 0.25vw, 3px);
    border-radius: 6px;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.9), 0 1px 1px rgba(255, 255, 255, 0.15);
    border: 1px solid #1e2838;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 1 auto;
}

/* 3D Keycap */
.tile-button[b-z43v8ctuua] {
    width: clamp(24px, 3.2vw, 44px);
    height: clamp(24px, 3.2vw, 44px);
    background: linear-gradient(180deg, #2a3545 0%, #151d28 100%);
    border: 1.5px solid #3d4c60;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Orbitron', monospace;
    font-size: clamp(13px, 1.7vw, 24px);
    font-weight: 900;
    color: #475569;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.65), inset 0 1px 1px rgba(255, 255, 255, 0.25);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

.tile-button.locked-green[b-z43v8ctuua] {
    background: linear-gradient(180deg, #15803d 0%, #166534 100%) !important;
    border-color: #4ade80 !important;
    color: #ffffff !important;
    box-shadow: 0 0 16px rgba(34, 197, 94, 0.9), inset 0 1px 2px rgba(255, 255, 255, 0.6) !important;
    text-shadow: 0 0 8px #ffffff, 0 0 16px #22c55e !important;
    animation: snap-lock 0.35s ease;
}

.tile-button.has-char[b-z43v8ctuua] {
    color: #00f0ff;
    border-color: #00f0ff;
    text-shadow: 0 0 10px #00f0ff, 0 0 20px rgba(0, 240, 255, 0.6);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7), 0 0 10px rgba(0, 240, 255, 0.6);
    transform: translateY(-2px);
}
.tile-button.cursor-active[b-z43v8ctuua] {
    border-color: #facc15;
    box-shadow: 0 0 12px rgba(250, 204, 21, 0.6);
    animation: cursor-pulse 0.8s infinite alternate;
}

/* ====================================================
   RIGHT DOOR: 6 SLIM PIN & KEYBOARD
   ==================================================== */
.right-door-pin-tray[b-z43v8ctuua] {
    position: absolute;
    left: 77.15%;
    top: 14.66%;
    width: 16.02%;
    height: 12.91%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 4px 5px;
    z-index: 15;
}

.power-rod[b-z43v8ctuua] {
    flex: 1;
    height: 82%;
    background: linear-gradient(180deg, #86efac 0%, #22c55e 50%, #15803d 100%);
    border-radius: 5px;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.8), inset 0 0 4px rgba(255, 255, 255, 0.6);
    transition: all 0.3s ease;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.power-rod[b-z43v8ctuua]::after {
    content: '';
    position: absolute;
    inset: 1.5px;
    background: linear-gradient(90deg, rgba(255,255,255,0.6) 0%, transparent 60%);
    border-radius: 3px;
    pointer-events: none;
}

.rod-bolt[b-z43v8ctuua] {
    position: absolute;
    font-size: clamp(9px, 0.95vw, 14px);
    color: #ffffff;
    text-shadow: 0 0 6px #ffffff, 0 0 12px #22c55e;
    font-weight: 900;
    z-index: 5;
    transition: all 0.3s;
    pointer-events: none;
    line-height: 1;
    animation: pulse-bolt 1.2s infinite alternate;
}

.power-rod.blown[b-z43v8ctuua] {
    background: #141b26 !important;
    box-shadow: none !important;
    border: 1px solid #283548;
    opacity: 0.32;
}
.power-rod.blown[b-z43v8ctuua]::after { display: none; }
.power-rod.blown .rod-bolt[b-z43v8ctuua] {
    color: #475569 !important;
    text-shadow: none !important;
    opacity: 0.3;
    animation: none;
}

.spark-rod-burst[b-z43v8ctuua] {
    position: absolute;
    width: 80px;
    height: 80px;
    pointer-events: none;
    z-index: 100;
    transform: translate(-50%, -50%);
    display: none;
}
.spark-rod-burst img[b-z43v8ctuua] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 16px #00f0ff);
}

/* Virtual Mechanical Keyboard */
.right-door-keyboard[b-z43v8ctuua] {
    position: absolute;
    left: 76.5%;
    top: 47.5%;
    width: 17.5%;
    height: 41.0%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 4px;
    padding: 6px 4px;
    background: rgba(8, 14, 22, 0.88);
    border: 1px solid rgba(45, 65, 88, 0.7);
    border-radius: 8px;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.75), 0 4px 15px rgba(0, 0, 0, 0.5);
    z-index: 15;
}
.kb-row[b-z43v8ctuua] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
    flex: 1;
    min-height: 0;
}
.kb-key[b-z43v8ctuua] {
    flex: 1;
    height: 100%;
    background: linear-gradient(180deg, #1e2837 0%, #111722 100%);
    border: 1px solid rgba(71, 85, 105, 0.5);
    border-radius: 3px;
    color: #cbd5e1;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(8.5px, 0.9vw, 13px);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.12s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    padding: 0;
}
.kb-key:hover[b-z43v8ctuua] {
    background: #27354a;
    border-color: #00f0ff;
    color: #00f0ff;
    box-shadow: 0 0 8px rgba(0, 240, 255, 0.4);
    transform: translateY(-1px);
}
.kb-key:active[b-z43v8ctuua] { transform: translateY(1px); }
.kb-key.action-key[b-z43v8ctuua] {
    flex: 1.5;
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(7px, 0.7vw, 10px);
    background: linear-gradient(180deg, #243347 0%, #141f2d 100%);
}
.kb-key.action-key.enter-key[b-z43v8ctuua] {
    border-color: rgba(34, 197, 94, 0.5);
    color: #86efac;
    background: linear-gradient(180deg, #14532d 0%, #0f351f 100%);
}
.kb-key.action-key.enter-key:hover[b-z43v8ctuua] {
    background: #15803d;
    color: #fff;
    border-color: #22c55e;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.6);
}
.kb-key.action-key.del-key[b-z43v8ctuua] {
    border-color: rgba(239, 68, 68, 0.5);
    color: #fca5a5;
    background: linear-gradient(180deg, #7f1d1d 0%, #450a0a 100%);
}
.kb-key.action-key.del-key:hover[b-z43v8ctuua] {
    background: #b91c1c;
    color: #fff;
    border-color: #ef4444;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.6);
}

.kb-key.state-green[b-z43v8ctuua] {
    background: #15803d !important;
    color: #ffffff !important;
    border-color: #4ade80 !important;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.6) !important;
}
.kb-key.state-yellow[b-z43v8ctuua] {
    background: #a16207 !important;
    color: #ffffff !important;
    border-color: #facc15 !important;
    box-shadow: 0 0 8px rgba(250, 204, 21, 0.6) !important;
}
.kb-key.state-dark[b-z43v8ctuua] {
    background: #090d14 !important;
    color: #334155 !important;
    border-color: #1a222d !important;
    box-shadow: none !important;
    opacity: 0.35;
}

.hud-toast[b-z43v8ctuua] {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid #facc15;
    color: #facc15;
    padding: 6px 16px;
    border-radius: 6px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    box-shadow: 0 0 15px rgba(250, 204, 21, 0.6);
    z-index: 500;
    animation: slide-toast 0.25s ease;
}

/* Shake Animation */
.shake-deck[b-z43v8ctuua] {
    animation: shake-b-z43v8ctuua 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* Result Modals */
.overlay-modal[b-z43v8ctuua] {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.88);
    backdrop-filter: blur(8px);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
}
.overlay-modal.show[b-z43v8ctuua] { display: flex; }

.modal-card[b-z43v8ctuua] {
    background: linear-gradient(180deg, #0f1a2a 0%, #080f19 100%);
    border: 2px solid #00f0ff;
    border-radius: 12px;
    padding: 24px 30px;
    max-width: 480px;
    width: 90%;
    text-align: center;
    box-shadow: 0 0 40px rgba(0, 240, 255, 0.4);
    animation: pop-modal 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal-card.victory[b-z43v8ctuua] { border-color: #22c55e; box-shadow: 0 0 40px rgba(34, 197, 94, 0.4); }
.modal-card.defeat[b-z43v8ctuua] { border-color: #ff2233; box-shadow: 0 0 40px rgba(255, 34, 51, 0.5); }

.modal-title[b-z43v8ctuua] {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.4rem;
    font-weight: 900;
    margin-bottom: 12px;
    letter-spacing: 1px;
}
.modal-card.victory .modal-title[b-z43v8ctuua] { color: #22c55e; text-shadow: 0 0 10px rgba(34, 197, 94, 0.7); }
.modal-card.defeat .modal-title[b-z43v8ctuua] { color: #ff2233; text-shadow: 0 0 10px rgba(255, 34, 51, 0.7); }

.modal-word[b-z43v8ctuua] {
    font-family: 'Orbitron', monospace;
    font-size: 2.1rem;
    color: #ffffff;
    letter-spacing: 4px;
    margin-bottom: 6px;
    text-shadow: 0 0 15px rgba(0, 240, 255, 0.6);
}
.modal-desc[b-z43v8ctuua] {
    font-size: 0.95rem;
    color: #cbd5e1;
    margin-bottom: 16px;
    line-height: 1.4;
}
.modal-stats[b-z43v8ctuua] {
    display: flex;
    justify-content: space-around;
    background: rgba(2, 6, 23, 0.6);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 20px;
}
.modal-stats .stat-item .stat-val[b-z43v8ctuua] {
    font-family: 'Orbitron', monospace;
    font-size: 1.25rem;
    color: #00f0ff;
    font-weight: 800;
}
.modal-stats .stat-item .stat-lbl[b-z43v8ctuua] {
    font-size: 0.7rem;
    color: #94a3b8;
    text-transform: uppercase;
}
.modal-btn[b-z43v8ctuua] {
    background: #22c55e;
    color: #020617;
    border: none;
    padding: 10px 24px;
    border-radius: 6px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.7);
}
.modal-btn:hover[b-z43v8ctuua] { background: #4ade80; transform: translateY(-2px); }
.modal-btn.defeat-btn[b-z43v8ctuua] {
    background: #ff2233;
    color: #ffffff;
    box-shadow: 0 0 15px rgba(255, 34, 51, 0.7);
}
.modal-btn.defeat-btn:hover[b-z43v8ctuua] { background: #ef4444; }


/* ====================================================
   INTERACTIVE SPOTLIGHT TUTORIAL & TYPEWRITER ENGINE
   ==================================================== */
.tutorial-overlay[b-z43v8ctuua] {
    position: absolute;
    inset: 0;
    z-index: 2000;
    display: none;
    overflow: hidden;
    pointer-events: auto;
}
.tutorial-overlay.show[b-z43v8ctuua] { display: block; }

/* The glowing spotlight cutout window */
.tutorial-spotlight-box[b-z43v8ctuua] {
    position: absolute;
    box-shadow: 0 0 0 9999px rgba(2, 6, 16, 0.88), 0 0 25px rgba(0, 240, 255, 0.7);
    border: 2px solid var(--cyan-neon, #00f0ff);
    border-radius: 12px;
    transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    pointer-events: none;
    z-index: 2010;
}
.tutorial-spotlight-box[b-z43v8ctuua]::after {
    content: '';
    position: absolute;
    inset: -4px;
    border: 1px dashed rgba(0, 240, 255, 0.5);
    border-radius: 14px;
    animation: rotate-dash 10s linear infinite;
}

/* Briefing Dialog Card */
.tutorial-card[b-z43v8ctuua] {
    position: absolute;
    width: clamp(280px, 32vw, 420px);
    background: linear-gradient(180deg, rgba(15, 26, 42, 0.98) 0%, rgba(8, 15, 25, 0.98) 100%);
    border: 2px solid var(--cyan-neon, #00f0ff);
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.9), 0 0 25px rgba(0, 240, 255, 0.35);
    z-index: 2020;
    cursor: pointer;
    transition: top 0.35s ease, left 0.35s ease;
    backdrop-filter: blur(12px);
}

.tut-header[b-z43v8ctuua] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(56, 189, 248, 0.3);
    padding-bottom: 6px;
}
.tut-step-tag[b-z43v8ctuua] {
    font-family: 'Orbitron', monospace;
    font-size: 0.72rem;
    color: #38bdf8;
    font-weight: 800;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.tut-step-dots[b-z43v8ctuua] {
    display: flex;
    gap: 4px;
}
.tut-dot[b-z43v8ctuua] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #334155;
    transition: all 0.2s;
}
.tut-dot.active[b-z43v8ctuua] {
    background: var(--cyan-neon, #00f0ff);
    box-shadow: 0 0 6px var(--cyan-neon, #00f0ff);
}

.tut-title[b-z43v8ctuua] {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.95rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.tut-body[b-z43v8ctuua] {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.88rem;
    color: #cbd5e1;
    line-height: 1.5;
    min-height: 70px;
    margin-bottom: 14px;
    position: relative;
}
.tut-cursor[b-z43v8ctuua] {
    display: inline-block;
    width: 7px;
    height: 14px;
    background: var(--cyan-neon, #00f0ff);
    vertical-align: middle;
    margin-left: 2px;
    animation: blink-cursor-b-z43v8ctuua 0.7s infinite;
}
@keyframes blink-cursor-b-z43v8ctuua { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.tut-hint-click[b-z43v8ctuua] {
    font-size: 0.65rem;
    color: #94a3b8;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.tut-footer[b-z43v8ctuua] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.btn-tut-skip[b-z43v8ctuua] {
    background: transparent;
    border: 1px solid #475569;
    color: #94a3b8;
    padding: 6px 14px;
    border-radius: 6px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-tut-skip:hover[b-z43v8ctuua] {
    border-color: #ef4444;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.btn-tut-next[b-z43v8ctuua] {
    background: var(--cyan-neon, #00f0ff);
    border: none;
    color: #020617;
    padding: 6px 18px;
    border-radius: 6px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.5);
    display: flex;
    align-items: center;
    gap: 4px;
}
.btn-tut-next:hover[b-z43v8ctuua] {
    background: #38bdf8;
    transform: translateY(-1px);
    box-shadow: 0 0 16px rgba(0, 240, 255, 0.6);
}

/* Initial Prompt Modal (Trước khi chơi) */
.tutorial-prompt-modal[b-z43v8ctuua] {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.92);
    backdrop-filter: blur(10px);
    z-index: 2500;
    display: flex;
    align-items: center;
    justify-content: center;
}
.prompt-card[b-z43v8ctuua] {
    background: linear-gradient(180deg, #0f1c2e 0%, #08101a 100%);
    border: 2px solid var(--cyan-neon, #00f0ff);
    border-radius: 14px;
    padding: 24px 30px;
    max-width: 460px;
    width: 90%;
    text-align: center;
    box-shadow: 0 0 45px rgba(0, 240, 255, 0.4);
    animation: pop-modal 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.prompt-title[b-z43v8ctuua] {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--cyan-neon, #00f0ff);
    text-shadow: 0 0 12px rgba(0, 240, 255, 0.5);
    margin-bottom: 12px;
    letter-spacing: 1px;
}
.prompt-desc[b-z43v8ctuua] {
    font-size: 0.92rem;
    color: #cbd5e1;
    line-height: 1.5;
    margin-bottom: 22px;
}
.prompt-actions[b-z43v8ctuua] {
    display: flex;
    gap: 12px;
    justify-content: center;
}
.btn-prompt-guide[b-z43v8ctuua] {
    background: var(--cyan-neon, #00f0ff);
    color: #020617;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.5);
}
.btn-prompt-guide:hover[b-z43v8ctuua] { background: #38bdf8; transform: translateY(-2px); }
.btn-prompt-play[b-z43v8ctuua] {
    background: rgba(34, 197, 94, 0.2);
    border: 1px solid #22c55e;
    color: #86efac;
    padding: 10px 20px;
    border-radius: 6px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-prompt-play:hover[b-z43v8ctuua] {
    background: #22c55e;
    color: #020617;
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.6);
    transform: translateY(-2px);
}

.btn-fs-tut[b-z43v8ctuua] {
    border-color: #38bdf8 !important;
    color: #38bdf8 !important;
}
.btn-fs-tut:hover[b-z43v8ctuua] {
    background: rgba(56, 189, 248, 0.15) !important;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}

/* /Components/GuestWarningBanner.razor.rz.scp.css */
.guest-warning-banner[b-35v1w9fd7m] {
    position: relative;
    margin-bottom: 1.5rem;
    border-radius: 14px;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1.5px solid #f59e0b;
    box-shadow: 0 4px 18px -2px rgba(217, 119, 6, 0.16), 0 2px 6px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    animation: bannerSlideIn-b-35v1w9fd7m 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 20;
}

@keyframes bannerSlideIn-b-35v1w9fd7m {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.guest-warning-glow[b-35v1w9fd7m] {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 6px;
    background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
}

.guest-warning-content[b-35v1w9fd7m] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px 14px 22px;
}

.guest-warning-badge-wrap[b-35v1w9fd7m] {
    flex-shrink: 0;
}

.guest-warning-pill[b-35v1w9fd7m] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #fde68a;
    border: 1px solid #f59e0b;
    color: #92400e;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.pulsing-radar[b-35v1w9fd7m] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    animation: radarPulse-b-35v1w9fd7m 1.8s infinite;
}

@keyframes radarPulse-b-35v1w9fd7m {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

.guest-warning-text-group[b-35v1w9fd7m] {
    flex: 1;
    min-width: 0;
}

.guest-warning-headline[b-35v1w9fd7m] {
    color: #78350f;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 2px;
}

.guest-warning-desc[b-35v1w9fd7m] {
    color: #92400e;
    font-size: 0.85rem;
    line-height: 1.45;
}

.guest-warning-desc strong[b-35v1w9fd7m] {
    color: #78350f;
    font-weight: 700;
}

.guest-warning-actions[b-35v1w9fd7m] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.btn-guest-login[b-35v1w9fd7m] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(217, 119, 6, 0.3);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}

.btn-guest-login:hover[b-35v1w9fd7m] {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.45);
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
}

.btn-guest-login:active[b-35v1w9fd7m] {
    transform: translateY(0);
}

.btn-guest-dismiss[b-35v1w9fd7m] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: #92400e;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.18s, color 0.18s;
}

.btn-guest-dismiss:hover[b-35v1w9fd7m] {
    background: rgba(217, 119, 6, 0.18);
    color: #78350f;
}

/* ═══════════ DARK THEME ═══════════ */
:global([data-theme="dark"]) .guest-warning-banner[b-35v1w9fd7m],
[data-theme="dark"] .guest-warning-banner[b-35v1w9fd7m] {
    background: linear-gradient(135deg, rgba(32, 24, 12, 0.96) 0%, rgba(48, 32, 10, 0.92) 100%);
    border-color: rgba(245, 158, 11, 0.55);
    box-shadow: 0 8px 26px -4px rgba(0, 0, 0, 0.65), 0 0 20px -2px rgba(245, 158, 11, 0.18);
}

:global([data-theme="dark"]) .guest-warning-glow[b-35v1w9fd7m],
[data-theme="dark"] .guest-warning-glow[b-35v1w9fd7m] {
    background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%);
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.6);
}

:global([data-theme="dark"]) .guest-warning-pill[b-35v1w9fd7m],
[data-theme="dark"] .guest-warning-pill[b-35v1w9fd7m] {
    background: rgba(245, 158, 11, 0.22);
    border-color: rgba(245, 158, 11, 0.5);
    color: #fef08a;
}

:global([data-theme="dark"]) .guest-warning-headline[b-35v1w9fd7m],
[data-theme="dark"] .guest-warning-headline[b-35v1w9fd7m] {
    color: #fbbf24;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

:global([data-theme="dark"]) .guest-warning-desc[b-35v1w9fd7m],
[data-theme="dark"] .guest-warning-desc[b-35v1w9fd7m] {
    color: #fde68a;
}

:global([data-theme="dark"]) .guest-warning-desc strong[b-35v1w9fd7m],
[data-theme="dark"] .guest-warning-desc strong[b-35v1w9fd7m] {
    color: #ffffff;
}

:global([data-theme="dark"]) .btn-guest-login[b-35v1w9fd7m],
[data-theme="dark"] .btn-guest-login[b-35v1w9fd7m] {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #1a1202;
    font-weight: 800;
    box-shadow: 0 2px 12px rgba(245, 158, 11, 0.4);
}

:global([data-theme="dark"]) .btn-guest-login:hover[b-35v1w9fd7m],
[data-theme="dark"] .btn-guest-login:hover[b-35v1w9fd7m] {
    background: linear-gradient(135deg, #fef08a 0%, #fbbf24 100%);
    box-shadow: 0 4px 18px rgba(245, 158, 11, 0.6);
}

:global([data-theme="dark"]) .btn-guest-dismiss[b-35v1w9fd7m],
[data-theme="dark"] .btn-guest-dismiss[b-35v1w9fd7m] {
    color: #fde68a;
}

:global([data-theme="dark"]) .btn-guest-dismiss:hover[b-35v1w9fd7m],
[data-theme="dark"] .btn-guest-dismiss:hover[b-35v1w9fd7m] {
    background: rgba(245, 158, 11, 0.25);
    color: #ffffff;
}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 860px) {
    .guest-warning-content[b-35v1w9fd7m] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 14px 16px;
    }

    .guest-warning-actions[b-35v1w9fd7m] {
        width: 100%;
        justify-content: space-between;
        margin-top: 4px;
    }

    .btn-guest-login[b-35v1w9fd7m] {
        flex: 1;
        justify-content: center;
    }
}
/* /Components/HomeDocNav.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════ */
/* THANH BẤM NHANH TỐI GIẢN — FOCUS DIMMING & EXPAND ANIMATION     */
/* Đánh số to rõ, mờ các phần xung quanh, chỉ hiện chữ khi hover   */
/* ══════════════════════════════════════════════════════════════ */

.home-quick-toc[b-4ez2zdumfc] {
    position: fixed;
    left: 28px;
    top: 130px;
    z-index: 450;
    display: flex;
    flex-direction: column;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 8px 6px;
    margin: 0;
    pointer-events: auto;
    user-select: none;
    -webkit-user-select: none;
}

.toc-list[b-4ez2zdumfc] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}

/* Các mục gạch bấm nhanh - Hiển thị tất cả chữ, mờ nhẹ các mục chưa active */
.toc-item[b-4ez2zdumfc] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    padding: 6px 8px;
    color: var(--ig-text-secondary, #94a3b8);
    font-size: 0.94rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    opacity: 0.35; /* Các mục xung quanh mờ đi để làm nổi bật mục active */
    transform: translateX(0);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                color 0.2s ease;
}

/* Con số đánh dấu: to, rõ nét */
.toc-num[b-4ez2zdumfc] {
    font-family: 'JetBrains Mono', 'Roboto Mono', 'Plus Jakarta Sans', monospace;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: currentColor;
    opacity: 0.85;
    flex-shrink: 0;
    transition: transform 0.25s ease, opacity 0.25s ease, color 0.25s ease;
}

/* Gạch mục lục: gọn gàng */
.toc-dash[b-4ez2zdumfc] {
    width: 16px;
    height: 2px;
    border-radius: 9999px;
    background: currentColor;
    opacity: 0.45;
    flex-shrink: 0;
    transition: width 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                background 0.22s ease,
                box-shadow 0.22s ease,
                opacity 0.22s ease;
}

/* Chữ tiêu đề: Hiển thị đầy đủ tất cả như ban đầu */
.toc-text[b-4ez2zdumfc] {
    display: inline-block;
    color: currentColor;
    font-size: 0.93rem;
    letter-spacing: -0.01em;
    white-space: nowrap;
    transition: color 0.2s ease, font-weight 0.2s ease;
}

/* ── TRẠNG THÁI ACTIVE (Đang đứng ở phần này thì sáng rõ 100% và thò ra để nhận biết) ── */
.toc-item.active[b-4ez2zdumfc] {
    opacity: 1 !important; /* Sáng rõ 100% */
    color: #f8fafc;
    font-weight: 700;
    transform: translateX(14px); /* Tự thò ra ngoài */
}

.toc-item.active .toc-num[b-4ez2zdumfc] {
    color: var(--ig-primary, #38bdf8);
    opacity: 1;
    transform: scale(1.1);
}

.toc-item.active .toc-dash[b-4ez2zdumfc] {
    width: 32px; /* Gạch dài ra rõ rệt */
    height: 2.5px;
    opacity: 1;
    background: var(--ig-primary, #38bdf8);
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.75);
}

.toc-item.active .toc-text[b-4ez2zdumfc] {
    color: #f8fafc;
    font-weight: 700;
}

/* ── KHI DI CHUỘT LÊN XUỐNG CÁC PHẦN (Chuột di tới phần nào phần đó tự thò ra) ── */
.toc-item:hover[b-4ez2zdumfc] {
    opacity: 1 !important;
    color: #f8fafc;
    transform: translateX(16px); /* Chuột di tới đâu thì mục đó tự thò ra */
}

.toc-item:hover .toc-num[b-4ez2zdumfc] {
    color: var(--ig-primary, #38bdf8);
    opacity: 1;
    transform: scale(1.1);
}

.toc-item:hover .toc-dash[b-4ez2zdumfc] {
    width: 30px;
    background: var(--ig-primary, #38bdf8);
    opacity: 1;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.65);
}

.toc-item:hover .toc-text[b-4ez2zdumfc] {
    color: #f8fafc;
    font-weight: 600;
}

/* Khi mục active được hover trực tiếp */
.toc-item.active:hover[b-4ez2zdumfc] {
    transform: translateX(18px);
}

/* ══════════════════════════════════════════════════════════════ */
/* CHẾ ĐỘ SÁNG (LIGHT MODE) */
/* ══════════════════════════════════════════════════════════════ */

[data-theme="light"] .toc-item[b-4ez2zdumfc] {
    color: #64748b;
}

[data-theme="light"] .toc-item.active[b-4ez2zdumfc] {
    color: #0f172a;
}

[data-theme="light"] .toc-item.active .toc-num[b-4ez2zdumfc] {
    color: #0284c7;
}

[data-theme="light"] .toc-item.active .toc-dash[b-4ez2zdumfc] {
    background: #0284c7;
    box-shadow: 0 0 10px rgba(2, 132, 199, 0.5);
}

[data-theme="light"] .toc-item.active .toc-text[b-4ez2zdumfc] {
    color: #0f172a;
}

[data-theme="light"] .toc-item:hover[b-4ez2zdumfc] {
    color: #0f172a;
}

[data-theme="light"] .toc-item:hover .toc-num[b-4ez2zdumfc] {
    color: #0284c7;
}

[data-theme="light"] .toc-item:hover .toc-dash[b-4ez2zdumfc] {
    background: #0284c7;
    box-shadow: 0 0 8px rgba(2, 132, 199, 0.4);
}

[data-theme="light"] .toc-item:hover .toc-text[b-4ez2zdumfc] {
    color: #0f172a;
}

/* ══════════════════════════════════════════════════════════════ */
/* RESPONSIVE */
/* ══════════════════════════════════════════════════════════════ */

@media (max-width: 1260px) {
    .home-quick-toc[b-4ez2zdumfc] {
        left: 14px;
    }
}

@media (max-width: 980px) {
    .home-quick-toc[b-4ez2zdumfc] {
        display: none !important;
    }
}
/* /Components/MascotWidget.razor.rz.scp.css */
/* =========================================================
   MASCOT COMPANION WIDGET (Sói Tuyết & Gấu Koala)
   Floating Corner Interactive Widget
========================================================= */

.mascot-widget-wrapper[b-5bfzscxouh] {
    position: fixed;
    bottom: 22px;
    right: 22px;
    z-index: 10005;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    pointer-events: none;
    user-select: none;
    transition: bottom 0.25s ease;
}

/* Lift above bottom navigator bar during exams */
.exam-shell ~ .mascot-widget-wrapper[b-5bfzscxouh],
body:has(.q-navigator-bar) .mascot-widget-wrapper[b-5bfzscxouh],
body:has(.reading-bottom-nav) .mascot-widget-wrapper[b-5bfzscxouh] {
    bottom: 64px;
}

/* ---------------------------------------------------------
   1. HỘP THOẠI ĐỘNG VIÊN (SPEECH BUBBLE)
--------------------------------------------------------- */
.mascot-speech-bubble[b-5bfzscxouh] {
    pointer-events: auto;
    position: relative;
    max-width: 280px;
    margin-bottom: 10px;
    margin-right: 12px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 16px;
    box-shadow: 0 12px 28px -6px rgba(15, 23, 42, 0.16), 0 4px 12px -2px rgba(15, 23, 42, 0.08);
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px) scale(0.92);
    transform-origin: bottom right;
    transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    visibility: hidden;
}

.mascot-speech-bubble.visible[b-5bfzscxouh] {
    opacity: 1;
    transform: translateY(0) scale(1);
    visibility: visible;
}

.mascot-bubble-content[b-5bfzscxouh] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mascot-bubble-text[b-5bfzscxouh] {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.4;
}

.mascot-bubble-sub[b-5bfzscxouh] {
    font-size: 11px;
    font-weight: 500;
    color: #64748b;
    line-height: 1.4;
    word-break: break-word;
}

/* Mũi tên nhỏ chỉ vào Mascot */
.mascot-bubble-arrow[b-5bfzscxouh] {
    position: absolute;
    bottom: -6px;
    right: 24px;
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.96);
    border-right: 1px solid rgba(226, 232, 240, 0.9);
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
    transform: rotate(45deg);
}

[data-theme="dark"] .mascot-speech-bubble[b-5bfzscxouh] {
    background: rgba(21, 36, 63, 0.96);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.45), 0 4px 12px -2px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .mascot-bubble-text[b-5bfzscxouh] {
    color: #f8fafc;
}

[data-theme="dark"] .mascot-bubble-sub[b-5bfzscxouh] {
    color: #94a3b8;
}

[data-theme="dark"] .mascot-bubble-arrow[b-5bfzscxouh] {
    background: #15243f;
    border-right-color: rgba(255, 255, 255, 0.12);
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

/* ---------------------------------------------------------
   2. KHU VỰC MASCOT CHÍNH
--------------------------------------------------------- */
.mascot-main-area[b-5bfzscxouh] {
    pointer-events: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.mascot-viewport[b-5bfzscxouh] {
    position: relative;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.12));
    transition: transform 0.2s ease;
}

/* Vòng tròn hào quang mềm mại (Circular Backdrop Halo) */
.mascot-halo-backdrop[b-5bfzscxouh] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(224, 231, 255, 0.7) 0%, rgba(241, 245, 249, 0.4) 60%, rgba(255, 255, 255, 0) 100%);
    border: 1.5px solid rgba(226, 232, 240, 0.8);
    box-sizing: border-box;
    pointer-events: none;
    z-index: 0;
    transition: all 0.3s ease;
}

.mascot-viewport:hover .mascot-halo-backdrop[b-5bfzscxouh] {
    transform: scale(1.06);
    background: radial-gradient(circle, rgba(199, 210, 254, 0.8) 0%, rgba(224, 231, 255, 0.5) 60%, rgba(255, 255, 255, 0) 100%);
    border-color: rgba(165, 180, 252, 0.85);
    box-shadow: 0 0 24px rgba(129, 140, 248, 0.25);
}

/* Bóng tiếp đất mềm mại */
.mascot-ground-shadow[b-5bfzscxouh] {
    position: absolute;
    bottom: 2px;
    width: 64px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(15, 23, 42, 0.16) 0%, rgba(15, 23, 42, 0) 70%);
    pointer-events: none;
    z-index: 0;
    transition: all 0.2s ease;
    animation: mascot-shadow-pulse-b-5bfzscxouh 3.4s ease-in-out infinite;
}

.mascot-viewport:hover .mascot-ground-shadow[b-5bfzscxouh] {
    transform: scale(0.92);
    opacity: 0.75;
}

.mascot-viewport:hover[b-5bfzscxouh] {
    transform: scale(1.04);
}

.mascot-actor-btn[b-5bfzscxouh] {
    position: relative;
    display: block;
    width: 110px;
    height: 110px;
    padding: 0;
    margin: 0;
    border: none !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    background: transparent !important;
    background-color: transparent !important;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    user-select: none;
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
    z-index: 1;
}

.mascot-actor-btn:focus[b-5bfzscxouh],
.mascot-actor-btn:active[b-5bfzscxouh],
.mascot-actor-btn:hover[b-5bfzscxouh] {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.mascot-squash-span[b-5bfzscxouh] {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: transparent;
    transform-origin: 50% 78%;
    animation: mascot-breathe-b-5bfzscxouh 3.4s ease-in-out infinite;
}

@keyframes mascot-breathe-b-5bfzscxouh {
    0%, 100% {
        transform: translateY(0) scale(1, 1);
    }
    50% {
        transform: translateY(-2.5px) scale(1.02, 0.98);
    }
}

@keyframes mascot-shadow-pulse-b-5bfzscxouh {
    0%, 100% {
        transform: scale(1);
        opacity: 0.85;
    }
    50% {
        transform: scale(0.92);
        opacity: 0.6;
    }
}

.mascot-layer[b-5bfzscxouh] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
    background-size: 300% 300%;
    background-repeat: no-repeat;
    pointer-events: none;
    image-rendering: auto;
}

.mascot-layer-directions[b-5bfzscxouh] {
    background-image: url('/mascot/wolf-directions.webp');
    background-position: 50% 50%;
    opacity: 1;
}

.mascot-layer-reactions[b-5bfzscxouh] {
    background-image: url('/mascot/wolf-reactions.webp');
    background-position: 0% 0%;
    opacity: 0;
}

/* ---------------------------------------------------------
   3. THANH CÔNG CỤ NHANH (QUICK TOOLBAR)
--------------------------------------------------------- */
.mascot-toolbar[b-5bfzscxouh] {
    position: absolute;
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%) translateX(10px);
    display: flex;
    flex-direction: row;
    gap: 6px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 30px;
    box-shadow: 0 8px 20px -4px rgba(15, 23, 42, 0.12);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.mascot-toolbar.visible[b-5bfzscxouh] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0);
}

.btn-mascot-tool[b-5bfzscxouh] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #f1f5f9;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-mascot-tool:hover[b-5bfzscxouh] {
    background: #e2e8f0;
    color: #0f172a;
    transform: scale(1.08);
}

.btn-mascot-tool.active[b-5bfzscxouh] {
    background: #0284c7;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.35);
}

.btn-mascot-tool.btn-close-mascot:hover[b-5bfzscxouh] {
    background: #fee2e2;
    color: #ef4444;
}

/* Nút mở menu cài đặt nhỏ */
.btn-mascot-menu-toggle[b-5bfzscxouh] {
    position: absolute;
    top: 0;
    right: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(226, 232, 240, 0.9);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    cursor: pointer;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    z-index: 2;
}

.mascot-main-area:hover .btn-mascot-menu-toggle[b-5bfzscxouh],
.mascot-widget-wrapper.menu-open .btn-mascot-menu-toggle[b-5bfzscxouh] {
    opacity: 1;
    transform: scale(1);
}

.btn-mascot-menu-toggle:hover[b-5bfzscxouh] {
    background: #0284c7;
    color: #ffffff;
    border-color: #0284c7;
}

/* ---------------------------------------------------------
   4. HUY HIỆU THU NHỎ (MINIMIZED PILL)
--------------------------------------------------------- */
.mascot-minimized-pill[b-5bfzscxouh] {
    pointer-events: auto;
    display: none;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 9999px;
    border: 1px solid rgba(203, 213, 225, 0.8);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 6px 18px -3px rgba(15, 23, 42, 0.12);
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    color: #334155;
    transition: all 0.22s ease;
}

.mascot-minimized-pill:hover[b-5bfzscxouh] {
    background: #ffffff;
    color: #0284c7;
    border-color: #38bdf8;
    box-shadow: 0 8px 24px -4px rgba(2, 132, 199, 0.25);
    transform: translateY(-2px);
}

.mascot-minimized-pill .pill-icon[b-5bfzscxouh] {
    font-size: 16px;
}

/* Trạng thái thu nhỏ */
.mascot-widget-wrapper.is-minimized .mascot-main-area[b-5bfzscxouh],
.mascot-widget-wrapper.is-minimized .mascot-speech-bubble[b-5bfzscxouh] {
    display: none !important;
}

.mascot-widget-wrapper.is-minimized .mascot-minimized-pill[b-5bfzscxouh] {
    display: flex !important;
}

/* ---------------------------------------------------------
   5. DARK THEME TƯƠNG THÍCH
--------------------------------------------------------- */
:global(body.theme-dark) .mascot-speech-bubble[b-5bfzscxouh],
:global(.theme-dark) .mascot-speech-bubble[b-5bfzscxouh] {
    background: rgba(30, 41, 59, 0.94);
    border-color: rgba(51, 65, 85, 0.9);
    box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.4);
}

:global(body.theme-dark) .mascot-bubble-arrow[b-5bfzscxouh],
:global(.theme-dark) .mascot-bubble-arrow[b-5bfzscxouh] {
    background: rgba(30, 41, 59, 0.94);
    border-color: rgba(51, 65, 85, 0.9);
}

:global(body.theme-dark) .mascot-bubble-text[b-5bfzscxouh],
:global(.theme-dark) .mascot-bubble-text[b-5bfzscxouh] {
    color: #f1f5f9;
}

:global(body.theme-dark) .mascot-bubble-sub[b-5bfzscxouh],
:global(.theme-dark) .mascot-bubble-sub[b-5bfzscxouh] {
    color: #94a3b8;
}

:global(body.theme-dark) .mascot-toolbar[b-5bfzscxouh],
:global(.theme-dark) .mascot-toolbar[b-5bfzscxouh] {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(51, 65, 85, 0.9);
}

:global(body.theme-dark) .btn-mascot-tool[b-5bfzscxouh],
:global(.theme-dark) .btn-mascot-tool[b-5bfzscxouh] {
    background: #334155;
    color: #cbd5e1;
}

:global(body.theme-dark) .btn-mascot-tool:hover[b-5bfzscxouh],
:global(.theme-dark) .btn-mascot-tool:hover[b-5bfzscxouh] {
    background: #475569;
    color: #f8fafc;
}

:global(body.theme-dark) .mascot-minimized-pill[b-5bfzscxouh],
:global(.theme-dark) .mascot-minimized-pill[b-5bfzscxouh] {
    background: rgba(30, 41, 59, 0.92);
    border-color: rgba(51, 65, 85, 0.8);
    color: #e2e8f0;
}

:global(body.theme-dark) .mascot-halo-backdrop[b-5bfzscxouh],
:global(.theme-dark) .mascot-halo-backdrop[b-5bfzscxouh] {
    background: radial-gradient(circle, rgba(56, 189, 248, 0.16) 0%, rgba(99, 102, 241, 0.08) 60%, transparent 100%);
    border-color: rgba(51, 65, 85, 0.6);
}

:global(body.theme-dark) .mascot-ground-shadow[b-5bfzscxouh],
:global(.theme-dark) .mascot-ground-shadow[b-5bfzscxouh] {
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 70%);
}

/* ---------------------------------------------------------
   6. RESPONSIVE MOBILE TỐI ƯU
--------------------------------------------------------- */
@media (max-width: 768px) {
    .mascot-widget-wrapper[b-5bfzscxouh] {
        bottom: 14px;
        right: 14px;
    }

    .mascot-actor-btn[b-5bfzscxouh] {
        width: 85px !important;
        height: 85px !important;
    }

    .mascot-speech-bubble[b-5bfzscxouh] {
        max-width: 240px;
        margin-right: 6px;
        padding: 8px 12px;
    }

    .mascot-bubble-text[b-5bfzscxouh] {
        font-size: 12px;
    }

    .btn-mascot-menu-toggle[b-5bfzscxouh] {
        opacity: 0.85; /* Luôn hiển thị nhẹ trên cảm ứng */
    }
}

/* ---------------------------------------------------------
   7. CHẾ ĐỘ TRÒ CHƠI (ARCADE GAME CO-PILOT MODE)
   Đặt an toàn ở góc dưới bên phải, tuyệt đối không chắn chữ rơi
--------------------------------------------------------- */
.mascot-widget-wrapper.game-mode[b-5bfzscxouh] {
    bottom: 16px;
    right: 18px;
}

.mascot-widget-wrapper.game-mode .mascot-viewport[b-5bfzscxouh] {
    width: 85px;
    height: 85px;
}

.mascot-widget-wrapper.game-mode .mascot-actor-btn[b-5bfzscxouh] {
    width: 85px !important;
    height: 85px !important;
}

.mascot-widget-wrapper.game-mode .mascot-halo-backdrop[b-5bfzscxouh] {
    width: 78px;
    height: 78px;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.28) 0%, rgba(99, 102, 241, 0.12) 60%, transparent 100%);
    border: 1.5px solid rgba(56, 189, 248, 0.5);
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.35);
}

.mascot-widget-wrapper.game-mode .mascot-speech-bubble[b-5bfzscxouh] {
    pointer-events: none !important;
    max-width: 210px;
    padding: 8px 12px;
    margin-bottom: 6px;
    margin-right: 2px;
    background: rgba(15, 23, 42, 0.94) !important;
    border: 1px solid rgba(56, 189, 248, 0.6) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.65), 0 0 14px rgba(56, 189, 248, 0.25) !important;
    backdrop-filter: blur(16px);
}

.mascot-widget-wrapper.game-mode .mascot-bubble-arrow[b-5bfzscxouh] {
    background: rgba(15, 23, 42, 0.94) !important;
    border-color: rgba(56, 189, 248, 0.6) !important;
}

.mascot-widget-wrapper.game-mode .mascot-bubble-text[b-5bfzscxouh] {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #38bdf8 !important;
    text-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}

.mascot-widget-wrapper.game-mode .mascot-bubble-sub[b-5bfzscxouh] {
    font-size: 11px !important;
    color: #cbd5e1 !important;
}

.mascot-widget-wrapper.game-mode .btn-mascot-menu-toggle[b-5bfzscxouh],
.mascot-widget-wrapper.game-mode .mascot-toolbar[b-5bfzscxouh] {
    display: none !important;
}

/* /Components/ProfileModal.razor.rz.scp.css */
.modal-backdrop[b-3zs0js55sd] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: modal-fade-in-b-3zs0js55sd 0.2s ease-out;
}

@keyframes modal-fade-in-b-3zs0js55sd {
    from { opacity: 0; }
    to { opacity: 1; }
}

.profile-modal-card[b-3zs0js55sd] {
    position: relative;
    width: 100%;
    max-width: 680px;
    max-height: 90vh;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.25), 0 8px 24px rgba(15, 23, 42, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modal-slide-in-b-3zs0js55sd 0.26s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modal-slide-in-b-3zs0js55sd {
    from { opacity: 0; transform: scale(0.94) translateY(12px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Modal Cover & Close ── */
.modal-cover[b-3zs0js55sd] {
    height: 60px;
    background: linear-gradient(135deg, #0c2340 0%, #1e1b4b 50%, #4338ca 100%);
    position: relative;
    padding: 12px 16px;
    display: flex;
    justify-content: flex-end;
    flex-shrink: 0;
}

.modal-close-btn[b-3zs0js55sd] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.18s ease;
}

.modal-close-btn:hover[b-3zs0js55sd] {
    background: rgba(255, 255, 255, 0.4);
    transform: scale(1.1);
}

/* ── Header Profile Info ── */
.modal-header-profile[b-3zs0js55sd] {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 0 24px 16px 24px;
    margin-top: -30px;
    position: relative;
    z-index: 10;
    flex-shrink: 0;
}

.avatar-picker-wrap[b-3zs0js55sd] {
    position: relative;
}

.modal-avatar[b-3zs0js55sd] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    cursor: pointer;
    border: 3.5px solid #ffffff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
    position: relative;
    transition: transform 0.2s ease;
}

.modal-avatar:hover[b-3zs0js55sd] {
    transform: scale(1.05);
}

.avatar-edit-badge[b-3zs0js55sd] {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #0f172a;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    border: 2px solid #ffffff;
}

.avatar-picker-popover[b-3zs0js55sd] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 260px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
    z-index: 20;
}

.picker-title[b-3zs0js55sd] {
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 6px;
}

.emoji-grid[b-3zs0js55sd] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
}

.emoji-btn[b-3zs0js55sd] {
    width: 34px;
    height: 34px;
    font-size: 1.2rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.emoji-btn:hover[b-3zs0js55sd], .emoji-btn.active[b-3zs0js55sd] {
    background: #f1f5f9;
    border-color: #cbd5e1;
    transform: scale(1.15);
}

.color-grid[b-3zs0js55sd] {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
}

.color-dot[b-3zs0js55sd] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: transform 0.15s;
}

.color-dot:hover[b-3zs0js55sd], .color-dot.active[b-3zs0js55sd] {
    transform: scale(1.25);
    outline: 2px solid #6366f1;
}

.header-name-box[b-3zs0js55sd] {
    flex: 1;
    min-width: 0;
    padding-top: 24px;
}

.name-row[b-3zs0js55sd] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-fullname[b-3zs0js55sd] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.role-badge[b-3zs0js55sd] {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.badge-admin[b-3zs0js55sd] {
    background: #ede9fe;
    color: #6366f1;
    border: 1px solid #c7d2fe;
}

.user-meta-row[b-3zs0js55sd] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: #64748b;
    margin-top: 2px;
}

.meta-dot[b-3zs0js55sd] { color: #cbd5e1; }
.user-tag[b-3zs0js55sd] { font-weight: 600; color: #475569; }
.user-email-text[b-3zs0js55sd] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }

.streak-badge[b-3zs0js55sd] {
    font-weight: 700;
    color: #ea580c;
    background: #fff7ed;
    padding: 1px 6px;
    border-radius: 12px;
    border: 1px solid #ffedd5;
}

/* ── Modal Tabs ── */
.modal-tabs[b-3zs0js55sd] {
    display: flex;
    padding: 0 20px;
    border-bottom: 1px solid #f1f5f9;
    gap: 8px;
    flex-shrink: 0;
}

.tab-btn[b-3zs0js55sd] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #64748b;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tab-btn:hover[b-3zs0js55sd] {
    color: #0f172a;
}

.tab-btn.active[b-3zs0js55sd] {
    color: #4f46e5;
    border-bottom-color: #4f46e5;
}

/* ── Modal Body ── */
.modal-body[b-3zs0js55sd] {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
    min-height: 280px;
}

.modal-body[b-3zs0js55sd]::-webkit-scrollbar {
    width: 6px;
}
.modal-body[b-3zs0js55sd]::-webkit-scrollbar-thumb {
    background: var(--water-drop-thumb);
    border-radius: 9999px;
    box-shadow: var(--water-drop-shadow);
}

.modal-toast[b-3zs0js55sd] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #15803d;
    font-size: 0.88rem;
    font-weight: 600;
    border-radius: 12px;
    margin-bottom: 16px;
    animation: modal-fade-in-b-3zs0js55sd 0.2s ease;
}

.modal-toast.toast-error[b-3zs0js55sd] {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

.modal-toast.toast-success[b-3zs0js55sd] {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #15803d;
}

/* ── Form Inputs ── */
.form-grid[b-3zs0js55sd] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
}

.form-field[b-3zs0js55sd] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-field.full-width[b-3zs0js55sd] {
    grid-column: 1 / -1;
}

.field-label[b-3zs0js55sd] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #475569;
    display: flex;
    align-items: center;
}

.field-badge-readonly[b-3zs0js55sd] {
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
    margin-left: 8px;
    background: #f1f5f9;
    padding: 2px 7px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.field-badge-cooldown[b-3zs0js55sd] {
    font-size: 0.72rem;
    font-weight: 600;
    color: #c2410c;
    margin-left: 8px;
    background: #fff7ed;
    border: 1px solid #ffedd5;
    padding: 2px 7px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.field-badge-tip[b-3zs0js55sd] {
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
    margin-left: 8px;
    background: #f1f5f9;
    padding: 2px 7px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.field-badge-verified[b-3zs0js55sd] {
    font-size: 0.72rem;
    font-weight: 600;
    color: #15803d;
    margin-left: 8px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    padding: 2px 7px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.role-display-box[b-3zs0js55sd] {
    display: flex;
    align-items: center;
    min-height: 42px;
}

.role-badge[b-3zs0js55sd] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 7px 14px;
    border-radius: 10px;
}

.role-badge.role-admin[b-3zs0js55sd] {
    background: #fef2f2;
    color: #dc2626;
    border: 1.5px solid #fecaca;
}

.role-badge.role-user[b-3zs0js55sd] {
    background: #f0fdf4;
    color: #16a34a;
    border: 1.5px solid #bbf7d0;
}

.form-control-custom[b-3zs0js55sd] {
    padding: 9px 13px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.9rem;
    color: #1e293b;
    outline: none;
    transition: all 0.18s ease;
}

.form-control-custom:focus[b-3zs0js55sd] {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.readonly-field[b-3zs0js55sd] {
    background: #f8fafc;
    color: #334155;
    cursor: default;
    border-color: #e2e8f0;
    font-weight: 600;
    user-select: all;
}

.field-hint-notice[b-3zs0js55sd] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.74rem;
    color: #b45309;
    background: #fffbeb;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid #fef3c7;
    margin-top: 4px;
    line-height: 1.3;
}

.field-hint-notice i[b-3zs0js55sd] {
    font-size: 0.78rem;
    color: #d97706;
    flex-shrink: 0;
}

.notice-cooldown[b-3zs0js55sd] {
    color: #c2410c !important;
    background: #fff7ed !important;
    border-color: #ffedd5 !important;
}

.notice-cooldown i[b-3zs0js55sd] {
    color: #ea580c !important;
}

.textarea-custom[b-3zs0js55sd] {
    resize: vertical;
}

.exam-select-pills[b-3zs0js55sd], .level-select-pills[b-3zs0js55sd] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pill-btn[b-3zs0js55sd] {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.pill-btn:hover[b-3zs0js55sd] {
    background: #ffffff;
    border-color: #cbd5e1;
}

.pill-btn.active[b-3zs0js55sd] {
    background: #ede9fe;
    border-color: #818cf8;
    color: #4f46e5;
}

/* ── Profile Quick Stats Overview ── */
.profile-quick-stats[b-3zs0js55sd] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 18px;
    padding: 14px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
}

@media (max-width: 640px) {
    .profile-quick-stats[b-3zs0js55sd] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.quick-stat-item[b-3zs0js55sd] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.quick-stat-icon[b-3zs0js55sd] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
    flex-shrink: 0;
}

.quick-stat-info[b-3zs0js55sd] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.quick-stat-val[b-3zs0js55sd] {
    font-size: 0.92rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

.quick-stat-lbl[b-3zs0js55sd] {
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 600;
    margin-top: 2px;
    white-space: nowrap;
}

.pane-actions[b-3zs0js55sd] {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

.btn-save-profile[b-3zs0js55sd] {
    padding: 10px 22px;
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.3);
    transition: all 0.2s ease;
}

.btn-save-profile:hover:not(:disabled)[b-3zs0js55sd] {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

/* ── Stats Tab ── */
.stats-cards-grid[b-3zs0js55sd] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.stat-highlight-card[b-3zs0js55sd] {
    padding: 16px 14px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.stat-streak[b-3zs0js55sd] { background: #fffaf0; border-color: #fed7aa; }
.stat-tests[b-3zs0js55sd] { background: #f0fdf4; border-color: #bbf7d0; }

.stat-icon-circle[b-3zs0js55sd] { font-size: 1.5rem; }
.stat-num[b-3zs0js55sd] { font-size: 1.5rem; font-weight: 800; color: #0f172a; }
.stat-text[b-3zs0js55sd] { font-size: 0.78rem; font-weight: 600; color: #64748b; }
.stat-sub[b-3zs0js55sd] { font-size: 0.72rem; color: #94a3b8; margin-top: auto; }

.best-scores-block[b-3zs0js55sd] {
    margin-top: 14px;
}

.block-title[b-3zs0js55sd] {
    font-size: 0.92rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.scores-row[b-3zs0js55sd] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.score-card[b-3zs0js55sd] {
    padding: 14px;
    border-radius: 14px;
    border: 1.5px solid #e2e8f0;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2px;
}

.score-prog[b-3zs0js55sd] { font-size: 0.78rem; font-weight: 800; color: #64748b; letter-spacing: 0.5px; }
.score-value[b-3zs0js55sd] { font-size: 1.6rem; font-weight: 800; color: #0f172a; }
.score-scale[b-3zs0js55sd] { font-size: 0.7rem; color: #94a3b8; }

.score-ielts[b-3zs0js55sd] { border-color: #bae6fd; background: #f0f9ff; }
.score-ielts .score-prog[b-3zs0js55sd] { color: #0284c7; }
.score-hsk[b-3zs0js55sd] { border-color: #fecaca; background: #fef2f2; }
.score-hsk .score-prog[b-3zs0js55sd] { color: #dc2626; }

/* ── Achievements Block in Stats Tab ── */
.achievements-modal-block[b-3zs0js55sd] {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
}

.achievements-modal-block .block-header[b-3zs0js55sd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.achievements-modal-block .block-title[b-3zs0js55sd] {
    margin-bottom: 0;
}

.ach-count-badge[b-3zs0js55sd] {
    font-size: 0.76rem;
    font-weight: 700;
    color: #4338ca;
    background: #e0e7ff;
    padding: 3px 10px;
    border-radius: 999px;
}

.modal-ach-grid[b-3zs0js55sd] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.modal-ach-card[b-3zs0js55sd] {
    border-radius: 12px;
    padding: 12px 14px;
    border: 1.5px solid #e2e8f0;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: all 0.2s ease;
}

.modal-ach-card:hover[b-3zs0js55sd] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.modal-ach-card.unlocked[b-3zs0js55sd] {
    border-color: #fde047;
    background: linear-gradient(135deg, #fefce8 0%, #ffffff 100%);
    box-shadow: 0 2px 8px rgba(234, 179, 8, 0.08);
}

.modal-ach-card.locked[b-3zs0js55sd] {
    background: #f8fafc;
    border-color: #e2e8f0;
    opacity: 0.88;
}

.modal-ach-top[b-3zs0js55sd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-ach-icon[b-3zs0js55sd] {
    font-size: 1.35rem;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #f1f5f9;
}

.modal-ach-card.unlocked .modal-ach-icon[b-3zs0js55sd] {
    background: #fef08a;
}

.modal-ach-card.locked .modal-ach-icon[b-3zs0js55sd] {
    filter: grayscale(85%);
    opacity: 0.65;
}

.status-badge[b-3zs0js55sd] {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.status-badge.unlocked[b-3zs0js55sd] {
    background: #dcfce7;
    color: #15803d;
}

.status-badge.locked[b-3zs0js55sd] {
    background: #e2e8f0;
    color: #64748b;
}

.modal-ach-title[b-3zs0js55sd] {
    font-size: 0.84rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 2px;
}

.modal-ach-desc[b-3zs0js55sd] {
    font-size: 0.74rem;
    color: #64748b;
    line-height: 1.35;
    min-height: 28px;
}

.modal-ach-progress-wrap[b-3zs0js55sd] {
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-ach-progress-bar[b-3zs0js55sd] {
    flex: 1;
    height: 6px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
}

.modal-ach-progress-fill[b-3zs0js55sd] {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #6366f1);
    border-radius: 999px;
    transition: width 0.3s ease;
}

.modal-ach-card.unlocked .modal-ach-progress-fill[b-3zs0js55sd] {
    background: linear-gradient(90deg, #10b981, #059669);
}

.modal-ach-progress-text[b-3zs0js55sd] {
    font-size: 0.7rem;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
}

.modal-ach-card.unlocked .modal-ach-progress-text[b-3zs0js55sd] {
    color: #15803d;
    font-weight: 700;
}

/* ── History Tab ── */
.history-list[b-3zs0js55sd] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.history-item[b-3zs0js55sd] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #f1f5f9;
    background: #f8fafc;
    transition: background 0.15s ease;
}

.history-item:hover[b-3zs0js55sd] {
    background: #f1f5f9;
}

.history-skill-icon[b-3zs0js55sd] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.history-skill-icon.bg-blue[b-3zs0js55sd] { background: #e0f2fe; color: #0284c7; }
.history-skill-icon.bg-green[b-3zs0js55sd] { background: #dcfce7; color: #16a34a; }
.history-skill-icon.bg-orange[b-3zs0js55sd] { background: #ffedd5; color: #ea580c; }
.history-skill-icon.bg-purple[b-3zs0js55sd] { background: #f3e8ff; color: #9333ea; }
.history-skill-icon.bg-gray[b-3zs0js55sd] { background: #f1f5f9; color: #64748b; }

.history-detail[b-3zs0js55sd] {
    flex: 1;
    min-width: 0;
}

.history-title[b-3zs0js55sd] {
    font-size: 0.88rem;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-time[b-3zs0js55sd] {
    font-size: 0.74rem;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.history-skill-tag[b-3zs0js55sd] {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.65rem;
    background: #ffffff;
    padding: 1px 6px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.history-score-box[b-3zs0js55sd] {
    text-align: right;
}

.history-score[b-3zs0js55sd] {
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f172a;
    display: block;
}

.history-percent[b-3zs0js55sd] {
    font-size: 0.72rem;
    font-weight: 700;
    color: #16a34a;
}

.empty-state[b-3zs0js55sd] {
    text-align: center;
    padding: 40px 16px;
    color: #94a3b8;
}

.empty-state i[b-3zs0js55sd] {
    font-size: 2.2rem;
    color: #cbd5e1;
    margin-bottom: 8px;
    display: block;
}

.empty-state h6[b-3zs0js55sd] {
    color: #475569;
    font-weight: 700;
}

/* ── Modal Footer ── */
.modal-footer[b-3zs0js55sd] {
    display: flex;
    align-items: center;
    padding: 14px 24px;
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
    flex-shrink: 0;
}

.btn-admin-link[b-3zs0js55sd] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #6366f1;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-admin-link:hover[b-3zs0js55sd] {
    text-decoration: underline;
}

.btn-modal-logout[b-3zs0js55sd] {
    padding: 8px 16px;
    border-radius: 10px;
    border: 1px solid #fee2e2;
    background: #fff5f5;
    color: #dc2626;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
}

.btn-modal-logout:hover[b-3zs0js55sd] {
    background: #fee2e2;
    border-color: #fca5a5;
}

.btn-modal-close[b-3zs0js55sd] {
    padding: 8px 18px;
    border-radius: 10px;
    border: 1.5px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
}

.btn-modal-close:hover[b-3zs0js55sd] {
    background: #f1f5f9;
    color: #0f172a;
}

.spin[b-3zs0js55sd] {
    animation: spin-anim-b-3zs0js55sd 1s linear infinite;
}

@keyframes spin-anim-b-3zs0js55sd {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@media (max-width: 640px) {
    .form-grid[b-3zs0js55sd] { grid-template-columns: 1fr; }
    .stats-cards-grid[b-3zs0js55sd], .scores-row[b-3zs0js55sd], .modal-ach-grid[b-3zs0js55sd] { grid-template-columns: 1fr; }
    .tab-btn span[b-3zs0js55sd] { display: none; }
}

/* ══════════════════════════════════════════════════════════════ */
/* CHẾ ĐỘ TỐI (DARK MODE) CHO PROFILE MODAL                      */
/* ══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .profile-modal-card[b-3zs0js55sd] {
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
    color: #f8fafc;
}

[data-theme="dark"] .modal-avatar[b-3zs0js55sd] {
    border-color: #0f172a;
}

[data-theme="dark"] .user-fullname[b-3zs0js55sd] {
    color: #f8fafc !important;
}

[data-theme="dark"] .user-tag[b-3zs0js55sd] {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .user-email-text[b-3zs0js55sd] {
    color: #94a3b8 !important;
}

[data-theme="dark"] .meta-dot[b-3zs0js55sd] {
    color: #475569 !important;
}

[data-theme="dark"] .streak-badge[b-3zs0js55sd] {
    background: rgba(234, 88, 12, 0.18);
    border-color: rgba(234, 88, 12, 0.35);
    color: #fb923c;
}

[data-theme="dark"] .avatar-picker-popover[b-3zs0js55sd] {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .picker-title[b-3zs0js55sd] {
    color: #cbd5e1;
}

[data-theme="dark"] .emoji-btn:hover[b-3zs0js55sd],
[data-theme="dark"] .emoji-btn.active[b-3zs0js55sd] {
    background: #334155;
    border-color: #475569;
}

[data-theme="dark"] .modal-tabs[b-3zs0js55sd] {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .tab-btn[b-3zs0js55sd] {
    color: #94a3b8;
}

[data-theme="dark"] .tab-btn:hover[b-3zs0js55sd] {
    color: #f8fafc;
}

[data-theme="dark"] .tab-btn.active[b-3zs0js55sd] {
    color: #38bdf8;
    border-bottom-color: #38bdf8;
}

[data-theme="dark"] .field-label[b-3zs0js55sd] {
    color: #cbd5e1;
}

[data-theme="dark"] .field-badge-tip[b-3zs0js55sd],
[data-theme="dark"] .field-badge-readonly[b-3zs0js55sd] {
    background: #111d33;
    border: 1px solid #233554;
    color: #94a3b8;
}

[data-theme="dark"] .field-badge-verified[b-3zs0js55sd] {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.35);
    color: #34d399;
}

[data-theme="dark"] .field-badge-cooldown[b-3zs0js55sd] {
    background: rgba(234, 88, 12, 0.15);
    border-color: rgba(234, 88, 12, 0.35);
    color: #fb923c;
}

[data-theme="dark"] .field-hint-notice[b-3zs0js55sd] {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.25);
    color: #fbbf24;
}

[data-theme="dark"] .field-hint-notice i[b-3zs0js55sd] {
    color: #f59e0b;
}

[data-theme="dark"] .notice-cooldown[b-3zs0js55sd] {
    background: rgba(234, 88, 12, 0.12) !important;
    border-color: rgba(234, 88, 12, 0.25) !important;
    color: #fb923c !important;
}

[data-theme="dark"] .notice-cooldown i[b-3zs0js55sd] {
    color: #ea580c !important;
}

[data-theme="dark"] .role-badge.role-user[b-3zs0js55sd] {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.35);
    color: #34d399;
}

[data-theme="dark"] .role-badge.role-admin[b-3zs0js55sd] {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.35);
    color: #f87171;
}

[data-theme="dark"] .form-control-custom[b-3zs0js55sd] {
    background: #111d33;
    border-color: #233554;
    color: #f8fafc;
}

[data-theme="dark"] .form-control-custom:focus[b-3zs0js55sd] {
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}

[data-theme="dark"] .readonly-field[b-3zs0js55sd] {
    background: #111d33 !important;
    border-color: #233554 !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .pill-btn[b-3zs0js55sd] {
    background: #111d33;
    border-color: #233554;
    color: #94a3b8;
}

[data-theme="dark"] .pill-btn:hover[b-3zs0js55sd] {
    background: #1e293b;
    color: #f8fafc;
}

[data-theme="dark"] .pill-btn.active[b-3zs0js55sd] {
    background: #0ea5e9;
    border-color: #0ea5e9;
    color: #ffffff;
}

[data-theme="dark"] .profile-quick-stats[b-3zs0js55sd] {
    background: #111d33;
    border-color: #233554;
}

[data-theme="dark"] .quick-stat-icon[b-3zs0js55sd] {
    background: #1e293b;
    border: 1px solid #334155;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .quick-stat-val[b-3zs0js55sd] {
    color: #f8fafc;
}

[data-theme="dark"] .quick-stat-lbl[b-3zs0js55sd] {
    color: #94a3b8;
}

[data-theme="dark"] .stat-highlight-card[b-3zs0js55sd] {
    background: #111d33;
    border-color: #233554;
}

[data-theme="dark"] .stat-streak[b-3zs0js55sd] {
    background: rgba(234, 88, 12, 0.12);
    border-color: rgba(234, 88, 12, 0.3);
}

[data-theme="dark"] .stat-tests[b-3zs0js55sd] {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.3);
}

[data-theme="dark"] .stat-num[b-3zs0js55sd] {
    color: #f8fafc;
}

[data-theme="dark"] .stat-text[b-3zs0js55sd] {
    color: #cbd5e1;
}

[data-theme="dark"] .stat-sub[b-3zs0js55sd] {
    color: #94a3b8;
}

[data-theme="dark"] .block-title[b-3zs0js55sd] {
    color: #f8fafc;
}

[data-theme="dark"] .score-card[b-3zs0js55sd] {
    background: #111d33;
    border-color: #233554;
}

[data-theme="dark"] .score-ielts[b-3zs0js55sd] {
    background: rgba(2, 132, 199, 0.12);
    border-color: rgba(2, 132, 199, 0.3);
}

[data-theme="dark"] .score-ielts .score-prog[b-3zs0js55sd] {
    color: #38bdf8;
}

[data-theme="dark"] .score-hsk[b-3zs0js55sd] {
    background: rgba(220, 38, 38, 0.12);
    border-color: rgba(220, 38, 38, 0.3);
}

[data-theme="dark"] .score-hsk .score-prog[b-3zs0js55sd] {
    color: #f87171;
}

[data-theme="dark"] .score-value[b-3zs0js55sd] {
    color: #f8fafc;
}

[data-theme="dark"] .score-scale[b-3zs0js55sd] {
    color: #94a3b8;
}

[data-theme="dark"] .modal-ach-card[b-3zs0js55sd] {
    background: #111d33;
    border-color: #233554;
}

[data-theme="dark"] .modal-ach-card.unlocked[b-3zs0js55sd] {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.12) 0%, #15243f 100%);
    border-color: rgba(234, 179, 8, 0.4);
}

[data-theme="dark"] .modal-ach-card.locked[b-3zs0js55sd] {
    background: #111d33;
    border-color: #233554;
}

[data-theme="dark"] .modal-ach-icon[b-3zs0js55sd] {
    background: #1e293b;
}

[data-theme="dark"] .modal-ach-card.unlocked .modal-ach-icon[b-3zs0js55sd] {
    background: rgba(234, 179, 8, 0.2);
}

[data-theme="dark"] .modal-ach-title[b-3zs0js55sd] {
    color: #f8fafc;
}

[data-theme="dark"] .modal-ach-desc[b-3zs0js55sd] {
    color: #94a3b8;
}

[data-theme="dark"] .modal-ach-progress-bar[b-3zs0js55sd] {
    background: #1e293b;
}

[data-theme="dark"] .modal-ach-progress-text[b-3zs0js55sd] {
    color: #94a3b8;
}

[data-theme="dark"] .modal-ach-card.unlocked .modal-ach-progress-text[b-3zs0js55sd] {
    color: #34d399;
}

[data-theme="dark"] .history-item[b-3zs0js55sd] {
    background: #111d33;
    border-color: #233554;
}

[data-theme="dark"] .history-item:hover[b-3zs0js55sd] {
    background: #182a4a;
}

[data-theme="dark"] .history-title[b-3zs0js55sd] {
    color: #f8fafc;
}

[data-theme="dark"] .history-time[b-3zs0js55sd] {
    color: #94a3b8;
}

[data-theme="dark"] .history-skill-tag[b-3zs0js55sd] {
    background: rgba(56, 189, 248, 0.12);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.25);
}

[data-theme="dark"] .history-score[b-3zs0js55sd] {
    color: #f8fafc;
}

[data-theme="dark"] .history-percent[b-3zs0js55sd] {
    color: #94a3b8;
}

[data-theme="dark"] .modal-footer[b-3zs0js55sd] {
    background: #0f172a;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .btn-modal-close[b-3zs0js55sd] {
    background: #1e293b;
    border-color: #334155;
    color: #cbd5e1;
}

[data-theme="dark"] .btn-modal-close:hover[b-3zs0js55sd] {
    background: #334155;
    color: #f8fafc;
}

[data-theme="dark"] .btn-modal-logout[b-3zs0js55sd] {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.25);
    color: #f87171;
}

[data-theme="dark"] .btn-modal-logout:hover[b-3zs0js55sd] {
    background: rgba(239, 68, 68, 0.22);
    border-color: rgba(239, 68, 68, 0.4);
}

[data-theme="dark"] .empty-state[b-3zs0js55sd] {
    color: #64748b;
}
/* /Layout/AdminLayout.razor.rz.scp.css */
/* ========================================================================= */
/* ADMIN LAYOUT MULTI-DOMAIN THEMES (IELTS, HSK, USERS)                      */
/* ========================================================================= */
.admin-layout[b-da23csv3fu] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    font-family: 'Be Vietnam Pro', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ========================================================================= */
/* 1. IELTS THEME (CLEAN BRAND BLUE)                                         */
/* ========================================================================= */
.theme-ielts[b-da23csv3fu] {
    background-color: #f8fafc;
    color: #1e293b;
}

.theme-ielts .admin-topbar[b-da23csv3fu] {
    background-color: #ffffff;
    border-bottom: 1px solid #e2e8f0;
}

.theme-ielts .nav-tab.active[b-da23csv3fu] {
    background-color: #f0f9ff;
    color: #0284c7;
    border: 1px solid #bae6fd;
}

.theme-ielts .user-avatar[b-da23csv3fu] {
    background-color: #0284c7;
    color: #ffffff;
}

.theme-ielts .admin-sidebar[b-da23csv3fu] {
    background-color: #ffffff;
    border-right: 1px solid #e2e8f0;
}

.theme-ielts .menu-item.active a[b-da23csv3fu] {
    background-color: #0284c7;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.28);
}

.theme-ielts .menu-item.active a i[b-da23csv3fu] {
    color: #ffffff;
}

.theme-ielts .admin-content[b-da23csv3fu] {
    background-color: #f8fafc;
}

/* ========================================================================= */
/* 2. HSK THEME (CHINESE IMPERIAL RED)                                       */
/* ========================================================================= */
.theme-hsk[b-da23csv3fu] {
    background-color: #fffaf9;
    color: #1e293b;
}

.theme-hsk .admin-topbar[b-da23csv3fu] {
    background-color: #ffffff;
    border-bottom: 1.5px solid #fee2e2;
}

.theme-hsk .nav-tab.active[b-da23csv3fu] {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #ffffff;
    border: 1px solid #dc2626;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.3);
}

.theme-hsk .user-avatar[b-da23csv3fu] {
    background: linear-gradient(135deg, #dc2626, #991b1b);
    color: #ffffff;
}

.theme-hsk .admin-sidebar[b-da23csv3fu] {
    background-color: #ffffff;
    border-right: 1px solid #fee2e2;
}

.theme-hsk .sidebar-header h3[b-da23csv3fu] {
    color: #dc2626;
}

.theme-hsk .menu-item a:hover[b-da23csv3fu] {
    background-color: #fef2f2;
    color: #dc2626;
}

.theme-hsk .menu-item a:hover i[b-da23csv3fu] {
    color: #dc2626;
}

.theme-hsk .menu-item.active a[b-da23csv3fu] {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.3);
}

.theme-hsk .menu-item.active a i[b-da23csv3fu] {
    color: #ffffff;
}

.theme-hsk .admin-content[b-da23csv3fu] {
    background-color: #fffaf9;
}

/* ========================================================================= */
/* 4. USERS COMMON THEME                                                     */
/* ========================================================================= */
.theme-users[b-da23csv3fu] {
    background-color: #f8fafc;
    color: #1e293b;
}

.theme-users .admin-topbar[b-da23csv3fu] {
    background-color: #ffffff;
    border-bottom: 1px solid #e2e8f0;
}

.theme-users .nav-tab.active[b-da23csv3fu] {
    background-color: #0f172a;
    color: #ffffff;
    border: 1px solid #0f172a;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25);
}

.theme-users .user-avatar[b-da23csv3fu] {
    background-color: #0f172a;
    color: #ffffff;
}

.theme-users .admin-sidebar[b-da23csv3fu] {
    background-color: #ffffff;
    border-right: 1px solid #e2e8f0;
}

.theme-users .menu-item.active a[b-da23csv3fu] {
    background-color: #0f172a;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25);
}

.theme-users .menu-item.active a i[b-da23csv3fu] {
    color: #ffffff;
}

.theme-users .admin-content[b-da23csv3fu] {
    background-color: #f8fafc;
}

/* ========================================================================= */
/* BASE TOPBAR & SIDEBAR STYLES                                              */
/* ========================================================================= */
.admin-topbar[b-da23csv3fu] {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    z-index: 100;
    transition: all 0.3s ease;
}

.topbar-logo[b-da23csv3fu] {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.logo-icon[b-da23csv3fu] {
    font-size: 24px;
}

.logo-text[b-da23csv3fu] {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.topbar-nav[b-da23csv3fu] {
    display: flex;
    gap: 10px;
    align-items: center;
}

.nav-tab[b-da23csv3fu] {
    background: transparent;
    border: 1px solid transparent;
    padding: 8px 16px;
    font-size: 0.92rem;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-tab:hover[b-da23csv3fu] {
    background-color: rgba(0, 0, 0, 0.04);
}

.topbar-user[b-da23csv3fu] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-avatar[b-da23csv3fu] {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1rem;
}

.user-info-text[b-da23csv3fu] {
    display: flex;
    flex-direction: column;
}

.user-name[b-da23csv3fu] {
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.2;
}

.domain-tag[b-da23csv3fu] {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.domain-tag-ielts[b-da23csv3fu] { color: #0284c7; }
.domain-tag-hsk[b-da23csv3fu] { color: #dc2626; }
.domain-tag-users[b-da23csv3fu] { color: #64748b; }

.btn-admin-logout[b-da23csv3fu] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 4px;
}

.btn-admin-logout:hover[b-da23csv3fu] {
    background: #ef4444;
    color: #ffffff;
    border-color: #ef4444;
}

.btn-topbar-login[b-da23csv3fu] {
    background: #0284c7;
    color: #ffffff;
    padding: 8px 16px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.25);
}

.btn-topbar-login:hover[b-da23csv3fu] {
    background: #0369a1;
    color: #ffffff;
}

/* Body Layout */
.admin-body[b-da23csv3fu] {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Sidebar Styles */
.admin-sidebar[b-da23csv3fu] {
    width: 270px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

.sidebar-header[b-da23csv3fu] {
    padding: 24px 20px 12px;
}

.sidebar-header h3[b-da23csv3fu] {
    margin: 0;
    font-size: 0.78rem;
    text-transform: uppercase;
    color: #94a3b8;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.sidebar-menu[b-da23csv3fu] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-item[b-da23csv3fu] {
    margin: 4px 14px;
}

.menu-item a[b-da23csv3fu] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    color: #475569;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 700;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.menu-item a i[b-da23csv3fu] {
    font-size: 1.15rem;
    color: #94a3b8;
}

/* Main Content Styles */
.admin-content[b-da23csv3fu] {
    flex: 1;
    overflow-y: auto;
    transition: all 0.3s ease;
}

/* Auth Guard Screen */
.admin-auth-guard[b-da23csv3fu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
    background: #f8fafc;
    color: #0f172a;
    font-family: 'Plus Jakarta Sans', 'Be Vietnam Pro', system-ui, sans-serif;
    gap: 16px;
    padding: 24px;
    text-align: center;
}

.auth-guard-card[b-da23csv3fu] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 40px 32px;
    max-width: 440px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.auth-guard-icon[b-da23csv3fu] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #fee2e2;
    color: #ef4444;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
}
/* /Layout/ExamLayout.razor.rz.scp.css */
*[b-gqrpth4uwn], *[b-gqrpth4uwn]::before, *[b-gqrpth4uwn]::after {
    box-sizing: border-box;
}

html[b-gqrpth4uwn], body[b-gqrpth4uwn] {
    margin: 0;
    padding: 0;
    /* allow normal page scroll for exam pages */
    overflow-x: hidden;
}

.exam-shell[b-gqrpth4uwn] {
    width: 100%;
    min-height: 100vh;
}
/* /Layout/HskLayout.razor.rz.scp.css */
.app-shell[b-c0jhjc394y] {
    display: flex;
    min-height: 100vh;
    background-color: var(--ig-bg);
    color: var(--ig-text);
}

.app-main[b-c0jhjc394y] {
    flex: 1;
    min-width: 0;
    margin-left: 260px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-left 0.28s cubic-bezier(0.32,0.72,0,1);
}

.sidebar-collapsed .app-main[b-c0jhjc394y] {
    margin-left: 72px;
}

.no-sidebar .app-main[b-c0jhjc394y] {
    margin-left: 0 !important;
}

.top-navbar[b-c0jhjc394y] {
    position: sticky;
    top: 0;
    z-index: 500;
    background-color: var(--ig-bg);
    border-bottom: 1px solid var(--ig-border);
    backdrop-filter: blur(8px);
}

.top-navbar-inner[b-c0jhjc394y] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.sb-mobile-toggle[b-c0jhjc394y] {
    display: none;
    width: 38px; height: 38px;
    border-radius: 10px;
    border: 1px solid #ede9fe;
    background: #f5f3ff;
    color: #6c63ff;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    cursor: pointer;
    margin-left: 8px;
    transition: background 0.2s, transform 0.2s;
}

.sb-mobile-toggle:hover[b-c0jhjc394y] {
    background: #ede9fe;
    transform: scale(1.05);
}

[data-theme="dark"] .sb-mobile-toggle[b-c0jhjc394y] {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(255, 255, 255, 0.15);
    color: #a5b4fc;
}

[data-theme="dark"] .sb-mobile-toggle:hover[b-c0jhjc394y] {
    background: rgba(49, 46, 129, 0.5);
    color: #c7d2fe;
}

main[b-c0jhjc394y] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

article.content[b-c0jhjc394y] {
    flex: 1;
    padding: 2rem 1.5rem !important;
}

@media (min-width: 641px) {
    article.content[b-c0jhjc394y] {
        padding: 3rem 2rem !important;
    }
}

@media (max-width: 900px) {
    .app-main[b-c0jhjc394y] { margin-left: 0 !important; }
    .sb-mobile-toggle[b-c0jhjc394y] { display: inline-flex; }
}
/* /Layout/IeltsLayout.razor.rz.scp.css */
.app-shell[b-71uolmd9cj] {
    display: flex;
    min-height: 100vh;
    background-color: var(--ig-bg);
    color: var(--ig-text);
    --sidebar-width: 260px;
}

.app-shell.sidebar-collapsed[b-71uolmd9cj],
.sidebar-collapsed[b-71uolmd9cj] {
    --sidebar-width: 74px;
}

.app-main[b-71uolmd9cj] {
    flex: 1;
    min-width: 0;
    margin-left: var(--sidebar-width, 260px);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-left 0.28s cubic-bezier(0.32,0.72,0,1);
}

.sidebar-collapsed .app-main[b-71uolmd9cj] {
    margin-left: var(--sidebar-width, 74px);
}

.no-sidebar .app-main[b-71uolmd9cj] {
    margin-left: 0 !important;
}

.top-navbar[b-71uolmd9cj] {
    position: sticky;
    top: 0;
    z-index: 500;
    background-color: var(--ig-bg);
    border-bottom: 1px solid var(--ig-border);
    backdrop-filter: blur(8px);
}

.top-navbar-inner[b-71uolmd9cj] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.sb-mobile-toggle[b-71uolmd9cj] {
    display: none;
    width: 38px; height: 38px;
    border-radius: 10px;
    border: 1px solid #ede9fe;
    background: #f5f3ff;
    color: #6c63ff;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    cursor: pointer;
    margin-left: 8px;
    transition: background 0.2s, transform 0.2s;
}

.sb-mobile-toggle:hover[b-71uolmd9cj] {
    background: #ede9fe;
    transform: scale(1.05);
}

[data-theme="dark"] .sb-mobile-toggle[b-71uolmd9cj] {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(255, 255, 255, 0.15);
    color: #a5b4fc;
}

[data-theme="dark"] .sb-mobile-toggle:hover[b-71uolmd9cj] {
    background: rgba(49, 46, 129, 0.5);
    color: #c7d2fe;
}

main[b-71uolmd9cj] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

article.content[b-71uolmd9cj] {
    flex: 1;
    padding: 2rem 1.5rem !important;
}

@media (min-width: 641px) {
    article.content[b-71uolmd9cj] {
        padding: 3rem 2rem !important;
    }
}

@media (max-width: 900px) {
    .app-shell[b-71uolmd9cj], .app-shell.sidebar-collapsed[b-71uolmd9cj], .sidebar-collapsed[b-71uolmd9cj] {
        --sidebar-width: 0px !important;
    }
    .app-main[b-71uolmd9cj] { margin-left: 0 !important; }
    .sb-mobile-toggle[b-71uolmd9cj] { display: inline-flex; }
}
/* /Layout/LeftSidebar.razor.rz.scp.css */
/* ─── Left Sidebar — Theme-driven Design System ─── */
.left-sidebar[b-5z9ufnhowv] {
    position: fixed;
    left: 0; 
    top: 0; 
    bottom: 0;
    width: 260px;
    display: flex;
    flex-direction: column;
    z-index: 600;
    transition: width 0.28s cubic-bezier(0.32, 0.72, 0, 1), transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.left-sidebar.collapsed[b-5z9ufnhowv] {
    width: 74px;
}

/* ── Header ── */
.sb-header[b-5z9ufnhowv] {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px 0 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
    gap: 8px;
    background: transparent;
}

.sb-brand[b-5z9ufnhowv] {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none !important;
    min-width: 0;
    transition: opacity 0.2s ease;
}

.sb-brand:hover[b-5z9ufnhowv] {
    opacity: 0.9;
}

.sb-brand-img[b-5z9ufnhowv] {
    height: 32px;
    max-height: 34px;
    width: auto;
    object-fit: contain;
    display: block;
    transition: transform 0.22s ease;
}

.sb-brand:hover .sb-brand-img[b-5z9ufnhowv] {
    transform: scale(1.04);
}

.sb-brand-badge[b-5z9ufnhowv] {
    font-size: 0.62rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 6px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.sb-collapse-btn[b-5z9ufnhowv] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 1rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.sb-collapse-btn:hover[b-5z9ufnhowv] {
    background: rgba(255, 255, 255, 0.18);
    transform: scale(1.05);
}

.collapsed .sb-header[b-5z9ufnhowv] {
    justify-content: center;
    padding: 0 10px;
}

.collapsed .sb-brand-text-wrapper[b-5z9ufnhowv] { 
    display: none; 
}


/* ── Section labels ── */
.sb-section-label[b-5z9ufnhowv] {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    padding: 6px 14px 2px 14px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
}

.sb-section-gap[b-5z9ufnhowv] {
    margin-top: 14px;
}

/* ── Navigation Container ── */
.sb-nav[b-5z9ufnhowv] {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px 10px 24px;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: rgba(56, 189, 248, 0.5) rgba(0, 0, 0, 0.12);
}

.sb-nav[b-5z9ufnhowv]::-webkit-scrollbar { 
    width: 5px; 
    display: block !important;
}
.sb-nav[b-5z9ufnhowv]::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.12);
    border-radius: 9999px;
}
.sb-nav[b-5z9ufnhowv]::-webkit-scrollbar-thumb { 
    background: #0284c7; 
    border-radius: 9999px;
}


.sb-empty[b-5z9ufnhowv] {
    text-align: center;
    color: #94a3b8;
    font-size: 0.85rem;
    padding: 24px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.sb-empty i[b-5z9ufnhowv] { font-size: 1.4rem; color: #cbd5e1; }

/* ── Nav items ── */
.sb-item[b-5z9ufnhowv] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 10px;
    text-decoration: none !important;
    color: #334155;
    font-size: 0.9rem;
    font-weight: 500;
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
    transition: all 0.2s ease;
    position: relative;
    margin-bottom: 4px;
}

.sb-item:hover[b-5z9ufnhowv] {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #0f172a;
    transform: translateX(2px);
}

.sb-item:global(.active)[b-5z9ufnhowv] {
    background: #f0f9ff !important;
    border: 1px solid #bae6fd !important;
    color: #0369a1 !important;
    font-weight: 700;
}

.sb-item-icon[b-5z9ufnhowv] {
    width: 34px; 
    height: 34px;
    border-radius: 8px;
    background: #f8fafc;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.sb-item:hover .sb-item-icon[b-5z9ufnhowv] {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #0f172a;
}

.sb-item:global(.active) .sb-item-icon[b-5z9ufnhowv] {
    background: #0284c7;
    color: #ffffff;
    border-color: #0284c7;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3);
}

.sb-item-body[b-5z9ufnhowv] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.sb-item-name[b-5z9ufnhowv] {
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
    color: #1e293b;
}

.sb-item-desc[b-5z9ufnhowv] {
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sb-item:global(.active) .sb-item-desc[b-5z9ufnhowv] { 
    color: #6366f1; 
}

/* ── Item Badges ── */
.sb-nav-badge[b-5z9ufnhowv] {
    margin-left: auto;
    font-size: 0.62rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 99px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    line-height: 1.2;
}

.sb-nav-badge.badge-new[b-5z9ufnhowv] {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.4);
}

.sb-nav-badge.badge-hot[b-5z9ufnhowv] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(245, 158, 11, 0.25));
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.45);
}

.collapsed .sb-nav-badge[b-5z9ufnhowv] { display: none; }

/* ── User Mini Status Badge ── */
.sb-user-mini-badge[b-5z9ufnhowv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px;
    border-radius: 10px;
    background: rgba(167, 139, 250, 0.12);
    border: 1px solid rgba(167, 139, 250, 0.25);
    margin-bottom: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #e2e8f0;
}

.sb-mini-stat[b-5z9ufnhowv] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Collapsed nav tweak */
.collapsed .sb-item[b-5z9ufnhowv] {
    justify-content: center;
    padding: 10px 0;
    gap: 0;
    margin-bottom: 8px;
}

.collapsed .sb-item-body[b-5z9ufnhowv] { display: none; }
.collapsed .sb-item:hover[b-5z9ufnhowv] { transform: scale(1.06); }
.collapsed .sb-section-label[b-5z9ufnhowv] { display: none; }

/* ── Bottom sticky program switcher ── */
.sb-bottom[b-5z9ufnhowv] {
    flex-shrink: 0;
    padding: 12px;
    border-top: 1px solid #e2e8f0;
    background: #ffffff;
    position: sticky;
    bottom: 0;
}

.sb-switcher-card[b-5z9ufnhowv] {
    background: #f8fafc;
    border: 1.5px solid #cbd5e1;
    border-radius: 14px;
    padding: 10px 12px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sb-switcher-label[b-5z9ufnhowv] {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 8px;
    text-align: center;
    width: 100%;
}
.sb-switcher-label i[b-5z9ufnhowv] {
    font-size: 0.85rem;
    color: #6366f1;
}

.sb-switcher[b-5z9ufnhowv] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    background: #e2e8f0;
    border-radius: 10px;
    padding: 3px;
    width: 100%;
    max-width: 190px;
    margin: 0 auto;
}

.sb-switch-btn[b-5z9ufnhowv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sb-switch-btn:hover[b-5z9ufnhowv] { 
    color: #0f172a; 
    background: rgba(255, 255, 255, 0.6); 
}

.sb-switch-btn.active[b-5z9ufnhowv] {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    font-weight: 700;
}

.sb-switch-dot[b-5z9ufnhowv] {
    width: 7px; 
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sb-switcher-hint[b-5z9ufnhowv] {
    text-align: center;
    font-size: 0.72rem;
    color: #64748b;
    margin-top: 6px;
    font-weight: 500;
    width: 100%;
}

.sb-program-tag[b-5z9ufnhowv] {
    font-weight: 700;
}

/* Collapsed switcher */
.sb-switcher-collapsed[b-5z9ufnhowv] {
    display: flex;
    justify-content: center;
    position: relative;
}

.sb-switch-collapsed-btn[b-5z9ufnhowv] {
    width: 44px; 
    height: 44px;
    border-radius: 12px;
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    font-weight: 800;
    color: #0f172a;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.sb-switch-collapsed-btn:hover[b-5z9ufnhowv] {
    background: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.18);
    border-color: #6366f1;
}

.sb-switch-collapsed-text[b-5z9ufnhowv] { font-size: 0.85rem; }

.sb-program-dropdown[b-5z9ufnhowv] {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 150px;
    z-index: 10;
    animation: sb-pop-b-5z9ufnhowv 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.sb-dropdown-title[b-5z9ufnhowv] {
    font-size: 0.68rem;
    font-weight: 700;
    color: #94a3b8;
    padding: 4px 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@keyframes sb-pop-b-5z9ufnhowv {
    from { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.95); }
    to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

.sb-program-option[b-5z9ufnhowv] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: #475569;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
}

.sb-program-option:hover[b-5z9ufnhowv] { 
    background: #f1f5f9; 
    color: #0f172a; 
}
.sb-program-option.active[b-5z9ufnhowv] { 
    background: #eef2ff; 
    color: #6366f1; 
}

/* Backdrop for mobile */
.sb-backdrop[b-5z9ufnhowv] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(4px);
    z-index: 590;
    animation: sb-fade-b-5z9ufnhowv 0.2s ease;
}

@keyframes sb-fade-b-5z9ufnhowv { from { opacity: 0; } to { opacity: 1; } }

/* ─── Right-to-Left Flying Animation when switching learning content ─── */
.sb-nav-anim-wrapper[b-5z9ufnhowv] {
    display: flex;
    flex-direction: column;
    width: 100%;
    animation: sbFlyRightToLeft-b-5z9ufnhowv 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.sb-anim-fly-in[b-5z9ufnhowv] {
    animation: sbFlyRightToLeft-b-5z9ufnhowv 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.sb-nav-anim-wrapper .sb-section-label[b-5z9ufnhowv] {
    animation: sbFlyRightToLeft-b-5z9ufnhowv 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.01s;
}

.sb-nav-anim-wrapper .sb-item[b-5z9ufnhowv] {
    animation: sbItemFlyRightToLeft-b-5z9ufnhowv 0.38s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.sb-nav-anim-wrapper .sb-item:nth-child(1)[b-5z9ufnhowv] { animation-delay: 0.03s; }
.sb-nav-anim-wrapper .sb-item:nth-child(2)[b-5z9ufnhowv] { animation-delay: 0.07s; }
.sb-nav-anim-wrapper .sb-item:nth-child(3)[b-5z9ufnhowv] { animation-delay: 0.11s; }
.sb-nav-anim-wrapper .sb-item:nth-child(4)[b-5z9ufnhowv] { animation-delay: 0.15s; }
.sb-nav-anim-wrapper .sb-item:nth-child(5)[b-5z9ufnhowv] { animation-delay: 0.19s; }
.sb-nav-anim-wrapper .sb-item:nth-child(6)[b-5z9ufnhowv] { animation-delay: 0.23s; }

@keyframes sbFlyRightToLeft-b-5z9ufnhowv {
    0% {
        opacity: 0;
        transform: translateX(45px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes sbItemFlyRightToLeft-b-5z9ufnhowv {
    0% {
        opacity: 0;
        transform: translateX(40px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Responsive */
@media (max-width: 900px) {
    .left-sidebar[b-5z9ufnhowv] {
        transform: translateX(-100%);
        width: 280px !important;
    }
    .left-sidebar.mobile-open[b-5z9ufnhowv] {
        transform: translateX(0);
        box-shadow: 8px 0 32px rgba(15, 23, 42, 0.18);
    }
    .left-sidebar.collapsed.mobile-open[b-5z9ufnhowv] {
        width: 280px !important;
    }
    .left-sidebar.collapsed.mobile-open .sb-brand-text-wrapper[b-5z9ufnhowv],
    .left-sidebar.collapsed.mobile-open .sb-item-body[b-5z9ufnhowv] { display: flex !important; }
    .left-sidebar.collapsed.mobile-open .sb-header[b-5z9ufnhowv] { justify-content: space-between !important; padding: 0 14px 0 18px !important; }
    .left-sidebar.collapsed.mobile-open .sb-section-label[b-5z9ufnhowv] { display: flex !important; }
}

/* ─── IELTS & HSK Theme Switcher Card & Scrollbar Overrides ─── */
.theme-ielts .sb-bottom[b-5z9ufnhowv] {
    background: #081a30 !important;
    border-top: 1px solid rgba(56, 189, 248, 0.18) !important;
}
.theme-ielts .sb-switcher-card[b-5z9ufnhowv] {
    background: rgba(12, 35, 64, 0.85) !important;
    border-color: rgba(56, 189, 248, 0.25) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}
.theme-ielts .sb-switcher[b-5z9ufnhowv] {
    background: rgba(4, 14, 26, 0.75) !important;
}
.theme-ielts .sb-switch-btn[b-5z9ufnhowv] {
    color: #94a3b8 !important;
}
.theme-ielts .sb-switch-btn.active[b-5z9ufnhowv] {
    background: #0ea5e9 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.4) !important;
}
.theme-ielts .sb-switcher-hint[b-5z9ufnhowv] {
    color: #7dd3fc !important;
}
.theme-ielts .sb-nav[b-5z9ufnhowv]::-webkit-scrollbar-thumb {
    background: #38bdf8 !important;
}

.theme-hsk .sb-bottom[b-5z9ufnhowv] {
    background: #3a0a0a !important;
    border-top: 1px solid rgba(239, 68, 68, 0.25) !important;
}
.theme-hsk .sb-switcher-card[b-5z9ufnhowv] {
    background: rgba(69, 10, 10, 0.85) !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}
.theme-hsk .sb-switcher[b-5z9ufnhowv] {
    background: rgba(26, 5, 5, 0.75) !important;
}
.theme-hsk .sb-switch-btn[b-5z9ufnhowv] {
    color: #fca5a5 !important;
}
.theme-hsk .sb-switch-btn.active[b-5z9ufnhowv] {
    background: #ef4444 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4) !important;
}
.theme-hsk .sb-switcher-hint[b-5z9ufnhowv] {
    color: #fca5a5 !important;
}
.theme-hsk .sb-nav[b-5z9ufnhowv]::-webkit-scrollbar-thumb {
    background: #ef4444 !important;
}

/* ══════════════════════════════════════════════════════════════ */
/* CHẾ ĐỘ TỐI (DARK MODE) CHO LEFT SIDEBAR                       */
/* ══════════════════════════════════════════════════════════════ */
/* Generic dark sidebar — không áp lên IELTS (IELTS tự có nền navy xanh đẹp riêng) */
[data-theme="dark"] .left-sidebar:not(.theme-ielts)[b-5z9ufnhowv] {
    background: #091322;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
}

/* IELTS sidebar giữ nguyên nền navy xanh đặc trưng trong cả sáng lẫn tối */
[data-theme="dark"] .left-sidebar.theme-ielts[b-5z9ufnhowv] {
    background: linear-gradient(180deg, #0c2340 0%, #081a30 50%, #040e1a 100%) !important;
    border-right: 1px solid rgba(56, 189, 248, 0.15) !important;
    box-shadow: 4px 0 25px rgba(8, 26, 48, 0.3) !important;
}

[data-theme="dark"] .sb-header[b-5z9ufnhowv] {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .sb-collapse-btn[b-5z9ufnhowv] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: #94a3b8;
}

[data-theme="dark"] .sb-collapse-btn:hover[b-5z9ufnhowv] {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

[data-theme="dark"] .sb-section-label[b-5z9ufnhowv] {
    color: #64748b;
}

[data-theme="dark"] .sb-item[b-5z9ufnhowv] {
    color: #94a3b8;
}

[data-theme="dark"] .sb-item:hover[b-5z9ufnhowv] {
    background: rgba(255, 255, 255, 0.05);
    color: #f8fafc;
}

[data-theme="dark"] .sb-item-name[b-5z9ufnhowv] {
    color: #f1f5f9;
}

[data-theme="dark"] .sb-item-desc[b-5z9ufnhowv] {
    color: #64748b;
}

[data-theme="dark"] .sb-item-icon[b-5z9ufnhowv] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
    color: #94a3b8;
}

[data-theme="dark"] .sb-item:hover .sb-item-icon[b-5z9ufnhowv] {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

[data-theme="dark"] .sb-item:global(.active)[b-5z9ufnhowv] {
    background: rgba(14, 165, 233, 0.14) !important;
    border: 1px solid rgba(56, 189, 248, 0.35) !important;
    color: #38bdf8 !important;
}

[data-theme="dark"] .sb-item:global(.active) .sb-item-name[b-5z9ufnhowv] {
    color: #38bdf8 !important;
}

[data-theme="dark"] .sb-item:global(.active) .sb-item-desc[b-5z9ufnhowv] {
    color: #7dd3fc !important;
}

[data-theme="dark"] .sb-item:global(.active) .sb-item-icon[b-5z9ufnhowv] {
    background: #0ea5e9;
    color: #ffffff;
    border-color: #0ea5e9;
    box-shadow: 0 0 12px rgba(14, 165, 233, 0.45);
}

[data-theme="dark"].theme-hsk .sb-item:global(.active)[b-5z9ufnhowv],
[data-theme="dark"] .theme-hsk .sb-item:global(.active)[b-5z9ufnhowv] {
    background: rgba(239, 68, 68, 0.14) !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
    color: #f87171 !important;
}

[data-theme="dark"].theme-hsk .sb-item:global(.active) .sb-item-name[b-5z9ufnhowv],
[data-theme="dark"] .theme-hsk .sb-item:global(.active) .sb-item-name[b-5z9ufnhowv] {
    color: #f87171 !important;
}

[data-theme="dark"].theme-hsk .sb-item:global(.active) .sb-item-desc[b-5z9ufnhowv],
[data-theme="dark"] .theme-hsk .sb-item:global(.active) .sb-item-desc[b-5z9ufnhowv] {
    color: #fca5a5 !important;
}

[data-theme="dark"].theme-hsk .sb-item:global(.active) .sb-item-icon[b-5z9ufnhowv],
[data-theme="dark"] .theme-hsk .sb-item:global(.active) .sb-item-icon[b-5z9ufnhowv] {
    background: #ef4444;
    color: #ffffff;
    border-color: #ef4444;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.45);
}

[data-theme="dark"] .sb-bottom[b-5z9ufnhowv] {
    background: #060e1a !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .sb-switcher-card[b-5z9ufnhowv] {
    background: rgba(15, 23, 42, 0.75) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] .sb-switcher-label[b-5z9ufnhowv] {
    color: #94a3b8;
}

[data-theme="dark"] .sb-switcher[b-5z9ufnhowv] {
    background: rgba(2, 6, 23, 0.8) !important;
}

[data-theme="dark"] .sb-switch-btn[b-5z9ufnhowv] {
    color: #94a3b8 !important;
}

[data-theme="dark"] .sb-switch-btn:hover[b-5z9ufnhowv] {
    color: #f8fafc !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .sb-switch-btn.active[b-5z9ufnhowv] {
    background: #1e293b !important;
    color: #f8fafc !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .theme-ielts .sb-switch-btn.active[b-5z9ufnhowv] {
    background: #0ea5e9 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .theme-hsk .sb-switch-btn.active[b-5z9ufnhowv] {
    background: #ef4444 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .sb-switcher-hint[b-5z9ufnhowv] {
    color: #94a3b8 !important;
}

[data-theme="dark"] .sb-switch-collapsed-btn[b-5z9ufnhowv] {
    background: #0f172a;
    border-color: rgba(255, 255, 255, 0.15);
    color: #f8fafc;
}

[data-theme="dark"] .sb-switch-collapsed-btn:hover[b-5z9ufnhowv] {
    background: #1e293b;
    border-color: #38bdf8;
    box-shadow: 0 4px 14px rgba(56, 189, 248, 0.25);
}

[data-theme="dark"] .sb-program-dropdown[b-5z9ufnhowv] {
    background: #0f172a;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .sb-dropdown-title[b-5z9ufnhowv] {
    color: #64748b;
}

[data-theme="dark"] .sb-program-option[b-5z9ufnhowv] {
    color: #94a3b8;
}

[data-theme="dark"] .sb-program-option:hover[b-5z9ufnhowv] {
    background: rgba(255, 255, 255, 0.06);
    color: #f8fafc;
}

[data-theme="dark"] .sb-program-option.active[b-5z9ufnhowv] {
    background: rgba(99, 102, 241, 0.2);
    color: #818cf8;
}
/* /Layout/MainLayout.razor.rz.scp.css */
.app-shell[b-t7w21qqysc] {
    display: flex;
    min-height: 100vh;
    background-color: var(--ig-bg);
    color: var(--ig-text);
}

.app-main[b-t7w21qqysc] {
    flex: 1;
    min-width: 0;
    margin-left: 260px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-left 0.28s cubic-bezier(0.32,0.72,0,1);
}

.sidebar-collapsed .app-main[b-t7w21qqysc] {
    margin-left: 72px;
}

.no-sidebar .app-main[b-t7w21qqysc] {
    margin-left: 0 !important;
}

.top-navbar[b-t7w21qqysc] {
    position: sticky;
    top: 0;
    z-index: 500;
    background-color: var(--ig-bg);
    border-bottom: 1px solid var(--ig-border);
}

.top-navbar-inner[b-t7w21qqysc] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.sb-mobile-toggle[b-t7w21qqysc] {
    display: none;
    width: 38px; height: 38px;
    border-radius: 10px;
    border: 1px solid #ede9fe;
    background: #f5f3ff;
    color: #6c63ff;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    cursor: pointer;
    margin-left: 8px;
    transition: background 0.2s;
}

.sb-mobile-toggle:hover[b-t7w21qqysc] { background: #ede9fe; }

[data-theme="dark"] .sb-mobile-toggle[b-t7w21qqysc] {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(255, 255, 255, 0.15);
    color: #a5b4fc;
}

[data-theme="dark"] .sb-mobile-toggle:hover[b-t7w21qqysc] {
    background: rgba(49, 46, 129, 0.5);
    color: #c7d2fe;
}

main[b-t7w21qqysc] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

article.content[b-t7w21qqysc] {
    flex: 1;
    padding: 2rem 1.5rem !important;
}

@media (min-width: 641px) {
    article.content[b-t7w21qqysc] {
        padding: 3rem 2rem !important;
    }
}

article.content.home-content[b-t7w21qqysc] {
    padding: 0 !important;
    display: flex;
    flex-direction: column;
}

article.content.standalone-content[b-t7w21qqysc] {
    padding: 2.5rem 1.5rem 4rem !important;
    display: flex;
    flex-direction: column;
    max-width: 1040px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 900px) {
    .app-main[b-t7w21qqysc] { margin-left: 0 !important; }
    .sb-mobile-toggle[b-t7w21qqysc] { display: inline-flex; }
}
/* /Layout/NavMenu.razor.rz.scp.css */
.navbar[b-7w2ngaut6o] {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    background-color: var(--ig-bg);
    position: relative;
    z-index: 500;
    width: 100%;
    flex: 1;
}

.navbar-brand-area[b-7w2ngaut6o] {
    display: flex;
    align-items: center;
    margin-right: 16px;
}

.topbar-brand[b-7w2ngaut6o] {
    display: inline-flex;
    align-items: center;
    text-decoration: none !important;
    padding: 2px 4px;
    border-radius: 8px;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.topbar-brand:hover[b-7w2ngaut6o] {
    opacity: 0.85;
    transform: scale(1.02);
}

.topbar-brand-img[b-7w2ngaut6o] {
    height: 38px;
    max-height: 42px;
    width: auto;
    object-fit: contain;
    display: block;
}

.brand-logo-light[b-7w2ngaut6o] {
    display: block;
}

.brand-logo-dark[b-7w2ngaut6o] {
    display: none;
}

[data-theme="dark"] .brand-logo-light[b-7w2ngaut6o] {
    display: none !important;
}

[data-theme="dark"] .brand-logo-dark[b-7w2ngaut6o] {
    display: block !important;
}

.navbar-spacer[b-7w2ngaut6o] {
    flex: 1;
}

.navbar-toggler[b-7w2ngaut6o] {
    display: none !important;
}

.navbar-collapse[b-7w2ngaut6o] {
    display: flex !important;
    flex: 1;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
}

.navbar-collapse.collapse[b-7w2ngaut6o] {
    display: flex !important;
}

.navbar-nav[b-7w2ngaut6o] {
    display: flex;
    flex-direction: row !important;
    align-items: center;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.auth-nav[b-7w2ngaut6o] {
    margin-left: auto !important;
    display: flex;
    flex-direction: row !important;
    align-items: center;
    gap: 12px;
}

.nav-item[b-7w2ngaut6o] {
    margin: 0 0.25rem;
}

.nav-link[b-7w2ngaut6o] {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.8rem;
    color: var(--ig-text-secondary);
    text-decoration: none !important;
    font-weight: 500;
    transition: color 0.2s, background-color 0.2s;
    border-radius: 8px;
    background: transparent;
    border: none;
    outline: none;
    text-align: center;
    width: auto;
}

.nav-link:hover[b-7w2ngaut6o], .nav-link:focus[b-7w2ngaut6o] {
    color: var(--ig-text);
    background-color: rgba(0, 0, 0, 0.05);
    outline: none;
    text-decoration: none !important;
}

@media (prefers-color-scheme: dark) {
    .nav-link:hover[b-7w2ngaut6o], .nav-link:focus[b-7w2ngaut6o] {
        background-color: rgba(255, 255, 255, 0.1);
    }
}

.nav-link.active[b-7w2ngaut6o] {
    color: var(--ig-text);
    font-weight: 700;
}

.welcome-text[b-7w2ngaut6o] {
    color: var(--ig-text);
    cursor: default;
}

.welcome-text:hover[b-7w2ngaut6o] {
    background-color: transparent;
}

/* ── PROFILE PILL TRIGGER & POPOVER CARD ── */
.user-menu[b-7w2ngaut6o] {
    position: relative;
}

.nav-profile-pill[b-7w2ngaut6o] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 5px;
    border-radius: 30px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    color: #1e293b;
    outline: none;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.nav-profile-pill:hover[b-7w2ngaut6o],
.nav-profile-pill.active[b-7w2ngaut6o] {
    background: #ffffff;
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}

.profile-avatar-mini[b-7w2ngaut6o] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.3);
}

.profile-pill-name[b-7w2ngaut6o] {
    font-size: 0.88rem;
    font-weight: 600;
    color: #1e293b;
    max-width: 130px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-pill-arrow[b-7w2ngaut6o] {
    font-size: 0.72rem;
    color: #64748b;
    transition: transform 0.25s ease;
}

.profile-pill-arrow.rotate[b-7w2ngaut6o] {
    transform: rotate(180deg);
}

.user-backdrop[b-7w2ngaut6o] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(2px);
    border: none;
    padding: 0;
    animation: popover-fade-b-7w2ngaut6o 0.15s ease;
}

@keyframes popover-fade-b-7w2ngaut6o {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ── PROFILE POPOVER CARD ── */
.profile-popover-card[b-7w2ngaut6o] {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    width: 320px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.16), 0 4px 12px rgba(15, 23, 42, 0.06);
    z-index: 1001;
    overflow: hidden;
    animation: popover-slide-down-b-7w2ngaut6o 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes popover-slide-down-b-7w2ngaut6o {
    from { opacity: 0; transform: translateY(-8px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.popover-cover[b-7w2ngaut6o] {
    height: 52px;
    background: linear-gradient(135deg, #0c2340 0%, #1e1b4b 50%, #4338ca 100%);
    position: relative;
    padding: 8px 12px;
    display: flex;
    justify-content: flex-end;
}

.popover-close-btn[b-7w2ngaut6o] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.18s ease;
}

.popover-close-btn:hover[b-7w2ngaut6o] {
    background: rgba(255, 255, 255, 0.35);
    transform: scale(1.1);
}

.popover-avatar-container[b-7w2ngaut6o] {
    position: relative;
    width: 58px;
    height: 58px;
    margin: -29px auto 8px auto;
}

.popover-avatar[b-7w2ngaut6o] {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 800;
    border: 3px solid #ffffff;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
}

.online-indicator[b-7w2ngaut6o] {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #10b981;
    border: 2.5px solid #ffffff;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
}

.popover-user-info[b-7w2ngaut6o] {
    text-align: center;
    padding: 0 16px 12px 16px;
}

.popover-fullname[b-7w2ngaut6o] {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 2px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.popover-email[b-7w2ngaut6o] {
    font-size: 0.78rem;
    color: #64748b;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.popover-badges[b-7w2ngaut6o] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.badge-role[b-7w2ngaut6o] {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.badge-admin[b-7w2ngaut6o] {
    background: #ede9fe;
    color: #6366f1;
    border: 1px solid #c7d2fe;
}

.badge-member[b-7w2ngaut6o] {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.badge-streak[b-7w2ngaut6o] {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #ffedd5;
}

/* ── Quick Stats Row ── */
.popover-stats-row[b-7w2ngaut6o] {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 10px 14px;
    background: #f8fafc;
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 8px;
}

.popover-stat-item[b-7w2ngaut6o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.stat-label[b-7w2ngaut6o] {
    font-size: 0.65rem;
    text-transform: uppercase;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.5px;
}

.stat-val[b-7w2ngaut6o] {
    font-size: 0.85rem;
    font-weight: 800;
    color: #0f172a;
}

.popover-stat-divider[b-7w2ngaut6o] {
    width: 1px;
    height: 22px;
    background: #e2e8f0;
}

/* ── Popover Navigation List ── */
.popover-nav-list[b-7w2ngaut6o] {
    padding: 4px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.popover-nav-item[b-7w2ngaut6o] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 12px;
    text-decoration: none !important;
    color: #1e293b;
    transition: all 0.18s ease;
    background: transparent;
}

.popover-nav-item:hover[b-7w2ngaut6o] {
    background: #f1f5f9;
    transform: translateX(3px);
}

.nav-item-icon[b-7w2ngaut6o] {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.nav-item-icon.bg-blue[b-7w2ngaut6o] {
    background: #e0f2fe;
    color: #0284c7;
}

.nav-item-icon.bg-purple[b-7w2ngaut6o] {
    background: #f3e8ff;
    color: #9333ea;
}

.nav-item-content[b-7w2ngaut6o] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.nav-item-title[b-7w2ngaut6o] {
    font-size: 0.88rem;
    font-weight: 600;
    color: #0f172a;
}

.nav-item-subtitle[b-7w2ngaut6o] {
    font-size: 0.72rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-item-arrow[b-7w2ngaut6o] {
    font-size: 0.75rem;
    color: #94a3b8;
    transition: transform 0.2s ease;
}

.popover-nav-item:hover .nav-item-arrow[b-7w2ngaut6o] {
    transform: translateX(2px);
    color: #0f172a;
}

/* ── Popover Footer ── */
.popover-footer[b-7w2ngaut6o] {
    padding: 10px 12px;
    border-top: 1px solid #f1f5f9;
    background: #fafafa;
}

.btn-popover-logout[b-7w2ngaut6o] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 9px 14px;
    border-radius: 10px;
    border: 1px solid #fee2e2;
    background: #fff5f5;
    color: #dc2626;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-popover-logout:hover[b-7w2ngaut6o] {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #b91c1c;
    transform: translateY(-1px);
}

/* ── EXAM TOOLBAR (Nộp bài + đồng hồ) ── */
.exam-toolbar[b-7w2ngaut6o] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.exam-toolbar:not(:has(*))[b-7w2ngaut6o] {
    display: none;
}

.exam-toolbar-mobile[b-7w2ngaut6o] {
    display: none;
}

.exam-timer-chip[b-7w2ngaut6o] {
    font-family: 'Inter', sans-serif;
    font-variant-numeric: tabular-nums;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #2563eb;
    background: #eff6ff;
    border: 1.5px solid #2563eb;
    border-radius: 10px;
    padding: 5px 14px;
    min-width: 112px;
    text-align: center;
}

.exam-timer-chip.urgent[b-7w2ngaut6o] {
    color: #dc2626;
    background: #fef2f2;
    border-color: #dc2626;
}

.exam-submit-btn[b-7w2ngaut6o] {
    background: linear-gradient(135deg, #ea580c, #f97316);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 9px 22px;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: filter 0.2s, transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 3px 12px rgba(234, 88, 12, 0.35);
}

.exam-submit-btn:hover[b-7w2ngaut6o] {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 5px 18px rgba(234, 88, 12, 0.45);
}

.exam-secondary-btn[b-7w2ngaut6o] {
    background: #ffffff;
    color: #57606a;
    border: 1.5px solid #d0d7de;
    border-radius: 8px;
    padding: 9px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.2s, transform 0.2s, box-shadow 0.2s, color 0.2s, border-color 0.2s;
}

.exam-secondary-btn:hover[b-7w2ngaut6o] {
    color: #dc2626;
    border-color: #dc2626;
    background: #fef2f2;
    transform: translateY(-1px);
}

.btn-auth[b-7w2ngaut6o] {
    cursor: pointer;
    border-radius: 8px;
    padding: 0.5rem 1.2rem;
    margin-left: 0.5rem;
}

.btn-register[b-7w2ngaut6o] {
    background-color: var(--ig-primary);
    color: #ffffff;
    font-weight: 600;
    text-align: center;
    border-radius: 8px;
    border: none;
}

.btn-register:hover[b-7w2ngaut6o] {
    background-color: var(--ig-primary-hover);
    color: #ffffff;
}

.btn-logout[b-7w2ngaut6o] {
    color: var(--ig-danger);
    cursor: pointer;
    background: transparent;
    border: none;
}

.btn-logout:hover[b-7w2ngaut6o] {
    color: #ed4956;
    background-color: rgba(237, 73, 86, 0.1);
}

/* ── STREAK CHIP & POPOVER ── */
.streak-menu[b-7w2ngaut6o] {
    position: relative;
}

.streak-btn[b-7w2ngaut6o] {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    transition: transform 0.15s, filter 0.15s;
}

.streak-btn:hover[b-7w2ngaut6o] {
    transform: scale(1.05);
    filter: brightness(1.05);
}

.streak-btn:active[b-7w2ngaut6o] {
    transform: scale(0.97);
}

.streak-chip[b-7w2ngaut6o] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 10px;
    border-radius: 20px;
    background: linear-gradient(135deg, #fff8e8, #fffae8);
    border: 1.5px solid #e17055;
    color: #e17055;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(225, 112, 85, 0.2);
}

.streak-popover[b-7w2ngaut6o] {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 240px;
    background: #ffffff;
    border: 1px solid var(--ig-border, #d0d7de);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(31, 35, 40, 0.14);
    padding: 14px 16px;
    z-index: 1001;
    animation: streak-pop-in-b-7w2ngaut6o 0.18s ease;
}

@keyframes streak-pop-in-b-7w2ngaut6o {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.streak-popover-header[b-7w2ngaut6o] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}

.streak-popover-icon[b-7w2ngaut6o] {
    font-size: 1.3rem;
}

.streak-popover-title[b-7w2ngaut6o] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ig-text);
}

.streak-popover-body[b-7w2ngaut6o] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.streak-stat-row[b-7w2ngaut6o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.88rem;
}

.streak-stat-label[b-7w2ngaut6o] {
    color: var(--ig-text-secondary, #8e8e8e);
}

.streak-stat-value[b-7w2ngaut6o] {
    font-weight: 700;
    color: var(--ig-text);
}

.streak-stat-value.streak-current[b-7w2ngaut6o] {
    color: #e17055;
    font-size: 0.95rem;
}

.streak-popover-hint[b-7w2ngaut6o] {
    margin-top: 8px;
    padding: 8px 10px;
    background: #fff8e8;
    border-radius: 8px;
    font-size: 0.82rem;
    color: #8b5a2b;
    text-align: center;
    line-height: 1.4;
}

/* ── NOTIFICATION BELL & POPOVER ── */
.notif-menu[b-7w2ngaut6o] {
    position: relative;
    display: flex;
    align-items: center;
}

.notif-btn[b-7w2ngaut6o] {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    outline: none;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.notif-btn:hover[b-7w2ngaut6o],
.notif-btn.active[b-7w2ngaut6o] {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #1e293b;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}

.notif-bell-icon[b-7w2ngaut6o] {
    font-size: 1.15rem;
    transition: transform 0.2s ease;
}

.notif-btn:hover .notif-bell-icon[b-7w2ngaut6o],
.notif-btn.active .notif-bell-icon[b-7w2ngaut6o] {
    transform: rotate(12deg) scale(1.05);
}

.notif-badge[b-7w2ngaut6o] {
    position: absolute;
    top: -3px;
    right: -3px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
    line-height: 1;
    animation: badge-pulse-b-7w2ngaut6o 2s infinite ease-in-out;
}

@keyframes badge-pulse-b-7w2ngaut6o {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

.notif-popover[b-7w2ngaut6o] {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    width: 360px;
    max-width: 90vw;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 16px 40px -8px rgba(15, 23, 42, 0.16), 0 4px 12px rgba(15, 23, 42, 0.06);
    z-index: 1001;
    overflow: hidden;
    animation: notif-pop-in-b-7w2ngaut6o 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes notif-pop-in-b-7w2ngaut6o {
    from { opacity: 0; transform: translateY(-8px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.notif-popover-header[b-7w2ngaut6o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #edf2f7;
}

.notif-header-left[b-7w2ngaut6o] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.notif-popover-title[b-7w2ngaut6o] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
}

.notif-count-chip[b-7w2ngaut6o] {
    background: #eff6ff;
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid #bfdbfe;
}

.notif-mark-all-btn[b-7w2ngaut6o] {
    background: none;
    border: none;
    color: #2563eb;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.notif-mark-all-btn:hover[b-7w2ngaut6o] {
    background: #dbeafe;
    color: #1d4ed8;
}

.notif-popover-body[b-7w2ngaut6o] {
    max-height: 380px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.notif-loading[b-7w2ngaut6o] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 36px 20px;
    color: #64748b;
    font-size: 0.88rem;
}

.notif-empty[b-7w2ngaut6o] {
    text-align: center;
    padding: 36px 20px;
}

.notif-empty-icon[b-7w2ngaut6o] {
    font-size: 2.2rem;
    margin-bottom: 8px;
    opacity: 0.6;
}

.notif-empty-title[b-7w2ngaut6o] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 4px;
}

.notif-empty-sub[b-7w2ngaut6o] {
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.4;
    max-width: 260px;
    margin: 0 auto;
}

.notif-list[b-7w2ngaut6o] {
    display: flex;
    flex-direction: column;
}

.notif-card[b-7w2ngaut6o] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: background-color 0.15s ease;
    text-decoration: none;
    color: inherit;
}

.notif-card:last-child[b-7w2ngaut6o] {
    border-bottom: none;
}

.notif-card:hover[b-7w2ngaut6o] {
    background-color: #f8fafc;
}

.notif-card.unread[b-7w2ngaut6o] {
    background-color: #f0f7ff;
}

.notif-card.unread:hover[b-7w2ngaut6o] {
    background-color: #e6f0fd;
}

.notif-icon-wrap[b-7w2ngaut6o] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.notif-icon-wrap.notif-icon-system[b-7w2ngaut6o] {
    background: #e0f2fe;
    color: #0284c7;
}

.notif-icon-wrap.notif-icon-exam[b-7w2ngaut6o] {
    background: #fef3c7;
    color: #d97706;
}

.notif-icon-wrap.notif-icon-update[b-7w2ngaut6o] {
    background: #dcfce7;
    color: #16a34a;
}

.notif-icon-wrap.notif-icon-reminder[b-7w2ngaut6o] {
    background: #f3e8ff;
    color: #9333ea;
}

.notif-content-wrap[b-7w2ngaut6o] {
    flex: 1;
    min-width: 0;
}

.notif-title-row[b-7w2ngaut6o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 2px;
}

.notif-item-title[b-7w2ngaut6o] {
    font-size: 0.88rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
}

.notif-unread-dot[b-7w2ngaut6o] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #2563eb;
    flex-shrink: 0;
}

.notif-title-actions[b-7w2ngaut6o] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.notif-expand-chevron[b-7w2ngaut6o] {
    font-size: 0.72rem;
    color: #94a3b8;
    transition: transform 0.2s ease, color 0.2s ease;
}

.notif-card:hover .notif-expand-chevron[b-7w2ngaut6o] {
    color: #3b82f6;
}

.notif-card.expanded[b-7w2ngaut6o] {
    background-color: #f8fafc;
}

.notif-card.expanded .notif-item-message[b-7w2ngaut6o] {
    display: block;
    -webkit-line-clamp: unset;
    white-space: pre-line;
    word-break: break-word;
    color: #1e293b;
}

.notif-item-message[b-7w2ngaut6o] {
    font-size: 0.82rem;
    color: #475569;
    line-height: 1.4;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: all 0.2s ease;
}

.notif-meta-row[b-7w2ngaut6o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.72rem;
    color: #94a3b8;
}

.notif-link-btn[b-7w2ngaut6o] {
    background: none;
    border: none;
    padding: 3px 8px;
    margin: -3px -8px -3px 0;
    border-radius: 6px;
    color: #2563eb;
    font-weight: 600;
    font-size: 0.76rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    outline: none;
}

.notif-link-btn:hover[b-7w2ngaut6o] {
    background: #eff6ff;
    color: #1d4ed8;
}

.notif-link-btn i[b-7w2ngaut6o] {
    font-size: 0.75rem;
    transition: transform 0.15s ease;
}

.notif-link-btn:hover i[b-7w2ngaut6o] {
    transform: translateX(3px);
}

@media (max-width: 576px) {
    .notif-popover[b-7w2ngaut6o] {
        width: 320px;
        right: -60px;
    }
}

/* ── HOME LANDING TOPBAR COMPONENTS ── */
.home-nav-links[b-7w2ngaut6o] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 14px;
}

.home-nav-link[b-7w2ngaut6o] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    font-size: 0.88rem;
    font-weight: 550;
    color: var(--ig-text-secondary, #475569);
    text-decoration: none !important;
    border-radius: 8px;
    transition: color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
    white-space: nowrap;
    position: relative;
}

.home-nav-link:hover[b-7w2ngaut6o] {
    color: var(--ig-text, #0f172a);
    background: rgba(99, 102, 241, 0.08);
}

.home-badge-new[b-7w2ngaut6o] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 7px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
    color: #ffffff;
    box-shadow: 0 1px 6px rgba(236, 72, 153, 0.4);
    line-height: 1.3;
}

/* ── THEME SWITCHER PILL ── */
.theme-switcher-container[b-7w2ngaut6o] {
    display: flex;
    align-items: center;
}

.theme-switch-pill[b-7w2ngaut6o] {
    display: inline-flex;
    align-items: center;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    padding: 2px;
    gap: 2px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

.theme-btn[b-7w2ngaut6o] {
    border: none;
    background: transparent;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.18s ease;
    line-height: 1.2;
    outline: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.theme-btn:hover[b-7w2ngaut6o] {
    color: #0f172a;
}

.theme-btn.active[b-7w2ngaut6o] {
    background: #ffffff;
    color: #0f172a;
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.theme-sun-icon[b-7w2ngaut6o] {
    color: #f59e0b;
    font-size: 0.85rem;
}

.theme-moon-icon[b-7w2ngaut6o] {
    color: #6366f1;
    font-size: 0.85rem;
}

/* ── AUTH BUTTONS (SIGN IN & GET STARTED FREE) ── */
.btn-signin[b-7w2ngaut6o] {
    border: none;
    background: transparent;
    color: var(--ig-text-secondary, #475569);
    font-size: 0.88rem;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.18s ease;
    outline: none;
    white-space: nowrap;
}

.btn-signin:hover[b-7w2ngaut6o] {
    color: var(--ig-text, #0f172a);
    background: rgba(99, 102, 241, 0.08);
}

.btn-get-started[b-7w2ngaut6o] {
    border: none;
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
    color: #ffffff !important;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 7px 18px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
    white-space: nowrap;
    outline: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn-get-started:hover[b-7w2ngaut6o] {
    background: linear-gradient(135deg, #1d4ed8 0%, #4338ca 100%);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.45);
    transform: translateY(-1px);
}

.btn-get-started:active[b-7w2ngaut6o] {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(37, 99, 235, 0.3);
}

/* ── HOME MOBILE NAVIGATION ── */
.home-mobile-toggle[b-7w2ngaut6o] {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--ig-border, #e2e8f0);
    background: var(--ig-surface, #ffffff);
    color: var(--ig-text, #0f172a);
    font-size: 1.2rem;
    cursor: pointer;
    margin-left: 8px;
    transition: background 0.15s ease;
}

.home-mobile-drawer[b-7w2ngaut6o] {
    display: none;
}

.home-mobile-theme-row[b-7w2ngaut6o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    margin-top: 6px;
    border-top: 1px solid var(--ig-border, #e2e8f0);
}

.theme-mobile-label[b-7w2ngaut6o] {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ig-text, #0f172a);
}

@media (max-width: 992px) {
    .home-nav-links[b-7w2ngaut6o] {
        display: none;
    }

    .home-mobile-toggle[b-7w2ngaut6o] {
        display: inline-flex;
    }

    .home-mobile-backdrop[b-7w2ngaut6o] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(15, 23, 42, 0.3);
        backdrop-filter: blur(2px);
        z-index: 550;
    }

    .home-mobile-drawer[b-7w2ngaut6o] {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--ig-surface, #ffffff);
        border-bottom: 1px solid var(--ig-border, #e2e8f0);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
        padding: 12px 16px;
        gap: 6px;
        z-index: 560;
        animation: slideDownMobile-b-7w2ngaut6o 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .home-mobile-link[b-7w2ngaut6o] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 14px;
        border-radius: 8px;
        color: var(--ig-text, #1e293b);
        font-size: 0.95rem;
        font-weight: 550;
        text-decoration: none !important;
        transition: background 0.15s ease;
    }

    .home-mobile-link:hover[b-7w2ngaut6o] {
        background: rgba(99, 102, 241, 0.08);
        color: #2563eb;
    }

    .home-mobile-link i[b-7w2ngaut6o] {
        font-size: 0.85rem;
        color: #94a3b8;
    }

    @keyframes slideDownMobile-b-7w2ngaut6o {
        from {
            opacity: 0;
            transform: translateY(-8px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

@media (max-width: 576px) {
    .auth-nav[b-7w2ngaut6o] {
        gap: 6px;
    }
    .btn-signin[b-7w2ngaut6o] {
        padding: 6px 8px;
        font-size: 0.82rem;
    }
    .btn-get-started[b-7w2ngaut6o] {
        padding: 6px 12px;
        font-size: 0.82rem;
    }
    .theme-btn[b-7w2ngaut6o] {
        padding: 3px 7px;
        font-size: 0.74rem;
    }
}

/* ── DARK THEME ENHANCEMENTS FOR HIGH CONTRAST & READABILITY ── */
[data-theme="dark"] .navbar[b-7w2ngaut6o] {
    background-color: #090d16;
}

[data-theme="dark"] .home-nav-link[b-7w2ngaut6o] {
    color: #cbd5e1;
}

[data-theme="dark"] .home-nav-link:hover[b-7w2ngaut6o] {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .theme-switch-pill[b-7w2ngaut6o] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .theme-btn[b-7w2ngaut6o] {
    color: #94a3b8;
}

[data-theme="dark"] .theme-btn:hover[b-7w2ngaut6o] {
    color: #ffffff;
}

[data-theme="dark"] .theme-btn.active[b-7w2ngaut6o] {
    background: #1e293b;
    color: #f8fafc;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .theme-moon-icon[b-7w2ngaut6o] {
    color: #38bdf8;
}

[data-theme="dark"] .btn-signin[b-7w2ngaut6o] {
    color: #cbd5e1;
}

[data-theme="dark"] .btn-signin:hover[b-7w2ngaut6o] {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .home-mobile-drawer[b-7w2ngaut6o] {
    background: #090d16;
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .home-mobile-link[b-7w2ngaut6o] {
    color: #f1f5f9;
}

[data-theme="dark"] .home-mobile-link:hover[b-7w2ngaut6o] {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .home-mobile-theme-row[b-7w2ngaut6o] {
    border-top-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .theme-mobile-label[b-7w2ngaut6o] {
    color: #f1f5f9;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .navbar[b-7w2ngaut6o] {
        background-color: #090d16;
    }
    :root:not([data-theme="light"]) .home-nav-link[b-7w2ngaut6o] {
        color: #cbd5e1;
    }
    :root:not([data-theme="light"]) .home-nav-link:hover[b-7w2ngaut6o] {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.08);
    }
    :root:not([data-theme="light"]) .theme-switch-pill[b-7w2ngaut6o] {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.15);
    }
    :root:not([data-theme="light"]) .theme-btn[b-7w2ngaut6o] {
        color: #94a3b8;
    }
    :root:not([data-theme="light"]) .theme-btn.active[b-7w2ngaut6o] {
        background: #1e293b;
        color: #f8fafc;
    }
    :root:not([data-theme="light"]) .theme-moon-icon[b-7w2ngaut6o] {
        color: #38bdf8;
    }
    :root:not([data-theme="light"]) .btn-signin[b-7w2ngaut6o] {
        color: #cbd5e1;
    }
    :root:not([data-theme="light"]) .home-mobile-drawer[b-7w2ngaut6o] {
        background: #090d16;
        border-bottom-color: rgba(255, 255, 255, 0.12);
    }
}

/* ══════════════════════════════════════════════════════════════ */
/* CHẾ ĐỘ TỐI (DARK MODE) CHO NAVMENU POPOVERS & CONTROLS        */
/* ══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .nav-profile-pill[b-7w2ngaut6o] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: #f8fafc;
}

[data-theme="dark"] .nav-profile-pill:hover[b-7w2ngaut6o],
[data-theme="dark"] .nav-profile-pill.active[b-7w2ngaut6o] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .profile-pill-name[b-7w2ngaut6o] {
    color: #f8fafc;
}

[data-theme="dark"] .profile-pill-arrow[b-7w2ngaut6o] {
    color: #94a3b8;
}

[data-theme="dark"] .profile-popover-card[b-7w2ngaut6o] {
    background: #0f172a;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .popover-fullname[b-7w2ngaut6o] {
    color: #f8fafc;
}

[data-theme="dark"] .popover-email[b-7w2ngaut6o] {
    color: #94a3b8;
}

[data-theme="dark"] .popover-stats-row[b-7w2ngaut6o] {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .stat-label[b-7w2ngaut6o] {
    color: #94a3b8;
}

[data-theme="dark"] .stat-val[b-7w2ngaut6o] {
    color: #f8fafc;
}

[data-theme="dark"] .popover-stat-divider[b-7w2ngaut6o] {
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .popover-nav-item[b-7w2ngaut6o] {
    color: #f8fafc;
}

[data-theme="dark"] .popover-nav-item:hover[b-7w2ngaut6o] {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .nav-item-title[b-7w2ngaut6o] {
    color: #f8fafc;
}

[data-theme="dark"] .nav-item-subtitle[b-7w2ngaut6o] {
    color: #94a3b8;
}

[data-theme="dark"] .nav-item-arrow[b-7w2ngaut6o] {
    color: #64748b;
}

[data-theme="dark"] .popover-nav-item:hover .nav-item-arrow[b-7w2ngaut6o] {
    color: #38bdf8;
}

[data-theme="dark"] .nav-item-icon.bg-blue[b-7w2ngaut6o] {
    background: rgba(2, 132, 199, 0.25);
    color: #38bdf8;
}

[data-theme="dark"] .nav-item-icon.bg-green[b-7w2ngaut6o] {
    background: rgba(22, 163, 74, 0.25);
    color: #4ade80;
}

[data-theme="dark"] .nav-item-icon.bg-purple[b-7w2ngaut6o] {
    background: rgba(147, 51, 234, 0.25);
    color: #c084fc;
}

[data-theme="dark"] .popover-footer[b-7w2ngaut6o] {
    background: rgba(0, 0, 0, 0.25);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .btn-popover-logout[b-7w2ngaut6o] {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.25);
    color: #f87171;
}

[data-theme="dark"] .btn-popover-logout:hover[b-7w2ngaut6o] {
    background: rgba(239, 68, 68, 0.22);
}

[data-theme="dark"] .streak-btn[b-7w2ngaut6o] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .streak-btn:hover[b-7w2ngaut6o] {
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .streak-popover[b-7w2ngaut6o] {
    background: #0f172a;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .streak-popover-header[b-7w2ngaut6o] {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .streak-popover-title[b-7w2ngaut6o] {
    color: #f8fafc;
}

[data-theme="dark"] .streak-stat-label[b-7w2ngaut6o] {
    color: #94a3b8;
}

[data-theme="dark"] .streak-stat-value[b-7w2ngaut6o] {
    color: #f8fafc;
}

[data-theme="dark"] .streak-popover-hint[b-7w2ngaut6o] {
    background: rgba(245, 158, 11, 0.12);
    color: #fcd34d;
}

[data-theme="dark"] .notif-btn[b-7w2ngaut6o] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: #94a3b8;
}

[data-theme="dark"] .notif-btn:hover[b-7w2ngaut6o],
[data-theme="dark"] .notif-btn.active[b-7w2ngaut6o] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #f8fafc;
}

[data-theme="dark"] .notif-popover[b-7w2ngaut6o] {
    background: #0f172a;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .notif-popover-header[b-7w2ngaut6o] {
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .notif-popover-title[b-7w2ngaut6o] {
    color: #f8fafc;
}

[data-theme="dark"] .notif-count-chip[b-7w2ngaut6o] {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    border-color: rgba(56, 189, 248, 0.3);
}

[data-theme="dark"] .notif-mark-all-btn[b-7w2ngaut6o] {
    color: #38bdf8;
}

[data-theme="dark"] .notif-mark-all-btn:hover[b-7w2ngaut6o] {
    background: rgba(56, 189, 248, 0.12);
    color: #7dd3fc;
}

[data-theme="dark"] .notif-card[b-7w2ngaut6o] {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .notif-card:hover[b-7w2ngaut6o] {
    background-color: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .notif-card.unread[b-7w2ngaut6o] {
    background-color: rgba(56, 189, 248, 0.08);
}

[data-theme="dark"] .notif-card.unread:hover[b-7w2ngaut6o] {
    background-color: rgba(56, 189, 248, 0.12);
}

[data-theme="dark"] .notif-item-title[b-7w2ngaut6o] {
    color: #f8fafc;
}

[data-theme="dark"] .notif-item-message[b-7w2ngaut6o] {
    color: #94a3b8;
}

[data-theme="dark"] .notif-meta-row[b-7w2ngaut6o] {
    color: #64748b;
}

[data-theme="dark"] .notif-empty-title[b-7w2ngaut6o] {
    color: #f8fafc;
}

[data-theme="dark"] .notif-empty-sub[b-7w2ngaut6o] {
    color: #64748b;
}

[data-theme="dark"] .exam-timer-chip[b-7w2ngaut6o] {
    background: rgba(56, 189, 248, 0.15);
    border-color: rgba(56, 189, 248, 0.3);
    color: #38bdf8;
}

[data-theme="dark"] .exam-timer-chip.urgent[b-7w2ngaut6o] {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
    color: #f87171;
}
/* /Layout/PlainLayout.razor.rz.scp.css */
.plain-shell[b-yex23y6e2a] {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}
/* /Pages/Admin/AdminApiKeys.razor.rz.scp.css */
/* ========================================================================= */
/* ADMIN API KEYS CONFIGURATION PAGE STYLES                                  */
/* ========================================================================= */

.api-keys-container[b-kqgeroxke3] {
    padding: 24px 32px 60px;
    max-width: 1440px;
    margin: 0 auto;
    font-family: 'Be Vietnam Pro', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1e293b;
}

/* Header */
.api-header-row[b-kqgeroxke3] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.api-badge[b-kqgeroxke3] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #e0f2fe;
    color: #0284c7;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.api-title[b-kqgeroxke3] {
    font-size: 1.65rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
    margin: 0 0 6px 0;
}

.api-subtitle[b-kqgeroxke3] {
    font-size: 0.88rem;
    color: #64748b;
    margin: 0;
    max-width: 760px;
    line-height: 1.5;
}

.btn-save-config[b-kqgeroxke3] {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #0284c7, #0369a1);
    color: #ffffff;
    border: none;
    padding: 10px 22px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.3);
    transition: all 0.2s ease;
}

.btn-save-config:hover:not(:disabled)[b-kqgeroxke3] {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(2, 132, 199, 0.4);
}

/* Routing Card */
.routing-card[b-kqgeroxke3] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 22px 24px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
    margin-bottom: 24px;
}

.routing-title[b-kqgeroxke3] {
    font-size: 1.1rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 4px 0;
}

.routing-sub[b-kqgeroxke3] {
    font-size: 0.82rem;
    color: #64748b;
    margin: 0 0 16px 0;
}

.routing-grid[b-kqgeroxke3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.routing-item[b-kqgeroxke3] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 16px;
}

.routing-label[b-kqgeroxke3] {
    font-size: 0.82rem;
    font-weight: 700;
    color: #334155;
    margin-bottom: 8px;
    display: block;
}

.custom-select[b-kqgeroxke3] {
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid #cbd5e1;
    color: #1e293b;
}

/* Providers Grid */
.providers-grid[b-kqgeroxke3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 20px;
}

.provider-card[b-kqgeroxke3] {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.2s ease;
}

.provider-card:hover[b-kqgeroxke3] {
    border-color: #cbd5e1;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -4px rgba(0, 0, 0, 0.06);
}

.active-provider[b-kqgeroxke3] {
    border-color: #38bdf8;
    box-shadow: 0 0 0 1px #38bdf8, 0 8px 24px -4px rgba(56, 189, 248, 0.15);
}

.provider-header[b-kqgeroxke3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f1f5f9;
}

.provider-brand[b-kqgeroxke3] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.provider-logo[b-kqgeroxke3] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #ffffff;
}

.bg-xkiro[b-kqgeroxke3] { background: linear-gradient(135deg, #10b981, #059669); }
.bg-gemini[b-kqgeroxke3] { background: linear-gradient(135deg, #3b82f6, #6366f1); }
.bg-whisper[b-kqgeroxke3] { background: linear-gradient(135deg, #f59e0b, #d97706); }
.bg-openai[b-kqgeroxke3] { background: linear-gradient(135deg, #10a37f, #0d8c6d); }
.bg-deepseek[b-kqgeroxke3] { background: linear-gradient(135deg, #0ea5e9, #0284c7); }

.provider-name[b-kqgeroxke3] {
    font-size: 1.1rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}

.provider-type[b-kqgeroxke3] {
    font-size: 0.76rem;
    font-weight: 700;
    color: #64748b;
}

/* Status Badges */
.badge-status[b-kqgeroxke3] {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
}

.bg-online[b-kqgeroxke3] { background: #dcfce7; color: #15803d; }
.bg-error[b-kqgeroxke3] { background: #fee2e2; color: #b91c1c; }
.bg-configured[b-kqgeroxke3] { background: #e0f2fe; color: #0369a1; }
.bg-unconfigured[b-kqgeroxke3] { background: #f1f5f9; color: #64748b; }
.bg-testing[b-kqgeroxke3] { background: #fef3c7; color: #b45309; }

.badge-model-count[b-kqgeroxke3] {
    font-size: 0.72rem;
    font-weight: 700;
    color: #0284c7;
    background: #e0f2fe;
    padding: 2px 8px;
    border-radius: 999px;
}

.field-label[b-kqgeroxke3] {
    font-size: 0.82rem;
    font-weight: 700;
    color: #475569;
    margin-bottom: 6px;
    display: block;
}

.input-password-wrapper[b-kqgeroxke3] {
    position: relative;
    display: flex;
    align-items: center;
}

.input-password-wrapper input[b-kqgeroxke3] {
    padding-right: 40px;
    font-family: monospace;
    font-size: 0.88rem;
}

.btn-toggle-eye[b-kqgeroxke3] {
    position: absolute;
    right: 8px;
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px 8px;
    font-size: 1rem;
}

.btn-toggle-eye:hover[b-kqgeroxke3] {
    color: #475569;
}

.field-hint[b-kqgeroxke3] {
    font-size: 0.74rem;
    color: #64748b;
    margin-top: 4px;
    display: block;
}

.field-hint a[b-kqgeroxke3] {
    color: #0284c7;
    text-decoration: none;
    font-weight: 700;
}

.field-hint a:hover[b-kqgeroxke3] {
    text-decoration: underline;
}

/* Test Result Box */
.test-result-box[b-kqgeroxke3] {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    margin-bottom: 14px;
}

.test-success[b-kqgeroxke3] {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.test-fail[b-kqgeroxke3] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.provider-footer[b-kqgeroxke3] {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
}

.btn-test-conn[b-kqgeroxke3] {
    display: inline-flex;
    align-items: center;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    padding: 7px 16px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-test-conn:hover:not(:disabled)[b-kqgeroxke3] {
    background: #e2e8f0;
    color: #0f172a;
}

.spin-icon[b-kqgeroxke3] {
    animation: spin-b-kqgeroxke3 0.8s linear infinite;
}

@keyframes spin-b-kqgeroxke3 {
    to { transform: rotate(360deg); }
}
/* /Pages/Admin/AdminDashboard.razor.rz.scp.css */
/* ========================================================================= */
/* ADMIN DASHBOARD - AUTHENTIC MODERN ANALYTICS HUB CSS                      */
/* ========================================================================= */

.admin-dashboard-container[b-ojv8dtaboj] {
    padding: 24px 32px 60px;
    max-width: 1440px;
    margin: 0 auto;
    font-family: 'Be Vietnam Pro', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1e293b;
}

/* 1. Header Bar */
.dash-header-bar[b-ojv8dtaboj] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.dash-badge[b-ojv8dtaboj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #e0f2fe;
    color: #0284c7;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.dash-main-title[b-ojv8dtaboj] {
    font-size: 1.65rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
    margin: 0 0 6px 0;
}

.dash-sub-title[b-ojv8dtaboj] {
    font-size: 0.88rem;
    color: #64748b;
    margin: 0;
    max-width: 720px;
    line-height: 1.5;
}

.dash-header-actions[b-ojv8dtaboj] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-api-keys-nav[b-ojv8dtaboj] {
    display: inline-flex;
    align-items: center;
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-api-keys-nav:hover[b-ojv8dtaboj] {
    background: #fef3c7;
    color: #92400e;
    transform: translateY(-1px);
}

.ai-notice-banner[b-ojv8dtaboj] {
    background: linear-gradient(135deg, #f0fdf4 0%, #e0f2fe 100%);
    border: 1px solid #bae6fd;
    border-radius: 16px;
    padding: 16px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.ai-notice-icon[b-ojv8dtaboj] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0284c7, #0284c7);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.ai-notice-title[b-ojv8dtaboj] {
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 2px 0;
}

.ai-notice-desc[b-ojv8dtaboj] {
    font-size: 0.82rem;
    color: #475569;
    margin: 0;
    line-height: 1.4;
}

.btn-setup-api[b-ojv8dtaboj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #0284c7;
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-setup-api:hover[b-ojv8dtaboj] {
    background: #0369a1;
    color: #ffffff;
    transform: translateY(-1px);
}

.sync-status-pill[b-ojv8dtaboj] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 0.85rem;
    color: #475569;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.live-pulse-dot[b-ojv8dtaboj] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: pulse-dot-b-ojv8dtaboj 2s infinite;
}

@keyframes pulse-dot-b-ojv8dtaboj {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.btn-refresh-dash[b-ojv8dtaboj] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #0284c7;
    color: #ffffff;
    border: none;
    padding: 9px 18px;
    border-radius: 12px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);
}

.btn-refresh-dash:hover:not(:disabled)[b-ojv8dtaboj] {
    background: #0369a1;
    transform: translateY(-1px);
}

.spin-icon[b-ojv8dtaboj] {
    animation: spin-b-ojv8dtaboj 1s linear infinite;
}

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

/* 2. KPI Cards Grid */
.kpi-cards-grid[b-ojv8dtaboj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}

.kpi-stat-card[b-ojv8dtaboj] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 20px 22px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.kpi-stat-card:hover[b-ojv8dtaboj] {
    transform: translateY(-3px);
    box-shadow: 0 12px 25px -4px rgba(0, 0, 0, 0.08);
    border-color: #cbd5e1;
}

.card-glow-green[b-ojv8dtaboj] {
    border-color: #a7f3d0;
    background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%);
}

.card-glow-green:hover[b-ojv8dtaboj] {
    border-color: #34d399;
}

.kpi-stat-top[b-ojv8dtaboj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.kpi-stat-label[b-ojv8dtaboj] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 6px;
}

.green-dot[b-ojv8dtaboj] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
}

.kpi-icon-badge[b-ojv8dtaboj] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.bg-blue[b-ojv8dtaboj] { background: #e0f2fe; color: #0284c7; }
.bg-green[b-ojv8dtaboj] { background: #dcfce7; color: #16a34a; }
.bg-indigo[b-ojv8dtaboj] { background: #e0e7ff; color: #4f46e5; }
.bg-amber[b-ojv8dtaboj] { background: #fef3c7; color: #d97706; }

.kpi-stat-value[b-ojv8dtaboj] {
    font-size: 2.1rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0 0 8px 0;
    font-variant-numeric: tabular-nums;
}

.text-green[b-ojv8dtaboj] { color: #16a34a !important; }
.text-indigo[b-ojv8dtaboj] { color: #4f46e5 !important; }
.text-amber[b-ojv8dtaboj] { color: #d97706 !important; }
.text-rose[b-ojv8dtaboj] { color: #e11d48 !important; }

.kpi-stat-footer[b-ojv8dtaboj] {
    font-size: 0.82rem;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sep[b-ojv8dtaboj] {
    color: #cbd5e1;
}

/* 3. Main Spline Chart Card */
.analytics-chart-card[b-ojv8dtaboj] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
    margin-bottom: 24px;
}

.chart-header-row[b-ojv8dtaboj] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.chart-box-title[b-ojv8dtaboj] {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}

.chart-box-subtitle[b-ojv8dtaboj] {
    font-size: 0.85rem;
    color: #64748b;
    margin: 4px 0 0 0;
}

.chart-filter-controls[b-ojv8dtaboj] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.range-select-box[b-ojv8dtaboj] {
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 4px 10px;
    border-radius: 10px;
}

.dash-select[b-ojv8dtaboj] {
    background: transparent;
    border: none;
    font-size: 0.82rem;
    font-weight: 700;
    color: #334155;
    outline: none;
    cursor: pointer;
}

.granularity-toggle-group[b-ojv8dtaboj] {
    display: inline-flex;
    background: #f1f5f9;
    padding: 3px;
    border-radius: 10px;
    gap: 2px;
}

.btn-gran-toggle[b-ojv8dtaboj] {
    background: transparent;
    border: none;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-gran-toggle.active[b-ojv8dtaboj] {
    background: #ffffff;
    color: #0284c7;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Chart Subbar & Metric Pills */
.chart-subbar[b-ojv8dtaboj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.metric-stat-label[b-ojv8dtaboj] {
    font-size: 0.82rem;
    font-weight: 700;
    color: #64748b;
    display: block;
}

.metric-stat-val[b-ojv8dtaboj] {
    font-size: 1.4rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.metric-tabs-group[b-ojv8dtaboj] {
    display: inline-flex;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 3px;
    border-radius: 10px;
    gap: 4px;
}

.metric-tab-pill[b-ojv8dtaboj] {
    background: transparent;
    border: none;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.metric-tab-pill:hover[b-ojv8dtaboj] {
    color: #0f172a;
}

.metric-tab-pill.active.tab-tokens[b-ojv8dtaboj] {
    background: #fffbeb;
    color: #b45309;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.15);
}

.metric-tab-pill.active.tab-requests[b-ojv8dtaboj] {
    background: #eef2ff;
    color: #4338ca;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.15);
}

.metric-tab-pill.active.tab-users[b-ojv8dtaboj] {
    background: #f0fdf4;
    color: #047857;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.15);
}

/* Canvas & SVG */
.chart-canvas-container[b-ojv8dtaboj] {
    position: relative;
    width: 100%;
    height: 300px;
}

.smooth-spline-svg[b-ojv8dtaboj] {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.chart-loading-box[b-ojv8dtaboj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #64748b;
    gap: 10px;
}

.dash-spinner[b-ojv8dtaboj] {
    width: 36px;
    height: 36px;
    border: 3px solid #e2e8f0;
    border-top-color: #0284c7;
    border-radius: 50%;
    animation: spin-b-ojv8dtaboj 0.8s linear infinite;
}

/* Floating Tooltip */
.chart-floating-tooltip[b-ojv8dtaboj] {
    position: absolute;
    transform: translate(-50%, -100%);
    background: #0f172a;
    color: #ffffff;
    border-radius: 10px;
    padding: 10px 14px;
    pointer-events: none;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    z-index: 20;
    min-width: 160px;
}

.tt-header[b-ojv8dtaboj] {
    font-size: 0.78rem;
    font-weight: 800;
    border-bottom: 1px solid #334155;
    padding-bottom: 4px;
    margin-bottom: 6px;
}

.tt-row[b-ojv8dtaboj] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.76rem;
}

/* 4. Real Task Breakdown Card */
.task-breakdown-card[b-ojv8dtaboj] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 22px 24px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
}

.task-header-row[b-ojv8dtaboj] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 8px;
}

.task-title[b-ojv8dtaboj] {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}

.task-subtitle[b-ojv8dtaboj] {
    font-size: 0.82rem;
    color: #64748b;
    margin: 4px 0 0 0;
}

.badge-range-info[b-ojv8dtaboj] {
    font-size: 0.78rem;
    font-weight: 700;
    color: #0284c7;
    background: #e0f2fe;
    padding: 4px 12px;
    border-radius: 8px;
}

.dash-table[b-ojv8dtaboj] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}

.dash-table th[b-ojv8dtaboj] {
    text-align: left;
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 10px 12px;
    border-bottom: 1.5px solid #e2e8f0;
}

.dash-table td[b-ojv8dtaboj] {
    padding: 14px 12px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.table-group-header[b-ojv8dtaboj] {
    background: #f8fafc;
}

.progress-bar-mini[b-ojv8dtaboj] {
    width: 70px;
    height: 6px;
    background: #f1f5f9;
    border-radius: 999px;
    overflow: hidden;
}

.progress-fill-mini[b-ojv8dtaboj] {
    height: 100%;
    border-radius: 999px;
}

.pct-text[b-ojv8dtaboj] {
    font-weight: 700;
    color: #334155;
    font-size: 0.82rem;
}

/* 5. Dual Activity Stream */
.dual-sections-grid[b-ojv8dtaboj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
}

.panel-box[b-ojv8dtaboj] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.panel-box-header[b-ojv8dtaboj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
}

.panel-box-header h4[b-ojv8dtaboj] {
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
}

.panel-action-link[b-ojv8dtaboj] {
    font-size: 0.82rem;
    font-weight: 700;
    color: #0284c7;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.panel-action-link:hover[b-ojv8dtaboj] {
    text-decoration: underline;
}

.recent-items-list[b-ojv8dtaboj] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.recent-item[b-ojv8dtaboj] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #f8fafc;
    transition: background 0.2s ease;
}

.recent-item:hover[b-ojv8dtaboj] {
    background: #f1f5f9;
}

.skill-tag[b-ojv8dtaboj] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.avatar-tag[b-ojv8dtaboj] {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 800;
    color: #ffffff;
    flex-shrink: 0;
}

.bg-red[b-ojv8dtaboj] { background: linear-gradient(135deg, #ef4444, #dc2626); }
.bg-blue[b-ojv8dtaboj] { background: linear-gradient(135deg, #3b82f6, #0284c7); }

.recent-info[b-ojv8dtaboj] {
    flex: 1;
    min-width: 0;
}

.recent-title-row[b-ojv8dtaboj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.recent-title-row strong[b-ojv8dtaboj] {
    font-size: 0.88rem;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.score-badge[b-ojv8dtaboj] {
    font-size: 0.78rem;
    color: #0284c7;
    background: #e0f2fe;
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 700;
    white-space: nowrap;
}

.level-tag[b-ojv8dtaboj] {
    font-size: 0.72rem;
    font-weight: 800;
    background: #e0e7ff;
    color: #4338ca;
    padding: 1px 6px;
    border-radius: 4px;
}

.recent-meta[b-ojv8dtaboj] {
    font-size: 0.78rem;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.empty-hint[b-ojv8dtaboj] {
    text-align: center;
    padding: 25px 10px;
    color: #94a3b8;
    font-size: 0.88rem;
}
/* /Pages/Admin/AdminGrading.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════
   AdminGrading.razor — Styling for Admin Grading Dashboard
   ══════════════════════════════════════════════════════ */

.admin-grading-container[b-kywekmpcuk] {
    padding: 24px 32px;
    max-width: 1400px;
    margin: 0 auto;
}

/* ── HEADER ── */
.grading-header[b-kywekmpcuk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.grading-header h2[b-kywekmpcuk] {
    font-size: 1.6rem;
    font-weight: 800;
    color: #1e293b;
    margin: 0 0 6px 0;
}

.grading-header .subtitle[b-kywekmpcuk] {
    color: #64748b;
    font-size: 0.95rem;
    margin: 0;
}

.header-stats[b-kywekmpcuk] {
    display: flex;
    gap: 12px;
}

.stat-pill[b-kywekmpcuk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    min-width: 90px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.stat-pill.pending[b-kywekmpcuk] { background: #fef3c7; border-color: #fde68a; color: #92400e; }
.stat-pill.graded[b-kywekmpcuk] { background: #dcfce7; border-color: #bbf7d0; color: #166534; }
.stat-pill.total[b-kywekmpcuk] { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }

.stat-num[b-kywekmpcuk] {
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.1;
}

.stat-lbl[b-kywekmpcuk] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* ── TOOLBAR ── */
.grading-toolbar[b-kywekmpcuk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    padding: 14px 20px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}

.filter-group[b-kywekmpcuk] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.filter-group label[b-kywekmpcuk] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #475569;
}

.filter-pills[b-kywekmpcuk] {
    display: flex;
    gap: 6px;
}

.pill-btn[b-kywekmpcuk] {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s;
}

.pill-btn:hover[b-kywekmpcuk] {
    background: #f1f5f9;
    color: #0f172a;
}

.pill-btn.active[b-kywekmpcuk] {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(37,99,235,0.25);
}

.btn-refresh[b-kywekmpcuk] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-refresh:hover[b-kywekmpcuk] {
    background: #f1f5f9;
    color: #0f172a;
}

/* ── TABLE CARD ── */
.table-card[b-kywekmpcuk] {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}

.grading-table[b-kywekmpcuk] {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.grading-table th[b-kywekmpcuk] {
    background: #f8fafc;
    padding: 14px 18px;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    border-bottom: 1.5px solid #e2e8f0;
}

.grading-table td[b-kywekmpcuk] {
    padding: 14px 18px;
    font-size: 0.9rem;
    color: #1e293b;
    border-bottom: 1px solid #f1f5f9;
}

.grading-table tbody tr:hover[b-kywekmpcuk] {
    background: #f8fafc;
}

.id-cell[b-kywekmpcuk] {
    font-weight: 700;
    color: #64748b;
}

.skill-badge[b-kywekmpcuk] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 800;
}

.skill-badge.skill-writing[b-kywekmpcuk] { background: #ede9fe; color: #6d28d9; }
.skill-badge.skill-speaking[b-kywekmpcuk] { background: #ffedd5; color: #c2410c; }
.skill-badge.skill-reading[b-kywekmpcuk] { background: #dcfce7; color: #15803d; }
.skill-badge.skill-listening[b-kywekmpcuk] { background: #e0f2fe; color: #0369a1; }

.exam-cell[b-kywekmpcuk] {
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
}

.band-tag[b-kywekmpcuk] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 800;
    font-size: 0.85rem;
    background: #f1f5f9;
    color: #334155;
}

.band-tag.high[b-kywekmpcuk] {
    background: #dbeafe;
    color: #1d4ed8;
}

.status-tag[b-kywekmpcuk] {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
}

.status-tag.graded[b-kywekmpcuk] { background: #dcfce7; color: #166534; }
.status-tag.pending[b-kywekmpcuk], .status-tag.submitted[b-kywekmpcuk] { background: #fef3c7; color: #92400e; }

.time-cell[b-kywekmpcuk] {
    font-size: 0.82rem;
    color: #64748b;
}

.student-info-cell[b-kywekmpcuk] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.student-info-cell strong[b-kywekmpcuk] {
    color: #0f172a;
    font-size: 0.88rem;
}
.student-email[b-kywekmpcuk] {
    color: #64748b;
    font-size: 0.75rem;
}

.attempt-badge[b-kywekmpcuk] {
    display: inline-block;
    padding: 3px 8px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #475569;
    white-space: nowrap;
}

.r2-link-btn[b-kywekmpcuk] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #15803d;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.15s;
}
.r2-link-btn:hover[b-kywekmpcuk] {
    background: #dcfce7;
    color: #166534;
}

.sub-meta-tags[b-kywekmpcuk] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.sub-meta-pill[b-kywekmpcuk] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 20px;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 600;
}

.sub-meta-pill.r2-pill[b-kywekmpcuk] {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
    text-decoration: none;
    transition: all 0.15s;
}
.sub-meta-pill.r2-pill:hover[b-kywekmpcuk] {
    background: #bbf7d0;
}

.btn-grade[b-kywekmpcuk] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-grade:hover[b-kywekmpcuk] {
    background: #1d4ed8;
    transform: translateY(-1px);
}

/* ── MODAL ── */
.modal-backdrop[b-kywekmpcuk] {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.grading-modal-content[b-kywekmpcuk] {
    background: #ffffff;
    border-radius: 16px;
    width: 100%;
    max-width: 1100px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.25);
    animation: modalIn-b-kywekmpcuk 0.2s ease-out;
}

@keyframes modalIn-b-kywekmpcuk {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

.modal-header[b-kywekmpcuk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 28px;
    border-bottom: 1.5px solid #e2e8f0;
    background: #f8fafc;
}

.modal-title-box h3[b-kywekmpcuk] {
    margin: 0 0 4px 0;
    font-size: 1.3rem;
    font-weight: 800;
    color: #0f172a;
}

.sub-meta[b-kywekmpcuk] {
    font-size: 0.82rem;
    color: #64748b;
}

.header-skill-pill[b-kywekmpcuk] {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 999px;
    margin-left: 8px;
    vertical-align: middle;
}
.header-skill-pill.skill-writing[b-kywekmpcuk] { background: #ede9fe; color: #6d28d9; }
.header-skill-pill.skill-speaking[b-kywekmpcuk] { background: #ffedd5; color: #c2410c; }
.header-skill-pill.skill-reading[b-kywekmpcuk] { background: #dcfce7; color: #15803d; }
.header-skill-pill.skill-listening[b-kywekmpcuk] { background: #e0f2fe; color: #0369a1; }

.btn-close-modal[b-kywekmpcuk] {
    background: transparent;
    border: none;
    font-size: 1.4rem;
    color: #64748b;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
}

.btn-close-modal:hover[b-kywekmpcuk] {
    background: #e2e8f0;
    color: #0f172a;
}

.modal-body-split[b-kywekmpcuk] {
    display: flex;
    flex: 1;
    overflow-y: auto;
}

/* Left Pane: Student submission */
.submission-content-pane[b-kywekmpcuk] {
    flex: 1 1 55%;
    width: 55%;
    padding: 24px;
    background: #f8fafc;
    border-right: 1.5px solid #e2e8f0;
    overflow-y: auto;
}

.submission-content-pane h4[b-kywekmpcuk] {
    margin-top: 0;
    margin-bottom: 16px;
    font-size: 1.05rem;
    font-weight: 800;
    color: #1e293b;
}

.task-review-card[b-kywekmpcuk] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 18px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}

.task-review-header[b-kywekmpcuk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 8px;
    margin-bottom: 12px;
}

.task-review-header h5[b-kywekmpcuk] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    color: #2563eb;
}

.task-words[b-kywekmpcuk] {
    font-size: 0.78rem;
    font-weight: 700;
    color: #15803d;
    background: #dcfce7;
    padding: 2px 8px;
    border-radius: 10px;
}

.task-prompt-box[b-kywekmpcuk] {
    background: #f1f5f9;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 0.88rem;
    margin-bottom: 12px;
    line-height: 1.5;
}

.task-answer-box strong[b-kywekmpcuk] {
    display: block;
    margin-bottom: 6px;
    font-size: 0.85rem;
    color: #475569;
}

.essay-text[b-kywekmpcuk] {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 12px;
    font-size: 0.92rem;
    line-height: 1.6;
    color: #1e293b;
    white-space: pre-wrap;
    max-height: 300px;
    overflow-y: auto;
}

.speaking-review-card[b-kywekmpcuk] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
}

.speaking-review-header[b-kywekmpcuk] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.speaking-review-header h5[b-kywekmpcuk] {
    margin: 0;
    color: #c2410c;
}

.speaking-duration[b-kywekmpcuk] {
    font-size: 0.78rem;
    font-weight: 700;
    color: #64748b;
}

.speaking-transcript-box[b-kywekmpcuk] {
    background: #f8fafc;
    border-left: 3px solid #f97316;
    padding: 8px 12px;
    margin-top: 8px;
}

.speaking-transcript-box p[b-kywekmpcuk] {
    margin: 4px 0 0 0;
    font-size: 0.9rem;
    color: #1e293b;
}

.audio-player-box[b-kywekmpcuk] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px;
    margin-top: 16px;
}

.admin-audio-player[b-kywekmpcuk] {
    width: 100%;
    margin-top: 8px;
}

/* Right Pane: Grading Form & AI */
.grading-form-pane[b-kywekmpcuk] {
    flex: 1 1 45%;
    width: 45%;
    padding: 24px;
    background: #ffffff;
    overflow-y: auto;
}

.ai-assistant-card[b-kywekmpcuk] {
    background: linear-gradient(135deg, #eff6ff 0%, #e0e7ff 100%);
    border: 1.5px solid #c7d2fe;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.ai-card-top[b-kywekmpcuk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.ai-card-top h5[b-kywekmpcuk] {
    margin: 0 0 2px 0;
    font-size: 0.95rem;
    font-weight: 800;
    color: #3730a3;
}

.ai-card-top p[b-kywekmpcuk] {
    margin: 0;
    font-size: 0.78rem;
    color: #6366f1;
}

.btn-ai-grade[b-kywekmpcuk] {
    padding: 8px 16px;
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-weight: 800;
    font-size: 0.82rem;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(79,70,229,0.3);
    white-space: nowrap;
    transition: all 0.15s;
}

.btn-ai-grade:hover:not(:disabled)[b-kywekmpcuk] {
    background: linear-gradient(135deg, #4338ca, #4f46e5);
    transform: translateY(-1px);
}

.btn-ai-grade-outline[b-kywekmpcuk] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: #ffffff;
    color: #4f46e5;
    border: 1.5px solid #c7d2fe;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}

.btn-ai-grade-outline:hover:not(:disabled)[b-kywekmpcuk] {
    background: #eef2ff;
    border-color: #818cf8;
    color: #3730a3;
}

.ai-feedback-preview[b-kywekmpcuk] {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #c7d2fe;
    font-size: 0.82rem;
    color: #312e81;
    line-height: 1.45;
}

.ai-feedback-full-report[b-kywekmpcuk] {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed #c7d2fe;
}

.ai-report-bands-grid[b-kywekmpcuk] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    margin-bottom: 8px;
}

.band-chip[b-kywekmpcuk] {
    background: #ffffff;
    border: 1px solid #c7d2fe;
    border-radius: 8px;
    padding: 4px 6px;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.band-chip span[b-kywekmpcuk] {
    font-size: 0.68rem;
    font-weight: 700;
    color: #4338ca;
}

.band-chip strong[b-kywekmpcuk] {
    font-size: 1rem;
    font-weight: 800;
    color: #1e1b4b;
}

.ai-strengths-box[b-kywekmpcuk], .ai-improvements-box[b-kywekmpcuk], .ai-grammar-errors-box[b-kywekmpcuk], .ai-vocab-upgrades-box[b-kywekmpcuk] {
    background: #ffffff;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.78rem;
    line-height: 1.4;
    border: 1px solid #e2e8f0;
}

.ai-strengths-box[b-kywekmpcuk] { border-left: 3.5px solid #10b981; }
.ai-improvements-box[b-kywekmpcuk] { border-left: 3.5px solid #ef4444; }
.ai-vocab-upgrades-box[b-kywekmpcuk] { border-left: 3.5px solid #3b82f6; }
.ai-grammar-errors-box[b-kywekmpcuk] { border-left: 3.5px solid #f59e0b; }

.grammar-err-item[b-kywekmpcuk], .vocab-upgrade-card[b-kywekmpcuk] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 6px 8px;
    margin-bottom: 6px;
    font-size: 0.78rem;
}

.vocab-pair[b-kywekmpcuk] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
}
.vocab-orig[b-kywekmpcuk] { color: #dc2626; }
.vocab-upgraded[b-kywekmpcuk] { color: #2563eb; background: #eff6ff; padding: 2px 6px; border-radius: 4px; border: 1px solid #bfdbfe; }
.vocab-ctx[b-kywekmpcuk] { font-size: 0.76rem; color: #334155; margin-top: 3px; }
.vocab-exp[b-kywekmpcuk] { color: #64748b; display: block; margin-top: 2px; font-size: 0.73rem; }

.err-orig[b-kywekmpcuk] { color: #dc2626; }
.err-sug[b-kywekmpcuk] { color: #16a34a; }
.err-exp[b-kywekmpcuk] { color: #64748b; font-style: italic; display: block; margin-top: 2px; }

.task-selector-bar[b-kywekmpcuk] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #334155;
}

.criteria-form h4[b-kywekmpcuk] {
    margin-top: 0;
    font-size: 1rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 14px;
}

.form-row[b-kywekmpcuk] {
    margin-bottom: 14px;
}

.form-row label[b-kywekmpcuk] {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: #475569;
    margin-bottom: 6px;
}

.score-input-group[b-kywekmpcuk] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.score-input-group input[b-kywekmpcuk] {
    width: 100px;
    padding: 8px 12px;
    border: 1.5px solid #cbd5e1;
    border-radius: 6px;
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
    text-align: center;
}

.score-input-group input:focus[b-kywekmpcuk] {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37,99,235,0.2);
}

.score-hint[b-kywekmpcuk] {
    font-size: 0.78rem;
    color: #94a3b8;
}

.overall-band-highlight[b-kywekmpcuk] {
    background: #0f172a;
    color: #ffffff;
    border-radius: 10px;
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0;
}

.overall-band-highlight span[b-kywekmpcuk] {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #94a3b8;
}

.overall-band-highlight strong[b-kywekmpcuk] {
    font-size: 1.8rem;
    color: #38bdf8;
}

.teacher-feedback-input[b-kywekmpcuk] {
    width: 100%;
    min-height: 100px;
    padding: 10px 12px;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.88rem;
    line-height: 1.5;
    color: #1e293b;
    box-sizing: border-box;
    resize: vertical;
}

.modal-footer-actions[b-kywekmpcuk] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
}

.btn-cancel[b-kywekmpcuk] {
    padding: 10px 20px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
}

.btn-save-grade[b-kywekmpcuk] {
    padding: 10px 24px;
    background: linear-gradient(135deg, #16a34a, #22c55e);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-weight: 800;
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(22,163,74,0.3);
    transition: all 0.15s;
}

.btn-save-grade:hover:not(:disabled)[b-kywekmpcuk] {
    background: linear-gradient(135deg, #15803d, #16a34a);
    transform: translateY(-1px);
}

/* ── LOADING & EMPTY ── */
.loading-box[b-kywekmpcuk], .empty-box[b-kywekmpcuk] {
    text-align: center;
    padding: 60px 20px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.spinner[b-kywekmpcuk] {
    width: 40px;
    height: 40px;
    border: 4px solid #e2e8f0;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: spin-b-kywekmpcuk 0.8s linear infinite;
    margin: 0 auto 14px auto;
}

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

.empty-icon[b-kywekmpcuk] {
    font-size: 3rem;
    margin-bottom: 10px;
}

/* ── PAGINATION BAR ── */
.pagination-footer[b-kywekmpcuk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    background: #f8fafc;
    border-top: 1px solid #f1f5f9;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.85rem;
    color: #64748b;
}

.pagination-controls[b-kywekmpcuk] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.page-size-selector[b-kywekmpcuk] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.page-size-select[b-kywekmpcuk] {
    padding: 4px 8px;
    border-radius: 8px;
    border: 1.5px solid #e2e8f0;
    background: #ffffff;
    font-size: 0.82rem;
    font-weight: 600;
    color: #0f172a;
    outline: none;
}

.page-nav-buttons[b-kywekmpcuk] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.btn-page-nav[b-kywekmpcuk], .btn-page-num[b-kywekmpcuk] {
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    border-radius: 8px;
    border: 1.5px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    font-size: 0.82rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-page-nav:hover:not(:disabled)[b-kywekmpcuk], .btn-page-num:hover:not(.active)[b-kywekmpcuk] {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #0f172a;
}

.btn-page-nav:disabled[b-kywekmpcuk] {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-page-num.active[b-kywekmpcuk] {
    background: #0284c7;
    border-color: #0284c7;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3);
}

@media (max-width: 900px) {
    .modal-body-split[b-kywekmpcuk] { flex-direction: column; }
    .submission-content-pane[b-kywekmpcuk], .grading-form-pane[b-kywekmpcuk] { width: 100%; flex: none; }
}
/* /Pages/Admin/AdminGrammarStructures.razor.rz.scp.css */
.grammar-admin-container[b-992in00b5n] {
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Header */
.grammar-header[b-992in00b5n] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}

.grammar-header h2[b-992in00b5n] {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 4px;
}

.grammar-header .subtitle[b-992in00b5n] {
    color: #64748b;
    font-size: 0.95rem;
    margin-bottom: 0;
}

.header-stats[b-992in00b5n] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.stat-pill[b-992in00b5n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 6px 14px;
    min-width: 85px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.stat-pill .stat-num[b-992in00b5n] {
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.2;
}

.stat-pill .stat-lbl[b-992in00b5n] {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
}

.stat-pill.total .stat-num[b-992in00b5n] { color: #4f46e5; }
.stat-pill.high-band .stat-num[b-992in00b5n] { color: #10b981; }
.stat-pill.task2 .stat-num[b-992in00b5n] { color: #f59e0b; }
.stat-pill.topics .stat-num[b-992in00b5n] { color: #06b6d4; }

/* Alert Banner */
.alert-banner[b-992in00b5n] {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 0.95rem;
    position: relative;
}

.alert-success[b-992in00b5n] {
    background-color: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.alert-danger[b-992in00b5n] {
    background-color: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.btn-close-banner[b-992in00b5n] {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 1.25rem;
    line-height: 1;
    color: inherit;
    cursor: pointer;
    opacity: 0.7;
}

.btn-close-banner:hover[b-992in00b5n] { opacity: 1; }

/* Toolbar */
.toolbar-card[b-992in00b5n] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 20px;
    gap: 16px;
    flex-wrap: wrap;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.toolbar-left[b-992in00b5n] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    flex: 1;
}

.search-box[b-992in00b5n] {
    position: relative;
    min-width: 280px;
}

.search-box i[b-992in00b5n] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
}

.search-box input[b-992in00b5n] {
    width: 100%;
    padding: 8px 32px 8px 36px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.15s;
}

.search-box input:focus[b-992in00b5n] {
    border-color: #4f46e5;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
}

.clear-search-btn[b-992in00b5n] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 1.1rem;
}

.filter-group[b-992in00b5n] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-select[b-992in00b5n] {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background-color: #f8fafc;
    font-size: 0.88rem;
    color: #334155;
    outline: none;
}

.toolbar-actions[b-992in00b5n] {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.btn-action-primary[b-992in00b5n] {
    background-color: #4f46e5;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: background-color 0.15s;
}

.btn-action-primary:hover[b-992in00b5n] {
    background-color: #4338ca;
    color: #ffffff;
}

.btn-action-outline[b-992in00b5n] {
    background-color: #ffffff;
    color: #334155;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: all 0.15s;
}

.btn-action-outline:hover[b-992in00b5n] {
    background-color: #f8fafc;
    border-color: #94a3b8;
    color: #0f172a;
}

.btn-bulk-delete[b-992in00b5n] {
    background-color: #ef4444;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

.btn-bulk-delete:hover[b-992in00b5n] {
    background-color: #dc2626;
}

/* Table Card */
.table-card[b-992in00b5n] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    overflow: hidden;
}

.grammar-table[b-992in00b5n] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.grammar-table th[b-992in00b5n] {
    background: #f8fafc;
    color: #475569;
    font-weight: 600;
    padding: 12px 14px;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
    text-align: left;
}

.grammar-table td[b-992in00b5n] {
    padding: 14px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: top;
}

.grammar-table tbody tr:hover[b-992in00b5n] {
    background-color: #f8fafc;
}

.grammar-table tbody tr.row-selected[b-992in00b5n] {
    background-color: #eff6ff;
}

.grammar-table tbody tr.row-expanded[b-992in00b5n] {
    background-color: #fcfcfd;
}

.th-cb[b-992in00b5n], .td-cb[b-992in00b5n] {
    width: 40px;
    text-align: center;
}

.th-code[b-992in00b5n] { width: 150px; }
.th-topic[b-992in00b5n] { width: 280px; }
.th-usage[b-992in00b5n] { width: 220px; }
.th-example[b-992in00b5n] { min-width: 320px; }
.th-action[b-992in00b5n] { width: 120px; }

/* Cell elements */
.code-box[b-992in00b5n] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.structure-code[b-992in00b5n] {
    font-family: monospace;
    font-weight: 700;
    font-size: 0.95rem;
    color: #1e293b;
}

.badges-stack[b-992in00b5n] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.band-badge[b-992in00b5n] {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
}

.band-badge.band-c2[b-992in00b5n] { background: #dcfce7; color: #15803d; }
.band-badge.band-c1[b-992in00b5n] { background: #e0e7ff; color: #4338ca; }
.band-badge.band-b2[b-992in00b5n] { background: #fef3c7; color: #b45309; }
.band-badge.band-b1[b-992in00b5n] { background: #f1f5f9; color: #475569; }

.category-badge[b-992in00b5n] {
    display: inline-block;
    background: #f1f5f9;
    color: #475569;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
}

.topic-title[b-992in00b5n] {
    font-size: 0.95rem;
    color: #0f172a;
    margin-bottom: 6px;
}

.formula-box[b-992in00b5n] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 4px 8px;
}

.formula-box code[b-992in00b5n] {
    color: #312e81;
    font-weight: 600;
    font-size: 0.85rem;
    word-break: break-all;
}

.btn-copy-formula[b-992in00b5n] {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 0;
    font-size: 0.85rem;
    opacity: 0.6;
}

.btn-copy-formula:hover[b-992in00b5n] {
    opacity: 1;
    color: #4f46e5;
}

.usage-text[b-992in00b5n] {
    margin: 0;
    color: #475569;
    font-size: 0.88rem;
    line-height: 1.4;
}

.adv-example-box[b-992in00b5n] {
    margin-bottom: 4px;
}

.adv-text[b-992in00b5n] {
    color: #1e293b;
    font-weight: 600;
    line-height: 1.4;
}

.vn-meaning-box small[b-992in00b5n] {
    display: block;
    line-height: 1.3;
}

/* Action Buttons */
.action-buttons[b-992in00b5n] {
    display: inline-flex;
    gap: 4px;
}

.btn-icon[b-992in00b5n] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #64748b;
    border-radius: 6px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-icon:hover[b-992in00b5n] {
    background: #e2e8f0;
    color: #1e293b;
}

.btn-icon.active[b-992in00b5n] {
    background: #4f46e5;
    color: #ffffff;
    border-color: #4f46e5;
}

.btn-icon.edit:hover[b-992in00b5n] {
    background: #e0e7ff;
    color: #4338ca;
    border-color: #c7d2fe;
}

.btn-icon.delete:hover[b-992in00b5n] {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #fecaca;
}

/* Expanded Sub-Panel */
.details-row td[b-992in00b5n] {
    padding: 0 14px 14px 14px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.details-expanded-pane[b-992in00b5n] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.02);
}

.details-grid[b-992in00b5n] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.detail-box[b-992in00b5n] {
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 0.88rem;
}

.detail-box h6[b-992in00b5n] {
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.detail-box p[b-992in00b5n] {
    margin: 0;
    line-height: 1.4;
}

.detail-box.basic-box[b-992in00b5n] {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    color: #64748b;
}

.detail-box.adv-box[b-992in00b5n] {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.details-meta-grid[b-992in00b5n] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.88rem;
}

.detail-meta-item[b-992in00b5n] {
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    padding: 6px 10px;
    border-radius: 6px;
}

.detail-meta-item.mistake[b-992in00b5n] {
    background: #fff1f2;
    border-color: #ffe4e6;
    color: #9f1239;
}

.detail-meta-item.practice[b-992in00b5n] {
    background: #f0fdfa;
    border-color: #ccfbf1;
    color: #115e59;
}

/* Pagination Bar */
.pagination-bar[b-992in00b5n] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    flex-wrap: wrap;
    gap: 12px;
}

.page-info[b-992in00b5n] {
    display: flex;
    align-items: center;
    color: #64748b;
    font-size: 0.88rem;
}

.page-size-select[b-992in00b5n] {
    width: auto;
    display: inline-block;
    padding: 2px 24px 2px 8px;
}

.pagination-buttons[b-992in00b5n] {
    display: flex;
    gap: 4px;
}

.btn-page[b-992in00b5n] {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #334155;
    border-radius: 6px;
    min-width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-page:hover:not(:disabled)[b-992in00b5n] {
    background: #f1f5f9;
    border-color: #94a3b8;
}

.btn-page.active[b-992in00b5n] {
    background: #4f46e5;
    border-color: #4f46e5;
    color: #ffffff;
    font-weight: 700;
}

.btn-page:disabled[b-992in00b5n] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Modal Custom Styles */
.modal-backdrop-custom[b-992in00b5n] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 16px;
}

.modal-dialog-custom[b-992in00b5n] {
    background: #ffffff;
    border-radius: 14px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.modal-dialog-custom.modal-lg[b-992in00b5n] { max-width: 800px; }
.modal-dialog-custom.modal-md[b-992in00b5n] { max-width: 540px; }

.modal-header-custom[b-992in00b5n] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.modal-header-custom h4[b-992in00b5n] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #1e293b;
}

.btn-close-custom[b-992in00b5n] {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: #94a3b8;
    cursor: pointer;
}

.btn-close-custom:hover[b-992in00b5n] { color: #1e293b; }

.modal-body-custom[b-992in00b5n] {
    padding: 20px;
    overflow-y: auto;
}

.modal-footer-custom[b-992in00b5n] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

/* Upload Dropzone */
.upload-dropzone[b-992in00b5n] {
    position: relative;
    border: 2px dashed #cbd5e1;
    border-radius: 10px;
    padding: 30px 16px;
    text-align: center;
    background: #f8fafc;
    cursor: pointer;
    transition: all 0.15s;
}

.upload-dropzone:hover[b-992in00b5n] {
    border-color: #4f46e5;
    background: #f5f3ff;
}

.upload-icon[b-992in00b5n] {
    font-size: 2.2rem;
    color: #6366f1;
    margin-bottom: 6px;
}

.dropzone-input[b-992in00b5n] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.selected-files-list[b-992in00b5n] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 12px;
    max-height: 150px;
    overflow-y: auto;
}

.file-item[b-992in00b5n] {
    display: flex;
    align-items: center;
    font-size: 0.85rem;
    padding: 4px 0;
    border-bottom: 1px solid #f1f5f9;
}

.file-item:last-child[b-992in00b5n] { border-bottom: none; }

.file-name[b-992in00b5n] {
    font-weight: 600;
    color: #334155;
    margin-right: 6px;
    word-break: break-all;
}

.import-result-summary[b-992in00b5n] {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 12px;
    font-size: 0.88rem;
}

.import-result-summary.has-errors[b-992in00b5n] {
    background: #fff1f2;
    border-color: #fecdd3;
}

.error-list[b-992in00b5n] {
    margin: 8px 0 0 0;
    padding-left: 18px;
    font-size: 0.82rem;
    color: #be123c;
}

/* Empty / Loading State */
.loading-state[b-992in00b5n], .empty-state[b-992in00b5n] {
    padding: 50px 20px;
    text-align: center;
}

.empty-icon[b-992in00b5n] {
    font-size: 3rem;
    color: #94a3b8;
    margin-bottom: 10px;
}
/* /Pages/Admin/AdminListenVideos.razor.rz.scp.css */
/* ========================================================================= */
/* ADMIN LISTEN VIDEOS STYLESHEET (MATCHING STORIES & BRAND THEME)           */
/* ========================================================================= */
.admin-videos-page[b-w8n9y3k8de] {
    padding: 28px;
    max-width: 1400px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #1e293b;
}

.page-top-header[b-w8n9y3k8de] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.page-title[b-w8n9y3k8de] {
    margin: 0 0 6px;
    font-size: 1.7rem;
    font-weight: 800;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-subtitle[b-w8n9y3k8de] {
    margin: 0;
    font-size: 0.95rem;
    color: #64748b;
}

.header-actions[b-w8n9y3k8de] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Buttons */
.btn[b-w8n9y3k8de] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    border: none;
    text-decoration: none;
}

.btn-primary-solid[b-w8n9y3k8de] {
    background: #0284c7;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);
}

.btn-primary-solid:hover:not(:disabled)[b-w8n9y3k8de] {
    background: #0369a1;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(2, 132, 199, 0.35);
}

.btn-primary-outline[b-w8n9y3k8de] {
    background: #f0f9ff;
    color: #0284c7;
    border: 1px solid #bae6fd;
}

.btn-primary-outline:hover:not(:disabled)[b-w8n9y3k8de] {
    background: #e0f2fe;
    border-color: #7dd3fc;
}

.btn-secondary-outline[b-w8n9y3k8de] {
    background: #ffffff;
    color: #475569;
    border: 1px solid #cbd5e1;
}

.btn-secondary-outline:hover:not(:disabled)[b-w8n9y3k8de] {
    background: #f8fafc;
    color: #1e293b;
    border-color: #94a3b8;
}

.btn:disabled[b-w8n9y3k8de] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-sm[b-w8n9y3k8de] {
    padding: 6px 14px;
    font-size: 0.82rem;
    border-radius: 8px;
}

/* Custom Alert */
.custom-alert[b-w8n9y3k8de] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    font-size: 0.92rem;
}

.alert-success[b-w8n9y3k8de] {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.alert-error[b-w8n9y3k8de] {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.alert-content[b-w8n9y3k8de] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.alert-close[b-w8n9y3k8de] {
    background: transparent;
    border: none;
    font-size: 1.3rem;
    color: inherit;
    cursor: pointer;
    line-height: 1;
}

/* Filter Toolbar */
.filter-toolbar[b-w8n9y3k8de] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.search-input-wrapper[b-w8n9y3k8de] {
    position: relative;
    flex: 1;
    min-width: 300px;
}

.search-icon[b-w8n9y3k8de] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.95rem;
}

.search-input[b-w8n9y3k8de] {
    width: 100%;
    padding: 10px 38px 10px 38px;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    font-size: 0.92rem;
    color: #1e293b;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.search-input:focus[b-w8n9y3k8de] {
    outline: none;
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.search-clear-btn[b-w8n9y3k8de] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 1.1rem;
}

.filter-controls[b-w8n9y3k8de] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.custom-date-input[b-w8n9y3k8de], .custom-select[b-w8n9y3k8de] {
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    font-size: 0.92rem;
    color: #1e293b;
    cursor: pointer;
    outline: none;
}

.custom-date-input:focus[b-w8n9y3k8de], .custom-select:focus[b-w8n9y3k8de] {
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

/* Content Card & Table */
.content-card[b-w8n9y3k8de] {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
    overflow: hidden;
}

.table-container[b-w8n9y3k8de] {
    width: 100%;
    overflow-x: auto;
}

.videos-table[b-w8n9y3k8de] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.videos-table th[b-w8n9y3k8de] {
    background: #f8fafc;
    color: #475569;
    font-weight: 700;
    text-align: left;
    padding: 14px 16px;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.videos-table td[b-w8n9y3k8de] {
    padding: 14px 16px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.videos-table tr:hover td[b-w8n9y3k8de] {
    background: #f8fafc;
}

.video-thumb[b-w8n9y3k8de] {
    width: 100px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.video-title-text[b-w8n9y3k8de] {
    font-weight: 700;
    color: #0f172a;
    font-size: 0.95rem;
    margin-bottom: 4px;
    max-width: 420px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.video-meta-row[b-w8n9y3k8de] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.82rem;
}

.youtube-link[b-w8n9y3k8de] {
    color: #0284c7;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.youtube-link:hover[b-w8n9y3k8de] {
    text-decoration: underline;
    color: #0369a1;
}

.transcript-tag[b-w8n9y3k8de] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
}

.tag-has-words[b-w8n9y3k8de] {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.tag-no-words[b-w8n9y3k8de] {
    background: #fff1f2;
    color: #be123c;
    border: 1px solid #fecdd3;
}

.status-pill[b-w8n9y3k8de] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
}

.status-approved[b-w8n9y3k8de] {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.status-pending[b-w8n9y3k8de] {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
}

.date-badge[b-w8n9y3k8de] {
    font-size: 0.82rem;
    color: #64748b;
    background: #f1f5f9;
    padding: 4px 8px;
    border-radius: 6px;
    font-weight: 600;
}

.text-right[b-w8n9y3k8de] {
    text-align: right;
}

.action-btn-group[b-w8n9y3k8de] {
    display: inline-flex;
    gap: 6px;
}

.action-btn[b-w8n9y3k8de] {
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #475569;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.action-btn:hover:not(:disabled)[b-w8n9y3k8de] {
    transform: translateY(-1px);
}

.btn-transcript:hover[b-w8n9y3k8de] {
    background: #f0f9ff;
    color: #0284c7;
    border-color: #bae6fd;
}

.btn-approve[b-w8n9y3k8de] {
    background: #f0fdf4;
    color: #16a34a;
    border-color: #bbf7d0;
}

.btn-approve:hover:not(:disabled)[b-w8n9y3k8de] {
    background: #16a34a;
    color: #ffffff;
    border-color: #16a34a;
}

.btn-edit[b-w8n9y3k8de] {
    background: #f0f9ff;
    color: #0284c7;
    border-color: #bae6fd;
}

.btn-edit:hover:not(:disabled)[b-w8n9y3k8de] {
    background: #0284c7;
    color: #ffffff;
    border-color: #0284c7;
}

.thumb-wrap[b-w8n9y3k8de] {
    position: relative;
    display: inline-block;
}

.video-duration-badge[b-w8n9y3k8de] {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.75);
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 4px;
}

.channel-badge[b-w8n9y3k8de] {
    color: #64748b;
    font-weight: 600;
    font-size: 0.8rem;
}

.level-category-cell[b-w8n9y3k8de] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

.badge-level[b-w8n9y3k8de] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #ffffff;
}

.level-a1[b-w8n9y3k8de], .level-a2[b-w8n9y3k8de] { background: #16a34a; }
.level-b1[b-w8n9y3k8de] { background: #0284c7; }
.level-b2[b-w8n9y3k8de], .level-intermediate[b-w8n9y3k8de] { background: #ea580c; }
.level-c1[b-w8n9y3k8de], .level-c2[b-w8n9y3k8de], .level-advanced[b-w8n9y3k8de] { background: #7c3aed; }

.badge-category[b-w8n9y3k8de] {
    font-size: 0.72rem;
    color: #475569;
    background: #f1f5f9;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 600;
}

.row-inputs[b-w8n9y3k8de] {
    display: flex;
    gap: 16px;
}

.input-col[b-w8n9y3k8de] {
    flex: 1;
}

.custom-input[b-w8n9y3k8de] {
    width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    font-size: 0.95rem;
    color: #1e293b;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.custom-input:focus[b-w8n9y3k8de] {
    outline: none;
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.btn-delete[b-w8n9y3k8de] {
    padding: 6px 10px;
}

.btn-delete:hover[b-w8n9y3k8de] {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fecaca;
}

/* Loading & Empty states */
.loading-state[b-w8n9y3k8de], .empty-state[b-w8n9y3k8de] {
    text-align: center;
    padding: 60px 20px;
    color: #64748b;
}

.empty-icon[b-w8n9y3k8de] {
    font-size: 3rem;
    color: #cbd5e1;
    margin-bottom: 12px;
}

.empty-state h3[b-w8n9y3k8de] {
    margin: 0 0 6px;
    color: #1e293b;
    font-weight: 700;
}

.empty-state p[b-w8n9y3k8de] {
    margin: 0;
    font-size: 0.95rem;
}

.custom-spinner[b-w8n9y3k8de] {
    width: 36px;
    height: 36px;
    border: 3px solid #e2e8f0;
    border-top-color: #0284c7;
    border-radius: 50%;
    margin: 0 auto 12px;
    animation: spin-b-w8n9y3k8de 0.8s linear infinite;
}

.mini-spinner[b-w8n9y3k8de] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #ffffff;
    border-radius: 50%;
    display: inline-block;
    animation: spin-b-w8n9y3k8de 0.8s linear infinite;
}

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

/* ========================================================================= */
/* MODAL TRANSCRIPT STYLES                                                   */
/* ========================================================================= */
.modal-overlay[b-w8n9y3k8de] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow-y: auto;
    box-sizing: border-box;
}

.modal-card[b-w8n9y3k8de] {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: popModal-b-w8n9y3k8de 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-lg[b-w8n9y3k8de] { max-width: 800px; }

@keyframes popModal-b-w8n9y3k8de {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-header[b-w8n9y3k8de] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 28px;
    border-bottom: 1px solid #f1f5f9;
    background: #ffffff;
}

.modal-title[b-w8n9y3k8de] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.modal-title i[b-w8n9y3k8de] {
    font-size: 1.8rem;
}

.modal-title h3[b-w8n9y3k8de] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
}

.modal-subtitle[b-w8n9y3k8de] {
    margin: 3px 0 0;
    font-size: 0.85rem;
    color: #64748b;
}

.modal-close-btn[b-w8n9y3k8de] {
    background: transparent;
    border: none;
    font-size: 1.8rem;
    color: #94a3b8;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    line-height: 1;
}

.modal-close-btn:hover[b-w8n9y3k8de] {
    background: #f1f5f9;
    color: #1e293b;
}

.modal-body[b-w8n9y3k8de] {
    padding: 28px;
    overflow-y: auto;
    flex: 1;
    background: #ffffff;
}

.modal-footer[b-w8n9y3k8de] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 28px;
    background: #f8fafc;
    border-top: 1px solid #f1f5f9;
}

.transcript-video-info[b-w8n9y3k8de] {
    display: flex;
    gap: 16px;
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 14px;
    border-radius: 12px;
}

.modal-video-thumb[b-w8n9y3k8de] {
    width: 120px;
    height: 68px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
}

.modal-video-details[b-w8n9y3k8de] {
    flex: 1;
}

.modal-video-title[b-w8n9y3k8de] {
    font-weight: 700;
    font-size: 0.98rem;
    color: #0f172a;
    margin-bottom: 4px;
}

.form-group-label[b-w8n9y3k8de] {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
    color: #334155;
}

.transcript-word-count[b-w8n9y3k8de] {
    font-size: 0.85rem;
    color: #0284c7;
    background: #f0f9ff;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid #bae6fd;
}

.custom-textarea[b-w8n9y3k8de] {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    font-size: 0.95rem;
    color: #1e293b;
    box-sizing: border-box;
    transition: all 0.2s ease;
    line-height: 1.6;
    resize: vertical;
}

.custom-textarea:focus[b-w8n9y3k8de] {
    outline: none;
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.text-muted[b-w8n9y3k8de] {
    color: #64748b;
    font-size: 0.82rem;
}

/* ── PAGINATION BAR ── */
.pagination-footer[b-w8n9y3k8de] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    background: #f8fafc;
    border-top: 1px solid #f1f5f9;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.85rem;
    color: #64748b;
}

.pagination-controls[b-w8n9y3k8de] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.page-size-selector[b-w8n9y3k8de] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.page-size-select[b-w8n9y3k8de] {
    padding: 4px 8px;
    border-radius: 8px;
    border: 1.5px solid #e2e8f0;
    background: #ffffff;
    font-size: 0.82rem;
    font-weight: 600;
    color: #0f172a;
    outline: none;
}

.page-nav-buttons[b-w8n9y3k8de] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.btn-page-nav[b-w8n9y3k8de], .btn-page-num[b-w8n9y3k8de] {
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    border-radius: 8px;
    border: 1.5px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    font-size: 0.82rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-page-nav:hover:not(:disabled)[b-w8n9y3k8de], .btn-page-num:hover:not(.active)[b-w8n9y3k8de] {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #0f172a;
}

.btn-page-nav:disabled[b-w8n9y3k8de] {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-page-num.active[b-w8n9y3k8de] {
    background: #0284c7;
    border-color: #0284c7;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3);
}
/* /Pages/Admin/AdminLogin.razor.rz.scp.css */
.admin-login-wrapper[b-3gdywr949d] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at top right, #0f172a 0%, #020617 100%);
    padding: 24px;
    font-family: 'Be Vietnam Pro', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #e2e8f0;
    position: relative;
    overflow: hidden;
}

.admin-login-wrapper[b-3gdywr949d]::before {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(2, 132, 199, 0.15) 0%, rgba(2, 132, 199, 0) 70%);
    top: -150px;
    right: -150px;
    border-radius: 50%;
    pointer-events: none;
}

.admin-login-card[b-3gdywr949d] {
    width: 100%;
    max-width: 460px;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    padding: 40px 36px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(2, 132, 199, 0.25);
    position: relative;
    z-index: 1;
}

.card-header-brand[b-3gdywr949d] {
    text-align: center;
    margin-bottom: 28px;
}

.brand-shield-badge[b-3gdywr949d] {
    width: 68px;
    height: 68px;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    margin-bottom: 16px;
    box-shadow: 0 10px 25px -5px rgba(2, 132, 199, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.brand-title[b-3gdywr949d] {
    font-size: 2rem;
    font-weight: 800;
    margin: 0 0 6px 0;
    color: #ffffff;
    letter-spacing: -0.03em;
}

.brand-subtitle[b-3gdywr949d] {
    margin: 0;
    font-size: 0.92rem;
    color: #94a3b8;
}

/* Alert Box */
.login-alert-box[b-3gdywr949d] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 24px;
    color: #fca5a5;
    font-size: 0.9rem;
    line-height: 1.4;
}

.alert-icon[b-3gdywr949d] {
    font-size: 1.2rem;
    color: #ef4444;
    flex-shrink: 0;
    margin-top: 1px;
}

@keyframes shake-b-3gdywr949d {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

.animate-shake[b-3gdywr949d] {
    animation: shake-b-3gdywr949d 0.4s ease-in-out;
}

/* Form Styles */
.login-form[b-3gdywr949d] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group-modern[b-3gdywr949d] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label[b-3gdywr949d] {
    font-size: 0.88rem;
    font-weight: 600;
    color: #cbd5e1;
}

.input-with-icon[b-3gdywr949d] {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.input-icon-left[b-3gdywr949d] {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.15rem;
    color: #38bdf8;
    pointer-events: none;
    z-index: 2;
}

.form-control-modern[b-3gdywr949d] {
    width: 100% !important;
    height: 48px;
    padding: 12px 16px;
    background: #1e293b !important;
    border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    font-size: 0.95rem !important;
    font-family: inherit;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    outline: none !important;
    box-sizing: border-box !important;
    display: block !important;
}

.form-control-modern.with-icon-left[b-3gdywr949d] {
    padding-left: 46px !important;
}

.form-control-modern.with-icon-right[b-3gdywr949d] {
    padding-right: 46px !important;
}

.form-control-modern:focus[b-3gdywr949d] {
    border-color: #38bdf8 !important;
    background: #0f172a !important;
    box-shadow: 0 0 0 3.5px rgba(56, 189, 248, 0.22) !important;
}

.form-control-modern[b-3gdywr949d]::placeholder {
    color: #64748b !important;
}

.password-wrapper[b-3gdywr949d] {
    position: relative;
}

.btn-toggle-eye[b-3gdywr949d] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 1.15rem;
    cursor: pointer;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
    z-index: 2;
}

.btn-toggle-eye:hover[b-3gdywr949d] {
    color: #38bdf8;
}

.validation-msg[b-3gdywr949d] {
    color: #f87171;
    font-size: 0.82rem;
    margin-top: 2px;
}

/* Submit Button */
.btn-admin-submit[b-3gdywr949d] {
    margin-top: 6px;
    width: 100%;
    height: 48px;
    padding: 0 20px;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
}

.btn-admin-submit:hover:not(:disabled)[b-3gdywr949d] {
    background: linear-gradient(135deg, #0369a1 0%, #075985 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.45);
}

.btn-admin-submit:disabled[b-3gdywr949d] {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-spinner[b-3gdywr949d] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin-b-3gdywr949d 0.8s linear infinite;
}

@keyframes spin-b-3gdywr949d {
    to { transform: rotate(360deg); }
}

/* Quick Accounts Section */
.quick-accounts-section[b-3gdywr949d] {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

.quick-title[b-3gdywr949d] {
    display: block;
    font-size: 0.82rem;
    color: #94a3b8;
    margin-bottom: 10px;
    font-weight: 600;
}

.quick-title i[b-3gdywr949d] {
    color: #facc15;
}

.account-chips[b-3gdywr949d] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chip-btn[b-3gdywr949d] {
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: #bae6fd;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 0.84rem;
    cursor: pointer;
    transition: all 0.2s;
}

.chip-btn:hover[b-3gdywr949d] {
    background: rgba(2, 132, 199, 0.25);
    border-color: #38bdf8;
    color: #ffffff;
    transform: translateY(-1px);
}

/* Footer Links */
.card-footer-links[b-3gdywr949d] {
    text-align: center;
    margin-top: 24px;
}

.back-home-link[b-3gdywr949d] {
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.88rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
}

.back-home-link:hover[b-3gdywr949d] {
    color: #38bdf8;
}
/* /Pages/Admin/AdminMockTests.razor.rz.scp.css */
.admin-container[b-v7huzaeads] {
    padding: 30px;
    background-color: #f8f9fa;
    color: #333;
    min-height: calc(100vh - 80px);
    border-radius: 12px;
}

.admin-header[b-v7huzaeads] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 15px;
}

.admin-header h1[b-v7huzaeads] {
    margin: 0;
    font-size: 1.8rem;
    color: #2c3e50;
    font-weight: 700;
}

.btn-create[b-v7huzaeads], .btn-primary[b-v7huzaeads] {
    background-color: #0d6efd;
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    box-shadow: 0 4px 6px rgba(13, 110, 253, 0.2);
    transition: all 0.2s;
}

.btn-create:hover[b-v7huzaeads], .btn-primary:hover[b-v7huzaeads] {
    background-color: #0b5ed7;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(13, 110, 253, 0.3);
}

.btn-secondary[b-v7huzaeads] {
    background-color: transparent;
    color: #6c757d;
    border: 1px solid #ced4da;
    padding: 10px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-secondary:hover[b-v7huzaeads] {
    background-color: #e9ecef;
    color: #495057;
}

.admin-card[b-v7huzaeads] {
    background-color: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

.create-form h2[b-v7huzaeads] {
    margin-top: 0;
    border-bottom: 1px solid #f1f3f5;
    padding-bottom: 15px;
    margin-bottom: 25px;
    color: #2c3e50;
    font-size: 1.4rem;
}

.form-group[b-v7huzaeads] {
    margin-bottom: 20px;
}

.form-group label[b-v7huzaeads] {
    display: block;
    margin-bottom: 8px;
    color: #495057;
    font-weight: 600;
    font-size: 0.95rem;
}

.form-group .answer-url-label[b-v7huzaeads] {
    margin-top: 14px;
    color: #0f766e;
    font-size: 0.88rem;
}

.form-control[b-v7huzaeads] {
    width: 100%;
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid #ced4da;
    background-color: #fff;
    color: #333;
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control:focus[b-v7huzaeads] {
    outline: none;
    border-color: #86b7fe;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
}

.upload-box[b-v7huzaeads] {
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    border: 1px dashed #ced4da;
}

.upload-status[b-v7huzaeads] {
    font-size: 0.9rem;
    color: #fd7e14;
    font-weight: 500;
}

.upload-status.success[b-v7huzaeads] {
    color: #198754;
}

.form-actions[b-v7huzaeads] {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #f1f3f5;
}

.list-container h2[b-v7huzaeads] {
    color: #2c3e50;
    margin-top: 0;
    margin-bottom: 20px;
}

.admin-table[b-v7huzaeads] {
    width: 100%;
    border-collapse: collapse;
}

.admin-table th[b-v7huzaeads], .admin-table td[b-v7huzaeads] {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid #e9ecef;
}

.admin-table th[b-v7huzaeads] {
    color: #6c757d;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    background-color: #f8f9fa;
}

.admin-table tbody tr:hover[b-v7huzaeads] {
    background-color: #f8f9fa;
}

.url-cell[b-v7huzaeads] {
    color: #198754;
    font-size: 0.9rem;
    font-weight: 500;
}

.btn-sm[b-v7huzaeads] {
    padding: 6px 14px;
    font-size: 0.85rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-edit[b-v7huzaeads] {
    background-color: #f8f9fa;
    color: #0d6efd;
    border: 1px solid #0d6efd;
}

.btn-edit:hover[b-v7huzaeads] {
    background-color: #0d6efd;
    color: white;
}
/* /Pages/Admin/AdminNavigation.razor.rz.scp.css */
/* ========================================================================= */
/* ADMIN SIDEBAR NAVIGATION MANAGEMENT (MODERN THEME)                        */
/* ========================================================================= */
.admin-nav-page[b-y7irvo07iu] {
    padding: 24px 32px 60px;
    max-width: 1400px;
    margin: 0 auto;
    font-family: 'Be Vietnam Pro', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, ""Segoe UI"", Roboto, sans-serif;
    color: #1e293b;
}

/* ── Page Header ── */
.page-header[b-y7irvo07iu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.header-left[b-y7irvo07iu] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-icon-badge[b-y7irvo07iu] {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.3);
    flex-shrink: 0;
}

.page-title[b-y7irvo07iu] {
    font-size: 1.85rem;
    font-weight: 800;
    margin: 0 0 4px 0;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.page-subtitle[b-y7irvo07iu] {
    margin: 0;
    font-size: 0.92rem;
    color: #64748b;
}

.btn-create-nav[b-y7irvo07iu] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff;
    border: none;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);
    transition: all 0.2s ease;
}

.btn-create-nav:hover[b-y7irvo07iu] {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(2, 132, 199, 0.35);
}

/* ── Toolbar Card ── */
.nav-toolbar-card[b-y7irvo07iu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    padding: 14px 20px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 14px;
}

.filter-pills-row[b-y7irvo07iu] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-pill[b-y7irvo07iu] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 20px;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-pill:hover[b-y7irvo07iu] {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #0f172a;
}

.filter-pill.active[b-y7irvo07iu] {
    background: #0f172a;
    color: #ffffff;
    border-color: #0f172a;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.2);
}

.filter-pill.pill-hsk.active[b-y7irvo07iu] {
    background: #b91c1c;
    border-color: #b91c1c;
    box-shadow: 0 3px 10px rgba(185, 28, 28, 0.25);
}

.filter-pill.pill-ielts.active[b-y7irvo07iu] {
    background: #0284c7;
    border-color: #0284c7;
    box-shadow: 0 3px 10px rgba(2, 132, 199, 0.25);
}

.pill-dot[b-y7irvo07iu] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #64748b;
}

.filter-pill.active .pill-dot[b-y7irvo07iu] {
    background: #38bdf8;
}

.pill-count[b-y7irvo07iu] {
    font-size: 0.75rem;
    background: rgba(0, 0, 0, 0.06);
    padding: 1px 6px;
    border-radius: 10px;
}

.filter-pill.active .pill-count[b-y7irvo07iu] {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.search-box-wrapper[b-y7irvo07iu] {
    position: relative;
    width: 300px;
    max-width: 100%;
}

.search-icon[b-y7irvo07iu] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.9rem;
    pointer-events: none;
}

.search-input[b-y7irvo07iu] {
    width: 100%;
    padding: 8px 34px 8px 34px;
    border-radius: 10px;
    border: 1.5px solid #e2e8f0;
    font-size: 0.88rem;
    color: #0f172a;
    outline: none;
    transition: all 0.2s ease;
}

.search-input:focus[b-y7irvo07iu] {
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.12);
}

.btn-clear-search[b-y7irvo07iu] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
}

/* ── Table Card ── */
.nav-table-card[b-y7irvo07iu] {
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
    overflow: hidden;
}

.table-responsive-wrapper[b-y7irvo07iu] {
    width: 100%;
    overflow-x: auto;
}

.modern-nav-table[b-y7irvo07iu] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    text-align: left;
}

.modern-nav-table th[b-y7irvo07iu] {
    background: #f8fafc;
    color: #475569;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 14px 18px;
    border-bottom: 1.5px solid #e2e8f0;
    white-space: nowrap;
}

.modern-nav-table td[b-y7irvo07iu] {
    padding: 14px 18px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    vertical-align: middle;
    transition: background 0.15s ease;
}

.modern-nav-table tbody tr:hover td[b-y7irvo07iu] {
    background: #f8fafc;
}

.modern-nav-table tbody tr:last-child td[b-y7irvo07iu] {
    border-bottom: none;
}

.id-badge[b-y7irvo07iu] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #64748b;
    background: #f1f5f9;
    padding: 3px 7px;
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
}

.icon-avatar-badge[b-y7irvo07iu] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    background: #f1f5f9;
    color: #0f172a;
    border: 1px solid #e2e8f0;
}

.icon-avatar-badge.icon-lang-hsk[b-y7irvo07iu] {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

.icon-avatar-badge.icon-lang-ielts[b-y7irvo07iu] {
    background: #f0f9ff;
    color: #0284c7;
    border-color: #bae6fd;
}

.nav-item-name[b-y7irvo07iu] {
    font-weight: 700;
    color: #0f172a;
    font-size: 0.95rem;
    margin-bottom: 2px;
}

.nav-item-desc[b-y7irvo07iu] {
    font-size: 0.78rem;
    color: #64748b;
}

.route-code-pill[b-y7irvo07iu] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.82rem;
    color: #0284c7;
}

.route-code-pill i[b-y7irvo07iu] {
    color: #64748b;
    font-size: 0.9rem;
}

.route-code-pill code[b-y7irvo07iu] {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
}

.program-badge[b-y7irvo07iu] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
}

.program-badge.prog-hsk[b-y7irvo07iu] {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.program-badge.prog-ielts[b-y7irvo07iu] {
    background: #f0f9ff;
    color: #0284c7;
    border: 1px solid #bae6fd;
}

.order-pill[b-y7irvo07iu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #475569;
    font-weight: 700;
    font-size: 0.82rem;
}

.actions-group[b-y7irvo07iu] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.btn-action-edit[b-y7irvo07iu], .btn-action-delete[b-y7irvo07iu] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s ease;
}

.btn-action-edit[b-y7irvo07iu] {
    background: #f0f9ff;
    color: #0284c7;
    border-color: #bae6fd;
}

.btn-action-edit:hover[b-y7irvo07iu] {
    background: #0284c7;
    color: #ffffff;
    border-color: #0284c7;
}

.btn-action-delete[b-y7irvo07iu] {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fecaca;
}

.btn-action-delete:hover[b-y7irvo07iu] {
    background: #dc2626;
    color: #ffffff;
    border-color: #dc2626;
}

.table-footer-summary[b-y7irvo07iu] {
    padding: 12px 20px;
    background: #f8fafc;
    border-top: 1px solid #f1f5f9;
    font-size: 0.82rem;
    color: #64748b;
    text-align: right;
}

/* ── States ── */
.table-loading-state[b-y7irvo07iu], .table-empty-state[b-y7irvo07iu] {
    padding: 50px 20px;
    text-align: center;
}

.loading-spinner[b-y7irvo07iu] {
    width: 36px;
    height: 36px;
    border: 3px solid #e2e8f0;
    border-top-color: #0284c7;
    border-radius: 50%;
    animation: spin-b-y7irvo07iu 0.7s linear infinite;
    margin: 0 auto 12px;
}

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

.empty-icon-wrap[b-y7irvo07iu] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin: 0 auto 14px;
}

.table-empty-state h3[b-y7irvo07iu] {
    margin: 0 0 6px 0;
    color: #0f172a;
    font-size: 1.15rem;
}

.table-empty-state p[b-y7irvo07iu] {
    margin: 0 0 16px 0;
    color: #64748b;
    font-size: 0.88rem;
}

.btn-create-nav-sm[b-y7irvo07iu] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 10px;
    background: #0284c7;
    color: #ffffff;
    border: none;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}

/* ── Modal Overlay & Card ── */
.nav-form-overlay[b-y7irvo07iu] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 16px;
    animation: fadeIn-b-y7irvo07iu 0.2s ease;
}

.nav-form-card[b-y7irvo07iu] {
    width: 100%;
    max-width: 580px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    animation: scaleUp-b-y7irvo07iu 0.2s ease;
}

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

@keyframes scaleUp-b-y7irvo07iu {
    from { transform: scale(0.96); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.form-card-header[b-y7irvo07iu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    border-bottom: 1px solid #f1f5f9;
}

.form-header-title[b-y7irvo07iu] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #0284c7;
    font-size: 1.15rem;
}

.form-header-title h3[b-y7irvo07iu] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
}

.btn-close-form[b-y7irvo07iu] {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-close-form:hover[b-y7irvo07iu] {
    background: #f1f5f9;
    color: #0f172a;
}

.form-alert-error[b-y7irvo07iu] {
    margin: 16px 24px 0;
    padding: 10px 14px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    color: #b91c1c;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-fields-grid[b-y7irvo07iu] {
    padding: 20px 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.form-group-item[b-y7irvo07iu] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group-item.full-span[b-y7irvo07iu] {
    grid-column: 1 / -1;
}

.form-label-custom[b-y7irvo07iu] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #475569;
}

.form-label-custom .required[b-y7irvo07iu] {
    color: #ef4444;
}

.form-input-custom[b-y7irvo07iu] {
    padding: 9px 13px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.88rem;
    color: #0f172a;
    outline: none;
    transition: all 0.18s ease;
}

.form-input-custom:focus[b-y7irvo07iu] {
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.12);
}

.form-select-custom[b-y7irvo07iu] {
    background: #ffffff;
    cursor: pointer;
}

.font-mono[b-y7irvo07iu] {
    font-family: 'JetBrains Mono', monospace;
}

.icon-input-wrapper[b-y7irvo07iu] {
    display: flex;
    gap: 10px;
    align-items: center;
}

.icon-input-wrapper .form-input-custom[b-y7irvo07iu] {
    flex: 1;
}

.icon-live-preview[b-y7irvo07iu] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    font-size: 0.82rem;
    font-weight: 600;
    color: #0284c7;
}

.icon-live-preview i[b-y7irvo07iu] {
    font-size: 1.1rem;
}

.form-footer-actions[b-y7irvo07iu] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    background: #f8fafc;
    border-top: 1px solid #f1f5f9;
}

.btn-modal-cancel[b-y7irvo07iu] {
    padding: 9px 18px;
    border-radius: 10px;
    border: 1.5px solid #e2e8f0;
    background: #ffffff;
    color: #64748b;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
}

.btn-modal-cancel:hover[b-y7irvo07iu] {
    background: #f1f5f9;
    color: #0f172a;
}

.btn-modal-save[b-y7irvo07iu] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    border-radius: 10px;
    background: #0284c7;
    color: #ffffff;
    border: none;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);
}

.btn-modal-save:hover:not(:disabled)[b-y7irvo07iu] {
    background: #0369a1;
}

.btn-spinner[b-y7irvo07iu] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin-b-y7irvo07iu 0.6s linear infinite;
}
/* /Pages/Admin/AdminNotifications.razor.rz.scp.css */
/* ========================================================================= */
/* ADMIN NOTIFICATIONS MANAGEMENT CSS                                         */
/* ========================================================================= */
.admin-notif-page[b-hjszvfnm2v] {
    padding: 24px 32px 60px;
    max-width: 1400px;
    margin: 0 auto;
    font-family: 'Be Vietnam Pro', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1e293b;
}

/* Page Header */
.page-header[b-hjszvfnm2v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.header-left[b-hjszvfnm2v] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-icon-badge[b-hjszvfnm2v] {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.3);
    flex-shrink: 0;
}

.page-title[b-hjszvfnm2v] {
    font-size: 1.85rem;
    font-weight: 800;
    margin: 0 0 4px 0;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.page-subtitle[b-hjszvfnm2v] {
    margin: 0;
    font-size: 0.95rem;
    color: #64748b;
}

.header-right[b-hjszvfnm2v] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-refresh[b-hjszvfnm2v] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #475569;
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.btn-refresh:hover:not(:disabled)[b-hjszvfnm2v] {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #1e293b;
}

.btn-primary-action[b-hjszvfnm2v] {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    border: none;
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.3);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-primary-action:hover[b-hjszvfnm2v] {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(2, 132, 199, 0.4);
    filter: brightness(1.05);
}

.spin-icon[b-hjszvfnm2v] {
    animation: spin-b-hjszvfnm2v 1s infinite linear;
}

@keyframes spin-b-hjszvfnm2v {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Quick Stats Grid */
.stats-grid[b-hjszvfnm2v] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card[b-hjszvfnm2v] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}

.stat-icon[b-hjszvfnm2v] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.stat-icon.total[b-hjszvfnm2v] { background: #e0f2fe; color: #0284c7; }
.stat-icon.active[b-hjszvfnm2v] { background: #dcfce7; color: #16a34a; }
.stat-icon.broadcast[b-hjszvfnm2v] { background: #fef3c7; color: #d97706; }
.stat-icon.exam[b-hjszvfnm2v] { background: #ede9fe; color: #7c3aed; }

.stat-content[b-hjszvfnm2v] {
    display: flex;
    flex-direction: column;
}

.stat-label[b-hjszvfnm2v] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.stat-number[b-hjszvfnm2v] {
    font-size: 1.6rem;
    font-weight: 800;
    color: #0f172a;
    margin: 2px 0 0 0;
}

/* Toolbar & Filters */
.toolbar-card[b-hjszvfnm2v] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}

.filter-tabs[b-hjszvfnm2v] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.filter-tab-btn[b-hjszvfnm2v] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 6px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}

.filter-tab-btn:hover[b-hjszvfnm2v] {
    background: #f1f5f9;
    color: #1e293b;
}

.filter-tab-btn.active[b-hjszvfnm2v] {
    background: #0284c7;
    border-color: #0284c7;
    color: #ffffff;
}

.tab-badge[b-hjszvfnm2v] {
    background: rgba(0, 0, 0, 0.07);
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 0.75rem;
}

.filter-tab-btn.active .tab-badge[b-hjszvfnm2v] {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

.search-box[b-hjszvfnm2v] {
    position: relative;
    min-width: 280px;
    flex-grow: 0;
}

.search-icon[b-hjszvfnm2v] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.9rem;
}

.search-input[b-hjszvfnm2v] {
    width: 100%;
    padding: 8px 32px 8px 34px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.88rem;
    color: #1e293b;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-input:focus[b-hjszvfnm2v] {
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.12);
}

.search-clear-btn[b-hjszvfnm2v] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 0;
}

.search-clear-btn:hover[b-hjszvfnm2v] {
    color: #475569;
}

/* Data Table */
.table-container[b-hjszvfnm2v] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
    overflow: hidden;
}

.custom-table[b-hjszvfnm2v] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.custom-table th[b-hjszvfnm2v] {
    background: #f8fafc;
    color: #475569;
    font-weight: 700;
    padding: 14px 16px;
    border-bottom: 1px solid #e2e8f0;
    text-align: left;
    white-space: nowrap;
}

.custom-table td[b-hjszvfnm2v] {
    padding: 14px 16px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    color: #334155;
}

.custom-table tbody tr:hover[b-hjszvfnm2v] {
    background-color: #f8fafc;
}

.custom-table tr.row-inactive[b-hjszvfnm2v] {
    opacity: 0.6;
    background-color: #fcfcfc;
}

.table-icon-wrap[b-hjszvfnm2v] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.table-icon-wrap.icon-system[b-hjszvfnm2v] { background: #e0f2fe; color: #0284c7; }
.table-icon-wrap.icon-exam[b-hjszvfnm2v] { background: #fef3c7; color: #d97706; }
.table-icon-wrap.icon-update[b-hjszvfnm2v] { background: #dcfce7; color: #16a34a; }
.table-icon-wrap.icon-reminder[b-hjszvfnm2v] { background: #ede9fe; color: #7c3aed; }

.table-notif-title[b-hjszvfnm2v] {
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 2px;
}

.table-notif-message[b-hjszvfnm2v] {
    font-size: 0.82rem;
    color: #64748b;
    line-height: 1.4;
    max-width: 420px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.type-pill[b-hjszvfnm2v] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
}

.type-pill-system[b-hjszvfnm2v] { background: #e0f2fe; color: #0369a1; }
.type-pill-exam[b-hjszvfnm2v] { background: #fef3c7; color: #b45309; }
.type-pill-update[b-hjszvfnm2v] { background: #dcfce7; color: #15803d; }
.type-pill-reminder[b-hjszvfnm2v] { background: #ede9fe; color: #6d28d9; }

.badge-broadcast[b-hjszvfnm2v] {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    background: #f1f5f9;
    color: #334155;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
}

.badge-targeted[b-hjszvfnm2v] {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    background: #fef2f2;
    color: #dc2626;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
}

.table-url-link[b-hjszvfnm2v] {
    color: #0284c7;
    text-decoration: none;
    font-size: 0.82rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.table-url-link:hover[b-hjszvfnm2v] {
    text-decoration: underline;
}

.switch-toggle[b-hjszvfnm2v] {
    cursor: pointer;
    width: 2.4em;
    height: 1.25em;
}

.switch-toggle:checked[b-hjszvfnm2v] {
    background-color: #16a34a;
    border-color: #16a34a;
}

.table-date[b-hjszvfnm2v] {
    font-size: 0.82rem;
    color: #64748b;
}

.actions-group[b-hjszvfnm2v] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.action-btn[b-hjszvfnm2v] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    transition: all 0.15s ease;
}

.action-btn.edit-btn:hover[b-hjszvfnm2v] {
    background: #e0f2fe;
    color: #0284c7;
    border-color: #bae6fd;
}

.action-btn.delete-btn:hover[b-hjszvfnm2v] {
    background: #fee2e2;
    color: #dc2626;
    border-color: #fca5a5;
}

.table-loading[b-hjszvfnm2v], .table-empty[b-hjszvfnm2v] {
    padding: 48px 24px;
    text-align: center;
    color: #64748b;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.empty-icon[b-hjszvfnm2v] {
    font-size: 2.6rem;
    color: #94a3b8;
}

/* Modal Styling */
.modal-backdrop-custom[b-hjszvfnm2v] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1050;
    animation: fade-in-b-hjszvfnm2v 0.2s ease;
}

.modal-dialog-custom[b-hjszvfnm2v] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 580px;
    max-width: 92vw;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
    z-index: 1055;
    overflow: hidden;
    animation: modal-pop-b-hjszvfnm2v 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-sm-custom[b-hjszvfnm2v] {
    width: 420px;
}

@keyframes modal-pop-b-hjszvfnm2v {
    from { opacity: 0; transform: translate(-50%, -46%) scale(0.96); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes fade-in-b-hjszvfnm2v {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-header-custom[b-hjszvfnm2v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #f1f5f9;
}

.modal-title-wrap[b-hjszvfnm2v] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal-title-wrap i[b-hjszvfnm2v] {
    font-size: 1.3rem;
}

.modal-title[b-hjszvfnm2v] {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.btn-close-custom[b-hjszvfnm2v] {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.btn-close-custom:hover[b-hjszvfnm2v] {
    background: #f1f5f9;
    color: #334155;
}

.modal-body-custom[b-hjszvfnm2v] {
    padding: 24px;
    max-height: 75vh;
    overflow-y: auto;
}

.modal-footer-custom[b-hjszvfnm2v] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    background: #f8fafc;
    border-top: 1px solid #f1f5f9;
}

.icon-presets-row[b-hjszvfnm2v] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.icon-preset-btn[b-hjszvfnm2v] {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    transition: all 0.15s ease;
}

.icon-preset-btn:hover[b-hjszvfnm2v] {
    background: #ffffff;
    border-color: #0284c7;
    color: #0284c7;
    transform: translateY(-1px);
}

.icon-preset-btn.selected[b-hjszvfnm2v] {
    background: #0284c7;
    border-color: #0284c7;
    color: #ffffff;
}

.custom-toggle-card[b-hjszvfnm2v] {
    padding: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.toggle-card-desc[b-hjszvfnm2v] {
    display: block;
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 4px;
    line-height: 1.3;
}

.required[b-hjszvfnm2v]::after {
    content: " *";
    color: #ef4444;
}
/* /Pages/Admin/AdminReadingTool.razor.rz.scp.css */
.admin-container[b-sx82rhwh26] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    font-family: var(--ig-font, 'Inter', sans-serif);
}

.header[b-sx82rhwh26] {
    margin-bottom: 30px;
}
.header h1[b-sx82rhwh26] {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 5px;
    color: var(--ig-text);
}
.header p[b-sx82rhwh26] {
    color: #888;
}

.two-col-layout[b-sx82rhwh26] {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}
.editor-panel[b-sx82rhwh26] {
    flex: 2;
}
.preview-panel[b-sx82rhwh26] {
    flex: 1;
}

.card[b-sx82rhwh26] {
    background: #fff;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    margin-bottom: 25px;
    border: 1px solid #eaeaea;
}
.card h3[b-sx82rhwh26] {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--ig-text);
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 10px;
}

.form-group[b-sx82rhwh26] {
    margin-bottom: 15px;
}
.form-group label[b-sx82rhwh26] {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #555;
}
.form-control[b-sx82rhwh26] {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.2s;
}
.form-control:focus[b-sx82rhwh26] {
    border-color: var(--ig-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 149, 246, 0.1);
}

.html-editor[b-sx82rhwh26] {
    height: 200px;
    font-family: monospace;
    font-size: 0.9rem;
    resize: vertical;
}

.question-box[b-sx82rhwh26] {
    background: #fcfcfc;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
}
.q-header[b-sx82rhwh26] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}
.btn-remove[b-sx82rhwh26] {
    background: #ffebee;
    color: #e53935;
    border: none;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.8rem;
    cursor: pointer;
}

.options-grid[b-sx82rhwh26] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.option-item[b-sx82rhwh26] {
    display: flex;
    align-items: center;
    gap: 8px;
}
.opt-label[b-sx82rhwh26] {
    font-weight: bold;
    color: #555;
}

.btn-add[b-sx82rhwh26] {
    width: 100%;
    padding: 12px;
    background: transparent;
    border: 2px dashed #ccc;
    color: #666;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-add:hover[b-sx82rhwh26] {
    border-color: var(--ig-primary);
    color: var(--ig-primary);
    background: rgba(0, 149, 246, 0.05);
}

.btn-generate[b-sx82rhwh26] {
    width: 100%;
    padding: 15px;
    background: var(--ig-primary, #0095f6);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    margin-bottom: 30px;
}
.btn-generate:hover[b-sx82rhwh26] {
    background: #0077c5;
}

.sticky-card[b-sx82rhwh26] {
    position: sticky;
    top: 20px;
}
.json-output[b-sx82rhwh26] {
    width: 100%;
    height: 500px;
    background: #1e1e1e;
    color: #d4d4d4;
    font-family: 'Consolas', monospace;
    font-size: 0.85rem;
    padding: 15px;
    border-radius: 8px;
    border: none;
    resize: none;
    margin-bottom: 10px;
}
.btn-copy[b-sx82rhwh26] {
    width: 100%;
    padding: 10px;
    background: #e0e0e0;
    color: #333;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
}
.btn-copy:hover[b-sx82rhwh26] {
    background: #ccc;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .card[b-sx82rhwh26], .question-box[b-sx82rhwh26] {
        background: #1a1a1a;
        border-color: #333;
    }
    .form-control[b-sx82rhwh26] {
        background: #2a2a2a;
        border-color: #444;
        color: white;
    }
}
/* /Pages/Admin/AdminSpeakAlong.razor.rz.scp.css */
/* ========================================================================= */
/* ADMIN SPEAK ALONG (SHADOWING) STYLESHEET                                  */
/* ========================================================================= */
.admin-speak-along-page[b-8u9eyyv5fp] {
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
    font-family: 'Be Vietnam Pro', 'Plus Jakarta Sans', sans-serif;
    color: #1e293b;
}

/* Header */
.page-top-header[b-8u9eyyv5fp] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.page-title[b-8u9eyyv5fp] {
    font-size: 1.6rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 6px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-subtitle[b-8u9eyyv5fp] {
    margin: 0;
    font-size: 0.9rem;
    color: #64748b;
}

.header-actions[b-8u9eyyv5fp] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Buttons */
.btn[b-8u9eyyv5fp] {
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    border: none;
    outline: none;
}

.btn-primary-solid[b-8u9eyyv5fp] {
    background: #0284c7;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.25);
}

.btn-primary-solid:hover[b-8u9eyyv5fp] {
    background: #0369a1;
    transform: translateY(-1px);
}

.btn-primary-outline[b-8u9eyyv5fp] {
    background: #f0f9ff;
    border: 1.5px solid #bae6fd;
    color: #0284c7;
}

.btn-primary-outline:hover[b-8u9eyyv5fp] {
    background: #0284c7;
    color: #ffffff;
}

.btn-secondary-outline[b-8u9eyyv5fp] {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    color: #475569;
}

.btn-secondary-outline:hover[b-8u9eyyv5fp] {
    background: #f8fafc;
    border-color: #94a3b8;
}

.btn-success-outline[b-8u9eyyv5fp] {
    background: #f0fdf4;
    border: 1.5px solid #bbf7d0;
    color: #166534;
}

.btn-success-outline:hover[b-8u9eyyv5fp] {
    background: #16a34a;
    color: #ffffff;
}

.btn-danger-outline[b-8u9eyyv5fp] {
    background: #fef2f2;
    border: 1.5px solid #fecaca;
    color: #dc2626;
}

.btn-danger-outline:hover[b-8u9eyyv5fp] {
    background: #dc2626;
    color: #ffffff;
}

.btn-sm[b-8u9eyyv5fp] {
    padding: 6px 12px;
    font-size: 0.8rem;
}

/* Custom Alert */
.custom-alert[b-8u9eyyv5fp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    border-radius: 12px;
    margin-bottom: 20px;
    animation: fadeIn-b-8u9eyyv5fp 0.3s ease;
}

.alert-success[b-8u9eyyv5fp] {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #15803d;
}

.alert-error[b-8u9eyyv5fp] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

.alert-content[b-8u9eyyv5fp] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
}

.alert-close[b-8u9eyyv5fp] {
    background: transparent;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    color: inherit;
    line-height: 1;
}

/* Filter Toolbar */
.filter-toolbar[b-8u9eyyv5fp] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 16px 20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.category-tabs[b-8u9eyyv5fp] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.category-tab-btn[b-8u9eyyv5fp] {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    padding: 6px 14px;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
}

.category-tab-btn:hover[b-8u9eyyv5fp] {
    background: #f0f9ff;
    border-color: #0284c7;
    color: #0284c7;
}

.category-tab-btn.active[b-8u9eyyv5fp] {
    background: #0284c7;
    border-color: #0284c7;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.25);
}

.search-filter-row[b-8u9eyyv5fp] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.search-input-wrapper[b-8u9eyyv5fp] {
    position: relative;
    flex: 1;
    min-width: 280px;
}

.search-icon[b-8u9eyyv5fp] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
}

.search-input[b-8u9eyyv5fp] {
    width: 100%;
    padding: 9px 38px 9px 38px;
    border-radius: 10px;
    border: 1.5px solid #cbd5e1;
    font-size: 0.88rem;
    outline: none;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.search-input:focus[b-8u9eyyv5fp] {
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.search-clear-btn[b-8u9eyyv5fp] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    font-size: 1.2rem;
    color: #94a3b8;
    cursor: pointer;
}

.stats-badge[b-8u9eyyv5fp] {
    font-size: 0.85rem;
    color: #64748b;
    white-space: nowrap;
}

/* Content Card & Table */
.content-card[b-8u9eyyv5fp] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.02);
}

.table-responsive[b-8u9eyyv5fp] {
    overflow-x: auto;
}

.custom-table[b-8u9eyyv5fp] {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.88rem;
}

.custom-table th[b-8u9eyyv5fp] {
    background: #f8fafc;
    padding: 12px 16px;
    font-weight: 700;
    color: #475569;
    border-bottom: 1.5px solid #e2e8f0;
    white-space: nowrap;
}

.custom-table td[b-8u9eyyv5fp] {
    padding: 14px 16px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: top;
}

.custom-table tr:hover td[b-8u9eyyv5fp] {
    background: #f8fafc;
}

.question-text[b-8u9eyyv5fp] {
    font-weight: 700;
    color: #0f172a;
    line-height: 1.45;
}

.answer-text[b-8u9eyyv5fp] {
    color: #334155;
    line-height: 1.5;
    margin-bottom: 6px;
}

.btn-tts-listen[b-8u9eyyv5fp] {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s;
}

.btn-tts-listen:hover[b-8u9eyyv5fp] {
    background: #16a34a;
    color: #ffffff;
}

.vocab-tag[b-8u9eyyv5fp], .tips-tag[b-8u9eyyv5fp] {
    font-size: 0.8rem;
    line-height: 1.4;
    margin-bottom: 4px;
}

.vocab-tag[b-8u9eyyv5fp] {
    color: #d97706;
    font-weight: 600;
}

.tips-tag[b-8u9eyyv5fp] {
    color: #475569;
}

/* Actions Cell */
.actions-cell[b-8u9eyyv5fp] {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.btn-action-edit[b-8u9eyyv5fp], .btn-action-delete[b-8u9eyyv5fp] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-action-edit[b-8u9eyyv5fp] {
    background: #f0f9ff;
    color: #0284c7;
}

.btn-action-edit:hover[b-8u9eyyv5fp] {
    background: #0284c7;
    color: #ffffff;
}

.btn-action-delete[b-8u9eyyv5fp] {
    background: #fef2f2;
    color: #dc2626;
}

.btn-action-delete:hover[b-8u9eyyv5fp] {
    background: #dc2626;
    color: #ffffff;
}

/* Modal */
.admin-modal-overlay[b-8u9eyyv5fp] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.admin-modal-card[b-8u9eyyv5fp] {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: popModal-b-8u9eyyv5fp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes popModal-b-8u9eyyv5fp {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.admin-modal-header[b-8u9eyyv5fp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    border-bottom: 1px solid #f1f5f9;
}

.admin-modal-header h3[b-8u9eyyv5fp] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-modal-close[b-8u9eyyv5fp] {
    background: transparent;
    border: none;
    font-size: 1.6rem;
    color: #94a3b8;
    cursor: pointer;
    line-height: 1;
}

.admin-modal-body[b-8u9eyyv5fp] {
    padding: 20px 24px;
    overflow-y: auto;
}

.form-label[b-8u9eyyv5fp] {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: #334155;
    margin-bottom: 6px;
}

.form-label.required[b-8u9eyyv5fp]::after {
    content: " *";
    color: #dc2626;
}

.form-control[b-8u9eyyv5fp] {
    width: 100%;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1.5px solid #cbd5e1;
    font-size: 0.88rem;
    color: #1e293b;
    outline: none;
    box-sizing: border-box;
    transition: all 0.2s;
}

.form-control:focus[b-8u9eyyv5fp] {
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.import-hint[b-8u9eyyv5fp] {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 16px;
}

.admin-modal-footer[b-8u9eyyv5fp] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px;
    background: #f8fafc;
    border-top: 1px solid #f1f5f9;
}

/* Loading & Empty */
.loading-state[b-8u9eyyv5fp], .empty-state[b-8u9eyyv5fp] {
    text-align: center;
    padding: 60px 20px;
    color: #64748b;
}

.empty-icon[b-8u9eyyv5fp] {
    font-size: 2.5rem;
    color: #cbd5e1;
    margin-bottom: 10px;
}

.custom-spinner[b-8u9eyyv5fp] {
    width: 32px;
    height: 32px;
    border: 3px solid #e0f2fe;
    border-top-color: #0284c7;
    border-radius: 50%;
    margin: 0 auto 10px;
    animation: spin-b-8u9eyyv5fp 0.8s linear infinite;
}

.mini-spinner[b-8u9eyyv5fp] {
    width: 14px;
    height: 14px;
    border: 2px solid #e0f2fe;
    border-top-color: #0284c7;
    border-radius: 50%;
    display: inline-block;
    animation: spin-b-8u9eyyv5fp 0.8s linear infinite;
    vertical-align: middle;
}

.modal-lg-custom[b-8u9eyyv5fp] {
    max-width: 860px;
}

.audio-lines-editor-box[b-8u9eyyv5fp] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px;
}

.audio-lines-table-scroll[b-8u9eyyv5fp] {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
}

@keyframes spin-b-8u9eyyv5fp { to { transform: rotate(360deg); } }
@keyframes fadeIn-b-8u9eyyv5fp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
/* /Pages/Admin/AdminStories.razor.rz.scp.css */
/* ========================================================================= */
/* ADMIN STORIES MAIN CONTAINER & HEADER                                     */
/* ========================================================================= */
.admin-stories-page[b-mtm1yb7m69] {
    padding: 28px;
    max-width: 1400px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #1e293b;
}

.page-top-header[b-mtm1yb7m69] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.page-title[b-mtm1yb7m69] {
    margin: 0 0 6px;
    font-size: 1.7rem;
    font-weight: 800;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-subtitle[b-mtm1yb7m69] {
    margin: 0;
    font-size: 0.95rem;
    color: #64748b;
}

.header-actions[b-mtm1yb7m69] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Buttons */
.btn[b-mtm1yb7m69] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    border: none;
    text-decoration: none;
}

.btn-primary-solid[b-mtm1yb7m69] {
    background: #0284c7;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);
}

.btn-primary-solid:hover:not(:disabled)[b-mtm1yb7m69] {
    background: #0369a1;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(2, 132, 199, 0.35);
}

.btn-primary-outline[b-mtm1yb7m69] {
    background: #f0f9ff;
    color: #0284c7;
    border: 1px solid #bae6fd;
}

.btn-primary-outline:hover:not(:disabled)[b-mtm1yb7m69] {
    background: #e0f2fe;
    border-color: #7dd3fc;
}

.btn-secondary-outline[b-mtm1yb7m69] {
    background: #ffffff;
    color: #475569;
    border: 1px solid #cbd5e1;
}

.btn-secondary-outline:hover:not(:disabled)[b-mtm1yb7m69] {
    background: #f8fafc;
    color: #1e293b;
    border-color: #94a3b8;
}

.btn:disabled[b-mtm1yb7m69] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-sm[b-mtm1yb7m69] {
    padding: 6px 14px;
    font-size: 0.82rem;
    border-radius: 8px;
}

/* Custom Alert */
.custom-alert[b-mtm1yb7m69] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    font-size: 0.92rem;
}

.alert-success[b-mtm1yb7m69] {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.alert-error[b-mtm1yb7m69] {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.alert-content[b-mtm1yb7m69] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.alert-close[b-mtm1yb7m69] {
    background: transparent;
    border: none;
    font-size: 1.3rem;
    color: inherit;
    cursor: pointer;
    line-height: 1;
}

/* Filter Toolbar */
.filter-toolbar[b-mtm1yb7m69] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.search-input-wrapper[b-mtm1yb7m69] {
    position: relative;
    flex: 1;
    min-width: 320px;
}

.search-icon[b-mtm1yb7m69] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.95rem;
}

.search-input[b-mtm1yb7m69] {
    width: 100%;
    padding: 10px 38px 10px 38px;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    font-size: 0.92rem;
    color: #1e293b;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.search-input:focus[b-mtm1yb7m69] {
    outline: none;
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.search-clear-btn[b-mtm1yb7m69] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 1.1rem;
}

.filter-controls[b-mtm1yb7m69] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.filter-label[b-mtm1yb7m69] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #475569;
}

.custom-select[b-mtm1yb7m69] {
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    font-size: 0.92rem;
    color: #1e293b;
    cursor: pointer;
    outline: none;
}

.custom-select:focus[b-mtm1yb7m69] {
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

/* Content Card & Table */
.content-card[b-mtm1yb7m69] {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
    overflow: hidden;
}

.table-container[b-mtm1yb7m69] {
    width: 100%;
    overflow-x: auto;
}

.stories-table[b-mtm1yb7m69] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.stories-table th[b-mtm1yb7m69] {
    background: #f8fafc;
    color: #475569;
    font-weight: 700;
    text-align: left;
    padding: 14px 16px;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.stories-table td[b-mtm1yb7m69] {
    padding: 14px 16px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.stories-table tr:hover td[b-mtm1yb7m69] {
    background: #f8fafc;
}

.story-thumb[b-mtm1yb7m69] {
    width: 60px;
    height: 42px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.story-title-link[b-mtm1yb7m69] {
    font-weight: 700;
    color: #0369a1;
    cursor: pointer;
    font-size: 0.95rem;
    margin-bottom: 3px;
}

.story-title-link:hover[b-mtm1yb7m69] {
    text-decoration: underline;
    color: #0284c7;
}

.story-summary-preview[b-mtm1yb7m69] {
    font-size: 0.82rem;
    color: #64748b;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Badges & Pills */
.level-pill[b-mtm1yb7m69] {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.78rem;
    color: #ffffff;
}

.level-a1[b-mtm1yb7m69], .level-a2[b-mtm1yb7m69] { background: #16a34a; }
.level-b1[b-mtm1yb7m69] { background: #0284c7; }
.level-b2[b-mtm1yb7m69] { background: #ea580c; }
.level-c1[b-mtm1yb7m69], .level-c2[b-mtm1yb7m69] { background: #7c3aed; }

.band-pill[b-mtm1yb7m69] {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #e2e8f0;
}

.category-pill[b-mtm1yb7m69] {
    font-size: 0.85rem;
    color: #334155;
    font-weight: 500;
}

.stat-text[b-mtm1yb7m69] {
    font-weight: 600;
    color: #1e293b;
}

.text-muted[b-mtm1yb7m69] {
    color: #94a3b8;
    font-size: 0.78rem;
}

.content-tags[b-mtm1yb7m69] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tag[b-mtm1yb7m69] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    width: fit-content;
}

.tag-vocab[b-mtm1yb7m69] {
    background: #ecfeff;
    color: #0e7490;
    border: 1px solid #cffafe;
}

.tag-quiz[b-mtm1yb7m69] {
    background: #fefce8;
    color: #a16207;
    border: 1px solid #fef08a;
}

.r2-badge-link[b-mtm1yb7m69] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}

.r2-badge-link:hover[b-mtm1yb7m69] {
    background: #dcfce7;
    color: #166534;
}

.r2-badge-local[b-mtm1yb7m69] {
    font-size: 0.78rem;
    color: #64748b;
    background: #f1f5f9;
    padding: 3px 8px;
    border-radius: 6px;
}

.views-count[b-mtm1yb7m69] {
    color: #64748b;
    font-size: 0.85rem;
}

.status-pill[b-mtm1yb7m69] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
}

.status-published[b-mtm1yb7m69] {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.status-draft[b-mtm1yb7m69] {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
}

.text-right[b-mtm1yb7m69] {
    text-align: right;
}

.action-btn-group[b-mtm1yb7m69] {
    display: inline-flex;
    gap: 6px;
}

.action-btn[b-mtm1yb7m69] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.action-btn:hover[b-mtm1yb7m69] {
    transform: translateY(-1px);
}

.btn-view:hover[b-mtm1yb7m69] {
    background: #f0f9ff;
    color: #0284c7;
    border-color: #bae6fd;
}

.btn-edit:hover[b-mtm1yb7m69] {
    background: #ecfeff;
    color: #0891b2;
    border-color: #a5f3fc;
}

.btn-delete:hover[b-mtm1yb7m69] {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fecaca;
}

/* Loading & Empty states */
.loading-state[b-mtm1yb7m69], .empty-state[b-mtm1yb7m69] {
    text-align: center;
    padding: 60px 20px;
    color: #64748b;
}

.empty-icon[b-mtm1yb7m69] {
    font-size: 3rem;
    color: #cbd5e1;
    margin-bottom: 12px;
}

.empty-state h3[b-mtm1yb7m69] {
    margin: 0 0 6px;
    color: #1e293b;
    font-weight: 700;
}

.empty-state p[b-mtm1yb7m69] {
    margin: 0;
    font-size: 0.95rem;
}

.custom-spinner[b-mtm1yb7m69] {
    width: 36px;
    height: 36px;
    border: 3px solid #e2e8f0;
    border-top-color: #0284c7;
    border-radius: 50%;
    margin: 0 auto 12px;
    animation: spin-b-mtm1yb7m69 0.8s linear infinite;
}

.mini-spinner[b-mtm1yb7m69] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #ffffff;
    border-radius: 50%;
    display: inline-block;
    animation: spin-b-mtm1yb7m69 0.8s linear infinite;
}

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

/* ========================================================================= */
/* MODAL DIALOGS (100% SELF-CONTAINED CSS)                                   */
/* ========================================================================= */
.modal-overlay[b-mtm1yb7m69] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow-y: auto;
    box-sizing: border-box;
}

.modal-card[b-mtm1yb7m69] {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: popModal-b-mtm1yb7m69 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-lg[b-mtm1yb7m69] { max-width: 800px; }
.modal-xl[b-mtm1yb7m69] { max-width: 1100px; }

@keyframes popModal-b-mtm1yb7m69 {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-header[b-mtm1yb7m69] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 28px;
    border-bottom: 1px solid #f1f5f9;
    background: #ffffff;
}

.modal-title[b-mtm1yb7m69] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.modal-title i[b-mtm1yb7m69] {
    font-size: 1.8rem;
}

.modal-title h3[b-mtm1yb7m69] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
}

.modal-subtitle[b-mtm1yb7m69] {
    margin: 3px 0 0;
    font-size: 0.85rem;
    color: #64748b;
}

.modal-close-btn[b-mtm1yb7m69] {
    background: transparent;
    border: none;
    font-size: 1.8rem;
    color: #94a3b8;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    line-height: 1;
}

.modal-close-btn:hover[b-mtm1yb7m69] {
    background: #f1f5f9;
    color: #1e293b;
}

.modal-body[b-mtm1yb7m69] {
    padding: 28px;
    overflow-y: auto;
    flex: 1;
    background: #ffffff;
}

.modal-footer[b-mtm1yb7m69] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 28px;
    background: #f8fafc;
    border-top: 1px solid #f1f5f9;
}

/* ========================================================================= */
/* IMPORT TAB & PREVIEW UI                                                   */
/* ========================================================================= */
.import-tab-nav[b-mtm1yb7m69] {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    background: #f1f5f9;
    padding: 5px;
    border-radius: 12px;
}

.import-tab-btn[b-mtm1yb7m69] {
    flex: 1;
    padding: 10px 16px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: #475569;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.import-tab-btn.active[b-mtm1yb7m69] {
    background: #ffffff;
    color: #0284c7;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.file-upload-dropzone[b-mtm1yb7m69] {
    border: 2px dashed #0284c7;
    background: #f0f9ff;
    border-radius: 16px;
    padding: 36px 24px;
    text-align: center;
    margin-bottom: 20px;
}

.upload-icon[b-mtm1yb7m69] {
    font-size: 2.8rem;
    color: #0284c7;
    margin-bottom: 10px;
    display: block;
}

.file-upload-dropzone h4[b-mtm1yb7m69] {
    margin: 0 0 6px;
    font-size: 1.15rem;
    font-weight: 700;
    color: #0369a1;
}

.file-upload-dropzone p[b-mtm1yb7m69] {
    margin: 0 0 16px;
    font-size: 0.9rem;
    color: #64748b;
}

.file-input-wrapper[b-mtm1yb7m69] {
    max-width: 360px;
    margin: 0 auto;
}

.custom-file-input[b-mtm1yb7m69] {
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    cursor: pointer;
    font-size: 0.88rem;
    box-sizing: border-box;
}

.upload-progress-text[b-mtm1yb7m69] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #0284c7;
    font-size: 0.9rem;
    font-weight: 600;
    margin-top: 14px;
}

.json-textarea[b-mtm1yb7m69] {
    font-family: Consolas, Monaco, "Courier New", monospace;
    font-size: 0.88rem;
    line-height: 1.5;
}

/* Preview Section */
.import-preview-section[b-mtm1yb7m69] {
    margin-top: 20px;
    border-top: 1px solid #f1f5f9;
    padding-top: 20px;
}

.preview-header[b-mtm1yb7m69] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.preview-badge[b-mtm1yb7m69] {
    background: #f0fdf4;
    color: #166534;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.preview-info-text[b-mtm1yb7m69] {
    font-size: 0.85rem;
    color: #16a34a;
    font-weight: 600;
}

.preview-card[b-mtm1yb7m69] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 18px 22px;
}

.preview-meta-row[b-mtm1yb7m69] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 10px;
}

.preview-title[b-mtm1yb7m69] {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
}

.preview-badges[b-mtm1yb7m69] {
    display: flex;
    gap: 8px;
}

.preview-summary[b-mtm1yb7m69] {
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.5;
    margin-bottom: 16px;
}

.preview-stats-bar[b-mtm1yb7m69] {
    display: flex;
    gap: 16px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.stat-box[b-mtm1yb7m69] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #334155;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.stat-box i[b-mtm1yb7m69] {
    color: #0284c7;
}

.preview-sample-paragraph[b-mtm1yb7m69] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 0.88rem;
    line-height: 1.6;
}

.en-sample[b-mtm1yb7m69] {
    color: #1e293b;
    margin-bottom: 6px;
}

.vi-sample[b-mtm1yb7m69] {
    color: #0284c7;
}

/* ========================================================================= */
/* EDITOR TABS & FORM UI                                                     */
/* ========================================================================= */
.editor-tabs-bar[b-mtm1yb7m69] {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    border-bottom: 2px solid #f1f5f9;
    padding-bottom: 4px;
    flex-wrap: wrap;
}

.editor-tab-item[b-mtm1yb7m69] {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 10px 18px;
    font-size: 0.92rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 8px 8px 0 0;
    transition: all 0.2s ease;
    margin-bottom: -6px;
}

.editor-tab-item:hover[b-mtm1yb7m69] {
    color: #0284c7;
    background: #f8fafc;
}

.editor-tab-item.active[b-mtm1yb7m69] {
    color: #0284c7;
    border-bottom-color: #0284c7;
    background: #f0f9ff;
    font-weight: 700;
}

/* Form Controls */
.editor-grid[b-mtm1yb7m69] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 18px;
}

.grid-full[b-mtm1yb7m69] { grid-column: span 12; }
.grid-2-3[b-mtm1yb7m69] { grid-column: span 8; }
.grid-1-3[b-mtm1yb7m69] { grid-column: span 4; }
.grid-1-2[b-mtm1yb7m69] { grid-column: span 6; }
.grid-1-4[b-mtm1yb7m69] { grid-column: span 3; }

@media (max-width: 768px) {
    .grid-2-3[b-mtm1yb7m69], .grid-1-3[b-mtm1yb7m69], .grid-1-2[b-mtm1yb7m69], .grid-1-4[b-mtm1yb7m69] { grid-column: span 12; }
}

.form-group-label[b-mtm1yb7m69] {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
    color: #334155;
    margin-bottom: 6px;
}

.custom-input[b-mtm1yb7m69], .custom-textarea[b-mtm1yb7m69] {
    width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    font-size: 0.92rem;
    color: #1e293b;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.custom-input:focus[b-mtm1yb7m69], .custom-textarea:focus[b-mtm1yb7m69] {
    outline: none;
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.custom-textarea[b-mtm1yb7m69] {
    resize: vertical;
}

.font-monospace[b-mtm1yb7m69] {
    font-family: Consolas, Monaco, "Courier New", monospace;
}

/* R2 Quick Upload Card */
.r2-quick-upload-card[b-mtm1yb7m69] {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.r2-card-icon[b-mtm1yb7m69] {
    font-size: 2rem;
    color: #0284c7;
}

.r2-card-content[b-mtm1yb7m69] {
    flex: 1;
}

.r2-card-title[b-mtm1yb7m69] {
    font-weight: 700;
    color: #0369a1;
    font-size: 1rem;
    margin-bottom: 2px;
}

.r2-card-desc[b-mtm1yb7m69] {
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 8px;
}

/* Custom Switch */
.custom-switch-label[b-mtm1yb7m69] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: 600;
    color: #1e293b;
    user-select: none;
}

.custom-switch-label input[b-mtm1yb7m69] {
    display: none;
}

.switch-slider[b-mtm1yb7m69] {
    position: relative;
    width: 44px;
    height: 24px;
    background: #cbd5e1;
    border-radius: 24px;
    transition: background 0.2s ease;
}

.switch-slider[b-mtm1yb7m69]::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #ffffff;
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.custom-switch-label input:checked + .switch-slider[b-mtm1yb7m69] {
    background: #0284c7;
}

.custom-switch-label input:checked + .switch-slider[b-mtm1yb7m69]::before {
    transform: translateX(20px);
}

/* Section Toolbar */
.section-toolbar[b-mtm1yb7m69] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 12px 18px;
    border-radius: 12px;
    gap: 14px;
    flex-wrap: wrap;
}

.toolbar-hint[b-mtm1yb7m69] {
    font-size: 0.88rem;
    color: #475569;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.toolbar-hint i[b-mtm1yb7m69] {
    color: #0284c7;
    font-size: 1.05rem;
}

/* Bilingual Paragraph Cards */
.paragraph-card[b-mtm1yb7m69] {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.paragraph-card-header[b-mtm1yb7m69] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.paragraph-num-badge[b-mtm1yb7m69] {
    background: #f1f5f9;
    color: #334155;
    font-weight: 700;
    font-size: 0.82rem;
    padding: 4px 10px;
    border-radius: 6px;
}

.btn-delete-item[b-mtm1yb7m69] {
    background: transparent;
    border: 1px solid #fecaca;
    color: #dc2626;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
}

.btn-delete-item:hover[b-mtm1yb7m69] {
    background: #fef2f2;
}

.bilingual-grid[b-mtm1yb7m69] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 768px) {
    .bilingual-grid[b-mtm1yb7m69] { grid-template-columns: 1fr; }
}

.lang-label[b-mtm1yb7m69] {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.label-en[b-mtm1yb7m69] { color: #0369a1; }
.label-vi[b-mtm1yb7m69] { color: #15803d; }

.lang-textarea[b-mtm1yb7m69] {
    font-size: 0.92rem;
    line-height: 1.6;
}

/* Vocab Form Items */
.vocab-item-card[b-mtm1yb7m69] {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 16px;
}

.vocab-card-header[b-mtm1yb7m69] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.vocab-num-badge[b-mtm1yb7m69] {
    background: #ecfeff;
    color: #0891b2;
    font-weight: 700;
    font-size: 0.82rem;
    padding: 4px 10px;
    border-radius: 6px;
}

.vocab-form-grid[b-mtm1yb7m69] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 14px;
}

/* Quiz Form Items */
.quiz-item-card[b-mtm1yb7m69] {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 16px;
}

.quiz-card-header[b-mtm1yb7m69] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.quiz-num-badge[b-mtm1yb7m69] {
    background: #fefce8;
    color: #ca8a04;
    font-weight: 700;
    font-size: 0.82rem;
    padding: 4px 10px;
    border-radius: 6px;
}

.quiz-options-grid[b-mtm1yb7m69] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 768px) {
    .quiz-options-grid[b-mtm1yb7m69] { grid-template-columns: 1fr; }
}

.option-input-wrapper[b-mtm1yb7m69] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 6px 12px;
    transition: all 0.2s ease;
}

.option-input-wrapper.correct-selected[b-mtm1yb7m69] {
    background: #f0fdf4;
    border-color: #86efac;
}

.option-radio[b-mtm1yb7m69] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #16a34a;
}

.option-letter[b-mtm1yb7m69] {
    font-weight: 800;
    font-size: 0.95rem;
    color: #475569;
    width: 20px;
}

.option-text[b-mtm1yb7m69] {
    border: none !important;
    background: transparent !important;
    padding: 6px 0 !important;
    box-shadow: none !important;
}

/* ── PAGINATION BAR ── */
.pagination-footer[b-mtm1yb7m69] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    background: #f8fafc;
    border-top: 1px solid #f1f5f9;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.85rem;
    color: #64748b;
}

.pagination-controls[b-mtm1yb7m69] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.page-size-selector[b-mtm1yb7m69] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.page-size-select[b-mtm1yb7m69] {
    padding: 4px 8px;
    border-radius: 8px;
    border: 1.5px solid #e2e8f0;
    background: #ffffff;
    font-size: 0.82rem;
    font-weight: 600;
    color: #0f172a;
    outline: none;
}

.page-nav-buttons[b-mtm1yb7m69] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.btn-page-nav[b-mtm1yb7m69], .btn-page-num[b-mtm1yb7m69] {
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    border-radius: 8px;
    border: 1.5px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    font-size: 0.82rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-page-nav:hover:not(:disabled)[b-mtm1yb7m69], .btn-page-num:hover:not(.active)[b-mtm1yb7m69] {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #0f172a;
}

.btn-page-nav:disabled[b-mtm1yb7m69] {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-page-num.active[b-mtm1yb7m69] {
    background: #0284c7;
    border-color: #0284c7;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3);
}
/* /Pages/Admin/AdminUsers.razor.rz.scp.css */
/* ========================================================================= */
/* ADMIN USERS & STUDENTS MANAGEMENT (MODERN BRAND THEME #0284C7)           */
/* ========================================================================= */
.admin-users-page[b-v1cnd1rt2a] {
    padding: 24px 32px 60px;
    max-width: 1400px;
    margin: 0 auto;
    font-family: 'Be Vietnam Pro', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1e293b;
}

/* Page Header */
.page-header[b-v1cnd1rt2a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 16px;
}

.header-left[b-v1cnd1rt2a] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-icon-badge[b-v1cnd1rt2a] {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: #0284c7;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.3);
    flex-shrink: 0;
}

.page-title[b-v1cnd1rt2a] {
    font-size: 1.85rem;
    font-weight: 800;
    margin: 0 0 4px 0;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.page-subtitle[b-v1cnd1rt2a] {
    margin: 0;
    font-size: 0.95rem;
    color: #64748b;
}

/* Domain Tabs Row */
.domain-tabs-row[b-v1cnd1rt2a] {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.domain-tab-btn[b-v1cnd1rt2a] {
    border: 1.5px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    padding: 9px 18px;
    border-radius: 12px;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.domain-tab-btn:hover[b-v1cnd1rt2a] {
    background: #f8fafc;
    border-color: #cbd5e1;
    transform: translateY(-1px);
}

.domain-tab-btn.active[b-v1cnd1rt2a] {
    background: #0f172a;
    color: #ffffff;
    border-color: #0f172a;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25);
}

.domain-tab-btn.domain-ielts.active[b-v1cnd1rt2a] {
    background: #0284c7;
    border-color: #0284c7;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.3);
}

.domain-tab-btn.domain-hsk.active[b-v1cnd1rt2a] {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    border-color: #dc2626;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.3);
}

.btn-refresh[b-v1cnd1rt2a] {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    color: #334155;
    padding: 10px 18px;
    border-radius: 12px;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.btn-refresh:hover:not(:disabled)[b-v1cnd1rt2a] {
    background: #f0f9ff;
    border-color: #0284c7;
    color: #0284c7;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.15);
}

.spin-icon[b-v1cnd1rt2a] {
    animation: spin-b-v1cnd1rt2a 1s linear infinite;
}

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

/* Stats Cards Grid */
.stats-grid[b-v1cnd1rt2a] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 28px;
}

.stat-card[b-v1cnd1rt2a] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 18px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover[b-v1cnd1rt2a] {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(2, 132, 199, 0.08);
}

.stat-icon[b-v1cnd1rt2a] {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.stat-icon.total[b-v1cnd1rt2a] { background: #f0f9ff; color: #0284c7; }
.stat-icon.active[b-v1cnd1rt2a] { background: #f0fdf4; color: #16a34a; }
.stat-icon.admin[b-v1cnd1rt2a] { background: #fef2f2; color: #dc2626; }
.stat-icon.locked[b-v1cnd1rt2a] { background: #f8fafc; color: #64748b; }

.stat-label[b-v1cnd1rt2a] {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}

.stat-number[b-v1cnd1rt2a] {
    font-size: 1.65rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    line-height: 1.2;
}

/* Toolbar & Filters */
.toolbar-card[b-v1cnd1rt2a] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
}

.filter-tabs[b-v1cnd1rt2a] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-tab-btn[b-v1cnd1rt2a] {
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    padding: 7px 14px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.filter-tab-btn:hover[b-v1cnd1rt2a] {
    background: #f0f9ff;
    border-color: #bae6fd;
    color: #0284c7;
}

.filter-tab-btn.active[b-v1cnd1rt2a] {
    background: #0284c7;
    border-color: #0284c7;
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(2, 132, 199, 0.25);
}

.tab-badge[b-v1cnd1rt2a] {
    background: rgba(0, 0, 0, 0.08);
    padding: 1px 6px;
    border-radius: 20px;
    font-size: 0.75rem;
}

.filter-tab-btn.active .tab-badge[b-v1cnd1rt2a] {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

.search-box-wrapper[b-v1cnd1rt2a] {
    position: relative;
    width: 320px;
}

.search-icon[b-v1cnd1rt2a] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.95rem;
}

.search-box-wrapper input[b-v1cnd1rt2a] {
    width: 100%;
    padding: 9px 36px 9px 38px;
    border-radius: 12px;
    border: 1.5px solid #cbd5e1;
    font-size: 0.92rem;
    background: #ffffff;
    color: #0f172a;
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.search-box-wrapper input:focus[b-v1cnd1rt2a] {
    border-color: #0284c7;
    box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.15);
}

.btn-clear-search[b-v1cnd1rt2a] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 0.85rem;
    cursor: pointer;
}

/* Table Card */
.table-card[b-v1cnd1rt2a] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.03);
}

.table-responsive[b-v1cnd1rt2a] {
    overflow-x: auto;
}

.users-table[b-v1cnd1rt2a] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.users-table th[b-v1cnd1rt2a] {
    background: #f8fafc;
    color: #64748b;
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 16px 20px;
    border-bottom: 1.5px solid #e2e8f0;
    text-align: left;
}

.users-table td[b-v1cnd1rt2a] {
    padding: 16px 20px;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
}

.users-table tbody tr[b-v1cnd1rt2a] {
    transition: background 0.15s ease;
}

.users-table tbody tr:hover[b-v1cnd1rt2a] {
    background: #f8fafc;
}

.row-disabled[b-v1cnd1rt2a] {
    background: #fafafa !important;
    opacity: 0.65;
}

/* Identity & Avatar */
.user-identity[b-v1cnd1rt2a] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-avatar[b-v1cnd1rt2a] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.avatar-user[b-v1cnd1rt2a] {
    background: #f0f9ff;
    color: #0284c7;
    border: 1.5px solid #bae6fd;
}

.avatar-admin[b-v1cnd1rt2a] {
    background: #fef2f2;
    color: #dc2626;
    border: 1.5px solid #fecaca;
}

.user-name-box[b-v1cnd1rt2a] {
    display: flex;
    flex-direction: column;
}

.user-username[b-v1cnd1rt2a] {
    font-weight: 700;
    color: #0f172a;
    font-size: 0.98rem;
}

.user-id-tag[b-v1cnd1rt2a] {
    font-size: 0.75rem;
    color: #94a3b8;
    font-weight: 600;
}

.user-email[b-v1cnd1rt2a] {
    color: #475569;
    font-weight: 500;
}

/* Badges & Status */
.badge-role[b-v1cnd1rt2a] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.role-admin[b-v1cnd1rt2a] {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.role-user[b-v1cnd1rt2a] {
    background: #f0f9ff;
    color: #0284c7;
    border: 1px solid #bae6fd;
}

.badge-level[b-v1cnd1rt2a] {
    background: #f1f5f9;
    color: #334155;
    padding: 4px 10px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 0.82rem;
    border: 1px solid #cbd5e1;
}

.status-pill[b-v1cnd1rt2a] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 700;
}

.status-pill.active[b-v1cnd1rt2a] {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

.status-pill.disabled[b-v1cnd1rt2a] {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.last-login-text[b-v1cnd1rt2a] {
    font-size: 0.88rem;
    color: #64748b;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Action Buttons */
.action-buttons-group[b-v1cnd1rt2a] {
    display: inline-flex;
    gap: 6px;
}

.action-btn[b-v1cnd1rt2a] {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1.5px solid #e2e8f0;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-edit[b-v1cnd1rt2a] { color: #0284c7; }
.btn-edit:hover[b-v1cnd1rt2a] { background: #f0f9ff; border-color: #0284c7; transform: scale(1.08); }

.btn-lock[b-v1cnd1rt2a] { color: #ea580c; }
.btn-lock:hover[b-v1cnd1rt2a] { background: #fff7ed; border-color: #ea580c; transform: scale(1.08); }

.btn-unlock[b-v1cnd1rt2a] { color: #16a34a; }
.btn-unlock:hover[b-v1cnd1rt2a] { background: #f0fdf4; border-color: #16a34a; transform: scale(1.08); }

.btn-reset[b-v1cnd1rt2a] { color: #7c3aed; }
.btn-reset:hover[b-v1cnd1rt2a] { background: #faf5ff; border-color: #7c3aed; transform: scale(1.08); }

.btn-logs[b-v1cnd1rt2a] { color: #475569; }
.btn-logs:hover[b-v1cnd1rt2a] { background: #f8fafc; border-color: #475569; transform: scale(1.08); }

.table-footer[b-v1cnd1rt2a] {
    padding: 14px 20px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    font-size: 0.88rem;
    color: #64748b;
}

/* Loading & Empty States */
.loading-state[b-v1cnd1rt2a], .empty-state[b-v1cnd1rt2a] {
    text-align: center;
    padding: 60px 20px;
    color: #64748b;
}

.empty-state i[b-v1cnd1rt2a] {
    font-size: 3.2rem;
    color: #cbd5e1;
    margin-bottom: 12px;
    display: block;
}

.custom-spinner[b-v1cnd1rt2a] {
    width: 36px;
    height: 36px;
    border: 3px solid #e2e8f0;
    border-top-color: #0284c7;
    border-radius: 50%;
    margin: 0 auto 12px;
    animation: spin-b-v1cnd1rt2a 0.8s linear infinite;
}

.mini-spinner[b-v1cnd1rt2a] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #ffffff;
    border-radius: 50%;
    display: inline-block;
    animation: spin-b-v1cnd1rt2a 0.8s linear infinite;
}

/* ========================================================================= */
/* MODALS                                                                    */
/* ========================================================================= */
.modal-overlay[b-v1cnd1rt2a] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-card[b-v1cnd1rt2a] {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 520px;
    overflow: hidden;
    animation: popModal-b-v1cnd1rt2a 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid #e2e8f0;
}

.log-modal-card[b-v1cnd1rt2a] {
    max-width: 680px;
}

@keyframes popModal-b-v1cnd1rt2a {
    from { opacity: 0; transform: scale(0.96) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-header[b-v1cnd1rt2a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #f1f5f9;
}

.modal-header h3[b-v1cnd1rt2a] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
}

.btn-close-modal[b-v1cnd1rt2a] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.btn-close-modal:hover[b-v1cnd1rt2a] {
    background: #f1f5f9;
    color: #0f172a;
}

.modal-body[b-v1cnd1rt2a] {
    padding: 24px;
}

.form-group[b-v1cnd1rt2a] {
    margin-bottom: 18px;
}

.form-group label[b-v1cnd1rt2a] {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
    color: #334155;
    margin-bottom: 6px;
}

.form-input[b-v1cnd1rt2a] {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    font-size: 0.95rem;
    color: #0f172a;
    background: #ffffff;
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.form-input:focus[b-v1cnd1rt2a] {
    border-color: #0284c7;
    box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.15);
}

.modal-footer[b-v1cnd1rt2a] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    background: #f8fafc;
    border-top: 1px solid #f1f5f9;
}

.btn-modal-cancel[b-v1cnd1rt2a] {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    color: #475569;
    padding: 9px 18px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-modal-cancel:hover[b-v1cnd1rt2a] {
    background: #f1f5f9;
    color: #0f172a;
}

.btn-modal-save[b-v1cnd1rt2a] {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    border: none;
    color: #ffffff;
    padding: 9px 22px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);
    transition: all 0.2s;
}

.btn-modal-save:hover:not(:disabled)[b-v1cnd1rt2a] {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(2, 132, 199, 0.35);
}

/* Timeline Activity Logs */
.log-modal-body[b-v1cnd1rt2a] {
    max-height: 420px;
    overflow-y: auto;
}

.log-timeline[b-v1cnd1rt2a] {
    position: relative;
    padding-left: 24px;
}

.log-timeline[b-v1cnd1rt2a]::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: #e2e8f0;
}

.timeline-item[b-v1cnd1rt2a] {
    position: relative;
    margin-bottom: 20px;
}

.timeline-item:last-child[b-v1cnd1rt2a] {
    margin-bottom: 0;
}

.timeline-dot[b-v1cnd1rt2a] {
    position: absolute;
    left: -24px;
    top: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #0284c7;
    border: 3px solid #ffffff;
    box-shadow: 0 0 0 2px #bae6fd;
}

.timeline-content[b-v1cnd1rt2a] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 16px;
}

.timeline-header[b-v1cnd1rt2a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.log-action-badge[b-v1cnd1rt2a] {
    background: #e0f2fe;
    color: #0369a1;
    font-weight: 700;
    font-size: 0.78rem;
    padding: 2px 8px;
    border-radius: 6px;
    text-transform: uppercase;
}

.log-time[b-v1cnd1rt2a] {
    font-size: 0.78rem;
    color: #94a3b8;
}

.log-detail-text[b-v1cnd1rt2a] {
    font-size: 0.9rem;
    color: #334155;
}

/* Alert Warning Banner */
.alert-banner-box[b-v1cnd1rt2a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-left: 5px solid #f59e0b;
    border-radius: 14px;
    padding: 16px 20px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.08);
    gap: 16px;
    flex-wrap: wrap;
}

.alert-banner-left[b-v1cnd1rt2a] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.alert-banner-icon[b-v1cnd1rt2a] {
    font-size: 1.8rem;
    color: #d97706;
}

.alert-subtext[b-v1cnd1rt2a] {
    font-size: 0.85rem;
    color: #78350f;
    margin-top: 4px;
}

.alert-subtext code[b-v1cnd1rt2a] {
    background: #fef3c7;
    color: #b45309;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
}

.btn-login-admin[b-v1cnd1rt2a] {
    background: #0284c7;
    color: #ffffff;
    border: none;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.25);
}

.btn-login-admin:hover[b-v1cnd1rt2a] {
    background: #0369a1;
    transform: translateY(-1px);
}

/* ── PAGINATION BAR ── */
.pagination-footer[b-v1cnd1rt2a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    background: #f8fafc;
    border-top: 1px solid #f1f5f9;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.85rem;
    color: #64748b;
}

.pagination-controls[b-v1cnd1rt2a] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.page-size-selector[b-v1cnd1rt2a] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.page-size-select[b-v1cnd1rt2a] {
    padding: 4px 8px;
    border-radius: 8px;
    border: 1.5px solid #e2e8f0;
    background: #ffffff;
    font-size: 0.82rem;
    font-weight: 600;
    color: #0f172a;
    outline: none;
}

.page-nav-buttons[b-v1cnd1rt2a] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.btn-page-nav[b-v1cnd1rt2a], .btn-page-num[b-v1cnd1rt2a] {
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    border-radius: 8px;
    border: 1.5px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    font-size: 0.82rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-page-nav:hover:not(:disabled)[b-v1cnd1rt2a], .btn-page-num:hover:not(.active)[b-v1cnd1rt2a] {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #0f172a;
}

.btn-page-nav:disabled[b-v1cnd1rt2a] {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-page-num.active[b-v1cnd1rt2a] {
    background: #0284c7;
    border-color: #0284c7;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3);
}
/* /Pages/Games/GameHub.razor.rz.scp.css */
/* ==========================================================================
   GAME HUB (ĐẤU TRƯỜNG TRÒ CHƠI) - MINIMALIST MONOCHROME (TRẮNG - ĐEN)
   ========================================================================== */

.game-hub-page[b-juucri4882] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.5rem 0 3.5rem 0;
    color: #0f172a;
    box-sizing: border-box;
}

/* Header Banner - High-contrast Deep Obsidian & White */
.game-hub-header[b-juucri4882] {
    background: linear-gradient(135deg, #090d16 0%, #0f172a 50%, #1e293b 100%);
    border-radius: 20px;
    padding: 2.25rem 2.5rem;
    margin-bottom: 2.25rem;
    box-shadow: 0 10px 30px -8px rgba(15, 23, 42, 0.25);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.75rem;
    border: 1px solid #334155;
    position: relative;
    overflow: hidden;
}

.hub-badge[b-juucri4882] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.85rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #f8fafc;
    margin-bottom: 0.75rem;
}

.game-hub-header h1[b-juucri4882] {
    font-size: 2.15rem;
    font-weight: 800;
    margin: 0 0 0.5rem 0;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.game-hub-header p[b-juucri4882] {
    font-size: 0.95rem;
    color: #94a3b8;
    margin: 0;
    max-width: 580px;
    line-height: 1.55;
}

.hub-quick-stats[b-juucri4882] {
    display: flex;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.quick-stat-item[b-juucri4882] {
    background: #090d16;
    border: 1px solid #334155;
    border-radius: 14px;
    padding: 0.7rem 1rem;
    text-align: center;
    min-width: 90px;
    flex: 1 1 90px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.stat-num[b-juucri4882] {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.2;
    color: #ffffff;
}

.stat-lbl[b-juucri4882] {
    font-size: 0.74rem;
    color: #94a3b8;
    margin-top: 0.25rem;
    font-weight: 600;
}

/* Gallery Section */
.section-title-row[b-juucri4882] {
    margin-bottom: 1.35rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.section-title-row h2[b-juucri4882] {
    font-size: 1.45rem;
    font-weight: 800;
    margin: 0;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-title-row h2 i[b-juucri4882] {
    color: #0f172a;
}

.text-muted[b-juucri4882] {
    color: #64748b;
    font-size: 0.9rem;
}

.games-gallery[b-juucri4882] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.75rem;
}

/* Game Card - Clean White with Crisp Monochrome Lines */
.game-card[b-juucri4882] {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 20px;
    padding: 1.85rem;
    display: flex;
    flex-direction: column;
    position: relative;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
}

.game-card:hover[b-juucri4882] {
    transform: translateY(-5px);
    border-color: #0f172a;
    box-shadow: 0 16px 32px -8px rgba(15, 23, 42, 0.12);
}

.game-card.featured[b-juucri4882], .game-card.hsk-card[b-juucri4882] {
    background: #ffffff;
}

.card-badge[b-juucri4882] {
    position: absolute;
    top: 1.35rem;
    right: 1.35rem;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 0.25rem 0.65rem;
    border-radius: 8px;
    background: #f1f5f9;
    color: #0f172a;
    border: 1px solid #cbd5e1;
    letter-spacing: 0.04em;
}

.card-badge.hsk-badge[b-juucri4882] {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

.card-badge.soon-badge[b-juucri4882] {
    background: #f8fafc;
    color: #94a3b8;
    border-color: #e2e8f0;
}

/* Icon Bubble - Bold Deep Obsidian */
.card-icon-bubble[b-juucri4882] {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.85rem;
    margin-bottom: 1.35rem;
    background: #0f172a;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}

.wordle-bubble[b-juucri4882] {
    background: #0f172a;
    color: #34d399;
}

.hsk-bubble[b-juucri4882] {
    background: #0f172a;
    color: #f87171;
}

.soon-bubble[b-juucri4882] {
    background: #f1f5f9;
    color: #94a3b8;
    box-shadow: none;
}

.game-card h3[b-juucri4882] {
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0 0 0.5rem 0;
    color: #0f172a;
}

.game-card p[b-juucri4882] {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.55;
    margin-bottom: 1.35rem;
    flex-grow: 1;
}

.card-tags[b-juucri4882] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.35rem;
}

.card-tags span[b-juucri4882] {
    font-size: 0.74rem;
    padding: 0.25rem 0.65rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #334155;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
}

/* Play Buttons - Uniform Modern Black & White */
.btn-play-card[b-juucri4882] {
    width: 100%;
    padding: 0.85rem;
    border-radius: 12px;
    border: 1.5px solid #0f172a;
    background: #0f172a;
    color: #ffffff;
    font-weight: 800;
    font-size: 0.92rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-play-card:hover:not(:disabled)[b-juucri4882] {
    background: #1e293b;
    border-color: #1e293b;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.2);
}

.btn-play-card.hsk-btn-card[b-juucri4882] {
    background: #0f172a;
    border-color: #0f172a;
    color: #ffffff;
}

.btn-play-card.hsk-btn-card:hover:not(:disabled)[b-juucri4882] {
    background: #1e293b;
    border-color: #1e293b;
}

.btn-play-card.disabled[b-juucri4882] {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #94a3b8;
    cursor: not-allowed;
    box-shadow: none;
}

/* ==========================================================================
   MODAL 1: GAME INFO & HOW-TO-PLAY (CLEAN WHITE & SLATE)
   ========================================================================== */
.modal-backdrop[b-juucri4882] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1500;
    padding: 1.25rem;
    animation: fadeIn-b-juucri4882 0.2s ease;
}

.game-info-modal[b-juucri4882] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    max-width: 620px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 2.25rem;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
    position: relative;
    animation: scaleIn-b-juucri4882 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    color: #0f172a;
}

.btn-close-modal-top[b-juucri4882] {
    position: absolute;
    top: 1.35rem;
    right: 1.35rem;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #475569;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1.1rem;
}

.btn-close-modal-top:hover[b-juucri4882] {
    background: #e2e8f0;
    color: #0f172a;
    transform: rotate(90deg);
}

.info-header[b-juucri4882] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.35rem;
    border-bottom: 1px solid #e2e8f0;
}

.info-tag[b-juucri4882] {
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    background: #f1f5f9;
    color: #0f172a;
    border: 1px solid #cbd5e1;
    letter-spacing: 0.05em;
}

.info-header h2[b-juucri4882] {
    font-size: 1.45rem;
    font-weight: 800;
    margin: 0.3rem 0;
    color: #0f172a;
}

.info-sub[b-juucri4882] {
    font-size: 0.9rem;
    color: #64748b;
    margin: 0;
}

.how-to-play-section h4[b-juucri4882] {
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: #0f172a;
}

.rules-grid[b-juucri4882] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}

.rule-box[b-juucri4882] {
    display: flex;
    gap: 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 1rem 1.15rem;
    align-items: flex-start;
}

.rule-badge[b-juucri4882] {
    background: #0f172a;
    color: #ffffff;
    font-weight: 800;
    font-size: 0.85rem;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.rule-content[b-juucri4882] {
    font-size: 0.9rem;
    color: #334155;
    line-height: 1.5;
}

.color-demo-row[b-juucri4882] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
    margin-top: 0.4rem;
}

.demo-cell[b-juucri4882] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.85rem;
    color: #ffffff;
}

.demo-cell.correct[b-juucri4882] { background: #10b981; }
.demo-cell.present[b-juucri4882] { background: #f59e0b; }
.demo-cell.absent[b-juucri4882] { background: #64748b; }

/* Options box */
.info-options-box[b-juucri4882] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 1.1rem;
    margin-bottom: 1.75rem;
}

.options-label[b-juucri4882] {
    font-size: 0.88rem;
    font-weight: 700;
    color: #0f172a;
    display: block;
    margin-bottom: 0.75rem;
}

.cefr-btn-group[b-juucri4882] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.cefr-chip[b-juucri4882] {
    padding: 0.55rem 0.95rem;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #334155;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cefr-chip:hover[b-juucri4882] {
    background: #f1f5f9;
    color: #0f172a;
}

.cefr-chip.active[b-juucri4882] {
    background: #0f172a;
    border-color: #0f172a;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);
}

.test-mode-toggle-card[b-juucri4882] {
    margin-top: 1rem;
    padding: 0.8rem 1rem;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.test-mode-toggle-card:hover[b-juucri4882] {
    background: #f1f5f9;
    border-color: #f59e0b;
}

.test-mode-left[b-juucri4882] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.test-mode-left i[b-juucri4882] {
    font-size: 1.25rem;
}

.test-mode-title[b-juucri4882] {
    font-size: 0.88rem;
    font-weight: 700;
    color: #0f172a;
}

.test-mode-desc[b-juucri4882] {
    font-size: 0.76rem;
    color: #64748b;
}

.test-mode-badge[b-juucri4882] {
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0.25rem 0.65rem;
    border-radius: 6px;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.test-mode-badge.badge-on[b-juucri4882] {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

.test-mode-badge.badge-off[b-juucri4882] {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #cbd5e1;
}

.diff-btn-group[b-juucri4882] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.6rem;
}

.diff-btn[b-juucri4882] {
    padding: 0.65rem;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #334155;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.diff-btn:hover[b-juucri4882] {
    background: #f1f5f9;
    color: #0f172a;
}

.diff-btn.active[b-juucri4882] {
    background: #0f172a;
    border-color: #0f172a;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);
}

.info-actions[b-juucri4882] {
    display: flex;
    gap: 0.85rem;
}

.btn-start-game-big[b-juucri4882] {
    flex: 2;
    padding: 0.95rem;
    background: #0f172a;
    border: 1px solid #0f172a;
    border-radius: 14px;
    color: #ffffff;
    font-weight: 800;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.2);
}

.btn-start-game-big:hover[b-juucri4882] {
    background: #1e293b;
    border-color: #1e293b;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.3);
}

.btn-cancel-game[b-juucri4882] {
    flex: 1;
    padding: 0.95rem;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    color: #475569;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel-game:hover[b-juucri4882] {
    background: #e2e8f0;
    color: #0f172a;
}


/* ==========================================================================
   ANIMATIONS & SPINNERS
   ========================================================================== */
@keyframes fadeIn-b-juucri4882 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes scaleIn-b-juucri4882 {
    from { transform: scale(0.94); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes pop-b-juucri4882 {
    0% { transform: scale(0.9); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1.0); }
}

@keyframes flip-b-juucri4882 {
    0% { transform: rotateX(0deg); }
    50% { transform: rotateX(90deg); }
    100% { transform: rotateX(0deg); }
}

@keyframes shake-b-juucri4882 {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

.spinner[b-juucri4882] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-top-color: #0f172a;
    border-radius: 50%;
    animation: spin-b-juucri4882 0.8s linear infinite;
}

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

/* ==========================================================================
   DARK MODE OVERRIDES (OBSIDIAN NAVY THEME)
   ========================================================================== */
[data-theme="dark"] .game-hub-page[b-juucri4882] {
    color: #f8fafc;
}

[data-theme="dark"] .section-title-row h2[b-juucri4882] {
    color: #f8fafc;
}

[data-theme="dark"] .section-title-row h2 i[b-juucri4882] {
    color: #38bdf8;
}

[data-theme="dark"] .text-muted[b-juucri4882] {
    color: #94a3b8;
}

[data-theme="dark"] .game-card[b-juucri4882] {
    background: #15243f;
    border-color: #223554;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .game-card.featured[b-juucri4882],
[data-theme="dark"] .game-card.hsk-card[b-juucri4882] {
    background: #15243f;
}

[data-theme="dark"] .game-card:hover[b-juucri4882] {
    border-color: #38bdf8;
    box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .game-card h3[b-juucri4882] {
    color: #f8fafc;
}

[data-theme="dark"] .game-desc[b-juucri4882] {
    color: #94a3b8;
}

[data-theme="dark"] .game-tag[b-juucri4882] {
    background: #111d33;
    border-color: #223554;
    color: #cbd5e1;
}

[data-theme="dark"] .badge-player-count[b-juucri4882] {
    background: #111d33;
    color: #94a3b8;
    border: 1px solid #223554;
}

[data-theme="dark"] .btn-play-game[b-juucri4882] {
    background: #111d33;
    border-color: #223554;
    color: #38bdf8;
}

[data-theme="dark"] .btn-play-game:hover[b-juucri4882] {
    background: #38bdf8;
    color: #0b1325;
}

[data-theme="dark"] .hub-rules-card[b-juucri4882] {
    background: #15243f;
    border-color: #223554;
}

[data-theme="dark"] .rule-card-item[b-juucri4882] {
    background: #111d33;
    border-color: #223554;
}

[data-theme="dark"] .rule-card-item h4[b-juucri4882] {
    color: #f8fafc;
}

[data-theme="dark"] .rule-card-item p[b-juucri4882] {
    color: #94a3b8;
}

/* ── Game Info Modal Dark Mode ── */
[data-theme="dark"] .game-info-modal[b-juucri4882] {
    background: #0f172a;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
    color: #f8fafc;
}

[data-theme="dark"] .btn-close-modal-top[b-juucri4882] {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}

[data-theme="dark"] .btn-close-modal-top:hover[b-juucri4882] {
    background: #334155;
    color: #f8fafc;
}

[data-theme="dark"] .info-header[b-juucri4882] {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .info-header h2[b-juucri4882] {
    color: #f8fafc;
}

[data-theme="dark"] .info-sub[b-juucri4882] {
    color: #94a3b8;
}

[data-theme="dark"] .info-tag[b-juucri4882] {
    background: #1e293b;
    border-color: #334155;
    color: #cbd5e1;
}

[data-theme="dark"] .how-to-play-section h4[b-juucri4882] {
    color: #f8fafc;
}

[data-theme="dark"] .rule-box[b-juucri4882] {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .rule-badge[b-juucri4882] {
    background: #38bdf8;
    color: #0f172a;
}

[data-theme="dark"] .rule-content[b-juucri4882] {
    color: #cbd5e1;
}

[data-theme="dark"] .options-label[b-juucri4882] {
    color: #cbd5e1;
}

[data-theme="dark"] .diff-btn[b-juucri4882] {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}

[data-theme="dark"] .diff-btn:hover[b-juucri4882] {
    background: #334155;
    color: #f8fafc;
}

[data-theme="dark"] .diff-btn.active[b-juucri4882] {
    background: #0ea5e9;
    border-color: #0ea5e9;
    color: #ffffff;
}

[data-theme="dark"] .cefr-chip[b-juucri4882] {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}

[data-theme="dark"] .cefr-chip:hover[b-juucri4882] {
    background: #334155;
    color: #f8fafc;
}

[data-theme="dark"] .cefr-chip.active[b-juucri4882] {
    background: #0ea5e9;
    border-color: #0ea5e9;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.35);
}

[data-theme="dark"] .test-mode-toggle-card[b-juucri4882] {
    background: rgba(15, 23, 42, 0.7);
    border-color: rgba(245, 158, 11, 0.4);
}

[data-theme="dark"] .test-mode-toggle-card:hover[b-juucri4882] {
    background: rgba(245, 158, 11, 0.1);
    border-color: #f59e0b;
}

[data-theme="dark"] .test-mode-title[b-juucri4882] {
    color: #f8fafc;
}

[data-theme="dark"] .test-mode-desc[b-juucri4882] {
    color: #94a3b8;
}

[data-theme="dark"] .test-mode-badge.badge-on[b-juucri4882] {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border-color: rgba(52, 211, 153, 0.4);
}

[data-theme="dark"] .test-mode-badge.badge-off[b-juucri4882] {
    background: rgba(100, 116, 139, 0.2);
    color: #94a3b8;
    border-color: #334155;
}

[data-theme="dark"] .btn-cancel-game[b-juucri4882] {
    background: #1e293b;
    border-color: #334155;
    color: #cbd5e1;
}

[data-theme="dark"] .btn-cancel-game:hover[b-juucri4882] {
    background: #334155;
    color: #f8fafc;
}

[data-theme="dark"] .info-options-box[b-juucri4882] {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .card-badge[b-juucri4882] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: #cbd5e1;
}

/* /Pages/Home.razor.rz.scp.css */
.landing-container[b-a66rq1ln5k] {
    /* DEFAULT (LIGHT MODE) VARIABLES */
    --lc-bg: #f8fafc;
    --lc-bg-gradient: radial-gradient(
        circle 650px at var(--mouse-x-pct, 50%) var(--mouse-y-pct, 45%),
        rgba(56, 189, 248, 0.16) 0%,
        rgba(99, 102, 241, 0.08) 40%,
        transparent 75%
    ), radial-gradient(circle at 50% 0%, #ffffff 0%, #f1f5f9 100%);
    --lc-title: #0f172a;
    --lc-subtitle: #475569;
    --lc-beam-opacity: 0.12;
    --lc-grid-dots: rgba(148, 163, 184, 0.25);
    
    /* Card variables (Light Mode) */
    --card-bg: rgba(255, 255, 255, 0.88);
    --card-border-ielts: 2px solid rgba(2, 132, 199, 0.3);
    --card-border-hsk: 2px solid rgba(239, 68, 68, 0.3);
    --card-shadow-ielts: 0 20px 45px -12px rgba(2, 132, 199, 0.15), 0 0 20px rgba(56, 189, 248, 0.08);
    --card-shadow-hsk: 0 20px 45px -12px rgba(239, 68, 68, 0.15), 0 0 20px rgba(244, 63, 94, 0.08);
    --card-shadow-hover-ielts: 0 30px 65px -12px rgba(2, 132, 199, 0.25), 0 0 30px rgba(56, 189, 248, 0.2);
    --card-shadow-hover-hsk: 0 30px 65px -12px rgba(239, 68, 68, 0.25), 0 0 30px rgba(244, 63, 94, 0.2);
    --card-border-hover-ielts: #0284c7;
    --card-border-hover-hsk: #ef4444;
    --card-title: #0f172a;
    --card-desc: #64748b;
    --card-text-shadow: none;
    
    /* Badges & Orbs */
    --badge-bg-ielts: #f0f9ff;
    --badge-color-ielts: #0284c7;
    --badge-border-ielts: 1px solid #bae6fd;
    --orb-bg-ielts: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
    --orb-color-ielts: #0284c7;
    --orb-shadow-ielts: 0 10px 25px rgba(2, 132, 199, 0.18);
    
    --badge-bg-hsk: #fff1f2;
    --badge-color-hsk: #e11d48;
    --badge-border-hsk: 1px solid #fecdd3;
    --orb-bg-hsk: linear-gradient(135deg, #ffe4e6 0%, #fecdd3 100%);
    --orb-color-hsk: #e11d48;
    --orb-shadow-hsk: 0 10px 25px rgba(225, 29, 72, 0.18);

    /* Explore Buttons */
    --btn-color-ielts: #0284c7;
    --btn-border-ielts: 2px solid #0284c7;
    --btn-bg-ielts: transparent;
    --btn-hover-bg-ielts: #0284c7;
    --btn-hover-color-ielts: #ffffff;
    --btn-hover-shadow-ielts: 0 6px 20px rgba(2, 132, 199, 0.35);

    --btn-color-hsk: #ef4444;
    --btn-border-hsk: 2px solid #ef4444;
    --btn-bg-hsk: transparent;
    --btn-hover-bg-hsk: #ef4444;
    --btn-hover-color-hsk: #ffffff;
    --btn-hover-shadow-hsk: 0 6px 20px rgba(239, 68, 68, 0.35);

    --backdrop-orb-opacity: 0.15;
    --card-spotlight-opacity: 0.2;

    /* Water Droplet Scroll Down Indicator (Light Mode) */
    --capsule-border: rgba(2, 132, 199, 0.35);
    --capsule-bg: rgba(255, 255, 255, 0.7);
    --capsule-groove: rgba(2, 132, 199, 0.15);
    --droplet-bg: linear-gradient(180deg, #ffffff 0%, #7dd3fc 20%, #38bdf8 60%, #0284c7 100%);
    --droplet-glow: 0 0 10px rgba(2, 132, 199, 0.5);

    min-height: calc(100vh - 65px);
    width: 100%;
    box-sizing: border-box;
    background: var(--lc-bg);
    background-image: var(--lc-bg-gradient);
    color: var(--lc-title);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem 4rem;
    font-family: 'Plus Jakarta Sans', 'Be Vietnam Pro', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    transition: background 0.3s ease, color 0.3s ease;
}

/* DARK MODE THEME VARIABLE OVERRIDES */
:global([data-theme="dark"]) .landing-container[b-a66rq1ln5k],
:global(:root:not([data-theme="light"])) .landing-container[b-a66rq1ln5k] {
    --lc-bg: #070c18;
    --lc-bg-gradient: radial-gradient(
        circle 650px at var(--mouse-x-pct, 50%) var(--mouse-y-pct, 45%),
        rgba(56, 189, 248, 0.12) 0%,
        rgba(99, 102, 241, 0.05) 40%,
        transparent 75%
    ), radial-gradient(circle at 50% -10%, #15243f 0%, #070c18 80%);
    --lc-title: #ffffff;
    --lc-subtitle: #94a3b8;
    --lc-beam-opacity: 0.35;
    --lc-grid-dots: rgba(148, 163, 184, 0.18);
    
    /* Card variables (Dark Mode) */
    --card-bg: linear-gradient(
        145deg, 
        rgba(24, 38, 66, 0.85) 0%, 
        rgba(15, 24, 42, 0.9) 55%, 
        rgba(10, 16, 30, 0.95) 100%
    );
    --card-border-ielts: 1.5px solid rgba(56, 189, 248, 0.45);
    --card-border-hsk: 1.5px solid rgba(244, 63, 94, 0.45);
    --card-shadow-ielts: inset 0 1.5px 1.5px 0 rgba(255, 255, 255, 0.35), inset 0 -1.5px 2px 0 rgba(0, 0, 0, 0.4), 0 20px 45px -10px rgba(0, 0, 0, 0.6), 0 0 25px rgba(56, 189, 248, 0.2);
    --card-shadow-hsk: inset 0 1.5px 1.5px 0 rgba(255, 255, 255, 0.35), inset 0 -1.5px 2px 0 rgba(0, 0, 0, 0.4), 0 20px 45px -10px rgba(0, 0, 0, 0.6), 0 0 25px rgba(244, 63, 94, 0.2);
    --card-shadow-hover-ielts: inset 0 2px 2px 0 rgba(255, 255, 255, 0.5), 0 30px 65px -10px rgba(0, 0, 0, 0.7), 0 0 40px rgba(56, 189, 248, 0.45);
    --card-shadow-hover-hsk: inset 0 2px 2px 0 rgba(255, 255, 255, 0.5), 0 30px 65px -10px rgba(0, 0, 0, 0.7), 0 0 40px rgba(244, 63, 94, 0.45);
    --card-border-hover-ielts: #38bdf8;
    --card-border-hover-hsk: #fb7185;
    --card-title: #ffffff;
    --card-desc: #cbd5e1;
    --card-text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
    
    /* Badges & Orbs */
    --badge-bg-ielts: rgba(56, 189, 248, 0.14);
    --badge-color-ielts: #38bdf8;
    --badge-border-ielts: 1px solid rgba(56, 189, 248, 0.35);
    --orb-bg-ielts: linear-gradient(135deg, rgba(56, 189, 248, 0.28) 0%, rgba(14, 165, 233, 0.1) 100%);
    --orb-color-ielts: #38bdf8;
    --orb-shadow-ielts: inset 0 1.5px 2px rgba(255, 255, 255, 0.4), 0 12px 28px rgba(2, 132, 199, 0.3);
    
    --badge-bg-hsk: rgba(244, 63, 94, 0.14);
    --badge-color-hsk: #fb7185;
    --badge-border-hsk: 1px solid rgba(244, 63, 94, 0.35);
    --orb-bg-hsk: linear-gradient(135deg, rgba(244, 63, 94, 0.28) 0%, rgba(225, 29, 72, 0.1) 100%);
    --orb-color-hsk: #fb7185;
    --orb-shadow-hsk: inset 0 1.5px 2px rgba(255, 255, 255, 0.4), 0 12px 28px rgba(225, 29, 72, 0.3);

    /* Explore Buttons */
    --btn-color-ielts: #38bdf8;
    --btn-border-ielts: 1.5px solid rgba(56, 189, 248, 0.55);
    --btn-bg-ielts: rgba(56, 189, 248, 0.08);
    --btn-hover-bg-ielts: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
    --btn-hover-color-ielts: #ffffff;
    --btn-hover-shadow-ielts: 0 8px 24px rgba(2, 132, 199, 0.5);

    --btn-color-hsk: #fb7185;
    --btn-border-hsk: 1.5px solid rgba(244, 63, 94, 0.55);
    --btn-bg-hsk: rgba(244, 63, 94, 0.08);
    --btn-hover-bg-hsk: linear-gradient(135deg, #e11d48 0%, #fb7185 100%);
    --btn-hover-color-hsk: #ffffff;
    --btn-hover-shadow-hsk: 0 8px 24px rgba(225, 29, 72, 0.5);

    --backdrop-orb-opacity: 0.65;
    --card-spotlight-opacity: 0.65;

    /* Water Droplet Scroll Down Indicator (Dark Mode) */
    --capsule-border: rgba(56, 189, 248, 0.4);
    --capsule-bg: rgba(15, 24, 42, 0.7);
    --capsule-groove: rgba(56, 189, 248, 0.2);
    --droplet-bg: linear-gradient(180deg, #ffffff 0%, #bae6fd 15%, #38bdf8 55%, #0284c7 100%);
    --droplet-glow: 0 0 12px rgba(56, 189, 248, 0.75);
}

/* Ambient Volumetric Lights */
.ambient-beam[b-a66rq1ln5k] {
    position: absolute;
    top: -120px;
    border-radius: 50%;
    filter: blur(75px);
    pointer-events: none;
    z-index: 0;
    animation: beam-drift-b-a66rq1ln5k 8s ease-in-out infinite alternate;
    transform-origin: top center;
    opacity: var(--lc-beam-opacity);
}

.beam-1[b-a66rq1ln5k] {
    left: 5%;
    width: 480px;
    height: 600px;
    background: radial-gradient(ellipse at top, rgba(2, 132, 199, 0.12) 0%, transparent 70%);
}

.beam-2[b-a66rq1ln5k] {
    right: 5%;
    width: 460px;
    height: 580px;
    background: radial-gradient(ellipse at top, rgba(239, 68, 68, 0.12) 0%, transparent 70%);
    animation-delay: -3.5s;
}

@keyframes beam-drift-b-a66rq1ln5k {
    0%, 100% {
        transform: rotate(-10deg) skewX(-5deg) scaleY(1);
    }
    50% {
        transform: rotate(-5deg) skewX(-2deg) scaleY(1.06);
    }
}

/* Header Section */
.header[b-a66rq1ln5k] {
    text-align: center;
    margin-bottom: 2.8rem;
    z-index: 1;
    width: 100%;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.main-title[b-a66rq1ln5k] {
    font-size: 3.4rem;
    font-weight: 850;
    margin-bottom: 0.8rem;
    color: var(--lc-title);
    letter-spacing: -0.035em;
    line-height: 1.15;
    transition: color 0.3s ease;
}

.subtitle[b-a66rq1ln5k] {
    font-size: 1.12rem;
    color: var(--lc-subtitle);
    max-width: 620px;
    margin: 0 auto;
    line-height: 1.6;
    transition: color 0.3s ease;
}

/* 3D Perspective Stage */
.cards-stage[b-a66rq1ln5k] {
    position: relative;
    width: 100%;
    max-width: 860px;
    perspective: 1200px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 0 3rem;
    margin: 0 auto;
    z-index: 1;
}

/* Ambient Stage Grid */
.stage-ambient-grid[b-a66rq1ln5k] {
    position: absolute;
    inset: -40px -20px;
    background-image: radial-gradient(var(--lc-grid-dots) 1.2px, transparent 1.2px);
    background-size: 28px 28px;
    mask-image: radial-gradient(circle 500px at var(--mouse-x-pct, 50%) var(--mouse-y-pct, 50%), black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(circle 500px at var(--mouse-x-pct, 50%) var(--mouse-y-pct, 50%), black 30%, transparent 80%);
    pointer-events: none;
    z-index: 0;
    opacity: 0.7;
    transition: -webkit-mask-image 0.15s ease-out, mask-image 0.15s ease-out;
}

/* 3D Tilting Monolith Portal Rig */
.cards-tilt-rig[b-a66rq1ln5k] {
    display: flex;
    gap: 2.2rem;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    transition: transform 0.15s ease-out;
    transform: rotateX(calc(var(--rot-x, 0deg) * 0.35)) rotateY(calc(var(--rot-y, 0deg) * 0.35));
    transform-style: preserve-3d;
    z-index: 1;
}

/* Monolith Card - Glass & Mirror Translucent Slab */
.monolith-card[b-a66rq1ln5k] {
    position: relative;
    width: 100%;
    max-width: 340px;
    height: 410px;
    border-radius: 26px;
    background: var(--card-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    text-decoration: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
    overflow: hidden;
    z-index: 5;
    margin: 0 auto;
    cursor: pointer !important;
    pointer-events: auto !important;
}

/* Diagonal Specular Sheen (Mirror / Glass Reflection) */
.card-glass-specular[b-a66rq1ln5k] {
    position: absolute;
    inset: 0;
    border-radius: 26px;
    background: linear-gradient(
        125deg,
        rgba(255, 255, 255, 0.22) 0%,
        rgba(255, 255, 255, 0.06) 26%,
        rgba(255, 255, 255, 0.01) 45%,
        transparent 60%,
        rgba(255, 255, 255, 0.04) 85%,
        transparent 100%
    );
    transform: translate(calc(var(--mouse-x, 0px) * -0.2), calc(var(--mouse-y, 0px) * -0.2));
    transition: transform 0.15s ease-out, opacity 0.3s ease;
    pointer-events: none;
    z-index: 2;
}

/* Dynamic Interactive Spotlight on Card Face */
.card-dynamic-spotlight[b-a66rq1ln5k] {
    position: absolute;
    inset: 0;
    border-radius: 26px;
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.25s ease;
    opacity: var(--card-spotlight-opacity);
}

.ielts-card .card-dynamic-spotlight[b-a66rq1ln5k] {
    background: radial-gradient(
        circle 320px at calc(var(--mouse-x-pct, 50%) * 2.2 - 30%) calc(var(--mouse-y-pct, 50%) * 1.5 - 25%),
        rgba(56, 189, 248, 0.28) 0%,
        rgba(56, 189, 248, 0.08) 40%,
        transparent 70%
    );
}

.hsk-card .card-dynamic-spotlight[b-a66rq1ln5k] {
    background: radial-gradient(
        circle 320px at calc(var(--mouse-x-pct, 50%) * 2.2 - 120%) calc(var(--mouse-y-pct, 50%) * 1.5 - 25%),
        rgba(244, 63, 94, 0.28) 0%,
        rgba(244, 63, 94, 0.08) 40%,
        transparent 70%
    );
}

.monolith-card:hover .card-dynamic-spotlight[b-a66rq1ln5k] {
    opacity: calc(var(--card-spotlight-opacity) + 0.3);
}

/* Prismatic Mirror Flare - sweeps across on hover */
.card-mirror-flare[b-a66rq1ln5k] {
    position: absolute;
    top: -65%;
    left: -65%;
    width: 230%;
    height: 230%;
    background: linear-gradient(
        48deg,
        transparent 40%,
        rgba(255, 255, 255, 0.06) 46%,
        rgba(255, 255, 255, 0.26) 50%,
        rgba(255, 255, 255, 0.06) 54%,
        transparent 60%
    );
    transform: rotate(25deg) translateY(-140%);
    transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    z-index: 3;
}

.monolith-card:hover .card-mirror-flare[b-a66rq1ln5k] {
    transform: rotate(25deg) translateY(140%);
}

/* IELTS Card Specifics */
.ielts-card[b-a66rq1ln5k] {
    border: var(--card-border-ielts);
    box-shadow: var(--card-shadow-ielts);
}

.ielts-card:hover[b-a66rq1ln5k] {
    border-color: var(--card-border-hover-ielts);
    box-shadow: var(--card-shadow-hover-ielts);
    transform: translateY(-6px);
}

/* HSK Card Specifics */
.hsk-card[b-a66rq1ln5k] {
    border: var(--card-border-hsk);
    box-shadow: var(--card-shadow-hsk);
}

.hsk-card:hover[b-a66rq1ln5k] {
    border-color: var(--card-border-hover-hsk);
    box-shadow: var(--card-shadow-hover-hsk);
    transform: translateY(-6px);
}

/* Card Glow Accent inside Frame */
.card-glow-overlay[b-a66rq1ln5k] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.5;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.ielts-card .card-glow-overlay[b-a66rq1ln5k] {
    background: radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.16) 0%, transparent 65%);
}

.hsk-card .card-glow-overlay[b-a66rq1ln5k] {
    background: radial-gradient(circle at 50% 0%, rgba(244, 63, 94, 0.16) 0%, transparent 65%);
}

.monolith-card:hover .card-glow-overlay[b-a66rq1ln5k] {
    opacity: 0.85;
}

/* Card Inner Content */
.card-content[b-a66rq1ln5k] {
    position: relative;
    z-index: 4;
    height: 100%;
    width: 100%;
    padding: 2.2rem 1.6rem 1.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: space-between;
    box-sizing: border-box;
    pointer-events: auto !important;
}

/* Category Badge */
.card-badge[b-a66rq1ln5k] {
    display: inline-flex;
    align-items: center;
    padding: 0.34rem 0.85rem;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.ielts-badge[b-a66rq1ln5k] {
    background: var(--badge-bg-ielts);
    color: var(--badge-color-ielts);
    border: var(--badge-border-ielts);
}

.hsk-badge[b-a66rq1ln5k] {
    background: var(--badge-bg-hsk);
    color: var(--badge-color-hsk);
    border: var(--badge-border-hsk);
}

/* Hero Icon Orb */
.icon-orb[b-a66rq1ln5k] {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    margin: 0.7rem 0;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.ielts-orb[b-a66rq1ln5k] {
    background: var(--orb-bg-ielts);
    color: var(--orb-color-ielts);
    box-shadow: var(--orb-shadow-ielts);
}

.hsk-orb[b-a66rq1ln5k] {
    background: var(--orb-bg-hsk);
    color: var(--orb-color-hsk);
    box-shadow: var(--orb-shadow-hsk);
}

.monolith-card:hover .icon-orb[b-a66rq1ln5k] {
    transform: scale(1.08);
}

/* Titles & Descriptions */
.card-content h2[b-a66rq1ln5k] {
    font-size: 1.65rem;
    font-weight: 800;
    margin: 0 0 0.5rem 0;
    color: var(--card-title);
    text-shadow: var(--card-text-shadow);
    letter-spacing: -0.02em;
    text-align: center;
    transition: color 0.3s ease;
}

.card-content p[b-a66rq1ln5k] {
    color: var(--card-desc);
    line-height: 1.55;
    font-size: 0.92rem;
    max-width: 260px;
    margin: 0 auto 1.2rem;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: color 0.3s ease;
}

/* Explore CTA Button - Clickable interactive div */
.explore-btn[b-a66rq1ln5k] {
    width: 180px;
    height: 44px;
    border-radius: 9999px;
    font-weight: 750;
    font-size: 0.92rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0 auto;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
    cursor: pointer !important;
    pointer-events: auto !important;
    position: relative;
    z-index: 10;
    outline: none;
    user-select: none;
}

.ielts-btn[b-a66rq1ln5k] {
    color: var(--btn-color-ielts);
    border: var(--btn-border-ielts);
    background: var(--btn-bg-ielts);
}

.ielts-card:hover .explore-btn[b-a66rq1ln5k],
.ielts-btn:hover[b-a66rq1ln5k] {
    background: var(--btn-hover-bg-ielts);
    border-color: var(--card-border-hover-ielts);
    color: var(--btn-hover-color-ielts);
    box-shadow: var(--btn-hover-shadow-ielts);
    transform: scale(1.04);
}

.hsk-btn[b-a66rq1ln5k] {
    color: var(--btn-color-hsk);
    border: var(--btn-border-hsk);
    background: var(--btn-bg-hsk);
}

.hsk-card:hover .explore-btn[b-a66rq1ln5k],
.hsk-btn:hover[b-a66rq1ln5k] {
    background: var(--btn-hover-bg-hsk);
    border-color: var(--card-border-hover-hsk);
    color: var(--btn-hover-color-hsk);
    box-shadow: var(--btn-hover-shadow-hsk);
    transform: scale(1.04);
}

.btn-arrow[b-a66rq1ln5k] {
    display: inline-block;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    font-size: 1.15rem;
    line-height: 1;
}

.monolith-card:hover .btn-arrow[b-a66rq1ln5k] {
    transform: translateX(5px);
}

/* Ground Light Cast & Dynamic Shadow (Pushed behind in 3D: translateZ negative) */
.ground-light-cast[b-a66rq1ln5k] {
    position: absolute;
    bottom: -35px;
    width: 300px;
    height: 70px;
    border-radius: 100%;
    filter: blur(22px);
    pointer-events: none !important;
    transform: translateZ(-35px) rotateX(75deg) translateY(20px) translateX(var(--mouse-x, 0px));
    transition: transform 0.15s ease-out;
    z-index: 0;
}

.ielts-ground-glow[b-a66rq1ln5k] {
    background: radial-gradient(circle, rgba(2, 132, 199, 0.45) 0%, rgba(56, 189, 248, 0.2) 50%, transparent 80%);
}

.hsk-ground-glow[b-a66rq1ln5k] {
    background: radial-gradient(circle, rgba(239, 68, 68, 0.45) 0%, rgba(244, 63, 94, 0.2) 50%, transparent 80%);
}

.ground-shadow[b-a66rq1ln5k] {
    position: absolute;
    bottom: -45px;
    width: 270px;
    height: 50px;
    border-radius: 100%;
    background: rgba(15, 23, 42, 0.18);
    filter: blur(18px);
    pointer-events: none !important;
    transform: translateZ(-45px) rotateX(75deg) translateY(35px) translateX(calc(var(--mouse-x, 0px) * -1));
    transition: transform 0.15s ease-out;
    z-index: 0;
}

/* Responsive Media Queries */
@media (max-width: 860px) {
    .cards-tilt-rig[b-a66rq1ln5k] {
        flex-direction: column;
        gap: 3.5rem;
        transform: none !important;
    }
    .cards-stage[b-a66rq1ln5k] {
        perspective: none;
        padding-bottom: 2rem;
    }
    .main-title[b-a66rq1ln5k] {
        font-size: 2.5rem;
    }
    .monolith-card[b-a66rq1ln5k] {
        width: 320px;
        height: 390px;
    }
    .ground-light-cast[b-a66rq1ln5k],
    .ground-shadow[b-a66rq1ln5k] {
        transform: rotateX(75deg) translateY(20px) !important;
    }
}

/* Hide Mascot Companion completely on Landing Page */
:global(.mascot-widget-wrapper)[b-a66rq1ln5k],
:global(#mascotCompanionWidget)[b-a66rq1ln5k] {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════ */
/* LIQUID WATER DROPLET SCROLL DOWN INDICATOR (THANH KÉO CUỘN GIỌT NƯỚC)  */
/* ══════════════════════════════════════════════════════════════════════ */
.water-drop-scroll-indicator[b-a66rq1ln5k] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 1.8rem;
    cursor: pointer;
    user-select: none;
    z-index: 10;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
    opacity: 0.85;
    outline: none;
}

.water-drop-scroll-indicator:hover[b-a66rq1ln5k] {
    transform: translateY(4px);
    opacity: 1;
}

.water-drop-scroll-indicator:focus-visible[b-a66rq1ln5k] {
    outline: 2px solid var(--ig-primary);
    border-radius: 9999px;
}

/* Glass Capsule Track */
.water-drop-capsule[b-a66rq1ln5k] {
    position: relative;
    width: 26px;
    height: 48px;
    border-radius: 9999px;
    border: 1.5px solid var(--capsule-border);
    background: var(--capsule-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.3);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.water-drop-scroll-indicator:hover .water-drop-capsule[b-a66rq1ln5k] {
    border-color: var(--card-border-hover-ielts);
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.4), inset 0 1px 3px rgba(255, 255, 255, 0.5);
}

/* Faint moisture groove in the center */
.water-drop-groove[b-a66rq1ln5k] {
    position: absolute;
    left: 50%;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: var(--capsule-groove);
    transform: translateX(-50%);
}

/* Luminous Droplet moving down */
.water-droplet[b-a66rq1ln5k] {
    position: absolute;
    left: 50%;
    width: 8px;
    height: 10px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    background: var(--droplet-bg);
    box-shadow: var(--droplet-glow), inset 0 1px 1px #ffffff;
    animation: water-droplet-flow-b-a66rq1ln5k 2.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

@keyframes water-droplet-flow-b-a66rq1ln5k {
    0% {
        top: 6px;
        transform: translateX(-50%) scale(0.65, 0.65);
        opacity: 0;
    }
    15% {
        top: 8px;
        transform: translateX(-50%) scale(1, 1);
        opacity: 1;
    }
    60% {
        top: 24px;
        transform: translateX(-50%) scale(0.85, 1.45);
        opacity: 0.95;
    }
    85% {
        top: 32px;
        transform: translateX(-50%) scale(1.15, 0.85);
        opacity: 0.7;
    }
    100% {
        top: 36px;
        transform: translateX(-50%) scale(1.5, 0.4);
        opacity: 0;
    }
}

/* Liquid Ripple at bottom of capsule */
.water-drop-splash[b-a66rq1ln5k] {
    position: absolute;
    left: 50%;
    bottom: 5px;
    width: 14px;
    height: 6px;
    border-radius: 50%;
    border: 1px solid var(--card-border-hover-ielts);
    animation: water-splash-pulse-b-a66rq1ln5k 2.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
    pointer-events: none;
}

@keyframes water-splash-pulse-b-a66rq1ln5k {
    0%, 65% {
        transform: translateX(-50%) scale(0);
        opacity: 0;
    }
    85% {
        transform: translateX(-50%) scale(0.8);
        opacity: 0.65;
    }
    100% {
        transform: translateX(-50%) scale(1.5);
        opacity: 0;
    }
}

/* Label text below indicator */
.water-drop-label[b-a66rq1ln5k] {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lc-subtitle);
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.25s ease;
}

.water-drop-scroll-indicator:hover .water-drop-label[b-a66rq1ln5k] {
    color: var(--lc-title);
}

.water-drop-label i[b-a66rq1ln5k] {
    font-size: 0.8rem;
    transition: transform 0.25s ease;
}

.water-drop-scroll-indicator:hover .water-drop-label i[b-a66rq1ln5k] {
    transform: translateY(2px);
}

/* ══════════════════════════════════════════════════════════════════════ */
/* HOME LONG SHOWCASE SECTIONS (CHO PHÉP REVIEW THANH CUỘN GIỌT NƯỚC) */
/* ══════════════════════════════════════════════════════════════════════ */

.home-sections-wrapper[b-a66rq1ln5k] {
    width: 100%;
    background-color: var(--lc-bg);
    color: var(--lc-title);
    transition: background 0.3s ease, color 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

.home-section[b-a66rq1ln5k] {
    padding: 5rem 1.5rem;
    position: relative;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.section-container[b-a66rq1ln5k] {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.section-header[b-a66rq1ln5k] {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 3.5rem;
}

.section-badge[b-a66rq1ln5k] {
    display: inline-block;
    padding: 0.35rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 9999px;
    background: rgba(2, 132, 199, 0.08);
    color: var(--ig-primary);
    border: 1px solid rgba(2, 132, 199, 0.2);
    margin-bottom: 1rem;
}

:global([data-theme="dark"]) .section-badge[b-a66rq1ln5k],
:global(:root:not([data-theme="light"])) .section-badge[b-a66rq1ln5k] {
    background: rgba(56, 189, 248, 0.12);
    color: #38bdf8;
    border-color: rgba(56, 189, 248, 0.28);
}

.section-title[b-a66rq1ln5k] {
    font-size: 2.25rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: var(--lc-title);
    letter-spacing: -0.02em;
}

.section-subtitle[b-a66rq1ln5k] {
    font-size: 1.05rem;
    color: var(--lc-subtitle);
    line-height: 1.6;
    margin: 0;
}

/* 1. Stats Counter Grid */
.stats-grid[b-a66rq1ln5k] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.stat-card[b-a66rq1ln5k] {
    background: var(--card-bg);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 18px;
    padding: 2.2rem 1.5rem;
    text-align: center;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.stat-card:hover[b-a66rq1ln5k] {
    transform: translateY(-5px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);
}

.stat-icon[b-a66rq1ln5k] {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1.2rem;
}

.stat-blue[b-a66rq1ln5k] { background: rgba(2, 132, 199, 0.12); color: #0284c7; }
.stat-rose[b-a66rq1ln5k] { background: rgba(225, 29, 72, 0.12); color: #e11d48; }
.stat-amber[b-a66rq1ln5k] { background: rgba(217, 119, 6, 0.12); color: #d97706; }
.stat-emerald[b-a66rq1ln5k] { background: rgba(5, 150, 105, 0.12); color: #059669; }

:global([data-theme="dark"]) .stat-blue[b-a66rq1ln5k] { background: rgba(56, 189, 248, 0.18); color: #38bdf8; }
:global([data-theme="dark"]) .stat-rose[b-a66rq1ln5k] { background: rgba(244, 63, 94, 0.18); color: #fb7185; }
:global([data-theme="dark"]) .stat-amber[b-a66rq1ln5k] { background: rgba(251, 191, 36, 0.18); color: #fcd34d; }
:global([data-theme="dark"]) .stat-emerald[b-a66rq1ln5k] { background: rgba(52, 211, 153, 0.18); color: #6ee7b7; }

.stat-number[b-a66rq1ln5k] {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--lc-title);
    line-height: 1.1;
    margin-bottom: 0.5rem;
    font-family: 'Orbitron', 'Plus Jakarta Sans', sans-serif;
}

.stat-label[b-a66rq1ln5k] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--lc-title);
    margin-bottom: 0.4rem;
}

.stat-desc[b-a66rq1ln5k] {
    font-size: 0.85rem;
    color: var(--lc-subtitle);
    line-height: 1.45;
}

/* 2. Core Features Grid */
.features-grid[b-a66rq1ln5k] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.feature-card[b-a66rq1ln5k] {
    background: var(--card-bg);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    position: relative;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, border-color 0.28s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.feature-card:hover[b-a66rq1ln5k] {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.09);
    border-color: rgba(2, 132, 199, 0.4);
}

:global([data-theme="dark"]) .feature-card:hover[b-a66rq1ln5k] {
    border-color: rgba(56, 189, 248, 0.4);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45);
}

.feature-badge[b-a66rq1ln5k] {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.3rem 0.7rem;
    border-radius: 9999px;
}

.ielts-subtle-badge[b-a66rq1ln5k] { background: rgba(2, 132, 199, 0.1); color: #0284c7; }
.hsk-subtle-badge[b-a66rq1ln5k] { background: rgba(225, 29, 72, 0.1); color: #e11d48; }
.game-subtle-badge[b-a66rq1ln5k] { background: rgba(147, 51, 234, 0.1); color: #9333ea; }
.srs-subtle-badge[b-a66rq1ln5k] { background: rgba(217, 119, 6, 0.1); color: #d97706; }

:global([data-theme="dark"]) .ielts-subtle-badge[b-a66rq1ln5k] { background: rgba(56, 189, 248, 0.15); color: #38bdf8; }
:global([data-theme="dark"]) .hsk-subtle-badge[b-a66rq1ln5k] { background: rgba(244, 63, 94, 0.15); color: #fb7185; }
:global([data-theme="dark"]) .game-subtle-badge[b-a66rq1ln5k] { background: rgba(168, 85, 247, 0.15); color: #c084fc; }
:global([data-theme="dark"]) .srs-subtle-badge[b-a66rq1ln5k] { background: rgba(251, 191, 36, 0.15); color: #fcd34d; }

.feature-icon[b-a66rq1ln5k] {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    margin-bottom: 1.5rem;
}

.ielts-color[b-a66rq1ln5k] { background: linear-gradient(135deg, rgba(2, 132, 199, 0.15) 0%, rgba(56, 189, 248, 0.25) 100%); color: #0284c7; }
.hsk-color[b-a66rq1ln5k] { background: linear-gradient(135deg, rgba(225, 29, 72, 0.15) 0%, rgba(244, 63, 94, 0.25) 100%); color: #e11d48; }
.game-color[b-a66rq1ln5k] { background: linear-gradient(135deg, rgba(147, 51, 234, 0.15) 0%, rgba(192, 132, 252, 0.25) 100%); color: #9333ea; }
.srs-color[b-a66rq1ln5k] { background: linear-gradient(135deg, rgba(217, 119, 6, 0.15) 0%, rgba(251, 191, 36, 0.25) 100%); color: #d97706; }

:global([data-theme="dark"]) .ielts-color[b-a66rq1ln5k] { color: #38bdf8; }
:global([data-theme="dark"]) .hsk-color[b-a66rq1ln5k] { color: #fb7185; }
:global([data-theme="dark"]) .game-color[b-a66rq1ln5k] { color: #c084fc; }
:global([data-theme="dark"]) .srs-color[b-a66rq1ln5k] { color: #fcd34d; }

.feature-card h3[b-a66rq1ln5k] {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--lc-title);
    margin-bottom: 0.8rem;
}

.feature-card p[b-a66rq1ln5k] {
    font-size: 0.95rem;
    color: var(--lc-subtitle);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.feature-list[b-a66rq1ln5k] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.feature-list li[b-a66rq1ln5k] {
    font-size: 0.9rem;
    color: var(--lc-subtitle);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.feature-list li i[b-a66rq1ln5k] {
    color: #10b981;
    font-weight: bold;
    font-size: 1rem;
}

/* 3. Roadmap Track */
.roadmap-track[b-a66rq1ln5k] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 860px;
    margin: 0 auto;
    position: relative;
}

.roadmap-track[b-a66rq1ln5k]::before {
    content: '';
    position: absolute;
    left: 28px;
    top: 20px;
    bottom: 20px;
    width: 2px;
    background: rgba(148, 163, 184, 0.25);
}

.roadmap-step[b-a66rq1ln5k] {
    display: flex;
    align-items: flex-start;
    gap: 1.8rem;
    position: relative;
    z-index: 2;
}

.step-marker[b-a66rq1ln5k] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--card-bg);
    border: 2px solid var(--ig-primary);
    color: var(--ig-primary);
    font-family: 'Orbitron', 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.2);
}

.step-card[b-a66rq1ln5k] {
    flex: 1;
    background: var(--card-bg);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 16px;
    padding: 1.5rem 1.8rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.03);
    transition: transform 0.25s ease;
}

.roadmap-step:hover .step-card[b-a66rq1ln5k] {
    transform: translateX(6px);
}

.step-card h4[b-a66rq1ln5k] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--lc-title);
    margin-bottom: 0.4rem;
}

.step-card p[b-a66rq1ln5k] {
    font-size: 0.92rem;
    color: var(--lc-subtitle);
    line-height: 1.55;
    margin: 0;
}

/* 4. Student Reviews Grid */
.reviews-grid[b-a66rq1ln5k] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.8rem;
}

.review-card[b-a66rq1ln5k] {
    background: var(--card-bg);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 18px;
    padding: 2.2rem 1.8rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    transition: transform 0.25s ease;
}

.review-card:hover[b-a66rq1ln5k] {
    transform: translateY(-5px);
}

.review-stars[b-a66rq1ln5k] {
    color: #f59e0b;
    font-size: 0.95rem;
    display: flex;
    gap: 3px;
    margin-bottom: 1.2rem;
}

.review-quote[b-a66rq1ln5k] {
    font-size: 0.95rem;
    color: var(--lc-title);
    line-height: 1.65;
    font-style: italic;
    margin-bottom: 1.8rem;
    flex: 1;
}

.review-author[b-a66rq1ln5k] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.author-avatar[b-a66rq1ln5k] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #ffffff;
    font-weight: 800;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-1[b-a66rq1ln5k] { background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%); }
.avatar-2[b-a66rq1ln5k] { background: linear-gradient(135deg, #e11d48 0%, #fb7185 100%); }
.avatar-3[b-a66rq1ln5k] { background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%); }

.author-name[b-a66rq1ln5k] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--lc-title);
}

.author-tag[b-a66rq1ln5k] {
    font-size: 0.8rem;
    color: var(--lc-subtitle);
}

/* 5. FAQ List */
.faq-list[b-a66rq1ln5k] {
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.faq-item[b-a66rq1ln5k] {
    background: var(--card-bg);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 16px;
    padding: 1.6rem 2rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.faq-question[b-a66rq1ln5k] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--lc-title);
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
}

.faq-answer[b-a66rq1ln5k] {
    font-size: 0.94rem;
    color: var(--lc-subtitle);
    line-height: 1.6;
}

/* 6. CTA Banner */
.cta-banner[b-a66rq1ln5k] {
    position: relative;
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.08) 0%, rgba(225, 29, 72, 0.08) 100%);
    border: 1.5px solid rgba(2, 132, 199, 0.25);
    border-radius: 24px;
    padding: 4rem 2rem;
    text-align: center;
    overflow: hidden;
}

:global([data-theme="dark"]) .cta-banner[b-a66rq1ln5k] {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.12) 0%, rgba(244, 63, 94, 0.12) 100%);
    border-color: rgba(56, 189, 248, 0.35);
}

.cta-title[b-a66rq1ln5k] {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--lc-title);
    margin-bottom: 1rem;
}

.cta-subtitle[b-a66rq1ln5k] {
    font-size: 1.05rem;
    color: var(--lc-subtitle);
    max-width: 600px;
    margin: 0 auto 2.5rem;
}

.cta-actions[b-a66rq1ln5k] {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.cta-btn[b-a66rq1ln5k] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 2rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cta-btn:hover[b-a66rq1ln5k] {
    transform: translateY(-2px);
}

.btn-ielts-cta[b-a66rq1ln5k] {
    background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
    color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(2, 132, 199, 0.35);
}

.btn-hsk-cta[b-a66rq1ln5k] {
    background: linear-gradient(135deg, #e11d48 0%, #fb7185 100%);
    color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(225, 29, 72, 0.35);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .stats-grid[b-a66rq1ln5k] { grid-template-columns: repeat(2, 1fr); }
    .features-grid[b-a66rq1ln5k] { grid-template-columns: 1fr; }
    .reviews-grid[b-a66rq1ln5k] { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .stats-grid[b-a66rq1ln5k] { grid-template-columns: 1fr; }
    .section-title[b-a66rq1ln5k] { font-size: 1.75rem; }
    .home-section[b-a66rq1ln5k] { padding: 3.5rem 1rem; }
}
/* /Pages/Hsk/AdminHsk.razor.rz.scp.css */
/* ========================================================================= */
/* ADMIN HSK MANAGEMENT (CHINESE IMPERIAL RED & CRIMSON THEME #DC2626)       */
/* ========================================================================= */
.admin-hsk-page[b-pv9dcf2buy] {
    padding: 24px 32px 60px;
    max-width: 1400px;
    margin: 0 auto;
    font-family: 'Be Vietnam Pro', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1e293b;
}

/* Page Header */
.page-header[b-pv9dcf2buy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 16px;
}

.header-left[b-pv9dcf2buy] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-icon-badge[b-pv9dcf2buy] {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35);
    flex-shrink: 0;
}

.page-title[b-pv9dcf2buy] {
    font-size: 1.85rem;
    font-weight: 800;
    margin: 0 0 4px 0;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.page-subtitle[b-pv9dcf2buy] {
    margin: 0;
    font-size: 0.95rem;
    color: #64748b;
}

.btn-primary-action[b-pv9dcf2buy] {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    border: none;
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.32);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-primary-action:hover[b-pv9dcf2buy] {
    background: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(220, 38, 38, 0.45);
}

/* Stats Cards Grid */
.stats-grid[b-pv9dcf2buy] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 28px;
}

.stat-card[b-pv9dcf2buy] {
    background: #ffffff;
    border: 1px solid #fee2e2;
    border-radius: 18px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 18px;
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.04);
}

.stat-icon[b-pv9dcf2buy] {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.stat-icon.vocab[b-pv9dcf2buy] { background: #fef2f2; color: #dc2626; }
.stat-icon.tests[b-pv9dcf2buy] { background: #fff1f2; color: #e11d48; }
.stat-icon.levels[b-pv9dcf2buy] { background: #fefce8; color: #ca8a04; }
.stat-icon.active-learners[b-pv9dcf2buy] { background: #fff7ed; color: #ea580c; }

.stat-label[b-pv9dcf2buy] {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}

.stat-number[b-pv9dcf2buy] {
    font-size: 1.65rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    line-height: 1.2;
}

/* Nav Tabs */
.nav-tabs-wrapper[b-pv9dcf2buy] {
    display: flex;
    gap: 8px;
    border-bottom: 2px solid #fee2e2;
    margin-bottom: 24px;
}

.tab-btn[b-pv9dcf2buy] {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 12px 20px;
    font-size: 0.98rem;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: -2px;
    transition: all 0.2s ease;
}

.tab-btn:hover[b-pv9dcf2buy] {
    color: #dc2626;
}

.tab-btn.active[b-pv9dcf2buy] {
    color: #dc2626;
    border-bottom-color: #dc2626;
}

/* Toolbar & Filter Pills */
.toolbar-card[b-pv9dcf2buy] {
    background: #ffffff;
    border: 1px solid #fee2e2;
    border-radius: 18px;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.03);
}

.hsk-level-pills[b-pv9dcf2buy] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hsk-pill[b-pv9dcf2buy] {
    border: 1.5px solid #fee2e2;
    background: #fffafa;
    color: #475569;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hsk-pill:hover[b-pv9dcf2buy] {
    background: #fef2f2;
    border-color: #dc2626;
    color: #dc2626;
}

.hsk-pill.active[b-pv9dcf2buy] {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    border-color: #dc2626;
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(220, 38, 38, 0.3);
}

.search-box-wrapper[b-pv9dcf2buy] {
    position: relative;
    width: 320px;
}

.search-icon[b-pv9dcf2buy] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #f87171;
    font-size: 0.95rem;
}

.search-box-wrapper input[b-pv9dcf2buy] {
    width: 100%;
    padding: 9px 16px 9px 38px;
    border-radius: 12px;
    border: 1.5px solid #fecaca;
    font-size: 0.92rem;
    background: #ffffff;
    color: #0f172a;
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.search-box-wrapper input:focus[b-pv9dcf2buy] {
    border-color: #dc2626;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.15);
}

/* Data Table */
.table-card[b-pv9dcf2buy] {
    background: #ffffff;
    border: 1px solid #fee2e2;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(220, 38, 38, 0.04);
}

.table-responsive[b-pv9dcf2buy] {
    overflow-x: auto;
}

.data-table[b-pv9dcf2buy] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.data-table th[b-pv9dcf2buy] {
    background: #fff8f8;
    color: #991b1b;
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 16px 20px;
    border-bottom: 1.5px solid #fee2e2;
    text-align: left;
}

.data-table td[b-pv9dcf2buy] {
    padding: 16px 20px;
    vertical-align: middle;
    border-bottom: 1px solid #fff1f2;
}

.hanzi-cell[b-pv9dcf2buy] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hanzi-text[b-pv9dcf2buy] {
    font-size: 1.45rem;
    font-weight: 800;
    color: #0f172a;
}

.btn-audio-mini[b-pv9dcf2buy] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.85rem;
    transition: transform 0.2s ease;
}

.btn-audio-mini:hover[b-pv9dcf2buy] {
    background: #dc2626;
    color: #ffffff;
    transform: scale(1.1);
}

.pinyin-text[b-pv9dcf2buy] {
    color: #dc2626;
    font-weight: 700;
    font-size: 1rem;
}

.meaning-text[b-pv9dcf2buy] {
    color: #334155;
}

.pos-badge[b-pv9dcf2buy] {
    background: #fef2f2;
    color: #991b1b;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
}

.hsk-badge[b-pv9dcf2buy] {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 800;
    color: #ffffff;
}

.hsk-badge-1[b-pv9dcf2buy] { background: #16a34a; }
.hsk-badge-2[b-pv9dcf2buy] { background: #0284c7; }
.hsk-badge-3[b-pv9dcf2buy] { background: #ea580c; }
.hsk-badge-4[b-pv9dcf2buy] { background: #dc2626; }
.hsk-badge-5[b-pv9dcf2buy] { background: #7c3aed; }
.hsk-badge-6[b-pv9dcf2buy] { background: #0f172a; }

.example-text[b-pv9dcf2buy] {
    font-size: 0.88rem;
    color: #64748b;
    font-style: italic;
}

.action-buttons-group[b-pv9dcf2buy] {
    display: inline-flex;
    gap: 6px;
}

.action-btn[b-pv9dcf2buy] {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1.5px solid #fee2e2;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-edit[b-pv9dcf2buy] { color: #dc2626; }
.btn-edit:hover[b-pv9dcf2buy] { background: #fef2f2; border-color: #dc2626; }

.btn-delete[b-pv9dcf2buy] { color: #991b1b; }
.btn-delete:hover[b-pv9dcf2buy] { background: #fee2e2; border-color: #991b1b; }

.table-footer[b-pv9dcf2buy] {
    padding: 14px 20px;
    background: #fff8f8;
    border-top: 1px solid #fee2e2;
    font-size: 0.88rem;
    color: #991b1b;
}

/* Mock Tests Grid */
.tests-grid[b-pv9dcf2buy] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

.test-card[b-pv9dcf2buy] {
    background: #ffffff;
    border: 1px solid #fee2e2;
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.04);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.test-card:hover[b-pv9dcf2buy] {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(220, 38, 38, 0.12);
    border-color: #fca5a5;
}

.test-card-header[b-pv9dcf2buy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.test-status[b-pv9dcf2buy] {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
}

.test-status.published[b-pv9dcf2buy] {
    background: #f0fdf4;
    color: #16a34a;
}

.test-status.draft[b-pv9dcf2buy] {
    background: #f8fafc;
    color: #64748b;
}

.test-title[b-pv9dcf2buy] {
    font-size: 1.1rem;
    font-weight: 800;
    margin: 0 0 14px 0;
    color: #0f172a;
    line-height: 1.4;
}

.test-meta[b-pv9dcf2buy] {
    display: flex;
    gap: 14px;
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 20px;
}

.test-meta span[b-pv9dcf2buy] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.test-card-actions[b-pv9dcf2buy] {
    display: flex;
    gap: 10px;
    margin-top: auto;
}

.btn-test-edit[b-pv9dcf2buy], .btn-test-preview[b-pv9dcf2buy] {
    flex: 1;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
}

.btn-test-edit[b-pv9dcf2buy] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
}

.btn-test-edit:hover[b-pv9dcf2buy] {
    background: #dc2626;
    color: #ffffff;
}

.btn-test-preview[b-pv9dcf2buy] {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    color: #475569;
}

.btn-test-preview:hover[b-pv9dcf2buy] {
    background: #f8fafc;
    color: #0f172a;
}

/* ========================================================================= */
/* DARK THEME EYE-COMFORT RULES (ADMIN HSK)                                  */
/* ========================================================================= */
[data-theme="dark"] .admin-hsk-page[b-pv9dcf2buy] {
    color: #f8fafc;
}

[data-theme="dark"] .page-title[b-pv9dcf2buy] {
    color: #f8fafc !important;
}

[data-theme="dark"] .page-subtitle[b-pv9dcf2buy] {
    color: #94a3b8 !important;
}

[data-theme="dark"] .stat-card[b-pv9dcf2buy] {
    background: #15243f !important;
    border-color: #223554 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .stat-num[b-pv9dcf2buy] {
    color: #f8fafc !important;
}

[data-theme="dark"] .stat-label[b-pv9dcf2buy] {
    color: #94a3b8 !important;
}

[data-theme="dark"] .card-container[b-pv9dcf2buy] {
    background: #15243f !important;
    border-color: #223554 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .section-title[b-pv9dcf2buy] {
    color: #f8fafc !important;
}

[data-theme="dark"] .custom-table th[b-pv9dcf2buy] {
    background: #111d33 !important;
    color: #94a3b8 !important;
    border-bottom-color: #223554 !important;
}

[data-theme="dark"] .custom-table td[b-pv9dcf2buy] {
    color: #f8fafc !important;
    border-bottom-color: #223554 !important;
}

[data-theme="dark"] .custom-table tr:hover td[b-pv9dcf2buy] {
    background: #182a4a !important;
}

[data-theme="dark"] .test-card[b-pv9dcf2buy] {
    background: #15243f !important;
    border-color: #223554 !important;
}

[data-theme="dark"] .test-title[b-pv9dcf2buy] {
    color: #f8fafc !important;
}

[data-theme="dark"] .test-meta[b-pv9dcf2buy] {
    color: #94a3b8 !important;
}

[data-theme="dark"] .btn-test-preview[b-pv9dcf2buy] {
    background: #111d33 !important;
    border-color: #223554 !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .btn-test-preview:hover[b-pv9dcf2buy] {
    background: #182a4a !important;
    color: #f8fafc !important;
}

/* /Pages/Hsk/AdminHskMockTests.razor.rz.scp.css */
/* ========================================================================= */
/* ADMIN HSK MOCK TESTS (CHINESE IMPERIAL RED THEME #DC2626)                 */
/* ========================================================================= */
.admin-hsk-tests-page[b-8kmetbezlv] {
    padding: 24px 32px 60px;
    max-width: 1400px;
    margin: 0 auto;
    font-family: 'Be Vietnam Pro', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1e293b;
}

.page-header[b-8kmetbezlv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 16px;
}

.header-left[b-8kmetbezlv] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-icon-badge[b-8kmetbezlv] {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35);
    flex-shrink: 0;
}

.page-title[b-8kmetbezlv] {
    font-size: 1.85rem;
    font-weight: 800;
    margin: 0 0 4px 0;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.page-subtitle[b-8kmetbezlv] {
    margin: 0;
    font-size: 0.95rem;
    color: #64748b;
}

.btn-primary-action[b-8kmetbezlv] {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    border: none;
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.32);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-primary-action:hover[b-8kmetbezlv] {
    background: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(220, 38, 38, 0.45);
}

/* Toolbar */
.toolbar-card[b-8kmetbezlv] {
    background: #ffffff;
    border: 1.5px solid #fee2e2;
    border-radius: 18px;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.03);
}

.filter-group[b-8kmetbezlv] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.filter-group label[b-8kmetbezlv] {
    font-size: 0.9rem;
    font-weight: 700;
    color: #dc2626;
    display: flex;
    align-items: center;
    gap: 5px;
}

.form-select-filter[b-8kmetbezlv] {
    padding: 8px 14px;
    border-radius: 10px;
    border: 1.5px solid #fecaca;
    background: #ffffff;
    color: #0f172a;
    font-weight: 600;
    font-size: 0.9rem;
    outline: none;
    cursor: pointer;
}

.form-select-filter:focus[b-8kmetbezlv] {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.search-box-wrapper[b-8kmetbezlv] {
    position: relative;
    width: 320px;
}

.search-icon[b-8kmetbezlv] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #f87171;
    font-size: 0.95rem;
}

.search-box-wrapper input[b-8kmetbezlv] {
    width: 100%;
    padding: 9px 36px 9px 38px;
    border-radius: 12px;
    border: 1.5px solid #fecaca;
    font-size: 0.92rem;
    background: #ffffff;
    color: #0f172a;
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.search-box-wrapper input:focus[b-8kmetbezlv] {
    border-color: #dc2626;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.15);
}

.btn-clear-search[b-8kmetbezlv] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 0;
}

/* Table Card */
.table-card[b-8kmetbezlv] {
    background: #ffffff;
    border: 1.5px solid #fee2e2;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(220, 38, 38, 0.04);
}

.table-responsive[b-8kmetbezlv] {
    overflow-x: auto;
}

.data-table[b-8kmetbezlv] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.data-table th[b-8kmetbezlv] {
    background: #fff8f8;
    color: #991b1b;
    font-weight: 800;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 16px 20px;
    border-bottom: 1.5px solid #fee2e2;
    text-align: left;
}

.data-table td[b-8kmetbezlv] {
    padding: 16px 20px;
    vertical-align: middle;
    border-bottom: 1px solid #fff1f2;
    background: #ffffff;
}

.data-table tbody tr:hover td[b-8kmetbezlv] {
    background: #fffaf9;
}

.id-tag[b-8kmetbezlv] {
    font-weight: 700;
    color: #94a3b8;
    font-size: 0.85rem;
}

.test-title-text[b-8kmetbezlv] {
    color: #0f172a;
    font-weight: 700;
}

.collection-tag[b-8kmetbezlv] {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 600;
    background: #f8fafc;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.skill-pill[b-8kmetbezlv] {
    font-size: 0.82rem;
    color: #dc2626;
    background: #fef2f2;
    padding: 4px 10px;
    border-radius: 8px;
    font-weight: 700;
    border: 1px solid #fecaca;
}

.hsk-badge[b-8kmetbezlv] {
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 800;
    color: #ffffff;
    display: inline-block;
}

.hsk-badge-1[b-8kmetbezlv] { background: #16a34a; }
.hsk-badge-2[b-8kmetbezlv] { background: #0284c7; }
.hsk-badge-3[b-8kmetbezlv] { background: #ea580c; }
.hsk-badge-4[b-8kmetbezlv] { background: #dc2626; }
.hsk-badge-5[b-8kmetbezlv] { background: #7c3aed; }
.hsk-badge-6[b-8kmetbezlv] { background: #0f172a; }

.action-buttons-group[b-8kmetbezlv] {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

.action-btn[b-8kmetbezlv] {
    padding: 6px 12px;
    border-radius: 8px;
    border: 1.5px solid transparent;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.btn-edit[b-8kmetbezlv] {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}
.btn-edit:hover[b-8kmetbezlv] {
    background: #dc2626;
    color: #ffffff;
}

.btn-view[b-8kmetbezlv] {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #475569;
}
.btn-view:hover[b-8kmetbezlv] {
    background: #e2e8f0;
    color: #0f172a;
}

.btn-delete[b-8kmetbezlv] {
    background: #ffffff;
    border-color: #fee2e2;
    color: #ef4444;
}
.btn-delete:hover[b-8kmetbezlv] {
    background: #ef4444;
    color: #ffffff;
}

.table-footer[b-8kmetbezlv] {
    padding: 14px 20px;
    background: #fff8f8;
    border-top: 1px solid #fee2e2;
    font-size: 0.88rem;
    color: #991b1b;
}

/* Loading & Empty States */
.loading-state[b-8kmetbezlv], .empty-state[b-8kmetbezlv] {
    padding: 60px 20px;
    text-align: center;
}
.custom-spinner[b-8kmetbezlv] {
    width: 36px;
    height: 36px;
    border: 3px solid #fee2e2;
    border-top-color: #dc2626;
    border-radius: 50%;
    animation: spin-b-8kmetbezlv 0.8s linear infinite;
    margin: 0 auto 16px;
}
.custom-spinner.mini[b-8kmetbezlv] {
    width: 14px;
    height: 14px;
    border-width: 2px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 4px 0 0;
}
@keyframes spin-b-8kmetbezlv { to { transform: rotate(360deg); } }

.empty-state i[b-8kmetbezlv] {
    font-size: 3rem;
    color: #fca5a5;
    margin-bottom: 12px;
    display: block;
}

.empty-state h4[b-8kmetbezlv] {
    margin: 0 0 6px;
    color: #0f172a;
    font-weight: 700;
}
.empty-state p[b-8kmetbezlv] {
    color: #64748b;
    margin: 0;
}

/* Modal */
.modal-overlay[b-8kmetbezlv] {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.modal-card[b-8kmetbezlv] {
    background: #ffffff;
    border-radius: 20px;
    width: 640px;
    max-width: 90%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    border: 1px solid #fee2e2;
    overflow: hidden;
}

.modal-header[b-8kmetbezlv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    border-bottom: 1px solid #fee2e2;
    background: #fff8f8;
}
.modal-header h3[b-8kmetbezlv] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
}
.btn-close-modal[b-8kmetbezlv] {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: #94a3b8;
    cursor: pointer;
}
.btn-close-modal:hover[b-8kmetbezlv] { color: #dc2626; }

.modal-body[b-8kmetbezlv] {
    padding: 24px;
    overflow-y: auto;
}

.form-group[b-8kmetbezlv] {
    margin-bottom: 14px;
}
.form-group label[b-8kmetbezlv] {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
    color: #334155;
    margin-bottom: 6px;
}
.req[b-8kmetbezlv] { color: #dc2626; }

.form-input[b-8kmetbezlv] {
    width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    color: #0f172a;
    font-size: 0.92rem;
    outline: none;
    box-sizing: border-box;
}
.form-input:focus[b-8kmetbezlv] {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.upload-box-hsk[b-8kmetbezlv] {
    background: #fff8f8;
    border: 1.5px dashed #fca5a5;
    border-radius: 12px;
    padding: 14px;
}
.file-input-clean[b-8kmetbezlv] {
    font-size: 0.85rem;
}

.modal-footer[b-8kmetbezlv] {
    padding: 16px 24px;
    border-top: 1px solid #fee2e2;
    background: #ffffff;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    align-items: center;
}

.btn-modal-cancel[b-8kmetbezlv] {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    color: #475569;
    padding: 8px 18px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
}
.btn-modal-save[b-8kmetbezlv] {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    border: none;
    color: #ffffff;
    padding: 8px 20px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}
.btn-modal-delete[b-8kmetbezlv] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    padding: 8px 16px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
}
.btn-modal-delete:hover[b-8kmetbezlv] { background: #dc2626; color: #ffffff; }

/* ========================================================================= */
/* DARK THEME EYE-COMFORT RULES (ADMIN HSK MOCK TESTS)                       */
/* ========================================================================= */
[data-theme="dark"] .admin-hsk-tests-page[b-8kmetbezlv] {
    color: #f8fafc;
}

[data-theme="dark"] .page-title[b-8kmetbezlv] {
    color: #f8fafc !important;
}

[data-theme="dark"] .page-subtitle[b-8kmetbezlv] {
    color: #94a3b8 !important;
}

[data-theme="dark"] .toolbar-card[b-8kmetbezlv] {
    background: #15243f !important;
    border-color: #223554 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .filter-group label[b-8kmetbezlv] {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .level-select-clean[b-8kmetbezlv],
[data-theme="dark"] .form-input[b-8kmetbezlv] {
    background: #111d33 !important;
    border-color: #223554 !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .tests-count[b-8kmetbezlv] {
    color: #94a3b8 !important;
}

[data-theme="dark"] .admin-test-card[b-8kmetbezlv] {
    background: #15243f !important;
    border-color: #223554 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .test-title[b-8kmetbezlv] {
    color: #f8fafc !important;
}

[data-theme="dark"] .meta-pill[b-8kmetbezlv] {
    background: #111d33 !important;
    color: #cbd5e1 !important;
    border-color: #223554 !important;
}

[data-theme="dark"] .btn-action-edit[b-8kmetbezlv] {
    background: #111d33 !important;
    border-color: #223554 !important;
    color: #f87171 !important;
}

[data-theme="dark"] .btn-action-edit:hover[b-8kmetbezlv] {
    background: #182a4a !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .modal-card[b-8kmetbezlv] {
    background: #15243f !important;
    border-color: #223554 !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .modal-header[b-8kmetbezlv],
[data-theme="dark"] .modal-footer[b-8kmetbezlv] {
    background: #15243f !important;
    border-color: #223554 !important;
}

[data-theme="dark"] .modal-title[b-8kmetbezlv] {
    color: #f8fafc !important;
}

[data-theme="dark"] .form-label[b-8kmetbezlv] {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .upload-box-hsk[b-8kmetbezlv] {
    background: #111d33 !important;
    border-color: #223554 !important;
}

[data-theme="dark"] .btn-modal-cancel[b-8kmetbezlv] {
    background: #111d33 !important;
    border-color: #223554 !important;
    color: #cbd5e1 !important;
}

/* /Pages/Hsk/AdminHskVocab.razor.rz.scp.css */
/* ========================================================================= */
/* ADMIN HSK VOCABULARY (CHINESE IMPERIAL RED THEME #DC2626)                 */
/* ========================================================================= */
.admin-hsk-vocab-page[b-bfd0bta3p5] {
    padding: 24px 32px 60px;
    max-width: 1400px;
    margin: 0 auto;
    font-family: 'Be Vietnam Pro', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1e293b;
}

.page-header[b-bfd0bta3p5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 16px;
}

.header-left[b-bfd0bta3p5] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-icon-badge[b-bfd0bta3p5] {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35);
    flex-shrink: 0;
}

.page-title[b-bfd0bta3p5] {
    font-size: 1.85rem;
    font-weight: 800;
    margin: 0 0 4px 0;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.page-subtitle[b-bfd0bta3p5] {
    margin: 0;
    font-size: 0.95rem;
    color: #64748b;
}

.header-right[b-bfd0bta3p5] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-primary-action[b-bfd0bta3p5] {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    border: none;
    color: #ffffff;
    padding: 10px 18px;
    border-radius: 12px;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.32);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-primary-action:hover[b-bfd0bta3p5] {
    background: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(220, 38, 38, 0.45);
}

.btn-secondary-action[b-bfd0bta3p5] {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    color: #334155;
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.btn-secondary-action:hover[b-bfd0bta3p5] {
    background: #f8fafc;
    border-color: #94a3b8;
}

/* Toolbar */
.toolbar-card[b-bfd0bta3p5] {
    background: #ffffff;
    border: 1.5px solid #fee2e2;
    border-radius: 18px;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.03);
}

.toolbar-left[b-bfd0bta3p5] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.toolbar-right[b-bfd0bta3p5] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.filter-group[b-bfd0bta3p5] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-group label[b-bfd0bta3p5] {
    font-size: 0.88rem;
    font-weight: 700;
    color: #dc2626;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.form-select-filter[b-bfd0bta3p5] {
    padding: 8px 14px;
    border-radius: 10px;
    border: 1.5px solid #fecaca;
    background: #ffffff;
    color: #0f172a;
    font-weight: 600;
    font-size: 0.9rem;
    outline: none;
    cursor: pointer;
}

.form-select-filter:focus[b-bfd0bta3p5] {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.page-size-selector[b-bfd0bta3p5] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.86rem;
    color: #64748b;
    font-weight: 600;
}

.page-size-selector select[b-bfd0bta3p5] {
    padding: 7px 10px;
    border-radius: 10px;
    border: 1.5px solid #fecaca;
    font-size: 0.86rem;
    font-weight: 600;
    background: #ffffff;
    color: #334155;
    outline: none;
    cursor: pointer;
}

.page-size-selector select:focus[b-bfd0bta3p5] {
    border-color: #dc2626;
}

.stats-counter[b-bfd0bta3p5] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    padding: 7px 16px;
    border-radius: 20px;
    font-size: 0.88rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.btn-danger-action[b-bfd0bta3p5] {
    background: #fef2f2;
    border: 1.5px solid #fecaca;
    color: #dc2626;
    padding: 8px 15px;
    border-radius: 12px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-danger-action:hover:not(:disabled)[b-bfd0bta3p5] {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.28);
}

.btn-danger-action:active:not(:disabled)[b-bfd0bta3p5] {
    transform: translateY(0);
}

.btn-danger-action:disabled[b-bfd0bta3p5] {
    opacity: 0.45;
    cursor: not-allowed;
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #94a3b8;
    box-shadow: none;
    transform: none;
}

.search-box-wrapper[b-bfd0bta3p5] {
    position: relative;
    width: 280px;
}

.search-icon[b-bfd0bta3p5] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #f87171;
    font-size: 0.95rem;
}

.search-box-wrapper input[b-bfd0bta3p5] {
    width: 100%;
    padding: 9px 36px 9px 38px;
    border-radius: 12px;
    border: 1.5px solid #fecaca;
    font-size: 0.92rem;
    background: #ffffff;
    color: #0f172a;
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.search-box-wrapper input:focus[b-bfd0bta3p5] {
    border-color: #dc2626;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.15);
}

.btn-clear-search[b-bfd0bta3p5] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 0;
}

/* Table Card */
.table-card[b-bfd0bta3p5] {
    background: #ffffff;
    border: 1.5px solid #fee2e2;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(220, 38, 38, 0.04);
}

.table-responsive[b-bfd0bta3p5] {
    overflow-x: auto;
}

.data-table[b-bfd0bta3p5] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.data-table th[b-bfd0bta3p5] {
    background: #fff8f8;
    color: #991b1b;
    font-weight: 800;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 16px 20px;
    border-bottom: 1.5px solid #fee2e2;
    text-align: left;
}

.data-table td[b-bfd0bta3p5] {
    padding: 16px 20px;
    vertical-align: middle;
    border-bottom: 1px solid #fff1f2;
    background: #ffffff;
}

.data-table tbody tr:hover td[b-bfd0bta3p5] {
    background: #fffaf9;
}

.id-tag[b-bfd0bta3p5] {
    font-weight: 700;
    color: #94a3b8;
    font-size: 0.85rem;
}

.hanzi-cell[b-bfd0bta3p5] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hanzi-text[b-bfd0bta3p5] {
    font-size: 1.45rem;
    font-weight: 800;
    color: #0f172a;
}

.btn-audio-mini[b-bfd0bta3p5] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.85rem;
    transition: transform 0.2s ease;
}

.btn-audio-mini:hover[b-bfd0bta3p5] {
    background: #dc2626;
    color: #ffffff;
    transform: scale(1.1);
}

.pinyin-text[b-bfd0bta3p5] {
    color: #dc2626;
    font-weight: 700;
    font-size: 0.98rem;
}

.meaning-text[b-bfd0bta3p5] {
    color: #1e293b;
    font-weight: 700;
}

.pos-badge[b-bfd0bta3p5] {
    background: #fef2f2;
    color: #991b1b;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
}

.example-text[b-bfd0bta3p5] {
    font-size: 0.88rem;
    color: #64748b;
    font-style: italic;
}

.hsk-badge[b-bfd0bta3p5] {
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 800;
    color: #ffffff;
    display: inline-block;
}

.hsk-badge-1[b-bfd0bta3p5] { background: #16a34a; }
.hsk-badge-2[b-bfd0bta3p5] { background: #0284c7; }
.hsk-badge-3[b-bfd0bta3p5] { background: #ea580c; }
.hsk-badge-4[b-bfd0bta3p5] { background: #dc2626; }
.hsk-badge-5[b-bfd0bta3p5] { background: #7c3aed; }
.hsk-badge-6[b-bfd0bta3p5] { background: #0f172a; }

.action-buttons-group[b-bfd0bta3p5] {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

.action-btn[b-bfd0bta3p5] {
    padding: 6px 12px;
    border-radius: 8px;
    border: 1.5px solid transparent;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.btn-edit[b-bfd0bta3p5] {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}
.btn-edit:hover[b-bfd0bta3p5] {
    background: #dc2626;
    color: #ffffff;
}

.btn-delete[b-bfd0bta3p5] {
    background: #ffffff;
    border-color: #fee2e2;
    color: #ef4444;
}
.btn-delete:hover[b-bfd0bta3p5] {
    background: #ef4444;
    color: #ffffff;
}

.cell-topic[b-bfd0bta3p5] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.example-cell[b-bfd0bta3p5] {
    font-size: 0.88rem;
    line-height: 1.45;
}

.example-zh[b-bfd0bta3p5] {
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 2px;
}

.example-py[b-bfd0bta3p5] {
    color: #dc2626;
    font-size: 0.82rem;
    margin-bottom: 1px;
}

.example-vi[b-bfd0bta3p5] {
    color: #64748b;
    font-size: 0.82rem;
    font-style: italic;
}

.table-footer[b-bfd0bta3p5] {
    padding: 14px 20px;
    background: #fff8f8;
    border-top: 1px solid #fee2e2;
    font-size: 0.88rem;
    color: #991b1b;
}

/* Pagination Footer */
.pagination-footer[b-bfd0bta3p5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 22px;
    background: #fff8f8;
    border-top: 1.5px solid #fee2e2;
    flex-wrap: wrap;
    gap: 12px;
}

.pagination-info[b-bfd0bta3p5] {
    font-size: 0.86rem;
    color: #64748b;
}

.pagination-info strong[b-bfd0bta3p5] {
    color: #0f172a;
}

.pagination-controls[b-bfd0bta3p5] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.page-btn[b-bfd0bta3p5] {
    background: #ffffff;
    border: 1.5px solid #fecaca;
    color: #334155;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border-radius: 9px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.page-btn:hover:not(:disabled)[b-bfd0bta3p5] {
    background: #fef2f2;
    border-color: #f87171;
    color: #dc2626;
}

.page-btn:disabled[b-bfd0bta3p5] {
    opacity: 0.4;
    cursor: not-allowed;
}

.page-btn.active[b-bfd0bta3p5] {
    background: #dc2626;
    color: #ffffff;
    border-color: #dc2626;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}

.page-ellipsis[b-bfd0bta3p5] {
    padding: 0 4px;
    color: #94a3b8;
    font-weight: 700;
}

/* Loading & Empty States */
.loading-state[b-bfd0bta3p5], .empty-state[b-bfd0bta3p5] {
    padding: 60px 20px;
    text-align: center;
}
.custom-spinner[b-bfd0bta3p5] {
    width: 36px;
    height: 36px;
    border: 3px solid #fee2e2;
    border-top-color: #dc2626;
    border-radius: 50%;
    animation: spin-b-bfd0bta3p5 0.8s linear infinite;
    margin: 0 auto 16px;
}
@keyframes spin-b-bfd0bta3p5 { to { transform: rotate(360deg); } }

.empty-state i[b-bfd0bta3p5] {
    font-size: 3rem;
    color: #fca5a5;
    margin-bottom: 12px;
    display: block;
}

.empty-state h4[b-bfd0bta3p5] {
    margin: 0 0 6px;
    color: #0f172a;
    font-weight: 700;
}
.empty-state p[b-bfd0bta3p5] {
    color: #64748b;
    margin: 0;
}

/* Modal */
.modal-overlay[b-bfd0bta3p5] {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.modal-card[b-bfd0bta3p5] {
    background: #ffffff;
    border-radius: 20px;
    width: 600px;
    max-width: 90%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    border: 1px solid #fee2e2;
    overflow: hidden;
}

.modal-header[b-bfd0bta3p5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    border-bottom: 1px solid #fee2e2;
    background: #fff8f8;
}
.modal-header h3[b-bfd0bta3p5] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
}
.btn-close-modal[b-bfd0bta3p5] {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: #94a3b8;
    cursor: pointer;
}
.btn-close-modal:hover[b-bfd0bta3p5] { color: #dc2626; }

.modal-body[b-bfd0bta3p5] {
    padding: 24px;
    overflow-y: auto;
}

.form-group[b-bfd0bta3p5] {
    margin-bottom: 14px;
}
.form-group label[b-bfd0bta3p5] {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
    color: #334155;
    margin-bottom: 6px;
}
.req[b-bfd0bta3p5] { color: #dc2626; }

.form-input[b-bfd0bta3p5] {
    width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    color: #0f172a;
    font-size: 0.92rem;
    outline: none;
    box-sizing: border-box;
}
.form-input:focus[b-bfd0bta3p5] {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.modal-footer[b-bfd0bta3p5] {
    padding: 16px 24px;
    border-top: 1px solid #fee2e2;
    background: #ffffff;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    align-items: center;
}

.btn-modal-cancel[b-bfd0bta3p5] {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    color: #475569;
    padding: 8px 18px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
}
.btn-modal-save[b-bfd0bta3p5] {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    border: none;
    color: #ffffff;
    padding: 8px 20px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.import-mode-select[b-bfd0bta3p5] {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    color: #334155;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    outline: none;
}

.import-mode-select:focus[b-bfd0bta3p5] {
    border-color: #e63946;
}

/* ========================================================================= */
/* DARK THEME EYE-COMFORT RULES (ADMIN HSK VOCABULARY)                       */
/* ========================================================================= */
[data-theme="dark"] .admin-hsk-vocab-page[b-bfd0bta3p5] {
    color: #f8fafc;
}

[data-theme="dark"] .page-title[b-bfd0bta3p5] {
    color: #f8fafc !important;
}

[data-theme="dark"] .page-subtitle[b-bfd0bta3p5] {
    color: #94a3b8 !important;
}

[data-theme="dark"] .btn-secondary-action[b-bfd0bta3p5] {
    background: #111d33 !important;
    border-color: #223554 !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .btn-secondary-action:hover[b-bfd0bta3p5] {
    background: #182a4a !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .filter-card[b-bfd0bta3p5],
[data-theme="dark"] .table-card[b-bfd0bta3p5] {
    background: #15243f !important;
    border-color: #223554 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .search-box input[b-bfd0bta3p5],
[data-theme="dark"] .level-select[b-bfd0bta3p5],
[data-theme="dark"] .import-mode-select[b-bfd0bta3p5],
[data-theme="dark"] .form-input[b-bfd0bta3p5] {
    background: #111d33 !important;
    border-color: #223554 !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .vocab-table th[b-bfd0bta3p5] {
    background: #111d33 !important;
    color: #94a3b8 !important;
    border-bottom-color: #223554 !important;
}

[data-theme="dark"] .vocab-table td[b-bfd0bta3p5] {
    color: #f8fafc !important;
    border-bottom-color: #223554 !important;
}

[data-theme="dark"] .vocab-table tr:hover td[b-bfd0bta3p5] {
    background: #182a4a !important;
}

[data-theme="dark"] .hanzi-cell[b-bfd0bta3p5] {
    color: #f8fafc !important;
}

[data-theme="dark"] .pinyin-cell[b-bfd0bta3p5] {
    color: #f87171 !important;
}

[data-theme="dark"] .meaning-cell[b-bfd0bta3p5] {
    color: #f8fafc !important;
}

[data-theme="dark"] .modal-card[b-bfd0bta3p5] {
    background: #15243f !important;
    border-color: #223554 !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .modal-header[b-bfd0bta3p5],
[data-theme="dark"] .modal-footer[b-bfd0bta3p5] {
    background: #15243f !important;
    border-color: #223554 !important;
}

[data-theme="dark"] .modal-title[b-bfd0bta3p5] {
    color: #f8fafc !important;
}

[data-theme="dark"] .form-label[b-bfd0bta3p5] {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .btn-modal-cancel[b-bfd0bta3p5] {
    background: #111d33 !important;
    border-color: #223554 !important;
    color: #cbd5e1 !important;
}
/* /Pages/Hsk/HskDashboard.razor.rz.scp.css */
/* ========================================================================= */
/* HSK USER DASHBOARD (CHINESE IMPERIAL RED THEME #DC2626)                   */
/* ========================================================================= */
.hsk-dashboard-container[b-nej4p50vob] {
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Be Vietnam Pro', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #0f172a;
    padding-bottom: 60px;
}

/* Header */
.dashboard-header[b-nej4p50vob] {
    margin-bottom: 24px;
}

.page-title[b-nej4p50vob] {
    font-size: 2.2rem;
    font-weight: 800;
    margin: 0 0 6px 0;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.header-subtitle-wrap[b-nej4p50vob] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.date-subtitle[b-nej4p50vob] {
    margin: 0;
    font-size: 1rem;
    color: #64748b;
    text-transform: capitalize;
}

.level-badge[b-nej4p50vob] {
    background: #fef2f2;
    color: #dc2626;
    border: 1.5px solid #fecaca;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Hero Banner */
.hero-banner[b-nej4p50vob] {
    position: relative;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 50%, #991b1b 100%);
    border-radius: 20px;
    padding: 32px 36px;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(220, 38, 38, 0.25);
    flex-wrap: wrap;
    gap: 20px;
}

.banner-bg-hanzi[b-nej4p50vob] {
    position: absolute;
    right: 250px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 8rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.08);
    pointer-events: none;
    line-height: 1;
    user-select: none;
}

.banner-content[b-nej4p50vob] {
    position: relative;
    z-index: 2;
    max-width: 600px;
}

.banner-badge[b-nej4p50vob] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
    backdrop-filter: blur(4px);
}

.banner-content h2[b-nej4p50vob] {
    font-size: 1.75rem;
    font-weight: 800;
    margin: 0 0 6px 0;
    letter-spacing: -0.01em;
}

.banner-content p[b-nej4p50vob] {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    line-height: 1.5;
}

.btn-banner[b-nej4p50vob] {
    position: relative;
    z-index: 2;
    background: #ffffff;
    color: #dc2626;
    border: none;
    padding: 12px 24px;
    border-radius: 14px;
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-banner:hover[b-nej4p50vob] {
    background: #fff8f8;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* 2-Column Grid Layout */
.dashboard-grid-layout[b-nej4p50vob] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 36px;
}

.dashboard-card[b-nej4p50vob] {
    background: #ffffff;
    border: 1.5px solid #fee2e2;
    border-radius: 20px;
    padding: 24px 26px;
    box-shadow: 0 4px 20px rgba(220, 38, 38, 0.03);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-icon-header[b-nej4p50vob] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.icon-bubble[b-nej4p50vob] {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
}

.icon-bubble.red[b-nej4p50vob] {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.icon-bubble.gold[b-nej4p50vob] {
    background: #fffbeb;
    color: #d97706;
    border: 1px solid #fde68a;
}

.card-icon-header h3[b-nej4p50vob] {
    font-size: 1.2rem;
    font-weight: 800;
    margin: 0 0 2px 0;
    color: #0f172a;
}

.section-desc[b-nej4p50vob] {
    margin: 0;
    font-size: 0.85rem;
    color: #64748b;
}

.subtitle-small[b-nej4p50vob] {
    font-size: 0.72rem;
    font-weight: 800;
    color: #d97706;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Vocab Progress */
.vocab-stats[b-nej4p50vob] {
    margin-bottom: 20px;
}

.vocab-progress-bar[b-nej4p50vob] {
    width: 100%;
    height: 10px;
    background: #f1f5f9;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 10px;
}

.vocab-progress-fill[b-nej4p50vob] {
    height: 100%;
    background: linear-gradient(90deg, #dc2626, #f87171);
    border-radius: 20px;
    transition: width 0.4s ease;
}

.vocab-progress-text[b-nej4p50vob] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: #475569;
}

.pct-badge[b-nej4p50vob] {
    font-weight: 800;
    color: #dc2626;
    background: #fef2f2;
    padding: 2px 8px;
    border-radius: 6px;
}

.btn-card-action[b-nej4p50vob] {
    background: #fffaf9;
    border: 1.5px solid #fecaca;
    color: #dc2626;
    padding: 10px 18px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    transition: all 0.2s ease;
}

.btn-card-action:hover[b-nej4p50vob] {
    background: #dc2626;
    color: #ffffff;
    border-color: #dc2626;
}

/* Results section */
.empty-results-box[b-nej4p50vob] {
    text-align: center;
    padding: 15px 0;
}

.empty-results-box i[b-nej4p50vob] {
    font-size: 2.2rem;
    color: #cbd5e1;
    margin-bottom: 8px;
    display: block;
}

.result-text[b-nej4p50vob] {
    font-size: 0.88rem;
    color: #64748b;
    margin-bottom: 14px;
}

.btn-start-test-mini[b-nej4p50vob] {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    color: #0f172a;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 8px 16px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-start-test-mini:hover[b-nej4p50vob] {
    border-color: #dc2626;
    color: #dc2626;
}

.result-list[b-nej4p50vob] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.result-item[b-nej4p50vob] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f8fafc;
    border-radius: 10px;
    font-size: 0.88rem;
}

.result-score.pass[b-nej4p50vob] { color: #16a34a; font-weight: 700; }
.result-score.fail[b-nej4p50vob] { color: #dc2626; font-weight: 700; }

/* Learning Modules Grid */
.learning-modules-section[b-nej4p50vob] {
    margin-top: 10px;
}

.section-title-wrap[b-nej4p50vob] {
    margin-bottom: 20px;
}

.section-title-wrap h3[b-nej4p50vob] {
    font-size: 1.4rem;
    font-weight: 800;
    margin: 0 0 4px 0;
    color: #0f172a;
}

.modules-grid[b-nej4p50vob] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.module-card[b-nej4p50vob] {
    background: #ffffff;
    border: 1.5px solid #fee2e2;
    border-radius: 18px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none !important;
    color: inherit;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.module-card:hover[b-nej4p50vob] {
    transform: translateY(-4px);
    border-color: #dc2626;
    box-shadow: 0 10px 24px rgba(220, 38, 38, 0.12);
}

.module-icon[b-nej4p50vob] {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #fef2f2;
    color: #dc2626;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.module-card:hover .module-icon[b-nej4p50vob] {
    background: #dc2626;
    color: #ffffff;
}

.module-info[b-nej4p50vob] {
    flex-grow: 1;
}

.module-info h4[b-nej4p50vob] {
    margin: 0 0 4px 0;
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
}

.module-info p[b-nej4p50vob] {
    margin: 0;
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.4;
}

.module-action[b-nej4p50vob] {
    color: #cbd5e1;
    font-size: 1.1rem;
    transition: transform 0.2s ease, color 0.2s ease;
}

.module-card:hover .module-action[b-nej4p50vob] {
    color: #dc2626;
    transform: translateX(4px);
}

/* Responsive */
@media (max-width: 900px) {
    .dashboard-grid-layout[b-nej4p50vob] {
        grid-template-columns: 1fr;
    }
    .modules-grid[b-nej4p50vob] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .modules-grid[b-nej4p50vob] {
        grid-template-columns: 1fr;
    }
    .hero-banner[b-nej4p50vob] {
        padding: 24px;
    }
    .btn-banner[b-nej4p50vob] {
        width: 100%;
        justify-content: center;
    }
}

/* ========================================================================= */
/* DARK THEME EYE-COMFORT RULES (HSK DASHBOARD)                              */
/* ========================================================================= */
[data-theme="dark"] .hsk-dashboard-container[b-nej4p50vob] {
    color: #f8fafc;
}

[data-theme="dark"] .page-title[b-nej4p50vob] {
    color: #f8fafc;
}

[data-theme="dark"] .date-subtitle[b-nej4p50vob] {
    color: #94a3b8;
}

[data-theme="dark"] .level-badge[b-nej4p50vob] {
    background: rgba(220, 38, 38, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #f87171;
}

[data-theme="dark"] .hero-banner[b-nej4p50vob] {
    background: linear-gradient(135deg, #9f1239 0%, #881337 50%, #4c0519 100%) !important;
    border: 1px solid rgba(244, 63, 94, 0.3) !important;
    box-shadow: 0 10px 30px rgba(159, 18, 57, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .banner-bg-hanzi[b-nej4p50vob] {
    color: rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] .btn-banner[b-nej4p50vob] {
    background: rgba(19, 22, 32, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    backdrop-filter: blur(8px) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .btn-banner:hover[b-nej4p50vob] {
    background: #ffffff !important;
    color: #be123c !important;
    transform: translateX(3px) !important;
}

[data-theme="dark"] .dashboard-card[b-nej4p50vob] {
    background: #141721 !important;
    border-color: #232838 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] .card-icon-header h3[b-nej4p50vob] {
    color: #f8fafc;
}

[data-theme="dark"] .section-desc[b-nej4p50vob] {
    color: #94a3b8;
}

[data-theme="dark"] .vocab-progress-bar[b-nej4p50vob] {
    background: #1a1e2b !important;
}

[data-theme="dark"] .vocab-progress-text[b-nej4p50vob] {
    color: #cbd5e1;
}

[data-theme="dark"] .pct-badge[b-nej4p50vob] {
    background: rgba(244, 63, 94, 0.15);
    color: #fb7185;
}

[data-theme="dark"] .btn-card-action[b-nej4p50vob] {
    background: #191c28 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #fb7185 !important;
}

[data-theme="dark"] .btn-card-action:hover[b-nej4p50vob] {
    background: #be123c !important;
    border-color: #be123c !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-start-test-mini[b-nej4p50vob] {
    background: #191c28 !important;
    border-color: #232838 !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .btn-start-test-mini:hover[b-nej4p50vob] {
    background: #1d2230 !important;
    border-color: #fb7185 !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .icon-bubble.red[b-nej4p50vob] {
    background: rgba(244, 63, 94, 0.15);
    border-color: rgba(244, 63, 94, 0.3);
    color: #fb7185;
}

[data-theme="dark"] .icon-bubble.gold[b-nej4p50vob] {
    background: rgba(217, 119, 6, 0.15);
    border-color: rgba(245, 158, 11, 0.3);
    color: #fbbf24;
}

[data-theme="dark"] .module-card[b-nej4p50vob] {
    background: #141721 !important;
    border-color: #232838 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] .module-card:hover[b-nej4p50vob] {
    border-color: rgba(244, 63, 94, 0.5) !important;
    background: #1a1e2b !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 16px rgba(244, 63, 94, 0.15) !important;
}

[data-theme="dark"] .module-info h4[b-nej4p50vob] {
    color: #f8fafc;
}

[data-theme="dark"] .module-info p[b-nej4p50vob] {
    color: #94a3b8;
}

[data-theme="dark"] .module-icon[b-nej4p50vob] {
    background: #191c28 !important;
    border: 1px solid #232838 !important;
    color: #fb7185 !important;
}
/* /Pages/Hsk/HskOverview.razor.rz.scp.css */
/* ===== HSK DASHBOARD ===== */

.hsk-page[b-iqcukrw2fy] {
    padding: 0;
    color: var(--ig-text);
    font-family: 'Inter', 'Roboto', sans-serif;
}

/* ── Hero Banner ── */
.hsk-hero[b-iqcukrw2fy] {
    position: relative;
    background: linear-gradient(135deg, #c0392b 0%, #8e1e1e 60%, #4a0e0e 100%);
    border-radius: 20px;
    padding: 60px 50px;
    margin-bottom: 50px;
    overflow: hidden;
    color: #fff;
}

.hero-bg-chars[b-iqcukrw2fy] {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 40px;
    gap: 10px;
    pointer-events: none;
    opacity: 0.08;
    font-size: 7rem;
    font-weight: 900;
    letter-spacing: -5px;
    flex-wrap: wrap;
    overflow: hidden;
}

.hero-content[b-iqcukrw2fy] {
    position: relative;
    z-index: 1;
    max-width: 650px;
}

.hero-badge[b-iqcukrw2fy] {
    display: inline-block;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.2);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.hero-title[b-iqcukrw2fy] {
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 16px;
    letter-spacing: -1px;
}

.hero-title .highlight[b-iqcukrw2fy] {
    color: #ffb3b3;
}

.hero-desc[b-iqcukrw2fy] {
    font-size: 1.05rem;
    color: rgba(255,255,255,0.75);
    margin-bottom: 30px;
    line-height: 1.6;
}

.hero-stats[b-iqcukrw2fy] {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.stat-chip[b-iqcukrw2fy] {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 12px;
    padding: 12px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 90px;
    backdrop-filter: blur(4px);
}

.chip-num[b-iqcukrw2fy] {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
}

.chip-label[b-iqcukrw2fy] {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.7);
    margin-top: 4px;
}

/* ── Section Headers ── */
.section-header[b-iqcukrw2fy] {
    margin-bottom: 30px;
}

.section-header h2[b-iqcukrw2fy] {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--ig-text);
}

.section-header p[b-iqcukrw2fy] {
    color: var(--ig-text-secondary);
    margin: 0;
    font-size: 0.95rem;
}

/* ── HSK Level Cards ── */
.levels-section[b-iqcukrw2fy] {
    margin-bottom: 50px;
}

.levels-grid[b-iqcukrw2fy] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.level-card[b-iqcukrw2fy] {
    background: var(--ig-card-bg);
    border: 1px solid var(--ig-border);
    border-radius: 16px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    position: relative;
    overflow: hidden;
}

.level-card[b-iqcukrw2fy]::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    border-radius: 16px 16px 0 0;
}

.level-1[b-iqcukrw2fy]::before { background: #e63946; }
.level-2[b-iqcukrw2fy]::before { background: #f4a261; }
.level-3[b-iqcukrw2fy]::before { background: #2a9d8f; }
.level-4[b-iqcukrw2fy]::before { background: #457b9d; }
.level-5[b-iqcukrw2fy]::before { background: #6a4c93; }
.level-6[b-iqcukrw2fy]::before { background: #e9c46a; }

.level-card:hover:not(.coming-soon)[b-iqcukrw2fy] {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.1);
    border-color: #c0392b;
}

.level-card.coming-soon[b-iqcukrw2fy] {
    opacity: 0.65;
}

.level-header[b-iqcukrw2fy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.level-badge[b-iqcukrw2fy] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ig-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.soon-tag[b-iqcukrw2fy] {
    font-size: 0.7rem;
    background: rgba(0,0,0,0.06);
    color: var(--ig-text-secondary);
    padding: 2px 8px;
    border-radius: 20px;
    font-weight: 600;
}

.level-hanzi[b-iqcukrw2fy] {
    font-size: 3.5rem;
    line-height: 1;
    font-weight: 900;
    color: #c0392b;
    opacity: 0.8;
}

.level-name[b-iqcukrw2fy] {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
    color: var(--ig-text);
}

.level-desc[b-iqcukrw2fy] {
    font-size: 0.85rem;
    color: var(--ig-text-secondary);
    line-height: 1.5;
    margin: 0;
    flex-grow: 1;
}

.level-meta[b-iqcukrw2fy] {
    display: flex;
    gap: 16px;
    margin-top: 4px;
}

.meta-item[b-iqcukrw2fy] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.82rem;
    color: var(--ig-text-secondary);
}

.level-tags[b-iqcukrw2fy] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.tag[b-iqcukrw2fy] {
    font-size: 0.72rem;
    background: rgba(192,57,43,0.1);
    color: #c0392b;
    padding: 3px 8px;
    border-radius: 20px;
    font-weight: 500;
}

.level-btn[b-iqcukrw2fy] {
    display: block;
    text-align: center;
    padding: 10px 0;
    background: #c0392b;
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    margin-top: 8px;
    transition: background 0.2s, transform 0.2s;
}

.level-btn:hover:not(.btn-disabled)[b-iqcukrw2fy] {
    background: #a93226;
    transform: translateY(-1px);
}

.level-btn.btn-disabled[b-iqcukrw2fy] {
    background: var(--ig-border);
    color: var(--ig-text-secondary);
    cursor: not-allowed;
}

/* ── Learning Modules ── */
.modules-section[b-iqcukrw2fy] {
    margin-bottom: 50px;
}

.modules-grid[b-iqcukrw2fy] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.module-card[b-iqcukrw2fy] {
    background: var(--ig-card-bg);
    border: 1px solid var(--ig-border);
    border-radius: 14px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.module-card:hover:not(.disabled)[b-iqcukrw2fy] {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    border-color: #c0392b;
}

.module-card.disabled[b-iqcukrw2fy] {
    opacity: 0.55;
    cursor: default;
}

.module-icon-wrap[b-iqcukrw2fy] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.module-info[b-iqcukrw2fy] {
    flex-grow: 1;
}

.module-info h4[b-iqcukrw2fy] {
    margin: 0 0 4px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ig-text);
}

.module-info p[b-iqcukrw2fy] {
    margin: 0;
    font-size: 0.8rem;
    color: var(--ig-text-secondary);
    line-height: 1.4;
}

.module-status[b-iqcukrw2fy] {
    flex-shrink: 0;
}

.badge-soon[b-iqcukrw2fy] {
    font-size: 0.68rem;
    background: var(--ig-border);
    color: var(--ig-text-secondary);
    padding: 3px 8px;
    border-radius: 20px;
    font-weight: 600;
    white-space: nowrap;
}

.text-primary[b-iqcukrw2fy] { color: #c0392b; }

/* ── Vocab Preview ── */
.vocab-preview-section[b-iqcukrw2fy] {
    margin-bottom: 50px;
}

.vocab-grid[b-iqcukrw2fy] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.vocab-card[b-iqcukrw2fy] {
    background: var(--ig-card-bg);
    border: 1px solid var(--ig-border);
    border-radius: 14px;
    padding: 20px;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: default;
}

.vocab-card:hover[b-iqcukrw2fy] {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(192,57,43,0.12);
    border-color: rgba(192,57,43,0.4);
}

.vocab-hanzi[b-iqcukrw2fy] {
    font-size: 2.2rem;
    font-weight: 900;
    color: #c0392b;
    line-height: 1.2;
    margin-bottom: 6px;
}

.vocab-pinyin[b-iqcukrw2fy] {
    font-size: 0.85rem;
    color: var(--ig-text-secondary);
    margin-bottom: 8px;
    font-style: italic;
}

.vocab-meaning[b-iqcukrw2fy] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ig-text);
    margin-bottom: 10px;
}

.vocab-example[b-iqcukrw2fy] {
    font-size: 0.78rem;
    color: var(--ig-text-secondary);
    line-height: 1.4;
    border-top: 1px solid var(--ig-border);
    padding-top: 10px;
    margin-top: auto;
}

.see-more-wrap[b-iqcukrw2fy] {
    text-align: center;
    margin-top: 24px;
}

.btn-see-more[b-iqcukrw2fy] {
    display: inline-block;
    padding: 12px 32px;
    border: 1.5px solid #c0392b;
    color: #c0392b;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.2s, color 0.2s;
}

.btn-see-more:hover[b-iqcukrw2fy] {
    background: #c0392b;
    color: #fff;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .levels-grid[b-iqcukrw2fy],
    .modules-grid[b-iqcukrw2fy] {
        grid-template-columns: repeat(2, 1fr);
    }
    .vocab-grid[b-iqcukrw2fy] {
        grid-template-columns: repeat(2, 1fr);
    }
    .hero-title[b-iqcukrw2fy] {
        font-size: 2rem;
    }
}

@media (max-width: 600px) {
    .hsk-hero[b-iqcukrw2fy] {
        padding: 40px 24px;
    }
    .levels-grid[b-iqcukrw2fy],
    .modules-grid[b-iqcukrw2fy],
    .vocab-grid[b-iqcukrw2fy] {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   DARK MODE OVERRIDES (OBSIDIAN NAVY THEME)
   ========================================================================== */
[data-theme="dark"] .level-card[b-iqcukrw2fy] {
    background: #15243f;
    border-color: #223554;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .level-card:hover:not(.coming-soon)[b-iqcukrw2fy] {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
    border-color: #e63946;
}

[data-theme="dark"] .level-name[b-iqcukrw2fy] {
    color: #f8fafc;
}

[data-theme="dark"] .level-desc[b-iqcukrw2fy] {
    color: #94a3b8;
}

[data-theme="dark"] .soon-tag[b-iqcukrw2fy] {
    background: #111d33;
    color: #94a3b8;
    border: 1px solid #223554;
}

[data-theme="dark"] .module-card[b-iqcukrw2fy] {
    background: #15243f;
    border-color: #223554;
}

[data-theme="dark"] .module-card:hover:not(.disabled)[b-iqcukrw2fy] {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    border-color: #e63946;
}

[data-theme="dark"] .module-info h4[b-iqcukrw2fy] {
    color: #f8fafc;
}

[data-theme="dark"] .module-info p[b-iqcukrw2fy] {
    color: #94a3b8;
}

[data-theme="dark"] .vocab-card[b-iqcukrw2fy] {
    background: #15243f;
    border-color: #223554;
}

[data-theme="dark"] .vocab-card:hover[b-iqcukrw2fy] {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    border-color: #e63946;
}

[data-theme="dark"] .vocab-meaning[b-iqcukrw2fy] {
    color: #cbd5e1;
}

[data-theme="dark"] .badge-soon[b-iqcukrw2fy] {
    background: #111d33;
    color: #94a3b8;
    border: 1px solid #223554;
}
/* /Pages/Hsk/HskVocabulary.razor.rz.scp.css */
/* ========================================================================= */
/* HSK VOCABULARY - CHINESE IMPERIAL RED THEME                               */
/* ========================================================================= */
.hsk-vocab-container[b-1yy2zm9fko] {
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Be Vietnam Pro', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #0f172a;
    padding-bottom: 60px;
}

/* Header */
.vocab-header[b-1yy2zm9fko] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.header-left[b-1yy2zm9fko] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-icon-badge[b-1yy2zm9fko] {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.32);
    flex-shrink: 0;
}

.vocab-title[b-1yy2zm9fko] {
    font-size: 1.85rem;
    font-weight: 800;
    margin: 0 0 4px 0;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.vocab-subtitle[b-1yy2zm9fko] {
    margin: 0;
    font-size: 0.95rem;
    color: #64748b;
}

/* Level Tabs */
.level-tabs[b-1yy2zm9fko] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.level-tab[b-1yy2zm9fko] {
    padding: 8px 18px;
    border: 1.5px solid #fecaca;
    background: #ffffff;
    color: #475569;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 700;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.level-tab:hover[b-1yy2zm9fko] {
    border-color: #dc2626;
    color: #dc2626;
    background: #fef2f2;
}

.level-tab.active[b-1yy2zm9fko] {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    border-color: #b91c1c;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

/* Toolbar */
.toolbar-card[b-1yy2zm9fko] {
    background: #ffffff;
    border: 1.5px solid #fee2e2;
    border-radius: 18px;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 16px;
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.03);
}

.search-box-wrapper[b-1yy2zm9fko] {
    position: relative;
    width: 360px;
}

.search-icon[b-1yy2zm9fko] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #f87171;
    font-size: 0.95rem;
}

.search-box-wrapper input[b-1yy2zm9fko] {
    width: 100%;
    padding: 10px 16px 10px 40px;
    border-radius: 12px;
    border: 1.5px solid #fecaca;
    font-size: 0.92rem;
    background: #ffffff;
    color: #0f172a;
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.search-box-wrapper input:focus[b-1yy2zm9fko] {
    border-color: #dc2626;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.15);
}

.stats-counter[b-1yy2zm9fko] {
    font-size: 0.92rem;
    color: #475569;
}

.stats-counter b[b-1yy2zm9fko] {
    color: #dc2626;
}

/* Grid of Vocab Cards */
.vocab-grid[b-1yy2zm9fko] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.vocab-card[b-1yy2zm9fko] {
    background: #ffffff;
    border: 1.5px solid #fee2e2;
    border-radius: 20px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.03);
    position: relative;
}

.vocab-card:hover[b-1yy2zm9fko] {
    transform: translateY(-4px);
    border-color: #dc2626;
    box-shadow: 0 10px 25px rgba(220, 38, 38, 0.12);
}

.vocab-card.is-learned[b-1yy2zm9fko] {
    border-color: #86efac;
    background: #f0fdf4;
}

.card-top-row[b-1yy2zm9fko] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.vocab-level-tag[b-1yy2zm9fko] {
    background: #fef2f2;
    color: #dc2626;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid #fecaca;
}

.btn-audio[b-1yy2zm9fko] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.btn-audio:hover[b-1yy2zm9fko] {
    background: #dc2626;
    color: #ffffff;
    transform: scale(1.1);
}

.vocab-front[b-1yy2zm9fko] {
    text-align: center;
    padding: 10px 0 16px;
    border-bottom: 1px dashed #fee2e2;
    margin-bottom: 16px;
}

.hanzi[b-1yy2zm9fko] {
    font-size: 2.8rem;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.1;
    margin-bottom: 4px;
}

.pinyin[b-1yy2zm9fko] {
    font-size: 1.05rem;
    font-weight: 700;
    color: #dc2626;
}

.vocab-back[b-1yy2zm9fko] {
    flex-grow: 1;
    margin-bottom: 18px;
}

.meaning[b-1yy2zm9fko] {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 6px;
}

.word-type[b-1yy2zm9fko] {
    display: inline-block;
    background: #f1f5f9;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    margin-bottom: 10px;
}

.example-box[b-1yy2zm9fko] {
    background: #fff8f8;
    border-left: 3px solid #dc2626;
    padding: 8px 12px;
    border-radius: 0 8px 8px 0;
    font-size: 0.85rem;
}

.ex-hanzi[b-1yy2zm9fko] {
    font-weight: 600;
    color: #0f172a;
}

.ex-pinyin[b-1yy2zm9fko] {
    color: #dc2626;
    font-size: 0.78rem;
}

.ex-meaning[b-1yy2zm9fko] {
    color: #64748b;
    font-size: 0.8rem;
    margin-top: 2px;
}

.vocab-actions[b-1yy2zm9fko] {
    margin-top: auto;
}

.learn-btn[b-1yy2zm9fko] {
    width: 100%;
    padding: 9px;
    border-radius: 12px;
    border: 1.5px solid #fecaca;
    background: #ffffff;
    color: #dc2626;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
}

.learn-btn:hover[b-1yy2zm9fko] {
    background: #dc2626;
    color: #ffffff;
    border-color: #dc2626;
}

.learn-btn.learned[b-1yy2zm9fko] {
    background: #16a34a;
    border-color: #16a34a;
    color: #ffffff;
}

/* Loading & Empty States */
.loading-state[b-1yy2zm9fko], .empty-state[b-1yy2zm9fko] {
    padding: 60px 20px;
    text-align: center;
}

.custom-spinner[b-1yy2zm9fko] {
    width: 36px;
    height: 36px;
    border: 3px solid #fee2e2;
    border-top-color: #dc2626;
    border-radius: 50%;
    animation: spin-b-1yy2zm9fko 0.8s linear infinite;
    margin: 0 auto 16px;
}

@keyframes spin-b-1yy2zm9fko { to { transform: rotate(360deg); } }

.empty-state i[b-1yy2zm9fko] {
    font-size: 3rem;
    color: #fca5a5;
    margin-bottom: 12px;
    display: block;
}

.empty-state h4[b-1yy2zm9fko] {
    margin: 0 0 6px;
    color: #0f172a;
    font-weight: 700;
}

.empty-state p[b-1yy2zm9fko] {
    color: #64748b;
    margin: 0;
}

/* Responsive */
@media (max-width: 992px) {
    .vocab-grid[b-1yy2zm9fko] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .vocab-grid[b-1yy2zm9fko] {
        grid-template-columns: 1fr;
    }
    .vocab-header[b-1yy2zm9fko] {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ===== Toolbar actions (shuffle / hide-learned / flashcard) ===== */
.toolbar-actions[b-1yy2zm9fko] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.hide-learned-toggle[b-1yy2zm9fko] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: #475569;
    cursor: pointer;
    user-select: none;
}

.btn-shuffle[b-1yy2zm9fko] {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    color: #475569;
    padding: 9px 14px;
    border-radius: 12px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.btn-shuffle:hover[b-1yy2zm9fko] {
    border-color: #dc2626;
    color: #dc2626;
    background: #fef2f2;
}

.btn-shuffle.active[b-1yy2zm9fko] {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    border-color: transparent;
    color: #ffffff;
}

.flashcard-starter[b-1yy2zm9fko] {
    display: inline-flex;
    align-items: stretch;
    gap: 8px;
}

.session-size-select[b-1yy2zm9fko] {
    border: 1.5px solid #cbd5e1;
    border-radius: 12px;
    padding: 9px 8px;
    font-size: 0.88rem;
    color: #334155;
    outline: none;
    cursor: pointer;
    background: #fff;
}

.btn-flashcard-start[b-1yy2zm9fko] {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    color: #ffffff;
    border: none;
    padding: 9px 18px;
    border-radius: 12px;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
    transition: transform 0.15s, box-shadow 0.2s;
}

.btn-flashcard-start:hover[b-1yy2zm9fko] {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(220, 38, 38, 0.4);
}

/* ===== Flashcard Overlay ===== */
.flashcard-overlay[b-1yy2zm9fko] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.flashcard-panel[b-1yy2zm9fko] {
    background: #ffffff;
    width: min(560px, 94vw);
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 24px;
    padding: 20px 22px 26px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.fc-topbar[b-1yy2zm9fko] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fc-counter[b-1yy2zm9fko] {
    font-size: 0.95rem;
    color: #64748b;
}

.fc-counter b[b-1yy2zm9fko] {
    color: #dc2626;
    font-size: 1.15rem;
}

.fc-close[b-1yy2zm9fko] {
    border: none;
    background: #f1f5f9;
    color: #64748b;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
}

.fc-close:hover[b-1yy2zm9fko] {
    background: #fee2e2;
    color: #dc2626;
}

.fc-progress-track[b-1yy2zm9fko] {
    height: 8px;
    border-radius: 99px;
    background: #f1f5f9;
    overflow: hidden;
}

.fc-progress-fill[b-1yy2zm9fko] {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, #dc2626, #ef4444);
    transition: width 0.3s ease;
}

/* Card flip scene */
.fc-stage[b-1yy2zm9fko] {
    display: flex;
    justify-content: center;
}

.fc-card-scene[b-1yy2zm9fko] {
    perspective: 1200px;
    width: 100%;
    max-width: 420px;
    height: 340px;
    cursor: pointer;
}

.fc-card-inner[b-1yy2zm9fko] {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.5s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.fc-card-inner.flipped[b-1yy2zm9fko] {
    transform: rotateY(180deg);
}

.fc-face[b-1yy2zm9fko] {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 22px;
}

.fc-front[b-1yy2zm9fko] {
    background: linear-gradient(160deg, #ffffff, #fef2f2);
    border: 1.5px solid #fecaca;
    box-shadow: 0 10px 30px rgba(220, 38, 38, 0.08);
}

.fc-back[b-1yy2zm9fko] {
    background: linear-gradient(160deg, #ffffff, #f8fafc);
    border: 1.5px solid #e2e8f0;
    transform: rotateY(180deg);
    justify-content: flex-start;
    overflow-y: auto;
}

.fc-level-tag[b-1yy2zm9fko] {
    position: absolute;
    top: 14px;
    left: 14px;
    background: #fef2f2;
    color: #dc2626;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
}

.fc-audio[b-1yy2zm9fko] {
    position: absolute;
    top: 12px;
    right: 12px;
}

.fc-hanzi[b-1yy2zm9fko] {
    font-size: 3.6rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.15;
    text-align: center;
    word-break: break-word;
}

.fc-pinyin[b-1yy2zm9fko] {
    font-size: 1.15rem;
    color: #dc2626;
    text-align: center;
}

.fc-tap-hint[b-1yy2zm9fko] {
    position: absolute;
    bottom: 14px;
    font-size: 0.8rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 6px;
}

.fc-back-meaning[b-1yy2zm9fko] {
    font-size: 1.45rem;
    font-weight: 700;
    color: #0f172a;
    text-align: center;
}

.fc-word-type[b-1yy2zm9fko] {
    background: #f1f5f9;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 6px;
}

.fc-example[b-1yy2zm9fko] {
    margin-top: 6px;
    border-left: 3px solid #fca5a5;
    background: #fff7f7;
    border-radius: 8px;
    padding: 10px 12px;
    width: 100%;
}

.fc-example .ex-hanzi[b-1yy2zm9fko] { font-size: 1.02rem; font-weight: 600; color: #0f172a; }
.fc-example .ex-pinyin[b-1yy2zm9fko] { font-size: 0.85rem; color: #dc2626; margin-top: 2px; }
.fc-example .ex-meaning[b-1yy2zm9fko] { font-size: 0.85rem; color: #64748b; margin-top: 2px; }

/* Actions under card */
.fc-actions[b-1yy2zm9fko] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.fc-btn[b-1yy2zm9fko] {
    border: none;
    padding: 12px 22px;
    border-radius: 14px;
    font-size: 0.98rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.15s, box-shadow 0.2s;
}

.fc-btn:hover[b-1yy2zm9fko] {
    transform: translateY(-1px);
}

.fc-btn.no[b-1yy2zm9fko] {
    background: #ffffff;
    border: 1.5px solid #fca5a5;
    color: #dc2626;
}

.fc-btn.no:hover[b-1yy2zm9fko] {
    background: #fef2f2;
}

.fc-btn.yes[b-1yy2zm9fko] {
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(22, 163, 74, 0.3);
}

.fc-btn.retry[b-1yy2zm9fko] {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    color: #ffffff;
}

.fc-btn.finish[b-1yy2zm9fko] {
    background: #f1f5f9;
    color: #334155;
}

.fc-summary-actions.center[b-1yy2zm9fko] {
    justify-content: center;
}

/* Summary screen */
.fc-summary-head[b-1yy2zm9fko] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #d97706;
}

.fc-summary-head i[b-1yy2zm9fko] {
    font-size: 1.6rem;
}

.fc-summary-head h3[b-1yy2zm9fko] {
    font-size: 1.2rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}

.fc-summary-stats[b-1yy2zm9fko] {
    display: flex;
    gap: 12px;
}

.stat-chip[b-1yy2zm9fko] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 14px;
    padding: 12px 14px;
}

.stat-chip.remember[b-1yy2zm9fko] {
    background: #f0fdf4;
    border: 1.5px solid #bbf7d0;
    color: #15803d;
}

.stat-chip.forget[b-1yy2zm9fko] {
    background: #fef2f2;
    border: 1.5px solid #fecaca;
    color: #dc2626;
}

.stat-chip b[b-1yy2zm9fko] {
    font-size: 1.5rem;
    display: block;
    line-height: 1;
}

.stat-chip span[b-1yy2zm9fko] {
    font-size: 0.82rem;
    opacity: 0.85;
}

.fc-unlearned-title[b-1yy2zm9fko] {
    font-size: 0.9rem;
    font-weight: 700;
    color: #b91c1c;
    margin: 6px 0 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.fc-unlearned-list[b-1yy2zm9fko] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 260px;
    overflow-y: auto;
}

.fc-unlearned-item[b-1yy2zm9fko] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #fffafa;
    border: 1.5px solid #fee2e2;
    border-radius: 12px;
    padding: 10px 12px;
}

.ul-hanzi[b-1yy2zm9fko] {
    font-weight: 700;
    font-size: 1.05rem;
    color: #0f172a;
    margin-right: 8px;
}

.ul-pinyin[b-1yy2zm9fko] {
    color: #dc2626;
    font-size: 0.85rem;
    margin-right: 8px;
}

.ul-meaning[b-1yy2zm9fko] {
    color: #64748b;
    font-size: 0.85rem;
}

.ul-mark-btn[b-1yy2zm9fko] {
    white-space: nowrap;
    border: none;
    background: #16a34a;
    color: #ffffff;
    border-radius: 10px;
    padding: 7px 12px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}

.fc-perfect[b-1yy2zm9fko] {
    text-align: center;
    color: #16a34a;
    background: #f0fdf4;
    border-radius: 14px;
    padding: 20px;
}

.fc-perfect i[b-1yy2zm9fko] {
    font-size: 2.2rem;
}

@media (max-width: 640px) {
    .fc-card-scene[b-1yy2zm9fko] { height: 300px; }
    .fc-hanzi[b-1yy2zm9fko] { font-size: 2.8rem; }
    .fc-btn[b-1yy2zm9fko] { padding: 11px 16px; }
}

/* Pagination Container */
.pagination-container[b-1yy2zm9fko] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 8px 12px 8px;
    margin-top: 16px;
    flex-wrap: wrap;
    gap: 14px;
}

.pagination-summary[b-1yy2zm9fko] {
    font-size: 0.9rem;
    color: #64748b;
}

.pagination-summary strong[b-1yy2zm9fko] {
    color: #0f172a;
}

.pagination-buttons[b-1yy2zm9fko] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-page[b-1yy2zm9fko] {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    color: #334155;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.btn-page:hover:not(:disabled)[b-1yy2zm9fko] {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #dc2626;
}

.btn-page:disabled[b-1yy2zm9fko] {
    opacity: 0.35;
    cursor: not-allowed;
}

.btn-page.active[b-1yy2zm9fko] {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #ffffff;
    border-color: #dc2626;
    box-shadow: 0 3px 10px rgba(220, 38, 38, 0.35);
}

.page-ellipsis[b-1yy2zm9fko] {
    padding: 0 6px;
    color: #94a3b8;
    font-weight: 700;
}

/* ========================================================================= */
/* HSK VOCABULARY - MODE SWITCHER & TOPIC LEARNING HUB                       */
/* ========================================================================= */

/* ─── Mode Switcher Bar ─── */
.mode-tabs[b-1yy2zm9fko] {
    display: flex;
    gap: 10px;
    background: #f1f5f9;
    padding: 5px;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
}

.mode-tab[b-1yy2zm9fko] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mode-tab:hover[b-1yy2zm9fko] {
    color: #0f172a;
    background: rgba(255, 255, 255, 0.6);
}

.mode-tab.active[b-1yy2zm9fko] {
    background: #ffffff;
    color: #dc2626;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.mode-badge-new[b-1yy2zm9fko] {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 12px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.level-bar-wrapper[b-1yy2zm9fko] {
    margin-bottom: 20px;
}

/* ─── Topic Hub Header ─── */
.topic-hub-header[b-1yy2zm9fko] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 26px;
    flex-wrap: wrap;
    gap: 16px;
    background: linear-gradient(135deg, #ffffff 0%, #fef2f2 100%);
    border: 1.5px solid #fee2e2;
    border-radius: 18px;
    padding: 20px 24px;
    box-shadow: 0 4px 20px rgba(220, 38, 38, 0.04);
}

.topic-hub-title-box .topic-hub-title[b-1yy2zm9fko] {
    font-size: 1.35rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 6px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.topic-hub-title-box .topic-hub-title i[b-1yy2zm9fko] {
    color: #dc2626;
}

.topic-hub-sub[b-1yy2zm9fko] {
    margin: 0;
    font-size: 0.9rem;
    color: #64748b;
}

.topic-search-wrap[b-1yy2zm9fko] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    border: 1.5px solid #fca5a5;
    border-radius: 12px;
    padding: 8px 14px;
    min-width: 280px;
}

.topic-search-wrap i[b-1yy2zm9fko] {
    color: #dc2626;
    font-size: 0.95rem;
}

.topic-search-wrap input[b-1yy2zm9fko] {
    border: none;
    outline: none;
    width: 100%;
    font-size: 0.88rem;
    color: #0f172a;
    background: transparent;
}

/* ─── Topic Cards Grid ─── */
.topic-cards-grid[b-1yy2zm9fko] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.topic-card[b-1yy2zm9fko] {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 18px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    position: relative;
    overflow: hidden;
}

.topic-card:hover[b-1yy2zm9fko] {
    transform: translateY(-4px);
    border-color: var(--topic-accent, #dc2626);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

.topic-card-top[b-1yy2zm9fko] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.topic-icon-circle[b-1yy2zm9fko] {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
}

.topic-level-tag[b-1yy2zm9fko] {
    font-size: 0.72rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 20px;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.topic-card-body[b-1yy2zm9fko] {
    flex-grow: 1;
    margin-bottom: 16px;
}

.topic-name-vi[b-1yy2zm9fko] {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 6px 0;
}

.topic-name-zh[b-1yy2zm9fko] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
}

.topic-name-zh .zh-hanzi[b-1yy2zm9fko] {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--topic-accent, #dc2626);
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.topic-name-zh .zh-pinyin[b-1yy2zm9fko] {
    font-size: 0.82rem;
    color: #64748b;
    font-weight: 600;
}

.topic-desc[b-1yy2zm9fko] {
    font-size: 0.84rem;
    color: #64748b;
    line-height: 1.45;
    margin: 0;
}

/* Topic Progress inside Card */
.topic-progress-wrap[b-1yy2zm9fko] {
    margin-bottom: 16px;
    padding-top: 12px;
    border-top: 1px dashed #e2e8f0;
}

.topic-progress-meta[b-1yy2zm9fko] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.76rem;
    color: #64748b;
    margin-bottom: 6px;
}

.topic-progress-meta b[b-1yy2zm9fko] {
    color: #0f172a;
}

.topic-progress-track[b-1yy2zm9fko] {
    height: 7px;
    background: #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}

.topic-progress-fill[b-1yy2zm9fko] {
    height: 100%;
    border-radius: 10px;
    transition: width 0.4s ease;
}

/* Topic Card Actions */
.topic-card-actions[b-1yy2zm9fko] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-topic-explore[b-1yy2zm9fko] {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    color: #0f172a;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-topic-explore:hover[b-1yy2zm9fko] {
    background: var(--topic-accent, #dc2626);
    border-color: var(--topic-accent, #dc2626);
    color: #ffffff;
}

.btn-topic-fc[b-1yy2zm9fko] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 9px 14px;
    border-radius: 10px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #2563eb;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-topic-fc:hover[b-1yy2zm9fko] {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}

/* ─── Topic Detail View ─── */
.btn-back-topics[b-1yy2zm9fko] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 10px;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    color: #334155;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 20px;
    transition: all 0.15s ease;
}

.btn-back-topics:hover[b-1yy2zm9fko] {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #0f172a;
}

.topic-hero-card[b-1yy2zm9fko] {
    background: #ffffff;
    border-radius: 20px;
    border: 1.5px solid #e2e8f0;
    border-left: 6px solid var(--topic-accent, #dc2626);
    padding: 26px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 24px;
    box-shadow: 0 4px 22px rgba(0, 0, 0, 0.05);
}

.topic-hero-left[b-1yy2zm9fko] {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    max-width: 600px;
}

.topic-hero-icon[b-1yy2zm9fko] {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.topic-hero-tags[b-1yy2zm9fko] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.badge-topic-level[b-1yy2zm9fko] {
    font-size: 0.74rem;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 16px;
    background: #f1f5f9;
    color: #475569;
}

.badge-topic-active[b-1yy2zm9fko] {
    font-size: 0.74rem;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 16px;
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.topic-hero-title[b-1yy2zm9fko] {
    font-size: 1.55rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 6px 0;
}

.topic-hero-zh[b-1yy2zm9fko] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
}

.topic-hero-zh .hero-hanzi[b-1yy2zm9fko] {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--topic-accent, #dc2626);
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.topic-hero-zh .hero-pinyin[b-1yy2zm9fko] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #64748b;
}

.topic-hero-desc[b-1yy2zm9fko] {
    font-size: 0.9rem;
    color: #475569;
    margin: 0;
    line-height: 1.5;
}

.topic-hero-right[b-1yy2zm9fko] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 280px;
}

.hero-stats-box[b-1yy2zm9fko] {
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 12px 18px;
}

.hero-stat-item[b-1yy2zm9fko] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-stat-num[b-1yy2zm9fko] {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
}

.hero-stat-lbl[b-1yy2zm9fko] {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 600;
}

.hero-stat-divider[b-1yy2zm9fko] {
    width: 1px;
    height: 28px;
    background: #cbd5e1;
}

.hero-progress-bar-wrap[b-1yy2zm9fko] {
    height: 8px;
    background: #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}

.hero-progress-fill[b-1yy2zm9fko] {
    height: 100%;
    border-radius: 10px;
    transition: width 0.4s ease;
}

.btn-hero-fc[b-1yy2zm9fko] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 12px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff;
    font-size: 0.92rem;
    font-weight: 800;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.28);
    transition: all 0.2s ease;
}

.btn-hero-fc:hover[b-1yy2zm9fko] {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35);
}

/* Flashcard Topbar Topic Tag */
.fc-topbar-info[b-1yy2zm9fko] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fc-topic-chip[b-1yy2zm9fko] {
    font-size: 0.76rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* ========================================================================= */
/* DARK THEME EYE-COMFORT RULES (HSK VOCABULARY)                             */
/* ========================================================================= */
[data-theme="dark"] .hsk-vocab-container[b-1yy2zm9fko] {
    color: #f8fafc;
}

[data-theme="dark"] .vocab-title[b-1yy2zm9fko] {
    color: #f8fafc !important;
}

[data-theme="dark"] .vocab-subtitle[b-1yy2zm9fko] {
    color: #94a3b8 !important;
}

/* Mode Switcher Tabs */
[data-theme="dark"] .mode-tabs[b-1yy2zm9fko] {
    background: #111d33 !important;
    border-color: #223554 !important;
}

[data-theme="dark"] .mode-tab[b-1yy2zm9fko] {
    color: #94a3b8 !important;
}

[data-theme="dark"] .mode-tab:hover[b-1yy2zm9fko] {
    color: #f8fafc !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] .mode-tab.active[b-1yy2zm9fko] {
    background: #15243f !important;
    color: #f87171 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

/* Level Tabs */
[data-theme="dark"] .level-tab[b-1yy2zm9fko] {
    background: #15243f !important;
    border-color: #223554 !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .level-tab:hover[b-1yy2zm9fko] {
    background: #182a4a !important;
    border-color: #f87171 !important;
    color: #f87171 !important;
}

[data-theme="dark"] .level-tab.active[b-1yy2zm9fko] {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
    border-color: #b91c1c !important;
    color: #ffffff !important;
}

/* Toolbar */
[data-theme="dark"] .toolbar-card[b-1yy2zm9fko] {
    background: #15243f !important;
    border-color: #223554 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .search-box-wrapper input[b-1yy2zm9fko] {
    background: #111d33 !important;
    border-color: #223554 !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .search-box-wrapper input[b-1yy2zm9fko]::placeholder {
    color: #64748b;
}

[data-theme="dark"] .search-box-wrapper input:focus[b-1yy2zm9fko] {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.18) !important;
}

[data-theme="dark"] .hide-learned-toggle[b-1yy2zm9fko] {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .btn-shuffle[b-1yy2zm9fko] {
    background: #111d33 !important;
    border-color: #223554 !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .btn-shuffle:hover[b-1yy2zm9fko] {
    background: #182a4a !important;
    border-color: #f87171 !important;
    color: #f87171 !important;
}

[data-theme="dark"] .session-size-select[b-1yy2zm9fko] {
    background: #111d33 !important;
    border-color: #223554 !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .stats-counter[b-1yy2zm9fko] {
    color: #94a3b8 !important;
}

[data-theme="dark"] .stats-counter b[b-1yy2zm9fko] {
    color: #f87171 !important;
}

/* Vocab Cards (Level Mode) */
[data-theme="dark"] .vocab-card[b-1yy2zm9fko] {
    background: #15243f !important;
    border: 1.5px solid #223554 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .vocab-card:hover[b-1yy2zm9fko] {
    border-color: #f87171 !important;
    background: #182a4a !important;
    box-shadow: 0 12px 28px rgba(220, 38, 38, 0.25) !important;
}

[data-theme="dark"] .vocab-card.is-learned[b-1yy2zm9fko] {
    background: rgba(22, 163, 74, 0.12) !important;
    border-color: rgba(34, 197, 94, 0.4) !important;
}

[data-theme="dark"] .vocab-level-tag[b-1yy2zm9fko] {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

[data-theme="dark"] .btn-audio[b-1yy2zm9fko] {
    background: #111d33 !important;
    border-color: #223554 !important;
    color: #f87171 !important;
}

[data-theme="dark"] .btn-audio:hover[b-1yy2zm9fko] {
    background: #dc2626 !important;
    color: #ffffff !important;
    border-color: #dc2626 !important;
}

[data-theme="dark"] .vocab-front[b-1yy2zm9fko] {
    border-bottom: 1px dashed #223554 !important;
}

[data-theme="dark"] .hanzi[b-1yy2zm9fko] {
    color: #f8fafc !important;
}

[data-theme="dark"] .pinyin[b-1yy2zm9fko] {
    color: #f87171 !important;
}

[data-theme="dark"] .meaning[b-1yy2zm9fko] {
    color: #f8fafc !important;
}

[data-theme="dark"] .word-type[b-1yy2zm9fko] {
    background: #111d33 !important;
    color: #94a3b8 !important;
    border: 1px solid #223554 !important;
}

[data-theme="dark"] .example-box[b-1yy2zm9fko] {
    background: #111d33 !important;
    border: 1px solid #223554 !important;
    border-left: 3px solid #ef4444 !important;
}

[data-theme="dark"] .ex-hanzi[b-1yy2zm9fko] {
    color: #f8fafc !important;
}

[data-theme="dark"] .ex-pinyin[b-1yy2zm9fko] {
    color: #f87171 !important;
}

[data-theme="dark"] .ex-meaning[b-1yy2zm9fko] {
    color: #94a3b8 !important;
}

[data-theme="dark"] .learn-btn[b-1yy2zm9fko] {
    background: #111d33 !important;
    border-color: #223554 !important;
    color: #f87171 !important;
}

[data-theme="dark"] .learn-btn:hover[b-1yy2zm9fko] {
    background: #ef4444 !important;
    color: #ffffff !important;
    border-color: #ef4444 !important;
}

[data-theme="dark"] .learn-btn.learned[b-1yy2zm9fko] {
    background: #16a34a !important;
    border-color: #16a34a !important;
    color: #ffffff !important;
}

/* Pagination */
[data-theme="dark"] .pagination-summary[b-1yy2zm9fko] {
    color: #94a3b8 !important;
}

[data-theme="dark"] .pagination-summary strong[b-1yy2zm9fko] {
    color: #f8fafc !important;
}

[data-theme="dark"] .btn-page[b-1yy2zm9fko] {
    background: #15243f !important;
    border-color: #223554 !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .btn-page:hover:not(:disabled)[b-1yy2zm9fko] {
    background: #182a4a !important;
    border-color: #ef4444 !important;
    color: #f87171 !important;
}

[data-theme="dark"] .btn-page.active[b-1yy2zm9fko] {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .page-ellipsis[b-1yy2zm9fko] {
    color: #64748b !important;
}

/* Topic Hub (Chủ Đề Từ Vựng) */
[data-theme="dark"] .topic-hub-header[b-1yy2zm9fko] {
    background: linear-gradient(135deg, #15243f 0%, #111d33 100%) !important;
    border: 1.5px solid #223554 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .topic-hub-title-box .topic-hub-title[b-1yy2zm9fko] {
    color: #f8fafc !important;
}

[data-theme="dark"] .topic-hub-sub[b-1yy2zm9fko] {
    color: #94a3b8 !important;
}

[data-theme="dark"] .topic-search-wrap[b-1yy2zm9fko] {
    background: #111d33 !important;
    border-color: #223554 !important;
}

[data-theme="dark"] .topic-search-wrap input[b-1yy2zm9fko] {
    color: #f8fafc !important;
}

[data-theme="dark"] .topic-search-wrap input[b-1yy2zm9fko]::placeholder {
    color: #64748b !important;
}

[data-theme="dark"] .topic-card[b-1yy2zm9fko] {
    background: #15243f !important;
    border: 1.5px solid #223554 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .topic-card:hover[b-1yy2zm9fko] {
    border-color: var(--topic-accent, #ef4444) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .topic-level-tag[b-1yy2zm9fko] {
    background: #111d33 !important;
    color: #cbd5e1 !important;
    border-color: #223554 !important;
}

[data-theme="dark"] .topic-name-vi[b-1yy2zm9fko] {
    color: #f8fafc !important;
}

[data-theme="dark"] .topic-name-zh .zh-pinyin[b-1yy2zm9fko] {
    color: #94a3b8 !important;
}

[data-theme="dark"] .topic-desc[b-1yy2zm9fko] {
    color: #94a3b8 !important;
}

[data-theme="dark"] .topic-progress-wrap[b-1yy2zm9fko] {
    border-top: 1px dashed #223554 !important;
}

[data-theme="dark"] .topic-progress-meta[b-1yy2zm9fko] {
    color: #94a3b8 !important;
}

[data-theme="dark"] .topic-progress-meta b[b-1yy2zm9fko] {
    color: #f8fafc !important;
}

[data-theme="dark"] .topic-progress-track[b-1yy2zm9fko] {
    background: #111d33 !important;
}

[data-theme="dark"] .btn-topic-explore[b-1yy2zm9fko] {
    background: #111d33 !important;
    border-color: #223554 !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .btn-topic-explore:hover[b-1yy2zm9fko] {
    background: var(--topic-accent, #dc2626) !important;
    border-color: var(--topic-accent, #dc2626) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-topic-fc[b-1yy2zm9fko] {
    background: rgba(56, 189, 248, 0.12) !important;
    border-color: rgba(56, 189, 248, 0.3) !important;
    color: #38bdf8 !important;
}

[data-theme="dark"] .btn-topic-fc:hover[b-1yy2zm9fko] {
    background: #0284c7 !important;
    color: #ffffff !important;
    border-color: #0284c7 !important;
}

/* Topic Detail View */
[data-theme="dark"] .btn-back-topics[b-1yy2zm9fko] {
    background: #15243f !important;
    border-color: #223554 !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .btn-back-topics:hover[b-1yy2zm9fko] {
    background: #182a4a !important;
    border-color: #38bdf8 !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .topic-hero-card[b-1yy2zm9fko] {
    background: #15243f !important;
    border-color: #223554 !important;
    box-shadow: 0 4px 22px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .badge-topic-level[b-1yy2zm9fko] {
    background: #111d33 !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .badge-topic-active[b-1yy2zm9fko] {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

[data-theme="dark"] .topic-hero-title[b-1yy2zm9fko] {
    color: #f8fafc !important;
}

[data-theme="dark"] .topic-hero-zh .hero-pinyin[b-1yy2zm9fko] {
    color: #94a3b8 !important;
}

[data-theme="dark"] .topic-hero-desc[b-1yy2zm9fko] {
    color: #94a3b8 !important;
}

[data-theme="dark"] .hero-stats-box[b-1yy2zm9fko] {
    background: #111d33 !important;
    border-color: #223554 !important;
}

[data-theme="dark"] .hero-stat-num[b-1yy2zm9fko] {
    color: #f8fafc !important;
}

[data-theme="dark"] .hero-stat-lbl[b-1yy2zm9fko] {
    color: #94a3b8 !important;
}

[data-theme="dark"] .hero-stat-divider[b-1yy2zm9fko] {
    background: #223554 !important;
}

[data-theme="dark"] .hero-progress-bar-wrap[b-1yy2zm9fko] {
    background: #111d33 !important;
}

/* Flashcard Overlay */
[data-theme="dark"] .flashcard-panel[b-1yy2zm9fko] {
    background: #15243f !important;
    border: 1px solid #223554 !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6) !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .fc-counter[b-1yy2zm9fko] {
    color: #94a3b8 !important;
}

[data-theme="dark"] .fc-close[b-1yy2zm9fko] {
    background: #111d33 !important;
    color: #94a3b8 !important;
}

[data-theme="dark"] .fc-close:hover[b-1yy2zm9fko] {
    background: #182a4a !important;
    color: #f87171 !important;
}

[data-theme="dark"] .fc-progress-track[b-1yy2zm9fko] {
    background: #111d33 !important;
}

[data-theme="dark"] .fc-front[b-1yy2zm9fko] {
    background: linear-gradient(160deg, #15243f, #111d33) !important;
    border: 1.5px solid #223554 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .fc-back[b-1yy2zm9fko] {
    background: linear-gradient(160deg, #15243f, #111d33) !important;
    border: 1.5px solid #223554 !important;
}

[data-theme="dark"] .fc-level-tag[b-1yy2zm9fko] {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
}

[data-theme="dark"] .fc-hanzi[b-1yy2zm9fko] {
    color: #f8fafc !important;
}

[data-theme="dark"] .fc-pinyin[b-1yy2zm9fko] {
    color: #f87171 !important;
}

[data-theme="dark"] .fc-tap-hint[b-1yy2zm9fko] {
    color: #64748b !important;
}

[data-theme="dark"] .fc-back-meaning[b-1yy2zm9fko] {
    color: #f8fafc !important;
}

[data-theme="dark"] .fc-word-type[b-1yy2zm9fko] {
    background: #111d33 !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .fc-example[b-1yy2zm9fko] {
    background: #111d33 !important;
    border: 1px solid #223554 !important;
    border-left: 3px solid #ef4444 !important;
}

[data-theme="dark"] .fc-example .ex-hanzi[b-1yy2zm9fko] {
    color: #f8fafc !important;
}

[data-theme="dark"] .fc-example .ex-meaning[b-1yy2zm9fko] {
    color: #94a3b8 !important;
}

[data-theme="dark"] .fc-btn.no[b-1yy2zm9fko] {
    background: #111d33 !important;
    border-color: #ef4444 !important;
    color: #f87171 !important;
}

[data-theme="dark"] .fc-btn.no:hover[b-1yy2zm9fko] {
    background: rgba(239, 68, 68, 0.15) !important;
}

[data-theme="dark"] .fc-btn.finish[b-1yy2zm9fko] {
    background: #111d33 !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .fc-summary-head h3[b-1yy2zm9fko] {
    color: #f8fafc !important;
}

[data-theme="dark"] .stat-chip.remember[b-1yy2zm9fko] {
    background: rgba(22, 163, 74, 0.15) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
    color: #4ade80 !important;
}

[data-theme="dark"] .stat-chip.forget[b-1yy2zm9fko] {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #f87171 !important;
}

[data-theme="dark"] .fc-unlearned-item[b-1yy2zm9fko] {
    background: #111d33 !important;
    border-color: #223554 !important;
}

[data-theme="dark"] .ul-hanzi[b-1yy2zm9fko] {
    color: #f8fafc !important;
}

[data-theme="dark"] .ul-meaning[b-1yy2zm9fko] {
    color: #94a3b8 !important;
}


/* /Pages/Ielts/AdminIeltsVocab.razor.rz.scp.css */
/* ========================================================================= */
/* ADMIN IELTS VOCABULARY STYLESHEET                                          */
/* ========================================================================= */
.admin-ielts-vocab-page[b-k3yv5x50ri] {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 24px 32px 60px;
    box-sizing: border-box;
    font-family: 'Be Vietnam Pro', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1e293b;
}

/* Header */
.page-header[b-k3yv5x50ri] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.header-left[b-k3yv5x50ri] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-icon-badge[b-k3yv5x50ri] {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
    flex-shrink: 0;
}

.page-title[b-k3yv5x50ri] {
    font-size: 1.75rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.02em;
}

.page-subtitle[b-k3yv5x50ri] {
    color: #64748b;
    margin: 3px 0 0;
    font-size: 0.92rem;
}

.header-right[b-k3yv5x50ri] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-primary-action[b-k3yv5x50ri] {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff;
    border: none;
    padding: 10px 18px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.28);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-primary-action:hover[b-k3yv5x50ri] {
    background: linear-gradient(135deg, #0369a1 0%, #075985 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(2, 132, 199, 0.4);
}

.btn-secondary-action[b-k3yv5x50ri] {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    color: #334155;
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: all 0.2s;
}

.btn-secondary-action:hover[b-k3yv5x50ri] {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #0f172a;
}

.btn-secondary-action:disabled[b-k3yv5x50ri] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-danger-action[b-k3yv5x50ri] {
    background: #fef2f2;
    border: 1.5px solid #fecaca;
    color: #dc2626;
    padding: 8px 15px;
    border-radius: 12px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-danger-action:hover:not(:disabled)[b-k3yv5x50ri] {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.28);
}

.btn-danger-action:active:not(:disabled)[b-k3yv5x50ri] {
    transform: translateY(0);
}

.btn-danger-action:disabled[b-k3yv5x50ri] {
    opacity: 0.45;
    cursor: not-allowed;
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #94a3b8;
    box-shadow: none;
    transform: none;
}

.import-mode-select[b-k3yv5x50ri] {
    border: 1.5px solid #cbd5e1;
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #334155;
    background: #ffffff;
    cursor: pointer;
    outline: none;
}

.import-mode-select:focus[b-k3yv5x50ri] {
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

/* Banner */
.banner[b-k3yv5x50ri] {
    padding: 12px 18px;
    border-radius: 12px;
    margin-bottom: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-sizing: border-box;
    width: 100%;
}

.banner-content[b-k3yv5x50ri] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.banner-content i[b-k3yv5x50ri] {
    font-size: 1.15rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.banner-close[b-k3yv5x50ri] {
    background: none;
    border: none;
    font-size: 1.3rem;
    line-height: 1;
    color: inherit;
    cursor: pointer;
    opacity: 0.7;
    padding: 0 4px;
}

.banner-close:hover[b-k3yv5x50ri] {
    opacity: 1;
}

.banner-success[b-k3yv5x50ri] {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.banner-error[b-k3yv5x50ri] {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* Toolbar */
.toolbar-card[b-k3yv5x50ri] {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 18px;
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
    flex-wrap: wrap;
    gap: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
    box-sizing: border-box;
    width: 100%;
}

.toolbar-left[b-k3yv5x50ri] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 280px;
    flex-wrap: wrap;
}

.search-box-wrapper[b-k3yv5x50ri] {
    position: relative;
    flex: 1;
    min-width: 260px;
    max-width: 440px;
    box-sizing: border-box;
}

.search-icon[b-k3yv5x50ri] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #0284c7;
    font-size: 0.95rem;
    pointer-events: none;
}

.search-box-wrapper input[b-k3yv5x50ri] {
    width: 100%;
    padding: 10px 38px 10px 38px;
    border-radius: 12px;
    border: 1.5px solid #cbd5e1;
    font-size: 0.92rem;
    background: #ffffff;
    color: #0f172a;
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.search-box-wrapper input:focus[b-k3yv5x50ri] {
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.btn-clear-search[b-k3yv5x50ri] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: color 0.15s;
}

.btn-clear-search:hover[b-k3yv5x50ri] {
    color: #0f172a;
}

.filter-group[b-k3yv5x50ri] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-group label[b-k3yv5x50ri] {
    font-size: 0.88rem;
    font-weight: 700;
    color: #0284c7;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
}

.filter-group select[b-k3yv5x50ri] {
    padding: 9px 14px;
    border-radius: 12px;
    border: 1.5px solid #cbd5e1;
    font-size: 0.9rem;
    font-weight: 600;
    color: #334155;
    background: #ffffff;
    outline: none;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-group select:focus[b-k3yv5x50ri] {
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.toolbar-right[b-k3yv5x50ri] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.page-size-selector[b-k3yv5x50ri] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.86rem;
    color: #64748b;
    font-weight: 600;
}

.page-size-selector select[b-k3yv5x50ri] {
    padding: 7px 10px;
    border-radius: 10px;
    border: 1.5px solid #cbd5e1;
    font-size: 0.86rem;
    font-weight: 600;
    background: #ffffff;
    color: #334155;
    outline: none;
    cursor: pointer;
}

.stats-counter[b-k3yv5x50ri] {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #0369a1;
    padding: 7px 16px;
    border-radius: 20px;
    font-size: 0.88rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.stats-counter strong[b-k3yv5x50ri] {
    color: #0284c7;
}

/* Table Card */
.table-card[b-k3yv5x50ri] {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    box-sizing: border-box;
    width: 100%;
}

.table-responsive[b-k3yv5x50ri] {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.vocab-table[b-k3yv5x50ri] {
    width: 100%;
    border-collapse: collapse;
    min-width: 1050px;
    text-align: left;
}

.vocab-table thead th[b-k3yv5x50ri] {
    background: #f8fafc;
    color: #475569;
    font-weight: 800;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 14px 18px;
    border-bottom: 1.5px solid #e2e8f0;
    white-space: nowrap;
}

.vocab-table tbody td[b-k3yv5x50ri] {
    padding: 13px 18px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.9rem;
    color: #334155;
    vertical-align: middle;
}

.vocab-table tbody tr:hover td[b-k3yv5x50ri] {
    background-color: #f8fafc;
}

.cell-id[b-k3yv5x50ri] {
    color: #94a3b8;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}

.cell-word[b-k3yv5x50ri] {
    white-space: nowrap;
}

.word-text[b-k3yv5x50ri] {
    font-weight: 800;
    color: #0f172a;
    font-size: 0.95rem;
}

.cell-phonetic[b-k3yv5x50ri] {
    color: #0284c7;
    font-weight: 600;
    font-family: 'Segoe UI', 'DejaVu Sans', 'Lucida Sans Unicode', sans-serif;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cell-pos[b-k3yv5x50ri] {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: lowercase;
}

.cell-meaning[b-k3yv5x50ri] {
    font-weight: 600;
    color: #1e293b;
    line-height: 1.4;
}

.cell-example[b-k3yv5x50ri] {
    color: #64748b;
    font-size: 0.86rem;
    line-height: 1.45;
}

.example-en[b-k3yv5x50ri] {
    font-style: italic;
    color: #475569;
    margin-bottom: 2px;
}

.example-vi[b-k3yv5x50ri] {
    color: #94a3b8;
    font-size: 0.82rem;
}

.cell-topic[b-k3yv5x50ri] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.cell-actions[b-k3yv5x50ri] {
    text-align: center;
    white-space: nowrap;
}

.btn-audio[b-k3yv5x50ri] {
    border: none;
    background: #eff6ff;
    color: #0284c7;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.8rem;
    margin-left: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    vertical-align: middle;
}

.btn-audio:hover[b-k3yv5x50ri] {
    background: #0284c7;
    color: #ffffff;
    transform: scale(1.1);
}

.btn-edit[b-k3yv5x50ri] {
    border: 1.5px solid #bae6fd;
    background: #f0f9ff;
    color: #0284c7;
    border-radius: 9px;
    padding: 6px 12px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    margin-right: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s;
}

.btn-edit:hover[b-k3yv5x50ri] {
    background: #0284c7;
    color: #ffffff;
    border-color: #0284c7;
}

.btn-delete[b-k3yv5x50ri] {
    border: 1.5px solid #fecaca;
    background: #fef2f2;
    color: #dc2626;
    border-radius: 9px;
    padding: 6px 10px;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-delete:hover[b-k3yv5x50ri] {
    background: #dc2626;
    color: #ffffff;
    border-color: #dc2626;
}

/* Pagination Footer */
.pagination-footer[b-k3yv5x50ri] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 22px;
    background: #f8fafc;
    border-top: 1.5px solid #e2e8f0;
    flex-wrap: wrap;
    gap: 12px;
}

.pagination-info[b-k3yv5x50ri] {
    font-size: 0.86rem;
    color: #64748b;
}

.pagination-info strong[b-k3yv5x50ri] {
    color: #0f172a;
}

.pagination-controls[b-k3yv5x50ri] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.page-btn[b-k3yv5x50ri] {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    color: #334155;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border-radius: 9px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.page-btn:hover:not(:disabled)[b-k3yv5x50ri] {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #0f172a;
}

.page-btn:disabled[b-k3yv5x50ri] {
    opacity: 0.4;
    cursor: not-allowed;
}

.page-btn.active[b-k3yv5x50ri] {
    background: #0284c7;
    color: #ffffff;
    border-color: #0284c7;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3);
}

.page-ellipsis[b-k3yv5x50ri] {
    padding: 0 4px;
    color: #94a3b8;
    font-weight: 700;
}

/* Loading & Empty States */
.loading-state[b-k3yv5x50ri],
.empty-state[b-k3yv5x50ri] {
    text-align: center;
    padding: 60px 20px;
    color: #64748b;
    background: #ffffff;
    border-radius: 20px;
    border: 1.5px solid #e2e8f0;
}

.empty-state i[b-k3yv5x50ri] {
    font-size: 2.5rem;
    color: #cbd5e1;
}

.empty-state h4[b-k3yv5x50ri] {
    margin: 12px 0 4px;
    color: #0f172a;
    font-weight: 800;
}

.custom-spinner[b-k3yv5x50ri] {
    width: 36px;
    height: 36px;
    margin: 0 auto 12px;
    border: 3.5px solid #e0f2fe;
    border-top-color: #0284c7;
    border-radius: 50%;
    animation: spin-b-k3yv5x50ri 0.8s linear infinite;
}

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

/* Modal Styles */
.modal-overlay[b-k3yv5x50ri] {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-panel[b-k3yv5x50ri] {
    background: #ffffff;
    border-radius: 20px;
    width: min(640px, 96vw);
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
}

.modal-header[b-k3yv5x50ri] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    border-bottom: 1.5px solid #f1f5f9;
}

.modal-header h3[b-k3yv5x50ri] {
    margin: 0;
    font-size: 1.18rem;
    font-weight: 800;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-close-modal[b-k3yv5x50ri] {
    border: none;
    background: #f1f5f9;
    color: #64748b;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.btn-close-modal:hover[b-k3yv5x50ri] {
    background: #fee2e2;
    color: #dc2626;
}

.modal-body[b-k3yv5x50ri] {
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.form-row.two-col[b-k3yv5x50ri] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.form-group[b-k3yv5x50ri] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label[b-k3yv5x50ri] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #475569;
}

.form-group input[b-k3yv5x50ri],
.form-group select[b-k3yv5x50ri],
.form-group textarea[b-k3yv5x50ri] {
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 0.92rem;
    font-family: inherit;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.2s;
}

.form-group input:focus[b-k3yv5x50ri],
.form-group select:focus[b-k3yv5x50ri],
.form-group textarea:focus[b-k3yv5x50ri] {
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.checkbox-group[b-k3yv5x50ri] {
    justify-content: flex-end;
}

.checkbox-group label[b-k3yv5x50ri] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 600;
    color: #334155;
}

.checkbox-group input[b-k3yv5x50ri] {
    width: 17px;
    height: 17px;
    accent-color: #0284c7;
}

.modal-footer[b-k3yv5x50ri] {
    padding: 16px 22px;
    border-top: 1.5px solid #f1f5f9;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background: #f8fafc;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.btn-cancel[b-k3yv5x50ri] {
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    border-radius: 10px;
    padding: 9px 18px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-cancel:hover[b-k3yv5x50ri] {
    background: #f1f5f9;
    color: #0f172a;
}

.btn-save[b-k3yv5x50ri] {
    border: none;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff;
    border-radius: 10px;
    padding: 9px 22px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.25);
    transition: all 0.15s;
}

.btn-save:hover[b-k3yv5x50ri] {
    background: linear-gradient(135deg, #0369a1 0%, #075985 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
}

/* Responsive */
@media (max-width: 992px) {
    .admin-ielts-vocab-page[b-k3yv5x50ri] {
        padding: 16px;
    }
    
    .toolbar-left[b-k3yv5x50ri],
    .toolbar-right[b-k3yv5x50ri] {
        width: 100%;
    }

    .search-box-wrapper[b-k3yv5x50ri] {
        max-width: 100%;
    }
}
/* /Pages/Ielts/IeltsDashboard.razor.rz.scp.css */
.dashboard-header[b-ppj2fg4a4a] {
    margin-bottom: 25px;
}

.page-title[b-ppj2fg4a4a] {
    font-size: 1.85rem;
    font-weight: 800;
    margin: 0 0 6px 0;
    color: var(--ig-text);
    letter-spacing: -0.02em;
}

.date-subtitle[b-ppj2fg4a4a] {
    color: var(--ig-text-secondary);
    font-size: 0.95rem;
    margin: 0;
    font-weight: 500;
}

.level-badge[b-ppj2fg4a4a] {
    background-color: #e8f0fe;
    color: #1a73e8;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.level-change-link[b-ppj2fg4a4a] {
    color: inherit;
    text-decoration: underline;
    font-size: 0.78rem;
    opacity: 0.85;
}

.level-change-link:hover[b-ppj2fg4a4a] {
    opacity: 1;
}

/* Banner */
.hero-banner[b-ppj2fg4a4a] {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 50%, #075985 100%);
    border-radius: 14px;
    padding: 28px 32px;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    box-shadow: 0 10px 25px -5px rgba(2, 132, 199, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.banner-badge[b-ppj2fg4a4a] {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.2);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    margin-bottom: 12px;
    backdrop-filter: blur(4px);
}

.hero-banner h2[b-ppj2fg4a4a] {
    font-size: 1.55rem;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.hero-banner p[b-ppj2fg4a4a] {
    color: #e0f2fe;
    margin: 0;
    font-size: 0.96rem;
    line-height: 1.5;
}

.btn-banner[b-ppj2fg4a4a] {
    background-color: #ffffff;
    color: #0369a1;
    border: none;
    padding: 12px 26px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s, box-shadow 0.2s;
    white-space: nowrap;
}

.btn-banner:hover[b-ppj2fg4a4a] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* Grid Layout */
.dashboard-grid-layout[b-ppj2fg4a4a] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    margin-bottom: 40px;
}

.goal-section[b-ppj2fg4a4a], .latest-result[b-ppj2fg4a4a] {
    background: var(--ig-card-bg);
    padding: 26px;
    border-radius: 14px;
    border: 1px solid var(--ig-border);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.goal-section h3[b-ppj2fg4a4a] {
    margin: 0 0 10px 0;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--ig-text);
}

.section-desc[b-ppj2fg4a4a] {
    color: var(--ig-text-secondary);
    font-size: 0.92rem;
    line-height: 1.6;
    margin-bottom: 12px;
}

.goal-form[b-ppj2fg4a4a] {
    display: flex;
    gap: 15px;
    align-items: flex-end;
    margin-top: 22px;
    flex-wrap: wrap;
}

.form-group[b-ppj2fg4a4a] {
    flex: 1;
    min-width: 180px;
    display: flex;
    flex-direction: column;
}

.form-group label[b-ppj2fg4a4a] {
    font-size: 0.88rem;
    color: var(--ig-text);
    margin-bottom: 8px;
    font-weight: 600;
}

.form-input[b-ppj2fg4a4a] {
    padding: 11px 14px;
    border: 1.5px solid var(--ig-border);
    border-radius: 9px;
    font-size: 0.95rem;
    background: var(--ig-bg);
    color: var(--ig-text);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input:focus[b-ppj2fg4a4a] {
    border-color: var(--ig-primary);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}

.btn-primary[b-ppj2fg4a4a] {
    background-color: var(--ig-primary);
    color: #ffffff;
    border: none;
    padding: 12px 22px;
    border-radius: 9px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: filter 0.2s, transform 0.2s;
}

.btn-primary:hover[b-ppj2fg4a4a] {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

/* Latest Result Card */
.subtitle-small[b-ppj2fg4a4a] {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--ig-text-secondary);
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.latest-exam-card[b-ppj2fg4a4a] {
    margin-top: 14px;
}

.latest-exam-title[b-ppj2fg4a4a] {
    font-weight: 700;
    color: var(--ig-text);
    font-size: 1.05rem;
    line-height: 1.45;
    margin-bottom: 10px;
    word-break: break-word;
}

.latest-exam-meta[b-ppj2fg4a4a] {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.score-badge[b-ppj2fg4a4a] {
    padding: 4px 10px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.2px;
    display: inline-flex;
    align-items: center;
}

.badge-graded[b-ppj2fg4a4a] {
    background: #e0f2fe;
    color: #0284c7;
}

.badge-pending[b-ppj2fg4a4a] {
    background: #fef3c7;
    color: #b45309;
}

.badge-completed[b-ppj2fg4a4a] {
    background: #e0f2fe;
    color: #0284c7;
}

.latest-exam-date[b-ppj2fg4a4a] {
    font-size: 0.84rem;
    color: var(--ig-text-secondary);
    font-weight: 500;
}

.result-text[b-ppj2fg4a4a] {
    margin-top: 15px;
    color: var(--ig-text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Modules Grid */
.learning-modules-section h3[b-ppj2fg4a4a] {
    margin: 0 0 6px 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--ig-text);
}

.modules-grid[b-ppj2fg4a4a] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    margin-top: 18px;
}

.module-card[b-ppj2fg4a4a] {
    background: var(--ig-card-bg);
    padding: 18px 20px;
    border-radius: 14px;
    border: 1px solid var(--ig-border);
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s, border-color 0.2s;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.module-card:hover[b-ppj2fg4a4a] {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    border-color: var(--ig-primary);
}

.module-icon[b-ppj2fg4a4a] {
    width: 44px;
    height: 44px;
    background-color: rgba(56, 189, 248, 0.1);
    color: var(--ig-primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
    border: 1px solid rgba(56, 189, 248, 0.2);
}

.module-info[b-ppj2fg4a4a] {
    flex-grow: 1;
    min-width: 0;
}

.module-info h4[b-ppj2fg4a4a] {
    margin: 0 0 4px 0;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--ig-text);
    letter-spacing: -0.01em;
}

.module-info p[b-ppj2fg4a4a] {
    margin: 0;
    font-size: 0.88rem;
    color: var(--ig-text-secondary);
    line-height: 1.45;
}

.module-action[b-ppj2fg4a4a] {
    color: var(--ig-text-secondary);
    font-size: 1.25rem;
    opacity: 0.5;
    transition: all 0.2s ease;
}

.module-card:hover .module-action[b-ppj2fg4a4a] {
    color: var(--ig-primary);
    opacity: 1;
    transform: translateX(3px);
}

/* ===== Vocabulary Preview Section ===== */
.vocab-preview-section[b-ppj2fg4a4a] {
    background: var(--ig-card-bg);
    border: 1px solid var(--ig-border);
    border-radius: 18px;
    padding: 22px 24px;
    margin-top: 28px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.vocab-preview-header[b-ppj2fg4a4a] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.vocab-preview-header h3[b-ppj2fg4a4a] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--ig-text);
}

.btn-see-vocab[b-ppj2fg4a4a] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    color: #ffffff;
    border-radius: 10px;
    padding: 9px 16px;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.2s, filter 0.2s;
}

.btn-see-vocab:hover[b-ppj2fg4a4a] {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.vocab-preview-grid[b-ppj2fg4a4a] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}

.vocab-chip[b-ppj2fg4a4a] {
    background: #f8fafc;
    border: 1px solid var(--ig-border);
    border-radius: 12px;
    padding: 12px 14px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: border-color 0.2s, transform 0.2s;
}

.vocab-chip:hover[b-ppj2fg4a4a] {
    border-color: var(--ig-primary);
    transform: translateY(-2px);
}

.chip-word[b-ppj2fg4a4a] {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ig-text);
}

.chip-phonetic[b-ppj2fg4a4a] {
    font-size: 0.8rem;
    color: var(--ig-primary);
    font-family: system-ui, sans-serif;
}

.chip-meaning[b-ppj2fg4a4a] {
    font-size: 0.86rem;
    color: var(--ig-text-secondary);
    font-weight: 500;
    line-height: 1.4;
}

.chip-topic[b-ppj2fg4a4a] {
    align-self: flex-start;
    margin-top: 6px;
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.2);
    color: var(--ig-primary);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
}

.vocab-preview-empty[b-ppj2fg4a4a] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--ig-text-secondary);
    padding: 20px 8px;
    font-size: 0.95rem;
}

.vocab-preview-empty i[b-ppj2fg4a4a] {
    font-size: 1.5rem;
    color: var(--ig-primary);
}

/* ==========================================================================
   DARK MODE OVERRIDES (HIGH CONTRAST & CRISP READABILITY)
   ========================================================================== */
[data-theme="dark"] .page-title[b-ppj2fg4a4a] {
    color: #ffffff;
}

[data-theme="dark"] .date-subtitle[b-ppj2fg4a4a] {
    color: #94a3b8;
}

[data-theme="dark"] .level-badge[b-ppj2fg4a4a] {
    background-color: rgba(56, 189, 248, 0.12);
    color: #38bdf8;
    border-color: rgba(56, 189, 248, 0.35);
}

[data-theme="dark"] .hero-banner[b-ppj2fg4a4a] {
    background: linear-gradient(135deg, #0369a1 0%, #0284c7 50%, #0ea5e9 100%);
    border: 1px solid rgba(56, 189, 248, 0.35);
    box-shadow: 0 10px 30px -5px rgba(2, 132, 199, 0.35);
}

[data-theme="dark"] .hero-banner h2[b-ppj2fg4a4a] {
    color: #ffffff;
}

[data-theme="dark"] .hero-banner p[b-ppj2fg4a4a] {
    color: #e0f2fe;
}

[data-theme="dark"] .btn-banner[b-ppj2fg4a4a] {
    background: #ffffff;
    color: #0369a1;
}

[data-theme="dark"] .goal-section[b-ppj2fg4a4a],
[data-theme="dark"] .latest-result[b-ppj2fg4a4a] {
    background: #121622;
    border-color: #232c42;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .goal-section h3[b-ppj2fg4a4a] {
    color: #f8fafc;
}

[data-theme="dark"] .section-desc[b-ppj2fg4a4a] {
    color: #cbd5e1;
}

[data-theme="dark"] .form-group label[b-ppj2fg4a4a] {
    color: #e2e8f0;
}

[data-theme="dark"] .form-input[b-ppj2fg4a4a] {
    background: #0a0d14;
    border-color: #2b354d;
    color: #f8fafc;
}

[data-theme="dark"] .form-input:focus[b-ppj2fg4a4a] {
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25);
}

[data-theme="dark"] .form-input[b-ppj2fg4a4a]::placeholder {
    color: #64748b;
}

[data-theme="dark"] .latest-exam-title[b-ppj2fg4a4a] {
    color: #ffffff;
}

[data-theme="dark"] .latest-exam-date[b-ppj2fg4a4a] {
    color: #94a3b8;
}

[data-theme="dark"] .learning-modules-section h3[b-ppj2fg4a4a] {
    color: #ffffff;
}

[data-theme="dark"] .module-card[b-ppj2fg4a4a] {
    background: #121622;
    border-color: #232c42;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .module-card:hover[b-ppj2fg4a4a] {
    border-color: #38bdf8;
    background: #171d2c;
    box-shadow: 0 8px 24px rgba(56, 189, 248, 0.14);
}

[data-theme="dark"] .module-icon[b-ppj2fg4a4a] {
    background-color: rgba(56, 189, 248, 0.14);
    color: #38bdf8;
    border-color: rgba(56, 189, 248, 0.3);
}

[data-theme="dark"] .module-info h4[b-ppj2fg4a4a] {
    color: #f8fafc;
}

[data-theme="dark"] .module-info p[b-ppj2fg4a4a] {
    color: #cbd5e1;
}

[data-theme="dark"] .module-action[b-ppj2fg4a4a] {
    color: #64748b;
}

[data-theme="dark"] .vocab-preview-section[b-ppj2fg4a4a] {
    background: #121622;
    border-color: #232c42;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .vocab-preview-header h3[b-ppj2fg4a4a] {
    color: #ffffff;
}

[data-theme="dark"] .vocab-chip[b-ppj2fg4a4a] {
    background: #161c2b;
    border-color: #28324a;
}

[data-theme="dark"] .vocab-chip:hover[b-ppj2fg4a4a] {
    border-color: #38bdf8;
}

[data-theme="dark"] .chip-word[b-ppj2fg4a4a] {
    color: #ffffff;
}

[data-theme="dark"] .chip-meaning[b-ppj2fg4a4a] {
    color: #cbd5e1;
}

[data-theme="dark"] .chip-topic[b-ppj2fg4a4a] {
    background: rgba(56, 189, 248, 0.12);
    border-color: rgba(56, 189, 248, 0.28);
    color: #38bdf8;
}
/* /Pages/Ielts/IeltsExamReview.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════
   IeltsExamReview.razor — Answer Key & Exam Review Page
   ══════════════════════════════════════════════════════ */

.review-page-container[b-6vfkhbk45l] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 24px 80px;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: #1e293b;
}

/* Loading & Empty States */
.review-loading[b-6vfkhbk45l], .review-empty[b-6vfkhbk45l] {
    text-align: center;
    padding: 80px 20px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    margin: 40px auto;
    max-width: 600px;
}
.spinner[b-6vfkhbk45l] {
    width: 48px;
    height: 48px;
    border: 4px solid #e2e8f0;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: spin-b-6vfkhbk45l 0.8s linear infinite;
    margin: 0 auto 16px;
}
@keyframes spin-b-6vfkhbk45l { to { transform: rotate(360deg); } }
.empty-icon[b-6vfkhbk45l] { font-size: 3.5rem; margin-bottom: 12px; }

/* ── HEADER CARD ── */
.review-header-card[b-6vfkhbk45l] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 24px 28px;
    margin-bottom: 24px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.03);
}

.review-breadcrumb[b-6vfkhbk45l] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    color: #64748b;
    margin-bottom: 16px;
}
.review-breadcrumb a[b-6vfkhbk45l] {
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
}
.review-breadcrumb a:hover[b-6vfkhbk45l] { text-decoration: underline; }
.review-breadcrumb .active[b-6vfkhbk45l] { color: #0f172a; font-weight: 600; }

.review-header-content[b-6vfkhbk45l] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding-bottom: 20px;
    border-bottom: 1px solid #f1f5f9;
}

.skill-badge-header[b-6vfkhbk45l] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 800;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}
.skill-badge-header.listening[b-6vfkhbk45l] { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.skill-badge-header.reading[b-6vfkhbk45l] { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.skill-badge-header.writing[b-6vfkhbk45l] { background: #faf5ff; color: #7e22ce; border: 1px solid #e9d5ff; }
.skill-badge-header.speaking[b-6vfkhbk45l] { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }

.title-section h1[b-6vfkhbk45l] {
    font-size: 1.6rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 8px;
}
.submission-meta[b-6vfkhbk45l] {
    display: flex;
    gap: 16px;
    font-size: 0.85rem;
    color: #64748b;
}

.header-actions[b-6vfkhbk45l] {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.btn-action-primary[b-6vfkhbk45l], .btn-action-outline[b-6vfkhbk45l], .btn-action-back[b-6vfkhbk45l] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    border: none;
}
.btn-action-primary[b-6vfkhbk45l] {
    background: #2563eb;
    color: #fff;
    box-shadow: 0 2px 8px rgba(37,99,235,0.25);
}
.btn-action-primary:hover[b-6vfkhbk45l] { background: #1d4ed8; }

.btn-action-outline[b-6vfkhbk45l] {
    background: #f8fafc;
    color: #334155;
    border: 1px solid #cbd5e1;
}
.btn-action-outline:hover[b-6vfkhbk45l] { background: #f1f5f9; border-color: #94a3b8; }

.btn-action-back[b-6vfkhbk45l] {
    background: transparent;
    color: #64748b;
    border: 1px solid #e2e8f0;
}
.btn-action-back:hover[b-6vfkhbk45l] { color: #0f172a; background: #f1f5f9; }

/* ── SCORE HERO ── */
.review-score-hero[b-6vfkhbk45l] {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 20px;
    padding: 20px 24px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.hero-score-box[b-6vfkhbk45l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #0f172a;
    color: #fff;
    padding: 16px 24px;
    border-radius: 12px;
    min-width: 170px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(15,23,42,0.15);
}
.score-lbl[b-6vfkhbk45l] {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: #94a3b8;
    text-transform: uppercase;
}
.score-val[b-6vfkhbk45l] {
    font-size: 2.4rem;
    font-weight: 900;
    color: #38bdf8;
    line-height: 1.1;
    margin: 4px 0;
}
.score-val.pending[b-6vfkhbk45l] {
    color: #fbbf24;
    font-size: 1.8rem;
}
.score-status-badge[b-6vfkhbk45l] {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 12px;
}
.score-status-badge.graded[b-6vfkhbk45l] { background: rgba(34,197,94,0.2); color: #86efac; }
.score-status-badge.pending[b-6vfkhbk45l] { background: rgba(234,179,8,0.2); color: #fde047; }

.hero-stats-grid[b-6vfkhbk45l] {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.stat-box[b-6vfkhbk45l] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.stat-box.correct[b-6vfkhbk45l] { border-left: 4px solid #16a34a; }
.stat-box.wrong[b-6vfkhbk45l] { border-left: 4px solid #dc2626; }
.stat-box.blank[b-6vfkhbk45l] { border-left: 4px solid #ca8a04; }
.stat-box.accuracy[b-6vfkhbk45l] { border-left: 4px solid #2563eb; }

.stat-icon[b-6vfkhbk45l] {
    font-size: 1.4rem;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.stat-box.correct .stat-icon[b-6vfkhbk45l] { background: #dcfce7; color: #16a34a; }
.stat-box.wrong .stat-icon[b-6vfkhbk45l] { background: #fee2e2; color: #dc2626; }
.stat-box.blank .stat-icon[b-6vfkhbk45l] { background: #fef9c3; color: #ca8a04; }
.stat-box.accuracy .stat-icon[b-6vfkhbk45l] { background: #dbeafe; color: #2563eb; }

.stat-num[b-6vfkhbk45l] {
    display: block;
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
}
.stat-name[b-6vfkhbk45l] {
    font-size: 0.78rem;
    color: #64748b;
    font-weight: 600;
}

/* Hero info pane for Writing / Speaking */
.hero-info-pane[b-6vfkhbk45l] {
    flex: 1;
}
.criteria-summary-grid[b-6vfkhbk45l] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}
.crit-pill[b-6vfkhbk45l] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
}
.crit-title[b-6vfkhbk45l] {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 700;
}
.crit-val[b-6vfkhbk45l] {
    font-size: 1.1rem;
    font-weight: 800;
    color: #0f172a;
    margin-top: 2px;
}
.teacher-feedback-card[b-6vfkhbk45l] {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 12px 16px;
    color: #1e40af;
    font-size: 0.92rem;
}
.teacher-feedback-card strong[b-6vfkhbk45l] {
    display: block;
    margin-bottom: 4px;
}
.teacher-feedback-card p[b-6vfkhbk45l] {
    margin: 0;
    line-height: 1.6;
    color: #1e3a8a;
}
.pending-notice[b-6vfkhbk45l] {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 14px 18px;
    color: #78350f;
}
.pending-notice p[b-6vfkhbk45l] { margin: 0 0 4px; font-size: 0.92rem; }
.pending-notice .sub-text[b-6vfkhbk45l] { font-size: 0.84rem; color: #92400e; margin: 0; }

/* ── TOOLBAR (PART TABS & FILTER) ── */
.review-toolbar[b-6vfkhbk45l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    background: #ffffff;
    padding: 10px 16px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.part-tabs-group[b-6vfkhbk45l] {
    display: flex;
    gap: 8px;
    align-items: center;
}
.part-tab-btn[b-6vfkhbk45l] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s;
}
.part-tab-btn:hover[b-6vfkhbk45l] { background: #f1f5f9; color: #0f172a; }
.part-tab-btn.active[b-6vfkhbk45l] {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(37,99,235,0.25);
}
.part-score-pill[b-6vfkhbk45l] {
    font-size: 0.75rem;
    background: rgba(0,0,0,0.06);
    padding: 2px 6px;
    border-radius: 10px;
}
.part-tab-btn.active .part-score-pill[b-6vfkhbk45l] {
    background: rgba(255,255,255,0.25);
    color: #fff;
}

.filter-pills-group[b-6vfkhbk45l] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.filter-lbl[b-6vfkhbk45l] {
    font-size: 0.84rem;
    font-weight: 700;
    color: #64748b;
    margin-right: 4px;
}
.filter-btn[b-6vfkhbk45l] {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s;
}
.filter-btn:hover[b-6vfkhbk45l] { background: #f1f5f9; }
.filter-btn.active[b-6vfkhbk45l] { background: #0f172a; color: #fff; border-color: #0f172a; }
.filter-btn.correct.active[b-6vfkhbk45l] { background: #16a34a; border-color: #16a34a; color: #fff; }
.filter-btn.wrong.active[b-6vfkhbk45l] { background: #dc2626; border-color: #dc2626; color: #fff; }
.filter-btn.blank.active[b-6vfkhbk45l] { background: #ca8a04; border-color: #ca8a04; color: #fff; }

/* ── SPLIT LAYOUT (READING & LISTENING) ── */
.review-split-layout[b-6vfkhbk45l] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: flex-start;
}

.passage-pane[b-6vfkhbk45l] {
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px 28px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}

.listening-audio-box[b-6vfkhbk45l] {
    margin-bottom: 20px;
    padding: 14px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}
.audio-header[b-6vfkhbk45l] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 0.88rem;
    color: #1e293b;
    margin-bottom: 10px;
}
.review-audio-player[b-6vfkhbk45l] {
    width: 100%;
    height: 40px;
}

.part-header-tag[b-6vfkhbk45l] {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 800;
    color: #2563eb;
    background: #eff6ff;
    padding: 4px 10px;
    border-radius: 6px;
    margin-bottom: 12px;
}
.passage-title[b-6vfkhbk45l] {
    font-size: 1.35rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 16px;
    line-height: 1.4;
}
.passage-html-body[b-6vfkhbk45l] {
    font-size: 0.98rem;
    line-height: 1.85;
    color: #334155;
}
.passage-html-body p[b-6vfkhbk45l] { margin-bottom: 16px; }

/* Right Column Questions */
.questions-pane[b-6vfkhbk45l] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.question-group-card[b-6vfkhbk45l] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}
.group-instruction[b-6vfkhbk45l] {
    background: #f8fafc;
    border-left: 4px solid #3b82f6;
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 0.9rem;
    color: #334155;
    margin-bottom: 18px;
    font-style: italic;
}

.review-question-card[b-6vfkhbk45l] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 16px;
    transition: all 0.2s;
}
.review-question-card:last-child[b-6vfkhbk45l] { margin-bottom: 0; }
.review-question-card.is-correct[b-6vfkhbk45l] { border-left: 4px solid #16a34a; background: #fcfdfc; }
.review-question-card.is-wrong[b-6vfkhbk45l] { border-left: 4px solid #dc2626; background: #fdfcfc; }
.review-question-card.is-blank[b-6vfkhbk45l] { border-left: 4px solid #ca8a04; background: #fffefc; }

.q-header[b-6vfkhbk45l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.q-num-badge[b-6vfkhbk45l] {
    font-size: 0.78rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 12px;
}
.q-num-badge.badge-correct[b-6vfkhbk45l] { background: #dcfce7; color: #15803d; }
.q-num-badge.badge-wrong[b-6vfkhbk45l] { background: #fee2e2; color: #b91c1c; }
.q-num-badge.badge-blank[b-6vfkhbk45l] { background: #fef9c3; color: #854d0e; }

.q-verdict[b-6vfkhbk45l] {
    font-size: 0.82rem;
    font-weight: 700;
}
.is-correct .q-verdict[b-6vfkhbk45l] { color: #16a34a; }
.is-wrong .q-verdict[b-6vfkhbk45l] { color: #dc2626; }
.is-blank .q-verdict[b-6vfkhbk45l] { color: #ca8a04; }

.q-body-text[b-6vfkhbk45l] {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #1e293b;
    margin-bottom: 14px;
}

.options-review-list[b-6vfkhbk45l] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}
.opt-review-item[b-6vfkhbk45l] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    font-size: 0.9rem;
}
.opt-review-item.opt-correct[b-6vfkhbk45l] {
    border-color: #86efac;
    background: #f0fdf4;
}
.opt-review-item.opt-wrong[b-6vfkhbk45l] {
    border-color: #fca5a5;
    background: #fef2f2;
}
.opt-label[b-6vfkhbk45l] {
    font-weight: 800;
    color: #475569;
    min-width: 24px;
}
.opt-text[b-6vfkhbk45l] { flex: 1; color: #1e293b; }
.opt-tag[b-6vfkhbk45l] {
    font-size: 0.72rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 4px;
}
.opt-tag.correct[b-6vfkhbk45l] { background: #16a34a; color: #fff; }
.opt-tag.wrong[b-6vfkhbk45l] { background: #dc2626; color: #fff; }

.answer-comparison-box[b-6vfkhbk45l] {
    padding: 10px 14px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.answer-row[b-6vfkhbk45l] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.88rem;
}
.ans-lbl[b-6vfkhbk45l] {
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 600;
    min-width: 140px;
}
.ans-val.student.c-correct[b-6vfkhbk45l] { color: #16a34a; font-weight: 800; }
.ans-val.student.c-wrong[b-6vfkhbk45l] { color: #dc2626; font-weight: 800; text-decoration: line-through; }
.ans-val.correct[b-6vfkhbk45l] { color: #15803d; font-weight: 800; }
.accepted-hint[b-6vfkhbk45l] {
    font-size: 0.8rem;
    font-weight: normal;
    color: #475569;
    margin-left: 6px;
}

/* ── BOTTOM STICKY QUESTION NAVIGATOR ── */
.bottom-navigator-bar[b-6vfkhbk45l] {
    position: fixed;
    bottom: 0;
    left: var(--sidebar-width, 260px);
    right: 0;
    background: #ffffff;
    border-top: 2px solid #e2e8f0;
    padding: 10px 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.06);
    z-index: 99;
    transition: left 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}

@media (max-width: 900px) {
    .bottom-navigator-bar[b-6vfkhbk45l] {
        left: 0 !important;
        padding: 8px 12px;
        gap: 12px;
    }
}
.nav-left[b-6vfkhbk45l] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}
.nav-title[b-6vfkhbk45l] {
    font-size: 0.78rem;
    font-weight: 800;
    color: #0f172a;
}
.nav-legend[b-6vfkhbk45l] {
    display: flex;
    gap: 8px;
    font-size: 0.72rem;
    color: #64748b;
}
.legend-dot[b-6vfkhbk45l] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.legend-dot.correct[b-6vfkhbk45l] { background: #16a34a; }
.legend-dot.wrong[b-6vfkhbk45l] { background: #dc2626; }
.legend-dot.blank[b-6vfkhbk45l] { background: #ca8a04; }

.nav-numbers-track[b-6vfkhbk45l] {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 4px 0;
    flex: 1;
}
.q-nav-btn[b-6vfkhbk45l] {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    transition: transform 0.15s;
}
.q-nav-btn:hover[b-6vfkhbk45l] { transform: scale(1.1); }
.q-nav-btn.correct[b-6vfkhbk45l] { background: #dcfce7; color: #15803d; border: 1px solid #86efac; }
.q-nav-btn.wrong[b-6vfkhbk45l] { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }
.q-nav-btn.blank[b-6vfkhbk45l] { background: #fef9c3; color: #854d0e; border: 1px solid #fde047; }

/* ── WRITING REVIEW ── */
.writing-review-container[b-6vfkhbk45l] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.03);
}
.writing-task-tabs[b-6vfkhbk45l] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 16px;
    border-bottom: 2px solid #f1f5f9;
    margin-bottom: 20px;
}
.w-tab-btn[b-6vfkhbk45l] {
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 0.92rem;
    font-weight: 700;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #475569;
    cursor: pointer;
}
.w-tab-btn.active[b-6vfkhbk45l] {
    background: #7e22ce;
    border-color: #7e22ce;
    color: #ffffff;
}

.tabs-right-toggle[b-6vfkhbk45l] {
    margin-left: auto;
    display: flex;
    gap: 8px;
}
.view-pill-btn[b-6vfkhbk45l] {
    padding: 7px 16px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #475569;
}
.view-pill-btn.active[b-6vfkhbk45l] {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}
.view-pill-btn.model.active[b-6vfkhbk45l] {
    background: linear-gradient(135deg, #059669, #10b981);
    border-color: #059669;
    color: #ffffff;
}

.writing-split-review[b-6vfkhbk45l] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.w-prompt-pane[b-6vfkhbk45l] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px;
}
.w-prompt-card h3[b-6vfkhbk45l] {
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0 0 12px;
    color: #0f172a;
}
.w-instruction[b-6vfkhbk45l] {
    font-style: italic;
    color: #64748b;
    margin-bottom: 12px;
    font-size: 0.92rem;
}
.w-prompt-body[b-6vfkhbk45l] {
    font-size: 0.98rem;
    line-height: 1.7;
    color: #1e293b;
    margin-bottom: 16px;
}
.w-word-req[b-6vfkhbk45l] {
    background: #eff6ff;
    border-left: 4px solid #2563eb;
    padding: 8px 12px;
    font-size: 0.88rem;
    color: #1e40af;
    border-radius: 4px;
}
.w-prompt-img-box[b-6vfkhbk45l] {
    margin-top: 16px;
    text-align: center;
}
.w-prompt-img-box img[b-6vfkhbk45l] {
    max-width: 100%;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
}

.essay-paper[b-6vfkhbk45l] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    min-height: 400px;
}
.paper-header[b-6vfkhbk45l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 16px;
}
.paper-header h4[b-6vfkhbk45l] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
}
.word-counter[b-6vfkhbk45l] {
    font-size: 0.85rem;
    color: #64748b;
}
.essay-text[b-6vfkhbk45l] {
    font-family: 'Georgia', serif;
    font-size: 1.05rem;
    line-height: 1.85;
    color: #1e293b;
    white-space: pre-wrap;
}
.model-essay-text[b-6vfkhbk45l] {
    font-size: 1rem;
    line-height: 1.8;
    color: #1e293b;
}
.no-essay-alert[b-6vfkhbk45l] {
    padding: 40px 20px;
    text-align: center;
    color: #94a3b8;
    font-style: italic;
}

/* ── SPEAKING REVIEW ── */
.speaking-review-container[b-6vfkhbk45l] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.sp-review-part-card[b-6vfkhbk45l] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.03);
}
.sp-part-header h3[b-6vfkhbk45l] {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 4px;
}
.sp-caption[b-6vfkhbk45l] {
    font-size: 0.85rem;
    color: #64748b;
}
.sp-topic-box[b-6vfkhbk45l] {
    margin: 14px 0;
    background: #fff7ed;
    border-left: 4px solid #ea580c;
    padding: 12px 16px;
    border-radius: 4px;
    color: #9a3412;
    font-size: 0.92rem;
}
.sp-questions-list[b-6vfkhbk45l] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 16px;
}
.sp-q-card[b-6vfkhbk45l] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px 20px;
}
.sp-q-top[b-6vfkhbk45l] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.sp-q-badge[b-6vfkhbk45l] {
    background: #ea580c;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 12px;
}
.sp-q-top h4[b-6vfkhbk45l] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
}
.sp-student-answer[b-6vfkhbk45l] {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 12px 16px;
}
.transcript-row[b-6vfkhbk45l] {
    font-size: 0.92rem;
    color: #334155;
    margin-bottom: 6px;
}
.transcript-text[b-6vfkhbk45l] {
    margin: 4px 0 0;
    font-style: italic;
    color: #0f172a;
}
.sp-duration[b-6vfkhbk45l] {
    font-size: 0.78rem;
    color: #64748b;
    font-weight: 600;
}
.sp-no-recording[b-6vfkhbk45l] {
    color: #94a3b8;
    font-size: 0.85rem;
    font-style: italic;
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
    .review-split-layout[b-6vfkhbk45l], .writing-split-review[b-6vfkhbk45l] { grid-template-columns: 1fr; }
    .passage-pane[b-6vfkhbk45l] { position: static; max-height: none; }
    .hero-stats-grid[b-6vfkhbk45l] { grid-template-columns: repeat(2, 1fr); }
    .review-score-hero[b-6vfkhbk45l] { flex-direction: column; }
    .hero-score-box[b-6vfkhbk45l] { width: 100%; }
    .criteria-summary-grid[b-6vfkhbk45l] { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════════════
   DARK THEME EYE-COMFORT RULES (IELTS EXAM REVIEW)
   ══════════════════════════════════════════════════════ */
:global([data-theme="dark"]) .review-page-container[b-6vfkhbk45l],
[data-theme="dark"] .review-page-container[b-6vfkhbk45l] {
    color: #f8fafc;
}

/* Header Card & Breadcrumb */
:global([data-theme="dark"]) .review-header-card[b-6vfkhbk45l],
[data-theme="dark"] .review-header-card[b-6vfkhbk45l] {
    background: #121622;
    border-color: #232c42;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}

:global([data-theme="dark"]) .review-header-content[b-6vfkhbk45l],
[data-theme="dark"] .review-header-content[b-6vfkhbk45l] {
    border-bottom-color: #1e2638;
}

:global([data-theme="dark"]) .review-breadcrumb[b-6vfkhbk45l],
[data-theme="dark"] .review-breadcrumb[b-6vfkhbk45l] {
    color: #94a3b8;
}

:global([data-theme="dark"]) .review-breadcrumb a[b-6vfkhbk45l],
[data-theme="dark"] .review-breadcrumb a[b-6vfkhbk45l] {
    color: #38bdf8;
}

:global([data-theme="dark"]) .review-breadcrumb .active[b-6vfkhbk45l],
[data-theme="dark"] .review-breadcrumb .active[b-6vfkhbk45l] {
    color: #f8fafc;
}

:global([data-theme="dark"]) .title-section h1[b-6vfkhbk45l],
[data-theme="dark"] .title-section h1[b-6vfkhbk45l] {
    color: #ffffff;
}

:global([data-theme="dark"]) .submission-meta[b-6vfkhbk45l],
[data-theme="dark"] .submission-meta[b-6vfkhbk45l] {
    color: #94a3b8;
}

:global([data-theme="dark"]) .btn-action-outline[b-6vfkhbk45l],
[data-theme="dark"] .btn-action-outline[b-6vfkhbk45l] {
    background: #161c2b;
    border-color: #2b354d;
    color: #cbd5e1;
}

:global([data-theme="dark"]) .btn-action-outline:hover[b-6vfkhbk45l],
[data-theme="dark"] .btn-action-outline:hover[b-6vfkhbk45l] {
    background: #1d2538;
    border-color: #38bdf8;
    color: #ffffff;
}

:global([data-theme="dark"]) .btn-action-back[b-6vfkhbk45l],
[data-theme="dark"] .btn-action-back[b-6vfkhbk45l] {
    background: transparent;
    border-color: #2b354d;
    color: #94a3b8;
}

:global([data-theme="dark"]) .btn-action-back:hover[b-6vfkhbk45l],
[data-theme="dark"] .btn-action-back:hover[b-6vfkhbk45l] {
    background: #161c2b;
    color: #f8fafc;
}

/* Score Summary Hero */
:global([data-theme="dark"]) .review-score-hero[b-6vfkhbk45l],
[data-theme="dark"] .review-score-hero[b-6vfkhbk45l] {
    background: #0f131c;
    border-color: #202738;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

:global([data-theme="dark"]) .hero-score-box[b-6vfkhbk45l],
[data-theme="dark"] .hero-score-box[b-6vfkhbk45l] {
    background: #090c12;
    border: 1px solid #232c42;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

:global([data-theme="dark"]) .score-lbl[b-6vfkhbk45l],
[data-theme="dark"] .score-lbl[b-6vfkhbk45l] {
    color: #94a3b8;
}

:global([data-theme="dark"]) .score-val[b-6vfkhbk45l],
[data-theme="dark"] .score-val[b-6vfkhbk45l] {
    color: #38bdf8;
}

/* The 4 Stat Boxes (Score Hero) */
:global([data-theme="dark"]) .stat-box[b-6vfkhbk45l],
[data-theme="dark"] .stat-box[b-6vfkhbk45l] {
    background: #161c2b;
    border: 1px solid #232c42;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

:global([data-theme="dark"]) .stat-box.correct[b-6vfkhbk45l],
[data-theme="dark"] .stat-box.correct[b-6vfkhbk45l] {
    border-left: 4px solid #22c55e;
}

:global([data-theme="dark"]) .stat-box.wrong[b-6vfkhbk45l],
[data-theme="dark"] .stat-box.wrong[b-6vfkhbk45l] {
    border-left: 4px solid #ef4444;
}

:global([data-theme="dark"]) .stat-box.blank[b-6vfkhbk45l],
[data-theme="dark"] .stat-box.blank[b-6vfkhbk45l] {
    border-left: 4px solid #f59e0b;
}

:global([data-theme="dark"]) .stat-box.accuracy[b-6vfkhbk45l],
[data-theme="dark"] .stat-box.accuracy[b-6vfkhbk45l] {
    border-left: 4px solid #38bdf8;
}

:global([data-theme="dark"]) .stat-box.correct .stat-icon[b-6vfkhbk45l],
[data-theme="dark"] .stat-box.correct .stat-icon[b-6vfkhbk45l] {
    background: rgba(34, 197, 94, 0.16);
    color: #4ade80;
}

:global([data-theme="dark"]) .stat-box.wrong .stat-icon[b-6vfkhbk45l],
[data-theme="dark"] .stat-box.wrong .stat-icon[b-6vfkhbk45l] {
    background: rgba(239, 68, 68, 0.16);
    color: #f87171;
}

:global([data-theme="dark"]) .stat-box.blank .stat-icon[b-6vfkhbk45l],
[data-theme="dark"] .stat-box.blank .stat-icon[b-6vfkhbk45l] {
    background: rgba(245, 158, 11, 0.16);
    color: #fbbf24;
}

:global([data-theme="dark"]) .stat-box.accuracy .stat-icon[b-6vfkhbk45l],
[data-theme="dark"] .stat-box.accuracy .stat-icon[b-6vfkhbk45l] {
    background: rgba(56, 189, 248, 0.16);
    color: #38bdf8;
}

:global([data-theme="dark"]) .stat-num[b-6vfkhbk45l],
[data-theme="dark"] .stat-num[b-6vfkhbk45l] {
    color: #ffffff;
}

:global([data-theme="dark"]) .stat-name[b-6vfkhbk45l],
[data-theme="dark"] .stat-name[b-6vfkhbk45l] {
    color: #94a3b8;
}

/* Criteria & Teacher Feedback (Writing / Speaking Hero) */
:global([data-theme="dark"]) .crit-pill[b-6vfkhbk45l],
[data-theme="dark"] .crit-pill[b-6vfkhbk45l] {
    background: #161c2b;
    border-color: #232c42;
}

:global([data-theme="dark"]) .crit-title[b-6vfkhbk45l],
[data-theme="dark"] .crit-title[b-6vfkhbk45l] {
    color: #94a3b8;
}

:global([data-theme="dark"]) .crit-val[b-6vfkhbk45l],
[data-theme="dark"] .crit-val[b-6vfkhbk45l] {
    color: #ffffff;
}

:global([data-theme="dark"]) .teacher-feedback-card[b-6vfkhbk45l],
[data-theme="dark"] .teacher-feedback-card[b-6vfkhbk45l] {
    background: rgba(56, 189, 248, 0.12);
    border-color: rgba(56, 189, 248, 0.35);
    color: #bae6fd;
}

:global([data-theme="dark"]) .teacher-feedback-card p[b-6vfkhbk45l],
[data-theme="dark"] .teacher-feedback-card p[b-6vfkhbk45l] {
    color: #e0f2fe;
}

:global([data-theme="dark"]) .pending-notice[b-6vfkhbk45l],
[data-theme="dark"] .pending-notice[b-6vfkhbk45l] {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.35);
    color: #fef3c7;
}

:global([data-theme="dark"]) .pending-notice .sub-text[b-6vfkhbk45l],
[data-theme="dark"] .pending-notice .sub-text[b-6vfkhbk45l] {
    color: #fde68a;
}

/* Toolbar: Part Tabs & Filter Pills */
:global([data-theme="dark"]) .review-toolbar[b-6vfkhbk45l],
[data-theme="dark"] .review-toolbar[b-6vfkhbk45l] {
    background: #121622;
    border-color: #232c42;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

:global([data-theme="dark"]) .part-tab-btn[b-6vfkhbk45l],
[data-theme="dark"] .part-tab-btn[b-6vfkhbk45l] {
    background: #161c2b;
    border-color: #28324a;
    color: #cbd5e1;
}

:global([data-theme="dark"]) .part-tab-btn:hover[b-6vfkhbk45l],
[data-theme="dark"] .part-tab-btn:hover[b-6vfkhbk45l] {
    background: #1d2538;
    color: #ffffff;
    border-color: #38bdf8;
}

:global([data-theme="dark"]) .part-tab-btn.active[b-6vfkhbk45l],
[data-theme="dark"] .part-tab-btn.active[b-6vfkhbk45l] {
    background: #0284c7;
    border-color: #38bdf8;
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(2, 132, 199, 0.4);
}

:global([data-theme="dark"]) .part-score-pill[b-6vfkhbk45l],
[data-theme="dark"] .part-score-pill[b-6vfkhbk45l] {
    background: rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
}

:global([data-theme="dark"]) .part-tab-btn.active .part-score-pill[b-6vfkhbk45l],
[data-theme="dark"] .part-tab-btn.active .part-score-pill[b-6vfkhbk45l] {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

:global([data-theme="dark"]) .filter-lbl[b-6vfkhbk45l],
[data-theme="dark"] .filter-lbl[b-6vfkhbk45l] {
    color: #94a3b8;
}

:global([data-theme="dark"]) .filter-btn[b-6vfkhbk45l],
[data-theme="dark"] .filter-btn[b-6vfkhbk45l] {
    background: #161c2b;
    border-color: #28324a;
    color: #cbd5e1;
}

:global([data-theme="dark"]) .filter-btn:hover[b-6vfkhbk45l],
[data-theme="dark"] .filter-btn:hover[b-6vfkhbk45l] {
    background: #1d2538;
    color: #ffffff;
}

:global([data-theme="dark"]) .filter-btn.active[b-6vfkhbk45l],
[data-theme="dark"] .filter-btn.active[b-6vfkhbk45l] {
    background: #38bdf8;
    border-color: #38bdf8;
    color: #0b0d13;
    font-weight: 800;
}

:global([data-theme="dark"]) .filter-btn.correct.active[b-6vfkhbk45l],
[data-theme="dark"] .filter-btn.correct.active[b-6vfkhbk45l] {
    background: #22c55e;
    border-color: #22c55e;
    color: #ffffff;
}

:global([data-theme="dark"]) .filter-btn.wrong.active[b-6vfkhbk45l],
[data-theme="dark"] .filter-btn.wrong.active[b-6vfkhbk45l] {
    background: #ef4444;
    border-color: #ef4444;
    color: #ffffff;
}

:global([data-theme="dark"]) .filter-btn.blank.active[b-6vfkhbk45l],
[data-theme="dark"] .filter-btn.blank.active[b-6vfkhbk45l] {
    background: #f59e0b;
    border-color: #f59e0b;
    color: #ffffff;
}

/* Left Pane: Passage & Listening Audio */
:global([data-theme="dark"]) .passage-pane[b-6vfkhbk45l],
[data-theme="dark"] .passage-pane[b-6vfkhbk45l] {
    background: #121622;
    border-color: #232c42;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

:global([data-theme="dark"]) .listening-audio-box[b-6vfkhbk45l],
[data-theme="dark"] .listening-audio-box[b-6vfkhbk45l] {
    background: #161c2b;
    border-color: #28324a;
}

:global([data-theme="dark"]) .audio-header[b-6vfkhbk45l],
[data-theme="dark"] .audio-header[b-6vfkhbk45l] {
    color: #f8fafc;
}

:global([data-theme="dark"]) .no-audio[b-6vfkhbk45l],
[data-theme="dark"] .no-audio[b-6vfkhbk45l] {
    color: #94a3b8;
}

:global([data-theme="dark"]) .part-header-tag[b-6vfkhbk45l],
[data-theme="dark"] .part-header-tag[b-6vfkhbk45l] {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.35);
}

:global([data-theme="dark"]) .passage-title[b-6vfkhbk45l],
[data-theme="dark"] .passage-title[b-6vfkhbk45l] {
    color: #ffffff;
}

:global([data-theme="dark"]) .passage-html-body[b-6vfkhbk45l],
[data-theme="dark"] .passage-html-body[b-6vfkhbk45l] {
    color: #cbd5e1;
}

:global([data-theme="dark"]) .passage-html-body p[b-6vfkhbk45l],
[data-theme="dark"] .passage-html-body p[b-6vfkhbk45l] {
    color: #cbd5e1;
}

:global([data-theme="dark"]) .passage-html-body strong[b-6vfkhbk45l],
:global([data-theme="dark"]) .passage-html-body b[b-6vfkhbk45l],
[data-theme="dark"] .passage-html-body strong[b-6vfkhbk45l],
[data-theme="dark"] .passage-html-body b[b-6vfkhbk45l] {
    color: #ffffff;
}

/* Right Pane: Question Group & Question Cards */
:global([data-theme="dark"]) .question-group-card[b-6vfkhbk45l],
[data-theme="dark"] .question-group-card[b-6vfkhbk45l] {
    background: #121622;
    border-color: #232c42;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

:global([data-theme="dark"]) .group-instruction[b-6vfkhbk45l],
[data-theme="dark"] .group-instruction[b-6vfkhbk45l] {
    background: #161c2b;
    border-left-color: #38bdf8;
    color: #cbd5e1;
}

:global([data-theme="dark"]) .review-question-card[b-6vfkhbk45l],
[data-theme="dark"] .review-question-card[b-6vfkhbk45l] {
    background: #161c2b;
    border: 1px solid #28324a;
}

:global([data-theme="dark"]) .review-question-card.is-correct[b-6vfkhbk45l],
[data-theme="dark"] .review-question-card.is-correct[b-6vfkhbk45l] {
    background: #161c2b;
    border-left: 4px solid #22c55e;
}

:global([data-theme="dark"]) .review-question-card.is-wrong[b-6vfkhbk45l],
[data-theme="dark"] .review-question-card.is-wrong[b-6vfkhbk45l] {
    background: #161c2b;
    border-left: 4px solid #ef4444;
}

:global([data-theme="dark"]) .review-question-card.is-blank[b-6vfkhbk45l],
[data-theme="dark"] .review-question-card.is-blank[b-6vfkhbk45l] {
    background: #161c2b;
    border-left: 4px solid #f59e0b;
}

:global([data-theme="dark"]) .q-num-badge.badge-correct[b-6vfkhbk45l],
[data-theme="dark"] .q-num-badge.badge-correct[b-6vfkhbk45l] {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.4);
}

:global([data-theme="dark"]) .q-num-badge.badge-wrong[b-6vfkhbk45l],
[data-theme="dark"] .q-num-badge.badge-wrong[b-6vfkhbk45l] {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.4);
}

:global([data-theme="dark"]) .q-num-badge.badge-blank[b-6vfkhbk45l],
[data-theme="dark"] .q-num-badge.badge-blank[b-6vfkhbk45l] {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.4);
}

:global([data-theme="dark"]) .is-correct .q-verdict[b-6vfkhbk45l],
[data-theme="dark"] .is-correct .q-verdict[b-6vfkhbk45l] {
    color: #4ade80;
}

:global([data-theme="dark"]) .is-wrong .q-verdict[b-6vfkhbk45l],
[data-theme="dark"] .is-wrong .q-verdict[b-6vfkhbk45l] {
    color: #f87171;
}

:global([data-theme="dark"]) .is-blank .q-verdict[b-6vfkhbk45l],
[data-theme="dark"] .is-blank .q-verdict[b-6vfkhbk45l] {
    color: #fbbf24;
}

:global([data-theme="dark"]) .q-body-text[b-6vfkhbk45l],
[data-theme="dark"] .q-body-text[b-6vfkhbk45l] {
    color: #f1f5f9;
}

/* Multiple Choice Options */
:global([data-theme="dark"]) .opt-review-item[b-6vfkhbk45l],
[data-theme="dark"] .opt-review-item[b-6vfkhbk45l] {
    background: #111622;
    border-color: #28324a;
}

:global([data-theme="dark"]) .opt-review-item.opt-correct[b-6vfkhbk45l],
[data-theme="dark"] .opt-review-item.opt-correct[b-6vfkhbk45l] {
    background: rgba(34, 197, 94, 0.14);
    border-color: rgba(34, 197, 94, 0.5);
}

:global([data-theme="dark"]) .opt-review-item.opt-wrong[b-6vfkhbk45l],
[data-theme="dark"] .opt-review-item.opt-wrong[b-6vfkhbk45l] {
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.5);
}

:global([data-theme="dark"]) .opt-label[b-6vfkhbk45l],
[data-theme="dark"] .opt-label[b-6vfkhbk45l] {
    color: #94a3b8;
}

:global([data-theme="dark"]) .opt-text[b-6vfkhbk45l],
[data-theme="dark"] .opt-text[b-6vfkhbk45l] {
    color: #f1f5f9;
}

:global([data-theme="dark"]) .opt-tag.correct[b-6vfkhbk45l],
[data-theme="dark"] .opt-tag.correct[b-6vfkhbk45l] {
    background: #22c55e;
    color: #ffffff;
}

:global([data-theme="dark"]) .opt-tag.wrong[b-6vfkhbk45l],
[data-theme="dark"] .opt-tag.wrong[b-6vfkhbk45l] {
    background: #ef4444;
    color: #ffffff;
}

/* Answer Comparison Box (Student vs Correct Answer) */
:global([data-theme="dark"]) .answer-comparison-box[b-6vfkhbk45l],
[data-theme="dark"] .answer-comparison-box[b-6vfkhbk45l] {
    background: #111622;
    border: 1px solid #232c42;
}

:global([data-theme="dark"]) .answer-comparison-box.box-correct[b-6vfkhbk45l],
[data-theme="dark"] .answer-comparison-box.box-correct[b-6vfkhbk45l] {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.4);
}

:global([data-theme="dark"]) .answer-comparison-box.box-wrong[b-6vfkhbk45l],
[data-theme="dark"] .answer-comparison-box.box-wrong[b-6vfkhbk45l] {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.4);
}

:global([data-theme="dark"]) .answer-comparison-box.box-blank[b-6vfkhbk45l],
[data-theme="dark"] .answer-comparison-box.box-blank[b-6vfkhbk45l] {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.4);
}

:global([data-theme="dark"]) .ans-lbl[b-6vfkhbk45l],
[data-theme="dark"] .ans-lbl[b-6vfkhbk45l] {
    color: #94a3b8;
}

:global([data-theme="dark"]) .ans-val.student.c-correct[b-6vfkhbk45l],
[data-theme="dark"] .ans-val.student.c-correct[b-6vfkhbk45l] {
    color: #4ade80;
}

:global([data-theme="dark"]) .ans-val.student.c-wrong[b-6vfkhbk45l],
[data-theme="dark"] .ans-val.student.c-wrong[b-6vfkhbk45l] {
    color: #f87171;
}

:global([data-theme="dark"]) .ans-val.correct[b-6vfkhbk45l],
[data-theme="dark"] .ans-val.correct[b-6vfkhbk45l] {
    color: #4ade80;
}

:global([data-theme="dark"]) .accepted-hint[b-6vfkhbk45l],
[data-theme="dark"] .accepted-hint[b-6vfkhbk45l] {
    color: #cbd5e1;
}

/* Bottom Sticky Question Navigator Bar */
:global([data-theme="dark"]) .bottom-navigator-bar[b-6vfkhbk45l],
[data-theme="dark"] .bottom-navigator-bar[b-6vfkhbk45l] {
    background: #0f131c;
    border-top: 1.5px solid #232c42;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.65);
}

:global([data-theme="dark"]) .nav-title[b-6vfkhbk45l],
[data-theme="dark"] .nav-title[b-6vfkhbk45l] {
    color: #ffffff;
}

:global([data-theme="dark"]) .nav-legend[b-6vfkhbk45l],
[data-theme="dark"] .nav-legend[b-6vfkhbk45l] {
    color: #94a3b8;
}

:global([data-theme="dark"]) .q-nav-btn.correct[b-6vfkhbk45l],
[data-theme="dark"] .q-nav-btn.correct[b-6vfkhbk45l] {
    background: rgba(34, 197, 94, 0.22);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.5);
}

:global([data-theme="dark"]) .q-nav-btn.wrong[b-6vfkhbk45l],
[data-theme="dark"] .q-nav-btn.wrong[b-6vfkhbk45l] {
    background: rgba(239, 68, 68, 0.22);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.5);
}

:global([data-theme="dark"]) .q-nav-btn.blank[b-6vfkhbk45l],
[data-theme="dark"] .q-nav-btn.blank[b-6vfkhbk45l] {
    background: rgba(245, 158, 11, 0.22);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.5);
}

/* Writing Review Section */
:global([data-theme="dark"]) .writing-review-container[b-6vfkhbk45l],
[data-theme="dark"] .writing-review-container[b-6vfkhbk45l] {
    background: #121622;
    border-color: #232c42;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

:global([data-theme="dark"]) .writing-task-tabs[b-6vfkhbk45l],
[data-theme="dark"] .writing-task-tabs[b-6vfkhbk45l] {
    border-bottom-color: #232c42;
}

:global([data-theme="dark"]) .w-tab-btn[b-6vfkhbk45l],
[data-theme="dark"] .w-tab-btn[b-6vfkhbk45l] {
    background: #161c2b;
    border-color: #28324a;
    color: #cbd5e1;
}

:global([data-theme="dark"]) .w-tab-btn:hover[b-6vfkhbk45l],
[data-theme="dark"] .w-tab-btn:hover[b-6vfkhbk45l] {
    background: #1d2538;
    color: #ffffff;
}

:global([data-theme="dark"]) .w-tab-btn.active[b-6vfkhbk45l],
[data-theme="dark"] .w-tab-btn.active[b-6vfkhbk45l] {
    background: #9333ea;
    border-color: #a855f7;
    color: #ffffff;
}

:global([data-theme="dark"]) .view-pill-btn[b-6vfkhbk45l],
[data-theme="dark"] .view-pill-btn[b-6vfkhbk45l] {
    background: #161c2b;
    border-color: #28324a;
    color: #cbd5e1;
}

:global([data-theme="dark"]) .view-pill-btn.active[b-6vfkhbk45l],
[data-theme="dark"] .view-pill-btn.active[b-6vfkhbk45l] {
    background: #0284c7;
    border-color: #38bdf8;
    color: #ffffff;
}

:global([data-theme="dark"]) .view-pill-btn.model.active[b-6vfkhbk45l],
[data-theme="dark"] .view-pill-btn.model.active[b-6vfkhbk45l] {
    background: linear-gradient(135deg, #059669, #10b981);
    color: #ffffff;
}

:global([data-theme="dark"]) .w-prompt-pane[b-6vfkhbk45l],
[data-theme="dark"] .w-prompt-pane[b-6vfkhbk45l] {
    background: #161c2b;
    border-color: #28324a;
}

:global([data-theme="dark"]) .w-prompt-card h3[b-6vfkhbk45l],
[data-theme="dark"] .w-prompt-card h3[b-6vfkhbk45l] {
    color: #ffffff;
}

:global([data-theme="dark"]) .w-instruction[b-6vfkhbk45l],
[data-theme="dark"] .w-instruction[b-6vfkhbk45l] {
    color: #94a3b8;
}

:global([data-theme="dark"]) .w-prompt-body[b-6vfkhbk45l],
[data-theme="dark"] .w-prompt-body[b-6vfkhbk45l] {
    color: #cbd5e1;
}

:global([data-theme="dark"]) .w-word-req[b-6vfkhbk45l],
[data-theme="dark"] .w-word-req[b-6vfkhbk45l] {
    background: rgba(56, 189, 248, 0.15);
    border-left: 4px solid #38bdf8;
    color: #7dd3fc;
}

:global([data-theme="dark"]) .w-prompt-img-box img[b-6vfkhbk45l],
[data-theme="dark"] .w-prompt-img-box img[b-6vfkhbk45l] {
    border-color: #28324a;
}

:global([data-theme="dark"]) .essay-paper[b-6vfkhbk45l],
[data-theme="dark"] .essay-paper[b-6vfkhbk45l] {
    background: #161c2b;
    border-color: #28324a;
}

:global([data-theme="dark"]) .paper-header[b-6vfkhbk45l],
[data-theme="dark"] .paper-header[b-6vfkhbk45l] {
    border-bottom-color: #232c42;
}

:global([data-theme="dark"]) .paper-header h4[b-6vfkhbk45l],
[data-theme="dark"] .paper-header h4[b-6vfkhbk45l] {
    color: #ffffff;
}

:global([data-theme="dark"]) .word-counter[b-6vfkhbk45l],
[data-theme="dark"] .word-counter[b-6vfkhbk45l] {
    color: #94a3b8;
}

:global([data-theme="dark"]) .essay-text[b-6vfkhbk45l],
:global([data-theme="dark"]) .model-essay-text[b-6vfkhbk45l],
[data-theme="dark"] .essay-text[b-6vfkhbk45l],
[data-theme="dark"] .model-essay-text[b-6vfkhbk45l] {
    color: #f1f5f9;
}

:global([data-theme="dark"]) .no-essay-alert[b-6vfkhbk45l],
[data-theme="dark"] .no-essay-alert[b-6vfkhbk45l] {
    color: #94a3b8;
}

/* Speaking Review Section */
:global([data-theme="dark"]) .sp-review-part-card[b-6vfkhbk45l],
[data-theme="dark"] .sp-review-part-card[b-6vfkhbk45l] {
    background: #121622;
    border-color: #232c42;
}

:global([data-theme="dark"]) .sp-part-header h3[b-6vfkhbk45l],
[data-theme="dark"] .sp-part-header h3[b-6vfkhbk45l] {
    color: #ffffff;
}

:global([data-theme="dark"]) .sp-caption[b-6vfkhbk45l],
[data-theme="dark"] .sp-caption[b-6vfkhbk45l] {
    color: #94a3b8;
}

:global([data-theme="dark"]) .sp-topic-box[b-6vfkhbk45l],
[data-theme="dark"] .sp-topic-box[b-6vfkhbk45l] {
    background: rgba(234, 88, 12, 0.15);
    border-left-color: #ea580c;
    color: #fdba74;
}

:global([data-theme="dark"]) .sp-q-card[b-6vfkhbk45l],
[data-theme="dark"] .sp-q-card[b-6vfkhbk45l] {
    background: #161c2b;
    border-color: #28324a;
}

:global([data-theme="dark"]) .sp-q-top h4[b-6vfkhbk45l],
[data-theme="dark"] .sp-q-top h4[b-6vfkhbk45l] {
    color: #ffffff;
}

:global([data-theme="dark"]) .sp-student-answer[b-6vfkhbk45l],
[data-theme="dark"] .sp-student-answer[b-6vfkhbk45l] {
    background: #111622;
    border-color: #28324a;
}

:global([data-theme="dark"]) .transcript-row[b-6vfkhbk45l],
[data-theme="dark"] .transcript-row[b-6vfkhbk45l] {
    color: #94a3b8;
}

:global([data-theme="dark"]) .transcript-text[b-6vfkhbk45l],
[data-theme="dark"] .transcript-text[b-6vfkhbk45l] {
    color: #f1f5f9;
}

:global([data-theme="dark"]) .sp-duration[b-6vfkhbk45l],
[data-theme="dark"] .sp-duration[b-6vfkhbk45l] {
    color: #94a3b8;
}

:global([data-theme="dark"]) .sp-no-recording[b-6vfkhbk45l],
[data-theme="dark"] .sp-no-recording[b-6vfkhbk45l] {
    color: #64748b;
}

/* Loading & Empty States */
:global([data-theme="dark"]) .review-loading[b-6vfkhbk45l],
:global([data-theme="dark"]) .review-empty[b-6vfkhbk45l],
[data-theme="dark"] .review-loading[b-6vfkhbk45l],
[data-theme="dark"] .review-empty[b-6vfkhbk45l] {
    background: #121622;
    border: 1px solid #232c42;
    color: #f8fafc;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

:global([data-theme="dark"]) .spinner[b-6vfkhbk45l],
[data-theme="dark"] .spinner[b-6vfkhbk45l] {
    border-color: #232c42;
    border-top-color: #38bdf8;
}

/* /Pages/Ielts/IeltsGrammar.razor.rz.scp.css */
/* ========================================================================= */
/* IELTS GRAMMAR STRUCTURES EXPLORER                                         */
/* ========================================================================= */

.ielts-grammar-page[b-62e418frwb] {
    max-width: 1320px;
    margin: 0 auto;
    padding: 24px 24px 70px;
    box-sizing: border-box;
    font-family: 'Be Vietnam Pro', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1e293b;
}

/* Header Card */
.grammar-header-card[b-62e418frwb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.header-left[b-62e418frwb] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-icon-badge[b-62e418frwb] {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
    flex-shrink: 0;
}

.grammar-title[b-62e418frwb] {
    font-size: 1.65rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.02em;
}

.grammar-subtitle[b-62e418frwb] {
    color: #64748b;
    margin: 4px 0 0;
    font-size: 0.92rem;
}

.header-right[b-62e418frwb] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-admin-link[b-62e418frwb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    color: #475569;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-admin-link:hover[b-62e418frwb] {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #94a3b8;
}

/* View Mode Toggle */
.view-mode-toggle[b-62e418frwb] {
    display: flex;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 12px;
    gap: 4px;
}

.toggle-btn[b-62e418frwb] {
    border: none;
    background: transparent;
    padding: 8px 14px;
    border-radius: 9px;
    font-size: 0.88rem;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}

.toggle-btn:hover[b-62e418frwb] {
    color: #0f172a;
}

.toggle-btn.active[b-62e418frwb] {
    background: #ffffff;
    color: #0284c7;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Quick Stats Overview */
.stats-overview-bar[b-62e418frwb] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.stat-card[b-62e418frwb] {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 16px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover[b-62e418frwb] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
}

.stat-icon[b-62e418frwb] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.stat-icon.bg-blue[b-62e418frwb] { background: #e0f2fe; color: #0284c7; }
.stat-icon.bg-purple[b-62e418frwb] { background: #f3e8ff; color: #9333ea; }
.stat-icon.bg-emerald[b-62e418frwb] { background: #d1fae5; color: #059669; }
.stat-icon.bg-amber[b-62e418frwb] { background: #fef3c7; color: #d97706; }

.stat-content[b-62e418frwb] {
    display: flex;
    flex-direction: column;
}

.stat-num[b-62e418frwb] {
    font-size: 1.35rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
}

.stat-lbl[b-62e418frwb] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
    margin-top: 2px;
}

/* Filter Panel Card */
.filter-panel-card[b-62e418frwb] {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 18px;
    padding: 16px 20px;
    margin-bottom: 24px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.02);
}

.filter-top-row[b-62e418frwb] {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
}

.search-input-group[b-62e418frwb] {
    flex: 1;
    min-width: 280px;
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon[b-62e418frwb] {
    position: absolute;
    left: 14px;
    color: #94a3b8;
    font-size: 1rem;
    pointer-events: none;
}

.search-input-group input[b-62e418frwb] {
    width: 100%;
    padding: 10px 38px 10px 40px;
    border-radius: 12px;
    border: 1.5px solid #cbd5e1;
    background: #f8fafc;
    font-size: 0.92rem;
    font-family: inherit;
    color: #0f172a;
    transition: all 0.2s ease;
    outline: none;
}

.search-input-group input:focus[b-62e418frwb] {
    background: #ffffff;
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.btn-clear-search[b-62e418frwb] {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 1rem;
    padding: 2px;
}

.btn-clear-search:hover[b-62e418frwb] {
    color: #64748b;
}

/* Search Suggestions Dropdown */
.search-suggestions-dropdown[b-62e418frwb] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    max-height: 320px;
    overflow-y: auto;
    padding: 8px 0;
    animation: fadeIn-b-62e418frwb 0.2s ease;
}

.suggestions-header[b-62e418frwb] {
    padding: 8px 14px 6px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid #f1f5f9;
}

.suggestions-list[b-62e418frwb] {
    display: flex;
    flex-direction: column;
}

.suggestion-item[b-62e418frwb] {
    padding: 10px 14px;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    text-align: left;
    font-size: 0.88rem;
    font-weight: 600;
    color: #1e293b;
    cursor: pointer;
    transition: all 0.15s ease;
    width: 100%;
}

.suggestion-item:hover[b-62e418frwb], .suggestion-item.active[b-62e418frwb] {
    background: #f0fdf4;
    color: #0284c7;
}

.suggestion-item.active[b-62e418frwb] {
    font-weight: 800;
}

.badge-count[b-62e418frwb] {
    font-size: 0.75rem;
    color: #64748b;
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 12px;
}

/* Active Topic Chip */
.active-topic-chip-row[b-62e418frwb] {
    margin-top: 10px;
    display: flex;
    align-items: center;
}

.active-topic-chip[b-62e418frwb] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.btn-clear-topic-chip[b-62e418frwb] {
    border: none;
    background: transparent;
    color: #60a5fa;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    font-size: 1.1rem;
    line-height: 1;
    transition: color 0.15s ease;
}

.btn-clear-topic-chip:hover[b-62e418frwb] {
    color: #dc2626;
}

/* Quick Topic Pills Bar */
.quick-topic-pills-bar[b-62e418frwb] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
    overflow-x: auto;
    scrollbar-width: thin;
}

.pills-label[b-62e418frwb] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #64748b;
    white-space: nowrap;
}

.pills-container[b-62e418frwb] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

.quick-pill[b-62e418frwb] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.quick-pill:hover[b-62e418frwb] {
    border-color: #0284c7;
    color: #0284c7;
    background: #f0f9ff;
}

.quick-pill.active[b-62e418frwb] {
    background: #0284c7;
    color: #ffffff;
    border-color: #0284c7;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3);
}

.active-filter-tag[b-62e418frwb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #e0f2fe;
    color: #0369a1;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
}

.btn-remove-tag[b-62e418frwb] {
    background: none;
    border: none;
    color: #0369a1;
    font-weight: 800;
    cursor: pointer;
    padding: 0;
    font-size: 0.95rem;
    line-height: 1;
}

.filter-bottom-info[b-62e418frwb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed #e2e8f0;
    font-size: 0.85rem;
}

.result-count[b-62e418frwb] {
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.btn-reset-filters[b-62e418frwb] {
    background: none;
    border: none;
    color: #0284c7;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0;
}

.btn-reset-filters:hover[b-62e418frwb] {
    text-decoration: underline;
}

/* Toast Notification */
.copy-toast[b-62e418frwb] {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #0f172a;
    color: #ffffff;
    padding: 12px 20px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    font-size: 0.9rem;
    font-weight: 600;
    z-index: 9999;
    display: flex;
    align-items: center;
    animation: fadeIn-b-62e418frwb 0.3s ease;
}

@keyframes fadeIn-b-62e418frwb {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* CARDS GRID */
.cards-grid[b-62e418frwb] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(460px, 1fr));
    gap: 24px;
    margin-bottom: 30px;
}

@media (max-width: 992px) {
    .cards-grid[b-62e418frwb] {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

.grammar-card[b-62e418frwb] {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 20px;
    padding: 22px;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.03);
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}

.grammar-card:hover[b-62e418frwb] {
    border-color: #93c5fd;
    box-shadow: 0 12px 30px rgba(2, 132, 199, 0.08);
    transform: translateY(-3px);
}

.grammar-card.expanded[b-62e418frwb] {
    border-color: #38bdf8;
    box-shadow: 0 12px 32px rgba(2, 132, 199, 0.1);
}

/* Card Header & Badges */
.card-header[b-62e418frwb] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.card-badges[b-62e418frwb] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.band-badge[b-62e418frwb] {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
}

.band-badge.band-mastery[b-62e418frwb] {
    background: linear-gradient(135deg, #b45309 0%, #f59e0b 100%);
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.28);
}

.band-badge.band-high[b-62e418frwb] {
    background: linear-gradient(135deg, #7e22ce 0%, #a855f7 100%);
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(168, 85, 247, 0.25);
}

.band-badge.band-mid[b-62e418frwb] {
    background: #e0f2fe;
    color: #0369a1;
    border: 1px solid #bae6fd;
}

.band-badge.band-intermediate[b-62e418frwb] {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

.band-badge.band-standard[b-62e418frwb] {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.category-badge[b-62e418frwb] {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.76rem;
    font-weight: 700;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    color: #334155;
    display: inline-flex;
    align-items: center;
}

.code-badge[b-62e418frwb] {
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-weight: 700;
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
    margin-left: auto;
}

.card-topic[b-62e418frwb] {
    font-size: 1.12rem;
    font-weight: 800;
    color: #0f172a;
    display: flex;
    align-items: center;
    letter-spacing: -0.01em;
}

/* Formula Card */
.formula-card[b-62e418frwb] {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1.5px solid #cbd5e1;
    border-left: 4.5px solid #0284c7;
    border-radius: 14px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.formula-top-bar[b-62e418frwb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.formula-label[b-62e418frwb] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    display: inline-flex;
    align-items: center;
}

.formula-code-box[b-62e418frwb] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 14px;
}

.formula-code-box code[b-62e418frwb] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.95rem;
    font-weight: 700;
    color: #0369a1;
    line-height: 1.5;
    word-break: break-word;
    display: block;
}

.btn-copy-formula[b-62e418frwb] {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.btn-copy-formula:hover[b-62e418frwb] {
    background: #0284c7;
    color: #ffffff;
    border-color: #0284c7;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.25);
}

/* Usage Card */
.usage-card[b-62e418frwb] {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.usage-header[b-62e418frwb] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.usage-text[b-62e418frwb] {
    color: #1e293b;
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0;
    font-weight: 500;
}

/* Example Card */
.example-card[b-62e418frwb] {
    background: #f0fdf4;
    border: 1.5px solid #bbf7d0;
    border-left: 4.5px solid #16a34a;
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.example-header[b-62e418frwb] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #15803d;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.example-adv-text[b-62e418frwb] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #14532d;
    line-height: 1.5;
}

.example-vn-meaning[b-62e418frwb] {
    font-size: 0.86rem;
    color: #334155;
    line-height: 1.45;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px dashed #bbf7d0;
}

/* Expanded Details */
.card-expanded-details[b-62e418frwb] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 14px;
    border-top: 1.5px dashed #cbd5e1;
    animation: fadeIn-b-62e418frwb 0.25s ease;
}

.detail-card[b-62e418frwb] {
    border-radius: 14px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.detail-card-header[b-62e418frwb] {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    display: flex;
    align-items: center;
    gap: 6px;
}

.detail-card-content[b-62e418frwb] {
    font-size: 0.9rem;
    line-height: 1.55;
}

.basic-card[b-62e418frwb] {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-left: 4.5px solid #94a3b8;
}

.basic-card .detail-card-header[b-62e418frwb] {
    color: #64748b;
}

.basic-card .basic-text[b-62e418frwb] {
    color: #475569;
    font-style: italic;
}

.mistake-card[b-62e418frwb] {
    background: #fff1f2;
    border: 1.5px solid #fecdd3;
    border-left: 4.5px solid #e11d48;
}

.mistake-card .detail-card-header[b-62e418frwb] {
    color: #be123c;
}

.mistake-card .mistake-text[b-62e418frwb] {
    color: #9f1239;
    font-weight: 600;
}

.practice-card[b-62e418frwb] {
    background: #fefce8;
    border: 1.5px solid #fef08a;
    border-left: 4.5px solid #eab308;
}

.practice-card .detail-card-header[b-62e418frwb] {
    color: #a16207;
}

.practice-card .practice-text[b-62e418frwb] {
    color: #713f12;
    font-weight: 600;
}

/* Card Footer */
.card-footer[b-62e418frwb] {
    margin-top: auto;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.source-ref-badge[b-62e418frwb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    font-weight: 600;
    color: #0369a1;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 8px;
    padding: 6px 12px;
    line-height: 1.4;
    word-break: break-word;
}

.source-ref-badge i[b-62e418frwb] {
    font-size: 0.85rem;
    flex-shrink: 0;
}

.btn-toggle-expand[b-62e418frwb] {
    width: 100%;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 16px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #0284c7;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-toggle-expand:hover[b-62e418frwb] {
    background: #f0f9ff;
    border-color: #0284c7;
    color: #0369a1;
    box-shadow: 0 3px 10px rgba(2, 132, 199, 0.12);
}

.btn-toggle-expand.active[b-62e418frwb] {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1d4ed8;
}

.table-ref-source[b-62e418frwb] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #0284c7;
    margin-top: 4px;
}

.detail-meta-item.source[b-62e418frwb] {
    background: #f0f9ff;
    border-left-color: #0284c7;
    color: #0369a1;
}

/* TABLE VIEW */
.table-card[b-62e418frwb] {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 30px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.02);
}

.grammar-table[b-62e418frwb] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.grammar-table thead tr[b-62e418frwb] {
    background: #f8fafc;
    border-bottom: 1.5px solid #e2e8f0;
}

.grammar-table th[b-62e418frwb] {
    padding: 12px 16px;
    text-align: left;
    font-weight: 700;
    color: #475569;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.grammar-table td[b-62e418frwb] {
    padding: 14px 16px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: top;
}

.grammar-table tbody tr:hover[b-62e418frwb] {
    background: #f8fafc;
}

.structure-code[b-62e418frwb] {
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-weight: 800;
    font-size: 0.78rem;
    color: #0284c7;
    display: block;
    margin-bottom: 4px;
}

.badges-stack[b-62e418frwb] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.table-formula-box[b-62e418frwb] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.table-formula-box code[b-62e418frwb] {
    background: #f1f5f9;
    color: #0369a1;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 0.85rem;
}

.btn-copy-mini[b-62e418frwb] {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 2px;
}

.btn-copy-mini:hover[b-62e418frwb] {
    color: #0284c7;
}

.adv-example-box[b-62e418frwb] {
    font-weight: 600;
    color: #0f172a;
    line-height: 1.45;
}

.vn-meaning-box[b-62e418frwb] {
    margin-top: 4px;
}

.btn-table-expand[b-62e418frwb] {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-table-expand:hover[b-62e418frwb], .btn-table-expand.active[b-62e418frwb] {
    background: #0284c7;
    color: #ffffff;
    border-color: #0284c7;
}

.details-row td[b-62e418frwb] {
    background: #f8fafc;
    padding: 16px 20px;
    border-bottom: 2px solid #e2e8f0;
}

.details-expanded-pane[b-62e418frwb] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.details-grid[b-62e418frwb] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px;
}

.details-meta-grid[b-62e418frwb] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.detail-meta-item[b-62e418frwb] {
    font-size: 0.84rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 12px;
}

.detail-meta-item.mistake[b-62e418frwb] {
    background: #fff1f2;
    border-color: #fecdd3;
    color: #9f1239;
}

.detail-meta-item.practice[b-62e418frwb] {
    background: #fefce8;
    border-color: #fef08a;
    color: #854d0e;
}

/* Pagination */
.pagination-card[b-62e418frwb] {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 16px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.pagination-info[b-62e418frwb] {
    font-size: 0.88rem;
    font-weight: 600;
    color: #475569;
}

.pagination-controls[b-62e418frwb] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-size-select[b-62e418frwb] {
    padding: 6px 12px;
    border-radius: 8px;
    border: 1.5px solid #cbd5e1;
    background: #f8fafc;
    font-size: 0.84rem;
    font-weight: 600;
    color: #334155;
    outline: none;
    cursor: pointer;
}

.page-buttons[b-62e418frwb] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.btn-page[b-62e418frwb] {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1.5px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.btn-page:hover:not(:disabled)[b-62e418frwb] {
    border-color: #0284c7;
    color: #0284c7;
}

.btn-page.active[b-62e418frwb] {
    background: #0284c7;
    color: #ffffff;
    border-color: #0284c7;
}

.btn-page:disabled[b-62e418frwb] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Loading & Empty States */
.loading-state[b-62e418frwb], .empty-state[b-62e418frwb] {
    text-align: center;
    padding: 60px 20px;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 18px;
    margin-bottom: 30px;
}

.empty-icon[b-62e418frwb] {
    font-size: 3rem;
    color: #94a3b8;
    margin-bottom: 12px;
}

.empty-state h3[b-62e418frwb] {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 6px;
}

.btn-reset-filters-large[b-62e418frwb] {
    margin-top: 14px;
    background: #0284c7;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-reset-filters-large:hover[b-62e418frwb] {
    background: #0369a1;
}

/* Responsive */
@media (max-width: 768px) {
    .ielts-grammar-page[b-62e418frwb] {
        padding: 16px 12px 60px;
    }

    .cards-grid[b-62e418frwb] {
        grid-template-columns: 1fr;
    }

    .header-right[b-62e418frwb] {
        width: 100%;
        justify-content: space-between;
    }

    .filter-top-row[b-62e418frwb] {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-dropdowns[b-62e418frwb] {
        flex-direction: column;
    }

    .pagination-card[b-62e418frwb] {
        flex-direction: column;
        align-items: stretch;
    }

    .pagination-controls[b-62e418frwb] {
        justify-content: space-between;
    }
}

/* ========================================================================= */
/* TAB SWITCHER & CẨM NANG NGỮ PHÁP TOÀN DIỆN (ACADEMIC MASTERCLASS STYLE)    */
/* ========================================================================= */

.grammar-tab-switch-container[b-62e418frwb] {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}

.grammar-main-tabs[b-62e418frwb] {
    display: inline-flex;
    background: #0f172a;
    padding: 6px;
    border-radius: 16px;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.25);
}

.main-tab-btn[b-62e418frwb] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    border: none;
    background: transparent;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-tab-btn .tab-icon[b-62e418frwb] {
    font-size: 1.15rem;
}

.main-tab-btn:hover[b-62e418frwb] {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.main-tab-btn.active[b-62e418frwb] {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.4);
}

.tab-badge[b-62e418frwb] {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
}

.main-tab-btn.active .tab-badge[b-62e418frwb] {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

.main-tab-btn.active .badge-highlight[b-62e418frwb] {
    background: #fde047;
    color: #0f172a;
}

/* ── Signature Academic Dark Sapphire Hero Banner ── */
.academic-hero-banner[b-62e418frwb] {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #091a2f 0%, #0f2744 48%, #075985 100%);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 22px;
    padding: 44px 32px 36px;
    margin-bottom: 32px;
    box-shadow: 0 16px 36px -8px rgba(9, 26, 47, 0.35);
    color: #ffffff;
}

.hero-glow-cyan[b-62e418frwb] {
    position: absolute;
    top: -60px;
    right: -60px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.35) 0%, rgba(14, 165, 233, 0) 70%);
    pointer-events: none;
}

.hero-glow-indigo[b-62e418frwb] {
    position: absolute;
    bottom: -80px;
    left: -80px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.22) 0%, rgba(99, 102, 241, 0) 70%);
    pointer-events: none;
}

.hero-grid-pattern[b-62e418frwb] {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
    opacity: 0.65;
}

.hero-inner-content[b-62e418frwb] {
    position: relative;
    z-index: 2;
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
}

.hero-top-badges[b-62e418frwb] {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.hero-chip-brand[b-62e418frwb], .hero-chip-standard[b-62e418frwb] {
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 4px 12px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
}

.hero-chip-brand[b-62e418frwb] {
    background: rgba(56, 189, 248, 0.14);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.35);
}

.hero-chip-standard[b-62e418frwb] {
    background: rgba(253, 224, 71, 0.12);
    color: #fde047;
    border: 1px solid rgba(253, 224, 71, 0.3);
}

.hero-title[b-62e418frwb] {
    font-size: 2.35rem;
    font-weight: 850;
    color: #ffffff;
    letter-spacing: -0.03em;
    margin: 0 0 12px 0;
    line-height: 1.25;
}

.hero-subtitle[b-62e418frwb] {
    font-size: 1.05rem;
    line-height: 1.65;
    color: #cbd5e1;
    margin: 0 auto 28px auto;
    max-width: 780px;
}

.hero-subtitle strong[b-62e418frwb] {
    color: #38bdf8;
    font-weight: 700;
}

/* Hero Stats Row */
.hero-stats-row[b-62e418frwb] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.hero-stat-box[b-62e418frwb] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 8px 16px;
    border-radius: 12px;
    backdrop-filter: blur(8px);
}

.stat-icon-wrap[b-62e418frwb] {
    font-size: 1.2rem;
    color: #38bdf8;
    display: flex;
    align-items: center;
}

.stat-info[b-62e418frwb] {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.stat-num[b-62e418frwb] {
    font-size: 1.25rem;
    font-weight: 850;
    color: #ffffff;
    line-height: 1.1;
}

.stat-lbl[b-62e418frwb] {
    font-size: 0.72rem;
    color: #94a3b8;
    font-weight: 600;
}

.hero-stat-sep[b-62e418frwb] {
    width: 1px;
    height: 32px;
    background: rgba(255, 255, 255, 0.15);
}

/* Guide Search Bar */
.guide-search-wrapper[b-62e418frwb] {
    position: relative;
    max-width: 660px;
    margin: 0 auto;
}

.guide-search-icon[b-62e418frwb] {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #0284c7;
    font-size: 1.2rem;
}

.guide-search-wrapper input[b-62e418frwb] {
    width: 100%;
    padding: 15px 46px 15px 50px;
    border-radius: 9999px;
    border: 2px solid rgba(255, 255, 255, 0.8);
    background: #ffffff;
    font-size: 0.96rem;
    color: #0f172a;
    outline: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    transition: all 0.25s ease;
    box-sizing: border-box;
}

.guide-search-wrapper input:focus[b-62e418frwb] {
    border-color: #38bdf8;
    box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.3), 0 8px 24px rgba(0, 0, 0, 0.2);
}

.btn-clear-guide-search[b-62e418frwb] {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 1.15rem;
    padding: 0;
}

.btn-clear-guide-search:hover[b-62e418frwb] {
    color: #475569;
}

/* ── Category Fast Filter Pills ── */
.guide-nav-pills-bar[b-62e418frwb] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 34px;
}

.guide-nav-pill[b-62e418frwb] {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 9999px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #334155;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.guide-nav-pill:hover[b-62e418frwb] {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #0f172a;
    transform: translateY(-1px);
}

.guide-nav-pill.active[b-62e418frwb] {
    background: #0284c7;
    color: #ffffff;
    border-color: #0284c7;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35);
}

/* ── Guide Sections Container ── */
.guide-sections-container[b-62e418frwb] {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.guide-section-block[b-62e418frwb] {
    display: flex;
    flex-direction: column;
}

.guide-section-header[b-62e418frwb] {
    margin-bottom: 22px;
}

.section-title-line[b-62e418frwb] {
    margin-bottom: 8px;
}

.module-chip[b-62e418frwb] {
    display: inline-flex;
    align-items: center;
    font-size: 0.76rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 12px;
    border-radius: 6px;
    border: 1px solid;
}

.guide-section-title[b-62e418frwb] {
    font-size: 1.75rem;
    font-weight: 850;
    color: #0f172a;
    letter-spacing: -0.02em;
    margin: 0 0 6px 0;
}

.guide-section-desc[b-62e418frwb] {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0;
    max-width: 840px;
}

/* ── 2-Column Academic Topic Cards Grid ── */
.guide-cards-grid[b-62e418frwb] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.academic-topic-card[b-62e418frwb] {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 22px 24px;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
}

.academic-topic-card:hover[b-62e418frwb] {
    border-color: #38bdf8;
    transform: translateY(-4px);
    box-shadow: 0 14px 30px -4px rgba(2, 132, 199, 0.15);
}

.academic-topic-card[b-62e418frwb]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #0284c7;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.academic-topic-card:hover[b-62e418frwb]::before {
    opacity: 1;
}

/* Card Top Bar */
.topic-top-bar[b-62e418frwb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.topic-icon-squircle[b-62e418frwb] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.3rem;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

.topic-badges-right[b-62e418frwb] {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.skill-target-chip[b-62e418frwb] {
    font-size: 0.72rem;
    font-weight: 750;
    background: #f0f9ff;
    color: #0369a1;
    border: 1px solid #bae6fd;
    padding: 3px 9px;
    border-radius: 6px;
}

.difficulty-chip[b-62e418frwb] {
    font-size: 0.7rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
}

.chip-basic[b-62e418frwb] { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.chip-intermediate[b-62e418frwb] { background: #e0e7ff; color: #4338ca; border: 1px solid #c7d2fe; }
.chip-advanced[b-62e418frwb] { background: #fce7f3; color: #be185d; border: 1px solid #fbcfe8; }
.chip-general[b-62e418frwb] { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }

/* Card Body */
.topic-body-area[b-62e418frwb] {
    flex: 1;
}

.topic-card-title[b-62e418frwb] {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 2px 0;
    line-height: 1.35;
}

.topic-en-subtitle[b-62e418frwb] {
    font-size: 0.84rem;
    font-weight: 600;
    color: #0284c7;
    margin-bottom: 8px;
}

.topic-card-desc[b-62e418frwb] {
    color: #64748b;
    font-size: 0.88rem;
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Formula Preview Code Pill */
.topic-formula-pill[b-62e418frwb] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 6px 10px;
    margin-top: 12px;
}

.pill-lbl[b-62e418frwb] {
    font-size: 0.75rem;
    font-weight: 700;
    color: #475569;
    flex-shrink: 0;
}

.pill-code[b-62e418frwb] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.84rem;
    font-weight: 700;
    color: #0f172a;
    background: transparent;
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Bottom Bar */
.topic-bottom-bar[b-62e418frwb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
}

.topic-read-time[b-62e418frwb] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #94a3b8;
}

.topic-action-btn[b-62e418frwb] {
    font-size: 0.85rem;
    font-weight: 750;
    color: #0284c7;
    display: inline-flex;
    align-items: center;
    transition: transform 0.2s ease, color 0.2s ease;
}

.academic-topic-card:hover .topic-action-btn[b-62e418frwb] {
    color: #0369a1;
    transform: translateX(4px);
}

.empty-search-state[b-62e418frwb] {
    text-align: center;
    padding: 60px 20px;
    background: #ffffff;
    border-radius: 16px;
    border: 1px dashed #cbd5e1;
}

@media (max-width: 900px) {
    .guide-cards-grid[b-62e418frwb] {
        grid-template-columns: 1fr;
    }
    .hero-title[b-62e418frwb] {
        font-size: 1.85rem;
    }
    .academic-hero-banner[b-62e418frwb] {
        padding: 32px 16px 26px;
    }
    .hero-stat-sep[b-62e418frwb] {
        display: none;
    }
    .hero-stats-row[b-62e418frwb] {
        gap: 10px;
    }
}


/* =========================================================================
   Source Reference Link Styles
   ========================================================================= */

.source-ref-link[b-62e418frwb] {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
    transition: color 0.15s ease, border-bottom-color 0.15s ease;
}

.source-ref-link:hover[b-62e418frwb] {
    color: #0284c7;
    border-bottom-color: #0284c7;
    text-decoration: none;
}

.source-ref-link[b-62e418frwb]::after {
    content: " ↗";
    font-size: 0.75em;
    opacity: 0.6;
    vertical-align: super;
}

/* ========================================================================= */
/* DARK MODE OVERRIDES (OBSIDIAN NAVY THEME)                                 */
/* ========================================================================= */
[data-theme="dark"] .ielts-grammar-page[b-62e418frwb] {
    color: #f8fafc;
}

[data-theme="dark"] .grammar-title[b-62e418frwb] {
    color: #f8fafc;
}

[data-theme="dark"] .grammar-subtitle[b-62e418frwb] {
    color: #94a3b8;
}

[data-theme="dark"] .btn-admin-link[b-62e418frwb] {
    background: #111d33;
    border-color: #223554;
    color: #cbd5e1;
}

[data-theme="dark"] .btn-admin-link:hover[b-62e418frwb] {
    background: #1c2c4a;
    color: #f8fafc;
}

[data-theme="dark"] .view-mode-toggle[b-62e418frwb] {
    background: #111d33;
    border: 1px solid #223554;
}

[data-theme="dark"] .toggle-btn[b-62e418frwb] {
    color: #94a3b8;
}

[data-theme="dark"] .toggle-btn:hover[b-62e418frwb] {
    color: #f8fafc;
}

[data-theme="dark"] .toggle-btn.active[b-62e418frwb] {
    background: #15243f;
    color: #38bdf8;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .stat-card[b-62e418frwb] {
    background: #15243f;
    border-color: #223554;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .stat-num[b-62e418frwb] {
    color: #f8fafc;
}

[data-theme="dark"] .stat-lbl[b-62e418frwb] {
    color: #94a3b8;
}

[data-theme="dark"] .filter-panel-card[b-62e418frwb] {
    background: #15243f;
    border-color: #223554;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .search-input-group input[b-62e418frwb] {
    background: #111d33;
    border-color: #223554;
    color: #f8fafc;
}

[data-theme="dark"] .search-input-group input:focus[b-62e418frwb] {
    background: #15243f;
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
}

[data-theme="dark"] .search-suggestions-dropdown[b-62e418frwb] {
    background: #15243f;
    border-color: #223554;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .suggestions-header[b-62e418frwb] {
    color: #94a3b8;
    border-bottom-color: #223554;
}

[data-theme="dark"] .suggestion-item[b-62e418frwb] {
    color: #f8fafc;
}

[data-theme="dark"] .suggestion-item:hover[b-62e418frwb],
[data-theme="dark"] .suggestion-item.active[b-62e418frwb] {
    background: #1c2c4a;
    color: #38bdf8;
}

[data-theme="dark"] .quick-pill[b-62e418frwb] {
    background: #111d33;
    border-color: #223554;
    color: #cbd5e1;
}

[data-theme="dark"] .quick-pill:hover[b-62e418frwb] {
    background: #1c2c4a;
    border-color: #38bdf8;
    color: #38bdf8;
}

[data-theme="dark"] .quick-pill.active[b-62e418frwb] {
    background: #0284c7;
    color: #ffffff;
    border-color: #38bdf8;
}

[data-theme="dark"] .grammar-card[b-62e418frwb] {
    background: #15243f;
    border-color: #223554;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .grammar-card:hover[b-62e418frwb] {
    border-color: #38bdf8;
    box-shadow: 0 12px 30px rgba(56, 189, 248, 0.15);
}

[data-theme="dark"] .card-topic[b-62e418frwb] {
    color: #f8fafc;
}

[data-theme="dark"] .category-badge[b-62e418frwb] {
    background: #111d33;
    border-color: #223554;
    color: #cbd5e1;
}

[data-theme="dark"] .code-badge[b-62e418frwb] {
    background: #111d33;
    border-color: #223554;
    color: #94a3b8;
}

[data-theme="dark"] .formula-card[b-62e418frwb] {
    background: #111d33;
    border-color: #223554;
    border-left-color: #38bdf8;
}

[data-theme="dark"] .formula-label[b-62e418frwb] {
    color: #94a3b8;
}

[data-theme="dark"] .formula-code-box[b-62e418frwb] {
    background: #0b1325;
    border-color: #223554;
}

[data-theme="dark"] .formula-code-box code[b-62e418frwb] {
    color: #38bdf8;
}

[data-theme="dark"] .btn-copy-formula[b-62e418frwb] {
    background: #15243f;
    border-color: #223554;
    color: #cbd5e1;
}

[data-theme="dark"] .btn-copy-formula:hover[b-62e418frwb] {
    background: #38bdf8;
    color: #0b1325;
    border-color: #38bdf8;
}

[data-theme="dark"] .usage-card[b-62e418frwb] {
    background: #111d33;
    border-color: #223554;
}

[data-theme="dark"] .usage-header[b-62e418frwb] {
    color: #94a3b8;
}

[data-theme="dark"] .usage-text[b-62e418frwb] {
    color: #e2e8f0;
}

[data-theme="dark"] .example-card[b-62e418frwb] {
    background: #072a1e;
    border-color: #0f5132;
    border-left-color: #34d399;
}

[data-theme="dark"] .example-header[b-62e418frwb] {
    color: #34d399;
}

[data-theme="dark"] .example-adv-text[b-62e418frwb] {
    color: #d1fae5;
}

[data-theme="dark"] .example-vn-meaning[b-62e418frwb] {
    color: #94a3b8;
    border-top-color: #0f5132;
}

[data-theme="dark"] .basic-card[b-62e418frwb] {
    background: #111d33;
    border-color: #223554;
    border-left-color: #64748b;
}

[data-theme="dark"] .basic-card .detail-card-header[b-62e418frwb] {
    color: #94a3b8;
}

[data-theme="dark"] .basic-card .basic-text[b-62e418frwb] {
    color: #cbd5e1;
}

[data-theme="dark"] .mistake-card[b-62e418frwb] {
    background: #300c14;
    border-color: #5c1825;
    border-left-color: #f87171;
}

[data-theme="dark"] .mistake-card .detail-card-header[b-62e418frwb] {
    color: #f87171;
}

[data-theme="dark"] .guide-search-wrapper input[b-62e418frwb] {
    background: rgba(15, 23, 42, 0.85) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.22) !important;
    color: #f8fafc !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .guide-search-wrapper input[b-62e418frwb]::placeholder {
    color: #94a3b8 !important;
}

[data-theme="dark"] .guide-search-icon[b-62e418frwb] {
    color: #38bdf8 !important;
}

[data-theme="dark"] .stat-lbl[b-62e418frwb] {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .guide-nav-pill[b-62e418frwb] {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] .guide-nav-pill:hover[b-62e418frwb] {
    background: rgba(56, 189, 248, 0.15) !important;
    border-color: #38bdf8 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .guide-nav-pill.active[b-62e418frwb] {
    background: #0284c7 !important;
    color: #ffffff !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 0 16px rgba(2, 132, 199, 0.45) !important;
}

[data-theme="dark"] .guide-section-title[b-62e418frwb] {
    color: #f8fafc !important;
}

[data-theme="dark"] .guide-section-desc[b-62e418frwb] {
    color: #94a3b8 !important;
}

[data-theme="dark"] .academic-topic-card[b-62e418frwb] {
    background: #15243f !important;
    border-color: #223554 !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25) !important;
}

[data-theme="dark"] .academic-topic-card:hover[b-62e418frwb] {
    border-color: #38bdf8 !important;
    background: #182a4a !important;
    box-shadow: 0 14px 30px -4px rgba(56, 189, 248, 0.2) !important;
}

[data-theme="dark"] .topic-card-title[b-62e418frwb] {
    color: #f8fafc !important;
}

[data-theme="dark"] .topic-en-subtitle[b-62e418frwb] {
    color: #38bdf8 !important;
}

[data-theme="dark"] .topic-card-desc[b-62e418frwb] {
    color: #94a3b8 !important;
}

[data-theme="dark"] .topic-formula-pill[b-62e418frwb] {
    background: #111d33 !important;
    border-color: #223554 !important;
}

[data-theme="dark"] .pill-lbl[b-62e418frwb] {
    color: #94a3b8 !important;
}

[data-theme="dark"] .pill-code[b-62e418frwb] {
    color: #38bdf8 !important;
}

[data-theme="dark"] .topic-read-time[b-62e418frwb] {
    color: #94a3b8 !important;
}

[data-theme="dark"] .topic-action-btn[b-62e418frwb] {
    color: #38bdf8 !important;
}

[data-theme="dark"] .skill-target-chip[b-62e418frwb] {
    background: rgba(56, 189, 248, 0.15) !important;
    color: #38bdf8 !important;
    border-color: #0284c7 !important;
}

[data-theme="dark"] .topic-bottom-bar[b-62e418frwb] {
    border-top-color: #223554;
}

[data-theme="dark"] .empty-search-state[b-62e418frwb] {
    background: #15243f;
    border-color: #223554;
    color: #94a3b8;
}

/* /Pages/Ielts/IeltsGrammarDetail.razor.rz.scp.css */
/* ========================================================
   IELTS GRAMMAR DETAIL LESSON STYLING - COMPACT MODERN VIEW
   High Information Density, Less Scrolling, Multi-Column Layout
   ======================================================== */

.grammar-detail-page[b-rgf82qbjrm] {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0.85rem 1rem 3.5rem 1rem;
    color: #1e293b;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Top Navigation Bar */
.detail-top-nav[b-rgf82qbjrm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.breadcrumb-item a[b-rgf82qbjrm] {
    color: #0284c7;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.88rem;
}

.breadcrumb-item.active[b-rgf82qbjrm] {
    color: #475569;
    font-weight: 600;
    font-size: 0.88rem;
}

.btn-back-hub[b-rgf82qbjrm] {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.75rem;
    border-radius: 9999px;
    background: #f1f5f9;
    color: #334155;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid #cbd5e1;
}

.btn-back-hub:hover[b-rgf82qbjrm] {
    background: #0284c7;
    color: #ffffff;
    border-color: #0284c7;
}

/* ========================================================
   COMPACT UNIFIED HERO HEADER
   Combines Title, Meta & Concept in ~130px height
   ======================================================== */
.lesson-hero-compact[b-rgf82qbjrm] {
    background: #ffffff;
    border-radius: 14px;
    padding: 1.15rem 1.4rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    margin-bottom: 0.85rem;
}

.hero-top-row[b-rgf82qbjrm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.65rem;
}

.hero-badges[b-rgf82qbjrm] {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    align-items: center;
}

.section-pill[b-rgf82qbjrm], .difficulty-pill[b-rgf82qbjrm], .time-pill[b-rgf82qbjrm], .target-pill[b-rgf82qbjrm] {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.22rem 0.65rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
}

.badge-basic[b-rgf82qbjrm] { background: #dcfce7; color: #15803d; }
.badge-intermediate[b-rgf82qbjrm] { background: #e0e7ff; color: #4338ca; }
.badge-advanced[b-rgf82qbjrm] { background: #fce7f3; color: #be185d; }
.badge-general[b-rgf82qbjrm] { background: #f1f5f9; color: #475569; }
.time-pill[b-rgf82qbjrm] { background: #f8fafc; color: #64748b; border: 1px solid #e2e8f0; }
.target-pill[b-rgf82qbjrm] { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }

.btn-quick-quiz-action[b-rgf82qbjrm] {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.25);
    transition: all 0.2s ease;
}

.btn-quick-quiz-action:hover[b-rgf82qbjrm], .btn-quick-quiz-action.active[b-rgf82qbjrm] {
    background: linear-gradient(135deg, #0369a1 0%, #075985 100%);
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35);
    transform: translateY(-1px);
}

.hero-body-row[b-rgf82qbjrm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.hero-title-wrap[b-rgf82qbjrm] {
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.hero-main-title[b-rgf82qbjrm] {
    font-size: 1.7rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    margin: 0;
}

.hero-sub-title[b-rgf82qbjrm] {
    font-size: 1.05rem;
    font-weight: 600;
    color: #0284c7;
    margin: 0;
}

.hero-concept-inline[b-rgf82qbjrm] {
    flex: 1;
    min-width: 280px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 3px solid #0284c7;
    border-radius: 8px;
    padding: 0.55rem 0.85rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #334155;
    display: flex;
    align-items: center;
}

/* ========================================================
   MODERN SUB-NAV TABS (Sticky & High-Utility)
   ======================================================== */
.lesson-subnav-tabs[b-rgf82qbjrm] {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    background: #f1f5f9;
    padding: 0.35rem;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    position: sticky;
    top: 65px;
    z-index: 20;
    backdrop-filter: blur(8px);
}

.subnav-tab[b-rgf82qbjrm] {
    border: none;
    background: transparent;
    padding: 0.4rem 0.85rem;
    border-radius: 7px;
    font-size: 0.83rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
}

.subnav-tab:hover[b-rgf82qbjrm] {
    background: #e2e8f0;
    color: #0f172a;
}

.subnav-tab.active[b-rgf82qbjrm] {
    background: #ffffff;
    color: #0284c7;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    font-weight: 700;
}

.subnav-tab.tab-quiz-highlight[b-rgf82qbjrm] {
    color: #0369a1;
}

.subnav-tab.tab-quiz-highlight.active[b-rgf82qbjrm] {
    background: #0284c7;
    color: #ffffff;
}

.mini-score-pill[b-rgf82qbjrm] {
    background: #10b981;
    color: #ffffff;
    font-size: 0.72rem;
    padding: 0.1rem 0.45rem;
    border-radius: 9999px;
    margin-left: 0.4rem;
}

/* ========================================================
   LESSON SECTIONS (Compact Padding & Clean Borders)
   ======================================================== */
.lesson-section[b-rgf82qbjrm] {
    background: #ffffff;
    border-radius: 12px;
    padding: 1.15rem 1.4rem;
    border: 1px solid #e2e8f0;
    margin-bottom: 1.15rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
}

.section-title-bar[b-rgf82qbjrm] {
    display: flex;
    align-items: center;
    margin-bottom: 0.85rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #f8fafc;
}

.section-title-bar h3[b-rgf82qbjrm] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

/* ========================================================
   FORMULAS: 3-COLUMN HORIZONTAL GRID
   Saves 67% vertical space vs stacked cards
   ======================================================== */
.formulas-grid[b-rgf82qbjrm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.85rem;
}

.formula-card[b-rgf82qbjrm] {
    border-radius: 10px;
    padding: 0.85rem 1rem;
    border-left: 4px solid #2563eb;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.formula-card.variant-blue[b-rgf82qbjrm] { border-left-color: #2563eb; background: #eff6ff; }
.formula-card.variant-red[b-rgf82qbjrm] { border-left-color: #ef4444; background: #fef2f2; }
.formula-card.variant-green[b-rgf82qbjrm] { border-left-color: #10b981; background: #ecfdf5; }
.formula-card.variant-orange[b-rgf82qbjrm] { border-left-color: #f59e0b; background: #fffbeb; }
.formula-card.variant-purple[b-rgf82qbjrm] { border-left-color: #8b5cf6; background: #f5f3ff; }

.formula-type-header[b-rgf82qbjrm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.45rem;
}

.type-name[b-rgf82qbjrm] {
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #1e293b;
}

.btn-copy-formula[b-rgf82qbjrm] {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 0.15rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-copy-formula:hover[b-rgf82qbjrm] {
    background: #0284c7;
    color: #ffffff;
    border-color: #0284c7;
}

.formula-code code[b-rgf82qbjrm] {
    font-size: 1.02rem;
    font-weight: 700;
    color: #0f172a;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    word-break: break-word;
}

.formula-breakdown[b-rgf82qbjrm] {
    margin-top: 0.5rem;
    margin-bottom: 0;
    padding-left: 1rem;
    color: #475569;
    font-size: 0.85rem;
    line-height: 1.4;
}

/* ========================================================
   RULES TABLE
   ======================================================== */
.rules-table-wrapper[b-rgf82qbjrm] {
    overflow-x: auto;
}

.rules-table[b-rgf82qbjrm] {
    width: 100%;
    border-collapse: collapse;
}

.rules-table th[b-rgf82qbjrm] {
    background: #f8fafc;
    color: #475569;
    font-weight: 700;
    font-size: 0.83rem;
    padding: 0.6rem 0.85rem;
    text-align: left;
    border-bottom: 2px solid #e2e8f0;
}

.rules-table td[b-rgf82qbjrm] {
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.9rem;
}

.rules-table tr:hover td[b-rgf82qbjrm] {
    background: #f8fafc;
}

/* ========================================================
   USAGES: 2-COLUMN GRID
   ======================================================== */
.usages-list[b-rgf82qbjrm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 0.85rem;
}

.usage-item-card[b-rgf82qbjrm] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    display: flex;
    flex-direction: column;
}

.usage-item-header[b-rgf82qbjrm] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
}

.usage-num[b-rgf82qbjrm] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #0284c7;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.78rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.usage-heading[b-rgf82qbjrm] {
    font-size: 0.98rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.usage-expl[b-rgf82qbjrm] {
    color: #475569;
    font-size: 0.88rem;
    margin-bottom: 0.6rem;
    line-height: 1.45;
}

.usage-examples[b-rgf82qbjrm] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-top: auto;
}

.example-dual-row[b-rgf82qbjrm] {
    background: #ffffff;
    border-radius: 7px;
    padding: 0.55rem 0.8rem;
    border: 1px solid #e2e8f0;
}

.example-dual-row .en-text[b-rgf82qbjrm] {
    font-weight: 600;
    color: #0f172a;
    font-size: 0.9rem;
    margin-bottom: 0.15rem;
}

.example-dual-row .vi-text[b-rgf82qbjrm] {
    font-size: 0.82rem;
    color: #64748b;
}

/* ========================================================
   SIGNALS & CHIPS
   ======================================================== */
.signal-words-box .chips-list[b-rgf82qbjrm] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.signal-chip[b-rgf82qbjrm] {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    font-weight: 600;
    font-size: 0.82rem;
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
}

.placement-note[b-rgf82qbjrm] {
    background: #f8fafc;
    border-radius: 8px;
    padding: 0.6rem 0.85rem;
    border: 1px solid #e2e8f0;
    font-size: 0.88rem;
    color: #334155;
}

/* ========================================================
   COMMON PITFALLS (2-Column Grid)
   ======================================================== */
.pitfalls-list[b-rgf82qbjrm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 0.85rem;
}

.pitfall-card[b-rgf82qbjrm] {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    display: flex;
    flex-direction: column;
}

.pitfall-title[b-rgf82qbjrm] {
    color: #92400e;
    font-size: 0.92rem;
    margin-bottom: 0.5rem;
}

.comparison-row[b-rgf82qbjrm] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.wrong-box[b-rgf82qbjrm] {
    background: #ffffff;
    border: 1px solid #fca5a5;
    border-radius: 6px;
    padding: 0.45rem 0.65rem;
}

.correct-box[b-rgf82qbjrm] {
    background: #ffffff;
    border: 1px solid #86efac;
    border-radius: 6px;
    padding: 0.45rem 0.65rem;
}

.lbl-wrong[b-rgf82qbjrm] { font-weight: 700; color: #dc2626; font-size: 0.72rem; margin-right: 0.3rem; }
.code-wrong[b-rgf82qbjrm] { text-decoration: line-through; color: #991b1b; font-weight: 500; font-size: 0.85rem; }
.lbl-correct[b-rgf82qbjrm] { font-weight: 700; color: #16a34a; font-size: 0.72rem; margin-right: 0.3rem; }
.code-correct[b-rgf82qbjrm] { color: #166534; font-weight: 600; font-size: 0.85rem; }

.pitfall-expl[b-rgf82qbjrm] {
    font-size: 0.85rem;
    color: #78350f;
    margin: 0;
    line-height: 1.45;
}

/* ========================================================
   IRREGULAR TABLE
   ======================================================== */
.irregular-table-wrapper[b-rgf82qbjrm] {
    max-height: 380px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.irregular-table[b-rgf82qbjrm] {
    width: 100%;
    border-collapse: collapse;
}

.irregular-table th[b-rgf82qbjrm] {
    position: sticky;
    top: 0;
    background: #f1f5f9;
    color: #334155;
    font-weight: 700;
    padding: 0.65rem 0.85rem;
    font-size: 0.83rem;
    border-bottom: 2px solid #cbd5e1;
    z-index: 2;
}

.irregular-table td[b-rgf82qbjrm] {
    padding: 0.55rem 0.85rem;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.88rem;
}

/* ========================================================
   PRACTICE EXERCISES (Top Priority Interactive System)
   ======================================================== */
.exercise-section-enhanced[b-rgf82qbjrm] {
    border: 1px solid #bae6fd;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    box-shadow: 0 4px 18px -4px rgba(2, 132, 199, 0.08);
}

.exercise-section-header[b-rgf82qbjrm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.65rem;
    border-bottom: 2px solid #e2e8f0;
}

.exercise-header-title h3[b-rgf82qbjrm] {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}

.btn-reset-quiz[b-rgf82qbjrm] {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #475569;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-reset-quiz:hover[b-rgf82qbjrm] {
    background: #0284c7;
    color: #ffffff;
    border-color: #0284c7;
}

.quiz-tracker-bar[b-rgf82qbjrm] {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #ffffff;
    padding: 0.65rem 1rem;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    margin-bottom: 1.25rem;
}

.tracker-item[b-rgf82qbjrm] {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    font-size: 0.85rem;
    white-space: nowrap;
}

.tracker-label[b-rgf82qbjrm] { color: #64748b; font-weight: 500; }
.tracker-val[b-rgf82qbjrm] { color: #0f172a; font-weight: 700; }

.tracker-progress-track[b-rgf82qbjrm] {
    flex: 1;
    height: 7px;
    background: #e2e8f0;
    border-radius: 9999px;
    overflow: hidden;
}

.tracker-progress-fill[b-rgf82qbjrm] {
    height: 100%;
    background: linear-gradient(90deg, #0284c7, #10b981);
    transition: width 0.35s ease;
}

.tracker-score-chip[b-rgf82qbjrm] {
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    background: #f1f5f9;
    color: #0f172a;
    white-space: nowrap;
}

.tracker-score-chip.score-perfect[b-rgf82qbjrm] {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #86efac;
}

.exercises-container[b-rgf82qbjrm] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.exercise-card[b-rgf82qbjrm] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.15rem 1.35rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    transition: all 0.2s ease;
}

.exercise-card.card-correct[b-rgf82qbjrm] {
    border-color: #86efac;
    background: #f0fdf4;
}

.exercise-card.card-wrong[b-rgf82qbjrm] {
    border-color: #fca5a5;
    background: #fef2f2;
}

.exercise-card-header[b-rgf82qbjrm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.exercise-q-badge[b-rgf82qbjrm] {
    font-size: 0.78rem;
    font-weight: 700;
    color: #0284c7;
    background: #eff6ff;
    padding: 0.22rem 0.6rem;
    border-radius: 6px;
    border: 1px solid #bfdbfe;
}

.q-status-pill[b-rgf82qbjrm] {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.22rem 0.6rem;
    border-radius: 9999px;
}

.pill-correct[b-rgf82qbjrm] { background: #dcfce7; color: #166534; }
.pill-wrong[b-rgf82qbjrm] { background: #fee2e2; color: #991b1b; }

.exercise-q-text[b-rgf82qbjrm] {
    font-size: 1.02rem;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.exercise-options-grid[b-rgf82qbjrm] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
    margin-bottom: 1rem;
}

@media (min-width: 640px) {
    .exercise-options-grid[b-rgf82qbjrm] {
        grid-template-columns: 1fr 1fr;
    }
}

.enhanced-option[b-rgf82qbjrm] {
    display: flex;
    align-items: center;
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.enhanced-option:hover[b-rgf82qbjrm] {
    border-color: #0284c7;
    background: #f0f9ff;
}

.enhanced-option.selected[b-rgf82qbjrm] {
    border-color: #0284c7;
    background: #eff6ff;
    box-shadow: 0 0 0 1px #0284c7;
}

.enhanced-option.correct-answer-pill[b-rgf82qbjrm] {
    border-color: #22c55e !important;
    background: #dcfce7 !important;
    color: #14532d !important;
}

.enhanced-option.wrong-selection-pill[b-rgf82qbjrm] {
    border-color: #ef4444 !important;
    background: #fee2e2 !important;
    color: #7f1d1d !important;
}

.opt-letter[b-rgf82qbjrm] {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: #f1f5f9;
    color: #334155;
    font-weight: 700;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.65rem;
    flex-shrink: 0;
}

.enhanced-option.selected .opt-letter[b-rgf82qbjrm] {
    background: #0284c7;
    color: #ffffff;
}

.opt-text[b-rgf82qbjrm] {
    flex: 1;
    font-size: 0.92rem;
    font-weight: 500;
    color: #1e293b;
}

.opt-feedback-icon[b-rgf82qbjrm] {
    font-size: 1.1rem;
    margin-left: 0.4rem;
}

.exercise-actions-row[b-rgf82qbjrm] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-check-answer[b-rgf82qbjrm] {
    padding: 0.45rem 1.1rem;
    border-radius: 8px;
    background: #0284c7;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.85rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-check-answer:hover:not(:disabled)[b-rgf82qbjrm] {
    background: #0369a1;
    transform: translateY(-1px);
}

.btn-check-answer:disabled[b-rgf82qbjrm] {
    background: #cbd5e1;
    cursor: not-allowed;
    opacity: 0.7;
}

.hint-select[b-rgf82qbjrm] {
    font-size: 0.82rem;
}

.exercise-result-box[b-rgf82qbjrm] {
    border-radius: 8px;
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.exercise-result-box.result-correct[b-rgf82qbjrm] {
    border-color: #86efac;
    background: #f0fdf4;
}

.exercise-result-box.result-wrong[b-rgf82qbjrm] {
    border-color: #fca5a5;
    background: #fef2f2;
}

.result-header[b-rgf82qbjrm] {
    font-size: 0.95rem;
    margin-bottom: 0.45rem;
}

.result-explanation[b-rgf82qbjrm] {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #334155;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding-top: 0.45rem;
}

/* Completion Banner */
.quiz-completion-banner[b-rgf82qbjrm] {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    background: #ffffff;
    border: 2px solid #facc15;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-top: 1.5rem;
    box-shadow: 0 4px 15px rgba(234, 179, 8, 0.12);
}

.completion-trophy i[b-rgf82qbjrm] {
    font-size: 2.75rem;
}

.completion-body h4[b-rgf82qbjrm] {
    font-size: 1.2rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 0.35rem 0;
}

.completion-body p[b-rgf82qbjrm] {
    font-size: 0.92rem;
    color: #475569;
    margin-bottom: 0.75rem;
}

.completion-actions[b-rgf82qbjrm] {
    display: flex;
    gap: 0.65rem;
}

/* ========================================================
   IELTS BRIDGE & FOOTER NAVIGATION
   ======================================================== */
.ielts-bridge-card[b-rgf82qbjrm] {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
    color: #ffffff;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

.bridge-icon i[b-rgf82qbjrm] {
    font-size: 2.25rem;
    color: #38bdf8;
}

.bridge-content h4[b-rgf82qbjrm] {
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 0.3rem 0;
}

.bridge-content p[b-rgf82qbjrm] {
    font-size: 0.9rem;
    color: #cbd5e1;
    margin: 0 0 0.75rem 0;
}

.btn-bridge-link[b-rgf82qbjrm] {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.85rem;
    border-radius: 6px;
    background: #38bdf8;
    color: #0f172a;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-bridge-link:hover[b-rgf82qbjrm] {
    background: #7dd3fc;
    color: #0f172a;
}

.topic-navigation-footer[b-rgf82qbjrm] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
}

.nav-topic-card[b-rgf82qbjrm] {
    flex: 1;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.85rem 1.15rem;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: all 0.2s ease;
}

.nav-topic-card:hover[b-rgf82qbjrm] {
    border-color: #0284c7;
    background: #f8fafc;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.nav-direction[b-rgf82qbjrm] {
    font-size: 0.78rem;
    color: #64748b;
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.nav-topic-name[b-rgf82qbjrm] {
    font-size: 0.95rem;
    color: #0f172a;
    font-weight: 700;
}

/* Toast */
.copy-toast[b-rgf82qbjrm] {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: #0f172a;
    color: #ffffff;
    padding: 0.65rem 1.25rem;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    z-index: 100;
    animation: fadeIn-b-rgf82qbjrm 0.2s ease-in;
}

@keyframes fadeIn-b-rgf82qbjrm {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ========================================================================= */
/* DARK MODE OVERRIDES (OBSIDIAN NAVY THEME)                                 */
/* ========================================================================= */
[data-theme="dark"] .grammar-detail-page[b-rgf82qbjrm] {
    color: #f8fafc;
}

[data-theme="dark"] .detail-top-nav[b-rgf82qbjrm] {
    border-bottom-color: #223554;
}

[data-theme="dark"] .breadcrumb-item.active[b-rgf82qbjrm] {
    color: #94a3b8;
}

[data-theme="dark"] .btn-back-hub[b-rgf82qbjrm] {
    background: #111d33;
    border-color: #223554;
    color: #cbd5e1;
}

[data-theme="dark"] .btn-back-hub:hover[b-rgf82qbjrm] {
    background: #0284c7;
    color: #ffffff;
    border-color: #38bdf8;
}

[data-theme="dark"] .lesson-hero-compact[b-rgf82qbjrm] {
    background: #15243f;
    border-color: #223554;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .hero-main-title[b-rgf82qbjrm] {
    color: #f8fafc;
}

[data-theme="dark"] .hero-sub-title[b-rgf82qbjrm] {
    color: #38bdf8;
}

[data-theme="dark"] .hero-concept-inline[b-rgf82qbjrm] {
    background: #111d33;
    border-color: #223554;
    border-left-color: #38bdf8;
    color: #cbd5e1;
}

[data-theme="dark"] .time-pill[b-rgf82qbjrm] {
    background: #111d33;
    color: #94a3b8;
    border-color: #223554;
}

[data-theme="dark"] .target-pill[b-rgf82qbjrm] {
    background: #064e3b;
    color: #a7f3d0;
    border-color: #047857;
}

[data-theme="dark"] .lesson-subnav-tabs[b-rgf82qbjrm] {
    background: #111d33;
    border-color: #223554;
}

[data-theme="dark"] .subnav-tab[b-rgf82qbjrm] {
    color: #94a3b8;
}

[data-theme="dark"] .subnav-tab:hover[b-rgf82qbjrm] {
    background: #1c2c4a;
    color: #f8fafc;
}

[data-theme="dark"] .subnav-tab.active[b-rgf82qbjrm] {
    background: #15243f;
    color: #38bdf8;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .lesson-section[b-rgf82qbjrm] {
    background: #15243f;
    border-color: #223554;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .section-title-bar[b-rgf82qbjrm] {
    border-bottom-color: #223554;
}

[data-theme="dark"] .section-title-bar h3[b-rgf82qbjrm] {
    color: #f8fafc;
}

/* Formula Cards */
[data-theme="dark"] .formula-card[b-rgf82qbjrm] {
    background: #111d33;
    border-color: #223554;
    border-left-color: #38bdf8;
}

[data-theme="dark"] .formula-card.variant-blue[b-rgf82qbjrm] {
    background: #0c203b;
    border-color: #1e3a8a;
    border-left-color: #38bdf8;
}

[data-theme="dark"] .formula-card.variant-red[b-rgf82qbjrm] {
    background: #331018;
    border-color: #7f1d1d;
    border-left-color: #f87171;
}

[data-theme="dark"] .formula-card.variant-green[b-rgf82qbjrm] {
    background: #08291e;
    border-color: #065f46;
    border-left-color: #34d399;
}

[data-theme="dark"] .formula-card.variant-orange[b-rgf82qbjrm] {
    background: #331d08;
    border-color: #7c2d12;
    border-left-color: #fb923c;
}

[data-theme="dark"] .formula-card.variant-purple[b-rgf82qbjrm] {
    background: #25103d;
    border-color: #581c87;
    border-left-color: #c084fc;
}

[data-theme="dark"] .type-name[b-rgf82qbjrm] {
    color: #f8fafc;
}

[data-theme="dark"] .btn-copy-formula[b-rgf82qbjrm] {
    background: #15243f;
    border-color: #223554;
    color: #cbd5e1;
}

[data-theme="dark"] .btn-copy-formula:hover[b-rgf82qbjrm] {
    background: #38bdf8;
    color: #0b1325;
    border-color: #38bdf8;
}

[data-theme="dark"] .formula-code code[b-rgf82qbjrm] {
    color: #38bdf8;
}

[data-theme="dark"] .formula-breakdown[b-rgf82qbjrm] {
    color: #94a3b8;
}

/* Rules Table */
[data-theme="dark"] .rules-table th[b-rgf82qbjrm] {
    background: #111d33;
    color: #94a3b8;
    border-bottom-color: #223554;
}

[data-theme="dark"] .rules-table td[b-rgf82qbjrm] {
    border-bottom-color: #1e293b;
    color: #e2e8f0;
}

[data-theme="dark"] .rules-table tr:hover td[b-rgf82qbjrm] {
    background: #1a2c4c;
}

/* Usages */
[data-theme="dark"] .usage-item-card[b-rgf82qbjrm] {
    background: #111d33;
    border-color: #223554;
}

[data-theme="dark"] .usage-heading[b-rgf82qbjrm] {
    color: #f8fafc;
}

[data-theme="dark"] .usage-expl[b-rgf82qbjrm] {
    color: #94a3b8;
}

[data-theme="dark"] .example-dual-row[b-rgf82qbjrm] {
    background: #15243f;
    border-color: #223554;
}

[data-theme="dark"] .example-dual-row .en-text[b-rgf82qbjrm] {
    color: #f8fafc;
}

[data-theme="dark"] .example-dual-row .vi-text[b-rgf82qbjrm] {
    color: #94a3b8;
}

/* Signals & Notes */
[data-theme="dark"] .signal-chip[b-rgf82qbjrm] {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    border-color: #0284c7;
}

[data-theme="dark"] .placement-note[b-rgf82qbjrm] {
    background: #111d33;
    border-color: #223554;
    color: #cbd5e1;
}

/* Pitfalls */
[data-theme="dark"] .pitfall-card[b-rgf82qbjrm] {
    background: #261605;
    border-color: #5c3809;
}

[data-theme="dark"] .pitfall-title[b-rgf82qbjrm] {
    color: #f59e0b;
}

[data-theme="dark"] .wrong-box[b-rgf82qbjrm] {
    background: #300c14;
    border-color: #5c1825;
}

[data-theme="dark"] .correct-box[b-rgf82qbjrm] {
    background: #08291e;
    border-color: #065f46;
}

[data-theme="dark"] .code-wrong[b-rgf82qbjrm] {
    color: #fca5a5;
}

[data-theme="dark"] .code-correct[b-rgf82qbjrm] {
    color: #86efac;
}

[data-theme="dark"] .pitfall-expl[b-rgf82qbjrm] {
    color: #d1d5db;
}

/* Irregular Table */
[data-theme="dark"] .irregular-table-wrapper[b-rgf82qbjrm] {
    border-color: #223554;
}

[data-theme="dark"] .irregular-table th[b-rgf82qbjrm] {
    background: #111d33;
    color: #94a3b8;
    border-bottom-color: #223554;
}

[data-theme="dark"] .irregular-table td[b-rgf82qbjrm] {
    border-bottom-color: #1e293b;
    color: #e2e8f0;
}

/* Practice Quiz */
[data-theme="dark"] .exercise-section-enhanced[b-rgf82qbjrm] {
    background: #15243f;
    border-color: #223554;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .exercise-section-header[b-rgf82qbjrm] {
    border-bottom-color: #223554;
}

[data-theme="dark"] .exercise-header-title h3[b-rgf82qbjrm] {
    color: #f8fafc;
}

[data-theme="dark"] .btn-reset-quiz[b-rgf82qbjrm] {
    background: #111d33;
    border-color: #223554;
    color: #cbd5e1;
}

[data-theme="dark"] .btn-reset-quiz:hover[b-rgf82qbjrm] {
    background: #0284c7;
    color: #ffffff;
}

[data-theme="dark"] .quiz-tracker-bar[b-rgf82qbjrm] {
    background: #111d33;
    border-color: #223554;
}

[data-theme="dark"] .tracker-label[b-rgf82qbjrm] {
    color: #94a3b8;
}

[data-theme="dark"] .tracker-val[b-rgf82qbjrm] {
    color: #f8fafc;
}

[data-theme="dark"] .tracker-progress-track[b-rgf82qbjrm] {
    background: #1e293b;
}

[data-theme="dark"] .tracker-score-chip[b-rgf82qbjrm] {
    background: #15243f;
    color: #f8fafc;
}

[data-theme="dark"] .exercise-card[b-rgf82qbjrm] {
    background: #111d33;
    border-color: #223554;
}

[data-theme="dark"] .exercise-q-badge[b-rgf82qbjrm] {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    border-color: #0284c7;
}

[data-theme="dark"] .exercise-q-text[b-rgf82qbjrm] {
    color: #f8fafc;
}

[data-theme="dark"] .enhanced-option[b-rgf82qbjrm] {
    background: #15243f;
    border-color: #223554;
}

[data-theme="dark"] .enhanced-option:hover[b-rgf82qbjrm] {
    background: #1c2c4a;
    border-color: #38bdf8;
}

[data-theme="dark"] .enhanced-option.selected[b-rgf82qbjrm] {
    border-color: #38bdf8;
    background: #1a2c4c;
    box-shadow: 0 0 0 1px #38bdf8;
}

[data-theme="dark"] .opt-letter[b-rgf82qbjrm] {
    background: #111d33;
    color: #94a3b8;
}

[data-theme="dark"] .opt-text[b-rgf82qbjrm] {
    color: #e2e8f0;
}

[data-theme="dark"] .opt-explanation-box[b-rgf82qbjrm] {
    background: #15243f;
    border-left-color: #38bdf8;
}

[data-theme="dark"] .opt-expl-text[b-rgf82qbjrm] {
    color: #cbd5e1;
}

[data-theme="dark"] .nav-topic-card[b-rgf82qbjrm] {
    background: #15243f;
    border-color: #223554;
}

[data-theme="dark"] .nav-topic-card:hover[b-rgf82qbjrm] {
    background: #1c2c4a;
    border-color: #38bdf8;
}

[data-theme="dark"] .nav-topic-name[b-rgf82qbjrm] {
    color: #f8fafc;
}

[data-theme="dark"] .nav-direction[b-rgf82qbjrm] {
    color: #94a3b8;
}

/* Quiz Option Correct & Wrong in Dark Mode */
[data-theme="dark"] .enhanced-option.correct-answer-pill[b-rgf82qbjrm] {
    border-color: #22c55e !important;
    background: rgba(34, 197, 94, 0.18) !important;
    color: #4ade80 !important;
}

[data-theme="dark"] .enhanced-option.correct-answer-pill .opt-letter[b-rgf82qbjrm] {
    background: #14532d !important;
    color: #86efac !important;
}

[data-theme="dark"] .enhanced-option.correct-answer-pill .opt-text[b-rgf82qbjrm] {
    color: #4ade80 !important;
    font-weight: 700;
}

[data-theme="dark"] .enhanced-option.wrong-selection-pill[b-rgf82qbjrm] {
    border-color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.18) !important;
    color: #f87171 !important;
}

[data-theme="dark"] .enhanced-option.wrong-selection-pill .opt-letter[b-rgf82qbjrm] {
    background: #7f1d1d !important;
    color: #fca5a5 !important;
}

[data-theme="dark"] .enhanced-option.wrong-selection-pill .opt-text[b-rgf82qbjrm] {
    color: #f87171 !important;
    font-weight: 700;
}

/* Question Status Pill */
[data-theme="dark"] .q-status-pill.pill-correct[b-rgf82qbjrm] {
    background: rgba(34, 197, 94, 0.18) !important;
    color: #4ade80 !important;
    border: 1px solid rgba(34, 197, 94, 0.35) !important;
}

[data-theme="dark"] .q-status-pill.pill-wrong[b-rgf82qbjrm] {
    background: rgba(239, 68, 68, 0.18) !important;
    color: #f87171 !important;
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
}

/* Exercise Cards when evaluated */
[data-theme="dark"] .exercise-card.card-correct[b-rgf82qbjrm] {
    border-color: rgba(34, 197, 94, 0.45) !important;
    background: #111d33 !important;
}

[data-theme="dark"] .exercise-card.card-wrong[b-rgf82qbjrm] {
    border-color: rgba(239, 68, 68, 0.45) !important;
    background: #111d33 !important;
}

/* Exercise Result Box (Explanation) in Dark Mode */
[data-theme="dark"] .exercise-result-box[b-rgf82qbjrm] {
    background: #15243f !important;
    border-color: #223554 !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .exercise-result-box.result-correct[b-rgf82qbjrm] {
    background: rgba(34, 197, 94, 0.12) !important;
    border: 1.5px solid rgba(34, 197, 94, 0.4) !important;
}

[data-theme="dark"] .exercise-result-box.result-correct .result-header[b-rgf82qbjrm] {
    color: #4ade80 !important;
}

[data-theme="dark"] .exercise-result-box.result-wrong[b-rgf82qbjrm] {
    background: rgba(239, 68, 68, 0.12) !important;
    border: 1.5px solid rgba(239, 68, 68, 0.4) !important;
}

[data-theme="dark"] .exercise-result-box.result-wrong .result-header[b-rgf82qbjrm] {
    color: #f87171 !important;
}

[data-theme="dark"] .result-explanation[b-rgf82qbjrm] {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .result-explanation strong[b-rgf82qbjrm] {
    color: #f8fafc !important;
}

[data-theme="dark"] .result-explanation p[b-rgf82qbjrm] {
    color: #cbd5e1 !important;
}

/* Completion summary */
[data-theme="dark"] .quiz-completion-banner[b-rgf82qbjrm] {
    background: #15243f !important;
    border-color: #223554 !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .completion-body h4[b-rgf82qbjrm] {
    color: #f8fafc !important;
}

[data-theme="dark"] .completion-body p[b-rgf82qbjrm] {
    color: #94a3b8 !important;
}

/* /Pages/Ielts/IeltsListenFill.razor.rz.scp.css */
/* ========================================================================= */
/* IELTS LISTEN FILL MAIN PAGE (MODERN BRAND THEME #0284C7)                  */
/* ========================================================================= */
.listen-container[b-0pczsij37b] {
    padding: 30px 24px 60px;
    max-width: 1240px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #1e293b;
}

/* Header Section */
.header-section[b-0pczsij37b] {
    margin-bottom: 28px;
}

.header-section h1[b-0pczsij37b] {
    font-size: 2.1rem;
    font-weight: 800;
    margin: 0 0 8px 0;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.header-section .subtitle[b-0pczsij37b] {
    color: #64748b;
    font-size: 1rem;
    margin: 0;
}

/* Add Video Section */
.add-video-section[b-0pczsij37b] {
    margin-bottom: 36px;
}

.add-video-card[b-0pczsij37b] {
    background: #ffffff;
    border-radius: 20px;
    padding: 26px 30px;
    display: flex;
    gap: 24px;
    box-shadow: 0 10px 30px -10px rgba(2, 132, 199, 0.08);
    border: 1.5px solid #e0f2fe;
    align-items: flex-start;
    background: linear-gradient(180deg, #ffffff 0%, #f0f9ff 100%);
}

.add-icon[b-0pczsij37b] {
    background: #0284c7;
    color: #ffffff;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.3);
}

.add-content[b-0pczsij37b] {
    flex: 1;
}

.add-content h3[b-0pczsij37b] {
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0 0 6px 0;
    color: #0f172a;
}

.add-content p[b-0pczsij37b] {
    color: #475569;
    font-size: 0.95rem;
    margin: 0 0 16px 0;
}

.add-form[b-0pczsij37b] {
    display: flex;
    gap: 12px;
}

.add-form input[b-0pczsij37b] {
    flex: 1;
    padding: 12px 18px;
    border: 1.5px solid #cbd5e1;
    border-radius: 12px;
    font-size: 0.95rem;
    background: #ffffff;
    color: #0f172a;
    outline: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.add-form input:focus[b-0pczsij37b] {
    border-color: #0284c7;
    box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.15);
}

.add-form input[b-0pczsij37b]::placeholder {
    color: #94a3b8;
}

.btn-load[b-0pczsij37b] {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff;
    border: none;
    padding: 0 26px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.28);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-load:hover:not(:disabled)[b-0pczsij37b] {
    background: linear-gradient(135deg, #0369a1 0%, #075985 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(2, 132, 199, 0.38);
}

.btn-load:disabled[b-0pczsij37b] {
    background: #cbd5e1;
    color: #64748b;
    box-shadow: none;
    cursor: not-allowed;
}

/* Videos Section */
.videos-section h2[b-0pczsij37b] {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #0f172a;
}

.count-badge[b-0pczsij37b] {
    color: #0284c7;
    font-size: 1.15rem;
    font-weight: 700;
    background: #f0f9ff;
    padding: 2px 10px;
    border-radius: 20px;
    border: 1px solid #bae6fd;
}

.filters[b-0pczsij37b] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
    align-items: center;
}

.filter-btn[b-0pczsij37b] {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    padding: 8px 18px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.9rem;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-btn:hover[b-0pczsij37b] {
    color: #0284c7;
    border-color: #bae6fd;
    background: #f0f9ff;
}

.filter-btn.active[b-0pczsij37b] {
    background: #0284c7;
    color: #ffffff;
    border-color: #0284c7;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);
}

.filter-divider[b-0pczsij37b] {
    color: #cbd5e1;
    margin: 0 4px;
}

.filter-tag[b-0pczsij37b] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 0.88rem;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-tag:hover[b-0pczsij37b] {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #0284c7;
}

/* Video Grid */
.video-grid[b-0pczsij37b] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 26px;
}

.video-card[b-0pczsij37b] {
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    border: 1px solid #e2e8f0;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.video-card:hover[b-0pczsij37b] {
    transform: translateY(-5px);
    box-shadow: 0 16px 32px rgba(2, 132, 199, 0.12);
    border-color: #bae6fd;
}

.video-card:hover .play-overlay[b-0pczsij37b] {
    opacity: 1;
}

.video-thumbnail[b-0pczsij37b] {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 */
    background: #f1f5f9;
}

.video-thumbnail img[b-0pczsij37b] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-duration[b-0pczsij37b] {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(4px);
    color: #ffffff;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
}

.video-badges[b-0pczsij37b] {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    gap: 6px;
}

.badge[b-0pczsij37b] {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.badge.level[b-0pczsij37b] {
    background: #0284c7;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3);
}

.badge.category[b-0pczsij37b] {
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(4px);
    color: #ffffff;
}

.play-overlay[b-0pczsij37b] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.play-overlay i[b-0pczsij37b] {
    font-size: 3.2rem;
    color: #ffffff;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.video-info[b-0pczsij37b] {
    padding: 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.video-title[b-0pczsij37b] {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: #0f172a;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.45;
}

.video-channel[b-0pczsij37b] {
    color: #64748b;
    font-size: 0.85rem;
    font-weight: 500;
    margin: auto 0 0 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

.loading-state[b-0pczsij37b], .empty-state[b-0pczsij37b] {
    text-align: center;
    padding: 70px 20px;
    color: #64748b;
}

.empty-state i[b-0pczsij37b] {
    font-size: 3.5rem;
    color: #cbd5e1;
    margin-bottom: 16px;
    display: block;
}

@media (max-width: 768px) {
    .listen-container[b-0pczsij37b] {
        padding: 20px 16px 40px;
    }
    
    .add-video-card[b-0pczsij37b] {
        flex-direction: column;
        padding: 20px;
    }
    
    .add-form[b-0pczsij37b] {
        flex-direction: column;
    }
    
    .btn-load[b-0pczsij37b] {
        padding: 12px;
        justify-content: center;
    }
}

/* ========================================================================= */
/* DARK THEME EYE-COMFORT RULES (IELTS LISTEN FILL)                          */
/* ========================================================================= */
[data-theme="dark"] .listen-container[b-0pczsij37b] {
    color: #f8fafc;
}

[data-theme="dark"] .header-section h1[b-0pczsij37b] {
    color: #f8fafc;
}

[data-theme="dark"] .header-section .subtitle[b-0pczsij37b] {
    color: #94a3b8;
}

[data-theme="dark"] .add-video-card[b-0pczsij37b] {
    background: #15243f;
    border-color: #233554;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .add-content h3[b-0pczsij37b] {
    color: #f8fafc;
}

[data-theme="dark"] .add-content p[b-0pczsij37b] {
    color: #94a3b8;
}

[data-theme="dark"] .add-form input[b-0pczsij37b] {
    background: #111d33;
    border-color: #233554;
    color: #f8fafc;
}

[data-theme="dark"] .videos-section h2[b-0pczsij37b] {
    color: #f8fafc;
}

[data-theme="dark"] .count-badge[b-0pczsij37b] {
    background: rgba(56, 189, 248, 0.15);
    border-color: rgba(56, 189, 248, 0.3);
    color: #38bdf8;
}

[data-theme="dark"] .filter-btn[b-0pczsij37b],
[data-theme="dark"] .filter-tag[b-0pczsij37b] {
    background: #15243f;
    border-color: #233554;
    color: #cbd5e1;
}

[data-theme="dark"] .filter-btn:hover[b-0pczsij37b],
[data-theme="dark"] .filter-tag:hover[b-0pczsij37b] {
    background: #182a4a;
    border-color: #38bdf8;
    color: #f8fafc;
}

[data-theme="dark"] .filter-btn.active[b-0pczsij37b] {
    background: #0284c7;
    border-color: #0284c7;
    color: #ffffff;
}

[data-theme="dark"] .video-card[b-0pczsij37b] {
    background: #15243f;
    border-color: #233554;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .video-card:hover[b-0pczsij37b] {
    border-color: #38bdf8;
    background: #182a4a;
}

[data-theme="dark"] .video-title[b-0pczsij37b] {
    color: #f8fafc;
}

[data-theme="dark"] .video-channel[b-0pczsij37b] {
    color: #94a3b8;
}
/* /Pages/Ielts/IeltsListenFillDetail.razor.rz.scp.css */
/* ========================================================================= */
/* IELTS LISTEN FILL DETAIL PAGE                                             */
/* ========================================================================= */
.listen-detail-container[b-tfnk01sob3] {
    padding: 24px 20px 60px;
    max-width: 1240px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #1e293b;
}

.back-link[b-tfnk01sob3] {
    color: #0284c7;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 700;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.back-link:hover[b-tfnk01sob3] {
    color: #0369a1;
    transform: translateX(-3px);
}

.video-header[b-tfnk01sob3] {
    margin-bottom: 24px;
}

.video-title[b-tfnk01sob3] {
    font-size: 1.85rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 10px 0;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.video-meta[b-tfnk01sob3] {
    font-size: 0.92rem;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.video-player-wrapper[b-tfnk01sob3] {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 18px;
    background: #0f172a;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    border: 1px solid #e2e8f0;
}

.video-player-wrapper iframe[b-tfnk01sob3] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.practice-toolbar[b-tfnk01sob3] {
    background: #ffffff;
    padding: 16px 20px;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    margin-bottom: 18px;
}

.transcript-box[b-tfnk01sob3] {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 18px;
    padding: 28px;
    min-height: 320px;
    max-height: 520px;
    overflow-y: auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    font-size: 1.15rem;
    line-height: 2.2;
    color: #1e293b;
    margin-bottom: 20px;
}

.transcript-word[b-tfnk01sob3] {
    display: inline-block;
    padding: 2px 0;
    margin-right: 6px;
}

.blank-input[b-tfnk01sob3] {
    border: none;
    border-bottom: 2px solid #94a3b8;
    background: #f8fafc;
    padding: 3px 8px;
    margin: 0 6px;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: #0f172a;
    outline: none;
    transition: all 0.2s ease;
    border-radius: 6px 6px 0 0;
    box-sizing: border-box;
}

.blank-input:focus[b-tfnk01sob3] {
    border-bottom-color: #0284c7;
    background: #f0f9ff;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.15);
}

/* Validation styles */
.blank-input.correct[b-tfnk01sob3] {
    border-bottom-color: #16a34a;
    background: #f0fdf4;
    color: #15803d;
    font-weight: 700;
}

.blank-input.incorrect[b-tfnk01sob3] {
    border-bottom-color: #dc2626;
    background: #fef2f2;
    color: #dc2626;
    text-decoration: line-through;
}

.action-footer[b-tfnk01sob3] {
    background: #ffffff;
    padding: 18px 24px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.score-display[b-tfnk01sob3] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
}

/* Scrollbar cho transcript (Liquid Water Droplet) */
.transcript-box[b-tfnk01sob3]::-webkit-scrollbar {
    width: 8px;
}
.transcript-box[b-tfnk01sob3]::-webkit-scrollbar-track {
    background: var(--water-track-bg, transparent);
    border-radius: 9999px;
}
.transcript-box[b-tfnk01sob3]::-webkit-scrollbar-thumb {
    background: var(--water-drop-thumb);
    border-radius: 9999px;
    box-shadow: var(--water-drop-shadow);
}
.transcript-box[b-tfnk01sob3]::-webkit-scrollbar-thumb:hover {
    background: var(--water-drop-hover);
    box-shadow: var(--water-drop-hover-shadow);
}

/* ========================================================================= */
/* RECOMMENDED VIDEOS HORIZONTAL CAROUSEL (DẠNG NGANG + MŨI TÊN TRÁI PHẢI)    */
/* ========================================================================= */
.recommended-section[b-tfnk01sob3] {
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid #e2e8f0;
}

.recommended-header[b-tfnk01sob3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px;
}

.recommended-title[b-tfnk01sob3] {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 2px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.recommended-subtitle[b-tfnk01sob3] {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0;
}

.carousel-nav-group[b-tfnk01sob3] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.carousel-nav-btn[b-tfnk01sob3] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    color: #334155;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.carousel-nav-btn:hover[b-tfnk01sob3] {
    background: #0284c7;
    color: #ffffff;
    border-color: #0284c7;
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);
}

.btn-view-all[b-tfnk01sob3] {
    font-size: 0.82rem;
    font-weight: 700;
    color: #0284c7;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 8px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    margin-left: 6px;
    transition: all 0.2s;
}

.btn-view-all:hover[b-tfnk01sob3] {
    background: #0284c7;
    color: #ffffff;
}

.recommended-carousel-wrapper[b-tfnk01sob3] {
    position: relative;
    overflow: hidden;
    margin: 0 -4px;
    padding: 4px;
}

.recommended-carousel-track[b-tfnk01sob3] {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 4px 2px 14px 2px;
}

.recommended-carousel-track[b-tfnk01sob3]::-webkit-scrollbar {
    display: none;
}

.rec-video-card-compact[b-tfnk01sob3] {
    flex: 0 0 250px;
    width: 250px;
    max-width: 250px;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none !important;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.rec-video-card-compact:hover[b-tfnk01sob3] {
    transform: translateY(-4px);
    border-color: #0284c7;
    box-shadow: 0 10px 22px rgba(2, 132, 199, 0.12);
}

.rec-thumb-wrap[b-tfnk01sob3] {
    position: relative;
    width: 100%;
    height: 125px;
    background: #f1f5f9;
    overflow: hidden;
}

.rec-thumbnail[b-tfnk01sob3] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.rec-video-card-compact:hover .rec-thumbnail[b-tfnk01sob3] {
    transform: scale(1.06);
}

.rec-duration[b-tfnk01sob3] {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background: rgba(0, 0, 0, 0.75);
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
}

.rec-badges[b-tfnk01sob3] {
    position: absolute;
    top: 6px;
    left: 6px;
    display: flex;
    gap: 4px;
    z-index: 2;
}

.rec-hover-play[b-tfnk01sob3] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 2rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.rec-video-card-compact:hover .rec-hover-play[b-tfnk01sob3] {
    opacity: 1;
}

.rec-card-body[b-tfnk01sob3] {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: space-between;
}

.rec-video-title[b-tfnk01sob3] {
    font-size: 0.88rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 4px 0;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rec-channel-name[b-tfnk01sob3] {
    font-size: 0.75rem;
    color: #64748b;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rec-card-footer[b-tfnk01sob3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px;
    border-top: 1px solid #f1f5f9;
    font-size: 0.75rem;
}

/* ========================================================================= */
/* DARK THEME EYE-COMFORT RULES (LISTEN FILL DETAIL & PRACTICE ROOM)        */
/* ========================================================================= */
[data-theme="dark"] .listen-detail-container[b-tfnk01sob3] {
    color: #f8fafc;
}

[data-theme="dark"] .video-title[b-tfnk01sob3] {
    color: #f8fafc;
}

[data-theme="dark"] .video-meta[b-tfnk01sob3] {
    color: #94a3b8;
}

[data-theme="dark"] .video-player-wrapper[b-tfnk01sob3] {
    border-color: #233554;
}

[data-theme="dark"] .practice-toolbar[b-tfnk01sob3] {
    background: #15243f;
    border-color: #233554;
    color: #cbd5e1;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .transcript-box[b-tfnk01sob3] {
    background: #15243f;
    border-color: #233554;
    color: #f8fafc;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .blank-input[b-tfnk01sob3] {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(56, 189, 248, 0.35) !important;
    border-bottom: 2px solid #38bdf8 !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .blank-input:focus[b-tfnk01sob3] {
    background: rgba(56, 189, 248, 0.18) !important;
    border-color: #38bdf8 !important;
    border-bottom-color: #38bdf8 !important;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.35) !important;
}

[data-theme="dark"] .blank-input.correct[b-tfnk01sob3] {
    background: rgba(34, 197, 94, 0.15) !important;
    border-color: rgba(34, 197, 94, 0.4) !important;
    border-bottom-color: #22c55e !important;
    color: #4ade80 !important;
}

[data-theme="dark"] .blank-input.incorrect[b-tfnk01sob3] {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    border-bottom-color: #ef4444 !important;
    color: #f87171 !important;
}

[data-theme="dark"] .action-footer[b-tfnk01sob3] {
    background: #15243f;
    border-color: #233554;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .score-display[b-tfnk01sob3] {
    color: #f8fafc;
}

[data-theme="dark"] .recommended-section[b-tfnk01sob3] {
    border-top-color: #233554;
}

[data-theme="dark"] .recommended-title[b-tfnk01sob3] {
    color: #f8fafc !important;
}

[data-theme="dark"] .recommended-subtitle[b-tfnk01sob3] {
    color: #94a3b8 !important;
}

[data-theme="dark"] .recommended-subtitle b[b-tfnk01sob3] {
    color: #38bdf8 !important;
}

[data-theme="dark"] .rec-video-card-compact[b-tfnk01sob3] {
    background: #15243f;
    border-color: #233554;
}

[data-theme="dark"] .rec-card-body[b-tfnk01sob3] {
    background: #15243f;
}

[data-theme="dark"] .rec-video-title[b-tfnk01sob3] {
    color: #f8fafc;
}

[data-theme="dark"] .rec-channel-name[b-tfnk01sob3] {
    color: #94a3b8;
}

[data-theme="dark"] .rec-card-footer[b-tfnk01sob3] {
    border-top-color: #233554;
}

[data-theme="dark"] .rec-card-footer .text-muted[b-tfnk01sob3] {
    color: #94a3b8 !important;
}

[data-theme="dark"] .practice-toolbar select[b-tfnk01sob3] {
    background-color: #111d33 !important;
    color: #f8fafc !important;
    border-color: #233554 !important;
}

[data-theme="dark"] .practice-toolbar label[b-tfnk01sob3] {
    color: #94a3b8 !important;
}

[data-theme="dark"] .transcript-word[b-tfnk01sob3] {
    color: #f8fafc !important;
}

[data-theme="dark"] .rec-card-footer a[b-tfnk01sob3],
[data-theme="dark"] .rec-card-footer .text-primary[b-tfnk01sob3] {
    color: #38bdf8 !important;
}

[data-theme="dark"] .btn-view-all[b-tfnk01sob3] {
    background: #111d33 !important;
    border-color: #223554 !important;
    color: #38bdf8 !important;
}

[data-theme="dark"] .carousel-nav-btn[b-tfnk01sob3] {
    background: #111d33 !important;
    border-color: #223554 !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .carousel-nav-btn:hover:not(:disabled)[b-tfnk01sob3] {
    background: #182a4a !important;
    border-color: #38bdf8 !important;
    color: #38bdf8 !important;
}

/* /Pages/Ielts/IeltsListening.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════
   IeltsListening.razor — Full Viewport Layout
   ══════════════════════════════════════════════════════ */

:root[b-bmw3bazuvp] {
    --topbar-h: 52px;
    --partbar-h: 44px;
    --player-h: 64px;
    --navbottom-h: 52px;
    --border: #e0e0e0;
    --primary: #0a7cff;
    --answered-color: #16a34a;
    --q-bg: #fafafa;
    --shadow: 0 1px 4px rgba(0, 0, 0, .08);
}

/* ── LOADING / ERROR ── */
.reading-loading[b-bmw3bazuvp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 60vh;
    gap: 16px;
    color: #666;
}

.loading-ring[b-bmw3bazuvp] {
    width: 44px;
    height: 44px;
    border: 4px solid #e0e0e0;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-bmw3bazuvp 0.8s linear infinite;
}

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

.reading-error[b-bmw3bazuvp] {
    text-align: center;
    padding: 80px 20px;
    color: #555;
}

.reading-error .error-icon[b-bmw3bazuvp] {
    font-size: 3rem;
    margin-bottom: 12px;
}

/* ── TOP BAR ── */
.reading-topbar[b-bmw3bazuvp] {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    height: var(--topbar-h);
    background: #fff;
    border-bottom: 1px solid var(--border);
    padding: 0 20px;
    box-shadow: var(--shadow);
    gap: 16px;
}

.topbar-left[b-bmw3bazuvp] {
    flex: 1;
}

.exam-title-short[b-bmw3bazuvp] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 400px;
    display: block;
}

.topbar-center[b-bmw3bazuvp] {
    flex: 0 0 auto;
}

.timer-box[b-bmw3bazuvp] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f0f4ff;
    border: 1px solid #c7d7ff;
    border-radius: 20px;
    padding: 6px 14px;
    font-weight: 600;
    font-size: 0.95rem;
    color: #1a56db;
}

.timer-box.timer-warning[b-bmw3bazuvp] {
    background: #fff0f0;
    border-color: #fca5a5;
    color: #dc2626;
}

.timer-icon[b-bmw3bazuvp] {
    font-size: 1rem;
}

.topbar-right[b-bmw3bazuvp] {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.btn-submit-exam[b-bmw3bazuvp] {
    background: #16a34a;
    color: #fff;
    border: none;
    padding: 8px 20px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-submit-exam:hover[b-bmw3bazuvp] {
    background: #15803d;
}
.btn-exit-exam[b-bmw3bazuvp] { background: transparent; border: 1px solid #cbd5e1; color: #475569; padding: 8px 14px; border-radius: 6px; margin-right: 8px; cursor: pointer; }
.btn-exit-exam:hover[b-bmw3bazuvp] { border-color: #e83e8c; color: #e83e8c; }
.test-session-status[b-bmw3bazuvp] { color: #b91c1c; font-size: 0.85rem; font-weight: 700; }

/* ── PART TABS BAR ── */
.part-tabs-bar[b-bmw3bazuvp] {
    position: sticky;
    top: var(--topbar-h);
    z-index: 99;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 20px;
    height: var(--partbar-h);
    background: #f1f5f9;
    border-bottom: 1px solid #cbd5e1;
    overflow-x: auto;
}

.part-tab-btn[b-bmw3bazuvp] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 18px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 700;
    color: #475569;
    white-space: nowrap;
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.part-tab-btn:hover[b-bmw3bazuvp] {
    background: #e2e8f0;
    color: #0f172a;
    border-color: #94a3b8;
}

.part-tab-btn.active[b-bmw3bazuvp] {
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    border-color: #1d4ed8;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(37,99,235,0.35);
}

.part-tab-score[b-bmw3bazuvp] {
    font-size: 0.75rem;
    background: #e2e8f0;
    color: #334155;
    border-radius: 12px;
    padding: 2px 8px;
    font-weight: 700;
}

.part-tab-btn.active .part-tab-score[b-bmw3bazuvp] {
    background: rgba(255,255,255,0.25);
    color: #ffffff;
}

.part-tabs-spacer[b-bmw3bazuvp] {
    flex: 1;
}

.total-progress[b-bmw3bazuvp] {
    font-size: 0.85rem;
    color: #475569;
    font-weight: 600;
    white-space: nowrap;
}

/* ── AUDIO PLAYER (Sleek, Compact Centered Player) ── */
.audio-sticky-bar[b-bmw3bazuvp] {
    position: sticky;
    top: calc(var(--topbar-h) + var(--partbar-h));
    z-index: 90;
    padding: 8px 20px;
    background: rgba(248, 250, 252, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid #e2e8f0;
}

.custom-audio-player[b-bmw3bazuvp] {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 48px;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 16px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.audio-placeholder[b-bmw3bazuvp] {
    font-size: 0.88rem;
    color: #888;
    font-style: italic;
    display: flex;
    align-items: center;
}

.player-btn[b-bmw3bazuvp] {
    flex-shrink: 0;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff;
    border: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}

.player-btn:hover[b-bmw3bazuvp] {
    background: linear-gradient(135deg, #1d4ed8, #2563eb);
    transform: scale(1.08);
}

.player-audio-badge[b-bmw3bazuvp] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #2563eb;
    background: #eff6ff;
    padding: 3px 8px;
    border-radius: 6px;
    flex-shrink: 0;
}

.progress-container[b-bmw3bazuvp] {
    flex: 1;
    cursor: pointer;
    padding: 10px 0;
}

.progress-bar-bg[b-bmw3bazuvp] {
    width: 100%;
    height: 6px;
    background: #e2e8f0;
    border-radius: 99px;
    position: relative;
    overflow: hidden;
}

.progress-bar-fill[b-bmw3bazuvp] {
    height: 100%;
    background: linear-gradient(90deg, #38bdf8, #2563eb);
    transition: width 0.1s linear;
    border-radius: 99px;
}

.time-display[b-bmw3bazuvp] {
    flex-shrink: 0;
    font-size: 0.82rem;
    color: #475569;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 3px 10px;
    background: #f1f5f9;
    border-radius: 6px;
    min-width: 90px;
    text-align: center;
}

/* ── MAIN CONTENT AREA ── */
.listening-layout[b-bmw3bazuvp] {
    width: 100%;
    padding-bottom: 260px;
    /* Natural page scroll with generous clearance for bottom navigator */
}

/* ── QUESTIONS AREA ── */
.questions-col[b-bmw3bazuvp] {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 24px 32px 260px 32px !important;
    box-sizing: border-box;
}

.listening-questions[b-bmw3bazuvp] {
    background: #fff;
    border-radius: 12px;
    padding: 24px 32px 260px 32px !important;
    font-size: 1.05rem;
    line-height: 1.7;
}

.part-header-label[b-bmw3bazuvp] {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: #888;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.part-time-note[b-bmw3bazuvp] {
    font-size: 0.92rem;
    color: #555;
    margin-bottom: 24px;
    border-bottom: 2px solid var(--border);
    padding-bottom: 14px;
    line-height: 1.6;
}

/* ── QUESTION GROUP ── */
.q-group-container[b-bmw3bazuvp] {
    margin-bottom: 36px;
}

.q-group-instruction[b-bmw3bazuvp] {
    background: #fdfae5;
    border-left: 4px solid #f9cd43;
    padding: 14px 18px;
    margin-bottom: 20px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #333;
    border-radius: 4px;
    box-shadow: var(--shadow);
    line-height: 1.6;
}

/* ── HTML BLOCK (Tables, Forms) ── */
.q-html-block[b-bmw3bazuvp] {
    overflow-x: auto;
    margin: 20px 0;
    line-height: 1.8;
}

.q-html-block table[b-bmw3bazuvp] {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    margin: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    font-size: 0.95rem;
}

.q-html-block th[b-bmw3bazuvp],
.q-html-block td[b-bmw3bazuvp] {
    border: 1px solid #e0e0e0;
    padding: 12px 16px;
    vertical-align: middle;
    text-align: left;
}

.q-html-block th[b-bmw3bazuvp] {
    background: #f4f6f9;
    font-weight: 700;
    color: #333;
}

.q-html-block p[b-bmw3bazuvp] {
    margin: 0 0 10px;
}

.q-html-block p:last-child[b-bmw3bazuvp] {
    margin-bottom: 0;
}

/* ── INLINE INPUT inside HTML Block ── */
.ielts-input-container[b-bmw3bazuvp] {
    display: inline-flex;
    align-items: center;
    background: #fdfdfe;
    border-radius: 6px;
    border: 1.5px solid #dee2e6;
    padding: 3px 10px;
    margin: 0 4px;
    vertical-align: middle;
}

.ielts-qnum[b-bmw3bazuvp] {
    font-weight: 700;
    color: var(--primary);
    margin-right: 8px;
    font-size: 0.85rem;
}

.ielts-input[b-bmw3bazuvp] {
    border: none;
    border-bottom: 2px dashed #adb5bd;
    background: transparent;
    padding: 2px 8px;
    width: 140px;
    outline: none;
    font-size: 1rem;
    font-family: inherit;
    color: var(--primary);
    font-weight: 600;
    text-align: center;
    transition: all 0.2s;
}

.ielts-input:focus[b-bmw3bazuvp] {
    border-bottom: 2px solid var(--primary);
    background: #f0f7ff;
    border-radius: 4px;
}

select.ielts-input[b-bmw3bazuvp] {
    width: auto;
    border: 1.5px solid #dee2e6;
    border-radius: 6px;
    padding: 4px 10px;
    border-bottom-style: solid;
}

/* ── QUESTION BLOCK ── */
.question-block[b-bmw3bazuvp] {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px 18px;
    margin-bottom: 12px;
    transition: border-color 0.15s, box-shadow 0.15s;
    cursor: pointer;
}

.question-block:hover[b-bmw3bazuvp] {
    border-color: #aac4ff;
}

.question-block.q-focused[b-bmw3bazuvp] {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(10, 124, 255, .08);
}

.question-block.answered[b-bmw3bazuvp] {
    border-left: 3px solid var(--answered-color);
}

.q-text[b-bmw3bazuvp] {
    font-size: 0.95rem;
    color: #222;
    line-height: 1.6;
    margin-bottom: 10px;
    font-weight: 500;
}

/* MCQ */
.q-option-list[b-bmw3bazuvp] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.q-option[b-bmw3bazuvp] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 0.9rem;
}

.q-option:hover[b-bmw3bazuvp] {
    background: #f0f4ff;
    border-color: #aac4ff;
}

.q-option.selected[b-bmw3bazuvp] {
    background: #e8f0fe;
    border-color: var(--primary);
}

.opt-badge[b-bmw3bazuvp] {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
    color: #555;
}

.q-option.selected .opt-badge[b-bmw3bazuvp] {
    background: var(--primary);
    color: #fff;
}

.opt-body[b-bmw3bazuvp] {
    line-height: 1.4;
    color: #333;
}

/* Fill */
.q-fill-input[b-bmw3bazuvp] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 0.9rem;
    color: #333;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.q-fill-input:focus[b-bmw3bazuvp] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(10, 124, 255, .15);
}

/* Dropdown */
.q-select[b-bmw3bazuvp] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 0.9rem;
    color: #333;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s;
}

.q-select:focus[b-bmw3bazuvp] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(10, 124, 255, .15);
}

.q-select--answered[b-bmw3bazuvp] {
    border-color: var(--answered-color);
    background: #f0fdf4;
    color: var(--answered-color);
    font-weight: 700;
}

.q-inline-dropdown[b-bmw3bazuvp] {
    display: inline-block;
    margin-top: 8px;
}

.q-inline-dropdown .q-select[b-bmw3bazuvp] {
    min-width: 160px;
    font-weight: 600;
}

/* ── PART NAVIGATION BUTTONS ── */
.part-nav-buttons[b-bmw3bazuvp] {
    display: flex;
    gap: 14px;
    margin-top: 36px;
    margin-bottom: 50px;
    justify-content: flex-end;
    padding-bottom: 80px;
}

.nav-part-btn[b-bmw3bazuvp] {
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.nav-part-btn.prev[b-bmw3bazuvp] {
    background: #ffffff;
    color: #1e293b;
    border: 1.5px solid #94a3b8;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.nav-part-btn.prev:hover[b-bmw3bazuvp] {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #64748b;
    transform: translateY(-1px);
}

.nav-part-btn.next[b-bmw3bazuvp] {
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
    border: 1px solid #1d4ed8;
}

.nav-part-btn.next:hover[b-bmw3bazuvp] {
    background: linear-gradient(135deg, #1d4ed8, #2563eb);
    transform: translateY(-1px);
}

.nav-part-btn.submit[b-bmw3bazuvp] {
    background: linear-gradient(135deg, #16a34a, #22c55e);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3);
    border: 1px solid #15803d;
}

.nav-part-btn.submit:hover[b-bmw3bazuvp] {
    background: linear-gradient(135deg, #15803d, #16a34a);
    transform: translateY(-1px);
}

/* ── BOTTOM QUESTION NAVIGATOR ── */
.q-navigator-bar[b-bmw3bazuvp] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--navbottom-h);
    background: #ffffff;
    border-top: 1.5px solid #cbd5e1;
    padding: 0 16px;
    box-shadow: 0 -3px 12px rgba(0, 0, 0, .08);
    overflow-x: auto;
}

.q-navigator-label[b-bmw3bazuvp] {
    font-size: 0.8rem;
    font-weight: 800;
    color: #334155;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    flex-shrink: 0;
    padding-right: 10px;
    border-right: 2px solid #cbd5e1;
}

.q-navigator-nums[b-bmw3bazuvp] {
    display: flex;
    gap: 5px;
    flex-wrap: nowrap;
}

.q-nav-num[b-bmw3bazuvp] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid #cbd5e1;
    background: #f8fafc;
    font-size: 0.82rem;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.q-nav-num:hover[b-bmw3bazuvp] {
    background: #e0e7ff;
    border-color: #6366f1;
    color: #4338ca;
}

.q-nav-num.nav-answered[b-bmw3bazuvp] {
    background: #10b981 !important;
    border-color: #059669 !important;
    color: #ffffff !important;
}

.q-nav-num.nav-active[b-bmw3bazuvp] {
    border: 2px solid #2563eb !important;
    color: #2563eb !important;
    background: #eff6ff !important;
    font-weight: 800;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
}

.q-nav-num.nav-answered.nav-active[b-bmw3bazuvp] {
    background: #059669 !important;
    border-color: #047857 !important;
    color: #ffffff !important;
}

.q-navigator-next-part[b-bmw3bazuvp] {
    flex-shrink: 0;
    margin-left: 12px;
    padding: 6px 16px;
    background: #2563eb;
    border: 1px solid #1d4ed8;
    border-radius: 20px;
    font-size: 0.82rem;
    color: #ffffff;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
    transition: all 0.2s;
}

.q-navigator-next-part:hover[b-bmw3bazuvp] {
    background: #1d4ed8;
    transform: translateY(-1px);
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
    .questions-col[b-bmw3bazuvp] {
        padding: 20px 16px 40px;
    }

    .custom-audio-player[b-bmw3bazuvp] {
        padding: 0 12px;
    }

    .q-html-block table[b-bmw3bazuvp] {
        min-width: 500px;
    }
}

/* ── REVIEW TOPBAR ── */
.reading-review-topbar[b-bmw3bazuvp] {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    height: 60px; background: #ffffff;
    border-bottom: 2px solid #2563eb; padding: 0 20px;
    box-shadow: 0 4px 12px rgba(37,99,235,0.1);
    gap: 16px; flex-wrap: nowrap;
}
.review-top-left[b-bmw3bazuvp] { display: flex; flex-direction: column; gap: 2px; }
.review-badge[b-bmw3bazuvp] {
    font-size: 0.72rem; font-weight: 800; color: #2563eb;
    letter-spacing: 0.08em; text-transform: uppercase;
}
.review-top-stats[b-bmw3bazuvp] {
    display: flex; align-items: center; gap: 8px;
}
.stat-pill[b-bmw3bazuvp] {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 20px; font-size: 0.85rem; font-weight: 700;
}
.stat-pill.band[b-bmw3bazuvp] { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; font-size: 0.95rem; }
.stat-pill.band .stat-val[b-bmw3bazuvp] { font-size: 1.15rem; font-weight: 900; }
.stat-pill.correct[b-bmw3bazuvp] { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.stat-pill.wrong[b-bmw3bazuvp] { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.stat-pill.blank[b-bmw3bazuvp] { background: #fefce8; color: #a16207; border: 1px solid #fef08a; }
.stat-lbl[b-bmw3bazuvp] { font-size: 0.75rem; text-transform: uppercase; opacity: 0.8; }

.review-top-actions[b-bmw3bazuvp] {
    display: flex; align-items: center; gap: 8px;
}
.btn-action[b-bmw3bazuvp] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: 8px; font-size: 0.84rem; font-weight: 700;
    cursor: pointer; border: none; transition: all 0.2s;
}
.btn-action.summary-btn[b-bmw3bazuvp] {
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    color: #fff; box-shadow: 0 2px 8px rgba(79,70,229,0.3);
}
.btn-action.summary-btn:hover[b-bmw3bazuvp] { background: linear-gradient(135deg, #4338ca, #4f46e5); transform: translateY(-1px); }
.btn-action.next-btn[b-bmw3bazuvp] {
    background: #0284c7; color: #fff;
}
.btn-action.next-btn:hover[b-bmw3bazuvp] { background: #0369a1; }
.btn-action.retake-btn[b-bmw3bazuvp] {
    background: #f1f5f9; color: #334155; border: 1px solid #cbd5e1;
}
.btn-action.retake-btn:hover[b-bmw3bazuvp] { background: #e2e8f0; color: #0f172a; }
.btn-action.exit-btn[b-bmw3bazuvp] {
    background: transparent; color: #64748b; border: 1px solid #e2e8f0;
}
.btn-action.exit-btn:hover[b-bmw3bazuvp] { color: #dc2626; border-color: #fca5a5; background: #fff1f2; }

/* ── QUESTION BLOCK REVIEW FEEDBACK ── */
.q-header-row[b-bmw3bazuvp] {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
}
.q-badge[b-bmw3bazuvp] {
    font-size: 0.75rem; font-weight: 800; padding: 3px 10px; border-radius: 12px;
    white-space: nowrap; flex-shrink: 0;
}
.badge-correct[b-bmw3bazuvp] { background: #dcfce7; color: #15803d; border: 1px solid #86efac; }
.badge-wrong[b-bmw3bazuvp] { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }
.badge-blank[b-bmw3bazuvp] { background: #fef9c3; color: #a16207; border: 1px solid #fde047; }

.question-block.q-review-correct[b-bmw3bazuvp] { border-left: 4px solid #22c55e; background: #fafdfa; }
.question-block.q-review-wrong[b-bmw3bazuvp] { border-left: 4px solid #ef4444; background: #fffafa; }
.question-block.q-review-blank[b-bmw3bazuvp] { border-left: 4px solid #eab308; background: #fffdf5; }

.q-option.opt-is-correct[b-bmw3bazuvp] {
    background: #ecfdf5 !important; border: 2px solid #10b981 !important; color: #065f46; font-weight: 600;
}
.q-option.opt-is-correct .opt-badge[b-bmw3bazuvp] { background: #10b981; color: #fff; }
.opt-correct-tag[b-bmw3bazuvp] {
    margin-left: auto; font-size: 0.75rem; font-weight: 800; color: #059669;
    background: #d1fae5; padding: 2px 8px; border-radius: 10px;
}
.q-option.opt-is-wrong[b-bmw3bazuvp] {
    background: #fef2f2 !important; border: 2px solid #ef4444 !important; text-decoration: line-through; color: #991b1b;
}
.q-option.opt-is-wrong .opt-badge[b-bmw3bazuvp] { background: #ef4444; color: #fff; }

.q-answer-feedback[b-bmw3bazuvp] {
    margin-top: 12px; padding: 10px 14px; border-radius: 8px; font-size: 0.88rem;
    display: flex; flex-direction: column; gap: 4px;
}
.q-answer-feedback.fb-correct[b-bmw3bazuvp] { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.q-answer-feedback.fb-wrong[b-bmw3bazuvp] { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.q-answer-feedback.fb-blank[b-bmw3bazuvp] { background: #fefce8; border: 1px solid #fef08a; color: #854d0e; }
.fb-row[b-bmw3bazuvp] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fb-label[b-bmw3bazuvp] { font-weight: 700; font-size: 0.8rem; text-transform: uppercase; opacity: 0.8; }
.fb-val.student[b-bmw3bazuvp] { font-weight: 700; }
.fb-val.correct[b-bmw3bazuvp] { font-weight: 800; color: #16a34a; background: #dcfce7; padding: 2px 8px; border-radius: 6px; }

/* Listening Group Review Chips for HTML Block */
.listening-group-review[b-bmw3bazuvp] {
    margin-top: 20px; padding: 16px; background: #f8fafc; border: 1px solid #e2e8f0;
    border-radius: 10px;
}
.review-group-title[b-bmw3bazuvp] { font-weight: 700; color: #1e293b; margin-bottom: 12px; font-size: 0.92rem; }
.review-chips-grid[b-bmw3bazuvp] {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px;
}
.review-chip[b-bmw3bazuvp] {
    padding: 10px 14px; border-radius: 10px; font-size: 0.88rem; display: flex; flex-direction: column; gap: 6px;
    border: 1.5px solid #e2e8f0; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.review-chip.chip-correct[b-bmw3bazuvp] { border-color: #86efac; background: #f0fdf4; }
.review-chip.chip-wrong[b-bmw3bazuvp] { border-color: #fca5a5; background: #fef2f2; }
.review-chip.chip-blank[b-bmw3bazuvp] { border-color: #fde047; background: #fefce8; }
.chip-header[b-bmw3bazuvp] { display: flex; justify-content: space-between; align-items: center; }
.chip-num[b-bmw3bazuvp] { font-weight: 800; color: #0f172a; font-size: 0.92rem; }
.chip-status-tag[b-bmw3bazuvp] { font-size: 0.75rem; font-weight: 800; padding: 2px 7px; border-radius: 6px; }
.chip-status-tag.tag-correct[b-bmw3bazuvp] { background: #dcfce7; color: #166534; }
.chip-status-tag.tag-wrong[b-bmw3bazuvp] { background: #fee2e2; color: #991b1b; }
.chip-status-tag.tag-blank[b-bmw3bazuvp] { background: #fef9c3; color: #854d0e; }
.chip-student[b-bmw3bazuvp] { color: #334155; font-size: 0.86rem; }
.chip-correct-ans[b-bmw3bazuvp] { font-size: 0.86rem; color: #16a34a; background: #dcfce7; padding: 3px 8px; border-radius: 6px; font-weight: 600; margin-top: 2px; }


/* Question Navigator Colors */
.q-nav-num.nav-correct[b-bmw3bazuvp] { background: #22c55e !important; border-color: #16a34a !important; color: #fff !important; }
.q-nav-num.nav-wrong[b-bmw3bazuvp] { background: #ef4444 !important; border-color: #dc2626 !important; color: #fff !important; }
.q-nav-num.nav-blank[b-bmw3bazuvp] { background: #eab308 !important; border-color: #ca8a04 !important; color: #fff !important; }

@media (max-width: 900px) {
    .reading-review-topbar[b-bmw3bazuvp] { height: auto; padding: 12px; flex-direction: column; align-items: stretch; gap: 10px; }
    .review-top-stats[b-bmw3bazuvp] { justify-content: space-between; }
    .review-top-actions[b-bmw3bazuvp] { justify-content: space-between; flex-wrap: wrap; }
}

@media (max-width: 768px) {
    .reading-topbar[b-bmw3bazuvp] {
        padding: 0 12px;
        gap: 8px;
    }
    .exam-title-short[b-bmw3bazuvp] {
        max-width: 140px;
        font-size: 0.78rem;
    }
    .timer-box[b-bmw3bazuvp] {
        padding: 4px 10px;
        font-size: 0.82rem;
    }
    .btn-submit-exam[b-bmw3bazuvp] {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
    .btn-exit-exam[b-bmw3bazuvp] {
        padding: 6px 8px;
        font-size: 0.8rem;
    }
    .listening-body[b-bmw3bazuvp] {
        padding: 14px 12px 90px;
    }
    .q-text[b-bmw3bazuvp] {
        font-size: 0.95rem;
    }
    .q-option[b-bmw3bazuvp] {
        padding: 12px 14px;
        min-height: 44px;
    }
    .q-nav-num[b-bmw3bazuvp] {
        width: 36px;
        height: 36px;
        font-size: 0.85rem;
    }
    .review-chips-grid[b-bmw3bazuvp] {
        grid-template-columns: 1fr;
    }
}

/* Checkpoint Banner */
.checkpoint-banner[b-bmw3bazuvp] {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1.5px solid #93c5fd;
    border-radius: 12px;
    padding: 12px 18px;
    margin: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.12);
}
.cb-left[b-bmw3bazuvp] {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cb-icon[b-bmw3bazuvp] {
    font-size: 1.6rem;
    color: #2563eb;
}
.cb-info[b-bmw3bazuvp] {
    font-size: 0.92rem;
    color: #1e3a8a;
}
.cb-info strong[b-bmw3bazuvp] {
    color: #1d4ed8;
}
.cb-actions[b-bmw3bazuvp] {
    display: flex;
    align-items: center;
    gap: 10px;
}
.btn-cb-restore[b-bmw3bazuvp] {
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s;
}
.btn-cb-restore:hover[b-bmw3bazuvp] {
    background: #1d4ed8;
}
.btn-cb-discard[b-bmw3bazuvp] {
    background: #fff;
    color: #64748b;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px 14px;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s;
}
.btn-cb-discard:hover[b-bmw3bazuvp] {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #dc2626;
}

/* ==========================================================================
   DARK MODE OVERRIDES (OBSIDIAN NAVY THEME)
   ========================================================================== */
[data-theme="dark"][b-bmw3bazuvp],
:root[data-theme="dark"][b-bmw3bazuvp] {
    --q-bg: #0f172a;
    --border: #223554;
}

[data-theme="dark"] .reading-topbar[b-bmw3bazuvp] {
    background: #111d33;
    border-bottom-color: #223554;
}

[data-theme="dark"] .exam-title-short[b-bmw3bazuvp] {
    color: #f8fafc;
}

[data-theme="dark"] .timer-box[b-bmw3bazuvp] {
    background: #15243f;
    border-color: #223554;
    color: #38bdf8;
}

[data-theme="dark"] .btn-exit-exam[b-bmw3bazuvp] {
    border-color: #223554;
    color: #94a3b8;
}

[data-theme="dark"] .part-tabs-bar[b-bmw3bazuvp] {
    background: #0b1325;
    border-bottom-color: #223554;
}

[data-theme="dark"] .part-tab-btn[b-bmw3bazuvp] {
    background: #15243f;
    border-color: #223554;
    color: #cbd5e1;
}

[data-theme="dark"] .part-tab-btn:hover[b-bmw3bazuvp] {
    background: #1c2c4a;
    color: #f8fafc;
    border-color: #38bdf8;
}

[data-theme="dark"] .part-tab-score[b-bmw3bazuvp] {
    background: #111d33;
    color: #94a3b8;
}

[data-theme="dark"] .total-progress[b-bmw3bazuvp] {
    color: #94a3b8;
}

/* Listening Audio Bar */
[data-theme="dark"] .audio-sticky-bar[b-bmw3bazuvp] {
    background: rgba(11, 19, 37, 0.94) !important;
    border-bottom: 1px solid #223554 !important;
}

[data-theme="dark"] .custom-audio-player[b-bmw3bazuvp] {
    background: #15243f !important;
    border: 1px solid #223554 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] .player-audio-badge[b-bmw3bazuvp] {
    background: rgba(56, 189, 248, 0.12) !important;
    color: #38bdf8 !important;
}

[data-theme="dark"] .progress-bar-bg[b-bmw3bazuvp] {
    background: #111d33 !important;
}

[data-theme="dark"] .time-display[b-bmw3bazuvp] {
    background: #111d33 !important;
    border: 1px solid #223554 !important;
    color: #38bdf8 !important;
}

[data-theme="dark"] .audio-status-pill[b-bmw3bazuvp] {
    background: #111d33;
    border-color: #223554;
    color: #38bdf8;
}

[data-theme="dark"] .audio-timer-badge[b-bmw3bazuvp] {
    background: #111d33;
    color: #cbd5e1;
    border: 1px solid #223554;
}

[data-theme="dark"] .questions-col[b-bmw3bazuvp] {
    background: var(--q-bg);
}

[data-theme="dark"] .listening-questions[b-bmw3bazuvp] {
    background: #0f172a !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .q-group-instruction[b-bmw3bazuvp] {
    background: #1e293b;
    border-left-color: #38bdf8;
    color: #e2e8f0;
}

[data-theme="dark"] .question-block[b-bmw3bazuvp] {
    background: #15243f;
    border-color: #223554;
}

[data-theme="dark"] .question-block:hover[b-bmw3bazuvp] {
    border-color: #38bdf8;
}

[data-theme="dark"] .q-text[b-bmw3bazuvp] {
    color: #f8fafc;
}

[data-theme="dark"] .q-select[b-bmw3bazuvp],
[data-theme="dark"] .q-fill-input[b-bmw3bazuvp] {
    background: #111d33;
    border-color: #223554;
    color: #f8fafc;
}

[data-theme="dark"] .q-option[b-bmw3bazuvp] {
    background: #111d33;
    border-color: #223554;
}

[data-theme="dark"] .q-option:hover[b-bmw3bazuvp] {
    background: #1c2c4a;
    border-color: #38bdf8;
}

[data-theme="dark"] .q-option.selected[b-bmw3bazuvp] {
    background: #1a2c4c;
    border-color: #38bdf8;
}

[data-theme="dark"] .opt-badge[b-bmw3bazuvp] {
    background: #15243f;
    color: #cbd5e1;
}

[data-theme="dark"] .opt-body[b-bmw3bazuvp] {
    color: #e2e8f0;
}

[data-theme="dark"] .nav-part-btn.prev[b-bmw3bazuvp] {
    background: #15243f;
    border-color: #223554;
    color: #cbd5e1;
}

[data-theme="dark"] .nav-part-btn.prev:hover[b-bmw3bazuvp] {
    background: #1c2c4a;
    color: #f8fafc;
    border-color: #38bdf8;
}

[data-theme="dark"] .q-navigator-bar[b-bmw3bazuvp] {
    background: #111d33;
    border-top-color: #223554;
}

[data-theme="dark"] .q-navigator-label[b-bmw3bazuvp] {
    color: #cbd5e1;
    border-right-color: #223554;
}

[data-theme="dark"] .q-nav-num[b-bmw3bazuvp] {
    background: #15243f;
    border-color: #223554;
    color: #cbd5e1;
}

[data-theme="dark"] .q-nav-num:hover[b-bmw3bazuvp] {
    background: #1c2c4a;
    border-color: #38bdf8;
    color: #38bdf8;
}

[data-theme="dark"] .reading-review-topbar[b-bmw3bazuvp] {
    background: #111d33;
    border-bottom-color: #38bdf8;
}

[data-theme="dark"] .stat-pill.band[b-bmw3bazuvp] {
    background: #15243f;
    border-color: #223554;
    color: #38bdf8;
}

[data-theme="dark"] .btn-action.retake-btn[b-bmw3bazuvp] {
    background: #15243f;
    border-color: #223554;
    color: #cbd5e1;
}

[data-theme="dark"] .checkpoint-banner[b-bmw3bazuvp] {
    background: #15243f;
    border-color: #223554;
}

[data-theme="dark"] .cb-info[b-bmw3bazuvp] {
    color: #cbd5e1;
}

[data-theme="dark"] .cb-info strong[b-bmw3bazuvp] {
    color: #38bdf8;
}

[data-theme="dark"] .btn-cb-discard[b-bmw3bazuvp] {
    background: #111d33;
    border-color: #223554;
    color: #94a3b8;
}

/* ── Listening Review Chips & States Dark Mode ── */
[data-theme="dark"] .listening-group-review[b-bmw3bazuvp] {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .listening-group-title[b-bmw3bazuvp] {
    color: #f8fafc;
}

[data-theme="dark"] .group-stats-tag[b-bmw3bazuvp] {
    background: rgba(255, 255, 255, 0.06);
    color: #94a3b8;
}

[data-theme="dark"] .review-chip[b-bmw3bazuvp] {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
    color: #f8fafc;
}

[data-theme="dark"] .review-chip.chip-correct[b-bmw3bazuvp] {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.35);
    color: #86efac;
}

[data-theme="dark"] .review-chip.chip-wrong[b-bmw3bazuvp] {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.35);
    color: #fca5a5;
}

[data-theme="dark"] .review-chip.chip-blank[b-bmw3bazuvp] {
    background: rgba(234, 179, 8, 0.12);
    border-color: rgba(234, 179, 8, 0.35);
    color: #fde047;
}

[data-theme="dark"] .chip-q-title[b-bmw3bazuvp] {
    color: #cbd5e1;
}

[data-theme="dark"] .chip-user-ans[b-bmw3bazuvp] {
    color: #f8fafc;
}

[data-theme="dark"] .chip-status-tag.tag-correct[b-bmw3bazuvp] {
    background: rgba(34, 197, 94, 0.25);
    color: #4ade80;
}

[data-theme="dark"] .chip-status-tag.tag-wrong[b-bmw3bazuvp] {
    background: rgba(239, 68, 68, 0.25);
    color: #f87171;
}

[data-theme="dark"] .chip-status-tag.tag-blank[b-bmw3bazuvp] {
    background: rgba(234, 179, 8, 0.25);
    color: #facc15;
}

[data-theme="dark"] .chip-correct-ans[b-bmw3bazuvp] {
    color: #4ade80;
}

/* /Pages/Ielts/IeltsMockTests.razor.rz.scp.css */
.mocktests-container[b-gkh2eqs1xu] {
    padding: 24px 32px;
    max-width: 1400px;
    margin: 0 auto;
    color: #1e293b;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    width: 100%;
    box-sizing: border-box;
}

.main-content[b-gkh2eqs1xu] {
    width: 100%;
}

.sidebar[b-gkh2eqs1xu] {
    display: none !important;
}

/* ==========================================================================
   1. STATS BANNER
   ========================================================================== */
.mocktest-stats-banner[b-gkh2eqs1xu] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.stat-card[b-gkh2eqs1xu] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    min-height: 84px;
    box-sizing: border-box;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover[b-gkh2eqs1xu] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

.stat-icon-wrap[b-gkh2eqs1xu] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.icon-blue[b-gkh2eqs1xu] { background: #eff6ff; color: #2563eb; }
.icon-emerald[b-gkh2eqs1xu] { background: #ecfdf5; color: #059669; }
.icon-violet[b-gkh2eqs1xu] { background: #f5f3ff; color: #7c3aed; }
.icon-amber[b-gkh2eqs1xu] { background: #fffbeb; color: #d97706; }

.stat-content[b-gkh2eqs1xu] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.stat-label[b-gkh2eqs1xu] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.stat-value[b-gkh2eqs1xu] {
    font-size: 1.4rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.stat-sub[b-gkh2eqs1xu] {
    font-size: 0.82rem;
    font-weight: 500;
    color: #94a3b8;
}

.stat-skills-breakdown[b-gkh2eqs1xu] {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.skills-pill-group[b-gkh2eqs1xu] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.skill-mini-pill[b-gkh2eqs1xu] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
}

.skill-mini-pill.listening[b-gkh2eqs1xu] { background: #eff6ff; color: #1d4ed8; }
.skill-mini-pill.reading[b-gkh2eqs1xu]   { background: #ecfdf5; color: #047857; }
.skill-mini-pill.writing[b-gkh2eqs1xu]   { background: #faf5ff; color: #7e22ce; }
.skill-mini-pill.speaking[b-gkh2eqs1xu]  { background: #fff7ed; color: #c2410c; }

/* ==========================================================================
   2. CONTROLS BAR: TABS & SEARCH
   ========================================================================== */
.mocktest-controls-bar[b-gkh2eqs1xu] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 24px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.collection-tabs-scroll[b-gkh2eqs1xu] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.collection-tabs-scroll[b-gkh2eqs1xu]::-webkit-scrollbar {
    display: none;
}

.coll-tab-btn[b-gkh2eqs1xu] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #475569;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.coll-tab-btn:hover[b-gkh2eqs1xu] {
    background: #e2e8f0;
    color: #0f172a;
}

.coll-tab-btn.active[b-gkh2eqs1xu] {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff;
    border-color: #2563eb;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

.coll-tab-btn.active .tab-count-badge[b-gkh2eqs1xu] {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

.tab-count-badge[b-gkh2eqs1xu] {
    background: #e2e8f0;
    color: #475569;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.76rem;
    font-weight: 800;
}

.tab-count-badge.has-done[b-gkh2eqs1xu] {
    background: #dcfce7;
    color: #15803d;
}

.mocktest-filter-actions[b-gkh2eqs1xu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    border-top: 1px solid #f1f5f9;
    padding-top: 12px;
}

.search-input-wrap[b-gkh2eqs1xu] {
    position: relative;
    flex: 1;
    min-width: 240px;
    max-width: 400px;
}

.search-input-wrap i.bi-search[b-gkh2eqs1xu] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.9rem;
}

.search-input-wrap input[b-gkh2eqs1xu] {
    width: 100%;
    padding: 8px 36px 8px 36px;
    border-radius: 20px;
    border: 1px solid #cbd5e1;
    font-size: 0.88rem;
    color: #1e293b;
    outline: none;
    transition: all 0.2s ease;
    background: #f8fafc;
}

.search-input-wrap input:focus[b-gkh2eqs1xu] {
    border-color: #2563eb;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.btn-clear-search[b-gkh2eqs1xu] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 0;
    font-size: 0.95rem;
}

.btn-clear-search:hover[b-gkh2eqs1xu] {
    color: #64748b;
}

.status-filter-pills[b-gkh2eqs1xu] {
    display: flex;
    gap: 6px;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 24px;
}

.pill-btn[b-gkh2eqs1xu] {
    background: transparent;
    border: none;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.18s ease;
}

.pill-btn:hover[b-gkh2eqs1xu] {
    color: #1e293b;
}

.pill-btn.active[b-gkh2eqs1xu] {
    background: #ffffff;
    color: #0f172a;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* ==========================================================================
   3. COLLECTION TITLE BAR & SECTION
   ========================================================================== */
.collection-section[b-gkh2eqs1xu] {
    margin-bottom: 36px;
}

.collection-title-bar[b-gkh2eqs1xu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding: 12px 18px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    flex-wrap: wrap;
    gap: 12px;
}

.ct-left[b-gkh2eqs1xu] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ct-icon-wrap[b-gkh2eqs1xu] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #eff6ff;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.ct-info[b-gkh2eqs1xu] {
    display: flex;
    flex-direction: column;
}

.ct-title[b-gkh2eqs1xu] {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.2px;
}

.ct-meta[b-gkh2eqs1xu] {
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 500;
}

.ct-progress-badge[b-gkh2eqs1xu] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
}

/* Tests List Grid */
.tests-grid[b-gkh2eqs1xu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(460px, 1fr));
    gap: 25px;
}

/* Test Blocks */
.test-block[b-gkh2eqs1xu] {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 24px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}

.test-block:hover[b-gkh2eqs1xu] {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    border-color: #cbd5e1;
}

.test-block-header[b-gkh2eqs1xu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 14px;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 10px;
}

.test-collection-tag[b-gkh2eqs1xu] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #0284c7;
    background: #e0f2fe;
    padding: 2px 8px;
    border-radius: 6px;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.test-block-header h2[b-gkh2eqs1xu] {
    font-size: 1.35rem;
    font-weight: 800;
    margin: 0;
    color: #0f172a;
}

.btn-summary-link[b-gkh2eqs1xu] {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}
.btn-summary-link:hover[b-gkh2eqs1xu] {
    background: #e0e7ff;
    color: #4338ca;
    border-color: #a5b4fc;
}
.btn-summary-link.has-data[b-gkh2eqs1xu] {
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25);
}
.btn-summary-link.has-data:hover[b-gkh2eqs1xu] {
    background: linear-gradient(135deg, #4338ca, #4f46e5);
    transform: translateY(-1px);
}

.mocktest-offline-banner[b-gkh2eqs1xu] {
    border-radius: 12px;
    font-weight: 600;
    background: #fffbeb;
    border: 1px solid #fef3c7;
    color: #92400e;
    padding: 12px 18px;
    margin-top: 16px;
}

.test-badge-done[b-gkh2eqs1xu] {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
    font-size: 0.74rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 8px;
}

.test-badge-pending[b-gkh2eqs1xu] {
    background: #f1f5f9;
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 8px;
}

.test-badge-offline[b-gkh2eqs1xu] {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.test-badge-not-dl[b-gkh2eqs1xu] {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
}

.test-downloading-pill[b-gkh2eqs1xu] {
    background: #eff6ff;
    color: #1d4ed8;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #bfdbfe;
}

.skills-grid[b-gkh2eqs1xu] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    flex: 1;
}

.skill-card[b-gkh2eqs1xu] {
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
    min-height: 142px;
}

.skill-card:hover[b-gkh2eqs1xu] {
    background: #f1f5f9;
}
.skill-card.attempted[b-gkh2eqs1xu] {
    border-color: #cbd5e1;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.skill-header[b-gkh2eqs1xu] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-weight: 700;
    font-size: 0.88rem;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    gap: 8px;
    min-height: 28px;
}
.sh-left[b-gkh2eqs1xu] {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sh-left i[b-gkh2eqs1xu] {
    font-size: 1.15rem;
}

.skill-score-badge[b-gkh2eqs1xu] {
    font-size: 0.72rem;
    font-weight: 800;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    padding: 3px 8px;
    border-radius: 12px;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.2;
}

.skill-score-badge.pending[b-gkh2eqs1xu] {
    background: #fffbeb;
    color: #b45309;
    border-color: #fde68a;
    font-weight: 700;
}

/* Colors for specific skills */
.listening .skill-header[b-gkh2eqs1xu] { color: #2563eb; }
.reading .skill-header[b-gkh2eqs1xu] { color: #16a34a; }
.writing .skill-header[b-gkh2eqs1xu] { color: #9333ea; }
.speaking .skill-header[b-gkh2eqs1xu] { color: #ea580c; }

.skill-btn-group[b-gkh2eqs1xu] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: auto;
}

.btn-take-test[b-gkh2eqs1xu] {
    width: 100%;
    height: 36px;
    padding: 6px 12px;
    border-radius: 8px;
    border: none;
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Colors for buttons */
.listening .btn-take-test[b-gkh2eqs1xu] { background: #2563eb; color: #fff; box-shadow: 0 3px 10px rgba(37, 99, 235, 0.25); }
.reading .btn-take-test[b-gkh2eqs1xu] { background: #16a34a; color: #fff; box-shadow: 0 3px 10px rgba(22, 163, 74, 0.25); }
.writing .btn-take-test[b-gkh2eqs1xu] { background: #9333ea; color: #fff; box-shadow: 0 3px 10px rgba(147, 51, 234, 0.25); }
.speaking .btn-take-test[b-gkh2eqs1xu] { background: #ea580c; color: #fff; box-shadow: 0 3px 10px rgba(234, 88, 12, 0.25); }

.btn-take-test:hover:not(:disabled)[b-gkh2eqs1xu] {
    transform: translateY(-1px);
    filter: brightness(1.08);
}

.btn-take-test:disabled[b-gkh2eqs1xu] {
    background: #e9ecef !important;
    color: #adb5bd !important;
    box-shadow: none !important;
    cursor: not-allowed;
    border: 1px solid #dee2e6;
}

.btn-review-mini[b-gkh2eqs1xu] {
    width: 100%;
    height: 30px;
    padding: 4px 10px;
    border-radius: 6px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.btn-review-mini:hover[b-gkh2eqs1xu] {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #94a3b8;
}

.loading-spinner[b-gkh2eqs1xu] {
    text-align: center;
    padding: 60px;
    color: #6c757d;
    font-size: 1.1rem;
}

.empty-state[b-gkh2eqs1xu] {
    text-align: center;
    padding: 60px;
    background: #ffffff;
    border-radius: 20px;
    color: #6c757d;
    border: 1px dashed #ced4da;
}

@media (max-width: 768px) {
    .collection-header[b-gkh2eqs1xu] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .rating[b-gkh2eqs1xu] {
        margin: 0 auto 20px;
    }
    
    .tests-grid[b-gkh2eqs1xu] {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   DARK MODE OVERRIDES (OBSIDIAN NAVY THEME)
   ========================================================================== */
[data-theme="dark"] .mocktests-container[b-gkh2eqs1xu] {
    color: #f8fafc;
}

[data-theme="dark"] .mocktests-container[b-gkh2eqs1xu] {
    color: #f8fafc;
}

[data-theme="dark"] .stat-card[b-gkh2eqs1xu] {
    background: #15243f;
    border-color: #223554;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .stat-card:hover[b-gkh2eqs1xu] {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .icon-blue[b-gkh2eqs1xu] { background: rgba(37, 99, 235, 0.18); color: #60a5fa; }
[data-theme="dark"] .icon-emerald[b-gkh2eqs1xu] { background: rgba(5, 150, 105, 0.18); color: #34d399; }
[data-theme="dark"] .icon-violet[b-gkh2eqs1xu] { background: rgba(124, 58, 237, 0.18); color: #c084fc; }
[data-theme="dark"] .icon-amber[b-gkh2eqs1xu] { background: rgba(217, 119, 6, 0.18); color: #fbbf24; }

[data-theme="dark"] .stat-label[b-gkh2eqs1xu] {
    color: #94a3b8;
}

[data-theme="dark"] .stat-value[b-gkh2eqs1xu] {
    color: #f8fafc;
}

[data-theme="dark"] .stat-sub[b-gkh2eqs1xu] {
    color: #94a3b8;
}

[data-theme="dark"] .skill-mini-pill.listening[b-gkh2eqs1xu] { background: rgba(37, 99, 235, 0.18); color: #93c5fd; border: 1px solid rgba(59, 130, 246, 0.3); }
[data-theme="dark"] .skill-mini-pill.reading[b-gkh2eqs1xu]   { background: rgba(5, 150, 105, 0.18); color: #6ee7b7; border: 1px solid rgba(16, 185, 129, 0.3); }
[data-theme="dark"] .skill-mini-pill.writing[b-gkh2eqs1xu]   { background: rgba(124, 58, 237, 0.18); color: #d8b4fe; border: 1px solid rgba(168, 85, 247, 0.3); }
[data-theme="dark"] .skill-mini-pill.speaking[b-gkh2eqs1xu]  { background: rgba(194, 65, 12, 0.18); color: #fdba74; border: 1px solid rgba(249, 115, 22, 0.3); }

[data-theme="dark"] .mocktest-controls-bar[b-gkh2eqs1xu] {
    background: #15243f;
    border-color: #223554;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .coll-tab-btn[b-gkh2eqs1xu] {
    background: #111d33;
    border-color: #223554;
    color: #e2e8f0;
}

[data-theme="dark"] .coll-tab-btn:hover[b-gkh2eqs1xu] {
    background: #1c2c4a;
    color: #ffffff;
    border-color: #38bdf8;
}

[data-theme="dark"] .coll-tab-btn.active[b-gkh2eqs1xu] {
    background: linear-gradient(135deg, #0284c7, #0369a1);
    color: #ffffff;
    border-color: #38bdf8;
    box-shadow: 0 4px 12px rgba(56, 189, 248, 0.3);
}

[data-theme="dark"] .tab-count-badge[b-gkh2eqs1xu] {
    background: rgba(255, 255, 255, 0.12);
    color: #f8fafc;
}

[data-theme="dark"] .tab-count-badge.has-done[b-gkh2eqs1xu] {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid rgba(52, 211, 153, 0.35);
}

[data-theme="dark"] .mocktest-filter-actions[b-gkh2eqs1xu] {
    border-top-color: #223554;
}

[data-theme="dark"] .search-input-wrap i.bi-search[b-gkh2eqs1xu] {
    color: #64748b;
}

[data-theme="dark"] .search-input-wrap input[b-gkh2eqs1xu] {
    background: #111d33;
    border-color: #223554;
    color: #f8fafc;
}

[data-theme="dark"] .search-input-wrap input[b-gkh2eqs1xu]::placeholder {
    color: #64748b;
}

[data-theme="dark"] .search-input-wrap input:focus[b-gkh2eqs1xu] {
    background: #15243f;
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
}

[data-theme="dark"] .status-filter-pills[b-gkh2eqs1xu] {
    background: #111d33;
    border: 1px solid #223554;
}

[data-theme="dark"] .pill-btn[b-gkh2eqs1xu] {
    color: #cbd5e1;
}

[data-theme="dark"] .pill-btn:hover[b-gkh2eqs1xu] {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .pill-btn.active[b-gkh2eqs1xu] {
    background: #182a4a;
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.3);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .collection-title-bar[b-gkh2eqs1xu] {
    background: #15243f;
    border-color: #223554;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .ct-icon-wrap[b-gkh2eqs1xu] {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
}

[data-theme="dark"] .ct-title[b-gkh2eqs1xu] {
    color: #f8fafc;
}

[data-theme="dark"] .ct-meta[b-gkh2eqs1xu] {
    color: #94a3b8;
}

[data-theme="dark"] .ct-progress-badge[b-gkh2eqs1xu] {
    background: #064e3b;
    border-color: #047857;
    color: #a7f3d0;
}

[data-theme="dark"] .mocktest-offline-banner[b-gkh2eqs1xu] {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.3);
    color: #fcd34d;
}

[data-theme="dark"] .test-badge-done[b-gkh2eqs1xu] {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border-color: rgba(52, 211, 153, 0.3);
}

[data-theme="dark"] .test-badge-pending[b-gkh2eqs1xu] {
    background: #111d33;
    color: #94a3b8;
    border: 1px solid #223554;
}

[data-theme="dark"] .test-badge-offline[b-gkh2eqs1xu] {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border-color: rgba(52, 211, 153, 0.3);
}

[data-theme="dark"] .test-badge-not-dl[b-gkh2eqs1xu] {
    background: #111d33;
    color: #94a3b8;
    border: 1px solid #223554;
}

[data-theme="dark"] .test-downloading-pill[b-gkh2eqs1xu] {
    background: rgba(37, 99, 235, 0.15);
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .test-block[b-gkh2eqs1xu] {
    background-color: #15243f;
    border-color: #223554;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .test-block:hover[b-gkh2eqs1xu] {
    border-color: #38bdf8;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .test-block-header[b-gkh2eqs1xu] {
    border-bottom-color: #223554;
}

[data-theme="dark"] .test-block-header h2[b-gkh2eqs1xu] {
    color: #f8fafc;
}

[data-theme="dark"] .test-collection-tag[b-gkh2eqs1xu] {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
}

[data-theme="dark"] .btn-summary-link[b-gkh2eqs1xu] {
    background: #111d33;
    border-color: #223554;
    color: #cbd5e1;
}

[data-theme="dark"] .btn-summary-link:hover[b-gkh2eqs1xu] {
    background: #1c2c4a;
    color: #38bdf8;
    border-color: #38bdf8;
}

[data-theme="dark"] .skill-card[b-gkh2eqs1xu] {
    background: #111d33;
    border-color: #223554;
}

[data-theme="dark"] .skill-card:hover[b-gkh2eqs1xu] {
    background: #1a2c4c;
}

[data-theme="dark"] .skill-card.attempted[b-gkh2eqs1xu] {
    background: #15243f;
    border-color: #223554;
}

[data-theme="dark"] .listening .skill-header[b-gkh2eqs1xu] { color: #60a5fa; }
[data-theme="dark"] .reading .skill-header[b-gkh2eqs1xu] { color: #4ade80; }
[data-theme="dark"] .writing .skill-header[b-gkh2eqs1xu] { color: #c084fc; }
[data-theme="dark"] .speaking .skill-header[b-gkh2eqs1xu] { color: #fb923c; }

[data-theme="dark"] .skill-score-badge[b-gkh2eqs1xu] {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    border-color: #0284c7;
}

[data-theme="dark"] .skill-score-badge.pending[b-gkh2eqs1xu] {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border-color: #b45309;
}

[data-theme="dark"] .btn-take-test:disabled[b-gkh2eqs1xu] {
    background: #1e293b !important;
    color: #64748b !important;
    border: 1px solid #334155 !important;
    box-shadow: none !important;
}

[data-theme="dark"] .btn-review-mini[b-gkh2eqs1xu] {
    background: #1e293b;
    border-color: #334155;
    color: #cbd5e1;
}

[data-theme="dark"] .btn-review-mini:hover[b-gkh2eqs1xu] {
    background: #334155;
    color: #f8fafc;
    border-color: #38bdf8;
}

[data-theme="dark"] .test-header-actions .btn-outline-primary[b-gkh2eqs1xu] {
    color: #38bdf8;
    border-color: #38bdf8;
}

[data-theme="dark"] .test-header-actions .btn-outline-primary:hover[b-gkh2eqs1xu] {
    background: #38bdf8;
    color: #0f172a;
}

[data-theme="dark"] .empty-state[b-gkh2eqs1xu] {
    background: #15243f;
    border-color: #223554;
    color: #94a3b8;
}
/* /Pages/Ielts/IeltsMockTestSummary.razor.rz.scp.css */
.summary-container[b-9q77e4b5x0] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 20px 80px;
    color: #1e293b;
}

/* Loading & Empty State */
.summary-loading[b-9q77e4b5x0], .summary-empty[b-9q77e4b5x0] {
    text-align: center;
    padding: 80px 20px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.summary-loading .spinner[b-9q77e4b5x0] {
    width: 48px;
    height: 48px;
    border: 4px solid #e2e8f0;
    border-top-color: #4f46e5;
    border-radius: 50%;
    animation: spin-b-9q77e4b5x0 0.8s linear infinite;
    margin: 0 auto 16px;
}
@keyframes spin-b-9q77e4b5x0 { to { transform: rotate(360deg); } }
.summary-empty .empty-icon[b-9q77e4b5x0] { font-size: 3.5rem; margin-bottom: 16px; }
.summary-empty h3[b-9q77e4b5x0] { font-size: 1.5rem; font-weight: 800; color: #0f172a; margin-bottom: 8px; }
.summary-empty p[b-9q77e4b5x0] { color: #64748b; margin-bottom: 24px; }
.btn-primary[b-9q77e4b5x0] {
    background: #4f46e5;
    color: #fff;
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-primary:hover[b-9q77e4b5x0] { background: #4338ca; }

/* Breadcrumb & Header */
.breadcrumb-nav[b-9q77e4b5x0] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 12px;
}
.breadcrumb-nav a[b-9q77e4b5x0] { color: #4f46e5; text-decoration: none; font-weight: 600; }
.breadcrumb-nav a:hover[b-9q77e4b5x0] { text-decoration: underline; }
.breadcrumb-nav .active[b-9q77e4b5x0] { color: #0f172a; font-weight: 700; }

.header-main[b-9q77e4b5x0] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 16px;
}
.header-main h1[b-9q77e4b5x0] {
    font-size: 1.85rem;
    font-weight: 900;
    color: #0f172a;
    margin: 0 0 4px;
}
.subtitle[b-9q77e4b5x0] {
    color: #64748b;
    font-size: 1rem;
    margin: 0;
}
.attempt-time[b-9q77e4b5x0] {
    font-size: 0.88rem;
    color: #475569;
    background: #f1f5f9;
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: 600;
}

/* Overall Hero Card */
.overall-hero-card[b-9q77e4b5x0] {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%);
    border-radius: 20px;
    padding: 36px 40px;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 40px;
    box-shadow: 0 12px 36px rgba(49, 46, 129, 0.25);
    margin-bottom: 40px;
}
.hero-band-box[b-9q77e4b5x0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    border-radius: 18px;
    padding: 24px 32px;
    min-width: 190px;
    text-align: center;
}
.hero-band-title[b-9q77e4b5x0] {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #cbd5e1;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.hero-band-score[b-9q77e4b5x0] {
    font-size: 3.8rem;
    font-weight: 900;
    line-height: 1;
    color: #ffffff;
    text-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.hero-cefr-badge[b-9q77e4b5x0] {
    margin-top: 10px;
    font-size: 0.75rem;
    font-weight: 700;
    background: #4ade80;
    color: #064e3b;
    padding: 3px 10px;
    border-radius: 12px;
}

.hero-details[b-9q77e4b5x0] {
    flex: 1;
}
.hero-details h3[b-9q77e4b5x0] {
    font-size: 1.3rem;
    font-weight: 800;
    margin: 0 0 10px;
}
.hero-desc[b-9q77e4b5x0] {
    color: #e2e8f0;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
}
.progress-status-row[b-9q77e4b5x0] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.status-indicator[b-9q77e4b5x0] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}
.status-dot[b-9q77e4b5x0] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.status-dot.complete[b-9q77e4b5x0] { background: #4ade80; box-shadow: 0 0 8px #4ade80; }
.status-dot.in-progress[b-9q77e4b5x0] { background: #facc15; box-shadow: 0 0 8px #facc15; }
.status-bar-bg[b-9q77e4b5x0] {
    height: 8px;
    background: rgba(255,255,255,0.2);
    border-radius: 4px;
    overflow: hidden;
}
.status-bar-fill[b-9q77e4b5x0] {
    height: 100%;
    background: #4ade80;
    border-radius: 4px;
    transition: width 0.4s ease;
}

/* Skills Section */
.skills-section-header[b-9q77e4b5x0] {
    margin-bottom: 20px;
}
.skills-section-header h2[b-9q77e4b5x0] {
    font-size: 1.4rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 4px;
}
.skills-section-header p[b-9q77e4b5x0] {
    color: #64748b;
    font-size: 0.92rem;
    margin: 0;
}

.skills-grid-summary[b-9q77e4b5x0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.skill-card-summary[b-9q77e4b5x0] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 14px rgba(0,0,0,0.04);
    transition: transform 0.2s, box-shadow 0.2s;
}
.skill-card-summary:hover[b-9q77e4b5x0] {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.08);
}
.skill-card-summary.completed[b-9q77e4b5x0] {
    border-top: 4px solid #4f46e5;
}
.skill-card-summary.pending[b-9q77e4b5x0] {
    border-top: 4px solid #cbd5e1;
    background: #fafafa;
}

.card-top[b-9q77e4b5x0] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}
.card-icon-title[b-9q77e4b5x0] {
    display: flex;
    align-items: center;
    gap: 12px;
}
.icon-bubble[b-9q77e4b5x0] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}
.icon-bubble.listening[b-9q77e4b5x0] { background: #eff6ff; color: #2563eb; }
.icon-bubble.reading[b-9q77e4b5x0] { background: #f0fdf4; color: #16a34a; }
.icon-bubble.writing[b-9q77e4b5x0] { background: #faf5ff; color: #9333ea; }
.icon-bubble.speaking[b-9q77e4b5x0] { background: #fff7ed; color: #ea580c; }

.card-icon-title h4[b-9q77e4b5x0] {
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0;
    color: #0f172a;
}
.card-status-lbl[b-9q77e4b5x0] {
    font-size: 0.78rem;
    color: #64748b;
    font-weight: 600;
}

.card-band[b-9q77e4b5x0] {
    text-align: right;
}
.band-num[b-9q77e4b5x0] {
    display: block;
    font-size: 1.6rem;
    font-weight: 900;
    color: #4f46e5;
    line-height: 1;
}
.band-lbl[b-9q77e4b5x0] {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #64748b;
    font-weight: 700;
}

.card-body[b-9q77e4b5x0] {
    flex: 1;
    margin-bottom: 20px;
}
.metric-row[b-9q77e4b5x0] {
    display: flex;
    justify-content: space-between;
    font-size: 0.88rem;
    color: #475569;
    padding: 6px 0;
    border-bottom: 1px dashed #f1f5f9;
}
.metric-row strong[b-9q77e4b5x0] { color: #0f172a; }
.pending-hint[b-9q77e4b5x0] {
    font-size: 0.85rem;
    color: #94a3b8;
    line-height: 1.5;
    font-style: italic;
}
.criteria-list[b-9q77e4b5x0] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.crit-item[b-9q77e4b5x0] {
    font-size: 0.78rem;
    background: #f8fafc;
    padding: 4px 8px;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
}
.crit-name[b-9q77e4b5x0] { color: #64748b; }
.crit-score[b-9q77e4b5x0] { font-weight: 800; color: #0f172a; }

.card-actions[b-9q77e4b5x0] {
    display: flex;
    gap: 8px;
}
.btn-review[b-9q77e4b5x0], .btn-retake[b-9q77e4b5x0], .btn-take[b-9q77e4b5x0] {
    flex: 1;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    border: none;
}
.btn-review[b-9q77e4b5x0] {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
}
.btn-review:hover[b-9q77e4b5x0] { background: #dbeafe; }
.btn-retake[b-9q77e4b5x0] {
    background: #f8fafc;
    color: #475569;
    border: 1px solid #cbd5e1;
    flex: 0 0 auto;
}
.btn-retake:hover[b-9q77e4b5x0] { background: #e2e8f0; color: #0f172a; }
.btn-take[b-9q77e4b5x0] {
    background: #4f46e5;
    color: #fff;
    width: 100%;
}
.btn-take:hover[b-9q77e4b5x0] { background: #4338ca; }

/* ── TRADING TERMINAL & STOCK CHART ANALYTICS ── */
.trading-terminal-card[b-9q77e4b5x0] {
    background: #0b0f19;
    border: 1px solid #1e293b;
    border-radius: 20px;
    padding: 28px;
    color: #f8fafc;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    margin-bottom: 40px;
    position: relative;
    overflow: hidden;
}

.trading-terminal-card[b-9q77e4b5x0]::before {
    content: '';
    position: absolute;
    top: 0; left: 20%; right: 20%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #00f2fe, #10b981, transparent);
    opacity: 0.8;
}

/* Terminal Header */
.terminal-header[b-9q77e4b5x0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #1e293b;
    padding-bottom: 18px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 16px;
}

.terminal-title-group[b-9q77e4b5x0] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ticker-badge[b-9q77e4b5x0] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #111827;
    border: 1px solid #374151;
    padding: 6px 14px;
    border-radius: 8px;
}

.live-dot[b-9q77e4b5x0] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 10px #10b981;
    animation: pulseGlow-b-9q77e4b5x0 1.8s infinite;
}

@keyframes pulseGlow-b-9q77e4b5x0 {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.6; }
}

.ticker-code[b-9q77e4b5x0] {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 0.95rem;
    font-weight: 800;
    color: #f1f5f9;
    letter-spacing: 0.05em;
}

.terminal-tag[b-9q77e4b5x0] {
    font-size: 0.72rem;
    font-weight: 700;
    color: #00f2fe;
    background: rgba(0, 242, 254, 0.1);
    border: 1px solid rgba(0, 242, 254, 0.3);
    padding: 4px 10px;
    border-radius: 6px;
    letter-spacing: 0.06em;
}

.terminal-stats-group[b-9q77e4b5x0] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.stat-item[b-9q77e4b5x0] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.stat-lbl[b-9q77e4b5x0] {
    font-size: 0.68rem;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.stat-val[b-9q77e4b5x0] {
    font-family: 'SF Mono', monospace;
    font-size: 1.25rem;
    font-weight: 900;
}
.stat-val.bullish[b-9q77e4b5x0] { color: #10b981; text-shadow: 0 0 12px rgba(16, 185, 129, 0.4); }
.stat-val.neutral[b-9q77e4b5x0] { color: #94a3b8; }

.stat-badge[b-9q77e4b5x0] {
    font-family: 'SF Mono', monospace;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
}
.stat-badge.gain[b-9q77e4b5x0] {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.4);
}
.stat-badge.loss[b-9q77e4b5x0] {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.4);
}

/* Chart Wrapper */
.chart-wrapper[b-9q77e4b5x0] {
    position: relative;
    width: 100%;
    background: #070a13;
    border: 1px solid #172033;
    border-radius: 12px;
    padding: 12px 6px;
    margin-bottom: 24px;
    overflow-x: auto;
}

.trading-svg[b-9q77e4b5x0] {
    width: 100%;
    min-width: 650px;
    height: 250px;
    display: block;
}

/* Terminal Assets Grid */
.terminal-assets-grid[b-9q77e4b5x0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.asset-card[b-9q77e4b5x0] {
    background: #111827;
    border: 1px solid #1f2937;
    border-radius: 12px;
    padding: 14px 16px;
    transition: all 0.2s ease;
}
.asset-card:hover[b-9q77e4b5x0] {
    border-color: #374151;
    background: #162032;
    transform: translateY(-2px);
}

.asset-top[b-9q77e4b5x0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.asset-name[b-9q77e4b5x0] {
    font-size: 0.82rem;
    font-weight: 800;
    color: #e2e8f0;
    letter-spacing: 0.04em;
}

.asset-signal[b-9q77e4b5x0] {
    font-size: 0.68rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.05em;
}
.asset-signal.buy[b-9q77e4b5x0] { background: rgba(0, 242, 254, 0.15); color: #00f2fe; border: 1px solid rgba(0, 242, 254, 0.3); }
.asset-signal.strong-buy[b-9q77e4b5x0] { background: rgba(16, 185, 129, 0.2); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.4); }
.asset-signal.hold[b-9q77e4b5x0] { background: rgba(250, 204, 21, 0.15); color: #facc15; border: 1px solid rgba(250, 204, 21, 0.3); }
.asset-signal.breakout[b-9q77e4b5x0] { background: rgba(251, 146, 60, 0.15); color: #fb923c; border: 1px solid rgba(251, 146, 60, 0.3); }

.asset-value[b-9q77e4b5x0] {
    font-family: 'SF Mono', monospace;
    font-size: 1.25rem;
    font-weight: 900;
    color: #f8fafc;
    margin-bottom: 4px;
}
.asset-sub[b-9q77e4b5x0] {
    font-size: 0.72rem;
    color: #64748b;
}

/* Bottom Actions */
.summary-bottom-actions[b-9q77e4b5x0] {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}
.btn-bottom[b-9q77e4b5x0] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}
.btn-bottom.back[b-9q77e4b5x0] {
    background: #ffffff;
    color: #334155;
    border: 1px solid #cbd5e1;
}
.btn-bottom.back:hover[b-9q77e4b5x0] {
    background: #f8fafc;
    color: #0f172a;
    border-color: #94a3b8;
}
.btn-bottom.retake-all[b-9q77e4b5x0] {
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(79,70,229,0.3);
}
.btn-bottom.retake-all:hover[b-9q77e4b5x0] {
    background: linear-gradient(135deg, #4338ca, #4f46e5);
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .summary-container[b-9q77e4b5x0] {
        padding: 16px 12px 60px;
    }
    .overall-hero-card[b-9q77e4b5x0] {
        flex-direction: column;
        padding: 20px;
        gap: 18px;
        text-align: center;
    }
    .hero-band-box[b-9q77e4b5x0] { width: 100%; min-width: auto; }
    .hero-band-score[b-9q77e4b5x0] { font-size: 3rem; }
    .header-main[b-9q77e4b5x0] { flex-direction: column; align-items: flex-start; }
    .trading-terminal-card[b-9q77e4b5x0] { padding: 18px 14px; }
    .terminal-header[b-9q77e4b5x0] { flex-direction: column; align-items: flex-start; gap: 12px; }
    .terminal-stats-group[b-9q77e4b5x0] { width: 100%; justify-content: space-between; }
    .stat-item[b-9q77e4b5x0] { align-items: flex-start; }
    .skills-grid-summary[b-9q77e4b5x0] { grid-template-columns: 1fr; }
}

/* ==========================================================================
   DARK MODE OVERRIDES (OBSIDIAN NAVY THEME)
   ========================================================================== */
[data-theme="dark"] .summary-container[b-9q77e4b5x0] {
    color: #f8fafc;
}

[data-theme="dark"] .summary-loading[b-9q77e4b5x0],
[data-theme="dark"] .summary-empty[b-9q77e4b5x0] {
    background: #15243f;
    border: 1px solid #223554;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .summary-empty h3[b-9q77e4b5x0] {
    color: #f8fafc;
}

[data-theme="dark"] .summary-empty p[b-9q77e4b5x0] {
    color: #94a3b8;
}

[data-theme="dark"] .header-main h1[b-9q77e4b5x0] {
    color: #f8fafc;
}

[data-theme="dark"] .subtitle[b-9q77e4b5x0] {
    color: #94a3b8;
}

[data-theme="dark"] .attempt-time[b-9q77e4b5x0] {
    background: #111d33;
    color: #cbd5e1;
    border: 1px solid #223554;
}

[data-theme="dark"] .skills-section-header h2[b-9q77e4b5x0] {
    color: #f8fafc;
}

[data-theme="dark"] .skills-section-header p[b-9q77e4b5x0] {
    color: #94a3b8;
}

[data-theme="dark"] .skill-card-summary[b-9q77e4b5x0] {
    background: #15243f;
    border-color: #223554;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .skill-card-summary:hover[b-9q77e4b5x0] {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .skill-card-summary.pending[b-9q77e4b5x0] {
    background: #111d33;
    border-top-color: #334155;
}

[data-theme="dark"] .card-icon-title h4[b-9q77e4b5x0] {
    color: #f8fafc;
}

[data-theme="dark"] .card-status-lbl[b-9q77e4b5x0] {
    color: #94a3b8;
}

[data-theme="dark"] .metric-row[b-9q77e4b5x0] {
    color: #cbd5e1;
    border-bottom-color: #1e293b;
}

[data-theme="dark"] .metric-row strong[b-9q77e4b5x0] {
    color: #f8fafc;
}

[data-theme="dark"] .crit-item[b-9q77e4b5x0] {
    background: #111d33;
    border: 1px solid #223554;
}

[data-theme="dark"] .crit-name[b-9q77e4b5x0] {
    color: #94a3b8;
}

[data-theme="dark"] .crit-score[b-9q77e4b5x0] {
    color: #f8fafc;
}

[data-theme="dark"] .btn-review[b-9q77e4b5x0] {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    border-color: #0284c7;
}

[data-theme="dark"] .btn-review:hover[b-9q77e4b5x0] {
    background: rgba(56, 189, 248, 0.25);
}

[data-theme="dark"] .btn-retake[b-9q77e4b5x0] {
    background: #111d33;
    color: #cbd5e1;
    border-color: #223554;
}

[data-theme="dark"] .btn-retake:hover[b-9q77e4b5x0] {
    background: #1c2c4a;
    color: #f8fafc;
}

[data-theme="dark"] .btn-bottom.back[b-9q77e4b5x0] {
    background: #111d33;
    border-color: #223554;
    color: #cbd5e1;
}

[data-theme="dark"] .btn-bottom.back:hover[b-9q77e4b5x0] {
    background: #1c2c4a;
    color: #f8fafc;
    border-color: #38bdf8;
}
/* /Pages/Ielts/IeltsPriorityReview.razor.rz.scp.css */
/* Container */
.priority-container[b-kl14x6bmv8] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 20px 80px;
    color: #1e293b;
    font-family: 'Inter', 'Segoe UI', sans-serif;
}

/* Loading */
.priority-loading[b-kl14x6bmv8] {
    text-align: center;
    padding: 80px 20px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.priority-loading .spinner[b-kl14x6bmv8] {
    width: 48px;
    height: 48px;
    border: 4px solid #e2e8f0;
    border-top-color: #4f46e5;
    border-radius: 50%;
    animation: spin-b-kl14x6bmv8 0.8s linear infinite;
    margin: 0 auto 16px;
}
@keyframes spin-b-kl14x6bmv8 { to { transform: rotate(360deg); } }
.priority-loading p[b-kl14x6bmv8] { color: #64748b; font-size: 1rem; }

/* Header */
.priority-header[b-kl14x6bmv8] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 16px;
}
.priority-header h1[b-kl14x6bmv8] {
    font-size: 1.85rem;
    font-weight: 900;
    color: #0f172a;
    margin: 0 0 6px;
}
.header-sub[b-kl14x6bmv8] {
    color: #64748b;
    font-size: 0.95rem;
    margin: 0;
}
.level-badge[b-kl14x6bmv8] {
    background: #eff6ff;
    color: #2563eb;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    border: 1px solid #bfdbfe;
    white-space: nowrap;
}

/* Empty state */
.priority-empty[b-kl14x6bmv8] {
    text-align: center;
    padding: 80px 20px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.empty-icon[b-kl14x6bmv8] { font-size: 4rem; margin-bottom: 16px; }
.priority-empty h3[b-kl14x6bmv8] {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 10px;
}
.priority-empty p[b-kl14x6bmv8] {
    color: #64748b;
    max-width: 480px;
    margin: 0 auto 28px;
    line-height: 1.6;
}
.btn-go-test[b-kl14x6bmv8] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 14px rgba(79,70,229,0.3);
}
.btn-go-test:hover[b-kl14x6bmv8] {
    background: linear-gradient(135deg, #4338ca, #4f46e5);
    transform: translateY(-2px);
}

/* Hero Band Card — đồng bộ với IeltsMockTestSummary */
.hero-band-card[b-kl14x6bmv8] {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%);
    border-radius: 20px;
    padding: 36px 40px;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 40px;
    box-shadow: 0 12px 36px rgba(49, 46, 129, 0.25);
    margin-bottom: 40px;
}
.hero-band-box[b-kl14x6bmv8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    border-radius: 18px;
    padding: 24px 32px;
    min-width: 190px;
    text-align: center;
}
.hero-band-title[b-kl14x6bmv8] {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #cbd5e1;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.hero-band-score[b-kl14x6bmv8] {
    font-size: 3.8rem;
    font-weight: 900;
    line-height: 1;
    color: #ffffff;
    text-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.hero-cefr-badge[b-kl14x6bmv8] {
    margin-top: 10px;
    font-size: 0.72rem;
    font-weight: 700;
    background: #4ade80;
    color: #064e3b;
    padding: 3px 10px;
    border-radius: 12px;
}
.hero-details[b-kl14x6bmv8] { flex: 1; }
.hero-details h3[b-kl14x6bmv8] {
    font-size: 1.3rem;
    font-weight: 800;
    margin: 0 0 10px;
}
.hero-desc[b-kl14x6bmv8] {
    color: #e2e8f0;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 16px;
}
.hero-meta[b-kl14x6bmv8] {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.hero-meta span[b-kl14x6bmv8] {
    font-size: 0.82rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Section Header */
.section-header[b-kl14x6bmv8] {
    margin-bottom: 20px;
}
.section-header h2[b-kl14x6bmv8] {
    font-size: 1.4rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 4px;
}
.section-header p[b-kl14x6bmv8] {
    color: #64748b;
    font-size: 0.92rem;
    margin: 0;
}

/* ── Trading Terminal Chart (đồng bộ IeltsMockTestSummary) ── */
.trading-terminal-card[b-kl14x6bmv8] {
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 16px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    margin-bottom: 40px;
}

.terminal-header[b-kl14x6bmv8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid #1e293b;
    flex-wrap: wrap;
    gap: 12px;
}
.terminal-title-group[b-kl14x6bmv8] { display: flex; flex-direction: column; gap: 4px; }
.ticker-badge[b-kl14x6bmv8] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(16,185,129,0.1);
    border: 1px solid rgba(16,185,129,0.3);
    padding: 4px 12px;
    border-radius: 20px;
}
.live-dot[b-kl14x6bmv8] {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 8px #10b981;
    animation: pulse-dot-b-kl14x6bmv8 1.5s infinite;
}
@keyframes pulse-dot-b-kl14x6bmv8 {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(0.8); }
}
.ticker-code[b-kl14x6bmv8] { font-size: 0.8rem; font-weight: 800; color: #10b981; font-family: monospace; letter-spacing: 0.05em; }
.terminal-tag[b-kl14x6bmv8] { font-size: 0.68rem; color: #475569; font-family: monospace; text-transform: uppercase; letter-spacing: 0.08em; }

.terminal-stats-group[b-kl14x6bmv8] { display: flex; gap: 20px; flex-wrap: wrap; }
.stat-item[b-kl14x6bmv8] { display: flex; flex-direction: column; gap: 2px; }
.stat-lbl[b-kl14x6bmv8] { font-size: 0.65rem; color: #475569; text-transform: uppercase; letter-spacing: 0.07em; font-family: monospace; }
.stat-val[b-kl14x6bmv8] { font-size: 1.1rem; font-weight: 800; font-family: monospace; }
.stat-val.bullish[b-kl14x6bmv8] { color: #10b981; }
.stat-val.neutral[b-kl14x6bmv8] { color: #60a5fa; }
.stat-badge[b-kl14x6bmv8] {
    font-size: 0.8rem; font-weight: 800;
    padding: 2px 8px; border-radius: 6px;
    font-family: monospace;
}
.stat-badge.gain[b-kl14x6bmv8] { background: rgba(16,185,129,0.15); color: #10b981; border: 1px solid rgba(16,185,129,0.3); }
.stat-badge.loss[b-kl14x6bmv8] { background: rgba(239,68,68,0.15); color: #f87171; border: 1px solid rgba(239,68,68,0.3); }

.chart-wrapper[b-kl14x6bmv8] {
    padding: 16px 16px 8px;
    background: #0f172a;
}
.trading-svg[b-kl14x6bmv8] { width: 100%; height: 260px; display: block; }

.terminal-assets-grid[b-kl14x6bmv8] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid #1e293b;
}
.asset-card[b-kl14x6bmv8] {
    padding: 16px 20px;
    border-right: 1px solid #1e293b;
    transition: background 0.2s;
}
.asset-card:last-child[b-kl14x6bmv8] { border-right: none; }
.asset-card:hover[b-kl14x6bmv8] { background: rgba(255,255,255,0.03); }
.asset-card.asset-weak[b-kl14x6bmv8] { background: rgba(239,68,68,0.06); border-top: 2px solid #ef4444; }

.asset-top[b-kl14x6bmv8] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.asset-name[b-kl14x6bmv8] { font-size: 0.72rem; font-weight: 800; color: #94a3b8; font-family: monospace; letter-spacing: 0.04em; }
.asset-signal[b-kl14x6bmv8] {
    font-size: 0.62rem; font-weight: 800;
    padding: 2px 6px; border-radius: 4px;
    font-family: monospace;
}
.asset-signal.buy[b-kl14x6bmv8]       { background: rgba(16,185,129,0.15); color: #10b981; }
.asset-signal.strong-buy[b-kl14x6bmv8]{ background: rgba(16,185,129,0.25); color: #4ade80; }
.asset-signal.hold[b-kl14x6bmv8]      { background: rgba(234,179,8,0.15);  color: #facc15; }
.asset-signal.sell[b-kl14x6bmv8]      { background: rgba(239,68,68,0.15);  color: #f87171; }
.asset-signal.breakout[b-kl14x6bmv8]  { background: rgba(129,140,248,0.15);color: #818cf8; }

.asset-value[b-kl14x6bmv8] { font-size: 1rem; font-weight: 900; color: #e2e8f0; font-family: monospace; margin-bottom: 4px; }
.asset-sub[b-kl14x6bmv8] { font-size: 0.68rem; color: #475569; font-family: monospace; }


/* Task Cards */
.tasks-grid[b-kl14x6bmv8] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}
.task-card[b-kl14x6bmv8] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 14px rgba(0,0,0,0.04);
}
.task-card:hover[b-kl14x6bmv8] {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.09);
}
.task-card.priority-high[b-kl14x6bmv8]  { border-top: 4px solid #ef4444; }
.task-card.priority-medium[b-kl14x6bmv8]{ border-top: 4px solid #f59e0b; }
.task-card.priority-low[b-kl14x6bmv8]   { border-top: 4px solid #6366f1; }

.task-top[b-kl14x6bmv8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.task-icon-wrap[b-kl14x6bmv8] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}
.task-icon-wrap.priority-icon-high[b-kl14x6bmv8]   { background: #fef2f2; color: #dc2626; }
.task-icon-wrap.priority-icon-medium[b-kl14x6bmv8] { background: #fffbeb; color: #d97706; }
.task-icon-wrap.priority-icon-low[b-kl14x6bmv8]    { background: #eff6ff; color: #4f46e5; }

.priority-badge[b-kl14x6bmv8] {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
}
.priority-badge.high[b-kl14x6bmv8]   { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.priority-badge.medium[b-kl14x6bmv8] { background: #fffbeb; color: #d97706; border: 1px solid #fcd34d; }
.priority-badge.low[b-kl14x6bmv8]    { background: #eff6ff; color: #4f46e5; border: 1px solid #c7d2fe; }

.task-title[b-kl14x6bmv8] {
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    line-height: 1.4;
}
.task-desc[b-kl14x6bmv8] {
    font-size: 0.87rem;
    color: #475569;
    line-height: 1.55;
    margin: 0;
    flex: 1;
}
.task-btn[b-kl14x6bmv8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.85rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}
.task-btn.priority-btn-high[b-kl14x6bmv8] {
    background: linear-gradient(135deg, #dc2626, #ef4444);
    color: #fff;
    box-shadow: 0 4px 12px rgba(220,38,38,0.25);
}
.task-btn.priority-btn-high:hover[b-kl14x6bmv8] {
    background: linear-gradient(135deg, #b91c1c, #dc2626);
    transform: translateY(-1px);
}
.task-btn.priority-btn-medium[b-kl14x6bmv8] {
    background: linear-gradient(135deg, #d97706, #f59e0b);
    color: #fff;
    box-shadow: 0 4px 12px rgba(217,119,6,0.25);
}
.task-btn.priority-btn-medium:hover[b-kl14x6bmv8] {
    background: linear-gradient(135deg, #b45309, #d97706);
    transform: translateY(-1px);
}
.task-btn.priority-btn-low[b-kl14x6bmv8] {
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    color: #fff;
    box-shadow: 0 4px 12px rgba(79,70,229,0.25);
}
.task-btn.priority-btn-low:hover[b-kl14x6bmv8] {
    background: linear-gradient(135deg, #4338ca, #4f46e5);
    transform: translateY(-1px);
}

/* History Table */
.history-table-wrap[b-kl14x6bmv8] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,0.04);
}
.history-table[b-kl14x6bmv8] {
    width: 100%;
    border-collapse: collapse;
}
.history-table thead tr[b-kl14x6bmv8] {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}
.history-table th[b-kl14x6bmv8] {
    padding: 12px 20px;
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    text-align: left;
}
.history-table tbody tr[b-kl14x6bmv8] {
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s;
}
.history-table tbody tr:hover[b-kl14x6bmv8] { background: #f8fafc; }
.history-table tbody tr:last-child[b-kl14x6bmv8] { border-bottom: none; }
.history-table td[b-kl14x6bmv8] {
    padding: 12px 20px;
    font-size: 0.9rem;
    color: #334155;
}
.skill-chip[b-kl14x6bmv8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 700;
}
.skill-chip.listening[b-kl14x6bmv8] { background: #eff6ff; color: #2563eb; }
.skill-chip.reading[b-kl14x6bmv8]   { background: #f0fdf4; color: #16a34a; }
.skill-chip.writing[b-kl14x6bmv8]   { background: #faf5ff; color: #9333ea; }
.skill-chip.speaking[b-kl14x6bmv8]  { background: #fff7ed; color: #ea580c; }

.band-val[b-kl14x6bmv8] {
    font-size: 1rem;
    font-weight: 900;
    color: #4f46e5;
}
.time-ago[b-kl14x6bmv8] {
    color: #94a3b8;
    font-size: 0.85rem;
}

/* Responsive */
@media (max-width: 768px) {
    .hero-band-card[b-kl14x6bmv8] {
        flex-direction: column;
        padding: 24px;
        gap: 24px;
        text-align: center;
    }
    .hero-band-box[b-kl14x6bmv8] { width: 100%; }
    .priority-header[b-kl14x6bmv8] { flex-direction: column; }
    .hero-meta[b-kl14x6bmv8] { justify-content: center; }
    .tasks-grid[b-kl14x6bmv8] { grid-template-columns: 1fr; }
    .terminal-assets-grid[b-kl14x6bmv8] { grid-template-columns: repeat(2, 1fr); }
    .terminal-header[b-kl14x6bmv8] { flex-direction: column; align-items: flex-start; }
    .terminal-stats-group[b-kl14x6bmv8] { gap: 12px; }
    .checklist-header[b-kl14x6bmv8] { flex-direction: column; align-items: flex-start; }
    .checklist-item[b-kl14x6bmv8] { flex-direction: column; align-items: flex-start; gap: 10px; }
    .history-actions[b-kl14x6bmv8] { flex-direction: column; align-items: flex-start; }
}

/* ─── Granular Sub-Skill Diagnosis ─── */
.diagnostic-grid[b-kl14x6bmv8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 20px;
    margin-bottom: 36px;
}
.diagnostic-card[b-kl14x6bmv8] {
    background: #ffffff;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.05);
    border: 1px solid #e2e8f0;
    transition: transform 0.2s, box-shadow 0.2s;
}
.diagnostic-card:hover[b-kl14x6bmv8] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}
.diag-header[b-kl14x6bmv8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
}
.diag-title-group[b-kl14x6bmv8] {
    display: flex;
    align-items: center;
    gap: 10px;
}
.diag-icon[b-kl14x6bmv8] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}
.diag-icon.listening[b-kl14x6bmv8] { background: #eff6ff; color: #2563eb; }
.diag-icon.reading[b-kl14x6bmv8] { background: #f0fdf4; color: #16a34a; }
.diag-icon.writing[b-kl14x6bmv8] { background: #faf5ff; color: #9333ea; }
.diag-icon.speaking[b-kl14x6bmv8] { background: #fff7ed; color: #ea580c; }
.diag-title[b-kl14x6bmv8] {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}
.diag-badge[b-kl14x6bmv8] {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
}
.diag-badge.alert[b-kl14x6bmv8] { background: #fef2f2; color: #ef4444; border: 1px solid #fecaca; }
.diag-badge.good[b-kl14x6bmv8] { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }

.subskill-list[b-kl14x6bmv8] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.subskill-item[b-kl14x6bmv8] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid transparent;
    transition: all 0.2s;
}
.subskill-item.highlight-weak[b-kl14x6bmv8] {
    background: #fff1f2;
    border-color: #fecdd3;
}
.subskill-top[b-kl14x6bmv8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.subskill-name[b-kl14x6bmv8] {
    font-size: 0.88rem;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 6px;
}
.subskill-score[b-kl14x6bmv8] {
    font-size: 0.85rem;
    font-weight: 800;
}
.subskill-bar-wrap[b-kl14x6bmv8] {
    height: 7px;
    background: #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}
.subskill-bar[b-kl14x6bmv8] {
    height: 100%;
    border-radius: 10px;
    transition: width 0.5s ease;
}
.subskill-note[b-kl14x6bmv8] {
    font-size: 0.78rem;
    color: #64748b;
    display: flex;
    justify-content: space-between;
}

/* ─── Interactive Daily Focus Checklist ─── */
.checklist-card[b-kl14x6bmv8] {
    background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%);
    border-radius: 18px;
    padding: 24px 26px;
    border: 1.5px solid #dbeafe;
    box-shadow: 0 6px 24px rgba(37,99,235,0.06);
    margin-bottom: 36px;
}
.checklist-header[b-kl14x6bmv8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 12px;
}
.checklist-title-wrap h3[b-kl14x6bmv8] {
    margin: 0 0 4px;
    font-size: 1.2rem;
    font-weight: 800;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 8px;
}
.checklist-sub[b-kl14x6bmv8] {
    margin: 0;
    font-size: 0.88rem;
    color: #64748b;
}
.checklist-progress-box[b-kl14x6bmv8] {
    display: flex;
    align-items: center;
    gap: 12px;
}
.checklist-progress-text[b-kl14x6bmv8] {
    font-size: 0.88rem;
    font-weight: 800;
    color: #2563eb;
}
.checklist-progress-bar-wrap[b-kl14x6bmv8] {
    width: 130px;
    height: 10px;
    background: #e2e8f0;
    border-radius: 20px;
    overflow: hidden;
}
.checklist-progress-bar-fill[b-kl14x6bmv8] {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #10b981);
    border-radius: 20px;
    transition: width 0.35s ease;
}
.checklist-items-grid[b-kl14x6bmv8] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.checklist-item[b-kl14x6bmv8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}
.checklist-item:hover[b-kl14x6bmv8] {
    border-color: #3b82f6;
    background: #f8faff;
    transform: translateX(3px);
}
.checklist-item.done[b-kl14x6bmv8] {
    background: #f0fdf4;
    border-color: #bbf7d0;
}
.check-left[b-kl14x6bmv8] {
    display: flex;
    align-items: center;
    gap: 14px;
}
.check-box[b-kl14x6bmv8] {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 2px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    color: #fff;
    font-size: 0.85rem;
}
.checklist-item.done .check-box[b-kl14x6bmv8] {
    background: #10b981;
    border-color: #10b981;
}
.check-content[b-kl14x6bmv8] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.check-title[b-kl14x6bmv8] {
    font-size: 0.93rem;
    font-weight: 700;
    color: #1e293b;
    transition: all 0.2s;
}
.checklist-item.done .check-title[b-kl14x6bmv8] {
    text-decoration: line-through;
    color: #64748b;
}
.check-meta[b-kl14x6bmv8] {
    font-size: 0.8rem;
    color: #94a3b8;
}
.check-act-btn[b-kl14x6bmv8] {
    padding: 6px 14px;
    font-size: 0.82rem;
    font-weight: 700;
    border-radius: 8px;
    border: none;
    background: #eff6ff;
    color: #2563eb;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.check-act-btn:hover[b-kl14x6bmv8] {
    background: #2563eb;
    color: #ffffff;
}

/* ─── History Action Buttons ─── */
.history-actions[b-kl14x6bmv8] {
    display: flex;
    align-items: center;
    gap: 8px;
}
.btn-hist-action[b-kl14x6bmv8] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: 7px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #334155;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
}
.btn-hist-action:hover[b-kl14x6bmv8] {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1d4ed8;
}
.btn-hist-action.primary[b-kl14x6bmv8] {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}
.btn-hist-action.primary:hover[b-kl14x6bmv8] {
    background: #1d4ed8;
}

/* ==========================================================================
   DARK MODE OVERRIDES (OBSIDIAN NAVY THEME)
   ========================================================================== */
[data-theme="dark"] .priority-container[b-kl14x6bmv8] {
    color: #f8fafc;
}

[data-theme="dark"] .priority-loading[b-kl14x6bmv8],
[data-theme="dark"] .priority-empty[b-kl14x6bmv8] {
    background: #15243f;
    border: 1px solid #223554;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .priority-empty h3[b-kl14x6bmv8] {
    color: #f8fafc;
}

[data-theme="dark"] .priority-empty p[b-kl14x6bmv8] {
    color: #94a3b8;
}

[data-theme="dark"] .priority-header h1[b-kl14x6bmv8] {
    color: #f8fafc;
}

[data-theme="dark"] .header-sub[b-kl14x6bmv8] {
    color: #94a3b8;
}

[data-theme="dark"] .section-header h2[b-kl14x6bmv8] {
    color: #f8fafc;
}

[data-theme="dark"] .section-header p[b-kl14x6bmv8] {
    color: #94a3b8;
}

[data-theme="dark"] .task-card[b-kl14x6bmv8] {
    background: #15243f;
    border-color: #223554;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .task-card:hover[b-kl14x6bmv8] {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .task-title[b-kl14x6bmv8] {
    color: #f8fafc;
}

[data-theme="dark"] .task-desc[b-kl14x6bmv8] {
    color: #94a3b8;
}

[data-theme="dark"] .history-table-wrap[b-kl14x6bmv8] {
    background: #15243f;
    border-color: #223554;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .history-table thead tr[b-kl14x6bmv8] {
    background: #111d33;
    border-bottom-color: #223554;
}

[data-theme="dark"] .history-table th[b-kl14x6bmv8] {
    color: #94a3b8;
}

[data-theme="dark"] .history-table tbody tr[b-kl14x6bmv8] {
    border-bottom-color: #1e293b;
}

[data-theme="dark"] .history-table tbody tr:hover[b-kl14x6bmv8] {
    background: #1a2c4c;
}

[data-theme="dark"] .history-table td[b-kl14x6bmv8] {
    color: #cbd5e1;
}

[data-theme="dark"] .diagnostic-card[b-kl14x6bmv8] {
    background: #15243f;
    border-color: #223554;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .diag-header[b-kl14x6bmv8] {
    border-bottom-color: #223554;
}

[data-theme="dark"] .diag-title[b-kl14x6bmv8] {
    color: #f8fafc;
}

[data-theme="dark"] .subskill-item[b-kl14x6bmv8] {
    background: #111d33;
    border-color: #223554;
}

[data-theme="dark"] .subskill-name[b-kl14x6bmv8] {
    color: #f8fafc;
}

[data-theme="dark"] .subskill-note[b-kl14x6bmv8] {
    color: #94a3b8;
}

[data-theme="dark"] .subskill-bar-wrap[b-kl14x6bmv8] {
    background: #1e293b;
}

[data-theme="dark"] .checklist-card[b-kl14x6bmv8] {
    background: #15243f;
    border-color: #223554;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .checklist-title-wrap h3[b-kl14x6bmv8] {
    color: #f8fafc;
}

[data-theme="dark"] .checklist-sub[b-kl14x6bmv8] {
    color: #94a3b8;
}

[data-theme="dark"] .checklist-progress-bar-wrap[b-kl14x6bmv8] {
    background: #1e293b;
}

[data-theme="dark"] .checklist-item[b-kl14x6bmv8] {
    background: #111d33;
    border-color: #223554;
}

[data-theme="dark"] .checklist-item:hover[b-kl14x6bmv8] {
    background: #1c2c4a;
    border-color: #38bdf8;
}

[data-theme="dark"] .checklist-item.done[b-kl14x6bmv8] {
    background: #08291e;
    border-color: #065f46;
}

[data-theme="dark"] .check-title[b-kl14x6bmv8] {
    color: #f8fafc;
}

[data-theme="dark"] .checklist-item.done .check-title[b-kl14x6bmv8] {
    color: #64748b;
}

[data-theme="dark"] .check-meta[b-kl14x6bmv8] {
    color: #94a3b8;
}

[data-theme="dark"] .btn-hist-action[b-kl14x6bmv8] {
    background: #111d33;
    border-color: #223554;
    color: #cbd5e1;
}

[data-theme="dark"] .btn-hist-action:hover[b-kl14x6bmv8] {
    background: #1c2c4a;
    color: #f8fafc;
    border-color: #38bdf8;
}

/* /Pages/Ielts/IeltsReading.razor.rz.scp.css */
/* ── GLOBAL LAYOUT ── */
:root[b-l8u3gc1jy5] {
    --topbar-h: 52px;
    --partbar-h: 44px;
    --navbottom-h: 52px;
    --passage-bg: #fff;
    --q-bg: #fafafa;
    --border: #e0e0e0;
    --primary: #0a7cff;
    --answered-color: #16a34a;
    --shadow: 0 1px 4px rgba(0,0,0,.08);
}

/* ── LOADING / ERROR ── */
.reading-loading[b-l8u3gc1jy5] {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; height: 60vh; gap: 16px; color: #666;
}
.loading-ring[b-l8u3gc1jy5] {
    width: 44px; height: 44px;
    border: 4px solid #e0e0e0; border-top-color: var(--primary);
    border-radius: 50%; animation: spin-b-l8u3gc1jy5 0.8s linear infinite;
}
@keyframes spin-b-l8u3gc1jy5 { to { transform: rotate(360deg); } }
.reading-error[b-l8u3gc1jy5] { text-align: center; padding: 80px 20px; color: #555; }
.reading-error .error-icon[b-l8u3gc1jy5] { font-size: 3rem; margin-bottom: 12px; }

/* ── TOP BAR ── */
.reading-topbar[b-l8u3gc1jy5] {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center;
    height: var(--topbar-h);
    background: #fff; border-bottom: 1px solid var(--border);
    padding: 0 20px; box-shadow: var(--shadow);
    gap: 16px;
}
.topbar-left[b-l8u3gc1jy5] { flex: 1; }
.exam-title-short[b-l8u3gc1jy5] {
    font-size: 0.85rem; font-weight: 600; color: #333;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 300px; display: block;
}
.topbar-center[b-l8u3gc1jy5] { flex: 0 0 auto; }
.timer-box[b-l8u3gc1jy5] {
    display: flex; align-items: center; gap: 6px;
    background: #f0f4ff; border: 1px solid #c7d7ff;
    border-radius: 20px; padding: 6px 14px;
    font-weight: 600; font-size: 0.95rem; color: #1a56db;
}
.timer-box.timer-warning[b-l8u3gc1jy5] { background: #fff0f0; border-color: #fca5a5; color: #dc2626; }
.timer-icon[b-l8u3gc1jy5] { font-size: 1rem; }
.topbar-right[b-l8u3gc1jy5] { flex: 1; display: flex; justify-content: flex-end; }
.btn-submit-exam[b-l8u3gc1jy5] {
    background: #16a34a; color: #fff; border: none;
    padding: 8px 20px; border-radius: 6px; font-weight: 700;
    font-size: 0.9rem; cursor: pointer; transition: background 0.2s;
}
.btn-submit-exam:hover[b-l8u3gc1jy5] { background: #15803d; }
.btn-exit-exam[b-l8u3gc1jy5] { background: transparent; border: 1px solid #cbd5e1; color: #475569; padding: 8px 14px; border-radius: 6px; margin-right: 8px; cursor: pointer; }
.btn-exit-exam:hover[b-l8u3gc1jy5] { border-color: #e83e8c; color: #e83e8c; }
.test-session-status[b-l8u3gc1jy5] { color: #b91c1c; font-size: 0.85rem; font-weight: 700; }

/* ── PART TABS BAR ── */
.part-tabs-bar[b-l8u3gc1jy5] {
    display: flex; align-items: center; gap: 8px;
    padding: 0 20px; height: var(--partbar-h);
    background: #f1f5f9; border-bottom: 1px solid #cbd5e1;
    overflow-x: auto;
}
.part-tab-btn[b-l8u3gc1jy5] {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 18px; border: 1px solid #cbd5e1;
    border-radius: 8px; background: #ffffff; cursor: pointer;
    font-size: 0.88rem; font-weight: 700; color: #475569;
    white-space: nowrap; transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.part-tab-btn:hover[b-l8u3gc1jy5] {
    background: #e2e8f0; color: #0f172a; border-color: #94a3b8;
}
.part-tab-btn.active[b-l8u3gc1jy5] {
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    border-color: #1d4ed8; color: #ffffff;
    box-shadow: 0 2px 8px rgba(37,99,235,0.35);
}
.part-tab-score[b-l8u3gc1jy5] {
    font-size: 0.75rem; background: #e2e8f0; color: #334155;
    border-radius: 12px; padding: 2px 8px; font-weight: 700;
}
.part-tab-btn.active .part-tab-score[b-l8u3gc1jy5] {
    background: rgba(255,255,255,0.25); color: #ffffff;
}
.part-tabs-spacer[b-l8u3gc1jy5] { flex: 1; }
.total-progress[b-l8u3gc1jy5] { font-size: 0.85rem; color: #475569; font-weight: 600; white-space: nowrap; }

/* ── SPLIT LAYOUT ── */
.reading-split[b-l8u3gc1jy5] {
    display: flex;
    height: calc(100vh - var(--topbar-h) - var(--partbar-h) - var(--navbottom-h));
    overflow: hidden;
}

/* ── PASSAGE COLUMN ── */
.passage-col[b-l8u3gc1jy5] {
    flex: 1 1 50%; width: 50%; min-height: 0;
    overflow-y: auto; padding: 28px 32px;
    background: var(--passage-bg);
    border-right: 1px solid var(--border);
}
.part-header-label[b-l8u3gc1jy5] {
    font-size: 0.78rem; font-weight: 800; letter-spacing: 2px;
    color: #888; text-transform: uppercase; margin-bottom: 6px;
}
.part-time-note[b-l8u3gc1jy5] {
    font-size: 0.88rem; color: #555; margin-bottom: 18px;
    line-height: 1.5;
}
.passage-main-title[b-l8u3gc1jy5] {
    font-family: 'Georgia', serif; font-size: 1.4rem; font-weight: 700;
    text-align: center; color: #1a1a1a;
    margin: 0 0 22px; padding-bottom: 14px;
    border-bottom: 2px solid var(--border);
}
.passage-text[b-l8u3gc1jy5] {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 1.02rem; line-height: 1.85; color: #222;
}
.passage-text[b-l8u3gc1jy5]  p { margin-bottom: 1.2rem; }
.passage-text[b-l8u3gc1jy5]  strong { font-weight: 700; }

/* ── QUESTIONS COLUMN ── */
.questions-col[b-l8u3gc1jy5] {
    flex: 1 1 50%; width: 50%; min-height: 0;
    overflow-y: auto; padding: 20px 24px 80px;
    background: var(--q-bg);
}

/* ── QUESTION GROUP ── */
.q-group-container[b-l8u3gc1jy5] {
    margin-bottom: 30px;
}

.q-group-instruction[b-l8u3gc1jy5] {
    background: #fdfae5; border-left: 4px solid #f9cd43;
    padding: 14px 18px; margin-bottom: 20px;
    font-size: 0.95rem; font-weight: 600; color: #333;
    border-radius: 4px; box-shadow: var(--shadow);
    line-height: 1.6;
}

/* ── QUESTION BLOCK ── */
.question-block[b-l8u3gc1jy5] {
    background: #fff; border: 1px solid var(--border);
    border-radius: 8px; padding: 16px 18px; margin-bottom: 12px;
    transition: border-color 0.15s, box-shadow 0.15s;
    cursor: pointer;
}
.question-block:hover[b-l8u3gc1jy5] { border-color: #aac4ff; }
.question-block.q-focused[b-l8u3gc1jy5] { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(10,124,255,.08); }
.question-block.answered[b-l8u3gc1jy5] { border-left: 3px solid var(--answered-color); }

.q-text[b-l8u3gc1jy5] {
    font-size: 0.95rem; color: #222; line-height: 1.6;
    margin-bottom: 10px; font-weight: 500;
}

/* Inline Dropdown (For T/F/NG) */
.q-inline-dropdown[b-l8u3gc1jy5] {
    display: inline-block;
    margin-top: 8px;
}
.q-inline-dropdown .q-select[b-l8u3gc1jy5] {
    min-width: 160px;
    font-weight: 600;
}

/* Dropdown select */
.q-select[b-l8u3gc1jy5] {
    width: 100%; padding: 8px 12px; border: 1px solid #ccc;
    border-radius: 6px; font-size: 0.9rem; color: #333;
    background: #fff; appearance: auto; cursor: pointer;
    transition: border-color 0.15s;
}
.q-select:focus[b-l8u3gc1jy5] { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(10,124,255,.15); }
.q-select--answered[b-l8u3gc1jy5] { border-color: var(--answered-color); background: #f0fdf4; color: var(--answered-color); font-weight: 700; }

/* MCQ option list */
.q-option-list[b-l8u3gc1jy5] { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.q-option[b-l8u3gc1jy5] {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 9px 12px; border: 1px solid #ddd; border-radius: 6px;
    cursor: pointer; transition: all 0.15s; font-size: 0.9rem;
}
.q-option:hover[b-l8u3gc1jy5] { background: #f0f4ff; border-color: #aac4ff; }
.q-option.selected[b-l8u3gc1jy5] { background: #e8f0fe; border-color: var(--primary); }
.opt-badge[b-l8u3gc1jy5] {
    flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
    background: #e0e0e0; display: flex; align-items: center; justify-content: center;
    font-size: 0.78rem; font-weight: 700; color: #555;
}
.q-option.selected .opt-badge[b-l8u3gc1jy5] { background: var(--primary); color: #fff; }
.opt-body[b-l8u3gc1jy5] { line-height: 1.4; color: #333; }

/* Fill-in-blank */
.q-fill-input[b-l8u3gc1jy5] {
    width: 100%; padding: 8px 12px; border: 1px solid #ccc; border-radius: 6px;
    font-size: 0.9rem; color: #333; transition: border-color 0.15s;
    box-sizing: border-box;
}
.q-fill-input:focus[b-l8u3gc1jy5] { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(10,124,255,.15); }

/* ── PART NAVIGATION BUTTONS ── */
.part-nav-buttons[b-l8u3gc1jy5] {
    display: flex; gap: 14px; margin-top: 28px; justify-content: flex-end;
}
.nav-part-btn[b-l8u3gc1jy5] {
    padding: 10px 24px; border-radius: 8px; font-weight: 700;
    font-size: 0.92rem; cursor: pointer; border: none; transition: all 0.2s;
    display: inline-flex; align-items: center; gap: 6px;
}
.nav-part-btn.prev[b-l8u3gc1jy5] {
    background: #ffffff; color: #1e293b; border: 1.5px solid #94a3b8;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.nav-part-btn.prev:hover[b-l8u3gc1jy5] {
    background: #f1f5f9; color: #0f172a; border-color: #64748b;
    transform: translateY(-1px);
}
.nav-part-btn.next[b-l8u3gc1jy5] {
    background: linear-gradient(135deg, #2563eb, #3b82f6); color: #ffffff;
    box-shadow: 0 4px 12px rgba(37,99,235,0.3); border: 1px solid #1d4ed8;
}
.nav-part-btn.next:hover[b-l8u3gc1jy5] {
    background: linear-gradient(135deg, #1d4ed8, #2563eb);
    transform: translateY(-1px);
}
.nav-part-btn.submit[b-l8u3gc1jy5] {
    background: linear-gradient(135deg, #16a34a, #22c55e); color: #ffffff;
    box-shadow: 0 4px 12px rgba(22,163,74,0.3); border: 1px solid #15803d;
}
.nav-part-btn.submit:hover[b-l8u3gc1jy5] {
    background: linear-gradient(135deg, #15803d, #16a34a);
    transform: translateY(-1px);
}

/* ── BOTTOM QUESTION NAVIGATOR ── */
.q-navigator-bar[b-l8u3gc1jy5] {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
    display: flex; align-items: center; gap: 8px;
    height: var(--navbottom-h);
    background: #ffffff; border-top: 1.5px solid #cbd5e1;
    padding: 0 16px; box-shadow: 0 -3px 12px rgba(0,0,0,.08);
    overflow-x: auto;
}
.q-navigator-label[b-l8u3gc1jy5] {
    font-size: 0.8rem; font-weight: 800; color: #334155;
    letter-spacing: 0.5px; text-transform: uppercase;
    flex-shrink: 0; padding-right: 10px; border-right: 2px solid #cbd5e1;
}
.q-navigator-nums[b-l8u3gc1jy5] { display: flex; gap: 5px; flex-wrap: nowrap; }
.q-nav-num[b-l8u3gc1jy5] {
    width: 32px; height: 32px; border-radius: 50%;
    border: 1.5px solid #cbd5e1; background: #f8fafc;
    font-size: 0.82rem; font-weight: 700; color: #475569;
    cursor: pointer; transition: all 0.15s; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.q-nav-num:hover[b-l8u3gc1jy5] {
    background: #e0e7ff; border-color: #6366f1; color: #4338ca;
}
.q-nav-num.nav-answered[b-l8u3gc1jy5] {
    background: #10b981 !important; border-color: #059669 !important; color: #ffffff !important;
}
.q-nav-num.nav-active[b-l8u3gc1jy5] {
    border: 2px solid #2563eb !important; color: #2563eb !important;
    background: #eff6ff !important; font-weight: 800;
    box-shadow: 0 0 0 2px rgba(37,99,235,0.25);
}
.q-nav-num.nav-answered.nav-active[b-l8u3gc1jy5] {
    background: #059669 !important; border-color: #047857 !important; color: #ffffff !important;
}
.q-navigator-next-part[b-l8u3gc1jy5] {
    flex-shrink: 0; margin-left: 12px; padding: 6px 16px;
    background: #2563eb; border: 1px solid #1d4ed8; border-radius: 20px;
    font-size: 0.82rem; color: #ffffff; font-weight: 700;
    cursor: pointer; white-space: nowrap;
    box-shadow: 0 2px 6px rgba(37,99,235,0.25); transition: all 0.2s;
}
.q-navigator-next-part:hover[b-l8u3gc1jy5] {
    background: #1d4ed8; transform: translateY(-1px);
}

/* ── DARK MODE (OBSIDIAN NAVY THEME) ── */
[data-theme="dark"][b-l8u3gc1jy5],
:root[data-theme="dark"][b-l8u3gc1jy5] {
    --passage-bg: #0b1325;
    --q-bg: #0f172a;
    --border: #223554;
}

[data-theme="dark"] .reading-topbar[b-l8u3gc1jy5] {
    background: #111d33;
    border-bottom-color: #223554;
}

[data-theme="dark"] .exam-title-short[b-l8u3gc1jy5] {
    color: #f8fafc;
}

[data-theme="dark"] .timer-box[b-l8u3gc1jy5] {
    background: #15243f;
    border-color: #223554;
    color: #38bdf8;
}

[data-theme="dark"] .btn-exit-exam[b-l8u3gc1jy5] {
    border-color: #223554;
    color: #94a3b8;
}

[data-theme="dark"] .part-tabs-bar[b-l8u3gc1jy5] {
    background: #0b1325;
    border-bottom-color: #223554;
}

[data-theme="dark"] .part-tab-btn[b-l8u3gc1jy5] {
    background: #15243f;
    border-color: #223554;
    color: #cbd5e1;
}

[data-theme="dark"] .part-tab-btn:hover[b-l8u3gc1jy5] {
    background: #1c2c4a;
    color: #f8fafc;
    border-color: #38bdf8;
}

[data-theme="dark"] .part-tab-score[b-l8u3gc1jy5] {
    background: #111d33;
    color: #94a3b8;
}

[data-theme="dark"] .total-progress[b-l8u3gc1jy5] {
    color: #94a3b8;
}

[data-theme="dark"] .passage-col[b-l8u3gc1jy5] {
    background: var(--passage-bg);
    border-right-color: #223554;
}

[data-theme="dark"] .part-header-label[b-l8u3gc1jy5] {
    color: #38bdf8;
}

[data-theme="dark"] .part-time-note[b-l8u3gc1jy5] {
    color: #94a3b8;
}

[data-theme="dark"] .passage-main-title[b-l8u3gc1jy5] {
    color: #f8fafc;
    border-bottom-color: #223554;
}

[data-theme="dark"] .passage-text[b-l8u3gc1jy5] {
    color: #e2e8f0;
}

[data-theme="dark"] .questions-col[b-l8u3gc1jy5] {
    background: var(--q-bg);
}

[data-theme="dark"] .q-group-instruction[b-l8u3gc1jy5] {
    background: #1e293b;
    border-left-color: #38bdf8;
    color: #e2e8f0;
}

[data-theme="dark"] .question-block[b-l8u3gc1jy5] {
    background: #15243f;
    border-color: #223554;
}

[data-theme="dark"] .question-block:hover[b-l8u3gc1jy5] {
    border-color: #38bdf8;
}

[data-theme="dark"] .q-text[b-l8u3gc1jy5] {
    color: #f8fafc;
}

[data-theme="dark"] .q-select[b-l8u3gc1jy5],
[data-theme="dark"] .q-fill-input[b-l8u3gc1jy5] {
    background: #111d33;
    border-color: #223554;
    color: #f8fafc;
}

[data-theme="dark"] .q-option[b-l8u3gc1jy5] {
    background: #111d33;
    border-color: #223554;
}

[data-theme="dark"] .q-option:hover[b-l8u3gc1jy5] {
    background: #1c2c4a;
    border-color: #38bdf8;
}

[data-theme="dark"] .q-option.selected[b-l8u3gc1jy5] {
    background: #1a2c4c;
    border-color: #38bdf8;
}

[data-theme="dark"] .opt-badge[b-l8u3gc1jy5] {
    background: #15243f;
    color: #cbd5e1;
}

[data-theme="dark"] .opt-body[b-l8u3gc1jy5] {
    color: #e2e8f0;
}

[data-theme="dark"] .nav-part-btn.prev[b-l8u3gc1jy5] {
    background: #15243f;
    border-color: #223554;
    color: #cbd5e1;
}

[data-theme="dark"] .nav-part-btn.prev:hover[b-l8u3gc1jy5] {
    background: #1c2c4a;
    color: #f8fafc;
    border-color: #38bdf8;
}

[data-theme="dark"] .q-navigator-bar[b-l8u3gc1jy5] {
    background: #111d33;
    border-top-color: #223554;
}

[data-theme="dark"] .q-navigator-label[b-l8u3gc1jy5] {
    color: #cbd5e1;
    border-right-color: #223554;
}

[data-theme="dark"] .q-nav-num[b-l8u3gc1jy5] {
    background: #15243f;
    border-color: #223554;
    color: #cbd5e1;
}

[data-theme="dark"] .q-nav-num:hover[b-l8u3gc1jy5] {
    background: #1c2c4a;
    border-color: #38bdf8;
    color: #38bdf8;
}

[data-theme="dark"] .reading-review-topbar[b-l8u3gc1jy5] {
    background: #111d33;
    border-bottom-color: #38bdf8;
}

[data-theme="dark"] .stat-pill.band[b-l8u3gc1jy5] {
    background: #15243f;
    border-color: #223554;
    color: #38bdf8;
}

[data-theme="dark"] .btn-action.retake-btn[b-l8u3gc1jy5] {
    background: #15243f;
    border-color: #223554;
    color: #cbd5e1;
}

[data-theme="dark"] .checkpoint-banner[b-l8u3gc1jy5] {
    background: #15243f;
    border-color: #223554;
}

[data-theme="dark"] .cb-info[b-l8u3gc1jy5] {
    color: #cbd5e1;
}

[data-theme="dark"] .cb-info strong[b-l8u3gc1jy5] {
    color: #38bdf8;
}

[data-theme="dark"] .btn-cb-discard[b-l8u3gc1jy5] {
    background: #111d33;
    border-color: #223554;
    color: #94a3b8;
}

/* ── MOBILE SECTION TOGGLE ── */
.mobile-section-toggle[b-l8u3gc1jy5] {
    display: none;
    padding: 6px 12px;
    background: #e2e8f0;
    gap: 8px;
    border-bottom: 1px solid var(--border);
}
.m-toggle-btn[b-l8u3gc1jy5] {
    flex: 1;
    padding: 8px 12px;
    border-radius: 8px;
    border: none;
    background: #f1f5f9;
    color: #475569;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.2s;
}
.m-toggle-btn.active[b-l8u3gc1jy5] {
    background: #2563eb;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(37,99,235,0.3);
}

/* ── RESPONSIVE MOBILE ── */
@media (max-width: 768px) {
    .mobile-section-toggle[b-l8u3gc1jy5] {
        display: flex;
    }
    .reading-split[b-l8u3gc1jy5] {
        flex-direction: column;
        height: calc(100vh - var(--topbar-h) - var(--partbar-h) - var(--navbottom-h) - 48px);
        overflow: hidden;
    }
    .passage-col[b-l8u3gc1jy5], .questions-col[b-l8u3gc1jy5] {
        width: 100%;
        flex: 1 1 100%;
        border-right: none;
    }
    .reading-split.mobile-show-passage .questions-col[b-l8u3gc1jy5] {
        display: none;
    }
    .reading-split.mobile-show-passage .passage-col[b-l8u3gc1jy5] {
        display: block;
    }
    .reading-split.mobile-show-questions .passage-col[b-l8u3gc1jy5] {
        display: none;
    }
    .reading-split.mobile-show-questions .questions-col[b-l8u3gc1jy5] {
        display: block;
    }
    .passage-col[b-l8u3gc1jy5] {
        padding: 18px 16px 60px;
    }
    .questions-col[b-l8u3gc1jy5] {
        padding: 16px 14px 80px;
    }
    .q-text[b-l8u3gc1jy5] {
        font-size: 0.96rem;
    }
    .q-option[b-l8u3gc1jy5] {
        padding: 12px 14px;
        min-height: 44px;
    }
    .q-nav-num[b-l8u3gc1jy5] {
        width: 36px;
        height: 36px;
        font-size: 0.85rem;
    }
}

/* ── REVIEW TOPBAR ── */
.reading-review-topbar[b-l8u3gc1jy5] {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    height: 60px; background: #ffffff;
    border-bottom: 2px solid #2563eb; padding: 0 20px;
    box-shadow: 0 4px 12px rgba(37,99,235,0.1);
    gap: 16px; flex-wrap: nowrap;
}
.review-top-left[b-l8u3gc1jy5] { display: flex; flex-direction: column; gap: 2px; }
.review-badge[b-l8u3gc1jy5] {
    font-size: 0.72rem; font-weight: 800; color: #2563eb;
    letter-spacing: 0.08em; text-transform: uppercase;
}
.review-top-stats[b-l8u3gc1jy5] {
    display: flex; align-items: center; gap: 8px;
}
.stat-pill[b-l8u3gc1jy5] {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 20px; font-size: 0.85rem; font-weight: 700;
}
.stat-pill.band[b-l8u3gc1jy5] { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; font-size: 0.95rem; }
.stat-pill.band .stat-val[b-l8u3gc1jy5] { font-size: 1.15rem; font-weight: 900; }
.stat-pill.correct[b-l8u3gc1jy5] { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.stat-pill.wrong[b-l8u3gc1jy5] { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.stat-pill.blank[b-l8u3gc1jy5] { background: #fefce8; color: #a16207; border: 1px solid #fef08a; }
.stat-lbl[b-l8u3gc1jy5] { font-size: 0.75rem; text-transform: uppercase; opacity: 0.8; }

.review-top-actions[b-l8u3gc1jy5] {
    display: flex; align-items: center; gap: 8px;
}
.btn-action[b-l8u3gc1jy5] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: 8px; font-size: 0.84rem; font-weight: 700;
    cursor: pointer; border: none; transition: all 0.2s;
}
.btn-action.summary-btn[b-l8u3gc1jy5] {
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    color: #fff; box-shadow: 0 2px 8px rgba(79,70,229,0.3);
}
.btn-action.summary-btn:hover[b-l8u3gc1jy5] { background: linear-gradient(135deg, #4338ca, #4f46e5); transform: translateY(-1px); }
.btn-action.next-btn[b-l8u3gc1jy5] {
    background: #0284c7; color: #fff;
}
.btn-action.next-btn:hover[b-l8u3gc1jy5] { background: #0369a1; }
.btn-action.retake-btn[b-l8u3gc1jy5] {
    background: #f1f5f9; color: #334155; border: 1px solid #cbd5e1;
}
.btn-action.retake-btn:hover[b-l8u3gc1jy5] { background: #e2e8f0; color: #0f172a; }
.btn-action.exit-btn[b-l8u3gc1jy5] {
    background: transparent; color: #64748b; border: 1px solid #e2e8f0;
}
.btn-action.exit-btn:hover[b-l8u3gc1jy5] { color: #dc2626; border-color: #fca5a5; background: #fff1f2; }

/* ── QUESTION BLOCK REVIEW FEEDBACK ── */
.q-header-row[b-l8u3gc1jy5] {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
}
.q-badge[b-l8u3gc1jy5] {
    font-size: 0.75rem; font-weight: 800; padding: 3px 10px; border-radius: 12px;
    white-space: nowrap; flex-shrink: 0;
}
.badge-correct[b-l8u3gc1jy5] { background: #dcfce7; color: #15803d; border: 1px solid #86efac; }
.badge-wrong[b-l8u3gc1jy5] { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }
.badge-blank[b-l8u3gc1jy5] { background: #fef9c3; color: #a16207; border: 1px solid #fde047; }

.question-block.q-review-correct[b-l8u3gc1jy5] { border-left: 4px solid #22c55e; background: #fafdfa; }
.question-block.q-review-wrong[b-l8u3gc1jy5] { border-left: 4px solid #ef4444; background: #fffafa; }
.question-block.q-review-blank[b-l8u3gc1jy5] { border-left: 4px solid #eab308; background: #fffdf5; }

.q-option.opt-is-correct[b-l8u3gc1jy5] {
    background: #ecfdf5 !important; border: 2px solid #10b981 !important; color: #065f46; font-weight: 600;
}
.q-option.opt-is-correct .opt-badge[b-l8u3gc1jy5] { background: #10b981; color: #fff; }
.opt-correct-tag[b-l8u3gc1jy5] {
    margin-left: auto; font-size: 0.75rem; font-weight: 800; color: #059669;
    background: #d1fae5; padding: 2px 8px; border-radius: 10px;
}
.q-option.opt-is-wrong[b-l8u3gc1jy5] {
    background: #fef2f2 !important; border: 2px solid #ef4444 !important; text-decoration: line-through; color: #991b1b;
}
.q-option.opt-is-wrong .opt-badge[b-l8u3gc1jy5] { background: #ef4444; color: #fff; }

.q-fill-input.fill-correct[b-l8u3gc1jy5] {
    border-color: #10b981; background: #ecfdf5; color: #065f46; font-weight: 700;
}
.q-fill-input.fill-wrong[b-l8u3gc1jy5] {
    border-color: #ef4444; background: #fef2f2; color: #991b1b; font-weight: 700;
}

.q-answer-feedback[b-l8u3gc1jy5] {
    margin-top: 12px; padding: 10px 14px; border-radius: 8px; font-size: 0.88rem;
    display: flex; flex-direction: column; gap: 4px;
}
.q-answer-feedback.fb-correct[b-l8u3gc1jy5] { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.q-answer-feedback.fb-wrong[b-l8u3gc1jy5] { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.q-answer-feedback.fb-blank[b-l8u3gc1jy5] { background: #fefce8; border: 1px solid #fef08a; color: #854d0e; }
.fb-row[b-l8u3gc1jy5] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fb-label[b-l8u3gc1jy5] { font-weight: 700; font-size: 0.8rem; text-transform: uppercase; opacity: 0.8; }
.fb-val.student[b-l8u3gc1jy5] { font-weight: 700; }
.fb-val.correct[b-l8u3gc1jy5] { font-weight: 800; color: #16a34a; background: #dcfce7; padding: 2px 8px; border-radius: 6px; }

/* Question Navigator Colors */
.q-nav-num.nav-correct[b-l8u3gc1jy5] { background: #22c55e !important; border-color: #16a34a !important; color: #fff !important; }
.q-nav-num.nav-wrong[b-l8u3gc1jy5] { background: #ef4444 !important; border-color: #dc2626 !important; color: #fff !important; }
.q-nav-num.nav-blank[b-l8u3gc1jy5] { background: #eab308 !important; border-color: #ca8a04 !important; color: #fff !important; }

@media (max-width: 900px) {
    .reading-review-topbar[b-l8u3gc1jy5] { height: auto; padding: 12px; flex-direction: column; align-items: stretch; gap: 10px; }
    .review-top-stats[b-l8u3gc1jy5] { justify-content: space-between; }
    .review-top-actions[b-l8u3gc1jy5] { justify-content: space-between; flex-wrap: wrap; }
}

/* Checkpoint Banner */
.checkpoint-banner[b-l8u3gc1jy5] {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1.5px solid #93c5fd;
    border-radius: 12px;
    padding: 12px 18px;
    margin: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.12);
}
.cb-left[b-l8u3gc1jy5] {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cb-icon[b-l8u3gc1jy5] {
    font-size: 1.6rem;
    color: #2563eb;
}
.cb-info[b-l8u3gc1jy5] {
    font-size: 0.92rem;
    color: #1e3a8a;
}
.cb-info strong[b-l8u3gc1jy5] {
    color: #1d4ed8;
}
.cb-actions[b-l8u3gc1jy5] {
    display: flex;
    align-items: center;
    gap: 10px;
}
.btn-cb-restore[b-l8u3gc1jy5] {
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s;
}
.btn-cb-restore:hover[b-l8u3gc1jy5] {
    background: #1d4ed8;
}
.btn-cb-discard[b-l8u3gc1jy5] {
    background: #fff;
    color: #64748b;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px 14px;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s;
}
.btn-cb-discard:hover[b-l8u3gc1jy5] {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #dc2626;
}

/* ══════════════════════════════════════════════════════════════ */
/* CHẾ ĐỘ TỐI (DARK MODE) CHO READING REVIEW FEEDBACK            */
/* ══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .question-block.q-review-correct[b-l8u3gc1jy5] {
    background: rgba(34, 197, 94, 0.08);
    border-left-color: #22c55e;
}

[data-theme="dark"] .question-block.q-review-wrong[b-l8u3gc1jy5] {
    background: rgba(239, 68, 68, 0.08);
    border-left-color: #ef4444;
}

[data-theme="dark"] .question-block.q-review-blank[b-l8u3gc1jy5] {
    background: rgba(234, 179, 8, 0.08);
    border-left-color: #eab308;
}

[data-theme="dark"] .badge-correct[b-l8u3gc1jy5] {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border-color: rgba(34, 197, 94, 0.3);
}

[data-theme="dark"] .badge-wrong[b-l8u3gc1jy5] {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.3);
}

[data-theme="dark"] .badge-blank[b-l8u3gc1jy5] {
    background: rgba(234, 179, 8, 0.15);
    color: #fde047;
    border-color: rgba(234, 179, 8, 0.3);
}

[data-theme="dark"] .q-option.opt-is-correct[b-l8u3gc1jy5] {
    background: rgba(34, 197, 94, 0.15) !important;
    border-color: #22c55e !important;
    color: #86efac;
}

[data-theme="dark"] .opt-correct-tag[b-l8u3gc1jy5] {
    background: rgba(34, 197, 94, 0.25);
    color: #4ade80;
}

[data-theme="dark"] .q-option.opt-is-wrong[b-l8u3gc1jy5] {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: #ef4444 !important;
    color: #fca5a5;
}

[data-theme="dark"] .q-fill-input.fill-correct[b-l8u3gc1jy5] {
    background: rgba(34, 197, 94, 0.15);
    border-color: #22c55e;
    color: #86efac;
}

[data-theme="dark"] .q-fill-input.fill-wrong[b-l8u3gc1jy5] {
    background: rgba(239, 68, 68, 0.15);
    border-color: #ef4444;
    color: #fca5a5;
}

[data-theme="dark"] .q-answer-feedback.fb-correct[b-l8u3gc1jy5] {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.25);
    color: #86efac;
}

[data-theme="dark"] .q-answer-feedback.fb-wrong[b-l8u3gc1jy5] {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.25);
    color: #fca5a5;
}

[data-theme="dark"] .q-answer-feedback.fb-blank[b-l8u3gc1jy5] {
    background: rgba(234, 179, 8, 0.12);
    border-color: rgba(234, 179, 8, 0.25);
    color: #fde047;
}

[data-theme="dark"] .fb-val.correct[b-l8u3gc1jy5] {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

[data-theme="dark"] .checkpoint-banner[b-l8u3gc1jy5] {
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.4) 0%, rgba(15, 23, 42, 0.7) 100%);
    border-color: rgba(59, 130, 246, 0.35);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .cb-info[b-l8u3gc1jy5] {
    color: #93c5fd;
}

[data-theme="dark"] .cb-info strong[b-l8u3gc1jy5] {
    color: #60a5fa;
}

[data-theme="dark"] .btn-cb-discard[b-l8u3gc1jy5] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    color: #cbd5e1;
}

[data-theme="dark"] .btn-cb-discard:hover[b-l8u3gc1jy5] {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.35);
    color: #fca5a5;
}

/* /Pages/Ielts/IeltsSpeakAlong.razor.rz.scp.css */
/* ========================================================================= */
/* IELTS SPEAK ALONG (SHADOWING & INTERACTIVE MOCK) STYLESHEET               */
/* ========================================================================= */
.speak-along-page[b-ucq9bomuhu] {
    padding: 24px 20px 80px;
    max-width: 1320px;
    margin: 0 auto;
    font-family: 'Plus Jakarta Sans', 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--ig-text);
}

/* Header */
.page-top-header[b-ucq9bomuhu] {
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 20px;
}

.header-badge-row[b-ucq9bomuhu] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.badge-hero[b-ucq9bomuhu] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f0f9ff;
    color: #0284c7;
    border: 1px solid #bae6fd;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

[data-theme="dark"] .badge-hero[b-ucq9bomuhu] {
    background: rgba(14, 165, 233, 0.15);
    color: #38bdf8;
    border-color: rgba(56, 189, 248, 0.3);
}

.badge-streak[b-ucq9bomuhu] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    color: #c2410c;
    border: 1px solid #fed7aa;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(194, 65, 12, 0.1);
}

[data-theme="dark"] .badge-streak[b-ucq9bomuhu] {
    background: rgba(234, 88, 12, 0.15);
    color: #fb923c;
    border-color: rgba(251, 146, 60, 0.3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.streak-flame[b-ucq9bomuhu] {
    font-size: 1rem;
    animation: flamePulse-b-ucq9bomuhu 1.2s infinite alternate;
}

@keyframes flamePulse-b-ucq9bomuhu {
    from { transform: scale(1); }
    to { transform: scale(1.2); }
}

.btn-mock-interview-toggle[b-ucq9bomuhu] {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    color: #ffffff;
    border: none;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 3px 10px rgba(124, 58, 237, 0.25);
}

.btn-mock-interview-toggle:hover[b-ucq9bomuhu] {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(124, 58, 237, 0.35);
}

.btn-mock-interview-toggle.active[b-ucq9bomuhu] {
    background: #dc2626;
    box-shadow: 0 3px 10px rgba(220, 38, 38, 0.3);
}

.btn-corner-mic-test[b-ucq9bomuhu] {
    background: var(--ig-card-bg);
    border: 1.5px solid var(--ig-border);
    color: var(--ig-text);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.btn-corner-mic-test:hover[b-ucq9bomuhu] {
    border-color: #0284c7;
    color: #0284c7;
    background: #f0f9ff;
    transform: translateY(-1px);
}

[data-theme="dark"] .btn-corner-mic-test:hover[b-ucq9bomuhu] {
    background: #1a2c4c;
    border-color: #38bdf8;
    color: #38bdf8;
}

.mic-status-indicator[b-ucq9bomuhu] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.mic-status-indicator.online[b-ucq9bomuhu] {
    background: #16a34a;
    box-shadow: 0 0 6px rgba(22, 163, 74, 0.6);
}

.mic-status-indicator.offline[b-ucq9bomuhu] {
    background: #94a3b8;
}

.page-title[b-ucq9bomuhu] {
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--ig-text);
    margin: 0 0 6px 0;
    letter-spacing: -0.02em;
}

.page-subtitle[b-ucq9bomuhu] {
    margin: 0;
    font-size: 0.95rem;
    color: var(--ig-text-secondary);
    max-width: 680px;
    line-height: 1.6;
}

/* Part Tabs */
.part-selector-tabs[b-ucq9bomuhu] {
    display: flex;
    gap: 8px;
    background: #f1f5f9;
    padding: 6px;
    border-radius: 16px;
    border: 1px solid var(--ig-border);
    transition: background 0.2s, border-color 0.2s;
}

[data-theme="dark"] .part-selector-tabs[b-ucq9bomuhu] {
    background: #111d33;
    border-color: #223554;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.part-tab-btn[b-ucq9bomuhu] {
    background: transparent;
    border: none;
    padding: 8px 16px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.2s ease;
}

.part-tab-num[b-ucq9bomuhu] {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--ig-text);
}

[data-theme="dark"] .part-tab-num[b-ucq9bomuhu] {
    color: #cbd5e1;
}

.part-tab-label[b-ucq9bomuhu] {
    font-size: 0.74rem;
    color: var(--ig-text-secondary);
    font-weight: 500;
}

[data-theme="dark"] .part-tab-label[b-ucq9bomuhu] {
    color: #94a3b8;
}

.part-tab-btn:hover[b-ucq9bomuhu] {
    background: #e2e8f0;
}

[data-theme="dark"] .part-tab-btn:hover[b-ucq9bomuhu] {
    background: rgba(255, 255, 255, 0.06);
}

.part-tab-btn.active[b-ucq9bomuhu] {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35);
}

.part-tab-btn.active .part-tab-num[b-ucq9bomuhu] {
    color: #ffffff !important;
}

.part-tab-btn.active .part-tab-label[b-ucq9bomuhu] {
    color: rgba(255, 255, 255, 0.92) !important;
}

/* ========================================================================= */
/* VIEW 1: TOPIC CARDS & ROADMAP                                             */
/* ========================================================================= */
.topics-overview-section[b-ucq9bomuhu] {
    margin-top: 10px;
    animation: fadeIn-b-ucq9bomuhu 0.3s ease;
}

.section-intro-bar[b-ucq9bomuhu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.section-heading[b-ucq9bomuhu] {
    font-size: 1.32rem;
    font-weight: 700;
    color: var(--ig-text);
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -0.01em;
}

.section-desc[b-ucq9bomuhu] {
    margin: 0;
    font-size: 0.9rem;
    color: var(--ig-text-secondary);
    line-height: 1.55;
}

.overall-progress-chip[b-ucq9bomuhu] {
    background: var(--ig-card-bg);
    border: 1.5px solid var(--ig-border);
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 0.88rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ig-text);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] .overall-progress-chip[b-ucq9bomuhu] {
    color: #cbd5e1;
}

/* Chrome Voice Recommendation Banner - Khung vàng dịu mắt */
.chrome-notice-banner[b-ucq9bomuhu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1.5px solid #fde68a;
    border-left: 5px solid #f59e0b;
    border-radius: 16px;
    padding: 14px 20px;
    margin-bottom: 24px;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.08);
    flex-wrap: wrap;
    animation: fadeIn-b-ucq9bomuhu 0.3s ease;
    transition: all 0.25s ease;
}

[data-theme="dark"] .chrome-notice-banner[b-ucq9bomuhu] {
    background: rgba(245, 158, 11, 0.08);
    border: 1.5px solid rgba(245, 158, 11, 0.25);
    border-left: 5px solid #f59e0b;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.notice-main[b-ucq9bomuhu] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 280px;
}

.notice-icon[b-ucq9bomuhu] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #f59e0b;
    color: #ffffff;
    font-size: 1.35rem;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(217, 119, 6, 0.3);
}

[data-theme="dark"] .notice-icon[b-ucq9bomuhu] {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.4);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.notice-content[b-ucq9bomuhu] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.notice-tag[b-ucq9bomuhu] {
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #b45309;
    display: flex;
    align-items: center;
    gap: 6px;
}

[data-theme="dark"] .notice-tag[b-ucq9bomuhu] {
    color: #fbbf24;
}

.notice-text[b-ucq9bomuhu] {
    font-size: 0.94rem;
    color: #78350f;
    line-height: 1.55;
    font-weight: 500;
}

[data-theme="dark"] .notice-text[b-ucq9bomuhu] {
    color: #fde68a;
}

.notice-text strong[b-ucq9bomuhu] {
    color: #92400e;
    font-weight: 700;
}

[data-theme="dark"] .notice-text strong[b-ucq9bomuhu] {
    color: #fbbf24;
}

.chrome-highlight[b-ucq9bomuhu] {
    color: #b45309;
    font-weight: 700;
    text-decoration: underline;
}

[data-theme="dark"] .chrome-highlight[b-ucq9bomuhu] {
    color: #f59e0b;
}

.coccoc-tip-alert[b-ucq9bomuhu] {
    font-size: 0.86rem;
    border-radius: 12px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    color: #0369a1;
    padding: 10px 16px;
    margin: 10px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.5;
}

[data-theme="dark"] .coccoc-tip-alert[b-ucq9bomuhu] {
    background: rgba(14, 165, 233, 0.1);
    border-color: rgba(56, 189, 248, 0.3);
    color: #7dd3fc;
}

.notice-badge[b-ucq9bomuhu] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1.5px solid #f59e0b;
    color: #b45309;
    font-size: 0.85rem;
    font-weight: 800;
    padding: 8px 16px;
    border-radius: 20px;
    box-shadow: 0 2px 6px rgba(180, 83, 9, 0.12);
    white-space: nowrap;
}

[data-theme="dark"] .notice-badge[b-ucq9bomuhu] {
    background: #15243f;
    border-color: #f59e0b;
    color: #fbbf24;
}

.speech-chrome-tip[b-ucq9bomuhu] {
    font-size: 0.76rem;
    color: #0284c7;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    padding: 3px 9px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
}

[data-theme="dark"] .speech-chrome-tip[b-ucq9bomuhu] {
    background: rgba(14, 165, 233, 0.12);
    color: #38bdf8;
    border-color: rgba(56, 189, 248, 0.25);
}

@media (max-width: 640px) {
    .chrome-notice-banner[b-ucq9bomuhu] {
        padding: 10px 12px;
        gap: 10px;
    }
    .notice-badge[b-ucq9bomuhu] {
        display: none;
    }
}

.topic-cards-grid[b-ucq9bomuhu] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.topic-card[b-ucq9bomuhu] {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 20px;
    padding: 22px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
    position: relative;
    overflow: hidden;
}

.topic-card:hover[b-ucq9bomuhu] {
    transform: translateY(-4px);
    border-color: #0284c7;
    box-shadow: 0 12px 30px rgba(2, 132, 199, 0.12);
}

[data-theme="dark"] .topic-card[b-ucq9bomuhu] {
    background: #15243f;
    border: 1.5px solid #233554;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .topic-card:hover[b-ucq9bomuhu] {
    background: #182a4a;
    border-color: rgba(56, 189, 248, 0.45);
    box-shadow: 0 12px 30px rgba(2, 132, 199, 0.25), 0 0 15px rgba(56, 189, 248, 0.15);
}

.topic-card-header[b-ucq9bomuhu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.topic-icon-box[b-ucq9bomuhu] {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #f0f9ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.1);
}

[data-theme="dark"] .topic-icon-box[b-ucq9bomuhu] {
    background: rgba(14, 165, 233, 0.15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.topic-level-tag[b-ucq9bomuhu] {
    background: #f1f5f9;
    color: #475569;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
}

[data-theme="dark"] .topic-level-tag[b-ucq9bomuhu] {
    background: #1e293b;
    color: #cbd5e1;
}

.topic-title[b-ucq9bomuhu] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ig-text);
    margin: 0 0 4px 0;
    letter-spacing: -0.01em;
}

.topic-sub[b-ucq9bomuhu] {
    font-size: 0.86rem;
    color: var(--ig-text-secondary);
    margin: 0 0 18px 0;
    line-height: 1.5;
}

.topic-progress-wrap[b-ucq9bomuhu] {
    margin-top: auto;
    margin-bottom: 16px;
}

.topic-progress-info[b-ucq9bomuhu] {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: var(--ig-text-secondary);
    margin-bottom: 6px;
}

.topic-progress-bar[b-ucq9bomuhu] {
    width: 100%;
    height: 6px;
    background: #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}

[data-theme="dark"] .topic-progress-bar[b-ucq9bomuhu] {
    background: #1e293b;
}

.topic-progress-fill[b-ucq9bomuhu] {
    height: 100%;
    background: linear-gradient(90deg, #0284c7 0%, #38bdf8 100%);
    border-radius: 10px;
    transition: width 0.4s ease;
}

.topic-card-footer[b-ucq9bomuhu] {
    display: flex;
    justify-content: flex-end;
}

.btn-start-topic[b-ucq9bomuhu] {
    font-size: 0.82rem;
    font-weight: 700;
    color: #0284c7;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
}

.topic-card:hover .btn-start-topic[b-ucq9bomuhu] {
    transform: translateX(3px);
    color: #0369a1;
}

.topic-completed[b-ucq9bomuhu] {
    border-color: #bbf7d0;
    background: #fafffc;
}

.topic-completed .topic-progress-fill[b-ucq9bomuhu] {
    background: #16a34a;
}

/* ========================================================================= */
/* VIEW 2: FLASHCARD FOCUS WORKSPACE                                         */
/* ========================================================================= */
.flashcard-workspace[b-ucq9bomuhu] {
    animation: fadeIn-b-ucq9bomuhu 0.3s ease;
}

.flashcard-nav-header[b-ucq9bomuhu] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 12px 20px;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] .flashcard-nav-header[b-ucq9bomuhu] {
    background: #15243f;
    border-color: #233554;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.btn-back-to-topics[b-ucq9bomuhu] {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    color: #334155;
    padding: 6px 14px;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.btn-back-to-topics:hover[b-ucq9bomuhu] {
    background: #f0f9ff;
    border-color: #0284c7;
    color: #0284c7;
}

[data-theme="dark"] .btn-back-to-topics[b-ucq9bomuhu] {
    background: #111d33;
    border-color: #233554;
    color: #cbd5e1;
}

[data-theme="dark"] .btn-back-to-topics:hover[b-ucq9bomuhu] {
    background: #1a2c4c;
    border-color: #38bdf8;
    color: #38bdf8;
}

.topic-indicator-badge[b-ucq9bomuhu] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ig-text);
}

.topic-badge-icon[b-ucq9bomuhu] {
    font-size: 1.3rem;
}

.flashcard-stepper[b-ucq9bomuhu] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.stepper-btn[b-ucq9bomuhu] {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #475569;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
}

.stepper-btn:hover:not(:disabled)[b-ucq9bomuhu] {
    background: #f0f9ff;
    border-color: #0284c7;
    color: #0284c7;
}

.stepper-btn:disabled[b-ucq9bomuhu] {
    opacity: 0.4;
    cursor: not-allowed;
}

.stepper-counter[b-ucq9bomuhu] {
    font-size: 0.85rem;
    color: #64748b;
}

/* Practice 2-Column Grid */
.practice-main-grid[b-ucq9bomuhu] {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 24px;
    align-items: start;
}

.panel-card[b-ucq9bomuhu] {
    background: #ffffff;
    border-radius: 20px;
    border: 1.5px solid #e2e8f0;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.card-header-bar[b-ucq9bomuhu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 10px;
}

.question-badge[b-ucq9bomuhu] {
    background: #fef3c7;
    color: #b45309;
    border: 1px solid #fde68a;
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.speed-controls[b-ucq9bomuhu] {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #f8fafc;
    padding: 3px 6px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.speed-label[b-ucq9bomuhu] {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 600;
    margin-right: 4px;
}

.speed-btn[b-ucq9bomuhu] {
    background: transparent;
    border: none;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s;
}

.speed-btn.active[b-ucq9bomuhu] {
    background: #0284c7;
    color: #ffffff;
}

.question-title[b-ucq9bomuhu] {
    font-size: 1.35rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 16px 0;
    line-height: 1.4;
}

[data-theme="dark"] .question-title[b-ucq9bomuhu] {
    color: #f8fafc;
}

/* Tips & Vocab Box */
.tips-vocab-box[b-ucq9bomuhu] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

[data-theme="dark"] .tips-vocab-box[b-ucq9bomuhu] {
    background: #111d33;
    border-color: #233554;
}

.vocab-row[b-ucq9bomuhu], .tips-row[b-ucq9bomuhu] {
    font-size: 0.85rem;
    line-height: 1.45;
}

.tag-vocab-title[b-ucq9bomuhu], .tag-tip-title[b-ucq9bomuhu] {
    font-weight: 800;
    color: #1e293b;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 4px;
}

[data-theme="dark"] .tag-vocab-title[b-ucq9bomuhu],
[data-theme="dark"] .tag-tip-title[b-ucq9bomuhu] {
    color: #f8fafc;
}

.vocab-content[b-ucq9bomuhu] {
    color: #d97706;
    font-weight: 600;
}

[data-theme="dark"] .vocab-content[b-ucq9bomuhu] {
    color: #f59e0b;
}

.tip-content[b-ucq9bomuhu] {
    color: #475569;
}

[data-theme="dark"] .tip-content[b-ucq9bomuhu] {
    color: #94a3b8;
}

/* Karaoke Sync Model Answer */
.model-answer-section[b-ucq9bomuhu] {
    background: #f0fdf4;
    border: 1.5px solid #bbf7d0;
    border-radius: 16px;
    padding: 18px;
}

[data-theme="dark"] .model-answer-section[b-ucq9bomuhu] {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.25);
}

.section-label[b-ucq9bomuhu] {
    font-size: 0.88rem;
    font-weight: 800;
    color: #166534;
    display: flex;
    align-items: center;
    gap: 6px;
}

[data-theme="dark"] .section-label[b-ucq9bomuhu] {
    color: #4ade80;
}

.btn-play-all[b-ucq9bomuhu] {
    background: #16a34a;
    color: #ffffff;
    border: none;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.25);
}

.btn-play-all:hover[b-ucq9bomuhu] {
    background: #15803d;
    transform: translateY(-1px);
}

.btn-play-all.playing[b-ucq9bomuhu] {
    background: #dc2626;
    animation: pulsePlay-b-ucq9bomuhu 1.5s infinite;
}

@keyframes pulsePlay-b-ucq9bomuhu {
    0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

.karaoke-text-container[b-ucq9bomuhu] {
    background: #ffffff;
    border: 1px solid #dcfce7;
    border-radius: 12px;
    padding: 16px;
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 4px;
    line-height: 1.8;
}

[data-theme="dark"] .karaoke-text-container[b-ucq9bomuhu] {
    background: #111d33;
    border-color: #233554;
}

.karaoke-word[b-ucq9bomuhu] {
    font-size: 1.05rem;
    color: #14532d;
    font-weight: 600;
    padding: 1px 4px;
    border-radius: 4px;
    transition: all 0.15s ease;
}

[data-theme="dark"] .karaoke-word[b-ucq9bomuhu] {
    color: #f8fafc;
}

.karaoke-word.karaoke-active[b-ucq9bomuhu] {
    background: #fef08a;
    color: #854d0e;
    font-weight: 800;
    transform: scale(1.1);
    box-shadow: 0 0 12px rgba(250, 204, 21, 0.6);
    border-radius: 6px;
}

/* Record Panel (Right) */
.section-badge-record[b-ucq9bomuhu] {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.recording-live-tag[b-ucq9bomuhu] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #dc2626;
    font-size: 0.82rem;
    font-weight: 700;
}

.pulse-dot[b-ucq9bomuhu] {
    width: 10px;
    height: 10px;
    background: #dc2626;
    border-radius: 50%;
    animation: pulse-b-ucq9bomuhu 1s infinite;
}

@keyframes pulse-b-ucq9bomuhu {
    0% { transform: scale(0.9); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.5; }
    100% { transform: scale(0.9); opacity: 1; }
}

.record-instruction[b-ucq9bomuhu] {
    font-size: 0.88rem;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 20px;
}

.btn-start-record[b-ucq9bomuhu] {
    width: 100%;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff;
    border: none;
    border-radius: 16px;
    padding: 20px 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.3);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-start-record:hover[b-ucq9bomuhu] {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(2, 132, 199, 0.4);
}

.btn-record-icon[b-ucq9bomuhu] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.btn-record-text[b-ucq9bomuhu] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.btn-record-main[b-ucq9bomuhu] {
    font-size: 1.15rem;
    font-weight: 800;
}

.btn-record-sub[b-ucq9bomuhu] {
    font-size: 0.8rem;
    opacity: 0.9;
}

.recording-active-view[b-ucq9bomuhu] {
    background: #f8fafc;
    border: 2px dashed #0284c7;
    border-radius: 18px;
    padding: 20px;
    text-align: center;
    animation: fadeIn-b-ucq9bomuhu 0.3s ease;
}

.recording-live-canvas[b-ucq9bomuhu] {
    width: 100%;
    height: 60px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    margin-bottom: 16px;
    display: block;
}

[data-theme="dark"] .recording-live-canvas[b-ucq9bomuhu] {
    background: #111d33;
    border-color: #233554;
}

.live-transcript-box[b-ucq9bomuhu] {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 16px;
    text-align: left;
}

[data-theme="dark"] .live-transcript-box[b-ucq9bomuhu] {
    background: #111d33;
    border-color: #233554;
}

.live-label[b-ucq9bomuhu] {
    display: block;
    font-size: 0.78rem;
    font-weight: 800;
    color: #0284c7;
    margin-bottom: 4px;
}

.live-text[b-ucq9bomuhu] {
    font-size: 0.95rem;
    color: #1e293b;
    line-height: 1.5;
    font-style: italic;
    min-height: 38px;
}

[data-theme="dark"] .live-text[b-ucq9bomuhu] {
    color: #f8fafc;
}

.btn-stop-record[b-ucq9bomuhu] {
    background: #dc2626;
    color: #ffffff;
    border: none;
    padding: 12px 28px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.3);
    transition: all 0.2s;
}

.btn-stop-record:hover[b-ucq9bomuhu] {
    background: #b91c1c;
    transform: translateY(-2px);
}

.evaluating-view[b-ucq9bomuhu] {
    text-align: center;
    padding: 30px;
    color: #64748b;
}

/* Result Breakdown Card */
.result-breakdown-card[b-ucq9bomuhu] {
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid #e2e8f0;
    padding: 20px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
    animation: fadeIn-b-ucq9bomuhu 0.3s ease;
}

[data-theme="dark"] .result-breakdown-card[b-ucq9bomuhu] {
    background: #15243f;
    border-color: #233554;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.result-header-row[b-ucq9bomuhu] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f1f5f9;
}

[data-theme="dark"] .result-header-row[b-ucq9bomuhu] {
    border-bottom-color: #233554;
}

.score-main-badge[b-ucq9bomuhu] {
    width: 90px;
    height: 90px;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ffffff;
}

.score-excellent[b-ucq9bomuhu] { background: linear-gradient(135deg, #16a34a 0%, #15803d 100%); }
.score-good[b-ucq9bomuhu] { background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%); }
.score-needs-work[b-ucq9bomuhu] { background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%); }

.score-number[b-ucq9bomuhu] {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
}

.score-title[b-ucq9bomuhu] {
    font-size: 0.68rem;
    font-weight: 700;
    opacity: 0.9;
    margin-top: 3px;
}

.score-sub-metrics[b-ucq9bomuhu] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.metric-item[b-ucq9bomuhu] {
    font-size: 0.85rem;
    display: flex;
    justify-content: space-between;
    color: #475569;
}

[data-theme="dark"] .metric-item[b-ucq9bomuhu] {
    color: #94a3b8;
}

.metric-name[b-ucq9bomuhu] {
    display: flex;
    align-items: center;
    gap: 5px;
}

.metric-val[b-ucq9bomuhu] {
    color: #0f172a;
    font-weight: 700;
}

[data-theme="dark"] .metric-val[b-ucq9bomuhu] {
    color: #f8fafc;
}

/* User Recognized Transcript Box */
.user-recognized-transcript-box[b-ucq9bomuhu] {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 14px;
}

[data-theme="dark"] .user-recognized-transcript-box[b-ucq9bomuhu] {
    background: #111d33;
    border-color: #233554;
}

.transcript-box-label[b-ucq9bomuhu] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 800;
    color: #0284c7;
    margin-bottom: 4px;
}

.transcript-box-text[b-ucq9bomuhu] {
    margin: 0;
    font-size: 0.95rem;
    color: #0f172a;
    font-style: italic;
    line-height: 1.5;
}

[data-theme="dark"] .transcript-box-text[b-ucq9bomuhu] {
    color: #f8fafc;
}

.transcript-box-empty[b-ucq9bomuhu] {
    margin: 0;
    font-size: 0.85rem;
    color: #b45309;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* User Audio Review */
.user-audio-review[b-ucq9bomuhu] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 16px;
}

[data-theme="dark"] .user-audio-review[b-ucq9bomuhu] {
    background: #111d33;
    border-color: #233554;
}

.audio-review-label[b-ucq9bomuhu] {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: #334155;
    margin-bottom: 6px;
}

.user-audio-element[b-ucq9bomuhu] {
    width: 100%;
    height: 36px;
    outline: none;
}

/* 3-Tier Color-Coded Word Breakdown */
.word-comparison-box[b-ucq9bomuhu] {
    margin-bottom: 20px;
}

.comparison-label[b-ucq9bomuhu] {
    font-size: 0.82rem;
    font-weight: 700;
    color: #475569;
}

.color-legend[b-ucq9bomuhu] {
    display: flex;
    gap: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
}

.legend-item[b-ucq9bomuhu] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.legend-dot[b-ucq9bomuhu] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.dot-correct[b-ucq9bomuhu] { background: #16a34a; }
.dot-partial[b-ucq9bomuhu] { background: #eab308; }
.dot-missed[b-ucq9bomuhu] { background: #dc2626; }

.words-highlighted-grid[b-ucq9bomuhu] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    line-height: 1.8;
}

.word-badge[b-ucq9bomuhu] {
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.88rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: transform 0.15s ease;
}

.word-badge:hover[b-ucq9bomuhu] {
    transform: scale(1.05);
}

.word-correct[b-ucq9bomuhu] {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.word-partial[b-ucq9bomuhu] {
    background: #fefce8;
    color: #a16207;
    border: 1px solid #fef08a;
}

.word-missed[b-ucq9bomuhu] {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

/* Action Buttons */
.result-actions-row[b-ucq9bomuhu] {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    flex-wrap: wrap;
}

.btn-action-retry[b-ucq9bomuhu] {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    color: #334155;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.btn-action-retry:hover[b-ucq9bomuhu] {
    background: #f8fafc;
    border-color: #94a3b8;
}

.btn-action-next[b-ucq9bomuhu] {
    background: #0284c7;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
    box-shadow: 0 3px 10px rgba(2, 132, 199, 0.25);
    margin-left: auto;
}

.btn-action-next:hover[b-ucq9bomuhu] {
    background: #0369a1;
    transform: translateY(-1px);
}

/* ========================================================================= */
/* MOCK INTERVIEW SIMULATION VIEW                                            */
/* ========================================================================= */
.mock-interview-container[b-ucq9bomuhu] {
    max-width: 800px;
    margin: 0 auto;
    animation: fadeIn-b-ucq9bomuhu 0.3s ease;
}

.interview-header-card[b-ucq9bomuhu] {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 18px;
    padding: 20px 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] .interview-header-card[b-ucq9bomuhu] {
    background: #15243f;
    border-color: #233554;
}

.interview-title-row[b-ucq9bomuhu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.interview-badge[b-ucq9bomuhu] {
    background: #f5f3ff;
    color: #6d28d9;
    border: 1px solid #ddd6fe;
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.interview-countdown[b-ucq9bomuhu] {
    font-size: 0.88rem;
    color: #475569;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.interview-countdown.urgent[b-ucq9bomuhu] {
    color: #dc2626;
    animation: pulseUrgent-b-ucq9bomuhu 1s infinite;
}

@keyframes pulseUrgent-b-ucq9bomuhu {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.interview-progress-bar-wrap[b-ucq9bomuhu] {
    width: 100%;
    height: 8px;
    background: #f1f5f9;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
}

.interview-progress-fill[b-ucq9bomuhu] {
    height: 100%;
    background: linear-gradient(90deg, #7c3aed 0%, #a855f7 100%);
    border-radius: 10px;
    transition: width 0.4s ease;
}

.interview-step-text[b-ucq9bomuhu] {
    font-size: 1.15rem;
    color: #0f172a;
    line-height: 1.4;
}

[data-theme="dark"] .interview-step-text[b-ucq9bomuhu] {
    color: #f8fafc;
}

.interview-practice-box[b-ucq9bomuhu] {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 20px;
    padding: 32px 24px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

[data-theme="dark"] .interview-practice-box[b-ucq9bomuhu] {
    background: #15243f;
    border-color: #233554;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.examiner-avatar-box[b-ucq9bomuhu] {
    margin-bottom: 24px;
}

.examiner-icon[b-ucq9bomuhu] {
    font-size: 3rem;
    margin-bottom: 12px;
}

.examiner-avatar-box h3[b-ucq9bomuhu] {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 6px 0;
}

[data-theme="dark"] .examiner-avatar-box h3[b-ucq9bomuhu] {
    color: #f8fafc;
}

.examiner-avatar-box p[b-ucq9bomuhu] {
    font-size: 0.88rem;
    color: #64748b;
    margin: 0;
}

[data-theme="dark"] .examiner-avatar-box p[b-ucq9bomuhu] {
    color: #94a3b8;
}

.interview-record-area[b-ucq9bomuhu] {
    max-width: 480px;
    margin: 0 auto;
}

.recording-live-box[b-ucq9bomuhu] {
    background: #f8fafc;
    border: 2px dashed #7c3aed;
    border-radius: 16px;
    padding: 18px;
}

[data-theme="dark"] .recording-live-box[b-ucq9bomuhu] {
    background: #111d33;
    border-color: #a855f7;
}

.recording-waveform-canvas[b-ucq9bomuhu] {
    width: 100%;
    height: 54px;
    background: #ffffff;
    border-radius: 10px;
    margin-bottom: 12px;
    display: block;
}

[data-theme="dark"] .recording-waveform-canvas[b-ucq9bomuhu] {
    background: #15243f;
}

.live-transcript-mini[b-ucq9bomuhu] {
    text-align: left;
    font-size: 0.85rem;
    background: #ffffff;
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 14px;
}

[data-theme="dark"] .live-transcript-mini[b-ucq9bomuhu] {
    background: #15243f;
    color: #f8fafc;
}

.interview-single-result[b-ucq9bomuhu] {
    background: #f8fafc;
    border-radius: 14px;
    padding: 16px;
    margin-top: 16px;
}

[data-theme="dark"] .interview-single-result[b-ucq9bomuhu] {
    background: #111d33;
}

.score-pill[b-ucq9bomuhu] {
    font-size: 0.88rem;
    font-weight: 700;
    color: #475569;
}

.score-band[b-ucq9bomuhu] {
    background: #0284c7;
    color: #ffffff;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 800;
}

.btn-next-interview[b-ucq9bomuhu] {
    width: 100%;
    background: #7c3aed;
    color: #ffffff;
    border: none;
    padding: 12px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}

.btn-next-interview:hover[b-ucq9bomuhu] {
    background: #6d28d9;
}

.interview-summary-card[b-ucq9bomuhu] {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 24px;
    padding: 40px 24px;
    text-align: center;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .interview-summary-card[b-ucq9bomuhu] {
    background: #15243f;
    border-color: #233554;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

.summary-trophy[b-ucq9bomuhu] {
    font-size: 3.5rem;
    margin-bottom: 12px;
}

.summary-score-box[b-ucq9bomuhu] {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin: 24px 0;
}

.summary-score-item[b-ucq9bomuhu] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 14px 24px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

[data-theme="dark"] .summary-score-item[b-ucq9bomuhu] {
    background: #111d33;
    border-color: #233554;
}

.sum-label[b-ucq9bomuhu] {
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 600;
}

[data-theme="dark"] .sum-label[b-ucq9bomuhu] {
    color: #94a3b8;
}

.sum-val[b-ucq9bomuhu] {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f172a;
    margin-top: 4px;
}

[data-theme="dark"] .sum-val[b-ucq9bomuhu] {
    color: #f8fafc;
}

.sum-val.highlight[b-ucq9bomuhu] {
    color: #0284c7;
}

[data-theme="dark"] .sum-val.highlight[b-ucq9bomuhu] {
    color: #38bdf8;
}

/* ========================================================================= */
/* AUDIO TEST MODAL                                                          */
/* ========================================================================= */
.audio-modal-overlay[b-ucq9bomuhu] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.audio-modal-card[b-ucq9bomuhu] {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 540px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: popModal-b-ucq9bomuhu 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] .audio-modal-card[b-ucq9bomuhu] {
    background: #15243f;
    border: 1.5px solid #233554;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
}

@keyframes popModal-b-ucq9bomuhu {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.audio-modal-header[b-ucq9bomuhu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    border-bottom: 1px solid #f1f5f9;
}

[data-theme="dark"] .audio-modal-header[b-ucq9bomuhu] {
    border-bottom-color: #233554;
}

.audio-modal-title[b-ucq9bomuhu] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.audio-modal-title i[b-ucq9bomuhu] {
    font-size: 1.8rem;
}

.audio-modal-title h3[b-ucq9bomuhu] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
    color: #0f172a;
}

[data-theme="dark"] .audio-modal-title h3[b-ucq9bomuhu] {
    color: #f8fafc;
}

.audio-modal-sub[b-ucq9bomuhu] {
    margin: 2px 0 0;
    font-size: 0.82rem;
    color: #64748b;
}

[data-theme="dark"] .audio-modal-sub[b-ucq9bomuhu] {
    color: #94a3b8;
}

.audio-modal-close[b-ucq9bomuhu] {
    background: transparent;
    border: none;
    font-size: 1.6rem;
    color: #94a3b8;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: all 0.2s;
}

.audio-modal-close:hover[b-ucq9bomuhu] {
    background: #f1f5f9;
    color: #0f172a;
}

[data-theme="dark"] .audio-modal-close:hover[b-ucq9bomuhu] {
    background: #182a4a;
    color: #f8fafc;
}

.audio-modal-body[b-ucq9bomuhu] {
    padding: 20px 24px;
    overflow-y: auto;
}

.test-step-card[b-ucq9bomuhu] {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px;
}

[data-theme="dark"] .test-step-card[b-ucq9bomuhu] {
    background: #111d33;
    border-color: #233554;
}

.step-badge-title[b-ucq9bomuhu] {
    font-size: 0.92rem;
    font-weight: 800;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

[data-theme="dark"] .step-badge-title[b-ucq9bomuhu] {
    color: #f8fafc;
}

.mic-select-row[b-ucq9bomuhu] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.custom-select-device[b-ucq9bomuhu] {
    flex: 1;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    font-size: 0.88rem;
    color: #1e293b;
    outline: none;
    cursor: pointer;
    transition: all 0.2s;
}

[data-theme="dark"] .custom-select-device[b-ucq9bomuhu] {
    background: #15243f;
    border-color: #233554;
    color: #f8fafc;
}

.btn-refresh-devices[b-ucq9bomuhu] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    color: #475569;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

[data-theme="dark"] .btn-refresh-devices[b-ucq9bomuhu] {
    background: #15243f;
    border-color: #233554;
    color: #cbd5e1;
}

.waveform-box[b-ucq9bomuhu] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 12px;
}

[data-theme="dark"] .waveform-box[b-ucq9bomuhu] {
    background: #15243f;
    border-color: #233554;
}

.waveform-header[b-ucq9bomuhu] {
    margin-bottom: 6px;
}

.waveform-status-text[b-ucq9bomuhu] {
    font-size: 0.78rem;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mic-pulse-dot[b-ucq9bomuhu] {
    width: 8px;
    height: 8px;
    background: #16a34a;
    border-radius: 50%;
    animation: pulse-b-ucq9bomuhu 1s infinite;
}

.waveform-canvas[b-ucq9bomuhu] {
    width: 100%;
    height: 50px;
    background: #f8fafc;
    border-radius: 8px;
    display: block;
}

[data-theme="dark"] .waveform-canvas[b-ucq9bomuhu] {
    background: #0b1325;
}

.speaker-test-row[b-ucq9bomuhu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.speaker-info[b-ucq9bomuhu] {
    font-size: 0.82rem;
    color: #64748b;
    line-height: 1.4;
}

[data-theme="dark"] .speaker-info[b-ucq9bomuhu] {
    color: #94a3b8;
}

.btn-test-speaker[b-ucq9bomuhu] {
    background: #f0fdf4;
    color: #166534;
    border: 1.5px solid #bbf7d0;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: all 0.2s;
}

.btn-test-speaker:hover[b-ucq9bomuhu] {
    background: #16a34a;
    color: #ffffff;
    border-color: #16a34a;
}

[data-theme="dark"] .btn-test-speaker[b-ucq9bomuhu] {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

.audio-modal-footer[b-ucq9bomuhu] {
    display: flex;
    justify-content: flex-end;
    padding: 14px 24px;
    background: #f8fafc;
    border-top: 1px solid #f1f5f9;
}

[data-theme="dark"] .audio-modal-footer[b-ucq9bomuhu] {
    background: #111d33;
    border-top-color: #233554;
}

.btn-modal-done[b-ucq9bomuhu] {
    background: #0284c7;
    color: #ffffff;
    border: none;
    padding: 9px 22px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.btn-modal-done:hover[b-ucq9bomuhu] {
    background: #0369a1;
}

/* Loading & Empty */
.loading-state[b-ucq9bomuhu], .empty-state[b-ucq9bomuhu] {
    text-align: center;
    padding: 80px 20px;
    color: #64748b;
}

.custom-spinner[b-ucq9bomuhu] {
    width: 36px;
    height: 36px;
    border: 3px solid #e0f2fe;
    border-top-color: #0284c7;
    border-radius: 50%;
    margin: 0 auto 12px;
    animation: spin-b-ucq9bomuhu 0.8s linear infinite;
}

@keyframes spin-b-ucq9bomuhu { to { transform: rotate(360deg); } }
@keyframes fadeIn-b-ucq9bomuhu { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ========================================================================= */
/* YOUTUBE VIDEO SHADOWING STYLES                                            */
/* ========================================================================= */
.youtube-catalog-section[b-ucq9bomuhu] {
    animation: fadeIn-b-ucq9bomuhu 0.3s ease;
}

.custom-yt-input-card[b-ucq9bomuhu] {
    background: #ffffff;
    border: 1.5px dashed #0284c7;
    border-radius: 16px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 4px 16px rgba(2, 132, 199, 0.04);
}

.input-icon-col[b-ucq9bomuhu] {
    font-size: 2rem;
    color: #0284c7;
}

.input-content-col[b-ucq9bomuhu] {
    flex: 1;
}

.custom-yt-label[b-ucq9bomuhu] {
    display: block;
    font-size: 0.85rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 6px;
}

.input-action-row[b-ucq9bomuhu] {
    display: flex;
    gap: 10px;
}

.custom-yt-input[b-ucq9bomuhu] {
    flex: 1;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 0.88rem;
    outline: none;
    transition: all 0.2s;
}

.custom-yt-input:focus[b-ucq9bomuhu] {
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.btn-load-custom-yt[b-ucq9bomuhu] {
    background: #0284c7;
    color: #ffffff;
    border: none;
    padding: 8px 20px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: all 0.2s;
}

.btn-load-custom-yt:hover[b-ucq9bomuhu] {
    background: #0369a1;
}

/* Grid Video Cards */
.yt-video-grid[b-ucq9bomuhu] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 22px;
}

.yt-video-card[b-ucq9bomuhu] {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 18px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
}

.yt-video-card:hover[b-ucq9bomuhu] {
    transform: translateY(-4px);
    border-color: #ef4444;
    box-shadow: 0 12px 30px rgba(239, 68, 68, 0.12);
}

.yt-thumb-wrap[b-ucq9bomuhu] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #0f172a;
    overflow: hidden;
}

.yt-thumb-img[b-ucq9bomuhu] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.yt-video-card:hover .yt-thumb-img[b-ucq9bomuhu] {
    transform: scale(1.04);
}

.yt-duration-pill[b-ucq9bomuhu] {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(15, 23, 42, 0.85);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    backdrop-filter: blur(4px);
}

.yt-play-overlay[b-ucq9bomuhu] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.2s ease;
    font-size: 3rem;
    color: #ffffff;
}

.yt-video-card:hover .yt-play-overlay[b-ucq9bomuhu] {
    opacity: 1;
}

.yt-card-body[b-ucq9bomuhu] {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.yt-badge-row[b-ucq9bomuhu] {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}

.yt-level-badge[b-ucq9bomuhu] {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 800;
}

.yt-category-badge[b-ucq9bomuhu] {
    background: #f1f5f9;
    color: #475569;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
}

.yt-card-title[b-ucq9bomuhu] {
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 6px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.yt-channel-name[b-ucq9bomuhu] {
    font-size: 0.8rem;
    color: #64748b;
    margin: 0 0 14px 0;
}

.yt-card-footer[b-ucq9bomuhu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
}

.yt-word-count[b-ucq9bomuhu] {
    font-size: 0.78rem;
    color: #94a3b8;
    font-weight: 600;
}

.btn-shadow-now[b-ucq9bomuhu] {
    font-size: 0.82rem;
    font-weight: 800;
    color: #dc2626;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ========================================================================= */
/* ENGNOVATE-INSPIRED YOUTUBE SHADOWING STUDIO STYLES                        */
/* ========================================================================= */
.engnovate-shadowing-container[b-ucq9bomuhu] {
    animation: fadeIn-b-ucq9bomuhu 0.3s ease;
}

.engnovate-header-bar[b-ucq9bomuhu] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 14px 20px;
    margin-bottom: 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.btn-engnovate-back[b-ucq9bomuhu] {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    color: #475569;
    padding: 7px 14px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.btn-engnovate-back:hover[b-ucq9bomuhu] {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #94a3b8;
}

.engnovate-meta-info[b-ucq9bomuhu] {
    flex: 1;
    min-width: 250px;
}

.mode-badge[b-ucq9bomuhu] {
    display: inline-block;
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 6px;
    margin-bottom: 4px;
}

.exercise-video-title[b-ucq9bomuhu] {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 520px;
}

[data-theme="dark"] .exercise-video-title[b-ucq9bomuhu] {
    color: #f8fafc;
}

.engnovate-speed-bar[b-ucq9bomuhu] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.speed-title[b-ucq9bomuhu] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #64748b;
}

[data-theme="dark"] .speed-title[b-ucq9bomuhu] {
    color: #94a3b8;
}

.speed-chip[b-ucq9bomuhu] {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s;
}

[data-theme="dark"] .speed-chip[b-ucq9bomuhu] {
    background: #111d33;
    border-color: #233554;
    color: #cbd5e1;
}

[data-theme="dark"] .speed-chip:hover[b-ucq9bomuhu] {
    background: #182a4a;
    border-color: #38bdf8;
    color: #f8fafc;
}

.speed-chip.active[b-ucq9bomuhu] {
    background: #0284c7;
    color: #ffffff;
    border-color: #0284c7;
}

[data-theme="dark"] .speed-chip.active[b-ucq9bomuhu] {
    background: #0284c7;
    color: #ffffff;
    border-color: #38bdf8;
}

/* Main Grid */
.engnovate-main-grid[b-ucq9bomuhu] {
    display: grid;
    grid-template-columns: 1.05fr 1.15fr;
    gap: 22px;
    align-items: start;
}

/* Video Column */
.engnovate-video-card[b-ucq9bomuhu] {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
    margin-bottom: 18px;
}

[data-theme="dark"] .engnovate-video-card[b-ucq9bomuhu] {
    background: #15243f;
    border-color: #233554;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.yt-player-box[b-ucq9bomuhu] {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #0f172a;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 14px;
}

.unit-progress-bar-wrap[b-ucq9bomuhu] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.unit-progress-text[b-ucq9bomuhu] {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    color: #475569;
}

[data-theme="dark"] .unit-progress-text[b-ucq9bomuhu] {
    color: #94a3b8;
}

.completed-count-badge[b-ucq9bomuhu] {
    color: #16a34a;
    font-weight: 700;
}

.unit-progress-track[b-ucq9bomuhu] {
    width: 100%;
    height: 7px;
    background: #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}

[data-theme="dark"] .unit-progress-track[b-ucq9bomuhu] {
    background: #1e293b;
}

.unit-progress-fill[b-ucq9bomuhu] {
    height: 100%;
    background: linear-gradient(90deg, #0284c7, #10b981);
    border-radius: 10px;
    transition: width 0.3s ease;
}

/* Full Transcript Wrapper (Engnovate style) */
.engnovate-transcript-wrapper[b-ucq9bomuhu] {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

[data-theme="dark"] .engnovate-transcript-wrapper[b-ucq9bomuhu] {
    background: #15243f;
    border-color: #233554;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.transcript-toggle-bar[b-ucq9bomuhu] {
    padding: 14px 18px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.88rem;
    color: #1e293b;
    user-select: none;
}

[data-theme="dark"] .transcript-toggle-bar[b-ucq9bomuhu] {
    background: #111d33;
    border-color: #233554;
    color: #f8fafc;
}

.transcript-lines-list[b-ucq9bomuhu] {
    max-height: 280px;
    overflow-y: auto;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.transcript-line[b-ucq9bomuhu] {
    padding: 8px 12px;
    border-radius: 10px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 0.83rem;
    border: 1px solid transparent;
    transition: all 0.15s;
}

.transcript-line:hover[b-ucq9bomuhu] {
    background: #f0f9ff;
    border-color: #bae6fd;
}

[data-theme="dark"] .transcript-line:hover[b-ucq9bomuhu] {
    background: rgba(14, 165, 233, 0.12);
    border-color: rgba(56, 189, 248, 0.3);
}

.transcript-line.active-line[b-ucq9bomuhu] {
    background: #e0f2fe;
    border-color: #0284c7;
    font-weight: 700;
}

[data-theme="dark"] .transcript-line.active-line[b-ucq9bomuhu] {
    background: rgba(2, 132, 199, 0.25);
    border-color: #38bdf8;
}

.transcript-line.completed-line[b-ucq9bomuhu] {
    border-left: 3px solid #16a34a;
}

.line-speaker[b-ucq9bomuhu] {
    font-weight: 800;
    color: #64748b;
    font-size: 0.78rem;
}

[data-theme="dark"] .line-speaker[b-ucq9bomuhu] {
    color: #94a3b8;
}

.line-content[b-ucq9bomuhu] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.line-text[b-ucq9bomuhu] {
    color: #0f172a;
    line-height: 1.35;
}

[data-theme="dark"] .line-text[b-ucq9bomuhu] {
    color: #cbd5e1;
}

[data-theme="dark"] .transcript-line.active-line .line-text[b-ucq9bomuhu] {
    color: #ffffff;
    font-weight: 700;
}

.line-trans[b-ucq9bomuhu] {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: normal;
}

[data-theme="dark"] .line-trans[b-ucq9bomuhu] {
    color: #94a3b8;
}

.line-time[b-ucq9bomuhu] {
    font-size: 0.72rem;
    color: #94a3b8;
    white-space: nowrap;
}

[data-theme="dark"] .line-time[b-ucq9bomuhu] {
    color: #64748b;
}

/* Shadowing Card Wrapper (Right Column) */
.dictation-card-wrapper[b-ucq9bomuhu] {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 20px;
    padding: 22px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

[data-theme="dark"] .dictation-card-wrapper[b-ucq9bomuhu] {
    background: #15243f;
    border-color: #233554;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.dictation-unit-counter-row[b-ucq9bomuhu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.unit-counter-pill[b-ucq9bomuhu] {
    background: #f1f5f9;
    color: #0f172a;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 4px 12px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

[data-theme="dark"] .unit-counter-pill[b-ucq9bomuhu] {
    background: #111d33;
    color: #f8fafc;
    border: 1px solid #233554;
}

.segment-timing-pill[b-ucq9bomuhu] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 8px;
}

[data-theme="dark"] .segment-timing-pill[b-ucq9bomuhu] {
    background: #111d33;
    border-color: #233554;
    color: #94a3b8;
}

/* Dictation Unit Wrapper (Target Caption) */
.dictation-unit-wrapper[b-ucq9bomuhu] {
    background: #f0fdf4;
    border: 1.5px solid #bbf7d0;
    border-radius: 16px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

[data-theme="dark"] .dictation-unit-wrapper[b-ucq9bomuhu] {
    background: rgba(16, 185, 129, 0.08);
    border: 1.5px solid rgba(16, 185, 129, 0.25);
}

.dictation-unit-caption[b-ucq9bomuhu] {
    font-size: 1.32rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.5;
    letter-spacing: -0.01em;
}

[data-theme="dark"] .dictation-unit-caption[b-ucq9bomuhu] {
    color: #f8fafc;
}

.caption-word[b-ucq9bomuhu] {
    display: inline-block;
    padding: 2px 5px;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.caption-word.karaoke-active[b-ucq9bomuhu] {
    background: #22c55e;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.4);
    transform: translateY(-2px) scale(1.08);
    animation: karaoke-pop-b-ucq9bomuhu 0.18s ease;
}

@keyframes karaoke-pop-b-ucq9bomuhu {
    0% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-3px) scale(1.12); }
    100% { transform: translateY(-2px) scale(1.08); }
}

.translated-caption-box[b-ucq9bomuhu] {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.88rem;
    color: #1e40af;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.45;
    animation: fadeIn-b-ucq9bomuhu 0.2s ease;
}

[data-theme="dark"] .translated-caption-box[b-ucq9bomuhu] {
    background: rgba(14, 165, 233, 0.12);
    border-color: rgba(56, 189, 248, 0.3);
    color: #7dd3fc;
}

.caption-action-bar[b-ucq9bomuhu] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px dashed #bbf7d0;
    padding-top: 10px;
}

[data-theme="dark"] .caption-action-bar[b-ucq9bomuhu] {
    border-top-color: rgba(16, 185, 129, 0.2);
}

.btn-translate-caption[b-ucq9bomuhu], .btn-play-caption-tts[b-ucq9bomuhu] {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #334155;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
}

.btn-translate-caption:hover[b-ucq9bomuhu], .btn-play-caption-tts:hover[b-ucq9bomuhu] {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #0f172a;
}

[data-theme="dark"] .btn-translate-caption[b-ucq9bomuhu],
[data-theme="dark"] .btn-play-caption-tts[b-ucq9bomuhu] {
    background: #111d33;
    border-color: #233554;
    color: #cbd5e1;
}

[data-theme="dark"] .btn-translate-caption:hover[b-ucq9bomuhu],
[data-theme="dark"] .btn-play-caption-tts:hover[b-ucq9bomuhu] {
    background: #182a4a;
    border-color: #38bdf8;
    color: #f8fafc;
}

/* User Speech Card & Big Mic */
.user-speech-card[b-ucq9bomuhu] {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

[data-theme="dark"] .user-speech-card[b-ucq9bomuhu] {
    background: #111d33;
    border-color: #233554;
}

.speech-box-label[b-ucq9bomuhu] {
    font-size: 0.82rem;
    font-weight: 700;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

[data-theme="dark"] .speech-box-label[b-ucq9bomuhu] {
    color: #cbd5e1;
}

.speech-display-box[b-ucq9bomuhu] {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    padding: 14px;
    min-height: 75px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all 0.2s;
}

[data-theme="dark"] .speech-display-box[b-ucq9bomuhu] {
    background: #15243f;
    border-color: #233554;
}

.speech-display-box.is-recording[b-ucq9bomuhu] {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.speech-live-waveform[b-ucq9bomuhu] {
    width: 100%;
    height: 44px;
    border-radius: 8px;
    background: #ffffff;
    display: block;
    margin-bottom: 6px;
}

[data-theme="dark"] .speech-live-waveform[b-ucq9bomuhu] {
    background: #15243f;
}

.speech-live-text[b-ucq9bomuhu] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #dc2626;
    line-height: 1.4;
}

.speech-placeholder[b-ucq9bomuhu] {
    color: #94a3b8;
    font-size: 0.88rem;
    font-style: italic;
    text-align: center;
}

[data-theme="dark"] .speech-placeholder[b-ucq9bomuhu] {
    color: #64748b;
}

.speech-evaluating-placeholder[b-ucq9bomuhu] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #0284c7;
    font-size: 0.88rem;
    font-weight: 700;
}

[data-theme="dark"] .speech-evaluating-placeholder[b-ucq9bomuhu] {
    color: #38bdf8;
}

.speech-result-text[b-ucq9bomuhu] {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.45;
}

[data-theme="dark"] .speech-result-text[b-ucq9bomuhu] {
    color: #f8fafc;
}

/* Big Circular Microphone Button (Engnovate Style) */
.record-button-center-wrapper[b-ucq9bomuhu] {
    display: flex;
    justify-content: center;
    padding-top: 4px;
}

.big-engnovate-mic-btn[b-ucq9bomuhu] {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    outline: none;
}

.mic-inner-circle[b-ucq9bomuhu] {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0284c7, #0369a1);
    color: #ffffff;
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.35);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.big-engnovate-mic-btn:hover .mic-inner-circle[b-ucq9bomuhu] {
    transform: scale(1.08);
    box-shadow: 0 10px 26px rgba(2, 132, 199, 0.45);
}

.big-engnovate-mic-btn.recording-active .mic-inner-circle[b-ucq9bomuhu] {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 6px 22px rgba(239, 68, 68, 0.45);
    animation: pulseRing-b-ucq9bomuhu 1.2s infinite;
}

.mic-btn-label[b-ucq9bomuhu] {
    font-size: 0.82rem;
    font-weight: 800;
    color: #334155;
}

[data-theme="dark"] .mic-btn-label[b-ucq9bomuhu] {
    color: #f8fafc;
}

@keyframes pulseRing-b-ucq9bomuhu {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 14px rgba(239, 68, 68, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* Result Box & Word Diff */
.engnovate-result-box[b-ucq9bomuhu] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: fadeIn-b-ucq9bomuhu 0.25s ease;
}

.result-score-banner[b-ucq9bomuhu] {
    border-radius: 14px;
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1.5px solid transparent;
}

.result-score-banner.score-excellent[b-ucq9bomuhu] {
    background: #f0fdf4;
    border-color: #86efac;
    color: #166534;
}

.result-score-banner.score-good[b-ucq9bomuhu] {
    background: #fefce8;
    border-color: #fde047;
    color: #854d0e;
}

.result-score-banner.score-needs-work[b-ucq9bomuhu] {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #991b1b;
}

.score-main[b-ucq9bomuhu] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.score-digit[b-ucq9bomuhu] {
    font-size: 1.8rem;
    font-weight: 900;
}

.score-lbl[b-ucq9bomuhu] {
    font-size: 0.85rem;
    font-weight: 700;
}

.score-sub[b-ucq9bomuhu] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    font-size: 0.8rem;
}

.user-audio-review-bar[b-ucq9bomuhu] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

[data-theme="dark"] .user-audio-review-bar[b-ucq9bomuhu] {
    background: #111d33;
    border-color: #233554;
}

.audio-lbl[b-ucq9bomuhu] {
    font-size: 0.78rem;
    font-weight: 700;
    color: #475569;
    white-space: nowrap;
}

[data-theme="dark"] .audio-lbl[b-ucq9bomuhu] {
    color: #cbd5e1;
}

.engnovate-audio-player[b-ucq9bomuhu] {
    flex: 1;
    height: 32px;
}

/* Word Diff Highlight */
.dictation-diff-box[b-ucq9bomuhu] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px;
}

[data-theme="dark"] .dictation-diff-box[b-ucq9bomuhu] {
    background: #111d33;
    border-color: #233554;
}

.diff-header[b-ucq9bomuhu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: #475569;
    margin-bottom: 10px;
}

[data-theme="dark"] .diff-header[b-ucq9bomuhu] {
    color: #f8fafc;
}

.diff-legend[b-ucq9bomuhu] {
    display: flex;
    gap: 8px;
}

.legend-chip[b-ucq9bomuhu] {
    font-size: 0.72rem;
    font-weight: 700;
}

.diff-words-flow[b-ucq9bomuhu] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.diff-word-badge[b-ucq9bomuhu] {
    padding: 4px 9px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 700;
}

.diff-word-badge.word-correct[b-ucq9bomuhu] {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}

[data-theme="dark"] .diff-word-badge.word-correct[b-ucq9bomuhu] {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border-color: rgba(74, 222, 128, 0.3);
}

.diff-word-badge.word-partial[b-ucq9bomuhu] {
    background: #fef9c3;
    color: #854d0e;
    border: 1px solid #fde047;
}

[data-theme="dark"] .diff-word-badge.word-partial[b-ucq9bomuhu] {
    background: rgba(234, 179, 8, 0.15);
    color: #fde047;
    border-color: rgba(234, 179, 8, 0.3);
}

.diff-word-badge.word-missed[b-ucq9bomuhu] {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
    text-decoration: line-through;
}

[data-theme="dark"] .diff-word-badge.word-missed[b-ucq9bomuhu] {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.3);
}

/* Engnovate Control Buttons Bar */
.engnovate-control-buttons-bar[b-ucq9bomuhu] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 6px;
    border-top: 1px solid #f1f5f9;
}

[data-theme="dark"] .engnovate-control-buttons-bar[b-ucq9bomuhu] {
    border-top-color: #233554;
}

.engnovate-ctrl-btn[b-ucq9bomuhu] {
    background: #f8fafc;
    border: 1.5px solid #cbd5e1;
    color: #334155;
    padding: 9px 18px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.engnovate-ctrl-btn:hover:not(:disabled)[b-ucq9bomuhu] {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #0f172a;
}

[data-theme="dark"] .engnovate-ctrl-btn[b-ucq9bomuhu] {
    background: #111d33;
    border-color: #233554;
    color: #cbd5e1;
}

[data-theme="dark"] .engnovate-ctrl-btn:hover:not(:disabled)[b-ucq9bomuhu] {
    background: #182a4a;
    border-color: #38bdf8;
    color: #f8fafc;
}

.engnovate-ctrl-btn:disabled[b-ucq9bomuhu] {
    opacity: 0.45;
    cursor: not-allowed;
}

.engnovate-ctrl-btn.btn-loop.active[b-ucq9bomuhu] {
    background: #7c3aed;
    color: #ffffff;
    border-color: #7c3aed;
}

.engnovate-ctrl-btn.btn-next[b-ucq9bomuhu] {
    background: linear-gradient(135deg, #0284c7, #0369a1);
    color: #ffffff;
    border-color: #0284c7;
}

.engnovate-ctrl-btn.btn-next:hover:not(:disabled)[b-ucq9bomuhu] {
    background: linear-gradient(135deg, #0369a1, #075985);
}

.auto-margin-left[b-ucq9bomuhu] {
    margin-left: auto;
}

/* ========================================================================= */
/* AUDIO SHADOWING CATALOG & LESSON CARDS STYLES                             */
/* ========================================================================= */
.audio-catalog-section[b-ucq9bomuhu] {
    animation: fadeIn-b-ucq9bomuhu 0.3s ease;
}

.audio-lesson-grid[b-ucq9bomuhu] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 24px;
}

.audio-lesson-card[b-ucq9bomuhu] {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 20px;
    padding: 22px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}

.audio-lesson-card:hover[b-ucq9bomuhu] {
    transform: translateY(-4px);
    border-color: #0284c7;
    box-shadow: 0 12px 28px rgba(2, 132, 199, 0.12);
}

[data-theme="dark"] .audio-lesson-card[b-ucq9bomuhu] {
    background: #15243f;
    border: 1.5px solid #233554;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .audio-lesson-card:hover[b-ucq9bomuhu] {
    background: #182a4a;
    border-color: rgba(56, 189, 248, 0.45);
    box-shadow: 0 12px 30px rgba(2, 132, 199, 0.25), 0 0 16px rgba(56, 189, 248, 0.15);
}

.audio-card-top[b-ucq9bomuhu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.audio-icon-wrap[b-ucq9bomuhu] {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

[data-theme="dark"] .audio-icon-wrap[b-ucq9bomuhu] {
    background: rgba(14, 165, 233, 0.15);
    border-color: rgba(56, 189, 248, 0.3);
}

.audio-level-badge[b-ucq9bomuhu] {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
}

[data-theme="dark"] .audio-level-badge[b-ucq9bomuhu] {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border-color: rgba(74, 222, 128, 0.3);
}

.audio-category-tag[b-ucq9bomuhu] {
    font-size: 0.75rem;
    font-weight: 700;
    color: #0284c7;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: block;
    margin-bottom: 6px;
}

[data-theme="dark"] .audio-category-tag[b-ucq9bomuhu] {
    color: #38bdf8;
}

.audio-card-title[b-ucq9bomuhu] {
    font-size: 1.12rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 8px 0;
    line-height: 1.4;
    letter-spacing: -0.01em;
}

[data-theme="dark"] .audio-card-title[b-ucq9bomuhu] {
    color: #f8fafc;
}

.audio-card-desc[b-ucq9bomuhu] {
    font-size: 0.86rem;
    color: #64748b;
    line-height: 1.55;
    margin: 0 0 18px 0;
    flex: 1;
}

[data-theme="dark"] .audio-card-desc[b-ucq9bomuhu] {
    color: #94a3b8;
}

.audio-card-footer[b-ucq9bomuhu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #f1f5f9;
    padding-top: 14px;
}

[data-theme="dark"] .audio-card-footer[b-ucq9bomuhu] {
    border-top: 1px solid #233554;
}

.audio-unit-count[b-ucq9bomuhu] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

[data-theme="dark"] .audio-unit-count[b-ucq9bomuhu] {
    color: #94a3b8;
}

.btn-start-audio-shadow[b-ucq9bomuhu] {
    font-size: 0.84rem;
    font-weight: 700;
    color: #0284c7;
    transition: all 0.15s;
}

[data-theme="dark"] .btn-start-audio-shadow[b-ucq9bomuhu] {
    color: #38bdf8;
}

.audio-lesson-card:hover .btn-start-audio-shadow[b-ucq9bomuhu] {
    color: #0369a1;
    transform: translateX(3px);
}

[data-theme="dark"] .audio-lesson-card:hover .btn-start-audio-shadow[b-ucq9bomuhu] {
    color: #7dd3fc;
}

.engnovate-audio-player-box[b-ucq9bomuhu] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px;
}

[data-theme="dark"] .engnovate-audio-player-box[b-ucq9bomuhu] {
    background: #111d33;
    border-color: #233554;
}

.audio-player-label[b-ucq9bomuhu] {
    display: block;
    font-size: 0.8rem;
    font-weight: 800;
    color: #475569;
    margin-bottom: 8px;
}

[data-theme="dark"] .audio-player-label[b-ucq9bomuhu] {
    color: #cbd5e1;
}

.caption-speaker-badge[b-ucq9bomuhu] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #e0f2fe;
    color: #0369a1;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 6px;
    align-self: flex-start;
}

[data-theme="dark"] .caption-speaker-badge[b-ucq9bomuhu] {
    background: rgba(14, 165, 233, 0.2);
    color: #38bdf8;
}

.line-speaker-tag[b-ucq9bomuhu] {
    font-size: 0.72rem;
    font-weight: 800;
    color: #0284c7;
    display: block;
    margin-bottom: 2px;
}

[data-theme="dark"] .line-speaker-tag[b-ucq9bomuhu] {
    color: #38bdf8;
}

/* ========================================================================= */
/* COMING SOON / LOCKED NOTICE STYLES                                       */
/* ========================================================================= */
.coming-soon-card-container[b-ucq9bomuhu] {
    padding: 30px 10px;
    display: flex;
    justify-content: center;
    animation: fadeIn-b-ucq9bomuhu 0.3s ease;
}

.coming-soon-card[b-ucq9bomuhu] {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 24px;
    padding: 42px 36px;
    max-width: 650px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

[data-theme="dark"] .coming-soon-card[b-ucq9bomuhu] {
    background: #15243f;
    border-color: #233554;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.coming-soon-badge[b-ucq9bomuhu] {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fca5a5;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

[data-theme="dark"] .coming-soon-badge[b-ucq9bomuhu] {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #f87171;
}

.coming-soon-icon-wrap[b-ucq9bomuhu] {
    width: 80px;
    height: 80px;
    border-radius: 24px;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border: 1px solid #bfdbfe;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.8rem;
    box-shadow: 0 8px 20px rgba(2, 132, 199, 0.15);
}

[data-theme="dark"] .coming-soon-icon-wrap[b-ucq9bomuhu] {
    background: rgba(14, 165, 233, 0.15);
    border-color: rgba(56, 189, 248, 0.3);
}

.coming-soon-title[b-ucq9bomuhu] {
    font-size: 1.45rem;
    font-weight: 900;
    color: #0f172a;
    margin: 0;
}

[data-theme="dark"] .coming-soon-title[b-ucq9bomuhu] {
    color: #f8fafc;
}

.coming-soon-desc[b-ucq9bomuhu] {
    font-size: 0.92rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

[data-theme="dark"] .coming-soon-desc[b-ucq9bomuhu] {
    color: #94a3b8;
}

.coming-soon-recommendation[b-ucq9bomuhu] {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    padding: 12px 18px;
    font-size: 0.86rem;
    color: #166534;
    line-height: 1.5;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
}

[data-theme="dark"] .coming-soon-recommendation[b-ucq9bomuhu] {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.25);
    color: #86efac;
}

.btn-switch-to-audio[b-ucq9bomuhu] {
    background: linear-gradient(135deg, #0284c7, #0369a1);
    color: #ffffff;
    border: none;
    padding: 12px 24px;
    border-radius: 14px;
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.3);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-switch-to-audio:hover[b-ucq9bomuhu] {
    background: linear-gradient(135deg, #0369a1, #075985);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(2, 132, 199, 0.4);
}

/* Responsive */
@media (max-width: 992px) {
    .engnovate-main-grid[b-ucq9bomuhu] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Ielts/IeltsSpeaking.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════
   IeltsSpeaking.razor.css — All vars replaced with literals
   (Blazor scoped CSS không inherit :root vars từ global)
   ══════════════════════════════════════════════════════ */

/* ══ SETUP SCREEN ══════════════════════════════════════ */
.sp-setup-overlay[b-3vbq8tjeit] {
    min-height: 100vh;
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4c1d95 100%);
    display: flex; align-items: center; justify-content: center;
    padding: 24px; box-sizing: border-box;
}
.sp-setup-card[b-3vbq8tjeit] {
    background: #ffffff; border-radius: 20px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.35);
    padding: 48px; max-width: 660px; width: 100%;
    display: flex; flex-direction: column; gap: 28px;
    align-items: center; text-align: center;
}
.sp-setup-logo[b-3vbq8tjeit] { font-size: 4rem; line-height: 1; }
.sp-setup-title[b-3vbq8tjeit] { font-size: 1.8rem; font-weight: 800; color: #1e1b4b; margin: 0; }
.sp-setup-subtitle[b-3vbq8tjeit] { color: #6b7280; font-size: 1rem; margin: 0; line-height: 1.5; }

.sp-setup-step[b-3vbq8tjeit] {
    width: 100%; background: #f9fafb; border: 2px solid #e5e7eb;
    border-radius: 14px; padding: 20px 24px;
    display: flex; gap: 16px; text-align: left;
    transition: border-color 0.3s, background 0.3s;
    box-sizing: border-box;
}
.sp-setup-step.step-ok[b-3vbq8tjeit]  { border-color: #86efac; background: #f0fdf4; }
.sp-setup-step.step-error[b-3vbq8tjeit] { border-color: #fca5a5; background: #fef2f2; }
.sp-step-icon[b-3vbq8tjeit] { font-size: 2rem; flex-shrink: 0; padding-top: 4px; }
.sp-step-content[b-3vbq8tjeit] { flex: 1; min-width: 0; }
.sp-step-content h3[b-3vbq8tjeit] { font-size: 1rem; font-weight: 700; color: #1a1a2e; margin: 0 0 8px; }
.sp-step-content p[b-3vbq8tjeit]  { font-size: 0.9rem; color: #555555; margin: 0 0 12px; }
.sp-error-msg[b-3vbq8tjeit] { color: #dc2626 !important; }

.sp-waveform[b-3vbq8tjeit] {
    display: block; width: 100%; height: 72px;
    background: #111827; border-radius: 10px; margin: 12px 0;
    border: 1px solid #374151;
}
.sp-waveform-hint[b-3vbq8tjeit] {
    font-size: 0.78rem; color: #9ca3af; text-align: center;
    margin: -4px 0 8px;
}
.sp-playback[b-3vbq8tjeit] { width: 100%; margin: 8px 0; border-radius: 6px; }
.sp-step-actions[b-3vbq8tjeit] { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }

/* Buttons — all hardcoded colors */
.sp-btn-primary[b-3vbq8tjeit] {
    background: #e83e8c; color: #ffffff; border: none;
    padding: 10px 24px; border-radius: 8px; font-weight: 700;
    font-size: 0.9rem; cursor: pointer; transition: opacity 0.2s;
    display: inline-flex; align-items: center; gap: 6px;
}
.sp-btn-primary:hover[b-3vbq8tjeit] { opacity: 0.85; }
.sp-btn-secondary[b-3vbq8tjeit] {
    background: #ffffff; color: #374151; border: 1.5px solid #d1d5db;
    padding: 10px 20px; border-radius: 8px; font-weight: 600;
    font-size: 0.9rem; cursor: pointer; transition: all 0.2s;
    display: inline-flex; align-items: center; gap: 6px;
}
.sp-btn-secondary:hover[b-3vbq8tjeit] { border-color: #e83e8c; color: #e83e8c; }
.sp-btn-ok[b-3vbq8tjeit] {
    background: #16a34a; color: #ffffff; border: none;
    padding: 10px 20px; border-radius: 8px; font-weight: 700;
    font-size: 0.9rem; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
}
.sp-btn-start[b-3vbq8tjeit] {
    background: linear-gradient(135deg, #e83e8c 0%, #6610f2 100%);
    color: #ffffff; border: none; padding: 18px 40px;
    border-radius: 50px; font-weight: 800; font-size: 1.1rem;
    cursor: pointer; width: 100%;
    box-shadow: 0 8px 24px rgba(232,62,140,0.45);
    transition: all 0.25s; letter-spacing: 0.02em;
}
.sp-btn-start:hover[b-3vbq8tjeit] { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(232,62,140,0.55); }

/* Mic-check status badge */
.sp-mic-status[b-3vbq8tjeit] {
    display: flex; align-items: center; gap: 10px;
    background: #f0fdf4; border: 1px solid #86efac;
    border-radius: 8px; padding: 10px 14px; margin-bottom: 4px;
}
.sp-mic-dot[b-3vbq8tjeit] {
    width: 10px; height: 10px; border-radius: 50%;
    background: #22c55e; flex-shrink: 0;
    animation: sp-pulse-b-3vbq8tjeit 1.5s infinite;
}
@keyframes sp-pulse-b-3vbq8tjeit { 0%,100% { transform: scale(1); opacity:1; } 50% { transform: scale(1.4); opacity:0.7; } }
.sp-mic-status span[b-3vbq8tjeit] { font-size: 0.85rem; color: #15803d; font-weight: 600; }
.sp-mic-device-picker[b-3vbq8tjeit] { margin: 12px 0; }
.sp-mic-device-picker label[b-3vbq8tjeit] { display: block; font-size: 0.82rem; font-weight: 700; color: #374151; margin-bottom: 6px; }
.sp-mic-device-actions[b-3vbq8tjeit] { display: flex; gap: 8px; align-items: center; }
.sp-mic-device-actions select[b-3vbq8tjeit] { flex: 1; min-width: 0; padding: 9px 10px; border: 1.5px solid #d1d5db; border-radius: 8px; color: #1f2937; background: #ffffff; }
.sp-mic-device-hint[b-3vbq8tjeit] { margin: 6px 0 0 !important; font-size: 0.75rem !important; color: #6b7280 !important; }

/* Speaker test pill */
.sp-speaker-test[b-3vbq8tjeit] {
    display: flex; align-items: center; gap: 12px;
    background: #eff6ff; border: 1.5px solid #bfdbfe;
    border-radius: 10px; padding: 12px 16px; width: 100%;
    box-sizing: border-box;
}
.sp-speaker-icon[b-3vbq8tjeit] { font-size: 1.6rem; }
.sp-speaker-info[b-3vbq8tjeit] { flex: 1; }
.sp-speaker-info p[b-3vbq8tjeit] { margin: 0; font-size: 0.88rem; color: #1e40af; }

/* ══ EXAM — TOPBAR ══════════════════════════════════════ */
.sp-topbar[b-3vbq8tjeit] {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; height: 52px;
    background: #1e1b4b;
    padding: 0 24px; gap: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.sp-exam-title[b-3vbq8tjeit] { flex: 1; color: #ffffff; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.04em; }
.sp-session-time[b-3vbq8tjeit] { color: #fef3c7; font-size: 0.82rem; font-weight: 700; white-space: nowrap; }
.sp-timer[b-3vbq8tjeit] {
    flex: 0 0 auto; background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 20px; padding: 6px 18px;
    color: #ffffff; font-weight: 700; font-size: 0.9rem;
}
.sp-timer.sp-timer-warn[b-3vbq8tjeit] { background: rgba(220,38,38,0.4); border-color: #f87171; color: #fecaca; }
.sp-topbar-actions[b-3vbq8tjeit] { flex: 1; display: flex; justify-content: flex-end; gap: 10px; }
.sp-btn-next-part[b-3vbq8tjeit] {
    background: #e83e8c; color: #ffffff; border: none;
    padding: 8px 18px; border-radius: 6px; font-weight: 700;
    font-size: 0.88rem; cursor: pointer;
}
.sp-btn-next-part:hover[b-3vbq8tjeit] { opacity: 0.85; }
.sp-btn-finish[b-3vbq8tjeit] {
    background: #16a34a; color: #ffffff; border: none;
    padding: 8px 18px; border-radius: 6px; font-weight: 700;
    font-size: 0.88rem; cursor: pointer;
}

/* ══ PART TABS ══════════════════════════════════════════ */
.sp-part-tabs[b-3vbq8tjeit] {
    display: flex; align-items: center; height: 48px;
    background: #312e81; padding: 0 24px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    position: relative; overflow: hidden;
}
.sp-part-tab[b-3vbq8tjeit] {
    display: flex; flex-direction: column; align-items: center;
    padding: 6px 24px; cursor: default;
    color: rgba(255,255,255,0.5); border-bottom: 2px solid transparent;
    gap: 2px; transition: all 0.2s;
}
.sp-part-tab.active[b-3vbq8tjeit] { color: #ffffff; border-bottom-color: #e83e8c; }
.sp-part-tab.done[b-3vbq8tjeit] { color: #a5b4fc; }
.sp-tab-num[b-3vbq8tjeit] { font-size: 0.82rem; font-weight: 700; }
.sp-tab-cap[b-3vbq8tjeit] { font-size: 0.68rem; opacity: 0.7; }
.sp-progress-bar[b-3vbq8tjeit] { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: rgba(255,255,255,0.1); }
.sp-progress-fill[b-3vbq8tjeit] { height: 100%; background: #e83e8c; transition: width 0.5s; }

/* ══ BODY ════════════════════════════════════════════════ */
.sp-body[b-3vbq8tjeit] {
    height: calc(100vh - 52px - 48px);
    overflow-y: auto; background: #f0f0f8;
}

/* ══ THINK TIME ══════════════════════════════════════════ */
.sp-think-wrap[b-3vbq8tjeit] { display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.sp-think-card[b-3vbq8tjeit] {
    background: #ffffff; border-radius: 16px;
    box-shadow: 0 8px 32px rgba(102,16,242,0.12);
    padding: 40px 48px; max-width: 760px; width: 100%;
    display: flex; flex-direction: column; gap: 20px; align-items: center; text-align: center;
}
.sp-think-top h2[b-3vbq8tjeit] { color: #1e1b4b; font-size: 1.4rem; margin: 8px 0; }
.sp-think-top p[b-3vbq8tjeit]  { color: #6b7280; margin: 0; }
.sp-think-emoji[b-3vbq8tjeit]  { font-size: 3rem; }
.sp-think-timer[b-3vbq8tjeit]  { font-size: 3rem; font-weight: 800; color: #e83e8c; font-variant-numeric: tabular-nums; }
.sp-cue-card[b-3vbq8tjeit] {
    background: #faf5ff; border: 2px solid #d8b4fe;
    border-radius: 12px; padding: 24px 28px;
    text-align: left; width: 100%; box-sizing: border-box;
}
.sp-cue-card h5[b-3vbq8tjeit] { color: #5b21b6; margin: 0 0 12px; }
.sp-cue-card p[b-3vbq8tjeit]  { color: #374151; margin: 6px 0; font-size: 0.95rem; }
.sp-cue-card ul[b-3vbq8tjeit] { padding-left: 20px; color: #374151; }
.sp-cue-card li[b-3vbq8tjeit] { margin-bottom: 4px; font-size: 0.95rem; }
.sp-btn-ready[b-3vbq8tjeit] {
    background: #e83e8c; color: #ffffff; border: none;
    padding: 12px 32px; border-radius: 30px; font-weight: 700; cursor: pointer;
    transition: opacity 0.2s;
}
.sp-btn-ready:hover[b-3vbq8tjeit] { opacity: 0.85; }

/* ══ QUESTION LAYOUT ═════════════════════════════════════ */
.sp-question-layout[b-3vbq8tjeit] { display: flex; min-height: 100%; }

.sp-cue-sidebar[b-3vbq8tjeit] {
    width: 280px; flex-shrink: 0;
    background: #faf5ff; border-right: 2px solid #d8b4fe;
    padding: 28px 20px; overflow-y: auto;
}
.sp-cue-label[b-3vbq8tjeit] {
    font-size: 0.72rem; font-weight: 700; color: #7c3aed;
    letter-spacing: 0.08em; text-transform: uppercase;
    margin-bottom: 14px; display: block;
}
.sp-cue-sidebar h5[b-3vbq8tjeit] { color: #5b21b6; font-size: 0.9rem; }

.sp-main-panel[b-3vbq8tjeit] {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; padding: 28px 32px; gap: 20px; overflow-y: auto;
}

/* VIDEO */
.sp-video-wrap[b-3vbq8tjeit] {
    width: 100%; max-width: 720px; border-radius: 12px;
    overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    background: #000; position: relative;
}
.sp-video[b-3vbq8tjeit] { width: 100%; max-height: 360px; display: block; }
.sp-video-countdown-overlay[b-3vbq8tjeit] {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(17, 24, 39, 0.85); z-index: 10;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: #fff;
}
.sp-cd-num[b-3vbq8tjeit] {
    font-size: 5rem; font-weight: 800; color: #e83e8c;
    animation: sp-cd-pulse-b-3vbq8tjeit 1s infinite; line-height: 1; margin-bottom: 10px;
}
@keyframes sp-cd-pulse-b-3vbq8tjeit { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.2); opacity: 0.8; } 100% { transform: scale(1); opacity: 1; } }
.sp-video-state-badge[b-3vbq8tjeit] {
    position: absolute; bottom: 10px; left: 10px;
    background: rgba(0,0,0,0.65); color: #ffffff;
    font-size: 0.8rem; padding: 4px 10px; border-radius: 20px;
    z-index: 5;
}

/* Question text */
.sp-q-text[b-3vbq8tjeit] { text-align: center; max-width: 680px; }
.sp-q-meta[b-3vbq8tjeit] {
    font-size: 0.75rem; font-weight: 700; color: #e83e8c;
    letter-spacing: 0.08em; text-transform: uppercase;
    display: block; margin-bottom: 8px;
}
.sp-q-text h3[b-3vbq8tjeit] { font-size: 1.2rem; color: #1a1a2e; font-weight: 700; margin: 0; line-height: 1.5; }

/* Hidden hint (during video/recording) */
.sp-q-hidden-hint p[b-3vbq8tjeit] {
    color: #6b7280; font-size: 0.92rem; margin: 0;
    font-style: italic;
}

/* Revealed after answering */
.sp-q-revealed[b-3vbq8tjeit] {
    background: #f0f9ff; border: 1.5px solid #bae6fd;
    border-radius: 10px; padding: 12px 18px;
    animation: sp-reveal-b-3vbq8tjeit 0.4s ease;
}
@keyframes sp-reveal-b-3vbq8tjeit { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.sp-q-reveal-label[b-3vbq8tjeit] {
    font-size: 0.72rem; font-weight: 700; color: #0284c7;
    letter-spacing: 0.06em; text-transform: uppercase;
    display: block; margin-bottom: 6px;
}
.sp-q-revealed h3[b-3vbq8tjeit] { font-size: 1.05rem; color: #0c4a6e; font-weight: 600; margin: 0; line-height: 1.5; }

/* Recording panel */
.sp-record-panel[b-3vbq8tjeit] {
    width: 100%; max-width: 680px;
    background: #111827; border-radius: 12px;
    padding: 20px 24px;
    display: flex; flex-direction: column; gap: 12px; align-items: center;
}
.sp-rec-badge[b-3vbq8tjeit] {
    background: #dc2626; color: #ffffff; border-radius: 20px;
    padding: 6px 18px; font-size: 0.9rem; font-weight: 700;
    animation: sp-blink-b-3vbq8tjeit 1s infinite;
}
@keyframes sp-blink-b-3vbq8tjeit { 0%,100% { opacity:1; } 50% { opacity:0.5; } }
.sp-rec-waveform[b-3vbq8tjeit] {
    width: 100%; height: 72px; border-radius: 8px;
    background: #1f2937; display: block;
}
.sp-transcript-live[b-3vbq8tjeit] {
    width: 100%; background: #1f2937; border-radius: 8px;
    padding: 12px 16px; min-height: 64px; box-sizing: border-box;
}
.sp-transcript-label[b-3vbq8tjeit] { font-size: 0.75rem; color: #9ca3af; font-weight: 600; display: block; margin-bottom: 4px; }
.sp-transcript-live p[b-3vbq8tjeit] { color: #f3f4f6; margin: 0; font-size: 0.92rem; line-height: 1.5; }
.sp-rec-actions[b-3vbq8tjeit] {
    display: flex; gap: 12px; align-items: center; justify-content: center; width: 100%;
}
.sp-btn-stop[b-3vbq8tjeit] {
    background: #dc2626; color: #ffffff; border: none;
    padding: 10px 28px; border-radius: 8px; font-weight: 700;
    cursor: pointer; transition: opacity 0.2s;
}
.sp-btn-stop:hover[b-3vbq8tjeit] { opacity: 0.85; }
.sp-btn-sm[b-3vbq8tjeit] { padding: 8px 16px; font-size: 0.85rem; }

.sp-repeat-note[b-3vbq8tjeit] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 14px;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 8px;
    font-size: 0.82rem;
    color: #fbbf24;
    text-align: center;
    animation: fadeIn 0.2s ease;
    width: 100%;
    box-sizing: border-box;
}

.sp-repeat-note i[b-3vbq8tjeit] {
    color: #f59e0b;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.sp-repeat-note strong[b-3vbq8tjeit] {
    color: #fef08a;
}


/* Evaluating */
.sp-evaluating[b-3vbq8tjeit] {
    display: flex; flex-direction: column; align-items: center;
    gap: 12px; padding: 40px; color: #6b7280;
}
.sp-eval-spinner[b-3vbq8tjeit] {
    width: 44px; height: 44px;
    border: 4px solid #e5e7eb; border-top-color: #e83e8c;
    border-radius: 50%; animation: sp-spin-b-3vbq8tjeit 0.8s linear infinite;
}
@keyframes sp-spin-b-3vbq8tjeit { to { transform: rotate(360deg); } }

/* Result card */
.sp-result-card[b-3vbq8tjeit] {
    width: 100%; max-width: 680px;
    background: #ffffff; border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    padding: 24px 28px;
    display: flex; flex-direction: column; gap: 16px;
}
.sp-result-header[b-3vbq8tjeit] { display: flex; align-items: center; justify-content: space-between; }
.sp-result-title[b-3vbq8tjeit] { font-size: 1rem; font-weight: 700; color: #1a1a2e; }
.sp-overall-badge[b-3vbq8tjeit] {
    background: linear-gradient(135deg, #e83e8c, #6610f2);
    color: #ffffff; font-size: 1.5rem; font-weight: 800;
    width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.sp-transcript-box[b-3vbq8tjeit] {
    background: #f9fafb; border-radius: 8px;
    padding: 12px 16px; border-left: 4px solid #e83e8c;
}
.sp-tbox-label[b-3vbq8tjeit] { font-size: 0.75rem; color: #9ca3af; font-weight: 600; display: block; margin-bottom: 4px; }
.sp-transcript-box p[b-3vbq8tjeit] { color: #374151; margin: 0; font-size: 0.92rem; line-height: 1.6; font-style: italic; }

.sp-stats-row[b-3vbq8tjeit] { display: flex; gap: 12px; }
.sp-stat[b-3vbq8tjeit] {
    flex: 1; background: #f3f4f6; border-radius: 8px; padding: 10px;
    text-align: center; display: flex; flex-direction: column; gap: 2px;
    min-width: 0;
}
.sp-stat-val[b-3vbq8tjeit] { font-size: 1.2rem; font-weight: 800; color: #1e1b4b; }
.sp-stat-lbl[b-3vbq8tjeit] { font-size: 0.68rem; color: #9ca3af; font-weight: 600; text-transform: uppercase; }

.sp-scores[b-3vbq8tjeit] { display: flex; flex-direction: column; gap: 10px; }
.sp-score-row[b-3vbq8tjeit] { display: flex; align-items: center; gap: 10px; }
.sp-score-lbl[b-3vbq8tjeit] { font-size: 0.82rem; color: #555555; font-weight: 600; width: 180px; flex-shrink: 0; }
.sp-score-bar[b-3vbq8tjeit] { flex: 1; height: 10px; background: #e5e7eb; border-radius: 5px; overflow: hidden; }
.sp-score-fill[b-3vbq8tjeit]      { height: 100%; background: #e83e8c; border-radius: 5px; transition: width 0.6s ease; }
.sp-fill-lex[b-3vbq8tjeit]  { background: #6610f2; }
.sp-fill-gram[b-3vbq8tjeit] { background: #0ea5e9; }
.sp-score-num[b-3vbq8tjeit] { font-size: 0.9rem; font-weight: 800; color: #1a1a2e; width: 24px; text-align: right; flex-shrink: 0; }

.sp-tip[b-3vbq8tjeit] { font-size: 0.85rem; padding: 9px 14px; border-radius: 8px; font-weight: 500; }
.sp-tip-good[b-3vbq8tjeit] { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.sp-tip-warn[b-3vbq8tjeit] { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }

.sp-result-nav[b-3vbq8tjeit] { display: flex; justify-content: flex-end; }

/* Idle hint */
.sp-idle-hint[b-3vbq8tjeit] { text-align: center; color: #6b7280; font-size: 0.9rem; }
.sp-idle-hint p[b-3vbq8tjeit] { margin-bottom: 12px; }

/* Question dots */
.sp-q-dots[b-3vbq8tjeit] { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.sp-dot[b-3vbq8tjeit] {
    width: 30px; height: 30px; border-radius: 50%;
    background: #e5e7eb; font-size: 0.75rem;
    font-weight: 700; color: #6b7280;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.sp-dot.active[b-3vbq8tjeit] { background: #e83e8c; color: #ffffff; transform: scale(1.15); box-shadow: 0 4px 10px rgba(232,62,140,0.3); }
.sp-dot.done[b-3vbq8tjeit]   { background: #86efac; color: #166534; }
.sp-dot.locked[b-3vbq8tjeit] { opacity: 0.4; background: #e5e7eb; color: #9ca3af; }

.sp-score-panel[b-3vbq8tjeit] {
    max-width: 880px;
    margin: 18px auto 28px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(17, 24, 39, 0.08);
    padding: 18px 22px;
}

.sp-score-panel > div:first-child[b-3vbq8tjeit],
.sp-score-total[b-3vbq8tjeit],
.sp-score-grid[b-3vbq8tjeit] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sp-score-label[b-3vbq8tjeit],
.sp-score-total span[b-3vbq8tjeit],
.sp-score-grid span[b-3vbq8tjeit] {
    color: #6b7280;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.sp-score-total[b-3vbq8tjeit] {
    margin-top: 14px;
    padding: 14px 0;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
}

.sp-score-total strong[b-3vbq8tjeit] {
    color: #e83e8c;
    font-size: 2rem;
}

.sp-score-panel p[b-3vbq8tjeit] {
    color: #4b5563;
    margin: 12px 0;
    line-height: 1.5;
}

.sp-score-grid[b-3vbq8tjeit] {
    align-items: stretch;
}

.sp-score-grid > div[b-3vbq8tjeit] {
    flex: 1;
    min-width: 0;
    background: #f9fafb;
    border-radius: 8px;
    padding: 10px 12px;
}

.sp-score-grid strong[b-3vbq8tjeit] {
    display: block;
    color: #111827;
    margin-top: 4px;
}

/* Responsive */
@media (max-width: 768px) {
    .sp-setup-card[b-3vbq8tjeit] { padding: 28px 20px; }
    .sp-cue-sidebar[b-3vbq8tjeit] { width: 100%; border-right: none; border-bottom: 2px solid #d8b4fe; }
    .sp-question-layout.has-sidebar[b-3vbq8tjeit] { flex-direction: column; }
    .sp-main-panel[b-3vbq8tjeit] { padding: 16px; }
    .sp-stats-row[b-3vbq8tjeit] { flex-wrap: wrap; }
    .sp-score-lbl[b-3vbq8tjeit] { width: 130px; font-size: 0.75rem; }
    .sp-score-grid[b-3vbq8tjeit] { flex-direction: column; }
}

/* Insecure Context / LAN Alert */
.sp-insecure-box[b-3vbq8tjeit] {
    background: #fffbeb;
    border: 1.5px solid #fde68a;
    border-radius: 12px;
    padding: 16px;
    margin: 12px 0;
    text-align: left;
}
.sp-insecure-box.error[b-3vbq8tjeit] {
    background: #fef2f2;
    border-color: #fca5a5;
}
.sp-insecure-box-header[b-3vbq8tjeit] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: #991b1b;
    font-size: 0.95rem;
    margin-bottom: 8px;
}
.sp-insecure-box-desc[b-3vbq8tjeit] {
    font-size: 0.86rem;
    color: #4b5563;
    line-height: 1.5;
    margin-bottom: 12px;
}
.sp-insecure-box-actions[b-3vbq8tjeit] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 8px;
}
.sp-btn-switch-localhost[b-3vbq8tjeit] {
    background: #2563eb;
    color: #ffffff;
    border: none;
    padding: 9px 18px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s;
}
.sp-btn-switch-localhost:hover[b-3vbq8tjeit] {
    background: #1d4ed8;
}
.sp-lan-details[b-3vbq8tjeit] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.82rem;
    color: #374151;
    margin-top: 8px;
}
.sp-lan-details summary[b-3vbq8tjeit] {
    cursor: pointer;
    font-weight: 600;
    color: #4b5563;
    user-select: none;
}
.sp-lan-details summary:hover[b-3vbq8tjeit] {
    color: #1f2937;
}
.sp-lan-details ol[b-3vbq8tjeit] {
    margin: 8px 0 0;
    padding-left: 20px;
    line-height: 1.6;
}
.sp-lan-details code[b-3vbq8tjeit] {
    background: #f3f4f6;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
    color: #b91c1c;
}

/* ══════════════════════════════════════════════════════
   DARK THEME EYE-COMFORT RULES (IELTS SPEAKING)
   ══════════════════════════════════════════════════════ */
[data-theme="dark"] .sp-setup-card[b-3vbq8tjeit] {
    background: #15243f;
    border: 1.5px solid #233554;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .sp-setup-title[b-3vbq8tjeit] {
    color: #f8fafc;
}

[data-theme="dark"] .sp-setup-subtitle[b-3vbq8tjeit] {
    color: #94a3b8;
}

[data-theme="dark"] .sp-setup-step[b-3vbq8tjeit] {
    background: #111d33;
    border-color: #233554;
}

[data-theme="dark"] .sp-setup-step.step-ok[b-3vbq8tjeit] {
    border-color: rgba(34, 197, 94, 0.4);
    background: rgba(34, 197, 94, 0.08);
}

[data-theme="dark"] .sp-setup-step.step-error[b-3vbq8tjeit] {
    border-color: rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.08);
}

[data-theme="dark"] .sp-step-content h3[b-3vbq8tjeit] {
    color: #f8fafc;
}

[data-theme="dark"] .sp-step-content p[b-3vbq8tjeit] {
    color: #94a3b8;
}

[data-theme="dark"] .sp-btn-secondary[b-3vbq8tjeit] {
    background: #15243f;
    border-color: #233554;
    color: #cbd5e1;
}

[data-theme="dark"] .sp-btn-secondary:hover[b-3vbq8tjeit] {
    background: #182a4a;
    border-color: #38bdf8;
    color: #f8fafc;
}

[data-theme="dark"] .sp-mic-device-picker label[b-3vbq8tjeit] {
    color: #cbd5e1;
}

[data-theme="dark"] .sp-mic-device-actions select[b-3vbq8tjeit] {
    background: #111d33;
    border-color: #233554;
    color: #f8fafc;
}

[data-theme="dark"] .sp-speaker-test[b-3vbq8tjeit] {
    background: rgba(14, 165, 233, 0.12);
    border-color: rgba(56, 189, 248, 0.3);
}

[data-theme="dark"] .sp-speaker-info p[b-3vbq8tjeit] {
    color: #7dd3fc;
}

/* Exam Layout */
[data-theme="dark"] .sp-body[b-3vbq8tjeit] {
    background: #0b1325;
}

[data-theme="dark"] .sp-think-card[b-3vbq8tjeit] {
    background: #15243f;
    border: 1.5px solid #233554;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .sp-think-top h2[b-3vbq8tjeit] {
    color: #f8fafc;
}

[data-theme="dark"] .sp-think-top p[b-3vbq8tjeit] {
    color: #94a3b8;
}

[data-theme="dark"] .sp-cue-card[b-3vbq8tjeit] {
    background: #111d33;
    border-color: #3b2d54;
}

[data-theme="dark"] .sp-cue-card h5[b-3vbq8tjeit] {
    color: #c084fc;
}

[data-theme="dark"] .sp-cue-card p[b-3vbq8tjeit],
[data-theme="dark"] .sp-cue-card ul[b-3vbq8tjeit],
[data-theme="dark"] .sp-cue-card li[b-3vbq8tjeit] {
    color: #cbd5e1;
}

[data-theme="dark"] .sp-cue-sidebar[b-3vbq8tjeit] {
    background: #111d33;
    border-right-color: #233554;
}

[data-theme="dark"] .sp-cue-sidebar h5[b-3vbq8tjeit] {
    color: #c084fc;
}

[data-theme="dark"] .sp-q-text h3[b-3vbq8tjeit] {
    color: #f8fafc;
}

[data-theme="dark"] .sp-q-hidden-hint p[b-3vbq8tjeit] {
    color: #94a3b8;
}

[data-theme="dark"] .sp-q-revealed[b-3vbq8tjeit] {
    background: #111d33;
    border-color: #233554;
}

[data-theme="dark"] .sp-q-revealed h3[b-3vbq8tjeit] {
    color: #f8fafc;
}

/* Results */
[data-theme="dark"] .sp-result-card[b-3vbq8tjeit] {
    background: #15243f;
    border: 1.5px solid #233554;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .sp-result-title[b-3vbq8tjeit] {
    color: #f8fafc;
}

[data-theme="dark"] .sp-transcript-box[b-3vbq8tjeit] {
    background: #111d33;
    border-left-color: #e83e8c;
}

[data-theme="dark"] .sp-transcript-box p[b-3vbq8tjeit] {
    color: #cbd5e1;
}

[data-theme="dark"] .sp-stat[b-3vbq8tjeit] {
    background: #111d33;
}

[data-theme="dark"] .sp-stat-val[b-3vbq8tjeit] {
    color: #f8fafc;
}

[data-theme="dark"] .sp-stat-lbl[b-3vbq8tjeit] {
    color: #94a3b8;
}

[data-theme="dark"] .sp-score-lbl[b-3vbq8tjeit] {
    color: #94a3b8;
}

[data-theme="dark"] .sp-score-bar[b-3vbq8tjeit] {
    background: #1e293b;
}

[data-theme="dark"] .sp-score-num[b-3vbq8tjeit] {
    color: #f8fafc;
}

[data-theme="dark"] .sp-dot[b-3vbq8tjeit] {
    background: #1e293b;
    color: #94a3b8;
}

[data-theme="dark"] .sp-dot.locked[b-3vbq8tjeit] {
    background: #111d33;
    color: #475569;
}

[data-theme="dark"] .sp-score-panel[b-3vbq8tjeit] {
    background: #15243f;
    border-color: #233554;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .sp-score-total[b-3vbq8tjeit] {
    border-color: #233554;
}

[data-theme="dark"] .sp-score-label[b-3vbq8tjeit],
[data-theme="dark"] .sp-score-total span[b-3vbq8tjeit],
[data-theme="dark"] .sp-score-grid span[b-3vbq8tjeit] {
    color: #94a3b8;
}

[data-theme="dark"] .sp-score-panel p[b-3vbq8tjeit] {
    color: #cbd5e1;
}

[data-theme="dark"] .sp-lan-details[b-3vbq8tjeit] {
    background: #111d33;
    border-color: #233554;
    color: #cbd5e1;
}

[data-theme="dark"] .sp-lan-details summary[b-3vbq8tjeit] {
    color: #cbd5e1;
}

[data-theme="dark"] .sp-lan-details code[b-3vbq8tjeit] {
    background: #1e293b;
    color: #f87171;
}
/* /Pages/Ielts/IeltsStories.razor.rz.scp.css */
/* ========================================================================= */
/* IELTS STORIES CATALOG PAGE (MODERN BRAND THEME #0284C7)                   */
/* ========================================================================= */
.stories-container[b-lh2f9mqzw5] {
    max-width: 1240px;
    margin: 0 auto;
    padding: 24px 20px 60px;
    font-family: 'Be Vietnam Pro', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #0f172a;
}

/* Hero Banner */
.stories-hero[b-lh2f9mqzw5] {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 50%, #0c4a6e 100%);
    border-radius: 24px;
    padding: 40px 36px;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    margin-bottom: 32px;
    box-shadow: 0 16px 36px rgba(2, 132, 199, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.hero-content[b-lh2f9mqzw5] {
    max-width: 640px;
}

.hero-badge[b-lh2f9mqzw5] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    padding: 5px 14px;
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    margin-bottom: 16px;
    text-transform: uppercase;
}

.hero-title[b-lh2f9mqzw5] {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 12px;
    letter-spacing: -0.025em;
}

.hero-desc[b-lh2f9mqzw5] {
    font-size: 1.02rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

.hero-stats[b-lh2f9mqzw5] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 200px;
}

.stat-box[b-lh2f9mqzw5] {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 12px 20px;
    display: flex;
    flex-direction: column;
}

.stat-number[b-lh2f9mqzw5] {
    font-size: 1.3rem;
    font-weight: 800;
    color: #ffffff;
}

.stat-label[b-lh2f9mqzw5] {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

/* Filter Toolbar */
.filter-toolbar[b-lh2f9mqzw5] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 30px;
}

.level-tabs[b-lh2f9mqzw5] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.level-tab-btn[b-lh2f9mqzw5] {
    border: 1.5px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.level-tab-btn:hover[b-lh2f9mqzw5] {
    border-color: #0284c7;
    color: #0284c7;
    background: #f0f9ff;
}

.level-tab-btn.active[b-lh2f9mqzw5] {
    background: #0284c7;
    color: #ffffff;
    border-color: #0284c7;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.28);
}

.search-and-category[b-lh2f9mqzw5] {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.search-input-wrapper[b-lh2f9mqzw5] {
    position: relative;
    flex: 1;
    min-width: 280px;
}

.search-input-wrapper i.bi-search[b-lh2f9mqzw5] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.95rem;
}

.search-input-wrapper input[b-lh2f9mqzw5] {
    width: 100%;
    padding: 10px 38px 10px 38px;
    border-radius: 12px;
    border: 1.5px solid #cbd5e1;
    font-size: 0.92rem;
    background: #ffffff;
    color: #0f172a;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.search-input-wrapper input:focus[b-lh2f9mqzw5] {
    outline: none;
    border-color: #0284c7;
    box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.15);
}

.btn-clear-search[b-lh2f9mqzw5] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 0.95rem;
    cursor: pointer;
}

.category-select-wrapper select[b-lh2f9mqzw5] {
    padding: 10px 16px;
    border-radius: 12px;
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    font-size: 0.92rem;
    color: #334155;
    cursor: pointer;
    outline: none;
    font-weight: 600;
}

.category-select-wrapper select:focus[b-lh2f9mqzw5] {
    border-color: #0284c7;
    box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.15);
}

/* Stories Grid */
.stories-grid[b-lh2f9mqzw5] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 24px;
}

/* Story Card */
.story-card[b-lh2f9mqzw5] {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    border: 1.5px solid #e2e8f0;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    height: 100%;
    cursor: pointer;
}

.story-card:hover[b-lh2f9mqzw5] {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(2, 132, 199, 0.15);
    border-color: #38bdf8;
}

/* Thumbnail */
.story-thumbnail-wrapper[b-lh2f9mqzw5] {
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden;
    background: #f1f5f9;
}

.story-thumbnail[b-lh2f9mqzw5] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.story-card:hover .story-thumbnail[b-lh2f9mqzw5] {
    transform: scale(1.06);
}

.story-badges-overlay[b-lh2f9mqzw5] {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    gap: 6px;
    z-index: 2;
}

.badge-level[b-lh2f9mqzw5] {
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.04em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.level-a1[b-lh2f9mqzw5], .level-a2[b-lh2f9mqzw5] { background: #16a34a; }
.level-b1[b-lh2f9mqzw5] { background: #0284c7; }
.level-b2[b-lh2f9mqzw5] { background: #ea580c; }
.level-c1[b-lh2f9mqzw5], .level-c2[b-lh2f9mqzw5] { background: #7c3aed; }

.badge-band[b-lh2f9mqzw5] {
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(4px);
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.story-read-time[b-lh2f9mqzw5] {
    position: absolute;
    bottom: 10px;
    right: 12px;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(4px);
    color: #ffffff;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Card Content Info (Ô hiện thông tin rõ ràng, đẹp mắt) */
.story-info[b-lh2f9mqzw5] {
    padding: 20px 22px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.story-meta-top[b-lh2f9mqzw5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.story-category[b-lh2f9mqzw5] {
    font-size: 0.75rem;
    color: #0284c7;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    padding: 3px 10px;
    border-radius: 6px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.story-word-count[b-lh2f9mqzw5] {
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.story-title[b-lh2f9mqzw5] {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 8px 0;
    line-height: 1.38;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.story-summary[b-lh2f9mqzw5] {
    font-size: 0.88rem;
    color: #64748b;
    line-height: 1.55;
    margin: 0 0 16px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Card Footer & Đọc Ngay Button */
.story-footer[b-lh2f9mqzw5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid #f1f5f9;
    margin-top: auto;
    gap: 10px;
}

.story-features[b-lh2f9mqzw5] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.feature-item[b-lh2f9mqzw5] {
    font-size: 0.78rem;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 5px;
}

.feature-item i[b-lh2f9mqzw5] {
    color: #0284c7;
    font-size: 0.85rem;
}

.feature-item b[b-lh2f9mqzw5] {
    color: #0f172a;
}

/* Nút Đọc Ngay Chuẩn UX/UI */
.btn-read-now[b-lh2f9mqzw5] {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff;
    border: none;
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 3px 10px rgba(2, 132, 199, 0.28);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}

.btn-read-now i[b-lh2f9mqzw5] {
    font-size: 1.2rem;
    transition: transform 0.2s ease;
}

.btn-read-now:hover[b-lh2f9mqzw5] {
    background: linear-gradient(135deg, #0369a1 0%, #075985 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(2, 132, 199, 0.4);
}

.btn-read-now:hover i[b-lh2f9mqzw5] {
    transform: translateX(4px);
}

/* Empty & Loading States */
.loading-state[b-lh2f9mqzw5], .empty-state[b-lh2f9mqzw5] {
    text-align: center;
    padding: 60px 20px;
    color: #64748b;
}

.custom-spinner[b-lh2f9mqzw5] {
    width: 36px;
    height: 36px;
    border: 3px solid #e0f2fe;
    border-top-color: #0284c7;
    border-radius: 50%;
    animation: spin-b-lh2f9mqzw5 0.8s linear infinite;
    margin: 0 auto 16px;
}

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

.empty-state i[b-lh2f9mqzw5] {
    font-size: 3.5rem;
    color: #cbd5e1;
    margin-bottom: 14px;
    display: block;
}

.btn-reset-filters[b-lh2f9mqzw5] {
    background: #ffffff;
    border: 1.5px solid #0284c7;
    color: #0284c7;
    padding: 8px 20px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    margin-top: 12px;
    transition: all 0.2s;
}

.btn-reset-filters:hover[b-lh2f9mqzw5] {
    background: #0284c7;
    color: #ffffff;
}

/* Responsive */
@media (max-width: 768px) {
    .stories-hero[b-lh2f9mqzw5] {
        flex-direction: column;
        padding: 28px 20px;
    }
    
    .hero-stats[b-lh2f9mqzw5] {
        width: 100%;
        flex-direction: row;
    }
    
    .stat-box[b-lh2f9mqzw5] {
        flex: 1;
    }
}

/* Notebook Button & Completed Badge */
.btn-saved-notebook[b-lh2f9mqzw5] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 12px;
    color: #1e293b;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-saved-notebook:hover[b-lh2f9mqzw5] {
    border-color: #f59e0b;
    background: #fffbeb;
    color: #b45309;
}

.btn-saved-notebook .badge-count[b-lh2f9mqzw5] {
    background: #f59e0b;
    color: #ffffff;
    font-size: 0.75rem;
    padding: 2px 7px;
    border-radius: 20px;
    font-weight: 800;
}

.badge-completed[b-lh2f9mqzw5] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    background: #10b981;
    color: #ffffff;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
}

/* Saved Vocabulary Modal */
.saved-vocab-backdrop[b-lh2f9mqzw5] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(6px);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.saved-vocab-modal[b-lh2f9mqzw5] {
    background: #ffffff;
    border-radius: 20px;
    width: 100%;
    max-width: 680px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 1px solid #e2e8f0;
    overflow: hidden;
    animation: modalPop-b-lh2f9mqzw5 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalPop-b-lh2f9mqzw5 {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.saved-vocab-header[b-lh2f9mqzw5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.saved-vocab-header h3[b-lh2f9mqzw5] {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
}

.btn-close-notebook[b-lh2f9mqzw5] {
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 1.1rem;
    padding: 6px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-close-notebook:hover[b-lh2f9mqzw5] {
    background: #e2e8f0;
    color: #0f172a;
}

.saved-vocab-body[b-lh2f9mqzw5] {
    padding: 20px 24px;
    overflow-y: auto;
    flex-grow: 1;
}

.saved-cards-list[b-lh2f9mqzw5] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.saved-card-item[b-lh2f9mqzw5] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px 18px;
    transition: all 0.2s ease;
}

.saved-card-item:hover[b-lh2f9mqzw5] {
    border-color: #cbd5e1;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.word-text[b-lh2f9mqzw5] {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0284c7;
}

.pos-badge[b-lh2f9mqzw5] {
    font-size: 0.72rem;
    background: #e0f2fe;
    color: #0369a1;
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 700;
}

.phonetic-text[b-lh2f9mqzw5] {
    font-size: 0.85rem;
    color: #64748b;
    font-family: 'Consolas', 'Courier New', monospace;
    margin: 2px 0 6px;
}

.meaning-text[b-lh2f9mqzw5] {
    font-size: 0.95rem;
    color: #1e293b;
    font-weight: 600;
    margin-bottom: 4px;
}

.example-text[b-lh2f9mqzw5] {
    font-size: 0.88rem;
    color: #475569;
    font-style: italic;
    background: #f1f5f9;
    padding: 6px 12px;
    border-radius: 8px;
    margin: 6px 0;
}

.source-text[b-lh2f9mqzw5] {
    font-size: 0.78rem;
    color: #94a3b8;
    margin-top: 4px;
}

.btn-audio-mini[b-lh2f9mqzw5] {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    color: #0284c7;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.btn-audio-mini:hover[b-lh2f9mqzw5] {
    background: #0284c7;
    color: #ffffff;
}

.btn-delete-mini[b-lh2f9mqzw5] {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 6px;
    font-size: 0.95rem;
    border-radius: 6px;
    transition: all 0.2s;
}

.btn-delete-mini:hover[b-lh2f9mqzw5] {
    color: #ef4444;
    background: #fee2e2;
}

/* ========================================================================= */
/* DARK THEME EYE-COMFORT RULES (IELTS STORIES)                              */
/* ========================================================================= */
[data-theme="dark"] .stories-container[b-lh2f9mqzw5] {
    color: #f8fafc;
}

[data-theme="dark"] .level-tab-btn[b-lh2f9mqzw5] {
    background: #15243f;
    border-color: #233554;
    color: #cbd5e1;
}

[data-theme="dark"] .level-tab-btn:hover[b-lh2f9mqzw5] {
    background: #182a4a;
    border-color: #38bdf8;
    color: #f8fafc;
}

[data-theme="dark"] .level-tab-btn.active[b-lh2f9mqzw5] {
    background: #0284c7;
    border-color: #0284c7;
    color: #ffffff;
}

[data-theme="dark"] .search-input-wrapper input[b-lh2f9mqzw5] {
    background: #111d33;
    border-color: #233554;
    color: #f8fafc;
}

[data-theme="dark"] .category-select-wrapper select[b-lh2f9mqzw5] {
    background: #111d33;
    border-color: #233554;
    color: #f8fafc;
}

[data-theme="dark"] .story-card[b-lh2f9mqzw5] {
    background: #15243f;
    border-color: #233554;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .story-card:hover[b-lh2f9mqzw5] {
    border-color: #38bdf8;
    background: #182a4a;
    box-shadow: 0 16px 36px rgba(2, 132, 199, 0.25);
}

[data-theme="dark"] .story-title[b-lh2f9mqzw5] {
    color: #f8fafc;
}

[data-theme="dark"] .story-excerpt[b-lh2f9mqzw5] {
    color: #94a3b8;
}

[data-theme="dark"] .story-card-footer[b-lh2f9mqzw5] {
    border-top-color: #233554;
}

[data-theme="dark"] .vocab-drawer[b-lh2f9mqzw5] {
    background: #15243f;
    border-color: #233554;
    color: #f8fafc;
}

[data-theme="dark"] .saved-word-card[b-lh2f9mqzw5] {
    background: #111d33;
    border-color: #233554;
}

[data-theme="dark"] .word-context[b-lh2f9mqzw5] {
    background: #0b1325;
    color: #cbd5e1;
}

/* ── Additional Story Card & Saved Vocab Modal Dark Mode ── */
[data-theme="dark"] .story-summary[b-lh2f9mqzw5] {
    color: #94a3b8;
}

[data-theme="dark"] .story-category[b-lh2f9mqzw5] {
    background: rgba(255, 255, 255, 0.06);
    color: #cbd5e1;
}

[data-theme="dark"] .feature-item[b-lh2f9mqzw5] {
    color: #94a3b8;
}

[data-theme="dark"] .story-word-count[b-lh2f9mqzw5] {
    color: #64748b;
}

[data-theme="dark"] .story-footer[b-lh2f9mqzw5] {
    border-top-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .saved-vocab-modal[b-lh2f9mqzw5] {
    background: #0f172a;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
    color: #f8fafc;
}

[data-theme="dark"] .saved-vocab-header[b-lh2f9mqzw5] {
    background: rgba(255, 255, 255, 0.02);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .saved-vocab-header h3[b-lh2f9mqzw5] {
    color: #f8fafc;
}

[data-theme="dark"] .btn-close-notebook[b-lh2f9mqzw5] {
    color: #94a3b8;
}

[data-theme="dark"] .btn-close-notebook:hover[b-lh2f9mqzw5] {
    background: rgba(255, 255, 255, 0.08);
    color: #f8fafc;
}

[data-theme="dark"] .saved-card-item[b-lh2f9mqzw5] {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .word-text[b-lh2f9mqzw5] {
    color: #f8fafc;
}

[data-theme="dark"] .phonetic-text[b-lh2f9mqzw5] {
    color: #38bdf8;
}

[data-theme="dark"] .meaning-text[b-lh2f9mqzw5] {
    color: #cbd5e1;
}

[data-theme="dark"] .example-text[b-lh2f9mqzw5] {
    color: #94a3b8;
}

[data-theme="dark"] .source-text[b-lh2f9mqzw5] {
    color: #64748b;
}

[data-theme="dark"] .btn-reset-filters[b-lh2f9mqzw5] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
}

[data-theme="dark"] .btn-reset-filters:hover[b-lh2f9mqzw5] {
    background: rgba(255, 255, 255, 0.12);
    color: #f8fafc;
}

[data-theme="dark"] .loading-state[b-lh2f9mqzw5],
[data-theme="dark"] .empty-state[b-lh2f9mqzw5] {
    color: #64748b;
}

/* /Pages/Ielts/IeltsStoryReader.razor.rz.scp.css */
/* ========================================================================= */
/* IELTS STORY READER STYLESHEET (WORLD-CLASS READING EXPERIENCE)            */
/* ========================================================================= */

/* Wrapper & Themes */
.story-reader-wrapper[b-o4iaeamn1i] {
    min-height: 100vh;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.theme-light[b-o4iaeamn1i] {
    background-color: #ffffff;
    color: #0f172a;
}

.theme-paper[b-o4iaeamn1i] {
    background-color: #fbf7ee;
    color: #2c251e;
}

.theme-dark[b-o4iaeamn1i] {
    background-color: #0b0f19;
    color: #f1f5f9;
}

/* Font Family Classes */
.font-sans[b-o4iaeamn1i] {
    font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.font-serif[b-o4iaeamn1i] {
    font-family: 'Lora', 'Merriweather', Georgia, Cambria, serif;
}

/* ========================================================================= */
/* TOP STICKY BAR (FROSTED GLASSMORPHISM)                                     */
/* ========================================================================= */
.reader-topbar[b-o4iaeamn1i] {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 28px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background: rgba(255, 255, 255, 0.88);
    gap: 16px;
    flex-wrap: wrap;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.theme-paper .reader-topbar[b-o4iaeamn1i] {
    background: rgba(251, 247, 238, 0.9);
    border-bottom-color: rgba(217, 206, 184, 0.8);
}

.theme-dark .reader-topbar[b-o4iaeamn1i] {
    background: rgba(11, 15, 25, 0.88);
    border-bottom-color: rgba(30, 41, 59, 0.8);
}

.topbar-left[b-o4iaeamn1i] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-back[b-o4iaeamn1i] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.92rem;
    font-weight: 700;
    color: #0284c7;
    text-decoration: none;
    padding: 6px 14px;
    border-radius: 10px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    transition: all 0.2s ease;
}

.btn-back:hover[b-o4iaeamn1i] {
    background: #e0f2fe;
    color: #0369a1;
    transform: translateX(-2px);
}

.theme-dark .btn-back[b-o4iaeamn1i] {
    background: rgba(2, 132, 199, 0.15);
    border-color: rgba(2, 132, 199, 0.3);
    color: #38bdf8;
}

.topbar-divider[b-o4iaeamn1i] {
    color: #cbd5e1;
    font-size: 0.9rem;
}

.theme-dark .topbar-divider[b-o4iaeamn1i] {
    color: #334155;
}

.badge-level[b-o4iaeamn1i] {
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.04em;
}

.level-a1[b-o4iaeamn1i], .level-a2[b-o4iaeamn1i] { background: #16a34a; }
.level-b1[b-o4iaeamn1i] { background: #0284c7; }
.level-b2[b-o4iaeamn1i] { background: #ea580c; }
.level-c1[b-o4iaeamn1i], .level-c2[b-o4iaeamn1i] { background: #7c3aed; }

.story-category-tag[b-o4iaeamn1i] {
    font-size: 0.88rem;
    font-weight: 600;
    color: #64748b;
}

.theme-dark .story-category-tag[b-o4iaeamn1i] {
    color: #94a3b8;
}

.topbar-controls[b-o4iaeamn1i] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.speech-controls[b-o4iaeamn1i] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ctrl-btn[b-o4iaeamn1i] {
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    padding: 7px 14px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.ctrl-btn:hover[b-o4iaeamn1i] {
    background: #f8fafc;
    border-color: #0284c7;
    color: #0284c7;
}

.ctrl-btn.active[b-o4iaeamn1i] {
    background: #0284c7;
    color: #ffffff;
    border-color: #0284c7;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);
}

.theme-dark .ctrl-btn[b-o4iaeamn1i] {
    background: #1e293b;
    border-color: #334155;
    color: #f1f5f9;
}

.theme-dark .ctrl-btn:hover[b-o4iaeamn1i] {
    border-color: #38bdf8;
    color: #38bdf8;
}

.theme-dark .ctrl-btn.active[b-o4iaeamn1i] {
    background: #0284c7;
    color: #ffffff;
    border-color: #0284c7;
}

.speed-select[b-o4iaeamn1i] {
    padding: 7px 10px;
    border-radius: 10px;
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    outline: none;
}

.speed-select:focus[b-o4iaeamn1i] {
    border-color: #0284c7;
}

.theme-dark .speed-select[b-o4iaeamn1i] {
    background: #1e293b;
    border-color: #334155;
    color: #f1f5f9;
}

.font-size-group[b-o4iaeamn1i] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: rgba(0, 0, 0, 0.03);
    padding: 2px 4px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.font-size-badge[b-o4iaeamn1i] {
    font-size: 0.76rem;
    font-weight: 800;
    color: #475569;
    padding: 0 4px;
    min-width: 38px;
    text-align: center;
    user-select: none;
    letter-spacing: -0.2px;
}

.theme-dark .font-size-group[b-o4iaeamn1i] {
    background: rgba(255, 255, 255, 0.04);
    border-color: #334155;
}

.theme-dark .font-size-badge[b-o4iaeamn1i] {
    color: #cbd5e1;
}

.theme-paper .font-size-group[b-o4iaeamn1i] {
    background: #f4ecdc;
    border-color: #d9ceb8;
}

.theme-paper .font-size-badge[b-o4iaeamn1i] {
    color: #451a03;
}

.ctrl-btn-icon:disabled[b-o4iaeamn1i] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.ctrl-btn-icon[b-o4iaeamn1i] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    font-size: 0.85rem;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.ctrl-btn-icon:hover[b-o4iaeamn1i] {
    background: #f8fafc;
    border-color: #0284c7;
    color: #0284c7;
}

.theme-dark .ctrl-btn-icon[b-o4iaeamn1i] {
    background: #1e293b;
    border-color: #334155;
    color: #f1f5f9;
}

.btn-font-family[b-o4iaeamn1i] {
    font-size: 0.95rem;
}

.theme-switcher[b-o4iaeamn1i] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f1f5f9;
    padding: 4px 6px;
    border-radius: 30px;
    border: 1px solid #e2e8f0;
}

.theme-dark .theme-switcher[b-o4iaeamn1i] {
    background: #1e293b;
    border-color: #334155;
}

.theme-dot[b-o4iaeamn1i] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.theme-dot.theme-light[b-o4iaeamn1i] { background-color: #ffffff; border-color: #cbd5e1; }
.theme-dot.theme-paper[b-o4iaeamn1i] { background-color: #fbf7ee; border-color: #d9ceb8; }
.theme-dot.theme-dark[b-o4iaeamn1i] { background-color: #0b0f19; border-color: #475569; }

.theme-dot.active[b-o4iaeamn1i] {
    transform: scale(1.2);
    box-shadow: 0 0 0 2px #0284c7;
}

/* ========================================================================= */
/* MAIN READER CONTAINER (MAX-WIDTH & BREATHING ROOM)                       */
/* ========================================================================= */
.reader-container[b-o4iaeamn1i] {
    max-width: 800px;
    margin: 0 auto;
    padding: 48px 24px 100px;
    line-height: 2.05;
    letter-spacing: 0.01em;
}

/* Story Header */
.story-header[b-o4iaeamn1i] {
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid #e2e8f0;
}

.theme-paper .story-header[b-o4iaeamn1i] {
    border-bottom-color: #e6dfcf;
}

.theme-dark .story-header[b-o4iaeamn1i] {
    border-bottom-color: #1e293b;
}

.story-meta-line[b-o4iaeamn1i] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    margin-bottom: 12px;
}

.meta-badge[b-o4iaeamn1i] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.meta-badge.band-badge[b-o4iaeamn1i] {
    background: #eff6ff;
    color: #0284c7;
    border-color: #bae6fd;
    font-weight: 800;
}

.meta-badge.wpm-badge[b-o4iaeamn1i] {
    background: #f0fdf4;
    color: #16a34a;
    border-color: #bbf7d0;
}

.theme-dark .meta-badge[b-o4iaeamn1i] {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}

.theme-dark .meta-badge.band-badge[b-o4iaeamn1i] {
    background: #082f49;
    color: #38bdf8;
    border-color: #0369a1;
}

.story-main-title[b-o4iaeamn1i] {
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 12px 0;
    color: #0f172a;
    letter-spacing: -0.025em;
}

.theme-paper .story-main-title[b-o4iaeamn1i] {
    color: #2c251e;
}

.theme-dark .story-main-title[b-o4iaeamn1i] {
    color: #ffffff;
}

.story-summary-box[b-o4iaeamn1i] {
    display: flex;
    gap: 10px;
    padding: 10px 14px;
    background: #f8fafc;
    border-left: 3px solid #0284c7;
    border-radius: 0 8px 8px 0;
    margin-bottom: 14px;
}

.summary-quote-icon[b-o4iaeamn1i] {
    font-size: 1.3rem;
    color: #94a3b8;
    line-height: 1;
    margin-top: 1px;
    flex-shrink: 0;
}

.story-lead-summary[b-o4iaeamn1i] {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: calc(var(--reader-font-size, 18px) * 0.92);
    line-height: 1.65;
    color: #475569;
    margin: 0;
    font-style: italic;
    transition: font-size 0.15s ease;
}

.theme-paper .story-summary-box[b-o4iaeamn1i] {
    background: #fbf7ee;
    border-left-color: #d97706;
}

.theme-dark .story-summary-box[b-o4iaeamn1i] {
    background: #1e293b;
    border-left-color: #38bdf8;
}

.theme-dark .story-lead-summary[b-o4iaeamn1i] {
    color: #94a3b8;
}

.reading-guide-pill[b-o4iaeamn1i] {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    background: #f0f9ff;
    color: #0369a1;
    border: 1px solid #bae6fd;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 18px;
    line-height: 1.45;
}

.guide-pill-left[b-o4iaeamn1i] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.guide-pill-icon[b-o4iaeamn1i] {
    font-size: 1rem;
    color: #0284c7;
    flex-shrink: 0;
}

.tip-highlight[b-o4iaeamn1i] {
    background: #d97706;
    color: #ffffff;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 700;
}

.btn-dismiss-tip[b-o4iaeamn1i] {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    padding: 0 4px;
    border-radius: 4px;
    transition: all 0.2s;
}

.btn-dismiss-tip:hover[b-o4iaeamn1i] {
    color: #0f172a;
    background: rgba(0, 0, 0, 0.05);
}

.theme-paper .reading-guide-pill[b-o4iaeamn1i] {
    background: rgba(2, 132, 199, 0.08);
    border-color: rgba(2, 132, 199, 0.2);
}

.theme-dark .reading-guide-pill[b-o4iaeamn1i] {
    background: rgba(2, 132, 199, 0.12);
    color: #7dd3fc;
    border-color: rgba(2, 132, 199, 0.25);
}

/* ========================================================================= */
/* STORY ARTICLE PARAGRAPHS & VOCAB HIGHLIGHTS                               */
/* ========================================================================= */
.story-article[b-o4iaeamn1i] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 40px;
}

.paragraph-block[b-o4iaeamn1i] {
    position: relative;
    padding: 12px 16px;
    border-radius: 10px;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
    background: transparent;
}

.paragraph-block:hover[b-o4iaeamn1i] {
    background: rgba(2, 132, 199, 0.03);
    border-left-color: #0284c7;
}

.theme-paper .paragraph-block:hover[b-o4iaeamn1i] {
    background: rgba(0, 0, 0, 0.02);
    border-left-color: #d97706;
}

.theme-dark .paragraph-block:hover[b-o4iaeamn1i] {
    background: rgba(255, 255, 255, 0.03);
    border-left-color: #38bdf8;
}

.paragraph-top-bar[b-o4iaeamn1i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.para-letter-tag[b-o4iaeamn1i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: #f1f5f9;
    color: #475569;
    font-weight: 800;
    font-size: 0.76rem;
    letter-spacing: 0.5px;
    border: 1px solid #e2e8f0;
}

.theme-dark .para-letter-tag[b-o4iaeamn1i] {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}

.btn-read-para[b-o4iaeamn1i] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-read-para:hover[b-o4iaeamn1i] {
    background: #f0f9ff;
    border-color: #bae6fd;
    color: #0284c7;
}

.btn-read-para.playing[b-o4iaeamn1i] {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

.theme-dark .btn-read-para[b-o4iaeamn1i] {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}

.paragraph-en[b-o4iaeamn1i] {
    font-size: var(--reader-font-size, 1.125rem) !important;
    line-height: 1.82;
    color: #1e293b;
    letter-spacing: 0.01em;
    transition: font-size 0.15s ease;
}

.theme-paper .paragraph-en[b-o4iaeamn1i] {
    color: #2c251e;
}

.theme-dark .paragraph-en[b-o4iaeamn1i] {
    color: #e2e8f0;
}

@keyframes passagePulseGlow-b-o4iaeamn1i {
    0% {
        box-shadow: 0 0 0 0 rgba(2, 132, 199, 0.6);
        background: rgba(2, 132, 199, 0.18);
        border-left-color: #0284c7;
        transform: scale(1.015);
    }
    40% {
        box-shadow: 0 0 24px 6px rgba(2, 132, 199, 0.35);
        background: rgba(2, 132, 199, 0.12);
        border-left-color: #0284c7;
        transform: scale(1.015);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(2, 132, 199, 0);
        background: transparent;
        border-left-color: transparent;
        transform: scale(1);
    }
}

.paragraph-block.passage-pulse-highlight[b-o4iaeamn1i] {
    animation: passagePulseGlow-b-o4iaeamn1i 2.5s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    border-left: 4px solid #0284c7 !important;
    border-radius: 12px;
}

.theme-paper .paragraph-block.passage-pulse-highlight[b-o4iaeamn1i] {
    border-left-color: #d97706 !important;
}

.theme-dark .paragraph-block.passage-pulse-highlight[b-o4iaeamn1i] {
    border-left-color: #38bdf8 !important;
}

.paragraph-en[b-o4iaeamn1i] {
    position: relative;
    padding-right: 42px;
}

.target-word[b-o4iaeamn1i] {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
    border-bottom: 2.5px solid #f59e0b;
    padding: 1px 6px;
    border-radius: 5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline;
}

.target-word:hover[b-o4iaeamn1i] {
    background: rgba(245, 158, 11, 0.28);
    color: #92400e;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
    transform: translateY(-1px);
}

.theme-paper .target-word[b-o4iaeamn1i] {
    background: #fef3c7;
    color: #b45309;
    border-bottom-color: #f59e0b;
}

.theme-paper .target-word:hover[b-o4iaeamn1i] {
    background: #d97706;
    color: #ffffff;
}

.theme-dark .target-word[b-o4iaeamn1i] {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border-bottom-color: #f59e0b;
}

.theme-dark .target-word:hover[b-o4iaeamn1i] {
    background: rgba(245, 158, 11, 0.38);
    color: #fef08a;
}

.btn-read-sentence[b-o4iaeamn1i] {
    position: absolute;
    right: 0;
    top: 4px;
    background: transparent;
    border: 1px solid transparent;
    color: #94a3b8;
    cursor: pointer;
    font-size: 1.1rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-read-sentence:hover[b-o4iaeamn1i] {
    color: #0284c7;
    background: #f0f9ff;
    border-color: #bae6fd;
    transform: scale(1.1);
}

.theme-dark .btn-read-sentence:hover[b-o4iaeamn1i] {
    background: rgba(2, 132, 199, 0.2);
    color: #38bdf8;
}

.paragraph-vi[b-o4iaeamn1i] {
    font-family: 'Be Vietnam Pro', 'Plus Jakarta Sans', sans-serif;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(2, 132, 199, 0.2);
    color: #0284c7;
    font-size: calc(var(--reader-font-size, 18px) * 0.9) !important;
    line-height: 1.7;
    font-style: normal;
    transition: font-size 0.15s ease;
}

.theme-paper .paragraph-vi[b-o4iaeamn1i] {
    color: #854d0e;
    border-top-color: rgba(133, 77, 14, 0.2);
}

.theme-dark .paragraph-vi[b-o4iaeamn1i] {
    color: #7dd3fc;
    border-top-color: rgba(125, 211, 252, 0.2);
}

/* ========================================================================= */
/* VOCABULARY POPUP CARD MODAL                                              */
/* ========================================================================= */
.vocab-popup-overlay[b-o4iaeamn1i] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.vocab-popup-card[b-o4iaeamn1i] {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 480px;
    padding: 26px 28px;
    animation: popModal-b-o4iaeamn1i 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    color: #1e293b;
    border: 1px solid #e2e8f0;
}

@keyframes popModal-b-o4iaeamn1i {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.vocab-popup-header[b-o4iaeamn1i] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 18px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 14px;
}

.vocab-word-row[b-o4iaeamn1i] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.vocab-word[b-o4iaeamn1i] {
    font-size: 1.6rem;
    font-weight: 800;
    color: #0f172a;
    display: inline;
}

.vocab-badge-band[b-o4iaeamn1i] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(217, 119, 6, 0.25);
    white-space: nowrap;
}

.vocab-meta-sub[b-o4iaeamn1i] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.vocab-pos[b-o4iaeamn1i] {
    background: #f1f5f9;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    text-transform: uppercase;
}

.vocab-phonetic[b-o4iaeamn1i] {
    font-family: Consolas, Monaco, monospace;
    color: #0284c7;
    font-size: 0.95rem;
    font-weight: 600;
}

.vocab-popup-actions[b-o4iaeamn1i] {
    display: flex;
    gap: 8px;
}

.btn-audio-speak[b-o4iaeamn1i] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f0f9ff;
    color: #0284c7;
    border: 1px solid #bae6fd;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    transition: all 0.2s;
}

.btn-audio-speak:hover[b-o4iaeamn1i] {
    background: #0284c7;
    color: #ffffff;
    transform: scale(1.08);
}

.btn-close-popup[b-o4iaeamn1i] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f8fafc;
    color: #94a3b8;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    transition: all 0.2s;
}

.btn-close-popup:hover[b-o4iaeamn1i] {
    background: #f1f5f9;
    color: #0f172a;
}

.vocab-label[b-o4iaeamn1i] {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.vocab-meaning[b-o4iaeamn1i] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0284c7;
    margin: 0 0 16px 0;
    line-height: 1.5;
}

.dict-lookup-loading[b-o4iaeamn1i] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #f0f9ff;
    border: 1px dashed #bae6fd;
    border-radius: 10px;
    color: #0284c7;
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 16px;
}

.mini-spinner[b-o4iaeamn1i] {
    width: 16px;
    height: 16px;
    border: 2px solid #bae6fd;
    border-top: 2px solid #0284c7;
    border-radius: 50%;
    animation: spin-b-o4iaeamn1i 0.7s linear infinite;
    display: inline-block;
}

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

.vocab-example-box[b-o4iaeamn1i] {
    background: #f8fafc;
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
    border: 1px solid #e2e8f0;
}

.vocab-example[b-o4iaeamn1i] {
    font-size: 0.95rem;
    font-style: italic;
    color: #334155;
    margin: 0;
    line-height: 1.5;
}

.vocab-synonyms-box[b-o4iaeamn1i] {
    background: #fffbeb;
    border: 1px solid #fef3c7;
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.vocab-synonyms-text[b-o4iaeamn1i] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #b45309;
    margin: 0;
    line-height: 1.45;
}

.theme-dark .vocab-synonyms-box[b-o4iaeamn1i] {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.25);
}

.theme-dark .vocab-synonyms-text[b-o4iaeamn1i] {
    color: #fcd34d;
}

.vocab-context-box[b-o4iaeamn1i] {
    background: #f0fdf4;
    border: 1px solid #dcfce7;
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.vocab-context-text[b-o4iaeamn1i] {
    font-size: 0.92rem;
    color: #166534;
    margin: 0;
    line-height: 1.45;
}

.theme-dark .vocab-context-box[b-o4iaeamn1i] {
    background: rgba(22, 101, 52, 0.15);
    border-color: rgba(22, 101, 52, 0.3);
}

.theme-dark .vocab-context-text[b-o4iaeamn1i] {
    color: #86efac;
}

.collocation-tags[b-o4iaeamn1i] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
}

.collocation-tag[b-o4iaeamn1i] {
    background: #ecfeff;
    color: #0891b2;
    border: 1px solid #cffafe;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
}

.vocab-popup-footer[b-o4iaeamn1i] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 14px;
}

.btn-locate-passage[b-o4iaeamn1i] {
    flex: 1;
    min-width: 140px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1.5px solid #0284c7;
    background: #f0f9ff;
    color: #0284c7;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-locate-passage:hover[b-o4iaeamn1i] {
    background: #0284c7;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);
}

.theme-dark .btn-locate-passage[b-o4iaeamn1i] {
    background: rgba(2, 132, 199, 0.15);
    border-color: #38bdf8;
    color: #38bdf8;
}

.theme-dark .btn-locate-passage:hover[b-o4iaeamn1i] {
    background: #0284c7;
    color: #ffffff;
}

.btn-save-vocab[b-o4iaeamn1i] {
    flex: 1;
    min-width: 110px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    color: #475569;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
}

.btn-save-vocab:hover[b-o4iaeamn1i] {
    background: #f8fafc;
    border-color: #0284c7;
    color: #0284c7;
}

.btn-save-vocab.saved[b-o4iaeamn1i] {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #16a34a;
}

.btn-cambridge-link[b-o4iaeamn1i] {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
}

.btn-cambridge-link:hover[b-o4iaeamn1i] {
    background: #e2e8f0;
    color: #0f172a;
}

/* ========================================================================= */
/* POST-READING QUIZ & RECAP SECTION                                         */
/* ========================================================================= */
.post-reading-section[b-o4iaeamn1i] {
    border-top: 2px solid #e2e8f0;
    padding-top: 48px;
    margin-top: 30px;
}

.theme-dark .post-reading-section[b-o4iaeamn1i] {
    border-top-color: #1e293b;
}

.section-title-wrapper[b-o4iaeamn1i] {
    text-align: center;
    margin-bottom: 36px;
}

.section-badge[b-o4iaeamn1i] {
    background: #f0f9ff;
    color: #0284c7;
    border: 1px solid #bae6fd;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 5px 14px;
    border-radius: 30px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}

.section-title-wrapper h2[b-o4iaeamn1i] {
    font-size: 1.85rem;
    font-weight: 800;
    margin: 0 0 8px 0;
    letter-spacing: -0.02em;
}

.section-desc[b-o4iaeamn1i] {
    font-size: 0.95rem;
    color: #64748b;
    margin: 0;
}

.theme-dark .section-desc[b-o4iaeamn1i] {
    color: #94a3b8;
}

/* Quiz Card */
.quiz-card[b-o4iaeamn1i] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.theme-paper .quiz-card[b-o4iaeamn1i] {
    background: #ffffff;
    border-color: #e6dfcf;
}

.theme-dark .quiz-card[b-o4iaeamn1i] {
    background: #1e293b;
    border-color: #334155;
}

.quiz-card:hover[b-o4iaeamn1i] {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.quiz-card.quiz-correct[b-o4iaeamn1i] {
    border-color: #86efac;
    background: #fcfdfc;
}

.theme-dark .quiz-card.quiz-correct[b-o4iaeamn1i] {
    border-color: #166534;
    background: rgba(22, 101, 52, 0.1);
}

.quiz-card.quiz-wrong[b-o4iaeamn1i] {
    border-color: #fca5a5;
    background: #fdfcfc;
}

.theme-dark .quiz-card.quiz-wrong[b-o4iaeamn1i] {
    border-color: #991b1b;
    background: rgba(153, 27, 27, 0.1);
}

.quiz-card-head[b-o4iaeamn1i] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}

.quiz-qnum[b-o4iaeamn1i] {
    background: #0284c7;
    color: #ffffff;
    font-weight: 800;
    font-size: 0.82rem;
    min-width: 26px;
    height: 26px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
    box-shadow: 0 2px 4px rgba(2, 132, 199, 0.2);
}

.quiz-qnum.mc-qnum[b-o4iaeamn1i] {
    background: #475569;
    box-shadow: 0 2px 4px rgba(71, 85, 105, 0.2);
}

.theme-dark .quiz-qnum.mc-qnum[b-o4iaeamn1i] {
    background: #64748b;
}

.quiz-statement-text[b-o4iaeamn1i] {
    font-size: 0.94rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.5;
}

.theme-dark .quiz-statement-text[b-o4iaeamn1i] {
    color: #f1f5f9;
}

.quiz-statement-text.mc-text[b-o4iaeamn1i] {
    font-weight: 700;
}

.quiz-options[b-o4iaeamn1i] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 10px;
}

.quiz-option[b-o4iaeamn1i] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-radius: 8px;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 600;
    color: #334155;
    transition: all 0.15s ease;
}

.theme-dark .quiz-option[b-o4iaeamn1i] {
    background: #0f172a;
    border-color: #334155;
    color: #cbd5e1;
}

.quiz-option:hover[b-o4iaeamn1i] {
    background: #f0f9ff;
    border-color: #bae6fd;
    color: #0284c7;
}

.quiz-option.selected[b-o4iaeamn1i] {
    background: #f0f9ff;
    border-color: #0284c7;
    color: #0284c7;
    font-weight: 700;
    box-shadow: 0 0 0 2.5px rgba(2, 132, 199, 0.12);
}

.theme-dark .quiz-option.selected[b-o4iaeamn1i] {
    background: #082f49;
    color: #38bdf8;
    border-color: #0284c7;
}

.quiz-option.opt-correct[b-o4iaeamn1i] {
    background: #f0fdf4 !important;
    border-color: #86efac !important;
    color: #166534 !important;
}

.theme-dark .quiz-option.opt-correct[b-o4iaeamn1i] {
    background: #14532d !important;
    color: #86efac !important;
}

.quiz-option.opt-wrong[b-o4iaeamn1i] {
    background: #fef2f2 !important;
    border-color: #fecaca !important;
    color: #991b1b !important;
}

.theme-dark .quiz-option.opt-wrong[b-o4iaeamn1i] {
    background: #7f1d1d !important;
    color: #fca5a5 !important;
}

.opt-indicator[b-o4iaeamn1i] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.74rem;
    flex-shrink: 0;
}

.theme-dark .opt-indicator[b-o4iaeamn1i] {
    background: #1e293b;
    border-color: #475569;
}

.quiz-explanation[b-o4iaeamn1i] {
    margin-top: 12px;
    padding: 10px 14px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    font-size: 0.86rem;
    color: #166534;
    line-height: 1.5;
}

.theme-dark .quiz-explanation[b-o4iaeamn1i] {
    background: rgba(22, 101, 52, 0.2);
    border-color: rgba(34, 197, 94, 0.3);
    color: #86efac;
}

.quiz-explanation .expl-head[b-o4iaeamn1i] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    margin-bottom: 4px;
    color: #15803d;
}

.theme-dark .quiz-explanation .expl-head[b-o4iaeamn1i] {
    color: #4ade80;
}

.quiz-explanation .expl-body[b-o4iaeamn1i] {
    margin: 0;
}

.btn-submit-quiz[b-o4iaeamn1i] {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff;
    border: none;
    padding: 14px 32px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 16px rgba(2, 132, 199, 0.3);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    margin: 20px auto 0;
    display: flex;
}

.btn-submit-quiz:hover:not(:disabled)[b-o4iaeamn1i] {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(2, 132, 199, 0.4);
}

.quiz-result-summary[b-o4iaeamn1i] {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    padding: 20px 24px;
    border-radius: 16px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.theme-dark .quiz-result-summary[b-o4iaeamn1i] {
    background: #1e293b;
    border-color: #334155;
}

.score-circle[b-o4iaeamn1i] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #0284c7;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
}

.score-num[b-o4iaeamn1i] {
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1;
}

.score-label[b-o4iaeamn1i] {
    font-size: 0.65rem;
    text-transform: uppercase;
    font-weight: 700;
}

.score-details h4[b-o4iaeamn1i] {
    margin: 0 0 4px 0;
    font-size: 1.15rem;
    font-weight: 800;
}

.score-details p[b-o4iaeamn1i] {
    margin: 0;
    font-size: 0.9rem;
    color: #64748b;
}

.theme-dark .score-details p[b-o4iaeamn1i] {
    color: #94a3b8;
}

/* Target Vocab Recap Card Grid */
.target-vocab-recap[b-o4iaeamn1i] {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 20px;
    padding: 28px;
    margin-top: 36px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.theme-paper .target-vocab-recap[b-o4iaeamn1i] {
    background: #ffffff;
    border-color: #e6dfcf;
}

.theme-dark .target-vocab-recap[b-o4iaeamn1i] {
    background: #1e293b;
    border-color: #334155;
}

.recap-header[b-o4iaeamn1i] {
    margin-bottom: 20px;
}

.recap-header h3[b-o4iaeamn1i] {
    margin: 0 0 4px 0;
    font-size: 1.25rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
}

.recap-header p[b-o4iaeamn1i] {
    margin: 0;
    font-size: 0.88rem;
    color: #64748b;
}

.recap-filter-bar[b-o4iaeamn1i] {
    display: flex;
    gap: 8px;
    margin: 14px 0 18px 0;
    flex-wrap: wrap;
}

.recap-filter-chip[b-o4iaeamn1i] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
}

.theme-dark .recap-filter-chip[b-o4iaeamn1i] {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}

.recap-filter-chip:hover[b-o4iaeamn1i] {
    background: #f1f5f9;
    color: #0f172a;
}

.theme-dark .recap-filter-chip:hover[b-o4iaeamn1i] {
    background: #334155;
    color: #f8fafc;
}

.recap-filter-chip.active[b-o4iaeamn1i] {
    background: #0284c7;
    color: #ffffff;
    border-color: #0284c7;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.25);
}

.recap-vocab-grid[b-o4iaeamn1i] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.recap-vocab-item[b-o4iaeamn1i] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.theme-dark .recap-vocab-item[b-o4iaeamn1i] {
    background: #0f172a;
    border-color: #334155;
}

.recap-vocab-item:hover[b-o4iaeamn1i] {
    background: #f0f9ff;
    border-color: #7dd3fc;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(2, 132, 199, 0.12);
}

.recap-vocab-header[b-o4iaeamn1i] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 6px;
}

.recap-word-group[b-o4iaeamn1i] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.recap-word[b-o4iaeamn1i] {
    font-weight: 800;
    font-size: 1.15rem;
    color: #0284c7;
    word-break: break-word;
    line-height: 1.3;
}

.recap-actions[b-o4iaeamn1i] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.recap-icon-btn[b-o4iaeamn1i] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.recap-icon-btn.locate-btn[b-o4iaeamn1i] {
    color: #0284c7;
}

.recap-icon-btn.locate-btn:hover[b-o4iaeamn1i] {
    background: #e0f2fe;
    color: #0369a1;
    border-color: #bae6fd;
    transform: scale(1.15);
}

.theme-dark .recap-icon-btn[b-o4iaeamn1i] {
    background: #334155;
    color: #94a3b8;
}

.recap-icon-btn:hover[b-o4iaeamn1i] {
    background: #e0f2fe;
    color: #0284c7;
    transform: scale(1.15);
}

.theme-dark .recap-icon-btn:hover[b-o4iaeamn1i] {
    background: #0369a1;
    color: #ffffff;
}

.recap-icon-btn.is-saved[b-o4iaeamn1i] {
    background: #e0f2fe;
    color: #0284c7;
}

.recap-meta-row[b-o4iaeamn1i] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.recap-pos[b-o4iaeamn1i] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 6px;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.pos-verb[b-o4iaeamn1i] {
    background: #eff6ff;
    color: #2563eb;
}

.pos-noun[b-o4iaeamn1i] {
    background: #f0fdf4;
    color: #16a34a;
}

.pos-adj[b-o4iaeamn1i] {
    background: #fefce8;
    color: #ca8a04;
}

.pos-adv[b-o4iaeamn1i] {
    background: #faf5ff;
    color: #9333ea;
}

.pos-other[b-o4iaeamn1i] {
    background: #f1f5f9;
    color: #64748b;
}

.theme-dark .pos-verb[b-o4iaeamn1i] { background: #1e3a8a; color: #93c5fd; }
.theme-dark .pos-noun[b-o4iaeamn1i] { background: #14532d; color: #86efac; }
.theme-dark .pos-adj[b-o4iaeamn1i] { background: #713f12; color: #fde047; }
.theme-dark .pos-adv[b-o4iaeamn1i] { background: #581c87; color: #d8b4fe; }
.theme-dark .pos-other[b-o4iaeamn1i] { background: #334155; color: #cbd5e1; }

.recap-phonetic[b-o4iaeamn1i] {
    font-family: Consolas, Monaco, monospace;
    font-size: 0.82rem;
    color: #94a3b8;
    line-height: 1.2;
}

.recap-meaning[b-o4iaeamn1i] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #334155;
    line-height: 1.45;
    flex-grow: 1;
}

.theme-dark .recap-meaning[b-o4iaeamn1i] {
    color: #cbd5e1;
}

.recap-synonyms[b-o4iaeamn1i] {
    font-size: 0.8rem;
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fde68a;
    padding: 4px 8px;
    border-radius: 8px;
    margin-top: 6px;
    line-height: 1.35;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.theme-dark .recap-synonyms[b-o4iaeamn1i] {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.3);
    color: #fcd34d;
}

.recap-example[b-o4iaeamn1i] {
    font-size: 0.78rem;
    color: #64748b;
    font-style: italic;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px dashed #e2e8f0;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.theme-dark .recap-example[b-o4iaeamn1i] {
    border-color: #334155;
    color: #94a3b8;
}

.recap-collocations[b-o4iaeamn1i] {
    font-size: 0.74rem;
    color: #0284c7;
    margin-top: 6px;
    font-weight: 600;
}

/* Spinner */
.custom-spinner[b-o4iaeamn1i] {
    width: 36px;
    height: 36px;
    border: 3px solid #e2e8f0;
    border-top-color: #0284c7;
    border-radius: 50%;
    margin: 0 auto;
    animation: spin-b-o4iaeamn1i 0.8s linear infinite;
}

.mini-spinner[b-o4iaeamn1i] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #ffffff;
    border-radius: 50%;
    display: inline-block;
    animation: spin-b-o4iaeamn1i 0.8s linear infinite;
}

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

.reader-loading[b-o4iaeamn1i], .reader-error[b-o4iaeamn1i] {
    text-align: center;
    padding: 100px 20px;
}

/* Progress Bar */
.reading-progress-track[b-o4iaeamn1i] {
    position: sticky;
    top: 64px;
    z-index: 99;
    width: 100%;
    height: 4px;
    background: rgba(226, 232, 240, 0.5);
}

.theme-dark .reading-progress-track[b-o4iaeamn1i] {
    background: rgba(30, 41, 59, 0.6);
}

.reading-progress-bar[b-o4iaeamn1i] {
    height: 100%;
    background: linear-gradient(90deg, #0284c7, #38bdf8);
    transition: width 0.15s ease-out;
}

/* Toast Notification */
.story-toast-notification[b-o4iaeamn1i] {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
    background: #0f172a;
    color: #f8fafc;
    padding: 12px 20px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.92rem;
    font-weight: 600;
    animation: toastSlideUp-b-o4iaeamn1i 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes toastSlideUp-b-o4iaeamn1i {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Active sentence reading highlight */
.paragraph-block.is-active-reading[b-o4iaeamn1i] {
    border-left: 4px solid #0284c7 !important;
    background: rgba(2, 132, 199, 0.06);
    border-radius: 0 12px 12px 0;
    padding-left: 16px;
    transition: all 0.2s ease;
}

.theme-paper .paragraph-block.is-active-reading[b-o4iaeamn1i] {
    background: rgba(217, 119, 6, 0.08);
    border-left-color: #d97706 !important;
}

.theme-dark .paragraph-block.is-active-reading[b-o4iaeamn1i] {
    background: rgba(56, 189, 248, 0.1);
    border-left-color: #38bdf8 !important;
}

/* Soundwave animation inside speaker button */
.soundwave-anim[b-o4iaeamn1i] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 4px;
    height: 14px;
}

.soundwave-anim span[b-o4iaeamn1i] {
    display: block;
    width: 2px;
    background: #ef4444;
    border-radius: 1px;
    animation: waveBounce-b-o4iaeamn1i 0.8s infinite ease-in-out alternate;
}

.soundwave-anim span:nth-child(2)[b-o4iaeamn1i] {
    animation-delay: 0.2s;
}

.soundwave-anim span:nth-child(3)[b-o4iaeamn1i] {
    animation-delay: 0.4s;
}

@keyframes waveBounce-b-o4iaeamn1i {
    0% { height: 4px; }
    100% { height: 14px; }
}

/* Readable interactive words */
.readable-word[b-o4iaeamn1i] {
    cursor: pointer;
    border-radius: 3px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.readable-word:hover[b-o4iaeamn1i] {
    background-color: rgba(2, 132, 199, 0.14);
    color: #0284c7;
}

.theme-paper .readable-word:hover[b-o4iaeamn1i] {
    background-color: rgba(180, 83, 9, 0.14);
    color: #b45309;
}

.theme-dark .readable-word:hover[b-o4iaeamn1i] {
    background-color: rgba(56, 189, 248, 0.2);
    color: #38bdf8;
}

/* Cambridge Dict button in popup */
.btn-cambridge-dict[b-o4iaeamn1i] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    color: #475569;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-cambridge-dict:hover[b-o4iaeamn1i] {
    background: #e2e8f0;
    color: #0f172a;
}

/* ========================================================
   IELTS Computer-Based Split View Layout
   ======================================================== */
.ielts-split-view[b-o4iaeamn1i] {
    display: flex;
    height: calc(100vh - 120px);
    min-height: 650px;
    position: relative;
    background: #ffffff;
    border-bottom: 2px solid #e2e8f0;
    overflow: hidden;
}

.theme-paper .ielts-split-view[b-o4iaeamn1i] {
    background: #fdfbf7;
    border-bottom-color: #f1e9dc;
}

.theme-dark .ielts-split-view[b-o4iaeamn1i] {
    background: #0b1329;
    border-bottom-color: #1e293b;
}

/* Left Pane: Reading Passage (Independent Scroll) */
.ielts-passage-pane[b-o4iaeamn1i] {
    flex: 1 1 52%;
    width: 52%;
    height: 100%;
    overflow-y: auto;
    padding: 28px 36px 80px 36px;
    box-sizing: border-box;
}

/* Split Divider */
.ielts-split-divider[b-o4iaeamn1i] {
    width: 6px;
    height: 100%;
    background: #e2e8f0;
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-paper .ielts-split-divider[b-o4iaeamn1i] {
    background: #e7dfd1;
}

.theme-dark .ielts-split-divider[b-o4iaeamn1i] {
    background: #1e293b;
}

.divider-handle[b-o4iaeamn1i] {
    width: 2px;
    height: 36px;
    background: #94a3b8;
    border-radius: 2px;
}

/* Right Pane: Questions (Independent Scroll) */
.ielts-questions-pane[b-o4iaeamn1i] {
    flex: 1 1 48%;
    width: 48%;
    height: 100%;
    overflow-y: auto;
    padding: 28px 32px 80px 32px;
    background: #f8fafc;
    box-sizing: border-box;
}

.theme-paper .ielts-questions-pane[b-o4iaeamn1i] {
    background: #f9f6ef;
}

.theme-dark .ielts-questions-pane[b-o4iaeamn1i] {
    background: #0f172a;
}

/* Custom Slim Scrollbars for Independent Scrolling (Liquid Water Droplet) */
.ielts-passage-pane[b-o4iaeamn1i]::-webkit-scrollbar,
.ielts-questions-pane[b-o4iaeamn1i]::-webkit-scrollbar {
    width: 7px;
}

.ielts-passage-pane[b-o4iaeamn1i]::-webkit-scrollbar-track,
.ielts-questions-pane[b-o4iaeamn1i]::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 9999px;
}

.ielts-passage-pane[b-o4iaeamn1i]::-webkit-scrollbar-thumb,
.ielts-questions-pane[b-o4iaeamn1i]::-webkit-scrollbar-thumb {
    background: var(--water-drop-thumb);
    border-radius: 9999px;
    box-shadow: var(--water-drop-shadow);
}

.ielts-passage-pane[b-o4iaeamn1i]::-webkit-scrollbar-thumb:hover,
.ielts-questions-pane[b-o4iaeamn1i]::-webkit-scrollbar-thumb:hover {
    background: var(--water-drop-hover);
    box-shadow: var(--water-drop-hover-shadow);
}

/* Questions Pane Header */
.questions-pane-header[b-o4iaeamn1i] {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
}

.theme-paper .questions-pane-header[b-o4iaeamn1i] {
    border-bottom-color: #e6dfcf;
}

.theme-dark .questions-pane-header[b-o4iaeamn1i] {
    border-bottom-color: #1e293b;
}

.header-badge-row[b-o4iaeamn1i] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.reading-exam-tag[b-o4iaeamn1i] {
    background: #0284c7;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 3px 9px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.questions-total-pill[b-o4iaeamn1i] {
    background: #e2e8f0;
    color: #475569;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 5px;
}

.theme-dark .questions-total-pill[b-o4iaeamn1i] {
    background: #1e293b;
    color: #94a3b8;
}

.pane-title[b-o4iaeamn1i] {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 4px 0;
    letter-spacing: -0.01em;
}

.theme-dark .pane-title[b-o4iaeamn1i] {
    color: #f8fafc;
}

.pane-subtitle[b-o4iaeamn1i] {
    font-size: 0.84rem;
    color: #64748b;
    margin: 0;
}

.theme-dark .pane-subtitle[b-o4iaeamn1i] {
    color: #94a3b8;
}

/* ========================================================
   IELTS Section Group Banners (Part 1 & Part 2)
   ======================================================== */
.ielts-group-section[b-o4iaeamn1i] {
    margin-bottom: 20px;
}

.ielts-group-banner[b-o4iaeamn1i] {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.ielts-group-banner.mc-banner[b-o4iaeamn1i] {
    background: #fafafa;
    border-color: #e5e7eb;
}

.theme-paper .ielts-group-banner[b-o4iaeamn1i] {
    background: #faf6ed;
    border-color: #e6dfcf;
}

.theme-dark .ielts-group-banner[b-o4iaeamn1i] {
    background: #1e293b;
    border-color: #334155;
}

.group-banner-top[b-o4iaeamn1i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.group-banner-tag[b-o4iaeamn1i] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.part-pill[b-o4iaeamn1i] {
    background: #0f172a;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.part-pill.mc[b-o4iaeamn1i] {
    background: #334155;
}

.theme-dark .part-pill[b-o4iaeamn1i] {
    background: #38bdf8;
    color: #082f49;
}

.range-pill[b-o4iaeamn1i] {
    font-size: 0.86rem;
    font-weight: 700;
    color: #1e293b;
}

.theme-dark .range-pill[b-o4iaeamn1i] {
    color: #f1f5f9;
}

.type-pill[b-o4iaeamn1i] {
    font-size: 0.7rem;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.type-pill.tfng[b-o4iaeamn1i] {
    background: #eff6ff;
    color: #0284c7;
    border: 1px solid #bae6fd;
}

.type-pill.mc[b-o4iaeamn1i] {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.theme-dark .type-pill.tfng[b-o4iaeamn1i] {
    background: #082f49;
    color: #38bdf8;
    border-color: #0369a1;
}

.theme-dark .type-pill.mc[b-o4iaeamn1i] {
    background: #0f172a;
    color: #94a3b8;
    border-color: #334155;
}

.group-instruction-box .instruction-main[b-o4iaeamn1i] {
    font-size: 0.86rem;
    font-weight: 600;
    color: #334155;
    margin: 0 0 8px 0;
    line-height: 1.45;
}

.theme-dark .group-instruction-box .instruction-main[b-o4iaeamn1i] {
    color: #cbd5e1;
}

.instruction-rules-grid[b-o4iaeamn1i] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rule-chip[b-o4iaeamn1i] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: #64748b;
}

.theme-dark .rule-chip[b-o4iaeamn1i] {
    color: #94a3b8;
}

.rule-chip .chip-true[b-o4iaeamn1i] {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 800;
    font-size: 0.72rem;
    min-width: 52px;
    text-align: center;
}

.rule-chip .chip-false[b-o4iaeamn1i] {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 800;
    font-size: 0.72rem;
    min-width: 52px;
    text-align: center;
}

.rule-chip .chip-ng[b-o4iaeamn1i] {
    background: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 800;
    font-size: 0.72rem;
    min-width: 80px;
    text-align: center;
}

.theme-dark .rule-chip .chip-true[b-o4iaeamn1i] {
    background: #064e3b;
    color: #6ee7b7;
    border-color: #047857;
}

.theme-dark .rule-chip .chip-false[b-o4iaeamn1i] {
    background: #7f1d1d;
    color: #fca5a5;
    border-color: #991b1b;
}

.theme-dark .rule-chip .chip-ng[b-o4iaeamn1i] {
    background: #0f172a;
    color: #94a3b8;
    border-color: #334155;
}

/* ========================================================
   IELTS True / False / Not Given Segmented Buttons
   ======================================================== */
.tfng-button-group[b-o4iaeamn1i] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 10px;
}

.tfng-chip[b-o4iaeamn1i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 0.82rem;
    letter-spacing: 0.3px;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.chip-icon[b-o4iaeamn1i] {
    font-size: 0.85rem;
}

.theme-dark .tfng-chip[b-o4iaeamn1i] {
    background: #0f172a;
    border-color: #334155;
    color: #cbd5e1;
}

.tfng-chip:hover[b-o4iaeamn1i] {
    background: #ffffff;
    border-color: #0284c7;
    color: #0284c7;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.1);
}

.theme-dark .tfng-chip:hover[b-o4iaeamn1i] {
    background: #1e293b;
    border-color: #38bdf8;
    color: #38bdf8;
}

.tfng-chip.selected[b-o4iaeamn1i] {
    border-color: #0284c7;
    background: #f0f9ff;
    color: #0284c7;
    font-weight: 800;
    box-shadow: 0 0 0 2.5px rgba(2, 132, 199, 0.15);
}

.theme-dark .tfng-chip.selected[b-o4iaeamn1i] {
    background: #082f49;
    color: #38bdf8;
    border-color: #0284c7;
}

.tfng-chip.opt-correct[b-o4iaeamn1i] {
    border-color: #16a34a !important;
    background: #f0fdf4 !important;
    color: #16a34a !important;
    font-weight: 800;
}

.theme-dark .tfng-chip.opt-correct[b-o4iaeamn1i] {
    background: #14532d !important;
    color: #86efac !important;
    border-color: #22c55e !important;
}

.tfng-chip.opt-wrong[b-o4iaeamn1i] {
    border-color: #dc2626 !important;
    background: #fef2f2 !important;
    color: #dc2626 !important;
    text-decoration: line-through;
}

.theme-dark .tfng-chip.opt-wrong[b-o4iaeamn1i] {
    background: #7f1d1d !important;
    color: #fca5a5 !important;
    border-color: #ef4444 !important;
}

/* Bottom Vocabulary Section */
.ielts-bottom-vocab-section[b-o4iaeamn1i] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 32px 80px 32px;
}

/* Responsive Tablets and Mobile (< 992px) */
@media (max-width: 991px) {
    .ielts-split-view[b-o4iaeamn1i] {
        flex-direction: column;
        height: auto;
        min-height: auto;
        overflow: visible;
    }

    .ielts-passage-pane[b-o4iaeamn1i],
    .ielts-questions-pane[b-o4iaeamn1i] {
        width: 100%;
        flex: none;
        height: auto;
        overflow: visible;
        padding: 24px 16px;
    }

    .ielts-split-divider[b-o4iaeamn1i] {
        width: 100%;
        height: 6px;
    }

    .divider-handle[b-o4iaeamn1i] {
        width: 36px;
        height: 2px;
    }

    .ielts-bottom-vocab-section[b-o4iaeamn1i] {
        padding: 30px 16px 60px 16px;
    }
}

/* ========================================================================= */
/* READER INDEPENDENT VIEWPORT THEMES (KINDLE / APPLE BOOKS STANDARD)         */
/* ========================================================================= */

/* --- 1. DARK THEME --- */
.story-reader-wrapper.theme-dark[b-o4iaeamn1i] {
    background-color: #0b1325 !important;
    color: #f8fafc !important;
}

.story-reader-wrapper.theme-dark .reader-topbar[b-o4iaeamn1i] {
    background: rgba(17, 29, 51, 0.94) !important;
    border-bottom-color: #223554 !important;
}

.story-reader-wrapper.theme-dark .ielts-passage-pane[b-o4iaeamn1i] {
    background-color: #0b1325 !important;
    color: #f8fafc !important;
}

.story-reader-wrapper.theme-dark .ielts-split-view[b-o4iaeamn1i] {
    background: #0b1325 !important;
    border-bottom-color: #223554 !important;
}

.story-reader-wrapper.theme-dark .ielts-split-divider[b-o4iaeamn1i] {
    background: #223554 !important;
}

.story-reader-wrapper.theme-dark .ielts-questions-pane[b-o4iaeamn1i] {
    background: #0f172a !important;
    color: #f8fafc !important;
}

.story-reader-wrapper.theme-dark .story-main-title[b-o4iaeamn1i],
.story-reader-wrapper.theme-dark .pane-title[b-o4iaeamn1i] {
    color: #f8fafc !important;
}

.story-reader-wrapper.theme-dark .pane-subtitle[b-o4iaeamn1i] {
    color: #94a3b8 !important;
}

.story-reader-wrapper.theme-dark .paragraph-en[b-o4iaeamn1i] {
    color: #e2e8f0 !important;
}

.story-reader-wrapper.theme-dark .story-summary-box[b-o4iaeamn1i] {
    background: #111d33 !important;
    border-color: #223554 !important;
    border-left-color: #38bdf8 !important;
    color: #cbd5e1 !important;
}

.story-reader-wrapper.theme-dark .story-lead-summary[b-o4iaeamn1i] {
    color: #cbd5e1 !important;
}

.story-reader-wrapper.theme-dark .reading-guide-pill[b-o4iaeamn1i] {
    background: #111d33 !important;
    border-color: #223554 !important;
    color: #cbd5e1 !important;
}

.story-reader-wrapper.theme-dark .ielts-group-banner[b-o4iaeamn1i] {
    background: #15243f !important;
    border-color: #223554 !important;
    color: #f8fafc !important;
}

.story-reader-wrapper.theme-dark .range-pill[b-o4iaeamn1i] {
    color: #f8fafc !important;
}

.story-reader-wrapper.theme-dark .quiz-card[b-o4iaeamn1i] {
    background: #15243f !important;
    border-color: #223554 !important;
    color: #f8fafc !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

.story-reader-wrapper.theme-dark .quiz-statement-text[b-o4iaeamn1i] {
    color: #f1f5f9 !important;
}

.story-reader-wrapper.theme-dark .paragraph-block[b-o4iaeamn1i] {
    background: #15243f !important;
    border-color: #223554 !important;
    color: #f8fafc !important;
}

.story-reader-wrapper.theme-dark .tfng-chip[b-o4iaeamn1i] {
    background: #111d33 !important;
    border-color: #223554 !important;
    color: #cbd5e1 !important;
}

.story-reader-wrapper.theme-dark .tfng-chip:hover[b-o4iaeamn1i] {
    border-color: #38bdf8 !important;
    color: #38bdf8 !important;
}

.story-reader-wrapper.theme-dark .gap-input[b-o4iaeamn1i] {
    background: #111d33 !important;
    border-color: #223554 !important;
    color: #f8fafc !important;
}

.story-reader-wrapper.theme-dark .recap-vocab-item[b-o4iaeamn1i] {
    background: #15243f !important;
    border-color: #223554 !important;
    color: #f8fafc !important;
}

.story-reader-wrapper.theme-dark .recap-word[b-o4iaeamn1i] {
    color: #f8fafc !important;
}

.story-reader-wrapper.theme-dark .recap-meaning[b-o4iaeamn1i] {
    color: #cbd5e1 !important;
}

.story-reader-wrapper.theme-dark .vocab-popup-card[b-o4iaeamn1i] {
    background: #15243f !important;
    border-color: #223554 !important;
    color: #f8fafc !important;
}

.story-reader-wrapper.theme-dark .vocab-popup-header[b-o4iaeamn1i] {
    border-bottom-color: #223554 !important;
}

.story-reader-wrapper.theme-dark .vocab-word-large[b-o4iaeamn1i] {
    color: #f8fafc !important;
}

.story-reader-wrapper.theme-dark .vocab-meaning-text[b-o4iaeamn1i] {
    color: #cbd5e1 !important;
}


/* --- 2. SEPIA PAPER THEME --- */
.story-reader-wrapper.theme-paper[b-o4iaeamn1i] {
    background-color: #fbf7ee !important;
    color: #2c251e !important;
}

.story-reader-wrapper.theme-paper .reader-topbar[b-o4iaeamn1i] {
    background: rgba(251, 247, 238, 0.95) !important;
    border-bottom-color: rgba(217, 206, 184, 0.8) !important;
}

.story-reader-wrapper.theme-paper .btn-back[b-o4iaeamn1i] {
    background: #fef3c7 !important;
    border-color: #fde68a !important;
    color: #b45309 !important;
}

.story-reader-wrapper.theme-paper .btn-back:hover[b-o4iaeamn1i] {
    background: #fde68a !important;
    color: #92400e !important;
}

.story-reader-wrapper.theme-paper .topbar-divider[b-o4iaeamn1i] {
    color: #d9ceb8 !important;
}

.story-reader-wrapper.theme-paper .story-category-tag[b-o4iaeamn1i] {
    color: #786450 !important;
}

.story-reader-wrapper.theme-paper .ctrl-btn[b-o4iaeamn1i],
.story-reader-wrapper.theme-paper .ctrl-btn-icon[b-o4iaeamn1i],
.story-reader-wrapper.theme-paper .speed-select[b-o4iaeamn1i] {
    background: #fbf7ee !important;
    border-color: #d9ceb8 !important;
    color: #451a03 !important;
}

.story-reader-wrapper.theme-paper .ctrl-btn:hover[b-o4iaeamn1i],
.story-reader-wrapper.theme-paper .ctrl-btn-icon:hover[b-o4iaeamn1i] {
    background: #f5eedc !important;
    border-color: #d97706 !important;
    color: #d97706 !important;
}

.story-reader-wrapper.theme-paper .ctrl-btn.active[b-o4iaeamn1i] {
    background: #d97706 !important;
    border-color: #d97706 !important;
    color: #ffffff !important;
}

.story-reader-wrapper.theme-paper .theme-switcher[b-o4iaeamn1i] {
    background: #f4ecdc !important;
    border-color: #d9ceb8 !important;
}

.story-reader-wrapper.theme-paper .theme-dot.active[b-o4iaeamn1i] {
    box-shadow: 0 0 0 2px #d97706 !important;
}

.story-reader-wrapper.theme-paper .ielts-passage-pane[b-o4iaeamn1i] {
    background-color: #fbf7ee !important;
    color: #2c251e !important;
}

.story-reader-wrapper.theme-paper .ielts-split-view[b-o4iaeamn1i] {
    background: #fdfbf7 !important;
    border-bottom-color: #f1e9dc !important;
}

.story-reader-wrapper.theme-paper .ielts-split-divider[b-o4iaeamn1i] {
    background: #e7dfd1 !important;
}

.story-reader-wrapper.theme-paper .ielts-questions-pane[b-o4iaeamn1i] {
    background: #f9f6ef !important;
    color: #2c251e !important;
}

.story-reader-wrapper.theme-paper .story-main-title[b-o4iaeamn1i],
.story-reader-wrapper.theme-paper .pane-title[b-o4iaeamn1i] {
    color: #2c251e !important;
}

.story-reader-wrapper.theme-paper .pane-subtitle[b-o4iaeamn1i] {
    color: #786450 !important;
}

.story-reader-wrapper.theme-paper .paragraph-en[b-o4iaeamn1i] {
    color: #2c251e !important;
}

.story-reader-wrapper.theme-paper .paragraph-block[b-o4iaeamn1i] {
    background: transparent !important;
    border-color: transparent !important;
    color: #2c251e !important;
}

.story-reader-wrapper.theme-paper .paragraph-block:hover[b-o4iaeamn1i] {
    background: rgba(0, 0, 0, 0.03) !important;
    border-left-color: #d97706 !important;
}

.story-reader-wrapper.theme-paper .paragraph-block.is-active-reading[b-o4iaeamn1i] {
    background: rgba(217, 119, 6, 0.08) !important;
    border-left-color: #d97706 !important;
}

.story-reader-wrapper.theme-paper .story-summary-box[b-o4iaeamn1i] {
    background: #f5eedc !important;
    border-color: #e6dfcf !important;
    border-left: 4px solid #d97706 !important;
    color: #451a03 !important;
}

.story-reader-wrapper.theme-paper .story-lead-summary[b-o4iaeamn1i] {
    color: #451a03 !important;
}

.story-reader-wrapper.theme-paper .reading-guide-pill[b-o4iaeamn1i] {
    background: #fef3c7 !important;
    border-color: #fde68a !important;
    color: #92400e !important;
}

.story-reader-wrapper.theme-paper .ielts-group-banner[b-o4iaeamn1i] {
    background: #faf6ed !important;
    border-color: #e6dfcf !important;
    color: #2c251e !important;
}

.story-reader-wrapper.theme-paper .quiz-card[b-o4iaeamn1i] {
    background: #ffffff !important;
    border-color: #e6dfcf !important;
    color: #2c251e !important;
    box-shadow: 0 4px 16px rgba(44, 37, 30, 0.05) !important;
}

.story-reader-wrapper.theme-paper .quiz-statement-text[b-o4iaeamn1i] {
    color: #2c251e !important;
}

.story-reader-wrapper.theme-paper .tfng-chip[b-o4iaeamn1i] {
    background: #fdfbf7 !important;
    border-color: #d9ceb8 !important;
    color: #451a03 !important;
}

.story-reader-wrapper.theme-paper .tfng-chip:hover[b-o4iaeamn1i] {
    border-color: #d97706 !important;
    color: #d97706 !important;
}

.story-reader-wrapper.theme-paper .tfng-chip.selected[b-o4iaeamn1i] {
    background: #fef3c7 !important;
    border-color: #d97706 !important;
    color: #b45309 !important;
}

.story-reader-wrapper.theme-paper .quiz-option[b-o4iaeamn1i] {
    background: #fdfbf7 !important;
    border-color: #e6dfcf !important;
    color: #451a03 !important;
}

.story-reader-wrapper.theme-paper .quiz-option:hover[b-o4iaeamn1i] {
    background: #fcf4e6 !important;
    border-color: #d97706 !important;
    color: #d97706 !important;
}

.story-reader-wrapper.theme-paper .quiz-option.selected[b-o4iaeamn1i] {
    background: #fef3c7 !important;
    border-color: #d97706 !important;
    color: #b45309 !important;
}

.story-reader-wrapper.theme-paper .gap-input[b-o4iaeamn1i] {
    background: #ffffff !important;
    border-color: #d9ceb8 !important;
    color: #2c251e !important;
}

.story-reader-wrapper.theme-paper .recap-filter-chip[b-o4iaeamn1i] {
    background: #fdfbf7 !important;
    border-color: #e6dfcf !important;
    color: #451a03 !important;
}

.story-reader-wrapper.theme-paper .recap-filter-chip:hover[b-o4iaeamn1i] {
    background: #fcf4e6 !important;
    border-color: #d97706 !important;
    color: #d97706 !important;
}

.story-reader-wrapper.theme-paper .recap-filter-chip.active[b-o4iaeamn1i] {
    background: #d97706 !important;
    border-color: #d97706 !important;
    color: #ffffff !important;
}

.story-reader-wrapper.theme-paper .recap-vocab-item[b-o4iaeamn1i] {
    background: #ffffff !important;
    border-color: #e6dfcf !important;
    color: #2c251e !important;
}

.story-reader-wrapper.theme-paper .recap-word[b-o4iaeamn1i] {
    color: #2c251e !important;
}

.story-reader-wrapper.theme-paper .recap-meaning[b-o4iaeamn1i] {
    color: #451a03 !important;
}

.story-reader-wrapper.theme-paper .vocab-popup-card[b-o4iaeamn1i] {
    background: #fdfbf7 !important;
    border-color: #e6dfcf !important;
    color: #2c251e !important;
}

.story-reader-wrapper.theme-paper .vocab-popup-header[b-o4iaeamn1i] {
    border-bottom-color: #e6dfcf !important;
}

.story-reader-wrapper.theme-paper .vocab-word-large[b-o4iaeamn1i] {
    color: #2c251e !important;
}

.story-reader-wrapper.theme-paper .vocab-meaning-text[b-o4iaeamn1i] {
    color: #451a03 !important;
}


/* --- 3. LIGHT THEME --- */
.story-reader-wrapper.theme-light[b-o4iaeamn1i] {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

.story-reader-wrapper.theme-light .reader-topbar[b-o4iaeamn1i] {
    background: rgba(255, 255, 255, 0.95) !important;
    border-bottom-color: rgba(226, 232, 240, 0.8) !important;
}

.story-reader-wrapper.theme-light .btn-back[b-o4iaeamn1i] {
    background: #f0f9ff !important;
    border-color: #bae6fd !important;
    color: #0284c7 !important;
}

.story-reader-wrapper.theme-light .topbar-divider[b-o4iaeamn1i] {
    color: #cbd5e1 !important;
}

.story-reader-wrapper.theme-light .story-category-tag[b-o4iaeamn1i] {
    color: #64748b !important;
}

.story-reader-wrapper.theme-light .ctrl-btn[b-o4iaeamn1i],
.story-reader-wrapper.theme-light .ctrl-btn-icon[b-o4iaeamn1i],
.story-reader-wrapper.theme-light .speed-select[b-o4iaeamn1i] {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
}

.story-reader-wrapper.theme-light .ctrl-btn:hover[b-o4iaeamn1i],
.story-reader-wrapper.theme-light .ctrl-btn-icon:hover[b-o4iaeamn1i] {
    background: #f8fafc !important;
    border-color: #0284c7 !important;
    color: #0284c7 !important;
}

.story-reader-wrapper.theme-light .ctrl-btn.active[b-o4iaeamn1i] {
    background: #0284c7 !important;
    border-color: #0284c7 !important;
    color: #ffffff !important;
}

.story-reader-wrapper.theme-light .theme-switcher[b-o4iaeamn1i] {
    background: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
}

.story-reader-wrapper.theme-light .ielts-passage-pane[b-o4iaeamn1i] {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

.story-reader-wrapper.theme-light .ielts-split-view[b-o4iaeamn1i] {
    background: #ffffff !important;
    border-bottom-color: #e2e8f0 !important;
}

.story-reader-wrapper.theme-light .ielts-split-divider[b-o4iaeamn1i] {
    background: #e2e8f0 !important;
}

.story-reader-wrapper.theme-light .ielts-questions-pane[b-o4iaeamn1i] {
    background: #f8fafc !important;
    color: #0f172a !important;
}

.story-reader-wrapper.theme-light .story-main-title[b-o4iaeamn1i],
.story-reader-wrapper.theme-light .pane-title[b-o4iaeamn1i] {
    color: #0f172a !important;
}

.story-reader-wrapper.theme-light .pane-subtitle[b-o4iaeamn1i] {
    color: #64748b !important;
}

.story-reader-wrapper.theme-light .paragraph-en[b-o4iaeamn1i] {
    color: #1e293b !important;
}

.story-reader-wrapper.theme-light .paragraph-block[b-o4iaeamn1i] {
    background: transparent !important;
    border-color: transparent !important;
    color: #0f172a !important;
}

.story-reader-wrapper.theme-light .paragraph-block:hover[b-o4iaeamn1i] {
    background: rgba(2, 132, 199, 0.03) !important;
}

.story-reader-wrapper.theme-light .story-summary-box[b-o4iaeamn1i] {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    border-left: 4px solid #0284c7 !important;
    color: #334155 !important;
}

.story-reader-wrapper.theme-light .story-lead-summary[b-o4iaeamn1i] {
    color: #334155 !important;
}

.story-reader-wrapper.theme-light .reading-guide-pill[b-o4iaeamn1i] {
    background: #f0f9ff !important;
    border-color: #bae6fd !important;
    color: #0369a1 !important;
}

.story-reader-wrapper.theme-light .ielts-group-banner[b-o4iaeamn1i] {
    background: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
}

.story-reader-wrapper.theme-light .quiz-card[b-o4iaeamn1i] {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
}

.story-reader-wrapper.theme-light .quiz-statement-text[b-o4iaeamn1i] {
    color: #0f172a !important;
}

.story-reader-wrapper.theme-light .tfng-chip[b-o4iaeamn1i] {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
}

.story-reader-wrapper.theme-light .gap-input[b-o4iaeamn1i] {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

.story-reader-wrapper.theme-light .recap-vocab-item[b-o4iaeamn1i] {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
}

.story-reader-wrapper.theme-light .recap-word[b-o4iaeamn1i] {
    color: #0f172a !important;
}

.story-reader-wrapper.theme-light .recap-meaning[b-o4iaeamn1i] {
    color: #475569 !important;
}

.story-reader-wrapper.theme-light .vocab-popup-card[b-o4iaeamn1i] {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
}

.story-reader-wrapper.theme-light .vocab-popup-header[b-o4iaeamn1i] {
    border-bottom-color: #f1f5f9 !important;
}

.story-reader-wrapper.theme-light .vocab-word-large[b-o4iaeamn1i] {
    color: #0f172a !important;
}

.story-reader-wrapper.theme-light .vocab-meaning-text[b-o4iaeamn1i] {
    color: #334155 !important;
}

/* /Pages/Ielts/IeltsVocabulary.razor.rz.scp.css */
/* ========================================================================= */
/* IELTS VOCABULARY EXPLORER (MATE&ME REFERENCE STYLE)                        */
/* ========================================================================= */
.ielts-vocab-page[b-d3lw2qnnci] {
    max-width: 1320px;
    margin: 0 auto;
    padding: 24px 24px 70px;
    box-sizing: border-box;
    font-family: 'Be Vietnam Pro', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1e293b;
}

/* Header Card */
.vocab-header-card[b-d3lw2qnnci] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.header-left[b-d3lw2qnnci] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-icon-badge[b-d3lw2qnnci] {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
    flex-shrink: 0;
}

.vocab-title[b-d3lw2qnnci] {
    font-size: 1.7rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.02em;
}

.vocab-subtitle[b-d3lw2qnnci] {
    color: #64748b;
    margin: 3px 0 0;
    font-size: 0.92rem;
}

/* View Mode Toggle */
.view-mode-toggle[b-d3lw2qnnci] {
    display: flex;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 12px;
    gap: 4px;
}

.toggle-btn[b-d3lw2qnnci] {
    border: none;
    background: transparent;
    padding: 8px 14px;
    border-radius: 9px;
    font-size: 0.88rem;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}

.toggle-btn:hover[b-d3lw2qnnci] {
    color: #0f172a;
}

.toggle-btn.active[b-d3lw2qnnci] {
    background: #ffffff;
    color: #0284c7;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Filter Panel Card (Mate&Me Filter Bar) */
.filter-panel-card[b-d3lw2qnnci] {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 18px;
    padding: 16px 20px;
    margin-bottom: 22px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.filter-top-row[b-d3lw2qnnci] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.search-input-group[b-d3lw2qnnci] {
    position: relative;
    flex: 1;
    min-width: 280px;
    max-width: 460px;
    box-sizing: border-box;
}

.search-icon[b-d3lw2qnnci] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #0284c7;
    font-size: 0.95rem;
    pointer-events: none;
}

.search-input-group input[b-d3lw2qnnci] {
    width: 100%;
    padding: 10px 38px 10px 38px;
    border-radius: 12px;
    border: 1.5px solid #cbd5e1;
    font-size: 0.92rem;
    background: #ffffff;
    color: #0f172a;
    outline: none;
    box-sizing: border-box;
    transition: all 0.2s;
}

.search-input-group input:focus[b-d3lw2qnnci] {
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.btn-clear-search[b-d3lw2qnnci] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 0;
    font-size: 1rem;
}

.btn-clear-search:hover[b-d3lw2qnnci] {
    color: #0f172a;
}

.filter-dropdowns[b-d3lw2qnnci] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.dropdown-wrapper select[b-d3lw2qnnci] {
    padding: 9px 14px;
    border-radius: 11px;
    border: 1.5px solid #cbd5e1;
    font-size: 0.9rem;
    font-weight: 600;
    color: #334155;
    background: #ffffff;
    cursor: pointer;
    outline: none;
    transition: all 0.2s;
}

.dropdown-wrapper select:focus[b-d3lw2qnnci] {
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.filter-toggles[b-d3lw2qnnci] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.toggle-checkbox[b-d3lw2qnnci] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    padding: 7px 12px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    transition: all 0.15s;
    user-select: none;
}

.toggle-checkbox input[b-d3lw2qnnci] {
    display: none;
}

.toggle-checkbox:hover[b-d3lw2qnnci] {
    background: #f1f5f9;
}

.toggle-checkbox.checked[b-d3lw2qnnci] {
    background: #f0f9ff;
    border-color: #bae6fd;
    color: #0284c7;
}

/* CEFR Level Pills Bar (Mate&Me Style) */
.cefr-pills-bar[b-d3lw2qnnci] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
    flex-wrap: wrap;
}

.pills-list[b-d3lw2qnnci] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cefr-pill[b-d3lw2qnnci] {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    color: #475569;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}

.cefr-pill small[b-d3lw2qnnci] {
    font-size: 0.76rem;
    opacity: 0.75;
    font-weight: 600;
}

.cefr-pill:hover[b-d3lw2qnnci] {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #0f172a;
}

.cefr-pill.active[b-d3lw2qnnci] {
    background: #0284c7;
    border-color: #0284c7;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.28);
}

.match-count-badge[b-d3lw2qnnci] {
    color: #64748b;
    font-size: 0.88rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}

.match-count-badge strong[b-d3lw2qnnci] {
    color: #0284c7;
}

/* Section Banners (Mate&Me Section Header) */
.section-banner[b-d3lw2qnnci] {
    padding: 12px 18px;
    border-radius: 14px 14px 0 0;
    font-size: 0.92rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.featured-banner[b-d3lw2qnnci] {
    background: #fffbeb;
    border: 1.5px solid #fef3c7;
    border-bottom: none;
    color: #92400e;
    margin-top: 10px;
}

.featured-banner .sparkle[b-d3lw2qnnci] {
    font-size: 1.1rem;
    margin-right: 4px;
}

.featured-banner .subtext[b-d3lw2qnnci] {
    font-weight: normal;
    color: #b45309;
    margin-left: 6px;
    font-size: 0.85rem;
}

.master-banner[b-d3lw2qnnci] {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-bottom: none;
    color: #334155;
    margin-top: 24px;
}

.master-banner i[b-d3lw2qnnci] {
    color: #0284c7;
    margin-right: 6px;
}

.master-banner .subtext[b-d3lw2qnnci] {
    font-weight: 600;
    color: #64748b;
    margin-left: 8px;
    font-size: 0.85rem;
}

/* Mate Table Layout */
.vocab-table-container[b-d3lw2qnnci] {
    background: #ffffff;
    border-radius: 18px;
}

.table-responsive[b-d3lw2qnnci] {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.featured-table-wrapper[b-d3lw2qnnci] {
    border: 1.5px solid #fef3c7;
    border-top: none;
    border-radius: 0 0 16px 16px;
    background: #ffffff;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.05);
}

.master-table-wrapper[b-d3lw2qnnci] {
    border: 1.5px solid #e2e8f0;
    border-top: none;
    border-radius: 0 0 16px 16px;
    background: #ffffff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
}

.mate-table[b-d3lw2qnnci] {
    width: 100%;
    border-collapse: collapse;
    min-width: 860px;
    text-align: left;
}

.mate-table thead th[b-d3lw2qnnci] {
    background: #f8fafc;
    color: #475569;
    font-weight: 800;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 13px 18px;
    border-bottom: 1.5px solid #e2e8f0;
}

.vocab-row[b-d3lw2qnnci] {
    cursor: pointer;
    transition: background-color 0.15s ease;
    border-bottom: 1px solid #f1f5f9;
}

.vocab-row:hover[b-d3lw2qnnci] {
    background-color: #f8fafc;
}

.vocab-row.row-expanded[b-d3lw2qnnci] {
    background-color: #f0f9ff !important;
}

.mate-table tbody td[b-d3lw2qnnci] {
    padding: 13px 18px;
    font-size: 0.92rem;
    vertical-align: middle;
}

/* Word Cell */
.cell-word-col[b-d3lw2qnnci] {
    vertical-align: top !important;
}

.word-flex[b-d3lw2qnnci] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.main-word[b-d3lw2qnnci] {
    font-weight: 800;
    color: #0f172a;
    font-size: 0.98rem;
    letter-spacing: -0.01em;
}

.tricky-badge[b-d3lw2qnnci] {
    font-size: 0.85rem;
    cursor: help;
}

.inline-speaker-btn[b-d3lw2qnnci] {
    border: none;
    background: #eff6ff;
    color: #0284c7;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    transition: all 0.15s;
}

.inline-speaker-btn:hover[b-d3lw2qnnci] {
    background: #0284c7;
    color: #ffffff;
    transform: scale(1.15);
}

.word-ipa[b-d3lw2qnnci] {
    font-size: 0.84rem;
    color: #0284c7;
    font-weight: 600;
    font-family: 'Segoe UI', 'DejaVu Sans', 'Lucida Sans Unicode', sans-serif;
    margin-top: 2px;
}

/* CEFR Tag Styling (A1, A2, B1, B2, C1, C2) */
.cell-cefr-col[b-d3lw2qnnci] {
    text-align: center;
}

.cefr-tag[b-d3lw2qnnci] {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.tag-a1[b-d3lw2qnnci] { background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }
.tag-a2[b-d3lw2qnnci] { background: #ecfeff; color: #0e7490; border: 1px solid #a5f3fc; }
.tag-b1[b-d3lw2qnnci] { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.tag-b2[b-d3lw2qnnci] { background: #fef3c7; color: #b45309; border: 1px solid #fde68a; }
.tag-c1[b-d3lw2qnnci] { background: #ffedd5; color: #c2410c; border: 1px solid #fed7aa; }
.tag-c2[b-d3lw2qnnci] { background: #f3e8ff; color: #7e22ce; border: 1px solid #e9d5ff; }

/* Meaning & Topic & Freq */
.meaning-text[b-d3lw2qnnci] {
    font-weight: 600;
    color: #1e293b;
    line-height: 1.45;
}

.topic-label[b-d3lw2qnnci] {
    color: #64748b;
    font-size: 0.86rem;
    font-weight: 600;
}

.cell-freq-col[b-d3lw2qnnci] {
    text-align: center;
}

.freq-badge[b-d3lw2qnnci] {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 700;
    font-family: monospace;
}

/* Detail Accordion Row */
.detail-accordion-row td[b-d3lw2qnnci] {
    padding: 0 !important;
    background: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
}

.accordion-content-box[b-d3lw2qnnci] {
    padding: 16px 22px;
    background: #f0f9ff;
    border-left: 4px solid #0284c7;
    display: flex;
    flex-direction: column;
    gap: 10px;
    animation: fadeIn-b-d3lw2qnnci 0.2s ease;
}

@keyframes fadeIn-b-d3lw2qnnci {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.accordion-header[b-d3lw2qnnci] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.acc-word-title[b-d3lw2qnnci] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.acc-word-title strong[b-d3lw2qnnci] {
    font-size: 1.15rem;
    color: #0f172a;
}

.acc-ipa[b-d3lw2qnnci] {
    color: #0284c7;
    font-weight: 600;
    font-size: 0.95rem;
}

.acc-pos[b-d3lw2qnnci] {
    background: #e2e8f0;
    color: #475569;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: lowercase;
}

.btn-speak-large[b-d3lw2qnnci] {
    background: #0284c7;
    color: #ffffff;
    border: none;
    padding: 6px 14px;
    border-radius: 9px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3);
    transition: all 0.15s;
}

.btn-speak-large:hover[b-d3lw2qnnci] {
    background: #0369a1;
}

.acc-body[b-d3lw2qnnci] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.acc-meaning-line[b-d3lw2qnnci] {
    font-size: 0.95rem;
}

.acc-meaning-line .label[b-d3lw2qnnci] {
    font-weight: 700;
    color: #475569;
    margin-right: 6px;
}

.acc-meaning-line .val[b-d3lw2qnnci] {
    font-weight: 700;
    color: #0f172a;
}

.acc-example-card[b-d3lw2qnnci] {
    background: #ffffff;
    border: 1px solid #bae6fd;
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.example-en[b-d3lw2qnnci] {
    font-size: 0.92rem;
    color: #0f172a;
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 6px;
}

.example-en i[b-d3lw2qnnci] {
    color: #0284c7;
}

.btn-speak-ex[b-d3lw2qnnci] {
    border: none;
    background: #eff6ff;
    color: #0284c7;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    margin-left: 6px;
}

.btn-speak-ex:hover[b-d3lw2qnnci] {
    background: #0284c7;
    color: #ffffff;
}

.example-vi[b-d3lw2qnnci] {
    color: #64748b;
    font-size: 0.86rem;
    margin-left: 20px;
}

/* Cards Mode Grid */
.vocab-cards-grid[b-d3lw2qnnci] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    margin-top: 10px;
}

.vocab-card-item[b-d3lw2qnnci] {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 18px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.vocab-card-item:hover[b-d3lw2qnnci] {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.card-header-row[b-d3lw2qnnci] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-badges[b-d3lw2qnnci] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.card-topic-tag[b-d3lw2qnnci] {
    background: #f1f5f9;
    color: #475569;
    font-size: 0.74rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
}

.btn-card-audio[b-d3lw2qnnci] {
    border: none;
    background: #eff6ff;
    color: #0284c7;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    transition: all 0.15s;
}

.btn-card-audio:hover[b-d3lw2qnnci] {
    background: #0284c7;
    color: #ffffff;
}

.card-word-title[b-d3lw2qnnci] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.card-word[b-d3lw2qnnci] {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
}

.card-ipa[b-d3lw2qnnci] {
    color: #0284c7;
    font-size: 0.88rem;
    font-weight: 600;
    font-family: 'Segoe UI', 'DejaVu Sans', 'Lucida Sans Unicode', sans-serif;
}

.card-pos[b-d3lw2qnnci] {
    display: inline-block;
    align-self: flex-start;
    background: #f1f5f9;
    color: #64748b;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.74rem;
    font-weight: 700;
}

.card-meaning[b-d3lw2qnnci] {
    font-weight: 700;
    color: #1e293b;
    font-size: 0.95rem;
    line-height: 1.4;
}

.card-example-box[b-d3lw2qnnci] {
    background: #f8fafc;
    border-radius: 10px;
    padding: 10px 12px;
    border-left: 3px solid #0284c7;
}

.card-ex-en[b-d3lw2qnnci] {
    font-style: italic;
    color: #334155;
    font-size: 0.86rem;
    line-height: 1.4;
    margin-bottom: 3px;
}

.card-ex-vi[b-d3lw2qnnci] {
    color: #94a3b8;
    font-size: 0.8rem;
}

/* Pagination Container */
.pagination-container[b-d3lw2qnnci] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 8px;
    margin-top: 14px;
    flex-wrap: wrap;
    gap: 14px;
}

.pagination-summary[b-d3lw2qnnci] {
    font-size: 0.88rem;
    color: #64748b;
}

.pagination-summary strong[b-d3lw2qnnci] {
    color: #0f172a;
}

.pagination-buttons[b-d3lw2qnnci] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-page[b-d3lw2qnnci] {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    color: #334155;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.btn-page:hover:not(:disabled)[b-d3lw2qnnci] {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #0f172a;
}

.btn-page:disabled[b-d3lw2qnnci] {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-page.active[b-d3lw2qnnci] {
    background: #0284c7;
    color: #ffffff;
    border-color: #0284c7;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3);
}

.page-ellipsis[b-d3lw2qnnci] {
    padding: 0 4px;
    color: #94a3b8;
    font-weight: 700;
}

/* Loading & Empty States */
.loading-state[b-d3lw2qnnci],
.empty-state[b-d3lw2qnnci] {
    text-align: center;
    padding: 70px 20px;
    color: #64748b;
    background: #ffffff;
    border-radius: 20px;
    border: 1.5px solid #e2e8f0;
    margin-top: 10px;
}

.empty-state i[b-d3lw2qnnci] {
    font-size: 2.6rem;
    color: #cbd5e1;
}

.empty-state h4[b-d3lw2qnnci] {
    margin: 12px 0 4px;
    color: #0f172a;
    font-weight: 800;
}

.btn-reset-filters[b-d3lw2qnnci] {
    background: #0284c7;
    color: #ffffff;
    border: none;
    padding: 9px 18px;
    border-radius: 10px;
    font-weight: 700;
    margin-top: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.custom-spinner[b-d3lw2qnnci] {
    width: 40px;
    height: 40px;
    margin: 0 auto 12px;
    border: 4px solid #e0f2fe;
    border-top-color: #0284c7;
    border-radius: 50%;
    animation: spin-b-d3lw2qnnci 0.8s linear infinite;
}

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

/* Responsive */
@media (max-width: 992px) {
    .ielts-vocab-page[b-d3lw2qnnci] {
        padding: 16px 16px 50px;
    }

    .filter-top-row[b-d3lw2qnnci] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-input-group[b-d3lw2qnnci] {
        max-width: 100%;
    }

    .filter-dropdowns[b-d3lw2qnnci] {
        width: 100%;
    }

    .filter-dropdowns select[b-d3lw2qnnci] {
        width: 100%;
    }

    .filter-toggles[b-d3lw2qnnci] {
        justify-content: flex-start;
    }
}

/* ========================================================================= */
/* DARK MODE OVERRIDES (OBSIDIAN NAVY THEME)                                 */
/* ========================================================================= */
[data-theme="dark"] .ielts-vocab-page[b-d3lw2qnnci] {
    color: #f8fafc;
}

[data-theme="dark"] .vocab-title[b-d3lw2qnnci] {
    color: #f8fafc;
}

[data-theme="dark"] .vocab-subtitle[b-d3lw2qnnci] {
    color: #94a3b8;
}

[data-theme="dark"] .view-mode-toggle[b-d3lw2qnnci] {
    background: #111d33;
    border: 1px solid #223554;
}

[data-theme="dark"] .toggle-btn[b-d3lw2qnnci] {
    color: #94a3b8;
}

[data-theme="dark"] .toggle-btn:hover[b-d3lw2qnnci] {
    color: #f8fafc;
}

[data-theme="dark"] .toggle-btn.active[b-d3lw2qnnci] {
    background: #15243f;
    color: #38bdf8;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .filter-panel-card[b-d3lw2qnnci] {
    background: #15243f;
    border-color: #223554;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .search-input-group input[b-d3lw2qnnci] {
    background: #111d33;
    border-color: #223554;
    color: #f8fafc;
}

[data-theme="dark"] .search-input-group input:focus[b-d3lw2qnnci] {
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
}

[data-theme="dark"] .dropdown-wrapper select[b-d3lw2qnnci] {
    background: #111d33;
    border-color: #223554;
    color: #f8fafc;
}

[data-theme="dark"] .toggle-checkbox[b-d3lw2qnnci] {
    background: #111d33;
    border-color: #223554;
    color: #94a3b8;
}

[data-theme="dark"] .toggle-checkbox:hover[b-d3lw2qnnci] {
    background: #1c2c4a;
    color: #f8fafc;
}

[data-theme="dark"] .toggle-checkbox.checked[b-d3lw2qnnci] {
    background: rgba(56, 189, 248, 0.15);
    border-color: #38bdf8;
    color: #38bdf8;
}

[data-theme="dark"] .cefr-pills-bar[b-d3lw2qnnci] {
    border-top-color: #223554;
}

[data-theme="dark"] .cefr-pill[b-d3lw2qnnci] {
    background: #111d33;
    border-color: #223554;
    color: #cbd5e1;
}

[data-theme="dark"] .cefr-pill:hover[b-d3lw2qnnci] {
    background: #1c2c4a;
    border-color: #38bdf8;
    color: #f8fafc;
}

[data-theme="dark"] .cefr-pill.active[b-d3lw2qnnci] {
    background: #0284c7;
    border-color: #38bdf8;
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(56, 189, 248, 0.35);
}

[data-theme="dark"] .match-count-badge[b-d3lw2qnnci] {
    color: #94a3b8;
}

[data-theme="dark"] .match-count-badge strong[b-d3lw2qnnci] {
    color: #38bdf8;
}

[data-theme="dark"] .featured-banner[b-d3lw2qnnci] {
    background: #1f1b0c;
    border-color: #3d3014;
    color: #fbbf24;
}

[data-theme="dark"] .featured-banner .subtext[b-d3lw2qnnci] {
    color: #f59e0b;
}

[data-theme="dark"] .master-banner[b-d3lw2qnnci] {
    background: #111d33;
    border-color: #223554;
    color: #f8fafc;
}

[data-theme="dark"] .master-banner i[b-d3lw2qnnci] {
    color: #38bdf8;
}

[data-theme="dark"] .master-banner .subtext[b-d3lw2qnnci] {
    color: #94a3b8;
}

[data-theme="dark"] .vocab-table-container[b-d3lw2qnnci] {
    background: #15243f;
}

[data-theme="dark"] .featured-table-wrapper[b-d3lw2qnnci] {
    background: #15243f;
    border-color: #3d3014;
}

[data-theme="dark"] .master-table-wrapper[b-d3lw2qnnci] {
    background: #15243f;
    border-color: #223554;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .mate-table thead th[b-d3lw2qnnci] {
    background: #111d33;
    color: #94a3b8;
    border-bottom-color: #223554;
}

[data-theme="dark"] .vocab-row[b-d3lw2qnnci] {
    border-bottom-color: #1e293b;
}

[data-theme="dark"] .vocab-row:hover[b-d3lw2qnnci] {
    background-color: #1a2c4c;
}

[data-theme="dark"] .vocab-row.row-expanded[b-d3lw2qnnci] {
    background-color: #152b47 !important;
}

[data-theme="dark"] .main-word[b-d3lw2qnnci] {
    color: #f8fafc;
}

[data-theme="dark"] .meaning-text[b-d3lw2qnnci] {
    color: #e2e8f0;
}

[data-theme="dark"] .topic-label[b-d3lw2qnnci] {
    color: #94a3b8;
}

[data-theme="dark"] .freq-badge[b-d3lw2qnnci] {
    background: #111d33;
    border-color: #223554;
    color: #94a3b8;
}

[data-theme="dark"] .inline-speaker-btn[b-d3lw2qnnci] {
    background: #111d33;
    color: #38bdf8;
    border: 1px solid #223554;
}

[data-theme="dark"] .inline-speaker-btn:hover[b-d3lw2qnnci] {
    background: #38bdf8;
    color: #0b1325;
}

[data-theme="dark"] .detail-accordion-row td[b-d3lw2qnnci] {
    background: #111d33;
    border-bottom-color: #223554;
}

[data-theme="dark"] .accordion-content-box[b-d3lw2qnnci] {
    background: #15243f;
    border-left-color: #38bdf8;
}

[data-theme="dark"] .acc-word-title strong[b-d3lw2qnnci] {
    color: #f8fafc;
}

[data-theme="dark"] .acc-ipa[b-d3lw2qnnci] {
    color: #38bdf8;
}

[data-theme="dark"] .acc-pos[b-d3lw2qnnci] {
    background: #111d33;
    color: #94a3b8;
    border: 1px solid #223554;
}

[data-theme="dark"] .acc-meaning-line .label[b-d3lw2qnnci] {
    color: #94a3b8;
}

[data-theme="dark"] .acc-meaning-line .val[b-d3lw2qnnci] {
    color: #f8fafc;
}

[data-theme="dark"] .acc-example-card[b-d3lw2qnnci] {
    background: #111d33;
    border-color: #223554;
}

[data-theme="dark"] .example-en[b-d3lw2qnnci] {
    color: #f8fafc;
}

[data-theme="dark"] .example-en i[b-d3lw2qnnci] {
    color: #38bdf8;
}

[data-theme="dark"] .example-vi[b-d3lw2qnnci] {
    color: #94a3b8;
}

[data-theme="dark"] .btn-speak-ex[b-d3lw2qnnci] {
    background: #15243f;
    color: #38bdf8;
    border: 1px solid #223554;
}

[data-theme="dark"] .btn-speak-ex:hover[b-d3lw2qnnci] {
    background: #38bdf8;
    color: #0b1325;
}

/* Cards Mode Grid */
[data-theme="dark"] .vocab-card-item[b-d3lw2qnnci] {
    background: #15243f;
    border-color: #223554;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .vocab-card-item:hover[b-d3lw2qnnci] {
    border-color: #38bdf8;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .card-topic-tag[b-d3lw2qnnci] {
    background: #111d33;
    color: #94a3b8;
    border: 1px solid #223554;
}

[data-theme="dark"] .btn-card-audio[b-d3lw2qnnci] {
    background: #111d33;
    color: #38bdf8;
    border: 1px solid #223554;
}

[data-theme="dark"] .btn-card-audio:hover[b-d3lw2qnnci] {
    background: #38bdf8;
    color: #0b1325;
}

[data-theme="dark"] .card-word[b-d3lw2qnnci] {
    color: #f8fafc;
}

[data-theme="dark"] .card-ipa[b-d3lw2qnnci] {
    color: #38bdf8;
}

[data-theme="dark"] .card-pos[b-d3lw2qnnci] {
    background: #111d33;
    color: #94a3b8;
}

[data-theme="dark"] .card-meaning[b-d3lw2qnnci] {
    color: #f8fafc;
}

[data-theme="dark"] .card-example-box[b-d3lw2qnnci] {
    background: #111d33;
    border-left-color: #38bdf8;
}

[data-theme="dark"] .card-ex-en[b-d3lw2qnnci] {
    color: #e2e8f0;
}

[data-theme="dark"] .card-ex-vi[b-d3lw2qnnci] {
    color: #94a3b8;
}

[data-theme="dark"] .pagination-summary[b-d3lw2qnnci] {
    color: #94a3b8;
}

[data-theme="dark"] .pagination-summary strong[b-d3lw2qnnci] {
    color: #f8fafc;
}

[data-theme="dark"] .btn-page[b-d3lw2qnnci] {
    background: #15243f;
    border-color: #223554;
    color: #cbd5e1;
}

[data-theme="dark"] .btn-page:hover:not(:disabled)[b-d3lw2qnnci] {
    background: #1c2c4a;
    border-color: #38bdf8;
    color: #f8fafc;
}

[data-theme="dark"] .btn-page.active[b-d3lw2qnnci] {
    background: #0284c7;
    color: #ffffff;
    border-color: #38bdf8;
}

[data-theme="dark"] .loading-state[b-d3lw2qnnci],
[data-theme="dark"] .empty-state[b-d3lw2qnnci] {
    background: #15243f;
    border-color: #223554;
    color: #94a3b8;
}

[data-theme="dark"] .empty-state h4[b-d3lw2qnnci] {
    color: #f8fafc;
}
/* /Pages/Ielts/IeltsWriting.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════
   IeltsWriting.razor — Full-Screen Split Layout
   ══════════════════════════════════════════════════════ */

:root[b-er9nqx0cp2] {
    --topbar-h: 52px;
    --tabs-h: 44px;
    --border: #e0e0e0;
    --primary: #0a7cff;
    --shadow: 0 1px 4px rgba(0,0,0,.08);
}

/* ── LOADING / ERROR ── */
.writing-loading[b-er9nqx0cp2] {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; height: 60vh; gap: 16px; color: #666;
}
.loading-ring[b-er9nqx0cp2] {
    width: 44px; height: 44px;
    border: 4px solid #e0e0e0; border-top-color: var(--primary);
    border-radius: 50%; animation: spin-b-er9nqx0cp2 0.8s linear infinite;
}
@keyframes spin-b-er9nqx0cp2 { to { transform: rotate(360deg); } }
.writing-error[b-er9nqx0cp2] { text-align: center; padding: 80px 20px; color: #555; }
.writing-error .error-icon[b-er9nqx0cp2] { font-size: 3rem; margin-bottom: 12px; }

/* ── TOP BAR ── */
.writing-topbar[b-er9nqx0cp2] {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center;
    height: var(--topbar-h);
    background: #fff; border-bottom: 1px solid var(--border);
    padding: 0 20px; box-shadow: var(--shadow); gap: 16px;
}
.topbar-left[b-er9nqx0cp2] { flex: 1; }
.exam-title-short[b-er9nqx0cp2] {
    font-size: 0.85rem; font-weight: 600; color: #333;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 500px; display: block;
}
.topbar-center[b-er9nqx0cp2] { flex: 0 0 auto; }
.timer-box[b-er9nqx0cp2] {
    display: flex; align-items: center; gap: 6px;
    background: #f0f4ff; border: 1px solid #c7d7ff;
    border-radius: 20px; padding: 6px 16px;
    font-weight: 600; font-size: 0.92rem; color: #1a56db;
}
.timer-box.timer-warning[b-er9nqx0cp2] { background: #fff0f0; border-color: #fca5a5; color: #dc2626; }
.timer-icon[b-er9nqx0cp2] { font-size: 1rem; }
.topbar-right[b-er9nqx0cp2] { flex: 1; display: flex; justify-content: flex-end; }
.btn-submit-exam[b-er9nqx0cp2] {
    background: #16a34a; color: #fff; border: none;
    padding: 8px 20px; border-radius: 6px; font-weight: 700;
    font-size: 0.9rem; cursor: pointer; transition: background 0.2s;
}
.btn-submit-exam:hover[b-er9nqx0cp2] { background: #15803d; }
.btn-exit-exam[b-er9nqx0cp2] { background: transparent; border: 1px solid #cbd5e1; color: #475569; padding: 8px 14px; border-radius: 6px; margin-right: 8px; cursor: pointer; }
.btn-exit-exam:hover[b-er9nqx0cp2] { border-color: #e83e8c; color: #e83e8c; }
.test-session-status[b-er9nqx0cp2] { color: #b91c1c; font-size: 0.85rem; font-weight: 700; }

/* ── TASK TABS ── */
.writing-task-tabs[b-er9nqx0cp2] {
    position: sticky; top: var(--topbar-h); z-index: 99;
    display: flex; align-items: center; gap: 6px;
    padding: 0 20px; height: var(--tabs-h);
    background: #f8f9fb; border-bottom: 1px solid var(--border);
}
.task-tab-btn[b-er9nqx0cp2] {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 18px; border: 1px solid transparent;
    border-radius: 6px; background: transparent; cursor: pointer;
    font-size: 0.88rem; font-weight: 600; color: #555;
    transition: all 0.15s;
}
.task-tab-btn:hover[b-er9nqx0cp2] { background: #e8f0fe; color: var(--primary); }
.task-tab-btn.active[b-er9nqx0cp2] {
    background: #fff; border-color: var(--border);
    color: var(--primary); box-shadow: var(--shadow);
}
.word-count-badge[b-er9nqx0cp2] {
    font-size: 0.75rem; background: #e8f0fe; color: var(--primary);
    border-radius: 10px; padding: 2px 8px; font-weight: 500;
}
.task-tab-btn.active .word-count-badge[b-er9nqx0cp2] { background: var(--primary); color: #fff; }

/* ── SPLIT LAYOUT ── */
.writing-split[b-er9nqx0cp2] {
    display: flex;
    height: calc(100vh - var(--topbar-h) - var(--tabs-h));
    overflow: hidden;
}

/* ── PROMPT COLUMN (LEFT) ── */
.prompt-col[b-er9nqx0cp2] {
    flex: 1 1 50%; width: 50%;
    overflow-y: auto;
    padding: 32px 40px;
    background: #f4f6f9; /* Distinct light blue-gray background for the reading/prompt side */
    border-right: 1px solid var(--border);
}

.task-instruction[b-er9nqx0cp2] { margin-bottom: 24px; background: #fff; padding: 24px; border-radius: 12px; box-shadow: 0 2px 6px rgba(0,0,0,0.03); }

.task-title[b-er9nqx0cp2] {
    font-size: 1.4rem; font-weight: 800; color: #1a1a1a;
    margin: 0 0 12px;
    border-bottom: 2px solid var(--primary);
    display: inline-block;
    padding-bottom: 4px;
}
.task-meta[b-er9nqx0cp2] {
    font-size: 0.95rem; color: #555; margin: 0 0 16px;
    font-style: italic;
}
.task-prompt[b-er9nqx0cp2] {
    font-size: 1.05rem; line-height: 1.8; color: #222;
    margin-bottom: 16px;
}
.task-prompt p[b-er9nqx0cp2] { margin: 0 0 12px; }
.task-word-req[b-er9nqx0cp2] {
    font-size: 0.95rem; color: #444; margin: 0;
    padding: 10px 16px; background: #f8f9fb;
    border-left: 4px solid var(--primary); border-radius: 4px;
}

.task-image-wrap[b-er9nqx0cp2] {
    margin-top: 20px;
}
.task-image[b-er9nqx0cp2] {
    width: 100%; max-width: 100%;
    height: auto; border-radius: 8px;
    border: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

/* ── SPLIT DIVIDER ── */
.split-divider[b-er9nqx0cp2] {
    width: 6px; flex-shrink: 0;
    background: #e2e8f0;
    cursor: col-resize;
    transition: background 0.2s;
}
.split-divider:hover[b-er9nqx0cp2] {
    background: #cbd5e1;
}

/* ── EDITOR COLUMN (RIGHT) ── */
.editor-col[b-er9nqx0cp2] {
    flex: 1 1 50%; width: 50%;
    display: flex; flex-direction: column;
    background: #eef2f6; /* Outer background to frame the white paper */
    overflow: hidden;
    padding: 24px; /* Padding to make the text area look like a piece of paper */
}

.essay-textarea[b-er9nqx0cp2] {
    flex: 1;
    width: 100%; height: 100%;
    resize: none; border: 1px solid var(--border); outline: none;
    background: #fff;
    padding: 32px 40px;
    font-size: 1.05rem; line-height: 1.9;
    font-family: 'Georgia', 'Times New Roman', serif;
    color: #1a1a1a;
    box-sizing: border-box;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.essay-textarea[b-er9nqx0cp2]::placeholder { color: #aaa; font-style: italic; }
.essay-textarea:focus[b-er9nqx0cp2] { border-color: var(--primary); box-shadow: 0 4px 12px rgba(10, 124, 255, 0.15); }

.editor-footer[b-er9nqx0cp2] {
    flex-shrink: 0;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 32px;
    border-top: none;
    border: 1px solid var(--border);
    border-top: 1px dashed #e2e8f0;
    background: #f8fafc;
    font-size: 0.9rem; color: #555;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.word-count[b-er9nqx0cp2] { font-size: 0.88rem; }
.word-count.count-low strong[b-er9nqx0cp2] { color: #e85c00; }
.word-count.count-ok strong[b-er9nqx0cp2] { color: #16a34a; }
.count-check[b-er9nqx0cp2] {
    color: #16a34a; font-weight: 700; font-size: 0.85rem;
}

/* ── TOP RESULT BANNER (HIỂN THỊ ĐÁP ÁN & ĐIỂM TRÊN CÙNG) ── */
.writing-result-top-banner[b-er9nqx0cp2] {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border-bottom: 2px solid #e2e8f0;
    padding: 16px 24px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    z-index: 98;
}

.result-banner-header[b-er9nqx0cp2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.banner-badge-box[b-er9nqx0cp2] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.status-badge-pill[b-er9nqx0cp2] {
    background: #dcfce7;
    color: #15803d;
    border: 1.5px solid #86efac;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.status-badge-pill.pending[b-er9nqx0cp2] {
    background: #fef3c7;
    color: #92400e;
    border-color: #fcd34d;
}

.score-card-band.pending-card[b-er9nqx0cp2] {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #78350f;
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.1);
}

.score-card-band.pending-card .band-label[b-er9nqx0cp2] {
    color: #92400e;
}

.score-card-band.pending-card .band-number[b-er9nqx0cp2] {
    color: #d97706;
}

.score-card-band.pending-card .band-note[b-er9nqx0cp2] {
    color: #b45309;
}

.pending-info-box[b-er9nqx0cp2] {
    flex: 1;
    background: #ffffff;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 12px 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #78350f;
    font-size: 0.9rem;
    line-height: 1.5;
}

.pending-info-box p[b-er9nqx0cp2] {
    margin: 0;
}

.pending-info-box .pending-sub[b-er9nqx0cp2] {
    color: #92400e;
    font-size: 0.82rem;
    margin-top: 4px;
    font-weight: 500;
}

.teacher-feedback-alert[b-er9nqx0cp2] {
    margin-top: 14px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 12px 16px;
    color: #1e40af;
    font-size: 0.92rem;
}
.teacher-feedback-alert strong[b-er9nqx0cp2] {
    display: block;
    margin-bottom: 4px;
}
.teacher-feedback-alert p[b-er9nqx0cp2] {
    margin: 0;
    line-height: 1.6;
    color: #1e3a8a;
}

.status-sub-note[b-er9nqx0cp2] {
    font-size: 0.88rem;
    color: #64748b;
    font-weight: 500;
}

.banner-actions[b-er9nqx0cp2] {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.btn-banner-action[b-er9nqx0cp2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}

.btn-banner-action.summary-btn[b-er9nqx0cp2] {
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(79,70,229,0.3);
}

.btn-banner-action.summary-btn:hover[b-er9nqx0cp2] {
    background: linear-gradient(135deg, #4338ca, #4f46e5);
    transform: translateY(-1px);
}

.btn-banner-action.retake-btn[b-er9nqx0cp2] {
    background: #ffffff;
    color: #334155;
    border: 1px solid #cbd5e1;
}

.btn-banner-action.retake-btn:hover[b-er9nqx0cp2] {
    background: #f1f5f9;
    color: #0f172a;
}

.btn-banner-action.exit-btn[b-er9nqx0cp2] {
    background: transparent;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.btn-banner-action.exit-btn:hover[b-er9nqx0cp2] {
    border-color: #ef4444;
    color: #ef4444;
}

.result-banner-grid[b-er9nqx0cp2] {
    display: flex;
    gap: 16px;
    align-items: stretch;
}

.score-card-band[b-er9nqx0cp2] {
    flex: 0 0 160px;
    background: #0f172a;
    color: #ffffff;
    border-radius: 10px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 4px 12px rgba(15,23,42,0.2);
}

.score-card-band .band-label[b-er9nqx0cp2] {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: #94a3b8;
}

.score-card-band .band-number[b-er9nqx0cp2] {
    font-size: 2.2rem;
    font-weight: 900;
    color: #38bdf8;
    line-height: 1.1;
    margin: 4px 0;
}

.score-card-band .band-note[b-er9nqx0cp2] {
    font-size: 0.68rem;
    color: #cbd5e1;
}

.criteria-card-grid[b-er9nqx0cp2] {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.crit-item[b-er9nqx0cp2] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.crit-item .crit-name[b-er9nqx0cp2] {
    font-size: 0.76rem;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 4px;
}

.crit-item .crit-score[b-er9nqx0cp2] {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
}

/* ── TASK TABS RIGHT TOGGLE ── */
.task-tabs-right[b-er9nqx0cp2] {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

.view-mode-btn[b-er9nqx0cp2] {
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #475569;
    transition: all 0.2s;
}

.view-mode-btn.active[b-er9nqx0cp2] {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}

.view-mode-btn.sample.active[b-er9nqx0cp2] {
    background: linear-gradient(135deg, #059669, #10b981);
    border-color: #059669;
    color: #ffffff;
}

/* ── SAMPLE ANSWER PANEL (BÀI MẪU) ── */
.sample-answer-panel[b-er9nqx0cp2] {
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    padding: 24px;
    height: 100%;
    overflow-y: auto;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}

.sample-answer-header[b-er9nqx0cp2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 14px;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 18px;
}

.sample-badge[b-er9nqx0cp2] {
    background: #dcfce7;
    color: #15803d;
    font-weight: 800;
    font-size: 0.85rem;
    padding: 4px 12px;
    border-radius: 6px;
    border: 1px solid #86efac;
}

.sample-words[b-er9nqx0cp2] {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 600;
}

.sample-answer-body[b-er9nqx0cp2] {
    font-size: 1rem;
    line-height: 1.8;
    color: #1e293b;
}

.sample-answer-body p[b-er9nqx0cp2] {
    margin-bottom: 14px;
}

.no-sample[b-er9nqx0cp2] {
    color: #64748b;
    font-style: italic;
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
    .writing-split[b-er9nqx0cp2] { flex-direction: column; height: auto; overflow: visible; }
    .prompt-col[b-er9nqx0cp2], .editor-col[b-er9nqx0cp2] { width: 100%; flex: none; }
    .split-divider[b-er9nqx0cp2] { width: 100%; height: 4px; cursor: row-resize; }
    .essay-textarea[b-er9nqx0cp2] { min-height: 300px; }
    .criteria-card-grid[b-er9nqx0cp2] { grid-template-columns: repeat(2, 1fr); }
    .result-banner-grid[b-er9nqx0cp2] { flex-direction: column; }
    .score-card-band[b-er9nqx0cp2] { flex: none; width: 100%; }
}

/* Checkpoint Banner */
.checkpoint-banner[b-er9nqx0cp2] {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1.5px solid #93c5fd;
    border-radius: 12px;
    padding: 12px 18px;
    margin: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.12);
}
.cb-left[b-er9nqx0cp2] {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cb-icon[b-er9nqx0cp2] {
    font-size: 1.6rem;
    color: #2563eb;
}
.cb-info[b-er9nqx0cp2] {
    font-size: 0.92rem;
    color: #1e3a8a;
}
.cb-info strong[b-er9nqx0cp2] {
    color: #1d4ed8;
}
.cb-actions[b-er9nqx0cp2] {
    display: flex;
    align-items: center;
    gap: 10px;
}
.btn-cb-restore[b-er9nqx0cp2] {
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s;
}
.btn-cb-restore:hover[b-er9nqx0cp2] {
    background: #1d4ed8;
}
.btn-cb-discard[b-er9nqx0cp2] {
    background: #fff;
    color: #64748b;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px 14px;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s;
}
.btn-cb-discard:hover[b-er9nqx0cp2] {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #dc2626;
}

/* ==========================================================================
   DARK MODE OVERRIDES (OBSIDIAN NAVY THEME)
   ========================================================================== */
[data-theme="dark"][b-er9nqx0cp2],
:root[data-theme="dark"][b-er9nqx0cp2] {
    --border: #223554;
}

[data-theme="dark"] .writing-topbar[b-er9nqx0cp2] {
    background: #111d33;
    border-bottom-color: #223554;
}

[data-theme="dark"] .exam-title-short[b-er9nqx0cp2] {
    color: #f8fafc;
}

[data-theme="dark"] .timer-box[b-er9nqx0cp2] {
    background: #15243f;
    border-color: #223554;
    color: #38bdf8;
}

[data-theme="dark"] .btn-exit-exam[b-er9nqx0cp2] {
    border-color: #223554;
    color: #94a3b8;
}

[data-theme="dark"] .writing-task-tabs[b-er9nqx0cp2] {
    background: #0b1325;
    border-bottom-color: #223554;
}

[data-theme="dark"] .task-tab-btn[b-er9nqx0cp2] {
    color: #94a3b8;
}

[data-theme="dark"] .task-tab-btn:hover[b-er9nqx0cp2] {
    background: #1c2c4a;
    color: #f8fafc;
}

[data-theme="dark"] .task-tab-btn.active[b-er9nqx0cp2] {
    background: #15243f;
    border-color: #223554;
    color: #38bdf8;
}

[data-theme="dark"] .word-count-badge[b-er9nqx0cp2] {
    background: #111d33;
    color: #38bdf8;
}

[data-theme="dark"] .prompt-col[b-er9nqx0cp2] {
    background: #0b1325;
    border-right-color: #223554;
}

[data-theme="dark"] .task-instruction[b-er9nqx0cp2] {
    background: #15243f;
    border: 1px solid #223554;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .task-title[b-er9nqx0cp2] {
    color: #f8fafc;
    border-bottom-color: #38bdf8;
}

[data-theme="dark"] .task-meta[b-er9nqx0cp2] {
    color: #94a3b8;
}

[data-theme="dark"] .task-prompt[b-er9nqx0cp2] {
    color: #e2e8f0;
}

[data-theme="dark"] .task-word-req[b-er9nqx0cp2] {
    background: #111d33;
    border-left-color: #38bdf8;
    color: #cbd5e1;
}

[data-theme="dark"] .split-divider[b-er9nqx0cp2] {
    background: #223554;
}

[data-theme="dark"] .split-divider:hover[b-er9nqx0cp2] {
    background: #38bdf8;
}

[data-theme="dark"] .editor-col[b-er9nqx0cp2] {
    background: #0f172a;
}

[data-theme="dark"] .editor-topbar[b-er9nqx0cp2] {
    background: #111d33;
    border-bottom-color: #223554;
}

[data-theme="dark"] .word-count-chip[b-er9nqx0cp2] {
    background: #15243f;
    border-color: #223554;
    color: #cbd5e1;
}

[data-theme="dark"] .btn-clear-essay[b-er9nqx0cp2] {
    color: #94a3b8;
}

[data-theme="dark"] .btn-clear-essay:hover[b-er9nqx0cp2] {
    color: #f87171;
}

[data-theme="dark"] .essay-textarea[b-er9nqx0cp2] {
    background: #0f172a;
    color: #f8fafc;
}

[data-theme="dark"] .essay-textarea[b-er9nqx0cp2]::placeholder {
    color: #64748b;
}

/* Result / Scoring Views */
[data-theme="dark"] .score-card-band[b-er9nqx0cp2] {
    background: #15243f;
    border-color: #223554;
}

[data-theme="dark"] .criteria-card-grid .crit-card[b-er9nqx0cp2] {
    background: #15243f;
    border-color: #223554;
}

[data-theme="dark"] .crit-card-header h4[b-er9nqx0cp2] {
    color: #f8fafc;
}

[data-theme="dark"] .crit-card-body p[b-er9nqx0cp2] {
    color: #cbd5e1;
}

[data-theme="dark"] .sample-essay-card[b-er9nqx0cp2] {
    background: #15243f;
    border-color: #223554;
}

[data-theme="dark"] .sample-text[b-er9nqx0cp2] {
    background: #111d33;
    color: #e2e8f0;
    border-color: #223554;
}

[data-theme="dark"] .checkpoint-banner[b-er9nqx0cp2] {
    background: #15243f;
    border-color: #223554;
}

[data-theme="dark"] .cb-info[b-er9nqx0cp2] {
    color: #cbd5e1;
}

[data-theme="dark"] .cb-info strong[b-er9nqx0cp2] {
    color: #38bdf8;
}

[data-theme="dark"] .btn-cb-discard[b-er9nqx0cp2] {
    background: #111d33;
    border-color: #223554;
    color: #94a3b8;
}

/* ── Writing Pending & Teacher Feedback Overrides ── */
[data-theme="dark"] .status-badge-pill.pending[b-er9nqx0cp2] {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.3);
}

[data-theme="dark"] .score-card-band.pending-card[b-er9nqx0cp2] {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.25);
}

[data-theme="dark"] .score-card-band.pending-card .band-label[b-er9nqx0cp2] {
    color: #fbbf24;
}

[data-theme="dark"] .score-card-band.pending-card .band-number[b-er9nqx0cp2] {
    color: #f59e0b;
}

[data-theme="dark"] .score-card-band.pending-card .band-note[b-er9nqx0cp2] {
    color: #fcd34d;
}

[data-theme="dark"] .pending-info-box[b-er9nqx0cp2] {
    background: #0f172a;
    border-color: rgba(245, 158, 11, 0.35);
    color: #fde68a;
}

[data-theme="dark"] .pending-info-box .pending-sub[b-er9nqx0cp2] {
    color: #fbbf24;
}

[data-theme="dark"] .teacher-feedback-alert[b-er9nqx0cp2] {
    background: rgba(30, 58, 138, 0.25);
    border-color: rgba(59, 130, 246, 0.3);
    color: #93c5fd;
}

[data-theme="dark"] .teacher-feedback-alert p[b-er9nqx0cp2] {
    color: #bfdbfe;
}

[data-theme="dark"] .crit-item[b-er9nqx0cp2] {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
}

[data-theme="dark"] .sample-answer-panel[b-er9nqx0cp2] {
    background: rgba(15, 23, 42, 0.7);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .sample-badge[b-er9nqx0cp2] {
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
}

[data-theme="dark"] .no-sample[b-er9nqx0cp2] {
    color: #64748b;
}

/* /Pages/LegalPage.razor.rz.scp.css */
.legal[b-h4pm74bcrv] {
    max-width: 860px;
    margin: 0 auto;
    padding: 2rem 0 4rem;
    color: var(--ig-text);
    line-height: 1.65;
}

[b-h4pm74bcrv] h1 {
    font-size: 1.9rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

[b-h4pm74bcrv] .lede {
    font-size: 1.05rem;
    color: var(--ig-text-secondary);
    margin-bottom: 0.25rem;
}

[b-h4pm74bcrv] .upd {
    font-size: 0.8rem;
    color: var(--ig-text-secondary);
    border-left: 3px solid var(--ig-border);
    padding-left: 10px;
    margin-bottom: 2rem;
}

[b-h4pm74bcrv] h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 2.25rem 0 0.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--ig-border);
}

[b-h4pm74bcrv] ul {
    margin: 0.5rem 0 0.5rem 1.25rem;
    padding: 0;
}

[b-h4pm74bcrv] li {
    margin: 0.35rem 0;
}

[b-h4pm74bcrv] a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

[b-h4pm74bcrv] table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.9rem;
}

[b-h4pm74bcrv] th,
[b-h4pm74bcrv] td {
    text-align: left;
    padding: 8px 12px;
    border-bottom: 1px solid var(--ig-border);
    vertical-align: top;
}

[b-h4pm74bcrv] th {
    font-weight: 600;
    color: var(--ig-text-secondary);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

[b-h4pm74bcrv] .cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin: 1.5rem 0 2rem;
}

[b-h4pm74bcrv] .card {
    border: 1px solid var(--ig-border);
    border-radius: 12px;
    padding: 16px;
}

[b-h4pm74bcrv] .card h3 {
    font-size: 1rem;
    margin: 0 0 6px;
}

[b-h4pm74bcrv] .card p {
    margin: 0 0 8px;
    font-size: 0.875rem;
    color: var(--ig-text-secondary);
}

[b-h4pm74bcrv] .sla {
    font-size: 0.78rem !important;
    opacity: 0.8;
}

[b-h4pm74bcrv] .cform {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 560px;
    margin: 1rem 0 2rem;
}

[b-h4pm74bcrv] .cform label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 0.875rem;
    font-weight: 500;
}

[b-h4pm74bcrv] .cform input,
[b-h4pm74bcrv] .cform select,
[b-h4pm74bcrv] .cform textarea {
    font: inherit;
    padding: 9px 12px;
    border: 1px solid var(--ig-border);
    border-radius: 8px;
    background: var(--ig-bg);
    color: var(--ig-text);
}

[b-h4pm74bcrv] .cform button {
    align-self: flex-start;
    font: inherit;
    font-weight: 600;
    padding: 9px 22px;
    border: 0;
    border-radius: 8px;
    background: var(--ig-text);
    color: var(--ig-bg);
    cursor: pointer;
}

[b-h4pm74bcrv] .hint {
    font-size: 0.78rem;
    color: var(--ig-text-secondary);
}
/* /Pages/Profile.razor.rz.scp.css */
/* ─── PROFILE PAGE ──────────────────────────────────────────────── */

.profile-root[b-2rngzuikuk] {
    min-height: 100vh;
    background: #f0f2f8;
    font-family: 'Inter', sans-serif;
    padding-bottom: 3rem;
}

/* ── Loading ── */
.profile-loading[b-2rngzuikuk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1rem;
    color: #6c5ce7;
    font-weight: 600;
}
.profile-spinner[b-2rngzuikuk] {
    width: 44px; height: 44px;
    border: 4px solid #e0d9ff;
    border-top-color: #6c5ce7;
    border-radius: 50%;
    animation: spin-b-2rngzuikuk 0.8s linear infinite;
}
@keyframes spin-b-2rngzuikuk { to { transform: rotate(360deg); } }

/* ── HERO BANNER ── */
.profile-hero[b-2rngzuikuk] {
    position: relative;
    background: linear-gradient(135deg, #0d1b2a 0%, #1a2d46 40%, #6c5ce7 100%);
    padding: 3rem 2rem 2.5rem;
    overflow: hidden;
}
.hero-bg-pattern[b-2rngzuikuk] {
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(108,92,231,0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(9,132,227,0.25) 0%, transparent 40%),
        radial-gradient(circle at 60% 90%, rgba(0,184,148,0.15) 0%, transparent 40%);
    pointer-events: none;
}
.hero-content[b-2rngzuikuk] {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

/* Avatar */
.avatar-wrapper[b-2rngzuikuk] {
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.2s;
}
.avatar-wrapper:hover[b-2rngzuikuk] { transform: scale(1.05); }
.avatar-display[b-2rngzuikuk] {
    width: 100px; height: 100px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 4px rgba(255,255,255,0.25), 0 8px 24px rgba(0,0,0,0.35);
    transition: box-shadow 0.2s;
}
.avatar-wrapper:hover .avatar-display[b-2rngzuikuk] {
    box-shadow: 0 0 0 4px rgba(255,255,255,0.5), 0 12px 32px rgba(0,0,0,0.4);
}
.avatar-emoji[b-2rngzuikuk] { font-size: 2.8rem; line-height: 1; user-select: none; }
.avatar-edit-hint[b-2rngzuikuk] {
    position: absolute; bottom: 4px; right: 4px;
    width: 26px; height: 26px;
    background: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.65rem;
    color: #6c5ce7;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    opacity: 0;
    transition: opacity 0.2s;
}
.avatar-wrapper:hover .avatar-edit-hint[b-2rngzuikuk] { opacity: 1; }

/* Hero Info */
.hero-info[b-2rngzuikuk] { flex: 1; min-width: 200px; }
.display-name-row[b-2rngzuikuk] {
    display: flex; align-items: center; gap: 0.6rem;
}
.hero-display-name[b-2rngzuikuk] {
    font-size: 1.9rem; font-weight: 800;
    color: #fff; margin: 0;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.name-edit-btn[b-2rngzuikuk] {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 8px;
    color: #fff; padding: 4px 8px;
    cursor: pointer; font-size: 0.78rem;
    transition: background 0.2s;
}
.name-edit-btn:hover[b-2rngzuikuk] { background: rgba(255,255,255,0.3); }

.display-name-edit[b-2rngzuikuk] {
    display: flex; gap: 0.5rem; align-items: center;
}
.name-input[b-2rngzuikuk] {
    flex: 1; padding: 8px 12px;
    border-radius: 10px; border: 2px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.12);
    color: #fff; font-size: 1rem; font-weight: 600;
    outline: none;
}
.name-input[b-2rngzuikuk]::placeholder { color: rgba(255,255,255,0.5); }
.name-input:focus[b-2rngzuikuk] { border-color: rgba(255,255,255,0.6); }
.name-save-btn[b-2rngzuikuk], .name-cancel-btn[b-2rngzuikuk] {
    padding: 8px 12px; border-radius: 10px;
    border: none; cursor: pointer; font-size: 1rem;
    transition: all 0.2s;
}
.name-save-btn[b-2rngzuikuk] { background: #00b894; color: #fff; }
.name-save-btn:hover[b-2rngzuikuk] { background: #00cec9; }
.name-cancel-btn[b-2rngzuikuk] { background: rgba(255,255,255,0.2); color: #fff; }
.name-cancel-btn:hover[b-2rngzuikuk] { background: rgba(255,255,255,0.35); }

.hero-username[b-2rngzuikuk] {
    color: rgba(255,255,255,0.85); font-size: 0.92rem;
    margin: 0; font-style: normal; font-weight: 600;
    letter-spacing: 0.2px;
}
.hero-username-row[b-2rngzuikuk] {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 6px 0 0; flex-wrap: wrap;
}
.username-copy-btn[b-2rngzuikuk], .username-share-btn[b-2rngzuikuk] {
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 8px; padding: 4px 8px;
    color: #fff; font-size: 0.78rem; font-weight: 600;
    cursor: pointer; transition: background 0.18s, transform 0.12s;
}
.username-copy-btn:hover[b-2rngzuikuk], .username-share-btn:hover[b-2rngzuikuk] {
    background: rgba(255,255,255,0.26);
}
.username-copy-btn:active[b-2rngzuikuk], .username-share-btn:active[b-2rngzuikuk] { transform: scale(0.96); }
.copy-feedback[b-2rngzuikuk] {
    font-size: 0.78rem; color: #55efc4; font-weight: 600;
    animation: fadeIn-b-2rngzuikuk 0.2s ease;
}
@keyframes fadeIn-b-2rngzuikuk { from { opacity:0; transform: translateY(2px);} to { opacity:1; transform:none; } }
.hero-bio[b-2rngzuikuk] {
    color: rgba(255,255,255,0.85); font-size: 0.95rem;
    margin: 6px 0 0;
}

/* Hero Meta Tags */
.hero-meta-tags[b-2rngzuikuk] {
    display: flex; gap: 0.6rem; flex-wrap: wrap;
    margin-top: 0.6rem;
}
.meta-tag[b-2rngzuikuk] {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 4px 12px; border-radius: 20px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.9); font-size: 0.8rem; font-weight: 600;
    backdrop-filter: blur(4px);
}

/* Hero Edit Form */
.hero-edit-form[b-2rngzuikuk] {
    display: flex; flex-direction: column; gap: 0.5rem;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 14px; padding: 1rem;
    backdrop-filter: blur(8px);
}
.hero-form-label[b-2rngzuikuk] {
    font-size: 0.72rem; font-weight: 600; color: rgba(255,255,255,0.6);
    text-transform: uppercase; letter-spacing: 0.5px;
    margin-bottom: -0.2rem;
}
.hero-bio-input[b-2rngzuikuk] {
    resize: vertical; min-height: 48px;
    font-family: inherit;
}
.hero-form-row[b-2rngzuikuk] {
    display: flex; gap: 0.8rem;
}
.hero-form-col[b-2rngzuikuk] {
    flex: 1; display: flex; flex-direction: column; gap: 0.3rem;
}
.hero-form-actions[b-2rngzuikuk] {
    display: flex; gap: 0.5rem; margin-top: 0.3rem;
}
.hero-edit-form .name-input[b-2rngzuikuk] {
    font-size: 0.9rem; padding: 7px 10px;
}
.hero-edit-form .select-chip[b-2rngzuikuk] {
    border-color: rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.8);
}
.hero-edit-form .select-chip:hover[b-2rngzuikuk] {
    border-color: rgba(255,255,255,0.4);
    color: #fff;
}
.hero-edit-form .select-chip.active[b-2rngzuikuk] {
    border-color: #a29bfe;
    background: rgba(162,155,254,0.25);
    color: #fff;
}

/* Hero Stats */
.hero-stats[b-2rngzuikuk] {
    display: flex; gap: 1.5rem;
    margin-left: auto;
}
.hero-stat[b-2rngzuikuk] {
    display: flex; flex-direction: column; align-items: center;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 14px; padding: 0.8rem 1.4rem;
    backdrop-filter: blur(8px);
    transition: background 0.2s;
}
.hero-stat:hover[b-2rngzuikuk] { background: rgba(255,255,255,0.18); }
.stat-icon[b-2rngzuikuk] { font-size: 1.4rem; }
.stat-val[b-2rngzuikuk] { font-size: 1.7rem; font-weight: 800; color: #fff; line-height: 1.1; }
.stat-label[b-2rngzuikuk] { font-size: 0.72rem; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.5px; }

/* ── AVATAR PICKER OVERLAY ── */
.avatar-picker-overlay[b-2rngzuikuk] {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(13,27,42,0.6); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    animation: fadeInOverlay-b-2rngzuikuk 0.2s ease;
}
@keyframes fadeInOverlay-b-2rngzuikuk { from { opacity: 0; } to { opacity: 1; } }

.avatar-picker-panel[b-2rngzuikuk] {
    background: #fff;
    border-radius: 20px;
    padding: 2rem;
    max-width: 480px; width: 90%;
    box-shadow: 0 24px 80px rgba(0,0,0,0.3);
    animation: slideUpPanel-b-2rngzuikuk 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes slideUpPanel-b-2rngzuikuk {
    from { opacity: 0; transform: translateY(30px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.picker-title[b-2rngzuikuk] {
    font-size: 1.2rem; font-weight: 700; color: #0d1b2a;
    margin: 0 0 1.2rem; text-align: center;
}
.picker-section[b-2rngzuikuk] { margin-bottom: 1.2rem; }
.picker-label[b-2rngzuikuk] { font-size: 0.82rem; font-weight: 600; color: #636e72; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.6rem; }
.emoji-grid[b-2rngzuikuk] {
    display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px;
}
.emoji-btn[b-2rngzuikuk] {
    aspect-ratio: 1; border-radius: 10px; border: 2px solid transparent;
    background: #f0f2f8; cursor: pointer; font-size: 1.4rem;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.emoji-btn:hover[b-2rngzuikuk] { background: #e8e3ff; border-color: #b8a9ff; transform: scale(1.1); }
.emoji-btn.selected[b-2rngzuikuk] { border-color: #6c5ce7; background: #ede8ff; box-shadow: 0 0 0 3px rgba(108,92,231,0.2); }

.color-grid[b-2rngzuikuk] {
    display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px;
}
.color-swatch[b-2rngzuikuk] {
    aspect-ratio: 1; border-radius: 50%; border: 3px solid transparent;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 0.9rem; font-weight: 700;
    transition: transform 0.15s, box-shadow 0.15s;
}
.color-swatch:hover[b-2rngzuikuk] { transform: scale(1.15); box-shadow: 0 4px 12px rgba(0,0,0,0.25); }
.color-swatch.selected[b-2rngzuikuk] { border-color: #fff; box-shadow: 0 0 0 3px rgba(0,0,0,0.2); transform: scale(1.1); }

.picker-done-btn[b-2rngzuikuk] {
    width: 100%; padding: 0.8rem; border-radius: 12px;
    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
    color: #fff; font-size: 1rem; font-weight: 700;
    border: none; cursor: pointer;
    transition: all 0.2s;
    margin-top: 0.5rem;
}
.picker-done-btn:hover[b-2rngzuikuk] { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(108,92,231,0.4); }

/* ── MAIN GRID ── */
.profile-grid[b-2rngzuikuk] {
    max-width: 1100px; margin: 2rem auto 0;
    padding: 0 1.5rem;
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 1.5rem;
    align-items: start;
}

/* ── PROFILE CARD ── */
.profile-card[b-2rngzuikuk] {
    background: #fff;
    border-radius: 18px;
    padding: 1.4rem 1.6rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    margin-bottom: 1.4rem;
    transition: box-shadow 0.2s;
}
.profile-card:hover[b-2rngzuikuk] { box-shadow: 0 4px 20px rgba(0,0,0,0.1); }

.card-header[b-2rngzuikuk] {
    display: flex; align-items: center; gap: 0.6rem;
    margin-bottom: 1rem;
}
.card-icon[b-2rngzuikuk] { font-size: 1.2rem; }
.card-title[b-2rngzuikuk] { font-size: 1rem; font-weight: 700; color: #0d1b2a; flex: 1; margin: 0; }
.card-edit-btn[b-2rngzuikuk] {
    background: #f0f2f8; border: none; border-radius: 8px;
    padding: 5px 12px; cursor: pointer; color: #636e72;
    font-size: 0.8rem; font-weight: 600;
    display: flex; align-items: center; gap: 0.3rem;
    transition: all 0.2s;
}
.card-edit-btn:hover[b-2rngzuikuk] { background: #ede8ff; color: #6c5ce7; }

/* About display */
.about-display[b-2rngzuikuk] { display: flex; flex-direction: column; gap: 0.7rem; }
.about-row[b-2rngzuikuk] { display: flex; align-items: flex-start; gap: 0.6rem; }
.about-icon[b-2rngzuikuk] { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.about-text[b-2rngzuikuk] { font-size: 0.9rem; color: #2d3436; line-height: 1.5; }
.about-text b[b-2rngzuikuk] { color: #0d1b2a; }

/* About form */
.about-form[b-2rngzuikuk] { display: flex; flex-direction: column; gap: 0.6rem; }
.form-label[b-2rngzuikuk] { font-size: 0.78rem; font-weight: 600; color: #636e72; text-transform: uppercase; letter-spacing: 0.5px; }
.form-textarea[b-2rngzuikuk] {
    width: 100%; padding: 10px 12px;
    border: 2px solid #e0e3eb; border-radius: 10px;
    font-size: 0.9rem; color: #2d3436; resize: vertical;
    font-family: inherit; transition: border-color 0.2s;
    box-sizing: border-box;
}
.form-textarea:focus[b-2rngzuikuk] { outline: none; border-color: #6c5ce7; }
.form-input[b-2rngzuikuk] {
    width: 100%; padding: 9px 12px;
    border: 2px solid #e0e3eb; border-radius: 10px;
    font-size: 0.9rem; color: #2d3436;
    font-family: inherit; transition: border-color 0.2s;
    box-sizing: border-box;
}
.form-input:focus[b-2rngzuikuk] { outline: none; border-color: #6c5ce7; }

.form-select-group[b-2rngzuikuk] {
    display: flex; gap: 0.5rem; flex-wrap: wrap;
}
.select-chip[b-2rngzuikuk] {
    padding: 6px 14px; border-radius: 20px;
    border: 2px solid #e0e3eb; background: #f0f2f8;
    color: #636e72; font-size: 0.82rem; font-weight: 600;
    cursor: pointer; transition: all 0.15s;
}
.select-chip:hover[b-2rngzuikuk] { border-color: #b8a9ff; color: #6c5ce7; }
.select-chip.active[b-2rngzuikuk] { border-color: #6c5ce7; background: #ede8ff; color: #6c5ce7; }
.flex-wrap[b-2rngzuikuk] { flex-wrap: wrap; }

.form-actions[b-2rngzuikuk] { display: flex; gap: 0.7rem; margin-top: 0.4rem; }
.btn-save[b-2rngzuikuk] {
    padding: 9px 20px; border-radius: 10px;
    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
    color: #fff; border: none; font-weight: 700; font-size: 0.9rem;
    cursor: pointer; display: flex; align-items: center; gap: 0.4rem;
    transition: all 0.2s;
}
.btn-save:hover[b-2rngzuikuk] { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(108,92,231,0.35); }
.btn-cancel-edit[b-2rngzuikuk] {
    padding: 9px 16px; border-radius: 10px;
    background: #f0f2f8; color: #636e72;
    border: none; font-weight: 600; font-size: 0.9rem;
    cursor: pointer; transition: background 0.2s;
}
.btn-cancel-edit:hover[b-2rngzuikuk] { background: #dfe6e9; }

/* ── STREAK CALENDAR ── */
.streak-stats-row[b-2rngzuikuk] {
    display: flex; gap: 1rem; justify-content: space-around;
    margin-bottom: 1.2rem;
}
.streak-stat-item[b-2rngzuikuk] {
    display: flex; flex-direction: column; align-items: center;
}
.streak-stat-num[b-2rngzuikuk] {
    font-size: 2rem; font-weight: 800; line-height: 1;
}
.streak-stat-num.fire[b-2rngzuikuk] { color: #e17055; }
.streak-stat-num.gold[b-2rngzuikuk] { color: #fdcb6e; }
.streak-stat-num.blue[b-2rngzuikuk] { color: #0984e3; }
.streak-stat-lbl[b-2rngzuikuk] { font-size: 0.72rem; color: #b2bec3; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }

.streak-calendar[b-2rngzuikuk] {
    display: flex; gap: 3px;
    overflow-x: auto;
    padding-bottom: 4px;
}
.cal-week[b-2rngzuikuk] { display: flex; flex-direction: column; gap: 3px; }
.cal-day[b-2rngzuikuk] {
    width: 13px; height: 13px; border-radius: 3px;
    background: #e8ecf2;
    transition: transform 0.1s;
    cursor: default;
}
.cal-day:hover[b-2rngzuikuk] { transform: scale(1.3); }
.cal-day.active[b-2rngzuikuk] { background: #6c5ce7; }
.cal-day.today[b-2rngzuikuk] {
    background: #00b894;
    box-shadow: 0 0 0 2px rgba(0,184,148,0.4);
}
.cal-day.future[b-2rngzuikuk] { background: #f0f2f8; opacity: 0.4; }

.cal-legend[b-2rngzuikuk] {
    display: flex; align-items: center; gap: 6px;
    margin-top: 0.7rem; font-size: 0.75rem; color: #b2bec3;
}
.cal-legend-cell[b-2rngzuikuk] {
    width: 13px; height: 13px; border-radius: 3px;
    background: #e8ecf2; display: inline-block;
}
.cal-legend-cell.active[b-2rngzuikuk] { background: #6c5ce7; }

/* ── SCORE SUMMARY GRID ── */
.score-summary-grid[b-2rngzuikuk] {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 1rem; margin-bottom: 1.4rem;
}
.score-card[b-2rngzuikuk] {
    border-radius: 16px; padding: 1.1rem 1.2rem;
    display: flex; align-items: center; gap: 0.9rem;
    transition: transform 0.2s, box-shadow 0.2s;
}
.score-card:hover[b-2rngzuikuk] { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.hsk-card[b-2rngzuikuk] { background: linear-gradient(135deg, #ffe4e6, #fff1f2); border: 1px solid #fecdd3; }
.ielts-card[b-2rngzuikuk] { background: linear-gradient(135deg, #e3f2fd, #e8f4ff); border: 1px solid #bee3f8; }
.done-card[b-2rngzuikuk] { background: linear-gradient(135deg, #e6fff5, #edfff6); border: 1px solid #b2f5e1; }
.streak-card[b-2rngzuikuk] { background: linear-gradient(135deg, #fff8e8, #fffae8); border: 1px solid #fde8a5; }

.score-card-icon[b-2rngzuikuk] { font-size: 1.8rem; flex-shrink: 0; }
.score-card-info[b-2rngzuikuk] { display: flex; flex-direction: column; }
.score-card-label[b-2rngzuikuk] { font-size: 0.75rem; color: #636e72; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin: 0; }
.score-card-val[b-2rngzuikuk] { font-size: 1.6rem; font-weight: 800; color: #0d1b2a; margin: 2px 0 0; line-height: 1; }
.score-card-unit[b-2rngzuikuk] { font-size: 0.85rem; font-weight: 500; color: #636e72; }

/* ── ACTIVITY LIST ── */
.activity-list[b-2rngzuikuk] { display: flex; flex-direction: column; gap: 0.6rem; }
.activity-item[b-2rngzuikuk] {
    display: flex; align-items: center; gap: 0.9rem;
    padding: 0.7rem 0.8rem; border-radius: 12px;
    background: #f8f9fc;
    transition: background 0.15s;
}
.activity-item:hover[b-2rngzuikuk] { background: #f0f2f8; }
.activity-icon[b-2rngzuikuk] {
    width: 38px; height: 38px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; flex-shrink: 0;
}
.activity-icon.skill-hsk[b-2rngzuikuk] { background: #ffe4e6; }
.activity-icon.skill-listening[b-2rngzuikuk] { background: #e3f2fd; }
.activity-icon.skill-reading[b-2rngzuikuk] { background: #e6fff5; }
.activity-icon.skill-writing[b-2rngzuikuk] { background: #fff8e8; }
.activity-icon.skill-speaking[b-2rngzuikuk] { background: #ffeee8; }
.activity-info[b-2rngzuikuk] { flex: 1; min-width: 0; }
.activity-title[b-2rngzuikuk] { font-size: 0.88rem; font-weight: 600; color: #0d1b2a; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.activity-meta[b-2rngzuikuk] { font-size: 0.75rem; color: #b2bec3; margin: 2px 0 0; }
.activity-score[b-2rngzuikuk] { flex-shrink: 0; }

.score-badge[b-2rngzuikuk] {
    display: inline-block; padding: 4px 10px;
    border-radius: 20px; font-size: 0.78rem; font-weight: 700;
}
.ielts-badge[b-2rngzuikuk] { background: #e3f2fd; color: #0984e3; }
.generic-badge[b-2rngzuikuk] { background: #e6fff5; color: #00b894; }

.empty-activity[b-2rngzuikuk] {
    text-align: center; padding: 2rem 1rem;
    color: #b2bec3;
}
.empty-icon[b-2rngzuikuk] { font-size: 2.5rem; margin-bottom: 0.5rem; }
.empty-activity p[b-2rngzuikuk] { font-size: 0.9rem; margin: 0; }
.start-link[b-2rngzuikuk] { color: #6c5ce7; font-weight: 600; text-decoration: none; }
.start-link:hover[b-2rngzuikuk] { text-decoration: underline; }

/* ── SKILL PROGRESS ── */
.skill-progress-list[b-2rngzuikuk] { display: flex; flex-direction: column; gap: 0.9rem; }
.skill-progress-item[b-2rngzuikuk] {}
.skill-progress-header[b-2rngzuikuk] {
    display: flex; align-items: center; gap: 0.5rem;
    margin-bottom: 0.3rem;
}
.skill-icon[b-2rngzuikuk] { font-size: 1rem; }
.skill-name[b-2rngzuikuk] { font-size: 0.85rem; font-weight: 600; color: #2d3436; flex: 1; }
.skill-count[b-2rngzuikuk] { font-size: 0.78rem; color: #b2bec3; }
.skill-bar-track[b-2rngzuikuk] {
    height: 7px; border-radius: 10px; background: #e8ecf2; overflow: hidden;
}
.skill-bar-fill[b-2rngzuikuk] {
    height: 100%; border-radius: 10px;
    transition: width 0.6s cubic-bezier(0.34,1.56,0.64,1);
}

/* ── TOAST NOTIFICATION ── */
.profile-toast[b-2rngzuikuk] {
    position: fixed;
    top: 80px;
    right: 24px;
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 14px 22px;
    border-radius: 14px;
    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    box-shadow: 0 8px 32px rgba(108,92,231,0.35);
    animation: toastSlideIn-b-2rngzuikuk 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes toastSlideIn-b-2rngzuikuk {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}
.profile-toast i[b-2rngzuikuk] {
    font-size: 1.2rem;
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
    .profile-grid[b-2rngzuikuk] {
        grid-template-columns: 1fr;
    }
    .hero-stats[b-2rngzuikuk] {
        margin-left: 0; width: 100%;
        justify-content: space-around;
    }
    .hero-content[b-2rngzuikuk] {
        flex-direction: column;
        align-items: flex-start;
    }
}
@media (max-width: 520px) {
    .profile-hero[b-2rngzuikuk] { padding: 2rem 1rem 1.5rem; }
    .profile-grid[b-2rngzuikuk] { padding: 0 0.8rem; }
    .score-summary-grid[b-2rngzuikuk] { grid-template-columns: 1fr; }
    .emoji-grid[b-2rngzuikuk] { grid-template-columns: repeat(6, 1fr); }
    .color-grid[b-2rngzuikuk] { grid-template-columns: repeat(6, 1fr); }
}

/* ==========================================================================
   DARK MODE OVERRIDES (OBSIDIAN NAVY THEME)
   ========================================================================== */
[data-theme="dark"] .profile-root[b-2rngzuikuk] {
    background: #0b1325;
    color: #f8fafc;
}

[data-theme="dark"] .profile-card[b-2rngzuikuk] {
    background: #15243f;
    border: 1px solid #223554;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .card-title[b-2rngzuikuk] {
    color: #f8fafc;
}

[data-theme="dark"] .card-edit-btn[b-2rngzuikuk] {
    background: #111d33;
    color: #94a3b8;
    border: 1px solid #223554;
}

[data-theme="dark"] .card-edit-btn:hover[b-2rngzuikuk] {
    background: #1c2c4a;
    color: #38bdf8;
}

[data-theme="dark"] .about-text[b-2rngzuikuk] {
    color: #cbd5e1;
}

[data-theme="dark"] .about-text b[b-2rngzuikuk] {
    color: #f8fafc;
}

[data-theme="dark"] .form-label[b-2rngzuikuk] {
    color: #94a3b8;
}

[data-theme="dark"] .form-textarea[b-2rngzuikuk],
[data-theme="dark"] .form-input[b-2rngzuikuk] {
    background: #111d33;
    border-color: #223554;
    color: #f8fafc;
}

[data-theme="dark"] .form-textarea:focus[b-2rngzuikuk],
[data-theme="dark"] .form-input:focus[b-2rngzuikuk] {
    border-color: #38bdf8;
}

[data-theme="dark"] .select-chip[b-2rngzuikuk] {
    background: #111d33;
    border-color: #223554;
    color: #cbd5e1;
}

[data-theme="dark"] .select-chip:hover[b-2rngzuikuk] {
    border-color: #38bdf8;
    color: #38bdf8;
}

[data-theme="dark"] .select-chip.active[b-2rngzuikuk] {
    background: rgba(56, 189, 248, 0.15);
    border-color: #38bdf8;
    color: #38bdf8;
}

[data-theme="dark"] .cal-day[b-2rngzuikuk] {
    background: #111d33;
}

[data-theme="dark"] .cal-day.future[b-2rngzuikuk] {
    background: #0f172a;
}

[data-theme="dark"] .cal-legend-cell[b-2rngzuikuk] {
    background: #111d33;
}

[data-theme="dark"] .hsk-card[b-2rngzuikuk] {
    background: #2b1114;
    border-color: #5c1825;
}

[data-theme="dark"] .ielts-card[b-2rngzuikuk] {
    background: #0c203b;
    border-color: #1e3a8a;
}

[data-theme="dark"] .done-card[b-2rngzuikuk] {
    background: #08291e;
    border-color: #065f46;
}

[data-theme="dark"] .avatar-picker-panel[b-2rngzuikuk] {
    background: #15243f;
    border: 1px solid #223554;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .picker-title[b-2rngzuikuk] {
    color: #f8fafc;
}

[data-theme="dark"] .picker-label[b-2rngzuikuk] {
    color: #94a3b8;
}

[data-theme="dark"] .emoji-btn[b-2rngzuikuk] {
    background: #111d33;
}

[data-theme="dark"] .emoji-btn:hover[b-2rngzuikuk] {
    background: #1c2c4a;
    border-color: #38bdf8;
}