:root {
  color-scheme: light;
  --bg: #f6f7f9;
  --bg-deep: #f8f9fc;
  --card: #ffffff;
  --ink: #202936;
  --muted: #778392;
  --line: #e6e9ef;
  --teal: #7360c5;
  --teal-dark: #6752b7;
  --teal-soft: #f1f0fb;
  --warn: #6b4e2e;
  --shadow: 0 1px 2px rgba(34, 48, 74, 0.04), 0 10px 28px rgba(34, 48, 74, 0.05);
}
* { box-sizing: border-box; }
html, body { margin: 0; max-width: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "WenQuanYi Micro Hei", "Noto Sans CJK TC", sans-serif;
  line-height: 1.55;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.banner {
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  padding: 10px 20px;
  font-size: 14px;
}
.banner strong { font-weight: 700; }
header.site, nav.views, main { width: min(1600px, calc(100% - 16px)); margin: 0 auto; }
header.site {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-end;
  padding: 8px 0 4px;
}
h1 { font-size: 28px; line-height: 1.25; margin: 0; font-weight: 700; }
.sub, .eyebrow { margin: 0; color: var(--muted); }
.eyebrow { font-size: 13px; letter-spacing: 0.04em; }
.badge {
  margin: 0;
  border: 1px solid #dedfea;
  background: var(--teal-soft);
  color: var(--teal-dark);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
}
nav.views { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 8px; }
nav.views button {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  min-height: 44px;
}
nav.views button.on { background: var(--teal); border-color: var(--teal); color: white; }
main { padding-bottom: 40px; }
.workspace, .editor-workspace, .side-rail {
  display: grid;
  gap: 12px;
  align-items: start;
  min-width: 0;
}
.workspace { grid-template-columns: minmax(0, 1fr); }
.usage-card { order: 0; }
.col-settings { order: 1; }
.editor-workspace { order: 2; }
.workspace, .col, .card, .bench-scroll { min-width: 0; }
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 16px;
}
.card h2 { margin: 0 0 12px; font-size: 16px; }
.card h3 { margin: 14px 0 8px; font-size: 13px; color: var(--muted); font-weight: 700; }
.note { color: var(--muted); font-size: 13px; line-height: 1.6; }
.soon { color: var(--warn); font-size: 12px; margin-left: 6px; }
label { display: block; margin: 12px 0 6px; font-size: 14px; }
input[type="text"], input[type="tel"], input[type="number"], select, textarea {
  width: 100%;
  background: #ffffff;
  border: 1px solid #dce1e9;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 16px;
}
textarea { min-height: 88px; resize: vertical; }
input[type="range"] { width: 100%; accent-color: var(--teal); }
.tape {
  width: 100%;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 28px;
  gap: 10px;
  align-items: center;
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px;
  margin: 0 0 8px;
  min-height: 64px;
}
.tape.on { border-color: var(--teal); background: var(--teal-soft); box-shadow: inset 0 0 0 1px var(--teal); }
.tape:disabled { opacity: 0.55; cursor: not-allowed; }
.swatch {
  width: 92px; height: 40px; border-radius: 6px;
  display: grid; place-items: center;
  border: 1px solid rgba(36, 30, 24, 0.18);
  overflow: hidden;
}
.swatch .ink { font-weight: 700; letter-spacing: 0.06em; font-size: 16px; }
.swatch .ink.gold {
  background-image: linear-gradient(#f3d98b, #c9973e 50%, #e9c46a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tape-copy { min-width: 0; }
.tape-copy strong, .tape-copy b, .tape-copy small { display: block; }
.tape-copy strong { font-size: 13px; }
.tape-copy b { font-size: 14px; font-weight: 700; }
.tape-copy small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.tick {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid #d7dce2; color: transparent;
  display: grid; place-items: center; font-size: 13px;
}
.tape.on .tick { background: var(--teal); border-color: var(--teal); color: white; }
.col-settings, .col-props { max-height: none; position: static; }
.tape-drawer summary { cursor: pointer; font-weight: 700; padding: 4px 0 8px; }
.usage-card { padding: 8px 12px; }
.usage-card h2 { font-size: 15px; margin: 0 0 2px; }
.usage-card p, .usage-card li { margin: 2px 0; font-size: 13px; line-height: 1.35; }
.usage-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: start; }
.usage-card h2, .picker-dock h2, .col-canvas h2 { margin-bottom: 4px; }
.picker-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.picker-bar button { min-height: 44px; max-width: 100%; white-space: normal; text-align: left; }
.picker-dock { position: relative; min-width: 0; }
#chooser-popover {
  position: relative; z-index: 5; margin-top: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); max-height: min(70vh, 520px); overflow: auto; padding: 12px;
}
.chooser-head, .chooser-cats { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.chooser-cats { justify-content: flex-start; margin: 8px 0; }
.price-compact { margin-top: 4px; }
.col-canvas { padding: 8px 10px; }
.col-canvas > p { margin: 2px 0; }
.props { border-top: 4px solid var(--teal); }
.props h2 { background: var(--teal-soft); margin: -16px -16px 12px; padding: 12px 16px; border-radius: 16px 16px 0 0; }
.view-tools, .exports, .row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.view-tools button { min-height: 32px; padding: 4px 8px; font-size: 13px; }
.bench-scroll { width: max-content; max-width: 100%; overflow: auto; background: var(--bg-deep); border-radius: 8px; padding: 4px; }
.sheet { display: grid; grid-template-columns: 32px max-content; grid-template-rows: 26px max-content; width: max-content; }
.corner, .ruler { background: #f8f9fc; }
.corner { display: grid; place-items: center; font-size: 10px; color: var(--muted); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ruler { position: relative; overflow: hidden; }
.ruler.x { border-bottom: 1px solid var(--line); }
.ruler.y { border-right: 1px solid var(--line); }
.ruler i { position: absolute; background: #7b8494; }
.ruler.x i { bottom: 0; width: 1px; }
.ruler.y i { right: 0; height: 1px; }
.ruler i.min { height: 4px; width: 1px; }
.ruler.y i.min { width: 4px; height: 1px; }
.ruler i.mid { height: 8px; }
.ruler.y i.mid { width: 8px; }
.ruler i.maj { height: 12px; background: var(--ink); }
.ruler.y i.maj { width: 12px; }
.ruler span { position: absolute; font-size: 10px; color: var(--ink); }
.ruler.x span { top: 0; transform: translateX(2px); }
.ruler.y span { left: 1px; transform: translateY(2px); }
.canvas-box { position: relative; width: max-content; touch-action: none; cursor: grab; }
.canvas-box:active { cursor: grabbing; }
.canvas-box canvas { display: block; box-shadow: 0 8px 18px rgba(34, 48, 74, 0.12); }
.overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.guide { fill: none; stroke: rgba(168, 148, 235, 0.65); stroke-dasharray: 6 4; }
.sel { fill: rgba(115, 96, 197, 0.08); stroke: var(--teal); stroke-width: 2; stroke-dasharray: 7 4; }
.seg { display: flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.seg button { flex: 1; min-height: 44px; background: #ffffff; border: 0; color: var(--muted); }
.seg button.on { background: var(--teal-soft); color: var(--ink); font-weight: 700; }
.btn, .btn.ghost, #btn-add-line, #btn-create-order, #media-toggle {
  min-height: 44px; border-radius: 10px; padding: 10px 14px; border: 0; font-weight: 700;
}
.btn, #btn-add-line, #btn-create-order, #media-toggle:not(:disabled) { background: var(--teal); color: white; }
.btn.ghost, .view-tools button { background: white; color: var(--ink); border: 1px solid var(--line); font-weight: 600; }
button:disabled { opacity: 0.55; cursor: not-allowed; }
.price-card { margin-top: 12px; background: #ffffff; border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.kicker { margin: 0; color: var(--teal-dark); font-size: 13px; font-weight: 700; }
.price-total { margin: 0; font-size: 16px; }
.price-total strong { font-size: 22px; letter-spacing: 0; }
.price-dl { margin: 8px 0; }
.price-dl div, .kv { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-top: 1px solid var(--line); font-size: 14px; }
.brother-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; margin: 8px 0; }
.brother-thumb { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 6px; min-width: 0; text-align: left; }
.brother-thumb img { display: block; width: 100%; height: 56px; object-fit: contain; background: #f8f9fc; }
.brother-thumb span, .brother-thumb small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.symbol-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 4px; margin: 8px 0; }
.symbol-button { font-size: 20px; min-height: 40px; background: white; border: 1px solid var(--line); border-radius: 6px; }
details summary { cursor: pointer; font-weight: 700; padding: 8px 0; }
.media-showcase { margin-top: 0; }
.media-showcase p { margin: 0 0 2px; font-size: 12px; line-height: 1.35; }
.media-disclaimer { font-weight: 700; }
.media-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; align-items: start; }
.media-stage {
  width: min(100%, 168px); aspect-ratio: 4 / 3; max-height: 112px; background: #f8f9fc;
  border: 1px dashed #dce1e9; border-radius: 8px;
  display: grid; place-items: center; text-align: center; padding: 4px; overflow: hidden;
}
.media-stage video { width: 100%; height: 100%; object-fit: contain; background: #202936; }
.clip-missing { margin: 0; font-size: 14px; font-weight: 700; }
.media-playlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.media-playlist li { border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; background: #fff; font-size: 12px; line-height: 1.3; }
.media-playlist li[aria-current="true"] { border-color: var(--teal); background: var(--teal-soft); }
.demo-banner { border: 2px solid var(--teal); background: #f1f0fb; }
.demo-title { margin: 0 0 6px; font-size: 22px; font-weight: 800; }
.line-card, .prod-line { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin: 0 0 12px; }
.line-card { display: grid; gap: 8px; }
.proof { width: min(100%, 420px); height: auto; background: var(--bg-deep); border-radius: 6px; }
pre.line-text { white-space: pre-wrap; font-family: inherit; background: #ffffff; border-radius: 8px; padding: 8px; margin: 0; }
.status-pill { display: inline-block; border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; background: white; }
.errors { color: #7a2e24; padding-left: 18px; }
.handoff h3 { margin-top: 18px; }
.handoff ol, .handoff ul { padding-left: 20px; }
footer { color: var(--muted); font-size: 12px; text-align: center; padding: 8px 16px 28px; }
[hidden] { display: none !important; }
@media (max-width: 767px) {
  header.site { flex-direction: column; align-items: flex-start; }
  h1 { font-size: 24px; }
  .tape { grid-template-columns: 72px minmax(0, 1fr) 24px; }
  .swatch { width: 72px; }
  .picker-bar { display: grid; grid-template-columns: 1fr 1fr; }
  .picker-bar button { width: 100%; }
}
@media (min-width: 768px) {
  .workspace {
    grid-template-columns: clamp(160px, 18vw, 240px) minmax(0, 1fr);
    grid-template-areas: "tape usage" "tape editor";
  }
  .col-settings { grid-area: tape; order: 0; position: sticky; top: 8px; max-height: calc(100vh - 16px); overflow: auto; }
  .usage-card { grid-area: usage; }
  .editor-workspace {
    grid-area: editor;
    grid-template-columns: minmax(0, 1fr) clamp(200px, 26vw, 300px);
  }
  .side-rail { position: sticky; top: 8px; max-height: calc(100vh - 16px); overflow: auto; }
  .tape-drawer summary { display: none; }
  .picker-bar { flex-direction: column; align-items: stretch; }
  .picker-bar button { width: 100%; }
  .usage-layout { grid-template-columns: minmax(0, 1.2fr) minmax(160px, 0.8fr); }
  .media-layout { grid-template-columns: 120px minmax(0, 1fr); gap: 8px; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .tape { grid-template-columns: 52px minmax(0, 1fr) 22px; gap: 6px; padding: 6px; min-height: 0; }
  .swatch { width: 52px; height: 32px; }
  .col-settings.card { padding: 10px; }
  .tape-copy strong, .tape-copy b { font-size: 12px; }
}
body.canvas-expanded .col-settings,
body.canvas-expanded .side-rail,
body.canvas-expanded .usage-card { display: none; }
body.canvas-expanded .workspace,
body.canvas-expanded .editor-workspace { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 640px) {
  .exports, #order-actions { display: grid; grid-template-columns: 1fr; }
  .exports .btn, #btn-add-line, #btn-create-order { width: 100%; }
}


/* Visual reference menus */
.picker-bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.picker-bar button { display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.picker-icon { flex: 0 0 34px; width: 34px; height: 30px; display: inline-grid; place-items: center; font-size: 24px; color: var(--teal-dark); }
.picker-icon svg { width: 34px; height: 26px; }
.picker-copy { flex: 1; min-width: 0; font-size: 13px; }
.picker-chevron { margin-left: auto; }
.picker-bar button[aria-expanded="true"], .brother-thumb[aria-pressed="true"] { border-color: var(--teal); background: var(--teal-soft); }
.frame-preview { width: 100%; height: 56px; display: block; background: #f8f9fc; color: #273448; }
.font-choice { grid-column: 1 / -1; padding: 10px; }
.font-choice .font-sample { font-size: 23px; line-height: 1.6; white-space: normal; }
.symbol-button { min-height: 48px; font-size: 26px; }
.brother-thumb:focus-visible, .symbol-button:focus-visible, .picker-bar button:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
[hidden] { display: none !important; }

/* Buyer-focused editor: clear hierarchy, generous preview and readable controls. */
:root { --bg:#f6f7f9; --ink:#202936; --muted:#778392; --line:#e6e9ef; --teal:#7360c5; --teal-dark:#6752b7; --teal-soft:#f1f0fb; --shadow:0 4px 20px #22304a07; }
body { font-size:14px; }
header.site, nav.views, main { width:min(1580px, calc(100% - 64px)); }
.banner { text-align:center; font-size:12px; padding:7px 16px; background:#ffffff; color:#778392; border:0; }
header.site { padding:30px 0 23px; align-items:center; }
.eyebrow { font-size:10px; letter-spacing:.2em; color:var(--teal); margin-bottom:8px; font-weight:700; }
h1 { font-size:clamp(23px, 2vw, 32px); letter-spacing:.02em; line-height:1.4; }
.sub { margin-top:9px; font-size:14px; }
.badge { border:0; background:transparent; text-align:right; font-size:14px; color:var(--teal); padding:0; white-space:nowrap; }
.badge span { display:block; color:var(--muted); font-size:11px; margin-top:5px; }
nav.views { padding:0 0 20px; gap:6px; }
nav.views button { border:0; border-radius:8px; min-height:36px; padding:7px 16px; font-size:13px; color:var(--muted); }
.workspace { gap:20px; }
.card { border-radius:18px; padding:20px; }
.card h2 { font-size:16px; letter-spacing:.015em; margin:0 0 12px; }
.step-no { display:inline-grid; place-items:center; width:23px; height:23px; margin-right:5px; background:var(--teal-soft); color:var(--teal); border-radius:50%; font-size:10px; font-weight:600; vertical-align:middle; }
.note { font-size:12px; line-height:1.7; }
.col-settings.card { padding:18px 14px; }
.tape { grid-template-columns:54px minmax(0,1fr) 18px; gap:10px; padding:12px 10px; min-height:90px; border-radius:12px; margin-bottom:8px; transition:background .15s,border-color .15s; }
.tape:not(:disabled):hover { border-color:#a894eb; background:#f8f9fc; }
.swatch { width:54px; height:36px; border-radius:5px; box-shadow:0 2px 4px #0000000a; }
.swatch .ink { font-size:13px; }
.tape-copy strong { font-size:10px; font-weight:500; color:var(--muted); line-height:1.5; white-space:normal; overflow-wrap:normal; }
.tape-copy b { font-size:13px; line-height:1.5; margin:3px 0; word-break:normal; }
.tape-copy small { font-size:10px; line-height:1.5; }
.tick { width:18px; height:18px; font-size:11px; }
#tape-groups h3 { font-size:11px; margin:20px 0 10px; color:var(--muted); }
.editor-workspace, .side-rail { gap:16px; }
.editor-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:20px; }
.section-kicker { color:var(--muted); font-size:9px; letter-spacing:.16em; margin:0 0 6px; }
.editor-heading h2 { margin:0; }
.live-pill { font-size:10px; color:var(--teal); background:var(--teal-soft); padding:5px 9px; border-radius:20px; white-space:nowrap; }
.buyer-writing { background:#f8f9fc; border:1px solid var(--line); border-radius:12px; padding:14px; }
.buyer-writing label { display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px; font-size:13px; font-weight:600; margin:0 0 10px; }
.buyer-writing label span { color:var(--muted); font-size:10px; font-weight:400; }
#buyer-text { background:#fff; border:1px solid #dce1e9; min-height:98px; font-size:18px; line-height:1.65; padding:12px 14px; }
.starter-row { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:10px; }
.starter-row span { font-size:10px; color:var(--muted); margin-right:3px; }
.starter-row button { background:white; border:1px solid var(--line); border-radius:20px; padding:4px 10px; font-size:10px; min-height:28px; }
.starter-row button:hover { border-color:var(--teal); color:var(--teal); }
.preview-heading { display:flex; justify-content:space-between; gap:8px; margin:24px 0 10px; font-size:12px; font-weight:600; }
.preview-heading span:last-child { font-size:10px; color:var(--muted); font-weight:400; }
.view-tools { gap:4px; margin-bottom:10px; }
.view-tools button { background:#fff; border:1px solid var(--line); border-radius:6px; padding:4px 7px; font-size:10px; min-height:30px; }
#zoom-label { display:none; }
#btn-view-reset { display:none; }
.bench-scroll { width:100%; min-height:270px; background-color:#f8f9fc; background-image:radial-gradient(#d7dce2 0.7px,transparent 0.7px); background-size:14px 14px; border:1px solid #e7eaf1; border-radius:12px; padding:34px 16px; display:flex; align-items:center; justify-content:flex-start; overflow:auto; }
.sheet { margin:auto; flex:0 0 auto; box-shadow:0 12px 22px #1929431a; }
.col-canvas > .approx { font-size:10px; color:var(--muted); margin:10px 0 15px; }
.preview-details, .advanced-options { border-top:1px solid var(--line); padding-top:6px; margin-top:12px; }
.preview-details summary, .advanced-options summary { font-size:11px; color:var(--muted); font-weight:500; }
.preview-details p { font-size:11px; }
.price-compact { margin-top:16px; padding-top:18px; border-top:1px solid var(--line); }
.kicker { color:var(--muted); font-size:10px; }
.price-total { color:var(--teal-dark); margin:5px 0; }
.price-total strong { font-size:30px; font-weight:600; }
#price-sentence { color:var(--muted); font-size:11px; margin:4px 0; }
.price-card { margin-bottom:10px; }
.price-card summary { font-size:11px; color:var(--muted); font-weight:400; }
.exports { gap:8px; }
.exports .btn { background:white; color:var(--teal); border:1px solid var(--line); min-height:36px; font-size:11px; font-weight:500; border-radius:8px; }
.download-note { font-size:10px; }
#btn-add-line { width:100%; min-height:48px; border-radius:10px; font-size:14px; margin-top:5px; }
#btn-add-line:hover { background:var(--teal-dark); }
.picker-dock.card { padding:18px; }
.menu-intro { margin:0 0 14px; }
.picker-bar { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; }
.picker-bar button { display:flex; align-items:center; gap:12px; min-height:64px; padding:10px 12px; width:100%; border-radius:10px; background:#fff; }
.picker-bar button:hover { background:#f1f0fb; border-color:#a894eb; }
.picker-icon { flex:0 0 48px; width:48px; height:38px; border-radius:7px; background:#f1f0fb; color:var(--teal); font-size:25px; }
.picker-icon svg { width:44px; height:30px; }
.picker-copy { min-width:0; flex:1; text-align:left; }
.picker-copy strong { display:block; font-size:13px; font-weight:600; line-height:1.4; }
.picker-copy small { display:block; font-size:10px; color:var(--muted); line-height:1.5; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.picker-chevron { color:var(--muted); padding:0 2px; }
#insert-text-object { justify-content:center; min-height:36px; font-size:11px; border-style:dashed; color:var(--teal); font-weight:500; }
#chooser-popover { padding:12px; border-color:#dedfea; background:#ffffff; border-radius:12px; box-shadow:none; max-height:470px; }
.chooser-head { position:sticky; top:-12px; z-index:1; padding:6px 0; background:#ffffff; }
.chooser-head h3 { font-size:13px; margin:0; color:var(--ink); }
#chooser-close { background:white; border:1px solid var(--line); border-radius:6px; padding:4px 8px; font-size:11px; }
.chooser-cats { gap:4px; }
.chooser-cats .btn { font-size:10px; min-height:30px; padding:5px 7px; border-radius:6px; }
.chooser-cats button[aria-pressed="true"] { color:var(--teal); background:var(--teal-soft); border-color:var(--teal); }
#brother-search { font-size:12px; background:white; min-width:0; }
#brother-search + .note { font-size:10px; }
.brother-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.brother-thumb { padding:8px; border-radius:9px; }
.brother-thumb:hover { border-color:var(--teal); }
.frame-preview, .brother-thumb img { height:66px; background:#f8f9fc; border-radius:5px; }
.brother-thumb span { font-size:11px; margin-top:5px; }
.brother-thumb small { font-size:9px; margin-top:2px; color:var(--muted); }
.font-choice { padding:12px; }
.font-choice .font-sample { font-size:23px; overflow-wrap:anywhere; line-height:1.6; margin:0 0 5px; }
.symbol-gallery { grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
.symbol-button { height:48px; font-size:26px; color:var(--teal-dark); }
.symbol-button:hover { border-color:var(--teal); background:var(--teal-soft); }
#object-list { font-size:12px; background:#ffffff; }
.picker-dock > label { font-size:11px; }
.props { border-top:1px solid var(--line); }
.props h2 { background:none; margin:0 0 14px; padding:0; font-size:14px; }
.props label { font-size:12px; }
.props textarea, .props select, .props input[type="number"] { font-size:13px; background:#ffffff; }
.props .note { font-size:10px; }
.props .seg button { font-size:11px; }
.usage-card { padding:16px 20px; }
.usage-card > summary { display:flex; justify-content:space-between; gap:12px; font-size:12px; padding:0; }
.usage-card > summary span { font-size:10px; color:var(--muted); font-weight:400; }
.usage-card .usage-layout { margin-top:16px; }
@media(min-width:1200px) {
  .workspace { grid-template-columns:256px minmax(0,1fr); grid-template-areas:"tape editor" "usage usage"; }
  .editor-workspace { grid-template-columns:minmax(0,1fr) 336px; }
  .col-settings { position:sticky; top:20px; max-height:calc(100vh - 40px); }
  .side-rail { position:static; max-height:none; overflow:visible; }
}
@media(min-width:768px) and (max-width:1199px) {
  header.site, nav.views, main { width:calc(100% - 40px); }
  .workspace { grid-template-columns:minmax(0,1fr); grid-template-areas:"tape" "editor" "usage"; }
  .col-settings { position:static; max-height:none; }
  #tape-groups { display:flex; gap:10px; overflow:auto; align-items:stretch; padding-bottom:8px; }
  #tape-groups h3 { display:none; }
  .tape { flex:0 0 230px; margin:0; }
  .editor-workspace { grid-template-columns:minmax(0,1fr) 304px; }
  .side-rail { position:static; max-height:none; overflow:visible; }
  .bench-scroll { min-height:250px; }
}
@media(max-width:767px) {
  header.site, nav.views, main { width:calc(100% - 28px); }
  header.site { padding:22px 0 16px; }
  h1 { font-size:23px; }
  .badge { display:none; }
  .sub { font-size:12px; }
  nav.views { gap:2px; padding-bottom:14px; }
  nav.views button { font-size:11px; padding:6px 10px; }
  .workspace { display:flex; flex-direction:column; gap:14px; }
  .col-settings { width:100%; order:0; }
  .tape-drawer h2 { display:none; }
  .tape-drawer summary { font-size:14px; }
  #tape-groups { display:flex; gap:8px; overflow:auto; padding:4px 0 10px; }
  #tape-groups h3 { display:none; }
  .tape { flex:0 0 235px; margin:0; }
  .editor-workspace { width:100%; order:1; grid-template-columns:minmax(0,1fr); }
  .usage-card { width:100%; order:2; }
  .card { padding:16px; border-radius:14px; }
  .buyer-writing { padding:12px; }
  #buyer-text { font-size:16px; }
  .bench-scroll { min-height:220px; padding:28px 10px; }
  .live-pill { font-size:9px; }
  .editor-heading h2 { font-size:15px; }
  .picker-bar { grid-template-columns:minmax(0,1fr); }
  .brother-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .side-rail { position:static; max-height:none; }
  .usage-layout { grid-template-columns:1fr; }
}
body.canvas-expanded .workspace { grid-template-areas:"editor"; }
body.canvas-expanded .editor-workspace { grid-template-columns:minmax(0,1fr); }
@media(prefers-reduced-motion:reduce) { * { transition:none !important; } }


/* Visual reference: Figma QOiMK9FTXpb2oOVrtafLLg / 2:12 */
:root {
 --bg:#f6f7f9; --bg-deep:#f8f9fc; --card:#FFFFFF;
 --ink:#202936; --muted:#778392; --line:#e6e9ef;
 --teal:#7360c5; --teal-dark:#6752b7; --teal-soft:#f1f0fb;
 --gold:#7360c5; --desk:#f8f9fc; --soft:#f1f0fb;
 --shadow:0 3px 16px rgba(34,48,74,.028);
}
body { font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif; }
.banner { background:#ffffff; color:var(--muted); font-size:12px; line-height:1.65; }
.eyebrow { color:#6752b7; font-size:11px; letter-spacing:.16em; }
h1 { color:var(--ink); }
header.site { padding:28px 0 22px; }
.badge { color:var(--ink); }
.badge span { color:var(--muted); }
.card { background:var(--card); border-color:#e6e9ef; border-radius:16px; }
.step-no { background:#f1f0fb; color:#6752b7; }
.live-pill { background:var(--soft); color:var(--teal); }
.section-kicker { color:var(--muted); }
.col-canvas.card { padding:24px; }
.buyer-writing { background:transparent; border:0; padding:0; }
#buyer-text { min-height:100px; padding:12px 14px; color:var(--ink); border-color:var(--line); border-radius:9px; font-size:17px; line-height:1.6; }
#buyer-text:focus { outline:2px solid #a894eb; outline-offset:2px; }
.buyer-writing label { font-size:14px; }
.buyer-writing label span { font-size:11px; }
.starter-row { margin-top:12px; gap:8px; }
.starter-row span, .starter-row button { font-size:11px; }
.starter-row button { background:var(--bg); border-color:#dedfea; color:var(--muted); padding:5px 11px; }
.starter-row button:hover { color:var(--ink); background:#f1f0fb; border-color:#a894eb; }
.preview-heading { margin-top:24px; }
.preview-heading span:first-child { font-size:13px; }
.preview-heading span:last-child { font-size:11px; }
.bench-scroll { width:100%; max-width:100%; min-height:290px; padding:30px 16px; background:var(--desk); background-image:none; border:0; border-radius:12px; }
.sheet { margin:auto; box-shadow:0 10px 22px rgba(25,41,67,.10); }
.corner, .ruler { background:#f8f9fc; color:var(--muted); }
.ruler span { color:var(--muted); }
.approx { font-size:11px !important; line-height:1.65; }
.view-tools { gap:5px; }
.view-tools button { font-size:11px; border-color:var(--line); min-height:32px; }
.view-tools button:hover:not(:disabled) { color:var(--ink); border-color:#a894eb; background:#f8f9fc; }
button:disabled { opacity:.45; }
.tape { padding:12px 10px; }
.tape:not(:disabled):hover { background:#f1f0fb; border-color:#a894eb; }
.tape.on { background:var(--soft); border-color:var(--teal); }
.tape-copy strong { font-size:11px; }
.tape-copy b { color:var(--ink); font-size:13px; line-height:1.55; }
.tape-copy small { font-size:11px; line-height:1.55; }
#tape-groups h3 { font-size:12px; }
.picker-icon { background:var(--bg); color:var(--teal); border-radius:7px; }
.picker-bar button { background:var(--card); border-color:var(--line); min-height:68px; }
.picker-bar button:hover { background:#f1f0fb; border-color:#a894eb; }
.picker-bar button[aria-expanded="true"] { border-color:var(--teal); background:var(--soft); }
.picker-copy strong { color:var(--ink); font-size:14px; }
.picker-copy small { font-size:11px; color:var(--muted); }
.menu-intro { font-size:12px; }
#chooser-popover, .chooser-head { background:#ffffff; }
#chooser-popover { border-color:#dedfea; }
.frame-preview, .brother-thumb img { background:#f8f9fc; }
.brother-thumb span { font-size:12px; }
.brother-thumb small { font-size:10px; }
#insert-text-object { color:var(--teal); font-size:12px; }
#object-list { background:#ffffff; border-color:var(--line); font-size:13px; }
.advanced-options summary, .preview-details summary { font-size:12px; }
.props label { color:var(--ink); font-size:13px; }
.props .note { font-size:11px; }
.props textarea, .props select, .props input[type="number"] { background:#ffffff; border-color:var(--line); }
.price-total { color:var(--ink); }
.price-total strong { font-size:30px; }
#price-sentence { font-size:12px; }
.kicker { font-size:11px; }
.exports .btn { color:var(--ink); border-color:var(--line); font-size:12px; }
.exports .btn:hover { background:var(--bg); }
#btn-add-line { background:var(--teal); color:white; min-height:48px; }
#btn-add-line:hover { background:var(--teal-dark); }
@media(min-width:1440px) {
 .workspace { grid-template-columns:256px minmax(0,1fr); }
 .editor-workspace { grid-template-columns:minmax(0,1fr) 324px; gap:20px; }
}
@media(min-width:1200px) and (max-width:1439px) {
 header.site, nav.views, main { width:calc(100% - 48px); }
 .workspace { grid-template-columns:236px minmax(0,1fr); gap:16px; }
 .editor-workspace { grid-template-columns:minmax(0,1fr) 288px; gap:16px; }
 .col-canvas.card { padding:20px; }
 .tape { grid-template-columns:46px minmax(0,1fr) 16px; gap:8px; }
 .swatch { width:46px; }
}
@media(max-width:767px) {
 .col-canvas.card { padding:16px; }
 .bench-scroll { min-height:220px; padding:28px 10px; }
 #buyer-text { font-size:16px; }
 .preview-heading { flex-wrap:wrap; }
 .banner { font-size:11px; padding:7px 14px; }
}


/* Jason 白底樣板：白色、淺灰與淡紫色介面配色。 */
:root { --shadow:0 6px 26px #22304a07; }
input[type="text"], input[type="tel"], input[type="number"], select, textarea { color:#273448; }
:focus-visible { outline-color:#a894eb; }
.banner { border-bottom:1px solid #e8eaf0; }
.badge { color:#6752b7; }
.card h3 { color:#5d697b; }
.frame-preview { color:#273448; }
.tick { border-color:#d7dce2; }