/* Free dieline generator (10 Oct 2026). Theme tokens only. */
.dl-wrap { padding: 34px 0 56px; }
.dl-wrap h1 { font-size: clamp(1.9rem, 3vw, 2.6rem); margin: 6px 0 10px; }
.dl-answer { max-width: 80ch; color: var(--ink-2); }
.dl-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: 28px; margin-top: 24px; align-items: start; }
.dl-controls { display: grid; gap: 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 22px; }
.dl-controls label { display: grid; gap: 6px; font-size: .82rem; font-weight: 600; color: var(--ink-2); min-width: 0; }
.dl-controls label[hidden], .dl-controls [hidden] { display: none !important; }
.dl-controls input:not([type=checkbox]), .dl-controls select { height: 42px; width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; font: inherit; font-size: .95rem; background: var(--paper); color: var(--ink); }
.dl-controls .muted { font-weight: 400; }
.dl-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dl-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dl-hint { font-size: .8rem; margin: -6px 0 0; }
.dl-controls .dl-check { display: flex; flex-direction: row; align-items: center; gap: 8px; font-weight: 500; }
.dl-check input { width: 18px; height: 18px; accent-color: var(--ember); }
.dl-err { margin: 0; padding: 10px 12px; border-radius: 10px; background: #fdecef; color: #9b1c3a; font-size: .88rem; }
.dl-preview { border: 1px solid var(--line); border-radius: 20px; background: #fff; padding: 10px; min-height: 260px; display: grid; place-items: center; overflow: hidden; }
.dl-preview svg { width: 100%; height: auto; max-height: 70vh; display: block; }
.dl-flat { font-size: .85rem; margin: 8px 2px 0; }
.dl-acts { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.dl-cta { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 16px 18px; border-radius: 16px; background: #f9eef3; border: 1px solid #e2d8f7; }
.dl-cta div { display: grid; gap: 2px; font-size: .92rem; }
.dl-cta b { color: var(--ember-d); font-size: 1rem; }
.dl-legend { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .8rem; color: var(--muted); }
.dl-legend i { display: inline-block; width: 22px; height: 0; margin-right: 6px; vertical-align: middle; border-top: 2px solid; }
.dl-legend .k-cut { border-color: #E6007E; }
.dl-legend .k-fold { border-top-style: dashed; border-color: #0077C8; }
.dl-legend .k-bleed { border-top-width: 6px; border-color: #9fdde1; }
.dl-legend .k-safe { border-top-style: dotted; border-color: #22A447; }
.dl-legend .k-glue { border-top-width: 8px; border-color: #ddd; }
.dl-table-wrap { overflow-x: auto; margin-top: 18px; }
.dl-sizes thead th { background: var(--bone-2); font-size: .85rem; }
.dl-sizes td, .dl-sizes th { white-space: nowrap; }
.dl-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.dl-thumb { margin: 0; border: 1px solid var(--line); border-radius: 20px; background: #fff; padding: 12px; }
.dl-steps { padding-left: 1.2em; display: grid; gap: 10px; }
.dl-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.dl-card { display: grid; gap: 6px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: #fff; text-decoration: none; transition: border-color .15s, transform .15s; }
.dl-card:hover { border-color: var(--ember); transform: translateY(-2px); }
.dl-card img { aspect-ratio: 4/3; object-fit: contain; width: 100%; }
.dl-card span { font-size: .85rem; color: var(--muted); }
.dl-h2 { font-size: 1.4rem; margin: 28px 0 12px; }
@media (max-width: 900px) {
  .dl-grid, .dl-two { grid-template-columns: 1fr; }
  .dl-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dl-cta { flex-direction: column; align-items: stretch; }
}
@media (max-width: 420px) { .dl-row3 { grid-template-columns: 1fr 1fr 1fr; gap: 6px; } .dl-controls { padding: 16px; } }