/* mAi 形象版 UI overlay
   Reference: deep indigo space, violet glass, lavender text, vivid pink brand light.
   Every panel shares one surface. Light is an overlay, never a second panel. */

:root {
    --mai-bg-0: #10071f;
    --mai-bg-1: #171126;
    --mai-bg-2: #24143d;
    --mai-surface: rgba(23, 17, 38, 0.72);
    --mai-surface-strong: rgba(29, 20, 49, 0.92);
    --mai-line: rgba(216, 180, 254, 0.22);
    --mai-line-strong: rgba(233, 213, 255, 0.42);
    --mai-highlight: rgba(255, 255, 255, 0.2);
    --mai-highlight-soft: rgba(214, 190, 255, 0.16);
    --mai-pink: #f0abfc;
    --mai-pink-bright: #f5d0fe;
    --mai-violet: #c084fc;
    --mai-primary: #8b5cf6;
    --mai-primary-strong: #7c3aed;
    --mai-primary-soft: rgba(139, 92, 246, 0.2);
    --mai-text: #f8f4ff;
    --mai-muted: #c1b8d8;
    --mai-shadow: 0 18px 48px rgba(7, 5, 20, 0.3), 0 5px 18px rgba(91, 67, 151, 0.12);
    --mai-shadow-hover: 0 28px 68px rgba(6, 4, 18, 0.44), 0 9px 28px rgba(143, 94, 190, 0.18);
    --mai-radius: 18px;
    --mai-control-radius: 12px;
}

html:not(.dark) {
    --mai-primary: #7c3aed;
    --mai-primary-strong: #6d28d9;
    --mai-primary-soft: rgba(124, 58, 237, 0.12);
    --mai-bg-0: #f6f5ff;
    --mai-bg-1: #fbf9ff;
    --mai-bg-2: #fff7fc;
    --mai-surface: rgba(255, 255, 255, 0.48);
    --mai-surface-strong: rgba(255, 255, 255, 0.68);
    --mai-line: rgba(107, 83, 158, 0.18);
    --mai-line-strong: rgba(125, 94, 174, 0.32);
    --mai-highlight: rgba(255, 255, 255, 0.88);
    --mai-highlight-soft: rgba(242, 164, 209, 0.15);
    --mai-text: #302746;
    --mai-muted: #776d8e;
    --mai-shadow: 0 18px 48px rgba(83, 59, 132, 0.11), 0 5px 18px rgba(213, 127, 187, 0.08);
    --mai-shadow-hover: 0 28px 68px rgba(83, 59, 132, 0.17), 0 9px 28px rgba(213, 127, 187, 0.13);
}

/* Shared application field */
.mai-pearl-app {
    position: relative;
    isolation: isolate;
    color: var(--mai-text);
    background:
        radial-gradient(900px 640px at 8% -8%, rgba(126, 96, 190, 0.28), transparent 68%),
        radial-gradient(760px 560px at 96% 16%, rgba(89, 83, 158, 0.2), transparent 72%),
        linear-gradient(145deg, var(--mai-bg-0) 0%, var(--mai-bg-1) 54%, var(--mai-bg-2) 100%);
}

html:not(.dark) .mai-pearl-app {
    background:
        radial-gradient(900px 640px at 8% -8%, rgba(242, 164, 209, 0.17), transparent 68%),
        radial-gradient(760px 560px at 96% 16%, rgba(199, 184, 238, 0.18), transparent 72%),
        linear-gradient(145deg, var(--mai-bg-0) 0%, var(--mai-bg-1) 54%, var(--mai-bg-2) 100%);
}

.mai-pearl-app .mai-aurora-backdrop {
    opacity: 0.32;
    background:
        radial-gradient(ellipse 42% 34% at 14% 12%, rgba(143, 107, 209, 0.2), transparent 70%),
        radial-gradient(ellipse 38% 32% at 86% 22%, rgba(242, 164, 209, 0.13), transparent 72%),
        radial-gradient(ellipse 34% 36% at 54% 92%, rgba(110, 94, 181, 0.14), transparent 70%);
}

html.dark .mai-pearl-app .mai-aurora-backdrop {
    opacity: 0.44;
}

/* One material recipe for all framed panels. */
.mai-pearl-app .ant-card,
.mai-pearl-app .ant-modal-content,
.mai-pearl-app .ant-drawer-content,
.mai-pearl-app .ant-popover-inner,
.mai-ui-studio-shell > *,
.mai-ui-characters-page .mai-character-filter,
.mai-ui-characters-page .ant-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid var(--mai-line) !important;
    border-radius: var(--mai-radius) !important;
    background: linear-gradient(135deg, var(--mai-surface), rgba(57, 50, 91, 0.28) 56%, rgba(46, 78, 91, 0.22)) !important;
    box-shadow: var(--mai-shadow), inset 0 1px 0 var(--mai-highlight) !important;
    backdrop-filter: blur(28px) saturate(145%);
    -webkit-backdrop-filter: blur(28px) saturate(145%);
}

.mai-pearl-app .ant-card::before,
.mai-pearl-app .ant-modal-content::before,
.mai-pearl-app .ant-drawer-content::before,
.mai-pearl-app .ant-popover-inner::before,
.mai-ui-studio-shell > *::before,
.mai-ui-characters-page .mai-character-filter::before,
.mai-ui-characters-page .ant-card::before {
    position: absolute;
    inset: -36% -28%;
    z-index: 0;
    pointer-events: none;
    content: "";
    background:
        radial-gradient(340px 220px at var(--mai-light-x, 24%) var(--mai-light-y, 0%), rgba(255, 255, 255, 0.18), transparent 70%),
        linear-gradient(116deg, transparent 32%, rgba(255, 255, 255, 0.13) 44%, rgba(242, 164, 209, 0.08) 49%, transparent 62%);
    opacity: 0.76;
    transform: translateX(var(--mai-sheen, -18%)) rotate(-4deg);
    transition: opacity 420ms ease, transform 820ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.mai-pearl-app .ant-card:hover::before,
.mai-ui-studio-shell > *:hover::before,
.mai-ui-characters-page .ant-card:hover::before,
.mai-ui-characters-page .mai-character-filter:hover::before {
    opacity: 1;
    transform: translateX(18%) rotate(-4deg);
}

.mai-pearl-app .ant-card > *,
.mai-pearl-app .ant-modal-content > *,
.mai-pearl-app .ant-drawer-content > *,
.mai-pearl-app .ant-popover-inner > *,
.mai-ui-studio-shell > * > *,
.mai-ui-characters-page .mai-character-filter > *,
.mai-ui-characters-page .ant-card > * {
    position: relative;
    z-index: 1;
}

html:not(.dark) .mai-pearl-app .ant-card,
html:not(.dark) .mai-pearl-app .ant-modal-content,
html:not(.dark) .mai-pearl-app .ant-drawer-content,
html:not(.dark) .mai-pearl-app .ant-popover-inner,
html:not(.dark) .mai-ui-studio-shell > *,
html:not(.dark) .mai-ui-characters-page .mai-character-filter,
html:not(.dark) .mai-ui-characters-page .ant-card {
    background: linear-gradient(135deg, var(--mai-surface), rgba(245, 241, 255, 0.34) 56%, rgba(232, 248, 255, 0.22)) !important;
    box-shadow: var(--mai-shadow), inset 0 1px 0 var(--mai-highlight) !important;
}

/* Navigation: same glass surface, pink is only the active light. */
.mai-pearl-app .mai-top-nav {
    position: relative;
    border-bottom: 1px solid var(--mai-line);
    background: rgba(31, 27, 57, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 10px 34px rgba(7, 5, 20, 0.24);
    backdrop-filter: blur(26px) saturate(150%);
    -webkit-backdrop-filter: blur(26px) saturate(150%);
}

html:not(.dark) .mai-pearl-app .mai-top-nav {
    background: rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94), 0 10px 34px rgba(83, 59, 132, 0.1);
}

.mai-pearl-app .mai-top-nav::after {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";
    background: linear-gradient(108deg, transparent 16%, rgba(255, 255, 255, 0.22) 42%, rgba(242, 164, 209, 0.11) 51%, transparent 66%);
    opacity: 0.7;
    transform: translateX(-44%);
    transition: transform 900ms ease;
}

.mai-pearl-app .mai-top-nav:hover::after {
    transform: translateX(44%);
}

.mai-pearl-app .mai-nav-item {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--mai-line);
    border-radius: 13px;
    background: rgba(71, 61, 113, 0.54);
    box-shadow: inset 0 1px 0 var(--mai-highlight), 0 6px 18px rgba(7, 5, 20, 0.14);
    color: #e9e1ff;
}

html:not(.dark) .mai-pearl-app .mai-nav-item {
    background: rgba(255, 255, 255, 0.62);
    color: #624d89;
}

.mai-pearl-app .mai-nav-item:hover,
.mai-pearl-app .mai-nav-item-active {
    border-color: rgba(242, 164, 209, 0.66);
    background: linear-gradient(135deg, rgba(242, 164, 209, 0.42), rgba(143, 107, 209, 0.38));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 10px 26px rgba(177, 91, 165, 0.2);
    color: #fff8ff;
}

html:not(.dark) .mai-pearl-app .mai-nav-item:hover,
html:not(.dark) .mai-pearl-app .mai-nav-item-active {
    background: linear-gradient(135deg, rgba(242, 164, 209, 0.58), rgba(199, 184, 238, 0.42));
    color: #593c73;
}

.mai-nav-brand-mark {
    border: 1px solid var(--mai-line-strong);
    border-radius: 13px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(242, 164, 209, 0.12));
    box-shadow: inset 0 1px 0 var(--mai-highlight), 0 8px 20px rgba(143, 94, 190, 0.16);
}

.mai-nav-brand-copy {
    position: relative;
    display: block;
    width: 96px;
    height: 52px;
    overflow: hidden;
}

.mai-nav-brand-copy img {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 96px;
    height: auto;
    max-width: none;
}

/* Buttons and controls use the same material recipe. */
.mai-pearl-app .ant-btn {
    border-radius: var(--mai-control-radius);
    border-color: var(--mai-line);
    background: var(--mai-ref-glass-soft, rgba(67, 58, 108, 0.44));
    box-shadow: inset 0 1px 0 var(--mai-highlight), 0 6px 18px rgba(7, 5, 20, 0.12);
    color: var(--mai-text);
}

html:not(.dark) .mai-pearl-app .ant-btn {
    background: rgba(255, 255, 255, 0.52);
}

.mai-pearl-app .ant-btn:hover {
    border-color: rgba(192, 132, 252, 0.72) !important;
    background: rgba(139, 92, 246, 0.2) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 10px 26px rgba(124, 58, 237, 0.24);
    color: var(--mai-text) !important;
}

.mai-pearl-app .ant-btn-primary {
    border-color: rgba(233, 213, 255, 0.4) !important;
    background: linear-gradient(120deg, #6d28d9 0%, #8b5cf6 48%, #c084fc 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36), 0 13px 30px rgba(124, 58, 237, 0.34);
    color: #fff !important;
}

.mai-pearl-app .ant-btn-primary:hover {
    background: linear-gradient(120deg, #7c3aed 0%, #a855f7 48%, #d8b4fe 100%) !important;
}

.mai-pearl-app .ant-input,
.mai-pearl-app .ant-input-number,
.mai-pearl-app .ant-select-selector,
.mai-pearl-app .ant-segmented,
.mai-pearl-app .ant-input-affix-wrapper,
.mai-pearl-app .ant-input-group-wrapper,
.mai-pearl-app .ant-input-group {
    border-radius: var(--mai-control-radius) !important;
    border-color: var(--mai-line) !important;
    background: var(--mai-ref-glass-soft, rgba(67, 58, 108, 0.44)) !important;
    box-shadow: inset 0 1px 0 var(--mai-highlight), 0 5px 16px rgba(7, 5, 20, 0.1) !important;
    color: var(--mai-text);
}

html:not(.dark) .mai-pearl-app .ant-input,
html:not(.dark) .mai-pearl-app .ant-input-number,
html:not(.dark) .mai-pearl-app .ant-select-selector,
html:not(.dark) .mai-pearl-app .ant-segmented,
html:not(.dark) .mai-pearl-app .ant-input-affix-wrapper,
html:not(.dark) .mai-pearl-app .ant-input-group-wrapper,
html:not(.dark) .mai-pearl-app .ant-input-group {
    background: rgba(255, 255, 255, 0.58) !important;
}

/* One outer frame for compound inputs, with no inner duplicate border. */
.mai-pearl-app .ant-input-affix-wrapper .ant-input,
.mai-pearl-app .ant-input-group-wrapper .ant-input,
.mai-pearl-app .ant-input-group .ant-input,
.mai-pearl-app .ant-input-group .ant-input-group-addon {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.mai-pearl-app .ant-input:focus,
.mai-pearl-app .ant-input-focused,
.mai-pearl-app .ant-input-affix-wrapper-focused,
.mai-pearl-app .ant-input-number-focused,
.mai-pearl-app .ant-select-focused .ant-select-selector {
    border-color: var(--mai-pink) !important;
    box-shadow: 0 0 0 3px rgba(242, 164, 209, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

.mai-pearl-app .ant-segmented-item-selected {
    border: 1px solid rgba(242, 164, 209, 0.44);
    background: linear-gradient(135deg, rgba(242, 164, 209, 0.38), rgba(143, 107, 209, 0.36));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 6px 18px rgba(177, 91, 165, 0.14);
}

/* Home: keep the legacy DOM layout and add only atmosphere. */
.mai-ui-home-page {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(470px circle at var(--mai-pointer-x, 50%) var(--mai-pointer-y, 25%), rgba(242, 164, 209, 0.14), transparent 68%),
        linear-gradient(145deg, rgba(42, 33, 71, 0.46), rgba(31, 28, 57, 0.3));
}

html:not(.dark) .mai-ui-home-page {
    background:
        radial-gradient(470px circle at var(--mai-pointer-x, 50%) var(--mai-pointer-y, 25%), rgba(242, 164, 209, 0.15), transparent 68%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(250, 244, 255, 0.16));
}

.mai-ui-home-page::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    content: "";
    opacity: 0.72;
    background:
        linear-gradient(rgba(255, 255, 255, 0.11) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.11) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.68), transparent 48%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.68), transparent 48%);
    transform: translate3d(var(--mai-pointer-dx, 0px), var(--mai-pointer-dy, 0px), 0);
    transition: transform 1.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.mai-ui-home-page > section:first-child {
    position: relative;
    min-height: 680px;
}

.mai-ui-home-page > section:first-child::before {
    position: absolute;
    top: 12%;
    right: 8%;
    width: min(38vw, 480px);
    aspect-ratio: 1;
    border: 1px solid rgba(224, 215, 255, 0.22);
    border-radius: 50%;
    content: "";
    opacity: 0.55;
    box-shadow: 0 0 70px rgba(143, 107, 209, 0.15), inset 0 0 50px rgba(242, 164, 209, 0.06);
    transform: translate3d(var(--mai-pointer-dx, 0px), var(--mai-pointer-dy, 0px), 0) rotate(-18deg);
    transition: transform 1.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.mai-ui-home-page .mai-hero-mark {
    width: 144px;
    height: 144px;
    margin-bottom: 30px;
    border-radius: 32px;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 20px 34px rgba(177, 91, 165, 0.28));
    transform: translate3d(var(--mai-pointer-dx, 0px), var(--mai-pointer-dy, 0px), 0);
    transition: transform 1.1s ease, filter 500ms ease;
}

.mai-ui-home-page .mai-hero-mark:hover {
    filter: drop-shadow(0 24px 40px rgba(242, 164, 209, 0.42)) brightness(1.06);
}

.mai-ui-home-page .mai-hero-gradient {
    background: linear-gradient(115deg, #b48bdf 10%, #f2a4d1 52%, #d7c1ff 90%);
    background-size: 210% 100%;
    animation: mai-ui-gradient-shift 7s ease-in-out infinite;
    -webkit-background-clip: text;
    background-clip: text;
}

.mai-ui-home-page .mai-ui-atmosphere {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.mai-ui-home-page .mai-ui-atmosphere::before,
.mai-ui-home-page .mai-ui-atmosphere::after {
    position: absolute;
    border: 1px solid rgba(224, 215, 255, 0.22);
    border-radius: 50%;
    content: "";
    opacity: 0.54;
    box-shadow: 0 0 24px rgba(242, 164, 209, 0.12);
    transform: translate3d(var(--mai-pointer-dx, 0px), var(--mai-pointer-dy, 0px), 0);
    transition: transform 1s ease;
}

.mai-ui-home-page .mai-ui-atmosphere::before {
    top: 32%;
    right: 5%;
    width: 230px;
    height: 72px;
    transform: translate3d(var(--mai-pointer-dx, 0px), var(--mai-pointer-dy, 0px), 0) rotate(-13deg);
}

.mai-ui-home-page .mai-ui-atmosphere::after {
    bottom: 12%;
    left: 6%;
    width: 180px;
    height: 58px;
    transform: translate3d(var(--mai-pointer-dx, 0px), var(--mai-pointer-dy, 0px), 0) rotate(16deg);
}

.mai-ui-star,
.mai-ui-particle {
    position: absolute;
    display: block;
    border-radius: 999px;
    pointer-events: none;
}

.mai-ui-star {
    width: 7px;
    height: 7px;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12), 0 0 18px rgba(242, 164, 209, 0.98), 0 0 34px rgba(174, 141, 230, 0.62);
    animation: mai-ui-twinkle 3.8s ease-in-out infinite;
}

.mai-ui-star::before,
.mai-ui-star::after {
    position: absolute;
    top: 50%;
    left: 50%;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
    transform: translate(-50%, -50%);
}

.mai-ui-star::before { width: 28px; height: 1px; }
.mai-ui-star::after { width: 1px; height: 28px; }
.mai-ui-star-1 { top: 16%; left: 13%; }
.mai-ui-star-2 { top: 30%; right: 18%; transform: scale(0.7); animation-delay: -2.2s; }
.mai-ui-star-3 { top: 58%; left: 8%; transform: scale(0.52); animation-delay: -1.4s; }
.mai-ui-star-4 { top: 74%; right: 12%; transform: scale(0.8); animation-delay: -2.9s; }
.mai-ui-star-5 { top: 42%; left: 47%; transform: scale(0.42); animation-delay: -0.6s; }
.mai-ui-star-6 { top: 82%; left: 38%; transform: scale(0.56); animation-delay: -1.9s; }
.mai-ui-star-7 { top: 12%; right: 38%; transform: scale(0.34); animation-delay: -3.2s; }

.mai-ui-particle {
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.88), 0 0 22px rgba(242, 164, 209, 0.64);
    animation: mai-ui-particle-float 8s ease-in-out infinite;
}

.mai-ui-particle-1 { top: 24%; left: 36%; animation-delay: -3s; }
.mai-ui-particle-2 { top: 48%; right: 30%; animation-delay: -5.5s; }
.mai-ui-particle-3 { top: 79%; left: 48%; animation-delay: -1.8s; }
.mai-ui-particle-4 { top: 66%; right: 42%; animation-delay: -6.4s; }

@keyframes mai-ui-gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes mai-ui-twinkle {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

@keyframes mai-ui-particle-float {
    0%, 100% { opacity: 0.2; transform: translate3d(0, 10px, 0) scale(0.7); }
    50% { opacity: 0.9; transform: translate3d(15px, -22px, 0) scale(1); }
}

.mai-studio-task-arrow {
    display: inline-block;
    min-width: 3.2em;
    letter-spacing: 0.08em;
    animation: mai-studio-task-arrow 1.15s steps(4, end) infinite;
}

@keyframes mai-studio-task-arrow {
    0%, 100% { opacity: 0.35; clip-path: inset(0 62% 0 0); }
    35% { opacity: 0.65; clip-path: inset(0 34% 0 0); }
    70% { opacity: 1; clip-path: inset(0 0 0 0); }
}

/* Workbenches: one transparent shared surface, with moving white refraction inside. */
.mai-ui-workbench-page,
.mai-ui-studio-shell {
    position: relative;
    isolation: isolate;
    background: transparent !important;
}

.mai-ui-studio-shell > *,
.mai-ui-workbench-page .mai-glass-panel,
.mai-ui-workbench-page > main > aside,
.mai-ui-workbench-page > main > section,
.mai-ui-workbench-page > main > section > div {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--mai-line) !important;
    border-radius: var(--mai-radius) !important;
    background: var(--mai-surface) !important;
    box-shadow: var(--mai-shadow), inset 0 1px 0 var(--mai-highlight) !important;
    backdrop-filter: blur(24px) saturate(145%);
    -webkit-backdrop-filter: blur(24px) saturate(145%);
}

html:not(.dark) .mai-ui-studio-shell > *,
html:not(.dark) .mai-ui-workbench-page .mai-glass-panel,
html:not(.dark) .mai-ui-workbench-page > main > aside,
html:not(.dark) .mai-ui-workbench-page > main > section,
html:not(.dark) .mai-ui-workbench-page > main > section > div {
    background: rgba(255, 255, 255, 0.58) !important;
}

.mai-ui-studio-shell > *::before,
.mai-ui-workbench-page .mai-glass-panel::before,
.mai-ui-workbench-page > main > aside::before,
.mai-ui-workbench-page > main > section::before,
.mai-ui-workbench-page > main > section > div::before {
    position: absolute;
    inset: -42% -30%;
    z-index: 0;
    pointer-events: none;
    content: "";
    background:
        radial-gradient(360px 240px at var(--mai-light-x, 18%) var(--mai-light-y, -8%), rgba(255, 255, 255, 0.18), transparent 70%),
        linear-gradient(118deg, transparent 32%, rgba(255, 255, 255, 0.14) 44%, rgba(214, 190, 255, 0.08) 49%, transparent 63%);
    opacity: 0.8;
    transform: translateX(var(--mai-sheen, -18%)) rotate(-4deg);
    transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 500ms ease;
    animation: mai-ui-glass-float 11s ease-in-out infinite;
}

.mai-ui-studio-shell > *:hover::before,
.mai-ui-workbench-page .mai-glass-panel:hover::before,
.mai-ui-workbench-page > main > aside:hover::before,
.mai-ui-workbench-page > main > section:hover::before,
.mai-ui-workbench-page > main > section > div:hover::before {
    opacity: 1;
    transform: translateX(24%) rotate(-4deg);
}

.mai-ui-studio-shell > * > *,
.mai-ui-workbench-page .mai-glass-panel > *,
.mai-ui-workbench-page > main > aside > *,
.mai-ui-workbench-page > main > section > *,
.mai-ui-workbench-page > main > section > div > * {
    position: relative;
    z-index: 1;
}

.mai-ui-studio-shell button[class*="border-dashed"],
.mai-ui-workbench-page button[class*="border-dashed"] {
    border-color: rgba(199, 184, 238, 0.34) !important;
    border-radius: 14px !important;
    background: rgba(67, 58, 108, 0.34) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

html:not(.dark) .mai-ui-studio-shell button[class*="border-dashed"],
html:not(.dark) .mai-ui-workbench-page button[class*="border-dashed"] {
    border-color: rgba(137, 102, 170, 0.22) !important;
    background: rgba(255, 255, 255, 0.42) !important;
}

.mai-ui-studio-shell button[class*="border-primary"],
.mai-ui-studio-shell .ant-segmented-item-selected,
.mai-ui-workbench-page button[class*="border-primary"],
.mai-ui-workbench-page .ant-segmented-item-selected {
    border-color: rgba(242, 164, 209, 0.62) !important;
    background: linear-gradient(135deg, rgba(242, 164, 209, 0.32), rgba(143, 107, 209, 0.28)) !important;
}

.mai-ui-studio-shell img,
.mai-ui-workbench-page img {
    position: relative;
    z-index: 1;
}

@keyframes mai-ui-glass-float {
    0%, 100% { background-position: 0% 0%, 0% 0%; }
    50% { background-position: 22% 12%, 18% 0%; }
}

/* Prompt inspiration space: same material, slightly more editorial spacing. */
.mai-ui-prompts-page {
    position: relative;
    isolation: isolate;
    background: transparent !important;
}

.mai-ui-prompts-page .ant-input,
.mai-ui-prompts-page .ant-input-affix-wrapper {
    background: var(--mai-surface) !important;
}

.mai-ui-prompts-page .ant-tag-checkable {
    border: 1px solid var(--mai-line);
    border-radius: 10px;
    background: transparent;
    color: var(--mai-muted);
    transition: background 260ms ease, border-color 260ms ease, color 260ms ease, box-shadow 260ms ease;
}

.mai-ui-prompts-page .ant-tag-checkable:hover,
.mai-ui-prompts-page .ant-tag-checkable-checked {
    border-color: rgba(242, 164, 209, 0.58);
    background: linear-gradient(135deg, rgba(242, 164, 209, 0.32), rgba(143, 107, 209, 0.26));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 6px 18px rgba(177, 91, 165, 0.14);
    color: var(--mai-text);
}

.mai-ui-prompts-page .ant-empty {
    color: var(--mai-muted);
}

/* Canvas library: the same indigo glass, without touching the canvas editor. */
.mai-ui-canvas-page {
    position: relative;
    isolation: isolate;
    background: transparent !important;
}

.mai-ui-canvas-page > div:first-child {
    position: relative;
    isolation: isolate;
    border-radius: 24px;
}

.mai-ui-canvas-page > div:first-child::before {
    position: absolute;
    inset: -10% -8%;
    z-index: 0;
    pointer-events: none;
    content: "";
    background:
        radial-gradient(420px 300px at var(--mai-light-x, 18%) var(--mai-light-y, 5%), rgba(255, 255, 255, 0.12), transparent 72%),
        linear-gradient(135deg, rgba(143, 107, 209, 0.12), transparent 46%, rgba(242, 164, 209, 0.08));
    filter: blur(12px);
    opacity: 0.8;
}

.mai-ui-canvas-page > div:first-child > * {
    position: relative;
    z-index: 1;
}

.mai-ui-canvas-page > div:first-child > header {
    border-bottom-color: var(--mai-line) !important;
}

.mai-ui-canvas-page article {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid var(--mai-line) !important;
    border-radius: 20px !important;
    background: linear-gradient(135deg, rgba(67, 58, 108, 0.42), rgba(57, 50, 91, 0.3) 56%, rgba(46, 78, 91, 0.22)) !important;
    box-shadow: var(--mai-shadow), inset 0 1px 0 var(--mai-highlight) !important;
    transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 320ms ease, border-color 320ms ease;
}

html:not(.dark) .mai-ui-canvas-page article {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.56), rgba(245, 241, 255, 0.34) 56%, rgba(232, 248, 255, 0.22)) !important;
}

.mai-ui-canvas-page article::before {
    position: absolute;
    inset: -42% -34%;
    z-index: 0;
    pointer-events: none;
    content: "";
    background:
        radial-gradient(240px 180px at var(--mai-light-x, 24%) var(--mai-light-y, 8%), rgba(255, 255, 255, 0.24), transparent 72%),
        linear-gradient(116deg, transparent 32%, rgba(255, 255, 255, 0.14) 44%, rgba(242, 164, 209, 0.08) 49%, transparent 63%);
    opacity: 0.74;
    transform: translateX(var(--mai-sheen, -18%)) rotate(-5deg);
    transition: transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 500ms ease;
}

.mai-ui-canvas-page article:hover {
    border-color: rgba(242, 164, 209, 0.56) !important;
    box-shadow: var(--mai-shadow-hover), inset 0 1px 0 var(--mai-highlight) !important;
    transform: translateY(-5px);
}

.mai-ui-canvas-page article:hover::before {
    opacity: 1;
    transform: translateX(20%) rotate(-5deg);
}

.mai-ui-canvas-page article > * {
    position: relative;
    z-index: 1;
}

.mai-ui-canvas-page article .ant-btn {
    border: 0;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

/* Characters route: calmer version of the same glass. */
.mai-ui-characters-page {
    position: relative;
    isolation: isolate;
    background: transparent !important;
}

.mai-ui-characters-page .mai-character-filter {
    background: var(--mai-surface) !important;
}

.mai-ui-characters-page .ant-card-hoverable {
    transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 320ms ease, border-color 320ms ease;
}

.mai-ui-characters-page .ant-card-hoverable:hover {
    border-color: rgba(242, 164, 209, 0.58) !important;
    box-shadow: var(--mai-shadow-hover), inset 0 1px 0 var(--mai-highlight) !important;
    transform: translateY(-5px);
}

.mai-ui-characters-page .ant-card-actions {
    position: relative;
    z-index: 2;
    border-top-color: var(--mai-line) !important;
    background: transparent !important;
}

.mai-ui-characters-page .ant-card-actions .ant-btn {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.mai-ui-characters-page .ant-card-actions .ant-btn:hover {
    background: rgba(242, 164, 209, 0.16) !important;
    box-shadow: none;
    transform: none;
}

/* Drawer and popovers inherit the same glass family. */
.mai-mobile-nav-drawer .ant-drawer-content,
.mai-mobile-nav-drawer .ant-drawer-header {
    border-color: var(--mai-line);
    background: var(--mai-surface) !important;
    color: var(--mai-text);
}

.mai-mobile-nav-drawer .ant-drawer-header {
    box-shadow: inset 0 1px 0 var(--mai-highlight);
}

.mai-mobile-nav .mai-mobile-nav-item {
    border: 1px solid var(--mai-line);
    background: rgba(67, 58, 108, 0.42);
}

html:not(.dark) .mai-mobile-nav .mai-mobile-nav-item {
    background: rgba(255, 255, 255, 0.5);
}

.mai-mobile-nav .mai-mobile-nav-item:hover,
.mai-mobile-nav .mai-mobile-nav-item:focus-visible,
.mai-mobile-nav .mai-mobile-nav-item-active {
    border-color: rgba(242, 164, 209, 0.62);
    background: linear-gradient(135deg, rgba(242, 164, 209, 0.34), rgba(143, 107, 209, 0.28));
    outline: none;
}

@media (max-width: 900px) {
    .mai-ui-home-page > section:first-child {
        min-height: 620px;
    }
}

@media (max-width: 640px) {
    .mai-nav-brand-copy {
        width: 78px;
        height: 46px;
    }

    .mai-nav-brand-copy img {
        width: 78px;
    }

    .mai-ui-home-page .mai-hero-mark {
        width: 124px;
        height: 124px;
        margin-bottom: 22px;
    }

    .mai-ui-home-page .mai-ui-star-5,
    .mai-ui-home-page .mai-ui-star-6,
    .mai-ui-home-page .mai-ui-star-7 {
        display: none;
    }

    .mai-ui-studio-shell {
        overflow-y: auto;
    }
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
    .mai-pearl-app .mai-top-nav::after,
    .mai-ui-home-page::before,
    .mai-ui-home-page > section:first-child::before,
    .mai-ui-home-page .mai-ui-atmosphere::before,
    .mai-ui-home-page .mai-ui-atmosphere::after,
    .mai-pearl-app .ant-card::before,
    .mai-ui-studio-shell > *::before,
    .mai-ui-characters-page .ant-card::before,
    .mai-ui-workbench-page .mai-glass-panel::before,
    .mai-ui-workbench-page .mai-glass-panel::after {
        transform: none !important;
        transition: none !important;
    }

    .mai-ui-home-page .mai-hero-gradient,
    .mai-ui-home-page .mai-ui-star,
    .mai-ui-home-page .mai-ui-particle,
    .mai-pearl-app .ant-btn,
    .mai-pearl-app .ant-card,
    .mai-ui-workbench-page .mai-glass-panel::before,
    .mai-ui-workbench-page .mai-glass-panel::after {
        animation: none !important;
        transition: none !important;
    }
}

/* Final workbench material layer: one shared translucent surface, two soft lights. */
.mai-ui-workbench-page {
    --mai-workbench-surface: rgba(67, 58, 108, 0.34);
    --mai-workbench-line: rgba(224, 215, 255, 0.24);
    --mai-workbench-hi: rgba(255, 255, 255, 0.18);
    --mai-workbench-pink: rgba(242, 164, 209, 0.1);
    position: relative;
    isolation: isolate;
    background: transparent !important;
}

html:not(.dark) .mai-ui-workbench-page {
    --mai-workbench-surface: rgba(255, 255, 255, 0.42);
    --mai-workbench-line: rgba(116, 92, 170, 0.16);
    --mai-workbench-hi: rgba(255, 255, 255, 0.82);
    --mai-workbench-pink: rgba(242, 164, 209, 0.12);
}

.mai-ui-workbench-page .mai-glass-panel,
.mai-ui-workbench-page > main > aside,
.mai-ui-workbench-page > main > section,
.mai-ui-workbench-page > main > section > div,
.mai-ui-workbench-page > main > section > aside {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid var(--mai-workbench-line) !important;
    border-radius: 20px !important;
    background: var(--mai-workbench-surface) !important;
    box-shadow: 0 18px 46px rgba(7, 5, 20, 0.2), inset 0 1px 0 var(--mai-workbench-hi) !important;
    backdrop-filter: blur(24px) saturate(135%);
    -webkit-backdrop-filter: blur(24px) saturate(135%);
}

html:not(.dark) .mai-ui-workbench-page .mai-glass-panel,
html:not(.dark) .mai-ui-workbench-page > main > aside,
html:not(.dark) .mai-ui-workbench-page > main > section,
html:not(.dark) .mai-ui-workbench-page > main > section > div,
html:not(.dark) .mai-ui-workbench-page > main > section > aside {
    box-shadow: 0 18px 46px rgba(83, 59, 132, 0.1), inset 0 1px 0 var(--mai-workbench-hi) !important;
}

.mai-ui-workbench-page .mai-glass-panel::before,
.mai-ui-workbench-page > main > aside::before,
.mai-ui-workbench-page > main > section::before,
.mai-ui-workbench-page > main > section > div::before,
.mai-ui-workbench-page > main > section > aside::before {
    position: absolute;
    inset: -55% -42%;
    z-index: 0;
    pointer-events: none;
    content: "";
    background:
        radial-gradient(210px 170px at var(--mai-light-x, 50%) var(--mai-light-y, 40%), rgba(255, 255, 255, 0.34), transparent 72%),
        radial-gradient(520px 320px at 18% 2%, rgba(255, 255, 255, 0.16), transparent 70%),
        linear-gradient(118deg, transparent 31%, rgba(255, 255, 255, 0.16) 44%, var(--mai-workbench-pink) 49%, transparent 63%);
    opacity: 0.88;
    transform: translateX(-20%) rotate(-7deg);
    animation: mai-ui-panel-sheen 13s ease-in-out infinite;
}

.mai-ui-workbench-page .mai-glass-panel::after,
.mai-ui-workbench-page > main > aside::after,
.mai-ui-workbench-page > main > section::after,
.mai-ui-workbench-page > main > section > div::after,
.mai-ui-workbench-page > main > section > aside::after {
    position: absolute;
    top: -22%;
    right: -10%;
    z-index: 0;
    width: 54%;
    height: 48%;
    pointer-events: none;
    content: "";
    border-radius: 42% 58% 61% 39% / 38% 34% 66% 62%;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.11), rgba(214, 190, 255, 0.06) 42%, transparent 74%);
    filter: blur(8px);
    opacity: 0.7;
    transform: rotate(-16deg);
    animation: mai-ui-panel-glow 15s ease-in-out infinite alternate;
}

html:not(.dark) .mai-ui-workbench-page .mai-glass-panel::before,
html:not(.dark) .mai-ui-workbench-page > main > aside::before,
html:not(.dark) .mai-ui-workbench-page > main > section::before,
html:not(.dark) .mai-ui-workbench-page > main > section > div::before,
html:not(.dark) .mai-ui-workbench-page > main > section > aside::before {
    background:
        radial-gradient(430px 270px at 18% 2%, rgba(255, 255, 255, 0.72), transparent 70%),
        linear-gradient(118deg, transparent 31%, rgba(255, 255, 255, 0.38) 44%, rgba(242, 164, 209, 0.12) 49%, transparent 63%);
}

.mai-ui-workbench-page .mai-glass-panel > *,
.mai-ui-workbench-page > main > aside > *,
.mai-ui-workbench-page > main > section > *,
.mai-ui-workbench-page > main > section > div > *,
.mai-ui-workbench-page > main > section > aside > * {
    position: relative;
    z-index: 1;
}

.mai-ui-workbench-page .ant-input-affix-wrapper .ant-input,
.mai-ui-workbench-page .ant-input-group .ant-input,
.mai-ui-workbench-page .ant-input-group-addon {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.mai-ui-workbench-page .ant-input,
.mai-ui-workbench-page .ant-input-affix-wrapper,
.mai-ui-workbench-page .ant-input-group,
.mai-ui-workbench-page .ant-select-selector,
.mai-ui-workbench-page .ant-segmented {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(224, 215, 255, 0.2) !important;
}

html:not(.dark) .mai-ui-workbench-page .ant-input,
html:not(.dark) .mai-ui-workbench-page .ant-input-affix-wrapper,
html:not(.dark) .mai-ui-workbench-page .ant-input-group,
html:not(.dark) .mai-ui-workbench-page .ant-select-selector,
html:not(.dark) .mai-ui-workbench-page .ant-segmented {
    background: rgba(255, 255, 255, 0.34) !important;
    border-color: rgba(116, 92, 170, 0.14) !important;
}

.mai-ui-workbench-page button[class*="border-dashed"] {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(224, 215, 255, 0.28) !important;
}

html:not(.dark) .mai-ui-workbench-page button[class*="border-dashed"] {
    background: rgba(255, 255, 255, 0.28) !important;
    border-color: rgba(116, 92, 170, 0.18) !important;
}

@keyframes mai-ui-panel-sheen {
    0%, 100% { transform: translateX(-24%) rotate(-7deg); opacity: 0.56; }
    50% { transform: translateX(24%) rotate(-7deg); opacity: 0.9; }
}

@keyframes mai-ui-panel-glow {
    0% { transform: translate3d(-4%, 0, 0) rotate(-16deg) scale(0.92); opacity: 0.44; }
    100% { transform: translate3d(7%, 10%, 0) rotate(-8deg) scale(1.08); opacity: 0.78; }
}

/* Works library: same material as canvas, with softer editorial density. */
.mai-ui-assets-page {
    position: relative;
    isolation: isolate;
    background: transparent !important;
}

.mai-ui-assets-page > main {
    position: relative;
    isolation: isolate;
}

.mai-ui-assets-page > main::before {
    position: absolute;
    inset: -10% -6%;
    z-index: 0;
    pointer-events: none;
    content: "";
    background:
        radial-gradient(720px 460px at 10% 0%, rgba(143, 107, 209, 0.14), transparent 72%),
        radial-gradient(640px 440px at 92% 18%, rgba(242, 164, 209, 0.1), transparent 74%);
    filter: blur(14px);
}

html:not(.dark) .mai-ui-assets-page > main::before {
    background:
        radial-gradient(720px 460px at 10% 0%, rgba(199, 184, 238, 0.16), transparent 72%),
        radial-gradient(640px 440px at 92% 18%, rgba(242, 164, 209, 0.12), transparent 74%);
}

.mai-ui-assets-page > main > * {
    position: relative;
    z-index: 1;
}

.mai-ui-assets-page .mai-asset-filter {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid var(--mai-line) !important;
    border-radius: 18px !important;
    background: var(--mai-surface) !important;
    box-shadow: var(--mai-shadow), inset 0 1px 0 var(--mai-highlight) !important;
    backdrop-filter: blur(24px) saturate(145%);
    -webkit-backdrop-filter: blur(24px) saturate(145%);
}

.mai-ui-assets-page .mai-asset-filter::before {
    position: absolute;
    inset: -45% -28%;
    z-index: 0;
    pointer-events: none;
    content: "";
    background:
        radial-gradient(230px 170px at var(--mai-light-x, 24%) var(--mai-light-y, 8%), rgba(255, 255, 255, 0.24), transparent 72%),
        linear-gradient(116deg, transparent 32%, rgba(255, 255, 255, 0.14) 44%, rgba(242, 164, 209, 0.08) 49%, transparent 63%);
    opacity: 0.78;
    transform: translateX(var(--mai-sheen, -18%)) rotate(-5deg);
    transition: transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 500ms ease;
}

.mai-ui-assets-page .mai-asset-filter > * {
    position: relative;
    z-index: 1;
}

.mai-ui-assets-page .mai-asset-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid var(--mai-line) !important;
    border-radius: 20px !important;
    background: linear-gradient(135deg, var(--mai-surface), rgba(57, 50, 91, 0.28) 56%, rgba(46, 78, 91, 0.22)) !important;
    box-shadow: var(--mai-shadow), inset 0 1px 0 var(--mai-highlight) !important;
    backdrop-filter: blur(24px) saturate(145%);
    -webkit-backdrop-filter: blur(24px) saturate(145%);
    transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 320ms ease, border-color 320ms ease;
}

html:not(.dark) .mai-ui-assets-page .mai-asset-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(245, 241, 255, 0.34) 56%, rgba(232, 248, 255, 0.2)) !important;
}

.mai-ui-assets-page .mai-asset-card::before {
    position: absolute;
    inset: -42% -34%;
    z-index: 0;
    pointer-events: none;
    content: "";
    background:
        radial-gradient(240px 180px at var(--mai-light-x, 24%) var(--mai-light-y, 8%), rgba(255, 255, 255, 0.24), transparent 72%),
        linear-gradient(116deg, transparent 32%, rgba(255, 255, 255, 0.14) 44%, rgba(242, 164, 209, 0.08) 49%, transparent 63%);
    opacity: 0.72;
    transform: translateX(var(--mai-sheen, -18%)) rotate(-5deg);
    transition: transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 500ms ease;
}

.mai-ui-assets-page .mai-asset-card:hover {
    border-color: rgba(242, 164, 209, 0.56) !important;
    box-shadow: var(--mai-shadow-hover), inset 0 1px 0 var(--mai-highlight) !important;
    transform: translateY(-5px);
}

.mai-ui-assets-page .mai-asset-card:hover::before {
    opacity: 1;
    transform: translateX(20%) rotate(-5deg);
}

.mai-ui-assets-page .mai-asset-card > * {
    position: relative;
    z-index: 1;
}

.mai-ui-assets-page .ant-card-actions,
.mai-ui-assets-page .ant-card-body {
    background: transparent !important;
}

.mai-ui-assets-page .ant-card-actions {
    border-top-color: var(--mai-line) !important;
}

.mai-ui-assets-page .ant-card-actions .ant-btn {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.mai-ui-assets-page .ant-card-actions .ant-btn:hover {
    background: rgba(242, 164, 209, 0.16) !important;
    box-shadow: none;
    transform: none;
}

.mai-ui-assets-page .ant-modal-content {
    background: var(--mai-surface-strong) !important;
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
    .mai-ui-assets-page .mai-asset-card::before,
    .mai-ui-assets-page .mai-asset-filter::before {
        transform: none;
        transition: none;
    }
}

/* Generation records: convert the black history tiles into the same glass material. */
.mai-ui-workbench-page > aside .space-y-3 > button,
.mai-ui-workbench-page .ant-drawer-content .space-y-3 > button {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid var(--mai-line) !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, var(--mai-surface), rgba(57, 50, 91, 0.24) 56%, rgba(46, 78, 91, 0.2)) !important;
    box-shadow: inset 0 1px 0 var(--mai-highlight), 0 8px 22px rgba(7, 5, 20, 0.16) !important;
    transition: border-color 260ms ease, box-shadow 260ms ease, transform 260ms ease;
}

html:not(.dark) .mai-ui-workbench-page > aside .space-y-3 > button,
html:not(.dark) .mai-ui-workbench-page .ant-drawer-content .space-y-3 > button {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.56), rgba(245, 241, 255, 0.34) 56%, rgba(232, 248, 255, 0.2)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 22px rgba(83, 59, 132, 0.08) !important;
}

.mai-ui-workbench-page > aside .space-y-3 > button::before,
.mai-ui-workbench-page .ant-drawer-content .space-y-3 > button::before {
    position: absolute;
    inset: -46% -34%;
    z-index: 0;
    pointer-events: none;
    content: "";
    background:
        radial-gradient(180px 140px at var(--mai-light-x, 50%) var(--mai-light-y, 40%), rgba(255, 255, 255, 0.3), transparent 72%),
        linear-gradient(116deg, transparent 30%, rgba(255, 255, 255, 0.14) 44%, rgba(242, 164, 209, 0.08) 49%, transparent 64%);
    opacity: 0.76;
    transform: translateX(var(--mai-sheen, -18%)) rotate(-5deg);
    transition: transform 860ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 360ms ease;
}

.mai-ui-workbench-page > aside .space-y-3 > button:hover,
.mai-ui-workbench-page .ant-drawer-content .space-y-3 > button:hover {
    border-color: rgba(242, 164, 209, 0.6) !important;
    box-shadow: var(--mai-shadow-hover), inset 0 1px 0 var(--mai-highlight) !important;
    transform: translateY(-2px);
}

.mai-ui-workbench-page > aside .space-y-3 > button:hover::before,
.mai-ui-workbench-page .ant-drawer-content .space-y-3 > button:hover::before {
    opacity: 1;
    transform: translateX(20%) rotate(-5deg);
}

.mai-ui-workbench-page > aside .space-y-3 > button > *,
.mai-ui-workbench-page .ant-drawer-content .space-y-3 > button > * {
    position: relative;
    z-index: 1;
}

/* Reference clothing/shoes/bags picker modal. */
.mai-ui-gallery-modal-root .ant-modal-content {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid var(--mai-line-strong) !important;
    border-radius: 22px !important;
    background: linear-gradient(135deg, var(--mai-surface), rgba(57, 50, 91, 0.34) 56%, rgba(46, 78, 91, 0.26)) !important;
    box-shadow: var(--mai-shadow-hover), inset 0 1px 0 var(--mai-highlight) !important;
    backdrop-filter: blur(30px) saturate(150%);
    -webkit-backdrop-filter: blur(30px) saturate(150%);
}

html:not(.dark) .mai-ui-gallery-modal-root .ant-modal-content {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(245, 241, 255, 0.48) 56%, rgba(232, 248, 255, 0.32)) !important;
}

.mai-ui-gallery-modal-root .ant-modal-content::before {
    position: absolute;
    inset: -34% -24%;
    z-index: 0;
    pointer-events: none;
    content: "";
    background:
        radial-gradient(360px 240px at var(--mai-light-x, 22%) var(--mai-light-y, 2%), rgba(255, 255, 255, 0.22), transparent 72%),
        linear-gradient(118deg, transparent 30%, rgba(255, 255, 255, 0.16) 44%, rgba(242, 164, 209, 0.1) 50%, transparent 64%);
    opacity: 0.84;
    transform: translateX(var(--mai-sheen, -14%)) rotate(-4deg);
    transition: transform 900ms ease;
}

.mai-ui-gallery-modal-root .ant-modal-header,
.mai-ui-gallery-modal-root .ant-modal-body,
.mai-ui-gallery-modal-root .ant-modal-footer {
    position: relative;
    z-index: 1;
    border-color: var(--mai-line) !important;
    background: transparent !important;
}

.mai-ui-gallery-modal-root .ant-modal-body {
    max-height: calc(100dvh - 170px);
    overflow-y: auto;
}

.mai-ui-gallery-modal-root .ant-modal-body > div > .ant-input,
.mai-ui-gallery-modal-root .ant-modal-body > div > .ant-input-affix-wrapper {
    border-color: var(--mai-line) !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

html:not(.dark) .mai-ui-gallery-modal-root .ant-modal-body > div > .ant-input,
html:not(.dark) .mai-ui-gallery-modal-root .ant-modal-body > div > .ant-input-affix-wrapper {
    background: rgba(255, 255, 255, 0.42) !important;
}

.mai-ui-gallery-modal-root .ant-modal-body button[class*="aspect-"] {
    position: relative;
    isolation: isolate;
    border-color: var(--mai-line) !important;
    border-width: 1px;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    box-shadow: inset 0 1px 0 var(--mai-highlight);
}

.mai-ui-gallery-modal-root .ant-modal-body button[class*="aspect-"]::after {
    position: absolute;
    inset: -40% -40%;
    z-index: 1;
    pointer-events: none;
    content: "";
    background: linear-gradient(116deg, transparent 31%, rgba(255, 255, 255, 0.28) 45%, rgba(242, 164, 209, 0.1) 50%, transparent 64%);
    transform: translateX(-22%) rotate(-5deg);
    transition: transform 780ms ease;
}

.mai-ui-gallery-modal-root .ant-modal-body button[class*="aspect-"]:hover {
    border-color: rgba(242, 164, 209, 0.7) !important;
    box-shadow: var(--mai-shadow-hover), inset 0 1px 0 var(--mai-highlight);
}

.mai-ui-gallery-modal-root .ant-modal-body button[class*="aspect-"]:hover::after {
    transform: translateX(26%) rotate(-5deg);
}

@media (max-width: 640px) {
    .mai-ui-gallery-modal-root .ant-modal {
        max-width: calc(100vw - 20px);
    }

    .mai-ui-gallery-modal-root .ant-modal-body button[class*="aspect-"] {
        border-radius: 12px !important;
    }
}

/* Settings and user preferences: the same glass, with a calmer information density. */
.mai-ui-config-page {
    position: relative;
    isolation: isolate;
    background: transparent !important;
}

.mai-ui-config-page > .mai-config-shell {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid var(--mai-line) !important;
    border-radius: 22px !important;
    background: var(--mai-surface) !important;
    box-shadow: var(--mai-shadow), inset 0 1px 0 var(--mai-highlight) !important;
    backdrop-filter: blur(26px) saturate(145%);
    -webkit-backdrop-filter: blur(26px) saturate(145%);
}

.mai-ui-config-page > .mai-config-shell::before {
    position: absolute;
    inset: -28% -18%;
    z-index: 0;
    pointer-events: none;
    content: "";
    background:
        radial-gradient(420px 260px at var(--mai-light-x, 18%) var(--mai-light-y, 4%), rgba(255, 255, 255, 0.16), transparent 72%),
        linear-gradient(122deg, transparent 32%, rgba(255, 255, 255, 0.12) 44%, rgba(242, 164, 209, 0.08) 50%, transparent 64%);
    opacity: 0.8;
    transform: translateX(var(--mai-sheen, -16%)) rotate(-4deg);
    transition: transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.mai-ui-config-page > .mai-config-shell > * {
    position: relative;
    z-index: 1;
}

.mai-ui-config-page .ant-tabs-nav {
    border-bottom-color: var(--mai-line) !important;
}

.mai-ui-config-page .ant-tabs-tab {
    color: var(--mai-muted);
}

.mai-ui-config-page .ant-tabs-tab-active .ant-tabs-tab-btn {
    color: var(--mai-pink) !important;
}

.mai-ui-config-page .ant-tabs-ink-bar {
    background: linear-gradient(90deg, var(--mai-violet), var(--mai-pink)) !important;
}

.mai-ui-config-page .ant-form-item-extra,
.mai-ui-config-page .ant-form-item-explain,
.mai-ui-config-page .text-stone-500,
.mai-ui-config-page .text-foreground\/55,
.mai-ui-config-page .text-foreground\/60 {
    color: var(--mai-muted) !important;
}

.mai-ui-config-page .ant-tabs-tabpane > section,
.mai-ui-config-page .ant-tabs-tabpane > div > div[class*="border"],
.mai-ui-config-page .ant-tabs-tabpane > div > section {
    position: relative;
    overflow: hidden;
    border-color: var(--mai-line) !important;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 1px 0 var(--mai-highlight);
}

html:not(.dark) .mai-ui-config-page .ant-tabs-tabpane > section,
html:not(.dark) .mai-ui-config-page .ant-tabs-tabpane > div > div[class*="border"],
html:not(.dark) .mai-ui-config-page .ant-tabs-tabpane > div > section {
    background: rgba(255, 255, 255, 0.34);
}

.mai-ui-config-page .ant-tabs-tabpane > section::before,
.mai-ui-config-page .ant-tabs-tabpane > div > div[class*="border"]::before,
.mai-ui-config-page .ant-tabs-tabpane > div > section::before {
    position: absolute;
    inset: -60% -34%;
    z-index: 0;
    pointer-events: none;
    content: "";
    background: radial-gradient(300px 190px at var(--mai-light-x, 22%) var(--mai-light-y, 0%), rgba(255, 255, 255, 0.16), transparent 72%);
    opacity: 0.72;
    transform: translateX(var(--mai-sheen, -14%));
    transition: transform 900ms ease;
}

.mai-ui-config-page .ant-tabs-tabpane > section > *,
.mai-ui-config-page .ant-tabs-tabpane > div > div[class*="border"] > *,
.mai-ui-config-page .ant-tabs-tabpane > div > section > * {
    position: relative;
    z-index: 1;
}

.mai-ui-config-modal-root .ant-modal-content {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid var(--mai-line-strong) !important;
    border-radius: 22px !important;
    background: var(--mai-surface-strong) !important;
    box-shadow: var(--mai-shadow-hover), inset 0 1px 0 var(--mai-highlight) !important;
    backdrop-filter: blur(30px) saturate(150%);
    -webkit-backdrop-filter: blur(30px) saturate(150%);
}

.mai-ui-config-modal-root .ant-modal-content::before {
    position: absolute;
    inset: -32% -18%;
    z-index: 0;
    pointer-events: none;
    content: "";
    background:
        radial-gradient(330px 220px at var(--mai-light-x, 18%) var(--mai-light-y, 0%), rgba(255, 255, 255, 0.2), transparent 72%),
        linear-gradient(118deg, transparent 30%, rgba(255, 255, 255, 0.14) 44%, rgba(242, 164, 209, 0.09) 50%, transparent 64%);
    opacity: 0.82;
    transform: translateX(var(--mai-sheen, -14%)) rotate(-4deg);
    transition: transform 900ms ease;
}

.mai-ui-config-modal-root .ant-modal-header,
.mai-ui-config-modal-root .ant-modal-body,
.mai-ui-config-modal-root .ant-modal-footer {
    position: relative;
    z-index: 1;
    border-color: var(--mai-line) !important;
    background: transparent !important;
}

.mai-ui-config-modal-root .ant-modal-close:hover {
    background: rgba(242, 164, 209, 0.16) !important;
}

.mai-ui-config-modal-root .ant-tabs-tabpane > section,
.mai-ui-config-modal-root .ant-tabs-tabpane > div > div[class*="border"],
.mai-ui-config-modal-root .ant-tabs-tabpane > div > section {
    border-color: var(--mai-line) !important;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
}

html:not(.dark) .mai-ui-config-modal-root .ant-tabs-tabpane > section,
html:not(.dark) .mai-ui-config-modal-root .ant-tabs-tabpane > div > div[class*="border"],
html:not(.dark) .mai-ui-config-modal-root .ant-tabs-tabpane > div > section {
    background: rgba(255, 255, 255, 0.34);
}

@media (max-width: 640px) {
    .mai-ui-config-page > .mai-config-shell {
        margin: 12px;
        padding: 20px 16px !important;
    }

    .mai-ui-config-modal-root .ant-modal {
        max-width: calc(100vw - 20px);
    }
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
    .mai-ui-config-page > .mai-config-shell::before,
    .mai-ui-config-page .ant-tabs-tabpane > section::before,
    .mai-ui-config-page .ant-tabs-tabpane > div > div[class*="border"]::before,
    .mai-ui-config-page .ant-tabs-tabpane > div > section::before,
    .mai-ui-config-modal-root .ant-modal-content::before {
        transform: none;
        transition: none;
    }
}

/* Studio transparency pass: surfaces recede into the shared field. */
.mai-ui-workbench-page,
.mai-ui-studio-shell {
    --mai-workbench-surface: rgba(67, 58, 108, 0.24);
    --mai-workbench-hi: rgba(255, 255, 255, 0.2);
}

html:not(.dark) .mai-ui-workbench-page,
html:not(.dark) .mai-ui-studio-shell {
    --mai-workbench-surface: rgba(255, 255, 255, 0.32);
    --mai-workbench-hi: rgba(255, 255, 255, 0.78);
}

.mai-ui-workbench-page .mai-glass-panel,
.mai-ui-studio-shell > * {
    background: linear-gradient(135deg, var(--mai-workbench-surface), rgba(57, 50, 91, 0.18) 58%, rgba(46, 78, 91, 0.14)) !important;
    box-shadow: 0 18px 46px rgba(7, 5, 20, 0.16), inset 0 1px 0 var(--mai-workbench-hi) !important;
    backdrop-filter: blur(30px) saturate(125%);
    -webkit-backdrop-filter: blur(30px) saturate(125%);
}

html:not(.dark) .mai-ui-workbench-page .mai-glass-panel,
html:not(.dark) .mai-ui-studio-shell > * {
    background: linear-gradient(135deg, var(--mai-workbench-surface), rgba(245, 241, 255, 0.2) 58%, rgba(255, 238, 249, 0.14)) !important;
    box-shadow: 0 18px 46px rgba(83, 59, 132, 0.08), inset 0 1px 0 var(--mai-workbench-hi) !important;
}

.mai-ui-workbench-page .mai-glass-panel::before,
.mai-ui-studio-shell > *::before {
    background:
        radial-gradient(230px 180px at var(--mai-light-x, 50%) var(--mai-light-y, 42%), rgba(255, 255, 255, 0.36), transparent 72%),
        linear-gradient(118deg, transparent 30%, rgba(255, 255, 255, 0.15) 44%, rgba(242, 164, 209, 0.06) 50%, transparent 64%);
    opacity: 0.82;
    transform: translateX(var(--mai-sheen, -18%)) rotate(-5deg);
    animation: mai-ui-workbench-shimmer 12s ease-in-out infinite;
}

html:not(.dark) .mai-ui-workbench-page .mai-glass-panel::before,
html:not(.dark) .mai-ui-studio-shell > *::before {
    background:
        radial-gradient(230px 180px at var(--mai-light-x, 50%) var(--mai-light-y, 42%), rgba(255, 255, 255, 0.58), transparent 72%),
        linear-gradient(118deg, transparent 30%, rgba(255, 255, 255, 0.28) 44%, rgba(242, 164, 209, 0.08) 50%, transparent 64%);
}

.mai-ui-studio-shell button[class*="border-dashed"],
.mai-ui-workbench-page button[class*="border-dashed"] {
    background: rgba(255, 255, 255, 0.035) !important;
    border-color: rgba(224, 215, 255, 0.25) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

html:not(.dark) .mai-ui-studio-shell button[class*="border-dashed"],
html:not(.dark) .mai-ui-workbench-page button[class*="border-dashed"] {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(116, 92, 170, 0.18) !important;
}

.mai-ui-studio-shell .ant-btn-primary,
.mai-ui-workbench-page .ant-btn-primary {
    border: 1px solid rgba(233, 213, 255, 0.4) !important;
    background: linear-gradient(120deg, rgba(109, 40, 217, 0.92), rgba(139, 92, 246, 0.9) 52%, rgba(192, 132, 252, 0.92)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), 0 10px 26px rgba(124, 58, 237, 0.26) !important;
    backdrop-filter: blur(16px) saturate(130%);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
}

.mai-ui-studio-shell .ant-btn-primary:hover,
.mai-ui-workbench-page .ant-btn-primary:hover {
    background: linear-gradient(120deg, rgba(124, 58, 237, 0.96), rgba(168, 85, 247, 0.94) 52%, rgba(216, 180, 254, 0.96)) !important;
}

@keyframes mai-ui-workbench-shimmer {
    0%, 100% { opacity: 0.56; transform: translateX(-20%) rotate(-5deg); }
    50% { opacity: 0.92; transform: translateX(22%) rotate(-5deg); }
}

/* Portal dialogs: all popups share the same translucent family, regardless of trigger page. */
.mai-pearl-app ~ .ant-modal-root .ant-modal-content,
.ant-modal-root .ant-modal-content {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid var(--mai-line) !important;
    border-radius: 22px !important;
    background: linear-gradient(135deg, rgba(67, 58, 108, 0.62), rgba(57, 50, 91, 0.46) 56%, rgba(46, 78, 91, 0.34)) !important;
    box-shadow: var(--mai-shadow-hover), inset 0 1px 0 var(--mai-highlight) !important;
    backdrop-filter: blur(30px) saturate(150%);
    -webkit-backdrop-filter: blur(30px) saturate(150%);
}

html:not(.dark) .ant-modal-root .ant-modal-content {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(245, 241, 255, 0.48) 56%, rgba(232, 248, 255, 0.28)) !important;
}

.ant-modal-root .ant-modal-content::before {
    position: absolute;
    inset: -38% -26%;
    z-index: 0;
    pointer-events: none;
    content: "";
    background:
        radial-gradient(300px 210px at var(--mai-light-x, 50%) var(--mai-light-y, 32%), rgba(255, 255, 255, 0.24), transparent 72%),
        linear-gradient(118deg, transparent 30%, rgba(255, 255, 255, 0.16) 44%, rgba(242, 164, 209, 0.08) 50%, transparent 64%);
    opacity: 0.84;
    transform: translateX(var(--mai-sheen, -14%)) rotate(-4deg);
    transition: transform 900ms ease, opacity 420ms ease;
}

.ant-modal-root .ant-modal-content:hover::before {
    transform: translateX(18%) rotate(-4deg);
    opacity: 1;
}

.ant-modal-root .ant-modal-header,
.ant-modal-root .ant-modal-body,
.ant-modal-root .ant-modal-footer {
    position: relative;
    z-index: 1;
    border-color: var(--mai-line) !important;
    background: transparent !important;
}

.ant-modal-root .ant-modal-title,
.ant-modal-root .ant-typography,
.ant-modal-root .ant-form-item-label > label {
    color: var(--mai-text);
}

.ant-modal-root .ant-input,
.ant-modal-root .ant-input-affix-wrapper,
.ant-modal-root .ant-input-number,
.ant-modal-root .ant-select-selector,
.ant-modal-root .ant-segmented {
    border-color: var(--mai-line) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

html:not(.dark) .ant-modal-root .ant-input,
html:not(.dark) .ant-modal-root .ant-input-affix-wrapper,
html:not(.dark) .ant-modal-root .ant-input-number,
html:not(.dark) .ant-modal-root .ant-select-selector,
html:not(.dark) .ant-modal-root .ant-segmented {
    background: rgba(255, 255, 255, 0.42) !important;
}

.ant-modal-root .ant-input-affix-wrapper .ant-input,
.ant-modal-root .ant-input-group .ant-input,
.ant-modal-root .ant-input-group-addon {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Brand gallery and hairstyle picker content tiles. */
.ant-modal-root .ant-modal-body button[class*="aspect-"],
.ant-modal-root .ant-modal-body button[class*="rounded-lg"] {
    border-color: var(--mai-line) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    box-shadow: inset 0 1px 0 var(--mai-highlight);
}

.ant-modal-root .ant-modal-body button[class*="aspect-"]:hover,
.ant-modal-root .ant-modal-body button[class*="rounded-lg"]:hover {
    border-color: rgba(242, 164, 209, 0.7) !important;
    background: rgba(242, 164, 209, 0.12) !important;
    box-shadow: var(--mai-shadow-hover), inset 0 1px 0 var(--mai-highlight);
}

.ant-modal-root .ant-modal-body button[class*="aspect-"]::after,
.ant-modal-root .ant-modal-body button[class*="rounded-lg"]::after {
    position: absolute;
    inset: -42% -38%;
    z-index: 2;
    pointer-events: none;
    content: "";
    background: linear-gradient(116deg, transparent 31%, rgba(255, 255, 255, 0.26) 45%, rgba(242, 164, 209, 0.08) 50%, transparent 64%);
    transform: translateX(-22%) rotate(-5deg);
    transition: transform 780ms ease;
}

.ant-modal-root .ant-modal-body button[class*="aspect-"]:hover::after,
.ant-modal-root .ant-modal-body button[class*="rounded-lg"]:hover::after {
    transform: translateX(26%) rotate(-5deg);
}

.ant-modal-root .ant-modal-mask {
    background: rgba(3, 8, 18, 0.82) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

@media (max-width: 640px) {
    .ant-modal-root .ant-modal {
        max-width: calc(100vw - 20px);
    }

    .ant-modal-root .ant-modal-body {
        max-height: calc(100dvh - 150px);
        overflow-y: auto;
    }
}

/* Keep dialog surfaces solid; image previews must not inherit page glass or background glow. */
.ant-modal-root .ant-modal-content,
.ant-modal-root .ant-modal-header,
.ant-modal-root .ant-modal-body,
.ant-modal-root .ant-modal-footer,
.ant-modal-root .ant-modal-wrap {
    background-color: transparent !important;
}

.ant-modal-root .ant-modal-content {
    background: #101d31 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.ant-modal-root .ant-modal-content::before,
.ant-modal-root .ant-modal-content:hover::before {
    display: none !important;
    content: none !important;
    background: none !important;
    opacity: 0 !important;
}

html:not(.dark) .ant-modal-root .ant-modal-content {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.ant-modal-root .ant-modal-body > * {
    background-color: transparent !important;
}

.ant-modal-root .ant-modal-body .rounded-lg:not(.mai-sketch-canvas),
.ant-modal-root .ant-modal-body .rounded-xl:not(.mai-sketch-canvas),
.ant-modal-root .ant-modal-body .rounded-2xl:not(.mai-sketch-canvas) {
    background: rgba(255, 255, 255, 0.045) !important;
    border-color: var(--mai-line) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

html:not(.dark) .ant-modal-root .ant-modal-body .rounded-lg:not(.mai-sketch-canvas),
html:not(.dark) .ant-modal-root .ant-modal-body .rounded-xl:not(.mai-sketch-canvas),
html:not(.dark) .ant-modal-root .ant-modal-body .rounded-2xl:not(.mai-sketch-canvas) {
    background: rgba(255, 255, 255, 0.24) !important;
}

.ant-modal-root .ant-modal-body .ant-btn-primary {
    background: linear-gradient(135deg, rgba(143, 107, 209, 0.62), rgba(201, 133, 201, 0.52) 52%, rgba(242, 164, 209, 0.64)) !important;
    border-color: rgba(255, 255, 255, 0.24) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 10px 24px rgba(177, 91, 165, 0.16) !important;
}

/* New character asset dialog: form controls share the same translucent glass, not black fills. */
.ant-modal-root .ant-form,
.ant-modal-root .ant-form-item,
.ant-modal-root .ant-form-item-control,
.ant-modal-root .ant-form-item-control-input,
.ant-modal-root .ant-form-item-control-input-content {
    background: transparent !important;
}

.ant-modal-root .ant-form-item-label > label,
.ant-modal-root .ant-form-item-required {
    color: var(--mai-text) !important;
}

.ant-modal-root .ant-select-selector,
.ant-modal-root .ant-input,
.ant-modal-root .ant-input-affix-wrapper,
.ant-modal-root .ant-select-multiple .ant-select-selection-item {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--mai-line) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

html:not(.dark) .ant-modal-root .ant-select-selector,
html:not(.dark) .ant-modal-root .ant-input,
html:not(.dark) .ant-modal-root .ant-input-affix-wrapper,
html:not(.dark) .ant-modal-root .ant-select-multiple .ant-select-selection-item {
    background: rgba(255, 255, 255, 0.34) !important;
}

.ant-modal-root .ant-modal-footer .ant-btn:not(.ant-btn-primary) {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--mai-line) !important;
    color: var(--mai-text) !important;
}

.ant-modal-root .ant-modal-footer .ant-btn-primary {
    background: linear-gradient(135deg, rgba(143, 107, 209, 0.6), rgba(201, 133, 201, 0.52) 52%, rgba(242, 164, 209, 0.62)) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
}

.ant-modal-root .ant-select-dropdown,
.ant-modal-root .ant-dropdown,
.ant-modal-root .ant-picker-dropdown {
    border: 1px solid var(--mai-line) !important;
    border-radius: 14px !important;
    background: #14243a !important;
    box-shadow: var(--mai-shadow-hover) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html:not(.dark) .ant-modal-root .ant-select-dropdown,
html:not(.dark) .ant-modal-root .ant-dropdown,
html:not(.dark) .ant-modal-root .ant-picker-dropdown {
    background: rgba(255, 255, 255, 0.94) !important;
}

.ant-modal-root .ant-select-item-option-active,
.ant-modal-root .ant-select-item-option-selected {
    background: rgba(242, 164, 209, 0.2) !important;
}

/* Late portal correction for template and character dialogs. */
html.dark .ant-modal-root .ant-modal-content,
html.dark .ant-modal-root .ant-modal-header,
html.dark .ant-modal-root .ant-modal-body,
html.dark .ant-modal-root .ant-modal-footer {
    background-color: transparent !important;
}

html.dark .ant-modal-root .ant-modal-content {
    background: #101d31 !important;
}

html.dark .ant-modal-root .ant-modal-body .ant-input,
html.dark .ant-modal-root .ant-modal-body .ant-input-affix-wrapper,
html.dark .ant-modal-root .ant-modal-body .ant-select-selector,
html.dark .ant-modal-root .ant-modal-body .ant-select-selection-item,
html.dark .ant-modal-root .ant-modal-body .rounded-lg:not(.mai-sketch-canvas),
html.dark .ant-modal-root .ant-modal-body .rounded-xl:not(.mai-sketch-canvas),
html.dark .ant-modal-root .ant-modal-body .rounded-2xl:not(.mai-sketch-canvas) {
    background-color: rgba(255, 255, 255, 0.07) !important;
    background-image: none !important;
    border-color: rgba(224, 215, 255, 0.26) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

html.dark .ant-modal-root .ant-modal-body .ant-select-selector .ant-select-selection-item {
    background-color: rgba(242, 164, 209, 0.16) !important;
}

html.dark .ant-modal-root .ant-modal-body button[class*="rounded-full"]:not(.mai-sketch-swatch) {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(224, 215, 255, 0.24) !important;
    color: var(--mai-text) !important;
}

html.dark .ant-modal-root .ant-modal-body button[class*="rounded-full"]:not(.mai-sketch-swatch):hover,
html.dark .ant-modal-root .ant-modal-body button[class*="rounded-full"][class*="bg-primary"] {
    background: linear-gradient(135deg, rgba(242, 164, 209, 0.38), rgba(143, 107, 209, 0.3)) !important;
    border-color: rgba(242, 164, 209, 0.62) !important;
}

html.dark .ant-modal-root .ant-modal-footer .ant-btn:not(.ant-btn-primary) {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(224, 215, 255, 0.26) !important;
    color: var(--mai-text) !important;
}

html.dark .ant-modal-root .ant-modal-footer .ant-btn-primary {
    background: linear-gradient(135deg, rgba(143, 107, 209, 0.6), rgba(201, 133, 201, 0.54) 52%, rgba(242, 164, 209, 0.66)) !important;
    color: #fff !important;
}

html:not(.dark) .ant-modal-root .ant-modal-body .ant-input,
html:not(.dark) .ant-modal-root .ant-modal-body .ant-input-affix-wrapper,
html:not(.dark) .ant-modal-root .ant-modal-body .ant-select-selector,
html:not(.dark) .ant-modal-root .ant-modal-body .ant-select-selection-item,
html:not(.dark) .ant-modal-root .ant-modal-body .rounded-lg:not(.mai-sketch-canvas),
html:not(.dark) .ant-modal-root .ant-modal-body .rounded-xl:not(.mai-sketch-canvas),
html:not(.dark) .ant-modal-root .ant-modal-body .rounded-2xl:not(.mai-sketch-canvas) {
    background-color: rgba(255, 255, 255, 0.34) !important;
    background-image: none !important;
}


/* Canvas project editor: visual-only override for the inline canvas theme. */
html.mai-ui-canvas-editor-route .mai-ui-canvas-editor-page {
    position: relative;
    isolation: isolate;
    color: var(--mai-text) !important;
    background:
        radial-gradient(900px 620px at 14% -12%, rgba(163, 132, 225, 0.22), transparent 67%),
        radial-gradient(820px 620px at 106% 86%, rgba(105, 116, 205, 0.18), transparent 70%),
        linear-gradient(135deg, var(--mai-bg-0) 0%, var(--mai-bg-1) 54%, var(--mai-bg-2) 100%) !important;
}

html.mai-ui-canvas-editor-route .mai-ui-canvas-editor-surface {
    background:
        radial-gradient(720px 500px at var(--mai-light-x, 48%) var(--mai-light-y, 42%), rgba(255, 255, 255, 0.085), transparent 68%),
        radial-gradient(880px 660px at 88% 7%, rgba(149, 124, 215, 0.14), transparent 66%),
        linear-gradient(135deg, rgba(23, 21, 43, 0.98), rgba(33, 29, 58, 0.96) 55%, rgba(43, 40, 80, 0.93)) !important;
}

html.mai-ui-canvas-editor-route .mai-ui-canvas-editor-surface > .pointer-events-none.absolute.inset-0 {
    opacity: 0.46 !important;
    filter: saturate(0.72) brightness(1.22);
}

html.mai-ui-canvas-editor-route .mai-ui-canvas-editor-page [data-canvas-no-zoom],
html.mai-ui-canvas-editor-route .mai-ui-canvas-editor-page .thin-scrollbar.pointer-events-auto,
html.mai-ui-canvas-editor-route .mai-ui-canvas-editor-page .absolute.bottom-5.left-5.z-50 > div,
html.mai-ui-canvas-editor-route .mai-ui-canvas-editor-page .absolute.bottom-24.left-6.z-50,
html.mai-ui-canvas-editor-route .mai-ui-canvas-editor-page [class*="z-[70]"][class*="bg-white"] {
    border-color: var(--mai-line) !important;
    background: linear-gradient(135deg, rgba(73, 64, 119, 0.56), rgba(56, 51, 93, 0.4) 58%, rgba(51, 72, 108, 0.32)) !important;
    box-shadow: var(--mai-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
    color: var(--mai-text) !important;
    backdrop-filter: blur(26px) saturate(142%) !important;
    -webkit-backdrop-filter: blur(26px) saturate(142%) !important;
}

html.mai-ui-canvas-editor-route .mai-ui-canvas-editor-page section.relative > div.absolute.top-0.z-50 > .pointer-events-auto {
    border: 1px solid transparent;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(74, 66, 119, 0.34), rgba(56, 51, 93, 0.2)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(18px) saturate(136%);
    -webkit-backdrop-filter: blur(18px) saturate(136%);
}

html.mai-ui-canvas-editor-route .mai-ui-canvas-editor-page section.relative > div.absolute.top-0.z-50 button:hover,
html.mai-ui-canvas-editor-route .mai-ui-canvas-editor-page .mai-ui-canvas-glass-control button:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

html.mai-ui-canvas-editor-route .mai-ui-canvas-editor-page [data-canvas-no-zoom]::before,
html.mai-ui-canvas-editor-route .mai-ui-canvas-editor-page .thin-scrollbar.pointer-events-auto::before {
    position: absolute;
    inset: -52% -28%;
    z-index: 0;
    pointer-events: none;
    content: "";
    background:
        radial-gradient(360px 180px at var(--mai-light-x, 40%) var(--mai-light-y, 22%), rgba(255, 255, 255, 0.19), transparent 71%),
        linear-gradient(116deg, transparent 33%, rgba(255, 255, 255, 0.13) 45%, rgba(242, 164, 209, 0.07) 50%, transparent 64%);
    transform: translateX(var(--mai-sheen, -15%)) rotate(-4deg);
}

html.mai-ui-canvas-editor-route .mai-ui-canvas-editor-page [data-canvas-no-zoom] > *,
html.mai-ui-canvas-editor-route .mai-ui-canvas-editor-page .thin-scrollbar.pointer-events-auto > * {
    position: relative;
    z-index: 1;
}

html:not(.dark).mai-ui-canvas-editor-route .mai-ui-canvas-editor-page {
    background:
        radial-gradient(900px 620px at 14% -12%, rgba(242, 164, 209, 0.2), transparent 67%),
        radial-gradient(820px 620px at 106% 86%, rgba(181, 170, 231, 0.2), transparent 70%),
        linear-gradient(135deg, #f6f5ff 0%, #fbf9ff 54%, #fff7fc 100%) !important;
}

html:not(.dark).mai-ui-canvas-editor-route .mai-ui-canvas-editor-surface {
    background:
        radial-gradient(720px 500px at var(--mai-light-x, 48%) var(--mai-light-y, 42%), rgba(255, 255, 255, 0.76), transparent 68%),
        linear-gradient(135deg, rgba(246, 245, 255, 0.97), rgba(251, 249, 255, 0.94) 55%, rgba(255, 247, 252, 0.92)) !important;
}

html:not(.dark).mai-ui-canvas-editor-route .mai-ui-canvas-editor-page [data-canvas-no-zoom],
html:not(.dark).mai-ui-canvas-editor-route .mai-ui-canvas-editor-page .thin-scrollbar.pointer-events-auto,
html:not(.dark).mai-ui-canvas-editor-route .mai-ui-canvas-editor-page .absolute.bottom-5.left-5.z-50 > div,
html:not(.dark).mai-ui-canvas-editor-route .mai-ui-canvas-editor-page .absolute.bottom-24.left-6.z-50,
html:not(.dark).mai-ui-canvas-editor-route .mai-ui-canvas-editor-page [class*="z-[70]"][class*="bg-white"] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.64), rgba(245, 241, 255, 0.42) 58%, rgba(232, 248, 255, 0.32)) !important;
}

/* Hairstyle/template picker: keep the content readable, with no oversized white flare. */
.mai-ui-gallery-modal-root .ant-modal-content::before {
    display: none !important;
    content: none !important;
}

.mai-ui-gallery-modal-root .ant-modal-body button[class*="aspect-"]::after,
.mai-ui-gallery-modal-root .ant-modal-body button[class*="rounded-lg"]::after {
    inset: 0 !important;
    opacity: 0.08 !important;
    background: linear-gradient(116deg, transparent 44%, rgba(255, 255, 255, 0.1) 49%, transparent 55%) !important;
    transform: none !important;
    transition: opacity 260ms ease !important;
}

.mai-ui-gallery-modal-root .ant-modal-body button[class*="aspect-"]:hover::after,
.mai-ui-gallery-modal-root .ant-modal-body button[class*="rounded-lg"]:hover::after {
    opacity: 0.18 !important;
    transform: none !important;
}

/* Quiet workbench glass: no idle motion, no extra oval glow; light moves only while hovered. */
.mai-ui-workbench-page .mai-glass-panel::before,
.mai-ui-workbench-page > main > aside::before,
.mai-ui-workbench-page > main > section::before,
.mai-ui-workbench-page > main > section > div::before,
.mai-ui-workbench-page > main > section > aside::before,
.mai-ui-studio-shell > *::before {
    inset: -12% -8% !important;
    background: linear-gradient(118deg, transparent 40%, rgba(255, 255, 255, 0.045) 48%, rgba(242, 164, 209, 0.018) 52%, transparent 60%) !important;
    opacity: 0.18 !important;
    transform: translateX(0) rotate(-4deg) !important;
    animation: none !important;
    transition: opacity 260ms ease, transform 420ms cubic-bezier(0.2, 0.7, 0.2, 1) !important;
}

.mai-ui-workbench-page .mai-glass-panel:hover::before,
.mai-ui-workbench-page > main > aside:hover::before,
.mai-ui-workbench-page > main > section:hover::before,
.mai-ui-workbench-page > main > section > div:hover::before,
.mai-ui-workbench-page > main > section > aside:hover::before,
.mai-ui-studio-shell > *:hover::before {
    opacity: 0.48 !important;
    transform: translateX(var(--mai-sheen, 0%)) rotate(-4deg) !important;
}

.mai-ui-workbench-page .mai-glass-panel::after,
.mai-ui-workbench-page > main > aside::after,
.mai-ui-workbench-page > main > section::after,
.mai-ui-workbench-page > main > section > div::after,
.mai-ui-workbench-page > main > section > aside::after,
.mai-ui-studio-shell > *::after {
    display: none !important;
    animation: none !important;
}

/* === Edge-only white-box fix (is-edge class set by ui-runtime.js) ===
   Suppress the overflow glass sheen layers and the white hairline border on
   primary buttons that render as white outline boxes on Microsoft Edge.
   Only applies under html.is-edge; Chrome is unaffected. */
html.is-edge .mai-ui-workbench-page > aside .space-y-3 > button::before,
html.is-edge .mai-ui-workbench-page .ant-drawer-content .space-y-3 > button::before {
    inset: -12% -8% !important;
    opacity: 0.2 !important;
    background: linear-gradient(118deg, transparent 40%, rgba(255, 255, 255, 0.06) 48%, transparent 60%) !important;
    transform: none !important;
    transition: none !important;
}

html.is-edge .mai-ui-studio-shell .ant-btn-primary,
html.is-edge .mai-ui-workbench-page .ant-btn-primary {
    border-color: rgba(143, 107, 209, 0.4) !important;
}

html.is-edge .mai-ui-studio-shell > *,
html.is-edge .mai-ui-workbench-page > aside .space-y-3 > button {
    overflow: hidden;
}

/* Edge final fallback: disable backdrop-filter glass blur entirely on Edge,
   and tone down remaining white translucent borders to theme purple.
   Fixes white thin-line rectangle artifacts rendered by Edge compositor. */
html.is-edge .mai-ui-studio-shell *,
html.is-edge .mai-ui-workbench-page *,
html.is-edge .mai-pearl-app * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html.is-edge .mai-nav-item,
html.is-edge .mai-nav-item-active,
html.is-edge .mai-glass-panel,
html.is-edge .mai-template-locked,
html.is-edge .mai-asset-filter,
html.is-edge .mai-config-shell {
    border-color: rgba(143, 107, 209, 0.45) !important;
}

html.is-edge .mai-nav-item,
html.is-edge .mai-glass-panel,
html.is-edge .mai-template-locked,
html.is-edge .mai-asset-filter,
html.is-edge .mai-config-shell {
    box-shadow: none !important;
}

/* Image previews are inspection surfaces, not glass surfaces. Keep the image clean and the metadata stable. */
.ant-modal-root .mai-media-preview-modal .ant-modal-mask,
.mai-media-preview-modal + .ant-modal-mask {
    background: rgba(3, 8, 18, 0.82) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.ant-modal-root .mai-media-preview-modal .ant-modal-content {
    overflow: hidden !important;
    padding: 0 !important;
    border: 1px solid rgba(137, 170, 214, 0.24) !important;
    border-radius: 14px !important;
    background: #101d31 !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.46) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.ant-modal-root .mai-media-preview-modal .ant-modal-body,
.ant-modal-root .mai-media-preview-modal .ant-modal-header {
    padding: 0 !important;
    background: transparent !important;
}

.ant-modal-root .mai-media-preview-modal .ant-modal-close {
    z-index: 20;
    top: 10px;
    right: 10px;
    color: rgba(243, 247, 255, 0.78);
}

.ant-modal-root .mai-media-preview-modal .bg-\[\#07111f\] {
    background: #050c17 !important;
}

/* Picker dialogs are inspection surfaces: no glass blur, moving sheen, or duplicate tile overlays. */
.ant-modal-root .ant-modal-content,
.ant-modal-root .ant-modal-content::before,
.ant-modal-root .ant-modal-content:hover::before,
.ant-modal-root .ant-modal-body button[class*="aspect-"]::after,
.ant-modal-root .ant-modal-body button[class*="rounded-lg"]::after,
.ant-modal-root .ant-modal-body button[class*="rounded-xl"]::after,
.ant-modal-root .ant-modal-body button[class*="rounded-2xl"]::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.ant-modal-root .ant-modal-content::before,
.ant-modal-root .ant-modal-content:hover::before,
.ant-modal-root .ant-modal-body button[class*="aspect-"]::after,
.ant-modal-root .ant-modal-body button[class*="rounded-lg"]::after,
.ant-modal-root .ant-modal-body button[class*="rounded-xl"]::after,
.ant-modal-root .ant-modal-body button[class*="rounded-2xl"]::after {
    display: none !important;
    content: none !important;
    background: none !important;
    transform: none !important;
    animation: none !important;
}

.mai-gallery-picker-grid {
    contain: layout paint;
    grid-auto-rows: 220px !important;
    align-content: start !important;
}

.mai-gallery-picker-grid > .mai-gallery-picker-card {
    height: 219px !important;
    min-height: 219px !important;
}

.mai-gallery-picker-card,
.mai-asset-picker-body .ant-card,
.mai-history-portrait-modal .ant-modal-body button {
    isolation: isolate;
    overflow: hidden;
    transform: none !important;
}

.mai-gallery-picker-card::before,
.mai-gallery-picker-card::after,
.mai-asset-picker-body .ant-card::before,
.mai-asset-picker-body .ant-card::after,
.mai-history-portrait-modal .ant-modal-body button::before,
.mai-history-portrait-modal .ant-modal-body button::after {
    display: none !important;
    content: none !important;
}

.mai-gallery-picker-card img,
.mai-asset-picker-body .ant-card img,
.mai-history-portrait-modal .ant-modal-body img {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    transform: none !important;
}