:root{--bg: #e9e7e2;--panel: #f6f5f2;--panel-edge: #d8d5cf;--ink: #26241f;--muted: #7a766d;--faint: #a8a49b;--accent: #0e6b63;--accent-soft: #e0edeb;--danger: #b3382c;--danger-soft: #f7e6e4;--warn: #92660a;--warn-soft: #f6eed9;--mono: "SF Mono", "Cascadia Code", "Consolas", ui-monospace, monospace;--sans: "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--sans);font-size:13px;color:var(--ink);background:var(--bg);overflow:hidden}button,input,select,textarea{font:inherit;color:inherit}.app{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100vh;max-width:100vw;overflow:hidden}.app-main{display:grid;grid-template-columns:236px minmax(0,1fr) 292px;min-height:0;min-width:0}.toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:2px 4px;min-height:44px;padding:4px 10px;background:var(--panel);border-bottom:1px solid var(--panel-edge);min-width:0}.toolbar .brand{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-right:10px;white-space:nowrap}.toolbar .brand span{color:var(--accent)}.toolbar a.brand{color:inherit;text-decoration:none}.toolbar .sep{width:1px;height:22px;background:var(--panel-edge);margin:0 6px;flex:none}.toolbar .spacer{flex:1}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid transparent;background:transparent;border-radius:5px;padding:5px 9px;cursor:pointer;white-space:nowrap;color:var(--ink);line-height:1.1}.btn:hover{background:#0000000f}.btn:disabled{color:var(--faint);cursor:default;background:transparent}.btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.btn.primary{background:var(--accent);color:#fff;font-weight:600}.btn.primary:hover{background:#0b5750}.btn.primary:disabled{background:var(--faint);color:#fff}.btn.icon-action{display:inline-flex;align-items:center;justify-content:center;padding:5px 8px;border:1px solid var(--panel-edge);color:var(--ink);background:#fff}.btn.icon-action:hover:not(:disabled){border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}.btn.icon-action:disabled{color:var(--faint);background:transparent}.btn.icon-action svg{display:block}.btn.toggle[aria-pressed=true]{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}.btn.danger{color:var(--danger)}.zoom-group{display:flex;align-items:center;gap:2px}.zoom-group .zoom-value{font-family:var(--mono);font-size:11px;min-width:44px;text-align:center;color:var(--muted)}.file-menu{position:relative}.file-menu .menu-pop{position:absolute;top:calc(100% + 4px);left:0;min-width:220px;background:var(--panel);border:1px solid var(--panel-edge);border-radius:8px;box-shadow:0 10px 28px #0003;padding:4px;z-index:60}.file-menu .menu-item{display:flex;align-items:center;gap:10px;width:100%;border:none;background:transparent;border-radius:5px;padding:7px 10px;cursor:pointer;font-size:13px;color:var(--ink);text-align:left}.file-menu .menu-item:hover{background:var(--accent-soft);color:var(--accent)}.file-menu .menu-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.file-menu .menu-item .shortcut{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--faint)}.file-menu .menu-divider{height:1px;background:var(--panel-edge);margin:4px 6px}.canvas-column{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;container-type:inline-size}.canvas-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:2px 3px;padding:3px 8px;background:var(--panel);border-bottom:1px solid var(--panel-edge);flex:none;min-width:0}.canvas-toolbar .btn{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;font-size:12px}.canvas-toolbar .btn svg{flex:none}@container (max-width: 980px){.canvas-toolbar .btn{gap:0;padding:5px 7px}.canvas-toolbar .btn-label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}.canvas-toolbar .sep{width:1px;height:18px;background:var(--panel-edge);margin:0 4px;flex:none}.zoom-fab{position:absolute;right:14px;bottom:14px;display:flex;align-items:center;gap:1px;background:var(--panel);border:1px solid var(--panel-edge);border-radius:8px;box-shadow:0 4px 14px #00000024;padding:2px;z-index:12}.zoom-fab .btn{padding:4px 8px;font-size:12px}.zoom-fab .zoom-value{font-family:var(--mono);font-size:11px;min-width:42px;text-align:center;color:var(--muted)}.side-panel{background:var(--panel);overflow-y:auto;min-height:0}.side-panel.left{border-right:1px solid var(--panel-edge);display:flex;flex-direction:column;overflow:hidden}.side-panel.right{border-left:1px solid var(--panel-edge);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-bottom:32px}.panel-section{padding:10px 12px 12px;border-bottom:1px solid var(--panel-edge)}.panel-title{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}.panel-section.collapsible{padding:0;display:flex;flex-direction:column;min-height:0}.panel-section.collapsible.grow{flex:1}.section-header{display:flex;align-items:center;gap:6px;width:100%;border:none;background:transparent;cursor:pointer;padding:9px 12px;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);flex:none}.section-header:hover{color:var(--ink)}.section-header:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.section-header .chev{width:10px;color:var(--faint)}.section-header .section-badge{margin-left:auto;background:#00000012;border-radius:8px;padding:1px 7px;font-weight:600;letter-spacing:0}.section-body{padding:0 12px 12px;min-height:0;display:flex;flex-direction:column}.section-body.scroll{overflow:hidden;flex:1}.section-body.scroll .fields-list{overflow-y:auto;flex:1;min-height:40px;scrollbar-width:thin}.fields-toolbar{margin-bottom:6px;flex:none;display:flex;flex-direction:column;gap:5px}.fields-toolbar select{width:100%;border:1px solid var(--panel-edge);border-radius:4px;padding:3px 6px;background:#fff;font-size:12px}.fields-toolbar .add-all{border:1px solid var(--accent);color:var(--accent);font-size:11px;padding:3px 8px}.fields-toolbar .add-all:hover{background:var(--accent-soft)}.record-nav{display:flex;align-items:center;gap:4px;background:var(--accent-soft);border:1px solid var(--accent);border-radius:6px;padding:3px 6px}.record-nav .record-label{flex:1;min-width:0;font-family:var(--mono);font-size:10px;color:var(--accent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}.record-nav .icon-btn{border:none;background:transparent;color:var(--accent);cursor:pointer;font-size:10px;padding:2px 5px;border-radius:4px;flex:none}.record-nav .icon-btn:hover:not(:disabled){background:#0e6b6326}.record-nav .icon-btn:disabled{opacity:.35;cursor:default}.field-line{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto auto;gap:3px;align-items:center;padding:1px 0}.field-line .field-name{font-family:var(--mono);font-size:10.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);border:none;background:transparent;text-align:left;padding:2px 3px;border-radius:4px;cursor:grab;min-width:0}.field-line .field-name:hover{background:var(--accent-soft);color:var(--accent)}.field-line .field-name:active{cursor:grabbing}.field-line .field-name:focus-visible{outline:2px solid var(--accent);outline-offset:-1px}.field-line .field-name.used{color:var(--accent);font-weight:600}.field-line .field-name.used:before{content:"● ";font-size:7px;vertical-align:1px}.field-line .field-value{border:1px solid var(--panel-edge);border-radius:4px;padding:2px 5px;font-size:11px;background:#fff;min-width:0}.field-line .icon-btn{border:none;background:transparent;cursor:pointer;padding:1px 3px;border-radius:4px;color:var(--muted);font-size:11px}.field-line .icon-btn:hover{background:#00000012;color:var(--ink)}.field-line .icon-btn:disabled{color:var(--panel-edge);cursor:default}.palette{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px}.palette button{border:1px solid var(--panel-edge);background:#fff;border-radius:6px;padding:6px 3px;cursor:grab;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;color:var(--ink)}.palette button:hover{border-color:var(--accent);color:var(--accent)}.palette button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.palette button:active{cursor:grabbing}.palette .glyph{font-size:14px;line-height:1}.add-field{display:flex;gap:4px;margin-top:8px;flex:none}.add-field input{flex:1;min-width:0;border:1px solid var(--panel-edge);border-radius:4px;padding:4px 6px;font-family:var(--mono);font-size:11px}.canvas-wrap{position:relative;overflow:auto;background:radial-gradient(rgba(0,0,0,.075) 1px,transparent 1px) 0 0 / 18px 18px,var(--bg);min-height:0}.prop-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 8px}.prop-grid .full{grid-column:1 / -1}.prop-field{display:flex;flex-direction:column;gap:2px;min-width:0}.prop-field label{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.prop-field input[type=text],.prop-field input[type=number],.prop-field select,.prop-field textarea{border:1px solid var(--panel-edge);border-radius:4px;padding:4px 6px;background:#fff;width:100%;min-width:0}.prop-field input[type=number],.prop-field input.mono{font-family:var(--mono);font-size:12px}.prop-field input:focus-visible,.prop-field select:focus-visible,.prop-field textarea:focus-visible{outline:2px solid var(--accent);outline-offset:0}.prop-check{display:flex;align-items:center;gap:6px;font-size:12px}.hint{font-size:11px;color:var(--muted);margin:6px 0 0;line-height:1.45}.hint.mono{font-family:var(--mono)}.btn-row{display:flex;flex-wrap:wrap;gap:4px}.zpl-panel{width:340px;max-width:44vw;flex:none;display:flex;flex-direction:column;background:var(--panel);border-left:1px solid var(--panel-edge);min-height:0}.zpl-panel header{display:flex;align-items:center;gap:6px;padding:6px 10px;border-bottom:1px solid var(--panel-edge);flex:none}.zpl-panel header h2{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0;flex:1}.zpl-panel pre{flex:1;overflow:auto;margin:0;padding:10px;font-family:var(--mono);font-size:10.5px;line-height:1.5;background:#fff;white-space:pre}.zpl-panel .mode-row{display:flex;gap:10px;padding:6px 10px;border-bottom:1px solid var(--panel-edge);flex:none;font-size:11px}.zpl-panel .zpl-edit{flex:1;min-height:0;border:none;outline:2px solid var(--accent);outline-offset:-2px;resize:none;margin:0;padding:10px;font-family:var(--mono);font-size:10.5px;line-height:1.5;background:#fff;white-space:pre}.zpl-panel .zpl-status{flex:none;padding:6px 10px;font-size:11px;color:var(--accent);background:var(--accent-soft);border-top:1px solid var(--panel-edge)}.preview-fab{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:7px;border:none;background:var(--accent);color:#fff;font-size:13px;font-weight:700;border-radius:22px;padding:9px 18px;cursor:pointer;box-shadow:0 5px 16px #0e6b6366;z-index:12}.preview-fab:hover{background:#0b5750}.preview-fab:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.preview-fab svg{display:block}.preview-banner{align-self:center;margin:10px 12px 8px;background:var(--ink);color:#fff;border-radius:26px;padding:8px 10px 8px 18px;font-size:13px;z-index:15;display:flex;gap:12px;align-items:center;box-shadow:0 6px 22px #00000059;max-width:calc(100% - 40px)}.preview-banner .preview-label{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8fd6cf}.preview-banner .preview-nav{display:flex;align-items:center;gap:6px;min-width:0}.preview-banner .preview-record{font-family:var(--mono);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-banner .nav-btn{border:none;background:#ffffff29;color:#fff;border-radius:50%;width:26px;height:26px;cursor:pointer;font-size:11px;flex:none}.preview-banner .nav-btn:hover:not(:disabled){background:#ffffff52}.preview-banner .nav-btn:disabled{opacity:.35;cursor:default}.preview-banner .exit-btn{border:none;background:var(--accent);color:#fff;border-radius:16px;padding:6px 16px;cursor:pointer;font-size:12px;font-weight:700;flex:none}.preview-banner .exit-btn:hover{background:#0b8377}.statusbar{display:flex;align-items:center;flex-wrap:wrap;gap:2px 14px;background:var(--panel);border-top:1px solid var(--panel-edge);min-height:28px;padding:2px 12px;font-size:11px;color:var(--muted);font-family:var(--mono);overflow:hidden;white-space:nowrap;min-width:0}.statusbar .spacer{flex:1}.statusbar .status-btn{border:none;background:transparent;cursor:pointer;font:inherit;padding:2px 6px;border-radius:4px}.statusbar .status-btn:hover{background:#00000012}.statusbar .err{color:var(--danger);font-weight:700}.statusbar .warn{color:var(--warn);font-weight:700}.statusbar .ok{color:var(--accent)}.validation-drawer{position:absolute;right:12px;bottom:12px;width:380px;max-height:46%;overflow-y:auto;background:var(--panel);border:1px solid var(--panel-edge);border-radius:8px;box-shadow:0 8px 24px #0000002e;z-index:20}.validation-drawer header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--panel-edge);position:sticky;top:0;background:var(--panel)}.validation-drawer h2{font-size:12px;margin:0}.issue{display:block;width:100%;text-align:left;border:none;background:transparent;padding:8px 12px;cursor:pointer;border-bottom:1px solid rgba(0,0,0,.05);line-height:1.4}.issue:hover{background:#0000000a}.issue .sev{font-weight:700;font-size:10px;letter-spacing:.08em;text-transform:uppercase}.issue.error .sev{color:var(--danger)}.issue.warning .sev{color:var(--warn)}.issue .action{color:var(--muted);font-size:11px;display:block;margin-top:2px}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#1e1c1873;display:flex;align-items:center;justify-content:center;z-index:50}.modal{background:var(--panel);border-radius:10px;box-shadow:0 18px 50px #0000004d;width:min(640px,calc(100vw - 48px));max-height:calc(100vh - 80px);display:flex;flex-direction:column}.modal.wide{width:min(860px,calc(100vw - 48px))}.modal header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--panel-edge)}.modal header h2{margin:0;font-size:14px}.modal .modal-body{padding:14px 16px;overflow-y:auto}.modal footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--panel-edge)}.modal .close-btn{border:none;background:transparent;font-size:16px;cursor:pointer;color:var(--muted);padding:2px 6px;border-radius:4px}.modal .close-btn:hover{background:#00000012;color:var(--ink)}.radio-row{display:flex;flex-direction:column;gap:6px;margin:4px 0 10px}.radio-row label{display:flex;gap:8px;align-items:baseline;cursor:pointer;line-height:1.4}.radio-row .sub{color:var(--muted);font-size:11px}.callout{border-radius:6px;padding:8px 10px;font-size:12px;line-height:1.5;margin:8px 0}.callout.warn{background:var(--warn-soft);color:var(--warn)}.callout.error{background:var(--danger-soft);color:var(--danger)}.callout.ok{background:var(--accent-soft);color:var(--accent)}.zpl-view{width:100%;min-height:320px;font-family:var(--mono);font-size:11px;white-space:pre;border:1px solid var(--panel-edge);border-radius:6px;background:#fff;padding:8px;resize:vertical}.data-textarea{width:100%;min-height:140px;font-family:var(--mono);font-size:11px;border:1px solid var(--panel-edge);border-radius:6px;padding:8px;background:#fff;resize:vertical}.records-table{width:100%;border-collapse:collapse;font-size:11px;margin-top:8px}.records-table th,.records-table td{text-align:left;border-bottom:1px solid var(--panel-edge);padding:4px 6px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.records-table th{color:var(--muted);font-weight:600}.records-table tr.active{background:var(--accent-soft)}.records-table tr{cursor:pointer}.shortcut-table{width:100%;border-collapse:collapse;font-size:12px}.shortcut-table td{padding:4px 8px;border-bottom:1px solid rgba(0,0,0,.06)}.shortcut-table td:first-child{font-family:var(--mono);font-size:11px;white-space:nowrap;color:var(--muted)}.toast{position:fixed;bottom:44px;right:20px;max-width:380px;background:var(--ink);color:#fff;border-radius:6px;padding:9px 14px;font-size:12px;line-height:1.45;z-index:100;box-shadow:0 6px 18px #0000004d}@media(max-width:1600px){.btn{padding:5px 7px;font-size:12px}.toolbar .brand{margin-right:6px}.toolbar .sep{margin:0 3px}.app-main{grid-template-columns:210px minmax(0,1fr) 264px}.zpl-panel{width:300px}}@media(max-width:1360px){.app-main{grid-template-columns:192px minmax(0,1fr) 244px}.zpl-panel{width:264px}.palette{grid-template-columns:1fr 1fr}.zoom-group .zoom-value{min-width:36px}}@media(max-width:1120px){.app-main{grid-template-columns:176px minmax(0,1fr) 224px}.zpl-panel{width:232px}.btn{padding:4px 6px;font-size:11px}}@media(prefers-reduced-motion:no-preference){.modal{animation:modal-in .12s ease-out}@keyframes modal-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}}