:root {
  --md-sys-color-tertiary: #735471;
  --md-sys-color-on-tertiary: #fff;
  --md-sys-color-tertiary-container: #fdd7fa;
  --md-sys-color-on-tertiary-container: #2a122b;
  --md-sys-color-surface-container-low: #f3f5f5;
  --md-sys-color-surface-container-lowest: #fff;
  --md-sys-color-surface-container-highest: #e1e6e8;
  --md-sys-color-outline-variant: #c1c8cc;
  --md-sys-color-on-error: #fff;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #410002;
  --md-sys-color-inverse-surface: #2e3132;
  --md-sys-color-inverse-on-surface: #f0f1f1;
  --raemi-shadow-color: rgba(4, 35, 60, .18);
  color-scheme: light;
}

html[data-theme="dark"] {
  --md-sys-color-primary: #9dcef0;
  --md-sys-color-on-primary: #00344d;
  --md-sys-color-primary-container: #174d69;
  --md-sys-color-on-primary-container: #cce9fb;
  --md-sys-color-secondary: #b4c9d4;
  --md-sys-color-on-secondary: #20333c;
  --md-sys-color-secondary-container: #354a54;
  --md-sys-color-on-secondary-container: #d0e6f0;
  --md-sys-color-tertiary: #dfbbdc;
  --md-sys-color-on-tertiary: #402944;
  --md-sys-color-tertiary-container: #583f5b;
  --md-sys-color-on-tertiary-container: #fdd7fa;
  --md-sys-color-surface: #101416;
  --md-sys-color-surface-container-lowest: #0b0f11;
  --md-sys-color-surface-container-low: #181c1e;
  --md-sys-color-surface-container: #1c2022;
  --md-sys-color-surface-container-high: #272b2d;
  --md-sys-color-surface-container-highest: #323638;
  --md-sys-color-on-surface: #e1e3e3;
  --md-sys-color-on-surface-variant: #c0c8cc;
  --md-sys-color-outline: #899297;
  --md-sys-color-outline-variant: #40494d;
  --md-sys-color-error: #ffb4ab;
  --md-sys-color-on-error: #690005;
  --md-sys-color-error-container: #93000a;
  --md-sys-color-on-error-container: #ffdad6;
  --md-sys-color-inverse-surface: #e1e3e3;
  --md-sys-color-inverse-on-surface: #2e3132;
  --raemi-shadow-color: rgba(0, 0, 0, .42);
  color-scheme: dark;
}

html, body { background: var(--md-sys-color-surface); }
body, .raemi-site, .account-site, .drive-site, .webmaster-site, .legal-site { color: var(--md-sys-color-on-surface); }

.raemi-theme-menu { position: relative; z-index: 40; flex: 0 0 auto; margin-left: auto; }
.app-actions .raemi-theme-menu { margin-left: 0; }
.raemi-theme-menu + :is(.account-return, .legal-return) { margin-left: 0; }
.raemi-theme-menu > summary { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border-radius: 50%; color: var(--md-sys-color-on-surface-variant); cursor: pointer; list-style: none; outline: 0; transition: background .16s ease, color .16s ease, transform .16s ease; }
.raemi-theme-menu > summary::-webkit-details-marker { display: none; }
.raemi-theme-menu > summary:hover, .raemi-theme-menu[open] > summary { color: var(--md-sys-color-on-secondary-container); background: var(--md-sys-color-secondary-container); }
.raemi-theme-menu[open] > summary { transform: rotate(-8deg); }
.raemi-theme-popover { position: absolute; z-index: 50; top: calc(100% + 10px); right: 0; width: min(290px, calc(100vw - 24px)); padding: 9px; border: 1px solid var(--md-sys-color-outline-variant); border-radius: 22px; background: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface); box-shadow: 0 18px 54px var(--raemi-shadow-color); animation: raemi-theme-reveal .18s cubic-bezier(.2,.8,.2,1) both; }
.raemi-theme-popover button { display: grid; grid-template-columns: 38px minmax(0,1fr) 22px; align-items: center; gap: 10px; width: 100%; min-height: 54px; padding: 7px 10px; border: 0; border-radius: 16px; background: transparent; color: var(--md-sys-color-on-surface); font: inherit; text-align: left; cursor: pointer; }
.raemi-theme-popover button:hover { background: var(--md-sys-color-surface-container-high); }
.raemi-theme-popover button.is-selected { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.raemi-theme-popover button > .material-symbols-rounded:first-child { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 13px; background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-primary); font-size: 21px; }
.raemi-theme-popover button span:nth-child(2) { min-width: 0; }
.raemi-theme-popover strong, .raemi-theme-popover small { display: block; }
.raemi-theme-popover strong { font-size: 13px; font-weight: 600; }
.raemi-theme-popover small { margin-top: 2px; color: var(--md-sys-color-on-surface-variant); font-size: 10px; }
.raemi-theme-check { visibility: hidden; color: var(--md-sys-color-primary); font-size: 19px; }
.raemi-theme-popover button.is-selected .raemi-theme-check { visibility: visible; }
@keyframes raemi-theme-reveal { from { opacity: 0; transform: translateY(-5px) scale(.98); } to { opacity: 1; transform: none; } }

html[data-theme="dark"] :is(.top-app-bar, .raemi-service-header, .drive-header) { background: color-mix(in srgb, var(--md-sys-color-surface) 92%, transparent); border-color: var(--md-sys-color-outline-variant); }
html[data-theme="dark"] body { background: var(--md-sys-color-surface); }
html[data-theme="dark"] :is(input, select, textarea, dialog) { color-scheme: dark; }
html[data-theme="dark"] :is(.account-card, .account-storage-overview, .admin-section, .admin-metric, .legal-main, .webmaster-panel, .webmaster-card, .webmaster-overview, .webmaster-chart-card) { background-color: var(--md-sys-color-surface-container-low); border-color: var(--md-sys-color-outline-variant); box-shadow: 0 2px 14px rgba(0,0,0,.2); }
html[data-theme="dark"] :is(.drive-main, .drive-folder-card, .drive-list, .drive-dialog, .drive-file-viewer-card, .drive-shared-page > section, .drive-incomplete-row, .drive-daily-reward-card, .drive-daily-reward-session, .drive-daily-reward-result) { background: var(--md-sys-color-surface-container-low) !important; border-color: var(--md-sys-color-outline-variant) !important; color: var(--md-sys-color-on-surface); }
html[data-theme="dark"] .raemi-audio-player { border-color: var(--md-sys-color-outline-variant); background: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface); }
html[data-theme="dark"] :is(.raemi-audio-time, .raemi-audio-speed, .raemi-audio-loading-label) { color: var(--md-sys-color-on-surface-variant); }
html[data-theme="dark"] .raemi-audio-progress-wrap::before { background: var(--md-sys-color-surface-container-highest); }
html[data-theme="dark"] .raemi-audio-buffered { background: var(--md-sys-color-outline); }
html[data-theme="dark"] :is(.raemi-audio-controls button, .raemi-audio-controls a) { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
html[data-theme="dark"] .raemi-audio-speed select { border-color: var(--md-sys-color-outline-variant); background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); }
html[data-theme="dark"] :is(.drive-sidebar, .drive-share-row, .drive-dialog .drive-dialog-actions) { background: var(--md-sys-color-surface-container-low); border-color: var(--md-sys-color-outline-variant); color: var(--md-sys-color-on-surface); }
html[data-theme="dark"] :is(.drive-row:hover, .drive-folder-card:hover, .drive-empty, .drive-dropzone, .drive-ad-zone, .drive-sponsored-card, .drive-daily-reward-ad) { background: var(--md-sys-color-surface-container) !important; border-color: var(--md-sys-color-outline-variant) !important; }
html[data-theme="dark"] .drive-toolbar-actions button { background: var(--md-sys-color-surface-container-high) !important; border-color: var(--md-sys-color-outline-variant) !important; color: var(--md-sys-color-primary) !important; }
html[data-theme="dark"] :is(.drive-sidebar-label, .drive-sidebar nav a, .drive-storage small, .drive-sponsored-card-copy small, .drive-section-title p, .drive-section h3, .drive-folder-card > a small, .drive-row-name small, .drive-share-row small, .drive-file-viewer-heading p, .drive-incomplete-copy small) { color: var(--md-sys-color-on-surface-variant); }
html[data-theme="dark"] :is(.drive-sidebar nav a:hover, .drive-sidebar nav a.active, .drive-breadcrumbs a:hover, .drive-share-types label:has(input:checked), .drive-share-existing, .drive-share-public-only) { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container) !important; border-color: var(--md-sys-color-outline); }
html[data-theme="dark"] .drive-main .drive-toolbar { border-color: var(--md-sys-color-outline-variant); }
html[data-theme="dark"] .drive-site { background: var(--md-sys-color-surface); }
html[data-theme="dark"] :is(.blob-filter-form, .blob-inspector, .blob-filter-form input, .blob-filter-form select, .blob-thumb) { background-color: var(--md-sys-color-surface-container-low); border-color: var(--md-sys-color-outline-variant); color: var(--md-sys-color-on-surface); }
html[data-theme="dark"] .blob-preview-stage { border-color: var(--md-sys-color-outline-variant); background: repeating-conic-gradient(var(--md-sys-color-surface-container) 0% 25%, var(--md-sys-color-surface-container-high) 0% 50%) 50% / 20px 20px; }
html[data-theme="dark"] :is(.account-error, .drive-feedback.error, .account-storage-warning, .drive-over-quota, .drive-storage.is-over-quota) { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
html[data-theme="dark"] :is(.account-storage.is-over-quota, .drive-sponsored-card.is-over-quota) { background: color-mix(in srgb, var(--md-sys-color-error-container) 25%, var(--md-sys-color-surface-container)); border-color: var(--md-sys-color-error); }
html[data-theme="dark"] :is(.webmaster-error, .webmaster-sitemap-status.error) { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
html[data-theme="dark"] :is(.webmaster-sites li.selected, .webmaster-inspect-form, .webmaster-inspection, .webmaster-sitemaps, .webmaster-sites ul, .webmaster-gate) { background-color: var(--md-sys-color-surface-container-low); box-shadow: 0 2px 12px rgba(0,0,0,.22); }
html[data-theme="dark"] .webmaster-header { background: color-mix(in srgb, var(--md-sys-color-surface) 94%, transparent); border-color: var(--md-sys-color-outline-variant); }
html[data-theme="dark"] :is(.webmaster-overview-heading, .webmaster-chart-card, .webmaster-metric, .webmaster-overview.is-unavailable) { border-color: var(--md-sys-color-outline-variant); background: var(--md-sys-color-surface-container-low); }
html[data-theme="dark"] .webmaster-overview-heading { background: var(--md-sys-color-secondary-container); }
html[data-theme="dark"] :is(.webmaster-overview-heading h2, .webmaster-overview-heading > span, .webmaster-metric strong, .webmaster-metric h3, .webmaster-chart-card h3, .webmaster-error-pie strong) { color: var(--md-sys-color-on-surface); }
html[data-theme="dark"] :is(.webmaster-overview-heading p, .webmaster-overview-heading > span small, .webmaster-metric p, .webmaster-chart-card p, .webmaster-error-chart li small, .webmaster-error-pie small, .webmaster-chart-note, .webmaster-overview.is-unavailable) { color: var(--md-sys-color-on-surface-variant); }
html[data-theme="dark"] .webmaster-overview-heading > span .material-symbols-rounded { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
html[data-theme="dark"] .webmaster-metric > .material-symbols-rounded { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
html[data-theme="dark"] .webmaster-chart-grid line { stroke: var(--md-sys-color-outline-variant); }
html[data-theme="dark"] :is(.webmaster-chart-grid text, .webmaster-chart-labels text) { fill: var(--md-sys-color-on-surface-variant); }
html[data-theme="dark"] .webmaster-chart-area { fill: var(--md-sys-color-primary-container); }
html[data-theme="dark"] .webmaster-chart-line { stroke: var(--md-sys-color-primary); }
html[data-theme="dark"] .webmaster-chart-dots circle { stroke: var(--md-sys-color-surface-container-low); }
html[data-theme="dark"] .webmaster-error-pie::after { background: var(--md-sys-color-surface-container-low); }
html[data-theme="dark"] .blob-studio-hero > .material-symbols-rounded { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
html[data-theme="dark"] :is(.blob-filter-form label, .blob-assets-table td small, .blob-inspector-heading p, .blob-inspector dt) { color: var(--md-sys-color-on-surface-variant); }
html[data-theme="dark"] .blob-inspector dd { color: var(--md-sys-color-on-surface); }
html[data-theme="dark"] :is(.blob-bulk-buttons button, .blob-row-actions a, .blob-row-actions button) { border-color: var(--md-sys-color-outline-variant); background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-primary); }
html[data-theme="dark"] .blob-bulk-buttons button:hover { background: var(--md-sys-color-secondary-container); }
html[data-theme="dark"] .blob-inspector dl div { border-color: var(--md-sys-color-outline-variant); }
html[data-theme="dark"] :is(.feature-art, .footer-copyright) { color: var(--md-sys-color-on-primary); }
html[data-theme="dark"] :is(.account-form button, .photo-upload button, .drive-toolbar button, .drive-upload-button, .drive-dialog button, .drive-download-link, .raemi-account-manage, .raemi-account-sign-in, .admin-setting-form button, .admin-users-toolbar button, .admin-editor-actions button, .meili-maintenance button, .meili-search-form button) { color: var(--md-sys-color-on-primary); }
html[data-theme="dark"] .app-logo { filter: brightness(0) saturate(100%) invert(84%) sepia(20%) saturate(680%) hue-rotate(168deg) brightness(98%); }
html[data-theme="dark"] .search-image-dialog { background: var(--md-sys-color-surface-container-lowest); color: var(--md-sys-color-on-surface); }
html[data-theme="dark"] .search-image-dialog-stage { background: #080b0d; }
html[data-theme="dark"] .cookie-consent { box-shadow: 0 14px 40px rgba(0,0,0,.45); }
.raemi-carbon-badge { flex: 1 0 100%; margin-top: 5px; min-height: 25px; }
.raemi-carbon-badge #wcb { --wcb-primary: #0e11a8; --wcb-accent: #00ffbc; color: var(--wcb-primary); font: 11px/1.15 system-ui, sans-serif; text-align: center; }
.raemi-carbon-badge #wcb.carbonbadge sub { position: relative; top: .25em; font-size: .7em; vertical-align: baseline; }
.raemi-carbon-badge .wcb-result,
.raemi-carbon-badge .wcb-link { display: inline-flex; min-height: 25px; align-items: center; justify-content: center; padding: .3em .55em; border: 2px solid var(--wcb-accent); line-height: 1.15; text-decoration: none; }
.raemi-carbon-badge .wcb-result { min-width: 9em; border-right: 0; border-radius: .35em 0 0 .35em; background: #fff; color: var(--wcb-primary); }
.raemi-carbon-badge .wcb-link { border-color: var(--wcb-primary); border-left: 0; border-radius: 0 .35em .35em 0; background: var(--wcb-primary); color: #fff; font-weight: 700; }
.raemi-carbon-badge .wcb-detail { display: block; margin-top: 3px; color: var(--md-sys-color-on-surface-variant); }
.raemi-carbon-badge #wcb.wcb-d .wcb-link { border-color: var(--wcb-accent); background: var(--wcb-accent); color: var(--wcb-primary); }
.raemi-carbon-badge #wcb.wcb-d .wcb-detail { color: var(--md-sys-color-on-surface-variant); }
html.has-cookie-consent .core-footer,
html.has-cookie-consent .site-footer,
html.has-cookie-consent .account-footer,
html.has-cookie-consent .legal-footer,
html.has-cookie-consent .raemi-global-footer { scroll-margin-bottom: 180px; }

@media (max-width: 540px) {
  .raemi-theme-menu > summary { width: 40px; height: 40px; }
  .raemi-theme-popover { position: fixed; top: 66px; right: 12px; width: calc(100vw - 24px); }
  html.has-cookie-consent :is(.core-footer, .site-footer, .account-footer, .legal-footer, .raemi-global-footer) { padding-bottom: 210px; }
  .cookie-consent { max-height: calc(100dvh - 32px); overflow-y: auto; }
}

@media (max-width: 360px) {
  .raemi-site .top-app-bar .app-actions > md-text-button { display: none; }
  .raemi-account-sign-in { min-height: 44px; padding-inline: 13px; white-space: nowrap; }
  .raemi-search-brand { gap: 8px; }
  .raemi-search-brand > .material-symbols-rounded { width: 44px; height: 44px; border-radius: 14px; font-size: 25px; }
  .raemi-search-brand > div { gap: 5px; }
  .raemi-search-brand strong,
  .raemi-search-brand span { font-size: 30px; }
}

@media (max-width: 640px) {
  html[data-theme="dark"] .drive-main { background: var(--md-sys-color-surface) !important; }
  html[data-theme="dark"] .drive-sidebar { border-bottom-color: var(--md-sys-color-outline-variant); }
}

@media (prefers-reduced-motion: reduce) {
  .raemi-theme-menu > summary, .raemi-theme-popover { animation: none; transition: none; }
}
