.template-toolbar{display:flex;gap:12px;align-items:end;margin-bottom:16px}.template-toolbar label{display:grid;gap:5px}.template-toolbar label:first-child{flex:1}.template-toolbar input,.template-toolbar select,.template-field input,.template-field textarea,.history-controls select{width:100%;border:1px solid var(--line);border-radius:7px;background:var(--white);padding:11px 12px;color:var(--ink)}
.template-workspace{display:grid;grid-template-columns:290px minmax(0,1fr);min-height:680px;background:var(--white);border:1px solid var(--line);border-radius:10px;overflow:hidden}.template-navigation{position:static;width:auto;padding:10px;background:#f8faf9;border:0;border-right:1px solid var(--line);display:block;overflow:auto}.template-nav-count{padding:8px 10px;color:var(--muted);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px}.template-nav-item{display:grid;width:100%;gap:3px;text-align:left;border:0;background:transparent;padding:11px 12px;border-radius:7px;color:var(--ink);cursor:pointer}.template-nav-item:hover,.template-nav-item.active{background:var(--mint);color:var(--green)}.template-nav-item span{font-weight:750}.template-nav-item small{color:var(--muted)}.template-no-results{padding:20px;color:var(--muted)}
.template-editor-panel{min-width:0}.template-editor{padding:26px 30px}.template-editor-head{display:flex;justify-content:space-between;align-items:start;gap:20px;padding-bottom:18px;border-bottom:1px solid var(--line)}.template-editor-head h2{font-size:24px;margin:0}.template-editor-head p{margin:3px 0 0}.view-toggle{display:flex;padding:3px;background:#edf2ef;border-radius:8px}.view-toggle button{border:0;background:transparent;padding:7px 13px;border-radius:6px;color:var(--muted);font-weight:750;cursor:pointer}.view-toggle button.active{background:var(--white);color:var(--green);box-shadow:0 1px 3px #10241f20}
.template-field{display:grid;gap:7px;margin:20px 0}.template-field label,.history-controls label{font-weight:750}.template-field input{font-size:16px}.template-field textarea{min-height:420px;resize:vertical;font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace}.template-body-preview{margin:20px 0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--white)}.template-body-preview iframe{display:block;width:100%;height:430px;border:0;background:white}.plain-email-preview{min-height:300px;padding:28px;white-space:pre-wrap;font-size:15px;line-height:1.65}
.variable-points{margin:20px 0;padding:16px;background:#f5f8f6;border-radius:8px}.variable-points>strong{display:block;margin-bottom:9px}.variable-points details{margin-top:12px}.variable-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.variable-chips code{padding:4px 8px;border-radius:20px;background:var(--mint);color:var(--green);font-size:12px}.button-row{display:flex;gap:10px;align-items:center;margin:18px 0}.button-row button,.history-controls button{padding:10px 14px;border:1px solid var(--line);border-radius:7px;background:var(--white);font-weight:750;cursor:pointer}.button-row button.primary{border-color:var(--green);background:var(--green);color:var(--white)}.version-history{margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}.history-controls{display:grid;grid-template-columns:minmax(240px,1fr) auto;align-items:end;gap:10px;margin-top:14px}.history-controls label{display:grid;gap:6px}
@media(max-width:760px){.template-toolbar{display:grid}.template-workspace{display:block}.template-navigation{max-height:230px;border-right:0;border-bottom:1px solid var(--line)}.template-editor{padding:20px 16px}.template-editor-head{display:grid}.view-toggle{width:max-content}.history-controls{grid-template-columns:1fr}}