:root{
  --bg:#0b1020;
  --panel:#0f1621;
  --line:rgba(255,255,255,.08);
  --text:rgba(226,232,240,.92);
  --muted:rgba(148,163,184,.85);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  background:var(--bg);
  color:var(--text);
}

/* ====== 两栏布局（匹配 index.html） ====== */
.app{
  display:grid;
  grid-template-columns:320px 1fr;
  height:100vh;
}

.sidebar{
  background:rgba(15,22,33,.96);
  border-right:1px solid var(--line);
  padding:12px;
  overflow:auto;
}

.content{
  padding:12px;
  overflow:auto;
}

/* ====== 通用块 ====== */
.header{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}
.title{font-size:16px;font-weight:900}

.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  margin-bottom:12px;
}
.panel-title{
  font-size:13px;
  font-weight:800;
  margin-bottom:10px;
}

.row{display:grid;gap:8px}
label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}

select,input,button{
  font:inherit;
}
select,input{
  width:100%;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#0c121b;
  color:var(--text);
  outline:none;
}
.hint{font-size:12px;color:var(--muted);margin-top:6px}

/* ====== 卡片（地图/图表） ====== */
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  margin-bottom:12px;
}
.card-title{
  font-size:13px;
  font-weight:800;
  margin-bottom:10px;
}

/* ====== 地图标题行 ====== */
.map-title-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.map-date-controls{
  display:flex;
  align-items:center;
  gap:6px;
}
.map-date-btn{
  padding:6px 10px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#0c121b;
  color:var(--text);
  cursor:pointer;
}
.map-date-source{
  font-size:12px;
  color:var(--muted);
}

/* ====== 关键：容器高度 ====== */
#map{
  width:100%;
  height:620px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--line);
}

/* 你的图表容器 id 是 thetaChart / ndviChart（index.html）:contentReference[oaicite:1]{index=1} */
#thetaChart,#ndviChart{
  width:100%;
  height:260px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--line);
}

/* Leaflet focus */
.leaflet-interactive:focus{outline:none !important}

/* ====== θ 图例（如果你已加 legend） ====== */
.theta-legend{
  background:rgba(15,22,33,.92);
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 10px 8px;
  color:var(--text);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  min-width:120px;
}
.theta-legend-title{font-size:12px;font-weight:800;margin-bottom:8px;opacity:.95}
.theta-legend-body{display:grid;grid-template-columns:14px 1fr;gap:10px;align-items:stretch}
.theta-legend-bar{width:14px;height:120px;border-radius:10px;border:1px solid rgba(255,255,255,.10)}
.theta-legend-scale{display:flex;flex-direction:column;justify-content:space-between;height:120px;font-size:11px;color:var(--muted)}
.theta-legend-tick{line-height:1}
.theta-legend-nodata{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:11px;color:var(--muted)}
.theta-legend-swatch{width:12px;height:12px;border-radius:3px;border:1px solid rgba(255,255,255,.15);display:inline-block}
/* 强制 ECharts 容器有高度（避免 init 时 0 高度导致空白） */
#chartTheta, #chartNdvi{
  width: 100%;
  height: 260px;   /* 你想要更高就改这里 */
}
/* ✅ 去掉地图上方顶部信息区（标题 + 最新θ/NDVI/日期范围） */
.header { display: none !important; }

/* ✅ 去掉“数据点数”这一行 */
#metaLine { display: none !important; }