/* 梦幻星空主题 - 灵感来自Yayoi Kusama和John Maeda */
    body.theme-starry {
        background: #0a0a1a;
        color: #e0e6ff;
        font-family: 'SF Pro Display', 'Helvetica Neue', 'Arial', sans-serif;
        overflow-x: hidden;
        position: relative;
    }

    /* 动态星空背景 - Kusama风格的无限波点宇宙 */
    body.theme-starry::before {
        background:
            radial-gradient(circle at 15% 20%, rgba(147, 51, 234, 0.15) 0%, transparent 50%),
            radial-gradient(circle at 85% 80%, rgba(59, 130, 246, 0.12) 0%, transparent 50%),
            radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.08) 0%, transparent 60%),
            radial-gradient(circle at 25% 75%, rgba(236, 72, 153, 0.06) 0%, transparent 40%),
            radial-gradient(circle at 75% 25%, rgba(34, 211, 238, 0.04) 0%, transparent 30%);
        background-size: 400% 400%, 300% 300%, 500% 500%, 200% 200%, 600% 600%;
        animation: starryGalaxyFlow 30s ease-in-out infinite;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        content: '';
        pointer-events: none;
        z-index: -2;
    }

    @keyframes starryGalaxyFlow {
        0%, 100% {
            background-position: 0% 0%, 100% 100%, 50% 50%, 25% 75%, 75% 25%;
            filter: hue-rotate(0deg) brightness(1);
        }
        25% {
            background-position: 100% 0%, 0% 100%, 75% 25%, 50% 50%, 25% 75%;
            filter: hue-rotate(20deg) brightness(1.1);
        }
        50% {
            background-position: 100% 100%, 0% 0%, 25% 75%, 75% 25%, 50% 50%;
            filter: hue-rotate(-10deg) brightness(0.9);
        }
        75% {
            background-position: 0% 100%, 100% 0%, 50% 50%, 25% 75%, 75% 25%;
            filter: hue-rotate(15deg) brightness(1.05);
        }
    }

    /* John Maeda风格的生成星星 - 动态交互元素 */
    body.theme-starry::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image:
            radial-gradient(1px 1px at 20px 30px, rgba(255, 255, 255, 0.8), transparent),
            radial-gradient(1px 1px at 40px 70px, rgba(147, 197, 253, 0.6), transparent),
            radial-gradient(2px 2px at 90px 40px, rgba(196, 181, 253, 0.7), transparent),
            radial-gradient(1px 1px at 130px 80px, rgba(251, 207, 232, 0.5), transparent),
            radial-gradient(1px 1px at 160px 30px, rgba(255, 255, 255, 0.9), transparent);
        background-repeat: repeat;
        background-size: 200px 100px;
        animation: starryTwinkle 4s ease-in-out infinite;
        pointer-events: none;
        z-index: -1;
    }

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

    /* 主容器 - 星空中的漂浮卡片 */
    body.theme-starry .mdui-container {
        max-width: 900px;
        margin: 40px auto;
        padding: 0 20px;
        position: relative;
        z-index: 2;
    }

    body.theme-starry .mdui-card {
        background: rgba(15, 23, 42, 0.85);
        backdrop-filter: blur(20px) saturate(150%);
        border: 1px solid rgba(147, 197, 253, 0.2);
        border-radius: 24px;
        padding: 48px;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
        box-shadow:
            0 20px 40px rgba(0, 0, 0, 0.4),
            0 0 0 1px rgba(147, 197, 253, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.1),
            inset 0 -1px 0 rgba(0, 0, 0, 0.3);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Kusama风格的波点装饰 */
    body.theme-starry .mdui-card::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background-image:
            radial-gradient(circle at 20% 20%, rgba(147, 51, 234, 0.03) 2px, transparent 2px),
            radial-gradient(circle at 80% 30%, rgba(59, 130, 246, 0.04) 3px, transparent 3px),
            radial-gradient(circle at 40% 70%, rgba(236, 72, 153, 0.03) 2px, transparent 2px),
            radial-gradient(circle at 70% 80%, rgba(34, 211, 238, 0.02) 4px, transparent 4px);
        background-size: 120px 120px, 150px 150px, 100px 100px, 180px 180px;
        animation: starryDotsFloat 25s linear infinite;
        pointer-events: none;
        z-index: -1;
    }

    @keyframes starryDotsFloat {
        0% { transform: rotate(0deg) translateX(0px); }
        100% { transform: rotate(360deg) translateX(20px); }
    }

    body.theme-starry .mdui-card:hover {
        transform: translateY(-8px) scale(1.02);
        box-shadow:
            0 30px 60px rgba(0, 0, 0, 0.5),
            0 0 0 2px rgba(147, 197, 253, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
        border-color: rgba(147, 197, 253, 0.4);
    }

    /* 头像 - 星光环绕效果 */
    body.theme-starry .mdui-img-circle {
        width: 120px !important;
        height: 120px !important;
        border: 3px solid rgba(147, 197, 253, 0.3);
        border-radius: 50%;
        margin: 0 auto 40px auto;
        display: block;
        background: rgba(15, 23, 42, 0.8);
        padding: 6px;
        box-shadow:
            0 0 30px rgba(147, 197, 253, 0.4),
            0 0 60px rgba(147, 51, 234, 0.2),
            0 8px 32px rgba(0, 0, 0, 0.3);
        position: relative;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* 星光脉冲效果 */
    body.theme-starry .mdui-img-circle::before {
        content: '';
        position: absolute;
        top: -10px;
        left: -10px;
        right: -10px;
        bottom: -10px;
        background: radial-gradient(circle, rgba(147, 197, 253, 0.3) 0%, transparent 70%);
        border-radius: 50%;
        animation: starryPulse 3s ease-in-out infinite;
        z-index: -1;
    }

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

    body.theme-starry .mdui-img-circle:hover {
        transform: scale(1.05) rotate(5deg);
        border-color: rgba(147, 197, 253, 0.6);
        box-shadow:
            0 0 40px rgba(147, 197, 253, 0.6),
            0 0 80px rgba(147, 51, 234, 0.3),
            0 12px 40px rgba(0, 0, 0, 0.4);
    }

    /* 标题 - 星光渐变文字 */
    body.theme-starry h1 {
        font-size: 32px;
        font-weight: 700;
        text-align: center;
        margin: 0 0 40px 0;
        position: relative;
        background: linear-gradient(135deg, #e0e6ff 0%, #c7d2fe 25%, #a5b4fc 50%, #818cf8 75%, #6366f1 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-size: 200% 200%;
        animation: starryTextShimmer 4s ease-in-out infinite;
        text-shadow: 0 0 20px rgba(147, 197, 253, 0.5);
        letter-spacing: -0.5px;
    }

    @keyframes starryTextShimmer {
        0%, 100% {
            background-position: 0% 50%;
            filter: brightness(1);
        }
        50% {
            background-position: 100% 50%;
            filter: brightness(1.2);
        }
    }

    body.theme-starry h1::after {
        content: '';
        position: absolute;
        bottom: -16px;
        left: 50%;
        transform: translateX(-50%);
        width: 80px;
        height: 3px;
        background: linear-gradient(90deg, transparent, #a5b4fc, #818cf8, transparent);
        border-radius: 2px;
        animation: starryGlowLine 3s ease-in-out infinite;
    }

    @keyframes starryGlowLine {
        0%, 100% {
            opacity: 0.6;
            transform: translateX(-50%) scaleX(1);
        }
        50% {
            opacity: 1;
            transform: translateX(-50%) scaleX(1.2);
        }
    }

    /* 正文 - 梦幻色彩 */
    body.theme-starry p {
        color: #cbd5e1;
        font-size: 16px;
        line-height: 1.7;
        margin-bottom: 20px;
        font-weight: 400;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    }

    body.theme-starry strong {
        color: #e0e6ff;
        font-weight: 600;
        background: linear-gradient(135deg, rgba(147, 197, 253, 0.2), rgba(168, 85, 247, 0.2));
        padding: 2px 6px;
        border-radius: 6px;
        border: 1px solid rgba(147, 197, 253, 0.2);
        text-shadow: 0 0 8px rgba(147, 197, 253, 0.5);
    }

    body.theme-starry hr {
        border: none;
        height: 2px;
        background: linear-gradient(90deg, transparent, rgba(147, 197, 253, 0.5), transparent);
        margin: 32px 0;
        position: relative;
        overflow: visible;
    }

    body.theme-starry hr::before {
        content: '✦';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #0a0a1a;
        color: #a5b4fc;
        padding: 0 16px;
        font-size: 18px;
        animation: starrySymbolRotate 8s linear infinite;
    }

    @keyframes starrySymbolRotate {
        0% { transform: translate(-50%, -50%) rotate(0deg); }
        100% { transform: translate(-50%, -50%) rotate(360deg); }
    }

    /* 按钮 - 星光交互效果 */
    body.theme-starry .mdui-btn {
        background: linear-gradient(135deg, #6366f1, #8b5cf6);
        color: #ffffff;
        border: 1px solid rgba(147, 197, 253, 0.3);
        border-radius: 12px;
        font-weight: 600;
        font-size: 16px;
        padding: 16px 24px;
        min-height: 52px;
        letter-spacing: 0.3px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        position: relative;
        overflow: hidden;
        box-shadow:
            0 4px 12px rgba(99, 102, 241, 0.3),
            0 0 0 1px rgba(147, 197, 253, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    /* 按钮内部星光流动 */
    body.theme-starry .mdui-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1;
    }

    body.theme-starry .mdui-btn:hover {
        background: linear-gradient(135deg, #4f46e5, #7c3aed);
        transform: translateY(-2px);
        box-shadow:
            0 8px 25px rgba(99, 102, 241, 0.5),
            0 0 0 2px rgba(147, 197, 253, 0.4),
            0 0 20px rgba(147, 197, 253, 0.3);
        border-color: rgba(147, 197, 253, 0.6);
    }

    body.theme-starry .mdui-btn:hover::before {
        left: 100%;
    }

    body.theme-starry .mdui-btn:active {
        transform: translateY(-1px);
        box-shadow:
            0 4px 12px rgba(99, 102, 241, 0.4),
            0 0 0 1px rgba(147, 197, 253, 0.3);
    }

    /* 主操作按钮 - 特殊星光效果 */
    body.theme-starry .mdui-btn.mdui-color-theme-accent {
        background: linear-gradient(135deg, #ec4899, #f43f5e);
        box-shadow:
            0 4px 12px rgba(236, 72, 153, 0.3),
            0 0 0 1px rgba(251, 207, 232, 0.3);
    }

    body.theme-starry .mdui-btn.mdui-color-theme-accent:hover {
        background: linear-gradient(135deg, #db2777, #e11d48);
        box-shadow:
            0 8px 25px rgba(236, 72, 153, 0.5),
            0 0 0 2px rgba(251, 207, 232, 0.5),
            0 0 20px rgba(251, 207, 232, 0.4);
    }

    /* 次要按钮 */
    body.theme-starry .mdui-btn.mdui-color-red {
        background: linear-gradient(135deg, #64748b, #475569);
        box-shadow:
            0 4px 12px rgba(100, 116, 139, 0.3),
            0 0 0 1px rgba(148, 163, 184, 0.3);
    }

    body.theme-starry .mdui-btn.mdui-color-red:hover {
        background: linear-gradient(135deg, #475569, #334155);
        box-shadow:
            0 8px 25px rgba(100, 116, 139, 0.5),
            0 0 0 2px rgba(148, 163, 184, 0.5);
    }

    /* 输入框 - 星空边框效果 */
    body.theme-starry .mdui-textfield {
        margin: 32px 0;
        position: relative;
    }

    body.theme-starry .mdui-textfield-input {
        background: rgba(15, 23, 42, 0.7);
        border: 2px solid rgba(147, 197, 253, 0.2);
        border-radius: 16px;
        color: #e0e6ff;
        font-size: 16px;
        padding: 18px 24px;
        height: 56px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        font-weight: 500;
        backdrop-filter: blur(10px);
        box-shadow:
            inset 0 2px 4px rgba(0, 0, 0, 0.2),
            0 0 0 1px rgba(147, 197, 253, 0.1);
    }

    body.theme-starry .mdui-textfield-input:focus {
        background: rgba(15, 23, 42, 0.9);
        border-color: rgba(147, 197, 253, 0.6);
        outline: none;
        box-shadow:
            0 0 0 4px rgba(147, 197, 253, 0.2),
            inset 0 2px 4px rgba(0, 0, 0, 0.2),
            0 0 20px rgba(147, 197, 253, 0.3);
        transform: translateY(-2px);
    }

    body.theme-starry .mdui-textfield-input::placeholder {
        color: #94a3b8;
        font-weight: 400;
        transition: all 0.3s ease;
    }

    body.theme-starry .mdui-textfield-input:focus::placeholder {
        color: #64748b;
        opacity: 0.8;
    }

    /* 解析结果区域 - 星空展示效果 */
    body.theme-starry .down {
        margin-top: 48px;
        padding: 32px;
        background: rgba(15, 23, 42, 0.6);
        border: 1px solid rgba(147, 197, 253, 0.2);
        border-radius: 20px;
        backdrop-filter: blur(15px);
        box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
        position: relative;
        overflow: hidden;
    }

    /* 星空装饰背景 */
    body.theme-starry .down::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image:
            radial-gradient(circle at 10% 10%, rgba(147, 197, 253, 0.05) 2px, transparent 2px),
            radial-gradient(circle at 90% 90%, rgba(168, 85, 247, 0.04) 3px, transparent 3px),
            radial-gradient(circle at 50% 50%, rgba(236, 72, 153, 0.03) 2px, transparent 2px);
        background-size: 80px 80px, 120px 120px, 100px 100px;
        animation: starryBackgroundFloat 20s linear infinite;
        pointer-events: none;
        z-index: -1;
    }

    @keyframes starryBackgroundFloat {
        0% { transform: rotate(0deg) translateY(0px); }
        100% { transform: rotate(360deg) translateY(-10px); }
    }

    body.theme-starry .down h4 {
        font-size: 24px;
        font-weight: 700;
        color: #e0e6ff;
        text-align: center;
        margin: 0 0 32px 0;
        position: relative;
        background: linear-gradient(135deg, #e0e6ff, #c7d2fe, #a5b4fc);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-size: 200% 200%;
        animation: starryTextShimmer 5s ease-in-out infinite;
        text-shadow: 0 0 15px rgba(147, 197, 253, 0.5);
    }

    body.theme-starry .down h4::after {
        content: '';
        position: absolute;
        bottom: -12px;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 2px;
        background: linear-gradient(90deg, transparent, #a5b4fc, transparent);
        border-radius: 1px;
        animation: starryGlowLine 4s ease-in-out infinite;
    }

    /* 图片展示区域 - 悬浮效果 */
    body.theme-starry .down div[style*="display: inline-block"] {
        background: rgba(15, 23, 42, 0.5);
        border: 1px solid rgba(147, 197, 253, 0.2);
        border-radius: 16px;
        padding: 20px;
        margin: 16px;
        text-align: center;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        backdrop-filter: blur(10px);
        box-shadow:
            0 4px 15px rgba(0, 0, 0, 0.2),
            0 0 0 1px rgba(147, 197, 253, 0.1);
        position: relative;
        overflow: hidden;
    }

    body.theme-starry .down div[style*="display: inline-block"]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, #a5b4fc, transparent);
        transform: translateX(-100%);
        transition: transform 0.6s ease;
    }

    body.theme-starry .down div[style*="display: inline-block"]:hover {
        background: rgba(15, 23, 42, 0.8);
        border-color: rgba(147, 197, 253, 0.5);
        transform: translateY(-6px) scale(1.02);
        box-shadow:
            0 12px 30px rgba(0, 0, 0, 0.4),
            0 0 0 2px rgba(147, 197, 253, 0.3),
            0 0 25px rgba(147, 197, 253, 0.2);
    }

    body.theme-starry .down div[style*="display: inline-block"]:hover::before {
        transform: translateX(100%);
    }

    body.theme-starry .down img {
        border-radius: 12px;
        border: 2px solid rgba(147, 197, 253, 0.2);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        transition: all 0.4s ease;
        max-width: 200px;
        height: auto;
    }

    body.theme-starry .down img:hover {
        transform: scale(1.05);
        border-color: rgba(147, 197, 253, 0.6);
        box-shadow:
            0 8px 20px rgba(0, 0, 0, 0.4),
            0 0 20px rgba(147, 197, 253, 0.3);
    }

    body.theme-starry .down .mdui-btn {
        margin: 10px;
        min-width: 120px;
        max-width: 160px;
        font-size: 15px;
        padding: 14px 24px;
        min-height: 48px;
        border-radius: 12px;
        backdrop-filter: blur(5px);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    /* 错误提示优化 */
    body.theme-starry .mdui-snackbar {
        background: rgba(15, 23, 42, 0.95) !important;
        color: #e0e6ff !important;
        border: 1px solid rgba(147, 197, 253, 0.3) !important;
        backdrop-filter: blur(15px) !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
        border-radius: 12px !important;
    }

    /* 主题选择器适配 */
    body.theme-starry .theme-selector {
        background: rgba(15, 23, 42, 0.95);
        border: 1px solid rgba(147, 197, 253, 0.3);
        color: #e0e6ff;
        backdrop-filter: blur(15px);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    }

    body.theme-starry .theme-option:hover {
        background: rgba(147, 197, 253, 0.15);
    }

    body.theme-starry .theme-option.active {
        background: rgba(147, 197, 253, 0.25);
        border-color: rgba(147, 197, 253, 0.4);
    }

    /* 加载状态 - 星星闪烁 */
    body.theme-starry .loading {
        color: #a5b4fc;
        position: relative;
        display: inline-block;
    }

    body.theme-starry .loading::after {
        content: '✦';
        animation: starryLoading 1.5s ease-in-out infinite;
        margin-left: 4px;
        display: inline-block;
    }

    @keyframes starryLoading {
        0%, 100% {
            opacity: 0.3;
            transform: rotate(0deg) scale(1);
        }
        50% {
            opacity: 1;
            transform: rotate(180deg) scale(1.2);
        }
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
        body.theme-starry .mdui-container {
            margin: 20px 16px;
            padding: 0;
        }

        body.theme-starry .mdui-card {
            padding: 32px 24px;
            border-radius: 16px;
        }

        body.theme-starry h1 {
            font-size: 28px;
            margin-bottom: 32px;
        }

        body.theme-starry .mdui-btn {
            width: 100%;
            margin: 8px 0;
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        body.theme-starry .mdui-textfield-input {
            font-size: 16px; /* 防止iOS缩放 */
        }

        body.theme-starry .down {
            padding: 24px 16px;
        }

        body.theme-starry .down div[style*="display: inline-block"] {
            display: block;
            margin: 16px auto;
            max-width: 280px;
        }

        body.theme-starry .down img {
            width: 100% !important;
            max-width: 240px;
        }
    }

    /* 暗色模式适配 */
    @media (prefers-color-scheme: dark) {
        body.theme-starry {
            background: #050510;
        }
    }

    /* 减少动画效果适配 */
    @media (prefers-reduced-motion: reduce) {
        body.theme-starry *,
        body.theme-starry *::before,
        body.theme-starry *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }