/*
 * MiuOne ID — iOS-inspired interface layer
 * Loaded last to keep existing PHP/JS contracts intact.
 */

:root {
    --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: #f2f2f7;
    --c-bg-soft: rgba(118, 118, 128, 0.12);
    --c-bg-elev: rgba(255, 255, 255, 0.78);
    --c-bg-glass: rgba(255, 255, 255, 0.68);
    --c-surface-blur: 20px;
    --c-surface-shadow:
        0 1px 2px rgba(0, 0, 0, 0.03),
        0 8px 24px rgba(0, 0, 0, 0.07),
        0 24px 64px rgba(0, 0, 0, 0.04);
    --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-primary: #007aff;
    --c-primary-hover: #0875df;
    --c-on-primary: #ffffff;
    --c-accent: #007aff;
    --c-danger: #ff3b30;
    --c-danger-hover: #e5322a;
    --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-spring: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    --mio-press: 0.1s cubic-bezier(0.16, 1, 0.3, 1);
    --mio-radius-card: 22px;
    --mio-radius-control: 14px;
}

:root[data-theme="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: #000000;
    --c-bg-soft: rgba(118, 118, 128, 0.24);
    --c-bg-elev: rgba(28, 28, 30, 0.78);
    --c-bg-glass: rgba(28, 28, 30, 0.66);
    --c-surface-blur: 20px;
    --c-surface-shadow:
        0 1px 2px rgba(0, 0, 0, 0.40),
        0 12px 36px rgba(0, 0, 0, 0.36),
        0 28px 80px 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-primary: #0a84ff;
    --c-primary-hover: #2997ff;
    --c-on-primary: #ffffff;
    --c-accent: #0a84ff;
    --c-danger: #ff453a;
    --c-danger-hover: #ff6961;
}

html {
    background: var(--c-bg);
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
        "Helvetica Neue", Inter, "Segoe UI", sans-serif !important;
    background:
        radial-gradient(circle at 8% 0%, rgba(0, 122, 255, 0.09), transparent 32rem),
        radial-gradient(circle at 92% 14%, rgba(175, 82, 222, 0.07), transparent 28rem),
        var(--c-bg) !important;
    color: var(--c-text);
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -webkit-overflow-scrolling: touch;
}

:root[data-theme="dark"] body {
    background:
        radial-gradient(circle at 8% 0%, rgba(10, 132, 255, 0.15), transparent 32rem),
        radial-gradient(circle at 92% 14%, rgba(191, 90, 242, 0.10), transparent 28rem),
        var(--c-bg) !important;
}

::selection {
    background: rgba(0, 122, 255, 0.22);
}

a,
button,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"],
label[for],
summary {
    -webkit-tap-highlight-color: transparent;
}

button,
.btn,
.nav-link,
.nav-user,
.theme-toggle,
.action-tile,
.project-card,
.user-card,
.user-search-card,
.icon-btn,
.modal-close,
.mio-back-link,
.admin-tab,
.social-list-item,
.messages-contact-item {
    -webkit-user-select: none;
    user-select: none;
    will-change: auto;
    transform: none;
    transition:
        transform var(--mio-spring),
        opacity var(--mio-spring) !important;
}

button:active:not(:disabled),
.btn:active:not([disabled]),
.nav-link:active,
.nav-user:active,
.theme-toggle:active,
.action-tile:active,
.project-card:active,
.user-card:active,
.user-search-card:active,
.icon-btn:active,
.modal-close:active,
.admin-tab:active,
[role="button"]:active {
    transform: translateZ(0) scale(0.96) !important;
    transition-duration: 0.1s !important;
}

button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
    outline: 3px solid rgba(0, 122, 255, 0.34) !important;
    outline: 3px solid color-mix(in srgb, var(--c-accent) 38%, transparent) !important;
    outline-offset: 3px;
}

/* Controls */
.btn {
    min-height: 48px;
    height: 48px;
    padding: 0 22px;
    border: 0 !important;
    border-radius: var(--mio-radius-control) !important;
    font-family: inherit !important;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    box-shadow: none;
}

.btn-primary,
:root[data-theme="dark"] .btn-primary {
    background: var(--c-primary) !important;
    color: var(--c-on-primary) !important;
    box-shadow:
        0 1px 1px rgba(0, 0, 0, 0.06),
        0 6px 18px color-mix(in srgb, var(--c-primary) 25%, transparent);
}

.btn-secondary,
.btn-ghost,
:root[data-theme="dark"] .btn-secondary,
:root[data-theme="dark"] .btn-ghost {
    background: var(--c-bg-soft) !important;
    color: var(--c-accent) !important;
}

.btn-danger,
:root[data-theme="dark"] .btn-danger {
    background: var(--c-danger) !important;
    color: #fff !important;
}

@media (hover: hover) and (pointer: fine) {
    .btn:hover:not([disabled]) {
        transform: translateZ(0) scale(1.015);
        opacity: 0.88;
    }
}

input,
textarea,
select,
.mio-input,
.mio-textarea,
.mio-select,
.user-search-input,
.messages-sidebar-search-input {
    font-family: inherit !important;
    color: var(--c-text) !important;
    background: var(--c-bg-soft) !important;
    border: 1px solid transparent !important;
    border-radius: 13px !important;
    outline: none !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    transition:
        transform var(--mio-spring),
        opacity var(--mio-spring) !important;
    -webkit-appearance: none;
    appearance: none;
}

input:focus,
textarea:focus,
select:focus,
.mio-input:focus,
.mio-textarea:focus,
.mio-select:focus,
.user-search-input:focus,
.messages-sidebar-search-input:focus {
    border-color: var(--c-accent) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-accent) 16%, transparent) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--c-text-faint) !important;
    opacity: 1;
}

.field-label,
.profile-field-label,
.mio-panel-sub,
.section-aside {
    color: var(--c-text-mut) !important;
}

.mio-back-arrow {
    left: 0 !important;
    will-change: transform, opacity;
    transform: translateZ(0);
    transition:
        transform var(--mio-spring),
        opacity var(--mio-spring) !important;
}

.mio-back-link:hover .mio-back-arrow,
.mio-back-link:focus-visible .mio-back-arrow {
    transform: translate3d(-6px, 0, 0);
}

/* Small details glow; cards and panels themselves stay spatially stable. */
.action-tile:active,
.project-card:active,
.user-card:active,
.user-search-card:active,
.admin-tab:active,
.social-list-item:active,
.messages-contact-item:active {
    transform: translateZ(0) !important;
}

.mio-verified-tip {
    z-index: 40;
    overflow: visible !important;
}

.mio-verified-tip:hover,
.mio-verified-tip:focus-visible {
    z-index: 1000;
}

.mio-verified-tip .mio-verified {
    will-change: transform, opacity;
    transform: translateZ(0);
    transition:
        transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.mio-verified-tip:hover .mio-verified,
.mio-verified-tip:focus-visible .mio-verified {
    transform: translateZ(0) scale(1.06);
    filter: drop-shadow(0 0 7px color-mix(in srgb, var(--c-accent) 58%, transparent));
}

#modal-verify .mio-verified-tip {
    pointer-events: none;
}

#modal-verify .mio-verified-tip .mio-verified,
#modal-verify .mio-verified-tip:hover .mio-verified,
#modal-verify .mio-verified-tip:focus-visible .mio-verified {
    transform: translateZ(0) !important;
    filter: none !important;
}

.messages-panel-head .mio-verified-tip {
    pointer-events: none;
}

.messages-panel-head .mio-verified-tip .mio-verified,
.messages-panel-head .mio-verified-tip:hover .mio-verified,
.messages-panel-head .mio-verified-tip:focus-visible .mio-verified {
    transform: translateZ(0) !important;
    filter: none !important;
}

.messages-layout--thread .messages-sidebar-open-fab {
    display: none !important;
}

.notify-empty .messages-empty-icon img {
    width: 26px;
    height: 26px;
    opacity: 0.88;
    filter: invert(48%) sepia(97%) saturate(2508%) hue-rotate(195deg) brightness(102%);
}

.mio-verified-tip::before,
.mio-verified-tip::after {
    display: none !important;
}

.mio-verified-floating-tip {
    position: fixed;
    z-index: 20000;
    width: max-content;
    max-width: min(260px, calc(100vw - 24px));
    padding: 8px 11px;
    border: 1px solid color-mix(in srgb, var(--c-accent) 30%, var(--c-border-soft));
    border-radius: 11px;
    background: color-mix(in srgb, var(--c-bg-elev) 96%, transparent);
    color: var(--c-text);
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.12),
        0 16px 42px rgba(0, 0, 0, 0.16);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    font-size: 12px;
    font-weight: 550;
    line-height: 1.35;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transform: translateZ(0) scale(0.96);
    transform-origin: center bottom;
    will-change: transform, opacity;
    transition:
        transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.14s ease-out;
}

.mio-verified-floating-tip.is-visible {
    opacity: 1;
    transform: translateZ(0) scale(1);
}

.mio-verified-floating-tip.is-special {
    border-color: rgba(167, 139, 250, 0.42);
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.12),
        0 14px 42px rgba(139, 92, 246, 0.20);
}

/* Shared theme switch: one component for landing and navbar */
.mio-theme-switch {
    position: relative;
    z-index: 3;
    flex: 0 0 auto;
    overflow: hidden;
    width: 88px;
    height: 46px;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid color-mix(in srgb, var(--c-accent) 24%, var(--c-border-soft));
    border-radius: 18px;
    background:
        linear-gradient(115deg, rgba(255, 149, 0, 0.14), rgba(0, 122, 255, 0.13) 52%, rgba(175, 82, 222, 0.16)),
        color-mix(in srgb, var(--c-bg-elev) 90%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(190%);
    backdrop-filter: blur(20px) saturate(190%);
    box-shadow:
        0 12px 34px rgba(0, 122, 255, 0.15),
        0 4px 14px rgba(94, 92, 230, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.20);
    color: var(--c-text-mut);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    will-change: transform, opacity;
    transform: translateZ(0) scale(1);
    transition:
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.mio-theme-switch--floating {
    position: fixed;
    top: max(20px, env(safe-area-inset-top, 20px));
    right: max(20px, env(safe-area-inset-right, 20px));
    z-index: 100;
}

.mio-theme-switch::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 5px;
    width: 34px;
    height: 34px;
    border-radius: 14px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(244, 247, 255, 0.88));
    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transform: translate3d(0, 0, 0);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

:root[data-theme="dark"] .mio-theme-switch::before {
    background: linear-gradient(145deg, #343445, #1d1d28);
    transform: translate3d(44px, 0, 0);
}

.mio-theme-switch:active {
    transform: translateZ(0) scale(0.96) !important;
    transition-duration: 0.1s !important;
}

.mio-theme-switch-icon {
    position: relative;
    z-index: 1;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    opacity: 0.38;
    transform: translateZ(0) scale(0.82);
    transition:
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.mio-theme-switch-icon svg {
    width: 20px;
    height: 20px;
}

:root[data-theme="light"] .mio-theme-switch-icon--sun,
:root[data-theme="dark"] .mio-theme-switch-icon--moon {
    opacity: 1;
    transform: translateZ(0) scale(1.08);
}

:root[data-theme="light"] .mio-theme-switch-icon--sun { color: #ff9500; }
:root[data-theme="dark"] .mio-theme-switch-icon--moon { color: #8f8cff; }

:root[data-theme="dark"] .mio-theme-switch {
    border-color: rgba(143, 140, 255, 0.25);
    background:
        linear-gradient(115deg, rgba(255, 159, 10, 0.10), rgba(10, 132, 255, 0.18) 52%, rgba(191, 90, 242, 0.20)),
        rgba(24, 24, 30, 0.86);
    box-shadow:
        0 14px 38px rgba(10, 132, 255, 0.18),
        0 5px 18px rgba(191, 90, 242, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.landing-entry.landing-welcome-pending .container {
    opacity: 0;
}

.landing-entry.is-welcoming .container {
    animation: mio-home-card-in 0.48s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.landing-entry.is-welcoming .hero {
    animation: mio-home-hero-in 0.52s 0.035s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.landing-entry.is-welcoming .subtitle {
    animation: mio-home-copy-in 0.4s 0.11s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.landing-entry.is-welcoming .divider {
    transform-origin: center;
    animation: mio-home-divider-in 0.36s 0.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.landing-entry.is-welcoming .buttons,
.landing-entry.is-welcoming .auth-form {
    animation: mio-home-copy-in 0.38s 0.18s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.landing-entry.is-welcoming .auth-alt {
    animation: mio-home-copy-in 0.34s 0.23s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes mio-home-card-in {
    from { opacity: 0; transform: translateZ(0) scale(0.92); }
    to { opacity: 1; transform: translateZ(0) scale(1); }
}

@keyframes mio-home-hero-in {
    from { opacity: 0; transform: translateZ(0) scale(0.72); }
    to { opacity: 1; transform: translateZ(0) scale(1); }
}

@keyframes mio-home-copy-in {
    from { opacity: 0; transform: translateZ(0) scale(0.95); }
    to { opacity: 1; transform: translateZ(0) scale(1); }
}

@keyframes mio-home-divider-in {
    from { opacity: 0; transform: translateZ(0) scaleX(0.12); }
    to { opacity: 0.8; transform: translateZ(0) scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
    .landing-entry.landing-welcome-pending .container {
        opacity: 1;
    }
    .landing-entry.is-welcoming .container,
    .landing-entry.is-welcoming .hero,
    .landing-entry.is-welcoming .subtitle,
    .landing-entry.is-welcoming .divider,
    .landing-entry.is-welcoming .buttons,
    .landing-entry.is-welcoming .auth-form,
    .landing-entry.is-welcoming .auth-alt {
        animation: none !important;
    }
}

body.mio-landing {
    overflow-x: hidden;
}

body.mio-landing .container {
    max-width: 450px;
    padding: 38px;
    border: 1px solid var(--c-border-soft);
    border-radius: 32px;
    background: var(--c-bg-glass);
    -webkit-backdrop-filter: blur(20px) saturate(190%);
    backdrop-filter: blur(20px) saturate(190%);
    box-shadow: var(--c-surface-shadow), inset 0 1px 0 var(--c-surface-highlight);
    contain: layout style;
}

body.mio-landing .hero {
    margin-left: 0;
    gap: 8px;
}

body.mio-landing .logo {
    width: 112px;
    filter: drop-shadow(0 10px 18px rgba(0, 122, 255, 0.12));
}

body.mio-landing h1 {
    color: var(--c-text);
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -0.055em;
}

body.mio-landing .subtitle {
    color: var(--c-text-mut);
    font-size: 15px;
    line-height: 1.5;
    margin: 6px 0 28px;
}

body.mio-landing .divider {
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: var(--c-accent);
    opacity: 0.8;
}

body.mio-landing .buttons {
    gap: 10px;
}

body.mio-landing .buttons .btn {
    width: 100%;
}

.auth-form {
    gap: 16px;
}

.auth-form .field {
    gap: 8px;
}

.auth-form .field-label {
    padding-left: 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.auth-form .field input {
    min-height: 50px;
    height: 50px;
    padding: 0 16px;
    font-size: 16px;
}

.account-alert,
.form-errors {
    border: 0 !important;
    border-radius: 16px !important;
}

/* App shell */
.dashboard-body {
    --nav-h: 68px;
}

.navbar,
:root[data-theme="dark"] .navbar,
:root:not([data-theme="dark"]) .navbar {
    height: var(--nav-h);
    padding: 0 max(24px, env(safe-area-inset-left));
    background: color-mix(in srgb, var(--c-bg-glass) 92%, transparent) !important;
    border-bottom: 0 !important;
    box-shadow: 0 1px 0 var(--c-border-soft), 0 8px 32px rgba(0, 0, 0, 0.04);
    -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
    backdrop-filter: blur(20px) saturate(190%) !important;
    transform: translateZ(0);
    will-change: transform;
}

.nav-brand {
    font-weight: 700 !important;
    letter-spacing: -0.035em;
}

.nav-logo {
    filter: drop-shadow(0 5px 10px rgba(0, 122, 255, 0.14));
}

.nav-link {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px !important;
    border-radius: 11px !important;
    color: var(--c-text-mut) !important;
    font-size: 13px;
    font-weight: 500;
}

.nav-link.active {
    color: var(--c-text) !important;
    background: var(--c-bg-soft) !important;
}

.nav-user {
    min-height: 40px;
    padding: 4px 12px 4px 4px;
    border: 0 !important;
    background: var(--c-bg-soft);
}

.nav-avatar {
    box-shadow: 0 0 0 1px var(--c-border-soft);
}

.theme-toggle {
    width: 40px;
    height: 40px;
    border: 0;
    background: var(--c-bg-soft);
}

.nav-badge {
    min-width: 18px;
    min-height: 18px;
    border-radius: 999px;
    background: var(--c-danger) !important;
    color: #fff !important;
    box-shadow: 0 0 0 2px var(--c-bg-glass);
}

.dashboard {
    max-width: 980px;
    padding-top: 72px;
}

.dashboard-head,
.user-search-hero,
.rules-hero,
.report-page-hero {
    margin-bottom: 40px;
}

.dashboard-title {
    color: var(--c-text) !important;
    font-size: clamp(30px, 5vw, 44px) !important;
    font-weight: 700 !important;
    line-height: 1.08;
    letter-spacing: -0.05em !important;
}

.dashboard-sub {
    max-width: 620px;
    margin: 12px auto 0;
    color: var(--c-text-mut) !important;
    font-size: 15px;
    line-height: 1.55;
}

.section-title,
.mio-panel-title {
    color: var(--c-text) !important;
    font-weight: 650 !important;
    letter-spacing: -0.025em !important;
}

/* Shared iOS materials */
:where(
    .project-card,
    .profile-hero,
    .profile-fields,
    .mio-panel,
    .action-tile,
    .action-tile-status,
    .user-card,
    .public-stat,
    .public-profile-bio,
    .public-api-card,
    .api-card,
    .block-card,
    .user-search-card,
    .user-search-bar,
    .empty-state,
    .report-card,
    .admin-tab,
    .admin-api-row,
    .verify-tier-card,
    .verify-disclaimer,
    .mio-int-card,
    .messages-layout,
    .oauth-card,
    .oauth-error-card,
    .profile-card
) {
    border: 1px solid var(--c-border-soft) !important;
    border-radius: var(--mio-radius-card) !important;
    background: var(--c-bg-glass) !important;
    -webkit-backdrop-filter: blur(20px) saturate(190%);
    backdrop-filter: blur(20px) saturate(190%);
    box-shadow: var(--c-surface-shadow), inset 0 1px 0 var(--c-surface-highlight) !important;
}

:where(
    .project-card,
    .profile-hero,
    .mio-panel,
    .user-card,
    .user-search-card,
    .report-card,
    .mio-int-card,
    .messages-layout,
    .oauth-card
) {
    contain: layout style;
}

.projects {
    gap: 18px;
}

.project-card {
    min-height: 240px;
    padding: 26px !important;
}

.project-card:hover,
.user-search-card:hover,
.action-tile:hover {
    transform: translateZ(0) !important;
}

.project-name {
    color: var(--c-text) !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    letter-spacing: -0.04em !important;
}

.project-desc {
    color: var(--c-text-mut) !important;
    line-height: 1.55 !important;
}

.project-domain {
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--c-bg-soft);
    color: var(--c-text-mut) !important;
}

.project-cta {
    color: var(--c-accent) !important;
    font-weight: 600 !important;
}

.action-tile {
    border-radius: 18px !important;
    overflow: visible !important;
}

.action-tile-icon,
.mio-icon-surface,
.icon-btn {
    color: var(--c-accent) !important;
}

.profile-page .action-tile-icon .action-tile-svg {
    width: 23px;
    height: 23px;
    display: block;
    object-fit: contain;
    opacity: 0.94;
    filter: brightness(0) saturate(100%) invert(48%) sepia(99%) saturate(2912%) hue-rotate(199deg) brightness(104%);
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.profile-page .action-tile:hover .action-tile-svg,
.profile-page .action-tile:focus-visible .action-tile-svg {
    opacity: 1;
}

.pill,
.user-tag {
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--c-bg-soft);
}

.mio-table {
    overflow: hidden;
    border: 1px solid var(--c-border-soft) !important;
    border-radius: 18px;
    background: var(--c-bg-glass);
    box-shadow: var(--c-surface-shadow);
}

.mio-table thead th {
    background: var(--c-bg-soft) !important;
    color: var(--c-text-mut) !important;
}

.mio-table tbody td {
    border-bottom-color: var(--c-border-soft) !important;
}

.dashboard-footer {
    border-top: 0 !important;
    background: transparent !important;
    color: var(--c-text-soft) !important;
}

/* Search — one clean field instead of nested input surfaces. */
.user-search-bar-wrap {
    width: 100%;
    max-width: 720px;
    margin: 0 auto 28px !important;
}

.user-search-bar,
:root[data-theme="dark"] .user-search-bar {
    min-height: 60px;
    padding: 7px 10px !important;
    gap: 10px;
    border: 1px solid var(--c-border-soft) !important;
    border-radius: 20px !important;
    background: color-mix(in srgb, var(--c-bg-elev) 88%, transparent) !important;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 12px 34px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 var(--c-surface-highlight) !important;
    -webkit-backdrop-filter: blur(20px) saturate(190%);
    backdrop-filter: blur(20px) saturate(190%);
    transition: opacity 0.18s ease-out !important;
}

.user-search-bar:focus-within {
    border-color: color-mix(in srgb, var(--c-accent) 46%, transparent) !important;
    box-shadow:
        0 0 0 4px color-mix(in srgb, var(--c-accent) 13%, transparent),
        0 16px 42px rgba(0, 0, 0, 0.10),
        inset 0 1px 0 var(--c-surface-highlight) !important;
}

.user-search-icon {
    width: 40px;
    height: 40px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px !important;
    border-radius: 13px;
    background: color-mix(in srgb, var(--c-accent) 12%, transparent);
    color: var(--c-accent) !important;
    will-change: transform, opacity;
    transition:
        transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.18s ease-out !important;
}

.user-search-bar:focus-within .user-search-icon {
    transform: translateZ(0) scale(1.04);
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--c-accent) 35%, transparent));
}

.user-search-bar .user-search-input {
    order: initial !important;
    flex: 1 1 auto !important;
    width: auto !important;
    height: 46px !important;
    min-width: 0 !important;
    padding: 0 8px 0 2px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 17px !important;
}

.user-search-bar .user-search-input:focus {
    border: 0 !important;
    box-shadow: none !important;
}

.user-search-clear {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: var(--c-bg-soft);
    color: var(--c-text-mut);
    cursor: pointer;
    opacity: 0.82;
    transform: translateZ(0) scale(1);
    transition:
        transform 0.16s ease-out,
        opacity 0.16s ease-out !important;
}

.user-search-clear[hidden] {
    display: none !important;
}

.user-search-clear:hover {
    opacity: 1;
}

.user-search-clear:active {
    transform: translateZ(0) scale(0.94) !important;
}

.user-search-hero,
.user-search-bar-wrap {
    animation: mio-search-surface-in 0.36s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.user-search-bar-wrap {
    animation-delay: 45ms;
}

@keyframes mio-search-surface-in {
    from {
        opacity: 0;
        transform: translateZ(0) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateZ(0) scale(1);
    }
}

.user-search-results {
    min-height: 96px;
    opacity: 1;
    transform: translateZ(0) scale(1);
    transform-origin: center top;
    will-change: transform, opacity;
    transition:
        opacity 0.09s ease-out,
        transform 0.09s ease-out !important;
}

.user-search-results.is-view-leaving {
    opacity: 0;
    transform: translateZ(0) scale(0.992);
}

.user-search-results.is-view-entering {
    animation: mio-search-view-in 0.24s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes mio-search-view-in {
    from {
        opacity: 0;
        transform: translateZ(0) scale(0.988);
    }
    to {
        opacity: 1;
        transform: translateZ(0) scale(1);
    }
}

.user-search-progress,
.user-search-guidance {
    min-height: 104px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 22px;
    border: 1px solid var(--c-border-soft);
    border-radius: 20px;
    background: color-mix(in srgb, var(--c-bg-elev) 80%, transparent);
    color: var(--c-text-mut);
    font-size: 14px;
}

.user-search-progress .mio-loop-loader {
    flex: 0 0 42px;
}

.user-search-guidance {
    flex-direction: column;
    gap: 4px;
    text-align: center;
}

.user-search-guidance strong {
    color: var(--c-text);
    font-size: 15px;
}

.user-search-guidance span {
    color: var(--c-text-mut);
    font-size: 13px;
}

.user-search-empty--action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.user-search-empty--action p {
    margin: 0;
}

.user-search-bar.is-pending .user-search-icon,
.user-search-bar.is-searching .user-search-icon {
    animation: mio-search-icon-pulse 0.9s ease-in-out infinite alternate;
}

@keyframes mio-search-icon-pulse {
    from { opacity: 0.56; transform: translateZ(0) scale(0.96); }
    to { opacity: 1; transform: translateZ(0) scale(1.03); }
}

.user-search-results.is-loading {
    pointer-events: auto !important;
}

.user-search-card,
.messages-contact,
.messages-search-hit,
.profile-action-link,
.social-thread-user {
    pointer-events: auto !important;
}

.user-search-discovery {
    width: min(100%, 620px);
    margin: 0 auto;
    padding: 20px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 14px 16px;
    border: 1px solid var(--c-border-soft);
    border-radius: 22px;
    background: var(--c-bg-glass);
    -webkit-backdrop-filter: blur(20px) saturate(190%);
    backdrop-filter: blur(20px) saturate(190%);
    box-shadow: var(--c-surface-shadow), inset 0 1px 0 var(--c-surface-highlight);
}

.user-search-discovery-icon {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    grid-row: 1;
    border-radius: 17px;
    background: color-mix(in srgb, var(--c-accent) 12%, var(--c-bg-soft));
    color: var(--c-accent);
}

.user-search-discovery-icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    opacity: 0.9;
    filter: invert(57%) sepia(93%) saturate(3820%) hue-rotate(193deg) brightness(101%);
}

.user-search-discovery-copy {
    min-width: 0;
}

.user-search-discovery-copy h2 {
    margin: 0 0 4px;
    color: var(--c-text);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.user-search-discovery-copy p {
    margin: 0;
    color: var(--c-text-mut);
    font-size: 13px;
    line-height: 1.45;
}

.user-search-show-all {
    grid-column: 1 / -1;
    min-height: 50px;
    padding: 0 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 0;
    border-radius: 15px;
    background: var(--c-primary);
    color: #fff;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--c-primary) 25%, transparent);
    font: inherit;
    font-size: 15px;
    font-weight: 650;
    cursor: pointer;
    will-change: transform, opacity;
    transition:
        transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.16s ease-out !important;
}

.user-search-show-all svg {
    flex-shrink: 0;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.user-search-show-all:hover svg {
    transform: translate3d(3px, 0, 0);
}

.user-search-show-all:active,
.user-search-show-all.is-activating {
    transform: translateZ(0) scale(0.98) !important;
    opacity: 0.86;
}

.user-search-show-all.is-activating svg {
    transform: translate3d(5px, 0, 0);
}

@keyframes user-search-card-in {
    from {
        opacity: 0;
        transform: translateZ(0) scale(0.99);
    }
    to {
        opacity: 1;
        transform: translateZ(0) scale(1);
    }
}

.user-search-list--enter .user-search-card {
    animation-duration: 0.24s !important;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.user-search-list--enter .user-search-card:nth-child(1) { animation-delay: 0ms; }
.user-search-list--enter .user-search-card:nth-child(2) { animation-delay: 18ms; }
.user-search-list--enter .user-search-card:nth-child(3) { animation-delay: 36ms; }
.user-search-list--enter .user-search-card:nth-child(n + 4) { animation-delay: 54ms; }

/* Tabs use transform/opacity only; content moves a few pixels on X. */
.mio-tab-bar {
    display: none !important;
}

.social-modal-tab,
.mc-modal-tab {
    position: relative;
    overflow: visible;
    transition: opacity 0.16s ease-out !important;
}

.social-modal-tab::after,
.mc-modal-tab::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -1px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--c-accent), #6e5cff);
    opacity: 0;
    transform: translateZ(0) scaleX(0.35);
    transform-origin: center;
    will-change: transform, opacity;
    transition:
        transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.16s ease-out;
}

.social-modal-tab.is-active::after,
.mc-modal-tab.is-active::after {
    opacity: 1;
    transform: translateZ(0) scaleX(1);
}

.mc-modal-tab {
    border-bottom-color: transparent !important;
}

.social-modal-list,
.mc-modal-panel {
    will-change: transform, opacity;
}

.social-modal-list {
    transition:
        transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.16s ease-out !important;
}

.social-modal-list.is-tab-loading {
    opacity: 0.52 !important;
    transform: translateZ(0) scale(0.995) !important;
    pointer-events: none;
}

.social-modal-list-wrap {
    height: auto !important;
    overflow: hidden;
    transition: none !important;
    will-change: auto !important;
}

#modal-social-list .modal.is-resizing {
    transform: translateZ(0) scale(1) !important;
    transition:
        transform var(--mio-spring),
        opacity var(--mio-spring) !important;
}

.email-verify-dialog {
    max-width: 480px !important;
}

.email-verify-modal {
    text-align: center;
}

.email-verify-hero {
    width: 58px;
    height: 58px;
    margin: 2px auto 16px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: var(--c-accent);
    background: color-mix(in srgb, var(--c-accent) 13%, var(--c-bg-soft));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-accent) 16%, transparent);
}

.email-verify-modal .modal-intro {
    margin: 0 auto 10px !important;
    max-width: 34ch;
    color: var(--c-text) !important;
    font-size: 15px;
    line-height: 1.5;
}

.email-verify-address {
    margin: 0 auto 12px;
    padding: 11px 14px;
    max-width: 100%;
    overflow: hidden;
    border: 1px solid var(--c-border-soft);
    border-radius: 13px;
    background: var(--c-bg-soft);
    color: var(--c-text);
    font-size: 14px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.email-verify-note {
    margin: 0 auto 20px;
    max-width: 42ch;
    color: var(--c-text-mut);
    font-size: 12px;
    line-height: 1.5;
}

#email-send-form.is-complete {
    display: none;
}

#modal-email-verify .email-verify-step-code {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    text-align: left;
}

#modal-email-verify .modal-foot {
    padding-left: 0;
    padding-right: 0;
}

/* Unified custom selects, including Privacy. */
.mio-custom-select-trigger,
:root[data-theme="dark"] .mio-custom-select-trigger {
    min-height: 50px !important;
    padding: 0 46px 0 15px !important;
    border: 1px solid transparent !important;
    border-radius: 14px !important;
    background: var(--c-bg-soft) !important;
    color: var(--c-text) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
    font-size: 15px !important;
    font-weight: 550;
    will-change: transform, opacity;
    transition:
        transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.16s ease-out !important;
}

.mio-custom-select.is-open .mio-custom-select-trigger {
    border-color: var(--c-accent) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-accent) 14%, transparent) !important;
}

.mio-custom-select-chevron {
    width: 8px !important;
    height: 8px !important;
    transition:
        transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.16s ease-out !important;
}

.mio-custom-select-menu,
.mio-custom-select-menu--portal,
:root[data-theme="dark"] .mio-custom-select-menu,
:root[data-theme="dark"] .mio-custom-select-menu--portal {
    padding: 6px !important;
    border: 1px solid var(--c-border-soft) !important;
    border-radius: 16px !important;
    background: color-mix(in srgb, var(--c-bg-elev) 96%, transparent) !important;
    -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
    backdrop-filter: blur(20px) saturate(190%) !important;
    box-shadow: var(--c-shadow-modal), inset 0 1px 0 var(--c-surface-highlight) !important;
    opacity: 0;
    pointer-events: none;
    transform: translateZ(0) scale(0.985) !important;
    transform-origin: center top;
    will-change: transform, opacity;
    transition:
        transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.15s ease-out !important;
}

.mio-custom-select-menu.is-open,
.mio-custom-select-menu--portal.is-open {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateZ(0) scale(1) !important;
}

.mio-custom-select-option {
    position: relative;
    min-height: 43px;
    padding: 11px 38px 11px 12px !important;
    display: flex;
    align-items: center;
    border-radius: 11px !important;
    color: var(--c-text) !important;
    transition: opacity 0.15s ease-out !important;
}

.mio-custom-select-option:hover {
    background: var(--c-bg-soft) !important;
}

.mio-custom-select-option.is-selected {
    background: color-mix(in srgb, var(--c-accent) 13%, transparent) !important;
    color: var(--c-accent) !important;
    font-weight: 650 !important;
}

.mio-custom-select-option.is-selected::after {
    content: "✓";
    position: absolute;
    right: 13px;
    color: var(--c-accent);
    font-size: 15px;
    font-weight: 700;
}

/* Messages */
.messages-layout {
    overflow: hidden;
}

.messages-sidebar {
    background: color-mix(in srgb, var(--c-bg-glass) 88%, transparent) !important;
    border-right-color: var(--c-border-soft) !important;
}

.messages-panel,
.messages-panel-head,
.social-compose {
    background: transparent !important;
}

.messages-panel-head {
    -webkit-backdrop-filter: blur(20px) saturate(190%);
    backdrop-filter: blur(20px) saturate(190%);
    border-bottom-color: var(--c-border-soft) !important;
}

.social-message-bubble,
.messages-bubble {
    border-radius: 18px !important;
}

/* Modals, alerts and feedback */
.modal-backdrop,
:root[data-theme="dark"] .modal-backdrop,
:root:not([data-theme="dark"]) .modal-backdrop {
    background: rgba(0, 0, 0, 0.28) !important;
    -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
    backdrop-filter: blur(20px) saturate(150%) !important;
    transition: opacity var(--mio-spring) !important;
}

.modal,
:root[data-theme="dark"] .modal,
:root:not([data-theme="dark"]) .modal {
    border: 1px solid var(--c-border-soft) !important;
    border-radius: 26px !important;
    background: color-mix(in srgb, var(--c-bg-elev) 94%, transparent) !important;
    -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
    backdrop-filter: blur(20px) saturate(190%) !important;
    box-shadow: var(--c-shadow-modal), inset 0 1px 0 var(--c-surface-highlight) !important;
    transform: translateZ(0) scale(0.985);
    will-change: transform, opacity;
    contain: layout style;
    transition:
        transform var(--mio-spring),
        opacity var(--mio-spring) !important;
}

.modal-backdrop.open .modal {
    transform: translateZ(0) scale(1);
}

.modal-title {
    color: var(--c-text) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    letter-spacing: -0.035em !important;
}

.modal-close {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border-radius: 50% !important;
    background: var(--c-bg-soft) !important;
    color: var(--c-text-mut) !important;
}

.mio-dialog {
    transition: opacity var(--mio-spring) !important;
}

.mio-dialog-backdrop {
    background: rgba(0, 0, 0, 0.28) !important;
    -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
    backdrop-filter: blur(20px) saturate(150%) !important;
}

.mio-dialog-box {
    border: 1px solid var(--c-border-soft) !important;
    border-radius: 26px !important;
    background: color-mix(in srgb, var(--c-bg-elev) 94%, transparent) !important;
    -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
    backdrop-filter: blur(20px) saturate(190%) !important;
    box-shadow: var(--c-shadow-modal), inset 0 1px 0 var(--c-surface-highlight) !important;
    will-change: transform, opacity;
    contain: layout style;
}

/* Branded page-transition loop. */
.mio-page-loader {
    position: fixed;
    inset: 0;
    z-index: 30000;
    display: grid;
    place-items: center;
    pointer-events: none;
    opacity: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    will-change: opacity;
    transition: opacity 0.16s ease-out;
}

.mio-page-loader.is-visible {
    opacity: 1;
}

.mio-page-loader-pill {
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    transform: translateZ(0) scale(0.94);
    will-change: transform, opacity;
    transition:
        transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.15s ease-out;
}

.mio-page-loader.is-visible .mio-page-loader-pill {
    transform: translateZ(0) scale(1);
}

.mio-loop-loader {
    position: relative;
    width: 42px;
    height: 22px;
}

.mio-loop-loader span {
    position: absolute;
    top: 1px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: conic-gradient(from 30deg, #007aff, #5e5ce6, #af52de, transparent 72%);
    -webkit-mask: radial-gradient(circle, transparent 53%, #000 56%);
    mask: radial-gradient(circle, transparent 53%, #000 56%);
    will-change: transform, opacity;
}

.mio-loop-loader span:first-child {
    left: 2px;
    animation: mio-loop-left 0.82s linear infinite;
}

.mio-loop-loader span:last-child {
    right: 2px;
    animation: mio-loop-right 0.82s linear infinite;
}

@keyframes mio-loop-left {
    to { transform: translateZ(0) rotate(360deg); }
}

@keyframes mio-loop-right {
    to { transform: translateZ(0) rotate(-360deg); }
}

.toast {
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px !important;
    background: rgba(28, 28, 30, 0.88) !important;
    -webkit-backdrop-filter: blur(20px) saturate(190%);
    backdrop-filter: blur(20px) saturate(190%);
    box-shadow: var(--c-shadow-toast) !important;
    transform: translateZ(0) scale(0.96);
    will-change: transform, opacity;
    transition:
        transform var(--mio-spring),
        opacity var(--mio-spring) !important;
}

.toast.show {
    transform: translateZ(0) scale(1);
}

.cookie-banner {
    border: 1px solid var(--c-border-soft) !important;
    border-radius: 22px !important;
    background: var(--c-bg-glass) !important;
    -webkit-backdrop-filter: blur(20px) saturate(190%);
    backdrop-filter: blur(20px) saturate(190%);
    box-shadow: var(--c-shadow-modal) !important;
}

/* First-entry development notice */
body.mio-development-notice-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}

.mio-development-notice {
    position: fixed;
    inset: 0;
    z-index: 30000;
    display: grid;
    place-items: center;
    padding:
        max(20px, env(safe-area-inset-top, 20px))
        max(16px, env(safe-area-inset-right, 16px))
        max(20px, env(safe-area-inset-bottom, 20px))
        max(16px, env(safe-area-inset-left, 16px));
    background: rgba(3, 7, 15, 0.42);
    -webkit-backdrop-filter: blur(20px) saturate(190%);
    backdrop-filter: blur(20px) saturate(190%);
    opacity: 0;
    pointer-events: none;
    contain: layout style paint;
    will-change: opacity;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.mio-development-notice.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.mio-development-notice-card {
    width: min(100%, 460px);
    max-height: min(680px, calc(100dvh - 40px));
    overflow-y: auto;
    padding: 26px;
    border: 1px solid var(--c-border-soft);
    border-radius: 22px;
    background: var(--c-bg-elev);
    color: var(--c-text);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.10),
        0 20px 60px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 var(--c-surface-highlight);
    opacity: 0;
    transform: translateZ(0) scale(0.94);
    transform-origin: center;
    contain: layout style;
    will-change: transform, opacity;
    transition:
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.mio-development-notice.is-visible .mio-development-notice-card {
    opacity: 1;
    transform: translateZ(0) scale(1);
}

.mio-development-notice-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    margin-bottom: 16px;
    border-radius: 14px;
    color: var(--c-accent);
    background: var(--c-bg-soft);
}

.mio-development-notice-icon svg {
    width: 23px;
    height: 23px;
}

.mio-development-notice-heading {
    margin-bottom: 13px;
}

.mio-development-notice-heading h2 {
    margin: 0;
    color: var(--c-text);
    font-size: clamp(23px, 5vw, 27px);
    font-weight: 650;
    line-height: 1.14;
    letter-spacing: -0.035em;
}

.mio-development-notice-copy {
    color: var(--c-text-mut);
    font-size: 14px;
    line-height: 1.55;
}

.mio-development-notice-copy p {
    margin: 0;
}

.mio-development-notice-app {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin: 18px 0 0;
    padding: 14px;
    border: 1px solid var(--c-border-soft);
    border-radius: 16px;
    background: var(--c-bg-soft);
    contain: layout style paint;
}

.mio-development-notice-app-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: var(--c-text-mut);
    background: var(--c-bg-elev);
}

.mio-development-notice-app-icon svg {
    width: 24px;
    height: 24px;
}

.mio-development-notice-app strong,
.mio-development-notice-app small {
    display: block;
}

.mio-development-notice-app strong {
    margin-bottom: 2px;
    color: var(--c-text);
    font-size: 13px;
    line-height: 1.35;
}

.mio-development-notice-app small {
    color: var(--c-text-soft);
    font-size: 12px;
    line-height: 1.45;
}

.mio-development-notice-continue {
    width: 100%;
    min-height: 48px;
    margin-top: 20px;
    border-radius: 14px !important;
}

@media (max-width: 600px) {
    .mio-development-notice {
        padding:
            max(12px, env(safe-area-inset-top, 12px))
            max(10px, env(safe-area-inset-right, 10px))
            max(12px, env(safe-area-inset-bottom, 12px))
            max(10px, env(safe-area-inset-left, 10px));
    }

    .mio-development-notice-card {
        max-height: calc(100dvh - 24px);
        padding: 20px 18px 18px;
        border-radius: 22px;
    }

    .mio-development-notice-icon {
        width: 42px;
        height: 42px;
        margin-bottom: 13px;
        border-radius: 13px;
    }

    .mio-development-notice-heading {
        margin-bottom: 13px;
    }

    .mio-development-notice-heading h2 {
        font-size: 24px;
    }

    .mio-development-notice-copy {
        font-size: 13px;
        line-height: 1.52;
    }

    .mio-development-notice-app {
        margin: 16px 0 0;
        padding: 12px;
    }

    .mio-development-notice-continue {
        margin-top: 18px;
    }
}

/* OAuth and legal flows */
.oauth-page {
    font-family: inherit !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(0, 122, 255, 0.12), transparent 28rem),
        var(--c-bg) !important;
}

.oauth-card,
.oauth-error-card {
    max-width: 430px !important;
    padding: 28px !important;
}

.oauth-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: -0.04em !important;
}

.oauth-bridge {
    border: 0 !important;
    border-radius: 18px !important;
    background: var(--c-bg-soft) !important;
}

.legal-container {
    max-width: 720px !important;
    padding: clamp(24px, 5vw, 52px);
    border: 1px solid var(--c-border-soft);
    border-radius: 30px;
    background: var(--c-bg-glass);
    -webkit-backdrop-filter: blur(20px) saturate(190%);
    backdrop-filter: blur(20px) saturate(190%);
    box-shadow: var(--c-surface-shadow), inset 0 1px 0 var(--c-surface-highlight);
    contain: layout style;
}

.legal-title {
    color: var(--c-text) !important;
    font-size: clamp(32px, 6vw, 48px) !important;
    font-weight: 700 !important;
    letter-spacing: -0.05em !important;
}

.legal-section {
    padding: 20px 0;
    margin-bottom: 0 !important;
    border-top: 1px solid var(--c-border-soft);
}

.legal-section h2 {
    color: var(--c-text) !important;
    font-size: 17px !important;
    font-weight: 650 !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
}

.legal-section p,
.legal-section li {
    color: var(--c-text-mut) !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
}

/* Error and maintenance screens */
.mio-404-body {
    --mio404-bg: var(--c-bg) !important;
    --mio404-text: var(--c-text) !important;
    --mio404-muted: var(--c-text-mut) !important;
    font-family: inherit !important;
}

.mio-404-digit {
    color: var(--c-accent) !important;
    text-shadow: 0 20px 80px color-mix(in srgb, var(--c-accent) 32%, transparent) !important;
    filter: none !important;
    will-change: transform, opacity;
    animation: mio-ios-error-in 0.7s calc(0.05s + var(--i, 0) * 0.08s)
        cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.mio-404-btn {
    border-radius: var(--mio-radius-control) !important;
}

/* Wallet */
.wallet-hero {
    position: relative;
    overflow: hidden;
    padding: 34px 36px !important;
    border: 1px solid var(--c-border-soft) !important;
    border-radius: 26px !important;
    background:
        radial-gradient(circle at 92% 0%, rgba(255, 255, 255, 0.34), transparent 15rem),
        linear-gradient(145deg, #007aff 0%, #5856d6 100%) !important;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.08),
        0 20px 50px rgba(0, 122, 255, 0.22) !important;
    color: #fff !important;
    contain: layout style;
}

.wallet-hero-balance,
.wallet-hero-currency {
    color: #fff !important;
    font-variant-numeric: tabular-nums;
}

.wallet-hero-balance {
    font-size: clamp(40px, 8vw, 56px) !important;
    font-weight: 700 !important;
    letter-spacing: -0.055em !important;
}

.wallet-fp-badge {
    border: 1px solid rgba(255, 255, 255, 0.20) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.14) !important;
    color: rgba(255, 255, 255, 0.86) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.wallet-tx-item {
    border-bottom-color: var(--c-border-soft) !important;
}

.wallet-tx-icon,
.wallet-empty-icon,
.topup-preset,
.topup-pay-method,
.topup-order-box {
    border: 0 !important;
    border-radius: 14px !important;
    background: var(--c-bg-soft) !important;
}

.topup-preset,
.topup-pay-method {
    will-change: transform, opacity;
    transform: translateZ(0);
    transition:
        transform var(--mio-spring),
        opacity var(--mio-spring) !important;
}

.topup-preset:active,
.topup-pay-method:active {
    transform: translateZ(0) scale(0.96) !important;
    transition-duration: 0.1s !important;
}

.topup-preset.active,
.topup-pay-method.is-active {
    background: color-mix(in srgb, var(--c-accent) 14%, var(--c-bg-soft)) !important;
    color: var(--c-accent) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-accent) 35%, transparent) !important;
}

.wallet-result-backdrop.open .wallet-result-check-circle,
.wallet-result-backdrop.open .wallet-result-check-path {
    animation: none !important;
    stroke-dashoffset: 0 !important;
}

/* Premium keeps its branded light field, but uses native materials and motion. */
.pf,
.prem-cta,
.prem-info-card,
.prem-plan-card,
.prem-flash,
.prem-nofunds,
.prem-cancel-wrap {
    border-radius: 22px !important;
    -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
    backdrop-filter: blur(20px) saturate(190%) !important;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.16),
        0 18px 60px rgba(3, 6, 28, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

.prem-plan-card,
.btn-prem,
.btn-prem-renew,
.btn-prem-ghost,
.btn-prem-cancel,
.prem-renew-chip {
    -webkit-user-select: none;
    user-select: none;
    will-change: transform, opacity;
    transform: translateZ(0);
    transition:
        transform var(--mio-spring),
        opacity var(--mio-spring) !important;
}

.btn-prem,
.btn-prem-renew,
.btn-prem-ghost {
    min-height: 48px !important;
    border-radius: 14px !important;
}

.prem-plan:active .prem-plan-card,
.btn-prem:active,
.btn-prem-renew:active,
.btn-prem-ghost:active,
.btn-prem-cancel:active,
.prem-renew-chip:active {
    transform: translateZ(0) scale(0.96) !important;
    transition-duration: 0.1s !important;
}

.prem-confirm-overlay {
    -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
    backdrop-filter: blur(20px) saturate(150%) !important;
}

.prem-confirm-box {
    border-radius: 26px !important;
    -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
    backdrop-filter: blur(20px) saturate(190%) !important;
    contain: layout style;
}

.prem-cta::after {
    display: none !important;
    animation: none !important;
}

/* Mobile sheet behavior */
@media (max-width: 860px) {
    .dashboard-body {
        --nav-h: calc(60px + env(safe-area-inset-top, 0px));
        padding-top: var(--nav-h) !important;
    }

    .navbar,
    :root[data-theme="dark"] .navbar,
    :root:not([data-theme="dark"]) .navbar {
        top: 0 !important;
        height: var(--nav-h) !important;
        padding-top: env(safe-area-inset-top, 0px);
        padding-left: max(16px, env(safe-area-inset-left, 16px));
        padding-right: max(16px, env(safe-area-inset-right, 16px));
    }

    .nav-right {
        top: var(--nav-h) !important;
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        max-height: calc(100dvh - var(--nav-h) - 20px) !important;
        overflow-y: auto !important;
        padding: 12px 12px max(12px, env(safe-area-inset-bottom, 12px)) !important;
        border: 1px solid var(--c-border-soft) !important;
        border-radius: 0 0 24px 24px !important;
        background: color-mix(in srgb, var(--c-bg-elev) 94%, transparent) !important;
        -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
        backdrop-filter: blur(20px) saturate(190%) !important;
        box-shadow: var(--c-shadow-modal) !important;
        -webkit-overflow-scrolling: touch;
    }

    body.nav-open .nav-right {
        animation: mio-ios-sheet-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both !important;
    }

    .nav-link {
        min-height: 46px;
        padding: 0 14px !important;
        border-radius: 13px !important;
    }

    .nav-user {
        min-height: 54px;
        border-radius: 16px !important;
    }

    .dashboard {
        padding-top: 40px;
    }

    .modal-backdrop {
        align-items: flex-end;
        padding: 10px max(10px, env(safe-area-inset-right, 10px))
            max(10px, env(safe-area-inset-bottom, 10px))
            max(10px, env(safe-area-inset-left, 10px));
    }

    .modal,
    .modal-md,
    .modal-lg,
    .modal-sm {
        max-width: none !important;
        max-height: min(88dvh, calc(100dvh - env(safe-area-inset-top, 0px) - 20px)) !important;
        margin: 0 !important;
        border-radius: 28px !important;
        transform: translateZ(0) scale(0.985);
    }

    .modal-backdrop.open .modal {
        transform: translateZ(0) scale(1);
    }
}

@media (max-width: 600px) {
    body.mio-landing {
        padding: max(16px, env(safe-area-inset-top, 16px))
            max(12px, env(safe-area-inset-right, 12px))
            max(16px, env(safe-area-inset-bottom, 16px))
            max(12px, env(safe-area-inset-left, 12px)) !important;
    }

    body.mio-landing .container {
        max-width: 100%;
        padding: 28px 20px;
        border-radius: 28px;
    }

    body.mio-landing .logo {
        width: 78px;
    }

    body.mio-landing h1 {
        font-size: 32px;
    }

    .dashboard {
        padding-left: max(14px, env(safe-area-inset-left, 14px));
        padding-right: max(14px, env(safe-area-inset-right, 14px));
    }

    .dashboard-title {
        font-size: 30px !important;
    }

    .user-search-bar {
        min-height: 56px;
        flex-wrap: nowrap !important;
        align-items: center !important;
        padding: 6px 8px !important;
    }

    .user-search-icon {
        order: initial !important;
        width: 38px;
        height: 38px;
        flex-basis: 38px !important;
    }

    .user-search-bar .user-search-input {
        order: initial !important;
        flex: 1 1 auto !important;
        width: auto !important;
        height: 44px !important;
    }

    .user-search-discovery {
        padding: 17px;
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 12px;
        border-radius: 20px;
    }

    .user-search-discovery-icon {
        width: 48px;
        height: 48px;
        border-radius: 15px;
    }

    .user-search-discovery-icon img {
        width: 28px;
        height: 28px;
    }

    .user-search-show-all {
        min-height: 48px;
        padding: 0 14px;
        font-size: 14px;
    }

    .project-card {
        min-height: 210px;
        padding: 22px !important;
    }

    .wallet-hero {
        padding: 28px 22px !important;
    }

    .legal-container {
        padding: 24px 18px;
        border-radius: 24px;
    }

    /* Mobile-first polish. Desktop declarations stay untouched. */
    body.mio-landing.landing-entry {
        min-height: 100dvh;
        align-items: flex-start;
        padding-top: max(76px, calc(env(safe-area-inset-top, 0px) + 64px)) !important;
        padding-bottom: max(20px, env(safe-area-inset-bottom, 20px)) !important;
        overflow-y: auto;
    }

    body.mio-landing.landing-entry .container {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding: 24px 18px;
        border-radius: 26px;
        box-sizing: border-box;
        contain: layout style;
    }

    .mio-theme-switch--floating {
        top: max(12px, env(safe-area-inset-top, 12px));
        right: max(12px, env(safe-area-inset-right, 12px));
    }

    body.auth-page .hero {
        width: 100%;
        min-width: 0;
        justify-content: center;
    }

    body.auth-page .hero h1 {
        min-width: 0;
        font-size: clamp(25px, 8.5vw, 30px);
        line-height: 1.08;
        overflow-wrap: anywhere;
    }

    body.auth-page .subtitle {
        margin: 8px 0 18px;
        font-size: 14px;
        line-height: 1.5;
    }

    body.auth-page .divider {
        margin-bottom: 20px;
    }

    .auth-form {
        gap: 14px;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .auth-form .field {
        gap: 7px;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .auth-form .field input {
        width: 100%;
        max-width: 100%;
        min-height: 52px;
        padding: 0 15px;
        border-radius: 14px !important;
        box-sizing: border-box;
        font-size: 16px !important;
    }

    .auth-form .field-hint {
        padding: 0 3px;
        font-size: 11px;
        line-height: 1.45;
    }

    .auth-form .btn,
    .landing-home .buttons .btn {
        min-height: 52px;
        border-radius: 15px !important;
    }

    .auth-alt {
        margin-top: 20px;
        line-height: 1.5;
    }

    .navbar {
        padding-left: max(12px, env(safe-area-inset-left, 12px)) !important;
        padding-right: max(12px, env(safe-area-inset-right, 12px)) !important;
    }

    .profile-page .profile-hero,
    .public-profile .public-profile-hero {
        padding: 18px !important;
        border-radius: 24px !important;
    }

    .profile-actions-grid {
        gap: 8px !important;
    }

    .profile-page .action-tile {
        min-height: 72px;
        padding: 13px 14px !important;
        border-radius: 20px !important;
    }

    .profile-page .action-tile-icon {
        width: 40px;
        height: 40px;
    }

    .profile-page .action-tile-title {
        font-size: 14px;
    }

    .profile-page .action-tile-sub {
        font-size: 12px;
        line-height: 1.35;
    }

    .user-search-page .user-search-stage {
        padding-top: 20px !important;
    }

    .user-search-split-title {
        font-size: clamp(25px, 8vw, 30px) !important;
    }

    .user-search-bar-wrap {
        margin-bottom: 18px !important;
    }

    .user-search-discovery {
        padding: 16px;
    }

    .modal-head {
        padding-left: 18px !important;
        padding-right: 14px !important;
    }

    .modal-body {
        padding-left: 18px !important;
        padding-right: 18px !important;
        -webkit-overflow-scrolling: touch;
    }

    .modal-foot {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px !important;
    }

    .modal-foot .btn {
        width: 100%;
        min-width: 0;
        min-height: 48px;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .social-modal-tabs {
        gap: 0;
    }

    .social-modal-tab {
        min-width: 0;
        padding-left: 5px;
        padding-right: 5px;
        font-size: 12px;
    }

    .mio-custom-select-trigger {
        min-height: 52px !important;
        font-size: 16px !important;
    }

    .mio-custom-select-option {
        min-height: 48px;
        font-size: 15px;
    }

    .cookie-banner {
        left: max(10px, env(safe-area-inset-left, 10px)) !important;
        right: max(10px, env(safe-area-inset-right, 10px)) !important;
        bottom: max(10px, env(safe-area-inset-bottom, 10px)) !important;
        width: auto !important;
        padding: 16px !important;
        border-radius: 20px !important;
        box-sizing: border-box;
    }

    .cookie-text {
        margin-bottom: 12px;
        line-height: 1.5;
    }

    .cookie-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .cookie-actions .btn {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        height: 44px;
        padding: 0 10px;
    }
}

@media (max-width: 420px) {
    body.mio-landing.landing-entry {
        padding-left: max(10px, env(safe-area-inset-left, 10px)) !important;
        padding-right: max(10px, env(safe-area-inset-right, 10px)) !important;
    }

    body.mio-landing.landing-entry .container {
        padding: 21px 14px;
        border-radius: 23px;
    }

    body.mio-landing .logo {
        width: 70px;
    }

    body.auth-page .hero {
        gap: 5px;
    }

    body.auth-page .hero h1 {
        font-size: 25px;
    }

    .landing-home .hero h1 {
        font-size: 29px;
    }

    .modal,
    .modal-md,
    .modal-lg,
    .modal-sm {
        border-radius: 23px !important;
    }

    .modal-foot {
        display: flex !important;
        flex-direction: column-reverse;
    }

    .verify-proof-links,
    .verify-media-block {
        min-width: 0;
    }

    .user-search-discovery {
        grid-template-columns: 42px minmax(0, 1fr);
        padding: 14px;
        gap: 10px;
        border-radius: 18px;
    }

    .user-search-discovery-icon {
        width: 42px;
        height: 42px;
        border-radius: 13px;
    }

    .profile-page .action-tile {
        min-height: 68px;
        padding: 12px !important;
        border-radius: 18px !important;
    }

    .dashboard-title {
        font-size: 27px !important;
    }
}

@media (max-width: 860px) {
    .navbar,
    :root[data-theme="dark"] .navbar,
    :root:not([data-theme="dark"]) .navbar {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        will-change: auto;
        box-shadow: 0 1px 0 var(--c-border-soft) !important;
    }

    :root[data-theme="dark"] .navbar {
        background: #090f1b !important;
        border-bottom-color: rgba(110, 145, 205, 0.18) !important;
    }

    :root:not([data-theme="dark"]) .navbar {
        background: #f8f9fc !important;
    }

    .nav-right,
    :root[data-theme="dark"] .nav-right,
    :root:not([data-theme="dark"]) .nav-right {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        contain: layout paint;
        box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18) !important;
    }

    :root[data-theme="dark"] .nav-right {
        background: #0d121d !important;
        border-color: rgba(110, 145, 205, 0.20) !important;
    }

    :root:not([data-theme="dark"]) .nav-right {
        background: #f8f9fc !important;
    }

    body.nav-open::before {
        content: "";
        position: fixed;
        inset: var(--nav-h) 0 0;
        z-index: 9998;
        background: rgba(0, 0, 0, 0.34);
        opacity: 1;
    }

    body.nav-open .nav-right {
        animation: mio-mobile-menu-in 0.18s cubic-bezier(0.16, 1, 0.3, 1) both !important;
    }

    @keyframes mio-mobile-menu-in {
        from { opacity: 0; transform: translateZ(0) scale(0.985); }
        to { opacity: 1; transform: translateZ(0) scale(1); }
    }

    :root[data-theme="dark"] .nav-right .nav-link {
        color: rgba(244, 246, 251, 0.76) !important;
    }

    :root[data-theme="dark"] .nav-right .nav-link.active,
    :root[data-theme="dark"] .nav-right .nav-link:active {
        color: #ffffff !important;
        background: #1a2231 !important;
    }

    :root[data-theme="dark"] .nav-right .nav-user {
        background: #171e2b !important;
        color: #f7f8fb !important;
    }

    .mio-theme-switch--navbar {
        margin: 8px 4px 6px !important;
        align-self: flex-start;
    }

    .dashboard.profile-page,
    .dashboard-admin {
        contain: layout style;
    }

    .dashboard.profile-page :where(
        .profile-hero,
        .action-tile,
        .action-tile-status,
        .mio-panel,
        .profile-fields
    ),
    .dashboard-admin :where(
        .mio-panel,
        .admin-tab,
        .admin-api-row,
        .user-card,
        .report-card,
        .block-card
    ) {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        will-change: auto !important;
        transition: border-color 0.12s ease-out, background-color 0.12s ease-out !important;
        box-shadow: 0 1px 0 var(--c-border-soft) !important;
    }

    :root[data-theme="dark"] .dashboard.profile-page :where(
        .profile-hero:not(.profile-hero--premium),
        .action-tile,
        .action-tile-status,
        .mio-panel,
        .profile-fields
    ),
    :root[data-theme="dark"] .dashboard-admin :where(
        .mio-panel,
        .admin-tab,
        .admin-api-row,
        .user-card,
        .report-card,
        .block-card
    ) {
        background: #0d1421 !important;
    }

    .dashboard.profile-page .profile-hero::before,
    .dashboard.profile-page .profile-hero-avatar::before {
        display: none !important;
    }
}

@media (max-width: 860px) and (hover: none) and (pointer: coarse) {
    .action-tile:hover,
    .user-search-card:hover,
    .project-card:hover,
    .btn:hover {
        transform: translateZ(0) !important;
    }

    .action-tile:active,
    .user-search-card:active,
    .project-card:active,
    .btn:active {
        transform: translateZ(0) scale(0.96) !important;
    }
}

@media (min-width: 861px) {
    html:has(body.auth-page),
    body.auth-page {
        height: 100dvh !important;
        min-height: 100dvh !important;
        overflow: hidden !important;
        overscroll-behavior: none;
    }
}

@media (min-width: 861px) and (max-height: 900px) {
    body.auth-page--register .container {
        padding: 22px 30px;
        border-radius: 26px;
    }

    body.auth-page--register .logo {
        width: 84px;
    }

    body.auth-page--register h1 {
        font-size: 34px;
    }

    body.auth-page--register .subtitle {
        margin: 2px 0 14px;
    }

    body.auth-page--register .divider {
        margin-bottom: 14px;
    }

    body.auth-page--register .auth-form {
        gap: 8px;
    }

    body.auth-page--register .auth-form .field {
        gap: 4px;
    }

    body.auth-page--register .auth-form .field input {
        height: 44px;
        min-height: 44px;
    }

    body.auth-page--register .field-hint {
        margin-top: 0;
        font-size: 10px;
        line-height: 1.3;
    }

    body.auth-page--register .auth-form .btn {
        height: 44px;
        min-height: 44px;
        margin-top: 2px;
    }

    body.auth-page--register .auth-alt {
        margin-top: 12px;
    }

    body.auth-page--register .footer-note {
        margin-top: 18px;
    }

    body.auth-page--register .legal-links {
        margin-top: 8px;
    }
}

/* One lightweight motion system: compositor-only, no per-card entrance work. */
html.mio-motion-static body.dashboard-body .dashboard:not(.mio-motion-skip) {
    animation: mio-app-surface-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both !important;
    transform-origin: center top;
    will-change: auto;
    contain: layout style;
}

@keyframes mio-app-surface-in {
    from { opacity: 0; transform: translateZ(0) scale(0.985); }
    to { opacity: 1; transform: none; }
}

.dashboard-body :where(
    .profile-hero,
    .profile-fields,
    .action-tile,
    .action-tile-status,
    .project-card,
    .mio-panel,
    .user-card,
    .user-search-card,
    .user-search-bar,
    .report-card,
    .admin-tab,
    .admin-api-row,
    .block-card,
    .api-card,
    .public-api-card,
    .empty-state,
    .messages-layout
) {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    animation: none !important;
    will-change: auto !important;
    contain: layout style;
}

.dashboard-body :where(
    .btn,
    .nav-link,
    .nav-user,
    .action-tile,
    .project-card,
    .user-card,
    .user-search-card,
    .admin-tab,
    .icon-btn,
    .modal-close,
    [role="button"]
) {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition:
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.dashboard-body :where(
    .btn,
    .nav-link,
    .nav-user,
    .action-tile,
    .project-card,
    .user-card,
    .user-search-card,
    .admin-tab,
    .icon-btn,
    .modal-close,
    [role="button"]
):active {
    transform: translateZ(0) scale(0.96) !important;
    transition-duration: 0.1s !important;
}

.dashboard-body :where(
    .profile-social-stat strong.is-pop,
    .profile-action-btn--pop,
    .nav-badge--pop,
    .messages-badge--pop,
    .social-msg-read--pop,
    .social-msg-reactions--pop,
    .messages-pin-icon
) {
    animation: mio-micro-feedback 0.28s cubic-bezier(0.16, 1, 0.3, 1) both !important;
    will-change: transform, opacity;
}

@keyframes mio-micro-feedback {
    from { opacity: 0.72; transform: translateZ(0) scale(0.94); }
    to { opacity: 1; transform: translateZ(0) scale(1); }
}

@media (max-width: 860px) {
    .navbar,
    :root[data-theme="dark"] .navbar,
    :root:not([data-theme="dark"]) .navbar {
        -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
        backdrop-filter: blur(20px) saturate(190%) !important;
    }

    .nav-right,
    :root[data-theme="dark"] .nav-right,
    :root:not([data-theme="dark"]) .nav-right {
        -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
        backdrop-filter: blur(20px) saturate(190%) !important;
    }

    :root[data-theme="dark"] .navbar {
        background: rgba(9, 15, 27, 0.95) !important;
    }

    :root[data-theme="dark"] .nav-right {
        background: rgba(8, 12, 20, 0.97) !important;
    }

    :root:not([data-theme="dark"]) .navbar,
    :root:not([data-theme="dark"]) .nav-right {
        background: rgba(248, 249, 252, 0.96) !important;
    }
}

@keyframes mio-ios-sheet-in {
    from {
        opacity: 0;
        transform: translateZ(0) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateZ(0) scale(1);
    }
}

@keyframes mio-ios-error-in {
    from {
        opacity: 0;
        transform: translate3d(0, 6px, 0) scale(0.94);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body.mio-landing .container,
    .navbar,
    .modal,
    .mio-dialog-box,
    .cookie-banner,
    .legal-container,
    :where(.project-card, .profile-hero, .mio-panel, .action-tile, .user-card, .oauth-card) {
        background: var(--c-bg-elev) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}