/*
 * Personal runtime dark theme — canonical design system.
 *
 * This file is loaded by /personal/ and activated only while its runtime
 * theme controller applies .web-night-preview. It deliberately owns the
 * complete night theme instead of layering a sequence of late overrides on
 * top of the day theme. Day mode is not affected.
 */

html.web-night-preview {
    background: #000;
    color-scheme: dark;
}

body.personal-web.web-night-preview {
    --night-page: #000;
    --night-sidebar: #050505;
    --night-main: #080808;
    --night-card: #0d0d0d;
    --night-hover: #141414;
    --night-divider: #1f1f1f;
    --night-border: #242424;
    --night-text: #f5f5f5;
    --night-muted: #a3a3a3;
    --night-faint: #737373;
    --night-soft-text: #d1d5db;
    --night-brand: #4c8dff;
    --night-brand-soft: var(--night-soft-text);
    --night-brand-rgb: 76 141 255;
    --night-radius-control: 12px;
    --night-radius-row: 14px;
    --night-radius-card: 18px;

    /* Fully neutralise the shared day-theme aliases.  Components that were
       not explicitly designed for night mode must never fall back to pale
       blue surfaces or blue-grey borders. */
    --web-accent-primary: var(--night-brand);
    --web-accent-primary-rgb: var(--night-brand-rgb);
    --web-accent-strong: var(--night-brand);
    --web-accent-strong-rgb: var(--night-brand-rgb);
    --web-accent-dark: var(--night-brand);
    --web-accent-dark-rgb: var(--night-brand-rgb);
    --web-accent-ink: var(--night-brand);
    --web-accent-medium: var(--night-brand);
    --web-accent-medium-rgb: var(--night-brand-rgb);
    --web-accent-bright: var(--night-brand);
    --web-accent-surface: var(--night-main);
    --web-accent-surface-rgb: 8 8 8;
    --web-accent-surface-strong: var(--night-card);
    --web-accent-surface-strong-rgb: 13 13 13;
    --web-accent-surface-muted: var(--night-card);
    --web-accent-surface-soft: var(--night-hover);
    --web-accent-light: var(--night-divider);
    --web-accent-light-rgb: 31 31 31;
    --web-accent-light-muted: var(--night-divider);
    --web-accent-border: var(--night-border);
    --web-accent-border-rgb: 36 36 36;
    --web-accent-border-strong: var(--night-border);
    --web-accent-border-strong-rgb: 36 36 36;
    --web-accent-border-soft: var(--night-divider);
    --web-accent-border-soft-alt: var(--night-divider);
    --web-accent-border-muted: var(--night-border);
    --web-accent-page: var(--night-page);
    background: var(--night-page);
    color: var(--night-text);
}

/* Night mode has no permanent glow.  Focus and active states use an edge,
   while primary actions are the only deliberately filled controls. */
body.personal-web.web-night-preview *,
body.personal-web.web-night-preview *::before,
body.personal-web.web-night-preview *::after {
    box-shadow: none !important;
}

body.personal-web.web-night-preview :is(.page, .app-shell, .page-view) {
    background: var(--night-page);
    color: var(--night-text);
}

/* --------------------------------------------------------------------------
 * Foundations: black canvas, neutral surfaces, and three text tiers.
 * -------------------------------------------------------------------------- */
body.personal-web.web-night-preview :is(
    .teacher-sidebar,
    .context-panel,
    .mobile-menu-panel,
    .teacher-sidebar-footer,
    .teacher-follow,
    .context-panel-content
) {
    background: var(--night-sidebar) !important;
    background-image: none !important;
    border-color: var(--night-divider) !important;
    color: var(--night-text);
}

body.personal-web.web-night-preview :is(
    .teacher-card,
    .teacher-account-section,
    .teacher-stats,
    .web-login-card,
    .personal-session-section,
    .stepper-card,
    .section,
    .context-card,
    .personal-generation-picker-panel,
    .student-profiles-page-header,
    .student-profiles-page-toolbar,
    .feedback-records-toolbar,
    .student-profiles-loading-state,
    .student-profiles-page-empty,
    .student-profile-panel,
    .subject-current,
    .generation-options-list,
    .generation-options-classroom-panel,
    .settings-side-card,
    .template-preset-home-grid,
    .data-table-scroll,
    .feedback-record-detail-meta,
    .web-generate-quota-row,
    .performance-panel,
    .account-access-restricted-card
) {
    background: var(--night-card) !important;
    background-image: none !important;
    border-color: var(--night-divider) !important;
    color: var(--night-text);
}

body.personal-web.web-night-preview :is(
    .modal[role="dialog"] > .modal-card,
    .modal-panel,
    .performance-panel,
    .web-login-modal-card,
    .web-login-welcome-card,
    .settings-workspace-card,
    .feedback-export-card,
    .web-config-sync-card,
    .table-customization-card,
    .classroom-status-preset-card,
    .template-workspace-card,
    .my-template-form-card,
    .delete-profile-card
) {
    background: var(--night-card) !important;
    background-image: none !important;
    border: 1px solid var(--night-border) !important;
    border-radius: var(--night-radius-card) !important;
    color: var(--night-text) !important;
}

/* Day mode renders the archived-feedback loader on white paper.  It appears
   in several panels, so it is a first-class night surface rather than a
   one-off modal exception. */
body.personal-web.web-night-preview .student-profiles-loading-state {
    background: var(--night-card) !important;
    border: 1px solid var(--night-border) !important;
    border-radius: var(--night-radius-card) !important;
    color: var(--night-muted) !important;
}

body.personal-web.web-night-preview .student-profiles-loading-state strong {
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview .student-profiles-loading-state span:not(.student-profiles-spinner) {
    color: var(--night-muted) !important;
}

body.personal-web.web-night-preview .student-profiles-spinner {
    border-color: var(--night-divider) !important;
    border-top-color: var(--night-brand) !important;
}

body.personal-web.web-night-preview .student-profiles-page-empty {
    background: var(--night-card) !important;
    border: 1px dashed var(--night-border) !important;
    color: var(--night-muted) !important;
}

body.personal-web.web-night-preview .student-profiles-page-empty strong {
    color: var(--night-text) !important;
}

/* Profile swaps and empty-session placeholders use the same neutral surface
   as the surrounding archive, rather than briefly exposing day-mode paper. */
body.personal-web.web-night-preview :is(.student-profile-loading-line, .personal-session-empty) {
    background: var(--night-card) !important;
    color: var(--night-muted) !important;
}

/* These states are rendered into the current-profile strip after load and
   after sign-out.  They used to retain the day sheet behind their text. */
body.personal-web.web-night-preview :is(
    .current-profile-empty,
    .student-profile-page-recent-empty,
    .student-profile-empty-list
) {
    background: var(--night-card) !important;
    border-color: var(--night-border) !important;
    color: var(--night-muted) !important;
}

body.personal-web.web-night-preview .current-profile-loading-dot {
    border-color: var(--night-divider) !important;
    border-top-color: var(--night-brand) !important;
}

body.personal-web.web-night-preview .student-profile-loading-line :is([data-lucide], svg.lucide),
body.personal-web.web-night-preview .personal-session-empty-icon,
body.personal-web.web-night-preview .personal-session-empty-icon :is([data-lucide], svg.lucide) {
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview .personal-session-empty-icon {
    background: var(--night-card) !important;
    border: 1px solid var(--night-border) !important;
    border-radius: var(--night-radius-control) !important;
}

body.personal-web.web-night-preview .personal-session-empty :is(h3, p) {
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview .personal-session-empty p {
    color: var(--night-muted) !important;
}

body.personal-web.web-night-preview :is(
    .modal-actions,
    .modal-footer,
    .settings-workspace-footer,
    .generation-draft-actions,
    .generation-draft-footer,
    .performance-panel-header,
    .performance-panel-actions,
    .feedback-export-actions
) {
    background: var(--night-card) !important;
    background-image: none !important;
    border-color: var(--night-divider) !important;
}

/* Modal internals follow the same quiet card language as the outer frame.
   Image/QR pixels are intentionally excluded: their own media stays intact. */
body.personal-web.web-night-preview :is(
    .table-view-intro-icon,
    .table-view-intro-list,
    .table-view-intro-subtitle,
    .data-view-cloud-sync-card,
    .table-customize-cloud-card,
    .feedback-export-step,
    .feedback-export-step-content,
    .apply-last-web-option,
    .web-generate-quota-card,
    .web-generate-quota-row,
    .web-quota-insufficient-card,
    .web-quota-insufficient-row,
    .generation-draft-confirm-icon,
    .generation-draft-confirm-card,
    .generation-draft-header,
    .generation-draft-preview-item,
    .generation-draft-error,
    .feedback-image-generator-module,
    .feedback-image-config-panel,
    .feedback-image-result,
    .feedback-image-ready,
    .feedback-image-ready-actions,
    .feedback-image-text-editor,
    .feedback-image-template-options,
    .voice-quick-modal-card,
    .voice-quick-section,
    .voice-quick-waveform,
    .content-safety-modal-card,
    .content-safety-modal-actions,
    .content-safety-guidelines,
    .web-login-welcome-card,
    .follow-qr-card,
    .student-profile-form-card,
    .student-profile-form,
    .lesson-meta-modal-card,
    .lesson-meta-card,
    .lesson-meta-row
) {
    background: var(--night-card) !important;
    border-color: var(--night-border) !important;
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview :is(
    .settings-workspace-title,
    .generation-draft-title,
    .apply-last-web-title,
    .feedback-export-section-title,
    .student-profile-modal-title,
    .lesson-meta-modal-title,
    .feedback-template-modal-title,
    .modal-title
) > :is([data-lucide], svg.lucide) {
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview :is(
    .table-view-intro-list,
    .content-safety-guidelines,
    .feedback-image-config-panel,
    .feedback-image-text-editor,
    .lesson-meta-row,
    .student-profile-form-field
) :is(p, span, small, label) {
    color: var(--night-muted) !important;
}

/* These two flows bring their own pale gradients in day mode.  Keep their
   content and recording semantics, but make the night surfaces quiet black. */
body.personal-web.web-night-preview .account-access-restricted-page {
    background: var(--night-page) !important;
    background-image: none !important;
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview :is(
    .voice-quick-generate-section,
    .voice-quick-waveform,
    .voice-quick-generate-limit
) {
    background: var(--night-card) !important;
    background-image: none !important;
    border-color: var(--night-border) !important;
    box-shadow: none !important;
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview .voice-quick-generate-section::after,
body.personal-web.web-night-preview .voice-quick-waveform::before {
    background: none !important;
}

body.personal-web.web-night-preview .voice-quick-waveform-bar {
    background: var(--night-brand) !important;
}

body.personal-web.web-night-preview .voice-quick-generate-section[data-state="recording"] .voice-quick-waveform {
    background: #090909 !important;
    border-color: #7a3b3e !important;
}

body.personal-web.web-night-preview .voice-quick-generate-section[data-state="recording"] .voice-quick-waveform-bar {
    background: #ff7a86 !important;
}

body.personal-web.web-night-preview :is(h1, h2, h3, h4, h5, h6, strong, b) {
    color: var(--night-text);
}

body.personal-web.web-night-preview :is(
    .subtitle,
    .hint,
    .student-profiles-page-subtitle,
    .student-profiles-page-limit,
    .feedback-records-page-subtitle,
    .feedback-records-page-limit,
    .generation-option-button-desc,
    .template-preset-home-desc,
    .settings-light-tip,
    .context-section-note,
    .web-login-desc,
    .web-login-qr-hint,
    .web-login-sync-tip,
    .web-login-status-text,
    .feedback-export-field-note,
    .template-variable-hint,
    .teacher-follow-copy small
) {
    color: var(--night-faint) !important;
}

body.personal-web.web-night-preview :is(
    .teacher-user-id,
    .teacher-membership-valid,
    .teacher-stat span,
    .teacher-link-heading,
    .teacher-data-title,
    .current-profile-label,
    .current-session-label,
    .lesson-meta-label,
    .student-profile-field > span,
    .student-profile-filter,
    .feedback-record-preview-copy,
    .feedback-record-detail-text,
    .student-profile-page-recent-content,
    .student-profile-page-recent-preview-row,
    .student-profile-page-recent-summary-line
) {
    color: var(--night-muted) !important;
}

body.personal-web.web-night-preview :is(
    .teacher-brand-title,
    .teacher-login-line strong,
    .teacher-stat strong,
    .current-profile-name,
    .current-session-value,
    .student-profile-page-title,
    .feedback-records-page-title,
    .student-profile-page-recent-title,
    .student-profile-page-recent-time,
    .feedback-record-preview-row span,
    .student-profile-page-recent-preview-row span,
    .student-profile-page-recent-summary-line span
) {
    color: var(--night-text) !important;
}

/* Neutral glyphs begin gray.  Functional wayfinding gets the product blue
   in the explicitly-scoped sections below; destructive and warning glyphs
   keep their semantic color. */
body.personal-web.web-night-preview :is([data-lucide], svg.lucide) {
    color: var(--night-muted);
}

body.personal-web.web-night-preview :is(
    .is-error,
    .is-danger,
    .danger-action,
    .teacher-clear-device-data,
    .feedback-record-card-delete,
    .preset-row-delete:not(.is-save),
    .student-profile-card-action.danger,
    .feedback-image-error
) :is([data-lucide], svg.lucide) {
    color: currentColor;
}

body.personal-web.web-night-preview :is(
    .content-safety-modal-icon,
    .web-quota-insufficient-icon,
    .class-action-icon,
    .feedback-image-error
) {
    background: #090909 !important;
    border-color: #7a3b3e !important;
    color: #ffaaa0 !important;
}

/* --------------------------------------------------------------------------
 * Standard controls and form fields.
 * -------------------------------------------------------------------------- */
body.personal-web.web-night-preview :is(
    button,
    .student-profile-icon-btn,
    .student-profile-page-card-icon,
    .student-profile-inline-edit,
    .feedback-record-action,
    .data-table-actions button,
    .performance-cancel-btn,
    .lesson-meta-scope-action,
    .feedback-export-action,
    .web-config-sync-action,
    .generation-options-reset-button,
    .template-workspace-reset-default,
    .classroom-status-preset-footer-btn,
    .preset-add-btn
) {
    background: var(--night-card);
    border-color: var(--night-border);
    color: var(--night-text);
    box-shadow: none !important;
}

body.personal-web.web-night-preview :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    textarea,
    select,
    .student-profile-search,
    .feedback-export-student-search,
    .lesson-chip-editor,
    .compact-field,
    .template-token-editor
) {
    background: var(--night-card) !important;
    border-color: var(--night-border) !important;
    color: var(--night-text) !important;
    box-shadow: none !important;
}

/* Range controls keep the same neutral control language.  The thumb is a
   functional affordance, so it alone carries the product colour. */
body.personal-web.web-night-preview input[type="range"].score-range {
    appearance: none;
    -webkit-appearance: none;
    height: 6px;
    background: var(--night-divider) !important;
    border: 0 !important;
    border-radius: 999px;
}

body.personal-web.web-night-preview input[type="range"].score-range::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    appearance: none;
    -webkit-appearance: none;
    background: var(--night-brand);
    border: 2px solid var(--night-card);
    border-radius: 50%;
}

body.personal-web.web-night-preview input[type="range"].score-range::-moz-range-track {
    height: 6px;
    background: var(--night-divider);
    border: 0;
    border-radius: 999px;
}

body.personal-web.web-night-preview input[type="range"].score-range::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: var(--night-brand);
    border: 2px solid var(--night-card);
    border-radius: 50%;
}

body.personal-web.web-night-preview :is(input, textarea)::placeholder {
    color: var(--night-faint) !important;
    opacity: 1;
}

body.personal-web.web-night-preview :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    textarea,
    select,
    .student-profile-search,
    .feedback-export-student-search,
    .lesson-chip-editor,
    .compact-field,
    .template-token-editor
):is(:focus, :focus-visible, :focus-within) {
    border-color: var(--night-brand) !important;
    outline: none;
    box-shadow: none !important;
}

body.personal-web.web-night-preview :is(
    button,
    .student-profile-icon-btn,
    .student-profile-page-card-icon,
    .student-profile-inline-edit,
    .feedback-record-action,
    .data-table-actions button,
    .performance-cancel-btn,
    .lesson-meta-scope-action,
    .feedback-export-action.secondary,
    .web-config-sync-action.secondary,
    .generation-options-reset-button,
    .template-workspace-reset-default,
    .classroom-status-preset-footer-btn,
    .preset-add-btn
):where(:not(:disabled)):where(:not([aria-disabled="true"], .is-disabled, .is-unavailable, .is-inactive, .is-readonly, .is-fixed-column, .is-hidden-column)):hover,
body.personal-web.web-night-preview :is(
    button,
    .student-profile-icon-btn,
    .student-profile-page-card-icon,
    .student-profile-inline-edit,
    .feedback-record-action,
    .data-table-actions button,
    .performance-cancel-btn,
    .lesson-meta-scope-action,
    .feedback-export-action.secondary,
    .web-config-sync-action.secondary,
    .generation-options-reset-button,
    .template-workspace-reset-default,
    .classroom-status-preset-footer-btn,
    .preset-add-btn
):where(:not(:disabled)):where(:not([aria-disabled="true"], .is-disabled, .is-unavailable, .is-inactive, .is-readonly, .is-fixed-column, .is-hidden-column)):focus-visible {
    background: var(--night-card) !important;
    border-color: var(--night-brand) !important;
    color: var(--night-text) !important;
    outline: none;
}

body.personal-web.web-night-preview :is(
    :disabled,
    [aria-disabled="true"],
    .is-disabled,
    .is-unavailable,
    .is-inactive,
    .is-readonly,
    .is-fixed-column,
    .is-hidden-column
) {
    color: var(--night-faint) !important;
    cursor: not-allowed;
}

body.personal-web.web-night-preview :is(
    :disabled,
    [aria-disabled="true"],
    .is-disabled,
    .is-unavailable,
    .is-inactive,
    .is-readonly,
    .is-fixed-column,
    .is-hidden-column
):hover {
    border-color: var(--night-border) !important;
    background: var(--night-card) !important;
}

body.personal-web.web-night-preview :is(
    button.primary,
    .performance-save-btn,
    .feedback-export-action:not(.secondary),
    .web-config-sync-action.primary,
    .personal-login-workspace-button,
    .feedback-record-action.is-primary
) {
    background: var(--night-brand) !important;
    border-color: var(--night-brand) !important;
    color: #fff !important;
}

body.personal-web.web-night-preview :is(
    button.primary,
    .performance-save-btn,
    .feedback-export-action:not(.secondary),
    .web-config-sync-action.primary,
    .personal-login-workspace-button,
    .feedback-record-action.is-primary
):hover,
body.personal-web.web-night-preview :is(
    button.primary,
    .performance-save-btn,
    .feedback-export-action:not(.secondary),
    .web-config-sync-action.primary,
    .personal-login-workspace-button,
    .feedback-record-action.is-primary
):focus-visible {
    background: var(--night-brand) !important;
    border-color: #9cbeff !important;
    color: #fff !important;
}

body.personal-web.web-night-preview :is(
    button.primary,
    .performance-save-btn,
    .feedback-export-action:not(.secondary),
    .web-config-sync-action.primary,
    .personal-login-workspace-button,
    .feedback-record-action.is-primary
) :is([data-lucide], svg.lucide) {
    color: #fff !important;
}

body.personal-web.web-night-preview :is(
    button.primary.danger-action,
    .feedback-record-card-delete,
    .preset-row-delete:not(.is-save),
    .student-profile-card-action.danger,
    .data-table-actions button.is-danger,
    .feedback-record-action.is-danger
) {
    background: #090909 !important;
    border-color: #6f3639 !important;
    color: #ffaaa0 !important;
}

body.personal-web.web-night-preview :is(
    button.primary.danger-action,
    .feedback-record-card-delete,
    .preset-row-delete:not(.is-save),
    .student-profile-card-action.danger,
    .data-table-actions button.is-danger,
    .feedback-record-action.is-danger
):hover,
body.personal-web.web-night-preview :is(
    button.primary.danger-action,
    .feedback-record-card-delete,
    .preset-row-delete,
    .student-profile-card-action.danger,
    .data-table-actions button.is-danger,
    .feedback-record-action.is-danger
):focus-visible {
    background: #090909 !important;
    border-color: #ef4444 !important;
    color: #ffaaa0 !important;
}

body.personal-web.web-night-preview :is(.preset-row-delete.is-save, .preset-save-btn) {
    background: var(--night-card) !important;
    border-color: var(--night-border) !important;
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview :is(.preset-row-delete.is-save, .preset-save-btn) :is([data-lucide], svg.lucide) {
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview :is(.preset-row-delete.is-save, .preset-save-btn):hover,
body.personal-web.web-night-preview :is(.preset-row-delete.is-save, .preset-save-btn):focus-visible {
    background: var(--night-card) !important;
    border-color: var(--night-brand) !important;
}

/* --------------------------------------------------------------------------
 * Rails: active item gets blue icon/text/edge. Hover only receives the edge.
 * -------------------------------------------------------------------------- */
body.personal-web.web-night-preview :is(
    .teacher-sidebar,
    .mobile-menu-panel
) .teacher-link {
    background: transparent !important;
    /* Resting navigation is unframed.  A transparent edge preserves the
       interaction geometry without producing a wall of outline pills. */
    border: 1px solid transparent !important;
    border-radius: var(--night-radius-control) !important;
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview :is(
    .teacher-sidebar,
    .mobile-menu-panel
) .teacher-link :is([data-lucide], svg.lucide) {
    color: var(--night-muted) !important;
}

/* "更多入口" remains content at rest: no outline and no icon tile.  Its full
   rounded edge is only revealed when the row is actionable. */
body.personal-web.web-night-preview :is(
    .teacher-sidebar,
    .mobile-menu-panel
) .teacher-follow-item {
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: var(--night-radius-control) !important;
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview :is(
    .teacher-sidebar,
    .mobile-menu-panel
) .teacher-follow-item:is(:hover, :focus-visible) {
    background: transparent !important;
    border-color: var(--night-brand) !important;
    color: var(--night-text) !important;
    outline: none;
}

body.personal-web.web-night-preview :is(
    .teacher-sidebar,
    .mobile-menu-panel
) .teacher-follow-item :is([data-lucide], svg.lucide) {
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview :is(
    .teacher-sidebar,
    .mobile-menu-panel
) .teacher-link:not(.is-active):not(.active):not([aria-current="page"]):not(:disabled):not([aria-disabled="true"]):not(.is-disabled):not(.is-unavailable):not(.is-inactive):not(.is-readonly):hover,
body.personal-web.web-night-preview :is(
    .teacher-sidebar,
    .mobile-menu-panel
) .teacher-link:not(.is-active):not(.active):not([aria-current="page"]):not(:disabled):not([aria-disabled="true"]):not(.is-disabled):not(.is-unavailable):not(.is-inactive):not(.is-readonly):focus-visible {
    background: transparent !important;
    border-color: var(--night-brand) !important;
    color: var(--night-text) !important;
    outline: none;
}

body.personal-web.web-night-preview :is(
    .teacher-sidebar,
    .mobile-menu-panel
) .teacher-link:not(.is-active):not(.active):not([aria-current="page"]):hover :is([data-lucide], svg.lucide),
body.personal-web.web-night-preview :is(
    .teacher-sidebar,
    .mobile-menu-panel
) .teacher-link:not(.is-active):not(.active):not([aria-current="page"]):focus-visible :is([data-lucide], svg.lucide) {
    color: var(--night-muted) !important;
}

body.personal-web.web-night-preview :is(
    .teacher-sidebar,
    .mobile-menu-panel
) :is(.teacher-link.is-active, .teacher-link.active, .teacher-follow-item.is-active, .teacher-follow-item.active) {
    background: transparent !important;
    border-color: var(--night-brand) !important;
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview :is(
    .teacher-sidebar,
    .mobile-menu-panel
) :is(.teacher-link[aria-current="page"], .teacher-follow-item[aria-current="page"]) {
    background: transparent !important;
    border-color: var(--night-brand) !important;
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview :is(
    .teacher-sidebar,
    .mobile-menu-panel
) :is(.teacher-link[aria-current="page"], .teacher-follow-item[aria-current="page"]) :is([data-lucide], svg.lucide) {
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview :is(
    .teacher-sidebar,
    .mobile-menu-panel
) :is(.teacher-link.is-active, .teacher-link.active, .teacher-follow-item.is-active, .teacher-follow-item.active) :is([data-lucide], svg.lucide) {
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview :is(.teacher-sidebar, .mobile-menu-panel) .teacher-cross-product-entry {
    background: #101010 !important;
    border: 1px solid #454545 !important;
    border-radius: var(--night-radius-control) !important;
    color: var(--night-text) !important;
    transition: border-color .18s ease, background-color .18s ease, color .18s ease !important;
}

body.personal-web.web-night-preview :is(.teacher-sidebar, .mobile-menu-panel) .teacher-cross-product-entry:hover,
body.personal-web.web-night-preview :is(.teacher-sidebar, .mobile-menu-panel) .teacher-cross-product-entry:focus-visible {
    background: #101010 !important;
    border-color: var(--night-brand) !important;
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview .teacher-cross-product-arrow,
body.personal-web.web-night-preview .teacher-cross-product-arrow :is([data-lucide], svg.lucide),
body.personal-web.web-night-preview :is(.teacher-quota-refresh, .teacher-sidebar-toggle, .context-panel-toggle, .rail-restore-tab) :is([data-lucide], svg.lucide) {
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview :is(
    .teacher-quota-refresh,
    .teacher-quota-more,
    .teacher-sidebar-toggle,
    .context-panel-toggle,
    .rail-restore-tab
) {
    background: var(--night-card) !important;
    border-color: var(--night-border) !important;
    color: var(--night-muted) !important;
}

body.personal-web.web-night-preview :is(
    .teacher-quota-refresh,
    .teacher-quota-more,
    .teacher-sidebar-toggle,
    .context-panel-toggle,
    .rail-restore-tab
):not(:disabled):not([aria-disabled="true"]):hover,
body.personal-web.web-night-preview :is(
    .teacher-quota-refresh,
    .teacher-quota-more,
    .teacher-sidebar-toggle,
    .context-panel-toggle,
    .rail-restore-tab
):not(:disabled):not([aria-disabled="true"]):focus-visible {
    background: var(--night-card) !important;
    border-color: var(--night-brand) !important;
    color: var(--night-muted) !important;
}

body.personal-web.web-night-preview :is(
    .teacher-sidebar .teacher-profile-logout,
    .mobile-menu-panel .teacher-profile-logout
) {
    background: transparent !important;
    border: 1px solid var(--night-border) !important;
    color: var(--night-muted) !important;
}

/* The footer itself is layout, not a third dark module behind logout. */
body.personal-web.web-night-preview :is(
    .teacher-sidebar-footer,
    .mobile-menu-panel .teacher-sidebar-footer
) {
    background: transparent !important;
    border-color: transparent !important;
}

/* "更多入口" belongs to the footer flow.  Giving it a second dark surface
   made it look like a black card embedded in the sidebar card. */
body.personal-web.web-night-preview .teacher-sidebar-footer .teacher-follow {
    background: transparent !important;
}

body.personal-web.web-night-preview :is(
    .teacher-sidebar .teacher-profile-logout,
    .mobile-menu-panel .teacher-profile-logout
) :is([data-lucide], svg.lucide) {
    color: var(--night-muted) !important;
}

body.personal-web.web-night-preview :is(
    .teacher-sidebar .teacher-profile-logout,
    .mobile-menu-panel .teacher-profile-logout
):hover,
body.personal-web.web-night-preview :is(
    .teacher-sidebar .teacher-profile-logout,
    .mobile-menu-panel .teacher-profile-logout
):focus-visible {
    background: #090909 !important;
    border-color: #ef4444 !important;
    color: #ffaaa0 !important;
}

body.personal-web.web-night-preview :is(
    .teacher-sidebar .teacher-profile-logout,
    .mobile-menu-panel .teacher-profile-logout
):hover :is([data-lucide], svg.lucide),
body.personal-web.web-night-preview :is(
    .teacher-sidebar .teacher-profile-logout,
    .mobile-menu-panel .teacher-profile-logout
):focus-visible :is([data-lucide], svg.lucide) {
    color: #ffaaa0 !important;
}

body.personal-web.web-night-preview .teacher-follow-icon {
    background: transparent !important;
    border: 0 !important;
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview .teacher-follow-icon :is([data-lucide], svg.lucide) {
    color: var(--night-brand) !important;
}

/* --------------------------------------------------------------------------
 * Right context rail.  It is compact tag navigation, not a wall of pills.
 * -------------------------------------------------------------------------- */
/* Keep the rail to one surface.  The card is only the scroll/layout wrapper;
   its former grey border and fill created a second shell around the content. */
body.personal-web.web-night-preview .context-card {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
}

body.personal-web.web-night-preview :is(.context-section-title, .context-panel-heading) {
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview :is(.context-section-title, .context-panel-heading) :is([data-lucide], svg.lucide) {
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview :is(
    .context-summary-item,
    .context-summary-choice-group,
    .context-summary-control,
    .context-option-chip,
    .context-action,
    .context-column-entry-actions,
    .context-column-tools,
    .context-column-save,
    .data-view-option-tools,
    .data-view-options-save,
    .config-cloud-sync-link,
    .settings-cloud-sync-link
) {
    background: var(--night-card) !important;
    border-color: var(--night-divider) !important;
    color: var(--night-muted) !important;
    box-shadow: none !important;
}

body.personal-web.web-night-preview :is(
    .context-summary-control,
    .context-option-chip,
    .context-action,
    .context-column-entry-actions,
    .context-column-tools,
    .context-column-save,
    .data-view-option-tools,
    .data-view-options-save,
    .data-view-cloud-sync-card,
    .table-customize-cloud-card,
    .config-cloud-sync-link,
    .settings-cloud-sync-link
) {
    background: transparent !important;
    border: 1px solid var(--night-border) !important;
    border-radius: 999px;
}

/* The yes/no summary control is one segmented choice, not two independently
   outlined buttons.  Its single brand layer moves without changing layout. */
body.personal-web.web-night-preview .context-summary-choice-group {
    position: relative;
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    isolation: isolate;
    gap: 0;
    padding: 3px;
    overflow: hidden;
    contain: paint;
    transform: translateZ(0);
    background: var(--night-card) !important;
    border: 1px solid var(--night-border) !important;
    border-radius: 999px;
}

body.personal-web.web-night-preview .context-summary-choice-group::before {
    position: absolute;
    inset: 3px auto 3px 3px;
    z-index: 0;
    width: calc(50% - 3px);
    border-radius: 999px;
    background: var(--night-brand);
    content: "";
    pointer-events: none;
    transform: translate3d(0, 0, 0);
    transition: none !important;
    will-change: auto;
    backface-visibility: hidden;
}

body.personal-web.web-night-preview .context-summary-choice-group:is(
    [data-active-choice="yes"],
    [data-active-choice="table"]
)::before {
    transform: translate3d(100%, 0, 0);
}

body.personal-web.web-night-preview .context-summary-choice {
    position: relative;
    z-index: 1;
    min-width: 28px;
    appearance: none;
    -webkit-appearance: none;
    background: transparent !important;
    border: 0 !important;
    color: var(--night-muted) !important;
    box-shadow: none !important;
    outline: 0 !important;
    transform: none !important;
    transition: none !important;
}

body.personal-web.web-night-preview .context-summary-choice:is(:hover, :focus-visible, :active) {
    background: transparent !important;
    border: 0 !important;
    color: var(--night-muted) !important;
    outline: 0 !important;
    transform: translate3d(0, 0, 0) !important;
}

body.personal-web.web-night-preview .context-summary-choice:is(.is-active, [aria-pressed="true"]) {
    background: transparent !important;
    border: 0 !important;
    color: #fff !important;
    outline: 0 !important;
}

body.personal-web.web-night-preview .context-summary-choice:is(
    .is-active,
    [aria-pressed="true"]
):is(:hover, :focus-visible, :active) {
    color: #fff !important;
}

/* Make the two right-rail customisation actions independent rounded controls
   instead of a single fused strip. */
body.personal-web.web-night-preview :is(.context-column-entry-actions, .context-column-tools) {
    gap: 10px !important;
    background: transparent !important;
    border: 0 !important;
}

body.personal-web.web-night-preview :is(.context-column-entry-actions, .context-column-tools) > button {
    min-width: 0;
    background: var(--night-card) !important;
    border: 1px solid var(--night-border) !important;
    border-radius: var(--night-radius-control) !important;
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview :is(.context-column-entry-actions, .context-column-tools) > button :is([data-lucide], svg.lucide) {
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview :is(
    .context-summary-control,
    .context-option-chip,
    .context-action,
    .context-column-entry-actions,
    .context-column-tools,
    .context-column-save,
    .data-view-option-tools,
    .data-view-options-save,
    .data-view-cloud-sync-card,
    .table-customize-cloud-card,
    .config-cloud-sync-link,
    .settings-cloud-sync-link
):where(:not(:disabled)):where(:not([aria-disabled="true"], .is-disabled, .is-unavailable, .is-inactive, .is-readonly, .is-fixed-column, .is-hidden-column)):hover,
body.personal-web.web-night-preview :is(
    .context-summary-control,
    .context-option-chip,
    .context-action,
    .config-cloud-sync-link,
    .settings-cloud-sync-link
):where(:not(:disabled)):where(:not([aria-disabled="true"], .is-disabled, .is-unavailable, .is-inactive, .is-readonly, .is-fixed-column, .is-hidden-column)):focus-visible {
    background: transparent !important;
    border-color: var(--night-brand) !important;
    color: var(--night-muted) !important;
    outline: none;
}

body.personal-web.web-night-preview :is(.data-view-cloud-sync-card, .table-customize-cloud-card) {
    background: var(--night-card) !important;
    border: 1px solid var(--night-border) !important;
    border-radius: var(--night-radius-control) !important;
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview :is(.data-view-cloud-sync-card, .table-customize-cloud-card):where(:not(.is-disabled, .is-unavailable, .is-inactive, .is-readonly)):hover {
    background: var(--night-card) !important;
    border-color: var(--night-brand) !important;
}

body.personal-web.web-night-preview :is(
    .context-option-chip.is-active,
    .context-action.is-active,
    .context-summary-control.is-active
) {
    background: transparent !important;
    border-color: var(--night-brand) !important;
    color: var(--night-brand) !important;
}

/* The compact option chips in the right configuration rail need a readable
   hierarchy on black: available choices are light gray, while a selected
   choice carries white copy and keeps its state glyph/badge blue. */
body.personal-web.web-night-preview .context-option-chip:not(.is-active):not(.is-disabled):not(:disabled) {
    color: var(--night-brand-soft) !important;
}

body.personal-web.web-night-preview .context-option-chip:not(.is-active):not(.is-disabled):not(:disabled) :is([data-lucide], svg.lucide) {
    color: var(--night-brand-soft) !important;
}

body.personal-web.web-night-preview .context-option-chip.is-active {
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview .context-option-chip.is-active :is([data-lucide], svg.lucide),
body.personal-web.web-night-preview .context-option-chip.is-active .context-option-chip-badge {
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview :is(
    .context-option-chip.is-active,
    .context-action.is-active,
    .context-summary-control.is-active
) :is([data-lucide], svg.lucide) {
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview :is(.context-action em, .context-option-chip-badge) {
    background: transparent !important;
    color: inherit !important;
}

body.personal-web.web-night-preview :is(.context-option-chip.is-disabled, .context-option-chip:disabled) {
    background: transparent !important;
    border-color: var(--night-divider) !important;
    color: var(--night-faint) !important;
}

body.personal-web.web-night-preview :is(.config-cloud-sync-link, .settings-cloud-sync-link) :is([data-lucide], svg.lucide),
body.personal-web.web-night-preview .inline-cloud-sync-link,
body.personal-web.web-night-preview .classroom-status-preset-footer-btn :is([data-lucide], svg.lucide) {
    color: var(--night-brand) !important;
}

/* These are primary action labels.  Accent belongs to their glyphs, not the
   words themselves, so they remain readable in every rail and modal. */
body.personal-web.web-night-preview :is(
    .config-cloud-sync-link,
    .settings-cloud-sync-link,
    .web-home-guide-link,
    .data-view-hint-button
) {
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview :is(.config-cloud-sync-link, .settings-cloud-sync-link) small {
    color: var(--night-faint) !important;
}

/* --------------------------------------------------------------------------
 * Home, profile, record and generation cards.
 * -------------------------------------------------------------------------- */
body.personal-web.web-night-preview :is(
    .personal-generation-student-card,
    .student-profile-card,
    .student-profile-page-card,
    .feedback-record-card,
    .feedback-record-preview-block,
    .student-profile-page-recent-item,
    .student-profile-page-recent,
    .result,
    .feedback-record-detail-text
) {
    background: var(--night-card) !important;
    border: 1px solid var(--night-divider) !important;
    border-radius: var(--night-radius-row);
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview :is(
    .personal-generation-student-card,
    .student-profile-card,
    .student-profile-page-card,
    .feedback-record-card,
    .student-profile-page-recent-item
):where(:not(:disabled)):where(:not([aria-disabled="true"], .is-disabled, .is-unavailable, .is-inactive, .is-readonly, .is-fixed-column, .is-hidden-column)):hover,
body.personal-web.web-night-preview :is(
    .personal-generation-student-card,
    .student-profile-card,
    .student-profile-page-card,
    .feedback-record-card,
    .student-profile-page-recent-item
):where(:not(:disabled)):where(:not([aria-disabled="true"], .is-disabled, .is-unavailable, .is-inactive, .is-readonly, .is-fixed-column, .is-hidden-column)):focus-visible {
    background: var(--night-card) !important;
    border-color: var(--night-brand) !important;
    outline: none;
}

/* A feedback preview is part of its card, not a second independently-hovered
   surface.  Keeping it neutral prevents the nested double-outline state. */
body.personal-web.web-night-preview .feedback-record-card .feedback-record-preview-block:is(:hover, :focus-visible) {
    background: var(--night-card) !important;
    border-color: var(--night-border) !important;
    outline: none;
}

body.personal-web.web-night-preview :is(
    .personal-generation-student-card,
    .student-profile-card,
    .student-profile-page-card,
    .feedback-record-card,
    .feedback-record-preview-block,
    .student-profile-page-recent-item,
    .teacher-link,
    .teacher-follow-item,
    .generation-option-button,
    .template-preset-home-card
) {
    transform: none !important;
}

body.personal-web.web-night-preview :is(.student-profile-card.active, .student-profile-page-card.active) {
    background: var(--night-card) !important;
    border-color: var(--night-brand) !important;
}

body.personal-web.web-night-preview :is(
    .student-profiles-page-title,
    .feedback-records-page-title,
    #personalGenerateHeaderIcon,
    #personalGenerationHeaderTools,
    .personal-generation-picker-toolbar
) :is([data-lucide], svg.lucide),
body.personal-web.web-night-preview .generate-page-header-actions > :not(.web-home-guide-link) :is([data-lucide], svg.lucide) {
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview .student-gender-icon.is-male :is([data-lucide], svg.lucide) {
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview .student-gender-icon.is-female :is([data-lucide], svg.lucide) {
    color: #e11d48 !important;
}

/* Student archives keep the information itself readable.  Blue belongs to
   the action affordances, never to the names or the data values. */
body.personal-web.web-night-preview :is(
    .student-profile-card .student-profile-card-name,
    .student-profile-card .student-profile-card-line,
    .student-profile-page-card .student-profile-page-name,
    .student-profile-page-card .student-profile-page-line,
    .student-profile-page-card .student-profile-page-line span,
    .student-profile-page-card .student-profile-page-meta,
    .student-profile-page-card .student-profile-write-link,
    .student-profile-detail-summary .student-profile-page-name,
    .student-profile-page-recent-title > span,
    .feedback-record-detail-name,
    .feedback-record-card .feedback-record-name
) {
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview :is(
    .student-profile-card .student-profile-card-line,
    .student-profile-card .student-profile-card-action:not(.danger),
    .student-profile-page-card .student-profile-page-line,
    .student-profile-page-card .student-profile-page-card-icon:not(.danger),
    .student-profile-page-card .student-profile-write-link,
    .student-profile-detail-summary .student-profile-detail-line,
    .student-profile-detail-summary .student-profile-page-edit,
    .student-profile-page-recent-title,
    .student-profile-page-recent-time,
    .student-profile-page-recent-view,
    .feedback-record-detail-meta .student-profile-detail-line,
    .feedback-record-detail-card .student-profile-card-action:not(.danger),
    .feedback-record-detail-card .feedback-record-detail-actions .secondary
) > :is([data-lucide], svg.lucide) {
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview .student-profile-detail-modal-card .student-profile-card-action:not(.danger) > :is([data-lucide], svg.lucide) {
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview .feedback-record-ai-notice {
    color: var(--night-muted) !important;
}

body.personal-web.web-night-preview :is(
    .student-profile-page-card-icon.danger,
    .student-profile-detail-actions .student-profile-page-action.danger
) > :is([data-lucide], svg.lucide) {
    color: #ffaaa0 !important;
}

/* Header actions are functional controls as well: new-profile stays blue,
   while the contextual help glyph remains the product's orange semantic. */
body.personal-web.web-night-preview .student-profile-icon-btn > :is([data-lucide], svg.lucide) {
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview :is(.web-home-guide-link, .data-view-hint-button) :is([data-lucide], svg.lucide) {
    color: #f59e0b !important;
}

body.personal-web.web-night-preview :is(.student-profile-period-badge, .student-profile-grade-badge, .current-profile-pill) {
    background: var(--night-card) !important;
    border: 1px solid var(--night-border) !important;
    color: var(--night-text) !important;
}

/* Current-entry information has a lot of direct day-theme colour declarations.
   Treat the strip and each of its subparts as one neutral, black surface so no
   white bar or blue-grey fragment can leak through while the profile changes. */
body.personal-web.web-night-preview :is(
    .student-profile-panel,
    #classStudentInfoStep,
    #currentProfileButton,
    #currentSessionSummary,
    .current-info-grid,
    .current-info-block,
    .current-info-profile,
    .current-info-session,
    .current-profile-line,
    .current-profile-summary,
    .current-profile-main-row,
    .current-profile-main-stack,
    .current-profile-name-row,
    .current-profile-tag-row,
    .current-session-line,
    .current-session-summary,
    .current-session-parent-row,
    .current-session-time-row,
    .current-session-summary-item,
    .generate-current-entry-row
) {
    background: var(--night-card) !important;
    background-image: none !important;
    border-color: var(--night-border) !important;
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview :is(.current-info-block, .current-info-profile, .current-info-grid, .current-profile-line, .current-session-line, .generate-current-entry-row) {
    border-width: 0 !important;
}

body.personal-web.web-night-preview :is(#currentProfileButton, #currentSessionSummary) {
    background: transparent !important;
}

body.personal-web.web-night-preview .current-info-session::before {
    background: var(--night-divider) !important;
}

body.personal-web.web-night-preview :is(
    .current-profile-summary,
    .current-profile-name,
    .current-session-value,
    .current-session-summary-item strong,
    .current-session-time-row strong
) {
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview :is(
    .current-profile-label,
    .current-session-label,
    .current-session-parent-row span,
    .current-session-summary-item span
) {
    color: var(--night-muted) !important;
}

body.personal-web.web-night-preview :is(.current-profile-switch, .current-profile-refresh, .current-session-edit) {
    background: var(--night-card) !important;
    border: 1px solid var(--night-border) !important;
    border-radius: var(--night-radius-control) !important;
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview :is(.current-profile-switch, .current-profile-refresh, .current-session-edit) :is([data-lucide], svg.lucide) {
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview :is(.current-session-summary-item, .current-session-summary-item span) {
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview :is(.current-session-summary-item, .current-profile-pill) :is([data-lucide], svg.lucide) {
    color: var(--night-brand) !important;
}

/* The current-profile strip shares the neutral card language.  Day mode puts
   these two entry controls on white paper; night mode keeps both on black and
   gives only their functional glyphs the blue affordance. */
body.personal-web.web-night-preview :is(
    .generate-current-entry,
    .generate-current-write-tip,
    .current-profile-empty-action,
    #currentWriteTip.generate-current-write-tip
) {
    background: var(--night-card) !important;
    border: 1px solid var(--night-border) !important;
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview :is(
    .generate-current-entry,
    .generate-current-write-tip,
    .current-profile-empty-action,
    #currentWriteTip.generate-current-write-tip
) :is([data-lucide], svg.lucide) {
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview :is(
    .generate-current-entry,
    .current-profile-empty-action
):is(:hover, :focus-visible) {
    background: var(--night-card) !important;
    border-color: var(--night-brand) !important;
    color: var(--night-text) !important;
    outline: none;
}

body.personal-web.web-night-preview .generate-current-write-tip {
    color: var(--night-brand-soft) !important;
}

body.personal-web.web-night-preview :is(
    .feedback-record-preview-label,
    .feedback-record-preview-row > em,
    .student-profile-page-recent-preview-row > em,
    .student-profile-page-recent-summary-line strong
) {
    color: var(--night-brand) !important;
    font-style: normal;
}

body.personal-web.web-night-preview :is(
    .student-profile-detail-summary,
    .student-profile-detail-line,
    .student-profile-detail-modal-card,
    .student-profile-page-recent,
    .student-profile-page-recent-item,
    .student-profile-page-recent-view,
    .feedback-record-detail-card,
    .feedback-record-detail-header,
    .feedback-record-detail-meta,
    .feedback-record-detail-preview,
    .feedback-record-detail-preview-row,
    .feedback-record-detail-preview-block
) {
    background: var(--night-card) !important;
    border-color: var(--night-border) !important;
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview :is(
    .student-profile-detail-line > span,
    .student-profile-page-recent-time > span,
    .feedback-record-meta-item,
    .feedback-record-created,
    .feedback-record-preview-text,
    .feedback-record-preview-copy
) {
    color: var(--night-muted) !important;
}

body.personal-web.web-night-preview :is(
    .student-profile-detail-line > strong,
    .feedback-record-meta-item strong,
    .feedback-record-created strong,
    .feedback-record-preview-text strong
) {
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview :is(
    .student-profile-modal-title,
    .lesson-meta-modal-title,
    .feedback-template-modal-title,
    .feedback-image-generator-icon,
    .generation-draft-refresh,
    .web-login-refresh-btn,
    .current-profile-refresh,
    .current-profile-switch,
    .current-session-edit,
    [data-refresh-student-profiles],
    [data-refresh-feedback-records],
    .data-table-sort-btn,
    .data-table-column-drag-handle,
    .feedback-record-preview-chevron,
    .student-profile-page-recent-view,
    .student-profile-inline-edit,
    .lesson-meta-label
) :is([data-lucide], svg.lucide) {
    color: var(--night-brand) !important;
}

/* Record metadata stays readable while its functional glyphs keep the
   personal-blue affordance.  The values themselves remain neutral text. */
body.personal-web.web-night-preview :is(
    .feedback-record-meta-item,
    .feedback-record-created
) > :is([data-lucide], svg.lucide) {
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview :is(
    .config-cloud-sync-link:not(.web-home-guide-link),
    .settings-cloud-sync-link,
    .data-view-cloud-sync-card,
    .table-customize-cloud-card,
    .web-config-sync-refresh,
    .generation-draft-refresh,
    .current-profile-refresh,
    [data-refresh-student-profiles],
    [data-refresh-feedback-records]
) :is([data-lucide], svg.lucide) {
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview :is(
    .student-profile-form-card,
    .student-profile-form,
    .student-profile-form-field,
    .student-profile-form-row,
    .lesson-meta-card,
    .lesson-meta-row
) :is([data-lucide], svg.lucide) {
    color: var(--night-brand) !important;
}

/* Gender is an intentional semantic distinction in the profile form.  Keep
   the surrounding labels neutral; only the selected option carries its hue. */
body.personal-web.web-night-preview .student-gender-toggle {
    background: var(--night-card) !important;
    border: 1px solid var(--night-border) !important;
    border-radius: 999px !important;
}

body.personal-web.web-night-preview .student-gender-option {
    appearance: none;
    -webkit-appearance: none;
    background: transparent !important;
    border: 0 !important;
    color: var(--night-muted) !important;
    box-shadow: none !important;
    outline: 0 !important;
}

body.personal-web.web-night-preview .student-gender-option:hover,
body.personal-web.web-night-preview .student-gender-option:focus-visible {
    background: transparent !important;
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview .student-gender-option.is-active {
    color: #fff !important;
}

body.personal-web.web-night-preview .student-gender-option.is-active.is-male {
    background: var(--night-brand) !important;
}

body.personal-web.web-night-preview .student-gender-option.is-active.is-female {
    background: #e11d48 !important;
}

/* --------------------------------------------------------------------------
 * Generation choices, lesson tokens, and classroom-state controls.
 * -------------------------------------------------------------------------- */
body.personal-web.web-night-preview :is(
    .subject-option,
    .performance-chip-btn,
    .performance-choice.is-custom,
    .duration-option span,
    .duration-custom,
    .homework-completion-mode-option,
    .pill-choice,
    .class-test-stage-choice,
    .tone-style-chip,
    .generation-segmented-options > button,
    .mini-segmented-control > button,
    .generation-options-mode-row button,
    .generation-options-classroom-actions button,
    .generation-options-classroom-items span,
    .feedback-export-choice,
    .feedback-export-format,
    .feedback-export-range-pills button,
    .feedback-export-student-option,
    .feedback-export-student-pager button,
    .feedback-export-field
) {
    background: transparent !important;
    border: 1px solid var(--night-border) !important;
    color: var(--night-text) !important;
    box-shadow: none !important;
}

body.personal-web.web-night-preview :is(
    .subject-option,
    .performance-chip-btn,
    .performance-choice.is-custom,
    .duration-option span,
    .duration-custom,
    .homework-completion-mode-option,
    .pill-choice,
    .class-test-stage-choice,
    .tone-style-chip,
    .generation-segmented-options > button,
    .mini-segmented-control > button,
    .generation-options-mode-row button,
    .generation-options-classroom-actions button,
    .generation-options-classroom-items span,
    .feedback-export-choice,
    .feedback-export-format,
    .feedback-export-range-pills button,
    .feedback-export-student-option,
    .feedback-export-student-pager button,
    .feedback-export-field
):where(:not(:disabled)):where(:not([aria-disabled="true"], .is-disabled, .is-unavailable, .is-inactive, .is-readonly, .is-fixed-column, .is-hidden-column)):hover,
body.personal-web.web-night-preview :is(
    .subject-option,
    .performance-chip-btn,
    .performance-choice.is-custom,
    .duration-option span,
    .duration-custom,
    .homework-completion-mode-option,
    .pill-choice,
    .class-test-stage-choice,
    .tone-style-chip,
    .generation-segmented-options > button,
    .mini-segmented-control > button,
    .generation-options-mode-row button,
    .generation-options-classroom-actions button,
    .generation-options-classroom-items span,
    .feedback-export-choice,
    .feedback-export-format,
    .feedback-export-range-pills button,
    .feedback-export-student-option,
    .feedback-export-student-pager button,
    .feedback-export-field
):where(:not(:disabled)):where(:not([aria-disabled="true"], .is-disabled, .is-unavailable, .is-inactive, .is-readonly, .is-fixed-column, .is-hidden-column)):focus-visible {
    background: transparent !important;
    border-color: var(--night-brand) !important;
    color: var(--night-text) !important;
    outline: none;
}

body.personal-web.web-night-preview :is(
    .subject-option.active,
    .performance-chip-btn.is-selected,
    .duration-option input[type="radio"]:checked + span,
    .duration-option input[type="radio"]:checked + .duration-custom,
    .homework-completion-mode-option.is-active,
    .pill-choice.is-active,
    .class-test-stage-choice.is-active,
    .tone-style-chip.is-selected,
    .generation-segmented-options > button.is-active,
    .mini-segmented-control > button.is-active,
    .generation-options-mode-row button.is-active,
    .generation-options-classroom-items span.is-on,
    .feedback-export-choice:has(input:checked),
    .feedback-export-format:has(input:checked),
    .feedback-export-field:has(input:checked),
    .feedback-export-field.is-selected,
    .feedback-export-student-option.is-active,
    .feedback-export-range-pills button.is-active
) {
    background: transparent !important;
    border-color: var(--night-brand) !important;
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview :is(
    .subject-option.active,
    .performance-chip-btn.is-selected,
    .homework-completion-mode-option.is-active,
    .pill-choice.is-active,
    .class-test-stage-choice.is-active,
    .tone-style-chip.is-selected,
    .generation-segmented-options > button.is-active,
    .mini-segmented-control > button.is-active,
    .generation-options-mode-row button.is-active,
    .generation-options-classroom-items span.is-on,
    .feedback-export-choice:has(input:checked),
    .feedback-export-format:has(input:checked),
    .feedback-export-field:has(input:checked),
    .feedback-export-field.is-selected,
    .feedback-export-student-option.is-active,
    .feedback-export-range-pills button.is-active
) :is(span, strong, small, em) {
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview :is(
    .subject-option.active,
    .performance-chip-btn.is-selected,
    .homework-completion-mode-option.is-active,
    .pill-choice.is-active,
    .class-test-stage-choice.is-active,
    .tone-style-chip.is-selected,
    .generation-segmented-options > button.is-active,
    .mini-segmented-control > button.is-active,
    .generation-options-mode-row button.is-active,
    .generation-options-classroom-items span.is-on,
    .feedback-export-choice:has(input:checked),
    .feedback-export-format:has(input:checked),
    .feedback-export-field:has(input:checked),
    .feedback-export-field.is-selected,
    .feedback-export-student-option.is-active,
    .feedback-export-range-pills button.is-active
) :is([data-lucide], svg.lucide) {
    color: var(--night-brand) !important;
}

/* The mode labels are content, not muted decoration.  Both choices stay
   legible; selection is communicated by the edge alone. */
body.personal-web.web-night-preview :is(
    .generation-options-mode-row button,
    .classroom-status-preset-mode-row button,
    .mini-segmented-control > button,
    .generation-segmented-options > button
) :is(span, small, strong) {
    color: var(--night-text) !important;
}

/* Choice chips deliberately stay paperless.  The surrounding module gives
   them context; a neutral edge and the selected blue edge are enough. */
body.personal-web.web-night-preview :is(
    .generation-module-section,
    .generation-options-classroom-panel,
    .feedback-export-card,
    .settings-workspace-card
) :is(
    .performance-chip-btn,
    .pill-choice,
    .class-test-stage-choice,
    .tone-style-chip,
    .homework-completion-mode-option,
    .generation-segmented-options > button,
    .mini-segmented-control > button,
    .generation-options-mode-row button,
    .feedback-export-range-pills button,
    .feedback-export-student-option
) {
    background: transparent !important;
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview :is(
    .generation-module-section,
    .generation-options-classroom-panel,
    .feedback-export-card,
    .settings-workspace-card
) :is(
    .performance-chip-btn,
    .pill-choice,
    .class-test-stage-choice,
    .tone-style-chip,
    .homework-completion-mode-option,
    .generation-segmented-options > button,
    .mini-segmented-control > button,
    .generation-options-mode-row button,
    .feedback-export-range-pills button,
    .feedback-export-student-option
):is(:hover, :focus-visible) {
    background: transparent !important;
    border-color: var(--night-brand) !important;
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview :is(
    .lesson-chip,
    .performance-supplement-chip,
    .lesson-chip-remove,
    .lesson-chip-editor .lesson-chip,
    .lesson-chip-editor .lesson-chip-remove
) {
    background: transparent !important;
    border-color: var(--night-border) !important;
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview :is(.lesson-chip-position-tag, .lesson-chip-position-tag + span) {
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview .lesson-chip-position-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 8px;
    background: transparent !important;
    border: 1px solid var(--night-brand) !important;
    border-radius: 999px;
}

body.personal-web.web-night-preview :is(.next-lesson-label, .next-lesson-toggle, .lesson-chip-position-tag) {
    color: var(--night-brand-soft) !important;
}

body.personal-web.web-night-preview :is(.next-lesson-label, .next-lesson-toggle) :is([data-lucide], svg.lucide) {
    color: var(--night-brand-soft) !important;
}

/* Mini labels use a light-gray context tier.  Template labels carry the
   primary white tier while their actual copy remains deliberately softer. */
body.personal-web.web-night-preview :is(
    .module-subhead,
    .class-test-stage-title,
    .homework-completion-level-title,
    .homework-completion-score-level,
    .classroom-status-label,
    .next-lesson-label,
    .next-lesson-toggle,
    .lesson-chip-position-tag
) {
    color: var(--night-brand-soft) !important;
}

body.personal-web.web-night-preview :is(
    .feedback-template-generation-preview-item > span,
    .my-template-preview-label,
    .template-block-title,
    .template-section-header strong
) {
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview :is(
    .feedback-template-generation-preview-item > p,
    .my-template-preview-text,
    .template-block p,
    .template-section-header small
) {
    color: var(--night-brand-soft) !important;
}

body.personal-web.web-night-preview :is(.generation-options-expand, .classroom-status-expand, .performance-expand-more) {
    background: transparent !important;
    border-color: var(--night-border) !important;
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview :is(.generation-options-expand, .classroom-status-expand, .performance-expand-more):hover,
body.personal-web.web-night-preview :is(.generation-options-expand, .classroom-status-expand, .performance-expand-more):focus-visible {
    background: transparent !important;
    border-color: var(--night-brand) !important;
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview :is(.classroom-star-btn, .classroom-status-preset-star) {
    background: transparent !important;
    border-color: var(--night-border) !important;
    color: #f59e0b !important;
}

body.personal-web.web-night-preview :is(.classroom-star-btn.is-muted, .classroom-status-preset-star.is-muted) {
    color: var(--night-faint) !important;
}

/* Classroom-preset order controls are status affordances.  Visible rows use
   blue glyphs; a hidden sixth item stays neutral on black rather than turning
   into a white day-mode badge. */
body.personal-web.web-night-preview .classroom-status-preset-number {
    background: transparent !important;
    border: 0 !important;
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview :is(
    .classroom-status-preset-order-grip,
    .classroom-status-preset-order-btn:not(:disabled)
) :is([data-lucide], svg.lucide) {
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview .classroom-status-preset-row.is-hidden-item :is(
    .classroom-status-preset-number,
    .classroom-status-preset-input
) {
    background: var(--night-card) !important;
    border-color: var(--night-border) !important;
    color: var(--night-faint) !important;
}

body.personal-web.web-night-preview .classroom-status-preset-row.is-hidden-item .classroom-status-preset-number :is([data-lucide], svg.lucide),
body.personal-web.web-night-preview .classroom-status-preset-row.is-hidden-item .classroom-status-preset-order-btn:disabled :is([data-lucide], svg.lucide) {
    color: var(--night-faint) !important;
}

/* --------------------------------------------------------------------------
 * Settings and templates.  Rows own the whole rounded interaction perimeter.
 * -------------------------------------------------------------------------- */
body.personal-web.web-night-preview :is(
    .generation-options-list,
    .template-preset-home-grid,
    .template-preset-center-body,
    .template-preset-center-body > *,
    .preset-entry-card,
    .preset-position-group,
    .generation-options-classroom-panel,
    .classroom-status-preset-list,
    .feedback-template-custom-panel,
    .feedback-template-default-panel,
    .template-block,
    .template-saved-card,
    .my-template-card,
    .template-token-editor,
    .template-preview
) {
    background: transparent !important;
    border-color: var(--night-divider) !important;
    color: var(--night-text) !important;
}

/* Expanded option editors are layered black modules, never white cards or
   blue-grey sheets. */
body.personal-web.web-night-preview :is(
    .generation-options-list,
    .generation-options-classroom-panel,
    .classroom-status-preset-list,
    .performance-panel,
    .performance-panel-header,
    .performance-panel-actions,
    .performance-category,
    .performance-picker,
    .performance-choice,
    .classroom-status-preset-row,
    .classroom-status-preset-input,
    .classroom-status-preset-order-btn
) {
    background: var(--night-card) !important;
    border-color: var(--night-border) !important;
    color: var(--night-text) !important;
}

/* The expanded strengths / weaknesses editor is dynamically mounted outside
   the ordinary card.  Give every layer the same black surface so the day-mode
   white panels and fading header/footer gradients never flash through. */
body.personal-web.web-night-preview :is(
    .performance-panel,
    .performance-panel-header,
    .performance-panel-actions,
    .performance-category
) {
    background-image: none !important;
    border-color: var(--night-border) !important;
}

body.personal-web.web-night-preview :is(
    .performance-panel-title,
    .performance-category-title
) {
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview :is(
    .performance-more-btn,
    .performance-cancel-btn,
    .performance-custom-check
) {
    background: transparent !important;
    border: 1px solid var(--night-border) !important;
    color: var(--night-brand) !important;
    box-shadow: none !important;
}

body.personal-web.web-night-preview :is(
    .performance-more-btn,
    .performance-cancel-btn,
    .performance-custom-check
):not(:disabled):is(:hover, :focus-visible) {
    background: transparent !important;
    border-color: var(--night-brand) !important;
    color: var(--night-brand) !important;
    outline: none !important;
}

body.personal-web.web-night-preview .performance-save-btn {
    background: var(--night-brand) !important;
    border-color: var(--night-brand) !important;
    color: #fff !important;
    box-shadow: none !important;
}

body.personal-web.web-night-preview :is(
    .performance-custom-input input,
    .performance-custom-input input:focus-visible
) {
    background: transparent !important;
    border-color: var(--night-border) !important;
    box-shadow: none !important;
    color: var(--night-text) !important;
    outline: none !important;
}

body.personal-web.web-night-preview .performance-custom-input input:focus-visible {
    border-bottom-color: var(--night-brand) !important;
}

body.personal-web.web-night-preview .performance-custom-input input::placeholder {
    color: var(--night-faint) !important;
}

body.personal-web.web-night-preview :is(
    .performance-supplement-chip,
    .performance-supplement-remove,
    .performance-chip-plus
) {
    background: transparent !important;
    border-color: var(--night-border) !important;
    color: var(--night-text) !important;
    box-shadow: none !important;
}

body.personal-web.web-night-preview :is(.performance-chip-plus, .performance-chip-btn.is-selected .performance-chip-plus) {
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview .performance-chip-btn.is-selected .performance-chip-plus {
    background: transparent !important;
}

body.personal-web.web-night-preview :is(
    .generation-option-button,
    .template-preset-home-card,
    .feedback-template-choice,
    .template-saved-card,
    .template-mode-card > span,
    .classroom-status-preset-row,
    .preset-row,
    .feedback-template-choice.is-add
) {
    background: var(--night-card) !important;
    border: 1px solid var(--night-divider) !important;
    border-radius: var(--night-radius-row) !important;
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview :is(
    .generation-option-button,
    .template-preset-home-card,
    .feedback-template-choice,
    .template-saved-card,
    .template-mode-card > span,
    .classroom-status-preset-row,
    .preset-row,
    .feedback-template-choice.is-add
):where(:not(:disabled)):where(:not([aria-disabled="true"], .is-disabled, .is-unavailable, .is-inactive, .is-readonly, .is-fixed-column, .is-hidden-column)):hover,
body.personal-web.web-night-preview :is(
    .generation-option-button,
    .template-preset-home-card,
    .feedback-template-choice,
    .template-saved-card,
    .template-mode-card > span,
    .classroom-status-preset-row,
    .preset-row,
    .feedback-template-choice.is-add
):where(:not(:disabled)):where(:not([aria-disabled="true"], .is-disabled, .is-unavailable, .is-inactive, .is-readonly, .is-fixed-column, .is-hidden-column)):focus-visible {
    background: var(--night-card) !important;
    border-color: var(--night-brand) !important;
    color: var(--night-text) !important;
    outline: none;
}

body.personal-web.web-night-preview :is(
    .generation-option-button.is-on,
    .feedback-template-choice.is-active,
    .template-saved-card.is-active,
    .template-mode-card input:checked + span,
    .preset-position-tab.is-active
) {
    background: var(--night-hover) !important;
    border-color: var(--night-brand) !important;
    color: var(--night-text) !important;
}

/* A selected generator/template state is already meaningful information.
   Hovering it must not let the generic interaction rule wash out its blue
   edge or functional glyphs. */
body.personal-web.web-night-preview :is(
    .generation-option-button.is-on,
    .feedback-template-choice.is-active,
    .template-saved-card.is-active,
    .template-mode-card input:checked + span,
    .preset-position-tab.is-active
):is(:hover, :focus-visible, :active) {
    background: var(--night-hover) !important;
    border-color: var(--night-brand) !important;
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview .generation-option-button.is-on .generation-option-button-icon,
body.personal-web.web-night-preview .generation-option-button.is-on .generation-option-button-icon :is([data-lucide], svg.lucide),
body.personal-web.web-night-preview .generation-option-button.is-on .generation-option-button-state,
body.personal-web.web-night-preview .generation-option-button.is-on .generation-option-button-state :is([data-lucide], svg.lucide) {
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview :is(
    .feedback-template-choice.is-active,
    .template-saved-card.is-active,
    .template-mode-card input:checked + span,
    .preset-position-tab.is-active
) :is([data-lucide], svg.lucide) {
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview :is(
    .generation-option-button-icon,
    .generation-option-button-state,
    .template-preset-home-title > :is([data-lucide], svg.lucide),
    .template-preset-home-side > :is([data-lucide], svg.lucide),
    .template-preset-home-card > :is([data-lucide], svg.lucide),
    .template-block-title > :is([data-lucide], svg.lucide)
) {
    background: transparent !important;
    border: 0 !important;
    color: var(--night-brand) !important;
}

/* Unselected generation options use light gray, so the control stays readable
   on black without looking like a dark-blue surface.  An on
   option becomes white while its right-side state keeps the blue cue. */
body.personal-web.web-night-preview .generation-option-button:not(.is-on):not(.is-disabled) :is(
    .generation-option-button-icon,
    .generation-option-button-title,
    .generation-option-button-state
) {
    color: var(--night-brand-soft) !important;
}

body.personal-web.web-night-preview .generation-option-button:not(.is-on):not(.is-disabled) .generation-option-button-desc {
    color: var(--night-muted) !important;
}

body.personal-web.web-night-preview .generation-option-button.is-on :is(
    .generation-option-button-icon,
    .generation-option-button-title
) {
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview .generation-option-button.is-on .generation-option-button-desc {
    color: var(--night-muted) !important;
}

body.personal-web.web-night-preview .generation-option-button.is-on .generation-option-button-state {
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview .generation-option-button.is-disabled {
    background: var(--night-card) !important;
    border-color: var(--night-border) !important;
}

/* Template names remain primary information.  Only the count is secondary;
   leading icons and chevrons carry the accent for navigation. */
body.personal-web.web-night-preview :is(
    .template-preset-home-title,
    .template-preset-home-title > span,
    .template-preset-home-card .generation-option-button-title
) {
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview :is(
    .template-preset-home-title,
    .template-preset-home-side,
    .template-preset-home-card
) > :is([data-lucide], svg.lucide),
body.personal-web.web-night-preview .template-preset-home-title > :is([data-lucide], svg.lucide),
body.personal-web.web-night-preview .template-preset-home-side > :is([data-lucide], svg.lucide) {
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview :is(.template-preset-home-count, .template-preset-home-side, .generation-option-button-state) {
    background: transparent !important;
    color: var(--night-muted) !important;
}

body.personal-web.web-night-preview :is(
    .generation-option-button.is-on .generation-option-button-state
) {
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview :is(
    .settings-workspace-title,
    .settings-light-tip,
    .generation-draft-title,
    .apply-last-web-title,
    .feedback-export-section-title,
    .feedback-export-icon,
    .web-config-sync-icon,
    .table-view-intro-icon
) :is([data-lucide], svg.lucide) {
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview :is(.settings-workspace-title, .generation-draft-title, .apply-last-web-title) {
    color: var(--night-text) !important;
}

/* Settings descriptions declare a day-mode colour themselves, so they need
   an explicit night tier instead of relying on the modal's inherited text. */
body.personal-web.web-night-preview .settings-workspace-desc {
    color: var(--night-muted) !important;
}

body.personal-web.web-night-preview :is(.settings-workspace-close, .feedback-export-close, .web-config-sync-close) {
    background: var(--night-card) !important;
    border-color: var(--night-border) !important;
    color: var(--night-muted) !important;
}

body.personal-web.web-night-preview :is(
    .preset-link-btn,
    .generation-options-reset-button,
    .template-workspace-reset-default,
    .classroom-status-preset-footer-btn,
    .preset-add-btn
) {
    background: var(--night-card) !important;
    border: 1px solid var(--night-border) !important;
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview :is(
    .preset-link-btn,
    .generation-options-reset-button,
    .template-workspace-reset-default,
    .classroom-status-preset-footer-btn,
    .preset-add-btn
) :is([data-lucide], svg.lucide) {
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview :is(
    .preset-link-btn,
    .generation-options-reset-button,
    .template-workspace-reset-default,
    .classroom-status-preset-footer-btn,
    .preset-add-btn
):is(:hover, :focus-visible) {
    background: var(--night-card) !important;
    border-color: var(--night-brand) !important;
}

body.personal-web.web-night-preview :is(.settings-workspace-close, .feedback-export-close, .web-config-sync-close):hover,
body.personal-web.web-night-preview :is(.settings-workspace-close, .feedback-export-close, .web-config-sync-close):focus-visible {
    background: var(--night-card) !important;
    border-color: var(--night-brand) !important;
    color: var(--night-muted) !important;
}

body.personal-web.web-night-preview :is(.feedback-template-choice-badge, .template-inline-token, .my-template-card-badge) {
    background: transparent !important;
    border-color: var(--night-border) !important;
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview .settings-workspace-status .inline-cloud-sync-link {
    color: var(--night-brand) !important;
}

/* --------------------------------------------------------------------------
 * Data view controls and tables.
 * -------------------------------------------------------------------------- */
body.personal-web.web-night-preview .data-view-switch {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    isolation: isolate;
    overflow: hidden;
    padding: 3px;
    background: var(--night-card) !important;
    border: 1px solid var(--night-border) !important;
    border-radius: var(--night-radius-row);
}

body.personal-web.web-night-preview .data-view-switch::before {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    z-index: 0;
    width: calc((100% - 6px) / 2);
    border-radius: 10px;
    background: var(--night-brand);
    content: "";
    pointer-events: none;
    transition: left .32s cubic-bezier(.2,.8,.2,1) !important;
}

body.personal-web.web-night-preview .data-view-switch[data-active-view="table"]::before {
    left: 50%;
}

body.personal-web.web-night-preview .data-view-switch > button {
    position: relative;
    z-index: 1;
    min-width: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent !important;
    border: 0 !important;
    color: var(--night-muted) !important;
    box-shadow: none !important;
    outline: 0 !important;
    transform: none !important;
    transition: color .14s ease !important;
}

body.personal-web.web-night-preview .data-view-switch > button:hover,
body.personal-web.web-night-preview .data-view-switch > button:focus-visible,
body.personal-web.web-night-preview .data-view-switch > button:active {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--night-muted) !important;
    outline: 0 !important;
    transform: none !important;
}

body.personal-web.web-night-preview .data-view-switch > button.is-active,
body.personal-web.web-night-preview .data-view-switch > button[aria-pressed="true"] {
    color: #fff !important;
}

body.personal-web.web-night-preview .data-view-switch > button:is(
    .is-active,
    [aria-pressed="true"]
):is(:hover, :focus-visible, :active) {
    color: #fff !important;
}

body.personal-web.web-night-preview .data-view-switch > button.is-active :is([data-lucide], svg.lucide),
body.personal-web.web-night-preview .data-view-switch > button[aria-pressed="true"] :is([data-lucide], svg.lucide) {
    color: #fff !important;
}

/* Do not animate the first render.  During an interaction the label stays
   above the one-piece selector, so no dark button surface can cover blue. */
body.personal-web.web-night-preview .data-view-switch:not([data-motion-ready="true"])::before {
    transition: none !important;
    will-change: auto;
}

body.personal-web.web-night-preview :is(
    .data-view-customize-btn,
    .data-view-table-sync-btn,
    .feedback-export-open-btn,
    .data-view-inline-link,
    .data-view-column-toggle,
    .data-view-column-order-actions button,
    .context-column-order-actions button
) {
    background: var(--night-card) !important;
    border-color: var(--night-border) !important;
    color: var(--night-text) !important;
}

/* The two controls below the right-rail view selector intentionally remain
   separate cards, even when the viewport is narrow. */
body.personal-web.web-night-preview :is(.data-view-customize-btn, .data-view-table-sync-btn) {
    border: 1px solid var(--night-border) !important;
    border-radius: var(--night-radius-control) !important;
    isolation: isolate;
}

body.personal-web.web-night-preview .data-view-option-tools {
    gap: 10px !important;
    background: transparent !important;
    border: 0 !important;
}

body.personal-web.web-night-preview .data-view-option-tools > button {
    min-width: 0;
    background: var(--night-card) !important;
    border: 1px solid var(--night-border) !important;
    border-radius: var(--night-radius-control) !important;
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview .data-view-option-tools > button :is([data-lucide], svg.lucide) {
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview :is(.data-view-customize-btn, .data-view-table-sync-btn, .feedback-export-open-btn) :is([data-lucide], svg.lucide) {
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview .data-table-actions button:not(.is-danger) :is([data-lucide], svg.lucide) {
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview .data-table-actions button:not(.is-danger) > svg {
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview .table-customize-tool-grid button :is([data-lucide], svg.lucide),
body.personal-web.web-night-preview :is(
    .table-customize-combined-row:not(.is-hidden-column):not(.is-fixed-column) .table-customize-order-grip,
    .table-customize-combined-row:not(.is-hidden-column):not(.is-fixed-column) .table-customize-order-actions button:not(:disabled)
) :is([data-lucide], svg.lucide) {
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview .table-customize-option-module.is-active:not(.is-fixed) .table-customize-option-order {
    background: transparent !important;
    border: 0 !important;
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview .table-customize-option-module.is-active:not(.is-fixed) > :is([data-lucide], svg.lucide) {
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview .table-customize-option-module.is-fixed :is(
    .table-customize-option-fixed,
    .table-customize-option-badge
) {
    background: var(--night-card) !important;
    border: 1px solid var(--night-border) !important;
    color: var(--night-faint) !important;
}

body.personal-web.web-night-preview .data-view-inline-link.data-view-hint-button,
body.personal-web.web-night-preview .data-view-inline-link.data-view-hint-button :is([data-lucide], svg.lucide) {
    color: #f59e0b !important;
}

body.personal-web.web-night-preview :is(.data-view-customize-btn, .data-view-table-sync-btn, .feedback-export-open-btn, .data-view-inline-link, .data-view-column-toggle):where(:not(:disabled)):where(:not([aria-disabled="true"], .is-disabled, .is-unavailable, .is-inactive, .is-readonly, .is-fixed-column, .is-hidden-column)):hover,
body.personal-web.web-night-preview :is(.data-view-customize-btn, .data-view-table-sync-btn, .feedback-export-open-btn, .data-view-inline-link, .data-view-column-toggle):where(:not(:disabled)):where(:not([aria-disabled="true"], .is-disabled, .is-unavailable, .is-inactive, .is-readonly, .is-fixed-column, .is-hidden-column)):focus-visible {
    background: var(--night-card) !important;
    border-color: var(--night-brand) !important;
}

body.personal-web.web-night-preview .data-table-scroll {
    background: var(--night-card) !important;
    border: 1px solid var(--night-divider) !important;
    border-radius: var(--night-radius-card);
}

body.personal-web.web-night-preview .data-table :is(th, td) {
    background: var(--night-card) !important;
    border-color: var(--night-divider) !important;
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview .data-table th {
    background: var(--night-main) !important;
}

body.personal-web.web-night-preview .data-table tbody tr:hover > :is(td, th) {
    background: var(--night-card) !important;
    border-top: 1px solid var(--night-brand) !important;
    border-bottom: 1px solid var(--night-brand) !important;
}

body.personal-web.web-night-preview .data-table tbody tr:hover > :is(td, th):first-child {
    border-left: 1px solid var(--night-brand) !important;
    border-radius: var(--night-radius-row) 0 0 var(--night-radius-row);
}

body.personal-web.web-night-preview .data-table tbody tr:hover > :is(td, th):last-child {
    border-right: 1px solid var(--night-brand) !important;
    border-radius: 0 var(--night-radius-row) var(--night-radius-row) 0;
}

body.personal-web.web-night-preview :is(.data-view-options, .table-customize-workspace, .table-customize-body, .table-customize-section, .table-customize-section-head, .table-customize-combined-list, .table-customize-tool-grid, .table-customize-option-module, .table-customize-option-order, .table-customize-option-fixed, .table-customize-drag-note, .data-view-option-tools, .data-view-options-head, .data-view-options-save, .data-view-options-count) {
    background: var(--night-card) !important;
    border-color: var(--night-divider) !important;
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview :is(.table-customize-combined-row, .table-customize-order-row, .data-view-column-order-row, .context-column-order-row) {
    background: var(--night-card) !important;
    border: 1px solid var(--night-border) !important;
    border-radius: var(--night-radius-control) !important;
    color: var(--night-text) !important;
}

/* These labels set direct day-mode colours, which cannot inherit the row's
   night text tier.  Keep disabled columns deliberately quieter. */
body.personal-web.web-night-preview :is(
    .table-customize-combined-row,
    .table-customize-order-row,
    .data-view-column-order-row,
    .context-column-order-row
) > strong,
body.personal-web.web-night-preview .table-customize-section-head > strong {
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview .table-customize-combined-row.is-hidden-column > strong {
    color: var(--night-faint) !important;
}

body.personal-web.web-night-preview .table-customize-drag-note {
    color: var(--night-muted) !important;
}

body.personal-web.web-night-preview :is(.table-customize-combined-row, .table-customize-order-row, .data-view-column-order-row, .context-column-order-row):not(.is-hidden-column):not(.is-fixed-column):hover {
    background: var(--night-card) !important;
    border-color: var(--night-brand) !important;
}

body.personal-web.web-night-preview :is(.table-customize-row-index, .data-view-column-order-index, .table-customize-order-grip) {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview :is(
    .table-customize-row-index.is-hidden-index,
    .table-customize-row-index.is-fixed-position
) {
    background: var(--night-card) !important;
    border: 1px solid var(--night-border) !important;
    color: var(--night-faint) !important;
}

body.personal-web.web-night-preview :is(
    .table-customize-row-index.is-hidden-index,
    .table-customize-row-index.is-fixed-position
) :is([data-lucide], svg.lucide) {
    color: var(--night-faint) !important;
}

body.personal-web.web-night-preview :is(.table-customize-order-actions, .data-view-column-order-actions, .context-column-order-actions) button:not(:disabled) :is([data-lucide], svg.lucide) {
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview :is(.table-customize-order-actions, .data-view-column-order-actions, .context-column-order-actions) button:disabled,
body.personal-web.web-night-preview :is(.table-customize-row-index.is-hidden-index, .table-customize-row-index.is-fixed-position) {
    color: var(--night-faint) !important;
}

/* --------------------------------------------------------------------------
 * Export, drafts, cloud workspaces and feedback-image panels.
 * -------------------------------------------------------------------------- */
body.personal-web.web-night-preview :is(
    .feedback-export-section,
    .feedback-export-title-card,
    .feedback-export-select-card,
    .feedback-export-panel,
    .feedback-export-preset-note,
    .feedback-export-summary-item,
    .feedback-export-student-search,
    .feedback-export-student-empty,
    .feedback-export-fields,
    .feedback-export-preview-scroll,
    .feedback-export-preview-table,
    .generation-draft-preview,
    .generation-draft-preview-row,
    .generation-draft-meta,
    .web-config-sync-status,
    .web-config-sync-summary,
    .feedback-image-preview-area,
    .feedback-image-loading,
    .feedback-image-font-options,
    .feedback-image-template-choice
) {
    background: var(--night-card) !important;
    border-color: var(--night-border) !important;
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview :is(.feedback-export-preview-table th, .feedback-export-preview-table td) {
    background: var(--night-card) !important;
    border-color: var(--night-divider) !important;
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview :is(
    .feedback-export-title-card input,
    .feedback-export-student-search input,
    .feedback-export-select-wrap select
) {
    background: var(--night-card) !important;
    border-color: var(--night-border) !important;
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview .feedback-export-student-search input {
    border-color: transparent !important;
}

body.personal-web.web-night-preview .feedback-export-field-tools button.is-active {
    background: transparent !important;
    border-color: var(--night-brand) !important;
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview .feedback-export-field-tools button.is-active :is([data-lucide], svg.lucide) {
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview .feedback-export-action:not(.secondary) {
    background: var(--night-brand) !important;
    border-color: var(--night-brand) !important;
    color: #fff !important;
}

body.personal-web.web-night-preview .feedback-export-field-tools button.is-active:hover,
body.personal-web.web-night-preview .feedback-export-field-tools button.is-active:focus-visible {
    background: transparent !important;
    border-color: var(--night-brand) !important;
}

body.personal-web.web-night-preview .feedback-export-action:not(.secondary):hover {
    background: var(--night-brand) !important;
    border-color: #9cbeff !important;
}

body.personal-web.web-night-preview .feedback-image-error {
    background: #090909 !important;
    border-color: #7a3b3e !important;
    color: #ffaaa0 !important;
}

body.personal-web.web-night-preview :is(.feedback-image-preview, .feedback-image-template-swatch) {
    color: initial;
}

body.personal-web.web-night-preview :is(.web-config-sync-icon, .feedback-export-icon) {
    display: inline-grid !important;
    place-items: center;
    background: var(--night-card) !important;
    border: 1px solid var(--night-border) !important;
    border-radius: var(--night-radius-control) !important;
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview .table-view-intro-icon {
    background: var(--night-card) !important;
    border: 1px solid var(--night-border) !important;
    border-radius: var(--night-radius-control) !important;
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview :is(
    .web-config-sync-status-title,
    .web-config-sync-row,
    .web-config-sync-row strong,
    .web-config-sync-note
) {
    color: var(--night-muted) !important;
}

body.personal-web.web-night-preview .web-config-sync-status-title {
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview .web-config-sync-row strong {
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview .web-config-sync-refresh :is([data-lucide], svg.lucide) {
    color: var(--night-brand) !important;
}

/* --------------------------------------------------------------------------
 * Login and QR.  The selector moves by the existing indicator, not by borders.
 * -------------------------------------------------------------------------- */
body.personal-web.web-night-preview .modal {
    background: rgb(0 0 0 / .78) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.personal-web.web-night-preview .web-login-mode-tabs {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 !important;
    padding: 4px;
    overflow: hidden;
    background: var(--night-card) !important;
    border: 1px solid var(--night-border) !important;
    border-radius: 16px;
}

body.personal-web.web-night-preview .web-login-mode-tab-indicator {
    position: absolute;
    z-index: 0;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(50% - 4px);
    background: var(--night-brand) !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    pointer-events: none;
    transition: left .32s cubic-bezier(.2,.8,.2,1) !important;
}

body.personal-web.web-night-preview .web-login-mode-tabs[data-active-mode="official_account"] .web-login-mode-tab-indicator {
    left: 50%;
}

body.personal-web.web-night-preview .web-login-mode-tab {
    position: relative;
    z-index: 1;
    background: transparent !important;
    border: 0 !important;
    color: var(--night-muted) !important;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none !important;
    outline: 0 !important;
    transform: none !important;
    transition: color .14s ease !important;
}

body.personal-web.web-night-preview .web-login-mode-tab:hover,
body.personal-web.web-night-preview .web-login-mode-tab:focus-visible,
body.personal-web.web-night-preview .web-login-mode-tab:active {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--night-muted) !important;
    outline: 0 !important;
    transform: none !important;
}

body.personal-web.web-night-preview .web-login-mode-tab[aria-selected="true"],
body.personal-web.web-night-preview .web-login-mode-tab[aria-selected="true"] :is([data-lucide], svg.lucide) {
    color: #fff !important;
}

body.personal-web.web-night-preview .web-login-mode-tab[aria-selected="true"]:is(:hover, :focus-visible, :active) {
    color: #fff !important;
}

body.personal-web.web-night-preview .web-login-mode-tabs:not([data-motion-ready="true"]) .web-login-mode-tab-indicator {
    transition: none !important;
    will-change: auto;
}

body.personal-web.web-night-preview :is(.web-login-trusted-device, .web-login-agreement, .web-login-check-box, .web-login-qr-state) {
    background: var(--night-card) !important;
    border-color: var(--night-border) !important;
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview :is(
    .web-login-trusted-device label,
    .web-login-agreement label,
    .web-login-qr-state strong,
    .web-login-check-label
) {
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview :is(
    .web-login-official-account-entry,
    .web-login-qr-state,
    .web-login-qr-hint,
    .web-login-sync-tip,
    .web-login-check-note,
    .web-login-status-text
) {
    color: var(--night-muted) !important;
}

body.personal-web.web-night-preview :is(
    .web-login-agreement a,
    .web-login-official-account-link,
    .web-login-check-code
) {
    color: var(--night-brand-soft) !important;
}

body.personal-web.web-night-preview :is(.web-login-qr-hint, .web-login-sync-tip) :is([data-lucide], svg.lucide) {
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview .web-login-qr-spinner {
    border-color: var(--night-divider) !important;
    border-top-color: var(--night-brand) !important;
}

body.personal-web.web-night-preview :is(.web-login-trusted-device, .web-login-agreement) input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    display: grid;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    place-content: center;
    margin: 1px 0 0;
    background: var(--night-card) !important;
    border: 1px solid var(--night-border) !important;
    border-radius: 6px;
    cursor: pointer;
}

body.personal-web.web-night-preview :is(.web-login-trusted-device, .web-login-agreement) input[type="checkbox"]::before {
    width: 6px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    content: "";
    opacity: 0;
    transform: rotate(45deg) translate(-1px, -1px) scale(.6);
}

body.personal-web.web-night-preview :is(.web-login-trusted-device, .web-login-agreement) input[type="checkbox"]:checked {
    background: var(--night-brand) !important;
    border-color: var(--night-brand) !important;
}

body.personal-web.web-night-preview :is(.web-login-trusted-device, .web-login-agreement) input[type="checkbox"]:checked::before {
    opacity: 1;
    transform: rotate(45deg) translate(-1px, -1px) scale(1);
}

body.personal-web.web-night-preview :is(.web-login-trusted-device, .web-login-agreement) input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--night-brand);
    outline-offset: 3px;
}

body.personal-web.web-night-preview :is(.web-login-qr-frame, .follow-qr-frame) {
    background: var(--night-card) !important;
    border-color: var(--night-border) !important;
}

body.personal-web.web-night-preview :is(.web-login-qr-frame img, .follow-qr-frame img) {
    background: #fff !important;
}

/* Keep official-account and mini-program QR bitmaps in their original colors.
   Only the surrounding frame participates in the night theme. */
body.personal-web.web-night-preview :is(#webLoginQrImage, #officialAccountLoginQrImage, #followQrImage) {
    background: #fff !important;
    filter: none !important;
}

body.personal-web.web-night-preview .web-login-protected.is-agreement-locked .web-login-qr-frame,
body.personal-web.web-night-preview .web-login-protected.is-agreement-locked .web-login-qr-frame::after {
    background: rgb(13 13 13 / .86) !important;
}

body.personal-web.web-night-preview .web-login-qr-error,
body.personal-web.web-night-preview .web-login-status-text.is-error {
    color: #ffaaa0 !important;
}

body.personal-web.web-night-preview .web-login-status-text.is-success {
    color: #83d4a6 !important;
}

/* --------------------------------------------------------------------------
 * Semantic status colors keep black surfaces.  No pale error/success cards.
 * -------------------------------------------------------------------------- */
body.personal-web.web-night-preview :is(.feedback-record-status, .feedback-record-status.is-generated, .feedback-record-status.is-edited, .feedback-record-status.is-transformed) {
    border: 1px solid var(--night-border) !important;
    background: var(--night-card) !important;
}

body.personal-web.web-night-preview .feedback-record-status.is-generated {
    border-color: #25865b !important;
    color: #83d4a6 !important;
}

body.personal-web.web-night-preview .feedback-record-status.is-edited {
    border-color: var(--night-brand) !important;
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview .feedback-record-status.is-transformed {
    border-color: #d79038 !important;
    color: #f4bd72 !important;
}

body.personal-web.web-night-preview :is(.is-error, .student-profile-form-error, .feedback-export-status.is-error) {
    background: #090909 !important;
    border-color: #7a3b3e !important;
    color: #ffaaa0 !important;
}

/* The name-history dropdown is mounted above the form and previously retained
   its day-mode white paper surface. */
body.personal-web.web-night-preview .student-history-menu {
    border-color: var(--night-border) !important;
    background: var(--night-card) !important;
    box-shadow: 0 14px 32px rgb(0 0 0 / .42) !important;
}

body.personal-web.web-night-preview .student-history-item {
    border-bottom-color: var(--night-divider) !important;
    background: transparent !important;
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview .student-history-item:hover,
body.personal-web.web-night-preview .student-history-item:focus-visible {
    background: #101010 !important;
    color: var(--night-brand) !important;
    outline: none;
}

body.personal-web.web-night-preview .personal-confirm-icon {
    border-color: var(--night-border) !important;
    background: #101010 !important;
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview .personal-confirm-card h2 {
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview .personal-confirm-card p {
    color: var(--night-muted) !important;
}

/* The floating route switch is utility chrome rather than a blue tile. */
body.personal-web.web-night-preview #nightRouteSwitcher,
body.personal-web.web-night-preview .night-route-switcher {
    background: var(--night-card) !important;
    border-color: var(--night-border) !important;
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview #nightRouteSwitcher:hover,
body.personal-web.web-night-preview .night-route-switcher:hover {
    background: var(--night-card) !important;
    border-color: var(--night-brand) !important;
}

body.personal-web.web-night-preview :is(#nightRouteSwitcher, .night-route-switcher) :is(.night-route-switcher-icon, [data-lucide], svg.lucide) {
    background: transparent !important;
    color: var(--night-brand) !important;
}

/* --------------------------------------------------------------------------
 * Dark-mode readability and state boundaries.
 * -------------------------------------------------------------------------- */
/* Introductory copy and secondary option labels must stay readable gray on
   the black card rather than inheriting their day-mode navy. */
body.personal-web.web-night-preview :is(
    .web-login-welcome-list li,
    .web-login-welcome-list li > span,
    .feedback-export-student-name,
    .feedback-export-student-meta,
    .feedback-export-student-pager :is(span, strong, small)
) {
    color: var(--night-soft-text) !important;
}

body.personal-web.web-night-preview .feedback-export-student-option.is-active .feedback-export-student-name {
    color: var(--night-text) !important;
}

/* Day-mode dialogs use several slate / navy text values for helper copy. On a
   black surface those values are not a useful hierarchy—they are simply too
   dim to read. Keep the blue reserved for actions, icons, and selected edges;
   all explanatory copy uses the neutral light-gray tier instead. */
body.personal-web.web-night-preview :is(
    .copy-success-summary p,
    .feedback-image-generator-title p,
    .feedback-image-config-summary,
    .feedback-image-text-editor small,
    .feedback-image-config-group legend,
    .feedback-image-font-options small,
    .feedback-image-font-license-note,
    .feedback-image-loading-note,
    .feedback-image-preview-area,
    .delete-profile-desc,
    .apply-last-web-desc,
    .apply-last-web-status,
    .generation-draft-desc,
    .generation-draft-meta,
    .generation-draft-preview-empty,
    .generation-draft-preview-item,
    .generation-draft-preview-muted,
    .generation-draft-confirm-desc,
    .web-generate-quota-detail-header p,
    .web-generate-quota-row small,
    .feedback-template-modal-note,
    .feedback-template-choice-main small,
    .personal-emoji-help-content,
    .invalid-input-reason-content,
    .invalid-input-reason-content ul,
    .invalid-input-reason-tip,
    .generation-options-status,
    .web-config-sync-desc p,
    .feedback-export-heading p,
    .feedback-export-final-quota-rule,
    .classroom-status-preset-hint,
    .web-quota-insufficient-detail,
    .web-quota-insufficient-row > span,
    .voice-quick-generate-heading p,
    .voice-quick-modal-toolbar,
    .voice-quick-generate-kicker,
    .voice-quick-generate-status,
    .voice-quick-recognition-scope,
    .voice-quick-transcript-preview,
    .voice-quick-generate-note,
    .follow-qr-fallback,
    #followQrDesc,
    .content-safety-modal-message,
    .subject-modal-title.welcome,
    .student-profile-limit,
    .lesson-meta-modal-hint,
    .lesson-meta-save-scope-title,
    .lesson-meta-modal-title span,
    .usage-guide-card p,
    .developer-notice-greeting,
    .developer-notice-card p
) {
    color: var(--night-soft-text) !important;
}

/* The emoji guide is the same explanatory tier. Its example chips carry text
   rather than a selected state, so they should be white/gray—not day navy. */
body.personal-web.web-night-preview .personal-emoji-help-examples span {
    background: var(--night-card) !important;
    border-color: var(--night-border) !important;
    color: var(--night-text) !important;
}

/* These are actionable choices, so their labels stay primary white while the
   detail beneath each label is the quieter gray tier. */
body.personal-web.web-night-preview :is(
    .feedback-image-font-options label > span,
    .feedback-image-template-choice
) {
    background: var(--night-card) !important;
    border-color: var(--night-border) !important;
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview :is(
    .feedback-image-font-options label:has(input:checked) > span,
    .feedback-image-template-options label:has(input:checked) > span
) {
    background: var(--night-hover) !important;
    border-color: var(--night-brand) !important;
}

body.personal-web.web-night-preview :is(
    .feedback-image-font-license-note,
    .voice-quick-generate-kicker
) :is([data-lucide], svg.lucide) {
    color: var(--night-soft-text) !important;
}

body.personal-web.web-night-preview .voice-quick-recognition-scope :is([data-lucide], svg.lucide) {
    color: var(--night-brand) !important;
}

/* State messages retain their meaning, but use colors bright enough for the
   dark surface rather than their low-contrast day palette. */
body.personal-web.web-night-preview .voice-quick-generate-section[data-state="recording"] .voice-quick-generate-status,
body.personal-web.web-night-preview .voice-quick-generate-section[data-state="error"] .voice-quick-generate-status {
    color: #ffaaa0 !important;
}

body.personal-web.web-night-preview :is(
    .voice-quick-generate-section[data-state="processing"],
    .voice-quick-generate-section[data-state="preview"]
) .voice-quick-generate-status {
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview .content-safety-modal-guidelines {
    color: var(--night-brand) !important;
}

/* Inactive export steps are instructional copy, not disabled controls. Give
   their number and label the same readable gray tier; active steps retain the
   blue fill and white numeral. */
body.personal-web.web-night-preview .feedback-export-step:not(.is-active):not(.is-done) {
    color: var(--night-soft-text) !important;
}

body.personal-web.web-night-preview .feedback-export-step:not(.is-active):not(.is-done) span {
    background: var(--night-hover) !important;
    color: var(--night-soft-text) !important;
}

body.personal-web.web-night-preview :is(
    .feedback-export-step.is-active,
    .feedback-export-step.is-done
) span {
    color: #fff !important;
}

body.personal-web.web-night-preview :is(
    .generation-draft-preview-title,
    .usage-guide-card .usage-guide-signature
) {
    color: var(--night-text) !important;
}

/* A few status surfaces also owned pale day fills. Keep the semantic content,
   but remove the paper-like block and raise the contrast of its text. */
body.personal-web.web-night-preview .copy-success-icon {
    background: #090909 !important;
    border: 1px solid #25865b !important;
    color: #83d4a6 !important;
}

body.personal-web.web-night-preview :is(
    .feedback-image-ready-actions > span,
    .web-quota-insufficient-no-deduct
) {
    color: #83d4a6 !important;
}

body.personal-web.web-night-preview .delete-profile-icon {
    background: #090909 !important;
    border: 1px solid #7a3b3e !important;
    color: #ffaaa0 !important;
}

body.personal-web.web-night-preview .delete-profile-target {
    background: #090909 !important;
    border-color: #7a3b3e !important;
    color: #ffaaa0 !important;
}

body.personal-web.web-night-preview .voice-quick-generate-limit small {
    color: var(--night-soft-text) !important;
}

/* --------------------------------------------------------------------------
 * Voice recognition: mode picker, notice and detailed review.
 *
 * These views are rendered inside the existing voice modal, but bring day-mode
 * gradients and paper-like inner cards of their own.  Keep the whole flow on
 * the same neutral surface hierarchy as the rest of the night theme: white is
 * reserved for primary-action text, and blue is reserved for active edges and
 * intentional actions.
 * -------------------------------------------------------------------------- */
body.personal-web.web-night-preview :is(
    .voice-quick-mode-picker,
    .voice-quick-notice,
    .voice-quick-detailed-review
) {
    background: var(--night-card) !important;
    background-image: none !important;
    border-color: var(--night-border) !important;
    box-shadow: none !important;
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview :is(
    .voice-quick-mode-card,
    .voice-quick-other-mode,
    .voice-quick-notice-step,
    .voice-quick-notice-consent
) {
    background: var(--night-card) !important;
    border-color: var(--night-border) !important;
    color: var(--night-text) !important;
    box-shadow: none !important;
}

body.personal-web.web-night-preview :is(
    .voice-quick-mode-card,
    .voice-quick-other-mode
):where(:not(:disabled)):is(:hover, :focus-visible) {
    background: var(--night-hover) !important;
    border-color: var(--night-brand) !important;
    color: var(--night-text) !important;
    outline: none;
    transform: none !important;
}

body.personal-web.web-night-preview :is(
    .voice-quick-view-heading h2,
    .voice-quick-notice-hero h2,
    .voice-quick-mode-card strong,
    .voice-quick-other-mode strong,
    .voice-quick-notice-step strong,
    .voice-quick-detailed-fields label
) {
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview :is(
    .voice-quick-view-heading p,
    .voice-quick-notice-hero p,
    .voice-quick-mode-card small,
    .voice-quick-other-mode small,
    .voice-quick-notice-step small,
    .voice-quick-notice-check,
    .voice-quick-notice-quota
) {
    color: var(--night-soft-text) !important;
}

body.personal-web.web-night-preview .voice-quick-mode-icon {
    background: var(--night-hover) !important;
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview .voice-quick-mode-icon :is([data-lucide], svg.lucide) {
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview .voice-quick-other-mode-action,
body.personal-web.web-night-preview :is(.voice-quick-notice-check, .voice-quick-notice-quota) a {
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview .voice-quick-detailed-fields textarea {
    background: var(--night-card) !important;
    border-color: var(--night-border) !important;
    color: var(--night-text) !important;
    box-shadow: none !important;
}

body.personal-web.web-night-preview .voice-quick-detailed-fields textarea:not(:read-only):is(:focus, :focus-visible) {
    background: var(--night-card) !important;
    border-color: var(--night-brand) !important;
    outline: none;
    box-shadow: none !important;
}

body.personal-web.web-night-preview .voice-quick-suggestion {
    background: var(--night-hover) !important;
    border-color: var(--night-border) !important;
    color: var(--night-brand) !important;
    box-shadow: none !important;
}

body.personal-web.web-night-preview .voice-quick-suggestion:is(:hover, :focus-visible) {
    background: var(--night-hover) !important;
    border-color: var(--night-brand) !important;
    color: var(--night-brand) !important;
    outline: none;
}

body.personal-web.web-night-preview :is(
    .generation-draft-actions,
    .web-generate-quota-formula
) {
    background: var(--night-card) !important;
    border-color: var(--night-border) !important;
}

/* The eleven generation modules use a light-gray information tier.  Blue is
   reserved for borders, controls, and the active state—not body copy. */
body.personal-web.web-night-preview #personalGeneratorView :is(
    .field-label,
    .hint,
    .module-subhead,
    .module-subhead small,
    .class-test-stage-title,
    .homework-completion-level-title,
    .homework-completion-score-level,
    .classroom-status-label,
    .next-lesson-label,
    .next-lesson-toggle,
    .feedback-template-generation-preview-item > p,
    .my-template-preview-text,
    .template-block p,
    .template-section-header small
) {
    color: var(--night-soft-text) !important;
}

body.personal-web.web-night-preview #personalGeneratorView :is(
    .no-homework-toggle,
    .no-problem-toggle,
    .generate-quota-estimate,
    .generate-ai-note,
    .result-ai-notice,
    .feedback-template-generation-name
) {
    color: var(--night-soft-text) !important;
}

/* Keep the compact 首 / 尾 position cue blue; the saved lesson content itself
   is content, so it remains white like the rest of the chip. */
body.personal-web.web-night-preview #personalGeneratorView .lesson-chip-position-tag {
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview #personalGeneratorView .lesson-chip-text {
    color: var(--night-text) !important;
}

/* Applying prior feedback is a three-way selection.  Its selected outline
   and quiet fill must win over the generic dark button reset. */
body.personal-web.web-night-preview .apply-last-web-option {
    background: var(--night-card) !important;
    border: 1px solid var(--night-border) !important;
    color: var(--night-soft-text) !important;
    box-shadow: none !important;
}

body.personal-web.web-night-preview .apply-last-web-option :is([data-lucide], svg.lucide) {
    color: var(--night-muted) !important;
}

body.personal-web.web-night-preview .apply-last-web-option:is(.is-selected, [aria-pressed="true"]) {
    background: var(--night-hover) !important;
    border-color: var(--night-brand) !important;
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview .apply-last-web-option:is(.is-selected, [aria-pressed="true"]) :is([data-lucide], svg.lucide) {
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview .apply-last-web-option:not(:disabled):is(:hover, :focus-visible) {
    background: var(--night-hover) !important;
    border-color: var(--night-brand) !important;
    color: var(--night-text) !important;
    outline: none;
}

/* These two settings also have a selected state that the global dark button
   reset previously flattened into its unselected surface. */
body.personal-web.web-night-preview :is(.my-template-card.is-active, .classroom-status-preset-default.is-on) {
    background: var(--night-hover) !important;
    border-color: var(--night-brand) !important;
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview .classroom-status-preset-default.is-on small {
    color: var(--night-soft-text) !important;
}

/* Day mode uses paper-white badges for upcoming steps.  Keep those badges
   visible on the dark workflow card without cutting white holes into it. */
body.personal-web.web-night-preview .personal-generation-progress-step:not(.is-current) .personal-generation-step-number {
    background: var(--night-hover) !important;
    border-color: var(--night-border) !important;
}

/* Day mode still assigns navy/slate text directly to these descendants, so a
   dark parent color cannot reach them through inheritance. Keep every piece
   of instructional copy on the readable light-gray tier; blue remains only
   on icons, numbered badges, selected borders, and other deliberate accents. */
body.personal-web.web-night-preview :is(
    .account-access-restricted-description,
    .web-login-status,
    .web-login-user,
    .personal-session-rule p,
    .personal-generation-progress-step:not(.is-current) .personal-generation-step-number,
    .personal-generation-student-card > span,
    .meta-title-text,
    .meta-row-label,
    .time-divider,
    .recipient-subtitle,
    .post-tools-heading-title,
    .post-tools-note,
    .custom-tool-panel-head > span,
    .custom-tool-structure-title,
    .custom-tool-structure-desc,
    .settings-workspace-status,
    .context-unavailable,
    .score-input-wrap > span
) {
    color: var(--night-soft-text) !important;
}

body.personal-web.web-night-preview .generation-option-button.is-disabled .generation-option-button-title {
    color: var(--night-muted) !important;
}

body.personal-web.web-night-preview #feedbackExportModal :is(
    .feedback-export-section-title,
    .feedback-export-section-title > span,
    .feedback-export-choice small,
    .feedback-export-field-note,
    .feedback-export-preview-slider-row,
    .feedback-export-title-head label,
    .feedback-export-summary-item > span
) {
    color: var(--night-soft-text) !important;
}

body.personal-web.web-night-preview #feedbackExportModal :is(
    .feedback-export-choice strong,
    .feedback-export-select-title strong,
    .feedback-export-summary-item > strong
) {
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview #feedbackExportModal .feedback-export-step:not(.is-active):not(.is-done) > strong {
    color: var(--night-soft-text) !important;
}

@media (max-width: 760px) {
    body.personal-web.web-night-preview {
        background: #000 !important;
    }

    body.personal-web.web-night-preview .mobile-menu-panel {
        background: var(--night-sidebar) !important;
        border-color: var(--night-border) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.personal-web.web-night-preview .data-view-switch::before,
    body.personal-web.web-night-preview .web-login-mode-tab-indicator {
        transition: none !important;
        will-change: auto;
    }

    body.personal-web.web-night-preview :is(.data-view-switch > button, .web-login-mode-tab, .teacher-cross-product-entry) {
        transition: none !important;
    }
}

/* --------------------------------------------------------------------------
 * Voice recognition floating flow v2
 *
 * Keep the new in-modal recorder, processing, review and result surfaces on
 * the same quiet night hierarchy.  Day mode owns the pale-blue treatment;
 * night mode keeps blue for deliberate actions and focus edges only.
 * -------------------------------------------------------------------------- */
body.personal-web.web-night-preview #voiceQuickModal .voice-quick-modal-card {
    --voice-quick-blue: var(--night-brand);
    --voice-quick-blue-dark: #78aaff;
    --voice-quick-blue-soft: #10213c;
    --voice-quick-blue-pale: #101827;
    --voice-quick-border: var(--night-border);
    --voice-quick-ink: var(--night-text);
    --voice-quick-copy: var(--night-soft-text);
    /* The current view supplies the one visible dark panel. */
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview .voice-quick-modal-close {
    background: var(--night-hover) !important;
    border-color: var(--night-border) !important;
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview .voice-quick-modal-close:is(:hover, :focus-visible) {
    background: #14213a !important;
    border-color: var(--night-brand) !important;
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview :is(
    .voice-quick-mode-picker,
    .voice-quick-notice,
    .voice-quick-detailed-review,
    .voice-quick-generate-section,
    .voice-quick-processing,
    .voice-quick-uploaded-review,
    .voice-quick-transcript-review,
    .voice-quick-result
) {
    background: var(--night-card) !important;
    background-image: none !important;
    border-color: var(--night-border) !important;
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview :is(
    .voice-quick-mode-card,
    .voice-quick-notice-step,
    .voice-quick-notice-consent,
    .voice-quick-recorder-error,
    .voice-quick-processing-card,
    .voice-quick-transcript-review-card,
    .voice-quick-detailed-row,
    .voice-quick-recommendation-group,
    .voice-quick-result-text
) {
    background: var(--night-hover) !important;
    border-color: var(--night-border) !important;
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview :is(
    .voice-quick-view-heading h2,
    .voice-quick-notice-hero h2,
    .voice-quick-mode-card strong,
    .voice-quick-notice-step strong,
    .voice-quick-recorder-idle h2,
    .voice-quick-recorder-preparing h2,
    .voice-quick-processing h2,
    .voice-quick-uploaded-review h2,
    .voice-quick-result h2,
    .voice-quick-transcript-review-card p,
    .voice-quick-detailed-label,
    .voice-quick-detailed-value,
    .voice-quick-recorder-live-timer
) {
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview :is(
    .voice-quick-view-heading p,
    .voice-quick-notice-hero p,
    .voice-quick-mode-card small,
    .voice-quick-notice-step small,
    .voice-quick-notice-check,
    .voice-quick-notice-quota,
    .voice-quick-notice-scope,
    .voice-quick-recorder-student,
    .voice-quick-recorder-live > p,
    .voice-quick-processing-card p,
    .voice-quick-processing-tip,
    .voice-quick-uploaded-meta,
    .voice-quick-uploaded-note,
    .voice-quick-transcript-review-card strong,
    .voice-quick-result-subtitle,
    .voice-quick-result-hint,
    .voice-quick-next-lesson-item,
    .voice-quick-next-lesson-item > span:first-child,
    .voice-quick-next-editor > label,
    .voice-quick-next-field,
    .voice-quick-next-field > strong,
    .voice-quick-recommendation-group > :is(strong, span:first-child)
) {
    color: var(--night-soft-text) !important;
}

body.personal-web.web-night-preview .voice-quick-mode-icon {
    background: #14213a !important;
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview .voice-quick-mode-icon :is([data-lucide], svg.lucide) {
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview .voice-quick-mode-card:where(:not(:disabled)):is(:hover, :focus-visible) {
    background: #121e31 !important;
    border-color: var(--night-brand) !important;
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview #voiceQuickModal .voice-quick-other-mode {
    background: var(--night-hover) !important;
    border-color: var(--night-border) !important;
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview #voiceQuickModal .voice-quick-other-mode:is(:hover, :focus-visible) {
    background: #14213a !important;
    border-color: var(--night-brand) !important;
}

body.personal-web.web-night-preview #voiceQuickModal .voice-quick-other-mode-copy strong {
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview #voiceQuickModal .voice-quick-other-mode-copy small {
    color: var(--night-soft-text) !important;
}

body.personal-web.web-night-preview #voiceQuickModal .voice-quick-other-mode-action {
    background: var(--night-card) !important;
    border-color: var(--night-border) !important;
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview :is(.voice-quick-notice-check, .voice-quick-notice-quota) a,
body.personal-web.web-night-preview .voice-quick-other-mode-action {
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview .voice-quick-recorder-student strong {
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview #voiceQuickModal :is(
    .voice-quick-automation,
    .voice-quick-automation-row
) {
    background: var(--night-hover) !important;
    border-color: var(--night-border) !important;
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview #voiceQuickModal :is(
    .voice-quick-automation-copy strong,
    .voice-quick-automation-copy small
) {
    color: var(--night-soft-text) !important;
}

body.personal-web.web-night-preview #voiceQuickModal .voice-quick-automation-copy strong {
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview #voiceQuickModal .voice-quick-automation-row input[type="checkbox"] {
    border-color: var(--night-border) !important;
    background: #28364a !important;
}

body.personal-web.web-night-preview #voiceQuickModal .voice-quick-automation-row input[type="checkbox"]:checked {
    border-color: var(--night-brand) !important;
    background: var(--night-brand) !important;
}

body.personal-web.web-night-preview :is(
    .voice-quick-waveform,
    .voice-quick-waveform[data-active="true"],
    .voice-quick-generate-section[data-state="recording"] .voice-quick-waveform,
    .voice-quick-generate-section[data-state="recording"] .voice-quick-waveform[data-active="true"]
) {
    background: #111b2a !important;
    border-color: var(--night-border) !important;
}

body.personal-web.web-night-preview .voice-quick-waveform::before {
    background: #28364a !important;
}

body.personal-web.web-night-preview :is(
    .voice-quick-waveform-bar,
    .voice-quick-generate-section[data-state="recording"] .voice-quick-waveform-bar
) {
    background: var(--night-brand) !important;
}

body.personal-web.web-night-preview .voice-quick-recorder-live-progress {
    color: var(--night-muted) !important;
}

body.personal-web.web-night-preview .voice-quick-recorder-live-progress > span:nth-child(2) {
    background: #263449 !important;
}

body.personal-web.web-night-preview .voice-quick-recorder-live-progress > span:nth-child(2)::after {
    background: var(--night-brand) !important;
}

body.personal-web.web-night-preview .voice-quick-record-button,
body.personal-web.web-night-preview .voice-quick-recording-stop {
    background: var(--night-brand) !important;
    border-color: var(--night-brand) !important;
    color: #fff !important;
}

body.personal-web.web-night-preview #voiceQuickModal .voice-quick-recording-pause {
    background: var(--night-card) !important;
    border-color: var(--night-brand) !important;
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview #voiceQuickModal .voice-quick-recording-pause:is(:hover, :focus-visible) {
    background: #14213a !important;
    border-color: #78aaff !important;
    color: #78aaff !important;
}

body.personal-web.web-night-preview :is(.voice-quick-record-button, .voice-quick-recording-stop):is(:hover, :focus-visible) {
    background: #78aaff !important;
    border-color: #78aaff !important;
    color: #fff !important;
}

/* The idle recorder starts as the inverse of its hover state, so its action
   becomes visually affirmative only when the teacher points to it. */
body.personal-web.web-night-preview #voiceQuickModal .voice-quick-record-button {
    background: var(--night-card) !important;
    border-color: var(--night-brand) !important;
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview #voiceQuickModal .voice-quick-record-button:is(:hover, :focus-visible) {
    background: var(--night-brand) !important;
    border-color: var(--night-brand) !important;
    color: #fff !important;
}

body.personal-web.web-night-preview :is(
    .voice-quick-retry-button,
    .voice-quick-processing-actions .secondary,
    .voice-quick-remove,
    .voice-quick-add-item button,
    .voice-quick-more-toggle,
    .voice-quick-reminder
) {
    background: var(--night-card) !important;
    border-color: var(--night-border) !important;
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview :is(
    .voice-quick-retry-button,
    .voice-quick-processing-actions .secondary,
    .voice-quick-add-item button,
    .voice-quick-more-toggle,
    .voice-quick-reminder
):is(:hover, :focus-visible) {
    background: #14213a !important;
    border-color: var(--night-brand) !important;
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview .voice-quick-remove {
    color: #ff9da7 !important;
    border-color: #65343a !important;
}

body.personal-web.web-night-preview .voice-quick-remove:is(:hover, :focus-visible) {
    background: #281619 !important;
    border-color: #ff9da7 !important;
    color: #ff9da7 !important;
}

body.personal-web.web-night-preview .voice-quick-generate-status {
    color: #ffaaa0 !important;
}

body.personal-web.web-night-preview .voice-quick-processing-spinner {
    /* Match the student-profile refresh loader: a quiet neutral ring with
       the active personal-blue segment. */
    border-color: var(--night-divider) !important;
    border-top-color: var(--night-brand) !important;
}

body.personal-web.web-night-preview .voice-quick-recorder-preparing-spinner {
    border-color: var(--night-divider) !important;
    border-top-color: var(--night-brand) !important;
}

body.personal-web.web-night-preview :is(.voice-quick-result-icon, .voice-quick-uploaded-icon) {
    background: var(--night-card) !important;
    border-color: #14213a !important;
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview :is(
    .voice-quick-chip,
    .voice-quick-recommendations .voice-quick-chip
) {
    background: #132039 !important;
    border-color: #2c4264 !important;
    color: #9bc0ff !important;
}

body.personal-web.web-night-preview .voice-quick-chip-positive {
    background: #10271d !important;
    border-color: #246a48 !important;
    color: #85e1ae !important;
}

body.personal-web.web-night-preview .voice-quick-chip-problem {
    background: #2a171b !important;
    border-color: #75404a !important;
    color: #ffa6b1 !important;
}

body.personal-web.web-night-preview .voice-quick-chip-muted {
    background: var(--night-card) !important;
    border-color: var(--night-border) !important;
    color: var(--night-muted) !important;
}

body.personal-web.web-night-preview :is(.voice-quick-detailed-value.empty, .voice-quick-empty) {
    color: var(--night-muted) !important;
}

body.personal-web.web-night-preview :is(
    .voice-quick-edit-item :is(input, textarea, select),
    .voice-quick-next-editor :is(input, textarea, select),
    .voice-quick-add-item input
) {
    background: var(--night-card) !important;
    border-color: var(--night-border) !important;
    color: var(--night-text) !important;
    box-shadow: none !important;
}

body.personal-web.web-night-preview :is(
    .voice-quick-edit-item,
    .voice-quick-next-editor
) :is(input, textarea, select):focus {
    border-color: var(--night-brand) !important;
    outline: none;
}

body.personal-web.web-night-preview .voice-quick-add-item input:focus {
    border-color: var(--night-brand) !important;
    outline: none;
}

body.personal-web.web-night-preview .voice-quick-reminder:is(.is-active, [aria-pressed="true"]) {
    background: #14213a !important;
    border-color: var(--night-brand) !important;
    color: var(--night-brand) !important;
}

/* Voice recorder preset editor: one in-flow view, with the same night
   surfaces as the other voice-flow panels. */
body.personal-web.web-night-preview #voiceQuickModal :is(
    .voice-quick-preset-panel,
    .voice-quick-preset-entry,
    .voice-quick-preset-template,
    .voice-quick-preset-tone-choice,
    .voice-quick-preset-option-grid button
) {
    background: var(--night-card) !important;
    border-color: var(--night-border) !important;
    color: var(--night-text) !important;
    box-shadow: none !important;
}

body.personal-web.web-night-preview #voiceQuickModal :is(
    .voice-quick-preset-entry-copy strong,
    .voice-quick-preset-template > span:first-child strong,
    .voice-quick-preset-group h3
) {
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview #voiceQuickModal :is(
    .voice-quick-preset-entry-copy small,
    .voice-quick-preset-template > span:first-child small,
    .voice-quick-preset-group > p,
    .voice-quick-preset-field > span
) {
    color: var(--night-muted) !important;
}

body.personal-web.web-night-preview #voiceQuickModal :is(
    .voice-quick-preset-entry [data-lucide],
    .voice-quick-preset-template-action
) {
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview #voiceQuickModal :is(
    .voice-quick-preset-entry,
    .voice-quick-preset-template,
    .voice-quick-preset-tone-choice,
    .voice-quick-preset-option-grid button
):is(:hover, :focus-visible, .is-active, [aria-pressed="true"]) {
    background: #14213a !important;
    border-color: var(--night-brand) !important;
    color: var(--night-brand) !important;
    outline: none;
}

/* Batch student import follows the same dark modal surfaces while retaining
   the blue links that mark the optional import route and quota details. */
body.personal-web.web-night-preview :is(
    .bulk-student-import-step-intro,
    .bulk-student-import-gender-field,
    .bulk-student-import-review-row,
    .bulk-student-import-review-empty,
    .bulk-student-import-gender-toggle,
    .bulk-student-import-row-gender-toggle,
    .bulk-student-import-names-field textarea,
    .bulk-student-import-review-row input
) {
    background: var(--night-card) !important;
    border-color: var(--night-border) !important;
    color: var(--night-text) !important;
    box-shadow: none !important;
}

body.personal-web.web-night-preview :is(
    .student-profile-form-sync-note,
    .bulk-student-import-step-label,
    .bulk-student-import-confirm-subtitle,
    .bulk-student-import-step-intro span,
    .bulk-student-import-names-count,
    .bulk-student-import-review-row label,
    .bulk-student-import-review-row-head strong > span,
    .bulk-student-import-quota-notice,
    .bulk-student-import-quota-notice strong,
    .bulk-student-import-quota-notice p
) {
    color: var(--night-muted) !important;
}

body.personal-web.web-night-preview :is(
    .bulk-student-import-step-intro strong,
    .bulk-student-import-review-row-head strong
) {
    color: var(--night-text) !important;
}

body.personal-web.web-night-preview :is(
    .student-profile-form-sync-note button,
    .bulk-student-import-quota-detail-link
) {
    color: var(--night-brand) !important;
}

body.personal-web.web-night-preview :is(
    .bulk-student-import-names-field textarea,
    .bulk-student-import-review-row input
):focus {
    border-color: var(--night-brand) !important;
    outline: none;
}