.templates-open { min-height: 38px; margin: 0 2px 16px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; }
.template-dialog { width: min(960px,calc(100vw - 24px)); padding: 24px; max-height: 92dvh; overflow: auto; background: white; border: 1px solid var(--ink); }
.template-dialog::backdrop { background: #18181899; }
.template-dialog header { display: flex; justify-content: space-between; align-items: center; }
.template-dialog h2 { margin: 0; font-size: 24px; }
.template-dialog header button { min-width: 40px; min-height: 40px; border: 0; background: none; cursor: pointer; font-size: 24px; }
.template-layout { display: grid; grid-template-columns: minmax(170px,1fr) minmax(0,3fr); gap: 20px; margin-top: 16px; }
.template-sidebar { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.template-sidebar button { text-align: left; overflow-wrap: anywhere; }
.template-sidebar button.active { border-color: var(--ink); background: var(--green); }
#template-list { display: flex; flex-direction: column; gap: 8px; max-height: 45dvh; overflow: auto; }
#template-form { display: grid; gap: 10px; min-width: 0; }
.template-dialog select,.template-dialog input:not([type=checkbox]),.template-dialog textarea { width: 100%; min-width: 0; padding: 10px; border: 1px solid var(--line); font: inherit; box-sizing: border-box; background: white; color: var(--ink); }
.template-dialog label { font-size: 12px; }
.template-dialog > label { display: block; margin: 12px 0 6px; }
.template-dialog textarea { min-height: 190px; resize: vertical; font: 12px/1.6 monospace; }
.template-preview { width: 100%; height: 320px; border: 1px solid var(--line); background: white; }
.template-options { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.template-options input[type=checkbox] { width: auto; }
.compose-template-controls { display: flex; align-items: center; gap: 8px; padding: 12px 24px; flex-wrap: wrap; border-top: 1px solid var(--line); }
.compose-template-controls label { font-size: 12px; }
.compose-template-controls select { flex: 1; min-width: 140px; padding: 8px; max-width: 100%; border: 1px solid var(--line); font: inherit; font-size: 12px; }
.editor-toolbar { display: flex; gap: 4px; flex-wrap: wrap; padding: 10px 16px; background: var(--paper,#f5f5f0); border-block: 1px solid var(--line); }
.editor-toolbar button { border: 1px solid var(--line); background: white; color: var(--ink); padding: 6px 9px; min-height: 34px; cursor: pointer; font-size: 12px; }
.editor-help { font-size: 10px; color: var(--muted); margin: 8px 16px; }
.editor-frame { width: 100%; height: 400px; border: 0; display: block; background: white; }
.composer-dialog .composer-footer { position: sticky; bottom: 0; z-index: 2; background: white; }
#compose-text[hidden] { display: none; }
@media(max-width:780px) { .template-dialog { padding: 16px; }.template-layout { grid-template-columns: minmax(0,1fr); }.template-sidebar { border-bottom: 1px solid var(--line); padding-bottom: 12px; }#template-list { max-height: 140px; }.compose-template-controls { padding: 12px; }.editor-toolbar { padding: 8px; }.editor-toolbar button { min-height: 40px; }.editor-frame { height: 440px; } }