/* ════════════════════════════════════════════════════════
   ÆTHNOUS aesthetic — 深淺藍漸層 + 米色 accent
   只在 owner-ext.js 載入時透過 <link rel=stylesheet> 注入。
   作用域：頁面 scope（覆寫 chart.html 既有藍+金主題色於 ext 控制的元件）
   ════════════════════════════════════════════════════════ */

:root {
  --bg-deepest: #0a1018;
  --bg-base: #0e1822;
  --bg-mid: #18283b;
  --bg-elevated: #1f3148;
  --bg-input: #243a55;
  --bg-hover: #2d4564;
  --bg-modal-overlay: rgba(10, 16, 24, 0.88);

  --gradient-top: linear-gradient(180deg, #1a2d44 0%, #0e1822 40%, #0a1018 100%);
  --gradient-card: linear-gradient(145deg, #1f3148 0%, #18283b 100%);
  --gradient-accent: linear-gradient(135deg, #3d6280 0%, #5a8db0 50%, #7eb0ce 100%);
  --gradient-soft: linear-gradient(135deg, rgba(126,176,206,0.04), rgba(90,141,176,0.08));

  --border-hairline: rgba(232, 226, 211, 0.07);
  --border-strong: rgba(232, 226, 211, 0.14);
  --border-accent: rgba(126, 176, 206, 0.42);
  --border-warm: rgba(212, 196, 168, 0.25);

  --text-primary: #ede4d3;
  --text-secondary: #b8c5d4;
  --text-tertiary: #7a8ca1;
  --text-warm: #d4c4a8;
  --text-warm-dim: #a89878;

  --blue-100: #c5dbeb;
  --blue-200: #a8c8de;
  --blue-300: #7eb0ce;
  --blue-400: #5a8db0;
  --blue-500: #3d6280;
  --blue-600: #2a4866;

  --accent: var(--blue-300);
  --accent-light: var(--blue-200);
  --accent-bright: var(--blue-100);

  --beige-100: #ede4d3;
  --beige-200: #d4c4a8;
  --beige-300: #a89878;
  --beige-500: #6b5e44;

  --positive: #9bb8a3;
  --warning: #d4b89a;
  --danger:   #c89a9a;
  --selected: var(--blue-400);

  --shadow-soft: 0 1px 3px rgba(0,0,0,0.18);
  --shadow-elevated: 0 8px 32px rgba(0,0,0,0.28);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.04);

  --tx: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --radius-input: 6px;
  --radius-card: 10px;
  --radius-chip: 999px;
  --radius-modal: 12px;
}

/* ─── 覆寫 chart.html 中 ext 控管的區塊 ─── */

.ext-scope,
.ext-scope * {
  font-family: 'Inter', 'Helvetica Neue', -apple-system, BlinkMacSystemFont,
               'PingFang TC', 'Noto Sans TC', sans-serif;
  font-weight: 300;
  color: var(--text-primary);
  letter-spacing: 0.012em;
  line-height: 1.65;
}

.ext-scope h1, .ext-scope h2, .ext-scope h3 {
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* category chips bar — Sprint 3.9 hotfix H1 (v2)：
   - chip row 自身 padding 收緊
   - 重複「分類」label 隱藏（panel title 已寫「分類」，row 內 label 為冗餘）
   - 含 .ext-cat-row 的 .panel 整體 padding 縮減：chip-only 內容不該跟「命主資料」表單同高 */
.ext-cat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0;
  align-items: center;
}
.ext-cat-row .label {
  display: none;
}
.panel:has(> .ext-cat-row),
.panel:has(.ext-cat-row:only-child) {
  /* 只收緊 padding；寬度沿用 base .panel（max-width 880/1060px, margin:0 auto），
     與上下其他 panel 同寬同對齊。先前 width:fit-content + max-width:100% 會讓
     9 顆分類 chip 把 panel 撐到超過 880px（= Blue 回報的「分類列過寬」）。 */
  padding: 8px 18px;
}
.panel:has(> .ext-cat-row) .panel-title,
.panel:has(.ext-cat-row:only-child) .panel-title {
  margin-bottom: 6px;
  padding-bottom: 4px;
}
.ext-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  border-radius: var(--radius-chip);
  border: 1px solid var(--border-hairline);
  background: var(--gradient-soft);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: var(--tx);
  user-select: none;
}
.ext-chip:hover { border-color: var(--border-strong); color: var(--text-primary); }
.ext-chip.active {
  background: var(--gradient-accent);
  border-color: var(--border-accent);
  color: var(--bg-base);
  font-weight: 500;
  box-shadow: var(--shadow-inset);
}
.ext-chip.manage { border-style: dashed; color: var(--text-tertiary); }
.ext-chip:disabled, .ext-chip[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
/* 分類 chip 內的命例計數（Blue 2026-06-29 易讀性升級） */
.ext-chip-count {
  display: inline-block;
  min-width: 16px;
  padding: 0 5px;
  font-size: 10px;
  line-height: 14px;
  text-align: center;
  border-radius: 8px;
  background: rgba(0,0,0,0.10);
  color: inherit;
  opacity: 0.7;
}
.ext-chip.active .ext-chip-count { background: rgba(255,255,255,0.22); opacity: 0.95; }

/* card / panel */
.ext-card {
  background: var(--gradient-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  padding: 16px;
  margin: 12px auto;
  box-shadow: var(--shadow-soft);
  /* B2 fix（2026-06-26）：.ext-card（分類卡 #ext-cat-card / Reading Lens #ext-lens-standalone）
     先前無 max-width → 由私有 bundle 注入後撐滿 viewport，比上下 .panel 寬很多。
     收成與 .panel 同寬同置中（880px；寬螢幕 1060px 見下方 @media）。 */
  max-width: 880px;
}
@media (min-width: 1200px) {
  .ext-card { max-width: 1060px; }
}
.ext-card .card-title {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.16em;
  color: var(--text-warm);
  text-transform: uppercase;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-hairline);
}

/* privacy notice */
.privacy-notice {
  background: var(--gradient-soft);
  border: 1px solid var(--border-warm);
  border-left: 2px solid var(--beige-200);
  border-radius: var(--radius-input);
  padding: 14px 16px;
  margin-bottom: 12px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.75;
}
.privacy-notice .pn-title {
  color: var(--text-warm);
  font-weight: 500;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  font-size: 11px;
  text-transform: uppercase;
}

/* consent checkbox */
.ext-consent {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
}
.ext-consent input { accent-color: var(--accent); }

/* form fields */
.ext-field {
  margin-bottom: 12px;
}
.ext-field label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-warm);
  margin-bottom: 6px;
}
.ext-field select, .ext-field input[type="text"] {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border-hairline);
  color: var(--text-primary);
  padding: 8px 10px;
  font-size: 13px;
  border-radius: var(--radius-input);
  outline: none;
  font-family: inherit;
  transition: var(--tx);
}
.ext-field select:focus, .ext-field input:focus {
  border-color: var(--border-accent);
  background: var(--bg-hover);
}

/* pill / check-item (multi-select) */
.ext-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ext-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: var(--radius-chip);
  border: 1px solid var(--border-hairline);
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: var(--tx);
}
.ext-pill:hover { border-color: var(--border-strong); color: var(--text-primary); }
.ext-pill.on {
  background: var(--gradient-accent);
  color: var(--bg-base);
  border-color: var(--border-accent);
  font-weight: 500;
}

/* lens preview card */
.ext-lens-card {
  background: var(--gradient-soft);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-input);
  padding: 14px 16px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-secondary);
}
.ext-lens-card .lens-title {
  color: var(--accent-light);
  font-weight: 500;
  letter-spacing: 0.1em;
  font-size: 11px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.ext-lens-card dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; }
.ext-lens-card dt { color: var(--text-warm); font-size: 11px; }
.ext-lens-card dd { color: var(--text-primary); font-size: 12px; }
.ext-lens-card .lens-notes { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border-hairline); }
.ext-lens-card .lens-notes li { font-size: 11px; color: var(--text-tertiary); padding-left: 1em; }

/* partner section in library row */
.ext-partner-section {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.ext-partner-btn {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  padding: 4px 10px;
  border-radius: var(--radius-input);
  font-size: 11px;
  cursor: pointer;
  transition: var(--tx);
  font-family: inherit;
}
.ext-partner-btn:hover { border-color: var(--border-accent); color: var(--accent-light); }
.ext-partner-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-chip);
  font-size: 10px;
  letter-spacing: 0.06em;
  background: var(--bg-elevated);
  color: var(--text-warm);
  border: 1px solid var(--border-hairline);
}
.ext-partner-tag.former { color: var(--text-tertiary); border-style: dashed; }

/* modal */
.ext-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-modal-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  padding: 16px;
}
.ext-modal {
  background: var(--gradient-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-modal);
  width: 100%;
  max-width: 520px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 20px;
  box-shadow: var(--shadow-elevated);
}
.ext-modal h3 {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-warm);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-hairline);
}
.ext-modal .modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border-hairline);
}
.ext-btn {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  padding: 6px 14px;
  border-radius: var(--radius-input);
  font-size: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: var(--tx);
  font-family: inherit;
}
.ext-btn:hover { border-color: var(--border-accent); color: var(--text-primary); }
.ext-btn.primary {
  background: var(--gradient-accent);
  color: var(--bg-base);
  border-color: var(--border-accent);
  font-weight: 500;
}
.ext-btn.danger { color: var(--danger); border-color: var(--danger); }

/* picker row (in partner modal) */
.ext-picker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: var(--radius-input);
  cursor: pointer;
  transition: var(--tx);
  border: 1px solid transparent;
}
.ext-picker-row:hover {
  background: var(--gradient-soft);
  border-color: var(--border-hairline);
}
.ext-picker-name { color: var(--text-primary); font-size: 13px; }
.ext-picker-meta { color: var(--text-tertiary); font-size: 11px; margin-left: 6px; }

/* category mgmt modal item */
.ext-cat-mgmt-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
}
.ext-cat-mgmt-row input {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border-hairline);
  color: var(--text-primary);
  padding: 6px 10px;
  border-radius: var(--radius-input);
  font-size: 13px;
  font-family: inherit;
}
.ext-cat-mgmt-row .row-actions { display: flex; gap: 4px; }
.ext-add-cat-row {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-hairline);
}
.ext-add-cat-row input {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border-hairline);
  color: var(--text-primary);
  padding: 6px 10px;
  border-radius: var(--radius-input);
  font-size: 13px;
  font-family: inherit;
}

/* utility */
.ext-hidden { display: none !important; }

/* ════════════════════════════════════════════════════════
   全頁套用 — chart.html 整頁 design system
   （aesthetic.css 已從 owner-ext 提升為公開層，所有訪客皆套）
   ext-* class 規則仍只在 owner-ext 載入後渲染（DOM 不存在則無效）
   ════════════════════════════════════════════════════════ */

body {
  background: var(--gradient-top);
  background-attachment: fixed;
  color: var(--text-primary);
}

/* 頁面標題（H1）：原 inline 為青藍 #0C6170，在深藍底反差不足 */
h1.page-title {
  color: var(--accent-bright);
  font-weight: 300;
  letter-spacing: 0.18em;
}

/* 「Back to the Universe」浮鈕（chart.html 行內樣式 #888 在深藍底糊）*/
body > div > a[href*="aethnous"] {
  color: var(--text-warm) !important;
  border-color: var(--border-warm) !important;
}
body > div > a[href*="aethnous"]:hover {
  color: var(--accent-bright) !important;
  border-color: var(--border-accent) !important;
}

/* 配偶 sub-form 視覺：dashed 上邊框沿用 accent 系（取代 inline #c0bdb6） */
#partner-fields {
  border-top: 1px dashed var(--border-strong) !important;
}

/* meta-bar 容器底色（先前漏覆寫，導致 ml 標籤 / mv 數值在 #fff 底上反差不足）*/
.meta-bar {
  background: var(--gradient-card);
  border: 1px solid var(--border-hairline);
  color: var(--text-secondary);
}
.ml { color: var(--text-warm); }
.mv { color: var(--accent-bright); font-weight: 500; }
.msep { color: var(--border-strong); }

/* panels（input-panel / library-panel / chart-block） */
.panel,
.chart-block {
  background: var(--gradient-card);
  border: 1px solid var(--border-hairline);
  color: var(--text-primary);
  box-shadow: var(--shadow-soft);
}
.panel-title,
.chart-block-title {
  color: var(--text-warm);
  border-bottom: 1px solid var(--border-hairline);
}

/* fields */
.field label,
.extra-years label,
.radio-grp label {
  color: var(--text-secondary);
}
.field input,
.field select {
  background: var(--bg-input);
  border: 1px solid var(--border-hairline);
  color: var(--text-primary);
  padding: 8px 10px;
  font-size: 14px;
  border-radius: var(--radius-input);
  outline: none;
  font-family: inherit;
  transition: var(--tx);
  width: 100%;
}
.field input::placeholder { color: var(--text-tertiary); }
.field input:focus,
.field select:focus {
  border-color: var(--border-accent);
  background: var(--bg-hover);
}
/* select option 下拉項本身用系統選單，這裡確保前景背景對齊 */
.field select option {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

/* language switcher pills */
.lbtn {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
}
.lbtn:hover { border-color: var(--border-accent); color: var(--text-primary); }
.lbtn.active {
  border-color: var(--border-accent);
  background: var(--gradient-soft);
  color: var(--accent-light);
}

/* city dropdown */
.city-hint { color: var(--text-tertiary); }
.city-dropdown {
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-elevated);
}
.city-opt { color: var(--text-primary); border-bottom: 1px solid var(--border-hairline); }
.city-opt:hover,
.city-opt.active { background: var(--bg-hover); }
.city-opt-code { color: var(--text-tertiary); }
.city-opt-tz   { color: var(--text-tertiary); }

/* radio + extra-years checked */
.radio-grp input[type=radio] { accent-color: var(--accent); }
.radio-grp label:has(input:checked) {
  border-color: var(--border-accent);
  background: var(--gradient-soft);
  color: var(--accent-light);
}
.extra-years input[type=checkbox] { accent-color: var(--accent); }
.extra-years label:has(input:checked) {
  border-color: var(--border-accent);
  background: var(--gradient-soft);
  color: var(--accent-light);
}

/* primary submit button */
.btn-primary {
  background: var(--gradient-accent);
  color: var(--bg-base);
  font-weight: 500;
  border: none;
}
.btn-primary:hover { filter: brightness(1.08); background: var(--gradient-accent); }

/* error box */
.err-box {
  background: rgba(200, 154, 154, 0.08);
  border: 1px solid var(--danger);
  color: var(--danger);
}

/* loading spinner */
.spinner {
  border-color: var(--border-strong);
  border-top-color: var(--accent);
}
#loading-text { color: var(--text-tertiary); }

/* meta-bar & flow-bar */
.meta-bar { color: var(--text-secondary); }
.ml { color: var(--text-tertiary); }
.mv { color: var(--text-primary); }
.msep { color: var(--border-strong); }

.flow-bar { background: var(--gradient-card); border: 1px solid var(--border-hairline); }
.fy-label { color: var(--text-tertiary); }
.fy-year  { color: var(--text-primary); }
.fy-gz    { color: var(--text-secondary); }
.fy-age   { color: var(--text-tertiary); }
.fy-limit { color: var(--text-tertiary); }
.flow-btn {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
}
.flow-btn:hover { border-color: var(--border-accent); background: var(--gradient-soft); color: var(--text-primary); }

/* axis bars */
.axis-bar { background: var(--gradient-card); border: 1px solid var(--border-hairline); }
.axis-label { color: var(--text-warm); }
.kbd-hint { color: var(--text-tertiary); }

/* chips（三軸保留色調區分：decade=綠、year=米金、month=藍） */
.chip {
  background: var(--bg-elevated);
  border: 1px solid var(--border-hairline);
}
.chip:hover { border-color: var(--border-strong); }
.chip .chip-main { color: var(--text-primary); }
.chip .chip-sub  { color: var(--text-tertiary); }

.chip.active { border-color: var(--positive); background: rgba(155, 184, 163, 0.16); }
.chip.active .chip-main { color: var(--positive); }
.chip.active .chip-sub  { color: rgba(155, 184, 163, 0.8); }

.chip-year.active { border-color: var(--beige-200); background: rgba(212, 196, 168, 0.14); }
.chip-year.active .chip-main { color: var(--beige-200); }
.chip-year.active .chip-sub  { color: var(--text-warm-dim); }

.chip-month.active { border-color: var(--accent); background: var(--gradient-soft); }
.chip-month.active .chip-main { color: var(--accent-light); }
.chip-month.active .chip-sub  { color: var(--accent); }

/* seg-btn (view mode) */
.seg-btn {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
}
.seg-btn:hover { border-color: var(--border-accent); color: var(--text-primary); }
.seg-btn.active {
  background: var(--gradient-accent);
  border-color: var(--border-accent);
  color: var(--bg-base);
}

/* library list */
.lib-status { color: var(--text-tertiary); }
.lib-row {
  background: transparent;
  border: 1px solid var(--border-hairline);
}
.lib-row:hover { border-color: var(--border-accent); background: var(--gradient-soft); }
.lib-name { color: var(--text-primary); }
.lib-meta { color: var(--text-secondary); }
.lib-edit { color: var(--text-tertiary); }
.lib-edit:hover { color: var(--border-accent); }
.lib-del  { color: var(--text-tertiary); }
.lib-del:hover { color: var(--danger); }
/* Sprint L（Blue 2026-06-29）：備份按鈕略微強調，提示這是「資料保險」入口 */
.lib-btn-backup {
  background: var(--gradient-accent);
  color: var(--bg-base);
  border-color: var(--border-accent);
}
.lib-btn-backup:hover { filter: brightness(1.08); }
.lib-empty { color: var(--text-tertiary); }

/* 方案層級＋專屬開通碼（2026-07-19）*/
.lib-tier {
  border: 1px solid var(--border-hairline);
  background: transparent;
}
.lib-tier-badge {
  color: var(--border-accent);
  border-color: var(--border-accent);
  background: transparent;
}
.lib-tier-count { color: var(--text-secondary); }
.lib-tier input {
  background: transparent;
  border: 1px solid var(--border-hairline);
  color: var(--text-primary);
}
.lib-btn-activate {
  background: var(--gradient-accent);
  border-color: var(--border-accent);
  color: var(--bg-base);
}

/* 命例搜尋（2026-07-02，文墨天機 parity）*/
.lib-search { padding: 6px 0; }
.lib-search input {
  width: 100%;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--border-hairline);
  border-radius: 6px;
  color: var(--text-primary);
  font: inherit;
}
.lib-search input:focus { outline: none; border-color: var(--border-accent); }
.lib-search input::placeholder { color: var(--text-tertiary); }

/* 文墨天機匯入貼上區（2026-07-03）*/
.lib-wenmo { padding: 6px 0; }
.lib-wenmo textarea {
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 1px solid var(--border-hairline);
  border-radius: 6px;
  color: var(--text-primary);
  font: inherit;
  font-size: 0.9em;
  resize: vertical;
}
.lib-wenmo textarea:focus { outline: none; border-color: var(--border-accent); }
.lib-wenmo textarea::placeholder { color: var(--text-tertiary); }
.lib-wenmo-btns { display: flex; gap: 6px; margin-top: 6px; }

/* Sprint 3.9 P8：lib-list 內建分類 chip row（user 必須先挑分類才看清單）*/
.lib-cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 0;
  margin-bottom: 4px;
  align-items: center;
}
.lib-cat-clear { border-style: dashed; }

/* Sprint 3.9 P8：命盤上方 partner 關聯 banner（meta-bar 下、formation-badges 上）*/
.partner-link-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  padding: 6px 14px;
  margin: 6px 0;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--gradient-soft);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-input);
}
.partner-link-banner .plb-self { color: var(--text-primary); }
.partner-link-banner .plb-partner {
  color: var(--text-warm);
  cursor: pointer;
  text-decoration: underline dotted;
}
.partner-link-banner .plb-partner:hover { color: var(--text-primary); }
.partner-link-banner .plb-hint {
  color: var(--text-tertiary);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.lib-auto  { color: var(--text-secondary); }
.lib-btn {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
}
.lib-btn:hover { border-color: var(--border-accent); color: var(--text-primary); }
.lib-btn-google {
  background: var(--gradient-accent);
  border-color: var(--border-accent);
  color: var(--bg-base);
}

/* chart-block secondary buttons */
.chart-block-actions button {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
}
.chart-block-actions button:hover { border-color: var(--border-accent); color: var(--text-primary); background: var(--gradient-soft); }

/* ════════════════════════════════════════════════════════
   selfChartId 視覺角標
   ════════════════════════════════════════════════════════ */

.ext-self-badge {
  display: inline-block;
  background: var(--gradient-accent);
  color: var(--bg-base);
  padding: 1px 8px;
  border-radius: var(--radius-chip);
  font-size: 9px;
  letter-spacing: 0.1em;
  font-weight: 600;
  text-transform: uppercase;
  margin-right: 8px;
  vertical-align: middle;
  box-shadow: var(--shadow-inset);
}

/* ════════════════════════════════════════════════════════
   Reading Lens 獨立卡片（library-panel 上方）
   ════════════════════════════════════════════════════════ */

#ext-lens-standalone {
  /* 沿用 .ext-card 樣式，這裡只調強調感 */
  border-left: 2px solid var(--accent);
}
#ext-lens-standalone dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; }
#ext-lens-standalone dt { color: var(--text-warm); font-size: 11px; }
#ext-lens-standalone dd { color: var(--text-primary); font-size: 12px; margin: 0; }
#ext-lens-standalone .lens-notes {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-hairline);
  list-style: none;
  padding-left: 0;
}
#ext-lens-standalone .lens-notes li {
  font-size: 11px;
  color: var(--text-tertiary);
  padding-left: 1em;
  position: relative;
}
#ext-lens-standalone .lens-notes li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--accent);
}

/* E2 修改模式橫幅（Q2 Blue 2026-07-03）：chart.html inline 淺色版（#eef7f8 底）
   在深藍主題下文字反差不足 → 以主題變數覆寫為半透明藍底＋亮字 */
.edit-banner {
  background: rgba(126, 176, 206, 0.12);
  border: 1px solid var(--border-accent);
  color: var(--accent-bright);
}
.edit-banner .edit-cancel {
  border: 1px solid var(--border-accent);
  color: var(--accent-bright);
  background: transparent;
}
.edit-banner .edit-cancel:hover {
  background: var(--blue-500);
  color: var(--text-primary);
}

/* ════════════════════════════════════════════════════════════════
   行動裝置表單適應化（Blue 2026-07-08 指示 #2）
   問題：aesthetic.css 基準 .field input 14px 無條件覆蓋 chart.html
   768px media query 的 16px（後載入者勝）→ 手機上欄位/標籤/按鈕過小，
   iOS 聚焦還會自動放大頁面。此區塊置於檔案最末，cascade 必勝。
   原則：輸入類 ≥16px（防 iOS zoom）、觸控目標 ≥44px、標籤提示放大一級。
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  h1.page-title { font-size: clamp(16px, 4.5vw, 20px); }

  .panel { padding: 18px 14px; }
  .panel-title { font-size: 12px; }

  /* 欄位標籤與提示 */
  .field label { font-size: 13px; margin-bottom: 6px; }
  .city-hint { font-size: 12px; line-height: 1.5; }

  /* 輸入框／下拉：16px 防 iOS 自動縮放，加高至 ~48px 觸控目標 */
  .field input,
  .field select {
    font-size: 16px;
    padding: 12px 12px;
    min-height: 48px;
  }

  /* 性別／radio 選項：放大為完整觸控目標 */
  .radio-grp { gap: 10px; }
  .radio-grp label {
    font-size: 15px;
    padding: 11px 18px;
    min-height: 44px;
  }
  .radio-grp input[type=radio] { transform: scale(1.25); }

  /* 已定盤／不確定時辰 checkbox 列 */
  .field input[type=checkbox] {
    transform: scale(1.35);
    transform-origin: left center;
    min-height: 0;            /* checkbox 不吃 48px 高度 */
  }
  .field > label[for] { font-size: 14px; line-height: 1.5; }

  /* 語言切換 pills */
  .lbtn { font-size: 13px; padding: 8px 18px; min-height: 40px; }

  /* 起盤主按鈕 */
  .btn-primary {
    font-size: 15px;
    padding: 15px;
    min-height: 52px;
    letter-spacing: 0.25em;
  }

  /* 城市下拉選項觸控高度 */
  .city-opt { padding: 12px 12px; font-size: 15px; }

  /* 命例庫列與按鈕 */
  .lib-name { font-size: 15px; }
  .lib-meta { font-size: 12px; }
  .lib-btn  { font-size: 13px; padding: 9px 14px; min-height: 40px; }
  .lib-edit, .lib-del { font-size: 16px; padding: 8px 10px; }

  /* 錯誤訊息 */
  .err-box { font-size: 14px; padding: 12px; }
}

@media (max-width: 480px) {
  body { padding: 12px 10px 40px; }
  .panel { padding: 16px 12px; }
  /* 單欄後 radio 群組允許換行避免擠壓 */
  .radio-grp { flex-wrap: wrap; }
}

/* 置中改由 canvas auto-margin 承擔：flex justify-content:center 在內容
   overflow 時左緣不可捲達（CSS 規範行為）→ flex-start + margin:auto
   同樣置中、且橫向捲動可達左緣 */
.canvas-wrap { justify-content: flex-start; }
.canvas-wrap canvas { margin-left: auto; margin-right: auto; }

/* ── 手機盤面可讀性（chart-render.js 同日修）───────────────────────
   小螢幕維持 640px 最小顯示寬（canvas-wrap 已有 overflow-x:auto）→
   星曜有效字級 ~17px；捲動提示只在窄螢幕顯示 */
.canvas-scroll-hint { display: none; }
@media (max-width: 660px) {
  .canvas-scroll-hint {
    display: block; text-align: center;
    font-size: 11px; color: var(--text-tertiary);
    letter-spacing: 0.08em; margin: 2px 0 6px;
  }
}