.wugan-hsk-classroom-app {
    --wvs-ink: #263238;
    --wvs-muted: #69757d;
    --wvs-primary: #ff7b8f;
    --wvs-primary-dark: #d95069;
    --wvs-blue: #6fc9e8;
    --wvs-yellow: #ffd86b;
    --wvs-green: #7fd7ae;
    --wvs-purple: #a994ef;
    --wvs-soft: #fff8f4;
    --wvs-border: rgba(64, 72, 82, .12);
    color: var(--wvs-ink);
    font-family: Inter, ui-rounded, "Nunito", "Segoe UI", Arial, sans-serif;
    line-height: 1.5;
}

.wugan-hsk-classroom-app *,
.wugan-hsk-classroom-app *::before,
.wugan-hsk-classroom-app *::after { box-sizing: border-box; }
.wugan-hsk-classroom-app button,
.wugan-hsk-classroom-app input,
.wugan-hsk-classroom-app textarea { font: inherit; }
.wugan-hsk-classroom-app button { cursor: pointer; }
.wvs-loading { padding: 38px; border-radius: 24px; background: #fff8f4; text-align: center; font-weight: 800; }

.wvs-shell {
    position: relative;
    width: min(1180px, calc(100% - 24px));
    margin: 24px auto;
    padding: 24px;
    overflow: hidden;
    border: 1px solid rgba(255, 123, 143, .16);
    border-radius: 32px;
    background:
        radial-gradient(circle at 4% 4%, rgba(255,216,107,.23), transparent 24%),
        radial-gradient(circle at 94% 8%, rgba(111,201,232,.2), transparent 25%),
        linear-gradient(180deg, #fffdfa 0%, #fff8f4 100%);
    box-shadow: 0 24px 70px rgba(75, 62, 66, .12);
}
.wvs-shell::before,
.wvs-shell::after {
    position: absolute;
    z-index: 0;
    width: 120px;
    height: 120px;
    border: 16px solid rgba(255,255,255,.58);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}
.wvs-shell::before { top: -58px; right: 26%; }
.wvs-shell::after { bottom: -70px; left: 9%; }
.wvs-shell > * { position: relative; z-index: 1; }

.wvs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}
.wvs-brand-block { display: flex; align-items: center; gap: 14px; min-width: 0; }
.wvs-mini-mascot {
    display: grid;
    width: 58px;
    height: 58px;
    flex: 0 0 auto;
    place-items: center;
    border: 3px solid #fff;
    border-radius: 21px;
    background: linear-gradient(145deg, var(--wvs-yellow), #ffb578);
    color: #573d25;
    font-size: 28px;
    font-weight: 950;
    box-shadow: 0 10px 20px rgba(255,181,120,.26);
    transform: rotate(-4deg);
}
.wvs-kicker { color: var(--wvs-primary-dark); font-size: 11px; font-weight: 950; letter-spacing: .16em; }
.wvs-header h2,
.wvs-auth-hero h2 { margin: 3px 0 2px; color: var(--wvs-ink); font-size: clamp(24px, 4vw, 37px); line-height: 1.16; }
.wvs-header p,
.wvs-auth-hero p { margin: 0; color: var(--wvs-muted); }
.wvs-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

.wvs-primary,
.wvs-secondary,
.wvs-ghost,
.wvs-icon-button,
.wvs-reward-button,
.wvs-complete-button,
.wvs-study-nav button,
.wvs-delete,
.wvs-auth-tabs button,
.wvs-speak,
.wvs-examples button,
.wvs-modal-close {
    appearance: none;
    border: 0;
    transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease, background .16s ease;
}
.wvs-primary:hover,
.wvs-secondary:hover,
.wvs-ghost:hover,
.wvs-reward-button:hover,
.wvs-complete-button:hover,
.wvs-study-nav button:hover { transform: translateY(-2px); }
.wvs-primary:disabled,
.wvs-secondary:disabled,
.wvs-complete-button:disabled { cursor: not-allowed; opacity: .58; transform: none; }
.wvs-primary {
    min-height: 48px;
    padding: 12px 18px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--wvs-primary), #ff9b79) !important;
    color: #fff !important;
    font-weight: 950;
    box-shadow: 0 12px 24px rgba(255,123,143,.25);
}
.wvs-secondary,
.wvs-ghost {
    min-height: 42px;
    padding: 10px 14px;
    border: 1px solid rgba(217,80,105,.16) !important;
    border-radius: 14px;
    background: #fff !important;
    color: var(--wvs-primary-dark) !important;
    font-weight: 900;
}
.wvs-icon-button {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 14px;
    background: #fff !important;
    box-shadow: 0 8px 18px rgba(68,61,65,.08);
}
.wvs-reward-button {
    min-height: 42px;
    padding: 10px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, #fff3bb, #ffe08a) !important;
    color: #73571d !important;
    font-weight: 950;
    box-shadow: 0 8px 18px rgba(255,216,107,.24);
}

.wvs-message { margin: 0 0 16px; padding: 12px 15px; border-radius: 15px; font-weight: 800; }
.wvs-message.is-info { background: #eef7ff; color: #23658a; }
.wvs-message.is-success { background: #ebfbf3; color: #187454; }
.wvs-message.is-error { background: #fff0f2; color: #ad2944; }

.wvs-dashboard { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-bottom: 16px; }
.wvs-stat {
    min-height: 132px;
    padding: 16px;
    border: 1px solid rgba(255,255,255,.78);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 12px 26px rgba(75,62,66,.07);
}
.wvs-stat span { display: block; color: var(--wvs-muted); font-size: 12px; font-weight: 850; }
.wvs-stat strong { display: block; margin: 7px 0 4px; font-size: 25px; line-height: 1.12; }
.wvs-stat small { color: var(--wvs-muted); font-size: 11px; line-height: 1.35; }
.wvs-stat.is-fire { background: linear-gradient(145deg, #fff, #fff0e4); border-color: rgba(255,154,101,.22); }
.wvs-stat.is-quota { background: linear-gradient(145deg, #fff, #edfaff); border-color: rgba(111,201,232,.25); }
.wvs-stat.is-best { background: linear-gradient(145deg, #fff, #f2eeff); border-color: rgba(169,148,239,.22); }
.wvs-stat.is-game { background: linear-gradient(145deg, #fff, #fff7cf); border-color: rgba(255,216,107,.25); }

.wvs-streak-map-card,
.wvs-import-card,
.wvs-study-card,
.wvs-library-card,
.wvs-exercise-card {
    border: 1px solid var(--wvs-border);
    border-radius: 24px;
    background: rgba(255,255,255,.88);
    box-shadow: 0 14px 34px rgba(75,62,66,.07);
}
.wvs-streak-map-card { margin-bottom: 18px; padding: 18px; }
.wvs-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.wvs-section-heading > div:first-child { display: grid; gap: 2px; }
.wvs-section-heading span { color: var(--wvs-primary-dark); font-size: 11px; font-weight: 950; letter-spacing: .12em; }
.wvs-section-heading h3 { margin: 0; font-size: 21px; }
.wvs-section-heading input[type="search"] { width: min(330px, 100%); }
.wvs-streak-pill { padding: 8px 13px; border-radius: 999px; background: #fff0e4; color: #b65d25; font-weight: 950; }
.wvs-streak-map { display: grid; grid-template-columns: repeat(10, minmax(72px,1fr)); gap: 9px; margin-top: 16px; overflow-x: auto; padding: 4px 2px 8px; }
.wvs-day-node { position: relative; display: grid; min-width: 72px; place-items: center; gap: 3px; padding: 8px 5px; color: #8a9298; text-align: center; }
.wvs-day-node::after { position: absolute; top: 25px; left: calc(50% + 24px); width: calc(100% - 38px); height: 3px; border-radius: 999px; background: #eceff1; content: ""; }
.wvs-day-node:last-child::after { display: none; }
.wvs-day-node > div { display: grid; z-index: 1; width: 48px; height: 48px; place-items: center; border: 3px solid #eef0f1; border-radius: 50%; background: #fff; font-size: 17px; font-weight: 950; }
.wvs-day-node strong { font-size: 11px; }
.wvs-day-node span { font-size: 10px; }
.wvs-day-node.is-complete { color: #25815e; }
.wvs-day-node.is-complete > div { border-color: #7fd7ae; background: #dcf8eb; color: #25815e; }
.wvs-day-node.is-complete::after { background: #9ee3c2; }
.wvs-day-node.is-active { color: #b95064; }
.wvs-day-node.is-active > div { border-color: var(--wvs-primary); background: #fff0f2; color: var(--wvs-primary-dark); animation: wvs-pulse 1.5s infinite; }
.wvs-day-node.is-milestone > div { border-style: dashed; }
@keyframes wvs-pulse { 50% { box-shadow: 0 0 0 8px rgba(255,123,143,.12); } }

.wvs-main-grid { display: grid; grid-template-columns: minmax(300px,.86fr) minmax(420px,1.14fr); gap: 18px; align-items: stretch; }
.wvs-import-card,
.wvs-study-card { padding: 18px; }
.wvs-card-title { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.wvs-card-title > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 14px; background: #fff2d7; font-size: 21px; }
.wvs-card-title h3 { margin: 0; font-size: 20px; }
.wvs-card-title p { margin: 2px 0 0; color: var(--wvs-muted); font-size: 13px; }
.wvs-form { display: grid; gap: 13px; }
.wvs-form label { display: grid; gap: 6px; color: var(--wvs-ink); font-size: 13px; font-weight: 850; }
.wvs-form input,
.wvs-form textarea,
.wvs-section-heading input[type="search"],
.wvs-typing-form input {
    width: 100%;
    min-height: 46px;
    padding: 11px 13px;
    border: 1px solid rgba(64,72,82,.15) !important;
    border-radius: 14px !important;
    outline: none;
    background: #fff !important;
    color: var(--wvs-ink) !important;
    box-shadow: none !important;
}
.wvs-form textarea { min-height: 230px; resize: vertical; font-size: 17px; line-height: 1.7; }
.wvs-form input:focus,
.wvs-form textarea:focus,
.wvs-section-heading input[type="search"]:focus,
.wvs-typing-form input:focus { border-color: var(--wvs-primary) !important; box-shadow: 0 0 0 4px rgba(255,123,143,.11) !important; }
.wvs-auto-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.wvs-auto-tags span { padding: 5px 8px; border-radius: 999px; background: #edfaff; color: #31748c; font-size: 10px; font-weight: 900; }
.wvs-detect-status { padding: 10px 12px; border-radius: 13px; background: #f5f7f8; color: var(--wvs-muted); font-size: 12px; font-weight: 800; }
.wvs-detect-status.is-success { background: #ebfbf3; color: #187454; }
.wvs-detect-status.is-warning { background: #fff7d6; color: #87681e; }
.wvs-detect-status.is-error { background: #fff0f2; color: #ad2944; }
.wvs-request-note { color: var(--wvs-muted); font-size: 10px; }

.wvs-study-card { display: flex; min-width: 0; flex-direction: column; }
.wvs-study-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wvs-study-head > div:first-child { display: grid; gap: 2px; }
.wvs-study-head span { color: var(--wvs-primary-dark); font-size: 11px; font-weight: 950; letter-spacing: .11em; }
.wvs-study-head strong { font-size: 20px; }
.wvs-study-nav { display: flex; gap: 7px; }
.wvs-study-nav button { width: 42px; height: 42px; border: 1px solid var(--wvs-border) !important; border-radius: 50%; background: #fff !important; color: var(--wvs-primary-dark) !important; font-size: 27px; font-weight: 900; }
.wvs-card-progress { height: 8px; margin: 12px 0 15px; overflow: hidden; border-radius: 999px; background: #f0f1f2; }
.wvs-card-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--wvs-primary), #ffbb7b); transition: width .25s ease; }
.wvs-card-stage { display: grid; min-height: 520px; place-items: center; }
.wvs-empty { max-width: 400px; padding: 28px; border: 2px dashed rgba(255,123,143,.2); border-radius: 22px; color: var(--wvs-muted); text-align: center; }
.wvs-flashcard { width: min(100%, 360px); min-height: 500px; cursor: pointer; perspective: 1300px; }
.wvs-flash-inner { position: relative; min-height: 500px; transform-style: preserve-3d; transition: transform .56s cubic-bezier(.2,.72,.2,1); }
.wvs-flashcard.is-flipped .wvs-flash-inner { transform: rotateY(180deg); }
.wvs-flash-face {
    position: absolute;
    inset: 0;
    display: flex;
    min-height: 500px;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255,123,143,.17);
    border-radius: 30px;
    background: #fff;
    box-shadow: 0 24px 50px rgba(75,62,66,.14);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.wvs-flash-face.is-front {
    align-items: center;
    justify-content: center;
    gap: 13px;
    padding: 28px;
    background:
        radial-gradient(circle at 50% 18%, rgba(255,216,107,.35), transparent 31%),
        radial-gradient(circle at 15% 80%, rgba(111,201,232,.18), transparent 28%),
        linear-gradient(160deg, #fff, #fff7f0);
    text-align: center;
}
.wvs-front-sticker { position: absolute; top: 20px; left: 20px; padding: 6px 9px; border-radius: 999px; background: #fff1d0; color: #84611b; font-size: 10px; font-weight: 950; letter-spacing: .12em; transform: rotate(-5deg); }
.wvs-flash-face.is-front > strong { max-width: 100%; font-size: clamp(40px,7vw,64px); line-height: 1.06; overflow-wrap: anywhere; }
.wvs-flash-face.is-front > em { color: var(--wvs-muted); font-size: 18px; font-style: normal; }
.wvs-flash-face.is-front > small { color: var(--wvs-muted); font-size: 12px; }
.wvs-speak,
.wvs-examples button { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: #fff !important; box-shadow: 0 7px 16px rgba(75,62,66,.11); }
.wvs-flash-face.is-back { padding: 21px; overflow-y: auto; transform: rotateY(180deg); }
.wvs-back-head { display: flex; align-items: baseline; justify-content: center; gap: 7px; flex-wrap: wrap; text-align: center; }
.wvs-back-head strong { font-size: 29px; }
.wvs-back-head em { color: var(--wvs-muted); font-size: 14px; font-style: normal; }
.wvs-back-head span { padding: 4px 8px; border-radius: 999px; background: #eef9fd; color: #32768e; font-size: 11px; font-weight: 900; }
.wvs-meaning { margin: 12px 0 16px; color: var(--wvs-primary-dark); text-align: center; font-size: 20px; font-weight: 950; }
.wvs-examples h4 { margin: 0 0 9px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.wvs-examples article { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; margin-bottom: 8px; padding: 10px; border-radius: 15px; background: #fff8f4; }
.wvs-examples article > div { display: grid; gap: 3px; }
.wvs-examples b { font-size: 14px; line-height: 1.35; }
.wvs-examples em { color: #7a6a72; font-size: 11px; font-style: normal; }
.wvs-examples span { color: var(--wvs-muted); font-size: 12px; line-height: 1.35; }
.wvs-study-checkin { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 13px; border-radius: 17px; background: linear-gradient(135deg, #fff4e7, #fff); }
.wvs-study-checkin > div { display: grid; gap: 2px; }
.wvs-study-checkin strong { font-size: 13px; }
.wvs-study-checkin span { color: var(--wvs-muted); font-size: 10px; }
.wvs-complete-button { min-height: 44px; padding: 10px 14px; border-radius: 14px; background: linear-gradient(135deg, #ff9a65, #ff718a) !important; color: #fff !important; font-weight: 950; box-shadow: 0 9px 18px rgba(255,113,138,.2); white-space: nowrap; }
.wvs-complete-button.is-done { background: #7fd7ae !important; }

.wvs-exercise-card { margin-top: 18px; padding: 18px; }
.wvs-exercise-lock,
.wvs-exercise-unlocked { display: grid; grid-template-columns: auto 1fr auto; gap: 15px; align-items: center; }
.wvs-lock-illustration { position: relative; display: grid; width: 78px; height: 78px; place-items: center; border-radius: 24px; background: linear-gradient(145deg, #f1edff, #fff); font-size: 36px; }
.wvs-lock-illustration span { position: absolute; right: -5px; bottom: -4px; font-size: 22px; }
.wvs-exercise-lock > div:nth-child(2) span,
.wvs-exercise-unlocked > div:nth-child(2) span { color: var(--wvs-purple); font-size: 10px; font-weight: 950; letter-spacing: .12em; }
.wvs-exercise-lock h3,
.wvs-exercise-unlocked h3 { margin: 3px 0; font-size: 21px; }
.wvs-exercise-lock p,
.wvs-exercise-unlocked p { margin: 0; color: var(--wvs-muted); font-size: 13px; }
.wvs-lock-progress { grid-column: 2 / -1; height: 8px; overflow: hidden; border-radius: 999px; background: #eeeaf8; }
.wvs-lock-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--wvs-purple), #d0b9ff); }

.wvs-quiz-shell { max-width: 760px; margin: 0 auto; }
.wvs-quiz-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wvs-quiz-top span { color: var(--wvs-purple); font-size: 11px; font-weight: 950; letter-spacing: .08em; }
.wvs-quiz-top strong { padding: 6px 10px; border-radius: 999px; background: #f1edff; color: #6b56b6; font-size: 12px; }
.wvs-quiz-prompt { padding: 24px 10px 18px; text-align: center; }
.wvs-quiz-prompt h3 { margin: 0; font-size: clamp(28px,5vw,45px); }
.wvs-quiz-prompt p { margin: 5px 0 0; color: var(--wvs-muted); }
.wvs-quiz-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.wvs-quiz-options button,
.wvs-match-grid button { min-height: 52px; padding: 11px 14px; border: 2px solid rgba(169,148,239,.18); border-radius: 16px; background: #fff; color: var(--wvs-ink); font-weight: 850; }
.wvs-quiz-options button:hover,
.wvs-match-grid button:hover { border-color: var(--wvs-purple); background: #faf8ff; }
.wvs-quiz-options button.is-correct,
.wvs-match-grid button.is-matched { border-color: #55c798; background: #e9fbf3; color: #187454; }
.wvs-quiz-options button.is-wrong,
.wvs-match-grid button.is-wrong { border-color: #f07d91; background: #fff0f2; color: #ad2944; }
.wvs-typing-form { display: grid; grid-template-columns: 1fr auto; gap: 9px; }
.wvs-typing-form input { text-align: center; font-size: 21px; }
.wvs-typing-form input.is-correct { border-color: #55c798 !important; background: #e9fbf3 !important; }
.wvs-typing-form input.is-wrong { border-color: #f07d91 !important; background: #fff0f2 !important; }
.wvs-quiz-feedback { margin-top: 12px; padding: 11px 13px; border-radius: 14px; text-align: center; font-weight: 900; }
.wvs-quiz-feedback.is-correct { background: #e9fbf3; color: #187454; }
.wvs-quiz-feedback.is-wrong { background: #fff0f2; color: #ad2944; }
.wvs-quiz-feedback.is-info { background: #eef7ff; color: #23658a; }
.wvs-next-question { display: block; margin: 12px auto 0; }
.wvs-match-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wvs-match-grid > div { display: grid; gap: 8px; }
.wvs-match-grid button.is-selected { border-color: var(--wvs-purple); background: #f1edff; }
.wvs-quiz-result { display: grid; place-items: center; padding: 20px; text-align: center; }
.wvs-quiz-result > div { font-size: 58px; }
.wvs-quiz-result > span { color: var(--wvs-purple); font-size: 11px; font-weight: 950; letter-spacing: .12em; }
.wvs-quiz-result h3 { margin: 5px 0; font-size: 38px; }
.wvs-quiz-result p { margin: 0 0 14px; color: var(--wvs-muted); }

.wvs-library-card { margin-top: 18px; padding: 18px; }
.wvs-word-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 14px; }
.wvs-word-item { display: grid; grid-template-columns: 1fr auto; overflow: hidden; border: 1px solid var(--wvs-border); border-radius: 17px; background: #fff; }
.wvs-word-main { display: grid; min-width: 0; gap: 2px; padding: 12px; border: 0; background: transparent; color: var(--wvs-ink); text-align: left; }
.wvs-word-main strong { overflow: hidden; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
.wvs-word-main span,
.wvs-word-main small { overflow: hidden; color: var(--wvs-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.wvs-word-main em { color: var(--wvs-primary-dark); font-size: 10px; font-style: normal; font-weight: 900; }
.wvs-delete { width: 40px; background: transparent !important; color: #a2a8ad !important; font-size: 20px; }
.wvs-delete:hover { background: #fff0f2 !important; color: #ad2944 !important; }
.wvs-empty-list { grid-column: 1/-1; padding: 22px; color: var(--wvs-muted); text-align: center; }

.wvs-shell.is-auth { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(320px,.9fr); gap: 24px; align-items: center; min-height: 610px; }
.wvs-auth-hero { padding: 30px; }
.wvs-mascot { position: relative; display: grid; width: 120px; height: 120px; margin-bottom: 18px; place-items: center; border: 7px solid #fff; border-radius: 42px; background: linear-gradient(145deg, #ffe58d, #ffb782); box-shadow: 0 18px 36px rgba(255,183,130,.28); transform: rotate(-4deg); }
.wvs-mascot span { color: #563e2a; font-size: 50px; font-weight: 950; }
.wvs-mascot i { position: absolute; right: -10px; bottom: -12px; font-size: 35px; font-style: normal; }
.wvs-auth-features { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-top: 20px; }
.wvs-auth-features span { padding: 11px 13px; border: 1px solid rgba(255,123,143,.11); border-radius: 15px; background: rgba(255,255,255,.74); font-size: 12px; font-weight: 850; }
.wvs-auth-card { padding: 20px; border: 1px solid var(--wvs-border); border-radius: 24px; background: #fff; box-shadow: 0 18px 40px rgba(75,62,66,.1); }
.wvs-auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 15px; padding: 5px; border-radius: 15px; background: #f5f3f2; }
.wvs-auth-tabs button { min-height: 42px; border-radius: 11px; background: transparent !important; color: var(--wvs-muted) !important; font-weight: 900; }
.wvs-auth-tabs button.is-active { background: #fff !important; color: var(--wvs-primary-dark) !important; box-shadow: 0 6px 14px rgba(75,62,66,.08); }
.wvs-checkbox { display: flex !important; align-items: center; gap: 8px; }
.wvs-checkbox input { width: 18px !important; min-height: 18px !important; }
.wvs-honeypot { position: absolute !important; left: -9999px !important; opacity: 0 !important; }

.wvs-modal[hidden] { display: none !important; }
.wvs-modal { position: fixed; z-index: 999999; inset: 0; display: grid; place-items: center; padding: 18px; }
.wvs-modal-backdrop { position: absolute; inset: 0; background: rgba(45,39,42,.48); backdrop-filter: blur(5px); }
.wvs-reward-card { position: relative; z-index: 1; width: min(440px,100%); padding: 30px 25px 25px; overflow: hidden; border: 6px solid #fff; border-radius: 30px; background: linear-gradient(160deg, #fff9d9, #fff, #fff0f4); text-align: center; box-shadow: 0 28px 80px rgba(30,24,27,.25); animation: wvs-reward-in .35s ease both; }
.wvs-reward-card::before { position: absolute; top: -40px; left: -30px; width: 150px; height: 100px; border-radius: 50%; background: rgba(255,216,107,.35); content: ""; transform: rotate(-20deg); }
@keyframes wvs-reward-in { from { opacity: 0; transform: scale(.88) translateY(20px); } }
.wvs-modal-close { position: absolute; z-index: 2; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.82) !important; color: #7d6c74 !important; font-size: 22px; }
.wvs-gift-icon { font-size: 61px; animation: wvs-bounce 1.2s infinite; }
@keyframes wvs-bounce { 50% { transform: translateY(-7px) rotate(4deg); } }
.wvs-reward-day { display: inline-block; margin: 5px 0; padding: 5px 9px; border-radius: 999px; background: #fff0d0; color: #84611b; font-size: 10px; font-weight: 950; letter-spacing: .1em; }
.wvs-reward-card h3 { margin: 6px 0; font-size: 28px; }
.wvs-reward-card > p { margin: 0 0 12px; color: var(--wvs-muted); }
.wvs-reward-extra { display: grid; gap: 6px; margin-bottom: 14px; }
.wvs-reward-extra p { margin: 0; padding: 9px; border-radius: 12px; background: rgba(255,255,255,.8); color: #6f5c64; font-size: 12px; font-weight: 800; }
body.wvs-modal-open { overflow: hidden; }
.wvs-confetti { position: fixed; z-index: 1000000; inset: 0; overflow: hidden; pointer-events: none; }
.wvs-confetti span { position: absolute; top: -30px; font-size: 22px; animation: wvs-confetti-fall 1.3s ease-in both; }
@keyframes wvs-confetti-fall { to { transform: translateY(110vh) rotate(560deg); opacity: .2; } }

@media (max-width: 1000px) {
    .wvs-dashboard { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .wvs-main-grid,
    .wvs-shell.is-auth { grid-template-columns: 1fr; }
    .wvs-word-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .wvs-auth-hero { padding: 10px; }
}

@media (max-width: 680px) {
    .wvs-shell { width: min(100% - 12px,1180px); margin: 8px auto; padding: 13px; border-radius: 22px; }
    .wvs-header { align-items: flex-start; flex-direction: column; }
    .wvs-header-actions { width: 100%; justify-content: flex-start; }
    .wvs-dashboard { grid-template-columns: 1fr 1fr; gap: 8px; }
    .wvs-stat { min-height: 124px; padding: 13px; border-radius: 18px; }
    .wvs-stat strong { font-size: 20px; }
    .wvs-section-heading { align-items: stretch; flex-direction: column; }
    .wvs-section-heading input[type="search"] { width: 100%; }
    .wvs-study-checkin { align-items: stretch; flex-direction: column; }
    .wvs-complete-button { width: 100%; }
    .wvs-exercise-lock,
    .wvs-exercise-unlocked { grid-template-columns: 1fr; text-align: center; }
    .wvs-lock-illustration { margin: 0 auto; }
    .wvs-lock-progress { grid-column: 1; }
    .wvs-exercise-unlocked .wvs-primary { width: 100%; }
    .wvs-word-list { grid-template-columns: 1fr; }
    .wvs-auth-features { grid-template-columns: 1fr; }
    .wvs-flashcard,
    .wvs-flash-inner,
    .wvs-flash-face { min-height: 480px; }
    .wvs-card-stage { min-height: 500px; }
    .wvs-quiz-options { grid-template-columns: 1fr; }
    .wvs-typing-form { grid-template-columns: 1fr; }
}

/* v1.1.0 - logo, device layouts, reliable SVG controls and progressive exercises */
.wvs-mini-mascot,
.wvs-mascot {
    overflow: hidden;
    padding: 7px;
    background: #fff;
    transform: none;
}
.wvs-mini-mascot img,
.wvs-mascot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.wvs-mini-mascot.is-fallback,
.wvs-mascot.is-fallback {
    background: linear-gradient(145deg, var(--wvs-yellow), #ffb578);
}
.wvs-mini-mascot.is-fallback span { font-size: 24px; font-weight: 950; }
.wvs-mascot.is-fallback span { font-size: 42px; font-weight: 950; }

.wvs-icon-button svg,
.wvs-study-nav svg,
.wvs-speak svg,
.wvs-examples button svg,
.wvs-device-switcher svg,
.wvs-sample-button svg,
.wvs-mic-button svg {
    display: block;
    width: 21px;
    height: 21px;
    pointer-events: none;
}
.wvs-study-nav button {
    display: grid;
    place-items: center;
    padding: 0 !important;
    line-height: 0;
}
.wvs-study-nav button svg { width: 23px; height: 23px; }
.wvs-speak,
.wvs-examples button {
    padding: 0 !important;
    color: var(--wvs-primary-dark) !important;
    line-height: 0;
}
.wvs-examples button svg { width: 19px; height: 19px; }

.wvs-device-switcher {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 4px;
    border: 1px solid var(--wvs-border);
    border-radius: 14px;
    background: rgba(255,255,255,.85);
    box-shadow: 0 8px 18px rgba(68,61,65,.06);
}
.wvs-device-switcher button {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #879198;
}
.wvs-device-switcher button:hover { background: #fff5f6; color: var(--wvs-primary-dark); }
.wvs-device-switcher button.is-active {
    background: linear-gradient(135deg, #fff0f2, #fff5df);
    color: var(--wvs-primary-dark);
    box-shadow: 0 5px 12px rgba(255,123,143,.14);
}

.wvs-admin-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: -4px 0 16px;
    padding: 12px 14px;
    border: 1px dashed rgba(190,124,35,.35);
    border-radius: 17px;
    background: linear-gradient(135deg, #fff9df, #fff);
}
.wvs-admin-preview > div:first-child { display: grid; gap: 2px; }
.wvs-admin-preview strong { font-size: 13px; }
.wvs-admin-preview span { color: var(--wvs-muted); font-size: 10px; }
.wvs-admin-day-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.wvs-admin-day-buttons button {
    min-width: 31px;
    height: 31px;
    padding: 0 7px;
    border: 1px solid rgba(190,124,35,.18);
    border-radius: 9px;
    background: #fff;
    color: #73571d;
    font-size: 11px;
    font-weight: 900;
}
.wvs-admin-day-buttons button.is-active { background: #ffd86b; border-color: #e7b83e; }

.wvs-input-guide {
    padding: 10px 12px;
    border: 1px solid rgba(111,201,232,.2);
    border-radius: 13px;
    background: linear-gradient(135deg, #eefaff, #fff);
    color: #456875;
    font-size: 11px;
    line-height: 1.55;
}
.wvs-input-guide strong { color: #286980; }

.wvs-exercise-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.wvs-exercise-chips span {
    padding: 6px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
}
.wvs-exercise-chips .is-open { background: #e9fbf3; color: #187454; }
.wvs-exercise-chips .is-locked { background: #f4f2f5; color: #92979b; }

.wvs-speaking-shell { max-width: 680px; }
.wvs-speak-progress { display: flex; justify-content: center; gap: 7px; margin: 16px 0; }
.wvs-speak-progress i { width: 38px; height: 7px; border-radius: 999px; background: #eceff1; }
.wvs-speak-progress i.is-current { background: var(--wvs-yellow); box-shadow: 0 0 0 4px rgba(255,216,107,.2); }
.wvs-speak-progress i.is-done { background: var(--wvs-green); }
.wvs-speaking-card {
    display: grid;
    place-items: center;
    padding: 28px 20px;
    border: 1px solid rgba(169,148,239,.2);
    border-radius: 24px;
    background:
        radial-gradient(circle at 15% 15%, rgba(255,216,107,.25), transparent 25%),
        linear-gradient(155deg, #fff, #f9f6ff);
    text-align: center;
}
.wvs-speaking-card > span { color: var(--wvs-purple); font-size: 10px; font-weight: 950; letter-spacing: .14em; }
.wvs-speaking-card h3 { margin: 8px 0 1px; font-size: clamp(42px,8vw,68px); line-height: 1.1; }
.wvs-speaking-card p { margin: 0; color: #665d72; font-size: 17px; }
.wvs-speaking-card small { margin-top: 5px; color: var(--wvs-muted); }
.wvs-speaking-actions { display: flex; justify-content: center; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.wvs-sample-button,
.wvs-mic-button {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 15px;
    border: 0;
    border-radius: 15px;
    font-weight: 900;
}
.wvs-sample-button { background: #fff; color: var(--wvs-primary-dark); box-shadow: 0 8px 20px rgba(75,62,66,.09); }
.wvs-mic-button { background: linear-gradient(135deg, var(--wvs-purple), #c6a9ff); color: #fff; box-shadow: 0 10px 22px rgba(169,148,239,.28); }
.wvs-mic-button.is-recording { animation: wvs-mic-pulse .9s infinite; background: linear-gradient(135deg, #ff718a, #ff9b79); }
.wvs-mic-button.is-fallback { background: linear-gradient(135deg, #6fc9e8, #7fd7ae); }
@keyframes wvs-mic-pulse { 50% { transform: scale(1.04); box-shadow: 0 0 0 9px rgba(255,113,138,.13); } }
.wvs-speaking-result .wvs-quiz-result h3 { font-size: clamp(22px,4vw,32px); }

.wvs-reward-card { width: min(720px,100%); }
.wvs-reward-card > h3 { margin-bottom: 15px; }
.wvs-reward-compare { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-bottom: 13px; }
.wvs-reward-compare article {
    display: grid;
    align-content: start;
    min-height: 205px;
    padding: 17px;
    border: 1px solid rgba(255,123,143,.12);
    border-radius: 21px;
    background: rgba(255,255,255,.82);
}
.wvs-reward-compare article.is-today { box-shadow: 0 12px 28px rgba(255,123,143,.12); }
.wvs-reward-compare article.is-next { opacity: .82; background: rgba(248,247,252,.9); }
.wvs-reward-symbol { margin: 5px 0; font-size: 38px; }
.wvs-reward-compare strong { font-size: 18px; line-height: 1.25; }
.wvs-reward-compare p { margin: 7px 0 0; color: var(--wvs-muted); font-size: 12px; line-height: 1.5; }

/* The learner can preview the three layouts even on one physical device. */
.wvs-shell[data-layout="desktop"] { width: min(1180px, calc(100% - 24px)); }
.wvs-shell[data-layout="tablet"] { width: min(820px, calc(100% - 20px)); }
.wvs-shell[data-layout="tablet"] .wvs-dashboard { grid-template-columns: repeat(2,minmax(0,1fr)); }
.wvs-shell[data-layout="tablet"] .wvs-main-grid { grid-template-columns: 1fr; }
.wvs-shell[data-layout="tablet"] .wvs-word-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
.wvs-shell[data-layout="mobile"] { width: min(430px, calc(100% - 12px)); margin: 8px auto; padding: 13px; border-radius: 22px; }
.wvs-shell[data-layout="mobile"] .wvs-header { align-items: flex-start; flex-direction: column; }
.wvs-shell[data-layout="mobile"] .wvs-header-actions { width: 100%; justify-content: flex-start; }
.wvs-shell[data-layout="mobile"] .wvs-admin-preview { align-items: stretch; flex-direction: column; }
.wvs-shell[data-layout="mobile"] .wvs-admin-day-buttons { justify-content: flex-start; }
.wvs-shell[data-layout="mobile"] .wvs-dashboard { grid-template-columns: 1fr 1fr; gap: 8px; }
.wvs-shell[data-layout="mobile"] .wvs-stat { min-height: 124px; padding: 13px; border-radius: 18px; }
.wvs-shell[data-layout="mobile"] .wvs-stat strong { font-size: 20px; }
.wvs-shell[data-layout="mobile"] .wvs-main-grid { grid-template-columns: 1fr; }
.wvs-shell[data-layout="mobile"] .wvs-section-heading { align-items: stretch; flex-direction: column; }
.wvs-shell[data-layout="mobile"] .wvs-section-heading input[type="search"] { width: 100%; }
.wvs-shell[data-layout="mobile"] .wvs-study-checkin { align-items: stretch; flex-direction: column; }
.wvs-shell[data-layout="mobile"] .wvs-complete-button { width: 100%; }
.wvs-shell[data-layout="mobile"] .wvs-exercise-lock,
.wvs-shell[data-layout="mobile"] .wvs-exercise-unlocked { grid-template-columns: 1fr; text-align: center; }
.wvs-shell[data-layout="mobile"] .wvs-lock-illustration { margin: 0 auto; }
.wvs-shell[data-layout="mobile"] .wvs-lock-progress { grid-column: 1; }
.wvs-shell[data-layout="mobile"] .wvs-exercise-unlocked .wvs-primary { width: 100%; }
.wvs-shell[data-layout="mobile"] .wvs-word-list { grid-template-columns: 1fr; }
.wvs-shell[data-layout="mobile"] .wvs-flashcard,
.wvs-shell[data-layout="mobile"] .wvs-flash-inner,
.wvs-shell[data-layout="mobile"] .wvs-flash-face { min-height: 480px; }
.wvs-shell[data-layout="mobile"] .wvs-card-stage { min-height: 500px; }
.wvs-shell[data-layout="mobile"] .wvs-quiz-options { grid-template-columns: 1fr; }
.wvs-shell[data-layout="mobile"] .wvs-typing-form { grid-template-columns: 1fr; }
.wvs-shell[data-layout="mobile"] .wvs-reward-compare { grid-template-columns: 1fr; }

@media (max-width: 680px) {
    .wvs-admin-preview { align-items: stretch; flex-direction: column; }
    .wvs-admin-day-buttons { justify-content: flex-start; }
    .wvs-device-switcher { order: 4; }
    .wvs-reward-compare { grid-template-columns: 1fr; }
    .wvs-reward-card { max-height: calc(100vh - 24px); overflow-y: auto; }
}

/* Tương tác giao diện kế thừa. */
.wvs-plus-button {
    min-height: 42px;
    padding: 10px 14px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, #a994ef, #ff8fb1) !important;
    color: #fff !important;
    font-weight: 950;
    box-shadow: 0 9px 20px rgba(169,148,239,.24);
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.wvs-plus-button:hover { transform: translateY(-2px) rotate(-1deg); filter: saturate(1.08); box-shadow: 0 12px 24px rgba(169,148,239,.3); }
.wvs-plus-button.is-active { background: linear-gradient(135deg, #7fd7ae, #6fc9e8) !important; box-shadow: 0 9px 20px rgba(111,201,232,.24); }
.wvs-plus-card {
    position: relative;
    z-index: 1;
    width: min(880px, 100%);
    max-height: calc(100vh - 28px);
    padding: 27px;
    overflow-y: auto;
    border: 6px solid #fff;
    border-radius: 30px;
    background:
        radial-gradient(circle at 8% 6%, rgba(255,216,107,.27), transparent 25%),
        radial-gradient(circle at 93% 10%, rgba(169,148,239,.2), transparent 24%),
        linear-gradient(160deg, #fffdfa, #fff, #fff3f7);
    box-shadow: 0 28px 80px rgba(30,24,27,.25);
    animation: wvs-reward-in .35s ease both;
}
.wvs-plus-hero { padding: 2px 48px 13px; text-align: center; }
.wvs-plus-sparkle { font-size: 38px; animation: wvs-plus-float 1.8s ease-in-out infinite; }
.wvs-plus-hero > span { color: var(--wvs-purple); font-size: 10px; font-weight: 950; letter-spacing: .18em; }
.wvs-plus-hero h3 { margin: 3px 0 4px; font-size: clamp(27px, 5vw, 39px); }
.wvs-plus-hero p { max-width: 650px; margin: 0 auto; color: var(--wvs-muted); font-size: 12px; }
@keyframes wvs-plus-float { 50% { transform: translateY(-5px) rotate(5deg); } }
.wvs-plus-status { display: grid; gap: 2px; margin: 4px 0 14px; padding: 11px 14px; border: 1px solid rgba(169,148,239,.18); border-radius: 15px; background: #f8f5ff; color: #5f4c8f; }
.wvs-plus-status span { color: var(--wvs-muted); font-size: 11px; }
.wvs-plus-status.is-active { border-color: rgba(127,215,174,.35); background: #ebfbf3; color: #177252; }
.wvs-plus-status.is-pending { border-color: rgba(255,216,107,.45); background: #fff8d9; color: #7a5f16; }
.wvs-plus-plans { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.wvs-plus-plan {
    display: grid;
    align-content: start;
    min-height: 162px;
    padding: 15px;
    border: 2px solid rgba(169,148,239,.14);
    border-radius: 20px;
    background: rgba(255,255,255,.86);
    color: var(--wvs-ink);
    text-align: left;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.wvs-plus-plan:hover:not(:disabled) { transform: translateY(-3px); border-color: rgba(255,123,143,.38); box-shadow: 0 12px 24px rgba(75,62,66,.09); }
.wvs-plus-plan.is-selected { border-color: var(--wvs-primary); background: linear-gradient(145deg,#fff,#fff2f5); box-shadow: 0 12px 26px rgba(255,123,143,.14); }
.wvs-plus-plan.is-locked { cursor: not-allowed; opacity: .58; filter: grayscale(.18); }
.wvs-plus-plan > span { color: var(--wvs-primary-dark); font-size: 10px; font-weight: 950; letter-spacing: .1em; text-transform: uppercase; }
.wvs-plus-plan strong { margin-top: 6px; font-size: 17px; line-height: 1.25; }
.wvs-plus-plan b { margin-top: 9px; color: var(--wvs-primary-dark); font-size: 23px; }
.wvs-plus-plan small { margin-top: auto; padding-top: 8px; color: var(--wvs-muted); font-size: 10px; line-height: 1.35; }
.wvs-plus-checkout { display: grid; grid-template-columns: 230px minmax(0,1fr); gap: 16px; margin-top: 15px; padding: 15px; border: 1px solid rgba(111,201,232,.18); border-radius: 22px; background: linear-gradient(145deg,#f2fbff,#fff); }
.wvs-plus-qr { display: grid; place-items: center; align-content: center; gap: 5px; padding: 10px; border-radius: 17px; background: #fff; box-shadow: 0 8px 20px rgba(75,62,66,.07); }
.wvs-plus-qr img { display: block; width: 200px; max-width: 100%; height: auto; border-radius: 10px; }
.wvs-plus-qr small { color: var(--wvs-muted); font-size: 10px; }
.wvs-plus-bank { display: grid; gap: 7px; align-content: center; }
.wvs-plus-bank > div { display: grid; grid-template-columns: 130px minmax(0,1fr) auto; align-items: center; gap: 8px; min-height: 42px; padding: 8px 10px; border-radius: 13px; background: rgba(255,255,255,.88); }
.wvs-plus-bank span { color: var(--wvs-muted); font-size: 10px; font-weight: 800; }
.wvs-plus-bank strong { overflow-wrap: anywhere; font-size: 13px; }
.wvs-plus-bank button { padding: 6px 8px; border: 0; border-radius: 9px; background: #fff0f3; color: var(--wvs-primary-dark); font-size: 10px; font-weight: 900; }
.wvs-plus-bank .is-transfer { border: 1px dashed rgba(255,123,143,.35); background: #fff8fa; }
.wvs-plus-bank .is-transfer strong { color: var(--wvs-primary-dark); font-size: 16px; letter-spacing: .04em; }
.wvs-plus-note { margin-top: 13px; padding: 11px 13px; border-radius: 14px; background: #fff6d8; color: #735b1f; font-size: 11px; line-height: 1.55; }
.wvs-plus-actions { display: flex; justify-content: center; gap: 10px; margin-top: 13px; flex-wrap: wrap; }
.wvs-facebook-button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 12px 17px; border-radius: 16px; background: #1877f2; color: #fff !important; font-weight: 950; text-decoration: none !important; box-shadow: 0 12px 23px rgba(24,119,242,.2); }
.wvs-facebook-button:hover { color: #fff !important; transform: translateY(-2px); }
.wvs-plus-tip { margin: 11px auto 0; max-width: 700px; color: var(--wvs-muted); font-size: 10px; line-height: 1.5; text-align: center; }

/* tiny playful movement without changing the existing layout */
.wugan-hsk-classroom-app button:active,
.wugan-hsk-classroom-app a.wvs-facebook-button:active { transform: translateY(1px) scale(.985); }
.wvs-quiz-feedback.is-correct { animation: wvs-cute-correct .38s ease both; }
.wvs-quiz-feedback.is-wrong { animation: wvs-cute-wrong .32s ease both; }
@keyframes wvs-cute-correct { 45% { transform: scale(1.025); } }
@keyframes wvs-cute-wrong { 25% { transform: translateX(-4px); } 55% { transform: translateX(4px); } }

.wvs-shell[data-layout="mobile"] .wvs-plus-plans,
.wvs-shell[data-layout="mobile"] .wvs-plus-checkout { grid-template-columns: 1fr; }
.wvs-shell[data-layout="mobile"] .wvs-plus-bank > div { grid-template-columns: 1fr auto; }
.wvs-shell[data-layout="mobile"] .wvs-plus-bank span { grid-column: 1 / -1; }
.wvs-shell[data-layout="mobile"] .wvs-plus-card { padding: 18px 13px; border-radius: 22px; }
.wvs-shell[data-layout="tablet"] .wvs-plus-plans { grid-template-columns: repeat(3,minmax(0,1fr)); }

@media (max-width: 760px) {
    .wvs-plus-plans, .wvs-plus-checkout { grid-template-columns: 1fr; }
    .wvs-plus-plan { min-height: 132px; }
    .wvs-plus-bank > div { grid-template-columns: 1fr auto; }
    .wvs-plus-bank span { grid-column: 1 / -1; }
    .wvs-plus-card { padding: 19px 14px; }
    .wvs-plus-hero { padding-left: 32px; padding-right: 32px; }
}

/* =========================================================
 * v1.3.0 — Khu vực Tự học theo cấp độ
 * ======================================================= */
.wvs-main-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 18px;
    padding: 6px;
    border: 1px solid rgba(64,72,82,.1);
    border-radius: 18px;
    background: rgba(255,255,255,.72);
    box-shadow: 0 8px 24px rgba(75,62,66,.06);
}
.wvs-main-tabs button {
    min-height: 46px;
    padding: 10px 16px;
    border: 0;
    border-radius: 13px;
    background: transparent;
    color: var(--wvs-muted);
    font-size: 13px;
    font-weight: 900;
    transition: transform .16s ease, background .16s ease, box-shadow .16s ease, color .16s ease;
}
.wvs-main-tabs button:hover { transform: translateY(-1px); background: #fff7f9; color: var(--wvs-primary-dark); }
.wvs-main-tabs button.is-active {
    background: linear-gradient(135deg, #ff8297, #ffad7d);
    color: #fff;
    box-shadow: 0 10px 22px rgba(255,123,143,.25);
}
.wvs-main-panel[hidden] { display: none !important; }
.wvs-course-app { display: grid; gap: 18px; }
.wvs-course-hero {
    display: grid;
    grid-template-columns: minmax(0,1.4fr) minmax(300px,.6fr);
    gap: 18px;
    align-items: center;
    padding: 26px;
    border: 1px solid rgba(111,201,232,.18);
    border-radius: 25px;
    background:
        radial-gradient(circle at 93% 10%, rgba(127,215,174,.2), transparent 30%),
        radial-gradient(circle at 5% 10%, rgba(255,216,107,.24), transparent 28%),
        linear-gradient(135deg,#fff,#f3fbff);
    box-shadow: 0 14px 34px rgba(75,62,66,.08);
}
.wvs-course-kicker { color: var(--wvs-primary-dark); font-size: 10px; font-weight: 950; letter-spacing: .16em; }
.wvs-course-hero h3 { margin: 5px 0 7px; font-size: clamp(26px,4vw,39px); line-height: 1.12; }
.wvs-course-hero p { max-width: 680px; margin: 0; color: var(--wvs-muted); font-size: 13px; }
.wvs-course-unlock-summary { display: grid; gap: 9px; }
.wvs-course-unlock-summary > div {
    display: grid;
    gap: 2px;
    padding: 12px 14px;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(75,62,66,.06);
}
.wvs-course-unlock-summary > div strong { font-size: 12px; }
.wvs-course-unlock-summary > div span { color: var(--wvs-muted); font-size: 10px; }
.wvs-course-unlock-summary .is-open { border: 1px solid rgba(127,215,174,.42); background: #effcf5; }
.wvs-course-unlock-summary .is-locked { border: 1px solid rgba(169,148,239,.25); background: #f8f5ff; }
.wvs-level-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.wvs-level-card {
    position: relative;
    display: grid;
    grid-template-columns: 54px minmax(0,1fr);
    gap: 13px;
    min-height: 185px;
    padding: 18px;
    overflow: hidden;
    border: 1px solid rgba(64,72,82,.1);
    border-radius: 22px;
    background: #fff;
    color: var(--wvs-ink);
    text-align: left;
    box-shadow: 0 12px 28px rgba(75,62,66,.07);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.wvs-level-card::after {
    position: absolute;
    top: -30px;
    right: -28px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(255,255,255,.42);
    content: "";
}
.wvs-level-card:hover { transform: translateY(-4px) rotate(-.25deg); border-color: rgba(255,123,143,.28); box-shadow: 0 18px 34px rgba(75,62,66,.11); }
.wvs-level-card.is-mint { background: linear-gradient(145deg,#eefff8,#fff); }
.wvs-level-card.is-peach { background: linear-gradient(145deg,#fff3e7,#fff); }
.wvs-level-card.is-sky { background: linear-gradient(145deg,#effaff,#fff); }
.wvs-level-card.is-lavender { background: linear-gradient(145deg,#f5f1ff,#fff); }
.wvs-level-card.is-rose { background: linear-gradient(145deg,#fff1f5,#fff); }
.wvs-level-card.is-gold { background: linear-gradient(145deg,#fff8d9,#fff); }
.wvs-level-card.is-indigo { background: linear-gradient(145deg,#eef0ff,#fff); }
.wvs-level-badge {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border: 3px solid rgba(255,255,255,.8);
    border-radius: 18px;
    background: linear-gradient(145deg,#ff8aa0,#ffbc7c);
    color: #fff;
    font-size: 22px;
    font-weight: 950;
    box-shadow: 0 8px 18px rgba(255,123,143,.22);
}
.wvs-level-card > div:nth-child(2) { min-width: 0; }
.wvs-level-card strong { display: block; margin: 2px 0 5px; font-size: 19px; }
.wvs-level-card p { margin: 0; color: var(--wvs-muted); font-size: 11px; line-height: 1.55; }
.wvs-level-progress { grid-column: 1/-1; display: grid; gap: 5px; margin-top: auto; }
.wvs-level-progress i { height: 7px; overflow: hidden; border-radius: 99px; background: rgba(64,72,82,.08); }
.wvs-level-progress b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--wvs-primary),#ffbd7d); }
.wvs-level-progress span { color: var(--wvs-muted); font-size: 10px; font-weight: 800; }
.wvs-course-source-note {
    display: grid;
    gap: 4px;
    padding: 15px 17px;
    border: 1px dashed rgba(111,201,232,.35);
    border-radius: 17px;
    background: rgba(241,251,255,.72);
    color: var(--wvs-muted);
    font-size: 11px;
    line-height: 1.55;
}
.wvs-course-source-note strong { color: var(--wvs-ink); }
.wvs-course-source-note div { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 3px; }
.wvs-course-source-note a { padding: 5px 8px; border-radius: 9px; background: #fff; color: #25789a; font-weight: 850; text-decoration: none; }
.wvs-course-breadcrumb { display: flex; align-items: center; gap: 8px; color: var(--wvs-muted); font-size: 12px; }
.wvs-course-breadcrumb button { padding: 7px 10px; border: 0; border-radius: 10px; background: #fff; color: var(--wvs-primary-dark); font-weight: 900; box-shadow: 0 5px 12px rgba(75,62,66,.06); }
.wvs-course-level-head {
    display: grid;
    grid-template-columns: 72px minmax(0,1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 22px;
    border: 1px solid rgba(64,72,82,.1);
    border-radius: 23px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(75,62,66,.07);
}
.wvs-course-level-head.is-mint { background: linear-gradient(145deg,#edfff7,#fff); }
.wvs-course-level-head.is-peach { background: linear-gradient(145deg,#fff0e4,#fff); }
.wvs-course-level-head.is-sky { background: linear-gradient(145deg,#eaf9ff,#fff); }
.wvs-course-level-head.is-lavender { background: linear-gradient(145deg,#f2edff,#fff); }
.wvs-course-level-head.is-rose { background: linear-gradient(145deg,#ffedf3,#fff); }
.wvs-course-level-head.is-gold { background: linear-gradient(145deg,#fff6ce,#fff); }
.wvs-course-level-head.is-indigo { background: linear-gradient(145deg,#e9edff,#fff); }
.wvs-course-level-head .wvs-level-badge { width: 68px; height: 68px; border-radius: 21px; font-size: 27px; }
.wvs-course-level-head > div > span { color: var(--wvs-primary-dark); font-size: 9px; font-weight: 950; letter-spacing: .14em; }
.wvs-course-level-head h3 { margin: 3px 0 5px; font-size: 29px; }
.wvs-course-level-head p { margin: 0; color: var(--wvs-muted); font-size: 12px; }
.wvs-course-level-score { display: grid; min-width: 90px; gap: 2px; padding: 12px; border-radius: 16px; background: rgba(255,255,255,.76); text-align: center; }
.wvs-course-level-score strong { font-size: 24px; }
.wvs-course-level-score span { color: var(--wvs-muted); font-size: 10px; }
.wvs-course-lessons { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.wvs-course-lesson-card {
    display: grid;
    grid-template-columns: 44px minmax(0,1fr) auto;
    gap: 12px;
    align-items: center;
    min-height: 115px;
    padding: 15px;
    border: 1px solid rgba(64,72,82,.1);
    border-radius: 19px;
    background: #fff;
    color: var(--wvs-ink);
    text-align: left;
    box-shadow: 0 8px 20px rgba(75,62,66,.06);
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.wvs-course-lesson-card:hover { transform: translateY(-2px); border-color: rgba(255,123,143,.3); box-shadow: 0 13px 26px rgba(75,62,66,.09); }
.wvs-course-lesson-card.is-complete { border-color: rgba(127,215,174,.45); background: linear-gradient(145deg,#effcf5,#fff); }
.wvs-lesson-number { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 15px; background: #fff0f3; color: var(--wvs-primary-dark); font-weight: 950; }
.wvs-course-lesson-card.is-complete .wvs-lesson-number { background: #dff7eb; color: #147351; }
.wvs-course-lesson-card strong { font-size: 14px; }
.wvs-course-lesson-card p { margin: 3px 0; color: var(--wvs-muted); font-size: 10px; line-height: 1.4; }
.wvs-course-lesson-card small { color: #819097; font-size: 9px; }
.wvs-lesson-result { max-width: 90px; color: var(--wvs-primary-dark); font-size: 10px; font-weight: 900; text-align: right; }
.wvs-course-lesson-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding: 20px 22px;
    border-radius: 22px;
    background: linear-gradient(135deg,#fff,#fff6f8);
    border: 1px solid rgba(255,123,143,.15);
}
.wvs-course-lesson-head span { color: var(--wvs-primary-dark); font-size: 9px; font-weight: 950; letter-spacing: .13em; }
.wvs-course-lesson-head h3 { margin: 3px 0 4px; font-size: 27px; }
.wvs-course-lesson-head p { margin: 0; color: var(--wvs-muted); font-size: 11px; }
.wvs-course-lesson-meta { display: grid; min-width: 130px; gap: 2px; padding: 11px 13px; border-radius: 15px; background: #fff; text-align: center; }
.wvs-course-lesson-meta strong { font-size: 18px; }
.wvs-course-lesson-meta span { color: var(--wvs-muted); letter-spacing: normal; font-size: 9px; }
.wvs-course-study-layout { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(300px,.55fr); gap: 16px; }
.wvs-course-flashcard-panel,
.wvs-course-practice-panel {
    padding: 18px;
    border: 1px solid rgba(64,72,82,.1);
    border-radius: 23px;
    background: rgba(255,255,255,.88);
    box-shadow: 0 12px 28px rgba(75,62,66,.07);
}
.wvs-course-flashcard { width: min(100%, 470px); min-height: 560px; }
.wvs-course-flashcard .wvs-flash-inner,
.wvs-course-flashcard .wvs-flash-face { min-height: 560px; }
.wvs-course-flashcard .wvs-hanzi { font-size: clamp(62px,9vw,92px); }
.wvs-course-flashcard .wvs-hanzi.is-small { font-size: 40px; }
.wvs-course-flashcard .wvs-meaning { margin: 8px 0 10px; font-size: 22px; font-weight: 950; color: var(--wvs-primary-dark); }
.wvs-course-examples { display: grid; width: 100%; max-width: 500px; gap: 8px; }
.wvs-course-examples > h4 { margin: 2px 0 0; color: var(--wvs-ink); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.wvs-course-example { display: grid; grid-template-columns: minmax(0,1fr) 40px; gap: 9px; width: 100%; max-width: 500px; padding: 12px; border-radius: 16px; background: #fff6f2; text-align: left; }
.wvs-course-example small { display: block; margin-bottom: 2px; color: var(--wvs-primary-dark); font-size: 8px; font-weight: 950; letter-spacing: .1em; }
.wvs-course-example strong { display: block; font-size: 15px; }
.wvs-course-example span { display: block; color: #7d8990; font-size: 11px; }
.wvs-course-example p { margin: 3px 0 0; color: var(--wvs-muted); font-size: 11px; }
.wvs-course-example button { display: grid; width: 38px; height: 38px; place-items: center; border: 0; border-radius: 50%; background: #fff; color: var(--wvs-primary-dark); }
.wvs-course-example button svg { width: 18px; height: 18px; }
.wvs-card-tip { width: 100%; max-width: 500px; margin-top: 8px; padding: 9px 11px; border-radius: 12px; background: #fff8d9; color: #6d571c; font-size: 10px; }
.wvs-study-checkin.is-course { margin-top: 13px; }
.wvs-course-complete-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 17px;
    border: 1px solid rgba(127,215,174,.5);
    border-radius: 19px;
    background: linear-gradient(135deg,#effcf5,#fff);
    box-shadow: 0 10px 24px rgba(75,62,66,.06);
}
.wvs-course-complete-navigation > div { display: grid; gap: 3px; }
.wvs-course-complete-navigation strong { color: #147351; font-size: 13px; }
.wvs-course-complete-navigation span { color: var(--wvs-muted); font-size: 10px; line-height: 1.45; }
.wvs-course-complete-navigation button {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 0 16px;
    border: 0;
    border-radius: 14px;
    background: var(--wvs-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 950;
    box-shadow: 0 8px 18px rgba(255,123,143,.22);
}
.wvs-course-complete-navigation button:hover { transform: translateY(-1px); }
.wvs-course-complete-navigation.is-last { border-color: rgba(169,148,239,.3); background: linear-gradient(135deg,#f8f5ff,#fff); }
.wvs-course-complete-navigation.is-last strong { color: #6c56b0; }
.wvs-course-practice-panel { align-content: start; display: grid; gap: 10px; }
.wvs-course-practice-panel h4 { margin: 0 0 4px; font-size: 20px; }
.wvs-practice-option {
    display: grid;
    grid-template-columns: 42px minmax(0,1fr) auto;
    gap: 10px;
    align-items: center;
    width: 100%;
    min-height: 82px;
    padding: 12px;
    border: 1px solid rgba(64,72,82,.1);
    border-radius: 17px;
    background: #fff;
    color: var(--wvs-ink);
    text-align: left;
}
.wvs-practice-option:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(75,62,66,.08); }
.wvs-practice-option > span { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 14px; background: #fff0f3; font-size: 20px; }
.wvs-practice-option strong { display: block; font-size: 12px; }
.wvs-practice-option small { display: block; margin-top: 3px; color: var(--wvs-muted); font-size: 9px; line-height: 1.35; }
.wvs-practice-option em { max-width: 86px; color: var(--wvs-primary-dark); font-size: 9px; font-style: normal; font-weight: 950; text-align: right; }
.wvs-practice-option.is-open { border-color: rgba(127,215,174,.45); background: #f1fcf6; }
.wvs-practice-option.is-locked { border-color: rgba(169,148,239,.2); background: #faf8ff; opacity: .82; }
.wvs-course-premium-note { padding: 10px 11px; border-radius: 13px; background: #f8f5ff; color: var(--wvs-muted); font-size: 9px; line-height: 1.45; }
.wvs-course-quiz-area { scroll-margin-top: 28px; }
.wvs-course-quiz-shell,
.wvs-course-result {
    padding: 22px;
    border: 1px solid rgba(169,148,239,.18);
    border-radius: 23px;
    background: linear-gradient(145deg,#fff,#fbf9ff);
    box-shadow: 0 12px 28px rgba(75,62,66,.07);
}
.wvs-course-quiz-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.wvs-course-quiz-head > div { display: grid; }
.wvs-course-quiz-head span { color: var(--wvs-purple); font-size: 9px; font-weight: 950; letter-spacing: .13em; }
.wvs-course-quiz-head strong { font-size: 16px; }
.wvs-course-quiz-head em { padding: 6px 10px; border-radius: 99px; background: #f1ecff; color: #6c56b0; font-size: 10px; font-style: normal; font-weight: 950; }
.wvs-course-question { display: grid; justify-items: center; max-width: 760px; margin: 20px auto 0; text-align: center; }
.wvs-course-question-hanzi { margin: 4px 0; font-family: "Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif; font-size: clamp(48px,8vw,72px); font-weight: 900; }
.wvs-course-question h4 { margin: 4px 0 15px; color: var(--wvs-muted); font-size: 14px; font-weight: 750; }
.wvs-course-listen { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 7px; padding: 10px 14px; border: 0; border-radius: 14px; background: #fff0f3; color: var(--wvs-primary-dark); font-weight: 900; }
.wvs-course-listen svg { width: 18px; height: 18px; }
.wvs-course-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; width: 100%; }
.wvs-course-options button { min-height: 50px; padding: 10px; border: 2px solid #eee8ff; border-radius: 14px; background: #fff; color: var(--wvs-ink); font-weight: 850; }
.wvs-course-options button:hover:not(:disabled) { border-color: rgba(169,148,239,.55); background: #fbf9ff; }
.wvs-course-options button.is-correct { border-color: #43c98b; background: #e9fbf3; color: #14704c; }
.wvs-course-options button.is-wrong { border-color: #ff8c9e; background: #fff0f3; color: #ac3047; }
.wvs-course-question form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; width: 100%; }
.wvs-course-question form input { min-height: 50px; padding: 10px 13px; border: 2px solid #eee8ff; border-radius: 14px; outline: none; }
.wvs-course-question form input:focus { border-color: var(--wvs-purple); }
.wvs-course-question form input.is-correct { border-color: #43c98b; background: #eefcf5; }
.wvs-course-question form input.is-wrong { border-color: #ff8c9e; background: #fff2f5; }
.wvs-course-question .wvs-quiz-feedback { width: 100%; margin-top: 10px; }
.wvs-course-question .wvs-quiz-feedback small { display: block; margin-top: 4px; font-size: 10px; font-weight: 600; }
.wvs-course-next { margin-top: 10px; }
.wvs-course-pronunciation-card { display: grid; justify-items: center; max-width: 680px; margin: 18px auto 0; text-align: center; }
.wvs-course-pronunciation-card > p { margin: 2px 0 13px; color: var(--wvs-muted); }
.wvs-course-pronunciation-card > div:nth-of-type(3) { display: flex; gap: 9px; flex-wrap: wrap; justify-content: center; }
.wvs-course-result { display: grid; justify-items: center; gap: 5px; text-align: center; }
.wvs-course-result-icon { font-size: 55px; animation: wvs-plus-float 1.8s ease-in-out infinite; }
.wvs-course-result > span { color: var(--wvs-primary-dark); font-size: 9px; font-weight: 950; letter-spacing: .14em; }
.wvs-course-result h3 { margin: 0; font-size: 29px; }
.wvs-course-result p { max-width: 570px; margin: 0 0 10px; color: var(--wvs-muted); font-size: 12px; }
.wvs-course-result > div:last-child { display: flex; gap: 9px; flex-wrap: wrap; justify-content: center; }

.wvs-shell[data-layout="mobile"] .wvs-main-tabs,
.wvs-shell[data-layout="mobile"] .wvs-level-grid,
.wvs-shell[data-layout="mobile"] .wvs-course-lessons,
.wvs-shell[data-layout="mobile"] .wvs-course-study-layout,
.wvs-shell[data-layout="mobile"] .wvs-course-hero { grid-template-columns: 1fr; }
.wvs-shell[data-layout="mobile"] .wvs-course-level-head { grid-template-columns: 58px minmax(0,1fr); }
.wvs-shell[data-layout="mobile"] .wvs-course-level-score { grid-column: 1/-1; }
.wvs-shell[data-layout="mobile"] .wvs-course-lesson-card { grid-template-columns: 38px minmax(0,1fr); }
.wvs-shell[data-layout="mobile"] .wvs-lesson-result { grid-column: 2; max-width: none; text-align: left; }
.wvs-shell[data-layout="mobile"] .wvs-course-options { grid-template-columns: 1fr; }
.wvs-shell[data-layout="mobile"] .wvs-course-question form { grid-template-columns: 1fr; }
.wvs-shell[data-layout="tablet"] .wvs-level-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.wvs-shell[data-layout="tablet"] .wvs-course-study-layout { grid-template-columns: 1fr; }

@media (max-width: 940px) {
    .wvs-level-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .wvs-course-hero, .wvs-course-study-layout { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
    .wvs-main-tabs, .wvs-level-grid, .wvs-course-lessons { grid-template-columns: 1fr; }
    .wvs-main-tabs button { min-height: 42px; font-size: 11px; }
    .wvs-course-hero { padding: 19px; }
    .wvs-course-level-head { grid-template-columns: 58px minmax(0,1fr); padding: 16px; }
    .wvs-course-level-head .wvs-level-badge { width: 56px; height: 56px; }
    .wvs-course-level-score { grid-column: 1/-1; }
    .wvs-course-lesson-head { align-items: flex-start; flex-direction: column; }
    .wvs-course-lesson-meta { width: 100%; }
    .wvs-course-lesson-card { grid-template-columns: 38px minmax(0,1fr); }
    .wvs-lesson-result { grid-column: 2; max-width: none; text-align: left; }
    .wvs-course-options { grid-template-columns: 1fr; }
    .wvs-course-question form { grid-template-columns: 1fr; }
    .wvs-course-complete-navigation { align-items: stretch; flex-direction: column; }
    .wvs-course-complete-navigation button { width: 100%; }
    .wvs-course-flashcard { min-height: 520px; }
    .wvs-course-flashcard .wvs-flash-inner,
    .wvs-course-flashcard .wvs-flash-face { min-height: 520px; }
}
.wvs-plus-benefits { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin:0 0 14px; }
.wvs-plus-benefits > strong { grid-column:1/-1; font-size:12px; }
.wvs-plus-benefits > div { display:grid; grid-template-columns:32px minmax(0,1fr); gap:8px; padding:10px; border:1px solid rgba(127,215,174,.28); border-radius:14px; background:#f4fcf8; }
.wvs-plus-benefits > div > span { font-size:20px; }
.wvs-plus-benefits p { margin:0; }
.wvs-plus-benefits b { display:block; font-size:10px; }
.wvs-plus-benefits small { display:block; margin-top:2px; color:var(--wvs-muted); font-size:9px; line-height:1.35; }
.wvs-shell[data-layout="mobile"] .wvs-plus-benefits { grid-template-columns:1fr; }
@media(max-width:760px){.wvs-plus-benefits{grid-template-columns:1fr}}

/* v1.3.4 - flashcard hai mặt và nội dung ví dụ đầy đủ */
.wvs-course-flashcard .wvs-hanzi {
    font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-weight: 900;
    line-height: 1.08;
    text-align: center;
}
.wvs-course-flashcard .wvs-pinyin {
    margin-top: 2px;
    color: #6d7880;
    font-size: 16px;
    font-weight: 800;
    text-align: center;
}
.wvs-course-flashcard .wvs-pos {
    align-self: center;
    margin-top: 5px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #e9f8ff;
    color: #34758c;
    font-size: 9px;
    font-weight: 950;
}
.wvs-course-flashcard .wvs-flip-hint {
    color: var(--wvs-muted);
    font-size: 12px;
    font-weight: 750;
}
.wvs-course-flashcard .wvs-flash-face.is-back {
    align-items: center;
    gap: 4px;
}

/* v1.3.5 - khóa bài theo khóa HSK, 3 vòng học và bảng mua khóa */
.wvs-course-access-notice {
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    margin:12px 0 15px; padding:14px 16px; border-radius:17px;
    border:1px solid rgba(255,123,143,.22); background:#fff8f2;
}
.wvs-course-access-notice > div { display:grid; gap:3px; }
.wvs-course-access-notice strong { font-size:13px; }
.wvs-course-access-notice span { color:var(--wvs-muted); font-size:10px; line-height:1.45; }
.wvs-course-access-notice button,
.wvs-course-paywall button {
    border:0; border-radius:999px; padding:10px 15px; color:#fff;
    background:linear-gradient(135deg,#ff708a,#ff9b72); font-weight:900; font-size:10px;
    box-shadow:0 8px 18px rgba(255,112,138,.2); cursor:pointer; white-space:nowrap;
}
.wvs-course-access-notice.is-open { background:#effbf5; border-color:rgba(76,190,137,.25); }
.wvs-course-access-notice.is-round { background:#f5f1ff; border-color:rgba(145,112,232,.25); }
.wvs-course-access-notice.is-exhausted { background:#f3f4f6; border-color:#e2e5e9; }
.wvs-course-lesson-card.is-locked { opacity:.72; background:#f8f8f9; border-style:dashed; }
.wvs-course-lesson-card.is-locked:hover { transform:none; box-shadow:none; }
.wvs-course-lesson-card.is-locked .wvs-lesson-number { background:#eceff2; color:#7c858c; }
.wvs-course-paywall {
    display:grid; justify-items:center; gap:9px; max-width:620px; margin:24px auto;
    padding:35px 26px; text-align:center; border:1px solid rgba(255,123,143,.2);
    border-radius:24px; background:linear-gradient(145deg,#fff7ed,#fff5fa);
}
.wvs-course-paywall > span { font-size:38px; }
.wvs-course-paywall h3 { margin:0; font-size:23px; }
.wvs-course-paywall p { max-width:500px; margin:0 0 5px; color:var(--wvs-muted); line-height:1.6; }
.wvs-plus-plan-section { margin:14px 0; }
.wvs-plus-plan-section h4 { margin:0 0 8px; font-size:12px; }
.wvs-plus-plans.is-course-plans { grid-template-columns:repeat(4,minmax(0,1fr)); }
.wvs-course-round-warning {
    margin:12px 0; padding:11px 13px; border-radius:13px; background:#fff7d9;
    color:#765c14; font-size:10px; font-weight:750; line-height:1.5;
}
@media(max-width:980px){.wvs-plus-plans.is-course-plans{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:680px){
    .wvs-course-access-notice{align-items:flex-start; flex-direction:column;}
    .wvs-course-access-notice button{width:100%;}
    .wvs-plus-plans.is-course-plans{grid-template-columns:1fr;}
}

/* v1.3.5 — examples are corpus-based; never fabricate a misleading sentence. */
.wvs-example-unavailable{padding:14px 16px;border:1px dashed #f3b7c3;border-radius:14px;background:#fff8fa;color:#8b5260;font-size:13px;line-height:1.55}

/* WUGAN 1.5.6: learner-selectable speed for each HSK lesson. */
.wvs-course-lesson-side {
    display: grid;
    min-width: 245px;
    gap: 9px;
}
.wvs-course-audio-rate-control {
    display: grid;
    gap: 5px;
    padding: 10px 12px;
    border: 1px solid rgba(255,123,143,.18);
    border-radius: 15px;
    background: rgba(255,255,255,.92);
}
.wvs-course-audio-rate-control > span {
    color: var(--wvs-ink);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: normal;
}
.wvs-course-audio-rate-control select {
    width: 100%;
    min-height: 34px;
    padding: 6px 30px 6px 9px;
    border: 1px solid rgba(64,72,82,.16);
    border-radius: 10px;
    background: #fff;
    color: var(--wvs-ink);
    font: inherit;
    font-size: 11px;
    font-weight: 800;
}
.wvs-course-audio-rate-control small {
    color: var(--wvs-muted);
    font-size: 8px;
    line-height: 1.4;
}
.wvs-shell[data-layout="mobile"] .wvs-course-lesson-side,
.wvs-shell[data-layout="tablet"] .wvs-course-lesson-side { width: 100%; min-width: 0; }
@media (max-width: 680px) {
    .wvs-course-lesson-side { width: 100%; min-width: 0; }
}

/* Khóa học Online: chỉ hiển thị lộ trình khóa học theo lớp. */
.wugan-hsk-classroom-app .wvs-main-tabs,
.wugan-hsk-classroom-app [data-main-panel="streak"],
.wugan-hsk-classroom-app [data-action="reward"] { display: none !important; }
.wugan-hsk-classroom-app [data-main-panel="levels"] { display: block !important; }
.wvs-manager-link { display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 14px;border-radius:12px;background:#eef2ff;color:#3730a3;font-weight:800;text-decoration:none; }
.wvs-manager-link:hover { background:#e0e7ff;color:#312e81; }

.wvs-video-lesson { margin:18px 0 22px;padding:18px;border:1px solid #e5e7eb;border-radius:18px;background:linear-gradient(135deg,#fff,#f8fafc);box-shadow:0 10px 28px rgba(15,23,42,.06); }
.wvs-video-lesson-head { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px; }
.wvs-video-lesson-head span { display:block;color:#7c3aed;font-size:12px;font-weight:900;letter-spacing:.08em; }
.wvs-video-lesson-head h4 { margin:4px 0 0;font-size:20px; }
.wvs-video-lesson-head em { padding:5px 10px;border-radius:99px;background:#ede9fe;color:#5b21b6;font-style:normal;font-weight:800; }
.wvs-video-layout { display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px; }
.wvs-video-player-wrap { position:relative;min-width:0;aspect-ratio:16/9;background:#050505;border-radius:16px;overflow:hidden;user-select:none;-webkit-user-select:none; }
.wvs-video-player,.wvs-video-player iframe { width:100%;height:100%;border:0;display:block; }
.wvs-video-watermark { position:absolute;z-index:5;left:12%;top:12%;max-width:52%;padding:7px 10px;border-radius:8px;background:rgba(15,23,42,.42);color:#fff;opacity:.6;pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.8);transition:left .8s ease,top .8s ease; }
.wvs-video-watermark strong,.wvs-video-watermark span { display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.wvs-video-watermark strong { font-size:13px; }
.wvs-video-watermark span { font-size:11px;margin-top:2px; }
.wvs-video-list { display:flex;flex-direction:column;gap:8px;max-height:430px;overflow:auto; }
.wvs-video-list button { display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center;width:100%;padding:10px;text-align:left;border:1px solid #e5e7eb;border-radius:12px;background:#fff;color:#1f2937;cursor:pointer; }
.wvs-video-list button>span { display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#f3f4f6;font-weight:900; }
.wvs-video-list button strong,.wvs-video-list button small { display:block; }
.wvs-video-list button small { margin-top:3px;color:#64748b; }
.wvs-video-list button.is-active { border-color:#8b5cf6;background:#f5f3ff;box-shadow:0 0 0 2px rgba(139,92,246,.12); }
.wvs-video-list button.is-active>span { background:#7c3aed;color:#fff; }
.wvs-video-security-note { margin:12px 0 0;color:#64748b;font-size:12px; }
.wvs-video-confirm { position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:6;padding:8px 12px;border:0;border-radius:10px;background:rgba(255,255,255,.92);font-weight:800;cursor:pointer; }

@media (max-width: 900px) {
  .wvs-video-layout { grid-template-columns:1fr; }
  .wvs-video-list { max-height:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .wvs-video-lesson { padding:12px; }
  .wvs-video-list { grid-template-columns:1fr; }
  .wvs-video-watermark { max-width:72%;font-size:11px; }
}
.wvs-video-fullscreen{position:absolute;right:10px;top:10px;z-index:7;padding:7px 10px;border:0;border-radius:9px;background:rgba(15,23,42,.72);color:#fff;font-weight:800;cursor:pointer}.wvs-video-player-wrap:fullscreen{width:100vw;height:100vh;aspect-ratio:auto;border-radius:0}.wvs-video-player-wrap:fullscreen .wvs-video-player{width:100%;height:100%}

/* ========================================================================
 * KHÓA HỌC ONLINE — lớp giao diện nền
 * ===================================================================== */
.wugan-hsk-classroom-app {
    --wvs-ink: #17131f;
    --wvs-muted: #686371;
    --wvs-primary: #6f2dbd;
    --wvs-primary-dark: #4d1d88;
    --wvs-purple: #7b3fd0;
    --wvs-blue: #4f73c8;
    --wvs-green: #218b6b;
    --wvs-yellow: #b89655;
    --wvs-soft: #f7f5fa;
    --wvs-border: rgba(31, 23, 43, .13);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
}
.wugan-hsk-classroom-app .wvs-shell {
    width: min(1240px, calc(100% - 28px));
    padding: clamp(18px, 3vw, 34px);
    border: 1px solid #dfdbe5;
    border-radius: 6px;
    background: linear-gradient(180deg, #ffffff 0%, #faf9fc 100%);
    box-shadow: 0 18px 55px rgba(29, 20, 42, .10);
}
.wugan-hsk-classroom-app .wvs-shell::before,
.wugan-hsk-classroom-app .wvs-shell::after { display: none; }
.wugan-hsk-classroom-app .wvs-header {
    margin-bottom: 26px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ded9e5;
}
.wugan-hsk-classroom-app .wvs-mini-mascot {
    width: 54px;
    height: 54px;
    border: 0;
    border-radius: 3px;
    background: linear-gradient(145deg, #4b187f, #7c39c8);
    color: #fff;
    box-shadow: 0 10px 24px rgba(79, 30, 133, .20);
    transform: none;
}
.wugan-hsk-classroom-app .wvs-kicker,
.wugan-hsk-classroom-app .wvs-course-kicker { color: #6a2caf; letter-spacing: .13em; }
.wugan-hsk-classroom-app .wvs-header h2,
.wugan-hsk-classroom-app .wvs-auth-hero h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
    letter-spacing: -.02em;
}
.wugan-hsk-classroom-app .wvs-primary,
.wugan-hsk-classroom-app .wvs-secondary,
.wugan-hsk-classroom-app .wvs-ghost,
.wugan-hsk-classroom-app .wvs-complete-button,
.wugan-hsk-classroom-app .wvs-study-nav button,
.wugan-hsk-classroom-app .wvs-icon-button,
.wugan-hsk-classroom-app .wvs-manager-link {
    border-radius: 4px;
}
.wugan-hsk-classroom-app .wvs-primary,
.wugan-hsk-classroom-app .wvs-complete-button {
    background: linear-gradient(135deg, #54208f, #7737c0) !important;
    box-shadow: 0 10px 22px rgba(85, 33, 144, .20);
}
.wugan-hsk-classroom-app .wvs-secondary,
.wugan-hsk-classroom-app .wvs-ghost {
    border-color: rgba(83, 34, 139, .22) !important;
    color: #54208f !important;
}
.wugan-hsk-classroom-app .wvs-message,
.wugan-hsk-classroom-app .wvs-stat,
.wugan-hsk-classroom-app .wvs-level-card,
.wugan-hsk-classroom-app .wvs-course-lesson-card,
.wugan-hsk-classroom-app .wvs-course-paywall,
.wugan-hsk-classroom-app .wvs-course-result,
.wugan-hsk-classroom-app .wvs-course-quiz-shell,
.wugan-hsk-classroom-app .wvs-course-flashcard-panel,
.wugan-hsk-classroom-app .wvs-course-practice-panel,
.wugan-hsk-classroom-app .wvs-flash-face,
.wugan-hsk-classroom-app .wvs-course-example,
.wugan-hsk-classroom-app .wvs-course-audio-rate-control {
    border-radius: 5px;
}
.wugan-hsk-classroom-app .wvs-course-lesson-head {
    padding: 24px 0 22px;
    border-top: 3px solid #5f269d;
    border-bottom: 1px solid #ded9e5;
    background: transparent;
}
.wugan-hsk-classroom-app .wvs-course-lesson-head h3 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.12;
}
.wco-lesson-title-hanzi { margin: 7px 0 0; font-size: clamp(22px, 3vw, 32px); color: #28212f; }
.wco-lesson-title-vi { margin: 4px 0 0 !important; color: #6c6672 !important; font-size: 15px; }
.wugan-hsk-classroom-app .wvs-course-audio-rate-control {
    border-color: #d8d2df;
    background: #fff;
}
.wugan-hsk-classroom-app .wvs-course-audio-rate-control select { border-radius: 3px; }

/* Accordion bài học */
.wco-lesson-modules { display: grid; gap: 14px; margin-top: 22px; }
.wco-lesson-module {
    overflow: hidden;
    border: 1px solid #dcd7e2;
    border-left: 3px solid #5c2698;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(31, 21, 44, .045);
}
.wco-module-toggle {
    display: grid;
    grid-template-columns: 52px minmax(0,1fr) 30px;
    align-items: center;
    gap: 15px;
    width: 100%;
    min-height: 82px;
    padding: 15px 20px;
    border: 0;
    background: #fff;
    color: #211a29;
    text-align: left;
}
.wco-module-toggle:hover { background: #faf8fc; }
.wco-module-index {
    color: #9a7a3f;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 25px;
    line-height: 1;
}
.wco-module-toggle strong { display: block; font-size: 18px; letter-spacing: -.01em; }
.wco-module-toggle small { display: block; margin-top: 4px; color: #746e7a; font-size: 12px; }
.wco-module-chevron { color: #5d2698; font-size: 24px; text-align: center; transition: transform .2s ease; }
.wco-lesson-module.is-open .wco-module-chevron { transform: rotate(180deg); }
.wco-module-body { padding: 20px; border-top: 1px solid #e3dfe7; background: #fcfbfd; }
.wco-module-body[hidden] { display: none !important; }
.wco-module-empty { padding: 28px; border: 1px dashed #cfc8d6; background: #fff; color: #746e79; text-align: center; }
.wco-practice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.wugan-hsk-classroom-app .wvs-course-practice-panel { padding: 0; border: 0; background: transparent; box-shadow: none; }
.wugan-hsk-classroom-app .wvs-practice-option {
    min-height: 86px;
    border-radius: 3px;
    border-color: #d8d2df;
    background: #fff;
}
.wugan-hsk-classroom-app .wvs-practice-option > span {
    border-radius: 2px;
    background: #f0e9f7;
    color: #5d2698;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
}
.wugan-hsk-classroom-app .wvs-practice-option em { color: #5d2698; }

/* Video bài giảng và lớp che liên kết YouTube */
.wugan-hsk-classroom-app .wvs-video-lesson {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.wugan-hsk-classroom-app .wvs-video-lesson-head { padding-bottom: 14px; border-bottom: 1px solid #ded9e5; }
.wugan-hsk-classroom-app .wvs-video-lesson-head span { color: #6329a4; }
.wugan-hsk-classroom-app .wvs-video-lesson-head em { border-radius: 3px; background: #eee7f5; color: #53218d; }
.wugan-hsk-classroom-app .wvs-video-player-wrap { border-radius: 3px; box-shadow: 0 14px 34px rgba(16, 10, 24, .16); }
.wugan-hsk-classroom-app .wvs-video-fullscreen {
    right: 12px;
    top: 12px;
    z-index: 30;
    border-radius: 3px;
    background: rgba(69, 25, 120, .92);
}
.wugan-hsk-classroom-app .wvs-video-watermark { z-index: 25; border-radius: 3px; background: rgba(22, 16, 29, .58); opacity: .6; }
.wvs-youtube-top-mask {
    position: absolute;
    z-index: 20;
    top: 0;
    left: 0;
    width: min(72%, 760px);
    height: 76px;
    background: linear-gradient(110deg, rgba(9,7,12,.98) 0%, rgba(9,7,12,.92) 68%, rgba(9,7,12,0) 100%);
    pointer-events: auto;
}
.wvs-youtube-link-mask {
    position: absolute;
    z-index: 24;
    right: 0;
    bottom: 0;
    width: min(38%, 410px);
    height: 110px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 15px 18px;
    background: linear-gradient(315deg, rgba(13,10,17,.99) 0%, rgba(13,10,17,.96) 55%, rgba(13,10,17,0) 100%);
    color: rgba(255,255,255,.72);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .11em;
    pointer-events: auto;
}
.wvs-video-player-wrap:fullscreen .wvs-youtube-top-mask,
.wvs-video-player-wrap:-webkit-full-screen .wvs-youtube-top-mask { height: 105px; width: 68%; }
.wvs-video-player-wrap:fullscreen .wvs-youtube-link-mask,
.wvs-video-player-wrap:-webkit-full-screen .wvs-youtube-link-mask { width: 42%; height: 160px; }
.wugan-hsk-classroom-app .wvs-video-list button { border-radius: 3px; }
.wugan-hsk-classroom-app .wvs-video-list button > span { border-radius: 2px; }
.wugan-hsk-classroom-app .wvs-video-list button.is-active { border-color: #6d2eaf; background: #f3eef8; box-shadow: inset 3px 0 0 #6d2eaf; }
.wugan-hsk-classroom-app .wvs-video-list button.is-active > span { background: #5b2497; }

/* Bài tập đặt câu */
.wco-sentence-card { padding: clamp(16px,3vw,28px); border: 1px solid #dcd7e2; background: #fff; }
.wco-sentence-word { display: grid; grid-template-columns: minmax(180px,.8fr) minmax(220px,1.2fr); gap: 18px; padding-bottom: 18px; border-bottom: 1px solid #e2dde7; }
.wco-sentence-word span { display: block; color: #7d6592; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.wco-sentence-word strong { display: block; margin-top: 5px; font-size: 42px; line-height: 1.1; }
.wco-sentence-word small { display: block; margin-top: 5px; color: #5f269e; font-size: 15px; }
.wco-sentence-word em { display: inline-block; padding: 3px 7px; border: 1px solid #d8cde3; border-radius: 2px; color: #5b288f; font-style: normal; font-size: 11px; }
.wco-sentence-word p { margin: 8px 0 0; color: #4f4955; }
.wco-sentence-card form { display: grid; gap: 12px; margin-top: 18px; }
.wco-sentence-card form label { color: #2a2330; font-weight: 800; }
.wco-sentence-card textarea { width: 100%; margin-top: 8px; padding: 14px; resize: vertical; border: 1px solid #cfc8d7; border-radius: 3px; background: #fdfcfe; color: #1d1724; font-size: 17px; line-height: 1.6; }
.wco-sentence-card textarea:focus { outline: 2px solid rgba(102,42,167,.18); border-color: #6a2ba7; }
.wco-sentence-guidance { padding: 10px 12px; border-left: 3px solid #a38352; background: #faf7f1; color: #68606b; font-size: 12px; }
.wco-sentence-analysis { margin-top: 18px; padding: 18px; border: 1px solid #d8d2df; border-left-width: 4px; background: #fbfafc; }
.wco-sentence-analysis.is-success { border-left-color: #218b6b; }
.wco-sentence-analysis.is-review { border-left-color: #b57b2d; }
.wco-sentence-score { display: flex; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid #e1dce6; }
.wco-sentence-score strong { color: #58228f; font-size: 28px; }
.wco-sentence-score span { color: #5d5663; font-weight: 800; }
.wco-analysis-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 12px; }
.wco-analysis-grid > div { padding: 10px; border: 1px solid #e3dfe7; background: #fff; }
.wco-analysis-grid small,.wco-analysis-grid strong { display: block; }
.wco-analysis-grid small { color: #7b7480; }
.wco-analysis-grid strong { margin-top: 3px; font-size: 13px; }
.wco-sentence-analysis ul { margin: 14px 0 0; padding-left: 20px; color: #5c5661; }
.wco-sentence-analysis li + li { margin-top: 4px; }
.wco-sentence-card > .wvs-course-next { margin-top: 14px; }

/* Ẩn các thành phần thương mại kế thừa không dùng trong plugin lớp học. */
.wugan-hsk-classroom-app .wvs-plus-button,
.wugan-hsk-classroom-app [data-plus-modal],
.wugan-hsk-classroom-app .wvs-plus-benefits,
.wugan-hsk-classroom-app [data-action="buy-plus"] { display: none !important; }

@media (max-width: 780px) {
    .wco-practice-grid,
    .wco-sentence-word,
    .wco-analysis-grid { grid-template-columns: 1fr; }
    .wco-module-toggle { grid-template-columns: 42px minmax(0,1fr) 24px; padding: 13px; }
    .wco-module-body { padding: 13px; }
    .wvs-youtube-top-mask { width: 75%; height: 58px; }
    .wvs-youtube-link-mask { width: 48%; height: 78px; padding: 9px; }
}


/* =========================================================
   Khóa học Online 2.4.0 — White 3D Glass
   Trắng chủ đạo, viền/chi tiết đỏ, chữ đen; font trở về bản cũ.
   ========================================================= */
.wugan-hsk-classroom-app {
    --wvs-ink: #171717;
    --wvs-muted: #6b6b6b;
    --wvs-primary: #a71930;
    --wvs-primary-dark: #821224;
    --wvs-soft: #ffffff;
    --wvs-border: rgba(167,25,48,.18);
    --wco-red: #a71930;
    --wco-red-dark: #821224;
    --wco-line: rgba(167,25,48,.16);
    --wco-glass: rgba(255,255,255,.74);
    --wco-glass-strong: rgba(255,255,255,.92);
    --wco-shadow: 0 24px 65px rgba(20,20,20,.10), 0 4px 12px rgba(20,20,20,.05), inset 0 1px 0 rgba(255,255,255,.96);
    color: #171717;
    font-family: Inter, ui-rounded, "Nunito", "Segoe UI", Arial, sans-serif;
}
.wugan-hsk-classroom-app h1,
.wugan-hsk-classroom-app h2,
.wugan-hsk-classroom-app h3,
.wugan-hsk-classroom-app h4,
.wugan-hsk-classroom-app h5,
.wugan-hsk-classroom-app strong,
.wugan-hsk-classroom-app button,
.wugan-hsk-classroom-app input,
.wugan-hsk-classroom-app textarea,
.wugan-hsk-classroom-app select,
.wugan-hsk-classroom-app [lang="zh-CN"],
.wugan-hsk-classroom-app .wvs-hanzi,
.wugan-hsk-classroom-app .wco-lesson-title-hanzi,
.wugan-hsk-classroom-app .wco-sentence-word strong,
.wugan-hsk-classroom-app .wvs-course-example strong,
.wugan-hsk-classroom-app .wvs-course-question strong {
    font-family: Inter, ui-rounded, "Nunito", "Segoe UI", Arial, sans-serif;
}
.wugan-hsk-classroom-app .wvs-course-flashcard .wvs-hanzi,
.wugan-hsk-classroom-app .wvs-course-question-hanzi {
    font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.wugan-hsk-classroom-app .wvs-shell {
    width: min(1240px, calc(100% - 28px));
    padding: clamp(18px,3vw,34px);
    overflow: visible;
    border: 1px solid rgba(167,25,48,.12);
    border-radius: 34px;
    background:
        radial-gradient(circle at 12% 0%, rgba(255,255,255,.98), rgba(255,255,255,0) 34%),
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,255,255,.70));
    box-shadow: 0 34px 90px rgba(20,20,20,.12), inset 0 1px 0 #fff;
    backdrop-filter: blur(28px) saturate(125%);
    -webkit-backdrop-filter: blur(28px) saturate(125%);
}
.wugan-hsk-classroom-app .wvs-shell::before {
    display:block;
    top:-28px;right:8%;width:170px;height:70px;border:1px solid rgba(167,25,48,.10);border-radius:999px;
    background:rgba(255,255,255,.48);filter:blur(.2px);box-shadow:0 20px 60px rgba(20,20,20,.05);
}
.wugan-hsk-classroom-app .wvs-shell::after { display:none; }
.wugan-hsk-classroom-app .wvs-header {
    margin-bottom:24px;padding:8px 4px 22px;border-bottom:1px solid rgba(167,25,48,.12);
}
.wugan-hsk-classroom-app .wvs-mini-mascot {
    width:58px;height:58px;border:1px solid rgba(167,25,48,.22);border-radius:20px;
    background:rgba(255,255,255,.88);color:var(--wco-red);transform:none;
    box-shadow:0 15px 32px rgba(20,20,20,.10),inset 0 1px 0 #fff;
}
.wugan-hsk-classroom-app .wvs-kicker,
.wugan-hsk-classroom-app .wvs-course-kicker { color:var(--wco-red);letter-spacing:.13em; }
.wugan-hsk-classroom-app .wvs-header h2,
.wugan-hsk-classroom-app .wvs-auth-hero h2 { color:#111;font-weight:900;letter-spacing:-.035em; }

/* Glass 3D shared surfaces */
.wugan-hsk-classroom-app .wvs-course-hero,
.wugan-hsk-classroom-app .wvs-course-level-head,
.wugan-hsk-classroom-app .wvs-course-lesson-head,
.wugan-hsk-classroom-app .wco-lesson-module,
.wugan-hsk-classroom-app .wvs-level-card,
.wugan-hsk-classroom-app .wvs-course-lesson-card,
.wugan-hsk-classroom-app .wvs-course-access-notice,
.wugan-hsk-classroom-app .wvs-course-source-note,
.wugan-hsk-classroom-app .wvs-course-complete-navigation,
.wugan-hsk-classroom-app .wvs-course-result-card,
.wugan-hsk-classroom-app .wvs-course-quiz-card,
.wugan-hsk-classroom-app .wco-sentence-card {
    border:1px solid var(--wco-line);
    background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(255,255,255,.66));
    box-shadow:var(--wco-shadow);
    backdrop-filter:blur(22px) saturate(120%);
    -webkit-backdrop-filter:blur(22px) saturate(120%);
}
.wugan-hsk-classroom-app .wvs-course-hero,
.wugan-hsk-classroom-app .wvs-course-level-head,
.wugan-hsk-classroom-app .wvs-course-lesson-head { border-radius:28px; }
.wugan-hsk-classroom-app .wvs-course-hero { position:relative;padding:clamp(22px,4vw,40px); }
.wugan-hsk-classroom-app .wvs-course-hero::after,
.wugan-hsk-classroom-app .wvs-course-level-head::after {
    content:"";position:absolute;inset:8px;border:1px solid rgba(255,255,255,.82);border-radius:22px;pointer-events:none;
}
.wugan-hsk-classroom-app .wvs-course-level-head { position:relative;border-left:3px solid var(--wco-red); }
.wugan-hsk-classroom-app .wvs-course-lesson-head { border-left:3px solid var(--wco-red);padding:24px; }
.wugan-hsk-classroom-app .wvs-course-lesson-head h3 { font-size:clamp(28px,4vw,42px);font-weight:900; }
.wco-lesson-title-hanzi { color:#111; }
.wco-lesson-title-vi { color:#626262!important; }
.wugan-hsk-classroom-app .wvs-course-kicker,
.wugan-hsk-classroom-app .wvs-course-level-head > div > span,
.wugan-hsk-classroom-app .wvs-course-lesson-head > div > span,
.wugan-hsk-classroom-app .wvs-video-lesson-head span { color:var(--wco-red); }

/* Buttons stay white; red is only outline/detail. */
.wugan-hsk-classroom-app .wvs-primary,
.wugan-hsk-classroom-app .wvs-secondary,
.wugan-hsk-classroom-app .wvs-ghost,
.wugan-hsk-classroom-app .wvs-complete-button,
.wugan-hsk-classroom-app .wvs-study-nav button,
.wugan-hsk-classroom-app .wvs-icon-button,
.wugan-hsk-classroom-app .wvs-manager-link,
.wugan-hsk-classroom-app .wvs-course-next,
.wugan-hsk-classroom-app .wvs-video-fullscreen {
    border:1px solid rgba(167,25,48,.30)!important;border-radius:16px!important;
    background:rgba(255,255,255,.90)!important;color:#181818!important;
    box-shadow:0 10px 24px rgba(20,20,20,.08),inset 0 1px 0 #fff!important;
    transition:transform .22s cubic-bezier(.2,.75,.25,1),box-shadow .22s ease,border-color .22s ease,background .22s ease;
}
.wugan-hsk-classroom-app button:hover { border-color:rgba(167,25,48,.58)!important;box-shadow:0 15px 34px rgba(20,20,20,.12),inset 0 1px 0 #fff!important; }
.wugan-hsk-classroom-app button:active { transform:translateY(1px) scale(.985)!important; }
.wugan-hsk-classroom-app .wvs-complete-button:not(:disabled)::before,
.wugan-hsk-classroom-app .wvs-primary::before { content:"";width:6px;height:6px;border-radius:50%;background:var(--wco-red); }

/* Course and lesson cards */
.wugan-hsk-classroom-app .wvs-level-grid { gap:18px; }
.wugan-hsk-classroom-app .wvs-level-card,
.wugan-hsk-classroom-app .wvs-level-card.is-mint,
.wugan-hsk-classroom-app .wvs-level-card.is-peach,
.wugan-hsk-classroom-app .wvs-level-card.is-sky,
.wugan-hsk-classroom-app .wvs-level-card.is-lavender,
.wugan-hsk-classroom-app .wvs-level-card.is-rose,
.wugan-hsk-classroom-app .wvs-level-card.is-gold,
.wugan-hsk-classroom-app .wvs-level-card.is-indigo {
    position:relative;border-radius:24px;background:rgba(255,255,255,.78)!important;color:#111!important;
    transform-style:preserve-3d;transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s ease,border-color .32s ease;
}
.wugan-hsk-classroom-app .wvs-level-card::after,
.wugan-hsk-classroom-app .wvs-course-lesson-card::after,
.wugan-hsk-classroom-app .wco-lesson-module::after {
    content:"";position:absolute;inset:7px;border-radius:inherit;border:1px solid rgba(255,255,255,.92);pointer-events:none;
}
.wugan-hsk-classroom-app .wvs-level-card:hover { transform:perspective(900px) translateY(-7px) rotateX(1.2deg);box-shadow:0 28px 58px rgba(20,20,20,.14),inset 0 1px 0 #fff; }
.wugan-hsk-classroom-app .wvs-level-badge { background:#fff!important;color:var(--wco-red)!important;border:1px solid rgba(167,25,48,.22);box-shadow:0 9px 20px rgba(20,20,20,.08); }
.wugan-hsk-classroom-app .wvs-level-progress i { background:rgba(0,0,0,.07); }
.wugan-hsk-classroom-app .wvs-level-progress i b { background:var(--wco-red); }
.wugan-hsk-classroom-app .wvs-course-lessons { gap:14px; }
.wugan-hsk-classroom-app .wvs-course-lesson-card {
    position:relative;overflow:hidden;border-radius:22px;background:rgba(255,255,255,.74)!important;color:#111!important;
    transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,border-color .28s ease,background .28s ease;
}
.wugan-hsk-classroom-app .wvs-course-lesson-card:hover { transform:translateY(-5px) scale(1.006);border-color:rgba(167,25,48,.36);background:rgba(255,255,255,.98)!important; }
.wugan-hsk-classroom-app .wvs-course-lesson-card.is-complete { background:rgba(255,255,255,.96)!important;border-left:3px solid var(--wco-red); }
.wugan-hsk-classroom-app .wvs-lesson-number { border-radius:15px;background:#fff;color:var(--wco-red);border:1px solid rgba(167,25,48,.20);box-shadow:0 8px 18px rgba(20,20,20,.08); }
.wugan-hsk-classroom-app .wvs-lesson-result { color:#111; }

/* Accordion with smooth 3D glass opening */
.wco-lesson-modules { display:grid;gap:18px;margin-top:24px; }
.wugan-hsk-classroom-app .wco-lesson-module { position:relative;overflow:hidden;border-radius:24px;border-left:3px solid var(--wco-red); }
.wugan-hsk-classroom-app .wco-module-toggle { min-height:86px;padding:16px 22px;background:rgba(255,255,255,.60);color:#111;border:0; }
.wugan-hsk-classroom-app .wco-module-toggle:hover { background:rgba(255,255,255,.94); }
.wugan-hsk-classroom-app .wco-module-index { color:var(--wco-red);font-weight:900; }
.wugan-hsk-classroom-app .wco-module-chevron { color:var(--wco-red);transition:transform .38s cubic-bezier(.2,.8,.2,1); }
.wugan-hsk-classroom-app .wco-lesson-module.is-open .wco-module-chevron { transform:rotate(180deg); }
.wugan-hsk-classroom-app .wco-module-body {
    padding:22px;border-top:1px solid rgba(167,25,48,.12);background:rgba(255,255,255,.52);
    transition:height .40s cubic-bezier(.2,.8,.2,1),opacity .32s ease,transform .40s cubic-bezier(.2,.8,.2,1);
}
.wugan-hsk-classroom-app .wco-module-body[hidden] { display:none!important; }
.wugan-hsk-classroom-app .wvs-practice-option { border-radius:18px;background:rgba(255,255,255,.86);border-color:rgba(167,25,48,.15); }
.wugan-hsk-classroom-app .wvs-practice-option > span { border-radius:13px;background:#fff;color:var(--wco-red);border:1px solid rgba(167,25,48,.18); }
.wugan-hsk-classroom-app .wvs-practice-option em { color:#111; }

/* Previous lesson-level speed selector retained; no extra speed icon beside speakers. */
.wugan-hsk-classroom-app .wvs-course-audio-rate-control {
    border:1px solid rgba(167,25,48,.16);border-radius:18px;background:rgba(255,255,255,.84);box-shadow:0 10px 24px rgba(20,20,20,.07),inset 0 1px 0 #fff;
}
.wugan-hsk-classroom-app .wvs-course-audio-rate-control select { border:1px solid rgba(167,25,48,.18);border-radius:12px;background:#fff;color:#111; }
.wco-audio-cluster,.wco-audio-speed,.wco-audio-rate-note { display:none!important; }

/* Flashcard: preserve the v1.5.8 structure and interaction. */
.wugan-hsk-classroom-app .wvs-course-flashcard-panel {
    padding:18px;border:1px solid rgba(64,72,82,.10);border-radius:23px;background:rgba(255,255,255,.88);box-shadow:0 12px 28px rgba(75,62,66,.07);
}
.wugan-hsk-classroom-app .wvs-course-flashcard { width:min(100%,470px);min-height:560px;perspective:1200px; }
.wugan-hsk-classroom-app .wvs-course-flashcard .wvs-flash-inner,
.wugan-hsk-classroom-app .wvs-course-flashcard .wvs-flash-face { min-height:560px; }
.wugan-hsk-classroom-app .wvs-course-flashcard .wvs-flash-face {
    border-radius:28px;background:#fff;border:1px solid rgba(167,25,48,.13);box-shadow:0 20px 45px rgba(75,62,66,.10);
}
.wugan-hsk-classroom-app .wvs-course-flashcard .wvs-hanzi { font-size:clamp(62px,9vw,92px);font-weight:900;line-height:1.08;text-align:center;color:#202020; }
.wugan-hsk-classroom-app .wvs-course-flashcard .wvs-hanzi.is-small { font-size:40px; }
.wugan-hsk-classroom-app .wvs-course-flashcard .wvs-pinyin { margin-top:2px;color:#6d7880;font-size:16px;font-weight:800;text-align:center; }
.wugan-hsk-classroom-app .wvs-course-flashcard .wvs-pos { align-self:center;margin-top:5px;padding:4px 8px;border-radius:999px;background:#fff;color:var(--wco-red);border:1px solid rgba(167,25,48,.16);font-size:9px;font-weight:950; }
.wugan-hsk-classroom-app .wvs-course-flashcard .wvs-flip-hint { color:var(--wvs-muted);font-size:12px;font-weight:750; }
.wugan-hsk-classroom-app .wvs-course-flashcard .wvs-flash-face.is-back { align-items:center;gap:4px; }
.wugan-hsk-classroom-app .wvs-course-flashcard .wvs-meaning { margin:8px 0 10px;font-size:22px;font-weight:950;color:var(--wco-red-dark); }
.wugan-hsk-classroom-app .wvs-course-examples { display:grid;width:100%;max-width:500px;gap:8px; }
.wugan-hsk-classroom-app .wvs-course-examples>h4 { margin:2px 0 0;color:#202020;font-size:11px;letter-spacing:.08em;text-transform:uppercase; }
.wugan-hsk-classroom-app .wvs-course-example { display:grid;grid-template-columns:minmax(0,1fr) 40px;gap:9px;width:100%;max-width:500px;padding:12px;border-radius:16px;background:#fff;border:1px solid rgba(167,25,48,.10);text-align:left; }
.wugan-hsk-classroom-app .wvs-course-example small { display:block;margin-bottom:2px;color:var(--wco-red-dark);font-size:8px;font-weight:950;letter-spacing:.10em; }
.wugan-hsk-classroom-app .wvs-course-example strong { display:block;font-size:15px; }
.wugan-hsk-classroom-app .wvs-course-example span { display:block;color:#7d8990;font-size:11px; }
.wugan-hsk-classroom-app .wvs-course-example p { margin:3px 0 0;color:var(--wvs-muted);font-size:11px; }
.wugan-hsk-classroom-app .wvs-course-example button { display:grid;width:38px;height:38px;place-items:center;border:1px solid rgba(167,25,48,.14)!important;border-radius:50%!important;background:#fff!important;color:var(--wco-red-dark)!important; }
.wugan-hsk-classroom-app .wvs-course-example button svg { width:18px;height:18px; }

/* Video masks remain transparent and clickable to block opening YouTube. */
.wvs-youtube-top-mask,.wvs-youtube-link-mask,
.wvs-video-player-wrap:fullscreen .wvs-youtube-top-mask,
.wvs-video-player-wrap:-webkit-full-screen .wvs-youtube-top-mask,
.wvs-video-player-wrap:fullscreen .wvs-youtube-link-mask,
.wvs-video-player-wrap:-webkit-full-screen .wvs-youtube-link-mask { background:transparent!important;color:transparent!important;box-shadow:none!important;pointer-events:auto; }
.wvs-youtube-top-mask { width:min(68%,760px);height:72px; }
.wvs-youtube-link-mask { width:min(38%,410px);height:106px;padding:0; }
.wugan-hsk-classroom-app .wvs-video-player-wrap { border-radius:22px;background:#111;box-shadow:0 24px 55px rgba(20,20,20,.20); }
.wugan-hsk-classroom-app .wvs-video-watermark { border-radius:16px;background:rgba(255,255,255,.30);border:1px solid rgba(255,255,255,.34);color:#fff;opacity:.6;text-shadow:0 1px 3px rgba(0,0,0,.8);backdrop-filter:blur(8px); }
.wugan-hsk-classroom-app .wvs-video-list button { border-radius:17px;background:rgba(255,255,255,.82);border-color:rgba(167,25,48,.14); }
.wugan-hsk-classroom-app .wvs-video-list button.is-active { border-color:rgba(167,25,48,.36);background:#fff;box-shadow:inset 3px 0 0 var(--wco-red),0 10px 22px rgba(20,20,20,.07); }
.wugan-hsk-classroom-app .wvs-video-list button.is-active>span { background:#fff;color:var(--wco-red);border:1px solid rgba(167,25,48,.18); }

/* Forms and exercise results */
.wugan-hsk-classroom-app input,
.wugan-hsk-classroom-app textarea,
.wugan-hsk-classroom-app select { border-radius:14px;border-color:rgba(167,25,48,.16);background:rgba(255,255,255,.88);color:#111; }
.wugan-hsk-classroom-app input:focus,
.wugan-hsk-classroom-app textarea:focus,
.wugan-hsk-classroom-app select:focus { outline:none;border-color:rgba(167,25,48,.48);box-shadow:0 0 0 4px rgba(167,25,48,.07); }
.wugan-hsk-classroom-app .wco-sentence-card,
.wugan-hsk-classroom-app .wvs-course-quiz-card,
.wugan-hsk-classroom-app .wvs-course-result-card { border-radius:22px; }

/* Entry, click and view transition animation. */
@keyframes wcoViewEnter { from{opacity:0;transform:translateY(18px) scale(.985);filter:blur(5px)} to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)} }
@keyframes wcoCardRise { from{opacity:0;transform:translateY(20px) rotateX(2deg)} to{opacity:1;transform:translateY(0) rotateX(0)} }
@keyframes wcoSoftPulse { 0%{box-shadow:0 0 0 0 rgba(167,25,48,.14)} 100%{box-shadow:0 0 0 14px rgba(167,25,48,0)} }
.wugan-hsk-classroom-app [data-course-app].wco-view-enter > * { animation:wcoViewEnter .56s cubic-bezier(.2,.8,.2,1) both; }
.wugan-hsk-classroom-app .wvs-level-card,
.wugan-hsk-classroom-app .wvs-course-lesson-card,
.wugan-hsk-classroom-app .wco-lesson-module { animation:wcoCardRise .50s cubic-bezier(.2,.8,.2,1) both; }
.wugan-hsk-classroom-app .wvs-level-card:nth-child(2),.wugan-hsk-classroom-app .wvs-course-lesson-card:nth-child(2),.wugan-hsk-classroom-app .wco-lesson-module:nth-child(2){animation-delay:.05s}
.wugan-hsk-classroom-app .wvs-level-card:nth-child(3),.wugan-hsk-classroom-app .wvs-course-lesson-card:nth-child(3),.wugan-hsk-classroom-app .wco-lesson-module:nth-child(3){animation-delay:.10s}
.wugan-hsk-classroom-app .wvs-level-card:nth-child(4),.wugan-hsk-classroom-app .wvs-course-lesson-card:nth-child(4){animation-delay:.15s}
.wugan-hsk-classroom-app .wvs-level-card:focus-visible,
.wugan-hsk-classroom-app .wvs-course-lesson-card:focus-visible,
.wugan-hsk-classroom-app .wco-module-toggle:focus-visible { outline:2px solid var(--wco-red);outline-offset:4px;animation:wcoSoftPulse .65s ease-out; }

/* Learning notice in the same white glass language. */
.wco-learning-notice { max-width:1180px;margin:14px auto;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid rgba(167,25,48,.22);border-radius:20px;background:rgba(255,255,255,.90);color:#111;box-shadow:0 18px 45px rgba(20,20,20,.10);backdrop-filter:blur(18px); }
.wco-learning-notice strong,.wco-learning-notice span{display:block}.wco-learning-notice span{margin-top:3px;color:#666}.wco-learning-notice a{flex:0 0 auto;padding:9px 13px;border:1px solid rgba(167,25,48,.28);border-radius:13px;background:#fff;color:#111;font-weight:800;text-decoration:none}

@media (prefers-reduced-motion: reduce) {
    .wugan-hsk-classroom-app *, .wugan-hsk-classroom-app *::before, .wugan-hsk-classroom-app *::after { animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important; }
}
@media(max-width:780px){
    .wugan-hsk-classroom-app .wvs-shell{width:min(100% - 14px,1240px);padding:14px;border-radius:24px}
    .wco-practice-grid,.wco-sentence-word,.wco-analysis-grid{grid-template-columns:1fr}
    .wco-module-toggle{grid-template-columns:42px minmax(0,1fr) 24px;padding:13px}.wco-module-body{padding:13px}
    .wvs-youtube-top-mask{width:72%;height:58px}.wvs-youtube-link-mask{width:46%;height:80px}
    .wco-learning-notice{align-items:flex-start;flex-direction:column;margin:10px 12px}.wco-learning-notice a{width:100%;text-align:center}
}

/* ========================================================================== 
   v2.5.0 — MasterStudy-inspired production UI
   Solid white learning surfaces, restrained WUGAN red accents and no ghost
   decorative overlays. This block intentionally overrides older experiments.
   ========================================================================== */
.wugan-hsk-classroom-app {
    --wco-accent: #9f172d;
    --wco-accent-dark: #741020;
    --wco-page: #f5f7fa;
    --wco-surface: #ffffff;
    --wco-text: #17191d;
    --wco-muted: #6b7280;
    --wco-border-solid: #e7e9ee;
    --wco-shadow-card: 0 12px 32px rgba(22, 29, 37, .075);
    background: var(--wco-page) !important;
    color: var(--wco-text) !important;
    font-family: Inter, "Segoe UI", Arial, sans-serif !important;
}
.wugan-hsk-classroom-app *,
.wugan-hsk-classroom-app *::before,
.wugan-hsk-classroom-app *::after { box-sizing: border-box; }

/* Remove the translucent pills and inset frames visible in screenshots. */
.wugan-hsk-classroom-app .wvs-shell::before,
.wugan-hsk-classroom-app .wvs-shell::after,
.wugan-hsk-classroom-app .wvs-course-hero::before,
.wugan-hsk-classroom-app .wvs-course-hero::after,
.wugan-hsk-classroom-app .wvs-course-level-head::before,
.wugan-hsk-classroom-app .wvs-course-level-head::after,
.wugan-hsk-classroom-app .wvs-course-lesson-head::before,
.wugan-hsk-classroom-app .wvs-course-lesson-head::after,
.wugan-hsk-classroom-app .wvs-level-card::before,
.wugan-hsk-classroom-app .wvs-level-card::after,
.wugan-hsk-classroom-app .wvs-course-lesson-card::before,
.wugan-hsk-classroom-app .wvs-course-lesson-card::after,
.wugan-hsk-classroom-app .wco-lesson-module::before,
.wugan-hsk-classroom-app .wco-lesson-module::after {
    display: none !important;
    content: none !important;
}

.wugan-hsk-classroom-app .wvs-shell {
    width: min(1240px, calc(100% - 30px)) !important;
    margin: 24px auto !important;
    padding: clamp(18px, 2.5vw, 32px) !important;
    overflow: visible !important;
    border: 1px solid var(--wco-border-solid) !important;
    border-radius: 20px !important;
    background: var(--wco-surface) !important;
    box-shadow: 0 8px 28px rgba(22, 29, 37, .06) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.wugan-hsk-classroom-app .wvs-header {
    padding: 0 0 22px !important;
    border-bottom: 1px solid var(--wco-border-solid) !important;
}
.wugan-hsk-classroom-app .wvs-header h2,
.wugan-hsk-classroom-app .wvs-course-hero h3,
.wugan-hsk-classroom-app .wvs-course-level-head h3,
.wugan-hsk-classroom-app .wvs-course-lesson-head h3 {
    color: var(--wco-text) !important;
    letter-spacing: -.025em !important;
}
.wugan-hsk-classroom-app .wvs-kicker,
.wugan-hsk-classroom-app .wvs-course-kicker,
.wugan-hsk-classroom-app .wvs-course-level-head > div > span,
.wugan-hsk-classroom-app .wvs-course-lesson-head > div > span {
    color: var(--wco-accent) !important;
}

/* MasterStudy-like course hero and cards. */
.wugan-hsk-classroom-app .wvs-course-hero,
.wugan-hsk-classroom-app .wvs-course-level-head,
.wugan-hsk-classroom-app .wvs-course-lesson-head,
.wugan-hsk-classroom-app .wvs-course-source-note,
.wugan-hsk-classroom-app .wvs-course-access-notice,
.wugan-hsk-classroom-app .wvs-course-complete-navigation,
.wugan-hsk-classroom-app .wvs-course-paywall {
    border: 1px solid var(--wco-border-solid) !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: var(--wco-shadow-card) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.wugan-hsk-classroom-app .wvs-course-hero {
    padding: clamp(24px, 4vw, 42px) !important;
    border-top: 4px solid var(--wco-accent) !important;
}
.wugan-hsk-classroom-app .wvs-course-level-head,
.wugan-hsk-classroom-app .wvs-course-lesson-head {
    padding: clamp(20px, 3vw, 30px) !important;
    border-left: 4px solid var(--wco-accent) !important;
}
.wugan-hsk-classroom-app .wvs-level-grid { gap: 18px !important; }
.wugan-hsk-classroom-app .wvs-level-card,
.wugan-hsk-classroom-app .wvs-level-card[class*="is-"],
.wugan-hsk-classroom-app .wvs-course-lesson-card {
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid var(--wco-border-solid) !important;
    border-radius: 16px !important;
    background: #fff !important;
    color: var(--wco-text) !important;
    box-shadow: 0 5px 18px rgba(22, 29, 37, .045) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}
.wugan-hsk-classroom-app .wvs-level-card:hover,
.wugan-hsk-classroom-app .wvs-course-lesson-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(159, 23, 45, .34) !important;
    box-shadow: 0 14px 32px rgba(22, 29, 37, .09) !important;
}
.wugan-hsk-classroom-app .wvs-course-lesson-card.is-locked {
    opacity: .78 !important;
    background: #fafbfc !important;
    border-style: dashed !important;
}
.wugan-hsk-classroom-app .wvs-level-badge,
.wugan-hsk-classroom-app .wvs-lesson-number {
    border: 1px solid rgba(159, 23, 45, .18) !important;
    border-radius: 12px !important;
    background: #fff5f6 !important;
    color: var(--wco-accent) !important;
    box-shadow: none !important;
}
.wugan-hsk-classroom-app .wvs-level-progress i,
.wugan-hsk-classroom-app .wvs-card-progress { background: #eef0f3 !important; }
.wugan-hsk-classroom-app .wvs-level-progress i b,
.wugan-hsk-classroom-app .wvs-card-progress span { background: var(--wco-accent) !important; }

/* Clean accordion modules. */
.wugan-hsk-classroom-app .wco-lesson-modules { gap: 16px !important; }
.wugan-hsk-classroom-app .wco-lesson-module {
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid var(--wco-border-solid) !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 7px 22px rgba(22, 29, 37, .05) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.wugan-hsk-classroom-app .wco-lesson-module.is-open { border-color: rgba(159, 23, 45, .22) !important; }
.wugan-hsk-classroom-app .wco-module-toggle {
    min-height: 82px !important;
    padding: 16px 20px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: var(--wco-text) !important;
    box-shadow: none !important;
}
.wugan-hsk-classroom-app .wco-module-toggle:hover { background: #fcfcfd !important; }
.wugan-hsk-classroom-app .wco-module-index,
.wugan-hsk-classroom-app .wco-module-chevron { color: var(--wco-accent) !important; }
.wugan-hsk-classroom-app .wco-module-body {
    padding: clamp(14px, 2.4vw, 24px) !important;
    border-top: 1px solid var(--wco-border-solid) !important;
    background: #fbfcfd !important;
}

/* Buttons and inputs: polished, not overly decorative. */
.wugan-hsk-classroom-app .wvs-primary,
.wugan-hsk-classroom-app .wvs-course-access-notice button,
.wugan-hsk-classroom-app .wvs-course-paywall button,
.wugan-hsk-classroom-app .wvs-course-complete-navigation button {
    border: 1px solid var(--wco-accent) !important;
    border-radius: 10px !important;
    background: var(--wco-accent) !important;
    color: #fff !important;
    box-shadow: 0 7px 16px rgba(159, 23, 45, .18) !important;
}
.wugan-hsk-classroom-app .wvs-primary:hover,
.wugan-hsk-classroom-app .wvs-course-access-notice button:hover,
.wugan-hsk-classroom-app .wvs-course-paywall button:hover {
    background: var(--wco-accent-dark) !important;
    border-color: var(--wco-accent-dark) !important;
}
.wugan-hsk-classroom-app .wvs-secondary,
.wugan-hsk-classroom-app .wvs-ghost,
.wugan-hsk-classroom-app .wvs-study-nav button,
.wugan-hsk-classroom-app .wvs-icon-button,
.wugan-hsk-classroom-app .wvs-video-fullscreen {
    border: 1px solid var(--wco-border-solid) !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: var(--wco-text) !important;
    box-shadow: none !important;
}
.wugan-hsk-classroom-app input,
.wugan-hsk-classroom-app textarea,
.wugan-hsk-classroom-app select {
    border: 1px solid #dfe2e7 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: var(--wco-text) !important;
}
.wugan-hsk-classroom-app input:focus,
.wugan-hsk-classroom-app textarea:focus,
.wugan-hsk-classroom-app select:focus {
    border-color: rgba(159, 23, 45, .55) !important;
    box-shadow: 0 0 0 3px rgba(159, 23, 45, .08) !important;
}

/* Restore the 1.5.8 flashcard appearance without changing its DOM/interaction. */
.wugan-hsk-classroom-app .wvs-course-flashcard-panel {
    padding: 18px !important;
    border: 1px solid rgba(64, 72, 82, .10) !important;
    border-radius: 23px !important;
    background: rgba(255, 255, 255, .88) !important;
    box-shadow: 0 12px 28px rgba(75, 62, 66, .07) !important;
}
.wugan-hsk-classroom-app .wvs-course-flashcard { width: min(100%, 470px) !important; min-height: 560px !important; }
.wugan-hsk-classroom-app .wvs-course-flashcard .wvs-flash-inner,
.wugan-hsk-classroom-app .wvs-course-flashcard .wvs-flash-face { min-height: 560px !important; }
.wugan-hsk-classroom-app .wvs-course-flashcard .wvs-flash-face {
    border-radius: 28px !important;
    background: #fff !important;
    border: 1px solid rgba(255, 123, 143, .15) !important;
    box-shadow: 0 20px 45px rgba(75, 62, 66, .10) !important;
}
.wugan-hsk-classroom-app .wvs-course-flashcard .wvs-hanzi { font-size: clamp(62px, 9vw, 92px) !important; }
.wugan-hsk-classroom-app .wvs-course-flashcard .wvs-hanzi.is-small { font-size: 40px !important; }
.wugan-hsk-classroom-app .wvs-course-flashcard .wvs-meaning { margin: 8px 0 10px !important; font-size: 22px !important; font-weight: 950 !important; color: var(--wvs-primary-dark) !important; }
.wugan-hsk-classroom-app .wvs-course-flashcard .wvs-pos { background: #e9f8ff !important; color: #34758c !important; border: 0 !important; }
.wugan-hsk-classroom-app .wvs-course-example { background: #fff6f2 !important; border: 0 !important; }
.wugan-hsk-classroom-app .wvs-course-example button { border: 0 !important; background: #fff !important; color: var(--wvs-primary-dark) !important; }

/* Separate video/audio/content lesson module. */
.wugan-hsk-classroom-app .wco-media-lesson-list { display: grid; gap: 18px; }
.wugan-hsk-classroom-app .wco-media-lesson-item {
    overflow: hidden;
    border: 1px solid var(--wco-border-solid);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(22, 29, 37, .05);
}
.wugan-hsk-classroom-app .wco-media-lesson-heading {
    display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--wco-border-solid);
}
.wugan-hsk-classroom-app .wco-media-lesson-heading > span {
    display: grid; width: 38px; height: 38px; place-items: center; border-radius: 10px; background: #fff4f5; color: var(--wco-accent); font-weight: 900;
}
.wugan-hsk-classroom-app .wco-media-lesson-heading div { display: grid; gap: 2px; }
.wugan-hsk-classroom-app .wco-media-lesson-heading strong { color: var(--wco-text); font-size: 15px; }
.wugan-hsk-classroom-app .wco-media-lesson-heading small { color: var(--wco-muted); }
.wugan-hsk-classroom-app .wco-media-player { background: #111; }
.wugan-hsk-classroom-app .wco-media-player iframe,
.wugan-hsk-classroom-app .wco-media-player video { display: block; width: 100%; aspect-ratio: 16 / 9; min-height: 280px; border: 0; }
.wugan-hsk-classroom-app .wco-media-player audio { display: block; width: calc(100% - 36px); margin: 18px; }
.wugan-hsk-classroom-app .wco-media-content { padding: 20px; color: #34363a; font-size: 14px; line-height: 1.75; }
.wugan-hsk-classroom-app .wco-media-content > :first-child { margin-top: 0; }
.wugan-hsk-classroom-app .wco-media-content > :last-child { margin-bottom: 0; }

/* Course purchase dialog. */
.wugan-hsk-classroom-app [data-purchase-modal] { z-index: 999999; }
.wugan-hsk-classroom-app .wco-purchase-card {
    width: min(960px, calc(100vw - 28px));
    max-height: calc(100vh - 32px);
    overflow: auto;
    padding: 24px;
    border: 1px solid var(--wco-border-solid);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .22);
}
.wugan-hsk-classroom-app .wco-purchase-hero { padding: 4px 42px 18px 0; border-bottom: 1px solid var(--wco-border-solid); }
.wugan-hsk-classroom-app .wco-purchase-hero > span { color: var(--wco-accent); font-size: 10px; font-weight: 900; letter-spacing: .13em; }
.wugan-hsk-classroom-app .wco-purchase-hero h3 { margin: 5px 0; color: var(--wco-text); font-size: clamp(24px, 4vw, 36px); }
.wugan-hsk-classroom-app .wco-purchase-hero p { margin: 0; color: var(--wco-muted); }
.wugan-hsk-classroom-app .wco-purchase-status { display: grid; gap: 3px; margin: 16px 0; padding: 14px 16px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fafafa; }
.wugan-hsk-classroom-app .wco-purchase-status.is-pending { border-color: #f2d39b; background: #fff9ed; }
.wugan-hsk-classroom-app .wco-purchase-status span { color: var(--wco-muted); font-size: 12px; }
.wugan-hsk-classroom-app .wvs-plus-plans.is-course-plans { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.wugan-hsk-classroom-app .wvs-plus-plan {
    display: grid; gap: 5px; padding: 16px; text-align: left; border: 1px solid var(--wco-border-solid) !important; border-radius: 12px !important; background: #fff !important; color: var(--wco-text) !important; box-shadow: none !important;
}
.wugan-hsk-classroom-app .wvs-plus-plan.is-selected { border-color: var(--wco-accent) !important; box-shadow: 0 0 0 3px rgba(159, 23, 45, .08) !important; }
.wugan-hsk-classroom-app .wvs-plus-plan > span { color: var(--wco-accent); font-size: 10px; font-weight: 800; }
.wugan-hsk-classroom-app .wvs-plus-plan b { color: var(--wco-text); font-size: 18px; }
.wugan-hsk-classroom-app .wvs-plus-plan small { color: var(--wco-muted); }
.wugan-hsk-classroom-app .wvs-plus-checkout { display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: 20px; padding: 18px; border: 1px solid var(--wco-border-solid); border-radius: 14px; background: #fafbfc; }
.wugan-hsk-classroom-app .wvs-plus-qr img { display: block; width: 100%; border-radius: 10px; background: #fff; }
.wugan-hsk-classroom-app .wvs-plus-qr small { display: block; margin-top: 8px; color: var(--wco-muted); text-align: center; }
.wugan-hsk-classroom-app .wvs-plus-bank { display: grid; gap: 8px; }
.wugan-hsk-classroom-app .wvs-plus-bank > div { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #eceef1; }
.wugan-hsk-classroom-app .wvs-plus-bank span { color: var(--wco-muted); font-size: 11px; }
.wugan-hsk-classroom-app .wvs-plus-bank button { border: 1px solid #dfe2e7 !important; border-radius: 8px !important; background: #fff !important; color: var(--wco-text) !important; box-shadow: none !important; }
.wugan-hsk-classroom-app .wco-purchase-note { margin: 14px 0; padding: 12px 14px; border-left: 3px solid var(--wco-accent); background: #fff7f8; color: #4b4d52; font-size: 12px; }
.wugan-hsk-classroom-app .wvs-plus-actions { display: flex; align-items: center; gap: 10px; }
.wugan-hsk-classroom-app .wvs-facebook-button { padding: 11px 15px; border: 1px solid #dfe2e7; border-radius: 10px; background: #fff; color: var(--wco-text); font-weight: 800; text-decoration: none; }

/* Keep YouTube protection transparent. */
.wugan-hsk-classroom-app .wvs-youtube-top-mask,
.wugan-hsk-classroom-app .wvs-youtube-link-mask,
.wugan-hsk-classroom-app .wvs-video-player-wrap:fullscreen .wvs-youtube-top-mask,
.wugan-hsk-classroom-app .wvs-video-player-wrap:fullscreen .wvs-youtube-link-mask {
    background: transparent !important;
    box-shadow: none !important;
    color: transparent !important;
}

@media (max-width: 820px) {
    .wugan-hsk-classroom-app .wvs-shell { width: min(100% - 14px, 1240px) !important; margin: 8px auto !important; padding: 13px !important; border-radius: 14px !important; }
    .wugan-hsk-classroom-app .wvs-plus-plans.is-course-plans { grid-template-columns: 1fr !important; }
    .wugan-hsk-classroom-app .wvs-plus-checkout { grid-template-columns: 1fr; }
    .wugan-hsk-classroom-app .wvs-plus-qr { max-width: 250px; margin: 0 auto; }
    .wugan-hsk-classroom-app .wvs-plus-bank > div { grid-template-columns: 1fr; }
    .wugan-hsk-classroom-app .wvs-plus-actions { align-items: stretch; flex-direction: column; }
    .wugan-hsk-classroom-app .wvs-facebook-button { text-align: center; }
    .wugan-hsk-classroom-app .wco-media-player iframe,
    .wugan-hsk-classroom-app .wco-media-player video { min-height: 190px; }
    .wugan-hsk-classroom-app .wvs-course-flashcard { min-height: 520px !important; }
    .wugan-hsk-classroom-app .wvs-course-flashcard .wvs-flash-inner,
    .wugan-hsk-classroom-app .wvs-course-flashcard .wvs-flash-face { min-height: 520px !important; }
}
/* Khóa học Online độc lập: không hiển thị quà/chuỗi từ vựng kế thừa. */
.wugan-hsk-classroom-app [data-action="reward"] { display: none !important; }
.wugan-hsk-classroom-app .wvs-main-tabs:has([data-main-tab="levels"]:only-child) { grid-template-columns: 1fr !important; }

/* ========================================================================== 
   v2.6.0 — Dashboard LMS layout + persistent learning toolbar
   Bố cục lấy cảm hứng từ dashboard LMS: sidebar trái, topbar thống kê và
   vùng nội dung khóa học rộng. Toàn bộ dữ liệu/bài học cũ vẫn giữ nguyên.
   ========================================================================== */
.wugan-hsk-classroom-app {
    --wco-dashboard-red: #a51620;
    --wco-dashboard-red-dark: #7d1017;
    --wco-dashboard-page: #f3f5f8;
    --wco-dashboard-line: #e7eaf0;
    --wco-dashboard-text: #171a20;
    --wco-dashboard-muted: #6f7682;
    background: var(--wco-dashboard-page) !important;
    color: var(--wco-dashboard-text) !important;
    font-family: Inter, "Segoe UI", Arial, sans-serif !important;
}
.wugan-hsk-classroom-app [lang="zh-CN"],
.wugan-hsk-classroom-app .wvs-hanzi,
.wugan-hsk-classroom-app .wvs-course-question-hanzi,
.wugan-hsk-classroom-app .wco-lesson-title-hanzi,
.wugan-hsk-classroom-app .wco-sentence-word strong {
    font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Heiti SC", sans-serif !important;
    font-weight: 650;
    letter-spacing: .01em;
}
.wugan-hsk-classroom-app .wco-dashboard-shell {
    display: grid !important;
    grid-template-columns: 238px minmax(0, 1fr) !important;
    width: min(1540px, calc(100% - 22px)) !important;
    min-height: 780px;
    margin: 12px auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--wco-dashboard-line) !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 14px 45px rgba(25, 34, 47, .08) !important;
}
.wugan-hsk-classroom-app .wco-dashboard-shell::before,
.wugan-hsk-classroom-app .wco-dashboard-shell::after { display: none !important; content: none !important; }
.wugan-hsk-classroom-app .wco-dashboard-sidebar {
    position: relative;
    z-index: 4;
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 20px 14px 16px;
    border-right: 1px solid var(--wco-dashboard-line);
    background: #fff;
}
.wugan-hsk-classroom-app .wco-sidebar-brand {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 11px;
    padding: 4px 6px 20px;
    border: 0;
    border-bottom: 1px solid #eef0f3;
    background: transparent;
    color: var(--wco-dashboard-text);
    text-align: left;
}
.wugan-hsk-classroom-app .wco-sidebar-brand .wvs-mini-mascot {
    width: 45px;
    height: 45px;
    border: 1px solid rgba(165, 22, 32, .16);
    border-radius: 12px;
    background: #fff;
    color: var(--wco-dashboard-red);
    box-shadow: 0 7px 18px rgba(36, 43, 54, .08);
    transform: none;
}
.wugan-hsk-classroom-app .wco-sidebar-brand > span { display: grid; min-width: 0; gap: 1px; }
.wugan-hsk-classroom-app .wco-sidebar-brand strong { font-size: 17px; letter-spacing: .08em; }
.wugan-hsk-classroom-app .wco-sidebar-brand small { color: var(--wco-dashboard-red); font-size: 9px; font-weight: 850; letter-spacing: .12em; }
.wugan-hsk-classroom-app .wco-sidebar-nav { display: grid; gap: 7px; padding-top: 18px; }
.wugan-hsk-classroom-app .wco-sidebar-nav > button,
.wugan-hsk-classroom-app .wco-sidebar-course {
    display: grid;
    width: 100%;
    min-height: 48px;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #4b515c;
    text-align: left;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.wugan-hsk-classroom-app .wco-sidebar-nav > button:hover,
.wugan-hsk-classroom-app .wco-sidebar-course:hover { transform: translateX(2px); background: #f7f8fa; color: #171a20; }
.wugan-hsk-classroom-app .wco-sidebar-nav > button.is-active,
.wugan-hsk-classroom-app .wco-sidebar-course.is-active {
    border-color: rgba(165, 22, 32, .16);
    background: #fff5f5;
    color: var(--wco-dashboard-red);
    box-shadow: inset 3px 0 0 var(--wco-dashboard-red);
}
.wugan-hsk-classroom-app .wco-sidebar-nav > button > span,
.wugan-hsk-classroom-app .wco-sidebar-course > span {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 8px;
    background: #f1f3f6;
    color: #4f5661;
    font-size: 12px;
    font-weight: 900;
}
.wugan-hsk-classroom-app .wco-sidebar-course.is-active > span,
.wugan-hsk-classroom-app .wco-sidebar-nav > button.is-active > span { background: var(--wco-dashboard-red); color: #fff; }
.wugan-hsk-classroom-app .wco-sidebar-course > div { display: grid; min-width: 0; gap: 1px; }
.wugan-hsk-classroom-app .wco-sidebar-course strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.wugan-hsk-classroom-app .wco-sidebar-course small { color: #8a909a; font-size: 10px; }
.wugan-hsk-classroom-app .wco-sidebar-group-title { padding: 15px 10px 5px; color: #9a9fa8; font-size: 9px; font-weight: 850; letter-spacing: .15em; }
.wugan-hsk-classroom-app .wco-sidebar-loading { padding: 12px 10px; color: #8b919a; font-size: 11px; }
.wugan-hsk-classroom-app .wco-sidebar-account {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    margin-top: auto;
    padding: 14px 7px 2px;
    border-top: 1px solid #eef0f3;
}
.wugan-hsk-classroom-app .wco-sidebar-account > span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; background: var(--wco-dashboard-red); color: #fff; font-weight: 850; }
.wugan-hsk-classroom-app .wco-sidebar-account > div { display: grid; min-width: 0; }
.wugan-hsk-classroom-app .wco-sidebar-account strong,
.wugan-hsk-classroom-app .wco-sidebar-account small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wugan-hsk-classroom-app .wco-sidebar-account strong { font-size: 12px; }
.wugan-hsk-classroom-app .wco-sidebar-account small { color: #8a909a; font-size: 9px; }
.wugan-hsk-classroom-app .wco-dashboard-frame { min-width: 0; background: var(--wco-dashboard-page); }
.wugan-hsk-classroom-app .wco-dashboard-topbar {
    position: relative;
    z-index: 3;
    display: grid !important;
    grid-template-columns: minmax(210px, .8fr) minmax(420px, 1.5fr) auto;
    align-items: center;
    gap: 18px;
    min-height: 92px;
    margin: 0 !important;
    padding: 15px 22px !important;
    border-bottom: 1px solid var(--wco-dashboard-line) !important;
    background: rgba(255,255,255,.97) !important;
    box-shadow: 0 4px 18px rgba(25, 34, 47, .04);
}
.wugan-hsk-classroom-app .wco-topbar-title { min-width: 0; }
.wugan-hsk-classroom-app .wco-topbar-title h2 { margin: 1px 0 2px !important; font-size: clamp(20px, 2vw, 28px) !important; }
.wugan-hsk-classroom-app .wco-topbar-title p { overflow: hidden; color: var(--wco-dashboard-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.wugan-hsk-classroom-app .wco-learning-toolbar { display: grid; min-width: 0; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.wugan-hsk-classroom-app .wco-toolbar-item {
    display: grid;
    min-width: 0;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border: 1px solid #e9ebef;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(26, 34, 45, .035);
}
.wugan-hsk-classroom-app .wco-toolbar-item > span { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 8px; background: #fff3f4; color: var(--wco-dashboard-red); font-size: 13px; font-weight: 900; }
.wugan-hsk-classroom-app .wco-toolbar-item > div { display: grid; min-width: 0; }
.wugan-hsk-classroom-app .wco-toolbar-item small { overflow: hidden; color: #8a9099; font-size: 9px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.wugan-hsk-classroom-app .wco-toolbar-item strong { overflow: hidden; color: #20242b; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.wugan-hsk-classroom-app .wco-dashboard-topbar .wvs-header-actions { flex-wrap: nowrap; }
.wugan-hsk-classroom-app .wco-dashboard-topbar .wvs-device-switcher { display: none; }
.wugan-hsk-classroom-app .wco-dashboard-content { min-height: 680px; padding: 22px; }
.wugan-hsk-classroom-app .wco-dashboard-content .wvs-main-tabs { display: none !important; }
.wugan-hsk-classroom-app .wco-dashboard-content .wvs-main-panel { width: 100%; }
.wugan-hsk-classroom-app .wvs-course-app { max-width: none !important; }
.wugan-hsk-classroom-app .wvs-course-hero,
.wugan-hsk-classroom-app .wvs-course-level-head,
.wugan-hsk-classroom-app .wvs-course-lesson-head,
.wugan-hsk-classroom-app .wvs-course-source-note,
.wugan-hsk-classroom-app .wco-lesson-module,
.wugan-hsk-classroom-app .wvs-level-card,
.wugan-hsk-classroom-app .wvs-course-lesson-card {
    border-color: #e4e7ec !important;
    box-shadow: 0 7px 22px rgba(27, 35, 46, .055) !important;
}
.wugan-hsk-classroom-app .wvs-course-hero { border-top-width: 3px !important; }
.wugan-hsk-classroom-app .wvs-course-level-head,
.wugan-hsk-classroom-app .wvs-course-lesson-head { border-left-width: 3px !important; }
.wugan-hsk-classroom-app .wvs-level-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.wugan-hsk-classroom-app .wvs-course-lessons { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.wugan-hsk-classroom-app .wvs-course-lesson-card { min-height: 108px !important; }
.wugan-hsk-classroom-app .wvs-course-breadcrumb { margin-bottom: 14px; }
.wugan-hsk-classroom-app .wvs-course-breadcrumb button { color: var(--wco-dashboard-red) !important; }
.wugan-hsk-classroom-app .wvs-primary,
.wugan-hsk-classroom-app .wvs-course-access-notice button,
.wugan-hsk-classroom-app .wvs-course-paywall button { background: var(--wco-dashboard-red) !important; border-color: var(--wco-dashboard-red) !important; }
.wugan-hsk-classroom-app .wvs-primary:hover,
.wugan-hsk-classroom-app .wvs-course-access-notice button:hover,
.wugan-hsk-classroom-app .wvs-course-paywall button:hover { background: var(--wco-dashboard-red-dark) !important; }

@media (max-width: 1180px) {
    .wugan-hsk-classroom-app .wco-dashboard-shell { grid-template-columns: 86px minmax(0, 1fr) !important; }
    .wugan-hsk-classroom-app .wco-sidebar-brand { justify-content: center; padding-inline: 0; }
    .wugan-hsk-classroom-app .wco-sidebar-brand > span,
    .wugan-hsk-classroom-app .wco-sidebar-group-title,
    .wugan-hsk-classroom-app .wco-sidebar-course > div,
    .wugan-hsk-classroom-app .wco-sidebar-nav > button strong,
    .wugan-hsk-classroom-app .wco-sidebar-account > div { display: none; }
    .wugan-hsk-classroom-app .wco-sidebar-nav > button,
    .wugan-hsk-classroom-app .wco-sidebar-course { grid-template-columns: 1fr; justify-items: center; padding: 8px 5px; }
    .wugan-hsk-classroom-app .wco-sidebar-account { grid-template-columns: 1fr; justify-items: center; }
    .wugan-hsk-classroom-app .wco-dashboard-topbar { grid-template-columns: minmax(180px,.7fr) minmax(360px,1.3fr) auto; padding-inline: 16px !important; }
    .wugan-hsk-classroom-app .wco-learning-toolbar { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
    .wugan-hsk-classroom-app .wvs-level-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 900px) {
    .wugan-hsk-classroom-app .wco-dashboard-topbar { grid-template-columns: minmax(160px,.8fr) minmax(290px,1.2fr); }
    .wugan-hsk-classroom-app .wco-dashboard-topbar .wvs-header-actions { grid-column: 2; grid-row: 1; justify-self: end; }
    .wugan-hsk-classroom-app .wco-learning-toolbar { grid-column: 1 / -1; }
    .wugan-hsk-classroom-app .wvs-course-lessons { grid-template-columns: 1fr !important; }
}
@media (max-width: 720px) {
    .wugan-hsk-classroom-app .wco-dashboard-shell { display: block !important; width: 100% !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; }
    .wugan-hsk-classroom-app .wco-dashboard-sidebar { position: sticky; top: 0; display: grid; grid-template-columns: 52px minmax(0,1fr); padding: 8px 10px; border-right: 0; border-bottom: 1px solid var(--wco-dashboard-line); }
    .wugan-hsk-classroom-app .wco-sidebar-brand { border: 0; padding: 0; }
    .wugan-hsk-classroom-app .wco-sidebar-brand .wvs-mini-mascot { width: 42px; height: 42px; }
    .wugan-hsk-classroom-app .wco-sidebar-nav { display: flex; min-width: 0; overflow-x: auto; padding: 0 0 0 8px; }
    .wugan-hsk-classroom-app .wco-sidebar-nav > button,
    .wugan-hsk-classroom-app .wco-sidebar-course { width: 42px; min-width: 42px; min-height: 42px; padding: 5px; }
    .wugan-hsk-classroom-app .wco-sidebar-account { display: none; }
    .wugan-hsk-classroom-app .wco-dashboard-topbar { display: flex !important; min-height: 74px; flex-wrap: wrap; padding: 11px 13px !important; }
    .wugan-hsk-classroom-app .wco-topbar-title { flex: 1 1 190px; }
    .wugan-hsk-classroom-app .wco-topbar-title p { display: none; }
    .wugan-hsk-classroom-app .wco-learning-toolbar { display: none; }
    .wugan-hsk-classroom-app .wco-dashboard-topbar .wvs-header-actions { margin-left: auto; }
    .wugan-hsk-classroom-app .wco-dashboard-content { padding: 12px; }
    .wugan-hsk-classroom-app .wvs-level-grid { grid-template-columns: 1fr !important; }
}

/* 2.8.0 — course catalog cards with editable cover images */
.wugan-hsk-classroom-app .wvs-level-grid {
    align-items: stretch !important;
}
.wugan-hsk-classroom-app .wvs-level-card {
    display: flex !important;
    flex-direction: column !important;
    min-height: 390px !important;
    padding: 0 !important;
    overflow: hidden !important;
    text-align: left !important;
    border: 1px solid #dfe4ea !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .065) !important;
}
.wugan-hsk-classroom-app .wvs-level-card:hover {
    transform: translateY(-5px) !important;
    border-color: rgba(165, 22, 32, .32) !important;
    box-shadow: 0 18px 38px rgba(15, 23, 42, .12) !important;
}
.wugan-hsk-classroom-app .wvs-level-cover {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
    background: linear-gradient(145deg, #f8e8ea, #fff) !important;
    border-bottom: 1px solid #edf0f3 !important;
}
.wugan-hsk-classroom-app .wvs-level-cover img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform .35s ease !important;
}
.wugan-hsk-classroom-app .wvs-level-card:hover .wvs-level-cover img {
    transform: scale(1.035) !important;
}
.wugan-hsk-classroom-app .wvs-level-cover-placeholder {
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    place-content: center !important;
    gap: 5px !important;
    text-align: center !important;
    color: #8c1721 !important;
}
.wugan-hsk-classroom-app .wvs-level-cover-placeholder b {
    font-size: clamp(28px, 4vw, 48px) !important;
    line-height: 1 !important;
}
.wugan-hsk-classroom-app .wvs-level-cover-placeholder small {
    font-size: 10px !important;
    font-weight: 850 !important;
    letter-spacing: .15em !important;
}
.wugan-hsk-classroom-app .wvs-level-card-content {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    padding: 16px 17px 13px !important;
}
.wugan-hsk-classroom-app .wvs-level-category {
    margin-bottom: 7px !important;
    color: #7a8490 !important;
    font-size: 11px !important;
    font-style: normal !important;
    text-transform: lowercase !important;
}
.wugan-hsk-classroom-app .wvs-level-card-content > strong {
    color: #172033 !important;
    font-size: 18px !important;
    line-height: 1.35 !important;
}
.wugan-hsk-classroom-app .wvs-level-card-content > p {
    flex: 1 1 auto !important;
    margin: 7px 0 13px !important;
    color: #667085 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
}
.wugan-hsk-classroom-app .wvs-level-card-content > em {
    display: block !important;
    padding: 8px 10px !important;
    border-radius: 7px !important;
    background: #f1f4f7 !important;
    color: #485363 !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 700 !important;
}
.wugan-hsk-classroom-app .wvs-level-card .wvs-level-progress {
    display: grid !important;
    width: auto !important;
    margin: 0 17px 16px !important;
    gap: 7px !important;
}
.wugan-hsk-classroom-app .wvs-level-card .wvs-level-progress i {
    height: 5px !important;
    border-radius: 999px !important;
    background: #edf0f3 !important;
}
.wugan-hsk-classroom-app .wvs-level-card .wvs-level-progress b {
    background: #a51620 !important;
}
.wugan-hsk-classroom-app .wvs-level-card .wvs-level-progress span {
    color: #606b79 !important;
    font-size: 12px !important;
}
.wugan-hsk-classroom-app .wvs-course-level-head.has-cover {
    grid-template-columns: 160px minmax(0, 1fr) auto !important;
}
.wugan-hsk-classroom-app .wvs-course-level-cover {
    display: block !important;
    width: 160px !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    background: #f4f5f7 !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .09) !important;
}
.wugan-hsk-classroom-app .wvs-course-level-cover img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
@media (max-width: 760px) {
    .wugan-hsk-classroom-app .wvs-level-card { min-height: 0 !important; }
    .wugan-hsk-classroom-app .wvs-course-level-head.has-cover { grid-template-columns: 1fr !important; }
    .wugan-hsk-classroom-app .wvs-course-level-cover { width: min(100%, 320px) !important; }
}

/* 2.8.0 — learner-facing course catalog inspired by the LMS account dashboard */
.wugan-hsk-classroom-app .wco-dashboard-shell {
    background: #f6f7f9 !important;
}
.wugan-hsk-classroom-app .wco-dashboard-sidebar {
    background: #fff !important;
    border-right: 1px solid #e7eaf0 !important;
    box-shadow: 10px 0 32px rgba(15, 23, 42, .035) !important;
}
.wugan-hsk-classroom-app .wco-dashboard-topbar {
    background: rgba(255,255,255,.98) !important;
    border-bottom: 1px solid #e7eaf0 !important;
    box-shadow: 0 7px 24px rgba(15,23,42,.045) !important;
}
.wugan-hsk-classroom-app .wco-dashboard-content {
    background: #f6f7f9 !important;
}
.wugan-hsk-classroom-app .wco-student-catalog {
    display: grid;
    gap: 18px;
}
.wugan-hsk-classroom-app .wco-student-catalog-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 6px 2px 2px;
}
.wugan-hsk-classroom-app .wco-student-catalog-head > div:first-child > span {
    display: block;
    margin-bottom: 5px;
    color: #a51620;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
}
.wugan-hsk-classroom-app .wco-student-catalog-head h3 {
    margin: 0 0 5px !important;
    color: #172033 !important;
    font-size: clamp(24px, 3vw, 34px) !important;
    line-height: 1.15 !important;
}
.wugan-hsk-classroom-app .wco-student-catalog-head p {
    margin: 0 !important;
    color: #697586 !important;
    font-size: 14px !important;
}
.wugan-hsk-classroom-app .wco-student-account-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 190px;
    padding: 10px 13px;
    border: 1px solid #e1e5ea;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 5px 16px rgba(15,23,42,.04);
}
.wugan-hsk-classroom-app .wco-student-account-chip > span {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    background: #fff1f2;
    color: #a51620;
    font-weight: 850;
}
.wugan-hsk-classroom-app .wco-student-account-chip strong,
.wugan-hsk-classroom-app .wco-student-account-chip small { display:block; }
.wugan-hsk-classroom-app .wco-student-account-chip strong { color:#172033; font-size:13px; }
.wugan-hsk-classroom-app .wco-student-account-chip small { color:#8a94a3; font-size:10px; margin-top:2px; }
.wugan-hsk-classroom-app .wco-student-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 14px;
}
.wugan-hsk-classroom-app .wco-student-summary article {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 82px;
    padding: 16px 17px;
    border: 1px solid #e4e8ed;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 7px 20px rgba(15,23,42,.045);
}
.wugan-hsk-classroom-app .wco-student-summary article > span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 9px;
    background: #fff1f2;
    color: #a51620;
    font-size: 18px;
    font-weight: 800;
}
.wugan-hsk-classroom-app .wco-student-summary small,
.wugan-hsk-classroom-app .wco-student-summary strong { display:block; }
.wugan-hsk-classroom-app .wco-student-summary small { color:#7a8493; font-size:11px; }
.wugan-hsk-classroom-app .wco-student-summary strong { color:#172033; font-size:22px; margin-top:2px; }
.wugan-hsk-classroom-app .wco-student-course-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 15px;
    border: 1px solid #e4e8ed;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(15,23,42,.035);
}
.wugan-hsk-classroom-app .wco-student-course-toolbar > div {
    display: flex;
    gap: 4px;
}
.wugan-hsk-classroom-app .wco-student-course-toolbar button {
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #6b7584;
    padding: 8px 13px;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.wugan-hsk-classroom-app .wco-student-course-toolbar button:hover,
.wugan-hsk-classroom-app .wco-student-course-toolbar button.is-active {
    background: #fff1f2;
    color: #a51620;
}
.wugan-hsk-classroom-app .wco-student-course-toolbar > span {
    color: #7a8493;
    font-size: 12px;
}
.wugan-hsk-classroom-app .wco-student-course-grid {
    grid-template-columns: repeat(3, minmax(220px,1fr)) !important;
    gap: 18px !important;
}
.wugan-hsk-classroom-app .wco-student-course-card,
.wugan-hsk-classroom-app .wco-student-course-card::before,
.wugan-hsk-classroom-app .wco-student-course-card::after,
.wugan-hsk-classroom-app .wco-student-course-card *::before,
.wugan-hsk-classroom-app .wco-student-course-card *::after {
    content: none !important;
}
.wugan-hsk-classroom-app .wco-student-course-card {
    min-height: 0 !important;
    border: 1px solid #dfe4ea !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: 0 8px 22px rgba(15,23,42,.055) !important;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}
.wugan-hsk-classroom-app .wco-student-course-card[hidden] { display:none !important; }
.wugan-hsk-classroom-app .wco-student-course-card:hover {
    transform: translateY(-4px) !important;
    border-color: #d7b4ba !important;
    box-shadow: 0 15px 34px rgba(15,23,42,.105) !important;
}
.wugan-hsk-classroom-app .wco-student-course-card .wvs-level-cover {
    aspect-ratio: 16/9 !important;
    border-bottom: 1px solid #edf0f3 !important;
}
.wugan-hsk-classroom-app .wco-student-course-card .wvs-level-card-content {
    padding: 14px 15px 15px !important;
}
.wugan-hsk-classroom-app .wco-student-course-card .wvs-level-category {
    color: #7a8490 !important;
    font-size: 10px !important;
    text-transform: none !important;
}
.wugan-hsk-classroom-app .wco-student-course-card .wvs-level-card-content > strong {
    min-height: 46px;
    color: #172033 !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
}
.wugan-hsk-classroom-app .wco-student-course-card .wvs-level-card-content > p {
    min-height: 58px;
    margin: 6px 0 12px !important;
    overflow: hidden;
    color: #687385 !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
}
.wugan-hsk-classroom-app .wco-student-course-card .wvs-level-card-content > em {
    display: flex !important;
    align-items: center;
    gap: 6px;
    padding: 7px 9px !important;
    border-radius: 6px !important;
    background: #f0f3f7 !important;
    color: #526071 !important;
    font-size: 11px !important;
}
.wugan-hsk-classroom-app .wco-course-card-progress {
    display: grid;
    gap: 6px;
    margin-top: 12px;
}
.wugan-hsk-classroom-app .wco-course-card-progress i {
    display: block;
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: #edf0f3;
}
.wugan-hsk-classroom-app .wco-course-card-progress b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #a51620;
}
.wugan-hsk-classroom-app .wco-course-card-progress small {
    color: #7b8594;
    font-size: 10px;
}
.wugan-hsk-classroom-app .wco-course-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid #edf0f3;
    color: #a51620;
    font-size: 10px;
    font-weight: 750;
}
.wugan-hsk-classroom-app .wco-course-status {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 7px;
    border-radius: 5px;
    background: #f2f4f7;
    color: #667085;
}
.wugan-hsk-classroom-app .wco-course-status.is-learning { background:#fff4e7; color:#a85b00; }
.wugan-hsk-classroom-app .wco-course-status.is-completed { background:#eaf8ef; color:#14753c; }
@media (max-width: 1180px) {
    .wugan-hsk-classroom-app .wco-student-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .wugan-hsk-classroom-app .wco-student-course-grid { grid-template-columns: repeat(2,minmax(220px,1fr)) !important; }
}
@media (max-width: 760px) {
    .wugan-hsk-classroom-app .wco-student-catalog-head { align-items:flex-start; flex-direction:column; }
    .wugan-hsk-classroom-app .wco-student-account-chip { width:100%; }
    .wugan-hsk-classroom-app .wco-student-summary { grid-template-columns: 1fr; }
    .wugan-hsk-classroom-app .wco-student-course-toolbar { align-items:flex-start; flex-direction:column; }
    .wugan-hsk-classroom-app .wco-student-course-toolbar > div { width:100%; overflow-x:auto; }
    .wugan-hsk-classroom-app .wco-student-course-grid { grid-template-columns: 1fr !important; }
}

/* ========================================================================== 
   v2.8.3 — E-learning UI refinement (MasterStudy / Tutor-style structure)
   Giao diện phẳng, có hệ thống, giảm hiệu ứng trang trí và sửa viền sidebar.
   ========================================================================== */
.wugan-hsk-classroom-app {
    --wco-ui-accent: #a51620;
    --wco-ui-accent-soft: #fff5f6;
    --wco-ui-ink: #1f2937;
    --wco-ui-muted: #667085;
    --wco-ui-line: #e6e9ee;
    --wco-ui-page: #f5f6f8;
    background: var(--wco-ui-page) !important;
    color: var(--wco-ui-ink) !important;
}
.wugan-hsk-classroom-app .wco-dashboard-shell,
.wugan-hsk-classroom-app .wco-dashboard-shell *,
.wugan-hsk-classroom-app .wco-dashboard-shell *::before,
.wugan-hsk-classroom-app .wco-dashboard-shell *::after { box-sizing: border-box; }
.wugan-hsk-classroom-app .wco-dashboard-shell {
    grid-template-columns: 252px minmax(0,1fr) !important;
    width: min(1460px, calc(100% - 32px)) !important;
    margin: 16px auto !important;
    border: 1px solid #e1e5ea !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 12px 34px rgba(16,24,40,.075) !important;
}
.wugan-hsk-classroom-app .wco-dashboard-sidebar {
    padding: 18px 14px 14px !important;
    border-right: 1px solid var(--wco-ui-line) !important;
    background: #fff !important;
}
.wugan-hsk-classroom-app .wco-sidebar-brand {
    min-height: 70px;
    padding: 5px 7px 18px !important;
    border-bottom: 1px solid #edf0f3 !important;
}
.wugan-hsk-classroom-app .wco-sidebar-brand .wvs-mini-mascot {
    width: 44px !important;
    height: 44px !important;
    border: 1px solid #ead6d9 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}
.wugan-hsk-classroom-app .wco-sidebar-brand strong {
    color: #171a20 !important;
    font-size: 18px !important;
    letter-spacing: .045em !important;
}
.wugan-hsk-classroom-app .wco-sidebar-brand small {
    margin-top: 2px;
    color: var(--wco-ui-accent) !important;
    font-size: 10px !important;
    letter-spacing: .08em !important;
}
.wugan-hsk-classroom-app .wco-sidebar-nav { gap: 5px !important; padding-top: 16px !important; }
.wugan-hsk-classroom-app [data-course-sidebar] { display: grid; gap: 5px; width: 100%; }
.wugan-hsk-classroom-app .wco-sidebar-group-title {
    padding: 17px 10px 7px !important;
    color: #98a0ad !important;
    font-size: 10px !important;
    letter-spacing: .1em !important;
}
.wugan-hsk-classroom-app .wco-sidebar-nav > button,
.wugan-hsk-classroom-app .wco-sidebar-course {
    width: 100% !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    overflow: hidden !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #4b5563 !important;
    transform: none !important;
}
.wugan-hsk-classroom-app .wco-sidebar-nav > button::before,
.wugan-hsk-classroom-app .wco-sidebar-nav > button::after,
.wugan-hsk-classroom-app .wco-sidebar-course::before,
.wugan-hsk-classroom-app .wco-sidebar-course::after { display: none !important; content: none !important; }
.wugan-hsk-classroom-app .wco-sidebar-nav > button:hover,
.wugan-hsk-classroom-app .wco-sidebar-course:hover {
    border-color: #e9ebef !important;
    background: #f8f9fb !important;
    color: #171a20 !important;
}
.wugan-hsk-classroom-app .wco-sidebar-nav > button.is-active,
.wugan-hsk-classroom-app .wco-sidebar-course.is-active {
    padding-left: 8px !important;
    border: 1px solid #efcfd4 !important;
    border-left: 4px solid var(--wco-ui-accent) !important;
    border-radius: 10px !important;
    background: var(--wco-ui-accent-soft) !important;
    box-shadow: none !important;
    color: var(--wco-ui-accent) !important;
}
.wugan-hsk-classroom-app .wco-sidebar-nav > button > span,
.wugan-hsk-classroom-app .wco-sidebar-course > span {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background: #f0f2f5 !important;
    color: #525b68 !important;
}
.wugan-hsk-classroom-app .wco-sidebar-nav > button.is-active > span,
.wugan-hsk-classroom-app .wco-sidebar-course.is-active > span {
    background: var(--wco-ui-accent) !important;
    color: #fff !important;
}
.wugan-hsk-classroom-app .wco-sidebar-course strong { font-size: 14px !important; font-weight: 720 !important; }
.wugan-hsk-classroom-app .wco-sidebar-course small { color: #8b94a1 !important; font-size: 11px !important; }
.wugan-hsk-classroom-app .wco-sidebar-account { padding-top: 14px !important; }
.wugan-hsk-classroom-app .wco-sidebar-account > span {
    border-radius: 9px !important;
    background: var(--wco-ui-accent-soft) !important;
    color: var(--wco-ui-accent) !important;
}
.wugan-hsk-classroom-app .wco-dashboard-frame,
.wugan-hsk-classroom-app .wco-dashboard-content { background: var(--wco-ui-page) !important; }
.wugan-hsk-classroom-app .wco-dashboard-topbar {
    min-height: 84px !important;
    padding: 14px 22px !important;
    border-bottom: 1px solid var(--wco-ui-line) !important;
    background: #fff !important;
    box-shadow: none !important;
}
.wugan-hsk-classroom-app .wco-topbar-title h2 { color: #18202b !important; font-size: clamp(21px,2vw,27px) !important; }
.wugan-hsk-classroom-app .wco-topbar-title p { color: #7a8492 !important; }
.wugan-hsk-classroom-app .wco-learning-toolbar { gap: 9px !important; }
.wugan-hsk-classroom-app .wco-toolbar-item {
    min-height: 54px;
    padding: 9px 11px !important;
    border: 1px solid #e6e9ed !important;
    border-radius: 9px !important;
    background: #fff !important;
    box-shadow: none !important;
}
.wugan-hsk-classroom-app .wco-toolbar-item > span {
    border-radius: 7px !important;
    background: var(--wco-ui-accent-soft) !important;
    color: var(--wco-ui-accent) !important;
}
.wugan-hsk-classroom-app .wco-dashboard-content { padding: 24px !important; }
.wugan-hsk-classroom-app .wco-student-catalog { gap: 20px !important; }
.wugan-hsk-classroom-app .wco-student-catalog-head {
    padding: 0 !important;
    align-items: flex-end !important;
}
.wugan-hsk-classroom-app .wco-student-catalog-head > div:first-child > span {
    margin-bottom: 7px !important;
    color: var(--wco-ui-accent) !important;
    font-size: 10px !important;
    letter-spacing: .09em !important;
}
.wugan-hsk-classroom-app .wco-student-catalog-head h3 {
    color: #172033 !important;
    font-size: clamp(25px,3vw,32px) !important;
    font-weight: 760 !important;
}
.wugan-hsk-classroom-app .wco-student-account-chip,
.wugan-hsk-classroom-app .wco-student-summary article,
.wugan-hsk-classroom-app .wco-student-course-toolbar {
    border: 1px solid var(--wco-ui-line) !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: 0 4px 13px rgba(16,24,40,.035) !important;
}
.wugan-hsk-classroom-app .wco-student-summary article {
    min-height: 86px !important;
    padding: 16px 18px !important;
}
.wugan-hsk-classroom-app .wco-student-summary article > span {
    border-radius: 8px !important;
    background: var(--wco-ui-accent-soft) !important;
    color: var(--wco-ui-accent) !important;
}
.wugan-hsk-classroom-app .wco-student-course-toolbar button { border-radius: 7px !important; }
.wugan-hsk-classroom-app .wco-student-course-toolbar button:hover,
.wugan-hsk-classroom-app .wco-student-course-toolbar button.is-active {
    background: var(--wco-ui-accent-soft) !important;
    color: var(--wco-ui-accent) !important;
}
.wugan-hsk-classroom-app .wco-student-course-grid { gap: 20px !important; }
.wugan-hsk-classroom-app .wco-student-course-card {
    overflow: hidden !important;
    border: 1px solid #e0e4ea !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 6px 18px rgba(16,24,40,.05) !important;
}
.wugan-hsk-classroom-app .wco-student-course-card:hover {
    transform: translateY(-3px) !important;
    border-color: #d8b2b8 !important;
    box-shadow: 0 13px 28px rgba(16,24,40,.09) !important;
}
.wugan-hsk-classroom-app .wco-student-course-card .wvs-level-cover {
    overflow: hidden !important;
    border: 0 !important;
    border-bottom: 1px solid #edf0f3 !important;
    border-radius: 0 !important;
    background: #f0f2f5 !important;
}
.wugan-hsk-classroom-app .wco-student-course-card .wvs-level-card-content { padding: 16px 17px 17px !important; }
.wugan-hsk-classroom-app .wco-student-course-card .wvs-level-card-content > strong {
    min-height: 44px !important;
    color: #172033 !important;
    font-size: 17px !important;
    font-weight: 740 !important;
}
.wugan-hsk-classroom-app .wco-student-course-card .wvs-level-card-content > p {
    color: #687385 !important;
    font-size: 13px !important;
}
.wugan-hsk-classroom-app .wco-student-course-card .wvs-level-card-content > em {
    border: 1px solid #e8ebef !important;
    border-radius: 7px !important;
    background: #f7f8fa !important;
}
.wugan-hsk-classroom-app .wco-course-card-progress b { background: var(--wco-ui-accent) !important; }
.wugan-hsk-classroom-app .wco-course-card-footer { color: var(--wco-ui-accent) !important; }

/* Màn hình khóa học/bài học cũng dùng cùng hệ thống thẻ, không dùng khối kính giả. */
.wugan-hsk-classroom-app .wvs-course-level-hero,
.wugan-hsk-classroom-app .wvs-course-lesson-card,
.wugan-hsk-classroom-app .wco-lesson-module,
.wugan-hsk-classroom-app .wvs-study-panel,
.wugan-hsk-classroom-app .wvs-course-paywall {
    border: 1px solid var(--wco-ui-line) !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 5px 16px rgba(16,24,40,.045) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.wugan-hsk-classroom-app .wvs-course-level-hero::before,
.wugan-hsk-classroom-app .wvs-course-level-hero::after,
.wugan-hsk-classroom-app .wvs-course-lesson-card::before,
.wugan-hsk-classroom-app .wvs-course-lesson-card::after,
.wugan-hsk-classroom-app .wco-lesson-module::before,
.wugan-hsk-classroom-app .wco-lesson-module::after { display:none !important; content:none !important; }
.wugan-hsk-classroom-app .wvs-course-lesson-card:hover {
    transform: translateY(-2px) !important;
    border-color: #d9b8bd !important;
    box-shadow: 0 10px 24px rgba(16,24,40,.075) !important;
}
.wugan-hsk-classroom-app .wco-module-toggle {
    border-radius: 11px 11px 0 0 !important;
    background: #fff !important;
}
.wugan-hsk-classroom-app .wco-module-body { background: #fafbfc !important; }

@media (max-width: 1080px) {
    .wugan-hsk-classroom-app .wco-dashboard-shell { grid-template-columns: 88px minmax(0,1fr) !important; }
}
@media (max-width: 760px) {
    .wugan-hsk-classroom-app .wco-dashboard-shell { width: 100% !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; }
    .wugan-hsk-classroom-app .wco-dashboard-content { padding: 14px !important; }
}

/* === 2.8.5: tiêu đề bài học, dữ liệu sạch và màu giao diện đồng bộ === */
.wugan-hsk-classroom-app .wvs-course-lesson-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(230px, 310px) !important;
    gap: 24px !important;
    align-items: center !important;
    padding: 24px !important;
    border: 1px solid var(--wco-border-solid, #e4e7ec) !important;
    border-top-width: 1px !important;
    border-left-width: 1px !important;
    border-radius: 16px !important;
    background: #fff !important;
}
.wugan-hsk-classroom-app .wco-lesson-head-main {
    display: grid;
    grid-template-columns: clamp(110px, 17vw, 190px) minmax(0, 1fr);
    gap: clamp(18px, 2.4vw, 28px);
    align-items: center;
    min-width: 0;
}
.wugan-hsk-classroom-app .wco-lesson-head-copy { min-width: 0; }
.wugan-hsk-classroom-app .wco-lesson-head-image {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid var(--wco-border-solid, #e4e7ec);
    border-radius: 13px;
    background: #f6f7f9;
}
.wugan-hsk-classroom-app .wco-lesson-head-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.wugan-hsk-classroom-app .wco-lesson-head-image.is-default {
    display: grid;
    place-items: center;
    padding: 18px;
    background: linear-gradient(145deg, var(--wco-ui-accent-soft, #fff1f2), #fff);
    color: var(--wco-accent, #a51620);
    font-weight: 850;
    letter-spacing: .08em;
}
.wugan-hsk-classroom-app .wco-lesson-head-image.is-default img {
    width: min(72%, 110px);
    height: auto;
    max-height: 72%;
    object-fit: contain;
}
.wugan-hsk-classroom-app .wvs-course-lesson-head h3 {
    margin-top: 5px !important;
    font-family: inherit !important;
    font-size: clamp(26px, 3.2vw, 38px) !important;
    line-height: 1.2 !important;
}
.wugan-hsk-classroom-app .wco-lesson-title-hanzi {
    margin-top: 8px;
    font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: clamp(21px, 2.5vw, 30px);
    line-height: 1.35;
}
.wugan-hsk-classroom-app .wvs-pinyin::before,
.wugan-hsk-classroom-app .wvs-pinyin::after,
.wugan-hsk-classroom-app .wvs-meaning::before,
.wugan-hsk-classroom-app .wvs-meaning::after,
.wugan-hsk-classroom-app .wco-lesson-title-hanzi::before,
.wugan-hsk-classroom-app .wco-lesson-title-hanzi::after,
.wugan-hsk-classroom-app .wco-lesson-title-vi::before,
.wugan-hsk-classroom-app .wco-lesson-title-vi::after {
    content: none !important;
    display: none !important;
}
@media (max-width: 920px) {
    .wugan-hsk-classroom-app .wvs-course-lesson-head {
        grid-template-columns: 1fr !important;
    }
    .wugan-hsk-classroom-app .wvs-course-lesson-side {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 620px) {
    .wugan-hsk-classroom-app .wco-lesson-head-main {
        grid-template-columns: 1fr;
    }
    .wugan-hsk-classroom-app .wco-lesson-head-image {
        max-height: 210px;
    }
    .wugan-hsk-classroom-app .wvs-course-lesson-side {
        grid-template-columns: 1fr;
    }
}

/* === 2.9.0: bố cục ảnh bài học + MODULE kỹ năng nâng cao === */
.wugan-hsk-classroom-app .wvs-course-lesson-head.has-lesson-image {
    grid-template-columns: minmax(0, 1fr) minmax(230px, 34%) !important;
    align-items: center !important;
}
.wugan-hsk-classroom-app .wvs-course-lesson-head.has-lesson-image .wco-lesson-head-main { display: contents !important; }
.wugan-hsk-classroom-app .wvs-course-lesson-head.has-lesson-image .wco-lesson-head-copy { grid-column: 1; grid-row: 1; padding: 8px 8px 8px 4px; }
.wugan-hsk-classroom-app .wvs-course-lesson-head.has-lesson-image .wco-lesson-head-image {
    grid-column: 2; grid-row: 1; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 14px; background: transparent;
}
.wugan-hsk-classroom-app .wvs-course-lesson-head.has-lesson-image .wco-lesson-head-image img { object-fit: contain; }
.wugan-hsk-classroom-app .wvs-course-lesson-head.has-lesson-image .wvs-course-lesson-side {
    grid-column: 1 / -1; width: 100%; display: grid; grid-template-columns: minmax(0,1fr) minmax(230px,320px); gap: 16px; align-items: center;
    padding-top: 16px; border-top: 1px solid #edf0f3;
}
.wugan-hsk-classroom-app .wvs-course-lesson-head.no-lesson-image .wco-lesson-head-main { display: block !important; }
.wugan-hsk-classroom-app .wvs-course-lesson-head.no-lesson-image .wco-lesson-head-copy { padding: 0; }

.wco-hanzi-analysis-intro,.wco-dialogue-summary { display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:22px 24px;border-bottom:1px solid #eceff3;background:#fff; }
.wco-hanzi-analysis-intro span,.wco-dialogue-summary span,.wco-image-speaking-task>span { display:block;color:var(--wco-accent,#a51620);font-size:11px;font-weight:850;letter-spacing:.12em; }
.wco-hanzi-analysis-intro h4,.wco-dialogue-summary h4,.wco-image-speaking-task h4 { margin:5px 0 6px;font-size:23px;color:#161b26; }
.wco-hanzi-analysis-intro p,.wco-dialogue-summary p { margin:0;color:#667085; }
.wco-hanzi-analysis-intro em,.wco-dialogue-summary em { min-width:64px;padding:8px 12px;border-radius:999px;background:var(--wco-ui-accent-soft,#fff1f2);color:var(--wco-accent,#a51620);font-style:normal;font-weight:800;text-align:center; }
.wco-hanzi-word-list { display:grid;gap:16px;padding:20px; }
.wco-hanzi-word-card { border:1px solid #e6e9ee;border-radius:16px;background:#fff;box-shadow:0 8px 24px rgba(16,24,40,.045);overflow:hidden; }
.wco-hanzi-word-card>header { display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 20px;background:#fbfcfd;border-bottom:1px solid #edf0f3; }
.wco-hanzi-word-card>header>div { display:flex;align-items:baseline;gap:12px;flex-wrap:wrap; }
.wco-hanzi-word-card>header small { color:var(--wco-accent,#a51620);font-weight:850; }
.wco-hanzi-word-card>header strong { font-size:34px;color:#171b24; }
.wco-hanzi-word-card>header span { color:#667085;font-size:16px; }
.wco-hanzi-word-card>header button,.wco-hanzi-character-symbol button { width:42px;height:42px;border:0;border-radius:50%;display:grid;place-items:center;background:var(--wco-ui-accent-soft,#fff1f2);color:var(--wco-accent,#a51620);cursor:pointer; }
.wco-hanzi-word-card>header button svg,.wco-hanzi-character-symbol button svg { width:20px;height:20px; }
.wco-hanzi-word-card>p { margin:0;padding:13px 20px;color:#475467;font-weight:700; }
.wco-hanzi-character-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;padding:0 20px 20px; }
.wco-hanzi-character-card { padding:17px;border:1px solid #e7e9ee;border-radius:14px;background:#fff; }
.wco-hanzi-character-symbol { display:flex;align-items:center;justify-content:space-between;gap:12px; }
.wco-hanzi-character-symbol strong { font-size:54px;line-height:1;color:#161b26; }
.wco-hanzi-character-card>span { display:block;margin:6px 0 12px;color:#667085;font-size:15px; }
.wco-hanzi-character-card dl { display:grid;gap:7px;margin:0; }
.wco-hanzi-character-card dl>div { display:grid;grid-template-columns:72px 1fr;gap:8px; }
.wco-hanzi-character-card dt { color:#98a2b3;font-size:12px; }
.wco-hanzi-character-card dd { margin:0;color:#344054;font-weight:750; }
.wco-hanzi-character-card>p { margin:12px 0 0;padding-top:12px;border-top:1px solid #edf0f3;color:#667085;font-size:13px;line-height:1.55; }

.wco-dialogue-list { display:grid;gap:10px;padding:18px; }
.wco-dialogue-line { display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:16px;align-items:center;padding:17px;border:1px solid #e6e9ee;border-radius:14px;background:#fff;transition:.22s ease; }
.wco-dialogue-line.is-active { border-color:color-mix(in srgb,var(--wco-accent,#a51620) 38%,#fff);box-shadow:0 8px 22px rgba(16,24,40,.06); }
.wco-dialogue-line.is-locked { opacity:.5;background:#f8f9fb; }
.wco-dialogue-line.is-passed { border-left:4px solid #1d9a6c; }
.wco-dialogue-line.is-failed { border-left:4px solid #d97706; }
.wco-dialogue-number { display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#f3f4f6;color:#475467;font-weight:850; }
.wco-dialogue-copy small { display:block;color:var(--wco-accent,#a51620);font-weight:850; }
.wco-dialogue-copy strong { display:block;margin:3px 0;font-size:20px;color:#171b24; }
.wco-dialogue-copy span { color:#667085; }
.wco-dialogue-copy p { margin:4px 0 0;color:#475467; }
.wco-dialogue-result { margin-top:8px;padding:8px 10px;border-radius:8px;background:#f6f7f9;color:#475467;font-size:12px; }
.wco-dialogue-actions { display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end; }
.wco-dialogue-actions button,.wco-dialogue-finish button { display:inline-flex;align-items:center;gap:7px;padding:10px 12px;border:1px solid #e1e5ea;border-radius:10px;background:#fff;color:#344054;font-weight:750;cursor:pointer; }
.wco-dialogue-actions button.is-record { border-color:var(--wco-accent,#a51620);color:var(--wco-accent,#a51620); }
.wco-dialogue-actions button svg { width:18px;height:18px; }
.wco-dialogue-finish { margin:0 18px 18px;padding:17px;border-radius:14px;background:#f6fbf8;border:1px solid #cce9db; }
.wco-dialogue-finish.is-review { background:#fff9ed;border-color:#f4d49a; }
.wco-dialogue-finish p { margin:5px 0 12px;color:#667085; }

.wco-image-speaking { padding:20px; }
.wco-image-speaking-layout { display:grid;grid-template-columns:minmax(280px,1.05fr) minmax(260px,.95fr);gap:24px;align-items:stretch; }
.wco-image-speaking figure { margin:0;min-height:320px;border-radius:16px;overflow:hidden;background:#f3f4f6; }
.wco-image-speaking figure img { width:100%;height:100%;display:block;object-fit:contain; }
.wco-image-speaking-task { display:flex;flex-direction:column;justify-content:center;padding:24px;border:1px solid #e6e9ee;border-radius:16px;background:#fff; }
.wco-image-speaking-task p { color:#475467;font-size:16px;line-height:1.65; }
.wco-image-speaking-task small { margin-top:14px;color:#667085;line-height:1.5; }
.wco-image-speaking-actions { display:flex;gap:10px;flex-wrap:wrap;margin-top:15px; }
.wco-image-speaking-actions button { display:inline-flex;align-items:center;gap:8px;padding:12px 15px;border:1px solid #e1e5ea;border-radius:11px;background:#fff;color:#344054;font-weight:800;cursor:pointer; }
.wco-image-speaking-actions button:first-child { border-color:var(--wco-accent,#a51620);background:var(--wco-accent,#a51620);color:#fff; }
.wco-image-speaking-actions button:disabled { opacity:.45;cursor:not-allowed; }
.wco-image-speaking-actions svg { width:19px;height:19px; }
.wco-image-speaking-result { display:grid;gap:12px;margin-top:18px;padding:20px;border:1px solid #e6e9ee;border-radius:16px;background:#fbfcfd; }
.wco-image-speaking-result small { color:#98a2b3;font-weight:750; }
.wco-image-speaking-result strong { display:block;margin:5px 0;font-size:24px; }
.wco-image-speaking-result span { color:#667085; }
.wco-image-speaking-result p { margin:5px 0; }
.wco-image-speaking-result ul { margin:0;padding-left:20px;color:#475467; }
.wco-image-speaking-result em { color:var(--wco-accent,#a51620);font-style:normal;font-weight:800; }

.wco-sentence-analysis.is-review .wco-sentence-score strong { color:#b42318 !important;font-size:21px !important; }
.wco-sentence-analysis.is-success .wco-sentence-score strong { color:#067647 !important;font-size:21px !important; }

@media (max-width:900px){
 .wugan-hsk-classroom-app .wvs-course-lesson-head.has-lesson-image{grid-template-columns:1fr !important}
 .wugan-hsk-classroom-app .wvs-course-lesson-head.has-lesson-image .wco-lesson-head-copy,.wugan-hsk-classroom-app .wvs-course-lesson-head.has-lesson-image .wco-lesson-head-image{grid-column:1;grid-row:auto}
 .wugan-hsk-classroom-app .wvs-course-lesson-head.has-lesson-image .wco-lesson-head-image{max-height:320px}
 .wugan-hsk-classroom-app .wvs-course-lesson-head.has-lesson-image .wvs-course-lesson-side{grid-column:1;grid-template-columns:1fr}
 .wco-image-speaking-layout{grid-template-columns:1fr}
 .wco-dialogue-line{grid-template-columns:42px minmax(0,1fr)}
 .wco-dialogue-actions{grid-column:2;justify-content:flex-start}
}
@media (max-width:600px){
 .wco-hanzi-word-list,.wco-dialogue-list,.wco-image-speaking{padding:12px}
 .wco-hanzi-character-grid{grid-template-columns:1fr;padding:0 12px 12px}
 .wco-hanzi-word-card>header{padding:14px}
 .wco-image-speaking figure{min-height:220px}
}

/* 2.9.1 — simplified modern lesson UI hotfix */
.wugan-hsk-classroom-app .wco-dashboard-shell,
.wugan-hsk-classroom-app .wco-dashboard-frame,
.wugan-hsk-classroom-app .wco-dashboard-content,
.wugan-hsk-classroom-app .wco-student-shell,
.wugan-hsk-classroom-app .wco-student-catalog,
.wugan-hsk-classroom-app .wco-student-course-view {
    background: transparent !important;
    box-shadow: none !important;
}
.wugan-hsk-classroom-app .wco-dashboard-shell,
.wugan-hsk-classroom-app .wco-dashboard-frame,
.wugan-hsk-classroom-app .wco-student-shell {
    border: 0 !important;
}
.wugan-hsk-classroom-app .wco-dashboard-content {
    padding-left: 20px !important;
    border-left: 0 !important;
}
.wugan-hsk-classroom-app .wvs-course-source-note { display:none !important; }
.wugan-hsk-classroom-app .wvs-course-lesson-head {
    border: 1px solid #eceef2 !important;
    border-left: 0 !important;
    border-radius: 24px !important;
    box-shadow: none !important;
    background: #fff !important;
    padding: 28px !important;
}
.wugan-hsk-classroom-app .wco-lesson-head-main { gap: 22px !important; align-items: center !important; }
.wugan-hsk-classroom-app .wco-lesson-head-image {
    border-radius: 22px !important;
    background: #f8fafc !important;
    border: 1px solid #edf1f5 !important;
    box-shadow: none !important;
}
.wugan-hsk-classroom-app .wco-lesson-head-copy > span,
.wugan-hsk-classroom-app .wco-sidebar-brand small,
.wugan-hsk-classroom-app .wco-module-index {
    letter-spacing: .12em !important;
}
.wugan-hsk-classroom-app .wco-lesson-module {
    border: 1px solid #ebeef2 !important;
    border-radius: 22px !important;
    background: #fff !important;
    box-shadow: none !important;
    overflow: hidden !important;
}
.wugan-hsk-classroom-app .wco-module-toggle {
    padding: 24px 26px !important;
    background: #fff !important;
}
.wugan-hsk-classroom-app .wco-module-toggle > div strong { font-size: 18px !important; }
.wugan-hsk-classroom-app .wco-module-toggle > div small { color:#7f8794 !important; font-size:13px !important; }
.wugan-hsk-classroom-app .wco-module-body {
    padding: 0 26px 26px !important;
    border-top: 1px solid #f0f3f7 !important;
    background: #fff !important;
}
.wugan-hsk-classroom-app .wco-hanzi-analysis-modern { display:grid; gap:22px; }
.wugan-hsk-classroom-app .wco-hanzi-analysis-head {
    display:flex; justify-content:space-between; gap:16px; align-items:flex-end;
    padding: 22px 24px; border:1px solid #ebeff4; border-radius:22px; background:#f8fbff;
}
.wugan-hsk-classroom-app .wco-hanzi-analysis-head span { color:#2368d1; font-size:12px; font-weight:800; letter-spacing:.12em; }
.wugan-hsk-classroom-app .wco-hanzi-analysis-head h4 { margin:6px 0 4px; font-size:24px; }
.wugan-hsk-classroom-app .wco-hanzi-analysis-head p { margin:0; color:#697586; }
.wugan-hsk-classroom-app .wco-hanzi-analysis-head em {
    font-style:normal; font-weight:800; color:#2368d1; background:#eaf2ff; padding:10px 14px; border-radius:999px;
}
.wugan-hsk-classroom-app .wco-hanzi-board-list { display:grid; gap:18px; }
.wugan-hsk-classroom-app .wco-hanzi-board {
    border:1px solid #ebeff4; border-radius:24px; background:#fff; padding:22px; box-shadow:none;
}
.wugan-hsk-classroom-app .wco-hanzi-board-head { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:18px; }
.wugan-hsk-classroom-app .wco-hanzi-board-head small { color:#2368d1; font-weight:800; letter-spacing:.12em; }
.wugan-hsk-classroom-app .wco-hanzi-board-head h5 { margin:6px 0 6px; font-size:28px; line-height:1.2; }
.wugan-hsk-classroom-app .wco-hanzi-board-head h5 em { font-style:normal; color:#4f5d73; font-size:.84em; }
.wugan-hsk-classroom-app .wco-hanzi-board-head p { margin:0; color:#697586; font-size:16px; }
.wugan-hsk-classroom-app .wco-hanzi-board-audio {
    width:52px; height:52px; border-radius:50%; border:1px solid #dbe7fb; background:#f4f8ff; color:#2368d1;
}
.wugan-hsk-classroom-app .wco-hanzi-board-grid { display:flex; align-items:stretch; flex-wrap:wrap; gap:14px; }
.wugan-hsk-classroom-app .wco-hanzi-piece-link { align-self:center; color:#7ca2de; font-size:26px; font-weight:800; }
.wugan-hsk-classroom-app .wco-hanzi-piece {
    flex:1 1 260px; min-width:240px; display:grid; gap:16px; padding:18px;
    border:1px solid #e8edf4; border-radius:22px; background:#fbfdff;
}
.wugan-hsk-classroom-app .wco-hanzi-piece-glyph { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.wugan-hsk-classroom-app .wco-hanzi-piece-glyph strong {
    display:grid; place-items:center; width:102px; height:102px; border:1px solid #d9e6f8; border-radius:18px;
    background:#fff; font-size:58px; line-height:1; font-weight:500;
}
.wugan-hsk-classroom-app .wco-hanzi-piece-glyph button {
    width:42px; height:42px; border-radius:50%; border:1px solid #dbe7fb; background:#fff; color:#2368d1;
}
.wugan-hsk-classroom-app .wco-hanzi-piece-copy { display:grid; gap:12px; }
.wugan-hsk-classroom-app .wco-hanzi-piece-pinyin { font-size:24px; font-weight:800; color:#101828; }
.wugan-hsk-classroom-app .wco-hanzi-piece-meta { display:grid; gap:10px; }
.wugan-hsk-classroom-app .wco-hanzi-piece-meta span,
.wugan-hsk-classroom-app .wco-hanzi-piece-note {
    display:block; padding:12px 14px; border-radius:16px; background:#fff; border:1px solid #ecf0f5; color:#4a5667;
}
.wugan-hsk-classroom-app .wco-hanzi-piece-meta b { display:block; margin-bottom:4px; color:#2368d1; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.wugan-hsk-classroom-app .wco-hanzi-board-memory {
    margin-top:18px; padding:16px 18px; border-radius:18px; background:#eef5ff; color:#304255;
}
.wugan-hsk-classroom-app .wco-hanzi-board-memory strong { display:block; margin-bottom:8px; color:#2368d1; }
.wugan-hsk-classroom-app .wco-hanzi-board-memory ul { margin:0; padding-left:18px; display:grid; gap:7px; }
.wugan-hsk-classroom-app .wco-image-speaking { display:grid; gap:18px; }
.wugan-hsk-classroom-app .wco-image-speaking-layout {
    display:grid; grid-template-columns:minmax(280px,420px) minmax(0,1fr); gap:22px; align-items:stretch;
}
.wugan-hsk-classroom-app .wco-image-speaking-layout figure {
    margin:0; border-radius:24px; overflow:hidden; border:1px solid #ebeff4; background:#fff; min-height:280px;
}
.wugan-hsk-classroom-app .wco-image-speaking-layout figure img { width:100%; height:100%; object-fit:cover; display:block; }
.wugan-hsk-classroom-app .wco-image-speaking-task,
.wugan-hsk-classroom-app .wco-image-speaking-live,
.wugan-hsk-classroom-app .wco-image-speaking-result {
    border:1px solid #ebeff4; border-radius:24px; background:#fff; padding:22px;
}
.wugan-hsk-classroom-app .wco-image-speaking-task > span { color:#2368d1; font-size:12px; font-weight:800; letter-spacing:.12em; }
.wugan-hsk-classroom-app .wco-image-speaking-task h4 { margin:6px 0 8px; font-size:28px; }
.wugan-hsk-classroom-app .wco-image-speaking-task p { margin:0; color:#697586; }
.wugan-hsk-classroom-app .wco-image-speaking-topmeta { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:18px; }
.wugan-hsk-classroom-app .wco-image-speaking-timerbox,
.wugan-hsk-classroom-app .wco-image-speaking-note {
    padding:16px 18px; border-radius:18px; background:#f8fbff; border:1px solid #ebeff4;
}
.wugan-hsk-classroom-app .wco-image-speaking-timerbox small,
.wugan-hsk-classroom-app .wco-image-speaking-note small,
.wugan-hsk-classroom-app .wco-image-speaking-livehead small,
.wugan-hsk-classroom-app .wco-image-speaking-result small { display:block; color:#7b8794; }
.wugan-hsk-classroom-app .wco-image-speaking-timerbox strong,
.wugan-hsk-classroom-app .wco-image-speaking-note strong { display:block; margin-top:6px; font-size:24px; color:#111827; }
.wugan-hsk-classroom-app .wco-image-speaking-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; }
.wugan-hsk-classroom-app .wco-image-speaking-actions button {
    min-height:48px; padding:0 18px; border-radius:14px; border:1px solid #dce6f8; background:#fff; color:#111827;
}
.wugan-hsk-classroom-app .wco-image-speaking-actions button[data-image-speaking-record] { background:#2368d1; color:#fff; border-color:#2368d1; }
.wugan-hsk-classroom-app .wco-image-speaking-actions button.is-secondary { background:#fff7f7; color:#a51620; border-color:#f0d7da; }
.wugan-hsk-classroom-app .wco-image-speaking-livehead { display:flex; justify-content:space-between; gap:12px; align-items:flex-end; margin-bottom:14px; }
.wugan-hsk-classroom-app .wco-image-speaking-livehead strong { font-size:18px; }
.wugan-hsk-classroom-app .wco-image-speaking-livebox {
    min-height:160px; max-height:320px; overflow:auto; padding:16px; border-radius:18px; background:#fbfdff; border:1px solid #edf1f6;
}
.wugan-hsk-classroom-app .wco-image-speaking-livebox p { display:flex; gap:10px; margin:0 0 10px; color:#223043; line-height:1.6; }
.wugan-hsk-classroom-app .wco-image-speaking-livebox p:last-child { margin-bottom:0; }
.wugan-hsk-classroom-app .wco-image-speaking-livebox p span { color:#2368d1; font-weight:800; }
.wugan-hsk-classroom-app .wco-image-speaking-livebox p.is-interim { opacity:.72; }
.wugan-hsk-classroom-app .wco-image-speaking-livebox .is-placeholder { color:#8b96a5; }
.wugan-hsk-classroom-app .wco-image-speaking-result { display:grid; gap:16px; }
.wugan-hsk-classroom-app .wco-image-speaking-result strong { display:block; margin:8px 0 4px; font-size:24px; }
.wugan-hsk-classroom-app .wco-image-speaking-result span { color:#2368d1; font-weight:700; }
.wugan-hsk-classroom-app .wco-image-speaking-result p { margin:8px 0 0; color:#4f5d73; }
.wugan-hsk-classroom-app .wco-image-speaking-result ul { margin:0; padding-left:18px; display:grid; gap:7px; color:#304255; }
.wugan-hsk-classroom-app .wco-image-speaking-result em {
    display:block; padding:14px 16px; border-radius:16px; background:#f8fbff; color:#2368d1; font-style:normal; font-weight:700;
}
@media (max-width: 980px) {
    .wugan-hsk-classroom-app .wco-image-speaking-layout,
    .wugan-hsk-classroom-app .wco-image-speaking-topmeta {
        grid-template-columns: 1fr;
    }
    .wugan-hsk-classroom-app .wco-hanzi-board-head,
    .wugan-hsk-classroom-app .wco-image-speaking-livehead,
    .wugan-hsk-classroom-app .wco-hanzi-analysis-head {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* 2.9.2 — Hanzi tiles + refined speaking layout */
.wugan-hsk-classroom-app .wco-hanzi-analysis-modern {
    display: grid !important;
    gap: 20px !important;
}
.wugan-hsk-classroom-app .wco-hanzi-analysis-head {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 18px !important;
    padding: 0 0 4px !important;
    border: 0 !important;
    background: transparent !important;
}
.wugan-hsk-classroom-app .wco-hanzi-analysis-head span {
    color: var(--wco-ui-accent, #a51620) !important;
}
.wugan-hsk-classroom-app .wco-hanzi-analysis-head h4 {
    margin: 5px 0 4px !important;
    font-size: clamp(22px, 2.3vw, 30px) !important;
    color: #151922 !important;
}
.wugan-hsk-classroom-app .wco-hanzi-analysis-head p {
    margin: 0 !important;
    color: #737d8c !important;
}
.wugan-hsk-classroom-app .wco-hanzi-analysis-head em {
    flex: 0 0 auto !important;
    padding: 8px 13px !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--wco-ui-accent, #a51620) 9%, white) !important;
    color: var(--wco-ui-accent, #a51620) !important;
    font-style: normal !important;
    font-weight: 800 !important;
}
.wugan-hsk-classroom-app .wco-hanzi-word-tiles {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)) !important;
    gap: 12px !important;
}
.wugan-hsk-classroom-app .wco-hanzi-word-tile {
    min-height: 108px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 12px 10px !important;
    border: 1px solid #e4e9f0 !important;
    border-radius: 18px !important;
    background: #fff !important;
    color: #171b23 !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .04) !important;
    cursor: pointer !important;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease !important;
}
.wugan-hsk-classroom-app .wco-hanzi-word-tile:hover {
    transform: translateY(-2px) !important;
    border-color: color-mix(in srgb, var(--wco-ui-accent, #a51620) 35%, #e4e9f0) !important;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .08) !important;
}
.wugan-hsk-classroom-app .wco-hanzi-word-tile.is-active {
    border-color: var(--wco-ui-accent, #a51620) !important;
    background: color-mix(in srgb, var(--wco-ui-accent, #a51620) 5%, white) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wco-ui-accent, #a51620) 10%, transparent) !important;
}
.wugan-hsk-classroom-app .wco-hanzi-word-tile strong {
    font-size: clamp(28px, 3.4vw, 44px) !important;
    line-height: .95 !important;
    font-weight: 600 !important;
    font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif !important;
    word-break: break-word !important;
    text-align: center !important;
}
.wugan-hsk-classroom-app .wco-hanzi-word-tile span {
    color: var(--wco-ui-accent, #a51620) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-align: center !important;
}
.wugan-hsk-classroom-app .wco-hanzi-word-tile small {
    width: 100% !important;
    overflow: hidden !important;
    color: #7c8593 !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
.wugan-hsk-classroom-app .wco-hanzi-detail-placeholder {
    padding: 20px !important;
    border: 1px dashed #dce2ea !important;
    border-radius: 16px !important;
    background: #fafbfd !important;
    color: #7c8593 !important;
    text-align: center !important;
}
.wugan-hsk-classroom-app .wco-hanzi-detail-panel {
    padding: 22px !important;
    border: 1px solid #e6eaf0 !important;
    border-radius: 22px !important;
    background: #fff !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .05) !important;
    opacity: 0 !important;
    transform: translateY(8px) !important;
    transition: opacity .22s ease, transform .22s ease !important;
}
.wugan-hsk-classroom-app .wco-hanzi-detail-panel.is-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}
.wugan-hsk-classroom-app .wco-hanzi-detail-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 18px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid #edf0f4 !important;
}
.wugan-hsk-classroom-app .wco-hanzi-detail-head small {
    color: var(--wco-ui-accent, #a51620) !important;
    font-weight: 900 !important;
    letter-spacing: .12em !important;
}
.wugan-hsk-classroom-app .wco-hanzi-detail-head h5 {
    margin: 7px 0 5px !important;
    color: #161a22 !important;
    font-size: clamp(27px, 3vw, 38px) !important;
    line-height: 1.15 !important;
}
.wugan-hsk-classroom-app .wco-hanzi-detail-head h5 em {
    color: #677283 !important;
    font-size: .72em !important;
    font-style: normal !important;
    font-weight: 700 !important;
}
.wugan-hsk-classroom-app .wco-hanzi-detail-head p {
    margin: 0 !important;
    color: #697485 !important;
    font-size: 16px !important;
}
.wugan-hsk-classroom-app .wco-hanzi-word-audio,
.wugan-hsk-classroom-app .wco-hanzi-detail-symbol button {
    appearance: none !important;
    display: grid !important;
    flex: 0 0 auto !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    border: 1px solid color-mix(in srgb, var(--wco-ui-accent, #a51620) 24%, #e2e7ee) !important;
    border-radius: 50% !important;
    background: color-mix(in srgb, var(--wco-ui-accent, #a51620) 5%, white) !important;
    color: var(--wco-ui-accent, #a51620) !important;
    box-shadow: none !important;
    cursor: pointer !important;
}
.wugan-hsk-classroom-app .wco-hanzi-word-audio svg,
.wugan-hsk-classroom-app .wco-hanzi-detail-symbol button svg {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    overflow: visible !important;
}
.wugan-hsk-classroom-app .wco-hanzi-detail-grid {
    display: flex !important;
    align-items: stretch !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding-top: 18px !important;
}
.wugan-hsk-classroom-app .wco-hanzi-detail-plus {
    align-self: center !important;
    color: var(--wco-ui-accent, #a51620) !important;
    font-size: 24px !important;
    font-weight: 900 !important;
}
.wugan-hsk-classroom-app .wco-hanzi-detail-char {
    flex: 1 1 280px !important;
    min-width: 240px !important;
    display: grid !important;
    gap: 14px !important;
    padding: 18px !important;
    border: 1px solid #e8ecf2 !important;
    border-radius: 20px !important;
    background: #fbfcfe !important;
}
.wugan-hsk-classroom-app .wco-hanzi-detail-symbol {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
}
.wugan-hsk-classroom-app .wco-hanzi-detail-symbol strong {
    display: grid !important;
    place-items: center !important;
    width: 104px !important;
    height: 104px !important;
    border: 1px solid #dfe5ed !important;
    border-radius: 18px !important;
    background: #fff !important;
    color: #171b23 !important;
    font-size: 58px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif !important;
}
.wugan-hsk-classroom-app .wco-hanzi-detail-copy {
    min-width: 0 !important;
    display: grid !important;
    justify-items: center !important;
    gap: 12px !important;
    text-align: center !important;
}
.wugan-hsk-classroom-app .wco-hanzi-detail-pinyin {
    color: #161a22 !important;
    font-size: 22px !important;
    font-weight: 850 !important;
}
.wugan-hsk-classroom-app .wco-hanzi-detail-meta-grid {
    width: 100% !important;
    display: grid !important;
    gap: 10px !important;
}
.wugan-hsk-classroom-app .wco-hanzi-detail-meta-card {
    padding: 12px 14px !important;
    border: 1px solid #e8ecf2 !important;
    border-radius: 14px !important;
    background: #fff !important;
}
.wugan-hsk-classroom-app .wco-hanzi-detail-meta-card.is-wide {
    grid-column: 1 / -1 !important;
}
.wugan-hsk-classroom-app .wco-hanzi-detail-meta-card dt {
    margin-bottom: 6px !important;
    color: var(--wco-ui-accent, #a51620) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}
.wugan-hsk-classroom-app .wco-hanzi-detail-meta-card dd {
    margin: 0 !important;
    color: #3f4a5b !important;
    line-height: 1.55 !important;
}
.wugan-hsk-classroom-app .wco-hanzi-detail-meta-card dd b {
    display: block !important;
    color: #171b23 !important;
    font-size: 18px !important;
    margin-bottom: 3px !important;
}
.wugan-hsk-classroom-app .wco-hanzi-detail-meta-card dd small {
    display: block !important;
    margin-top: 3px !important;
    color: #778292 !important;
    font-size: 12px !important;
}

/* Speaking module: use a balanced horizontal layout and prevent vertical text columns. */
.wugan-hsk-classroom-app .wco-image-speaking-layout {
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, .9fr) !important;
    align-items: start !important;
}
.wugan-hsk-classroom-app .wco-image-speaking-layout figure {
    min-height: 0 !important;
    height: auto !important;
    max-height: 520px !important;
    aspect-ratio: 16 / 10 !important;
    display: grid !important;
    place-items: center !important;
    background: #f5f7fa !important;
}
.wugan-hsk-classroom-app .wco-image-speaking-layout figure img {
    width: 100% !important;
    height: 100% !important;
    max-height: 520px !important;
    object-fit: contain !important;
    object-position: center !important;
}
.wugan-hsk-classroom-app .wco-image-speaking-task {
    min-width: 0 !important;
    padding: 24px !important;
}
.wugan-hsk-classroom-app .wco-image-speaking-task h4 {
    overflow-wrap: anywhere !important;
}
.wugan-hsk-classroom-app .wco-image-speaking-topmeta {
    grid-template-columns: 130px minmax(0, 1fr) !important;
}
.wugan-hsk-classroom-app .wco-image-speaking-timerbox,
.wugan-hsk-classroom-app .wco-image-speaking-note {
    min-width: 0 !important;
    padding: 14px 15px !important;
}
.wugan-hsk-classroom-app .wco-image-speaking-timerbox strong {
    font-size: 26px !important;
    white-space: nowrap !important;
}
.wugan-hsk-classroom-app .wco-image-speaking-note strong {
    margin-top: 5px !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
}
.wugan-hsk-classroom-app .wco-image-speaking-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.wugan-hsk-classroom-app .wco-image-speaking-actions [data-image-speaking-switch] {
    grid-column: 1 / -1 !important;
}
.wugan-hsk-classroom-app .wco-image-speaking-actions button {
    width: 100% !important;
    justify-content: center !important;
    white-space: normal !important;
}
@media (max-width: 1100px) {
    .wugan-hsk-classroom-app .wco-image-speaking-layout {
        grid-template-columns: 1fr !important;
    }
    .wugan-hsk-classroom-app .wco-image-speaking-layout figure {
        max-height: 480px !important;
    }
}
@media (max-width: 700px) {
    .wugan-hsk-classroom-app .wco-hanzi-word-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .wugan-hsk-classroom-app .wco-hanzi-detail-char {
        grid-template-columns: 1fr !important;
    }
    .wugan-hsk-classroom-app .wco-hanzi-detail-symbol {
        flex-direction: row !important;
        justify-content: space-between !important;
    }
    .wugan-hsk-classroom-app .wco-image-speaking-topmeta,
    .wugan-hsk-classroom-app .wco-image-speaking-actions {
        grid-template-columns: 1fr !important;
    }
    .wugan-hsk-classroom-app .wco-image-speaking-actions [data-image-speaking-switch] {
        grid-column: auto !important;
    }
}


@media (max-width: 900px) {
    .wugan-hsk-classroom-app .wco-hanzi-word-tiles { grid-template-columns: repeat(auto-fill, minmax(102px, 1fr)) !important; }
    .wugan-hsk-classroom-app .wco-hanzi-word-tile { min-height: 98px !important; }
    .wugan-hsk-classroom-app .wco-hanzi-detail-char { min-width: 100% !important; }
}

/* 2.9.4 — automatic + manually curated Hanzi infographic */
.wugan-hsk-classroom-app .wco-hanzi-detail-char {
    position: relative !important;
}
.wugan-hsk-classroom-app .wco-hanzi-detail-mode {
    justify-self: center !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--wco-ui-accent, #a51620) 7%, white) !important;
    color: var(--wco-ui-accent, #a51620) !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
}
.wugan-hsk-classroom-app .wco-hanzi-infographic-image {
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    border: 1px solid #e5eaf1 !important;
    border-radius: 18px !important;
    background: #fff !important;
    overflow: hidden !important;
}
.wugan-hsk-classroom-app .wco-hanzi-infographic-image img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 440px !important;
    object-fit: contain !important;
}
.wugan-hsk-classroom-app .wco-hanzi-detail-meta-card.is-mnemonic {
    background: color-mix(in srgb, var(--wco-ui-accent, #a51620) 4%, white) !important;
    border-color: color-mix(in srgb, var(--wco-ui-accent, #a51620) 18%, #e8ecf2) !important;
}
.wugan-hsk-classroom-app .wco-hanzi-detail-meta-card.is-mnemonic dt::before {
    content: "✦ " !important;
}


/* 2.9.5 — compact Hanzi tiles, stroke order viewer and clean dashboard */
.wugan-hsk-classroom-app .wco-hanzi-word-tiles {
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)) !important;
    gap: 8px !important;
}
.wugan-hsk-classroom-app .wco-hanzi-word-tile {
    min-height: 72px !important;
    max-height: 88px !important;
    padding: 8px 6px !important;
    gap: 2px !important;
    border-radius: 13px !important;
    box-shadow: none !important;
}
.wugan-hsk-classroom-app .wco-hanzi-word-tile strong {
    font-size: clamp(22px, 2.4vw, 32px) !important;
    line-height: 1 !important;
}
.wugan-hsk-classroom-app .wco-hanzi-word-tile span { font-size: 10px !important; line-height: 1.15 !important; }
.wugan-hsk-classroom-app .wco-hanzi-word-tile small { font-size: 9px !important; line-height: 1.15 !important; }
.wugan-hsk-classroom-app .wco-hanzi-stroke-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    min-height: 38px !important;
    padding: 0 13px !important;
    border: 1px solid #dfe5ed !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: var(--wco-ui-accent,#a51620) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
}
.wugan-hsk-classroom-app .wco-hanzi-stroke-panel {
    width: 100% !important;
    display: grid !important;
    justify-items: center !important;
    gap: 12px !important;
    padding: 16px !important;
    border: 1px solid #e5eaf0 !important;
    border-radius: 16px !important;
    background: #f8fafc !important;
}
.wugan-hsk-classroom-app .wco-hanzi-stroke-panel[hidden] { display: none !important; }
.wugan-hsk-classroom-app .wco-hanzi-stroke-canvas {
    width: min(100%, 220px) !important;
    min-height: 190px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid #dfe5ed !important;
    border-radius: 16px !important;
    background-color: #fff !important;
    background-image: linear-gradient(to right, transparent 49.5%, #e8edf4 49.5%, #e8edf4 50.5%, transparent 50.5%), linear-gradient(to bottom, transparent 49.5%, #e8edf4 49.5%, #e8edf4 50.5%, transparent 50.5%) !important;
}
.wugan-hsk-classroom-app .wco-hanzi-stroke-canvas svg { max-width: 100% !important; height: auto !important; }
.wugan-hsk-classroom-app .wco-hanzi-stroke-media { max-width: min(100%, 320px) !important; max-height: 280px !important; border-radius: 14px !important; object-fit: contain !important; }
.wugan-hsk-classroom-app .wco-hanzi-stroke-controls { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 8px !important; }
.wugan-hsk-classroom-app .wco-hanzi-stroke-controls button {
    min-height: 36px !important; padding: 0 12px !important; border: 1px solid #dde4ed !important; border-radius: 10px !important; background: #fff !important; color: #283243 !important; font-size: 11px !important; font-weight: 750 !important;
}
.wugan-hsk-classroom-app .wco-hanzi-stroke-panel > small { color: #7b8492 !important; font-size: 10px !important; text-align: center !important; }
.wugan-hsk-classroom-app .wco-hanzi-stroke-error { padding: 18px !important; color: #a51620 !important; text-align: center !important; }

/* Dashboard: compact, aligned, and less repetitive. */
.wugan-hsk-classroom-app .wco-dashboard-topbar {
    min-height: 116px !important;
    display: grid !important;
    grid-template-columns: minmax(240px, .8fr) minmax(440px, 1.45fr) auto !important;
    align-items: center !important;
    gap: 18px !important;
    padding: 20px 24px !important;
    border-bottom: 1px solid #e7ebf0 !important;
    background: #fff !important;
}
.wugan-hsk-classroom-app .wco-topbar-title .wvs-kicker { margin-bottom: 5px !important; font-size: 10px !important; letter-spacing: .14em !important; }
.wugan-hsk-classroom-app .wco-topbar-title h2 { margin: 0 !important; font-size: clamp(24px,2.1vw,34px) !important; line-height: 1.05 !important; }
.wugan-hsk-classroom-app .wco-topbar-title p { margin: 7px 0 0 !important; font-size: 13px !important; color: #798393 !important; }
.wugan-hsk-classroom-app .wco-learning-toolbar {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(105px, 1fr)) !important;
    gap: 9px !important;
}
.wugan-hsk-classroom-app .wco-toolbar-item {
    min-width: 0 !important;
    min-height: 66px !important;
    padding: 10px 12px !important;
    border: 1px solid #e4e8ee !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: none !important;
}
.wugan-hsk-classroom-app .wco-toolbar-item > span { width: 36px !important; height: 36px !important; border-radius: 10px !important; font-size: 16px !important; }
.wugan-hsk-classroom-app .wco-toolbar-item small { display: block !important; max-width: 120px !important; overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; font-size: 10px !important; }
.wugan-hsk-classroom-app .wco-toolbar-item strong { font-size: 17px !important; line-height: 1.15 !important; }
.wugan-hsk-classroom-app .wco-dashboard-topbar .wvs-header-actions { gap: 8px !important; }
.wugan-hsk-classroom-app .wco-dashboard-topbar .wvs-icon-button,
.wugan-hsk-classroom-app .wco-dashboard-topbar .wvs-ghost { min-height: 44px !important; border-radius: 12px !important; }
.wugan-hsk-classroom-app .wco-dashboard-content { padding: 24px !important; background: #f5f7fa !important; }
.wugan-hsk-classroom-app .wco-student-catalog { gap: 16px !important; }
.wugan-hsk-classroom-app .wco-student-catalog-head {
    padding: 22px 24px !important;
    border: 1px solid #e4e8ee !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: none !important;
}
.wugan-hsk-classroom-app .wco-student-catalog-head h3 { margin: 6px 0 6px !important; font-size: clamp(30px,3vw,46px) !important; line-height: 1.08 !important; }
.wugan-hsk-classroom-app .wco-student-catalog-head p { margin: 0 !important; font-size: 15px !important; }
.wugan-hsk-classroom-app .wco-student-account-chip { min-width: 190px !important; padding: 12px 14px !important; border-radius: 14px !important; box-shadow: none !important; }
.wugan-hsk-classroom-app .wco-student-summary { grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap: 12px !important; }
.wugan-hsk-classroom-app .wco-student-summary article { min-height: 94px !important; padding: 16px 18px !important; border-radius: 16px !important; box-shadow: none !important; }
.wugan-hsk-classroom-app .wco-student-summary article > span { width: 44px !important; height: 44px !important; border-radius: 12px !important; }
.wugan-hsk-classroom-app .wco-student-summary strong { font-size: 28px !important; }
.wugan-hsk-classroom-app .wco-student-course-toolbar { min-height: 52px !important; padding: 7px 10px !important; border-radius: 14px !important; background: #fff !important; border: 1px solid #e4e8ee !important; }
.wugan-hsk-classroom-app .wco-student-course-grid { gap: 16px !important; }
@media (max-width: 1180px) {
    .wugan-hsk-classroom-app .wco-dashboard-topbar { grid-template-columns: minmax(220px,.8fr) minmax(330px,1.2fr) !important; }
    .wugan-hsk-classroom-app .wco-dashboard-topbar .wvs-header-actions { grid-column: 2 !important; grid-row: 1 !important; justify-self: end !important; }
    .wugan-hsk-classroom-app .wco-learning-toolbar { grid-column: 1 / -1 !important; grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
}
@media (max-width: 820px) {
    .wugan-hsk-classroom-app .wco-dashboard-topbar { display: flex !important; flex-wrap: wrap !important; min-height: auto !important; }
    .wugan-hsk-classroom-app .wco-learning-toolbar { display: none !important; }
    .wugan-hsk-classroom-app .wco-dashboard-content { padding: 14px !important; }
    .wugan-hsk-classroom-app .wco-student-summary { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
    .wugan-hsk-classroom-app .wco-hanzi-word-tiles { grid-template-columns: repeat(auto-fill,minmax(64px,1fr)) !important; }
}


/* 2.9.7 — class course assignment */
.wco-class-course-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:18px}.wco-class-course-head span{display:block;color:var(--wco-ui-accent,#a51620);font-size:11px;font-weight:900;letter-spacing:.12em}.wco-class-course-head h3{margin:5px 0 6px;font-size:24px;color:#171b24}.wco-class-course-head p{margin:0;max-width:720px}.wco-class-course-head>strong{flex:0 0 auto;padding:8px 13px;border-radius:999px;background:var(--wco-ui-accent-soft,#fff1f2);color:var(--wco-ui-accent,#a51620)}.wco-class-course-form{display:grid;gap:16px}.wco-class-course-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}.wco-class-course-option{display:flex;align-items:center;gap:12px;min-height:74px;padding:14px;border:1px solid #e6e9ef;border-radius:16px;background:#fff;cursor:pointer;transition:.2s ease}.wco-class-course-option:hover{border-color:#d8a7ac;transform:translateY(-1px)}.wco-class-course-option.is-selected{border-color:var(--wco-ui-accent,#a51620);background:var(--wco-ui-accent-soft,#fff7f7)}.wco-class-course-option>input{position:absolute;opacity:0;pointer-events:none}.wco-course-check{display:grid;place-items:center;width:30px;height:30px;border:1px solid #dfe3ea;border-radius:10px;color:transparent;background:#f7f8fa;font-weight:900}.wco-class-course-option.is-selected .wco-course-check{border-color:var(--wco-ui-accent,#a51620);background:var(--wco-ui-accent,#a51620);color:#fff}.wco-class-course-option div{display:grid;gap:4px}.wco-class-course-option strong{color:#1a1f29}.wco-class-course-option small{color:#7b8492}@media(max-width:700px){.wco-class-course-head{flex-direction:column}.wco-class-course-grid{grid-template-columns:1fr}}

/* 3.0.0 — transparent YouTube link shield. It blocks the whole lower CTA area in normal and fullscreen modes. */
.wugan-hsk-classroom-app .wvs-video-player-wrap.is-youtube .wvs-youtube-link-mask,
.wugan-hsk-classroom-app .wvs-video-player-wrap.is-youtube:fullscreen .wvs-youtube-link-mask,
.wugan-hsk-classroom-app .wvs-video-player-wrap.is-youtube:-webkit-full-screen .wvs-youtube-link-mask {
    position: absolute !important;
    z-index: 45 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 31% !important;
    min-height: 74px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: transparent !important;
    box-shadow: none !important;
    pointer-events: auto !important;
    cursor: default !important;
    touch-action: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}
.wugan-hsk-classroom-app .wvs-video-player-wrap.is-youtube .wvs-youtube-top-mask,
.wugan-hsk-classroom-app .wvs-video-player-wrap.is-youtube:fullscreen .wvs-youtube-top-mask,
.wugan-hsk-classroom-app .wvs-video-player-wrap.is-youtube:-webkit-full-screen .wvs-youtube-top-mask {
    z-index: 44 !important;
    width: 76% !important;
    height: 24% !important;
    min-height: 52px !important;
    background: transparent !important;
    pointer-events: auto !important;
    touch-action: none !important;
}

/* WUGAN 3.3.0 CLEAN — persistent phonetics / speaking submission UI */
.wco-phonetics-practice{display:grid;grid-template-columns:minmax(240px,.82fr) minmax(0,1.18fr);gap:18px;padding:4px}
.wco-phonetics-list{display:grid;gap:8px;align-content:start}
.wco-phonetics-item{display:grid;grid-template-columns:38px 1fr;gap:10px;align-items:center;width:100%;padding:12px;border:1px solid #d7dee8;border-radius:12px;background:#ffffff;text-align:left;cursor:pointer;color:#111827;transition:.18s ease}
.wco-phonetics-item:hover{border-color:#c7d2e0;background:#fcfcfd}
.wco-phonetics-item>span{display:grid;place-items:center;width:36px;height:36px;border-radius:9px;background:#f8fafc;color:#9f1723;font-weight:900}
.wco-phonetics-item strong,.wco-phonetics-item em,.wco-phonetics-item small{display:block;font-style:normal;color:inherit}.wco-phonetics-item strong{font-size:14px;font-weight:800}.wco-phonetics-item em{margin-top:4px;font-size:22px;font-weight:800;color:#7f1d1d}.wco-phonetics-item small{margin-top:3px;color:#64748b}
.wco-phonetics-item.is-active{border-color:#a51620;background:#fff7f8;box-shadow:inset 3px 0 0 #a51620}
.wco-phonetics-recorder{padding:18px;border:1px solid #e2e8f0;border-radius:14px;background:#fffdfd;box-shadow:0 10px 22px rgba(15,23,42,.04)}.wco-phonetics-recorder>span{color:#a51620;font-size:11px;font-weight:900;letter-spacing:.12em}.wco-phonetics-recorder h4{margin:7px 0 10px;color:#111827}.wco-phonetics-target{display:block;font-size:38px;line-height:1.25;color:#111827}.wco-phonetics-recorder>p{color:#475569;font-size:15px}.wco-phonetics-hint{margin-top:8px}
.wco-phonetics-actions{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.wco-phonetics-actions button,.wco-speaking-submit-box button{display:inline-flex;align-items:center;gap:7px;padding:10px 14px;border:1px solid #a51620;border-radius:10px;background:#a51620;color:#fff;font-weight:800;cursor:pointer}.wco-phonetics-actions button.is-secondary{background:#fff;color:#a51620}.wco-phonetics-actions button:disabled,.wco-speaking-submit-box button:disabled{opacity:.55;cursor:not-allowed}.wco-phonetics-actions svg{width:18px;height:18px}
.wco-phonetics-status{padding:10px 12px;border-radius:10px;background:#f8fafc;color:#334155;border:1px solid #e2e8f0}.wco-phonetics-ai{display:grid;gap:5px;margin-top:12px;padding:12px;border-radius:12px;border:1px solid #d7dee8;background:#f8fafc;color:#334155}.wco-phonetics-ai strong{color:#111827}.wco-phonetics-ai small{color:#475569}.wco-phonetics-ai.is-good{background:#f0fdf4;border-color:#bbf7d0}.wco-phonetics-ai.is-warn{background:#fff7ed;border-color:#fed7aa}.wco-phonetics-ai.is-info{background:#f8fafc;border-color:#e2e8f0}.wco-speaking-submit-box{display:grid;gap:10px;margin-top:13px;padding:13px;border:1px solid #e2e8f0;border-radius:12px;background:#f8fafc}.wco-speaking-submit-box audio{width:100%}.wco-speaking-submit-box button{justify-self:start}
@media(max-width:760px){.wco-phonetics-practice{grid-template-columns:1fr}.wco-phonetics-target{font-size:30px}.wco-phonetics-item em{font-size:20px}}

/* v3.3.4: login-first authentication screen. Registration is revealed only on demand. */
.wugan-hsk-classroom-app .wvs-auth-switch {
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--wvs-border);
    text-align: center;
    color: var(--wvs-muted);
    font-size: 13px;
    font-weight: 700;
}
.wugan-hsk-classroom-app .wvs-auth-switch button {
    border: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    background: transparent !important;
    color: var(--wvs-primary-dark) !important;
    font: inherit;
    font-weight: 900;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.wugan-hsk-classroom-app .wvs-auth-switch button:hover,
.wugan-hsk-classroom-app .wvs-auth-switch button:focus-visible {
    opacity: .78;
}

/* v3.3.5 — compact login-first screen + migration-safe auth UI */
.wugan-hsk-classroom-app .wvs-shell.is-auth.wvs-auth-only {
    display: block !important;
    width: min(500px, calc(100% - 28px)) !important;
    min-height: 0 !important;
    margin: 44px auto !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.wugan-hsk-classroom-app .wvs-shell.is-auth.wvs-auth-only::before,
.wugan-hsk-classroom-app .wvs-shell.is-auth.wvs-auth-only::after {
    display: none !important;
}
.wugan-hsk-classroom-app .wvs-auth-only .wvs-auth-card {
    width: 100% !important;
    padding: 34px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 22px !important;
    background: #fff !important;
    box-shadow: 0 18px 55px rgba(15, 23, 42, .10) !important;
}
.wugan-hsk-classroom-app .wvs-auth-brand {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    margin: 0 0 26px !important;
}
.wugan-hsk-classroom-app .wvs-auth-logo {
    display: grid !important;
    width: 62px !important;
    height: 62px !important;
    flex: 0 0 62px !important;
    overflow: hidden !important;
    place-items: center !important;
    border: 1px solid #ead5d7 !important;
    border-radius: 17px !important;
    background: #fff4f4 !important;
    color: #9f1723 !important;
    font-size: 26px !important;
    font-weight: 900 !important;
}
.wugan-hsk-classroom-app .wvs-auth-logo img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}
.wugan-hsk-classroom-app .wvs-auth-brand-copy {
    min-width: 0 !important;
}
.wugan-hsk-classroom-app .wvs-auth-brand-copy .wvs-kicker {
    margin: 0 0 3px !important;
    color: #a51620 !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: .13em !important;
}
.wugan-hsk-classroom-app .wvs-auth-brand-copy h2 {
    margin: 0 !important;
    color: #111827 !important;
    font-size: 25px !important;
    line-height: 1.2 !important;
    letter-spacing: -.025em !important;
}
.wugan-hsk-classroom-app .wvs-auth-brand-copy p {
    margin: 6px 0 0 !important;
    color: #6b7280 !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
}
.wugan-hsk-classroom-app .wvs-auth-form {
    display: grid !important;
    gap: 17px !important;
    margin: 0 !important;
}
.wugan-hsk-classroom-app .wvs-auth-form label:not(.wvs-checkbox):not(.wvs-honeypot) {
    display: grid !important;
    gap: 7px !important;
    margin: 0 !important;
    color: #1f2937 !important;
    font-size: 13px !important;
    font-weight: 750 !important;
}
.wugan-hsk-classroom-app .wvs-auth-form input[type="text"],
.wugan-hsk-classroom-app .wvs-auth-form input[type="email"],
.wugan-hsk-classroom-app .wvs-auth-form input[type="password"] {
    display: block !important;
    width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 1px solid #d7dce2 !important;
    border-radius: 11px !important;
    outline: 0 !important;
    background: #fff !important;
    color: #111827 !important;
    font-size: 15px !important;
    box-shadow: none !important;
    transition: border-color .16s ease, box-shadow .16s ease !important;
}
.wugan-hsk-classroom-app .wvs-auth-form input[type="text"]:focus,
.wugan-hsk-classroom-app .wvs-auth-form input[type="email"]:focus,
.wugan-hsk-classroom-app .wvs-auth-form input[type="password"]:focus {
    border-color: #a51620 !important;
    box-shadow: 0 0 0 3px rgba(165, 22, 32, .10) !important;
}
.wugan-hsk-classroom-app .wvs-auth-form input::placeholder {
    color: #a1a8b2 !important;
    opacity: 1 !important;
}
.wugan-hsk-classroom-app .wvs-auth-form .wvs-checkbox {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    margin: -2px 0 0 !important;
    color: #4b5563 !important;
    font-size: 13px !important;
    font-weight: 650 !important;
}
.wugan-hsk-classroom-app .wvs-auth-form .wvs-checkbox input {
    width: 17px !important;
    height: 17px !important;
    min-height: 17px !important;
    margin: 0 !important;
    accent-color: #a51620 !important;
}
.wugan-hsk-classroom-app .wvs-auth-submit {
    display: flex !important;
    width: 100% !important;
    min-height: 50px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 1px 0 0 !important;
    padding: 12px 18px !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: #a51620 !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    box-shadow: 0 8px 20px rgba(165, 22, 32, .18) !important;
}
.wugan-hsk-classroom-app .wvs-auth-submit:hover,
.wugan-hsk-classroom-app .wvs-auth-submit:focus-visible {
    transform: none !important;
    background: #86131b !important;
}
.wugan-hsk-classroom-app .wvs-auth-switch {
    margin: 20px 0 0 !important;
    padding: 18px 0 0 !important;
    border-top: 1px solid #edf0f2 !important;
    color: #6b7280 !important;
    text-align: center !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}
.wugan-hsk-classroom-app .wvs-auth-switch button {
    display: inline !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 0 0 3px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background: transparent !important;
    color: #a51620 !important;
    font: inherit !important;
    font-weight: 800 !important;
    line-height: inherit !important;
    text-decoration: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
}
.wugan-hsk-classroom-app .wvs-auth-switch button:hover,
.wugan-hsk-classroom-app .wvs-auth-switch button:focus-visible {
    color: #7f1018 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}
.wugan-hsk-classroom-app .wvs-auth-only .wvs-message {
    margin: 0 0 18px !important;
    padding: 11px 13px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 650 !important;
}
.wugan-hsk-classroom-app .wvs-auth-only .wvs-message[hidden] {
    display: none !important;
}
.wugan-hsk-classroom-app .wvs-auth-only .wvs-message.is-error {
    border: 1px solid #fecaca !important;
    background: #fef2f2 !important;
    color: #991b1b !important;
}
.wugan-hsk-classroom-app .wvs-auth-only .wvs-message.is-success {
    border: 1px solid #bbf7d0 !important;
    background: #f0fdf4 !important;
    color: #166534 !important;
}
@media (max-width: 600px) {
    .wugan-hsk-classroom-app .wvs-shell.is-auth.wvs-auth-only {
        width: min(100% - 16px, 500px) !important;
        margin: 18px auto !important;
    }
    .wugan-hsk-classroom-app .wvs-auth-only .wvs-auth-card {
        padding: 24px 20px !important;
        border-radius: 17px !important;
    }
    .wugan-hsk-classroom-app .wvs-auth-brand {
        align-items: flex-start !important;
    }
    .wugan-hsk-classroom-app .wvs-auth-logo {
        width: 54px !important;
        height: 54px !important;
        flex-basis: 54px !important;
        border-radius: 14px !important;
    }
    .wugan-hsk-classroom-app .wvs-auth-brand-copy h2 {
        font-size: 22px !important;
    }
}

/* v3.3.9 — larger recording review + submit controls for image speaking */
.wugan-hsk-classroom-app .wco-speaking-submit-box{
    display:grid !important;
    gap:14px !important;
    margin-top:18px !important;
    padding:20px !important;
    border:1px solid #dfe6ef !important;
    border-radius:18px !important;
    background:#f8fafc !important;
    box-shadow:0 10px 28px rgba(15,23,42,.05) !important;
}
.wugan-hsk-classroom-app .wco-speaking-submit-head{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:14px !important;
}
.wugan-hsk-classroom-app .wco-speaking-submit-head strong{
    display:block !important;
    margin:0 0 3px !important;
    color:#111827 !important;
    font-size:17px !important;
    line-height:1.35 !important;
}
.wugan-hsk-classroom-app .wco-speaking-submit-head small{
    display:block !important;
    color:#667085 !important;
    font-size:13px !important;
}
.wugan-hsk-classroom-app .wco-speaking-submit-head>span{
    flex:0 0 auto !important;
    min-width:64px !important;
    padding:8px 10px !important;
    border-radius:10px !important;
    background:#fff !important;
    border:1px solid #e2e8f0 !important;
    color:#344054 !important;
    font-size:14px !important;
    font-weight:850 !important;
    text-align:center !important;
}
.wugan-hsk-classroom-app .wco-speaking-review-audio,
.wugan-hsk-classroom-app .wco-speaking-submit-box audio{
    display:block !important;
    width:100% !important;
    min-width:100% !important;
    height:56px !important;
    min-height:56px !important;
    margin:0 !important;
}
.wugan-hsk-classroom-app .wco-speaking-submit-box button[data-image-speaking-submit]{
    justify-self:stretch !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-height:52px !important;
    padding:12px 18px !important;
    border-radius:13px !important;
    font-size:15px !important;
    font-weight:850 !important;
}
@media(max-width:640px){
    .wugan-hsk-classroom-app .wco-speaking-submit-box{padding:15px !important}
    .wugan-hsk-classroom-app .wco-speaking-submit-head{align-items:flex-start !important}
    .wugan-hsk-classroom-app .wco-speaking-review-audio,
    .wugan-hsk-classroom-app .wco-speaking-submit-box audio{height:54px !important;min-height:54px !important}
}

/* 3.3.12 — responsive cleanup, dismissible notices and compact learning controls */
.wugan-hsk-classroom-app .wvs-message.wco-dismissible-notice,
.wugan-hsk-classroom-app .wco-learning-notice.wco-dismissible-notice {
    position: relative !important;
    padding-right: 48px !important;
}
.wugan-hsk-classroom-app .wvs-message.wco-dismissible-notice {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}
.wugan-hsk-classroom-app .wvs-message.wco-dismissible-notice[hidden] { display: none !important; }
.wugan-hsk-classroom-app [data-wco-dismiss-notice] {
    flex: 0 0 auto !important;
    display: inline-grid !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    place-items: center !important;
    border: 1px solid rgba(167,25,48,.18) !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,.9) !important;
    color: #7f1d2d !important;
    box-shadow: none !important;
    font-size: 20px !important;
    line-height: 1 !important;
    cursor: pointer !important;
}
.wugan-hsk-classroom-app .wco-learning-notice .wco-notice-actions { display:flex;align-items:center;gap:8px;flex:0 0 auto; }

/* Exactly three useful progress cards by default; keep them visible on all breakpoints. */
.wugan-hsk-classroom-app .wco-learning-toolbar {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(112px, 1fr)) !important;
    gap: 8px !important;
}
.wugan-hsk-classroom-app .wco-toolbar-item { min-height: 62px !important; }

/* Desktop lesson area: predictable columns and aligned action cards. */
@media (min-width: 1100px) {
    .wugan-hsk-classroom-app .wco-dashboard-content { padding: 22px 24px !important; }
    .wugan-hsk-classroom-app .wvs-course-lessons { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
    .wugan-hsk-classroom-app .wco-practice-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
    .wugan-hsk-classroom-app .wvs-practice-option { min-height: 78px !important; }
}

/* Tablet: retain two-column learning actions but reduce visual weight. */
@media (min-width: 700px) and (max-width: 1099px) {
    .wugan-hsk-classroom-app .wco-dashboard-topbar { display:grid !important;grid-template-columns:minmax(180px,.75fr) minmax(0,1.25fr) auto !important;gap:10px !important;padding:14px 16px !important; }
    .wugan-hsk-classroom-app .wco-learning-toolbar { grid-column:1/-1 !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
    .wugan-hsk-classroom-app .wvs-course-lessons { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
    .wugan-hsk-classroom-app .wco-practice-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
    .wugan-hsk-classroom-app .wvs-practice-option { grid-template-columns:40px minmax(0,1fr) auto !important;min-height:76px !important;padding:10px !important; }
    .wugan-hsk-classroom-app .wvs-course-lesson-head { gap:14px !important; }
}

/* Phone: controls stay on one visual row instead of breaking into uneven lines. */
@media (max-width: 699px) {
    .wugan-hsk-classroom-app .wco-dashboard-topbar { display:flex !important;flex-wrap:wrap !important;align-items:center !important;gap:9px !important;min-height:auto !important;padding:10px 11px !important; }
    .wugan-hsk-classroom-app .wco-topbar-title { flex:1 1 170px !important;min-width:0 !important; }
    .wugan-hsk-classroom-app .wco-topbar-title h2 { font-size:22px !important;white-space:normal !important; }
    .wugan-hsk-classroom-app .wco-dashboard-topbar .wvs-header-actions { flex:0 0 auto !important;margin-left:auto !important; }
    .wugan-hsk-classroom-app .wco-learning-toolbar { order:3 !important;flex:1 0 100% !important;width:100% !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:6px !important; }
    .wugan-hsk-classroom-app .wco-toolbar-item { grid-template-columns:28px minmax(0,1fr) !important;gap:6px !important;min-height:54px !important;padding:7px 8px !important;border-radius:11px !important; }
    .wugan-hsk-classroom-app .wco-toolbar-item > span { width:28px !important;height:28px !important;font-size:12px !important; }
    .wugan-hsk-classroom-app .wco-toolbar-item small { max-width:none !important;font-size:8px !important; }
    .wugan-hsk-classroom-app .wco-toolbar-item strong { font-size:13px !important; }
    .wugan-hsk-classroom-app .wco-dashboard-content { padding:10px !important; }
    .wugan-hsk-classroom-app .wvs-course-lessons,
    .wugan-hsk-classroom-app .wco-practice-grid { grid-template-columns:1fr !important; }
    .wugan-hsk-classroom-app .wvs-course-lesson-head { display:flex !important;flex-direction:column !important;align-items:stretch !important;gap:10px !important;padding:15px !important;border-radius:16px !important; }
    .wugan-hsk-classroom-app .wvs-course-lesson-side { width:100% !important;min-width:0 !important; }
    .wugan-hsk-classroom-app .wvs-course-breadcrumb { display:flex !important;align-items:center !important;gap:5px !important;overflow-x:auto !important;white-space:nowrap !important;padding-bottom:3px !important; }
    .wugan-hsk-classroom-app .wvs-practice-option { display:grid !important;grid-template-columns:38px minmax(0,1fr) 66px !important;gap:9px !important;align-items:center !important;min-height:70px !important;padding:10px !important;border-radius:13px !important; }
    .wugan-hsk-classroom-app .wvs-practice-option > span { width:36px !important;height:36px !important;border-radius:10px !important; }
    .wugan-hsk-classroom-app .wvs-practice-option strong { font-size:13px !important;line-height:1.25 !important; }
    .wugan-hsk-classroom-app .wvs-practice-option small { font-size:10px !important;line-height:1.3 !important; }
    .wugan-hsk-classroom-app .wvs-practice-option em { width:66px !important;max-width:66px !important;font-size:9px !important;line-height:1.2 !important;text-align:right !important;white-space:normal !important; }
    .wugan-hsk-classroom-app .wco-module-head { align-items:center !important;gap:8px !important; }
    .wugan-hsk-classroom-app .wco-module-body { padding:12px !important; }
    .wugan-hsk-classroom-app .wco-analysis-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
    .wugan-hsk-classroom-app .wco-learning-notice { align-items:flex-start !important;flex-direction:column !important;padding:13px !important; }
    .wugan-hsk-classroom-app .wco-learning-notice .wco-notice-actions { width:100% !important; }
    .wugan-hsk-classroom-app .wco-learning-notice .wco-notice-actions a { flex:1 !important;text-align:center !important; }
}
@media (max-width: 420px) {
    .wugan-hsk-classroom-app .wco-learning-toolbar { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
    .wugan-hsk-classroom-app .wco-toolbar-item { display:flex !important;flex-direction:column !important;align-items:flex-start !important;justify-content:center !important;gap:3px !important;min-height:62px !important; }
    .wugan-hsk-classroom-app .wco-toolbar-item > span { display:none !important; }
    .wugan-hsk-classroom-app .wvs-practice-option { grid-template-columns:34px minmax(0,1fr) 58px !important;gap:7px !important;padding:9px !important; }
    .wugan-hsk-classroom-app .wvs-practice-option > span { width:32px !important;height:32px !important;font-size:17px !important; }
    .wugan-hsk-classroom-app .wvs-practice-option em { width:58px !important;max-width:58px !important;font-size:8px !important; }
    .wugan-hsk-classroom-app .wco-analysis-grid { grid-template-columns:1fr !important; }
}

/* Dismiss controls for notices rendered immediately before the app root. */
.wco-learning-notice.wco-dismissible-notice{position:relative;padding-right:16px}
.wco-learning-notice .wco-notice-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.wco-learning-notice .wco-notice-close{display:inline-grid;place-items:center;width:38px;height:38px;min-width:38px;padding:0;border:1px solid rgba(167,25,48,.22);border-radius:12px;background:#fff;color:#7f1d2d;font-size:21px;line-height:1;cursor:pointer;box-shadow:none}
@media(max-width:699px){.wco-learning-notice .wco-notice-actions{width:100%}.wco-learning-notice .wco-notice-actions a{flex:1;width:auto;text-align:center}}


/* ===== 3.3.13 Glass upgrade ===== */
.wugan-hsk-classroom-app .wvs-shell,
.wugan-hsk-classroom-app .wvs-header,
.wugan-hsk-classroom-app .wvs-sidebar,
.wugan-hsk-classroom-app .wvs-stat,
.wugan-hsk-classroom-app .wvs-course-hero,
.wugan-hsk-classroom-app .wvs-course-level-head,
.wugan-hsk-classroom-app .wvs-course-lesson-card,
.wugan-hsk-classroom-app .wvs-course-study-layout > *,
.wugan-hsk-classroom-app .wvs-course-quiz-shell,
.wugan-hsk-classroom-app .wvs-course-result,
.wugan-hsk-classroom-app .wco-sentence-card,
.wugan-hsk-classroom-app .wco-sentence-analysis,
.wugan-hsk-classroom-app .wvs-speaking-card,
.wugan-hsk-classroom-app .wvs-reward-compare article,
.wugan-hsk-classroom-app .wvs-course-example,
.wugan-hsk-classroom-app .wvs-word-card,
.wugan-hsk-classroom-app .wvs-video-card,
.wugan-hsk-classroom-app .wvs-flashcard,
.wugan-hsk-classroom-app .wvs-module-card,
.wugan-hsk-classroom-app .wvs-lesson-result,
.wugan-hsk-classroom-app .wvs-course-summary {
    background: linear-gradient(145deg, rgba(255,255,255,.64), rgba(255,255,255,.26)) !important;
    border: 1px solid rgba(167,25,48,.14) !important;
    box-shadow: 0 24px 44px rgba(20,20,20,.10), inset 0 1px 0 rgba(255,255,255,.92) !important;
    backdrop-filter: blur(20px) saturate(124%);
    -webkit-backdrop-filter: blur(20px) saturate(124%);
}
.wugan-hsk-classroom-app button,
.wugan-hsk-classroom-app .wvs-primary,
.wugan-hsk-classroom-app .wvs-secondary,
.wugan-hsk-classroom-app .wvs-sample-button,
.wugan-hsk-classroom-app .wvs-mic-button,
.wugan-hsk-classroom-app .wvs-course-listen,
.wugan-hsk-classroom-app .wvs-course-options button,
.wugan-hsk-classroom-app .wvs-main-tabs button,
.wugan-hsk-classroom-app .wvs-level-grid button,
.wugan-hsk-classroom-app .wvs-lesson-accordion > summary,
.wugan-hsk-classroom-app .wvs-course-action,
.wugan-hsk-classroom-app .wvs-exercise-item {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(167,25,48,.16) !important;
    box-shadow: 0 16px 30px rgba(20,20,20,.10), inset 0 1px 0 rgba(255,255,255,.85) !important;
    backdrop-filter: blur(14px) saturate(124%);
    -webkit-backdrop-filter: blur(14px) saturate(124%);
    transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, border-color .25s ease;
}
.wugan-hsk-classroom-app button::before,
.wugan-hsk-classroom-app .wvs-primary::before,
.wugan-hsk-classroom-app .wvs-secondary::before,
.wugan-hsk-classroom-app .wvs-sample-button::before,
.wugan-hsk-classroom-app .wvs-mic-button::before,
.wugan-hsk-classroom-app .wvs-course-listen::before,
.wugan-hsk-classroom-app .wvs-course-options button::before,
.wugan-hsk-classroom-app .wvs-main-tabs button::before,
.wugan-hsk-classroom-app .wvs-level-grid button::before,
.wugan-hsk-classroom-app .wvs-lesson-accordion > summary::before,
.wugan-hsk-classroom-app .wvs-course-action::before,
.wugan-hsk-classroom-app .wvs-exercise-item::before {
    content: "";
    position: absolute;
    inset: -1px auto -1px -45%;
    width: 34%;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.62), rgba(255,255,255,0));
    transform: skewX(-20deg) translateX(-220%);
    transition: transform .72s ease;
    pointer-events: none;
}
.wugan-hsk-classroom-app button:hover::before,
.wugan-hsk-classroom-app .wvs-primary:hover::before,
.wugan-hsk-classroom-app .wvs-secondary:hover::before,
.wugan-hsk-classroom-app .wvs-sample-button:hover::before,
.wugan-hsk-classroom-app .wvs-mic-button:hover::before,
.wugan-hsk-classroom-app .wvs-course-listen:hover::before,
.wugan-hsk-classroom-app .wvs-course-options button:hover::before,
.wugan-hsk-classroom-app .wvs-main-tabs button:hover::before,
.wugan-hsk-classroom-app .wvs-level-grid button:hover::before,
.wugan-hsk-classroom-app .wvs-lesson-accordion > summary:hover::before,
.wugan-hsk-classroom-app .wvs-course-action:hover::before,
.wugan-hsk-classroom-app .wvs-exercise-item:hover::before {
    transform: skewX(-20deg) translateX(430%);
}
.wugan-hsk-classroom-app button:hover,
.wugan-hsk-classroom-app .wvs-primary:hover,
.wugan-hsk-classroom-app .wvs-secondary:hover,
.wugan-hsk-classroom-app .wvs-sample-button:hover,
.wugan-hsk-classroom-app .wvs-mic-button:hover,
.wugan-hsk-classroom-app .wvs-course-listen:hover,
.wugan-hsk-classroom-app .wvs-course-options button:hover,
.wugan-hsk-classroom-app .wvs-main-tabs button:hover,
.wugan-hsk-classroom-app .wvs-level-grid button:hover,
.wugan-hsk-classroom-app .wvs-lesson-accordion > summary:hover,
.wugan-hsk-classroom-app .wvs-course-action:hover,
.wugan-hsk-classroom-app .wvs-exercise-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 36px rgba(20,20,20,.14), inset 0 1px 0 rgba(255,255,255,.92) !important;
}
.wugan-hsk-classroom-app input,
.wugan-hsk-classroom-app textarea,
.wugan-hsk-classroom-app select {
    background: linear-gradient(145deg, rgba(255,255,255,.58), rgba(255,255,255,.30)) !important;
    border: 1px solid rgba(167,25,48,.16) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 10px 24px rgba(20,20,20,.06) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.wco-pronunciation-quiz-shell,
.wvs-course-pronunciation-card { border-radius: 28px !important; }
.wvs-course-pronunciation-card {
    gap: 14px;
    max-width: 760px;
    padding: clamp(18px, 3vw, 30px);
    border: 1px solid rgba(167,25,48,.16);
    background: linear-gradient(145deg, rgba(255,255,255,.56), rgba(255,255,255,.18));
    box-shadow: 0 24px 46px rgba(20,20,20,.10), inset 0 1px 0 rgba(255,255,255,.92);
    backdrop-filter: blur(24px) saturate(126%);
    -webkit-backdrop-filter: blur(24px) saturate(126%);
}
.wco-pronunciation-actions { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.wco-pronunciation-sentence-task {
    width: min(760px, 100%);
    margin-top: 6px;
    padding: 18px;
    border: 1px solid rgba(167,25,48,.14);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(255,255,255,.50), rgba(255,255,255,.18));
    box-shadow: 0 18px 34px rgba(20,20,20,.08), inset 0 1px 0 rgba(255,255,255,.90);
    backdrop-filter: blur(22px) saturate(124%);
    -webkit-backdrop-filter: blur(22px) saturate(124%);
    text-align: left;
}
.wco-pronunciation-sentence-head { display:flex; justify-content:space-between; gap:12px; align-items:center; flex-wrap:wrap; }
.wco-pronunciation-sentence-head strong { font-size: 18px; line-height: 1.4; }
.wco-pronunciation-sentence-head span { display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.54); border:1px solid rgba(167,25,48,.14); font-size:12px; font-weight:900; }
.wco-pronunciation-cue { margin:10px 0 14px; padding:12px 14px; border-radius:16px; border:1px solid rgba(167,25,48,.10); background:rgba(255,255,255,.34); color:#4f4b56; line-height:1.6; }
.wco-pronunciation-inline-form { display:grid; gap:10px; }
.wco-pronunciation-inline-form label { display:grid; gap:8px; font-weight:800; }
.wco-pronunciation-inline-form textarea { min-height:110px; border-radius:18px !important; }
.wco-pronunciation-example {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:12px;
    align-items:center;
    margin-top:14px;
    padding:14px;
    border-radius:18px;
    border:1px solid rgba(167,25,48,.14);
    background: linear-gradient(145deg, rgba(255,255,255,.54), rgba(255,255,255,.22));
}
.wco-pronunciation-example small,
.wco-pronunciation-example strong,
.wco-pronunciation-example em,
.wco-pronunciation-example span { display:block; }
.wco-pronunciation-example small { color: var(--wvs-primary-dark); font-size:10px; font-weight:900; letter-spacing:.12em; }
.wco-pronunciation-example strong { margin-top:5px; font-size:24px; }
.wco-pronunciation-example em { margin-top:4px; color:#5f269e; font-style:normal; }
.wco-pronunciation-example span { margin-top:5px; color:#5d5965; }
.wco-sentence-card,
.wco-sentence-analysis {
    border-radius:24px !important;
    background: linear-gradient(145deg, rgba(255,255,255,.56), rgba(255,255,255,.18)) !important;
    backdrop-filter: blur(20px) saturate(124%);
    -webkit-backdrop-filter: blur(20px) saturate(124%);
}
@media (max-width: 780px) { .wco-pronunciation-example { grid-template-columns: 1fr; } }


/* ===== 3.3.14 Mobile exercise + horizontal course navigation ===== */
@media (max-width: 699px) {
    html, body { max-width: 100%; overflow-x: hidden; }
    .wugan-hsk-classroom-app,
    .wugan-hsk-classroom-app * { box-sizing: border-box; }
    .wugan-hsk-classroom-app { width: 100%; max-width: 100%; overflow-x: clip; }
    .wugan-hsk-classroom-app .wvs-shell,
    .wugan-hsk-classroom-app .wco-dashboard-shell,
    .wugan-hsk-classroom-app .wco-dashboard-frame,
    .wugan-hsk-classroom-app .wco-dashboard-content,
    .wugan-hsk-classroom-app .wvs-course-app,
    .wugan-hsk-classroom-app [data-course-app],
    .wugan-hsk-classroom-app [data-course-quiz-area] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Mobile course navigator: HSK 1, HSK 2, HSK 3... in one horizontal rail. */
    .wugan-hsk-classroom-app .wco-dashboard-sidebar {
        position: sticky !important;
        top: 0 !important;
        z-index: 80 !important;
        display: block !important;
        width: 100% !important;
        padding: 7px 8px !important;
        border-right: 0 !important;
        border-bottom: 1px solid rgba(167,25,48,.12) !important;
        background: rgba(255,255,255,.74) !important;
        backdrop-filter: blur(20px) saturate(125%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(125%) !important;
        box-shadow: 0 10px 24px rgba(20,20,20,.06) !important;
    }
    .wugan-hsk-classroom-app .wco-sidebar-brand,
    .wugan-hsk-classroom-app .wco-sidebar-group-title,
    .wugan-hsk-classroom-app .wco-sidebar-account { display: none !important; }
    .wugan-hsk-classroom-app .wco-sidebar-nav {
        display: flex !important;
        align-items: center !important;
        gap: 7px !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .wugan-hsk-classroom-app .wco-sidebar-nav::-webkit-scrollbar,
    .wugan-hsk-classroom-app [data-course-sidebar]::-webkit-scrollbar { display: none; }
    .wugan-hsk-classroom-app [data-course-sidebar] {
        display: flex !important;
        align-items: center !important;
        gap: 7px !important;
        width: max-content !important;
        min-width: max-content !important;
        overflow: visible !important;
    }
    .wugan-hsk-classroom-app .wco-sidebar-nav > button[data-sidebar-home],
    .wugan-hsk-classroom-app .wco-sidebar-course {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-width: 74px !important;
        min-height: 42px !important;
        padding: 6px 10px !important;
        gap: 7px !important;
        border: 1px solid rgba(167,25,48,.13) !important;
        border-radius: 13px !important;
        background: linear-gradient(145deg,rgba(255,255,255,.68),rgba(255,255,255,.30)) !important;
        box-shadow: 0 8px 18px rgba(20,20,20,.06), inset 0 1px 0 rgba(255,255,255,.9) !important;
        white-space: nowrap !important;
    }
    .wugan-hsk-classroom-app .wco-sidebar-nav > button[data-sidebar-home] { min-width: 42px !important; padding-inline: 7px !important; }
    .wugan-hsk-classroom-app .wco-sidebar-nav > button[data-sidebar-home] > strong { display: none !important; }
    .wugan-hsk-classroom-app .wco-sidebar-course > div {
        display: block !important;
        min-width: 0 !important;
    }
    .wugan-hsk-classroom-app .wco-sidebar-course > div > strong {
        display: block !important;
        font-size: 12px !important;
        font-weight: 850 !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
    }
    .wugan-hsk-classroom-app .wco-sidebar-course > div > small { display: none !important; }
    .wugan-hsk-classroom-app .wco-sidebar-course > span,
    .wugan-hsk-classroom-app .wco-sidebar-nav > button[data-sidebar-home] > span {
        display: grid !important;
        flex: 0 0 28px !important;
        width: 28px !important;
        height: 28px !important;
        place-items: center !important;
        border-radius: 9px !important;
        font-size: 11px !important;
    }
    .wugan-hsk-classroom-app .wco-sidebar-course.is-active {
        border: 1px solid rgba(167,25,48,.35) !important;
        background: linear-gradient(145deg,rgba(255,242,244,.90),rgba(255,255,255,.48)) !important;
        color: var(--wco-ui-accent,#a71930) !important;
        box-shadow: 0 10px 22px rgba(167,25,48,.10), inset 0 1px 0 rgba(255,255,255,.92) !important;
    }

    /* Header/content: no clipped controls or oversized whitespace. */
    .wugan-hsk-classroom-app .wco-dashboard-topbar {
        position: relative !important;
        gap: 8px !important;
        padding: 10px !important;
        border-radius: 0 !important;
    }
    .wugan-hsk-classroom-app .wco-topbar-title h2 { font-size: 20px !important; line-height: 1.2 !important; }
    .wugan-hsk-classroom-app .wvs-header-actions { gap: 6px !important; }
    .wugan-hsk-classroom-app .wvs-header-actions > button { min-height: 40px !important; padding: 8px 10px !important; }
    .wugan-hsk-classroom-app .wco-dashboard-content { padding: 9px !important; overflow: hidden !important; }

    /* Lesson / exercise cards: one clean column with predictable widths. */
    .wugan-hsk-classroom-app .wvs-course-hero,
    .wugan-hsk-classroom-app .wvs-course-level-head,
    .wugan-hsk-classroom-app .wvs-course-lesson-head,
    .wugan-hsk-classroom-app .wvs-course-lesson-card,
    .wugan-hsk-classroom-app .wco-lesson-module,
    .wugan-hsk-classroom-app .wvs-course-quiz-shell,
    .wugan-hsk-classroom-app .wvs-course-result,
    .wugan-hsk-classroom-app .wco-sentence-card,
    .wugan-hsk-classroom-app .wvs-course-pronunciation-card,
    .wugan-hsk-classroom-app .wco-pronunciation-sentence-task {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .wugan-hsk-classroom-app .wvs-course-hero,
    .wugan-hsk-classroom-app .wvs-course-level-head,
    .wugan-hsk-classroom-app .wvs-course-lesson-head,
    .wugan-hsk-classroom-app .wvs-course-quiz-shell,
    .wugan-hsk-classroom-app .wvs-course-result { padding: 13px !important; border-radius: 18px !important; }
    .wugan-hsk-classroom-app .wvs-course-lessons,
    .wugan-hsk-classroom-app .wco-practice-grid,
    .wugan-hsk-classroom-app .wvs-course-options,
    .wugan-hsk-classroom-app .wco-analysis-grid,
    .wugan-hsk-classroom-app .wco-sentence-word { grid-template-columns: 1fr !important; }
    .wugan-hsk-classroom-app .wvs-course-lesson-card { min-height: 0 !important; padding: 12px !important; }
    .wugan-hsk-classroom-app .wvs-course-lesson-card > *,
    .wugan-hsk-classroom-app .wvs-course-lesson-head > *,
    .wugan-hsk-classroom-app .wco-module-head > *,
    .wugan-hsk-classroom-app .wvs-course-quiz-head > * { min-width: 0 !important; }

    /* Exercise choice rows: stop right-side labels from crushing the title. */
    .wugan-hsk-classroom-app .wvs-practice-option {
        display: grid !important;
        grid-template-columns: 36px minmax(0,1fr) !important;
        grid-template-areas: "icon copy" "state state" !important;
        gap: 8px 10px !important;
        width: 100% !important;
        min-height: 0 !important;
        padding: 11px !important;
        text-align: left !important;
    }
    .wugan-hsk-classroom-app .wvs-practice-option > span { grid-area: icon !important; width: 34px !important; height: 34px !important; }
    .wugan-hsk-classroom-app .wvs-practice-option > div { grid-area: copy !important; min-width: 0 !important; }
    .wugan-hsk-classroom-app .wvs-practice-option > em {
        grid-area: state !important;
        justify-self: stretch !important;
        width: 100% !important;
        max-width: none !important;
        padding-top: 7px !important;
        border-top: 1px solid rgba(167,25,48,.08) !important;
        text-align: right !important;
        white-space: nowrap !important;
    }
    .wugan-hsk-classroom-app .wvs-practice-option strong { font-size: 14px !important; }
    .wugan-hsk-classroom-app .wvs-practice-option small { font-size: 10px !important; line-height: 1.35 !important; }

    /* Quiz headers and controls wrap cleanly. */
    .wugan-hsk-classroom-app .wvs-course-quiz-head {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    .wugan-hsk-classroom-app .wvs-course-quiz-head > div { flex: 1 1 180px !important; }
    .wugan-hsk-classroom-app .wvs-course-quiz-head > em { flex: 0 0 auto !important; }
    .wugan-hsk-classroom-app .wvs-course-question { width: 100% !important; margin-top: 14px !important; }
    .wugan-hsk-classroom-app .wvs-course-question-hanzi { font-size: clamp(44px,18vw,66px) !important; line-height: 1.1 !important; }
    .wugan-hsk-classroom-app .wvs-course-question form,
    .wugan-hsk-classroom-app .wco-sentence-card form,
    .wugan-hsk-classroom-app .wco-pronunciation-inline-form { grid-template-columns: 1fr !important; width: 100% !important; }
    .wugan-hsk-classroom-app .wvs-course-options button,
    .wugan-hsk-classroom-app .wvs-course-question form button,
    .wugan-hsk-classroom-app .wco-sentence-card form button,
    .wugan-hsk-classroom-app .wvs-course-next,
    .wugan-hsk-classroom-app [data-course-pronunciation-next] {
        width: 100% !important;
        min-height: 46px !important;
    }
    .wugan-hsk-classroom-app .wvs-course-options button { text-align: left !important; padding: 11px 12px !important; }

    /* Sentence exercise + pronunciation sentence exercise. */
    .wugan-hsk-classroom-app .wco-sentence-card,
    .wugan-hsk-classroom-app .wvs-course-pronunciation-card,
    .wugan-hsk-classroom-app .wco-pronunciation-sentence-task { padding: 14px !important; border-radius: 18px !important; }
    .wugan-hsk-classroom-app .wco-sentence-word { gap: 10px !important; padding-bottom: 12px !important; }
    .wugan-hsk-classroom-app .wco-sentence-word strong { font-size: 36px !important; }
    .wugan-hsk-classroom-app .wco-pronunciation-actions { display: grid !important; grid-template-columns: 1fr !important; width: 100% !important; gap: 8px !important; }
    .wugan-hsk-classroom-app .wco-pronunciation-actions button { width: 100% !important; min-height: 46px !important; }
    .wugan-hsk-classroom-app .wco-pronunciation-sentence-head { align-items: flex-start !important; }
    .wugan-hsk-classroom-app .wco-pronunciation-sentence-head strong { flex: 1 1 100% !important; font-size: 16px !important; }
    .wugan-hsk-classroom-app .wco-pronunciation-cue { font-size: 12px !important; padding: 10px !important; }
    .wugan-hsk-classroom-app .wco-sentence-analysis { padding: 13px !important; overflow-wrap: anywhere !important; }
    .wugan-hsk-classroom-app .wco-sentence-score { align-items: flex-start !important; flex-direction: column !important; gap: 5px !important; }
    .wugan-hsk-classroom-app .wco-sentence-analysis ul { padding-left: 18px !important; }
    .wugan-hsk-classroom-app textarea { min-height: 105px !important; font-size: 16px !important; }

    /* Full recognized sentence after voice input. */
    .wugan-hsk-classroom-app .wco-pronunciation-transcript {
        display: grid !important;
        gap: 6px !important;
        width: 100% !important;
        margin: 13px 0 0 !important;
        padding: 13px !important;
        border: 1px solid rgba(167,25,48,.14) !important;
        border-radius: 16px !important;
        background: linear-gradient(145deg,rgba(255,255,255,.66),rgba(255,255,255,.28)) !important;
        box-shadow: 0 12px 26px rgba(20,20,20,.07), inset 0 1px 0 rgba(255,255,255,.92) !important;
        backdrop-filter: blur(16px) saturate(122%) !important;
        -webkit-backdrop-filter: blur(16px) saturate(122%) !important;
    }
    .wugan-hsk-classroom-app .wco-pronunciation-transcript small { color: var(--wvs-primary-dark) !important; font-size: 9px !important; font-weight: 950 !important; letter-spacing: .1em !important; }
    .wugan-hsk-classroom-app .wco-pronunciation-transcript strong { color: #171717 !important; font-size: 22px !important; line-height: 1.45 !important; overflow-wrap: anywhere !important; }
    .wugan-hsk-classroom-app .wco-pronunciation-transcript span { color: #6b7280 !important; font-size: 11px !important; line-height: 1.45 !important; }

    /* Module/media containment. */
    .wugan-hsk-classroom-app img,
    .wugan-hsk-classroom-app video,
    .wugan-hsk-classroom-app iframe,
    .wugan-hsk-classroom-app audio { max-width: 100% !important; }
    .wugan-hsk-classroom-app audio { width: 100% !important; }
    .wugan-hsk-classroom-app .wco-module-body,
    .wugan-hsk-classroom-app .wco-module-content { min-width: 0 !important; overflow: hidden !important; }
}

/* Transcript glass styling on tablet/desktop too. */
.wugan-hsk-classroom-app .wco-pronunciation-transcript {
    display: grid;
    gap: 7px;
    width: 100%;
    margin: 15px 0 0;
    padding: 15px 16px;
    border: 1px solid rgba(167,25,48,.14);
    border-radius: 18px;
    background: linear-gradient(145deg,rgba(255,255,255,.62),rgba(255,255,255,.24));
    box-shadow: 0 14px 30px rgba(20,20,20,.07), inset 0 1px 0 rgba(255,255,255,.92);
    backdrop-filter: blur(18px) saturate(124%);
    -webkit-backdrop-filter: blur(18px) saturate(124%);
    text-align: left;
}
.wugan-hsk-classroom-app .wco-pronunciation-transcript small { color: var(--wvs-primary-dark); font-size: 10px; font-weight: 950; letter-spacing: .12em; }
.wugan-hsk-classroom-app .wco-pronunciation-transcript strong { color: #171717; font-size: 25px; line-height: 1.45; }
.wugan-hsk-classroom-app .wco-pronunciation-transcript span { color: #667085; font-size: 12px; }

@media (hover: none) and (pointer: coarse) {
    .wugan-hsk-classroom-app button:hover,
    .wugan-hsk-classroom-app .wvs-practice-option:hover,
    .wugan-hsk-classroom-app .wvs-course-lesson-card:hover,
    .wugan-hsk-classroom-app .wco-sidebar-course:hover { transform: none !important; }
    .wugan-hsk-classroom-app button::before { display: none !important; }
}