/* =============================================================================
   美甲調色 / Manicure Color Mixer — styles
   IG-style minimal palette + responsive layout
   ============================================================================= */

/* =============================================================================
   主題色票 — 美甲沙龍美感(暖米 + 玫瑰金)
   light:乳白底 + 玫瑰調 + 暖灰
   dark:深紫黑 + 暖粉 + 玫瑰金
   ============================================================================= */
:root, [data-theme="light"] {
  --bg:           #FAF6F2;   /* 暖米色 */
  --bg-2:         #F4ECE7;   /* 略深的米 */
  --surface:      #FFFFFF;
  --surface-2:    #FBF6F3;   /* 卡片次層 */
  --text:         #2B2128;   /* 暖深紫炭 */
  --text-2:       #897784;   /* 帶粉的灰 */
  --text-3:       #C9B8C0;   /* 淺粉灰 */
  --border:       #ECDFE0;
  --border-soft:  #F5EBE9;
  --accent:       #C25B7C;   /* 玫瑰主色 */
  --accent-soft:  #FCE7EE;   /* 玫瑰背景 */
  --rose-gold:    #C99178;   /* 玫瑰金 */
  --link:         #B26B7A;
  --link-hover:   #C25B7C;
  --success:      #7FB069;
  --warning:      #E0A458;
  --danger:       #D14D5E;
  --shadow-sm:    0 1px 2px rgba(75, 50, 60, 0.06);
  --shadow-md:    0 4px 14px rgba(75, 50, 60, 0.08);
  --shadow-lg:    0 12px 32px rgba(75, 50, 60, 0.12);
}

[data-theme="dark"] {
  --bg:           #18141A;
  --bg-2:         #221C24;
  --surface:      #221C24;
  --surface-2:    #2B232E;
  --text:         #F2EAEC;
  --text-2:       #D4C0C8;
  --text-3:       #9B8891;
  --border:       #58474F;       /* 更亮 — 卡片邊框在深色下看得到 */
  --border-soft:  #463842;       /* 比 surface 亮一階 */
  --accent:       #E89BAA;
  --accent-soft:  #3A2730;
  --rose-gold:    #D9A98E;
  --link:         #E89BAA;
  --link-hover:   #F2B5C0;
  --success:      #88C880;
  --warning:      #F0B770;
  --danger:       #E96B7C;
  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:    0 4px 14px rgba(0, 0, 0, 0.35);
  --shadow-lg:    0 12px 32px rgba(0, 0, 0, 0.5);
}

/* 自動模式:跟隨系統 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg:           #18141A;
    --bg-2:         #221C24;
    --surface:      #221C24;
    --surface-2:    #2B232E;
    --text:         #F2EAEC;
    --text-2:       #D4C0C8;
    --text-3:       #9B8891;
    --border:       #58474F;
    --border-soft:  #463842;
    --accent:       #E89BAA;
    --accent-soft:  #3A2730;
    --rose-gold:    #D9A98E;
    --link:         #E89BAA;
    --link-hover:   #F2B5C0;
    --success:      #88C880;
    --warning:      #F0B770;
    --danger:       #E96B7C;
    --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md:    0 4px 14px rgba(0, 0, 0, 0.35);
    --shadow-lg:    0 12px 32px rgba(0, 0, 0, 0.5);
  }
}

*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
/* hidden 屬性必須蓋過任何 display: 設定(否則 .btn 的 display: inline-flex 會
   讓 hidden=true 的按鈕仍然顯示出來,造成「全部按鈕都看到」的 bug) */
[hidden] { display: none !important; }
html, body {
  margin: 0; padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
               "PingFang TC", "Microsoft JhengHei", sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
body {
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0));
}
main { max-width: 600px; margin: 0 auto; }

.view {
  padding: 12px 16px 24px;
  animation: fadeIn 0.18s ease;
}
.view[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }

.view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-soft);
  min-height: 44px;
}
.view-header h1 {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.2px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 16px;
  cursor: pointer;
  transition: opacity 0.15s, background 0.15s;
  font-family: inherit;
  line-height: 1;
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-primary { background: var(--link); color: #fff; }
.btn-primary:active { background: var(--link-hover); }
.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-secondary:active { background: var(--bg); }
.btn-ghost {
  background: transparent;
  color: var(--link);
  padding: 6px 8px;
}
.btn-block { display: flex; width: 100%; }

input[type="file"] { display: none; }
.input, .select {
  width: 100%;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  color: var(--text);
  font-family: inherit;
}
.input:focus, .select:focus { outline: none; border-color: var(--link); }
.field { margin-bottom: 12px; }
.field-label {
  display: block;
  font-size: 12px;
  color: var(--text-2);
  margin-bottom: 6px;
  font-weight: 500;
}
.field-label .required { color: var(--accent); }

.canvas-wrap {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--border-soft);
  margin-top: 12px;
  display: none;
  /* zoom=1：允許瀏覽器處理上下捲動，避免圖片擋住整頁滑動 */
  touch-action: pan-y;
}
.canvas-wrap.has-image { display: block; }
.canvas-wrap.is-zoomed {
  /* zoom>1：自己接管 pan，瀏覽器不要動 */
  touch-action: none;
}
.canvas-zoomer {
  position: relative;
  width: 100%;
  transform-origin: 0 0;
  will-change: transform;
}
canvas {
  display: block;
  width: 100%;
  height: auto;
  cursor: crosshair;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.zoom-controls {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  z-index: 10;
  user-select: none;
  -webkit-user-select: none;
}
.zoom-btn {
  width: 32px; height: 32px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-1);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s;
  padding: 0;
}
.zoom-btn:active { background: rgba(0,0,0,0.06); }
.zoom-btn:disabled { opacity: 0.35; cursor: default; }
.zoom-level {
  font-size: 11px;
  color: var(--text-2);
  min-width: 32px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.crosshair {
  position: absolute;
  width: 24px; height: 24px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px rgba(0,0,0,0.55), 0 0 6px rgba(0,0,0,0.25);
  pointer-events: none;
  transform: translate(-50%, -50%);
  display: none;
}
.crosshair.show { display: block; }
.hint {
  font-size: 12px;
  color: var(--text-2);
  margin-top: 8px;
  text-align: center;
}

.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  overflow: hidden;
}
.compare-cell { display: flex; flex-direction: column; }
.compare-cell + .compare-cell { border-left: 1px solid var(--border-soft); }
.compare-cell .label {
  padding: 10px 12px 6px;
  font-size: 11px;
  color: var(--text-2);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.compare-cell .swatch {
  height: 96px;
  margin: 0 12px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.04);
}
.compare-cell .hex {
  padding: 8px 12px 12px;
  font-size: 12px;
  color: var(--text-2);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  text-align: center;
  letter-spacing: 0.3px;
}

.section-title {
  margin: 16px 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.recipe-row {
  display: flex;
  align-items: center;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border-soft);
  gap: 12px;
}
.recipe-row:last-child { border-bottom: none; }
.recipe-row.zero { opacity: 0.3; }
.color-dot {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.06);
  flex-shrink: 0;
}
.recipe-info { flex: 1; min-width: 0; }
.recipe-info .name { font-size: 14px; font-weight: 500; color: var(--text); }
.recipe-info .sub { font-size: 12px; color: var(--text-2); margin-top: 1px; }
.recipe-parts {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  min-width: 36px;
  text-align: right;
  line-height: 1;
}
.recipe-parts .unit {
  font-size: 11px;
  color: var(--text-2);
  font-weight: 400;
  margin-left: 2px;
}

.ratio-bar {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: 8px;
  text-align: center;
  font-size: 13px;
  color: var(--text);
  font-weight: 600;
  letter-spacing: 0.8px;
}

.accuracy {
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
  color: var(--text-2);
}
.accuracy-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.accuracy-de {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--text);
  font-weight: 700;
  margin: 0 2px;
}

.gamut-warning {
  margin-top: 12px;
  padding: 10px 12px;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: 8px;
  color: #B91C1C;
  font-size: 13px;
  line-height: 1.5;
}

.note {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--bg);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.7;
}
.note b { color: var(--text); font-weight: 600; }

.empty {
  text-align: center;
  padding: 48px 16px;
  color: var(--text-2);
  font-size: 14px;
}
.empty-icon {
  width: 64px; height: 64px;
  margin: 0 auto 12px;
  color: var(--text-3);
  display: block;
}
.empty .sub-msg {
  margin-top: 6px;
  color: var(--text-3);
  font-size: 12px;
}

.calculating {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-2);
  font-size: 14px;
}
.spinner {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--link);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
  margin-right: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Bases */
.base-item {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-soft);
  gap: 12px;
}
.base-item:last-child { border-bottom: none; }
.base-swatch {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.06);
  flex-shrink: 0;
}
.base-info { flex: 1; min-width: 0; }
.base-info .name {
  font-size: 14px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.base-info .meta {
  font-size: 12px; color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-top: 2px;
}
.base-actions { display: flex; gap: 2px; }
.icon-btn {
  background: transparent;
  border: none;
  width: 36px; height: 36px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-btn:active { background: var(--bg); color: var(--text); }

/* Tab bar */
.tabbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--surface);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--border-soft);
  display: flex;
  z-index: 50;
  padding-bottom: env(safe-area-inset-bottom, 0);
  box-shadow: 0 -2px 12px rgba(75, 50, 60, 0.04);
}
[data-theme="dark"] .tabbar { box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.3); }
.tabbar-btn {
  flex: 1;
  background: transparent;
  border: none;
  padding: 8px 4px 8px;
  cursor: pointer;
  color: var(--text-2);
  font-size: 10px;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transition: color 0.15s;
}
.tabbar-btn.active { color: var(--text); }
.tabbar-btn svg { width: 24px; height: 24px; }
.tabbar-btn.active svg { stroke-width: 2.4; }

/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  /* 用 dvh 才會扣掉 iOS Chrome / Safari 的工具列高度;不支援的瀏覽器 fallback 到 vh */
  height: 100vh;
  height: 100dvh;
  background: rgba(0,0,0,0.65);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  /* iOS 安全區域(home bar / 動態島)+ 確保不被瀏覽器底部工具列擋到 */
  padding-top: max(16px, env(safe-area-inset-top, 16px));
  padding-bottom: max(16px, env(safe-area-inset-bottom, 16px));
  animation: fadeIn 0.2s ease;
}
.modal-overlay[hidden] { display: none; }
.modal {
  background: var(--surface);
  border-radius: 18px;
  width: 100%;
  max-width: 420px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  animation: scaleIn 0.18s ease;
}
@keyframes scaleIn {
  from { transform: scale(0.94); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.modal-title { font-size: 16px; font-weight: 600; margin: 0; }
.modal-body { padding: 16px; overflow-y: auto; flex: 1; }
.modal-footer {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.modal-footer .btn { flex: 1; }

/* Tabs (in modal) */
.tabs {
  display: flex;
  background: var(--bg);
  border-radius: 8px;
  padding: 3px;
  margin-bottom: 14px;
}
.tabs-btn {
  flex: 1;
  background: transparent;
  border: none;
  padding: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  border-radius: 6px;
  font-family: inherit;
  transition: background 0.15s;
}
.tabs-btn.active {
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
[data-theme="dark"] .tabs-btn.active { background: var(--surface-2); }
.tab-pane[hidden] { display: none; }

.sample-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: 8px;
  margin: 12px 0;
}
.sample-preview .swatch {
  width: 40px; height: 40px;
  border-radius: 8px;
  border: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.sample-preview .info { flex: 1; min-width: 0; }
.sample-preview .info .label {
  font-size: 11px; color: var(--text-2);
}
.sample-preview .info .hex {
  font-size: 14px; font-weight: 600;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--text);
  margin-top: 1px;
}

details {
  border-bottom: 1px solid var(--border-soft);
}
details:last-child { border-bottom: none; }
details summary {
  cursor: pointer;
  padding: 14px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
details summary::-webkit-details-marker { display: none; }
details summary::after {
  content: '›';
  color: var(--text-3);
  transform: rotate(90deg);
  transition: transform 0.2s;
  font-size: 18px;
  line-height: 1;
}
details[open] summary::after { transform: rotate(-90deg); }
details > div {
  padding: 0 0 14px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-2);
}
details > div p { margin: 0 0 8px; }
details > div p:last-child { margin-bottom: 0; }

/* ========== Saved recipes ========== */
.saved-search {
  position: relative;
  margin-bottom: 12px;
}
.saved-search input {
  width: 100%;
  padding: 10px 12px 10px 36px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  font-size: 14px;
  color: var(--text);
  font-family: inherit;
}
.saved-search input:focus { outline: none; border-color: var(--link); }
.saved-search svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  color: var(--text-2);
  pointer-events: none;
}
.saved-list { display: flex; flex-direction: column; gap: 12px; }
.saved-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
  display: flex;
  gap: 12px;
  align-items: center;
  transition: background 0.12s;
}
.saved-card:active { background: var(--bg); }
.saved-card .swatch-pair {
  width: 40px; height: 56px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.05);
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.saved-card .swatch-pair > div { flex: 1; }
.saved-card .body { flex: 1; min-width: 0; }
.saved-card .title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.saved-card .meta {
  font-size: 12px;
  color: var(--text-2);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.saved-card .meta .de {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.saved-card .photo-thumb {
  width: 56px; height: 56px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.05);
  object-fit: cover;
  flex-shrink: 0;
}
.saved-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.saved-tag {
  font-size: 11px;
  color: var(--text-2);
  background: var(--bg);
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid var(--border-soft);
}

.save-toast {
  position: fixed;
  left: 50%;
  bottom: calc(80px + env(safe-area-inset-bottom, 0));
  transform: translateX(-50%);
  background: rgba(38,38,38,0.95);
  color: #fff;
  padding: 10px 18px;
  border-radius: 24px;
  font-size: 13px;
  font-weight: 500;
  z-index: 200;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  animation: toastIn 0.18s ease;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, 6px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.detail-photo-wrap {
  position: relative;
  margin-top: 8px;
}
.detail-photo {
  width: 100%;
  border-radius: 12px;
  display: block;
}
.detail-photo-remove {
  position: absolute;
  top: 8px; right: 8px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.detail-photo-remove svg { width: 16px; height: 16px; }
.detail-add-photo {
  margin-top: 8px;
}
.detail-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
}
.detail-section:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.detail-section .label {
  font-size: 11px;
  color: var(--text-2);
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.detail-section .body-text {
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
  word-break: break-word;
}
.detail-actions-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.detail-actions-row .btn { flex: 1; }
.btn-danger {
  background: var(--danger);
  color: #fff;
}
.btn-danger:active { opacity: 0.85; }

.stale-banner {
  margin-top: 8px;
  padding: 8px 12px;
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: 8px;
  color: #92400E;
  font-size: 12px;
  line-height: 1.5;
}

/* ========== Phase 8: Multi-pick ========== */
.mode-toggle {
  display: inline-flex;
  background: var(--bg);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
  margin-bottom: 8px;
}
.mode-toggle button {
  background: transparent;
  border: none;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}
.mode-toggle button.active {
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.numbered-pin {
  position: absolute;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(38,38,38,0.85);
  color: #fff;
  border: 2px solid #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 6px rgba(0,0,0,0.35);
  z-index: 2;
}
.picks-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding: 10px;
  background: var(--bg);
  border-radius: 10px;
  align-items: center;
}
.picks-strip .pick-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  padding: 4px 6px 4px 4px;
  font-size: 12px;
}
.picks-strip .pick-chip .num {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(38,38,38,0.85);
  color: #fff;
  font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.picks-strip .pick-chip .sw {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.06);
  flex-shrink: 0;
}
.picks-strip .pick-chip .hex {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  color: var(--text-2);
}
.picks-strip .pick-chip .x {
  width: 16px; height: 16px;
  border: none;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  padding: 0;
}
.picks-strip .pick-chip .x:active { color: var(--text); }
.picks-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
}
.picks-actions .btn-mini {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 16px;
  font-size: 11px;
  padding: 4px 10px;
  color: var(--text-2);
  cursor: pointer;
  font-family: inherit;
}
.picks-actions .btn-mini.on { background: var(--text); color: #fff; border-color: var(--text); }

.multi-card {
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 12px;
  margin-top: 10px;
  background: var(--surface);
}
.multi-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 10px;
}
.multi-card-head .num {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(38,38,38,0.85);
  color: #fff;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.multi-card-head .num.midpoint { background: var(--link); }
.multi-card-head .swatches { display: flex; gap: 4px; }
.multi-card-head .sw {
  width: 28px; height: 28px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.06);
}
.multi-card-head .hex-pair {
  font-size: 11px;
  color: var(--text-2);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.multi-card-head .acc {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-2);
}
.multi-card-head .acc .accuracy-de {
  font-size: 12px; color: var(--text); font-weight: 700;
}
.multi-card .recipe-row { padding: 8px 4px; }
.multi-card .ratio-bar {
  margin-top: 8px;
  padding: 8px 10px;
  font-size: 12px;
}
.multi-card-foot {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.multi-card-foot .btn { flex: 1; padding: 8px 12px; font-size: 13px; }
.multi-card-empty {
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
  padding: 20px;
}

/* ========== Phase 10: Portion calculator ========== */
.portion-panel {
  margin-top: 14px;
  padding: 12px;
  background: var(--bg);
  border-radius: 10px;
  border: 1px solid var(--border-soft);
}
.portion-panel summary {
  padding: 4px 0;
  font-weight: 600;
  color: var(--text);
  font-size: 13px;
}
.portion-modes {
  display: flex;
  background: var(--surface);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
  margin-bottom: 12px;
  border: 1px solid var(--border-soft);
}
.portion-modes button {
  flex: 1;
  background: transparent;
  border: none;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  padding: 7px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}
.portion-modes button.active {
  background: var(--bg);
  color: var(--text);
  font-weight: 600;
}
.portion-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 13px;
}
.portion-row label {
  color: var(--text-2);
  font-size: 12px;
  min-width: 64px;
}
.portion-row input, .portion-row select {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
}
.portion-row input:focus, .portion-row select:focus { outline: none; border-color: var(--link); }
.portion-multiplier {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.portion-multiplier button {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 5px 12px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
}
.portion-multiplier button.active {
  background: var(--text);
  color: #fff;
  border-color: var(--text);
}
.portion-output {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border-radius: 8px;
  border: 1px solid var(--border-soft);
}
.portion-output-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 4px 0;
}
.portion-output-row.total {
  border-top: 1px solid var(--border-soft);
  margin-top: 4px;
  padding-top: 8px;
  font-weight: 600;
}
.portion-output-row .name { color: var(--text); display: flex; align-items: center; gap: 6px; }
.portion-output-row .name .dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.06);
}
.portion-output-row .val {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--text);
  font-size: 12px;
}
.portion-hint {
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-2);
  line-height: 1.5;
}

/* ========== Phase 10: UV timer ========== */
.timer-card {
  margin-bottom: 12px;
}
.timer-card .timer-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.timer-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}
.timer-icon svg { width: 22px; height: 22px; }
.timer-info { flex: 1; }
.timer-info .title { font-size: 14px; font-weight: 600; color: var(--text); }
.timer-info .sub { font-size: 12px; color: var(--text-2); margin-top: 2px; }

.timer-modal .modal { max-width: 360px; }
.stopwatch-display {
  text-align: center;
  padding: 24px 0 12px;
}
.stopwatch-time {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 56px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -1px;
  color: var(--text);
  line-height: 1.05;
}
.stopwatch-time .cs {
  font-size: 32px;
  font-weight: 500;
  color: var(--text-2);
}
.stopwatch-status {
  font-size: 12px;
  color: var(--text-2);
  margin-top: 6px;
  letter-spacing: 0.5px;
}
.stopwatch-laps {
  margin-top: 16px;
  max-height: 220px;
  overflow-y: auto;
  border-top: 1px solid var(--border-soft);
  padding-top: 8px;
}
.stopwatch-laps .lap {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: baseline;
  padding: 8px 4px;
  border-bottom: 1px solid var(--border-soft);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}
.stopwatch-laps .lap:last-child { border-bottom: none; }
.stopwatch-laps .lap .num {
  color: var(--text-2);
  font-size: 12px;
  min-width: 28px;
}
.stopwatch-laps .lap .delta {
  color: var(--text);
  font-weight: 500;
}
.stopwatch-laps .lap .total {
  color: var(--text-2);
  font-size: 12px;
}
.stopwatch-laps .lap.fastest .delta { color: var(--accent); }
.stopwatch-laps .lap.slowest .delta { color: #b91c1c; }
.stopwatch-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.stopwatch-actions .btn { flex: 1; }
.btn-large { padding: 14px 16px; font-size: 15px; }

/* =============================================================================
   Home Hero — 調色頁開場（greeting / palette card / action cards / rail / tip）
   ============================================================================= */

.hero {
  padding: 8px 4px 16px;
}
.hero-greeting {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text);
  margin: 0 0 4px;
}
.hero-greeting .wave {
  display: inline-block;
  animation: wave 2.4s ease-in-out infinite;
  transform-origin: 70% 70%;
}
@keyframes wave {
  0%, 60%, 100% { transform: rotate(0deg); }
  10%, 30% { transform: rotate(14deg); }
  20%, 40% { transform: rotate(-8deg); }
  50%      { transform: rotate(10deg); }
}
.hero-sub {
  font-size: 14px;
  color: var(--text-2);
  margin: 0;
  letter-spacing: 0.1px;
}

/* 我的調色盤 brand card */
.palette-card {
  background: linear-gradient(135deg, #fff 0%, #FAFAFA 100%);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.palette-card:active {
  transform: scale(0.99);
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.palette-stack {
  display: flex;
  flex-shrink: 0;
}
.palette-stack .swatch {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.04);
}
.palette-stack .swatch + .swatch {
  margin-left: -10px;
}
.palette-stack .more {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--bg);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -10px;
}
.palette-info { flex: 1; min-width: 0; }
.palette-info .title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.palette-info .meta {
  font-size: 12px;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.palette-info .status-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  margin-right: 2px;
}
.palette-info .status-dot.ok { background: var(--success); }
.palette-info .status-dot.warn { background: var(--warning); }
.palette-arrow {
  color: var(--text-3);
  flex-shrink: 0;
}

/* 雙主動作卡 */
.action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.action-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 18px 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  font-family: inherit;
  text-align: left;
  transition: transform 0.12s ease, border-color 0.12s ease;
  position: relative;
  overflow: hidden;
}
.action-card:active {
  transform: scale(0.98);
  border-color: var(--border);
}
.action-card.active {
  border-color: var(--text);
  box-shadow: 0 0 0 1px var(--text) inset;
}
.action-card .emoji {
  font-size: 26px;
  line-height: 1;
}
.action-card .title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.1px;
}
.action-card .sub {
  font-size: 11px;
  color: var(--text-2);
  margin: 0;
  line-height: 1.4;
}
.action-card .accent-bar {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), #FFB347);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.action-card.image .accent-bar {
  background: linear-gradient(90deg, #6366F1, #06B6D4);
}
.action-card.hex .accent-bar {
  background: linear-gradient(90deg, var(--accent), #F97316);
}
.action-card.active .accent-bar { opacity: 1; }

/* 最近收藏 rail */
.rail-section {
  margin-bottom: 16px;
}
.rail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 8px;
}
.rail-header .title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.rail-header .more-link {
  font-size: 12px;
  color: var(--link);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.rail-header .more-link:active { color: var(--link-hover); }
.rail-track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 0 4px 4px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.rail-track::-webkit-scrollbar { display: none; }
.rail-track { scrollbar-width: none; }
.rail-item {
  flex: 0 0 auto;
  width: 110px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 8px;
  cursor: pointer;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform 0.12s ease;
}
.rail-item:active { transform: scale(0.97); }
.rail-item .pair {
  display: flex;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.05);
}
.rail-item .pair > div { flex: 1; }
.rail-item .name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}
.rail-item .meta {
  font-size: 10px;
  color: var(--text-2);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  line-height: 1;
}
.rail-empty {
  flex: 0 0 auto;
  width: 100%;
  padding: 16px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  text-align: center;
  font-size: 12px;
  color: var(--text-3);
}

/* 小知識 tip card */
.tip-card {
  background: linear-gradient(135deg, #FFF7ED 0%, #FEF3C7 100%);
  border: 1px solid #FDE68A;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 16px;
  cursor: pointer;
  transition: transform 0.12s ease;
}
.tip-card:active { transform: scale(0.99); }
.tip-card .emoji {
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1.4;
}
.tip-card .body { flex: 1; min-width: 0; }
.tip-card .label {
  font-size: 11px;
  font-weight: 700;
  color: #92400E;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.tip-card .text {
  font-size: 13px;
  color: #78350F;
  line-height: 1.55;
  margin: 0;
}

/* picker 子區塊：點下行動卡片才展開 */
.picker-section {
  margin-bottom: 12px;
  animation: fadeIn 0.18s ease;
}

/* =============================================================================
   Responsive
   - 通用防呆：避免長字串撐爆 flex 容器
   - max-width: 380px：iPhone SE/mini、窄 Android
   - max-height: 600px landscape：橫螢幕手機
   - min-width: 768px：平板 / 桌機
   ============================================================================= */

/* 通用：flex 子元素含文字時允許縮 + 長字串可斷行 */
.pick-chip,
.timer-info,
.multi-card-head .hex-pair { min-width: 0; }
.compare-cell .hex,
.saved-card .meta,
.multi-card-head .hex-pair { overflow-wrap: anywhere; }
.recipe-info .sub,
.detail-section .body-text { overflow-wrap: anywhere; word-break: break-word; }

/* multi-card-head：在窄螢幕讓 ΔE 自動換到第二行 */
.multi-card-head { flex-wrap: wrap; row-gap: 6px; }
.multi-card-head .acc {
  margin-left: 0;
  width: 100%;
  text-align: right;
}
@media (min-width: 420px) {
  .multi-card-head .acc {
    margin-left: auto;
    width: auto;
    text-align: left;
  }
}

/* 平板 / 桌機（≥ 768px） */
@media (min-width: 768px) {
  main { max-width: 720px; }
  .modal { max-width: 480px; }
  .view { padding: 16px 20px 32px; }
  .card { padding: 20px; }
  .compare-cell .swatch { height: 112px; }
  .saved-card { padding: 14px; }
  .saved-card .swatch-pair { width: 48px; height: 64px; }

  .hero-greeting { font-size: 24px; }
  .palette-stack .swatch,
  .palette-stack .more { width: 32px; height: 32px; }
  .action-card { padding: 22px 18px; }
  .action-card .emoji { font-size: 30px; }
  .action-card .title { font-size: 16px; }
  .rail-item { width: 130px; }
  .rail-item .pair { height: 64px; }
}

/* 大桌機（≥ 1024px）— 加寬一點點，但不無限變寬 */
@media (min-width: 1024px) {
  main { max-width: 760px; }
}

/* 小手機（≤ 380px）— iPhone SE 1st gen / mini / 老 Android */
@media (max-width: 380px) {
  .view { padding: 10px 12px 20px; }
  .card { padding: 14px; margin-bottom: 10px; }
  .view-header { padding: 6px 0 10px; min-height: 40px; }
  .view-header h1 { font-size: 18px; }

  .compare-cell .label { padding: 8px 10px 4px; font-size: 10px; }
  .compare-cell .swatch { height: 72px; margin: 0 10px; }
  .compare-cell .hex { padding: 6px 10px 10px; font-size: 11px; }

  .recipe-row { padding: 10px 2px; gap: 10px; }
  .color-dot { width: 22px; height: 22px; }
  .recipe-info .name { font-size: 13px; }
  .recipe-parts { font-size: 16px; }
  .ratio-bar { padding: 8px 10px; font-size: 12px; }

  .btn { padding: 9px 14px; font-size: 13px; }
  .detail-actions-row { gap: 6px; }
  .detail-actions-row .btn,
  .multi-card-foot .btn { padding: 8px 10px; font-size: 12px; }

  .mode-toggle button { padding: 6px 10px; font-size: 12px; }

  .picks-strip { padding: 8px; gap: 6px; }
  .pick-chip { padding: 3px 5px 3px 3px; font-size: 11px; }
  .pick-chip .num,
  .pick-chip .sw { width: 16px; height: 16px; font-size: 9px; }
  .picks-actions .btn-mini { padding: 4px 8px; font-size: 10px; }

  .multi-card { padding: 10px; }
  .multi-card-head { gap: 8px; padding-bottom: 8px; margin-bottom: 8px; }
  .multi-card-head .num { width: 22px; height: 22px; font-size: 11px; }
  .multi-card-head .swatches .sw { width: 22px; height: 22px; }
  .multi-card-head .hex-pair { font-size: 10px; }

  .saved-card { padding: 10px; gap: 10px; }
  .saved-card .swatch-pair { width: 32px; height: 48px; }
  .saved-card .photo-thumb { width: 48px; height: 48px; }
  .saved-card .meta { gap: 6px; font-size: 11px; }

  .base-item { padding: 10px; gap: 10px; }
  .base-swatch { width: 36px; height: 36px; }
  .icon-btn { width: 32px; height: 32px; }

  .modal { border-radius: 14px; }
  .modal-body { padding: 14px; }
  .modal-header { padding: 12px 14px; }
  .modal-footer { padding: 10px 14px; }

  .stopwatch-time { font-size: 44px; }
  .stopwatch-time .cs { font-size: 26px; }
  .stopwatch-laps { max-height: 160px; }

  .portion-panel { padding: 10px; }
  .portion-output-row { font-size: 12px; }
  .portion-row label { min-width: 56px; font-size: 11px; }

  .tabbar-btn { font-size: 9px; }
  .tabbar-btn svg { width: 22px; height: 22px; }

  /* Home Hero compact */
  .hero { padding: 4px 2px 12px; }
  .hero-greeting { font-size: 19px; }
  .hero-sub { font-size: 13px; }
  .palette-card { padding: 12px 14px; gap: 12px; }
  .palette-stack .swatch,
  .palette-stack .more { width: 24px; height: 24px; }
  .action-grid { gap: 8px; }
  .action-card { padding: 14px 12px; gap: 8px; }
  .action-card .emoji { font-size: 22px; }
  .action-card .title { font-size: 14px; }
  .action-card .sub { font-size: 10px; }
  .rail-item { width: 96px; }
  .rail-item .pair { height: 48px; }
  .tip-card { padding: 10px 12px; }
  .tip-card .text { font-size: 12px; }
}

/* 橫螢幕手機 — modal 不要超出螢幕、碼表縮小 */
@media (max-height: 600px) and (orientation: landscape) {
  .modal {
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }
  .modal-body { padding: 12px 16px; }
  .stopwatch-time { font-size: 38px; }
  .stopwatch-time .cs { font-size: 22px; }
  .stopwatch-display { padding: 8px 0 6px; }
  .stopwatch-laps { max-height: 100px; }
  .compare-cell .swatch { height: 72px; }
}

/* =============================================================================
   圖庫(材料 / 美甲靈感)
   ============================================================================= */
.lib-segmented { margin-top: 4px; margin-bottom: 12px; }

.lib-toolbar { margin-bottom: 10px; }

.lib-chips-label {
  font-size: 11px;
  color: var(--text-2);
  margin: 6px 0 4px;
  font-weight: 500;
}
.lib-chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 2px 0 8px;
  margin: 0 -2px 8px;
}
.lib-chips::-webkit-scrollbar { display: none; }
.lib-chips-pick {
  flex-wrap: wrap;
  overflow-x: visible;
}

.chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.chip:active { background: var(--bg); }
.chip.active {
  background: var(--text);
  color: #fff;
  border-color: var(--text);
}
.chip-n {
  font-size: 11px;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}
.chip.active .chip-n { opacity: 0.85; }

.lib-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 4px;
}
@media (min-width: 480px) {
  .lib-grid { grid-template-columns: repeat(3, 1fr); }
}

.lib-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.lib-card:active {
  transform: scale(0.98);
}
.lib-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--bg);
  overflow: hidden;
}
.lib-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lib-info { padding: 8px 10px 10px; }
.lib-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lib-meta {
  font-size: 11px;
  color: var(--text-2);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lib-empty {
  padding: 36px 16px;
  font-size: 14px;
  color: var(--text-2);
  text-align: center;
}
.lib-empty[hidden] { display: none; }

.lib-pane[hidden] { display: none; }

/* Modal preview (材料 / 靈感 共用) */
.lib-preview {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 280px;
}
.lib-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.lib-preview-empty {
  color: var(--text-2);
  font-size: 13px;
}

/* chip 上的「✏️ 管理」鈕 */
.chip-manage {
  padding: 6px 10px;
  font-size: 13px;
}
.chip-manage:active { background: var(--bg); }

/* 分類管理 modal */
.cat-mgr-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px 0;
}
.cat-mgr-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: var(--bg);
  border-radius: 8px;
  font-size: 14px;
}
.cat-mgr-name {
  color: var(--text);
  font-weight: 500;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cat-mgr-del {
  background: transparent;
  border: none;
  color: var(--text-3);
  font-size: 22px;
  line-height: 1;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 8px;
}
.cat-mgr-del:hover, .cat-mgr-del:active {
  background: var(--bg);
  color: var(--danger);
}
.cat-mgr-empty {
  text-align: center;
  color: var(--text-2);
  padding: 24px 0;
  font-size: 13px;
}

/* 「從靈感圖庫挑一張」action 連結 */
.action-card-link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.15s;
}
.action-card-link:active { background: var(--bg); }
.action-card-link .emoji { font-size: 22px; flex-shrink: 0; }
.action-card-link .text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.action-card-link .title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.action-card-link .sub {
  font-size: 12px;
  color: var(--text-2);
  margin-top: 2px;
}
.action-card-link .arrow {
  color: var(--text-3);
  font-size: 18px;
  flex-shrink: 0;
}

/* 作品紀錄 — 編輯 modal 內的步驟 */
.work-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin: 18px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-soft);
}
.step-card {
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
}
.step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.step-no {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface);
  border-radius: 999px;
  padding: 2px 8px;
}
.step-actions { display: flex; gap: 4px; }
.step-icon-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: var(--surface);
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-2);
  font-family: inherit;
}
.step-icon-btn:active { background: var(--border-soft); }
.step-icon-btn.step-del { color: var(--danger); }

.step-title { margin-bottom: 8px; }

.step-photo {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--surface);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.step-photo-empty { color: var(--text-3); font-size: 12px; }
.step-photo-btn { font-size: 13px; padding: 8px 12px; }

.step-mats { padding: 0; margin: 0; flex-wrap: wrap; }

/* 作品詳細頁 */
.work-detail-cover {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 380px;
  background: var(--bg);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.work-detail-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.work-detail-title {
  font-size: 18px;
  font-weight: 700;
  margin: 4px 0 4px;
}
.work-detail-date {
  font-size: 12px;
  color: var(--text-2);
  margin-bottom: 8px;
}
.work-detail-note {
  font-size: 13px;
  color: var(--text);
  background: var(--bg);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  white-space: pre-wrap;
}
.work-detail-section {
  font-size: 13px;
  font-weight: 700;
  margin: 16px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-soft);
}

.step-d-card {
  background: var(--bg);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
}
.step-d-head {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.step-d-photo {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 8px;
}
.step-d-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.step-d-recipe {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--surface);
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 6px;
}
.step-d-swatch {
  width: 22px; height: 22px; border-radius: 6px;
  border: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.step-d-recipe-text {
  font-size: 13px;
  color: var(--text);
  padding: 6px 10px;
  background: var(--surface);
  border-radius: 6px;
  margin-bottom: 6px;
  white-space: pre-wrap;
}
.step-d-mats {
  font-size: 13px;
  color: var(--text);
  margin: 6px 0;
}
.step-d-mats b { color: var(--text-2); margin-right: 4px; }
.step-d-note {
  font-size: 12px;
  color: var(--text-2);
  margin-top: 6px;
  white-space: pre-wrap;
}

.lib-thumb-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: var(--text-3);
}

/* ===== 圖庫:每個 pane 內部的 toolbar(取代擠在 view-header 的按鈕) ===== */
.lib-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.lib-toolbar-end { justify-content: flex-end; }
.lib-add-btn {
  white-space: nowrap;
  flex-shrink: 0;
  padding: 8px 14px;
  font-size: 13px;
}

/* ===== 計劃 ===== */
/* 計劃卡片:狀態 badge */
.plan-status {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.plan-status-draft     { background: var(--bg-2); color: var(--text-2); }
.plan-status-active    { background: var(--accent-soft); color: var(--accent); }
.plan-status-completed { background: rgba(127, 176, 105, 0.15); color: var(--success); }
.plan-meta-rest { color: var(--text-2); }

/* 計劃編輯:靈感多選 grid */
.plan-insp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  max-height: 300px;
  overflow-y: auto;
  padding: 4px 2px;
  background: var(--bg);
  border-radius: 8px;
}
.plan-insp-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  background: var(--surface);
}
.plan-insp-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plan-insp-tile.selected { border-color: var(--link); }
.plan-insp-check {
  position: absolute;
  top: 4px; right: 4px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--link);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s;
}
.plan-insp-tile.selected .plan-insp-check { opacity: 1; }

/* 計劃詳細頁 */
.plan-d-status {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  letter-spacing: 0.3px;
}
.plan-d-insps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 6px;
}
.plan-d-insp {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg);
}
.plan-d-insp img { width: 100%; height: 100%; object-fit: cover; }
.plan-d-insp-name {
  display: none; /* 太擠就先隱藏 */
}
.plan-d-times {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.plan-d-time-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 12px;
  background: var(--bg);
  border-radius: 8px;
  font-size: 13px;
}
.plan-d-time-dur {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.plan-d-time-when {
  font-size: 12px;
  color: var(--text-2);
}

/* 計劃 detail footer 三顆按鈕 */
.plan-detail-footer .btn { flex: 1; }

/* =============================================================================
   我的 view — 卡片 / 主題切換 / 入口
   ============================================================================= */
.me-card {
  padding: 14px 16px;
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-soft);
}
.me-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.me-card-icon { font-size: 18px; line-height: 1; }
.me-card-title { font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: 0.3px; }

/* 主題切換 3 顆按鈕 */
.theme-switcher {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  background: var(--bg-2);
  padding: 4px;
  border-radius: 12px;
}
.theme-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 4px;
  background: transparent;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  font-family: inherit;
  transition: background 0.18s, color 0.18s, transform 0.18s;
}
.theme-btn:active { transform: scale(0.96); }
.theme-btn.active {
  background: var(--surface);
  color: var(--text);
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}
.theme-btn-emoji { font-size: 18px; line-height: 1; }

/* 我的 view 的入口卡片(基底色 / 碼表) */
.me-entry-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  cursor: pointer;
  border-radius: 16px;
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s, box-shadow 0.15s;
}
.me-entry-card:active {
  transform: scale(0.99);
  box-shadow: var(--shadow-md);
}
.me-entry-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.me-entry-icon svg { width: 22px; height: 22px; }
.me-entry-info { flex: 1; min-width: 0; }
.me-entry-info .title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}
.me-entry-info .sub {
  font-size: 12px;
  color: var(--text-2);
}
.me-entry-arrow { color: var(--text-3); flex-shrink: 0; }

/* 視圖標頭 — 帶返回按鈕版本 */
.view-header-back {
  display: flex;
  align-items: center;
  gap: 8px;
}
.back-btn {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.back-btn:active { background: var(--bg-2); }
.view-header-back h1 { flex: 1; }

/* 紀錄 view — segmented control 縮一點 */
.record-segmented { margin-bottom: 14px; }

/* 卡片整體稍微圓潤一點 */
.card {
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}

/* 大標題質感調整 — 微微增加字距,更精緻 */
.view-header h1 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.3px;
}

/* =============================================================================
   色彩校正 (Phase 9 MVP)
   ============================================================================= */
.calib-status {
  font-size: 13px;
  color: var(--text-2);
  background: var(--bg-2);
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 4px;
}
.calib-status-on {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.calib-card-wrap {
  width: 100%;
  background: var(--bg-2);
  border-radius: 10px;
  overflow: hidden;
  padding: 8px;
}
.calib-card-wrap canvas {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

.calib-photo-wrap {
  position: relative;
  width: 100%;
  margin-top: 10px;
  background: var(--bg-2);
  border-radius: 10px;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.calib-photo-wrap canvas {
  width: 100%;
  height: auto;
  display: block;
  cursor: crosshair;
}
.calib-pin-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.calib-pin {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.4);
}

.calib-progress {
  font-size: 13px;
  color: var(--text);
  background: var(--bg-2);
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 8px;
  font-weight: 500;
}

.calib-target-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.calib-target-sw {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid var(--border);
  display: inline-block;
  flex-shrink: 0;
}
.calib-target-done { opacity: 0.6; }
.calib-target-done.active { opacity: 1; }

.calib-preview {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.calib-pv-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--bg-2);
  border-radius: 8px;
  font-size: 12px;
}
.calib-pv-label {
  font-weight: 700;
  color: var(--text);
  width: 24px;
  flex-shrink: 0;
}
.calib-pv-sw {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.calib-pv-arrow {
  color: var(--text-3);
  font-size: 11px;
}
.calib-pv-de {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  font-size: 11px;
}

/* =============================================================================
   v10 — 修正 / 新功能
   ============================================================================= */

/* 日期輸入框寬度修正
   注意:不能用 -webkit-appearance: none,iOS Safari/Chrome 會把
   原本的「年/月/日」placeholder 隱藏,空值時看不到任何提示。
   改用 box-sizing + max-width + min-width:0 處理寬度溢出。 */
input[type="date"], input[type="time"], input[type="datetime-local"], .input-date {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font-size: 13px;
  min-height: 36px;
}
.input-date::-webkit-date-and-time-value {
  text-align: left;
  min-width: 0;
}

/* 兩欄並排(計劃日期 / 預計實行) — 窄螢幕自動換成單欄避免 iOS 中文日期撐開 */
.row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.row-2 .field { margin-bottom: 0; min-width: 0; }
@media (max-width: 400px) {
  .row-2 { grid-template-columns: 1fr; gap: 6px; }
}

/* btn-icon-only:純 icon 鈕 */
.btn-icon-only {
  flex: 0 0 auto !important;
  padding: 10px 12px;
  width: auto;
}
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:active { opacity: 0.85; }
.btn svg { flex-shrink: 0; }

/* lib-icon-btn:工具列上的純 icon 按鈕(日曆 / 篩選) */
.lib-icon-btn {
  padding: 8px 10px;
  flex-shrink: 0;
}

/* 日期區間搜尋列 — 改用兩行排版,完全避開 iOS input 內建寬度問題 */
.plans-date-toolbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "lf inf"
    "lt int"
    ".  btn";
  column-gap: 6px;
  row-gap: 4px;
  align-items: center;
}
.plans-date-toolbar > .plans-date-label:nth-of-type(1) { grid-area: lf; }
.plans-date-toolbar > .plans-date-label:nth-of-type(2) { grid-area: lt; }
.plans-date-toolbar > .date-wrap:nth-of-type(1) { grid-area: inf; }
.plans-date-toolbar > .date-wrap:nth-of-type(2) { grid-area: int; }
.plans-date-toolbar > .btn-ghost { grid-area: btn; justify-self: end; }

/* 包住 input + placeholder overlay 的容器 */
.plans-date-toolbar .date-wrap {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: 8px;
}
.plans-date-toolbar .plans-date-input,
.plans-date-toolbar .date-wrap > .plans-date-input {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 8px 6px;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
}
.plans-date-toolbar .date-ph {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  pointer-events: none;
  color: var(--text-3);
  font-size: 13px;
  background: var(--surface);
  padding: 2px 0;
  z-index: 1;
}
.plans-date-toolbar .date-ph[hidden] { display: none !important; }
.plans-date-toolbar .plans-date-label {
  font-size: 12px;
  color: var(--text-2);
  font-weight: 600;
  padding: 0 2px;
}
.plans-date-toolbar .btn-ghost {
  font-size: 12px;
  padding: 6px 8px;
  white-space: nowrap;
}

/* 深色模式 — 修正寫死 #fff 的卡片變成低對比 */
[data-theme="dark"] .palette-card {
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
  border-color: var(--border);
}
[data-theme="dark"] .palette-stack .swatch,
[data-theme="dark"] .palette-stack .more { border-color: var(--surface-2); }
[data-theme="dark"] .palette-stack .more { background: var(--bg-2); color: var(--text-2); }

[data-theme="dark"] .tip-card {
  background: linear-gradient(135deg, rgba(240,183,112,0.10) 0%, rgba(216,169,142,0.18) 100%);
  border-color: var(--warning);
}
[data-theme="dark"] .tip-card .label,
[data-theme="dark"] .tip-card .text { color: var(--warning); }

/* 深色模式 — 把所有用 border-soft 的卡片改用更亮的 border */
[data-theme="dark"] .card,
[data-theme="dark"] .lib-card,
[data-theme="dark"] .action-card,
[data-theme="dark"] .action-card-link,
[data-theme="dark"] .me-card,
[data-theme="dark"] .me-entry-card,
[data-theme="dark"] .saved-card,
[data-theme="dark"] .step-card,
[data-theme="dark"] .step-recipe-item,
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer,
[data-theme="dark"] .work-section-title {
  border-color: var(--border);
}
[data-theme="dark"] .modal-header { border-bottom-color: var(--border); }
[data-theme="dark"] .modal-footer { border-top-color: var(--border); }
[data-theme="dark"] .work-section-title,
[data-theme="dark"] .work-detail-section { border-bottom-color: var(--border); }
[data-theme="dark"] .btn-secondary { border-color: var(--border); }
[data-theme="dark"] .input,
[data-theme="dark"] .select { border-color: var(--border); }

/* ===== 美妝模式 — 整套設計改頭換面,從美甲的「暖米 + 玫瑰金」
   換成美妝的「奶油桃 + 深莓紫 + 古銅金」,連背景 / 圓角 / 字體都換 ===== */

/* 淺色:奶油桃底 + 深莓紫 accent */
[data-app-mode="beauty"]:root,
:root[data-app-mode="beauty"] {
  --bg:           #FAF1EA;   /* 奶油桃 */
  --bg-2:         #F2E0D6;   /* 略深的桃 */
  --surface:      #FFFAF5;   /* 象牙白 */
  --surface-2:    #FAF1EA;
  --text:         #3A2330;   /* 深莓紫 */
  --text-2:       #84596F;   /* 莓灰 */
  --text-3:       #C0A0B2;
  --border:       #E5CCD8;
  --border-soft:  #F0DEE3;
  --accent:       #8E3A60;   /* 莓果紫紅 */
  --accent-soft:  #F4DEEB;
  --rose-gold:    #C68C6E;   /* 古銅金 */
  --link:         #722D4D;
  --link-hover:   #8E3A60;
  --shadow-sm:    0 1px 2px rgba(58, 35, 48, 0.08);
  --shadow-md:    0 4px 14px rgba(58, 35, 48, 0.10);
  --shadow-lg:    0 12px 32px rgba(58, 35, 48, 0.16);
}

/* 深色:深莓黑 + 淺粉紫 accent */
[data-theme="dark"][data-app-mode="beauty"] {
  --bg:           #1A0F18;
  --bg-2:         #251925;
  --surface:      #2A1D2A;
  --surface-2:    #342435;
  --text:         #F4E8EE;
  --text-2:       #D2B5C5;
  --text-3:       #92778A;
  --border:       #5A4154;
  --border-soft:  #463141;
  --accent:       #D8A4C4;
  --accent-soft:  #3B2434;
  --rose-gold:    #C99AB4;
  --link:         #D8A4C4;
  --link-hover:   #E8C0D6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme])[data-app-mode="beauty"] {
    --bg:           #1A0F18;
    --bg-2:         #251925;
    --surface:      #2A1D2A;
    --surface-2:    #342435;
    --text:         #F4E8EE;
    --text-2:       #D2B5C5;
    --text-3:       #92778A;
    --border:       #5A4154;
    --border-soft:  #463141;
    --accent:       #D8A4C4;
    --accent-soft:  #3B2434;
    --rose-gold:    #C99AB4;
    --link:         #D8A4C4;
    --link-hover:   #E8C0D6;
  }
}

/* 美妝模式 — 主要標題用襯線字增加優雅感 */
[data-app-mode="beauty"] body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei", sans-serif;
}
[data-app-mode="beauty"] .view-header h1,
[data-app-mode="beauty"] .modal-title,
[data-app-mode="beauty"] .work-detail-title,
[data-app-mode="beauty"] .hero-greeting,
[data-app-mode="beauty"] .me-card-title {
  font-family: "Noto Serif TC", "Source Han Serif", "Songti TC", "PingFang TC", serif;
  letter-spacing: 0.5px;
  font-weight: 700;
}

/* 美妝模式 — 圓角更俐落、邊框更細緻、按鈕更扁平 */
[data-app-mode="beauty"] .card,
[data-app-mode="beauty"] .me-card,
[data-app-mode="beauty"] .me-entry-card,
[data-app-mode="beauty"] .lib-card,
[data-app-mode="beauty"] .palette-card,
[data-app-mode="beauty"] .saved-card { border-radius: 6px; }
[data-app-mode="beauty"] .modal { border-radius: 10px; }
[data-app-mode="beauty"] .btn { border-radius: 4px; }
[data-app-mode="beauty"] .input,
[data-app-mode="beauty"] .select { border-radius: 4px; }
[data-app-mode="beauty"] .chip { border-radius: 999px; }

/* 美妝模式 — 加上一條細緻的金色 hero accent */
[data-app-mode="beauty"] .hero-greeting::before {
  content: "✦";
  margin-right: 6px;
  color: var(--rose-gold);
  font-size: 0.7em;
  vertical-align: middle;
}

/* 美妝模式 — 主按鈕用實色填色更有刊登感 */
[data-app-mode="beauty"] .btn-primary {
  background: var(--accent);
  color: #FFFAF5;
  letter-spacing: 0.4px;
}
[data-theme="dark"][data-app-mode="beauty"] .btn-primary {
  background: var(--accent);
  color: var(--bg);
}

/* 美妝模式 — tab bar 線條感更纖細 */
[data-app-mode="beauty"] .tabbar-btn { font-weight: 500; letter-spacing: 0.4px; }
[data-app-mode="beauty"] .tabbar-btn svg { stroke-width: 1.6; }
[data-app-mode="beauty"] .tabbar-btn.active svg { stroke-width: 2; }

/* 美妝模式 — 隱藏整個調色 + 紀錄(美妝目前只用圖庫 + 我的) */
[data-app-mode="beauty"] .tabbar-btn[data-view="mix"] { display: none !important; }
[data-app-mode="beauty"] .tabbar-btn[data-view="record"] { display: none !important; }

/* 圖庫頁顯示一條 mode 指示條 */
.lib-mode-stripe {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: var(--accent-soft);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  font-size: 13px;
  color: var(--accent);
  font-weight: 600;
}
.lib-mode-stripe .lib-mode-emoji { font-size: 18px; }
.lib-mode-stripe .lib-mode-sub {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-2);
  margin-left: auto;
}
[data-theme="dark"] .lib-mode-stripe { color: var(--text); }

/* 主題切換 — 深色下 .theme-btn.active 的 surface 跟容器 bg-2 同色,
   看不出哪個被選中。用 surface-2(淺一階)+ accent 邊框,不要全粉太突兀 */
[data-theme="dark"] .theme-switcher { background: var(--bg); }
[data-theme="dark"] .theme-btn.active {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--accent);
}
[data-theme="dark"] .theme-btn { color: var(--text-2); border: 1px solid transparent; }

/* 自動深色模式 — 鏡像 [data-theme="dark"] 的關鍵修正 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .palette-card {
    background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
    border-color: var(--border);
  }
  :root:not([data-theme]) .tip-card {
    background: linear-gradient(135deg, rgba(240,183,112,0.10) 0%, rgba(216,169,142,0.18) 100%);
    border-color: var(--warning);
  }
  :root:not([data-theme]) .tip-card .label,
  :root:not([data-theme]) .tip-card .text { color: var(--warning); }
  :root:not([data-theme]) .chip.active,
  :root:not([data-theme]) .portion-multiplier button.active,
  :root:not([data-theme]) .picks-actions .btn-mini.on {
    background: var(--accent);
    color: var(--bg);
    border-color: var(--accent);
  }
  :root:not([data-theme]) .btn-primary { color: var(--bg); }
  :root:not([data-theme]) .tabs-btn.active {
    background: var(--surface-2);
    color: var(--text);
  }
  :root:not([data-theme]) .card,
  :root:not([data-theme]) .lib-card,
  :root:not([data-theme]) .action-card,
  :root:not([data-theme]) .action-card-link,
  :root:not([data-theme]) .me-card,
  :root:not([data-theme]) .me-entry-card,
  :root:not([data-theme]) .saved-card,
  :root:not([data-theme]) .step-card,
  :root:not([data-theme]) .step-recipe-item,
  :root:not([data-theme]) .modal-header,
  :root:not([data-theme]) .modal-footer {
    border-color: var(--border);
  }
  :root:not([data-theme]) .step-card,
  :root:not([data-theme]) .step-d-card,
  :root:not([data-theme]) .step-recipe-item { background: var(--bg-2); }
  :root:not([data-theme]) .saved-tag { background: var(--bg-2); color: var(--text-2); border-color: var(--border); }
  :root:not([data-theme]) .note { background: var(--bg-2); border-color: var(--border); color: var(--text-2); }
  :root:not([data-theme]) .hint { color: var(--text-2); }
  :root:not([data-theme]) .theme-switcher { background: var(--bg); }
  :root:not([data-theme]) .theme-btn.active {
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--accent);
  }
  :root:not([data-theme]) .theme-btn { color: var(--text-2); border: 1px solid transparent; }
}

/* ===== 深色模式 — 修正 white-on-light 對比災難 =====
   原本以 var(--text) 當背景 + #fff 當文字的 active 樣式,
   在深色下 var(--text) 是淺色奶油色,白字會直接看不見。
   深色 accent (#E89BAA) 是淺粉,白字對比也只 2.2:1 不夠 AA;
   改用深色文字(var(--bg))在 accent 粉底上,對比 8.7:1 過 AAA。 */
[data-theme="dark"] .chip.active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
[data-theme="dark"] .portion-multiplier button.active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
[data-theme="dark"] .picks-actions .btn-mini.on {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
/* btn-primary 在深色時 bg 是 #E89BAA(亮粉),白字對比不夠;改用深色文字 */
[data-theme="dark"] .btn-primary { color: var(--bg); }
[data-theme="dark"] .btn-primary svg { stroke: var(--bg); }

/* tabs-btn 非 active 在深色下要看得見 */
[data-theme="dark"] .tabs-btn { color: var(--text-2); }
[data-theme="dark"] .tabs-btn.active {
  background: var(--surface-2);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

/* tabbar 的非 active 圖示加亮 */
[data-theme="dark"] .tabbar-btn { color: var(--text-3); }
[data-theme="dark"] .tabbar-btn.active { color: var(--text); }

/* 收藏卡上的 tag,深色下原本用淺粉灰文字幾乎看不到 */
[data-theme="dark"] .saved-tag {
  background: var(--bg-2);
  color: var(--text-2);
  border-color: var(--border);
}

/* 步驟卡 step-card 是 var(--bg) 跟頁面同色,加 surface-2 對比 */
[data-theme="dark"] .step-card { background: var(--bg-2); border-color: var(--border); }
[data-theme="dark"] .step-no { background: var(--bg); color: var(--text-2); }
[data-theme="dark"] .step-d-card { background: var(--bg-2); }

/* mode-toggle / portion-modes 的 active 鈕 */
[data-theme="dark"] .mode-toggle button.active,
[data-theme="dark"] .portion-modes button.active {
  background: var(--surface-2);
  color: var(--text);
  font-weight: 700;
}

/* hint / 提示文字 — text-3 在深色下可能太淡,加深一階 */
[data-theme="dark"] .hint { color: var(--text-2); }

/* recipe-row-no / step-recipe-item 的 badge */
[data-theme="dark"] .step-recipe-item .recipe-row-no {
  background: var(--bg-2);
  color: var(--text-2);
}
[data-theme="dark"] .step-recipe-item { background: var(--bg-2); }

/* 計劃狀態 badge */
[data-theme="dark"] .plan-status-draft { background: var(--bg-2); color: var(--text-2); }

/* 日曆當日已選背景在深色下也用 accent,白字對比 OK */
[data-theme="dark"] .cal-day { background: var(--bg-2); border-color: var(--border-soft); }
[data-theme="dark"] .cal-day.is-other { background: transparent; border-color: transparent; }

/* details / summary */
[data-theme="dark"] details { border-bottom-color: var(--border); }

/* note / 大段提示文字區 */
[data-theme="dark"] .note {
  background: var(--bg-2);
  border-color: var(--border);
  color: var(--text-2);
}

/* gamut-warning */
[data-theme="dark"] .gamut-warning {
  background: rgba(233,107,124,0.10);
  border-color: var(--danger);
  color: var(--danger);
}

/* 計算中 spinner 的訊息 */
[data-theme="dark"] .calculating { color: var(--text-2); }

/* 收藏列表卡片 hover/active */
[data-theme="dark"] .saved-card:active { background: var(--bg-2); }

/* sample-preview 預覽區 */
[data-theme="dark"] .sample-preview { background: var(--bg-2); border: 1px solid var(--border); }

[data-theme="dark"] .stale-banner {
  background: rgba(240,183,112,0.10);
  border-color: var(--border);
  color: var(--warning);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .palette-card {
    background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
    border-color: var(--border);
  }
  :root:not([data-theme]) .palette-stack .swatch,
  :root:not([data-theme]) .palette-stack .more { border-color: var(--surface-2); }
  :root:not([data-theme]) .palette-stack .more { background: var(--bg-2); color: var(--text-2); }
  :root:not([data-theme]) .tip-card {
    background: linear-gradient(135deg, rgba(240,183,112,0.10) 0%, rgba(216,169,142,0.18) 100%);
    border-color: var(--border);
  }
}

/* 計劃 3 區塊 */
.plans-section { margin-bottom: 18px; }
.plans-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.plans-section-head .plans-section-dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.plans-section-head .plans-section-count {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-2);
  background: var(--bg-2);
  padding: 1px 8px;
  border-radius: 999px;
  margin-left: auto;
}
.plans-section-active   .plans-section-dot { background: var(--danger); animation: dotPulse 1.6s ease-in-out infinite; }
.plans-section-pending  .plans-section-dot { background: var(--warning); }
.plans-section-done     .plans-section-dot { background: var(--success); }
@keyframes dotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(1.25); }
}
.plans-section-empty {
  font-size: 12px;
  color: var(--text-3);
  padding: 10px 4px;
}

/* 計劃卡片 — 顯示日期 / 完成日期 */
.lib-card .plan-when {
  font-size: 11px;
  color: var(--text-2);
  margin-top: 2px;
}

/* 計劃詳細 — 在計時中時的 timer panel */
.plan-d-timer {
  margin: 4px 0 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--accent-soft), var(--bg-2));
  border-radius: 14px;
  border: 1px solid var(--border-soft);
  text-align: center;
}
.plan-d-timer-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.plan-d-timer-time {
  font-size: 32px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
  margin-top: 4px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.plan-d-timer-time .cs {
  font-size: 18px;
  color: var(--text-2);
  font-weight: 600;
}
.plan-d-timer-state {
  font-size: 11px;
  color: var(--text-2);
  margin-top: 2px;
}
.plan-d-timer-state.is-running { color: var(--danger); font-weight: 600; }
.plan-d-timer-state.is-paused  { color: var(--warning); font-weight: 600; }
.plan-d-timer.is-editable { cursor: pointer; }
.plan-d-timer.is-editable:active { transform: scale(0.99); }
.plan-d-timer-edit-hint {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 4px;
  letter-spacing: 0.4px;
}

/* 材料總結區塊 */
.plan-d-mats-summary, .work-d-mats-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 8px;
}
.plan-d-mat-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}
[data-theme="dark"] .plan-d-mat-tag { color: var(--text); }

/* 步驟內多個調色配方 */
.step-recipes-list { display: flex; flex-direction: column; gap: 8px; }
.step-recipe-item {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 8px 10px;
  position: relative;
}
.step-recipe-item .recipe-row-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.step-recipe-item .recipe-row-no {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--bg);
  padding: 2px 7px;
  border-radius: 999px;
}
.step-recipe-item .recipe-row-del {
  margin-left: auto;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--danger);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-recipe-item .recipe-row-del:active { background: var(--bg); }
.step-add-recipe {
  margin-top: 6px;
  font-size: 12px;
  padding: 6px 10px;
}

/* step-icon-btn 刪除鈕加重對比 */
.step-icon-btn.step-del {
  background: var(--accent-soft);
  color: var(--danger);
}
[data-theme="dark"] .step-icon-btn.step-del { background: rgba(233,107,124,0.18); }

/* ===== 日曆 ===== */
.cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.cal-nav-btn { width: 36px; height: 36px; }
.cal-month {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.3px;
}
.cal-legend {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-bottom: 10px;
  font-size: 11px;
  color: var(--text-2);
}
.cal-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.cal-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.cal-dot-plan { background: var(--accent); }
.cal-dot-work { background: var(--success); }
.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  font-size: 11px;
  color: var(--text-2);
  text-align: center;
  margin-bottom: 4px;
  padding: 0 2px;
}
.cal-weekdays span { padding: 4px 0; }
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding: 0 2px;
}
.cal-day {
  aspect-ratio: 1 / 1;
  border: 1px solid transparent;
  background: var(--bg-2);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  font-family: inherit;
  padding: 0;
  transition: background 0.12s, border-color 0.12s;
}
.cal-day.is-other { color: var(--text-3); background: transparent; }
.cal-day.is-today { border-color: var(--link); font-weight: 700; }
.cal-day.is-selected { background: var(--accent); color: #fff; }
.cal-day:active { background: var(--bg); }
.cal-day-dots {
  display: flex;
  gap: 3px;
  margin-top: 2px;
  height: 6px;
}
.cal-day-dots .cal-dot { width: 5px; height: 5px; }
.cal-day.is-selected .cal-dot-plan { background: #fff; }
.cal-day.is-selected .cal-dot-work { background: #fff; }
.cal-day-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cal-day-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-2);
  border-radius: 10px;
  border: 1px solid var(--border-soft);
  cursor: pointer;
  font-size: 13px;
}
.cal-day-item:active { background: var(--bg); }
.cal-day-item .cal-day-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  flex-shrink: 0;
}
.cal-day-item .cal-day-tag-plan { background: var(--accent-soft); color: var(--accent); }
.cal-day-item .cal-day-tag-work { background: rgba(127,176,105,0.18); color: var(--success); }
.cal-day-item-title {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-day-empty {
  text-align: center;
  color: var(--text-3);
  font-size: 12px;
  padding: 12px;
}

/* plan-detail-footer flex-wrap 以容納更多按鈕 */
.plan-detail-footer { flex-wrap: wrap; }
.plan-detail-footer .btn {
  flex: 1 1 auto;
  min-width: 0;
}
.plan-detail-footer .plan-detail-btn-edit,
.plan-detail-footer .plan-detail-btn-del {
  flex: 0 0 auto;
}

/* lib-toolbar 容納搜尋 + 日曆 + 新增 三個元素 */
.lib-toolbar { flex-wrap: wrap; }
.lib-toolbar > .saved-search { min-width: 0; }