/* Flavor card workspace · GELATOlab atelier */
.lfw-dialog { box-sizing: border-box; width: min(1180px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 1px solid #B8965A; border-radius: 0; background: #F7F2E8; color: #181614; font-family: 'Manrope', 'Microsoft JhengHei', sans-serif; }
.lfw-dialog::backdrop { background: rgba(24,22,20,.5); }
.lfw-dialog * { box-sizing: border-box; }
.lfw-header { position: sticky; top: 0; z-index: 2; background: #F7F2E8; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 28px; border-bottom: 1px solid #D8D1C5; }
.lfw-header small { font: 10px 'IBM Plex Mono', monospace; letter-spacing: .16em; color: #641322; }
.lfw-header h2 { margin: 8px 0 0; font: 400 26px 'Noto Serif TC', serif; }
.lfw-body { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr); gap: 28px; padding: 24px 28px; }
.lfw-controls, .lfw-output { min-width: 0; }
.lfw-controls label { display: grid; gap: 8px; font-size: 13px; }
.lfw-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lfw-dialog select, .lfw-dialog textarea { width: 100%; min-width: 0; min-height: 44px; background: #FBFAF6; color: #181614; border: 1px solid #D8D1C5; border-radius: 0; padding: 8px; font: inherit; }
.lfw-dialog textarea { resize: vertical; }
.lfw-dialog button { min-height: 44px; padding: 8px 14px; background: transparent; color: #641322; border: 1px solid #B8965A; border-radius: 0; font: inherit; font-size: 13px; cursor: pointer; }
.lfw-dialog button:hover { background: #EDE6DA; }
.lfw-dialog button:disabled { opacity: .4; cursor: not-allowed; }
.lfw-dialog :focus-visible { outline: 2px solid #641322; outline-offset: 2px; }
.lfw-hint { font-size: 12px; line-height: 1.8; color: #75695C; margin: 12px 0; }
.lfw-chosen { margin: 20px 0; border-top: 1px solid #D8D1C5; }
.lfw-chosen-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; font-size: 13px; }
.lfw-chosen-head strong { font-weight: 400; }
.lfw-note { display: grid; grid-template-columns: 1fr 100px 44px; gap: 8px; align-items: center; padding: 4px 0; font-size: 13px; }
.lfw-vocabulary details { border-top: 1px solid #D8D1C5; }
.lfw-vocabulary summary { cursor: pointer; min-height: 48px; padding: 14px 0; font-size: 14px; }
.lfw-vocabulary summary i { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; }
.lfw-vocabulary summary small { margin-left: 8px; font-size: 11px; color: #75695C; }
.lfw-vocabulary details > div { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 16px; }
.lfw-vocabulary [aria-pressed="true"] { background: #641322; color: #F7F2E8; border-color: #641322; }
.lfw-vocabulary button[aria-pressed="true"]:hover { background: #4A0E18; color: #F7F2E8; }
.lfw-preview { background: #EDE6DA; border: 1px solid #D8D1C5; padding: 8px; }
.lfw-preview svg { display: block; width: 100%; height: auto; }
.lfw-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.lfw-status { min-height: 24px; color: #641322; font-size: 13px; line-height: 1.7; }
.lfw-tea-guide { border-top: 1px solid #D8D1C5; padding: 16px 0 0; }
.lfw-tea-guide[hidden] { display: none; }
.lfw-tea-guide h3 { margin: 0; color: #641322; font: 400 20px 'Noto Serif TC', serif; }
.lfw-tea-guide input { width: 100%; min-width: 0; min-height: 44px; padding: 10px 0; border: 0; border-bottom: 1px solid #B8965A; border-radius: 0; background: transparent; color: #181614; font: inherit; }
.lfw-domain-filter { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; }
.lfw-domain-filter button { border: 0; border-bottom: 2px solid transparent; padding: 8px 10px; }
.lfw-domain-filter [aria-pressed="true"] { border-bottom-color: #641322; }
.lfw-tea-vocabulary details > div { display: grid; grid-template-columns: 1fr; }
.lfw-tea-vocabulary button { text-align: left; }
.lfw-tea-vocabulary button small { display: block; margin-top: 5px; line-height: 1.6; font-size: 12px; color: #75695C; }
.lfw-tea-vocabulary button[aria-pressed="true"] small { color: #F7F2E8; }
.lfw-note span small { display: block; margin-top: 3px; color: #75695C; font-size: 11px; }
@media (max-width: 760px) {
  .lfw-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .lfw-header { padding: 16px; }
  .lfw-header h2 { font-size: 22px; }
  .lfw-body { grid-template-columns: 1fr; padding: 16px; gap: 16px; }
  .lfw-output { border-top: 1px solid #D8D1C5; padding-top: 16px; }
  .lfw-actions button { flex: 1 1 100px; }
  .lfw-fields { grid-template-columns: 1fr; }
}