body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; background: #f3f2f1; color: #323130; }
header { background: #0078d4; color: white; padding: 15px 20px; }
h1 { margin: 0; font-size: 20px; }
.container { display: flex; height: calc(100vh - 55px); }

.sidebar { width: 250px; background: white; border-right: 1px solid #edebe9; padding: 20px; overflow-y: auto; }
.sidebar h2 { font-size: 16px; margin-top: 0; }
#template-list { list-style: none; padding: 0; }
#template-list li { padding: 10px; cursor: pointer; border-bottom: 1px solid #edebe9; }
#template-list li:hover { background: #f3f2f1; }

.editor-area { flex: 1; display: flex; flex-direction: column; padding: 20px; }
.editor-header { display: flex; gap: 15px; align-items: center; margin-bottom: 20px; }
#tpl-name { flex: 1; padding: 10px; font-size: 16px; border: 1px solid #8a8886; border-radius: 2px; }

.btn { padding: 10px 20px; border: none; cursor: pointer; border-radius: 2px; font-weight: 600; }
.btn-primary { background: #0078d4; color: white; }
.btn-primary:hover { background: #106ebe; }
.btn-secondary { background: #e1dfdd; color: #323130; width: 100%; margin-top: 15px; }

.split-view { display: flex; gap: 20px; flex: 1; min-height: 0; }
.code-section, .preview-section { flex: 1; display: flex; flex-direction: column; }
.help-text { font-size: 12px; color: #605e5c; margin: 0 0 10px 0; }
textarea { flex: 1; resize: none; padding: 15px; font-family: monospace; border: 1px solid #8a8886; }
.preview-box { flex: 1; background: white; padding: 20px; border: 1px solid #8a8886; overflow-y: auto; }