html {
    scrollbar-width: thin;
    scrollbar-color: var(--c-scrollbar-thumb) var(--c-scrollbar-track);
}
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: var(--c-scrollbar-track);
}
::-webkit-scrollbar-thumb {
    background: var(--c-scrollbar-thumb);
    border-radius: 6px;
    border: 2px solid var(--c-scrollbar-track);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--c-scrollbar-thumb-hover);
}
::-webkit-scrollbar-corner {
    background: var(--c-scrollbar-track);
}
:root {
    color-scheme: light;
    --c-scrollbar-track: transparent;
    --c-scrollbar-thumb: rgba(60, 60, 67, 0.24);
    --c-scrollbar-thumb-hover: rgba(60, 60, 67, 0.38);
    --c-bg: #F5F5F5;
    --c-bg-soft: rgba(118, 118, 128, 0.12);
    --c-bg-elev: #F5F5F5;
    --c-bg-glass: #F5F5F5;
    --c-modal-solid: #F5F5F5;
    --c-surface-blur: 0px;
    --c-surface-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
    --c-surface-highlight: rgba(255, 255, 255, 0.82);
    --c-text: #1c1c1e;
    --c-text-mut: #6e6e73;
    --c-text-soft: #8e8e93;
    --c-text-faint: #aeaeb2;
    --c-border: rgba(60, 60, 67, 0.16);
    --c-border-soft: rgba(60, 60, 67, 0.10);
    --c-border-strong: rgba(60, 60, 67, 0.28);
    --c-brand-from: #2ec5ff;
    --c-brand-mid: #6b63ff;
    --c-brand-to: #b44dff;
    --c-brand-gradient: linear-gradient(90deg, #2ec5ff 0%, #6b63ff 50%, #b44dff 100%);
    --c-brand-gradient-soft: linear-gradient(90deg, rgba(46, 197, 255, 0.14) 0%, rgba(107, 99, 255, 0.12) 50%, rgba(180, 77, 255, 0.16) 100%);
    --c-brand-shadow: 0 8px 22px rgba(107, 99, 255, 0.28);
    --c-primary: #5b6cff;
    --c-on-primary: #ffffff;
    --btn-primary-bg: var(--c-primary);
    --btn-primary-hover-bg: var(--c-accent);
    --btn-primary-text: var(--c-on-primary);
    --btn-primary-border: transparent;
    --btn-primary-shadow: var(--c-brand-shadow);
    --c-danger: #ff3b30;
    --c-danger-hover: #e5322a;
    --c-accent: #5b6cff;
    --c-shadow-modal: 0 2px 8px rgba(0, 0, 0, 0.08), 0 24px 80px rgba(0, 0, 0, 0.18);
    --c-shadow-toast: 0 4px 16px rgba(0, 0, 0, 0.12), 0 16px 48px rgba(0, 0, 0, 0.16);
    --mio-ease: 0.22s cubic-bezier(0.25, 0.1, 0.25, 1);
    --mio-press: 0.1s linear;
    --mio-radius-card: 16px;
    --mio-radius-control: 14px;
    --mio-tab-h: 54px;
    --c-pill-pending-bg: #fbf8ec;
    --c-pill-pending-bd: #efe2b9;
    --c-pill-pending-text: #8a6b00;
    --c-pill-progress-bg: #eef5ff;
    --c-pill-progress-bd: #c9dcff;
    --c-pill-progress-text: #1a6bdb;
    --c-pill-approved-bg: #f1faf5;
    --c-pill-approved-bd: #c9e4d6;
    --c-pill-approved-text: #1f7a4d;
    --c-pill-rejected-bg: #fff7f7;
    --c-pill-rejected-bd: #f3d6d6;
    --c-pill-rejected-text: #b94646;
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --c-scrollbar-track: transparent;
    --c-scrollbar-thumb: rgba(235, 235, 245, 0.24);
    --c-scrollbar-thumb-hover: rgba(235, 235, 245, 0.38);
    --c-bg: #1C1C1C;
    --c-bg-soft: rgba(118, 118, 128, 0.24);
    --c-bg-elev: #1C1C1C;
    --c-bg-glass: #1C1C1C;
    --c-modal-solid: #1C1C1C;
    --c-surface-blur: 0px;
    --c-surface-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
    --c-surface-highlight: rgba(255, 255, 255, 0.09);
    --c-text: #f5f5f7;
    --c-text-mut: #aeaeb2;
    --c-text-soft: #8e8e93;
    --c-text-faint: #636366;
    --c-border: rgba(84, 84, 88, 0.56);
    --c-border-soft: rgba(84, 84, 88, 0.38);
    --c-border-strong: rgba(174, 174, 178, 0.46);
    --c-brand-from: #2ec5ff;
    --c-brand-mid: #7b72ff;
    --c-brand-to: #c45dff;
    --c-brand-gradient: linear-gradient(90deg, #2ec5ff 0%, #7b72ff 50%, #c45dff 100%);
    --c-brand-gradient-soft: linear-gradient(90deg, rgba(46, 197, 255, 0.18) 0%, rgba(123, 114, 255, 0.14) 50%, rgba(196, 93, 255, 0.18) 100%);
    --c-brand-shadow: 0 8px 24px rgba(107, 99, 255, 0.35);
    --c-primary: #6b7cff;
    --c-on-primary: #ffffff;
    --btn-primary-bg: var(--c-primary);
    --btn-primary-hover-bg: var(--c-accent);
    --btn-primary-text: var(--c-on-primary);
    --btn-primary-border: transparent;
    --btn-primary-shadow: var(--c-brand-shadow);
    --c-danger: #ff453a;
    --c-danger-hover: #ff6961;
    --c-accent: #6b7cff;
    --c-shadow-modal: 0 2px 8px rgba(0, 0, 0, 0.35), 0 24px 80px rgba(0, 0, 0, 0.55);
    --c-shadow-toast: 0 4px 16px rgba(0, 0, 0, 0.4), 0 16px 48px rgba(0, 0, 0, 0.5);
    --c-pill-pending-bg: rgba(239, 196, 47, 0.10);
    --c-pill-pending-bd: rgba(239, 196, 47, 0.30);
    --c-pill-pending-text: #efc42f;
    --c-pill-progress-bg: rgba(10, 132, 255, 0.12);
    --c-pill-progress-bd: rgba(10, 132, 255, 0.35);
    --c-pill-progress-text: #0a84ff;
    --c-pill-approved-bg: rgba(63, 200, 132, 0.10);
    --c-pill-approved-bd: rgba(63, 200, 132, 0.30);
    --c-pill-approved-text: #3fc884;
    --c-pill-rejected-bg: rgba(232, 96, 96, 0.10);
    --c-pill-rejected-bd: rgba(232, 96, 96, 0.30);
    --c-pill-rejected-text: #e85959;
}
html[data-theme="dark"][data-palette="aquamarine"] {
    color-scheme: dark;
    --c-bg: #041816;
    --c-bg-soft: rgba(45, 212, 191, 0.12);
    --c-bg-elev: rgba(8, 42, 40, 0.86);
    --c-bg-glass: rgba(8, 42, 40, 0.72);
    --c-modal-solid: #062422;
    --c-surface-highlight: rgba(255, 255, 255, 0.08);
    --c-text: #d7e6e3;
    --c-text-mut: #8aada8;
    --c-text-soft: #6d8f8a;
    --c-text-faint: #4a6864;
    --c-border: rgba(95, 158, 150, 0.22);
    --c-border-soft: rgba(95, 158, 150, 0.12);
    --c-border-strong: rgba(95, 158, 150, 0.32);
    --c-brand-from: #3d7a74;
    --c-brand-mid: #5f9e96;
    --c-brand-to: #7aada6;
    --c-brand-gradient: linear-gradient(90deg, #3d7a74 0%, #5f9e96 52%, #7aada6 100%);
    --c-brand-gradient-soft: linear-gradient(90deg, rgba(61, 122, 116, 0.16) 0%, rgba(95, 158, 150, 0.10) 100%);
    --c-brand-shadow: 0 8px 24px rgba(61, 122, 116, 0.22);
    --c-primary: #5f9e96;
    --c-accent: #6aaba3;
    --btn-primary-bg: var(--c-primary);
    --btn-primary-hover-bg: var(--c-accent);
    --btn-primary-text: var(--c-on-primary);
    --btn-primary-border: transparent;
    --btn-primary-shadow: var(--c-brand-shadow);
}
html[data-theme="dark"][data-palette="nebula"] {
    color-scheme: dark;
    --c-bg: #0c0618;
    --c-bg-soft: rgba(167, 139, 250, 0.14);
    --c-bg-elev: rgba(32, 18, 58, 0.86);
    --c-bg-glass: rgba(32, 18, 58, 0.72);
    --c-modal-solid: #140a24;
    --c-surface-highlight: rgba(255, 255, 255, 0.08);
    --c-text: #e4e0ee;
    --c-text-mut: #a99bbd;
    --c-text-soft: #7d7194;
    --c-text-faint: #564d6c;
    --c-border: rgba(141, 126, 184, 0.24);
    --c-border-soft: rgba(141, 126, 184, 0.14);
    --c-border-strong: rgba(154, 140, 192, 0.32);
    --c-brand-from: #6d5c96;
    --c-brand-mid: #8d7eb8;
    --c-brand-to: #a08aad;
    --c-brand-gradient: linear-gradient(90deg, #6d5c96 0%, #8d7eb8 50%, #a08aad 100%);
    --c-brand-gradient-soft: linear-gradient(90deg, rgba(109, 92, 150, 0.16) 0%, rgba(160, 138, 173, 0.10) 100%);
    --c-brand-shadow: 0 8px 24px rgba(109, 92, 150, 0.22);
    --c-primary: #8d7eb8;
    --c-accent: #9a8cc0;
    --btn-primary-bg: var(--c-primary);
    --btn-primary-hover-bg: var(--c-accent);
    --btn-primary-text: var(--c-on-primary);
    --btn-primary-border: transparent;
    --btn-primary-shadow: var(--c-brand-shadow);
}
html[data-theme="light"][data-palette="rainbow"] {
    color-scheme: light;
    --c-bg: #e7f7ff;
    --c-bg-soft: #d7f3ff;
    --c-bg-elev: #ffffff;
    --c-bg-glass: rgba(255, 255, 255, 0.9);
    --c-modal-solid: #ffffff;
    --c-surface-highlight: rgba(255, 255, 255, 0.8);
    --c-text: #1b2433;
    --c-text-mut: #4c5d72;
    --c-text-soft: #6d7f94;
    --c-text-faint: #9aadc0;
    --c-border: rgba(70, 130, 190, 0.2);
    --c-border-soft: rgba(70, 130, 190, 0.12);
    --c-border-strong: rgba(70, 130, 190, 0.32);
    --c-brand-from: #ff5b6e;
    --c-brand-mid: #3ecf6e;
    --c-brand-to: #4c8dff;
    --c-brand-gradient: linear-gradient(90deg, #ff5b6e 0%, #ffb020 18%, #ffe14a 34%, #3ecf6e 52%, #3ec8ff 68%, #6a6bff 84%, #ff5ea8 100%);
    --c-brand-gradient-soft: linear-gradient(90deg, rgba(255, 91, 110, 0.16), rgba(62, 207, 110, 0.12), rgba(76, 141, 255, 0.16));
    --c-brand-shadow: 0 8px 24px rgba(76, 141, 255, 0.18);
    --c-primary: #2f86f6;
    --c-accent: #ff5ea8;
    --btn-primary-bg: var(--c-primary);
    --btn-primary-hover-bg: #1d74e6;
    --btn-primary-text: #ffffff;
    --btn-primary-border: transparent;
    --btn-primary-shadow: var(--c-brand-shadow);
}
html[data-theme="dark"][data-palette="sunset"] {
    color-scheme: dark;
    --c-bg: #140806;
    --c-bg-soft: rgba(251, 146, 60, 0.14);
    --c-bg-elev: rgba(42, 18, 12, 0.86);
    --c-bg-glass: rgba(42, 18, 12, 0.72);
    --c-modal-solid: #1c0c08;
    --c-surface-highlight: rgba(255, 255, 255, 0.08);
    --c-text: #efe4dc;
    --c-text-mut: #c4a898;
    --c-text-soft: #a08070;
    --c-text-faint: #6e5648;
    --c-border: rgba(196, 137, 98, 0.24);
    --c-border-soft: rgba(196, 137, 98, 0.12);
    --c-border-strong: rgba(201, 160, 136, 0.32);
    --c-brand-from: #a86a48;
    --c-brand-mid: #c48962;
    --c-brand-to: #c47878;
    --c-brand-gradient: linear-gradient(90deg, #a86a48 0%, #c48962 48%, #c47878 100%);
    --c-brand-gradient-soft: linear-gradient(90deg, rgba(168, 106, 72, 0.16), rgba(196, 120, 120, 0.10));
    --c-brand-shadow: 0 8px 24px rgba(168, 106, 72, 0.2);
    --c-primary: #c48962;
    --c-accent: #c9a088;
}
html[data-theme="dark"][data-palette="aurora"] {
    color-scheme: dark;
    --c-bg: #03140f;
    --c-bg-soft: rgba(52, 211, 153, 0.12);
    --c-bg-elev: rgba(8, 36, 28, 0.86);
    --c-bg-glass: rgba(8, 36, 28, 0.72);
    --c-modal-solid: #062018;
    --c-surface-highlight: rgba(255, 255, 255, 0.08);
    --c-text: #dce8e3;
    --c-text-mut: #8aafa2;
    --c-text-soft: #6d8f84;
    --c-text-faint: #4a685c;
    --c-border: rgba(90, 154, 132, 0.22);
    --c-border-soft: rgba(90, 154, 132, 0.12);
    --c-border-strong: rgba(122, 171, 154, 0.30);
    --c-brand-from: #3d7a68;
    --c-brand-mid: #5a9a84;
    --c-brand-to: #6a9aaa;
    --c-brand-gradient: linear-gradient(90deg, #3d7a68 0%, #5a9a84 46%, #6a9aaa 100%);
    --c-brand-gradient-soft: linear-gradient(90deg, rgba(61, 122, 104, 0.16), rgba(106, 154, 170, 0.10));
    --c-brand-shadow: 0 8px 24px rgba(61, 122, 104, 0.18);
    --c-primary: #5a9a84;
    --c-accent: #7aab9a;
}
html[data-theme="light"][data-palette="social"] {
    color-scheme: light;
    --c-bg: #f3eee4;
    --c-bg-soft: #e7dcc8;
    --c-bg-elev: #fffaf3;
    --c-bg-glass: #fffaf3;
    --c-modal-solid: #f7f3ea;
    --c-surface-highlight: rgba(255, 255, 255, 0.7);
    --c-text: #3c342c;
    --c-text-mut: #6e6256;
    --c-text-soft: #8a7d70;
    --c-text-faint: #b0a396;
    --c-border: rgba(90, 70, 50, 0.16);
    --c-border-soft: rgba(90, 70, 50, 0.10);
    --c-border-strong: rgba(90, 70, 50, 0.24);
    --c-brand-from: #8d5a4e;
    --c-brand-mid: #8d5a4e;
    --c-brand-to: #8d5a4e;
    --c-brand-gradient: none;
    --c-brand-gradient-soft: none;
    --c-brand-shadow: none;
    --c-primary: #8d5a4e;
    --c-accent: #8d5a4e;
}
html[data-theme="dark"][data-palette="artemis"] {
    color-scheme: dark;
    --c-bg: #070b14;
    --c-bg-soft: rgba(154, 168, 194, 0.10);
    --c-bg-elev: rgba(14, 20, 36, 0.88);
    --c-bg-glass: rgba(14, 20, 36, 0.74);
    --c-modal-solid: #0c1220;
    --c-surface-highlight: rgba(255, 255, 255, 0.06);
    --c-text: #e4e8f2;
    --c-text-mut: #a8b3c9;
    --c-text-soft: #7e8ba6;
    --c-text-faint: #556178;
    --c-border: rgba(154, 168, 194, 0.22);
    --c-border-soft: rgba(154, 168, 194, 0.12);
    --c-border-strong: rgba(154, 168, 194, 0.32);
    --c-brand-from: #3d4e73;
    --c-brand-mid: #6d7ea3;
    --c-brand-to: #b7c0d4;
    --c-brand-gradient: linear-gradient(90deg, #3d4e73 0%, #6d7ea3 55%, #b7c0d4 100%);
    --c-brand-gradient-soft: linear-gradient(90deg, rgba(61, 78, 115, 0.18), rgba(183, 192, 212, 0.10));
    --c-brand-shadow: 0 8px 24px rgba(20, 28, 48, 0.28);
    --c-primary: #8b9bb8;
    --c-accent: #9aa8c4;
}
html[data-theme="dark"][data-palette="amethyst"] {
    color-scheme: dark;
    --c-bg: #16101c;
    --c-bg-soft: rgba(154, 126, 176, 0.12);
    --c-bg-elev: rgba(36, 26, 46, 0.88);
    --c-bg-glass: rgba(36, 26, 46, 0.74);
    --c-modal-solid: #1c1424;
    --c-surface-highlight: rgba(255, 255, 255, 0.06);
    --c-text: #ebe4f0;
    --c-text-mut: #b7a6c4;
    --c-text-soft: #8d7b9c;
    --c-text-faint: #5e516c;
    --c-border: rgba(154, 126, 176, 0.24);
    --c-border-soft: rgba(154, 126, 176, 0.14);
    --c-border-strong: rgba(154, 126, 176, 0.34);
    --c-brand-from: #6a4e86;
    --c-brand-mid: #8a6d9e;
    --c-brand-to: #b7a0c4;
    --c-brand-gradient: linear-gradient(90deg, #6a4e86 0%, #8a6d9e 55%, #b7a0c4 100%);
    --c-brand-gradient-soft: linear-gradient(90deg, rgba(106, 78, 134, 0.16), rgba(183, 160, 196, 0.10));
    --c-brand-shadow: 0 8px 24px rgba(70, 48, 90, 0.22);
    --c-primary: #8a6d9e;
    --c-accent: #a088b0;
}
html[data-theme="dark"][data-palette="blood"] {
    color-scheme: dark;
    --c-bg: #120708;
    --c-bg-soft: rgba(150, 72, 74, 0.12);
    --c-bg-elev: rgba(36, 16, 18, 0.9);
    --c-bg-glass: rgba(36, 16, 18, 0.76);
    --c-modal-solid: #1a0c0e;
    --c-surface-highlight: rgba(255, 255, 255, 0.05);
    --c-text: #f0e4e4;
    --c-text-mut: #c4a0a0;
    --c-text-soft: #9a7878;
    --c-text-faint: #6a5050;
    --c-border: rgba(150, 72, 74, 0.26);
    --c-border-soft: rgba(150, 72, 74, 0.14);
    --c-border-strong: rgba(168, 96, 98, 0.34);
    --c-brand-from: #6e3034;
    --c-brand-mid: #8d4548;
    --c-brand-to: #b56a68;
    --c-brand-gradient: linear-gradient(90deg, #6e3034 0%, #8d4548 55%, #b56a68 100%);
    --c-brand-gradient-soft: linear-gradient(90deg, rgba(110, 48, 52, 0.18), rgba(181, 106, 104, 0.10));
    --c-brand-shadow: 0 8px 24px rgba(80, 28, 32, 0.24);
    --c-primary: #8d4548;
    --c-accent: #a45c5c;
    --btn-primary-bg: var(--c-primary);
    --btn-primary-hover-bg: var(--c-accent);
    --btn-primary-text: var(--c-on-primary);
    --btn-primary-border: transparent;
    --btn-primary-shadow: var(--c-brand-shadow);
}
html[data-theme="dark"][data-palette="waterfall"] {
    color-scheme: dark;
    --c-bg: #07141a;
    --c-bg-soft: rgba(122, 168, 176, 0.12);
    --c-bg-elev: rgba(12, 32, 40, 0.88);
    --c-bg-glass: rgba(12, 32, 40, 0.74);
    --c-modal-solid: #0c1c24;
    --c-surface-highlight: rgba(255, 255, 255, 0.06);
    --c-text: #e4eef0;
    --c-text-mut: #a9c4c8;
    --c-text-soft: #7f9ea4;
    --c-text-faint: #567078;
    --c-border: rgba(122, 168, 176, 0.22);
    --c-border-soft: rgba(122, 168, 176, 0.12);
    --c-border-strong: rgba(154, 190, 196, 0.32);
    --c-brand-from: #3d6a74;
    --c-brand-mid: #6a9aaa;
    --c-brand-to: #b7cfd2;
    --c-brand-gradient: linear-gradient(180deg, #b7cfd2 0%, #6a9aaa 42%, #3d6a74 100%);
    --c-brand-gradient-soft: linear-gradient(180deg, rgba(183, 207, 210, 0.14), rgba(61, 106, 116, 0.12));
    --c-brand-shadow: 0 8px 24px rgba(30, 64, 74, 0.22);
    --c-primary: #6a9aaa;
    --c-accent: #8eb4bc;
    --btn-primary-bg: var(--c-primary);
    --btn-primary-hover-bg: var(--c-accent);
    --btn-primary-text: var(--c-on-primary);
    --btn-primary-border: transparent;
    --btn-primary-shadow: var(--c-brand-shadow);
}
html[data-theme="dark"][data-palette="seal"] {
    color-scheme: dark;
    --c-bg: #0e1418;
    --c-bg-soft: rgba(168, 188, 198, 0.12);
    --c-bg-elev: rgba(22, 32, 38, 0.92);
    --c-bg-glass: rgba(22, 32, 38, 0.8);
    --c-modal-solid: #12181c;
    --c-surface-highlight: rgba(255, 255, 255, 0.06);
    --c-text: #e6eef2;
    --c-text-mut: #a8bcc6;
    --c-text-soft: #7e949e;
    --c-text-faint: #556870;
    --c-border: rgba(168, 188, 198, 0.22);
    --c-border-soft: rgba(168, 188, 198, 0.12);
    --c-border-strong: rgba(186, 204, 212, 0.34);
    --c-brand-from: #6e8794;
    --c-brand-mid: #9eb4c0;
    --c-brand-to: #d5e4ea;
    --c-brand-gradient: linear-gradient(90deg, #6e8794 0%, #9eb4c0 52%, #d5e4ea 100%);
    --c-brand-gradient-soft: linear-gradient(90deg, rgba(110, 135, 148, 0.16), rgba(213, 228, 234, 0.08));
    --c-brand-shadow: 0 8px 24px rgba(40, 60, 72, 0.22);
    --c-primary: #8eabba;
    --c-accent: #b7cdd6;
}
html[data-theme="dark"][data-palette="horse"] {
    color-scheme: dark;
    --c-bg: #140e0a;
    --c-bg-soft: rgba(196, 140, 90, 0.14);
    --c-bg-elev: rgba(42, 28, 18, 0.92);
    --c-bg-glass: rgba(42, 28, 18, 0.8);
    --c-modal-solid: #1c140e;
    --c-surface-highlight: rgba(255, 255, 255, 0.06);
    --c-text: #f3e6d6;
    --c-text-mut: #cbb59a;
    --c-text-soft: #a08a72;
    --c-text-faint: #6e5a46;
    --c-border: rgba(196, 148, 96, 0.24);
    --c-border-soft: rgba(196, 148, 96, 0.12);
    --c-border-strong: rgba(214, 176, 130, 0.34);
    --c-brand-from: #7a4a28;
    --c-brand-mid: #a86b3c;
    --c-brand-to: #e6c7a2;
    --c-brand-gradient: linear-gradient(90deg, #7a4a28 0%, #a86b3c 52%, #e6c7a2 100%);
    --c-brand-gradient-soft: linear-gradient(90deg, rgba(122, 74, 40, 0.18), rgba(230, 199, 162, 0.1));
    --c-brand-shadow: 0 8px 24px rgba(80, 48, 24, 0.24);
    --c-primary: #c4844e;
    --c-accent: #e0b88a;
}
html[data-theme="dark"][data-palette="cat"] {
    color-scheme: dark;
    --c-bg: #12100e;
    --c-bg-soft: rgba(232, 168, 74, 0.12);
    --c-bg-elev: rgba(32, 28, 24, 0.92);
    --c-bg-glass: rgba(32, 28, 24, 0.8);
    --c-modal-solid: #1a1612;
    --c-surface-highlight: rgba(255, 255, 255, 0.06);
    --c-text: #f4efe8;
    --c-text-mut: #c8b8a4;
    --c-text-soft: #9a8874;
    --c-text-faint: #6a5c4e;
    --c-border: rgba(224, 160, 74, 0.22);
    --c-border-soft: rgba(224, 160, 74, 0.12);
    --c-border-strong: rgba(240, 194, 122, 0.32);
    --c-brand-from: #8a5a28;
    --c-brand-mid: #e0a04a;
    --c-brand-to: #f0d0a0;
    --c-brand-gradient: linear-gradient(90deg, #8a5a28 0%, #e0a04a 55%, #f0d0a0 100%);
    --c-brand-gradient-soft: linear-gradient(90deg, rgba(138, 90, 40, 0.16), rgba(240, 208, 160, 0.1));
    --c-brand-shadow: 0 8px 24px rgba(90, 56, 20, 0.24);
    --c-primary: #e0a04a;
    --c-accent: #f0c27a;
}
html[data-theme="dark"][data-palette="fox"] {
    color-scheme: dark;
    --c-bg: #160c08;
    --c-bg-soft: rgba(214, 98, 42, 0.14);
    --c-bg-elev: rgba(48, 22, 14, 0.92);
    --c-bg-glass: rgba(48, 22, 14, 0.8);
    --c-modal-solid: #24140e;
    --c-surface-highlight: rgba(255, 255, 255, 0.06);
    --c-text: #f8ebe4;
    --c-text-mut: #e0b8a4;
    --c-text-soft: #b88870;
    --c-text-faint: #7a5644;
    --c-border: rgba(224, 112, 56, 0.24);
    --c-border-soft: rgba(224, 112, 56, 0.12);
    --c-border-strong: rgba(240, 160, 112, 0.34);
    --c-brand-from: #a84820;
    --c-brand-mid: #e07038;
    --c-brand-to: #f0c8a0;
    --c-brand-gradient: linear-gradient(90deg, #a84820 0%, #e07038 52%, #f0c8a0 100%);
    --c-brand-gradient-soft: linear-gradient(90deg, rgba(168, 72, 32, 0.18), rgba(240, 200, 160, 0.1));
    --c-brand-shadow: 0 8px 24px rgba(120, 48, 20, 0.24);
    --c-primary: #e07038;
    --c-accent: #f0a070;
}
html[data-theme="dark"][data-palette="wolf"] {
    color-scheme: dark;
    --c-bg: #0c1016;
    --c-bg-soft: rgba(176, 190, 210, 0.12);
    --c-bg-elev: rgba(22, 28, 38, 0.92);
    --c-bg-glass: rgba(22, 28, 38, 0.8);
    --c-modal-solid: #141820;
    --c-surface-highlight: rgba(255, 255, 255, 0.06);
    --c-text: #e8eef6;
    --c-text-mut: #b0c0d0;
    --c-text-soft: #8494a8;
    --c-text-faint: #5a6878;
    --c-border: rgba(142, 160, 184, 0.24);
    --c-border-soft: rgba(142, 160, 184, 0.12);
    --c-border-strong: rgba(197, 210, 226, 0.34);
    --c-brand-from: #5a6e88;
    --c-brand-mid: #8ea0b8;
    --c-brand-to: #d8e2ee;
    --c-brand-gradient: linear-gradient(90deg, #5a6e88 0%, #8ea0b8 52%, #d8e2ee 100%);
    --c-brand-gradient-soft: linear-gradient(90deg, rgba(90, 110, 136, 0.16), rgba(216, 226, 238, 0.08));
    --c-brand-shadow: 0 8px 24px rgba(36, 48, 64, 0.24);
    --c-primary: #8ea0b8;
    --c-accent: #c5d2e2;
}
html[data-theme="dark"][data-palette="owl"] {
    color-scheme: dark;
    --c-bg: #120e0a;
    --c-bg-soft: rgba(212, 168, 74, 0.12);
    --c-bg-elev: rgba(36, 28, 18, 0.92);
    --c-bg-glass: rgba(36, 28, 18, 0.8);
    --c-modal-solid: #1c160e;
    --c-surface-highlight: rgba(255, 255, 255, 0.06);
    --c-text: #f2ead8;
    --c-text-mut: #cbb892;
    --c-text-soft: #9a8660;
    --c-text-faint: #6a5a40;
    --c-border: rgba(212, 168, 74, 0.24);
    --c-border-soft: rgba(212, 168, 74, 0.12);
    --c-border-strong: rgba(232, 200, 120, 0.34);
    --c-brand-from: #8a6830;
    --c-brand-mid: #d4a84a;
    --c-brand-to: #f0e0b0;
    --c-brand-gradient: linear-gradient(90deg, #8a6830 0%, #d4a84a 55%, #f0e0b0 100%);
    --c-brand-gradient-soft: linear-gradient(90deg, rgba(138, 104, 48, 0.16), rgba(240, 224, 176, 0.1));
    --c-brand-shadow: 0 8px 24px rgba(80, 60, 24, 0.24);
    --c-primary: #d4a84a;
    --c-accent: #e8c878;
}
html[data-palette="social"],
html[data-palette="social"] body:not(.settings-docs-body) {
    background: #f3eee4;
    background-image: none;
}
html[data-palette="social"] .dashboard-footer,
html[data-palette="social"] #mio-page {
    background: transparent;
}
html[data-palette="social"] .profile-int-soon-card {
    background: var(--c-bg-elev);
    border-color: var(--c-border-soft);
}
html[data-palette="social"] input,
html[data-palette="social"] textarea,
html[data-palette="social"] select,
html[data-palette="social"] .mio-input,
html[data-palette="social"] .mio-select,
html[data-palette="social"] .mio-textarea,
html[data-palette="social"] .mio-custom-select-trigger {
    backdrop-filter: none;
    background: #ffffff;
    background-color: #ffffff;
    border: 1px solid rgba(90, 70, 50, 0.28);
    color: #3c342c;
    box-shadow: none;
}
html[data-palette="social"] .admin-tab,
html[data-palette="social"] .ad-tab {
    backdrop-filter: none;
    background: #fffaf3;
    background-color: #fffaf3;
    color: #3c342c;
}
html[data-palette="social"] .admin-tab.is-active,
html[data-palette="social"] .ad-tab.is-active,
html[data-palette="social"] .admin-tab.is-active .admin-tab-count,
html[data-palette="social"] .mio-custom-select.is-open .mio-custom-select-trigger,
html[data-palette="social"] .mio-custom-select-option.is-selected,
html[data-palette="social"] .btn-primary,
html[data-palette="social"] .st-btn--primary,
html[data-palette="social"] .ad-btn-primary,
html[data-palette="social"] body .btn-primary,
html[data-palette="social"] body .st-btn--primary {
    background: #8d5a4e;
    background-color: #8d5a4e;
    background-image: none;
    background-size: auto;
    border-color: #8d5a4e;
    box-shadow: none;
    filter: none;
    backdrop-filter: none;
    color: #ffffff;
}
html[data-palette="social"] .mio-custom-select-option.is-selected::after {
    color: #ffffff;
}
html[data-palette="rainbow"] body {
    background-color: #e7f7ff;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(231, 247, 255, 0.2)), linear-gradient(115deg, rgba(255, 91, 110, 0.22), rgba(255, 176, 32, 0.18), rgba(255, 225, 74, 0.16), rgba(62, 207, 110, 0.16), rgba(62, 200, 255, 0.18), rgba(106, 107, 255, 0.16), rgba(255, 94, 168, 0.2));
    background-size: auto, 220% 220%;
    background-position: center, 0% 50%;
}
@media (prefers-reduced-motion: no-preference) {
    html[data-palette="rainbow"] .btn-primary,
    html[data-palette="rainbow"] .st-btn--primary,
    html[data-palette="rainbow"] .user-search-show-all {
        background-image: linear-gradient(90deg, #ff5b6e, #ffb020, #ffe14a, #3ecf6e, #3ec8ff, #6a6bff, #ff5ea8, #ff5b6e);
        background-size: 220% 100%;
    }
}
html,
body {
    background: var(--c-bg);
    color: var(--c-text);
}
[hidden] {
    display: none !important;
}
.mio-theme-logo {
    display: contents;
}
html:not([data-theme="dark"]) .mio-theme-logo__on-light {
    display: block;
}
html:not([data-theme="dark"]) .mio-theme-logo__on-dark {
    display: none !important;
}
html[data-theme="dark"] .mio-theme-logo__on-light {
    display: none !important;
}
html[data-theme="dark"] .mio-theme-logo__on-dark {
    display: block;
}
:root[data-theme="dark"] body {
    background: var(--c-bg);
    color: var(--c-text);
}
:root[data-theme="dark"] .navbar {
    background: var(--c-bg-glass);
    border-bottom: 1px solid var(--c-border-soft);
}
:root[data-theme="dark"] .nav-brand {
    color: var(--c-text);
}
:root[data-theme="dark"] .nav-link {
    color: var(--c-text-mut);
}
:root[data-theme="dark"] .nav-link:hover {
    color: var(--c-text);
    background: var(--c-bg-soft);
}
:root[data-theme="dark"] .nav-link.active {
    color: var(--c-text);
    background: var(--c-bg-soft);
}
:root[data-theme="dark"] .nav-burger:hover {
    background: var(--c-bg-soft);
}
:root[data-theme="dark"] .nav-burger span {
    background: var(--c-text);
}
:root[data-theme="dark"] .nav-user {
    border-color: var(--c-border);
}
:root[data-theme="dark"] .nav-user:hover {
    background: var(--c-bg-soft);
}
:root[data-theme="dark"] .nav-user.active {
    background: var(--c-bg-soft);
}
:root[data-theme="dark"] .nav-avatar {
    background: #232730;
}
:root[data-theme="dark"] .nav-avatar-fallback {
    color: var(--c-text-mut);
}
:root[data-theme="dark"] .nav-username {
    color: var(--c-text);
}
:root[data-theme="dark"] .nav-logout {
    color: var(--c-text-soft);
}
:root[data-theme="dark"] .nav-logout:hover {
    color: var(--c-danger);
    background: rgba(232,96,96,0.08);
}
@media (max-width: 860px) {
    :root[data-theme="dark"] .nav-right {
        background: var(--c-bg-elev);
        border-bottom: 1px solid var(--c-border-soft);
        box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
    }
    :root[data-theme="dark"] .nav-user {
        background: var(--c-bg-soft);
    }
}
:root[data-theme="dark"] .dashboard-title {
    color: var(--c-text);
}
:root[data-theme="dark"] .dashboard-sub {
    color: var(--c-text-mut);
}
:root[data-theme="dark"] .section-title {
    color: var(--c-text);
}
:root[data-theme="dark"] .section-aside {
    color: var(--c-text-soft);
}
:root[data-theme="dark"] .project-card,
:root[data-theme="dark"] .api-card,
:root[data-theme="dark"] .profile-fields,
:root[data-theme="dark"] .empty-state {
    background: var(--c-bg-elev);
    border-color: var(--c-border);
    color: var(--c-text);
}
:root[data-theme="dark"] .project-name {
    color: var(--c-text);
}
:root[data-theme="dark"] .project-desc {
    color: var(--c-text-mut);
}
:root[data-theme="dark"] .project-domain {
    color: var(--c-text-soft);
}
:root[data-theme="dark"] .project-cta {
    color: var(--c-text);
}
:root[data-theme="dark"] .project-card:hover {
    border-color: var(--c-text);
}
:root[data-theme="dark"] .profile-field {
    border-bottom: 1px solid var(--c-border-soft);
}
:root[data-theme="dark"] .profile-field-label {
    color: var(--c-text-mut);
}
:root[data-theme="dark"] .profile-field-value {
    color: var(--c-text);
}
:root[data-theme="dark"] .modal {
    background: var(--c-modal-solid, #121214);
    box-shadow: var(--c-shadow-modal);
}
:root[data-theme="dark"] .modal-title {
    color: var(--c-text);
}
:root[data-theme="dark"] .modal-close {
    color: var(--c-text-soft);
}
:root[data-theme="dark"] .modal-close:hover {
    color: var(--c-text);
    background: var(--c-bg-soft);
}
:root[data-theme="dark"] .modal .field input,
:root[data-theme="dark"] .modal .field textarea,
:root[data-theme="dark"] .modal .field select {
    background: var(--c-bg-soft);
    border-color: var(--c-border);
    color: var(--c-text);
}
:root[data-theme="dark"] .modal .field input::placeholder,
:root[data-theme="dark"] .modal .field textarea::placeholder {
    color: var(--c-text-soft);
}
:root[data-theme="dark"] .modal .field input:focus,
:root[data-theme="dark"] .modal .field textarea:focus {
    border-color: var(--c-primary);
}
:root[data-theme="dark"] .verify-disclaimer {
    background: var(--c-bg-soft);
    border-color: var(--c-border);
    color: var(--c-text-mut);
}
:root[data-theme="dark"] .verify-disclaimer b {
    color: var(--c-text);
}
:root[data-theme="dark"] .verify-hero-sub {
    color: var(--c-text-mut);
}
:root[data-theme="dark"] .verify-hero-title {
    color: var(--c-text);
}
:root[data-theme="dark"] .mio-upload-drop {
    background: var(--c-bg-soft);
    border-color: var(--c-border);
}
:root[data-theme="dark"] .mio-upload-drop:hover {
    border-color: var(--c-text-soft);
    background: var(--c-bg-elev);
}
:root[data-theme="dark"] .mio-upload-zone.has-files .mio-upload-drop {
    border-color: var(--c-text);
}
:root[data-theme="dark"] .mio-upload-icon {
    background: var(--c-bg-elev);
    border-color: var(--c-border);
    color: var(--c-text);
}
:root[data-theme="dark"] .mio-upload-title {
    color: var(--c-text);
}
:root[data-theme="dark"] .mio-upload-files li {
    border-bottom-color: var(--c-border);
}
:root[data-theme="dark"] .field-label {
    color: var(--c-text-mut);
}
:root[data-theme="dark"] .field-hint {
    color: var(--c-text-soft);
}
:root[data-theme="dark"] .field-optional {
    color: var(--c-text-faint);
}
:root[data-theme="dark"] .drop-zone {
    border-color: var(--c-border);
    color: var(--c-text-mut);
}
:root[data-theme="dark"] .drop-zone:hover,
:root[data-theme="dark"] .drop-zone.drag {
    background: var(--c-bg-soft);
    border-color: var(--c-text);
    color: var(--c-text);
}
:root[data-theme="dark"] .cropper-stage {
    background: var(--c-bg-soft);
    border-color: var(--c-border);
}
:root[data-theme="dark"] .cropper-stage::after {
    box-shadow: 0 0 0 9999px rgba(13,14,18,0.92);
}
:root[data-theme="dark"] .cropper-mask {
    box-shadow: 0 0 0 200px rgba(13,14,18,0.85), inset 0 0 0 1px rgba(255,255,255,0.06);
}
:root[data-theme="dark"] .cropper-mask--banner {
    box-shadow: 0 0 0 9999px rgba(13,14,18,0.72), inset 0 0 0 1px rgba(255,255,255,0.08);
}
:root[data-theme="dark"] .cropper-zoom-label {
    color: var(--c-text-mut);
}
:root[data-theme="dark"] .cropper-zoom input[type="range"] {
    background: var(--c-border);
}
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .btn-filled {
    background: var(--btn-primary-bg);
    background-image: none;
    color: var(--btn-primary-text);
    border-color: var(--btn-primary-border);
    box-shadow: var(--btn-primary-shadow);
}
:root[data-theme="dark"] .btn-primary:hover,
:root[data-theme="dark"] .btn-filled:hover {
    filter: none;
    background: var(--btn-primary-hover-bg);
    background-image: none;
    color: var(--btn-primary-text);
    border-color: var(--btn-primary-border);
    box-shadow: var(--btn-primary-shadow);
    opacity: 1;
}
:root[data-theme="dark"] .btn-secondary {
    background: transparent;
    color: var(--c-text);
    border-color: var(--c-border);
}
:root[data-theme="dark"] .btn-secondary:hover {
    border-color: var(--c-text);
    color: var(--c-text);
}
:root[data-theme="dark"] .btn-ghost {
    background: transparent;
    color: var(--c-text);
    border-color: var(--c-border);
}
:root[data-theme="dark"] .btn-ghost:hover {
    background: var(--c-bg-soft);
    border-color: var(--c-border-strong);
}
:root[data-theme="dark"] .btn-danger {
    background: var(--c-danger);
}
:root[data-theme="dark"] .btn-danger:hover {
    background: var(--c-danger-hover);
}
:root[data-theme="dark"] .dashboard-footer {
    color: var(--c-text-soft);
    border-top: 1px solid var(--c-border-soft);
}
:root[data-theme="dark"] .legal-inline a,
:root[data-theme="dark"] .topup-legal-note a {
    color: var(--c-text-soft);
}
:root[data-theme="dark"] .legal-inline a:hover,
:root[data-theme="dark"] .topup-legal-note a:hover {
    color: var(--c-text);
}
:root[data-theme="dark"] .pill {
    border-color: var(--c-border);
    color: var(--c-text-mut);
}
:root[data-theme="dark"] .pill-pending {
    color: var(--c-pill-pending-text);
    border-color: var(--c-pill-pending-bd);
    background: var(--c-pill-pending-bg);
}
:root[data-theme="dark"] .pill-progress {
    color: var(--c-pill-progress-text);
    border-color: var(--c-pill-progress-bd);
    background: var(--c-pill-progress-bg);
}
:root[data-theme="dark"] .pill-approved {
    color: var(--c-pill-approved-text);
    border-color: var(--c-pill-approved-bd);
    background: var(--c-pill-approved-bg);
}
:root[data-theme="dark"] .pill-rejected {
    color: var(--c-pill-rejected-text);
    border-color: var(--c-pill-rejected-bd);
    background: var(--c-pill-rejected-bg);
}
:root[data-theme="dark"] .mio-table {
    border-color: var(--c-border);
}
:root[data-theme="dark"] .mio-table thead th {
    background: var(--c-bg-soft);
    color: var(--c-text-mut);
    border-bottom: 1px solid var(--c-border);
}
:root[data-theme="dark"] .mio-table tbody td {
    color: var(--c-text);
    border-bottom: 1px solid var(--c-border-soft);
}
:root[data-theme="dark"] .mio-table .cell-handle {
    color: var(--c-text-mut);
}
:root[data-theme="dark"] .api-key {
    background: var(--c-bg-soft);
    border-color: var(--c-border);
    color: var(--c-text-mut);
}
:root[data-theme="dark"] .api-card-name {
    color: var(--c-text);
}
:root[data-theme="dark"] .api-card-desc {
    color: var(--c-text-mut);
}
:root[data-theme="dark"] .api-card-meta {
    color: var(--c-text-soft);
}
:root[data-theme="dark"] .toast {
    box-shadow: var(--c-shadow-toast);
}
:root[data-theme="dark"] .cookie-banner {
    background: var(--c-modal-solid, #121214);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: var(--c-shadow-modal);
    backdrop-filter: none;
}
:root[data-theme="dark"] .cookie-title {
    color: var(--c-text);
}
:root[data-theme="dark"] .cookie-text {
    color: var(--c-text-mut);
}
:root[data-theme="dark"] .cookie-text a {
    color: var(--c-text);
    border-bottom-color: var(--c-border);
}
:root[data-theme="dark"] .form-errors {
    background: rgba(232,96,96,0.08);
    border-color: rgba(232,96,96,0.25);
}
:root[data-theme="dark"] .form-errors p {
    color: var(--c-danger);
}
:root[data-theme="dark"] .field input {
    background: var(--c-bg-soft);
    border-color: var(--c-border);
    color: var(--c-text);
}
:root[data-theme="dark"] .field input::placeholder {
    color: var(--c-text-soft);
}
:root[data-theme="dark"] .field input:focus {
    border-color: var(--c-text);
}
:root[data-theme="dark"] .auth-alt {
    color: var(--c-text-mut);
}
:root[data-theme="dark"] .auth-alt a {
    color: var(--c-text);
    border-bottom-color: var(--c-border);
}
:root[data-theme="dark"] .footer-note {
    color: var(--c-text-soft);
}
:root[data-theme="dark"] .legal-links a {
    color: var(--c-text-soft);
}
:root[data-theme="dark"] .legal-links a:hover {
    color: var(--c-text);
}
:root[data-theme="dark"] .legal-links span {
    color: var(--c-text-faint);
}
:root[data-theme="dark"] .subtitle {
    color: var(--c-text-mut);
}
:root[data-theme="dark"] .description {
    color: var(--c-text);
}
:root[data-theme="dark"] h1 {
    color: var(--c-text);
}
:root[data-theme="dark"] .divider {
    background: var(--c-border);
}
:root[data-theme="dark"] .legal-title {
    color: var(--c-text);
}
:root[data-theme="dark"] .legal-date {
    color: var(--c-text-soft);
}
:root[data-theme="dark"] .legal-divider {
    background: var(--c-accent);
}
:root[data-theme="dark"] .legal-section h2 {
    color: var(--c-text-mut);
}
:root[data-theme="dark"] .legal-section p,
:root[data-theme="dark"] .legal-section ul li,
:root[data-theme="dark"] .legal-section ol li {
    color: var(--c-text);
}
:root[data-theme="dark"] .legal-section ul li::before {
    color: var(--c-text-faint);
}
:root[data-theme="dark"] body.legal-body .legal-section a,
:root[data-theme="dark"] body.legal-body .legal-section a:hover {
    color: #4ec8ff;
}
:root[data-theme="dark"] .mio-back-link {
    color: var(--c-text-soft);
}
:root[data-theme="dark"] .mio-back-link:hover {
    color: var(--c-text);
}
:root[data-theme="dark"] .legal-footer a {
    color: var(--c-text-soft);
}
:root[data-theme="dark"] .legal-footer a:hover {
    color: var(--c-text);
}
.mio-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--c-text-mut, #888);
    text-decoration: none;
}
.mio-back-arrow {
    display: inline-block;
    position: relative;
    font-size: 15px;
    line-height: 1;
}
.mio-back-text {
    display: inline-block;
    border-bottom: 1.5px solid transparent;
}
.mio-back-link:hover,
.mio-back-link:focus-visible {
    color: var(--c-text, #111);
}
.mio-back-link:hover .mio-back-arrow,
.mio-back-link:focus-visible .mio-back-arrow {
    transform: translateX(-4px);
    opacity: 1;
}
.mio-back-link:hover .mio-back-text,
.mio-back-link:focus-visible .mio-back-text {
    border-bottom-color: currentColor;
}
:root[data-theme="dark"] .mio-back-link:hover,
:root[data-theme="dark"] .mio-back-link:focus-visible {
    color: var(--c-text);
}
:root[data-theme="dark"] .profile-hero,
:root[data-theme="dark"] .profile-fields,
:root[data-theme="dark"] .mio-panel,
:root[data-theme="dark"] .user-card,
:root[data-theme="dark"] .public-profile-bio,
:root[data-theme="dark"] .public-api-card,
:root[data-theme="dark"] .project-card,
:root[data-theme="dark"] .api-card,
:root[data-theme="dark"] .user-search-card,
:root[data-theme="dark"] .user-search-bar,
:root[data-theme="dark"] .empty-state,
:root[data-theme="dark"] .report-card,
:root[data-theme="dark"] .admin-tab,
:root[data-theme="dark"] .admin-api-row,
:root[data-theme="dark"] .verify-disclaimer,
:root[data-theme="dark"] .mio-upload-drop {
    backdrop-filter: none;
    box-shadow: var(--c-surface-shadow);
}
:root[data-theme="dark"] .cookie-banner {
    background: var(--c-modal-solid, #121214);
    border-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: none;
    box-shadow: var(--c-shadow-modal);
}
:root[data-theme="dark"] .project-card:hover,
:root[data-theme="dark"] .public-api-card:hover {
    border-color: transparent;
    box-shadow: var(--c-surface-shadow);
}
:root:not([data-theme="dark"]) .profile-hero,
:root:not([data-theme="dark"]) .profile-fields,
:root:not([data-theme="dark"]) .mio-panel,
:root:not([data-theme="dark"]) .user-card,
:root:not([data-theme="dark"]) .public-profile-bio,
:root:not([data-theme="dark"]) .public-api-card,
:root:not([data-theme="dark"]) .project-card,
:root:not([data-theme="dark"]) .api-card,
:root:not([data-theme="dark"]) .user-search-card,
:root:not([data-theme="dark"]) .user-search-bar,
:root:not([data-theme="dark"]) .empty-state,
:root:not([data-theme="dark"]) .report-card,
:root:not([data-theme="dark"]) .admin-tab,
:root:not([data-theme="dark"]) .admin-api-row,
:root:not([data-theme="dark"]) .verify-disclaimer,
:root:not([data-theme="dark"]) .mio-upload-drop {
    backdrop-filter: none;
    box-shadow: var(--c-surface-shadow);
}
:root:not([data-theme="dark"]) .cookie-banner {
    background: #f2f2f7;
    border-color: rgba(60, 60, 67, 0.12);
    backdrop-filter: none;
    box-shadow: var(--c-shadow-modal);
}
:root[data-theme="dark"] .navbar {
    background: var(--c-bg-elev);
}
:root:not([data-theme="dark"]) .navbar {
    background: var(--c-bg-elev);
}
.mio-upload-icon,
.report-target-card,
.mc-modal-meta,
.modal-close {
    backdrop-filter: blur(14px);
}
:root[data-theme="dark"] .mio-upload-icon,
:root[data-theme="dark"] .report-target-card {
    background: rgba(10, 16, 28, 0.58);
    border: 1px solid var(--c-border);
    box-shadow: inset 0 1px 0 var(--c-surface-highlight);
}
:root[data-theme="dark"] .modal-close:hover {
    background: rgba(18, 26, 42, 0.72);
    border-color: var(--c-border-strong);
}
:root:not([data-theme="dark"]) .mio-upload-icon,
:root:not([data-theme="dark"]) .report-target-card {
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid var(--c-border);
    box-shadow: inset 0 1px 0 var(--c-surface-highlight);
}
:root:not([data-theme="dark"]) .modal-close:hover {
    background: rgba(255, 255, 255, 0.82);
    border-color: var(--c-border-strong);
}
.nav-brand {
    color: var(--c-text);
}
.nav-link {
    color: var(--c-text-mut);
}
.nav-link:hover {
    color: var(--c-text);
    background: var(--c-bg-soft);
}
.nav-link.active {
    color: var(--c-text);
    background: var(--c-bg-soft);
}
.nav-burger:hover {
    background: var(--c-bg-soft);
}
.nav-burger span {
    background: var(--c-text);
}
.nav-user {
    border-color: var(--c-border);
}
.nav-user:hover,
.nav-user.active {
    background: var(--c-bg-soft);
}
.nav-avatar {
    background: var(--c-bg-soft);
}
.nav-avatar-fallback {
    color: var(--c-text-mut);
}
.nav-username {
    color: var(--c-text);
}
.nav-logout {
    color: var(--c-text-soft);
}
.nav-logout:hover {
    color: var(--c-danger);
    background: var(--c-pill-rejected-bg);
}
:root[data-theme="dark"] .profile-hero,
:root[data-theme="dark"] .user-card {
    background: var(--c-bg-elev);
    border-color: var(--c-border);
}
:root[data-theme="dark"] .profile-hero-name,
:root[data-theme="dark"] .user-card-name {
    color: var(--c-text);
}
:root[data-theme="dark"] .profile-hero-name .prem-name-blue,
:root[data-theme="dark"] .user-search-name.prem-name-blue,
:root[data-theme="dark"] .user-search-name .prem-name-blue {
    color: #38bdf8;
}
:root[data-theme="dark"] .profile-hero-handle,
:root[data-theme="dark"] .user-card-handle {
    color: var(--c-text-mut);
}
:root[data-theme="dark"] .profile-fields {
    background: var(--c-bg-elev);
    border-color: var(--c-border);
}
:root[data-theme="dark"] .section-aside {
    color: var(--c-text-soft);
}
@media (max-width: 860px) {
    .nav-right {
        background: var(--c-bg-elev);
        border-bottom-color: var(--c-border-soft);
    }
}
.mio-verified-special-wrap {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    line-height: 0;
}
.mio-verified-special-wrap .mio-verified-special-dark {
    display: none;
}
:root[data-theme="dark"] .mio-verified-special-wrap .mio-verified-special-light {
    display: none;
}
:root[data-theme="dark"] .mio-verified-special-wrap .mio-verified-special-dark {
    display: inline;
}
::view-transition,
::view-transition-group(root),
::view-transition-image-pair(root),
::view-transition-old(root),
::view-transition-new(root) {
    pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        mix-blend-mode: normal;
        display: block;
        width: 100%;
        height: 100%;
        overflow: clip;
    }
    ::view-transition-new(root) {
        z-index: 2;
    }
    ::view-transition-old(root) {
        z-index: 1;
    }
    html.mio-theme-vt-reverse::view-transition-old(root) {
        z-index: 2;
    }
    html.mio-theme-vt-reverse::view-transition-new(root) {
        z-index: 1;
    }
}
.grainient-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}
.grainient-container canvas {
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
}
.grainient-container.is-ready canvas {
    opacity: 1;
}