/* ========================================
   自救者X - V4 主样式表
   从预览版完整提取
   ======================================== */

:root {
    --brand: #4BAF5F;
    --brand-dark: #3d9650;
    --bg-base: #f8faf9;
}

* { box-sizing: border-box; }

body {
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    background: var(--bg-base);
    color: #121212;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 10px; }

/* ---- Mesh Background ---- */
.mesh-bg {
    position: fixed; inset: 0; z-index: -1;
    background: radial-gradient(at 0% 0%, rgba(75,175,95,.05) 0px, transparent 50%),
                radial-gradient(at 100% 100%, rgba(75,175,95,.08) 0px, transparent 50%);
}

/* ---- Glass Card ---- */
.gc {
    background: rgba(255,255,255,.82);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 28px;
    transition: all .4s cubic-bezier(.16,1,.3,1);
}
.gc:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0,0,0,.04), 0 0 0 1px var(--brand);
}
.gc-s { box-shadow: 0 8px 24px -6px rgba(75,175,95,.4); }

/* ---- Nav Link Underline ---- */
.nav-l { position: relative; }
.nav-l::after {
    content: ''; position: absolute; bottom: -4px; left: 50%;
    width: 0; height: 2px; background: var(--brand);
    transition: all .3s; transform: translateX(-50%);
}
.nav-l:hover::after, .nav-l.on::after { width: 100%; }

/* ---- Dark mode - Active nav link: Orange text + Green underline ---- */
body.dark .nav-l.on { color: #FF6600 !important; font-weight: 700 !important; }
body.dark .nav-l.on::after { background: var(--brand) !important; }

/* ---- Dark mode - Active tab buttons: Orange + Bold ---- */
body.dark button[class*="text-brand"][class*="bg-brand-soft"] {
    color: #FF6600 !important; font-weight: 600 !important;
    border-color: #FF6600 !important; background: rgba(255,102,0,.15) !important;
}
body.dark button[class*="text-brand"][class*="border-b-2"] {
    color: #FF6600 !important; font-weight: 600 !important; border-color: #FF6600 !important;
}

/* ---- Dark mode - Energy rank tabs ---- */
body.dark button[class*="bg-brand"][class*="gc-s"] {
    background: #FF6600 !important; border-color: #FF6600 !important;
    box-shadow: 0 8px 24px -6px rgba(255,102,0,.5) !important;
}

/* ---- Text Gradient ---- */
.tg {
    background: linear-gradient(135deg, #121212 0%, #4BAF5F 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ---- Ticker (horizontal scroll) ---- */
@keyframes tk { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.tk-track { animation: tk 20s linear infinite; }
.tk-container { overflow: hidden; }
.tk-container:hover .tk-track { animation-play-state: paused; }

/* ---- Vertical Ticker (treehole sidebar) ---- */
@keyframes vtk { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } }
.vtk-track { animation: vtk 18s linear infinite; }
.vtk-container { overflow: hidden; }
.vtk-container:hover .vtk-track { animation-play-state: paused; }

/* ---- Card cover gradient ---- */
.cover-g { background: linear-gradient(135deg, #e8f5ec, #c5e4cc); }

/* ---- Fade for long text ---- */
.fade-crop { position: relative; max-height: 140px; overflow: hidden; }
.fade-crop::after {
    content: '...'; position: absolute; bottom: 0; right: 0;
    padding: 0 16px 4px 40px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.8));
}

/* ---- Dark mode base ---- */
body.dark { --bg-base: #0f1310; color: #e8f0eb; }
body.dark .gc { background: rgba(22,30,24,.85); border-color: rgba(255,255,255,.1); }
body.dark .gc:hover { box-shadow: 0 20px 40px rgba(0,0,0,.2), 0 0 0 1px var(--brand); }
body.dark .mesh-bg {
    background: radial-gradient(at 0% 0%, rgba(75,175,95,.06) 0px, transparent 50%),
                radial-gradient(at 100% 100%, rgba(75,175,95,.04) 0px, transparent 50%);
}
body.dark nav { background: rgba(15,19,16,.7) !important; border-color: rgba(255,255,255,.06) !important; }
body.dark footer { background: #0f1310 !important; border-color: rgba(255,255,255,.06) !important; }
body.dark .cover-g { background: linear-gradient(135deg, #1a261c, #223328); }
body.dark .dg-card { background: #151c17 !important; border-color: rgba(255,255,255,.06) !important; }

/* ---- Dark mode: 提亮灰色文字 ---- */
body.dark .text-gray-400 { color: #9ca3af !important; }
body.dark .text-gray-500 { color: #a3a3a3 !important; }
body.dark .text-gray-300 { color: #737373 !important; }
body.dark .text-gray-600 { color: #b0b0b0 !important; }
body.dark .text-gray-700 { color: #c0c0c0 !important; }
body.dark .text-gray-800 { color: #d4d4d4 !important; }
body.dark .bg-gray-50 { background: rgba(255,255,255,.05) !important; }
body.dark .bg-gray-100 { background: rgba(255,255,255,.06) !important; }
body.dark .border-gray-50 { border-color: rgba(255,255,255,.06) !important; }
body.dark .border-gray-100 { border-color: rgba(255,255,255,.08) !important; }

/* ---- 全站输入框文字颜色强制深色 ---- */
input, textarea, select { color: #121212 !important; }
input::placeholder, textarea::placeholder { color: #9ca3af !important; }
body.dark input, body.dark textarea, body.dark select { color: #e8f0eb !important; }
body.dark input::placeholder, body.dark textarea::placeholder { color: #6b7280 !important; }

/* ========================================
   V14.5 - 全站字体清晰度优化
   确保日间/夜间模式下所有文字都清晰可读
   ======================================== */

/* 日间模式：毛玻璃卡片内标题/正文禁止纯白色（避免白底白字） */
body:not(.dark) .gc h1,
body:not(.dark) .gc h2,
body:not(.dark) .gc h3,
body:not(.dark) .gc h4,
body:not(.dark) .gc h5 {
    color: #111827 !important;
}
/* 日间：毛玻璃内正文文字不要太淡 */
body:not(.dark) .gc .text-gray-400 { color: #6b7280 !important; }
body:not(.dark) .gc .text-gray-500 { color: #5b6670 !important; }

/* 夜间模式：提亮毛玻璃容器内次要文字 */
body.dark .gc .text-gray-400,
body.dark .gc .text-gray-500 {
    color: #c8d4cc !important;
}

/* 下拉菜单和提示框：日间模式确保文字可见 */
body:not(.dark) [id*="dot-menu"] *,
body:not(.dark) [id*="report-modal"] * {
    color: inherit;
}

/* ---- Dark mode: sr-only-card ---- */
body.dark .sr-only-card { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.08) !important; }

/* ---- @站长 文字在树洞输入框内深色显示 ---- */
.hole-at-hint { color: #121212 !important; font-weight: 500; }
body.dark .hole-at-hint { color: #e8f0eb !important; }

/* ---- 隐藏Alpine.js未初始化时的闪现元素 ---- */
[x-cloak] { display: none !important; }

/* ---- 页面加载时隐藏所有弹窗 ---- */
.alpine-loading [x-show^="show"],
.alpine-loading [x-show="mobileMenuOpen"],
.alpine-loading .fixed.z-\[200\],
.alpine-loading .fixed.z-\[210\] { display: none !important; }

/* ========================================
   响应式设计
   ======================================== */

/* ---- 768px以下（平板+手机） ---- */
@media (max-width: 768px) {
    nav .hidden.md\:flex { display: none !important; }
    nav .hidden.sm\:flex .flex-col { display: none !important; }
    nav .hidden.sm\:flex { padding-left: 0.5rem !important; padding-right: 0.5rem !important; gap: 0.25rem !important; }
    nav button.px-4, nav button.sm\:px-5, nav .px-4, nav .sm\:px-5 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
    nav .gap-2.sm\:gap-4, nav .flex.items-center.gap-2.sm\:gap-4 { gap: 0.25rem !important; }
    nav .text-base.sm\:text-xl { font-size: 0.875rem !important; }
    nav .w-9.sm\:w-10, nav .h-9.sm\:h-10 { width: 1.5rem !important; height: 1.5rem !important; }
    nav .max-w-7xl { max-width: 100% !important; }
    nav .gap-8 { gap: 0.5rem !important; }
    .px-6 { padding-left: 1rem !important; padding-right: 1rem !important; }
    .px-12 { padding-left: 1rem !important; padding-right: 1rem !important; }
    .max-w-7xl { max-width: 100% !important; }
    .max-w-4xl { max-width: 100% !important; }
    .max-w-3xl { max-width: 100% !important; }
    .max-w-2xl { max-width: 100% !important; }
    .text-5xl { font-size: 2.5rem !important; line-height: 1.2 !important; }
    .text-4xl { font-size: 2rem !important; }
    .text-3xl { font-size: 1.75rem !important; }
    .text-2xl { font-size: 1.5rem !important; }
    .text-xl { font-size: 1.25rem !important; }
    .p-10 { padding: 1.5rem !important; }
    .p-8 { padding: 1.25rem !important; }
    .p-6 { padding: 1rem !important; }
    .p-5 { padding: 0.75rem !important; }
    .rounded-\[40px\] { border-radius: 28px !important; }
    .rounded-\[28px\] { border-radius: 20px !important; }
    .rounded-2xl { border-radius: 1rem !important; }
    .grid-cols-3 { grid-template-columns: 1fr !important; }
    .grid-cols-2 { grid-template-columns: 1fr !important; }
    .gap-8 { gap: 1.5rem !important; }
    .gap-6 { gap: 1rem !important; }
    .gap-4 { gap: 0.75rem !important; }
    .px-8 { padding-left: 1rem !important; padding-right: 1rem !important; }
    .py-3 { padding-top: 0.625rem !important; padding-bottom: 0.625rem !important; }
    .py-4 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
    input, textarea { font-size: 16px !important; }
    .px-5 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
    .w-20 { width: 3.5rem !important; height: 3.5rem !important; }
    table th, table td { padding: 0.5rem !important; font-size: 0.75rem !important; }
}

/* ---- iPad平板适配 (769-1024px) ---- */
@media (min-width: 769px) and (max-width: 1024px) {
    .px-12 { padding-left: 2rem !important; padding-right: 2rem !important; }
    .max-w-7xl { max-width: 90% !important; }
    .grid-cols-3 { grid-template-columns: repeat(2, 1fr) !important; }
    .grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---- 手机 (< 640px) ---- */
@media (max-width: 639px) {
    .max-w-7xl, .max-w-5xl, .max-w-4xl, .max-w-3xl, .max-w-2xl { padding-left: 1rem !important; padding-right: 1rem !important; }
    .text-5xl { font-size: 2rem !important; }
    .text-6xl { font-size: 2.25rem !important; }
    .text-4xl { font-size: 1.75rem !important; }
    .text-3xl { font-size: 1.5rem !important; }
    h1 div[style*="white-space:nowrap"] { font-size: 1.5rem !important; white-space: normal !important; overflow: visible !important; }
    h1, h1 * { overflow: visible !important; }
    .grid-cols-12 { grid-template-columns: 1fr !important; }
    .col-span-8, .col-span-4 { grid-column: span 1 !important; }
    .gap-10 { gap: 1.5rem !important; }
    .p-10 { padding: 1.5rem !important; }
    .p-12 { padding: 1.75rem !important; }
    nav .hidden.lg\:flex { display: none !important; }
    .gc:hover { transform: none !important; }
}

/* ---- 平板 (640-1023px) ---- */
@media (min-width: 640px) and (max-width: 1023px) {
    .col-span-12.lg\:col-span-8 { grid-column: span 12 !important; }
    .col-span-12.lg\:col-span-4 { grid-column: span 12 !important; }
    h1 div[style*="white-space:nowrap"] { font-size: 2rem !important; white-space: normal !important; overflow: visible !important; }
}

/* ---- 大屏幕 (>=1280px) ---- */
@media (min-width: 1280px) {
    .max-w-7xl { max-width: 80rem !important; }
}

/* ========================================
   V6.0 补充 - Alpine过渡动画优化
   ======================================== */

/* 移动端抽屉菜单在暗黑模式下的背景 */
body.dark .z-\[9999\],
body.dark .fixed.z-\[9999\] { background: #111916 !important; }

/* Alpine x-transition 元素在 body.alpine-loading 下保持隐藏 */
.alpine-loading [x-show] { display: none !important; }
.alpine-loading [x-cloak] { display: none !important; }

/* 签到按钮loading旋转动画 */
@keyframes zjz-spin { to { transform: rotate(360deg); } }
.zjz-loading { animation: zjz-spin .8s linear infinite; }