/* GELATOlab v599 — Parfait Module Styles
 *
 * 沿用 cake.css 的 atelier 語彙（burgundy + champagne + ivory、直角、細線），
 * 但 class 前綴改為 .pf- 以免與蛋糕互相污染。
 */

/* ───── Overlay + Modal Shell ───────────────────────────── */
.pf-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 12, 8, 0.55);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  animation: pfFade 180ms ease;
}
@keyframes pfFade { from { opacity: 0; } to { opacity: 1; } }

.pf-modal {
  background: #fefcf7;
  border: 1px solid #d8c8a8;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
  border-radius: 4px;
  max-width: 920px;
  width: 100%;
  max-height: calc(100vh - 48px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: 'Manrope', system-ui, sans-serif;
}
.pf-modal-wide   { max-width: 1100px; }
.pf-modal-editor { max-width: 1280px; }

.pf-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 24px 14px;
  border-bottom: 1px solid #e2d4b4;
  flex-shrink: 0;
}
.pf-modal-head h2 {
  margin: 0;
  font-family: 'Cormorant Garamond', 'Noto Serif TC', serif;
  font-size: 22px;
  font-weight: 500;
  color: #2a1810;
  letter-spacing: 0.02em;
}
.pf-head-actions { display: flex; align-items: center; gap: 10px; }

.pf-modal-body { padding: 20px 24px; overflow-y: auto; }

/* ───── Buttons ─────────────────────────────────────────── */
.pf-btn {
  font-family: inherit;
  font-size: 13px;
  padding: 8px 14px;
  border: 1px solid #c9b48c;
  background: #fdfaf3;
  color: #3a2a1c;
  border-radius: 2px;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
.pf-btn:hover { background: #f6efe0; border-color: #a98f62; }
.pf-btn-primary { background: #641322; border-color: #641322; color: #fdf8ee; }
.pf-btn-primary:hover { background: #7d1a2c; border-color: #7d1a2c; }
.pf-btn-danger { color: #8a1f2a; border-color: #d8b4b8; }
.pf-btn-danger:hover { background: #fbeff0; border-color: #b8515c; }
.pf-btn-sm { padding: 5px 10px; font-size: 12px; }

.pf-btn-icon {
  background: none; border: none; cursor: pointer;
  font-size: 24px; line-height: 1; color: #8a7658; padding: 0 4px;
}
.pf-btn-icon:hover { color: #2a1810; }
.pf-btn-icon-sm {
  background: none; border: 1px solid transparent; cursor: pointer;
  font-size: 12px; color: #8a7658; padding: 2px 6px; border-radius: 2px;
}
.pf-btn-icon-sm:hover:not(:disabled) { background: #f1e8d6; color: #2a1810; }
.pf-btn-icon-sm:disabled { opacity: 0.28; cursor: default; }

.pf-link {
  background: none; border: none; padding: 0; cursor: pointer;
  color: #641322; font-size: 12px; text-decoration: underline;
  font-family: inherit;
}

/* ───── List ────────────────────────────────────────────── */
.pf-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 16px; border-bottom: 1px solid #ece0c8; margin-bottom: 18px;
}
.pf-toolbar-meta { margin-left: auto; font-size: 12px; color: #8a7658; }

.pf-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}
.pf-card {
  border: 1px solid #e2d4b4; background: #fffdf8; border-radius: 3px;
  display: flex; flex-direction: column; overflow: hidden;
}
.pf-card-thumb {
  background: #f8f5ee; display: flex; justify-content: center;
  padding: 6px 0; border-bottom: 1px solid #efe4cc;
}
.pf-card-thumb svg { max-width: 100%; height: auto; }
.pf-card-body { padding: 12px 14px 8px; flex: 1; }
.pf-card-title {
  margin: 0 0 6px; font-size: 15px; font-weight: 600; color: #2a1810;
  font-family: 'Cormorant Garamond', 'Noto Serif TC', serif;
}
.pf-card-meta { margin: 2px 0; font-size: 11.5px; color: #8a7658; }
.pf-card-actions {
  display: flex; gap: 8px; padding: 8px 14px 12px; border-top: 1px solid #f0e7d3;
}
.pf-sync {
  display: inline-block; margin-top: 6px; font-size: 10.5px;
  padding: 2px 7px; border-radius: 10px; border: 1px solid transparent;
}
.pf-sync-local   { background: #f1ece0; color: #7a6a50; }
.pf-sync-pending { background: #fdf3dd; color: #8a6a1f; border-color: #e6cf95; }
.pf-sync-synced  { background: #eaf3ec; color: #35664a; border-color: #b9d8c4; }
.pf-sync-error   { background: #fbeff0; color: #8a1f2a; border-color: #d8b4b8; }

.pf-empty { grid-column: 1 / -1; text-align: center; padding: 44px 24px; }
.pf-empty-title {
  font-family: 'Cormorant Garamond', 'Noto Serif TC', serif;
  font-size: 19px; color: #2a1810; margin: 0 0 12px;
}
.pf-empty-desc {
  font-size: 13px; color: #7a6a50; line-height: 1.75;
  max-width: 560px; margin: 0 auto 8px;
}

/* ───── Editor layout ───────────────────────────────────── */
.pf-editor-grid {
  display: grid;
  grid-template-columns: minmax(340px, 1fr) minmax(360px, 400px);
  gap: 0;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}
.pf-editor-form {
  padding: 18px 22px; overflow-y: auto; border-right: 1px solid #ece0c8;
}
.pf-editor-preview {
  padding: 18px 20px; overflow-y: auto; background: #faf7f0;
}

.pf-sec { margin-bottom: 22px; }
.pf-sec-head {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid #ece0c8;
}
.pf-sec-head h3 {
  margin: 0; font-size: 13px; font-weight: 600; color: #5a4632;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.pf-hint { font-size: 11px; color: #a3906f; }

.pf-field { display: block; margin-bottom: 12px; }
.pf-field > span {
  display: block; font-size: 11.5px; color: #7a6a50; margin-bottom: 4px;
}
.pf-field > span em { font-style: normal; color: #641322; font-weight: 600; }
.pf-field input[type="text"],
.pf-field input[type="number"],
.pf-field select {
  width: 100%; box-sizing: border-box;
  font-family: inherit; font-size: 13px;
  padding: 7px 9px; border: 1px solid #d8c8a8; border-radius: 2px;
  background: #fffdf8; color: #2a1810;
}
.pf-field input:focus, .pf-field select:focus {
  outline: none; border-color: #641322; box-shadow: 0 0 0 2px rgba(100, 19, 34, 0.08);
}
.pf-field input[type="range"] { width: 100%; }
.pf-field-sm { margin-bottom: 8px; }
.pf-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.pf-check {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12.5px; color: #3a2a1c; margin-bottom: 10px; cursor: pointer;
}
.pf-check input { margin-top: 3px; }
.pf-check em {
  display: block; font-style: normal; font-size: 11px; color: #a3906f; margin-top: 2px;
}

/* ───── Layer rows ──────────────────────────────────────── */
.pf-layers { display: flex; flex-direction: column-reverse; gap: 8px; margin-bottom: 10px; }
.pf-layer {
  border: 1px solid #e2d4b4; background: #fffdf8; border-radius: 3px; overflow: hidden;
}
.pf-layer-head {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; background: #f7f1e3; border-bottom: 1px solid #ece0c8;
}
.pf-layer-idx {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  width: 18px; height: 18px; line-height: 18px; text-align: center;
  background: #641322; color: #fdf8ee; border-radius: 50%; flex-shrink: 0;
}
.pf-layer-role {
  flex: 1; font-family: inherit; font-size: 12.5px;
  padding: 4px 6px; border: 1px solid #d8c8a8; border-radius: 2px; background: #fffdf8;
}
.pf-state { font-size: 10.5px; padding: 2px 6px; border-radius: 9px; white-space: nowrap; }
.pf-state-frozen  { background: #e8f0f7; color: #2d5878; }
.pf-state-chilled { background: #eef3ee; color: #46664a; }
.pf-state-ambient { background: #f4efe4; color: #7a6a50; }
.pf-layer-btns { display: flex; gap: 1px; flex-shrink: 0; }

.pf-layer-body {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px;
}
.pf-field-wide { grid-column: 1 / -1; }
.pf-layer-calc {
  grid-column: 1 / -1;
  font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  color: #8a7658; padding-top: 4px; border-top: 1px dashed #ece0c8;
}

/* ───── 逐層組件配方選單（v609）────────────────────────── */
/* 這一列刻意放在 .pf-layer-body 之外、配方摺疊區之上 —— 它是「這一層要不要
   附配方」的開關，不是層次的物性欄位，混在克數旁邊會被當成另一個參數。 */
.pf-layer-recipe-pick {
  display: grid;
  padding: 0 10px 10px;
  border-top: 1px dashed #ece0c8;
}
.pf-layer-recipe-pick .pf-field { padding-top: 8px; }
.pf-layer-recipe-pick select { width: 100%; }
.pf-recipe-custom {
  display: block;
  padding: 6px 0 0;
  color: #8a7658;
  font: 400 11px/1.5 'IBM Plex Mono', monospace;
}
.pf-production-derived {
  margin: 0 0 9px;
  padding: 7px 9px;
  border-left: 2px solid rgba(184, 150, 90, .55);
  background: rgba(184, 150, 90, .09);
  color: rgba(24, 22, 20, .68);
  font-size: 10.5px;
  line-height: 1.7;
}

/* ───── 組件配方 / 完整製作指南（v599）──────────────────── */
.pf-component-recipe {
  border-top: 1px solid rgba(184, 150, 90, .34);
  background: #fbfaf6;
}
.pf-component-recipe summary,
.pf-production-details summary {
  cursor: pointer;
  list-style: none;
}
.pf-component-recipe summary::-webkit-details-marker,
.pf-production-details summary::-webkit-details-marker { display: none; }
.pf-component-recipe > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  color: #641322;
}
.pf-component-recipe > summary::after {
  content: '＋';
  flex: 0 0 auto;
  font: 400 10px/1 'IBM Plex Mono', monospace;
}
.pf-component-recipe[open] > summary::after { content: '−'; }
.pf-component-recipe > summary span {
  font: 400 10px/1.4 'IBM Plex Mono', monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.pf-component-recipe > summary em {
  margin-left: auto;
  color: #8a7658;
  font: normal 400 9px/1.5 'IBM Plex Mono', monospace;
}
.pf-component-recipe-body {
  padding: 4px 12px 14px;
  border-top: 1px solid rgba(24, 22, 20, .09);
}
.pf-component-recipe-title {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 3px 12px;
  padding: 12px 0 9px;
  border-bottom: 1px solid rgba(24, 22, 20, .12);
}
.pf-component-recipe-title span {
  grid-column: 1 / -1;
  color: #b8965a;
  font: 400 8px/1.4 'IBM Plex Mono', monospace;
  letter-spacing: .2em;
}
.pf-component-recipe-title h4 {
  margin: 0;
  color: #181614;
  font: 300 20px/1.08 'Cormorant Garamond', 'Noto Serif TC', serif;
}
.pf-component-recipe-title p {
  margin: 0;
  color: rgba(24, 22, 20, .55);
  font: 400 9px/1.5 'IBM Plex Mono', monospace;
}
.pf-component-recipe-body h5 {
  margin: 14px 0 6px;
  color: #641322;
  font: 400 9px/1.4 'IBM Plex Mono', monospace;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.pf-component-targets {
  margin: 9px 0 0;
  color: #5a6147;
  font: 400 9px/1.6 'IBM Plex Mono', monospace;
}
.pf-component-ingredients {
  width: 100%;
  border-collapse: collapse;
  color: #3a2a1c;
  font-size: 11px;
}
.pf-component-ingredients td {
  padding: 5px 0;
  border-bottom: 1px solid rgba(24, 22, 20, .08);
  vertical-align: top;
}
.pf-component-ingredients td:last-child {
  width: 68px;
  text-align: right;
  color: #181614;
  font-family: 'IBM Plex Mono', monospace;
}
.pf-component-ingredients small,
.pf-component-steps small {
  display: block;
  margin-top: 2px;
  color: rgba(24, 22, 20, .5);
  font: 400 8.5px/1.5 'IBM Plex Mono', monospace;
}
.pf-component-steps,
.pf-production-details ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pf-component-steps li,
.pf-production-details li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(24, 22, 20, .08);
  color: #3a2a1c;
  font-size: 11px;
  line-height: 1.65;
}
.pf-component-steps li > span,
.pf-production-details li > span {
  color: #b8965a;
  font: italic 300 17px/1 'Cormorant Garamond', serif;
}
.pf-component-controls {
  margin: 12px 0 0;
  border-top: 1px solid rgba(184, 150, 90, .34);
}
.pf-component-controls > div {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(24, 22, 20, .08);
}
.pf-component-controls dt {
  color: #641322;
  font: 400 8px/1.55 'IBM Plex Mono', monospace;
  letter-spacing: .12em;
}
.pf-component-controls dd {
  margin: 0;
  color: rgba(24, 22, 20, .68);
  font-size: 10px;
  line-height: 1.65;
}
.pf-production-guide {
  padding: 15px 16px;
  border: 1px solid rgba(184, 150, 90, .42);
  background: #f7f2e8;
}
.pf-production-title {
  margin: 0 0 5px;
  color: #181614;
  font: 300 21px/1.1 'Cormorant Garamond', 'Noto Serif TC', serif;
}
.pf-production-note {
  margin: 0 0 11px;
  color: rgba(24, 22, 20, .62);
  font-size: 10.5px;
  line-height: 1.75;
}
.pf-production-details { border-top: 1px solid rgba(24, 22, 20, .12); }
.pf-production-details > summary {
  padding: 9px 0;
  color: #641322;
  font: 400 9px/1.4 'IBM Plex Mono', monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.pf-production-details > summary::after { content: ' ＋'; }
.pf-production-details[open] > summary::after { content: ' −'; }
.pf-production-details li p { margin: 0; }
/* ───── 頂飾 / 插件 / 淋醬（v589）───────────────────────── */
.pf-topping-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.pf-topping-row {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 6px 8px; border: 1px solid #ece0c8; border-radius: 3px; background: #fffdf8;
}
.pf-topping-name {
  flex: 1 1 auto; min-width: 0; font-size: 12px; color: #4a3c2a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-topping-name em { font-style: normal; color: #a3906f; font-size: 10.5px; }
.pf-topping-row .pf-field { margin-bottom: 0; }
.pf-field-xs { flex: 0 0 62px; margin-bottom: 0; }
.pf-field-xs input { width: 100%; }
.pf-topping-add { margin-bottom: 10px; }
.pf-topping-add select { width: 100%; }

.pf-ing-status {
  display: block; font-size: 10.5px; margin-top: 3px; color: #46664a; min-height: 13px;
}
.pf-ing-status.pf-ing-bad { color: #8a1f2a; }
.pf-field input[aria-invalid="true"] { border-color: #b8515c; background: #fdf7f7; }

/* ───── Preview panels ──────────────────────────────────── */
.pf-preview-svg {
  display: flex; justify-content: center;
  background: #fffdf8; border: 1px solid #ece0c8; border-radius: 3px;
  padding: 4px; margin-bottom: 14px;
}
.pf-preview-svg svg { max-width: 100%; height: auto; }

.pf-panel {
  border: 1px solid #e2d4b4; background: #fffdf8;
  border-radius: 3px; padding: 12px 14px; margin-bottom: 12px;
}
.pf-panel h4 {
  margin: 0 0 8px; font-size: 12.5px; font-weight: 600; color: #5a4632;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.pf-panel h4 strong { color: #641322; font-size: 14px; }
.pf-panel-ok     { border-left: 3px solid #6a9c7a; }
.pf-panel-warn   { border-left: 3px solid #c99a3a; }
.pf-panel-danger { border-left: 3px solid #b8515c; }
.pf-panel-note {
  font-size: 11.5px; color: #7a6a50; line-height: 1.7; margin: 6px 0 0;
}
.pf-panel-fineprint {
  font-size: 10.5px; color: #a3906f; line-height: 1.6; margin: 8px 0 0;
  font-style: italic;
}

.pf-alert {
  font-size: 12px; padding: 8px 11px; border-radius: 3px; margin: 0 0 12px;
  line-height: 1.6;
}
.pf-alert-danger { background: #fbeff0; color: #8a1f2a; border: 1px solid #e0bcc0; }
.pf-alert-warn   { background: #fdf6e6; color: #7d5f18; border: 1px solid #e6d3a0; }

/* 賞味窗口 */
.pf-axes { list-style: none; margin: 0; padding: 0; }
.pf-axes li {
  display: flex; align-items: baseline; gap: 8px;
  padding: 4px 0; font-size: 12px; color: #5a4632;
  border-bottom: 1px dotted #ece0c8;
}
.pf-axes li:last-child { border-bottom: none; }
.pf-axis-min {
  font-family: 'IBM Plex Mono', monospace; font-size: 12.5px;
  min-width: 42px; text-align: right; color: #2a1810;
}
.pf-axis-limit { font-weight: 600; }
.pf-axis-limit .pf-axis-min { color: #641322; }
.pf-axis-advisory { opacity: 0.62; }
.pf-axis-tag {
  font-size: 10px; padding: 1px 5px; border-radius: 8px;
  background: #f1ece0; color: #7a6a50;
}

/* 成本 */
.pf-cost { list-style: none; margin: 0; padding: 0; }
.pf-cost li {
  display: grid; grid-template-columns: 1fr auto 44px; gap: 8px;
  font-size: 12px; padding: 3px 0; color: #5a4632;
}
.pf-cost li span:nth-child(2) { font-family: 'IBM Plex Mono', monospace; }
.pf-cost li em { font-style: normal; color: #c99a3a; }
.pf-cost-pct { text-align: right; color: #a3906f; font-size: 11px; }

/* 診斷 */
.pf-issue {
  border: 1px solid #ece0c8; border-radius: 3px;
  margin-bottom: 6px; background: #fffdf8;
}
.pf-issue summary {
  cursor: pointer; padding: 7px 10px; font-size: 12px;
  color: #3a2a1c; list-style-position: inside;
}
.pf-issue summary em { font-style: normal; color: #8a7658; font-size: 11px; }
.pf-issue-danger  { border-left: 3px solid #b8515c; }
.pf-issue-warning { border-left: 3px solid #c99a3a; }
.pf-issue-info    { border-left: 3px solid #8fa3b8; }
.pf-issue-plain, .pf-issue-why {
  margin: 0 10px 6px; font-size: 11.5px; line-height: 1.75; color: #5a4632;
}
.pf-issue-why { color: #7a6a50; }
.pf-issue-moves { margin: 0 10px 8px; padding-left: 18px; }
.pf-issue-moves li { font-size: 11.5px; line-height: 1.7; color: #3a2a1c; }
.pf-issue > .pf-link { margin: 0 10px 10px; }

/* 層間穩定度 */
.pf-itfs { list-style: none; margin: 0; padding: 0; }
.pf-itf {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 5px 0; font-size: 11.5px; line-height: 1.6;
  border-bottom: 1px dotted #ece0c8;
}
.pf-itf:last-child { border-bottom: none; }
.pf-itf-risk {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  min-width: 26px; text-align: center; border-radius: 2px; padding: 1px 0; flex-shrink: 0;
}
.pf-itf-high .pf-itf-risk { background: #fbeff0; color: #8a1f2a; }
.pf-itf-mid  .pf-itf-risk { background: #fdf6e6; color: #7d5f18; }
.pf-itf-msg { color: #5a4632; }

/* 營養 */
.pf-macros {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.pf-macros li { font-size: 11px; color: #7a6a50; text-align: center; }
.pf-macros strong {
  display: block; font-family: 'IBM Plex Mono', monospace;
  font-size: 14px; color: #2a1810;
}

/* ───── Template picker ─────────────────────────────────── */
.pf-tpl-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px;
}
.pf-tpl-card {
  display: flex; flex-direction: column; gap: 5px; text-align: left;
  border: 1px solid #e2d4b4; background: #fffdf8; border-radius: 3px;
  padding: 12px 14px; cursor: pointer; font-family: inherit;
  transition: border-color 140ms ease, background 140ms ease;
}
.pf-tpl-card:hover { border-color: #641322; background: #fdf8ee; }
.pf-tpl-mode {
  align-self: flex-start; font-size: 10.5px; padding: 2px 7px; border-radius: 9px;
}
.pf-mode-frozen  { background: #e8f0f7; color: #2d5878; }
.pf-mode-chilled { background: #eef3ee; color: #46664a; }
.pf-mode-hybrid  { background: #f7eef3; color: #6d3355; }
.pf-tpl-name {
  font-family: 'Cormorant Garamond', 'Noto Serif TC', serif;
  font-size: 15px; color: #2a1810;
}
.pf-tpl-desc { font-size: 11.5px; color: #7a6a50; line-height: 1.65; }
.pf-tpl-glass { font-size: 11px; color: #a3906f; }
.pf-tpl-note { font-size: 11.5px; color: #a3906f; margin: 14px 0 0; }

/* ───── Responsive ──────────────────────────────────────── */
@media (max-width: 900px) {
  .pf-editor-grid { grid-template-columns: 1fr; }
  .pf-editor-form { border-right: none; border-bottom: 1px solid #ece0c8; }
  .pf-overlay { padding: 10px; }
  .pf-modal { max-height: calc(100vh - 20px); }
  .pf-layer-body { grid-template-columns: 1fr; }
  .pf-macros { grid-template-columns: repeat(2, 1fr); }
}

/* ───── v573 B 類：搜尋 / 排序 / 分享 / 3D ─────────────── */
.pf-search {
  font-family: inherit; font-size: 12.5px;
  padding: 6px 10px; border: 1px solid #d8c8a8; border-radius: 2px;
  background: #fffdf8; color: #2a1810; min-width: 190px; flex: 1 1 190px; max-width: 280px;
}
.pf-search:focus { outline: none; border-color: #641322; box-shadow: 0 0 0 2px rgba(100,19,34,.08); }
.pf-sort {
  font-family: inherit; font-size: 12.5px;
  padding: 6px 8px; border: 1px solid #d8c8a8; border-radius: 2px; background: #fffdf8; color: #2a1810;
}

.pf-modal-foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 24px; border-top: 1px solid #e2d4b4; flex-shrink: 0;
}

.pf-textarea {
  width: 100%; box-sizing: border-box; font-family: inherit; font-size: 13px;
  padding: 8px 10px; border: 1px solid #d8c8a8; border-radius: 2px;
  background: #fffdf8; color: #2a1810; resize: vertical; line-height: 1.6;
}
.pf-textarea:focus { outline: none; border-color: #641322; box-shadow: 0 0 0 2px rgba(100,19,34,.08); }

.pf-share-preview {
  display: flex; gap: 16px; align-items: center;
  padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid #ece0c8;
}
.pf-share-thumb {
  flex: 0 0 auto; background: #f8f5ee; border: 1px solid #efe4cc; padding: 4px;
}
.pf-share-thumb svg { display: block; max-width: 100%; height: auto; }
.pf-share-preview h3 {
  margin: 0 0 4px; font-family: 'Cormorant Garamond', 'Noto Serif TC', serif;
  font-size: 17px; color: #2a1810;
}
.pf-share-notice {
  background: #f9f5ea; border: 1px solid #ece0c8; border-radius: 3px;
  padding: 10px 14px; margin-top: 12px;
}
.pf-share-notice p { margin: 0 0 6px; font-size: 12px; color: #5a4632; }
.pf-share-notice ul { margin: 0; padding-left: 18px; }
.pf-share-notice li { font-size: 11.5px; line-height: 1.75; color: #7a6a50; }

.pf-modal-3d {
  width: min(1380px, calc(100vw - 48px));
  max-width: 1380px;
}
.pf-3d-body { min-height: 0; padding: 18px 20px 10px; }
.pf-3d-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  min-height: 0;
  border: 1px solid var(--rule-color, rgba(24, 22, 20, .12));
  background: var(--ivory, #F7F2E8);
}
.pf-3d-canvas {
  position: relative;
  width: 100%;
  height: clamp(500px, 68vh, 720px);
  min-height: 500px;
  overflow: hidden;
  border: 0;
  border-right: 1px solid var(--rule-color, rgba(24, 22, 20, .12));
  border-radius: 0;
  background: var(--ivory, #F7F2E8);
}
.pf-3d-canvas canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.pf-3d-loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--faint, rgba(24, 22, 20, .45));
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 10px;
  letter-spacing: .16em;
}
.pf-3d-loading > span { width: 22px; height: 1px; background: var(--champagne, #B8965A); }
.pf-3d-toolbar {
  position: absolute;
  z-index: 3;
  top: 14px;
  left: 14px;
  display: flex;
  border: 1px solid rgba(24, 22, 20, .18);
  background: rgba(247, 242, 232, .92);
  backdrop-filter: blur(12px);
}
.pf-3d-toolbar button {
  min-height: 32px;
  padding: 6px 11px;
  border: 0;
  border-right: 1px solid rgba(24, 22, 20, .14);
  border-radius: 0;
  background: transparent;
  color: var(--ink, #181614);
  cursor: pointer;
  font: 400 9px/1.2 var(--font-mono, 'IBM Plex Mono', monospace);
  letter-spacing: .12em;
}
.pf-3d-toolbar button:last-child { border-right: 0; }
.pf-3d-toolbar button:hover,
.pf-3d-toolbar button:focus-visible { background: var(--mist, #EDE6DA); outline: 0; }
.pf-3d-toolbar button[aria-pressed="false"] { color: var(--burgundy, #641322); }
.pf-3d-legend {
  min-width: 0;
  padding: 24px 20px;
  overflow: auto;
  background: var(--porcelain, #FBFAF6);
}
.pf-3d-legend h3 {
  margin: 5px 0 18px;
  color: var(--ink, #181614);
  font: 300 25px/1.05 var(--font-display, 'Cormorant Garamond', 'Noto Serif TC', serif);
}
.pf-3d-legend ol { margin: 0; padding: 0; list-style: none; }
.pf-3d-legend li {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 9px 0;
  border-top: 1px solid var(--rule-color, rgba(24, 22, 20, .12));
}
.pf-3d-swatch {
  width: 7px;
  height: 7px;
  margin-top: 4px;
  border: 1px solid rgba(24, 22, 20, .22);
  border-radius: 50%;
  background: var(--pf-layer-color, #CFCFCF);
}
.pf-3d-legend strong {
  display: block;
  overflow: hidden;
  color: var(--ink, #181614);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pf-3d-legend small {
  display: block;
  margin-top: 2px;
  color: var(--faint, rgba(24, 22, 20, .45));
  font: 400 8.5px/1.5 var(--font-mono, 'IBM Plex Mono', monospace);
  letter-spacing: .06em;
}
.pf-3d-legend > p {
  margin: 18px 0 0;
  padding-top: 15px;
  border-top: 1px solid var(--rule-gold, rgba(184, 150, 90, .3));
  color: var(--faint, rgba(24, 22, 20, .45));
  font-size: 10px;
  line-height: 1.7;
}
.pf-3d-note { margin: 8px 0 0; }
.pf-modal-3d .pf-btn-icon { display: grid; width: 36px; height: 36px; padding: 8px; place-items: center; }
.pf-modal-3d .pf-btn-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.25; }

@media (max-width: 1000px) {
  .pf-3d-stage { grid-template-columns: minmax(0, 1fr) 210px; }
  .pf-3d-canvas { height: clamp(460px, 64vh, 640px); min-height: 460px; }
  .pf-3d-legend { padding: 20px 15px; }
}

@media (max-width: 720px) {
  .pf-modal-3d { width: 100%; max-width: none; }
  .pf-3d-body { padding: 10px; }
  .pf-3d-stage { display: block; }
  .pf-3d-canvas { height: 58vh; min-height: 380px; border-right: 0; border-bottom: 1px solid var(--rule-color, rgba(24, 22, 20, .12)); }
  .pf-3d-toolbar { top: 9px; left: 9px; }
  .pf-3d-toolbar button { padding-inline: 8px; font-size: 8px; }
  .pf-3d-legend { max-height: 190px; }
  .pf-3d-legend ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
  .pf-3d-legend > p { display: none; }
}

@media (max-width: 900px) {
  .pf-search { max-width: none; }
  .pf-share-preview { flex-direction: column; align-items: flex-start; }
}

/* ───── v573 AI 商用照片 ─────────────────────────────────── */
.pf-render-disclaimer {
  background: #fdf6e6; border: 1px solid #e6d3a0; border-left: 3px solid #c99a3a;
  border-radius: 3px; padding: 10px 13px; margin-bottom: 14px;
  font-size: 12px; line-height: 1.7; color: #7d5f18;
}
.pf-render-controls { margin-bottom: 12px; }
.pf-render-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 0; border-bottom: 1px dotted #ece0c8;
}
.pf-render-row:last-child { border-bottom: none; }
.pf-render-src {
  font-size: 12px; color: #5a4632; min-width: 132px; font-weight: 600;
}
.pf-render-busy {
  font-size: 12.5px; color: #641322; padding: 9px 12px;
  background: #fdf8ee; border: 1px solid #e6d3a0; border-radius: 3px; margin: 0 0 12px;
}
.pf-render-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px;
}
.pf-render-card {
  border: 1px solid #e2d4b4; background: #fffdf8; border-radius: 3px; overflow: hidden;
}
.pf-render-card img { display: block; width: 100%; height: auto; }
.pf-render-card-foot {
  display: flex; gap: 6px; padding: 8px 10px; border-top: 1px solid #f0e7d3;
}
.pf-render-card-err {
  padding: 12px; border-left: 3px solid #b8515c; background: #fbeff0;
}
.pf-card-cover {
  display: block; width: 100%; height: 210px; object-fit: cover;
}

/* ───── Atelier v.02 refinement ─────────────────────────── */
.pf-overlay {
  background: rgba(24, 22, 20, .38);
  backdrop-filter: blur(3px);
  animation-duration: 240ms;
}

.pf-modal {
  background: var(--porcelain, #FBFAF6);
  border-color: var(--rule-gold, rgba(184, 150, 90, .3));
  border-radius: var(--radius-atelier, 0);
  box-shadow: 0 24px 70px rgba(24, 22, 20, .18);
  color: var(--ink, #181614);
  font-family: var(--font-sans, 'Manrope', system-ui, sans-serif);
}

.pf-modal-head {
  min-height: 72px;
  padding: 16px 24px;
  border-bottom-color: var(--rule-color, rgba(24, 22, 20, .12));
}

.pf-modal-title { min-width: 0; }
.pf-kicker {
  display: block;
  margin-bottom: 3px;
  color: var(--champagne, #B8965A);
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: var(--label-size, 10px);
  font-weight: 500;
  letter-spacing: var(--ls-caps, .32em);
  line-height: 1.4;
  text-transform: uppercase;
}
.pf-modal-head h2 {
  color: var(--ink, #181614);
  font-family: var(--font-display, 'Cormorant Garamond', 'Noto Serif TC', serif);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 300;
  letter-spacing: -.01em;
  line-height: 1.05;
}
.pf-head-actions { flex: 0 0 auto; flex-wrap: nowrap; }

.pf-btn {
  border-color: var(--ink, #181614);
  border-radius: 0;
  background: transparent;
  color: var(--ink, #181614);
  font-family: var(--font-sans, 'Manrope', system-ui, sans-serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.35;
  text-transform: uppercase;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.pf-btn:hover { background: var(--ink, #181614); border-color: var(--ink, #181614); color: var(--ivory, #F7F2E8); }
.pf-btn-primary { background: var(--burgundy, #641322); border-color: var(--burgundy, #641322); color: var(--ivory, #F7F2E8); }
.pf-btn-primary:hover { background: var(--oxblood, #4A0E18); border-color: var(--oxblood, #4A0E18); }
.pf-btn-danger { border-color: transparent; color: var(--burgundy, #641322); }
.pf-btn-danger:hover { background: var(--burgundy, #641322); border-color: var(--burgundy, #641322); color: var(--ivory, #F7F2E8); }
.pf-btn-icon,
.pf-btn-icon-sm { border-radius: 0; color: rgba(24, 22, 20, .56); }
.pf-btn-icon:focus-visible,
.pf-btn-icon-sm:focus-visible,
.pf-btn:focus-visible,
.pf-tpl-card:focus-visible,
.pf-link:focus-visible,
.pf-tools-menu summary:focus-visible {
  outline: 1px solid var(--burgundy, #641322);
  outline-offset: 3px;
}

.pf-tools-menu { position: relative; }
.pf-tools-menu > summary { list-style: none; white-space: nowrap; }
.pf-tools-menu > summary::-webkit-details-marker { display: none; }
.pf-tools-menu > summary::after { content: ' ↓'; font-family: var(--font-mono, monospace); }
.pf-tools-menu[open] > summary::after { content: ' ↑'; }
.pf-tools-popover {
  position: absolute;
  z-index: 10;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  width: 190px;
  padding: 8px;
  border: 1px solid var(--champagne, #B8965A);
  background: var(--porcelain, #FBFAF6);
  box-shadow: 0 16px 32px rgba(24, 22, 20, .14);
}
.pf-tools-popover .pf-btn { width: 100%; border-color: transparent; text-align: left; }

.pf-toolbar { border-bottom-color: var(--rule-color, rgba(24, 22, 20, .12)); }
.pf-toolbar-meta,
.pf-card-meta,
.pf-empty-desc,
.pf-hint { color: var(--muted, rgba(24, 22, 20, .6)); }
.pf-card-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.pf-card,
.pf-layer,
.pf-preview-svg,
.pf-panel,
.pf-issue,
.pf-share-notice,
.pf-3d-canvas,
.pf-render-card {
  border-color: var(--rule-color, rgba(24, 22, 20, .12));
  border-radius: 0;
  background: var(--porcelain, #FBFAF6);
}
.pf-card-thumb,
.pf-editor-preview { background: var(--ivory, #F7F2E8); }
.pf-card-title,
.pf-empty-title,
.pf-tpl-name,
.pf-share-preview h3 {
  color: var(--ink, #181614);
  font-family: var(--font-display, 'Cormorant Garamond', 'Noto Serif TC', serif);
  font-weight: 400;
}
.pf-card-actions { flex-wrap: wrap; border-top-color: var(--rule-color, rgba(24, 22, 20, .12)); }

.pf-sync,
.pf-state,
.pf-tpl-mode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted, rgba(24, 22, 20, .6));
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  letter-spacing: .04em;
}
.pf-sync::before,
.pf-state::before,
.pf-tpl-mode::before {
  content: '';
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  background: var(--status-archived, #D8D1C5);
}
.pf-sync-pending::before,
.pf-state-frozen::before { background: var(--status-refining, #B8965A); }
.pf-sync-synced::before,
.pf-state-chilled::before { background: var(--status-balanced, #5A6147); }
.pf-sync-error::before { background: var(--status-warning, #641322); }
.pf-mode-frozen::before { background: var(--status-refining, #B8965A); }
.pf-mode-chilled::before { background: var(--status-balanced, #5A6147); }
.pf-mode-hybrid::before { background: var(--burgundy, #641322); }

.pf-editor-form { border-right-color: var(--rule-color, rgba(24, 22, 20, .12)); }
.pf-sec-head { border-bottom-color: var(--rule-color, rgba(24, 22, 20, .12)); }
.pf-sec-head h3,
.pf-panel h4 {
  color: var(--ink, #181614);
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.pf-panel h4 strong { color: var(--burgundy, #641322); font-family: var(--font-sans, 'Manrope', sans-serif); letter-spacing: 0; }
.pf-label-handoff {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--rule-color, rgba(24, 22, 20, .12));
}
.pf-label-handoff-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--champagne, #B8965A);
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 9px;
  letter-spacing: .22em;
}
.pf-label-handoff p {
  margin: 0;
  color: var(--muted, rgba(24, 22, 20, .6));
  font-size: 11px;
  line-height: 1.65;
}
.pf-label-editor-cta { min-height: 38px; white-space: nowrap; }

@media (max-width: 680px) {
  .pf-label-handoff { grid-template-columns: 1fr; }
  .pf-label-editor-cta { width: 100%; }
}
.pf-field > span { color: var(--muted, rgba(24, 22, 20, .6)); font-size: 10px; letter-spacing: .08em; }
.pf-field input[type="text"],
.pf-field input[type="number"],
.pf-field select,
.pf-layer-role,
.pf-search,
.pf-sort,
.pf-textarea {
  border: 0;
  border-bottom: 1px solid var(--stone, #D8D1C5);
  border-radius: 0;
  background: transparent;
  color: var(--ink, #181614);
  padding: 7px 2px;
}
.pf-field input:focus,
.pf-field select:focus,
.pf-layer-role:focus,
.pf-search:focus,
.pf-sort:focus,
.pf-textarea:focus {
  outline: none;
  border-color: var(--burgundy, #641322);
  box-shadow: none;
}
.pf-field input[type="range"] { accent-color: var(--burgundy, #641322); }
.pf-check { color: var(--ink, #181614); }
.pf-layer-head { background: var(--ivory, #F7F2E8); border-bottom-color: var(--rule-color, rgba(24, 22, 20, .12)); }
.pf-layer-idx {
  width: 22px;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: var(--burgundy, #641322);
  line-height: 1;
  text-align: left;
}
.pf-layer-calc { border-top: 1px solid var(--rule-color, rgba(24, 22, 20, .12)); color: var(--muted, rgba(24, 22, 20, .6)); }
.pf-ing-status { color: var(--status-balanced, #5A6147); }
.pf-ing-status.pf-ing-bad { color: var(--burgundy, #641322); }
.pf-field input[aria-invalid="true"] { border-color: var(--burgundy, #641322); background: transparent; }

.pf-panel-ok { border-left: 2px solid var(--status-balanced, #5A6147); }
.pf-panel-warn { border-left: 2px solid var(--status-refining, #B8965A); }
.pf-panel-danger { border-left: 2px solid var(--status-warning, #641322); }
.pf-alert { border-radius: 0; background: transparent; }
.pf-alert-danger { border-color: var(--burgundy, #641322); color: var(--burgundy, #641322); }
.pf-alert-warn { border-color: var(--champagne, #B8965A); color: var(--ink, #181614); }
.pf-axis-tag { border-radius: 0; background: var(--mist, #EDE6DA); }
.pf-issue-danger { border-left-color: var(--burgundy, #641322); }
.pf-issue-warning { border-left-color: var(--champagne, #B8965A); }
.pf-issue-info { border-left-color: var(--stone, #D8D1C5); }

.pf-tpl-grid { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.pf-tpl-card {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 14px;
  border-color: var(--rule-color, rgba(24, 22, 20, .12));
  border-radius: 0;
  background: var(--porcelain, #FBFAF6);
  color: var(--ink, #181614);
}
.pf-tpl-card:hover { border-color: var(--burgundy, #641322); background: var(--ivory, #F7F2E8); }
.pf-tpl-visual { display: flex; min-height: 180px; align-items: center; justify-content: center; background: var(--ivory, #F7F2E8); }
.pf-tpl-visual svg { display: block; max-width: 100%; height: auto; }
.pf-tpl-copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 6px; }
.pf-tpl-mode { font-size: 9px; text-transform: uppercase; }
.pf-tpl-name { font-size: 19px; line-height: 1.1; }
.pf-tpl-desc { color: var(--muted, rgba(24, 22, 20, .6)); }
.pf-tpl-glass,
.pf-tpl-stats,
.pf-tpl-note { color: var(--faint, rgba(24, 22, 20, .45)); font-family: var(--font-mono, monospace); font-size: 10px; }

/* ───── v586 · 30 design starting points ───────────────── */
#parfait-template-modal .pf-modal { max-width: 1240px; }
#parfait-template-modal .pf-modal-body { position: relative; }
.pf-tpl-tools {
  position: sticky;
  z-index: 4;
  top: -20px;
  display: grid;
  grid-template-columns: minmax(240px, 1.5fr) minmax(180px, 1fr) auto;
  gap: 18px;
  align-items: end;
  margin: -20px 0 22px;
  padding: 20px 0 16px;
  border-bottom: 1px solid var(--rule-color, rgba(24, 22, 20, .12));
  background: var(--porcelain, #FBFAF6);
}
.pf-tpl-field { display: grid; min-width: 0; gap: 7px; }
.pf-tpl-field > span {
  color: var(--champagne, #B8965A);
  font-family: var(--font-mono, monospace);
  font-size: 8px;
  letter-spacing: .22em;
  line-height: 1;
}
.pf-tpl-field input,
.pf-tpl-field select {
  width: 100%;
  min-height: 34px;
  padding: 4px 22px 5px 0;
  border: 0;
  border-bottom: 1px solid var(--stone, #D8D1C5);
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: var(--ink, #181614);
  font-family: var(--font-sans, sans-serif);
  font-size: 12px;
  font-weight: 300;
}
.pf-tpl-field input:focus,
.pf-tpl-field select:focus { border-bottom-color: var(--ink, #181614); }
.pf-tpl-field input::placeholder { color: var(--faint, rgba(24, 22, 20, .35)); }
.pf-tpl-result {
  min-width: 92px;
  margin: 0 0 7px;
  color: var(--faint, rgba(24, 22, 20, .45));
  font-family: var(--font-mono, monospace);
  font-size: 9px;
  letter-spacing: .08em;
  text-align: right;
}
.pf-tpl-result strong { color: var(--burgundy, #641322); font-size: 15px; font-weight: 400; }
.pf-tpl-card[hidden] { display: none; }
.pf-tpl-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-tpl-mode,
.pf-tpl-category {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 6px;
  border: 1px solid var(--rule-color, rgba(24, 22, 20, .12));
  border-radius: 0;
  background: transparent;
  color: var(--muted, rgba(24, 22, 20, .6));
  font-family: var(--font-mono, monospace);
  font-size: 8px;
  letter-spacing: .12em;
}
.pf-tpl-mode::before { background: var(--champagne, #B8965A); }
.pf-tpl-empty {
  margin: 48px 0;
  color: var(--muted, rgba(24, 22, 20, .6));
  font-family: var(--font-display, serif);
  font-size: 20px;
  font-style: italic;
  font-weight: 300;
  text-align: center;
}

/* ───── v588 · Layer affinity / flavor pairing ─────────── */
.pf-pairing-panel {
  padding: 16px;
  border-color: var(--rule-gold, rgba(184, 150, 90, .3));
  background: var(--porcelain, #FBFAF6);
}
.pf-pairing-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin: -1px 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule-color, rgba(24, 22, 20, .12));
}
.pf-pairing-head h4 {
  margin: 4px 0 0;
  color: var(--ink, #181614);
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 24px;
  font-weight: 300;
  letter-spacing: -.01em;
  line-height: 1;
}
.pf-pairing-kicker,
.pf-pairing-seal,
.pf-pairing-layer-no,
.pf-pairing-overall span,
.pf-pairing-meta,
.pf-pairing-bridge-label,
.pf-pairing-bridge-card > div > span,
.pf-pairing-bridge-score span {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  text-transform: uppercase;
}
.pf-pairing-kicker {
  color: var(--champagne, #B8965A);
  font-size: 8px;
  letter-spacing: .2em;
}
.pf-pairing-seal {
  padding: 5px 7px;
  border: 1px solid var(--rule-gold, rgba(184, 150, 90, .3));
  color: var(--burgundy, #641322);
  font-size: 7px;
  letter-spacing: .18em;
}
.pf-pairing-lead,
.pf-pairing-error,
.pf-pairing-stale {
  margin: 0 0 12px;
  color: var(--muted, rgba(24, 22, 20, .6));
  font-size: 11.5px;
  font-weight: 300;
  line-height: 1.75;
}
.pf-pairing-error,
.pf-pairing-stale {
  padding: 8px 0 8px 10px;
  border-left: 2px solid var(--burgundy, #641322);
  color: var(--burgundy, #641322);
}
.pf-pairing-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 14px 0;
  border-top: 1px solid var(--rule-color, rgba(24, 22, 20, .12));
  border-bottom: 1px solid var(--rule-color, rgba(24, 22, 20, .12));
  color: var(--muted, rgba(24, 22, 20, .6));
  font-size: 8px;
  letter-spacing: .12em;
}
.pf-pairing-meta span { padding: 9px 8px; }
.pf-pairing-meta span + span { border-left: 1px solid var(--rule-color, rgba(24, 22, 20, .12)); }
.pf-pairing-meta strong {
  margin-left: 4px;
  color: var(--burgundy, #641322);
  font-family: var(--font-display, serif);
  font-size: 16px;
  font-weight: 300;
}
.pf-pairing-cta { margin-top: 12px; }
.pf-pairing-coverage {
  margin: 10px 0;
  padding-top: 8px;
  border-top: 1px solid var(--rule-color, rgba(24, 22, 20, .12));
}
.pf-pairing-coverage summary {
  color: var(--muted, rgba(24, 22, 20, .6));
  cursor: pointer;
  font-family: var(--font-mono, monospace);
  font-size: 8px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.pf-pairing-coverage p {
  margin: 7px 0 0;
  color: var(--faint, rgba(24, 22, 20, .45));
  font-size: 10.5px;
  line-height: 1.65;
}
.pf-pairing-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 50px;
}
.pf-pairing-loading > span {
  position: relative;
  width: 54px;
  height: 1px;
  overflow: hidden;
  background: var(--rule-color, rgba(24, 22, 20, .12));
}
.pf-pairing-loading > span::after {
  position: absolute;
  inset: 0 auto 0 0;
  width: 45%;
  background: var(--burgundy, #641322);
  content: '';
  animation: pfPairingScan 1.2s cubic-bezier(.32, .72, .24, 1) infinite alternate;
}
.pf-pairing-loading p { margin: 0; color: var(--muted, rgba(24, 22, 20, .6)); font-size: 10.5px; }
@keyframes pfPairingScan { from { transform: translateX(-100%); } to { transform: translateX(220%); } }

.pf-pairing-overall {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding: 2px 0 14px;
  border-bottom: 1px solid var(--burgundy, #641322);
}
.pf-pairing-overall > div { display: flex; align-items: baseline; gap: 10px; }
.pf-pairing-overall span { color: var(--muted, rgba(24, 22, 20, .6)); font-size: 8px; letter-spacing: .14em; }
.pf-pairing-overall strong {
  color: var(--burgundy, #641322);
  font-family: var(--font-display, serif);
  font-size: 38px;
  font-weight: 300;
  line-height: .8;
}
.pf-pairing-overall p { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--ink, #181614); font-size: 10.5px; }
.pf-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--stone, #D8D1C5); }
.pf-status-resonant,
.pf-status-harmonious { background: var(--status-balanced, #5A6147); }
.pf-status-contrast { background: var(--champagne, #B8965A); }
.pf-status-bridge { background: var(--burgundy, #641322); }

.pf-pairing-interfaces { border-top: 1px solid var(--rule-color, rgba(24, 22, 20, .12)); }
.pf-pairing-interface {
  padding: 13px 0 14px;
  border-bottom: 1px solid var(--rule-color, rgba(24, 22, 20, .12));
}
.pf-pairing-interface-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}
.pf-pairing-interface-head > div:first-child { min-width: 0; }
.pf-pairing-layer-no { display: block; margin-bottom: 3px; color: var(--champagne, #B8965A); font-size: 7px; letter-spacing: .16em; }
.pf-pairing-interface-head > div > strong {
  display: block;
  overflow: hidden;
  color: var(--ink, #181614);
  font-family: var(--font-display, serif);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pf-pairing-score { display: flex; min-width: 58px; flex-direction: column; align-items: flex-end; }
.pf-pairing-score strong { color: var(--ink, #181614); font-family: var(--font-display, serif); font-size: 25px; font-weight: 300; line-height: .9; }
.pf-pairing-score span { color: var(--muted, rgba(24, 22, 20, .6)); font-size: 8px; }
.pf-pairing-track { height: 1px; margin: 10px 0 8px; background: var(--rule-color, rgba(24, 22, 20, .12)); }
.pf-pairing-track span { display: block; height: 2px; background: var(--stone, #D8D1C5); transition: width .45s cubic-bezier(.32, .72, .24, 1); }
.pf-pairing-resonant .pf-pairing-track span,
.pf-pairing-harmonious .pf-pairing-track span { background: var(--status-balanced, #5A6147); }
.pf-pairing-contrast .pf-pairing-track span { background: var(--champagne, #B8965A); }
.pf-pairing-bridge .pf-pairing-track span { background: var(--burgundy, #641322); }
.pf-pairing-interface > p { margin: 0; color: var(--muted, rgba(24, 22, 20, .6)); font-size: 10.5px; line-height: 1.65; }

.pf-pairing-bridges { margin-top: 11px; border-top: 1px solid var(--rule-gold, rgba(184, 150, 90, .3)); }
.pf-pairing-bridge-label { display: block; padding: 8px 0 4px; color: var(--champagne, #B8965A); font-size: 7px; letter-spacing: .18em; }
.pf-pairing-bridge-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule-color, rgba(24, 22, 20, .12));
}
.pf-pairing-bridge-card > div:first-child { min-width: 0; }
.pf-pairing-bridge-card > div > strong { display: block; color: var(--ink, #181614); font-family: var(--font-display, serif); font-size: 15px; font-weight: 300; }
.pf-pairing-bridge-card > div > span { color: var(--faint, rgba(24, 22, 20, .45)); font-size: 7px; letter-spacing: .1em; }
.pf-pairing-bridge-score { display: flex; align-items: baseline; gap: 4px; }
.pf-pairing-bridge-score strong { color: var(--burgundy, #641322); font-family: var(--font-display, serif); font-size: 20px; font-weight: 300; }
.pf-pairing-bridge-score span { color: var(--faint, rgba(24, 22, 20, .45)); font-size: 7px; letter-spacing: .08em; }
.pf-pairing-bridge-card small { grid-column: 1 / -1; color: var(--faint, rgba(24, 22, 20, .45)); font-family: var(--font-mono, monospace); font-size: 8px; }

.pf-pairing-spoons { margin-top: 12px; }
.pf-pairing-spoons summary { color: var(--ink, #181614); cursor: pointer; font-family: var(--font-display, serif); font-size: 14px; }
.pf-pairing-spoons summary span { margin-left: 4px; color: var(--champagne, #B8965A); font-family: var(--font-mono, monospace); font-size: 8px; }
.pf-pairing-spoons ul { margin: 8px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule-color, rgba(24, 22, 20, .12)); }
.pf-pairing-spoons li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px solid var(--rule-color, rgba(24, 22, 20, .12));
}
.pf-pairing-spoons li > span { color: var(--champagne, #B8965A); font-family: var(--font-mono, monospace); font-size: 8px; }
.pf-pairing-spoons li > strong { overflow: hidden; color: var(--muted, rgba(24, 22, 20, .6)); font-size: 9px; font-weight: 300; text-overflow: ellipsis; white-space: nowrap; }
.pf-pairing-spoons li > em { color: var(--muted, rgba(24, 22, 20, .6)); font-family: var(--font-mono, monospace); font-size: 8px; font-style: normal; }
.pf-pairing-spoons li > em.pf-pairing-resonant,
.pf-pairing-spoons li > em.pf-pairing-harmonious { color: var(--status-balanced, #5A6147); }
.pf-pairing-spoons li > em.pf-pairing-contrast { color: var(--champagne, #B8965A); }
.pf-pairing-spoons li > em.pf-pairing-bridge { color: var(--burgundy, #641322); }
.pf-pairing-actions { display: flex; justify-content: flex-end; margin-top: 12px; }

@media (max-width: 900px) {
  .pf-editor-grid { grid-template-rows: minmax(240px, 42vh) minmax(0, 1fr); }
  .pf-editor-preview { order: -1; border-bottom: 1px solid var(--rule-color, rgba(24, 22, 20, .12)); }
  .pf-editor-form { order: 1; border-bottom: 0; }
  .pf-head-actions { gap: 6px; }
  .pf-tpl-tools { grid-template-columns: 1fr 1fr; }
  .pf-tpl-result { min-width: 0; text-align: left; }
}

@media (max-width: 600px) {
  .pf-overlay { align-items: stretch; padding: 0; }
  .pf-modal { max-height: 100dvh; min-height: 100dvh; border: 0; }
  .pf-modal-head { min-height: 62px; padding: 12px 14px; }
  .pf-modal-head h2 { max-width: 48vw; overflow: hidden; font-size: 23px; text-overflow: ellipsis; white-space: nowrap; }
  .pf-kicker { font-size: 8px; letter-spacing: .2em; }
  .pf-modal-body,
  .pf-editor-form,
  .pf-editor-preview { padding: 14px; }
  .pf-btn { padding: 7px 10px; letter-spacing: .1em; }
  .pf-head-actions .pf-btn-primary { min-width: 52px; }
  .pf-tools-popover { position: fixed; top: 62px; right: 12px; width: min(220px, calc(100vw - 24px)); }
  .pf-toolbar > .pf-btn { flex: 1 1 auto; }
  .pf-toolbar-meta { width: 100%; margin-left: 0; }
  .pf-card-grid { grid-template-columns: 1fr; }
  .pf-layer-head { flex-wrap: wrap; }
  .pf-layer-role { min-width: 160px; }
  .pf-state { order: 3; margin-left: 30px; }
  .pf-layer-btns { margin-left: auto; }
  .pf-tpl-grid { grid-template-columns: 1fr; }
  .pf-tpl-card { grid-template-columns: 104px minmax(0, 1fr); padding: 10px; }
  .pf-tpl-visual { min-height: 142px; }
  .pf-tpl-name { font-size: 17px; }
  .pf-tpl-desc { font-size: 10.5px; line-height: 1.5; }
  .pf-tpl-tools {
    top: -14px;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: -14px;
    padding-top: 14px;
  }
  .pf-tpl-result { margin: 0; }
  .pf-pairing-panel { padding: 14px; }
  .pf-pairing-interface-head { gap: 8px; }
  .pf-pairing-interface-head > div > strong { font-size: 15px; }
  .pf-pairing-spoons li { grid-template-columns: 24px minmax(0, 1fr); }
  .pf-pairing-spoons li > em { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .pf-overlay { animation: none; }
  .pf-btn,
  .pf-tpl-card,
  .pf-pairing-track span { transition: none; }
  .pf-pairing-loading > span::after { animation: none; }
}


/* ============================================================
   v632 — Cormorant Garamond lining figures
   Cormorant / var(--font-display) 預設 old-style（text）figures，
   數字 1 帶 serif 會被讀成 I（91 → 9I、81 → 8I）。v589/EP12 只修了
   .view-calculator .recipe-pairing-panel .recipe-flavor-* 那一小塊，
   本區塊補上全站其餘大號數字（score / KPI / 價格 / 統計 / 排名…）。
   只影響數字字形，不動字體、字級與版面。
   注意：tabular-nums 只固定字寬，單獨使用「不會」修好 old-style。
   ============================================================ */
.pf-pairing-overall strong,
.pf-pairing-score strong,
.pf-pairing-bridge-score strong {
  font-variant-numeric: lining-nums;
}