/* ═══════════════════════════════════════════════════════════════
   admin.css — AgentWeb Admin Panel
   Uses the same CSS custom properties as common.css
   ═══════════════════════════════════════════════════════════════ */

/* ─── RESET COMMON BODY CONSTRAINTS ────────────────────────── */
/* The base font-size is load-bearing, not cosmetic. common.css gives body a
   colour but no size, so before this rule every element whose class carried no
   font-size — and whose ancestors carried none either — fell through to the UA
   default of 16px while also inheriting the full-contrast body colour. That is
   3px above this panel's body step and 5px above its labels, which is why those
   orphans read as both the largest and the darkest thing in their card. The four
   management centres never showed the fault because their shells declare a size;
   the sections that do not — 系统工具, 用户, the drawers and the modals — carried
   it wherever a component stopped short of styling its own leaves.
   Declaring it here catches all of them at once and overrides nothing, since
   inheritance loses to every explicit rule. Form controls do NOT inherit it —
   they take their size from the UA — so inputs and selects still need their own
   rule; .form-input / .form-select / .form-textarea carry it. */
body.admin-body {
    overflow: auto;
    height: auto;
    display: block;
    justify-content: unset;
    align-items: unset;
    min-width: 0;
    font-size: 13px;
}

/* ─── LAYOUT ────────────────────────────────────────────────── */
.admin-shell {
    --admin-header-height: 60px;
    display: flex;
    min-height: 100vh;
}

/* ─── SIDEBAR ───────────────────────────────────────────────── */
.admin-sidebar {
    width: 160px;
    flex-shrink: 0;
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 200;
    overflow: hidden;
}

.sidebar-logo {
    height: var(--admin-header-height);
    padding: 0 20px;
    font-size: 15px;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: 0.08em;
    font-family: 'Roboto Mono', 'Courier New', monospace;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    text-align: center;
    background: none;
    border-left: none;
    border-right: none;
    border-top: none;
    width: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s;
    line-height: 1;
}

.sidebar-logo:hover {
    opacity: 0.75;
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 12px 0;
    scrollbar-width: none;
}

.sidebar-nav::-webkit-scrollbar {
    display: none;
}

.sidebar-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    border-left: 3px solid transparent;
}

.sidebar-nav-item:hover {
    color: var(--text);
    background: var(--accent-glow);
}

.sidebar-nav-item.active {
    color: var(--accent);
    border-left-color: var(--accent);
    background: var(--accent-glow);
    font-weight: 600;
}

.sidebar-nav-item .nav-icon {
    font-size: 20px;
    flex-shrink: 0;
    width: auto;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-bottom {
    padding: 16px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

/* ─── TOP BAR ───────────────────────────────────────────────── */
.admin-topbar {
    position: fixed;
    top: 0;
    left: 160px;
    right: 0;
    height: var(--admin-header-height);
    z-index: 150;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 32px;
    gap: 16px;
    flex-shrink: 0;
}

.admin-topbar-home {
    display: flex;
    align-items: center;
    font-size: 22px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.02em;
    font-family: 'Inter', -apple-system, sans-serif;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    flex-shrink: 0;
    transition: opacity 0.15s;
    line-height: 1;
}

.admin-topbar-home:hover {
    opacity: 0.7;
}

.admin-topbar-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
}

.topbar-slot {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.admin-message-notify-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.admin-message-bell {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 999px;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

.admin-message-bell:hover {
    border-color: rgba(239, 68, 68, 0.65);
    background: rgba(239, 68, 68, 0.16);
    transform: translateY(-1px);
}

.admin-message-bell svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.admin-message-bell.has-message {
    animation: bell-shake 1.6s ease-in-out infinite;
    transform-origin: 50% 12%;
}

@keyframes bell-shake {
    0%, 100% { transform: rotate(0deg); }
    8%, 24% { transform: rotate(-12deg); }
    16%, 32% { transform: rotate(12deg); }
    42% { transform: rotate(0deg); }
}

.admin-message-popover {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(360px, calc(100vw - 32px));
    max-height: min(440px, calc(100vh - 96px));
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--card-shadow);
    padding: 10px;
    z-index: 260;
}

.admin-message-popover-title {
    color: var(--text);
    font-size: 13px;
    font-weight: 900;
    margin: 2px 4px 10px;
}

.admin-message-popover-list {
    display: grid;
    gap: 8px;
}

.admin-message-notify-item {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
    padding: 10px 11px;
    text-align: left;
}

.admin-message-notify-item.unseen {
    border-color: rgba(239, 68, 68, 0.38);
    background: rgba(239, 68, 68, 0.06);
}

.admin-message-notify-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 6px;
}

.admin-message-notify-name {
    color: var(--text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-message-notify-reply {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.45;
    max-height: 38px;
    overflow: hidden;
}

.admin-message-notify-headline {
    font-size: 13px;
    font-weight: 900;
    margin-bottom: 4px;
}

.admin-message-notify-headline.is-done {
    color: rgb(22, 163, 74);
}

.admin-message-notify-headline.is-failed {
    color: rgb(220, 38, 38);
}

.admin-message-popover-empty {
    color: var(--text-muted);
    font-size: 13px;
    padding: 10px 4px;
    text-align: center;
}

.topbar-slot .search-input {
    flex: 0 1 240px;
    min-width: 120px;
}

.topbar-section-label {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
    white-space: nowrap;
}

/* ─── MAIN CONTENT ──────────────────────────────────────────── */
.admin-content {
    margin-left: 160px;
    flex: 1;
    background: var(--bg);
    min-height: 100vh;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

.admin-sections-wrap {
    padding: 32px;
    padding-top: calc(var(--admin-header-height) + 32px);
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ─── SECTION PANELS ────────────────────────────────────────── */
.admin-section {
    display: none;
    animation: fadeInSection 0.2s ease;
}

.admin-section.active {
    display: block;
}

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

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 16px;
    flex-wrap: wrap;
}

.section-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.01em;
}

/* ─── CARDS ─────────────────────────────────────────────────── */
.admin-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 28px;
    margin-bottom: 24px;
}

.admin-card-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 20px;
}

/* ─── FORM ELEMENTS ─────────────────────────────────────────── */
/* Form controls and buttons do not inherit typography — the UA gives them their
   own family and ~13.33px, so the panel's base size never reaches them. 19 button
   and input shapes in the admin had no font rule of their own and were rendering
   in the system font at a size nobody chose. Both declarations sit inside :where()
   so the whole selector has zero specificity: it supplies a default and loses to
   every explicit rule, including .btn-sm (12px) and .btn-xs (11px). */
:where(body.admin-body) :where(button, input, select, textarea) {
    font-family: inherit;
    font-size: inherit;
}

/* Admin type scale. The panel is dense — tables, KPI strips and meta lines all
   sit at 12–13px — so controls belong at the same level as the text they act on,
   not a notch above it. 13px is the control/body size (inputs, selects, buttons,
   tabs, table cells); 12px is for labels and meta; 11px for micro chips and
   .btn-xs. 14px is the card-title step, and only real headings (.section-title,
   .drawer-title) or numbers meant to dominate their card (.mgmt-kpi-value,
   .gd-stat-value) go above it. New rules should reuse these steps rather
   than introduce a 14px control, which is what made 总览/任务队列 and the
   dropdowns read as oversized next to their own panels. */
.form-stack {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

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

.account-expiry-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
}

.account-expiry-badge.expired {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.account-expiry-badge.permanent {
    background: var(--surface-2);
    color: var(--text-muted);
}

.vocab-setting-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.vocab-setting-row .form-select {
    flex: 1 1 220px;
}

.vocab-setting-help {
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
}

.form-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.form-label-hint {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 10px;
}

.form-label .required {
    color: var(--hard);
    margin-left: 2px;
}

.btn-inline-refresh {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 13px;
    padding: 0 4px;
    margin-left: 4px;
    vertical-align: middle;
    opacity: 0.7;
    line-height: 1;
}
.btn-inline-refresh:hover { opacity: 1; color: var(--accent); }

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 10px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-size: 13px;
    font-family: 'Inter', -apple-system, sans-serif;
    outline: none;
    transition: border-color 0.15s;
    appearance: none;
    -webkit-appearance: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
}

.form-select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238892B0' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.form-textarea {
    resize: vertical;
    min-height: 80px;
    line-height: 1.6;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.grammar-file-picker-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.grammar-file-display {
    flex: 1;
}

.grammar-file-browse-btn {
    flex-shrink: 0;
    min-width: 96px;
}

.grammar-file-select-hidden {
    display: none;
}

.form-actions {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    flex-wrap: wrap;
}

/* ─── BUTTONS ───────────────────────────────────────────────── */
.btn-primary {
    padding: 10px 24px;
    background: var(--accent);
    border: none;
    border-radius: 10px;
    color: #0A0E17;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: filter 0.15s, transform 0.15s, box-shadow 0.15s;
    white-space: nowrap;
    font-family: 'Inter', -apple-system, sans-serif;
}

.btn-primary:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px var(--accent-glow);
}

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

.btn-primary:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    filter: none;
    box-shadow: none;
}

.grammar-action-area-disabled {
    opacity: 0.5;
    pointer-events: none;
}

.grammar-action-area-disabled .tab-btn,
.grammar-action-area-disabled .form-select,
.grammar-action-area-disabled .form-input,
.grammar-action-area-disabled .btn-ghost,
.grammar-action-area-disabled .btn-primary,
.grammar-action-area-disabled .btn-inline-refresh,
.grammar-action-area-disabled input[type="radio"] {
    cursor: not-allowed;
}

.btn-ghost {
    padding: 10px 20px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    white-space: nowrap;
    font-family: 'Inter', -apple-system, sans-serif;
}

.btn-ghost:hover {
    border-color: var(--text-muted);
    color: var(--text);
    background: rgba(255, 255, 255, 0.03);
}

.btn-ghost:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    color: var(--text-muted);
    border-color: var(--border);
    background: transparent;
}

.btn-ghost:disabled:hover {
    color: var(--text-muted);
    border-color: var(--border);
    background: transparent;
}

.btn-danger {
    padding: 10px 20px;
    background: transparent;
    border: 1px solid var(--hard);
    border-radius: 10px;
    color: var(--hard);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    font-family: 'Inter', -apple-system, sans-serif;
    margin-left: auto;
}

.btn-danger:hover {
    background: rgba(248, 113, 113, 0.12);
}

.btn-danger {
    padding: 10px 20px;
    background: rgba(244, 67, 54, 0.08);
    border: 1px solid var(--hard);
    border-radius: 10px;
    color: var(--hard);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
    font-family: 'Inter', -apple-system, sans-serif;
}

.btn-danger:hover {
    background: rgba(244, 67, 54, 0.16);
}

/* Small button variant */
.btn-sm {
    padding: 6px 14px;
    font-size: 12px;
    border-radius: 8px;
}

/* Icon-only button (sidebar theme toggle, etc.) */
.btn-icon {
    background: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, border-color 0.15s;
    font-size: 16px;
    width: 100%;
}

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

/* Logout button (sidebar bottom) */
.btn-logout {
    background: none;
    border: 1px solid rgba(244, 67, 54, 0.35);
    border-radius: 8px;
    color: var(--hard);
    cursor: pointer;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.15s;
    font-family: 'Inter', -apple-system, sans-serif;
}

.btn-logout:hover {
    background: rgba(244, 67, 54, 0.08);
}

/* ─── SEARCH BAR ────────────────────────────────────────────── */
.search-row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.search-input {
    flex: 1;
    min-width: 180px;
    padding: 9px 14px 9px 38px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-size: 13px;
    outline: none;
    transition: border-color 0.15s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238892B0' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px center;
    font-family: 'Inter', -apple-system, sans-serif;
}

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

.search-input::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

/* ─── GROUP FILTER ──────────────────────────────────────────── */
.group-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 0 20px;
    min-height: 36px;
}

.group-filter-chip {
    padding: 5px 16px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    white-space: nowrap;
    font-family: 'Inter', -apple-system, sans-serif;
}

.group-filter-chip:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.group-filter-chip.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #0A0E17;
    font-weight: 600;
}

[data-theme="light"] .group-filter-chip.active {
    color: #fff;
}

/* ─── USER / GROUP MANAGEMENT ──────────────────────────────── */
.users-subnav {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    margin-bottom: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}

.users-subnav-btn {
    border: 0;
    border-radius: 6px;
    padding: 7px 14px;
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.users-subnav-btn.active {
    background: var(--accent);
    color: #0A0E17;
}

[data-theme="light"] .users-subnav-btn.active {
    color: #fff;
}

.group-management-card {
    padding: 18px;
}

.group-management-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.group-management-subtitle {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 13px;
}

.group-management-head > div > .group-management-subtitle:first-child {
    margin-top: 0;
}

.group-editor {
    margin-bottom: 16px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}

.group-editor-grid {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) minmax(180px, 1fr) 140px;
    gap: 12px;
}

.group-editor-desc {
    grid-column: 1 / -1;
}

.group-policy-editor {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}

.group-policy-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
}

.group-editor-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.groups-table-wrap {
    overflow-x: auto;
}

.groups-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.groups-table th,
.groups-table td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
}

.groups-table th {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
}

.group-name-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.group-id-muted {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 12px;
}

.group-virtual-badge,
.group-status-pill,
.group-policy-pill {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.group-virtual-badge {
    color: #92400e;
    background: #fef3c7;
}

.group-status-pill.active,
.group-policy-pill.on {
    color: #34d399;
    background: rgba(52, 211, 153, 0.12);
}

.group-status-pill.archived,
.group-policy-pill.off {
    color: var(--text-muted);
    background: rgba(148, 163, 184, 0.12);
}

.group-policy-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 460px;
}

.group-action-row {
    display: flex;
    gap: 8px;
    white-space: nowrap;
}

.leaderboard-scope-editor-section { margin-top: 16px; }
.leaderboard-scope-picker-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}
.leaderboard-scope-count {
    color: var(--text-muted);
    font-size: 12px;
}
.leaderboard-scope-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.leaderboard-scope-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 13px;
    line-height: 1.3;
}
.leaderboard-scope-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(148, 163, 184, .18);
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}
.leaderboard-scope-chip-remove:hover { color: var(--text); }
.leaderboard-scope-member-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 16px;
}
.leaderboard-scope-chip-id {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 400;
}
.leaderboard-scope-user-list {
    max-height: 208px;
    margin-top: 8px;
    padding: 4px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    -webkit-overflow-scrolling: touch;
}
.leaderboard-scope-user-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
}
.leaderboard-scope-user-row:hover { background: rgba(148, 163, 184, .1); }
.leaderboard-scope-user-row.is-blocked { color: var(--text-muted); cursor: not-allowed; }
.leaderboard-scope-user-name { flex: 1; min-width: 0; }
.leaderboard-scope-user-hint {
    color: var(--text-muted);
    font-size: 12px;
    white-space: nowrap;
}
.leaderboard-scope-user-empty {
    padding: 14px 10px;
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
}
.leaderboard-scope-preview {
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(34, 197, 94, .1);
    color: #15803d;
}
@media (max-width: 760px) {
    .leaderboard-scope-member-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .group-management-head {
        flex-direction: column;
    }

    .group-editor-grid {
        grid-template-columns: 1fr;
    }
}

/* ─── LEARNING BOARD ───────────────────────────────────────── */
.learning-board-card {
    padding: 22px 22px 20px;
}

.learning-board-header-actions {
    display: flex;
    gap: 8px;
}

.learning-board-filter-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    align-items: end;
    /* 控件与数据之间要有一道明确的分隔。这里原本靠 tab 条的上下外边距撑开，
       tab 机制删除后两排就贴在了一起。 */
    margin-bottom: 18px;
}

.learning-board-field {
    min-width: 0;
}

.learning-board-field.is-disabled {
    opacity: 0.55;
}

.learning-board-field-sm {
    min-width: 120px;
}

.learning-board-kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.learning-board-kpi {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
    min-width: 0;
}

.learning-board-kpi-label {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px;
}

.learning-board-kpi-value {
    color: var(--text);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.learning-board-kpi-value.small {
    font-size: 16px;
    line-height: 1.45;
}

.learning-board-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.learning-board-summary-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
}

.learning-board-summary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.learning-board-summary-title {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--accent-glow);
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.learning-board-summary-chip {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--accent-glow);
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.learning-board-summary-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
}

.learning-board-summary-item {
    min-width: 0;
}

.learning-board-summary-label {
    color: var(--text-muted);
    font-size: 12px;
    margin-bottom: 4px;
}

.learning-board-summary-value {
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    word-break: break-word;
}

.learning-board-reading-chart {
    min-width: 0;
}

.learning-board-reading-chart-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 11px;
}

.learning-board-reading-chart-metrics strong {
    margin-left: 4px;
    color: var(--text);
}

.learning-board-reading-chart-svg {
    display: block;
    width: 100%;
    height: auto;
    min-height: 118px;
    overflow: visible;
}

.learning-board-reading-chart-scroll {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.learning-board-reading-chart-svg .axis {
    stroke: var(--border);
    stroke-width: 1;
}

.learning-board-reading-chart-svg .grid {
    stroke: var(--border);
    stroke-width: 1;
    opacity: 0.65;
}

.learning-board-reading-chart-svg .axis-label {
    fill: var(--text-muted);
    font-size: 10px;
}

.learning-board-reading-chart-svg .trend-line {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.learning-board-reading-chart-svg .trend-point {
    fill: var(--accent);
    stroke: var(--surface-2);
    stroke-width: 1.8;
}

.learning-board-reading-chart-svg .duration-label {
    fill: var(--text);
    font-size: 9px;
    font-weight: 700;
}

.learning-board-reading-chart-svg .empty-point {
    fill: var(--border);
    opacity: 0.75;
}

.learning-board-memory-signals {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
    margin-bottom: 14px;
    color: var(--text-muted);
    font-size: 12px;
}

.learning-board-memory-signals strong {
    margin-left: 4px;
    color: var(--text);
}

.learning-board-memory-weeks {
    display: grid;
    gap: 9px;
}

.learning-board-memory-week {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr) 48px;
    gap: 10px;
    align-items: center;
}

.learning-board-memory-date {
    color: var(--text-muted);
    font-size: 11px;
}

.learning-board-memory-week > strong {
    color: var(--text);
    font-size: 12px;
    text-align: right;
}

.learning-board-memory-bars {
    display: grid;
    gap: 3px;
}

.learning-board-memory-bars i {
    display: block;
    height: 5px;
    min-width: 2px;
    border-radius: 999px;
}

.learning-board-memory-bars .new,
.learning-board-memory-legend .new {
    background: #60a5fa;
}

.learning-board-memory-bars .stable,
.learning-board-memory-legend .stable {
    background: var(--accent);
}

.learning-board-memory-legend {
    display: flex;
    gap: 14px;
    color: var(--text-muted);
    font-size: 11px;
}

.learning-board-memory-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.learning-board-memory-legend i {
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

.learning-board-health-list {
    display: grid;
    gap: 2px;
    container-type: inline-size;
}

.learning-board-health-row {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) minmax(96px, 136px) 42px;
    align-items: center;
    gap: 9px;
    padding: 5px 0;
    border-bottom: 1px solid var(--border);
    min-width: 0;
}

.learning-board-health-row:last-child {
    border-bottom: 0;
}

.learning-board-health-main {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.learning-board-health-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--health-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--health-color) 16%, transparent);
    flex: 0 0 auto;
}

.learning-board-health-user {
    min-width: 0;
}

.learning-board-health-user strong {
    display: block;
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.learning-board-health-user small {
    display: block;
    margin-top: 1px;
    color: var(--text-muted);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.learning-board-health-meter {
    position: relative;
    height: 5px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        rgba(248, 113, 113, 0.58) 0%,
        rgba(251, 191, 36, 0.58) 52%,
        rgba(45, 212, 191, 0.66) 100%
    );
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 70%, transparent);
    min-width: 0;
}

.learning-board-health-meter span {
    position: absolute;
    top: 50%;
    left: var(--health-score);
    width: 9px;
    height: 9px;
    border: 1.5px solid var(--surface-2);
    border-radius: 50%;
    background: var(--health-color);
    transform: translate(-50%, -50%);
}

.learning-board-health-score {
    color: var(--text);
    font-size: 11px;
    font-weight: 800;
    text-align: right;
    white-space: nowrap;
    min-width: 0;
}

.learning-board-health-row.is-building .learning-board-health-meter {
    background: color-mix(in srgb, var(--border) 76%, var(--surface-2));
}

.learning-board-health-row.is-building .learning-board-health-score {
    color: var(--text-muted);
    font-weight: 700;
}

@container (max-width: 520px) {
    .learning-board-health-row {
        grid-template-columns: minmax(0, 1fr) 42px;
        gap: 4px 8px;
    }

    .learning-board-health-meter {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .learning-board-health-score {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
    }

    .learning-board-health-user small {
        max-width: 100%;
    }
}

@media (max-width: 760px) {
    .learning-board-health-row {
        grid-template-columns: minmax(0, 1fr) 42px;
    }

    .learning-board-health-meter {
        grid-column: 1 / -1;
    }
}

.learning-board-box-mini {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
}

.learning-board-box-mini-item {
    min-width: 0;
}

.learning-board-box-mini-label {
    color: var(--text-muted);
    font-size: 12px;
    margin-bottom: 4px;
}

.learning-board-box-mini-value {
    color: var(--text);
    font-size: 16px;
    font-weight: 700;
    font-family: 'Roboto Mono', 'Courier New', monospace;
}

.learning-board-weak-wrap {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.learning-board-weak-col {
    min-width: 0;
}

.learning-board-weak-col-title {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 8px;
}

.learning-board-weak-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.learning-board-weak-row {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.learning-board-weak-rank {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}

.learning-board-weak-word {
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.learning-board-weak-score {
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
    /* 这里既放数字（3/8）又放中文（已回补/待补）：等宽在前保住数字对齐，
       中文栈在后兜底，避免中文落进系统等宽字体。 */
    font-family: 'Roboto Mono', 'PingFang SC', 'Hiragino Sans GB',
        'Microsoft YaHei', 'Noto Sans SC', monospace;
    white-space: nowrap;
}

/* The board's grammar error rows and their 下达专项 button moved to 语法任务, where
   they are ordinary mgmt tables and need no rules of their own. Only this meta
   line survives: the reading-gap cards still use it. */
.grammar-error-meta {
    color: var(--text-muted);
    font-size: 11px;
    margin: -4px 0 2px 26px;
}

.learning-board-weak-empty {
    color: var(--text-muted);
    font-size: 12px;
    padding: 14px 0;
}

/* The vocabulary roster has no rank column: name/status and queue count. */
.learning-board-gap-row {
    grid-template-columns: minmax(0, 1fr) auto;
}

.learning-board-gap-row .learning-board-weak-word {
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
    overflow: visible;
    line-height: 1.35;
}

.learning-board-gap-row .learning-board-weak-word small {
    display: block;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 500;
}

@media (max-width: 560px) {
    .learning-board-gap-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }
}

/* Only the flagged rows carry colour. Everyone in the class is listed so the
   absence of a flag reads as "checked and clear" rather than "not loaded". */
.learning-board-gap-row.is-flagged .learning-board-weak-rank,
.learning-board-gap-row.is-flagged .learning-board-weak-score {
    color: #fbbf24;
}

.learning-board-gap-row.is-flagged .learning-board-weak-word small {
    color: #fbbf24;
}

.learning-board-table-wrap {
    margin-top: 18px;
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    background: var(--surface);
}

.learning-board-table-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px 14px;
    border-bottom: 1px solid var(--border);
}

/* The status filter sits in the table header because the table is the only
   thing it filters. */
.learning-board-table-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

.learning-board-table-filter .form-select {
    width: auto;
    min-width: 104px;
    padding: 6px 26px 6px 10px;
    font-size: 12px;
}

/* 部分数据缺失或被截断时的提示。看板宁可承认自己不全，也不能给出一个
   自信但错误的完成率。 */
.learning-board-notice {
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 13px;
    border: 1px solid color-mix(in srgb, var(--hard, #ef4444) 35%, var(--border));
    background: color-mix(in srgb, var(--hard, #ef4444) 8%, var(--surface));
    color: var(--hard, #ef4444);
}

.learning-board-notice ul {
    margin: 6px 0 0;
    padding-left: 18px;
}

.learning-board-table-scroll {
    overflow-x: auto;
}

.learning-board-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 820px;
}

.learning-board-table th,
.learning-board-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-size: 13px;
    color: var(--text);
    vertical-align: middle;
}

.learning-board-table th {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--surface-2);
}

.learning-board-table tbody tr:hover {
    background: var(--surface-2);
}

.learning-board-table .muted {
    color: var(--text-muted);
}

.learning-board-title-cell {
    min-width: 180px;
}

.learning-board-title-main {
    font-weight: 600;
}

.learning-board-title-sub {
    color: var(--text-muted);
    font-size: 12px;
    margin-top: 2px;
}

.learning-board-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.learning-board-status-pill.st-completed {
    background: rgba(16, 185, 129, 0.14);
    color: #34d399;
}

.learning-board-status-pill.st-pending {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}

.learning-board-status-pill.st-expired {
    background: rgba(244, 63, 94, 0.14);
    color: #fb7185;
}

.learning-board-empty,
.learning-board-loading {
    padding: 36px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    border: 1px dashed var(--border);
    border-radius: 16px;
    background: var(--surface);
}

.learning-board-empty {
    margin-top: 16px;
}

/* ─── USERS ROSTER ──────────────────────────────────────────── */
/* 班级名册：一人一行 + 右侧学员面板。状态语义与学习看板一致：
   绿=24 小时内完成，琥珀=进行中，红=过期未处理，斜纹=未开通。 */
.users-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

.roster {
    --roster-warn-soft: color-mix(in srgb, var(--medium) 13%, transparent);
    --roster-bad-soft: color-mix(in srgb, var(--hard) 12%, transparent);
    --roster-accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
    --roster-sunk: color-mix(in srgb, var(--text-muted) 9%, var(--surface));
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: clip;
}

.roster-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

.roster-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.roster-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: transparent;
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
}

.roster-chip:hover { border-color: var(--accent); }

.roster-chip-count {
    font-family: 'Roboto Mono', 'Courier New', monospace;
    font-size: 11px;
    color: var(--text-muted);
}

.roster-chip.is-attention .roster-chip-count {
    color: var(--medium);
    font-weight: 700;
}

.roster-chip.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--chip-ink);
}

.roster-chip.active .roster-chip-count {
    color: inherit;
    opacity: 0.8;
}

.roster-sort {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
}

.roster-sort .form-select {
    width: auto;
    padding: 5px 8px;
    font-size: 13px;
}

.roster-batch {
    display: grid;
    gap: 10px;
    padding: 10px 16px;
    background: var(--roster-accent-soft);
    border-bottom: 1px solid var(--border);
}

.roster-batch-bar,
.roster-batch-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.roster-batch-bar strong {
    margin-right: 6px;
    font-size: 13px;
}

.roster-batch-bar .btn-ghost.active {
    border-color: var(--accent);
    color: var(--accent);
}

.roster-batch-clear { margin-left: auto; }

.roster-batch-input {
    flex: 1 1 320px;
    min-height: 56px;
}

.roster-batch-field {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.roster-batch-field .form-input,
.roster-batch-field .form-select { width: auto; }

.roster-batch-hint {
    font-size: 12px;
    color: var(--text-muted);
}

.roster-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
}

.roster-table-wrap { overflow-x: auto; }

.roster-table {
    width: 100%;
    min-width: 880px;
    border-collapse: collapse;
    font-size: 13px;
}

.roster-table th {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-align: left;
    white-space: nowrap;
}

.roster-table td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    white-space: nowrap;
}

.roster-table .num {
    text-align: right;
    font-family: 'Roboto Mono', 'Courier New', monospace;
    font-variant-numeric: tabular-nums;
}

.roster-table tbody tr[data-roster-user] { cursor: pointer; }
.roster-table tbody tr[data-roster-user]:hover td { background: var(--roster-sunk); }
.roster-table tbody tr[data-roster-user]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.roster-table tbody tr.is-selected td { background: var(--roster-accent-soft); }
.roster-table tbody tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

.roster-check { width: 32px; }
.roster-check input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }

.roster-th-hint,
.roster-sub {
    margin-left: 4px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 400;
}

.roster-name {
    font-weight: 600;
    color: var(--text);
}

.roster-id {
    font-family: 'Roboto Mono', 'Courier New', monospace;
    font-size: 11px;
    color: var(--text-muted);
}

.roster-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    background: var(--roster-sunk);
    color: var(--text-muted);
}

.roster-tag.is-warn { background: var(--roster-warn-soft); color: var(--medium); }
.roster-tag.is-bad { background: var(--roster-bad-soft); color: var(--hard); }
.roster-tag.is-accent { background: var(--roster-accent-soft); color: var(--accent); }

.roster-today {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px var(--text-muted);
    opacity: 0.6;
}

.roster-today.is-on {
    background: var(--accent);
    box-shadow: none;
    opacity: 1;
}

.roster-idle.is-warn { color: var(--medium); font-weight: 600; }
.roster-idle.is-bad { color: var(--hard); font-weight: 600; }

.roster-ip {
    font-family: 'Roboto Mono', 'Courier New', monospace;
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

.roster-login-place {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

.roster-unread { color: var(--text-muted); }
.roster-unread.has-unread { color: var(--accent); font-weight: 700; }

.roster-cells {
    display: inline-flex;
    gap: 3px;
}

.roster-cell {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 22px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 5px;
    background: var(--roster-sunk);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    font-style: normal;
    line-height: 1;
}

button.roster-cell { cursor: pointer; }
button.roster-cell:hover { outline: 2px solid var(--border); outline-offset: 1px; }
button.roster-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.roster-cell.is-done { background: var(--accent); color: var(--chip-ink); }
.roster-cell.is-pending { border-color: var(--medium); background: var(--roster-warn-soft); color: var(--medium); }
.roster-cell.is-expired { background: var(--hard); color: #FFFFFF; }
.roster-cell.is-off {
    background: repeating-linear-gradient(135deg,
        color-mix(in srgb, var(--text-muted) 24%, transparent) 0 2px, transparent 2px 5px);
    color: var(--text-muted);
    opacity: 0.75;
}

.roster-empty {
    padding: 40px 16px !important;
    text-align: center;
    color: var(--text-muted);
}

.roster-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 10px 16px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-muted);
}

.roster-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.roster-legend .roster-cell {
    width: 16px;
    height: 14px;
}

.roster-legend-hint { margin-left: auto; }

/* ── 学员面板 ── */
.roster-panel {
    position: sticky;
    top: 0;
    max-height: calc(100vh - var(--admin-header-height, 60px) - 24px);
    overflow-y: auto;
    border-left: 1px solid var(--border);
    background: var(--bg);
    align-self: stretch;
}

.roster-panel.is-empty {
    display: grid;
    place-items: center;
    min-height: 240px;
}

.roster-panel-hint {
    max-width: 24ch;
    margin: 0;
    padding: 24px;
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
}

/* 面板内统一用正文字体 + 等宽数字；Roboto Mono 没有中文字形，「昨天」会落到回退字体。 */
.roster-panel {
    font-variant-numeric: tabular-nums;
}

.roster-panel-head {
    position: relative;
    display: grid;
    gap: 6px;
    padding: 18px 48px 16px 18px;
    border-bottom: 1px solid var(--border);
}

.roster-panel-name {
    font-size: 20px;
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--text);
    overflow-wrap: anywhere;
}

.roster-panel-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 6px;
    font-size: 12.5px;
    color: var(--text-muted);
}

.roster-panel-meta i {
    font-style: normal;
    opacity: 0.5;
}

.roster-panel-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.roster-panel-tags:empty { display: none; }

/* 有效期徽章与原因标签在面板里同一形状：小圆角、11.5px、同一套语义色。 */
.roster-panel-tags .roster-tag,
.roster-panel-tags .account-expiry-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 0;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.4;
}

.roster-panel-tags .account-expiry-badge { background: var(--roster-accent-soft); color: var(--accent); }
.roster-panel-tags .account-expiry-badge.permanent { background: var(--roster-sunk); color: var(--text-muted); }
.roster-panel-tags .account-expiry-badge.expired { background: var(--roster-bad-soft); color: var(--hard); }

.roster-panel-tags .roster-tag.is-bad::before,
.roster-panel-tags .roster-tag.is-warn::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.roster-panel-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
}

.roster-panel-close:hover { background: var(--roster-sunk); color: var(--text); }

/* 布置任务是主操作；其余三个退为次级，一行排开。 */
.roster-actions {
    display: grid;
    grid-template-columns: 1.25fr repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}

.roster-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 34px;
    padding: 0 6px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.roster-actions button:hover { border-color: var(--accent); color: var(--accent); }
.roster-actions button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.roster-actions button.is-primary {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--chip-ink);
    font-weight: 600;
}

.roster-actions button.is-primary:hover {
    background: color-mix(in srgb, var(--accent) 88%, var(--text));
    color: var(--chip-ink);
}

.roster-action-count {
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--hard);
    color: #FFFFFF;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 16px;
}

.roster-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}

.roster-kpis div {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: 3px;
    min-width: 0;
    padding: 0 12px;
}

.roster-kpis div:first-child { padding-left: 0; }
.roster-kpis div + div { border-left: 1px solid var(--border); }

.roster-kpis dt {
    font-size: 11.5px;
    color: var(--text-muted);
}

.roster-kpis dd {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--text);
    white-space: nowrap;
}

.roster-kpis dd.roster-idle { font-size: 17px; }

.roster-kpi-delta {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--accent);
}

.roster-panel-section {
    padding: 16px 18px 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.roster-modules {
    display: grid;
    gap: 2px;
    padding: 0 10px 14px;
}

.roster-module {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto 10px;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.roster-module:hover { background: var(--surface); }
.roster-module:hover .roster-module-go { color: var(--accent); transform: translateX(2px); }
.roster-module:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.roster-module .roster-cell {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    font-size: 12px;
}

.roster-module-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
}

/* 未开通的模块整行退后，只保留可点。 */
.roster-module.is-off .roster-module-name { color: var(--text-muted); }

.roster-placement {
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--roster-accent-soft);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    color: var(--accent);
}

.roster-placement.is-admin { background: var(--roster-sunk); color: var(--text-muted); }
.roster-placement.is-pending { background: var(--roster-warn-soft); color: var(--medium); }
.roster-placement.is-failed { background: var(--roster-bad-soft); color: var(--hard); }

.roster-module-go {
    color: var(--text-muted);
    opacity: 0.6;
    font-size: 16px;
    transition: transform 0.15s, color 0.15s;
}

.roster-state {
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    background: var(--roster-sunk);
    color: var(--text-muted);
}

.roster-state.is-off {
    padding: 0;
    background: transparent;
    font-weight: 400;
    opacity: 0.8;
}

.roster-state.is-done { background: var(--roster-accent-soft); color: var(--accent); }
.roster-state.is-pending { background: var(--roster-warn-soft); color: var(--medium); }
.roster-state.is-expired { background: var(--roster-bad-soft); color: var(--hard); }

/* 窄屏（含 iPad 横屏 + 侧栏）放不下右栏：面板改为右侧浮层，未选人时不占位。 */
@media (max-width: 1279px) {
    .roster-body { grid-template-columns: minmax(0, 1fr); }

    .roster-panel {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 850;
        width: min(380px, 92vw);
        max-height: none;
        border-left: 1px solid var(--border);
        box-shadow: -12px 0 32px rgba(0, 0, 0, 0.18);
    }

    .roster-panel.is-empty { display: none; }
}

.user-card-summary {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-content: stretch;
    height: 100%;
}

.user-card-summary-left {
    min-height: var(--group-user-card-height);
    height: var(--group-user-card-height);
    padding: 13px 16px;
    overflow: visible;
}

.user-card-detail-panel {
    min-width: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    padding: 0;
    border-color: transparent;
    transform: translateX(-8px);
    box-shadow: none;
    cursor: default;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 6px;
}

.user-card-detail-panel:hover {
    transform: translateX(0);
    border-color: var(--border);
    box-shadow: none;
}

/* ─── Detail panel tab interface ────────────────────────────── */

.user-card-id {
    font-size: 13px;
    font-family: 'Roboto Mono', 'Courier New', monospace;
    color: var(--accent);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-card-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-card-last {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 6px;
}

.user-card-rank {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}

/* Streak badge inside vocab cap item */

.user-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.role-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    background: var(--surface-2);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

/* ─── TAB SWITCHER ──────────────────────────────────────────── */
.tab-switcher {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: var(--surface-2);
    border-radius: 12px;
    margin-bottom: 16px;
}

.tab-btn {
    padding: 7px 16px;
    border: none;
    background: transparent;
    border-radius: 9px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    font-family: 'Inter', -apple-system, sans-serif;
    white-space: nowrap;
}

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

.tab-btn.active {
    background: var(--accent);
    color: #0A0E17;
}

.tab-panel {
    display: none;
}

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

.mode-switch {
    display: inline-flex;
    position: relative;
    background: var(--surface-2);
    border-radius: 999px;
    padding: 3px;
    cursor: pointer;
    flex-shrink: 0;
}
.mode-switch-thumb {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc(50% - 3px);
    background: var(--accent);
    border-radius: 999px;
    transition: transform 0.2s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
}
.mode-switch[data-mode="practice"] .mode-switch-thumb {
    transform: translateX(100%);
}
.mode-switch-opt {
    position: relative;
    z-index: 1;
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    transition: color 0.15s;
    white-space: nowrap;
}
.mode-switch[data-mode="homework"] .mode-switch-opt:nth-child(2),
.mode-switch[data-mode="regular"]  .mode-switch-opt:nth-child(2),
.mode-switch[data-mode="practice"]  .mode-switch-opt:nth-child(3) {
    color: #0A0E17;
}
[data-theme="light"] .mode-switch[data-mode="homework"] .mode-switch-opt:nth-child(2),
[data-theme="light"] .mode-switch[data-mode="regular"]  .mode-switch-opt:nth-child(2),
[data-theme="light"] .mode-switch[data-mode="practice"]  .mode-switch-opt:nth-child(3) {
    color: #fff;
}

/* ─── RESULT PANEL ──────────────────────────────────────────── */
.admin-result {
    display: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: 16px;
    padding: 24px 28px;
    margin-top: 24px;
    animation: fadeInSection 0.25s ease;
}

.admin-result.show {
    display: block;
}

.admin-result-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.result-url-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
    margin-bottom: 12px;
}

.result-url-input {
    flex: 1;
    padding: 10px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--accent);
    font-family: 'Roboto Mono', 'Courier New', monospace;
    font-size: 12px;
    outline: none;
    cursor: text;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.result-url-input:focus {
    border-color: var(--accent);
}

.result-copy-btn {
    padding: 10px 18px;
    background: var(--accent-glow);
    border: 1px solid var(--accent);
    border-radius: 10px;
    color: var(--accent);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
    font-family: 'Inter', -apple-system, sans-serif;
    flex-shrink: 0;
}

.result-copy-btn:hover {
    background: rgba(94, 234, 212, 0.2);
}

.result-expiry {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

#qrCode {
    display: inline-block;
    padding: 10px;
    background: #fff;
    border-radius: 10px;
}

/* ─── USER DRAWER ───────────────────────────────────────────────
   Mirrors the learner's 个人设置 drawer (dashboard.css .db-settings-*):
   fixed header/footer rails around a scrolling middle, an identity card,
   then titled sections whose rows share one card split by hairlines. */
.drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.52);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    z-index: 300;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.drawer-backdrop.show {
    opacity: 1;
    pointer-events: auto;
}

.user-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 460px;
    max-width: 100%;
    background: var(--bg);
    border-left: 1px solid var(--border);
    box-shadow: -24px 0 70px rgba(0, 0, 0, 0.34);
    z-index: 400;
    display: flex;
    flex-direction: column;
    font-size: 13px;
    transform: translateX(100%);
    transition: transform 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
    overflow: hidden;
}

.user-drawer.show {
    transform: translateX(0);
}

.drawer-header {
    padding: 18px 20px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.drawer-title {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--text);
}

.drawer-close-btn {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}

.drawer-close-btn:hover,
.drawer-close-btn:focus-visible {
    color: var(--text);
    background: var(--accent-glow);
    outline: none;
}

.drawer-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 20px 16px 28px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.drawer-body::-webkit-scrollbar {
    width: 4px;
}

.drawer-body::-webkit-scrollbar-track {
    background: transparent;
}

.drawer-body::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

.user-drawer .form-stack,
#drawerLearnerFields {
    display: grid;
    align-content: start;
    gap: 22px;
}

.drawer-footer {
    padding: 14px 20px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-shrink: 0;
}

/* 删除 sits alone on the left, away from 保存. */
.drawer-footer .btn-danger {
    margin-left: 0;
    margin-right: auto;
}

/* ── Identity card ── */
.ud-identity {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background:
        radial-gradient(120% 130% at 0% 0%, var(--accent-glow) 0%, transparent 62%),
        var(--surface);
}

.drawer-avatar-ring {
    width: 66px;
    height: 66px;
    flex: 0 0 66px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--accent-glow);
    border: 2px solid var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
}

.drawer-avatar-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.drawer-avatar-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ud-identity-copy {
    min-width: 0;
    display: grid;
    justify-items: start;
    gap: 2px;
}

.ud-identity-name {
    max-width: 100%;
    overflow: hidden;
    color: var(--text);
    font-size: 16px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ud-identity-meta {
    color: var(--text-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.ud-pill-btn {
    min-height: 32px;
    margin-top: 8px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text);
    font: 650 12px/1.2 'Inter', -apple-system, sans-serif;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.ud-pill-btn:hover,
.ud-pill-btn:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-glow);
    outline: none;
}

/* ── Grouped sections ── */
.ud-section {
    display: grid;
    gap: 10px;
}

.ud-section-title {
    margin: 0 0 0 4px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.ud-group,
.cap-toggle-panel {
    display: grid;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    overflow: hidden;
}

/* A plain wrapper whose rows keep the group's hairlines (tests pin its class). */
.user-vocab-access-row {
    display: grid;
}

.ud-group > * + *,
.cap-toggle-panel > * + *,
.user-vocab-access-row > * + * {
    border-top: 1px solid var(--border);
}

.ud-row {
    position: relative;
    min-height: 52px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: var(--text);
}

.ud-row.vertical {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 10px;
    padding: 13px 16px;
}

.ud-row-text {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.ud-label {
    color: var(--text);
    font-size: 13px;
    font-weight: 650;
}

.ud-label .required {
    color: var(--hard);
    margin-left: 2px;
}

.ud-row[hidden] {
    display: none;
}

.ud-help {
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.45;
}

/* Inline controls take the right-hand side of a row. */
.ud-row > .form-input,
.ud-row > .form-select,
.ud-row > .password-input-wrap {
    width: min(230px, 58%);
    flex: 0 0 auto;
    padding-top: 8px;
    padding-bottom: 8px;
}

.ud-row > .password-input-wrap .form-input {
    padding-top: 8px;
    padding-bottom: 8px;
}

.ud-birth-selects {
    display: flex;
    align-items: center;
    gap: 6px;
    width: min(230px, 58%);
    flex: 0 0 auto;
}

.ud-birth-selects .form-select {
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 22px 8px 8px;
}

.ud-icon-btn {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text-muted);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.ud-icon-btn:hover,
.ud-icon-btn:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-glow);
    outline: none;
}

.ud-row > .form-input.ud-number {
    width: 76px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.ud-row .form-input:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ── Switch rows: the whole row is the hit target, as in 个人设置. ── */
.ud-switch-row {
    cursor: pointer;
    transition: background 0.15s;
}

.ud-switch-row:hover {
    background: var(--surface-2);
}

.ud-switch-row > input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.ud-switch {
    position: relative;
    width: 46px;
    height: 28px;
    flex: 0 0 46px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    transition: background 0.15s, border-color 0.15s;
}

.ud-switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--text-muted);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
    transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.15s;
}

.ud-switch-row > input[type="checkbox"]:checked + .ud-switch {
    border-color: var(--accent);
    background: var(--accent-glow);
}

.ud-switch-row > input[type="checkbox"]:checked + .ud-switch::after {
    background: var(--accent);
    transform: translateX(18px);
}

.ud-switch-row > input[type="checkbox"]:focus-visible + .ud-switch {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.ud-switch-row:has(> input[type="checkbox"]:disabled) {
    opacity: 0.45;
    cursor: not-allowed;
}

.ud-switch-row:has(> input[type="checkbox"]:disabled):hover {
    background: transparent;
}

/* ── Chip toggles: a row of related checkboxes, styled like 每轮单词量. ── */
.ud-chips {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.ud-chip {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 4px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.ud-chip input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.ud-chip:hover {
    color: var(--text);
}

.ud-chip:has(input:checked) {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-glow);
}

.ud-chip:has(input:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.ud-chip:has(input:disabled) {
    opacity: 0.45;
    cursor: not-allowed;
}

.ud-chip:has(input:disabled):hover {
    color: var(--text-muted);
}

/* ─── Capability level grid (inside user drawer) ────────────── */
.cap-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.cap-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 6px 8px;
}

.cap-placement-check {
    position: absolute;
    top: 5px;
    right: 7px;
    color: var(--accent);
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
}

.cap-placement-check.is-admin { color: #888; }
.cap-placement-check.is-pending { color: #d97706; }
.cap-placement-check.is-failed { color: #dc2626; }

.cap-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cap-personalized {
    margin-top: 8px;
}

.cap-icon {
    font-size: 20px;
    line-height: 1;
}

.cap-icon-svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.cap-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

.cap-input {
    width: 100%;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 2px;
    outline: none;
    -moz-appearance: textfield;
}
.cap-input::-webkit-outer-spin-button,
.cap-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cap-input:focus { border-color: var(--accent); }

.cap-input-static {
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-family: inherit;
    color: var(--text-muted);
    cursor: default;
}

/* The adjustment block only takes a hairline row when something in it shows. */
.cefr-adjustment:not(:has(> :not([hidden]))) {
    display: none;
}

.cefr-adjustment {
    display: grid;
    gap: 12px;
    padding: 13px 16px;
}

#drawerCefrAdjustmentField:not([hidden]) {
    display: grid;
    gap: 8px;
}

.cefr-adjustment-history {
    max-height: 180px;
    overflow-y: auto;
    font-size: 12px;
    color: var(--text-muted, #6b7280);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.cefr-adjustment-record + .cefr-adjustment-record {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

/* ─── KEY MODAL ─────────────────────────────────────────────── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.modal-overlay.hidden {
    display: none;
}

.modal-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 32px 28px;
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: var(--card-shadow);
}

.user-message-modal-card {
    max-width: 520px;
    gap: 12px;
}

.user-message-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 4px;
}

.user-message-textarea {
    min-height: 150px;
    resize: vertical;
    line-height: 1.6;
}

.user-message-reply-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
    width: fit-content;
}

.user-message-reply-toggle input[type="checkbox"] {
    accent-color: var(--accent);
    cursor: pointer;
}

.user-message-modal-card .modal-actions {
    flex-direction: row;
    justify-content: flex-end;
    gap: 10px;
}

.user-message-modal-card .modal-actions .btn-secondary,
.user-message-modal-card .modal-actions .btn-primary {
    min-width: 92px;
}

.user-message-edit-note {
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid rgba(94, 234, 212, 0.28);
    border-radius: 8px;
    background: rgba(94, 234, 212, 0.08);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    padding: 8px 10px;
}

.user-message-edit-note button,
.user-message-edit-btn {
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
    padding: 5px 9px;
}

.user-message-edit-note button:hover,
.user-message-edit-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.user-message-delete-btn {
    color: var(--danger, #ef4444);
}

.user-message-delete-btn:hover {
    border-color: var(--danger, #ef4444);
    color: var(--danger, #ef4444);
}

.user-message-history {
    border-top: 1px solid var(--border);
    margin-top: 8px;
    padding-top: 14px;
}

.user-message-history-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 10px;
}

.user-message-history-list {
    display: grid;
    gap: 10px;
    max-height: 240px;
    overflow-y: auto;
    color: var(--text-muted);
    font-size: 13px;
}

.user-message-history-item {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    background: var(--bg-secondary, var(--surface-2));
}

.user-message-history-item.can-followup {
    cursor: pointer;
}

.user-message-history-item.can-followup:hover {
    border-color: rgba(94, 234, 212, 0.42);
}

.user-message-history-item.selected-followup {
    border-color: rgba(20, 184, 166, 0.7);
    box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.14);
}

.user-message-history-item.unread {
    border-color: rgba(239, 68, 68, 0.38);
    background: rgba(239, 68, 68, 0.06);
}

.user-message-history-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--text-muted);
    font-size: 12px;
    margin-bottom: 6px;
}

.user-message-history-time {
    flex-shrink: 0;
}

.user-message-status {
    font-weight: 800;
    color: var(--text-muted);
}

.user-message-history-item.unread .user-message-status {
    color: #ef4444;
}

.user-message-reply-badge {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(245, 158, 11, 0.38);
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 7px;
    padding: 4px 7px;
}

.user-message-history-body {
    color: var(--text-muted);
    line-height: 1.5;
    white-space: pre-wrap;
}

.user-message-reply-block {
    appearance: none;
    background: transparent;
    border-right: 3px solid rgba(94, 234, 212, 0.42);
    border-top: 0;
    border-bottom: 0;
    border-left: 0;
    color: inherit;
    cursor: pointer;
    display: block;
    font: inherit;
    margin-left: auto;
    margin-top: 10px;
    max-width: min(78%, 420px);
    padding: 0 10px 0 0;
    text-align: right;
}

.user-message-reply-block:hover .user-message-reply-body {
    color: var(--accent);
}

.user-message-reply-meta {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
    margin-bottom: 4px;
}

.user-message-reply-body {
    color: var(--text);
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.user-message-followup-context {
    border: 1px solid rgba(20, 184, 166, 0.28);
    border-radius: 8px;
    background: rgba(20, 184, 166, 0.07);
    display: grid;
    gap: 10px;
    font-size: 13px;
    line-height: 1.5;
    padding: 10px 12px;
}

.user-message-followup-context-msg {
    color: var(--text-muted);
    max-width: 78%;
}

.user-message-followup-context-msg.is-sender {
    justify-self: start;
}

.user-message-followup-context-msg.is-student {
    border-right: 3px solid rgba(94, 234, 212, 0.42);
    justify-self: end;
    padding-right: 10px;
    text-align: right;
}

.user-message-followup-context-title {
    color: var(--text);
    font-size: 12px;
    font-weight: 900;
}

.user-message-followup-context-body {
    overflow-wrap: anywhere;
}

#userMessageModal.followup-active .user-message-textarea {
    min-height: 110px;
}

.user-message-history-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

.user-message-history-empty {
    color: var(--text-muted);
    padding: 8px 0;
}

.speaking-template-card {
    padding: 0;
    gap: 0;
    max-height: min(860px, calc(100dvh - 32px));
    overflow: hidden;
}
.speaking-template-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.speaking-template-body::-webkit-scrollbar {
    width: 8px;
}
.speaking-template-body::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 999px;
}
.speaking-template-actions {
    position: sticky;
    bottom: -20px;
    margin-left: -20px;
    margin-right: -20px;
    margin-bottom: -20px;
    padding: 12px 20px 20px;
    border-top: 1px solid var(--border);
    background: var(--surface);
}
@media (max-height: 700px), (max-width: 560px) {
    .modal-overlay {
        padding: 12px;
    }
    .speaking-template-card {
        width: 96vw !important;
        max-height: calc(100dvh - 24px);
    }
}

.modal-icon {
    font-size: 36px;
    text-align: center;
}

.modal-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--text);
    text-align: center;
    margin-bottom: 2px;
}

.modal-note {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.6;
}

/* ─── PASSWORD SHOW/HIDE TOGGLE ─────────────────────────────── */
.password-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input-wrap .form-input {
    flex: 1;
    padding-right: 40px;
}

.password-toggle-btn {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: color 0.15s;
}

.password-toggle-btn:hover {
    color: var(--text);
}

.modal-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.grammar-browser-card {
    width: min(760px, calc(100vw - 32px));
    max-height: min(78vh, 820px);
    display: flex;
    flex-direction: column;
}

.grammar-browser-toolbar {
    padding: 0 24px 16px;
}

.grammar-browser-body {
    padding: 0 24px 24px;
    overflow: auto;
    min-height: 240px;
}

.grammar-browser-empty {
    padding: 28px 16px;
    text-align: center;
    color: var(--text-muted);
    border: 1px dashed var(--border);
    border-radius: 14px;
    background: var(--surface-2);
}

.grammar-tree {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.grammar-tree-node {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.grammar-tree-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2);
}

.grammar-tree-row.folder,
.grammar-tree-row.file {
    cursor: pointer;
}

.grammar-tree-row:hover {
    border-color: var(--accent);
    background: var(--accent-glow);
}

.grammar-tree-row.selected {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px rgba(94, 234, 212, 0.25);
}

.grammar-tree-indent {
    flex-shrink: 0;
    width: 0;
}

.grammar-tree-toggle {
    flex-shrink: 0;
    width: 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
}

.grammar-tree-icon {
    flex-shrink: 0;
    width: 18px;
    text-align: center;
}

.grammar-tree-name {
    flex: 1;
    min-width: 0;
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    word-break: break-word;
}

.grammar-tree-meta {
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: 12px;
}

.grammar-tree-children {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* multi-select checkbox on file rows */
.grammar-tree-row .grammar-tree-checkbox {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}

/* browser footer */
/* ─── Grammar: class mode ──────────────────────────────── */
.grammar-class-toggle {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 600; color: var(--text-muted);
    cursor: pointer; margin-left: 10px;
}
.grammar-class-toggle input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; }
.grammar-class-toggle span { transition: color 0.15s; }
.grammar-class-toggle:has(input:checked) span { color: var(--accent); }

.grammar-class-list-header {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 0 8px; flex-wrap: wrap;
}
.grammar-class-count {
    font-size: 12px; color: var(--accent); font-weight: 700; flex: 1;
}
.btn-xs {
    font-size: 11px; padding: 3px 8px; border-radius: 6px;
    border: 1px solid var(--border); background: none; color: var(--text-muted);
    cursor: pointer; transition: border-color 0.15s, color 0.15s;
}
.btn-xs:hover { border-color: var(--accent); color: var(--accent); }

.grammar-class-checkboxes {
    max-height: 160px; overflow-y: auto;
    border: 1px solid var(--border); border-radius: 8px;
    padding: 6px 10px;
    display: flex; flex-direction: column; gap: 4px;
    scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.grammar-class-checkbox-row {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--text); cursor: pointer;
    padding: 2px 0;
}
.grammar-class-checkbox-row input[type="checkbox"] {
    accent-color: var(--accent); cursor: pointer; flex-shrink: 0;
}

/* Class result table */
.grammar-class-result-table {
    display: flex; flex-direction: column; gap: 6px; margin-top: 8px;
}
.grammar-class-result-row {
    display: flex; align-items: center; gap: 10px;
    background: var(--surface-2); border-radius: 8px; padding: 8px 12px;
    font-size: 13px;
}
.grammar-class-result-name {
    font-weight: 700; color: var(--text); min-width: 80px; flex-shrink: 0;
}
.grammar-class-result-url {
    flex: 1; background: none; border: none; color: var(--text-muted);
    font-size: 12px; font-family: monospace; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; cursor: default;
}
.grammar-class-result-copy {
    font-size: 11px; padding: 3px 8px; border-radius: 6px;
    border: 1px solid var(--border); background: none; color: var(--text-muted);
    cursor: pointer; flex-shrink: 0; transition: border-color 0.15s, color 0.15s;
}
.grammar-class-result-copy:hover { border-color: var(--accent); color: var(--accent); }

.grammar-browser-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 14px 24px;
    border-top: 1px solid var(--border);
}

.grammar-browser-count {
    font-size: 13px;
    color: var(--text-muted);
    flex: 1;
}

/* preview modal */
.grammar-guide-card {
    width: min(760px, calc(100vw - 32px));
    max-width: min(760px, calc(100vw - 32px));
    max-height: min(85vh, 900px);
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: 0;
}

.grammar-guide-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 24px 8px;
    min-height: 200px;
}

.grammar-guide-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 14px 24px;
    border-top: 1px solid var(--border);
}

/* per-exercise regenerate icon button */
.gr-preview-regen-btn {
    margin-left: auto;
    flex-shrink: 0;
    background: none;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1;
    padding: 2px 7px;
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, transform 0.2s;
}
.gr-preview-regen-btn:hover:not(:disabled) {
    color: var(--accent);
    border-color: var(--accent);
    transform: rotate(90deg);
}
.gr-preview-regen-btn:disabled { opacity: 0.4; cursor: wait; }

/* preview exercise answer hint */
.gr-preview-answer {
    margin-top: 6px;
    font-size: 13px;
    color: var(--text-muted);
}
.gr-preview-answer strong {
    color: var(--accent);
}

/* ─── LOADING OVERLAY ───────────────────────────────────────── */
.admin-loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 900;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.admin-loading-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

.admin-loading-overlay .loader-ring {
    width: 44px;
    height: 44px;
    border: 3px solid rgba(94, 234, 212, 0.15);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}

.admin-loading-label {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 500;
}

/* ─── TOAST ─────────────────────────────────────────────────── */
.admin-toast {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 24px;
    font-size: 14px;
    color: var(--text);
    box-shadow: var(--card-shadow);
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
    z-index: 9999;
    white-space: nowrap;
}

.admin-toast.show {
    opacity: 1;
}

.admin-toast.success {
    border-color: var(--accent);
    color: var(--accent);
}

.admin-toast.error {
    border-color: var(--hard);
    color: var(--hard);
}

/* ─── EMPTY STATE ───────────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: 56px 24px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.6;
}

.empty-state-icon {
    font-size: 36px;
    margin-bottom: 12px;
    opacity: 0.5;
}

/* ─── CONDITIONAL FORM BLOCK ────────────────────────────────── */
.conditional-block {
    display: none;
    padding: 16px;
    background: var(--surface-2);
    border-radius: 12px;
    border: 1px solid var(--border);
}

.conditional-block.show {
    display: block;
}

/* ─── JSON SCHEMA HINT ──────────────────────────────────────── */
.json-schema-hint {
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--text-muted);
}
.json-schema-hint summary {
    cursor: pointer;
    color: var(--accent);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding: 4px 0;
}
.json-schema-hint summary:hover { opacity: 0.8; }
.json-schema-pre {
    margin: 8px 0 0;
    padding: 12px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-muted);
    white-space: pre;
    overflow-x: auto;
}

/* ─── FORM ERROR ─────────────────────────────────────────────── */
.form-error {
    margin-top: 6px;
    font-size: 12px;
    color: var(--hard);
    line-height: 1.4;
}

/* ─── QUESTIONS LOAD STATUS ──────────────────────────────────── */
.lt-questions-status {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
    border: 1px solid var(--border);
    color: var(--text-muted);
    background: var(--surface-2);
}
.lt-questions-status.loading { color: var(--text-muted); font-style: italic; }
.lt-questions-status.ok      { color: var(--easy); border-color: var(--easy); background: rgba(94,234,212,0.06); }
.lt-questions-status.error   { color: var(--hard); border-color: var(--hard); background: rgba(244,67,54,0.06); }
.lt-questions-status.warn    { color: var(--medium, #d9a441); border-color: var(--medium, #d9a441); background: rgba(217,164,65,0.08); }

/* ─── RADIO GROUP ───────────────────────────────────────────── */
.radio-group {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
}

.radio-label input[type="radio"] {
    accent-color: var(--accent);
    width: 15px;
    height: 15px;
    cursor: pointer;
}

/* ─── TOOLS TOOLBAR ─────────────────────────────────────────── */
.tools-toolbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding: 12px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.tool-btn:hover {
    color: var(--text);
    background: var(--accent-glow);
    border-color: var(--accent);
}

.tool-btn.active {
    color: var(--accent);
    background: var(--accent-glow);
    border-color: var(--accent);
    font-weight: 600;
}

.tool-btn svg {
    flex-shrink: 0;
}

.tools-panel {
    /* container for tool content panels */
}

.tool-panel {
    display: none;
}

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

/* ── Vocab tools section: stretch editor to bottom of viewport ── */
#sec-tools.admin-section.active {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

#sec-tools .tools-toolbar {
    flex-shrink: 0;
}

#sec-tools .tools-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#tool-vocab.tool-panel.active {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.system-message-card {
    max-width: 720px;
}

.system-message-body-input {
    min-height: 170px;
    resize: vertical;
    line-height: 1.6;
}

.system-message-scope-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.system-message-scope-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
}

.system-message-scope-option input[type="radio"] {
    accent-color: var(--accent);
    cursor: pointer;
}

.system-message-result {
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
    padding: 10px 12px;
}

.system-message-result.success {
    border: 1px solid rgba(94, 234, 212, 0.32);
    background: rgba(94, 234, 212, 0.08);
    color: var(--accent);
}

.system-message-result.error {
    border: 1px solid rgba(239, 68, 68, 0.32);
    background: rgba(239, 68, 68, 0.08);
    color: #ef4444;
}

/* Search card stays at natural height */
#tool-vocab > .admin-card {
    flex-shrink: 0;
}

/* Editor area fills the rest */
#vocabMgrEditorArea {
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

/* ── Content management: the published reading/listening library ── */
#tool-content > .admin-card {
    padding-block: 14px;
}

#contentMgmtKindTabs {
    margin-bottom: 0;
}

.content-mgmt-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.content-mgmt-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 24px;
    row-gap: 24px;
    min-width: 0;
}

/* 阅读/听力、ON/OFF、F/NF 三组各自独立，用竖线隔开 */
.content-mgmt-filters > * + * {
    padding-left: 24px;
    border-left: 1px solid var(--border);
}

.content-mgmt-status-tabs {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.content-mgmt-status-tab {
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 0;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.content-mgmt-status-tab:hover,
.content-mgmt-status-tab.active {
    color: var(--text);
}

.content-mgmt-status-switch {
    position: relative;
    box-sizing: border-box;
    flex: 0 0 40px;
    width: 40px;
    height: 24px;
    padding: 0;
    border: 1px solid #12847d;
    border-radius: 999px;
    background: #bed7d3;
    cursor: pointer;
}

.content-mgmt-status-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #107e77;
    box-shadow: 0 2px 5px rgb(0 0 0 / 20%);
    transition: transform 160ms ease;
}

.content-mgmt-status-switch[aria-checked="true"] .content-mgmt-status-thumb {
    transform: translateX(16px);
}

.content-mgmt-status-switch:focus-visible,
.content-mgmt-status-tab:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

#contentMgmtRefreshBtn {
    flex-shrink: 0;
    margin-left: auto;
}

@media (prefers-reduced-motion: reduce) {
    .content-mgmt-status-thumb { transition: none; }
}

/* Each level is a disclosure: collapsed until clicked, fetched once, then
   cached — a level can hold hundreds of items, so nothing renders until asked. */
.content-mgmt-level {
    margin-bottom: 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    overflow: hidden;
}

.content-mgmt-level-toggle {
    display: flex;
    align-items: baseline;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: var(--surface-2);
    border: none;
    font-size: 14px;
    font-weight: 800;
    font-family: inherit;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.content-mgmt-level-chevron {
    display: inline-block;
    color: var(--text-muted);
    transition: transform 0.15s ease;
}

.content-mgmt-level-toggle.is-open .content-mgmt-level-chevron {
    transform: rotate(90deg);
}

.content-mgmt-level-name small {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.content-mgmt-level-count {
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.content-mgmt-level-body {
    border-top: 1px solid var(--border);
    padding: 12px 14px;
}

.content-mgmt-level-controls {
    margin-bottom: 10px;
}

.content-mgmt-search {
    max-width: 320px;
}

.content-mgmt-level-status {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.content-mgmt-level-status.error {
    color: var(--danger);
}

.content-mgmt-level-empty {
    padding: 16px 14px;
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
}

.content-mgmt-level-list {
    display: flex;
    flex-direction: column;
}

.content-mgmt-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-faint, var(--border));
}

.content-mgmt-page-indicator {
    font-size: 12px;
    color: var(--text-muted);
}

.content-mgmt-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-faint, var(--border));
    transition: opacity 0.15s ease;
}

.content-mgmt-row:last-child {
    border-bottom: none;
}

.content-mgmt-row.is-saving {
    opacity: 0.55;
    pointer-events: none;
}

.content-mgmt-row-main {
    flex: 1;
    min-width: 0;
}

.content-mgmt-row-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}

.content-mgmt-row-title-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.content-mgmt-row-number-input {
    flex-shrink: 0;
    width: 44px;
    padding: 3px 4px;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: var(--text-muted);
    background: var(--surface-2, transparent);
    border: 1px solid var(--border-faint, var(--border));
    border-radius: 6px;
}

.content-mgmt-row-number-input:hover,
.content-mgmt-row-number-input:focus {
    color: var(--text);
    border-color: var(--accent);
}

.content-mgmt-row-number-input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.content-mgmt-row-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 3px;
}

.content-mgmt-row-classify {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.content-kind-btn {
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 0;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.content-kind-btn:hover,
.content-kind-btn.active {
    color: var(--text);
}

.content-kind-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

.content-mgmt-row-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

@media (max-width: 760px) {
    .content-mgmt-row { flex-wrap: wrap; }
    .content-mgmt-row-main { flex-basis: 100%; }
    .content-mgmt-row-actions { flex-wrap: wrap; }
}

.content-mgmt-preview-card {
    max-width: 760px;
    max-height: 82vh;
    padding: 0;
    gap: 0;
    overflow: hidden;
}

.content-mgmt-preview-card .task-detail-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}

.content-mgmt-preview-card #contentMgmtPreviewAudioWrap {
    padding: 12px 16px 0;
    margin-bottom: 0 !important;
}

/* ─────────────────────────────────────────────────────────────── */

/* ─── LIGHT THEME OVERRIDES ─────────────────────────────────── */
[data-theme="light"] .admin-sidebar {
    background: var(--surface);
    border-right-color: var(--border);
}

[data-theme="light"] .sidebar-nav-item.active {
    background: rgba(15, 118, 110, 0.07);
}

[data-theme="light"] .sidebar-nav-item:hover {
    background: rgba(15, 118, 110, 0.05);
}

[data-theme="light"] .admin-content {
    background: var(--bg);
}

[data-theme="light"] .admin-card {
    background: var(--surface);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .form-input,
[data-theme="light"] .form-select,
[data-theme="light"] .form-textarea {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text);
}

[data-theme="light"] .form-input:focus,
[data-theme="light"] .form-select:focus,
[data-theme="light"] .form-textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

[data-theme="light"] .search-input {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}

[data-theme="light"] .search-input:focus {
    border-color: var(--accent);
}

[data-theme="light"] .tab-switcher {
    background: var(--surface-2);
}

[data-theme="light"] .tab-btn.active {
    background: var(--accent);
    color: #fff;
}

[data-theme="light"] .btn-primary {
    color: #fff;
}

[data-theme="light"] .admin-result {
    background: var(--surface);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .result-url-input {
    background: var(--surface-2);
}

[data-theme="light"] .result-copy-btn {
    background: rgba(15, 118, 110, 0.08);
    border-color: var(--accent);
    color: var(--accent);
}

[data-theme="light"] .result-copy-btn:hover {
    background: rgba(15, 118, 110, 0.16);
}

[data-theme="light"] .modal-card {
    background: var(--surface);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .conditional-block {
    background: var(--surface-2);
}

[data-theme="light"] .admin-loading-overlay .loader-ring {
    border-color: rgba(15, 118, 110, 0.12);
    border-top-color: var(--accent);
}

[data-theme="light"] .admin-toast {
    background: var(--surface);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* ─── RESPONSIVE — tablet: compact sidebar ─────────────────── */
@media (min-width: 768px) and (max-width: 1180px) {
    .admin-sidebar {
        width: 72px;
    }

    .sidebar-logo {
        height: var(--admin-header-height);
        padding: 0;
        text-align: center;
        border-bottom: 1px solid var(--border);
        font-size: 0;
        overflow: hidden;
    }

    .sidebar-logo::after {
        content: '⚙';
        font-size: 16px;
        font-weight: 800;
        color: var(--accent);
    }

    .sidebar-nav-item {
        justify-content: center;
        padding: 12px 0;
        border-left-width: 2px;
    }

    .sidebar-nav-item > span:not(.nav-icon) {
        display: none;
    }

    .sidebar-bottom {
        padding: 12px 0;
        align-items: center;
    }

    .btn-logout {
        display: none;
    }

    .admin-topbar {
        left: 72px;
        padding: 0 24px;
    }

    .admin-content {
        margin-left: 72px;
    }

    .admin-sections-wrap {
        padding: 24px;
        padding-top: calc(var(--admin-header-height) + 24px);
    }

    .user-drawer {
        width: 100%;
        max-width: 100%;
    }

    

    

    

    

    

    .user-card-detail-panel {
        transform: translateY(-6px);
    }

    

    .form-row {
        grid-template-columns: 1fr;
    }
}

/* ─── TASK DETAIL MODAL ─────────────────────────────────────── */
.task-detail-card {
    width: 520px;
    max-width: 96vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: hidden;
}

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

.task-detail-close {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.task-detail-close:hover {
    background: var(--surface-2);
    color: var(--text);
}

.task-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 16px 24px;
    flex-shrink: 0;
}

.task-stat-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    border-radius: 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.task-stat-pill:hover {
    border-color: var(--accent);
    background: var(--accent-glow);
}
.task-stat-pill.active {
    border-color: var(--accent);
    background: var(--accent-glow);
}

.task-stat-count {
    font-size: 22px;
    font-weight: 800;
    font-family: 'Roboto Mono', monospace;
    color: var(--text);
}
.task-stat-label {
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
}

/* colour coding */
.task-stat-pill.stat-completed .task-stat-count { color: var(--easy); }
.task-stat-pill.stat-pending   .task-stat-count { color: var(--accent); }
.task-stat-pill.stat-expired   .task-stat-count { color: var(--hard); }

.task-detail-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.task-detail-list-header {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 10px 0 4px;
    flex-shrink: 0;
}

.task-detail-item {
    display: grid;
    grid-template-columns: minmax(72px, auto) minmax(64px, auto) auto 1fr auto auto 24px;
    align-items: center;
    column-gap: 14px;
    row-gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: 13px;
}

.task-detail-item-type {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 5px;
    background: var(--accent-glow);
    color: var(--accent);
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    justify-self: start;
}

.task-detail-highlight-award-word {
    margin-left: 5px;
    text-transform: none;
}

.task-detail-highlight-award-word.is-hidden {
    color: #ef4444;
}

.task-detail-highlight-award-word.is-awarded {
    color: #22c55e;
}

.task-detail-item-status {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 5px;
    text-align: center;
    white-space: nowrap;
    justify-self: start;
}
.task-detail-item-status.st-completed { background: rgba(52,211,153,0.12); color: var(--easy); }
.task-detail-item-status.st-pending   { background: var(--accent-glow); color: var(--accent); }
.task-detail-item-status.st-expired   { background: rgba(248,113,113,0.12); color: var(--hard); }

.task-detail-item-date {
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.task-detail-item-num {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    opacity: 0.5;
    flex-shrink: 0;
    min-width: 24px;
    text-align: right;
}

.task-detail-item-score,
.task-detail-item-xp {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-glow);
    border: 1px solid rgba(94,234,212,0.2);
    border-radius: 6px;
    padding: 1px 6px;
    white-space: nowrap;
    text-align: center;
}
.task-detail-item-xp {
    color: var(--easy);
    background: rgba(52,211,153,0.08);
    border-color: rgba(52,211,153,0.2);
}

.task-detail-section-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    opacity: 0.7;
    margin-bottom: 8px;
}

.task-detail-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    padding: 20px 0;
}

.task-detail-more {
    border: none;
    background: transparent;
    text-align: center;
    color: var(--text-muted);
    font-size: 11px;
    padding: 6px 0 2px;
    opacity: 0.7;
    cursor: pointer;
    font-family: inherit;
}

.task-detail-more:hover {
    color: var(--accent);
    opacity: 1;
}

.task-detail-more-done {
    cursor: default;
}

.task-detail-more-done:hover {
    color: var(--text-muted);
    opacity: 0.7;
}

.task-delete-btn {
    grid-column: 7;
    justify-self: end;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.task-detail-item:hover .task-delete-btn {
    opacity: 1;
}
.task-delete-btn:hover {
    background: rgba(248,113,113,0.15);
    color: var(--hard);
}
.task-reassign-btn {
    grid-column: 6;
    justify-self: end;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.task-detail-item:hover .task-reassign-btn {
    opacity: 1;
}
.task-reassign-btn:hover {
    background: rgba(52,211,153,0.15);
    color: var(--easy);
}

[data-theme="light"] .task-stat-pill {
    background: var(--surface-2);
}
[data-theme="light"] .task-detail-item {
    background: var(--surface-2);
}

/* ─── LISTENING DETAIL MODAL ─────────────────────────────── */
.lt-detail-card {
    width: 100%;
    max-width: 580px;
    height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    gap: 0;
}

/* Audio player row */
.lt-detail-player {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    flex-shrink: 0;
}
.lt-detail-play-btn,
.lt-detail-stop-btn {
    flex-shrink: 0;
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.lt-detail-play-btn:hover { border-color: var(--accent); color: var(--accent); }
.lt-detail-stop-btn:hover { border-color: var(--hard); color: var(--hard); }
.lt-detail-seek-wrap { flex: 1; }
.lt-detail-seek {
    width: 100%;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    background: linear-gradient(to right, var(--accent) 0%, var(--surface-2) 0%);
}
.lt-detail-seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
}
.lt-detail-time {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    min-width: 80px;
    text-align: right;
}

/* Score row */
.lt-detail-score {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    flex-wrap: wrap;
}
.lt-score-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin-right: 4px;
}
.lt-score-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--border);
}
.lt-score-dot.ok    { background: var(--easy); }
.lt-score-dot.wrong { background: var(--hard); }
.lt-score-xp {
    margin-left: auto;
    font-size: 12px;
    font-weight: 700;
    color: var(--easy);
}

/* Scrollable body */
.lt-detail-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 16px;
}
.lt-detail-body .lt-detail-q,
.lt-detail-body .lt-detail-loading {
    margin-bottom: 12px;
}
.lt-detail-body .lt-detail-q:last-child,
.lt-detail-body .lt-detail-loading:last-child {
    margin-bottom: 0;
}
.lt-detail-loading {
    padding: 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

/* Question block */
.lt-detail-q {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}
.lt-detail-q-header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}
.lt-detail-q-num {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--surface);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}
.lt-detail-q-text {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.5;
}
.lt-q-icon { font-size: 14px; font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.lt-q-icon.ok    { color: var(--easy); }
.lt-q-icon.wrong { color: var(--hard); }

.lt-detail-q-body {
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* MCQ options */
.lt-detail-opt {
    font-size: 13px;
    color: var(--text-muted);
    padding: 5px 8px;
    border-radius: 6px;
    line-height: 1.4;
}
.lt-detail-opt.opt-correct       { color: var(--easy); background: rgba(52,211,153,0.08); font-weight: 600; }
.lt-detail-opt.opt-wrong         { color: var(--hard); background: rgba(244,67,54,0.08);  font-weight: 600; }
.lt-detail-opt.opt-correct-unsel { color: var(--easy); opacity: 0.65; }

/* Fill / matching shared value */
.lt-fill-label   { font-size: 12px; color: var(--text-muted); min-width: 36px; }
.lt-fill-val     { font-size: 13px; color: var(--text); font-weight: 500; }
.lt-fill-val.ok  { color: var(--easy); }
.lt-fill-val.wrong { color: var(--hard); }
.lt-detail-fill-row { display: flex; align-items: center; gap: 6px; }

/* Matching rows */
.lt-detail-match-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    flex-wrap: wrap;
}
.lt-match-item-label { color: var(--text-muted); min-width: 70px; }
.lt-match-arrow { color: var(--text-muted); font-size: 11px; }

.practice-detail-card .lt-detail-body {
    gap: 8px;
}

.practice-read-aloud-score-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    margin-bottom: 16px;
}

.practice-read-aloud-score {
    display: grid;
    gap: 6px;
    padding: 16px 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
    text-align: center;
}

.practice-read-aloud-score span {
    color: var(--text-muted);
    font-size: 12px;
}

.practice-read-aloud-score strong {
    color: var(--text);
    font-size: 25px;
    line-height: 1;
}

.practice-read-aloud-score.is-total strong {
    color: var(--accent);
}

.practice-read-aloud-audio-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    margin-bottom: 16px;
}

.practice-read-aloud-audio-card {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
}

.practice-read-aloud-audio-card > strong {
    color: var(--text);
    font-size: 13px;
}

.practice-read-aloud-audio-card > span {
    color: var(--text-muted);
    font-size: 12px;
}

.practice-read-aloud-audio-card audio {
    width: 100%;
    min-width: 0;
    height: 36px;
}

.practice-read-aloud-text-card {
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

.practice-read-aloud-section-title {
    margin-bottom: 12px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}

.practice-read-aloud-transcript {
    color: var(--text);
    font-size: 17px;
    line-height: 1.9;
    letter-spacing: .005em;
    white-space: pre-wrap;
}

.practice-read-aloud-word {
    position: relative;
    display: inline;
    padding: 1px 2px;
    border-radius: 4px;
}

.practice-read-aloud-word[role="button"] {
    cursor: pointer;
}

.practice-read-aloud-word.is-mispronunciation {
    color: #dc2626;
    background: color-mix(in srgb, #ef4444 10%, transparent);
    text-decoration: underline wavy #ef4444;
    text-underline-offset: 4px;
}

.practice-read-aloud-word.is-omission {
    color: var(--text-muted);
    text-decoration: line-through;
    opacity: .65;
}

.practice-read-aloud-word.is-insertion {
    color: #d97706;
    background: color-mix(in srgb, #f59e0b 12%, transparent);
}

.practice-read-aloud-word.show-score::after {
    content: attr(data-score-label);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    z-index: 30;
    transform: translateX(-50%);
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--text);
    color: var(--bg);
    box-shadow: var(--shadow-md);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}

.practice-read-aloud-word.show-score::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 3px);
    z-index: 31;
    width: 8px;
    height: 8px;
    transform: translateX(-50%) rotate(45deg);
    background: var(--text);
    pointer-events: none;
}

.practice-read-aloud-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 16px;
    color: var(--text-muted);
    font-size: 11px;
}

.practice-read-aloud-legend span::before {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 5px;
    border-radius: 50%;
    content: "";
}

.practice-read-aloud-legend .is-mispronunciation::before {
    background: #ef4444;
}

.practice-read-aloud-legend .is-omission::before {
    background: var(--text-muted);
}

.practice-read-aloud-legend .is-insertion::before {
    background: #f59e0b;
}

@media (max-width: 700px) {
    .practice-read-aloud-score-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .practice-read-aloud-score.is-total {
        grid-column: 1 / -1;
    }
    .practice-read-aloud-audio-grid {
        grid-template-columns: 1fr;
    }
}

.practice-detail-row .lt-detail-q-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.practice-detail-row .gr-detail-explanation {
    grid-column: 1 / -1;
}

.practice-detail-field {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
}

.practice-detail-field-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    white-space: nowrap;
}

.practice-detail-field-answer {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.practice-detail-field.ok .practice-detail-field-answer {
    color: var(--easy);
}

.practice-detail-field.wrong .practice-detail-field-answer {
    color: var(--hard);
}

.practice-detail-field-expected {
    font-size: 12px;
    font-weight: 600;
    color: var(--easy);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-detail-item.vocab-clickable:hover {
    border-color: var(--accent);
    background: rgba(94, 234, 212, 0.05);
}

.task-detail-item.task-viewed {
    opacity: 0.5;
}

/* ─── READING DETAIL MODAL ─────────────────────────────── */
.rd-detail-card {
    width: 100%;
    max-width: 640px;
    height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    gap: 0;
}

/* Collapsible article */
.rd-article-wrap {
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
}
.rd-article-summary {
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    background: var(--surface-2);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
}
.rd-article-summary::-webkit-details-marker { display: none; }
.rd-article-summary::before {
    content: '▶';
    font-size: 9px;
    transition: transform 0.15s;
    display: inline-block;
}
details[open] .rd-article-summary::before { transform: rotate(90deg); }
.rd-article-body {
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--text);
    white-space: pre-wrap;
    max-height: 260px;
    overflow-y: auto;
    background: var(--surface);
}

/* ─── GRAMMAR DETAIL MODAL ──────────────────────────────── */
.gr-source-more-btn {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
    background: rgba(94,234,212,0.12);
    border-radius: 6px;
    padding: 1px 7px;
    cursor: pointer;
    letter-spacing: 0.04em;
    vertical-align: middle;
}
.gr-source-more-btn:hover { background: rgba(94,234,212,0.22); }

.gr-source-chip {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1px 7px;
    margin-left: 4px;
    vertical-align: middle;
}

.gr-detail-type-tag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 20px;
    border: 1px solid var(--border);
    color: var(--text-muted);
    flex-shrink: 0;
}
.gr-detail-type-tag.fill { border-color: rgba(139,233,253,0.35); color: var(--blue-accent, #8be9fd); }
.gr-detail-type-tag.mcq  { border-color: rgba(94,234,212,0.35);  color: var(--accent); }
.gr-detail-type-tag.compose { border-color: rgba(255,184,108,0.38); color: var(--medium); }

.gr-detail-gp {
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
    flex-shrink: 0;
}

.gr-detail-explanation {
    margin-top: 8px;
    padding: 7px 11px;
    border-radius: 7px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-muted);
    background: var(--surface-2);
    border-left: 3px solid var(--border);
}

/* ─── VOCAB MANAGER (系统工具 > 词汇管理) ────────────────────────────────── */

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

.vocab-mgr-tier-select {
    flex-shrink: 0;
    padding: 9px 12px;
    font-size: 13px;
    font-family: 'Inter', -apple-system, sans-serif;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    cursor: pointer;
    appearance: auto;
}

.vocab-mgr-tier-select:focus {
    outline: none;
    border-color: var(--accent);
}

.vocab-mgr-input {
    flex: 1 1 200px;
    min-width: 0;
    font-family: 'Roboto Mono', 'Courier New', monospace;
    font-size: 13px;
}

.vocab-mgr-rank-input {
    flex: 0 0 92px;
    width: 92px;
    font-family: 'Roboto Mono', 'Courier New', monospace;
    font-size: 13px;
}

.vocab-mgr-rank-input:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.vocab-mgr-search-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.vocab-mgr-nav-group {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.vocab-mgr-nav-btn {
    padding: 8px 14px;
    font-size: 13px;
}

.vocab-mgr-delete-confirm {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 14px;
    background: rgba(244, 67, 54, 0.06);
    border: 1px solid rgba(244, 67, 54, 0.25);
    border-radius: 8px;
}

.vocab-mgr-delete-msg {
    flex: 1;
    font-size: 13px;
    color: var(--hard);
}

.vocab-mgr-confirm-btn {
    padding: 7px 14px;
    font-size: 13px;
    flex-shrink: 0;
}

.vocab-mgr-current-word {
    margin-top: 14px;
    font-size: 22px;
    font-weight: 700;
    font-family: 'Roboto Mono', 'Courier New', monospace;
    color: var(--accent);
    letter-spacing: 0.04em;
}

.vocab-mgr-editor-status {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
}

/* ─── GLOBAL DASHBOARD ──────────────────────────────────────── */
.global-dashboard {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.gd-stat-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.gd-stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px 16px 14px;
    text-align: center;
}

.gd-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.1;
    letter-spacing: -0.5px;
}

.gd-stat-value.gd-accent { color: var(--accent); }
.gd-stat-value.gd-warn   { color: var(--hard); }

.gd-stat-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 5px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.gd-main-row {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.1fr) minmax(0, 0.95fr);
    gap: 16px;
    align-items: stretch;
}

.gd-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gd-section:has(.gd-cap-row) {
    gap: 0;
    justify-content: space-between;
}

.gd-section-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

/* Follow-up list and group table rows are buttons: reset, then lay out. */
.gd-followup-row,
.gd-group-row {
    appearance: none;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    width: 100%;
    padding: 7px 4px;
    border-radius: 0;
}

.gd-followup-row:last-of-type,
.gd-group-row:last-of-type { border-bottom: none; }

.gd-followup-row:hover,
.gd-group-row:hover { background: var(--surface-2); }

.gd-followup-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name group" "reasons reasons";
    gap: 4px 8px;
    align-items: center;
}

.gd-followup-name {
    grid-area: name;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gd-followup-group {
    grid-area: group;
    font-size: 11px;
    color: var(--text-muted);
}

.gd-followup-reasons {
    grid-area: reasons;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.gd-chip {
    font-size: 11px;
    line-height: 1.5;
    padding: 0 6px;
    border-radius: 6px;
    border: 1px solid var(--border);
    color: var(--text-muted);
}

.gd-chip-warn   { color: var(--hard); border-color: currentColor; }
.gd-chip-accent { color: var(--accent); border-color: currentColor; }

.gd-group-head,
.gd-group-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px 44px 60px;
    gap: 8px;
    align-items: center;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.gd-group-head {
    color: var(--text-muted);
    font-size: 11px;
    padding: 0 4px 4px;
    border-bottom: 1px solid var(--border);
}

.gd-group-head > span:not(:first-child),
.gd-group-row > span:not(:first-child) { text-align: right; }

.gd-group-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gd-warn-text { color: var(--hard); }

.gd-more {
    font-size: 11px;
    color: var(--text-muted);
    padding-top: 4px;
}

/* Capability bars */
.gd-cap-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gd-cap-icon { flex-shrink: 0; color: var(--text-muted); }

.gd-cap-label {
    font-size: 12px;
    color: var(--text-muted);
    width: 32px;
    flex-shrink: 0;
    font-weight: 500;
}

.gd-cap-bar-wrap {
    flex: 1;
    height: 6px;
    background: var(--surface-2);
    border-radius: 3px;
    overflow: hidden;
}

.gd-cap-bar {
    height: 100%;
    border-radius: 3px;
    background: var(--accent);
    opacity: 0.7;
    transition: width 0.4s ease;
    min-width: 2px;
}

.gd-cap-count {
    font-size: 11px;
    color: var(--text-muted);
    width: 36px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.gd-empty {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    padding: 20px 0;
}

@media (min-width: 768px) and (max-width: 1180px) {
    .gd-stat-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .gd-main-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gd-main-row > .gd-section:last-child {
        grid-column: 1 / -1;
    }

    .gd-stat-card,
    .gd-section {
        padding: 16px 18px;
    }

    .gd-stat-value {
        font-size: 24px;
    }
}

@media (max-width: 1200px) {
    .gd-stat-row { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
    .gd-stat-row { grid-template-columns: repeat(2, 1fr); }
    .gd-main-row { grid-template-columns: 1fr; }
    .gd-main-row > .gd-section:last-child { grid-column: auto; }
}

/* ─── Avatar Crop Modal ───────────────────────────────────── */
.avatar-crop-card {
    max-width: 320px;
    width: 94%;
    padding: 0;
    overflow: hidden;
}

.avatar-crop-hint {
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    padding: 10px 20px 14px;
}

.avatar-crop-outer {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--accent);
    background: var(--surface-2);
    position: relative;
    cursor: move;
    margin: 0 auto 16px;
    touch-action: none;
}

.avatar-crop-img {
    position: absolute;
    -webkit-user-drag: none;
    pointer-events: none;
    transform-origin: top left;
}

.avatar-crop-zoom-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 16px;
    padding: 0 20px;
}

.avatar-crop-zoom-label {
    font-size: 13px;
    color: var(--text-muted);
    min-width: 50px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ── Grammar Registry Tool ───────────────────────────────────────── */
#tool-registry.tool-panel.active {
    display: block;
    padding: 4px 0;
    overflow-y: auto;
}

.registry-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 8px;
    background: var(--surface);
}

.registry-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.registry-table th {
    background: var(--surface-2);
    padding: 7px 10px;
    text-align: left;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
}

.registry-table td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    color: var(--text);
}

.registry-table tbody tr:last-child td {
    border-bottom: none;
}

.registry-table tbody tr:hover {
    background: var(--surface-2);
}

.registry-table .reg-field {
    border: 1px solid transparent;
    background: var(--surface);
    border-radius: 4px;
    padding: 2px 4px;
    font-size: 12px;
    font-family: inherit;
    color: var(--text);
    width: 100%;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
}

.registry-table .reg-field:hover,
.registry-table .reg-field:focus {
    border-color: var(--border);
    background: var(--surface-2);
    outline: none;
}

/* Group header in the unit editor's skill list. This was written as
   `.registry-table tr.reg-section-hdr td`, but the only marker in the codebase is
   a plain <div> in #registryUnitSkillList (registry-tools.js), so the selector
   matched nothing and the header rendered wholly unstyled — the largest, darkest
   line in a list whose other columns run 11–13px. Element-agnostic now. */
.reg-section-hdr {
    background: var(--surface-2);
    font-weight: 700;
    color: var(--text-muted);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 6px 10px;
    border-top: 2px solid var(--border);
    border-bottom: 1px solid var(--border);
}

/* ── Grammar Assignment Workflow ───────────────────────────────── */
.grammar-assignment-mode-group {
    align-items: flex-start;
}

.grammar-assignment-tabs {
    width: min(320px, 100%);
}

.grammar-assignment-tabs .tab-btn {
    flex: 1;
}

.grammar-assignment-panel {
    display: none;
}

.grammar-assignment-panel.active {
    display: block;
}

.grammar-manual-assignment-panel.active,
.grammar-schedule-panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.grammar-mode-hidden {
    display: none !important;
}

.grammar-json-ratio-row {
    display: flex;
    align-items: center;
    gap: 5px;
}

.grammar-json-file-list {
    display: grid;
    gap: 8px;
}

/* Generate-from-grammar-points builder, above the manual file list. Collapsed
   by default so the upload flow stays the first thing on the panel. */
.grammar-quiz-builder {
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 12px;
    background: var(--surface);
}

.grammar-quiz-builder > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
}

.grammar-quiz-builder > summary small {
    color: var(--text-muted);
    font-weight: 500;
}

.grammar-quiz-builder-body {
    padding: 0 12px 12px;
    display: grid;
    gap: 10px;
}

.grammar-quiz-builder-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.grammar-quiz-builder-controls .form-input[type="search"] {
    flex: 1 1 180px;
    min-width: 140px;
}

.grammar-quiz-catalog {
    border: 1px solid var(--border);
    border-radius: 8px;
    max-height: 300px;
    overflow-y: auto;
    background: var(--surface-2);
}

.grammar-quiz-group > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 12px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}

.grammar-quiz-group-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.grammar-quiz-skills {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 4px 10px;
    padding: 8px 12px;
}

.grammar-quiz-skill {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer;
}

.grammar-quiz-skill small {
    color: var(--text-muted);
    font-size: 11px;
}

/* Upload button, plus the regenerate control a generated paper carries. */
.grammar-json-source-cell {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.grammar-json-source-cell .grammar-json-upload {
    flex: 1 1 auto;
    min-width: 0;
}

.grammar-json-regenerate {
    flex: 0 0 auto;
}

.grammar-json-empty {
    padding: 16px;
    border: 1px dashed var(--border);
    border-radius: 10px;
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
}

.grammar-json-table-header,
.grammar-json-file-row {
    display: grid;
    grid-template-columns: minmax(180px, 1.5fr) minmax(140px, 1fr) minmax(90px, .65fr)
        64px minmax(100px, .72fr) minmax(128px, .9fr) minmax(146px, 1fr);
    align-items: center;
    gap: 10px;
}

.grammar-json-table-header {
    padding: 0 12px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}

.grammar-json-file-row {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2);
}

.grammar-json-file-row-empty {
    border-style: dashed;
    background: transparent;
}

.grammar-json-file-row .form-input,
.grammar-json-file-row .btn-sm {
    min-width: 0;
    width: 100%;
}

.grammar-json-question-count {
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

.grammar-json-segment-switch {
    display: block;
    min-width: 0;
    cursor: pointer;
    user-select: none;
}

.grammar-json-segment-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.grammar-json-segment-switch > span {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 36px;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

.grammar-json-segment-switch > span::before {
    position: absolute;
    inset: 3px 50% 3px 3px;
    border-radius: 7px;
    background: var(--accent);
    content: '';
    transition: transform .18s ease;
}

.grammar-json-segment-switch input:checked + span::before {
    transform: translateX(100%);
}

.grammar-json-segment-switch b {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    transition: color .18s ease;
}

.grammar-json-segment-switch b:first-child,
.grammar-json-segment-switch input:checked + span b:last-child {
    color: var(--accent-contrast, #fff);
}

.grammar-json-segment-switch input:checked + span b:first-child {
    color: var(--text-muted);
}

.grammar-json-segment-switch:has(input:disabled) {
    cursor: default;
    opacity: .45;
}

.grammar-schedule-panel .grammar-json-table-header,
.grammar-json-file-row.grammar-schedule-row {
    grid-template-columns: 44px minmax(120px, 1.25fr) minmax(118px, .9fr) minmax(82px, .62fr)
        minmax(86px, .7fr) minmax(78px, .56fr) 44px minmax(56px, .5fr)
        minmax(112px, .85fr) minmax(128px, .95fr) minmax(92px, .7fr) minmax(112px, .85fr);
}

.grammar-schedule-hints {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}

.grammar-schedule-hints:has(input:disabled) {
    cursor: default;
    opacity: .45;
}

/* The schedule row carries more columns, so it stacks earlier than the
   upload row to avoid overflowing the assignment card. */
@media (max-width: 1080px) {
    .grammar-schedule-panel .grammar-json-table-header {
        display: none;
    }

    .grammar-json-file-row.grammar-schedule-row {
        grid-template-columns: 1fr;
    }
}

.grammar-schedule-day {
    display: grid;
    gap: 8px;
}

.grammar-schedule-day + .grammar-schedule-day {
    margin-top: 14px;
}

.grammar-schedule-day-header {
    align-items: center;
    display: flex;
    gap: 8px;
    padding: 0 2px 2px;
}

.grammar-schedule-day-title {
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
}

.grammar-schedule-day-count {
    color: var(--text-muted);
    font-size: 12px;
}

.grammar-schedule-day-select {
    margin-left: auto;
}

.grammar-schedule-bulk-bar {
    align-items: center;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
}

.grammar-schedule-bulk-count {
    font-size: 13px;
    font-weight: 700;
}

.grammar-schedule-bulk-divider {
    align-self: stretch;
    border-left: 1px solid var(--border);
    margin: 0 2px;
    width: 0;
}

.grammar-schedule-bulk-bar .form-select {
    max-width: 200px;
    width: auto;
}

.grammar-json-spread {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.grammar-json-spread .grammar-schedule-range .form-input[type="number"] {
    width: 72px;
}

.grammar-json-spread-skip {
    align-items: center;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    font-size: 12px;
    gap: 6px;
}

.grammar-schedule-pick {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 6px;
}

.grammar-schedule-pick:has(input:disabled) {
    cursor: default;
    opacity: .45;
}

.grammar-schedule-position {
    color: var(--text-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.grammar-schedule-progress-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
}

.grammar-schedule-progress,
.grammar-schedule-progress-failed,
.grammar-schedule-progress-empty {
    font-size: 11px;
    white-space: nowrap;
}

.grammar-schedule-progress {
    color: #22c55e;
}

.grammar-schedule-progress-failed {
    color: var(--danger);
}

.grammar-schedule-progress-empty {
    color: var(--text-muted);
}

.grammar-schedule-progress-missing {
    color: #fbbf24;
    cursor: help;
    font-size: 11px;
    white-space: nowrap;
}

/* Expanding a row: the students behind its counts, and what each of them owes. */
.grammar-schedule-members-toggle {
    align-items: center;
    background: none;
    border: 0;
    border-radius: 6px;
    color: inherit;
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: -2px -4px;
    min-width: 0;
    padding: 2px 4px;
    text-align: left;
}

.grammar-schedule-members-toggle:hover {
    background: var(--surface-3, rgba(148, 163, 184, .16));
}

.grammar-schedule-members-chevron {
    color: var(--text-muted);
    font-size: 10px;
}

.grammar-schedule-members {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    margin: -2px 0 2px 28px;
    padding: 10px 12px;
}

.grammar-schedule-members-state,
.grammar-schedule-members-summary {
    color: var(--text-muted);
    font-size: 12px;
}

.grammar-schedule-members-summary {
    padding-bottom: 6px;
}

.grammar-schedule-members-table {
    border-collapse: collapse;
    font-size: 12px;
    width: 100%;
}

.grammar-schedule-members-table th {
    color: var(--text-muted);
    font-weight: 700;
    padding: 4px 8px 6px;
    text-align: left;
    white-space: nowrap;
}

.grammar-schedule-members-table td {
    border-top: 1px solid var(--border);
    padding: 6px 8px;
    vertical-align: middle;
}

.grammar-schedule-member-name {
    color: var(--text);
    font-weight: 700;
}

.grammar-schedule-member-id,
.grammar-schedule-member-note {
    color: var(--text-muted);
    font-weight: 400;
    margin-left: 6px;
}

.grammar-schedule-member-note {
    color: #fbbf24;
}

.grammar-schedule-member-state {
    border: 1px solid var(--border);
    border-radius: 999px;
    display: inline-block;
    padding: 1px 8px;
    white-space: nowrap;
}

.grammar-schedule-member-missing .grammar-schedule-member-state,
.grammar-schedule-member-expired .grammar-schedule-member-state,
.grammar-schedule-member-failed .grammar-schedule-member-state {
    border-color: var(--danger);
    color: var(--danger);
}

.grammar-schedule-member-passed .grammar-schedule-member-state {
    border-color: #22c55e;
    color: #22c55e;
}

.grammar-schedule-member-removed .grammar-schedule-member-state,
.grammar-schedule-member-detached .grammar-schedule-member-state {
    color: var(--text-muted);
}

.grammar-schedule-member-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

@media (max-width: 1080px) {
    .grammar-schedule-members {
        margin-left: 0;
    }
}

.grammar-schedule-toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.grammar-schedule-status-tabs {
    flex: 0 0 auto;
}

.grammar-schedule-range {
    align-items: center;
    color: var(--text-muted);
    display: flex;
    font-size: 12px;
    gap: 6px;
}

.grammar-schedule-range .form-input {
    width: 148px;
}

.grammar-schedule-summary {
    color: var(--text-muted);
    font-size: 12px;
    margin-left: auto;
}

.grammar-schedule-row-inherited {
    background: transparent;
    border-style: dashed;
}

.grammar-schedule-row-inherited .form-input:disabled,
.grammar-schedule-row-inherited .btn-sm:disabled {
    cursor: default;
    opacity: .55;
}

.grammar-schedule-state-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
}

.grammar-schedule-state,
.grammar-schedule-owner {
    border-radius: 4px;
    flex-shrink: 0;
    font-size: 11px;
    padding: 2px 7px;
    white-space: nowrap;
}

.grammar-schedule-owner {
    background: rgba(148, 163, 184, .16);
    color: var(--text-muted);
}

.grammar-schedule-owner-group {
    background: rgba(59, 130, 246, .12);
    color: #93c5fd;
}

.grammar-schedule-owner-retry {
    background: rgba(168, 85, 247, .16);
    color: #c084fc;
}

.grammar-schedule-scope-count {
    color: var(--text-muted);
    flex-shrink: 0;
    font-size: 11px;
    white-space: nowrap;
}

.grammar-schedule-state {
    background: rgba(148, 163, 184, .16);
    color: var(--text-muted);
}

.grammar-schedule-state-scheduled {
    background: rgba(59, 130, 246, .14);
    color: #60a5fa;
}

.grammar-schedule-state-queued {
    background: rgba(251, 191, 36, .14);
    color: #fbbf24;
}

.grammar-schedule-state-pushed {
    background: rgba(34, 197, 94, .15);
    color: #22c55e;
}

.grammar-schedule-state-expired {
    background: rgba(148, 163, 184, .16);
    color: var(--text-muted);
}

.grammar-schedule-state-pending,
.grammar-schedule-state-processing {
    background: rgba(59, 130, 246, .14);
    color: #60a5fa;
}

.grammar-schedule-state-ready {
    background: rgba(34, 197, 94, .15);
    color: #22c55e;
}

.grammar-schedule-state-failed {
    background: rgba(239, 68, 68, .14);
    color: #f87171;
}

.grammar-schedule-delete {
    color: var(--danger);
}

.grammar-schedule-actions {
    justify-content: flex-end;
}

.grammar-json-result-summary,
.grammar-json-result-errors {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.6;
}

.grammar-json-result-errors {
    color: var(--danger);
}

.grammar-json-assign-actions {
    align-items: center;
}

.grammar-json-hint-toggle {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    user-select: none;
}

.grammar-json-hint-toggle input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--accent);
}

.grammar-assignment-workflow {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

.grammar-workflow-step {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2);
}

.grammar-workflow-step-header {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.grammar-workflow-step-number {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--accent);
    color: var(--bg);
    font-size: 13px;
    font-weight: 800;
}

.grammar-workflow-step-header h3 {
    margin: 1px 0 3px;
    color: var(--text);
    font-size: 15px;
    line-height: 1.3;
}

.grammar-workflow-step-header p,
.grammar-workflow-submit-hint {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.55;
}

.grammar-workflow-selection {
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.55;
}

.grammar-workflow-generate-row {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
}

.grammar-workflow-generate-row .form-actions {
    justify-content: flex-start;
}

.grammar-workflow-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-top: 4px;
}

.grammar-auto-publish-settings {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(120px, 0.7fr) auto auto auto;
    gap: 12px;
    align-items: end;
    padding: 14px 0 4px;
    border-top: 1px solid var(--border);
}

.grammar-auto-publish-settings > label:not(.grammar-remediation-toggle) {
    display: grid;
    gap: 6px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 650;
}

.grammar-auto-ratio-input {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 7px;
    align-items: center;
}

.grammar-auto-ratio-input b {
    color: var(--text-muted);
    font-size: 13px;
}

.grammar-workflow-submit .form-label {
    margin-bottom: 3px;
}

.grammar-workflow-submit .form-actions {
    align-items: center;
    margin-top: 0;
}

.grammar-remediation-toggle {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 4px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
    white-space: nowrap;
}

.grammar-remediation-toggle input {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

.grammar-remediation-toggle:has(input:checked) {
    color: var(--accent);
}

.grammar-remediation-toggle:has(input:disabled) {
    opacity: 0.45;
    cursor: default;
}

.registry-visual-modal-card {
    width: min(620px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    overflow: auto;
    padding: 28px;
}

.registry-visual-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.registry-visual-meta {
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 12px;
}

.registry-visual-close {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
}

.registry-visual-close:hover {
    background: var(--surface-2);
    color: var(--text);
}

.registry-visual-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 18px;
    padding: 4px;
    border-radius: 10px;
    background: var(--surface-2);
}

.registry-visual-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9px 14px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.registry-visual-tab strong {
    font-size: 13px;
}

.registry-visual-tab.active {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    background: var(--surface);
    color: var(--accent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.registry-visual-preview {
    min-height: 280px;
    margin: 12px 0 10px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2);
}

.registry-visual-preview img {
    display: block;
    width: 100%;
    max-height: min(480px, calc(100vh - 260px));
    object-fit: contain;
}

.registry-visual-zoom {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
}

.registry-visual-btn {
    padding: 4px 9px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 11px;
    white-space: nowrap;
    cursor: pointer;
}

.registry-visual-btn.has-image {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

.registry-visual-btn:hover {
    filter: brightness(1.06);
}

.registry-unit-skill-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.registry-unit-skill-summary > span {
    min-width: 0;
}

.registry-unit-skill-summary small {
    display: block;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.registry-unit-skill-summary .registry-visual-btn {
    flex: 0 0 auto;
}

.registry-unit-fields {
    display: grid;
    grid-template-columns: minmax(280px, 1.8fr) repeat(3, minmax(110px, .6fr));
    align-items: start;
    gap: 10px;
}

.registry-unit-fields .form-group {
    align-self: start;
    margin: 0;
}

.registry-unit-fields .form-label {
    display: flex;
    align-items: center;
    min-height: 14px;
    line-height: 14px;
}

.registry-unit-fields .form-input {
    min-height: 42px;
}

.registry-visual-empty {
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
}

.registry-visual-status {
    min-height: 18px;
    color: var(--text-muted);
    font-size: 12px;
}

.registry-visual-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.registry-visual-delete {
    margin-left: auto;
    padding: 8px 6px;
    border: 0;
    background: transparent;
    color: var(--danger);
    font-size: 12px;
    cursor: pointer;
}

.registry-visual-delete:hover {
    text-decoration: underline;
}

.registry-visual-upload-panel {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
}

.registry-visual-upload-panel[hidden] {
    display: none;
}

.registry-visual-upload-summary {
    display: flex;
    gap: 8px;
    min-width: 0;
    margin-bottom: 12px;
    color: var(--text-muted);
    font-size: 12px;
}

.registry-visual-upload-summary strong {
    overflow: hidden;
    color: var(--text);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.registry-visual-verify {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    font-size: 13px;
}

.registry-visual-upload-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}

@media (max-width: 900px) {
    .grammar-assignment-workflow {
        grid-template-columns: 1fr;
    }

    .registry-unit-fields {
        grid-template-columns: repeat(3, minmax(100px, 1fr));
    }

    .registry-unit-title-field {
        grid-column: 1 / -1;
    }
}

@media (max-width: 820px) {
    .grammar-json-table-header,
    .grammar-schedule-panel .grammar-json-table-header {
        display: none;
    }

    .grammar-json-file-row,
    .grammar-json-file-row.grammar-schedule-row {
        grid-template-columns: 1fr;
    }

    .grammar-auto-publish-settings {
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }
}

@media (max-width: 620px) {
    .grammar-workflow-submit {
        align-items: stretch;
        flex-direction: column;
    }

    .registry-visual-modal-card {
        padding: 22px 18px;
    }

    .registry-visual-preview {
        min-height: 220px;
    }

    .registry-visual-toolbar {
        align-items: stretch;
        flex-wrap: wrap;
    }
}

/* ── 语法讲解：标准技能库 · 管理 ─────────────────────────────────── */
/* The table is wider than most screens; 管理 / 删除 stay pinned at its right edge. */
.registry-table th:last-child,
.registry-row-actions {
    position: sticky;
    right: 0;
    z-index: 1;
    white-space: nowrap;
    box-shadow: -8px 0 10px -8px rgba(0, 0, 0, 0.18);
}

.registry-table th:last-child {
    background: var(--surface-2);
}

.registry-row-actions {
    background: var(--surface);
}

.registry-row-actions .reg-teach-btn {
    margin-right: 6px;
    padding: 2px 10px;
    font-size: 11px;
}

.registry-row-actions .reg-teach-btn.is-draft {
    border-color: var(--warning, #f59e0b);
    color: var(--warning, #b45309);
}

.registry-row-actions .reg-teach-btn.is-approved {
    border-color: var(--success, #22c55e);
    color: var(--success, #15803d);
}

.grammar-teaching-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

.grammar-teaching-chip small {
    font-size: 10px;
    font-weight: 500;
    opacity: 0.8;
}

.grammar-teaching-chip.is-draft {
    background: color-mix(in srgb, var(--warning, #f59e0b) 16%, transparent);
    color: color-mix(in srgb, var(--warning, #d97706) 75%, var(--text));
}

.grammar-teaching-chip.is-approved {
    background: color-mix(in srgb, var(--success, #22c55e) 16%, transparent);
    color: color-mix(in srgb, var(--success, #16a34a) 75%, var(--text));
}

.grammar-teaching-chip.is-generating {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
}

.grammar-teaching-chip.is-failed {
    background: color-mix(in srgb, var(--danger, #ef4444) 14%, transparent);
    color: var(--danger, #ef4444);
}

.grammar-teaching-card {
    max-width: none;
    gap: 0;
    width: min(1180px, calc(100vw - 32px));
    height: min(860px, calc(100vh - 32px));
    display: flex;
    flex-direction: column;
    padding: 22px 24px;
    overflow: hidden;
}

.grammar-teaching-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.grammar-teaching-heading,
.grammar-teaching-heading .modal-title {
    text-align: left;
}

.grammar-teaching-meta {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 12px;
    font-family: var(--font-mono, monospace);
}

.grammar-teaching-body {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 18px;
    padding-top: 14px;
}

.grammar-teaching-side {
    min-height: 0;
    overflow-y: auto;
    display: grid;
    align-content: start;
    gap: 12px;
    padding-right: 4px;
}

.grammar-teaching-block {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

.grammar-teaching-block[hidden] {
    display: none;
}

.grammar-teaching-block-title {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}

.grammar-teaching-history summary {
    cursor: pointer;
}

.grammar-teaching-status {
    display: grid;
    gap: 6px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text);
}

.grammar-teaching-status p {
    margin: 0;
}

.grammar-teaching-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.grammar-teaching-row .btn-primary,
.grammar-teaching-row .btn-ghost,
.grammar-teaching-row .registry-visual-delete {
    font-size: 12px;
    padding: 5px 12px;
}

.grammar-teaching-effort {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
}

.grammar-teaching-effort select {
    padding: 4px 6px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 12px;
}

.grammar-teaching-hint {
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-muted);
}

.grammar-teaching-hint.is-warning,
.grammar-teaching-error {
    color: var(--danger, #ef4444);
}

.grammar-teaching-checks ul,
.grammar-teaching-history ol {
    margin: 0;
    padding-left: 16px;
    display: grid;
    gap: 4px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-muted);
}

.grammar-teaching-checks .is-issue {
    color: var(--danger, #ef4444);
}

.grammar-teaching-history li span {
    margin-right: 6px;
    font-family: var(--font-mono, monospace);
}

.grammar-teaching-main {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.grammar-teaching-views {
    display: inline-flex;
    align-self: flex-start;
    gap: 4px;
    padding: 4px;
    border-radius: 10px;
    background: var(--surface-2);
}

.grammar-teaching-view {
    padding: 6px 14px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.grammar-teaching-view.active {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    background: var(--surface);
    color: var(--accent);
}

.grammar-teaching-pane {
    flex: 1;
    min-height: 0;
    position: relative;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface-2);
}

.grammar-teaching-pane[hidden] {
    display: none;
}

.grammar-teaching-frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: var(--bg);
}

.grammar-teaching-frame[hidden] {
    display: none;
}

.grammar-teaching-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
}

.grammar-teaching-empty[hidden] {
    display: none;
}

.grammar-teaching-edit {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    background: var(--surface);
}

.grammar-teaching-edit[hidden] {
    display: none;
}

.grammar-teaching-edit textarea {
    flex: 1;
    min-height: 0;
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text);
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    line-height: 1.55;
    resize: none;
}

.grammar-teaching-edit .grammar-teaching-row {
    justify-content: flex-end;
}

.grammar-teaching-edit .grammar-teaching-hint {
    margin-right: auto;
}

@media (max-width: 900px) {
    .grammar-teaching-card {
        height: calc(100vh - 24px);
        padding: 18px 16px;
    }

    .grammar-teaching-body {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(420px, 1fr);
        overflow-y: auto;
    }

    .grammar-teaching-side {
        overflow: visible;
    }
}

/* ── Grammar Section Picker ─────────────────────────────────────── */
.grammar-section-tree {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 8px;
    max-height: 260px;
    overflow-y: auto;
    background: var(--surface);
}

.grammar-section-loading {
    padding: 16px;
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
}

.grammar-section-unit-hdr {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--surface);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-faint, var(--border));
    cursor: pointer;
}

.grammar-section-unit-hdr:hover {
    background: var(--surface-2);
    color: var(--text);
}

.grammar-section-unit-body {
    display: none;
}

.grammar-section-unit.expanded > .grammar-section-unit-body {
    display: block;
}

.grammar-tree-caret {
    display: inline-block;
    font-size: 9px;
    color: var(--text-muted);
    width: 10px;
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.grammar-section-unit.expanded > .grammar-section-unit-hdr .grammar-tree-caret {
    transform: rotate(90deg);
}

.grammar-section-row {
    display: flex;
    align-items: center;
    padding: 6px 12px 6px 40px;
    gap: 8px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-faint, var(--border));
    transition: background 0.1s;
}

.grammar-section-row:last-child {
    border-bottom: none;
}

.grammar-section-row:hover {
    background: var(--surface-2);
}

.grammar-section-row.selected {
    background: var(--accent-light, rgba(99,102,241,0.08));
}

.grammar-sec-chk {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--accent);
}

.grammar-sec-num {
    font-size: 11px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    min-width: 22px;
    flex-shrink: 0;
}

.grammar-sec-title {
    font-size: 13px;
    color: var(--text);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grammar-sec-stem {
    font-size: 10px;
    color: var(--text-muted);
    font-family: var(--font-mono, monospace);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 5px;
    flex-shrink: 0;
}

/* ── Toggle Switch ── */
.toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
    position: absolute; inset: 0; cursor: pointer;
    background: var(--border); border-radius: 24px;
    transition: background .2s;
}
.toggle-slider:before {
    content: ""; position: absolute;
    height: 18px; width: 18px; left: 3px; bottom: 3px;
    background: #fff; border-radius: 50%; transition: transform .2s;
}
.toggle-switch input:checked + .toggle-slider { background: var(--accent); }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(20px); }

/* ── Reader article rows in admin ── */
.reader-article-row {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px;
    background: var(--surface-2);
}
.reader-article-row-info { flex: 1; min-width: 0; }
.reader-article-row-title { font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reader-article-row-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.reader-article-row-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.reader-article-row-badge {
    font-size: 11px; padding: 2px 7px; border-radius: 4px; flex-shrink: 0;
    background: rgba(148,163,184,0.16); color: var(--text-muted);
}
.reader-article-row-badge.is-reading {
    background: rgba(34,197,94,0.15); color: #22c55e;
}
.reader-article-row-badge.is-listening {
    background: rgba(59,130,246,0.14); color: #60a5fa;
}
.reader-article-row:hover .reader-article-delete-btn {
    opacity: 1;
}
.reader-article-load-more-wrap {
    display: flex;
    justify-content: center;
    padding: 8px 0 20px;
}
.reader-publish-modal-card {
    max-width: 720px;
    max-height: 86vh;
    padding: 0;
    gap: 0;
    overflow: hidden;
}
.reader-publish-modal-card .task-detail-header {
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
}
.reader-publish-modal-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    overflow-y: auto;
}
.reader-publish-options {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.reader-publish-type-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.reader-publish-cefr {
    min-width: 52px;
    padding: 5px 12px;
    border: 1px solid rgba(94, 234, 212, 0.42);
    border-radius: 999px;
    color: var(--accent);
    font-weight: 700;
    text-align: center;
}
.reader-publish-type-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 13px;
}
.reader-publish-type-option input {
    margin: 0;
}
.reader-publish-inline-field {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}
.reader-publish-inline-field input {
    width: 68px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 13px;
}
.reader-publish-target-header {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.reader-publish-class-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    font-weight: 500;
    min-width: 180px;
}
.reader-publish-user-list {
    max-height: 190px;
}
.reader-publish-empty {
    color: var(--text-muted);
    font-size: 13px;
    padding: 6px 0;
}
.reader-publish-result {
    font-size: 13px;
}
.reader-publish-actions {
    display: flex;
    gap: 8px;
}
.daily-news-mode-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.daily-news-mode-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}
.daily-news-auto-time {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
    margin-left: 8px;
}
.daily-news-auto-time input { width: 156px; }
.daily-news-auto-time select {
    min-width: 156px;
}
.daily-news-control-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}
.daily-news-field {
    display: grid;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
}
.daily-news-field-wide {
    grid-column: 1 / -1;
}
.daily-news-field-heading {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
}
.daily-news-level-duration-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(128px, 1fr));
    gap: 8px;
}
.daily-news-level-duration-row {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    opacity: 0.72;
    transition: border-color 0.15s, opacity 0.15s, background 0.15s;
}
.daily-news-level-duration-row.is-active {
    border-color: var(--accent);
    background: var(--surface);
    opacity: 1;
}
.daily-news-level-choice {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    cursor: pointer;
    color: var(--text);
}
.daily-news-level-choice input {
    accent-color: var(--accent);
}
.daily-news-level-name {
    font-size: 13px;
    font-weight: 700;
}
.daily-news-level-cefr {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
}
.daily-news-minute-cell {
    display: grid;
    gap: 3px;
}
.daily-news-minute-cell span {
    font-size: 11px;
    color: var(--text-muted);
}
.daily-news-minute-cell select {
    min-width: 0;
}
.daily-news-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.daily-news-result {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    padding: 12px;
}
.daily-news-result-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}
.daily-news-result-meta,
.daily-news-result-empty {
    font-size: 12px;
    color: var(--text-muted);
}
.daily-news-level-card {
    border-top: 1px solid var(--border);
    padding-top: 10px;
    margin-top: 10px;
}
.daily-news-transcript {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text);
    white-space: pre-wrap;
}
.daily-news-library-card {
    margin-top: 16px;
    display: grid;
    gap: 12px;
}
.daily-news-items-list {
    display: grid;
    gap: 12px;
}
.daily-news-item {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    padding: 12px;
    display: grid;
    gap: 10px;
}
.daily-news-item-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.daily-news-item-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.35;
}
.daily-news-audio {
    width: 100%;
    height: 36px;
}
.daily-news-item-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    color: var(--text-muted);
}
.daily-news-item-stats span {
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px 8px;
    background: var(--surface);
}
.daily-news-details summary {
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
}
.daily-news-sources {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
}
.daily-news-sources a,
.daily-news-sources span {
    color: var(--accent);
    text-decoration: none;
    overflow-wrap: anywhere;
}
.daily-news-readonly-chip {
    flex: 0 0 auto;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--surface);
}
.ai-queue-card {
    display: grid;
    gap: 14px;
}
.ai-queue-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(160px, 220px));
    gap: 12px;
}
.ai-queue-list {
    display: grid;
    gap: 10px;
}
.ai-queue-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--text-muted);
    font-size: 12px;
}
.ai-queue-summary span {
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 8px;
    background: var(--surface-2);
}
.ai-queue-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    background: var(--surface-2);
}
.ai-queue-row-main {
    min-width: 0;
}
.ai-queue-actions {
    display: grid;
    gap: 8px;
    width: 92px;
}
.ai-queue-action-btn {
    width: 100%;
    justify-content: center;
}
.ai-queue-delete-btn {
    color: var(--hard);
    border-color: rgba(239, 68, 68, 0.38);
}
.ai-queue-title-line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.ai-queue-type {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}
.ai-queue-status {
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
}
.ai-queue-status-pending { color: var(--accent); }
.ai-queue-status-processing { color: var(--accent); }
.ai-queue-status-completed { color: var(--text); }
.ai-queue-status-failed { color: var(--hard); }
.ai-queue-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 12px;
    overflow-wrap: anywhere;
}
.ai-queue-payload {
    color: var(--text);
    font-size: 12px;
    line-height: 1.5;
    /* Payload summaries carry id lists with no spaces to break on. */
    overflow-wrap: anywhere;
}
.ai-queue-usage {
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.5;
    /* Model names run long and carry no spaces to break on. */
    overflow-wrap: anywhere;
}
.ai-queue-error {
    margin-top: 6px;
    color: var(--hard);
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.ai-queue-details {
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 12px;
}
.ai-queue-details pre {
    margin: 8px 0 0;
    max-height: 220px;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px;
    background: var(--surface);
    color: var(--text);
    font-size: 12px;
    white-space: pre-wrap;
}
@media (max-width: 760px) {
    .daily-news-control-grid { grid-template-columns: 1fr; }
    .daily-news-level-duration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ai-queue-filters,
    .ai-queue-row { grid-template-columns: 1fr; }
    .ai-queue-actions { width: 100%; }
}
@media (max-width: 480px) {
    .daily-news-level-duration-grid { grid-template-columns: 1fr; }
}
.reader-article-modal-card {
    max-width: 760px;
    max-height: 82vh;
    padding: 0;
    gap: 0;
    overflow: hidden;
}
.reader-article-modal-card .task-detail-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}
.reader-article-modal-meta {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 400;
}
.reader-article-content-tabs {
    margin: 10px 16px 0;
}
.reader-article-modal-body {
    max-height: calc(82vh - 126px);
    border: 0;
    line-height: 1.55;
    white-space: normal;
}
.reader-article-modal-body,
.reader-article-modal-body *,
.reader-article-listening-body,
.reader-article-listening-body * {
    user-select: text !important;
    -webkit-user-select: text !important;
}
.reader-reading-article-text {
    white-space: pre-wrap;
    margin-bottom: 10px;
}
.reader-story-blank {
    padding: 0 2px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--accent) 28%, transparent);
    color: var(--text);
    font-weight: 700;
}
.reader-reading-question-section {
    border-top: 1px solid var(--border);
    padding-top: 8px;
}
.reader-reading-question-section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    cursor: pointer;
    user-select: none;
}
.reader-reading-question-section[open] .reader-reading-question-section-title {
    margin-bottom: 8px;
}
.reader-reading-question-cards {
    display: grid;
    gap: 8px;
}
.reader-reading-question-card {
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface-2);
    padding: 8px 10px;
}
.reader-reading-question-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}
.reader-reading-question-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
}
.reader-reading-question-meta {
    font-size: 10px;
    color: var(--text-muted);
    text-align: right;
    flex-shrink: 0;
}
.reader-article-question-list {
    display: grid;
    gap: 0;
}
.reader-article-question {
    padding: 7px 0;
    border-top: 1px solid var(--border);
}
.reader-article-question:first-child {
    border-top: 0;
    padding-top: 0;
}
.reader-article-question:last-child {
    padding-bottom: 0;
}
.reader-article-question-title {
    font-size: 12px;
    line-height: 1.45;
    color: var(--text);
}
.reader-article-question-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3px;
    margin-top: 4px;
}
.reader-article-question-option {
    font-size: 11px;
    line-height: 1.45;
    color: var(--text-muted);
    padding: 3px 6px;
    border-radius: 4px;
    background: var(--surface);
}
.reader-article-question-option.is-answer {
    color: #22c55e;
    background: rgba(34,197,94,0.12);
}
@media (max-width: 700px) {
    .reader-reading-question-head {
        display: block;
    }
    .reader-reading-question-meta {
        margin-top: 2px;
        text-align: left;
    }
}
.reader-article-listening-body {
    max-height: calc(82vh - 126px);
    overflow-y: auto;
    padding: 12px 16px 16px;
    background: var(--surface);
}
.reader-listening-content-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    padding: 12px;
    margin-bottom: 10px;
}
.reader-listening-content-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.reader-listening-content-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}
.reader-listening-content-meta {
    font-size: 11px;
    color: var(--text-muted);
}
.reader-listening-transcript {
    white-space: pre-wrap;
    font-size: 13px;
    line-height: 1.7;
    color: var(--text);
}
.reader-listening-audio {
    width: 100%;
    margin: 8px 0;
}
.reader-listening-empty {
    padding: 24px 0;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

/* ── Per-user grammar scope adjustments ── */
.grammar-scope-hint {
    font-size: 12px;
    line-height: 1.7;
    color: var(--text-muted);
}

.grammar-scope-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}

.grammar-scope-toolbar .form-group {
    margin-bottom: 0;
    min-width: 140px;
}

.grammar-scope-target-field {
    flex: 1 1 240px;
}

.grammar-scope-group-field {
    flex: 0 1 200px;
}

.grammar-scope-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.grammar-scope-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.grammar-scope-chip {
    padding: 3px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    font-size: 12px;
    color: var(--text-muted);
}

.grammar-scope-chip strong {
    color: var(--text);
}

.grammar-scope-chip.added strong {
    color: var(--success, #22c55e);
}

.grammar-scope-chip.removed strong {
    color: var(--warning, #f59e0b);
}

.grammar-scope-chip.dirty {
    border-color: var(--warning, #f59e0b);
    color: var(--warning, #f59e0b);
}

.grammar-scope-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.grammar-scope-filters .form-select {
    width: auto;
    min-width: 120px;
}

.grammar-scope-filters .form-input {
    width: auto;
    min-width: 200px;
}

.grammar-scope-filter-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
}

.grammar-scope-warn {
    color: var(--warning, #f59e0b);
}

.grammar-scope-tristate {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}

.grammar-scope-state-btn {
    padding: 3px 10px;
    border: 0;
    border-right: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
}

.grammar-scope-state-btn:last-child {
    border-right: 0;
}

.grammar-scope-state-btn:hover {
    background: var(--surface-2);
}

.grammar-scope-state-btn.active {
    color: #fff;
    background: var(--text-muted);
}

.grammar-scope-state-btn.learned.active {
    background: var(--success, #22c55e);
}

.grammar-scope-state-btn.not_learned.active {
    background: var(--warning, #f59e0b);
}

.grammar-scope-state-btn.passed.active {
    background: #2563eb;
}

/* 语法学习 gave up on this point; the teacher decides what happens next. */
.grammar-scope-failed {
    display: inline-flex;
    align-items: center;
    margin-right: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: #dc2626;
}

.grammar-scope-row-failed td {
    background: color-mix(in srgb, #dc2626 8%, transparent);
}

.grammar-scope-chip.failed {
    color: #b91c1c;
    border-color: #fca5a5;
}

.grammar-scope-row-adjusted td {
    background: color-mix(in srgb, var(--warning, #f59e0b) 8%, transparent);
}

.grammar-scope-effective {
    font-size: 11px;
    font-weight: 600;
}

.grammar-scope-effective.learned {
    color: var(--success, #22c55e);
}

.grammar-scope-effective.not_learned {
    color: var(--text-muted);
}

.grammar-scope-chain {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
}

.grammar-scope-chain-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text);
}

.grammar-scope-chain-row.muted {
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-muted);
}

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

.grammar-scope-chain-skill {
    font-weight: 600;
}

.grammar-scope-chain-meta {
    font-weight: 400;
    font-size: 12px;
    color: var(--text-muted);
}

.grammar-scope-chain-state {
    margin-left: auto;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
}

.grammar-scope-chain-state.ok {
    color: var(--success, #22c55e);
    background: color-mix(in srgb, var(--success, #22c55e) 12%, transparent);
}

.grammar-scope-chain-state.blocked {
    color: var(--text-muted);
    background: var(--surface);
}

/* ── Grammar mastery (掌握度): 语法点调整 states, 语法学习 records ─────────────
   The four state colours match 语法点调整's buttons. */
#registryTabMastery {
    --gm-learned: #4ade80;
    --gm-not-learned: #fbbf24;
    --gm-passed: #60a5fa;
}

[data-theme="light"] #registryTabMastery {
    --gm-learned: #15803d;
    --gm-not-learned: #b45309;
    --gm-passed: #1d4ed8;
}

.grammar-mastery-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    font-size: 12px;
    color: var(--text-muted);
}

.grammar-mastery-legend-active::before,
.grammar-mastery-cell.is-active::after {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gm-passed);
}

.grammar-mastery-legend-active::before {
    margin-right: 4px;
}

.grammar-mastery-state {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.grammar-mastery-state.learned,
.grammar-mastery-cell.learned {
    color: var(--gm-learned);
    background: color-mix(in srgb, var(--gm-learned) 16%, transparent);
}

.grammar-mastery-state.not_learned,
.grammar-mastery-cell.not_learned {
    color: var(--gm-not-learned);
    background: color-mix(in srgb, var(--gm-not-learned) 18%, transparent);
}

.grammar-mastery-state.passed,
.grammar-mastery-cell.passed {
    color: var(--gm-passed);
    background: color-mix(in srgb, var(--gm-passed) 16%, transparent);
}

.grammar-mastery-state.failed,
.grammar-mastery-cell.failed {
    color: #fff;
    background: #dc2626;
}

.grammar-mastery-count.learned strong {
    color: var(--gm-learned);
}

.grammar-mastery-count.not_learned strong {
    color: var(--gm-not-learned);
}

.grammar-mastery-count.passed strong {
    color: var(--gm-passed);
}

.grammar-mastery-muted {
    font-size: 11px;
    color: var(--text-muted);
}

.grammar-mastery-step {
    margin-left: 4px;
    font-size: 11px;
    color: var(--gm-passed);
    white-space: nowrap;
}

.grammar-mastery-step.generation_failed {
    color: #dc2626;
}

.grammar-mastery-order {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    text-align: center;
}

.grammar-mastery-num {
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Group: one row per point, one column per learner. */
.grammar-mastery-matrix-wrap {
    max-height: 640px;
    overflow: auto;
}

.grammar-mastery-matrix {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
}

.grammar-mastery-matrix th,
.grammar-mastery-matrix td {
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
}

.grammar-mastery-matrix thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 8px 6px;
    background: var(--surface-2);
    vertical-align: bottom;
}

.grammar-mastery-matrix .grammar-mastery-point {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 220px;
    max-width: 300px;
    padding: 6px 10px;
    text-align: left;
    font-weight: 500;
    color: var(--text);
    background: var(--surface);
}

.grammar-mastery-matrix thead .grammar-mastery-point {
    z-index: 3;
    background: var(--surface-2);
}

.grammar-mastery-point .grammar-mastery-order {
    display: inline-block;
    min-width: 52px;
    margin-right: 6px;
    text-align: left;
}

.grammar-mastery-progress {
    min-width: 64px;
    padding: 4px 8px;
    text-align: center;
    white-space: nowrap;
    color: var(--text-muted);
}

.grammar-mastery-progress strong {
    color: var(--gm-passed);
}

.grammar-mastery-progress-failed {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: #dc2626;
}

.grammar-mastery-member {
    min-width: 72px;
    text-align: center;
}

.grammar-mastery-member-name {
    display: block;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

.grammar-mastery-member-meta {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    font-weight: 400;
    color: var(--gm-passed);
    white-space: nowrap;
}

.grammar-mastery-member-meta.off {
    color: var(--text-muted);
}

.grammar-mastery-cell {
    position: relative;
    height: 34px;
    padding: 2px 4px;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    background: var(--surface);
    cursor: default;
}

.grammar-mastery-cell.unmarked {
    color: var(--text-muted);
}

.grammar-mastery-cell small {
    display: block;
    font-size: 10px;
    font-weight: 400;
    opacity: 0.85;
    font-variant-numeric: tabular-nums;
}

.grammar-mastery-cell.is-active::after {
    position: absolute;
    top: 3px;
    right: 3px;
}

/* ─── DOMAIN MANAGEMENT CENTRES ─────────────────────────────── */
/* The centres set their own family (CJK-first) and run on the 13px body step,
   so .btn-sm (12px) and .btn-xs (11px) keep their one- and two-notch drop
   without per-section overrides. */
.mgmt-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#sec-vocab .mgmt-shell,
#sec-speaking .mgmt-shell {
    font-family: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Inter', sans-serif;
    font-size: 13px;
    line-height: 1.55;
}

#sec-vocab .form-select,
#sec-vocab .form-input,
#sec-vocab .form-textarea,
#sec-vocab .btn-primary,
#sec-vocab .btn-ghost,
#sec-speaking .form-select,
#sec-speaking .form-input,
#sec-speaking .form-textarea,
#sec-speaking .btn-primary,
#sec-speaking .btn-ghost {
    font-family: inherit;
}

/* 语法 joined the management centres with its whole legacy assignment UI intact
   inside 创建任务. That panel has its own typography — workflow steps, the JSON
   table, the schedule grid — so the shell's type scale is applied to the panels
   that are actually new rather than to the shell, which would restyle a working
   form as a side effect of moving it. */
#sec-grammar .mgmt-filters,
#sec-grammar .mgmt-tabs,
#sec-grammar .mgmt-meta,
#sec-grammar #gmPanelOverview,
#sec-grammar #gmPanelTasks {
    font-family: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Inter', sans-serif;
    font-size: 13px;
    line-height: 1.55;
}

/* 阅读 joined on the same terms: 创建任务 still holds the article/question loader
   with its own tab switcher, so the shell's type scale stops at the new panels. */
#sec-reading .mgmt-filters,
#sec-reading .mgmt-tabs,
#sec-reading .mgmt-meta,
#sec-reading #rmPanelOverview,
#sec-reading #rmPanelTasks {
    font-family: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Inter', sans-serif;
    font-size: 13px;
    line-height: 1.55;
}

.mgmt-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
}

.mgmt-filter {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 6px;
}

.mgmt-filter-label {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}

.mgmt-filter-actions {
    align-self: end;
}

.mgmt-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.mgmt-tab {
    flex: 0 0 auto;
    padding: 9px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.mgmt-tab.active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 13%, var(--surface));
    color: var(--accent);
}

.mgmt-meta,
.mgmt-score-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    color: var(--text-muted);
    font-size: 12px;
}

.mgmt-panel {
    display: none;
    min-width: 0;
}

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

.mgmt-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.mgmt-kpi,
.mgmt-card {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
}

.mgmt-kpi {
    padding: 16px;
}

.mgmt-kpi.is-warning {
    border-color: color-mix(in srgb, var(--warning, #f59e0b) 55%, var(--border));
}

.mgmt-kpi.is-danger {
    border-color: color-mix(in srgb, var(--hard, #ef4444) 55%, var(--border));
}

.mgmt-kpi-value {
    color: var(--text);
    font-size: 24px;
    font-weight: 800;
}

.mgmt-kpi-label {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 12px;
}

.mgmt-card {
    padding: 18px;
    margin-bottom: 16px;
}

.mgmt-card-title {
    margin-bottom: 12px;
    color: var(--text);
    font-size: 14px;
    font-weight: 800;
}

.mgmt-card-subtitle {
    margin: 16px 0 8px;
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
}

.mgmt-mini-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    margin: 12px 0;
}

.mgmt-mini-item {
    min-width: 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--surface-2);
}

.mgmt-mini-item span {
    display: block;
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: 12px;
}

.mgmt-mini-item strong {
    color: var(--text);
    font-size: 13px;
}

.mgmt-memory-signals,
.mgmt-reader-summary {
    margin-bottom: 10px;
}

.mgmt-memory-signals strong,
.mgmt-reader-summary strong {
    color: var(--text);
}

.mgmt-table.mgmt-table-compact {
    min-width: 520px;
}

.mgmt-reader-chart {
    min-width: 0;
    margin-top: 12px;
}

.mgmt-reader-chart-scroll {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.mgmt-reader-chart-svg {
    display: block;
    width: 100%;
    height: auto;
    min-height: 120px;
    overflow: visible;
}

.mgmt-reader-chart-svg .grid {
    stroke: var(--border);
    stroke-width: 1;
    opacity: 0.65;
}

.mgmt-reader-chart-svg .axis-label {
    fill: var(--text-muted);
    font-size: 10px;
}

.mgmt-reader-chart-svg .trend-line {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mgmt-reader-chart-svg .trend-point {
    fill: var(--accent);
    stroke: var(--surface);
    stroke-width: 1.8;
}

.mgmt-reader-chart-svg .duration-label {
    fill: var(--text);
    font-size: 9px;
    font-weight: 700;
}

.mgmt-danger-zone {
    border-color: color-mix(in srgb, var(--hard, #ef4444) 45%, var(--border));
    background: color-mix(in srgb, var(--hard, #ef4444) 4%, var(--surface));
}

.mgmt-danger-zone .mgmt-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.mgmt-danger-zone .is-danger {
    border-color: color-mix(in srgb, var(--hard, #ef4444) 55%, var(--border));
    color: var(--hard, #ef4444);
}

.mgmt-table-wrap,
.mgmt-table-scroll {
    width: 100%;
    overflow-x: auto;
}

.mgmt-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    font-size: 13px;
}

.mgmt-table th,
.mgmt-table td {
    padding: 10px 9px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    text-align: left;
    vertical-align: top;
}

.mgmt-table th {
    color: var(--text-muted);
    font-weight: 700;
    white-space: nowrap;
}

/* 操作列. Until 阅读任务 grew 作废 / 重新指派 / 删除任务 this cell only ever held
   一个「详情」，so several buttons wrapped against each other with no gap.
   Applies to every management centre's queue, not just reading. */
.mgmt-table td.mgmt-actions {
    min-width: 132px;
}

.mgmt-table td.mgmt-actions > * {
    margin: 0 6px 4px 0;
}

.mgmt-state,
.mgmt-note,
.mgmt-partial {
    padding: 14px 16px;
    border-radius: 12px;
    color: var(--text-muted);
    font-size: 13px;
}

.mgmt-state,
.mgmt-note {
    border: 1px dashed var(--border);
    background: var(--surface-2);
}

.mgmt-state.is-error,
.mgmt-partial {
    border: 1px solid color-mix(in srgb, var(--hard, #ef4444) 35%, var(--border));
    background: color-mix(in srgb, var(--hard, #ef4444) 8%, var(--surface));
    color: var(--hard, #ef4444);
}

.mgmt-alerts {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
}

.mgmt-alert {
    padding: 10px 12px;
    border-left: 3px solid var(--accent);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 13px;
}

.mgmt-alert.is-warning {
    border-left-color: var(--warning, #f59e0b);
}

.mgmt-alert.is-danger,
.mgmt-alert.is-error {
    border-left-color: var(--hard, #ef4444);
}

.mgmt-pill,
.mgmt-chip {
    display: inline-flex;
    align-items: center;
    margin: 1px 4px 1px 0;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.mgmt-pill.st-completed {
    background: color-mix(in srgb, var(--success, #22c55e) 14%, var(--surface));
    color: var(--success, #22c55e);
}

.mgmt-pill.st-expired,
.mgmt-chip.is-warning {
    background: color-mix(in srgb, var(--warning, #f59e0b) 14%, var(--surface));
    color: var(--warning, #f59e0b);
}

.mgmt-task-id {
    max-width: 250px;
    overflow: hidden;
    color: var(--text);
    font-family: 'Roboto Mono', monospace;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mgmt-task-sub,
.mgmt-error-list,
.muted {
    color: var(--text-muted);
    font-size: 12px;
}

#sec-vocab .admin-card-title,
#sec-speaking .admin-card-title {
    color: var(--text);
    font-size: 14px;
    letter-spacing: 0;
    text-transform: none;
}

#sec-vocab .form-label,
#sec-speaking .form-label {
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
}

.mgmt-policy-grid {
    display: grid;
    gap: 8px;
    margin-bottom: 18px;
}

.mgmt-policy-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.mgmt-policy-row small {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--text-muted);
}

/* The label carries a sentence now, so it takes the slack and the value keeps
   one right-aligned column. */
.mgmt-policy-row > span:first-child {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    font-weight: 500;
}

/* Nothing on this panel is bold. Every row is label + value, so weight cannot
   sort them — the label reads at 500, the value at 400 in full-strength ink,
   and the hint drops to 12px muted. Bold here would just be noise on all
   three dozen rows at once. */
.mgmt-policy-value {
    flex: 0 0 auto;
    max-width: 62%;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text);
    text-align: right;
    overflow-wrap: anywhere;
}

/* Counts read across rows, so the digits are tabular; the CJK stack sits behind
   the mono face so the 个/题 do not fall into a system monospace. */
.mgmt-policy-value--metric {
    font-family: 'Roboto Mono', 'PingFang SC', 'Hiragino Sans GB',
        'Microsoft YaHei', 'Noto Sans SC', monospace;
    font-variant-numeric: tabular-nums;
}

/* An opaque identifier, only ever copied into a bug report: monospace so it can
   be read character by character, muted so it stops competing with the rows
   that carry meaning. */
.mgmt-policy-value--id {
    font-family: 'Roboto Mono', 'Courier New', monospace;
    font-size: 12px;
    color: var(--text-muted);
    user-select: all;
}

/* Sits where the boolean rows put their toggle button, at the same density. */
.mgmt-policy-select {
    width: auto;
    min-width: 190px;
    padding: 6px 10px;
    font-size: 13px;
}

.mgmt-policy-select:disabled {
    opacity: 0.55;
    cursor: progress;
}

.mgmt-turn {
    padding: 10px 12px;
    margin-bottom: 8px;
    border-radius: 10px;
    background: var(--surface-2);
}

.mgmt-turn.is-user {
    border-left: 3px solid var(--accent);
}

.mgmt-turn audio {
    width: min(100%, 420px);
    margin-top: 8px;
}

.mgmt-source-text {
    margin-top: 10px;
    padding: 12px;
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--text);
    line-height: 1.65;
    white-space: pre-wrap;
}

.mgmt-source-text.is-translation {
    color: var(--text-muted);
}

@media (max-width: 760px) {
    .mgmt-filters {
        grid-template-columns: 1fr 1fr;
    }

    .mgmt-card,
    .mgmt-kpi {
        padding: 14px;
    }
}

@media (max-width: 480px) {
    .mgmt-filters {
        grid-template-columns: 1fr;
    }
}
.jq-vocab-gloss {
    color: var(--text-muted);
    font-size: 0.88em;
    font-weight: 500;
    white-space: nowrap;
}

/* ── Material studio (reading / listening generation) ─────────────────── */

.material-studio {
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 12px;
    background: var(--surface);
}

.material-studio > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
}

.material-studio > summary small {
    color: var(--text-muted);
    font-weight: 500;
}

.material-studio-body {
    padding: 0 12px 12px;
    display: grid;
    gap: 10px;
}

.material-source-panel {
    display: none;
    gap: 8px;
}

.material-source-panel.active {
    display: grid;
}

.material-source-panel textarea.form-input {
    width: 100%;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
}

.material-studio-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}

.material-studio-controls label {
    display: grid;
    gap: 4px;
    font-size: 12px;
    color: var(--text-muted);
}

/* Native <option> rows cannot contain an independently clickable delete
   control. Keep the select as the task form's value owner, and present the
   published reading library as an accessible custom list beside it. */
#readingFileSelect {
    display: none;
}

.reading-file-list {
    display: grid;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
}

.reading-file-list-empty {
    padding: 11px 14px;
    color: var(--text-muted);
    font-size: 13px;
}

.reading-file-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36px;
    align-items: stretch;
    border-bottom: 1px solid var(--border);
}

.reading-file-row:last-child {
    border-bottom: 0;
}

.reading-file-choice,
.reading-file-delete {
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.reading-file-choice {
    min-width: 0;
    padding: 10px 14px;
    color: var(--text);
    text-align: left;
    overflow-wrap: anywhere;
}

.reading-file-choice:hover,
.reading-file-choice.active {
    color: var(--accent);
    background: var(--accent-glow);
}

.reading-file-delete {
    color: #e53935;
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
    border-left: 1px solid var(--border);
}

.reading-file-delete:hover,
.reading-file-delete:focus-visible {
    color: #fff;
    background: #d32f2f;
    outline: none;
}

.reading-file-delete:disabled {
    opacity: 0.4;
    cursor: wait;
}

.material-preview-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    display: grid;
    gap: 10px;
}

.material-preview-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0;
}

.material-preview-meta dt {
    font-size: 11px;
    color: var(--text-muted);
}

.material-preview-meta dd {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
}

.material-preview-warnings {
    margin: 0;
    padding-left: 18px;
    color: var(--warning, #b26a00);
    font-size: 12px;
}

.material-preview-body {
    margin: 0;
    max-height: 220px;
    overflow: auto;
    padding: 8px;
    background: var(--surface-muted, rgba(127, 127, 127, .08));
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

.material-publish-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}

.material-publish-row label {
    display: grid;
    gap: 4px;
    font-size: 12px;
    color: var(--text-muted);
}

.material-publish-row .form-input[type="number"] {
    width: 150px;
}

/* ── Learning-board charts ────────────────────────────────────────────────
   Colours come only from common.css tokens: a literal would read correctly in
   one theme and wrong in the other. Wide charts scroll inside their own box so
   the admin page itself never scrolls sideways. */

.lb-chart-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.lb-chart-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
    min-width: 0;
}

.lb-chart-card-wide {
    grid-column: 1 / -1;
}

/* A column packs its own cards tight; the grid only places the columns.
 *
 * 两列的卡片数量不一样（左列是 活动趋势 + 正确率分布，右列只有 模块健康），
 * 所以两列的自然高度没有任何关系，底边对齐只能靠巧合。让格子把两列拉到同高，
 * 再由每列的最后一张卡吸收掉差额——长高的是卡片这个盒子，里面的图表和条形
 * 仍然按自己的内容排布、顶部对齐。被拉伸的是留白，不是数据。 */
.lb-chart-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.lb-chart-col > .lb-chart-card:last-child {
    flex: 1;
}

.lb-chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

.lb-chart-title {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}

.lb-chart-chip {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px 8px;
    white-space: nowrap;
}

.lb-chart-empty,
.lb-chart-more {
    color: var(--text-muted);
    font-size: 12px;
    padding: 10px 0;
}

.lb-chart-scroll {
    overflow-x: auto;
    overflow-y: hidden;
}

.lb-chart-svg {
    /* Drawn at its own size, never stretched to the card: scaling the viewBox
       up blows the bars and labels out of proportion with the rest of the
       board. A chart wider than the card scrolls inside .lb-chart-scroll. */
    display: block;
    flex: none;
}

.lb-chart-svg .lb-grid {
    stroke: var(--border);
    stroke-width: 1;
}

.lb-chart-svg .lb-axis {
    stroke: var(--border);
    stroke-width: 1;
}

.lb-chart-svg .lb-axis-label {
    fill: var(--text-muted);
    font-size: 9px;
}

.lb-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 10px;
    font-size: 11px;
    color: var(--text-muted);
}

.lb-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.lb-swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
}

/* One colour per series, used by both the swatch and the bar. */
.lb-bar-issued  { fill: var(--text-muted); background: var(--text-muted); }
.lb-bar-completed { fill: var(--accent); background: var(--accent); }
.lb-bar-expired { fill: var(--hard); background: var(--hard); }
/* 自主学习 is neither part of the funnel nor a failure, so it gets its own
   colour rather than borrowing 已完成's. */
.lb-bar-self { fill: var(--easy); background: var(--easy); }

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

.lb-module-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 6px;
}

.lb-module-block + .lb-module-block {
    border-top: 1px solid var(--border);
    padding-top: 10px;
}

.lb-bar-row {
    display: grid;
    grid-template-columns: minmax(64px, 92px) 1fr minmax(72px, auto);
    align-items: center;
    gap: 10px;
    font-size: 12px;
}

.lb-bar-label {
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lb-bar-track {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    overflow: hidden;
}

.lb-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 200ms ease;
}

.lb-fill-completion { background: var(--accent); }
.lb-fill-accuracy   { background: var(--blue-accent); }
.lb-fill-weak       { background: var(--medium); }
.lb-fill-abandoned  { background: var(--hard); }
.lb-band-low        { background: var(--hard); }
.lb-band-mid        { background: var(--medium); }
.lb-band-high       { background: var(--easy); }

.lb-bar-meta {
    color: var(--text-muted);
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.lb-chart-subhead {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    margin: 12px 0 6px;
}

.lb-chain-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lb-chain-row {
    display: grid;
    grid-template-columns: minmax(56px, 88px) 1fr minmax(48px, auto) minmax(56px, auto);
    align-items: center;
    gap: 10px;
    font-size: 12px;
    padding: 4px 0;
}

.lb-chain-row + .lb-chain-row {
    border-top: 1px solid var(--border);
}

.lb-chain-user,
.lb-chain-skill {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lb-chain-status,
.lb-chain-time {
    color: var(--text-muted);
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.lb-followup-list,
.lb-learner-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lb-followup-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.lb-followup-open {
    display: grid;
    grid-template-columns: minmax(56px, 96px) 1fr minmax(56px, auto) minmax(72px, auto);
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 8px 10px;
    color: var(--text);
    font-size: 12px;
    cursor: pointer;
}

.lb-followup-open:hover,
.lb-followup-open:focus-visible {
    background: var(--surface);
    border-color: var(--border);
}

/* 「已跟进」——只改这台浏览器上的队列排布，不写任何学生可见的状态。 */
.lb-followup-done {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
}

.lb-followup-done:hover,
.lb-followup-done:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
}

/* 需关注学员 / 模块间冲突 */
.lb-attention-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lb-attention-row {
    display: grid;
    grid-template-columns: minmax(64px, 120px) 1fr;
    align-items: baseline;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 10px;
    font-size: 12px;
}

.lb-attention-row.is-conflict {
    background: color-mix(in srgb, var(--hard, #ef4444) 7%, transparent);
}

.lb-attention-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.lb-attention-reasons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: baseline;
}

.lb-attention-chip {
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-muted);
    white-space: nowrap;
}

/* 第一条理由就是最重的那条，给它一点重量。 */
.lb-attention-reasons .lb-attention-chip:first-child {
    border-color: color-mix(in srgb, var(--hard, #ef4444) 45%, var(--border));
    color: var(--hard, #ef4444);
}

.lb-attention-chip.is-conflict {
    border-color: color-mix(in srgb, var(--hard, #ef4444) 45%, var(--border));
    color: var(--hard, #ef4444);
}

.lb-conflict-detail {
    color: var(--text-muted);
}

.lb-followup-user,
.lb-followup-title,
.lb-learner-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lb-followup-score,
.lb-followup-time,
.lb-learner-meta,
.lb-learner-acc {
    color: var(--text-muted);
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.lb-learner-row,
.lb-learner-head {
    display: grid;
    grid-template-columns: minmax(64px, 120px) 84px auto 1fr minmax(48px, auto);
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 12px;
}

.lb-learner-head {
    color: var(--text-muted);
    font-size: 11px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
}

.lb-learner-row + .lb-learner-row {
    border-top: 1px solid var(--border);
}

/* 模块构成。列宽固定，于是同一个模块在每一行都落在同一个横向位置——
   偏科读出来是一整列的空白，而不是要逐行比对的一堆数字。 */
.lb-learner-mods {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 30px;
    gap: 3px;
}

.lb-mod-cell {
    padding: 2px 0;
    border-radius: 4px;
    font-size: 11px;
    line-height: 1.45;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    font-variant-numeric: tabular-nums;
}

.lb-learner-head .lb-mod-cell {
    color: var(--text-muted);
}

.lb-mod-0 {
    color: var(--text-muted);
    opacity: 0.5;
}

.lb-mod-1 {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--text);
}

.lb-mod-2 {
    background: color-mix(in srgb, var(--accent) 38%, transparent);
    color: var(--text);
}

.lb-mod-3 {
    background: var(--accent);
    color: var(--chip-ink);
}

.lb-spark {
    width: 84px;
    height: 20px;
}

.lb-spark polyline {
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

@media (max-width: 1023px) {
    .lb-chart-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 599px) {
    .lb-bar-row {
        grid-template-columns: minmax(56px, 76px) 1fr minmax(56px, auto);
        gap: 8px;
    }

    .lb-followup-open {
        grid-template-columns: minmax(48px, 72px) 1fr minmax(48px, auto);
    }

    .lb-followup-time {
        display: none;
    }

    /* 30px × 6 列在手机上挤掉了名字和完成率，而那两个是这一行的主语。 */
    .lb-learner-row {
        grid-template-columns: minmax(56px, 1fr) 84px minmax(44px, auto);
    }

    .lb-learner-head,
    .lb-learner-mods,
    .lb-learner-acc {
        display: none;
    }

    .lb-chain-row {
        grid-template-columns: minmax(48px, 72px) 1fr minmax(44px, auto);
    }

    .lb-chain-time {
        display: none;
    }

    /* 窄屏下理由换行到名字下面，比把理由截断有用。 */
    .lb-attention-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lb-bar-fill {
        transition: none;
    }
}

/* ── Structured vocabulary editor ─────────────────────────────────────── */
.vocab-quality-card {
    display: grid;
    gap: 14px;
    margin-bottom: 20px;
}

.vocab-quality-head,
.vocab-quality-toolbar,
.vocab-quality-row,
.vocab-quality-row-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.vocab-quality-head {
    justify-content: space-between;
}

.vocab-quality-toolbar {
    flex-wrap: wrap;
}

.vocab-quality-toolbar label {
    display: grid;
    grid-template-columns: auto minmax(150px, 220px);
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 12px;
}

.vocab-quality-list {
    display: grid;
    gap: 8px;
}

.vocab-quality-row {
    width: 100%;
    justify-content: space-between;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface-2);
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.vocab-quality-row:hover,
.vocab-quality-row.active {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
    background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
}

.vocab-quality-word {
    min-width: 110px;
    font-weight: 700;
}

.vocab-quality-row-meta {
    flex: 1;
    flex-wrap: wrap;
    color: var(--text-muted);
    font-size: 11px;
}

.vocab-quality-badge {
    padding: 2px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--warning, #f59e0b) 12%, transparent);
    color: var(--warning, #a15c00);
}

.vocab-quality-badge.error {
    background: color-mix(in srgb, var(--danger, #b42318) 12%, transparent);
    color: var(--danger, #b42318);
}

.vocab-quality-more {
    justify-self: center;
}

.vocab-structured-editor {
    display: grid;
    gap: 16px;
}

.vocab-structured-summary {
    display: grid;
    gap: 14px;
}

.vocab-structured-summary-row,
.vocab-pos-nav-head,
.vocab-pos-editor-head,
.vocab-content-block-head,
.vocab-content-section-head,
.vocab-structured-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.vocab-structured-meta,
.vocab-pos-editor-hint {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 12px;
}

.vocab-structured-cefr {
    display: grid;
    grid-template-columns: auto 110px;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 12px;
}

.vocab-reference-field {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vocab-reference-status {
    min-height: 18px;
    color: var(--text-muted);
    font-size: 12px;
}

.vocab-structured-global-fields,
.vocab-structured-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.vocab-structured-global-fields label,
.vocab-structured-field {
    display: grid;
    align-content: start;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 12px;
}

.vocab-structured-global-fields label:last-child,
.vocab-structured-field.wide {
    grid-column: 1 / -1;
}

.vocab-structured-field-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.vocab-structured-input {
    width: 100%;
}

.vocab-input-error,
.vocab-input-error:hover,
.vocab-input-error:focus {
    border-color: var(--danger, #b42318) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger, #b42318) 18%, transparent) !important;
}

textarea.vocab-structured-input {
    min-height: 66px;
    resize: vertical;
}

.vocab-structured-layout {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.vocab-pos-nav {
    position: sticky;
    top: 16px;
    padding: 14px;
}

.vocab-pos-nav-list {
    display: grid;
    gap: 6px;
    margin-top: 12px;
}

.vocab-pos-nav-item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.vocab-pos-nav-item:hover,
.vocab-pos-nav-item.active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

.vocab-pos-issue-count {
    min-width: 20px;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--danger-bg, #fff1f0);
    color: var(--danger, #b42318);
    font-size: 11px;
    text-align: center;
}

.vocab-pos-editor-card {
    min-width: 0;
    padding: 18px;
}

.vocab-pos-editor-actions {
    display: flex;
    gap: 8px;
}

.vocab-content-section-head {
    margin: 22px 0 8px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-size: 13px;
    font-weight: 650;
}

.vocab-content-block {
    margin-bottom: 10px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-raised, var(--surface));
}

.vocab-content-block-head {
    margin-bottom: 12px;
    color: var(--text);
    font-size: 13px;
}

.vocab-inline-action,
.vocab-issue-link {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--accent);
    font: inherit;
    cursor: pointer;
}

.vocab-issue-link.is-error {
    border-color: color-mix(in srgb, var(--danger, #b42318) 55%, var(--border));
    background: color-mix(in srgb, var(--danger, #b42318) 8%, transparent);
    font-weight: 700;
}

.vocab-inline-action:hover,
.vocab-issue-link:hover {
    text-decoration: underline;
}

.vocab-inline-action.danger {
    color: var(--danger, #b42318);
    font-weight: 400;
}

.vocab-structured-issues {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-height: 24px;
    color: var(--text-muted);
    font-size: 12px;
}

.vocab-issue-link {
    padding: 4px 8px;
    border: 1px solid color-mix(in srgb, var(--danger, #b42318) 28%, var(--border));
    border-radius: 999px;
    color: var(--danger, #b42318);
}

.vocab-complete-mark {
    color: var(--success, #18794e);
}

.vocab-empty-row {
    padding: 12px;
    border: 1px dashed var(--border);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
}

.vocab-structured-footer {
    position: sticky;
    bottom: 0;
    z-index: 5;
    justify-content: flex-end;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: blur(10px);
}

.vocab-structured-footer .vocab-mgr-editor-status {
    margin-right: auto;
}

@media (max-width: 900px) {
    .vocab-structured-layout {
        grid-template-columns: 1fr;
    }

    .vocab-pos-nav {
        position: static;
    }

    .vocab-pos-nav-list {
        display: flex;
        flex-wrap: wrap;
    }

    .vocab-pos-nav-item {
        width: auto;
    }
}

@media (max-width: 599px) {
    .vocab-quality-toolbar label {
        width: 100%;
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .vocab-quality-row {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 599px) {
    .vocab-structured-global-fields,
    .vocab-structured-grid {
        grid-template-columns: 1fr;
    }

    .vocab-structured-summary-row,
    .vocab-pos-editor-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .vocab-structured-footer {
        flex-wrap: wrap;
    }
}

.admin-summary-note {
    grid-column: 1 / -1;
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    color: var(--text-secondary, #64748b);
}

/* Independent assignment workspace, sharing one audience across domain forms. */
.assignment-heading,
.assignment-footer,
.assignment-launch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}
.assignment-launch { justify-content: flex-end; }
.assignment-heading p,
.assignment-footer span { color: var(--text-secondary); margin: 0; }
.assignment-types { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.assignment-form { border: 0; padding: 0; margin: 0; min-width: 0; }
.assignment-form[hidden] { display: none; }
.assignment-form > .mgmt-panel { display: block; }
.assignment-native-target { display: none !important; }
.assignment-form-legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.assignment-audience { margin: 16px 0 0; line-height: 1.6; }
.assignment-audience.is-warning { color: var(--hard); }
.assignment-form:disabled .admin-card { opacity: 0.65; }
button.sidebar-nav-item { width: 100%; font-family: inherit; text-align: left; border: 0; border-left: 3px solid transparent; background: transparent; }
button.sidebar-nav-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
@media (max-width: 640px) {
    .assignment-heading, .assignment-footer { align-items: stretch; flex-direction: column; }
    .assignment-launch .btn-primary { width: 100%; }
}
@media (max-width: 767px) {
    .admin-shell:has(#sec-assignment.active) .admin-sidebar { width: 72px; }
    .admin-shell:has(#sec-assignment.active) .sidebar-logo { padding: 0; font-size: 10px; }
    .admin-shell:has(#sec-assignment.active) .admin-content { margin-left: 72px; }
    .admin-shell:has(#sec-assignment.active) .admin-topbar { left: 72px; padding: 0 16px; }
    .admin-shell:has(#sec-assignment.active) .admin-sections-wrap {
        padding: calc(var(--admin-header-height) + 20px) 16px 20px;
    }
    .admin-shell:has(#sec-assignment.active) .sidebar-bottom { padding: 12px 6px; }
    .admin-shell:has(#sec-assignment.active) .btn-logout { padding: 8px 4px; font-size: 12px; }
    #sec-assignment .form-row { grid-template-columns: 1fr; }
    #sec-assignment .admin-card { padding: 20px; }
}

/* ── 排期 toolbar and rows (material-schedule.js) ───────────────────────── */
.cap-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.cap-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 13px;
}

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

.cap-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ── 内容管理 · 发布给学生 (content-management.js) ────────────────────────── */
.content-mgmt-row-published {
    margin-top: 4px;
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
}

.content-mgmt-schedule-card {
    max-width: 720px;
    max-height: 86vh;
    padding: 0;
    gap: 0;
    overflow: hidden;
}

.content-mgmt-schedule-card .task-detail-header {
    align-items: flex-start;
    padding: 18px 20px;
}

.content-mgmt-schedule-card .modal-title {
    text-align: left;
}

#contentMgmtScheduleBody {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.content-mgmt-schedule-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    overflow-y: auto;
}

.content-mgmt-schedule-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 12px;
}

.content-mgmt-schedule-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.content-mgmt-schedule-label {
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
}

.content-mgmt-schedule-grid .form-select,
.content-mgmt-schedule-grid .form-input {
    height: 38px;
    padding-top: 0;
    padding-bottom: 0;
}

/* The light theme's `background` shorthand drops the select chevron. */
[data-theme="light"] .content-mgmt-schedule-grid .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236E675E' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

.content-mgmt-schedule-hint {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 400;
}

.content-mgmt-schedule-inline {
    display: flex;
    gap: 8px;
}

.content-mgmt-schedule-inline .form-select {
    flex: 0 0 auto;
    width: auto;
    min-width: 96px;
}

.content-mgmt-schedule-inline .form-select:only-child {
    flex: 1;
}

.content-mgmt-schedule-inline .form-input {
    flex: 1;
    min-width: 0;
}

.content-mgmt-schedule-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    margin-bottom: 8px;
}

.content-mgmt-schedule-head .btn-ghost {
    margin-left: auto;
}

.content-mgmt-schedule-head .btn-ghost[aria-pressed="true"] {
    border-color: var(--accent);
    color: var(--accent);
}

.content-mgmt-schedule-cefr {
    padding: 1px 8px;
    border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    border-radius: 999px;
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
}

.content-mgmt-schedule-box {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.content-mgmt-schedule-empty {
    padding: 28px 16px;
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
}

.content-mgmt-schedule-all {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.content-mgmt-schedule-all .content-mgmt-schedule-hint {
    margin-left: auto;
}

.content-mgmt-schedule-learners {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 2px 8px;
    max-height: 264px;
    padding: 6px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.content-mgmt-schedule-learner {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 7px 8px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
}

.content-mgmt-schedule-learner:hover {
    background: var(--surface-2);
}

.content-mgmt-schedule-all input,
.content-mgmt-schedule-learner input {
    flex-shrink: 0;
    margin: 0;
    accent-color: var(--accent);
    cursor: inherit;
}

.content-mgmt-schedule-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.content-mgmt-schedule-learner.is-disabled {
    color: var(--text-muted);
    cursor: default;
}

.content-mgmt-schedule-learner.is-disabled:hover {
    background: transparent;
}

.content-mgmt-schedule-level {
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: 12px;
}

.content-mgmt-schedule-level.is-match {
    color: var(--accent);
    font-weight: 700;
}

.content-mgmt-schedule-tag {
    flex-shrink: 0;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 11px;
}

.content-mgmt-schedule-error {
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--hard) 35%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--hard) 8%, transparent);
    color: var(--hard);
    font-size: 13px;
}

.content-mgmt-schedule-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--border);
}

.content-mgmt-schedule-actions .btn-primary {
    min-width: 120px;
}

@media (max-width: 640px) {
    .content-mgmt-schedule-grid {
        grid-template-columns: 1fr;
    }
}

.ms-edit-row td,
.ms-learners-row td {
    background: color-mix(in srgb, var(--accent) 5%, transparent);
}