/* 基础样式（外部化） */
body {
    margin: 0; padding: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background-color: #f5f7fa;
    background-image: none;
    min-height: 100vh;
}

/* 过滤栏 */
.filter-bar { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.filter-tag { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:20px; background:#f5f7fa; color:#606266; cursor:pointer; border:1px solid #ebeef5; }
.filter-tag.active { background:#ecf5ff; color:#409EFF; border-color:#b3d8ff; }
.filter-tag .badge { background:#fff; color:#909399; border:1px solid #ebeef5; border-radius:10px; padding:0 6px; font-size:12px; }

/* 排序栏 */
.sort-bar { display:flex; align-items:center; gap:6px; margin-top:10px; }
.sort-label { color:#606266; font-size:14px; display:flex; align-items:center; gap:6px; }

/* 给筛选与排序工具条添加背景与内边距 */
.filter-bar, .sort-bar { background: #f5f7fa; padding: 8px 10px; border-radius: 10px; }

/* 加载动画容器 */
.loading-container { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:80px 20px; text-align:center; }

/* 空状态提示 */
@keyframes searchTipPulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.8; } 100% { transform: scale(1); opacity: 1; } }

/* 火焰系列代码 */
.stripe1 { top:35px; }
.stripe2 { top:42px; }
.fire-flame { position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:12px; height:20px; border-radius:50% 50% 0 0; animation: flameFlicker 0.3s ease-in-out infinite alternate; }
.flame1 { background: linear-gradient(to bottom, #FFD700 0%, #FFA500 50%, #FF4500 100%); animation-delay:0s; filter: blur(1px); }
.flame2 { background: linear-gradient(to bottom, #FFA500 0%, #FF6347 50%, #FF0000 100%); width:10px; height:18px; animation-delay:0.1s; filter: blur(0.5px); }
.flame3 { background: linear-gradient(to bottom, #FF6347 0%, #FF4500 50%, #DC143C 100%); width:8px; height:15px; animation-delay:0.2s; }
.flame4 { background: linear-gradient(to bottom, #FFE55C 0%, #FFB347 50%, #FF7F50 100%); width:14px; height:22px; animation-delay:0.05s; filter: blur(1.5px); }
.flame5 { background: linear-gradient(to bottom, #FFA500 0%, #FF4500 50%, #8B0000 100%); width:6px; height:12px; animation-delay:0.15s; }

/* 火焰粒子效果 */
.fire-particles { position:absolute; bottom:-30px; left:50%; transform:translateX(-50%); width:40px; height:40px; }
.particle { position:absolute; width:4px; height:4px; background:#FFA500; border-radius:50%; animation: particleFloat 1s ease-out infinite; }
.p1 { left:18px; animation-delay:0s; }
.p2 { left:10px; animation-delay:0.2s; }
.p3 { left:26px; animation-delay:0.4s; }
.p4 { left:14px; animation-delay:0.6s; }
.p5 { left:22px; animation-delay:0.8s; }
.p6 { left:6px; animation-delay:0.3s; }

/* 星星装饰 */
.stars { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; }
.star { position:absolute; color:#FFD700; font-size:12px; opacity:0; animation: starTwinkle 2s ease-in-out infinite; }
.star1 { top:10%; left:10%; animation-delay:0s; }
.star2 { top:20%; right:15%; animation-delay:0.5s; }
.star3 { bottom:30%; left:15%; animation-delay:1s; }
.star4 { bottom:20%; right:10%; animation-delay:1.5s; }
.star5 { top:50%; left:5%; animation-delay:0.7s; }
.star6 { top:60%; right:8%; animation-delay:1.2s; }

/* 烟雾尾迹 */
.smoke-trail { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:200px; height:200px; pointer-events:none; z-index:5; }
.smoke { position:absolute; left:50%; top:50%; width:30px; height:30px; background: radial-gradient(circle, rgba(200,200,220,0.4) 0%, transparent 70%); border-radius:50%; animation: smokeRise 2s ease-out infinite; }
.smoke1 { animation-delay:0s; }
.smoke2 { animation-delay:0.5s; }
.smoke3 { animation-delay:1s; }
.smoke4 { animation-delay:1.5s; }

/* 流星效果 */
.shooting-stars { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; overflow:hidden; }
.shooting-star { position:absolute; width:2px; height:2px; background:#fff; border-radius:50%; box-shadow:0 0 4px 1px rgba(255,255,255,0.8); animation: shootingStar 3s linear infinite; }
.ss1 { top:10%; left:80%; animation-delay:0s; }
.ss2 { top:40%; left:90%; animation-delay:1.5s; }

/* 云朵 */
.clouds { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; }
.cloud { position:absolute; font-size:24px; opacity:0.3; animation: cloudFloat 8s ease-in-out infinite; }
.cloud1 { top:15%; left:-10%; animation-delay:0s; }
.cloud2 { bottom:25%; right:-10%; animation-delay:4s; }

/* 关键帧 */
@keyframes rocketFly { 0% { transform: translateY(0) translateX(0) rotate(-3deg) scale(1);} 15% { transform: translateY(-8px) translateX(5px) rotate(2deg) scale(1.05);} 30% { transform: translateY(-18px) translateX(8px) rotate(4deg) scale(1.08);} 45% { transform: translateY(-22px) translateX(5px) rotate(1deg) scale(1.1);} 60% { transform: translateY(-18px) translateX(-5px) rotate(-3deg) scale(1.08);} 75% { transform: translateY(-8px) translateX(-8px) rotate(-5deg) scale(1.05);} 90% { transform: translateY(0) translateX(-5px) rotate(-2deg) scale(1.02);} 100% { transform: translateY(0) translateX(0) rotate(-3deg) scale(1);} }
@keyframes flameFlicker { 0% { transform: translateX(-50%) scaleY(1); opacity:1;} 100% { transform: translateX(-50%) scaleY(1.3); opacity:0.8;} }
@keyframes windowGlow { 0%,100% { box-shadow:0 0 5px rgba(168,237,234,0.5);} 50% { box-shadow:0 0 15px rgba(168,237,234,0.8);} }
@keyframes starTwinkle { 0%,100% { opacity:0; transform: scale(0.5) rotate(0deg);} 50% { opacity:1; transform: scale(1.2) rotate(180deg);} }
@keyframes glowPulse { 0%,100% { transform: translate(-50%, -50%) scale(1); opacity:0.3;} 50% { transform: translate(-50%, -50%) scale(1.3); opacity:0.6;} }
@keyframes particleFloat { 0% { transform: translateY(0) translateX(0) scale(1); opacity:1;} 50% { transform: translateY(-15px) translateX(calc(var(--random-x, 0) * 5px)) scale(0.8); opacity:0.6;} 100% { transform: translateY(-30px) translateX(calc(var(--random-x, 0) * 10px)) scale(0.3); opacity:0; } }
@keyframes smokeRise { 0% { transform: translate(-50%, -50%) scale(0.5); opacity:0.6;} 50% { transform: translate(-50%, -80px) scale(1.5); opacity:0.3;} 100% { transform: translate(-50%, -120px) scale(2.5); opacity:0;} }
@keyframes shootingStar { 0% { transform: translateX(0) translateY(0); opacity:1;} 70% { opacity:1;} 100% { transform: translateX(-150px) translateY(150px); opacity:0;} }
@keyframes cloudFloat { 0% { transform: translateX(0);} 50% { transform: translateX(100px);} 100% { transform: translateX(0);} }

/* 响应式缩放 */
@media (max-width: 768px){ .loading-container{ padding:32px 14px;} .rocket-wrapper{ width:135px; height:135px; margin-bottom:8px;} .rocket{ width:50px; height:66px; margin-left:-25px; margin-top:-33px;} .rocket-body{ width:34px; height:50px;} .rocket-body::before{ border-left:17px solid transparent; border-right:17px solid transparent; border-bottom:17px solid #667eea; top:-14px;} .rocket-window{ width:14px; height:14px; top:12px;} .rocket-stripe{ height:2px;} .stripe1{ top:28px;} .stripe2{ top:34px;} .rocket-fin{ width:12px; height:20px;} .rocket-fire{ bottom:-20px; width:18px; height:25px;} .fire-flame{ width:10px; height:16px;} .flame2{ width:8px; height:14px;} .flame3{ width:6px; height:12px;} .flame4{ width:12px; height:18px;} .flame5{ width:5px; height:10px;} .fire-particles{ bottom:-25px; width:35px; height:35px;} .particle{ width:3px; height:3px;} .rocket-glow{ width:80px; height:80px;} .smoke-trail{ width:150px; height:150px;} .smoke{ width:22px; height:22px;} .star{ font-size:10px;} .cloud{ font-size:18px;} @keyframes rocketFly{ 0%{ transform: translateY(0) translateX(0) rotate(-2deg) scale(1);} 15%{ transform: translateY(-6px) translateX(3px) rotate(1deg) scale(1.03);} 30%{ transform: translateY(-12px) translateX(5px) rotate(3deg) scale(1.05);} 45%{ transform: translateY(-15px) translateX(3px) rotate(0deg) scale(1.06);} 60%{ transform: translateY(-12px) translateX(-3px) rotate(-2deg) scale(1.05);} 75%{ transform: translateY(-6px) translateX(-5px) rotate(-3deg) scale(1.03);} 90%{ transform: translateY(0) translateX(-3px) rotate(-1deg) scale(1.01);} 100%{ transform: translateY(0) translateX(0) rotate(-2deg) scale(1);} } @keyframes cloudFloat{ 0%{ transform: translateX(0);} 50%{ transform: translateX(60px);} 100%{ transform: translateX(0);} } @keyframes shootingStar{ 0%{ transform: translateX(0) translateY(0); opacity:1;} 70%{ opacity:1;} 100%{ transform: translateX(-100px) translateY(100px); opacity:0;} } @keyframes smokeRise{ 0%{ transform: translate(-50%, -50%) scale(0.5); opacity:0.5;} 50%{ transform: translate(-50%, -60px) scale(1.3); opacity:0.25;} 100%{ transform: translate(-50%, -90px) scale(2); opacity:0;} } }
@media (max-width: 480px){ .loading-container{ padding:46px 12px;} .rocket-wrapper{ width:110px; height:110px; margin-bottom:14px;} .loading-text{ font-size:12px; margin-top:6px; line-height:19px; letter-spacing:.2px; font-weight:450; } }
@media (max-width: 768px){ .loading-text{ letter-spacing:.1px; word-spacing:.1px; line-height:20.7px; margin-top:7px; margin-bottom:6px; max-width:83%; text-align:center; text-wrap: balance; } }
.loading-text { font-size:16px; font-weight:500; animation: pulse 1.5s ease-in-out infinite; color:white; }

/* 非背景模式下的加载文字色 */
.no-bg .loading-text { color: #409EFF; }
@keyframes pulse { 0%,100%{ opacity:1;} 50%{ opacity:0.75;} }
.loading-dots::after { content: ''; animation: dots 1.5s steps(4, end) infinite; }
@keyframes dots { 0%,20%{ content:'';} 40%{ content:'.';} 60%{ content:'..';} 80%,100%{ content:'...';} }

/* 返回顶部按钮 */
.back-to-top { position: fixed; right: 24px; bottom: 24px; z-index: 9999; width: 54px; height: 54px; border: none; border-radius: 50%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; box-shadow: 0 4px 20px rgba(102,126,234,0.4); cursor: pointer; display: none; align-items: center; justify-content: center; transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease; }
.back-to-top:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(102,126,234,0.5); }
.back-to-top i { font-size: 18px; }
.back-to-top.show { display: inline-flex; }

/* 当首页空状态显示友链条时，按钮上移避免遮挡 */
body:has(.footer-friendlinks:not(.hidden)) .back-to-top { bottom: 100px; }
@media (max-width: 768px) { .back-to-top { right: 18px; bottom: 18px; width: 46px; height: 46px; } .back-to-top i { font-size: 16px; } body:has(.footer-friendlinks:not(.hidden)) .back-to-top { bottom: 80px; } }

/* 暗色模式：返回顶部按钮视觉适配 */
body.theme-dark .back-to-top { background: linear-gradient(135deg, #2c3e50 0%, #4b6cb7 100%); color: #fff; box-shadow: 0 4px 16px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.06); }
body.theme-dark .back-to-top:hover { box-shadow: 0 6px 22px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.08); transform: translateY(-2px); }

/* 暗色主题覆盖 */
body.theme-dark .title-logo h2 { color: #e6e6e6; }

/* 站点标题（类选择器） */
.site-title { color: #303133; }
body.theme-dark .site-title { color: #e6e6e6; }
body.theme-dark .search-title-bar .order-title { color: #e6e6e6; }

/* 站点标题（亮色） */
.title-logo h2 { color: #303133; }

/* 搜索标题（亮色） */
.search-title-bar .order-title { font-weight: bold; color: #303133; }
body.theme-dark .item-label { color: #bdbdbd; }
body.theme-dark .item-value { color: #e6e6e6; }
body.theme-dark .order-item { border-bottom-color: rgba(255,255,255,0.12); }
body.theme-dark .list-meta,
body.theme-dark .order-list-item .list-field { color: #bdbdbd; }
body.theme-dark .order-list-item .list-title { color: #e6e6e6; }
body.theme-dark .order-list-item .list-field-value { color: #e6e6e6; }
body.theme-dark .copy-btn { color: #cfcfcf; }
body.theme-dark .copy-btn:hover { color: #91baff; background: rgba(64,158,255,0.12); }

/* 语义卡片（暗色主题） */
/* 暗色主题下语义卡片背景与基础卡片保持一致，参考亮色模式的中性背景 */
body.theme-dark .order-card.card-success { background-color: #161616 !important; border-color: rgba(103,194,58,0.35) !important; border-left: 4px solid #9be27c; }
body.theme-dark .order-card.card-warning { background-color: #161616 !important; border-color: rgba(230,162,60,0.35) !important; border-left: 4px solid #fdbc5d; }
body.theme-dark .order-card.card-info { background-color: #161616 !important; border-color: rgba(64,158,255,0.35) !important; border-left: 4px solid #8ec5ff; }
body.theme-dark .order-card.card-success .card-title { color: #9be27c; }
body.theme-dark .order-card.card-warning .card-title { color: #fdbc5d; }
body.theme-dark .order-card.card-info .card-title { color: #91baff; }

/* 暗色模式下提示卡片文本颜色适配，覆盖可能的内联 color */
body.theme-dark .order-card.card-success,
body.theme-dark .order-card.card-warning,
body.theme-dark .order-card.card-info { color: #e6e6e6 !important; }
body.theme-dark .auto-refresh-info { color: #91baff !important; }

/* 帮助弹窗正文颜色（亮/暗） */
.help-dialog .el-dialog__body, .help-text { color: #606266; }
body.theme-dark .help-dialog .el-dialog__body, body.theme-dark .help-text { color: #cbd5e1; }

/* 暗色模式：帮助文本内的纯 div 行为（确保内层项目同色） */
body.theme-dark .help-text > div { color: #cbd5e1; }

/* Element UI 基础控件暗色适配 */
body.theme-dark .el-input__inner { background-color: #2a2a2a; border-color: #444; color: #e0e0e0; }
body.theme-dark .el-input__inner::placeholder { color: #aaaaaa; }

/* 暗色：下拉可搜索输入在聚焦时增加轻微底色 */
body.theme-dark .el-select .el-input__inner:focus,
body.theme-dark .el-alert--info { background-color: rgba(64,158,255,0.08); border-color: rgba(64,158,255,0.25); color: #e0e0e0; }
body.theme-dark .status-processing { background: rgba(64,158,255,0.16); color: #91baff; }
body.theme-dark .status-completed { background: rgba(103,194,58,0.16); color: #9be27c; }

/* 标题与排序栏 */
body.theme-dark .sort-bar .sort-label { color: #bdbdbd; }

/* 暗色下按钮阴影弱化，避免过亮 */
/* 与语义类型一致：补刷=warning(橙色)，同步=primary(蓝色)，暂停=danger(红色) */
body.theme-dark .btn-budan { box-shadow: 0 2px 4px rgba(230,162,60,0.12); }
body.theme-dark .btn-budan:hover { box-shadow: 0 3px 10px rgba(230,162,60,0.24); }
body.theme-dark .btn-tongbu { box-shadow: 0 2px 4px rgba(64,158,255,0.12); }
body.theme-dark .btn-tongbu:hover { box-shadow: 0 3px 10px rgba(64,158,255,0.24); }
body.theme-dark .btn-zanting { box-shadow: 0 2px 4px rgba(245,108,108,0.12); }
body.theme-dark .btn-zanting:hover { box-shadow: 0 3px 10px rgba(245,108,108,0.24); }
body.theme-dark .btn-youxian { box-shadow: 0 2px 4px rgba(103,194,58,0.12); }
body.theme-dark .btn-youxian:hover { box-shadow: 0 3px 10px rgba(103,194,58,0.24); }

/* 课程标题统一样式（替代内联） */
.course-title { font-weight: bold; color: #303133; }
body.theme-dark .course-title { color: #e6e6e6; }