/* tiles.quest — 依 design-tokens 規範：OKLCH light theme、最小字級 18px、正文 24px。
   積木零件的顏色是實體積木色號（作品資料），不屬於介面 token。 */
:root {
  /* 背景 */
  --bg-base: oklch(0.97 0.005 250);
  --bg-surface: oklch(0.94 0.005 250);
  --bg-overlay: oklch(0.90 0.008 250);
  --bg-hover: oklch(0.92 0.005 250);
  --bg-paper: #ffffff; /* 圖卡紙面：列印用白 */
  /* 文字 */
  --text-primary: oklch(0.20 0.01 250);
  --text-secondary: oklch(0.45 0.01 250);
  --text-muted: oklch(0.60 0.008 250);
  /* 語意 */
  --color-pass: oklch(0.48 0.16 150);
  --color-critical: oklch(0.55 0.22 25);
  --color-medium: oklch(0.52 0.14 80);
  --color-high: oklch(0.55 0.16 55);
  --color-link: oklch(0.48 0.15 250);
  --color-pink: oklch(0.52 0.17 340);
  --color-purple: oklch(0.50 0.17 300);
  --color-cyan: oklch(0.48 0.10 200);
  --color-indigo: oklch(0.48 0.15 280);
  --badge-medium-bg: oklch(0.92 0.04 80);
  --badge-critical-bg: oklch(0.92 0.06 25);
  --border-subtle: oklch(0.85 0.005 250);
  /* 積木子站色（同品牌的平面、立體同色）：智高＝pass 綠、拼豆＝pink、LEGO＝critical 紅、Qbi＝high 橘、
     加加＝link 藍、LaQ＝indigo、磁力片＝cyan、KAPLA＝medium 琥珀、Lasy＝purple */
  --kit-gigo: var(--color-pass);
  --kit-perler: var(--color-pink);
  --kit-lego: var(--color-critical);
  --kit-qbi: var(--color-high);
  --kit-plusplus: var(--color-link);
  --kit-laq: var(--color-indigo);
  --kit-magtiles: var(--color-cyan);
  --kit-kapla: var(--color-medium);
  --kit-lasy: var(--color-purple);
  /* 字級 */
  --text-xs: 1.125rem;  /* 18px */
  --text-sm: 1.25rem;   /* 20px */
  --text-base: 1.5rem;  /* 24px */
  --text-lg: 1.75rem;   /* 28px */
  --text-xl: 2rem;      /* 32px */
  --text-2xl: 3rem;     /* 48px */
  --text-3xl: 3.5rem;   /* 56px */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
@supports not (color: oklch(0 0 0)) {
  :root {
    --bg-base: #f5f6f8; --bg-surface: #ecedf0; --bg-overlay: #dfe0e5; --bg-hover: #e5e6ea;
    --text-primary: #1e2030; --text-secondary: #5e6070; --text-muted: #8a8c98;
    --color-pass: #1e8050; --color-critical: #c93135; --color-medium: #8a7020; --color-high: #b86a2a; --color-link: #1e5ab8; --color-pink: #b8306a;
    --color-purple: #7830b8; --color-cyan: #1e7a8a; --color-indigo: #4830b8;
    --badge-medium-bg: #fcf5e8; --badge-critical-bg: #fce8e8; --border-subtle: #d5d6da;
  }
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body { margin: 0; background: var(--bg-base); color: var(--text-primary); font-family: var(--font); font-size: var(--text-base); line-height: 1.6; }
a { color: var(--color-link); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; }
h1, h2, h3 { line-height: 1.3; text-wrap: balance; font-weight: 700; color: var(--text-primary); }
h1 { font-size: var(--text-2xl); margin: 0.25rem 0; }
h2 { font-size: var(--text-xl); margin: 0 0 1rem; }
h3 { font-size: var(--text-lg); margin: 0 0 0.5rem; }
@media (max-width: 640px) { h1 { font-size: var(--text-xl); } h2 { font-size: var(--text-lg); } }
p { margin: 0 0 0.5rem; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--color-link); outline-offset: 2px; }

.wrap { max-width: 72rem; margin: 0 auto; padding-inline: 1rem; }
.narrow { max-width: 44rem; }
main.wrap { padding-block: 1rem 2.5rem; display: flex; flex-direction: column; gap: 2rem; }
main.narrow { gap: 1rem; }
.muted { color: var(--text-secondary); font-size: var(--text-xs); }
.empty { color: var(--text-secondary); }
.notice { background: var(--badge-medium-bg); border: 1px solid var(--color-medium); padding: 0.75rem 1rem; margin: 0; border-radius: 0.5rem; }
.error { background: var(--badge-critical-bg); border: 1px solid var(--color-critical); color: var(--color-critical); padding: 0.75rem 1rem; margin: 0; border-radius: 0.5rem; }

.testbar { background: var(--text-primary); color: var(--bg-base); font-size: var(--text-xs); text-align: center; padding: 0.25rem; }
.top { border-bottom: 1px solid var(--border-subtle); background: var(--bg-base); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; padding-block: 0.75rem; }
.logo { display: flex; align-items: center; gap: 0.5rem; color: var(--text-primary); font-weight: 700; font-size: var(--text-lg); }
.logo:hover { text-decoration: none; }
.logo-mark { display: grid; grid-template-columns: repeat(2, 12px); gap: 2px; }
.logo-mark i { width: 12px; height: 12px; display: block; }
.logo-mark i:nth-child(1) { background: var(--kit-gigo); }
.logo-mark i:nth-child(4) { background: var(--kit-qbi); }
.logo-mark i:nth-child(2) { background: var(--kit-perler); }
.logo-mark i:nth-child(3) { background: var(--kit-lego); }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--bg-overlay); border: 1px solid var(--border-subtle); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--text-xs); color: var(--text-primary); flex-shrink: 0; }
.avatar:hover { text-decoration: none; }
.avatar.big { width: 56px; height: 56px; font-size: var(--text-base); }
.avatar.huge { width: 88px; height: 88px; font-size: var(--text-xl); background: var(--bg-base); }
.btn-line { background: var(--color-pass); color: var(--bg-base); font-weight: 700; font-size: var(--text-xs); padding: 0.5rem 1rem; border-radius: 0.5rem; display: inline-block; }
.btn-line:hover { text-decoration: none; filter: brightness(1.1); }
.btn-main { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; background: var(--color-pass); color: var(--bg-base); border: 0; font-weight: 700; font-size: var(--text-base); padding: 0.75rem 1.25rem; border-radius: 0.5rem; cursor: pointer; }
.btn-main:hover { text-decoration: none; filter: brightness(1.1); }
.btn-main:disabled { opacity: .5; cursor: default; }
.btn-ghost { display: inline-flex; align-items: center; justify-content: center; background: var(--bg-base); color: var(--text-primary); border: 1px solid var(--text-secondary); font-size: var(--text-sm); padding: 0.5rem 1rem; border-radius: 0.5rem; cursor: pointer; }
.btn-ghost:hover { background: var(--bg-hover); text-decoration: none; }
.btn-ghost.disabled { border-color: var(--border-subtle); color: var(--text-muted); cursor: default; }
.btn-danger { background: var(--color-critical); color: var(--bg-base); border: 0; font-size: var(--text-sm); padding: 0.5rem 1rem; border-radius: 0.5rem; cursor: pointer; }
.linkish { background: none; border: 0; padding: 0; color: var(--color-link); cursor: pointer; font-size: var(--text-xs); }
.linkish:hover { text-decoration: underline; }

.kitbar { background: var(--kit); color: var(--bg-base); }
.kitbar .wrap { display: flex; justify-content: space-between; align-items: center; padding-block: 0.5rem; }
.kitbar a { color: var(--bg-base); font-weight: 700; font-size: var(--text-sm); }
.kitbar .switch { font-weight: 400; font-size: var(--text-xs); }

.hero { background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle); }
.hero .wrap { padding-block: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.hero h1 { margin: 0; }
.portals { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin-top: 0.5rem; }
.portal { display: flex; flex-direction: column; background: var(--kit); color: var(--bg-base); border-radius: 0.5rem; overflow: hidden; }
.portal-main { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; color: var(--bg-base); font-size: var(--text-xl); }
.portal-main:hover { text-decoration: none; filter: brightness(1.1); }
.portal-main span:first-child { display: flex; flex-direction: column; }
.portal .modes { display: flex; gap: 0.5rem; padding: 0 1.25rem 0.875rem; }
.portal .modes a, .kit-hero .modes a { color: var(--bg-base); font-size: var(--text-xs); font-weight: 700; border: 2px solid currentColor; border-radius: 999px; padding: 0.125rem 0.75rem; }
.portal .modes a:hover, .kit-hero .modes a:hover { text-decoration: none; background: var(--bg-base); color: var(--text-primary); }
.kit-hero .modes { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.75rem; font-size: var(--text-xs); }
.portal strong { font-size: var(--text-lg); }
.portal small { font-size: var(--text-xs); }
.kit-hero { background: var(--kit); color: var(--bg-base); }
.kit-hero .wrap { padding-block: 1.5rem; }
.kit-hero h1 { color: var(--bg-base); margin: 0 0 0.5rem; }
.kit-hero p { max-width: 40em; }
.kit-hero small { font-size: var(--text-xs); }

.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.more { font-size: var(--text-sm); white-space: nowrap; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1.5rem 1rem; }
@media (max-width: 640px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.card { display: flex; flex-direction: column; gap: 0.25rem; color: var(--text-primary); min-width: 0; }
.card:hover { text-decoration: none; }
.card:hover strong { text-decoration: underline; }
.thumb { min-height: 0; overflow: hidden; aspect-ratio: 3 / 4; background: var(--bg-paper); border: 1px solid var(--border-subtle); border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; padding: 10%; }
.thumb svg { width: 100%; height: 100%; display: block; }
.card strong { font-size: var(--text-sm); line-height: 1.35; overflow-wrap: anywhere; }
.meta { font-size: var(--text-xs); color: var(--text-secondary); }
.badge { align-self: flex-start; background: var(--kit); color: var(--bg-base); font-size: var(--text-xs); font-weight: 700; padding: 0.125rem 0.5rem; border-radius: 0.25rem; }
.themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 1rem; }
.themes a { background: var(--bg-surface); border-radius: 0.5rem; padding: 1rem; color: var(--text-primary); display: flex; flex-direction: column; }
.themes a:hover { background: var(--bg-hover); text-decoration: none; }
.themes strong { font-size: var(--text-base); }
.themes small { color: var(--text-secondary); font-size: var(--text-xs); }
.creators { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; }
.creator { display: flex; gap: 0.75rem; align-items: center; padding: 1rem; background: var(--bg-surface); border-radius: 0.5rem; color: var(--text-primary); }
.creator:hover { background: var(--bg-hover); text-decoration: none; }
.creator span:last-child { display: flex; flex-direction: column; }
.creator small { color: var(--text-secondary); font-size: var(--text-xs); }
.cta { background: var(--bg-surface); border-radius: 0.5rem; padding: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.cta strong { font-size: var(--text-lg); }
.cta p { margin: 0; color: var(--text-secondary); }
.about .parts { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; gap: 1.5rem; flex-wrap: wrap; }
.about .parts li { display: flex; align-items: center; gap: 0.5rem; }
.swatches { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.sw { width: 32px; height: 32px; border: 1px solid var(--text-secondary); display: inline-block; border-radius: 0.25rem; }

.crumb { font-size: var(--text-xs); color: var(--text-secondary); }
.sort { display: flex; gap: 1rem; font-size: var(--text-sm); flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--border-subtle); padding-bottom: 0.5rem; color: var(--text-secondary); }
.sort a { color: var(--text-secondary); }
.sort a[aria-current] { color: var(--text-primary); font-weight: 700; border-bottom: 3px solid var(--text-primary); }
.seo { background: var(--bg-surface); border-radius: 0.5rem; padding: 1rem; font-size: var(--text-sm); color: var(--text-secondary); }
.seo h2 { font-size: var(--text-base); }

.work-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
@media (max-width: 760px) { .work-grid { grid-template-columns: 1fr; } }
.preview .sheet { min-height: 0; overflow: hidden; border: 6px solid var(--text-primary); background: var(--bg-paper); padding: 8%; aspect-ratio: 210 / 297; display: flex; align-items: center; justify-content: center; }
.preview .sheet svg { width: 100%; height: 100%; }
.info { display: flex; flex-direction: column; gap: 0.75rem; }
.info h1 { margin: 0; }
.by { display: flex; align-items: center; gap: 0.5rem; color: var(--text-primary); }
.chips { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.chips span { background: var(--bg-surface); border-radius: 999px; padding: 0.125rem 0.75rem; font-size: var(--text-xs); }
.hint { font-size: var(--text-xs); color: var(--text-secondary); margin: -0.25rem 0 0; text-align: center; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.donate { display: flex; gap: 1rem; align-items: center; padding: 1rem; background: var(--badge-medium-bg); border: 1px solid var(--color-medium); border-radius: 0.5rem; }
.donate img, .qr-empty { width: 120px; height: 120px; flex-shrink: 0; background: var(--bg-paper); border: 1px solid var(--border-subtle); object-fit: contain; border-radius: 0.25rem; }
.qr-empty { border-style: dashed; display: flex; align-items: center; justify-content: center; text-align: center; font-size: var(--text-xs); color: var(--text-secondary); }
.donate strong { font-size: var(--text-base); }
.donate p { margin: 0.25rem 0; font-size: var(--text-sm); }
.donate small { color: var(--text-secondary); font-size: var(--text-xs); }
.tabs { display: flex; gap: 1.5rem; border-bottom: 1px solid var(--border-subtle); margin-bottom: 0.25rem; font-size: var(--text-sm); }
.tabs strong { border-bottom: 3px solid var(--text-primary); padding: 0.5rem 0; }
.tabs span { padding: 0.5rem 0; font-size: var(--text-xs); }
.parts-list { list-style: none; padding: 0; margin: 0; max-width: 40rem; }
.parts-list li { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--text-sm); }
.parts-list li span { flex-grow: 1; }
.report summary { cursor: pointer; color: var(--text-secondary); font-size: var(--text-xs); }
.report form { display: flex; flex-direction: column; gap: 0.5rem; max-width: 30rem; margin-top: 0.75rem; font-size: var(--text-sm); }
.report textarea { border: 1px solid var(--border-subtle); padding: 0.5rem; border-radius: 0.25rem; background: var(--bg-paper); }

.creator-hero { background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle); }
.creator-hero .wrap { display: flex; gap: 1.25rem; align-items: center; padding-block: 1.5rem; }
.creator-hero h1 { margin: 0 0 0.25rem; }
.stats { font-size: var(--text-sm); color: var(--text-secondary); }
.stats strong { font-size: var(--text-lg); color: var(--text-primary); }

.form { display: flex; flex-direction: column; gap: 0.5rem; }
.form label { font-size: var(--text-sm); font-weight: 600; }
.form input:not([type=radio]):not([type=checkbox]):not([type=file]), .form select, .form textarea { border: 1px solid var(--border-subtle); padding: 0.5rem 0.75rem; background: var(--bg-paper); border-radius: 0.5rem; width: 100%; font-size: var(--text-base); }
.form fieldset { border: 0; padding: 0; margin: 0.5rem 0; display: flex; flex-direction: column; gap: 0.5rem; }
.form fieldset label { font-weight: 400; }
.form legend { font-weight: 600; font-size: var(--text-sm); margin-bottom: 0.25rem; }
.form .btn-main { margin-top: 0.5rem; }
.donate-set { border: 1px solid var(--color-medium); background: var(--badge-medium-bg); padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; border-radius: 0.5rem; }
.donate-set strong { font-size: var(--text-base); }
.donate-set p { margin: 0; font-size: var(--text-sm); }
.donate-set img { background: var(--bg-paper); border: 1px solid var(--border-subtle); object-fit: contain; }

.rows { list-style: none; padding: 0; margin: 0; }
.row { display: flex; gap: 0.75rem; align-items: center; padding: 0.75rem 0; border-bottom: 1px solid var(--border-subtle); }
.row > div { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.row a { color: var(--text-primary); }
.row small { color: var(--text-secondary); font-size: var(--text-xs); }
.row-links { display: flex; gap: 1rem; font-size: var(--text-xs); align-items: center; }
.row-links a { color: var(--color-link); }
.row-links form { margin: 0; }
.mini { width: 64px; height: 84px; flex-shrink: 0; background: var(--bg-paper); border: 1px solid var(--border-subtle); border-radius: 0.25rem; display: flex; align-items: center; justify-content: center; padding: 6px; }
.mini svg { width: 100%; height: 100%; }
.mini.big { width: 180px; height: 230px; }
.status { font-size: var(--text-xs); font-weight: 700; padding: 0.125rem 0.5rem; border-radius: 0.25rem; white-space: nowrap; }
.status.ok { background: var(--bg-overlay); color: var(--color-pass); }
.status.draft { background: var(--bg-overlay); color: var(--text-secondary); }
.status.bad { background: var(--badge-critical-bg); color: var(--color-critical); }
.kit-picks { display: flex; flex-direction: column; gap: 0.75rem; }
.kit-pick { text-align: left; background: var(--bg-surface); border: 0; border-left: 6px solid var(--kit); border-radius: 0.5rem; padding: 1rem 1.25rem; display: flex; flex-direction: column; cursor: pointer; }
.kit-pick strong { font-size: var(--text-base); }
.kit-pick small { color: var(--text-secondary); font-size: var(--text-xs); }
.kit-pick:hover { background: var(--bg-hover); }
.cv-preview { display: flex; gap: 0.75rem; align-items: center; min-height: 1.5rem; font-size: var(--text-sm); }
.pub-card { display: flex; gap: 1rem; align-items: center; background: var(--bg-surface); border-radius: 0.5rem; padding: 0.75rem; font-size: var(--text-sm); }

.table-wrap { overflow-x: auto; background: var(--bg-surface); border-radius: 0.5rem; }
table { border-collapse: collapse; width: 100%; font-size: var(--text-sm); }
thead { background: var(--bg-overlay); }
th { text-align: left; font-weight: 600; padding: 0.75rem 1rem; }
td { border-top: 1px solid var(--border-subtle); padding: 0.5rem 1rem; vertical-align: middle; }
tbody tr:hover { background: var(--bg-hover); }
td.acts { display: flex; gap: 0.5rem; }
td form { margin: 0; }

.foot { background: var(--bg-overlay); color: var(--text-secondary); font-size: var(--text-xs); margin-top: 2rem; }
.foot .wrap { padding-block: 1.5rem; }
.foot nav { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.5rem; }

/* 編輯器（桌機） */
.editor { display: flex; flex-direction: column; min-height: calc(100vh - 110px); }
.ed-top { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--border-subtle); flex-wrap: wrap; font-size: var(--text-sm); }
.ed-top label { color: var(--text-secondary); }
.ed-top input { border: 1px solid var(--border-subtle); padding: 0.25rem 0.75rem; width: 16rem; border-radius: 0.5rem; background: var(--bg-paper); }
.ed-top .spacer { flex-grow: 1; }
.ed-top .btn-main { font-size: var(--text-sm); padding: 0.5rem 1rem; }
.ed-body { display: flex; flex-grow: 1; min-height: 0; }
.ed-tools, .ed-parts { width: 17rem; flex-shrink: 0; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.ed-tools h3, .ed-parts h3 { font-size: var(--text-sm); }
.ed-tools { background: var(--bg-surface); border-right: 1px solid var(--border-subtle); }
.ed-parts { border-left: 1px solid var(--border-subtle); }
.tool-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.375rem; }
.tool-grid button { aspect-ratio: 1; background: var(--bg-paper); border: 2px solid var(--border-subtle); border-radius: 0.25rem; padding: 5px; cursor: pointer; font-size: var(--text-xs); }
.tool-grid button.on { border-color: var(--color-pass); }
.tool-grid button svg { width: 100%; height: 100%; display: block; }
.tool-grid.colors .sw { width: auto; height: auto; aspect-ratio: 1; border: 1px solid var(--text-secondary); padding: 0; }
.tool-grid.colors .sw.on { outline: 3px solid var(--color-pass); outline-offset: 1px; }
.tool-grid .custom { position: relative; background: var(--bg-paper); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: var(--text-xs); color: var(--text-secondary); }
.tool-grid .custom input { opacity: 0; position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.size { display: flex; gap: 0.5rem; font-size: var(--text-sm); }
.size input { width: 4.5rem; border: 1px solid var(--border-subtle); padding: 0.125rem 0.375rem; border-radius: 0.25rem; background: var(--bg-paper); }
.ed-canvas { flex-grow: 1; display: flex; align-items: center; justify-content: center; background: var(--bg-overlay); padding: 1.25rem; overflow: auto; min-width: 0; }
#ed-svg { background: var(--bg-paper); touch-action: none; cursor: crosshair; max-width: none; }
#ed-svg .gridline { stroke: var(--border-subtle); }
#ed-bom { list-style: none; padding: 0; margin: 0; }
#ed-bom li { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--text-xs); }
#ed-bom li span { flex-grow: 1; }
dialog { border: 1px solid var(--border-subtle); border-radius: 0.5rem; padding: 0; max-width: 92vw; background: var(--bg-base); color: var(--text-primary); }
.dlg-head { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-subtle); gap: 0.75rem; font-size: var(--text-sm); }
#ed-a4 svg { display: block; width: min(560px, 85vw); height: auto; }
@media (max-width: 900px) { .ed-body { flex-direction: column; } .ed-tools, .ed-parts { width: auto; } }

/* Qbi 立體積木：編輯器、作品頁（three.js 舞台） */
body.q-dragging, body.q-dragging * { cursor: grabbing !important; user-select: none; }
.q-editor .q-stage-wrap { padding: 0; display: block; position: relative; }
.q-stage { width: 100%; height: calc(100vh - 190px); min-height: 480px; background: var(--bg-paper); touch-action: none; }
.q-stage canvas, .q-view canvas { display: block; }
.q-palette { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.375rem; }
.q-item { aspect-ratio: 1; background: var(--bg-paper); border: 2px solid var(--border-subtle); border-radius: 0.5rem; padding: 4px; cursor: grab; display: flex; align-items: center; justify-content: center; touch-action: none; }
.q-item:hover, .q-item.on { border-color: var(--text-primary); }
.q-item svg { width: 100%; height: 100%; }
#b-palette .q-item { aspect-ratio: auto; flex-direction: column; gap: 0.125rem; cursor: pointer; }
#b-palette .q-item svg { width: 48px; height: 48px; }
#b-palette .q-item small { font-size: var(--text-xs); line-height: 1.2; text-align: center; }
#b-palette { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.modebar { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0.75rem 0; }
.modebar button[aria-pressed="true"] { background: var(--text-primary); color: var(--bg-base); border-color: var(--text-primary); }
.q-item.q-car { grid-column: span 3; aspect-ratio: auto; padding: 0.5rem; font-size: var(--text-xs); font-weight: 700; color: var(--bg-base); background: var(--color-critical); border-color: var(--color-critical); }
.q-help { margin: 0.25rem 0 0.5rem; padding-left: 1.25rem; font-size: var(--text-xs); color: var(--text-secondary); line-height: 1.5; }
.ed-tools .linkish { align-self: flex-start; }
.q-toast { position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); margin: 0; padding: 0.5rem 1rem; border-radius: 0.5rem; background: var(--text-primary); color: var(--bg-base); font-size: var(--text-sm); font-weight: 700; pointer-events: none; white-space: nowrap; }
.q-toast[data-kind="ok"] { background: var(--color-pass); }
.q-toast[data-kind="bad"] { background: var(--color-critical); }
#q-bom h4 { font-size: var(--text-xs); margin: 0.75rem 0 0.25rem; color: var(--text-secondary); }
.q-total { font-size: var(--text-sm); margin: 0; }
.q-total strong { font-size: var(--text-xl); }
.q-faces { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.375rem; }
.q-faces li { display: flex; align-items: center; gap: 0.375rem; font-size: var(--text-xs); }
.q-faces li span { flex-grow: 1; }
.q-faces.big { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.q-faces.big li { font-size: var(--text-sm); }
.q-list { list-style: none; padding: 0; margin: 0; }
.q-list li { display: flex; align-items: center; gap: 0.5rem; padding: 0.125rem 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--text-xs); }
.q-list li span { flex-grow: 1; }
.q-editor .ed-parts { overflow-y: auto; }
.q-editor .size input { width: 3.75rem; }

.q-card { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 1rem; align-items: stretch; }
@media (max-width: 860px) { .q-card { grid-template-columns: 1fr; } }
.q-card-side { background: var(--kit, var(--kit-qbi)); color: var(--bg-base); border-radius: 0.75rem; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; }
.q-card-side h1 { color: var(--bg-base); font-size: var(--text-xl); margin: 0; overflow-wrap: anywhere; }
.q-card-side .by { color: var(--bg-base); }
.q-card-side .chips span { background: var(--bg-base); color: var(--text-primary); }
.q-no { font-size: var(--text-2xl); font-weight: 700; line-height: 1; }
.q-big { margin: 0; font-size: var(--text-sm); }
.q-big strong { font-size: var(--text-3xl); line-height: 1; }
.q-card-main { background: var(--bg-paper); border: 1px solid var(--border-subtle); border-radius: 0.75rem; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.q-view { position: relative; width: 100%; aspect-ratio: 16 / 10; background: var(--bg-paper); border-radius: 0.5rem; overflow: hidden; touch-action: none; }
.q-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 4%; }
.q-fallback svg { width: 100%; height: 100%; }
.q-viewbar { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.q-viewbar .btn-main { font-size: var(--text-sm); padding: 0.5rem 1.25rem; }
.q-car-btn { cursor: grab; touch-action: none; }
.q-steps { display: flex; gap: 0.375rem; flex-wrap: wrap; margin-left: auto; }
.q-steps button { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 0.25rem 0.75rem; font-size: var(--text-xs); cursor: pointer; }
.q-steps button[aria-pressed="true"] { background: var(--text-primary); color: var(--bg-base); border-color: var(--text-primary); }
/* 平面多邊形零件盤：圖示下面加名稱（大小不同的同形零件才分得出來） */
.tool-grid button.named { aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; gap: 0.125rem; height: auto; padding: 0.25rem; }
.tool-grid button.named small { font-size: var(--text-xs); line-height: 1.2; }
.tool-grid button.named svg { height: 40px; }