/* 轨迹星账六主题系统 v2：内容层级优先，主题气氛克制。 */
:root {
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 16px;
    --touch-min: 48px;
    --motion-fast: 160ms;
    --motion-base: 220ms;
    --motion-slow: 320ms;
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --z-content: 10;
    --z-nav: 100;
    --z-sheet-backdrop: 2000;
    --z-sheet: 2010;
    --z-toast: 3000;
    --success: #15803d;
    --warning: #a16207;
    --danger: #b42318;
}

body[data-theme="startrail"] {
    color-scheme: dark;
    --primary: #a78bfa;
    --secondary: #67e8f9;
    --accent: #f7c873;
    --on-primary: #160d2f;
    --on-secondary: #082f49;
    --on-accent: #332108;
    --bg: #0b1730;
    --bg-image:
        radial-gradient(circle at 16% 10%, rgba(103, 232, 249, .16), transparent 34%),
        radial-gradient(circle at 84% 18%, rgba(167, 139, 250, .22), transparent 40%),
        radial-gradient(circle at 54% 92%, rgba(96, 165, 250, .12), transparent 38%),
        linear-gradient(180deg, #142545, #0b1730 74%);
    --surface: #142545;
    --surface-raised: #1c3158;
    --card-rgb: 20 37 69;
    --card-alpha: 1;
    --card: #142545;
    --text: #f8fafc;
    --text-secondary: #d5def0;
    --border: rgba(167, 139, 250, .36);
    --nav-bg: #111f3b;
    --focus-ring: rgba(103, 232, 249, .42);
    --surface-highlight: transparent;
    --surface-shadow: rgba(1, 6, 17, .28);
    --list-hover-bg: rgba(167, 139, 250, .14);
    --font-title: 'Noto Sans SC', system-ui, sans-serif;
    --pattern-opacity: .82;
}

body[data-theme="cute"] {
    color-scheme: light;
    --primary: #c93c6b;
    --secondary: #7157a6;
    --accent: #b86b12;
    --on-primary: #ffffff;
    --on-secondary: #ffffff;
    --on-accent: #ffffff;
    --bg: #fff5f8;
    --bg-image:
        radial-gradient(circle at 16% 10%, rgba(201, 60, 107, .07), transparent 28%),
        radial-gradient(circle at 88% 20%, rgba(113, 87, 166, .07), transparent 32%),
        linear-gradient(180deg, #fff9fb, #fff5f8 72%);
    --surface: #ffffff;
    --surface-raised: #fff9fb;
    --card-rgb: 255 255 255;
    --card-alpha: 1;
    --card: #ffffff;
    --text: #3f2430;
    --text-secondary: #6f5560;
    --border: #ebcbd7;
    --nav-bg: #fff9fb;
    --focus-ring: rgba(201, 60, 107, .25);
    --surface-highlight: transparent;
    --surface-shadow: rgba(92, 37, 59, .12);
    --list-hover-bg: rgba(201, 60, 107, .07);
    --font-title: 'Noto Sans SC', system-ui, sans-serif;
    --pattern-opacity: .52;
}

body[data-theme="doggo"] {
    color-scheme: light;
    --primary: #b45309;
    --secondary: #2563a9;
    --accent: #c66a12;
    --on-primary: #ffffff;
    --on-secondary: #ffffff;
    --on-accent: #ffffff;
    --bg: #fff8ed;
    --bg-image:
        radial-gradient(circle at 15% 12%, rgba(180, 83, 9, .08), transparent 30%),
        radial-gradient(circle at 84% 18%, rgba(37, 99, 169, .08), transparent 35%),
        linear-gradient(180deg, #fffbf4, #fff8ed 72%);
    --surface: #ffffff;
    --surface-raised: #fffbf4;
    --card-rgb: 255 255 255;
    --card-alpha: 1;
    --card: #ffffff;
    --text: #3a2a1b;
    --text-secondary: #6f5a46;
    --border: #e8d4ba;
    --nav-bg: #fffbf4;
    --focus-ring: rgba(37, 99, 169, .25);
    --surface-highlight: transparent;
    --surface-shadow: rgba(93, 61, 25, .12);
    --list-hover-bg: rgba(180, 83, 9, .07);
    --font-title: 'Noto Sans SC', system-ui, sans-serif;
    --pattern-opacity: .48;
}

body[data-theme="mint"] {
    color-scheme: light;
    --primary: #0f766e;
    --secondary: #3a7d44;
    --accent: #a65725;
    --on-primary: #ffffff;
    --on-secondary: #ffffff;
    --on-accent: #ffffff;
    --bg: #eff9f5;
    --bg-image:
        radial-gradient(ellipse at 14% 10%, rgba(15, 118, 110, .08), transparent 34%),
        radial-gradient(ellipse at 88% 20%, rgba(58, 125, 68, .07), transparent 38%),
        linear-gradient(180deg, #f7fcfa, #eff9f5 72%);
    --surface: #ffffff;
    --surface-raised: #f7fcfa;
    --card-rgb: 255 255 255;
    --card-alpha: 1;
    --card: #ffffff;
    --text: #173b37;
    --text-secondary: #4f6d68;
    --border: #c9e1da;
    --nav-bg: #f7fcfa;
    --focus-ring: rgba(15, 118, 110, .24);
    --surface-highlight: transparent;
    --surface-shadow: rgba(19, 78, 74, .11);
    --list-hover-bg: rgba(15, 118, 110, .07);
    --font-title: 'Noto Sans SC', system-ui, sans-serif;
    --pattern-opacity: .46;
}

body[data-theme="rainy"] {
    color-scheme: light;
    --primary: #036b83;
    --secondary: #4169a1;
    --accent: #a95735;
    --on-primary: #ffffff;
    --on-secondary: #ffffff;
    --on-accent: #ffffff;
    --bg: #eef7fa;
    --bg-image:
        radial-gradient(circle at 18% 8%, rgba(3, 107, 131, .08), transparent 31%),
        radial-gradient(circle at 85% 17%, rgba(65, 105, 161, .08), transparent 36%),
        linear-gradient(180deg, #f6fbfc, #eef7fa 72%);
    --surface: #ffffff;
    --surface-raised: #f6fbfc;
    --card-rgb: 255 255 255;
    --card-alpha: 1;
    --card: #ffffff;
    --text: #143443;
    --text-secondary: #4e6873;
    --border: #c6dce4;
    --nav-bg: #f6fbfc;
    --focus-ring: rgba(3, 107, 131, .24);
    --surface-highlight: transparent;
    --surface-shadow: rgba(20, 52, 67, .11);
    --list-hover-bg: rgba(3, 107, 131, .07);
    --font-title: 'Noto Sans SC', system-ui, sans-serif;
    --pattern-opacity: .48;
}

body[data-theme="morandi"] {
    color-scheme: light;
    --primary: #8f4f65;
    --secondary: #5f6878;
    --accent: #9a6415;
    --on-primary: #ffffff;
    --on-secondary: #ffffff;
    --on-accent: #ffffff;
    --bg: #f8f3f5;
    --bg-image:
        radial-gradient(circle at 15% 10%, rgba(143, 79, 101, .07), transparent 30%),
        radial-gradient(circle at 86% 20%, rgba(95, 104, 120, .07), transparent 36%),
        linear-gradient(180deg, #fcf8fa, #f8f3f5 72%);
    --surface: #ffffff;
    --surface-raised: #fcf8fa;
    --card-rgb: 255 255 255;
    --card-alpha: 1;
    --card: #ffffff;
    --text: #382b32;
    --text-secondary: #6b5b63;
    --border: #decbd4;
    --nav-bg: #fcf8fa;
    --focus-ring: rgba(143, 79, 101, .24);
    --surface-highlight: transparent;
    --surface-shadow: rgba(56, 43, 50, .1);
    --list-hover-bg: rgba(143, 79, 101, .07);
    --font-title: 'Noto Sans SC', system-ui, sans-serif;
    --pattern-opacity: .44;
}

/*
 * 卡片颜色只由 RGB 令牌和用户透明度共同生成。
 * 各主题原先写死的 --card 实色会吞掉外观面板对 --card-alpha 的更新。
 */
body[data-theme] {
    --card: rgb(var(--card-rgb) / var(--card-alpha));
}

html {
    background: var(--bg, #0b1730);
}

body {
    font-family: 'Noto Sans SC', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-variant-numeric: tabular-nums;
}

button,
input,
select,
textarea {
    font: inherit;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

/* 去掉旧主题遗留的 Emoji、扫描线和持续装饰动画。 */
.scanlines,
.cute-bg {
    display: none !important;
}

body[data-theme] .theme-pattern {
    display: block;
    opacity: var(--pattern-opacity);
    animation: none !important;
    transform: none !important;
    background-size: 100% 100% !important;
    background-position: center !important;
}

body[data-theme] .theme-pattern::before,
body[data-theme] .theme-pattern::after {
    background: none;
    animation: none !important;
    opacity: 0 !important;
}

body[data-theme="startrail"] .theme-pattern {
    background-image:
        radial-gradient(circle at 18% 22%, rgba(248, 250, 252, .34) 0 1.15px, transparent 1.9px),
        radial-gradient(circle at 72% 14%, rgba(103, 232, 249, .38) 0 1.15px, transparent 2px),
        radial-gradient(circle at 86% 58%, rgba(167, 139, 250, .34) 0 1.35px, transparent 2.2px),
        radial-gradient(circle at 38% 66%, rgba(247, 200, 115, .28) 0 1px, transparent 1.8px),
        radial-gradient(ellipse at 50% 78%, transparent 50%, rgba(167, 139, 250, .16) 51%, transparent 53%),
        radial-gradient(ellipse at 46% 20%, transparent 61%, rgba(103, 232, 249, .11) 62%, transparent 64%);
}

body[data-theme="cute"] .theme-pattern {
    background-image:
        radial-gradient(circle at 14% 18%, rgba(201, 60, 107, .14) 0 5px, transparent 5.5px),
        radial-gradient(circle at 18% 13%, rgba(201, 60, 107, .11) 0 2px, transparent 2.5px),
        radial-gradient(circle at 10% 13%, rgba(201, 60, 107, .11) 0 2px, transparent 2.5px),
        radial-gradient(circle at 86% 70%, rgba(113, 87, 166, .1) 0 7px, transparent 7.5px);
}

body[data-theme="doggo"] .theme-pattern {
    background-image:
        radial-gradient(circle at 86% 12%, rgba(37, 99, 169, .1) 0 62px, transparent 63px),
        radial-gradient(circle at 14% 72%, rgba(180, 83, 9, .12) 0 6px, transparent 6.5px),
        radial-gradient(circle at 18% 67%, rgba(180, 83, 9, .09) 0 2.5px, transparent 3px),
        radial-gradient(circle at 10% 67%, rgba(180, 83, 9, .09) 0 2.5px, transparent 3px);
}

body[data-theme="mint"] .theme-pattern {
    background-image:
        radial-gradient(ellipse at 8% 18%, rgba(15, 118, 110, .1) 0 70px, transparent 71px),
        radial-gradient(ellipse at 92% 72%, rgba(58, 125, 68, .08) 0 96px, transparent 97px);
}

body[data-theme="rainy"] .theme-pattern {
    background-image:
        radial-gradient(circle at 15% 16%, transparent 0 30px, rgba(3, 107, 131, .1) 31px, transparent 33px),
        radial-gradient(circle at 88% 64%, transparent 0 52px, rgba(65, 105, 161, .09) 53px, transparent 55px),
        radial-gradient(circle at 72% 12%, rgba(255, 255, 255, .52) 0 18px, transparent 19px);
}

body[data-theme="morandi"] .theme-pattern {
    background-image:
        radial-gradient(ellipse at 8% 12%, rgba(143, 79, 101, .1) 0 88px, transparent 89px),
        radial-gradient(ellipse at 94% 78%, rgba(95, 104, 120, .08) 0 110px, transparent 111px);
}

/* 会员氛围独立于图鉴选择：权益一生效就能看见，每套主题保留自己的形态。 */
.theme-member-aura {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.theme-member-aura::before,
.theme-member-aura::after {
    content: "";
    position: absolute;
    width: min(82vw, 430px);
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: .32;
    filter: blur(1px) saturate(1.08);
    transform: translate3d(0, 0, 0) scale(.96);
}

.theme-member-aura::before {
    top: calc(env(safe-area-inset-top) + 38px);
    right: -31%;
    background:
        radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--primary) 18%, transparent) 0 4%, transparent 5% 28%, color-mix(in srgb, var(--secondary) 12%, transparent) 29% 30%, transparent 31% 49%, color-mix(in srgb, var(--accent) 9%, transparent) 50% 51%, transparent 52%),
        conic-gradient(from 210deg, transparent, color-mix(in srgb, var(--primary) 10%, transparent), transparent 28% 68%, color-mix(in srgb, var(--secondary) 8%, transparent), transparent);
}

.theme-member-aura::after {
    left: -42%;
    bottom: 8%;
    background: radial-gradient(ellipse at 55% 48%, color-mix(in srgb, var(--secondary) 14%, transparent), transparent 61%);
    opacity: .22;
}

body[data-theme-member="active"] .theme-member-aura {
    display: block;
}

.theme-member-orbit,
.theme-member-glyph,
.theme-member-mote {
    position: absolute;
    display: block;
    color: var(--primary);
}

.theme-member-orbit {
    top: calc(env(safe-area-inset-top) + 78px);
    right: -64px;
    width: 214px;
    height: 88px;
    border: 1px solid color-mix(in srgb, var(--primary) 34%, transparent);
    border-radius: 50%;
    transform: rotate(-18deg);
    box-shadow: 0 0 24px color-mix(in srgb, var(--primary) 13%, transparent);
}

.theme-member-glyph {
    top: calc(env(safe-area-inset-top) + 92px);
    right: 24px;
    width: 27px;
    height: 27px;
    --member-glyph-transform: none;
    transform: var(--member-glyph-transform);
    filter: drop-shadow(0 4px 9px color-mix(in srgb, var(--primary) 28%, transparent));
}

.theme-member-mote {
    width: 6px;
    height: 6px;
    border: 1px solid color-mix(in srgb, var(--primary) 66%, transparent);
    border-radius: 50%;
    box-shadow: 0 0 10px color-mix(in srgb, var(--primary) 28%, transparent);
}

.theme-member-mote-a { top: 22%; left: 7%; }
.theme-member-mote-b { top: 48%; right: 6%; width: 4px; height: 4px; }
.theme-member-mote-c { bottom: 17%; left: 12%; width: 5px; height: 5px; }
.theme-member-mote-d { top: 34%; right: 22%; width: 3px; height: 3px; }
.theme-member-mote-e { bottom: 33%; right: 9%; width: 7px; height: 7px; }
.theme-member-mote-f { top: 68%; left: 26%; width: 3px; height: 3px; }

body[data-theme="startrail"][data-theme-member="active"] .theme-member-glyph {
    background: var(--accent);
    clip-path: polygon(50% 0, 61% 36%, 100% 50%, 61% 64%, 50% 100%, 39% 64%, 0 50%, 39% 36%);
}

body[data-theme="startrail"][data-theme-member="active"] .theme-member-orbit {
    border-color: color-mix(in srgb, var(--secondary) 52%, transparent);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary) 6%, transparent), 0 0 26px color-mix(in srgb, var(--secondary) 18%, transparent);
}

body[data-theme="cute"][data-theme-member="active"] .theme-member-glyph {
    width: 24px;
    height: 22px;
    color: var(--primary);
    font: 900 31px/22px Georgia, serif;
}

body[data-theme="cute"][data-theme-member="active"] .theme-member-glyph::before {
    content: "♡";
}

body[data-theme="cute"][data-theme-member="active"] .theme-member-mote {
    border-radius: 50% 50% 48% 16%;
    background: color-mix(in srgb, var(--primary) 28%, transparent);
    transform: rotate(45deg);
}

body[data-theme="cute"][data-theme-member="active"] .theme-member-aura::before {
    border-radius: 44% 56% 48% 52%;
    background:
        radial-gradient(circle at 34% 35%, color-mix(in srgb, var(--primary) 16%, transparent) 0 3%, transparent 4%),
        radial-gradient(circle at 66% 29%, color-mix(in srgb, var(--secondary) 15%, transparent) 0 2.5%, transparent 3.5%),
        radial-gradient(ellipse at 50% 52%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 62%);
}

body[data-theme="doggo"][data-theme-member="active"] .theme-member-glyph {
    width: 13px;
    height: 11px;
    top: calc(env(safe-area-inset-top) + 103px);
    right: 31px;
    border-radius: 50% 50% 44% 44%;
    background: color-mix(in srgb, var(--primary) 78%, #fff 12%);
    box-shadow: -8px -9px 0 -2px var(--secondary), -2px -13px 0 -2px var(--primary), 5px -12px 0 -2px var(--primary), 10px -7px 0 -2px var(--secondary);
}

body[data-theme="doggo"][data-theme-member="active"] .theme-member-orbit {
    border-style: dashed;
    border-color: color-mix(in srgb, var(--secondary) 42%, transparent);
}

body[data-theme="doggo"][data-theme-member="active"] .theme-member-aura::before {
    background:
        radial-gradient(circle at 38% 38%, color-mix(in srgb, var(--primary) 15%, transparent) 0 5%, transparent 5.5%),
        radial-gradient(circle at 55% 32%, color-mix(in srgb, var(--secondary) 14%, transparent) 0 4%, transparent 4.5%),
        radial-gradient(ellipse at 49% 56%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 58%);
}

body[data-theme="mint"][data-theme-member="active"] .theme-member-glyph {
    width: 18px;
    height: 28px;
    border: 2px solid var(--primary);
    border-radius: 100% 8% 100% 8%;
    background: color-mix(in srgb, var(--secondary) 16%, transparent);
    --member-glyph-transform: rotate(42deg);
}

body[data-theme="mint"][data-theme-member="active"] .theme-member-orbit {
    width: 190px;
    border-radius: 100% 20% 100% 20%;
    transform: rotate(-12deg);
}

body[data-theme="mint"][data-theme-member="active"] .theme-member-aura::before {
    border-radius: 70% 18% 72% 22%;
    background: linear-gradient(145deg, transparent 28%, color-mix(in srgb, var(--primary) 13%, transparent) 30% 34%, transparent 36% 55%, color-mix(in srgb, var(--secondary) 10%, transparent) 57% 61%, transparent 63%);
}

body[data-theme="rainy"][data-theme-member="active"] .theme-member-glyph {
    width: 21px;
    height: 28px;
    border: 2px solid var(--primary);
    border-radius: 62% 38% 64% 36%;
    background: color-mix(in srgb, var(--secondary) 12%, transparent);
    --member-glyph-transform: rotate(45deg);
}

body[data-theme="rainy"][data-theme-member="active"] .theme-member-orbit {
    border-color: color-mix(in srgb, var(--secondary) 38%, transparent);
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--primary) 5%, transparent), 0 0 0 16px color-mix(in srgb, var(--secondary) 4%, transparent);
}

body[data-theme="rainy"][data-theme-member="active"] .theme-member-aura::before {
    background: repeating-radial-gradient(ellipse at 50% 58%, transparent 0 18%, color-mix(in srgb, var(--primary) 12%, transparent) 19% 20%, transparent 21% 31%);
}

body[data-theme="morandi"][data-theme-member="active"] .theme-member-glyph {
    width: 18px;
    height: 25px;
    border-radius: 70% 12% 70% 18%;
    background: color-mix(in srgb, var(--primary) 76%, #fff 14%);
    --member-glyph-transform: rotate(28deg);
    box-shadow: -10px 8px 0 -2px color-mix(in srgb, var(--primary) 58%, #fff 22%), 9px 9px 0 -2px color-mix(in srgb, var(--secondary) 52%, #fff 26%);
}

body[data-theme="morandi"][data-theme-member="active"] .theme-member-mote {
    border-radius: 70% 12% 70% 18%;
    transform: rotate(24deg);
}

body[data-theme="morandi"][data-theme-member="active"] .theme-member-aura::before {
    border-radius: 62% 38% 58% 42%;
    background: conic-gradient(from 18deg, color-mix(in srgb, var(--primary) 10%, transparent), transparent 16%, color-mix(in srgb, var(--secondary) 11%, transparent) 18% 27%, transparent 29% 47%, color-mix(in srgb, var(--accent) 9%, transparent) 49% 58%, transparent 60% 78%, color-mix(in srgb, var(--primary) 9%, transparent) 80% 90%, transparent 92%);
}

body[data-theme-effects="dynamic"][data-theme-member="active"] .theme-member-orbit {
    animation: member-aura-breathe 5.8s ease-in-out infinite alternate;
}

body[data-theme-effects="dynamic"][data-theme-member="active"] .theme-member-glyph {
    animation: member-aura-float 4.6s ease-in-out infinite alternate;
}

body[data-theme-effects="dynamic"][data-theme-member="active"] .theme-member-aura::before {
    animation: member-aura-depth 8.6s ease-in-out infinite alternate;
}

body[data-theme-effects="dynamic"][data-theme-member="active"] .theme-member-mote {
    animation: member-aura-mote 4.8s ease-in-out infinite alternate;
}

body[data-theme-effects="dynamic"][data-theme-member="active"] .theme-member-mote:nth-of-type(2n) {
    animation-delay: -1.7s;
}

@keyframes member-aura-breathe {
    from { opacity: .56; transform: rotate(-18deg) scale(.97); }
    to { opacity: .9; transform: rotate(-14deg) scale(1.03); }
}

@keyframes member-aura-float {
    from { transform: var(--member-glyph-transform) translateY(2px); }
    to { transform: var(--member-glyph-transform) translateY(-4px); }
}

@keyframes member-aura-depth {
    from { opacity: .22; transform: translate3d(0, 5px, 0) scale(.94) rotate(-2deg); }
    to { opacity: .42; transform: translate3d(-8px, -7px, 0) scale(1.04) rotate(2deg); }
}

@keyframes member-aura-mote {
    from { opacity: .34; translate: 0 3px; }
    to { opacity: .9; translate: 0 -5px; }
}

.ai-ball-art {
    display: block;
    width: 64px;
    height: 64px;
    overflow: visible;
    pointer-events: none;
    transform-origin: 50% 50%;
    transition: transform var(--motion-fast) var(--ease-out);
    filter: drop-shadow(0 3px 6px color-mix(in srgb, var(--primary) 34%, transparent));
}

body[data-theme] #ai-ball {
    isolation: isolate;
    background: transparent;
    box-shadow: none;
}

body[data-theme] #ai-ball::before,
body[data-theme] #ai-ball::after {
    content: "";
    position: absolute;
    inset: -7px;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--motion-fast) ease, transform var(--motion-base) var(--ease-out);
}

body[data-theme] #ai-ball[data-ornament-tier="echo"]::before {
    opacity: .44;
    border: 1px solid color-mix(in srgb, var(--primary) 48%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 6%, transparent);
    transform: rotate(-9deg) scaleX(1.045);
}

body[data-theme] #ai-ball[data-ornament-tier="echo"]::after {
    inset: -3px;
    opacity: .62;
    background:
        radial-gradient(circle at 88% 21%, var(--accent) 0 1.5px, transparent 2.1px),
        radial-gradient(circle at 12% 78%, var(--primary) 0 1.25px, transparent 1.9px);
    filter: drop-shadow(0 0 3px color-mix(in srgb, var(--primary) 24%, transparent));
}

body[data-theme] #ai-ball[data-ornament-tier="archive"]::before {
    opacity: .72;
    border: 1.5px solid color-mix(in srgb, var(--primary) 58%, transparent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 8%, transparent);
    transform: rotate(-12deg) scaleX(1.08);
}

body[data-theme] #ai-ball[data-ornament-tier="archive"]::after {
    inset: -5px;
    opacity: .92;
    background:
        radial-gradient(circle at 50% 0, var(--accent) 0 2px, transparent 2.6px),
        radial-gradient(circle at 96% 68%, var(--secondary) 0 2px, transparent 2.6px),
        radial-gradient(circle at 10% 82%, var(--primary) 0 2px, transparent 2.6px);
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--primary) 36%, transparent));
}

body[data-theme] #ai-ball[data-ornament-tier="member"]::before {
    opacity: .95;
    border-color: color-mix(in srgb, var(--accent) 68%, #fff 20%);
    background:
        conic-gradient(from 150deg,
            transparent 0 18%,
            color-mix(in srgb, var(--accent) 42%, transparent) 24% 30%,
            transparent 36% 58%,
            color-mix(in srgb, var(--primary) 38%, transparent) 64% 70%,
            transparent 78% 100%);
    box-shadow:
        0 0 0 5px color-mix(in srgb, var(--accent) 10%, transparent),
        0 0 18px color-mix(in srgb, var(--accent) 24%, transparent);
    transform: rotate(-14deg) scaleX(1.1);
}

body[data-theme] #ai-ball[data-ornament-tier="member"]::after {
    inset: -8px;
    opacity: 1;
    background:
        radial-gradient(circle at 50% -1px, #fff 0 1.7px, transparent 2.3px),
        radial-gradient(circle at 87% 20%, var(--accent) 0 2px, transparent 2.7px),
        radial-gradient(circle at 103% 65%, var(--secondary) 0 2px, transparent 2.7px),
        radial-gradient(circle at 15% 88%, var(--primary) 0 2px, transparent 2.7px);
    filter: drop-shadow(0 0 7px color-mix(in srgb, var(--accent) 42%, transparent));
}

/* 星轨会员典藏：双层星河轨迹与独立星徽，视觉强度明确高于签到里程碑。 */
body[data-theme="startrail"] #ai-ball[data-ornament-tier="member"]::before {
    inset: -10px;
    opacity: 1;
    border: 1.5px solid rgba(255, 231, 163, .9);
    border-radius: 48% 52% 46% 54%;
    background:
        radial-gradient(circle at 16% 24%, #fff8d7 0 2px, transparent 2.7px),
        radial-gradient(circle at 83% 18%, #7de1ff 0 2.2px, transparent 2.9px),
        radial-gradient(circle at 91% 77%, #d6b8ff 0 2px, transparent 2.7px),
        conic-gradient(from 125deg, transparent 0 12%, rgba(255, 211, 103, .82) 15% 19%, transparent 22% 45%, rgba(102, 220, 255, .74) 49% 54%, transparent 58% 78%, rgba(188, 142, 255, .78) 82% 87%, transparent 91%);
    box-shadow:
        0 0 0 3px rgba(125, 205, 255, .13),
        0 0 21px rgba(134, 107, 255, .34),
        inset 0 0 10px rgba(255, 239, 183, .22);
    transform: rotate(-8deg) scaleX(1.08);
}

body[data-theme="startrail"] #ai-ball[data-ornament-tier="member"]::after {
    inset: auto -7px -6px auto;
    z-index: 1;
    width: 20px;
    height: 20px;
    opacity: 1;
    border: 1px solid rgba(255, 243, 201, .9);
    border-radius: 42% 58% 46% 54%;
    background:
        radial-gradient(circle at 50% 50%, #fff9dc 0 14%, #ffd56d 17% 34%, transparent 36%),
        conic-gradient(from 0deg, transparent 0 8%, #ffe692 9% 16%, transparent 17% 33%, #ffe692 34% 41%, transparent 42% 58%, #ffe692 59% 66%, transparent 67% 83%, #ffe692 84% 91%, transparent 92%);
    box-shadow: 0 0 10px rgba(255, 211, 96, .58), 0 3px 8px rgba(49, 34, 103, .26);
    filter: none;
    transform: rotate(9deg);
}

/* 签到装饰循序渐进：七日有主题微光，三十日形成完整印记，会员再进入动态典藏层。 */
body[data-theme="startrail"] #ai-ball[data-ornament-tier="echo"]::after {
    background:
        radial-gradient(circle at 88% 20%, #ffe7a1 0 1.6px, transparent 2.2px),
        radial-gradient(circle at 12% 78%, #80dcff 0 1.35px, transparent 2px);
}

body[data-theme="startrail"] #ai-ball[data-ornament-tier="archive"]::after {
    background:
        radial-gradient(circle at 50% -1px, #fff5c9 0 1.8px, transparent 2.4px),
        radial-gradient(circle at 89% 20%, #f5c968 0 2px, transparent 2.7px),
        radial-gradient(circle at 98% 68%, #85dcff 0 1.8px, transparent 2.5px),
        radial-gradient(circle at 13% 84%, #bd9dff 0 1.8px, transparent 2.5px);
}

body[data-theme="cute"] #ai-ball[data-ornament-tier="echo"]::after {
    background:
        radial-gradient(ellipse at 89% 22%, #f2a982 0 1.8px, transparent 2.5px),
        radial-gradient(ellipse at 11% 79%, #f4cad3 0 1.5px, transparent 2.2px);
}

body[data-theme="cute"] #ai-ball[data-ornament-tier="archive"]::after {
    background:
        radial-gradient(ellipse at 50% 0, #fff0dd 0 2px, transparent 2.7px),
        radial-gradient(ellipse at 91% 25%, #e9a47d 0 2px, transparent 2.7px),
        radial-gradient(ellipse at 9% 82%, #eec3cf 0 2px, transparent 2.7px);
}

body[data-theme="doggo"] #ai-ball[data-ornament-tier="echo"]::after {
    background:
        radial-gradient(circle at 89% 22%, #e6a34e 0 1.7px, transparent 2.4px),
        radial-gradient(circle at 10% 79%, #80bdf0 0 1.45px, transparent 2.1px);
}

body[data-theme="doggo"] #ai-ball[data-ornament-tier="archive"]::after {
    background:
        radial-gradient(circle at 50% 0, #fff1c8 0 2px, transparent 2.7px),
        radial-gradient(circle at 90% 24%, #e6a34e 0 2px, transparent 2.7px),
        radial-gradient(circle at 9% 82%, #80bdf0 0 2px, transparent 2.7px);
}

/* 猫猫会员装饰：奶油玫瑰金的柔软轮廓配一枚小爪印，不复用生硬科技环。 */
body[data-theme="cute"] #ai-ball[data-ornament-tier="member"]::before {
    inset: -6px;
    opacity: .98;
    border: 2px solid rgba(126, 68, 51, .72);
    border-radius: 46% 54% 49% 51% / 52% 48% 54% 46%;
    background:
        conic-gradient(from 210deg,
            rgba(255, 244, 222, .94),
            rgba(255, 184, 116, .78) 24%,
            rgba(255, 215, 205, .88) 50%,
            rgba(201, 145, 94, .76) 74%,
            rgba(255, 244, 222, .94));
    box-shadow:
        0 0 0 3px rgba(255, 246, 230, .78),
        0 3px 8px rgba(126, 68, 51, .2);
    transform: none;
}

body[data-theme="cute"] #ai-ball[data-ornament-tier="member"]::after {
    inset: auto -6px -5px auto;
    z-index: 1;
    width: 19px;
    height: 17px;
    opacity: 1;
    border: 1px solid rgba(126, 68, 51, .34);
    border-radius: 48% 48% 52% 52%;
    background:
        radial-gradient(ellipse at 50% 69%, #8b4c3d 0 27%, transparent 29%),
        radial-gradient(circle at 23% 28%, #8b4c3d 0 10%, transparent 12%),
        radial-gradient(circle at 50% 18%, #8b4c3d 0 11%, transparent 13%),
        radial-gradient(circle at 77% 28%, #8b4c3d 0 10%, transparent 12%),
        linear-gradient(145deg, #fff8e9, #ffd9c9);
    box-shadow:
        0 0 0 2px rgba(255, 247, 231, .9),
        0 3px 7px rgba(126, 68, 51, .24);
    filter: none;
    transform: rotate(10deg);
}

/* 森、海、樱使用散落式主题点缀，避免统一圆环把自然造型框成徽章。 */
body:is([data-theme="mint"], [data-theme="rainy"], [data-theme="morandi"]) #ai-ball:not([data-ornament-tier="origin"])::before {
    opacity: 0;
    border: 0;
    background: none;
    box-shadow: none;
    transform: none;
    animation: none;
}

body[data-theme="mint"] #ai-ball:not([data-ornament-tier="origin"])::after {
    inset: -5px;
    opacity: .92;
    border-radius: 0;
    background:
        radial-gradient(ellipse at 9% 69%, var(--primary) 0 2px, transparent 2.7px),
        radial-gradient(circle at 90% 17%, #fff 0 1.7px, transparent 2.3px),
        radial-gradient(circle at 101% 62%, var(--accent) 0 1.8px, transparent 2.5px);
    filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--primary) 28%, transparent));
}

body[data-theme="mint"] #ai-ball[data-ornament-tier="echo"]::after {
    opacity: .58;
    transform: scale(.9);
}

body[data-theme="mint"] #ai-ball[data-ornament-tier="archive"]::after {
    opacity: .86;
    background:
        radial-gradient(ellipse at 8% 72%, #43b98f 0 2.4px, transparent 3px),
        radial-gradient(ellipse at 91% 17%, #b8f0d6 0 2.2px, transparent 2.9px),
        radial-gradient(circle at 101% 62%, #f2fff9 0 1.7px, transparent 2.4px),
        radial-gradient(circle at 44% -2%, #78d8af 0 1.55px, transparent 2.2px);
}

body[data-theme="rainy"] #ai-ball:not([data-ornament-tier="origin"])::after {
    inset: -5px;
    opacity: .94;
    border-radius: 0;
    background:
        radial-gradient(circle at 4% 69%, #f5fdff 0 2.1px, transparent 2.8px),
        radial-gradient(circle at 92% 20%, var(--secondary) 0 2px, transparent 2.7px),
        radial-gradient(circle at 103% 61%, #f5fdff 0 1.35px, transparent 2px);
    filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--secondary) 30%, transparent));
}

body[data-theme="rainy"] #ai-ball[data-ornament-tier="echo"]::after {
    opacity: .6;
    transform: scale(.9);
}

body[data-theme="rainy"] #ai-ball[data-ornament-tier="archive"]::after {
    opacity: .9;
    background:
        radial-gradient(circle at 4% 70%, #f5fdff 0 2.3px, transparent 3px),
        radial-gradient(circle at 91% 18%, #88dbef 0 2.2px, transparent 2.9px),
        radial-gradient(circle at 102% 61%, #b5a7f2 0 1.9px, transparent 2.6px),
        radial-gradient(circle at 47% -2%, #ffffff 0 1.5px, transparent 2.2px);
}

body[data-theme="morandi"] #ai-ball:not([data-ornament-tier="origin"])::after {
    inset: -5px;
    opacity: .9;
    border-radius: 0;
    background:
        radial-gradient(ellipse at 7% 72%, var(--primary) 0 2.4px, transparent 3px),
        radial-gradient(ellipse at 89% 15%, var(--secondary) 0 2.1px, transparent 2.8px),
        radial-gradient(circle at 102% 65%, var(--accent) 0 1.6px, transparent 2.2px);
    filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--primary) 24%, transparent));
}

body[data-theme="morandi"] #ai-ball[data-ornament-tier="echo"]::after {
    opacity: .56;
    transform: scale(.9) rotate(-3deg);
}

body[data-theme="morandi"] #ai-ball[data-ornament-tier="archive"]::after {
    opacity: .88;
    background:
        radial-gradient(ellipse at 7% 72%, #b4657d 0 2.5px, transparent 3.2px),
        radial-gradient(ellipse at 89% 15%, #efb4c2 0 2.2px, transparent 2.9px),
        radial-gradient(ellipse at 102% 65%, #f7dfd3 0 1.8px, transparent 2.5px),
        radial-gradient(ellipse at 45% -1%, #cf8298 0 1.6px, transparent 2.3px);
}

body[data-theme] #ai-ball-icon {
    display: none;
}

.ai-ball-shape {
    display: none;
}

body[data-theme="startrail"] .ai-ball-shape-startrail,
body[data-theme="cute"] .ai-ball-shape-cute,
body[data-theme="doggo"] .ai-ball-shape-doggo,
body[data-theme="mint"] .ai-ball-shape-mint,
body[data-theme="rainy"] .ai-ball-shape-rainy,
body[data-theme="morandi"] .ai-ball-shape-morandi {
    display: block;
}

/* 会员悬浮入口：六套主题各有自己的生命感，只在完整动态档启用。 */
.ai-ball-startrail-orbit,
.ai-ball-startrail-core,
.ai-ball-startrail-moon,
.ai-ball-cat-frame,
.ai-ball-dog-eyes,
.ai-ball-dog-ear,
.ai-ball-dog-tongue,
.ai-ball-mint-leaf,
.ai-ball-mint-dew,
.ai-ball-rain-drop,
.ai-ball-rain-ripple,
.ai-ball-rain-glint,
.ai-ball-sea-crest,
.ai-ball-sea-foam,
.ai-ball-morandi-petals,
.ai-ball-morandi-falling-petal {
    transform-box: fill-box;
    transform-origin: center;
}

.ai-ball-cat-frame-blink {
    opacity: 0;
}

body[data-theme-member="active"][data-theme-ornament-tier="member"][data-theme-effects="dynamic"] #ai-ball:not(.dragging)::before {
    animation: member-ball-halo 6.8s linear infinite;
}

body[data-theme-member="active"][data-theme-ornament-tier="member"][data-theme-effects="dynamic"] #ai-ball:not(.dragging)::after {
    animation: member-ball-spark 3.6s ease-in-out infinite alternate;
}

body[data-theme="cute"][data-theme-member="active"][data-theme-ornament-tier="member"][data-theme-effects="dynamic"] #ai-ball:not(.dragging)::before {
    animation: member-cat-halo-breathe 3.8s ease-in-out infinite;
}

body[data-theme="cute"][data-theme-member="active"][data-theme-ornament-tier="member"][data-theme-effects="dynamic"] #ai-ball:not(.dragging)::after {
    animation: member-cat-paw-breathe 3.8s ease-in-out infinite;
}

body[data-theme="startrail"][data-theme-member="active"][data-theme-ornament-tier="member"][data-theme-effects="dynamic"] #ai-ball:not(.dragging) .ai-ball-startrail-orbit {
    animation: member-startrail-orbit 5.4s linear infinite;
}

body[data-theme="startrail"][data-theme-member="active"][data-theme-ornament-tier="member"][data-theme-effects="dynamic"] #ai-ball:not(.dragging) .ai-ball-startrail-core {
    animation: member-startrail-core 2.8s ease-in-out infinite alternate;
}

body[data-theme="startrail"][data-theme-member="active"][data-theme-ornament-tier="member"][data-theme-effects="dynamic"] #ai-ball:not(.dragging) .ai-ball-startrail-moon {
    animation: member-startrail-moon 3.2s ease-in-out infinite alternate;
}

body[data-theme="cute"][data-theme-member="active"][data-theme-ornament-tier="member"][data-theme-effects="dynamic"] #ai-ball:not(.dragging) .ai-ball-shape-cute {
    transform-origin: 50% 75%;
    animation: member-cat-idle 3.8s ease-in-out infinite;
}

body[data-theme="cute"][data-theme-member="active"][data-theme-ornament-tier="member"][data-theme-effects="dynamic"] #ai-ball:not(.dragging) .ai-ball-cat-frame-open {
    animation: member-cat-blink 5.6s ease-in-out infinite;
}

body[data-theme="cute"][data-theme-member="active"][data-theme-ornament-tier="member"][data-theme-effects="dynamic"] #ai-ball:not(.dragging) .ai-ball-cat-frame-blink {
    animation: member-cat-blink-closed 5.6s ease-in-out infinite;
}

body[data-theme="doggo"][data-theme-member="active"][data-theme-ornament-tier="member"][data-theme-effects="dynamic"] #ai-ball:not(.dragging) .ai-ball-shape-doggo {
    transform-origin: 50% 78%;
    animation: member-dog-nod 3.2s ease-in-out infinite;
}

body[data-theme="doggo"][data-theme-member="active"][data-theme-ornament-tier="member"][data-theme-effects="dynamic"] #ai-ball:not(.dragging) .ai-ball-dog-ear {
    transform-origin: 50% 10%;
    animation: member-dog-ear-sway 2.6s ease-in-out infinite alternate;
}

body[data-theme="doggo"][data-theme-member="active"][data-theme-ornament-tier="member"][data-theme-effects="dynamic"] #ai-ball:not(.dragging) .ai-ball-dog-eyes {
    animation: member-dog-eye-play 6.4s var(--ease-out) infinite;
}

body[data-theme="doggo"][data-theme-member="active"][data-theme-ornament-tier="member"][data-theme-effects="dynamic"] #ai-ball:not(.dragging) .ai-ball-dog-tongue {
    transform-origin: 50% 0;
    animation: member-dog-tongue 2.2s ease-in-out infinite alternate;
}

body[data-theme="mint"][data-theme-member="active"][data-theme-ornament-tier="member"][data-theme-effects="dynamic"] #ai-ball:not(.dragging) .ai-ball-mint-leaf {
    transform-origin: 50% 100%;
    animation: member-mint-leaf-unfurl 4.2s ease-in-out infinite alternate;
}

body[data-theme="mint"][data-theme-member="active"][data-theme-ornament-tier="member"][data-theme-effects="dynamic"] #ai-ball:not(.dragging) .ai-ball-mint-leaf-right {
    animation-delay: -2.1s;
}

body[data-theme="mint"][data-theme-member="active"][data-theme-ornament-tier="member"][data-theme-effects="dynamic"] #ai-ball:not(.dragging) .ai-ball-mint-dew {
    animation: member-mint-dew 2.8s ease-in-out infinite alternate;
}

body[data-theme="rainy"][data-theme-member="active"][data-theme-ornament-tier="member"][data-theme-effects="dynamic"] #ai-ball:not(.dragging) .ai-ball-rain-drop {
    transform-origin: 50% 90%;
    animation: member-rain-drop 3.8s ease-in-out infinite;
}

body[data-theme="rainy"][data-theme-member="active"][data-theme-ornament-tier="member"][data-theme-effects="dynamic"] #ai-ball:not(.dragging) .ai-ball-rain-ripple {
    transform-origin: 50% 50%;
    animation: member-rain-ripple 3.8s ease-out infinite;
}

body[data-theme="rainy"][data-theme-member="active"][data-theme-ornament-tier="member"][data-theme-effects="dynamic"] #ai-ball:not(.dragging) .ai-ball-rain-glint {
    animation: member-rain-glint 2.4s ease-in-out infinite alternate;
}

body[data-theme="rainy"][data-theme-member="active"][data-theme-ornament-tier="member"][data-theme-effects="dynamic"] #ai-ball:not(.dragging) :is(.ai-ball-sea-crest, .ai-ball-sea-foam) {
    animation: member-sea-foam 3.1s ease-in-out infinite alternate;
}

body[data-theme="morandi"][data-theme-member="active"][data-theme-ornament-tier="member"][data-theme-effects="dynamic"] #ai-ball:not(.dragging) .ai-ball-morandi-petals {
    transform-origin: 50% 50%;
    animation: member-morandi-petal-drift 8.6s ease-in-out infinite;
}

body[data-theme="morandi"][data-theme-member="active"][data-theme-ornament-tier="member"][data-theme-effects="dynamic"] #ai-ball:not(.dragging) .ai-ball-morandi-falling-petal {
    animation: member-morandi-falling-petal 4.8s var(--ease-out) infinite;
}

#ai-ball.dragging .ai-ball-art,
#ai-ball.dragging .ai-ball-art *,
#ai-ball:active .ai-ball-art,
#ai-ball:active .ai-ball-art * {
    animation-play-state: paused !important;
}

@keyframes member-ball-halo {
    from { rotate: 0deg; }
    to { rotate: 360deg; }
}

@keyframes member-ball-spark {
    from { opacity: .72; transform: scale(.97); }
    to { opacity: 1; transform: scale(1.04); }
}

@keyframes member-startrail-orbit {
    from { transform: rotate(-18deg); }
    to { transform: rotate(342deg); }
}

@keyframes member-startrail-core {
    from { transform: scale(.96) rotate(-2deg); filter: brightness(.94); }
    to { transform: scale(1.04) rotate(2deg); filter: brightness(1.16); }
}

@keyframes member-startrail-moon {
    from { transform: translate3d(-1px, 1px, 0) scale(.86); opacity: .72; }
    to { transform: translate3d(2px, -2px, 0) scale(1.12); opacity: 1; }
}

@keyframes member-cat-idle {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
    50% { transform: translate3d(0, -1.5px, 0) rotate(-1.2deg); }
}

@keyframes member-cat-blink {
    0%, 43%, 47%, 100% { opacity: 1; }
    44%, 46% { opacity: 0; }
}

@keyframes member-cat-blink-closed {
    0%, 43%, 47%, 100% { opacity: 0; }
    44%, 46% { opacity: 1; }
}

@keyframes member-cat-halo-breathe {
    0%, 100% { transform: scale(.98) rotate(-1deg); opacity: .9; }
    50% { transform: scale(1.035) rotate(1deg); opacity: 1; }
}

@keyframes member-cat-paw-breathe {
    0%, 100% { transform: rotate(8deg) scale(.94); }
    50% { transform: rotate(12deg) scale(1.04); }
}

@keyframes member-dog-nod {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
    50% { transform: translate3d(0, 1px, 0) rotate(1deg); }
}

@keyframes member-dog-ear-sway {
    from { transform: rotate(-1.8deg); }
    to { transform: rotate(2.2deg); }
}

@keyframes member-dog-eye-play {
    0%, 36%, 42%, 47%, 52%, 100% { transform: translate3d(0, 0, 0) scaleY(1); }
    18% { transform: translate3d(-.65px, 0, 0) scaleY(1); }
    39% { transform: translate3d(.5px, 0, 0) scaleY(.1); }
    44% { transform: translate3d(.5px, 0, 0) scaleY(.13); }
    72% { transform: translate3d(.65px, 0, 0) scaleY(1); }
}

@keyframes member-dog-tongue {
    from { transform: scaleY(.92); }
    to { transform: scaleY(1.08); }
}

@keyframes member-mint-leaf-unfurl {
    from { transform: rotate(-2deg) scale(.96); filter: brightness(.96); }
    to { transform: rotate(3deg) scale(1.03); filter: brightness(1.1); }
}

@keyframes member-mint-dew {
    from { opacity: .62; transform: translate3d(0, 1px, 0) scale(.88); }
    to { opacity: .96; transform: translate3d(0, -1px, 0) scale(1.08); }
}

@keyframes member-rain-drop {
    0%, 100% { transform: translate3d(0, -1px, 0) scale(.98); }
    50% { transform: translate3d(0, 1px, 0) scale(1.02); }
}

@keyframes member-rain-ripple {
    0%, 38% { transform: scaleX(.72); opacity: .2; }
    70%, 100% { transform: scaleX(1.16); opacity: .92; }
}

@keyframes member-rain-glint {
    from { opacity: .52; transform: scale(.88); }
    to { opacity: .86; transform: scale(1.08); }
}

@keyframes member-sea-foam {
    from { opacity: .7; transform: translate3d(-.5px, .5px, 0) scale(.96); }
    to { opacity: 1; transform: translate3d(1px, -1px, 0) scale(1.04); }
}

@keyframes member-morandi-petal-drift {
    0%, 100% { transform: rotate(-2deg) scale(.98); }
    50% { transform: rotate(5deg) scale(1.025); }
}

@keyframes member-morandi-falling-petal {
    0%, 18% { opacity: .18; transform: translate3d(-2px, -3px, 0) rotate(-8deg) scale(.82); }
    64% { opacity: .9; transform: translate3d(1px, 2px, 0) rotate(9deg) scale(1); }
    100% { opacity: .08; transform: translate3d(4px, 6px, 0) rotate(18deg) scale(.88); }
}

body[data-theme] #ai-ball:active .ai-ball-art {
    transform: scale(.94);
}

body[data-theme="startrail"] #ai-ball:active .ai-ball-art {
    transform: rotate(-5deg) scale(.94);
}

body[data-theme="cute"] #ai-ball:active .ai-ball-art,
body[data-theme="doggo"] #ai-ball:active .ai-ball-art {
    transform: translateY(1px) scale(.94);
}

body[data-theme="mint"] #ai-ball:active .ai-ball-art {
    transform: rotate(5deg) scale(.94);
}

body[data-theme="rainy"] #ai-ball:active .ai-ball-art {
    transform: translateY(2px) scale(.94);
}

body[data-theme="morandi"] #ai-ball:active .ai-ball-art {
    transform: rotate(6deg) scale(.94);
}

/* 清晰实体表面，避免透明层叠导致正文发灰。 */

/*
 * 六境质感层：不增加主题数量，只让每套主题拥有明确的材质和光线。
 * 这一层放在旧兼容规则之后，避免旧主题的装饰覆盖新构图。
 */
body[data-theme] .theme-pattern {
    opacity: .82;
    background-size: 100% 100% !important;
    background-position: center !important;
    isolation: isolate;
    overflow: hidden;
    contain: paint;
}

body[data-theme] .theme-pattern::before,
body[data-theme] .theme-pattern::after {
    content: "";
    position: absolute;
    inset: -12%;
    display: block;
    pointer-events: none;
    opacity: .42 !important;
    background: none;
    mix-blend-mode: normal;
    transform: translate3d(0, 0, 0);
}

body[data-theme="startrail"] .theme-pattern {
    background:
        radial-gradient(circle at 14% 18%, rgba(255,255,255,.58) 0 1px, transparent 1.8px),
        radial-gradient(circle at 78% 12%, rgba(125,211,252,.58) 0 1.2px, transparent 2px),
        radial-gradient(circle at 86% 64%, rgba(216,180,254,.52) 0 1.3px, transparent 2.1px),
        radial-gradient(ellipse at 52% 70%, transparent 0 43%, rgba(167,139,250,.20) 44% 44.8%, transparent 46%),
        radial-gradient(ellipse at 46% 25%, transparent 0 57%, rgba(103,232,249,.16) 58% 58.7%, transparent 60%),
        linear-gradient(145deg, rgba(12,28,58,.08), transparent 42%);
}

body[data-theme="startrail"] .theme-pattern::before {
    background:
        conic-gradient(from 220deg at 68% 44%, transparent 0 24%, rgba(167,139,250,.22) 27% 29%, transparent 33% 64%, rgba(103,232,249,.18) 67% 69%, transparent 74%),
        radial-gradient(ellipse at 76% 35%, rgba(96,165,250,.20), transparent 52%);
    opacity: .58 !important;
    filter: blur(2px);
}

body[data-theme="startrail"] .theme-pattern::after {
    background:
        radial-gradient(circle at 22% 76%, rgba(247,200,115,.28) 0 2px, transparent 3px),
        radial-gradient(circle at 71% 22%, rgba(216,180,254,.36) 0 2px, transparent 3px),
        radial-gradient(circle at 45% 48%, rgba(125,211,252,.30) 0 1px, transparent 2px);
    opacity: .62 !important;
    filter: blur(.3px);
}

body[data-theme="cute"] .theme-pattern {
    background:
        radial-gradient(circle at 15% 18%, rgba(255,255,255,.86) 0 32px, transparent 33px),
        radial-gradient(circle at 90% 78%, rgba(255,196,215,.36) 0 72px, transparent 73px),
        radial-gradient(circle at 70% 16%, rgba(196,181,253,.22) 0 46px, transparent 47px),
        linear-gradient(145deg, rgba(255,255,255,.34), transparent 48%);
}

body[data-theme="cute"] .theme-pattern::before {
    background:
        radial-gradient(ellipse at 19% 19%, transparent 0 18px, rgba(201,60,107,.18) 19px 20px, transparent 21px),
        radial-gradient(ellipse at 84% 74%, transparent 0 25px, rgba(113,87,166,.13) 26px 27px, transparent 28px),
        radial-gradient(circle at 30% 72%, rgba(255,255,255,.62), transparent 28%);
    opacity: .7 !important;
}

body[data-theme="cute"] .theme-pattern::after {
    background:
        radial-gradient(circle at 22% 20%, rgba(201,60,107,.34) 0 2px, transparent 3px),
        radial-gradient(circle at 27% 17%, rgba(201,60,107,.26) 0 1.5px, transparent 2.4px),
        radial-gradient(circle at 17% 17%, rgba(201,60,107,.26) 0 1.5px, transparent 2.4px),
        radial-gradient(circle at 78% 84%, rgba(113,87,166,.26) 0 2px, transparent 3px);
    opacity: .72 !important;
}

body[data-theme="doggo"] .theme-pattern {
    background:
        radial-gradient(circle at 86% 12%, rgba(255,219,145,.44) 0 84px, transparent 85px),
        radial-gradient(circle at 8% 82%, rgba(180,83,9,.16) 0 74px, transparent 75px),
        radial-gradient(circle at 42% 44%, rgba(255,255,255,.62) 0 58px, transparent 59px),
        linear-gradient(160deg, rgba(255,255,255,.28), transparent 54%);
}

body[data-theme="doggo"] .theme-pattern::before {
    background:
        radial-gradient(circle at 17% 72%, rgba(180,83,9,.36) 0 4px, transparent 5px),
        radial-gradient(circle at 12% 66%, rgba(180,83,9,.25) 0 2.6px, transparent 3.5px),
        radial-gradient(circle at 23% 66%, rgba(180,83,9,.25) 0 2.6px, transparent 3.5px),
        radial-gradient(ellipse at 64% 92%, rgba(37,99,169,.18), transparent 46%);
    opacity: .72 !important;
}

body[data-theme="doggo"] .theme-pattern::after {
    background:
        radial-gradient(circle at 78% 26%, rgba(37,99,169,.24) 0 2px, transparent 3px),
        radial-gradient(circle at 82% 30%, rgba(37,99,169,.18) 0 1.4px, transparent 2.3px),
        radial-gradient(circle at 74% 30%, rgba(37,99,169,.18) 0 1.4px, transparent 2.3px);
    opacity: .65 !important;
}

body[data-theme="mint"] .theme-pattern {
    background:
        radial-gradient(ellipse at 8% 18%, rgba(15,118,110,.18) 0 86px, transparent 87px),
        radial-gradient(ellipse at 92% 72%, rgba(58,125,68,.16) 0 116px, transparent 117px),
        radial-gradient(ellipse at 54% 46%, rgba(255,255,255,.58), transparent 56%),
        linear-gradient(135deg, rgba(218,245,233,.42), transparent 48%);
}

body[data-theme="mint"] .theme-pattern::before {
    background:
        radial-gradient(ellipse at 24% 74%, transparent 0 30px, rgba(15,118,110,.13) 31px 32px, transparent 34px),
        radial-gradient(ellipse at 70% 23%, transparent 0 44px, rgba(58,125,68,.10) 45px 46px, transparent 48px);
    opacity: .72 !important;
}

body[data-theme="mint"] .theme-pattern::after {
    background:
        radial-gradient(circle at 14% 22%, rgba(15,118,110,.25) 0 2px, transparent 3px),
        radial-gradient(circle at 76% 70%, rgba(58,125,68,.22) 0 2px, transparent 3px),
        radial-gradient(circle at 64% 18%, rgba(255,255,255,.56) 0 2px, transparent 3px);
    opacity: .62 !important;
}

body[data-theme="rainy"] .theme-pattern {
    background:
        radial-gradient(circle at 15% 16%, transparent 0 32px, rgba(3,107,131,.16) 33px 34px, transparent 36px),
        radial-gradient(circle at 88% 64%, transparent 0 58px, rgba(65,105,161,.13) 59px 60px, transparent 62px),
        radial-gradient(circle at 72% 12%, rgba(255,255,255,.62) 0 20px, transparent 21px),
        linear-gradient(118deg, rgba(125,211,252,.12), transparent 46%);
}

body[data-theme="rainy"] .theme-pattern::before {
    background:
        radial-gradient(ellipse at 48% 48%, transparent 0 24%, rgba(3,107,131,.15) 25% 25.7%, transparent 27% 42%, rgba(65,105,161,.10) 43% 43.7%, transparent 45%),
        linear-gradient(114deg, transparent 0 48%, rgba(255,255,255,.20) 49% 49.4%, transparent 50% 100%);
    opacity: .78 !important;
}

body[data-theme="rainy"] .theme-pattern::after {
    background:
        radial-gradient(circle at 26% 72%, rgba(255,255,255,.48) 0 2px, transparent 3px),
        radial-gradient(circle at 62% 28%, rgba(125,211,252,.38) 0 2px, transparent 3px),
        radial-gradient(circle at 83% 84%, rgba(3,107,131,.22) 0 2px, transparent 3px);
    opacity: .65 !important;
}

body[data-theme="morandi"] .theme-pattern {
    background:
        radial-gradient(ellipse at 8% 12%, rgba(143,79,101,.16) 0 102px, transparent 103px),
        radial-gradient(ellipse at 94% 78%, rgba(95,104,120,.14) 0 128px, transparent 129px),
        radial-gradient(ellipse at 54% 48%, rgba(255,255,255,.55), transparent 54%),
        linear-gradient(145deg, rgba(255,225,214,.18), transparent 52%);
}

body[data-theme="morandi"] .theme-pattern::before {
    background:
        radial-gradient(ellipse at 66% 22%, transparent 0 27px, rgba(143,79,101,.14) 28px 29px, transparent 31px),
        radial-gradient(ellipse at 30% 78%, transparent 0 42px, rgba(95,104,120,.10) 43px 44px, transparent 46px);
    opacity: .78 !important;
    filter: blur(.6px);
}

body[data-theme="morandi"] .theme-pattern::after {
    background:
        radial-gradient(circle at 71% 20%, rgba(255,213,190,.52) 0 3px, transparent 4px),
        radial-gradient(circle at 76% 16%, rgba(143,79,101,.24) 0 2px, transparent 3px),
        radial-gradient(circle at 66% 16%, rgba(143,79,101,.24) 0 2px, transparent 3px),
        radial-gradient(circle at 18% 66%, rgba(95,104,120,.20) 0 2px, transparent 3px);
    opacity: .68 !important;
}

body[data-theme-effects="dynamic"] .theme-pattern::before {
    animation: dd-theme-atmosphere-drift 15s var(--ease-out) infinite alternate;
    will-change: transform;
}

body[data-theme-effects="dynamic"] .theme-pattern::after {
    animation: dd-theme-atmosphere-glint 5.6s ease-in-out infinite alternate;
    will-change: transform;
}

body[data-theme-effects="gentle"] .theme-pattern::before {
    animation: dd-theme-atmosphere-drift 26s var(--ease-out) infinite alternate;
    will-change: transform;
}

body[data-theme-effects="gentle"] .theme-pattern::after {
    animation: dd-theme-atmosphere-glint 10s ease-in-out infinite alternate;
    will-change: transform;
}

body[data-theme-effects="still"] .theme-pattern::before,
body[data-theme-effects="still"] .theme-pattern::after {
    animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
    body[data-theme] .theme-pattern::before,
    body[data-theme] .theme-pattern::after {
        animation: none !important;
    }
}

@keyframes dd-theme-atmosphere-drift {
    from { transform: translate3d(-1.5%, 1%, 0) scale(.99) rotate(-.4deg); }
    to { transform: translate3d(1.5%, -1%, 0) scale(1.025) rotate(.4deg); }
}

@keyframes dd-theme-atmosphere-glint {
    from { transform: translate3d(0, 0, 0) scale(.98); }
    to { transform: translate3d(0, -.5%, 0) scale(1.02); }
}
.card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.membership-checkin-record {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
    line-height: 1.45;
}

#membershipTotalText {
    color: var(--text-secondary);
    font-size: .9em;
}

.btn-primary,
body[data-theme="startrail"] .btn-primary {
    min-height: var(--touch-min);
    border: 0;
    border-radius: var(--radius-md);
    color: var(--on-primary);
    background: var(--primary);
    box-shadow: none;
    transition: transform var(--motion-fast) var(--ease-out), filter var(--motion-fast) ease;
}

.btn-primary:active {
    transform: scale(.98);
    filter: brightness(.94);
}

.input,
.picker-field,
.dd-select-trigger {
    min-height: var(--touch-min);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    box-shadow: none;
}

.app-logo,
body[data-theme] .app-logo {
    color: var(--primary);
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: currentColor;
    text-shadow: none;
    letter-spacing: .12em;
    animation: none;
}

.bottom-nav {
    z-index: var(--z-nav);
    background: var(--nav-bg);
    border-top: 1px solid var(--border);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.nav-item {
    min-width: var(--touch-min);
    min-height: var(--touch-min);
    border-radius: var(--radius-md);
    transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease, transform var(--motion-fast) var(--ease-out);
}

.nav-item.active {
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    box-shadow: none;
}

.page.active {
    animation: dd-page-enter var(--motion-base) var(--ease-out) both;
}

@keyframes dd-page-enter {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

#theme-splash #splash-content {
    animation: none !important;
}

/* 启动状态反馈：图标轻快起跳两次，明确表示应用正在进入。 */
#theme-splash .splash-theme-icon {
    display: block;
    transform-origin: 50% 100%;
    animation: dd-splash-double-hop 980ms both;
}

#theme-splash .splash-theme-label {
    opacity: 0;
    animation: dd-splash-label-enter 360ms var(--ease-out) 360ms both;
}

@keyframes dd-splash-double-hop {
    0% { transform: translate3d(0, 0, 0) scale(1); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
    7% { transform: translate3d(0, 1px, 0) scale(1.06, .94); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
    24% { transform: translate3d(0, -20px, 0) scale(.98, 1.02); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
    38% { transform: translate3d(0, 0, 0) scale(1.04, .96); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
    46% { transform: translate3d(0, 1px, 0) scale(1.04, .96); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
    61% { transform: translate3d(0, -11px, 0) scale(.99, 1.01); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
    74% { transform: translate3d(0, 0, 0) scale(1.02, .98); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
    84%, 100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes dd-splash-label-enter {
    from { opacity: 0; transform: translate3d(0, 6px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

#theme-transition {
    z-index: calc(var(--z-sheet) + 10);
}

/* 记账完成时的一次主题反馈：观赏性来自主题构图，不使用常驻装饰动画。 */
.theme-moment {
    position: fixed;
    top: calc(15% + 62px);
    left: 50%;
    z-index: calc(var(--z-toast) - 1);
    width: min(82vw, 312px);
    min-height: 72px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--text);
    background: var(--surface-raised);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -10px) scale(.97);
    transition:
        opacity var(--motion-fast) ease-in,
        transform var(--motion-fast) ease-in,
        visibility 0s linear var(--motion-fast);
}

.theme-moment.is-visible {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
    transition:
        opacity var(--motion-base) var(--ease-out),
        transform var(--motion-base) var(--ease-out),
        visibility 0s linear 0s;
}

.theme-moment.is-visible.is-leaving {
    opacity: 0;
    transform: translate(-50%, -6px) scale(.99);
    transition:
        opacity var(--motion-fast) ease-in,
        transform var(--motion-fast) ease-in,
        visibility 0s linear var(--motion-fast);
}

/* 主题文学反馈与金额详情同时出现时分区展示，避免两张提示卡互相遮挡。 */
.toast.theme-moment-docked {
    top: auto;
    bottom: calc(174px + env(safe-area-inset-bottom));
    width: min(78vw, 292px);
    padding: 11px 16px;
    line-height: 1.45;
    text-align: center;
    transform: translate(-50%, 16px);
}

.toast.theme-moment-docked.show {
    transform: translate(-50%, 0);
}

.theme-moment-icon {
    position: relative;
    z-index: 2;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 14%, var(--surface));
}

.theme-moment-copy {
    position: relative;
    z-index: 2;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.theme-moment-copy strong {
    color: var(--text);
    font-size: 14px;
    line-height: 1.35;
    text-wrap: pretty;
}

.theme-moment-copy small {
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.45;
    text-wrap: pretty;
}

.theme-moment-motif {
    position: absolute;
    right: -18px;
    width: 104px;
    height: 104px;
    opacity: .42;
    transform: rotate(-10deg) scale(.86);
    transform-origin: center;
}

body[data-theme="startrail"] .theme-moment-motif {
    border: 1px solid color-mix(in srgb, var(--secondary) 62%, transparent);
    border-radius: 50%;
    box-shadow: inset 0 0 0 18px color-mix(in srgb, var(--primary) 8%, transparent);
    transform: rotate(-18deg) scaleY(.48);
}

body[data-theme="cute"] .theme-moment-motif,
body[data-theme="doggo"] .theme-moment-motif {
    background:
        radial-gradient(circle at 30% 35%, var(--primary) 0 6px, transparent 7px),
        radial-gradient(circle at 50% 24%, var(--primary) 0 6px, transparent 7px),
        radial-gradient(circle at 70% 35%, var(--primary) 0 6px, transparent 7px),
        radial-gradient(ellipse at 50% 62%, var(--primary) 0 18px, transparent 19px);
}

body[data-theme="mint"] .theme-moment-motif {
    background:
        radial-gradient(ellipse at 38% 58%, color-mix(in srgb, var(--primary) 78%, transparent) 0 22px, transparent 23px),
        radial-gradient(ellipse at 68% 36%, color-mix(in srgb, var(--secondary) 70%, transparent) 0 18px, transparent 19px);
    transform: rotate(-28deg) scale(.78);
}

body[data-theme="rainy"] .theme-moment-motif {
    border: 1px solid color-mix(in srgb, var(--primary) 58%, transparent);
    border-radius: 50%;
    box-shadow:
        inset 0 0 0 13px color-mix(in srgb, var(--secondary) 7%, transparent),
        inset 0 0 0 28px color-mix(in srgb, var(--primary) 6%, transparent);
    transform: scaleY(.5);
}

body[data-theme="morandi"] .theme-moment-motif {
    background:
        radial-gradient(ellipse at 36% 50%, color-mix(in srgb, var(--primary) 62%, transparent) 0 18px, transparent 19px),
        radial-gradient(ellipse at 64% 50%, color-mix(in srgb, var(--secondary) 48%, transparent) 0 18px, transparent 19px),
        radial-gradient(ellipse at 50% 34%, color-mix(in srgb, var(--accent) 38%, transparent) 0 16px, transparent 17px);
}

body[data-theme-effects="dynamic"] .theme-moment.is-visible .theme-moment-motif {
    animation: dd-theme-motif var(--motion-slow) var(--ease-out) both;
}

body[data-theme-effects="still"] .theme-moment {
    display: none !important;
}

@keyframes dd-theme-motif {
    0% { opacity: 0; filter: saturate(.7); }
    62% { opacity: .68; filter: saturate(1.1); }
    100% { opacity: .42; filter: saturate(1); }
}

/* 外观设置：信息分组清晰，可直接比较六套主题。 */
#themeModal {
    z-index: var(--z-sheet-backdrop);
    padding: 12px;
    background: rgba(7, 16, 31, .58);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

#themeModal .theme-settings-sheet {
    width: min(92vw, 430px);
    max-height: min(84vh, 720px);
    margin: 0;
    padding: 20px;
    overflow: hidden;
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: 0 18px 48px rgba(7, 16, 31, .3);
}

.theme-settings-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    text-align: left;
}

.theme-settings-heading h3 {
    margin: 0;
    color: var(--text);
    font-size: 20px;
    line-height: 1.3;
}

.theme-settings-heading p {
    margin-top: 4px;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.5;
}

.theme-settings-close {
    width: var(--touch-min);
    height: var(--touch-min);
    flex: 0 0 auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    background: var(--surface);
}

#themeModalScroll {
    min-height: 0;
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

details.appearance {
    flex: 0 0 auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: none;
}

details.appearance > summary {
    min-height: var(--touch-min);
    padding: 14px 16px;
}

details.appearance .content {
    padding: 14px;
}

.theme-group-label {
    padding: 0 2px 10px;
    font-size: 11px;
    letter-spacing: .04em;
    line-height: 1.5;
}

.theme-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.theme-choice {
    width: 100%;
    min-width: 0;
    min-height: 98px;
    padding: 12px !important;
    display: grid !important;
    grid-template-columns: 1fr;
    align-content: space-between;
    justify-items: stretch;
    gap: 10px !important;
    border: 1px solid var(--border);
    border-radius: var(--radius-md) !important;
    color: var(--text);
    background: var(--surface-raised);
    box-shadow: none;
    transition: transform var(--motion-fast) var(--ease-out), border-color var(--motion-fast) ease, background-color var(--motion-fast) ease;
}

.theme-choice:active {
    transform: scale(.98);
}

.theme-choice-copy strong {
    color: var(--text);
    font-size: 14px;
    line-height: 1.35;
}

.theme-choice-copy small {
    color: var(--text-secondary);
    font-size: 10px;
    line-height: 1.45;
    opacity: 1;
}

.theme-swatch {
    width: 100%;
    height: 24px;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .1);
}

.theme-choice.active {
    transform: none;
    border-color: var(--primary) !important;
    background: color-mix(in srgb, var(--primary) 9%, var(--surface-raised));
    box-shadow: inset 0 0 0 1px var(--primary);
}

.theme-choice.active::after {
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    color: var(--on-primary);
    background: var(--primary);
    box-shadow: none;
}

.effect-option,
.readability-option {
    min-height: var(--touch-min);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    box-shadow: none;
}

.effect-option.active,
.readability-option.active {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, var(--surface-raised));
    box-shadow: inset 0 0 0 1px var(--primary);
}

.theme-activity-entry {
    min-height: 64px;
    border-top: 1px solid var(--border);
    color: var(--text);
    background: transparent;
    text-align: left;
}

.theme-activity-entry strong,
.theme-activity-entry small {
    display: block;
}

.theme-activity-entry strong {
    font-size: 14px;
    line-height: 1.35;
}

.theme-activity-entry small {
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 500;
    line-height: 1.4;
}

#themeActivityModal {
    z-index: var(--z-sheet-backdrop);
    padding: 12px;
    background: rgba(7, 16, 31, .62);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.theme-activity-sheet {
    width: min(94vw, 460px);
    max-height: min(88vh, 780px);
    margin: 0;
    padding: 18px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 0;
    border-radius: 26px;
    background: var(--surface-raised);
    box-shadow: 0 22px 56px rgba(7, 16, 31, .34);
}

.theme-activity-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
    text-align: left;
}

.theme-activity-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: var(--primary);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .16em;
}

.theme-activity-heading h3 {
    margin: 0;
    color: var(--text);
    font-size: 19px;
    line-height: 1.3;
}

.theme-activity-heading p {
    margin-top: 4px;
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.45;
}

.theme-activity-scroll {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.theme-activity-scroll::-webkit-scrollbar {
    display: none;
}

.theme-activity-preview {
    --activity-a: #a78bfa;
    --activity-b: #67e8f9;
    position: relative;
    min-height: 142px;
    padding: 18px;
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--activity-a) 38%, var(--border));
    border-radius: 22px;
    color: #f8fbff;
    background:
        radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--activity-b) 24%, transparent), transparent 38%),
        linear-gradient(145deg, color-mix(in srgb, var(--activity-a) 28%, #07101f), #0b1730 72%);
}

.theme-activity-preview[data-preview-theme="cute"] { --activity-a: #e7608e; --activity-b: #a78bfa; }
.theme-activity-preview[data-preview-theme="doggo"] { --activity-a: #d97706; --activity-b: #60a5fa; }
.theme-activity-preview[data-preview-theme="mint"] { --activity-a: #0f766e; --activity-b: #6ee7b7; }
.theme-activity-preview[data-preview-theme="rainy"] { --activity-a: #036b83; --activity-b: #7dd3fc; }
.theme-activity-preview[data-preview-theme="morandi"] { --activity-a: #9c5a72; --activity-b: #d8a8b8; }

.theme-activity-preview-mark {
    position: relative;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--activity-b) 52%, transparent);
    border-radius: 24px;
    color: #fff;
    background: linear-gradient(145deg, var(--activity-a), color-mix(in srgb, var(--activity-b) 72%, var(--activity-a)));
    box-shadow: 0 12px 28px color-mix(in srgb, var(--activity-a) 26%, transparent);
}

.theme-activity-preview-mark i {
    font-size: 28px;
}

.theme-activity-preview-ring {
    position: absolute;
    left: 12px;
    top: 28px;
    width: 88px;
    height: 48px;
    border: 1.5px solid color-mix(in srgb, var(--activity-b) 64%, transparent);
    border-radius: 50%;
    opacity: .28;
    transform: rotate(-18deg);
}

.theme-activity-preview[data-preview-tier="echo"] .theme-activity-preview-ring,
.theme-activity-preview[data-preview-tier="archive"] .theme-activity-preview-ring {
    opacity: .86;
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--activity-a) 10%, transparent);
}

.theme-activity-preview[data-preview-tier="archive"] .theme-activity-preview-mark::before,
.theme-activity-preview[data-preview-tier="archive"] .theme-activity-preview-mark::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--activity-b);
    box-shadow: 0 0 10px var(--activity-b);
}

.theme-activity-preview[data-preview-tier="archive"] .theme-activity-preview-mark::before { top: -11px; right: 5px; }
.theme-activity-preview[data-preview-tier="archive"] .theme-activity-preview-mark::after { bottom: -9px; left: -5px; }

.theme-activity-preview-copy {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.theme-activity-preview-copy > span {
    margin-bottom: 6px;
    padding: 4px 8px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    color: #e9efff;
    background: rgba(255, 255, 255, .08);
    font-size: 9px;
    font-weight: 800;
}

.theme-activity-preview-copy strong {
    font-size: 20px;
    line-height: 1.25;
}

.theme-activity-preview-copy small {
    margin-top: 6px;
    color: #d9e2f6;
    font-size: 11px;
    line-height: 1.55;
}

.theme-activity-progress-card {
    margin-top: 10px;
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
}

.theme-activity-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.theme-activity-stats span {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.theme-activity-stats small {
    color: var(--text-secondary);
    font-size: 10px;
}

.theme-activity-stats strong {
    color: var(--text);
    font-size: 13px;
}

.theme-activity-progress-track {
    height: 7px;
    margin-top: 11px;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-secondary) 15%, transparent);
}

.theme-activity-progress-track span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    transition: width var(--motion-base) var(--ease-out);
}

.theme-activity-progress-card p {
    margin-top: 8px;
    color: var(--text-secondary);
    font-size: 10px;
    line-height: 1.45;
}

.theme-activity-section-heading {
    margin: 18px 2px 9px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    text-align: left;
}

.theme-activity-section-heading div strong,
.theme-activity-section-heading div small {
    display: block;
}

.theme-activity-section-heading strong {
    color: var(--text);
    font-size: 13px;
}

.theme-activity-section-heading small,
.theme-activity-section-heading > span {
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: 9px;
}

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

.theme-activity-card {
    --activity-card-a: var(--primary);
    min-width: 0;
    min-height: 74px;
    padding: 10px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    border: 1px solid var(--border);
    border-radius: 16px;
    color: var(--text);
    background: var(--surface);
    text-align: left;
}

.theme-activity-card[data-theme-id="startrail"] { --activity-card-a: #8b5cf6; }
.theme-activity-card[data-theme-id="cute"] { --activity-card-a: #db4d7d; }
.theme-activity-card[data-theme-id="doggo"] { --activity-card-a: #c66a08; }
.theme-activity-card[data-theme-id="mint"] { --activity-card-a: #0f766e; }
.theme-activity-card[data-theme-id="rainy"] { --activity-card-a: #08708a; }
.theme-activity-card[data-theme-id="morandi"] { --activity-card-a: #925269; }

.theme-activity-card > i {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    color: #fff;
    background: var(--activity-card-a);
}

.theme-activity-card span,
.theme-activity-card strong,
.theme-activity-card small {
    min-width: 0;
    display: block;
}

.theme-activity-card strong {
    overflow: hidden;
    font-size: 12px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.theme-activity-card small {
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: 9px;
    line-height: 1.3;
}

.theme-activity-card.active {
    border-color: var(--activity-card-a);
    background: color-mix(in srgb, var(--activity-card-a) 9%, var(--surface));
    box-shadow: inset 0 0 0 1px var(--activity-card-a);
}

.theme-activity-preview-mark img:not([hidden]) {
    position: relative;
    z-index: 1;
    width: 66px;
    height: 66px;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 6px 10px rgba(7, 16, 31, .2));
}

.theme-activity-preview-mark:has(img:not([hidden])) {
    border-color: color-mix(in srgb, var(--activity-b) 42%, rgba(255, 255, 255, .45));
    background: linear-gradient(145deg, rgba(255, 255, 255, .92), color-mix(in srgb, var(--activity-b) 18%, #fffaf2));
}

.theme-activity-mascot-section[hidden] {
    display: none;
}

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

.theme-activity-mascot-card {
    position: relative;
    min-width: 0;
    min-height: 82px;
    padding: 9px;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 17px;
    color: var(--text);
    background: var(--surface);
    text-align: left;
}

.theme-activity-mascot-card > img {
    width: 54px;
    height: 54px;
    display: block;
    object-fit: contain;
    border-radius: 15px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 9%, var(--surface-raised)), var(--surface));
}

.theme-activity-mascot-card > span,
.theme-activity-mascot-card strong,
.theme-activity-mascot-card small {
    min-width: 0;
    display: block;
}

.theme-activity-mascot-card strong {
    overflow: hidden;
    font-size: 11px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.theme-activity-mascot-card small {
    margin-top: 3px;
    display: -webkit-box;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 8px;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.theme-activity-mascot-card > em {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 2px 5px;
    border-radius: 999px;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--surface-raised) 88%, transparent);
    font-size: 7px;
    font-style: normal;
    font-weight: 900;
}

.theme-activity-mascot-card[data-access="member"]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .52;
    background: linear-gradient(118deg, transparent 0 38%, color-mix(in srgb, var(--accent) 16%, transparent) 48%, transparent 58%);
    transform: translateX(-62%);
}

.theme-activity-mascot-card[data-access="member"] > em {
    color: color-mix(in srgb, var(--primary) 78%, var(--text));
    border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
}

.theme-activity-mascot-card[data-selection-state="selected"] {
    border: 2px solid var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 16%, transparent);
}

.theme-activity-mascot-card[data-access="member"][data-selection-state="selected"] {
    border-color: color-mix(in srgb, var(--accent) 68%, var(--primary));
    background:
        radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 36%),
        color-mix(in srgb, var(--primary) 9%, var(--surface));
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent),
        0 7px 18px color-mix(in srgb, var(--primary) 14%, transparent);
}

.theme-activity-mascot-card[data-selection-state="selected"] > em {
    color: var(--primary);
}

.theme-activity-mascot-card[data-selection-state="locked"] {
    border-style: dashed;
    opacity: .7;
}

.theme-activity-mascot-card[data-selection-state="locked"] > img {
    filter: saturate(.45) brightness(.9);
}

.theme-activity-mascot-card[data-selection-state="locked"] > em::before {
    content: "\f023";
    margin-right: 3px;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

.theme-activity-tiers {
    display: grid;
    gap: 8px;
}

.theme-activity-tiers button {
    min-height: var(--touch-min);
    padding: 10px 12px;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(128, 128, 128, .34);
    border-radius: 15px;
    color: var(--text);
    background: rgba(128, 128, 128, .06);
    box-shadow: none;
    text-align: left;
}

.theme-activity-tiers button > i {
    grid-column: 1;
    grid-row: 1 / 3;
    color: var(--text-secondary);
    text-align: center;
}

.theme-activity-tiers button > span {
    grid-column: 2;
    grid-row: 1 / 3;
}

.theme-activity-tiers button span,
.theme-activity-tiers button strong,
.theme-activity-tiers button small {
    display: block;
}

.theme-activity-tiers button strong {
    font-size: 12px;
}

.theme-activity-tiers button small {
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: 9px;
}

.theme-activity-tiers button::before {
    content: "";
    width: 18px;
    height: 18px;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    border: 2px solid rgba(128, 128, 128, .55);
    border-radius: 50%;
    background: transparent;
    box-sizing: border-box;
}

.theme-activity-tiers button::after {
    content: attr(data-status);
    min-width: 48px;
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
    color: var(--text-secondary);
    font-size: 9px;
    font-weight: 800;
    text-align: right;
}

.theme-activity-tiers button[data-selection-state="available"] {
    border-color: rgba(128, 128, 128, .34);
    background: rgba(128, 128, 128, .06);
    box-shadow: none;
}

.theme-activity-tiers button[data-selection-state="available"] > i {
    color: var(--text-secondary);
}

.theme-activity-tiers button[data-selection-state="selected"] {
    padding: 9px 11px;
    border: 2px solid var(--primary);
    background: rgba(128, 128, 128, .10);
    box-shadow: none;
}

.theme-activity-tiers button[data-selection-state="selected"] > i,
.theme-activity-tiers button[data-selection-state="selected"]::after {
    color: var(--primary);
}

.theme-activity-tiers button[data-selection-state="selected"]::before {
    border-color: var(--primary);
    background: radial-gradient(circle, var(--primary) 0 4px, transparent 4.5px);
}

.theme-activity-tiers button[data-selection-state="locked"] {
    border-color: rgba(128, 128, 128, .26);
    border-style: dashed;
    background: rgba(128, 128, 128, .035);
    opacity: .78;
}

.theme-activity-tiers button[data-selection-state="locked"]::before {
    border-color: rgba(128, 128, 128, .36);
}

.theme-activity-apply {
    width: 100%;
    min-height: var(--touch-min);
    margin-top: 14px;
    padding: 12px 16px;
    border-radius: 16px;
    color: var(--on-primary);
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    font-size: 13px;
    font-weight: 900;
}

.theme-activity-apply:disabled {
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--text-secondary) 12%, var(--surface));
    cursor: not-allowed;
}

.theme-activity-note {
    margin: 10px 4px 2px;
    color: var(--text-secondary);
    font-size: 9px;
    line-height: 1.55;
    text-align: center;
}

.theme-activity-note i {
    margin-right: 5px;
    color: var(--primary);
}

.ai-ball-mascot-image {
    display: none;
    pointer-events: none;
    transform-box: fill-box;
    transform-origin: 50% 78%;
}

#ai-ball.has-mascot-image .ai-ball-shape {
    display: none !important;
}

#ai-ball.has-mascot-image .ai-ball-mascot-image {
    display: block;
}

body[data-theme-member="active"][data-theme-ornament-tier="member"][data-theme-effects="dynamic"] #ai-ball.has-mascot-image:not(.dragging) .ai-ball-mascot-image {
    animation: member-mascot-float 3.6s ease-in-out infinite;
}

body[data-theme="startrail"][data-theme-member="active"][data-theme-ornament-tier="member"][data-theme-effects="dynamic"] #ai-ball:not(.dragging)::before {
    animation: member-startrail-mascot-halo 6.4s ease-in-out infinite;
}

body[data-theme="startrail"][data-theme-member="active"][data-theme-ornament-tier="member"][data-theme-effects="dynamic"] #ai-ball:not(.dragging)::after {
    animation: member-startrail-mascot-star 2.8s ease-in-out infinite;
}

body[data-theme="startrail"][data-theme-member="active"][data-theme-ornament-tier="member"][data-theme-effects="dynamic"] #ai-ball.has-mascot-image:not(.dragging) .ai-ball-mascot-image {
    animation: member-startrail-mascot-drift 4.2s ease-in-out infinite;
}

body[data-theme="doggo"] #ai-ball[data-ornament-tier="member"]::before {
    border-color: rgba(255, 239, 210, .88);
    background:
        radial-gradient(circle at 18% 22%, #fff4cf 0 3px, transparent 3.5px),
        radial-gradient(circle at 82% 24%, #8fc5ff 0 3px, transparent 3.5px),
        radial-gradient(circle at 20% 78%, #efad55 0 3px, transparent 3.5px),
        radial-gradient(circle at 80% 76%, #fff4cf 0 3px, transparent 3.5px),
        conic-gradient(from 12deg, #e6a34e, #ffe8b0, #77b9ef, #ffe8b0, #e6a34e);
    box-shadow: 0 0 0 3px rgba(238, 173, 88, .16), 0 9px 22px rgba(139, 91, 41, .22);
}

body[data-theme="doggo"] #ai-ball[data-ornament-tier="member"]::after {
    content: "";
    width: 25px;
    height: 13px;
    right: -7px;
    bottom: -4px;
    border: 2px solid #fff5d6;
    border-radius: 8px;
    background:
        radial-gradient(circle at 13% 50%, #efad55 0 5px, transparent 5.5px),
        radial-gradient(circle at 87% 50%, #efad55 0 5px, transparent 5.5px),
        linear-gradient(90deg, transparent 12%, #efad55 13% 87%, transparent 88%);
    box-shadow: 0 4px 10px rgba(113, 74, 35, .24);
}

/* 三套自然伙伴各自拥有独立的会员光效，不再复用通用科技环。 */
body[data-theme="mint"] #ai-ball[data-ornament-tier="member"]::before {
    inset: -8px;
    opacity: .96;
    border: 0;
    border-radius: 45% 55% 48% 52%;
    background:
        radial-gradient(ellipse at 14% 73%, rgba(95, 211, 161, .96) 0 3px, transparent 3.6px),
        radial-gradient(ellipse at 88% 20%, rgba(182, 246, 217, .96) 0 3.4px, transparent 4px),
        conic-gradient(from 28deg, transparent 0 12%, rgba(33, 161, 119, .72) 14% 18%, transparent 20% 45%, rgba(149, 226, 189, .78) 48% 53%, transparent 55% 78%, rgba(234, 255, 245, .82) 81% 85%, transparent 87%);
    box-shadow: 0 0 18px rgba(58, 191, 139, .25), inset 0 0 12px rgba(220, 255, 238, .42);
}

body[data-theme="mint"] #ai-ball[data-ornament-tier="member"]::after {
    inset: auto -5px -5px auto;
    width: 18px;
    height: 23px;
    border-radius: 70% 35% 65% 40%;
    background: linear-gradient(145deg, rgba(243, 255, 250, .98), rgba(93, 216, 166, .92));
    border: 1px solid rgba(20, 112, 83, .32);
    box-shadow: 0 3px 10px rgba(17, 104, 76, .24), inset 3px 3px 5px rgba(255,255,255,.7);
    transform: rotate(32deg);
    filter: none;
}

body[data-theme="rainy"] #ai-ball[data-ornament-tier="member"]::before {
    inset: -8px;
    opacity: .98;
    border: 1px solid rgba(214, 250, 255, .88);
    border-radius: 47% 53% 52% 48%;
    background:
        radial-gradient(circle at 14% 28%, rgba(255,255,255,.94) 0 2px, transparent 2.6px),
        radial-gradient(circle at 82% 17%, rgba(132, 230, 255, .9) 0 2.5px, transparent 3.1px),
        radial-gradient(circle at 92% 74%, rgba(231, 204, 255, .92) 0 2.2px, transparent 2.8px),
        conic-gradient(from 180deg, rgba(50, 181, 224, .72), rgba(135, 238, 243, .4), rgba(119, 116, 226, .62), rgba(238, 205, 255, .46), rgba(50, 181, 224, .72));
    box-shadow: 0 0 0 3px rgba(215, 249, 255, .26), 0 0 20px rgba(33, 160, 207, .3);
}

body[data-theme="rainy"] #ai-ball[data-ornament-tier="member"]::after {
    inset: auto -4px -4px auto;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, #fff 0 13%, #c9f4ff 17% 45%, #70cce8 68%, #6f73d6 100%);
    border: 1px solid rgba(255,255,255,.84);
    box-shadow: 0 3px 10px rgba(22, 112, 153, .28), inset -3px -3px 6px rgba(75, 97, 194, .24);
    filter: none;
}

body[data-theme="morandi"] #ai-ball[data-ornament-tier="member"]::before {
    inset: -9px;
    opacity: .98;
    border: 1px solid rgba(255, 240, 244, .92);
    border-radius: 44% 56% 48% 52%;
    background:
        radial-gradient(ellipse at 12% 68%, rgba(255, 223, 230, .98) 0 3px, transparent 3.7px),
        radial-gradient(ellipse at 84% 18%, rgba(255, 246, 227, .98) 0 2.7px, transparent 3.4px),
        radial-gradient(ellipse at 88% 78%, rgba(224, 176, 205, .94) 0 2.4px, transparent 3px),
        conic-gradient(from 18deg, rgba(142, 78, 109, .78), rgba(244, 180, 198, .62), rgba(255, 228, 190, .74), rgba(199, 144, 190, .58), rgba(142, 78, 109, .78));
    box-shadow: 0 0 0 3px rgba(255, 225, 232, .22), 0 0 23px rgba(178, 86, 122, .3), inset 0 0 10px rgba(255, 248, 238, .48);
}

body[data-theme="morandi"] #ai-ball[data-ornament-tier="member"]::after {
    inset: auto -6px -5px auto;
    width: 20px;
    height: 20px;
    border: 1px solid rgba(255, 244, 235, .92);
    border-radius: 64% 36% 62% 38%;
    background:
        radial-gradient(circle at 34% 28%, rgba(255,255,255,.98) 0 10%, transparent 11%),
        linear-gradient(145deg, #ffe4ea 0 36%, #d992ad 37% 70%, #9c5a72 71%);
    box-shadow: 0 4px 11px rgba(111, 54, 79, .28), inset 3px 3px 5px rgba(255,255,255,.55);
    filter: none;
    transform: rotate(32deg);
}

body[data-theme="doggo"][data-theme-member="active"][data-theme-ornament-tier="member"][data-theme-effects="dynamic"] #ai-ball:not(.dragging)::before {
    animation: member-dog-collar-orbit 4.8s ease-in-out infinite;
}

body[data-theme="doggo"][data-theme-member="active"][data-theme-ornament-tier="member"][data-theme-effects="dynamic"] #ai-ball:not(.dragging)::after {
    animation: member-dog-bone-bounce 2.6s ease-in-out infinite;
}

body[data-theme="doggo"][data-theme-member="active"][data-theme-ornament-tier="member"][data-theme-effects="dynamic"] #ai-ball.has-mascot-image:not(.dragging) .ai-ball-mascot-image {
    animation: member-dog-mascot-wag 2.9s ease-in-out infinite;
}

body[data-theme="mint"][data-theme-member="active"][data-theme-ornament-tier="member"][data-theme-effects="dynamic"] #ai-ball:not(.dragging)::before {
    animation: member-forest-wreath 5.8s ease-in-out infinite;
}

body[data-theme="mint"][data-theme-member="active"][data-theme-ornament-tier="member"][data-theme-effects="dynamic"] #ai-ball:not(.dragging)::after {
    animation: member-forest-dew 3.1s ease-in-out infinite;
}

body[data-theme="mint"][data-theme-member="active"][data-theme-ornament-tier="member"][data-theme-effects="dynamic"] #ai-ball.has-mascot-image:not(.dragging) .ai-ball-mascot-image {
    animation: member-forest-mascot-breathe 4.4s ease-in-out infinite;
}

body[data-theme="rainy"][data-theme-member="active"][data-theme-ornament-tier="member"][data-theme-effects="dynamic"] #ai-ball:not(.dragging)::before {
    animation: member-sea-tide-halo 5.2s ease-in-out infinite;
}

body[data-theme="rainy"][data-theme-member="active"][data-theme-ornament-tier="member"][data-theme-effects="dynamic"] #ai-ball:not(.dragging)::after {
    animation: member-sea-pearl 3.4s ease-in-out infinite;
}

body[data-theme="rainy"][data-theme-member="active"][data-theme-ornament-tier="member"][data-theme-effects="dynamic"] #ai-ball.has-mascot-image:not(.dragging) .ai-ball-mascot-image {
    animation: member-sea-mascot-swim 4.1s ease-in-out infinite;
}

body[data-theme="morandi"][data-theme-member="active"][data-theme-ornament-tier="member"][data-theme-effects="dynamic"] #ai-ball:not(.dragging)::before {
    animation: member-morandi-wreath 6.2s ease-in-out infinite;
}

body[data-theme="morandi"][data-theme-member="active"][data-theme-ornament-tier="member"][data-theme-effects="dynamic"] #ai-ball:not(.dragging)::after {
    animation: member-morandi-petal-gem 3.2s ease-in-out infinite;
}

body[data-theme="morandi"][data-theme-member="active"][data-theme-ornament-tier="member"][data-theme-effects="dynamic"] #ai-ball.has-mascot-image:not(.dragging) .ai-ball-mascot-image {
    animation: member-morandi-mascot-drift 4.6s ease-in-out infinite;
}

@keyframes member-mascot-float {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-.5deg) scale(.99); }
    50% { transform: translate3d(0, -1.5px, 0) rotate(.7deg) scale(1.025); }
}

@keyframes member-startrail-mascot-halo {
    0%, 100% { transform: rotate(-8deg) scaleX(1.06) scaleY(.98); filter: brightness(.98); }
    50% { transform: rotate(6deg) scaleX(1.11) scaleY(1.04); filter: brightness(1.13); }
}

@keyframes member-startrail-mascot-star {
    0%, 100% { transform: translate3d(0, 1px, 0) rotate(3deg) scale(.88); opacity: .78; }
    48% { transform: translate3d(-2px, -2px, 0) rotate(18deg) scale(1.12); opacity: 1; }
}

@keyframes member-startrail-mascot-drift {
    0%, 100% { transform: translate3d(-.5px, .6px, 0) rotate(-.7deg) scale(.985); }
    50% { transform: translate3d(.8px, -1.8px, 0) rotate(.8deg) scale(1.035); }
}

@keyframes member-dog-collar-orbit {
    0%, 100% { transform: rotate(-2deg) scale(.98); filter: brightness(.98); }
    45% { transform: rotate(2deg) scale(1.035); filter: brightness(1.08); }
    60% { transform: rotate(-1deg) scale(1.015); }
}

@keyframes member-dog-bone-bounce {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-8deg) scale(.96); }
    48% { transform: translate3d(-1px, -2px, 0) rotate(6deg) scale(1.06); }
}

@keyframes member-dog-mascot-wag {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-.8deg) scale(.99); }
    35% { transform: translate3d(0, -1.2px, 0) rotate(1deg) scale(1.018); }
    70% { transform: translate3d(.8px, -.3px, 0) rotate(-.3deg) scale(1.01); }
}

@keyframes member-forest-wreath {
    0%, 100% { transform: rotate(-4deg) scale(.96); opacity: .8; }
    50% { transform: rotate(5deg) scale(1.045); opacity: 1; }
}

@keyframes member-forest-dew {
    0%, 100% { transform: translate3d(0, 1px, 0) rotate(28deg) scale(.91); filter: brightness(.96); }
    50% { transform: translate3d(-1px, -2px, 0) rotate(36deg) scale(1.06); filter: brightness(1.14); }
}

@keyframes member-forest-mascot-breathe {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-.45deg) scale(.99); }
    50% { transform: translate3d(0, -1px, 0) rotate(.55deg) scale(1.025); }
}

@keyframes member-sea-tide-halo {
    0%, 100% { transform: rotate(-3deg) scaleX(.97) scaleY(1.02); opacity: .85; }
    50% { transform: rotate(4deg) scaleX(1.04) scaleY(.98); opacity: 1; }
}

@keyframes member-sea-pearl {
    0%, 100% { transform: translate3d(0, 1px, 0) scale(.9); filter: brightness(.98); }
    50% { transform: translate3d(-2px, -2px, 0) scale(1.08); filter: brightness(1.18); }
}

@keyframes member-sea-mascot-swim {
    0%, 100% { transform: translate3d(-.6px, .5px, 0) rotate(-1deg) scale(.99); }
    50% { transform: translate3d(.8px, -1.2px, 0) rotate(1deg) scale(1.025); }
}

@keyframes member-morandi-wreath {
    0%, 100% { transform: rotate(-5deg) scale(.97); opacity: .84; filter: brightness(.98); }
    48% { transform: rotate(5deg) scale(1.045); opacity: 1; filter: brightness(1.1); }
}

@keyframes member-morandi-petal-gem {
    0%, 100% { transform: translate3d(0, 1px, 0) rotate(28deg) scale(.91); filter: brightness(.98); }
    50% { transform: translate3d(-2px, -2px, 0) rotate(42deg) scale(1.09); filter: brightness(1.17); }
}

@keyframes member-morandi-mascot-drift {
    0%, 100% { transform: translate3d(-.4px, .6px, 0) rotate(-.65deg) scale(.985); }
    50% { transform: translate3d(.7px, -1.6px, 0) rotate(.7deg) scale(1.032); }
}

/* 签到成功：短暂、主题化、不会阻断操作的庆祝层。 */
.theme-checkin-celebration {
    --checkin-a: #9b73ff;
    --checkin-b: #67ddff;
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: grid;
    place-items: center;
    pointer-events: none;
    overflow: hidden;
    animation: theme-checkin-enter .42s var(--ease-out) both;
}

.theme-checkin-celebration[data-theme="cute"] { --checkin-a: #f3a76c; --checkin-b: #f6bdcf; }
.theme-checkin-celebration[data-theme="doggo"] { --checkin-a: #e7a34d; --checkin-b: #83bff0; }
.theme-checkin-celebration[data-theme="mint"] { --checkin-a: #2eb486; --checkin-b: #a3e7c4; }
.theme-checkin-celebration[data-theme="rainy"] { --checkin-a: #33a9d4; --checkin-b: #8c82eb; }
.theme-checkin-celebration[data-theme="morandi"] { --checkin-a: #b4657d; --checkin-b: #f0b7c4; }

.theme-checkin-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 47%, color-mix(in srgb, var(--checkin-b) 28%, transparent), transparent 34%);
    animation: theme-checkin-glow 1.5s ease-in-out both;
}

.theme-checkin-emblem {
    position: relative;
    width: min(78vw, 310px);
    min-height: 220px;
    padding: 42px 24px 28px;
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
    border: 1px solid color-mix(in srgb, var(--checkin-b) 54%, white);
    border-radius: 34px;
    color: var(--text);
    background: color-mix(in srgb, var(--surface-raised) 88%, transparent);
    box-shadow: 0 26px 70px color-mix(in srgb, var(--checkin-a) 26%, transparent), inset 0 1px rgba(255,255,255,.6);
    backdrop-filter: blur(18px) saturate(1.15);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
    animation: theme-checkin-emblem 2.8s var(--ease-out) both;
}

.theme-checkin-orbit {
    position: absolute;
    top: 24px;
    left: 50%;
    width: 92px;
    height: 92px;
    margin-left: -46px;
    border: 2px solid color-mix(in srgb, var(--checkin-a) 62%, transparent);
    border-radius: 48% 52% 44% 56%;
    box-shadow: 0 0 24px color-mix(in srgb, var(--checkin-b) 42%, transparent);
    animation: theme-checkin-orbit 2.2s linear infinite;
}

.theme-checkin-icon {
    position: relative;
    z-index: 1;
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    margin-bottom: 22px;
    border-radius: 26px;
    color: #fff;
    font-size: 30px;
    background: linear-gradient(145deg, var(--checkin-a), var(--checkin-b));
    box-shadow: 0 12px 28px color-mix(in srgb, var(--checkin-a) 34%, transparent);
}

.theme-checkin-emblem strong { font-size: 20px; letter-spacing: .04em; }
.theme-checkin-emblem small { margin-top: 8px; color: var(--text-secondary); line-height: 1.55; }
.theme-checkin-emblem em {
    margin-top: 16px;
    padding: 7px 14px;
    border-radius: 999px;
    color: color-mix(in srgb, var(--checkin-a) 78%, var(--text));
    background: color-mix(in srgb, var(--checkin-b) 17%, var(--surface-raised));
    font-weight: 800;
    font-style: normal;
}

.theme-checkin-particles { position: absolute; inset: 0; }
.theme-checkin-particles i {
    position: absolute;
    left: 50%;
    top: 48%;
    width: 8px;
    height: 8px;
    border-radius: 45% 55% 50% 50%;
    background: linear-gradient(145deg, var(--checkin-a), var(--checkin-b));
    box-shadow: 0 0 10px color-mix(in srgb, var(--checkin-b) 70%, transparent);
    animation: theme-checkin-particle 1.8s var(--ease-out) both;
    animation-delay: calc(var(--particle-index, 0) * 55ms);
}
.theme-checkin-particles i:nth-child(1) { --particle-x: -150px; --particle-y: -120px; --particle-index: 1; }
.theme-checkin-particles i:nth-child(2) { --particle-x: -105px; --particle-y: -175px; --particle-index: 2; }
.theme-checkin-particles i:nth-child(3) { --particle-x: -35px; --particle-y: -190px; --particle-index: 3; }
.theme-checkin-particles i:nth-child(4) { --particle-x: 45px; --particle-y: -185px; --particle-index: 4; }
.theme-checkin-particles i:nth-child(5) { --particle-x: 120px; --particle-y: -145px; --particle-index: 5; }
.theme-checkin-particles i:nth-child(6) { --particle-x: 155px; --particle-y: -65px; --particle-index: 6; }
.theme-checkin-particles i:nth-child(7) { --particle-x: 145px; --particle-y: 65px; --particle-index: 7; }
.theme-checkin-particles i:nth-child(8) { --particle-x: 95px; --particle-y: 135px; --particle-index: 8; }
.theme-checkin-particles i:nth-child(9) { --particle-x: 20px; --particle-y: 165px; --particle-index: 9; }
.theme-checkin-particles i:nth-child(10) { --particle-x: -60px; --particle-y: 150px; --particle-index: 10; }
.theme-checkin-particles i:nth-child(11) { --particle-x: -130px; --particle-y: 105px; --particle-index: 11; }
.theme-checkin-particles i:nth-child(12) { --particle-x: -160px; --particle-y: 10px; --particle-index: 12; }

.theme-checkin-celebration.is-leaving { animation: theme-checkin-leave .68s ease both; }
@keyframes theme-checkin-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes theme-checkin-leave { to { opacity: 0; transform: scale(1.02); } }
@keyframes theme-checkin-glow { 0% { opacity: 0; transform: scale(.55); } 42% { opacity: 1; } 100% { opacity: .55; transform: scale(1.25); } }
@keyframes theme-checkin-emblem { 0% { opacity: 0; transform: translateY(22px) scale(.88); } 16%, 78% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: .94; transform: translateY(-4px) scale(.985); } }
@keyframes theme-checkin-orbit { to { transform: rotate(360deg); } }
@keyframes theme-checkin-particle { 0% { opacity: 0; transform: translate3d(0,0,0) scale(.2) rotate(0); } 24% { opacity: 1; } 100% { opacity: 0; transform: translate3d(var(--particle-x), var(--particle-y), 0) scale(1.15) rotate(160deg); } }

body[data-theme-effects="still"] .theme-checkin-particles,
body[data-theme-effects="still"] .theme-checkin-orbit { display: none; }

@media (prefers-reduced-motion: reduce) {
    .theme-checkin-celebration,
    .theme-checkin-celebration *,
    body[data-theme-member="active"] #ai-ball,
    body[data-theme-member="active"] #ai-ball * { animation: none !important; }
    .theme-checkin-particles { display: none; }
}

body[data-theme-effects="gentle"] .theme-pattern,
body[data-theme-effects="still"] .theme-pattern {
    animation: none !important;
}

body[data-theme-effects="gentle"] .theme-member-aura *,
body[data-theme-effects="still"] .theme-member-aura * {
    animation: none !important;
}

body[data-theme-effects="still"] .page.active {
    animation: none !important;
}

@media (max-width: 359px) {
    .theme-choice-grid {
        grid-template-columns: 1fr;
    }

    .theme-choice {
        min-height: 82px;
    }

    .theme-activity-preview {
        grid-template-columns: 60px minmax(0, 1fr);
        padding: 14px;
    }

    .theme-activity-preview-mark {
        width: 58px;
        height: 58px;
    }

    .theme-activity-preview-ring {
        left: 7px;
        top: 34px;
        width: 72px;
    }
}

@media (min-width: 640px) {
    #themeModal .theme-settings-sheet {
        max-height: min(82vh, 760px);
    }
}

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

    #theme-transition {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ai-ball-art {
        transition: none;
    }

    .theme-activity-progress-track span,
    .theme-member-aura *,
    body[data-theme] #ai-ball::before,
    body[data-theme] #ai-ball::after {
        transition: none;
    }

    body[data-theme] #ai-ball:active .ai-ball-art {
        transform: none;
    }
}