/* Basic Reset Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    font-family: 'PingFang SC', 'HarmonyOS Sans', Arial, sans-serif;
    height: 100%;
    overflow-x: hidden;
}

/* CSS Variables for Dynamic Theme Switching */
:root {
    --theme-primary: #AFCDEB;
    --theme-secondary: #DCE6F3;
    --theme-text: #2C4A5B;
    --theme-hover: #9BB8D9;
    --theme-gradient: linear-gradient(180deg, #F7F8FA 0%, #DCE6F3 50%, #AFCDEB 100%);
}

/* Background Video Container */
#video-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -2;
    overflow: hidden;
}

#bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Theme Gradient Overlay */
#theme-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--theme-gradient);
    opacity: 0.3;
    z-index: -1;
    transition: background 0.5s ease;
}

/* Floating Particles for Dynamic Effects */
#particles-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: float 15s infinite linear;
}

@keyframes float {
    0% {
        transform: translateY(100vh) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-10vh) rotate(360deg);
        opacity: 0;
    }
}

/* Top Navigation Bar */
.top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    z-index: 100;
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.top-bar:hover {
    background: rgba(255, 255, 255, 0.15);
}

.logo h2 {
    color: var(--theme-text);
    font-weight: 700;
    font-size: 1.8rem;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.logo h2:hover {
    transform: scale(1.05);
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

.controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

.control-btn {
    background: none;
    border: 2px solid var(--theme-primary);
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.4rem;
    color: var(--theme-primary);
    font-weight: bold;
    position: relative;
    overflow: hidden;
}

.control-btn:hover {
    background: var(--theme-primary);
    color: white;
    transform: scale(1.1);
    box-shadow: 0 0 25px rgba(175, 205, 235, 0.5);
}

.control-btn:active {
    transform: scale(0.95);
}

/* Enhanced Audio Button Effects */
.control-btn .ripple-effect {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    transform: scale(0);
    animation: ripple 0.6s linear;
    pointer-events: none;
}

@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Audio Button Playing Animation */
.control-btn.playing {
    animation: audioWave 2s ease-in-out infinite;
    box-shadow: 0 0 30px rgba(175, 205, 235, 0.7);
}

.control-btn.playing::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid var(--theme-primary);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes audioWave {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.wallet-btn {
    background: var(--theme-primary);
    border: none;
    color: white;
    padding: 12px 24px;
    border-radius: 25px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    position: relative;
    overflow: hidden;
}

.wallet-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}

.wallet-btn:hover::before {
    left: 100%;
}

.wallet-btn:hover {
    background: var(--theme-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.wallet-btn.connected {
    background: var(--theme-secondary);
    color: var(--theme-text);
    border: 2px solid var(--theme-primary);
}

/* Main Content Area */
.main-content {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 100px 20px 20px;
}

.theme-info {
    margin-bottom: 60px;
    animation: fadeInUp 1s ease-out;
}

.theme-title {
    font-size: 4rem;
    font-weight: 700;
    color: var(--theme-text);
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    letter-spacing: 2px;
    transition: all 0.3s ease;
    cursor: default;
}

.theme-title:hover {
    transform: scale(1.02);
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.8);
}

/* Theme Description */
.theme-description {
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--theme-text);
    opacity: 0.8;
    text-align: center;
    margin-bottom: 20px;
    font-style: italic;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.theme-description:hover {
    opacity: 1;
    transform: scale(1.02);
}

/* Remove theme subtitle since descriptions are not needed */
.theme-subtitle {
    display: none;
}

/* Enhanced Generate Button with Simplified Effects */
.generate-section {
    margin-top: 40px;
    animation: fadeInUp 1s ease-out 0.3s both;
}

.generate-btn {
    background: var(--theme-primary);
    border: none;
    color: white;
    font-size: 1.2rem;
    font-weight: 600;
    padding: 22px 50px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
    animation: gentleBreathe 4s ease-in-out infinite;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    display: flex;
    align-items: center;
    gap: 25px;
}

/* Horus Eye Icon */
.horus-eye-icon {
    width: 48px;
    height: 48px;
    transition: all 0.3s ease;
    animation: rotateSlow 8s linear infinite;
    position: relative;
    z-index: 2;
    /* 添加圆形描边 */
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    padding: 4px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    /* 确保图标居中 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 悬停时增强描边效果 */
.horus-eye-icon:hover {
    border-color: rgba(255, 255, 255, 1);
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transform: scale(1.1);
}

/* Slow rotation animation for the eye icon */
@keyframes rotateSlow {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* When button is pressed, eye icon becomes progress slider */
.generate-btn.pressing .horus-eye-icon {
    animation: none;
    transition: all 0.3s ease;
    /* 按压时增强描边效果 */
    border-color: rgba(255, 255, 255, 1);
    background: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.8);
    /* 按压时的特殊效果：轻微放大和发光 */
    transform: scale(1.2);
}

/* 按压时眼睛图标的脉冲效果 */
.generate-btn.pressing .horus-eye-icon::after {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border: 3px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    animation: eyePulse 1s ease-in-out infinite;
}

/* 按压时眼睛图标的"凝视"效果 */
.generate-btn.pressing .horus-eye-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: eyeGaze 2s ease-in-out infinite;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.9);
}

@keyframes eyePulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1.8);
        opacity: 0;
    }
}

@keyframes eyeGaze {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.9;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.4);
        opacity: 1;
    }
}

/* Gentle Breathing Animation for Default State */
@keyframes gentleBreathe {
    0%, 100% {
        transform: translateY(-2px) scale(1);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15), 0 0 0 rgba(175, 205, 235, 0);
    }
    50% {
        transform: translateY(-4px) scale(1.01);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2), 0 0 20px rgba(175, 205, 235, 0.2);
    }
}

/* Hover Effects - 停止呼吸动画并应用hover效果 */
.generate-btn:hover:not(.pressing) {
    background: var(--theme-hover);
    transform: translateY(-6px) scale(1.05);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25), 0 0 30px rgba(175, 205, 235, 0.4);
    animation: none; /* Stop breathing when hovering */
}

/* Pressing State - 长按时的效果 */
.generate-btn.pressing {
    transform: translateY(-3px) scale(1.02);
    animation: none;
    background: var(--theme-hover);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* Active Press Effect */
.generate-btn:active:not(.pressing) {
    transform: translateY(-1px) scale(1.02);
    transition: all 0.1s ease;
}

.generate-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    opacity: 0.6;
    animation: none;
    transform: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Progress Bar Effect */
.btn-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.4) 0%,
        rgba(255, 255, 255, 0.7) 50%,
        rgba(255, 255, 255, 0.4) 100%
    );
    border-radius: 50px;
    width: 0%;
    transition: width 0.1s linear;
    z-index: 4;
    opacity: 0;
    /* 进度条从按钮最左端开始 */
    transform-origin: left center;
}

.generate-btn.pressing .btn-progress {
    opacity: 1;
    /* 进度条现在由JavaScript控制宽度，从按钮最左端开始 */
}

/* 移除之前的样式，进度条现在从最左端开始 */
/* .generate-btn.pressing .btn-progress.from-eye {
    left: 38px;
    width: calc(100% - 38px);
} */

/* Enhanced Glow Effect */
.btn-glow {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 52px;
    background: radial-gradient(
        circle,
        rgba(175, 205, 235, 0.4) 0%,
        rgba(175, 205, 235, 0.2) 50%,
        transparent 70%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.generate-btn:hover .btn-glow {
    opacity: 1;
    animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.4;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

/* Enhanced Particles Effect */
.btn-particles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50px;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.generate-btn:hover .btn-particles::before,
.generate-btn:hover .btn-particles::after {
    content: '';
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    animation: btnParticleFloat 2s ease-out infinite;
}

.generate-btn:hover .btn-particles::before {
    left: 20%;
    animation-delay: 0s;
}

.generate-btn:hover .btn-particles::after {
    left: 80%;
    animation-delay: 1s;
}

@keyframes btnParticleFloat {
    0% {
        transform: translateY(100%) translateX(0) scale(0);
        opacity: 0;
    }
    20% {
        opacity: 1;
        transform: translateY(80%) translateX(5px) scale(1);
    }
    80% {
        opacity: 1;
        transform: translateY(-20%) translateX(-5px) scale(1);
    }
    100% {
        transform: translateY(-40%) translateX(10px) scale(0);
        opacity: 0;
    }
}

/* Ripple Effect on Click */
.btn-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    transform: scale(0);
    pointer-events: none;
    z-index: 2; /* 在进度条下方但在其他元素上方 */
}

.btn-ripple.animate {
    animation: btnRipple 0.6s linear;
}

@keyframes btnRipple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Text Enhancement */
.btn-text {
    position: relative;
    z-index: 5; /* 确保文字在最顶层 */
    transition: all 0.3s ease;
}

/* 只增强主生成按钮的文字可读性（去除阴影和背景） */
.generate-section .generate-btn .btn-text {
    /* text-shadow: 0 2px 8px rgba(0,0,0,0.35), 0 0 2px #fff; */
    /* background: rgba(0,0,0,0.18); */
    border-radius: 6px;
    padding: 0 10px;
    color: #fff;
    font-weight: bold;
    transition: color 0.2s, background 0.2s;
}

/* 兼容深色主题时自动切换为浅色背景和深色文字，可根据需要扩展 */
.generate-btn.dark .btn-text {
    background: rgba(255,255,255,0.18);
    color: #222;
    text-shadow: 0 2px 8px rgba(255,255,255,0.35), 0 0 2px #000;
}

.generate-btn.pressing .btn-text {
    color: rgba(255, 255, 255, 0.9);
}

/* Shine Effect */
.btn-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    transition: left 0.5s ease;
    z-index: 1;
}

.generate-btn:hover .btn-shine {
    left: 100%;
}

/* Loading State Enhancement */
.generate-btn.loading {
    animation: none;
    background: var(--theme-secondary);
    cursor: wait;
    transform: translateY(-2px) scale(1);
}

.generate-btn.loading .btn-text::after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: loadingSpin 1s linear infinite;
    margin-left: 10px;
    vertical-align: middle;
}

@keyframes loadingSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Press and Hold Feedback */
.generate-btn.press-ready {
    background: linear-gradient(45deg, var(--theme-primary), var(--theme-hover));
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Success Flash Effect */
.generate-btn.success-flash {
    animation: successFlash 0.6s ease-out;
}

@keyframes successFlash {
    0% {
        background: var(--theme-hover);
        box-shadow: 0 0 30px rgba(46, 204, 113, 0.6);
    }
    50% {
        background: #2ecc71;
        box-shadow: 0 0 50px rgba(46, 204, 113, 0.8);
        transform: translateY(-6px) scale(1.08);
    }
    100% {
        background: var(--theme-primary);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
        transform: translateY(-2px) scale(1);
    }
}

/* Shake Animation for Press Hint - 最高优先级，覆盖所有其他动画 */
.generate-btn.shake-hint {
    animation: shakeHint 0.5s ease-in-out !important;
    transform-origin: center !important;
}

@keyframes shakeHint {
    0%, 100% {
        transform: translateX(0) translateY(-2px);
    }
    20% {
        transform: translateX(-8px) translateY(-2px);
    }
    40% {
        transform: translateX(8px) translateY(-2px);
    }
    60% {
        transform: translateX(-6px) translateY(-2px);
    }
    80% {
        transform: translateX(6px) translateY(-2px);
    }
}

/* Ensure animations work well together */
.generate-btn.pressing .btn-glow {
    opacity: 0.8;
    animation: pressingGlow 1s ease-out forwards;
    z-index: 1; /* 在进度条下方 */
}

/* 移除按压时的粒子/波纹动画 */
/* .generate-btn.pressing .btn-particles { z-index: 2; } */
/* .generate-btn.pressing .btn-particles::before, .generate-btn.pressing .btn-particles::after { ... } */
/* .generate-btn.pressing .btn-particles::before { ... } */
/* .generate-btn.pressing .btn-particles::after { ... } */
/* @keyframes pressingParticles { ... } */

/* Enhanced disabled state */
.generate-btn:disabled .btn-glow,
.generate-btn:disabled .btn-particles,
.generate-btn:disabled .btn-shine {
    display: none;
}

/* Button Glow Effect */
.btn-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.generate-btn:hover .btn-glow {
    opacity: 1;
}

/* Button Particles Effect */
.btn-particles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50px;
    overflow: hidden;
    pointer-events: none;
}

.generate-btn:hover .btn-particles::before {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    animation: btnParticleFloat 2s ease-out infinite;
}

@keyframes btnParticleFloat {
    0% {
        transform: translateY(100%) translateX(0);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateY(-20px) translateX(20px);
        opacity: 0;
    }
}

/* 移除按钮按下时的中心扩散特效 */
/* .generate-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
}
.generate-btn:active::before {
    width: 300px;
    height: 300px;
} */

/* Modal Styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 1;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal.hidden {
    opacity: 0;
    visibility: hidden;
}

.modal-content {
    background: var(--theme-secondary, #fff);
    color: var(--theme-text, #222);
    border: 2px solid var(--theme-secondary);
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    max-width: min(98vw, 98vh, 1000px);
    max-height: min(98vw, 98vh, 1000px);
    overflow-y: auto;
    border-radius: 24px;
    transition: box-shadow 0.3s, border-radius 0.3s;
}

@keyframes modalSlideIn {
    from {
        transform: translateY(-50px) scale(0.9);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.modal.hidden .modal-content {
    transform: scale(0.8);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    border-bottom: 1px solid var(--theme-secondary);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    background: transparent;
}

.modal-header h3 {
    color: var(--theme-text);
    font-size: 1.5rem;
    font-weight: 600;
}

.close-btn {
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--theme-text);
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.close-btn:hover {
    background: var(--theme-secondary);
    transform: rotate(90deg);
}

.modal-body {
    padding: 30px;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
    background: transparent;
}

/* Loading State */
.loading-state {
    text-align: center;
    padding: 40px 20px;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--theme-secondary);
    border-top: 4px solid var(--theme-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-state p {
    color: var(--theme-text);
    font-size: 1.1rem;
}

/* Image Result Display */
.image-result {
    text-align: center;
}

.image-result.hidden {
    display: none;
}

.image-box {
    width: min(90vw, 90vh, 600px);
    height: min(90vw, 90vh, 600px);
    margin: 0 auto 20px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f7f8fa;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    overflow: hidden;
}
@media (max-width: 600px) {
    .image-box {
        width: 98vw;
        height: 98vw;
        max-width: 98vw;
        max-height: 98vw;
    }
}
#generated-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: none;
    margin: 0;
}
.dot-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.dot-loader span {
    display: block;
    width: 12px;
    height: 12px;
    background: var(--theme-primary, #AFCDEB);
    border-radius: 50%;
    animation: dot-bounce 1.2s infinite;
}
.dot-loader span:nth-child(2) { animation-delay: 0.2s; }
.dot-loader span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dot-bounce {
    0%, 80%, 100% { transform: scale(1); }
    40% { transform: scale(1.5); }
}

/* Image Action Buttons */
.image-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.action-btn {
    padding: 12px 20px;
    border-radius: 25px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    font-size: 0.9rem;
    position: relative;
    overflow: hidden;
}

.action-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}

.action-btn:hover::before {
    left: 100%;
}

.action-btn.primary {
    background: #222;
    color: #fff;
    border: 2px solid #222;
    text-shadow: 0 2px 8px rgba(0,0,0,0.18);
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

.action-btn.primary:hover {
    background: #444;
    color: #fff;
    border: 2px solid #222;
}

.action-btn.secondary {
    background: transparent;
    color: var(--theme-text);
    border: 2px solid var(--theme-primary);
}

.action-btn.secondary:hover {
    background: var(--theme-primary);
    color: white;
    transform: translateY(-2px);
}

/* 修复MetaMask弹窗中的secondary按钮样式 */
.metamask-install-modal .action-btn.secondary {
    background: rgba(246, 133, 27, 0.1);
    color: #f6851b;
    border: 2px solid #f6851b;
    font-weight: 600;
}

.metamask-install-modal .action-btn.secondary:hover {
    background: #f6851b;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(246, 133, 27, 0.3);
}

/* Success Modal */
.success-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
}

#nft-info {
    color: var(--theme-text);
    font-size: 1.1rem;
    text-align: center;
    margin-bottom: 15px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .top-bar {
        padding: 15px 20px;
    }
    
    .logo h2 {
        font-size: 1.5rem;
    }
    
    .theme-title {
        font-size: 2.5rem;
    }
    
    .generate-btn {
        padding: 15px 30px;
        font-size: 1.1rem;
    }
    
    /* 移动端模态框优化 */
    .modal {
        padding: 10px;
    }
    
    .modal-content {
        width: 95%;
        max-width: 95vw;
        margin: 10px auto;
        max-height: 90vh;
        overflow-y: auto;
    }
    
    .modal-body {
        padding: 20px 15px;
    }
    
    /* 移动端图片显示优化 */
    .image-box {
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: 1/1;
    }
    
    #generated-image {
        width: 100%;
        height: auto;
        max-height: 70vh;
        object-fit: contain;
    }
    
    /* 移动端按钮优化 */
    .image-actions {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .action-btn {
        flex: 1 1 calc(50% - 5px);
        min-width: 120px;
        padding: 12px 16px;
        font-size: 0.9rem;
    }
    
    .modal-header, .modal-body {
        padding: 20px;
    }
    
    .image-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .action-btn {
        width: 100%;
        max-width: 200px;
    }

    .particle {
        width: 2px;
        height: 2px;
    }
}

@media (max-width: 480px) {
    .theme-title {
        font-size: 2rem;
    }
    
    .controls {
        gap: 10px;
    }
    
    .control-btn {
        width: 40px;
        height: 40px;
    }
    
    .wallet-btn {
        padding: 10px 16px;
        font-size: 0.8rem;
    }
}

/* Fade In Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.main-content {
    animation: fadeIn 1s ease-out;
}

/* Theme Transition Effects */
.theme-transition {
    transition: all 0.5s ease;
}

/* Additional Micro Animations */
@keyframes gentleFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-5px);
    }
}

.logo {
    animation: gentleFloat 6s ease-in-out infinite;
}

/* Subtle Background Pattern Animation */
.top-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.top-bar:hover::before {
    opacity: 1;
}

/* MetaMask Installation Modal Styles */
.metamask-install-modal {
    max-width: 500px;
    border: 3px solid #f6851b;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(246, 133, 27, 0.3);
}

.metamask-install-modal .modal-header {
    background: linear-gradient(135deg, #f6851b 0%, #e2761b 100%);
    color: white;
    padding: 25px 30px;
    border-bottom: none;
}

.metamask-logo {
    display: flex;
    align-items: center;
    gap: 15px;
}

.metamask-logo img {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

.metamask-logo h3 {
    color: white;
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0;
}

.metamask-install-modal .close-btn {
    color: white;
    opacity: 0.8;
    transition: all 0.3s ease;
}

.metamask-install-modal .close-btn:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

.install-content {
    text-align: center;
    padding: 10px 20px 20px;
}

.install-icon {
    font-size: 4rem;
    margin-bottom: 20px;
    animation: gentleFloat 3s ease-in-out infinite;
}

.install-content h4 {
    color: #333;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.install-content p {
    color: #666;
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 25px;
}

.features-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 30px;
    text-align: left;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: rgba(246, 133, 27, 0.05);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.feature-item:hover {
    background: rgba(246, 133, 27, 0.1);
    transform: translateX(5px);
}

.feature-icon {
    font-size: 1.2rem;
    min-width: 24px;
}

.feature-item span:last-child {
    color: #333;
    font-weight: 500;
}

.install-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.install-btn {
    background: linear-gradient(135deg, #f6851b 0%, #e2761b 100%);
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 15px 25px;
    border-radius: 15px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.install-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(246, 133, 27, 0.4);
}

.install-btn:active {
    transform: translateY(0);
}

.install-btn .btn-icon {
    font-size: 1.2rem;
    animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-3px);
    }
    60% {
        transform: translateY(-1px);
    }
}

.install-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}

.install-btn:hover::before {
    left: 100%;
}

.install-note {
    color: #888;
    font-size: 0.85rem;
    opacity: 0.8;
}

.install-note small {
    display: block;
    padding: 10px;
    background: rgba(246, 133, 27, 0.05);
    border-radius: 8px;
    border-left: 3px solid #f6851b;
}

/* Wallet Connection Status Indicator */
.wallet-btn.connecting {
    background: linear-gradient(45deg, var(--theme-primary), var(--theme-hover));
    animation: connectingPulse 1.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes connectingPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.02);
    }
}

.wallet-btn.connecting::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-left: 8px;
}

/* Enhanced Error States */
.connection-error {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: white;
    padding: 12px 20px;
    border-radius: 10px;
    margin: 15px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: shake 0.5s ease-in-out;
}

.connection-error::before {
    content: '⚠️';
    font-size: 1.2rem;
}

/* Mobile Responsive for MetaMask Modal */
@media (max-width: 768px) {
    .metamask-install-modal {
        max-width: 90%;
        margin: 20px;
    }
    
    .features-list {
        text-align: center;
    }
    
    .feature-item {
        justify-content: center;
    }
    
    .install-actions {
        padding: 0 10px;
    }
} 

.inspiration-desc {
    margin: 12px 0 8px 0;
    color: #888;
    font-size: 1rem;
    font-style: italic;
    text-align: center;
}

/* Fortune Cookie 样式 */
.fortune-loading,
.fortune-result,
.fortune-fallback {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.6rem;
    padding: 0.875rem 1rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    min-height: 45px;
    text-align: left;
}

.fortune-loading {
    background: rgba(255, 193, 7, 0.1);
    border-color: rgba(255, 193, 7, 0.2);
}

.fortune-result {
    background: rgba(102, 187, 106, 0.12);
    border-color: rgba(102, 187, 106, 0.25);
    box-shadow: 0 4px 25px rgba(102, 187, 106, 0.15);
}

.fortune-fallback {
    background: rgba(156, 39, 176, 0.1);
    border-color: rgba(156, 39, 176, 0.2);
}

.fortune-icon {
    font-size: 1.3rem;
    opacity: 0.9;
    flex-shrink: 0;
    margin-top: 0.1rem;
    line-height: 1;
}

.fortune-cookie-image {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
    margin-top: 0.1rem;
    opacity: 0.9;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.fortune-text {
    font-size: 0.95rem;
    font-style: italic;
    color: #E8EAF6;
    font-weight: normal;
    line-height: 1.4;
    letter-spacing: 0.2px;
    flex: 1;
    word-wrap: break-word;
    text-align: left;
}

.fortune-loading .fortune-text {
    color: #FFC107;
}

.fortune-result .fortune-text {
    color: #66BB6A;
    font-size: 0.95rem;
}

.fortune-fallback .fortune-text {
    color: #AB47BC;
}

/* Fortune loading动画 */
.fortune-loading .fortune-icon {
    animation: fortuneFloat 2s ease-in-out infinite;
}

.fortune-loading .fortune-cookie-image {
    animation: fortuneFloat 2s ease-in-out infinite;
}

@keyframes fortuneFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* Fortune响应式设计 */
@media (max-width: 768px) {
    .fortune-loading,
    .fortune-result,
    .fortune-fallback {
        padding: 0.75rem 0.875rem;
        gap: 0.5rem;
        min-height: 40px;
    }
    
    .fortune-text {
        font-size: 0.9rem;
        letter-spacing: 0.1px;
    }
    
    .fortune-icon {
        font-size: 1.2rem;
        margin-top: 0.05rem;
    }
    
    .fortune-cookie-image {
        width: 28px;
        height: 28px;
    }
}

@media (max-width: 480px) {
    .fortune-loading,
    .fortune-result,
    .fortune-fallback {
        padding: 0.65rem 0.75rem;
        gap: 0.4rem;
        border-radius: 10px;
    }
    
    .fortune-text {
        font-size: 0.85rem;
        letter-spacing: 0.1px;
        line-height: 1.3;
    }
    
    .fortune-icon {
        font-size: 1.1rem;
        margin-top: 0.05rem;
    }
    
    .fortune-cookie-image {
        width: 24px;
        height: 24px;
    }
} 

/* Mint按钮loading状态 */
#mint-btn.loading {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
}
#mint-btn.loading::after {
    content: '';
    display: inline-block;
    margin-left: 8px;
    width: 16px;
    height: 16px;
    border: 2px solid #999;
    border-top: 2px solid #fadb14;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
}
@keyframes spin {
    100% { transform: rotate(360deg); }
}
/* mint-waiting-info说明文本样式 */
.mint-waiting-info {
    background: #fffbe6;
    border: 1px solid #ffe58f;
    color: #ad8b00;
    padding: 18px 16px 16px 16px;
    border-radius: 12px;
    margin-top: 18px;
    font-size: 16px;
    font-family: 'Segoe UI', 'PingFang SC', 'HarmonyOS Sans', Arial, sans-serif;
    line-height: 1.8;
    box-shadow: 0 2px 12px rgba(255, 223, 100, 0.10);
    letter-spacing: 0.01em;
}
.mint-waiting-info p {
    margin: 0 0 10px 0;
    padding: 0;
    font-size: 16px;
    line-height: 1.8;
}
.mint-waiting-info p:last-child {
    margin-bottom: 0;
} 

/* Theme Map UI Styles */
.theme-map {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 200;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(15px);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    border: 2px solid rgba(175, 205, 235, 0.3);
    transition: all 0.3s ease;
    max-width: 300px;
    min-width: 280px;
}

.theme-map.hidden {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.9) translateY(-10px);
}

.map-container {
    padding: 16px;
}

.map-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.map-title {
    font-weight: 600;
    font-size: 1.1rem;
    color: #333;
}

.map-close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #666;
    cursor: pointer;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.map-close-btn:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #333;
}

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

.theme-grid-item {
    background: rgba(255, 255, 255, 0.8);
    border: 2px solid rgba(175, 205, 235, 0.3);
    border-radius: 12px;
    padding: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.theme-grid-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    border-color: rgba(175, 205, 235, 0.6);
}

.theme-grid-item.locked {
    opacity: 0.5;
    cursor: not-allowed;
    background: rgba(200, 200, 200, 0.3);
}

.theme-grid-item.locked:hover {
    transform: none;
    box-shadow: none;
}

.theme-grid-item.current {
    border-color: #4CAF50;
    background: rgba(76, 175, 80, 0.1);
}

.theme-grid-item .theme-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: #333;
    margin-bottom: 4px;
}

.theme-grid-item .theme-en {
    font-size: 0.7rem;
    color: #666;
    font-weight: 500;
}

.theme-grid-item .unlock-status {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
}

.theme-grid-item.locked .unlock-status {
    background: #f44336;
}

.theme-grid-item.unlocked .unlock-status {
    background: #4CAF50;
}

.theme-grid-item.current .unlock-status {
    background: #2196F3;
}

/* Map Toggle Button */
.map-toggle-btn {
    position: fixed;
    top: 80px;
    left: 20px;
    z-index: 150;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid rgba(175, 205, 235, 0.5);
    border-radius: 12px;
    width: 48px;
    height: 48px;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-toggle-btn:hover {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(175, 205, 235, 0.8);
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.map-toggle-btn.hidden {
    display: none;
}

.map-icon {
    font-size: 1.2rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .theme-map {
        top: 10px;
        left: 10px;
        right: 10px;
        max-width: none;
        min-width: auto;
    }
    
    .theme-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    
    .theme-grid-item {
        padding: 8px;
    }
    
    .theme-grid-item .theme-name {
        font-size: 0.8rem;
    }
    
    .theme-grid-item .theme-en {
        font-size: 0.6rem;
    }
} 

/* 主要内容区域重新布局 - 移除按钮区域 */
.main-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    position: relative;
    z-index: 2;
    padding: 5rem 0 0;
}

/* 中央Eye图片容器 - 成为唯一的交互中心 */
.central-eye-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    width: 100%;
    margin-top: -2rem;
    padding: 0 2rem;
    /* 移除交互提示，避免整个容器都响应悬停 */
    user-select: none;
}

/* 中央Eye图片样式 - 集成按钮功能 */
.central-eye-image {
    width: min(30vw, 30vh, 240px);
    height: min(30vw, 30vh, 240px);
    min-width: 160px;
    min-height: 160px;
    object-fit: contain;
    filter: brightness(1.1) contrast(1.05) drop-shadow(0 0 30px rgba(255, 255, 255, 0.3));
    transition: all 0.6s ease;
    animation: eyeRotate 60s linear infinite;
    cursor: pointer;
    background: transparent;
    border: none;
    /* 添加交互感 */
    position: relative;
    z-index: 2;
    /* 移除padding，让判定区域更精准 */
    
    /* 防止图片默认行为 */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: auto;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
    box-sizing: border-box;
}

/* 移除伪元素悬停检测，改用更简单的方法 */

/* Eye图片旋转动画 - 极其缓慢 */
@keyframes eyeRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 移除图片本身的悬停效果，只保留容器悬停时的效果 */

/* 移除所有悬停效果，只保留长按效果 */

/* 长按状态 - 图片按压效果 - 真正的苹果风格 */
.central-eye-image.pressing {
    transform: scale(0.92) translateY(6px);
    filter: brightness(1.1) contrast(1.05) drop-shadow(0 4px 20px rgba(255, 255, 255, 0.4));
    animation: none !important;
    transition: all 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    
    /* 苹果风格的触觉反馈效果 - 简洁光晕 */
    box-shadow: 
        0 0 0 8px rgba(255, 255, 255, 0.08),
        0 0 0 4px rgba(255, 255, 255, 0.12),
        0 8px 24px rgba(0, 0, 0, 0.2);
}

/* 长按准备状态 - 深度按压效果 */
.central-eye-image.press-ready {
    transform: scale(0.88) translateY(10px);
    filter: brightness(1.2) contrast(1.1) drop-shadow(0 6px 30px rgba(255, 255, 255, 0.6));
    transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    
    /* 苹果风格的深度按压效果 - 更强的光晕 */
    box-shadow: 
        0 0 0 16px rgba(255, 255, 255, 0.06),
        0 0 0 8px rgba(255, 255, 255, 0.1),
        0 0 0 4px rgba(255, 255, 255, 0.15),
        0 12px 36px rgba(0, 0, 0, 0.25);
}

/* 成功闪烁效果 */
.central-eye-image.success-flash {
    animation: imageSuccessFlash 0.6s ease-out;
}

@keyframes imageSuccessFlash {
    0% {
        filter: brightness(1.1) contrast(1.05) drop-shadow(0 0 30px rgba(255, 255, 255, 0.3));
    }
    50% {
        filter: brightness(2.0) contrast(1.8) drop-shadow(0 0 60px rgba(46, 204, 113, 0.9));
        transform: scale(1.15);
    }
    100% {
        filter: brightness(1.1) contrast(1.05) drop-shadow(0 0 30px rgba(255, 255, 255, 0.3));
        transform: scale(1);
    }
}

/* 圆形进度条 - 苹果风格 */
.image-progress-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(min(30vw, 30vh, 240px) + 50px); /* 缩小50% */
    height: calc(min(30vw, 30vh, 240px) + 50px);
    min-width: 210px;
    min-height: 210px;
    pointer-events: none;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1;
}

.image-progress-ring.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.02); /* 轻微放大增强视觉效果 */
}

/* SVG容器 */
.progress-circle {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg); /* 从顶部开始 */
}

/* 进度条轨道背景 */
.progress-circle-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.06);
    stroke-width: 8;
    stroke-linecap: round;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.05));
}

/* 主进度条 - 简化版 */
.progress-circle-fill {
    fill: none;
    stroke: var(--theme-primary);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 0 1000;
    stroke-dashoffset: 0;
    transition: none; /* 移除过渡，让动画更直接 */
    filter: drop-shadow(0 0 8px rgba(0, 122, 255, 0.5));
}

/* 为不同主题的进度条颜色 */
.theme-horus_eye .progress-circle-fill {
    stroke: rgba(74, 144, 226, 0.9);
}

.theme-horus_eye .central-eye-image {
    filter: brightness(1.1) contrast(1.05) drop-shadow(0 0 30px rgba(74, 144, 226, 0.4));
}

/* 移除Clarity主题的悬停效果 */

/* Clarity主题的苹果风格触觉反馈效果 - 蓝色光晕 */
.theme-horus_eye .central-eye-image.pressing {
    transform: scale(0.92) translateY(6px);
    filter: brightness(1.1) contrast(1.05) drop-shadow(0 4px 20px rgba(74, 144, 226, 0.4));
    transition: all 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    
    /* Clarity主题的苹果风格触觉反馈效果 - 蓝色光晕 */
    box-shadow: 
        0 0 0 8px rgba(74, 144, 226, 0.08),
        0 0 0 4px rgba(74, 144, 226, 0.12),
        0 8px 24px rgba(74, 144, 226, 0.2);
}

.theme-horus_eye .central-eye-image.press-ready {
    transform: scale(0.88) translateY(10px);
    filter: brightness(1.2) contrast(1.1) drop-shadow(0 6px 30px rgba(74, 144, 226, 0.6));
    transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    
    /* Clarity主题的苹果风格深度按压效果 - 蓝色光晕 */
    box-shadow: 
        0 0 0 16px rgba(74, 144, 226, 0.06),
        0 0 0 8px rgba(74, 144, 226, 0.1),
        0 0 0 4px rgba(74, 144, 226, 0.15),
        0 12px 36px rgba(74, 144, 226, 0.25);
}

/* Clarity主题的进度条样式 - 苹果风格高级设计 */
.theme-horus_eye .progress-circle-bg {
    stroke: rgba(74, 144, 226, 0.08);
    filter: drop-shadow(0 0 4px rgba(74, 144, 226, 0.1));
}

.theme-horus_eye .progress-circle-fill {
    stroke: #4A90E2; /* 更高级的蓝色 */
    filter: 
        drop-shadow(0 0 8px rgba(74, 144, 226, 0.6)),
        drop-shadow(0 0 16px rgba(74, 144, 226, 0.4)),
        drop-shadow(0 0 24px rgba(74, 144, 226, 0.2));
}

/* ===================================== */
/* 区域主题化的图片生成UI框配色（用户需求） */
/* 1) 区域1 clarity：柠檬黄带青柠绿 */
.theme-clarity .modal-content {
    /* 主色：#E3CE7C */
    background: linear-gradient(135deg, rgba(227, 206, 124, 0.92) 0%, rgba(245, 236, 186, 0.94) 55%, rgba(250, 246, 214, 0.96) 100%);
    color: #2b3314;
    border-color: rgba(227, 206, 124, 0.75);
}
.theme-clarity .modal-header {
    border-bottom-color: rgba(227, 206, 124, 0.55);
}
.theme-clarity .image-box {
    background: linear-gradient(180deg, rgba(250, 246, 214, 0.96) 0%, rgba(242, 233, 184, 0.95) 60%, rgba(235, 223, 160, 0.94) 100%);
    border: 2px solid rgba(227, 206, 124, 0.65);
    box-shadow: 0 6px 24px rgba(227, 206, 124, 0.22);
}
.theme-clarity .fortune-result {
    background: rgba(227, 206, 124, 0.20);
    border-color: rgba(227, 206, 124, 0.45);
    box-shadow: 0 4px 20px rgba(227, 206, 124, 0.14);
}
.theme-clarity .fortune-text { color: #3a3a12; }

/* 2) 区域2 echo：#5798CB */
.theme-echo .modal-content {
    background: linear-gradient(135deg, rgba(240, 245, 251, 0.95) 0%, rgba(222, 237, 249, 0.94) 55%, rgba(207, 229, 247, 0.96) 100%);
    color: #1e2b36;
    border-color: rgba(87, 152, 203, 0.55);
}
.theme-echo .modal-header {
    border-bottom-color: rgba(87, 152, 203, 0.4);
}
.theme-echo .image-box {
    background: linear-gradient(180deg, rgba(240, 245, 251, 0.96) 0%, rgba(222, 237, 249, 0.95) 60%, rgba(207, 229, 247, 0.94) 100%);
    border: 2px solid rgba(87, 152, 203, 0.55);
    box-shadow: 0 6px 24px rgba(87, 152, 203, 0.22);
}
.theme-echo .fortune-result {
    background: rgba(87, 152, 203, 0.15);
    border-color: rgba(87, 152, 203, 0.35);
    box-shadow: 0 4px 20px rgba(87, 152, 203, 0.18);
}
.theme-echo .fortune-text { color: #1f3a52; }

/* 3) 区域3 warm：#EFA767 */
.theme-warm .modal-content {
    background: linear-gradient(135deg, rgba(255, 244, 233, 0.95) 0%, rgba(253, 231, 213, 0.94) 55%, rgba(250, 220, 195, 0.96) 100%);
    color: #3d2a15;
    border-color: rgba(239, 167, 103, 0.55);
}
.theme-warm .modal-header {
    border-bottom-color: rgba(239, 167, 103, 0.4);
}
.theme-warm .image-box {
    background: linear-gradient(180deg, rgba(255, 244, 233, 0.96) 0%, rgba(253, 231, 213, 0.95) 60%, rgba(250, 220, 195, 0.94) 100%);
    border: 2px solid rgba(239, 167, 103, 0.55);
    box-shadow: 0 6px 24px rgba(239, 167, 103, 0.22);
}
.theme-warm .fortune-result {
    background: rgba(239, 167, 103, 0.16);
    border-color: rgba(239, 167, 103, 0.35);
    box-shadow: 0 4px 20px rgba(239, 167, 103, 0.18);
}
.theme-warm .fortune-text { color: #4a2f17; }

/* 5) 区域5 yearning：#C488F7 */
.theme-yearning .modal-content {
    background: linear-gradient(135deg, rgba(248, 241, 255, 0.95) 0%, rgba(240, 228, 255, 0.94) 55%, rgba(233, 218, 255, 0.96) 100%);
    color: #2e1f3e;
    border-color: rgba(196, 136, 247, 0.55);
}
.theme-yearning .modal-header {
    border-bottom-color: rgba(196, 136, 247, 0.4);
}
.theme-yearning .image-box {
    background: linear-gradient(180deg, rgba(248, 241, 255, 0.96) 0%, rgba(240, 228, 255, 0.95) 60%, rgba(233, 218, 255, 0.94) 100%);
    border: 2px solid rgba(196, 136, 247, 0.55);
    box-shadow: 0 6px 24px rgba(196, 136, 247, 0.22);
}
.theme-yearning .fortune-result {
    background: rgba(196, 136, 247, 0.16);
    border-color: rgba(196, 136, 247, 0.35);
    box-shadow: 0 4px 20px rgba(196, 136, 247, 0.18);
}
.theme-yearning .fortune-text { color: #2e1f3e; }

/* 6) 区域6 breath：纯白色折射七彩光束 - 增强版 */
.theme-breath .modal-content {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.99) 0%, 
        rgba(255, 255, 255, 0.97) 25%,
        rgba(255, 255, 255, 0.98) 50%,
        rgba(255, 255, 255, 0.97) 75%,
        rgba(255, 255, 255, 0.99) 100%);
    color: #1a1a1a;
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(255, 255, 255, 0.95),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(25px) saturate(1.3);
    position: relative;
    overflow: hidden;
}

/* 主要七彩光束层 */
.theme-breath .modal-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        /* 主光束 - 对角线 */
        linear-gradient(45deg, 
            rgba(255, 0, 150, 0.08) 0%,
            transparent 20%,
            rgba(0, 255, 255, 0.08) 40%,
            transparent 60%,
            rgba(255, 255, 0, 0.08) 80%,
            transparent 100%),
        /* 副光束 - 垂直 */
        linear-gradient(90deg, 
            transparent 0%,
            rgba(0, 255, 0, 0.06) 30%,
            transparent 50%,
            rgba(0, 0, 255, 0.06) 70%,
            transparent 100%),
        /* 第三光束 - 水平 */
        linear-gradient(0deg, 
            transparent 0%,
            rgba(255, 0, 255, 0.05) 25%,
            transparent 50%,
            rgba(255, 165, 0, 0.05) 75%,
            transparent 100%);
    pointer-events: none;
    z-index: 1;
    animation: breathPrismBeams 12s ease-in-out infinite;
}

/* 增强的七彩光晕层 */
.theme-breath .modal-content::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        /* 中心光晕 */
        radial-gradient(circle at 30% 30%, 
            rgba(255, 0, 150, 0.06) 0%,
            transparent 40%),
        radial-gradient(circle at 70% 70%, 
            rgba(0, 255, 255, 0.06) 0%,
            transparent 40%),
        radial-gradient(circle at 50% 20%, 
            rgba(255, 255, 0, 0.05) 0%,
            transparent 35%),
        radial-gradient(circle at 20% 80%, 
            rgba(0, 255, 0, 0.05) 0%,
            transparent 35%),
        radial-gradient(circle at 80% 20%, 
            rgba(0, 0, 255, 0.05) 0%,
            transparent 35%),
        radial-gradient(circle at 50% 80%, 
            rgba(255, 0, 255, 0.05) 0%,
            transparent 35%);
    pointer-events: none;
    z-index: 2;
    animation: breathPrismAura 15s ease-in-out infinite;
}

@keyframes breathPrismBeams {
    0%, 100% { 
        opacity: 0.4; 
        transform: scale(1) rotate(0deg); 
        filter: hue-rotate(0deg);
    }
    25% { 
        opacity: 0.7; 
        transform: scale(1.02) rotate(2deg); 
        filter: hue-rotate(30deg);
    }
    50% { 
        opacity: 0.5; 
        transform: scale(1.01) rotate(0deg); 
        filter: hue-rotate(60deg);
    }
    75% { 
        opacity: 0.8; 
        transform: scale(1.02) rotate(-2deg); 
        filter: hue-rotate(90deg);
    }
}

@keyframes breathPrismAura {
    0%, 100% { 
        opacity: 0.3; 
        transform: scale(1); 
        filter: hue-rotate(0deg) brightness(1);
    }
    33% { 
        opacity: 0.6; 
        transform: scale(1.01); 
        filter: hue-rotate(120deg) brightness(1.1);
    }
    66% { 
        opacity: 0.4; 
        transform: scale(1.005); 
        filter: hue-rotate(240deg) brightness(1.05);
    }
}

.theme-breath .modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    position: relative;
    z-index: 2;
}

.theme-breath .image-box {
    background: linear-gradient(180deg, 
        rgba(255, 255, 255, 0.99) 0%, 
        rgba(255, 255, 255, 0.98) 50%,
        rgba(255, 255, 255, 0.99) 100%);
    border: 2px solid rgba(255, 255, 255, 0.8);
    box-shadow: 
        0 6px 24px rgba(0, 0, 0, 0.04),
        0 0 0 1px rgba(255, 255, 255, 0.9),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    position: relative;
    overflow: hidden;
}

/* 图片框主光束层 */
.theme-breath .image-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        /* 对角线光束 */
        linear-gradient(45deg, 
            rgba(255, 0, 150, 0.1) 0%,
            transparent 25%,
            rgba(0, 255, 255, 0.1) 50%,
            transparent 75%,
            rgba(255, 255, 0, 0.1) 100%),
        /* 垂直光束 */
        linear-gradient(90deg, 
            transparent 0%,
            rgba(0, 255, 0, 0.08) 40%,
            transparent 60%,
            rgba(0, 0, 255, 0.08) 80%,
            transparent 100%);
    pointer-events: none;
    z-index: 1;
    animation: breathImageBeams 10s ease-in-out infinite;
}

/* 图片框光晕层 */
.theme-breath .image-box::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        /* 多个光晕点 */
        radial-gradient(circle at 25% 25%, 
            rgba(255, 0, 150, 0.08) 0%,
            transparent 45%),
        radial-gradient(circle at 75% 75%, 
            rgba(0, 255, 255, 0.08) 0%,
            transparent 45%),
        radial-gradient(circle at 50% 15%, 
            rgba(255, 255, 0, 0.06) 0%,
            transparent 40%),
        radial-gradient(circle at 15% 85%, 
            rgba(0, 255, 0, 0.06) 0%,
            transparent 40%),
        radial-gradient(circle at 85% 15%, 
            rgba(0, 0, 255, 0.06) 0%,
            transparent 40%),
        radial-gradient(circle at 50% 85%, 
            rgba(255, 0, 255, 0.06) 0%,
            transparent 40%);
    pointer-events: none;
    z-index: 2;
    animation: breathImageAura 14s ease-in-out infinite;
}

@keyframes breathImageBeams {
    0%, 100% { 
        opacity: 0.5; 
        transform: scale(1) rotate(0deg); 
        filter: hue-rotate(0deg);
    }
    25% { 
        opacity: 0.8; 
        transform: scale(1.01) rotate(1deg); 
        filter: hue-rotate(45deg);
    }
    50% { 
        opacity: 0.6; 
        transform: scale(1.005) rotate(0deg); 
        filter: hue-rotate(90deg);
    }
    75% { 
        opacity: 0.9; 
        transform: scale(1.01) rotate(-1deg); 
        filter: hue-rotate(135deg);
    }
}

@keyframes breathImageAura {
    0%, 100% { 
        opacity: 0.4; 
        transform: scale(1); 
        filter: hue-rotate(0deg) brightness(1);
    }
    33% { 
        opacity: 0.7; 
        transform: scale(1.005); 
        filter: hue-rotate(120deg) brightness(1.15);
    }
    66% { 
        opacity: 0.5; 
        transform: scale(1.002); 
        filter: hue-rotate(240deg) brightness(1.08);
    }
}

.theme-breath .fortune-result {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.03),
        0 0 0 1px rgba(255, 255, 255, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(15px);
    position: relative;
    overflow: hidden;
}

/* Fortune区域光束层 */
.theme-breath .fortune-result::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        /* 水平光束 */
        linear-gradient(90deg, 
            rgba(255, 0, 150, 0.06) 0%,
            transparent 30%,
            rgba(0, 255, 255, 0.06) 50%,
            transparent 70%,
            rgba(255, 255, 0, 0.06) 100%),
        /* 垂直光束 */
        linear-gradient(0deg, 
            transparent 0%,
            rgba(0, 255, 0, 0.04) 40%,
            transparent 60%,
            rgba(0, 0, 255, 0.04) 80%,
            transparent 100%);
    pointer-events: none;
    z-index: 1;
    animation: breathFortuneBeams 8s ease-in-out infinite;
}

/* Fortune区域光晕层 */
.theme-breath .fortune-result::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 50%, 
            rgba(255, 0, 150, 0.05) 0%,
            transparent 50%),
        radial-gradient(circle at 80% 50%, 
            rgba(0, 255, 255, 0.05) 0%,
            transparent 50%),
        radial-gradient(circle at 50% 20%, 
            rgba(255, 255, 0, 0.04) 0%,
            transparent 40%),
        radial-gradient(circle at 50% 80%, 
            rgba(0, 255, 0, 0.04) 0%,
            transparent 40%);
    pointer-events: none;
    z-index: 2;
    animation: breathFortuneAura 10s ease-in-out infinite;
}

@keyframes breathFortuneBeams {
    0%, 100% { 
        opacity: 0.4; 
        transform: scale(1); 
        filter: hue-rotate(0deg);
    }
    50% { 
        opacity: 0.7; 
        transform: scale(1.01); 
        filter: hue-rotate(60deg);
    }
}

@keyframes breathFortuneAura {
    0%, 100% { 
        opacity: 0.3; 
        transform: scale(1); 
        filter: hue-rotate(0deg) brightness(1);
    }
    50% { 
        opacity: 0.6; 
        transform: scale(1.005); 
        filter: hue-rotate(180deg) brightness(1.1);
    }
}

.theme-breath .fortune-text { 
    color: #1a1a1a; 
    position: relative;
    z-index: 2;
}

/* ========== 同步进度环与二级按钮到主题主色 ========== */
/* 进度环颜色（与主题主色一致） */
.theme-clarity .progress-circle-fill { stroke: #E3CE7C; filter: drop-shadow(0 0 8px rgba(227, 206, 124, 0.45)); }
.theme-echo .progress-circle-fill { stroke: #5798CB; filter: drop-shadow(0 0 8px rgba(87, 152, 203, 0.45)); }
.theme-warm .progress-circle-fill { stroke: #EFA767; filter: drop-shadow(0 0 8px rgba(239, 167, 103, 0.45)); }
.theme-yearning .progress-circle-fill { stroke: #C488F7; filter: drop-shadow(0 0 8px rgba(196, 136, 247, 0.45)); }
.theme-breath .progress-circle-fill { 
    stroke: #ffffff; 
    filter: 
        drop-shadow(0 0 8px rgba(255, 255, 255, 0.9)),
        drop-shadow(0 0 16px rgba(255, 0, 150, 0.5)),
        drop-shadow(0 0 24px rgba(0, 255, 255, 0.4)),
        drop-shadow(0 0 32px rgba(255, 255, 0, 0.3)),
        drop-shadow(0 0 40px rgba(0, 255, 0, 0.2));
    animation: breathProgressPrism 6s ease-in-out infinite;
}

@keyframes breathProgressPrism {
    0%, 100% { 
        filter: 
            drop-shadow(0 0 8px rgba(255, 255, 255, 0.9)),
            drop-shadow(0 0 16px rgba(255, 0, 150, 0.5)),
            drop-shadow(0 0 24px rgba(0, 255, 255, 0.4)),
            drop-shadow(0 0 32px rgba(255, 255, 0, 0.3)),
            drop-shadow(0 0 40px rgba(0, 255, 0, 0.2));
    }
    25% { 
        filter: 
            drop-shadow(0 0 8px rgba(255, 255, 255, 0.9)),
            drop-shadow(0 0 16px rgba(0, 255, 255, 0.5)),
            drop-shadow(0 0 24px rgba(255, 255, 0, 0.4)),
            drop-shadow(0 0 32px rgba(0, 255, 0, 0.3)),
            drop-shadow(0 0 40px rgba(0, 0, 255, 0.2));
    }
    50% { 
        filter: 
            drop-shadow(0 0 8px rgba(255, 255, 255, 0.9)),
            drop-shadow(0 0 16px rgba(255, 255, 0, 0.5)),
            drop-shadow(0 0 24px rgba(0, 255, 0, 0.4)),
            drop-shadow(0 0 32px rgba(0, 0, 255, 0.3)),
            drop-shadow(0 0 40px rgba(255, 0, 255, 0.2));
    }
    75% { 
        filter: 
            drop-shadow(0 0 8px rgba(255, 255, 255, 0.9)),
            drop-shadow(0 0 16px rgba(0, 255, 0, 0.5)),
            drop-shadow(0 0 24px rgba(0, 0, 255, 0.4)),
            drop-shadow(0 0 32px rgba(255, 0, 255, 0.3)),
            drop-shadow(0 0 40px rgba(255, 0, 150, 0.2));
    }
}

/* 二级按钮（描边与悬停背景） */
.theme-clarity .action-btn.secondary { border-color: #E3CE7C; color: #2b3314; }
.theme-clarity .action-btn.secondary:hover { background: #E3CE7C; color: #2b3314; }

.theme-echo .action-btn.secondary { border-color: #5798CB; color: #1f3a52; }
.theme-echo .action-btn.secondary:hover { background: #5798CB; color: #ffffff; }

.theme-warm .action-btn.secondary { border-color: #EFA767; color: #4a2f17; }
.theme-warm .action-btn.secondary:hover { background: #EFA767; color: #3d2a15; }

.theme-yearning .action-btn.secondary { border-color: #C488F7; color: #2e1f3e; }
.theme-yearning .action-btn.secondary:hover { background: #C488F7; color: #ffffff; }

.theme-breath .action-btn.secondary { 
    border-color: rgba(255, 255, 255, 0.6); 
    color: #1a1a1a; 
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}
.theme-breath .action-btn.secondary:hover { 
    background: rgba(255, 255, 255, 0.2); 
    color: #1a1a1a; 
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.1),
        0 0 0 1px rgba(255, 255, 255, 0.9),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* ========== 扩展：主按钮、标题文字、模态边框发光联动到主题色 ========== */
/* 模态标题与关闭按钮主题色（仅改变文字色，不改布局） */
.theme-clarity .modal-header h3, .theme-clarity .close-btn { color: #2b3314; }
.theme-echo .modal-header h3, .theme-echo .close-btn { color: #1f3a52; }
.theme-warm .modal-header h3, .theme-warm .close-btn { color: #4a2f17; }
.theme-yearning .modal-header h3, .theme-yearning .close-btn { color: #2e1f3e; }
.theme-breath .modal-header h3, .theme-breath .close-btn { color: #1a1a1a; }

/* 模态边框与外发光（不夸张） */
.theme-clarity .modal-content { box-shadow: 0 8px 32px rgba(227, 206, 124, 0.25); }
.theme-echo .modal-content { box-shadow: 0 8px 32px rgba(87, 152, 203, 0.25); }
.theme-warm .modal-content { box-shadow: 0 8px 32px rgba(239, 167, 103, 0.25); }
.theme-yearning .modal-content { box-shadow: 0 8px 32px rgba(196, 136, 247, 0.25); }
.theme-breath .modal-content { 
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(255, 255, 255, 0.9),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* 主按钮（primary）增加主题色描边与发光：不改变默认黑底，只在悬停/聚焦时出现主题联动 */
.theme-clarity .action-btn.primary { box-shadow: 0 2px 8px rgba(227, 206, 124, 0.18); }
.theme-clarity .action-btn.primary:hover { box-shadow: 0 4px 14px rgba(227, 206, 124, 0.35); }

.theme-echo .action-btn.primary { box-shadow: 0 2px 8px rgba(87, 152, 203, 0.18); }
.theme-echo .action-btn.primary:hover { box-shadow: 0 4px 14px rgba(87, 152, 203, 0.35); }

.theme-warm .action-btn.primary { box-shadow: 0 2px 8px rgba(239, 167, 103, 0.18); }
.theme-warm .action-btn.primary:hover { box-shadow: 0 4px 14px rgba(239, 167, 103, 0.35); }

.theme-yearning .action-btn.primary { box-shadow: 0 2px 8px rgba(196, 136, 247, 0.18); }
.theme-yearning .action-btn.primary:hover { box-shadow: 0 4px 14px rgba(196, 136, 247, 0.35); }

.theme-breath .action-btn.primary { 
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.1),
        0 0 0 1px rgba(255, 255, 255, 0.3);
}
.theme-breath .action-btn.primary:hover { 
    box-shadow: 
        0 4px 14px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(255, 255, 255, 0.5),
        0 0 20px rgba(255, 0, 150, 0.2);
}

/* 4) 区域4 stillness：湖底绿 */
.theme-stillness .modal-content {
    background: linear-gradient(135deg, rgba(18, 46, 50, 0.95) 0%, rgba(22, 60, 64, 0.94) 55%, rgba(26, 78, 84, 0.92) 100%);
    color: #eaf6f3;
    border-color: rgba(120, 180, 170, 0.55);
}
.theme-stillness .modal-header {
    border-bottom-color: rgba(120, 180, 170, 0.4);
}
.theme-stillness .modal-header h3,
.theme-stillness .close-btn { color: #eaf6f3; }
.theme-stillness .image-box {
    background: linear-gradient(180deg, rgba(14, 42, 46, 0.96) 0%, rgba(18, 56, 60, 0.95) 60%, rgba(22, 70, 74, 0.94) 100%);
    border: 2px solid rgba(120, 180, 170, 0.5);
    box-shadow: 0 6px 24px rgba(18, 56, 60, 0.45);
}
.theme-stillness .fortune-result {
    background: rgba(120, 180, 170, 0.18);
    border-color: rgba(120, 180, 170, 0.35);
    box-shadow: 0 4px 20px rgba(18, 56, 60, 0.28);
}
.theme-stillness .fortune-text { color: #e3f4f1; }

/* 提高Stillness主题内按钮与文字的可读性 */
.theme-stillness .action-btn.primary {
    background: #0f2f2f;
    border-color: #0f2f2f;
    color: #eaf6f3;
}
.theme-stillness .action-btn.primary:hover {
    background: #184242;
    border-color: #184242;
    color: #ffffff;
}
.theme-stillness .action-btn.secondary {
    background: rgba(255, 255, 255, 0.07);
    color: #eaf6f3;
    border-color: rgba(120, 180, 170, 0.8);
}
.theme-stillness .action-btn.secondary:hover {
    background: rgba(120, 180, 170, 0.22);
    color: #ffffff;
}

/* 移除原按钮区域 */
.generate-section {
    display: none;
}

/* 交互提示文字 - 苹果风格高级设计 */
.interaction-hint {
    position: absolute;
    top: 70%; /* 使用百分比定位，位于页面下方 */
    left: 50%;
    transform: translateX(-50%);
    color: #2C3E50; /* 苹果风格高级深蓝灰色 */
    font-size: clamp(1.4rem, 3.5vw, 2rem); /* 更大的字体 */
    font-weight: 600; /* 更粗的字重，增强可读性和醒目性 */
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif; /* 苹果系统字体 */
    letter-spacing: 1.2px; /* 更大的字母间距 */
    line-height: 1.3;
    opacity: 0; /* 默认隐藏文本，悬停时显示 */
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    pointer-events: none;
    text-align: center;
    
    /* 苹果风格的高级文字效果 */
    text-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.3),
        0 4px 8px rgba(0, 0, 0, 0.2),
        0 8px 16px rgba(0, 0, 0, 0.1);
    white-space: nowrap; /* 防止文字换行 */
    z-index: 10; /* 确保在最上层 */
    
    /* 移除背景和边框，保持纯文字效果 */
}

/* 悬停时显示提示文字 - 炫酷特效 */
.central-eye-container:hover .interaction-hint {
    opacity: 1;
    transform: translateX(-50%) translateY(-8px) scale(1.05);
    filter: blur(0px);
    animation: hintAppear 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* 已经显示过的提示文字保持可见 */
.interaction-hint.hint-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(-8px) scale(1.05);
    filter: blur(0px);
}

/* 炫酷的悬停出现动画 */
@keyframes hintAppear {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(20px) scale(0.8);
        filter: blur(8px);
        text-shadow: 0 0 0 rgba(255, 255, 255, 0);
    }
    50% {
        opacity: 0.8;
        transform: translateX(-50%) translateY(-12px) scale(1.1);
        filter: blur(2px);
        text-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(-8px) scale(1.05);
        filter: blur(0px);
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.8);
    }
}

/* 响应式调整 */
@media (max-width: 1200px) {
    .central-eye-image {
        width: min(27.5vw, 27.5vh, 200px);
        height: min(27.5vw, 27.5vh, 200px);
        min-width: 140px;
        min-height: 140px;
    }
    
    .image-progress-ring {
        width: calc(min(27.5vw, 27.5vh, 200px) + 30px);
        height: calc(min(27.5vw, 27.5vh, 200px) + 30px);
        min-width: 170px;
        min-height: 170px;
    }
    
    .interaction-hint {
        top: 67%; /* 调整位置，与主样式保持一致 */
        font-size: clamp(1.1rem, 2.8vw, 1.6rem); /* 使用页脚相同的字体大小范围 */
    }
}

@media (max-width: 768px) {
    .main-content {
        padding: 4rem 0 0;
    }
    
    .central-eye-container {
        padding: 0 1rem;
    }
    
    .central-eye-image {
        width: min(25vw, 25vh, 140px);
        height: min(25vw, 25vh, 140px);
        min-width: 110px;
        min-height: 110px;
    }
    
    .image-progress-ring {
        width: calc(min(25vw, 25vh, 140px) + 30px);
        height: calc(min(25vw, 25vh, 140px) + 30px);
        min-width: 140px;
        min-height: 140px;
    }
    
    .interaction-hint {
        top: 15%; /* 调整位置，与主样式保持一致 */
        font-size: clamp(1rem, 2.8vw, 1.5rem); /* 使用页脚相同的字体大小范围 */
    }
}

@media (max-width: 480px) {
    .central-eye-image {
        width: min(22.5vw, 22.5vh, 120px);
        height: min(22.5vw, 22.5vh, 120px);
        min-width: 100px;
        min-height: 100px;
    }
    
    .image-progress-ring {
        width: calc(min(22.5vw, 22.5vh, 120px) + 30px);
        height: calc(min(22.5vw, 22.5vh, 120px) + 30px);
        min-width: 150px;
        min-height: 150px;
    }
    
    .interaction-hint {
        top: 63%; /* 调整位置，与主样式保持一致 */
        font-size: clamp(0.95rem, 2.4vw, 1.4rem); /* 使用页脚相同的字体大小范围 */
    }
}

/* 高度优化 - 保持合理距离 */
@media (max-height: 800px) {
    .main-content {
        padding: 4rem 0 0;
    }
    
    .central-eye-container {
        margin-top: -1rem;
        padding: 0 2rem;
    }
    
    .central-eye-image {
        width: min(22.5vw, 22.5vh, 160px);
        height: min(22.5vw, 22.5vh, 160px);
        min-width: 120px;
        min-height: 120px;
    }
    
    .image-progress-ring {
        width: calc(min(22.5vw, 22.5vh, 160px) + 20px);
        height: calc(min(22.5vw, 22.5vh, 160px) + 20px);
        min-width: 140px;
        min-height: 140px;
    }
    
    .interaction-hint {
        top: 65%; /* 调整位置，与主样式保持一致 */
        font-size: clamp(1rem, 2.6vw, 1.5rem); /* 使用页脚相同的字体大小范围 */
    }
}

@media (max-height: 700px) {
    .main-content {
        padding: 3rem 0 0;
    }
    
    .central-eye-container {
        margin-top: -0.5rem;
        padding: 0 2rem;
    }
    
    .central-eye-image {
        width: min(40vw, 40vh, 280px);
        height: min(40vw, 40vh, 280px);
        min-width: 200px;
        min-height: 200px;
    }
    
    .image-progress-ring {
        width: calc(min(40vw, 40vh, 280px) + 40px);
        height: calc(min(40vw, 40vh, 280px) + 40px);
        min-width: 240px;
        min-height: 240px;
    }
    
    .theme-info {
        padding: 0.8rem 1.5rem;
    }
    
    .interaction-hint {
        top: 18%; /* 调整位置 */
        font-size: clamp(0.95rem, 2.6vw, 1.4rem); /* 使用页脚相同的字体大小范围 */
    }
}

@media (max-height: 600px) {
    .main-content {
        padding: 2.5rem 0 0;
    }
    
    .central-eye-container {
        margin-top: 0;
        padding: 0 2rem;
    }
    
    .central-eye-image {
        width: min(35vw, 35vh, 220px);
        height: min(35vw, 35vh, 220px);
        min-width: 160px;
        min-height: 160px;
    }
    
    .image-progress-ring {
        width: calc(min(35vw, 35vh, 220px) + 40px);
        height: calc(min(35vw, 35vh, 220px) + 40px);
        min-width: 200px;
        min-height: 200px;
    }
    
    .theme-info {
        padding: 0.5rem 1rem;
    }
    
    .interaction-hint {
        top: 16%; /* 调整位置 */
        font-size: clamp(0.9rem, 2.4vw, 1.3rem); /* 使用页脚相同的字体大小范围 */
    }
}

/* 超高屏幕优化 - 可以适度上移 */
@media (min-height: 900px) {
    .main-content {
        padding: 6rem 0 0;
    }
    
    .central-eye-container {
        margin-top: -3rem;
        padding: 0 2rem;
    }
    
    .central-eye-image {
        width: min(25vw, 25vh, 250px);
        height: min(25vw, 25vh, 250px);
        min-width: 175px;
        min-height: 175px;
    }
    
    .image-progress-ring {
        width: calc(min(25vw, 25vh, 250px) + 20px);
        height: calc(min(25vw, 25vh, 250px) + 20px);
        min-width: 195px;
        min-height: 195px;
    }
    
    .interaction-hint {
        top: 78%; /* 超高屏幕稍微下移 */
    }
}

/* 极高屏幕优化 - 进一步上移但保持合理 */
@media (min-height: 1200px) {
    .generate-section {
        transform: translateY(-100px); /* 极高屏幕稍多上移 */
    }
}

/* 修复可能的背景问题 - 确保没有任何边框 */
.central-eye-image,
.central-eye-image:hover,
.central-eye-image:focus,
.central-eye-image:active {
    background: transparent !important;
    background-color: transparent !important;
    outline: none !important;
    border: none !important;
    box-shadow: none !important; /* 强制移除所有阴影 */
}

/* 确保图片容器也没有背景 */
.central-eye-container {
    background: transparent !important;
    border: none !important;
}

/* 主题信息样式调整 - 真正的底部栏，铺满并贴底 */
.theme-info {
    text-align: center;
    margin: 0;
    opacity: 0.9;
    width: 100vw;
    padding: 1.5rem 2rem;
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px 20px 0 0;
    margin-top: auto;
    position: relative;
    left: 0;
    right: 0;
    margin-bottom: 0;
    padding-bottom: 1.5rem;
}

.theme-title {
    font-size: clamp(1.8rem, 5vw, 2.5rem);
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    color: var(--theme-text, #ffffff);
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    letter-spacing: 1.5px;
}

.theme-description {
    font-size: clamp(1rem, 3vw, 1.4rem);
    font-weight: 500;
    margin: 0;
    color: var(--theme-text, #cccccc);
    opacity: 0.9;
    font-style: italic;
    letter-spacing: 0.8px;
}

/* 清理高度优化媒体查询中的generate-section引用 */
@media (max-height: 800px) {
    .main-content {
        padding: 4rem 0 0;
    }
    
    .central-eye-container {
        margin-top: -1rem;
        padding: 0 2rem;
    }
    
    .central-eye-image {
        width: min(45vw, 45vh, 320px);
        height: min(45vw, 45vh, 320px);
        min-width: 240px;
        min-height: 240px;
    }
    
    .image-progress-ring {
        width: calc(min(45vw, 45vh, 320px) + 40px);
        height: calc(min(45vw, 45vh, 320px) + 40px);
        min-width: 280px;
        min-height: 280px;
    }
}

@media (max-height: 700px) {
    .main-content {
        padding: 3rem 0 0;
    }
    
    .central-eye-container {
        margin-top: -0.5rem;
        padding: 0 2rem;
    }
    
    .central-eye-image {
        width: min(20vw, 20vh, 140px);
        height: min(20vw, 20vh, 140px);
        min-width: 100px;
        min-height: 100px;
    }
    
    .image-progress-ring {
        width: calc(min(20vw, 20vh, 140px) + 20px);
        height: calc(min(20vw, 20vh, 140px) + 20px);
        min-width: 120px;
        min-height: 120px;
    }
    
    .theme-info {
        padding: 0.8rem 1.5rem;
    }
}

@media (max-height: 600px) {
    .main-content {
        padding: 2.5rem 0 0;
    }
    
    .central-eye-container {
        margin-top: 0;
        padding: 0 2rem;
    }
    
    .central-eye-image {
        width: min(17.5vw, 17.5vh, 110px);
        height: min(17.5vw, 17.5vh, 110px);
        min-width: 80px;
        min-height: 80px;
    }
    
    .image-progress-ring {
        width: calc(min(17.5vw, 17.5vh, 110px) + 20px);
        height: calc(min(17.5vw, 17.5vh, 110px) + 20px);
        min-width: 100px;
        min-height: 100px;
    }
    
    .theme-info {
        padding: 0.5rem 1rem;
    }
}

/* 超高屏幕优化 */
@media (min-height: 900px) {
    .main-content {
        padding: 6rem 0 0;
    }
    
    .central-eye-container {
        margin-top: -3rem;
        padding: 0 2rem;
    }
    
    .central-eye-image {
        width: min(25vw, 25vh, 250px);
        height: min(25vw, 25vh, 250px);
        min-width: 175px;
        min-height: 175px;
    }
    
    .image-progress-ring {
        width: calc(min(25vw, 25vh, 250px) + 20px);
        height: calc(min(25vw, 25vh, 250px) + 20px);
        min-width: 195px;
        min-height: 195px;
    }
}

/* 超宽屏优化 */
@media (min-width: 1400px) {
    .central-eye-container {
        padding: 0 3rem;
    }
    
    .central-eye-image {
        width: min(22.5vw, 25vh, 300px);
        height: min(22.5vw, 25vh, 300px);
        min-width: 200px;
        min-height: 200px;
    }
    
    .image-progress-ring {
        width: calc(min(22.5vw, 25vh, 300px) + 20px);
        height: calc(min(22.5vw, 25vh, 300px) + 20px);
        min-width: 220px;
        min-height: 220px;
    }
    
    .theme-info {
        padding: 2rem 3rem;
    }
} 

/* 苹果风格的触觉反馈动画 - 重新设计 */
@keyframes applePressFeedback {
    0% {
        transform: scale(1) translateY(0);
        box-shadow: 
            0 0 0 0 rgba(255, 255, 255, 0),
            0 0 0 0 rgba(255, 255, 255, 0),
            0 0 0 0 rgba(255, 255, 255, 0),
            0 0 0 rgba(0, 0, 0, 0);
    }
    25% {
        transform: scale(0.92) translateY(6px);
        box-shadow: 
            0 0 0 8px rgba(255, 255, 255, 0.06),
            0 0 0 6px rgba(255, 255, 255, 0.08),
            0 0 0 4px rgba(255, 255, 255, 0.12),
            0 6px 24px rgba(0, 0, 0, 0.2);
    }
    50% {
        transform: scale(0.88) translateY(8px);
        box-shadow: 
            0 0 0 12px rgba(255, 255, 255, 0.08),
            0 0 0 8px rgba(255, 255, 255, 0.12),
            0 0 0 4px rgba(255, 255, 255, 0.16),
            0 8px 32px rgba(0, 0, 0, 0.25);
    }
    75% {
        transform: scale(0.85) translateY(10px);
        box-shadow: 
            0 0 0 16px rgba(255, 255, 255, 0.07),
            0 0 0 12px rgba(255, 255, 255, 0.1),
            0 0 0 8px rgba(255, 255, 255, 0.14),
            0 10px 40px rgba(0, 0, 0, 0.28);
    }
    100% {
        transform: scale(0.88) translateY(8px);
        box-shadow: 
            0 0 0 12px rgba(255, 255, 255, 0.08),
            0 0 0 8px rgba(255, 255, 255, 0.12),
            0 0 0 4px rgba(255, 255, 255, 0.16),
            0 8px 32px rgba(0, 0, 0, 0.25);
    }
}

/* 苹果风格的释放动画 - 弹性回弹 */
@keyframes appleReleaseFeedback {
    0% {
        transform: scale(0.88) translateY(8px);
    }
    25% {
        transform: scale(0.95) translateY(2px);
    }
    50% {
        transform: scale(1.05) translateY(-4px);
    }
    75% {
        transform: scale(1.02) translateY(-1px);
    }
    100% {
        transform: scale(1) translateY(0);
    }
}

/* 应用苹果风格动画到按压状态 */
.central-eye-image.pressing {
    animation: applePressFeedback 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* 释放时的弹性效果 */
.central-eye-image:not(.pressing):not(.press-ready) {
    animation: appleReleaseFeedback 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Clarity主题的苹果风格触觉反馈动画 */
@keyframes clarityPressFeedback {
    0% {
        transform: scale(1) translateY(0);
        box-shadow: 
            0 0 0 0 rgba(74, 144, 226, 0),
            0 0 0 0 rgba(74, 144, 226, 0),
            0 0 0 0 rgba(74, 144, 226, 0),
            0 0 0 rgba(74, 144, 226, 0);
    }
    25% {
        transform: scale(0.92) translateY(6px);
        box-shadow: 
            0 0 0 8px rgba(74, 144, 226, 0.06),
            0 0 0 6px rgba(74, 144, 226, 0.08),
            0 0 0 4px rgba(74, 144, 226, 0.12),
            0 6px 24px rgba(74, 144, 226, 0.2);
    }
    50% {
        transform: scale(0.88) translateY(8px);
        box-shadow: 
            0 0 0 12px rgba(74, 144, 226, 0.08),
            0 0 0 8px rgba(74, 144, 226, 0.12),
            0 0 0 4px rgba(74, 144, 226, 0.16),
            0 8px 32px rgba(74, 144, 226, 0.25);
    }
    75% {
        transform: scale(0.85) translateY(10px);
        box-shadow: 
            0 0 0 16px rgba(74, 144, 226, 0.07),
            0 0 0 12px rgba(74, 144, 226, 0.1),
            0 0 0 8px rgba(74, 144, 226, 0.14),
            0 10px 40px rgba(74, 144, 226, 0.28);
    }
    100% {
        transform: scale(0.88) translateY(8px);
        box-shadow: 
            0 0 0 12px rgba(74, 144, 226, 0.08),
            0 0 0 8px rgba(74, 144, 226, 0.12),
            0 0 0 4px rgba(74, 144, 226, 0.16),
            0 8px 32px rgba(74, 144, 226, 0.25);
    }
}

/* Clarity主题的苹果风格释放动画 */
@keyframes clarityReleaseFeedback {
    0% {
        transform: scale(0.88) translateY(8px);
    }
    25% {
        transform: scale(0.95) translateY(2px);
    }
    50% {
        transform: scale(1.05) translateY(-4px);
    }
    75% {
        transform: scale(1.02) translateY(-1px);
    }
    100% {
        transform: scale(1) translateY(0);
    }
}

/* 应用Clarity主题的苹果风格动画 */
.theme-horus_eye .central-eye-image.pressing {
    animation: clarityPressFeedback 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.theme-horus_eye .central-eye-image:not(.pressing):not(.press-ready) {
    animation: clarityReleaseFeedback 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Moment Fade 确认对话框样式 */
.confirmation-modal {
    max-width: 420px;
    text-align: center;
}

.confirmation-content {
    padding: 20px 0;
}

.fade-icon {
    font-size: 3rem;
    margin-bottom: 16px;
    animation: fadeIconPulse 2s ease-in-out infinite;
}

.fade-question {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--theme-text);
    margin: 16px 0 8px 0;
    letter-spacing: 0.5px;
}

.fade-description {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: 24px;
    line-height: 1.5;
}

.confirmation-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.confirmation-actions .action-btn {
    min-width: 140px;
    padding: 12px 24px;
    font-weight: 600;
}

@keyframes fadeIconPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
}

/* Clarity主题的交互提示文字特殊样式 - 苹果风格高级设计 */
.theme-horus_eye .interaction-hint {
    color: #2C3E50; /* 苹果风格高级深蓝灰色 */
    font-weight: 600; /* 更粗的字重，增强可读性和醒目性 */
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif; /* 苹果系统字体 */
    
    /* 苹果风格的高级文字效果 */
    text-shadow: 
        0 2px 4px rgba(44, 62, 80, 0.4),
        0 4px 8px rgba(44, 62, 80, 0.3),
        0 8px 16px rgba(44, 62, 80, 0.2);
    
    /* 移除背景和边框，保持纯文字效果 */
}

/* Social Share Modal Styles */
.social-share-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.share-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.share-option:hover {
    background: rgba(0, 0, 0, 0.8);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.share-icon {
    font-size: 1.5rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    flex-shrink: 0;
}

.share-option span {
    font-weight: 500;
    color: #ffffff;
    font-size: 0.95rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}


/* Responsive design for social share */
@media (max-width: 768px) {
    .social-share-options {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .share-option {
        padding: 12px;
    }
    
    .share-icon {
        font-size: 1.3rem;
        width: 28px;
        height: 28px;
    }
    
    .share-option span {
        font-size: 0.9rem;
    }
}

/* ============================================
   移动端专属优化样式
   ============================================ */

/* 移动端模态框优化 */
@media (max-width: 768px) {
    .modal {
        padding: 10px;
    }
    
    .modal-content {
        max-width: 95vw !important;
        max-height: 90vh !important;
        margin: 0 auto;
        overflow-y: auto;
        border-radius: 16px;
    }
    
    .modal-body {
        padding: 20px 15px;
        max-height: 75vh;
        overflow-y: auto;
    }
    
    .modal-header {
        padding: 15px 20px;
        position: sticky;
        top: 0;
        background: var(--theme-secondary, #fff);
        z-index: 10;
    }
    
    .modal-header h3 {
        font-size: 1.3rem;
    }
}

/* 移动端图片显示优化 */
@media (max-width: 768px) {
    .image-box {
        width: 100% !important;
        height: auto !important;
        max-width: 90vw;
        max-height: 60vh;
        aspect-ratio: 1/1;
        margin: 0 auto;
        overflow: hidden;
    }
    
    #generated-image {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block;
    }
    
    .image-result {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
}

/* 移动端按钮布局优化 */
@media (max-width: 768px) {
    .image-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
        padding: 0 10px;
    }
    
    .image-actions .action-btn {
        flex: 1 1 calc(50% - 4px);
        min-width: 120px;
        max-width: 180px;
        padding: 12px 16px;
        font-size: 0.95rem;
    }
    
    .image-actions .action-btn.primary {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* 小屏幕移动端优化 */
@media (max-width: 480px) {
    .modal-content {
        max-width: 98vw !important;
        max-height: 95vh !important;
        border-radius: 12px;
    }
    
    .modal-body {
        padding: 15px 10px;
    }
    
    .modal-header h3 {
        font-size: 1.1rem;
    }
    
    .image-box {
        max-height: 50vh;
    }
    
    .image-actions .action-btn {
        padding: 10px 12px;
        font-size: 0.9rem;
        min-width: 100px;
    }
    
    .inspiration-desc {
        font-size: 0.85rem;
        padding: 8px;
    }
}

/* 移动端钱包按钮优化 */
@media (max-width: 768px) {
    .wallet-info {
        padding: 8px 12px;
    }
    
    .wallet-address {
        font-size: 0.85rem;
    }
}