/* knowledge.html standalone display stylesheet. Version 20260721-header1. */
/* This file must not be imported by the homepage or another display page. */

/* ===== css/style.css ===== */
/* 鍏ㄥ眬閲嶇疆 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow-y: scroll;
    overscroll-behavior: none;
}

body {
    font-family: 'Microsoft YaHei', 'PingFang SC', Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #ffffff;
    -webkit-overflow-scrolling: touch;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 20px;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

/* 瀵艰埅鏍?*/
.header {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: box-shadow 0.2s ease;
    transform: translateZ(0);
}

/* 移动端 sticky header 优化 */
@media (max-width: 768px) {
    .header {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
    }
}

.header.header-scrolled {
    box-shadow: 0 2px 20px rgba(0,0,0,0.1);
}

.navbar {
    padding: 15px 0;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.4rem;
    font-weight: bold;
    color: #667eea;
}

.logo img {
    width: 40px;
    height: 40px;
}

.nav-menu {
    display: flex;
    gap: 25px;
}

.nav-menu a {
    color: #333;
    font-weight: 500;
    padding: 6px 3px;
    border-radius: 6px;
    transition: all 0.3s;
}

.nav-menu a:hover,
.nav-menu a.active {
    color: #667eea;
    background: rgba(102,126,234,0.08);
}

.nav-actions {
    display: flex;
    gap: 12px;
}

.btn-login,
.btn-register {
    padding: 8px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.3s;
}

.btn-login {
    background: transparent;
    color: #667eea;
    border: 1px solid #667eea;
}

.btn-login:hover {
    background: #667eea;
    color: white;
}

.btn-register {
    background: #667eea;
    color: white;
}

.btn-register:hover {
    background: #5a6fd8;
}

/* 杞挱鍥惧尯鍩?*/
.carousel-section {
    padding: 20px 15px;
    background: #ffffff;
}

.carousel-wrapper {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 15px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: stretch;
}

/* 涓昏疆鎾浘 */
.carousel-main {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    height: 450px;
    min-width: 0;
}

.carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
    touch-action: pan-y pinch-zoom;
    -webkit-user-select: none;
    user-select: none;
}

.carousel-slide {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    will-change: opacity;
}

.carousel-slide.active {
    opacity: 1;
    visibility: visible;
}

.carousel-track .carousel-slide .carousel-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}
.slide-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    padding: 30px 40px;
}

.slide-icon {
    font-size: 80px;
    margin-bottom: 15px;
}

.slide-content h2 {
    font-size: 26px;
    margin-bottom: 15px;
    font-weight: 700;
}

.slide-content p {
    font-size: 15px;
    line-height: 1.8;
    opacity: 0.95;
    max-width: 700px;
}

/* 杞挱绠ご */
.carousel-prev,
.carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.25);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
    z-index: 10;
}

.carousel-prev:hover,
.carousel-next:hover {
    background: rgba(255,255,255,0.5);
}

.carousel-prev {
    left: 15px;
}

.carousel-next {
    right: 15px;
}

/* 杞挱鍦嗙偣 */
.carousel-dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: all 0.3s;
}

.dot.active,
.dot:hover {
    background: white;
    width: 28px;
    border-radius: 5px;
}

/* 渚ц竟骞垮憡 */
.carousel-sidebar {
    width: 380px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    height: 450px;
    flex-shrink: 0;
}

.sidebar-ad {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    color: white;
    text-align: center;
    padding: 20px 15px;
    transition: transform 0.3s;
    cursor: pointer;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 0;
}

.sidebar-ad:hover {
    transform: translateY(-3px);
}

.ad-icon {
    font-size: 32px;
    margin-bottom: 10px;
    line-height: 1;
    display: block;
}

.sidebar-ad h3 {
    font-size: 20px;
    margin-bottom: 10px;
}

.sidebar-ad p {
    font-size: 13px;
    line-height: 1.6;
    opacity: 0.9;
}

/* 鏈嶅姟鍖哄煙 */
.services-section {
	background: #f8f9fa;
    padding: 70px 20px;
}

.services-section h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 40px;
    color: #1a202c;
    font-weight: 800;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto;
}

.service-card {
    background: #ffffff;
    padding: 25px 25px;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
    border: 1px solid #e8ecf1;
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(102,126,234,0.15);
    border-color: #667eea;
}

.service-icon {
    font-size: 32px;
    flex-shrink: 0;
    line-height: 1;
}

.service-card h3 {
    color: #1a202c;
    margin-bottom: 6px;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.4;
}

.service-card p {
    color: #718096;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}
/* CTA鍖哄煙 */
.cta-section {
    padding: 60px 20px;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    text-align: center;
    color: white;
}

.cta-section h2 {
    font-size: 2rem;
    margin-bottom: 25px;
}

.btn-cta {
    padding: 14px 40px;
    background: white;
    color: #f5576c;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.3s;
}

.btn-cta:hover {
    transform: translateY(-3px);
}

/* 椤佃剼 */
.footer {
	background: #ffffff;
    color: #333;
    padding: 50px 20px 20px;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 40px;
    margin-bottom: 30px;
}

.why-us-section {
	background: #f8f9fc;
    padding: 70px 20px;
}

.why-us-section h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 40px;
    color: #333;
}

.advantages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto;
}

.advantage-card {
    background: #ffffff;
    padding: 30px 25px;
    border-radius: 10px;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
}

.advantage-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.advantage-icon {
    font-size: 40px;
    display: block;
    margin-bottom: 12px;
}

.advantage-card h3 {
    color: #667eea;
    margin-bottom: 12px;
    font-size: 1.3rem;
}

.advantage-card p {
    color: #666;
}

.footer-section h4 {
    color: #333;
    margin-bottom: 15px;
    font-size: 1.1rem;
    font-weight: 700;
    position: relative;
}

.footer-section h4::after {
    content: '';
    display: block;
    width: 30px;
    height: 2px;
    background: #667eea;
    margin-top: 8px;
    border-radius: 1px;
}

.footer-section p {
    color: #666;
    line-height: 1.8;
    margin-bottom: 8px;
}

/* 绔欑偣瀵艰埅 */
.footer-nav {
    flex: 1;
}

.footer-nav-columns {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
    padding: 20px 0;
}

.footer-nav-column {
    display: flex;
    flex-direction: column;
}

.footer-nav-column h5 {
    font-size: 15px;
    color: #333;
    margin-bottom: 12px;
    font-weight: 700;
    position: relative;
    padding-bottom: 8px;
}

.footer-nav-column h5 a {
    color: inherit;
    text-decoration: none;
    display: inline-block;
}

.footer-nav-column h5 a:hover {
    color: #667eea;
}

.footer-nav-column h5::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 20px;
    height: 2px;
    background: #667eea;
    border-radius: 1px;
}

.footer-nav-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-nav-column ul li a {
    font-size: 13px;
    color: #666;
    text-decoration: none;
    transition: all 0.3s;
    padding: 4px 0;
    display: inline-block;
    position: relative;
}

.footer-nav-column ul li a::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #667eea;
    opacity: 0;
    transition: opacity 0.3s;
}

.footer-nav-column ul li a:hover {
    color: #f0f0ff;
    transform: translateX(4px);
}

.footer-nav-column ul li a:hover::before {
    opacity: 1;
}

/* 鑱旂郴鎴戜滑 */
.footer-contact {
    min-width: 200px;
}

/* 鍏充簬鎴戜滑 */
.footer-about {
    min-width: 200px;
}

.footer-bottom {
    text-align: center;
    padding: 20px 0;
    border-top: 1px solid #e2e8f0;
    color: #888;
    font-size: 13px;
}
/* 妯℃€佹 */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: white;
    padding: 40px;
    border-radius: 12px;
    width: 400px;
    max-width: 90vw;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-content .close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    cursor: pointer;
    color: #999;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;
    transition: all 0.3s;
}

.modal-content .close:hover {
    background: #e0e0e0;
    color: #333;
}

.modal-content h2 {
    margin-bottom: 20px;
    color: #333;
}

.modal-content input,
.modal-content textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
}

.modal-content textarea {
    resize: vertical;
}

.btn-auth {
    width: 100%;
    padding: 12px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    margin-top: 10px;
}

.btn-auth:hover {
    background: #5a6fd8;
}

/* 妯℃€佹澶у昂瀵?*/
.modal-lg {
    width: 520px !important;
    max-height: 90vh;
    overflow-y: auto;
}

/* 鐧诲綍娉ㄥ唽Tab */
.auth-tabs {
    display: flex;
    border-bottom: 2px solid #eee;
    margin-bottom: 20px;
}

.auth-tab {
    flex: 1;
    padding: 12px 0;
    border: none;
    background: none;
    font-size: 16px;
    font-weight: 600;
    color: #999;
    cursor: pointer;
    transition: all 0.3s;
    border-bottom: 3px solid transparent;
}

.auth-tab.active {
    color: #667eea;
    border-bottom-color: #667eea;
}

/* 闈㈡澘鍒囨崲 */
.auth-panel {
    display: none;
}

.auth-panel.active {
    display: block;
}

/* 搴曢儴鍒囨崲閾炬帴 */
.auth-switch {
    text-align: center;
    margin-top: 15px;
    font-size: 14px;
    color: #666;
}

.auth-switch a {
    color: #667eea;
    font-weight: 600;
}

.agree-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #666;
    margin-bottom: 10px;
}

/* 鍝嶅簲寮忚璁?*/

/* ============================================
   鏂囩珷璇︽儏椤垫牱寮?
   ============================================ */



/* ============================================
   鏂囩珷鍒楄〃椤?- 鐩稿叧鎺ㄨ崘锛堢嫭绔嬫牱寮忥級
   ============================================ */

.articles-related {
    margin-top: 50px;
    padding: 30px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.08);
}

.related-title {
    font-size: 22px;
    color: #1a202c;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 3px solid #667eea;
    font-weight: 600;
}

.related-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.related-item {
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 15px;
}

.related-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.related-link {
    display: flex;
    gap: 15px;
    text-decoration: none;
    transition: all 0.3s;
    padding: 10px;
    border-radius: 8px;
}

.related-link:hover {
    background: #f7fafc;
    transform: translateX(5px);
}

.related-thumb {
    width: 120px;
    height: 80px;
    flex-shrink: 0;
    border-radius: 6px;
    object-fit: cover;
}

.related-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.related-name {
    font-size: 16px;
    color: #2d3748;
    margin-bottom: 8px;
    font-weight: 500;
    line-height: 1.4;
}

.related-link:hover .related-name {
    color: #667eea;
}

.related-date {
    font-size: 13px;
    color: #a0aec0;
}

/* 鍝嶅簲寮?*/
@media (max-width: 768px) {
    .articles-related {
        padding: 20px;
    }
    
    .related-link {
        flex-direction: column;
    }
    
    .related-thumb {
        width: 100%;
        height: 150px;
    }
    
    .related-name {
        font-size: 15px;
    }
}
/* ============================================
   鏂囩珷璇︽儏椤垫殫鑹叉ā寮?
   ============================================ */

.menu-toggle-btn {
    display: none;
    background: transparent;
    border: none;
    font-size: 24px;
    color: #333;
    cursor: pointer;
    padding: 5px 10px;
    transition: all 0.3s;
}

.menu-toggle-btn:hover {
    color: #667eea;
}

/* 绉诲姩绔牱寮?*/
@media (max-width: 768px) {
    /* nav-container: logo + nav-actions 鍚岃 */
    .nav-container {
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        padding: 8px 10px;
        gap: 4px;
    }

    /* Logo 缂╁皬 */
    .logo {
        font-size: 1rem;
    }

    .logo img {
        width: 32px;
        height: 32px;
    }

    /* nav-menu: 鐐瑰嚮姹夊牎鍚庢樉绀鸿鍒楃綉鏍?*/
    .nav-menu {
        display: none;
        order: 6;
        width: 100%;
        background: white;
        padding: 10px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        border-radius: 12px;
        margin-top: 8px;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        transition: opacity 0.25s ease, transform 0.25s ease;
        opacity: 0;
        transform: translateY(-8px);
    }

    .nav-menu.active {
        display: grid !important;
        opacity: 1;
        transform: translateY(0);
    }

    .nav-menu li {
        margin: 0;
        padding: 0;
    }

    .nav-menu a {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px 3px;
        font-size: 12px;
        font-weight: 500;
        color: #667eea;
        background: #f0f0ff;
        border-radius: 6px;
        text-decoration: none;
        box-shadow: none;
        transition: all 0.3s;
    }

    .nav-menu a:hover,
    .nav-menu a.active {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 3px 8px rgba(102,126,234,0.4);
    }

    /* Logo - order:0 */
    .logo {
        order: 0;
        flex-shrink: 0;
    }

    /* nav-actions: 绱у噾妯帓 */
    .nav-actions {
        order: 1;
        display: flex !important;
        flex-direction: row !important;
        align-items: center;
        gap: 3px;
        width: auto !important;
        padding: 0;
    }

    /* 鏆楄壊鎸夐挳 - order:1 (鍦╪av-actions鍐? */
    .btn-theme-toggle {
        display: inline-flex !important;
        order: 1;
        background: transparent !important;
        border: none !important;
        font-size: 18px;
        padding: 4px 5px;
        color: #333;
        cursor: pointer;
        flex-shrink: 0;
        width: 34px;
        height: 34px;
        align-items: center;
        justify-content: center;
        line-height: 1;
        min-width: 34px;
    }

    .btn-theme-toggle:hover {
        color: #667eea;
    }

    /* 鐧诲綍鎸夐挳 - order:2 (鍦╪av-actions鍐? */
    .btn-login {
        order: 2;
        padding: 4px 8px !important;
        font-size: 11px !important;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* 鍜ㄨ鎸夐挳 - order:3 (鍦╪av-actions鍐? */
    .btn-register {
        order: 3;
        padding: 4px 8px !important;
        font-size: 11px !important;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* 姹夊牎鎸夐挳 - order:4 (鍦╪av-actions鍐咃紝鏈€鍚庢樉绀?) */
    .menu-toggle-btn {
        display: block !important;
        order: 4;
        background: transparent !important;
        border: none !important;
        font-size: 18px;
        padding: 3px 5px;
        color: #667eea;
        cursor: pointer;
        flex-shrink: 0;
        border-radius: 4px;
        transition: all 0.3s;
        line-height: 1;
    }

    .menu-toggle-btn:hover {
        background: rgba(102,126,234,0.1);
        color: #764ba2;
    }
}

/* ============================================
   绉诲姩绔眽鍫¤彍鍗?
   ============================================ */

/* 绉诲姩绔牱寮?*/
/* ============================================
   鏂囩珷鍒楄〃椤垫牱寮?
   ============================================ */

.articles-list-section {
    padding: 0 20px 60px;
    background: #ffffff;
    min-height: 60vh;
}

.articles-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.articles-header {
    text-align: center;
    margin-bottom: 40px;
    padding: 30px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    color: white;
}

.articles-header h1 {
    font-size: 32px;
    margin-bottom: 10px;
    color: white;
}

.articles-header p {
    font-size: 16px;
    opacity: 0.9;
}

.articles-feed {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.feed-item-link {
    display: flex;
    gap: 20px;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    transition: all 0.3s;
    text-decoration: none;
    padding: 15px;
}

.feed-item-link:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(102,126,234,0.2);
}

.feed-thumb {
    width: 200px;
    height: 140px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
}

.feed-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.feed-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.feed-meta {
    display: flex;
    gap: 15px;
    margin-bottom: 10px;
    font-size: 13px;
    color: #6c757d;
}

.feed-category {
    background: #667eea;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px !important;
}

.feed-title {
    font-size: 18px;
    color: #1a202c;
    margin-bottom: 10px;
    line-height: 1.4;
}

.feed-item-link:hover .feed-title {
    color: #667eea;
}

.feed-desc {
    color: #4a5568;
    font-size: 14px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 鍒嗛〉鏍峰紡 */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 40px;
    padding: 20px 0;
}

.page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    background: white;
    color: #4a5568;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s;
}

.page-btn:hover {
    background: #667eea;
    color: white;
    border-color: #667eea;
    transform: translateY(-2px);
}

.page-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-color: transparent;
}

.page-btn.prev,
.page-btn.next {
    font-weight: 500;
}

.page-ellipsis {
    color: #a0aec0;
    padding: 0 5px;
}

/* 鍝嶅簲寮?*/
@media (max-width: 900px) {
    .articles-layout {
        grid-template-columns: 1fr;
    }
    
    .articles-header h1 {
        font-size: 24px;
    }
    
    .feed-item-link {
        flex-direction: column;
    }
    
    .feed-thumb {
        width: 100%;
        height: 180px;
    }
    
    .feed-title {
        font-size: 16px;
    }
    
    .pagination {
        flex-wrap: wrap;
    }
}

/* ============================================
   鏂囩珷鍒楄〃椤垫殫鑹叉ā寮?
   ============================================ */

body.dark-mode .articles-list-section {
    background: #16213e;
}

body.dark-mode .articles-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

body.dark-mode .feed-item-link {
    background: #1a1a2e;
}

body.dark-mode .feed-title {
    color: #ffffff;
}

body.dark-mode .feed-item-link:hover .feed-title {
    color: #667eea;
}

body.dark-mode .feed-desc {
    color: #cbd5e0;
}

body.dark-mode .feed-meta {
    color: #a0aec0;
}

body.dark-mode .page-btn {
    background: #1a1a2e;
    color: #cbd5e0;
    border-color: #2d3748;
}

body.dark-mode .page-btn:hover {
    background: #667eea;
    color: white;
}

body.dark-mode .feed-category {
    background: #764ba2;
}


.breadcrumb-section {
    background: #ffffff;
    padding: 15px 20px;
    border-bottom: none;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #6c757d;
}

.breadcrumb a {
    color: #6c757d;
    text-decoration: none;
    transition: color 0.3s;
}

.breadcrumb a:hover {
    color: #495057;
    text-decoration: underline;
}

.breadcrumb span {
    color: #adb5bd;
}

.article-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.article-main {
	margin-bottom: 20px;
    background: white;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.08);
}

.article-title {
    font-size: 28px;
    color: #1a202c;
    margin-bottom: 20px;
    line-height: 1.4;
}

.article-meta {
    display: flex;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 30px;
    font-size: 14px;
    color: #6c757d;
}

.article-body h2 {
    color: #1a202c;
    font-size: 20px;
    margin: 30px 0 15px;
}

.article-body p {
    color: #4a5568;
    line-height: 1.8;
    margin-bottom: 15px;
}

.article-video {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin: 20px 0;
    border-left: 4px solid #667eea;
}

.article-notice {
    font-size: 13px;
    color: #6c757d;
    margin-top: 10px;
}

.article-list {
    padding-left: 20px;
    margin: 20px 0;
}

.article-list li {
    margin-bottom: 15px;
    line-height: 1.6;
    color: #4a5568;
}

.article-list ul {
    padding-left: 20px;
    margin-top: 8px;
}

.article-list ul li {
    margin-bottom: 8px;
}

.article-nav {
    display: flex;
    justify-content: space-between;
    padding: 30px 0;
    border-top: 1px solid #e9ecef;
    margin-top: 30px;
}

.article-prev, .article-next {
    flex: 1;
}

.article-next {
    text-align: right;
}

.nav-label {
    display: block;
    font-size: 12px;
    color: #6c757d;
    margin-bottom: 5px;
}

.article-nav a {
    color: #667eea;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
}

.article-nav a:hover {
    color: #764ba2;
}

/* 游客登录购买提示 */
.paywall-guest {
    margin: 20px 0;
    text-align: center;
}
.guest-box {
    border: 2px dashed #ff4444;
    border-radius: 8px;
    padding: 18px 24px;
    margin-bottom: 14px;
    background: #fff;
    font-size: 15px;
    line-height: 1.6;
}
.guest-text {
    color: #ff8c00;
    font-weight: bold;
}
.points-text {
    color: #ff4444;
    font-weight: bold;
}
.guest-buy-btn {
    background: #1e90ff;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 12px 36px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}
.guest-buy-btn:hover {
    background: #1873cc;
    transform: scale(1.04);
}
body.dark-mode .guest-box {
    background: #16213e;
    color: #e2e8f0;
}
body.dark-mode .guest-box .guest-text {
    color: #ffa500;
}
body.dark-mode .guest-box .points-text {
    color: #ff6666;
}

/* 购买确认模态框 */
.pay-confirm-body {
    padding: 10px 0 20px;
    text-align: center;
}
.pay-confirm-icon {
    font-size: 48px;
    margin-bottom: 10px;
}
.pay-confirm-title {
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 16px;
    color: #333;
}
.pay-confirm-detail {
    background: #f7f8fc;
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 14px;
}
.confirm-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 15px;
}
.confirm-label {
    color: #888;
}
.confirm-value {
    font-weight: bold;
    color: #333;
}
.pay-confirm-notice {
    font-size: 13px;
    color: #999;
    margin-bottom: 6px;
}
.pay-confirm-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    padding: 0 0 20px;
}
.pay-btn-cancel {
    background: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 10px 32px;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s;
}
.pay-btn-cancel:hover {
    background: #e0e0e0;
}
.pay-btn-confirm {
    background: #1e90ff;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 10px 32px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
}
.pay-btn-confirm:hover {
    background: #1873cc;
}
body.dark-mode .pay-confirm-title {
    color: #e2e8f0;
}
body.dark-mode .pay-confirm-detail {
    background: #1a1a2e;
}
body.dark-mode .confirm-label {
    color: #aaa;
}
body.dark-mode .confirm-value {
    color: #e2e8f0;
}
body.dark-mode .pay-confirm-notice {
    color: #888;
}
body.dark-mode .pay-btn-cancel {
    background: #2a2a3e;
    border-color: #444;
    color: #e2e8f0;
}
body.dark-mode .pay-btn-cancel:hover {
    background: #3a3a4e;
}

/* 付费内容横幅 */
.paywall-banner {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 15px rgba(0,0,0,0.08);
}
.paywall-thumb {
    flex: 0 0 320px;
    background: #f8f9fa;
}
.paywall-thumb img {
    width: 100%;
    height: 100%;
    min-height: 280px;
    object-fit: cover;
    display: block;
}
.paywall-info {
    flex: 1;
    padding: 20px 25px 20px 0;
    display: flex;
    flex-direction: column;
}
.paywall-title {
    font-size: 18px;
    color: #1a202c;
    margin-bottom: 8px;
    line-height: 1.4;
}
.paywall-meta {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
    font-size: 12px;
    color: #6c757d;
}
.paywall-pricing {
    display: flex;
    align-items: baseline;
    gap: 20px;
    margin-bottom: 12px;
}
.pay-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.pay-label {
    font-size: 14px;
    color: #6c757d;
}
.pay-value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}
.pay-price.pay-discount .pay-value {
    color: #1e90ff;
}
.pay-price.pay-vip .pay-value {
    color: #ff4757;
}
.paywall-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}
.pay-btn {
    padding: 10px 24px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    flex: 1;
    text-align: center;
}
.pay-download {
    background: linear-gradient(135deg, #ff4757, #ff6b81);
    color: #fff;
}
.pay-download:hover {
    background: linear-gradient(135deg, #e84141, #ff4757);
    box-shadow: 0 4px 12px rgba(255,71,87,0.35);
}
.pay-upgrade {
    background: linear-gradient(135deg, #ffa502, #ffc048);
    color: #fff;
}
.pay-upgrade:hover {
    background: linear-gradient(135deg, #e89600, #ffa502);
    box-shadow: 0 4px 12px rgba(255,165,2,0.35);
}
.paywall-services {
    display: flex;
    gap: 16px;
    margin-bottom: 8px;
    font-size: 12px;
    color: #4a5568;
}
.pay-service {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}


.related-articles {
    margin: 50px 0;
    padding-top: 30px;
    border-top: 2px solid #667eea;
    padding-top: 30px;
    border-top: 2px solid #667eea;
}

.related-articles h3 {
    color: #1a202c;
    font-size: 20px;
    margin-bottom: 20px;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.related-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: all 0.3s;
    cursor: pointer;
}

.related-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(102,126,234,0.2);
}

.related-thumb {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
}

.related-info {
    padding: 12px 15px;
}

.related-card h4 {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 500;
}

.related-card a {
    color: #4a5568;
    text-decoration: none;
    display: block;
}

.related-card a:hover {
    color: #667eea;
}

.related-date {
    font-size: 12px;
    color: #adb5bd;
}

/* Sidebar */
.article-sidebar {
    position: sticky;
    top: 100px;
    height: fit-content;
}

.sidebar-widget {
    background: white;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.08);
}

/* 鏂板紡鏂囩珷鐩綍/鐑棬鏂囩珷鏍峰紡 */
.sidebar-toc {
    padding: 20px;
}

.toc-title {
    color: #1a202c;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
    padding-left: 12px;
    border-left: 4px solid #667eea;
}

.toc-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.toc-item {
    border-bottom: 1px solid #f1f3f4;
}

.toc-item:last-child {
    border-bottom: none;
}

.toc-link {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    text-decoration: none;
    transition: all 0.3s;
    padding: 8px 0;
}

.toc-link:hover {
    transform: translateX(4px);
}

.toc-thumb {
    width: 80px;
    height: 60px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.toc-content {
    flex: 1;
    min-width: 0;
}

.toc-text {
    color: #2d3748;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.3s;
}

.toc-link:hover .toc-text {
    color: #667eea;
}

/* 鐑棬鏂囩珷鏉垮潡鏍峰紡 */
.sidebar-hot {
    padding: 20px;
}

.hot-title {
    color: #1a202c;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
    padding-left: 12px;
    border-left: 4px solid #667eea;
}

.hot-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: hot-counter;
}

.hot-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #f1f3f4;
    counter-increment: hot-counter;
}

.hot-item:last-child {
    border-bottom: none;
}

.hot-item::before {
    content: counter(hot-counter);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: #667eea;
    color: white;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1;
}

.hot-item:nth-child(1)::before {
    background: #ff4757;
}

.hot-item:nth-child(2)::before {
    background: #2ed573;
}

.hot-item:nth-child(3)::before {
    background: #ffa502;
}

.hot-item:nth-child(4)::before {
    background: #1e90ff;
}

.hot-item:nth-child(5)::before {
    background: #a55eea;
}

.hot-item:nth-child(6)::before {
    background: #ff6b81;
}

.hot-item:nth-child(7)::before {
    background: #70a1ff;
}

.hot-item:nth-child(8)::before {
    background: #7bed9f;
}

.hot-item a {
    color: #2d3748;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.5;
    flex: 1;
    transition: color 0.3s;
}

.hot-item a:hover {
    color: #667eea;
}

/* Responsive */
@media (max-width: 900px) {
    .article-layout {
        grid-template-columns: 1fr;
    }
    
    .article-main {
        padding: 25px;
    }
    
    .article-title {
        font-size: 22px;
    }
    
    .article-nav {
        flex-direction: column;
        gap: 15px;
    }
    
    .article-next {
        text-align: left;
    }
    
    .related-grid {
        grid-template-columns: 1fr;
    }

    /* 付费横幅响应式 */
    .paywall-banner {
        flex-direction: column;
    }
    .paywall-thumb {
        flex: none;
    }
    .paywall-thumb {
        flex: none;
    }
    .paywall-thumb img {
        height: 200px;
    }
    .paywall-info {
        padding: 15px;
    }
    .paywall-title {
        font-size: 16px;
    }
    .paywall-pricing {
        flex-wrap: wrap;
        gap: 12px;
    }
    .pay-value {
        font-size: 24px;
    }
    .paywall-services {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .article-sidebar {
        position: static;
    }

    /* 付费文章响应式 */
    .pay-options {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .pay-price {
        font-size: 28px;
    }
    .pay-preview {
        padding: 20px;
    }
}
@media (max-width: 900px) {
    .carousel-section {
        padding: 15px 10px;
    }
    
    .carousel-wrapper {
        grid-template-columns: 1fr;
        gap: 15px;
        max-width: 100%;
        padding: 0 10px;
    }
    
    .carousel-main {
        height: 250px;
        width: 100% !important;
        margin: 0 !important;
    }
    
    .carousel-sidebar {
        flex-direction: row;
        height: auto !important;
        width: 100%;
        gap: 10px;
    }
    
    .sidebar-ad {
        min-height: 150px;
        height: auto !important;
        flex: 1;
        padding: 16px 12px;
    }

    .ad-icon {
        font-size: 28px;
        margin-bottom: 8px;
    }
    
    .sidebar-ad h3 {
        font-size: 16px;
        margin-bottom: 8px;
    }
    
    .sidebar-ad p {
        font-size: 12px;
        line-height: 1.5;
    }
}

@media (max-width: 768px) {
    .nav-container {
        flex-direction: column;
        gap: 12px;
    }
    
    .nav-menu {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }
    
    .carousel-main {
        height: auto;
        min-height: 260px;
        aspect-ratio: 4 / 3;
    }

    .carousel-slide {
        background: linear-gradient(135deg, #f4f7ff 0%, #eef2ff 100%);
    }

    .carousel-track .carousel-slide .carousel-img {
        object-fit: contain;
        padding: 10px;
    }
    
    .slide-content h2 {
        font-size: 20px;
    }
    
    .slide-content p {
        font-size: 13px;
    }
    
    .carousel-sidebar {
        flex-direction: column;
    }

    .sidebar-ad {
        min-height: 132px;
        padding: 14px 12px;
    }

    .ad-icon {
        font-size: 26px;
        margin-bottom: 6px;
    }
    
    .services-section h2,
    .why-us-section h2,
    .cta-section h2 {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .nav-menu {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
    
    .carousel-main {
        height: auto;
        min-height: 220px;
        aspect-ratio: 4 / 3;
        border-radius: 14px;
    }

    .carousel-track .carousel-slide .carousel-img {
        padding: 8px;
    }

    .carousel-prev,
    .carousel-next {
        width: 38px;
        height: 38px;
        font-size: 18px;
    }

    .sidebar-ad {
        min-height: 124px;
        padding: 12px 10px;
    }

    .ad-icon {
        font-size: 24px;
        margin-bottom: 5px;
    }

    .sidebar-ad h3 {
        font-size: 15px;
        margin-bottom: 6px;
    }

    .sidebar-ad p {
        font-size: 11px;
        line-height: 1.45;
    }
    
    .slide-content h2 {
        font-size: 18px;
    }
    
    .slide-content p {
        font-size: 12px;
    }
    
    .slide-icon {
        font-size: 36px;
    }
    
    .services-grid,
    .features-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   Footer 灞傜骇寮忓鍒楀鑸?
   ======================================== */

.footer-content {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 40px;
    padding: 40px 0;
}

.footer-section h4 {
    font-size: 16px;
    color: #333;
    margin-bottom: 16px;
    font-weight: 700;
    position: relative;
}

.footer-section h4::after {
    content: '';
    display: block;
    width: 30px;
    height: 2px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    margin-top: 8px;
    border-radius: 1px;
}

.footer-section p {
    font-size: 14px;
    color: #666;
    line-height: 1.8;
    margin-bottom: 8px;
}

/* 鑱旂郴鎴戜滑 */
.footer-contact {
    min-width: 200px;
}

/* 绔欑偣瀵艰埅 */
.footer-nav {
    flex: 1;
}

.footer-nav-columns {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
    padding: 20px 0;
}

.footer-nav-column {
    display: flex;
    flex-direction: column;
}

.footer-nav-column h5 {
    font-size: 15px;
    color: #333;
    margin-bottom: 12px;
    font-weight: 700;
    position: relative;
    padding-bottom: 8px;
}

.footer-nav-column h5 a {
    color: inherit;
    text-decoration: none;
    display: inline-block;
}

.footer-nav-column h5 a:hover {
    color: #667eea;
}

.footer-nav-column h5::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 20px;
    height: 2px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 1px;
}

.footer-nav-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-nav-column ul li a {
    font-size: 13px;
    color: #666;
    text-decoration: none;
    transition: all 0.3s;
    padding: 4px 0;
    display: inline-block;
    position: relative;
}

.footer-nav-column ul li a::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #667eea;
    opacity: 0;
    transition: opacity 0.3s;
}

.footer-nav-column ul li a:hover {
    color: #667eea;
    transform: translateX(4px);
}

.footer-nav-column ul li a:hover::before {
    opacity: 1;
}

/* 鍏充簬鎴戜滑 */
.footer-about {
    min-width: 200px;
}

.footer-bottom {
    text-align: center;
    padding: 20px 0;
    color: #888;
    font-size: 13px;
}

/* 鍝嶅簲寮忚璁?*/
@media (max-width: 900px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .footer-nav-columns {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

@media (max-width: 600px) {
    .footer-nav-columns {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .footer-section h4 {
        font-size: 15px;
    }
    
    .footer-nav-column h5 {
        font-size: 14px;
    }
    
    .footer-nav-column ul li a {
        font-size: 12px;
    }
}
/* ========================================
   瀛愰〉闈㈤€氱敤鏍峰紡 - Page Hero 鍖哄煙
   ======================================== */

.page-hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 60px 20px;
    text-align: center;
    color: white;
    position: relative;
    overflow: hidden;
}

.page-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 400px;
    height: 400px;
    background: rgba(255,255,255,0.05);
    border-radius: 50%;
}

.page-hero::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 300px;
    height: 300px;
    background: rgba(255,255,255,0.03);
    border-radius: 50%;
}

.hero-bg-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(255,255,255,0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255,255,255,0.05) 0%, transparent 50%);
    pointer-events: none;
}

.page-hero .container {
    position: relative;
    z-index: 1;
}

.breadcrumb {
    font-size: 14px;
    opacity: 0.85;
}

.breadcrumb a {
	color: #adb5bd;
    transition: opacity 0.3s;
}

.breadcrumb a:hover {
    opacity: 0.8;
    text-decoration: underline;
}

.breadcrumb .current {
    opacity: 1;
    font-weight: 600;
}

.page-hero h1 {
    font-size: 2.2rem;
    margin-bottom: 12px;
    font-weight: 700;
    text-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

.page-hero p {
    font-size: 16px;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto;
}

.knowledge-categories,
.template-categories {
    padding: 25px 0 10px;
    background: white;
    border-bottom: 1px solid #eee;
}

.category-tags {
    display: flex;
    gap: 10px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.category-tag {
    padding: 8px 20px;
    border-radius: 20px;
    background: #f0f0f0;
    color: #666;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
    border: 1px solid transparent;
}

.category-tag:hover {
    background: #667eea;
    color: white;
    transform: translateY(-2px);
}

.category-tag.active {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    box-shadow: 0 4px 12px rgba(102,126,234,0.3);
}

/* ========================================
   鏈嶅姟璇︽儏鍗＄墖 (services.html)
   ======================================== */

.services-detail {
    padding: 50px 20px;
    background: white;
}

body.dark-mode .services-detail {
    background: transparent;
}

.service-detail-card {
    display: flex;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto 30px;
    padding: 30px;
    background: #ffffff;
    border-radius: 12px;
    border-left: 4px solid #667eea;
    transition: all 0.3s;
    align-items: flex-start;
}

.service-detail-card:hover {
    transform: translateX(5px);
    box-shadow: 0 8px 25px rgba(102,126,234,0.12);
    background: #ffffff;
    border-left-color: #764ba2;
}

.service-detail-icon {
    font-size: 80px;
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(102,126,234,0.3);
}

.service-detail-body {
    flex: 1;
}

.service-detail-body h2 {
    font-size: 1.4rem;
    color: #333;
    margin-bottom: 8px;
    font-weight: 700;
}

.service-detail-body > p {
    color: #666;
    margin-bottom: 15px;
    font-size: 14px;
}

.service-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 15px;
}

.service-features li {
    font-size: 14px;
    color: #555;
    padding: 6px 0;
}

.btn-service-cta {
    padding: 10px 25px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s;
    box-shadow: 0 3px 10px rgba(102,126,234,0.3);
}

.btn-service-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102,126,234,0.4);
}

.service-process {
    padding: 60px 20px;
    background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
    text-align: center;
}

.service-process h2 {
    font-size: 1.8rem;
    margin-bottom: 40px;
    color: #333;
    font-weight: 700;
}

.process-steps {
    display: flex;
    justify-content: center;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.process-step {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    flex: 1;
    min-width: 180px;
    max-width: 220px;
    text-align: left;
    position: relative;
}

.process-step:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -15px;
    top: 18px;
    width: 20px;
    height: 2px;
    background: #667eea;
}

.step-number {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(102,126,234,0.3);
}

.step-text h4 {
    font-size: 15px;
    color: #333;
    margin-bottom: 4px;
    font-weight: 700;
}

.step-text p {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
}

/* ========================================
   缁熻妯箙
   ======================================== */

.stats-banner {
    padding: 50px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto;
}

.stat-item {
    text-align: center;
    color: white;
    padding: 20px 15px;
    border-radius: 12px;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    transition: all 0.3s;
}

.stat-item:hover {
    background: rgba(255,255,255,0.2);
    transform: translateY(-3px);
}

.stat-icon {
    font-size: 36px;
    margin-bottom: 10px;
}

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 5px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.stat-label {
    font-size: 14px;
    opacity: 0.9;
}

/* ========================================
   妗堜緥鍗＄墖 (cases.html)
   ======================================== */

.cases-list {
    padding: 50px 20px;
    background: #ffffff;
}

body.dark-mode .cases-list {
    background: transparent;
}

.case-card {
    display: flex;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto 30px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    transition: all 0.3s;
    background: #ffffff;
}

.case-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(0,0,0,0.12);
    background: #ffffff;
}

.case-thumb {
    width: 200px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    position: relative;
    padding: 20px;
}

.case-thumb-icon {
    font-size: 56px;
}

.case-tag {
    position: absolute;
    top: 15px;
    left: 15px;
    background: rgba(255,255,255,0.25);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    color: white;
    font-weight: 600;
}

.case-body {
    flex: 1;
    padding: 25px 25px 25px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.case-body h2 {
    font-size: 1.4rem;
    color: #333;
    margin-bottom: 10px;
    font-weight: 700;
}

.case-body > p {
    color: #666;
    font-size: 14px;
    margin-bottom: 15px;
    line-height: 1.7;
}

.case-metrics {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
}

.metric {
    text-align: center;
    padding: 10px 15px;
    background: #f8f9fa;
    border-radius: 8px;
    flex: 1;
}

.metric-value {
    display: block;
    font-size: 1.3rem;
    font-weight: 700;
    color: #667eea;
}

.metric-label {
    font-size: 12px;
    color: #888;
    margin-top: 3px;
}

.btn-case-detail {
    padding: 10px 25px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s;
    align-self: flex-start;
    box-shadow: 0 3px 10px rgba(102,126,234,0.3);
}

.btn-case-detail:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102,126,234,0.4);
}

/* ========================================
   鐭ヨ瘑鍗＄墖 (knowledge.html)
   ======================================== */

.knowledge-content {
    padding: 40px 20px 60px;
    background: #ffffff;
}

.knowledge-card {
    display: flex;
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto 25px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    transition: all 0.3s;
    background: #ffffff;
}

.knowledge-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    background: #ffffff;
}

.knowledge-thumb {
    width: 180px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    position: relative;
    padding: 20px;
}

.knowledge-thumb-icon {
    font-size: 80px;
    margin-bottom: 10px;
}

.knowledge-type {
    background: rgba(255,255,255,0.25);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    color: white;
    font-weight: 600;
}

.knowledge-body {
    flex: 1;
    padding: 20px 25px 20px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.knowledge-meta {
    display: flex;
    gap: 20px;
    margin-bottom: 10px;
    font-size: 13px;
    color: #888;
}

.knowledge-body h2 {
    font-size: 1.3rem;
    color: #333;
    margin-bottom: 10px;
    font-weight: 700;
}

.knowledge-body > p {
    color: #666;
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 12px;
}

.knowledge-link {
    color: #667eea;
    font-weight: 600;
    font-size: 14px;
    transition: color 0.3s;
}

.knowledge-link:hover {
    color: #764ba2;
}

/* ========================================
   妯℃澘鍗＄墖 (tools.html)
   ======================================== */

.templates-list {
    padding: 40px 20px 60px;
    background: #ffffff;
}

.template-card {
    display: flex;
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto 25px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    transition: all 0.3s;
    background: #ffffff;
}

.template-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    background: #ffffff;
}

.template-thumb {
    width: 180px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    position: relative;
    padding: 20px;
}

.template-thumb-icon {
    font-size: 80px;
    margin-bottom: 10px;
}

.template-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255,255,255,0.3);
    padding: 4px 10px;
    border-radius: 10px;
    font-size: 11px;
    color: white;
    font-weight: 700;
}

.template-body {
    flex: 1;
    padding: 20px 25px 20px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.template-body h2 {
    font-size: 1.3rem;
    color: #333;
    margin-bottom: 10px;
    font-weight: 700;
}

.template-body > p {
    color: #666;
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 12px;
}

.template-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.tag {
    padding: 4px 12px;
    background: #f0f0ff;
    color: #667eea;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.template-actions {
    display: flex;
    gap: 10px;
}

.btn-template-preview,
.btn-template-download {
    padding: 8px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s;
}

.btn-template-preview {
    background: transparent;
    color: #667eea;
    border: 1px solid #667eea;
}

.btn-template-preview:hover {
    background: #667eea;
    color: white;
}

.btn-template-download {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    box-shadow: 0 3px 10px rgba(102,126,234,0.3);
}

.btn-template-download:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102,126,234,0.4);
}

/* ========================================
   鍏充簬鎴戜滑椤?(about.html)
   ======================================== */

.about-intro {
    padding: 60px 20px;
    background: white;
}

.about-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: center;
}

.about-intro-text h2 {
    font-size: 1.6rem;
    color: #333;
    margin-bottom: 15px;
    font-weight: 700;
    position: relative;
}

.about-intro-text h2::after {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    margin-top: 10px;
    border-radius: 2px;
}

.about-intro-text p {
    color: #666;
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 12px;
}

.about-intro-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.intro-image-placeholder {
    width: 100%;
    height: 280px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.placeholder-icon {
    font-size: 56px;
    margin-bottom: 10px;
}

.team-section {
    padding: 60px 20px;
    background: #f8f9fa;
    text-align: center;
}

.team-section h2 {
    font-size: 1.8rem;
    margin-bottom: 40px;
    color: #333;
    font-weight: 700;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto;
}

.team-member {
    background: white;
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    transition: all 0.3s;
}

.team-member:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.member-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(102,126,234,0.3);
}

.avatar-initial {
    font-size: 28px;
    color: white;
    font-weight: 700;
}

.team-member h3 {
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 5px;
    font-weight: 700;
}

.member-role {
    font-size: 13px;
    color: #667eea;
    font-weight: 600;
    margin-bottom: 8px;
}

.member-desc {
    font-size: 13px;
    color: #888;
    line-height: 1.6;
    margin-bottom: 12px;
}

.member-social {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.social-icon {
    font-size: 18px;
    cursor: pointer;
    transition: transform 0.3s;
}

.social-icon:hover {
    transform: scale(1.2);
}

.values-section {
    padding: 60px 20px;
    background: white;
    text-align: center;
}

.values-section h2 {
    font-size: 1.8rem;
    margin-bottom: 40px;
    color: #333;
    font-weight: 700;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto;
}

.value-card {
    padding: 30px 20px;
    border-radius: 12px;
    background: #f8f9fa;
    transition: all 0.3s;
    border: 2px solid transparent;
}

.value-card:hover {
    background: white;
    border-color: #667eea;
    box-shadow: 0 8px 25px rgba(102,126,234,0.12);
    transform: translateY(-3px);
}

.value-icon {
    font-size: 40px;
    margin-bottom: 12px;
}

.value-card h3 {
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 8px;
    font-weight: 700;
}

.value-card p {
    font-size: 13px;
    color: #888;
    line-height: 1.6;
}

.contact-section {
    padding: 60px 20px;
    background: #f8f9fa;
    text-align: center;
}

.contact-section h2 {
    font-size: 1.8rem;
    margin-bottom: 40px;
    color: #333;
    font-weight: 700;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    text-align: left;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 15px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    transition: all 0.3s;
}

.contact-item:hover {
    transform: translateX(5px);
    box-shadow: 0 4px 15px rgba(102,126,234,0.1);
}

.contact-icon {
    font-size: 28px;
    flex-shrink: 0;
}

.contact-item h4 {
    font-size: 14px;
    color: #333;
    margin-bottom: 3px;
    font-weight: 700;
}

.contact-item p {
    font-size: 14px;
    color: #666;
}

.contact-map {
    display: flex;
    align-items: stretch;
}

.map-placeholder {
    width: 100%;
    height: 100%;
    min-height: 280px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #999;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
}

/* ========== 涓婚鍒囨崲鎸夐挳 ========== */
.btn-theme-toggle {
    background: #ffffff;
    border: 1px solid #333;
    border-radius: 5px;
    padding: 8px 10px;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s;
    line-height: 1;
    color: #333;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.btn-theme-toggle:hover {
    background: #667eea;
    border-color: #667eea;
    transform: scale(1.1);
}

body.dark-mode .btn-theme-toggle {
    background: transparent !important;
    border: none !important;
    color: #a8b4ff;
}

body.dark-mode .btn-theme-toggle:hover {
    background: rgba(102,126,234,0.2) !important;
    color: #c4b5fd;
}

/* ========================================
   鏆楄壊妯″紡
   ======================================== */

body.dark-mode {
    color: #333;
}

body.dark-mode .header {
    background: transparent;
    box-shadow: none;
}

body.dark-mode .nav-menu a {
    color: #a8b4ff;
    background: rgba(102,126,234,0.1);
}

body.dark-mode .nav-menu a:hover,
body.dark-mode .nav-menu a.active {
    color: #fff;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

body.dark-mode .menu-toggle-btn {
    color: #a8b4ff;
}

body.dark-mode .menu-toggle-btn:hover {
    background: rgba(102,126,234,0.2);
    color: #c4b5fd;
}

body.dark-mode .nav-menu {
}

body.dark-mode .btn-login {
    color: #667eea;
    border-color: #667eea;
}

body.dark-mode .btn-login:hover {
    background: #667eea;
    color: white;
}

body.dark-mode .carousel-section,
body.dark-mode .knowledge-content,
body.dark-mode .templates-list {
    background: transparent;
}

body.dark-mode .service-card,
body.dark-mode .feature-item,
body.dark-mode .value-card {
    background: transparent;
    color: #333;
}

body.dark-mode .service-card:hover,
body.dark-mode .feature-item:hover {
    background: transparent;
}

body.dark-mode .service-card p,
body.dark-mode .feature-item p,
body.dark-mode .value-card p {
    color: #333;
}

body.dark-mode .service-card h3,
body.dark-mode .feature-item h3,
body.dark-mode .value-card h3 {
    color: #333;
}

body.dark-mode .services-section,
body.dark-mode .why-us-section,
body.dark-mode .service-process,
body.dark-mode .team-section,
body.dark-mode .values-section,
body.dark-mode .contact-section,
body.dark-mode .about-intro {
    background: transparent;
}

body.dark-mode .services-section h2,
body.dark-mode .why-us-section h2,
body.dark-mode .service-process h2,
body.dark-mode .team-section h2,
body.dark-mode .values-section h2,
body.dark-mode .contact-section h2 {
    color: #333;
}

body.dark-mode .footer {
    background: transparent;
}

body.dark-mode .footer-section p,
body.dark-mode .footer-section a {
    color: #333;
}

body.dark-mode .footer-section a:hover {
    color: #667eea;
}

body.dark-mode .footer-bottom {
    border-top-color: #ddd;
    color: #333;
}

body.dark-mode .modal-content {
    background: transparent;
    color: #333;
}

body.dark-mode .modal-content h2 {
    color: #333;
}

body.dark-mode .modal-content input,
body.dark-mode .modal-content textarea {
    background: transparent;
    border-color: #ddd;
    color: #333;
}

body.dark-mode .modal-content input:focus,
body.dark-mode .modal-content textarea:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102,126,234,0.2);
}

body.dark-mode .auth-tab {
    color: #333;
}

body.dark-mode .auth-tab.active {
    color: #667eea;
    border-bottom-color: #667eea;
}

body.dark-mode .service-detail-card {
    background: transparent;
}

body.dark-mode .service-detail-card:hover {
    background: transparent;
}

body.dark-mode .service-detail-body h2 {
    color: #333;
}

body.dark-mode .service-detail-body > p,
body.dark-mode .service-features li {
    color: #333;
}

body.dark-mode .case-card,
body.dark-mode .knowledge-card,
body.dark-mode .template-card {
    background: transparent;
}

body.dark-mode .case-body h2,
body.dark-mode .knowledge-body h2,
body.dark-mode .template-body h2 {
    color: #333;
}

body.dark-mode .case-body > p,
body.dark-mode .knowledge-body > p {
    color: #333;
}

body.dark-mode .metric {
    background: transparent;
}

body.dark-mode .metric-label {
    color: #333;
}

body.dark-mode .tag {
    background: transparent;
    color: #333;
}

body.dark-mode .team-member {
    background: transparent;
}

body.dark-mode .team-member h3 {
    color: #333;
}

body.dark-mode .member-desc {
    color: #333;
}

body.dark-mode .contact-item {
    background: transparent;
}

body.dark-mode .contact-item h4 {
    color: #333;
}

body.dark-mode .contact-item p {
    color: #333;
}

body.dark-mode .category-tag {
    background: transparent;
    color: #333;
}

body.dark-mode .category-tag:hover {
    background: #667eea;
    color: white;
}

body.dark-mode .category-tag.active {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

body.dark-mode .step-text h4 {
    color: #333;
}

body.dark-mode .step-text p {
    color: #333;
}

body.dark-mode .about-intro-text p {
    color: #333;
}

body.dark-mode .about-intro-text h2 {
    color: #333;
}

body.dark-mode .knowledge-meta {
    color: #333;
}

body.dark-mode .knowledge-link {
    color: #667eea;
}

body.dark-mode .knowledge-link:hover {
    color: #764ba2;
}

body.dark-mode .btn-template-preview {
    color: #667eea;
    border-color: #667eea;
}

body.dark-mode .btn-template-preview:hover {
    background: #667eea;
    color: white;
}

/* ========================================
   鍝嶅簲寮忚璁?
   ======================================== */

@media (max-width: 900px) {
    .carousel-wrapper {
        grid-template-columns: 1fr;
    }
    
    .carousel-sidebar {
        flex-direction: row;
    }
    
    .sidebar-ad {
        height: 150px;
        flex: 1;
    }
    
    .process-steps {
        flex-direction: column;
        align-items: center;
    }
    
    .process-step {
        max-width: 100%;
    }
    
    .process-step:not(:last-child)::after {
        width: 2px;
        height: 20px;
        right: auto;
        left: 50%;
        top: auto;
        bottom: -20px;
        transform: translateX(-50%);
    }
    
    .case-card,
    .knowledge-card,
    .template-card {
        flex-direction: column;
    }
    
    .case-thumb,
    .knowledge-thumb,
    .template-thumb {
        width: 100%;
        height: 140px;
        flex-direction: row;
        gap: 15px;
    }
    
    .case-body,
    .knowledge-body,
    .template-body {
        padding: 20px;
    }
    
    .case-metrics {
        flex-direction: column;
        gap: 10px;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .about-intro-grid {
        grid-template-columns: 1fr;
    }
    
    .contact-grid {
        grid-template-columns: 1fr;
    }
    
    .service-detail-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .service-detail-icon {
        width: 60px;
        height: 60px;
        font-size: 32px;
    }
    
    .service-features {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .nav-menu {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
    
    .nav-actions {
        gap: 8px;
    }
    
    .btn-login,
    .btn-register {
        padding: 6px 14px;
        font-size: 12px;
    }
    
    .carousel-main {
        height: 260px;
    }
    
    .slide-content h2 {
        font-size: 18px;
    }
    
    .slide-content p {
        font-size: 12px;
    }
    
    .slide-icon {
        font-size: 36px;
    }
    
    .services-grid,
    .features-grid,
    .stats-grid,
    .team-grid,
    .values-grid {
        grid-template-columns: 1fr;
    }
    
    .modal-content {
        padding: 25px 20px;
        width: 95vw;
    }
    
    .modal-lg {
        width: 95vw !important;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .carousel-prev,
    .carousel-next {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }
    
    .dot {
        width: 8px;
        height: 8px;
    }
    
    .dot.active {
        width: 22px;
    }
}

/* ============================================
   鐩稿叧鎺ㄨ崘鏆楄壊妯″紡
   ============================================ */

body.dark-mode .related-articles {
    border-top-color: rgba(102,126,234,0.3);
}

body.dark-mode .related-articles h3 {
    color: #e2e8f0;
}

body.dark-mode .related-card {
    background: transparent;
}

body.dark-mode .related-card a {
    color: #a0aec0;
}

body.dark-mode .related-card a:hover {
    color: #667eea;
}

body.dark-mode .related-date {
    color: #a0aec0;
}

/* ============================================
   侧边栏 Widget - 暗黑模式透明背景
   ============================================ */
body.dark-mode .sidebar-widget {
    background: transparent;
    box-shadow: none;
}

body.dark-mode .toc-item {
    border-bottom-color: rgba(102,126,234,0.15);
}

body.dark-mode .toc-text {
    color: #a0aec0;
}

body.dark-mode .toc-link:hover .toc-text {
    color: #667eea;
}

body.dark-mode .hot-item {
    border-bottom-color: rgba(102,126,234,0.15);
}

body.dark-mode .hot-item a {
    color: #a0aec0;
}

body.dark-mode .hot-item a:hover {
    color: #667eea;
}




/* ============================================
   锟斤拷锟斤拷锟斤拷锟斤拷式锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷
   ============================================ */

.comments-section {
}

.comments-container {
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.06);
    padding: 25px 30px;
}

/* 锟斤拷锟斤拷头锟斤拷 */
.comments-header {
    padding-bottom: 15px;
    border-bottom: 2px solid #667eea;
    margin-bottom: 25px;
}

.comments-title {
    font-size: 20px;
    color: #1a202c;
    font-weight: 700;
    margin: 0;
}

.comment-count {
    color: #667eea;
    font-weight: 800;
}

/* 锟斤拷锟斤拷锟叫憋拷 */
.comments-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.comment-item {
    display: flex;
    gap: 12px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f1f3f4;
}

.comment-item:last-child {
    border-bottom: none;
}

.comment-avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
}

.comment-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.comment-body {
    flex: 1;
    min-width: 0;
}

.comment-info {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.comment-nickname {
    font-size: 14px;
    color: #2d3748;
    font-weight: 600;
}

.comment-flag {
    font-size: 14px;
}

.author-badge {
    background: linear-gradient(135deg, #ff4757, #ff6b81);
    color: #fff;
    font-size: 11px;
    padding: 1px 8px;
    border-radius: 4px;
    font-weight: 600;
    line-height: 1.6;
}

.reply-target {
    font-size: 13px;
    color: #adb5bd;
    font-weight: normal;
}

.reply-target::before {
    content: '?';
    font-size: 10px;
    margin-right: 2px;
}

.comment-text {
    font-size: 15px;
    color: #2d3748;
    line-height: 1.6;
    margin: 0 0 8px 0;
    word-break: break-word;
}

.comment-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: #adb5bd;
    margin-bottom: 8px;
}

.comment-date {
    color: #adb5bd;
}

.comment-location {
    color: #adb5bd;
}

.comment-action {
    color: #adb5bd;
    cursor: pointer;
    transition: color 0.3s;
}

.comment-action:hover {
    color: #667eea;
}

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

.action-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    color: #adb5bd;
    padding: 4px 6px;
    border-radius: 4px;
    transition: all 0.3s;
}

.action-btn:hover {
    color: #667eea;
    background: #f7fafc;
}

.action-btn.liked {
    color: #ff4757;
}

.action-btn.disliked {
    color: #a0aec0;
}

.action-btn .icon {
    font-size: 16px;
}

.action-btn .count {
    font-size: 12px;
}

/* 锟截革拷锟斤拷 */
.replies {
    margin-top: 12px;
    padding-left: 12px;
    border-left: 2px solid #f1f3f4;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.reply-item {
    display: flex;
    gap: 10px;
}

.reply-item .comment-avatar {
    width: 32px;
    height: 32px;
}

.reply-item .comment-text {
    font-size: 14px;
}

/* 锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷 */
.comment-input-area {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

.login-hint {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #f8f9fa;
    border-radius: 8px;
}

.login-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #667eea;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    flex-shrink: 0;
    transition: all 0.3s;
}

.login-circle:hover {
    background: #5a6fd8;
    transform: scale(1.1);
}

.login-text {
    font-size: 14px;
    color: #6c757d;
}

.input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.input-wrapper textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #667eea;
    border-radius: 8px;
    font-size: 14px;
    color: #333;
    background: #fff;
    resize: vertical;
    font-family: inherit;
    outline: none;
    transition: border-color 0.3s;
}

.input-wrapper textarea:focus {
    border-color: #764ba2;
}

.input-wrapper textarea::placeholder {
    color: #adb5bd;
}

.input-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.toolbar-icons {
    display: flex;
    gap: 8px;
}

.toolbar-btn {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.3s;
}

.toolbar-btn:hover {
    background: #f7fafc;
}

.btn-publish {
    padding: 8px 28px;
    background: #667eea;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-publish:hover {
    background: #5a6fd8;
    transform: translateY(-1px);
}

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

/* 锟斤拷状态 */
.empty-comments {
    text-align: center;
    padding: 30px 0;
    color: #adb5bd;
    font-size: 14px;
    background: #f8f9fa;
    border-radius: 8px;
}

/* 锟斤拷色模式锟斤拷锟斤拷 */
body.dark-mode .comments-section {
    background: transparent;
}

body.dark-mode .comments-container {
    background: transparent;
}

body.dark-mode .comments-header {
    border-bottom-color: #667eea;
}

body.dark-mode .comments-title {
    color: #333;
}

body.dark-mode .comment-item {
    border-bottom-color: #ddd;
}

body.dark-mode .comment-nickname {
    color: #333;
}

body.dark-mode .comment-text {
    color: #333;
}

body.dark-mode .comment-meta {
    color: #666;
}

body.dark-mode .comment-action:hover {
    color: #667eea;
}

body.dark-mode .action-btn:hover {
    color: #667eea;
    background: transparent;
}

body.dark-mode .replies {
    border-left-color: #ddd;
}

body.dark-mode .reply-item .comment-text {
    color: #333;
}

body.dark-mode .reply-target {
    color: #666;
}

body.dark-mode .comment-input-area {
    border-top-color: #ddd;
}

body.dark-mode .login-hint {
    background: transparent;
}

body.dark-mode .login-text {
    color: #333;
}

body.dark-mode .input-wrapper textarea {
    background: transparent;
    border-color: #667eea;
    color: #333;
}

body.dark-mode .input-wrapper textarea:focus {
    border-color: #764ba2;
}

body.dark-mode .input-wrapper textarea::placeholder {
    color: #666;
}

body.dark-mode .toolbar-btn:hover {
    background: transparent;
}

body.dark-mode .empty-comments {
    background: transparent;
    color: #666;
}

/* 锟斤拷应式 */
@media (max-width: 768px) {
    .comments-section {
        padding: 20px 10px 40px;
    }

    .comments-container {
        padding: 20px 15px;
        border-radius: 8px;
    }

    .comments-title {
        font-size: 18px;
    }

    .comment-item {
        gap: 10px;
    }

    .comment-avatar {
        width: 36px;
        height: 36px;
    }

    .comment-text {
        font-size: 14px;
    }

    .replies {
        padding-left: 8px;
    }

    .reply-item .comment-avatar {
        width: 28px;
        height: 28px;
    }
}

/* 锟斤拷锟介弹锟斤拷 */
.emoji-picker {
    position: absolute;
    bottom: 100%;
    left: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    padding: 12px;
    z-index: 100;
    width: 280px;
    margin-bottom: 8px;
}

.emoji-picker-header {
    font-size: 13px;
    color: #6c757d;
    margin-bottom: 10px;
    font-weight: 600;
    text-align: center;
}

.emoji-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}

.emoji-item {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    width: 100%;
    height: 42px;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
    user-select: none;
}

.emoji-item:hover {
    background: #f7fafc;
    transform: scale(1.2);
}

/* 图片预锟斤拷 */
.image-preview {
    position: absolute;
    bottom: 100%;
    left: 60px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    padding: 8px;
    z-index: 100;
    margin-bottom: 8px;
}

.image-preview img {
    max-width: 120px;
    max-height: 80px;
    border-radius: 4px;
    object-fit: cover;
}

/* toolbar-icons 锟斤拷要 relative 锟斤拷位锟斤拷锟斤拷锟缴撅拷锟皆讹拷位锟斤拷锟斤拷元锟斤拷 */
.toolbar-icons {
    display: flex;
    gap: 8px;
    position: relative;
    flex: 1;
}

/* 锟斤拷色模式 - 锟斤拷锟介弹锟斤拷 */
body.dark-mode .emoji-picker {
    background: transparent;
    border-color: #ddd;
}

body.dark-mode .emoji-picker-header {
    color: #333;
}

body.dark-mode .emoji-item:hover {
    background: transparent;
}

body.dark-mode .image-preview {
    background: transparent;
    border-color: #ddd;
}

/* ============================================
   棣栭〉鍔ㄧ敾鏁堟灉 - 鏂囧瓧灞曠ず
   ============================================ */

#homeAnimateText {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    pointer-events: none;
}

.animate-char {
    font-size: 80px;
    font-weight: bold;
    display: inline-block;
    white-space: nowrap;
    text-shadow: 0 2px 10px rgba(102,126,234,0.5);
}

/* 鏆楄壊妯″紡涓嬬殑鏂囧瓧棰滆壊澧炲己 */
body.dark-mode #homeAnimateText .animate-char,
body.dark-mode #adminAnimateText .animate-char {
    text-shadow: 0 2px 15px rgba(102,126,234,0.8), 0 0 20px rgba(102,126,234,0.3);
}

/* ============================================
   棣栭〉鍔ㄧ敾鏁堟灉 - 鎸夐挳绉诲姩
   ============================================ */

#openclaw-ai-badge {
    transition: top 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s ease, box-shadow 0.3s ease;
}

/* ============================================
   棣栭〉鍔ㄧ敾鏁堟灉 - 鏂囧瓧灞曠ず锛堜紭鍖栫増锛?
   ============================================ */

#homeAnimateText,
#adminAnimateText {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    pointer-events: none;
}

.animate-char {
    font-size: 80px;
    font-weight: bold;
    display: inline-block;
    white-space: nowrap;
    text-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
    transition: opacity 0.4s ease, transform 0.4s ease, color 0.4s ease;
}

/* 鏆楄壊妯″紡涓嬬殑鏂囧瓧鍙戝厜澧炲己 */
body.dark-mode #homeAnimateText .animate-char,
body.dark-mode #adminAnimateText .animate-char {
    text-shadow: 0 0 15px currentColor, 0 0 30px currentColor, 0 0 45px currentColor;
}



/* 绉诲姩绔€傞厤 */
@media screen and (max-width: 768px) {
    #homeAnimateText,
    #adminAnimateText {
        gap: 4px;
    }
    .animate-char {
        font-size: 60px !important;
    }
}

/* 灏忓睆鎵嬫満閫傞厤 */
@media screen and (max-width: 480px) {
    #homeAnimateText,
    #adminAnimateText {
        gap: 2px;
    }
    .animate-char {
        font-size: 60px !important;
    }
}

/* 回到顶部按钮 */
.back-to-top {
    position: fixed;
    bottom: 80px;
    right: 38px;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(102,126,234,0.4);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(102,126,234,0.6);
}

body.dark-mode .back-to-top {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* ============================================
   付费文章页面 - 暗黑模式
   ============================================ */
body.dark-mode .paywall-banner {
    background: rgba(26, 32, 44, 0.85);
    border: 1px solid rgba(102,126,234,0.3);
}
body.dark-mode .paywall-thumb {
    background: rgba(15, 23, 42, 0.85);
}
body.dark-mode .paywall-title {
    color: #e2e8f0;
}
body.dark-mode .paywall-meta span {
    color: #a0aec0;
}
body.dark-mode .paywall-services span {
    color: #cbd5e0;
}
body.dark-mode .pay-price {
    color: #667eea;
}
body.dark-mode .pay-btn-main {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
}
body.dark-mode .pay-btn-secondary {
    background: rgba(45, 55, 72, 0.85);
    color: #cbd5e0;
    border-color: rgba(102,126,234,0.3);
}
body.dark-mode .pay-preview {
    background: rgba(26, 32, 44, 0.85);
    border-color: rgba(102,126,234,0.5);
}
body.dark-mode .pay-preview h2 {
    color: #e2e8f0;
}
body.dark-mode .pay-preview p {
    color: #a0aec0;
}
body.dark-mode .feature-list li {
    color: #a0aec0;
}
body.dark-mode .paylock-notice {
    background: rgba(120, 80, 0, 0.3);
    border-color: rgba(255, 193, 7, 0.5);
}
body.dark-mode .paylock-notice p {
    color: #ffd54f;
}
body.dark-mode .pay-option {
    background: rgba(26, 32, 44, 0.85);
    border-color: rgba(102,126,234,0.2);
}
body.dark-mode .pay-option:hover {
    border-color: rgba(102,126,234,0.5);
}
body.dark-mode .pay-option h3 {
    color: #e2e8f0;
}
body.dark-mode .pay-desc {
    color: #a0aec0;
}
body.dark-mode .pay-option-highlight {
    background: rgba(102,126,234,0.1);
}

/* ============================================
   文章列表页 - 暗黑模式
   ============================================ */
body.dark-mode .articles-list-section {
    background: transparent;
}
body.dark-mode .articles-header {
    background: transparent;
    border-bottom-color: rgba(102,126,234,0.3);
}
body.dark-mode .feed-item-link {
    background: rgba(15, 23, 42, 0.85);
    border-color: rgba(102,126,234,0.15);
}
body.dark-mode .feed-item-link:hover {
    background: rgba(26, 32, 44, 0.95);
    border-color: rgba(102,126,234,0.4);
}
body.dark-mode .feed-title {
    color: #e2e8f0;
}
body.dark-mode .feed-desc {
    color: #a0aec0;
}
body.dark-mode .feed-meta {
    color: #718096;
}
body.dark-mode .feed-category {
    background: rgba(102,126,234,0.2);
    color: #a3bffa;
}

/* ============================================
   文章内容页 - 暗黑模式
   ============================================ */
body.dark-mode .article-content {
    background: transparent;
}
body.dark-mode .article-main {
    background: rgba(255, 255, 255, 0.02);
}
body.dark-mode .articles-main {
    background: transparent;
}
body.dark-mode .article-title {
    color: #e2e8f0;
}
body.dark-mode .article-meta span {
    color: #a0aec0;
}
body.dark-mode .article-body {
    color: #cbd5e0;
}
body.dark-mode .article-body h2 {
    color: #e2e8f0;
}
body.dark-mode .article-body h3 {
    color: #e2e8f0;
}
body.dark-mode .article-body p {
    color: #cbd5e0;
}
body.dark-mode .article-body a {
    color: #667eea;
}
body.dark-mode .article-body ol,
body.dark-mode .article-body ul {
    color: #cbd5e0;
}
body.dark-mode .article-body strong {
    color: #e2e8f0;
}
body.dark-mode .article-video {
    background: rgba(102,126,234,0.05);
    border-color: rgba(102,126,234,0.2);
}
body.dark-mode .article-video p {
    color: #a0aec0;
}
body.dark-mode .article-notice {
    color: #ffd54f;
}
body.dark-mode .article-nav {
    border-color: rgba(102,126,234,0.2);
}
body.dark-mode .article-prev a,
body.dark-mode .article-next a {
    color: #a0aec0;
}
body.dark-mode .article-prev a:hover,
body.dark-mode .article-next a:hover {
    color: #667eea;
}
body.dark-mode .article-list li {
    color: #cbd5e0;
}
body.dark-mode .article-list li strong {
    color: #e2e8f0;
}

/* ============================================
   会员中心页面 - 暗黑模式
   ============================================ */
body.dark-mode .perk-card {
    background: rgba(26, 32, 44, 0.85);
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
body.dark-mode .perk-card h3 {
    color: #e2e8f0;
}
body.dark-mode .perk-card p {
    color: #a0aec0;
}
body.dark-mode .tier-card {
    background: rgba(26, 32, 44, 0.85);
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
body.dark-mode .tier-card.current {
    background: rgba(102,126,234,0.15);
}
body.dark-mode .tier-card .tier-name {
    color: #e2e8f0;
}
body.dark-mode .tier-card .tier-price {
    color: #667eea;
}
body.dark-mode .tier-card li {
    color: #a0aec0;
}
body.dark-mode .tier-card li:last-child {
    border-bottom-color: rgba(102,126,234,0.2);
}
body.dark-mode .level-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
body.dark-mode .level-progress {
    background: rgba(255,255,255,0.3);
}
body.dark-mode .level-progress-bar {
    background: rgba(255,255,255,0.9);
}

/* ============================================
   财务中心页面 - 暗黑模式
   ============================================ */
body.dark-mode .summary-card {
    background: rgba(26, 32, 44, 0.85);
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
body.dark-mode .transaction-table th {
    background: rgba(15, 23, 42, 0.85);
    color: #a0aec0;
    border-bottom-color: rgba(102,126,234,0.3);
}
body.dark-mode .transaction-table td {
    color: #cbd5e0;
    border-bottom-color: rgba(102,126,234,0.1);
}
body.dark-mode .transaction-table tr:hover {
    background: rgba(102,126,234,0.05);
}

/* ============================================
   充值中心页面 - 暗黑模式
   ============================================ */
body.dark-mode .recharge-option {
    background: rgba(26, 32, 44, 0.85);
    border-color: rgba(102,126,234,0.2);
}
body.dark-mode .recharge-option.selected {
    background: rgba(102,126,234,0.15);
    border-color: #667eea;
}
body.dark-mode .payment-method {
    background: rgba(26, 32, 44, 0.85);
    border-color: rgba(102,126,234,0.2);
}
body.dark-mode .payment-method.selected {
    background: rgba(102,126,234,0.15);
    border-color: #667eea;
}
body.dark-mode .balance-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
body.dark-mode .history-table th {
    background: rgba(15, 23, 42, 0.85);
    color: #a0aec0;
    border-bottom-color: rgba(102,126,234,0.3);
}
body.dark-mode .history-table td {
    color: #cbd5e0;
    border-bottom-color: rgba(102,126,234,0.1);
}
body.dark-mode .history-table tr:hover {
    background: rgba(102,126,234,0.05);
}


/* ===== css/stars-bg.css ===== */
/* ============================================
   宇宙星空背景 - 三层叠加结构
   层1（z:-1）：body 底部星点（最底层）
   层2（z:0）：.stars-bg-rotate 单一旋转星空（18颗呼吸闪烁白星 + 12颗长亮白星）
   层3（z:1）：.stars-bg-layer 12颗固定常亮白星 + 闪烁白星 + 大十字星 + 星球（上层）
   页面内容（隐含 z:2+）
   ============================================ */

body {
    background-color: #ffffff !important;
    background-image: none !important;
}

body.dark-mode {
    background-color: #0a0a2a !important;
    background-image:
        /* 3团星云 - 增强亮度 */
        /* 3团星云 - 进一步加亮 */
        radial-gradient(ellipse 800px 600px at 20% 30%, rgba(102,126,234,0.50), transparent 65%),
        radial-gradient(ellipse 700px 550px at 80% 70%, rgba(118,75,162,0.45), transparent 65%),
        radial-gradient(ellipse 600px 500px at 50% 50%, rgba(79,172,254,0.40), transparent 65%),
        radial-gradient(2px 2px at 10% 20%, rgba(255,255,255,1.0), transparent),
        radial-gradient(3px 3px at 50% 10%, rgba(255,255,255,1.0), transparent),
        radial-gradient(2px 2px at 70% 80%, rgba(255,255,255,1.0), transparent),
        radial-gradient(3px 3px at 15% 85%, rgba(255,255,255,1.0), transparent),
        radial-gradient(2px 2px at 90% 40%, rgba(255,255,255,1.0), transparent),
        radial-gradient(3px 3px at 55% 90%, rgba(255,255,255,1.0), transparent),
        radial-gradient(2px 2px at 5% 70%, rgba(255,255,255,1.0), transparent),
        radial-gradient(3px 3px at 75% 75%, rgba(255,255,255,1.0), transparent),
        radial-gradient(2px 2px at 40% 25%, rgba(255,255,255,1.0), transparent),
        radial-gradient(2px 2px at 65% 55%, rgba(255,255,255,1.0), transparent),
        radial-gradient(3px 3px at 25% 35%, rgba(255,255,255,1.0), transparent),
        radial-gradient(2px 2px at 85% 15%, rgba(255,255,255,1.0), transparent) !important;
    background-repeat: no-repeat;
    background-position: 20% 30%, 80% 70%, 50% 50%,
                        10% 20%, 50% 10%, 70% 80%, 15% 85%, 90% 40%, 55% 90%,
                        5% 70%, 75% 75%, 40% 25%, 65% 55%, 25% 35%, 85% 15%;
}

.stars-bg-rotate {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 150vw;
    height: 150vh;
    margin-top: -75vh;
    margin-left: -75vw;
    pointer-events: none;
    z-index: 0;
    opacity: 1;
    animation: starsRotate 120s linear infinite;
    will-change: transform;
    background-image:
        radial-gradient(circle 4px at 50% 12%, rgba(255,255,255,0.6), transparent),
        radial-gradient(circle 12px at 15% 30%, rgba(255,255,255,0.6), transparent),
        radial-gradient(circle 6px at 85% 25%, rgba(255,255,255,0.6), transparent),
        radial-gradient(circle 9px at 30% 60%, rgba(255,255,255,0.6), transparent),
        radial-gradient(circle 14px at 75% 70%, rgba(255,255,255,0.6), transparent),
        radial-gradient(circle 5px at 20% 80%, rgba(255,255,255,0.6), transparent),
        radial-gradient(circle 8px at 90% 55%, rgba(255,255,255,0.6), transparent),
        radial-gradient(circle 11px at 50% 90%, rgba(255,255,255,0.6), transparent),
        radial-gradient(circle 4px at 60% 40%, rgba(180,200,255,0.36), transparent),
        radial-gradient(circle 10px at 22% 45%, rgba(255,255,255,0.6), transparent),
        radial-gradient(circle 5px at 78% 15%, rgba(255,255,255,0.6), transparent),
        radial-gradient(circle 7px at 42% 88%, rgba(255,255,255,0.6), transparent),
        radial-gradient(circle 13px at 68% 35%, rgba(255,255,255,0.6), transparent),
        radial-gradient(circle 4px at 12% 55%, rgba(180,200,255,0.32), transparent),
        radial-gradient(circle 8px at 55% 22%, rgba(255,255,255,0.6), transparent),
        radial-gradient(circle 11px at 88% 85%, rgba(255,255,255,0.6), transparent),
        radial-gradient(circle 6px at 5% 72%, rgba(220,190,255,0.36), transparent),
        radial-gradient(circle 9px at 72% 50%, rgba(255,255,255,0.6), transparent),
        radial-gradient(circle 5px at 38% 5%, rgba(255,255,255,0.6), transparent),
        radial-gradient(circle 7px at 35% 18%, rgba(220,190,255,0.32), transparent),
        radial-gradient(circle 8px at 8% 42%, rgba(255,255,255,0.4), transparent),
        radial-gradient(circle 14px at 92% 65%, rgba(255,255,255,0.52), transparent),
        radial-gradient(circle 5px at 45% 72%, rgba(255,255,255,0.36), transparent),
        radial-gradient(circle 11px at 18% 88%, rgba(255,255,255,0.48), transparent),
        radial-gradient(circle 4px at 65% 8%, rgba(255,255,255,0.32), transparent),
        radial-gradient(circle 10px at 33% 50%, rgba(255,255,255,0.44), transparent),
        radial-gradient(circle 13px at 82% 33%, rgba(255,255,255,0.56), transparent),
        radial-gradient(circle 6px at 55% 78%, rgba(255,255,255,0.38), transparent),
        radial-gradient(circle 9px at 10% 95%, rgba(255,255,255,0.5), transparent),
        radial-gradient(circle 7px at 70% 62%, rgba(255,255,255,0.42), transparent),
        radial-gradient(circle 12px at 25% 15%, rgba(255,255,255,0.34), transparent),
        radial-gradient(circle 4px at 48% 28%, rgba(180,200,255,0.46), transparent),
        radial-gradient(circle 8px at 88% 48%, rgba(220,190,255,0.54), transparent),
        radial-gradient(circle 6px at 38% 95%, rgba(255,255,255,0.36), transparent),
        radial-gradient(circle 14px at 62% 82%, rgba(255,255,255,0.48), transparent),
        radial-gradient(circle 5px at 15% 60%, rgba(255,255,255,0.4), transparent),
        radial-gradient(circle 10px at 52% 5%, rgba(255,255,255,0.5), transparent),
        radial-gradient(circle 7px at 95% 75%, rgba(255,255,255,0.44), transparent),
        radial-gradient(circle 9px at 5% 28%, rgba(180,200,255,0.38), transparent),
        radial-gradient(circle 11px at 75% 45%, rgba(255,255,255,0.52), transparent),
        radial-gradient(circle 4px at 5% 96%, rgba(255,255,255,0.26), transparent),
        radial-gradient(circle 6px at 19% 96%, rgba(255,255,255,0.22), transparent),
        radial-gradient(circle 11px at 13% 77%, rgba(255,255,255,0.28), transparent),
        radial-gradient(circle 3px at 13% 29%, rgba(255,255,255,0.25), transparent),
        radial-gradient(circle 12px at 5% 73%, rgba(255,255,255,0.24), transparent),
        radial-gradient(circle 11px at 55% 30%, rgba(255,255,255,0.29), transparent),
        radial-gradient(circle 7px at 2% 22%, rgba(255,255,255,0.34), transparent),
        radial-gradient(circle 8px at 37% 21%, rgba(255,255,255,0.24), transparent),
        radial-gradient(circle 8px at 15% 13%, rgba(255,255,255,0.28), transparent),
        radial-gradient(circle 8px at 46% 79%, rgba(255,255,255,0.25), transparent),
        radial-gradient(circle 3px at 95% 60%, rgba(255,255,255,0.31), transparent),
        radial-gradient(circle 9px at 12% 72%, rgba(255,255,255,0.26), transparent),
        radial-gradient(circle 12px at 48% 75%, rgba(255,255,255,0.24), transparent),
        radial-gradient(circle 4px at 7% 86%, rgba(255,255,255,0.25), transparent),
        radial-gradient(circle 7px at 12% 31%, rgba(255,255,255,0.37), transparent),
        radial-gradient(circle 9px at 37% 60%, rgba(255,255,255,0.33), transparent),
        radial-gradient(circle 8px at 22% 49%, rgba(255,255,255,0.27), transparent),
        radial-gradient(circle 7px at 91% 89%, rgba(255,255,255,0.33), transparent),
        radial-gradient(circle 12px at 83% 23%, rgba(255,255,255,0.31), transparent),
        radial-gradient(circle 6px at 22% 61%, rgba(255,255,255,0.28), transparent),
        radial-gradient(circle 11px at 30% 89%, rgba(255,255,255,0.26), transparent),
        radial-gradient(circle 3px at 31% 6%, rgba(255,255,255,0.36), transparent),
        radial-gradient(circle 9px at 36% 10%, rgba(255,255,255,0.24), transparent),
        radial-gradient(circle 12px at 93% 42%, rgba(255,255,255,0.24), transparent),
        radial-gradient(circle 10px at 52% 84%, rgba(255,255,255,0.29), transparent),
        radial-gradient(circle 7px at 19% 33%, rgba(180,200,255,0.35), transparent),
        radial-gradient(circle 11px at 35% 97%, rgba(180,200,255,0.32), transparent),
        radial-gradient(circle 12px at 53% 48%, rgba(180,200,255,0.24), transparent),
        radial-gradient(circle 5px at 67% 65%, rgba(180,200,255,0.22), transparent),
        radial-gradient(circle 3px at 16% 21%, rgba(180,200,255,0.33), transparent),
        radial-gradient(circle 9px at 78% 10%, rgba(180,200,255,0.28), transparent),
        radial-gradient(circle 12px at 61% 69%, rgba(180,200,255,0.25), transparent),
        radial-gradient(circle 11px at 3% 89%, rgba(220,190,255,0.34), transparent),
        radial-gradient(circle 11px at 98% 36%, rgba(220,190,255,0.35), transparent),
        radial-gradient(circle 8px at 16% 39%, rgba(220,190,255,0.29), transparent),
        radial-gradient(circle 10px at 2% 94%, rgba(220,190,255,0.38), transparent),
        radial-gradient(circle 7px at 66% 24%, rgba(220,190,255,0.3), transparent),
        radial-gradient(circle 4px at 82% 40%, rgba(220,190,255,0.37), transparent),
        radial-gradient(circle 11px at 79% 27%, rgba(220,190,255,0.23), transparent),
        radial-gradient(circle 5px at 71% 69%, rgba(220,190,255,0.38), transparent);
background-size:
        200px 200px,
        300px 300px,
        250px 250px,
        350px 350px,
        400px 400px,
        180px 180px,
        280px 280px,
        320px 320px,
        160px 160px,
        220px 220px,
        220px 220px,
        180px 180px,
        260px 260px,
        340px 340px,
        200px 200px,
        240px 240px,
        310px 310px,
        170px 170px,
        280px 280px,
        190px 190px,
        200px 200px,
        300px 300px,
        180px 180px,
        250px 250px,
        350px 350px,
        220px 220px,
        280px 280px,
        160px 160px,
        310px 310px,
        190px 190px,
        240px 240px,
        170px 170px,
        320px 320px,
        200px 200px,
        260px 260px,
        300px 300px,
        180px 180px,
        220px 220px,
        280px 280px,
        250px 250px,
        273px 202px,
        245px 124px,
        148px 212px,
        198px 181px,
        134px 181px,
        265px 140px,
        141px 244px,
        137px 256px,
        152px 152px,
        288px 241px,
        260px 162px,
        187px 255px,
        275px 228px,
        174px 258px,
        296px 171px,
        199px 222px,
        291px 286px,
        215px 232px,
        252px 235px,
        150px 183px,
        177px 136px,
        206px 125px,
        270px 261px,
        178px 270px,
        176px 121px,
        138px 281px,
        135px 178px,
        137px 128px,
        204px 138px,
        251px 180px,
        191px 291px,
        244px 174px,
        258px 153px,
        266px 267px,
        241px 182px,
        241px 224px,
        168px 144px,
        144px 288px,
        230px 210px,
        228px 225px;
    background-position:
        50% 12%,
        15% 30%,
        85% 25%,
        30% 60%,
        75% 70%,
        20% 80%,
        90% 55%,
        50% 90%,
        60% 40%,
        35% 18%,
        22% 45%,
        78% 15%,
        42% 88%,
        68% 35%,
        12% 55%,
        55% 22%,
        88% 85%,
        5% 72%,
        72% 50%,
        38% 5%,
        8% 42%,
        92% 65%,
        45% 72%,
        18% 88%,
        65% 8%,
        33% 50%,
        82% 33%,
        55% 78%,
        10% 95%,
        70% 62%,
        25% 15%,
        48% 28%,
        88% 48%,
        38% 95%,
        62% 82%,
        15% 60%,
        52% 5%,
        95% 75%,
        5% 28%,
        75% 45%,
        61% 95%,
        8% 88%,
        85% 84%,
        14% 9%,
        53% 95%,
        45% 15%,
        33% 26%,
        26% 70%,
        59% 19%,
        56% 25%,
        37% 61%,
        33% 11%,
        58% 72%,
        14% 8%,
        85% 71%,
        3% 13%,
        98% 32%,
        23% 54%,
        64% 63%,
        29% 53%,
        9% 23%,
        50% 2%,
        51% 35%,
        60% 38%,
        56% 91%,
        95% 73%,
        86% 93%,
        64% 21%,
        26% 39%,
        29% 9%,
        76% 96%,
        71% 9%,
        97% 42%,
        9% 8%,
        76% 63%,
        66% 69%,
        22% 9%,
        67% 12%,
        25% 10%,
        78% 10%;
    background-repeat: no-repeat;
}

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

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

/* ============================================
   层3 - 闪烁白星 + 大十字星 + 星球
   z-index: 1，在旋转层之上、页面内容之下
   ============================================ */

.stars-bg-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
    contain: layout style paint;
}

/* 旧版用 spread box-shadow 批量绘制长亮星，真实手机会把大 spread
   光斑栅格化成圆角方块。长亮星现由独立 DOM 节点绘制，禁用旧伪元素。 */
.stars-bg-layer::before {
    content: none;
    box-shadow: none;
}

.fixed-long-star,
.rotating-long-star {
    position: absolute;
    width: var(--fixed-long-size, var(--rotating-long-size));
    height: var(--fixed-long-size, var(--rotating-long-size));
    border-radius: 50%;
    background: #fff;
    pointer-events: none;
    box-shadow:
        0 0 12px rgba(255,255,255,.96),
        0 0 28px rgba(255,255,255,.46);
}

.fixed-long-star {
    top: var(--fixed-long-top);
    left: var(--fixed-long-left);
    transform: translate(-50%, -50%);
    z-index: 1;
}

.rotating-long-star {
    left: calc(25vw + var(--rotating-long-x));
    top: calc(25vh + var(--rotating-long-y));
    transform: translate(-50%, -50%);
}

/* ============================================
   3a - 闪烁白星（25颗，4-14px 大小不一）
   ============================================ */

.twinkle-star {
    position: absolute;
    top: var(--fixed-star-top);
    left: var(--fixed-star-left);
    width: var(--fixed-star-size);
    height: var(--fixed-star-size);
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 16px rgba(255,255,255,1), 0 0 32px rgba(255,220,200,0.8);
    animation: twinkle 2.5s ease-in-out var(--fixed-star-delay, 0s) infinite;
    will-change: transform, opacity;
    z-index: 1;
}

@keyframes twinkle {
    0% { opacity:0; transform:scale(0.3); }
    20% { opacity:1; transform:scale(1.2); }
    40% { opacity:0.6; transform:scale(0.9); }
    60% { opacity:1; transform:scale(1.3); }
    80% { opacity:0.3; transform:scale(0.5); }
    100% { opacity:0; transform:scale(0); }
}

/* ============================================
   3b - 大十字星（3颗，12px 十字光晕）
   ============================================ */

.big-star {
    position: absolute;
    top: var(--big-star-top);
    left: var(--big-star-left);
    width: 24px;
    height: 24px;
    background: white;
    border-radius: 50%;
    box-shadow:
        0 0 32px rgba(255,255,255,1),
        0 0 64px rgba(255,255,255,1),
        0 0 110px rgba(255,255,255,0.7),
        0 0 160px rgba(255,255,255,0.35);
    animation: bigStarBlink 3s ease-in-out var(--big-star-delay, 0s) infinite;
    will-change: transform, opacity;
}

@keyframes bigStarBlink {
    0%, 100% { opacity:0.3; transform:scale(0.6); }
    50%      { opacity:1; transform:scale(1.3); }
}

/* ============================================
   少量四向十字高光
   保留四类白星原有主体，只给选中的星点叠加细长光芒。
   ============================================ */

.star-cross-accent {
    --cross-v: 38px;
    --cross-h: 26px;
    --cross-line: 1px;
    --cross-alpha: .86;
    isolation: isolate;
}

.star-cross-accent::before,
.star-cross-accent::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    pointer-events: none;
    opacity: var(--cross-alpha);
    transform: translate(-50%, -50%);
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(255,255,255,.08) 16%,
        rgba(255,255,255,.72) 43%,
        #fff 50%,
        rgba(255,255,255,.72) 57%,
        rgba(255,255,255,.08) 84%,
        transparent 100%
    );
    box-shadow: 0 0 7px rgba(255,255,255,.72);
}

.star-cross-accent::before {
    width: var(--cross-line);
    height: var(--cross-v);
}

.star-cross-accent::after {
    width: var(--cross-line);
    height: var(--cross-h);
    transform: translate(-50%, -50%) rotate(90deg);
}

.fixed-long-star.star-cross-fixed-long {
    --cross-v: 44px;
    --cross-h: 30px;
    --cross-alpha: .78;
}

.rotating-long-star.star-cross-rotating-long {
    --cross-v: 50px;
    --cross-h: 34px;
    --cross-alpha: .82;
}

.star-cross-fixed-twinkle {
    --cross-v: 34px;
    --cross-h: 22px;
    --cross-alpha: .68;
}

.star-cross-rotating-pulse {
    --cross-v: 42px;
    --cross-h: 28px;
    --cross-alpha: .76;
}

.star-cross-hero {
    --cross-v: 92px;
    --cross-h: 58px;
    --cross-line: 2px;
    --cross-alpha: .92;
}

/* 十字星只保留四向光芒；不再继承圆形星体或圆形 box-shadow。 */
.twinkle-star.star-cross-accent,
.rotating-pulse-star.star-cross-accent,
.big-star.star-cross-accent,
.fixed-long-star.star-cross-accent,
.rotating-long-star.star-cross-accent {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* ============================================
   3c - 星球（5颗，22-40px 色彩各异）
   ============================================ */

/* 通用星球样式 */
.planet, .star-planet {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform;
}

/* 星球1 - 红色气态巨行星 (100px) */
.planet1, .planet-red {
    width: 100px;
    height: 100px;
    background: radial-gradient(circle at 35% 35%, #ff8a80, #d32f2f 60%, #b71c1c 100%);
    box-shadow:
        0 0 80px rgba(255, 100, 100, 0.8),
        0 0 160px rgba(255, 100, 100, 0.5),
        0 0 240px rgba(255, 100, 100, 0.25),
        inset -10px -10px 20px rgba(0,0,0,0.4);
    top: 15%;
    left: 10%;
    animation: planetFloat1 25s ease-in-out infinite;
}

/* 星球2 - 蓝色冰巨星 (140px) */
.planet2, .planet-blue {
    width: 140px;
    height: 140px;
    background: radial-gradient(circle at 35% 35%, #82b1ff, #1976d2 60%, #0d47a1 100%);
    isolation: isolate;
    box-shadow:
        0 0 28px rgba(120, 175, 255, 0.9),
        inset -15px -15px 25px rgba(0,0,0,0.4);
    top: 60%;
    right: 8%;
    animation: planetFloat2 30s ease-in-out infinite;
}

/* 蓝色星球原来的100/200/300px动态模糊阴影会在部分GPU上产生栅格分块边界。
   改用单张连续径向渐变作为远距离光晕，随星球一起移动缩放，但不再执行巨型模糊计算。 */
.planet2::before, .planet-blue::before {
    content: '';
    position: absolute;
    inset: -125%;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle closest-side,
        rgba(145, 190, 255, .62) 0%,
        rgba(105, 160, 255, .45) 18%,
        rgba(70, 125, 245, .27) 38%,
        rgba(35, 90, 220, .13) 56%,
        rgba(15, 55, 165, .045) 70%,
        transparent 82%);
}

/* 星球3 - 紫色星云球 (80px) */
.planet3, .planet-purple {
    width: 80px;
    height: 80px;
    background: radial-gradient(circle at 35% 35%, #ea80fc, #9c27b0 60%, #6a1b9a 100%);
    box-shadow:
        0 0 70px rgba(200, 100, 255, 0.8),
        0 0 140px rgba(200, 100, 255, 0.5),
        0 0 210px rgba(200, 100, 255, 0.25),
        inset -8px -8px 15px rgba(0,0,0,0.4);
    top: 35%;
    right: 20%;
    animation: planetFloat3 20s ease-in-out infinite;
}

/* 星球4 - 橙色恒星 (60px) */
.planet4, .planet-orange {
    width: 60px;
    height: 60px;
    background: radial-gradient(circle at 35% 35%, #ffe082, #ff9800 60%, #e65100 100%);
    box-shadow:
        0 0 60px rgba(255, 180, 50, 0.9),
        0 0 120px rgba(255, 180, 50, 0.5),
        0 0 180px rgba(255, 180, 50, 0.25),
        inset -6px -6px 12px rgba(0,0,0,0.3);
    bottom: 20%;
    left: 25%;
    animation: planetFloat4 28s ease-in-out infinite;
}

/* 星球5 - 青色小行星 (45px) */
.planet5, .planet-teal {
    width: 45px;
    height: 45px;
    background: radial-gradient(circle at 35% 35%, #84ffff, #00bcd4 60%, #006064 100%);
    box-shadow:
        0 0 50px rgba(0, 200, 220, 0.8),
        0 0 100px rgba(0, 200, 220, 0.5),
        0 0 150px rgba(0, 200, 220, 0.25),
        inset -5px -5px 10px rgba(0,0,0,0.4);
    top: 75%;
    left: 60%;
    animation: planetFloat5 22s ease-in-out infinite;
}

/* 星球浮动动画 - 带缩放效果 */
.planet1, .planet-red,
.planet2, .planet-blue,
.planet3, .planet-purple,
.planet4, .planet-orange,
.planet5, .planet-teal {
    z-index: 3;
}

/* 闪烁星在大十字星下面 */
.twinkle-star {
    z-index: 1;
}

.big-star {
    z-index: 2;
}
@keyframes planetFloat1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    20% { transform: translate(120px, -80px) scale(1.25); }
    40% { transform: translate(60px, 120px) scale(0.8); }
    60% { transform: translate(-100px, 60px) scale(1.15); }
    80% { transform: translate(-60px, -100px) scale(0.85); }
}

@keyframes planetFloat2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    20% { transform: translate(-120px, 80px) scale(1.2); }
    40% { transform: translate(-160px, -60px) scale(0.75); }
    60% { transform: translate(80px, -120px) scale(1.25); }
    80% { transform: translate(40px, 100px) scale(0.85); }
}

@keyframes planetFloat3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    20% { transform: translate(-80px, -130px) scale(1.3); }
    40% { transform: translate(100px, -50px) scale(0.75); }
    60% { transform: translate(50px, 100px) scale(1.2); }
    80% { transform: translate(-70px, 60px) scale(0.85); }
}

@keyframes planetFloat4 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    20% { transform: translate(100px, 70px) scale(1.2); }
    40% { transform: translate(-70px, -100px) scale(0.8); }
    60% { transform: translate(-130px, 40px) scale(1.25); }
    80% { transform: translate(60px, -80px) scale(0.85); }
}

@keyframes planetFloat5 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    20% { transform: translate(-70px, -80px) scale(1.3); }
    40% { transform: translate(110px, 50px) scale(0.75); }
    60% { transform: translate(40px, -120px) scale(1.2); }
    80% { transform: translate(-90px, 30px) scale(0.85); }
}

@media (max-width: 768px) {
    /* Keep the architecture page's five independent mobile anchors and periods.
       Explicit opposite-edge resets prevent another component rule from
       converting a left anchor into a right anchor (or top into bottom). */
    .planet1, .planet-red {
        width: 60px;
        height: 60px;
        top: 15%;
        right: auto;
        bottom: auto;
        left: 10%;
        animation: planetFloat1 25s ease-in-out infinite;
    }

    .planet2, .planet-blue {
        width: 80px;
        height: 80px;
        top: 60%;
        right: 8%;
        bottom: auto;
        left: auto;
        animation: planetFloat2 30s ease-in-out infinite;
    }

    .planet3, .planet-purple {
        width: 50px;
        height: 50px;
        top: 35%;
        right: 20%;
        bottom: auto;
        left: auto;
        animation: planetFloat3 20s ease-in-out infinite;
    }

    .planet4, .planet-orange {
        width: 40px;
        height: 40px;
        top: auto;
        right: auto;
        bottom: 20%;
        left: 25%;
        animation: planetFloat4 28s ease-in-out infinite;
    }

    .planet5, .planet-teal {
        width: 30px;
        height: 30px;
        top: 75%;
        right: auto;
        bottom: auto;
        left: 60%;
        animation: planetFloat5 22s ease-in-out infinite;
    }
}

/* ============================================
   Footer 背景星球布局图链接 - 金色高亮
   ============================================ */
footer a[href*="stars-bg-architecture"] {
    color: #f59e0b !important;
    text-decoration: underline;
    font-weight: 600;
    transition: color 0.3s, text-shadow 0.3s;
}

footer a[href*="stars-bg-architecture"]:hover {
    color: #fbbf24 !important;
    text-shadow: 0 0 8px rgba(245,158,11,0.5);
}

/* 30颗高亮白星复用 .stars-bg-rotate 的顺时针旋转。
   其中18颗独立DOM星点执行错峰呼吸闪烁，12颗固定长亮。
   每颗星由同坐标的“纯白实体 + 白色光晕”组成，实体直径统一限制为6-20px；
   六行五列交错分布，仍使用同一个旋转父层，不新增旋转合成层。 */
.stars-bg-rotate::before {
    content: none;
}

/* 18颗独立星点各自拥有周期和负延迟：平滑渐亮渐暗，并同步轻微缩放。 */
.rotating-pulse-star {
    position: absolute;
    left: calc(25vw + var(--pulse-x));
    top: calc(25vh + var(--pulse-y));
    width: var(--pulse-size);
    height: var(--pulse-size);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #fff;
    pointer-events: none;
    opacity: .08;
    /* 与固定位置 .twinkle-star 使用相同的两层光晕强度。 */
    box-shadow: 0 0 16px rgba(255,255,255,1), 0 0 32px rgba(255,220,200,.8);
    animation: rotatingWhiteStarsBlink var(--pulse-duration) cubic-bezier(.45, 0, .55, 1) var(--pulse-delay) infinite;
    will-change: opacity, transform;
}

@keyframes rotatingWhiteStarsBlink {
    0%, 100% {
        opacity: .08;
        transform: translate(-50%, -50%) scale(.55);
    }
    38% {
        opacity: .78;
        transform: translate(-50%, -50%) scale(1.08);
    }
    52%, 62% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.32);
    }
    82% {
        opacity: .26;
        transform: translate(-50%, -50%) scale(.75);
    }
}

/* 旋转长亮组也由独立 DOM 节点绘制，禁用旧 spread-shadow 伪元素。 */
.stars-bg-rotate::after {
    content: none;
    box-shadow: none;
}

@media (max-width: 768px) {
    .stars-bg-rotate,
    .rotating-pulse-star,
    .rotating-long-star,
    .twinkle-star,
    .fixed-long-star,
    .big-star {
        display: block !important;
    }

    .stars-bg-layer {
        height: 100svh;
        overflow: hidden;
        contain: layout style paint;
    }

    .stars-bg-rotate {
        animation-duration: 150s;
    }

    .big-star {
        width: 16px;
        height: 16px;
        background: transparent !important;
        box-shadow: none !important;
    }

    .star-cross-hero {
        --cross-v: 64px;
        --cross-h: 40px;
        --cross-line: 1px;
    }

    .star-cross-fixed-twinkle {
        --cross-v: 28px;
        --cross-h: 18px;
    }

    .star-cross-rotating-pulse {
        --cross-v: 34px;
        --cross-h: 22px;
    }

    .fixed-long-star.star-cross-accent,
    .rotating-long-star.star-cross-accent {
        --cross-v: 36px;
        --cross-h: 24px;
    }

    .star-planet {
        will-change: auto !important;
    }

    .planet-red { box-shadow: 0 0 34px rgba(255,100,100,.48), inset -8px -8px 16px rgba(0,0,0,.32); }
    .planet-blue { box-shadow: 0 0 30px rgba(120,175,255,.52), inset -10px -10px 18px rgba(0,0,0,.32); }
    .planet-purple { box-shadow: 0 0 30px rgba(200,100,255,.46), inset -7px -7px 14px rgba(0,0,0,.30); }
    .planet-orange { box-shadow: 0 0 28px rgba(255,180,50,.48), inset -6px -6px 12px rgba(0,0,0,.28); }
    .planet-teal { box-shadow: 0 0 26px rgba(0,200,220,.46), inset -5px -5px 10px rgba(0,0,0,.30); }
}

@media (prefers-reduced-motion: reduce) {
    .stars-bg-rotate { animation: none; }
    /* 这18颗只在子节点内呼吸，不移动坐标，仍保留错峰显隐反馈。 */
    .rotating-pulse-star {
        animation-name: rotatingWhiteStarsBlink !important;
        animation-duration: var(--pulse-duration) !important;
        animation-delay: var(--pulse-delay) !important;
        animation-iteration-count: infinite !important;
    }
}


/* ===== css/site-runtime.css ===== */
/*
 * 运行时补丁层：只处理共享交互与响应式冲突。
 * 不修改页面宽高计算，不使用 transition: all，避免主题切换和弹窗导致抖动。
 */

:root { color-scheme: only light; }
:root.theme-dark { color-scheme: dark; }

/* 全站头部以首页为视觉基线，公共补丁最后加载，覆盖历史页面的局部差异。 */
.header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .10);
    transform: translateZ(0);
    transition: box-shadow .2s ease, background-color .2s ease;
}
.header.header-scrolled { box-shadow: 0 2px 20px rgba(0, 0, 0, .10); }
.navbar { padding: 15px 0; }
.nav-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo { display: flex; align-items: center; gap: 10px; color: #667eea; font-size: 1.4rem; font-weight: 700; }
.logo img { width: 40px; height: 40px; object-fit: contain; }
.nav-menu { display: flex; gap: 25px; }
.nav-menu a { color: #333; font-weight: 500; padding: 6px 3px; border-radius: 6px; text-decoration: none; }
.nav-menu a:hover, .nav-menu a.active { color: #667eea; background: rgba(102, 126, 234, .08); }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.btn-login, .btn-register {
    min-height: 38px;
    padding: 8px 20px;
    border-radius: 5px;
    cursor: pointer;
    font: 500 14px/1.2 "Microsoft YaHei", "PingFang SC", sans-serif;
}
.btn-login { color: #667eea; background: transparent; border: 1px solid #667eea; }
.btn-login:hover { color: #fff; background: #667eea; }
.btn-register { color: #fff; background: #667eea; border: 1px solid #667eea; }
.btn-register:hover { background: #5a6fd8; border-color: #5a6fd8; }
.btn-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    padding: 0;
    border: 1px solid #333;
    border-radius: 5px;
    color: #333;
    background: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.btn-theme-toggle:hover { color: #fff; background: #667eea; border-color: #667eea; transform: scale(1.08); }
body.dark-mode .header { background: #1a1a2e; box-shadow: 0 2px 12px rgba(0, 0, 0, .34); }
body.dark-mode .nav-menu a { color: #e2e8f0; }
body.dark-mode .nav-menu a:hover, body.dark-mode .nav-menu a.active { color: #a8b4ff; background: rgba(102, 126, 234, .18); }
body.dark-mode .btn-theme-toggle { color: #a8b4ff; background: transparent; border-color: transparent; }
body.dark-mode .btn-theme-toggle:hover { color: #c4b5fd; background: rgba(102, 126, 234, .20); }

:root.site-theme-switching *,
:root.site-theme-switching *::before,
:root.site-theme-switching *::after {
    transition-property: none !important;
}

html.site-modal-open,
body.site-modal-open {
    overflow: hidden !important;
    overscroll-behavior: contain;
}

.modal.site-modal-visible {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 3200 !important;
    padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}

.modal.site-modal-visible .modal-content {
    width: min(92vw, 560px) !important;
    max-height: calc(100dvh - 28px);
    overflow: auto;
    overscroll-behavior: contain;
}

#openclaw-ai-badge.site-float-badge {
    position: fixed !important;
    right: clamp(18px, 3.4vw, 44px) !important;
    top: 46% !important;
    bottom: auto !important;
    /* 不能使用 !important：徽章飞行关键帧需要临时接管 transform。 */
    transform: translateY(-50%);
    z-index: 1500 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    border: 0;
    border-radius: 999px;
    padding: 11px 16px;
    color: #fff;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 12px 30px rgba(91, 79, 194, .34), 0 0 0 1px rgba(255, 255, 255, .14) inset;
    cursor: pointer;
    font: 600 13px/1.2 "Microsoft YaHei", "PingFang SC", sans-serif;
    letter-spacing: .02em;
    animation: site-badge-breathe 3s ease-in-out infinite;
    will-change: transform, box-shadow;
    overflow: hidden;
    max-width: min(78vw, 340px);
    transition: opacity .18s ease, visibility .18s ease, box-shadow .22s ease !important;
}

#openclaw-ai-badge.site-float-badge:hover {
    animation-play-state: paused;
    box-shadow: 0 16px 36px rgba(91, 79, 194, .42), 0 0 0 1px rgba(255, 255, 255, .2) inset;
}

#openclaw-ai-badge.site-float-badge.site-float-hidden,
#backToTopBtn.site-float-hidden,
body.site-menu-open #openclaw-ai-badge.site-float-badge,
body.site-menu-open #backToTopBtn {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body:has(.modal.site-modal-visible) #openclaw-ai-badge.site-float-badge {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* 弹窗打开时不依赖 :has()：徽章必须完全退出交互和视觉层。 */
html.site-modal-open #openclaw-ai-badge.site-float-badge,
body.site-modal-open #openclaw-ai-badge.site-float-badge {
    display: none !important;
}

.site-badge-icon { flex: 0 0 auto; font-size: 16px; line-height: 1; }
.site-badge-label { display: block; min-width: 0; line-height: 1.35; text-align: center; white-space: normal; }

@keyframes site-badge-breathe {
    0%, 100% { transform: translateY(-50%) scale(1); filter: saturate(1); }
    50% { transform: translateY(-50%) scale(1.045); filter: saturate(1.12); }
}

.site-badge-message {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 3100;
    display: flex;
    gap: clamp(3px, .8vw, 9px);
    transform: translate(-50%, -50%);
    pointer-events: none;
    color: #fff;
    width: max-content;
    max-width: calc(100vw - 32px);
    justify-content: center;
    font: 800 clamp(24px, 4.5vw, 44px)/1.16 "Microsoft YaHei", "PingFang SC", sans-serif;
    text-shadow: 0 3px 16px rgba(15, 23, 42, .5), 0 0 22px rgba(102, 126, 234, .45);
    white-space: nowrap;
}

.site-badge-character {
    display: inline-block;
    opacity: 0;
    transform: translateY(8px) scale(.8);
    transition: opacity .18s ease, transform .18s ease;
}

.site-badge-character.is-visible { opacity: 1; transform: translateY(0) scale(1); }

.site-toast {
    position: fixed;
    left: 50%;
    bottom: max(24px, env(safe-area-inset-bottom));
    z-index: 4000;
    max-width: min(88vw, 440px);
    padding: 11px 15px;
    border-radius: 12px;
    background: rgba(15, 23, 42, .92);
    color: #fff;
    font: 14px/1.45 "Microsoft YaHei", "PingFang SC", sans-serif;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 14px);
    transition: opacity .18s ease, transform .18s ease;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .28);
}

.site-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* 回顶按钮也由公共层统一，避免会员页和内容页各自的尺寸、层级互相覆盖。 */
.back-to-top {
    position: fixed !important;
    right: 38px !important;
    bottom: 80px !important;
    z-index: 1400 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    color: #fff !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, .40) !important;
    font-size: 20px !important;
    line-height: 1 !important;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px) scale(.94);
    transition: opacity .2s ease, visibility .2s ease, transform .2s ease, box-shadow .2s ease;
}
.back-to-top.show {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}
.back-to-top.show:hover { transform: translateY(-3px) scale(1); box-shadow: 0 6px 20px rgba(102, 126, 234, .60) !important; }

.site-emoji-panel {
    position: fixed;
    left: 50%;
    bottom: max(78px, calc(20px + env(safe-area-inset-bottom)));
    z-index: 3000;
    display: none;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
    width: min(280px, 86vw);
    padding: 10px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .22);
}

.site-emoji-panel.is-visible { display: grid; }
.site-emoji-panel button { border: 0; border-radius: 8px; padding: 7px; background: #f1f5f9; cursor: pointer; font-size: 18px; }
.site-image-preview img, .avatar-preview img { max-width: 100%; height: auto; border-radius: 10px; }

/* 轮播只保留一个高度模型：桌面固定视觉比例，小屏按比例完整展示图片。 */
.carousel-track { touch-action: pan-y pinch-zoom; cursor: grab; user-select: none; }
.carousel-track.is-dragging { cursor: grabbing; }
.carousel-track img { user-select: none; -webkit-user-drag: none; }
.carousel-main { overflow: hidden; }
.carousel-main .carousel-track { min-height: inherit; }
.carousel-main .carousel-slide.active { opacity: 1 !important; visibility: visible !important; z-index: 2; }
.carousel-main .carousel-slide:not(.active) { pointer-events: none; }
.services-grid .service-card { color: inherit; text-decoration: none; }
.services-grid .service-card > span:last-child { min-width: 0; }

@media (max-width: 900px) {
    .carousel-wrapper {
        grid-template-columns: minmax(0, 1fr) !important;
        max-width: 100%;
    }

    .carousel-main {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 4 / 3;
    }

    .carousel-sidebar {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100% !important;
        height: auto !important;
        gap: 10px;
    }

    .sidebar-ad {
        min-width: 0;
        min-height: 132px;
        height: auto !important;
        padding: 14px 10px;
    }
}

@media (min-width: 901px) {
    .carousel-main { min-height: 450px; }
}

@media (max-width: 768px) {
    .navbar { position: relative; padding: 9px 0; }

    .nav-container {
        position: relative;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas: "site-logo" "site-actions" !important;
        align-items: center !important;
        gap: 8px !important;
        min-height: 0;
        padding: 0 12px !important;
    }

    .nav-container .logo {
        grid-area: site-logo;
        min-width: 0;
        width: 100%;
        justify-content: center;
        font-size: 1.05rem;
    }
    .nav-container .logo > a { width: 100%; justify-content: center; }
    .nav-container .logo img { width: 34px; height: 34px; }
    .nav-container .logo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .nav-actions {
        grid-area: site-actions;
        display: flex !important;
        width: 100% !important;
        margin: 0 !important;
        justify-content: center;
        gap: 8px !important;
    }
    .nav-actions .btn-theme-toggle,
    .nav-actions .menu-toggle-btn { flex: 0 0 40px; width: 40px; height: 40px; }
    .nav-actions .btn-login,
    .nav-actions .btn-register { min-height: 38px; padding: 7px 14px !important; white-space: nowrap; }

    .header .nav-menu {
        position: absolute !important;
        top: calc(100% + 7px) !important;
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        margin: 0 !important;
        z-index: 2800;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        padding: 8px !important;
        border: 1px solid rgba(102, 126, 234, .22);
        border-radius: 14px;
        background: rgba(255, 255, 255, .98);
        box-shadow: 0 18px 34px rgba(15, 23, 42, .16);
        list-style: none;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-8px) scale(.985);
        transform-origin: top center;
        transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
    }

    body.dark-mode .header .nav-menu { background: rgba(20, 24, 40, .98); border-color: rgba(148, 163, 184, .26); }
    .header .nav-menu.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0) scale(1);
        transition-delay: 0s;
    }
    .header .nav-menu > li { min-width: 0; margin: 0 !important; padding: 0 !important; list-style: none; }
    .header .nav-menu > li > a {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 42px;
        padding: 8px 5px !important;
        border-radius: 8px;
        color: #667eea;
        background: #f0f0ff;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.25;
        text-align: center;
        text-decoration: none;
        overflow-wrap: anywhere;
        box-shadow: none;
        transform: none;
        transition: color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
    }
    .header .nav-menu > li > a:hover,
    .header .nav-menu > li > a:focus-visible,
    .header .nav-menu > li > a.active {
        color: #fff;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        box-shadow: 0 3px 8px rgba(102, 126, 234, .34);
        transform: translateY(-1px);
    }
    body.dark-mode .header .nav-menu > li > a { color: #c7d2fe; background: rgba(102, 126, 234, .16); }
    body.dark-mode .header .nav-menu > li > a:hover,
    body.dark-mode .header .nav-menu > li > a:focus-visible,
    body.dark-mode .header .nav-menu > li > a.active { color: #fff; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }

    .carousel-track .carousel-slide .carousel-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center center;
        padding: 8px;
        background: linear-gradient(135deg, #f8faff, #eef2ff);
    }

    .carousel-prev, .carousel-next { z-index: 20; }

    .menu-toggle-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        min-height: 40px;
        position: relative;
        z-index: 2850;
        cursor: pointer;
    }

    #openclaw-ai-badge.site-float-badge {
        top: 42% !important;
        bottom: auto !important;
        right: 12px !important;
        /* 保持可被首页徽章关键帧接管，避免移动端游走动画被锁死。 */
        transform: translateY(-50%);
        min-height: 40px;
        padding: 9px 12px;
        font-size: 12px;
        max-width: min(68vw, 238px);
    }

    @keyframes site-badge-breathe {
        0%, 100% { transform: translateY(-50%) scale(1); }
        50% { transform: translateY(-50%) scale(1.04); }
    }

    .back-to-top {
        right: 14px !important;
        bottom: max(28px, calc(12px + env(safe-area-inset-bottom))) !important;
        z-index: 1400 !important;
    }
}

@media (max-width: 480px) {
    .carousel-main {
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 4 / 3;
    }

    .carousel-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sidebar-ad { min-height: 122px; padding: 11px 8px; }
    .sidebar-ad .ad-icon { display: inline-block; font-size: 24px; }
    .sidebar-ad h3 { font-size: 14px; }
    .sidebar-ad p { font-size: 11px; line-height: 1.4; }
    .modal.site-modal-visible .modal-content { width: min(94vw, 560px) !important; padding: 20px 16px; }
}

body.dark-mode .site-emoji-panel { background: #1e293b; }
body.dark-mode .site-emoji-panel button { background: #334155; }
body.dark-mode .site-toast { background: rgba(2, 6, 23, .94); }
body.dark-mode .modal.site-modal-visible .modal-content,
body.dark-mode .site-dialog .modal-content {
    background: #111827 !important;
    color: #e5e7eb !important;
    border: 1px solid #334155;
}
body.dark-mode .modal.site-modal-visible input,
body.dark-mode .modal.site-modal-visible textarea,
body.dark-mode .site-dialog input,
body.dark-mode .site-dialog textarea {
    background: #0f172a !important;
    color: #f8fafc !important;
    border-color: #475569 !important;
}
body.dark-mode .modal.site-modal-visible input::placeholder,
body.dark-mode .modal.site-modal-visible textarea::placeholder,
body.dark-mode .site-dialog input::placeholder,
body.dark-mode .site-dialog textarea::placeholder { color: #94a3b8 !important; }

/* 首页响应式基线：覆盖历史样式表中互相覆盖的断点规则。 */
.carousel-track {
    touch-action: pan-y !important;
    user-select: none;
    -webkit-user-select: none;
}

.carousel-slide .carousel-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 768px) {
    .carousel-section { padding: 12px 10px !important; }
    .carousel-wrapper { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; padding: 0 !important; }
    .carousel-main { height: clamp(230px, 58vw, 300px) !important; width: 100% !important; }
    .carousel-prev, .carousel-next { width: 40px !important; height: 40px !important; }
    .carousel-sidebar { width: 100% !important; height: auto !important; flex-direction: row !important; gap: 10px !important; }
    .sidebar-ad { min-width: 0; min-height: 122px !important; height: auto !important; padding: 12px 8px !important; }
    .sidebar-ad .ad-icon { font-size: 25px !important; }
    .sidebar-ad h3 { font-size: 14px !important; }
    .sidebar-ad p { font-size: 11px !important; line-height: 1.45 !important; }

    .services-section, .why-us-section { padding: 48px 14px !important; }
    .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
    .service-card { min-width: 0; padding: 17px 14px !important; gap: 9px !important; }
    .service-icon { font-size: 26px !important; }
    .service-card h3 { font-size: 14px !important; }
    .service-card p { font-size: 12px !important; }
    .advantages-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
    .advantage-card { min-width: 0; padding: 20px 12px !important; }
    .advantage-icon { font-size: 32px !important; }
    .advantage-card h3 { font-size: 15px !important; }
    .advantage-card p { font-size: 12px !important; }

    .footer-nav-columns { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px !important; }
    .back-to-top { right: 14px !important; bottom: max(18px, env(safe-area-inset-bottom)) !important; }
}

@media (max-width: 480px) {
    .carousel-main { height: clamp(215px, 64vw, 260px) !important; }
    .carousel-prev, .carousel-next { width: 36px !important; height: 36px !important; font-size: 19px !important; }
    .services-grid, .advantages-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .service-card { padding: 18px !important; }
}

/* 首页徽章：固定在右侧中上部，点击时再走一遍独立的上下巡航轨迹。 */
#openclaw-ai-badge.site-float-badge.site-badge-flight {
    animation: site-badge-flight 4.28s cubic-bezier(.32, .72, .18, 1) both !important;
    pointer-events: none;
}

#openclaw-ai-badge.site-float-badge.site-badge-sequence {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
}

#openclaw-ai-badge.site-float-badge.site-badge-sequence .site-badge-label {
    width: 0;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
}

@keyframes site-badge-flight {
    0% { transform: translateY(-50%) translate3d(0, 0, 0) scale(1); }
    21% { transform: translateY(-50%) translate3d(0, var(--site-badge-top, -38vh), 0) scale(1.08); }
    69% { transform: translateY(-50%) translate3d(0, var(--site-badge-bottom, 46vh), 0) scale(.96); }
    96% { transform: translateY(-50%) translate3d(0, -5vh, 0) scale(1.05); }
    100% { transform: translateY(-50%) translate3d(0, 0, 0) scale(1); }
}

.site-badge-message { isolation: isolate; contain: layout paint; text-align: center; }
.site-badge-character {
    min-width: 1em;
    opacity: 0;
    transform: translateY(10px) scale(.72);
    animation: site-badge-letter 700ms cubic-bezier(.2,.72,.24,1) both;
    animation-delay: calc(var(--site-badge-index, 0) * 720ms);
}
.site-badge-character.is-contracting { animation-name: site-badge-letter-contract; }
.site-badge-character-0 { color: #ff5ea8; text-shadow: 0 0 8px #ff5ea8, 0 0 24px #ff8fca; }
.site-badge-character-1 { color: #7bdcff; text-shadow: 0 0 8px #57baff, 0 0 24px #a0efff; }
.site-badge-character-2 { color: #b798ff; text-shadow: 0 0 8px #9b6cff, 0 0 24px #d7c4ff; }
.site-badge-character-3 { color: #ffe572; text-shadow: 0 0 8px #ffc940, 0 0 24px #fff0a1; }
.site-badge-character-4 { color: #72f5c8; text-shadow: 0 0 8px #2cdda9, 0 0 24px #a6ffe2; }
.site-badge-character-5 { color: #ff9b62; text-shadow: 0 0 8px #ff7b3d, 0 0 24px #ffd0a8; }
@keyframes site-badge-letter {
    0% { opacity: 0; transform: translateY(10px) scale(.45); }
    30%, 55% { opacity: 1; transform: translateY(0) scale(1.18); }
    100% { opacity: 0; transform: translateY(-8px) scale(.72); }
}
@keyframes site-badge-letter-contract {
    0% { opacity: 0; transform: translateY(-8px) scale(1.38); }
    30%, 55% { opacity: 1; transform: translateY(0) scale(.84); }
    100% { opacity: 0; transform: translateY(8px) scale(1.2); }
}

@media (max-width: 480px) {
    #openclaw-ai-badge.site-float-badge.site-badge-sequence {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
    }
    .site-badge-message { top: 52%; gap: clamp(2px, .8vw, 5px); font-size: clamp(32px, 10vw, 40px); }
    .site-badge-character { min-width: .9em; }
}

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

    /* 此按钮是用户主动点击触发，仍保留一次完整的反馈轨迹。 */
    #openclaw-ai-badge.site-float-badge.site-badge-flight {
        animation-duration: 1.78s !important;
    }
    .site-badge-character {
        animation-duration: 700ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ===== knowledge display-page control isolation ===== */
body.site-knowledge-display #knowledge-menu-toggle {
    position: relative;
    z-index: 3100;
    isolation: isolate;
    flex: 0 0 auto;
}
body.site-knowledge-display #openclaw-ai-badge.site-float-badge {
    z-index: 1500;
    isolation: isolate;
    contain: layout style paint;
}
body.site-knowledge-display main { position: relative; z-index: 2; }
body.site-knowledge-display .footer { position: relative; z-index: 2; }
@media (max-width: 768px) {
    body.site-knowledge-display #openclaw-ai-badge.site-float-badge {
        right: 12px;
        max-width: calc(100vw - 24px);
    }
}

/* QQ_BROWSER_STAR_COMPAT_START */
:root { color-scheme: only light; }
.stars-bg-rotate,
.stars-bg-layer,
.twinkle-star,
.rotating-pulse-star,
.big-star,
.fixed-long-star,
.rotating-long-star,
.star-cross-accent,
.star-cross-accent::before,
.star-cross-accent::after {
  color-scheme: only light;
  forced-color-adjust: none;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.rotating-pulse-star {
  filter: none !important;
  -webkit-filter: none !important;
  will-change: opacity, transform;
}
/* QQ_BROWSER_STAR_COMPAT_END */