.zpl-tool{padding:3.5rem 0}.zpl-tool [hidden]{display:none!important}.zpl-tool__form{display:grid;gap:1.5rem}.zpl-panel{min-width:0;padding:1.75rem;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}.zpl-panel__header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.5rem}.zpl-panel h2{font-size:clamp(1.25rem,2vw,1.6rem)}.zpl-panel h3{margin-bottom:.8rem;font-size:1.05rem}.zpl-panel__header p,.zpl-help{margin-top:.35rem;color:var(--color-text-secondary);font-size:.9rem}.zpl-settings-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}.zpl-field{display:flex;flex-direction:column;gap:.4rem}.zpl-field label{font-size:.9rem;font-weight:650}.zpl-field input,.zpl-field select{width:100%;min-height:44px;padding:.65rem .8rem;color:var(--color-text);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-sm);font:inherit}.zpl-field input:focus-visible,.zpl-field select:focus-visible,.zpl-editor-viewport:focus-visible,.zpl-preview-viewport:focus-visible{outline:3px solid color-mix(in srgb,var(--color-primary) 38%,transparent);outline-offset:2px;border-color:var(--color-primary)}.zpl-field input[aria-invalid=true]{border-color:var(--color-danger)}.zpl-settings-meta{display:flex;align-items:center;gap:.5rem;margin-top:1rem;color:var(--color-text-secondary);font-size:.9rem}.zpl-settings-meta strong{color:var(--color-text)}.zpl-message,.zpl-feedback{padding:.8rem 1rem;border-radius:var(--radius-sm);font-size:.9rem}.zpl-message{margin-top:.8rem}.zpl-message--error,.zpl-feedback[data-tone=error]{color:#991b1b;background:#fef2f2;border:1px solid #fecaca}.zpl-feedback{margin:1rem 0 0}.zpl-feedback[data-tone=success]{color:#065f46;background:#ecfdf5;border:1px solid #a7f3d0}.zpl-toolbar.ql-toolbar.ql-snow{display:flex;flex-wrap:wrap;gap:.15rem;padding:.75rem;background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-sm) var(--radius-sm) 0 0}.zpl-tool .ql-snow .ql-stroke{stroke:var(--color-text)}.zpl-tool .ql-snow .ql-fill,.zpl-tool .ql-snow .ql-stroke.ql-fill{fill:var(--color-text)}.zpl-tool .ql-snow .ql-picker{color:var(--color-text)}.zpl-editor-viewport{width:100%;max-width:100%;max-height:72vh;overflow:auto;padding:1rem;background-color:var(--color-bg-tertiary);background-image:linear-gradient(var(--color-border) 1px,transparent 1px),linear-gradient(90deg,var(--color-border) 1px,transparent 1px);background-size:24px 24px;border:1px solid var(--color-border);border-top:0;border-radius:0 0 var(--radius-sm) var(--radius-sm)}.zpl-editor-canvas{--zpl-editor-width: 800px;--zpl-editor-height: 1200px;width:var(--zpl-editor-width);min-width:var(--zpl-editor-width)}.zpl-editor-canvas .ql-container.ql-snow{box-sizing:border-box;width:var(--zpl-editor-width);height:var(--zpl-editor-height);overflow:hidden;background:#fff;border:1px solid #d1d5db;font-family:var(--font-family)}.zpl-editor-canvas .ql-editor{box-sizing:border-box;width:var(--zpl-editor-width);height:var(--zpl-editor-height);overflow:hidden;color:#000;background:#fff}.zpl-editor-canvas .ql-editor img{max-width:100%;cursor:nwse-resize}.zpl-editor-actions,.zpl-result-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.25rem}.zpl-tool .btn:disabled{cursor:not-allowed;opacity:.55}.zpl-spinner{display:none;width:1rem;height:1rem;border:2px solid currentColor;border-right-color:transparent;border-radius:999px;animation:zpl-spin .8s linear infinite}.zpl-tool .is-loading .zpl-spinner,.zpl-spinner--visible{display:inline-block}.zpl-result{margin-top:1.5rem}.zpl-result-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:1.5rem}.zpl-preview-viewport{max-height:36rem;overflow:auto;padding:1rem;background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-sm)}.zpl-preview-viewport img{display:block;width:auto;max-width:none;height:auto;background:#fff}.zpl-result-sidebar{display:grid;align-content:start;gap:1.5rem}.zpl-print{padding:1rem;background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-sm)}.zpl-printer-state{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;color:var(--color-text-secondary)}.zpl-printer-state .btn{margin-top:.25rem}.zpl-code-details{margin-top:1.5rem;border:1px solid var(--color-border);border-radius:var(--radius-sm)}.zpl-code-details summary{padding:.9rem 1rem;cursor:pointer;font-weight:650}.zpl-code-details pre{max-height:24rem;margin:0;overflow:auto;padding:1rem;color:var(--color-text);background:var(--color-bg-secondary);border-top:1px solid var(--color-border);white-space:pre-wrap;word-break:break-all;font-size:.75rem}.zpl-tool__footer{display:flex;justify-content:center;margin-top:2rem}@keyframes zpl-spin{to{transform:rotate(360deg)}}@media(max-width:900px){.zpl-settings-grid,.zpl-result-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.zpl-result-grid>section,.zpl-result-sidebar{grid-column:1 / -1}}@media(max-width:600px){.zpl-tool{padding:2.5rem 0}.zpl-panel{padding:1rem}.zpl-settings-grid{grid-template-columns:1fr}.zpl-editor-viewport,.zpl-preview-viewport{padding:.65rem}.zpl-editor-actions .btn,.zpl-result-actions .btn,.zpl-tool__footer .btn{width:100%;justify-content:center}}@media(prefers-reduced-motion:reduce){.zpl-spinner{animation-duration:1.8s}}
