@font-face {
  font-family: "Noto Sans CJK SC";
  src: url("/manus-storage/NotoSansSC-VariableFont_wght_15fe4677.ttf") format("truetype-variations"),
       url("/manus-storage/NotoSansSC-VariableFont_wght_15fe4677.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

/* Poster-drawn text fonts (js/fonts.js) — Chinese via PingFang SC, English/
   numbers via Avenir Next World, per the design spec. Each is a static
   (non-variable) file for exactly one visual weight, so every one of these
   gets its own family name (matching js/fonts.js's FONT_BOLD/FONT_DEMI
   stacks) registered at font-weight: 400 — canvas always requests them with
   weight "normal", never a numeric weight, so the browser never synthesizes
   extra bold on top of an already-bold static file. */
@font-face {
  font-family: "PingFangSCBold";
  src: url("/manus-storage/pingfang-sc-bold_b7e9c160.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "PingFangSCSemibold";
  src: url("/manus-storage/PingFang SC Semibold_be8c0ba1.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "AvenirNextWorldBold";
  src: url("/manus-storage/Avenir Next World W05 Bold_7c3b4e7d.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "AvenirNextWorldDemi";
  src: url("/manus-storage/avenir-next-world-demi_fde72504.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Noto Sans CJK SC", "Source Han Sans SC", "Noto Sans SC", Arial, sans-serif;
  background: #f3f3f3;
  color: #222;
}

main {
  display: grid;
  grid-template-columns: 380px minmax(420px, 1fr);
  gap: 24px;
  padding: 24px;
  align-items: start;
}

h1 { font-size: 18px; margin: 0 0 8px; }

.lang-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #777;
  margin-bottom: 4px;
}
.lang-btn {
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 999px;
  border: 1px solid #ccc;
  background: #fff;
  color: #555;
}
.lang-btn.active {
  background: linear-gradient(90deg, #FF28AA, #1C85FF);
  border-color: transparent;
  color: #fff;
  font-weight: 700;
}

.controls {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #fff;
  padding: 18px;
  border-radius: 12px;
  height: max-content;
}

fieldset {
  border: 1px solid #e2e2e2;
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

legend { font-size: 13px; font-weight: 700; color: #555; padding: 0 4px; }

label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
label.inline { flex-direction: row; align-items: center; gap: 6px; font-size: 13px; }

input, select, button { font: inherit; padding: 8px; border-radius: 6px; border: 1px solid #ccc; }
input[type="checkbox"], input[type="radio"] { width: auto; padding: 0; }
input[type="range"] { padding: 0; }

.extra-tags { display: flex; flex-direction: column; gap: 8px; }
.extra-tag-row { display: flex; align-items: center; gap: 8px; }
.extra-tag-row input[type="checkbox"] { flex: none; }
.extra-tag-row input[type="text"],
.extra-tag-row input[type="number"] { flex: 1; min-width: 0; }

/* [hidden] and these classes have equal specificity, so an unconditional
   `display: flex` above would win the cascade tie and defeat the `hidden`
   attribute (see .loading-overlay above for the same pitfall). Only apply
   flex when NOT hidden, so the UA's [hidden]{display:none} rule wins instead. */
.extra-tag-multi:not([hidden]) { display: flex; flex-direction: column; gap: 6px; margin-left: 24px; }
.extra-tag-multi-row { display: flex; align-items: center; gap: 6px; }
.extra-tag-multi-row input[type="text"] { flex: 1; min-width: 0; }
.extra-tag-multi-row button { flex: none; padding: 4px 10px; }
.extra-tag-add-btn:not([hidden]) { align-self: flex-start; margin-left: 24px; padding: 4px 10px; font-size: 12px; }

button {
  cursor: pointer;
  background: #f5f5f5;
}
button:hover { background: #ececec; }
button.primary {
  background: linear-gradient(90deg, #FF28AA, #1C85FF);
  color: #fff;
  border: none;
  font-weight: 700;
}
button.primary:hover { filter: brightness(1.05); }

.row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

.hint { font-size: 12px; color: #777; margin: 0; }
.hint-calc {
  font-size: 12px;
  color: #1a6b2e;
  background: #eaf7ee;
  border: 1px solid #b6e0c4;
  border-radius: 4px;
  padding: 0.3rem 0.5rem;
  margin-top: 0.2rem;
  font-family: monospace;
}

.warnings:empty { display: none; }
.warnings {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.warnings .warning-item {
  background: #fff6e5;
  border: 1px solid #f0d38a;
  color: #7a5a00;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
}

.banner { padding: 10px 16px; font-size: 13px; }
.banner-warning { background: #fff2f0; color: #a8321f; border-bottom: 1px solid #f2c4bc; }
.banner code { background: #00000010; padding: 1px 5px; border-radius: 4px; }

.preview { display: flex; justify-content: center; }
.canvas-wrap {
  position: relative;
  width: min(100%, 640px);
  box-shadow: 0 4px 22px rgba(0,0,0,0.15);
  outline: none;
}
.canvas-wrap:focus-visible { box-shadow: 0 0 0 3px #1C85FF; }
canvas { display: block; width: 100%; height: auto; background: #fff; touch-action: none; cursor: grab; }
canvas.dragging { cursor: grabbing; }

.loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.75);
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  color: #333;
}
/* [hidden] and .loading-overlay have equal specificity, so an unconditional
   `display: flex` above would win the cascade tie and defeat the `hidden`
   attribute. Only apply flex when NOT hidden, so the UA's [hidden]{display:none}
   rule is what actually controls visibility. */
.loading-overlay:not([hidden]) {
  display: flex;
}

.history-list { display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow-y: auto; }
.history-item {
  display: flex;
  gap: 10px;
  align-items: center;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 6px;
}
.history-item img { width: 48px; height: 60px; object-fit: cover; border-radius: 4px; background: #f0f0f0; }
.history-item .meta { flex: 1; font-size: 12px; line-height: 1.4; }
.history-item .actions { display: flex; gap: 6px; }
.history-item .actions button { padding: 4px 8px; font-size: 12px; }
.history-empty { font-size: 12px; color: #888; }

@media (max-width: 850px) {
  main { grid-template-columns: 1fr; }
  .controls { order: 2; }
  .preview { order: 1; }
}