.walk-email-template-page .page-hero { align-items: center; }
.walk-email-hero { background: radial-gradient(circle at top left, rgba(28,124,84,.18), transparent 36%), linear-gradient(135deg,#fff,#f8fafc); }
.walk-email-layout { grid-template-columns: minmax(290px, 370px) minmax(0, 1fr); align-items: start; }
.walk-email-sidebar, .walk-email-editor-panel { border-radius: 26px; }
.walk-email-sidebar select, .walk-email-editor-panel input, .walk-email-editor-panel textarea { width: 100%; }
.email-studio-summary { margin: 18px 0; gap: 14px; }
.summary-card { display:flex; gap:12px; align-items:flex-start; padding:16px; border:1px solid #e2e8f0; border-radius:20px; background:#fff; box-shadow:0 14px 35px rgba(15,23,42,.05); }
.summary-card span { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:12px; background:#ecfdf5; color:#0f766e; font-weight:900; flex:0 0 auto; }
.summary-card strong { display:block; color:#0f172a; }
.summary-card small { display:block; color:#64748b; line-height:1.45; margin-top:3px; }
.walk-email-info { margin-top: 12px; padding: 14px; border-radius: 18px; background: #f8fafc; border: 1px solid #e2e8f0; line-height: 1.55; }
.walk-email-mini-pills { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.walk-email-mini-pills span { display:inline-flex; padding:4px 8px; border-radius:999px; background:#ecfdf5; color:#0f766e; font-weight:800; font-size:11px; text-transform:capitalize; }
.template-type-list { display: grid; gap: 10px; margin: 18px 0; }
.template-type-btn { text-align: left; border: 1px solid #e2e8f0; background: #fff; border-radius: 16px; padding: 14px; cursor: pointer; box-shadow: 0 8px 22px rgba(15, 23, 42, .04); transition: .18s ease; }
.template-type-btn:hover { transform: translateY(-1px); border-color: #99f6e4; }
.template-type-btn.active { border-color: #1c7c54; background: linear-gradient(135deg, rgba(28,124,84,.1), rgba(16,185,129,.06)); box-shadow: 0 14px 30px rgba(28,124,84,.12); }
.template-type-btn strong { display:block; color:#0f172a; font-size: 14px; }
.template-type-btn small { display:block; color:#64748b; margin-top:4px; line-height:1.4; }
.variables-card { margin-top: 18px; padding: 16px; border-radius: 18px; border: 1px solid #e2e8f0; background: #f8fafc; }
.email-variable-grid { display: grid; gap: 8px; max-height: 360px; overflow: auto; padding-right: 4px; }
.email-variable-chip { display: grid; grid-template-columns: 150px 1fr; gap: 8px; align-items: center; border: 1px solid #e5e7eb; background: #fff; border-radius: 12px; padding: 9px 10px; text-align:left; cursor:pointer; transition:.16s ease; }
.email-variable-chip:hover { border-color:#99f6e4; transform:translateY(-1px); }
.email-variable-chip code { color:#0f766e; font-weight:800; white-space:nowrap; }
.email-variable-chip span { color:#64748b; font-size: 12px; }
.template-status-badge { display:inline-flex; align-items:center; justify-content:center; padding: 8px 12px; border-radius: 999px; font-weight: 800; color:#475569; background:#f1f5f9; white-space:nowrap; }
.template-status-badge.custom { color:#0f766e; background:#dcfce7; }
.template-status-badge.dirty { color:#92400e; background:#fef3c7; }
.demo-editor-card { margin: 10px 0 18px; padding: 18px; border: 1px solid #d1fae5; background: linear-gradient(135deg,#ecfdf5,#ffffff); border-radius: 22px; display:grid; gap:14px; }
.demo-editor-card h3 { margin: 2px 0 4px; }
.starter-template-list { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:10px; }
.starter-card { text-align:left; border:1px solid #bbf7d0; background:#fff; border-radius:16px; padding:13px; cursor:pointer; transition:.16s ease; box-shadow:0 10px 25px rgba(15,23,42,.04); }
.starter-card:hover { transform:translateY(-2px); box-shadow:0 16px 34px rgba(15,23,42,.08); border-color:#1c7c54; }
.starter-card span { display:inline-flex; padding:4px 8px; border-radius:999px; background:#ecfdf5; color:#0f766e; font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.04em; }
.starter-card strong { display:block; margin-top:8px; color:#0f172a; }
.starter-card small { display:block; color:#64748b; margin-top:4px; line-height:1.35; }
.email-studio-form { gap: 14px; }
.editor-toolbar { display:flex; flex-wrap:wrap; gap:8px; padding: 10px; border:1px solid #e2e8f0; border-radius: 16px; background:#f8fafc; }
.editor-toolbar .btn { padding:9px 11px; font-size:12px; }
.email-editor-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px, 42%); gap:14px; align-items:stretch; }
.email-code-editor { display:flex; flex-direction:column; gap:8px; }
.walk-email-editor-panel textarea { min-height: 460px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; line-height:1.55; font-size:13px; }
.live-preview-panel { border:1px solid #e2e8f0; background:#f8fafc; border-radius:18px; overflow:hidden; display:flex; flex-direction:column; min-height:460px; }
.live-preview-head { display:flex; justify-content:space-between; gap:10px; align-items:center; padding:12px 14px; border-bottom:1px solid #e2e8f0; background:#fff; }
.live-preview-head span { font-weight:900; color:#0f172a; }
.live-preview-head small { color:#64748b; text-align:right; }
.live-preview-panel iframe { width:100%; flex:1; min-height:400px; border:0; background:#fff; }
.editor-help-box { padding: 12px 14px; border-radius: 14px; background:#ecfdf5; border:1px solid #bbf7d0; color:#14532d; font-size: 13px; }
.walk-email-actions { gap: 10px; flex-wrap: wrap; }
.test-email-card { margin-top: 22px; padding: 18px; border-radius: 20px; border:1px solid #e2e8f0; background: linear-gradient(135deg,#ffffff,#f8fafc); display:grid; gap: 14px; }
.test-email-row { display:flex; gap:10px; }
.test-email-row input { flex:1; }
.walk-email-preview-card { width: min(820px, calc(100vw - 28px)); max-height: 90vh; }
.walk-email-preview-card iframe { width:100%; min-height: 560px; border: 1px solid #e2e8f0; border-radius: 16px; background:#fff; }
.notice.success { color:#0f766e; background:#ecfdf5; border-color:#bbf7d0; }
.notice.error { color:#991b1b; background:#fef2f2; border-color:#fecaca; }
@media (max-width: 1120px) {
  .email-editor-grid { grid-template-columns: 1fr; }
  .live-preview-panel { min-height:360px; }
}
@media (max-width: 860px) {
  .walk-email-layout { grid-template-columns: 1fr; }
  .email-variable-chip { grid-template-columns: 1fr; }
  .test-email-row { flex-direction: column; }
  .walk-email-editor-panel textarea { min-height: 320px; }
  .starter-template-list { grid-template-columns: 1fr; }
  .email-studio-summary { grid-template-columns: 1fr; }
  .hero-actions { flex-wrap:wrap; }
}
