/* Shared light/dark tokens — admin, teacher, channel portals */

html[data-theme="dark"] {
    color-scheme: dark;
    --ink: #e6ece8;
    --muted: #96a39d;
    --line: #2c3834;
    --paper: #101512;
    --surface: #18201c;
    --surface-raised: #1f2925;
    --link: #6eb3ff;
    --link-soft: color-mix(in srgb, var(--link) 18%, var(--surface));
    --shadow: 0 18px 50px rgba(0, 0, 0, .42);
}

html[data-theme="dark"] body[data-portal="teacher"] {
    --accent-soft: color-mix(in srgb, var(--accent) 22%, #18201c);
}

html[data-theme="dark"] body[data-portal="channel"] {
    --accent-soft: color-mix(in srgb, var(--accent) 22%, #141c28);
}

html[data-theme="dark"] body[data-portal="admin"] {
    --ink: #e2e8f0;
    --muted: #94a3b8;
    --line: #334155;
    --paper: #0b1220;
    --surface: #151d2e;
    --surface-raised: #1a2438;
    --link: #7cb4ff;
    --link-soft: color-mix(in srgb, var(--link) 20%, var(--surface));
    --accent-soft: #1e3a5f;
    --nav-elevated: #0f172a;
    --shadow: 0 12px 32px rgba(0, 0, 0, .45);
    --shadow-lg: 0 24px 64px rgba(0, 0, 0, .55);
    --admin-topbar-bg: rgba(11, 18, 32, .92);
    --admin-topbar-border: rgba(51, 65, 85, .85);
    --admin-chip-bg: rgba(21, 29, 46, .92);
    --admin-toolbar-bg: #1a2438;
    --admin-panel-head-bg: linear-gradient(180deg, #1a2438, #151d2e);
    --admin-row-hover: #1e293b;
    --admin-progress-track: #334155;
    --admin-secondary-hover: #1e293b;
    --admin-input-bg: #121a2b;
    --admin-avatar-bg: color-mix(in srgb, var(--link) 22%, var(--surface));
    --admin-avatar-ink: #bfdbfe;
}

html[data-theme="dark"] .login-panel {
    background: color-mix(in srgb, var(--paper) 88%, #000);
}

html[data-theme="dark"] .login-card {
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    border-color: var(--line);
}

html[data-theme="dark"] .field {
    color: var(--ink);
}

html[data-theme="dark"] .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
html[data-theme="dark"] .field select,
html[data-theme="dark"] .field textarea,
html[data-theme="dark"] .control {
    color: var(--ink);
    background: var(--surface);
    border-color: var(--line);
}

html[data-theme="dark"] .button.secondary,
html[data-theme="dark"] .button.danger {
    background: var(--surface);
    border-color: var(--line);
}

html[data-theme="dark"] .topbar {
    background: color-mix(in srgb, var(--paper) 90%, #000);
}

html[data-theme="dark"] .account-trigger {
    color: var(--ink);
    background: var(--surface);
    border-color: var(--line);
}

html[data-theme="dark"] .account-trigger:hover {
    background: color-mix(in srgb, var(--surface) 85%, var(--accent-soft));
    border-color: color-mix(in srgb, var(--line) 70%, var(--accent));
}

html[data-theme="dark"] .account-dropdown,
html[data-theme="dark"] .date-chip {
    background: var(--surface);
    border-color: var(--line);
    color: var(--ink);
}

html[data-theme="dark"] .assignment-list .check-row {
    background: var(--surface);
}

html[data-theme="dark"] .assignment-list .check-row:has(input:checked) {
    background: color-mix(in srgb, var(--accent-soft) 65%, var(--surface));
}

html[data-theme="dark"] .metric:not(.dark) {
    background: var(--surface);
    border-color: var(--line);
}

html[data-theme="dark"] .data-table th {
    background: var(--surface-raised);
    color: var(--muted);
}

html[data-theme="dark"] .data-table tbody tr {
    background: var(--surface);
}

html[data-theme="dark"] .data-table tbody tr:hover {
    background: color-mix(in srgb, var(--accent-soft) 35%, var(--surface));
}

html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .marketing-course-tabs,
html[data-theme="dark"] .marketing-course-filters,
html[data-theme="dark"] .toolbar,
html[data-theme="dark"] .module-toolbar,
html[data-theme="dark"] .business-filters,
html[data-theme="dark"] .analytics-placeholder,
html[data-theme="dark"] .material-tabs,
html[data-theme="dark"] .material-layout,
html[data-theme="dark"] .media-picker-dialog,
html[data-theme="dark"] .marketing-hub-card,
html[data-theme="dark"] .delivery-card,
html[data-theme="dark"] .course-card,
html[data-theme="dark"] .list-toolbar,
html[data-theme="dark"] .material-toolbar,
html[data-theme="dark"] .wallet-debt-panel,
html[data-theme="dark"] .annotation-shell,
html[data-theme="dark"] .annotation-page,
html[data-theme="dark"] .annotation-side,
html[data-theme="dark"] .annotation-pager,
html[data-theme="dark"] .cue-add-form {
    background: var(--surface);
    border-color: var(--line);
    color: var(--ink);
}

html[data-theme="dark"] .annotation-side .monitor-tabs {
    background: var(--surface-raised);
    border-bottom-color: var(--line);
}

html[data-theme="dark"] .annotation-side .user-presence {
    background: var(--surface);
    border-bottom-color: var(--line);
}

html[data-theme="dark"] .annotation-side .monitor-tabs button.active,
html[data-theme="dark"] .annotation-side .user-presence button.active {
    color: var(--link);
    border-bottom-color: var(--link);
}

html[data-theme="dark"] .cue-row:hover {
    background: var(--surface-raised);
}

html[data-theme="dark"] .cue-add-form .cue-hms input[type="number"]:focus,
html[data-theme="dark"] .cue-add-form .cue-input-wrap input:focus,
html[data-theme="dark"] .cue-add-form .cue-textarea-wrap textarea:focus {
    border-color: var(--link);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--link) 25%, transparent);
}

html[data-theme="dark"] .marketing-course-tabs button,
html[data-theme="dark"] .material-tabs button {
    color: var(--muted);
}

html[data-theme="dark"] .marketing-course-tabs button.active,
html[data-theme="dark"] .material-tabs button.active,
html[data-theme="dark"] .course-counts button.active {
    color: var(--link);
    border-color: var(--link);
}

html[data-theme="dark"] .category-item.active {
    color: var(--link);
    background: var(--link-soft);
}

html[data-theme="dark"] .badge.live {
    color: #ffb4ae;
    background: color-mix(in srgb, #db5045 22%, var(--surface));
}

html[data-theme="dark"] .badge.scheduled {
    color: #e8d48a;
    background: color-mix(in srgb, #c9a227 18%, var(--surface));
}

html[data-theme="dark"] .badge.ended,
html[data-theme="dark"] .badge.off {
    color: var(--muted);
    background: color-mix(in srgb, var(--muted) 18%, var(--surface));
}

html[data-theme="dark"] .badge.draft {
    color: #d4b4e8;
    background: color-mix(in srgb, #9b6bb8 18%, var(--surface));
}

html[data-theme="dark"] .badge.ok {
    color: #8fd9c4;
    background: color-mix(in srgb, #0f766e 22%, var(--surface));
}

html[data-theme="dark"] .badge.warn {
    color: #fbbf7a;
    background: color-mix(in srgb, #b54708 20%, var(--surface));
}

html[data-theme="dark"] .config-row,
html[data-theme="dark"] .danmaku-row {
    background: var(--surface-raised);
    border-color: var(--line);
}

html[data-theme="dark"] .media-picker-table tr.is-selected {
    background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface));
}

html[data-theme="dark"] .assignment-list .check-row:has(input:checked) {
    background: color-mix(in srgb, var(--link-soft) 80%, var(--surface));
}

html[data-theme="dark"] .topbar {
    background: color-mix(in srgb, var(--paper) 88%, #000);
}

html[data-theme="dark"] .page {
    color: var(--ink);
}

html[data-theme="dark"] .course-config-topbar,
html[data-theme="dark"] .course-config,
html[data-theme="dark"] .course-config-page,
html[data-theme="dark"] .config-main,
html[data-theme="dark"] .config-preview,
html[data-theme="dark"] .ondemand-section,
html[data-theme="dark"] .upload-dock-card,
html[data-theme="dark"] .transfer-dock-collapsed,
html[data-theme="dark"] .transfer-dock-expanded,
html[data-theme="dark"] .upload-progress,
html[data-theme="dark"] .config-tabs,
html[data-theme="dark"] .product-card,
html[data-theme="dark"] .homework-row,
html[data-theme="dark"] .report-row,
html[data-theme="dark"] .info-grid div,
html[data-theme="dark"] .broadcast-assist,
html[data-theme="dark"] .media-pick-card,
html[data-theme="dark"] .product-choice,
html[data-theme="dark"] .notice-block,
html[data-theme="dark"] .share-course-card,
html[data-theme="dark"] .share-domain-row,
html[data-theme="dark"] .switch-row,
html[data-theme="dark"] .choice-card {
    background: var(--surface);
    border-color: var(--line);
    color: var(--ink);
}

html[data-theme="dark"] .info-grid div,
html[data-theme="dark"] .broadcast-assist,
html[data-theme="dark"] .media-pick-card,
html[data-theme="dark"] .product-choice,
html[data-theme="dark"] .notice-block,
html[data-theme="dark"] .share-course-card,
html[data-theme="dark"] .share-domain-row {
    background: var(--surface-raised);
}

html[data-theme="dark"] .config-side button.active {
    background: var(--accent-soft);
    color: color-mix(in srgb, var(--accent) 75%, #fff);
}

html[data-theme="dark"] .config-side button:hover:not(.active) {
    background: color-mix(in srgb, var(--accent-soft) 35%, transparent);
}

html[data-theme="dark"] .choice-card:has(input:checked) {
    background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface));
}

html[data-theme="dark"] .config-row input,
html[data-theme="dark"] .product-choice input[type="number"],
html[data-theme="dark"] .danmaku-row input {
    background: var(--surface);
    border-color: var(--line);
    color: var(--ink);
}

html[data-theme="dark"] .phone-hint {
    color: var(--muted);
}

html[data-theme="dark"] .rank-row > b {
    color: var(--muted);
}

html[data-theme="dark"] .notice:not(.danger) {
    color: var(--ink);
    background: color-mix(in srgb, #c9a227 14%, var(--surface));
    border-color: color-mix(in srgb, #c9a227 32%, var(--line));
}

html[data-theme="dark"] .notice.danger,
html[data-theme="dark"] .wallet-debt-banner {
    color: #ffb4ae;
    background: color-mix(in srgb, #db5045 16%, var(--surface));
    border-color: color-mix(in srgb, #db5045 35%, var(--line));
}

html[data-theme="dark"] .wallet-debt-card b,
html[data-theme="dark"] .wallet-debt-panel h2 {
    color: #ffb4ae;
}

html[data-theme="dark"] .wallet-debt-card p,
html[data-theme="dark"] .wallet-debt-card small {
    color: var(--muted);
}

html[data-theme="dark"] .share-tips {
    color: var(--muted);
    background: color-mix(in srgb, #c9a227 12%, var(--surface));
    border-color: var(--line);
}

html[data-theme="dark"] .course-config-page .dialog-actions,
html[data-theme="dark"] .course-config-page-form .dialog-actions,
html[data-theme="dark"] .ondemand-page .dialog-actions {
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--paper) 85%, var(--surface)) 35%);
}

html[data-theme="dark"] .filter,
html[data-theme="dark"] .toolbar .control {
    background: var(--surface);
    border-color: var(--line);
    color: var(--ink);
}

html[data-theme="dark"] .filter.active {
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
    color: var(--ink);
}

html[data-theme="dark"] .notice {
    background: color-mix(in srgb, var(--accent-soft) 40%, var(--surface));
    border-color: var(--line);
    color: var(--ink);
}

html[data-theme="dark"] dialog,
html[data-theme="dark"] .dialog-card {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--line);
}

html[data-theme="dark"] .material-tabs {
    background: var(--surface);
    border-color: var(--line);
}

html[data-theme="dark"] .material-tabs button {
    color: var(--muted);
}

html[data-theme="dark"] .material-tabs button.active {
    color: color-mix(in srgb, var(--accent) 80%, #fff);
}

html[data-theme="dark"] .transfer-dock-header,
html[data-theme="dark"] .transfer-dock-tabs,
html[data-theme="dark"] .transfer-row {
    border-color: var(--line);
}

html[data-theme="dark"] .transfer-dock-tabs button {
    color: var(--muted);
}

html[data-theme="dark"] .transfer-dock-tabs button.active {
    color: var(--link);
    border-bottom-color: var(--link);
}

html[data-theme="dark"] .transfer-dock-minimize {
    color: var(--ink);
}

html[data-theme="dark"] .transfer-row-head b {
    color: var(--ink);
}

html[data-theme="dark"] .progress {
    background: color-mix(in srgb, var(--line) 55%, var(--surface));
}

html[data-theme="dark"] body[data-portal="admin"] .transfer-dock-collapsed,
html[data-theme="dark"] body[data-portal="admin"] .transfer-dock-expanded,
html[data-theme="dark"] body[data-portal="admin"] .upload-progress {
    background: var(--surface);
    border-color: var(--line);
}

html[data-theme="dark"] body[data-portal="admin"] .progress {
    background: var(--admin-progress-track);
}

html[data-theme="dark"] .toast {
    background: var(--surface);
    border-color: var(--line);
    color: var(--ink);
}

html[data-theme="dark"] .theme-toggle {
    min-width: 72px;
}

.login-theme-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

/* Monitor console (ref layout) in dark app chrome */
html[data-theme="dark"] .monitor-shell.ref {
    background: var(--paper);
    color: var(--ink);
}

html[data-theme="dark"] .monitor-shell.ref .monitor-head,
html[data-theme="dark"] .monitor-shell.ref .monitor-body,
html[data-theme="dark"] .monitor-shell.ref .monitor-main,
html[data-theme="dark"] .monitor-shell.ref .monitor-tools,
html[data-theme="dark"] .monitor-shell.ref .interaction,
html[data-theme="dark"] .monitor-shell.ref .monitor-dock,
html[data-theme="dark"] .monitor-shell.ref .monitor-users {
    background: var(--surface);
    border-color: var(--line);
    color: var(--ink);
}

html[data-theme="dark"] .monitor-shell.ref .monitor-brand b,
html[data-theme="dark"] .monitor-shell.ref .monitor-tabs button.active {
    color: color-mix(in srgb, var(--accent) 75%, #fff);
}

html[data-theme="dark"] .monitor-shell.ref .monitor-tabs button {
    color: var(--muted);
}

html[data-theme="dark"] .monitor-shell.ref .tool-card {
    background: color-mix(in srgb, var(--paper) 55%, var(--surface));
    border-color: var(--line);
}

html[data-theme="dark"] .monitor-shell.ref .feed-filters {
    background: color-mix(in srgb, var(--paper) 60%, var(--surface));
    border-color: var(--line);
}

html[data-theme="dark"] .monitor-shell.ref .monitor-publisher textarea,
html[data-theme="dark"] .monitor-shell.ref .announce-modes button {
    background: var(--surface);
    border-color: var(--line);
    color: var(--ink);
}

html[data-theme="dark"] body[data-portal="teacher"] .teacher-overview-hero {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 80%, var(--surface)), var(--surface));
}

html[data-theme="dark"] body[data-portal="teacher"] .teacher-todo-item,
html[data-theme="dark"] body[data-portal="teacher"] .teacher-notice {
    background: var(--surface);
    border-color: var(--line);
}

/* Admin portal surfaces */
html[data-theme="dark"] body[data-portal="admin"] .admin-workspace {
    background: var(--paper);
}

html[data-theme="dark"] body[data-portal="admin"] .admin-panel,
html[data-theme="dark"] body[data-portal="admin"] .admin-metric,
html[data-theme="dark"] body[data-portal="admin"] .admin-login-card {
    background: var(--surface);
    border-color: var(--line);
}

html[data-theme="dark"] body[data-portal="admin"] .admin-panel-head {
    background: var(--admin-panel-head-bg);
    border-color: var(--line);
}

html[data-theme="dark"] body[data-portal="admin"] .admin-list-toolbar,
html[data-theme="dark"] body[data-portal="admin"] .admin-billing-toolbar {
    background: var(--admin-toolbar-bg);
}

html[data-theme="dark"] body[data-portal="admin"] .admin-list-card,
html[data-theme="dark"] body[data-portal="admin"] .admin-list-card .table-wrap {
    background: var(--surface);
}

html[data-theme="dark"] body[data-portal="admin"] .data-table th {
    background: var(--admin-toolbar-bg);
    color: var(--muted);
}

html[data-theme="dark"] body[data-portal="admin"] .data-table tbody tr,
html[data-theme="dark"] body[data-portal="admin"] .data-table td {
    background: var(--surface);
    color: var(--ink);
}

html[data-theme="dark"] body[data-portal="admin"] .data-table tbody tr:hover td {
    background: var(--admin-row-hover);
}

html[data-theme="dark"] body[data-portal="admin"] .button.secondary {
    color: var(--ink);
    background: var(--surface);
    border-color: var(--line);
}

html[data-theme="dark"] body[data-portal="admin"] .button.secondary:hover {
    background: var(--admin-secondary-hover);
}

html[data-theme="dark"] body[data-portal="admin"] .field input,
html[data-theme="dark"] body[data-portal="admin"] .field select,
html[data-theme="dark"] body[data-portal="admin"] .field textarea,
html[data-theme="dark"] body[data-portal="admin"] .control {
    background: var(--admin-input-bg);
    color: var(--ink);
    border-color: var(--line);
}

html[data-theme="dark"] body[data-portal="admin"] .admin-topbar {
    background: var(--admin-topbar-bg);
    border-color: var(--admin-topbar-border);
}

html[data-theme="dark"] body[data-portal="admin"] .date-chip,
html[data-theme="dark"] body[data-portal="admin"] .account-trigger,
html[data-theme="dark"] body[data-portal="admin"] .account-dropdown {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--line);
}

html[data-theme="dark"] body[data-portal="admin"] .theme-toggle {
    color: var(--ink);
}

html[data-theme="dark"] body[data-portal="admin"] select option {
    background: var(--surface);
    color: var(--ink);
}

html[data-theme="dark"] body[data-portal="admin"] .admin-hero {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, var(--surface)), var(--surface));
    border-color: var(--line);
}

html[data-theme="dark"] body[data-portal="admin"] .admin-hero h2,
html[data-theme="dark"] body[data-portal="admin"] .admin-hero p {
    color: var(--ink);
}

html[data-theme="dark"] body[data-portal="admin"] .admin-health-item,
html[data-theme="dark"] body[data-portal="admin"] .admin-stack-table tbody tr {
    background: var(--surface);
}

html[data-theme="dark"] body[data-portal="admin"] .admin-login .login-panel {
    background: #070b14;
}

html[data-theme="dark"] body[data-portal="admin"] .admin-login-card {
    background: color-mix(in srgb, var(--surface) 95%, #000);
    border-color: var(--line);
}

html[data-theme="dark"] body[data-portal="admin"] .admin-login-card .field input {
    background: color-mix(in srgb, var(--paper) 50%, var(--surface));
    border-color: var(--line);
    color: var(--ink);
}

html[data-theme="dark"] body[data-portal="admin"] .admin-hero .button.secondary {
    color: var(--ink);
    background: var(--surface);
    border-color: var(--line);
}

html[data-theme="dark"] body[data-portal="admin"] .admin-hero .button.secondary:hover {
    background: var(--admin-secondary-hover);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--muted);
    opacity: 1;
}

html[data-theme="light"] {
    color-scheme: light;
}

html[data-theme="dark"] body[data-portal="admin"] .admin-list-toolbar.admin-billing-toolbar {
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--line);
}