/* Base CSS - 基础变量、重置、通用工具类 */

/* 主题颜色变量 */
:root {
    --tw-bg: #F7F8FA;
    --tw-card: #FFFFFF;
    --tw-border: #E5E6EB;
    --tw-text: #1D2129;
    --tw-muted: #4E5969;
    --tw-primary: #165DFF;
    --tw-accent: #FF7D00;
    --tw-new: #F53F3F;
    --tw-success: #00B42A;
}

/* 基础重置 */
html {
    overflow-y: auto;
    scrollbar-gutter: stable;
}

body {
    background-color: var(--tw-bg);
    color: var(--tw-text);
    min-height: 100%;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    padding-top: 70px;
}

/* 暗黑模式 */
body.dark {
    --tw-bg: #0F172A;
    --tw-card: #111827;
    --tw-border: #1F2937;
    --tw-text: #E5E7EB;
    --tw-muted: #9CA3AF;
}

body.dark a { color: inherit; }
body.dark a:hover { color: #93C5FD; }

.dark .bg-card { background-color: var(--tw-card) !important; }
.dark .bg-card\/95 { background-color: rgba(17,24,39,0.95) !important; }
.dark .bg-bgSoft { background-color: #0B1220 !important; }
.dark .border-border { border-color: var(--tw-border) !important; }
.dark [class*="bg-white"] { background-color: #0F172A !important; }
.dark .text-dark { color: var(--tw-text) !important; }
.dark .text-muted { color: var(--tw-muted) !important; }
.dark [class*="border-border"] { border-color: var(--tw-border) !important; }
.dark .shadow-sm { box-shadow: 0 10px 25px rgba(0,0,0,0.35) !important; }
.dark .bg-primary\/10 { background-color: rgba(22,93,255,0.12) !important; }
.dark .bg-accent\/10 { background-color: rgba(255,125,0,0.14) !important; }
.dark .bg-success\/10 { background-color: rgba(34,197,94,0.18) !important; }
.dark .bg-primary\/5 { background-color: rgba(22,93,255,0.08) !important; }
.dark .bg-muted\/10 { background-color: rgba(156,163,175,0.12) !important; }
.dark input, .dark textarea, .dark select { background-color: #111827 !important; color: var(--tw-text) !important; border-color: var(--tw-border) !important; }

/* 灰度模式 */
.tw-gray-mode { filter: grayscale(1); }

/* Lazyload 准备样式 */
html.tw-lazy-prep img:not([data-no-lazy]) { visibility: hidden; }

/* 通用工具类 */
.break-anywhere { word-break: break-word; }
.hidden-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; }
.hidden-line:hover { color: #165DFF; }
.hidden-line-2 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; }
.b2_gap { gap: 8px; }
.b2_gap-block { margin: 4px 0; }
.b2_gap-padding { padding: 12px; }

/* 导航样式 */
.nav-pill { padding: 10px 16px; border-radius: 6px; font-size: 16px; font-weight: 600; line-height: 1.25; transition: all 0.2s ease; }
.nav-pill:hover { background: rgba(22,93,255,0.1); color: #165DFF; }
.nav-pill-active { background: #165DFF; color: #fff; box-shadow: 0 2px 6px rgba(22,93,255,0.25); }

/* 标签样式 */
.tag-cloud-item { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--tag-bg, #F0F2F5); color: var(--tag-color, #1D2129); border: 1px solid color-mix(in srgb, var(--tag-color, #165DFF) 65%, transparent); box-shadow: 0 4px 10px rgba(0,0,0,0.04); margin: 0 6px 10px 0; transition: all 0.2s ease; }
.tag-cloud-item:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,0,0,0.08); background: color-mix(in srgb, var(--tag-color, #165DFF) 10%, #fff); color: var(--tag-color, #165DFF); }

/* 资源标签 */
.resource-tag { display: inline-flex; align-items: center; padding: 2px 6px; border-radius: 4px; font-size: 12px; font-weight: 500; }
.resource-divider { border-bottom: 1px solid #E5E6EB; margin: 4px 0; opacity: 0.5; }

/* 徽章样式 */
.tag-free { background: rgba(0,180,42,0.1); color: #00B42A; }
.tag-vip { background: rgba(255,125,0,0.1); color: #FF7D00; }
.tag-new { background: rgba(245,63,63,0.1); color: #F53F3F; }

/* 热门排名 */
.hot-rank { width: 24px; height: 24px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0; background: rgba(22,93,255,0.9); }

/* 进度条 */
.progress-bar { position: fixed; top: 0; left: 0; height: 3px; background: #165DFF; width: 0%; z-index: 9999; transition: width 0.2s ease; }

/* 按钮样式 */
.download-btn { background: #165DFF; color: white; transition: all 0.3s ease; }
.download-btn:hover { background: #0E48E5; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(22,93,255,0.3); }
.download-btn-secondary { background: #F0F2F5; color: #1D2129; transition: all 0.2s ease; }
.download-btn-secondary:hover { background: #E5E6EB; }
.page-jump-error { display: none; }

/* 动画 */
.tw-badge-wiggle { animation: tw-wiggle 1s ease-in-out infinite; display: inline-flex; align-items: center; }
@keyframes tw-wiggle { 0% { transform: translateX(-2px); } 50% { transform: translateX(2px); } 100% { transform: translateX(-2px); } }

/* 响应式 */
@media (max-width: 640px) {
    .notice-text { white-space: normal; }
    .compact-banner { padding: 12px !important; }
    .compact-banner img { height: 64px !important; }
}

/* 固定头部 */
header { position: fixed !important; top: 0 !important; left: 0; right: 0; }
.progress-bar { top: 0; }

/* 主页搜索框上移 */
main > div:first-child { margin-top: -10px; }