* {margin:0;padding:0;box-sizing:border-box;font-family:"Microsoft YaHei",sans-serif;}
body {background-color:#f5f6fa;color:#333;line-height:1.6;}
a {text-decoration:none;color:inherit;}
ul,ol {list-style:none;}
::-webkit-scrollbar {
    width: 6px;
    height: 6px
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    -webkit-border-radius: 10px;
    border-radius: 10px
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(0,0,0,0.4);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.25)
}

::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(0,0,0,0.3)
}
.container {width:100%;max-width:1200px;margin:0 auto;padding:0 15px;}
.btn {display:inline-block;padding:8px 20px;border-radius:4px;font-weight:600;text-align:center;transition:all 0.3s ease;border:none;cursor:pointer;}
.btn-primary {background:#4299e1;color:#fff;}
.btn-primary:hover {background:#38b2ac;transform:translateY(-2px);box-shadow:0 4px 8px rgba(66,153,225,0.2);}
.card {background:#fff;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,0.05);overflow:hidden;margin-bottom:30px;}
.card-header {padding:15px 20px;border-bottom:1px solid #f0f0f0;}
.card-header h2 {font-size:1.3rem;color:#2d3748;}
.card-body {padding:20px;}
.text-muted {color:#718096;}
.tag {display:inline-block;padding:3px 10px;background:#e8f4f8;color:#4299e1;font-size:0.8rem;border-radius:12px;margin-right:8px;margin-bottom:8px;}

/* 头部样式*/
.site-header {position:relative;background:linear-gradient(135deg,#4299e1,#38b2ac);color:#fff;text-align:center;padding-top:40px;overflow:hidden;}
.box-text h1 {font-size:2.2rem;margin-bottom:5px;text-shadow:0 2px 4px rgba(0,0,0,0.1);}
.box-text p {font-size:1.1rem;opacity:0.9;}
.waves {position:relative;width:100%;height:10vh;margin-bottom:-7px;min-height:60px;max-height:60px;}
.parallax > use {animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;}
.parallax > use:nth-child(1) {animation-delay:-2s;animation-duration:7s;}
.parallax > use:nth-child(2) {animation-delay:-3s;animation-duration:10s;}
.parallax > use:nth-child(3) {animation-delay:-4s;animation-duration:13s;}
.parallax > use:nth-child(4) {animation-delay:-5s;animation-duration:20s;}
@keyframes move-forever {0% {transform:translate3d(-90px,0,0);}
100% {transform:translate3d(85px,0,0);}
}

/* 主内容区样式*/
.content {padding:20px 0 40px;}
.row {display:flex;flex-wrap:wrap;margin:0 -15px;}
.col-md-12 {padding:0 15px;width:100%;}

/* 工具说明区域 */
.tool-intro {margin-bottom:30px;}
.tool-intro h3 {font-size:1.2rem;margin-bottom:15px;color:#2d3748;padding-bottom:8px;border-bottom:1px solid #e2e8f0;}
.intro-content {line-height:1.8;font-size:1rem;}
.intro-content p {margin-bottom:15px;}
.highlight-box {background:#f0f7ff;padding:15px;border-radius:8px;margin:15px 0;border-left:4px solid #4299e1;}

/* 字体检查区域 */
.check-tabs {display:flex;border-bottom:2px solid #e2e8f0;margin-bottom:20px;}
.tab-item {padding:12px 24px;cursor:pointer;font-weight:600;color:#718096;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all 0.3s;}
.tab-item:hover {color:#4299e1;}
.tab-item.active {color:#4299e1;border-bottom-color:#4299e1;}

/* 字体列表样式 - 适配原Vue模板结构 */
.font-list-container {max-height:500px;overflow-y:auto;border:1px solid #e2e8f0;border-radius:8px;background:#fff;}
.font-list {padding:0;margin:0;}
.font-list li {padding:12px 20px;border-bottom:1px solid #f0f0f0;display:flex;justify-content:space-between;align-items:center;transition:background 0.2s;}
.font-list li:hover {background:#f8fafc;}
.font-list li:last-child {border-bottom:none;}
.item-wrapper {display:flex;justify-content:space-between;align-items:center;width:100%;}
.font-name {font-size:1rem;font-weight:500;}
.font-status {font-size:0.85rem;padding:3px 12px;border-radius:12px;font-weight:600;text-align:center;min-width:70px;}
.free {background:#d4edda;color:#155724;border:1px solid #c3e6cb;}
.paid {background:#f8d7da;color:#721c24;border:1px solid #f5c6cb;}
.unknown {background:#fefefe;color:#856404;border:1px solid #ffeeba;} /* 新增未知状态样式 */

/* 搜索框样式 */
.search-box {margin-bottom:20px;}
.input-box input {width:100%;padding:12px 20px;border:2px solid #e2e8f0;border-radius:8px;font-size:1rem;transition:border-color 0.3s;}
.input-box input:focus {outline:none;border-color:#4299e1;}

/* 底部样式*/
.footer-copyright {background:#2d3748;color:#a0aec0;padding:40px 0;margin-top:30px;}
.footer-copyright .container p {text-align:center;margin-bottom:10px;font-size:0.9rem;}
.footer-copyright a {color:#4299e1;margin:0 8px;transition:color 0.3s ease;}
.footer-copyright a:hover {color:#38b2ac;}

/* 响应式样式*/
@media (max-width:768px) {
    .waves {height:40px;min-height:40px;}
    .box-text h1 {font-size:1.8rem;}
    .font-list li {flex-direction:column;align-items:flex-start;gap:8px;}
    .font-status {align-self:flex-start;}
}
@media (max-width:576px) {
    .card-body {padding:15px;}
    .tab-item {padding:10px 16px;font-size:0.9rem;}
}

/* v-cloak样式 */
[v-cloak] {display: none;}

/* 加载状态样式 */
.loading-text {text-align:center;padding:20px;color:#718096;}
.loading-text.red {color:#e53e3e;}