/* --- 1. 全局动态色相 (Global Hue & Variables) --- */
:root {
    color-scheme: light dark;
    --theme-hue: 210; 
    
    --primary-color: hsl(var(--theme-hue), 70%, 52%);
    --primary-fade: hsl(var(--theme-hue), 60%, 94%);
    
    --radius: 20px;
    --green-pwd: #34c759;

    --bg-body: #f5f5f7;
    --bg-card: #ffffff;
    --bg-glass: rgba(255, 255, 255, 0.85);
    --text-main: #1d1d1f;
    --text-sub: #6e6e73;
    --border: #e5e5e7;
    --shadow: 0 8px 30px rgba(0, 0, 0, 0.06);

    --glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
    --glass-border: rgba(255, 255, 255, 0.6);
    --glass-shadow: rgba(0, 0, 0, 0.05);
    
    --glass-hover-shadow: hsla(var(--theme-hue), 100%, 50%, 0.15);
    --btn-glass-bg: hsla(var(--theme-hue), 100%, 50%, 0.08);
}

/* --- 2. 深色主题触发 (Dark Mode Triggers) --- */
@media (prefers-color-scheme: dark) {
    body:not(.light-mode) {
        --bg-body: #000000;
        --bg-card: #1c1c1e;
        --bg-glass: rgba(28, 28, 30, 0.85);
        --text-main: #f5f5f7;
        --text-sub: #8e8e93;
        --border: #2c2c2e;
        --primary-fade: hsl(var(--theme-hue), 40%, 20%);
        --shadow: 0 10px 40px rgba(0, 0, 0, 0.5);

        --glass-bg: linear-gradient(135deg, rgba(40, 40, 45, 0.65), rgba(20, 20, 25, 0.35));
        --glass-border: rgba(255, 255, 255, 0.08);
        --glass-shadow: rgba(0, 0, 0, 0.4);
        --glass-hover-shadow: rgba(41, 151, 255, 0.2);
        --btn-glass-bg: rgba(255, 255, 255, 0.15);

        --orb-1: #1e3c72;
        --orb-2: #2a5298;
        --orb-3: #4b1248;
    }
}

body.dark-mode {
    --bg-body: #000000;
    --bg-card: #1c1c1e;
    --bg-glass: rgba(28, 28, 30, 0.85);
    --text-main: #f5f5f7;
    --text-sub: #8e8e93;
    --border: #2c2c2e;
    --primary-fade: hsl(var(--theme-hue), 40%, 20%);
    --shadow: 0 10px 40px rgba(0, 0, 0, 0.5);

    --glass-bg: linear-gradient(135deg, rgba(40, 40, 45, 0.65), rgba(20, 20, 25, 0.35));
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-shadow: rgba(0, 0, 0, 0.4);
    --glass-hover-shadow: rgba(41, 151, 255, 0.2);
    --btn-glass-bg: rgba(255, 255, 255, 0.15);

    --orb-1: #1e3c72;
    --orb-2: #2a5298;
    --orb-3: #4b1248;
}

/* --- 3. 全局基础背景继承 (Global Backgrounds) --- */
body {
    background-color: var(--bg-body) !important;
    color: var(--text-main) !important;
    transition: background-color 0.3s ease, color 0.3s ease !important;
}

.sidebar, .main-view, .modal-box, .search-wrap, .weather-panel, .setting-group, .profile-user-card, .admin-sidebar, .admin-main, .data-table {
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
    border-color: var(--border) !important;
}

input, button, select, textarea {
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
    border-color: var(--border) !important;
}

/* --- 4. 流动光斑背景 (Ambient Orbs) --- */
.background-orbs {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: -1; 
    overflow: hidden;
    pointer-events: none;
}
.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.55;
    animation: float 15s infinite alternate ease-in-out;
    transition: background 1s ease;
}
.orb-1 { width: 40vw; height: 40vw; background: var(--orb-1); top: -10%; left: -10%; animation-delay: 0s; }
.orb-2 { width: 50vw; height: 50vw; background: var(--orb-2); bottom: -20%; right: -10%; animation-delay: -5s; }
.orb-3 { width: 35vw; height: 35vw; background: var(--orb-3); top: 30%; left: 40%; animation-delay: -10s; }

@keyframes float {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(50px, 80px) scale(1.1); }
}

/* --- 5. 苹果风高级卡片覆写 (Premium Cards) --- */
.card {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(25px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: 0 10px 30px var(--glass-shadow) !important;
    overflow: hidden;
}

@media (min-width: 769px) {
    .card:hover {
        box-shadow: 0 20px 40px var(--glass-hover-shadow) !important;
        border-color: var(--primary-fade) !important;
    }
    .card:hover .get-btn {
        background-color: var(--primary-color) !important;
        color: #ffffff !important;
        transform: scale(1.05) !important;
    }
}

.card .icon-box {
    border-radius: 22% !important;
    box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.15) !important;
    transition: transform 0.3s ease !important;
}

.card:hover .icon-box {
    transform: scale(1.05) !important;
}

.card .get-btn {
    background-color: var(--btn-glass-bg) !important;
    color: var(--primary-color) !important;
    border: none !important;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* --- 6. 主题切换按钮 (Theme Toggle Button) --- */
.theme-toggle-btn {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(25px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: 0 4px 12px var(--glass-shadow) !important;
    
    width: 42px !important; 
    height: 42px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important; 
    
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
    font-size: 0 !important;
    padding: 0;
    color: transparent;
}

.theme-toggle-btn:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 8px 24px var(--glass-hover-shadow) !important;
}

.theme-toggle-btn:active {
    transform: scale(0.92) !important;
}

.theme-toggle-btn::after {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background-color: var(--text-main);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E");
    -webkit-mask-size: cover;
    mask-size: cover;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
}

body.dark-mode .theme-toggle-btn::after,
body.dark .theme-toggle-btn::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath d='M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath d='M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42'/%3E%3C/svg%3E");
    transform: rotate(180deg);
}

/* --- 7. 扩散动画渲染 & 移动端终极深度修复补丁 --- */
::view-transition-old(root) {
    animation: 0.4s cubic-bezier(0.25, 1, 0.5, 1) both fade-out;
    z-index: 1;
}
::view-transition-new(root) {
    animation: 0.4s cubic-bezier(0.25, 1, 0.5, 1) both fade-in;
    z-index: 2;
}
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }

.mobile-nav {
    view-transition-name: mobile-navbar;
    z-index: 99999 !important;
    transform: translateZ(0); 
}

.theme-toggle-btn::after {
    background-color: var(--text-main) !important;
}

.matrix-icon, .icon-box, .avatar-wrapper-pro {
    background-clip: padding-box !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0); 
}
.matrix-icon .m-img {
    background: transparent !important;
}

/* --- 8. 高级搜索框 (Search Wrapper) --- */
.search-wrap {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(25px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
    border: 1px solid rgba(128, 128, 128, 0.18) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03), inset 0 0 0 1px rgba(255, 255, 255, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.search-wrap:focus-within {
    background: var(--bg-card) !important; 
    border: 1px solid var(--primary-color) !important;
    box-shadow: 0 0 0 4px var(--glass-hover-shadow), 0 8px 24px var(--glass-shadow) !important;
}

.search-icon {
    width: 18px !important;
    height: 18px !important;
    background-color: var(--text-sub) !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    -webkit-mask-size: cover;
    mask-size: cover;
    color: transparent !important; 
    display: inline-block !important;
    margin-right: 10px !important;
    transition: background-color 0.3s ease, transform 0.3s ease !important;
}

/* --- 9. 导航栏与平台图标 (SF Symbols) --- */
.icon-home {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
}

.icon-category {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E");
}

.icon-profile {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

.nav-btn.active .apple-icon,
.tab-btn.active .apple-icon {
    transform: scale(1.15) translateY(-2px) !important;
}

.nav-btn:hover .apple-icon,
.tab-btn:hover .apple-icon {
    transform: scale(1.1) !important;
}

.mobile-nav .apple-icon {
    width: 24px !important;
    height: 24px !important;
    margin-bottom: 2px;
}

.icon-win {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='8' height='8'/%3E%3Crect x='13' y='3' width='8' height='8'/%3E%3Crect x='13' y='13' width='8' height='8'/%3E%3Crect x='3' y='13' width='8' height='8'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='8' height='8'/%3E%3Crect x='13' y='3' width='8' height='8'/%3E%3Crect x='13' y='13' width='8' height='8'/%3E%3Crect x='3' y='13' width='8' height='8'/%3E%3C/svg%3E");
}

.icon-mac {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2' ry='2'/%3E%3Cline x1='2' y1='20' x2='22' y2='20'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2' ry='2'/%3E%3Cline x1='2' y1='20' x2='22' y2='20'/%3E%3C/svg%3E");
}

.icon-pkg {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpolyline points='3.27 6.96 12 12.01 20.73 6.96'/%3E%3Cline x1='12' y1='22.08' x2='12' y2='12'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpolyline points='3.27 6.96 12 12.01 20.73 6.96'/%3E%3Cline x1='12' y1='22.08' x2='12' y2='12'/%3E%3C/svg%3E");
}

.icon-mobile {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='2' ry='2'/%3E%3Cline x1='12' y1='18' x2='12.01' y2='18'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='2' ry='2'/%3E%3Cline x1='12' y1='18' x2='12.01' y2='18'/%3E%3C/svg%3E");
}

.icon-camera { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E"); }
.icon-close { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E"); }
.modal-close-btn:hover .icon-close { color: var(--text-main) !important; transform: scale(1.1); }

/* --- 10. 精选推荐排版 (Promo Layout) --- */
.promo-layout-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    grid-column: 1 / -1 !important; 
}

.promo-row {
    display: flex;
    gap: 20px;
}

@media (max-width: 768px) {
    .promo-row {
        flex-direction: column;
    }
}

.big-promo-card {
    position: relative;
    flex: 1;
    border-radius: 24px;
    padding: 35px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: var(--glass-bg);
    backdrop-filter: blur(25px);
    display: flex;
    align-items: flex-end;
    min-height: 220px;
    text-decoration: none;
}

.big-promo-card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.gemini-promo {
    min-height: 300px;
    background: linear-gradient(135deg, rgba(26, 115, 232, 0.08), rgba(142, 36, 170, 0.08));
    border: 1px solid rgba(142, 36, 170, 0.2);
}
.gemini-promo::before {
    content: '';
    position: absolute;
    top: -50%; left: 70%;
    width: 350px; height: 350px;
    background: radial-gradient(circle, rgba(26,115,232,0.5) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(50px);
    transition: all 0.8s ease;
}
.gemini-promo:hover::before { left: 55%; transform: scale(1.2); }

.panel-promo {
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.08), rgba(39, 174, 96, 0.08));
    border: 1px solid rgba(46, 204, 113, 0.3);
}

.vscode-promo {
    background: linear-gradient(135deg, rgba(0, 122, 204, 0.08), rgba(30, 30, 30, 0.08));
    border: 1px solid rgba(0, 122, 204, 0.3);
}

.promo-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.promo-badge {
    align-self: flex-start;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(10px);
    margin-bottom: 5px;
    letter-spacing: 1px;
}

.gemini-promo .promo-badge { background: linear-gradient(90deg, #1a73e8, #8e24aa); }
.panel-promo .promo-badge { background: #27ae60; }
.vscode-promo .promo-badge { background: #007acc; }

.big-promo-card h2 {
    font-size: 32px;
    margin: 0;
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: -0.5px;
}
.panel-promo h2, .vscode-promo h2 { font-size: 26px; }

.big-promo-card p {
    font-size: 15px;
    color: var(--text-sub);
    margin: 0 0 15px 0;
    max-width: 85%;
    line-height: 1.6;
}

.promo-btn {
    align-self: flex-start;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    padding: 10px 20px;
    border-radius: 10px;
    background: rgba(128,128,128,0.1);
    border: 1px solid rgba(128,128,128,0.2);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.big-promo-card:hover .promo-btn {
    background: var(--text-main);
    color: var(--bg-body);
    transform: translateX(5px);
}

/* --- 11. 便当盒首页展示 (Bento Grid) --- */
.bento-header {
    margin: 40px 0 20px 0;
    padding: 0 10px;
}

.bento-title {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--text-main);
    margin: 0;
    letter-spacing: -0.5px;
}

.bento-subtitle {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-sub);
}

.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 180px;
    gap: 20px;
    margin-bottom: 50px;
}

.bento-card {
    background: var(--glass-bg);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid var(--glass-border);
    border-radius: 28px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
    text-decoration: none;
}

.bento-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 15px 35px var(--glass-shadow);
}

.bento-large { grid-column: span 2; grid-row: span 2; justify-content: flex-end; } 
.bento-wide { grid-column: span 2; grid-row: span 1; justify-content: center; } 
.bento-tall { grid-column: span 1; grid-row: span 2; } 
.bento-std { grid-column: span 1; grid-row: span 1; justify-content: center; align-items: center; text-align: center; } 

.bento-card .icon-box {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    font-size: 28px;
    margin-bottom: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.bento-std .icon-box { margin: 0 auto 10px auto; }
.bento-large .icon-box { width: 80px; height: 80px; font-size: 40px; margin-bottom: 20px;}

.bento-card h3 {
    font-size: 20px;
    margin: 0 0 8px 0;
    color: var(--text-main);
    font-weight: 700;
}
.bento-large h3 { font-size: 28px; }
.bento-std h3 { font-size: 16px; margin: 0; }

.bento-card p {
    font-size: 14px;
    color: var(--text-sub);
    margin: 0;
    line-height: 1.5;
    opacity: 0.9;
}
.bento-std p { display: none; } 

@media (max-width: 768px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 150px;
        gap: 15px;
    }
    .bento-large { grid-column: span 2; grid-row: span 2; }
    .bento-wide { grid-column: span 2; grid-row: span 1; }
    .bento-tall { grid-column: span 1; grid-row: span 2; }
}

/* --- 12. Hero 首页视觉区 (Hero Showcase) --- */
.hero-showcase {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 60px 20px 80px 20px;
    overflow-x: hidden; 
    border-bottom: 1px solid rgba(128, 128, 128, 0.25) !important;
    margin-bottom: 20px;
}

.hero-text-box {
    flex: 1;
    max-width: 550px;
    z-index: 10;
}

.hero-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    background: var(--primary-fade);
    color: var(--primary-color);
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 20px;
    border: 1px solid var(--primary-color);
}

.hero-title {
    font-size: 48px;
    font-weight: 900;
    line-height: 1.2;
    color: var(--text-main);
    margin: 0 0 20px 0;
    letter-spacing: -1px;
}

.hero-highlight {
    background: linear-gradient(120deg, var(--primary-color), #8e24aa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-desc {
    font-size: 16px;
    color: var(--text-sub);
    line-height: 1.8;
    margin-bottom: 35px;
}

.hero-btn {
    padding: 12px 30px;
    font-size: 16px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(var(--primary-hue), 70%, 50%, 0.3);
}

.hero-icon-matrix {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 70px);
    grid-auto-rows: 70px;
    gap: 16px;
    margin-right: 2vw;
    transform: perspective(1000px) rotateY(-15deg) rotateX(5deg);
}

.matrix-icon {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 22px; 
    box-shadow: 0 15px 35px var(--glass-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; 
    animation: matrixFlyIn 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.15) backwards;
}

.m-img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    padding: 0; 
    box-sizing: border-box;
    border-radius: inherit; 
    transition: transform 0.3s ease;
}

.m-3 .m-img {
    padding: 0;
}

.matrix-icon:hover .m-img {
    transform: scale(1.15);
}

@keyframes matrixFlyIn {
    0% {
        transform: translateX(-120vw) rotate(-90deg) scale(0.5);
        opacity: 0;
    }
    100% {
        transform: translateX(0) rotate(0deg) scale(1);
        opacity: 1;
    }
}

.m-1 { grid-column: 1; grid-row: 2; animation-delay: 0.1s; }
.m-2 { grid-column: 2; grid-row: 1; animation-delay: 0.2s; }
.m-3 { 
    grid-column: 2 / span 2; 
    grid-row: 2 / span 2; 
    animation-delay: 0.4s; 
    font-size: 48px; 
    border-radius: 32px;
    z-index: 5;
} 
.m-4 { grid-column: 2; grid-row: 4; animation-delay: 0.6s; }
.m-5 { grid-column: 3; grid-row: 1; animation-delay: 0.3s; }
.m-6 { grid-column: 4; grid-row: 2; animation-delay: 0.5s; }
.m-7 { grid-column: 4; grid-row: 3; animation-delay: 0.7s; }

@media (max-width: 900px) {
    .hero-showcase {
        flex-direction: column-reverse; 
        text-align: center;
        padding-top: 20px;
    }
    
    .hero-text-box { margin-bottom: 10px; margin-top: 115px; }
    
    .hero-icon-matrix {
        margin-right: 0;
        margin-top: 10px;
        transform: scale(0.95);
    }
    
    @keyframes matrixFlyIn {
        0% { transform: translate(-80vw, 50px) rotate(-90deg) scale(0.3); opacity: 0; }
        100% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
    }
}

/* --- 13. 项目介绍区 (Intro Section) --- */
.intro-section {
    padding: 40px 20px 60px 20px;
}

.intro-header {
    text-align: center;
    margin-bottom: 50px;
}

.intro-header h2 {
    font-size: 32px;
    color: var(--text-main);
    margin-bottom: 10px;
}

.version-badge {
    background: #3498db;
    color: white;
    font-size: 14px;
    padding: 4px 10px;
    border-radius: 12px;
    vertical-align: middle;
}

.sub-note a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: bold;
}

.intro-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
}

.intro-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    padding: 30px;
    border-radius: 20px;
    transition: transform 0.3s ease;
}

.intro-card:hover { transform: translateY(-8px); }

.intro-icon {
    font-size: 36px;
    margin-bottom: 15px;
}

.intro-card h3 {
    color: var(--text-main);
    margin-bottom: 12px;
    font-size: 18px;
}

.intro-card p {
    color: var(--text-sub);
    line-height: 1.6;
    font-size: 14px;
}

/* --- 14. 高级底部栏 (Premium Footer) --- */
.global-footer {
    border-top: 1px solid var(--border);
    padding: 60px 20px 30px 20px;
    margin-top: 60px;
    background: rgba(0, 0, 0, 0.015); 
}

[data-theme="dark"] .global-footer {
    background: rgba(0, 0, 0, 0.2);
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 50px;
    margin-bottom: 60px;
}

.footer-brand {
    max-width: 300px;
}

.footer-logo {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-main);
    margin: 0 0 15px 0;
    letter-spacing: -0.5px;
}

.footer-brand p {
    color: var(--text-sub);
    font-size: 14px;
    line-height: 1.6;
}

.footer-links-group {
    display: flex;
    gap: 80px;
    flex-wrap: wrap;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer-col h4 {
    color: var(--text-main);
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 10px 0;
}

.footer-col a {
    color: var(--text-sub);
    font-size: 14px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-col a:hover {
    color: var(--primary-color);
}

.footer-bottom {
    max-width: 1200px;
    margin: 0 auto;
    border-top: 1px solid var(--border);
    padding-top: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-sub);
    font-size: 13px;
}

.desktop-icp {
    margin-left: 20px;
}

.mobile-icp { 
    display: none; 
}

@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        gap: 50px;
        margin-bottom: 40px;
    }
    
    .footer-links-group {
        gap: 40px;
        justify-content: space-between;
    }
    
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
    
    .desktop-icp {
        display: none;
    }
    
    .mobile-icp {
        display: block;
        color: var(--primary-color);
        font-weight: bold;
    }
    
    .sidebar {
        display: none !important;
    }
}

/* --- 15. Z字型产品特性区 (Premium Features) --- */
.premium-features {
    display: flex;
    flex-direction: column;
    gap: 80px; 
    padding: 60px 20px 100px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.feature-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

.feature-block.reverse {
    flex-direction: row-reverse;
}

.feature-text {
    flex: 1;
    max-width: 450px;
}

.feature-tag {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: linear-gradient(90deg, var(--primary-color), #8e24aa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 20px;
}

.feature-text h2 {
    font-size: 42px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--text-main);
    margin: 0 0 25px 0;
    letter-spacing: -1px;
}

.feature-text p {
    font-size: 18px;
    color: var(--text-sub);
    line-height: 1.7;
    margin: 0;
}

.feature-visual {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 350px;
    background: radial-gradient(circle at center, rgba(var(--theme-hue), 70%, 50%, 0.05) 0%, transparent 70%);
}

.css-mockup-card {
    width: 300px;
    height: 200px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    backdrop-filter: blur(20px);
    transform: perspective(1000px) rotateY(-15deg) rotateX(10deg);
    transition: transform 0.5s ease;
}
.feature-block:hover .css-mockup-card { transform: perspective(1000px) rotateY(-5deg) rotateX(5deg) translateY(-10px); }

.mockup-header {
    padding: 15px;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 8px;
}
.mockup-header .dot { width: 12px; height: 12px; border-radius: 50%; }
.mockup-header .red { background: #ff5f56; }
.mockup-header .yellow { background: #ffbd2e; }
.mockup-header .green { background: #27c93f; }

.mockup-body { padding: 20px; display: flex; flex-direction: column; gap: 15px; }
.mockup-item { height: 12px; border-radius: 6px; background: var(--border); width: 100%; }

.css-eclipse-visual {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f1c40f, #e67e22);
    position: relative;
    box-shadow: 0 0 50px rgba(241, 196, 15, 0.3);
    overflow: hidden;
}
.css-eclipse-visual::after {
    content: '';
    position: absolute;
    top: -20px; right: -20px;
    width: 180px; height: 180px;
    border-radius: 50%;
    background: var(--bg-body); 
    transition: all 0.8s ease;
}
.feature-block:hover .css-eclipse-visual::after { top: 10px; right: 10px; }

.css-devices-visual {
    position: relative;
    width: 320px;
    height: 220px;
}
.device-desktop {
    position: absolute;
    top: 0; left: 0;
    width: 280px; height: 180px;
    border: 8px solid var(--text-main);
    border-radius: 12px;
    background: var(--bg-card);
    transition: transform 0.5s ease;
}
.device-mobile {
    position: absolute;
    bottom: 0; right: 0;
    width: 80px; height: 160px;
    border: 6px solid var(--text-main);
    border-radius: 16px;
    background: var(--primary-fade);
    z-index: 2;
    transition: transform 0.5s ease;
}
.feature-block:hover .device-desktop { transform: translateY(-5px); }
.feature-block:hover .device-mobile { transform: translateY(10px) translateX(-10px); }

@media (max-width: 900px) {
    .premium-features { gap: 60px; padding: 40px 20px; }
    .feature-block, .feature-block.reverse {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }
    .feature-text { max-width: 100%; }
    .feature-text h2 { font-size: 32px; }
}

/* --- 16. 高级资源提交弹窗定制 (Pro Modal Forms) --- */
.version-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 52px;
    border-radius: 14px;
    background: var(--bg-body);
    border: 1px solid var(--border);
    color: var(--text-main);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.version-btn:hover {
    border-color: var(--primary-color);
    background: var(--primary-fade);
    color: var(--primary-color);
    transform: translateY(-2px);
}

.version-btn:active {
    transform: scale(0.98);
}

.submission-pro-box {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(35px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(35px) saturate(200%) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 28px !important;
    box-shadow: 0 25px 60px var(--glass-shadow) !important;
    padding: 35px !important;
    max-height: 85vh;
    overflow-y: auto;
    scrollbar-width: none;
}

/* 隐藏滑动时的丑陋滚动条 */
.submission-pro-box::-webkit-scrollbar {
    display: none;
}

.submission-description {
    font-size: 13px;
    color: var(--text-sub);
    margin-bottom: 25px;
    margin-top: -10px;
    text-align: left;
}

.color-picker-wrapper {
    background: var(--bg-body);
    border-radius: 14px;
    padding: 8px;
    border: 1px solid var(--border);
    transition: all 0.2s ease;
}
.color-picker-wrapper:hover {
    border-color: var(--primary-color);
}
.color-picker {
    width: 100%;
    height: 32px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    background: none;
}
.color-picker::-webkit-color-swatch-wrapper { padding: 0; }
.color-picker::-webkit-color-swatch { border: none; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,0.15);}

.upload-zone {
    background: var(--bg-body) !important;
    border: 2px dashed rgba(128, 128, 128, 0.25) !important;
    border-radius: 20px !important;
}
.upload-zone:hover {
    border-color: var(--primary-color) !important;
    background: var(--primary-fade) !important;
}

.plat-group-pro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    background: var(--bg-body); 
    padding: 16px;
    border-radius: 18px;
    border: 1px solid var(--border);
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.02);
}

.plat-badge {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    font-weight: 800;
    padding: 5px 10px;
    border-radius: 8px;
    z-index: 2;
    letter-spacing: 0.5px;
}

.plat-input-field {
    width: 100%;
    padding: 14px 14px 14px 62px;
    border-radius: 12px;
    border: 1px solid var(--border) !important;
    background: var(--bg-card) !important;
    font-size: 13px;
    outline: none;
    color: var(--text-main);
    transition: all 0.2s ease;
}

.plat-input-field:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px var(--primary-fade);
}

/* --- 移动端弹窗与表单适配补丁 --- */
@media (max-width: 480px) {
    /* 强制减小移动端弹窗内边距，挽救被挤出屏幕的圆角 */
    .admin-modal-box, 
    .submission-pro-box {
        padding: 24px 20px !important; 
        width: 92% !important;
    }
    
    /* 缩小上传图标占用的左侧空间，给右侧输入框留位置 */
    .form-top-grid {
        grid-template-columns: 85px 1fr !important;
        gap: 15px !important;
    }
    
    .upload-zone {
        width: 85px !important;
        height: 85px !important;
    }
}

/* 终极移动端专属优化补丁 (iOS & Android 深度底层适配)*/
/* 修复系统深色模式与网站深浅色打架，导致切换按钮图标不显示的问题 */
@media (prefers-color-scheme: dark) {
    body:not(.light-mode) .theme-toggle-btn::after {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath d='M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath d='M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42'/%3E%3C/svg%3E");
        transform: rotate(180deg);
    }
}

/* 修复 iOS Safari 渐变彩色文字在深色模式下变成实心长方形的底层渲染 Bug */
.hero-highlight, .feature-tag {
    background-clip: text !important;
    -webkit-background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-box-decoration-break: clone; /* 强制苹果保持内联元素背景独立 */
    display: inline-block; /* 防实心魔法核心 */
}

/* 修复 iPhone 橡皮筋回弹刷新时，AppStore 标签溢出到底部导航栏的层级穿透 Bug */
.mobile-nav {
    z-index: 99999 !important;
    transform: translateZ(0); /* 强制开启独立硬件加速层，将导航栏焊死在最顶层 */
    -webkit-transform: translateZ(0);
}

/* 修复 iPhone 深浅色切换时，由于圆角切割算法导致的图标“小黑边”溢出 Bug */
.matrix-icon, .icon-box, .avatar-wrapper-pro {
    -webkit-mask-image: -webkit-radial-gradient(white, black); /* 苹果原生防边缘漏色魔法 */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
}

/* 修复 Android 切换主题色时因为部分元素未同步过渡而导致的卡顿、闪烁、掉帧问题 */
body, .sidebar, .main-view, .modal-box, .search-wrap, .weather-panel, .setting-group-pro, .card, .bento-card, .matrix-icon, .mobile-nav, .big-promo-card {
    /* 🌟 核心修复 2：将 all 替换为具体属性，破解 WebKit 变量重绘丢失 Bug */
    transition: background-color 0.4s cubic-bezier(0.25, 1, 0.5, 1),
                color 0.4s cubic-bezier(0.25, 1, 0.5, 1),
                border-color 0.4s cubic-bezier(0.25, 1, 0.5, 1),
                box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}