/* ============================================================
   devlog.css — Devlog 版本歷程檢視器樣式(自帶,可主題化)
   顏色 / 圓角 / 字體走 CSS 變數,未定義時用以下 fallback。
   要換主題,在你的 :root 覆寫這些變數即可。
   ============================================================ */
:root {
  --accent: #C8860D;        --accent-deep: #9a6a0a;   --accent-soft: #f5e9d0;
  --bg: #faf7f1;            --bg-card: #ffffff;       --bg-elev: #ffffff;   --bg-soft: #f3efe6;
  --text: #2b2b2b;         --text-soft: #777777;     --text-mute: #9a9a9a;
  --line: #e5e0d5;         --line-soft: #efeae0;     --line-strong: #d8d0c0;
  --danger: #c0392b;      --danger-soft: #f7dad5;
  --success: #2e7d4f;     --success-soft: #d7ede0;   --warning-soft: #f7ecd0;
  --r-md: 12px;           --r-lg: 14px;             --r-xl: 20px;         --r-pill: 999px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --safe-bottom: 0px;
  --font-display: inherit;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- Modal 外殼 ---------- */
@keyframes slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
/* ---------- Modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fade-in 0.2s ease;
}
.modal { align-items: center; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(40, 32, 24, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.modal-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: var(--bg-elev);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  max-height: 92vh;
  overflow-y: auto;
  padding-bottom: var(--safe-bottom);
  animation: slide-up 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.modal-card {
    border-radius: var(--r-xl);
    max-height: 85vh;
  }
.modal-handle {
  width: 40px;
  height: 4px;
  background: var(--line-strong);
  border-radius: var(--r-pill);
  margin: 8px auto 0;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px 8px;
}
.modal-header h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.01em;
}
.modal-body {
  padding: 8px 20px 20px;
}
.icon-btn.active {
  background: var(--accent, #c8893a);
  color: #fff;
}
/* modal 內未包在 .form-field 的 input(如分享密碼、貼連結、Mega 帳密),統一套用好看的輸入框樣式 */
.modal-body > input[type="text"],
.modal-body > input[type="email"],
.modal-body > input[type="password"],
.modal-body > input[type="number"],
.modal-body > input[type="search"],
.modal-body > input[type="tel"],
.modal-body > input[type="url"],
.modal-body > div > input[type="text"],
.modal-body > div > input[type="email"],
.modal-body > div > input[type="password"],
.pw-input-wrap > input {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 12px 14px;
  border-radius: var(--r-md);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.modal-body > input[type="text"]:focus,
.modal-body > input[type="email"]:focus,
.modal-body > input[type="password"]:focus,
.modal-body > input[type="number"]:focus,
.modal-body > input[type="search"]:focus,
.modal-body > input[type="tel"]:focus,
.modal-body > input[type="url"]:focus,
.modal-body > div > input[type="text"]:focus,
.modal-body > div > input[type="email"]:focus,
.modal-body > div > input[type="password"]:focus,
.pw-input-wrap > input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(200, 137, 58, 0.12);
}
/* Modal 標題下的小字副標 */
.modal-sub { font-size: 12px; color: var(--text-mute); margin-top: 2px; }
.icon-btn-lg {font-size:24px;background:none;border:none;cursor:pointer;color:var(--text);padding:0 4px}

/* ---------- 版本歷程 / 熱力圖 ---------- */
/* ===== Changelog Modal ===== */
.changelog-card {
  max-height: 86vh;
}
.changelog-body {
  overflow-y: auto;
  padding-bottom: 24px;
}
.changelog-current {
  text-align: center;
  padding: 6px 0 16px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 16px;
}
.changelog-current .label {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--text-mute);
  font-weight: 600;
}
.changelog-current .ver {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent-deep);
  margin-top: 2px;
}
.changelog-entry {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--line-soft);
}
.changelog-entry:last-child { border-bottom: none; }
.changelog-entry.latest .tag {
  background: var(--accent);
  color: #fff;
}
.changelog-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.changelog-head .tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--bg-soft);
  color: var(--text-soft);
  letter-spacing: 0.04em;
}
.changelog-head .title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
}
.changelog-head .date {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-mute);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.changelog-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.changelog-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-soft);
}
.changelog-list .badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 2px;
}
.changelog-list .badge.cl-feat {
  background: var(--success-soft);
  color: var(--success);
}
.changelog-list .badge.cl-change {
  background: var(--warning-soft);
  color: var(--accent-deep);
}
.changelog-list .badge.cl-fix {
  background: var(--danger-soft);
  color: var(--danger);
}
.changelog-list .text { flex: 1; }
/* ============================================
   版本 / 開發歷程(三分頁:大版本歷程 / 熱力圖 / 詳細資訊)
   ============================================ */
.dh-tabs {display:flex;gap:5px;background:var(--bg-soft);padding:4px;border-radius:var(--r-pill);margin:0 0 14px;}
.dh-tab {flex:1;border:none;background:none;color:var(--text-soft);font-size:13px;font-weight:700;
  padding:8px 0;border-radius:var(--r-pill);cursor:pointer;transition:background .15s,color .15s;}
.dh-tab.on {background:var(--bg-card);color:var(--accent-deep);box-shadow:var(--shadow-sm);}
[data-theme="dark"] .dh-tab.on {color:var(--accent);}
.dh-view {animation:dhFade .18s;}
.dh-empty,.dh-d-empty {color:var(--text-mute);font-size:13px;text-align:center;padding:16px 0;}
/* 大版本歷程 */
.dh-timeline {position:relative;padding-left:28px;}
.dh-timeline::before {content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--line-strong);}
.dh-mv {position:relative;margin-bottom:13px;}
.dh-mv-dot {position:absolute;left:-28px;top:14px;width:18px;height:18px;border-radius:50%;background:var(--bg);border:3px solid var(--accent);}
.dh-mv.latest .dh-mv-dot {background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);}
.dh-mv-card {background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);overflow:hidden;}
.dh-mv-head {display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;}
.dh-mv-badge {background:var(--accent);color:#fff;font-weight:800;font-size:14px;padding:3px 10px;border-radius:8px;flex-shrink:0;}
[data-theme="dark"] .dh-mv-badge {color:#241e18;}
.dh-mv-tt {flex:1;min-width:0;}
.dh-mv-theme {font-weight:700;font-size:14px;line-height:1.35;color:var(--text);}
.dh-mv-meta {color:var(--text-mute);font-size:11px;margin-top:3px;}
.dh-mv-chev {color:var(--text-mute);font-size:12px;transition:transform .2s;flex-shrink:0;}
.dh-mv.open .dh-mv-chev {transform:rotate(90deg);}
.dh-mv-body {display:none;padding:0 14px 12px;}
.dh-mv.open .dh-mv-body {display:block;}
.dh-mv-lbl {font-size:10.5px;color:var(--text-mute);font-weight:700;letter-spacing:.05em;margin:4px 0 8px;}
.dh-mn {display:flex;gap:9px;padding:6px 0;border-top:1px dashed var(--line);}
.dh-mn:first-of-type {border-top:none;}
.dh-mn-v {color:var(--accent-deep);font-weight:700;font-size:11.5px;font-variant-numeric:tabular-nums;flex-shrink:0;min-width:42px;}
[data-theme="dark"] .dh-mn-v {color:var(--accent);}
.dh-mn-t {font-size:12.5px;color:var(--text-soft);line-height:1.45;}
/* 開發熱力圖 */
.dh-hm-range {font-size:12px;color:var(--text-mute);margin-bottom:12px;}
.dh-hm-range b {color:var(--text-soft);}
.dh-hm-scroll {overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;}
.dh-hm-wrap {display:inline-flex;gap:6px;}
.dh-hm-wd {display:flex;flex-direction:column;gap:3px;padding-top:18px;}
.dh-hm-wd span {height:13px;font-size:9px;color:var(--text-mute);line-height:13px;}
.dh-hm-mon {display:flex;height:14px;font-size:9.5px;color:var(--text-mute);white-space:nowrap;}
.dh-hm-cols {display:flex;gap:3px;}
.dh-hm-col {display:flex;flex-direction:column;gap:3px;}
.dh-cell {width:13px;height:13px;border-radius:3px;background:#efe9db;}
.dh-cell.l1 {background:#f1d9ad;}
.dh-cell.l2 {background:#e3bb78;}
.dh-cell.l3 {background:#cf9a44;}
.dh-cell.l4 {background:#a9701c;}
.dh-cell.has {cursor:pointer;}
.dh-cell.out {background:transparent;}
.dh-cell.sel {outline:2px solid var(--accent);outline-offset:1px;}
[data-theme="dark"] .dh-cell {background:#2e2620;}
[data-theme="dark"] .dh-cell.l1 {background:#5a4a2c;}
[data-theme="dark"] .dh-cell.l2 {background:#8a6a30;}
[data-theme="dark"] .dh-cell.l3 {background:#b88a3c;}
[data-theme="dark"] .dh-cell.l4 {background:#e6a857;}
.dh-hm-legend {display:flex;align-items:center;gap:5px;justify-content:flex-end;margin-top:12px;font-size:10.5px;color:var(--text-mute);}
.dh-hm-legend .dh-cell {cursor:default;}
.dh-hm-detail {margin-top:14px;background:var(--bg-soft);border-radius:12px;padding:13px 14px;min-height:60px;}
.dh-d-date {font-weight:800;font-size:14px;margin-bottom:2px;color:var(--text);}
.dh-d-sum {font-size:11.5px;color:var(--text-mute);margin-bottom:10px;}
.dh-d-row {display:flex;gap:9px;padding:6px 0;border-top:1px solid var(--line);}
.dh-d-row:first-of-type {border-top:none;}
.dh-d-v {color:var(--accent-deep);font-weight:800;font-size:12px;flex-shrink:0;min-width:50px;font-variant-numeric:tabular-nums;}
[data-theme="dark"] .dh-d-v {color:var(--accent);}
.dh-d-t {font-size:12.5px;color:var(--text-soft);line-height:1.45;}