/* Giao diện trình dựng khuôn bế. Ba cột: tham số · bản 2D · 3D và xuất file.
   Dùng lại biến màu của style.css, không dựng hệ thống màu thứ hai. */

.dl-wrap {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr) 320px;
  gap: 14px;
  height: calc(100vh - 150px);
  min-height: 560px;
}
@media (max-width: 1280px) {
  .dl-wrap { grid-template-columns: 300px minmax(0, 1fr); height: auto; }
  .dl-right { grid-column: 1 / -1; }
}

.dl-panel {
  background: var(--panel, #fff);
  border: 1px solid var(--line, #e2e4ea);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* ------------------------------------------------------------------ cột trái -- */
.dl-left { display: grid; grid-template-columns: 62px minmax(0, 1fr); }
.dl-tabs {
  display: flex; flex-direction: column; gap: 2px; padding: 8px 4px;
  border-right: 1px solid var(--line, #e2e4ea);
  background: rgba(0, 0, 0, .02);
}
.dl-tab {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 2px; border: 0; background: none; cursor: pointer;
  border-radius: 8px; font-size: 10px; color: var(--muted, #6b7280);
  font-family: inherit; line-height: 1.2;
}
.dl-tab:hover { background: rgba(0, 0, 0, .05); }
.dl-tab.is-active { background: var(--accent-soft, #e8efff); color: var(--accent, #2f6bd8); font-weight: 600; }
.dl-tab-icon { font-size: 16px; }

.dl-panes { overflow-y: auto; padding: 14px 14px 26px; min-height: 0; }
.dl-h {
  margin: 16px 0 8px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted, #6b7280); display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.dl-panes > .dl-h:first-child { margin-top: 0; }
.dl-group { margin: 14px 0 6px; font-size: 12px; font-weight: 600; color: var(--ink, #1f2430); }
.dl-note { margin: 0 0 8px; font-size: 11px; color: var(--muted, #6b7280); line-height: 1.5; }
.dl-warn {
  margin: 10px 0 0; font-size: 11px; line-height: 1.5; color: #8a5300;
  background: #fff6e5; border: 1px solid #f0d9a8; border-radius: 8px; padding: 8px 10px;
}

.dl-field { display: block; margin-bottom: 8px; }
.dl-field-label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
  font-size: 12px; color: var(--ink, #1f2430); margin-bottom: 4px;
}
.dl-pac { font-size: 10px; color: #aab0bd; font-family: var(--mono, ui-monospace, monospace); font-style: italic; }
.dl-input-wrap { position: relative; display: block; }
.dl-unit {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  font-size: 10px; color: var(--muted, #6b7280); font-style: normal;
}
.dl-num, .dl-text, .dl-select {
  width: 100%; box-sizing: border-box; padding: 7px 34px 7px 10px;
  border: 1px solid var(--line, #e2e4ea); border-radius: 8px;
  font-family: var(--mono, ui-monospace, monospace); font-size: 13px; background: #fff; color: inherit;
}
.dl-text, .dl-select { padding-right: 10px; font-family: inherit; }
.dl-num:focus, .dl-text:focus, .dl-select:focus { outline: 2px solid var(--accent, #2f6bd8); outline-offset: -1px; }
.dl-range { width: 100%; margin: 0 0 12px; accent-color: var(--accent, #2f6bd8); }
.dl-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.dl-color { width: 44px; height: 34px; padding: 0; border: 1px solid var(--line, #e2e4ea); border-radius: 8px; background: none; }

.dl-seg { display: flex; gap: 4px; margin-bottom: 8px; }
.dl-seg-btn {
  flex: 1; padding: 7px 4px; font-size: 11px; cursor: pointer; font-family: inherit;
  border: 1px solid var(--line, #e2e4ea); background: #fff; border-radius: 8px; color: inherit;
}
.dl-seg-btn.is-active { border-color: var(--accent, #2f6bd8); color: var(--accent, #2f6bd8); font-weight: 600; background: var(--accent-soft, #e8efff); }

.dl-unit-toggle { display: inline-flex; border: 1px solid var(--line, #e2e4ea); border-radius: 7px; overflow: hidden; }
.dl-unit-btn { padding: 3px 9px; font-size: 11px; border: 0; background: #fff; cursor: pointer; font-family: inherit; color: inherit; }
.dl-unit-btn.is-active { background: var(--accent, #2f6bd8); color: #fff; }

.dl-card {
  display: block; width: 100%; text-align: left; margin-bottom: 8px; cursor: pointer;
  padding: 10px 12px; border: 1px solid var(--line, #e2e4ea); border-radius: 10px;
  background: #fff; font-family: inherit; color: inherit;
}
.dl-card:hover { border-color: var(--accent, #2f6bd8); }
.dl-card.is-active { border-color: var(--accent, #2f6bd8); background: var(--accent-soft, #e8efff); }
.dl-card-name { font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.dl-card-note { font-size: 11px; color: var(--muted, #6b7280); line-height: 1.45; }

.dl-btn {
  display: block; width: 100%; margin-bottom: 8px; padding: 9px 12px; cursor: pointer;
  border: 1px solid var(--line, #e2e4ea); border-radius: 8px; background: #fff;
  font-family: inherit; font-size: 12px; color: inherit;
}
.dl-btn:hover { border-color: var(--accent, #2f6bd8); }
.dl-btn-primary { background: var(--accent, #2f6bd8); color: #fff; border-color: transparent; font-weight: 600; }

.dl-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.dl-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); cursor: pointer; }
.dl-swatch.is-active { border-color: var(--accent, #2f6bd8); }

.dl-layers { display: flex; flex-direction: column; gap: 4px; }
.dl-layer-row { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line, #e2e4ea); border-radius: 8px; padding: 5px 8px; }
.dl-layer-row.is-active { border-color: var(--accent, #2f6bd8); }
.dl-layer-name { flex: 1; text-align: left; border: 0; background: none; cursor: pointer; font-family: inherit; font-size: 12px; color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-dpi { font-size: 10px; color: var(--muted, #6b7280); font-family: var(--mono, monospace); }
.dl-dpi.is-warn { color: #c2410c; font-weight: 700; }
.dl-layer-del { border: 0; background: none; cursor: pointer; color: var(--muted, #6b7280); font-size: 12px; }

/* ----------------------------------------------------------------- cột giữa --- */
.dl-centre { position: relative; }
.dl-stage-head {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-bottom: 1px solid var(--line, #e2e4ea); flex-wrap: wrap;
}
.dl-name-input {
  flex: 1; min-width: 140px; border: 0; border-bottom: 1px dashed var(--line, #e2e4ea);
  padding: 3px 2px; font-family: inherit; font-size: 13px; font-weight: 600; background: none; color: inherit;
}
.dl-name-input:focus { outline: none; border-bottom-color: var(--accent, #2f6bd8); }
.dl-legend { display: flex; gap: 12px; font-size: 11px; color: var(--muted, #6b7280); }
.dl-legend i { display: inline-block; width: 14px; height: 0; border-top: 2px solid; margin-right: 4px; vertical-align: middle; }
.dl-legend .k-bleed { color: #12b76a; }
.dl-legend .k-cut { color: #1d3fd6; }
.dl-legend .k-crease { color: #e2342f; border-top-style: dashed; }

#dl-stage { flex: 1; min-height: 320px; position: relative; background:
  linear-gradient(45deg, #f3f4f7 25%, transparent 25%) -6px 0 / 12px 12px,
  linear-gradient(-45deg, #f3f4f7 25%, transparent 25%) -6px 0 / 12px 12px,
  linear-gradient(45deg, transparent 75%, #f3f4f7 75%) 0 0 / 12px 12px,
  linear-gradient(-45deg, transparent 75%, #f3f4f7 75%) 0 0 / 12px 12px, #fbfbfc; }
#dl-stage .dl-stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.dl-stage-tools {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: flex; gap: 4px; padding: 5px; background: #fff;
  border: 1px solid var(--line, #e2e4ea); border-radius: 10px; box-shadow: 0 4px 14px rgba(0,0,0,.08);
}
.dl-tool {
  min-width: 34px; height: 30px; padding: 0 9px; cursor: pointer; font-family: inherit; font-size: 12px;
  border: 0; background: none; border-radius: 7px; color: var(--muted, #6b7280);
}
.dl-tool:hover { background: rgba(0,0,0,.05); }
.dl-tool.is-active { background: var(--accent-soft, #e8efff); color: var(--accent, #2f6bd8); }

/* ---------------------------------------------------------------- cột phải ---- */
/* Cột phải là flex column: khung 3D chiếm phần cố định trên, phần còn lại cuộn riêng.
   Để nguyên `display:block` thì ở chế độ xem 3D to không có cách nào cho khung 3D giãn ra. */
/* `overflow-y: auto` chứ không `hidden`: khi có .dl-scroll thì chính nó cuộn và cột này
   không bao giờ tràn; khi KHÔNG có (HTML bản cũ do quên restart engine) thì ít nhất cột
   vẫn cuộn được, thay vì cắt cụt mất mấy nút dưới cùng. */
.dl-right { display: flex; flex-direction: column; padding: 14px; overflow-y: auto; }
.dl-scroll { flex: 1; min-height: 0; overflow-y: auto; margin-top: 10px; }
.dl-3d-box { position: relative; border-radius: 10px; overflow: hidden; background: #eceef2; aspect-ratio: 4 / 3; flex: none; }
.dl-3d { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.dl-3d:active { cursor: grabbing; }
.dl-3d-reset {
  position: absolute; right: 8px; top: 8px; border: 0; border-radius: 7px; cursor: pointer;
  background: rgba(255,255,255,.9); font-size: 11px; padding: 4px 8px; font-family: inherit; color: #1f2430;
}
.dl-slider { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 11px; color: var(--muted, #6b7280); }
.dl-slider input { flex: 1; accent-color: var(--accent, #2f6bd8); }

.dl-sizes { margin: 14px 0; font-size: 12px; }
.dl-size-line { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px dotted var(--line, #e2e4ea); }
.dl-size-label { color: var(--muted, #6b7280); }
.dl-size-line b { font-family: var(--mono, monospace); font-weight: 600; }

.dl-formats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dl-format {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start; cursor: pointer;
  padding: 9px 10px; border: 1px solid var(--line, #e2e4ea); border-radius: 9px; background: #fff;
  font-family: inherit; text-align: left; color: inherit;
}
.dl-format:hover { border-color: var(--accent, #2f6bd8); }
.dl-format b { font-size: 12px; }
.dl-format span { font-size: 10px; color: var(--muted, #6b7280); }

.dl-nest { margin-top: 14px; border-top: 1px solid var(--line, #e2e4ea); padding-top: 12px; }
.dl-nest-row { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.dl-nest-row input { width: 100%; min-width: 0; padding: 6px 8px; border: 1px solid var(--line, #e2e4ea); border-radius: 7px; font-family: var(--mono, monospace); font-size: 12px; }
.dl-nest-out { font-size: 12px; font-family: var(--mono, monospace); color: var(--ink, #1f2430); min-height: 18px; }

.dl-saved { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.dl-saved-row { text-align: left; padding: 6px 9px; border: 1px solid var(--line, #e2e4ea); border-radius: 7px; background: #fff; cursor: pointer; font-family: inherit; font-size: 12px; color: inherit; }
.dl-saved-row:hover { border-color: var(--accent, #2f6bd8); }

/* ======================================================= màn chọn mẫu (gallery) */
.dg-wrap {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
@media (max-width: 900px) { .dg-wrap { grid-template-columns: 1fr; } }

.dg-side {
  position: sticky; top: 14px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--panel, #fff); border: 1px solid var(--line, #e2e4ea);
  border-radius: 12px; padding: 10px;
}
.dg-side-title {
  font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted, #6b7280); padding: 4px 8px 8px;
}
.dg-cat {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border: 1px solid transparent; border-radius: 9px;
  background: none; cursor: pointer; font-family: inherit; font-size: 13px;
  color: inherit; text-align: left;
}
.dg-cat:hover { background: rgba(0, 0, 0, .04); }
.dg-cat.is-active { border-color: var(--ink, #1f2430); font-weight: 600; }
.dg-n { font-style: normal; font-size: 11px; color: var(--muted, #6b7280); font-family: var(--mono, monospace); }

.dg-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.dg-title { margin: 0 0 4px; font-size: 20px; }
.dg-sub { margin: 0; font-size: 12px; color: var(--muted, #6b7280); max-width: 60ch; line-height: 1.5; }
.dg-search {
  min-width: 220px; padding: 8px 12px; border-radius: 9px;
  border: 1px solid var(--line, #e2e4ea); font-family: inherit; font-size: 13px; background: #fff; color: inherit;
}
.dg-count { margin: 0 0 10px; font-size: 12px; color: var(--muted, #6b7280); font-weight: 500; }

.dg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.dg-card {
  display: flex; flex-direction: column; padding: 0; overflow: hidden; cursor: pointer;
  border: 1px solid var(--line, #e2e4ea); border-radius: 12px; background: var(--panel, #fff);
  font-family: inherit; color: inherit; text-align: left;
}
.dg-card:hover { border-color: var(--accent, #2f6bd8); box-shadow: 0 6px 20px rgba(0, 0, 0, .07); }
.dg-thumb { aspect-ratio: 4 / 3; background: #f4f5f8; padding: 14px; box-sizing: border-box; }
.dg-thumb svg { width: 100%; height: 100%; display: block; }
.dg-card-body { padding: 10px 12px 13px; }
.dg-card-name { font-size: 13px; font-weight: 600; line-height: 1.35; }
.dg-card-en { font-size: 11px; color: #9aa1ad; margin-top: 1px; }
.dg-card-note { font-size: 11px; color: var(--muted, #6b7280); line-height: 1.45; margin-top: 5px; }
.dg-empty { font-size: 13px; color: var(--muted, #6b7280); line-height: 1.6; }

/* ------------------------------------------------------- mẫu đang dùng + quay lại */
.dl-back {
  border: 1px solid var(--line, #e2e4ea); background: #fff; border-radius: 8px;
  padding: 5px 10px; font-size: 12px; cursor: pointer; font-family: inherit; color: inherit;
  flex: none;
}
.dl-back:hover { border-color: var(--accent, #2f6bd8); color: var(--accent, #2f6bd8); }

.dl-current {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 9px 11px; margin-bottom: 4px;
  background: rgba(0, 0, 0, .03); border-radius: 9px;
}
.dl-current-name { font-size: 12px; font-weight: 600; line-height: 1.35; }
.dl-link {
  border: 0; background: none; padding: 0; cursor: pointer; flex: none;
  font-family: inherit; font-size: 11px; color: var(--accent, #2f6bd8); text-decoration: underline;
}

/* ------------------------------------------------------------------ hạn mức tải */
.dl-quota {
  display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px;
  padding: 8px 10px; border-radius: 9px; font-size: 11px; line-height: 1.45;
  background: #eef4ff; border: 1px solid #cfe0ff; color: #1f3a6b;
}
.dl-quota b { font-size: 12px; }
.dl-quota.is-low { background: #fff6e5; border-color: #f0d9a8; color: #8a5300; }
.dl-quota.is-out { background: #fdecec; border-color: #f3c4c4; color: #93272c; }

/* `display:grid` của .dl-wrap / .dg-wrap thắng `display:none` mặc định của thuộc tính
   [hidden], nên hai màn sẽ cùng hiện. Phải nói rõ ra. */
#dl-editor[hidden], #dl-gallery[hidden] { display: none; }

/* ---------------------------------------------------------- dòng "đang làm dở" */
.dg-resume {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px; padding: 10px 14px;
  background: var(--accent-soft, #e8efff); border: 1px solid #cfe0ff; border-radius: 10px;
}
.dg-resume[hidden] { display: none; }
.dg-resume-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 180px; }
.dg-resume-text b { font-size: 13px; }
.dg-resume-text span { font-size: 11px; color: var(--muted, #6b7280); }
.dg-resume-go {
  padding: 7px 14px; border: 0; border-radius: 8px; cursor: pointer; flex: none;
  background: var(--accent, #2f6bd8); color: #fff; font-family: inherit; font-size: 12px; font-weight: 600;
}
.dg-resume-drop {
  padding: 7px 10px; border: 0; background: none; cursor: pointer; flex: none;
  font-family: inherit; font-size: 12px; color: var(--muted, #6b7280); text-decoration: underline;
}

/* ===================================================== chế độ xem 3D to (is-3d) */
/* Đổi chỗ hai cột bằng `order`, không dựng lại DOM: canvas WebGL mà bị gỡ ra cắm lại thì
   mất context, phải dựng lại toàn bộ buffer và texture. */
.dl-wrap.is-3d { grid-template-columns: 330px 320px minmax(0, 1fr); }
.dl-wrap.is-3d .dl-centre { order: 2; }
.dl-wrap.is-3d .dl-right { order: 3; }
.dl-wrap.is-3d .dl-3d-box { aspect-ratio: auto; flex: 1 1 auto; min-height: 280px; }
.dl-wrap.is-3d .dl-scroll { flex: 0 0 auto; max-height: 38%; }
@media (max-width: 1280px) {
  .dl-wrap.is-3d { grid-template-columns: 300px minmax(0, 1fr); }
}

.dl-3d-tools {
  position: absolute; right: 8px; top: 8px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
}
.dl-3d-btn {
  border: 0; border-radius: 7px; cursor: pointer; padding: 4px 9px;
  background: rgba(255, 255, 255, .92); font-family: inherit; font-size: 11px; color: #1f2430;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.dl-3d-btn:hover { background: #fff; }
.dl-3d-btn.is-active { background: var(--accent, #2f6bd8); color: #fff; }

.dl-save-quota {
  margin-bottom: 8px; font-size: 11px; color: var(--muted, #6b7280);
  font-family: var(--mono, monospace);
}
.dl-save-quota.is-out { color: #93272c; font-weight: 700; }

/* ------------------------------------------------------- thẻ thiết kế đã lưu -- */
.dg-side-rule { border: 0; border-top: 1px solid var(--line, #e2e4ea); margin: 8px 4px; }

.dg-card-saved { position: relative; padding: 0; }
.dg-card-open {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: inherit; color: inherit; text-align: left;
}
.dg-card-del {
  position: absolute; right: 6px; top: 6px; width: 24px; height: 24px; line-height: 1;
  border: 0; border-radius: 6px; cursor: pointer; font-size: 12px;
  background: rgba(255, 255, 255, .9); color: var(--muted, #6b7280);
}
.dg-card-del:hover { background: #fdecec; color: #93272c; }
.dg-full {
  grid-column: 1 / -1; margin: 0 0 4px; padding: 10px 12px;
  background: #fff6e5; border: 1px solid #f0d9a8; border-radius: 9px; color: #8a5300;
}

/* ------------------------------------------------ tham số nâng cao: khoá / ghim --- */
/* Ô mờ = giá trị do công thức tính. Phải NHÌN ra ngay là mình không gõ vào đấy, nếu không
   người dùng gõ mãi mà số không đổi rồi tưởng trang hỏng. */
.dl-param { margin-bottom: 4px; }
.dl-param .dl-num { padding-right: 58px; }
.dl-param .dl-unit { right: 34px; }
.dl-param .dl-num:disabled {
  background: var(--soft, #f6f7f9); color: var(--muted, #6b7280);
  border-style: dashed; cursor: default;
}
.dl-pin {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; padding: 0; line-height: 1;
  border: 1px solid var(--line, #e2e4ea); border-radius: 6px;
  background: #fff; color: var(--muted, #6b7280); font-size: 12px; cursor: pointer;
}
.dl-pin:hover { border-color: var(--accent, #2f6bd8); color: var(--accent, #2f6bd8); }
.dl-pin.is-pinned { background: var(--accent, #2f6bd8); border-color: var(--accent, #2f6bd8); color: #fff; }
.dl-why {
  margin: -4px 0 10px; font-size: 10.5px; line-height: 1.45;
  color: var(--muted, #6b7280);
}
.dl-param.is-pinned .dl-why { color: #8a6d3b; }
.dl-deep-toggle {
  display: block; width: 100%; margin: 14px 0 0; padding: 7px 10px; text-align: left;
  border: 1px dashed var(--line, #e2e4ea); border-radius: 8px;
  background: transparent; color: var(--muted, #6b7280); font-size: 12px; cursor: pointer;
}
.dl-deep-toggle:hover { border-color: var(--accent, #2f6bd8); color: var(--accent, #2f6bd8); }
.dl-deep-body { margin-top: 10px; }

/* ------------------------------------------------------------ link chia sẻ --- */
/* Khối này có ba trạng thái và cả ba đều phải nói rõ người dùng đang ở đâu: chưa lưu thì
   chưa chia sẻ được, đã có link thì link phải đọc và copy được ngay, thu hồi rồi thì phải
   thấy là link cũ đã chết chứ không phải "chắc vẫn còn". */
.dl-share { display: flex; flex-direction: column; gap: 8px; }
.dl-share-note { margin: 0; font-size: 12px; color: #6a7280; line-height: 1.5; }
.dl-share-link {
  display: flex; gap: 6px; align-items: center;
}
.dl-share-url {
  flex: 1; min-width: 0; font: 12px/1.4 ui-monospace, monospace;
  padding: 7px 8px; border: 1px solid #d9dde5; border-radius: 7px; background: #f6f7f9; color: #1b1f27;
}
.dl-share-copy { flex: none; padding: 7px 10px; }
.dl-share-revoke { color: #b4231d; }