/* ============================================================
   Forest Archive Design System — Shared Custom Styles
   井冈山山茶油信用系统 统一样式表
   ============================================================ */

/* ---- Material Symbols ---- */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

/* ---- Custom Utility Classes ---- */
.glass-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(216, 226, 220, 0.5);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.glass-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(45, 106, 79, 0.08);
}

.agri-gradient {
  background: linear-gradient(135deg, #2D6A4F 0%, #1B4332 100%);
}

.agri-gradient-text {
  background: linear-gradient(135deg, #2D6A4F, #1B4332);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.radar-grid {
  background-image: radial-gradient(#D8E2DC 1px, transparent 1px);
  background-size: 20px 20px;
}

/* ---- Topographic line pattern ---- */
.topo-line {
  fill: none;
  stroke: #D8E2DC;
  stroke-width: 0.5;
  opacity: 0.4;
}

/* ---- Scan line animation ---- */
.scan-line {
  height: 2px;
  background: linear-gradient(90deg, transparent, #52B788, transparent);
  position: absolute;
  width: 100%;
  top: 50%;
  opacity: 0.3;
}

/* ---- Tech border utility ---- */
.tech-border {
  border: 1px solid rgba(216, 226, 220, 0.5);
}

/* ---- Topo background image ---- */
.topo-bg {
  background-image: url(https://lh3.googleusercontent.com/aida-public/AB6AXuC_mwC-7H1p3Fx6kMmqg84pX4hgU679OEijwRGdm6UoHozQXv-ZxvOv9HrqfYGkS3lBETJotzqeEBH0mgy2Vi52_1QxN0Wwr6W_PP_3GMOsotbxwvNOPzaYTq4NfyrjpP23LSDOgRjSL7h6vuKq_P3bPFWAps7PAqZ5lc0KsyEE3MxrUXc9oknDALHR81E48NjCev-4Xzvphbws_LW9aPaLif2cNcIAz63-6t9z8cHB_JibHDzXPee4BKNIh3d8-djnKhXx1Fb8rEy1);
  opacity: 0.05;
}

/* ---- Marquee Animation ---- */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-marquee {
  display: flex;
  animation: marquee 30s linear infinite;
}

.animate-marquee:hover {
  animation-play-state: paused;
}

/* ============================================================
   科技感增强 — 动画光效 / 扫描线 / 辉光 / 粒子
   ============================================================ */

/* ---- 卡片悬浮辉光 ---- */
.glass-card {
  position: relative;
  overflow: hidden;
}
.glass-card::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(82,183,136,0.06), transparent);
  transform: skewX(-15deg);
  transition: left 0.8s ease;
}
.glass-card:hover::after {
  left: 120%;
}

/* ---- KPI 数字微辉光 ---- */
.font-headline.font-bold.text-primary {
  text-shadow: 0 0 20px rgba(45,106,79,0.15);
}

/* ---- 在线状态脉冲环 ---- */
.status-dot.online {
  box-shadow: 0 0 6px rgba(45,106,79,0.6), 0 0 12px rgba(45,106,79,0.3);
}
@keyframes pulse-ring {
  0% { box-shadow: 0 0 4px rgba(45,106,79,0.5), 0 0 8px rgba(45,106,79,0.2); }
  50% { box-shadow: 0 0 10px rgba(45,106,79,0.8), 0 0 20px rgba(45,106,79,0.4); }
  100% { box-shadow: 0 0 4px rgba(45,106,79,0.5), 0 0 8px rgba(45,106,79,0.2); }
}
.status-dot.online {
  animation: pulse 2s ease-in-out infinite, pulse-ring 2s ease-in-out infinite;
}

/* ---- 顶部导航栏微光扫描 ---- */
header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,163,115,0.6), transparent);
  animation: header-scan 4s linear infinite;
}
@keyframes header-scan {
  0% { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}

/* ---- 卡片顶部装饰辉光线 ---- */
.bg-white.border {
  position: relative;
}
.bg-white.border::before {
  content: '';
  position: absolute;
  top: 0; left: 20%; right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(45,106,79,0.25), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.bg-white.border:hover::before {
  opacity: 1;
}

/* ---- 渐变卡片光扫 ---- */
.agri-gradient {
  position: relative;
  overflow: hidden;
}
.agri-gradient::after {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.08) 0%, transparent 60%);
  pointer-events: none;
}

/* ---- 底部状态栏粒子流动 ---- */
footer.fixed {
  position: relative;
}
footer.fixed::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #52B788, #D4A373, #52B788, transparent);
  animation: footer-particle 3s linear infinite;
  opacity: 0.7;
}
@keyframes footer-particle {
  0% { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}

/* ---- 数据卡片角标辉光 ---- */
.bg-white.rounded-xl.shadow-sm {
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}
.bg-white.rounded-xl.shadow-sm:hover {
  box-shadow: 0 4px 24px rgba(45,106,79,0.1), 0 0 0 1px rgba(82,183,136,0.15);
  transform: translateY(-1px);
}

/* ---- 进度条流动光泽 ---- */
.bg-primary.h-full.rounded-full {
  position: relative;
  overflow: hidden;
}
.bg-primary.h-full.rounded-full::after {
  content: '';
  position: absolute;
  top: 0; left: -50%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  animation: bar-shine 2s ease-in-out infinite;
}
@keyframes bar-shine {
  0%,100% { left: -50%; }
  50% { left: 120%; }
}

/* ---- 表格行悬浮光迹 ---- */
tbody tr {
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
tbody tr:hover {
  box-shadow: inset 4px 0 0 rgba(45,106,79,0.3);
}

/* ---- 侧边栏激活项辉光 ---- */
.sidebar-nav .nav-item.active {
  box-shadow: 0 2px 12px rgba(45,106,79,0.4), 0 0 20px rgba(45,106,79,0.1);
}

/* ---- 二维码扫描线动画 ---- */
.scan-line {
  animation: scan-vertical 2s ease-in-out infinite;
}
@keyframes scan-vertical {
  0%,100% { top: 0%; opacity: 0; }
  10% { opacity: 0.6; }
  90% { opacity: 0.6; }
  100% { top: 100%; opacity: 0; }
}

/* ---- 环形仪表辉光 ---- */
svg circle.text-primary {
  filter: drop-shadow(0 0 4px rgba(45,106,79,0.3));
}

/* ---- 品牌 eco 图标微动 ---- */
header .material-symbols-outlined {
  transition: transform 0.3s ease;
}
header:hover .material-symbols-outlined {
  transform: rotate(-5deg) scale(1.05);
}

/* ---- 暗色模式适配 ---- */
html.dark .glass-card::after {
  background: linear-gradient(90deg, transparent, rgba(82,183,136,0.1), transparent);
}
html.dark .bg-white.border::before {
  background: linear-gradient(90deg, transparent, rgba(82,183,136,0.3), transparent);
}
html.dark .status-dot.online {
  box-shadow: 0 0 8px rgba(82,183,136,0.8), 0 0 16px rgba(82,183,136,0.4);
}
html.dark .font-headline.font-bold.text-primary {
  text-shadow: 0 0 20px rgba(82,183,136,0.2);
}

/* ---- Custom Scrollbar ---- */
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: #F1F5F2;
}

::-webkit-scrollbar-thumb {
  background: #95D5B2;
  border-radius: 10px;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* ---- Page Container Visibility ---- */
.page-section {
  display: none;
}

.page-section.active {
  display: block;
}

/* ---- Forest page fullscreen (desktop) ---- */
.forest-fullscreen.active {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  overflow: hidden;
}

/* ---- Sidebar nav item active state ---- */
.sidebar-nav .nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  color: rgba(45, 106, 79, 0.7);
  border-radius: 0 9999px 9999px 0;
  margin: 2px 0;
  transition: all 0.2s ease;
}

.sidebar-nav .nav-item:hover {
  background: #D8E2DC;
  transform: translateX(4px);
}

.sidebar-nav .nav-item.active {
  background: #2D6A4F;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(45, 106, 79, 0.3);
}

/* ---- 侧边栏折叠状态 ---- */
aside.fixed.left-0.collapsed {
  width: 64px !important;
}
aside.fixed.left-0.collapsed .sidebar-nav .nav-item span:last-child,
aside.fixed.left-0.collapsed .px-6.mb-8 div:last-child,
aside.fixed.left-0.collapsed .px-6.mt-auto div:last-child,
aside.fixed.left-0.collapsed .px-6.mb-8 h2,
aside.fixed.left-0.collapsed .px-6.mb-8 p,
aside.fixed.left-0.collapsed .mt-auto .flex.justify-between {
  display: none;
}
aside.fixed.left-0.collapsed .sidebar-nav .nav-item {
  justify-content: center;
  padding: 12px;
  border-radius: 8px;
  margin: 2px 8px;
}
aside.fixed.left-0.collapsed .sidebar-nav .nav-item .material-symbols-outlined {
  font-size: 22px;
}
aside.fixed.left-0.collapsed .px-6 {
  padding-left: 12px; padding-right: 12px;
}
aside.fixed.left-0.collapsed .px-6.mb-8 {
  display: flex; justify-content: center;
}
aside.fixed.left-0.collapsed .mt-auto.pt-6 {
  padding-top: 8px;
}
aside.fixed.left-0.collapsed ~ main {
  margin-left: 64px !important;
}
main.collapsed-main {
  margin-left: 64px !important;
}
aside.fixed.left-0.collapsed ~ footer {
  left: 64px !important;
}
aside.fixed.left-0 {
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   地图浮动控件科技感增强 — HUD 风格
   ============================================================ */

/* 地图上的 glass-card 增强为 HUD 面板 */
[id^="map-"] ~ .glass-card,
.glass-card:has(+ [id^="map-"]),
.absolute > .glass-card {
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(45,106,79,0.15);
  box-shadow: 0 4px 20px rgba(0,0,0,0.06), 0 0 0 1px rgba(82,183,136,0.08);
}

/* HUD 面板四角装饰 */
.glass-card.hud-panel,
.absolute > .glass-card {
  position: relative;
}
.glass-card.hud-panel::before,
.absolute > .glass-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 12px; height: 12px;
  border-top: 2px solid rgba(45,106,79,0.4);
  border-left: 2px solid rgba(45,106,79,0.4);
  pointer-events: none;
  z-index: 2;
}
.glass-card.hud-panel::after,
.absolute > .glass-card::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 12px; height: 12px;
  border-bottom: 2px solid rgba(45,106,79,0.4);
  border-right: 2px solid rgba(45,106,79,0.4);
  pointer-events: none;
  z-index: 2;
}

/* 地图浮动标签 HUD 风格 */
.absolute > .bg-white\/90,
.absolute > .backdrop-blur-md {
  background: rgba(255,255,255,0.88) !important;
  backdrop-filter: blur(14px) saturate(1.3) !important;
  border: 1px solid rgba(45,106,79,0.2) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08), 0 0 0 1px rgba(82,183,136,0.1) !important;
}

/* 地图坐标数据 HUD 数字风格 */
.glass-card .font-headline.tabular-nums {
  font-family: 'Space Grotesk', 'Courier New', monospace;
  text-shadow: 0 0 15px rgba(45,106,79,0.2);
  letter-spacing: 0.05em;
}

/* 地图区域排行面板 */
.glass-card .text-primary.uppercase.mb-2 {
  letter-spacing: 0.12em;
}

/* 实时物流标签增强 */
#map-production-container .absolute.z-10 {
  background: rgba(255,255,255,0.9) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(45,106,79,0.2) !important;
}

/* 地图脉冲指示点增强 */
.glass-card .animate-pulse.w-2 {
  box-shadow: 0 0 6px rgba(45,106,79,0.8), 0 0 12px rgba(45,106,79,0.3);
}

/* Amap marker 系统标签 */
.marker-label {
  background: rgba(45,106,79,0.92) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2), 0 0 12px rgba(45,106,79,0.3);
  padding: 3px 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
}

/* Forest 标记标题 — 科技风暗色 */
.forest-marker-title {
  background: rgba(10,20,14,0.9) !important;
  backdrop-filter: blur(8px);
  box-shadow: 0 0 12px rgba(82,183,136,0.5), 0 2px 8px rgba(0,0,0,0.4);
  letter-spacing: 0.08em;
  border: 1px solid rgba(82,183,136,0.3);
  color: #52B788 !important;
  padding: 3px 10px;
  font-size: 10px;
  white-space: nowrap;
}
.forest-marker-title.factory-star {
  background: rgba(20,5,5,0.95) !important;
  border: 1px solid rgba(220,38,38,0.5) !important;
  box-shadow: 0 0 16px rgba(220,38,38,0.6), 0 2px 8px rgba(0,0,0,0.5) !important;
  color: #FCA5A5 !important;
}
.forest-marker-title.base-green {
  background: rgba(10,20,14,0.9) !important;
  border: 1px solid rgba(82,183,136,0.35) !important;
  box-shadow: 0 0 10px rgba(82,183,136,0.4), 0 2px 8px rgba(0,0,0,0.4) !important;
  color: #52B788 !important;
}
.forest-marker-desc {
  background: rgba(10,20,14,0.85) !important;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.06);
  border-top: none;
  color: #c8d6cc !important;
  font-size: 8px;
  padding: 2px 10px 4px;
}

/* 地图容器边框辉光 — 暗色科技风 */
[id$="-map-container"], #map-forest-container {
  box-shadow: inset 0 0 60px rgba(0,0,0,0.5);
}

/* Forest 地图浮动面板暗色适配 */
#page-forest .glass-card {
  background: rgba(15,25,18,0.88) !important;
  backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(82,183,136,0.12) !important;
  color: #c8d6cc;
}
#page-forest .glass-card .text-on-surface,
#page-forest .glass-card .text-slate-500 { color: #8aab96 !important; }
#page-forest .glass-card .text-primary { color: #52B788 !important; }
#page-forest .glass-card .text-secondary { color: #D4A373 !important; }
#page-forest .glass-card .text-on-surface-variant { color: #7a9e88 !important; }
#page-forest .glass-card .bg-surface { background: rgba(255,255,255,0.04) !important; }
#page-forest .glass-card .border-outline\/30 { border-color: rgba(255,255,255,0.06) !important; }

/* 暗色模式 HUD 面板 */
html.dark .absolute > .glass-card {
  background: rgba(21,40,24,0.9) !important;
  border-color: rgba(82,183,136,0.2) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3), 0 0 0 1px rgba(82,183,136,0.12) !important;
}
html.dark .absolute > .glass-card::before,
html.dark .absolute > .glass-card::after {
  border-color: rgba(82,183,136,0.5);
}
html.dark .marker-label {
  background: rgba(82,183,136,0.9) !important;
}
html.dark .forest-marker-title {
  background: rgba(82,183,136,0.9) !important;
}

/* ---- Amap marker labels ---- */

/* 顶栏导航链接 */
.header-nav-link {
  color: rgba(216, 226, 220, 0.8);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 6px;
  border-radius: 4px;
  transition: all 0.2s;
  white-space: nowrap;
  text-decoration: none;
}
.header-nav-link:hover {
  color: #fff;
  background: rgba(255,255,255,0.08);
}

.sidebar-nav .nav-item.active .material-symbols-outlined {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ---- Status indicator pulse ---- */
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.status-dot.online {
  background: #2D6A4F;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

 marker labels ---- */
.marker-label {
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(8px);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  color: #2D6A4F;
  border: 1px solid rgba(45,106,79,0.2);
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.forest-marker { text-align: center; }
.forest-marker-title {
  background: #2D6A4F;
  color: #fff;
  padding: 3px 12px;
  border-radius: 6px 6px 0 0;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.forest-marker-desc {
  background: rgba(255,255,255,0.95);
  color: #1B4332;
  padding: 2px 12px 4px;
  border-radius: 0 0 6px 6px;
  font-size: 9px;
  border: 1px solid #D8E2DC;
  border-top: none;
  white-space: nowrap;
}

/* ---- Login overlay ---- */
#login-overlay {
  animation: loginFadeIn 0.4s ease;
  background: linear-gradient(135deg, rgba(13,31,20,0.7) 0%, rgba(27,67,50,0.6) 100%), url('login-bg.jpg') center/cover no-repeat !important;
}

#login-overlay.fading-out {
  opacity: 0;
  pointer-events: none;
}

@keyframes loginFadeIn {
  from { opacity: 0; transform: scale(1.02); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---- Settings modal ---- */
#settings-modal:not(.hidden) {
  animation: modalFadeIn 0.2s ease;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---- Theme toggle active ---- */
#theme-toggle.active {
  background: #2D6A4F;
}

#theme-toggle.active span {
  transform: translateX(24px);
}

/* ---- Dark mode — 深林夜色 (Deep Forest Night) ---- */
html.dark body {
  background: #0d1f14;
  color: #c8d6cc;
}

/* 毛玻璃在暗色下呈深绿半透明 */
html.dark .glass-card {
  background: rgba(21, 40, 24, 0.88);
  backdrop-filter: blur(14px);
  border-color: rgba(82, 183, 136, 0.1);
}

/* 白色卡片 → 深绿表面 */
html.dark .bg-white,
html.dark .bg-surface-container-lowest,
html.dark .bg-surface-container-low,
html.dark .bg-slate-50 {
  background: #152818;
}

html.dark .bg-surface,
html.dark .bg-\[\#F1F5F2\] {
  background: #0d1f14;
}

html.dark .bg-surface-container-high,
html.dark .bg-surface-container-highest {
  background: #1c3322;
}

html.dark .bg-surface-container {
  background: #122216;
}

/* 边框 */
html.dark .border-outline,
html.dark .border-outline\/30,
html.dark .border-outline\/50,
html.dark .border-emerald-100 {
  border-color: rgba(82, 183, 136, 0.12);
}

html.dark .divide-outline\/30 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-outline\/50 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgba(82, 183, 136, 0.08);
}

/* 文字层次 */
html.dark .text-on-surface {
  color: #c8d6cc;
}

html.dark .text-on-surface-variant {
  color: #8aab96;
}

html.dark .text-primary {
  color: #52B788;
}

html.dark .text-primary\/60,
html.dark .text-primary\/70,
html.dark .text-primary\/80 {
  color: rgba(82, 183, 136, 0.7);
}

html.dark .text-slate-400,
html.dark .text-slate-500 {
  color: #7a9e88;
}

html.dark .text-slate-600 {
  color: #a0bca8;
}

/* 表头 */
html.dark table thead,
html.dark .bg-surface\/30,
html.dark .bg-surface\/50 {
  background: rgba(21, 40, 24, 0.6);
}

/* 表格行 hover */
html.dark .hover\:bg-surface-container-low:hover,
html.dark .hover\:bg-white\/50:hover {
  background: rgba(82, 183, 136, 0.06);
}

html.dark .hover\:bg-primary\/5:hover {
  background: rgba(45, 106, 79, 0.15);
}

/* 进度条轨道 */
html.dark .bg-outline {
  background: rgba(82, 183, 136, 0.15);
}

html.dark .bg-outline\/30 {
  background: rgba(82, 183, 136, 0.1);
}

/* 输入框 */
html.dark input,
html.dark select {
  background: #122216;
  color: #c8d6cc;
  border-color: rgba(82, 183, 136, 0.15);
}

html.dark input::placeholder {
  color: #5a7a64;
}

/* 设置弹窗 */
html.dark #settings-modal > div {
  background: #152818;
}

html.dark #settings-modal .bg-surface {
  background: #0d1f14;
}

/* 渐变卡片保持原绿色调 */
html.dark .agri-gradient {
  background: linear-gradient(135deg, #1a4d35 0%, #0d2a1a 100%);
}

/* 侧边栏 */
html.dark .sidebar-nav .nav-item:hover {
  background: rgba(82, 183, 136, 0.1);
}

/* 概述卡片边框 */
html.dark .outline-1 {
  outline-color: rgba(82, 183, 136, 0.1);
}

/* 雷达网格 */
html.dark .radar-grid {
  background-image: radial-gradient(rgba(82, 183, 136, 0.12) 1px, transparent 1px);
}

/* 滚动条 */
html.dark ::-webkit-scrollbar-track {
  background: #0d1f14;
}

html.dark ::-webkit-scrollbar-thumb {
  background: #2a4a35;
}

/* 登录页 */
html.dark #login-overlay {
  background: linear-gradient(135deg, #0a1a10 0%, #0d1f14 100%);
}

/* ============================================================
   移动端适配 — 断点: < 768px
   原则: 仅调整布局/尺寸，不改桌面端
   ============================================================ */
@media (max-width: 767px) {

  /* ---- 基础重置 ---- */
  body { font-size: 13px; }

  /* 桌面端折叠按钮在移动端隐藏 (由汉堡菜单替代) */
  #sidebar-toggle-btn { display: none !important; }

  /* 折叠状态下移动端恢复全宽 + 显示文字 */
  aside.fixed.left-0.collapsed { width: 256px !important; }
  aside.fixed.left-0.collapsed .sidebar-nav .nav-item span:last-child,
  aside.fixed.left-0.collapsed .px-6.mb-8 h2,
  aside.fixed.left-0.collapsed .px-6.mb-8 p,
  aside.fixed.left-0.collapsed .px-6.mb-8 div:last-child,
  aside.fixed.left-0.collapsed .px-6.mt-auto div:last-child,
  aside.fixed.left-0.collapsed .mt-auto .flex.justify-between { display: revert !important; }
  aside.fixed.left-0.collapsed .sidebar-nav .nav-item { justify-content: flex-start; padding: 12px 24px; border-radius: 0 9999px 9999px 0; margin: 2px 0; }
  aside.fixed.left-0.collapsed .px-6 { padding-left: 24px; padding-right: 24px; }
  aside.fixed.left-0.collapsed ~ main { margin-left: 0 !important; }
  aside.fixed.left-0.collapsed ~ footer { left: 0 !important; }

  /* 顶栏日期时间在移动端隐藏 (节省空间) */
  #header-datetime { display: none !important; }
  #header-weather { display: none !important; }

  /* ---- 侧边栏：滑入式 (top对齐48px移动端顶栏) ---- */
  aside.fixed.left-0 {
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
    z-index: 200;
    top: 48px !important;
    height: calc(100vh - 48px) !important;
  }
  aside.fixed.left-0.mobile-open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,0.25);
  }
  .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 195; }

  /* 防止高德地图等第三方元素覆盖侧边栏 */
  #main-content { z-index: 1; }
  .sidebar-overlay.active { display: block; }

  /* ---- 主体允许滚动 + 高度/边距修正 ---- */
  body { overflow-y: auto !important; overflow-x: hidden !important; height: auto !important; }
  #main-content {
    margin-left: 0 !important;
    margin-top: 48px !important;      /* header 移动端 48px */
    width: 100% !important;
    height: auto !important;
    min-height: calc(100vh - 48px) !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
  }

  /* ---- 顶栏紧凑 ---- */
  header { padding: 0 12px !important; height: 48px !important; }
  header .text-xl { font-size: 0.8rem !important; letter-spacing: 0.05em !important; }
  header .hidden.md\:flex { display: none !important; }
  header button.bg-white\/10 { padding: 4px 10px !important; font-size: 0.7rem !important; }
  #mobile-menu-btn { display: flex !important; }

  /* ---- 底栏隐藏 ---- */
  footer.fixed.bottom-0 { display: none !important; }

  /* ---- 页面标题区 ---- */
  #main-content .px-8 { padding-left: 10px !important; padding-right: 10px !important; }
  #main-content .pt-8 { padding-top: 8px !important; }
  #page-title { font-size: 1.1rem !important; line-height: 1.2 !important; }
  #page-subtitle { font-size: 0.625rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

  /* ---- 主栅格: 12列→单列, 2/3/4列保持2列 ---- */
  .grid.grid-cols-12 { grid-template-columns: 1fr !important; gap: 8px !important; }
  .grid.grid-cols-8 { grid-template-columns: 1fr !important; }
  .grid.grid-cols-2,
  .grid.grid-cols-3,
  .grid.grid-cols-4 { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
  .col-span-1,.col-span-2,.col-span-3,.col-span-4,.col-span-5,.col-span-6,
  .col-span-7,.col-span-8,.col-span-9,.col-span-10,.col-span-11,.col-span-12,
  .xl\:col-span-5,.xl\:col-span-7,.lg\:col-span-2,.lg\:col-span-3,
  .lg\:col-span-4,.lg\:col-span-6,.lg\:col-span-8 { grid-column: span 1 !important; }

  /* ---- 卡片内边距 ---- */
  .p-8 { padding: 12px !important; }
  .p-6 { padding: 10px !important; }
  .p-5 { padding: 10px !important; }
  .p-4 { padding: 10px !important; }
  .px-6 { padding-left: 10px !important; padding-right: 10px !important; }
  .px-8 { padding-left: 10px !important; padding-right: 10px !important; }
  .py-6 { padding-top: 10px !important; padding-bottom: 10px !important; }

  /* ---- 表格容器: 横向滚动 ---- */
  .overflow-x-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { font-size: 0.6rem !important; }
  table th, table td { padding: 6px 8px !important; white-space: nowrap; }

  /* ---- 地图高度 ---- */
  .h-96 { height: 200px !important; }
  .h-80 { height: 180px !important; }
  .h-\[450px\] { height: 250px !important; }
  .h-\[500px\] { height: auto !important; min-height: 200px !important; }
  .h-\[340px\] { height: auto !important; min-height: 150px !important; }
  .h-48 { height: 140px !important; }

  /* ---- 文本尺寸 ---- */
  .text-4xl { font-size: 1.5rem !important; }
  .text-3xl { font-size: 1.25rem !important; }
  .text-2xl { font-size: 1.1rem !important; }
  .text-5xl { font-size: 2rem !important; }

  /* ---- 环形仪表 ---- */
  .w-56 { width: 100px !important; }
  .w-24 { width: 60px !important; }
  .h-24 { height: 60px !important; }

  /* ---- 页面顶部系统状态指示 ---- */
  #main-content .flex.justify-between.items-end {
    flex-wrap: wrap; gap: 6px;
  }

  /* ========== 全局态势页 (forest) ========== */
  .forest-fullscreen.active {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
  }
  #page-forest #map-forest-container {
    position: relative !important;
    height: 280px !important;
    flex-shrink: 0;
  }
  #page-forest > div[style*="flex-direction:column"] {
    overflow-y: auto !important;
    height: auto !important;
    padding: 6px !important;
  }
  #page-forest > div[style*="flex-direction:column"] > .flex.justify-between {
    flex-direction: column !important;
    gap: 6px;
    flex: auto !important;
    overflow-y: visible !important;
  }
  #page-forest > div[style*="flex-direction:column"] > div[style*="flex-shrink"] {
    flex-direction: column !important;
    padding: 0 6px 6px 6px !important;
  }
  #page-forest .w-72 { width: 100% !important; }
  #page-forest .glass-card .flex.gap-4 { flex-wrap: wrap !important; }
  #page-forest .glass-card .shrink-0 { flex-direction: row !important; align-items: baseline !important; gap: 8px !important; }
  #page-forest .text-3xl.font-headline { font-size: 1.5rem !important; }
  #page-forest .glass-card .text-xs { font-size: 0.6rem !important; }
  #page-forest .glass-card .text-\[10px\] { font-size: 0.55rem !important; }

  /* ========== 生产加工页 ========== */
  #page-production .glass-card.border-l-4 .grid.grid-cols-2 {
    gap: 4px !important;
  }
  #page-production .glass-card .text-xl { font-size: 1rem !important; }

  /* ========== 基地详情页 ========== */
  #page-base-detail .agri-gradient .grid.grid-cols-2 {
    grid-template-columns: 1fr 1fr !important;
    gap: 4px !important;
  }
  #page-base-detail .h-\[340px\] { min-height: 120px !important; }

  /* ========== 消费者扫码页 ========== */
  #page-consumer .h-\[280px\] { height: auto !important; min-height: 160px !important; }
  #page-consumer .h-\[160px\] { height: auto !important; min-height: 100px !important; }

  /* ========== 质量检测页 ========== */
  #page-quality .h-80 { height: auto !important; min-height: 150px !important; }
  #page-quality .h-\[500px\] { height: auto !important; min-height: 200px !important; }

  /* ========== 登录 & 设置弹窗 ========== */
  #login-overlay > div { margin: 12px; padding: 20px; }
  #login-overlay .text-2xl { font-size: 1.1rem !important; }
  #settings-modal > div { margin: 12px; padding: 16px; max-width: 100%; }

  /* ========== 间距收紧 ========== */
  .space-y-8 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse:0; margin-top:12px; }
  .space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 8px; }
  .space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 6px; }
  .gap-6 { gap: 8px !important; }
  .gap-4 { gap: 6px !important; }
  .mb-8 { margin-bottom: 12px !important; }
  .mb-6 { margin-bottom: 8px !important; }
  .mb-4 { margin-bottom: 6px !important; }
  .mt-6 { margin-top: 8px !important; }
  .mt-8 { margin-top: 12px !important; }

  /* ========== 隐藏装饰性元素 ========== */
  .absolute.top-0.right-0.p-4.opacity-5 { display: none; }

  /* ========== 顶栏按钮防止文字竖排 ========== */
  #header-settings-btn {
    padding: 2px 8px !important;
    font-size: 0.65rem !important;
    white-space: nowrap !important;
  }
  header button.p-2 { padding: 4px !important; }
  /* 通知/用户图标缩小 */
  header .material-symbols-outlined { font-size: 18px !important; }

  /* ========== 生产加工页: 产线卡片紧凑排列 ========== */
  #page-production .md\:grid-cols-2 {
    grid-template-columns: 1fr 1fr !important;
    gap: 4px !important;
  }
  #page-production .glass-card .grid.grid-cols-2 {
    gap: 4px !important;
  }
  #page-production .glass-card.border-l-4 { border-left-width: 3px !important; }

  /* ========== 信用监管页: 解决仪表盘和表格溢出 ========== */
  #page-supervision .lg\:col-span-4,
  #page-supervision .lg\:col-span-8 {
    grid-column: span 1 !important;
  }
  #page-supervision .grid.grid-cols-2 {
    grid-template-columns: 1fr 1fr !important;
  }
  /* 大仪表盘缩小 */
  #page-supervision .w-56 { width: 140px !important; }
  #page-supervision .h-56 { height: 140px !important; }
  #page-supervision .py-6 { padding-top: 8px !important; padding-bottom: 8px !important; }
  /* 雷达图容器 */
  #page-supervision .radar-grid .h-64 { height: 180px !important; }
  #page-supervision .max-w-\[240px\] { max-width: 160px !important; }

  /* ========== 暗色模式无需特殊处理 (全局规则已覆盖) ========== */
}

/* ============================================================
   大屏页面 (仓储/IoT/溯源链路/信用报告)
   ============================================================ */
.bigscreen-page.active {
  display: flex !important;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  overflow: hidden;
}

.bigscreen-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 16px 20px;
  overflow: hidden;
}

/* 大屏内 glass-card 暗色适配 */
.bigscreen-page .glass-card {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
}

.bigscreen-page .glass-card:hover {
  background: rgba(255,255,255,0.09);
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}

/* 大屏表格暗色 */
.bigscreen-page table tbody tr:hover {
  background: rgba(255,255,255,0.04) !important;
}

/* 大屏内进度条 */
.bigscreen-page .bg-outline,
.bigscreen-page .bg-outline\/30,
.bigscreen-page .bg-outline\/50 {
  background: rgba(255,255,255,0.08);
}

/* ============================================================
   新增页面移动端适配 (v3.0)
   ============================================================ */
@media (max-width: 767px) {
  /* 仓储管理 */
  #page-warehouse .grid.grid-cols-4 { grid-template-columns: 1fr 1fr !important; }
  #page-warehouse .h-24 { height: 80px !important; }

  /* IoT设备物联 */
  #page-iot .grid.grid-cols-6 { grid-template-columns: 1fr 1fr !important; }
  #page-iot .grid.grid-cols-5 { grid-template-columns: 1fr 1fr !important; }

  /* ========== 大屏页面移动端覆盖 ========== */
  .bigscreen-page.active {
    position: relative !important;
    display: flex !important;
    overflow-y: auto !important;
    height: auto !important;
    min-height: calc(100vh - 48px) !important;
  }
  .bigscreen-container {
    height: auto !important;
    overflow-y: visible !important;
    padding: 8px !important;
  }
  .bigscreen-container .flex.gap-4 {
    flex-direction: column !important;
  }
  .bigscreen-page .grid.grid-cols-4,
  .bigscreen-page .grid.grid-cols-6 {
    grid-template-columns: 1fr 1fr !important;
  }

  /* 管理后台 */
  #page-admin .grid.grid-cols-4 { grid-template-columns: 1fr 1fr !important; }

  /* 溯源链路 */
  #page-trace-detail .ml-7 { margin-left: 0 !important; }

  /* 信用报告 */
  #page-credit-report .flex.items-center.gap-3 { flex-wrap: wrap !important; }
}