/* Minimal UI for the SMTP sender app (poster-ish cream/gold) */
:root{
  --navy:#0c2340;
  --gold:#E3C15C;
  --cream:#fff7e6;
  --paper:#E8D9B5;
  --ink:#1f1f1f;
  --muted:#3a3a3a;
  --stroke: rgba(0,0,0,0.12);
  --radius: 16px;
  --shadow: 0 18px 46px rgba(0,0,0,0.18);
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

*{box-sizing:border-box;}
body{
  margin:0;
  font-family: var(--sans);
  color: var(--ink);
  background:
    radial-gradient(1100px 520px at 20% -10%, rgba(227,193,92,0.35), transparent 55%),
    radial-gradient(900px 520px at 90% 10%, rgba(12,35,64,0.20), transparent 60%),
    linear-gradient(180deg, #fff3d8 0%, #f7ecd0 40%, #f2e2bb 100%);
}
a{ color: inherit; }
.wrap{ max-width: 1200px; margin: 0 auto; padding: 18px; }

.topbar{
  position: sticky; top:0; z-index:10;
  background: rgba(255,247,230,0.78);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--stroke);
}
.topbar-inner{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 12px 0; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ width:44px; height:44px; border-radius:12px; border:1px solid var(--stroke); background: rgba(255,255,255,0.6); padding:6px; }
.brand-title{ font-weight: 900; letter-spacing: .5px; }
.brand-sub{ font-size: 12px; color: rgba(0,0,0,0.65); }

.nav{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.chip{
  text-decoration:none;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,0.55);
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
}

.grid{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 16px;
  margin-top: 16px;
}
@media (max-width: 980px){ .grid{ grid-template-columns: 1fr; } }

.card{
  background: rgba(255,255,255,0.68);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.card-head{
  padding: 14px 16px;
  border-bottom: 1px solid var(--stroke);
  background: linear-gradient(135deg, rgba(12,35,64,0.10), rgba(227,193,92,0.18));
}
.h1{ margin:0; font-size: 18px; letter-spacing: .2px; }
.muted{ color: rgba(0,0,0,0.68); font-size: 13px; margin-top:6px; }

.section{ padding: 14px 16px; }

.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
label{ font-size: 12px; font-weight: 800; letter-spacing: .2px; color: rgba(0,0,0,0.70); }
input, textarea, select{
  width:100%;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 10px 12px;
  font-family: var(--sans);
  background: rgba(255,255,255,0.75);
}
textarea{ min-height: 120px; resize: vertical; }
.row2{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 620px){ .row2{ grid-template-columns: 1fr; } }

.btns{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 10px; }
.btn{
  border:1px solid var(--stroke);
  background: rgba(255,255,255,0.7);
  padding: 10px 12px;
  border-radius: 12px;
  cursor:pointer;
  font-weight: 900;
}
.btn-primary{
  border:0;
  background: linear-gradient(135deg, #E3C15C, #c5b783);
}
.btn-danger{
  background: rgba(180,40,40,0.08);
  border-color: rgba(180,40,40,0.25);
}
.small{ font-size: 12px; font-weight: 700; }
.code{
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.45;
}

.notice{
  border: 1px dashed rgba(12,35,64,0.25);
  background: rgba(12,35,64,0.06);
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13px;
  margin-top: 12px;
}
.ok{ border-color: rgba(0,120,60,0.25); background: rgba(0,120,60,0.06); }
.err{ border-color: rgba(160,20,20,0.25); background: rgba(160,20,20,0.06); }

.preview{
  width:100%;
  height: 560px;
  border: 1px solid var(--stroke);
  border-radius: 14px;
  background: #fff;
}
.hr{ border:0; border-top:1px solid var(--stroke); margin: 14px 0; }

.footer{
  padding: 12px 16px;
  border-top: 1px solid var(--stroke);
  font-size: 12px;
  color: rgba(0,0,0,0.65);
}


/* Preview iframe should fill card width; height is set dynamically in JS */
.preview{width:100%; border:1px solid rgba(0,0,0,0.12); border-radius:14px; background:#fff; min-height:420px;}


/* Prevent sideways scroll in preview area */
.preview-wrap{overflow-x:hidden;}


/* Email width control (email-safe) */
.cc-email-container{
  max-width:600px;
  margin:0 auto;
}

/* Layout: give the preview panel enough room */
.builder-grid{display:grid;grid-template-columns:1fr;gap:16px;}
@media (min-width: 980px){
  .builder-grid{grid-template-columns: 420px 1fr;}
}
.preview{width:100% !important; min-width: 320px;}
.preview-wrap{width:100%; overflow:hidden;}