/* 移动物联网平台 · 自定义样式（沿用 markingpennn.com 方案B 的暖色语言） */
:root {
  --ink: #2f2419;
  --cream: #fff8f0;
  --amber: #f59e0b;
  --rose: #fb7185;
  --ok: #10b981;
  --off: #94a3b8;
}

html, body { max-width: 100%; overflow-x: hidden; }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-tap-highlight-color: transparent;
  margin: 0;
}

.paper-dots {
  background-image: radial-gradient(rgba(245, 158, 11, .18) 1.5px, transparent 1.6px);
  background-size: 22px 22px;
}

.marker {
  background: linear-gradient(180deg, transparent 56%, rgba(251, 191, 36, .85) 56%, rgba(251, 191, 36, .85) 94%, transparent 94%);
  padding: 0 .12em;
}

.sticker { box-shadow: 0 12px 34px -20px rgba(120, 60, 10, .65), 0 3px 0 0 rgba(120, 60, 10, .06); }
.card-lift { transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
.card-lift:hover { transform: translateY(-4px); box-shadow: 0 22px 38px -24px rgba(120, 60, 10, .7); }
.pixel { box-shadow: 4px 4px 0 0 rgba(47, 36, 25, .9); }

.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot.on { background: var(--ok); box-shadow: 0 0 0 4px rgba(16, 185, 129, .18); animation: pulse 2s infinite; }
.dot.off { background: var(--off); }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 3px rgba(16,185,129,.20) } 50% { box-shadow: 0 0 0 7px rgba(16,185,129,.06) } }

.value-flash { animation: flash .5s ease; }
@keyframes flash { from { background: rgba(251,191,36,.55) } to { background: transparent } }

.metric-card { position: relative; overflow: hidden; }
.metric-card .unit { font-size: 12px; color: #a8a29e; margin-left: 2px; }

.btn {
  border: 0; cursor: pointer; font-weight: 700; border-radius: 9999px;
  transition: transform .15s, filter .15s, background .15s;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: linear-gradient(90deg, #fb7185, #f59e0b); color: #fff; }
.btn-primary:hover:not(:disabled) { filter: brightness(1.07); }
.btn-ghost { background: #fff; border: 2px solid #fcd34d; color: var(--ink); }
.btn-ghost:hover:not(:disabled) { background: #fffbeb; }
.btn-danger { background: #ef4444; color: #fff; }

.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px);
  background: rgba(47,36,25,.94); color: #fff; padding: 10px 18px; border-radius: 9999px;
  font-size: 14px; opacity: 0; pointer-events: none; transition: all .25s; z-index: 90;
  max-width: 88vw; text-align: center;
}
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 告警通知抽屉（右侧滑出） */
.alert-drawer {
  position: fixed; inset: 0; background: rgba(47,36,25,.45); z-index: 95;
  display: none; justify-content: flex-end;
}
.alert-drawer.on { display: flex; }
.alert-drawer-inner {
  background: var(--cream); width: 100%; max-width: 460px; height: 100%;
  box-shadow: -10px 0 34px rgba(120,60,10,.28);
  display: flex; flex-direction: column;
}

/* ============================================================
   Phase F：深色模式（用覆盖层实现，不影响原有 Tailwind 类）
   ============================================================ */
html.dark body { background: #14110e !important; color: #efe7dc; }
html.dark .bg-white { background: #241f1a !important; }
html.dark .bg-stone-50 { background: #1c1815 !important; }
html.dark .bg-amber-50 { background: #2b2219 !important; }
html.dark .bg-stone-100 { background: #2a241f !important; }
html.dark .bg-emerald-50 { background: #16241c !important; }
html.dark .bg-rose-50 { background: #2a1a1a !important; }
html.dark .border-amber-200, html.dark .border-amber-100,
html.dark .border-stone-100, html.dark .border-stone-200 { border-color: #3d332a !important; }
html.dark .text-stone-800, html.dark .text-stone-700, html.dark .text-stone-600 { color: #e2d8cc !important; }
html.dark .text-stone-500 { color: #b8ab9d !important; }
html.dark .text-stone-400 { color: #93867a !important; }
html.dark .sticker { background: #241f1a !important; }
html.dark .modal, html.dark .alert-drawer-inner { background: #241f1a !important; }
html.dark input, html.dark select, html.dark textarea { background: #1b1714 !important; color: #efe7dc !important; }
html.dark .btn-ghost { background: #241f1a !important; color: #e2d8cc !important; }
html.dark .toast { background: rgba(240,233,223,.95) !important; color: #241f1a !important; }
html.dark .secret-box { background: #1b1714 !important; color: #efe7dc !important; }
html.dark .log-row { border-color: #332b24 !important; }

.modal-back {
  position: fixed; inset: 0; background: rgba(47,36,25,.55); display: none;
  align-items: center; justify-content: center; z-index: 100; padding: 16px;
}
.modal-back.on { display: flex; }
.modal { background: #fff; border-radius: 20px; max-width: 520px; width: 100%; padding: 22px; max-height: 88vh; overflow: auto; }

.secret-box {
  background: #fffbeb; border: 2px dashed #fcd34d; border-radius: 12px;
  padding: 12px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px;
  word-break: break-all; line-height: 1.7;
}

.log-row { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
.status-pill { font-size: 11px; padding: 2px 8px; border-radius: 9999px; font-weight: 700; }
.status-acked { background: #dcfce7; color: #15803d; }
.status-failed { background: #fee2e2; color: #b91c1c; }
.status-pending { background: #fef3c7; color: #b45309; }
.status-timeout { background: #e2e8f0; color: #475569; }

input[type=range] { accent-color: #f59e0b; width: 100%; }
.hidden { display: none !important; }