@import url("https://fonts.googleapis.com/css2?family=Righteous&display=swap");

/* ============================================================
   1. 基础重置与定制样式 (Reset & Base)
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border-width: 0; border-style: solid; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; }

body { 
    font-family: 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: radial-gradient(at 50% 0, transparent, #080808),
                repeating-conic-gradient(hsla(0, 0%, 0%, .235) 0% 25%, transparent 0% 50%) 0 0 / 0.375em 0.375em,
                #3b3b3b;
    color: hsl(0 0% 85%); 
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    position: relative;
    display: flex;
    flex-direction: column;
}

a { color: inherit; text-decoration: inherit; }
button, input, select { font-family: inherit; font-size: 100%; color: inherit; margin: 0; padding: 0; background: transparent; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: 0.5; }
img, svg { display: block; vertical-align: middle; max-width: 100%; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 4px; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); }
::selection { background-color: rgba(255, 255, 255, 0.2); color: white; }

/* 通用工具类 */
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty-text { 
   color: #6b7280; font-size: 0.875rem; text-align: center; 
   grid-column: 1 / -1; width: 100%; padding: 2rem 0; user-select: none; 
}
.app-container { min-height: 100vh; flex: 1; position: relative; z-index: 2; width: 100%; }
.divider { width: 100%; height: 1px; background: linear-gradient(to right, transparent, rgba(255,255,255,0.2), transparent); margin-bottom: 2rem; }

/* ============================================================
   2. 导航栏与搜索 (Navbar & Search)
   ============================================================ */
.navbar { 
    position: sticky; top: 0; z-index: 50; 
    background-color: rgba(0, 0, 0, 0.4); 
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
    backdrop-filter: blur(12px) saturate(1.2); 
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
}

.nav-content { max-width: 80rem; margin: 0 auto; padding: 0.75rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.logo-wrapper { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.logo-icon { width: 2.25rem; height: 2.25rem; border-radius: 50%; box-shadow: 0 4px 10px rgba(0,0,0,0.3); object-fit: cover; }
.logo-text-desktop { font-weight: 900; color: hsl(0 0% 95%); letter-spacing: 0.05em; font-size: 1.125rem; font-family: 'Righteous', 'Microsoft YaHei', sans-serif; }
.nav-actions { display: flex; align-items: center; gap: 1rem; flex: 1; justify-content: flex-end; }

.search-wrapper { max-width: 16rem; width: 100%; position: relative; }
.search-icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: hsl(0 0% 60%); }
.search-input { 
    width: 100%; background-color: rgba(255, 255, 255, 0.05); 
    border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 9999px; 
    padding: 0.4rem 1rem 0.4rem 2.25rem; font-size: 0.875rem; color: hsl(0 0% 95%); transition: all 0.3s ease; 
}
.search-input::placeholder { color: hsl(0 0% 60%); }
.search-input:focus { outline: none; border-color: rgba(255, 255, 255, 0.3); background-color: rgba(255, 255, 255, 0.08); }

/* ============================================================
   3. 通用组件 (Buttons, Tags, Nav Tabs)
   ============================================================ */
.btn-primary { 
    -webkit-tap-highlight-color: #0000; cursor: pointer; border-radius: 12px; padding: 0.5rem 1rem;
    font-size: 0.875rem; background: #0000; border: 1px solid #0000; position: relative; color: white;
    transition: translate 0.1s ease-out, scale 0.1s ease-out; font-weight: 500; display: flex; align-items: center; gap: 0.5rem; justify-content: center;
}
.btn-primary::before, .btn-primary::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; }
.btn-primary::before { z-index: -1; background: linear-gradient(hsl(0 0% 100% / 0.18), hsl(0 0% 4% / 0.7)); backdrop-filter: saturate(2) contrast(1) blur(10px); }
.btn-primary::after { box-shadow: 0 0 1px 0.8px hsl(0 0% 100% / 0.8) inset; mask: linear-gradient(-35deg, #ffffff80, #ffffff30 30% 60%, #fff); }
.btn-primary:active:not(:disabled) { scale: 0.98; translate: 0 1px; }
.btn-primary:hover:not(:disabled) { scale: 1.02; }

/* 导航分类与标签 面包屑 */
.navigation-container { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 0.5rem; width: 100%; }
.navigation-container::-webkit-scrollbar { display: none; }

.nav-tab, .tag-filter { outline: none; -webkit-tap-highlight-color: transparent; }
.nav-tab { padding: 0.5rem; font-size: 1.25rem; font-weight: bold; color: hsl(0 0% 60%); border-bottom: 2px solid transparent; transition: all 0.3s ease; }
.nav-tab:hover { color: hsl(0 0% 90%); }
.nav-tab.active { color: hsl(0 0% 95%); border-bottom-color: #4ECDC4; }

.category-breadcrumb { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 2rem; }
.tag-filter { padding: 0.375rem 1rem; border-radius: 9999px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.875rem; color: hsl(0 0% 80%); cursor: pointer; transition: all 0.2s; user-select: none; }
.tag-filter:hover { background: rgba(255, 255, 255, 0.1); }
.tag-filter.active { background: #4ECDC4; color: #1a1a1a; font-weight: bold; border-color: #4ECDC4; box-shadow: 0 0 10px rgba(78, 205, 196, 0.4); }

.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeIn 0.4s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   4. Header 区域 (Hero Section)
   ============================================================ */
.hero-section { padding: 4rem 1rem; text-align: center; position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; }
.hero-content { max-width: 56rem; width: 100%; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }

.update-badge { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border-radius: 9999px; background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); font-size: 12px; color: hsl(0 0% 80%); margin: 0 auto 1.5rem auto; }
.bounce-anim { animation: bounce-anim 1s ease-in-out 3; }
@keyframes bounce-anim { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5%); } }

.hero-title {
    display: block; width: 100%; max-width: 90vw; color: #E6E6E6; font-family: 'Righteous', 'Microsoft YaHei', serif;
    font-size: 3.5em; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); position: relative; line-height: 1.2; margin: 0 auto 1.5rem auto; letter-spacing: 2px;
}
.hero-title::after {
    content: attr(data-shadow); position: absolute; top: .06em; left: .06em; width: 100%; height: 100%; z-index: -1; text-shadow: none;
    background-image: linear-gradient(45deg, transparent 45%, hsla(48,20%,90%,1) 45%, hsla(48,20%,90%,1) 55%, transparent 0);
    background-size: .05em .05em; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    display: flex; justify-content: center; align-items: center; white-space: normal; animation: shad-anim 60s linear infinite; word-break: break-word;
}
@keyframes shad-anim { 0% { background-position: 0 0; } 100% { background-position: 100% -100%; } }

.hero-desc { color: hsl(0 0% 75%); font-size: 1rem; line-height: 1.625; max-width: 48rem; margin: 0 auto; padding: 0 0.5rem; text-align: center; }
.feature-tags { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 2rem; }
.feature-tag { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0.75rem; font-size: 0.85rem; color: hsl(0 0% 80%); }

.desktop-random { display: block; position: relative; }
.desktop-random .tooltip { position: absolute; bottom: -2.5rem; right: 0; white-space: nowrap; background: rgba(0,0,0,0.8); color: white; font-size: 10px; padding: 0.25rem 0.5rem; border-radius: 0.375rem; opacity: 0; pointer-events: none; transition: opacity 0.15s; border: 1px solid rgba(255,255,255,0.1); }
.desktop-random:hover .tooltip { opacity: 1; }

/* ============================================================
   5. 主内容与卡片 (Main Content & Cards)
   ============================================================ */
.main-content { max-width: 90rem; margin: 0 auto; padding: 0 1rem; }
.archive-section { margin-bottom: 3.5rem; }
.section-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 0.5rem; }
.section-title { font-size: 1.5rem; font-weight: bold; color: hsl(0 0% 95%); letter-spacing: 0.025em; }
.grid-container { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1.5rem; }
.all-title { font-size: 1.25rem; font-weight: bold; color: hsl(0 0% 80%); margin-bottom: 1.5rem; padding-left: 0.5rem; border-left: 4px solid #667eea; }
.search-status { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: hsl(0 0% 70%); margin-bottom: 1.5rem; }
.pulse-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background-color: #4ECDC4; animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes pulse { 50% { opacity: .5; } }

/* 玻璃拟态游戏卡片 */
.archive-card { 
    position: relative; width: 100%; min-height: 420px; border-radius: 16px; overflow: hidden; 
    background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(20px) saturate(1.2); 
    border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); transition: all 0.3s ease; display: flex; flex-direction: column; 
}
.archive-card:hover { border-color: rgba(255, 255, 255, 0.3); transform: translateY(-4px); }

.new-badge-wrapper { position: absolute; top: 0; left: 0; z-index: 30; overflow: hidden; width: 4rem; height: 4rem; pointer-events: none; }
.new-badge-text { position: absolute; top: 10px; left: -25px; width: 80px; padding: 0.125rem 0; background-color: #FF6B6B; color: white; font-size: 10px; font-weight: bold; text-align: center; transform: rotate(-45deg); text-transform: uppercase; letter-spacing: 0.05em; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }

.card-tags-absolute { position: absolute; top: 1.25rem; right: 1.25rem; z-index: 20; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.375rem; max-width: 60%; }
.card-tag { padding: 0.125rem 0.5rem; border-radius: 0.25rem; border-width: 1px; font-size: 11px; backdrop-filter: blur(4px); font-weight: 500;}
.tag-normal { background-color: rgba(0,0,0,0.4); border-color: rgba(255,255,255,0.2); color: hsl(0 0% 95%); }
.tag-horror { background-color: rgba(255,107,107,0.3); border-color: rgba(255,107,107,0.5); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5);}

.card-bg-wrapper { position: absolute; inset: 0; z-index: 0; height: 100%; width: 100%; }
.card-cover-img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: transform 0.7s ease-out; }
.archive-card:hover .card-cover-img { transform: scale(1.05); opacity: 1; }
.card-cover-fallback { width: 100%; height: 100%; background: linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,0.2)); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.fallback-title { color: white; font-size: 1.125rem; font-weight: bold; opacity: 0.9; text-align: center; line-height: 1.375; }

.card-gradient-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(26, 26, 26, 0) 0%, rgba(26, 26, 26, 0.4) 30%, rgba(26, 26, 26, 0.95) 60%, rgba(26, 26, 26, 1) 100%); }
.card-content { position: relative; z-index: 10; padding: 1.5rem; display: flex; flex-direction: column; height: 100%; justify-content: flex-end; }
.card-title { font-size: 1.5rem; font-weight: bold; color: hsl(0 0% 95%); margin-bottom: 0.5rem; white-space: normal; overflow: visible; text-overflow: clip; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.card-desc { color: hsl(0 0% 75%); font-size: 0.875rem; line-height: 1.625; margin-bottom: 1.25rem; height: 4.5em; overflow-y: auto; padding-right: 0.5rem; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.card-divider { width: 100%; height: 1px; background-color: rgba(255,255,255,0.1); margin: 0.6rem 0 !important; }

.card-meta-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; font-size: 0.75rem; color: hsl(0 0% 60%); margin-bottom: 1.5rem; }
.card-meta-grid .meta-item, .card-meta-grid .meta-item span, .card-meta-grid .meta-item .countdown-text { font-size: 0.9rem !important; line-height: 1.5; }
.meta-item { display: flex; align-items: center; gap: 0.5rem; }
.meta-item.text-only { display: block; width: 100%; }
.meta-icon, .device-icon { color: #4ECDC4; flex-shrink: 0; width: 16px !important; height: 16px !important; margin-right: 6px; }
.author-link:hover { color: #fff; text-decoration: underline; }
.platform-icons { display: flex; gap: 0.125rem; color: #4ECDC4; }

.card-footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.play-btn { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; font-weight: bold; color: white; transition: color 0.3s; cursor: pointer; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.play-btn:hover { color: #4ECDC4; }
.arrow-icon { width: 1.25rem; height: 1.25rem; transition: transform 0.15s; }
.play-btn:hover .arrow-icon { transform: translateX(0.25rem); }
.guide-btn { display: flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; color: hsl(0 0% 90%); background-color: rgba(0,0,0,0.4); padding: 0.375rem 0.75rem; border-radius: 0.25rem; border: 1px solid rgba(255,255,255,0.2); transition: all 0.3s; backdrop-filter: blur(4px); }
.guide-btn:hover { color: white; background-color: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.4); }

/* 简报卡片 (Briefing Card) */
.briefing-card { max-width: 48rem; margin: 0 auto 1.5rem auto; background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 1.5rem 2rem; text-align: left; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.briefing-card:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); border-color: rgba(255, 255, 255, 0.2); }
.briefing-header { display: flex; align-items: center; gap: 0.5rem; font-size: 1.1rem; color: hsl(0 0% 95%); font-weight: bold; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px dashed rgba(255, 255, 255, 0.15); letter-spacing: 0.05em; }
.briefing-icon { color: #317b7b; }
.briefing-footer { margin-top: 1.25rem; display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: #439696; background: rgba(49, 123, 123, 0.08); padding: 0.5rem 1rem; border-radius: 6px; border: 1px solid rgba(49, 123, 123, 0.2); }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background-color: #439696; box-shadow: 0 0 8px rgba(67, 150, 150, 0.6); animation: pulse-dot-anim 2s infinite; }
.briefing-body p { color: hsl(0 0% 75%); line-height: 1.8; font-size: 0.95rem; margin: 0; text-align: justify; }
@keyframes pulse-dot-anim { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.8); } }

/* ============================================================
   6. 控制栏：筛选器与排版 (Filters & Layout Toggles)
   ============================================================ */
.filter-container { 
    background: rgba(255, 255, 255, 0.03); 
    backdrop-filter: blur(12px) saturate(1.2); 
    -webkit-backdrop-filter: blur(12px) saturate(1.2); 
    border: 1px solid rgba(255, 255, 255, 0.1); 
    padding: 1.5rem; 
    border-radius: 12px; 
    margin-bottom: 2rem; 
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.2);
    /* 新增以下两行，提高整个筛选器区块的层级 */
    position: relative; 
    z-index: 40; 
}
.row { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0 -0.5rem 1.5rem -0.5rem; }
.col-md-3 { flex: 1 1 calc(25% - 1rem); padding: 0 0.5rem; min-width: 200px; }
.filter-group { display: flex; flex-direction: column; gap: 0.5rem; }
.form-label { font-size: 0.9rem; font-weight: 600; color: hsl(0 0% 80%); }
.form-select { padding: 0.5rem 1rem; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.15); background-color: rgba(0, 0, 0, 0.3); color: hsl(0 0% 95%); outline: none; cursor: pointer; transition: all 0.3s ease; }
.form-select:focus { border-color: #4ECDC4; background-color: rgba(0, 0, 0, 0.5); }
.form-select option { background-color: #1F1F1F; color: #fff; }
.filter-actions { display: flex; justify-content: space-between; align-items: center; border-top: 1px dashed rgba(255, 255, 255, 0.1); padding-top: 1rem; flex-wrap: wrap; gap: 1rem; }

.filter-top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); flex-wrap: wrap; gap: 1.5rem; }
.top-nav-tabs { display: flex; gap: 2rem; flex-wrap: wrap; }
.top-tab { font-size: 1.15rem; font-weight: 600; color: hsl(0 0% 60%); padding-bottom: 0.25rem; border-bottom: 2px solid transparent; transition: all 0.3s ease; text-decoration: none; }
.top-tab:hover { color: hsl(0 0% 90%); }
.top-tab.active { color: #4ECDC4; border-bottom-color: #4ECDC4; }

/* 放大表单控件 */
.enlarged-input .search-input { height: 46px; font-size: 1rem; border-radius: 10px !important; }
.enlarged-input input.search-input { padding: 0.6rem 1.25rem 0.6rem 2.5rem; height: 43px !important; border-radius: 10px !important; }
.enlarged-input.search-wrapper { width: 100%; max-width: 340px; }
.enlarged-input .search-icon { left: 0.85rem; width: 18px; height: 18px; }
.enlarged-input #timezone-selector { padding: 0.6rem 1.25rem; min-width: 240px; font-size: 0.95rem; }
.form-select, .enlarged-input #timezone-selector { height: 40px !important; box-sizing: border-box !important; padding: 0.5rem 1rem !important; font-size: 0.9rem !important; border-radius: 8px !important; }

/* 布局切换器 */
.layout-toggles { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; background: rgba(30, 30, 30, 0.4); padding: 0.35rem; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); flex-shrink: 0; }
.layout-btn { background: transparent; border: none; color: #718096; padding: 0.35rem 0.45rem; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
.layout-btn:hover { color: #e2e8f0; background: rgba(255, 255, 255, 0.1); transform: translateY(-1px); }
.layout-btn.active { background: #4ECDC4; color: #1a1a1a; box-shadow: 0 2px 8px rgba(78, 205, 196, 0.4); transform: translateY(0); }

/* 网格状态控制 */
.grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }

/* 倒计时状态 */
.timer-normal   { color: #4ECDC4; }
.timer-warning  { color: #facc15; }
.timer-urgent   { color: #ec4f4f; }
.timer-finished { color: #a1a1aa; }
.timer-tbd      { color: #71717a; }

/* 时区选择 */
#timezone-selector, #timezone-selector option { background-color: #262626 !important; color: #e2e8f0 !important; }
#timezone-selector { border: 1px solid #3D3D3D !important; border-radius: 6px; outline: none; }

/* 分页器 */
.pagination-container { display: flex; justify-content: center; align-items: center; gap: 0.5rem; margin-top: 2.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.page-btn { padding: 0.4rem 0.8rem; border-radius: 6px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: hsl(0 0% 80%); cursor: pointer; transition: all 0.2s ease; font-size: 0.9rem; }
.page-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.15); color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.page-btn.active { background: #4ECDC4; color: #1a1a1a; border-color: #4ECDC4; font-weight: bold; box-shadow: 0 2px 8px rgba(78, 205, 196, 0.4); }
.page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.page-dots { color: hsl(0 0% 60%); padding: 0 0.2rem; }

/* ============================================================
   7. 页脚与主题切换器 (Footer & Theme Toggle)
   ============================================================ */
.footer { position: relative; z-index: 1; width: 100%; padding: 2rem 1rem; text-align: center; margin-top: 3rem; border-top: 1px solid rgba(255,255,255,0.05); }
.footer p { margin: 0; font-size: 0.85rem; color: rgba(255, 255, 255, 0.4); transition: color 300ms ease-out; line-height: 1.8; }

.theme-toggle-container { width: 60px; height: 34px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.theme-toggle { position: relative; z-index: 1000; user-select: none; transform: scale(0.45); transform-origin: center; }
.theme-toggle__checkbox { display: none; }
.theme-toggle__btn { display: block; position: relative; width: 125px; height: 70px; border-radius: 70px; border: 5px solid #1c1c1c; background-color: #3c4145; cursor: pointer; transition: all 350ms ease-in; }
.theme-toggle__btn::before { content: ''; position: absolute; top: 4px; left: 4px; width: 52px; height: 52px; border-radius: 50%; background-color: #fff; border: 5px solid #e3e3c7; transition: all 250ms ease-in; }
.theme-toggle__btn::after {
  content: ''; position: absolute; top: 62%; left: 39px; z-index: 10; width: 9.2px; height: 9.2px; opacity: 0; background-color: #fff; border-radius: 50%;
  box-shadow: #fff 0 0, #fff 2.5px 0, #fff 5px 0, #fff 7.5px 0, #fff 9px 0, #fff 11.5px 0, #fff 13px 0, #fff 17px -1px 0 1px, #fff 13px -6px 0 -2px, #fff 6px -6px 0 1px, #d3d3d3 0 0 0 3.5px, #d3d3d3 5px 0 0 3.5px, #d3d3d3 9px 0 0 3.5px, #d3d3d3 13px 0 0 3.5px, #d3d3d3 17px -1px 0 4.5px, #d3d3d3 13px -6px 0 1px, #d3d3d3 6px -6px 0 4.5px;
  transition: opacity 100ms ease-in;
}
.theme-toggle__feature {
  display: block; position: absolute; top: 9px; left: 52.5%; z-index: 20; width: 4px; height: 4px; border-radius: 50%; background-color: #fff;
  box-shadow: rgba(255,255,255,0.1) 30px -3px 0 0, rgba(255,255,255,0.1) 12px 10px 0 -1px, #fff 38px 18px 0 1px, rgba(255,255,255,0.1) 32px 34px 0 0, #fff 20px 24px 0 -1.5px, rgba(255,255,255,0.1) 5px 38px 0 1px;
  animation: starry_star 5s ease-in-out infinite;
}
.theme-toggle__feature::before { content: ''; position: absolute; top: -2px; left: -25px; width: 15px; height: 15px; background-color: #fff; border-radius: 50%; border: 4px solid #e3e3c7; box-shadow: #e3e3c7 -28px 0 0 -3px, #e3e3c7 -8px 24px 0 -2px; transform-origin: -6px 130%; transition: all 250ms ease-in; }
@keyframes starry_star { 50% { background-color: rgba(255,255,255,0.1); box-shadow: #fff 30px -3px 0 0, #fff 12px 10px 0 -1px, rgba(255,255,255,0.1) 38px 18px 0 1px, #fff 32px 34px 0 0, rgba(255,255,255,0.1) 20px 24px 0 -1.5px, #fff 5px 38px 0 1px; } }
@keyframes bounceIn { 0% { opacity: 0; transform: scale(.3); } 50% { opacity: 1; transform: scale(1.1); } 55% { transform: scale(1.1); } 75% { transform: scale(.9); } 100% { opacity: 1; transform: scale(1); } }
.theme-toggle__checkbox:checked + .theme-toggle__btn { background-color: #9ee3fb; border: 5px solid #86c3d7; }
.theme-toggle__checkbox:checked + .theme-toggle__btn::before { left: 59px; background-color: #ffdf6d; border: 5px solid #e1c348; }
.theme-toggle__checkbox:checked + .theme-toggle__btn::after { opacity: 1; animation: bounceIn 0.6s ease-in-out 0.1s backwards; }
.theme-toggle__checkbox:checked + .theme-toggle__btn .theme-toggle__feature { opacity: 0; box-shadow: rgba(255,255,255,0.1) 30px -3px 0 -4px, rgba(255,255,255,0.1) 12px 10px 0 -5px, #fff 38px 18px 0 -3px, rgba(255,255,255,0.1) 32px 34px 0 -4px, #fff 20px 24px 0 -5.5px, rgba(255,255,255,0.1) 5px 38px 0 -3px; animation: none; }
.theme-toggle__checkbox:checked + .theme-toggle__btn .theme-toggle__feature::before { left: 25px; transform: rotate(70deg); }

/* ============================================================
   8. 日间模式全局覆盖 (Day Mode Optimization)
   ============================================================ */
body.day-mode { background: #f0f4f8 url(../../../../assets/image/day-background.png) repeat; color: #2d3748; background-size: auto; }
body.day-mode ::selection { background-color: rgba(59, 130, 246, 0.2); color: #1a202c; }

/* 导航与模块背景 */
body.day-mode .navbar { background-color: rgba(255, 255, 255, 0.7); border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
body.day-mode .filter-container { background: rgba(255, 255, 255, 0.7); border-color: rgba(0, 0, 0, 0.1); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }
body.day-mode .navigation-container, body.day-mode .filter-top-bar, body.day-mode .filter-actions { border-bottom-color: rgba(0, 0, 0, 0.1); border-top-color: rgba(0, 0, 0, 0.1); }

/* 文本与标签色彩 */
body.day-mode .logo-text-desktop, body.day-mode .section-title, body.day-mode .card-title { color: #1a202c; font-weight: bold; text-shadow: none; }
body.day-mode .hero-desc, body.day-mode .card-desc, body.day-mode .form-label, body.day-mode .briefing-body p { color: #4a5568; text-shadow: none; font-weight: normal; }
body.day-mode .all-title { color: #4a5568; border-left-color: #3b82f6; }
body.day-mode .feature-tag { background: rgba(255, 255, 255, 0.6); border-color: rgba(0, 0, 0, 0.1); color: #4a5568; }
body.day-mode .update-badge { background-color: rgba(255, 255, 255, 0.8); border-color: rgba(0, 0, 0, 0.1); color: #4a5568; }

body.day-mode .hero-title { background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: initial; color: #2c3e50; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); filter: none; }
body.day-mode .hero-title::after { background-image: linear-gradient(45deg, transparent 45%, rgba(44, 62, 80, 0.8) 45%, rgba(44, 62, 80, 0.8) 55%, transparent 0); }

/* 按钮、过滤、下拉 */
body.day-mode .search-input { background-color: rgba(255, 255, 255, 0.7); border-color: rgba(0, 0, 0, 0.15); color: #1a202c; }
body.day-mode .search-input::placeholder { color: #a0aec0; }
body.day-mode .search-input:focus { border-color: rgba(59, 130, 246, 0.5); background-color: #fff; }
body.day-mode .search-icon { color: #4a5568; }

body.day-mode .form-select { background-color: #f9fafb; border-color: #cbd5e1; color: #111; }
body.day-mode .form-select option { background-color: #fff; color: #111; }
body.day-mode .form-select:focus { border-color: #3b82f6; background-color: #fff; }

body.day-mode .btn-primary { background: #ffffff; color: #1a202c; border: 2px solid #cbd5e0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); }
body.day-mode .btn-primary::before { background: none; backdrop-filter: none; }
body.day-mode .btn-primary::after { display: none; }
body.day-mode .btn-primary:hover:not(:disabled) { background: #f7fafc; border-color: #a0aec0; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }

body.day-mode .nav-tab, body.day-mode .top-tab { color: #718096; }
body.day-mode .nav-tab:hover, body.day-mode .top-tab:hover { color: #2d3748; }
body.day-mode .nav-tab.active { color: #1e3a8a; border-bottom-color: #3b82f6; }
body.day-mode .top-tab.active { color: #3b82f6; border-bottom-color: #3b82f6; }

body.day-mode .tag-filter { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.1); color: #4a5568; }
body.day-mode .tag-filter:hover { background: rgba(0,0,0,0.1); }
body.day-mode .tag-filter.active { background: #3b82f6; color: #fff; border-color: #3b82f6; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4); }

/* 卡片覆盖 */
body.day-mode .archive-card { background: rgba(255, 255, 255, 0.6); border-color: rgba(0, 0, 0, 0.1); }
body.day-mode .archive-card:hover { border-color: rgba(0, 0, 0, 0.2); }
body.day-mode .card-gradient-overlay { background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 30%, rgba(255,255,255,0.95) 60%, rgba(255,255,255,1) 100%); }
body.day-mode .tag-normal { background-color: rgba(255,255,255,0.6); border-color: rgba(0,0,0,0.15); color: #2d3748; }
body.day-mode .tag-horror { background-color: #fee2e2 !important; color: #b91c1c !important; border: 1px solid #fca5a5 !important; }
body.day-mode .card-divider { background-color: rgba(0, 0, 0, 0.1); }
body.day-mode .card-meta-grid { color: #718096; }
body.day-mode .meta-icon, body.day-mode .device-icon { color: #317b7b; }
body.day-mode .play-btn { color: #1a202c; text-shadow: none; font-weight: 600; }
body.day-mode .play-btn:hover, body.day-mode .author-link:hover { color: #317b7b; }
body.day-mode .guide-btn { background-color: rgba(255, 255, 255, 0.8); border-color: rgba(0, 0, 0, 0.1); color: #4a5568; }
body.day-mode .guide-btn:hover { background-color: #fff; border-color: rgba(0, 0, 0, 0.2); color: #1a202c; }

body.day-mode .briefing-card { background: rgba(255, 255, 255, 0.6); border-color: rgba(0, 0, 0, 0.1); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); }
body.day-mode .briefing-card:hover { border-color: rgba(0, 0, 0, 0.2); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); }
body.day-mode .briefing-header { color: #2d3748; border-bottom-color: rgba(0, 0, 0, 0.1); }
body.day-mode .briefing-icon { color: #0C5D56; }
body.day-mode .briefing-footer { color: #0C5D56; background: rgba(27, 79, 79, 0.06); border-color: rgba(27, 79, 79, 0.15); }
body.day-mode .status-dot { background-color: #0C5D56; box-shadow: 0 0 8px rgba(27, 79, 79, 0.5); }

/* 分页、排版与其它 */
body.day-mode .page-btn { background: rgba(255, 255, 255, 0.8); border-color: rgba(0, 0, 0, 0.1); color: #4a5568; }
body.day-mode .page-btn:hover:not(:disabled) { background: #fff; color: #1a202c; border-color: rgba(0, 0, 0, 0.2); }
body.day-mode .page-btn.active { background: #3b82f6; color: #fff; border-color: #3b82f6; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3); }
body.day-mode .page-dots { color: #94a3b8; }
body.day-mode .layout-toggles { background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); }
body.day-mode .layout-btn { color: #94a3b8; }
body.day-mode .layout-btn:hover { color: #1e293b; background: rgba(0, 0, 0, 0.04); }
body.day-mode .layout-btn.active { background: #3b82f6; color: #ffffff; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3); }

body.day-mode #timezone-selector, body.day-mode #timezone-selector option { background-color: #F9FAFB !important; color: #0f172a !important; }
body.day-mode #timezone-selector { border: 1px solid #cbd5e1 !important; }
body.day-mode .footer { border-top-color: rgba(0,0,0,0.1); }
body.day-mode .footer p { color: rgba(0, 0, 0, 0.5); }
body.day-mode .timer-normal { color: #059669; }
body.day-mode .timer-warning { color: #d97706; }
body.day-mode .timer-urgent { color: #dc2626; }
body.day-mode .timer-finished, body.day-mode .timer-tbd { color: #94a3b8; }

/* ============================================================
   9. 响应式布局控制 (Media Queries)
   ============================================================ */
@media (max-width: 768px) {
    /* 取消强制单列，平板及以下屏幕改为自适应双列布局 */
    .grid-container, .grid-cols-2, .grid-cols-3, .grid-cols-4 { 
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 1rem; 
    }
    .layout-toggles { display: none !important; } 
    .enlarged-input.search-wrapper, .enlarged-input #timezone-selector { max-width: 100%; min-width: 100%; }
    .top-nav-tabs { gap: 1rem; }
}

@media (max-width: 639px) {
    /* 导航与顶部区 */
    .nav-content { flex-direction: column; gap: 0.75rem; align-items: center; padding: 0.75rem 1rem; }
    .logo-wrapper { justify-content: center; width: 100%; }
    .nav-actions { justify-content: center; width: 100%; flex-wrap: wrap; gap: 0.75rem; }
    .search-wrapper { max-width: 100%; order: 3; width: 100%; margin-top: 0.25rem; }
    
    /* 简报卡片 */
    .briefing-card { padding: 1rem; margin-bottom: 1.25rem; }
    .briefing-footer { align-items: flex-start; flex-direction: column; gap: 0.5rem; }
    .status-dot { margin-top: 0.2rem; flex-shrink: 0; }
    
    /* 筛选器区域：由原来的一行一个改为 2x2 网格，大幅节省垂直空间 */
    .filter-container { padding: 1rem; margin-bottom: 1.25rem; }
    .filter-top-bar { margin-bottom: 1rem; padding-bottom: 1rem; }
    .row { margin: 0; gap: 0.75rem; justify-content: space-between; }
    .col-md-3 { flex: 0 0 calc(50% - 0.375rem); padding: 0; min-width: unset; }
    .top-nav-tabs { width: 100%; justify-content: center; gap: 1.5rem; }
    
    /* ★ 核心卡片折叠修正 (紧凑双列模式) ★ */
    .grid-container, .grid-cols-2, .grid-cols-3, .grid-cols-4 { gap: 0.6rem !important; }
    .archive-card { min-height: 220px; border-radius: 12px; }
    .card-content { padding: 0.75rem; margin-top: 0; justify-content: flex-end; }
    
    /* 标题与分割线压缩 */
    .card-title { font-size: 1rem; margin-bottom: 0.25rem; line-height: 1.3; -webkit-line-clamp: 2; }
    .card-desc { display: none; } /* 手机端空间有限，隐藏多余描述 */
    .card-divider { margin: 0.4rem 0 !important; }
    
    /* 元数据改为单列紧凑排布，防止文字重叠挤压 */
    .card-meta-grid { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.5rem; }
    .card-meta-grid .meta-item, 
    .card-meta-grid .meta-item span, 
    .card-meta-grid .meta-item .countdown-text { font-size: 0.75rem !important; line-height: 1.2; }
    .meta-icon { width: 13px !important; height: 13px !important; margin-right: 4px; }
    
    /* 底部按钮 */
    .card-footer { margin-top: 0; }
    .play-btn { font-size: 0.8rem; }
    .arrow-icon { width: 1.1rem; height: 1.1rem; }
    
    /* 标签与角标等比缩小 */
    .card-tags-absolute { top: 0.4rem; right: 0.4rem; gap: 0.2rem; }
    .card-tag { font-size: 9px; padding: 0.15rem 0.3rem; border-radius: 4px; }
    .new-badge-wrapper { width: 2.5rem; height: 2.5rem; }
    .new-badge-text { font-size: 8px; top: 5px; left: -18px; width: 50px; }

    /* 覆盖 JS 中硬编码的内联样式，将 3rem 大字的封面占位符等比缩小 */
    .card-cover-fallback > div > div { font-size: 1.35rem !important; line-height: 1.2; }
}

@media (min-width: 640px) {
    .nav-content { flex-direction: row; padding: 0.75rem 1.5rem; }
    .search-wrapper { width: 16rem; }
    .desktop-random { display: block; }
    .hero-title { font-size: 4rem; }
    .feature-tags { flex-direction: row; gap: 1rem; }
    .grid-container { gap: 1.5rem; }
    .card-content { margin-top: 150px; }
}

@media (min-width: 768px) {
    .grid-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* CCF 列表全局备注样式 */
.ccf-notice {
    display: none; 
    align-items: center; 
    gap: 0.5rem;
    background: rgba(78, 205, 196, 0.1); 
    border-left: 4px solid #4ECDC4; 
    padding: 1rem 1.25rem; 
    margin-bottom: 1.5rem; 
    border-radius: 6px; 
    color: hsl(0 0% 90%); 
    font-size: 0.95rem; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.ccf-notice svg {
    color: #4ECDC4;
    flex-shrink: 0;
}

/* 日间模式下的覆盖 */
body.day-mode .ccf-notice {
    background: rgba(59, 130, 246, 0.1); 
    border-left-color: #3b82f6; 
    color: #1a202c;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
body.day-mode .ccf-notice svg {
    color: #3b82f6;
}

/* 刷新按钮旋转动画 */
@keyframes spin-anim {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.spin-anim {
    animation: spin-anim 1s linear infinite;
}

/* ============================================================
自定义多选下拉框样式
============================================================ */
.custom-multi-select { position: relative; width: 100%; }
.custom-multi-select .select-box {
    display: flex; justify-content: space-between; align-items: center;
    background-color: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px; padding: 0.5rem 1rem; cursor: pointer;
    color: hsl(0 0% 95%); font-size: 0.9rem; height: 40px; user-select: none;
}
.custom-multi-select .select-box span {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 90%;
}
.custom-multi-select .dropdown-list {
    position: absolute; 
    top: calc(100% + 4px); 
    left: 0; 
    right: 0;
    background-color: #1F1F1F; 
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px; 
    /* 将原来的 100 改为 1000 或更高 */
    z-index: 1000; 
    max-height: 250px; 
    overflow-y: auto;
    display: none; 
    flex-direction: column; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    padding: 0.5rem 0;
}
.custom-multi-select .dropdown-list.show {
    display: flex; animation: fadeIn 0.2s ease-in-out;
}
.custom-multi-select .dropdown-item {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 1rem;
    cursor: pointer; transition: background 0.2s; color: hsl(0 0% 90%); font-size: 0.85rem;
}
.custom-multi-select .dropdown-item:hover { background-color: rgba(255,255,255,0.1); }
.custom-multi-select .dropdown-item input[type="checkbox"] {
    accent-color: #4ECDC4; width: 14px; height: 14px; cursor: pointer;
}

/* 日间模式覆盖 */
body.day-mode .custom-multi-select .select-box { background-color: #f9fafb; border-color: #cbd5e1; color: #111; }
body.day-mode .custom-multi-select .dropdown-list { background-color: #ffffff; border-color: #cbd5e1; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
body.day-mode .custom-multi-select .dropdown-item { color: #1a202c; }
body.day-mode .custom-multi-select .dropdown-item:hover { background-color: rgba(0,0,0,0.05); }

/* ============================================================
   10. SJR 表格样式与日间模式 (SJR Table & Day Mode)
   ============================================================ */
.sjr-table-wrapper {
    grid-column: 1 / -1; 
    width: 100%; 
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    background: rgba(30, 30, 35, 0.8); 
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1); 
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.sjr-table { 
    width: max-content;
    min-width: 100%;
    border-collapse: collapse; 
    text-align: left; 
    font-size: 0.95rem; 
    white-space: normal; 
}

.sjr-table th {
    padding: 16px; 
    color: #d1d5db; 
    font-weight: 600;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1); 
    background: rgba(255, 255, 255, 0.05);
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    vertical-align: top;
}

.sjr-table td {
    padding: 14px 16px; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.2s; 
    color: #9ca3af;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    vertical-align: top;
}

.sjr-table tbody tr:hover td { 
    background-color: rgba(255, 255, 255, 0.05); 
}

.sjr-table td.title-col { 
    font-weight: 500; 
    color: #f3f4f6; 
    white-space: normal; /* 允许超长标题换行 */
    min-width: clamp(120px, 16vw, 220px);
    max-width: clamp(140px, 22vw, 260px);
    line-height: 1.4;
}

.sjr-table th.col-name,
.sjr-table td.col-name {
    min-width: clamp(110px, 15vw, 170px);
    max-width: clamp(130px, 20vw, 210px);
}

.sjr-table th.col-abbr,
.sjr-table td.col-abbr {
    min-width: clamp(82px, 10vw, 118px);
    max-width: clamp(96px, 12vw, 136px);
}

.sjr-table th.col-conf-date,
.sjr-table td.col-conf-date,
.sjr-table th.col-place,
.sjr-table td.col-place {
    min-width: clamp(102px, 13vw, 140px);
    max-width: clamp(120px, 16vw, 160px);
    line-height: 1.35;
}

.sjr-table td.sjr-score { 
    font-weight: bold; 
    color: #e5e7eb; 
    font-variant-numeric: tabular-nums;
}

/* 分区 Tag 样式 */
.quartile-tag { 
    padding: 2px 8px; 
    border-radius: 4px; 
    font-size: 0.85rem; 
}
.quartile-q1 { 
    background: rgba(239, 68, 68, 0.2); 
    color: #f87171; 
    font-weight: bold; 
}
.quartile-normal { 
    background: rgba(255, 255, 255, 0.1); 
    color: #d1d5db; 
}

/* ================== Deadline Table ================== */
.deadline-table .deadline-cell {
    white-space: normal;
    min-width: 200px;
    line-height: 1.35;
}

.deadline-table .deadline-main {
    font-weight: 500;
    color: inherit;
}

.deadline-table .deadline-badge {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    color: #d1d5db;
}

.deadline-table .countdown-timer-container {
    white-space: nowrap;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.deadline-table .countdown-timer-container .countdown-text,
.table-link,
.author-link {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.table-link {
    color: #60a5fa;
    font-weight: 600;
    text-decoration: none;
}

.table-link:hover {
    text-decoration: underline;
}

body.day-mode .deadline-table .deadline-main {
    color: #1a202c;
}

body.day-mode .deadline-table .deadline-badge {
    background: #f1f5f9;
    color: #64748b;
}

body.day-mode .table-link {
    color: #2563eb;
}

/* Countdown color accents in table view */
.deadline-table .countdown-timer-container.timer-urgent { color: #ef4444; }
.deadline-table .countdown-timer-container.timer-warning { color: #facc15; }
.deadline-table .countdown-timer-container.timer-normal { color: #22c55e; }
body.day-mode .deadline-table .countdown-timer-container.timer-urgent { color: #dc2626; }
body.day-mode .deadline-table .countdown-timer-container.timer-warning { color: #d97706; }
body.day-mode .deadline-table .countdown-timer-container.timer-normal { color: #16a34a; }

/* ================== SJR 表格日间模式 (Day Mode) ================== */
body.day-mode .sjr-table-wrapper {
    background: rgba(255, 255, 255, 0.8); 
    border-color: rgba(0, 0, 0, 0.1); 
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

body.day-mode .sjr-table th {
    color: #4a5568; 
    border-bottom-color: rgba(0, 0, 0, 0.1); 
    background: rgba(0, 0, 0, 0.02);
}

body.day-mode .sjr-table td { 
    border-bottom-color: rgba(0, 0, 0, 0.05); 
    color: #4a5568; 
}

body.day-mode .sjr-table tbody tr:hover td { 
    background-color: rgba(0, 0, 0, 0.03); 
}

body.day-mode .sjr-table td.title-col { 
    color: #1a202c; 
}

body.day-mode .sjr-table td.sjr-score { 
    color: #1a202c; 
}

body.day-mode .quartile-q1 { 
    background: #fee2e2; 
    color: #b91c1c; 
}

body.day-mode .quartile-normal { 
    background: #f1f5f9; 
    color: #64748b; 
}

/* ============================================================
   11. 表格排序控制 (Table Sorting)
   ============================================================ */
.sortable-th {
    cursor: pointer;
    user-select: none;
    position: relative;
    transition: background-color 0.2s ease;
}

.sortable-th:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.sort-icon {
    display: inline-block;
    width: 14px;
    text-align: center;
    opacity: 0.3;
    font-size: 0.8em;
    margin-left: 4px;
    transition: all 0.2s;
}

.sort-icon.active {
    opacity: 1;
    color: #4ECDC4;
    transform: scale(1.2);
}

body.day-mode .sortable-th:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

body.day-mode .sort-icon.active {
    color: #3b82f6;
}

/* ============================================================
   12. 表格移动端优化 (Mobile Table Polish)
   ============================================================ */
@media (max-width: 768px) {
    .sjr-table-wrapper {
        border-radius: 10px;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
        scrollbar-width: thin;
    }

    .sjr-table {
        font-size: 0.86rem;
    }

    .sjr-table th,
    .sjr-table td {
        padding: 12px 10px;
    }

    .sjr-table th {
        position: sticky;
        top: 0;
        z-index: 2;
        backdrop-filter: blur(8px);
    }

    .sjr-table td.title-col {
        min-width: 190px;
        max-width: 240px;
        line-height: 1.45;
    }

    .deadline-table .deadline-cell {
        min-width: 180px;
    }

    .deadline-table .countdown-timer-container {
        min-width: 126px;
        font-size: 0.82rem;
    }

    .quartile-tag {
        font-size: 0.78rem;
        padding: 2px 7px;
    }

    .sortable-th {
        white-space: nowrap;
    }
}

@media (max-width: 639px) {
    .sjr-table-wrapper {
        width: calc(100% + 1rem);
        margin-left: -0.5rem;
        margin-right: -0.5rem;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }

    .sjr-table {
        font-size: 0.79rem;
    }

    .sjr-table th,
    .sjr-table td {
        padding: 10px 8px;
    }

    .sjr-table th {
        line-height: 1.2;
    }

    .sjr-table td.title-col {
        min-width: 156px;
        max-width: 200px;
        font-size: 0.83rem;
    }

    .deadline-table .deadline-cell {
        min-width: 156px;
    }

    .deadline-table .deadline-main {
        font-size: 0.8rem;
        line-height: 1.35;
    }

    .deadline-table .deadline-badge {
        margin-top: 3px;
        padding: 2px 5px;
        font-size: 0.68rem;
    }

    .deadline-table .countdown-timer-container {
        white-space: normal;
        min-width: 108px;
        font-size: 0.74rem;
        line-height: 1.3;
    }

    .quartile-tag {
        font-size: 0.72rem;
        padding: 2px 6px;
    }

    .sort-icon {
        width: 12px;
        margin-left: 2px;
    }
}