:root {
  --bg: #eef0f3;
  --panel: #fff;
  --stage: #f6f7f9;
  --line: #e3e6eb;
  --text: #1d2330;
  --muted: #697184;
  --accent: #1f6feb;
  --accent-soft: #e8f0fe;
  --error: #c62828;
  --error-soft: #fdecec;
  --warn: #9a5b00;
  --warn-soft: #fff4e0;
  --cut: #2546c8;
  --crease: #e5322d;
  --bleed: #2fa84f;
  --radius: 14px;
  --gap: clamp(8px, 1.2vw, 16px);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: 'Be Vietnam Pro', system-ui, sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  height: 100dvh;
}

/* ---------- thanh trên ---------- */
.topbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px var(--gap);
  padding: 10px var(--gap);
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; white-space: nowrap; }
.brand svg { width: 26px; height: 26px; fill: var(--accent); }
.current {
  flex: 1 1 0;
  min-width: 0;
  padding-left: var(--gap);
  border-left: 1px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.btn-primary {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.btn-primary svg { width: 18px; height: 18px; fill: currentColor; }
.btn-primary:disabled { background: #a9b4c6; cursor: not-allowed; }

/* ---------- bố cục 3 cột ---------- */
.workspace {
  flex: 1;
  min-height: 0;
  display: grid;
  gap: var(--gap);
  padding: var(--gap);
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr) minmax(240px, 320px);
  grid-template-areas: "left stage right";
}
.panel { background: var(--panel); border-radius: var(--radius); min-height: 0; min-width: 0; }
.panel-left { grid-area: left; display: flex; overflow: hidden; }
.panel-right { grid-area: right; padding: 18px; overflow: auto; }
.stage {
  grid-area: stage;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--stage);
  border: 1px solid var(--line);
}

/* ---------- cột trái ---------- */
.rail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 6px;
  border-right: 1px solid var(--line);
  overflow-y: auto;
}
.rail button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 72px;
  padding: 10px 4px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.rail button svg { width: 22px; height: 22px; fill: currentColor; }
.rail button[aria-selected="true"] { background: var(--accent-soft); color: var(--accent); }
.tab-body { flex: 1; min-width: 0; padding: 18px; overflow: auto; }

h2 { font-size: 16px; margin: 0 0 12px; }
h3 { font-size: 14px; margin: 22px 0 10px; }
h3:first-child { margin-top: 0; }
.head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.head-row h2 { margin: 0; }

.seg { display: inline-flex; padding: 2px; border-radius: 8px; background: #f0f2f5; }
.seg button { padding: 4px 10px; border: 0; border-radius: 6px; background: none; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.seg button.is-on { background: #fff; color: var(--accent); box-shadow: 0 1px 2px rgb(0 0 0 / 0.08); }

.fields-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 0 10px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.field > span { font-size: 12px; color: var(--muted); }
.input-unit { display: flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.input-unit input { flex: 1; min-width: 0; padding: 9px 0; border: 0; outline: 0; background: transparent; font: inherit; }
.input-unit em { font-style: normal; font-size: 12px; color: var(--muted); }
select { width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font: inherit; color: inherit; }
.input-unit:focus-within, select:focus { border-color: var(--accent); outline: 2px solid var(--accent-soft); }
.hint { margin: -4px 0 12px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.hint-strong { color: var(--text); font-weight: 600; }
.btn-link { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; cursor: pointer; }

.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.tpl-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.tpl-card.is-on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.tpl-card svg { width: 100%; aspect-ratio: 4 / 3; border-radius: 8px; background: var(--stage); }
.tpl-card small { font-size: 12px; color: var(--muted); }

/* ---------- vùng vẽ ---------- */
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 12px 14px 0; font-size: 12px; color: var(--muted); }
.sw { display: inline-block; width: 18px; margin-right: 6px; vertical-align: middle; border-top: 2px solid; }
.legend-note { margin-left: auto; font-style: italic; }
.sw-bleed { border-color: var(--bleed); }
.sw-cut { border-color: var(--cut); }
.sw-crease { border-top: 2px dashed var(--crease); }
.alert { display: flex; flex-direction: column; gap: 6px; margin: 10px 14px 0; }
.alert[hidden] { display: none; }
.alert p { margin: 0; padding: 8px 12px; border-radius: 10px; font-size: 13px; line-height: 1.45; }
.alert .error { background: var(--error-soft); color: var(--error); }
.alert .warn { background: var(--warn-soft); color: var(--warn); }

.stage-canvas { position: relative; flex: 1; min-height: 0; cursor: grab; touch-action: none; }
.stage-canvas.is-dragging { cursor: grabbing; }
.stage-canvas.is-invalid svg { opacity: 0.25; }
#canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

.paper { fill: #fff; }
.paper-board { fill: #f1ece4; }
.part-title { fill: var(--text); font-weight: 600; dominant-baseline: central; }
.line { fill: none; stroke-width: 1.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.line-crease { stroke-dasharray: 5 4; }
.tpl-card .line { stroke-width: 1; }
.tpl-card .line-crease { stroke-dasharray: 3 2; }
.face-label { fill: #a5adbb; font-weight: 500; text-anchor: middle; dominant-baseline: central; }
.dim line { stroke: var(--accent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dim path { fill: var(--accent); }
.dim rect { fill: var(--accent-soft); }
.dim text { fill: var(--accent); font-weight: 600; text-anchor: middle; dominant-baseline: central; }

.toolbar {
  align-self: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px;
  max-width: calc(100% - 24px);
  margin: 0 0 12px;
  padding: 6px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.08);
}
.toolbar button { min-width: 32px; padding: 6px 10px; border: 0; border-radius: 8px; background: none; font: inherit; cursor: pointer; }
.toolbar button:hover { background: #f0f2f5; }
#zoomLevel { min-width: 48px; text-align: center; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.check { display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; font-size: 13px; white-space: nowrap; cursor: pointer; }

/* ---------- cột phải ---------- */
.info { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.info div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.info dt { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--muted); }
.info dd { margin: 0; font-size: 13px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.formats { display: flex; flex-direction: column; gap: 8px; }
.format { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.format:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.format input { margin-top: 3px; accent-color: var(--accent); }
.format span { display: flex; flex-direction: column; gap: 2px; }
.format small { font-size: 12px; color: var(--muted); }
.get { display: flex; flex-direction: column; gap: 4px; margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.55; color: var(--muted); }

/* ---------- màn hình vừa: thông tin dời xuống dưới cột trái ---------- */
@media (max-width: 1180px) {
  .workspace {
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    grid-template-rows: minmax(0, 3fr) minmax(0, 2fr);
    grid-template-areas: "left stage" "right stage";
  }
}

/* ---------- điện thoại: một cột, bản vẽ lên đầu ---------- */
@media (max-width: 760px) {
  body { height: auto; min-height: 100dvh; }
  .current { display: none; }
  .workspace {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "stage" "left" "right";
  }
  .stage { height: min(70svh, 560px); min-height: 360px; }
  .panel-left { flex-direction: column; overflow: visible; }
  .rail { flex-direction: row; padding: 6px; border-right: 0; border-bottom: 1px solid var(--line); }
  .rail button { flex: 1; width: auto; flex-direction: row; justify-content: center; gap: 4px; padding: 8px 4px; white-space: nowrap; }
  .rail button svg { width: 18px; height: 18px; }
  .tab-body { overflow: visible; }
}