@import '_content/Blazor.Bootstrap/Blazor.Bootstrap.7t9tbfaemk.bundle.scp.css';

/* _content/AptisWeb/Components/Dashboard/ActivityHeatmap.razor.rz.scp.css */
/* ── ActivityHeatmap ───────────────────────────── */
.heatmap-card[b-ufpj5ejsl8] {
    background: var(--surface);
    border: 0.5px solid var(--border);
    padding: 16px 18px;
    border-radius: var(--r-lg);
}

/* Skeleton */
.heatmap-card--skeleton[b-ufpj5ejsl8] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.heatmap-skeleton__header[b-ufpj5ejsl8] {
    height: 40px;
    border-radius: var(--r-md);
    background: linear-gradient(90deg, var(--muted) 25%, rgba(0,0,0,0.06) 50%, var(--muted) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
}

.heatmap-skeleton__grid[b-ufpj5ejsl8] {
    height: 80px;
    border-radius: var(--r-md);
    background: linear-gradient(90deg, var(--muted) 25%, rgba(0,0,0,0.06) 50%, var(--muted) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite 0.2s;
}

/* Header */
.heatmap-header[b-ufpj5ejsl8] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 14px;
}

.heatmap-header__left[b-ufpj5ejsl8] {
    display: flex;
    gap: 10px;
    align-items: center;
}

.heatmap-icon-wrap[b-ufpj5ejsl8] {
    width: 30px;
    height: 30px;
    border-radius: var(--r-md);
    background: #E1F5EE;
    color: #0F6E56;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.heatmap-title[b-ufpj5ejsl8] {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text);
}

.heatmap-sub[b-ufpj5ejsl8] {
    font-size: 12px;
    color: var(--text-3);
    margin-top: 1px;
}

.heatmap-streak[b-ufpj5ejsl8] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.heatmap-streak__value[b-ufpj5ejsl8] {
    font-size: 18px;
    font-weight: 500;
    color: #BA7517;
    line-height: 1;
}

.heatmap-streak__label[b-ufpj5ejsl8] {
    font-size: 11.5px;
    color: var(--text-3);
    margin-top: 2px;
}

/* Grid */
.heatmap-grid[b-ufpj5ejsl8] {
    display: grid;
    grid-template-columns: 28px repeat(13, minmax(0, 1fr));
    gap: 4px;
}

.heatmap-day-label[b-ufpj5ejsl8] {
    width: 28px;
    font-size: 11.5px;
    color: var(--text-3);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 4px;
}

.heatmap-cell[b-ufpj5ejsl8] {
    aspect-ratio: 1;
    min-height: 14px;
    position: relative;
    border-radius: 2px;
    transition: transform 100ms ease-out, box-shadow 100ms ease-out;
    opacity: 0;
    animation: cell-fade-in-b-ufpj5ejsl8 200ms ease-out forwards;
}

@keyframes cell-fade-in-b-ufpj5ejsl8 {
    to { opacity: 1; }
}

.heatmap-cell--empty[b-ufpj5ejsl8] {
    background: transparent;
    animation: none;
    opacity: 1;
}

.heatmap-cell--level-0[b-ufpj5ejsl8] { background: #F1EFE8; }
.heatmap-cell--level-1[b-ufpj5ejsl8] { background: #9FE1CB; }
.heatmap-cell--level-2[b-ufpj5ejsl8] { background: #1D9E75; }
.heatmap-cell--level-3[b-ufpj5ejsl8] { background: #0F6E56; }
.heatmap-cell--level-4[b-ufpj5ejsl8] { background: #04342C; }

.heatmap-cell--login[b-ufpj5ejsl8] {
    box-shadow: inset 0 0 0 1.5px #BA7517;
}

.heatmap-cell--login[b-ufpj5ejsl8]::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-top: 2px solid rgba(186, 117, 23, 0.9);
    transform: rotate(-45deg);
    transform-origin: center;
    pointer-events: none;
}

.heatmap-cell:not(.heatmap-cell--empty):hover[b-ufpj5ejsl8] {
    transform: scale(1.15);
    box-shadow: inset 0 0 0 1px var(--text);
    z-index: 1;
    position: relative;
}

/* Month row */
.heatmap-months[b-ufpj5ejsl8] {
    display: grid;
    grid-template-columns: 28px repeat(13, minmax(0, 1fr));
    gap: 4px;
    margin-top: 6px;
}

.heatmap-month-label[b-ufpj5ejsl8] {
    font-size: 11.5px;
    color: var(--text-3);
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
}

/* Legend */
.heatmap-legend[b-ufpj5ejsl8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    font-size: 12px;
    color: var(--text-3);
}

.heatmap-legend__left[b-ufpj5ejsl8] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.heatmap-legend__text[b-ufpj5ejsl8] {
    margin-right: 2px;
}

.heatmap-legend__range[b-ufpj5ejsl8] {
    color: var(--text-2);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}

.heatmap-legend__swatch[b-ufpj5ejsl8] {
    width: 11px;
    height: 11px;
    border-radius: 2px;
    flex-shrink: 0;
}

.heatmap-legend__right[b-ufpj5ejsl8] {
    display: flex;
    align-items: center;
    gap: 5px;
}

.heatmap-legend__login-swatch[b-ufpj5ejsl8] {
    position: relative;
    width: 11px;
    height: 11px;
    border-radius: 2px;
    background: white;
    border: 1.5px solid #BA7517;
    flex-shrink: 0;
}

.heatmap-legend__login-swatch[b-ufpj5ejsl8]::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-top: 2px solid #BA7517;
    transform: rotate(-45deg);
}

/* Reduced motion: instant render, no stagger */
@media (prefers-reduced-motion: reduce) {
    .heatmap-cell[b-ufpj5ejsl8] {
        animation: none;
        opacity: 1;
    }
    .heatmap-skeleton__header[b-ufpj5ejsl8],
    .heatmap-skeleton__grid[b-ufpj5ejsl8] {
        animation: none;
    }
}

.heatmap-empty-prompt[b-ufpj5ejsl8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 10px;
    margin-top: 10px;
    color: var(--text-3);
    font-size: 13px;
    text-align: center;
}

.heatmap-empty__cta[b-ufpj5ejsl8] {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    color: var(--brand);
    text-decoration: none;
}

.heatmap-empty__cta:hover[b-ufpj5ejsl8] {
    text-decoration: underline;
}

.heatmap-empty__cta:focus-visible[b-ufpj5ejsl8] {
    outline: 3px solid rgba(8, 80, 65, 0.28);
    outline-offset: 3px;
    border-radius: 8px;
}
/* _content/AptisWeb/Components/Dashboard/GreetingCard.razor.rz.scp.css */
/* ── GreetingCard ──────────────────────────────── */
/* Note: global prefers-reduced-motion in tokens.css sets duration 0.01ms —
   that covers all animations here automatically. */
.greeting-card[b-pi63bhvb99] {
    background: #04342C;
    color: white;
    padding: 18px 20px;
    border-radius: var(--r-lg);
    min-height: 240px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

/* Skeleton */
.greeting-card--skeleton[b-pi63bhvb99] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: flex-start;
    background: var(--muted);
}

.greeting-skeleton__top[b-pi63bhvb99] {
    height: 80px;
    border-radius: var(--r-md);
    background: linear-gradient(90deg, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.12) 50%, rgba(0,0,0,0.06) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-pi63bhvb99 1.4s infinite;
}

.greeting-skeleton__quote[b-pi63bhvb99] {
    height: 70px;
    border-radius: var(--r-md);
    background: linear-gradient(90deg, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.12) 50%, rgba(0,0,0,0.06) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-pi63bhvb99 1.4s infinite 0.2s;
}

@keyframes shimmer-b-pi63bhvb99 {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Icon decoration */
.greeting-card__icon-deco[b-pi63bhvb99] {
    position: absolute;
    top: 16px;
    right: 18px;
    opacity: 0.5;
    width: 36px;
    height: 36px;
    color: white;
}

/* Top section */
.greeting-card__date[b-pi63bhvb99] {
    font-size: 10px;
    color: #9FE1CB;
    letter-spacing: 0.7px;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.greeting-card__heading[b-pi63bhvb99] {
    font-size: 24px;
    font-weight: 500;
    color: #FFFFFF;
    margin: 0;
    line-height: 1.2;
}

.greeting-card__name[b-pi63bhvb99] {
    font-size: 16px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    margin: 4px 0 0;
}

/* Quote box */
.greeting-card__quote[b-pi63bhvb99] {
    background: rgba(255, 255, 255, 0.08);
    padding: 12px 14px;
    border-radius: 0 8px 8px 0;
    border-left: 2px solid #9FE1CB;
    margin-top: 16px;
}

.greeting-card__quote-text[b-pi63bhvb99] {
    font-family: var(--font-vietnamese-ui);
    font-size: 12.5px;
    font-style: normal;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
    letter-spacing: 0;
    margin: 0 0 6px;
    overflow-wrap: break-word;
    text-rendering: optimizeLegibility;
}

.greeting-card__quote-author[b-pi63bhvb99] {
    font-size: 10px;
    color: #9FE1CB;
    display: flex;
    gap: 4px;
    align-items: center;
}
/* _content/AptisWeb/Components/Dashboard/Leaderboard.razor.rz.scp.css */
/* ── Leaderboard ───────────────────────────────── */
.leaderboard-card[b-zqmlxjcrsx] {
    background: var(--surface);
    border: 0.5px solid var(--border);
    padding: 16px 18px;
    border-radius: var(--r-lg);
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Skeleton */
.leaderboard-card--skeleton[b-zqmlxjcrsx] {
    gap: 12px;
}

.leaderboard-skeleton__header[b-zqmlxjcrsx] {
    height: 40px;
    border-radius: var(--r-md);
    background: linear-gradient(90deg, var(--muted) 25%, rgba(0,0,0,0.06) 50%, var(--muted) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
}

.leaderboard-skeleton__list[b-zqmlxjcrsx] {
    height: 180px;
    border-radius: var(--r-md);
    background: linear-gradient(90deg, var(--muted) 25%, rgba(0,0,0,0.06) 50%, var(--muted) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite 0.2s;
}

/* Header */
.leaderboard-header[b-zqmlxjcrsx] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 14px;
}

.leaderboard-header__left[b-zqmlxjcrsx] {
    display: flex;
    gap: 10px;
    align-items: center;
}

.leaderboard-icon-wrap[b-zqmlxjcrsx] {
    width: 30px;
    height: 30px;
    border-radius: var(--r-md);
    background: #FBEAF0;
    color: #993556;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.leaderboard-title[b-zqmlxjcrsx] {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text);
}

.leaderboard-sub[b-zqmlxjcrsx] {
    font-size: 12px;
    color: var(--text-3);
    margin-top: 1px;
}

/* Tabs */
.leaderboard-tabs[b-zqmlxjcrsx] {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
}

.leaderboard-tab[b-zqmlxjcrsx] {
    flex: 1;
    min-height: 44px;
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 5px;
    border: none;
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
    text-align: center;
}

.leaderboard-tab--active[b-zqmlxjcrsx] {
    background: var(--muted);
    color: var(--text);
    font-weight: 500;
}

.leaderboard-tab:hover:not(.leaderboard-tab--active)[b-zqmlxjcrsx] {
    background: var(--muted);
    opacity: 0.6;
}

.leaderboard-tab:focus-visible[b-zqmlxjcrsx],
.leaderboard-footer-link:focus-visible[b-zqmlxjcrsx] {
    outline: 3px solid rgba(8, 80, 65, 0.28);
    outline-offset: 2px;
}

/* List */
.leaderboard-list[b-zqmlxjcrsx] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.leaderboard-loading[b-zqmlxjcrsx] {
    font-size: 12px;
    color: var(--text-3);
    text-align: center;
    padding: 24px 0;
}

/* Entry row */
.leaderboard-row[b-zqmlxjcrsx] {
    display: flex;
    gap: 8px;
    align-items: center;
    min-height: 44px;
    padding: 8px;
    border-radius: 6px;
    background: transparent;
    opacity: 0;
    animation: row-slide-in-b-zqmlxjcrsx 200ms ease-out forwards;
    animation-delay: var(--row-delay, 0ms);
}

@keyframes row-slide-in-b-zqmlxjcrsx {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.leaderboard-row--top1[b-zqmlxjcrsx] {
    background: linear-gradient(90deg, rgba(250, 199, 117, 0.12), transparent);
}

.leaderboard-row--current[b-zqmlxjcrsx] {
    background: #E1F5EE;
    opacity: 1;
    animation: none;
}

/* Rank cell */
.leaderboard-row__rank[b-zqmlxjcrsx] {
    width: 16px;
    text-align: center;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-3);
    flex-shrink: 0;
}

.leaderboard-row__rank--gold[b-zqmlxjcrsx] {
    color: #BA7517;
}

/* Avatar */
.leaderboard-avatar[b-zqmlxjcrsx] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11.5px;
    font-weight: 500;
    flex-shrink: 0;
}

.leaderboard-avatar--amber[b-zqmlxjcrsx]  { background: #FAEEDA; color: #BA7517; }
.leaderboard-avatar--teal[b-zqmlxjcrsx]   { background: #E1F5EE; color: #0F6E56; }
.leaderboard-avatar--pink[b-zqmlxjcrsx]   { background: #FBEAF0; color: #993556; }
.leaderboard-avatar--purple[b-zqmlxjcrsx] { background: #EEEDFE; color: #534AB7; }
.leaderboard-avatar--blue[b-zqmlxjcrsx]   { background: #E6F1FB; color: #185FA5; }
.leaderboard-avatar--green[b-zqmlxjcrsx]  { background: #EAF3DE; color: #3B6D11; }
.leaderboard-avatar--current[b-zqmlxjcrsx] {
    background: white;
    color: var(--brand);
    border: 0.5px solid var(--brand);
}

/* Name */
.leaderboard-row__name[b-zqmlxjcrsx] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.leaderboard-row__display-name[b-zqmlxjcrsx] {
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text);
}

.leaderboard-row__sub[b-zqmlxjcrsx] {
    font-size: 11.5px;
    color: var(--text-3);
    margin-top: 1px;
}

.leaderboard-row__sub--current[b-zqmlxjcrsx] {
    color: #0F6E56;
}

/* Score */
.leaderboard-row__score[b-zqmlxjcrsx] {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 3px;
}

.leaderboard-check-icon[b-zqmlxjcrsx] {
    color: var(--text-3);
    opacity: 0.7;
}

/* Divider */
.leaderboard-divider[b-zqmlxjcrsx] {
    height: 0.5px;
    background: var(--border);
    margin: 4px 0;
}

/* Footer */
.leaderboard-footer-link[b-zqmlxjcrsx] {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 12px;
    color: var(--info-fg);
    text-decoration: none;
    margin-top: 10px;
    padding: 8px 0 0;
    border-top: 0.5px solid var(--border);
}

.leaderboard-footer-link:hover[b-zqmlxjcrsx] {
    text-decoration: underline;
}

/* Reduced motion: instant render */
@media (prefers-reduced-motion: reduce) {
    .leaderboard-row[b-zqmlxjcrsx] {
        animation: none;
        opacity: 1;
    }
    .leaderboard-skeleton__header[b-zqmlxjcrsx],
    .leaderboard-skeleton__list[b-zqmlxjcrsx] {
        animation: none;
    }
    .leaderboard-pulse[b-zqmlxjcrsx] {
        animation: none !important;
    }
}

@media (max-width: 768px) {
    .leaderboard-tab[b-zqmlxjcrsx] {
        min-height: 44px;
    }
}

/* Pulse animation for current user */
@keyframes leaderboard-pulse-b-zqmlxjcrsx {
    0%   { background: #E1F5EE; }
    50%  { background: #9FE1CB; }
    100% { background: #E1F5EE; }
}
/* _content/AptisWeb/Components/IntroduceTest.razor.rz.scp.css */

/* ── Reading intro redesign (teal, compact) ─────────────────── */

@keyframes ri-entry-b-46epmy4sxh {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ri-page[b-46epmy4sxh] {
    min-height: calc(var(--app-dvh, 100dvh) - var(--topbar-height, 56px) - var(--layout-footer-height, 0px));
    background: var(--bg);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 32px 16px 48px;
}

.ri-card[b-46epmy4sxh] {
    background: var(--surface);
    border: 0.5px solid var(--border-strong);
    border-radius: var(--r-lg);
    padding: 26px 30px;
    max-width: 600px;
    width: 100%;
}

/* Hero */
.ri-hero[b-46epmy4sxh] {
    text-align: center;
    margin-bottom: 22px;
}

.ri-icon[b-46epmy4sxh] {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: #E1F5EE;
    color: #0F6E56;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin: 0 auto 12px;
    animation: ri-icon-pulse-b-46epmy4sxh 3s ease-in-out 1;
}

@keyframes ri-icon-pulse-b-46epmy4sxh {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}

.ri-tag[b-46epmy4sxh] {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--text-3);
    letter-spacing: 0.5px;
    padding: 2px 8px;
    background: var(--muted);
    border-radius: 999px;
    margin-bottom: 10px;
}

.ri-title[b-46epmy4sxh] {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.25;
    color: var(--text);
    margin: 0 0 6px;
}

.ri-sub[b-46epmy4sxh] {
    font-size: 13px;
    color: var(--text-2);
    margin: 0;
}

/* Info rows */
.ri-info[b-46epmy4sxh] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}

.ri-info-row[b-46epmy4sxh] {
    background: var(--muted);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.ri-info-icon[b-46epmy4sxh] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.ri-info-body[b-46epmy4sxh] {
    flex: 1;
    min-width: 0;
}

.ri-info-label[b-46epmy4sxh] {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text);
    margin: 0 0 2px;
}

.ri-info-val[b-46epmy4sxh] {
    font-size: 11.5px;
    color: var(--text-2);
    margin: 0;
    line-height: 1.5;
}

/* Tip box */
.ri-tip[b-46epmy4sxh] {
    background: #FAEEDA;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 20px;
}

.ri-tip-h[b-46epmy4sxh] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 500;
    color: #854F0B;
    letter-spacing: 0.3px;
    margin-bottom: 8px;
}

.ri-tip-h i[b-46epmy4sxh] {
    font-size: 13px;
    color: #BA7517;
}

.ri-tip-list[b-46epmy4sxh] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ri-tip-list li[b-46epmy4sxh] {
    position: relative;
    padding-left: 14px;
    font-size: 11.5px;
    color: #633806;
    line-height: 1.5;
}

.ri-tip-list li[b-46epmy4sxh]::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 7px;
    width: 4px;
    height: 4px;
    background: #BA7517;
    border-radius: 50%;
}

/* CTA */
.ri-cta[b-46epmy4sxh] {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 8px;
    margin-bottom: 14px;
}

.ri-btn-back[b-46epmy4sxh] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 0.5px solid var(--border-strong);
    background: var(--surface);
    color: var(--text-2);
    transition: background var(--t-fast), color var(--t-fast);
}

.ri-btn-back:hover[b-46epmy4sxh] {
    background: var(--muted);
    color: var(--text);
}

.ri-btn-start[b-46epmy4sxh] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    background: var(--brand);
    color: white;
    transition: background var(--t-fast);
}

.ri-btn-start:hover[b-46epmy4sxh] {
    background: var(--brand-hover);
}

/* Divider */
.ri-divider[b-46epmy4sxh] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 12px;
}

.ri-divider span:first-child[b-46epmy4sxh],
.ri-divider span:last-child[b-46epmy4sxh] {
    flex: 1;
    height: 0.5px;
    background: var(--border-strong);
}

.ri-divider-t[b-46epmy4sxh] {
    font-size: 11px;
    color: var(--text-3);
    white-space: nowrap;
}

/* Part picker */
.ri-picker[b-46epmy4sxh] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
}

.ri-picker-select[b-46epmy4sxh] {
    width: 100%;
    padding: 9px 12px;
    border-radius: 8px;
    border: 0.5px solid var(--border-strong);
    background: var(--surface);
    font-size: 12.5px;
    color: var(--text);
    cursor: pointer;
    appearance: auto;
}

.ri-picker-select:focus[b-46epmy4sxh] {
    outline: none;
    border-color: var(--brand);
    box-shadow: var(--ring);
}

.ri-btn-part[b-46epmy4sxh] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 9px 14px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    border: 0.5px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    white-space: nowrap;
    transition: background var(--t-fast);
}

.ri-btn-part:hover[b-46epmy4sxh] {
    background: var(--muted);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .ri-page[b-46epmy4sxh] {
        padding: 22px 18px 40px;
    }

    .ri-card[b-46epmy4sxh] {
        padding: 22px 18px;
    }

    .ri-cta[b-46epmy4sxh] {
        grid-template-columns: 1fr 1fr;
    }

    .ri-picker[b-46epmy4sxh] {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ri-card[b-46epmy4sxh],
    .ri-info-row[b-46epmy4sxh],
    .ri-tip[b-46epmy4sxh],
    .ri-tip-list li[b-46epmy4sxh] {
        animation: none !important;
    }

    .ri-icon[b-46epmy4sxh] {
        animation: none !important;
    }
}

/* ── End Reading intro redesign ─────────────────────────────── */

.welcome-container[b-46epmy4sxh] {
    min-height: calc(var(--app-dvh) - var(--topbar-height) - var(--layout-footer-height));
    background: var(--primary-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    position: relative;
    overflow: hidden;
}

.welcome-container[b-46epmy4sxh]::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    animation: pulse-b-46epmy4sxh 15s ease-in-out infinite;
}

@keyframes pulse-b-46epmy4sxh {
    0%, 100% {
        transform: scale(1);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.3;
    }
}

.welcome-card[b-46epmy4sxh] {
    background: var(--bg-surface, #ffffff);
    color: var(--text-primary, #1A1A18);
    border-radius: 24px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.2);
    max-width: 700px;
    width: 100%;
    overflow: hidden;
    position: relative;
    z-index: 1;
    animation: slideUp-b-46epmy4sxh 0.6s ease-out;
}

@keyframes slideUp-b-46epmy4sxh {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card-header-section[b-46epmy4sxh] {
    padding: 40px 40px 30px;
    text-align: center;
    position: relative;
}

.exam-icon[b-46epmy4sxh] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    font-size: 2.5rem;
    color: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.icon-listening[b-46epmy4sxh] {
    background: linear-gradient(135deg, #f72585 0%, #ff758f 100%);
}

.icon-speaking[b-46epmy4sxh] {
    background: linear-gradient(135deg, #4361ee 0%, #738bff 100%);
}

.icon-writing[b-46epmy4sxh] {
    background: linear-gradient(135deg, #3a86ff 0%, #63b3ff 100%);
}

.icon-grammar[b-46epmy4sxh] {
    background: linear-gradient(135deg, #7209b7 0%, #9d4edd 100%);
}

.icon-reading[b-46epmy4sxh] {
    background: linear-gradient(135deg, #f77f00 0%, #fcbf49 100%);
}

.icon-default[b-46epmy4sxh] {
    background: var(--primary-gradient);
}

.welcome-title[b-46epmy4sxh] {
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.welcome-subtitle[b-46epmy4sxh] {
    font-size: 1rem;
    color: var(--text-secondary);
}

.card-body-section[b-46epmy4sxh] {
    padding: 0 40px 40px;
}

.info-list[b-46epmy4sxh] {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
}

.info-item[b-46epmy4sxh] {
    display: flex;
    align-items: flex-start;
    padding: 18px 20px;
    background: var(--bg-muted, #f8f9fa);
    border-radius: 12px;
    margin-bottom: 12px;
    transition: all 0.3s ease;
}

.info-item:hover[b-46epmy4sxh] {
    background: var(--bg-hover, #f0f4ff);
    transform: translateX(5px);
}

.info-icon[b-46epmy4sxh] {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.info-icon.play[b-46epmy4sxh] {
    background: linear-gradient(135deg, #48bb78 0%, #68d391 100%);
    color: white;
}

.info-icon.time[b-46epmy4sxh] {
    background: linear-gradient(135deg, #ed8936 0%, #f6ad55 100%);
    color: white;
}

.info-icon.questions[b-46epmy4sxh] {
    background: linear-gradient(135deg, #4299e1 0%, #63b3ed 100%);
    color: white;
}

.info-icon.tip[b-46epmy4sxh] {
    background: linear-gradient(135deg, #9f7aea 0%, #b794f4 100%);
    color: white;
}

.info-content[b-46epmy4sxh] {
    flex: 1;
}

.info-title[b-46epmy4sxh] {
    font-weight: 500;
    color: var(--text-primary, #2d3748);
    margin-bottom: 4px;
    font-size: 1rem;
}

.info-desc[b-46epmy4sxh] {
    color: var(--text-secondary, #718096);
    font-size: 0.9rem;
    margin: 0;
}

.highlight[b-46epmy4sxh] {
    color: #667eea;
    font-weight: 500;
}

.tips-section[b-46epmy4sxh] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 30px;
}

.tips-title[b-46epmy4sxh] {
    font-weight: 500;
    color: #667eea;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tips-list[b-46epmy4sxh] {
    margin: 0;
    padding-left: 20px;
    color: var(--text-secondary, #4a5568);
}

.tips-list li[b-46epmy4sxh] {
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.tips-list li:last-child[b-46epmy4sxh] {
    margin-bottom: 0;
}

.speaking-mode-section[b-46epmy4sxh] {
    background: var(--bg-muted, #f8fafc);
    border: 1px solid var(--border-subtle, #e2e8f0);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 22px;
}

.speaking-mode-title[b-46epmy4sxh] {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary, #1e293b);
    margin-bottom: 10px;
}

.speaking-mode-options[b-46epmy4sxh] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.speaking-mode-option[b-46epmy4sxh] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary, #334155);
    font-weight: 500;
}

.speaking-mode-note[b-46epmy4sxh] {
    margin-top: 10px;
    font-size: 0.86rem;
    color: var(--text-secondary, #64748b);
}

.speaking-mode-help[b-46epmy4sxh] {
    margin-top: 10px;
    display: grid;
    gap: 8px;
}

.speaking-mode-help-item[b-46epmy4sxh] {
    font-size: 0.88rem;
    color: var(--text-secondary, #334155);
    line-height: 1.45;
}

.action-section[b-46epmy4sxh] {
    display: flex;
    gap: 15px;
}

.btn-start[b-46epmy4sxh] {
    flex: 1;
    background: var(--primary-gradient);
    color: white;
    border: none;
    padding: 18px 30px;
    border-radius: var(--radius-lg);
    font-size: 1.1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    position: relative;
    overflow: hidden;
}

.btn-start[b-46epmy4sxh]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.btn-start:hover[b-46epmy4sxh]::before {
    left: 100%;
}

.btn-start:hover[b-46epmy4sxh] {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4);
}

.btn-start:active[b-46epmy4sxh] {
    transform: translateY(-1px);
}

.btn-back[b-46epmy4sxh] {
    background: var(--bg-surface, #ffffff);
    color: #667eea;
    border: 2px solid var(--border-default, #e2e8f0);
    padding: 18px 25px;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-back:hover[b-46epmy4sxh] {
    border-color: #667eea;
    background: var(--bg-hover, #f0f4ff);
}

.start-icon[b-46epmy4sxh] {
    width: 35px;
    height: 35px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.decorative-circles[b-46epmy4sxh] {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    opacity: 0.05;
    pointer-events: none;
}

.decorative-circles[b-46epmy4sxh]::before,
.decorative-circles[b-46epmy4sxh]::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 2px solid #667eea;
}

.decorative-circles[b-46epmy4sxh]::before {
    width: 150px;
    height: 150px;
    top: -30px;
    right: -30px;
}

.decorative-circles[b-46epmy4sxh]::after {
    width: 100px;
    height: 100px;
    top: 20px;
    right: 20px;
}

@media (max-width: 576px) {
    .welcome-container[b-46epmy4sxh] {
        padding: 20px 15px;
    }

    .card-header-section[b-46epmy4sxh],
    .card-body-section[b-46epmy4sxh] {
        padding-left: 25px;
        padding-right: 25px;
    }

    .welcome-title[b-46epmy4sxh] {
        font-size: 1.5rem;
    }

    .info-item[b-46epmy4sxh] {
        padding: 15px;
    }

    .info-icon[b-46epmy4sxh] {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .action-section[b-46epmy4sxh] {
        flex-direction: column;
    }

    .btn-back[b-46epmy4sxh] {
        order: 2;
    }
}
/* _content/AptisWeb/Components/Layout/AdminLayout.razor.rz.scp.css */
.admin-container[b-uhv3y6zxn6] {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: var(--app-dvh, 100dvh);
    background: var(--bg-base, #FAFAF7);
    color: var(--text-primary, #1A1A18);
    font-family: var(--font-sans, "Be Vietnam Pro", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
    --admin-transition: var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
    --admin-bounce: var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}

.admin-sidebar[b-uhv3y6zxn6] {
    width: 256px;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: var(--app-dvh, 100dvh);
    color: #F8FAFC;
    background:
        radial-gradient(1100px 600px at -10% -10%, rgba(159, 225, 203, 0.18), transparent 60%),
        radial-gradient(600px 400px at 100% 100%, rgba(96, 165, 250, 0.06), transparent 50%),
        linear-gradient(180deg, #053D33 0%, #04342C 60%, #032820 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 16px 0 36px rgba(4, 52, 44, 0.18);
    transition: width 0.3s var(--admin-transition, cubic-bezier(0.4, 0, 0.2, 1)), transform 0.3s var(--admin-transition, cubic-bezier(0.4, 0, 0.2, 1));
    padding-left: env(safe-area-inset-left);
}

.admin-sidebar.collapsed[b-uhv3y6zxn6] {
    width: 76px;
}

.sidebar-header[b-uhv3y6zxn6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 72px;
    padding: 14px;
    padding-top: max(14px, env(safe-area-inset-top));
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.logo[b-uhv3y6zxn6] {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 10px;
}

.logo img[b-uhv3y6zxn6] {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 8px;
    background: #ffffff;
    object-fit: contain;
}

.logo-text[b-uhv3y6zxn6] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.1;
}

.logo-title[b-uhv3y6zxn6] {
    color: #ffffff;
    font-size: 0.98rem;
    font-weight: 800;
    letter-spacing: 0;
}

.logo-subtitle[b-uhv3y6zxn6] {
    margin-top: 3px;
    color: rgba(248, 250, 252, 0.68);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.sidebar-toggle[b-uhv3y6zxn6],
.mobile-menu-toggle[b-uhv3y6zxn6],
.btn-icon[b-uhv3y6zxn6],
.btn-close[b-uhv3y6zxn6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.sidebar-toggle[b-uhv3y6zxn6] {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: #E2E8F0;
}

.sidebar-toggle:hover[b-uhv3y6zxn6] {
    background: rgba(159, 225, 203, 0.16);
    color: #ffffff;
}

.sidebar-nav[b-uhv3y6zxn6] {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 12px 10px 14px;
}

.sidebar-section[b-uhv3y6zxn6] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar-section--support[b-uhv3y6zxn6] {
    margin-top: 4px;
}

.sidebar-section-title[b-uhv3y6zxn6] {
    padding: 12px 8px 7px;
    color: rgba(226, 232, 240, 0.64);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.sidebar-search[b-uhv3y6zxn6] {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 2px 8px;
}

.sidebar-search > i[b-uhv3y6zxn6] {
    position: absolute;
    left: 11px;
    color: rgba(226, 232, 240, 0.55);
    font-size: 0.86rem;
    pointer-events: none;
}

.sidebar-search input[b-uhv3y6zxn6] {
    width: 100%;
    min-height: 38px;
    padding: 6px 32px 6px 32px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: #F8FAFC;
    font-size: 0.84rem;
    font-family: inherit;
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.sidebar-search input[b-uhv3y6zxn6]::placeholder {
    color: rgba(226, 232, 240, 0.5);
}

.sidebar-search input:focus[b-uhv3y6zxn6] {
    outline: none;
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(159, 225, 203, 0.5);
    box-shadow: 0 0 0 3px rgba(159, 225, 203, 0.16);
}

.sidebar-search-clear[b-uhv3y6zxn6] {
    position: absolute;
    right: 6px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: rgba(226, 232, 240, 0.7);
    font-size: 0.72rem;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease;
}

.sidebar-search-clear:hover[b-uhv3y6zxn6] {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.sidebar-empty[b-uhv3y6zxn6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px 16px;
    color: rgba(226, 232, 240, 0.6);
    text-align: center;
    font-size: 0.82rem;
}

.sidebar-empty i[b-uhv3y6zxn6] {
    font-size: 1.4rem;
    color: rgba(226, 232, 240, 0.4);
}

.sidebar-section-divider[b-uhv3y6zxn6] {
    height: 1px;
    margin: 12px 8px;
    background: rgba(255, 255, 255, 0.10);
}

.nav-item[b-uhv3y6zxn6] {
    --icon-color: #9FE1CB;
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 6px 8px;
    border: 0.5px solid transparent;
    border-radius: var(--radius-input, 8px);
    color: rgba(241, 245, 249, 0.82);
    background: transparent;
    text-decoration: none;
    font-size: 0.86rem;
    font-weight: 500;
    line-height: 1.3;
    transition: background var(--motion-fast, 150ms) var(--admin-transition, ease),
                color var(--motion-fast, 150ms) var(--admin-transition, ease);
}

.nav-item[b-uhv3y6zxn6]::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: transparent;
    transition: background 0.18s ease;
}

.nav-item.active[b-uhv3y6zxn6]::before {
    background: #9FE1CB;
    box-shadow: 0 0 14px rgba(159, 225, 203, 0.55);
    animation: nav-pulse-b-uhv3y6zxn6 2s ease-in-out infinite;
}

@keyframes nav-pulse-b-uhv3y6zxn6 {
    0%, 100% { box-shadow: 0 0 14px rgba(159, 225, 203, 0.55); }
    50% { box-shadow: 0 0 20px rgba(159, 225, 203, 0.8); }
}

.nav-item:visited[b-uhv3y6zxn6] {
    color: rgba(241, 245, 249, 0.82);
}

.nav-item:hover[b-uhv3y6zxn6] {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.08);
}

.nav-item.active[b-uhv3y6zxn6] {
    color: #ffffff;
    background: rgba(159, 225, 203, 0.16);
    border-color: rgba(159, 225, 203, 0.34);
}

.nav-item:focus-visible[b-uhv3y6zxn6],
.sidebar-toggle:focus-visible[b-uhv3y6zxn6],
.mobile-menu-toggle:focus-visible[b-uhv3y6zxn6],
.btn-icon:focus-visible[b-uhv3y6zxn6],
.btn-logout:focus-visible[b-uhv3y6zxn6],
.user-menu:focus-visible[b-uhv3y6zxn6],
.dropdown-item:focus-visible[b-uhv3y6zxn6] {
    outline: 2px solid rgba(159, 225, 203, 0.8);
    outline-offset: 2px;
}

.nav-item i[b-uhv3y6zxn6] {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 8px;
    color: var(--icon-color);
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.98rem;
}

.nav-item.active i[b-uhv3y6zxn6],
.nav-item:hover i[b-uhv3y6zxn6] {
    background: rgba(255, 255, 255, 0.12);
}

.nav-item span[b-uhv3y6zxn6] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-item--dashboard[b-uhv3y6zxn6] { --icon-color: #60a5fa; }
.nav-item--students[b-uhv3y6zxn6] { --icon-color: #34d399; }
.nav-item--courses[b-uhv3y6zxn6] { --icon-color: #fbbf24; }
.nav-item--focus[b-uhv3y6zxn6] { --icon-color: #c4b5fd; }
.nav-item--materials[b-uhv3y6zxn6] { --icon-color: #5eead4; }
.nav-item--plans[b-uhv3y6zxn6] { --icon-color: #38bdf8; }
.nav-item--audit[b-uhv3y6zxn6] { --icon-color: #fb7185; }
.nav-item--questions[b-uhv3y6zxn6] { --icon-color: #22d3ee; }
.nav-item--reviews[b-uhv3y6zxn6] { --icon-color: #a78bfa; }
.nav-item--issues[b-uhv3y6zxn6] { --icon-color: #f59e0b; }
.nav-item--video[b-uhv3y6zxn6] { --icon-color: #86efac; }
.nav-item--tips[b-uhv3y6zxn6] { --icon-color: #f59e0b; }
.nav-item--settings[b-uhv3y6zxn6] { --icon-color: #f472b6; }
.nav-item--help[b-uhv3y6zxn6] { --icon-color: #93c5fd; }
.nav-item--prefs[b-uhv3y6zxn6] { --icon-color: #fdba74; }

.admin-sidebar.collapsed .logo-text[b-uhv3y6zxn6],
.admin-sidebar.collapsed .sidebar-section-title[b-uhv3y6zxn6],
.admin-sidebar.collapsed .sidebar-section-divider[b-uhv3y6zxn6],
.admin-sidebar.collapsed .nav-item span[b-uhv3y6zxn6],
.admin-sidebar.collapsed .btn-logout span[b-uhv3y6zxn6] {
    display: none;
}

.admin-sidebar.collapsed .sidebar-header[b-uhv3y6zxn6] {
    justify-content: center;
    padding-inline: 10px;
}

.admin-sidebar.collapsed .logo[b-uhv3y6zxn6] {
    display: none;
}

.admin-sidebar.collapsed .sidebar-nav[b-uhv3y6zxn6] {
    padding-inline: 9px;
}

.admin-sidebar.collapsed .nav-item[b-uhv3y6zxn6] {
    justify-content: center;
    padding-inline: 6px;
}

.admin-sidebar.collapsed .nav-item i[b-uhv3y6zxn6] {
    width: 34px;
    height: 34px;
}

/* Tooltip for collapsed (icon-only) sidebar so each item stays identifiable */
.admin-sidebar.collapsed .nav-item[b-uhv3y6zxn6]::after {
    content: attr(data-label);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) scale(0.96);
    transform-origin: left center;
    z-index: 1200;
    padding: 7px 11px;
    border-radius: 8px;
    background: #04342C;
    color: #F8FAFC;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 8px 22px rgba(4, 22, 18, 0.5);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.admin-sidebar.collapsed .nav-item:hover[b-uhv3y6zxn6]::after,
.admin-sidebar.collapsed .nav-item:focus-visible[b-uhv3y6zxn6]::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) scale(1);
}

.sidebar-footer[b-uhv3y6zxn6] {
    padding: 12px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.btn-logout[b-uhv3y6zxn6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 40px;
    gap: 8px;
    border: 1px solid rgba(253, 186, 116, 0.24);
    border-radius: 8px;
    background: rgba(251, 146, 60, 0.12);
    color: #ffedd5;
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.btn-logout:hover[b-uhv3y6zxn6] {
    transform: translateY(-1px);
    background: rgba(251, 146, 60, 0.20);
    border-color: rgba(253, 186, 116, 0.38);
}

.admin-main[b-uhv3y6zxn6] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: var(--app-dvh, 100dvh);
    margin-left: 256px;
    transition: margin-left 0.3s var(--admin-transition, cubic-bezier(0.4, 0, 0.2, 1));
}

.admin-sidebar.collapsed ~ .admin-main[b-uhv3y6zxn6] {
    margin-left: 76px;
}

.admin-header[b-uhv3y6zxn6] {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 64px;
    padding: 10px 24px;
    padding-top: max(10px, env(safe-area-inset-top));
    padding-right: max(24px, env(safe-area-inset-right));
    padding-left: max(24px, env(safe-area-inset-left));
    background: var(--bg-surface, #FFFFFF);
    border-bottom: var(--border-hairline, 0.5px) solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    transition: box-shadow 0.3s ease;
}

.header-left[b-uhv3y6zxn6] {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 12px;
}

.header-title-group[b-uhv3y6zxn6] {
    min-width: 0;
}

.header-left h1[b-uhv3y6zxn6] {
    margin: 0 0 5px;
    color: var(--text-primary, #1A1A18);
    font-size: clamp(1.1rem, 1rem + 0.4vw, 1.35rem);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.mobile-menu-toggle[b-uhv3y6zxn6] {
    display: none;
    width: 38px;
    height: 38px;
    border: 1px solid var(--border-default, rgba(0, 0, 0, 0.15));
    border-radius: 8px;
    background: var(--bg-surface, #FFFFFF);
    color: var(--text-secondary, #5F5E5A);
}

.mobile-menu-toggle:hover[b-uhv3y6zxn6] {
    background: var(--brand-primary-soft, #E1F5EE);
    color: var(--brand-primary, #085041);
}

.breadcrumb[b-uhv3y6zxn6] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    color: var(--text-tertiary, #888780);
    font-size: 0.78rem;
    font-weight: 600;
}

.breadcrumb a[b-uhv3y6zxn6] {
    color: var(--brand-primary, #085041);
    text-decoration: none;
}

.breadcrumb a:hover[b-uhv3y6zxn6] {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.header-right[b-uhv3y6zxn6] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.btn-icon[b-uhv3y6zxn6] {
    position: relative;
    width: 36px;
    height: 36px;
    border: var(--border-hairline, 0.5px) solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: var(--radius-input, 8px);
    background: var(--bg-surface, #FFFFFF);
    color: var(--text-secondary, #5F5E5A);
    transition: all var(--motion-fast, 150ms) var(--admin-transition, ease);
}

.btn-icon:hover[b-uhv3y6zxn6] {
    background: var(--bg-base, #FAFAF7);
    color: var(--text-primary, #1A1A18);
    border-color: var(--border-default, rgba(0, 0, 0, 0.15));
}

.btn-icon:active[b-uhv3y6zxn6] {
    transform: scale(0.96);
}

.btn-icon .badge[b-uhv3y6zxn6] {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border: 2px solid #ffffff;
    border-radius: 999px;
    background: var(--danger-token, #A32D2D);
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 800;
}

.user-menu[b-uhv3y6zxn6] {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    gap: 9px;
    padding: 4px 8px 4px 4px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--text-primary, #1A1A18);
    cursor: pointer;
    user-select: none;
}

.user-menu:hover[b-uhv3y6zxn6] {
    background: var(--bg-surface, #FFFFFF);
    border-color: var(--border-subtle, rgba(0, 0, 0, 0.08));
}

.avatar[b-uhv3y6zxn6] {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--brand-primary, #085041);
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 800;
}

.user-menu span[b-uhv3y6zxn6] {
    max-width: 170px;
    overflow: hidden;
    color: var(--text-primary, #1A1A18);
    font-size: 0.86rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-dropdown[b-uhv3y6zxn6] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1000;
    width: 220px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: 12px;
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.13), 0 0 0 1px rgba(255, 255, 255, 0.4) inset;
    animation: dropdown-enter-b-uhv3y6zxn6 0.2s var(--admin-bounce, cubic-bezier(0.34, 1.56, 0.64, 1));
}

@keyframes dropdown-enter-b-uhv3y6zxn6 {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.dropdown-item[b-uhv3y6zxn6] {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 38px;
    gap: 9px;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--radius-input, 8px);
    background: transparent;
    color: var(--text-secondary, #5F5E5A);
    text-align: left;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
}

.dropdown-item:hover[b-uhv3y6zxn6] {
    background: var(--bg-base, #FAFAF7);
    color: var(--text-primary, #1A1A18);
}

.dropdown-divider[b-uhv3y6zxn6] {
    height: 1px;
    margin: 6px;
    background: var(--border-subtle, rgba(0, 0, 0, 0.08));
}

.admin-content[b-uhv3y6zxn6] {
    flex: 1;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 20px 24px 28px;
    animation: admin-content-enter-b-uhv3y6zxn6 0.4s var(--admin-transition, ease) both;
}

@keyframes admin-content-enter-b-uhv3y6zxn6 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.admin-content[b-uhv3y6zxn6] (.section-header),
.admin-content[b-uhv3y6zxn6] (.table-container),
.admin-content[b-uhv3y6zxn6] (.courses-grid .course-card),
.admin-content[b-uhv3y6zxn6] (.empty-state),
.admin-content[b-uhv3y6zxn6] (.focus-admin__header),
.admin-content[b-uhv3y6zxn6] (.focus-pool),
.admin-content[b-uhv3y6zxn6] (.focus-admin__filters),
.admin-content[b-uhv3y6zxn6] (.focus-admin__table) {
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.admin-content[b-uhv3y6zxn6] (.btn-primary),
.admin-content[b-uhv3y6zxn6] (.btn-secondary),
.admin-content[b-uhv3y6zxn6] (.btn-outline-secondary),
.admin-content[b-uhv3y6zxn6] (.btn-link),
.admin-content[b-uhv3y6zxn6] (.btn-icon-sm),
.admin-content[b-uhv3y6zxn6] (.filter-chip),
.admin-content[b-uhv3y6zxn6] (.search-box input),
.admin-content[b-uhv3y6zxn6] (.sort-box select),
.admin-content[b-uhv3y6zxn6] (.form-control) {
    border-radius: 8px;
}

.admin-content[b-uhv3y6zxn6] (.data-table thead th),
.admin-content[b-uhv3y6zxn6] (.focus-admin__table thead th) {
    font-weight: 800;
    letter-spacing: 0.08em;
}

.admin-content[b-uhv3y6zxn6] (.data-table tbody tr:hover),
.admin-content[b-uhv3y6zxn6] (.focus-admin__table tbody tr:hover) {
    background: var(--bg-base, #FAFAF7);
}

/* ============================================================
   Shared admin page polish — applies to every admin tab/page
   ============================================================ */

/* Smooth, consistent interactions on all action buttons */
.admin-content[b-uhv3y6zxn6] (.btn-primary),
.admin-content[b-uhv3y6zxn6] (.btn-secondary),
.admin-content[b-uhv3y6zxn6] (.btn-danger),
.admin-content[b-uhv3y6zxn6] (.btn-outline-secondary),
.admin-content[b-uhv3y6zxn6] (.btn-export) {
    transition: background 0.18s var(--admin-transition, ease),
                border-color 0.18s ease,
                color 0.18s ease,
                box-shadow 0.18s ease,
                transform 0.12s ease;
}

.admin-content[b-uhv3y6zxn6] (.btn-primary:hover) {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(8, 80, 65, 0.18);
}

.admin-content[b-uhv3y6zxn6] (.btn-danger:hover) {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(163, 45, 45, 0.20);
}

.admin-content[b-uhv3y6zxn6] (.btn-secondary:hover),
.admin-content[b-uhv3y6zxn6] (.btn-outline-secondary:hover) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.admin-content[b-uhv3y6zxn6] (.btn-primary:active),
.admin-content[b-uhv3y6zxn6] (.btn-secondary:active),
.admin-content[b-uhv3y6zxn6] (.btn-danger:active),
.admin-content[b-uhv3y6zxn6] (.btn-outline-secondary:active) {
    transform: translateY(0) scale(0.98);
    box-shadow: none;
}

/* Consistent focus rings for keyboard users on every form control */
.admin-content[b-uhv3y6zxn6] (.form-control:focus),
.admin-content[b-uhv3y6zxn6] (.form-select:focus),
.admin-content[b-uhv3y6zxn6] (.search-box input:focus),
.admin-content[b-uhv3y6zxn6] (.sort-box select:focus),
.admin-content[b-uhv3y6zxn6] (input[type="text"]:focus),
.admin-content[b-uhv3y6zxn6] (input[type="date"]:focus),
.admin-content[b-uhv3y6zxn6] (input[type="email"]:focus),
.admin-content[b-uhv3y6zxn6] (input[type="number"]:focus),
.admin-content[b-uhv3y6zxn6] (textarea:focus),
.admin-content[b-uhv3y6zxn6] (select:focus) {
    outline: none;
    border-color: var(--brand-primary, #085041);
    box-shadow: 0 0 0 3px rgba(8, 80, 65, 0.14);
}

.admin-content[b-uhv3y6zxn6] (.btn-primary:focus-visible),
.admin-content[b-uhv3y6zxn6] (.btn-secondary:focus-visible),
.admin-content[b-uhv3y6zxn6] (.btn-danger:focus-visible),
.admin-content[b-uhv3y6zxn6] (.btn-outline-secondary:focus-visible),
.admin-content[b-uhv3y6zxn6] (.btn-link:focus-visible),
.admin-content[b-uhv3y6zxn6] (.btn-icon-sm:focus-visible),
.admin-content[b-uhv3y6zxn6] (.filter-chip:focus-visible) {
    outline: 2px solid rgba(8, 80, 65, 0.55);
    outline-offset: 2px;
}

/* Cards / panels lift slightly on hover for a more tactile feel */
.admin-content[b-uhv3y6zxn6] (.section-header),
.admin-content[b-uhv3y6zxn6] (.table-container),
.admin-content[b-uhv3y6zxn6] (.focus-pool),
.admin-content[b-uhv3y6zxn6] (.focus-admin__filters),
.admin-content[b-uhv3y6zxn6] (.focus-admin__table),
.admin-content[b-uhv3y6zxn6] (.stat-tile),
.admin-content[b-uhv3y6zxn6] (.stat-card) {
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.admin-content[b-uhv3y6zxn6] (.stat-tile:hover),
.admin-content[b-uhv3y6zxn6] (.stat-card:hover) {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.10);
}

/* Pills / filter chips get a hover lift everywhere */
.admin-content[b-uhv3y6zxn6] (.filter-chip),
.admin-content[b-uhv3y6zxn6] (.filter-strip button) {
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.14s ease;
}

.admin-content[b-uhv3y6zxn6] (.filter-chip:hover),
.admin-content[b-uhv3y6zxn6] (.filter-strip button:hover) {
    transform: translateY(-1px);
}

/* Inline row-action icon buttons: clearer hover affordance */
.admin-content[b-uhv3y6zxn6] (.btn-icon-sm) {
    transition: background 0.16s ease, color 0.16s ease, transform 0.14s ease;
}

.admin-content[b-uhv3y6zxn6] (.btn-icon-sm:hover) {
    transform: translateY(-1px);
}

/* Table header: subtle uppercase tracking already set; add divider clarity */
.admin-content[b-uhv3y6zxn6] (.data-table tbody tr) {
    transition: background 0.15s ease;
}

/* Loading + empty states centered and calmer */
.admin-content[b-uhv3y6zxn6] (.loading-spinner),
.admin-content[b-uhv3y6zxn6] (.empty-state) {
    animation: admin-content-enter-b-uhv3y6zxn6 0.3s ease both;
}

@media (prefers-reduced-motion: reduce) {
    .admin-content[b-uhv3y6zxn6] (*) {
        transition: none !important;
        animation-duration: 0.001ms !important;
    }
}

.admin-footer[b-uhv3y6zxn6] {
    margin-top: auto;
    padding: 12px 24px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    padding-right: max(24px, env(safe-area-inset-right));
    padding-left: max(24px, env(safe-area-inset-left));
    background: var(--bg-surface, #FFFFFF);
    border-top: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
}

.footer-content[b-uhv3y6zxn6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--text-tertiary, #888780);
    font-size: 0.76rem;
    font-weight: 600;
}

.notifications-overlay[b-uhv3y6zxn6] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 84px 18px 18px;
    background: rgba(15, 23, 42, 0.28);
    isolation: isolate;
}

.notifications-panel[b-uhv3y6zxn6] {
    position: relative;
    z-index: 1;
    width: min(420px, 100%);
    max-height: min(620px, calc(100dvh - 108px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(20px) saturate(1.3);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: 16px;
    box-shadow: 0 24px 54px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
    animation: notif-slide-in-b-uhv3y6zxn6 0.3s var(--admin-bounce, cubic-bezier(0.34, 1.56, 0.64, 1));
}

@keyframes notif-slide-in-b-uhv3y6zxn6 {
    from {
        opacity: 0;
        transform: translateX(20px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.notifications-body[b-uhv3y6zxn6] {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.notifications-header[b-uhv3y6zxn6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
}

.notifications-header h3[b-uhv3y6zxn6] {
    margin: 0;
    color: var(--text-primary, #1A1A18);
    font-size: 0.95rem;
    font-weight: 500;
}

.btn-close[b-uhv3y6zxn6] {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary, #5F5E5A);
}

.btn-close:hover[b-uhv3y6zxn6] {
    background: var(--bg-base, #FAFAF7);
    color: var(--text-primary, #1A1A18);
}

.notifications-body[b-uhv3y6zxn6] {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

.notification-item[b-uhv3y6zxn6] {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 8px;
}

.notification-item.unread[b-uhv3y6zxn6] {
    background: var(--brand-primary-soft, #E1F5EE);
}

.notification-item:hover[b-uhv3y6zxn6] {
    border-color: var(--border-subtle, rgba(0, 0, 0, 0.08));
    background: var(--bg-base, #FAFAF7);
}

.notification-icon[b-uhv3y6zxn6] {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #ffffff;
    color: var(--brand-primary, #085041);
}

.notification-title[b-uhv3y6zxn6] {
    margin: 0 0 2px;
    color: var(--text-primary, #1A1A18);
    font-size: 0.88rem;
    font-weight: 500;
}

.notification-message[b-uhv3y6zxn6] {
    margin: 0 0 4px;
    color: var(--text-secondary, #5F5E5A);
    font-size: 0.82rem;
    line-height: 1.4;
}

.notification-time[b-uhv3y6zxn6] {
    color: var(--text-tertiary, #888780);
    font-size: 0.74rem;
    font-weight: 700;
}

.empty-notifications[b-uhv3y6zxn6] {
    display: grid;
    place-items: center;
    gap: 8px;
    min-height: 220px;
    color: var(--text-secondary, #5F5E5A);
    text-align: center;
}

.empty-notifications i[b-uhv3y6zxn6] {
    color: var(--text-tertiary, #888780);
    font-size: 2rem;
}

.empty-notifications p[b-uhv3y6zxn6] {
    margin: 0;
}

.notifications-footer[b-uhv3y6zxn6] {
    padding: 10px 16px;
    border-top: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    text-align: center;
}

.btn-link[b-uhv3y6zxn6] {
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--brand-primary, #085041);
    font-size: 0.84rem;
    font-weight: 800;
    cursor: pointer;
    padding: 8px 10px;
}

.btn-link:hover[b-uhv3y6zxn6] {
    background: var(--brand-primary-soft, #E1F5EE);
}

.mobile-sidebar-overlay[b-uhv3y6zxn6] {
    display: none;
    pointer-events: none;
}

.sidebar-nav[b-uhv3y6zxn6]::-webkit-scrollbar,
.notifications-body[b-uhv3y6zxn6]::-webkit-scrollbar {
    width: 8px;
}

.sidebar-nav[b-uhv3y6zxn6]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
}

.sidebar-nav[b-uhv3y6zxn6]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 999px;
}

.notifications-body[b-uhv3y6zxn6]::-webkit-scrollbar-track {
    background: var(--bg-base, #FAFAF7);
}

.notifications-body[b-uhv3y6zxn6]::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.18);
    border-radius: 999px;
}

@media (max-width: 1280px) and (min-width: 769px) {
    .admin-sidebar[b-uhv3y6zxn6] {
        width: 232px;
    }

    .admin-main[b-uhv3y6zxn6] {
        margin-left: 232px;
    }

    .admin-sidebar.collapsed[b-uhv3y6zxn6] {
        width: 76px;
    }

    .admin-sidebar.collapsed ~ .admin-main[b-uhv3y6zxn6] {
        margin-left: 76px;
    }

    .admin-header[b-uhv3y6zxn6],
    .admin-content[b-uhv3y6zxn6],
    .admin-footer[b-uhv3y6zxn6] {
        padding-left: 18px;
        padding-right: 18px;
    }

    .nav-item[b-uhv3y6zxn6] {
        font-size: 0.84rem;
    }
}

@media (max-width: 768px) {
    .admin-sidebar[b-uhv3y6zxn6],
    .admin-sidebar.collapsed[b-uhv3y6zxn6] {
        width: min(292px, 86vw);
        transform: translateX(-100%);
        box-shadow: none;
    }

    .admin-sidebar.mobile-open[b-uhv3y6zxn6] {
        transform: translateX(0);
        box-shadow: 18px 0 40px rgba(4, 22, 18, 0.42);
    }

    .admin-main[b-uhv3y6zxn6],
    .admin-sidebar.collapsed ~ .admin-main[b-uhv3y6zxn6] {
        margin-left: 0;
    }

    .admin-sidebar.collapsed .logo-text[b-uhv3y6zxn6] {
        display: flex;
    }

    .admin-sidebar.collapsed .nav-item span[b-uhv3y6zxn6],
    .admin-sidebar.collapsed .btn-logout span[b-uhv3y6zxn6] {
        display: inline;
    }

    .admin-sidebar.collapsed .logo[b-uhv3y6zxn6] {
        display: flex;
    }

    .admin-sidebar.collapsed .sidebar-section-title[b-uhv3y6zxn6] {
        display: block;
    }

    .admin-sidebar.collapsed .sidebar-section-divider[b-uhv3y6zxn6] {
        display: block;
    }

    .admin-sidebar.collapsed .sidebar-header[b-uhv3y6zxn6] {
        justify-content: space-between;
    }

    .admin-sidebar.collapsed .nav-item[b-uhv3y6zxn6] {
        justify-content: flex-start;
    }

    .admin-sidebar.collapsed .nav-item[b-uhv3y6zxn6]::after {
        display: none;
    }

    .sidebar-toggle[b-uhv3y6zxn6] {
        display: none;
    }

    .mobile-sidebar-overlay[b-uhv3y6zxn6] {
        display: block;
        pointer-events: auto;
        position: fixed;
        inset: 0;
        z-index: 950;
        border: 0;
        background: rgba(15, 23, 42, 0.42);
        cursor: pointer;
    }

    .mobile-menu-toggle[b-uhv3y6zxn6] {
        display: inline-flex;
    }

    .admin-header[b-uhv3y6zxn6] {
        min-height: 64px;
        padding: 10px 14px;
        padding-top: max(10px, env(safe-area-inset-top));
        padding-right: max(14px, env(safe-area-inset-right));
        padding-left: max(14px, env(safe-area-inset-left));
        gap: 10px;
    }

    .header-left[b-uhv3y6zxn6] {
        gap: 10px;
        flex: 1 1 auto;
        min-width: 0;
    }

    .header-left h1[b-uhv3y6zxn6] {
        margin-bottom: 3px;
        font-size: 1.12rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .breadcrumb[b-uhv3y6zxn6] {
        font-size: 0.7rem;
        gap: 4px;
        flex-wrap: nowrap;
        overflow: hidden;
    }

    .breadcrumb a[b-uhv3y6zxn6],
    .breadcrumb span[b-uhv3y6zxn6] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 36vw;
    }

    .header-right[b-uhv3y6zxn6] {
        gap: 6px;
    }

    .btn-icon[b-uhv3y6zxn6],
    .mobile-menu-toggle[b-uhv3y6zxn6] {
        width: 36px;
        height: 36px;
    }

    .user-menu[b-uhv3y6zxn6] {
        padding-right: 4px;
    }

    .user-menu span[b-uhv3y6zxn6],
    .user-menu .lucide-chevron-down[b-uhv3y6zxn6] {
        display: none;
    }

    .admin-content[b-uhv3y6zxn6] {
        padding: 14px;
        padding-right: max(14px, env(safe-area-inset-right));
        padding-left: max(14px, env(safe-area-inset-left));
        padding-bottom: max(14px, env(safe-area-inset-bottom));
    }

    .admin-footer[b-uhv3y6zxn6] {
        padding: 12px 14px;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }

    .footer-content[b-uhv3y6zxn6] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .notifications-overlay[b-uhv3y6zxn6] {
        padding: 74px 12px 12px;
        padding-top: calc(74px + env(safe-area-inset-top));
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }

    .user-dropdown[b-uhv3y6zxn6] {
        right: 0;
        width: min(240px, calc(100vw - 28px));
    }
}

@media (max-width: 420px) {
    .breadcrumb a[b-uhv3y6zxn6],
    .breadcrumb span[b-uhv3y6zxn6] {
        max-width: 26vw;
    }

    .header-left h1[b-uhv3y6zxn6] {
        font-size: 1.05rem;
    }

    .admin-header[b-uhv3y6zxn6] {
        gap: 8px;
    }
}

.nav-item .nav-chat-badge[b-uhv3y6zxn6] {
    margin-left: auto;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.admin-sidebar.collapsed .nav-item .nav-chat-badge[b-uhv3y6zxn6] {
    position: absolute;
    display: inline-flex;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 9px;
}
/* _content/AptisWeb/Components/Layout/TeacherLayout.razor.rz.scp.css */
.teacher-container[b-631ttuc7tz] {
    --teacher-transition: var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
    --teacher-action-bg: #085041;
    --teacher-action-hover: #063d32;
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: var(--app-dvh, 100dvh);
    background: var(--bg-base, #fafaf7);
    color: var(--text-primary, #1a1a18);
    font-family: var(--font-sans, "Be Vietnam Pro", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

.skip-link[b-631ttuc7tz] {
    position: fixed;
    top: 10px;
    left: 12px;
    z-index: 2200;
    padding: 10px 14px;
    border-radius: var(--radius-input, 8px);
    background: var(--bg-surface, #ffffff);
    color: var(--brand-primary, #085041);
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: var(--shadow-lg, 0 12px 28px rgba(15, 23, 42, 0.18));
    transform: translateY(-160%);
    transition: transform 0.18s ease;
}

.skip-link:focus[b-631ttuc7tz] {
    transform: translateY(0);
}

.teacher-sidebar[b-631ttuc7tz] {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    width: 256px;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: var(--app-dvh, 100dvh);
    padding-left: env(safe-area-inset-left);
    color: #f8fafc;
    background:
        radial-gradient(1100px 600px at -10% -10%, rgba(159, 225, 203, 0.18), transparent 60%),
        radial-gradient(600px 400px at 100% 100%, rgba(96, 165, 250, 0.06), transparent 50%),
        linear-gradient(180deg, #053d33 0%, #04342c 60%, #032820 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 16px 0 36px rgba(4, 52, 44, 0.18);
    transition: width 0.3s var(--teacher-transition), transform 0.3s var(--teacher-transition);
}

.teacher-sidebar.collapsed[b-631ttuc7tz] {
    width: 76px;
}

.sidebar-header[b-631ttuc7tz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 72px;
    padding: 14px;
    padding-top: max(14px, env(safe-area-inset-top));
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo[b-631ttuc7tz] {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}

.logo img[b-631ttuc7tz] {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 8px;
    background: #ffffff;
    object-fit: contain;
}

.logo-text[b-631ttuc7tz] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.1;
}

.logo-title[b-631ttuc7tz] {
    color: #ffffff;
    font-size: 0.98rem;
    font-weight: 800;
    white-space: nowrap;
}

.logo-subtitle[b-631ttuc7tz] {
    margin-top: 3px;
    color: rgba(248, 250, 252, 0.68);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.sidebar-toggle[b-631ttuc7tz],
.sidebar-mobile-close[b-631ttuc7tz],
.mobile-menu-toggle[b-631ttuc7tz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-input, 8px);
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.sidebar-toggle[b-631ttuc7tz],
.sidebar-mobile-close[b-631ttuc7tz] {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: #e2e8f0;
}

.sidebar-toggle:hover[b-631ttuc7tz],
.sidebar-mobile-close:hover[b-631ttuc7tz] {
    background: rgba(159, 225, 203, 0.16);
    color: #ffffff;
}

.sidebar-mobile-close[b-631ttuc7tz] {
    display: none;
}

.sidebar-nav[b-631ttuc7tz] {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 12px 10px 14px;
}

.sidebar-section[b-631ttuc7tz] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar-section--support[b-631ttuc7tz] {
    margin-top: 4px;
}

.sidebar-section-title[b-631ttuc7tz] {
    padding: 12px 8px 7px;
    color: rgba(226, 232, 240, 0.64);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.sidebar-section-divider[b-631ttuc7tz] {
    height: 1px;
    margin: 12px 8px;
    background: rgba(255, 255, 255, 0.1);
}

.nav-item[b-631ttuc7tz] {
    --icon-color: #9fe1cb;
    position: relative;
    display: flex;
    align-items: center;
    min-height: 42px;
    gap: 10px;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: var(--radius-input, 8px);
    background: transparent;
    color: rgba(241, 245, 249, 0.84);
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    transition: background var(--motion-fast, 150ms) var(--teacher-transition),
                border-color var(--motion-fast, 150ms) ease,
                color var(--motion-fast, 150ms) var(--teacher-transition);
}

.nav-item[b-631ttuc7tz]::before {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: -10px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: transparent;
    transition: background 0.18s ease, box-shadow 0.18s ease;
}

.nav-item:visited[b-631ttuc7tz] {
    color: rgba(241, 245, 249, 0.84);
}

.nav-item:hover[b-631ttuc7tz] {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
}

.nav-item.active[b-631ttuc7tz] {
    border-color: rgba(159, 225, 203, 0.34);
    background: rgba(159, 225, 203, 0.16);
    color: #ffffff;
}

.nav-item.active[b-631ttuc7tz]::before {
    background: #9fe1cb;
    box-shadow: 0 0 14px rgba(159, 225, 203, 0.55);
}

.nav-item__icon[b-631ttuc7tz] {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--icon-color);
    transition: background 0.18s ease, transform 0.18s ease;
}

.nav-item:hover .nav-item__icon[b-631ttuc7tz],
.nav-item.active .nav-item__icon[b-631ttuc7tz] {
    background: rgba(255, 255, 255, 0.12);
}

.nav-item__label[b-631ttuc7tz] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-item--dashboard[b-631ttuc7tz] { --icon-color: #60a5fa; }
.nav-item--students[b-631ttuc7tz] { --icon-color: #34d399; }
.nav-item--classes[b-631ttuc7tz] { --icon-color: #5eead4; }
.nav-item--tests[b-631ttuc7tz] { --icon-color: #fbbf24; }
.nav-item--questions[b-631ttuc7tz] { --icon-color: #22d3ee; }
.nav-item--grades[b-631ttuc7tz] { --icon-color: #fb923c; }
.nav-item--reports[b-631ttuc7tz] { --icon-color: #fb7185; }
.nav-item--help[b-631ttuc7tz] { --icon-color: #93c5fd; }
.nav-item--profile[b-631ttuc7tz] { --icon-color: #f59e0b; }

.teacher-sidebar.collapsed .logo[b-631ttuc7tz],
.teacher-sidebar.collapsed .logo-text[b-631ttuc7tz],
.teacher-sidebar.collapsed .sidebar-section-title[b-631ttuc7tz],
.teacher-sidebar.collapsed .sidebar-section-divider[b-631ttuc7tz],
.teacher-sidebar.collapsed .nav-item__label[b-631ttuc7tz],
.teacher-sidebar.collapsed .btn-logout span[b-631ttuc7tz] {
    display: none;
}

.teacher-sidebar.collapsed .sidebar-header[b-631ttuc7tz] {
    justify-content: center;
    padding-inline: 10px;
}

.teacher-sidebar.collapsed .sidebar-nav[b-631ttuc7tz] {
    padding-inline: 9px;
}

.teacher-sidebar.collapsed .nav-item[b-631ttuc7tz] {
    justify-content: center;
    padding-inline: 6px;
}

.teacher-sidebar.collapsed .nav-item__icon[b-631ttuc7tz] {
    width: 34px;
    height: 34px;
}

.sidebar-footer[b-631ttuc7tz] {
    padding: 12px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-logout[b-631ttuc7tz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 42px;
    gap: 8px;
    border: 1px solid rgba(253, 186, 116, 0.24);
    border-radius: var(--radius-input, 8px);
    background: rgba(251, 146, 60, 0.12);
    color: #ffedd5;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.btn-logout:hover[b-631ttuc7tz] {
    border-color: rgba(253, 186, 116, 0.38);
    background: rgba(251, 146, 60, 0.2);
    transform: translateY(-1px);
}

.teacher-main[b-631ttuc7tz] {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: var(--app-dvh, 100dvh);
    margin-left: 256px;
    transition: margin-left 0.3s var(--teacher-transition);
}

.teacher-sidebar.collapsed ~ .teacher-main[b-631ttuc7tz] {
    margin-left: 76px;
}

.teacher-header[b-631ttuc7tz] {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
    gap: 18px;
    padding: 10px 24px;
    padding-top: max(10px, env(safe-area-inset-top));
    padding-right: max(24px, env(safe-area-inset-right));
    padding-left: max(24px, env(safe-area-inset-left));
    border-bottom: var(--border-hairline, 1px) solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    background: var(--bg-surface, #ffffff);
}

.header-left[b-631ttuc7tz] {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 12px;
}

.header-title-group[b-631ttuc7tz] {
    min-width: 0;
}

.header-left h1[b-631ttuc7tz] {
    margin: 0 0 5px;
    color: var(--text-primary, #1a1a18);
    font-size: clamp(1.1rem, 1rem + 0.4vw, 1.35rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.mobile-menu-toggle[b-631ttuc7tz] {
    display: none;
    border: 1px solid var(--border-default, rgba(0, 0, 0, 0.15));
    background: var(--bg-surface, #ffffff);
    color: var(--text-secondary, #5f5e5a);
}

.mobile-menu-toggle:hover[b-631ttuc7tz] {
    background: var(--brand-primary-soft, #e1f5ee);
    color: var(--brand-primary, #085041);
}

.breadcrumb[b-631ttuc7tz] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    color: var(--text-tertiary, #888780);
    font-size: 0.78rem;
    font-weight: 600;
}

.breadcrumb a[b-631ttuc7tz] {
    color: var(--brand-primary, #085041);
    text-decoration: none;
}

.breadcrumb a:hover[b-631ttuc7tz] {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.header-right[b-631ttuc7tz] {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.user-menu[b-631ttuc7tz] {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    gap: 9px;
    padding: 4px 8px 4px 4px;
    border: 1px solid transparent;
    border-radius: var(--radius-input, 8px);
    background: transparent;
    color: var(--text-primary, #1a1a18);
    font: inherit;
    cursor: pointer;
    user-select: none;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.user-menu:hover[b-631ttuc7tz] {
    border-color: var(--border-subtle, rgba(0, 0, 0, 0.08));
    background: var(--bg-base, #fafaf7);
}

.avatar[b-631ttuc7tz] {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border-radius: 8px;
    background: var(--teacher-action-bg, #085041);
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 800;
}

.user-menu__name[b-631ttuc7tz] {
    max-width: 170px;
    overflow: hidden;
    color: var(--text-primary, #1a1a18);
    font-size: 0.86rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu[b-631ttuc7tz]  .user-menu__chevron {
    color: var(--text-tertiary, #888780);
}

.user-dropdown[b-631ttuc7tz] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1000;
    width: 220px;
    padding: 6px;
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: var(--radius-card, 12px);
    background: var(--bg-surface, #ffffff);
    box-shadow: var(--shadow-lg, 0 18px 38px rgba(15, 23, 42, 0.13));
    animation: dropdown-enter-b-631ttuc7tz 0.18s var(--teacher-transition) both;
}

@keyframes dropdown-enter-b-631ttuc7tz {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.dropdown-item[b-631ttuc7tz] {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 40px;
    gap: 9px;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--radius-input, 8px);
    background: transparent;
    color: var(--text-secondary, #5f5e5a);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.dropdown-item:hover[b-631ttuc7tz] {
    background: var(--bg-base, #fafaf7);
    color: var(--text-primary, #1a1a18);
}

.dropdown-item--danger[b-631ttuc7tz] {
    color: var(--danger-token, #a32d2d);
}

.dropdown-divider[b-631ttuc7tz] {
    height: 1px;
    margin: 6px;
    background: var(--border-subtle, rgba(0, 0, 0, 0.08));
}

.teacher-content[b-631ttuc7tz] {
    flex: 1;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 20px 24px 28px;
    animation: teacher-content-enter-b-631ttuc7tz 0.25s var(--teacher-transition) both;
}

@keyframes teacher-content-enter-b-631ttuc7tz {
    from { opacity: 0; }
    to { opacity: 1; }
}

.teacher-content[b-631ttuc7tz]  button,
.teacher-content[b-631ttuc7tz]  a,
.teacher-content[b-631ttuc7tz]  input,
.teacher-content[b-631ttuc7tz]  select,
.teacher-content[b-631ttuc7tz]  textarea {
    font-family: inherit;
}

.teacher-content[b-631ttuc7tz]  button,
.teacher-content[b-631ttuc7tz]  a {
    transition-duration: var(--motion-fast, 150ms);
}

.teacher-content[b-631ttuc7tz]  button:focus-visible,
.teacher-content[b-631ttuc7tz]  a:focus-visible,
.teacher-content[b-631ttuc7tz]  input:focus-visible,
.teacher-content[b-631ttuc7tz]  select:focus-visible,
.teacher-content[b-631ttuc7tz]  textarea:focus-visible,
.nav-item:focus-visible[b-631ttuc7tz],
.sidebar-toggle:focus-visible[b-631ttuc7tz],
.sidebar-mobile-close:focus-visible[b-631ttuc7tz],
.mobile-menu-toggle:focus-visible[b-631ttuc7tz],
.btn-logout:focus-visible[b-631ttuc7tz],
.user-menu:focus-visible[b-631ttuc7tz],
.dropdown-item:focus-visible[b-631ttuc7tz] {
    outline: 2px solid var(--brand-primary, #0f6e56);
    outline-offset: 2px;
}

.teacher-footer[b-631ttuc7tz] {
    margin-top: auto;
    padding: 12px 24px;
    padding-right: max(24px, env(safe-area-inset-right));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    padding-left: max(24px, env(safe-area-inset-left));
    border-top: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    background: var(--bg-surface, #ffffff);
}

.footer-content[b-631ttuc7tz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--text-tertiary, #888780);
    font-size: 0.76rem;
    font-weight: 600;
}

.mobile-sidebar-overlay[b-631ttuc7tz] {
    display: none;
    pointer-events: none;
}

.sidebar-nav[b-631ttuc7tz]::-webkit-scrollbar {
    width: 8px;
}

.sidebar-nav[b-631ttuc7tz]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
}

.sidebar-nav[b-631ttuc7tz]::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
}

@media (max-width: 1280px) and (min-width: 769px) {
    .teacher-sidebar[b-631ttuc7tz] {
        width: 232px;
    }

    .teacher-main[b-631ttuc7tz] {
        margin-left: 232px;
    }

    .teacher-sidebar.collapsed[b-631ttuc7tz] {
        width: 76px;
    }

    .teacher-sidebar.collapsed ~ .teacher-main[b-631ttuc7tz] {
        margin-left: 76px;
    }

    .teacher-header[b-631ttuc7tz],
    .teacher-content[b-631ttuc7tz],
    .teacher-footer[b-631ttuc7tz] {
        padding-right: 18px;
        padding-left: 18px;
    }
}

@media (max-width: 768px) {
    .teacher-sidebar[b-631ttuc7tz],
    .teacher-sidebar.collapsed[b-631ttuc7tz] {
        width: min(292px, 86vw);
        box-shadow: none;
        visibility: hidden;
        pointer-events: none;
        transform: translateX(-100%);
        transition: transform 0.3s var(--teacher-transition), visibility 0s linear 0.3s;
    }

    .teacher-sidebar.mobile-open[b-631ttuc7tz] {
        box-shadow: 18px 0 40px rgba(4, 22, 18, 0.42);
        visibility: visible;
        pointer-events: auto;
        transform: translateX(0);
        transition-delay: 0s;
    }

    .teacher-main[b-631ttuc7tz],
    .teacher-sidebar.collapsed ~ .teacher-main[b-631ttuc7tz] {
        margin-left: 0;
    }

    .teacher-sidebar.collapsed .logo[b-631ttuc7tz],
    .teacher-sidebar.collapsed .logo-text[b-631ttuc7tz],
    .teacher-sidebar.collapsed .sidebar-section-title[b-631ttuc7tz],
    .teacher-sidebar.collapsed .sidebar-section-divider[b-631ttuc7tz],
    .teacher-sidebar.collapsed .nav-item__label[b-631ttuc7tz],
    .teacher-sidebar.collapsed .btn-logout span[b-631ttuc7tz] {
        display: flex;
    }

    .teacher-sidebar.collapsed .sidebar-header[b-631ttuc7tz] {
        justify-content: space-between;
        padding-inline: 14px;
    }

    .teacher-sidebar.collapsed .sidebar-nav[b-631ttuc7tz] {
        padding-inline: 10px;
    }

    .teacher-sidebar.collapsed .nav-item[b-631ttuc7tz] {
        justify-content: flex-start;
        padding-inline: 8px;
    }

    .sidebar-toggle[b-631ttuc7tz] {
        display: none;
    }

    .sidebar-mobile-close[b-631ttuc7tz],
    .mobile-menu-toggle[b-631ttuc7tz] {
        display: inline-flex;
    }

    .mobile-sidebar-overlay[b-631ttuc7tz] {
        position: fixed;
        inset: 0;
        z-index: 950;
        display: block;
        border: 0;
        background: rgba(15, 23, 42, 0.52);
        cursor: pointer;
        pointer-events: auto;
        touch-action: none;
    }

    .teacher-header[b-631ttuc7tz] {
        min-height: 64px;
        gap: 10px;
        padding: 10px 14px;
        padding-top: max(10px, env(safe-area-inset-top));
        padding-right: max(14px, env(safe-area-inset-right));
        padding-left: max(14px, env(safe-area-inset-left));
    }

    .header-left[b-631ttuc7tz] {
        flex: 1 1 auto;
        min-width: 0;
        gap: 10px;
    }

    .header-left h1[b-631ttuc7tz] {
        margin-bottom: 3px;
        overflow: hidden;
        font-size: 1.12rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .breadcrumb[b-631ttuc7tz] {
        flex-wrap: nowrap;
        gap: 4px;
        overflow: hidden;
        font-size: 0.7rem;
    }

    .breadcrumb a[b-631ttuc7tz],
    .breadcrumb span[b-631ttuc7tz] {
        max-width: 34vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .user-menu[b-631ttuc7tz] {
        min-width: 44px;
        min-height: 44px;
        padding: 4px;
    }

    .mobile-menu-toggle[b-631ttuc7tz],
    .sidebar-mobile-close[b-631ttuc7tz] {
        width: 44px;
        height: 44px;
    }

    .nav-item[b-631ttuc7tz],
    .btn-logout[b-631ttuc7tz] {
        min-height: 44px;
    }

    .user-menu__name[b-631ttuc7tz],
    .user-menu[b-631ttuc7tz]  .user-menu__chevron {
        display: none;
    }

    .user-dropdown[b-631ttuc7tz] {
        width: min(240px, calc(100vw - 28px));
    }

    .teacher-content[b-631ttuc7tz] {
        padding: 14px;
        padding-right: max(14px, env(safe-area-inset-right));
        padding-bottom: max(18px, env(safe-area-inset-bottom));
        padding-left: max(14px, env(safe-area-inset-left));
    }

    .teacher-footer[b-631ttuc7tz] {
        padding: 12px 14px;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }

    .footer-content[b-631ttuc7tz] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

@media (max-width: 420px) {
    .breadcrumb a[b-631ttuc7tz],
    .breadcrumb span[b-631ttuc7tz] {
        max-width: 25vw;
    }

    .header-left h1[b-631ttuc7tz] {
        font-size: 1.05rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .teacher-container *[b-631ttuc7tz],
    .teacher-container *[b-631ttuc7tz]::before,
    .teacher-container *[b-631ttuc7tz]::after {
        scroll-behavior: auto !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}
/* _content/AptisWeb/Components/Layout/TopBar.razor.rz.scp.css */
.top-navbar[b-rl1u8xuub6] {
    min-height: var(--topbar-height);
    height: auto;
    padding:
        max(8px, calc((var(--topbar-height) - var(--control-height) - 4px) / 2))
        max(16px, env(safe-area-inset-right))
        max(8px, calc((var(--topbar-height) - var(--control-height) - 4px) / 2))
        max(16px, env(safe-area-inset-left));
    background: var(--bg-surface, #FFFFFF);
    border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
    backdrop-filter: blur(10px);
    font-family: var(--font-sans, "Inter", sans-serif);
    display: flex;
    align-items: center;
    gap: clamp(10px, calc(var(--section-gap) - 12px), 16px);
    position: relative;
    z-index: var(--z-topbar, 50);
    min-width: 0;
    container-type: inline-size;
}

.top-navbar .left[b-rl1u8xuub6] {
    display: flex;
    align-items: center;
    gap: clamp(10px, calc(var(--section-gap) - 12px), 16px);
    flex: 0 0 auto;
    min-width: 0;
}

.top-navbar .right[b-rl1u8xuub6] {
    margin-left: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(8px, calc(var(--section-gap) - 16px), 12px);
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
}

.topbar-primary-actions[b-rl1u8xuub6] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: max(8px, calc(var(--section-gap) - 18px));
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.upgrade-plan[b-rl1u8xuub6] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: var(--control-height);
    padding: 7px 10px 7px 12px;
    border-radius: 18px;
    background: linear-gradient(180deg, #f7efe1 0%, #f4ead8 100%);
    border: 1px solid rgba(220, 181, 108, 0.72);
    color: var(--text-primary, #1A1A18);
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 6px 14px rgba(179, 147, 88, 0.12);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    flex: 0 1 var(--topbar-upgrade-max, 300px);
    min-width: 0;
    max-width: var(--topbar-upgrade-max, 300px);
}

.upgrade-plan:hover[b-rl1u8xuub6] {
    transform: translateY(-1px);
    border-color: rgba(208, 162, 75, 0.9);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 10px 20px rgba(179, 147, 88, 0.18);
}

.upgrade-text[b-rl1u8xuub6] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.1;
    min-width: 0;
}

.upgrade-title[b-rl1u8xuub6] {
    font-weight: 500;
    font-size: 0.95rem;
    color: #5f4a20;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upgrade-subtitle[b-rl1u8xuub6] {
    font-size: 0.74rem;
    font-weight: 500;
    color: #8f7848;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upgrade-icon[b-rl1u8xuub6] {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(220, 181, 108, 0.55);
    display: grid;
    place-items: center;
    color: #7c6841;
    box-shadow: 0 4px 10px rgba(179, 147, 88, 0.12);
}

.menu-toggle[b-rl1u8xuub6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    font-size: 1.25rem;
    cursor: pointer;
    border-radius: 10px;
    background: var(--bg-muted, #F1EFE8);
    border: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
    color: var(--brand-primary, #085041);
    transition: background var(--motion-fast, 150ms) var(--ease-out, ease),
                transform var(--motion-instant, 100ms) var(--ease-out, ease),
                box-shadow var(--motion-fast, 150ms) var(--ease-out, ease);
}

.menu-toggle:hover[b-rl1u8xuub6] {
    background: var(--brand-primary-soft, #E1F5EE);
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    transform: translateY(-1px);
}

.menu-toggle:active[b-rl1u8xuub6] {
    transform: scale(0.96);
}

.topbar-notice[b-rl1u8xuub6] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: none;
}

.notice-icon[b-rl1u8xuub6] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--c-amber-bg, #FAEEDA);
    color: var(--c-amber-fg, #BA7517);
    border: 1px solid transparent;
    display: grid;
    place-items: center;
    text-decoration: none;
    font-size: 1rem;
    transition: background var(--motion-fast, 150ms) var(--ease-out, ease),
                color var(--motion-fast, 150ms) var(--ease-out, ease),
                transform var(--motion-instant, 100ms) var(--ease-out, ease),
                box-shadow var(--motion-fast, 150ms) var(--ease-out, ease);
}

.notice-icon:hover[b-rl1u8xuub6] {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.notice-icon:active[b-rl1u8xuub6] {
    transform: scale(0.96);
}

.notice-toggle[b-rl1u8xuub6] {
    width: calc(var(--control-height) - 2px);
    height: calc(var(--control-height) - 2px);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--brand-primary-dark, #04342C);
    background: transparent;
    border: 0;
    font-size: 1.05rem;
    cursor: pointer;
}

.notice-toggle:hover[b-rl1u8xuub6] {
    background: rgba(14, 116, 112, 0.12);
}

.notice-badge[b-rl1u8xuub6] {
    text-transform: uppercase;
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--brand-primary, #085041);
    color: white;
}

.notice-items[b-rl1u8xuub6] {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    min-width: 0;
}

.notice-separator[b-rl1u8xuub6] {
    color: #8b9f98;
    font-size: 0.7rem;
}

.notice-item[b-rl1u8xuub6] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(11, 31, 29, 0.1);
    color: var(--text-primary, #1A1A18);
    text-decoration: none;
    font-size: 0.75rem;
    max-width: 260px;
}

.notice-tag[b-rl1u8xuub6] {
    background: rgba(14, 116, 112, 0.12);
    color: var(--brand-primary, #085041);
    font-weight: 500;
    font-size: 0.6rem;
    padding: 2px 6px;
    border-radius: 999px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.notice-copy[b-rl1u8xuub6] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notice-time[b-rl1u8xuub6] {
    color: #6b7f7a;
    font-size: 0.65rem;
}

.notice-link[b-rl1u8xuub6] {
    text-decoration: none;
    font-weight: 500;
    color: var(--brand-primary, #085041);
    padding: 4px 6px;
    border-radius: 8px;
}

.notice-link:hover[b-rl1u8xuub6] {
    background: rgba(14, 116, 112, 0.12);
}

.pill-dropdown[b-rl1u8xuub6] {
    position: relative;
}

.pill-dropdown summary[b-rl1u8xuub6] {
    list-style: none;
}

.pill-dropdown summary[b-rl1u8xuub6]::-webkit-details-marker {
    display: none;
}

.pill-trigger[b-rl1u8xuub6] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #f5f9f8;
    border: 1px solid rgba(11, 31, 29, 0.12);
    color: var(--text-primary, #1A1A18);
    font-size: 0.75rem;
    cursor: pointer;
    user-select: none;
}

.pill-trigger i[b-rl1u8xuub6] {
    color: var(--brand-primary, #085041);
}

.pill-menu[b-rl1u8xuub6] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #ffffff;
    border-radius: 14px;
    padding: 10px;
    box-shadow: 0 18px 30px rgba(11, 31, 29, 0.18);
    border: 1px solid rgba(11, 31, 29, 0.12);
    display: grid;
    gap: 8px;
    min-width: 160px;
    z-index: 50;
}

.topbar-pill[b-rl1u8xuub6] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #f5f9f8;
    border: 1px solid rgba(11, 31, 29, 0.08);
    color: var(--text-primary, #1A1A18);
    font-size: 0.75rem;
}

.topbar-pill i[b-rl1u8xuub6] {
    color: var(--brand-primary, #085041);
}

.pill-value[b-rl1u8xuub6] {
    font-weight: 500;
}

.pill-label[b-rl1u8xuub6] {
    color: #5b6f6a;
    font-weight: 500;
}

.topbar-message[b-rl1u8xuub6] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(11, 31, 29, 0.1);
    min-width: 260px;
    box-shadow: 0 8px 16px rgba(11, 31, 29, 0.06);
    flex: 0 0 260px;
}

.topbar-message i[b-rl1u8xuub6] {
    color: #5f6f6a;
}

.message-input[b-rl1u8xuub6] {
    border: none;
    background: transparent;
    outline: none;
    width: 100%;
    font-size: 0.85rem;
    color: var(--text-primary, #1A1A18);
}

.message-input[b-rl1u8xuub6]::placeholder {
    color: #7c8c87;
}

.message-send[b-rl1u8xuub6] {
    border: none;
    background: linear-gradient(135deg, var(--brand-primary, #085041), var(--brand-primary, #085041));
    color: white;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.message-send:hover[b-rl1u8xuub6] {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(15, 118, 110, 0.3);
}

.topbar-shortcuts[b-rl1u8xuub6] {
    display: flex;
    align-items: center;
    gap: max(6px, calc(var(--section-gap) - 20px));
    flex: 0 0 auto;
    min-width: 0;
}

.shortcut[b-rl1u8xuub6] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--bg-muted, #F1EFE8);
    border: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
    display: grid;
    place-items: center;
    color: var(--text-secondary, #5F5E5A);
    text-decoration: none;
    font-size: 0.95rem;
    box-shadow: none;
    transition: background var(--motion-fast, 150ms) var(--ease-out, ease),
                color var(--motion-fast, 150ms) var(--ease-out, ease),
                transform var(--motion-instant, 100ms) var(--ease-out, ease),
                box-shadow var(--motion-fast, 150ms) var(--ease-out, ease);
}

.shortcut:hover[b-rl1u8xuub6] {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.shortcut:active[b-rl1u8xuub6] {
    transform: scale(0.96);
}

/* Per-shortcut accent (uses Tokens.css ramps) */
.shortcut:has(.lucide-calendar)[b-rl1u8xuub6]   { background: var(--c-coral-bg);  color: var(--c-coral-fg);  border-color: transparent; }
.shortcut:has(.lucide-life-buoy)[b-rl1u8xuub6]   { background: var(--c-blue-bg);   color: var(--c-blue-fg);   border-color: transparent; }
.shortcut:has(.lucide-bell)[b-rl1u8xuub6]             { background: var(--c-amber-bg);  color: var(--c-amber-fg);  border-color: transparent; }
.shortcut:has(.lucide-circle-help)[b-rl1u8xuub6]  { background: var(--c-purple-bg); color: var(--c-purple-fg); border-color: transparent; }

.topbar-community-links[b-rl1u8xuub6] {
    display: flex;
    align-items: center;
    gap: max(6px, calc(var(--section-gap) - 20px));
    flex: 1 1 var(--topbar-community-max, 430px);
    width: 100%;
    max-width: min(100%, var(--topbar-community-max, 620px));
    padding: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(11, 31, 29, 0.1);
    box-shadow: 0 8px 16px rgba(11, 31, 29, 0.06);
    overflow-x: auto;
    scrollbar-width: none;
    min-width: 0;
}

/* v2: icon-only variant — replaces heavy multi-pill strip */
.topbar-community-links--icons[b-rl1u8xuub6] {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    padding: 2px;
    background: transparent;
    border: none;
    box-shadow: none;
    gap: 4px;
    overflow: visible;
}

.topbar-community-link--icon[b-rl1u8xuub6] {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    background: var(--bg-muted, #F1EFE8);
    border: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
    color: var(--text-secondary, #5F5E5A);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    transition: background var(--motion-fast, 150ms) var(--ease-out, ease),
                color var(--motion-fast, 150ms) var(--ease-out, ease),
                transform var(--motion-instant, 100ms) var(--ease-out, ease),
                box-shadow var(--motion-fast, 150ms) var(--ease-out, ease);
}

/* Per-platform color (uses --dot-* + Tokens ramps) */
.topbar-community-link--icon[data-group-key="aptis"][b-rl1u8xuub6]  { background: var(--c-teal-bg);   color: var(--dot-aptis); border-color: transparent; }
.topbar-community-link--icon[data-group-key="vstep"][b-rl1u8xuub6]  { background: var(--c-green-bg);  color: var(--dot-vstep); border-color: transparent; }
.topbar-community-link--icon[data-group-key="toeic"][b-rl1u8xuub6]  { background: var(--c-amber-bg);  color: var(--dot-toeic); border-color: transparent; }
.topbar-community-link--icon[data-group-key="ielts"][b-rl1u8xuub6]  { background: var(--c-purple-bg); color: var(--dot-ielts); border-color: transparent; }

/* TikTok pill (no data-group-key — use :has() for icon) */
.topbar-community-link--icon:has(.lucide-video):not([data-group-key])[b-rl1u8xuub6] {
    background: var(--c-pink-bg);
    color: #111827;
    border-color: transparent;
}

.topbar-community-link--icon:hover[b-rl1u8xuub6] {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.topbar-community-link--icon:active[b-rl1u8xuub6] {
    transform: scale(0.95);
}

.topbar-community-links[b-rl1u8xuub6]::-webkit-scrollbar {
    display: none;
}

.topbar-community-link[b-rl1u8xuub6] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    min-height: var(--control-height);
    padding: 8px clamp(10px, calc(var(--card-padding) - 10px), 14px);
    border-radius: 999px;
    text-decoration: none;
    color: #1f2929;
    font-size: 0.84rem;
    font-weight: 500;
    white-space: nowrap;
    border: 1px solid rgba(11, 31, 29, 0.12);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), 0 4px 12px rgba(11, 31, 29, 0.05);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.topbar-community-link__label[b-rl1u8xuub6] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-community-link i[b-rl1u8xuub6] {
    font-size: 0.95rem;
}

.topbar-community-link:hover[b-rl1u8xuub6] {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 10px 18px rgba(11, 31, 29, 0.1);
}

.topbar-community-link--preferred[b-rl1u8xuub6] {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 0 0 3px rgba(255, 255, 255, 0.82), 0 10px 18px rgba(11, 31, 29, 0.1);
}

.topbar-community-link--aptis[b-rl1u8xuub6] {
    color: #1457b8;
    border-color: rgba(77, 147, 255, 0.38);
    background: linear-gradient(180deg, rgba(233, 242, 255, 0.98) 0%, rgba(245, 249, 255, 0.94) 100%);
}

.topbar-community-link--vstep[b-rl1u8xuub6] {
    color: var(--brand-primary, #085041);
    border-color: rgba(101, 170, 152, 0.44);
    background: linear-gradient(180deg, rgba(233, 247, 243, 0.98) 0%, rgba(244, 251, 249, 0.94) 100%);
}

.topbar-community-link--toeic[b-rl1u8xuub6] {
    color: #a16207;
    border-color: rgba(239, 187, 105, 0.46);
    background: linear-gradient(180deg, rgba(255, 244, 224, 0.98) 0%, rgba(255, 249, 239, 0.94) 100%);
}

.topbar-community-link--ielts[b-rl1u8xuub6] {
    color: #344247;
    border-color: rgba(167, 179, 183, 0.44);
    background: linear-gradient(180deg, rgba(248, 249, 250, 0.98) 0%, rgba(255, 255, 255, 0.94) 100%);
}

.topbar-community-link--tiktok[b-rl1u8xuub6] {
    color: #111827;
    border-color: rgba(234, 186, 198, 0.54);
    background: linear-gradient(180deg, rgba(255, 246, 248, 0.98) 0%, rgba(255, 250, 251, 0.94) 100%);
}

.topbar-community-link--disabled[b-rl1u8xuub6] {
    color: #7b8a86;
    background: rgba(243, 247, 246, 0.92);
    border-style: dashed;
    box-shadow: none;
    cursor: default;
    opacity: 0.78;
}

.topbar-community-link--disabled:hover[b-rl1u8xuub6] {
    transform: none;
    box-shadow: none;
}

.user-profile[b-rl1u8xuub6] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 6px 12px 6px 6px;
    border-radius: 999px;
    background: var(--bg-muted, #F1EFE8);
    border: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
    box-shadow: none;
    min-width: 0;
    max-width: var(--topbar-user-max, 240px);
    flex: 0 0 auto;
    justify-self: end;
    margin: 0;
    z-index: calc(var(--z-topbar-elevated, 2100) + 2);
    transition: background var(--motion-fast, 150ms) var(--ease-out, ease),
                box-shadow var(--motion-fast, 150ms) var(--ease-out, ease);
}

.user-profile:hover[b-rl1u8xuub6] {
    background: var(--bg-base, #FAFAF7);
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.user-avatar[b-rl1u8xuub6] {
    width: calc(var(--control-height) - 8px);
    height: calc(var(--control-height) - 8px);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-primary, #085041), var(--brand-primary, #085041));
    color: white;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.user-avatar .lucide[b-rl1u8xuub6] {
    width: 18px;
    height: 18px;
    display: block;
    color: inherit;
}

.user-avatar img[b-rl1u8xuub6] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-info[b-rl1u8xuub6] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.user-name[b-rl1u8xuub6] {
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--text-primary, #1A1A18);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-role[b-rl1u8xuub6] {
    font-size: 0.7rem;
    color: var(--text-secondary, #5F5E5A);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-dropdown[b-rl1u8xuub6] {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 220px;
    background: var(--surface);
    border-radius: 16px;
    box-shadow: 0 18px 30px rgba(11, 31, 29, 0.18);
    padding: 8px;
    z-index: calc(var(--z-topbar-elevated, 2100) + 1);
}

.user-dropdown.show[b-rl1u8xuub6] {
    display: block;
}

.user-dropdown a[b-rl1u8xuub6] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.user-dropdown a:hover[b-rl1u8xuub6] {
    background: rgba(14, 116, 112, 0.12);
}

.dropdown-divider[b-rl1u8xuub6] {
    height: 1px;
    background: rgba(11, 31, 29, 0.08);
    margin: 6px 0;
}

.dropdown-item.danger[b-rl1u8xuub6] {
    color: var(--danger);
}

.topbar-actions[b-rl1u8xuub6] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    white-space: nowrap;
}

.topbar-link[b-rl1u8xuub6] {
    font-weight: 500;
    color: var(--text-primary, #1A1A18);
    text-decoration: none;
}

.topbar-link:hover[b-rl1u8xuub6] {
    color: var(--brand-primary, #085041);
}

.topbar-button[b-rl1u8xuub6] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 8px 16px;
    font-weight: 500;
    text-decoration: none;
    color: white;
    background: linear-gradient(135deg, var(--brand-primary, #085041), var(--brand-primary, #085041));
    border: 1px solid transparent;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.topbar-button:hover[b-rl1u8xuub6] {
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(15, 118, 110, 0.25);
}

.topbar-button.facebook[b-rl1u8xuub6] {
    background: linear-gradient(135deg, #1877f2, #0f5ec9);
    box-shadow: 0 10px 18px rgba(24, 119, 242, 0.2);
}

.topbar-button.facebook:hover[b-rl1u8xuub6] {
    box-shadow: 0 12px 22px rgba(24, 119, 242, 0.28);
}

.topbar-button.tiktok[b-rl1u8xuub6] {
    background: linear-gradient(135deg, #111827, #0f172a);
    box-shadow: 0 10px 18px rgba(15, 23, 42, 0.2);
}

.topbar-button.tiktok:hover[b-rl1u8xuub6] {
    box-shadow: 0 12px 22px rgba(15, 23, 42, 0.28);
}

.topbar-actions .topbar-button.facebook span[b-rl1u8xuub6] {
    font-size: 0;
}

.topbar-actions .topbar-button.facebook span[b-rl1u8xuub6]::after {
    content: "Nhóm Aptis";
    font-size: 1rem;
}

.topbar-button.ghost[b-rl1u8xuub6] {
    background: transparent;
    color: var(--brand-primary, #085041);
    border-color: rgba(11, 31, 29, 0.2);
    box-shadow: none;
}

.topbar-button.ghost:hover[b-rl1u8xuub6] {
    background: rgba(14, 116, 112, 0.08);
}

@container (max-width: 1380px) {
    .topbar-community-link__label[b-rl1u8xuub6] {
        display: none;
    }

    .topbar-community-link[b-rl1u8xuub6] {
        padding: 8px 9px;
    }
}

@container (max-width: 1240px) {
    .topbar-primary-actions[b-rl1u8xuub6] {
        max-width: min(100%, 760px);
    }

    .upgrade-subtitle[b-rl1u8xuub6] {
        display: none;
    }

    .topbar-community-links[b-rl1u8xuub6] {
        flex-basis: 300px;
        max-width: 300px;
    }
}

@container (max-width: 1120px) {
    .topbar-shortcuts[b-rl1u8xuub6] {
        display: none;
    }
}

@container (max-width: 1020px) {
    .upgrade-plan[b-rl1u8xuub6] {
        display: none;
    }
}

@container (max-width: 900px) {
    .topbar-community-links[b-rl1u8xuub6] {
        display: none;
    }

    .user-profile[b-rl1u8xuub6] {
        max-width: 180px;
    }
}

@container (max-width: 760px) {
    .user-role[b-rl1u8xuub6] {
        display: none;
    }

    .top-navbar[b-rl1u8xuub6] {
        gap: 12px;
    }
}

@media (max-width: 1200px) {
    .topbar-pills[b-rl1u8xuub6] {
        display: none;
    }

    .notice-item:last-child[b-rl1u8xuub6] {
        display: none;
    }

    .upgrade-subtitle[b-rl1u8xuub6] {
        display: none;
    }

    .topbar-primary-actions[b-rl1u8xuub6] {
        max-width: min(64vw, min(var(--topbar-primary-actions-max, 980px), 760px));
    }

    .topbar-community-links[b-rl1u8xuub6] {
        max-width: min(40vw, min(var(--topbar-community-max, 620px), 420px));
    }
}

@media (min-width: 1440px) and (max-width: 1799px) {
    .topbar-primary-actions[b-rl1u8xuub6] {
        max-width: min(60vw, min(var(--topbar-primary-actions-max, 980px), 820px));
        gap: 8px;
    }

    .upgrade-plan[b-rl1u8xuub6] {
        flex-basis: min(var(--topbar-upgrade-max, 300px), 260px);
        max-width: min(var(--topbar-upgrade-max, 300px), 260px);
    }

    .upgrade-subtitle[b-rl1u8xuub6] {
        display: none;
    }

    .topbar-community-links[b-rl1u8xuub6] {
        flex-basis: min(var(--topbar-community-max, 620px), 340px);
        max-width: min(var(--topbar-community-max, 620px), 340px);
    }

    .topbar-community-link__label[b-rl1u8xuub6] {
        display: none;
    }

    .topbar-community-link[b-rl1u8xuub6] {
        padding: 8px 10px;
    }
}

@media (min-width: 1024px) and (max-width: 1439px) {
    .topbar-shortcuts[b-rl1u8xuub6] {
        display: none;
    }

    .topbar-primary-actions[b-rl1u8xuub6] {
        max-width: min(58vw, min(var(--topbar-primary-actions-max, 980px), 700px));
    }

    .topbar-community-links[b-rl1u8xuub6] {
        flex-basis: min(var(--topbar-community-max, 620px), 260px);
        max-width: min(var(--topbar-community-max, 620px), 260px);
    }

    .user-profile[b-rl1u8xuub6] {
        max-width: min(var(--topbar-user-max, 240px), 190px);
    }

    .upgrade-plan[b-rl1u8xuub6] {
        flex-basis: min(var(--topbar-upgrade-max, 300px), 220px);
        max-width: min(var(--topbar-upgrade-max, 300px), 220px);
    }
}

@media (max-width: 980px) {
    .topbar-message[b-rl1u8xuub6] {
        display: none;
    }

    .upgrade-plan[b-rl1u8xuub6] {
        display: none;
    }

    .topbar-primary-actions[b-rl1u8xuub6] {
        gap: 8px;
    }

    .topbar-community-links[b-rl1u8xuub6] {
        max-width: min(38vw, 360px);
    }
}

@media (max-width: 820px) {
    .topbar-primary-actions[b-rl1u8xuub6] {
        gap: 8px;
    }

    .topbar-shortcuts[b-rl1u8xuub6] {
        display: none;
    }
}

@media (max-width: 1100px) {
    .topbar-community-links[b-rl1u8xuub6] {
        max-width: min(var(--topbar-community-max, 620px), 300px);
    }

    .topbar-community-link[b-rl1u8xuub6] {
        padding: 8px 10px;
    }
}

@media (max-width: 720px) {
    .top-navbar[b-rl1u8xuub6] {
        min-height: var(--topbar-height-mobile);
        padding: 8px 12px;
        gap: 8px;
    }

    .top-navbar .left[b-rl1u8xuub6] {
        gap: 8px;
        flex: 0 0 auto;
    }

    .top-navbar .right[b-rl1u8xuub6] {
        gap: 8px;
        margin-left: auto;
    }

    .topbar-notice[b-rl1u8xuub6] {
        display: none;
    }

    .topbar-actions[b-rl1u8xuub6] {
        display: none;
    }

    .topbar-community-links[b-rl1u8xuub6] {
        display: none;
    }
}

@media (max-width: 920px) {
    .topbar-actions .topbar-link[b-rl1u8xuub6],
    .topbar-actions .topbar-button:not(.ghost)[b-rl1u8xuub6] {
        display: none;
    }

    .topbar-actions[b-rl1u8xuub6] {
        gap: 8px;
    }

    .topbar-community-link__label[b-rl1u8xuub6] {
        display: none;
    }

    .topbar-community-link[b-rl1u8xuub6] {
        padding: 8px 11px;
    }
}

/* In-app/mobile browsers can report larger viewport widths; keep topbar compact on touch devices. */
@media (hover: none) and (pointer: coarse) and (max-width: 1200px) {
    .topbar-actions .topbar-link[b-rl1u8xuub6],
    .topbar-actions .topbar-button:not(.ghost)[b-rl1u8xuub6] {
        display: none;
    }

    .topbar-community-link__label[b-rl1u8xuub6] {
        display: none;
    }

    .topbar-community-link[b-rl1u8xuub6] {
        padding: 8px 11px;
    }
}

@media (max-width: 430px) {
    .menu-toggle[b-rl1u8xuub6] {
        width: 44px;
        height: 44px;
    }

    .top-navbar .right[b-rl1u8xuub6] {
        gap: 6px;
    }

    .topbar-actions .topbar-button.ghost[b-rl1u8xuub6] {
        padding: 6px 12px;
        font-size: 0.85rem;
    }
}

@container (min-width: 1080px) {
    .upgrade-plan[b-rl1u8xuub6] {
        display: inline-flex;
        flex-basis: min(var(--topbar-upgrade-max, 300px), 270px);
        max-width: min(var(--topbar-upgrade-max, 300px), 270px);
    }

    .upgrade-subtitle[b-rl1u8xuub6] {
        display: block;
    }

    .topbar-community-links[b-rl1u8xuub6] {
        display: flex;
        flex-basis: min(var(--topbar-community-max, 620px), 500px);
        max-width: min(48vw, min(var(--topbar-community-max, 620px), 500px));
    }

    .topbar-community-link__label[b-rl1u8xuub6] {
        display: inline;
    }

    .topbar-community-link[b-rl1u8xuub6] {
        padding: 8px 12px;
    }

    .topbar-shortcuts[b-rl1u8xuub6] {
        display: flex;
    }

    .user-profile[b-rl1u8xuub6] {
        max-width: min(var(--topbar-user-max, 240px), 230px);
    }
}

@media (min-width: 1440px) and (max-width: 1799px) {
    .topbar-primary-actions[b-rl1u8xuub6] {
        max-width: 100%;
        gap: 10px;
    }

    .upgrade-plan[b-rl1u8xuub6] {
        flex-basis: min(var(--topbar-upgrade-max, 300px), 282px);
        max-width: min(var(--topbar-upgrade-max, 300px), 282px);
    }

    .upgrade-subtitle[b-rl1u8xuub6],
    .topbar-community-link__label[b-rl1u8xuub6] {
        display: inline;
    }

    .topbar-community-links[b-rl1u8xuub6] {
        display: flex;
        flex-basis: min(var(--topbar-community-max, 620px), 520px);
        max-width: min(100%, min(var(--topbar-community-max, 620px), 620px));
    }

    .topbar-shortcuts[b-rl1u8xuub6] {
        display: flex;
    }

    .user-profile[b-rl1u8xuub6] {
        max-width: min(var(--topbar-user-max, 240px), 230px);
    }
}

@media (min-width: 1280px) and (max-width: 1439px) {
    .topbar-primary-actions[b-rl1u8xuub6] {
        max-width: 100%;
        gap: 10px;
    }

    .upgrade-plan[b-rl1u8xuub6] {
        display: inline-flex;
        flex-basis: min(var(--topbar-upgrade-max, 300px), 270px);
        max-width: min(var(--topbar-upgrade-max, 300px), 270px);
    }

    .upgrade-subtitle[b-rl1u8xuub6] {
        display: block;
    }

    .topbar-community-links[b-rl1u8xuub6] {
        display: flex;
        flex-basis: min(var(--topbar-community-max, 620px), 580px);
        max-width: min(100%, min(var(--topbar-community-max, 620px), 620px));
    }

    .topbar-community-link__label[b-rl1u8xuub6] {
        display: inline;
    }

    .topbar-shortcuts[b-rl1u8xuub6] {
        display: flex;
    }

    .user-profile[b-rl1u8xuub6] {
        max-width: min(var(--topbar-user-max, 240px), 230px);
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    .topbar-primary-actions[b-rl1u8xuub6] {
        max-width: 100%;
        gap: 8px;
    }

    .upgrade-plan[b-rl1u8xuub6] {
        display: inline-flex;
        flex-basis: min(var(--topbar-upgrade-max, 300px), 236px);
        max-width: min(var(--topbar-upgrade-max, 300px), 236px);
    }

    .upgrade-subtitle[b-rl1u8xuub6] {
        display: none;
    }

    .topbar-community-links[b-rl1u8xuub6] {
        display: flex;
        flex-basis: min(var(--topbar-community-max, 620px), 500px);
        max-width: min(100%, min(var(--topbar-community-max, 620px), 520px));
    }

    .topbar-community-link__label[b-rl1u8xuub6] {
        display: inline;
    }

    .topbar-community-link[b-rl1u8xuub6] {
        padding: 8px 10px;
    }

    .topbar-shortcuts[b-rl1u8xuub6] {
        display: none;
    }

    .user-profile[b-rl1u8xuub6] {
        max-width: min(var(--topbar-user-max, 240px), 198px);
    }
}

@container (max-width: 1110px) {
    .topbar-shortcuts[b-rl1u8xuub6] {
        display: none;
    }
}

@container (max-width: 1060px) {
    .upgrade-subtitle[b-rl1u8xuub6] {
        display: none;
    }

    .topbar-community-links[b-rl1u8xuub6] {
        max-width: min(100%, min(var(--topbar-community-max, 620px), 360px));
    }
}

@container (max-width: 980px) {
    .topbar-community-link__label[b-rl1u8xuub6] {
        display: none;
    }

    .topbar-community-links[b-rl1u8xuub6] {
        max-width: min(100%, min(var(--topbar-community-max, 620px), 300px));
    }
}

@container (max-width: 1320px) {
    .topbar-community-links[b-rl1u8xuub6] {
        flex-basis: min(100%, min(var(--topbar-community-max, 620px), 460px));
        max-width: min(100%, min(var(--topbar-community-max, 620px), 460px));
    }
}

@container (max-width: 1080px) {
    .topbar-community-link__label[b-rl1u8xuub6] {
        display: none;
    }

    .topbar-community-link[b-rl1u8xuub6] {
        padding: 8px 10px;
    }

    .topbar-community-links[b-rl1u8xuub6] {
        flex-basis: min(100%, min(var(--topbar-community-max, 620px), 320px));
        max-width: min(100%, min(var(--topbar-community-max, 620px), 320px));
    }

    .user-profile[b-rl1u8xuub6] {
        max-width: min(var(--topbar-user-max, 240px), 210px);
    }
}

/* Product polish pass: calmer, denser top bar */
.top-navbar[b-rl1u8xuub6] {
    min-height: var(--topbar-height);
    padding: 10px max(18px, env(safe-area-inset-right)) 10px max(18px, env(safe-area-inset-left));
    background: color-mix(in srgb, var(--bg-surface, #ffffff) 92%, transparent);
    border-bottom: 0.5px solid var(--border-subtle, rgba(0,0,0,0.08));
    box-shadow: none;
}

.topbar-primary-actions[b-rl1u8xuub6] {
    overflow: visible;
    gap: 10px;
}

.notice-icon[b-rl1u8xuub6],
.shortcut[b-rl1u8xuub6],
.topbar-community-link--icon[b-rl1u8xuub6] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
}

.menu-toggle[b-rl1u8xuub6] {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
}

.menu-toggle[b-rl1u8xuub6],
.notice-icon[b-rl1u8xuub6] {
    background: var(--bg-muted, #F1EFE8);
    color: var(--brand-primary, #085041);
    border: 0.5px solid var(--border-subtle, rgba(0,0,0,0.08));
    box-shadow: none;
}

.notice-icon[b-rl1u8xuub6] {
    color: var(--warning-token, #854F0B);
    background: var(--warning-bg-token, #FAEEDA);
}

.user-profile[b-rl1u8xuub6] {
    min-height: 40px;
    padding: 4px 10px 4px 4px;
    border: 0.5px solid var(--border-subtle, rgba(0,0,0,0.08));
    background: var(--bg-muted, #F1EFE8);
}

.user-avatar[b-rl1u8xuub6] {
    width: 32px;
    height: 32px;
}

.topbar-resource-menu[b-rl1u8xuub6] {
    position: relative;
    flex: 0 0 auto;
    z-index: calc(var(--z-topbar-elevated, 2100) + 4);
}

.topbar-resource-menu > summary[b-rl1u8xuub6] {
    list-style: none;
}

.topbar-resource-menu > summary[b-rl1u8xuub6]::-webkit-details-marker {
    display: none;
}

.topbar-resource-trigger[b-rl1u8xuub6] {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 0;
    background: transparent;
    color: var(--text-secondary, #5F5E5A);
    cursor: pointer;
    user-select: none;
    transition: background var(--motion-fast, 150ms) var(--ease-out, ease), color var(--motion-fast, 150ms) var(--ease-out, ease);
}

.topbar-resource-trigger > svg[b-rl1u8xuub6] {
    display: block;
}

.topbar-resource-trigger:hover[b-rl1u8xuub6] {
    background: var(--bg-muted, #F1EFE8);
    color: var(--text-primary, #1A1A18);
}

.topbar-resource-menu[open] .topbar-resource-trigger[b-rl1u8xuub6] {
    background: var(--bg-muted, #F1EFE8);
    color: var(--text-primary, #1A1A18);
}

.topbar-resource-panel[b-rl1u8xuub6] {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 280px;
    padding: 10px;
    border-radius: 14px;
    border: 0.5px solid var(--border-subtle, rgba(0,0,0,0.08));
    background: var(--bg-surface, #ffffff);
    box-shadow: var(--shadow-modal, 0 8px 32px rgba(0,0,0,0.16));
    display: grid;
    gap: 10px;
    animation: topbar-popover-in-b-rl1u8xuub6 var(--motion-fast, 150ms) var(--ease-out, ease) both;
}

.topbar-resource-section[b-rl1u8xuub6] {
    display: grid;
    gap: 4px;
}

.topbar-resource-heading[b-rl1u8xuub6] {
    padding: 4px 8px;
    color: var(--text-tertiary, #888780);
    font-size: 11px;
    font-weight: 500;
}

.topbar-resource-link[b-rl1u8xuub6] {
    min-height: 38px;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 7px 8px;
    border-radius: 10px;
    color: var(--text-primary, #1A1A18);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
}

.topbar-resource-link:hover[b-rl1u8xuub6] {
    background: var(--bg-muted, #F1EFE8);
    color: var(--text-primary, #1A1A18);
}

.topbar-resource-icon[b-rl1u8xuub6],
.topbar-resource-dot[b-rl1u8xuub6] {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-primary-soft, #E1F5EE);
    color: var(--brand-primary, #085041);
}

.topbar-resource-dot[b-rl1u8xuub6] {
    width: 8px;
    height: 8px;
    justify-self: center;
    border-radius: 999px;
}

.topbar-resource-icon--dark[b-rl1u8xuub6] {
    background: var(--c-pink-bg, #FBEAF0);
    color: var(--text-primary, #1A1A18);
}

.topbar-actions--guest[b-rl1u8xuub6] {
    justify-content: flex-end;
    gap: 8px;
    white-space: nowrap;
}

.topbar-actions--guest .topbar-button[b-rl1u8xuub6],
.topbar-actions--guest .topbar-link[b-rl1u8xuub6] {
    min-height: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 12px;
    border-radius: 8px;
    border: 0.5px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    background: var(--bg-muted, #F1EFE8);
    color: var(--text-primary, #1A1A18);
    box-shadow: none;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    transition:
        background var(--motion-fast, 150ms) var(--ease-out, ease),
        border-color var(--motion-fast, 150ms) var(--ease-out, ease),
        color var(--motion-fast, 150ms) var(--ease-out, ease),
        transform var(--motion-instant, 100ms) var(--ease-out, ease),
        box-shadow var(--motion-fast, 150ms) var(--ease-out, ease);
}

.topbar-actions--guest .topbar-button i[b-rl1u8xuub6] {
    font-size: 14px;
    color: var(--brand-primary, #085041);
}

.topbar-actions--guest .topbar-button:hover[b-rl1u8xuub6],
.topbar-actions--guest .topbar-link:hover[b-rl1u8xuub6] {
    transform: translateY(-1px);
    background: var(--bg-base, #FAFAF7);
    border-color: rgba(11, 31, 29, 0.16);
    color: var(--text-primary, #1A1A18);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.topbar-actions--guest .topbar-button.facebook[b-rl1u8xuub6],
.topbar-actions--guest .topbar-button.tiktok[b-rl1u8xuub6] {
    background: var(--bg-muted, #F1EFE8);
    color: var(--text-primary, #1A1A18);
    box-shadow: none;
}

.topbar-actions--guest .topbar-button.facebook i[b-rl1u8xuub6] {
    color: #1877F2;
}

.topbar-actions--guest .topbar-button.tiktok i[b-rl1u8xuub6] {
    color: #111827;
}

.topbar-actions--guest .topbar-button.facebook span[b-rl1u8xuub6] {
    font-size: inherit;
}

.topbar-actions--guest .topbar-button.facebook span[b-rl1u8xuub6]::after {
    content: none;
}

.topbar-actions--guest .topbar-button.ghost[b-rl1u8xuub6] {
    background: transparent;
    color: var(--brand-primary, #085041);
    border-color: rgba(8, 80, 65, 0.22);
}

.topbar-actions--guest .topbar-button.ghost:hover[b-rl1u8xuub6] {
    background: var(--brand-primary-soft, #E1F5EE);
    color: var(--brand-primary, #085041);
}

.topbar-actions--guest .topbar-button.primary[b-rl1u8xuub6] {
    background: var(--brand-primary, #085041);
    color: #FFFFFF;
    border-color: var(--brand-primary, #085041);
}

.topbar-actions--guest .topbar-button.primary:hover[b-rl1u8xuub6] {
    background: var(--brand-primary-hover, #0F6E56);
    border-color: var(--brand-primary-hover, #0F6E56);
    color: #FFFFFF;
    box-shadow: 0 6px 14px rgba(8, 80, 65, 0.18);
}

@media (max-width: 920px) {
    .topbar-actions--guest .topbar-button.subtle[b-rl1u8xuub6] {
        display: none;
    }

    .topbar-actions--guest .topbar-button.primary[b-rl1u8xuub6],
    .topbar-actions--guest .topbar-button.ghost[b-rl1u8xuub6] {
        display: inline-flex;
    }
}

@keyframes topbar-popover-in-b-rl1u8xuub6 {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* =========================================================
   DARK MODE OVERRIDES (Teal/Dark Green Palette)
   ========================================================= */
[data-theme="dark"] .topbar[b-rl1u8xuub6] { background: var(--bg-surface); }
[data-theme="dark"] .topbar-community-popover[b-rl1u8xuub6],
[data-theme="dark"] .topbar-user-popover[b-rl1u8xuub6] { 
    background: var(--bg-surface) !important; 
    border: 1px solid var(--border-default, rgba(255,255,255,0.08)); 
}
[data-theme="dark"] .topbar-course-card[b-rl1u8xuub6] { background: var(--bg-muted) !important; }
[data-theme="dark"] .topbar-course-card:hover[b-rl1u8xuub6] { background: var(--bg-hover) !important; }
[data-theme="dark"] .topbar-search-input[b-rl1u8xuub6] { background: var(--bg-muted) !important; }
[data-theme="dark"] .topbar-nav-link:hover[b-rl1u8xuub6] { background: var(--bg-hover) !important; }
[data-theme="dark"] .shortcut[b-rl1u8xuub6] { background: var(--bg-muted) !important; }
[data-theme="dark"] .shortcut:hover[b-rl1u8xuub6] { background: var(--bg-hover) !important; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .top-navbar[b-rl1u8xuub6] {
        background: color-mix(in srgb, var(--bg-surface, #171D1A) 92%, transparent);
        border-bottom-color: var(--border-subtle, rgba(255,255,255,0.08));
        color: var(--text-primary, #F4F6F3);
    }

    :root:not([data-theme="light"]) :is(
        .menu-toggle,
        .notice-icon,
        .shortcut,
        .topbar-community-link--icon,
        .user-profile,
        .topbar-resource-trigger,
        .topbar-actions--guest .topbar-button,
        .topbar-actions--guest .topbar-link
    )[b-rl1u8xuub6] {
        background: var(--bg-elevated, #222923);
        border-color: var(--border-subtle, rgba(255,255,255,0.08));
        color: var(--text-secondary, #C9D3CD);
        box-shadow: none;
    }

    :root:not([data-theme="light"]) :is(.menu-toggle:hover, .shortcut:hover, .user-profile:hover, .topbar-resource-trigger:hover, .topbar-resource-menu[open] .topbar-resource-trigger)[b-rl1u8xuub6] {
        background: var(--bg-hover, #263029);
        color: var(--text-primary, #F4F6F3);
    }

    :root:not([data-theme="light"]) :is(.pill-trigger, .pill-menu, .topbar-pill, .topbar-message, .notice-item, .topbar-community-links, .topbar-community-link, .topbar-resource-panel, .user-dropdown)[b-rl1u8xuub6] {
        background: var(--bg-surface, #171D1A);
        border-color: var(--border-subtle, rgba(255,255,255,0.08));
        color: var(--text-primary, #F4F6F3);
        box-shadow: 0 18px 30px rgba(0,0,0,0.28);
    }

    :root:not([data-theme="light"]) :is(.upgrade-plan, .notice-icon)[b-rl1u8xuub6] {
        background: var(--warning-bg, rgba(250,199,117,0.12));
        border-color: rgba(250,199,117,0.20);
        color: var(--warning-text, #F4C987);
        box-shadow: none;
    }

    :root:not([data-theme="light"]) :is(.upgrade-title, .upgrade-subtitle, .upgrade-icon, .pill-label, .notice-time)[b-rl1u8xuub6] {
        color: var(--text-muted, #94A199);
    }

    :root:not([data-theme="light"]) .message-input[b-rl1u8xuub6]::placeholder {
        color: var(--text-muted, #94A199);
    }

    :root:not([data-theme="light"]) :is(.message-input, .topbar-link, .topbar-resource-link, .user-name)[b-rl1u8xuub6] {
        color: var(--text-primary, #F4F6F3);
    }

    :root:not([data-theme="light"]) :is(.topbar-resource-link:hover, .user-dropdown a:hover, .topbar-actions--guest .topbar-button:hover, .topbar-actions--guest .topbar-link:hover)[b-rl1u8xuub6] {
        background: var(--bg-hover, #263029);
        color: var(--text-primary, #F4F6F3);
        border-color: var(--border-default, rgba(255,255,255,0.14));
    }
}

[data-theme="dark"] .top-navbar[b-rl1u8xuub6] {
    background: color-mix(in srgb, var(--bg-surface, #171D1A) 92%, transparent);
    border-bottom-color: var(--border-subtle, rgba(255,255,255,0.08));
    color: var(--text-primary, #F4F6F3);
}

[data-theme="dark"] :is(
    .menu-toggle,
    .notice-icon,
    .shortcut,
    .topbar-community-link--icon,
    .user-profile,
    .topbar-resource-trigger,
    .topbar-actions--guest .topbar-button,
    .topbar-actions--guest .topbar-link
)[b-rl1u8xuub6] {
    background: var(--bg-elevated, #222923);
    border-color: var(--border-subtle, rgba(255,255,255,0.08));
    color: var(--text-secondary, #C9D3CD);
    box-shadow: none;
}

[data-theme="dark"] :is(.menu-toggle:hover, .shortcut:hover, .user-profile:hover, .topbar-resource-trigger:hover, .topbar-resource-menu[open] .topbar-resource-trigger)[b-rl1u8xuub6] {
    background: var(--bg-hover, #263029);
    color: var(--text-primary, #F4F6F3);
}

[data-theme="dark"] :is(.pill-trigger, .pill-menu, .topbar-pill, .topbar-message, .notice-item, .topbar-community-links, .topbar-community-link, .topbar-resource-panel, .user-dropdown)[b-rl1u8xuub6] {
    background: var(--bg-surface, #171D1A);
    border-color: var(--border-subtle, rgba(255,255,255,0.08));
    color: var(--text-primary, #F4F6F3);
    box-shadow: 0 18px 30px rgba(0,0,0,0.28);
}

[data-theme="dark"] :is(.upgrade-plan, .notice-icon)[b-rl1u8xuub6] {
    background: var(--warning-bg, rgba(250,199,117,0.12));
    border-color: rgba(250,199,117,0.20);
    color: var(--warning-text, #F4C987);
    box-shadow: none;
}

[data-theme="dark"] :is(.upgrade-title, .upgrade-subtitle, .upgrade-icon, .pill-label, .notice-time)[b-rl1u8xuub6] {
    color: var(--text-muted, #94A199);
}

[data-theme="dark"] .message-input[b-rl1u8xuub6]::placeholder {
    color: var(--text-muted, #94A199);
}

[data-theme="dark"] :is(.message-input, .topbar-link, .topbar-resource-link, .user-name)[b-rl1u8xuub6] {
    color: var(--text-primary, #F4F6F3);
}

[data-theme="dark"] :is(.topbar-resource-link:hover, .user-dropdown a:hover, .topbar-actions--guest .topbar-button:hover, .topbar-actions--guest .topbar-link:hover)[b-rl1u8xuub6] {
    background: var(--bg-hover, #263029);
    color: var(--text-primary, #F4F6F3);
    border-color: var(--border-default, rgba(255,255,255,0.14));
}

.menu-toggle[b-rl1u8xuub6] {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
}

/* Account and learning-resource popovers */
.user-profile[b-rl1u8xuub6],
.topbar-resource-menu[b-rl1u8xuub6] {
    font-family: var(--font-sans, "Be Vietnam Pro", "Inter", sans-serif);
}

.user-profile[b-rl1u8xuub6] {
    min-height: 48px;
    gap: 10px;
    padding: 5px 12px 5px 5px;
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    background: var(--bg-surface, #FFFFFF);
    box-shadow: 0 1px 2px rgba(8, 80, 65, 0.04);
    transition: background var(--t-fast, 150ms) var(--ease, ease),
                border-color var(--t-fast, 150ms) var(--ease, ease),
                box-shadow var(--t-fast, 150ms) var(--ease, ease);
}

.user-profile:hover[b-rl1u8xuub6],
.user-profile[aria-expanded="true"][b-rl1u8xuub6] {
    background: var(--bg-surface, #FFFFFF);
    border-color: color-mix(in srgb, var(--brand-primary, #085041) 28%, transparent);
    box-shadow: 0 8px 22px rgba(8, 80, 65, 0.10);
}

.user-profile:focus-visible[b-rl1u8xuub6],
.topbar-resource-trigger:focus-visible[b-rl1u8xuub6],
.topbar-resource-link:focus-visible[b-rl1u8xuub6],
.user-dropdown .dropdown-item:focus-visible[b-rl1u8xuub6] {
    outline: none;
    box-shadow: var(--focus-ring, 0 0 0 3px rgba(15, 110, 86, 0.18));
}

.user-avatar[b-rl1u8xuub6] {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 2px solid var(--bg-surface, #FFFFFF);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-primary, #085041) 18%, transparent);
}

.user-name[b-rl1u8xuub6] {
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.25;
}

.user-role[b-rl1u8xuub6] {
    font-size: 0.68rem;
    line-height: 1.3;
}

.user-profile[b-rl1u8xuub6]  .lucide-chevron-down {
    width: 14px;
    height: 14px;
    color: var(--text-secondary, #5F5E5A);
    transition: transform var(--t-fast, 150ms) var(--ease, ease);
}

.user-profile[aria-expanded="true"][b-rl1u8xuub6]  .lucide-chevron-down {
    transform: rotate(180deg);
}

.user-dropdown[b-rl1u8xuub6] {
    top: calc(100% + 10px);
    width: min(340px, calc(100vw - 24px));
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: 20px;
    background: var(--bg-surface, #FFFFFF);
    box-shadow: 0 24px 56px rgba(8, 44, 36, 0.16), 0 4px 12px rgba(8, 44, 36, 0.06);
    transform-origin: top right;
}

.user-dropdown.show[b-rl1u8xuub6] {
    display: block;
    animation: topbar-popover-in-b-rl1u8xuub6 var(--t-fast, 150ms) var(--ease, ease) both;
}

.user-dropdown-head[b-rl1u8xuub6] {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 18px 20px;
    background: linear-gradient(135deg, var(--brand-primary-soft, #E1F5EE), var(--bg-surface, #FFFFFF) 72%);
    border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
}

.user-dropdown-avatar[b-rl1u8xuub6] {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 16px;
    color: #FFFFFF;
    background: var(--brand-primary, #085041);
    box-shadow: 0 8px 18px rgba(8, 80, 65, 0.16);
}

.user-dropdown-avatar img[b-rl1u8xuub6] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-dropdown-avatar[b-rl1u8xuub6]  .lucide {
    width: 21px;
    height: 21px;
}

.user-dropdown-identity[b-rl1u8xuub6] {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.user-dropdown-identity strong[b-rl1u8xuub6] {
    overflow: hidden;
    color: var(--text-primary, #1A1A18);
    font-size: 0.96rem;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-dropdown-identity span[b-rl1u8xuub6] {
    color: var(--text-secondary, #5F5E5A);
    font-size: 0.76rem;
    line-height: 1.4;
}

.user-dropdown-list[b-rl1u8xuub6] {
    display: grid;
    gap: 2px;
    padding: 10px;
}

.user-dropdown-footer[b-rl1u8xuub6] {
    padding: 10px;
    border-top: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
}

.user-dropdown .dropdown-item[b-rl1u8xuub6] {
    min-height: 58px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 11px;
    padding: 8px 10px;
    border-radius: 12px;
    color: var(--text-primary, #1A1A18);
    transition: background var(--t-fast, 150ms) var(--ease, ease),
                color var(--t-fast, 150ms) var(--ease, ease);
}

.user-dropdown .dropdown-item:hover[b-rl1u8xuub6] {
    background: var(--brand-primary-soft, #E1F5EE);
}

.dropdown-item-icon[b-rl1u8xuub6] {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: var(--brand-primary, #085041);
    background: color-mix(in srgb, var(--brand-primary-soft, #E1F5EE) 74%, var(--bg-surface, #FFFFFF));
}

.dropdown-item-icon[b-rl1u8xuub6]  .lucide {
    width: 17px;
    height: 17px;
}

.dropdown-item-copy[b-rl1u8xuub6] {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.dropdown-item-copy strong[b-rl1u8xuub6],
.topbar-resource-copy strong[b-rl1u8xuub6] {
    color: inherit;
    font-size: 0.79rem;
    font-weight: 700;
    line-height: 1.35;
}

.dropdown-item-copy small[b-rl1u8xuub6],
.topbar-resource-copy small[b-rl1u8xuub6] {
    overflow: hidden;
    color: var(--text-secondary, #5F5E5A);
    font-size: 0.68rem;
    font-weight: 400;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-dropdown .dropdown-item[b-rl1u8xuub6]  .lucide-chevron-right {
    width: 15px;
    height: 15px;
    color: var(--text-tertiary, #888780);
    opacity: 0;
    transform: translateX(-3px);
    transition: opacity var(--t-fast, 150ms) var(--ease, ease),
                transform var(--t-fast, 150ms) var(--ease, ease);
}

.user-dropdown .dropdown-item:hover[b-rl1u8xuub6]  .lucide-chevron-right,
.user-dropdown .dropdown-item:focus-visible[b-rl1u8xuub6]  .lucide-chevron-right {
    opacity: 1;
    transform: translateX(0);
}

.user-dropdown .dropdown-item.danger[b-rl1u8xuub6] {
    color: var(--danger-text, #A32D2D);
}

.user-dropdown .dropdown-item.danger:hover[b-rl1u8xuub6] {
    background: var(--danger-bg, #FCEBEB);
}

.user-dropdown .dropdown-item.danger .dropdown-item-icon[b-rl1u8xuub6] {
    color: var(--danger-text, #A32D2D);
    background: var(--danger-bg, #FCEBEB);
}

.topbar-resource-trigger[b-rl1u8xuub6] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    background: var(--bg-muted, #F1EFE8);
    color: var(--brand-primary, #085041);
}

.topbar-resource-trigger:hover[b-rl1u8xuub6],
.topbar-resource-menu[open] .topbar-resource-trigger[b-rl1u8xuub6] {
    border-color: color-mix(in srgb, var(--brand-primary, #085041) 24%, transparent);
    background: var(--brand-primary-soft, #E1F5EE);
    color: var(--brand-primary, #085041);
}

.topbar-resource-panel[b-rl1u8xuub6] {
    top: calc(100% + 10px);
    width: min(392px, calc(100vw - 24px));
    max-height: min(680px, calc(100dvh - var(--topbar-height, 72px) - 28px));
    padding: 0;
    gap: 0;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: 20px;
    background: var(--bg-surface, #FFFFFF);
    box-shadow: 0 24px 56px rgba(8, 44, 36, 0.16), 0 4px 12px rgba(8, 44, 36, 0.06);
    transform-origin: top right;
    scrollbar-width: thin;
    scrollbar-color: var(--border-default, rgba(0, 0, 0, 0.15)) transparent;
}

.topbar-resource-intro[b-rl1u8xuub6] {
    display: grid;
    gap: 4px;
    padding: 18px 20px 16px;
    border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    background: linear-gradient(135deg, var(--brand-primary-soft, #E1F5EE), var(--bg-surface, #FFFFFF) 74%);
}

.topbar-resource-intro strong[b-rl1u8xuub6] {
    color: var(--text-primary, #1A1A18);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
}

.topbar-resource-intro span[b-rl1u8xuub6] {
    color: var(--text-secondary, #5F5E5A);
    font-size: 0.72rem;
    line-height: 1.45;
}

.topbar-resource-section[b-rl1u8xuub6] {
    gap: 8px;
    padding: 14px;
}

.topbar-resource-section + .topbar-resource-section[b-rl1u8xuub6] {
    padding-top: 4px;
}

.topbar-resource-heading[b-rl1u8xuub6] {
    padding: 0 6px;
    color: var(--text-tertiary, #888780);
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.topbar-resource-quick-grid[b-rl1u8xuub6] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.topbar-resource-group-list[b-rl1u8xuub6] {
    display: grid;
    gap: 8px;
}

.topbar-resource-link[b-rl1u8xuub6] {
    font-size: inherit;
    font-weight: inherit;
    transition: background var(--t-fast, 150ms) var(--ease, ease),
                border-color var(--t-fast, 150ms) var(--ease, ease),
                box-shadow var(--t-fast, 150ms) var(--ease, ease);
}

.topbar-resource-link--quick[b-rl1u8xuub6] {
    min-height: 78px;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: 14px;
    background: var(--bg-surface, #FFFFFF);
}

.topbar-resource-link--quick:hover[b-rl1u8xuub6],
.topbar-resource-link--quick:focus-visible[b-rl1u8xuub6] {
    border-color: color-mix(in srgb, var(--brand-primary, #085041) 28%, transparent);
    background: var(--brand-primary-soft, #E1F5EE);
    box-shadow: 0 6px 16px rgba(8, 80, 65, 0.08);
}

.topbar-resource-icon[b-rl1u8xuub6] {
    width: 36px;
    height: 36px;
    border-radius: 11px;
}

.topbar-resource-icon[b-rl1u8xuub6]  .lucide {
    width: 17px;
    height: 17px;
}

.topbar-resource-copy[b-rl1u8xuub6] {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.topbar-resource-copy small[b-rl1u8xuub6] {
    white-space: normal;
}

.topbar-resource-link--group[b-rl1u8xuub6] {
    min-height: 62px;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 9px;
    padding: 9px 10px;
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: 14px;
    background: var(--bg-surface, #FFFFFF);
}

.topbar-resource-link--group:hover[b-rl1u8xuub6],
.topbar-resource-link--group:focus-visible[b-rl1u8xuub6] {
    border-color: color-mix(in srgb, var(--brand-primary, #085041) 26%, transparent);
    background: color-mix(in srgb, var(--brand-primary-soft, #E1F5EE) 52%, var(--bg-surface, #FFFFFF));
}

.topbar-resource-link--group .topbar-resource-dot[b-rl1u8xuub6] {
    width: 11px;
    height: 11px;
}

.topbar-resource-link--group .topbar-resource-icon[b-rl1u8xuub6] {
    width: 28px;
    height: 28px;
    border-radius: 9px;
}

.topbar-resource-cta[b-rl1u8xuub6] {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 9px;
    border-radius: 999px;
    color: var(--brand-primary, #085041);
    background: var(--brand-primary-soft, #E1F5EE);
    font-size: 0.66rem;
    font-weight: 700;
    white-space: nowrap;
}

.topbar-resource-cta[b-rl1u8xuub6]  .lucide {
    width: 13px;
    height: 13px;
}

.topbar-resource-icon--dark[b-rl1u8xuub6] {
    color: var(--text-primary, #1A1A18);
    background: var(--bg-muted, #F1EFE8);
}

@media (max-width: 640px) {
    .topbar-resource-panel[b-rl1u8xuub6],
    .user-dropdown[b-rl1u8xuub6] {
        position: fixed;
        top: calc(var(--topbar-height-mobile, 64px) + 8px);
        right: 12px;
        left: 12px;
        width: auto;
        max-height: calc(100dvh - var(--topbar-height-mobile, 64px) - 20px);
    }
}

@media (max-width: 430px) {
    .topbar-resource-quick-grid[b-rl1u8xuub6] {
        grid-template-columns: 1fr;
    }

    .topbar-resource-link--quick[b-rl1u8xuub6] {
        min-height: 64px;
    }

    .topbar-resource-cta[b-rl1u8xuub6] {
        padding-inline: 8px;
    }

    .topbar-resource-cta[b-rl1u8xuub6]  .lucide {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .user-dropdown.show[b-rl1u8xuub6],
    .topbar-resource-panel[b-rl1u8xuub6] {
        animation: none;
    }
}
/* _content/AptisWeb/Components/LearningGuide/GuideVideoPlayer.razor.rz.scp.css */
.guide-video-player[b-w5h7se7e63] {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 18px;
    background: #073f35;
    color: #fff;
}

.guide-video-player video[b-w5h7se7e63] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #061f1b;
}

/* Preserve the complete recording when native video controls enter fullscreen. */
.guide-video-player video:fullscreen[b-w5h7se7e63],
.guide-video-player:fullscreen video[b-w5h7se7e63],
.guide-video-player video:-webkit-full-screen[b-w5h7se7e63],
.guide-video-player:-webkit-full-screen video[b-w5h7se7e63] {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    object-fit: contain;
    background: #000;
}

.guide-video-player__empty[b-w5h7se7e63] {
    position: relative;
    isolation: isolate;
    width: 100%;
    height: 100%;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 28px;
    text-align: center;
    background:
        radial-gradient(circle at 14% 18%, rgba(255, 255, 255, 0.16), transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(255, 255, 255, 0.10), transparent 30%),
        linear-gradient(135deg, #064e3b 0%, #0f6e56 54%, #0a5b68 100%);
}

.guide-video-player__empty[b-w5h7se7e63]::before,
.guide-video-player__empty[b-w5h7se7e63]::after {
    content: "";
    position: absolute;
    z-index: -1;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 999px;
}

.guide-video-player__empty[b-w5h7se7e63]::before {
    width: 210px;
    height: 210px;
    left: -80px;
    bottom: -110px;
}

.guide-video-player__empty[b-w5h7se7e63]::after {
    width: 150px;
    height: 150px;
    right: -58px;
    top: -76px;
}

.guide-video-player__icon[b-w5h7se7e63] {
    width: 60px;
    height: 60px;
    display: grid;
    place-items: center;
    margin-bottom: 3px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 12px 32px rgba(4, 31, 27, 0.22);
}

.guide-video-player__eyebrow[b-w5h7se7e63] {
    color: rgba(255, 255, 255, 0.74);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.guide-video-player__empty strong[b-w5h7se7e63] {
    color: #fff;
    font-size: clamp(17px, 2.2vw, 22px);
    line-height: 1.35;
}

.guide-video-player__empty > span:last-child[b-w5h7se7e63] {
    max-width: 430px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 12px;
    line-height: 1.55;
}

.guide-video-player--compact[b-w5h7se7e63] {
    border-radius: 14px;
}

.guide-video-player--compact .guide-video-player__empty[b-w5h7se7e63] {
    min-height: 205px;
    padding: 22px;
}

.guide-video-player--compact .guide-video-player__icon[b-w5h7se7e63] {
    width: 52px;
    height: 52px;
    border-radius: 15px;
}

@media (max-width: 520px) {
    .guide-video-player[b-w5h7se7e63],
    .guide-video-player--compact[b-w5h7se7e63] {
        border-radius: 12px;
    }

    .guide-video-player__empty[b-w5h7se7e63],
    .guide-video-player--compact .guide-video-player__empty[b-w5h7se7e63] {
        min-height: 190px;
        padding: 18px;
    }

    .guide-video-player__icon[b-w5h7se7e63],
    .guide-video-player--compact .guide-video-player__icon[b-w5h7se7e63] {
        width: 48px;
        height: 48px;
    }
}
/* _content/AptisWeb/Components/Lesson/LanguageBuildingSection.razor.rz.scp.css */
.lb[b-13yqbvf9qu] {
    margin-bottom: 24px;
}

/* Header */
.lb-h[b-13yqbvf9qu] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.lb-h-l[b-13yqbvf9qu] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.lb-h-t[b-13yqbvf9qu] {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary, #1A1A18);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lb-h-t i[b-13yqbvf9qu] {
    font-size: 16px;
    color: var(--brand-hover, #0F6E56);
}

.lb-h-c[b-13yqbvf9qu] {
    font-size: 12px;
    color: var(--text-tertiary, #888780);
}

.lb-h-stat[b-13yqbvf9qu] {
    font-size: 11.5px;
    color: var(--brand-hover, #0F6E56);
    background: var(--brand-soft, #E1F5EE);
    border-radius: var(--radius-pill, 999px);
    padding: 3px 10px;
    white-space: nowrap;
}

/* Toolbar */
.lb-toolbar[b-13yqbvf9qu] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.lb-search[b-13yqbvf9qu] {
    flex: 1;
    min-width: 180px;
    padding: 7px 10px 7px 30px;
    border: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
    border-radius: var(--radius-input, 8px);
    font-size: 13px;
    background: var(--bg-surface, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 10px center;
    outline: none;
    transition: border-color 0.15s;
}

.lb-search:focus[b-13yqbvf9qu] {
    border-color: var(--brand-hover, #0F6E56);
}

.lb-pill[b-13yqbvf9qu] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
    border-radius: var(--radius-pill, 999px);
    background: transparent;
    font-size: 12.5px;
    color: var(--text-secondary, #5F5E5A);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.lb-pill:hover[b-13yqbvf9qu] {
    background: var(--bg-muted, #F1EFE8);
}

.lb-pill.active[b-13yqbvf9qu] {
    background: var(--brand-dark, #04342C);
    color: #fff;
    border-color: var(--brand-dark, #04342C);
}

.lb-pill-c[b-13yqbvf9qu] {
    font-size: 11px;
    opacity: 0.75;
}

/* Groups */
.lb-groups[b-13yqbvf9qu] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lb-group[b-13yqbvf9qu] {
    background: var(--bg-surface, #fff);
    border: 0.5px solid var(--border-subtle, rgba(0,0,0,0.08));
    border-radius: var(--radius-card, 12px);
    overflow: hidden;
}

.lb-group-h[b-13yqbvf9qu] {
    display: flex;
    align-items: stretch;
    width: 100%;
    background: var(--bg-muted, #F1EFE8);
    border: none;
    text-align: left;
}

.lb-group-toggle[b-13yqbvf9qu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    padding: 11px 14px;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s;
    font: inherit;
    color: inherit;
}

.lb-group-toggle:hover[b-13yqbvf9qu] {
    background: var(--bg-hover, rgba(0,0,0,0.04));
}

.lb-view-toggle[b-13yqbvf9qu] {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 6px 12px;
    border-left: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
    background: var(--bg-muted, #F1EFE8);
}

.lb-view-btn[b-13yqbvf9qu] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    font: inherit;
    font-size: 12px;
    color: var(--text-secondary, #5F5E5A);
    background: transparent;
    border: 0;
    cursor: pointer;
    border-radius: var(--radius-sm, 6px);
    transition: background 0.12s, color 0.12s;
}

.lb-view-btn:hover[b-13yqbvf9qu] {
    background: var(--bg-hover, rgba(0,0,0,0.04));
}

.lb-view-btn.is-active[b-13yqbvf9qu] {
    background: var(--brand, #085041);
    color: #fff;
}

.lb-view-btn i.lucide[b-13yqbvf9qu] {
    font-size: 14px;
}

/* Chunk */
.lb-chunk[b-13yqbvf9qu] {
    border-top: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
}

.lb-chunk:first-child[b-13yqbvf9qu] { border-top: 0; }

.lb-chunk-h[b-13yqbvf9qu] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 14px;
    background: transparent;
    border: 0;
    font: inherit;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s;
}

.lb-chunk-h:hover[b-13yqbvf9qu] { background: var(--bg-hover, rgba(0,0,0,0.04)); }

.lb-chunk-tag[b-13yqbvf9qu] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--brand-dark, #04342C);
    padding: 2px 8px;
    border-radius: var(--radius-pill, 999px);
    background: var(--brand-soft, #E1F5EE);
}

.lb-chunk-c[b-13yqbvf9qu] {
    flex: 1;
    font-size: 12px;
    color: var(--text-tertiary, #888780);
}

.lb-chunk-chev[b-13yqbvf9qu] {
    font-size: 14px;
    color: var(--text-tertiary, #888780);
}

.lb-group-h-l[b-13yqbvf9qu] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lb-group-num[b-13yqbvf9qu] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--brand-hover, #0F6E56);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lb-group-t[b-13yqbvf9qu] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary, #1A1A18);
    margin: 0;
}

.lb-group-h-r[b-13yqbvf9qu] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lb-group-c[b-13yqbvf9qu] {
    font-size: 11.5px;
    color: var(--text-tertiary, #888780);
}

.lb-group-chev[b-13yqbvf9qu] {
    color: var(--text-tertiary, #888780);
    font-size: 14px;
}

/* Phrase rows */
.lb-rows[b-13yqbvf9qu] {
    padding: 6px 0;
}

.lb-row[b-13yqbvf9qu] {
    display: grid;
    grid-template-columns: 28px 1fr 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 6px 14px;
    transition: background 0.1s;
}

.lb-row:hover[b-13yqbvf9qu] {
    background: var(--bg-hover, rgba(0,0,0,0.04));
}

.lb-row-num[b-13yqbvf9qu] {
    font-size: 11px;
    color: var(--text-tertiary, #888780);
    font-variant-numeric: tabular-nums;
}

.lb-row-en[b-13yqbvf9qu] {
    font-size: 13px;
    color: var(--text-primary, #1A1A18);
}

.lb-row-en strong[b-13yqbvf9qu] {
    background: var(--c-amber-bg, #FAEEDA);
    border-radius: 2px;
    padding: 0 1px;
}

.lb-row-en mark[b-13yqbvf9qu] {
    background: var(--c-amber-bg, #FAEEDA);
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
}

.lb-row-vi[b-13yqbvf9qu] {
    font-size: 12.5px;
    color: var(--text-secondary, #5F5E5A);
}

.lb-row-audio[b-13yqbvf9qu],
.lb-row-bm[b-13yqbvf9qu] {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm, 6px);
    border: none;
    background: transparent;
    color: var(--text-tertiary, #888780);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.12s, color 0.12s;
    flex-shrink: 0;
}

.lb-row-audio:hover[b-13yqbvf9qu] {
    background: var(--bg-muted, #F1EFE8);
    color: var(--text-primary, #1A1A18);
}

.lb-row-audio.playing[b-13yqbvf9qu] {
    background: var(--brand-hover, #0F6E56);
    color: #fff;
}

.lb-row-bm:hover[b-13yqbvf9qu] {
    background: var(--bg-muted, #F1EFE8);
    color: var(--text-primary, #1A1A18);
}

.lb-row-bm.active[b-13yqbvf9qu] {
    background: var(--c-amber-bg, #FAEEDA);
    color: var(--c-amber-fg, #BA7517);
}

@media (max-width: 640px) {
    .lb-row[b-13yqbvf9qu] {
        grid-template-columns: 24px 1fr auto auto;
    }

    .lb-row-vi[b-13yqbvf9qu] {
        display: none;
    }
}
/* _content/AptisWeb/Components/Lesson/LessonCallout.razor.rz.scp.css */
.lcallout[b-bhkhlpgnd3] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 16px;
    border-left: 4px solid var(--warning-fg, #854F0B);
    background: var(--warning-bg, #FAEEDA);
    color: var(--text, #1A1A18);
    border-radius: 0 var(--r-md, 8px) var(--r-md, 8px) 0;
    margin-bottom: 16px;
}

.lcallout.is-sticky[b-bhkhlpgnd3] {
    position: sticky;
    top: 54px;
    z-index: 3;
    box-shadow: var(--shadow-hover, 0 4px 12px rgba(0, 0, 0, 0.06));
}

.lcallout-icon[b-bhkhlpgnd3] {
    flex-shrink: 0;
    font-size: 22px;
    line-height: 1;
    margin-top: 1px;
    color: var(--warning-fg, #854F0B);
}

.lcallout-body[b-bhkhlpgnd3] {
    flex: 1;
    min-width: 0;
    font-size: 0.92rem;
    line-height: 1.55;
}

.lcallout-body p[b-bhkhlpgnd3] {
    margin: 0 0 6px;
}

.lcallout-body p:last-child[b-bhkhlpgnd3] {
    margin-bottom: 0;
}

.lcallout-body ul[b-bhkhlpgnd3] {
    margin: 6px 0;
    padding-left: 20px;
}

.lcallout-body li[b-bhkhlpgnd3] {
    margin-bottom: 2px;
}

.lcallout-title[b-bhkhlpgnd3] {
    color: var(--warning-fg, #854F0B);
}

.lcallout--info[b-bhkhlpgnd3] {
    border-left-color: var(--info-fg, #185FA5);
    background: var(--info-bg, #E6F1FB);
}
.lcallout--info .lcallout-icon[b-bhkhlpgnd3],
.lcallout--info .lcallout-title[b-bhkhlpgnd3] {
    color: var(--info-fg, #185FA5);
}

.lcallout--success[b-bhkhlpgnd3] {
    border-left-color: var(--success-fg, #3B6D11);
    background: var(--success-bg, #EAF3DE);
}
.lcallout--success .lcallout-icon[b-bhkhlpgnd3],
.lcallout--success .lcallout-title[b-bhkhlpgnd3] {
    color: var(--success-fg, #3B6D11);
}

.lcallout--danger[b-bhkhlpgnd3] {
    border-left-color: var(--danger-fg, #A32D2D);
    background: var(--danger-bg, #FCEBEB);
}
.lcallout--danger .lcallout-icon[b-bhkhlpgnd3],
.lcallout--danger .lcallout-title[b-bhkhlpgnd3] {
    color: var(--danger-fg, #A32D2D);
}
/* _content/AptisWeb/Components/Lesson/LessonContentBody.razor.rz.scp.css */
.lcb[b-q8vhqeytgo] {
    margin-bottom: 28px;
    padding: 24px 26px;
    border: 1px solid var(--border-subtle, #E5E7EB);
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(249, 250, 251, 0.72), rgba(255, 255, 255, 0) 140px),
        var(--bg-surface, #fff);
    box-shadow: 0 18px 38px -34px rgba(30, 27, 75, 0.5);
}

.lcb-h[b-q8vhqeytgo] {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary, #111827);
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-subtle, #E5E7EB);
}

.lcb-content[b-q8vhqeytgo] {
    max-width: 76ch;
}

.lcb-content[b-q8vhqeytgo]  h2 {
    font-size: 25px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-primary, #111827);
    margin: 22px 0 8px;
}

.lcb-content[b-q8vhqeytgo]  h2:first-child {
    margin-top: 0;
}

.lcb-content[b-q8vhqeytgo]  h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 20px 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4338ca;
}

.lcb-content[b-q8vhqeytgo]  h3::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 14px;
    background: #4f46e5;
    border-radius: 2px;
    flex-shrink: 0;
}

.lcb-content[b-q8vhqeytgo]  h3 i {
    font-size: 14px;
    color: var(--text-tertiary, #9CA3AF);
}

.lcb-content[b-q8vhqeytgo]  p {
    font-size: 15px;
    line-height: 1.72;
    color: var(--text-primary, #374151);
    margin: 0 0 11px;
}

.lcb-content[b-q8vhqeytgo]  ul {
    margin: 8px 0 14px;
    padding: 0;
    list-style: none;
}

.lcb-content[b-q8vhqeytgo]  ul li {
    position: relative;
    padding-left: 18px;
    font-size: 15px;
    line-height: 1.68;
    color: var(--text-primary, #374151);
    margin-bottom: 6px;
}

.lcb-content[b-q8vhqeytgo]  ul li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.72em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #4f46e5;
}

.lcb-content[b-q8vhqeytgo]  ol {
    margin: 10px 0 16px;
    padding: 0;
    list-style: none;
    counter-reset: lcb-step;
}

.lcb-content[b-q8vhqeytgo]  ol li {
    counter-increment: lcb-step;
    position: relative;
    padding: 10px 12px 10px 50px;
    border: 1px solid var(--border-subtle, #E5E7EB);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.78);
    color: var(--text-primary, #374151);
    font-size: 15px;
    line-height: 1.62;
    margin-bottom: 8px;
}

.lcb-content[b-q8vhqeytgo]  ol li:last-child {
    margin-bottom: 0;
}

.lcb-content[b-q8vhqeytgo]  ol li::before {
    content: counter(lcb-step);
    position: absolute;
    left: 12px;
    top: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #4338ca;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.lcb-content[b-q8vhqeytgo]  strong {
    font-weight: 700;
    color: var(--text-primary, #111827);
}

.lcb-content[b-q8vhqeytgo]  em {
    font-style: italic;
    color: var(--text-secondary, #6B7280);
}

.lcb-content[b-q8vhqeytgo]  .callout {
    background: #FFF7ED;
    border: 1px solid #FED7AA;
    border-left: 3px solid #C2410C;
    padding: 12px 14px;
    border-radius: 8px;
    margin: 14px 0 16px;
    font-size: 13.5px;
    line-height: 1.6;
    color: #7C2D12;
}

.lcb-content[b-q8vhqeytgo]  .callout strong:first-child {
    color: #7C2D12;
}

@media (max-width: 640px) {
    .lcb[b-q8vhqeytgo] {
        padding: 18px 16px;
        border-radius: 14px;
    }

    .lcb-content[b-q8vhqeytgo]  h2 {
        font-size: 22px;
    }

    .lcb-content[b-q8vhqeytgo]  ol li {
        padding: 9px 10px 9px 44px;
    }

    .lcb-content[b-q8vhqeytgo]  ol li::before {
        left: 10px;
        top: 9px;
        width: 24px;
        height: 24px;
    }
}
/* _content/AptisWeb/Components/Lesson/LessonHero.razor.rz.scp.css */
.lh[b-afqg3qtp53] {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 92% 10%, rgba(255, 255, 255, 0.18), transparent 28%),
        linear-gradient(135deg, var(--lh-start, #312E81) 0%, var(--lh-end, #4F46E5) 100%);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 20px;
    padding: 26px 30px 24px;
    margin-bottom: 18px;
    box-shadow: 0 24px 48px -36px rgba(30, 27, 75, 0.75);
}

.lh[b-afqg3qtp53]::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0 1.5px, transparent 2px);
    background-position: right 22px top 20px;
    background-size: 28px 28px;
    mask-image: linear-gradient(90deg, transparent 58%, #000);
    opacity: 0.55;
}

/* Per-lesson hero color themes. Each lesson id maps to one of these
   accents so heroes are visually distinct instead of all green. */
.lh-theme-0[b-afqg3qtp53] { --lh-start: #04342C; --lh-end: #0F6E56; }  /* emerald   */
.lh-theme-1[b-afqg3qtp53] { --lh-start: #312E81; --lh-end: #4F46E5; }  /* indigo    */
.lh-theme-2[b-afqg3qtp53] { --lh-start: #880E4F; --lh-end: #C2185B; }  /* rose      */
.lh-theme-3[b-afqg3qtp53] { --lh-start: #7A3E00; --lh-end: #C77800; }  /* amber     */
.lh-theme-4[b-afqg3qtp53] { --lh-start: #004D40; --lh-end: #00897B; }  /* teal      */
.lh-theme-5[b-afqg3qtp53] { --lh-start: #311B92; --lh-end: #6A3FB5; }  /* violet    */
.lh-theme-6[b-afqg3qtp53] { --lh-start: #7F2A12; --lh-end: #C5683C; }  /* terracotta*/
.lh-theme-7[b-afqg3qtp53] { --lh-start: #0D3B66; --lh-end: #1565A8; }  /* steel blue*/

.lh-actions[b-afqg3qtp53] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.lh-back[b-afqg3qtp53] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.35);
    color: #fff;
    min-height: 44px;
    border-radius: 12px;
    padding: 9px 14px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.lh-back:hover[b-afqg3qtp53] {
    background: rgba(255,255,255,0.12);
}

.lh-complete[b-afqg3qtp53] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    min-height: 44px;
    border-radius: 12px;
    padding: 9px 14px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.lh-complete:hover[b-afqg3qtp53] {
    background: rgba(255,255,255,0.25);
}

.lh-done[b-afqg3qtp53] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(134,239,172,0.2);
    border: 1px solid rgba(134,239,172,0.4);
    color: #86EFAC;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
}

.lh-t[b-afqg3qtp53] {
    color: #fff;
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 700;
    margin: 0 0 7px;
    line-height: 1.18;
    letter-spacing: -0.025em;
}

.lh-t:focus[b-afqg3qtp53],
.lh-t:focus-visible[b-afqg3qtp53] {
    outline: none;
}

.lh-s[b-afqg3qtp53] {
    font-size: 15px;
    color: rgba(255,255,255,0.78);
    margin: 0;
}

.lh-crumbs[b-afqg3qtp53] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.78);
}

.lh-crumb[b-afqg3qtp53] {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    transition: color 0.15s;
}

a.lh-crumb:hover[b-afqg3qtp53] {
    color: #fff;
    text-decoration: underline;
}

.lh-crumb.is-current[b-afqg3qtp53] {
    color: #fff;
    font-weight: 500;
}

.lh-crumb-sep[b-afqg3qtp53] {
    color: rgba(255, 255, 255, 0.4);
}

.lh-prog[b-afqg3qtp53] {
    margin-top: 16px;
    height: 4px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    overflow: hidden;
}

.lh-prog-fill[b-afqg3qtp53] {
    height: 100%;
    background: linear-gradient(90deg, #86EFAC 0%, #4ADE80 100%);
    border-radius: 999px;
    transition: width 0.25s ease;
}

.lh :is(button, a):focus-visible[b-afqg3qtp53] {
    outline: 3px solid rgba(255, 255, 255, 0.92);
    outline-offset: 3px;
}

@media (max-width: 640px) {
    .lh[b-afqg3qtp53] {
        border-radius: 16px;
        padding: 20px 18px;
    }

    .lh-actions[b-afqg3qtp53] {
        align-items: stretch;
        display: grid;
        grid-template-columns: 1fr;
        margin-bottom: 16px;
    }

    .lh-back[b-afqg3qtp53],
    .lh-complete[b-afqg3qtp53] {
        width: 100%;
        justify-content: center;
    }

    .lh-t[b-afqg3qtp53] {
        font-size: 26px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lh *[b-afqg3qtp53],
    .lh *[b-afqg3qtp53]::before,
    .lh *[b-afqg3qtp53]::after {
        transition-duration: 0.01ms !important;
    }
}
/* _content/AptisWeb/Components/Lesson/LessonOverviewSummary.razor.rz.scp.css */
.los[b-jltsyx1tte] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 20px;
}

.los-item[b-jltsyx1tte] {
    display: grid;
    grid-template-columns: 34px 1fr;
    grid-template-areas:
        "icon main"
        "icon sub";
    column-gap: 10px;
    align-items: center;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
    border-radius: 12px;
    background: var(--bg-surface, #fff);
    box-shadow: 0 10px 24px -24px rgba(30, 27, 75, 0.55);
}

.los-icon[b-jltsyx1tte] {
    grid-area: icon;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-input, 8px);
    color: var(--text-primary, #1A1A18);
}

.los-icon i[b-jltsyx1tte] {
    font-size: 18px;
}

.los-main[b-jltsyx1tte] {
    grid-area: main;
    min-width: 0;
    color: var(--text-primary, #1A1A18);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}

.los-sub[b-jltsyx1tte] {
    grid-area: sub;
    min-width: 0;
    color: var(--text-secondary, #5F5E5A);
    font-size: 12.5px;
    line-height: 1.35;
}

.los-item--blue .los-icon[b-jltsyx1tte] {
    background: var(--c-blue-bg, #E6F1FB);
    color: var(--c-blue-fg, #185FA5);
}

.los-item--amber .los-icon[b-jltsyx1tte] {
    background: var(--c-amber-bg, #FAEEDA);
    color: var(--c-amber-fg, #BA7517);
}

.los-item--green .los-icon[b-jltsyx1tte] {
    background: var(--c-green-bg, #EAF3DE);
    color: var(--c-green-fg, #639922);
}

.los-item--violet .los-icon[b-jltsyx1tte] {
    background: var(--c-purple-bg, #EEEDFE);
    color: var(--c-purple-fg, #534AB7);
}

@media (max-width: 980px) {
    .los[b-jltsyx1tte] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .los[b-jltsyx1tte] {
        grid-template-columns: 1fr;
    }
}
/* _content/AptisWeb/Components/Lesson/LessonSidebar.razor.rz.scp.css */
.lsb[b-zltwfdp6xa] {
    --lsb-w: 240px;
    --lsb-w-collapsed: 56px;
    width: var(--lsb-w);
    position: sticky;
    top: 16px;
    align-self: start;
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 8px;
    background: var(--surface, #fff);
    border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
    border-radius: var(--r-lg, 12px);
    overflow: hidden;
    transition: width var(--t-fast, 150ms) var(--ease, ease);
}

.lsb.is-collapsed[b-zltwfdp6xa] {
    width: var(--lsb-w-collapsed);
}

.lsb-toggle[b-zltwfdp6xa] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: 0;
    border-radius: var(--r-md, 8px);
    color: var(--text, #1A1A18);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background var(--t-fast, 150ms);
}

.lsb-toggle:hover[b-zltwfdp6xa] {
    background: var(--muted, #F1EFE8);
}

.lsb-toggle i.lucide[b-zltwfdp6xa] {
    font-size: 20px;
    flex-shrink: 0;
}

.lsb-toggle-l[b-zltwfdp6xa] {
    flex: 1;
    font-size: 0.95rem;
}

.lsb-prog[b-zltwfdp6xa] {
    padding: 6px 10px 10px;
    border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.08));
    margin-bottom: 4px;
}

.lsb-prog-bar[b-zltwfdp6xa] {
    height: 4px;
    background: var(--muted, #F1EFE8);
    border-radius: 999px;
    overflow: hidden;
}

.lsb-prog-fill[b-zltwfdp6xa] {
    height: 100%;
    background: var(--brand, #085041);
    transition: width var(--t-base, 250ms) var(--ease, ease);
}

.lsb-prog-l[b-zltwfdp6xa] {
    margin-top: 6px;
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-2, #5F5E5A);
}

.lsb.is-collapsed .lsb-prog-l[b-zltwfdp6xa] {
    display: none;
}

.lsb-list[b-zltwfdp6xa] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
}

.lsb-item[b-zltwfdp6xa] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: 0;
    border-radius: var(--r-md, 8px);
    color: var(--text, #1A1A18);
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    text-align: left;
    position: relative;
    transition: background var(--t-fast, 150ms), color var(--t-fast, 150ms);
}

.lsb-item:hover[b-zltwfdp6xa] {
    background: var(--muted, #F1EFE8);
}

.lsb-item.active[b-zltwfdp6xa] {
    background: var(--brand-soft, #E1F5EE);
    color: var(--brand, #085041);
    font-weight: 500;
}

.lsb-item.done[b-zltwfdp6xa] {
    color: var(--success-fg, #3B6D11);
}

.lsb-item-icon[b-zltwfdp6xa] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.lsb-item-icon i.lucide[b-zltwfdp6xa] {
    font-size: 18px;
}

.lsb-item-l[b-zltwfdp6xa] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lsb-item-done[b-zltwfdp6xa] {
    font-size: 16px;
    color: var(--success-fg, #3B6D11);
}

.lsb.is-collapsed .lsb-item-l[b-zltwfdp6xa],
.lsb.is-collapsed .lsb-item-done[b-zltwfdp6xa] {
    display: none;
}

.lsb.is-collapsed .lsb-item[b-zltwfdp6xa] {
    justify-content: center;
    padding: 8px 0;
}

.lsb.is-collapsed [data-tooltip]:hover[b-zltwfdp6xa]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    padding: 6px 10px;
    background: var(--text, #1A1A18);
    color: #fff;
    border-radius: var(--r-sm, 6px);
    font-size: 0.8rem;
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
    box-shadow: var(--shadow-hover, 0 4px 12px rgba(0, 0, 0, 0.06));
}

.lsb.is-collapsed [data-tooltip]:hover[b-zltwfdp6xa]::before {
    content: "";
    position: absolute;
    left: calc(100% + 6px);
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-right-color: var(--text, #1A1A18);
    z-index: 100;
    pointer-events: none;
}

@media (max-width: 768px) {
    .lsb[b-zltwfdp6xa] {
        display: none;
    }
}
/* _content/AptisWeb/Components/Lesson/LessonSkeletonState.razor.rz.scp.css */
.lss[b-few4c1ag9i] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px 48px;
}

.lss-hero[b-few4c1ag9i] {
    padding: 32px 0 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lss-body[b-few4c1ag9i] {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 24px;
    margin-top: 20px;
}

.lss-toc-col[b-few4c1ag9i] {}
.lss-main-col[b-few4c1ag9i] {}

.lss-bar[b-few4c1ag9i],
.lss-block[b-few4c1ag9i] {
    border-radius: var(--radius-input, 8px);
    background: linear-gradient(90deg, var(--bg-muted, #F1EFE8) 25%, var(--border-subtle, rgba(0,0,0,0.08)) 50%, var(--bg-muted, #F1EFE8) 75%);
    background-size: 200% 100%;
    animation: lss-shimmer-b-few4c1ag9i 1.4s ease-in-out infinite;
}

.lss-bar--wide[b-few4c1ag9i]  { height: 28px; width: 60%; }
.lss-bar--narrow[b-few4c1ag9i] { height: 18px; width: 40%; }

@keyframes lss-shimmer-b-few4c1ag9i {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .lss-bar[b-few4c1ag9i],
    .lss-block[b-few4c1ag9i] {
        animation: none;
        background: var(--bg-muted, #F1EFE8);
    }
}

@media (max-width: 900px) {
    .lss-body[b-few4c1ag9i] {
        grid-template-columns: 1fr;
    }
    .lss-toc-col[b-few4c1ag9i] { display: none; }
}
/* _content/AptisWeb/Components/Lesson/LessonStatCards.razor.rz.scp.css */
.los[b-v95i5zpioh] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 16px;
}

.los-item[b-v95i5zpioh] {
    display: grid;
    grid-template-columns: 34px 1fr;
    grid-template-areas:
        "icon main"
        "icon sub";
    column-gap: 10px;
    align-items: center;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
    border-radius: var(--radius-input, 8px);
    background: var(--bg-surface, #fff);
}

.los-icon[b-v95i5zpioh] {
    grid-area: icon;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-input, 8px);
    color: var(--text-primary, #1A1A18);
}

.los-icon i[b-v95i5zpioh] {
    font-size: 18px;
}

.los-main[b-v95i5zpioh] {
    grid-area: main;
    min-width: 0;
    color: var(--text-primary, #1A1A18);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.2;
}

.los-sub[b-v95i5zpioh] {
    grid-area: sub;
    min-width: 0;
    color: var(--text-secondary, #5F5E5A);
    font-size: 12px;
    line-height: 1.35;
}

.los-item--blue .los-icon[b-v95i5zpioh] {
    background: var(--c-blue-bg, #E6F1FB);
    color: var(--c-blue-fg, #185FA5);
}

.los-item--amber .los-icon[b-v95i5zpioh] {
    background: var(--c-amber-bg, #FAEEDA);
    color: var(--c-amber-fg, #BA7517);
}

.los-item--green .los-icon[b-v95i5zpioh] {
    background: var(--c-green-bg, #EAF3DE);
    color: var(--c-green-fg, #639922);
}

.los-item--violet .los-icon[b-v95i5zpioh] {
    background: var(--c-purple-bg, #EEEDFE);
    color: var(--c-purple-fg, #534AB7);
}

.los-item--rose .los-icon[b-v95i5zpioh] {
    background: var(--c-red-bg, #FBE9E7);
    color: var(--c-red-fg, #C0392B);
}

@media (max-width: 980px) {
    .los[b-v95i5zpioh] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .los[b-v95i5zpioh] {
        grid-template-columns: 1fr;
    }
}
/* _content/AptisWeb/Components/Lesson/LessonTabs.razor.rz.scp.css */
.ltabs[b-7upc349jzq] {
    position: sticky;
    top: 74px;
    z-index: 20;
    display: flex;
    gap: 6px;
    padding: 7px;
    margin: 0 0 22px;
    background: color-mix(in srgb, var(--surface, #fff) 94%, transparent);
    border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
    border-radius: 14px;
    box-shadow: 0 12px 26px -24px rgba(30, 27, 75, 0.5);
    backdrop-filter: blur(14px);
    overflow-x: auto;
    scrollbar-width: none;
}

.ltabs[b-7upc349jzq]::-webkit-scrollbar {
    display: none;
}

.ltabs-btn[b-7upc349jzq] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 15px;
    background: transparent;
    border: 0;
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--text-2, #5F5E5A);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--t-fast, 150ms), border-color var(--t-fast, 150ms), background var(--t-fast, 150ms);
}

.ltabs-btn:hover[b-7upc349jzq] {
    color: var(--text, #1A1A18);
    background: var(--muted, #F1EFE8);
}

.ltabs-btn.is-active[b-7upc349jzq] {
    color: #3730a3;
    border-color: #c7d2fe;
    background: #eef2ff;
}

.ltabs-btn:focus-visible[b-7upc349jzq] {
    outline: none;
    box-shadow: var(--ring, 0 0 0 3px rgba(15, 110, 86, 0.18));
    border-radius: var(--r-sm, 6px);
}

.ltabs-btn i.lucide[b-7upc349jzq] {
    font-size: 18px;
}

.ltabs-btn-done[b-7upc349jzq] {
    color: var(--success-fg, #3B6D11);
    font-size: 16px;
}

:global([data-theme="dark"]) .ltabs-btn.is-active[b-7upc349jzq],
:global(body[data-theme="dark"]) .ltabs-btn.is-active[b-7upc349jzq] {
    color: #c7d2fe;
    border-color: rgba(129, 140, 248, 0.45);
    background: rgba(79, 70, 229, 0.18);
}

@media (max-width: 768px) {
    .ltabs[b-7upc349jzq] {
        top: 66px;
        margin: 0 -12px 16px;
        padding: 6px 12px;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }

    .ltabs-btn[b-7upc349jzq] {
        min-height: 44px;
        padding: 10px 12px;
        font-size: 0.85rem;
    }

    .ltabs-btn .ltabs-btn-l[b-7upc349jzq] {
        display: inline;
    }
}
/* _content/AptisWeb/Components/Lesson/LessonTOC.razor.rz.scp.css */
.ltoc[b-gzbz42tkuk] {
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    padding: 14px;
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border-subtle, #e5e7eb);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.ltoc-toggle[b-gzbz42tkuk] {
    display: none;
}

.ltoc-heading[b-gzbz42tkuk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.ltoc-h[b-gzbz42tkuk] {
    margin: 0;
    color: var(--text-primary, #111827);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.ltoc-heading > span[b-gzbz42tkuk] {
    flex: 0 0 auto;
    padding: 2px 7px;
    color: var(--text-tertiary, #6b7280);
    background: var(--bg-muted, #f3f4f6);
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
}

.ltoc-sub[b-gzbz42tkuk] {
    margin: 13px 0 6px;
    color: var(--text-tertiary, #6b7280);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.ltoc-prog[b-gzbz42tkuk] {
    padding: 10px;
    background: color-mix(in srgb, var(--brand-primary, #0f6e56) 7%, var(--bg-surface, #fff));
    border: 1px solid color-mix(in srgb, var(--brand-primary, #0f6e56) 18%, transparent);
    border-radius: 10px;
}

.ltoc-prog-h[b-gzbz42tkuk] {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 7px;
    color: var(--text-secondary, #6b7280);
    font-size: 0.73rem;
}

.ltoc-prog-h strong[b-gzbz42tkuk] {
    color: var(--text-primary, #111827);
    font-weight: 700;
}

.ltoc-prog-bar[b-gzbz42tkuk] {
    height: 5px;
    overflow: hidden;
    background: var(--bg-muted, #e5e7eb);
    border-radius: 999px;
}

.ltoc-prog-fill[b-gzbz42tkuk] {
    height: 100%;
    background: var(--brand-primary, #0f6e56);
    border-radius: inherit;
    transition: width 0.3s ease;
}

.ltoc-list[b-gzbz42tkuk] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ltoc-item[b-gzbz42tkuk] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 38px;
    padding: 8px 9px;
    color: var(--text-secondary, #5f5e5a);
    border-radius: 8px;
    font-size: 0.78rem;
    line-height: 1.3;
    text-decoration: none;
    transition: background 0.14s ease, color 0.14s ease;
}

.ltoc-item:hover[b-gzbz42tkuk] {
    color: var(--text-primary, #111827);
    background: var(--bg-muted, #f3f4f6);
}

.ltoc-item.active[b-gzbz42tkuk] {
    color: var(--brand-primary-dark, #04342c);
    background: color-mix(in srgb, var(--brand-primary, #0f6e56) 12%, var(--bg-surface, #fff));
    font-weight: 600;
}

.ltoc-item.active[b-gzbz42tkuk]::before {
    position: absolute;
    inset: 8px auto 8px 0;
    width: 3px;
    content: "";
    background: var(--brand-primary, #0f6e56);
    border-radius: 0 3px 3px 0;
}

.ltoc-item.done[b-gzbz42tkuk] {
    opacity: 0.78;
}

.ltoc-item-dot[b-gzbz42tkuk] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    color: transparent;
    background: var(--bg-muted, #e5e7eb);
    border: 2px solid var(--border-default, #d1d5db);
    border-radius: 50%;
}

.ltoc-item.done .ltoc-item-dot[b-gzbz42tkuk],
.ltoc-item.active .ltoc-item-dot[b-gzbz42tkuk] {
    color: #fff;
    background: var(--brand-primary, #0f6e56);
    border-color: var(--brand-primary, #0f6e56);
}

.ltoc-item-l[b-gzbz42tkuk] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 960px) {
    .ltoc[b-gzbz42tkuk] {
        position: static;
        top: auto;
        max-height: none;
        overflow: visible;
        padding: 0;
        border-radius: 12px;
        box-shadow: none;
    }

    .ltoc-toggle[b-gzbz42tkuk] {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 52px;
        padding: 10px 12px;
        color: var(--text-primary, #111827);
        background: transparent;
        border: 0;
        border-radius: 11px;
        font: inherit;
        text-align: left;
        cursor: pointer;
    }

    .ltoc-toggle:focus-visible[b-gzbz42tkuk] {
        outline: 2px solid var(--brand-primary, #0f6e56);
        outline-offset: 3px;
    }

    .ltoc-toggle-icon[b-gzbz42tkuk] {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        color: var(--brand-primary, #0f6e56);
        background: color-mix(in srgb, var(--brand-primary, #0f6e56) 11%, transparent);
        border-radius: 9px;
    }

    .ltoc-toggle-copy[b-gzbz42tkuk] {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-width: 0;
    }

    .ltoc-toggle-copy strong[b-gzbz42tkuk] {
        font-size: 0.86rem;
        font-weight: 700;
    }

    .ltoc-toggle-copy small[b-gzbz42tkuk] {
        color: var(--text-tertiary, #6b7280);
        font-size: 0.72rem;
    }

    .ltoc-toggle-progress[b-gzbz42tkuk] {
        flex: 0 0 auto;
        padding: 3px 8px;
        color: var(--brand-primary-dark, #04342c);
        background: color-mix(in srgb, var(--brand-primary, #0f6e56) 12%, transparent);
        border-radius: 999px;
        font-size: 0.72rem;
        font-weight: 700;
    }

    .ltoc-toggle-chevron[b-gzbz42tkuk] {
        flex: 0 0 auto;
        color: var(--text-tertiary, #6b7280);
        transition: transform 0.2s ease;
    }

    .ltoc.is-open .ltoc-toggle-chevron[b-gzbz42tkuk] {
        transform: rotate(180deg);
    }

    .ltoc-body[b-gzbz42tkuk] {
        display: none;
        padding: 0 12px 12px;
        border-top: 1px solid var(--border-subtle, #e5e7eb);
    }

    .ltoc.is-open .ltoc-body[b-gzbz42tkuk] {
        display: block;
    }

    .ltoc-heading[b-gzbz42tkuk] {
        display: none;
    }

    .ltoc-prog[b-gzbz42tkuk] {
        margin-top: 12px;
    }

    .ltoc-item[b-gzbz42tkuk] {
        min-height: 44px;
        padding: 10px;
        font-size: 0.82rem;
    }
}

@media (min-width: 641px) and (max-width: 960px) {
    .ltoc-list[b-gzbz42tkuk] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .ltoc-prog-fill[b-gzbz42tkuk],
    .ltoc-toggle-chevron[b-gzbz42tkuk],
    .ltoc-item[b-gzbz42tkuk] {
        transition: none;
    }
}
/* _content/AptisWeb/Components/Lesson/PicturePracticeErrorState.razor.rz.scp.css */
.ppe[b-6hq4dihdcj] {
    margin-top: 32px;
}

.ppe-card[b-6hq4dihdcj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px 24px;
    border: 1.5px dashed #d1d5db;
    border-radius: 12px;
    background: #fafafa;
    text-align: center;
}

.ppe-icon[b-6hq4dihdcj] {
    font-size: 2rem;
    color: #9ca3af;
}

.ppe-msg[b-6hq4dihdcj] {
    margin: 0;
    color: #6b7280;
    font-size: 0.9rem;
    max-width: 360px;
}

.ppe-btn[b-6hq4dihdcj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    border: none;
    border-radius: 8px;
    background: #3b82f6;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.15s;
}

.ppe-btn:hover:not(:disabled)[b-6hq4dihdcj] { opacity: 0.85; }
.ppe-btn:disabled[b-6hq4dihdcj] { opacity: 0.6; cursor: not-allowed; }

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

.ppe-spin[b-6hq4dihdcj] {
    animation: ppe-spin-b-6hq4dihdcj 0.8s linear infinite;
}
/* _content/AptisWeb/Components/Lesson/PicturePracticeSection.razor.rz.scp.css */
.pp[b-26iac7dzg0] {
    margin-bottom: 24px;
}

/* Header */
.pp-h[b-26iac7dzg0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.pp-h-l[b-26iac7dzg0] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pp-h-t[b-26iac7dzg0] {
    font-size: 16px;
    font-weight: 600;
    color: var(--text, #111827);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pp-h-t i[b-26iac7dzg0] {
    font-size: 16px;
    color: #0F6E56;
}

.pp-h-c[b-26iac7dzg0] {
    font-size: 12px;
    color: var(--text-3, #9CA3AF);
}

/* Exam mode toggle */
.pp-exam-mode[b-26iac7dzg0] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-2, #5F5E5A);
    cursor: pointer;
    user-select: none;
}

.pp-exam-mode input[b-26iac7dzg0] {
    appearance: none;
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.pp-exam-mode-track[b-26iac7dzg0] {
    position: relative;
    width: 36px;
    height: 20px;
    background: var(--muted, #E5E7EB);
    border-radius: 999px;
    transition: background 0.15s;
}

.pp-exam-mode-track[b-26iac7dzg0]::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s;
}

.pp-exam-mode input:checked + .pp-exam-mode-track[b-26iac7dzg0] {
    background: var(--brand, #085041);
}

.pp-exam-mode input:checked + .pp-exam-mode-track[b-26iac7dzg0]::after {
    transform: translateX(16px);
}

.pp-exam-mode input:focus-visible + .pp-exam-mode-track[b-26iac7dzg0] {
    box-shadow: var(--ring, 0 0 0 3px rgba(15, 110, 86, 0.18));
}

/* Set tabs */
.pp-tabs[b-26iac7dzg0] {
    display: flex;
    gap: 6px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border, #E5E7EB);
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.pp-tab[b-26iac7dzg0] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 20px;
    background: transparent;
    font-size: 13px;
    color: var(--text-2, #6B7280);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.pp-tab:hover[b-26iac7dzg0] {
    background: var(--muted, #F3F4F6);
}

.pp-tab.active[b-26iac7dzg0] {
    background: var(--brand, #04342C);
    color: #fff;
    border-color: var(--brand, #04342C);
}

.pp-tab.done[b-26iac7dzg0] {
    background: #EAF3DE;
    color: #3A6A2B;
    border-color: #C3DFB0;
}

.pp-tab-c[b-26iac7dzg0] {
    font-size: 11px;
    opacity: 0.65;
}

/* Grid: image-left, focus-right */
.pp-grid-wrap[b-26iac7dzg0] {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 20px;
    align-items: start;
}

/* Stage (image + audio + transcript) */
.pp-stage[b-26iac7dzg0] {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #E5E7EB);
    border-radius: var(--r-lg, 12px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.pp-stage-img[b-26iac7dzg0] {
    width: 100%;
    max-height: 480px;
    object-fit: contain;
    background: var(--muted, #F3F4F6);
    display: block;
}

.pp-stage-placeholder[b-26iac7dzg0] {
    width: 100%;
    aspect-ratio: 16/10;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-3, #9CA3AF);
    background: var(--muted, #F3F4F6);
}

.pp-stage-audio[b-26iac7dzg0] {
    padding: 12px 14px;
    border-top: 1px solid var(--border, #E5E7EB);
    background: var(--surface, #fff);
}

/* Transcript */
.pp-transcript[b-26iac7dzg0] {
    border-top: 1px solid var(--border, #E5E7EB);
}

.pp-transcript-toggle[b-26iac7dzg0] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: 0;
    font: inherit;
    font-size: 13px;
    color: var(--text-2, #5F5E5A);
    cursor: pointer;
    text-align: left;
    transition: background 0.12s;
}

.pp-transcript-toggle:hover[b-26iac7dzg0] {
    background: var(--muted, #F3F4F6);
}

.pp-transcript-toggle i.lucide[b-26iac7dzg0] {
    font-size: 16px;
}

.pp-transcript-toggle span[b-26iac7dzg0] {
    flex: 1;
    font-weight: 500;
}

.pp-transcript-chev[b-26iac7dzg0] {
    font-size: 16px;
    transition: transform 0.15s;
}

.pp-transcript-body[b-26iac7dzg0] {
    padding: 0 14px 14px;
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text, #111827);
}

/* Focus panel */
.pp-focus[b-26iac7dzg0] {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #E5E7EB);
    border-radius: var(--r-lg, 12px);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 64px;
}

.pp-focus-h[b-26iac7dzg0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pp-focus-counter[b-26iac7dzg0] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pp-focus-tag[b-26iac7dzg0] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-3, #9CA3AF);
    text-transform: uppercase;
}

.pp-focus-num[b-26iac7dzg0] {
    font-size: 18px;
    font-weight: 600;
    color: var(--text, #111827);
    line-height: 1.1;
}

.pp-focus-num small[b-26iac7dzg0] {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-2, #6B7280);
}

.pp-focus-actions[b-26iac7dzg0] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pp-focus-bookmark[b-26iac7dzg0] {
    background: transparent;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: var(--r-md, 8px);
    color: var(--text-2, #6B7280);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.pp-focus-bookmark:hover[b-26iac7dzg0] {
    background: var(--muted, #F3F4F6);
}

.pp-focus-bookmark.is-on[b-26iac7dzg0] {
    color: #D97706;
    border-color: #FBBF24;
    background: #FEF3C7;
}

.pp-focus-status[b-26iac7dzg0] {
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 20px;
    background: var(--muted, #F3F4F6);
    color: var(--text-2, #6B7280);
    white-space: nowrap;
}

.pp-focus-status.is-correct[b-26iac7dzg0] {
    background: #DCFCE7;
    color: #166534;
}

.pp-focus-status.is-wrong[b-26iac7dzg0] {
    background: #FEE2E2;
    color: #991B1B;
}

/* Nav dots */
.pp-dots[b-26iac7dzg0] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 4px 0;
}

.pp-dot[b-26iac7dzg0] {
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--border, #D1D5DB);
    color: var(--text-2, #6B7280);
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.12s;
}

.pp-dot:hover[b-26iac7dzg0] {
    border-color: var(--brand, #0F6E56);
    transform: scale(1.05);
}

.pp-dot.is-current[b-26iac7dzg0] {
    background: var(--brand, #04342C);
    color: #fff;
    border-color: var(--brand, #04342C);
}

.pp-dot.done[b-26iac7dzg0] {
    background: #DCFCE7;
    border-color: #86EFAC;
    color: #166534;
}

.pp-dot.submitted[b-26iac7dzg0] {
    background: #F3F4F6;
    border-color: #CBD5E1;
    color: #475569;
}

.pp-dot.wrong[b-26iac7dzg0] {
    background: #FEE2E2;
    border-color: #FCA5A5;
    color: #991B1B;
}

.pp-dot-fill[b-26iac7dzg0] {
    display: none;
}

.pp-dot-num[b-26iac7dzg0] {
    line-height: 1;
}

/* Options */
.pp-options[b-26iac7dzg0] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pp-opt[b-26iac7dzg0] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1.5px solid var(--border, #E5E7EB);
    border-radius: var(--r-md, 8px);
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s, border-color 0.12s;
    width: 100%;
}

.pp-opt:hover:not(.correct):not(.wrong)[b-26iac7dzg0] {
    background: var(--muted, #F3F4F6);
    border-color: #9CA3AF;
}

.pp-opt-input[b-26iac7dzg0] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.pp-opt:has(.pp-opt-input:focus-visible)[b-26iac7dzg0] {
    box-shadow: var(--ring, 0 0 0 3px rgba(15, 110, 86, 0.18));
}

.pp-opt.selected[b-26iac7dzg0] {
    border-color: var(--brand, #0F6E56);
    background: var(--brand-soft, #E1F5EE);
}

.pp-opt.correct[b-26iac7dzg0] {
    border-color: #22C55E;
    background: #DCFCE7;
    color: #166534;
}

.pp-opt.wrong[b-26iac7dzg0] {
    border-color: #EF4444;
    background: #FEE2E2;
    color: #991B1B;
}

.pp-opt.text-hidden[b-26iac7dzg0] {
    min-height: 42px;
}

.pp-opt-letter[b-26iac7dzg0] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--muted, #E5E7EB);
    color: var(--text-2, #6B7280);
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pp-opt.selected .pp-opt-letter[b-26iac7dzg0] {
    background: var(--brand, #0F6E56);
    color: #fff;
}

.pp-opt.correct .pp-opt-letter[b-26iac7dzg0] {
    background: #22C55E;
    color: #fff;
}

.pp-opt.wrong .pp-opt-letter[b-26iac7dzg0] {
    background: #EF4444;
    color: #fff;
}

.pp-opt-text[b-26iac7dzg0] {
    flex: 1;
    font-size: 13.5px;
    line-height: 1.45;
}

.pp-opt-text.is-hidden[b-26iac7dzg0] {
    visibility: hidden;
}

.pp-opt-sr[b-26iac7dzg0] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.pp-opt i[b-26iac7dzg0] {
    font-size: 14px;
    flex-shrink: 0;
}

/* Locked / exam pending */
.pp-options-locked[b-26iac7dzg0] {
    padding: 18px 14px;
    background: var(--muted, #F3F4F6);
    border: 1px dashed var(--border-strong, #D1D5DB);
    border-radius: var(--r-md, 8px);
    text-align: center;
    color: var(--text-2, #5F5E5A);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.pp-options-locked i[b-26iac7dzg0] {
    font-size: 22px;
    color: var(--text-3, #9CA3AF);
}

.pp-options-locked p[b-26iac7dzg0] {
    margin: 0;
    font-size: 13px;
    max-width: 240px;
    line-height: 1.5;
}

/* CTAs */
.pp-ctas[b-26iac7dzg0] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.pp-btn[b-26iac7dzg0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--r-md, 8px);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: opacity 0.15s, background 0.15s;
    border: 1px solid transparent;
}

.pp-btn:disabled[b-26iac7dzg0] {
    opacity: 0.45;
    cursor: default;
}

.pp-btn-primary[b-26iac7dzg0] {
    background: var(--brand-dark, #04342C);
    color: #fff;
    border-color: var(--brand-dark, #04342C);
}

.pp-btn-primary:hover:not(:disabled)[b-26iac7dzg0] {
    background: var(--brand, #065F46);
}

.pp-btn-secondary[b-26iac7dzg0] {
    background: var(--muted, #F3F4F6);
    color: var(--text, #111827);
    border-color: var(--border, #E5E7EB);
}

.pp-btn-secondary:hover:not(:disabled)[b-26iac7dzg0] {
    background: var(--muted, #E5E7EB);
}

.pp-btn-icon[b-26iac7dzg0] {
    background: transparent;
    border-color: var(--border, #E5E7EB);
    color: var(--text-2, #6B7280);
    padding: 8px 10px;
}

.pp-btn-icon:hover:not(:disabled)[b-26iac7dzg0] {
    background: var(--muted, #F3F4F6);
}

/* Explanation */
.pp-explanation[b-26iac7dzg0] {
    background: var(--muted, #F3F4F6);
    border-left: 3px solid var(--brand, #0F6E56);
    border-radius: 0 var(--r-md, 8px) var(--r-md, 8px) 0;
    padding: 10px 14px;
}

.pp-explanation-h[b-26iac7dzg0] {
    font-size: 12px;
    font-weight: 700;
    color: var(--brand-dark, #04342C);
    margin: 0 0 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pp-explanation-t[b-26iac7dzg0] {
    font-size: 13px;
    color: var(--text, #374151);
    margin: 0;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .pp-grid-wrap[b-26iac7dzg0] {
        grid-template-columns: 1fr;
    }

    .pp-focus[b-26iac7dzg0] {
        position: static;
    }
}

@media (max-width: 480px) {
    .pp-h[b-26iac7dzg0] {
        flex-direction: column;
        align-items: flex-start;
    }

    .pp-stage-img[b-26iac7dzg0] {
        max-height: 280px;
    }

    .pp-tab[b-26iac7dzg0] {
        padding: 6px 10px;
        font-size: 12px;
    }
}
/* _content/AptisWeb/Components/Lesson/ToeicLessonPage.razor.rz.scp.css */
.tlp[b-a9gcvijwuk] {
    max-width: 1220px;
    margin: 0 auto;
    padding: 20px 20px 64px;
}

.tlp-body[b-a9gcvijwuk] {
    margin-top: 18px;
}

.tlp-main-col[b-a9gcvijwuk] {
    min-width: 0;
}

.tlp-panels[b-a9gcvijwuk] {
    margin-top: 16px;
}

.tlp-panel[b-a9gcvijwuk] {
    animation: tlp-fade-b-a9gcvijwuk 180ms ease-out;
}

.tlp-empty[b-a9gcvijwuk] {
    padding: 32px 20px;
    color: var(--text-2, #5F5E5A);
    text-align: center;
    background: var(--muted, #F1EFE8);
    border-radius: var(--r-md, 8px);
}

@keyframes tlp-fade-b-a9gcvijwuk {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
    .tlp[b-a9gcvijwuk] {
        padding: 10px 12px 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tlp-panel[b-a9gcvijwuk] {
        animation: none;
    }
}
/* _content/AptisWeb/Components/Lesson/VocabFlashcard.razor.rz.scp.css */
.vfc[b-v1igsuv2ta] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    background: var(--muted, #FAFAF7);
    border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
    border-radius: var(--r-lg, 12px);
}

.vfc-h[b-v1igsuv2ta] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    color: var(--text-2, #5F5E5A);
}

.vfc-count[b-v1igsuv2ta] {
    font-weight: 600;
    color: var(--text, #1A1A18);
}

.vfc-progress[b-v1igsuv2ta] {
    flex: 1;
    height: 4px;
    background: var(--border, #E5E7EB);
    border-radius: 999px;
    overflow: hidden;
}

.vfc-progress-fill[b-v1igsuv2ta] {
    height: 100%;
    background: var(--brand, #085041);
    border-radius: 999px;
    transition: width 0.2s ease;
}

.vfc-known[b-v1igsuv2ta] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--success-fg, #3B6D11);
    font-weight: 500;
}

.vfc-stage[b-v1igsuv2ta] {
    perspective: 1000px;
    padding: 12px 0;
}

.vfc-card[b-v1igsuv2ta] {
    position: relative;
    width: 100%;
    min-height: 220px;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    border-radius: var(--r-lg, 12px);
    outline: none;
}

.vfc-card:focus-visible[b-v1igsuv2ta] {
    box-shadow: var(--ring, 0 0 0 3px rgba(15, 110, 86, 0.18));
}

.vfc-card.is-flipped[b-v1igsuv2ta] {
    transform: rotateY(180deg);
}

.vfc-card-face[b-v1igsuv2ta] {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    background: var(--surface, #fff);
    border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
    border-radius: var(--r-lg, 12px);
    padding: 22px 24px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-shadow: var(--shadow-hover, 0 4px 12px rgba(0, 0, 0, 0.06));
}

.vfc-card-back[b-v1igsuv2ta] {
    transform: rotateY(180deg);
    background: linear-gradient(180deg, var(--brand-soft, #E1F5EE) 0%, var(--surface, #fff) 100%);
}

.vfc-card-side[b-v1igsuv2ta] {
    position: absolute;
    top: 10px;
    left: 14px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--text-3, #9CA3AF);
}

.vfc-card-text[b-v1igsuv2ta] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 500;
    text-align: center;
    color: var(--text, #1A1A18);
    line-height: 1.35;
}

.vfc-card-subtext[b-v1igsuv2ta] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-2, #5F5E5A);
    text-align: center;
}

.vfc-card-audio[b-v1igsuv2ta] {
    position: absolute;
    top: 10px;
    right: 14px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--muted, #F1EFE8);
    border: 0;
    color: var(--brand, #085041);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.vfc-card-audio:hover[b-v1igsuv2ta] {
    background: var(--brand-soft, #E1F5EE);
}

.vfc-card-hint[b-v1igsuv2ta] {
    position: absolute;
    bottom: 10px;
    font-size: 11px;
    color: var(--text-3, #9CA3AF);
}

.vfc-actions[b-v1igsuv2ta] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.vfc-btn[b-v1igsuv2ta] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 10px;
    font: inherit;
    font-size: 13px;
    border-radius: var(--r-md, 8px);
    border: 1px solid var(--border, #E5E7EB);
    background: var(--surface, #fff);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

.vfc-btn:hover[b-v1igsuv2ta] {
    background: var(--muted, #F3F4F6);
}

.vfc-btn-no[b-v1igsuv2ta] {
    color: #B91C1C;
    border-color: #FCA5A5;
}

.vfc-btn-no:hover[b-v1igsuv2ta] { background: #FEE2E2; }

.vfc-btn-meh[b-v1igsuv2ta] {
    color: #B45309;
    border-color: #FCD34D;
}

.vfc-btn-meh:hover[b-v1igsuv2ta] { background: #FEF3C7; }

.vfc-btn-yes[b-v1igsuv2ta] {
    color: var(--success-fg, #3B6D11);
    border-color: #86EFAC;
}

.vfc-btn-yes:hover[b-v1igsuv2ta] { background: #DCFCE7; }

.vfc-nav[b-v1igsuv2ta] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vfc-nav-btn[b-v1igsuv2ta] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--border, #E5E7EB);
    background: var(--surface, #fff);
    color: var(--text-2, #6B7280);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vfc-nav-btn:disabled[b-v1igsuv2ta] {
    opacity: 0.4;
    cursor: default;
}

.vfc-nav-btn:not(:disabled):hover[b-v1igsuv2ta] {
    background: var(--muted, #F3F4F6);
}

.vfc-dots[b-v1igsuv2ta] {
    flex: 1;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
}

.vfc-dot[b-v1igsuv2ta] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border, #D1D5DB);
    transition: transform 0.12s;
}

.vfc-dot.is-learning[b-v1igsuv2ta] {
    background: #FBBF24;
}

.vfc-dot.is-known[b-v1igsuv2ta] {
    background: var(--success-fg, #22C55E);
}

.vfc-dot.is-current[b-v1igsuv2ta] {
    transform: scale(1.4);
    outline: 2px solid var(--brand, #085041);
    outline-offset: 2px;
}
/* _content/AptisWeb/Components/Lesson/VocabMiniQuiz.razor.rz.scp.css */
.vmq[b-o9083g441n] {
    padding: 14px;
    background: linear-gradient(180deg, var(--brand-soft, #E1F5EE) 0%, var(--surface, #fff) 100%);
    border: 1px solid var(--brand-soft, #C4E8DA);
    border-radius: var(--r-lg, 12px);
    margin: 12px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vmq-h[b-o9083g441n] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--brand-dark, #04342C);
}

.vmq-h i.lucide[b-o9083g441n] {
    font-size: 18px;
    color: var(--warning-fg, #B45309);
}

.vmq-h-t[b-o9083g441n] {
    flex: 1;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.vmq-h-c[b-o9083g441n] {
    font-size: 12px;
    color: var(--text-2, #5F5E5A);
}

.vmq-stem[b-o9083g441n] {
    padding: 10px 12px;
    background: var(--surface, #fff);
    border-radius: var(--r-md, 8px);
    border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vmq-stem-lead[b-o9083g441n] {
    font-size: 11px;
    color: var(--text-3, #9CA3AF);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.vmq-stem-text[b-o9083g441n] {
    font-size: 1.05rem;
    color: var(--text, #1A1A18);
}

.vmq-options[b-o9083g441n] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vmq-opt[b-o9083g441n] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--surface, #fff);
    border: 1.5px solid var(--border, #E5E7EB);
    border-radius: var(--r-md, 8px);
    cursor: pointer;
    position: relative;
    transition: background 0.12s, border-color 0.12s;
}

.vmq-opt-input[b-o9083g441n] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.vmq-opt:hover:not(.correct):not(.wrong)[b-o9083g441n] {
    background: var(--muted, #F3F4F6);
}

.vmq-opt.selected[b-o9083g441n] {
    border-color: var(--brand, #0F6E56);
    background: var(--brand-soft, #E1F5EE);
}

.vmq-opt.correct[b-o9083g441n] {
    border-color: #22C55E;
    background: #DCFCE7;
    color: #166534;
}

.vmq-opt.wrong[b-o9083g441n] {
    border-color: #EF4444;
    background: #FEE2E2;
    color: #991B1B;
}

.vmq-opt-letter[b-o9083g441n] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--muted, #E5E7EB);
    color: var(--text-2, #6B7280);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vmq-opt.selected .vmq-opt-letter[b-o9083g441n] {
    background: var(--brand, #0F6E56);
    color: #fff;
}

.vmq-opt.correct .vmq-opt-letter[b-o9083g441n] {
    background: #22C55E;
    color: #fff;
}

.vmq-opt.wrong .vmq-opt-letter[b-o9083g441n] {
    background: #EF4444;
    color: #fff;
}

.vmq-opt-text[b-o9083g441n] {
    flex: 1;
    font-size: 13.5px;
}

.vmq-ctas[b-o9083g441n] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.vmq-btn[b-o9083g441n] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font: inherit;
    font-size: 13px;
    border-radius: var(--r-md, 8px);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s;
}

.vmq-btn:disabled[b-o9083g441n] { opacity: 0.45; cursor: default; }

.vmq-btn-primary[b-o9083g441n] {
    background: var(--brand-dark, #04342C);
    color: #fff;
    border-color: var(--brand-dark, #04342C);
}

.vmq-btn-primary:hover:not(:disabled)[b-o9083g441n] { background: var(--brand, #065F46); }

.vmq-btn-secondary[b-o9083g441n] {
    background: var(--surface, #fff);
    color: var(--text, #111827);
    border-color: var(--border, #E5E7EB);
}

.vmq-btn-secondary:hover:not(:disabled)[b-o9083g441n] { background: var(--muted, #F3F4F6); }

.vmq-btn-icon[b-o9083g441n] {
    background: transparent;
    border-color: var(--border, #E5E7EB);
    color: var(--text-2, #6B7280);
}

.vmq-btn-icon:hover[b-o9083g441n] { background: var(--muted, #F3F4F6); }

.vmq-result[b-o9083g441n] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 500;
}

.vmq-result.is-correct[b-o9083g441n] { color: #166534; }
.vmq-result.is-wrong[b-o9083g441n] { color: #991B1B; }

.vmq-summary[b-o9083g441n] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--surface, #fff);
    border-radius: var(--r-md, 8px);
    border: 1px dashed var(--brand-soft, #86CDB3);
    color: var(--text, #1A1A18);
    font-size: 13.5px;
}

.vmq-summary i.lucide[b-o9083g441n] {
    font-size: 18px;
    color: var(--warning-fg, #B45309);
}

.vmq-summary > span[b-o9083g441n] { flex: 1; }
/* _content/AptisWeb/Components/Pages/Admin/AdminDashboard.razor.rz.scp.css */
/* AdminDashboard scoped styles — modals, forms, student overview details.
   Layout chrome lives in AdminLayout.razor.css. */

/* ─── Buttons ─── */
.btn-primary[b-h24shwtyl7] {
    padding: 0.65rem 1.1rem;
    background: var(--brand-primary, #085041);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.btn-primary:hover[b-h24shwtyl7] {
    background: var(--brand-primary-dark, #04342C);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(8, 80, 65, 0.25);
}

.btn-primary:disabled[b-h24shwtyl7] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-secondary[b-h24shwtyl7] {
    padding: 0.65rem 1.1rem;
    background: var(--bg-muted, #F1EFE8);
    color: var(--text-primary, #1A1A18);
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.btn-secondary:hover[b-h24shwtyl7] {
    background: #E8E5DD;
    border-color: var(--border-default, rgba(0, 0, 0, 0.15));
}

/* ─── Modal ─── */
.modal-overlay[b-h24shwtyl7] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 1rem;
    animation: ad-fadeIn-b-h24shwtyl7 0.2s ease;
    isolation: isolate;
}

.modal-content[b-h24shwtyl7] {
    position: relative;
    z-index: 1;
    background: var(--bg-surface, #FFFFFF);
    border-radius: 16px;
    width: 100%;
    max-width: 600px;
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
    animation: ad-slideUp-b-h24shwtyl7 0.25s ease;
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
}

.modal-content--wide[b-h24shwtyl7] {
    max-width: 1080px;
}

.modal-header[b-h24shwtyl7] {
    padding: 1.1rem 1.4rem;
    border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    background: var(--bg-base, #FAFAF7);
    border-radius: 16px 16px 0 0;
}

.modal-header h2[b-h24shwtyl7] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--text-primary, #1A1A18);
}

.btn-close[b-h24shwtyl7] {
    background: transparent;
    border: none;
    font-size: 1.05rem;
    cursor: pointer;
    color: var(--text-secondary, #5F5E5A);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.18s ease, color 0.18s ease;
}

.btn-close:hover[b-h24shwtyl7] {
    background: var(--bg-muted, #F1EFE8);
    color: var(--text-primary, #1A1A18);
}

.modal-body[b-h24shwtyl7] {
    padding: 1.4rem;
}

.modal-footer[b-h24shwtyl7] {
    padding: 1.1rem 1.4rem;
    border-top: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    background: var(--bg-base, #FAFAF7);
    border-radius: 0 0 16px 16px;
}

/* ─── Forms ─── */
.form-group[b-h24shwtyl7] {
    margin-bottom: 1.1rem;
}

.form-group label[b-h24shwtyl7] {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--text-primary, #1A1A18);
    font-weight: 500;
    font-size: 0.9rem;
}

.required[b-h24shwtyl7] {
    color: var(--danger-token, #A32D2D);
}

.form-control[b-h24shwtyl7] {
    width: 100%;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--border-default, rgba(0, 0, 0, 0.15));
    border-radius: 8px;
    font-size: 0.94rem;
    font-family: inherit;
    color: var(--text-primary, #1A1A18);
    background: var(--bg-surface, #FFFFFF);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.form-control:focus[b-h24shwtyl7] {
    outline: none;
    border-color: var(--brand-primary, #085041);
    box-shadow: var(--shadow-focus, 0 0 0 3px rgba(15, 110, 86, 0.18));
}

.form-control:disabled[b-h24shwtyl7] {
    background: var(--bg-muted, #F1EFE8);
    color: var(--text-secondary, #5F5E5A);
    cursor: not-allowed;
}

.form-row[b-h24shwtyl7] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}

.checkbox-label[b-h24shwtyl7] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    color: var(--text-primary, #1A1A18);
    font-weight: 500;
    font-size: 0.92rem;
}

.checkbox-label input[type="checkbox"][b-h24shwtyl7] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--brand-primary, #085041);
}

/* ─── Alerts ─── */
.alert[b-h24shwtyl7] {
    padding: 0.75rem 1rem;
    border-radius: 10px;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.alert-danger[b-h24shwtyl7] {
    background: var(--danger-bg-token, #FCEBEB);
    color: var(--danger-token, #A32D2D);
    border: 1px solid rgba(163, 45, 45, 0.18);
}

/* ─── Loading + spinner ─── */
.loading-spinner[b-h24shwtyl7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: var(--text-secondary, #5F5E5A);
}

.loading-spinner i[b-h24shwtyl7] {
    font-size: 2.4rem;
    margin-bottom: 0.75rem;
    color: var(--brand-primary, #085041);
}

.spin[b-h24shwtyl7] {
    animation: ad-spin-b-h24shwtyl7 1s linear infinite;
}

/* ─── Student overview modal ─── */
.student-overview-shell[b-h24shwtyl7] {
    display: grid;
    gap: 1rem;
}

.student-overview-section[b-h24shwtyl7] {
    display: grid;
    gap: 1rem;
    padding: 1.1rem;
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: 14px;
    background: var(--bg-surface, #FFFFFF);
}

.student-overview-section__header[b-h24shwtyl7] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
}

.student-overview-section__header h3[b-h24shwtyl7] {
    margin: 0;
    color: var(--text-primary, #1A1A18);
    font-size: 1.05rem;
    font-weight: 500;
}

.student-overview-section__header p[b-h24shwtyl7] {
    margin: 0.25rem 0 0;
    color: var(--text-secondary, #5F5E5A);
    font-size: 0.88rem;
}

.student-summary-grid[b-h24shwtyl7] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
}

.student-summary-card[b-h24shwtyl7] {
    padding: 0.95rem 1rem;
    border-radius: 12px;
    background: var(--bg-base, #FAFAF7);
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    display: grid;
    gap: 0.3rem;
}

.student-summary-card strong[b-h24shwtyl7] {
    color: var(--text-primary, #1A1A18);
    font-size: 1rem;
    font-weight: 500;
}

.student-summary-card span[b-h24shwtyl7] {
    color: var(--text-secondary, #5F5E5A);
    font-size: 0.86rem;
    word-break: break-word;
}

.student-summary-card__label[b-h24shwtyl7] {
    color: var(--c-teal-fg, #0F6E56) !important;
    font-size: 0.74rem !important;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.student-activity-badge[b-h24shwtyl7] {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    font-weight: 500;
    font-size: 0.82rem;
    white-space: nowrap;
}

.student-activity-badge--active[b-h24shwtyl7] {
    background: var(--c-green-bg, #EAF3DE);
    color: var(--c-green-fg, #639922);
}

.student-activity-badge--idle[b-h24shwtyl7] {
    background: var(--c-blue-bg, #E6F1FB);
    color: var(--c-blue-fg, #185FA5);
}

.student-details-grid[b-h24shwtyl7] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 0.85rem;
}

.student-detail-value[b-h24shwtyl7] {
    min-height: 40px;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--border-default, rgba(0, 0, 0, 0.15));
    border-radius: 8px;
    background: var(--bg-base, #FAFAF7);
    color: var(--text-primary, #1A1A18);
    display: flex;
    align-items: center;
    word-break: break-word;
    font-size: 0.92rem;
}

.student-session-list[b-h24shwtyl7],
.student-activity-timeline[b-h24shwtyl7] {
    display: grid;
    gap: 0.75rem;
}

.student-session-card[b-h24shwtyl7] {
    padding: 1rem;
    border-radius: 12px;
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    background: var(--bg-surface, #FFFFFF);
    display: grid;
    gap: 0.7rem;
    transition: border-color 0.2s ease, box-shadow 0.25s ease;
}

.student-session-card:hover[b-h24shwtyl7] {
    border-color: var(--brand-primary, #085041);
    box-shadow: 0 8px 22px rgba(15, 110, 86, 0.1);
}

.student-session-card__head[b-h24shwtyl7] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
}

.student-session-card__head h4[b-h24shwtyl7] {
    margin: 0;
    color: var(--text-primary, #1A1A18);
    font-size: 1rem;
    font-weight: 500;
}

.student-session-card__head p[b-h24shwtyl7] {
    margin: 0.25rem 0 0;
    color: var(--text-secondary, #5F5E5A);
    font-size: 0.86rem;
}

.student-session-status[b-h24shwtyl7] {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 500;
}

.student-session-status--active[b-h24shwtyl7] {
    background: var(--c-blue-bg, #E6F1FB);
    color: var(--c-blue-fg, #185FA5);
}

.student-session-status--done[b-h24shwtyl7] {
    background: var(--bg-muted, #F1EFE8);
    color: var(--text-secondary, #5F5E5A);
}

.student-session-metrics[b-h24shwtyl7] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    color: var(--text-secondary, #5F5E5A);
    font-size: 0.86rem;
}

.student-activity-item[b-h24shwtyl7] {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 0.85rem;
    align-items: flex-start;
}

.student-activity-item__dot[b-h24shwtyl7] {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--brand-primary, #085041) 0%, var(--brand-accent, #9FE1CB) 100%);
    margin-top: 0.4rem;
}

.student-activity-item__content[b-h24shwtyl7] {
    padding: 0.9rem 1rem;
    border-radius: 12px;
    background: var(--bg-surface, #FFFFFF);
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    display: grid;
    gap: 0.5rem;
}

.student-activity-item__head[b-h24shwtyl7] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
}

.student-activity-item__head h4[b-h24shwtyl7] {
    margin: 0;
    color: var(--text-primary, #1A1A18);
    font-size: 0.95rem;
    font-weight: 500;
}

.student-activity-item__head span[b-h24shwtyl7] {
    color: var(--text-secondary, #5F5E5A);
    font-size: 0.8rem;
    white-space: nowrap;
}

.student-activity-item__content p[b-h24shwtyl7] {
    margin: 0;
    color: var(--text-secondary, #5F5E5A);
    font-size: 0.9rem;
    line-height: 1.5;
}

.student-activity-item__meta[b-h24shwtyl7] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    color: var(--text-tertiary, #888780);
    font-size: 0.8rem;
}

.student-overview-empty[b-h24shwtyl7] {
    padding: 1rem;
    border-radius: 12px;
    background: var(--bg-base, #FAFAF7);
    border: 1px dashed var(--border-default, rgba(0, 0, 0, 0.15));
    color: var(--text-secondary, #5F5E5A);
    font-size: 0.92rem;
    text-align: center;
}

/* ─── Animations ─── */
@keyframes ad-fadeIn-b-h24shwtyl7 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes ad-slideUp-b-h24shwtyl7 {
    from {
        transform: translateY(24px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes ad-spin-b-h24shwtyl7 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
    .form-row[b-h24shwtyl7],
    .student-details-grid[b-h24shwtyl7] {
        grid-template-columns: 1fr;
    }

    .student-summary-grid[b-h24shwtyl7] {
        grid-template-columns: 1fr 1fr;
    }

    .student-overview-section__header[b-h24shwtyl7],
    .student-session-card__head[b-h24shwtyl7],
    .student-activity-item__head[b-h24shwtyl7] {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .student-summary-grid[b-h24shwtyl7] {
        grid-template-columns: 1fr;
    }
}
/* _content/AptisWeb/Components/Pages/Admin/QuestionManagement.razor.rz.scp.css */
[b-hop4wjo4gf] .p-3 {
    background: var(--bg-surface, #FFFFFF);
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
    padding: 1.4rem 1.5rem !important;
}

[b-hop4wjo4gf] h3 {
    font-size: 1.32rem;
    font-weight: 800;
    letter-spacing: -0.005em;
    color: var(--text-primary, #1A1A18);
    margin-bottom: 1rem;
}

[b-hop4wjo4gf] h5 {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-primary, #1A1A18);
    letter-spacing: -0.005em;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    margin-bottom: 1rem;
}

[b-hop4wjo4gf] .btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    background: var(--bg-base, #FAFAF7);
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: 14px;
    padding: 8px;
}

[b-hop4wjo4gf] .btn-group .btn-outline-primary {
    border-radius: 999px !important;
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08)) !important;
    background: var(--bg-surface, #FFFFFF) !important;
    color: var(--text-secondary, #5F5E5A) !important;
    font-weight: 700;
    font-size: 0.86rem;
    padding: 0.45rem 1rem;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

[b-hop4wjo4gf] .btn-group .btn-outline-primary:hover {
    background: var(--brand-primary-soft, #E1F5EE) !important;
    color: var(--brand-primary, #085041) !important;
    border-color: rgba(15, 110, 86, 0.25) !important;
    transform: translateY(-1px);
}

[b-hop4wjo4gf] .btn-group .btn-outline-primary.active,
[b-hop4wjo4gf] .btn-group .btn-outline-primary:focus {
    background: var(--brand-primary, #085041) !important;
    color: #ffffff !important;
    border-color: var(--brand-primary, #085041) !important;
    box-shadow: 0 8px 18px rgba(8, 80, 65, 0.18);
}

[b-hop4wjo4gf] .form-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-secondary, #5F5E5A);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}

[b-hop4wjo4gf] .form-control,
[b-hop4wjo4gf] .form-select {
    border-radius: 8px;
    border: 1px solid var(--border-default, rgba(0, 0, 0, 0.15)) !important;
    background: var(--bg-surface, #FFFFFF) !important;
    color: var(--text-primary, #1A1A18) !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

[b-hop4wjo4gf] .form-control:focus,
[b-hop4wjo4gf] .form-select:focus {
    border-color: var(--brand-primary, #085041) !important;
    box-shadow: 0 0 0 3px rgba(15, 110, 86, 0.18) !important;
}

[b-hop4wjo4gf] .btn-primary {
    background: var(--brand-primary, #085041) !important;
    border-color: var(--brand-primary, #085041) !important;
    border-radius: 10px;
    font-weight: 700;
    padding: 0.55rem 1.1rem;
    box-shadow: 0 8px 18px rgba(8, 80, 65, 0.18);
}

[b-hop4wjo4gf] .btn-primary:hover {
    background: var(--brand-primary-dark, #04342C) !important;
    border-color: var(--brand-primary-dark, #04342C) !important;
}

[b-hop4wjo4gf] .btn-success {
    background: var(--c-green-fg, #639922) !important;
    border-color: var(--c-green-fg, #639922) !important;
    border-radius: 10px;
    font-weight: 700;
}

[b-hop4wjo4gf] .btn-danger {
    background: var(--danger-token, #A32D2D) !important;
    border-color: var(--danger-token, #A32D2D) !important;
    border-radius: 10px;
    font-weight: 700;
}

[b-hop4wjo4gf] .btn-secondary {
    background: var(--bg-muted, #F1EFE8) !important;
    border-color: var(--border-subtle, rgba(0, 0, 0, 0.08)) !important;
    color: var(--text-primary, #1A1A18) !important;
    border-radius: 10px;
    font-weight: 700;
}

[b-hop4wjo4gf] .alert {
    border-radius: 10px;
    border-width: 1px;
}
/* _content/AptisWeb/Components/Pages/Admin/Tabs/AptisMaterialsTab.razor.rz.scp.css */
.materials-admin[b-bwo0x9k22z] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.materials-admin__header[b-bwo0x9k22z],
.materials-admin__panel[b-bwo0x9k22z] {
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

.materials-admin__header[b-bwo0x9k22z] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 20px;
}

.materials-admin__header h2[b-bwo0x9k22z],
.materials-admin__panel-head h3[b-bwo0x9k22z] {
    margin: 0 0 6px;
    color: var(--text-primary, #1a1a18);
    font-weight: 800;
}

.materials-admin__header h2[b-bwo0x9k22z] {
    font-size: 1.32rem;
}

.materials-admin__header p[b-bwo0x9k22z],
.materials-admin__panel-head p[b-bwo0x9k22z] {
    margin: 0;
    color: var(--text-secondary, #5f5e5a);
    font-size: 0.9rem;
    line-height: 1.5;
}

.materials-admin__open[b-bwo0x9k22z],
.materials-admin__primary[b-bwo0x9k22z],
.materials-admin__ghost[b-bwo0x9k22z] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.materials-admin__open[b-bwo0x9k22z],
.materials-admin__ghost[b-bwo0x9k22z] {
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    background: var(--bg-base, #fafaf7);
    color: var(--text-primary, #1a1a18);
}

.materials-admin__primary[b-bwo0x9k22z] {
    border: 1px solid var(--brand-primary, #085041);
    background: var(--brand-primary, #085041);
    color: #fff;
}

.materials-admin__primary:disabled[b-bwo0x9k22z],
.materials-admin__ghost:disabled[b-bwo0x9k22z] {
    opacity: 0.6;
    cursor: not-allowed;
}

.materials-admin__grid[b-bwo0x9k22z] {
    display: grid;
    grid-template-columns: minmax(360px, 0.82fr) minmax(0, 1.18fr);
    gap: 16px;
    align-items: start;
}

.materials-admin__panel[b-bwo0x9k22z] {
    padding: 18px;
}

.materials-admin__panel-head[b-bwo0x9k22z] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.materials-admin__form[b-bwo0x9k22z] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.materials-admin__form label[b-bwo0x9k22z],
.materials-admin__upload[b-bwo0x9k22z] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.materials-admin__form label > span[b-bwo0x9k22z],
.materials-admin__upload > span[b-bwo0x9k22z] {
    color: var(--text-secondary, #5f5e5a);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.materials-admin__form .span-2[b-bwo0x9k22z],
.materials-admin__upload.span-2[b-bwo0x9k22z] {
    grid-column: span 2;
}

.materials-admin__input[b-bwo0x9k22z] {
    width: 100%;
    min-height: 38px;
    padding: 0.52rem 0.72rem;
    border: 1px solid var(--border-default, rgba(0, 0, 0, 0.15));
    border-radius: 9px;
    background: var(--bg-base, #fafaf7);
    color: var(--text-primary, #1a1a18);
    font-size: 0.9rem;
    font-weight: 650;
}

textarea.materials-admin__input[b-bwo0x9k22z] {
    resize: vertical;
}

.materials-admin__input:focus[b-bwo0x9k22z] {
    outline: none;
    border-color: var(--brand-primary, #085041);
    background: var(--input-bg, var(--bg-surface, #fff));
    box-shadow: 0 0 0 3px rgba(15, 110, 86, 0.16);
}

.materials-admin__check[b-bwo0x9k22z] {
    flex-direction: row !important;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: 10px;
    background: var(--bg-base, #fafaf7);
}

.materials-admin__check span[b-bwo0x9k22z] {
    color: var(--text-primary, #1a1a18) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.materials-admin__upload[b-bwo0x9k22z] {
    padding: 12px;
    border: 1px dashed var(--border-default, rgba(0, 0, 0, 0.15));
    border-radius: 10px;
    background: var(--bg-base, #fafaf7);
}

.materials-admin__upload small[b-bwo0x9k22z],
.materials-admin__table small[b-bwo0x9k22z] {
    display: block;
    margin-top: 4px;
    color: var(--text-tertiary, #888780);
    font-size: 0.76rem;
}

.materials-admin__actions[b-bwo0x9k22z] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

.materials-admin__notice[b-bwo0x9k22z] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.7rem 1rem;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 700;
}

.materials-admin__notice--success[b-bwo0x9k22z] {
    background: var(--c-green-bg, #eaf3de);
    color: var(--c-green-fg, #4d7c18);
}

.materials-admin__notice--danger[b-bwo0x9k22z] {
    background: var(--danger-bg-token, #fcebeb);
    color: var(--danger-token, #a32d2d);
}

.materials-admin__filters[b-bwo0x9k22z] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.materials-admin__filters select[b-bwo0x9k22z] {
    width: 190px;
}

.materials-admin__filters input[b-bwo0x9k22z] {
    width: 180px;
}

.materials-admin__state[b-bwo0x9k22z] {
    padding: 28px;
    border: 1px dashed var(--border-default, rgba(0, 0, 0, 0.15));
    border-radius: 12px;
    color: var(--text-secondary, #5f5e5a);
    text-align: center;
    font-weight: 700;
}

.materials-admin__table[b-bwo0x9k22z] {
    overflow-x: auto;
}

.materials-admin__table table[b-bwo0x9k22z] {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

.materials-admin__table th[b-bwo0x9k22z],
.materials-admin__table td[b-bwo0x9k22z] {
    padding: 12px;
    border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    vertical-align: top;
}

.materials-admin__table th[b-bwo0x9k22z] {
    color: var(--text-secondary, #5f5e5a);
    background: var(--bg-base, #fafaf7);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
}

.materials-admin__table tr:last-child td[b-bwo0x9k22z] {
    border-bottom: 0;
}

.cell-id[b-bwo0x9k22z] {
    color: var(--text-tertiary, #888780);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78rem;
}

.materials-admin__title[b-bwo0x9k22z] {
    color: var(--text-primary, #1a1a18);
    font-weight: 800;
}

.materials-admin__desc[b-bwo0x9k22z],
.materials-admin__url[b-bwo0x9k22z] {
    margin-top: 4px;
    color: var(--text-secondary, #5f5e5a);
    font-size: 0.8rem;
    line-height: 1.4;
}

.materials-admin__url[b-bwo0x9k22z] {
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-tertiary, #888780);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.materials-admin__chip[b-bwo0x9k22z],
.materials-admin__file[b-bwo0x9k22z] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--brand-primary-soft, #e1f5ee);
    color: var(--brand-primary, #085041);
    font-size: 0.74rem;
    font-weight: 800;
}

.materials-admin__file[b-bwo0x9k22z] {
    background: var(--bg-muted, #f1efe8);
    color: var(--text-secondary, #5f5e5a);
}

.materials-admin__row-actions[b-bwo0x9k22z] {
    display: inline-flex;
    gap: 6px;
    justify-content: flex-end;
}

.materials-admin__row-actions button[b-bwo0x9k22z],
.materials-admin__row-actions a[b-bwo0x9k22z] {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 8px;
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    background: var(--bg-base, #fafaf7);
    color: var(--text-primary, #1a1a18);
    cursor: pointer;
    text-decoration: none;
}

.materials-admin__row-actions .danger[b-bwo0x9k22z] {
    color: var(--danger-token, #a32d2d);
}

.spin[b-bwo0x9k22z] {
    display: inline-block;
    animation: materials-spin-b-bwo0x9k22z 1s linear infinite;
}

@keyframes materials-spin-b-bwo0x9k22z {
    from { transform: rotate(0); }
    to { transform: rotate(360deg); }
}

@media (max-width: 1180px) {
    .materials-admin__grid[b-bwo0x9k22z] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .materials-admin__header[b-bwo0x9k22z],
    .materials-admin__panel-head[b-bwo0x9k22z],
    .materials-admin__filters[b-bwo0x9k22z],
    .materials-admin__actions[b-bwo0x9k22z] {
        flex-direction: column;
        align-items: stretch;
    }

    .materials-admin__form[b-bwo0x9k22z] {
        grid-template-columns: 1fr;
    }

    .materials-admin__form .span-2[b-bwo0x9k22z],
    .materials-admin__upload.span-2[b-bwo0x9k22z] {
        grid-column: span 1;
    }

    .materials-admin__filters select[b-bwo0x9k22z],
    .materials-admin__filters input[b-bwo0x9k22z],
    .materials-admin__open[b-bwo0x9k22z],
    .materials-admin__primary[b-bwo0x9k22z],
    .materials-admin__ghost[b-bwo0x9k22z] {
        width: 100%;
    }

    /* Card layout for the materials table on small screens */
    .materials-admin__table[b-bwo0x9k22z] {
        overflow-x: visible;
    }

    .materials-admin__table table[b-bwo0x9k22z],
    .materials-admin__table thead[b-bwo0x9k22z],
    .materials-admin__table tbody[b-bwo0x9k22z],
    .materials-admin__table tr[b-bwo0x9k22z],
    .materials-admin__table th[b-bwo0x9k22z],
    .materials-admin__table td[b-bwo0x9k22z] {
        display: block;
        width: auto;
    }

    .materials-admin__table table[b-bwo0x9k22z] {
        min-width: 0;
    }

    .materials-admin__table thead[b-bwo0x9k22z] {
        display: none;
    }

    .materials-admin__table tr[b-bwo0x9k22z] {
        margin: 0 0 12px;
        padding: 14px;
        border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
        border-radius: 14px;
        background: var(--bg-surface, #ffffff);
        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
    }

    .materials-admin__table tr:last-child[b-bwo0x9k22z] {
        margin-bottom: 0;
    }

    .materials-admin__table td[b-bwo0x9k22z] {
        padding: 6px 0;
        border-bottom: 1px dashed var(--border-subtle, rgba(0, 0, 0, 0.08));
    }

    .materials-admin__table td:last-child[b-bwo0x9k22z] {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .materials-admin__table td.cell-id[b-bwo0x9k22z] {
        padding-top: 0;
    }

    .materials-admin__url[b-bwo0x9k22z] {
        max-width: 100%;
        white-space: normal;
        word-break: break-all;
    }

    .materials-admin__row-actions[b-bwo0x9k22z] {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .materials-admin__row-actions button[b-bwo0x9k22z],
    .materials-admin__row-actions a[b-bwo0x9k22z] {
        width: 38px;
        height: 38px;
    }
}
/* _content/AptisWeb/Components/Pages/Admin/Tabs/AuditTab.razor.rz.scp.css */
.audit-section[b-y9te1g8dcw] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    animation: audit-enter-b-y9te1g8dcw 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes audit-enter-b-y9te1g8dcw {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.section-header[b-y9te1g8dcw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.1rem 1.25rem;
    background:
        radial-gradient(220px 150px at 0% 0%, rgba(15, 110, 86, 0.08), transparent 72%),
        var(--bg-surface, #FFFFFF);
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

.section-header h2[b-y9te1g8dcw] {
    margin: 0;
    font-size: 1.32rem;
    font-weight: 800;
    letter-spacing: -0.005em;
    color: var(--text-primary, #1A1A18);
}

.header-actions[b-y9te1g8dcw] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.filter-group[b-y9te1g8dcw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.form-select[b-y9te1g8dcw],
.form-control[b-y9te1g8dcw] {
    border-radius: 10px;
    border: 1px solid var(--border-default, rgba(0, 0, 0, 0.15));
    background: var(--bg-surface, #FFFFFF);
    color: var(--text-primary, #1A1A18);
    padding: 0.5rem 0.8rem;
    font-size: 0.9rem;
    min-height: 38px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.form-select:focus[b-y9te1g8dcw],
.form-control:focus[b-y9te1g8dcw] {
    outline: none;
    border-color: var(--brand-primary, #085041);
    box-shadow: 0 0 0 3px rgba(15, 110, 86, 0.18);
}

.btn-secondary[b-y9te1g8dcw] {
    padding: 0.5rem 0.95rem;
    background: var(--bg-muted, #F1EFE8);
    color: var(--text-primary, #1A1A18);
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: 10px;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-secondary:hover[b-y9te1g8dcw] {
    background: #E8E5DD;
    border-color: var(--border-default, rgba(0, 0, 0, 0.15));
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

.btn-secondary:active[b-y9te1g8dcw] {
    transform: translateY(0) scale(0.97);
}

.btn-secondary:disabled[b-y9te1g8dcw] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-export[b-y9te1g8dcw] {
    background: var(--brand-primary, #085041);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 6px 14px rgba(8, 80, 65, 0.16);
}

.btn-export:hover[b-y9te1g8dcw] {
    background: var(--brand-primary-dark, #04342C);
    border-color: transparent;
    box-shadow: 0 8px 20px rgba(8, 80, 65, 0.24);
}

.loading-spinner[b-y9te1g8dcw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 2.5rem;
    border-radius: 14px;
    background: var(--bg-surface, #FFFFFF);
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    color: var(--text-secondary, #5F5E5A);
}

.loading-spinner i[b-y9te1g8dcw] {
    color: var(--brand-primary, #085041);
    font-size: 1.6rem;
}

.spin[b-y9te1g8dcw] {
    animation: audit-spin-b-y9te1g8dcw 1s linear infinite;
}

@keyframes audit-spin-b-y9te1g8dcw {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.audit-timeline[b-y9te1g8dcw] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.audit-item[b-y9te1g8dcw] {
    background: var(--bg-surface, #FFFFFF);
    border-radius: 14px;
    padding: 1.05rem 1.1rem;
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-left: 4px solid var(--text-tertiary, #888780);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
    display: flex;
    gap: 1rem;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    animation: audit-item-enter-b-y9te1g8dcw 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.audit-item:nth-child(1)[b-y9te1g8dcw] { animation-delay: 0.03s; }
.audit-item:nth-child(2)[b-y9te1g8dcw] { animation-delay: 0.06s; }
.audit-item:nth-child(3)[b-y9te1g8dcw] { animation-delay: 0.09s; }
.audit-item:nth-child(4)[b-y9te1g8dcw] { animation-delay: 0.12s; }
.audit-item:nth-child(5)[b-y9te1g8dcw] { animation-delay: 0.15s; }

@keyframes audit-item-enter-b-y9te1g8dcw {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}

.audit-item:hover[b-y9te1g8dcw] {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(15, 110, 86, 0.08);
    border-color: color-mix(in srgb, var(--border-subtle) 50%, transparent);
}

.audit-content[b-y9te1g8dcw] {
    flex: 1;
    min-width: 0;
}

.audit-icon[b-y9te1g8dcw] {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-muted, #F1EFE8);
    color: var(--text-secondary, #5F5E5A);
    flex-shrink: 0;
    font-size: 1.05rem;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.audit-item:hover .audit-icon[b-y9te1g8dcw] {
    transform: scale(1.08) rotate(-3deg);
}

.audit-create[b-y9te1g8dcw] {
    border-left-color: var(--c-green-fg, #639922);
}

.audit-create .audit-icon[b-y9te1g8dcw] {
    background: var(--c-green-bg, #EAF3DE);
    color: var(--c-green-fg, #639922);
}

.audit-update[b-y9te1g8dcw] {
    border-left-color: var(--c-blue-fg, #185FA5);
}

.audit-update .audit-icon[b-y9te1g8dcw] {
    background: var(--c-blue-bg, #E6F1FB);
    color: var(--c-blue-fg, #185FA5);
}

.audit-delete[b-y9te1g8dcw] {
    border-left-color: var(--danger-token, #A32D2D);
}

.audit-delete .audit-icon[b-y9te1g8dcw] {
    background: var(--danger-bg-token, #FCEBEB);
    color: var(--danger-token, #A32D2D);
}

.audit-header[b-y9te1g8dcw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.audit-header h4[b-y9te1g8dcw] {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 500;
    color: var(--text-primary, #1A1A18);
}

.audit-summary[b-y9te1g8dcw] {
    margin: 0.3rem 0 0;
    color: var(--text-secondary, #5F5E5A);
    font-size: 0.9rem;
    line-height: 1.5;
}

.audit-time[b-y9te1g8dcw] {
    color: var(--text-tertiary, #888780);
    font-size: 0.82rem;
    white-space: nowrap;
}

.audit-details[b-y9te1g8dcw] {
    color: var(--text-secondary, #5F5E5A);
    font-size: 0.88rem;
    margin-top: 0.35rem;
}

.audit-details p[b-y9te1g8dcw] {
    margin: 0.2rem 0;
    word-break: break-word;
}

.audit-changes[b-y9te1g8dcw] {
    margin-top: 0.75rem;
}

.btn-link[b-y9te1g8dcw] {
    background: none;
    border: none;
    color: var(--brand-primary, #085041);
    cursor: pointer;
    font-weight: 500;
    font-size: 0.88rem;
    padding: 0.25rem 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: color 0.18s ease;
}

.btn-link:hover[b-y9te1g8dcw] {
    color: var(--brand-primary-dark, #04342C);
}

.btn-link:disabled[b-y9te1g8dcw] {
    opacity: 0.6;
    cursor: not-allowed;
}

.changes-detail[b-y9te1g8dcw] {
    margin-top: 0.75rem;
    display: grid;
    gap: 0.6rem;
}

.audit-change-list[b-y9te1g8dcw] {
    display: grid;
    gap: 0.6rem;
}

.audit-change-row[b-y9te1g8dcw] {
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: 10px;
    background: var(--bg-base, #FAFAF7);
    display: grid;
    gap: 0.4rem;
}

.audit-change-row__label[b-y9te1g8dcw] {
    font-weight: 500;
    color: var(--text-primary, #1A1A18);
    font-size: 0.88rem;
}

.audit-change-row__values[b-y9te1g8dcw] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    color: var(--text-secondary, #5F5E5A);
    font-size: 0.86rem;
}

.audit-change-pill[b-y9te1g8dcw] {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    line-height: 1.4;
    font-weight: 500;
}

.audit-change-pill--old[b-y9te1g8dcw] {
    background: var(--danger-bg-token, #FCEBEB);
    color: var(--danger-token, #A32D2D);
}

.audit-change-pill--new[b-y9te1g8dcw] {
    background: var(--c-green-bg, #EAF3DE);
    color: var(--c-green-fg, #639922);
}

.btn-link--technical[b-y9te1g8dcw] {
    width: fit-content;
}

.audit-technical[b-y9te1g8dcw] {
    display: grid;
    gap: 0.6rem;
}

.audit-technical-meta[b-y9te1g8dcw] {
    padding: 0.75rem 0.85rem;
    border-radius: 10px;
    background: var(--bg-base, #FAFAF7);
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
}

.audit-technical-meta p[b-y9te1g8dcw] {
    margin: 0.25rem 0;
    color: var(--text-secondary, #5F5E5A);
    font-size: 0.86rem;
}

.value-block[b-y9te1g8dcw] {
    border-radius: 10px;
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    overflow: hidden;
}

.value-block strong[b-y9te1g8dcw] {
    display: block;
    padding: 0.5rem 0.7rem;
    font-size: 0.84rem;
    font-weight: 500;
    background: var(--bg-base, #FAFAF7);
    color: var(--text-primary, #1A1A18);
    border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
}

.value-block pre[b-y9te1g8dcw] {
    margin: 0;
    background: #0f1f1d;
    color: #c5e8d8;
    padding: 0.75rem 0.9rem;
    overflow: auto;
    font-size: 0.8rem;
    line-height: 1.5;
    font-family: "Cascadia Code", "JetBrains Mono", Consolas, monospace;
}

.table-footer[b-y9te1g8dcw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-secondary, #5F5E5A);
    font-size: 0.88rem;
    gap: 0.75rem;
    padding: 0.5rem 0.25rem;
}

.table-footer p[b-y9te1g8dcw] {
    margin: 0;
}

.empty-state[b-y9te1g8dcw] {
    background: var(--bg-surface, #FFFFFF);
    border-radius: 14px;
    padding: 2.5rem 1.5rem;
    text-align: center;
    border: 1px dashed var(--border-default, rgba(0, 0, 0, 0.15));
    color: var(--text-secondary, #5F5E5A);
}

.empty-state i[b-y9te1g8dcw] {
    font-size: 2.5rem;
    color: var(--text-tertiary, #888780);
    margin-bottom: 0.75rem;
    opacity: 0.6;
}

@media (max-width: 768px) {
    .filter-group[b-y9te1g8dcw] {
        width: 100%;
    }

    .form-select[b-y9te1g8dcw],
    .form-control[b-y9te1g8dcw] {
        min-width: 0;
        flex: 1 1 100%;
    }

    .btn-secondary[b-y9te1g8dcw] {
        width: 100%;
        justify-content: center;
    }

    .audit-item[b-y9te1g8dcw] {
        flex-direction: column;
    }

    .audit-header[b-y9te1g8dcw] {
        flex-direction: column;
        align-items: flex-start;
    }

    .table-footer[b-y9te1g8dcw] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* _content/AptisWeb/Components/Pages/Admin/Tabs/CoursesTab.razor.rz.scp.css */
.courses-section[b-o51twxfzli] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    animation: courses-enter-b-o51twxfzli 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes courses-enter-b-o51twxfzli {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.section-header[b-o51twxfzli] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 16px 20px;
    border-radius: var(--radius-card, 12px);
    background: var(--bg-surface, #FFFFFF);
    border: var(--border-hairline, 0.5px) solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    box-shadow: none;
}

.section-header h2[b-o51twxfzli] {
    margin: 0 0 0.35rem 0;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--text-primary, #1A1A18);
}

.section-subtitle[b-o51twxfzli] {
    margin: 0;
    color: var(--text-secondary, #5F5E5A);
    font-weight: 500;
    font-size: 0.88rem;
}

.header-actions[b-o51twxfzli] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.search-box[b-o51twxfzli] {
    position: relative;
    min-width: 280px;
}

.search-box i[b-o51twxfzli] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary, #888780);
}

.search-box input[b-o51twxfzli] {
    width: 100%;
    padding: 0.6rem 0.95rem 0.6rem 2.4rem;
    border-radius: 12px;
    border: 1px solid var(--border-default, rgba(0, 0, 0, 0.15));
    background: var(--bg-surface, #FFFFFF);
    font-size: 0.94rem;
    font-weight: 500;
    color: var(--text-primary, #1A1A18);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.search-box input:focus[b-o51twxfzli] {
    outline: none;
    border-color: var(--brand-primary, #085041);
    box-shadow: 0 0 0 3px rgba(15, 110, 86, 0.18);
}

.sort-box[b-o51twxfzli] {
    position: relative;
    min-width: 210px;
}

.sort-box i[b-o51twxfzli] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary, #888780);
    pointer-events: none;
}

.sort-box select[b-o51twxfzli] {
    width: 100%;
    padding: 0.58rem 2rem 0.58rem 2.3rem;
    border-radius: 12px;
    border: 1px solid var(--border-default, rgba(0, 0, 0, 0.15));
    background: var(--bg-surface, #FFFFFF);
    font-size: 0.94rem;
    font-weight: 500;
    color: var(--text-primary, #1A1A18);
    appearance: none;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.sort-box select:focus[b-o51twxfzli] {
    outline: none;
    border-color: var(--brand-primary, #085041);
    box-shadow: 0 0 0 3px rgba(15, 110, 86, 0.18);
}

.btn-primary[b-o51twxfzli] {
    padding: 0.58rem 1.05rem;
    background: var(--brand-primary, #085041);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-input, 8px);
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: background var(--motion-fast, 150ms) var(--ease-out, ease),
                transform var(--motion-instant, 100ms) var(--ease-out, ease);
    box-shadow: none;
}

.btn-primary:hover[b-o51twxfzli] {
    background: var(--brand-primary-dark, #04342C);
    transform: translateY(-1px);
}

.btn-primary:active[b-o51twxfzli] {
    transform: translateY(0) scale(0.97);
}

/* ─── Module filter chips ─── */
.module-filters[b-o51twxfzli] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.filter-chip[b-o51twxfzli] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.95rem;
    border-radius: 999px;
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    background: var(--bg-surface, #FFFFFF);
    color: var(--text-secondary, #5F5E5A);
    font-weight: 700;
    font-size: 0.86rem;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.filter-chip i[b-o51twxfzli] {
    font-size: 1rem;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.filter-chip:hover[b-o51twxfzli] {
    transform: translateY(-2px);
    border-color: rgba(15, 110, 86, 0.35);
    color: var(--text-primary, #1A1A18);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.filter-chip:hover i[b-o51twxfzli] {
    transform: scale(1.15);
}

.filter-chip:active[b-o51twxfzli] {
    transform: translateY(0) scale(0.97);
}

.filter-chip.active[b-o51twxfzli] {
    background: var(--c-teal-bg, #E1F5EE);
    border-color: rgba(15, 110, 86, 0.4);
    color: var(--c-teal-fg, #0F6E56);
    box-shadow: 0 6px 14px rgba(15, 110, 86, 0.14);
}

.filter-chip.listening.active[b-o51twxfzli] {
    background: var(--c-blue-bg, #E6F1FB);
    border-color: rgba(24, 95, 165, 0.35);
    color: var(--c-blue-fg, #185FA5);
}

.filter-chip.speaking.active[b-o51twxfzli] {
    background: var(--c-pink-bg, #FBEAF0);
    border-color: rgba(153, 53, 86, 0.35);
    color: var(--c-pink-fg, #993556);
}

.filter-chip.writing.active[b-o51twxfzli] {
    background: var(--c-coral-bg, #FAECE7);
    border-color: rgba(153, 60, 29, 0.35);
    color: var(--c-coral-fg, #993C1D);
}

.filter-chip.reading.active[b-o51twxfzli] {
    background: var(--c-amber-bg, #FAEEDA);
    border-color: rgba(186, 117, 23, 0.35);
    color: var(--c-amber-fg, #BA7517);
}

.filter-chip.grammar.active[b-o51twxfzli] {
    background: var(--c-purple-bg, #EEEDFE);
    border-color: rgba(83, 74, 183, 0.35);
    color: var(--c-purple-fg, #534AB7);
}

/* ─── Course cards grid ─── */
.courses-grid[b-o51twxfzli] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 1rem;
}

.course-card[b-o51twxfzli] {
    background: var(--bg-surface, #FFFFFF);
    border-radius: var(--radius-card, 12px);
    padding: 1.1rem 1.15rem;
    border: var(--border-hairline, 0.5px) solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    position: relative;
    overflow: hidden;
    transition: border-color var(--motion-fast, 150ms) var(--ease-out, ease),
                transform var(--motion-fast, 150ms) var(--ease-out, ease),
                box-shadow var(--motion-fast, 150ms) var(--ease-out, ease);
}

.course-card[b-o51twxfzli]::before {
    content: none;
}

.course-card:hover[b-o51twxfzli] {
    transform: translateY(-2px);
    border-color: var(--border-default, rgba(0, 0, 0, 0.15));
    box-shadow: var(--shadow-hover, 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06));
}

.course-card:active[b-o51twxfzli] {
    transform: translateY(0) scale(0.99);
}

.course-card.inactive[b-o51twxfzli] {
    opacity: 0.85;
    border-left-color: var(--text-tertiary, #888780);
}

.course-header[b-o51twxfzli] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    position: relative;
}

.course-header h3[b-o51twxfzli] {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--text-primary, #1A1A18);
}

.status-badge[b-o51twxfzli] {
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.status-badge.active[b-o51twxfzli] {
    background: var(--c-green-bg, #EAF3DE);
    color: var(--c-green-fg, #639922);
}

.status-badge.inactive[b-o51twxfzli] {
    background: var(--bg-muted, #F1EFE8);
    color: var(--text-secondary, #5F5E5A);
}

.course-description[b-o51twxfzli] {
    color: var(--text-secondary, #5F5E5A);
    font-size: 0.88rem;
    margin: 0;
    line-height: 1.5;
    position: relative;
}

.course-info[b-o51twxfzli] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.95rem;
    color: var(--text-secondary, #5F5E5A);
    font-size: 0.86rem;
    font-weight: 500;
    position: relative;
}

.course-info i[b-o51twxfzli] {
    color: var(--brand-primary, #085041);
}

.info-item--modules[b-o51twxfzli] {
    color: var(--text-primary, #1A1A18);
}

.course-modules[b-o51twxfzli] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    position: relative;
}

.module[b-o51twxfzli] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.32rem 0.6rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.76rem;
    font-weight: 500;
}

.module.listening[b-o51twxfzli] {
    background: var(--c-blue-bg, #E6F1FB);
    border-color: rgba(24, 95, 165, 0.25);
    color: var(--c-blue-fg, #185FA5);
}

.module.speaking[b-o51twxfzli] {
    background: var(--c-pink-bg, #FBEAF0);
    border-color: rgba(153, 53, 86, 0.25);
    color: var(--c-pink-fg, #993556);
}

.module.writing[b-o51twxfzli] {
    background: var(--c-coral-bg, #FAECE7);
    border-color: rgba(153, 60, 29, 0.25);
    color: var(--c-coral-fg, #993C1D);
}

.module.reading[b-o51twxfzli] {
    background: var(--c-amber-bg, #FAEEDA);
    border-color: rgba(186, 117, 23, 0.25);
    color: var(--c-amber-fg, #BA7517);
}

.module.grammar[b-o51twxfzli] {
    background: var(--c-purple-bg, #EEEDFE);
    border-color: rgba(83, 74, 183, 0.25);
    color: var(--c-purple-fg, #534AB7);
}

.module--empty[b-o51twxfzli] {
    background: var(--bg-muted, #F1EFE8);
    color: var(--text-tertiary, #888780);
    border-color: var(--border-subtle, rgba(0, 0, 0, 0.08));
}

.course-actions[b-o51twxfzli] {
    display: flex;
    gap: 0.4rem;
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--border-subtle, rgba(0, 0, 0, 0.08));
    position: relative;
}

.btn-icon-action[b-o51twxfzli] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.5rem 0.55rem;
    border-radius: 9px;
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    background: var(--bg-surface, #FFFFFF);
    color: var(--text-secondary, #5F5E5A);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-icon-action i[b-o51twxfzli] {
    font-size: 0.95rem;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-icon-action:hover[b-o51twxfzli] {
    background: var(--c-teal-bg, #E1F5EE);
    color: var(--c-teal-fg, #0F6E56);
    border-color: rgba(15, 110, 86, 0.25);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(15, 110, 86, 0.1);
}

.btn-icon-action:hover i[b-o51twxfzli] {
    transform: scale(1.1);
}

.btn-icon-action:active[b-o51twxfzli] {
    transform: translateY(0) scale(0.96);
}

.btn-icon-action--toggle-on[b-o51twxfzli] {
    color: var(--c-green-fg, #639922);
}

.btn-icon-action--toggle-on:hover[b-o51twxfzli] {
    background: var(--c-green-bg, #EAF3DE);
    color: var(--c-green-fg, #639922);
    border-color: rgba(99, 153, 34, 0.3);
}

.btn-icon-action--toggle-off[b-o51twxfzli] {
    color: var(--text-tertiary, #888780);
}

.btn-icon-action.danger:hover[b-o51twxfzli] {
    background: var(--danger-bg-token, #FCEBEB);
    color: var(--danger-token, #A32D2D);
    border-color: rgba(163, 45, 45, 0.2);
}

.table-footer[b-o51twxfzli] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.65rem 0.25rem;
    color: var(--text-secondary, #5F5E5A);
    font-size: 0.88rem;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
}

.footer-meta[b-o51twxfzli] {
    font-weight: 500;
    color: var(--text-primary, #1A1A18);
}

.empty-state[b-o51twxfzli] {
    background: var(--bg-surface, #FFFFFF);
    border-radius: 14px;
    padding: 2.5rem 1.5rem;
    text-align: center;
    border: 1px dashed var(--border-default, rgba(0, 0, 0, 0.15));
    color: var(--text-secondary, #5F5E5A);
}

.empty-state i[b-o51twxfzli] {
    font-size: 2.5rem;
    color: var(--text-tertiary, #888780);
    margin-bottom: 0.75rem;
    opacity: 0.6;
}

@media (max-width: 768px) {
    .section-header[b-o51twxfzli] {
        padding: 1rem 1.1rem;
        align-items: stretch;
    }

    .section-header h2[b-o51twxfzli] {
        font-size: 1.18rem;
    }

    .header-actions[b-o51twxfzli] {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .search-box[b-o51twxfzli],
    .sort-box[b-o51twxfzli] {
        min-width: 0;
        width: 100%;
    }

    .search-box input[b-o51twxfzli],
    .sort-box select[b-o51twxfzli] {
        width: 100%;
        min-width: 0;
    }

    .btn-primary[b-o51twxfzli] {
        justify-content: center;
        width: 100%;
    }

    .module-filters[b-o51twxfzli] {
        gap: 0.4rem;
    }

    .filter-chip[b-o51twxfzli] {
        padding: 0.42rem 0.8rem;
        font-size: 0.82rem;
    }

    .courses-grid[b-o51twxfzli] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .course-card[b-o51twxfzli] {
        padding: 1rem;
    }

    .course-header h3[b-o51twxfzli] {
        font-size: 1rem;
    }

    .course-actions[b-o51twxfzli] {
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    .btn-icon-action[b-o51twxfzli] {
        flex: 1 1 calc(50% - 0.2rem);
        padding: 0.55rem 0.5rem;
        min-height: 38px;
    }
}
/* _content/AptisWeb/Components/Pages/Admin/Tabs/DashboardTab.razor.rz.scp.css */
.dashboard-overview[b-2qtsruyavs] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: dashboard-fade-in-b-2qtsruyavs 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes dashboard-fade-in-b-2qtsruyavs {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.dashboard-hero[b-2qtsruyavs] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 20px 24px;
    color: #ffffff;
    background: var(--brand-primary, #085041);
    border: none;
    border-radius: var(--radius-card, 12px);
    box-shadow: none;
    position: relative;
    overflow: hidden;
}

.dashboard-hero[b-2qtsruyavs]::after {
    content: none;
}

.dashboard-hero__content[b-2qtsruyavs] {
    min-width: 0;
}

.dashboard-hero__eyebrow[b-2qtsruyavs] {
    display: inline-block;
    margin-bottom: 6px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.dashboard-hero h2[b-2qtsruyavs] {
    margin: 0 0 6px;
    color: #ffffff;
    font-size: clamp(1.2rem, 1rem + 0.6vw, 1.6rem);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.dashboard-hero p[b-2qtsruyavs] {
    max-width: 680px;
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.95rem;
    line-height: 1.55;
}

.dashboard-hero__actions[b-2qtsruyavs] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.dashboard-hero__btn[b-2qtsruyavs] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 14px;
    border: none;
    border-radius: var(--radius-input, 8px);
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--motion-fast, 150ms) var(--ease-out, ease),
                transform var(--motion-instant, 100ms) var(--ease-out, ease);
    position: relative;
    z-index: 1;
}

.dashboard-hero__btn:hover[b-2qtsruyavs] {
    background: rgba(255, 255, 255, 0.2);
}

.dashboard-hero__btn:active[b-2qtsruyavs] {
    transform: scale(0.97);
}

.dashboard-hero__btn--primary[b-2qtsruyavs] {
    background: #FFFFFF;
    color: var(--brand-primary, #085041);
}

.dashboard-hero__btn--primary:hover[b-2qtsruyavs] {
    background: rgba(255, 255, 255, 0.9);
    color: var(--brand-primary, #085041);
}

.stats-grid[b-2qtsruyavs] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.stat-card[b-2qtsruyavs] {
    --accent: #0F6E56;
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 16px 18px;
    background: var(--bg-muted, #F1EFE8);
    border: var(--border-hairline, 0.5px) solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: var(--radius-card, 12px);
    box-shadow: none;
    overflow: hidden;
    transition: border-color var(--motion-fast, 150ms) var(--ease-out, ease),
                transform var(--motion-fast, 150ms) var(--ease-out, ease),
                box-shadow var(--motion-fast, 150ms) var(--ease-out, ease);
}

.stat-card[b-2qtsruyavs]::before {
    content: none;
}

.stat-card[b-2qtsruyavs]::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--accent);
}

.stat-card:hover[b-2qtsruyavs] {
    border-color: var(--border-default, rgba(0, 0, 0, 0.15));
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover, 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06));
}

.stat-card:active[b-2qtsruyavs] {
    transform: translateY(0) scale(0.99);
}

.stat-icon[b-2qtsruyavs] {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 1.15rem;
    flex: 0 0 auto;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.stat-card:hover .stat-icon[b-2qtsruyavs] {
    transform: scale(1.08) rotate(-3deg);
}

.stat-card--students[b-2qtsruyavs] { --accent: #0F6E56; }
.stat-card--students .stat-icon[b-2qtsruyavs] { background: var(--c-teal-bg, #E1F5EE); color: var(--c-teal-fg, #0F6E56); }

.stat-card--courses[b-2qtsruyavs] { --accent: #185FA5; }
.stat-card--courses .stat-icon[b-2qtsruyavs] { background: var(--c-blue-bg, #E6F1FB); color: var(--c-blue-fg, #185FA5); }

.stat-card--active[b-2qtsruyavs] { --accent: #5A8A1E; }
.stat-card--active .stat-icon[b-2qtsruyavs] { background: var(--c-green-bg, #EAF3DE); color: var(--c-green-fg, #639922); }

.stat-card--inactive[b-2qtsruyavs] { --accent: #888780; }
.stat-card--inactive .stat-icon[b-2qtsruyavs] { background: var(--bg-muted, #F1EFE8); color: var(--text-tertiary, #888780); }

.stat-info[b-2qtsruyavs] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.stat-info__label[b-2qtsruyavs] {
    color: var(--text-tertiary, #888780);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.stat-info h3[b-2qtsruyavs] {
    margin: 0;
    color: var(--text-primary, #1A1A18);
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.2;
}

.dashboard-workspace-grid[b-2qtsruyavs] {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
    gap: 16px;
    align-items: start;
}

.admin-panel[b-2qtsruyavs] {
    padding: 18px;
    background: var(--bg-surface, #FFFFFF);
    border: var(--border-hairline, 0.5px) solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: var(--radius-card, 12px);
    box-shadow: none;
    transition: border-color var(--motion-fast, 150ms) var(--ease-out, ease),
                transform var(--motion-fast, 150ms) var(--ease-out, ease),
                box-shadow var(--motion-fast, 150ms) var(--ease-out, ease);
}

.admin-panel:hover[b-2qtsruyavs] {
    border-color: var(--border-default, rgba(0, 0, 0, 0.15));
}

.section-head[b-2qtsruyavs] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.section-head h2[b-2qtsruyavs] {
    margin: 0;
    color: var(--text-primary, #1A1A18);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.section-head p[b-2qtsruyavs] {
    margin: 3px 0 0;
    color: var(--text-secondary, #5F5E5A);
    font-size: 0.86rem;
    line-height: 1.45;
}

.action-buttons[b-2qtsruyavs] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.action-btn[b-2qtsruyavs] {
    --accent-bg: var(--c-teal-bg, #E1F5EE);
    --accent-fg: var(--c-teal-fg, #0F6E56);
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 72px;
    padding: 12px;
    border: var(--border-hairline, 0.5px) solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: var(--radius-card, 12px);
    background: var(--bg-surface, #FFFFFF);
    color: var(--text-primary, #1A1A18);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--motion-fast, 150ms) var(--ease-out, ease),
                transform var(--motion-fast, 150ms) var(--ease-out, ease),
                box-shadow var(--motion-fast, 150ms) var(--ease-out, ease);
    position: relative;
    overflow: hidden;
}

.action-btn[b-2qtsruyavs]::after {
    content: none;
}

.action-btn:hover[b-2qtsruyavs] {
    transform: translateY(-2px);
    border-color: var(--border-default, rgba(0, 0, 0, 0.15));
    box-shadow: var(--shadow-hover, 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06));
}

.action-btn:active[b-2qtsruyavs] {
    transform: translateY(0) scale(0.98);
}

.action-btn__icon[b-2qtsruyavs] {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--accent-bg);
    color: var(--accent-fg);
    font-size: 1.05rem;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.action-btn:hover .action-btn__icon[b-2qtsruyavs] {
    transform: scale(1.1) rotate(-5deg);
}

.action-btn__body[b-2qtsruyavs] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.action-btn__body strong[b-2qtsruyavs] {
    color: var(--text-primary, #1A1A18);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
}

.action-btn__body small[b-2qtsruyavs] {
    color: var(--text-secondary, #5F5E5A);
    font-size: 12px;
    line-height: 1.35;
}

.action-btn__arrow[b-2qtsruyavs] {
    color: var(--accent-fg);
    font-size: 0.95rem;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.action-btn:hover .action-btn__arrow[b-2qtsruyavs] {
    transform: translateX(4px);
}

.action-btn--students[b-2qtsruyavs] { --accent-bg: var(--c-teal-bg, #E1F5EE); --accent-fg: var(--c-teal-fg, #0F6E56); }
.action-btn--courses[b-2qtsruyavs] { --accent-bg: var(--c-blue-bg, #E6F1FB); --accent-fg: var(--c-blue-fg, #185FA5); }
.action-btn--focus[b-2qtsruyavs] { --accent-bg: var(--c-purple-bg, #EEEDFE); --accent-fg: var(--c-purple-fg, #534AB7); }
.action-btn--add[b-2qtsruyavs] { --accent-bg: var(--c-amber-bg, #FAEEDA); --accent-fg: var(--c-amber-fg, #BA7517); }

.activity-list[b-2qtsruyavs] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.activity-item[b-2qtsruyavs] {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 10px;
    border: var(--border-hairline, 0.5px) solid transparent;
    border-radius: var(--radius-input, 8px);
    background: transparent;
    transition: background var(--motion-fast, 150ms) var(--ease-out, ease),
                border-color var(--motion-fast, 150ms) var(--ease-out, ease);
}

.activity-item:hover[b-2qtsruyavs] {
    border-color: var(--border-subtle, rgba(0, 0, 0, 0.08));
    background: var(--bg-base, #FAFAF7);
}

.activity-icon[b-2qtsruyavs] {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--c-teal-bg, #E1F5EE);
    color: var(--c-teal-fg, #0F6E56);
    font-size: 0.95rem;
}

.activity-item--user .activity-icon[b-2qtsruyavs] { background: var(--c-teal-bg, #E1F5EE); color: var(--c-teal-fg, #0F6E56); }
.activity-item--course .activity-icon[b-2qtsruyavs] { background: var(--c-blue-bg, #E6F1FB); color: var(--c-blue-fg, #185FA5); }
.activity-item--test .activity-icon[b-2qtsruyavs] { background: var(--c-green-bg, #EAF3DE); color: var(--c-green-fg, #639922); }
.activity-item--edit .activity-icon[b-2qtsruyavs] { background: var(--c-amber-bg, #FAEEDA); color: var(--c-amber-fg, #BA7517); }
.activity-item--delete .activity-icon[b-2qtsruyavs] { background: var(--danger-bg-token, #FCEBEB); color: var(--danger-token, #A32D2D); }

.activity-content[b-2qtsruyavs] {
    min-width: 0;
}

.activity-text[b-2qtsruyavs] {
    margin: 0;
    color: var(--text-primary, #1A1A18);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
}

.activity-time[b-2qtsruyavs] {
    display: block;
    margin-top: 2px;
    color: var(--text-secondary, #5F5E5A);
    font-size: 0.78rem;
}

.activity-empty[b-2qtsruyavs] {
    display: grid;
    place-items: center;
    gap: 8px;
    min-height: 180px;
    padding: 24px;
    color: var(--text-secondary, #5F5E5A);
    text-align: center;
}

.activity-empty i[b-2qtsruyavs] {
    color: var(--text-tertiary, #888780);
    font-size: 2rem;
}

.activity-empty p[b-2qtsruyavs] {
    margin: 0;
}

@media (max-width: 1180px) {
    .stats-grid[b-2qtsruyavs] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-workspace-grid[b-2qtsruyavs] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .dashboard-hero[b-2qtsruyavs] {
        grid-template-columns: 1fr;
        padding: 18px;
    }

    .dashboard-hero__actions[b-2qtsruyavs] {
        justify-content: flex-start;
    }

    .stats-grid[b-2qtsruyavs],
    .action-buttons[b-2qtsruyavs] {
        grid-template-columns: 1fr;
    }
}
/* _content/AptisWeb/Components/Pages/Admin/Tabs/FocusExamsTab.razor.rz.scp.css */
/* ============================================================
   FOCUS EXAMS TAB — Premium Admin UI
   ============================================================ */

/* ── Skill colour tokens ─────────────────────────────────── */
:root[b-w2xtgex1j5] {
    --skill-listening-fg:  #1857a4;
    --skill-listening-bg:  #deedfb;
    --skill-listening-mid: #5a9bd8;
    --skill-reading-fg:    #92580d;
    --skill-reading-bg:    #fdefd3;
    --skill-reading-mid:   #d4943a;
    --skill-writing-fg:    #6b3e98;
    --skill-writing-bg:    #ede4f7;
    --skill-writing-mid:   #a87fd4;
    --skill-speaking-fg:   #0c7a6e;
    --skill-speaking-bg:   #d9f2ee;
    --skill-speaking-mid:  #4ab3a5;
    --focus-card-shadow: 0 12px 32px rgba(16, 24, 40, 0.06);
    --focus-card-border: #dfe8e3;
    --focus-soft-border: #edf2ef;
}

/* ── Root layout ─────────────────────────────────────────── */
.focus-admin[b-w2xtgex1j5] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    animation: focus-enter-b-w2xtgex1j5 0.45s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes focus-enter-b-w2xtgex1j5 {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Header ──────────────────────────────────────────────── */
.focus-admin__header[b-w2xtgex1j5] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 16px;
    padding: 20px 24px;
    background:
        radial-gradient(280px 180px at 0% 0%, rgba(15, 110, 86, 0.12), transparent 70%),
        radial-gradient(160px 100px at 100% 100%, rgba(24, 95, 165, 0.07), transparent 70%),
        var(--bg-surface, #ffffff);
    border: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
    border-left: 4px solid var(--brand-primary, #085041);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.focus-admin__header h2[b-w2xtgex1j5] {
    margin: 0 0 6px;
    color: var(--text-primary, #1a1a18);
    font-size: 1.38rem;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.focus-admin__header p[b-w2xtgex1j5] {
    max-width: 820px;
    color: var(--text-secondary, #5f5e5a) !important;
    font-size: 0.88rem;
    line-height: 1.6;
    margin: 0;
}

.focus-admin__header code[b-w2xtgex1j5] {
    color: var(--brand-primary, #085041);
    background: var(--brand-primary-soft, #e1f5ee);
    border-radius: 6px;
    padding: 0.1rem 0.35rem;
    font-size: 0.84em;
}

.focus-admin__stats-grid[b-w2xtgex1j5] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.focus-admin__stat-card[b-w2xtgex1j5] {
    --stat-bg: #edf7f4;
    --stat-fg: #0f6e56;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 16px;
    border: 1px solid var(--focus-card-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.035);
}

.focus-admin__stat-card--listening[b-w2xtgex1j5] { --stat-bg: var(--skill-listening-bg); --stat-fg: var(--skill-listening-fg); }
.focus-admin__stat-card--reading[b-w2xtgex1j5] { --stat-bg: var(--skill-reading-bg); --stat-fg: var(--skill-reading-fg); }
.focus-admin__stat-card--writing[b-w2xtgex1j5] { --stat-bg: var(--skill-writing-bg); --stat-fg: var(--skill-writing-fg); }
.focus-admin__stat-card--speaking[b-w2xtgex1j5] { --stat-bg: var(--skill-speaking-bg); --stat-fg: var(--skill-speaking-fg); }

.focus-admin__stat-icon[b-w2xtgex1j5] {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: var(--stat-bg);
    color: var(--stat-fg);
    font-size: 1.2rem;
}

.focus-admin__stat-card strong[b-w2xtgex1j5] {
    display: block;
    color: var(--text-primary, #1a1a18);
    font-size: 1.45rem;
    font-weight: 900;
    line-height: 1;
}

.focus-admin__stat-card span[b-w2xtgex1j5],
.focus-admin__stat-card small[b-w2xtgex1j5] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.focus-admin__stat-card span[b-w2xtgex1j5] {
    margin-top: 4px;
    color: var(--text-primary, #1a1a18);
    font-size: 0.82rem;
    font-weight: 800;
}

.focus-admin__stat-card small[b-w2xtgex1j5] {
    margin-top: 3px;
    color: var(--text-secondary, #5f5e5a);
    font-size: 0.77rem;
}

/* ── Primary button ──────────────────────────────────────── */
.focus-admin__btn[b-w2xtgex1j5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 10px;
    border: 1.5px solid var(--border-subtle, rgba(0,0,0,0.08));
    background: var(--bg-base, #fafaf7);
    color: var(--text-primary, #1a1a18);
    font-size: 0.88rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.focus-admin__btn:hover:not(:disabled)[b-w2xtgex1j5] {
    background: var(--brand-primary-soft, #e1f5ee);
    border-color: rgba(15, 110, 86, 0.35);
    color: var(--brand-primary, #085041);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(8, 80, 65, 0.14);
}

.focus-admin__btn:active:not(:disabled)[b-w2xtgex1j5] {
    transform: translateY(0) scale(0.97);
}

.focus-admin__btn:disabled[b-w2xtgex1j5] {
    opacity: 0.5;
    cursor: not-allowed;
}

.focus-admin__btn--ghost[b-w2xtgex1j5] {
    background: transparent;
    border-color: rgba(185, 28, 28, 0.2);
    color: #991b1b;
}

.focus-admin__btn--ghost:hover:not(:disabled)[b-w2xtgex1j5] {
    background: #fef2f2;
    border-color: rgba(185, 28, 28, 0.4);
    color: #991b1b;
    box-shadow: 0 4px 12px rgba(185, 28, 28, 0.12);
}

/* ── Custom section wrapper ──────────────────────────────── */
.focus-admin__custom[b-w2xtgex1j5] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.focus-admin__builder-panel[b-w2xtgex1j5] {
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

/* ── Module filter chips ─────────────────────────────────── */
.focus-admin__filters[b-w2xtgex1j5] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 14px;
    background: var(--bg-surface, #ffffff);
    border: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.filter-chip[b-w2xtgex1j5] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 0 14px;
    border: 1.5px solid var(--border-subtle, rgba(0,0,0,0.10));
    border-radius: 999px;
    background: var(--bg-surface, #ffffff);
    color: var(--text-secondary, #5f5e5a);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.filter-chip[b-w2xtgex1j5]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: currentColor;
    opacity: 0;
    transition: opacity 0.2s;
}

.filter-chip:hover[b-w2xtgex1j5]::before { opacity: 0.06; }

.filter-chip:hover[b-w2xtgex1j5] {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.10);
}

.filter-chip:active[b-w2xtgex1j5] { transform: translateY(0) scale(0.97); }

.filter-chip:disabled[b-w2xtgex1j5] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Active generic */
.filter-chip--active[b-w2xtgex1j5] {
    border-color: var(--brand-primary, #085041);
    background: var(--brand-primary, #085041);
    color: #fff;
    box-shadow: 0 6px 18px rgba(8, 80, 65, 0.22);
}

.filter-chip--active:hover[b-w2xtgex1j5] {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(8, 80, 65, 0.28);
}

/* Per-skill active states — applied via JS/Blazor class on the active chip */
.filter-chip[class*="listening"].filter-chip--active[b-w2xtgex1j5],
.filter-chip--active-listening[b-w2xtgex1j5] {
    background: linear-gradient(135deg, var(--skill-listening-fg), #2a6fc4);
    border-color: var(--skill-listening-fg);
    box-shadow: 0 6px 18px rgba(24, 87, 164, 0.28);
}

.filter-chip[class*="reading"].filter-chip--active[b-w2xtgex1j5],
.filter-chip--active-reading[b-w2xtgex1j5] {
    background: linear-gradient(135deg, var(--skill-reading-fg), #b8660a);
    border-color: var(--skill-reading-fg);
    box-shadow: 0 6px 18px rgba(146, 88, 13, 0.28);
}

.filter-chip[class*="writing"].filter-chip--active[b-w2xtgex1j5],
.filter-chip--active-writing[b-w2xtgex1j5] {
    background: linear-gradient(135deg, var(--skill-writing-fg), #7e4baa);
    border-color: var(--skill-writing-fg);
    box-shadow: 0 6px 18px rgba(107, 62, 152, 0.28);
}

.filter-chip[class*="speaking"].filter-chip--active[b-w2xtgex1j5],
.filter-chip--active-speaking[b-w2xtgex1j5] {
    background: linear-gradient(135deg, var(--skill-speaking-fg), #0e8c7e);
    border-color: var(--skill-speaking-fg);
    box-shadow: 0 6px 18px rgba(12, 122, 110, 0.28);
}

.filter-chip__count[b-w2xtgex1j5] {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    padding: 0 6px;
    height: 20px;
    border-radius: 999px;
    background: var(--bg-muted, #f1efe8);
    color: var(--text-secondary, #5f5e5a);
    font-size: 0.73rem;
    font-weight: 800;
    transition: background 0.2s, color 0.2s;
}

.filter-chip--active .filter-chip__count[b-w2xtgex1j5] {
    background: rgba(255,255,255,0.22);
    color: #fff;
}

/* ── Search input ────────────────────────────────────────── */
.focus-admin__search[b-w2xtgex1j5] {
    width: min(320px, 100%);
    margin-left: auto;
    min-height: 36px;
    padding: 0.45rem 0.85rem;
    border: 1.5px solid var(--border-default, rgba(0,0,0,0.14));
    border-radius: 8px;
    background: var(--bg-base, #fafaf7);
    color: var(--text-primary, #1a1a18);
    font-size: 0.88rem;
    font-weight: 600;
    transition: border-color 0.18s, box-shadow 0.18s;
}

.focus-admin__search:focus[b-w2xtgex1j5] {
    outline: none;
    border-color: var(--brand-primary, #085041);
    background: var(--bg-surface, #ffffff);
    box-shadow: 0 0 0 3px rgba(15, 110, 86, 0.16);
}

.focus-admin__search--wide[b-w2xtgex1j5] {
    width: 100%;
    margin-bottom: 14px;
}

.focus-admin__slot-chip[b-w2xtgex1j5] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    border: 1.5px solid var(--border-subtle, rgba(0,0,0,0.09));
    background: var(--bg-base, #fafaf7);
    color: var(--text-primary, #1a1a18);
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer;
    text-align: left;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.focus-admin__slot-chip[b-w2xtgex1j5]::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--brand-primary, #085041);
    opacity: 0;
    transition: opacity 0.22s;
}

.focus-admin__slot-chip:hover:not(:disabled)[b-w2xtgex1j5] {
    border-color: rgba(15, 110, 86, 0.3);
    box-shadow: 0 4px 14px rgba(8, 80, 65, 0.10);
    transform: translateY(-2px);
}

.focus-admin__slot-chip:hover[b-w2xtgex1j5]::after { opacity: 0.4; }

.focus-admin__slot-chip--active[b-w2xtgex1j5] {
    border-color: rgba(15, 110, 86, 0.5);
    background: linear-gradient(135deg, rgba(14, 110, 86, 0.08), rgba(225, 245, 238, 0.6));
    color: var(--brand-primary, #085041);
    box-shadow: 0 6px 18px rgba(8, 80, 65, 0.14);
}

.focus-admin__slot-chip--active[b-w2xtgex1j5]::after { opacity: 1; }

.focus-admin__slot-chip:disabled[b-w2xtgex1j5] {
    opacity: 0.55;
    cursor: not-allowed;
}

.focus-admin__slot-chip span[b-w2xtgex1j5] {
    font-weight: 800;
    font-size: 0.92rem;
}

.focus-admin__slot-chip small[b-w2xtgex1j5] {
    color: var(--text-secondary, #5f5e5a);
    font-size: 0.76rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.focus-admin__slot-chip--active small[b-w2xtgex1j5] {
    color: rgba(8, 80, 65, 0.72);
}

.focus-admin__slot-chip--add[b-w2xtgex1j5] {
    border-style: dashed;
    color: var(--brand-primary, #085041);
    background: rgba(8, 80, 65, 0.045);
}

.focus-admin__slot-chip--add[b-w2xtgex1j5]::after {
    background: rgba(8, 80, 65, 0.35);
}

/* ── Format guide bar ────────────────────────────────────── */
.focus-admin__format-guide[b-w2xtgex1j5] {
    display: grid;
    grid-template-columns: minmax(160px, auto) minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
    border: 1.5px solid rgba(24, 95, 165, 0.18);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(222, 237, 251, 0.6), rgba(250, 250, 247, 0.95));
}

.focus-admin__format-copy[b-w2xtgex1j5] {
    display: grid;
    gap: 2px;
}

.focus-admin__format-copy span[b-w2xtgex1j5] {
    color: var(--text-secondary, #5f5e5a);
    font-size: 0.71rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.focus-admin__format-copy strong[b-w2xtgex1j5] {
    color: var(--text-primary, #1a1a18);
    font-size: 1rem;
    font-weight: 900;
}

.focus-admin__format-pills[b-w2xtgex1j5] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.focus-admin__format-pill[b-w2xtgex1j5],
.focus-admin__quota[b-w2xtgex1j5],
.focus-admin__draft-state[b-w2xtgex1j5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    font-weight: 800;
    white-space: nowrap;
}

.focus-admin__format-pill[b-w2xtgex1j5] {
    min-height: 32px;
    padding: 0 12px;
    border: 1.5px solid rgba(24, 95, 165, 0.18);
    background: #fff;
    color: var(--text-secondary, #5f5e5a);
    font-size: 0.8rem;
    transition: border-color 0.18s, box-shadow 0.18s;
}

.focus-admin__format-pill:hover[b-w2xtgex1j5] {
    box-shadow: 0 2px 8px rgba(24, 95, 165, 0.14);
}

.focus-admin__format-pill .lucide[b-w2xtgex1j5] { color: var(--c-blue-fg, #185fa5); }

/* ── Builder grid ────────────────────────────────────────── */
.focus-admin__builder-grid[b-w2xtgex1j5] {
    display: grid;
    grid-template-columns: minmax(620px, 1fr) minmax(540px, 0.78fr);
    gap: 18px;
    align-items: start;
}

.focus-admin__builder-panel[b-w2xtgex1j5] {
    padding: 18px;
    border-radius: 18px;
}

.focus-admin__builder-panel--side[b-w2xtgex1j5] {
    position: sticky;
    top: 12px;
    padding: 16px;
}

.focus-admin__bank-panel[b-w2xtgex1j5] {
    display: grid;
    grid-template-rows: auto minmax(420px, 1fr);
    gap: 14px;
    max-height: calc(100vh - 96px);
    overflow: hidden;
    min-width: 0;
}

.focus-admin__bank-head[b-w2xtgex1j5] {
    display: grid;
    gap: 12px;
    padding: 4px 4px 0;
}

.focus-admin__bank-head h3[b-w2xtgex1j5] {
    margin: 0 0 4px;
    color: var(--text-primary, #1a1a18);
    font-size: 1.05rem;
    font-weight: 900;
}

.focus-admin__bank-head p[b-w2xtgex1j5] {
    margin: 0;
    color: var(--text-secondary, #5f5e5a);
    font-size: 0.83rem;
    line-height: 1.45;
}

.focus-admin__bank-body[b-w2xtgex1j5] {
    min-height: 420px;
    overflow: auto;
    padding-right: 3px;
}

.focus-admin__bank-body[b-w2xtgex1j5]::-webkit-scrollbar,
.focus-admin__slot-detail-table[b-w2xtgex1j5]::-webkit-scrollbar,
.focus-admin__catalog[b-w2xtgex1j5]::-webkit-scrollbar {
    width: 8px;
}

.focus-admin__bank-body[b-w2xtgex1j5]::-webkit-scrollbar-thumb,
.focus-admin__slot-detail-table[b-w2xtgex1j5]::-webkit-scrollbar-thumb,
.focus-admin__catalog[b-w2xtgex1j5]::-webkit-scrollbar-thumb {
    background: #c9d6d0;
    border-radius: 999px;
}

.focus-admin__slot-sidebar[b-w2xtgex1j5] {
    border-top: 1px solid var(--focus-soft-border);
    padding-top: 12px;
}

/* ── Panel head ──────────────────────────────────────────── */
.focus-admin__panel-head[b-w2xtgex1j5] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
}

.focus-admin__panel-head h3[b-w2xtgex1j5],
.focus-admin__slot-sidebar > h3[b-w2xtgex1j5] {
    margin: 0 0 4px;
    font-size: 1.02rem;
    font-weight: 900;
    color: var(--text-primary, #1a1a18);
}

.focus-admin__panel-head p[b-w2xtgex1j5] {
    margin: 0;
    color: var(--text-secondary, #5f5e5a);
    font-size: 0.84rem;
    line-height: 1.5;
}

.focus-admin__builder-actions[b-w2xtgex1j5] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex-shrink: 0;
}

/* ── Form row (slot title input) ─────────────────────────── */
.focus-admin__form-row[b-w2xtgex1j5] {
    display: grid;
    gap: 6px;
    margin-bottom: 12px;
}

.focus-admin__form-row label[b-w2xtgex1j5] {
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--text-secondary, #5f5e5a);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.focus-admin__layout-grid[b-w2xtgex1j5] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.focus-admin__layout-choice[b-w2xtgex1j5] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 150px;
    padding: 16px;
    border: 1.5px solid var(--border-subtle, rgba(0,0,0,0.09));
    border-radius: 16px;
    background: #fff;
    color: var(--text-primary, #1a1a18);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}

.focus-admin__layout-choice:hover:not(:disabled)[b-w2xtgex1j5] {
    transform: translateY(-2px);
    border-color: rgba(15, 110, 86, 0.24);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

.focus-admin__layout-choice:disabled[b-w2xtgex1j5] {
    opacity: 0.58;
    cursor: not-allowed;
}

.focus-admin__layout-choice--active[b-w2xtgex1j5] {
    border-color: rgba(15, 110, 86, 0.38);
    background: linear-gradient(180deg, #f5fbf8 0%, #ffffff 100%);
    box-shadow: 0 0 0 2px rgba(15, 110, 86, 0.10);
}

.focus-admin__layout-choice-head[b-w2xtgex1j5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.focus-admin__layout-choice-icon[b-w2xtgex1j5] {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--brand-primary-soft, #e1f5ee);
    color: var(--brand-primary, #085041);
    font-size: 1.1rem;
}

.focus-admin__layout-choice-pill[b-w2xtgex1j5] {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: #eef4f2;
    color: var(--text-secondary, #5f5e5a);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.focus-admin__layout-choice strong[b-w2xtgex1j5] {
    font-size: 1rem;
    font-weight: 900;
    color: var(--text-primary, #1a1a18);
}

.focus-admin__layout-choice p[b-w2xtgex1j5] {
    margin: 0;
    color: var(--text-secondary, #5f5e5a);
    font-size: 0.83rem;
    line-height: 1.5;
}

.focus-admin__layout-choice small[b-w2xtgex1j5] {
    margin-top: auto;
    color: #0f6e56;
    font-size: 0.77rem;
    font-weight: 800;
}

/* ── Summary line (mục đã chọn / câu / parts) ───────────── */
.focus-admin__summary-line[b-w2xtgex1j5] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.focus-admin__summary-line span[b-w2xtgex1j5] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--bg-base, #fafaf7);
    border: 1.5px solid var(--border-subtle, rgba(0,0,0,0.09));
    color: var(--text-secondary, #5f5e5a);
    font-size: 0.81rem;
    font-weight: 700;
}

.focus-admin__summary-line .focus-admin__draft-state[b-w2xtgex1j5] {
    padding-inline: 12px;
}

.focus-admin__draft-state--saved[b-w2xtgex1j5] {
    background: #edf7f4;
    border-color: rgba(15, 110, 86, 0.22);
    color: #0f6e56;
}

.focus-admin__draft-state--dirty[b-w2xtgex1j5] {
    background: #fffbdb;
    border-color: rgba(186, 117, 23, 0.25);
    color: #7a5108;
}

.focus-admin__draft-state--danger[b-w2xtgex1j5] {
    background: #fee2e2;
    border-color: rgba(185, 28, 28, 0.25);
    color: #991b1b;
}

/* ── Slot detail section ─────────────────────────────────── */
.focus-admin__slot-detail[b-w2xtgex1j5] {
    margin: 0 0 16px;
    border: 1.5px solid var(--border-subtle, rgba(0,0,0,0.09));
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

.focus-admin__slot-detail-head[b-w2xtgex1j5] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    background: var(--bg-base, #fafaf7);
    border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
}

.focus-admin__slot-detail-head > div:first-child[b-w2xtgex1j5] {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.focus-admin__slot-detail-head span[b-w2xtgex1j5] {
    color: var(--text-secondary, #5f5e5a);
    font-size: 0.71rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.focus-admin__slot-detail-head strong[b-w2xtgex1j5] {
    color: var(--text-primary, #1a1a18);
    font-size: 0.96rem;
    font-weight: 900;
}

.focus-admin__slot-detail-stats[b-w2xtgex1j5] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.focus-admin__slot-detail-stats span[b-w2xtgex1j5],
.focus-admin__slot-detail-state[b-w2xtgex1j5] {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border: 1.5px solid var(--border-subtle, rgba(0,0,0,0.08));
    border-radius: 999px;
    background: #fff;
    color: var(--text-secondary, #5f5e5a);
    font-size: 0.76rem;
    font-weight: 800;
    white-space: nowrap;
}

.focus-admin__slot-detail-state--saved[b-w2xtgex1j5] {
    background: #edf7f4;
    border-color: rgba(15, 110, 86, 0.22);
    color: #0f6e56;
}

.focus-admin__slot-detail-state--dirty[b-w2xtgex1j5] {
    background: #fffbdb;
    border-color: rgba(186, 117, 23, 0.25);
    color: #7a5108;
}

.focus-admin__slot-detail-state--danger[b-w2xtgex1j5] {
    background: #fee2e2;
    border-color: rgba(185, 28, 28, 0.25);
    color: #991b1b;
}

.focus-admin__slot-detail-empty[b-w2xtgex1j5] {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 16px 14px;
    color: var(--text-secondary, #5f5e5a);
    font-size: 0.86rem;
}

.focus-admin__slot-detail-empty i[b-w2xtgex1j5] { color: var(--brand-primary, #085041); }

.focus-admin__slot-empty[b-w2xtgex1j5] {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    min-height: 170px;
    padding: 24px;
    background:
        radial-gradient(260px 160px at 0% 0%, rgba(15, 110, 86, 0.12), transparent 70%),
        linear-gradient(135deg, #ffffff 0%, #f5fbf8 100%);
}

.focus-admin__slot-empty-icon[b-w2xtgex1j5] {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: var(--brand-primary-soft, #e1f5ee);
    color: var(--brand-primary, #085041);
    font-size: 1.35rem;
    box-shadow: 0 8px 18px rgba(8, 80, 65, 0.12);
}

.focus-admin__slot-empty strong[b-w2xtgex1j5] {
    display: block;
    margin-bottom: 6px;
    color: var(--text-primary, #1a1a18);
    font-size: 1.02rem;
    font-weight: 900;
}

.focus-admin__slot-empty span[b-w2xtgex1j5] {
    display: block;
    max-width: 560px;
    color: var(--text-secondary, #5f5e5a);
    font-size: 0.88rem;
    line-height: 1.55;
}

.focus-admin__selected-list[b-w2xtgex1j5] {
    display: grid;
    gap: 10px;
    max-height: min(620px, calc(100vh - 360px));
    min-height: 180px;
    overflow: auto;
    padding: 14px;
    background: #fbfdfc;
}

.focus-admin__selected-list[b-w2xtgex1j5]::-webkit-scrollbar {
    width: 8px;
}

.focus-admin__selected-list[b-w2xtgex1j5]::-webkit-scrollbar-thumb {
    background: #c9d6d0;
    border-radius: 999px;
}

.focus-admin__selected-groups[b-w2xtgex1j5] {
    display: grid;
    gap: 12px;
    padding: 12px;
    background: #fbfdfc;
}

.focus-admin__selected-group[b-w2xtgex1j5] {
    border: 1px solid var(--focus-soft-border);
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
}

.focus-admin__selected-group-head[b-w2xtgex1j5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--focus-soft-border);
    background: linear-gradient(180deg, #f8fcfa 0%, #ffffff 100%);
}

.focus-admin__selected-group-head > div:first-child[b-w2xtgex1j5] {
    display: grid;
    gap: 2px;
}

.focus-admin__selected-group-head span[b-w2xtgex1j5] {
    color: var(--text-secondary, #5f5e5a);
    font-size: 0.71rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.focus-admin__selected-group-head strong[b-w2xtgex1j5] {
    color: var(--text-primary, #1a1a18);
    font-size: 0.92rem;
    font-weight: 900;
}

.focus-admin__selected-group-stats[b-w2xtgex1j5] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.focus-admin__selected-group-stats span[b-w2xtgex1j5] {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border: 1px solid var(--focus-soft-border);
    border-radius: 999px;
    background: #fff;
    color: var(--text-secondary, #5f5e5a);
    font-size: 0.75rem;
    font-weight: 800;
}

.focus-admin__selected-card[b-w2xtgex1j5] {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 14px;
    border: 1.5px solid var(--focus-soft-border);
    border-radius: 16px;
    background: #fff;
    transition: border-color 0.16s, box-shadow 0.16s, transform 0.16s;
}

.focus-admin__selected-card:hover[b-w2xtgex1j5] {
    border-color: rgba(15, 110, 86, 0.22);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.055);
    transform: translateY(-1px);
}

.focus-admin__selected-main[b-w2xtgex1j5] {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.focus-admin__selected-heading[b-w2xtgex1j5] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    min-width: 0;
}

.focus-admin__selected-heading strong[b-w2xtgex1j5] {
    min-width: min(100%, 320px);
    color: var(--text-primary, #1a1a18);
    font-size: 0.95rem;
    font-weight: 900;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.focus-admin__selected-main small[b-w2xtgex1j5] {
    color: var(--text-secondary, #5f5e5a);
    font-size: 0.84rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.focus-admin__selected-meta[b-w2xtgex1j5] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.focus-admin__selected-meta span[b-w2xtgex1j5] {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    border: 1px solid var(--focus-soft-border);
    border-radius: 999px;
    background: #f5f8f7;
    color: #6b766f;
    font-size: 0.74rem;
    font-weight: 800;
}

.focus-admin__slot-detail-table[b-w2xtgex1j5] {
    max-height: 520px;
    overflow: auto;
}

.focus-admin__slot-detail-table table[b-w2xtgex1j5] {
    width: 100%;
    min-width: 920px;
    border-collapse: collapse;
}

.focus-admin__slot-detail-table th[b-w2xtgex1j5] {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 9px 12px;
    background: #fff;
    border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
    color: var(--text-secondary, #5f5e5a);
    font-size: 0.71rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-align: left;
    text-transform: uppercase;
}

.focus-admin__slot-detail-table td[b-w2xtgex1j5] {
    padding: 12px 12px;
    border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
    color: var(--text-secondary, #5f5e5a);
    font-size: 0.84rem;
    vertical-align: middle;
}

.focus-admin__slot-detail-table tbody tr:last-child td[b-w2xtgex1j5] { border-bottom: 0; }

.focus-admin__slot-detail-table tbody tr:hover td[b-w2xtgex1j5] {
    background: rgba(15, 110, 86, 0.04);
}

/* ── Part badge ──────────────────────────────────────────── */
.focus-admin__part-badge[b-w2xtgex1j5] {
    display: inline-flex;
    min-width: 34px;
    min-height: 26px;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(15, 110, 86, 0.2);
    border-radius: 999px;
    background: #edf7f4;
    color: #0f6e56;
    font-weight: 900;
    font-size: 0.8rem;
}

.focus-admin__part-mode-board[b-w2xtgex1j5] {
    margin: 0 0 16px;
    border: 1.5px solid rgba(15, 110, 86, 0.14);
    border-radius: 16px;
    background: linear-gradient(180deg, #f7fcfa 0%, #ffffff 100%);
    overflow: hidden;
}

.focus-admin__part-mode-board:not(.focus-admin__part-mode-board--picker)[b-w2xtgex1j5] {
    display: none;
}

.focus-admin__part-mode-board-head[b-w2xtgex1j5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(15, 110, 86, 0.08);
}

.focus-admin__part-mode-board-head > div[b-w2xtgex1j5] {
    display: grid;
    gap: 3px;
}

.focus-admin__part-mode-board-head span[b-w2xtgex1j5] {
    color: var(--text-secondary, #5f5e5a);
    font-size: 0.71rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.focus-admin__part-mode-board-head strong[b-w2xtgex1j5] {
    color: var(--text-primary, #1a1a18);
    font-size: 0.95rem;
    font-weight: 900;
}

.focus-admin__part-mode-board-head small[b-w2xtgex1j5] {
    color: var(--text-secondary, #5f5e5a);
    font-size: 0.78rem;
    line-height: 1.4;
    text-align: right;
}

.focus-admin__part-mode-grid[b-w2xtgex1j5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    padding: 14px 16px 16px;
}

.focus-admin__part-mode-card[b-w2xtgex1j5] {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--focus-soft-border);
    border-radius: 16px;
    background: #fff;
    text-align: left;
    color: var(--text-primary, #1a1a18);
    cursor: pointer;
    transition: transform 0.16s, border-color 0.16s, box-shadow 0.16s;
}

.focus-admin__part-mode-card:hover[b-w2xtgex1j5] {
    transform: translateY(-2px);
    border-color: rgba(15, 110, 86, 0.22);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05);
}

.focus-admin__part-mode-card--active[b-w2xtgex1j5] {
    border-color: rgba(15, 110, 86, 0.32);
    background: #f5fbf8;
    box-shadow: 0 0 0 2px rgba(15, 110, 86, 0.10);
}

.focus-admin__part-mode-card--selected:not(.focus-admin__part-mode-card--active)[b-w2xtgex1j5] {
    border-color: rgba(15, 110, 86, 0.18);
    background: #fbfefd;
}

.focus-admin__part-mode-card--inactive[b-w2xtgex1j5] {
    opacity: 0.82;
}

.focus-admin__part-mode-card-top[b-w2xtgex1j5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.focus-admin__part-mode-icon[b-w2xtgex1j5] {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--brand-primary-soft, #e1f5ee);
    color: var(--brand-primary, #085041);
}

.focus-admin__part-mode-badge[b-w2xtgex1j5] {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    background: #edf7f4;
    color: #0f6e56;
    font-size: 0.73rem;
    font-weight: 900;
}

.focus-admin__part-mode-card strong[b-w2xtgex1j5] {
    font-size: 0.92rem;
    font-weight: 900;
}

.focus-admin__part-mode-card p[b-w2xtgex1j5] {
    margin: 0;
    color: var(--text-secondary, #5f5e5a);
    font-size: 0.8rem;
    line-height: 1.45;
}

.focus-admin__part-mode-card small[b-w2xtgex1j5] {
    color: #0f6e56;
    font-size: 0.76rem;
    font-weight: 800;
}

.focus-admin__part-mode-progress[b-w2xtgex1j5] {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: #e8f0ec;
    overflow: hidden;
}

.focus-admin__part-mode-progress i[b-w2xtgex1j5] {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #0f6e56 0%, #23a08d 100%);
}

.focus-admin__part-mode-card--inactive .focus-admin__part-mode-progress i[b-w2xtgex1j5] {
    opacity: 0.45;
}

.focus-admin__part-mode-board--picker .focus-admin__detail-actions[b-w2xtgex1j5] {
    justify-content: flex-start;
    flex-wrap: wrap;
}

/* ── Detail topic ────────────────────────────────────────── */
.focus-admin__detail-topic[b-w2xtgex1j5] {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.focus-admin__detail-topic strong[b-w2xtgex1j5] {
    color: var(--text-primary, #1a1a18);
    font-weight: 900;
    overflow-wrap: anywhere;
}

.focus-admin__detail-topic small[b-w2xtgex1j5] {
    display: block;
    color: var(--text-secondary, #5f5e5a);
    white-space: normal;
    overflow-wrap: anywhere;
}

/* ── Detail action buttons ───────────────────────────────── */
.focus-admin__detail-actions[b-w2xtgex1j5] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.focus-admin__detail-view[b-w2xtgex1j5],
.focus-admin__detail-remove[b-w2xtgex1j5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 0 10px;
    border: 1.5px solid rgba(185, 28, 28, 0.18);
    border-radius: 8px;
    background: #fff;
    color: #991b1b;
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.18s;
}

.focus-admin__detail-view[b-w2xtgex1j5] {
    border-color: rgba(24, 95, 165, 0.2);
    color: var(--c-blue-fg, #185fa5);
}

.focus-admin__detail-view:hover[b-w2xtgex1j5] {
    background: var(--skill-listening-bg);
    box-shadow: 0 3px 10px rgba(24, 95, 165, 0.14);
}

.focus-admin__detail-remove:hover[b-w2xtgex1j5] {
    background: #fef2f2;
    box-shadow: 0 3px 10px rgba(185, 28, 28, 0.12);
}

.focus-admin__detail-remove:disabled[b-w2xtgex1j5] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Notices (success / error) ───────────────────────────── */
.focus-admin__notice[b-w2xtgex1j5] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.75rem 1.1rem;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    animation: notice-in-b-w2xtgex1j5 0.28s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes notice-in-b-w2xtgex1j5 {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.focus-admin__notice--success[b-w2xtgex1j5] {
    background: var(--c-green-bg, #eaf3de);
    color: var(--c-green-fg, #639922);
}

.focus-admin__notice--danger[b-w2xtgex1j5] {
    background: var(--danger-bg-token, #fcebeb);
    color: var(--danger-token, #a32d2d);
}

/* ── Loading / empty ─────────────────────────────────────── */
.focus-admin__loading[b-w2xtgex1j5] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    padding: 2.5rem 1rem;
    color: var(--text-secondary, #5f5e5a);
    font-weight: 600;
}

.focus-admin__empty[b-w2xtgex1j5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    padding: 3rem 1.5rem;
    background: var(--bg-surface, #fff);
    border: 1.5px dashed var(--border-default, rgba(0,0,0,0.14));
    border-radius: 16px;
    text-align: center;
    color: var(--text-secondary, #5f5e5a);
}

.focus-admin__empty i[b-w2xtgex1j5] {
    font-size: 2.25rem;
    color: var(--text-tertiary, #888780);
    opacity: 0.65;
    margin-bottom: 0.25rem;
}

.focus-admin__empty strong[b-w2xtgex1j5] {
    font-size: 1.02rem;
    color: var(--text-primary, #1a1a18);
}

.focus-admin__empty a[b-w2xtgex1j5] {
    color: var(--brand-primary, #085041);
    font-weight: 700;
}

/* ── Spin ────────────────────────────────────────────────── */
.spin[b-w2xtgex1j5] {
    display: inline-block;
    animation: focus-spin-b-w2xtgex1j5 0.9s linear infinite;
}

@keyframes focus-spin-b-w2xtgex1j5 {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── Pool cards ──────────────────────────────────────────── */
.focus-admin__pools[b-w2xtgex1j5] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.focus-pool[b-w2xtgex1j5] {
    --pool-accent: #0f6e56;
    position: relative;
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 16px 20px;
    background: var(--bg-surface, #fff);
    border: 1.5px solid var(--border-subtle, rgba(0,0,0,0.08));
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
    overflow: hidden;
    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.focus-pool:hover[b-w2xtgex1j5] {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.10);
    border-color: color-mix(in srgb, var(--pool-accent) 30%, transparent);
}

.focus-pool[b-w2xtgex1j5]::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--pool-accent) 80%, white), var(--pool-accent));
}

.focus-pool--listening[b-w2xtgex1j5] { --pool-accent: #1857a4; }
.focus-pool--reading[b-w2xtgex1j5]   { --pool-accent: #92580d; }
.focus-pool--writing[b-w2xtgex1j5]   { --pool-accent: #6b3e98; }
.focus-pool--speaking[b-w2xtgex1j5]  { --pool-accent: #0c7a6e; }

.focus-pool__icon[b-w2xtgex1j5] {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 1.3rem;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.focus-pool:hover .focus-pool__icon[b-w2xtgex1j5] {
    transform: scale(1.12) rotate(-6deg);
}

.focus-pool--listening .focus-pool__icon[b-w2xtgex1j5] {
    background: var(--skill-listening-bg);
    color: var(--skill-listening-fg);
}

.focus-pool--reading .focus-pool__icon[b-w2xtgex1j5] {
    background: var(--skill-reading-bg);
    color: var(--skill-reading-fg);
}

.focus-pool--writing .focus-pool__icon[b-w2xtgex1j5] {
    background: var(--skill-writing-bg);
    color: var(--skill-writing-fg);
}

.focus-pool--speaking .focus-pool__icon[b-w2xtgex1j5] {
    background: var(--skill-speaking-bg);
    color: var(--skill-speaking-fg);
}

.focus-pool__label[b-w2xtgex1j5] {
    display: block;
    margin-bottom: 3px;
    color: var(--text-secondary, #5f5e5a);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.focus-pool strong[b-w2xtgex1j5] {
    display: block;
    margin-bottom: 3px;
    color: var(--text-primary, #1a1a18);
    font-size: 1.4rem;
    font-weight: 900;
    line-height: 1;
}

.focus-pool small[b-w2xtgex1j5] {
    display: block;
    color: var(--text-secondary, #5f5e5a);
    font-size: 0.8rem;
    line-height: 1.45;
}

/* ── Fallback table ──────────────────────────────────────── */
.focus-admin__fallback-head[b-w2xtgex1j5] {
    padding: 18px 20px;
    border: 1px solid var(--focus-card-border);
    border-radius: 18px;
    background: linear-gradient(135deg, #ffffff, #f8fcfa);
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.045);
}

.focus-admin__fallback-head span[b-w2xtgex1j5] {
    display: block;
    margin-bottom: 4px;
    color: var(--brand-primary, #085041);
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.focus-admin__fallback-head h3[b-w2xtgex1j5] {
    margin: 0;
    color: var(--text-primary, #1a1a18);
    font-size: 1.05rem;
    font-weight: 900;
}

.focus-admin__fallback-head p[b-w2xtgex1j5] {
    margin: 6px 0 0;
    max-width: 840px;
    color: var(--text-secondary, #5f5e5a);
    font-size: 0.86rem;
    line-height: 1.55;
}

.focus-admin__table[b-w2xtgex1j5] {
    overflow-x: auto;
    background: var(--bg-surface, #fff);
    border: 1.5px solid var(--border-subtle, rgba(0,0,0,0.08));
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.focus-admin__table table[b-w2xtgex1j5] {
    width: 100%;
    min-width: 1280px;
    margin: 0;
    border-collapse: collapse;
}

.focus-admin__table thead th[b-w2xtgex1j5] {
    padding: 13px 14px;
    background: var(--bg-base, #fafaf7);
    border-bottom: 1.5px solid var(--border-subtle, rgba(0,0,0,0.08));
    color: var(--text-secondary, #5f5e5a);
    text-align: left;
    font-size: 0.71rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;
}

.focus-admin__table thead th.text-center[b-w2xtgex1j5] { text-align: center; }

.focus-admin__table tbody td[b-w2xtgex1j5] {
    padding: 14px 14px;
    border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.07));
    color: var(--text-primary, #1a1a18);
    font-size: 0.9rem;
    vertical-align: middle;
    transition: background 0.16s;
}

.focus-admin__table tbody td.text-center[b-w2xtgex1j5] { text-align: center; }
.focus-admin__table tbody tr:last-child td[b-w2xtgex1j5] { border-bottom: none; }

.focus-admin__table tbody tr:hover td[b-w2xtgex1j5] {
    background: rgba(15, 110, 86, 0.03);
}

.focus-admin__table tr.row-inactive td[b-w2xtgex1j5] {
    background: rgba(241, 239, 232, 0.45);
    color: var(--text-secondary, #5f5e5a);
}

.focus-admin__table tr.row-inactive .test-title[b-w2xtgex1j5] {
    color: var(--text-secondary, #5f5e5a);
}

.focus-admin__table .cell-id[b-w2xtgex1j5] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78rem;
    color: var(--text-tertiary, #888780);
}

.focus-admin__table .test-title[b-w2xtgex1j5] {
    font-weight: 700;
    color: var(--text-primary, #1a1a18);
}

.focus-admin__table .test-subtitle[b-w2xtgex1j5] {
    font-size: 0.77rem;
    color: var(--text-tertiary, #888780);
    margin-top: 2px;
}

.focus-admin__table .hint[b-w2xtgex1j5] {
    margin-top: 4px;
    font-size: 0.72rem;
    color: var(--text-tertiary, #888780);
}

/* ── Count pills ─────────────────────────────────────────── */
.count-pill[b-w2xtgex1j5] {
    display: inline-grid;
    place-items: center;
    min-width: 32px;
    padding: 0.18rem 0.5rem;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 800;
    border: 1.5px solid transparent;
}

.count-pill--listening[b-w2xtgex1j5] {
    background: var(--skill-listening-bg);
    color: var(--skill-listening-fg);
    border-color: rgba(24, 87, 164, 0.2);
}

.count-pill--reading[b-w2xtgex1j5] {
    background: var(--skill-reading-bg);
    color: var(--skill-reading-fg);
    border-color: rgba(146, 88, 13, 0.2);
}

.count-pill--writing[b-w2xtgex1j5] {
    background: var(--skill-writing-bg);
    color: var(--skill-writing-fg);
    border-color: rgba(107, 62, 152, 0.2);
}

.count-pill--speaking[b-w2xtgex1j5] {
    background: var(--skill-speaking-bg);
    color: var(--skill-speaking-fg);
    border-color: rgba(12, 122, 110, 0.2);
}

/* ── Status pill ─────────────────────────────────────────── */
.status-pill[b-w2xtgex1j5] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 0.18rem 0.65rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
}

.status-pill--inactive[b-w2xtgex1j5] {
    background: var(--bg-muted, #f1efe8);
    color: var(--text-secondary, #5f5e5a);
}

/* ── Focus switch ────────────────────────────────────────── */
.focus-switch[b-w2xtgex1j5] {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 46px;
    height: 24px;
    cursor: pointer;
}

.focus-switch input[b-w2xtgex1j5] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    margin: 0;
}

.focus-switch__track[b-w2xtgex1j5] {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background: var(--bg-muted, #e8e5dd);
    border: 1.5px solid rgba(0,0,0,0.08);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.focus-switch__track[b-w2xtgex1j5]::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.22);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.focus-switch input:checked ~ .focus-switch__track[b-w2xtgex1j5] {
    background: var(--brand-primary, #085041);
    border-color: var(--brand-primary, #085041);
    box-shadow: 0 4px 12px rgba(8, 80, 65, 0.24);
}

.focus-switch input:checked ~ .focus-switch__track[b-w2xtgex1j5]::after {
    transform: translateX(22px);
}

.focus-switch input:focus-visible ~ .focus-switch__track[b-w2xtgex1j5] {
    box-shadow: 0 0 0 3px rgba(15, 110, 86, 0.2);
}

.focus-switch.is-disabled[b-w2xtgex1j5],
.focus-switch input:disabled[b-w2xtgex1j5] { cursor: not-allowed; }

.focus-switch.is-disabled .focus-switch__track[b-w2xtgex1j5] { opacity: 0.5; }

/* ── Part list & catalog ─────────────────────────────────── */
.focus-admin__part-list[b-w2xtgex1j5] {
    display: grid;
    gap: 12px;
}

.focus-admin__part-section[b-w2xtgex1j5] {
    border: 1.5px solid var(--border-subtle, rgba(0,0,0,0.09));
    border-radius: 14px;
    overflow: hidden;
}

.focus-admin__part-section > header[b-w2xtgex1j5] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
    background: var(--bg-base, #fafaf7);
    border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
}

.focus-admin__part-section > header > div[b-w2xtgex1j5] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.focus-admin__part-section strong[b-w2xtgex1j5] { font-weight: 900; }

.focus-admin__part-section header span[b-w2xtgex1j5],
.focus-admin__part-empty[b-w2xtgex1j5] {
    color: var(--text-secondary, #5f5e5a);
    font-size: 0.82rem;
}

.focus-admin__quota[b-w2xtgex1j5] {
    min-height: 26px;
    padding: 0 10px;
    border: 1.5px solid rgba(24, 95, 165, 0.18);
    background: #fff;
    color: var(--c-blue-fg, #185fa5) !important;
    font-size: 0.78rem !important;
}

.focus-admin__quota--complete[b-w2xtgex1j5] {
    border-color: rgba(15, 110, 86, 0.26);
    background: #edf7f4;
    color: #0f6e56 !important;
}

.focus-admin__quota--over[b-w2xtgex1j5] {
    border-color: rgba(185, 28, 28, 0.26);
    background: #fee2e2;
    color: #991b1b !important;
}

/* ── Catalog rows ────────────────────────────────────────── */
.focus-admin__catalog[b-w2xtgex1j5] {
    display: grid;
    max-height: 380px;
    overflow: auto;
}

.focus-admin__catalog-row[b-w2xtgex1j5] {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) minmax(120px, 220px);
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.07));
    cursor: pointer;
    transition: background 0.16s;
    position: relative;
}

.focus-admin__catalog-row:last-child[b-w2xtgex1j5] { border-bottom: 0; }

.focus-admin__catalog-row:hover[b-w2xtgex1j5] {
    background: rgba(15, 110, 86, 0.04);
}

.focus-admin__catalog-row--selected[b-w2xtgex1j5] {
    background: rgba(15, 110, 86, 0.07);
    border-left: 3px solid rgba(15, 110, 86, 0.5);
    padding-left: 11px;
}

.focus-admin__catalog-row--selected:hover[b-w2xtgex1j5] {
    background: rgba(15, 110, 86, 0.10);
}

.focus-admin__catalog-row--disabled[b-w2xtgex1j5] {
    cursor: not-allowed;
    background: rgba(241, 239, 232, 0.5);
}

.focus-admin__catalog-row--disabled .focus-admin__catalog-main[b-w2xtgex1j5],
.focus-admin__catalog-row--disabled .focus-admin__catalog-meta[b-w2xtgex1j5] {
    opacity: 0.58;
}

.focus-admin__catalog-main[b-w2xtgex1j5] {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.focus-admin__catalog-main strong[b-w2xtgex1j5] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 800;
}

.focus-admin__catalog-main small[b-w2xtgex1j5],
.focus-admin__catalog-meta small[b-w2xtgex1j5] {
    color: var(--text-secondary, #5f5e5a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.focus-admin__catalog-club[b-w2xtgex1j5] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    max-width: 100%;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--skill-writing-bg);
    color: var(--skill-writing-fg);
    font-size: 0.74rem;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.focus-admin__catalog-meta[b-w2xtgex1j5] {
    display: grid;
    gap: 3px;
    justify-items: end;
    min-width: 0;
}

.focus-admin__catalog-meta b[b-w2xtgex1j5] {
    display: inline-flex;
    min-width: 28px;
    height: 26px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #edf7f4;
    color: #0f6e56;
    font-size: 0.82rem;
    font-weight: 900;
}

/* ── Mini buttons (Random / Clear) ──────────────────────── */
.focus-admin__bank-panel .focus-admin__part-list[b-w2xtgex1j5] {
    gap: 12px;
}

.focus-admin__bank-panel .focus-admin__part-section[b-w2xtgex1j5] {
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.035);
}

.focus-admin__bank-panel .focus-admin__part-section > header[b-w2xtgex1j5] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
    padding: 14px;
    background: linear-gradient(135deg, #ffffff, #f8fcfa);
}

.focus-admin__bank-panel .focus-admin__part-section > header > div:first-child[b-w2xtgex1j5] {
    display: grid;
    gap: 6px;
    align-items: start;
}

.focus-admin__bank-panel .focus-admin__part-section > header > div:last-child[b-w2xtgex1j5] {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.focus-admin__bank-panel .focus-admin__catalog[b-w2xtgex1j5] {
    max-height: 360px;
    padding: 0 12px 12px;
    background: #fff;
}

.focus-admin__bank-panel .focus-admin__catalog-row[b-w2xtgex1j5] {
    grid-template-columns: 24px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    padding: 14px 2px;
}

.focus-admin__bank-panel .focus-admin__catalog-main strong[b-w2xtgex1j5] {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.35;
}

.focus-admin__bank-panel .focus-admin__catalog-main small[b-w2xtgex1j5] {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.35;
}

.focus-admin__bank-panel .focus-admin__catalog-meta[b-w2xtgex1j5] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    max-width: 132px;
}

.focus-admin__bank-panel .focus-admin__catalog-meta small[b-w2xtgex1j5] {
    max-width: 132px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #f5f8f7;
    color: #6b766f;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.25;
    text-align: right;
    white-space: normal;
}

.focus-admin__mini-btn[b-w2xtgex1j5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 0 11px;
    border: 1.5px solid rgba(15, 110, 86, 0.28);
    border-radius: 8px;
    background: var(--brand-primary-soft, #e1f5ee);
    color: var(--brand-primary, #085041);
    font-weight: 800;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.18s;
}

.focus-admin__mini-btn:hover:not(:disabled)[b-w2xtgex1j5] {
    background: rgba(15, 110, 86, 0.14);
    box-shadow: 0 3px 10px rgba(8, 80, 65, 0.14);
}

.focus-admin__mini-btn:disabled[b-w2xtgex1j5] {
    opacity: 0.52;
    cursor: not-allowed;
}

.focus-admin__mini-btn--ghost[b-w2xtgex1j5] {
    border-color: var(--border-subtle, rgba(0,0,0,0.08));
    background: #fff;
    color: var(--text-secondary, #5f5e5a);
}

.focus-admin__mini-btn--save[b-w2xtgex1j5] {
    border-color: rgba(8, 80, 65, 0.42);
    background: var(--brand-primary, #085041);
    color: #fff;
}

.focus-admin__mini-btn--save:hover:not(:disabled)[b-w2xtgex1j5] {
    background: #063d32;
    box-shadow: 0 5px 14px rgba(8, 80, 65, 0.22);
}

.focus-admin__mini-btn--preview[b-w2xtgex1j5] {
    border-color: rgba(37, 99, 235, 0.24);
    background: #eff6ff;
    color: #1d4ed8;
}

.focus-admin__mini-btn--preview:hover:not(:disabled)[b-w2xtgex1j5] {
    background: #dbeafe;
    box-shadow: 0 5px 14px rgba(37, 99, 235, 0.16);
}

.focus-admin__clear-part[b-w2xtgex1j5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 10px;
    border: 1.5px solid rgba(153, 27, 27, 0.22);
    border-radius: 8px;
    background: #fff7f7;
    color: #991b1b;
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.18s;
}

.focus-admin__clear-part:hover:not(.focus-admin__clear-part--disabled)[b-w2xtgex1j5] {
    background: #fee2e2;
}

.focus-admin__clear-part input[b-w2xtgex1j5] {
    margin: 0;
    accent-color: #991b1b;
}

.focus-admin__clear-part--disabled[b-w2xtgex1j5] {
    opacity: 0.48;
    cursor: not-allowed;
}

.focus-admin__limit-hint[b-w2xtgex1j5] {
    color: #991b1b !important;
    font-weight: 800;
}

.focus-admin__part-empty[b-w2xtgex1j5] {
    padding: 14px;
    color: var(--text-secondary, #5f5e5a);
    font-size: 0.84rem;
    text-align: center;
}

/* ── Side panel: module summary ──────────────────────────── */
.focus-admin__builder-panel--side h3[b-w2xtgex1j5] {
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1.5px solid var(--border-subtle, rgba(0,0,0,0.08));
    font-size: 0.88rem;
    font-weight: 900;
    letter-spacing: -0.01em;
    color: var(--text-primary, #1a1a18);
}

.focus-admin__module-summary[b-w2xtgex1j5] {
    display: grid;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-subtle, rgba(0,0,0,0.07));
}

.focus-admin__module-summary:first-of-type[b-w2xtgex1j5] {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.focus-admin__module-summary > strong[b-w2xtgex1j5] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-secondary, #5f5e5a);
}

/* ── Summary slots (side panel) ──────────────────────────── */
.focus-admin__summary-slot[b-w2xtgex1j5] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: flex-start;
    width: 100%;
    border: 1.5px solid var(--border-subtle, rgba(0,0,0,0.09));
    background: var(--bg-base, #fafaf7);
    color: var(--text-primary, #1a1a18);
    border-radius: 10px;
    padding: 9px 12px;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.focus-admin__summary-slot[b-w2xtgex1j5]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--brand-primary, #085041);
    opacity: 0;
    transition: opacity 0.2s;
}

.focus-admin__summary-slot:hover:not(:disabled)[b-w2xtgex1j5] {
    border-color: rgba(15, 110, 86, 0.28);
    background: rgba(225, 245, 238, 0.4);
    transform: translateX(2px);
}

.focus-admin__summary-slot:hover[b-w2xtgex1j5]::before { opacity: 0.5; }

.focus-admin__summary-slot--active[b-w2xtgex1j5] {
    border-color: rgba(15, 110, 86, 0.45);
    background: linear-gradient(135deg, rgba(14, 110, 86, 0.1), rgba(225, 245, 238, 0.55));
    color: var(--brand-primary, #085041);
    box-shadow: 0 4px 14px rgba(8, 80, 65, 0.12);
}

.focus-admin__summary-slot--active[b-w2xtgex1j5]::before { opacity: 1; }

.focus-admin__summary-slot:disabled[b-w2xtgex1j5] {
    opacity: 0.55;
    cursor: not-allowed;
}

.focus-admin__summary-slot span[b-w2xtgex1j5] {
    font-size: 0.82rem;
    font-weight: 800;
}

.focus-admin__summary-slot small[b-w2xtgex1j5] {
    color: var(--text-secondary, #5f5e5a);
    font-size: 0.73rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.focus-admin__summary-slot--active small[b-w2xtgex1j5] {
    color: rgba(8, 80, 65, 0.7);
}

/* ── Modal ───────────────────────────────────────────────── */
.focus-admin__modal-backdrop[b-w2xtgex1j5] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
    animation: backdrop-in-b-w2xtgex1j5 0.22s ease both;
}

@keyframes backdrop-in-b-w2xtgex1j5 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.focus-admin__modal[b-w2xtgex1j5] {
    width: min(1120px, 96vw);
    max-height: min(860px, 92vh);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.32);
    animation: modal-in-b-w2xtgex1j5 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes modal-in-b-w2xtgex1j5 {
    from { opacity: 0; transform: scale(0.94) translateY(16px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.focus-admin__modal-head[b-w2xtgex1j5] {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    padding: 20px 24px;
    border-bottom: 1.5px solid var(--border-subtle, rgba(0,0,0,0.08));
    background: var(--bg-base, #fafaf7);
}

.focus-admin__modal-head h3[b-w2xtgex1j5] {
    margin: 4px 0 4px;
    color: var(--text-primary, #1a1a18);
    font-size: 1.22rem;
    font-weight: 900;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.focus-admin__modal-head p[b-w2xtgex1j5] {
    margin: 0;
    color: var(--text-secondary, #5f5e5a);
    font-size: 0.88rem;
}

.focus-admin__modal-kicker[b-w2xtgex1j5] {
    color: var(--brand-primary, #085041);
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.focus-admin__modal-close[b-w2xtgex1j5] {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1.5px solid var(--border-subtle, rgba(0,0,0,0.08));
    border-radius: 10px;
    background: #fff;
    color: var(--text-secondary, #5f5e5a);
    cursor: pointer;
    transition: all 0.18s;
}

.focus-admin__modal-close:hover[b-w2xtgex1j5] {
    background: #fef2f2;
    border-color: rgba(185, 28, 28, 0.2);
    color: #991b1b;
}

.focus-admin__modal-meta[b-w2xtgex1j5] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 24px;
    border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.07));
}

.focus-admin__modal-meta span[b-w2xtgex1j5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 12px;
    border: 1.5px solid rgba(15, 110, 86, 0.16);
    border-radius: 999px;
    background: #edf7f4;
    color: #0f6e56;
    font-size: 0.8rem;
    font-weight: 900;
}

.focus-admin__modal-preview[b-w2xtgex1j5] {
    padding: 14px 24px;
    border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.07));
    color: var(--text-primary, #1a1a18);
    font-size: 0.94rem;
    line-height: 1.55;
}

/* ── Question list in modal ──────────────────────────────── */
.focus-admin__question-list[b-w2xtgex1j5] {
    display: grid;
    gap: 12px;
    padding: 18px 24px 24px;
    overflow: auto;
}

.focus-admin__question-card[b-w2xtgex1j5] {
    border: 1.5px solid var(--border-subtle, rgba(0,0,0,0.08));
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    transition: box-shadow 0.2s;
}

.focus-admin__question-card:hover[b-w2xtgex1j5] {
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.07);
}

.focus-admin__question-card > header[b-w2xtgex1j5] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    background: var(--bg-base, #fafaf7);
    border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.07));
}

.focus-admin__question-card > header span[b-w2xtgex1j5] {
    color: var(--text-primary, #1a1a18);
    font-weight: 900;
}

.focus-admin__question-card > header small[b-w2xtgex1j5] {
    color: var(--text-secondary, #5f5e5a);
    font-weight: 800;
    font-size: 0.78rem;
}

.focus-admin__question-block[b-w2xtgex1j5] {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.07));
}

.focus-admin__question-block b[b-w2xtgex1j5] {
    color: var(--text-secondary, #5f5e5a);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.focus-admin__question-block p[b-w2xtgex1j5],
.focus-admin__question-block a[b-w2xtgex1j5] {
    margin: 0;
    color: var(--text-primary, #1a1a18);
    font-size: 0.94rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.focus-admin__question-block--main p[b-w2xtgex1j5] { font-weight: 700; }

.focus-admin__option-list[b-w2xtgex1j5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.07));
}

.focus-admin__option-list span[b-w2xtgex1j5] {
    padding: 8px 12px;
    border: 1.5px solid var(--border-subtle, rgba(0,0,0,0.08));
    border-radius: 8px;
    background: var(--bg-base, #fafaf7);
    color: var(--text-primary, #1a1a18);
    font-size: 0.88rem;
    transition: border-color 0.15s;
}

.focus-admin__question-foot[b-w2xtgex1j5] {
    display: grid;
    gap: 8px;
    padding: 12px 14px;
    background: #edf7f4;
    color: #0f6e56;
    font-size: 0.88rem;
    line-height: 1.48;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1400px) {
    .focus-admin__builder-grid[b-w2xtgex1j5] {
        grid-template-columns: 1fr;
    }

    .focus-admin__builder-panel--side[b-w2xtgex1j5] {
        position: static;
        max-height: none;
    }

    .focus-admin__bank-panel[b-w2xtgex1j5] {
        max-height: none;
    }
}

@media (max-width: 1180px) {
    .focus-admin__stats-grid[b-w2xtgex1j5] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .focus-admin__builder-grid[b-w2xtgex1j5] {
        grid-template-columns: 1fr;
    }

    .focus-admin__builder-panel--side[b-w2xtgex1j5] {
        position: static;
        max-height: none;
    }

    .focus-admin__bank-panel[b-w2xtgex1j5] {
        max-height: none;
    }

    .focus-admin__format-guide[b-w2xtgex1j5] {
        grid-template-columns: 1fr;
    }

    .focus-admin__format-pills[b-w2xtgex1j5] {
        justify-content: flex-start;
    }
}

@media (max-width: 860px) {
    .focus-admin__header[b-w2xtgex1j5] {
        grid-template-columns: 1fr;
    }

    .focus-admin__search[b-w2xtgex1j5] {
        margin-left: 0;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .focus-admin__stats-grid[b-w2xtgex1j5] {
        grid-template-columns: 1fr;
    }

    .focus-admin__layout-grid[b-w2xtgex1j5] {
        grid-template-columns: 1fr;
    }

    .focus-admin__slot-empty[b-w2xtgex1j5],
    .focus-admin__selected-card[b-w2xtgex1j5] {
        grid-template-columns: 1fr;
    }

    .focus-admin__slot-empty[b-w2xtgex1j5] {
        justify-items: start;
    }

    .focus-admin__selected-card .focus-admin__detail-actions[b-w2xtgex1j5] {
        justify-content: flex-start;
    }

    .focus-admin[b-w2xtgex1j5] {
        gap: 12px;
    }

    .focus-admin__header[b-w2xtgex1j5] {
        padding: 16px 18px;
    }

    .focus-admin__header h2[b-w2xtgex1j5] {
        font-size: 1.2rem;
    }

    .focus-admin__header p[b-w2xtgex1j5] {
        font-size: 0.84rem;
    }

    .focus-admin__btn[b-w2xtgex1j5] {
        width: 100%;
    }

    .focus-pool[b-w2xtgex1j5] {
        padding: 12px 16px;
        gap: 10px;
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .focus-pool__icon[b-w2xtgex1j5] {
        width: 44px;
        height: 44px;
        font-size: 1.15rem;
    }

    .focus-pool strong[b-w2xtgex1j5] {
        font-size: 1.2rem;
    }

    .focus-admin__filters[b-w2xtgex1j5] {
        padding: 10px;
        gap: 6px;
    }

    .filter-chip[b-w2xtgex1j5] {
        min-height: 34px;
        padding: 0 12px;
        font-size: 0.82rem;
    }

    /* === Mobile card layout for focus-exams table === */
    .focus-admin__table[b-w2xtgex1j5] {
        background: transparent;
        border: none;
        box-shadow: none;
        overflow: visible;
    }

    .focus-admin__table table[b-w2xtgex1j5],
    .focus-admin__table thead[b-w2xtgex1j5],
    .focus-admin__table tbody[b-w2xtgex1j5],
    .focus-admin__table tr[b-w2xtgex1j5],
    .focus-admin__table th[b-w2xtgex1j5],
    .focus-admin__table td[b-w2xtgex1j5] {
        display: block;
        width: auto;
        min-width: 0;
    }

    .focus-admin__table table[b-w2xtgex1j5] { min-width: 0; }
    .focus-admin__table thead[b-w2xtgex1j5] { display: none; }

    .focus-admin__table tbody tr[b-w2xtgex1j5] {
        position: relative;
        margin: 0 0 12px;
        padding: 14px;
        background: var(--bg-surface, #fff);
        border: 1.5px solid var(--border-subtle, rgba(0,0,0,0.08));
        border-radius: 16px;
        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-areas:
            "title title title id"
            "countL countR countW countS"
            "focusL focusL focusR focusR"
            "focusW focusW focusS focusS";
        gap: 10px 12px;
        align-items: start;
    }

    .focus-admin__table tbody tr:last-child[b-w2xtgex1j5] { margin-bottom: 0; }
    .focus-admin__table tbody tr:hover td[b-w2xtgex1j5] { background: transparent; }

    .focus-admin__table tbody td[b-w2xtgex1j5] {
        padding: 0;
        border: none;
        background: transparent;
        text-align: left !important;
    }

    .focus-admin__table tbody td:nth-child(1)[b-w2xtgex1j5] {
        grid-area: id;
        justify-self: end;
        align-self: start;
    }

    .focus-admin__table tbody td:nth-child(1)[b-w2xtgex1j5]::before {
        content: "#";
        margin-right: 2px;
        color: var(--text-tertiary, #888780);
    }

    .focus-admin__table tbody td:nth-child(2)[b-w2xtgex1j5] {
        grid-area: title;
        min-width: 0;
    }

    .focus-admin__table tbody td:nth-child(3)[b-w2xtgex1j5],
    .focus-admin__table tbody td:nth-child(4)[b-w2xtgex1j5],
    .focus-admin__table tbody td:nth-child(5)[b-w2xtgex1j5],
    .focus-admin__table tbody td:nth-child(6)[b-w2xtgex1j5] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .focus-admin__table tbody td:nth-child(3)[b-w2xtgex1j5] { grid-area: countL; justify-self: start; }
    .focus-admin__table tbody td:nth-child(4)[b-w2xtgex1j5] { grid-area: countR; justify-self: start; }
    .focus-admin__table tbody td:nth-child(5)[b-w2xtgex1j5] { grid-area: countW; justify-self: start; }
    .focus-admin__table tbody td:nth-child(6)[b-w2xtgex1j5] { grid-area: countS; justify-self: start; }

    .focus-admin__table tbody td:nth-child(3)[b-w2xtgex1j5]::before {
        content: "L";
        font-size: 0.7rem;
        font-weight: 900;
        color: var(--skill-listening-fg);
    }

    .focus-admin__table tbody td:nth-child(4)[b-w2xtgex1j5]::before {
        content: "R";
        font-size: 0.7rem;
        font-weight: 900;
        color: var(--skill-reading-fg);
    }

    .focus-admin__table tbody td:nth-child(5)[b-w2xtgex1j5]::before {
        content: "W";
        font-size: 0.7rem;
        font-weight: 900;
        color: var(--skill-writing-fg);
    }

    .focus-admin__table tbody td:nth-child(6)[b-w2xtgex1j5]::before {
        content: "S";
        font-size: 0.7rem;
        font-weight: 900;
        color: var(--skill-speaking-fg);
    }

    .focus-admin__table tbody td:nth-child(7)[b-w2xtgex1j5],
    .focus-admin__table tbody td:nth-child(8)[b-w2xtgex1j5],
    .focus-admin__table tbody td:nth-child(9)[b-w2xtgex1j5],
    .focus-admin__table tbody td:nth-child(10)[b-w2xtgex1j5] {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding-top: 10px;
        border-top: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
    }

    .focus-admin__table tbody td:nth-child(7)[b-w2xtgex1j5]  { grid-area: focusL; }
    .focus-admin__table tbody td:nth-child(8)[b-w2xtgex1j5]  { grid-area: focusR; align-items: flex-end; }
    .focus-admin__table tbody td:nth-child(9)[b-w2xtgex1j5]  { grid-area: focusW; }
    .focus-admin__table tbody td:nth-child(10)[b-w2xtgex1j5] { grid-area: focusS; align-items: flex-end; }

    .focus-admin__table tbody td:nth-child(7)[b-w2xtgex1j5]::before  { content: "Focus Listening"; }
    .focus-admin__table tbody td:nth-child(8)[b-w2xtgex1j5]::before  { content: "Focus Reading"; }
    .focus-admin__table tbody td:nth-child(9)[b-w2xtgex1j5]::before  { content: "Focus Writing"; }
    .focus-admin__table tbody td:nth-child(10)[b-w2xtgex1j5]::before { content: "Focus Speaking"; }

    .focus-admin__table tbody td:nth-child(7)[b-w2xtgex1j5]::before,
    .focus-admin__table tbody td:nth-child(8)[b-w2xtgex1j5]::before,
    .focus-admin__table tbody td:nth-child(9)[b-w2xtgex1j5]::before,
    .focus-admin__table tbody td:nth-child(10)[b-w2xtgex1j5]::before {
        font-size: 0.68rem;
        font-weight: 900;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--text-secondary, #5f5e5a);
    }

    .focus-admin__table .cell-id[b-w2xtgex1j5] { font-size: 0.74rem; }
    .focus-admin__table .test-title[b-w2xtgex1j5] { font-size: 0.95rem; }
}

@media (max-width: 640px) {
    .focus-admin__slotbar[b-w2xtgex1j5] {
        grid-template-columns: 1fr;
    }

    .focus-admin__part-mode-board-head[b-w2xtgex1j5],
    .focus-admin__selected-group-head[b-w2xtgex1j5] {
        flex-direction: column;
        align-items: stretch;
    }

    .focus-admin__part-mode-board-head small[b-w2xtgex1j5],
    .focus-admin__selected-group-stats[b-w2xtgex1j5] {
        text-align: left;
        justify-content: flex-start;
    }

    .focus-admin__catalog-row[b-w2xtgex1j5] {
        grid-template-columns: 1fr;
    }

    .focus-admin__catalog-meta[b-w2xtgex1j5] { justify-items: start; }

    .focus-admin__panel-head[b-w2xtgex1j5],
    .focus-admin__slot-detail-head[b-w2xtgex1j5],
    .focus-admin__part-section > header[b-w2xtgex1j5] {
        flex-direction: column;
        align-items: stretch;
    }

    .focus-admin__slot-detail-stats[b-w2xtgex1j5] { justify-content: flex-start; }

    .focus-admin__modal-backdrop[b-w2xtgex1j5] { padding: 10px; }

    .focus-admin__modal[b-w2xtgex1j5] {
        width: 100%;
        max-height: 96vh;
        border-radius: 14px;
    }

    .focus-admin__modal-head[b-w2xtgex1j5] { padding: 16px; }

    .focus-admin__modal-meta[b-w2xtgex1j5],
    .focus-admin__modal-preview[b-w2xtgex1j5],
    .focus-admin__question-list[b-w2xtgex1j5] {
        padding-left: 16px;
        padding-right: 16px;
    }

    .focus-admin__detail-actions[b-w2xtgex1j5] { justify-content: flex-start; }
}

/* Focus exam builder redesign */
.focus-admin[b-w2xtgex1j5] {
    --builder-bg: #f4f7f6;
    --builder-panel: #fff;
    --builder-ink: #10211f;
    --builder-muted: #6b7a78;
    --builder-line: #dbe7e3;
    --builder-green: #087b6f;
    --builder-green-2: #0c9485;
    --builder-green-soft: #e8f8f4;
    --builder-red: #e24848;
    --builder-red-soft: #fff0ef;
    --builder-shadow: 0 16px 42px rgba(16, 33, 31, 0.08);
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 0;
    min-height: calc(100vh - 86px);
    margin: -18px -18px 0;
    background: var(--builder-bg);
    color: var(--builder-ink);
}

.focus-admin__header[b-w2xtgex1j5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    padding: 14px 24px;
    border: 0;
    border-bottom: 1px solid var(--builder-line);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: none;
    backdrop-filter: blur(10px);
}

.focus-admin__header h2[b-w2xtgex1j5] {
    margin: 0 0 4px;
    font-size: 1.25rem;
    font-weight: 950;
    letter-spacing: 0;
}

.focus-admin__header p[b-w2xtgex1j5] {
    max-width: none;
    color: var(--builder-muted);
    font-size: 0.78rem;
}

.focus-admin__stats-grid[b-w2xtgex1j5],
.focus-admin__format-guide[b-w2xtgex1j5],
.focus-admin__fallback-head[b-w2xtgex1j5],
.focus-admin > .focus-admin__filters[aria-label="Module filter"][b-w2xtgex1j5],
.focus-admin__table[b-w2xtgex1j5] {
    display: none !important;
}

.focus-admin__custom[b-w2xtgex1j5] {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 0;
    min-height: 0;
}

.focus-admin__custom > .focus-admin__filters[b-w2xtgex1j5] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 12px 24px 6px;
    border-bottom: 0;
    background: #f9fbfa;
    overflow-x: auto;
}

.focus-admin__custom > .focus-admin__filters .filter-chip[b-w2xtgex1j5] {
    min-height: 36px;
    padding: 0 13px;
    border-radius: 999px;
    border: 1px solid var(--builder-line);
    background: #fff;
    color: #41524f;
    box-shadow: none;
    font-size: 0.82rem;
}

.focus-admin__custom > .focus-admin__filters .filter-chip--active[b-w2xtgex1j5] {
    background: var(--builder-green);
    border-color: var(--builder-green);
    color: #fff;
}

.focus-admin__slotbar[b-w2xtgex1j5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 8px;
    margin: 0;
    padding: 6px 24px 12px;
    border-bottom: 1px solid var(--builder-line);
    border-radius: 0;
    background: #f9fbfa;
}

.focus-admin__slot-chip[b-w2xtgex1j5] {
    min-height: 52px;
    border: 1px solid var(--builder-line);
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(16, 33, 31, 0.04);
}

.focus-admin__slot-chip--active[b-w2xtgex1j5] {
    border-color: var(--builder-green-2);
    background: linear-gradient(180deg, #effffb, #fff);
    box-shadow: 0 0 0 2px rgba(8, 123, 111, 0.1);
}

.focus-admin__builder-grid[b-w2xtgex1j5] {
    display: grid;
    grid-template-columns: 410px minmax(0, 1fr);
    gap: 16px;
    min-height: 0;
    padding: 18px 24px 22px;
    align-items: stretch;
}

.focus-admin__builder-panel[b-w2xtgex1j5],
.focus-admin__bank-panel[b-w2xtgex1j5] {
    min-height: 0;
    border: 1px solid var(--builder-line);
    border-radius: 18px;
    background: var(--builder-panel);
    box-shadow: var(--builder-shadow);
    overflow: hidden;
}

.focus-admin__builder-panel[b-w2xtgex1j5] {
    display: grid;
    grid-template-rows: auto auto auto 1fr;
    padding: 0;
}

.focus-admin__builder-panel--side[b-w2xtgex1j5] {
    position: sticky;
    top: 12px;
    padding: 0;
}

.focus-admin__panel-head[b-w2xtgex1j5] {
    margin: 0;
    padding: 16px;
    border-bottom: 1px solid var(--builder-line);
    background: #fff;
}

.focus-admin__panel-head h3[b-w2xtgex1j5],
.focus-admin__bank-head h3[b-w2xtgex1j5] {
    margin: 0;
    font-size: 1rem;
    font-weight: 950;
    letter-spacing: 0;
}

.focus-admin__panel-head p[b-w2xtgex1j5],
.focus-admin__bank-head p[b-w2xtgex1j5] {
    margin: 4px 0 0;
    color: var(--builder-muted);
    font-size: 0.77rem;
    line-height: 1.45;
}

.focus-admin__form-row[b-w2xtgex1j5],
.focus-admin__summary-line[b-w2xtgex1j5] {
    margin: 0;
    padding: 12px 16px;
    border-bottom: 1px solid var(--builder-line);
    background: #fbfdfc;
}

.focus-admin__slot-detail[b-w2xtgex1j5] {
    min-height: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
}

.focus-admin__slot-detail-head[b-w2xtgex1j5] {
    padding: 12px 16px;
    background: #fbfdfc;
    border-bottom: 1px solid var(--builder-line);
}

.focus-admin__selected-list[b-w2xtgex1j5] {
    max-height: none;
    min-height: 0;
    padding: 10px 12px;
    background: #fff;
}

.focus-admin__selected-card[b-w2xtgex1j5] {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 10px;
    margin-bottom: 8px;
    padding: 10px;
    border: 1px solid var(--builder-line);
    border-radius: 14px;
    box-shadow: none;
}

.focus-admin__selected-card:hover[b-w2xtgex1j5] {
    transform: none;
    box-shadow: none;
}

.focus-admin__part-badge[b-w2xtgex1j5] {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: #f3f6f5;
    color: #087b6f;
}

.focus-admin__bank-panel[b-w2xtgex1j5] {
    display: grid;
    grid-template-rows: auto auto auto 1fr;
    max-height: calc(100vh - 210px);
}

.focus-admin__bank-head[b-w2xtgex1j5] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 42%);
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--builder-line);
    background: #fff;
}

.focus-admin__part-tabs[b-w2xtgex1j5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--builder-line);
    background: #fbfdfc;
}

.focus-admin__part-tab[b-w2xtgex1j5] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--builder-line);
    border-radius: 15px;
    background: #fff;
    color: var(--builder-ink);
    text-align: left;
    cursor: pointer;
}

.focus-admin__part-tab--active[b-w2xtgex1j5] {
    border-color: #a7ded5;
    background: var(--builder-green-soft);
    box-shadow: inset 0 -3px 0 var(--builder-green);
}

.focus-admin__part-tab span[b-w2xtgex1j5] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

.focus-admin__part-tab strong[b-w2xtgex1j5] {
    font-size: 0.84rem;
    font-weight: 950;
}

.focus-admin__part-tab small[b-w2xtgex1j5] {
    color: var(--builder-muted);
    font-size: 0.72rem;
    font-weight: 850;
}

.focus-admin__part-tab i[b-w2xtgex1j5] {
    display: block;
    height: 7px;
    max-width: 100%;
    border-radius: 999px;
    background: var(--builder-green-2);
}

.focus-admin__bank-tools[b-w2xtgex1j5] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--builder-line);
    background: #fff;
    overflow-x: auto;
}

.focus-admin__facet[b-w2xtgex1j5] {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid var(--builder-line);
    border-radius: 999px;
    background: #fff;
    color: #41524f;
    font-size: 0.75rem;
    font-weight: 850;
    white-space: nowrap;
}

.focus-admin__facet--active[b-w2xtgex1j5] {
    background: var(--builder-green);
    border-color: var(--builder-green);
    color: #fff;
}

.focus-admin__bank-body[b-w2xtgex1j5] {
    min-height: 0;
    overflow: auto;
    padding: 0;
    background: #fff;
}

.focus-admin__bank-panel .focus-admin__part-list[b-w2xtgex1j5] {
    gap: 0;
}

.focus-admin__bank-panel .focus-admin__part-section[b-w2xtgex1j5] {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.focus-admin__bank-panel .focus-admin__part-section > header[b-w2xtgex1j5] {
    display: none;
}

.focus-admin__bank-panel .focus-admin__catalog[b-w2xtgex1j5] {
    display: grid;
    max-height: none;
    padding: 0;
}

.focus-admin__bank-panel .focus-admin__catalog-row[b-w2xtgex1j5] {
    display: grid;
    grid-template-columns: 44px minmax(320px, 1fr) minmax(130px, 200px);
    gap: 12px;
    align-items: center;
    min-height: 64px;
    padding: 9px 16px;
    border-bottom: 1px solid var(--builder-line);
    border-left: 0;
    border-radius: 0;
    background: #fff;
}

.focus-admin__bank-panel .focus-admin__catalog-row:hover[b-w2xtgex1j5] {
    background: #fbfffd;
}

.focus-admin__bank-panel .focus-admin__catalog-row--selected[b-w2xtgex1j5] {
    background: #effffb;
}

.focus-admin__bank-panel .focus-admin__catalog-row input[type="checkbox"][b-w2xtgex1j5] {
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: var(--builder-green);
}

.focus-admin__bank-panel .focus-admin__catalog-main[b-w2xtgex1j5] {
    gap: 4px;
}

.focus-admin__bank-panel .focus-admin__catalog-main strong[b-w2xtgex1j5] {
    display: block;
    font-size: 0.84rem;
    font-weight: 950;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.focus-admin__bank-panel .focus-admin__catalog-main small[b-w2xtgex1j5] {
    display: block;
    color: var(--builder-muted);
    font-size: 0.78rem;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.focus-admin__bank-panel .focus-admin__catalog-meta[b-w2xtgex1j5] {
    align-items: flex-end;
}

.focus-admin__bank-panel .focus-admin__catalog-meta b[b-w2xtgex1j5] {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: #e9f9f5;
}

.focus-admin__bank-panel .focus-admin__limit-hint[b-w2xtgex1j5] {
    color: var(--builder-red) !important;
    background: var(--builder-red-soft) !important;
}

.focus-admin__forecast-console[b-w2xtgex1j5] {
    border: 1px solid rgba(15, 95, 80, 0.18);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 247, 239, 0.92));
    box-shadow: 0 18px 45px rgba(17, 39, 35, 0.08);
    padding: 18px;
    margin: 18px 0;
}

.focus-admin__forecast-head[b-w2xtgex1j5] {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(42, 58, 54, 0.12);
}

.focus-admin__forecast-head span[b-w2xtgex1j5] {
    display: inline-flex;
    color: #6d7a76;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.focus-admin__forecast-head h3[b-w2xtgex1j5] {
    margin: 6px 0 6px;
    color: #10251f;
    font-size: 1.24rem;
    font-weight: 900;
}

.focus-admin__forecast-head p[b-w2xtgex1j5] {
    margin: 0;
    color: #65736f;
    max-width: 760px;
}

.focus-admin__forecast-date[b-w2xtgex1j5] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(205, 106, 60, 0.24);
    border-radius: 14px;
    padding: 10px 12px;
    color: #9a542e;
    background: #fff7ea;
    white-space: nowrap;
}

.focus-admin__forecast-date strong[b-w2xtgex1j5] {
    font-size: 0.92rem;
}

.focus-admin__forecast-grid[b-w2xtgex1j5] {
    display: grid;
    grid-template-columns: minmax(320px, 0.8fr) minmax(460px, 1.2fr);
    gap: 16px;
    padding-top: 16px;
}

.focus-admin__forecast-editor[b-w2xtgex1j5],
.focus-admin__forecast-preview[b-w2xtgex1j5] {
    border: 1px solid rgba(42, 58, 54, 0.12);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.86);
    padding: 14px;
}

.focus-admin__forecast-editor label[b-w2xtgex1j5] {
    display: block;
    color: #44534f;
    font-weight: 850;
    margin-bottom: 8px;
}

.focus-admin__forecast-input[b-w2xtgex1j5] {
    width: 100%;
    min-height: 260px;
    resize: vertical;
    border: 1px solid rgba(42, 58, 54, 0.18);
    border-radius: 14px;
    padding: 14px;
    color: #172c26;
    background: #fffcf6;
    line-height: 1.55;
    outline: none;
}

.focus-admin__forecast-input:focus[b-w2xtgex1j5] {
    border-color: rgba(15, 95, 80, 0.5);
    box-shadow: 0 0 0 4px rgba(15, 95, 80, 0.1);
}

.focus-admin__forecast-actions[b-w2xtgex1j5] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.focus-admin__forecast-note[b-w2xtgex1j5] {
    margin-top: 12px;
    border-radius: 12px;
    padding: 10px 12px;
    color: #0f5f50;
    background: rgba(15, 95, 80, 0.08);
    font-weight: 750;
}

.focus-admin__forecast-stats[b-w2xtgex1j5] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.focus-admin__forecast-stats span[b-w2xtgex1j5] {
    display: grid;
    gap: 2px;
    border: 1px solid rgba(42, 58, 54, 0.12);
    border-radius: 12px;
    padding: 10px;
    color: #65736f;
    background: #fffaf1;
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
}

.focus-admin__forecast-stats strong[b-w2xtgex1j5] {
    color: #122720;
    font-size: 1.32rem;
}

.focus-admin__forecast-skills[b-w2xtgex1j5] {
    display: grid;
    gap: 12px;
    max-height: 560px;
    overflow: auto;
    padding-right: 4px;
}

.focus-admin__forecast-skill[b-w2xtgex1j5] {
    border: 1px solid rgba(42, 58, 54, 0.12);
    border-radius: 14px;
    background: #fffdf8;
    overflow: hidden;
}

.focus-admin__forecast-skill > header[b-w2xtgex1j5] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(42, 58, 54, 0.1);
}

.focus-admin__forecast-skill > header div[b-w2xtgex1j5] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #10251f;
    font-size: 1rem;
}

.focus-admin__forecast-skill section[b-w2xtgex1j5] {
    padding: 12px 14px 14px;
}

.focus-admin__forecast-skill h4[b-w2xtgex1j5] {
    margin: 0 0 8px;
    color: #6c7774;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.focus-admin__forecast-topics[b-w2xtgex1j5] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.focus-admin__forecast-topic[b-w2xtgex1j5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(214, 153, 73, 0.42);
    border-radius: 999px;
    padding: 7px 10px;
    color: #122720;
    background: #fffaf1;
    font-size: 0.84rem;
    font-weight: 800;
}

.focus-admin__forecast-topic.new[b-w2xtgex1j5] {
    border-color: rgba(25, 153, 124, 0.35);
    background: #eafaf5;
}

.focus-admin__forecast-topic.match[b-w2xtgex1j5] {
    border-color: rgba(75, 128, 235, 0.3);
    background: #eef5ff;
}

.focus-admin__forecast-topic.low[b-w2xtgex1j5] {
    border-color: rgba(42, 58, 54, 0.14);
    color: #6d7773;
    background: #f5f2eb;
}

.focus-admin__forecast-topic b[b-w2xtgex1j5],
.focus-admin__forecast-badge[b-w2xtgex1j5] {
    border-radius: 999px;
    padding: 4px 7px;
    color: #9a542e;
    background: #fff0d4;
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
}

.focus-admin__forecast-badge--new[b-w2xtgex1j5] {
    color: #087963;
    background: #d9f7ed;
}

.focus-admin__forecast-badge--match[b-w2xtgex1j5] {
    color: #255bb3;
    background: #e0ecff;
}

.focus-admin__forecast-badge--backup[b-w2xtgex1j5] {
    color: #7b5635;
    background: #f5eadb;
}

.focus-admin__forecast-badge--low[b-w2xtgex1j5] {
    color: #697570;
    background: #eeeae2;
}

@media (max-width: 1400px) {
    .focus-admin__builder-grid[b-w2xtgex1j5] {
        grid-template-columns: 350px minmax(0, 1fr);
        padding: 14px;
        gap: 12px;
    }
}

@media (max-width: 980px) {
    .focus-admin[b-w2xtgex1j5] {
        margin: 0;
    }

    .focus-admin__builder-grid[b-w2xtgex1j5] {
        grid-template-columns: 1fr;
    }

    .focus-admin__forecast-grid[b-w2xtgex1j5] {
        grid-template-columns: 1fr;
    }

    .focus-admin__forecast-stats[b-w2xtgex1j5] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .focus-admin__bank-panel[b-w2xtgex1j5] {
        max-height: none;
    }
}

/* Theme legacy white admin controls without changing intentional white switch knobs. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .focus-admin[b-w2xtgex1j5] {
        --focus-card-shadow: 0 12px 32px rgba(0, 0, 0, 0.24);
        --focus-card-border: var(--border-default, rgba(255,255,255,0.14));
        --focus-soft-border: var(--border-subtle, rgba(255,255,255,0.08));
    }

    :root:not([data-theme="light"]) .focus-admin :is(
        .focus-admin__stat-card,
        .focus-admin__format-pill,
        .focus-admin__layout-choice,
        .focus-admin__slot-detail,
        .focus-admin__slot-detail-state,
        .focus-admin__selected-group,
        .focus-admin__selected-group-stats span,
        .focus-admin__selected-card,
        .focus-admin__slot-detail-table th,
        .focus-admin__part-mode-card,
        .focus-admin__detail-remove,
        .focus-admin__quota,
        .focus-admin__bank-panel .focus-admin__part-section,
        .focus-admin__bank-panel .focus-admin__catalog,
        .focus-admin__mini-btn--ghost,
        .focus-admin__modal,
        .focus-admin__modal-close,
        .focus-admin__question-card,
        .focus-admin__custom > .focus-admin__filters .filter-chip,
        .focus-admin__slot-chip,
        .focus-admin__panel-head,
        .focus-admin__selected-list,
        .focus-admin__bank-head,
        .focus-admin__part-tab,
        .focus-admin__bank-tools,
        .focus-admin__facet,
        .focus-admin__bank-body,
        .focus-admin__bank-panel .focus-admin__catalog-row
    )[b-w2xtgex1j5] {
        background: var(--bg-surface, #1D211E);
        border-color: var(--border-subtle, rgba(255,255,255,0.08));
    }

    :root:not([data-theme="light"]) .focus-admin .focus-admin__mini-btn--save[b-w2xtgex1j5] {
        color: #07120f;
    }
}

[data-theme="dark"] .focus-admin[b-w2xtgex1j5] {
    --focus-card-shadow: 0 12px 32px rgba(0, 0, 0, 0.24);
    --focus-card-border: var(--border-default, rgba(255,255,255,0.14));
    --focus-soft-border: var(--border-subtle, rgba(255,255,255,0.08));
}

[data-theme="dark"] .focus-admin :is(
    .focus-admin__stat-card,
    .focus-admin__format-pill,
    .focus-admin__layout-choice,
    .focus-admin__slot-detail,
    .focus-admin__slot-detail-state,
    .focus-admin__selected-group,
    .focus-admin__selected-group-stats span,
    .focus-admin__selected-card,
    .focus-admin__slot-detail-table th,
    .focus-admin__part-mode-card,
    .focus-admin__detail-remove,
    .focus-admin__quota,
    .focus-admin__bank-panel .focus-admin__part-section,
    .focus-admin__bank-panel .focus-admin__catalog,
    .focus-admin__mini-btn--ghost,
    .focus-admin__modal,
    .focus-admin__modal-close,
    .focus-admin__question-card,
    .focus-admin__custom > .focus-admin__filters .filter-chip,
    .focus-admin__slot-chip,
    .focus-admin__panel-head,
    .focus-admin__selected-list,
    .focus-admin__bank-head,
    .focus-admin__part-tab,
    .focus-admin__bank-tools,
    .focus-admin__facet,
    .focus-admin__bank-body,
    .focus-admin__bank-panel .focus-admin__catalog-row
)[b-w2xtgex1j5] {
    background: var(--bg-surface, #1D211E);
    border-color: var(--border-subtle, rgba(255,255,255,0.08));
}

[data-theme="dark"] .focus-admin .focus-admin__mini-btn--save[b-w2xtgex1j5] {
    color: #07120f;
}
/* _content/AptisWeb/Components/Pages/Admin/Tabs/IssueReportsTab.razor.rz.scp.css */
.issue-admin[b-xmbjsvtj10] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sr-only[b-xmbjsvtj10] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.issue-admin__header[b-xmbjsvtj10],
.issue-admin__toolbar[b-xmbjsvtj10],
.issue-admin__card[b-xmbjsvtj10] {
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

.issue-admin__header[b-xmbjsvtj10] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    background:
        radial-gradient(260px 160px at 0 0, rgba(186, 117, 23, 0.12), transparent 72%),
        var(--bg-surface, #fff);
}

.issue-admin__header h2[b-xmbjsvtj10] {
    margin: 0;
    color: var(--text-primary, #1a1a18);
    font-size: 1.32rem;
    font-weight: 800;
}

.issue-admin__header p[b-xmbjsvtj10] {
    margin: 0.3rem 0 0;
    color: var(--text-secondary, #5f5e5a);
    font-size: 0.88rem;
}

.issue-admin__stats[b-xmbjsvtj10] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.issue-admin__stat[b-xmbjsvtj10] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: 12px;
    background: var(--bg-surface, #fff);
    color: var(--text-secondary, #5f5e5a);
    font-size: 0.84rem;
    font-weight: 650;
}

.issue-admin__stat strong[b-xmbjsvtj10] {
    color: var(--text-primary, #1a1a18);
    font-size: 1.35rem;
}

.issue-admin__stat--new[b-xmbjsvtj10] { border-left: 4px solid #ba7517; }
.issue-admin__stat--triaged[b-xmbjsvtj10] { border-left: 4px solid #185fa5; }
.issue-admin__stat--resolved[b-xmbjsvtj10] { border-left: 4px solid #639922; }

.issue-admin__toolbar[b-xmbjsvtj10] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px 190px;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
}

.issue-admin__search[b-xmbjsvtj10] {
    position: relative;
    display: flex;
    align-items: center;
}

.issue-admin__search i[b-xmbjsvtj10] {
    position: absolute;
    left: 12px;
    color: var(--text-tertiary, #888780);
}

.issue-admin__search input[b-xmbjsvtj10],
.issue-admin__select[b-xmbjsvtj10],
.issue-admin__note textarea[b-xmbjsvtj10],
.issue-admin__reply-composer textarea[b-xmbjsvtj10] {
    width: 100%;
    border: 1px solid var(--border-default, rgba(0, 0, 0, 0.15));
    border-radius: 10px;
    background: var(--bg-base, #fafaf7);
    color: var(--text-primary, #1a1a18);
    font: inherit;
}

.issue-admin__search input[b-xmbjsvtj10] {
    padding: 0.58rem 0.9rem 0.58rem 2.25rem;
}

.issue-admin__select[b-xmbjsvtj10] {
    padding: 0.58rem 0.75rem;
    cursor: pointer;
}

.issue-admin__search input:focus[b-xmbjsvtj10],
.issue-admin__select:focus[b-xmbjsvtj10],
.issue-admin__note textarea:focus[b-xmbjsvtj10],
.issue-admin__reply-composer textarea:focus[b-xmbjsvtj10] {
    outline: none;
    border-color: var(--brand-primary, #085041);
    box-shadow: 0 0 0 3px rgba(15, 110, 86, 0.15);
}

.issue-admin__btn[b-xmbjsvtj10] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.58rem 1rem;
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: 10px;
    background: var(--bg-surface, #fff);
    color: var(--text-primary, #1a1a18);
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
}

.issue-admin__btn:disabled[b-xmbjsvtj10] {
    cursor: not-allowed;
    opacity: 0.65;
}

.issue-admin__btn:focus-visible[b-xmbjsvtj10],
.issue-admin__conversation-link:focus-visible[b-xmbjsvtj10] {
    outline: 3px solid rgba(15, 118, 110, 0.28);
    outline-offset: 2px;
}

.issue-admin__btn--primary[b-xmbjsvtj10],
.issue-admin__btn--save[b-xmbjsvtj10] {
    border-color: var(--brand-primary, #085041);
    background: var(--brand-primary, #085041);
    color: #fff;
}

.issue-admin__btn--reply[b-xmbjsvtj10] {
    border-color: #0f766e;
    background: #0f766e;
    color: #fff;
}

.issue-admin__btn--reply:not(:disabled):hover[b-xmbjsvtj10] {
    border-color: #115e59;
    background: #115e59;
}

.issue-admin__notice[b-xmbjsvtj10] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1rem;
    border-radius: 10px;
    background: var(--c-green-bg, #eaf3de);
    color: var(--c-green-fg, #3b6d11);
    font-size: 0.9rem;
    font-weight: 650;
}

.issue-admin__notice--error[b-xmbjsvtj10] {
    background: var(--danger-bg-token, #fcebeb);
    color: var(--danger-token, #a32d2d);
}

.issue-admin__empty[b-xmbjsvtj10] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    padding: 2.5rem 1rem;
    border: 1px dashed var(--border-default, rgba(0, 0, 0, 0.15));
    border-radius: 14px;
    background: var(--bg-surface, #fff);
    color: var(--text-secondary, #5f5e5a);
}

.issue-admin__empty i[b-xmbjsvtj10] {
    font-size: 1.8rem;
}

.issue-admin__list[b-xmbjsvtj10] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.issue-admin__card[b-xmbjsvtj10] {
    padding: 1.15rem 1.2rem;
    border-left: 4px solid #ba7517;
}

.issue-admin__card--triaged[b-xmbjsvtj10] { border-left-color: #185fa5; }
.issue-admin__card--resolved[b-xmbjsvtj10] { border-left-color: #639922; }
.issue-admin__card--closed[b-xmbjsvtj10] { border-left-color: #5f5e5a; opacity: 0.88; }

.issue-admin__card-header[b-xmbjsvtj10],
.issue-admin__links[b-xmbjsvtj10] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.issue-admin__title h3[b-xmbjsvtj10] {
    margin: 0;
    color: var(--text-primary, #1a1a18);
    font-size: 1.05rem;
}

.issue-admin__meta[b-xmbjsvtj10],
.issue-admin__links[b-xmbjsvtj10] {
    flex-wrap: wrap;
    color: var(--text-secondary, #5f5e5a);
    font-size: 0.82rem;
}

.issue-admin__meta[b-xmbjsvtj10] {
    display: flex;
    gap: 0.35rem 0.85rem;
    margin-top: 0.42rem;
}

.issue-admin__meta span[b-xmbjsvtj10],
.issue-admin__links span[b-xmbjsvtj10],
.issue-admin__page-link[b-xmbjsvtj10] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.issue-admin__status[b-xmbjsvtj10] {
    flex-shrink: 0;
    padding: 0.34rem 0.75rem;
    border-radius: 999px;
    background: #faeeda;
    color: #8a520d;
    font-size: 0.78rem;
    font-weight: 750;
}

.issue-admin__status--triaged[b-xmbjsvtj10] { background: #e6f1fb; color: #185fa5; }
.issue-admin__status--resolved[b-xmbjsvtj10] { background: #eaf3de; color: #3b6d11; }
.issue-admin__status--closed[b-xmbjsvtj10] { background: #f1efe8; color: #5f5e5a; }

.issue-admin__context[b-xmbjsvtj10] {
    margin-top: 0.8rem;
    color: var(--text-secondary, #5f5e5a);
    font-size: 0.84rem;
    font-weight: 700;
}

.issue-admin__description[b-xmbjsvtj10] {
    margin-top: 0.5rem;
    padding: 0.8rem 0.9rem;
    border-radius: 10px;
    background: var(--bg-base, #fafaf7);
    color: var(--text-primary, #1a1a18);
    line-height: 1.55;
    white-space: pre-line;
}

.issue-admin__images[b-xmbjsvtj10] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.65rem;
    margin-top: 0.8rem;
}

.issue-admin__images img[b-xmbjsvtj10] {
    display: block;
    width: 100%;
    height: 110px;
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: 9px;
    object-fit: cover;
}

.issue-admin__links[b-xmbjsvtj10] {
    justify-content: flex-start;
    margin-top: 0.8rem;
    gap: 0.45rem 1rem;
}

.issue-admin__page-link[b-xmbjsvtj10] {
    color: var(--brand-primary, #085041);
    font-weight: 750;
    text-decoration: none;
}

.issue-admin__copy-link[b-xmbjsvtj10] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.18rem 0.65rem;
    border: 1.5px solid var(--brand-primary, #085041);
    border-radius: 6px;
    background: transparent;
    color: var(--brand-primary, #085041);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.issue-admin__copy-link:hover[b-xmbjsvtj10] {
    background: var(--brand-primary, #085041);
    color: #fff;
}

.issue-admin__reply[b-xmbjsvtj10] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 0.9rem;
    border: 1px solid rgba(15, 118, 110, 0.22);
    border-radius: 12px;
    background:
        linear-gradient(135deg, rgba(15, 118, 110, 0.07), rgba(15, 118, 110, 0.02)),
        var(--bg-surface, #fff);
}

.issue-admin__reply-heading[b-xmbjsvtj10],
.issue-admin__reply-title[b-xmbjsvtj10],
.issue-admin__reply-footer[b-xmbjsvtj10],
.issue-admin__conversation-link[b-xmbjsvtj10] {
    display: flex;
    align-items: center;
}

.issue-admin__reply-heading[b-xmbjsvtj10],
.issue-admin__reply-footer[b-xmbjsvtj10] {
    justify-content: space-between;
    gap: 1rem;
}

.issue-admin__reply-title[b-xmbjsvtj10] {
    min-width: 0;
    gap: 0.65rem;
}

.issue-admin__reply-icon[b-xmbjsvtj10] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(15, 118, 110, 0.13);
    color: var(--brand-primary, #0f766e);
}

.issue-admin__reply-title h4[b-xmbjsvtj10],
.issue-admin__reply-title p[b-xmbjsvtj10] {
    margin: 0;
}

.issue-admin__reply-title h4[b-xmbjsvtj10] {
    color: var(--text-primary, #1a1a18);
    font-size: 0.92rem;
    font-weight: 800;
}

.issue-admin__reply-title p[b-xmbjsvtj10] {
    margin-top: 0.18rem;
    color: var(--text-secondary, #5f5e5a);
    font-size: 0.78rem;
}

.issue-admin__conversation-link[b-xmbjsvtj10] {
    flex-shrink: 0;
    gap: 0.35rem;
    padding: 0.42rem 0.65rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #0f766e;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 750;
    cursor: pointer;
}

.issue-admin__conversation-link:not(:disabled):hover[b-xmbjsvtj10] {
    background: rgba(15, 118, 110, 0.1);
}

.issue-admin__conversation-link:disabled[b-xmbjsvtj10] {
    cursor: not-allowed;
    opacity: 0.65;
}

.issue-admin__reply-composer[b-xmbjsvtj10] {
    display: block;
}

.issue-admin__reply-composer textarea[b-xmbjsvtj10] {
    display: block;
    min-height: 78px;
    padding: 0.68rem 0.75rem;
    background: var(--bg-surface, #fff);
    line-height: 1.5;
    resize: vertical;
}

.issue-admin__reply-footer > span[b-xmbjsvtj10] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-secondary, #5f5e5a);
    font-size: 0.77rem;
}

.issue-admin__manage[b-xmbjsvtj10] {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr) auto;
    align-items: end;
    gap: 0.75rem;
    margin-top: 0.95rem;
    padding-top: 0.9rem;
    border-top: 1px dashed var(--border-subtle, rgba(0, 0, 0, 0.1));
}

.issue-admin__manage label[b-xmbjsvtj10] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    color: var(--text-secondary, #5f5e5a);
    font-size: 0.8rem;
    font-weight: 700;
}

.issue-admin__note small[b-xmbjsvtj10] {
    margin-left: 0.25rem;
    color: #a32d2d;
    font-size: 0.72rem;
    font-weight: 650;
}

.issue-admin__note textarea[b-xmbjsvtj10] {
    min-height: 72px;
    padding: 0.58rem 0.7rem;
    resize: vertical;
}

.spin[b-xmbjsvtj10] {
    display: inline-block;
    animation: issue-admin-spin-b-xmbjsvtj10 1s linear infinite;
}

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

@media (max-width: 1000px) {
    .issue-admin__stats[b-xmbjsvtj10] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .issue-admin__toolbar[b-xmbjsvtj10],
    .issue-admin__manage[b-xmbjsvtj10] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .issue-admin__header[b-xmbjsvtj10],
    .issue-admin__card-header[b-xmbjsvtj10],
    .issue-admin__reply-heading[b-xmbjsvtj10],
    .issue-admin__reply-footer[b-xmbjsvtj10] {
        align-items: stretch;
        flex-direction: column;
    }

    .issue-admin__stats[b-xmbjsvtj10] {
        grid-template-columns: 1fr;
    }

    .issue-admin__status[b-xmbjsvtj10] {
        align-self: flex-start;
    }

    .issue-admin__btn[b-xmbjsvtj10] {
        width: 100%;
    }

    .issue-admin__conversation-link[b-xmbjsvtj10] {
        align-self: flex-start;
    }
}
/* _content/AptisWeb/Components/Pages/Admin/Tabs/PaymentsReconciliationTab.razor.rz.scp.css */
.payments-recon[b-vq7zf7gd7n] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.payments-recon__summary[b-vq7zf7gd7n] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.recon-stat[b-vq7zf7gd7n] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 86px;
    padding: 16px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.recon-stat__icon[b-vq7zf7gd7n] {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 8px;
    color: #063f35;
    background: #dff7ec;
}

.recon-stat span[b-vq7zf7gd7n] {
    display: block;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 700;
}

.recon-stat strong[b-vq7zf7gd7n] {
    display: block;
    margin-top: 5px;
    color: #0f172a;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0;
}

.recon-stat small[b-vq7zf7gd7n] {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 700;
}

.recon-stat--today .recon-stat__icon[b-vq7zf7gd7n] {
    color: #075985;
    background: #e0f2fe;
}

.recon-stat--review .recon-stat__icon[b-vq7zf7gd7n] {
    color: #92400e;
    background: #fef3c7;
}

.recon-stat--unmatched .recon-stat__icon[b-vq7zf7gd7n] {
    color: #991b1b;
    background: #fee2e2;
}

.recon-stat--applied .recon-stat__icon[b-vq7zf7gd7n] {
    color: #166534;
    background: #dcfce7;
}

.payments-recon__toolbar[b-vq7zf7gd7n] {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 190px 150px 150px auto auto auto;
    gap: 10px;
    align-items: center;
    padding: 14px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 8px;
    background: #ffffff;
}

.recon-search[b-vq7zf7gd7n] {
    position: relative;
    display: flex;
    align-items: center;
}

.recon-search[b-vq7zf7gd7n]  svg {
    position: absolute;
    left: 12px;
    width: 17px;
    height: 17px;
    color: #64748b;
}

.recon-search input[b-vq7zf7gd7n],
.recon-select[b-vq7zf7gd7n],
.recon-date[b-vq7zf7gd7n] {
    width: 100%;
    min-height: 40px;
    border: 1px solid #d7dee8;
    border-radius: 8px;
    background: #ffffff;
    color: #0f172a;
    font: inherit;
    font-size: 0.88rem;
}

.recon-search input[b-vq7zf7gd7n] {
    padding: 8px 12px 8px 38px;
}

.recon-select[b-vq7zf7gd7n],
.recon-date[b-vq7zf7gd7n] {
    padding: 8px 10px;
}

.recon-btn[b-vq7zf7gd7n],
.recon-icon-btn[b-vq7zf7gd7n] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    border: 1px solid #d7dee8;
    border-radius: 8px;
    background: #ffffff;
    color: #0f172a;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.recon-btn[b-vq7zf7gd7n] {
    padding: 8px 12px;
    white-space: nowrap;
}

.recon-btn:hover:not(:disabled)[b-vq7zf7gd7n],
.recon-icon-btn:hover:not(:disabled)[b-vq7zf7gd7n] {
    border-color: #0f766e;
    color: #0f766e;
}

.recon-btn:disabled[b-vq7zf7gd7n],
.recon-icon-btn:disabled[b-vq7zf7gd7n] {
    cursor: not-allowed;
    opacity: 0.58;
}

.recon-btn--primary[b-vq7zf7gd7n] {
    border-color: #0f766e;
    background: #0f766e;
    color: #ffffff;
}

.recon-btn--primary:hover:not(:disabled)[b-vq7zf7gd7n] {
    background: #115e59;
    color: #ffffff;
}

.recon-btn--ghost[b-vq7zf7gd7n] {
    background: #f8fafc;
}

.recon-alert[b-vq7zf7gd7n] {
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 700;
}

.recon-alert--danger[b-vq7zf7gd7n] {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

.recon-alert--success[b-vq7zf7gd7n] {
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

.recon-alert--warning[b-vq7zf7gd7n] {
    border: 1px solid #fde68a;
    background: #fffbeb;
    color: #92400e;
}

.payments-recon__panel[b-vq7zf7gd7n] {
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.07);
}

.payments-recon__panel-head[b-vq7zf7gd7n] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px;
    border-bottom: 1px solid #edf2f7;
}

.payments-recon__panel-head h2[b-vq7zf7gd7n] {
    margin: 0;
    color: #0f172a;
    font-size: 1.15rem;
    letter-spacing: 0;
}

.payments-recon__panel-head p[b-vq7zf7gd7n] {
    margin: 5px 0 0;
    color: #64748b;
    font-size: 0.88rem;
}

.payments-recon__panel-head > span[b-vq7zf7gd7n] {
    flex: 0 0 auto;
    padding: 6px 10px;
    border-radius: 8px;
    background: #f1f5f9;
    color: #334155;
    font-size: 0.82rem;
    font-weight: 800;
}

.recon-table-wrap[b-vq7zf7gd7n] {
    overflow-x: auto;
}

.recon-table[b-vq7zf7gd7n] {
    width: 100%;
    min-width: 1180px;
    border-collapse: separate;
    border-spacing: 0;
}

.recon-table th[b-vq7zf7gd7n],
.recon-table td[b-vq7zf7gd7n] {
    padding: 13px 14px;
    border-bottom: 1px solid #edf2f7;
    vertical-align: top;
    text-align: left;
}

.recon-table th[b-vq7zf7gd7n] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f8fafc;
    color: #475569;
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
}

.recon-account[b-vq7zf7gd7n],
.recon-code[b-vq7zf7gd7n],
.recon-plan[b-vq7zf7gd7n],
.recon-ref[b-vq7zf7gd7n],
.recon-time[b-vq7zf7gd7n] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.recon-account strong[b-vq7zf7gd7n],
.recon-code strong[b-vq7zf7gd7n],
.recon-plan strong[b-vq7zf7gd7n] {
    max-width: 220px;
    overflow: hidden;
    color: #0f172a;
    font-size: 0.88rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recon-account span[b-vq7zf7gd7n],
.recon-code span[b-vq7zf7gd7n],
.recon-plan span[b-vq7zf7gd7n],
.recon-ref span[b-vq7zf7gd7n],
.recon-time span[b-vq7zf7gd7n] {
    max-width: 240px;
    overflow: hidden;
    color: #334155;
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recon-account small[b-vq7zf7gd7n],
.recon-code small[b-vq7zf7gd7n],
.recon-plan small[b-vq7zf7gd7n],
.recon-ref small[b-vq7zf7gd7n],
.recon-time small[b-vq7zf7gd7n],
.recon-reason[b-vq7zf7gd7n] {
    max-width: 260px;
    overflow: hidden;
    color: #64748b;
    font-size: 0.74rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.status-pill[b-vq7zf7gd7n] {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 9px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #334155;
    font-size: 0.76rem;
    font-weight: 800;
    white-space: nowrap;
}

.status-pill--applied[b-vq7zf7gd7n] {
    background: #dcfce7;
    color: #166534;
}

.status-pill--needs-review[b-vq7zf7gd7n] {
    background: #fef3c7;
    color: #92400e;
}

.status-pill--unmatched[b-vq7zf7gd7n] {
    background: #fee2e2;
    color: #991b1b;
}

.status-pill--request[b-vq7zf7gd7n] {
    background: #e0f2fe;
    color: #075985;
}

.recon-actions[b-vq7zf7gd7n] {
    text-align: center;
    white-space: nowrap;
}

.recon-icon-btn[b-vq7zf7gd7n] {
    width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
}

.recon-icon-btn--apply[b-vq7zf7gd7n] {
    border-color: #0f766e;
    background: #ecfdf5;
    color: #0f766e;
}

.recon-muted[b-vq7zf7gd7n] {
    color: #94a3b8;
}

.recon-loading[b-vq7zf7gd7n],
.recon-empty[b-vq7zf7gd7n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 42px;
    color: #64748b;
    text-align: center;
}

.recon-pagination[b-vq7zf7gd7n] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 14px 18px;
    border-top: 1px solid #edf2f7;
}

.recon-pagination span[b-vq7zf7gd7n] {
    color: #475569;
    font-size: 0.86rem;
    font-weight: 700;
}

.recon-modal[b-vq7zf7gd7n] {
    max-width: 620px;
}

.recon-confirm-grid[b-vq7zf7gd7n] {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 10px 14px;
    margin-bottom: 14px;
}

.recon-confirm-grid span[b-vq7zf7gd7n] {
    color: #64748b;
    font-size: 0.84rem;
    font-weight: 700;
}

.recon-confirm-grid strong[b-vq7zf7gd7n] {
    min-width: 0;
    overflow-wrap: anywhere;
    color: #0f172a;
    font-size: 0.9rem;
}

.spin[b-vq7zf7gd7n] {
    animation: recon-spin-b-vq7zf7gd7n 0.9s linear infinite;
}

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

@media (max-width: 1180px) {
    .payments-recon__summary[b-vq7zf7gd7n] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .payments-recon__toolbar[b-vq7zf7gd7n] {
        grid-template-columns: minmax(240px, 1fr) 180px 1fr 1fr;
    }
}

@media (max-width: 760px) {
    .payments-recon__summary[b-vq7zf7gd7n],
    .payments-recon__toolbar[b-vq7zf7gd7n] {
        grid-template-columns: 1fr;
    }

    .payments-recon__panel-head[b-vq7zf7gd7n] {
        flex-direction: column;
    }

    .recon-confirm-grid[b-vq7zf7gd7n] {
        grid-template-columns: 1fr;
    }
}
/* _content/AptisWeb/Components/Pages/Admin/Tabs/QuestionsTab.razor.rz.scp.css */
.questions-section[b-bm5wwrhq9i] {
    background: var(--bg-surface, #FFFFFF);
    border-radius: 14px;
    padding: 1.4rem 1.5rem;
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
}
/* _content/AptisWeb/Components/Pages/Admin/Tabs/ReviewsTab.razor.rz.scp.css */
.reviews-admin[b-noz71ufo3w] {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.reviews-admin__header[b-noz71ufo3w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.1rem 1.25rem;
    background:
        radial-gradient(220px 150px at 0% 0%, rgba(15, 110, 86, 0.08), transparent 72%),
        var(--bg-surface, #FFFFFF);
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

.reviews-admin__header h2[b-noz71ufo3w] {
    margin: 0;
    font-size: 1.32rem;
    font-weight: 800;
    letter-spacing: -0.005em;
    color: var(--text-primary, #1A1A18);
}

.reviews-admin__header p[b-noz71ufo3w] {
    margin: 0.3rem 0 0;
    color: var(--text-secondary, #5F5E5A);
    font-size: 0.88rem;
    font-weight: 500;
}

.reviews-admin__toolbar[b-noz71ufo3w] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 200px auto;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: var(--bg-surface, #FFFFFF);
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

.reviews-admin__search[b-noz71ufo3w] {
    position: relative;
    display: flex;
    align-items: center;
}

.reviews-admin__search i[b-noz71ufo3w] {
    position: absolute;
    left: 12px;
    color: var(--text-tertiary, #888780);
    pointer-events: none;
}

.reviews-admin__search input[b-noz71ufo3w] {
    width: 100%;
    padding: 0.55rem 0.9rem 0.55rem 2.25rem;
    border-radius: 10px;
    border: 1px solid var(--border-default, rgba(0, 0, 0, 0.15));
    background: var(--bg-base, #FAFAF7);
    color: var(--text-primary, #1A1A18);
    font-size: 0.92rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.reviews-admin__search input:focus[b-noz71ufo3w],
.reviews-admin__select:focus[b-noz71ufo3w] {
    outline: none;
    background: var(--bg-surface, #FFFFFF);
    border-color: var(--brand-primary, #085041);
    box-shadow: 0 0 0 3px rgba(15, 110, 86, 0.18);
}

.reviews-admin__select[b-noz71ufo3w] {
    padding: 0.55rem 0.85rem;
    border-radius: 10px;
    border: 1px solid var(--border-default, rgba(0, 0, 0, 0.15));
    background: var(--bg-surface, #FFFFFF);
    color: var(--text-primary, #1A1A18);
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.reviews-admin__btn[b-noz71ufo3w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.55rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    background: var(--bg-surface, #FFFFFF);
    color: var(--text-primary, #1A1A18);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.reviews-admin__btn:hover[b-noz71ufo3w] {
    transform: translateY(-1px);
    background: var(--brand-primary-soft, #E1F5EE);
    border-color: rgba(15, 110, 86, 0.25);
    color: var(--brand-primary, #085041);
}

.reviews-admin__btn--primary[b-noz71ufo3w] {
    background: var(--brand-primary, #085041);
    border-color: var(--brand-primary, #085041);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(8, 80, 65, 0.18);
}

.reviews-admin__btn--primary:hover[b-noz71ufo3w] {
    background: var(--brand-primary-dark, #04342C);
    border-color: var(--brand-primary-dark, #04342C);
    color: #ffffff;
    box-shadow: 0 12px 22px rgba(8, 80, 65, 0.25);
}

.reviews-admin__btn--ghost[b-noz71ufo3w] {
    background: var(--bg-base, #FAFAF7);
}

.reviews-admin__btn--success[b-noz71ufo3w] {
    background: var(--c-green-bg, #EAF3DE);
    border-color: rgba(99, 153, 34, 0.3);
    color: var(--c-green-fg, #639922);
}

.reviews-admin__btn--success:hover[b-noz71ufo3w] {
    background: #DBE8C6;
    border-color: rgba(99, 153, 34, 0.5);
    color: #4F7B1B;
}

.reviews-admin__btn--danger[b-noz71ufo3w] {
    background: var(--bg-surface, #FFFFFF);
    border-color: rgba(163, 45, 45, 0.18);
    color: var(--danger-token, #A32D2D);
}

.reviews-admin__btn--danger:hover[b-noz71ufo3w] {
    background: var(--danger-bg-token, #FCEBEB);
    border-color: rgba(163, 45, 45, 0.4);
    color: #8a2424;
}

.reviews-admin__notice[b-noz71ufo3w] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 1rem;
    border-radius: 10px;
    background: var(--c-blue-bg, #E6F1FB);
    color: var(--c-blue-fg, #185FA5);
    font-size: 0.9rem;
    font-weight: 600;
}

.reviews-admin__empty[b-noz71ufo3w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    border: 1px dashed var(--border-default, rgba(0, 0, 0, 0.15));
    border-radius: 14px;
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--text-secondary, #5F5E5A);
    background: var(--bg-surface, #FFFFFF);
}

.reviews-admin__empty i[b-noz71ufo3w] {
    font-size: 2rem;
    color: var(--text-tertiary, #888780);
    opacity: 0.7;
}

.reviews-admin__list[b-noz71ufo3w] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.reviews-admin__card[b-noz71ufo3w] {
    padding: 1.2rem 1.25rem;
    border-radius: 14px;
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-left: 4px solid var(--c-teal-fg, #0F6E56);
    background: var(--bg-surface, #FFFFFF);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease;
}

.reviews-admin__card--pending[b-noz71ufo3w] {
    border-left-color: var(--c-amber-fg, #BA7517);
}

.reviews-admin__card--approved[b-noz71ufo3w] {
    border-left-color: var(--c-green-fg, #639922);
}

.reviews-admin__card:hover[b-noz71ufo3w] {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(15, 110, 86, 0.1);
}

.reviews-admin__meta[b-noz71ufo3w] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.reviews-admin__title-block[b-noz71ufo3w] {
    min-width: 0;
}

.reviews-admin__title-block h3[b-noz71ufo3w] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--text-primary, #1A1A18);
}

.reviews-admin__sub[b-noz71ufo3w] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
    margin-top: 0.4rem;
    color: var(--text-secondary, #5F5E5A);
    font-size: 0.84rem;
}

.reviews-admin__sub span[b-noz71ufo3w] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.reviews-admin__sub i[b-noz71ufo3w] {
    color: var(--text-tertiary, #888780);
}

.reviews-admin__status[b-noz71ufo3w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 110px;
    padding: 0.32rem 0.85rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    flex-shrink: 0;
    white-space: nowrap;
}

.reviews-admin__status--approved[b-noz71ufo3w] {
    background: var(--c-green-bg, #EAF3DE);
    color: var(--c-green-fg, #639922);
}

.reviews-admin__status--pending[b-noz71ufo3w] {
    background: var(--c-amber-bg, #FAEEDA);
    color: var(--c-amber-fg, #BA7517);
}

.reviews-admin__description[b-noz71ufo3w] {
    margin: 0.85rem 0 0;
    color: var(--text-secondary, #5F5E5A);
    white-space: pre-line;
    line-height: 1.5;
    font-size: 0.92rem;
}

.reviews-admin__actions[b-noz71ufo3w] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--border-subtle, rgba(0, 0, 0, 0.08));
}

.spin[b-noz71ufo3w] {
    display: inline-block;
    animation: reviews-admin-spin-b-noz71ufo3w 1s linear infinite;
}

@keyframes reviews-admin-spin-b-noz71ufo3w {
    from { transform: rotate(0); }
    to { transform: rotate(360deg); }
}

@media (max-width: 900px) {
    .reviews-admin__toolbar[b-noz71ufo3w] {
        grid-template-columns: 1fr;
    }

    .reviews-admin__meta[b-noz71ufo3w] {
        flex-direction: column;
    }

    .reviews-admin__status[b-noz71ufo3w] {
        align-self: flex-start;
    }
}

@media (max-width: 768px) {
    .reviews-admin[b-noz71ufo3w] {
        gap: 0.85rem;
    }

    .reviews-admin__header[b-noz71ufo3w] {
        padding: 1rem 1.1rem;
    }

    .reviews-admin__header h2[b-noz71ufo3w] {
        font-size: 1.18rem;
    }

    .reviews-admin__toolbar[b-noz71ufo3w] {
        padding: 0.75rem;
        gap: 0.5rem;
    }

    .reviews-admin__btn[b-noz71ufo3w] {
        width: 100%;
        justify-content: center;
    }

    .reviews-admin__card[b-noz71ufo3w] {
        padding: 1rem;
    }

    .reviews-admin__title-block h3[b-noz71ufo3w] {
        font-size: 1rem;
    }

    .reviews-admin__actions[b-noz71ufo3w] {
        gap: 0.4rem;
    }

    .reviews-admin__actions .reviews-admin__btn[b-noz71ufo3w] {
        flex: 1 1 calc(50% - 0.2rem);
        width: auto;
        min-height: 40px;
        font-size: 0.82rem;
    }
}
/* _content/AptisWeb/Components/Pages/Admin/Tabs/SettingsTab.razor.rz.scp.css */
.settings-section[b-msyo30th0n] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.settings-section h2[b-msyo30th0n] {
    margin: 0;
    font-size: 1.32rem;
    font-weight: 800;
    letter-spacing: -0.005em;
    color: var(--text-primary, #1A1A18);
}

.settings-grid[b-msyo30th0n] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
}

.settings-card[b-msyo30th0n] {
    background: var(--bg-surface, #FFFFFF);
    border-radius: 14px;
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.25s ease;
}

.settings-card:hover[b-msyo30th0n] {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(15, 110, 86, 0.08);
}

.settings-header[b-msyo30th0n] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    background:
        radial-gradient(220px 150px at 0% 0%, rgba(15, 110, 86, 0.08), transparent 72%),
        var(--bg-base, #FAFAF7);
    color: var(--text-primary, #1A1A18);
    font-size: 0.98rem;
    font-weight: 800;
    letter-spacing: -0.005em;
    border-radius: 14px 14px 0 0;
}

.settings-header i[b-msyo30th0n] {
    color: var(--brand-primary, #085041);
    font-size: 1.05rem;
}

.settings-body[b-msyo30th0n] {
    padding: 1rem 1.2rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.form-group label[b-msyo30th0n] {
    font-weight: 500;
    color: var(--text-primary, #1A1A18);
    margin-bottom: 0.4rem;
    display: block;
    font-size: 0.9rem;
}

.form-control[b-msyo30th0n] {
    border-radius: 8px;
    border: 1px solid var(--border-default, rgba(0, 0, 0, 0.15));
    background: var(--bg-surface, #FFFFFF);
    color: var(--text-primary, #1A1A18);
    padding: 0.55rem 0.8rem;
    font-size: 0.92rem;
    width: 100%;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.form-control:focus[b-msyo30th0n] {
    outline: none;
    border-color: var(--brand-primary, #085041);
    box-shadow: 0 0 0 3px rgba(15, 110, 86, 0.18);
}

.checkbox-label[b-msyo30th0n] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.92rem;
    color: var(--text-primary, #1A1A18);
    cursor: pointer;
}

.checkbox-label input[type="checkbox"][b-msyo30th0n] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--brand-primary, #085041);
}

.btn-primary[b-msyo30th0n],
.btn-secondary[b-msyo30th0n],
.btn-danger[b-msyo30th0n] {
    border: none;
    border-radius: 10px;
    padding: 0.58rem 1.05rem;
    font-weight: 500;
    font-size: 0.92rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.btn-primary[b-msyo30th0n] {
    background: var(--brand-primary, #085041);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(8, 80, 65, 0.18);
}

.btn-primary:hover[b-msyo30th0n] {
    background: var(--brand-primary-dark, #04342C);
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(8, 80, 65, 0.28);
}

.btn-secondary[b-msyo30th0n] {
    background: var(--bg-muted, #F1EFE8);
    color: var(--text-primary, #1A1A18);
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
}

.btn-secondary:hover[b-msyo30th0n] {
    background: #E8E5DD;
    border-color: var(--border-default, rgba(0, 0, 0, 0.15));
}

.btn-danger[b-msyo30th0n] {
    background: var(--danger-token, #A32D2D);
    color: #ffffff;
}

.btn-danger:hover[b-msyo30th0n] {
    background: #8a2424;
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(163, 45, 45, 0.22);
}

.maintenance-actions .btn-secondary[b-msyo30th0n],
.maintenance-actions .btn-danger[b-msyo30th0n] {
    justify-content: center;
}

.maintenance-mode-panel[b-msyo30th0n] {
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: 12px;
    background: var(--bg-base, #FAFAF7);
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 0.9rem;
}

.maintenance-mode-panel.is-enabled[b-msyo30th0n] {
    border-color: rgba(163, 45, 45, 0.28);
    background: #fff6f4;
}

.maintenance-mode-top[b-msyo30th0n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.maintenance-mode-status[b-msyo30th0n] {
    border-radius: 999px;
    background: var(--bg-muted, #F1EFE8);
    color: var(--text-primary, #1A1A18);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.35rem 0.65rem;
}

.maintenance-mode-panel.is-enabled .maintenance-mode-status[b-msyo30th0n] {
    background: var(--danger-bg-token, #FCEBEB);
    color: var(--danger-token, #A32D2D);
}

.maintenance-switch[b-msyo30th0n] {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.maintenance-switch input[b-msyo30th0n] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.maintenance-switch span[b-msyo30th0n] {
    position: relative;
    width: 48px;
    height: 26px;
    border-radius: 999px;
    background: #d8d6ce;
    transition: background 0.18s ease;
}

.maintenance-switch span[b-msyo30th0n]::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    transition: transform 0.18s ease;
}

.maintenance-switch input:checked + span[b-msyo30th0n] {
    background: var(--danger-token, #A32D2D);
}

.maintenance-switch input:checked + span[b-msyo30th0n]::after {
    transform: translateX(22px);
}

.maintenance-mode-feedback[b-msyo30th0n] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    border-radius: 10px;
    font-size: 0.86rem;
    font-weight: 500;
    padding: 0.7rem 0.8rem;
}

.maintenance-mode-feedback.is-success[b-msyo30th0n] {
    background: var(--c-green-bg, #EAF3DE);
    color: var(--c-green-fg, #639922);
}

.maintenance-mode-feedback.is-error[b-msyo30th0n] {
    background: var(--danger-bg-token, #FCEBEB);
    color: var(--danger-token, #A32D2D);
}

.info-list[b-msyo30th0n] {
    display: grid;
    gap: 0.5rem;
}

.info-item[b-msyo30th0n] {
    display: flex;
    justify-content: space-between;
    color: var(--text-secondary, #5F5E5A);
    font-size: 0.9rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
}

.info-item:last-child[b-msyo30th0n] {
    border-bottom: none;
}

.info-label[b-msyo30th0n] {
    font-weight: 500;
    color: var(--text-primary, #1A1A18);
}

.settings-card--wide[b-msyo30th0n] {
    grid-column: 1 / -1;
}

.dashboard-updates-card__subtitle[b-msyo30th0n] {
    margin: 0;
    color: var(--text-secondary, #5F5E5A);
    line-height: 1.6;
    font-size: 0.92rem;
}

.dashboard-updates-feedback[b-msyo30th0n] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border-radius: 10px;
    padding: 0.8rem 1rem;
    font-weight: 500;
    font-size: 0.9rem;
}

.dashboard-updates-feedback.is-success[b-msyo30th0n] {
    background: var(--c-green-bg, #EAF3DE);
    color: var(--c-green-fg, #639922);
}

.dashboard-updates-feedback.is-error[b-msyo30th0n] {
    background: var(--danger-bg-token, #FCEBEB);
    color: var(--danger-token, #A32D2D);
}

.dashboard-updates-admin[b-msyo30th0n] {
    display: grid;
    grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.dashboard-updates-admin__form[b-msyo30th0n],
.dashboard-updates-admin__list[b-msyo30th0n] {
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: 14px;
    background: var(--bg-base, #FAFAF7);
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.dashboard-updates-admin__title[b-msyo30th0n] {
    font-size: 0.98rem;
    font-weight: 500;
    color: var(--text-primary, #1A1A18);
}

.dashboard-updates-form-grid[b-msyo30th0n] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.dashboard-updates-form-grid__full[b-msyo30th0n] {
    grid-column: 1 / -1;
}

.dashboard-updates-admin__actions[b-msyo30th0n] {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
}

.dashboard-updates-empty[b-msyo30th0n] {
    min-height: 180px;
    border: 1px dashed var(--border-default, rgba(0, 0, 0, 0.15));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    color: var(--text-secondary, #5F5E5A);
    background: var(--bg-surface, #FFFFFF);
}

.dashboard-updates-list[b-msyo30th0n] {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    max-height: 540px;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.dashboard-updates-list__item[b-msyo30th0n] {
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: 12px;
    padding: 1rem;
    background: var(--bg-surface, #FFFFFF);
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    transition: border-color 0.2s ease, box-shadow 0.25s ease;
}

.dashboard-updates-list__item:hover[b-msyo30th0n] {
    border-color: rgba(8, 80, 65, 0.25);
    box-shadow: 0 8px 18px rgba(15, 110, 86, 0.08);
}

.dashboard-updates-list__top[b-msyo30th0n] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.dashboard-updates-list__date[b-msyo30th0n] {
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brand-primary, #085041);
}

.dashboard-updates-list__summary[b-msyo30th0n] {
    margin-top: 0.3rem;
    color: var(--text-primary, #1A1A18);
    line-height: 1.6;
    font-size: 0.92rem;
}

.dashboard-updates-list__state[b-msyo30th0n] {
    flex-shrink: 0;
    border-radius: 999px;
    padding: 0.32rem 0.75rem;
    font-size: 0.76rem;
    font-weight: 500;
}

.dashboard-updates-list__state.is-active[b-msyo30th0n] {
    background: var(--c-teal-bg, #E1F5EE);
    color: var(--c-teal-fg, #0F6E56);
}

.dashboard-updates-list__state.is-inactive[b-msyo30th0n] {
    background: var(--bg-muted, #F1EFE8);
    color: var(--text-secondary, #5F5E5A);
}

.dashboard-updates-list__meta[b-msyo30th0n] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 0.85rem;
    color: var(--text-secondary, #5F5E5A);
    font-size: 0.86rem;
}

.dashboard-updates-list__meta a[b-msyo30th0n] {
    color: var(--brand-primary, #085041);
    font-weight: 500;
    text-decoration: none;
}

.dashboard-updates-list__meta a:hover[b-msyo30th0n] {
    text-decoration: underline;
}

.dashboard-updates-list__actions[b-msyo30th0n] {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
}

@media (max-width: 768px) {
    .settings-grid[b-msyo30th0n] {
        grid-template-columns: 1fr;
    }

    .dashboard-updates-admin[b-msyo30th0n] {
        grid-template-columns: 1fr;
    }

    .dashboard-updates-form-grid[b-msyo30th0n] {
        grid-template-columns: 1fr;
    }

    .dashboard-updates-form-grid__full[b-msyo30th0n] {
        grid-column: auto;
    }

    .dashboard-updates-admin__actions[b-msyo30th0n],
    .dashboard-updates-list__actions[b-msyo30th0n] {
        flex-direction: column;
    }

    .dashboard-updates-list__top[b-msyo30th0n] {
        flex-direction: column;
    }
}
/* _content/AptisWeb/Components/Pages/Admin/Tabs/StudentsTab.razor.rz.scp.css */
.students-section[b-rbc95g3qx9] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@keyframes students-enter-b-rbc95g3qx9 {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.students-stats[b-rbc95g3qx9] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.stat-tile[b-rbc95g3qx9] {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-muted, #F1EFE8);
    border: var(--border-hairline, 0.5px) solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: var(--radius-card, 12px);
    box-shadow: none;
    position: relative;
    overflow: hidden;
    transition: border-color var(--motion-fast, 150ms) var(--ease-out, ease),
                transform var(--motion-fast, 150ms) var(--ease-out, ease),
                box-shadow var(--motion-fast, 150ms) var(--ease-out, ease);
}

.stat-tile[b-rbc95g3qx9]::before {
    content: none;
}

.stat-tile:hover[b-rbc95g3qx9] {
    transform: translateY(-2px);
    border-color: var(--border-default, rgba(0, 0, 0, 0.15));
    box-shadow: var(--shadow-hover, 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06));
}

.stat-tile[b-rbc95g3qx9]::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--tile-accent, #0F6E56);
    border-radius: 4px 0 0 4px;
}

.stat-tile__icon[b-rbc95g3qx9] {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--tile-bg, #E1F5EE);
    color: var(--tile-accent, #0F6E56);
    font-size: 1.15rem;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.stat-tile:hover .stat-tile__icon[b-rbc95g3qx9] {
    transform: scale(1.1) rotate(-5deg);
}

.stat-tile__body[b-rbc95g3qx9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.stat-tile__label[b-rbc95g3qx9] {
    color: var(--text-tertiary, #888780);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.stat-tile__value[b-rbc95g3qx9] {
    color: var(--text-primary, #1A1A18);
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.2;
}

.stat-tile--total[b-rbc95g3qx9] { --tile-bg: #E1F5EE; --tile-accent: #0F6E56; }
.stat-tile--active[b-rbc95g3qx9] { --tile-bg: #EAF3DE; --tile-accent: #5A8A1E; }
.stat-tile--trial[b-rbc95g3qx9] { --tile-bg: #EEEDFE; --tile-accent: #534AB7; }
.stat-tile--expired[b-rbc95g3qx9] { --tile-bg: #FAEEDA; --tile-accent: #BA7517; }

.section-header[b-rbc95g3qx9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 16px 20px;
    background: var(--bg-surface, #FFFFFF);
    border: var(--border-hairline, 0.5px) solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: var(--radius-card, 12px);
    box-shadow: none;
}

.section-header:hover[b-rbc95g3qx9] {
    box-shadow: none;
}

.section-header__title[b-rbc95g3qx9] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.section-header__sub[b-rbc95g3qx9] {
    margin: 0;
    color: var(--text-secondary, #5F5E5A);
    font-size: 0.84rem;
    line-height: 1.4;
}

.header-actions[b-rbc95g3qx9] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.section-header h2[b-rbc95g3qx9] {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary, #1A1A18);
    letter-spacing: -0.01em;
}

.scope-toolbar[b-rbc95g3qx9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 16px;
    background: var(--bg-surface, #FFFFFF);
    border: var(--border-hairline, 0.5px) solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: var(--radius-card, 12px);
}

.scope-toolbar__controls[b-rbc95g3qx9] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.scope-toolbar__summary[b-rbc95g3qx9] {
    margin: 0;
    color: var(--text-secondary, #5F5E5A);
    font-size: 0.88rem;
}

.scope-date-field[b-rbc95g3qx9] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--text-secondary, #5F5E5A);
    font-size: 0.76rem;
    font-weight: 600;
}

.scope-date-field input[b-rbc95g3qx9] {
    min-width: 168px;
    padding: 0.55rem 0.8rem;
    border-radius: 10px;
    border: 1px solid var(--border-default, rgba(0, 0, 0, 0.15));
    background: var(--bg-base, #FAFAF7);
    color: var(--text-primary, #1A1A18);
}

.scope-date-field input:disabled[b-rbc95g3qx9] {
    opacity: 0.6;
    cursor: not-allowed;
}

.scope-chip[b-rbc95g3qx9] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.6rem 0.95rem;
    border-radius: 999px;
    border: 1px solid rgba(15, 110, 86, 0.16);
    background: var(--brand-primary-soft, #E1F5EE);
    color: var(--brand-primary, #085041);
    cursor: pointer;
    font-weight: 700;
    transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.scope-chip:hover[b-rbc95g3qx9] {
    transform: translateY(-1px);
    background: #C8EBDD;
    border-color: rgba(15, 110, 86, 0.26);
}

.scope-chip:disabled[b-rbc95g3qx9] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.scope-chip--active[b-rbc95g3qx9] {
    background: var(--brand-primary, #085041);
    color: #ffffff;
    border-color: var(--brand-primary, #085041);
}

.filter-strip[b-rbc95g3qx9] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 0;
}

.filter-chip[b-rbc95g3qx9] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: var(--border-hairline, 0.5px) solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: var(--radius-pill, 999px);
    background: var(--bg-surface, #FFFFFF);
    color: var(--text-secondary, #5F5E5A);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--motion-fast, 150ms) var(--ease-out, ease),
                border-color var(--motion-fast, 150ms) var(--ease-out, ease),
                color var(--motion-fast, 150ms) var(--ease-out, ease);
}

.filter-chip:hover[b-rbc95g3qx9] {
    color: var(--brand-primary, #085041);
    border-color: var(--border-default, rgba(0, 0, 0, 0.15));
    background: var(--bg-base, #FAFAF7);
}

.filter-chip:active[b-rbc95g3qx9] {
    transform: scale(0.97);
}

.filter-chip--active[b-rbc95g3qx9] {
    color: var(--text-on-brand, #ffffff);
    background: var(--brand-primary, #085041);
    border-color: var(--brand-primary, #085041);
    box-shadow: none;
}

.filter-chip--active:hover[b-rbc95g3qx9] {
    color: #ffffff;
    background: var(--brand-primary-dark, #04342C);
    border-color: var(--brand-primary-dark, #04342C);
}

.filter-chip__count[b-rbc95g3qx9] {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    padding: 0 6px;
    height: 20px;
    border-radius: 999px;
    background: var(--bg-muted, #F1EFE8);
    color: var(--text-secondary, #5F5E5A);
    font-size: 0.74rem;
    font-weight: 800;
}

.filter-chip--active .filter-chip__count[b-rbc95g3qx9] {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

.search-box[b-rbc95g3qx9] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-box[b-rbc95g3qx9]  svg {
    position: absolute;
    left: 12px;
    color: var(--text-tertiary, #888780);
}

.search-box input[b-rbc95g3qx9] {
    padding: 0.55rem 0.9rem 0.55rem 2.25rem;
    border-radius: 10px;
    border: 1px solid var(--border-default, rgba(0, 0, 0, 0.15));
    background: var(--bg-base, #FAFAF7);
    font-size: 0.92rem;
    min-width: 240px;
    color: var(--text-primary, #1A1A18);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-box input:focus[b-rbc95g3qx9] {
    outline: none;
    background: var(--bg-surface, #FFFFFF);
    border-color: var(--brand-primary, #085041);
    box-shadow: 0 0 0 3px rgba(15, 110, 86, 0.18), 0 4px 12px rgba(15, 110, 86, 0.08);
    transform: translateY(-1px);
}

.search-box input[b-rbc95g3qx9]::placeholder {
    color: var(--text-tertiary, #888780);
    transition: color 0.2s ease;
}

.search-box input:focus[b-rbc95g3qx9]::placeholder {
    color: transparent;
}

.table-container[b-rbc95g3qx9] {
    background: var(--bg-surface, #FFFFFF);
    border-radius: var(--radius-card, 12px);
    border: var(--border-hairline, 0.5px) solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    box-shadow: none;
}

.table-container:hover[b-rbc95g3qx9] {
    box-shadow: none;
}

.account-cell[b-rbc95g3qx9] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.account-cell__email[b-rbc95g3qx9] {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary, #1A1A18);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 240px;
}

.account-cell__username[b-rbc95g3qx9] {
    font-size: 0.76rem;
    color: var(--text-tertiary, #888780);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 240px;
}

.cell-id[b-rbc95g3qx9] {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.45rem;
    border-radius: 6px;
    background: var(--bg-muted, #F1EFE8);
    color: var(--text-secondary, #5F5E5A);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    width: fit-content;
}

.user-cell[b-rbc95g3qx9] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    max-width: 100%;
}

.user-cell__meta[b-rbc95g3qx9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.user-avatar[b-rbc95g3qx9] {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05), 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.data-table tbody tr:hover .user-avatar[b-rbc95g3qx9] {
    transform: scale(1.08);
}

.user-cell__name[b-rbc95g3qx9] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: var(--text-primary, #1A1A18);
    font-size: 0.92rem;
    max-width: 220px;
}

.user-cell__phone[b-rbc95g3qx9] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.76rem;
    color: var(--text-tertiary, #888780);
    white-space: nowrap;
}

.user-cell__phone[b-rbc95g3qx9]  svg {
    font-size: 0.72rem;
}

.role-cell[b-rbc95g3qx9] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

.badge-role--teacher[b-rbc95g3qx9] {
    background: var(--c-purple-bg, #EEEDFE);
    color: var(--c-purple-fg, #534AB7);
}

.data-table[b-rbc95g3qx9] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 880px;
    table-layout: fixed;
}

.data-table thead th[b-rbc95g3qx9] {
    background: var(--bg-base, #FAFAF7);
    color: var(--text-tertiary, #888780);
    text-align: left;
    padding: 0.7rem 0.9rem;
    font-size: 11px;
    letter-spacing: 0.6px;
    font-weight: 500;
    text-transform: uppercase;
    border-bottom: var(--border-hairline, 0.5px) solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    white-space: nowrap;
}

.data-table tbody td[b-rbc95g3qx9] {
    padding: 0.7rem 0.9rem;
    border-bottom: var(--border-hairline, 0.5px) solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    color: var(--text-primary, #1A1A18);
    font-size: 14px;
    vertical-align: middle;
    background: var(--bg-surface, #FFFFFF);
}

.data-table tbody tr[b-rbc95g3qx9] {
    transition: background var(--motion-fast, 150ms) var(--ease-out, ease);
}

.data-table tbody tr:hover td[b-rbc95g3qx9] {
    background: var(--bg-base, #FAFAF7);
}

.data-table tbody tr:last-child td[b-rbc95g3qx9] {
    border-bottom: none;
}

.selection-cell[b-rbc95g3qx9] {
    width: 44px;
    text-align: center;
    padding-left: 0.75rem !important;
    padding-right: 0.5rem !important;
}

/* Column sizing for the compact students table */
.data-table--compact .col-account[b-rbc95g3qx9] { width: 24%; min-width: 220px; }
.data-table--compact .col-name[b-rbc95g3qx9] { width: 22%; min-width: 200px; }
.data-table--compact .col-role[b-rbc95g3qx9] { width: 12%; min-width: 110px; }
.data-table--compact .col-plan[b-rbc95g3qx9] { width: 22%; min-width: 220px; }
.data-table--compact .col-created[b-rbc95g3qx9] { width: 9%; min-width: 100px; }
.data-table--compact .col-actions[b-rbc95g3qx9] { width: 11%; min-width: 184px; }

/* Sticky action column so it never gets hidden by horizontal scroll */
.sticky-actions[b-rbc95g3qx9] {
    position: sticky;
    right: 0;
    z-index: 2;
    background: var(--bg-surface, #FFFFFF);
    box-shadow: -8px 0 14px -10px rgba(15, 23, 42, 0.18);
}

.data-table thead th.sticky-actions[b-rbc95g3qx9] {
    background: var(--bg-base, #FAFAF7);
    z-index: 3;
}

.data-table tbody tr:hover td.sticky-actions[b-rbc95g3qx9] {
    background: var(--bg-base, #FAFAF7);
}

.table-checkbox[b-rbc95g3qx9] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--brand-primary, #085041);
}

.badge-role[b-rbc95g3qx9] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: var(--bg-muted, #F1EFE8);
    color: var(--text-secondary, #5F5E5A);
    font-size: 0.78rem;
    font-weight: 500;
}

.model-pill[b-rbc95g3qx9] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: var(--c-blue-bg, #E6F1FB);
    color: var(--c-blue-fg, #185FA5);
    font-size: 0.78rem;
    font-weight: 500;
}

.plan-cell[b-rbc95g3qx9] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.plan-row[b-rbc95g3qx9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.plan-row__date[b-rbc95g3qx9] {
    font-size: 0.74rem;
    color: var(--text-tertiary, #888780);
    white-space: nowrap;
}

.plan-pill[b-rbc95g3qx9] {
    width: fit-content;
    max-width: 100%;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.plan-pill--active[b-rbc95g3qx9] {
    background: var(--c-green-bg, #EAF3DE);
    color: var(--c-green-fg, #639922);
}

.plan-pill--inactive[b-rbc95g3qx9] {
    background: var(--bg-muted, #F1EFE8);
    color: var(--text-secondary, #5F5E5A);
}

.plan-pill--video.plan-pill--active[b-rbc95g3qx9] {
    background: var(--c-purple-bg, #EEEDFE);
    color: var(--c-purple-fg, #534AB7);
}

.plan-key[b-rbc95g3qx9] {
    font-size: 0.76rem;
    color: var(--text-tertiary, #888780);
    word-break: break-word;
}

.created-date[b-rbc95g3qx9] {
    font-size: 0.84rem;
    color: var(--text-secondary, #5F5E5A);
    white-space: nowrap;
}

.action-buttons-inline[b-rbc95g3qx9] {
    display: flex;
    gap: 0.3rem;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: nowrap;
}

.btn-icon-sm[b-rbc95g3qx9] {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-input, 8px);
    border: var(--border-hairline, 0.5px) solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    background: var(--bg-surface, #FFFFFF);
    color: var(--text-secondary, #5F5E5A);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--motion-fast, 150ms) var(--ease-out, ease),
                color var(--motion-fast, 150ms) var(--ease-out, ease),
                border-color var(--motion-fast, 150ms) var(--ease-out, ease);
    flex: 0 0 30px;
    font-size: 0.85rem;
}

.btn-icon-sm:hover[b-rbc95g3qx9] {
    background: var(--bg-base, #FAFAF7);
    color: var(--text-primary, #1A1A18);
    border-color: var(--border-default, rgba(0, 0, 0, 0.15));
}

.btn-icon-sm:active[b-rbc95g3qx9] {
    transform: scale(0.93);
}

.btn-icon-sm.danger:hover[b-rbc95g3qx9] {
    background: var(--danger-bg-token, #FCEBEB);
    color: var(--danger-token, #A32D2D);
    border-color: rgba(163, 45, 45, 0.15);
}

.btn-icon-sm.warning:hover[b-rbc95g3qx9] {
    background: var(--warning-bg-token, #FAEEDA);
    color: var(--warning-token, #854F0B);
    border-color: rgba(133, 79, 11, 0.15);
}

.table-footer[b-rbc95g3qx9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 0.85rem 1.1rem;
    color: var(--text-secondary, #5F5E5A);
    font-size: 0.88rem;
    border-top: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
}

.table-footer__pager[b-rbc95g3qx9] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.table-footer .btn-link[b-rbc95g3qx9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--brand-primary-soft, #E1F5EE);
    border: 1px solid rgba(15, 110, 86, 0.18);
    color: var(--brand-primary, #085041);
    cursor: pointer;
    font-weight: 700;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    transition: background 0.18s ease, transform 0.18s ease;
}

.table-footer .btn-link:hover[b-rbc95g3qx9] {
    transform: translateY(-1px);
    background: #C8EBDD;
}

.table-footer .btn-link:disabled[b-rbc95g3qx9] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.empty-state .btn-link[b-rbc95g3qx9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 0.45rem 0.95rem;
    border: 1px solid rgba(15, 110, 86, 0.2);
    border-radius: 999px;
    background: var(--brand-primary-soft, #E1F5EE);
    color: var(--brand-primary, #085041);
    font-weight: 700;
    cursor: pointer;
}

.empty-state[b-rbc95g3qx9] {
    background: var(--bg-surface, #FFFFFF);
    border-radius: 14px;
    padding: 2.5rem 1.5rem;
    text-align: center;
    border: 1px dashed var(--border-default, rgba(0, 0, 0, 0.15));
    color: var(--text-secondary, #5F5E5A);
}

.empty-state[b-rbc95g3qx9]  svg {
    font-size: 2.5rem;
    color: var(--text-tertiary, #888780);
    margin-bottom: 0.75rem;
    opacity: 0.6;
}

.btn-bulk-delete[b-rbc95g3qx9] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.btn-bulk-delete:disabled[b-rbc95g3qx9] {
    background: var(--bg-muted, #F1EFE8);
    color: var(--text-tertiary, #888780);
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    opacity: 1;
    box-shadow: none;
}

/* ─── Modal ─── */
.modal-overlay[b-rbc95g3qx9] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: students-modal-fade-b-rbc95g3qx9 200ms ease-out;
    isolation: isolate;
}

.modal-content[b-rbc95g3qx9] {
    position: relative;
    z-index: 1;
    background: var(--bg-surface, #FFFFFF);
    border-radius: 16px;
    box-shadow: var(--shadow-modal, 0 8px 32px rgba(0,0,0,0.16));
    width: 90%;
    max-width: 480px;
    overflow: hidden;
    border: var(--border-hairline, 0.5px) solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    animation: students-modal-rise-b-rbc95g3qx9 250ms var(--ease-out, ease);
}

.modal-header[b-rbc95g3qx9],
.modal-footer[b-rbc95g3qx9] {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.modal-header[b-rbc95g3qx9] {
    background: var(--bg-base, #FAFAF7);
}

.modal-header h3[b-rbc95g3qx9] {
    margin: 0;
    color: var(--text-primary, #1A1A18);
    font-size: 1.1rem;
    font-weight: 500;
}

.btn-close[b-rbc95g3qx9] {
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    border-radius: 50%;
    color: var(--text-secondary, #5F5E5A);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

.btn-close:hover[b-rbc95g3qx9] {
    background: var(--bg-muted, #F1EFE8);
    color: var(--text-primary, #1A1A18);
}

.modal-footer[b-rbc95g3qx9] {
    border-bottom: none;
    border-top: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    justify-content: flex-end;
    background: var(--bg-base, #FAFAF7);
}

.modal-body[b-rbc95g3qx9] {
    padding: 1.1rem 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    color: var(--text-secondary, #5F5E5A);
}

.modal-body p[b-rbc95g3qx9] {
    margin: 0;
}

.bulk-delete-preview[b-rbc95g3qx9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.bulk-delete-pill[b-rbc95g3qx9] {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: var(--c-teal-bg, #E1F5EE);
    border: 1px solid rgba(15, 110, 86, 0.18);
    color: var(--c-teal-fg, #0F6E56);
    font-size: 0.84rem;
    font-weight: 500;
}

.bulk-delete-more[b-rbc95g3qx9] {
    color: var(--text-secondary, #5F5E5A);
    font-size: 0.84rem;
}

.required[b-rbc95g3qx9] {
    color: var(--danger-token, #A32D2D);
}

.form-group[b-rbc95g3qx9] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.form-group label[b-rbc95g3qx9] {
    font-size: 0.88rem;
    color: var(--text-primary, #1A1A18);
    font-weight: 500;
}

.form-control[b-rbc95g3qx9] {
    border: 1px solid var(--border-default, rgba(0, 0, 0, 0.15));
    border-radius: 8px;
    padding: 0.55rem 0.8rem;
    font-size: 0.94rem;
    background: var(--bg-surface, #FFFFFF);
    color: var(--text-primary, #1A1A18);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.form-control:focus[b-rbc95g3qx9] {
    outline: none;
    border-color: var(--brand-primary, #085041);
    box-shadow: 0 0 0 3px rgba(15, 110, 86, 0.18);
}

.btn-primary[b-rbc95g3qx9],
.btn-secondary[b-rbc95g3qx9],
.btn-danger[b-rbc95g3qx9] {
    border-radius: 10px;
    padding: 0.55rem 1.1rem;
    font-size: 0.92rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.btn-primary[b-rbc95g3qx9] {
    background: var(--brand-primary, #085041);
    color: #ffffff;
    box-shadow: none;
}

.btn-primary:hover[b-rbc95g3qx9] {
    background: var(--brand-primary-dark, #04342C);
    transform: translateY(-1px);
    box-shadow: none;
}

.btn-primary:active[b-rbc95g3qx9] {
    transform: translateY(0) scale(0.98);
}

.btn-secondary[b-rbc95g3qx9] {
    background: var(--bg-muted, #F1EFE8);
    color: var(--text-primary, #1A1A18);
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
}

.btn-secondary:hover[b-rbc95g3qx9] {
    background: #E8E5DD;
    border-color: var(--border-default, rgba(0, 0, 0, 0.15));
}

.btn-danger[b-rbc95g3qx9] {
    background: var(--danger-token, #A32D2D);
    color: #ffffff;
}

.btn-danger:hover[b-rbc95g3qx9] {
    background: #8a2424;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(163, 45, 45, 0.25);
}

.btn-danger:active[b-rbc95g3qx9] {
    transform: translateY(0) scale(0.98);
}

.btn-primary:disabled[b-rbc95g3qx9],
.btn-secondary:disabled[b-rbc95g3qx9],
.btn-danger:disabled[b-rbc95g3qx9] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.alert[b-rbc95g3qx9] {
    border-radius: 10px;
    padding: 0.65rem 0.9rem;
    font-size: 0.88rem;
}

.alert-danger[b-rbc95g3qx9] {
    background: var(--danger-bg-token, #FCEBEB);
    color: var(--danger-token, #A32D2D);
    border: 1px solid rgba(163, 45, 45, 0.18);
}

@keyframes students-modal-fade-b-rbc95g3qx9 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes students-modal-rise-b-rbc95g3qx9 {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 1180px) {
    .students-stats[b-rbc95g3qx9] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .section-header[b-rbc95g3qx9] {
        align-items: stretch;
        padding: 0.9rem 1rem;
    }

    .students-stats[b-rbc95g3qx9] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .stat-tile[b-rbc95g3qx9] {
        padding: 10px 12px;
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 10px;
    }

    .stat-tile__icon[b-rbc95g3qx9] {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .stat-tile__value[b-rbc95g3qx9] {
        font-size: 1.25rem;
    }

    .stat-tile__label[b-rbc95g3qx9] {
        font-size: 0.65rem;
    }

    .header-actions[b-rbc95g3qx9] {
        width: 100%;
    }

    .scope-toolbar[b-rbc95g3qx9] {
        padding: 0.9rem 1rem;
        align-items: stretch;
    }

    .scope-toolbar__controls[b-rbc95g3qx9] {
        width: 100%;
    }

    .scope-date-field[b-rbc95g3qx9] {
        width: 100%;
    }

    .scope-date-field input[b-rbc95g3qx9] {
        min-width: 100%;
        width: 100%;
    }

    .search-box[b-rbc95g3qx9] {
        flex: 1 1 100%;
    }

    .search-box input[b-rbc95g3qx9] {
        min-width: 100%;
        width: 100%;
    }

    .filter-chip[b-rbc95g3qx9] {
        font-size: 0.8rem;
        padding: 7px 12px;
    }

    .table-footer[b-rbc95g3qx9] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .table-footer__pager[b-rbc95g3qx9] {
        width: 100%;
        justify-content: space-between;
    }

    /* === Mobile card layout for the students table === */
    .table-container[b-rbc95g3qx9] {
        background: transparent;
        border: none;
        box-shadow: none;
        overflow: visible;
        -webkit-overflow-scrolling: auto;
    }

    .data-table[b-rbc95g3qx9],
    .data-table--compact[b-rbc95g3qx9] {
        min-width: 0;
        table-layout: auto;
    }

    .data-table[b-rbc95g3qx9],
    .data-table thead[b-rbc95g3qx9],
    .data-table tbody[b-rbc95g3qx9],
    .data-table tr[b-rbc95g3qx9],
    .data-table th[b-rbc95g3qx9],
    .data-table td[b-rbc95g3qx9] {
        display: block;
        width: auto;
    }

    .data-table thead[b-rbc95g3qx9] {
        display: none;
    }

    .data-table tbody tr[b-rbc95g3qx9] {
        position: relative;
        margin: 0 0 12px;
        padding: 14px;
        background: var(--bg-surface, #FFFFFF);
        border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
        border-radius: 14px;
        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
        display: grid;
        grid-template-columns: 24px minmax(0, 1fr);
        grid-template-areas:
            "check  name"
            "blank  account"
            "role   role"
            "plan   plan"
            "meta   meta"
            "acts   acts";
        gap: 10px 12px;
        align-items: start;
    }

    .data-table tbody tr:last-child[b-rbc95g3qx9] {
        margin-bottom: 0;
    }

    .data-table tbody tr:hover td[b-rbc95g3qx9],
    .data-table tbody tr:hover td.sticky-actions[b-rbc95g3qx9] {
        background: transparent;
    }

    .data-table tbody td[b-rbc95g3qx9] {
        padding: 0;
        border: none;
        background: transparent;
        font-size: 0.88rem;
        min-width: 0;
    }

    /* Reset desktop compact column widths so the mobile card grid controls sizing.
       Without this, .data-table--compact .col-name (width:22%) leaks in and
       collapses the name cell, wrapping names one character per line. */
    .data-table--compact .col-account[b-rbc95g3qx9],
    .data-table--compact .col-name[b-rbc95g3qx9],
    .data-table--compact .col-role[b-rbc95g3qx9],
    .data-table--compact .col-plan[b-rbc95g3qx9],
    .data-table--compact .col-created[b-rbc95g3qx9],
    .data-table--compact .col-actions[b-rbc95g3qx9] {
        width: auto;
        min-width: 0;
    }

    .data-table tbody td.selection-cell[b-rbc95g3qx9] {
        grid-area: check;
        width: auto;
        padding: 0 !important;
        align-self: center;
    }

    .data-table tbody td.col-name[b-rbc95g3qx9] {
        grid-area: name;
        min-width: 0;
    }

    .data-table tbody td.col-account[b-rbc95g3qx9] {
        grid-area: account;
        border-top: 1px dashed var(--border-subtle, rgba(0, 0, 0, 0.08));
        margin-top: 4px;
        padding-top: 10px;
    }

    .data-table tbody td.col-role[b-rbc95g3qx9] {
        grid-area: role;
    }

    .data-table tbody td.col-plan[b-rbc95g3qx9] {
        grid-area: plan;
    }

    .data-table tbody td.col-created[b-rbc95g3qx9] {
        grid-area: meta;
        color: var(--text-tertiary, #888780);
        font-size: 0.78rem;
    }

    .data-table tbody td.col-created[b-rbc95g3qx9]::before {
        content: "Tạo: ";
        color: var(--text-tertiary, #888780);
        font-weight: 600;
    }

    .data-table tbody td.col-actions[b-rbc95g3qx9],
    .data-table tbody td.col-actions.sticky-actions[b-rbc95g3qx9] {
        grid-area: acts;
        position: static;
        box-shadow: none;
        padding-top: 10px;
        margin-top: 4px;
        border-top: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
        background: transparent;
    }

    .action-buttons-inline[b-rbc95g3qx9] {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .btn-icon-sm[b-rbc95g3qx9] {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        flex: 0 0 36px;
        font-size: 0.95rem;
    }

    .user-cell[b-rbc95g3qx9] {
        display: flex;
        width: 100%;
        gap: 12px;
        align-items: center;
    }

    .user-cell__meta[b-rbc95g3qx9] {
        flex: 1 1 auto;
        min-width: 0;
    }

    .user-avatar[b-rbc95g3qx9] {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        font-size: 0.85rem;
    }

    .user-cell__name[b-rbc95g3qx9] {
        max-width: 100%;
        font-size: 0.95rem;
        white-space: normal;
        word-break: normal;
        overflow-wrap: break-word;
    }

    .user-cell__phone[b-rbc95g3qx9] {
        font-size: 0.78rem;
    }

    .account-cell[b-rbc95g3qx9] {
        gap: 6px;
    }

    .account-cell__email[b-rbc95g3qx9],
    .account-cell__username[b-rbc95g3qx9] {
        max-width: 100%;
        white-space: normal;
        word-break: break-all;
    }

    .role-cell[b-rbc95g3qx9] {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
    }

    .plan-cell[b-rbc95g3qx9] {
        gap: 0.5rem;
    }

    .plan-row[b-rbc95g3qx9] {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
    }
}
/* _content/AptisWeb/Components/Pages/Admin/Tabs/VideoLecturesTab.razor.rz.scp.css */
[b-r340051a9g] .card {
    background: var(--bg-surface, #FFFFFF) !important;
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08)) !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04) !important;
}

[b-r340051a9g] .card-body {
    padding: 1.4rem 1.5rem !important;
}

[b-r340051a9g] .card-body > .d-flex:first-child h2 {
    font-size: 1.32rem;
    font-weight: 800;
    letter-spacing: -0.005em;
    color: var(--text-primary, #1A1A18);
}

[b-r340051a9g] .card-body > .d-flex:first-child p {
    color: var(--text-secondary, #5F5E5A) !important;
    font-size: 0.88rem;
    font-weight: 500;
}

[b-r340051a9g] .card-body .row.g-3 > [class*="col-"] > .border.rounded-4 {
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08)) !important;
    border-radius: 14px !important;
    border-left: 4px solid var(--c-blue-fg, #185FA5) !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
    transition: transform 0.2s ease, box-shadow 0.25s ease;
}

[b-r340051a9g] .card-body .row.g-3 > [class*="col-"] > .border.rounded-4:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(15, 110, 86, 0.08);
}

[b-r340051a9g] .card-body .row.g-3 .fw-bold {
    color: var(--text-primary, #1A1A18);
    font-size: 1rem;
    font-weight: 800 !important;
    letter-spacing: -0.005em;
}

[b-r340051a9g] .badge.text-bg-success {
    background: var(--c-green-bg, #EAF3DE) !important;
    color: var(--c-green-fg, #639922) !important;
    border: 1px solid rgba(99, 153, 34, 0.2) !important;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-radius: 999px;
    padding: 0.32rem 0.7rem;
}

[b-r340051a9g] .badge.text-bg-secondary {
    background: var(--bg-muted, #F1EFE8) !important;
    color: var(--text-secondary, #5F5E5A) !important;
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08)) !important;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-radius: 999px;
    padding: 0.32rem 0.7rem;
}

[b-r340051a9g] .badge.text-bg-light {
    background: var(--brand-primary-soft, #E1F5EE) !important;
    color: var(--brand-primary, #085041) !important;
    border-color: rgba(15, 110, 86, 0.18) !important;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.3rem 0.65rem;
}

[b-r340051a9g] .alert-success {
    background: var(--c-green-bg, #EAF3DE);
    color: var(--c-green-fg, #639922);
    border-color: rgba(99, 153, 34, 0.25);
    border-radius: 10px;
}

[b-r340051a9g] .alert-danger {
    background: var(--danger-bg-token, #FCEBEB);
    color: var(--danger-token, #A32D2D);
    border-color: rgba(163, 45, 45, 0.2);
    border-radius: 10px;
}

[b-r340051a9g] .btn-primary {
    background: var(--brand-primary, #085041) !important;
    border-color: var(--brand-primary, #085041) !important;
    border-radius: 10px;
    font-weight: 700;
    padding: 0.55rem 1.05rem;
    box-shadow: 0 8px 18px rgba(8, 80, 65, 0.18);
    transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

[b-r340051a9g] .btn-primary:hover {
    background: var(--brand-primary-dark, #04342C) !important;
    border-color: var(--brand-primary-dark, #04342C) !important;
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(8, 80, 65, 0.28);
}

[b-r340051a9g] .btn-outline-primary {
    color: var(--brand-primary, #085041) !important;
    border-color: rgba(15, 110, 86, 0.3) !important;
    border-radius: 10px;
    font-weight: 700;
}

[b-r340051a9g] .btn-outline-primary:hover {
    background: var(--brand-primary-soft, #E1F5EE) !important;
    color: var(--brand-primary, #085041) !important;
    border-color: rgba(15, 110, 86, 0.45) !important;
}
/* _content/AptisWeb/Components/Pages/Admin/TestManagement.razor.rz.scp.css */
.tests-admin[b-trd63lpmpg] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
}

.tests-admin__header[b-trd63lpmpg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.1rem 1.25rem;
    background:
        radial-gradient(220px 150px at 0% 0%, rgba(15, 110, 86, 0.1), transparent 72%),
        var(--bg-surface, #FFFFFF);
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

.tests-admin__header h2[b-trd63lpmpg] {
    margin: 0 0 0.3rem;
    font-size: 1.32rem;
    font-weight: 800;
    letter-spacing: -0.005em;
    color: var(--text-primary, #1A1A18);
}

.tests-admin__header p[b-trd63lpmpg] {
    margin: 0;
    color: var(--text-secondary, #5F5E5A);
    font-size: 0.88rem;
}

.tests-admin__header code[b-trd63lpmpg] {
    color: var(--brand-primary, #085041);
    background: var(--brand-primary-soft, #E1F5EE);
    border-radius: 6px;
    padding: 0.1rem 0.4rem;
    font-size: 0.84em;
}

.tests-admin__notice[b-trd63lpmpg] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 1rem;
    border-radius: 10px;
    background: var(--c-blue-bg, #E6F1FB);
    color: var(--c-blue-fg, #185FA5);
    font-size: 0.9rem;
    font-weight: 600;
}

.tests-admin__grid[b-trd63lpmpg] {
    display: grid;
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
    gap: 16px;
}

.tests-admin__panel[b-trd63lpmpg] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px;
    background: var(--bg-surface, #FFFFFF);
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

.tests-admin__panel-head[b-trd63lpmpg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
}

.tests-admin__panel-head h3[b-trd63lpmpg] {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-primary, #1A1A18);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.tests-admin__panel-head > div[b-trd63lpmpg] {
    min-width: 0;
}

.aptis-builder[b-trd63lpmpg] {
    gap: 16px;
}

.aptis-builder__subtitle[b-trd63lpmpg] {
    margin: 0.25rem 0 0;
    color: var(--text-secondary, #5F5E5A);
    font-size: 0.82rem;
    line-height: 1.45;
}

.aptis-builder__form[b-trd63lpmpg] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.aptis-builder__sources[b-trd63lpmpg] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.aptis-builder__skill[b-trd63lpmpg] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: 10px;
    background: var(--bg-base, #FAFAF7);
    min-width: 0;
}

.aptis-builder__skill header[b-trd63lpmpg] {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--border-subtle, rgba(0, 0, 0, 0.08));
}

.aptis-builder__skill strong[b-trd63lpmpg] {
    color: var(--text-primary, #1A1A18);
    font-size: 0.9rem;
    font-weight: 800;
}

.aptis-builder__skill header span[b-trd63lpmpg] {
    color: var(--text-tertiary, #888780);
    font-size: 0.76rem;
    font-weight: 700;
}

.aptis-builder__source-row[b-trd63lpmpg] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.aptis-builder__source-row label[b-trd63lpmpg] {
    color: var(--text-secondary, #5F5E5A);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.aptis-builder__source-row select[b-trd63lpmpg] {
    min-height: 38px;
    font-size: 0.84rem;
}

.aptis-builder__summary[b-trd63lpmpg] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 2px;
}

.aptis-builder__summary span[b-trd63lpmpg] {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0.24rem 0.65rem;
    border-radius: 999px;
    background: var(--brand-primary-soft, #E1F5EE);
    color: var(--brand-primary, #085041);
    font-size: 0.78rem;
    font-weight: 800;
}

.aptis-builder__empty-skill[b-trd63lpmpg] {
    margin: 0;
    color: var(--text-tertiary, #888780);
    font-size: 0.82rem;
    line-height: 1.4;
}

.tests-admin__count[b-trd63lpmpg] {
    display: inline-grid;
    place-items: center;
    min-width: 28px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--bg-muted, #F1EFE8);
    color: var(--text-secondary, #5F5E5A);
    font-size: 0.74rem;
    font-weight: 800;
}

.tests-admin__badge[b-trd63lpmpg] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    background: var(--c-amber-bg, #FAEEDA);
    color: var(--c-amber-fg, #BA7517);
}

/* Form */
.tests-admin__form[b-trd63lpmpg] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
}

.tests-admin__field[b-trd63lpmpg] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.tests-admin__field--full[b-trd63lpmpg] {
    grid-column: 1 / -1;
}

.tests-admin__field label[b-trd63lpmpg] {
    color: var(--text-secondary, #5F5E5A);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tests-admin__input[b-trd63lpmpg] {
    width: 100%;
    padding: 0.55rem 0.85rem;
    border-radius: 10px;
    border: 1px solid var(--border-default, rgba(0, 0, 0, 0.15));
    background: var(--bg-base, #FAFAF7);
    color: var(--text-primary, #1A1A18);
    font-size: 0.92rem;
    font-family: inherit;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.tests-admin__input:focus[b-trd63lpmpg] {
    outline: none;
    background: var(--bg-surface, #FFFFFF);
    border-color: var(--brand-primary, #085041);
    box-shadow: 0 0 0 3px rgba(15, 110, 86, 0.18);
}

textarea.tests-admin__input[b-trd63lpmpg] {
    resize: vertical;
    min-height: 90px;
}

.tests-admin__hint[b-trd63lpmpg] {
    color: var(--text-tertiary, #888780);
    font-size: 0.78rem;
    line-height: 1.4;
}

.tests-admin__hint code[b-trd63lpmpg] {
    background: var(--bg-muted, #F1EFE8);
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    font-size: 0.85em;
}

.tests-admin__toggle[b-trd63lpmpg] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.55rem 0.85rem;
    background: var(--bg-base, #FAFAF7);
    border-radius: 10px;
    font-weight: 600;
    color: var(--text-primary, #1A1A18);
    cursor: pointer;
    user-select: none;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.9rem;
}

.tests-admin__toggle input[b-trd63lpmpg] {
    width: 18px;
    height: 18px;
    accent-color: var(--brand-primary, #085041);
    cursor: pointer;
}

.tests-admin__actions[b-trd63lpmpg] {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    padding-top: 12px;
    border-top: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
}

/* Buttons */
.tests-admin__btn[b-trd63lpmpg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.55rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    background: var(--bg-surface, #FFFFFF);
    color: var(--text-primary, #1A1A18);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.tests-admin__btn:hover:not(:disabled)[b-trd63lpmpg] {
    transform: translateY(-1px);
    background: var(--brand-primary-soft, #E1F5EE);
    border-color: rgba(15, 110, 86, 0.3);
    color: var(--brand-primary, #085041);
}

.tests-admin__btn:disabled[b-trd63lpmpg] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.tests-admin__btn--primary[b-trd63lpmpg] {
    background: var(--brand-primary, #085041);
    border-color: var(--brand-primary, #085041);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(8, 80, 65, 0.18);
}

.tests-admin__btn--primary:hover:not(:disabled)[b-trd63lpmpg] {
    background: var(--brand-primary-dark, #04342C);
    border-color: var(--brand-primary-dark, #04342C);
    color: #ffffff;
    box-shadow: 0 12px 24px rgba(8, 80, 65, 0.28);
}

.tests-admin__btn--ghost[b-trd63lpmpg] {
    background: var(--bg-base, #FAFAF7);
}

.tests-admin__btn--danger[b-trd63lpmpg] {
    background: var(--bg-surface, #FFFFFF);
    border-color: rgba(163, 45, 45, 0.18);
    color: var(--danger-token, #A32D2D);
}

.tests-admin__btn--danger:hover:not(:disabled)[b-trd63lpmpg] {
    background: var(--danger-bg-token, #FCEBEB);
    border-color: rgba(163, 45, 45, 0.4);
    color: #8a2424;
}

.tests-admin__btn--sm[b-trd63lpmpg] {
    padding: 0.4rem 0.8rem;
    font-size: 0.82rem;
}

/* List & cards */
.tests-admin__list[b-trd63lpmpg] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 720px;
    overflow-y: auto;
    padding-right: 4px;
}

.test-card[b-trd63lpmpg] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1rem 1.1rem;
    background: var(--bg-surface, #FFFFFF);
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-left: 4px solid var(--c-teal-fg, #0F6E56);
    border-radius: 12px;
    transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease;
}

.test-card:hover[b-trd63lpmpg] {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(15, 110, 86, 0.1);
}

.test-card--inactive[b-trd63lpmpg] {
    opacity: 0.78;
    border-left-color: var(--text-tertiary, #888780);
}

.test-card--editing[b-trd63lpmpg] {
    border-left-color: var(--c-amber-fg, #BA7517);
    background: rgba(250, 238, 218, 0.35);
}

.test-card__head[b-trd63lpmpg] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.test-card__title-block[b-trd63lpmpg] {
    min-width: 0;
}

.test-card__title-block h4[b-trd63lpmpg] {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-primary, #1A1A18);
    line-height: 1.3;
}

.test-card__title-block p[b-trd63lpmpg] {
    margin: 2px 0 0;
    font-size: 0.82rem;
    color: var(--text-tertiary, #888780);
}

.test-card__status-pills[b-trd63lpmpg] {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.test-pill[b-trd63lpmpg] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    border: 1px solid transparent;
}

.test-pill--type[b-trd63lpmpg] {
    background: var(--c-blue-bg, #E6F1FB);
    color: var(--c-blue-fg, #185FA5);
    border-color: rgba(24, 95, 165, 0.2);
}

.test-pill--inactive[b-trd63lpmpg] {
    background: var(--bg-muted, #F1EFE8);
    color: var(--text-secondary, #5F5E5A);
}

.test-card__desc[b-trd63lpmpg] {
    margin: 0;
    color: var(--text-secondary, #5F5E5A);
    font-size: 0.86rem;
    line-height: 1.5;
}

.test-card__tags[b-trd63lpmpg] {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.test-tag[b-trd63lpmpg] {
    padding: 0.1rem 0.5rem;
    border-radius: 6px;
    background: var(--bg-muted, #F1EFE8);
    color: var(--text-secondary, #5F5E5A);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.74rem;
    font-weight: 600;
}

.test-card__meta[b-trd63lpmpg] {
    display: flex;
    margin: 0;
    gap: 1rem;
    flex-wrap: wrap;
}

.test-card__meta div[b-trd63lpmpg] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.test-card__meta dt[b-trd63lpmpg] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-tertiary, #888780);
}

.test-card__meta dd[b-trd63lpmpg] {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary, #1A1A18);
}

.test-card__counts[b-trd63lpmpg] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--border-subtle, rgba(0, 0, 0, 0.08));
}

.count-pill[b-trd63lpmpg] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 800;
    border: 1px solid transparent;
}

.count-pill--listening[b-trd63lpmpg] { background: var(--c-blue-bg, #E6F1FB); color: var(--c-blue-fg, #185FA5); border-color: rgba(24, 95, 165, 0.18); }
.count-pill--reading[b-trd63lpmpg] { background: var(--c-amber-bg, #FAEEDA); color: var(--c-amber-fg, #BA7517); border-color: rgba(186, 117, 23, 0.2); }
.count-pill--writing[b-trd63lpmpg] { background: var(--c-coral-bg, #FAECE7); color: var(--c-coral-fg, #993C1D); border-color: rgba(153, 60, 29, 0.18); }
.count-pill--speaking[b-trd63lpmpg] { background: var(--c-pink-bg, #FBEAF0); color: var(--c-pink-fg, #993556); border-color: rgba(153, 53, 86, 0.18); }
.count-pill--grammar[b-trd63lpmpg] { background: var(--c-purple-bg, #EEEDFE); color: var(--c-purple-fg, #534AB7); border-color: rgba(83, 74, 183, 0.18); }

.test-card__actions[b-trd63lpmpg] {
    display: flex;
    gap: 0.4rem;
    justify-content: flex-end;
}

.tests-admin__loading[b-trd63lpmpg] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.55rem;
    padding: 2rem 1rem;
    color: var(--text-secondary, #5F5E5A);
    font-weight: 600;
}

.tests-admin__empty[b-trd63lpmpg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 2.5rem 1.5rem;
    border: 1px dashed var(--border-default, rgba(0, 0, 0, 0.15));
    border-radius: 14px;
    text-align: center;
    color: var(--text-secondary, #5F5E5A);
}

.tests-admin__empty i[b-trd63lpmpg] {
    font-size: 2rem;
    color: var(--text-tertiary, #888780);
    opacity: 0.7;
    margin-bottom: 0.25rem;
}

.tests-admin__empty strong[b-trd63lpmpg] {
    font-size: 1rem;
    color: var(--text-primary, #1A1A18);
}

.spin[b-trd63lpmpg] {
    display: inline-block;
    animation: tests-admin-spin-b-trd63lpmpg 1s linear infinite;
}

@keyframes tests-admin-spin-b-trd63lpmpg {
    from { transform: rotate(0); }
    to { transform: rotate(360deg); }
}

@media (max-width: 1024px) {
    .tests-admin__grid[b-trd63lpmpg] {
        grid-template-columns: 1fr;
    }

    .aptis-builder__sources[b-trd63lpmpg],
    .aptis-builder__form[b-trd63lpmpg] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .tests-admin[b-trd63lpmpg] {
        padding: 0;
        gap: 0.85rem;
    }

    .tests-admin__header[b-trd63lpmpg] {
        padding: 1rem 1.1rem;
    }

    .tests-admin__header h2[b-trd63lpmpg] {
        font-size: 1.18rem;
    }

    .tests-admin__panel[b-trd63lpmpg] {
        padding: 14px;
    }

    .test-card__actions[b-trd63lpmpg] {
        flex-wrap: wrap;
        gap: 0.4rem;
    }
}

@media (max-width: 640px) {
    .tests-admin__form[b-trd63lpmpg],
    .aptis-builder__sources[b-trd63lpmpg],
    .aptis-builder__form[b-trd63lpmpg] {
        grid-template-columns: 1fr;
    }
    .test-card__head[b-trd63lpmpg] {
        flex-direction: column;
    }
}
/* _content/AptisWeb/Components/Pages/AIGrading/AIGrading.razor.rz.scp.css */
.ai-grading-container[b-d0bhhcmcq4] {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.nav-tabs .nav-link[b-d0bhhcmcq4] {
    cursor: pointer;
}
/* _content/AptisWeb/Components/Pages/AIGrading/SpeakingGradingComponent.razor.rz.scp.css */
/* _content/AptisWeb/Components/Pages/AuditContent.razor.rz.scp.css */
/* _content/AptisWeb/Components/Pages/Dev/TestTakingDesignPreview.razor.rz.scp.css */
.ttp-preview[b-p7yr2a8iyq] {
    min-height: 100vh;
    padding: var(--space-8);
    background: var(--neutral-50);
    color: var(--neutral-900);
    font-family: var(--test-font-ui);
    letter-spacing: 0;
}

.ttp-preview *[b-p7yr2a8iyq],
.ttp-preview *[b-p7yr2a8iyq]::before,
.ttp-preview *[b-p7yr2a8iyq]::after {
    box-sizing: border-box;
    letter-spacing: 0;
}

.ttp-dev-lock[b-p7yr2a8iyq] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    max-width: 640px;
    margin: var(--space-16) auto;
    padding: var(--space-5);
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-lg);
    background: var(--white);
    color: var(--neutral-700);
    font: var(--test-body);
}

.ttp-preview__header[b-p7yr2a8iyq] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-6);
    max-width: 1440px;
    margin: 0 auto var(--space-8);
}

.ttp-preview__header h1[b-p7yr2a8iyq],
.ttp-section-title h2[b-p7yr2a8iyq] {
    margin: 0;
    color: var(--neutral-900);
}

.ttp-preview__header h1[b-p7yr2a8iyq] {
    font: var(--test-display);
}

.ttp-preview__header h1:focus[b-p7yr2a8iyq] {
    outline: none;
}

.ttp-preview__header p[b-p7yr2a8iyq] {
    max-width: 720px;
    margin: var(--space-2) 0 0;
    color: var(--neutral-500);
    font: var(--test-body-lg);
}

.ttp-eyebrow[b-p7yr2a8iyq] {
    margin: 0 0 var(--space-1);
    color: var(--brand-primary);
    font: var(--test-caption);
    text-transform: uppercase;
}

.ttp-preview__legend[b-p7yr2a8iyq] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-pill);
    background: var(--white);
    color: var(--neutral-700);
    font: var(--test-caption);
    box-shadow: var(--shadow-card);
    white-space: nowrap;
}

.ttp-preview__legend span[b-p7yr2a8iyq] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.ttp-dot[b-p7yr2a8iyq] {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
}

.ttp-dot--brand[b-p7yr2a8iyq] {
    background: var(--brand-primary);
}

.ttp-dot--accent[b-p7yr2a8iyq] {
    background: var(--accent);
}

.ttp-dot--success[b-p7yr2a8iyq] {
    background: var(--success);
}

.ttp-direction[b-p7yr2a8iyq],
.ttp-mobile-section[b-p7yr2a8iyq] {
    max-width: 1440px;
    margin: 0 auto var(--space-10);
}

.ttp-section-title[b-p7yr2a8iyq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.ttp-section-title h2[b-p7yr2a8iyq] {
    font: var(--test-h1);
}

.ttp-badge[b-p7yr2a8iyq] {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-pill);
    background: var(--white);
    color: var(--neutral-700);
    font: var(--test-caption);
}

.ttp-badge--recommended[b-p7yr2a8iyq] {
    border-color: var(--brand-primary);
    background: var(--brand-primary-soft);
    color: var(--brand-primary);
}

.ttp-browser[b-p7yr2a8iyq] {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    min-height: 780px;
    overflow: hidden;
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: var(--shadow-popover);
}

.ttp-browser--compact[b-p7yr2a8iyq] {
    min-height: 620px;
}

.ttp-left-rail[b-p7yr2a8iyq] {
    padding: var(--space-5);
    border-right: 1px solid var(--neutral-100);
    background: var(--white);
}

.ttp-left-rail__brand[b-p7yr2a8iyq] {
    display: flex;
    align-items: center;
    height: 40px;
    margin-bottom: var(--space-5);
    color: var(--brand-primary);
    font: var(--test-h3);
}

.ttp-left-rail nav[b-p7yr2a8iyq] {
    display: grid;
    gap: var(--space-2);
}

.ttp-left-rail nav span[b-p7yr2a8iyq] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 40px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-md);
    color: var(--neutral-700);
    font: var(--test-body);
}

.ttp-left-rail nav span.is-active[b-p7yr2a8iyq] {
    background: var(--brand-primary-soft);
    color: var(--brand-primary);
    font-weight: 600;
}

.ttp-left-rail--compact[b-p7yr2a8iyq] {
    padding: var(--space-4);
}

.ttp-test-shell[b-p7yr2a8iyq] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    background: var(--neutral-50);
}

.ttp-topbar[b-p7yr2a8iyq] {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 72px;
    padding: 0 var(--space-8);
    border-bottom: 1px solid var(--neutral-100);
    background: var(--white);
}

.ttp-topbar--compact[b-p7yr2a8iyq] {
    min-height: 64px;
    padding: 0 var(--space-5);
}

.ttp-topbar__module[b-p7yr2a8iyq],
.ttp-topbar__actions[b-p7yr2a8iyq] {
    display: flex;
    align-items: center;
}

.ttp-topbar__module[b-p7yr2a8iyq] {
    gap: var(--space-3);
    min-width: 0;
}

.ttp-topbar__module strong[b-p7yr2a8iyq] {
    display: block;
    color: var(--neutral-900);
    font: var(--test-h3);
}

.ttp-topbar__module small[b-p7yr2a8iyq] {
    display: block;
    color: var(--neutral-500);
    font: var(--test-caption);
}

.ttp-module-icon[b-p7yr2a8iyq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: var(--radius-md);
    background: var(--brand-primary-soft);
    color: var(--brand-primary);
}

.ttp-topbar__actions[b-p7yr2a8iyq] {
    gap: var(--space-2);
    white-space: nowrap;
}

.ttp-timer[b-p7yr2a8iyq],
.ttp-text-btn[b-p7yr2a8iyq],
.ttp-ghost-btn[b-p7yr2a8iyq],
.ttp-mark-btn[b-p7yr2a8iyq],
.ttp-jump-btn[b-p7yr2a8iyq],
.ttp-submit-btn[b-p7yr2a8iyq],
.ttp-filter-chips button[b-p7yr2a8iyq],
.ttp-part-tabs button[b-p7yr2a8iyq],
.ttp-audio-player button[b-p7yr2a8iyq],
.ttp-recorder button[b-p7yr2a8iyq],
.ttp-mobile-topbar button[b-p7yr2a8iyq],
.ttp-mobile-fab[b-p7yr2a8iyq],
.ttp-nav-cell[b-p7yr2a8iyq] {
    transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.ttp-timer[b-p7yr2a8iyq] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 36px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--neutral-100);
    color: var(--neutral-900);
    font: var(--test-caption);
}

.ttp-timer--warn[b-p7yr2a8iyq] {
    background: var(--accent-soft);
    color: var(--accent);
}

.ttp-text-btn[b-p7yr2a8iyq],
.ttp-ghost-btn[b-p7yr2a8iyq],
.ttp-mark-btn[b-p7yr2a8iyq],
.ttp-jump-btn[b-p7yr2a8iyq],
.ttp-submit-btn[b-p7yr2a8iyq],
.ttp-filter-chips button[b-p7yr2a8iyq],
.ttp-part-tabs button[b-p7yr2a8iyq],
.ttp-audio-player button[b-p7yr2a8iyq],
.ttp-recorder button[b-p7yr2a8iyq],
.ttp-mobile-topbar button[b-p7yr2a8iyq],
.ttp-mobile-fab[b-p7yr2a8iyq],
.ttp-nav-cell[b-p7yr2a8iyq] {
    border: 0;
    font: var(--test-body);
    cursor: pointer;
}

.ttp-text-btn[b-p7yr2a8iyq] {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--neutral-700);
}

.ttp-ghost-btn[b-p7yr2a8iyq] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 36px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--accent);
}

.ttp-text-btn:hover[b-p7yr2a8iyq],
.ttp-ghost-btn:hover[b-p7yr2a8iyq] {
    background: var(--neutral-100);
}

.ttp-workspace[b-p7yr2a8iyq] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: var(--space-6);
    align-items: start;
    padding: var(--space-8);
}

.ttp-workspace--compact[b-p7yr2a8iyq] {
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: var(--space-5);
    padding: var(--space-5);
}

.ttp-content[b-p7yr2a8iyq] {
    display: grid;
    width: min(100%, 760px);
    margin: 0 auto;
    gap: var(--space-5);
}

.ttp-content--compact[b-p7yr2a8iyq] {
    width: min(100%, 820px);
    gap: var(--space-4);
}

.ttp-part-tabs[b-p7yr2a8iyq] {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    padding-bottom: var(--space-1);
}

.ttp-part-tabs button[b-p7yr2a8iyq] {
    display: grid;
    place-items: center;
    min-width: 112px;
    min-height: 54px;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-pill);
    background: var(--white);
    color: var(--neutral-700);
}

.ttp-part-tabs button span[b-p7yr2a8iyq] {
    font: var(--test-body);
    font-weight: 600;
}

.ttp-part-tabs button small[b-p7yr2a8iyq] {
    color: var(--neutral-500);
    font: var(--test-caption);
}

.ttp-part-tabs button:hover[b-p7yr2a8iyq] {
    background: var(--neutral-50);
    border-color: var(--brand-primary);
}

.ttp-part-tabs button.is-active[b-p7yr2a8iyq] {
    border-color: var(--brand-primary);
    background: var(--brand-primary-soft);
    color: var(--brand-primary);
}

.ttp-part-tabs button.is-active small[b-p7yr2a8iyq] {
    color: var(--brand-primary);
}

.ttp-part-tabs--compact button[b-p7yr2a8iyq] {
    min-width: 96px;
    min-height: 46px;
    padding: var(--space-1) var(--space-3);
}

.ttp-instruction[b-p7yr2a8iyq] {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-left: 3px solid var(--brand-primary);
    border-radius: var(--radius-md);
    background: var(--brand-primary-soft);
    color: var(--neutral-700);
}

.ttp-instruction i[b-p7yr2a8iyq] {
    color: var(--brand-primary);
    font-size: 18px;
    line-height: 24px;
}

.ttp-instruction strong[b-p7yr2a8iyq],
.ttp-instruction span[b-p7yr2a8iyq] {
    display: block;
}

.ttp-instruction strong[b-p7yr2a8iyq] {
    color: var(--neutral-900);
    font: var(--test-body-lg);
    font-weight: 700;
}

.ttp-instruction span[b-p7yr2a8iyq] {
    margin-top: var(--space-1);
    color: var(--neutral-500);
    font: var(--test-body);
}

.ttp-instruction--compact[b-p7yr2a8iyq] {
    padding: var(--space-3) var(--space-4);
}

.ttp-question-card[b-p7yr2a8iyq] {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: var(--shadow-card);
}

.ttp-question-card--active[b-p7yr2a8iyq] {
    animation: ttp-card-enter-b-p7yr2a8iyq 200ms ease-out;
}

.ttp-question-card--compact[b-p7yr2a8iyq] {
    gap: var(--space-3);
    padding: var(--space-5);
}

.ttp-question-card--mobile[b-p7yr2a8iyq] {
    gap: var(--space-3);
    padding: var(--space-4);
}

.ttp-question-card header[b-p7yr2a8iyq] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.ttp-question-number[b-p7yr2a8iyq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-pill);
    background: var(--brand-primary);
    color: var(--white);
    font: var(--test-caption);
}

.ttp-card-meta[b-p7yr2a8iyq] {
    color: var(--neutral-500);
    font: var(--test-caption);
}

.ttp-mark-btn[b-p7yr2a8iyq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: auto;
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--accent);
}

.ttp-question-text[b-p7yr2a8iyq] {
    margin: 0;
    color: var(--neutral-900);
    font: var(--test-body-lg);
}

.ttp-passage[b-p7yr2a8iyq] {
    margin: 0;
    color: var(--neutral-700);
    font: 400 16px/26px var(--test-font-passage);
}

.ttp-audio-player[b-p7yr2a8iyq] {
    display: grid;
    grid-template-columns: 40px minmax(120px, 1fr) auto auto;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-3);
    border: 1px solid var(--neutral-100);
    border-radius: var(--radius-md);
    background: var(--neutral-50);
}

.ttp-audio-player button[b-p7yr2a8iyq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-pill);
    background: var(--brand-primary);
    color: var(--white);
    font-size: 18px;
}

.ttp-audio-player__track[b-p7yr2a8iyq] {
    height: 4px;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--neutral-300);
}

.ttp-audio-player__track span[b-p7yr2a8iyq] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--brand-primary);
}

.ttp-audio-player time[b-p7yr2a8iyq] {
    color: var(--neutral-500);
    font: var(--test-caption);
}

.ttp-listen-chip[b-p7yr2a8iyq] {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--accent);
    font: var(--test-caption);
}

.ttp-options[b-p7yr2a8iyq] {
    display: grid;
    gap: var(--space-3);
}

.ttp-options--compact[b-p7yr2a8iyq] {
    gap: var(--space-2);
}

.ttp-answer-option[b-p7yr2a8iyq] {
    position: relative;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: center;
    min-height: 52px;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-md);
    background: var(--white);
    color: var(--neutral-900);
    font: var(--test-body-lg);
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease;
}

.ttp-answer-option:hover[b-p7yr2a8iyq] {
    border-color: var(--brand-primary);
    background: var(--neutral-50);
}

.ttp-answer-option:active[b-p7yr2a8iyq] {
    transform: scale(0.98);
}

.ttp-answer-option input[b-p7yr2a8iyq] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ttp-radio-dot[b-p7yr2a8iyq] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--neutral-300);
    border-radius: var(--radius-pill);
    background: var(--white);
}

.ttp-answer-option.is-selected[b-p7yr2a8iyq] {
    border-width: 2px;
    border-color: var(--brand-primary);
    background: var(--brand-primary-soft);
}

.ttp-answer-option.is-selected .ttp-radio-dot[b-p7yr2a8iyq] {
    border-color: var(--brand-primary);
    box-shadow: inset 0 0 0 4px var(--white);
    background: var(--brand-primary);
}

.ttp-answer-option.is-selected i[b-p7yr2a8iyq] {
    color: var(--brand-primary);
}

.ttp-recorder[b-p7yr2a8iyq] {
    display: grid;
    gap: var(--space-3);
}

.ttp-recorder button[b-p7yr2a8iyq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    height: 48px;
    border-radius: var(--radius-md);
    background: var(--brand-primary);
    color: var(--white);
    font-weight: 700;
}

.ttp-recorder__hints[b-p7yr2a8iyq] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.ttp-recorder__hints span[b-p7yr2a8iyq] {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--neutral-100);
    color: var(--neutral-700);
    font: var(--test-caption);
}

.ttp-navigator[b-p7yr2a8iyq] {
    position: sticky;
    top: 96px;
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: var(--shadow-card);
}

.ttp-navigator--compact[b-p7yr2a8iyq] {
    top: 88px;
    padding: var(--space-4);
}

.ttp-navigator__inner[b-p7yr2a8iyq] {
    display: grid;
    gap: var(--space-4);
}

.ttp-navigator__inner.is-compact[b-p7yr2a8iyq] {
    gap: var(--space-3);
}

.ttp-nav-stats[b-p7yr2a8iyq] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
}

.ttp-nav-stats div[b-p7yr2a8iyq] {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
    padding: var(--space-3);
    border: 1px solid var(--neutral-100);
    border-radius: var(--radius-md);
    background: var(--neutral-50);
}

.ttp-nav-stats i[b-p7yr2a8iyq] {
    color: var(--success);
}

.ttp-nav-stats div:nth-child(2) i[b-p7yr2a8iyq] {
    color: var(--accent);
}

.ttp-nav-stats span[b-p7yr2a8iyq] {
    color: var(--neutral-500);
    font: var(--test-caption);
}

.ttp-nav-stats strong[b-p7yr2a8iyq] {
    color: var(--neutral-900);
    font: var(--test-body);
    font-weight: 700;
}

.ttp-filter-chips[b-p7yr2a8iyq] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.ttp-filter-chips button[b-p7yr2a8iyq] {
    min-height: 30px;
    padding: 0 var(--space-3);
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-pill);
    background: var(--white);
    color: var(--neutral-700);
    font: var(--test-caption);
}

.ttp-filter-chips button.is-active[b-p7yr2a8iyq] {
    border-color: var(--brand-primary);
    background: var(--brand-primary-soft);
    color: var(--brand-primary);
}

.ttp-nav-grid[b-p7yr2a8iyq] {
    display: grid;
    grid-template-columns: repeat(5, 40px);
    gap: var(--space-2);
    justify-content: space-between;
}

.ttp-nav-cell[b-p7yr2a8iyq] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--neutral-700);
    font: var(--test-body);
    font-weight: 600;
}

.ttp-nav-cell.is-answered[b-p7yr2a8iyq] {
    border-color: var(--brand-primary-soft);
    background: var(--brand-primary-soft);
    color: var(--brand-primary);
}

.ttp-nav-cell.is-current[b-p7yr2a8iyq] {
    border: 2px solid var(--brand-primary);
}

.ttp-nav-cell.is-flagged span[b-p7yr2a8iyq] {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--accent);
}

.ttp-jump-btn[b-p7yr2a8iyq],
.ttp-submit-btn[b-p7yr2a8iyq] {
    width: 100%;
    min-height: 44px;
    border-radius: var(--radius-md);
    font-weight: 700;
}

.ttp-jump-btn[b-p7yr2a8iyq] {
    border: 1px solid var(--brand-primary);
    background: var(--white);
    color: var(--brand-primary);
}

.ttp-submit-btn[b-p7yr2a8iyq] {
    background: var(--brand-primary);
    color: var(--white);
}

.ttp-submit-btn:hover[b-p7yr2a8iyq],
.ttp-recorder button:hover[b-p7yr2a8iyq],
.ttp-audio-player button:hover[b-p7yr2a8iyq] {
    background: var(--brand-primary-hover);
}

.ttp-navigator__inner p[b-p7yr2a8iyq] {
    margin: calc(var(--space-2) * -1) 0 0;
    color: var(--neutral-500);
    font: var(--test-caption);
    text-align: center;
}

.ttp-mobile-section[b-p7yr2a8iyq] {
    margin-bottom: 0;
}

.ttp-mobile-frame[b-p7yr2a8iyq] {
    position: relative;
    width: min(100%, 390px);
    min-height: 760px;
    overflow: hidden;
    margin: 0 auto;
    padding: var(--space-4);
    border: 1px solid var(--neutral-300);
    border-radius: 32px;
    background: var(--neutral-50);
    box-shadow: var(--shadow-popover);
}

.ttp-mobile-topbar[b-p7yr2a8iyq] {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    gap: var(--space-3);
    align-items: center;
    margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-4);
    padding: var(--space-4);
    border-bottom: 1px solid var(--neutral-100);
    background: var(--white);
}

.ttp-mobile-topbar strong[b-p7yr2a8iyq],
.ttp-mobile-topbar small[b-p7yr2a8iyq] {
    display: block;
}

.ttp-mobile-topbar strong[b-p7yr2a8iyq] {
    font: var(--test-body-lg);
    font-weight: 700;
}

.ttp-mobile-topbar small[b-p7yr2a8iyq] {
    color: var(--neutral-500);
    font: var(--test-caption);
}

.ttp-mobile-topbar button[b-p7yr2a8iyq],
.ttp-mobile-fab[b-p7yr2a8iyq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-pill);
    background: var(--brand-primary);
    color: var(--white);
}

.ttp-part-select[b-p7yr2a8iyq] {
    width: 100%;
    min-height: 44px;
    margin-bottom: var(--space-4);
    padding: 0 var(--space-3);
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-md);
    background: var(--white);
    color: var(--neutral-900);
    font: var(--test-body);
}

.ttp-mobile-frame .ttp-instruction[b-p7yr2a8iyq] {
    margin-bottom: var(--space-4);
}

.ttp-mobile-fab[b-p7yr2a8iyq] {
    position: absolute;
    right: var(--space-5);
    bottom: 212px;
    box-shadow: var(--shadow-popover);
}

.ttp-bottom-sheet[b-p7yr2a8iyq] {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: var(--space-3) var(--space-4) var(--space-4);
    border-radius: 20px 20px 0 0;
    background: var(--white);
    box-shadow: var(--shadow-popover);
}

.ttp-bottom-sheet__handle[b-p7yr2a8iyq] {
    width: 44px;
    height: 4px;
    margin: 0 auto var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--neutral-300);
}

.ttp-bottom-sheet .ttp-nav-grid[b-p7yr2a8iyq] {
    grid-template-columns: repeat(5, 40px);
}

.ttp-text-btn:focus-visible[b-p7yr2a8iyq],
.ttp-ghost-btn:focus-visible[b-p7yr2a8iyq],
.ttp-mark-btn:focus-visible[b-p7yr2a8iyq],
.ttp-jump-btn:focus-visible[b-p7yr2a8iyq],
.ttp-submit-btn:focus-visible[b-p7yr2a8iyq],
.ttp-filter-chips button:focus-visible[b-p7yr2a8iyq],
.ttp-part-tabs button:focus-visible[b-p7yr2a8iyq],
.ttp-audio-player button:focus-visible[b-p7yr2a8iyq],
.ttp-recorder button:focus-visible[b-p7yr2a8iyq],
.ttp-mobile-topbar button:focus-visible[b-p7yr2a8iyq],
.ttp-mobile-fab:focus-visible[b-p7yr2a8iyq],
.ttp-nav-cell:focus-visible[b-p7yr2a8iyq],
.ttp-answer-option:focus-within[b-p7yr2a8iyq],
.ttp-part-select:focus-visible[b-p7yr2a8iyq] {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

@keyframes ttp-card-enter-b-p7yr2a8iyq {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

@media (max-width: 1280px) {
    .ttp-browser[b-p7yr2a8iyq] {
        grid-template-columns: 200px minmax(0, 1fr);
    }

    .ttp-workspace[b-p7yr2a8iyq] {
        grid-template-columns: minmax(0, 1fr) 240px;
        padding: var(--space-6);
    }

    .ttp-nav-grid[b-p7yr2a8iyq] {
        grid-template-columns: repeat(5, 36px);
    }

    .ttp-nav-cell[b-p7yr2a8iyq] {
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 1024px) {
    .ttp-preview[b-p7yr2a8iyq] {
        padding: var(--space-5);
    }

    .ttp-preview__header[b-p7yr2a8iyq],
    .ttp-section-title[b-p7yr2a8iyq] {
        align-items: flex-start;
        flex-direction: column;
    }

    .ttp-browser[b-p7yr2a8iyq] {
        grid-template-columns: 1fr;
    }

    .ttp-left-rail[b-p7yr2a8iyq] {
        display: none;
    }

    .ttp-workspace[b-p7yr2a8iyq],
    .ttp-workspace--compact[b-p7yr2a8iyq] {
        grid-template-columns: 1fr;
    }

    .ttp-navigator[b-p7yr2a8iyq] {
        display: none;
    }
}

@media (max-width: 640px) {
    .ttp-preview[b-p7yr2a8iyq] {
        padding: var(--space-4);
    }

    .ttp-preview__header h1[b-p7yr2a8iyq] {
        font: var(--test-h1);
    }

    .ttp-direction[b-p7yr2a8iyq] {
        display: none;
    }

    .ttp-preview__legend[b-p7yr2a8iyq] {
        flex-wrap: wrap;
        border-radius: var(--radius-md);
        white-space: normal;
    }
}
/* _content/AptisWeb/Components/Pages/Error.razor.rz.scp.css */
.error-container[b-hmtwtybtf9] {
    min-height: var(--app-dvh);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-500) 100%);
}

.error-content[b-hmtwtybtf9] {
    background: var(--bg);
    border-radius: 1rem;
    padding: 3rem;
    max-width: 600px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    text-align: center;
}

.error-icon[b-hmtwtybtf9] {
    font-size: 5rem;
    color: var(--danger);
    margin-bottom: 1.5rem;
    animation: pulse-b-hmtwtybtf9 2s infinite;
}

@keyframes pulse-b-hmtwtybtf9 {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.error-title[b-hmtwtybtf9] {
    color: var(--text-900);
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.error-subtitle[b-hmtwtybtf9] {
    color: var(--text-700);
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

.error-details[b-hmtwtybtf9] {
    background: var(--surface-2);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 2rem;
}

.request-id[b-hmtwtybtf9] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.request-id .label[b-hmtwtybtf9] {
    font-weight: 500;
    color: var(--text-700);
}

.request-id code[b-hmtwtybtf9] {
    background: var(--bg);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    color: var(--primary-600);
    font-size: 0.9rem;
    border: 1px solid var(--border);
}

.error-actions[b-hmtwtybtf9] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.error-actions .btn[b-hmtwtybtf9] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.error-actions .btn:hover[b-hmtwtybtf9] {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.dev-info[b-hmtwtybtf9] {
    text-align: left;
    border-left: 4px solid var(--warning);
}

.dev-info h5[b-hmtwtybtf9] {
    color: #92400e;
    margin-bottom: 1rem;
}

.error-message pre[b-hmtwtybtf9],
.stack-trace[b-hmtwtybtf9] {
    background: var(--surface-2);
    padding: 1rem;
    border-radius: 0.25rem;
    font-size: 0.85rem;
    overflow-x: auto;
    text-align: left;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.support-info[b-hmtwtybtf9] {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
}

.support-info p[b-hmtwtybtf9] {
    margin: 0;
    font-size: 0.9rem;
}

details summary[b-hmtwtybtf9] {
    cursor: pointer;
    color: var(--primary-600);
    font-weight: 500;
    padding: 0.5rem 0;
}

details summary:hover[b-hmtwtybtf9] {
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 576px) {
    .error-content[b-hmtwtybtf9] {
        padding: 2rem 1.5rem;
    }

    .error-icon[b-hmtwtybtf9] {
        font-size: 3.5rem;
    }

    .error-title[b-hmtwtybtf9] {
        font-size: 1.5rem;
    }

    .error-actions[b-hmtwtybtf9] {
        flex-direction: column;
    }

    .error-actions .btn[b-hmtwtybtf9] {
        width: 100%;
    }
}
/* _content/AptisWeb/Components/Pages/Login/AdminLogin.razor.rz.scp.css */
.admin-login-container[b-jwpv32rfb1] {
    --admin-primary: #2f5eff;
    --admin-ink: #1f2430;
    --admin-muted: #5a6472;
    --admin-card: rgba(255, 255, 255, 0.92);
    font-family: var(--font-vietnamese-ui);
    min-height: 100vh;
    min-height: 100dvh;
    min-height: var(--app-dvh, 100dvh);
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(1200px 600px at 15% -10%, rgba(255, 214, 165, 0.35), transparent 60%),
        radial-gradient(900px 500px at 85% 0%, rgba(162, 203, 255, 0.35), transparent 55%),
        linear-gradient(145deg, #f3f4f7 0%, #eef1f5 45%, #f7f2ee 100%);
    padding: 32px 18px;
}

.admin-login-wrapper[b-jwpv32rfb1] {
    width: 100%;
    max-width: 560px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.admin-login-card[b-jwpv32rfb1] {
    width: 100%;
    background: var(--admin-card);
    border-radius: 24px;
    padding: 38px 40px;
    box-shadow: 0 30px 80px rgba(20, 24, 38, 0.16);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(60, 60, 80, 0.08);
    animation: adminCardRise-b-jwpv32rfb1 0.6s ease;
}

@keyframes adminCardRise-b-jwpv32rfb1 {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.admin-login-header[b-jwpv32rfb1] {
    text-align: left;
    margin-bottom: 26px;
}

.admin-login-header img[b-jwpv32rfb1] {
    height: 42px;
    width: auto;
    object-fit: contain;
}

.admin-login-header h2[b-jwpv32rfb1] {
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--admin-ink);
    margin: 8px 0 6px;
}

.admin-login-header p[b-jwpv32rfb1] {
    margin: 0;
    color: var(--admin-muted);
    font-size: 0.95rem;
}

.login-form .form-group[b-jwpv32rfb1] {
    margin-bottom: 18px;
}

.login-form label[b-jwpv32rfb1] {
    display: block;
    font-weight: 500;
    color: #2a2f3a;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.login-form .form-control[b-jwpv32rfb1] {
    width: 100%;
    background: #f6f7fb;
    border: 1px solid #d9dee8;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 0.98rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.login-form .form-control:focus[b-jwpv32rfb1] {
    outline: none;
    border-color: var(--admin-primary);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(47, 94, 255, 0.12);
}

.login-form .form-control:disabled[b-jwpv32rfb1] {
    opacity: 0.65;
    cursor: not-allowed;
}

.login-form .btn[b-jwpv32rfb1] {
    border-radius: 12px;
    padding: 12px 16px;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.login-form .btn:hover:not(:disabled)[b-jwpv32rfb1] {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(23, 29, 44, 0.18);
}

.login-form .btn:disabled[b-jwpv32rfb1] {
    opacity: 0.75;
    cursor: not-allowed;
}

.login-form .alert[b-jwpv32rfb1] {
    border-radius: 12px;
    border: 1px solid rgba(220, 53, 69, 0.35);
    background: rgba(220, 53, 69, 0.08);
    color: #b21f2d;
    font-size: 0.92rem;
}

.login-form .text-muted[b-jwpv32rfb1] {
    color: #6c7685;
}

.login-form small[b-jwpv32rfb1] {
    font-size: 0.88rem;
}

@media (max-width: 600px) {
    .admin-login-card[b-jwpv32rfb1] {
        padding: 28px 22px;
        border-radius: 20px;
    }

    .admin-login-header h2[b-jwpv32rfb1] {
        font-size: 1.65rem;
    }
}
/* _content/AptisWeb/Components/Pages/Login/Login.razor.rz.scp.css */
/* Login.razor scoped styles — intentionally empty.
   Page-level styles live in wwwroot/CssDetail/AuthRedesign.css
   (loaded by AuthLayout) so they are shared with Register.razor. */
/* _content/AptisWeb/Components/Pages/Login/Register.razor.rz.scp.css */
.login-container[b-1samugaevu] {
    min-height: var(--app-dvh);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at top left, rgba(255, 244, 222, 0.88) 0%, rgba(255, 244, 222, 0) 32%),
        radial-gradient(circle at bottom right, rgba(189, 232, 220, 0.82) 0%, rgba(189, 232, 220, 0) 34%),
        linear-gradient(145deg, #f4f7f1 0%, #ebf5f0 46%, #edf2f8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
}

.login-container[b-1samugaevu]::before,
.login-container[b-1samugaevu]::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(18px);
    opacity: 0.75;
    z-index: 0;
}

.login-container[b-1samugaevu]::before {
    width: 360px;
    height: 360px;
    top: -120px;
    right: 12%;
    background: rgba(110, 193, 169, 0.22);
}

.login-container[b-1samugaevu]::after {
    width: 320px;
    height: 320px;
    bottom: -140px;
    left: 10%;
    background: rgba(255, 214, 168, 0.2);
}

.login-shell[b-1samugaevu] {
    width: 100%;
    max-width: 1120px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px;
    align-items: stretch;
    position: relative;
    z-index: 1;
}

.welcome-panel[b-1samugaevu] {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    padding: 36px;
    background: linear-gradient(160deg, #0f766e 0%, #0b5f5b 50%, #094043 100%);
    color: #e9f8f6;
    box-shadow: 0 30px 60px rgba(5, 30, 32, 0.35);
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 560px;
}

.welcome-panel[b-1samugaevu]::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    right: -80px;
    top: -90px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

.welcome-badge[b-1samugaevu] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    width: fit-content;
}

.welcome-title[b-1samugaevu] {
    font-size: 2rem;
    font-weight: 500;
    margin: 0;
}

.welcome-subtitle[b-1samugaevu] {
    margin: 0;
    color: rgba(233, 248, 246, 0.92);
    font-size: 1rem;
    line-height: 1.6;
}

.welcome-feature-list[b-1samugaevu] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 6px;
}

.welcome-feature[b-1samugaevu] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.feature-icon[b-1samugaevu] {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.18);
    color: #dafaf5;
    flex-shrink: 0;
    font-size: 1.1rem;
}

.feature-title[b-1samugaevu] {
    font-weight: 500;
    margin-bottom: 4px;
    color: #f2fffd;
}

.feature-text[b-1samugaevu] {
    font-size: 0.92rem;
    color: rgba(233, 248, 246, 0.85);
}

.welcome-footer[b-1samugaevu] {
    margin-top: auto;
}

.welcome-pill[b-1samugaevu] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.18);
    font-weight: 500;
    color: #f4fffd;
}

.login-panel[b-1samugaevu] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.login-logo[b-1samugaevu] {
    background: rgba(255, 255, 255, 0.95);
    padding: 12px 16px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}

.login-logo img[b-1samugaevu] {
    height: 42px;
    width: auto;
    object-fit: contain;
}

.logo-text[b-1samugaevu] {
    font-size: 1.2rem;
    font-weight: 500;
    margin: 0;
    color: #0f172a;
}

.logo-subtitle[b-1samugaevu] {
    font-size: 0.85rem;
    color: #64748b;
}

.login-card[b-1samugaevu] {
    background: white;
    border-radius: 24px;
    box-shadow: 0 30px 60px rgba(15, 23, 42, 0.18);
    padding: 36px;
    animation: slideUp-b-1samugaevu 0.5s ease;
}

@keyframes slideUp-b-1samugaevu {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-header[b-1samugaevu] {
    text-align: left;
    margin-bottom: 24px;
}

.login-header h2[b-1samugaevu] {
    color: #0f172a;
    font-size: 1.7rem;
    font-weight: 500;
    margin-bottom: 8px;
}

.login-header p[b-1samugaevu] {
    color: #64748b;
    font-size: 0.95rem;
}

.form-group[b-1samugaevu] {
    margin-bottom: 20px;
}

.form-group label[b-1samugaevu] {
    display: block;
    margin-bottom: 8px;
    color: #1f2937;
    font-weight: 500;
    font-size: 0.9rem;
}

.required[b-1samugaevu] {
    color: #dc3545;
    margin-left: 2px;
}

.form-control[b-1samugaevu] {
    width: 100%;
    padding: 12px 15px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: #f8fafc;
}

.form-control:focus[b-1samugaevu] {
    outline: none;
    border-color: #0f766e;
    background: white;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

.form-control:disabled[b-1samugaevu] {
    opacity: 0.6;
    cursor: not-allowed;
}

.form-check[b-1samugaevu] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.form-check-input[b-1samugaevu] {
    width: 18px;
    height: 18px;
    margin-top: 4px;
    cursor: pointer;
}

.form-check-label[b-1samugaevu] {
    color: #475569;
    font-size: 0.9rem;
    cursor: pointer;
    user-select: none;
}

.form-check-label a[b-1samugaevu] {
    color: #0f766e;
    font-weight: 500;
    text-decoration: none;
}

.form-check-label a:hover[b-1samugaevu] {
    color: #1d4ed8;
    text-decoration: underline;
}

.btn-login[b-1samugaevu] {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #0f766e 0%, #0b5f5b 100%);
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-login:hover:not(:disabled)[b-1samugaevu] {
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(15, 118, 110, 0.3);
}

.btn-login:disabled[b-1samugaevu] {
    opacity: 0.7;
    cursor: not-allowed;
}

.spinner-border-sm[b-1samugaevu] {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

.register-link[b-1samugaevu] {
    text-align: center;
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 0.95rem;
}

.register-link a[b-1samugaevu] {
    color: #0f766e;
    text-decoration: none;
    font-weight: 500;
    margin-left: 5px;
    transition: color 0.3s ease;
}

.register-link a:hover[b-1samugaevu] {
    color: #1d4ed8;
    text-decoration: underline;
}

.alert[b-1samugaevu] {
    padding: 12px 15px;
    border-radius: 10px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    animation: slideDown-b-1samugaevu 0.3s ease;
}

@keyframes slideDown-b-1samugaevu {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert-danger[b-1samugaevu] {
    background: #fff1f2;
    border: 1px solid #fecdd3;
    color: #b42318;
    font-weight: 500;
}

.auth-note[b-1samugaevu] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
    padding: 14px 16px;
    background: linear-gradient(180deg, #f8fbfa 0%, #f1f6f4 100%);
    border-color: #d7e4e0 !important;
    color: #334155;
}

.auth-note > div[b-1samugaevu] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
    margin: 0 !important;
    line-height: 1.6;
}

.auth-note strong[b-1samugaevu] {
    color: #0f766e;
    font-weight: 500;
}

.text-danger[b-1samugaevu] {
    color: #d92d20;
    font-size: 0.85rem;
    margin-top: 6px;
    display: block;
    font-weight: 500;
    line-height: 1.45;
}

@media (max-width: 980px) {
    .login-shell[b-1samugaevu] {
        grid-template-columns: 1fr;
    }

    .welcome-panel[b-1samugaevu] {
        min-height: auto;
        order: 2;
    }

    .login-panel[b-1samugaevu] {
        order: 1;
    }
}

@media (max-width: 600px) {
    .login-card[b-1samugaevu] {
        padding: 28px 22px;
    }

    .welcome-panel[b-1samugaevu] {
        padding: 28px;
    }

    .auth-note > div[b-1samugaevu] {
        gap: 4px;
    }
}
/* _content/AptisWeb/Components/Pages/Login/SelectModel.razor.rz.scp.css */
.select-model-page[b-ywpseeb43n] {
    padding-block: 24px;
}

.select-model-shell[b-ywpseeb43n] {
    max-width: 1040px;
    grid-template-columns: minmax(300px, 0.9fr) minmax(500px, 1.45fr);
}

.select-model-intro[b-ywpseeb43n] {
    min-height: 650px;
    padding: 36px 32px;
}

.select-model-intro[b-ywpseeb43n]::before,
.select-model-intro[b-ywpseeb43n]::after {
    position: absolute;
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.select-model-intro[b-ywpseeb43n]::before {
    width: 210px;
    height: 210px;
    top: -110px;
    right: -95px;
    border: 1px solid rgba(159, 225, 203, 0.12);
}

.select-model-intro[b-ywpseeb43n]::after {
    width: 150px;
    height: 150px;
    right: -105px;
    bottom: 54px;
    background: rgba(159, 225, 203, 0.05);
}

.select-model-steps[b-ywpseeb43n] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.select-model-step[b-ywpseeb43n] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 12px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: rgba(255, 255, 255, 0.48);
}

.select-model-step.is-active[b-ywpseeb43n] {
    border-color: rgba(159, 225, 203, 0.2);
    background: rgba(159, 225, 203, 0.1);
    color: #fff;
}

.select-model-step.is-complete[b-ywpseeb43n] {
    color: rgba(255, 255, 255, 0.7);
}

.select-model-step__icon[b-ywpseeb43n] {
    width: 25px;
    height: 25px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 600;
}

.select-model-step.is-complete .select-model-step__icon[b-ywpseeb43n] {
    border-color: rgba(93, 202, 165, 0.35);
    background: rgba(93, 202, 165, 0.16);
    color: #9fe1cb;
}

.select-model-step.is-active .select-model-step__icon[b-ywpseeb43n] {
    border-color: #9fe1cb;
    background: #9fe1cb;
    color: #04342c;
}

.select-model-step strong[b-ywpseeb43n],
.select-model-step span[b-ywpseeb43n] {
    display: block;
}

.select-model-step strong[b-ywpseeb43n] {
    color: inherit;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.3;
}

.select-model-step div > span[b-ywpseeb43n] {
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.46);
    font-size: 10.5px;
    line-height: 1.35;
}

.select-model-step.is-active div > span[b-ywpseeb43n] {
    color: rgba(255, 255, 255, 0.67);
}

.select-model-intro-note[b-ywpseeb43n] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 20px;
    padding: 13px 14px;
    border-left: 2px solid #5dcaa5;
    border-radius: 0 8px 8px 0;
    background: rgba(159, 225, 203, 0.08);
}

.select-model-intro-note > span[b-ywpseeb43n] {
    flex: 0 0 auto;
    color: #9fe1cb;
}

.select-model-intro-note strong[b-ywpseeb43n] {
    display: block;
    color: #9fe1cb;
    font-size: 12px;
    font-weight: 500;
}

.select-model-intro-note p[b-ywpseeb43n] {
    margin: 3px 0 0;
    color: rgba(255, 255, 255, 0.65);
    font-size: 10.5px;
    line-height: 1.45;
}

.select-model-panel[b-ywpseeb43n] {
    min-width: 0;
    padding: 30px 34px 26px;
}

.select-model-account[b-ywpseeb43n] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin-bottom: 22px;
    padding: 10px 12px;
    border: 1px solid rgba(59, 109, 17, 0.16);
    border-radius: 9px;
    background: var(--bg-muted, #f2f7ea);
}

.select-model-account__google[b-ywpseeb43n] {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
}

.select-model-account__copy[b-ywpseeb43n] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.select-model-account__copy span[b-ywpseeb43n] {
    color: var(--text-3, #888780);
    font-size: 10px;
    line-height: 1.25;
}

.select-model-account__copy strong[b-ywpseeb43n] {
    overflow: hidden;
    color: var(--text, #1a1a18);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.select-model-account__status[b-ywpseeb43n] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--brand-primary-soft, #eaf3de);
    color: var(--brand-primary, #3b6d11);
    font-size: 10px;
    font-weight: 500;
}

.select-model-header[b-ywpseeb43n] {
    margin-bottom: 18px;
}

.select-model-eyebrow[b-ywpseeb43n] {
    display: block;
    margin-bottom: 5px;
    color: var(--brand-primary, #085041);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.45px;
    text-transform: uppercase;
}

.select-model-grid[b-ywpseeb43n] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.select-model-option[b-ywpseeb43n] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 150px;
    padding: 14px;
    overflow: hidden;
    border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
    border-radius: 11px;
    background: var(--bg-surface, var(--surface, #fff));
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 100ms ease, background 150ms ease;
}

.select-model-option:hover:not(:disabled)[b-ywpseeb43n] {
    border-color: rgba(8, 80, 65, 0.35);
    box-shadow: 0 5px 18px rgba(4, 52, 44, 0.08);
    transform: translateY(-1px);
}

.select-model-option:focus-visible[b-ywpseeb43n] {
    outline: none;
    border-color: var(--brand-primary, #085041);
    box-shadow: 0 0 0 3px rgba(15, 110, 86, 0.16);
}

.select-model-option:disabled[b-ywpseeb43n] {
    cursor: wait;
    opacity: 0.72;
}

.select-model-option.is-selected[b-ywpseeb43n] {
    border-color: var(--brand-primary, #085041);
    background: linear-gradient(
        145deg,
        var(--brand-primary-soft, #e1f5ee),
        var(--bg-surface, var(--surface, #fff))
    );
    box-shadow: inset 0 0 0 1px var(--brand-primary, #085041);
}

.select-model-option__check[b-ywpseeb43n] {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-strong, rgba(0, 0, 0, 0.15));
    border-radius: 50%;
    background: var(--bg-surface, var(--surface, #fff));
    color: transparent;
}

.select-model-option.is-selected .select-model-option__check[b-ywpseeb43n] {
    border-color: var(--brand-primary, #085041);
    background: var(--brand-primary, #085041);
    color: var(--bg-surface, var(--surface, #fff));
}

.select-model-option__badge[b-ywpseeb43n] {
    position: absolute;
    top: 11px;
    right: 37px;
    max-width: calc(100% - 82px);
    overflow: hidden;
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--brand-primary-soft, #e1f5ee);
    color: var(--brand-primary, #085041);
    font-size: 8.5px;
    font-weight: 600;
    line-height: 1.25;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.select-model-option__icon[b-ywpseeb43n] {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    border-radius: 8px;
}

.select-model-option--aptis .select-model-option__icon[b-ywpseeb43n] {
    background: #e1f5ee;
    color: #0f6e56;
}

.select-model-option--vstep .select-model-option__icon[b-ywpseeb43n] {
    background: #eaf3de;
    color: #639922;
}

.select-model-option--toeic .select-model-option__icon[b-ywpseeb43n] {
    background: #faeeda;
    color: #ba7517;
}

.select-model-option--ielts .select-model-option__icon[b-ywpseeb43n] {
    background: #eeedfe;
    color: #534ab7;
}

.select-model-option__title[b-ywpseeb43n] {
    color: var(--text, #1a1a18);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.25;
}

.select-model-option__sub[b-ywpseeb43n] {
    margin-top: 3px;
    color: var(--text-3, #888780);
    font-size: 10.5px;
    line-height: 1.35;
}

.select-model-option__access[b-ywpseeb43n] {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    margin-top: auto;
    padding-top: 11px;
    color: var(--text-2, #5f5e5a);
    font-size: 10px;
    line-height: 1.35;
}

.select-model-option__access > :first-child[b-ywpseeb43n] {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--brand-primary, #3b6d11);
}

.select-model-pricing[b-ywpseeb43n],
.select-model-selection[b-ywpseeb43n] {
    min-height: 48px;
    margin: 14px 0 12px;
}

.select-model-pricing[b-ywpseeb43n] {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 10px 11px;
    font-size: 10.5px;
}

.select-model-pricing > :first-child[b-ywpseeb43n] {
    flex: 0 0 auto;
    margin-top: 1px;
}

.select-model-selection[b-ywpseeb43n] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 10px 11px;
    border: 1px solid rgba(15, 110, 86, 0.14);
    border-radius: 8px;
    background: var(--brand-primary-soft, #f1f9f6);
    color: var(--brand-primary, #085041);
}

.select-model-selection > span[b-ywpseeb43n] {
    flex: 0 0 auto;
}

.select-model-selection strong[b-ywpseeb43n] {
    display: block;
    font-size: 11px;
    font-weight: 600;
}

.select-model-selection p[b-ywpseeb43n] {
    margin: 2px 0 0;
    color: var(--text-2, #5f5e5a);
    font-size: 10px;
    line-height: 1.35;
}

.select-model-submit[b-ywpseeb43n] {
    min-height: 40px;
}

.select-model-footnote[b-ywpseeb43n] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 9px 0 0;
    color: var(--text-3, #888780);
    font-size: 9.5px;
    line-height: 1.4;
    text-align: center;
}

@media (max-width: 900px) {
    .select-model-shell[b-ywpseeb43n] {
        grid-template-columns: minmax(260px, 0.8fr) minmax(440px, 1.25fr);
    }

    .select-model-intro[b-ywpseeb43n] {
        padding-inline: 26px;
    }

    .select-model-panel[b-ywpseeb43n] {
        padding-inline: 26px;
    }
}

@media (max-width: 767.98px) {
    .select-model-page[b-ywpseeb43n] {
        padding-block: 14px;
    }

    .select-model-shell[b-ywpseeb43n] {
        grid-template-columns: 1fr;
    }

    .select-model-intro[b-ywpseeb43n] {
        min-height: 0;
        padding: 23px 22px 20px;
    }

    .select-model-steps[b-ywpseeb43n],
    .select-model-intro-note[b-ywpseeb43n],
    .select-model-intro .auth-intro__footer[b-ywpseeb43n] {
        display: none;
    }

    .select-model-intro .auth-intro__sub[b-ywpseeb43n] {
        margin-bottom: 0;
    }

    .select-model-panel[b-ywpseeb43n] {
        padding: 22px;
    }
}

@media (max-width: 520px) {
    .select-model-account[b-ywpseeb43n] {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .select-model-account__copy[b-ywpseeb43n] {
        max-width: calc(100% - 34px);
    }

    .select-model-account__status[b-ywpseeb43n] {
        margin-left: 32px;
    }

    .select-model-grid[b-ywpseeb43n] {
        grid-template-columns: 1fr;
    }

    .select-model-option[b-ywpseeb43n] {
        min-height: 138px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .select-model-option[b-ywpseeb43n] {
        transition: none;
    }
}
/* _content/AptisWeb/Components/Pages/Student/FreeAssessmentCertificate.razor.rz.scp.css */
.certificate-shell[b-7020erb9fn] {
    min-height: calc(100vh - 4rem);
    padding: 0;
    background: #f3efe3;
}

.page-wrap[b-7020erb9fn] {
    max-width: 960px;
    margin: 0 auto;
    padding: 32px 20px 64px;
}

.toolbar[b-7020erb9fn] {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.toolbar-actions[b-7020erb9fn] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.certificate[b-7020erb9fn] {
    position: relative;
    width: 100%;
    min-height: 1180px;
    background: #fffdf7;
    border: 1px solid #ded6c4;
    box-shadow: 0 18px 50px rgba(30, 40, 20, 0.16);
    padding: 54px 64px 48px;
    overflow: hidden;
    font-family: var(--font-vietnamese-ui, "Be Vietnam Pro", "Inter", system-ui, sans-serif);
    color: #1d2b22;
}

.certificate[b-7020erb9fn]::before {
    content: "";
    position: absolute;
    inset: 18px;
    border: 3px solid #d8c9a8;
    pointer-events: none;
    z-index: 0;
}

.certificate[b-7020erb9fn]::after {
    content: "LOCAL DEMO";
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-28deg);
    font-size: 96px;
    font-weight: 900;
    letter-spacing: 8px;
    color: rgba(170, 40, 40, 0.08);
    white-space: nowrap;
    pointer-events: none;
    z-index: 0;
}

.cert-top[b-7020erb9fn],
.title-block[b-7020erb9fn],
.info-grid[b-7020erb9fn],
.score-card[b-7020erb9fn],
.cert-footer[b-7020erb9fn],
.small-print[b-7020erb9fn] {
    position: relative;
    z-index: 2;
}

.cert-top[b-7020erb9fn] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.brand[b-7020erb9fn] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brand-mark[b-7020erb9fn] {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: linear-gradient(135deg, #1f5b3a, #8a1f2d);
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 900;
    font-size: 20px;
    letter-spacing: -1px;
    flex-shrink: 0;
}

.brand-name[b-7020erb9fn] {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -0.5px;
    color: #1f5b3a;
    line-height: 1.1;
}

.brand-sub[b-7020erb9fn] {
    margin-top: 4px;
    font-size: 11px;
    color: #6f6657;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    font-weight: 700;
}

.qr[b-7020erb9fn] {
    width: 108px;
    height: 108px;
    border: 8px solid #fff;
    outline: 1px solid #d8d0c0;
    background:
        linear-gradient(90deg, #222 10px, transparent 10px) 0 0 / 20px 20px,
        linear-gradient(#222 10px, transparent 10px) 0 0 / 20px 20px,
        #fff;
    position: relative;
    flex-shrink: 0;
}

.qr[b-7020erb9fn]::after {
    content: "LOCAL";
    position: absolute;
    inset: 30px 12px;
    display: grid;
    place-items: center;
    background: #fffdf7;
    border: 1px solid #222;
    font-size: 11px;
    font-weight: 900;
    color: #1d2b22;
}

.title-block[b-7020erb9fn] {
    margin-top: 70px;
}

.eyebrow[b-7020erb9fn] {
    color: #b51f35;
    font-weight: 900;
    font-size: 26px;
}

.red-line[b-7020erb9fn] {
    width: 72px;
    height: 5px;
    background: #b51f35;
    margin: 14px 0 18px;
    border-radius: 999px;
}

.title-block h1[b-7020erb9fn] {
    margin: 0;
    font-size: 52px;
    line-height: 1.05;
    letter-spacing: -2px;
    color: #232a2f;
}

.cert-subtitle[b-7020erb9fn] {
    margin-top: 12px;
    font-size: 17px;
    color: #4b514d;
    font-weight: 700;
}

.notice[b-7020erb9fn] {
    margin-top: 18px;
    display: inline-block;
    padding: 8px 14px;
    background: #fff2f2;
    border: 1px solid #efc9c9;
    color: #9d1e2f;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.info-grid[b-7020erb9fn] {
    margin-top: 64px;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 0.8fr;
    gap: 26px 32px;
}

.field[b-7020erb9fn] {
    border-top: 2px solid #b9b2a2;
    padding-top: 8px;
    min-height: 50px;
}

.field-label[b-7020erb9fn] {
    font-size: 11px;
    color: #6b6355;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.field-value[b-7020erb9fn] {
    margin-top: 5px;
    font-size: 15px;
    font-weight: 800;
    color: #18251d;
    word-break: break-word;
}

.score-card[b-7020erb9fn] {
    margin-top: 58px;
    border: 4px solid #30383b;
    background: rgba(255, 255, 255, 0.82);
    padding: 22px 24px 26px;
}

.overall[b-7020erb9fn] {
    font-size: 24px;
    font-weight: 900;
    color: #b51f35;
    border-bottom: 2px solid #bbb3a4;
    padding-bottom: 14px;
    margin-bottom: 22px;
}

.score-layout[b-7020erb9fn] {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 28px;
    align-items: start;
}

.section-title[b-7020erb9fn] {
    font-size: 18px;
    font-weight: 900;
    margin-bottom: 10px;
    color: #222;
}

table[b-7020erb9fn] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

th[b-7020erb9fn] {
    text-align: left;
    border-bottom: 2px solid #777;
    padding: 8px 6px;
    font-size: 13px;
    color: #333;
}

td[b-7020erb9fn] {
    border-bottom: 1px solid #ddd5c6;
    padding: 8px 6px;
    font-weight: 700;
}

td:last-child[b-7020erb9fn],
th:last-child[b-7020erb9fn] {
    text-align: right;
}

.bar-chart[b-7020erb9fn] {
    border-top: 2px solid #777;
    border-bottom: 2px solid #777;
    padding: 14px 8px 6px;
}

.bars[b-7020erb9fn] {
    height: 220px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    align-items: flex-end;
    border-left: 1px solid #cfc7b9;
    border-bottom: 1px solid #cfc7b9;
    padding: 0 8px;
}

.bar-wrap[b-7020erb9fn] {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

.bar-grade[b-7020erb9fn] {
    font-size: 13px;
    font-weight: 900;
    color: #333;
    line-height: 1;
}

.bar[b-7020erb9fn] {
    width: 28px;
    background: linear-gradient(180deg, #d8293c, #a61d2d);
    border-radius: 4px 4px 0 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
    min-height: 4px;
    transition: height 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.bar-labels[b-7020erb9fn] {
    margin-top: 8px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    text-align: center;
    font-size: 9px;
    font-weight: 800;
    color: #454545;
}

.cert-footer[b-7020erb9fn] {
    margin-top: 72px;
    display: grid;
    grid-template-columns: 1fr 160px 1fr;
    gap: 34px;
    align-items: end;
}

.signature[b-7020erb9fn] {
    border-bottom: 2px solid #b9b2a2;
    padding-bottom: 8px;
    min-height: 74px;
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 34px;
    color: #252525;
    display: flex;
    align-items: flex-end;
}

.sig-name[b-7020erb9fn] {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 800;
    color: #4b514d;
}

.seal[b-7020erb9fn] {
    width: 148px;
    height: 148px;
    border: 4px solid rgba(181, 31, 53, 0.75);
    border-radius: 50%;
    display: grid;
    place-items: center;
    text-align: center;
    color: #b51f35;
    font-weight: 900;
    font-size: 13px;
    line-height: 1.35;
    text-transform: uppercase;
    transform: rotate(-8deg);
    opacity: 0.85;
    margin: 0 auto;
    font-family: var(--font-vietnamese-ui, "Be Vietnam Pro", "Inter", system-ui, sans-serif);
}

.verify[b-7020erb9fn] {
    border-top: 2px solid #b9b2a2;
    padding-top: 12px;
    font-size: 13px;
    font-weight: 800;
    color: #232a2f;
    line-height: 1.6;
}

.verify strong[b-7020erb9fn] {
    display: block;
    font-size: 22px;
    margin-bottom: 6px;
    color: #1f5b3a;
}

.small-print[b-7020erb9fn] {
    margin-top: 38px;
    font-size: 11px;
    line-height: 1.55;
    color: #6f6657;
    max-width: 760px;
}

.certificate-loading[b-7020erb9fn] {
    padding: 3rem 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}

@media print {
    .certificate[b-7020erb9fn],
    .certificate *[b-7020erb9fn] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .certificate-shell[b-7020erb9fn] {
        background: white;
        padding: 0;
    }

    .page-wrap[b-7020erb9fn] {
        padding: 0;
        max-width: none;
    }

    .toolbar[b-7020erb9fn] {
        display: none !important;
    }

    .certificate[b-7020erb9fn] {
        box-shadow: none;
        border: 0;
        width: 210mm;
        min-height: 297mm;
        margin: 0 auto;
        padding: 40px 54px 36px;
    }

    .certificate[b-7020erb9fn]::after {
        display: none;
    }
}

@media (max-width: 900px) {
    .certificate[b-7020erb9fn] {
        padding: 40px 36px 36px;
        min-height: auto;
    }

    .title-block h1[b-7020erb9fn] {
        font-size: 40px;
    }

    .score-layout[b-7020erb9fn] {
        grid-template-columns: 1fr;
    }

    .cert-footer[b-7020erb9fn] {
        grid-template-columns: 1fr;
        gap: 24px;
        text-align: center;
    }

    .seal[b-7020erb9fn] {
        margin: 0 auto;
    }

    .verify[b-7020erb9fn] {
        border-left: none;
    }
}

@media (max-width: 640px) {
    .certificate[b-7020erb9fn] {
        padding: 28px 20px 28px;
    }

    .toolbar[b-7020erb9fn] {
        flex-direction: column;
        align-items: stretch;
    }

    .toolbar-actions[b-7020erb9fn] {
        justify-content: flex-end;
    }

    .info-grid[b-7020erb9fn] {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-top: 40px;
    }

    .title-block h1[b-7020erb9fn] {
        font-size: 32px;
        letter-spacing: -1px;
    }

    .eyebrow[b-7020erb9fn] {
        font-size: 20px;
    }

    .certificate[b-7020erb9fn]::after {
        font-size: 52px;
    }

    .cert-footer[b-7020erb9fn] {
        margin-top: 48px;
    }
}
/* _content/AptisWeb/Components/Pages/Student/IeltsCertificate.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   IELTS Practice Test Report Form
   ═══════════════════════════════════════════════════════════ */

.ielts-cert-shell[b-1ych0n23op] {
    --ielts-ink: #9b1c34;
    --ielts-ink-deep: #76162a;
    --ielts-accent: #c0392b;
    --ielts-navy: #1d3557;
    --ielts-paper: #fffefb;
    --ielts-line: rgba(118, 22, 42, 0.14);
    min-height: calc(100vh - 4rem);
    padding: 1.5rem 1rem 3rem;
    background:
        radial-gradient(circle at top left, rgba(155, 28, 52, 0.1), transparent 24rem),
        radial-gradient(circle at bottom right, rgba(29, 53, 87, 0.1), transparent 30rem),
        linear-gradient(180deg, #f7f1ef 0%, #faf5f2 46%, #f5eeeb 100%);
}

.ielts-cert-toolbar[b-1ych0n23op],
.ielts-cert[b-1ych0n23op],
.ielts-cert-loading[b-1ych0n23op] {
    max-width: 1180px;
    margin: 0 auto;
}

.ielts-cert-toolbar[b-1ych0n23op] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.ielts-cert-toolbar-actions[b-1ych0n23op] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* ── main card ── */
.ielts-cert[b-1ych0n23op] {
    position: relative;
    overflow: hidden;
    padding: 3.4rem 3rem 2.5rem;
    border: 14px solid rgba(255, 255, 255, 0.92);
    border-radius: 24px;
    background:
        radial-gradient(circle at 50% 24%, rgba(255, 255, 255, 0.995), rgba(252, 248, 247, 0.985) 46%, rgba(248, 242, 240, 0.97) 100%);
    box-shadow:
        0 24px 70px rgba(118, 22, 42, 0.12),
        inset 0 0 0 1px rgba(118, 22, 42, 0.08);
}

/* ── animations ── */
@keyframes ieltsFadeUp-b-1ych0n23op {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes ieltsBarGrow-b-1ych0n23op {
    from { width: 0; }
    to   { width: var(--bar-pct); }
}

.anim-enter[b-1ych0n23op] {
    animation: ieltsScaleIn-b-1ych0n23op 0.55s cubic-bezier(0.19, 1, 0.22, 1) both;
}

.anim-child[b-1ych0n23op] {
    opacity: 0;
    animation: ieltsFadeUp-b-1ych0n23op 0.5s cubic-bezier(0.19, 1, 0.22, 1) both;
    animation-delay: calc(var(--i, 0) * 0.07s + 0.12s);
}

/* ── decorative ── */
.ielts-cert-top-band[b-1ych0n23op] {
    position: absolute;
    inset: 12px 12px auto;
    height: 12px;
    z-index: 0;
    background: linear-gradient(90deg, var(--ielts-ink-deep) 0%, var(--ielts-accent) 55%, var(--ielts-navy) 100%);
    border-radius: 12px 12px 0 0;
}

.ielts-cert-frame[b-1ych0n23op] {
    position: absolute;
    inset: 26px;
    z-index: 0;
    border: 1px solid var(--ielts-line);
    border-radius: 16px;
    pointer-events: none;
}

.ielts-cert-watermark[b-1ych0n23op] {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.025;
    pointer-events: none;
    background: repeating-linear-gradient(-45deg, transparent, transparent 80px, rgba(118, 22, 42, 0.6) 80px, rgba(118, 22, 42, 0.6) 81px);
}

.ielts-cert-header[b-1ych0n23op],
.ielts-cert-title-block[b-1ych0n23op],
.ielts-cert-hero[b-1ych0n23op],
.ielts-cert-meta-grid[b-1ych0n23op],
.ielts-cert-scores[b-1ych0n23op],
.ielts-cert-footer[b-1ych0n23op] {
    position: relative;
    z-index: 1;
}

/* ── header ── */
.ielts-cert-header[b-1ych0n23op] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
}

.ielts-brand[b-1ych0n23op] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ielts-brand-logo[b-1ych0n23op] {
    width: 78px;
    height: 78px;
    object-fit: contain;
}

.ielts-brand-name[b-1ych0n23op] {
    color: var(--ielts-ink-deep);
    font-size: clamp(1.9rem, 2.6vw, 2.5rem);
    font-weight: 900;
    letter-spacing: 0.1em;
    line-height: 1;
}

.ielts-brand-subtitle[b-1ych0n23op] {
    margin-top: 0.4rem;
    color: rgba(118, 22, 42, 0.6);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}

.ielts-band-badge[b-1ych0n23op] {
    min-width: 150px;
    padding: 0.85rem 1.4rem;
    border-radius: 16px;
    background: linear-gradient(160deg, var(--ielts-ink) 0%, var(--ielts-accent) 100%);
    color: #fff;
    text-align: center;
    box-shadow: 0 10px 24px rgba(118, 22, 42, 0.22);
}

.ielts-band-badge span[b-1ych0n23op] {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.75);
}

.ielts-band-badge strong[b-1ych0n23op] {
    display: block;
    margin-top: 0.2rem;
    font-size: 2.1rem;
    line-height: 1;
}

/* ── title ── */
.ielts-cert-title-block[b-1ych0n23op] {
    margin-top: 1.75rem;
    text-align: center;
}

.ielts-cert-title-row[b-1ych0n23op] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.ielts-cert-title-line[b-1ych0n23op] {
    width: min(12rem, 20vw);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(118, 22, 42, 0.4), transparent);
}

.ielts-cert-title-label[b-1ych0n23op] {
    margin: 0;
    color: var(--ielts-accent);
    font-size: clamp(1.2rem, 1.6vw, 1.55rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ── hero ── */
.ielts-cert-hero[b-1ych0n23op] {
    margin-top: 1.25rem;
    text-align: center;
}

.ielts-cert-hero h1[b-1ych0n23op] {
    margin: 0;
    color: var(--ielts-ink-deep);
    font-size: clamp(2.6rem, 5.4vw, 4.2rem);
    line-height: 1;
    letter-spacing: -0.02em;
}

.ielts-cert-summary[b-1ych0n23op] {
    max-width: 50rem;
    margin: 1.1rem auto 0;
    color: rgba(118, 22, 42, 0.75);
    font-size: clamp(0.98rem, 1.2vw, 1.12rem);
    line-height: 1.6;
}

/* ── meta grid ── */
.ielts-cert-meta-grid[b-1ych0n23op] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.75rem;
}

.ielts-meta-card[b-1ych0n23op] {
    padding: 1.1rem 1.25rem;
    border-radius: 16px;
    border: 1px solid var(--ielts-line);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 245, 243, 0.96));
    box-shadow: 0 6px 16px rgba(118, 22, 42, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ielts-meta-card:hover[b-1ych0n23op] {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(118, 22, 42, 0.08);
}

.ielts-meta-label[b-1ych0n23op] {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(118, 22, 42, 0.58);
}

.ielts-meta-card strong[b-1ych0n23op] {
    display: block;
    margin-top: 0.4rem;
    color: var(--ielts-ink-deep);
    font-size: 1.05rem;
    line-height: 1.3;
    word-break: break-word;
}

/* ── scores ── */
.ielts-cert-scores[b-1ych0n23op] {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
    align-items: stretch;
}

/* overall panel */
.ielts-overall-panel[b-1ych0n23op] {
    position: relative;
    overflow: hidden;
    padding: 1.75rem 1.5rem;
    border-radius: 18px;
    background: linear-gradient(170deg, #76162a 0%, #9b1c34 55%, #c0392b 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 14px 30px rgba(118, 22, 42, 0.22);
}

.ielts-overall-label[b-1ych0n23op] {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.75);
}

.ielts-overall-value[b-1ych0n23op] {
    margin-top: 0.4rem;
    font-size: 4.6rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.18);
}

.ielts-overall-scale[b-1ych0n23op] {
    margin-top: 0.3rem;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.65);
}

.ielts-overall-proficiency[b-1ych0n23op] {
    margin-top: 1rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* module grid */
.ielts-module-grid[b-1ych0n23op] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-content: start;
}

.ielts-module-card[b-1ych0n23op] {
    padding: 1.25rem 1.35rem;
    border-radius: 16px;
    border: 1px solid var(--ielts-line);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 245, 243, 0.96));
    box-shadow: 0 6px 16px rgba(118, 22, 42, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ielts-module-card:hover[b-1ych0n23op] {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(118, 22, 42, 0.1);
}

.ielts-module-card-header[b-1ych0n23op] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.ielts-module-name-group[b-1ych0n23op] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ielts-module-icon[b-1ych0n23op] {
    font-size: 0.95rem;
}

.ielts-module-name[b-1ych0n23op] {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(118, 22, 42, 0.64);
}

.ielts-module-band[b-1ych0n23op] {
    min-width: 2.6rem;
    padding: 0.25rem 0.7rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--band-color) 12%, white);
    color: var(--band-color);
    border: 1px solid color-mix(in srgb, var(--band-color) 28%, transparent);
    font-size: 1.05rem;
    font-weight: 800;
    text-align: center;
}

.ielts-module-bar[b-1ych0n23op] {
    margin-top: 0.85rem;
    height: 6px;
    border-radius: 999px;
    background: rgba(118, 22, 42, 0.07);
    overflow: hidden;
}

.ielts-module-bar-fill[b-1ych0n23op] {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--bar-color), color-mix(in srgb, var(--bar-color) 65%, white));
    width: var(--bar-pct);
    animation: ieltsBarGrow-b-1ych0n23op 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.7s both;
}

.ielts-module-proficiency[b-1ych0n23op] {
    display: block;
    margin-top: 0.65rem;
    font-size: 0.78rem;
    color: rgba(118, 22, 42, 0.6);
    line-height: 1.4;
}

/* ── footer ── */
.ielts-cert-footer[b-1ych0n23op] {
    margin-top: 1.85rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--ielts-line);
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.ielts-cert-seal[b-1ych0n23op] {
    flex-shrink: 0;
}

.ielts-seal-svg[b-1ych0n23op] {
    width: 82px;
    height: 82px;
    opacity: 0.8;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.ielts-cert-footer:hover .ielts-seal-svg[b-1ych0n23op] {
    opacity: 1;
    transform: rotate(5deg);
}

.ielts-cert-footnote[b-1ych0n23op] {
    display: grid;
    gap: 0.4rem;
}

.ielts-cert-footnote-main[b-1ych0n23op] {
    color: rgba(118, 22, 42, 0.78);
    font-size: 0.95rem;
    line-height: 1.55;
}

.ielts-cert-footnote-main strong[b-1ych0n23op] {
    color: var(--ielts-ink-deep);
}

.ielts-cert-footnote-sub[b-1ych0n23op] {
    color: rgba(118, 22, 42, 0.55);
    font-size: 0.86rem;
    font-style: italic;
    line-height: 1.5;
}

.ielts-cert-footnote-id[b-1ych0n23op] {
    margin-top: 0.2rem;
    color: rgba(118, 22, 42, 0.42);
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    font-family: monospace;
}

.ielts-cert-loading[b-1ych0n23op] {
    padding: 3rem 1.5rem;
}

/* ── responsive ── */
@media (max-width: 1024px) {
    .ielts-cert-scores[b-1ych0n23op] {
        grid-template-columns: 1fr;
    }

    .ielts-cert-meta-grid[b-1ych0n23op] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .ielts-cert[b-1ych0n23op] {
        padding: 2.6rem 1.4rem 1.8rem;
        border-width: 9px;
    }

    .ielts-cert-header[b-1ych0n23op] {
        flex-direction: column;
    }

    .ielts-module-grid[b-1ych0n23op] {
        grid-template-columns: 1fr;
    }

    .ielts-cert-toolbar[b-1ych0n23op] {
        flex-direction: column;
        align-items: stretch;
    }

    .ielts-cert-footer[b-1ych0n23op] {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 560px) {
    .ielts-cert-toolbar-actions[b-1ych0n23op] {
        flex-direction: column;
        width: 100%;
    }

    .ielts-cert-meta-grid[b-1ych0n23op] {
        grid-template-columns: 1fr;
    }

    .ielts-cert-title-line[b-1ych0n23op] {
        display: none;
    }

    .ielts-overall-value[b-1ych0n23op] {
        font-size: 3.6rem;
    }
}

/* ── print ── */
@media print {
    body[b-1ych0n23op] {
        background: #fff;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .ielts-cert-shell[b-1ych0n23op] {
        background: #fff;
        padding: 0;
    }

    .ielts-cert-toolbar[b-1ych0n23op] {
        display: none;
    }

    .ielts-cert[b-1ych0n23op] {
        max-width: none;
        border-radius: 0;
        box-shadow: none;
        padding: 2.4rem 2rem;
    }

    .anim-enter[b-1ych0n23op],
    .anim-child[b-1ych0n23op] {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .ielts-module-bar-fill[b-1ych0n23op] {
        animation: none !important;
        width: var(--bar-pct) !important;
    }

    .ielts-meta-card:hover[b-1ych0n23op],
    .ielts-module-card:hover[b-1ych0n23op] {
        transform: none;
        box-shadow: none;
    }
}
/* _content/AptisWeb/Components/Pages/Student/LeaderboardPage.razor.rz.scp.css */
/* ── Leaderboard full page ─────────────────────────── */

.lb-page[b-4swmgm98rr] {
    max-width: 640px;
    margin: 0 auto;
    padding: 24px 16px 48px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.lb-page--loading[b-4swmgm98rr] {
    gap: 16px;
}

/* Skeleton */
.lb-page__skeleton-hero[b-4swmgm98rr] {
    height: 180px;
    border-radius: var(--r-lg);
    background: linear-gradient(90deg, var(--muted) 25%, rgba(0,0,0,0.05) 50%, var(--muted) 75%);
    background-size: 200% 100%;
    animation: lb-shimmer-b-4swmgm98rr 1.4s infinite;
}

.lb-page__skeleton-list[b-4swmgm98rr] {
    height: 320px;
    border-radius: var(--r-lg);
    background: linear-gradient(90deg, var(--muted) 25%, rgba(0,0,0,0.05) 50%, var(--muted) 75%);
    background-size: 200% 100%;
    animation: lb-shimmer-b-4swmgm98rr 1.4s infinite 0.2s;
}

@keyframes lb-shimmer-b-4swmgm98rr {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* Loading spinner */
.lb-loading[b-4swmgm98rr] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 48px 0;
    font-size: 13px;
    color: var(--text-3);
}

.lb-loading__spinner[b-4swmgm98rr] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--border);
    border-top-color: var(--brand);
    animation: lb-spin-b-4swmgm98rr 0.8s linear infinite;
}

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

/* ── Header ── */
.lb-page__header[b-4swmgm98rr] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.lb-back[b-4swmgm98rr] {
    width: 32px;
    height: 32px;
    border-radius: var(--r-md);
    border: 0.5px solid var(--border);
    background: var(--surface);
    color: var(--text-2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    transition: background var(--t-fast), color var(--t-fast);
}

.lb-back:hover[b-4swmgm98rr] {
    background: var(--muted);
    color: var(--text);
}

.lb-page__title-wrap[b-4swmgm98rr] {
    display: flex;
    gap: 10px;
    align-items: center;
    flex: 1;
}

.lb-page__icon[b-4swmgm98rr] {
    width: 34px;
    height: 34px;
    border-radius: var(--r-md);
    background: #FBEAF0;
    color: #993556;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lb-page__title[b-4swmgm98rr] {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}

.lb-page__sub[b-4swmgm98rr] {
    font-size: 11px;
    color: var(--text-3);
    margin: 2px 0 0;
}

/* Tabs */
.lb-tabs[b-4swmgm98rr] {
    display: flex;
    gap: 4px;
    background: var(--muted);
    padding: 3px;
    border-radius: 8px;
    flex-shrink: 0;
}

.lb-tab[b-4swmgm98rr] {
    padding: 5px 12px;
    font-size: 11.5px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
    white-space: nowrap;
}

.lb-tab--active[b-4swmgm98rr] {
    background: var(--surface);
    color: var(--text);
    font-weight: 500;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.lb-tab:hover:not(.lb-tab--active)[b-4swmgm98rr] {
    color: var(--text);
}

/* ── Podium ── */
.lb-podium[b-4swmgm98rr] {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 8px;
    padding: 12px 0 0;
}

.lb-podium__slot[b-4swmgm98rr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
    max-width: 160px;
}

.lb-podium__name[b-4swmgm98rr] {
    font-size: 11px;
    font-weight: 500;
    color: var(--text);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    padding: 0 4px;
}

.lb-podium__score[b-4swmgm98rr] {
    font-size: 10px;
    color: var(--text-3);
}

.lb-podium__stand[b-4swmgm98rr] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: 8px 8px 0 0;
    padding: 10px 0 14px;
    position: relative;
}

.lb-podium__stand--gold[b-4swmgm98rr] {
    height: 80px;
    background: linear-gradient(160deg, #FAC747 0%, #E5A715 100%);
    color: #7A4F00;
}

.lb-podium__stand--silver[b-4swmgm98rr] {
    height: 60px;
    background: linear-gradient(160deg, #D0D7DE 0%, #B0BAC4 100%);
    color: #44546A;
}

.lb-podium__stand--bronze[b-4swmgm98rr] {
    height: 48px;
    background: linear-gradient(160deg, #E5A070 0%, #C07840 100%);
    color: #5A2D10;
}

.lb-podium__medal[b-4swmgm98rr] {
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

.lb-podium__crown[b-4swmgm98rr] {
    display: block;
    opacity: 0.8;
}

/* Podium avatars */
.lb-podium__avatar[b-4swmgm98rr] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 600;
    border: 2px solid var(--surface);
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}

.lb-podium__slot--gold .lb-podium__avatar[b-4swmgm98rr] {
    width: 52px;
    height: 52px;
    font-size: 16px;
    border-color: #FAC747;
    box-shadow: 0 2px 12px rgba(250,199,71,0.40);
}

/* ── Your position card ── */
.lb-you[b-4swmgm98rr] {
    display: flex;
    align-items: center;
    background: linear-gradient(120deg, #E1F5EE 0%, #D4F0E6 100%);
    border: 1px solid #9FE1CB;
    border-radius: var(--r-lg);
    padding: 14px 18px;
    overflow: hidden;
}

.lb-you__rank[b-4swmgm98rr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding-right: 16px;
}

.lb-you__rank-num[b-4swmgm98rr] {
    font-size: 22px;
    font-weight: 700;
    color: #0F6E56;
    line-height: 1;
}

.lb-you__rank-label[b-4swmgm98rr] {
    font-size: 10px;
    color: #37996E;
}

.lb-you__divider[b-4swmgm98rr] {
    width: 0.5px;
    height: 32px;
    background: rgba(15,110,86,0.20);
    flex-shrink: 0;
}

.lb-you__stat[b-4swmgm98rr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0 16px;
}

.lb-you__stat-num[b-4swmgm98rr] {
    font-size: 18px;
    font-weight: 600;
    color: #0F6E56;
    line-height: 1;
}

.lb-you__stat-label[b-4swmgm98rr] {
    font-size: 10px;
    color: #37996E;
}

.lb-you__hint[b-4swmgm98rr] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: #0F6E56;
    padding-left: 16px;
    flex: 1;
}

.lb-you__hint--top[b-4swmgm98rr] {
    font-weight: 500;
}

/* ── Search ── */
.lb-search-wrap[b-4swmgm98rr] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lb-search[b-4swmgm98rr] {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.lb-search__icon[b-4swmgm98rr] {
    position: absolute;
    left: 10px;
    color: var(--text-3);
    font-size: 13px;
    pointer-events: none;
}

.lb-search__input[b-4swmgm98rr] {
    width: 100%;
    padding: 8px 32px 8px 32px;
    border: 0.5px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
    outline: none;
    transition: border-color var(--t-fast);
}

.lb-search__input:focus[b-4swmgm98rr] {
    border-color: var(--brand);
}

.lb-search__input[b-4swmgm98rr]::placeholder {
    color: var(--text-3);
}

.lb-search__clear[b-4swmgm98rr] {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    color: var(--text-3);
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 2px;
    border-radius: 4px;
    font-size: 14px;
    transition: color var(--t-fast);
}

.lb-search__clear:hover[b-4swmgm98rr] {
    color: var(--text);
}

.lb-count[b-4swmgm98rr] {
    font-size: 11px;
    color: var(--text-3);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── List ── */
.lb-list[b-4swmgm98rr] {
    background: var(--surface);
    border: 0.5px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.lb-list__head[b-4swmgm98rr] {
    display: grid;
    grid-template-columns: 36px 40px 1fr 56px 48px;
    padding: 8px 12px;
    background: var(--muted);
    border-bottom: 0.5px solid var(--border);
    font-size: 10.5px;
    font-weight: 500;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.lb-list__col-rank[b-4swmgm98rr]   { text-align: center; }
.lb-list__col-avatar[b-4swmgm98rr] { }
.lb-list__col-name[b-4swmgm98rr]   { }
.lb-list__col-streak[b-4swmgm98rr] { text-align: center; }
.lb-list__col-score[b-4swmgm98rr]  { text-align: right; }

/* Entry row */
.lb-row[b-4swmgm98rr] {
    display: grid;
    grid-template-columns: 36px 40px 1fr 56px 48px;
    padding: 9px 12px;
    align-items: center;
    border-bottom: 0.5px solid var(--border);
    opacity: 0;
    animation: lb-row-in-b-4swmgm98rr 180ms ease-out forwards;
    animation-delay: var(--row-delay, 0ms);
    transition: background var(--t-fast);
}

.lb-row:last-child[b-4swmgm98rr] {
    border-bottom: none;
}

.lb-row:hover[b-4swmgm98rr] {
    background: var(--muted);
}

@keyframes lb-row-in-b-4swmgm98rr {
    from { opacity: 0; transform: translateY(3px); }
    to   { opacity: 1; transform: translateY(0); }
}

.lb-row--gold[b-4swmgm98rr]   { background: linear-gradient(90deg, rgba(250,199,71,0.10), transparent); }
.lb-row--silver[b-4swmgm98rr] { background: linear-gradient(90deg, rgba(180,189,200,0.12), transparent); }
.lb-row--bronze[b-4swmgm98rr] { background: linear-gradient(90deg, rgba(185,120,80,0.10), transparent); }
.lb-row--current[b-4swmgm98rr] {
    background: #E1F5EE;
    opacity: 1;
    animation: none;
}

.lb-row--current:hover[b-4swmgm98rr] {
    background: #D1EEE4;
}

/* Rank cell */
.lb-row__rank[b-4swmgm98rr] {
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lb-row__rank--gold[b-4swmgm98rr]   { color: #BA7517; }
.lb-row__rank--silver[b-4swmgm98rr] { color: #6B7280; }
.lb-row__rank--bronze[b-4swmgm98rr] { color: #9D6232; }

/* Avatar */
.lb-avatar[b-4swmgm98rr] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10.5px;
    font-weight: 600;
    flex-shrink: 0;
}

.lb-avatar--amber[b-4swmgm98rr]  { background: #FAEEDA; color: #BA7517; }
.lb-avatar--teal[b-4swmgm98rr]   { background: #E1F5EE; color: #0F6E56; }
.lb-avatar--pink[b-4swmgm98rr]   { background: #FBEAF0; color: #993556; }
.lb-avatar--purple[b-4swmgm98rr] { background: #EEEDFE; color: #534AB7; }
.lb-avatar--blue[b-4swmgm98rr]   { background: #E6F1FB; color: #185FA5; }
.lb-avatar--green[b-4swmgm98rr]  { background: #EAF3DE; color: #3B6D11; }
.lb-avatar--current[b-4swmgm98rr] {
    background: white;
    color: var(--brand);
    border: 1.5px solid var(--brand);
}

.lb-row__avatar-cell[b-4swmgm98rr] {
    display: flex;
    align-items: center;
}

/* Name */
.lb-row__name[b-4swmgm98rr] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
}

.lb-row__display-name[b-4swmgm98rr] {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lb-row__you-badge[b-4swmgm98rr] {
    font-size: 9.5px;
    font-weight: 600;
    background: #0F6E56;
    color: white;
    padding: 1px 6px;
    border-radius: 999px;
    flex-shrink: 0;
}

/* Streak */
.lb-row__streak[b-4swmgm98rr] {
    text-align: center;
    font-size: 12px;
    color: var(--text-2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

.lb-streak-icon[b-4swmgm98rr] {
    color: #E5761A;
    font-size: 12px;
}

/* Score */
.lb-row__score[b-4swmgm98rr] {
    text-align: right;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text);
}

/* Empty */
.lb-empty[b-4swmgm98rr] {
    padding: 32px;
    text-align: center;
    font-size: 13px;
    color: var(--text-3);
}

/* ── Pagination ── */
.lb-pagination[b-4swmgm98rr] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding-top: 4px;
}

.lb-page-btn[b-4swmgm98rr] {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: 6px;
    border: 0.5px solid var(--border);
    background: var(--surface);
    color: var(--text-2);
    font-size: 12.5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.lb-page-btn:hover:not(:disabled):not(.lb-page-btn--active)[b-4swmgm98rr] {
    background: var(--muted);
    color: var(--text);
}

.lb-page-btn--active[b-4swmgm98rr] {
    background: var(--brand);
    color: white;
    border-color: var(--brand);
    font-weight: 500;
}

.lb-page-btn:disabled[b-4swmgm98rr] {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ── Responsive ── */
@media (max-width: 480px) {
    .lb-page[b-4swmgm98rr] {
        padding: 16px 12px 40px;
    }

    .lb-tabs[b-4swmgm98rr] {
        flex: 1 1 100%;
        order: 3;
    }

    .lb-you[b-4swmgm98rr] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .lb-you__hint[b-4swmgm98rr] {
        flex: 1 1 100%;
        padding-left: 0;
        border-top: 0.5px solid rgba(15,110,86,0.15);
        padding-top: 8px;
    }

    .lb-list__col-streak[b-4swmgm98rr],
    .lb-row__streak[b-4swmgm98rr] {
        display: none;
    }

    .lb-list__head[b-4swmgm98rr],
    .lb-row[b-4swmgm98rr] {
        grid-template-columns: 36px 36px 1fr 48px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .lb-row[b-4swmgm98rr] {
        animation: none;
        opacity: 1;
    }
    .lb-page__skeleton-hero[b-4swmgm98rr],
    .lb-page__skeleton-list[b-4swmgm98rr] {
        animation: none;
    }
    .lb-loading__spinner[b-4swmgm98rr] {
        animation: none;
    }
}
/* _content/AptisWeb/Components/Pages/Student/PracticeCertificate.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   Aptis Practice Certificate — Document Style v3
   ═══════════════════════════════════════════════════════════ */

/* ── shell wrapper ── */
.certificate-shell[b-p1elnr13r3] {
    min-height: calc(100vh - 4rem);
    padding: 0;
    background: #f3efe3;
}

.page-wrap[b-p1elnr13r3] {
    max-width: 960px;
    margin: 0 auto;
    padding: 32px 20px 64px;
}

/* ── toolbar ── */
.toolbar[b-p1elnr13r3] {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.toolbar-actions[b-p1elnr13r3] {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ── certificate document ── */
.certificate[b-p1elnr13r3] {
    position: relative;
    width: 100%;
    min-height: 1180px;
    background: #fffdf7;
    border: 1px solid #ded6c4;
    box-shadow: 0 18px 50px rgba(30, 40, 20, 0.16);
    padding: 54px 64px 48px;
    overflow: hidden;
    font-family: var(--font-vietnamese-ui, "Be Vietnam Pro", "Inter", system-ui, sans-serif);
    color: #1d2b22;
}

/* inner decorative border */
.certificate[b-p1elnr13r3]::before {
    content: "";
    position: absolute;
    inset: 18px;
    border: 3px solid #d8c9a8;
    pointer-events: none;
    z-index: 0;
}

/* watermark */
.certificate[b-p1elnr13r3]::after {
    content: "LOCAL DEMO";
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-28deg);
    font-size: 96px;
    font-weight: 900;
    letter-spacing: 8px;
    color: rgba(170, 40, 40, 0.08);
    white-space: nowrap;
    pointer-events: none;
    z-index: 0;
}

.certificate--showcase[b-p1elnr13r3]::after {
    content: "SHOWCASE";
    top: 40%;
    font-size: 108px;
    color: rgba(181, 31, 53, 0.12);
}

/* ── all content sections above watermark ── */
.cert-top[b-p1elnr13r3],
.title-block[b-p1elnr13r3],
.info-grid[b-p1elnr13r3],
.score-card[b-p1elnr13r3],
.cert-footer[b-p1elnr13r3],
.small-print[b-p1elnr13r3] {
    position: relative;
    z-index: 2;
}

/* ── top: brand + QR ── */
.cert-top[b-p1elnr13r3] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.brand[b-p1elnr13r3] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brand-mark[b-p1elnr13r3] {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: linear-gradient(135deg, #1f5b3a, #8a1f2d);
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 900;
    font-size: 20px;
    letter-spacing: -1px;
    flex-shrink: 0;
}

.brand-name[b-p1elnr13r3] {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -0.5px;
    color: #1f5b3a;
    line-height: 1.1;
}

.brand-sub[b-p1elnr13r3] {
    margin-top: 4px;
    font-size: 11px;
    color: #6f6657;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    font-weight: 700;
}

/* CSS-only QR placeholder */
.qr[b-p1elnr13r3] {
    width: 108px;
    height: 108px;
    border: 8px solid #fff;
    outline: 1px solid #d8d0c0;
    background:
        linear-gradient(90deg, #222 10px, transparent 10px) 0 0 / 20px 20px,
        linear-gradient(#222 10px, transparent 10px) 0 0 / 20px 20px,
        #fff;
    position: relative;
    flex-shrink: 0;
}

.qr[b-p1elnr13r3]::after {
    content: "LOCAL";
    position: absolute;
    inset: 30px 12px;
    display: grid;
    place-items: center;
    background: #fffdf7;
    border: 1px solid #222;
    font-size: 11px;
    font-weight: 900;
    color: #1d2b22;
}

.qr--showcase[b-p1elnr13r3]::after {
    content: "SHOW";
}

/* ── title block ── */
.title-block[b-p1elnr13r3] {
    margin-top: 70px;
}

.eyebrow[b-p1elnr13r3] {
    color: #b51f35;
    font-weight: 900;
    font-size: 26px;
}

.red-line[b-p1elnr13r3] {
    width: 72px;
    height: 5px;
    background: #b51f35;
    margin: 14px 0 18px;
    border-radius: 999px;
}

.title-block h1[b-p1elnr13r3] {
    margin: 0;
    font-size: 52px;
    line-height: 1.05;
    letter-spacing: -2px;
    color: #232a2f;
}

.cert-subtitle[b-p1elnr13r3] {
    margin-top: 12px;
    font-size: 17px;
    color: #4b514d;
    font-weight: 700;
}

.notice[b-p1elnr13r3] {
    margin-top: 18px;
    display: inline-block;
    padding: 8px 14px;
    background: #fff2f2;
    border: 1px solid #efc9c9;
    color: #9d1e2f;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.notice--showcase[b-p1elnr13r3] {
    background: #fff5e8;
    border-color: #efdbb9;
    color: #8e4a00;
}

/* ── info grid ── */
.info-grid[b-p1elnr13r3] {
    margin-top: 64px;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 0.8fr;
    gap: 26px 32px;
}

.field[b-p1elnr13r3] {
    border-top: 2px solid #b9b2a2;
    padding-top: 8px;
    min-height: 50px;
}

.field-label[b-p1elnr13r3] {
    font-size: 11px;
    color: #6b6355;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.field-value[b-p1elnr13r3] {
    margin-top: 5px;
    font-size: 15px;
    font-weight: 800;
    color: #18251d;
    word-break: break-word;
}

/* ── score card ── */
.score-card[b-p1elnr13r3] {
    margin-top: 58px;
    border: 4px solid #30383b;
    background: rgba(255, 255, 255, 0.82);
    padding: 22px 24px 26px;
}

.overall[b-p1elnr13r3] {
    font-size: 24px;
    font-weight: 900;
    color: #b51f35;
    border-bottom: 2px solid #bbb3a4;
    padding-bottom: 14px;
    margin-bottom: 22px;
}

.score-layout[b-p1elnr13r3] {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 28px;
    align-items: start;
}

.section-title[b-p1elnr13r3] {
    font-size: 18px;
    font-weight: 900;
    margin-bottom: 10px;
    color: #222;
}

/* ── score table ── */
table[b-p1elnr13r3] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

th[b-p1elnr13r3] {
    text-align: left;
    border-bottom: 2px solid #777;
    padding: 8px 6px;
    font-size: 13px;
    color: #333;
}

td[b-p1elnr13r3] {
    border-bottom: 1px solid #ddd5c6;
    padding: 8px 6px;
    font-weight: 700;
}

td:last-child[b-p1elnr13r3],
th:last-child[b-p1elnr13r3] {
    text-align: right;
}

/* ── bar chart ── */
.bar-chart[b-p1elnr13r3] {
    border-top: 2px solid #777;
    border-bottom: 2px solid #777;
    padding: 14px 8px 6px;
}

.bars[b-p1elnr13r3] {
    height: 220px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    align-items: flex-end;
    border-left: 1px solid #cfc7b9;
    border-bottom: 1px solid #cfc7b9;
    padding: 0 8px;
}

.bar-wrap[b-p1elnr13r3] {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

.bar-grade[b-p1elnr13r3] {
    font-size: 13px;
    font-weight: 900;
    color: #333;
    line-height: 1;
}

.bar[b-p1elnr13r3] {
    width: 34px;
    background: linear-gradient(180deg, #d8293c, #a61d2d);
    border-radius: 4px 4px 0 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
    min-height: 4px;
    transition: height 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.bar-labels[b-p1elnr13r3] {
    margin-top: 8px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    text-align: center;
    font-size: 10px;
    font-weight: 800;
    color: #454545;
}

/* ── footer ── */
.cert-footer[b-p1elnr13r3] {
    margin-top: 72px;
    display: grid;
    grid-template-columns: 1fr 160px 1fr;
    gap: 34px;
    align-items: end;
}

.signature[b-p1elnr13r3] {
    border-bottom: 2px solid #b9b2a2;
    padding-bottom: 8px;
    min-height: 74px;
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 34px;
    color: #252525;
    display: flex;
    align-items: flex-end;
}

.sig-name[b-p1elnr13r3] {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 800;
    color: #4b514d;
}

.seal[b-p1elnr13r3] {
    width: 148px;
    height: 148px;
    border: 4px solid rgba(181, 31, 53, 0.75);
    border-radius: 50%;
    display: grid;
    place-items: center;
    text-align: center;
    color: #b51f35;
    font-weight: 900;
    font-size: 13px;
    line-height: 1.35;
    text-transform: uppercase;
    transform: rotate(-8deg);
    opacity: 0.85;
    margin: 0 auto;
    font-family: var(--font-vietnamese-ui, "Be Vietnam Pro", "Inter", system-ui, sans-serif);
}

.verify[b-p1elnr13r3] {
    border-top: 2px solid #b9b2a2;
    padding-top: 12px;
    font-size: 13px;
    font-weight: 800;
    color: #232a2f;
    line-height: 1.6;
}

.verify strong[b-p1elnr13r3] {
    display: block;
    font-size: 22px;
    margin-bottom: 6px;
    color: #1f5b3a;
}

/* ── small print ── */
.small-print[b-p1elnr13r3] {
    margin-top: 38px;
    font-size: 11px;
    line-height: 1.55;
    color: #6f6657;
    max-width: 760px;
}

/* ── loading ── */
.certificate-loading[b-p1elnr13r3] {
    padding: 3rem 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════
   Print
   ═══════════════════════════════════════════════════════════ */
@media print {
    .certificate[b-p1elnr13r3],
    .certificate *[b-p1elnr13r3] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .certificate-shell[b-p1elnr13r3] {
        background: white;
        padding: 0;
    }

    .page-wrap[b-p1elnr13r3] {
        padding: 0;
        max-width: none;
    }

    .toolbar[b-p1elnr13r3] {
        display: none !important;
    }

    .certificate[b-p1elnr13r3] {
        box-shadow: none;
        border: 0;
        width: 210mm;
        min-height: 297mm;
        margin: 0 auto;
        padding: 40px 54px 36px;
    }

    /* disable watermark on print */
    .certificate[b-p1elnr13r3]::after {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .certificate[b-p1elnr13r3] {
        padding: 40px 36px 36px;
        min-height: auto;
    }

    .title-block h1[b-p1elnr13r3] {
        font-size: 40px;
    }

    .score-layout[b-p1elnr13r3] {
        grid-template-columns: 1fr;
    }

    .cert-footer[b-p1elnr13r3] {
        grid-template-columns: 1fr;
        gap: 24px;
        text-align: center;
    }

    .seal[b-p1elnr13r3] {
        margin: 0 auto;
    }

    .verify[b-p1elnr13r3] {
        border-top: 2px solid #b9b2a2;
        border-left: none;
    }
}

@media (max-width: 640px) {
    .certificate[b-p1elnr13r3] {
        padding: 28px 20px 28px;
    }

    .toolbar[b-p1elnr13r3] {
        flex-direction: column;
        align-items: stretch;
    }

    .toolbar-actions[b-p1elnr13r3] {
        justify-content: flex-end;
    }

    .info-grid[b-p1elnr13r3] {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-top: 40px;
    }

    .title-block h1[b-p1elnr13r3] {
        font-size: 32px;
        letter-spacing: -1px;
    }

    .eyebrow[b-p1elnr13r3] {
        font-size: 20px;
    }

    .certificate[b-p1elnr13r3]::after {
        font-size: 52px;
    }

    .cert-footer[b-p1elnr13r3] {
        margin-top: 48px;
    }
}
/* _content/AptisWeb/Components/Pages/Student/ToeicCertificate.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   TOEIC Practice Score Report
   ═══════════════════════════════════════════════════════════ */

.toeic-cert-shell[b-hn1hcdzjdy] {
    --toeic-ink: #143783;
    --toeic-ink-deep: #0f2a63;
    --toeic-accent: #2e6eb5;
    --toeic-crimson: #c0392b;
    --toeic-paper: #fffefb;
    --toeic-line: rgba(20, 55, 131, 0.14);
    min-height: calc(100vh - 4rem);
    padding: 1.5rem 1rem 3rem;
    background:
        radial-gradient(circle at top left, rgba(46, 110, 181, 0.12), transparent 24rem),
        radial-gradient(circle at bottom right, rgba(192, 57, 43, 0.08), transparent 30rem),
        linear-gradient(180deg, #eef2f8 0%, #f4f6fb 46%, #eef1f7 100%);
}

.toeic-cert-toolbar[b-hn1hcdzjdy],
.toeic-cert[b-hn1hcdzjdy],
.toeic-cert-loading[b-hn1hcdzjdy] {
    max-width: 1180px;
    margin: 0 auto;
}

.toeic-cert-toolbar[b-hn1hcdzjdy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.toeic-cert-toolbar-actions[b-hn1hcdzjdy] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* ── main card ── */
.toeic-cert[b-hn1hcdzjdy] {
    position: relative;
    overflow: hidden;
    padding: 3.4rem 3rem 2.5rem;
    border: 14px solid rgba(255, 255, 255, 0.92);
    border-radius: 24px;
    background:
        radial-gradient(circle at 50% 24%, rgba(255, 255, 255, 0.995), rgba(248, 250, 253, 0.985) 46%, rgba(240, 244, 250, 0.97) 100%);
    box-shadow:
        0 24px 70px rgba(20, 55, 131, 0.12),
        inset 0 0 0 1px rgba(20, 55, 131, 0.08);
}

/* ── animations ── */
@keyframes toeicFadeUp-b-hn1hcdzjdy {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes toeicBarGrow-b-hn1hcdzjdy {
    from { width: 0; }
    to   { width: var(--bar-pct); }
}

.anim-enter[b-hn1hcdzjdy] {
    animation: toeicScaleIn-b-hn1hcdzjdy 0.55s cubic-bezier(0.19, 1, 0.22, 1) both;
}

.anim-child[b-hn1hcdzjdy] {
    opacity: 0;
    animation: toeicFadeUp-b-hn1hcdzjdy 0.5s cubic-bezier(0.19, 1, 0.22, 1) both;
    animation-delay: calc(var(--i, 0) * 0.07s + 0.12s);
}

/* ── decorative ── */
.toeic-cert-top-band[b-hn1hcdzjdy] {
    position: absolute;
    inset: 12px 12px auto;
    height: 12px;
    z-index: 0;
    background: linear-gradient(90deg, var(--toeic-ink-deep) 0%, var(--toeic-accent) 50%, var(--toeic-crimson) 100%);
    border-radius: 12px 12px 0 0;
}

.toeic-cert-frame[b-hn1hcdzjdy] {
    position: absolute;
    inset: 26px;
    z-index: 0;
    border: 1px solid var(--toeic-line);
    border-radius: 16px;
    pointer-events: none;
}

.toeic-cert-watermark[b-hn1hcdzjdy] {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.025;
    pointer-events: none;
    background: repeating-linear-gradient(-45deg, transparent, transparent 80px, rgba(20, 55, 131, 0.6) 80px, rgba(20, 55, 131, 0.6) 81px);
}

.toeic-cert-header[b-hn1hcdzjdy],
.toeic-cert-title-block[b-hn1hcdzjdy],
.toeic-cert-hero[b-hn1hcdzjdy],
.toeic-cert-meta-grid[b-hn1hcdzjdy],
.toeic-cert-scores[b-hn1hcdzjdy],
.toeic-cert-footer[b-hn1hcdzjdy] {
    position: relative;
    z-index: 1;
}

/* ── header ── */
.toeic-cert-header[b-hn1hcdzjdy] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
}

.toeic-brand[b-hn1hcdzjdy] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.toeic-brand-logo[b-hn1hcdzjdy] {
    width: 78px;
    height: 78px;
    object-fit: contain;
}

.toeic-brand-name[b-hn1hcdzjdy] {
    color: var(--toeic-ink-deep);
    font-size: clamp(1.9rem, 2.6vw, 2.5rem);
    font-weight: 900;
    letter-spacing: 0.1em;
    line-height: 1;
}

.toeic-brand-subtitle[b-hn1hcdzjdy] {
    margin-top: 0.4rem;
    color: rgba(20, 55, 131, 0.62);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}

.toeic-cert-badge[b-hn1hcdzjdy] {
    min-width: 210px;
    padding: 0.85rem 1.4rem;
    border-radius: 16px;
    background: linear-gradient(160deg, var(--toeic-ink) 0%, var(--toeic-accent) 100%);
    color: #fff;
    text-align: center;
    box-shadow: 0 10px 24px rgba(20, 55, 131, 0.2);
}

.toeic-cert-badge span[b-hn1hcdzjdy] {
    display: block;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.75);
}

.toeic-cert-badge strong[b-hn1hcdzjdy] {
    display: block;
    margin-top: 0.2rem;
    font-size: 1.35rem;
    letter-spacing: 0.02em;
}

/* ── title ── */
.toeic-cert-title-block[b-hn1hcdzjdy] {
    margin-top: 1.75rem;
    text-align: center;
}

.toeic-cert-title-row[b-hn1hcdzjdy] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.toeic-cert-title-line[b-hn1hcdzjdy] {
    width: min(12rem, 20vw);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(20, 55, 131, 0.4), transparent);
}

.toeic-cert-title-label[b-hn1hcdzjdy] {
    margin: 0;
    color: var(--toeic-accent);
    font-size: clamp(1.2rem, 1.6vw, 1.55rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ── hero ── */
.toeic-cert-hero[b-hn1hcdzjdy] {
    margin-top: 1.25rem;
    text-align: center;
}

.toeic-cert-hero h1[b-hn1hcdzjdy] {
    margin: 0;
    color: var(--toeic-ink-deep);
    font-size: clamp(2.6rem, 5.4vw, 4.2rem);
    line-height: 1;
    letter-spacing: -0.02em;
}

.toeic-cert-summary[b-hn1hcdzjdy] {
    max-width: 50rem;
    margin: 1.1rem auto 0;
    color: rgba(20, 55, 131, 0.78);
    font-size: clamp(0.98rem, 1.2vw, 1.12rem);
    line-height: 1.6;
}

/* ── meta grid ── */
.toeic-cert-meta-grid[b-hn1hcdzjdy] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.75rem;
}

.toeic-meta-card[b-hn1hcdzjdy] {
    padding: 1.1rem 1.25rem;
    border-radius: 16px;
    border: 1px solid var(--toeic-line);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 248, 252, 0.96));
    box-shadow: 0 6px 16px rgba(20, 55, 131, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.toeic-meta-card:hover[b-hn1hcdzjdy] {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(20, 55, 131, 0.08);
}

.toeic-meta-label[b-hn1hcdzjdy] {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(20, 55, 131, 0.6);
}

.toeic-meta-card strong[b-hn1hcdzjdy] {
    display: block;
    margin-top: 0.4rem;
    color: var(--toeic-ink-deep);
    font-size: 1.08rem;
    line-height: 1.3;
    word-break: break-word;
}

/* ── scores ── */
.toeic-cert-scores[b-hn1hcdzjdy] {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
    align-items: stretch;
}

/* total panel */
.toeic-total-panel[b-hn1hcdzjdy] {
    position: relative;
    overflow: hidden;
    padding: 1.75rem 1.5rem;
    border-radius: 18px;
    background: linear-gradient(170deg, #143783 0%, #1d4ea0 60%, #2e6eb5 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 14px 30px rgba(20, 55, 131, 0.2);
}

.toeic-total-label[b-hn1hcdzjdy] {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.75);
}

.toeic-total-value[b-hn1hcdzjdy] {
    margin-top: 0.4rem;
    font-size: 4rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.18);
}

.toeic-total-value--small[b-hn1hcdzjdy] {
    font-size: 3rem;
}

.toeic-total-of[b-hn1hcdzjdy] {
    font-size: 1.4rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    margin-left: 0.3rem;
}

.toeic-total-max[b-hn1hcdzjdy] {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 0.2rem;
}

.toeic-total-bar[b-hn1hcdzjdy] {
    width: 100%;
    height: 8px;
    margin-top: 1.1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    overflow: hidden;
}

.toeic-total-bar-fill[b-hn1hcdzjdy] {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #f0d77a, #ffce54);
    width: var(--bar-pct);
    animation: toeicBarGrow-b-hn1hcdzjdy 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s both;
}

.toeic-total-proficiency[b-hn1hcdzjdy] {
    margin-top: 1rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.toeic-total-note[b-hn1hcdzjdy] {
    margin: 1rem 0 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.7);
}

/* module grid */
.toeic-module-grid[b-hn1hcdzjdy] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-content: start;
}

.toeic-module-card[b-hn1hcdzjdy] {
    padding: 1.25rem 1.35rem;
    border-radius: 16px;
    border: 1px solid var(--toeic-line);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 248, 252, 0.96));
    box-shadow: 0 6px 16px rgba(20, 55, 131, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.toeic-module-card:hover[b-hn1hcdzjdy] {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(20, 55, 131, 0.1);
}

.toeic-module-card-header[b-hn1hcdzjdy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.toeic-module-name-group[b-hn1hcdzjdy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.toeic-module-icon[b-hn1hcdzjdy] {
    font-size: 0.95rem;
}

.toeic-module-name[b-hn1hcdzjdy] {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(20, 55, 131, 0.66);
}

.toeic-module-tag[b-hn1hcdzjdy] {
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: var(--tag-bg, #eef2f8);
    color: var(--tag-fg, #143783);
    border: 1px solid var(--tag-border, rgba(20, 55, 131, 0.12));
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.toeic-module-score[b-hn1hcdzjdy] {
    display: block;
    margin-top: 0.6rem;
    color: var(--toeic-ink-deep);
    font-size: 1.85rem;
    line-height: 1.1;
    font-weight: 800;
}

.toeic-module-score-max[b-hn1hcdzjdy] {
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(20, 55, 131, 0.45);
}

.toeic-module-bar[b-hn1hcdzjdy] {
    margin-top: 0.75rem;
    height: 6px;
    border-radius: 999px;
    background: rgba(20, 55, 131, 0.07);
    overflow: hidden;
}

.toeic-module-bar-fill[b-hn1hcdzjdy] {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--bar-color), color-mix(in srgb, var(--bar-color) 65%, white));
    width: var(--bar-pct);
    animation: toeicBarGrow-b-hn1hcdzjdy 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.7s both;
}

/* ── footer ── */
.toeic-cert-footer[b-hn1hcdzjdy] {
    margin-top: 1.85rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--toeic-line);
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.toeic-cert-seal[b-hn1hcdzjdy] {
    flex-shrink: 0;
}

.toeic-seal-svg[b-hn1hcdzjdy] {
    width: 82px;
    height: 82px;
    opacity: 0.8;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.toeic-cert-footer:hover .toeic-seal-svg[b-hn1hcdzjdy] {
    opacity: 1;
    transform: rotate(5deg);
}

.toeic-cert-footnote[b-hn1hcdzjdy] {
    display: grid;
    gap: 0.4rem;
}

.toeic-cert-footnote-main[b-hn1hcdzjdy] {
    color: rgba(20, 55, 131, 0.78);
    font-size: 0.95rem;
    line-height: 1.55;
}

.toeic-cert-footnote-main strong[b-hn1hcdzjdy] {
    color: var(--toeic-ink-deep);
}

.toeic-cert-footnote-sub[b-hn1hcdzjdy] {
    color: rgba(20, 55, 131, 0.55);
    font-size: 0.86rem;
    font-style: italic;
}

.toeic-cert-footnote-id[b-hn1hcdzjdy] {
    margin-top: 0.2rem;
    color: rgba(20, 55, 131, 0.42);
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    font-family: monospace;
}

.toeic-cert-loading[b-hn1hcdzjdy] {
    padding: 3rem 1.5rem;
}

/* ── responsive ── */
@media (max-width: 1024px) {
    .toeic-cert-scores[b-hn1hcdzjdy] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .toeic-cert[b-hn1hcdzjdy] {
        padding: 2.6rem 1.4rem 1.8rem;
        border-width: 9px;
    }

    .toeic-cert-header[b-hn1hcdzjdy] {
        flex-direction: column;
    }

    .toeic-cert-meta-grid[b-hn1hcdzjdy],
    .toeic-module-grid[b-hn1hcdzjdy] {
        grid-template-columns: 1fr;
    }

    .toeic-cert-toolbar[b-hn1hcdzjdy] {
        flex-direction: column;
        align-items: stretch;
    }

    .toeic-cert-footer[b-hn1hcdzjdy] {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 560px) {
    .toeic-cert-toolbar-actions[b-hn1hcdzjdy] {
        flex-direction: column;
        width: 100%;
    }

    .toeic-cert-title-line[b-hn1hcdzjdy] {
        display: none;
    }

    .toeic-total-value[b-hn1hcdzjdy] {
        font-size: 3.2rem;
    }
}

/* ── print ── */
@media print {
    body[b-hn1hcdzjdy] {
        background: #fff;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .toeic-cert-shell[b-hn1hcdzjdy] {
        background: #fff;
        padding: 0;
    }

    .toeic-cert-toolbar[b-hn1hcdzjdy] {
        display: none;
    }

    .toeic-cert[b-hn1hcdzjdy] {
        max-width: none;
        border-radius: 0;
        box-shadow: none;
        padding: 2.4rem 2rem;
    }

    .anim-enter[b-hn1hcdzjdy],
    .anim-child[b-hn1hcdzjdy] {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .toeic-total-bar-fill[b-hn1hcdzjdy],
    .toeic-module-bar-fill[b-hn1hcdzjdy] {
        animation: none !important;
        width: var(--bar-pct) !important;
    }

    .toeic-meta-card:hover[b-hn1hcdzjdy],
    .toeic-module-card:hover[b-hn1hcdzjdy] {
        transform: none;
        box-shadow: none;
    }
}
/* _content/AptisWeb/Components/Pages/Student/ViewResult.razor.rz.scp.css */
/* Result View Page Styles */

.result-view-loading[b-qyv72c9ze4],
.result-view-error[b-qyv72c9ze4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: 2rem;
}

.loading-spinner[b-qyv72c9ze4] {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #0066cc;
    border-radius: 50%;
    animation: spin-b-qyv72c9ze4 1s linear infinite;
    margin-bottom: 1rem;
}

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

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

/* Main Result View Container */
.result-view[b-qyv72c9ze4] {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

/* Header Section */
.result-header[b-qyv72c9ze4] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 2rem;
    border-radius: 12px;
    margin-bottom: 2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.btn-back[b-qyv72c9ze4] {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    margin-bottom: 1.5rem;
}

.btn-back:hover[b-qyv72c9ze4] {
    background: rgba(255, 255, 255, 0.3);
    transform: translateX(-4px);
}

.result-header-content h1[b-qyv72c9ze4] {
    font-size: 1.8rem;
    margin: 0 0 1rem 0;
    font-weight: 500;
}

.result-meta[b-qyv72c9ze4] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    opacity: 0.95;
}

.meta-item[b-qyv72c9ze4] {
    font-size: 0.95rem;
}

.result-score-badge[b-qyv72c9ze4] {
    display: inline-block;
    background: rgba(255, 255, 255, 0.95);
    color: #667eea;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.score-label[b-qyv72c9ze4] {
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.score-value[b-qyv72c9ze4] {
    font-size: 2rem;
    font-weight: 500;
}

/* Review Status Badge */
.review-status-badge[b-qyv72c9ze4] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 500;
    margin-top: 0.5rem;
}

.review-status-badge.reviewed[b-qyv72c9ze4] {
    background: rgba(40, 167, 69, 0.2);
    border: 1px solid rgba(40, 167, 69, 0.4);
}

.review-status-badge.pending[b-qyv72c9ze4] {
    background: rgba(255, 193, 7, 0.2);
    border: 1px solid rgba(255, 193, 7, 0.4);
}

.review-status-badge.ai-only[b-qyv72c9ze4] {
    background: rgba(23, 162, 184, 0.2);
    border: 1px solid rgba(23, 162, 184, 0.4);
}

.badge-icon[b-qyv72c9ze4] {
    font-size: 1.1rem;
}

.badge-detail[b-qyv72c9ze4] {
    margin-left: 0.5rem;
    font-size: 0.85rem;
    opacity: 0.9;
}

/* Section Styles */
.section[b-qyv72c9ze4] {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid #e8e8e8;
}

.section-header[b-qyv72c9ze4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f0f0f0;
}

.section-header h2[b-qyv72c9ze4] {
    font-size: 1.5rem;
    font-weight: 500;
    margin: 0;
    color: #2c3e50;
}

.section-header.collapsible[b-qyv72c9ze4] {
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
}

.section-header.collapsible:hover[b-qyv72c9ze4] {
    background: #f8f9fa;
    margin: -0.5rem -1rem 1.5rem -1rem;
    padding: 0.5rem 1rem 1.5rem 1rem;
    border-radius: 8px;
}

.toggle-icon[b-qyv72c9ze4] {
    font-size: 1.2rem;
    color: #6c757d;
    transition: transform 0.3s ease;
}

/* Teacher Overall Feedback */
.teacher-overall[b-qyv72c9ze4] {
    border-left: 4px solid #28a745;
    background: linear-gradient(to right, #f0fdf4, white);
}

.teacher-score-pill[b-qyv72c9ze4] {
    background: #28a745;
    color: white;
    padding: 0.5rem 1.25rem;
    border-radius: 25px;
    font-size: 1.25rem;
    font-weight: 500;
}

.feedback-content[b-qyv72c9ze4] {
    margin-bottom: 1.5rem;
}

.feedback-content h3[b-qyv72c9ze4] {
    font-size: 1.1rem;
    font-weight: 500;
    color: #495057;
    margin-bottom: 0.75rem;
}

.feedback-content p[b-qyv72c9ze4] {
    line-height: 1.7;
    color: #212529;
    white-space: pre-wrap;
}

.review-meta[b-qyv72c9ze4] {
    font-size: 0.9rem;
    color: #6c757d;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e9ecef;
}

/* Questions Section */
.questions-section[b-qyv72c9ze4] {
    background: #fafbfc;
}

.question-count[b-qyv72c9ze4] {
    font-size: 0.9rem;
    color: #6c757d;
}

.question-card[b-qyv72c9ze4] {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    transition: box-shadow 0.3s ease;
}

.question-card:hover[b-qyv72c9ze4] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.question-card:last-child[b-qyv72c9ze4] {
    margin-bottom: 0;
}

.question-header[b-qyv72c9ze4] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f0f0f0;
}

.question-label[b-qyv72c9ze4] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.question-label span:first-child[b-qyv72c9ze4] {
    font-weight: 500;
    color: #495057;
}

.question-type-badge[b-qyv72c9ze4] {
    display: inline-block;
    background: #e3f2fd;
    color: #1976d2;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
}

.question-scores[b-qyv72c9ze4] {
    display: flex;
    gap: 0.75rem;
}

.score[b-qyv72c9ze4] {
    padding: 0.4rem 0.9rem;
    border-radius: 15px;
    font-size: 0.85rem;
    font-weight: 500;
}

.teacher-score[b-qyv72c9ze4] {
    background: #d4edda;
    color: #155724;
}

.ai-score[b-qyv72c9ze4] {
    background: #d1ecf1;
    color: #0c5460;
}

.question-text[b-qyv72c9ze4],
.student-answer[b-qyv72c9ze4] {
    margin-bottom: 1rem;
}

.question-text strong[b-qyv72c9ze4],
.student-answer strong[b-qyv72c9ze4] {
    display: block;
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 0.5rem;
}

.question-text p[b-qyv72c9ze4],
.student-answer p[b-qyv72c9ze4] {
    color: #212529;
    line-height: 1.6;
    white-space: pre-wrap;
}

.recording-player[b-qyv72c9ze4] {
    margin: 1rem 0;
}

.recording-player audio[b-qyv72c9ze4] {
    width: 100%;
    max-width: 400px;
}

/* Feedback Styles */
.feedback[b-qyv72c9ze4] {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 8px;
    border-left: 4px solid;
}

.feedback.teacher-feedback[b-qyv72c9ze4] {
    background: #f0fdf4;
    border-left-color: #28a745;
}

.feedback.ai-feedback[b-qyv72c9ze4] {
    background: #f0f7ff;
    border-left-color: #0066cc;
}

.feedback-label[b-qyv72c9ze4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
    color: #495057;
}

.feedback-label .icon[b-qyv72c9ze4] {
    font-size: 1.2rem;
}

.feedback p[b-qyv72c9ze4] {
    line-height: 1.6;
    color: #212529;
    margin: 0;
    white-space: pre-wrap;
}

/* AI Analysis Section */
.ai-analysis[b-qyv72c9ze4] {
    background: linear-gradient(to right, #f8f9fa, white);
    border-left: 4px solid #17a2b8;
}

.ai-analysis-content[b-qyv72c9ze4] {
    padding-top: 0.5rem;
}

.ai-score[b-qyv72c9ze4],
.cefr-level[b-qyv72c9ze4] {
    padding: 1rem;
    background: #e7f3ff;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 1.05rem;
}

.ai-list[b-qyv72c9ze4] {
    margin-bottom: 1.5rem;
}

.ai-list h3[b-qyv72c9ze4] {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
    color: #495057;
}

.ai-list ul[b-qyv72c9ze4] {
    margin: 0;
    padding-left: 1.5rem;
}

.ai-list li[b-qyv72c9ze4] {
    line-height: 1.7;
    margin-bottom: 0.5rem;
    color: #212529;
}

.ai-list.strengths li[b-qyv72c9ze4]::marker {
    color: #28a745;
}

.ai-list.weaknesses li[b-qyv72c9ze4]::marker {
    color: #dc3545;
}

.ai-list.suggestions li[b-qyv72c9ze4]::marker {
    color: #ffc107;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .result-view[b-qyv72c9ze4] {
        padding: 1rem 0.5rem;
    }

    .result-header[b-qyv72c9ze4] {
        padding: 1.5rem;
    }

    .result-header-content h1[b-qyv72c9ze4] {
        font-size: 1.4rem;
    }

    .result-meta[b-qyv72c9ze4] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .section[b-qyv72c9ze4] {
        padding: 1.5rem;
    }

    .section-header[b-qyv72c9ze4] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .question-header[b-qyv72c9ze4] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .question-scores[b-qyv72c9ze4] {
        width: 100%;
        justify-content: flex-start;
    }
}
/* _content/AptisWeb/Components/Pages/Student/Vstep/Learning/Listening/VstepListeningPartSection.razor.rz.scp.css */
.vstep-listening-part-section .part-header[b-91sw03k69p] {
    margin-bottom: 16px;
}

.vstep-listening-part-section .part-title[b-91sw03k69p] {
    font-size: 1.2rem;
    font-weight: 500;
    color: #111827;
}

.vstep-listening-part-section .part-instruction[b-91sw03k69p] {
    margin-top: 8px;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(248, 210, 97, 0.2);
    color: #92400e;
    border-left: 4px solid #f59e0b;
    font-size: 0.95rem;
}

.vstep-listening-part-section .question-block[b-91sw03k69p] {
    margin-bottom: 16px;
    content-visibility: auto;
    contain-intrinsic-size: 720px;
}

.vstep-listening-part-section .block-header[b-91sw03k69p] {
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e7eb;
}

.vstep-listening-part-section .question-explanation[b-91sw03k69p] {
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.vstep-listening-part-section .explanation-label[b-91sw03k69p] {
    font-size: 1.05rem;
    font-weight: 500;
    color: #0f766e;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.vstep-listening-part-section .speaker-turn-list[b-91sw03k69p] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vstep-listening-part-section .speaker-turn-list--explanation[b-91sw03k69p] {
    margin-top: 2px;
}

.vstep-listening-part-section .speaker-turn[b-91sw03k69p] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.vstep-listening-part-section .speaker-turn-tag[b-91sw03k69p] {
    flex: 0 0 auto;
    min-width: 52px;
    height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    background: linear-gradient(180deg, #e0f2fe 0%, #e2e8f0 100%);
    color: #0f766e;
    font-size: 1.15rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.vstep-listening-part-section .speaker-turn-body[b-91sw03k69p] {
    flex: 1 1 auto;
    min-width: 0;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 14px 18px;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
}

.vstep-listening-part-section .speaker-turn-text[b-91sw03k69p] {
    color: #0f172a;
    line-height: 1.7;
    font-size: 1rem;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
}

.vstep-listening-part-section .explanation-lines[b-91sw03k69p] {
    display: grid;
    gap: 8px;
}

.vstep-listening-part-section .explanation-line[b-91sw03k69p] {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 12px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
}

.vstep-listening-part-section .explanation-speaker[b-91sw03k69p] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(14, 116, 144, 0.12);
    color: #0f766e;
    font-weight: 500;
    font-size: 1.05rem;
    white-space: nowrap;
    min-width: 72px;
}

.vstep-listening-part-section .explanation-text-body[b-91sw03k69p] {
    color: #0f172a;
    line-height: 1.7;
    font-size: 1rem;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    flex: 1;
}

.vstep-listening-part-section .explanation-text[b-91sw03k69p] {
    color: #0f172a;
    line-height: 1.7;
    font-size: 1rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 12px;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: break-word;
}

.vstep-listening-part-section .explanation-answer-label[b-91sw03k69p] {
    margin-top: 12px;
    margin-bottom: 8px;
    font-size: 0.82rem;
    font-weight: 500;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.vstep-listening-part-section .explanation-answer[b-91sw03k69p] {
    color: #0f172a;
    line-height: 1.7;
    font-size: 1rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 12px;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: break-word;
}

.vstep-listening-part-section .question-item + .question-item[b-91sw03k69p] {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px dashed #e5e7eb;
}

.vstep-listening-part-section .question-title-row[b-91sw03k69p] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.vstep-listening-part-section .question-number-btn[b-91sw03k69p] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid #5865f2;
    background: #ffffff;
    color: #5865f2;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.vstep-listening-part-section .question-number-btn:hover[b-91sw03k69p] {
    background: #5865f2;
    color: #ffffff;
}

.vstep-listening-part-section .question-number-btn.flagged[b-91sw03k69p] {
    background: #f59e0b;
    border-color: #f59e0b;
    color: #111827;
}

.vstep-listening-part-section .question-meta[b-91sw03k69p] {
    background: rgba(99, 102, 241, 0.1);
    color: #4338ca;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
}

.vstep-listening-part-section .question-context[b-91sw03k69p] {
    margin-top: 8px;
    color: #6b7280;
    font-size: 0.95rem;
}

.vstep-listening-part-section .question-image[b-91sw03k69p] {
    max-width: 100%;
    border-radius: 12px;
    margin-top: 12px;
}

.vstep-listening-part-section .audio-player[b-91sw03k69p] {
    width: 100%;
    margin-top: 12px;
}

.vstep-listening-part-section .answer-options[b-91sw03k69p] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 14px;
}

.vstep-listening-part-section .answer-option-item[b-91sw03k69p] {
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    cursor: pointer;
    transition: all 0.2s ease;
}

.vstep-listening-part-section .answer-option-item:hover[b-91sw03k69p] {
    border-color: #5865f2;
    background: rgba(88, 101, 242, 0.1);
}

.vstep-listening-part-section .answer-option-item.selected[b-91sw03k69p] {
    border-color: #5865f2;
    background: rgba(88, 101, 242, 0.12);
    box-shadow: 0 8px 16px rgba(88, 101, 242, 0.15);
}

.vstep-listening-part-section .answer-option-item.is-correct[b-91sw03k69p] {
    border-color: #16a34a;
    background: rgba(34, 197, 94, 0.18);
    box-shadow: 0 8px 16px rgba(34, 197, 94, 0.2);
}

.vstep-listening-part-section .answer-option-item.is-correct .option-label[b-91sw03k69p] {
    color: #166534;
    font-weight: 500;
}

.vstep-listening-part-section .answer-option-item.is-incorrect[b-91sw03k69p] {
    border-color: #dc2626;
    background: rgba(220, 38, 38, 0.14);
    box-shadow: 0 8px 16px rgba(220, 38, 38, 0.2);
}

.vstep-listening-part-section .answer-option-item.is-incorrect .option-label[b-91sw03k69p] {
    color: #991b1b;
    font-weight: 500;
}

.vstep-listening-part-section .answer-option-item.is-correct.selected[b-91sw03k69p] {
    border-color: #16a34a;
    background: rgba(34, 197, 94, 0.18);
    box-shadow: 0 8px 16px rgba(34, 197, 94, 0.2);
}

.vstep-listening-part-section .answer-option-item.is-incorrect.selected[b-91sw03k69p] {
    border-color: #dc2626;
    background: rgba(220, 38, 38, 0.14);
    box-shadow: 0 8px 16px rgba(220, 38, 38, 0.2);
}

.vstep-listening-part-section .option-radio[b-91sw03k69p] {
    width: 22px;
    height: 22px;
    accent-color: #5865f2;
    cursor: pointer;
}

.vstep-listening-part-section .option-label[b-91sw03k69p] {
    font-size: 1rem;
    color: #111827;
}

.vstep-listening-part-section .correct-answer[b-91sw03k69p] {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #065f46;
    font-size: 0.95rem;
    font-weight: 500;
}

.vstep-listening-part-section .select-answer[b-91sw03k69p] {
    width: 100%;
    border-radius: 10px;
    border: 2px solid #e5e7eb;
    padding: 10px 12px;
    margin-top: 12px;
    font-size: 1rem;
    color: #111827;
    background-color: #ffffff;
}

.vstep-listening-part-section .select-answer.is-correct[b-91sw03k69p] {
    border-color: #16a34a;
    background: rgba(34, 197, 94, 0.15);
}

.vstep-listening-part-section .select-answer.is-incorrect[b-91sw03k69p] {
    border-color: #dc2626;
    background: rgba(220, 38, 38, 0.12);
}

.vstep-listening-part-section .select-answer:focus[b-91sw03k69p] {
    outline: none;
    border-color: #5865f2;
    box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.18);
}

.vstep-listening-part-section .question-transcript-box[b-91sw03k69p] {
    margin-top: 12px;
    padding: 12px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.vstep-listening-part-section .question-transcript-label[b-91sw03k69p] {
    font-size: 0.82rem;
    font-weight: 500;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.vstep-listening-part-section .question-transcript-content[b-91sw03k69p] {
    font-size: 0.95rem;
    color: #1f2937;
    line-height: 1.55;
    white-space: pre-wrap;
}

.vstep-listening-part-section .merged-part-marker[b-91sw03k69p] {
    margin: 18px 0 10px;
    padding: 8px 12px;
    border-left: 4px solid #6366f1;
    border-radius: 10px;
    background: #eef2ff;
    color: #3730a3;
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
}

@media (max-width: 640px) {
    .vstep-listening-part-section .speaker-turn[b-91sw03k69p] {
        gap: 10px;
    }

    .vstep-listening-part-section .speaker-turn-tag[b-91sw03k69p] {
        min-width: 44px;
        height: 38px;
        padding: 0 12px;
        font-size: 1rem;
    }

    .vstep-listening-part-section .speaker-turn-body[b-91sw03k69p] {
        padding: 12px 14px;
    }
}
/* _content/AptisWeb/Components/Pages/Student/VstepCertificate.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   VSTEP Practice Completion Record — Premium Redesign
   ═══════════════════════════════════════════════════════════ */

.vstep-cert-shell[b-b5w5fbi86d] {
    --vstep-ink: #1f4f42;
    --vstep-ink-deep: #143a30;
    --vstep-accent: #2f8f6e;
    --vstep-gold: #c08a3e;
    --vstep-clay: #c25b2a;
    --vstep-paper: #fffdfa;
    --vstep-line: rgba(31, 79, 66, 0.14);
    min-height: calc(100vh - 4rem);
    padding: 1.5rem 1rem 3rem;
    background:
        radial-gradient(circle at top left, rgba(47, 143, 110, 0.14), transparent 24rem),
        radial-gradient(circle at bottom right, rgba(194, 91, 42, 0.1), transparent 30rem),
        linear-gradient(180deg, #eef4f0 0%, #f4f7f2 46%, #edf3ee 100%);
}

.vstep-cert-toolbar[b-b5w5fbi86d],
.vstep-cert[b-b5w5fbi86d],
.vstep-cert-loading[b-b5w5fbi86d] {
    max-width: 1180px;
    margin: 0 auto;
}

.vstep-cert-toolbar[b-b5w5fbi86d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.vstep-cert-toolbar-actions[b-b5w5fbi86d] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* ── main card ── */
.vstep-cert[b-b5w5fbi86d] {
    position: relative;
    overflow: hidden;
    padding: 3.6rem 3rem 2.5rem;
    border: 14px solid rgba(255, 255, 255, 0.92);
    border-radius: 24px;
    background:
        radial-gradient(circle at 50% 24%, rgba(255, 255, 255, 0.995), rgba(248, 252, 250, 0.985) 46%, rgba(239, 246, 242, 0.97) 100%);
    box-shadow:
        0 24px 70px rgba(20, 58, 48, 0.14),
        inset 0 0 0 1px rgba(31, 79, 66, 0.08);
}

/* ── animations ── */
@keyframes vstepFadeUp-b-b5w5fbi86d {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes vstepGaugeStroke-b-b5w5fbi86d {
    from { stroke-dashoffset: var(--circumference); }
    to   { stroke-dashoffset: var(--dash-offset); }
}

@keyframes vstepBarGrow-b-b5w5fbi86d {
    from { width: 0; }
    to   { width: var(--bar-pct); }
}

@keyframes vstepShimmer-b-b5w5fbi86d {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}

.anim-enter[b-b5w5fbi86d] {
    animation: vstepScaleIn-b-b5w5fbi86d 0.55s cubic-bezier(0.19, 1, 0.22, 1) both;
}

.anim-child[b-b5w5fbi86d] {
    opacity: 0;
    animation: vstepFadeUp-b-b5w5fbi86d 0.5s cubic-bezier(0.19, 1, 0.22, 1) both;
    animation-delay: calc(var(--i, 0) * 0.07s + 0.12s);
}

/* ── decorative ── */
.vstep-cert-top-band[b-b5w5fbi86d] {
    position: absolute;
    inset: 12px 12px auto;
    height: 12px;
    z-index: 0;
    background: linear-gradient(90deg, var(--vstep-ink-deep) 0%, var(--vstep-accent) 50%, var(--vstep-gold) 100%);
    border-radius: 12px 12px 0 0;
    pointer-events: none;
}

.vstep-cert-frame[b-b5w5fbi86d] {
    position: absolute;
    inset: 26px;
    z-index: 0;
    border: 1px solid var(--vstep-line);
    border-radius: 16px;
    pointer-events: none;
}

.vstep-cert-watermark[b-b5w5fbi86d] {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.025;
    pointer-events: none;
    background: repeating-linear-gradient(-45deg, transparent, transparent 80px, rgba(31, 79, 66, 0.6) 80px, rgba(31, 79, 66, 0.6) 81px);
}

/* corner flourishes */
.vstep-corner[b-b5w5fbi86d] {
    position: absolute;
    width: 44px;
    height: 44px;
    z-index: 0;
    pointer-events: none;
    border: 2px solid rgba(192, 138, 62, 0.5);
}

.vstep-corner--tl[b-b5w5fbi86d] {
    top: 34px;
    left: 34px;
    border-right: none;
    border-bottom: none;
    border-top-left-radius: 10px;
}

.vstep-corner--tr[b-b5w5fbi86d] {
    top: 34px;
    right: 34px;
    border-left: none;
    border-bottom: none;
    border-top-right-radius: 10px;
}

.vstep-corner--bl[b-b5w5fbi86d] {
    bottom: 34px;
    left: 34px;
    border-right: none;
    border-top: none;
    border-bottom-left-radius: 10px;
}

.vstep-corner--br[b-b5w5fbi86d] {
    bottom: 34px;
    right: 34px;
    border-left: none;
    border-top: none;
    border-bottom-right-radius: 10px;
}

/* ribbon */
.vstep-ribbon[b-b5w5fbi86d] {
    position: absolute;
    top: 30px;
    right: -46px;
    z-index: 2;
    transform: rotate(38deg);
    padding: 0.4rem 3.5rem;
    background: linear-gradient(135deg, var(--vstep-clay), #a8491f);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    box-shadow: 0 6px 16px rgba(168, 73, 31, 0.3);
    pointer-events: none;
}

.vstep-cert-header[b-b5w5fbi86d],
.vstep-cert-title-block[b-b5w5fbi86d],
.vstep-cert-hero[b-b5w5fbi86d],
.vstep-cert-meta-grid[b-b5w5fbi86d],
.vstep-cert-scores[b-b5w5fbi86d],
.vstep-cert-footer[b-b5w5fbi86d] {
    position: relative;
    z-index: 1;
}

/* ── header ── */
.vstep-cert-header[b-b5w5fbi86d] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
}

.vstep-brand[b-b5w5fbi86d] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.vstep-brand-logo[b-b5w5fbi86d] {
    width: 78px;
    height: 78px;
    object-fit: contain;
}

.vstep-brand-name[b-b5w5fbi86d] {
    color: var(--vstep-ink-deep);
    font-size: clamp(1.9rem, 2.6vw, 2.5rem);
    font-weight: 900;
    letter-spacing: 0.1em;
    line-height: 1;
}

.vstep-brand-subtitle[b-b5w5fbi86d] {
    margin-top: 0.4rem;
    color: rgba(31, 79, 66, 0.62);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}

.vstep-cert-badge[b-b5w5fbi86d] {
    min-width: 200px;
    padding: 0.85rem 1.4rem;
    border-radius: 16px;
    background: linear-gradient(160deg, var(--vstep-ink) 0%, var(--vstep-accent) 100%);
    color: #fff;
    text-align: center;
    box-shadow: 0 10px 24px rgba(20, 58, 48, 0.22);
}

.vstep-cert-badge span[b-b5w5fbi86d] {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.78);
}

.vstep-cert-badge strong[b-b5w5fbi86d] {
    display: block;
    margin-top: 0.25rem;
    font-size: 1.9rem;
    line-height: 1;
    letter-spacing: 0.02em;
}

/* ── title ── */
.vstep-cert-title-block[b-b5w5fbi86d] {
    margin-top: 1.75rem;
    text-align: center;
}

.vstep-cert-title-row[b-b5w5fbi86d] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.vstep-cert-title-line[b-b5w5fbi86d] {
    width: min(12rem, 20vw);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(192, 138, 62, 0.6), transparent);
}

.vstep-cert-title-label[b-b5w5fbi86d] {
    margin: 0;
    color: #9a6b2e;
    font-family: var(--font-vietnamese-display);
    font-size: clamp(1.3rem, 1.7vw, 1.75rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    background: linear-gradient(90deg, #8c5f29, #c2913f, #8c5f29);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: vstepShimmer-b-b5w5fbi86d 5s ease-in-out infinite;
}

.vstep-cert-title-ornament[b-b5w5fbi86d] {
    width: 72px;
    height: 12px;
    margin: 0.55rem auto 0;
    background:
        radial-gradient(circle at 50% 50%, rgba(47, 143, 110, 0.8) 0 1.8px, transparent 2.6px),
        linear-gradient(90deg, transparent 0, transparent 18px, rgba(47, 143, 110, 0.62) 18px, rgba(47, 143, 110, 0.62) 54px, transparent 54px);
}

/* ── hero ── */
.vstep-cert-hero[b-b5w5fbi86d] {
    margin-top: 1.2rem;
    text-align: center;
}

.vstep-cert-kicker[b-b5w5fbi86d] {
    margin: 0 0 0.6rem;
    color: var(--vstep-accent);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
}

.vstep-cert-hero h1[b-b5w5fbi86d] {
    margin: 0;
    color: var(--vstep-ink-deep);
    font-family: var(--font-vietnamese-display);
    font-size: clamp(2.8rem, 5.6vw, 4.4rem);
    line-height: 0.98;
    letter-spacing: -0.02em;
}

.vstep-cert-hero[b-b5w5fbi86d]::after {
    content: "";
    display: block;
    width: min(24rem, 44%);
    height: 1px;
    margin: 1rem auto 0;
    background: linear-gradient(90deg, transparent, rgba(192, 138, 62, 0.7), transparent);
}

.vstep-cert-summary[b-b5w5fbi86d] {
    max-width: 52rem;
    margin: 1.2rem auto 0;
    color: rgba(31, 79, 66, 0.8);
    font-size: clamp(0.98rem, 1.2vw, 1.12rem);
    line-height: 1.6;
}

/* ── meta grid ── */
.vstep-cert-meta-grid[b-b5w5fbi86d] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.9rem;
}

.vstep-meta-card[b-b5w5fbi86d] {
    min-height: 6.3rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.35rem;
    border-radius: 16px;
    border: 1px solid var(--vstep-line);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 250, 247, 0.96));
    box-shadow: 0 6px 16px rgba(20, 58, 48, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.vstep-meta-card:hover[b-b5w5fbi86d] {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(20, 58, 48, 0.09);
}

.vstep-meta-card-icon[b-b5w5fbi86d] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(31, 79, 66, 0.1), rgba(31, 79, 66, 0.04));
    color: var(--vstep-ink);
    font-size: 1.15rem;
}

.vstep-meta-card-icon--set[b-b5w5fbi86d] {
    background: linear-gradient(135deg, rgba(47, 143, 110, 0.14), rgba(47, 143, 110, 0.05));
    color: var(--vstep-accent);
}

.vstep-meta-card-icon--date[b-b5w5fbi86d] {
    background: linear-gradient(135deg, rgba(46, 110, 181, 0.12), rgba(46, 110, 181, 0.04));
    color: #2e6eb5;
}

.vstep-meta-card-icon--cert[b-b5w5fbi86d] {
    background: linear-gradient(135deg, rgba(192, 138, 62, 0.16), rgba(192, 138, 62, 0.05));
    color: var(--vstep-gold);
}

.vstep-meta-card-content[b-b5w5fbi86d] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.vstep-meta-label[b-b5w5fbi86d] {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(31, 79, 66, 0.6);
}

.vstep-meta-card strong[b-b5w5fbi86d] {
    display: block;
    color: var(--vstep-ink-deep);
    font-size: 1.05rem;
    line-height: 1.3;
    word-break: break-word;
}

/* ── scores ── */
.vstep-cert-scores[b-b5w5fbi86d] {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
    align-items: stretch;
}

/* overview gauge */
.vstep-overview[b-b5w5fbi86d] {
    position: relative;
    overflow: hidden;
    min-height: 100%;
    padding: 1.6rem 1.4rem 1.7rem;
    border-radius: 18px;
    border: 1px solid rgba(31, 79, 66, 0.08);
    background: linear-gradient(170deg, #1f4f42 0%, #256453 58%, #2f8f6e 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 14px 30px rgba(20, 58, 48, 0.2);
}

.vstep-overview[b-b5w5fbi86d]::after {
    content: "";
    position: absolute;
    inset: auto -10% -12% 14%;
    height: 54%;
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.2) 0 1px, transparent 1.7px) 0 0 / 18px 18px repeat,
        radial-gradient(circle, rgba(255, 255, 255, 0.1) 0 1.2px, transparent 2px) 9px 9px / 28px 28px repeat;
    opacity: 0.42;
    pointer-events: none;
}

.vstep-overview-label[b-b5w5fbi86d] {
    position: relative;
    z-index: 1;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 0.6rem;
}

.vstep-gauge[b-b5w5fbi86d] {
    position: relative;
    z-index: 1;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vstep-gauge-svg[b-b5w5fbi86d] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.vstep-gauge-track[b-b5w5fbi86d] {
    fill: none;
    stroke: rgba(255, 255, 255, 0.14);
    stroke-width: 8;
    stroke-linecap: round;
}

.vstep-gauge-fill[b-b5w5fbi86d] {
    fill: none;
    stroke: url(#vstepGaugeGrad);
    stroke-width: 8;
    stroke-linecap: round;
    --circumference: 364.42;
    --dash-offset: calc(var(--circumference) - (var(--circumference) * var(--score-pct) / 100));
    stroke-dasharray: var(--circumference);
    stroke-dashoffset: var(--dash-offset);
    animation: vstepGaugeStroke-b-b5w5fbi86d 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s both;
    filter: drop-shadow(0 0 6px rgba(120, 210, 180, 0.5));
}

.vstep-gauge-text[b-b5w5fbi86d] {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.vstep-gauge-value[b-b5w5fbi86d] {
    font-size: 2.8rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.vstep-gauge-max[b-b5w5fbi86d] {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.62);
    margin-top: 0.25rem;
}

.vstep-overview-band[b-b5w5fbi86d] {
    position: relative;
    z-index: 1;
    margin-top: 0.95rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.72);
}

.vstep-band-chip[b-b5w5fbi86d] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.22rem 0.7rem;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
}

.vstep-overview-desc[b-b5w5fbi86d] {
    position: relative;
    z-index: 1;
    margin-top: 0.8rem;
    padding: 0.6rem 0.8rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.45;
}

/* module grid */
.vstep-module-grid[b-b5w5fbi86d] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-content: start;
}

.vstep-module-card[b-b5w5fbi86d] {
    min-height: 8.05rem;
    padding: 1.25rem 1.35rem;
    border-radius: 16px;
    border: 1px solid var(--vstep-line);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 250, 247, 0.96));
    box-shadow: 0 6px 16px rgba(20, 58, 48, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.vstep-module-card:hover[b-b5w5fbi86d] {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(20, 58, 48, 0.1);
}

.vstep-module-card-header[b-b5w5fbi86d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.vstep-module-name-group[b-b5w5fbi86d] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.vstep-module-icon[b-b5w5fbi86d] {
    font-size: 0.95rem;
}

.vstep-module-name[b-b5w5fbi86d] {
    font-size: 0.77rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(31, 79, 66, 0.66);
}

.vstep-module-tag[b-b5w5fbi86d] {
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background: var(--tag-bg, #eaf3ef);
    color: var(--tag-fg, #1f4f42);
    border: 1px solid var(--tag-border, rgba(31, 79, 66, 0.12));
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.vstep-module-score[b-b5w5fbi86d] {
    display: block;
    margin-top: 0.6rem;
    color: var(--vstep-ink-deep);
    font-size: 1.85rem;
    line-height: 1.1;
    font-weight: 800;
}

.vstep-module-score-max[b-b5w5fbi86d] {
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(31, 79, 66, 0.45);
}

.vstep-module-bar[b-b5w5fbi86d] {
    margin-top: 0.75rem;
    height: 6px;
    border-radius: 999px;
    background: rgba(31, 79, 66, 0.07);
    overflow: hidden;
}

.vstep-module-bar-fill[b-b5w5fbi86d] {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--bar-color), color-mix(in srgb, var(--bar-color) 65%, white));
    width: var(--bar-pct);
    animation: vstepBarGrow-b-b5w5fbi86d 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.7s both;
    box-shadow: 0 1px 4px color-mix(in srgb, var(--bar-color) 30%, transparent);
}

/* ── footer ── */
.vstep-cert-footer[b-b5w5fbi86d] {
    margin-top: 1.9rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--vstep-line);
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.vstep-cert-seal[b-b5w5fbi86d] {
    flex-shrink: 0;
}

.vstep-seal-svg[b-b5w5fbi86d] {
    width: 84px;
    height: 84px;
    opacity: 0.78;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.vstep-cert-footer:hover .vstep-seal-svg[b-b5w5fbi86d] {
    opacity: 1;
    transform: rotate(5deg);
}

.vstep-cert-footnote[b-b5w5fbi86d] {
    display: grid;
    gap: 0.4rem;
}

.vstep-cert-footnote-main[b-b5w5fbi86d] {
    color: rgba(31, 79, 66, 0.78);
    font-size: 0.95rem;
    line-height: 1.55;
}

.vstep-cert-footnote-main strong[b-b5w5fbi86d] {
    color: var(--vstep-ink-deep);
}

.vstep-cert-footnote-sub[b-b5w5fbi86d] {
    color: rgba(31, 79, 66, 0.55);
    font-size: 0.86rem;
    font-style: italic;
}

.vstep-cert-footnote-id[b-b5w5fbi86d] {
    margin-top: 0.2rem;
    color: rgba(31, 79, 66, 0.42);
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    font-family: monospace;
}

.vstep-cert-loading[b-b5w5fbi86d] {
    padding: 3rem 1.5rem;
}

/* ── responsive ── */
@media (max-width: 1024px) {
    .vstep-cert-scores[b-b5w5fbi86d] {
        grid-template-columns: 1fr;
    }

    .vstep-cert-meta-grid[b-b5w5fbi86d] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .vstep-cert[b-b5w5fbi86d] {
        padding: 2.8rem 1.4rem 1.8rem;
        border-width: 9px;
    }

    .vstep-cert-header[b-b5w5fbi86d] {
        flex-direction: column;
    }

    .vstep-cert-meta-grid[b-b5w5fbi86d],
    .vstep-module-grid[b-b5w5fbi86d] {
        grid-template-columns: 1fr;
    }

    .vstep-cert-toolbar[b-b5w5fbi86d] {
        flex-direction: column;
        align-items: stretch;
    }

    .vstep-cert-footer[b-b5w5fbi86d] {
        flex-direction: column;
        text-align: center;
    }

    .vstep-corner[b-b5w5fbi86d] {
        width: 32px;
        height: 32px;
    }
}

@media (max-width: 560px) {
    .vstep-cert-toolbar-actions[b-b5w5fbi86d] {
        flex-direction: column;
        width: 100%;
    }

    .vstep-cert-title-line[b-b5w5fbi86d] {
        display: none;
    }

    .vstep-gauge[b-b5w5fbi86d] {
        width: 140px;
        height: 140px;
    }

    .vstep-gauge-value[b-b5w5fbi86d] {
        font-size: 2.4rem;
    }

    .vstep-ribbon[b-b5w5fbi86d] {
        top: 24px;
        right: -52px;
    }
}

/* ── print ── */
@media print {
    body[b-b5w5fbi86d] {
        background: #fff;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .vstep-cert-shell[b-b5w5fbi86d] {
        background: #fff;
        padding: 0;
    }

    .vstep-cert-toolbar[b-b5w5fbi86d] {
        display: none;
    }

    .vstep-cert[b-b5w5fbi86d] {
        max-width: none;
        border-radius: 0;
        box-shadow: none;
        padding: 2.6rem 2rem;
    }

    .anim-enter[b-b5w5fbi86d],
    .anim-child[b-b5w5fbi86d] {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .vstep-gauge-fill[b-b5w5fbi86d] {
        animation: none !important;
        stroke-dashoffset: var(--dash-offset) !important;
    }

    .vstep-module-bar-fill[b-b5w5fbi86d] {
        animation: none !important;
        width: var(--bar-pct) !important;
    }

    .vstep-cert-title-label[b-b5w5fbi86d] {
        animation: none !important;
        -webkit-text-fill-color: #9a6b2e !important;
        background: none !important;
    }

    .vstep-meta-card:hover[b-b5w5fbi86d],
    .vstep-module-card:hover[b-b5w5fbi86d] {
        transform: none;
        box-shadow: none;
    }

    .vstep-cert-footer:hover .vstep-seal-svg[b-b5w5fbi86d] {
        transform: none;
    }

    .vstep-cert-watermark[b-b5w5fbi86d] {
        display: none;
    }
}
/* _content/AptisWeb/Components/Pages/Teacher/Tabs/TeacherClassesTab.razor.rz.scp.css */
.teacher-classes[b-c535au28w2] {
    --tc-bg: var(--bg-base, #FAFAF7);
    --tc-surface: var(--bg-surface, #FFFFFF);
    --tc-ink: var(--text-primary, #1A1A18);
    --tc-muted: var(--text-secondary, #5F5E5A);
    --tc-border: var(--border-subtle, rgba(0, 0, 0, 0.08));
    --tc-accent: var(--brand-primary, #085041);
    --tc-accent-strong: var(--brand-primary-dark, #04342C);
    --tc-accent-2: var(--c-green-fg, #639922);
    --tc-warn: var(--danger-token, #A32D2D);
    --tc-shadow: 0 14px 32px rgba(15, 110, 86, 0.08);
    --tc-radius: 16px;

    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.teacher-classes h2[b-c535au28w2],
.teacher-classes h3[b-c535au28w2],
.teacher-classes h4[b-c535au28w2],
.teacher-classes h5[b-c535au28w2] {
    color: var(--tc-ink);
    letter-spacing: -0.01em;
}

.classes-header[b-c535au28w2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border-radius: 16px;
    background: var(--tc-surface);
    border: 1px solid var(--tc-border);
    box-shadow: var(--tc-shadow);
}

.classes-header h2[b-c535au28w2] {
    margin: 0;
    font-size: 1.55rem;
    font-weight: 500;
}

.classes-header p[b-c535au28w2] {
    margin: 6px 0 0;
    color: var(--tc-muted);
    font-size: 0.95rem;
}

.classes-status[b-c535au28w2] {
    padding: 16px;
    border-radius: 14px;
    background: var(--bg-muted, rgba(248, 250, 252, 0.9));
    border: 1px dashed var(--border-default, rgba(148, 163, 184, 0.35));
    color: var(--tc-muted);
}

.classes-status.error[b-c535au28w2] {
    color: #b91c1c;
    background: #fee2e2;
    border-color: rgba(239, 68, 68, 0.35);
}

.class-list[b-c535au28w2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.class-card[b-c535au28w2] {
    position: relative;
    border: 1px solid transparent;
    border-radius: 16px;
    padding: 14px 16px;
    text-align: left;
    background: var(--tc-surface);
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
    overflow: hidden;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
    animation: card-rise-b-c535au28w2 240ms ease-out both;
}

.class-card[b-c535au28w2]::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(135deg, var(--tc-accent), var(--tc-accent-2));
    opacity: 0.85;
}

.class-card:hover[b-c535au28w2] {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(15, 110, 86, 0.14);
    border-color: rgba(8, 80, 65, 0.3);
}

.class-card.active[b-c535au28w2] {
    border-color: rgba(8, 80, 65, 0.55);
    box-shadow: 0 14px 28px rgba(8, 80, 65, 0.18);
    transform: translateY(-2px);
}

.class-card:nth-child(1)[b-c535au28w2] { animation-delay: 40ms; }
.class-card:nth-child(2)[b-c535au28w2] { animation-delay: 80ms; }
.class-card:nth-child(3)[b-c535au28w2] { animation-delay: 120ms; }
.class-card:nth-child(4)[b-c535au28w2] { animation-delay: 160ms; }
.class-card:nth-child(5)[b-c535au28w2] { animation-delay: 200ms; }
.class-card:nth-child(6)[b-c535au28w2] { animation-delay: 240ms; }

.class-title[b-c535au28w2] {
    font-weight: 500;
    font-size: 1rem;
    color: var(--tc-ink);
}

.class-meta[b-c535au28w2] {
    display: flex;
    gap: 10px;
    font-size: 12px;
    color: var(--tc-muted);
    margin-top: 6px;
    flex-wrap: wrap;
}

.class-meta span[b-c535au28w2] {
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--c-teal-bg, #E1F5EE);
    color: var(--c-teal-fg, #0F6E56);
    font-weight: 500;
}

.class-detail[b-c535au28w2] {
    border: 1px solid var(--tc-border);
    border-radius: 20px;
    padding: 20px;
    background: var(--tc-surface);
    box-shadow: var(--tc-shadow);
    animation: panel-rise-b-c535au28w2 240ms ease-out both;
}

.detail-header[b-c535au28w2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.detail-header h3[b-c535au28w2] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 500;
}

.detail-meta[b-c535au28w2] {
    color: var(--tc-muted);
    font-size: 0.9rem;
    margin-top: 4px;
}

.detail-actions[b-c535au28w2] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.detail-grid[b-c535au28w2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
}

.detail-card[b-c535au28w2] {
    border: 1px solid var(--tc-border);
    border-radius: 16px;
    padding: 16px;
    background: var(--bg-muted, #f8fafc);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
    animation: card-rise-b-c535au28w2 260ms ease-out both;
}

.detail-card h4[b-c535au28w2] {
    margin: 0 0 8px;
    font-size: 1.05rem;
    font-weight: 500;
}

.detail-card h5[b-c535au28w2] {
    margin: 0 0 6px;
    font-size: 0.95rem;
    font-weight: 500;
}

.detail-empty[b-c535au28w2] {
    color: var(--tc-muted);
    font-size: 13px;
}

.student-list[b-c535au28w2],
.schedule-list[b-c535au28w2] {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.student-list li[b-c535au28w2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--tc-surface);
    border: 1px solid var(--tc-border);
}

.schedule-list li[b-c535au28w2] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--tc-surface);
    border: 1px solid var(--tc-border);
}

.schedule-list li a[b-c535au28w2] {
    grid-column: 1 / -1;
    font-size: 0.85rem;
    color: var(--tc-accent-strong);
    text-decoration: none;
    font-weight: 500;
}

.schedule-list li a:hover[b-c535au28w2] {
    text-decoration: underline;
}

.assign-students[b-c535au28w2] {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px dashed rgba(148, 163, 184, 0.35);
}

.student-options[b-c535au28w2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.student-option[b-c535au28w2] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--tc-border);
    background: var(--tc-surface);
}

.student-option input[b-c535au28w2] {
    accent-color: var(--tc-accent);
}

.schedule-form[b-c535au28w2] {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-row[b-c535au28w2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    align-items: end;
}

.form-row label[b-c535au28w2],
.form-col label[b-c535au28w2],
.repeat-days label[b-c535au28w2],
.form-group label[b-c535au28w2] {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tc-muted);
    font-weight: 500;
}

.form-col[b-c535au28w2] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.repeat-days[b-c535au28w2] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.repeat-options[b-c535au28w2] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.repeat-options label[b-c535au28w2] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--tc-surface);
    border: 1px solid var(--tc-border);
    font-size: 0.85rem;
}

.repeat-options input[b-c535au28w2] {
    accent-color: var(--tc-accent);
}

.repeat-weeks[b-c535au28w2] {
    max-width: 160px;
}

.schedule-time[b-c535au28w2] {
    font-weight: 500;
    color: var(--tc-ink);
}

.schedule-note[b-c535au28w2] {
    font-size: 12px;
    color: var(--tc-muted);
}

.teacher-classes input[b-c535au28w2],
.teacher-classes select[b-c535au28w2],
.teacher-classes textarea[b-c535au28w2] {
    width: 100%;
    border: 1px solid var(--input-border, rgba(148, 163, 184, 0.45));
    border-radius: 12px;
    padding: 0.55rem 0.7rem;
    background: var(--input-bg, #ffffff);
    font-size: 0.95rem;
    color: var(--input-text, var(--tc-ink));
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.teacher-classes input:focus[b-c535au28w2],
.teacher-classes select:focus[b-c535au28w2],
.teacher-classes textarea:focus[b-c535au28w2] {
    outline: none;
    border-color: var(--brand-primary, #085041);
    box-shadow: 0 0 0 3px rgba(15, 110, 86, 0.18);
}

.btn-primary[b-c535au28w2],
.btn-secondary[b-c535au28w2] {
    border-radius: 12px;
    padding: 0.55rem 1.1rem;
    font-size: 0.95rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.btn-primary[b-c535au28w2] {
    background: var(--brand-primary, #085041);
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(8, 80, 65, 0.22);
}

.btn-primary:hover[b-c535au28w2] {
    background: var(--brand-primary-dark, #04342C);
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(8, 80, 65, 0.3);
}

.btn-secondary[b-c535au28w2] {
    background: var(--tc-surface);
    color: var(--tc-ink);
    border: 1px solid var(--tc-border);
}

.btn-secondary:hover[b-c535au28w2] {
    background: var(--bg-hover, #f1f5f9);
}

.btn-primary:disabled[b-c535au28w2],
.btn-secondary:disabled[b-c535au28w2] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-link[b-c535au28w2] {
    border: none;
    background: transparent;
    color: var(--tc-accent-strong);
    font-weight: 500;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    transition: background 160ms ease, color 160ms ease;
}

.btn-link:hover[b-c535au28w2] {
    background: var(--c-teal-bg, #E1F5EE);
}

.btn-link.danger[b-c535au28w2] {
    color: var(--tc-warn);
}

.btn-link.danger:hover[b-c535au28w2] {
    background: rgba(239, 68, 68, 0.12);
}

.btn-close[b-c535au28w2] {
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    border-radius: 50%;
    color: var(--tc-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease;
}

.btn-close:hover[b-c535au28w2] {
    background: var(--bg-hover, #f1f5f9);
    color: var(--tc-ink);
}

.modal-overlay[b-c535au28w2] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: modal-fade-b-c535au28w2 160ms ease-out;
}

.modal-content[b-c535au28w2] {
    background: var(--tc-surface);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
    width: min(560px, 92vw);
    overflow: hidden;
    border: 1px solid var(--tc-border);
    animation: modal-rise-b-c535au28w2 180ms ease-out;
}

.modal-header[b-c535au28w2],
.modal-footer[b-c535au28w2] {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--tc-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.modal-header h3[b-c535au28w2] {
    margin: 0;
    color: var(--tc-ink);
    font-size: 1.1rem;
    font-weight: 500;
}

.modal-body[b-c535au28w2] {
    padding: 1.1rem 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.modal-footer[b-c535au28w2] {
    border-bottom: none;
    border-top: 1px solid var(--tc-border);
    justify-content: flex-end;
    background: var(--bg-muted, #f8fafc);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .teacher-classes .btn-primary[b-c535au28w2] {
        color: #07120f;
    }
}

[data-theme="dark"] .teacher-classes .btn-primary[b-c535au28w2] {
    color: #07120f;
}

.form-group[b-c535au28w2] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

@keyframes modal-fade-b-c535au28w2 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes modal-rise-b-c535au28w2 {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes card-rise-b-c535au28w2 {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes panel-rise-b-c535au28w2 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .teacher-classes *[b-c535au28w2],
    .teacher-classes *[b-c535au28w2]::before,
    .teacher-classes *[b-c535au28w2]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* _content/AptisWeb/Components/Pages/Teacher/Tabs/TeacherGradesTab.razor.rz.scp.css */
.teacher-grades[b-m4giwagrdz] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.grades-header[b-m4giwagrdz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 20px;
    border: var(--border-hairline, 1px) solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: var(--radius-card, 12px);
    background:
        radial-gradient(380px 200px at 0% 0%, rgba(15, 110, 86, 0.1), transparent 72%),
        var(--bg-surface, #ffffff);
}

.grades-header__eyebrow[b-m4giwagrdz] {
    display: block;
    margin-bottom: 5px;
    color: var(--brand-primary, #085041);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.grades-header h2[b-m4giwagrdz] {
    margin: 0 0 4px;
    color: var(--text-primary, #1a1a18);
    font-size: clamp(1.25rem, 1.1rem + 0.45vw, 1.55rem);
    font-weight: 750;
    letter-spacing: -0.015em;
}

.grades-header p[b-m4giwagrdz] {
    margin: 0;
    color: var(--text-secondary, #5f5e5a);
    font-size: 0.88rem;
    line-height: 1.5;
}

.grades-refresh[b-m4giwagrdz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    gap: 7px;
    padding: 0 13px;
    border: 1px solid var(--border-default, rgba(0, 0, 0, 0.15));
    border-radius: var(--radius-input, 8px);
    background: var(--bg-surface, #ffffff);
    color: var(--text-secondary, #5f5e5a);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}

.grades-refresh:hover:not(:disabled)[b-m4giwagrdz] {
    border-color: var(--brand-primary, #085041);
    color: var(--brand-primary, #085041);
}

.grades-refresh:disabled[b-m4giwagrdz] {
    cursor: wait;
    opacity: 0.7;
}

.grades-refresh[b-m4giwagrdz]  .spin,
.grades-state[b-m4giwagrdz]  .spin {
    animation: grades-spin-b-m4giwagrdz 0.8s linear infinite;
}

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

.grades-stats[b-m4giwagrdz] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.grade-stat[b-m4giwagrdz] {
    --stat-accent: var(--c-teal-fg, #0f6e56);
    --stat-bg: var(--c-teal-bg, #e1f5ee);
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 82px;
    gap: 11px;
    padding: 14px 15px;
    overflow: hidden;
    border: var(--border-hairline, 1px) solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: var(--radius-card, 12px);
    background: var(--bg-muted, #f1efe8);
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.grade-stat[b-m4giwagrdz]::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--stat-accent);
}

.grade-stat:hover[b-m4giwagrdz] {
    border-color: var(--border-default, rgba(0, 0, 0, 0.15));
    box-shadow: var(--shadow-hover, 0 4px 12px rgba(0, 0, 0, 0.06));
    transform: translateY(-1px);
}

.grade-stat__icon[b-m4giwagrdz] {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 10px;
    background: var(--stat-bg);
    color: var(--stat-accent);
}

.grade-stat__copy[b-m4giwagrdz] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.grade-stat__copy small[b-m4giwagrdz] {
    overflow: hidden;
    color: var(--text-tertiary, #888780);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.grade-stat__copy strong[b-m4giwagrdz] {
    color: var(--text-primary, #1a1a18);
    font-size: 1.3rem;
    font-weight: 750;
    line-height: 1.2;
}

.grade-stat--complete[b-m4giwagrdz] {
    --stat-accent: var(--c-green-fg, #639922);
    --stat-bg: var(--c-green-bg, #eaf3de);
}

.grade-stat--progress[b-m4giwagrdz] {
    --stat-accent: var(--c-blue-fg, #185fa5);
    --stat-bg: var(--c-blue-bg, #e6f1fb);
}

.grade-stat--average[b-m4giwagrdz] {
    --stat-accent: var(--c-amber-fg, #ba7517);
    --stat-bg: var(--c-amber-bg, #faeeda);
}

.grades-panel[b-m4giwagrdz] {
    overflow: hidden;
    border: var(--border-hairline, 1px) solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: var(--radius-card, 12px);
    background: var(--bg-surface, #ffffff);
}

.grades-toolbar[b-m4giwagrdz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
}

.grades-search[b-m4giwagrdz] {
    position: relative;
    display: flex;
    align-items: center;
    width: min(100%, 340px);
}

.grades-search[b-m4giwagrdz]  svg {
    position: absolute;
    left: 11px;
    z-index: 1;
    color: var(--text-tertiary, #888780);
    pointer-events: none;
}

.grades-search input[b-m4giwagrdz] {
    width: 100%;
    min-height: 40px;
    padding: 7px 11px 7px 35px;
    border: 1px solid var(--border-default, rgba(0, 0, 0, 0.15));
    border-radius: var(--radius-input, 8px);
    background: var(--input-bg, var(--bg-surface, #ffffff));
    color: var(--text-primary, #1a1a18);
    font: inherit;
    font-size: 0.84rem;
}

.grades-search input:focus[b-m4giwagrdz] {
    outline: none;
    border-color: var(--brand-primary, #085041);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary, #085041) 14%, transparent);
}

.grades-filters[b-m4giwagrdz] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px;
    border-radius: 10px;
    background: var(--bg-muted, #f1efe8);
}

.grades-filters button[b-m4giwagrdz] {
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: var(--text-secondary, #5f5e5a);
    font: inherit;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
}

.grades-filters button:hover[b-m4giwagrdz] {
    color: var(--text-primary, #1a1a18);
}

.grades-filters button.is-active[b-m4giwagrdz] {
    border-color: var(--border-subtle, rgba(0, 0, 0, 0.08));
    background: var(--bg-surface, #ffffff);
    color: var(--brand-primary, #085041);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.04));
}

.grades-state[b-m4giwagrdz] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    gap: 12px;
    padding: 28px;
    color: var(--text-secondary, #5f5e5a);
    text-align: left;
}

.grades-state[b-m4giwagrdz] >  svg {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    color: var(--brand-primary, #085041);
}

.grades-state div[b-m4giwagrdz] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.grades-state strong[b-m4giwagrdz] {
    color: var(--text-primary, #1a1a18);
    font-size: 0.92rem;
}

.grades-state span[b-m4giwagrdz] {
    font-size: 0.82rem;
}

.grades-state--error[b-m4giwagrdz] >  svg {
    color: var(--danger-token, #a32d2d);
}

.grades-state--error button[b-m4giwagrdz] {
    min-height: 34px;
    margin-left: 8px;
    padding: 0 10px;
    border: 1px solid var(--danger-token, #a32d2d);
    border-radius: 7px;
    background: transparent;
    color: var(--danger-token, #a32d2d);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

.grades-state--empty[b-m4giwagrdz] {
    flex-direction: column;
    text-align: center;
}

.grades-table-wrap[b-m4giwagrdz] {
    width: 100%;
    overflow-x: auto;
}

.grades-table[b-m4giwagrdz] {
    width: 100%;
    border-collapse: collapse;
    color: var(--text-primary, #1a1a18);
    font-size: 0.82rem;
}

.grades-table th[b-m4giwagrdz] {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    background: var(--bg-base, #fafaf7);
    color: var(--text-tertiary, #888780);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.grades-table td[b-m4giwagrdz] {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    vertical-align: middle;
}

.grades-table tbody tr[b-m4giwagrdz] {
    transition: background 0.14s ease;
}

.grades-table tbody tr:hover[b-m4giwagrdz] {
    background: var(--bg-base, #fafaf7);
}

.grades-table tbody tr:last-child td[b-m4giwagrdz] {
    border-bottom: 0;
}

.student-cell[b-m4giwagrdz] {
    display: flex;
    align-items: center;
    min-width: 210px;
    gap: 9px;
}

.student-avatar[b-m4giwagrdz] {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 9px;
    background: var(--c-teal-bg, #e1f5ee);
    color: var(--c-teal-fg, #0f6e56);
    font-size: 0.68rem;
    font-weight: 800;
}

.student-copy[b-m4giwagrdz],
.test-copy[b-m4giwagrdz],
.score-copy[b-m4giwagrdz] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.student-copy strong[b-m4giwagrdz],
.test-copy strong[b-m4giwagrdz],
.score-copy strong[b-m4giwagrdz] {
    overflow: hidden;
    color: var(--text-primary, #1a1a18);
    font-size: 0.82rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-copy small[b-m4giwagrdz],
.test-copy small[b-m4giwagrdz],
.score-copy small[b-m4giwagrdz] {
    color: var(--text-tertiary, #888780);
    font-size: 0.7rem;
}

.test-copy[b-m4giwagrdz] {
    min-width: 180px;
    max-width: 360px;
}

.grade-status[b-m4giwagrdz] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: 999px;
    background: var(--bg-muted, #f1efe8);
    color: var(--text-secondary, #5f5e5a);
    font-size: 0.7rem;
    font-weight: 750;
    white-space: nowrap;
}

.grade-status > span[b-m4giwagrdz] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.grade-status--complete[b-m4giwagrdz] {
    border-color: color-mix(in srgb, var(--c-green-fg, #639922) 25%, transparent);
    background: var(--c-green-bg, #eaf3de);
    color: var(--c-green-fg, #4d7c0f);
}

.grade-status--progress[b-m4giwagrdz] {
    border-color: color-mix(in srgb, var(--c-blue-fg, #185fa5) 25%, transparent);
    background: var(--c-blue-bg, #e6f1fb);
    color: var(--c-blue-fg, #185fa5);
}

.grade-status--stopped[b-m4giwagrdz] {
    border-color: color-mix(in srgb, var(--danger-token, #a32d2d) 22%, transparent);
    background: var(--danger-bg-token, #fcebeb);
    color: var(--danger-token, #a32d2d);
}

.score-copy .is-passed[b-m4giwagrdz] {
    color: var(--c-green-fg, #4d7c0f);
    font-weight: 700;
}

.score-copy .is-below[b-m4giwagrdz] {
    color: var(--c-amber-fg, #ba7517);
    font-weight: 700;
}

.score-empty[b-m4giwagrdz],
.grades-table time[b-m4giwagrdz] {
    color: var(--text-secondary, #5f5e5a);
    font-size: 0.76rem;
    white-space: nowrap;
}

.grades-footer[b-m4giwagrdz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-top: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    background: var(--bg-base, #fafaf7);
    color: var(--text-tertiary, #888780);
    font-size: 0.72rem;
    font-weight: 650;
}

@media (max-width: 1080px) {
    .grades-stats[b-m4giwagrdz] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .grades-header[b-m4giwagrdz],
    .grades-toolbar[b-m4giwagrdz] {
        align-items: stretch;
        flex-direction: column;
    }

    .grades-search[b-m4giwagrdz] {
        width: 100%;
    }

    .grades-filters[b-m4giwagrdz] {
        align-self: flex-start;
        max-width: 100%;
        overflow-x: auto;
    }

    .grades-table-wrap[b-m4giwagrdz] {
        overflow: visible;
        padding: 10px;
    }

    .grades-table[b-m4giwagrdz],
    .grades-table tbody[b-m4giwagrdz],
    .grades-table tr[b-m4giwagrdz],
    .grades-table td[b-m4giwagrdz] {
        display: block;
        width: 100%;
    }

    .grades-table thead[b-m4giwagrdz] {
        display: none;
    }

    .grades-table tbody[b-m4giwagrdz] {
        display: grid;
        gap: 9px;
    }

    .grades-table tbody tr[b-m4giwagrdz] {
        padding: 5px 12px;
        border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
        border-radius: 10px;
        background: var(--bg-surface, #ffffff);
    }

    .grades-table td[b-m4giwagrdz] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 9px 0;
        border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
        text-align: right;
    }

    .grades-table td[b-m4giwagrdz]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: var(--text-tertiary, #888780);
        font-size: 0.66rem;
        font-weight: 800;
        letter-spacing: 0.07em;
        text-transform: uppercase;
    }

    .grades-table td:last-child[b-m4giwagrdz] {
        border-bottom: 0;
    }

    .student-cell[b-m4giwagrdz],
    .test-copy[b-m4giwagrdz] {
        min-width: 0;
        max-width: min(70%, 320px);
    }

    .grades-state[b-m4giwagrdz] {
        min-height: 220px;
    }
}

@media (max-width: 520px) {
    .grades-stats[b-m4giwagrdz] {
        grid-template-columns: 1fr;
    }

    .grade-stat[b-m4giwagrdz] {
        min-height: 72px;
    }

    .grades-header[b-m4giwagrdz] {
        padding: 16px;
    }

    .grades-refresh[b-m4giwagrdz] {
        min-height: 44px;
    }

    .grades-filters[b-m4giwagrdz] {
        width: 100%;
    }

    .grades-filters button[b-m4giwagrdz] {
        flex: 1;
        min-height: 44px;
        white-space: nowrap;
    }

    .grades-footer[b-m4giwagrdz] {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .teacher-grades *[b-m4giwagrdz],
    .teacher-grades *[b-m4giwagrdz]::before,
    .teacher-grades *[b-m4giwagrdz]::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}
/* _content/AptisWeb/Components/Pages/Teacher/Tabs/TeacherOverviewTab.razor.rz.scp.css */
.teacher-overview[b-s5tnmbd74e] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.overview-hero[b-s5tnmbd74e] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 20px 24px;
    overflow: hidden;
    border-radius: var(--radius-card, 12px);
    background: var(--teacher-action-bg, #085041);
    color: #ffffff;
}

.overview-hero[b-s5tnmbd74e]::after {
    content: "";
    position: absolute;
    top: -110px;
    right: -80px;
    width: 280px;
    height: 280px;
    border: 48px solid rgba(255, 255, 255, 0.04);
    border-radius: 50%;
    pointer-events: none;
}

.overview-hero__content[b-s5tnmbd74e] {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.overview-hero__eyebrow[b-s5tnmbd74e] {
    display: inline-block;
    margin-bottom: 6px;
    color: rgba(255, 255, 255, 0.84);
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.overview-hero h2[b-s5tnmbd74e] {
    margin: 0 0 6px;
    color: #ffffff;
    font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.65rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
}

.overview-hero p[b-s5tnmbd74e] {
    max-width: 680px;
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.9rem;
    line-height: 1.55;
}

.overview-hero__actions[b-s5tnmbd74e] {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.overview-hero__button[b-s5tnmbd74e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    gap: 7px;
    padding: 0 13px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: var(--radius-input, 8px);
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.overview-hero__button:hover[b-s5tnmbd74e] {
    background: rgba(255, 255, 255, 0.2);
}

.overview-hero__button:active[b-s5tnmbd74e] {
    transform: scale(0.97);
}

.overview-hero__button--primary[b-s5tnmbd74e] {
    border-color: #ffffff;
    background: #ffffff;
    color: var(--teacher-action-bg, #085041);
}

.overview-hero__button--primary:hover[b-s5tnmbd74e] {
    background: rgba(255, 255, 255, 0.9);
    color: var(--teacher-action-bg, #085041);
}

.overview-stats[b-s5tnmbd74e] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.overview-stat[b-s5tnmbd74e] {
    --stat-accent: var(--c-teal-fg, #0f6e56);
    --stat-bg: var(--c-teal-bg, #e1f5ee);
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 82px;
    gap: 11px;
    padding: 14px 15px;
    overflow: hidden;
    border: var(--border-hairline, 1px) solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: var(--radius-card, 12px);
    background: var(--bg-muted, #f1efe8);
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.overview-stat[b-s5tnmbd74e]::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--stat-accent);
}

.overview-stat:hover[b-s5tnmbd74e] {
    border-color: var(--border-default, rgba(0, 0, 0, 0.15));
    box-shadow: var(--shadow-hover, 0 4px 12px rgba(0, 0, 0, 0.06));
    transform: translateY(-1px);
}

.overview-stat__icon[b-s5tnmbd74e] {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 10px;
    background: var(--stat-bg);
    color: var(--stat-accent);
}

.overview-stat__copy[b-s5tnmbd74e] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.overview-stat__copy small[b-s5tnmbd74e] {
    overflow: hidden;
    color: var(--text-tertiary, #888780);
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.overview-stat__copy strong[b-s5tnmbd74e] {
    color: var(--text-primary, #1a1a18);
    font-size: 1.3rem;
    font-weight: 750;
}

.overview-stat--active[b-s5tnmbd74e] {
    --stat-accent: var(--c-green-fg, #639922);
    --stat-bg: var(--c-green-bg, #eaf3de);
}

.overview-stat--attention[b-s5tnmbd74e] {
    --stat-accent: var(--c-amber-fg, #ba7517);
    --stat-bg: var(--c-amber-bg, #faeeda);
}

.overview-stat--tests[b-s5tnmbd74e] {
    --stat-accent: var(--c-blue-fg, #185fa5);
    --stat-bg: var(--c-blue-bg, #e6f1fb);
}

.overview-workspace[b-s5tnmbd74e] {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
    align-items: start;
    gap: 14px;
}

.overview-panel[b-s5tnmbd74e] {
    padding: 17px;
    border: var(--border-hairline, 1px) solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: var(--radius-card, 12px);
    background: var(--bg-surface, #ffffff);
}

.overview-panel__header[b-s5tnmbd74e] {
    margin-bottom: 13px;
}

.overview-panel__header h2[b-s5tnmbd74e] {
    margin: 0;
    color: var(--text-primary, #1a1a18);
    font-size: 0.98rem;
    font-weight: 750;
}

.overview-panel__header p[b-s5tnmbd74e] {
    margin: 3px 0 0;
    color: var(--text-secondary, #5f5e5a);
    font-size: 0.8rem;
    line-height: 1.45;
}

.overview-actions[b-s5tnmbd74e] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.overview-action[b-s5tnmbd74e] {
    --action-bg: var(--c-teal-bg, #e1f5ee);
    --action-fg: var(--c-teal-fg, #0f6e56);
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    min-height: 68px;
    gap: 9px;
    padding: 10px;
    border: var(--border-hairline, 1px) solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: 10px;
    background: var(--bg-surface, #ffffff);
    color: var(--text-primary, #1a1a18);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.overview-action:hover[b-s5tnmbd74e] {
    border-color: var(--border-default, rgba(0, 0, 0, 0.15));
    box-shadow: var(--shadow-hover, 0 4px 12px rgba(0, 0, 0, 0.06));
    transform: translateY(-1px);
}

.overview-action__icon[b-s5tnmbd74e] {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--action-bg);
    color: var(--action-fg);
}

.overview-action__copy[b-s5tnmbd74e] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.overview-action__copy strong[b-s5tnmbd74e] {
    color: var(--text-primary, #1a1a18);
    font-size: 0.8rem;
    font-weight: 700;
}

.overview-action__copy small[b-s5tnmbd74e] {
    color: var(--text-secondary, #5f5e5a);
    font-size: 0.68rem;
    line-height: 1.35;
}

.overview-action[b-s5tnmbd74e]  .overview-action__arrow {
    color: var(--action-fg);
    transition: transform 0.15s ease;
}

.overview-action:hover[b-s5tnmbd74e]  .overview-action__arrow {
    transform: translateX(3px);
}

.overview-action--classes[b-s5tnmbd74e] {
    --action-bg: var(--c-blue-bg, #e6f1fb);
    --action-fg: var(--c-blue-fg, #185fa5);
}

.overview-action--tests[b-s5tnmbd74e] {
    --action-bg: var(--c-purple-bg, #eeedfe);
    --action-fg: var(--c-purple-fg, #534ab7);
}

.overview-action--grades[b-s5tnmbd74e] {
    --action-bg: var(--c-amber-bg, #faeeda);
    --action-fg: var(--c-amber-fg, #ba7517);
}

.snapshot-list[b-s5tnmbd74e] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.snapshot-row[b-s5tnmbd74e] {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-height: 54px;
    padding: 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: background 0.14s ease, border-color 0.14s ease;
}

.snapshot-row:hover[b-s5tnmbd74e] {
    border-color: var(--border-subtle, rgba(0, 0, 0, 0.08));
    background: var(--bg-base, #fafaf7);
}

.snapshot-row__icon[b-s5tnmbd74e] {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: var(--c-teal-bg, #e1f5ee);
    color: var(--c-teal-fg, #0f6e56);
}

.snapshot-row__icon--active[b-s5tnmbd74e] {
    background: var(--c-green-bg, #eaf3de);
    color: var(--c-green-fg, #639922);
}

.snapshot-row__icon--attention[b-s5tnmbd74e] {
    background: var(--c-amber-bg, #faeeda);
    color: var(--c-amber-fg, #ba7517);
}

.snapshot-row__icon--tests[b-s5tnmbd74e] {
    background: var(--c-blue-bg, #e6f1fb);
    color: var(--c-blue-fg, #185fa5);
}

.snapshot-row > span:last-child[b-s5tnmbd74e] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.snapshot-row strong[b-s5tnmbd74e] {
    color: var(--text-primary, #1a1a18);
    font-size: 0.78rem;
    font-weight: 700;
}

.snapshot-row small[b-s5tnmbd74e] {
    color: var(--text-secondary, #5f5e5a);
    font-size: 0.68rem;
}

@media (max-width: 1120px) {
    .overview-stats[b-s5tnmbd74e] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .overview-workspace[b-s5tnmbd74e] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .overview-hero[b-s5tnmbd74e] {
        grid-template-columns: 1fr;
        padding: 18px;
    }

    .overview-hero__actions[b-s5tnmbd74e] {
        justify-content: flex-start;
    }

    .overview-actions[b-s5tnmbd74e] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .overview-stats[b-s5tnmbd74e] {
        grid-template-columns: 1fr;
    }

    .overview-stat[b-s5tnmbd74e] {
        min-height: 72px;
    }

    .overview-hero__button[b-s5tnmbd74e] {
        min-height: 44px;
    }

    .overview-panel[b-s5tnmbd74e] {
        padding: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .teacher-overview *[b-s5tnmbd74e],
    .teacher-overview *[b-s5tnmbd74e]::before,
    .teacher-overview *[b-s5tnmbd74e]::after {
        transition-duration: 0.001ms !important;
    }
}
/* _content/AptisWeb/Components/Pages/Teacher/Tabs/TeacherPlaceholderTab.razor.rz.scp.css */
.placeholder-card[b-zjh872ayau] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: min(100%, 760px);
    min-height: 300px;
    gap: 20px;
    padding: 28px;
    border: var(--border-hairline, 1px) solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: var(--radius-card, 12px);
    background:
        radial-gradient(440px 260px at 0% 0%, rgba(15, 110, 86, 0.1), transparent 72%),
        var(--bg-surface, #ffffff);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.04));
}

.placeholder-card__topline[b-zjh872ayau] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
}

.placeholder-icon[b-zjh872ayau] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 1px solid rgba(15, 110, 86, 0.2);
    border-radius: 12px;
    background: var(--c-teal-bg, #e1f5ee);
    color: var(--c-teal-fg, #0f6e56);
}

.placeholder-status[b-zjh872ayau] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: 999px;
    background: var(--bg-muted, #f1efe8);
    color: var(--text-secondary, #5f5e5a);
    font-size: 0.76rem;
    font-weight: 700;
}

.placeholder-card__copy[b-zjh872ayau] {
    max-width: 600px;
}

.placeholder-eyebrow[b-zjh872ayau] {
    display: block;
    margin-bottom: 7px;
    color: var(--brand-primary, #085041);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.placeholder-card h2[b-zjh872ayau] {
    margin: 0 0 8px;
    color: var(--text-primary, #1a1a18);
    font-size: clamp(1.35rem, 1.2rem + 0.4vw, 1.65rem);
    font-weight: 700;
}

.placeholder-card p[b-zjh872ayau] {
    margin: 0;
    color: var(--text-secondary, #5f5e5a);
    font-size: 0.95rem;
    line-height: 1.65;
}

.placeholder-action[b-zjh872ayau] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid var(--teacher-action-bg, #085041);
    border-radius: var(--radius-input, 8px);
    background: var(--teacher-action-bg, #085041);
    color: #ffffff;
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.16s ease, transform 0.16s ease;
}

.placeholder-action:hover[b-zjh872ayau] {
    background: var(--teacher-action-hover, #063d32);
    color: #ffffff;
    transform: translateY(-1px);
}

@media (max-width: 600px) {
    .placeholder-card[b-zjh872ayau] {
        min-height: 260px;
        padding: 20px;
    }

    .placeholder-action[b-zjh872ayau] {
        min-height: 44px;
    }
}
/* _content/AptisWeb/Components/Pages/Teacher/Tabs/TeacherReviewsTab.razor.rz.scp.css */
.teacher-reviews[b-y4xs8h77u0] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.reviews-header[b-y4xs8h77u0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.reviews-status[b-y4xs8h77u0] {
    padding: 16px;
    border-radius: 12px;
    background: var(--bg-surface, #FFFFFF);
    border: 1px dashed var(--border-default, rgba(0, 0, 0, 0.15));
    color: var(--text-secondary, #5F5E5A);
}

.reviews-status.error[b-y4xs8h77u0] {
    color: var(--danger-token, #A32D2D);
    background: var(--danger-bg-token, #FCEBEB);
    border-color: rgba(163, 45, 45, 0.18);
    border-style: solid;
}

.review-list[b-y4xs8h77u0] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.review-card[b-y4xs8h77u0] {
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: 14px;
    padding: 16px 18px;
    background: var(--bg-surface, #FFFFFF);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color 0.2s ease, box-shadow 0.25s ease;
}

.review-card:hover[b-y4xs8h77u0] {
    border-color: rgba(8, 80, 65, 0.3);
    box-shadow: 0 10px 24px rgba(15, 110, 86, 0.1);
}

.review-header[b-y4xs8h77u0] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.review-title[b-y4xs8h77u0] {
    font-weight: 500;
    color: var(--text-primary, #1A1A18);
}

.review-meta[b-y4xs8h77u0] {
    display: flex;
    gap: 12px;
    font-size: 0.78rem;
    color: var(--text-secondary, #5F5E5A);
}

.review-tags[b-y4xs8h77u0] {
    display: flex;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--c-teal-fg, #0F6E56);
}

.review-body[b-y4xs8h77u0] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.review-section[b-y4xs8h77u0] {
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--bg-base, #FAFAF7);
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
}

.section-label[b-y4xs8h77u0] {
    font-size: 0.74rem;
    color: var(--text-tertiary, #888780);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
    margin-bottom: 4px;
}

.review-feedback[b-y4xs8h77u0] {
    border-top: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.review-feedback textarea[b-y4xs8h77u0],
.review-feedback input[b-y4xs8h77u0] {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--border-default, rgba(0, 0, 0, 0.15));
    border-radius: 10px;
    background: var(--bg-surface, #FFFFFF);
    font-family: inherit;
    color: var(--text-primary, #1A1A18);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.review-feedback textarea:focus[b-y4xs8h77u0],
.review-feedback input:focus[b-y4xs8h77u0] {
    outline: none;
    border-color: var(--brand-primary, #085041);
    box-shadow: 0 0 0 3px rgba(15, 110, 86, 0.18);
}

.form-row[b-y4xs8h77u0] {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 12px;
}

.form-wide[b-y4xs8h77u0] {
    grid-column: span 1;
}

.form-actions[b-y4xs8h77u0] {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}
/* _content/AptisWeb/Components/Pages/Teacher/Tabs/TeacherTestsTab.razor.rz.scp.css */
.teacher-tests[b-jw4nbjbfao] {
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
}

.section-header[b-jw4nbjbfao] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.4rem 1.6rem;
    border-radius: 16px;
    background:
        radial-gradient(220px 150px at 0% 0%, rgba(15, 110, 86, 0.10), transparent 72%),
        var(--bg-surface, #FFFFFF);
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
}

.section-header h2[b-jw4nbjbfao] {
    margin: 0 0 0.35rem 0;
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--text-primary, #1A1A18);
}

.section-header p[b-jw4nbjbfao] {
    margin: 0;
    color: var(--text-secondary, #5F5E5A);
    font-weight: 400;
    font-size: 0.92rem;
}

.search-box[b-jw4nbjbfao] {
    position: relative;
    min-width: 280px;
}

.search-box[b-jw4nbjbfao]  svg {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary, #888780);
}

.search-box input[b-jw4nbjbfao] {
    width: 100%;
    padding: 0.65rem 0.9rem 0.65rem 2.5rem;
    border-radius: 12px;
    border: 1px solid var(--border-default, rgba(0, 0, 0, 0.15));
    background: var(--bg-surface, #FFFFFF);
    font-weight: 500;
    color: var(--text-primary, #1A1A18);
}

.search-box input:focus[b-jw4nbjbfao] {
    outline: none;
    border-color: var(--brand-primary, #085041);
    box-shadow: 0 0 0 3px rgba(15, 110, 86, 0.18);
}

.loading-state[b-jw4nbjbfao],
.empty-state[b-jw4nbjbfao] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1.1rem 1.2rem;
    border-radius: 14px;
    background: var(--bg-surface, #FFFFFF);
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    color: var(--text-secondary, #5F5E5A);
    font-weight: 500;
}

.tests-grid[b-jw4nbjbfao] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.test-card[b-jw4nbjbfao] {
    padding: 1.2rem 1.25rem;
    border-radius: 14px;
    background: var(--bg-surface, #FFFFFF);
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-left: 4px solid var(--c-teal-fg, #0F6E56);
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease;
}

.test-card:hover[b-jw4nbjbfao] {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(15, 110, 86, 0.12);
}

.test-card.is-inactive[b-jw4nbjbfao] {
    border-left-color: var(--text-tertiary, #888780);
    opacity: 0.85;
}

.test-card[b-jw4nbjbfao]::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.08;
    pointer-events: none;
    background: radial-gradient(220px 160px at 0% 0%, rgba(15, 110, 86, 0.35), transparent 72%);
}

.test-card.is-inactive[b-jw4nbjbfao]::before {
    background: radial-gradient(220px 160px at 0% 0%, rgba(136, 135, 128, 0.35), transparent 72%);
}

.card-top[b-jw4nbjbfao] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
}

.card-top h3[b-jw4nbjbfao] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--text-primary, #1A1A18);
    position: relative;
}

.status[b-jw4nbjbfao] {
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 500;
    border: 1px solid transparent;
    position: relative;
}

.status.active[b-jw4nbjbfao] {
    color: var(--c-green-fg, #639922);
    background: var(--c-green-bg, #EAF3DE);
    border-color: rgba(99, 153, 34, 0.25);
}

.status.inactive[b-jw4nbjbfao] {
    color: var(--text-tertiary, #888780);
    background: var(--bg-muted, #F1EFE8);
    border-color: var(--border-subtle, rgba(0, 0, 0, 0.08));
}

.description[b-jw4nbjbfao] {
    margin: 0;
    color: var(--text-secondary, #5F5E5A);
    font-weight: 400;
    position: relative;
}

.meta[b-jw4nbjbfao] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    color: var(--text-secondary, #5F5E5A);
    font-weight: 500;
    font-size: 0.86rem;
    position: relative;
}

.meta-item[b-jw4nbjbfao] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.meta-item[b-jw4nbjbfao]  svg {
    color: var(--brand-primary, #085041);
}

.loading-state[b-jw4nbjbfao]  .spin {
    animation: teacher-tests-spin-b-jw4nbjbfao 0.8s linear infinite;
}

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

.error-state[b-jw4nbjbfao] {
    border-color: color-mix(in srgb, var(--danger-token, #A32D2D) 28%, transparent);
    background: var(--danger-bg-token, #FCEBEB);
    color: var(--danger-token, #A32D2D);
}

.footer-note[b-jw4nbjbfao] {
    color: var(--text-tertiary, #888780);
    font-weight: 500;
    font-size: 0.86rem;
    padding-left: 0.3rem;
}

@media (max-width: 1200px) {
    .tests-grid[b-jw4nbjbfao] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .section-header[b-jw4nbjbfao] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-box[b-jw4nbjbfao] {
        min-width: 0;
        width: 100%;
    }

    .tests-grid[b-jw4nbjbfao] {
        grid-template-columns: 1fr;
    }
}
/* _content/AptisWeb/Components/Pages/Teacher/TeacherDashboard.razor.rz.scp.css */
.teacher-dashboard-page:focus-visible[b-ld87l3fn6u] {
    outline: 2px solid var(--brand-primary, #085041);
    outline-offset: 4px;
    border-radius: var(--radius-card, 12px);
}

.teacher-page-alert[b-ld87l3fn6u] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    padding: 11px 12px;
    border: 1px solid color-mix(in srgb, var(--danger-token, #a32d2d) 28%, transparent);
    border-radius: var(--radius-input, 8px);
    background: var(--danger-bg-token, #fcebeb);
    color: var(--danger-token, #a32d2d);
    font-size: 0.86rem;
    font-weight: 650;
}

.teacher-page-alert span[b-ld87l3fn6u] {
    flex: 1;
}

.teacher-page-alert button[b-ld87l3fn6u] {
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid currentColor;
    border-radius: 7px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
}

.teacher-page-alert button:hover[b-ld87l3fn6u] {
    background: color-mix(in srgb, currentColor 8%, transparent);
}

.teacher-student-modal__overlay[b-ld87l3fn6u] {
    position: fixed;
    inset: 0;
    z-index: 1800;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.56);
    backdrop-filter: blur(3px);
}

.teacher-student-modal[b-ld87l3fn6u] {
    display: flex;
    flex-direction: column;
    width: min(100%, 620px);
    max-height: min(760px, calc(100dvh - 40px));
    overflow: auto;
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: var(--radius-card, 12px);
    background: var(--bg-surface, #ffffff);
    color: var(--text-primary, #1a1a18);
    box-shadow: var(--shadow-lg, 0 24px 60px rgba(15, 23, 42, 0.22));
    animation: teacher-modal-enter-b-ld87l3fn6u 0.18s var(--ease-out, ease) both;
}

@keyframes teacher-modal-enter-b-ld87l3fn6u {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.teacher-student-modal__header[b-ld87l3fn6u] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
}

.teacher-student-modal__header span[b-ld87l3fn6u] {
    display: block;
    margin-bottom: 4px;
    color: var(--brand-primary, #085041);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.teacher-student-modal__header h2[b-ld87l3fn6u] {
    margin: 0;
    color: var(--text-primary, #1a1a18);
    font-size: 1.2rem;
    font-weight: 750;
}

.teacher-student-modal__header button[b-ld87l3fn6u] {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: 8px;
    background: var(--bg-base, #fafaf7);
    color: var(--text-secondary, #5f5e5a);
    cursor: pointer;
}

.teacher-student-modal__header button:hover[b-ld87l3fn6u] {
    border-color: var(--border-default, rgba(0, 0, 0, 0.15));
    color: var(--text-primary, #1a1a18);
}

.teacher-student-modal__body[b-ld87l3fn6u] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 20px;
}

.teacher-student-detail[b-ld87l3fn6u] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 78px;
    gap: 6px;
    padding: 12px 13px;
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: var(--radius-input, 8px);
    background: var(--bg-base, #fafaf7);
}

.teacher-student-detail span[b-ld87l3fn6u] {
    color: var(--text-tertiary, #888780);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.teacher-student-detail strong[b-ld87l3fn6u] {
    overflow-wrap: anywhere;
    color: var(--text-primary, #1a1a18);
    font-size: 0.88rem;
    font-weight: 650;
    line-height: 1.45;
}

.teacher-student-modal__footer[b-ld87l3fn6u] {
    display: flex;
    justify-content: flex-end;
    padding: 14px 20px;
    border-top: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
}

.teacher-student-modal__footer button[b-ld87l3fn6u] {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--teacher-action-bg, #085041);
    border-radius: var(--radius-input, 8px);
    background: var(--teacher-action-bg, #085041);
    color: #ffffff;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
}

.teacher-student-modal__footer button:hover[b-ld87l3fn6u] {
    background: var(--teacher-action-hover, #063d32);
}

@media (max-width: 600px) {
    .teacher-page-alert[b-ld87l3fn6u] {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .teacher-page-alert button[b-ld87l3fn6u] {
        margin-left: 24px;
    }

    .teacher-student-modal__overlay[b-ld87l3fn6u] {
        align-items: end;
        padding: 0;
    }

    .teacher-student-modal[b-ld87l3fn6u] {
        width: 100%;
        max-height: calc(100dvh - 36px);
        border-radius: 14px 14px 0 0;
    }

    .teacher-student-modal__body[b-ld87l3fn6u] {
        grid-template-columns: 1fr;
        padding: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .teacher-student-modal[b-ld87l3fn6u] {
        animation-duration: 0.001ms;
    }
}
/* _content/AptisWeb/Components/Pages/Teacher/TeacherProfile.razor.rz.scp.css */
.teacher-profile[b-uuozwjh3he] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.teacher-profile__hero[b-uuozwjh3he] {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 132px;
    gap: 18px;
    padding: 22px 24px;
    overflow: hidden;
    border: var(--border-hairline, 1px) solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: var(--radius-card, 12px);
    background:
        radial-gradient(320px 190px at -8% -30%, rgba(15, 110, 86, 0.18), transparent 72%),
        radial-gradient(320px 190px at 108% 0%, rgba(24, 95, 165, 0.1), transparent 74%),
        var(--bg-surface, #ffffff);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.04));
}

.teacher-profile__avatar[b-uuozwjh3he] {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    flex: 0 0 auto;
    overflow: hidden;
    border: 3px solid color-mix(in srgb, var(--bg-surface, #ffffff) 76%, transparent);
    border-radius: 18px;
    background: linear-gradient(135deg, var(--teacher-action-bg, #085041), #0a5c4c);
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(8, 80, 65, 0.2);
}

.teacher-profile__avatar[b-uuozwjh3he]  svg {
    width: 32px;
    height: 32px;
}

.teacher-profile__avatar img[b-uuozwjh3he] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.teacher-profile__identity[b-uuozwjh3he] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 5px;
}

.teacher-profile__identity h2[b-uuozwjh3he] {
    margin: 0;
    color: var(--text-primary, #1a1a18);
    font-size: clamp(1.35rem, 1.2rem + 0.5vw, 1.75rem);
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.teacher-profile__identity > p[b-uuozwjh3he] {
    margin: 0;
    color: var(--text-secondary, #5f5e5a);
    font-size: 0.88rem;
    font-weight: 600;
}

.teacher-profile__chips[b-uuozwjh3he] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 3px;
}

.teacher-profile__chip[b-uuozwjh3he] {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    gap: 6px;
    padding: 5px 8px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--c-teal-fg, #0f6e56) 25%, transparent);
    border-radius: 999px;
    background: var(--c-teal-bg, #e1f5ee);
    color: var(--c-teal-fg, #0f6e56);
    font-size: 0.78rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.teacher-profile__chip--muted[b-uuozwjh3he] {
    border-color: var(--border-subtle, rgba(0, 0, 0, 0.08));
    background: var(--bg-muted, #f1efe8);
    color: var(--text-secondary, #5f5e5a);
}

.teacher-profile__card[b-uuozwjh3he] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    border: var(--border-hairline, 1px) solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: var(--radius-card, 12px);
    background: var(--bg-surface, #ffffff);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.04));
}

.teacher-profile__card-header[b-uuozwjh3he] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
}

.teacher-profile__card-header h2[b-uuozwjh3he] {
    margin: 0 0 4px;
    color: var(--text-primary, #1a1a18);
    font-size: 1.05rem;
    font-weight: 750;
}

.teacher-profile__card-header p[b-uuozwjh3he] {
    margin: 0;
    color: var(--text-secondary, #5f5e5a);
    font-size: 0.84rem;
    line-height: 1.5;
}

.teacher-profile__upload[b-uuozwjh3he] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    gap: 8px;
    padding: 0 13px;
    overflow: hidden;
    border: 1px solid var(--teacher-action-bg, #085041);
    border-radius: var(--radius-input, 8px);
    background: var(--teacher-action-bg, #085041);
    color: #ffffff;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.teacher-profile__upload:hover[b-uuozwjh3he] {
    background: var(--teacher-action-hover, #063d32);
    box-shadow: 0 6px 16px rgba(8, 80, 65, 0.16);
    transform: translateY(-1px);
}

.teacher-profile__upload:focus-within[b-uuozwjh3he] {
    outline: 2px solid color-mix(in srgb, var(--brand-primary, #085041) 60%, transparent);
    outline-offset: 2px;
}

.teacher-profile__upload.is-busy[b-uuozwjh3he] {
    cursor: wait;
    opacity: 0.78;
    transform: none;
}

.teacher-profile__upload[b-uuozwjh3he]  .teacher-profile__upload-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
}

.teacher-profile__upload[b-uuozwjh3he]  .teacher-profile__upload-input:disabled {
    cursor: wait;
}

.teacher-profile__upload[b-uuozwjh3he]  .spin {
    animation: profile-spin-b-uuozwjh3he 0.8s linear infinite;
}

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

.teacher-profile__alert[b-uuozwjh3he] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: var(--radius-input, 8px);
    font-size: 0.84rem;
    font-weight: 650;
    line-height: 1.45;
}

.teacher-profile__alert--success[b-uuozwjh3he] {
    border-color: color-mix(in srgb, var(--c-green-fg, #639922) 28%, transparent);
    background: var(--c-green-bg, #eaf3de);
    color: var(--c-green-fg, #4d7c0f);
}

.teacher-profile__alert--error[b-uuozwjh3he] {
    border-color: color-mix(in srgb, var(--danger-token, #a32d2d) 28%, transparent);
    background: var(--danger-bg-token, #fcebeb);
    color: var(--danger-token, #a32d2d);
}

.teacher-profile__grid[b-uuozwjh3he] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.teacher-profile__item[b-uuozwjh3he] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 82px;
    gap: 7px;
    padding: 13px 14px;
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: var(--radius-input, 8px);
    background: var(--bg-base, #fafaf7);
}

.teacher-profile__label[b-uuozwjh3he] {
    color: var(--text-tertiary, #888780);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.teacher-profile__value[b-uuozwjh3he] {
    overflow-wrap: anywhere;
    color: var(--text-primary, #1a1a18);
    font-size: 0.92rem;
    font-weight: 650;
    line-height: 1.45;
}

.teacher-profile__value--code[b-uuozwjh3he] {
    font-family: var(--font-mono, "SFMono-Regular", Consolas, monospace);
    font-size: 0.82rem;
}

.teacher-profile__card--empty[b-uuozwjh3he] {
    align-items: center;
    min-height: 240px;
    justify-content: center;
    text-align: center;
}

.teacher-profile__card--empty h2[b-uuozwjh3he],
.teacher-profile__card--empty p[b-uuozwjh3he] {
    margin: 0;
}

.teacher-profile__login[b-uuozwjh3he] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 14px;
    border-radius: var(--radius-input, 8px);
    background: var(--teacher-action-bg, #085041);
    color: #ffffff;
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
}

.teacher-profile__login:hover[b-uuozwjh3he] {
    background: var(--teacher-action-hover, #063d32);
    color: #ffffff;
}

@media (max-width: 760px) {
    .teacher-profile__hero[b-uuozwjh3he] {
        align-items: flex-start;
        padding: 18px;
    }

    .teacher-profile__grid[b-uuozwjh3he] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .teacher-profile__hero[b-uuozwjh3he] {
        flex-direction: column;
    }

    .teacher-profile__avatar[b-uuozwjh3he] {
        width: 64px;
        height: 64px;
    }

    .teacher-profile__chips[b-uuozwjh3he] {
        width: 100%;
    }

    .teacher-profile__chip[b-uuozwjh3he] {
        width: 100%;
    }

    .teacher-profile__card[b-uuozwjh3he] {
        padding: 16px;
    }

    .teacher-profile__card-header[b-uuozwjh3he] {
        align-items: stretch;
        flex-direction: column;
    }

    .teacher-profile__upload[b-uuozwjh3he] {
        width: 100%;
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .teacher-profile *[b-uuozwjh3he],
    .teacher-profile *[b-uuozwjh3he]::before,
    .teacher-profile *[b-uuozwjh3he]::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}
/* _content/AptisWeb/Components/Shared/AptisPartBankTopicPicker.razor.rz.scp.css */
.aptis-part-bank-topic-picker[b-rt5lbvp9zg] {
    display: grid;
    flex: 1 1 24rem;
    gap: 0.625rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.aptis-part-bank-topic-picker__filters[b-rt5lbvp9zg] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.625rem;
    min-width: 0;
}

.aptis-part-bank-topic-picker__filter-label[b-rt5lbvp9zg] {
    flex: 0 0 auto;
    color: #52635a;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.aptis-part-bank-topic-picker__selection[b-rt5lbvp9zg] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
}

.aptis-part-bank-topic-picker__selection label[b-rt5lbvp9zg] {
    color: #52635a;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.aptis-part-bank-topic-picker__selection.is-unlabelled[b-rt5lbvp9zg] {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.aptis-part-bank-topic-picker__filter-buttons[b-rt5lbvp9zg] {
    display: flex;
    flex: 1 1 16rem;
    flex-wrap: wrap;
    gap: 0.375rem;
    max-width: 100%;
    min-width: 0;
}

.aptis-part-bank-topic-picker__filter[b-rt5lbvp9zg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 2.25rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid #cbd8d0;
    border-radius: 999px;
    background: #fff;
    color: #33483d;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.aptis-part-bank-topic-picker__filter strong[b-rt5lbvp9zg] {
    display: inline-grid;
    place-items: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: #edf3ef;
    color: #52635a;
    font-size: 0.7rem;
}

.aptis-part-bank-topic-picker__filter:hover:not(:disabled)[b-rt5lbvp9zg] {
    border-color: #2f7d50;
    background: #f2f8f4;
}

.aptis-part-bank-topic-picker__filter:focus-visible[b-rt5lbvp9zg],
.aptis-part-bank-topic-picker select:focus-visible[b-rt5lbvp9zg] {
    outline: 3px solid rgb(47 125 80 / 24%);
    outline-offset: 2px;
}

.aptis-part-bank-topic-picker__filter.is-active[b-rt5lbvp9zg] {
    border-color: #236a43;
    background: #236a43;
    color: #fff;
    box-shadow: 0 0.2rem 0.5rem rgb(35 106 67 / 18%);
}

.aptis-part-bank-topic-picker__filter.is-active strong[b-rt5lbvp9zg] {
    background: rgb(255 255 255 / 18%);
    color: #fff;
}

.aptis-part-bank-topic-picker__filter:disabled[b-rt5lbvp9zg] {
    cursor: not-allowed;
    opacity: 0.45;
}

.aptis-part-bank-topic-picker select[b-rt5lbvp9zg] {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 2.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 700px) {
    .aptis-part-bank-topic-picker[b-rt5lbvp9zg] {
        flex-basis: 100%;
        width: 100%;
    }

    .aptis-part-bank-topic-picker__filters[b-rt5lbvp9zg] {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.4rem;
    }

    .aptis-part-bank-topic-picker__selection[b-rt5lbvp9zg] {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.4rem;
    }

    .aptis-part-bank-topic-picker__filter-buttons[b-rt5lbvp9zg] {
        display: grid;
        flex: 0 0 auto;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }

    .aptis-part-bank-topic-picker__filter[b-rt5lbvp9zg] {
        min-height: 2.75rem;
        padding-inline: 0.5rem;
    }
}

@media (max-width: 420px) {
    .aptis-part-bank-topic-picker__filter[b-rt5lbvp9zg] {
        flex-direction: column;
        gap: 0.2rem;
        font-size: 0.72rem;
    }
}
/* _content/AptisWeb/Components/Shared/LanguageSwitcher.razor.rz.scp.css */
.language-switcher[b-oqeio1uy7z] {
    display: inline-block;
}

.language-switcher .btn[b-oqeio1uy7z] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    transition: all 0.3s ease;
}

.language-switcher .btn:hover[b-oqeio1uy7z] {
    background-color: #f8f9fa;border-color: #6c757d;
}

.language-switcher .lucide-globe[b-oqeio1uy7z] {
    font-size: 1.1rem;
}

.language-switcher .dropdown-menu[b-oqeio1uy7z] {
    min-width: 150px;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    border-radius: 0.375rem;
}

.language-switcher .dropdown-item[b-oqeio1uy7z] {
    padding: 0.5rem 1rem;
    transition: background-color 0.2s ease;
}

.language-switcher .dropdown-item:hover[b-oqeio1uy7z] {
    background-color: #f8f9fa;
}

.language-switcher .dropdown-item.active[b-oqeio1uy7z] {
    background-color: #0d6efd;
    color: white;
}

.language-switcher .dropdown-item.active:hover[b-oqeio1uy7z] {
    background-color: #0b5ed7;
}
/* _content/AptisWeb/Components/Shared/LoadingIndicator.razor.rz.scp.css */
.page-loading-overlay[b-54q85sychg] {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(248, 250, 252, 0.82);
    backdrop-filter: blur(3px);
    animation: page-loading-fade-in-b-54q85sychg 0.18s ease-in;
}

.page-loading-content[b-54q85sychg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    min-width: 170px;
    padding: 1rem 1.25rem;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 28px rgba(2, 6, 23, 0.14);
}

.page-loading-spinner[b-54q85sychg] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: 3px solid rgba(15, 118, 110, 0.22);
    border-top-color: #0f766e;
    animation: page-loading-spin-b-54q85sychg 0.8s linear infinite;
}

.page-loading-text[b-54q85sychg] {
    color: #334155;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}

@keyframes page-loading-fade-in-b-54q85sychg {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes page-loading-spin-b-54q85sychg {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-loading-overlay[b-54q85sychg],
    .page-loading-spinner[b-54q85sychg] {
        animation: none;
    }
}

@media (prefers-color-scheme: dark) {
    .page-loading-overlay[b-54q85sychg] {
        background: rgba(15, 23, 42, 0.78);
    }

    .page-loading-content[b-54q85sychg] {
        background: rgba(30, 41, 59, 0.92);
        border-color: rgba(148, 163, 184, 0.28);
        box-shadow: 0 10px 28px rgba(2, 6, 23, 0.4);
    }

    .page-loading-spinner[b-54q85sychg] {
        border-color: rgba(94, 234, 212, 0.2);
        border-top-color: #2dd4bf;
    }

    .page-loading-text[b-54q85sychg] {
        color: #e2e8f0;
    }
}
/* _content/AptisWeb/Components/Shared/ModuleSection.razor.rz.scp.css */
.section-card[b-iusl2zg0da] {
    border-radius: 18px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
    min-width: 0;
}

.card-header[b-iusl2zg0da] {
    padding: 18px 24px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #f8fafc;
    min-width: 0;
    flex-wrap: wrap;
}

.section-title[b-iusl2zg0da] {
    color: #f8fafc;
    font-size: 1.45rem;
    font-weight: 500;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.section-icon[b-iusl2zg0da] {
    font-size: 1.55rem;
}

.section-count[b-iusl2zg0da] {
    background: rgba(248, 250, 252, 0.18);
    color: #f8fafc;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 500;
}

.card-body[b-iusl2zg0da] {
    padding: 24px;
    background: #ffffff;
    min-width: 0;
}

.part-section[b-iusl2zg0da] {
    margin-bottom: 1.5rem;
    padding: 1.2rem 1.4rem;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: #f9fafb;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.part-title[b-iusl2zg0da] {
    font-size: 1.25rem;
    font-weight: 500;
    margin-bottom: 0.8rem;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 10px;
}

.topic-section[b-iusl2zg0da] {
    background: #ffffff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.topic-label[b-iusl2zg0da] {
    font-weight: 500;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.92rem;
    margin-bottom: 8px;
    display: block;
}

.topic-content[b-iusl2zg0da] {
    color: #0f172a;
    line-height: 1.7;
    font-size: 1.12rem;
}

.topic-content p[b-iusl2zg0da] {
    margin-bottom: 0.6rem;
}

/* Module-specific color systems */
.header-listening[b-iusl2zg0da] {
    background: linear-gradient(135deg, #0ea5a4 0%, #0891b2 100%);
}

.module-listening .part-section[b-iusl2zg0da] {
    border-left: 4px solid #0891b2;
}

.header-reading[b-iusl2zg0da] {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}

.module-reading .part-section[b-iusl2zg0da] {
    border-left: 4px solid #1d4ed8;
}

.header-speaking[b-iusl2zg0da] {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}

.module-speaking .part-section[b-iusl2zg0da] {
    border-left: 4px solid #ea580c;
}

.header-writing[b-iusl2zg0da] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.module-writing .part-section[b-iusl2zg0da] {
    border-left: 4px solid #059669;
}

.header-grammar[b-iusl2zg0da] {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
}

.module-grammar .part-section[b-iusl2zg0da] {
    border-left: 4px solid #4f46e5;
}

.speaking-part3-grid[b-iusl2zg0da] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 16px;
    margin-top: 12px;
}

.speaking-part3-card[b-iusl2zg0da] {
    background: #ffffff;
    border: 1px solid var(--border-soft, #e5e7eb);
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.speaking-part3-label[b-iusl2zg0da] {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--speaking-color, #2563eb);
    color: #ffffff;
    font-weight: 500;
    font-size: 0.9rem;
}

.speaking-part3-text[b-iusl2zg0da] {
    margin: 0;
    color: var(--text-strong, #1f2937);
    line-height: 1.6;
}

@media (max-width: 640px) {
    .speaking-part3-grid[b-iusl2zg0da] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .card-header[b-iusl2zg0da] {
        padding: 16px 18px;
    }

    .card-body[b-iusl2zg0da] {
        padding: 18px;
    }

    .section-title[b-iusl2zg0da] {
        font-size: 1.3rem;
    }
}
/* _content/AptisWeb/Components/Shared/TestIssueReportButton.razor.rz.scp.css */
.issue-report-launch[b-qb2thwxs9h] {
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border-radius: 12px;
    padding: 9px 14px;
    min-height: 44px;
    max-width: 100%;
    font-size: 0.92rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.issue-report-launch:hover[b-qb2thwxs9h] {
    background: rgba(255, 255, 255, 0.24);
    border-color: rgba(255, 255, 255, 0.7);
}

.issue-report-overlay[b-qb2thwxs9h] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(15, 23, 42, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 3vw, 24px);
}

.issue-report-modal[b-qb2thwxs9h] {
    width: min(680px, calc(100vw - 24px));
    max-height: min(720px, calc(100dvh - 24px));
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 50px rgba(2, 6, 23, 0.35);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.issue-report-modal:focus[b-qb2thwxs9h] {
    outline: none;
}

.issue-report-header[b-qb2thwxs9h] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px 8px;
    min-width: 0;
    flex: 0 0 auto;
}

.issue-report-header h3[b-qb2thwxs9h] {
    margin: 0;
    font-size: 1.5rem;
    color: #111827;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.issue-report-context[b-qb2thwxs9h] {
    margin-top: 3px;
    color: #6b7280;
    font-size: 0.95rem;
    overflow-wrap: anywhere;
}

.issue-report-close[b-qb2thwxs9h] {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border: 0;
    border-radius: 10px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
}

.issue-report-close:hover:not(:disabled)[b-qb2thwxs9h] {
    background: #e5e7eb;
    color: #111827;
}

.issue-report-close:disabled[b-qb2thwxs9h] {
    opacity: 0.45;
    cursor: not-allowed;
}

.issue-report-body[b-qb2thwxs9h] {
    padding: 0 22px 10px;
    overflow-y: auto;
    min-width: 0;
}

.issue-report-label[b-qb2thwxs9h] {
    display: block;
    font-size: 0.95rem;
    color: #111827;
    margin-bottom: 8px;
    font-weight: 500;
}

.issue-report-textarea[b-qb2thwxs9h] {
    width: 100%;
    min-height: 132px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-size: 1rem;
    padding: 12px;
    resize: vertical;
    min-width: 0;
}

.issue-report-upload-row[b-qb2thwxs9h] {
    margin-top: 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.issue-report-upload-btn[b-qb2thwxs9h] {
    position: relative;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    min-height: 44px;
    padding: 9px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #111827;
    font-weight: 500;
    cursor: pointer;
    background: #fff;
    max-width: 100%;
    white-space: nowrap;
}

.issue-report-upload-btn.disabled[b-qb2thwxs9h] {
    opacity: 0.6;
    cursor: not-allowed;
}

.issue-report-upload-btn input[type="file"][b-qb2thwxs9h] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.issue-report-upload-note[b-qb2thwxs9h] {
    margin-top: 8px;
    color: #6b7280;
    font-size: 0.92rem;
    overflow-wrap: anywhere;
}

.issue-report-paste-note[b-qb2thwxs9h] {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 8px 10px;
    border-radius: 10px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 0.9rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.issue-report-images[b-qb2thwxs9h] {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 10px;
}

.issue-report-image-item[b-qb2thwxs9h] {
    position: relative;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    background: #f9fafb;
}

.issue-report-image-item img[b-qb2thwxs9h] {
    width: 100%;
    height: 74px;
    object-fit: cover;
    display: block;
}

.issue-report-image-item button[b-qb2thwxs9h] {
    position: absolute;
    top: 4px;
    right: 4px;
    border: 0;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.82);
    color: #fff;
    cursor: pointer;
    line-height: 1;
}

.issue-report-message[b-qb2thwxs9h] {
    margin-top: 12px;
    border-radius: 8px;
    padding: 9px 11px;
    font-size: 0.92rem;
}

.issue-report-message.error[b-qb2thwxs9h] {
    background: #fee2e2;
    color: #b91c1c;
}

.issue-report-message.success[b-qb2thwxs9h] {
    background: #dcfce7;
    color: #166534;
}

.issue-report-footer[b-qb2thwxs9h] {
    padding: 12px 22px 20px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    flex: 0 0 auto;
}

.issue-report-cancel[b-qb2thwxs9h],
.issue-report-submit[b-qb2thwxs9h] {
    border: 0;
    border-radius: 10px;
    min-height: 44px;
    padding: 10px 16px;
    font-weight: 500;
    cursor: pointer;
}

.issue-report-cancel[b-qb2thwxs9h] {
    background: #e5e7eb;
    color: #111827;
}

.issue-report-submit[b-qb2thwxs9h] {
    background: #2563eb;
    color: #fff;
}

.issue-report-cancel:disabled[b-qb2thwxs9h],
.issue-report-submit:disabled[b-qb2thwxs9h] {
    opacity: 0.6;
    cursor: not-allowed;
}

@media (max-width: 640px) {
    .issue-report-modal[b-qb2thwxs9h] {
        width: calc(100vw - 24px);
        max-height: calc(100dvh - 24px);
    }

    .issue-report-header[b-qb2thwxs9h] {
        padding: 16px 16px 8px;
    }

    .issue-report-header h3[b-qb2thwxs9h] {
        font-size: 1.25rem;
    }

    .issue-report-body[b-qb2thwxs9h] {
        padding-inline: 16px;
    }

    .issue-report-upload-row[b-qb2thwxs9h] {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .issue-report-upload-btn[b-qb2thwxs9h],
    .issue-report-footer > button[b-qb2thwxs9h] {
        width: 100%;
    }

    .issue-report-paste-note[b-qb2thwxs9h] {
        display: flex;
    }

    .issue-report-footer[b-qb2thwxs9h] {
        padding: 12px 16px 16px;
    }
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .issue-report-overlay[b-qb2thwxs9h] {
        background: rgba(2, 6, 23, 0.68);
    }

    :root:not([data-theme="light"]) .issue-report-modal[b-qb2thwxs9h] {
        background: var(--bg-surface, #171d1a);
        color: var(--text-primary, #f4f6f3);
        border: 1px solid var(--border-default, rgba(255, 255, 255, 0.14));
        box-shadow: 0 28px 70px rgba(0, 0, 0, 0.62);
        color-scheme: dark;
    }

    :root:not([data-theme="light"]) .issue-report-header h3[b-qb2thwxs9h],
    :root:not([data-theme="light"]) .issue-report-label[b-qb2thwxs9h] {
        color: var(--text-primary, #f4f6f3);
    }

    :root:not([data-theme="light"]) .issue-report-context[b-qb2thwxs9h],
    :root:not([data-theme="light"]) .issue-report-upload-note[b-qb2thwxs9h] {
        color: var(--text-secondary, #c9d3cd);
    }

    :root:not([data-theme="light"]) .issue-report-close[b-qb2thwxs9h],
    :root:not([data-theme="light"]) .issue-report-cancel[b-qb2thwxs9h],
    :root:not([data-theme="light"]) .issue-report-upload-btn[b-qb2thwxs9h] {
        background: var(--bg-elevated, #222923);
        border-color: var(--border-default, rgba(255, 255, 255, 0.14));
        color: var(--text-primary, #f4f6f3);
    }

    :root:not([data-theme="light"]) .issue-report-close:hover:not(:disabled)[b-qb2thwxs9h],
    :root:not([data-theme="light"]) .issue-report-cancel:hover:not(:disabled)[b-qb2thwxs9h],
    :root:not([data-theme="light"]) .issue-report-upload-btn:hover:not(.disabled)[b-qb2thwxs9h] {
        background: var(--bg-hover, #263029);
    }

    :root:not([data-theme="light"]) .issue-report-textarea[b-qb2thwxs9h] {
        background: var(--input-bg, #171d1a);
        border-color: var(--input-border, rgba(255, 255, 255, 0.14));
        color: var(--input-text, #f4f6f3);
    }

    :root:not([data-theme="light"]) .issue-report-textarea:focus[b-qb2thwxs9h] {
        outline: none;
        border-color: var(--brand-primary, #4fc49e);
        box-shadow: var(--focus-ring, 0 0 0 3px rgba(79, 196, 158, 0.22));
    }

    :root:not([data-theme="light"]) .issue-report-paste-note[b-qb2thwxs9h] {
        background: rgba(114, 168, 222, 0.14);
        color: #b5d4f4;
    }

    :root:not([data-theme="light"]) .issue-report-image-item[b-qb2thwxs9h] {
        background: var(--bg-elevated, #222923);
        border-color: var(--border-subtle, rgba(255, 255, 255, 0.08));
    }

    :root:not([data-theme="light"]) .issue-report-message.error[b-qb2thwxs9h] {
        background: rgba(248, 113, 113, 0.13);
        color: #fecaca;
    }

    :root:not([data-theme="light"]) .issue-report-message.success[b-qb2thwxs9h] {
        background: rgba(74, 222, 128, 0.13);
        color: #bbf7d0;
    }

    :root:not([data-theme="light"]) .issue-report-submit[b-qb2thwxs9h] {
        background: var(--brand-primary, #4fc49e);
        color: #07120f;
    }
}

[data-theme="dark"] .issue-report-overlay[b-qb2thwxs9h] {
    background: rgba(2, 6, 23, 0.68);
}

[data-theme="dark"] .issue-report-modal[b-qb2thwxs9h] {
    background: var(--bg-surface, #171d1a);
    color: var(--text-primary, #f4f6f3);
    border: 1px solid var(--border-default, rgba(255, 255, 255, 0.14));
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.62);
    color-scheme: dark;
}

[data-theme="dark"] .issue-report-header h3[b-qb2thwxs9h],
[data-theme="dark"] .issue-report-label[b-qb2thwxs9h] {
    color: var(--text-primary, #f4f6f3);
}

[data-theme="dark"] .issue-report-context[b-qb2thwxs9h],
[data-theme="dark"] .issue-report-upload-note[b-qb2thwxs9h] {
    color: var(--text-secondary, #c9d3cd);
}

[data-theme="dark"] .issue-report-close[b-qb2thwxs9h],
[data-theme="dark"] .issue-report-cancel[b-qb2thwxs9h],
[data-theme="dark"] .issue-report-upload-btn[b-qb2thwxs9h] {
    background: var(--bg-elevated, #222923);
    border-color: var(--border-default, rgba(255, 255, 255, 0.14));
    color: var(--text-primary, #f4f6f3);
}

[data-theme="dark"] .issue-report-close:hover:not(:disabled)[b-qb2thwxs9h],
[data-theme="dark"] .issue-report-cancel:hover:not(:disabled)[b-qb2thwxs9h],
[data-theme="dark"] .issue-report-upload-btn:hover:not(.disabled)[b-qb2thwxs9h] {
    background: var(--bg-hover, #263029);
}

[data-theme="dark"] .issue-report-textarea[b-qb2thwxs9h] {
    background: var(--input-bg, #171d1a);
    border-color: var(--input-border, rgba(255, 255, 255, 0.14));
    color: var(--input-text, #f4f6f3);
}

[data-theme="dark"] .issue-report-textarea:focus[b-qb2thwxs9h] {
    outline: none;
    border-color: var(--brand-primary, #4fc49e);
    box-shadow: var(--focus-ring, 0 0 0 3px rgba(79, 196, 158, 0.22));
}

[data-theme="dark"] .issue-report-paste-note[b-qb2thwxs9h] {
    background: rgba(114, 168, 222, 0.14);
    color: #b5d4f4;
}

[data-theme="dark"] .issue-report-image-item[b-qb2thwxs9h] {
    background: var(--bg-elevated, #222923);
    border-color: var(--border-subtle, rgba(255, 255, 255, 0.08));
}

[data-theme="dark"] .issue-report-message.error[b-qb2thwxs9h] {
    background: rgba(248, 113, 113, 0.13);
    color: #fecaca;
}

[data-theme="dark"] .issue-report-message.success[b-qb2thwxs9h] {
    background: rgba(74, 222, 128, 0.13);
    color: #bbf7d0;
}

[data-theme="dark"] .issue-report-submit[b-qb2thwxs9h] {
    background: var(--brand-primary, #4fc49e);
    color: #07120f;
}
/* _content/AptisWeb/Components/Shared/TestTaking/AudioPlayer.razor.rz.scp.css */
.audio-player-shell[b-prlzvfxudj] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: var(--muted);
    padding: 12px 16px;
    border-radius: var(--r-md);
    box-sizing: border-box;
}

.audio-player-shell__native[b-prlzvfxudj] {
    display: none !important;
    width: 0;
    height: 0;
}

.audio-player-shell__play[b-prlzvfxudj] {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0;
    background: var(--brand);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: transform var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}

.audio-player-shell__play i[b-prlzvfxudj] {
    font-size: 14px;
    line-height: 1;
}

.audio-player-shell__play:hover:not(:disabled)[b-prlzvfxudj] {
    background: var(--brand-hover);
    transform: scale(1.05);
}

.audio-player-shell__play:active:not(:disabled)[b-prlzvfxudj] {
    transform: scale(0.95);
}

.audio-player-shell__play:focus-visible[b-prlzvfxudj] {
    outline: none;
    box-shadow: var(--ring);
}

.audio-player-shell__play:disabled[b-prlzvfxudj],
.audio-player-shell.is-exhausted .audio-player-shell__play[b-prlzvfxudj] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.audio-player-shell__time[b-prlzvfxudj] {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: nowrap;
    min-width: 78px;
}

.audio-player-shell__bar[b-prlzvfxudj] {
    flex: 1 1 auto;
    height: 3px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 1.5px;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    transition: opacity var(--t-fast) var(--ease);
}

.audio-player-shell__bar:hover[b-prlzvfxudj] {
    opacity: 0.85;
}

.audio-player-shell__bar-fill[b-prlzvfxudj] {
    width: 100%;
    height: 100%;
    background: var(--brand);
    transform-origin: left center;
    transform: scaleX(0);
    will-change: transform;
}

.audio-player-shell__speed[b-prlzvfxudj] {
    flex: 0 0 auto;
    min-width: 48px;
    height: 28px;
    padding: 0 9px;
    border: 0.5px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.audio-player-shell__speed:hover[b-prlzvfxudj] {
    background: rgba(0, 0, 0, 0.04);
    color: var(--text);
    border-color: var(--border-strong);
}

.audio-player-shell__speed:active[b-prlzvfxudj] {
    transform: scale(0.96);
}

.audio-player-shell__speed:focus-visible[b-prlzvfxudj] {
    outline: none;
    box-shadow: var(--ring);
}

.audio-player-shell__pill[b-prlzvfxudj] {
    flex: 0 0 auto;
    background: var(--surface);
    border: 0.5px solid var(--border);
    color: var(--text-2);
    font-size: 11px;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.audio-player-shell__pill.is-exhausted[b-prlzvfxudj] {
    opacity: 0.7;
    color: var(--text-3);
}

.tabular[b-prlzvfxudj] {
    font-variant-numeric: tabular-nums;
}

.audio-player-shell__volume[b-prlzvfxudj] {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: var(--text-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    border-radius: var(--r-sm);
    transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

.audio-player-shell__volume i[b-prlzvfxudj] {
    font-size: 14px;
    line-height: 1;
}

.audio-player-shell__volume:hover[b-prlzvfxudj] {
    color: var(--text);
    background: rgba(0, 0, 0, 0.04);
}

.audio-player-shell__volume:active[b-prlzvfxudj] {
    transform: scale(0.92);
}

.audio-player-shell__volume:focus-visible[b-prlzvfxudj] {
    outline: none;
    box-shadow: var(--ring);
}

@media (max-width: 540px) {
    .audio-player-shell[b-prlzvfxudj] {
        flex-wrap: wrap;
        gap: 10px;
    }
    .audio-player-shell__bar[b-prlzvfxudj] {
        flex-basis: 100%;
        order: 5;
    }
    .audio-player-shell__time[b-prlzvfxudj] {
        min-width: 0;
    }
}
/* _content/AptisWeb/Components/Shared/TestTaking/AutoSaveIndicator.razor.rz.scp.css */
/* AutoSaveIndicator component */
.asi[b-hrtn5afrgu] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    border-radius: 6px;
    padding: 3px 8px;
    transition: opacity 200ms;
}

.asi--saving[b-hrtn5afrgu] {
    color: var(--c-amber-fg, #BA7517);
    background: var(--c-amber-bg, #FAEEDA);
}

.asi--saved[b-hrtn5afrgu] {
    color: var(--c-teal-fg, #0F6E56);
    background: var(--c-teal-bg, #E1F5EE);
}

.asi--error[b-hrtn5afrgu] {
    color: var(--danger-token, #A32D2D);
    background: var(--danger-bg-token, #FCEBEB);
}

.asi__icon[b-hrtn5afrgu] {
    font-size: 11px;
    flex-shrink: 0;
}

.asi__icon--spin[b-hrtn5afrgu] {
    animation: asi-spin-b-hrtn5afrgu 1s linear infinite;
}

@keyframes asi-spin-b-hrtn5afrgu {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
/* _content/AptisWeb/Components/Shared/TestTaking/CountdownTimer.razor.rz.scp.css */
/* CountdownTimer component */
.ct[b-sd0w4g7z1u] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 7px 14px 7px 10px;
    background: linear-gradient(135deg, #fff6df 0%, #f8ecc7 100%);
    border: 1px solid rgba(185, 149, 72, 0.35);
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(98, 72, 24, 0.08);
    transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
    font-family: inherit;
}

.ct--urgent[b-sd0w4g7z1u] {
    background: linear-gradient(135deg, #fff1f1 0%, #ffe1e1 100%);
    border-color: rgba(163, 45, 45, 0.28);
    box-shadow: 0 10px 24px rgba(163, 45, 45, 0.1);
}

.ct-i[b-sd0w4g7z1u] {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #1f2e2a;
    color: #fdfbf3;
    flex-shrink: 0;
}

.ct-i > .lucide[b-sd0w4g7z1u] {
    font-size: 14px;
    line-height: 1;
}

.ct--urgent .ct-i[b-sd0w4g7z1u] {
    background: #7f2222;
    color: #fff5f5;
}

.ct-copy[b-sd0w4g7z1u] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ct-v[b-sd0w4g7z1u] {
    font-size: 15px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary, #1A1A18);
    margin: 0;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.ct-l[b-sd0w4g7z1u] {
    font-size: 9.5px;
    color: var(--text-secondary, #5F5E5A);
    margin: 0;
    line-height: 1.15;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Mobile: hide label, show only time */
@media (max-width: 768px) {
    .ct-l[b-sd0w4g7z1u] {
        display: none;
    }

    .ct[b-sd0w4g7z1u] {
        min-height: 42px;
        padding: 6px 10px 6px 8px;
        gap: 8px;
    }

    .ct-i[b-sd0w4g7z1u] {
        width: 28px;
        height: 28px;
        border-radius: 9px;
    }

    .ct-v[b-sd0w4g7z1u] {
        font-size: 14px;
    }
}
/* _content/AptisWeb/Components/Shared/TestTaking/QuestionOption.razor.rz.scp.css */
.question-option[b-3w5zwskbhm] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    box-sizing: border-box;
    transition: transform var(--t-fast) var(--ease),
                background-color var(--t-base) var(--ease),
                border-color var(--t-fast) var(--ease),
                box-shadow var(--t-fast) var(--ease);
}

.question-option:hover[b-3w5zwskbhm] {
    border-color: var(--border-strong);
    background: var(--muted);
    transform: translateY(-1px);
}

.question-option:active[b-3w5zwskbhm] {
    transform: translateY(0) scale(0.995);
}

.question-option:focus-within[b-3w5zwskbhm] {
    outline: none;
    box-shadow: var(--ring);
}

.question-option__input[b-3w5zwskbhm] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
    margin: 0;
}

.question-option__radio[b-3w5zwskbhm] {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--border-strong);
    background: var(--surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
    box-sizing: border-box;
}

.question-option__radio-dot[b-3w5zwskbhm] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand);
    opacity: 0;
    transform: scale(0.6);
    transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.question-option__label[b-3w5zwskbhm] {
    flex: 1;
    font-size: 15px;
    line-height: 1.5;
    color: inherit;
    word-break: break-word;
}

.question-option__check[b-3w5zwskbhm] {
    flex: 0 0 auto;
    color: var(--brand);
    font-size: 16px;
    line-height: 1;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

/* Selected state (pre-submit) */
.question-option.is-selected[b-3w5zwskbhm] {
    border-color: var(--brand);
    border-width: 1.5px;
    background: var(--brand-soft);
    animation: question-option-pop-b-3w5zwskbhm 200ms var(--ease);
}

.question-option.is-selected:hover[b-3w5zwskbhm] {
    background: var(--brand-soft);
    border-color: var(--brand);
}

.question-option.is-selected .question-option__radio[b-3w5zwskbhm] {
    border-color: var(--brand);
}

.question-option.is-selected .question-option__radio-dot[b-3w5zwskbhm] {
    opacity: 1;
    transform: scale(1);
}

.question-option.is-selected .question-option__check[b-3w5zwskbhm] {
    opacity: 1;
    transform: scale(1);
}

@keyframes question-option-pop-b-3w5zwskbhm {
    0% { transform: scale(1); }
    50% { transform: scale(1.005); }
    100% { transform: scale(1); }
}

/* Locked (post-submit) — keep visible result, no hover lift */
.question-option:has(.question-option__input:disabled)[b-3w5zwskbhm] {
    cursor: default;
}

.question-option:has(.question-option__input:disabled):hover[b-3w5zwskbhm] {
    transform: none;
    background: var(--surface);
    border-color: var(--border);
}

/* Result classes (post-submit review). GetOptionResultClass returns:
   - "is-correct"   → correct answer (whether picked or not)
   - "is-incorrect" → user's wrong pick */
.question-option.is-correct[b-3w5zwskbhm] {
    border-color: var(--success-fg);
    background: var(--success-bg);
    color: var(--success-fg);
    border-width: 1.5px;
}

.question-option.is-correct .question-option__radio[b-3w5zwskbhm] {
    border-color: var(--success-fg);
}

.question-option.is-correct .question-option__radio-dot[b-3w5zwskbhm] {
    background: var(--success-fg);
    opacity: 1;
    transform: scale(1);
}

.question-option.is-correct .question-option__check[b-3w5zwskbhm] {
    color: var(--success-fg);
    opacity: 1;
    transform: scale(1);
}

.question-option.is-incorrect[b-3w5zwskbhm] {
    border-color: var(--danger-fg);
    background: var(--danger-bg);
    color: var(--danger-fg);
    border-width: 1.5px;
}

.question-option.is-incorrect .question-option__radio[b-3w5zwskbhm] {
    border-color: var(--danger-fg);
}

.question-option.is-incorrect .question-option__radio-dot[b-3w5zwskbhm] {
    background: var(--danger-fg);
    opacity: 1;
    transform: scale(1);
}

/* Reduced motion: tokens.css already kills transition/animation duration globally */
/* _content/AptisWeb/Components/Shared/TestTaking/RecordingPanel.razor.rz.scp.css */
/* RecordingPanel component */
.rp[b-ztcv424rw8] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border-radius: 10px;
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
}

.rp-h[b-ztcv424rw8] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 20px;
}

.rp-status[b-ztcv424rw8] {
    font-size: 12px;
    color: var(--text-secondary, #5F5E5A);
    font-weight: 500;
}

.rp-status--done[b-ztcv424rw8] {
    color: var(--c-teal-fg, #0F6E56);
}

/* Recording pulse dot */
.rp-dot[b-ztcv424rw8] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--danger-token, #A32D2D);
    flex-shrink: 0;
}

.rp-dot--pulse[b-ztcv424rw8] {
    animation: rp-pulse-b-ztcv424rw8 1.5s ease-in-out infinite;
}

@keyframes rp-pulse-b-ztcv424rw8 {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%       { transform: scale(1.2); opacity: 0.7; }
}

/* Waveform canvas */
.rp-wave[b-ztcv424rw8] {
    width: 100%;
    height: 48px;
    display: block;
    border-radius: 6px;
}

/* Action buttons row */
.rp-ctas[b-ztcv424rw8] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Metadata row */
.rp-meta[b-ztcv424rw8] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .rp-dot--pulse[b-ztcv424rw8] { animation: none; }
    .rp-wave[b-ztcv424rw8] { display: none; }
}
/* _content/AptisWeb/Components/Shared/TestTaking/StickyTestHeader.razor.rz.scp.css */
.sticky-test-header[b-1x6zkfi1uv] {
    position: sticky;
    top: 0;
    z-index: 30;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    backdrop-filter: blur(8px) saturate(140%);
    border-bottom: 0.5px solid var(--border);
}

.sticky-test-header__bar[b-1x6zkfi1uv] {
    display: block;
}

.sticky-test-header__progressbar[b-1x6zkfi1uv] {
    position: relative;
    width: 100%;
    height: 3px;
    background: var(--muted);
    overflow: hidden;
}

.sticky-test-header__progressbar-fill[b-1x6zkfi1uv] {
    width: 100%;
    height: 100%;
    background: var(--brand);
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 600ms var(--ease);
    will-change: transform;
}

.sticky-test-header__inner[b-1x6zkfi1uv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 24px;
    min-height: 64px;
    box-sizing: border-box;
}

.sticky-test-header.is-scrolled .sticky-test-header__inner[b-1x6zkfi1uv] {
    padding-top: 6px;
    padding-bottom: 6px;
    min-height: 48px;
}

.sticky-test-header__info[b-1x6zkfi1uv] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    transform: translateY(0);
    transition: transform var(--t-fast) var(--ease);
}

.sticky-test-header.is-scrolled .sticky-test-header__info[b-1x6zkfi1uv] {
    transform: translateY(-1px);
}

.sticky-test-header__skill[b-1x6zkfi1uv] {
    font-size: 16px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.25;
    letter-spacing: -0.005em;
}

.sticky-test-header__sep[b-1x6zkfi1uv] {
    color: var(--text-3);
    font-size: 13px;
    line-height: 1.25;
    transition: opacity var(--t-fast) var(--ease);
}

.sticky-test-header__progress[b-1x6zkfi1uv] {
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.25;
    transition: opacity var(--t-fast) var(--ease);
}

.sticky-test-header.is-scrolled .sticky-test-header__sep[b-1x6zkfi1uv],
.sticky-test-header.is-scrolled .sticky-test-header__progress[b-1x6zkfi1uv] {
    opacity: 0.85;
}

.tabular[b-1x6zkfi1uv] {
    font-variant-numeric: tabular-nums;
}

.sticky-test-header__actions[b-1x6zkfi1uv] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.sticky-test-header__btn[b-1x6zkfi1uv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: transparent;
    border: 0.5px solid var(--border);
    color: var(--text-2);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: var(--r-md);
    cursor: pointer;
    line-height: 1;
    transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}

.sticky-test-header__btn i[b-1x6zkfi1uv] {
    display: block;
    flex-shrink: 0;
    font-size: 14px;
    line-height: 1;
}

.sticky-test-header__btn span[b-1x6zkfi1uv] {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.sticky-test-header__btn.ghost:hover[b-1x6zkfi1uv] {
    background: var(--muted);
    color: var(--text);
}

.sticky-test-header__btn:active[b-1x6zkfi1uv] {
    transform: scale(0.97);
}

.sticky-test-header__btn:focus-visible[b-1x6zkfi1uv] {
    outline: none;
    box-shadow: var(--ring);
}

/* Override legacy "Báo lỗi" button to match ghost style */
.sticky-test-header[b-1x6zkfi1uv]  .issue-report-launch {
    background: transparent;
    border: 0.5px solid var(--border);
    color: var(--text-2);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: var(--r-md);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}

.sticky-test-header[b-1x6zkfi1uv]  .issue-report-launch i {
    font-size: 14px;
    line-height: 1;
}

.sticky-test-header[b-1x6zkfi1uv]  .issue-report-launch:hover {
    background: var(--muted);
    color: var(--text);
}

.sticky-test-header[b-1x6zkfi1uv]  .issue-report-launch:active {
    transform: scale(0.97);
}

.sticky-test-header[b-1x6zkfi1uv]  .issue-report-launch:focus-visible {
    outline: none;
    box-shadow: var(--ring);
}

/* Override legacy timer to fit on light surface */
.sticky-test-header[b-1x6zkfi1uv]  .test-timer {
    background: var(--muted);
    color: var(--text);
    padding: 4px 12px;
    border-radius: 999px;
    gap: 6px;
    font-size: 13px;
    line-height: 1.25;
    border: 0.5px solid var(--border);
}

.sticky-test-header[b-1x6zkfi1uv]  .test-timer .timer-icon {
    font-size: 13px;
    color: var(--text-2);
}

.sticky-test-header[b-1x6zkfi1uv]  .test-timer .timer-display {
    font-size: 13px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    font-family: inherit;
}

.sticky-test-header[b-1x6zkfi1uv]  .test-timer.timer-warning {
    background: var(--danger-bg);
    border-color: var(--danger-fg);
    animation: none;
}

.sticky-test-header[b-1x6zkfi1uv]  .test-timer.timer-warning .timer-icon,
.sticky-test-header[b-1x6zkfi1uv]  .test-timer.timer-warning .timer-display {
    color: var(--danger-fg);
}

/* Override legacy "Hide time" button (.btn-previous) inside header */
.sticky-test-header[b-1x6zkfi1uv]  .btn-previous {
    background: transparent;
    border: 0.5px solid var(--border);
    color: var(--text-2);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: var(--r-md);
    cursor: pointer;
    transition: transform var(--t-fast) var(--ease);
}

.sticky-test-header[b-1x6zkfi1uv]  .btn-previous:hover {
    background: var(--muted);
    color: var(--text);
}

.sticky-test-header[b-1x6zkfi1uv]  .btn-previous:active {
    transform: scale(0.97);
}

.sticky-test-header[b-1x6zkfi1uv]  .btn-previous:focus-visible {
    outline: none;
    box-shadow: var(--ring);
}

@media (max-width: 720px) {
    .sticky-test-header__inner[b-1x6zkfi1uv] {
        padding: 10px 14px;
        min-height: 56px;
    }
    .sticky-test-header__progress[b-1x6zkfi1uv] {
        display: none;
    }
}
/* _content/AptisWeb/Components/Shared/TestTaking/TestProgressBar.razor.rz.scp.css */
.test-progress-bar[b-ybauvrl5fm] {
    width: 100%;
    height: 3px;
    background: var(--muted);
    overflow: hidden;
    z-index: 29;
}

.test-progress-bar.is-sticky[b-ybauvrl5fm] {
    position: sticky;
    top: 64px;
}

.test-progress-bar__fill[b-ybauvrl5fm] {
    width: 100%;
    height: 100%;
    background: var(--brand);
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 600ms var(--ease);
    will-change: transform;
}
/* _content/AptisWeb/Components/Shared/TestTaking/WordCounterBar.razor.rz.scp.css */
/* WordCounterBar component */
.wc[b-ko1w1qrfir] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Track */
.wc-bar[b-ko1w1qrfir] {
    position: relative;
    height: 6px;
    background: var(--bg-muted, #F1EFE8);
    border-radius: 999px;
    overflow: visible;
}

/* Fill */
.wc-fill[b-ko1w1qrfir] {
    height: 100%;
    border-radius: 999px;
    transition: width 200ms ease, background-color 200ms ease;
}

.wc-fill--under[b-ko1w1qrfir] { background: var(--danger-token, #A32D2D); }
.wc-fill--ok[b-ko1w1qrfir]    { background: var(--c-teal-fg, #0F6E56); }
.wc-fill--over[b-ko1w1qrfir]  { background: var(--c-amber-fg, #BA7517); }

/* Target line */
.wc-target[b-ko1w1qrfir] {
    position: absolute;
    top: -2px;
    width: 2px;
    height: 10px;
    background: var(--text-secondary, #5F5E5A);
    border-radius: 1px;
    transform: translateX(-50%);
    opacity: 0.5;
}

/* Label row */
.wc-l[b-ko1w1qrfir] {
    font-size: 11.5px;
    display: flex;
    gap: 4px;
    align-items: baseline;
}

.wc-count[b-ko1w1qrfir] {
    font-variant-numeric: tabular-nums;
    transition: color 200ms ease;
}

.wc-count--under[b-ko1w1qrfir] { color: var(--danger-token, #A32D2D); }
.wc-count--ok[b-ko1w1qrfir]    { color: var(--c-teal-fg, #0F6E56); }
.wc-count--over[b-ko1w1qrfir]  { color: var(--c-amber-fg, #BA7517); }

.wc-sep[b-ko1w1qrfir] {
    color: var(--text-secondary, #5F5E5A);
}

.wc-status[b-ko1w1qrfir] {
    color: var(--text-tertiary, #888780);
    font-size: 10.5px;
}
/* _content/AptisWeb/Components/TestIntro/InfoRow.razor.rz.scp.css */
.ir[b-t40v6647bj] {
    display: flex;
    gap: 12px;
    padding: 10px 12px;
    background: var(--muted);
    border-radius: 10px;
    align-items: flex-start;
}

.ir-ic[b-t40v6647bj] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ir-ic i[b-t40v6647bj] { font-size: 13px; }

.ir-ic.questions[b-t40v6647bj] { background: #E1F5EE; color: #0F6E56; }
.ir-ic.answer[b-t40v6647bj]    { background: #E6F1FB; color: #185FA5; }
.ir-ic.time[b-t40v6647bj]      { background: #FAEEDA; color: #BA7517; }
.ir-ic.default[b-t40v6647bj]   { background: var(--muted); color: var(--text-2); }

.ir-body[b-t40v6647bj] { flex: 1; min-width: 0; }

.ir-l[b-t40v6647bj] {
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
    margin: 0 0 2px;
}

.ir-v[b-t40v6647bj] {
    font-size: 11.25px;
    color: var(--text-2);
    margin: 0;
    line-height: 1.5;
}

@media (max-height: 820px) and (min-width: 641px) {
    .ir[b-t40v6647bj] {
        gap: 10px;
        padding: 8px 10px;
        border-radius: 9px;
    }

    .ir-ic[b-t40v6647bj] {
        width: 26px;
        height: 26px;
        border-radius: 7px;
    }

    .ir-ic i[b-t40v6647bj] {
        font-size: 12px;
    }

    .ir-l[b-t40v6647bj] {
        font-size: 11.5px;
        margin-bottom: 1px;
    }

    .ir-v[b-t40v6647bj] {
        font-size: 10.75px;
        line-height: 1.38;
    }
}

.ir-v[b-t40v6647bj]  strong {
    font-weight: 500;
    color: var(--text);
}

/* 2026-07-10 UI/UX pass: keep info rows readable on wide and short desktops. */
.ir[b-t40v6647bj] {
    min-height: 48px;
    align-items: center;
}

.ir-v[b-t40v6647bj] {
    font-size: 12px;
}

@media (max-height: 820px) and (min-width: 641px) {
    .ir[b-t40v6647bj] {
        min-height: 44px;
    }

    .ir-v[b-t40v6647bj] {
        font-size: 11.5px;
    }
}
/* _content/AptisWeb/Components/TestIntro/TestIntroPage.razor.rz.scp.css */
@keyframes tip-entry-b-gejak5w8ae {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes tip-icon-pulse-b-gejak5w8ae {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.04); }
}

/* Page wrapper */
.tip[b-gejak5w8ae] {
    min-height: calc(var(--app-dvh, 100dvh) - var(--topbar-height, 56px) - var(--layout-footer-height, 0px));
    background: var(--bg);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(20px, 4vh, 42px) 18px clamp(24px, 4vh, 42px);
    overflow-y: auto;
}

/* Card */
.tip-card[b-gejak5w8ae] {
    background: var(--surface);
    border: 0.5px solid var(--border-strong);
    border-radius: var(--r-lg);
    padding: 24px 28px;
    max-width: 640px;
    width: 100%;
    max-height: calc(var(--app-dvh, 100dvh) - var(--topbar-height, 56px) - var(--layout-footer-height, 0px) - 40px);
    overflow-y: auto;
    scrollbar-gutter: stable;
    animation: tip-entry-b-gejak5w8ae 250ms cubic-bezier(0.22,1,0.36,1) both;
    box-shadow: 0 12px 34px rgba(26, 26, 24, 0.06);
}

/* Hero */
.tip-h[b-gejak5w8ae] {
    text-align: center;
    margin-bottom: 18px;
}

.tip-h-ic[b-gejak5w8ae] {
    width: 52px;
    height: 52px;
    border-radius: 13px;
    background: var(--skill-bg);
    color: var(--skill-fg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    animation: tip-icon-pulse-b-gejak5w8ae 3s ease-in-out 1;
}
.tip-h-ic i[b-gejak5w8ae] { font-size: 23px; }

.tip-h-tag[b-gejak5w8ae] {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--text-3);
    letter-spacing: 0.5px;
    padding: 2px 8px;
    background: var(--muted);
    border-radius: 999px;
    margin-bottom: 8px;
}

.tip-h-mtag[b-gejak5w8ae] {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 500;
    padding: 1px 6px;
    border-radius: 999px;
    margin-left: 5px;
    letter-spacing: 0.4px;
}

.tip-h-t[b-gejak5w8ae] {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.25;
    color: var(--text);
    margin: 0 0 6px;
}

.tip-h-s[b-gejak5w8ae] {
    font-size: 13px;
    color: var(--text-2);
    margin: 0;
}

/* Info rows container */
.tip-info[b-gejak5w8ae] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
    animation: tip-entry-b-gejak5w8ae 250ms 60ms cubic-bezier(0.22,1,0.36,1) both;
}

/* Tip box */
.tip-tip[b-gejak5w8ae] {
    background: var(--skill-tip-bg);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 18px;
    animation: tip-entry-b-gejak5w8ae 250ms 110ms cubic-bezier(0.22,1,0.36,1) both;
}

.tip-tip-h[b-gejak5w8ae] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--skill-tip-heading);
    letter-spacing: 0.3px;
    margin: 0 0 8px;
}
.tip-tip-h i[b-gejak5w8ae] { font-size: 13px; }

.tip-tip-list[b-gejak5w8ae] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tip-tip-item[b-gejak5w8ae] {
    position: relative;
    padding-left: 14px;
    font-size: 11.5px;
    color: var(--skill-tip-text);
    line-height: 1.5;
}
.tip-tip-item[b-gejak5w8ae]::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 7px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--skill-tip-marker);
}

/* CTA buttons */
.tip-ctas[b-gejak5w8ae] {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 10px;
    margin-bottom: 12px;
    animation: tip-entry-b-gejak5w8ae 250ms 150ms cubic-bezier(0.22,1,0.36,1) both;
}

.tip-btn[b-gejak5w8ae] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: background var(--t-fast), color var(--t-fast), transform 100ms;
}
.tip-btn i[b-gejak5w8ae] { font-size: 13px; }
.tip-btn:hover[b-gejak5w8ae] { transform: scale(1.02); }

.tip-btn.s[b-gejak5w8ae] {
    background: var(--surface);
    color: var(--text-2);
    border: 0.5px solid var(--border-strong);
}
.tip-btn.s:hover[b-gejak5w8ae] { background: var(--muted); color: var(--text); }

.tip-btn.p[b-gejak5w8ae] {
    background: var(--skill-primary);
    color: white;
}
.tip-btn.p:hover[b-gejak5w8ae] { filter: brightness(0.92); }

.tip-btn:focus-visible[b-gejak5w8ae] {
    outline: none;
    box-shadow: var(--ring, 0 0 0 3px rgba(15,110,86,0.18));
}

/* Part picker divider */
.tip-divider-row[b-gejak5w8ae] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0 10px;
}

.tip-divider[b-gejak5w8ae] {
    flex: 1;
    height: 0.5px;
    background: var(--border-strong);
}

.tip-divider-l[b-gejak5w8ae] {
    font-size: 11px;
    color: var(--text-3);
    white-space: nowrap;
}

/* Part picker */
.tip-part[b-gejak5w8ae] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
}

.tip-part-select[b-gejak5w8ae] {
    width: 100%;
    min-height: 40px;
    padding: 9px 12px;
    border-radius: 8px;
    border: 0.5px solid var(--border-strong);
    background: var(--surface);
    font-size: 12.5px;
    color: var(--text);
    cursor: pointer;
    appearance: auto;
    font-family: inherit;
}
.tip-part-select:focus[b-gejak5w8ae] {
    outline: none;
    border-color: var(--skill-primary);
    box-shadow: var(--ring, 0 0 0 3px rgba(15,110,86,0.18));
}

.tip-part-btn[b-gejak5w8ae] {
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 40px;
    padding: 9px 14px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    border: 0.5px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    white-space: nowrap;
    font-family: inherit;
    transition: background var(--t-fast);
}
.tip-part-btn i[b-gejak5w8ae] { font-size: 12px; }
.tip-part-btn:hover[b-gejak5w8ae] { background: var(--muted); }
.tip-part-btn:focus-visible[b-gejak5w8ae] {
    outline: none;
    box-shadow: var(--ring, 0 0 0 3px rgba(15,110,86,0.18));
}

/* 2026-07-10 UI/UX pass: reduce nested scrolling and improve desktop density. */
.tip-card[b-gejak5w8ae] {
    max-width: clamp(680px, 46vw, 820px);
    border-radius: 10px;
    max-height: none;
    overflow: visible;
}

.tip-btn[b-gejak5w8ae],
.tip-part-select[b-gejak5w8ae],
.tip-part-btn[b-gejak5w8ae] {
    min-height: 44px;
}

.tip-btn:hover[b-gejak5w8ae] {
    transform: translateY(-1px);
}

.tip :is(button, select, a):focus-visible[b-gejak5w8ae] {
    outline: none;
    box-shadow: var(--ring, 0 0 0 3px rgba(15,110,86,0.18));
}

@media (max-height: 780px) and (min-width: 641px) {
    .tip[b-gejak5w8ae] {
        align-items: flex-start;
    }

    .tip-card[b-gejak5w8ae] {
        max-height: calc(var(--app-dvh, 100dvh) - var(--topbar-height, 56px) - var(--layout-footer-height, 0px) - 32px);
        overflow-y: auto;
        scrollbar-gutter: stable;
    }
}

@media (max-width: 720px) {
    .tip-card[b-gejak5w8ae] {
        max-width: 100%;
        padding: 20px;
    }
}

/* Mobile */
@media (max-width: 640px) {
    .tip[b-gejak5w8ae] { padding: 22px 16px 40px; }
    .tip-card[b-gejak5w8ae] {
        max-height: none;
        overflow-y: visible;
        padding: 22px 18px;
    }
    .tip-ctas[b-gejak5w8ae] { grid-template-columns: 1fr 1fr; }
    .tip-part[b-gejak5w8ae] { grid-template-columns: 1fr; }
    .tip-h-tag[b-gejak5w8ae] { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px; }
}

@media (max-height: 820px) and (min-width: 641px) {
    .tip[b-gejak5w8ae] {
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .tip-card[b-gejak5w8ae] {
        max-width: 600px;
        max-height: calc(var(--app-dvh, 100dvh) - var(--topbar-height, 56px) - var(--layout-footer-height, 0px) - 28px);
        padding: 18px 24px;
        border-radius: 16px;
    }

    .tip-h[b-gejak5w8ae] {
        margin-bottom: 14px;
    }

    .tip-h-ic[b-gejak5w8ae] {
        width: 44px;
        height: 44px;
        margin-bottom: 8px;
        border-radius: 11px;
    }

    .tip-h-ic i[b-gejak5w8ae] {
        font-size: 20px;
    }

    .tip-h-tag[b-gejak5w8ae] {
        margin-bottom: 6px;
    }

    .tip-h-t[b-gejak5w8ae] {
        font-size: 19px;
        margin-bottom: 4px;
    }

    .tip-h-s[b-gejak5w8ae] {
        font-size: 12px;
    }

    .tip-info[b-gejak5w8ae] {
        gap: 7px;
        margin-bottom: 12px;
    }

    .tip-tip[b-gejak5w8ae] {
        padding: 10px 12px;
        margin-bottom: 14px;
    }

    .tip-tip-h[b-gejak5w8ae] {
        margin-bottom: 6px;
    }

    .tip-tip-list[b-gejak5w8ae] {
        gap: 4px;
    }

    .tip-tip-item[b-gejak5w8ae] {
        font-size: 11px;
        line-height: 1.42;
    }

    .tip-ctas[b-gejak5w8ae] {
        margin-bottom: 10px;
    }

    .tip-btn[b-gejak5w8ae],
    .tip-part-select[b-gejak5w8ae],
    .tip-part-btn[b-gejak5w8ae] {
        min-height: 36px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .tip-card[b-gejak5w8ae],
    .tip-info[b-gejak5w8ae],
    .tip-tip[b-gejak5w8ae],
    .tip-ctas[b-gejak5w8ae],
    .tip-tip-item[b-gejak5w8ae] {
        animation: none !important;
    }
    .tip-h-ic[b-gejak5w8ae] { animation: none !important; }
    .tip-btn:hover[b-gejak5w8ae] { transform: none; }
}

@media (max-height: 820px) and (min-width: 641px) {
    .tip-card[b-gejak5w8ae] {
        max-width: clamp(680px, 46vw, 820px);
        border-radius: 10px;
    }

    .tip-btn[b-gejak5w8ae],
    .tip-part-select[b-gejak5w8ae],
    .tip-part-btn[b-gejak5w8ae] {
        min-height: 44px;
    }
}
/* _content/AptisWeb/Components/TestRunner/MatchingDropdown.razor.rz.scp.css */
.md[b-boyhwumcef] {
    position: relative;
}

.md-btn[b-boyhwumcef] {
    width: 100%;
    padding: 9px 12px;
    background: var(--surface);
    border: 0.5px solid var(--border-strong);
    border-radius: 7px;
    font-size: 12.5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--text);
    transition: border-color var(--t-fast), background var(--t-fast);
    text-align: left;
}

.md-btn:hover:not(:disabled)[b-boyhwumcef] {
    border-color: var(--text-3);
}

.md-btn.empty[b-boyhwumcef] {
    color: var(--text-3);
    border-style: dashed;
}

.md-btn.selected[b-boyhwumcef] {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-weight: 500;
    animation: md-select-pop-b-boyhwumcef 100ms ease-out both;
}

.md.correct .md-btn[b-boyhwumcef] {
    border-color: #639922;
    background: #EAF3DE;
    color: #173404;
}

.md.wrong .md-btn[b-boyhwumcef] {
    border-color: #E24B4A;
    background: #FCEBEB;
    color: #501313;
    text-decoration: line-through;
}

.md-btn-l[b-boyhwumcef] {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1;
    min-width: 0;
    text-align: left;
}

.md-btn-letter[b-boyhwumcef] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--muted);
    transition: background var(--t-fast);
}

.md-btn.selected .md-btn-letter[b-boyhwumcef] {
    background: var(--brand);
    color: white;
}

.md.correct .md-btn-letter[b-boyhwumcef] {
    background: #639922;
    color: white;
}

.md.wrong .md-btn-letter[b-boyhwumcef] {
    background: #E24B4A;
    color: white;
}

.md-icon-open[b-boyhwumcef] {
    transform: rotate(180deg);
    transition: transform var(--t-fast);
}

.md-list[b-boyhwumcef] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--surface);
    border: 0.5px solid var(--border-strong);
    border-radius: 8px;
    padding: 4px;
    z-index: 20;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    max-height: 220px;
    overflow-y: auto;
    animation: md-slide-in-b-boyhwumcef 150ms var(--ease) both;
}

.md.md--open-up .md-list[b-boyhwumcef] {
    top: auto;
    bottom: calc(100% + 4px);
}

@keyframes md-slide-in-b-boyhwumcef {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes md-select-pop-b-boyhwumcef {
    from {
        transform: scale(0.97);
    }
    to {
        transform: scale(1);
    }
}

.md-list-item[b-boyhwumcef] {
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: 6px;
    font-size: 12.5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    color: var(--text);
    transition: background var(--t-fast);
}

.md-list-item:hover:not(.used)[b-boyhwumcef] {
    background: var(--muted);
}

.md-list-item.used[b-boyhwumcef] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    transition: opacity 200ms;
}

.md-list-letter[b-boyhwumcef] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 500;
    background: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.md-list-text[b-boyhwumcef] {
    flex: 1;
    min-width: 0;
    font-size: 12px;
}

.md-list-used-tag[b-boyhwumcef] {
    font-size: 9.5px;
    color: var(--text-3);
    flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
    .md-list[b-boyhwumcef],
    .md-btn.selected[b-boyhwumcef] {
        animation: none;
    }
}

@media (max-width: 768px) {
    .md-list[b-boyhwumcef] {
        position: fixed;
        top: auto;
        right: 14px;
        bottom: 16px;
        left: 14px;
        max-height: min(60vh, 360px);
        z-index: 1000;
    }
}
/* _content/AptisWeb/Components/TestRunner/TestRunnerHeader.razor.rz.scp.css */
.tr-header[b-qfcekvbsw8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 0.5px solid var(--border);
}

.tr-header__left[b-qfcekvbsw8] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 220px;
    min-width: 0;
}

.tr-header__icon[b-qfcekvbsw8] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.tr-header__info[b-qfcekvbsw8] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tr-header__title[b-qfcekvbsw8] {
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tr-header__sub[b-qfcekvbsw8] {
    font-size: 11.5px;
    color: var(--text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tr-header__right[b-qfcekvbsw8] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 8px;
}

.tr-header__btn[b-qfcekvbsw8] {
    min-height: 36px;
    padding: 0 14px;
    border: 0.5px solid var(--border);
    border-radius: 10px;
    background: transparent;
    font-size: 13px;
    color: var(--text-2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
    transition: background var(--t-fast), border-color var(--t-fast);
}

.tr-header__btn i[b-qfcekvbsw8],
.tr-header__btn svg[b-qfcekvbsw8] {
    display: block;
    flex-shrink: 0;
    line-height: 1;
}

.tr-header__btn span[b-qfcekvbsw8] {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.tr-header__btn:hover[b-qfcekvbsw8] {
    background: var(--muted);
    border-color: var(--border-strong);
}

.tr-header__btn--danger[b-qfcekvbsw8] {
    color: #A32D2D;
    border-color: rgba(163, 45, 45, 0.3);
}

.tr-header__btn--danger:hover[b-qfcekvbsw8] {
    background: var(--danger-bg);
    border-color: rgba(163, 45, 45, 0.5);
}

/* The shared issue-report button defaults to white-on-translucent styling
   meant for the old dark header bar. Inside this light header it looked like
   a faint empty box, so re-skin it to match the danger button.
   `::deep` reaches the child component rendered in the RightActions slot. */
.tr-header__right[b-qfcekvbsw8]  .issue-report-launch {
    min-height: 36px;
    padding: 0 14px;
    border: 0.5px solid rgba(163, 45, 45, 0.3);
    border-radius: 10px;
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    color: #A32D2D;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    gap: 6px;
    white-space: nowrap;
    transition: background var(--t-fast), border-color var(--t-fast);
}

.tr-header__right[b-qfcekvbsw8]  .issue-report-launch:hover {
    background: var(--danger-bg);
    border-color: rgba(163, 45, 45, 0.5);
}

.tr-header__right[b-qfcekvbsw8]  .issue-report-launch i,
.tr-header__right[b-qfcekvbsw8]  .issue-report-launch svg {
    display: block;
    flex-shrink: 0;
    line-height: 1;
}

.tr-header__right[b-qfcekvbsw8]  .issue-report-launch span {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

@media (max-width: 1439px) {
    .tr-header[b-qfcekvbsw8] {
        margin-bottom: 12px;
        padding-bottom: 10px;
    }

    .tr-header__icon[b-qfcekvbsw8] {
        width: 28px;
        height: 28px;
    }

    .tr-header__right[b-qfcekvbsw8] {
        margin-left: auto;
        gap: 6px;
    }

    .tr-header__btn[b-qfcekvbsw8] {
        min-height: 30px;
        padding: 6px 10px;
    }

    .tr-header__right[b-qfcekvbsw8]  .issue-report-launch {
        min-height: 30px;
        padding: 6px 10px;
    }
}

@media (max-width: 639px) {
    .tr-header[b-qfcekvbsw8] {
        align-items: flex-start;
    }

    .tr-header__right[b-qfcekvbsw8] {
        width: 100%;
        justify-content: flex-start;
        margin-left: 0;
    }
}
/* _content/AptisWeb/Components/TestRunner/TestRunnerSidePanel.razor.rz.scp.css */
.tr-panel[b-gza4kqcpby] {
    background: var(--surface);
    border: 0.5px solid var(--border);
    border-radius: var(--r-lg);
    padding: 14px 16px;
    width: 280px;
    min-width: 280px;
    position: sticky;
    top: var(--runner-panel-offset-top, var(--panel-offset-top, calc(var(--topbar-height, 72px) + 12px)));
    max-height: calc(var(--app-dvh, 100vh) - var(--runner-panel-offset-top, var(--panel-offset-top, calc(var(--topbar-height, 72px) + 12px))) - 20px);
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Header */
.tr-panel__header[b-gza4kqcpby] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tr-panel__title[b-gza4kqcpby] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

.tr-panel__close[b-gza4kqcpby] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--muted);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--text-2);
    padding: 0;
    transition: background var(--t-fast);
}

.tr-panel__close:hover[b-gza4kqcpby] {
    background: var(--border);
}

@media (min-width: 1024px) {
    .tr-panel__close[b-gza4kqcpby] {
        display: none !important;
    }
}

/* Stats */
.tr-panel__stats[b-gza4kqcpby] {
    background: var(--muted);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    gap: 8px;
    align-items: center;
}

.tr-panel__stat[b-gza4kqcpby] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tr-panel__stat-value[b-gza4kqcpby] {
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
}

.tr-panel__stat-sub[b-gza4kqcpby] {
    font-size: 10px;
    color: var(--text-3);
}

.tr-panel__stat-label[b-gza4kqcpby] {
    font-size: 10px;
    color: var(--text-2);
    margin-top: 2px;
}

.tr-panel__divider[b-gza4kqcpby] {
    width: 0.5px;
    height: 32px;
    background: var(--border);
    flex-shrink: 0;
}

/* Filter pills */
.tr-panel__filters[b-gza4kqcpby] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.tr-panel__filter-pill[b-gza4kqcpby] {
    padding: 4px 9px;
    border: 0.5px solid var(--border);
    border-radius: 999px;
    font-size: 10.5px;
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.tr-panel__filter-pill:hover[b-gza4kqcpby] {
    border-color: var(--border-strong);
    background: var(--muted);
}

.tr-panel__filter-pill.is-active[b-gza4kqcpby] {
    background: #04342C;
    color: white;
    border-color: #04342C;
}

.tr-panel__filter-count[b-gza4kqcpby] {
    font-size: 9.5px;
    opacity: 0.7;
}

/* Next unanswered button */
.tr-panel__next-btn[b-gza4kqcpby] {
    width: 100%;
    padding: 8px 12px;
    background: var(--brand);
    color: white;
    border: none;
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    transition: background var(--t-fast);
}

.tr-panel__next-btn:hover[b-gza4kqcpby] {
    background: var(--brand-hover);
}

.tr-panel__all-done[b-gza4kqcpby] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 11.5px;
    color: #3B6D11;
    padding: 8px 12px;
    background: var(--success-bg);
    border-radius: 7px;
}

.tr-panel__group-picker[b-gza4kqcpby] {
    display: grid;
    gap: 5px;
}

.tr-panel__group-picker-label[b-gza4kqcpby] {
    color: var(--text-3);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tr-panel__group-select[b-gza4kqcpby] {
    width: 100%;
    min-height: 44px;
    padding: 0 30px 0 10px;
    border: 0.5px solid var(--border-strong, rgba(0, 0, 0, 0.15));
    border-radius: 8px;
    background: var(--surface, #fff);
    color: var(--text, #1A1A18);
    font-size: 11.5px;
    font-weight: 650;
}

/* Body */
.tr-panel__body[b-gza4kqcpby] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    overscroll-behavior: contain;
}

/* Part block */
.tr-panel__part[b-gza4kqcpby] {
    display: grid;
    gap: 8px;
}

.tr-panel__part-header[b-gza4kqcpby] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    padding: 0 2px;
}

.tr-panel__part-name[b-gza4kqcpby] {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text);
    min-width: 0;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.tr-panel__part-progress[b-gza4kqcpby] {
    font-size: 10px;
    color: var(--text-3);
    flex: 0 0 auto;
    margin-left: 8px;
}

.tr-panel__topic-card[b-gza4kqcpby] {
    background: var(--surface, #fff);
    border: 0.5px solid var(--border, #E3DED2);
    border-radius: 14px;
    padding: 10px;
    box-shadow: 0 4px 12px rgba(30, 24, 18, 0.04);
}

.tr-panel__topic-card--plain[b-gza4kqcpby] {
    background: transparent;
    border-color: transparent;
    padding: 0;
    box-shadow: none;
}

.tr-panel__topic-header[b-gza4kqcpby] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
    color: var(--text-2);
    line-height: 1.25;
    min-width: 0;
    width: 100%;
}

.tr-panel__topic-icon[b-gza4kqcpby] {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: rgba(8, 80, 65, 0.1);
    color: var(--brand, #085041);
}

.tr-panel__topic-icon i[b-gza4kqcpby] {
    flex: 0 0 auto;
    font-size: 13px;
}

.tr-panel__topic-copy[b-gza4kqcpby] {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.tr-panel__topic-title[b-gza4kqcpby] {
    min-width: 0;
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: 12.5px;
    line-height: 1.25;
    font-weight: 800;
    color: var(--text, #1f2d2a);
}

.tr-panel__topic-meta[b-gza4kqcpby] {
    color: var(--text-3);
    font-size: 10.5px;
    font-weight: 650;
}

/* Question grid */
.tr-panel__grid[b-gza4kqcpby] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.tr-panel__cell[b-gza4kqcpby] {
    min-height: 44px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 0.5px solid var(--text-3);
    background: var(--surface);
    color: var(--text-2);
    transition: border-color var(--t-fast), background var(--t-fast);
}

.tr-panel__cell:hover[b-gza4kqcpby] {
    border-color: var(--brand);
}

.tr-panel__cell.is-answered[b-gza4kqcpby] {
    background: #EAF3DE;
    border-color: #C0DD97;
    color: #3B6D11;
}

.tr-panel__cell.is-correct[b-gza4kqcpby] {
    background: #DCFCE7;
    border-color: #22C55E;
    color: #166534;
}

.tr-panel__cell.is-current[b-gza4kqcpby] {
    background: var(--brand);
    border-color: var(--brand);
    color: white;
}

.tr-panel__cell.is-current.is-correct[b-gza4kqcpby] {
    background: #15803D;
    border-color: #166534;
    color: #fff;
    box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.18);
}

.tr-panel__cell.is-incorrect[b-gza4kqcpby] {
    background: #FEE2E2;
    border-color: #DC2626;
    color: #991B1B;
}

.tr-panel__cell.is-current.is-incorrect[b-gza4kqcpby] {
    background: #DC2626;
    border-color: #B91C1C;
    color: #fff;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18);
}

.tr-panel__flag-dot[b-gza4kqcpby] {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #BA7517;
    pointer-events: none;
}

/* Empty state */
.tr-panel__empty[b-gza4kqcpby] {
    font-size: 12px;
    color: var(--text-3);
    text-align: center;
    padding: 12px 0;
}

.tr-panel__pager[b-gza4kqcpby] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-top: 4px;
}

.tr-panel__pager-btn[b-gza4kqcpby] {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 0.5px solid var(--border-strong, rgba(0, 0, 0, 0.15));
    border-radius: 8px;
    background: var(--surface, #fff);
    color: var(--text-2);
}

.tr-panel__pager-btn:disabled[b-gza4kqcpby] {
    cursor: not-allowed;
    opacity: 0.45;
}

.tr-panel__pager-label[b-gza4kqcpby] {
    min-width: 74px;
    color: var(--text-2);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

/* Footer / submit */
.tr-panel__footer[b-gza4kqcpby] {
    margin-top: 2px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tr-panel__submit-btn[b-gza4kqcpby] {
    min-height: 44px;
    padding: 11px 14px;
    background: var(--brand);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 100%;
    transition: background var(--t-fast);
}

.tr-panel__submit-btn:hover[b-gza4kqcpby] {
    background: var(--brand-hover);
}

.tr-panel__submit-btn.is-ready[b-gza4kqcpby] {
    animation: tr-breathe-b-gza4kqcpby 2s ease-in-out infinite;
}

.tr-panel__explain-btn[b-gza4kqcpby] {
    padding: 11px 14px;
    background: color-mix(in srgb, var(--brand) 8%, #ffffff);
    color: var(--brand-dark, #04342C);
    border: 1px solid color-mix(in srgb, var(--brand) 32%, transparent);
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 100%;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}

.tr-panel__explain-btn:hover:not(:disabled)[b-gza4kqcpby] {
    background: color-mix(in srgb, var(--brand) 16%, #ffffff);
    border-color: color-mix(in srgb, var(--brand) 48%, transparent);
}

.tr-panel__explain-btn:focus-visible[b-gza4kqcpby] {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}

.tr-panel :is(
    .tr-panel__group-select,
    .tr-panel__filter-pill,
    .tr-panel__cell,
    .tr-panel__pager-btn,
    .tr-panel__next-btn,
    .tr-panel__submit-btn
):focus-visible[b-gza4kqcpby] {
    outline: 3px solid color-mix(in srgb, var(--brand, #085041) 28%, transparent);
    outline-offset: 2px;
}

.tr-panel__explain-btn:disabled[b-gza4kqcpby] {
    opacity: 0.65;
    cursor: progress;
}

.tr-panel__explain-btn.is-active[b-gza4kqcpby] {
    background: var(--brand);
    border-color: var(--brand);
    color: #ffffff;
}

.tr-panel__explain-btn.is-active:hover:not(:disabled)[b-gza4kqcpby] {
    background: var(--brand-hover);
    border-color: var(--brand-hover);
}

.tr-panel__submit-meta[b-gza4kqcpby] {
    font-size: 10px;
    color: var(--text-3);
    text-align: center;
}

@keyframes tr-breathe-b-gza4kqcpby {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

/* Mobile: drawer mode */
@media (max-width: 1023px) {
    .tr-panel[b-gza4kqcpby] {
        position: fixed;
        top: 0;
        right: env(safe-area-inset-right);
        height: var(--app-dvh, 100dvh);
        max-height: var(--app-dvh, 100dvh);
        width: 280px;
        max-width: 90vw;
        border-radius: var(--r-lg) 0 0 var(--r-lg);
        transform: translateX(100%);
        transition: transform 250ms var(--ease);
        z-index: var(--z-question-panel, 1300);
        overflow-y: auto;
    }

    .tr-panel.is-open[b-gza4kqcpby] {
        transform: translateX(0);
    }
}

/* Reading navigator compact pass. Keep the component API unchanged. */
.tr-panel[b-gza4kqcpby] {
    width: 304px;
    min-width: 304px;
    max-height: calc(var(--app-dvh, 100vh) - var(--runner-panel-offset-top, var(--panel-offset-top, calc(var(--topbar-height, 72px) + 12px))) - 20px);
    top: var(--runner-panel-offset-top, var(--panel-offset-top, calc(var(--topbar-height, 72px) + 12px)));
    padding: 12px;
    gap: 9px;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(26, 26, 24, 0.04);
}

.tr-panel__header[b-gza4kqcpby] {
    min-height: 24px;
    padding: 0 2px;
}

.tr-panel__title[b-gza4kqcpby] {
    font-size: 12.5px;
}

.tr-panel__stats[b-gza4kqcpby] {
    padding: 9px 10px;
    border-radius: 8px;
    background: var(--muted, #F1EFE8);
}

.tr-panel__stat-value[b-gza4kqcpby] {
    font-size: 18px;
}

.tr-panel__stat-sub[b-gza4kqcpby],
.tr-panel__stat-label[b-gza4kqcpby] {
    font-size: 10px;
    line-height: 1.25;
}

.tr-panel__filters[b-gza4kqcpby] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
}

.tr-panel__filter-pill[b-gza4kqcpby] {
    min-height: 44px;
    justify-content: center;
    padding: 0 7px;
    font-size: 10.5px;
    white-space: nowrap;
}

.tr-panel__next-btn[b-gza4kqcpby],
.tr-panel__all-done[b-gza4kqcpby] {
    min-height: 44px;
    border-radius: 7px;
    font-size: 11.5px;
}

.tr-panel__body[b-gza4kqcpby] {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding: 2px 2px 0 0;
    gap: 12px;
    scrollbar-gutter: stable;
}

.tr-panel__body[b-gza4kqcpby]::-webkit-scrollbar {
    width: 6px;
}

.tr-panel__body[b-gza4kqcpby]::-webkit-scrollbar-thumb {
    background: var(--border-strong, rgba(0, 0, 0, 0.15));
    border-radius: 999px;
}

.tr-panel__part[b-gza4kqcpby] {
    gap: 9px;
}

.tr-panel__part-header[b-gza4kqcpby] {
    margin-bottom: 0;
    padding: 0;
}

.tr-panel__part-name[b-gza4kqcpby] {
    font-size: 11.5px;
}

.tr-panel__part-progress[b-gza4kqcpby] {
    font-size: 10.5px;
}

.tr-panel__topic-card[b-gza4kqcpby] {
    border-radius: 14px;
    padding: 10px;
}

.tr-panel__topic-card--plain[b-gza4kqcpby] {
    padding: 0;
}

.tr-panel__topic-header[b-gza4kqcpby] {
    margin-bottom: 10px;
}

.tr-panel__topic-title[b-gza4kqcpby] {
    font-size: 12.5px;
}

.tr-panel__grid[b-gza4kqcpby] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    justify-content: stretch;
    gap: 8px;
}

.tr-panel__cell[b-gza4kqcpby] {
    width: auto;
    min-height: 44px;
    height: auto;
    aspect-ratio: auto;
    border-radius: 10px;
    border-color: var(--border-strong, rgba(0, 0, 0, 0.15));
    font-size: 12px;
    font-weight: 800;
    background: var(--surface, #fff);
}

.tr-panel__cell.is-answered[b-gza4kqcpby] {
    border-color: transparent;
    background: var(--success-bg, #EAF3DE);
    color: #3B6D11;
}

.tr-panel__cell.is-answered.is-correct[b-gza4kqcpby] {
    border-color: #22C55E;
    background: #DCFCE7;
    color: #166534;
}

.tr-panel__cell.is-current[b-gza4kqcpby] {
    border-color: var(--brand, #085041);
    background: var(--brand, #085041);
    color: #fff;
    box-shadow: 0 0 0 3px rgba(15, 110, 86, 0.16);
}

.tr-panel__cell.is-current.is-correct[b-gza4kqcpby] {
    border-color: #166534;
    background: #15803D;
    color: #fff;
    box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.18);
}

.tr-panel__cell.is-incorrect[b-gza4kqcpby] {
    border-color: #DC2626;
    background: #FEE2E2;
    color: #991B1B;
}

.tr-panel__cell.is-current.is-incorrect[b-gza4kqcpby] {
    border-color: #B91C1C;
    background: #DC2626;
    color: #fff;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18);
}

.tr-panel__flag-dot[b-gza4kqcpby] {
    top: 3px;
    right: 3px;
}

.tr-panel__footer[b-gza4kqcpby] {
    flex-shrink: 0;
    margin: 0 -2px -2px;
    padding-top: 8px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--surface, #fff) 28%);
}

.tr-panel__submit-btn[b-gza4kqcpby] {
    min-height: 44px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 12px;
}

@media (max-width: 1023px) {
    .tr-panel[b-gza4kqcpby] {
        width: min(320px, 92vw);
        min-width: 0;
        max-width: 92vw;
        height: var(--app-dvh, 100dvh);
        max-height: var(--app-dvh, 100dvh);
        top: 0;
        padding: 12px;
        border-radius: 12px 0 0 12px;
    }

    .tr-panel__grid[b-gza4kqcpby] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1023px) {
    .tr-panel[b-gza4kqcpby] {
        top: auto;
        right: calc(10px + env(safe-area-inset-right, 0px));
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        left: calc(10px + env(safe-area-inset-left, 0px));
        width: auto;
        max-width: none;
        height: auto;
        max-height: min(72dvh, 640px);
        border-radius: 18px 18px 14px 14px;
        transform: translateY(calc(100% + 24px));
        overflow: hidden;
    }

    .tr-panel.is-open[b-gza4kqcpby] {
        transform: translateY(0);
    }
}

@media (max-width: 380px) {
    .tr-panel[b-gza4kqcpby] {
        right: calc(8px + env(safe-area-inset-right, 0px));
        left: calc(8px + env(safe-area-inset-left, 0px));
        height: auto;
        max-height: min(68dvh, 600px);
    }

    .tr-panel__filters[b-gza4kqcpby] {
        grid-template-columns: 1fr;
    }

    .tr-panel__grid[b-gza4kqcpby] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}