/* 通用样式：移动优先，iPhone 14 Pro Max ≈ 430px 宽 */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; background: #0f1117; color: #e8ebf3; font-size: 14px; }
body { min-height: 100vh; padding-bottom: 32px; }
a { color: #6aa9ff; text-decoration: none; }
input, select, textarea, button { font: inherit; color: inherit; }

h1, h2, h3 { margin: 0 0 10px; font-weight: 600; }
h1 { font-size: 20px; }
h2 { font-size: 16px; }
h3 { font-size: 14px; color: #8aa0c0; }

.wrap { max-width: 480px; margin: 0 auto; padding: 12px; }
.wrap-wide { max-width: 1100px; margin: 0 auto; padding: 14px; }

.card { background: #1a1e28; border: 1px solid #262a33; border-radius: 10px; padding: 10px 14px 12px; margin-bottom: 12px; }
.card > h2:first-child {
  margin: 0 -14px 10px;
  padding: 4px 38px;
  border-bottom: 1px solid #262a33;
  text-align: center;
  position: relative;
  line-height: 28px;
  min-height: 28px;
}
.card[data-card] > h2:first-child {
  cursor: pointer;
  user-select: none;
}
.card[data-card] > h2:first-child::before {
  content: '▾';
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: #8aa0c0;
  transition: transform 0.2s;
}
.card.collapsed > h2:first-child { margin-bottom: 0; padding-bottom: 4px; border-bottom-color: transparent; }
.card[data-card].collapsed > h2:first-child::before { transform: translateY(-50%) rotate(-90deg); }
.card.collapsed > *:not(h2) { display: none !important; }
.card > h2:first-child .title-right {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: normal;
}

/* sticky 置顶：单卡片用 .card.sticky-top；多卡片堆叠用 .sticky-stack 包一层 */
.card.sticky-top {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #1a1e28;
  box-shadow: 0 4px 10px rgba(0,0,0,0.35);
}

/* 顶部"堆叠粘性条"：里面的 card 跟随容器一起固定在视口顶部 */
.sticky-stack {
  position: sticky;
  top: 0;
  z-index: 50;
  margin: 0 -12px 12px;
  padding: 8px 12px 2px;
  background: #0f1117;                          /* 与 body 背景一致，滚动时不透出下层 */
  box-shadow: 0 6px 10px -6px rgba(0,0,0,0.55);
}
.sticky-stack .card { margin-bottom: 8px; }
.sticky-stack .card:last-child { margin-bottom: 0; }

/* 内嵌在"实时状态"卡片底部的运行日志：非独立卡片，只是状态网格下方一块紧凑的日志区块 */
.log-inline {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed #262a33;
}
.log-inline-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #8aa0c0;
  margin-bottom: 6px;
}
.log-inline-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}
.log-inline-title .log-inline-arrow {
  font-size: 10px;
  transition: transform 0.2s;
}
.log-inline.collapsed .log-inline-title .log-inline-arrow { transform: rotate(-90deg); }
.log-inline.collapsed .log-box { display: none; }
.log-inline .log-box {
  max-height: 140px;
  min-height: 84px;
  padding: 6px 8px;
  font-size: 11px;
  line-height: 1.5;
}

.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row.stack { flex-direction: column; align-items: stretch; }

label.field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 200px; min-width: 0; font-size: 12px; color: #8aa0c0; }
label.field > span { font-weight: 500; }
input[type=text], input[type=password], input[type=number], textarea, select {
  background: #0f1117; border: 1px solid #2b3040; color: #e8ebf3;
  border-radius: 6px; padding: 8px 10px; width: 100%;
}
select { appearance: none; padding-right: 28px;
  background-image: linear-gradient(45deg, transparent 50%, #8aa0c0 50%), linear-gradient(135deg, #8aa0c0 50%, transparent 50%);
  background-position: calc(100% - 14px) center, calc(100% - 9px) center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
textarea { min-height: 72px; resize: vertical; font-family: Consolas, monospace; font-size: 12px; }
input:focus, textarea:focus, select:focus { outline: none; border-color: #4a7dff; }

button { background: #2a3042; color: #dfe5ef; border: 1px solid #363d52; padding: 8px 14px; border-radius: 6px; cursor: pointer; }
button:hover { background: #343b54; }
button.primary { background: #2f5ec9; border-color: #4476e8; color: #fff; }
button.primary:hover { background: #3a6fde; }
button.danger { background: #803030; border-color: #a54141; color: #fff; }
button.danger:hover { background: #9a3a3a; }
button.ghost { background: transparent; border-color: transparent; color: #8aa0c0; padding: 4px 8px; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

.tag { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; background: #2a3042; color: #a9b5cf; }
.tag.ok { background: #1a3d2a; color: #8ade6a; }
.tag.warn { background: #3a2a14; color: #f5cf6a; }
.tag.err { background: #4a1d1d; color: #ff8080; }

.switch-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px dashed #262a33; }
.switch-row:last-child { border: 0; }
.switch-row .left { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.switch-row .right { display: flex; align-items: center; gap: 6px; }
.switch-row input[type=number] { width: 70px; padding: 4px 6px; font-size: 12px; }

.log-box { background: #0b0d13; border: 1px solid #262a33; border-radius: 6px; padding: 8px 10px; max-height: 220px; overflow-y: auto; font-family: Consolas, monospace; font-size: 12px; line-height: 1.55; }
.log-line { color: #cfd6e6; }
.log-line .t { color: #6a7490; margin-right: 6px; }

.status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; font-size: 13px; }
.status-grid > div { background: #13171f; border: 1px solid #262a33; padding: 8px 10px; border-radius: 6px; }
.status-grid .k { font-size: 11px; color: #8aa0c0; margin-bottom: 3px; }
.status-grid .v { font-size: 14px; }

.countdown { font-family: Consolas, monospace; font-size: 20px; color: #8ade6a; text-align: center; padding: 8px 0; }
.countdown.warn { color: #f5cf6a; }
.countdown.err  { color: #ff8080; }

.online-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #6a7490; margin-right: 4px; }
.online-dot.on { background: #8ade6a; }
.online-dot.warn { background: #f5cf6a; }

.tabs { display: flex; gap: 4px; margin-bottom: 10px; }
.tabs button { flex: 1; }
.tabs button.active { background: #2f5ec9; color: #fff; }

.center { text-align: center; }
.mt8 { margin-top: 8px; }
.mt12 { margin-top: 12px; }
.ml8 { margin-left: 8px; }
.small { font-size: 12px; color: #8aa0c0; }
.muted { color: #6a7490; }
.hide { display: none !important; }
.grow { flex: 1; }

@media (min-width: 720px) {
  .wrap { max-width: 640px; }
  .status-grid { grid-template-columns: repeat(3, 1fr); }
}

/* 实时状态网格：标签行里右侧的小问号按钮 —— 点击打开详情弹窗 */
.status-grid > div { position: relative; }
.status-grid .label-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: #8aa0c0;
}
.help-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: #232837; color: #9db0cf; font-size: 12px; line-height: 1;
  cursor: pointer; user-select: none; border: 1px solid #2f3648;
}
.help-btn:hover { background: #2d3448; color: #d0dcef; }

/* 通用居中弹窗：遮罩 + 卡片 */
.modal-mask {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center; z-index: 200;
}
.modal-box {
  width: min(92%, 360px); background: #1a1e28; border: 1px solid #2b3040;
  border-radius: 12px; padding: 16px 18px 14px; box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.modal-box h3 { text-align: center; margin: 0 0 10px; font-size: 16px; }

/* 详情弹窗：更紧凑 */
.detail-modal .modal-box { width: min(94%, 460px); padding: 14px 16px 12px; max-height: 82vh; display: flex; flex-direction: column; }
.detail-modal h3 { margin: 0 0 10px; font-size: 15px; text-align: center; }
.detail-modal .dm-body { overflow-y: auto; font-size: 13px; }
.detail-modal .dm-foot { margin-top: 10px; text-align: center; }

.dm-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 6px 2px; border-bottom: 1px dashed #262a33; gap: 10px;
}
.dm-row:last-child { border: 0; }
.dm-row .dm-k { color: #a9b5cf; flex: 0 0 auto; }
.dm-row .dm-v { color: #cfd6e6; flex: 1 1 auto; text-align: right; font-family: Consolas, monospace; font-size: 12px; }
.dm-row.bad .dm-v { color: #ff8080; }
.dm-row.ok  .dm-v { color: #8ade6a; }
.dm-row.warn .dm-v { color: #f5cf6a; }
/* 子行：统一小字灰色，自动换行并右对齐（不受父级 dm-v 的状态色/字号影响） */
.dm-sub {
  font-size: 11px; color: #6a7490; margin-top: 2px; text-align: right;
  font-family: Consolas, monospace; line-height: 1.5;
  white-space: normal; word-break: break-word; overflow-wrap: anywhere;
}

/* 地块网格化展示 60 块 */
.dm-lands { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.dm-land {
  background: #13171f; border: 1px solid #262a33; border-radius: 4px;
  padding: 4px 2px; text-align: center; font-size: 11px; color: #cfd6e6;
}
.dm-land .n { font-size: 10px; color: #8aa0c0; }
.dm-land.empty { background: #1a2030; }
.dm-land.water { background: #1a2a3d; color: #8ac6ff; }
.dm-land.ready { background: #1a3d2a; color: #8ade6a; }
.dm-land.grow  { background: #3a2a14; color: #f5cf6a; }
.dm-land.lock  { background: #2b2127; color: #8a6a80; }