/*
  設計語言：一色到底（design-tokens/rose-blush-restrained.css 通用版）
  這個專案使用者要求全部只用黑白灰，--accent2 固定為黑色，疊色文字改用白字
  （這個專案的例外：一般「一色到底」規格疊色文字固定用 --accent2-text 黑字，
  但主題色本身就是黑色時黑字不可行，改用白字，仍然只有黑/白/灰三色，沒有
  另外引入語意色）。
  版面規則（32px 大圓角、單一柔和陰影、卡片包裹＋空狀態例外）維持該規格不變。
*/

@font-face {
  font-family: "GenSenMaruGothicTW";
  src: url("/fonts/GenSenMaruGothicTW-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* 唯一的主題色——全站所有「有顏色」的地方都直接用這個變數，不分深淺、不做語意色系統。
     這個專案只用黑白灰，主題色固定黑色，疊色文字改用白字（見上方說明）。 */
  --accent2: #1A1A1A;
  --accent2-tint: var(--accent2); /* 故意跟主色相同，不分淡底/實色兩級 */
  --accent2-text: #FFFFFF;        /* 疊在主題色（黑）上的文字/圖示，改用白字 */

  /* 底色 / 卡片 */
  --page-bg2: #FAFAFA;
  --card: #FFFFFF;

  /* 中性文字（不隨主題色變動） */
  --ink: #2C2A29;
  --ink-title: #5C534C;
  --ink-soft: #A09C98;

  /* 容器 */
  --radius2: 32px;
  --shadow2: 0px 8px 24px rgba(0, 0, 0, 0.04);
  --hairline: #F0EBE8;

  --font-main: "GenSenMaruGothicTW", -apple-system, BlinkMacSystemFont,
               "PingFang TC", "Noto Sans TC", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

/* 防呆：任何元素只要有 hidden 屬性就強制不顯示，避免被同選擇器上寫死的
   display:flex/inline-block 等規則蓋掉（author stylesheet 優先權高於瀏覽器
   內建的 [hidden]{display:none}，兩者衝突時 hidden 屬性反而失效）*/
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--page-bg2);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Segoe UI", sans-serif;
  min-height: 100vh;
  line-height: 1.5;
}

.brand-font { font-family: var(--font-main); font-weight: 700; }

.app-header {
  text-align: center;
  padding: 40px 20px 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.8rem;
  color: var(--ink-title);
}

.brand-icon { color: var(--accent2); }

.tagline {
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.app-main {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 16px 60px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 卡片：無邊框，純靠陰影分層次 */
.card {
  background: var(--card);
  border-radius: var(--radius2);
  box-shadow: var(--shadow2);
  border: none;
  padding: 24px;
}

.section-title {
  margin: 0 0 4px;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-title);
}
.section-title.small-title { font-size: 0.95rem; }
.section-title i { color: var(--ink-soft); }

.section-hint {
  margin: 0 0 16px;
  color: var(--ink-soft);
  font-size: 0.85rem;
}

/* 擷取來源區塊：左邊圖片預覽/取色畫布，右邊直向堆疊三個動作按鈕 */
.capture-row {
  display: flex;
  gap: 14px;
}

.capture-preview {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 220px;
  border: 2px dashed var(--hairline);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.capture-preview.drag-over {
  border-color: var(--accent2);
  background: rgba(0, 0, 0, 0.04);
}

.capture-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px;
  text-align: center;
}
.capture-empty-icon { font-size: 2rem; color: var(--accent2); }
.capture-empty-title { font-size: 1rem; color: var(--ink-title); }
.capture-empty-sub { font-size: 0.78rem; color: var(--ink-soft); max-width: 32ch; }

.eyedropper-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
  width: 100%;
}
.eyedropper-canvas {
  /* 只用 max-width/max-height，讓瀏覽器依原始比例縮放，避免同時寫死 width:100%
     導致直式圖片被拉伸變形 */
  max-width: 100%;
  max-height: 380px;
  cursor: crosshair;
  touch-action: none;
  display: block;
  margin: 0 auto;
}
.eyedropper-cursor {
  position: absolute;
  transform: translate(-50%, -130%);
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border-radius: 8px;
  padding: 5px 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  font-size: 0.75rem;
  font-family: "SF Mono", Menlo, monospace;
  pointer-events: none;
  white-space: nowrap;
  z-index: 5;
}
.eyedropper-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  display: inline-block;
}

.capture-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 108px;
  flex-shrink: 0;
}
.capture-action-btn {
  flex: 1;
  min-height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--card);
  box-shadow: var(--shadow2);
  border: none;
  border-radius: 16px;
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 4px;
  transition: background 0.15s, color 0.15s, opacity 0.15s;
}
.capture-action-btn i { font-size: 1.15rem; }
.capture-action-btn:hover { color: var(--ink); }
.capture-action-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.capture-action-btn.active { background: var(--accent2); color: var(--accent2-text); }
.capture-action-btn.active i { color: var(--accent2-text); }

@media (max-width: 480px) {
  .capture-row { flex-direction: column; }
  .capture-actions { flex-direction: row; width: 100%; }
}

.palette-result { margin-top: 20px; }

/* Swatch rows：這些色塊顯示的是使用者實際資料（擷取到的顏色），不是 UI 強調色，
   保留各自的實際色值，不套用 --accent2 */
.swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.swatch {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  cursor: pointer;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  position: relative;
  transition: transform 0.12s;
  flex-shrink: 0;
}
.swatch:hover { transform: translateY(-3px) scale(1.04); }
.swatch.selected { outline: 3px solid var(--ink); outline-offset: 2px; }

.swatch-small {
  width: 44px;
  height: 44px;
  border-radius: 10px;
}

/* 深淺變化：分兩行，一行變淺、一行變深，色塊縮小一點配合較窄的欄位 */
.shades-row { margin-bottom: 8px; }
.shades-row .swatch {
  width: 36px;
  height: 36px;
  border-radius: 8px;
}

.swatch-label {
  display: block;
  font-size: 0.65rem;
  text-align: center;
  margin-top: 4px;
  color: var(--ink-soft);
}

.swatch-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 底部色碼列：顯示/輸入 HEX、複製、收藏顏色 */
.hex-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.hex-bar-input-wrap {
  flex: 1;
  min-width: 160px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--page-bg2);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 6px 6px 6px 14px;
}
.hex-bar-input-wrap:focus-within { border-color: var(--accent2); }
.hex-prefix { color: var(--ink-soft); font-weight: 600; }
#hex-input {
  flex: 1;
  border: none;
  background: none;
  font-size: 1rem;
  padding: 8px 0;
  text-transform: uppercase;
  outline: none;
  min-width: 0;
  color: var(--ink);
  font-family: "SF Mono", Menlo, monospace;
}
.hex-bar-copy-btn {
  background: var(--page-bg2);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  height: 38px;
  width: 38px;
}
.hex-error { color: var(--ink); font-weight: 600; font-size: 0.85rem; margin: 8px 0 0; }

/* 按鈕：一律同色同尺寸，疊色文字固定黑 --accent2-text，不分主/次色階 */
.btn-primary,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 18px;
  background: var(--accent2);
  color: var(--accent2-text);
  border: none;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.btn-primary:hover,
.btn-ghost:hover { opacity: 0.88; }
.btn-primary.small,
.btn-ghost.small { height: 34px; padding: 0 14px; font-size: 0.82rem; }

/* Detail card：左欄手動調整色盤（較窄）、右欄顏色資訊（較寬，約 2/3），並排在同一張卡片裡；
   兩欄拉齊到一樣高（stretch），較矮的一欄改用 space-between 讓內容自然分布填滿高度 */
.detail-picker-row {
  display: flex;
  gap: 28px;
  align-items: stretch;
}
.picker-col { flex: 1; min-width: 0; }
.picker-col .section-hint { margin-bottom: 8px; }
.detail-col {
  flex: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media (max-width: 640px) {
  .detail-picker-row { flex-direction: column; }
}

.detail-main {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.detail-swatch {
  width: 140px;
  height: 140px;
  border-radius: 20px;
  box-shadow: var(--shadow2);
  flex-shrink: 0;
}
.detail-values { flex: 1; min-width: 220px; }
.detail-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--hairline);
}
.detail-label {
  width: 44px;
  font-size: 0.8rem;
  color: var(--ink-soft);
  font-weight: 600;
}
.detail-value {
  flex: 1;
  font-family: "SF Mono", Menlo, monospace;
  font-size: 0.95rem;
  color: var(--ink);
}
.copy-btn {
  border: none;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.copy-btn:hover { background: var(--page-bg2); color: var(--ink); }

.shades-block { margin-top: 20px; }

/* 手動調整顏色：飽和度/明暗色盤 + 色相軸，內部用 HSV model 計算，跟顯示用的 HSL 數值分開 */
.sv-square {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  cursor: crosshair;
  touch-action: none;
  background-image:
    linear-gradient(to top, #000, transparent),
    linear-gradient(to right, #fff, transparent);
  margin-bottom: 16px;
}
.sv-cursor {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.hue-track {
  position: relative;
  height: 16px;
  border-radius: 999px;
  cursor: pointer;
  touch-action: none;
  background: linear-gradient(to right,
    #FF0000, #FFFF00, #00FF00, #00FFFF, #0000FF, #FF00FF, #FF0000);
}
.hue-thumb {
  position: absolute;
  top: 50%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--ink);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Scheme card：兩欄呈現四組配色建議 */
.scheme-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 20px;
}
@media (max-width: 560px) {
  .scheme-list { grid-template-columns: 1fr; }
}
.scheme-group-title {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--ink-soft);
}

/* Favorites */
.device-code-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.device-code-label { font-size: 0.85rem; color: var(--ink-soft); }
.device-code {
  background: var(--page-bg2);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 1rem;
  letter-spacing: 2px;
  font-weight: 600;
  color: var(--ink);
}

.switch-code-form {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.switch-code-form input {
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 0.95rem;
  text-transform: uppercase;
  width: 160px;
  color: var(--ink);
}
.switch-code-form input:focus { outline: none; border-color: var(--accent2); }

.empty-hint { color: var(--ink-soft); font-size: 0.85rem; margin: 0; text-align: center; }

/* 收藏顏色（選擇型元件模式：未選中白卡+陰影，選中整塊填滿主題色+黑/白字） */
.fav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  border: none;
  background: var(--card);
  box-shadow: var(--shadow2);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 0 16px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
}
.fav-btn.active { background: var(--accent2); color: var(--accent2-text); }
.fav-btn.active i { color: var(--accent2-text); }

/* 我的最愛：顏色/照片兩欄並排 */
.favorites-photos-row {
  display: flex;
  gap: 24px;
  margin-top: 20px;
}
.favorites-col,
.photos-col {
  flex: 1;
  min-width: 0;
}
@media (max-width: 640px) {
  .favorites-photos-row { flex-direction: column; }
}

.favorites-row { min-height: 64px; }
.fav-swatch-wrap { position: relative; }
.fav-remove-btn {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  color: var(--ink);
  font-size: 0.65rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 配色建議色塊上的收藏小愛心（.swatch 本身已經是 position:relative） */
.swatch-fav-btn {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  color: var(--ink-soft);
  font-size: 0.72rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.swatch-fav-btn.active { color: var(--ink); }

.photo-remove-btn {
  position: absolute;
  border: none;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Photo gallery */
.photo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.photo-item {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  border: 3px solid #fff;
  flex-shrink: 0;
}
.photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo-remove-btn {
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 0.7rem;
}
.photo-item.uploading {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  background: var(--page-bg2);
  font-size: 1.4rem;
}

.app-footer {
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.8rem;
  padding: 20px;
}

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: #fff;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 0.85rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 480px) {
  .card { padding: 18px; }
  .detail-main { gap: 16px; }
  .detail-swatch { width: 100px; height: 100px; }
}