:root { color-scheme: light; font-family: "Segoe UI", Arial, sans-serif; color: #23332d; background: #f5f6f2; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.topbar { height: 74px; padding: 0 max(5%, calc((100% - 1350px) / 2)); background: #fff; border-bottom: 1px solid #e8ebe4; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 11px; color: #23332d; font-size: 24px; font-weight: 700; letter-spacing: -1.5px; text-decoration: none; }
.brand-dot { color: #dc855f; }
.brand-mark { width: 30px; height: 30px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; transform: rotate(-8deg); }
.brand-mark span { background: #477a64; border-radius: 2px; }
.brand-mark span:nth-child(2) { background: #c1d5c7; }
.brand-mark span:nth-child(3) { background: #e7ae89; }
.topbar-note { font-size: 12px; font-weight: 600; color: #8a968e; }
.status-dot, .live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #8ab59a; margin-right: 7px; }
.workspace { max-width: 1350px; margin: auto; padding: 0 5%; }
.intro { min-height: 225px; padding: 54px 0 43px; display: flex; justify-content: space-between; align-items: center; }
.eyebrow, .preview-kicker { color: #6a937b; font-size: 10px; font-weight: 700; letter-spacing: 1.6px; }
.eyebrow-line { display: inline-block; width: 25px; height: 1px; background: #83a895; vertical-align: middle; margin-right: 8px; }
h1, h2, p { margin: 0; }
h1 { margin-top: 14px; font: 400 clamp(36px, 4vw, 52px)/1.08 Georgia, serif; letter-spacing: -1.5px; }
h1 em { color: #749d83; font-weight: 400; }
.intro p { color: #819087; font-size: 14px; margin-top: 13px; line-height: 1.6; }
.intro-badge { height: 75px; width: 180px; border-left: 1px solid #dfe6dc; display: flex; align-items: center; justify-content: flex-end; gap: 11px; color: #91a298; font-size: 9px; line-height: 1.6; letter-spacing: .9px; }
.intro-badge strong { color: #547961; }
.badge-icon { font-size: 37px; color: #a7c3af; }
.layout { display: grid; grid-template-columns: minmax(0, 1.26fr) minmax(0, 1fr); gap: 25px; align-items: start; }
.editor-column { display: grid; gap: 20px; }
.card { background: #fff; border: 1px solid #e7ebe4; border-radius: 12px; box-shadow: 0 7px 25px rgba(37, 59, 45, .035); }
.settings-card, .labels-card { padding: 25px 28px; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.section-title { display: flex; align-items: flex-start; gap: 13px; }
.step-number { color: #6b977c; background: #eef5ef; border-radius: 7px; width: 34px; height: 34px; display: grid; place-items: center; font-size: 11px; font-weight: 700; flex: none; }
h2 { font-size: 16px; letter-spacing: -.3px; }
.section-title p, .preview-header p { color: #97a39a; font-size: 12px; margin-top: 5px; line-height: 1.5; }
.section-tag { color: #99ad9f; font-size: 9px; font-weight: 700; letter-spacing: 1px; padding-top: 6px; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 25px; }
.field > span:first-child { display: block; min-height: 16px; margin-bottom: 8px; color: #68786e; font-size: 11px; font-weight: 700; }
.input-unit { height: 42px; display: flex; align-items: center; border: 1px solid #e5eae4; border-radius: 6px; background: #fbfcfa; }
.input-unit:focus-within { border-color: #7ca58a; box-shadow: 0 0 0 3px #ecf4ed; }
.input-unit input { width: 100%; min-width: 0; height: 100%; padding: 0 0 0 12px; border: 0; outline: 0; background: transparent; color: #34443a; font-size: 13px; font-weight: 700; }
.input-unit > span { flex: none; padding: 0 10px 0 3px; color: #a2ada4; font-size: 11px; white-space: nowrap; }
.info-note { margin-top: 19px; padding: 12px; background: #f1f6f0; border-radius: 6px; display: flex; gap: 9px; color: #718b79; font-size: 11px; line-height: 1.5; }
.info-icon { width: 15px; height: 15px; flex: none; border: 1px solid #8eaf98; border-radius: 50%; text-align: center; font: 700 10px/13px Georgia, serif; }
.labels-card { padding-bottom: 20px; }
.labels-heading { margin-bottom: 24px; }
.count-pill { padding: 6px 9px; border-radius: 5px; background: #f1f5ef; color: #76917e; font-size: 10px; font-weight: 700; white-space: nowrap; }
.table-head, .label-row { display: grid; grid-template-columns: 35px minmax(0, 1fr) minmax(130px, .8fr) 24px; gap: 10px; align-items: center; }
.table-head { padding: 0 0 9px; color: #a6b0a7; font-size: 9px; font-weight: 700; letter-spacing: .8px; }
.label-row { padding: 7px 0; border-top: 1px solid #f0f2ed; }
.row-number { color: #aab8ad; font-size: 11px; font-weight: 700; }
.row-input, .row-select { width: 100%; height: 38px; padding: 0 10px; border: 1px solid #e8ece6; border-radius: 6px; outline: none; background: #fbfcfa; color: #45554a; font-size: 12px; }
.row-input:focus, .row-select:focus { border-color: #7ca58a; box-shadow: 0 0 0 3px #ecf4ed; }
.type-picker { position: relative; min-width: 0; }
.type-picker:focus-within { z-index: 2; }
.row-select { padding-right: 28px; }
.type-toggle { position: absolute; top: 0; right: 0; width: 28px; height: 38px; border: 0; background: transparent; color: #718979; }
.type-menu { position: absolute; top: calc(100% + 3px); left: 0; right: 0; max-height: 220px; overflow-y: auto; border: 1px solid #dfe7dd; border-radius: 6px; background: #fff; box-shadow: 0 6px 16px rgba(37, 59, 45, .14); }
.type-option, .type-empty { padding: 9px 10px; color: #45554a; font-size: 12px; line-height: 1.3; }
.type-option { cursor: pointer; }
.type-option:hover, .type-option.is-active { background: #eef5ef; }
.type-empty { color: #819087; }
.remove-button { border: 0; background: none; color: #b6c1b6; padding: 3px; font-size: 18px; line-height: 1; }
.remove-button:hover { color: #b86558; }
.remove-button:disabled { opacity: .35; cursor: not-allowed; }
.add-button { margin-top: 14px; padding: 10px 0 0; border: 0; background: transparent; color: #70977c; font-size: 12px; font-weight: 700; }
.add-button span { font-size: 17px; vertical-align: -1px; margin-right: 4px; }
.add-button:disabled { opacity: .5; cursor: not-allowed; }
.preview-column { min-width: 0; }
.preview-card { padding: 27px; position: sticky; top: 20px; }
.preview-header { display: flex; justify-content: space-between; align-items: flex-start; }
.preview-kicker { font-size: 9px; letter-spacing: 1.2px; }
.live-dot { width: 6px; height: 6px; margin-right: 5px; }
.preview-header h2 { margin-top: 10px; font: 400 26px Georgia, serif; }
.preview-symbol { color: #b9d1bf; font-size: 36px; line-height: 1; }
.preview-meta { display: flex; justify-content: space-between; margin: 29px 0 11px; color: #a2afa4; font-size: 9px; font-weight: 700; letter-spacing: 1px; }
.preview-scroll { overflow: auto; border: 1px solid #e5eae2; border-radius: 7px; background: #f5f7f3; }
.preview-sheet { width: max-content; min-width: 100%; padding: 25px; }
.print-labels { display: flex; align-items: flex-start; }
.print-label { position: relative; flex: none; display: grid; grid-template-rows: 50% 50%; place-items: center; overflow: hidden; border: 1px solid #9fa9a0; background: #fff; color: #1d2721; text-align: center; }
.print-label svg { display: block; grid-row: 1; width: var(--icon-size); height: var(--icon-size); stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.print-label-text-area { position: absolute; top: calc(25% + var(--icon-half-size) + 1mm); right: 0; bottom: 1mm; left: 0; display: flex; align-items: center; justify-content: center; }
.print-label-text { overflow: hidden; min-height: 0; max-height: 100%; width: 100%; padding: 0 1mm; font: 600 var(--label-font-size, 6pt)/1.1 Arial, sans-serif; overflow-wrap: anywhere; }
.print-label.no-icon .print-label-text-area { top: 1mm; }
.preview-scale { margin-top: 12px; color: #a4b0a5; font-size: 10px; }
.scale-icon { color: #729b7f; font-size: 15px; vertical-align: -1px; margin-right: 3px; }
.scale-separator { padding: 0 5px; }
.summary { display: grid; grid-template-columns: 1fr 1fr; margin-top: 25px; padding: 19px 0; border-top: 1px solid #edf0ea; border-bottom: 1px solid #edf0ea; }
.summary div { display: flex; flex-direction: column; gap: 6px; }
.summary div + div { border-left: 1px solid #edf0ea; padding-left: 22px; }
.summary span { color: #9daaa0; font-size: 10px; }
.summary strong { font-size: 15px; }
.print-button { width: 100%; height: 49px; margin-top: 20px; padding: 0 15px; border: 0; border-radius: 7px; background: #47775f; color: #fff; font-size: 12px; font-weight: 700; text-align: left; }
.print-button:hover { background: #365f4b; }
.print-button:disabled { opacity: .5; cursor: not-allowed; }
.print-button > span:first-child { font-size: 20px; margin-right: 10px; vertical-align: -2px; }
.button-arrow { float: right; font-size: 16px; }
.print-hint { margin: 12px 10px 0; text-align: center; color: #a1ada3; font-size: 10px; line-height: 1.6; }
.error-message { margin-top: 16px; color: #a44c41; font-size: 12px; line-height: 1.5; }
.aside-note { display: flex; gap: 13px; margin: 23px 10px; color: #9aaa9d; font-size: 11px; line-height: 1.7; }
.aside-note > span { color: #91b49b; font-size: 20px; }
.aside-note strong { color: #718979; }
.guide { margin-top: 40px; padding: 28px; color: #45554a; line-height: 1.65; }
.guide h2 { color: #23332d; font-size: 21px; }
.guide h3 { margin: 20px 0 6px; color: #23332d; font-size: 15px; }
.guide ol { margin: 16px 0 0; padding-left: 22px; }
.guide li + li { margin-top: 8px; }
.guide p + p { margin-top: 12px; }
footer { margin-top: 55px; padding: 23px 0; border-top: 1px solid #e4e9e1; display: flex; justify-content: space-between; gap: 10px; color: #acb8ae; font-size: 9px; font-weight: 700; letter-spacing: .9px; }
.footer-dot { color: #b4cdb9; font-size: 6px; padding: 0 5px; }
@media (max-width: 900px) { .layout { grid-template-columns: minmax(0, 1fr); } .preview-card { position: static; } .preview-column { grid-row: 2; } }
@media (max-width: 560px) { .topbar { height: 62px; } .topbar-note, .intro-badge { display: none; } .intro { min-height: 0; padding: 40px 0 30px; } .settings-card, .labels-card, .preview-card { padding: 20px 16px; } .settings-grid { grid-template-columns: 1fr; } .field { display: grid; grid-template-columns: 1fr 120px; align-items: center; gap: 8px; } .field > span:first-child { margin: 0; } .table-head, .label-row { grid-template-columns: 23px minmax(0, 1fr) minmax(105px, .9fr) 18px; gap: 5px; } .row-input, .row-select { padding-left: 6px; font-size: 11px; } .table-head { font-size: 8px; } footer span:last-child { display: none; } }
@page { size: A4 portrait; margin: 1cm; }
@media print {
  body { background: #fff; }
  .topbar, .intro, .editor-column, .preview-header, .preview-meta, .preview-scale, .summary, .error-message, .print-button, .print-hint, .aside-note, .guide, footer { display: none !important; }
  .workspace, .layout, .preview-column, .preview-card, .preview-scroll, .preview-sheet { display: block; width: auto; min-width: 0; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; overflow: visible; background: none; }
  .preview-card { position: static; }
  .print-labels { display: block; font-size: 0; line-height: 0; }
  .print-label { display: inline-grid; vertical-align: top; break-inside: avoid; }
}