#templatesPage{
display:grid;
grid-template-columns:2fr 1fr;
gap:25px;
align-items:stretch;
}

.template-card{
background:white;
border-radius:22px;
padding:28px;
box-shadow:0 2px 10px rgba(0,0,0,0.04);
}

.template-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;
}

.template-title{
font-size:24px;
font-weight:700;
color:#2563eb;
margin:0;
}

.new-template-btn{
background:#2563eb;
color:white;
border:none;
padding:14px 20px;
border-radius:14px;
font-size:15px;
font-weight:600;
cursor:pointer;
}

#templateName,
#templateSubject{
width:100%;
padding:16px;
border-radius:14px;
border:1px solid #dbe1ea;
font-size:15px;
margin-bottom:18px;
outline:none;
box-sizing:border-box;
}

#editorContainer{
border:1px solid #dbe1ea;
border-radius:16px;
overflow:hidden;
background:white;
}

#toolbar{
border-bottom:1px solid #e5e7eb;
background:#fafafa;
}

#templateEditor{
height:350px;
font-size:15px;
}

.save-template-btn{
margin-top:20px;
background:#0f172a;
color:white;
border:none;
padding:15px 22px;
border-radius:14px;
font-size:15px;
font-weight:600;
cursor:pointer;
}

#templatesList{
max-height:700px;
overflow-y:auto;
padding-right:5px;
}

.template-item{
display:flex;
justify-content:space-between;
align-items:center;
padding:16px;
border:1px solid #edf1f7;
border-radius:18px;
margin-bottom:14px;
background:#fff;
}

.template-left{
display:flex;
align-items:center;
gap:14px;
}

.template-icon{
width:48px;
height:48px;
border-radius:14px;
background:#eef2ff;
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
}

.template-info h3{
margin:0;
font-size:16px;
color:#111827;
}

.template-date{
font-size:13px;
color:#6b7280;
margin-top:4px;
}

.template-buttons{
display:flex;
gap:10px;
}

.edit-btn{
background:#0f172a;
color:white;
border:none;
padding:10px 14px;
border-radius:12px;
cursor:pointer;
font-size:14px;
}

.delete-btn{
background:#ef4444;
color:white;
border:none;
padding:10px 14px;
border-radius:12px;
cursor:pointer;
font-size:14px;
}

#templateReplyTo{
width:100%;
padding:16px;
border-radius:14px;
border:1px solid #dbe1ea;
font-size:15px;
margin-bottom:18px;
outline:none;
box-sizing:border-box;
}

.template-actions{
margin-top:20px;
display:flex;
justify-content:space-between;
align-items:center;
gap:15px;
}

#testEmailAddress{
flex:1;
padding:15px;
border-radius:14px;
border:1px solid #dbe1ea;
font-size:15px;
}

.test-template-btn{
background:#22c55e;
color:white;
border:none;
padding:15px 22px;
border-radius:14px;
font-size:15px;
font-weight:600;
cursor:pointer;
}