:root {
  color-scheme: light;
  --md-primary: #0b57d0;
  --md-on-primary: #ffffff;
  --md-primary-container: #d3e3fd;
  --md-on-primary-container: #041e49;
  --md-secondary: #5a5c7c;
  --md-secondary-container: #dce2f9;
  --md-on-secondary-container: #131c2b;
  --md-tertiary-container: #ffd8ee;
  --md-on-tertiary-container: #2e1125;
  --md-surface: #faf9fd;
  --md-surface-container-low: #f3f3fa;
  --md-surface-container: #eeedf3;
  --md-surface-container-high: #e9e8ef;
  --md-surface-container-highest: #e3e2e6;
  --md-on-surface: #1b1b1f;
  --md-on-surface-variant: #44474e;
  --md-outline: #74777f;
  --md-outline-variant: #c4c6d0;
  --md-inverse-surface: #303034;
  --md-inverse-on-surface: #f2f0f4;
  --md-inverse-primary: #a8c7fa;
  --md-error: #b3261e;
  --md-on-error: #ffffff;
  --md-error-container: #f9dedc;
  --md-on-error-container: #410e0b;
  --md-shadow: #000000;
  --md-scrim: #000000;
  --bg: var(--md-surface);
  --panel: var(--md-surface-container-low);
  --panel-2: var(--md-surface-container);
  --line: var(--md-outline-variant);
  --text: var(--md-on-surface);
  --muted: var(--md-on-surface-variant);
  --accent: var(--md-primary);
  --ok: var(--md-primary);
  --bad: var(--md-error);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --md-primary: #a8c7fa;
  --md-on-primary: #062e6f;
  --md-primary-container: #0842a0;
  --md-on-primary-container: #d3e3fd;
  --md-secondary: #c3c6ea;
  --md-secondary-container: #424659;
  --md-on-secondary-container: #dce2f9;
  --md-tertiary-container: #633b52;
  --md-on-tertiary-container: #ffd8ee;
  --md-surface: #111318;
  --md-surface-container-low: #1a1c20;
  --md-surface-container: #1e2024;
  --md-surface-container-high: #292a2f;
  --md-surface-container-highest: #34353a;
  --md-on-surface: #e3e2e6;
  --md-on-surface-variant: #c4c6d0;
  --md-outline: #8e9099;
  --md-outline-variant: #44474e;
  --md-inverse-surface: #e3e2e6;
  --md-inverse-on-surface: #303034;
  --md-inverse-primary: #0b57d0;
  --md-error: #f2b8b5;
  --md-on-error: #601410;
  --md-error-container: #8c1d18;
  --md-on-error-container: #f9dedc;
}

body,
.app-shell,
.side-panel,
body.detail-route .side-panel {
  background: var(--md-surface) !important;
  color: var(--md-on-surface) !important;
}

a,
.template-meta .template-usage,
.field-hint code,
.channel-yt-box code {
  color: var(--md-primary) !important;
}

.admin-nav,
body.detail-route .side-head,
body.detail-route .side-foot {
  border-color: var(--md-outline-variant) !important;
  background: color-mix(in srgb, var(--md-surface) 94%, transparent) !important;
}

.admin-brand,
.admin-nav-links a:hover,
.admin-nav-links a.active,
.section-head h2,
.side-head h2 {
  color: var(--md-on-surface) !important;
}

.admin-brand-mark,
.brand-mark {
  border-color: var(--md-primary) !important;
  background: var(--md-primary-container) !important;
  color: var(--md-on-primary-container) !important;
}

.admin-nav-links a,
.admin-nav-note,
.sub,
.msg,
.field-hint,
.channel-meta,
.template-meta p,
.post-preview-label,
.sound-filename,
.thumb-placeholder,
.media-chevron,
label {
  color: var(--md-on-surface-variant) !important;
}

.admin-nav-links a.active::after {
  background: var(--md-primary) !important;
}

button,
button.ok,
.sound-file-label .sound-file-btn {
  border-color: var(--md-primary) !important;
  background: var(--md-primary) !important;
  color: var(--md-on-primary) !important;
}

button.ghost,
.side-close,
.theme-toggle,
.profile-button {
  border-color: var(--md-outline-variant) !important;
  background: var(--md-surface-container-low) !important;
  color: var(--md-on-surface) !important;
}

button.danger,
.confirm-actions .danger {
  border-color: var(--md-error) !important;
  background: var(--md-error) !important;
  color: var(--md-on-error) !important;
}

button:disabled {
  border-color: var(--md-outline-variant) !important;
  background: var(--md-surface-container-highest) !important;
  color: var(--md-on-surface-variant) !important;
}

input,
select,
textarea {
  border-color: var(--md-outline) !important;
  background: var(--md-surface-container-low) !important;
  color: var(--md-on-surface) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--md-on-surface-variant) !important;
}

input:focus,
select:focus,
textarea:focus,
body.detail-route input:focus,
body.detail-route select:focus,
body.detail-route textarea:focus {
  border-color: var(--md-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-primary) 18%, transparent) !important;
}

.topbar,
.channels-section {
  border-color: var(--md-outline-variant) !important;
}

.yt-banner,
.catalog-toolbar,
.template-card,
.channel-card,
.empty-note,
.channel-yt-box,
.phone-tips-box,
.thumb-box,
.sound-box,
.post-preview,
.confirm-dialog,
.profile-menu,
body.detail-route #channel-form,
body.detail-route .detail-card {
  border-color: var(--md-outline-variant) !important;
  background: var(--md-surface-container-low) !important;
  color: var(--md-on-surface) !important;
  box-shadow: 0 5px 18px color-mix(in srgb, var(--md-shadow) 8%, transparent) !important;
}

body.detail-route #channel-form {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

.template-card:hover,
.template-card.selected,
.channel-card:hover,
.channel-card.active {
  border-color: var(--md-primary) !important;
  box-shadow: 0 5px 18px color-mix(in srgb, var(--md-primary) 13%, transparent) !important;
}

.template-preview,
.thumb-preview-wrap,
.side-preview,
.post-preview-box {
  border-color: var(--md-outline-variant) !important;
  background: var(--md-inverse-surface) !important;
  color: var(--md-inverse-on-surface) !important;
}

.template-chip,
.pill,
.catalog-counts span {
  border-color: var(--md-outline-variant) !important;
  background: var(--md-secondary-container) !important;
  color: var(--md-on-secondary-container) !important;
}

.thumb-box {
  background: var(--md-primary-container) !important;
  color: var(--md-on-primary-container) !important;
}

.sound-box,
.phone-tips-box {
  background: var(--md-tertiary-container) !important;
  color: var(--md-on-tertiary-container) !important;
}

.pill.warn,
.badge.off,
.msg.warn,
.status-alert {
  border-color: var(--md-error) !important;
  background: var(--md-error-container) !important;
  color: var(--md-on-error-container) !important;
}

.badge.on,
.status-item.good {
  border-color: var(--md-primary) !important;
  background: var(--md-primary-container) !important;
  color: var(--md-on-primary-container) !important;
}

.status-item.warn {
  border-color: var(--md-secondary) !important;
  background: var(--md-secondary-container) !important;
  color: var(--md-on-secondary-container) !important;
}

.cpu-status.bad {
  border-color: var(--md-error) !important;
  background: var(--md-error-container) !important;
  color: var(--md-on-error-container) !important;
}

.badge.on {
  color: var(--md-on-primary-container) !important;
}

.status-item {
  border-color: var(--md-outline-variant) !important;
  background: var(--md-surface-container-low) !important;
}

.status-item small,
.status-item strong {
  color: inherit !important;
}

.status-dot {
  background: var(--md-outline) !important;
}

.status-item.good .status-dot {
  background: var(--md-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-primary) 16%, transparent) !important;
}

.status-item.bad .status-dot {
  background: var(--md-error) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-error) 16%, transparent) !important;
}

.status-item.warn .status-dot,
.status-item.warn .cpu-meter b {
  background: var(--md-secondary) !important;
}

.cpu-status.bad .cpu-meter b {
  background: var(--md-error) !important;
}

.channel-yt-actions {
  background: linear-gradient(
    180deg,
    transparent,
    var(--md-surface-container-low) 28%
  ) !important;
}

.post-yt-note {
  border-color: var(--md-primary) !important;
  background: var(--md-primary-container) !important;
  color: var(--md-on-primary-container) !important;
}

.post-yt-note strong {
  color: var(--md-on-primary-container) !important;
}

.side-backdrop,
.confirm-backdrop {
  background: color-mix(in srgb, var(--md-scrim) 48%, transparent) !important;
}

.toast {
  border-color: var(--md-outline-variant) !important;
  background: var(--md-inverse-surface) !important;
  color: var(--md-inverse-on-surface) !important;
}

.toast.success {
  border-color: var(--md-inverse-primary) !important;
  background: var(--md-inverse-surface) !important;
}

.toast.error {
  border-color: var(--md-error) !important;
  background: var(--md-error-container) !important;
  color: var(--md-on-error-container) !important;
}

.profile-menu .profile-logout,
.login-error {
  color: var(--md-error) !important;
}

body:has(.login-shell) {
  background: var(--md-surface) !important;
}

.login-card {
  border-color: var(--md-outline-variant) !important;
  background: var(--md-surface-container-low) !important;
  color: var(--md-on-surface) !important;
  box-shadow: 0 24px 70px color-mix(in srgb, var(--md-shadow) 13%, transparent) !important;
}

.login-card .eyebrow {
  color: var(--md-primary) !important;
}

.login-card input {
  border-color: var(--md-outline) !important;
  background: var(--md-surface) !important;
  color: var(--md-on-surface) !important;
}

.login-card button {
  border-color: var(--md-primary) !important;
  background: var(--md-primary) !important;
  color: var(--md-on-primary) !important;
}