:root{--color-bg-canvas:#f7f8fa;--color-bg-surface:#fff;--color-bg-surface-secondary:#f9fafb;--color-bg-code:#f3f4f6;--color-text-primary:#1f2937;--color-text-secondary:#374151;--color-text-heading:#5f6368;--color-text-muted:#6b7280;--color-text-warning:#8a5a00;--color-bg-warning-subtle:#fff8e6;--color-border-warning:#f2dda2;--color-border-subtle:#e6e8eb;--color-border-strong:#d1d5db;--color-accent:#194cd4;--color-accent-hover:#143ba8;--color-accent-subtle:#eef2ff;--color-success:#16a34a;--color-danger:#dc2626;--color-danger-subtle:#fef2f2;--color-border-danger:#fecaca;--radius-md:6px;--radius-full:9999px;--font-mono:ui-monospace, Consolas, monospace;--font-size-body:13px;--font-size-meta:11px;--font-size-micro:10px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:var(--color-text-primary);background:var(--color-bg-canvas);font-family:Segoe UI,Microsoft YaHei,system-ui,sans-serif}*{box-sizing:border-box}body{min-width:320px;font-size:var(--font-size-body);margin:0}.app-shell{flex-direction:column;min-height:100vh;display:flex}.app-footer{color:var(--color-text-muted);background:var(--color-bg-surface);border-top:1px solid var(--color-border-subtle);font-size:var(--font-size-meta);flex-shrink:0;padding:8px 14px}.app-footer p{margin:0}.app-header{color:#f6f8fb;border-bottom:3px solid var(--color-accent);background:#26303d;padding:10px clamp(14px,3vw,28px)}.app-header-content{justify-content:space-between;align-items:center;gap:16px;display:flex}.app-header h1{margin:0 0 2px;font-size:18px}.app-header p{color:#cdd7e3;font-size:var(--font-size-meta);margin:0}.app-header .version-switch{color:#e9f1f8;font-family:var(--font-mono);background:#ffffff1f;border:1px solid #ffffff3d;flex-shrink:0;align-items:center;gap:6px;padding:6px 10px;font-weight:700;display:inline-flex}.app-header .version-switch:hover{background:#fff3}.version-switch svg{fill:none;stroke:currentColor;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;width:16px;height:16px}.app-header-badge{color:#e9f1f8;border-radius:var(--radius-full);min-width:42px;font-family:var(--font-mono);background:#ffffff1f;border:1px solid #ffffff3d;justify-content:center;align-items:center;padding:3px 8px;font-size:12px;font-weight:700;display:inline-flex}.workspace{flex:1;grid-template-columns:minmax(200px,19%) minmax(320px,1fr) minmax(300px,34%);min-height:0;display:grid}.component-pane,.editor-pane,.preview-pane{border-right:1px solid var(--color-border-subtle);background:var(--color-bg-surface);min-width:0;overflow:auto}.editor-pane{padding:14px clamp(12px,2.4vw,24px) 28px}.preview-pane{background:var(--color-bg-surface);border-right:0;flex-direction:column;display:flex;overflow:hidden}.preview-header{flex-shrink:0;min-height:58px;padding:10px 14px}.preview-header-copy{min-width:0}.preview-actions{flex-shrink:0;gap:8px;display:flex}.preview-actions button{padding:6px 9px;font-size:12px}.preview-diagnostics{color:var(--color-danger);background:var(--color-danger-subtle);border-top:1px solid var(--color-border-danger);border-bottom:1px solid var(--color-border-danger);flex-shrink:0;margin:0;padding:8px 14px;font-size:12px}.preview-diagnostics p{overflow-wrap:anywhere;margin:0}.preview-pane textarea{min-height:0;font:12px/1.6 var(--font-mono);color:var(--color-text-primary);background:var(--color-bg-code);white-space:pre-wrap;overflow-wrap:anywhere;resize:none;border:0;border-radius:0;flex:1;margin:0;padding:12px 14px;overflow-x:hidden}.pane-header{border-bottom:1px solid var(--color-border-subtle);background:var(--color-bg-surface);justify-content:space-between;align-items:center;gap:12px;margin:0;padding:10px 14px;display:flex}.pane-header h2{color:var(--color-text-primary);margin:0 0 2px;font-size:13px;font-weight:600}.pane-header p{color:var(--color-text-muted);font-size:var(--font-size-meta);margin:0}.component-groups{gap:8px;padding:12px 14px 14px;display:grid}.config-version-badge{color:#fff;background:var(--color-success);border-radius:var(--radius-full);font-family:var(--font-mono);align-items:center;padding:2px 10px;font-size:12px;font-weight:700;display:inline-flex}.component-pane section,.component-group{background:var(--color-bg-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);min-width:0;overflow:hidden}.collection-header,h3{color:var(--color-text-secondary);background:var(--color-bg-surface-secondary);border-bottom:1px solid var(--color-border-subtle);justify-content:space-between;align-items:center;gap:8px;margin:0;padding:8px 10px;font-size:12px;font-weight:600;display:flex}.collection-header-title,h3{color:var(--color-text-primary);font-family:var(--font-mono);letter-spacing:.04em;text-transform:uppercase;margin:0;font-size:12px;font-weight:700}.collection-header-title:before,h3:before{content:"";background:var(--color-accent);border-radius:2px;flex-shrink:0;width:6px;height:13px;margin-right:7px;display:inline-block}.collection-header-divider{background:var(--color-border-subtle);flex:1;height:1px;margin:0 2px}.add-button{width:24px;min-height:24px;color:var(--color-accent);border-color:var(--color-accent);background:0 0;border-radius:5px;justify-content:center;align-items:center;padding:0;display:inline-flex}.add-button svg{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;width:12px;height:12px}.add-button:hover{color:var(--color-accent-hover);background:var(--color-accent-subtle);border-color:var(--color-accent-hover)}.component-list{margin:0;padding:8px;list-style:none;display:grid}.component-list li{grid-template-columns:minmax(0,1fr) auto;align-items:stretch;display:grid}.component-list li+li{margin-top:6px}.component-list li.is-drag-over{outline:2px dashed var(--color-accent);outline-offset:2px}.component-button{text-align:left;background:var(--color-bg-surface);min-width:0;padding:7px 9px;display:grid}.component-button:hover{background:var(--color-bg-surface-secondary);border-color:var(--color-border-strong)}.component-button.is-selected{background:var(--color-accent-subtle);border-color:var(--color-accent)}.component-title{color:var(--color-text-primary);font-size:12px;font-weight:600}.component-reference{color:var(--color-text-muted);font-family:var(--font-mono);font-size:var(--font-size-micro);overflow-wrap:anywhere;margin-top:2px}.item-tools{border-left:1px solid var(--color-border-subtle);background:var(--color-bg-surface-secondary);grid-template-rows:repeat(2,minmax(20px,1fr));gap:3px;padding:4px 6px 4px 4px;display:grid}.item-tools button{min-width:24px;min-height:20px;color:var(--color-text-muted);background:var(--color-bg-surface);border-color:var(--color-border-subtle);border-radius:4px;justify-content:center;align-items:center;padding:2px;display:inline-flex}.item-tools button:hover:not(:disabled){color:var(--color-accent);border-color:var(--color-accent)}.item-tools svg{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round;width:12px;height:12px}.collection-empty{color:var(--color-text-warning);background:var(--color-bg-warning-subtle);border-top:1px solid var(--color-border-warning);border-bottom:1px solid var(--color-border-warning);margin:0;padding:10px 12px 12px;font-size:12px}.editor-header{margin-bottom:16px}.editor-eyebrow{color:var(--color-text-muted);font-family:var(--font-mono);font-size:var(--font-size-meta);margin:0 0 2px}.editor-header h2{margin:0;font-size:18px}.field-grid{gap:10px;display:grid}label{font-size:var(--font-size-body);gap:6px;display:grid}label>span:first-child{color:var(--color-text-secondary);font-family:var(--font-mono);font-size:12px;font-weight:600}input,select{min-width:0;font:inherit;background:var(--color-bg-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);padding:8px 10px}input:focus-visible,select:focus-visible,button:focus-visible,textarea:focus-visible,summary:focus-visible{border-color:var(--color-accent);box-shadow:0 0 0 1px var(--color-accent);outline:none}fieldset{border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);gap:8px;min-width:0;margin:0;padding:10px;display:grid}.settings-group{background:var(--color-bg-surface-secondary);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);padding:8px 10px 10px}.settings-group-legend{justify-content:space-between;align-items:center;gap:10px;width:100%;padding:0 2px;display:flex}.settings-group-title{color:var(--color-text-primary);font-family:var(--font-mono);letter-spacing:.04em;text-transform:uppercase;align-items:center;gap:7px;font-size:12px;font-weight:700;display:flex}.settings-group-title:before{content:"";background:var(--color-accent);border-radius:2px;width:6px;height:13px}.settings-group-toggle{color:var(--color-text-muted);font-size:var(--font-size-meta);align-items:center;gap:5px;display:flex}.settings-group-content{gap:8px;padding-top:2px;display:grid}legend{color:var(--color-text-secondary);font-family:var(--font-mono);font-size:12px;font-weight:600}.checkbox-row{flex-wrap:wrap;gap:10px 16px;display:flex}.checkbox-label{align-items:center;gap:7px;display:flex}.checkbox-label>span:first-child{color:inherit;font-family:inherit;font-size:inherit}.reference-line{color:var(--color-text-secondary);background:var(--color-bg-code);border-radius:var(--radius-md);overflow-wrap:anywhere;font-family:var(--font-mono);padding:8px 10px;font-size:12px}.field-note{color:var(--color-text-muted);margin:0;font-size:12px}details{border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);padding:10px}summary{cursor:pointer}.section-summary{color:var(--color-text-primary);align-items:center;gap:8px;font-weight:600;display:flex}.section-summary:before{content:"";background:var(--color-accent);border-radius:2px;width:7px;height:14px}.empty-state{color:var(--color-text-muted);margin:0;padding:8px 0;font-size:12px}button{color:var(--color-text-primary);background:var(--color-bg-surface);border:1px solid var(--color-border-strong);border-radius:var(--radius-md);cursor:pointer;padding:8px 10px;transition:background-color .15s,border-color .15s,color .15s}button:hover{background:var(--color-bg-surface-secondary);border-color:var(--color-border-strong)}button[disabled]{color:var(--color-text-muted);cursor:not-allowed;opacity:.5}.button-primary{color:#fff;background:var(--color-accent);border-color:var(--color-accent)}.button-primary:hover{color:#fff;background:var(--color-accent-hover);border-color:var(--color-accent-hover)}.button-secondary{color:var(--color-accent);border-color:var(--color-accent);background:0 0}.button-secondary:hover{color:var(--color-accent-hover);background:var(--color-accent-subtle);border-color:var(--color-accent-hover)}.button-secondary.is-danger{color:var(--color-danger);border-color:var(--color-danger)}.button-secondary.is-danger:hover{color:#b91c1c;background:var(--color-danger-subtle);border-color:#b91c1c}textarea{width:100%;min-height:300px;font:12px/1.6 var(--font-mono);color:var(--color-text-primary);background:var(--color-bg-code);resize:none;white-space:pre;border:0;border-radius:0;flex:1;padding:16px}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (width<=1100px){.workspace{grid-template-rows:minmax(420px,auto) minmax(320px,auto);grid-template-columns:minmax(180px,240px) minmax(320px,1fr)}.preview-pane{border-top:1px solid var(--color-border-subtle);grid-column:1/-1}.preview-pane textarea{min-height:320px}}@media (width<=720px){.workspace{flex-direction:column;display:flex}.component-pane,.editor-pane,.preview-pane{border-right:0;border-bottom:1px solid var(--color-border-subtle)}.preview-header{flex-direction:column;align-items:flex-start}.preview-actions{width:100%}.preview-actions button{flex:1}.editor-pane{padding:12px 14px}textarea{min-height:280px}}.map-row{grid-template-columns:minmax(120px,1fr) minmax(160px,2fr) auto;align-items:end;gap:10px;display:grid}.map-row button{margin-bottom:1px}.field-with-action{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px;display:grid}.field-with-action-label{min-width:0}.field-action-button{min-width:54px;margin-bottom:1px}.certificate-row{border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);gap:10px;padding:10px;display:grid}textarea{min-height:auto;color:inherit;font:inherit;font-family:var(--font-mono);background:var(--color-bg-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);resize:vertical;white-space:pre;padding:8px 10px}@media (width<=720px){.map-row{grid-template-columns:1fr}}