body { margin:0; background:#f8fafc; color:#0f172a; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif; }
.template-editor-root { min-height:100vh; padding:24px; box-sizing:border-box; }
.template-editor-header { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin-bottom:18px; }
.template-editor-kicker { margin:0 0 6px; color:#2563eb; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.template-editor-header h1 { margin:0; font-size:28px; }
.template-editor-subtitle { margin:8px 0 0; color:#64748b; font-size:14px; max-width:760px; }
.template-editor-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; }
.template-editor-button { border:1px solid rgba(15,23,42,.14); border-radius:12px; background:#fff; color:#0f172a; padding:10px 14px; cursor:pointer; font:inherit; }
.template-editor-button:hover { border-color:rgba(37,99,235,.45); }
.template-editor-button.primary { background:#2563eb; border-color:#2563eb; color:#fff; }
.template-editor-button.danger { color:#b91c1c; border-color:rgba(185,28,28,.24); }
.template-editor-button.tiny { padding:5px 8px; border-radius:8px; font-size:12px; }
.template-kind-tabs { display:flex; gap:10px; margin-bottom:16px; }
.template-kind-tab { border:1px solid rgba(37,99,235,.18); border-radius:999px; padding:8px 14px; background:#fff; color:#334155; cursor:pointer; }
.template-kind-tab.active { background:#2563eb; color:#fff; }
.template-editor-alert { margin:0 0 16px; padding:12px 14px; border-radius:14px; font-size:13px; border:1px solid transparent; }
.template-editor-alert.info { background:#eff6ff; border-color:#bfdbfe; color:#1d4ed8; }
.template-editor-alert.success { background:#ecfdf5; border-color:#bbf7d0; color:#047857; }
.template-editor-alert.warning { background:#fffbeb; border-color:#fde68a; color:#b45309; }
.template-editor-alert.error { background:#fef2f2; border-color:#fecaca; color:#b91c1c; }
.template-editor-layout { display:grid; grid-template-columns:280px minmax(0,1fr) 320px; gap:16px; align-items:start; }
.template-editor-layout.production { grid-template-columns:310px minmax(0,1fr) 380px; }
.template-editor-panel, .render-tree-preview { min-height:420px; border:1px solid rgba(15,23,42,.08); border-radius:18px; background:#fff; box-shadow:0 18px 50px rgba(15,23,42,.06); }
.template-editor-panel { padding:18px; }
.template-editor-panel h2 { margin:18px 0 14px; font-size:16px; }
.template-editor-panel h2:first-child { margin-top:0; }
.template-style-summary { display:grid; gap:8px; padding:12px; border-radius:14px; background:#f8fafc; color:#475569; font-size:13px; }
.draft-save-panel { margin-top:18px; display:grid; gap:10px; }
.draft-save-panel label, .property-field span { font-size:13px; font-weight:700; }
.draft-save-panel textarea, .property-field textarea, .property-field input, #template-json-editor, .slot-editor-row input { border:1px solid rgba(15,23,42,.14); border-radius:12px; padding:10px; font:inherit; box-sizing:border-box; width:100%; }
.draft-save-panel textarea { min-height:86px; resize:vertical; }
.property-field { display:grid; gap:8px; margin-bottom:12px; }
.property-field textarea { min-height:94px; resize:vertical; font-family:"SFMono-Regular",Consolas,monospace; font-size:12px; }
.template-editor-note, .template-editor-empty { color:#64748b; font-size:13px; }
.render-tree-preview { overflow:auto; padding:18px; }
.property-schema-panel { overflow:auto; max-height:calc(100vh - 150px); }
.property-schema-row { padding:10px 0; border-bottom:1px solid rgba(15,23,42,.08); }
.property-schema-label { font-size:13px; font-weight:700; color:#0f172a; }
.property-schema-meta { margin-top:4px; font-size:12px; color:#64748b; word-break:break-all; }
.te-canvas { background:#fff; border:1px solid rgba(15,23,42,.12); overflow:hidden; transform-origin:top left; transform:scale(.56); margin-bottom:-520px; }
.te-node { box-sizing:border-box; pointer-events:auto; }
.te-node-text { color:#111827; font-family:"Microsoft YaHei", sans-serif; overflow:hidden; }
.te-node-component-slot { border:1px dashed rgba(37,99,235,.35); background:rgba(37,99,235,.06); }
.template-gate-panel { margin-top:14px; }
.te-golden-empty { color:#64748b; font-size:12px; padding:10px; background:#f8fafc; border-radius:12px; }
.te-golden-card { padding:12px; border-radius:14px; border:1px solid rgba(15,23,42,.08); background:#f8fafc; display:grid; gap:6px; }
.te-golden-card.passed { background:#ecfdf5; border-color:#bbf7d0; }
.te-golden-card.failed { background:#fef2f2; border-color:#fecaca; }
.te-golden-summary { font-weight:800; }
.te-golden-summary.passed, .te-golden-check.passed { color:#047857; }
.te-golden-summary.failed, .te-golden-check.failed { color:#b91c1c; }
.te-golden-meta, .te-golden-check, .te-golden-errors { font-size:12px; color:#64748b; word-break:break-all; }
.layer-panel { display:grid; gap:8px; }
.layer-row { display:flex; justify-content:space-between; gap:10px; padding:10px; border-radius:12px; background:#f8fafc; font-size:13px; }
.slot-editor-title { margin:14px 0 8px; font-weight:800; font-size:13px; }
.slot-editor-row { display:grid; grid-template-columns:1fr 1fr auto auto auto auto; gap:6px; align-items:center; margin-bottom:8px; padding:8px; background:#f8fafc; border-radius:12px; }
.slot-editor-row label { display:flex; gap:4px; align-items:center; font-size:12px; }
.slot-editor-row input[type="checkbox"] { width:auto; }
.programmer-entry { margin-top:18px; border-top:1px solid rgba(15,23,42,.08); padding-top:14px; }
.programmer-entry summary { cursor:pointer; font-size:13px; font-weight:800; }
#template-json-editor { margin-top:10px; min-height:220px; resize:vertical; font-family:"SFMono-Regular",Consolas,monospace; font-size:12px; }
.version-list { display:grid; gap:8px; }
.version-row { padding:10px; border-radius:12px; background:#f8fafc; display:grid; gap:6px; font-size:12px; }
@media (max-width: 1100px) {
  .template-editor-layout, .template-editor-layout.production { grid-template-columns:1fr; }
  .template-editor-header { flex-direction:column; }
  .te-canvas { transform:scale(.48); }
}