:root {
  --bg: #f3f5f4;
  --card: #ffffff;
  --text: #17201d;
  --muted: #5d6b66;
  --line: #dde3e0;
  --brand: #0f766e;
  --brand-ink: #ffffff;
  --brand-soft: #e2f3f0;
  --danger: #c2410c;
  --danger-soft: #fdebe1;
  --warn: #a16207;
  --warn-soft: #fdf3d7;
  --frame: #52605b;
  --slat: #e9ece9;
  --slat-edge: #a8b2ad;
  --sky-top: #8fd0f5;
  --sky-bottom: #e3f4fd;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.05), 0 4px 16px rgb(0 0 0 / 0.04);
  color-scheme: light;
}

/* 深色：手機是深色模式且沒有選「淺色」，或使用者自己選了「深色」 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1413;
    --card: #182120;
    --text: #e6ece9;
    --muted: #97a6a0;
    --line: #2a3533;
    --brand: #2dd4bf;
    --brand-ink: #062a26;
    --brand-soft: #123c37;
    --danger: #fb923c;
    --danger-soft: #3b1f12;
    --warn: #facc15;
    --warn-soft: #3a3011;
    --frame: #8b9993;
    --slat: #c9d1cd;
    --slat-edge: #7d8a85;
    --sky-top: #1e4a6b;
    --sky-bottom: #31678c;
    --shadow: none;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #0f1413;
  --card: #182120;
  --text: #e6ece9;
  --muted: #97a6a0;
  --line: #2a3533;
  --brand: #2dd4bf;
  --brand-ink: #062a26;
  --brand-soft: #123c37;
  --danger: #fb923c;
  --danger-soft: #3b1f12;
  --warn: #facc15;
  --warn-soft: #3a3011;
  --frame: #8b9993;
  --slat: #c9d1cd;
  --slat-edge: #7d8a85;
  --sky-top: #1e4a6b;
  --sky-bottom: #31678c;
  --shadow: none;
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* 讓 hidden 屬性一定有效，不會被下面的 display: grid / flex 蓋掉 */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.55 system-ui, -apple-system, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3 { margin: 0; line-height: 1.3; }
h2 { font-size: 1.1rem; }
h3 { font-size: 0.95rem; color: var(--muted); margin: 18px 0 10px; font-weight: 600; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 12px;
  background: var(--brand);
  color: var(--brand-ink);
}
.topbar h1 { font-size: 1.15rem; }

.conn { font-size: 0.8rem; display: inline-flex; align-items: center; gap: 6px; opacity: 0.95; }
.conn::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fbbf24; }
.conn[data-online="true"]::before { background: #4ade80; }

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 32px);
  display: grid;
  gap: 14px;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--shadow);
}
.card > h2 { margin-bottom: 12px; }
.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }

.hint { color: var(--muted); font-size: 0.88rem; margin: 8px 0; }

/* 警報 */
.alerts { display: grid; gap: 8px; }
.alert {
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 600;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.alert.danger { background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger); }
.alert.warning { background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn); }

/* 百葉視覺 */
.status { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }

.window {
  position: relative;
  width: 150px;
  height: 180px;
  flex: none;
  border: 8px solid var(--frame);
  border-radius: 6px;
  overflow: hidden;
  perspective: 500px;
}
.sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--sky-top), var(--sky-bottom));
}
.sky::after {
  content: "";
  position: absolute;
  top: 22px;
  right: 22px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fde68a;
  box-shadow: 0 0 24px #fde68a;
}
.slats {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: repeat(10, 1fr);
}
.slat {
  background: linear-gradient(var(--slat), var(--slat) 70%, var(--slat-edge));
  border-bottom: 1px solid var(--slat-edge);
  transform-origin: center;
  transform: rotateX(var(--tilt, 0deg)) scaleY(1.08);
  transition: transform 0.8s ease;
}
.window[data-slow="true"] .slat { transition-duration: 4s; }

.status-info { flex: 1; min-width: 150px; }
.angle { font-size: 3rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.angle small { font-size: 1.6rem; color: var(--muted); }
.angle-label { font-size: 1.05rem; font-weight: 600; margin-top: 4px; }
.mode-badge {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 0.85rem;
  font-weight: 600;
}
.updated { color: var(--muted); font-size: 0.82rem; margin-top: 6px; }

.env {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  margin: 16px 0 0;
}
.env div { background: var(--bg); border-radius: 10px; padding: 8px 10px; }
.env dt { font-size: 0.78rem; color: var(--muted); }
.env dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.env .on dd { color: var(--danger); }

/* 按鈕與輸入 */
.btn {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  border-radius: 10px;
  padding: 10px 14px;
  font: inherit;
  font-weight: 600;
  min-height: 44px;
  cursor: pointer;
}
.btn:active { transform: scale(0.98); }
.btn.primary { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.btn.danger { color: var(--danger); border-color: var(--danger); }
.btn.warn { color: var(--warn); border-color: var(--warn); }
.btn.wide { width: 100%; margin-top: 16px; }
.btn.icon { width: 44px; padding: 0; font-size: 1.4rem; }
.btn small { display: block; font-size: 0.75rem; color: var(--muted); font-weight: 500; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.link { background: none; border: 0; color: var(--brand); font: inherit; cursor: pointer; padding: 4px; }

input[type="number"], input[type="password"], input[type="date"], select {
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 10px;
  min-height: 44px;
  min-width: 0;
  width: 100%;
}
input[type="range"] { width: 100%; accent-color: var(--brand); min-height: 44px; }

.row { display: flex; gap: 8px; align-items: center; }
.row > input { flex: 1; }
.row.tight .btn { padding: 8px 12px; flex: none; }

.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--bg);
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
}
.segmented button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  border-radius: 9px;
  min-height: 42px;
  cursor: pointer;
}
.segmented button[aria-pressed="true"] { background: var(--card); color: var(--brand); box-shadow: var(--shadow); }
.seg-option { position: relative; display: grid; cursor: pointer; }
.seg-option input { position: absolute; opacity: 0; pointer-events: none; }
.seg-option span {
  display: grid;
  place-items: center;
  min-height: 42px;
  border-radius: 9px;
  color: var(--muted);
  font-weight: 600;
}
.seg-option input:checked + span { background: var(--card); color: var(--brand); box-shadow: var(--shadow); }
.seg-option input:focus-visible + span { outline: 2px solid var(--brand); }

.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0 16px; }
.slider-label { display: block; font-weight: 600; margin-bottom: 2px; }


/* 模擬器 */
.sim-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.sim { display: grid; gap: 6px; background: var(--bg); border-radius: 12px; padding: 10px; }
.sim-name { font-size: 0.9rem; font-weight: 600; }
.sim input, .sim select { background: var(--card); }

/* 紀錄 */
.day-nav { display: grid; grid-template-columns: 44px 1fr 44px auto; gap: 8px; }
.day-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.chip {
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  border-radius: 999px;
  padding: 4px 10px;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.day-summary { color: var(--muted); font-size: 0.88rem; margin: 12px 0 4px; }

.records { list-style: none; margin: 0; padding: 0; }
.records li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 2px 10px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.records li.new { animation: flash 1.6s ease; }
@keyframes flash { from { background: var(--brand-soft); } to { background: transparent; } }
.records time { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 0.9rem; }
.records .move { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.records .reason { grid-column: 1 / -1; font-size: 0.92rem; }
.badge { font-size: 0.75rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; justify-self: start; align-self: center; }
.badge.manual { background: var(--brand-soft); color: var(--brand); }
.badge.auto { background: var(--warn-soft); color: var(--warn); }
.badge.signal { background: var(--bg); color: var(--muted); }
.badge.mode { background: var(--bg); color: var(--text); }
.empty { color: var(--muted); text-align: center; padding: 20px 0; }

.help p { margin: 6px 0; color: var(--muted); font-size: 0.92rem; }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
  transform: translateX(-50%);
  max-width: calc(100% - 32px);
  background: var(--text);
  color: var(--bg);
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 0.92rem;
  z-index: 10;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.2);
}

/* ---------- 頂端列 ---------- */
.topbar-right { display: flex; align-items: center; gap: 10px; min-width: 0; }
.theme-btn {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: transparent;
  color: var(--brand-ink);
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}
.top-btn {
  color: var(--brand-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 4px 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 9em;
}

.view { display: grid; gap: 14px; }
/* 格線裡的卡片預設不會比內容窄，長的程式碼會把卡片撐出手機畫面；min-width: 0 讓它乖乖縮小、改成內部捲動 */
.view > *, .wrap > * { min-width: 0; }

/* ---------- 下方分頁列（登入後） ---------- */
body.has-tabbar .wrap { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 88px); }
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  display: flex;
  justify-content: space-around;
  background: var(--card);
  border-top: 1px solid var(--line);
  padding: 6px 4px calc(env(safe-area-inset-bottom, 0px) + 6px);
}
.tabbar a {
  flex: 1;
  max-width: 120px;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 4px 0;
  font-size: 0.75rem;
  color: var(--muted);
  text-decoration: none;
  border-radius: 10px;
}
.tabbar a span { font-size: 1.25rem; line-height: 1.2; }
.tabbar a[aria-current="true"] { color: var(--brand); background: var(--brand-soft); font-weight: 700; }

/* ---------- 表單欄位 ---------- */
.field { display: grid; gap: 4px; margin-bottom: 12px; }
.field > span { font-size: 0.88rem; font-weight: 600; color: var(--muted); }
.field input, .field select, .inline-form input {
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 10px;
  min-height: 44px;
  width: 100%;
  min-width: 0;
}
.field input:disabled { opacity: 0.7; }
a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

.guest-hint p { margin: 4px 0; }
.mini-status { color: var(--muted); margin-bottom: 12px; }
.warn-text { color: var(--warn); }

/* ---------- 裝置 ---------- */
.dot { width: 12px; height: 12px; border-radius: 50%; background: var(--muted); flex: none; }
.dot[data-online="true"], [data-online="true"] > .dot { background: #22c55e; box-shadow: 0 0 0 4px rgb(34 197 94 / 0.2); }
.dot.big { width: 18px; height: 18px; }
.device-line { display: flex; align-items: center; gap: 12px; }
.device-line .hint { margin: 0; }
.device-status { display: flex; align-items: center; gap: 14px; font-size: 1.15rem; }
.device-status .hint { margin: 2px 0 0; font-size: 0.85rem; }

.step { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 1rem; margin-top: 20px; }
.step:first-child { margin-top: 0; }
.step span {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--brand-ink);
  display: grid;
  place-items: center;
  font-size: 0.8rem;
}
.copy-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.copy-row code {
  flex: 1 1 200px;
  min-width: 0;
  overflow-wrap: anywhere;
  background: var(--bg);
  border-radius: 8px;
  padding: 10px;
  font-size: 0.85rem;
}
pre.code {
  background: var(--bg);
  border-radius: 10px;
  padding: 12px;
  font-size: 0.8rem;
  overflow-x: auto;
  margin: 8px 0;
}

.code-details { margin: 8px 0; }
.code-details summary { cursor: pointer; color: var(--brand); font-weight: 600; }
.code-details pre.code { max-height: 320px; overflow: auto; }

.kv { display: grid; gap: 8px; margin: 0; }
.kv div { display: grid; grid-template-columns: 4em 1fr; gap: 8px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }

/* ---------- 帳號管理 ---------- */
.user-list { list-style: none; margin: 0 0 8px; padding: 0; }
.user-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); }
.user-info { flex: 1 1 160px; min-width: 0; }
.user-info b { display: inline-flex; gap: 6px; align-items: center; }
.user-info .hint { margin: 2px 0 0; overflow-wrap: anywhere; }
.user-actions { display: flex; gap: 6px; }
.btn.small { min-height: 36px; padding: 6px 10px; font-size: 0.85rem; }
.inline-form { flex-basis: 100%; display: flex; gap: 6px; }
.add-user { border-top: 1px solid var(--line); padding-top: 4px; }

/* ---------- 註冊與監控 ---------- */
.auth-switch { margin-bottom: 0; }
.notice p { margin: 6px 0; }
.count { color: var(--muted); font-size: 0.95rem; font-weight: 600; }
.user-info b .dot { width: 9px; height: 9px; margin-right: 2px; }
.user-actions { flex-wrap: wrap; }
.btn.warn.small, .btn.danger.small { background: var(--card); }
.badge.status-pending { background: var(--warn-soft); color: var(--warn); }
.badge.status-disabled { background: var(--danger-soft); color: var(--danger); }

.log-list { list-style: none; margin: 0; padding: 0; }
.log-list li {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 2px 8px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
}
.log-list time { color: var(--muted); font-variant-numeric: tabular-nums; }
.log-list .ok { color: #16a34a; font-weight: 700; }
.log-list .bad { color: var(--danger); font-weight: 700; }
.log-list .log-text { overflow-wrap: anywhere; }
.log-list .log-meta { grid-column: 1 / -1; margin: 0; font-size: 0.8rem; }
.log-list li.failed .log-text { color: var(--danger); }

.tabbar a span { position: relative; }
.tab-badge {
  position: absolute;
  top: -4px;
  right: -12px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

@media (max-width: 420px) {
  .window { width: 120px; height: 150px; }
  .angle { font-size: 2.5rem; }
  .quick { grid-template-columns: repeat(2, 1fr); }
}