:root { --primary-color: #001737; --accent-color: #C82C29; --bg-color: #f4f7f9; --card-bg: #ffffff; --text-main: #333; --text-sub: #6c757d; --header-bg: rgba(255, 255, 255, 0.95); --border-color: #eee; --shadow-color: rgba(0,0,0,0.05); --ticker-bg: #fff; --deepseek-bg: linear-gradient(to right, #f8f9fa, #e9ecef); --compare-bg: #f8f9fa }
body.dark-mode { --primary-color: #aab8c5; --accent-color: #ff6b6b; --bg-color: #121212; --card-bg: #1e1e1e; --text-main: #e0e0e0; --text-sub: #a0a0a0; --header-bg: rgba(30, 30, 30, 0.95); --border-color: #333; --shadow-color: rgba(0,0,0,0.5); --ticker-bg: #1e1e1e; --deepseek-bg: linear-gradient(to right, #2d2d2d, #252525); --compare-bg: #2d2d2d }
body { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: var(--bg-color); background-image: url(/images/yun.png); background-position: 0 100%; background-size: auto 200px; background-repeat: repeat-x; background-attachment: fixed; color: var(--text-main); margin: 0; padding: 0; line-height: 1.6; transition: background-color 0.3s ease, color 0.3s ease }
body.dark-mode { background-image: none; } 
a { text-decoration: none !important; color: inherit }
.header-wrapper { background: var(--header-bg); backdrop-filter: blur(10px); box-shadow: 0 2px 10px var(--shadow-color); position: sticky; top: 0; z-index: 1000; padding: 5px 0; transition: background 0.3s ease }
.header-content { display: flex; justify-content: space-between; align-items: center }
.logo-box { height: 40px }
.logo-box object { height: 100%; pointer-events: none }
.header-actions { display: flex; align-items: center; gap: 10px; }
.btn-app-install { background: linear-gradient(135deg, #f0ad4e 0%, #ff9800 100%); color: #fff; border: none; padding: 8px 20px; border-radius: 50px; font-size: 14px; font-weight: bold; box-shadow: 0 4px 6px rgba(240, 173, 78, 0.3); transition: all 0.3s ease; white-space: nowrap; }
.btn-app-install:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(240, 173, 78, 0.4) }
.btn-theme-toggle { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border-color); background: var(--card-bg); color: var(--text-main); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; font-size: 18px; outline: none; }
.btn-theme-toggle:hover { background: var(--bg-color); transform: rotate(15deg); }
.news-ticker-wrapper { background: var(--ticker-bg); border-radius: 50px; box-shadow: 0 5px 15px var(--shadow-color); height: 50px; display: flex; align-items: center; padding: 0 10px; margin-top: 20px; margin-bottom: 10px; overflow: hidden; position: relative; border: 1px solid rgba(0,0,0,0.02) }
.ticker-label { background: linear-gradient(135deg, #FF9966 0%, #FF5E62 100%); color: #fff; border-radius: 40px; padding: 5px 15px; font-size: 13px; font-weight: bold; display: flex; align-items: center; margin-right: 15px; flex-shrink: 0 }
.ticker-label .mdi { margin-right: 5px; font-size: 16px }
.ticker-content { flex: 1; height: 50px; overflow: hidden; position: relative }
.ticker-content ul { padding: 0; margin: 0; list-style: none; position: absolute; top: 0; left: 0; width: 100% }
.ticker-content li { height: 50px; line-height: 50px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; color: var(--text-main) }
.badge-new, .badge-hot, .badge-update { font-size: 10px; padding: 2px 6px; border-radius: 4px; margin-right: 8px; vertical-align: middle; font-weight: normal }
.badge-new { background: #e3f2fd; color: #1976d2 }
.badge-hot { background: #ffebee; color: #c62828 }
.badge-update { background: #f3e5f5; color: #7b1fa2 }
.ticker-more { margin-left: 10px; font-size: 12px; color: #999; flex-shrink: 0 }
.ticker-more a:hover { color: var(--accent-color) }
.section-title { position: relative; margin: 40px 0 20px; padding-left: 15px; font-size: 18px; font-weight: 700; color: var(--text-main); border-left: 4px solid var(--accent-color) }
.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px }
.service-card { background: var(--card-bg); border-radius: 12px; padding: 20px; box-shadow: 0 5px 15px var(--shadow-color); transition: all 0.3s ease; display: flex; align-items: flex-start; position: relative; overflow: hidden; border: 1px solid transparent }
.service-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px var(--shadow-color); border-color: rgba(0,0,0,0.05) }
.card-icon { width: 50px; height: 50px; border-radius: 52px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 24px; margin-right: 15px; flex-shrink: 0; position: relative }
.ai-badge { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; background: #fff; border-radius: 50%; padding: 2px; box-shadow: 0 2px 4px rgba(0,0,0,0.1) }
.bg-purple { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) }
.bg-blue { background: linear-gradient(135deg, #36D1DC 0%, #5B86E5 100%) }
.bg-red { background: linear-gradient(135deg, #ff6b6b 0%, #ee5253 100%) }
.bg-green { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%) }
.bg-orange { background: linear-gradient(135deg, #fce38a 0%, #f38181 100%) }
.card-content { flex: 1; min-width: 0 }
.card-content h4 { margin: 0 0 6px; font-size: 17px; font-weight: 700; color: var(--text-main) }
.card-content p { margin: 0 0 8px; font-size: 13px; color: var(--text-sub); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
.card-tags { margin-top: 8px; font-size: 11px; color: #28a745; background: rgba(40, 167, 69, 0.1); display: inline-block; padding: 2px 8px; border-radius: 4px }
.card-apply { display: block; margin-top: 8px; font-size: 12px; color: #155724; background-color: #d4edda99; padding: 5px 10px; border-radius: 6px; border-left: 3px solid #28a745; line-height: 1.4 }
.service-card:hover .card-apply { background-color: #c3e6cb }
.info-section { background: var(--card-bg); border-radius: 16px; padding: 30px; margin-top: 40px; box-shadow: 0 10px 30px var(--shadow-color) }
.deepseek-box { text-align: center; background: var(--deepseek-bg); padding: 15px; border-radius: 10px; margin-bottom: 30px }
.comparison-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px }
.compare-card { background: var(--compare-bg); padding: 20px; border-radius: 10px; border-top: 4px solid #ddd }
.compare-card.qimen { border-color: #667eea }
.compare-card.liuren { border-color: #f38181 }
.compare-card.taiyi { border-color: #11998e }
.compare-card strong { font-size: 18px; display: block; margin-bottom: 10px; color: var(--text-main) }
.compare-card ul { padding-left: 20px; font-size: 13px; color: var(--text-sub) }
.quick-links { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px }
.link-btn { padding: 8px 16px; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 6px; font-size: 13px; color: var(--text-sub); transition: all 0.2s }
.link-btn:hover { background: var(--primary-color); color: #fff; border-color: var(--primary-color) }
.footer { text-align: center; padding: 40px 20px; font-size: 12px; color: #999; border-top: 1px solid var(--border-color); margin-top: 50px }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
@media (max-width: 992px) { .grid-container { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 768px) {
    .grid-container { grid-template-columns: 1fr }
    .comparison-grid { grid-template-columns: 1fr }
    .news-ticker-wrapper { border-radius: 12px; height: 44px; padding: 0 8px }
    .ticker-label { padding: 5px; margin-right: 10px; border-radius: 8px }
    .ticker-label .label-text { display: none }
    .ticker-label .mdi { margin-right: 0 }
    .ticker-content li { font-size: 12px; height: 44px; line-height: 44px }
    .badge-new, .badge-hot, .badge-update { display: none }
}

.lite-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(5px); z-index: 9999; display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: all 0.3s ease }
.lite-modal-overlay.active { opacity: 1; visibility: visible }
.lite-modal-content { background: #fff; width: 95vw; height: 92vh; max-width: 1400px; border-radius: 12px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; transform: scale(0.95); opacity: 0; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); overflow: hidden; position: relative }
.lite-modal-overlay.active .lite-modal-content { transform: scale(1); opacity: 1 }
body.dark-mode .lite-modal-content { background: #1e1e1e; border: 1px solid #333 }
.lite-modal-header { height: 44px; display: flex; justify-content: space-between; align-items: center; padding: 0 15px; border-bottom: 1px solid #eee; background: var(--card-bg) }
body.dark-mode .lite-modal-header { border-bottom-color: #333 }
.lite-modal-title { font-weight: 600; font-size: 16px; color: var(--text-main); display: flex; align-items: center; gap: 8px }
.lite-modal-close { width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(0,0,0,0.05); color: var(--text-main); font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s }
.lite-modal-close:hover { background: var(--accent-color); color: #fff }
.lite-modal-body { flex: 1; position: relative; background: #fff }
.lite-modal-iframe { width: 100%; height: 100%; border: none; display: block }
.lite-modal-loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border: 4px solid #f3f3f3; border-top: 4px solid var(--accent-color); border-radius: 50%; animation: spin 1s linear infinite; pointer-events: none; z-index: 1 }
@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg) }
    100% { transform: translate(-50%, -50%) rotate(360deg) }
}

@media (max-width: 768px) {
    .lite-modal-content { width: 100%; height: 100%; border-radius: 0 }
    .lite-modal-header { height: auto }
}

.service-card.has-popover { position: relative !important; overflow: visible !important; z-index: 10; transition: z-index 0s 0.3s }
.service-card.has-popover.active { z-index: 100 !important; transition: none }
.fortune-popover { position: absolute; top: 105%; left: 0; width: 100%; min-width: 300px; left: 50%; transform: translateX(-50%) translateY(10px); background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.15), 0 4px 10px rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.05); padding: 15px; opacity: 0; visibility: hidden; pointer-events: none; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) }
.service-card.has-popover.active .fortune-popover { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0) }
.popover-arrow { position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 12px; height: 12px; background: #fff; border-top: 1px solid rgba(0,0,0,0.05); border-left: 1px solid rgba(0,0,0,0.05); transition: left 0.3s ease }
@media (min-width: 768px) {
    .fortune-popover { max-width: 1200px; margin: 0 auto }
}

.popover-title { font-size: 12px; color: #FFF; margin-bottom: 10px; text-align: center }
.popover-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px }
.popover-item { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-decoration: none !important; color: #666; transition: transform 0.2s }
.popover-item:active { transform: scale(0.9) }
.popover-item img { width: 123px; height: 207px; border-radius: 10px; margin-bottom: 4px; background: #f8f8f8; border: 1px solid #eee }
.popover-item span { position: absolute; top: 0; left: 0; background-color: #ffff00; color: #c20000; transform: scale(0.9); transform-origin: top left; padding: 1px 5px; border-radius: 10px 0 8px 0; font-weight: bold; white-space: nowrap; z-index: 5; box-shadow: 1px 1px 3px rgba(0,0,0,0.2) }
@media (max-width: 480px) {
    .fortune-popover { width: 90vw; min-width: auto }
	
	.popover-item img {width: 103px;}
}
.sys-tiny-avatar { position: absolute; width: 73px !important; height: 73px !important; border-radius: 50% !important; object-fit: cover; top: 123px; left: 50%; transform: translateX(-50%); border: 2px solid #fff !important; background: #fff !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); z-index: 2 }
.fortune-popover,.popover-arrow { background-color: mediumseagreen }