:root{
  --phoenix:#ED3902; --pumpkin:#F8730E; --saffron:#FCBD15;
  --cream:#FBF3E6; --ink:#201C19; --bg:#efe4d3; --line:#e7dcc9;
  --muted:#8a755c; --ok:#1f7a35; --warn:#b25e00;
  --shadow:0 24px 60px rgba(70,30,8,.16);
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{
  font-family:'Catamaran',Helvetica,Arial,sans-serif; color:var(--ink);
  background:var(--bg); font-size:17px; line-height:1.45; -webkit-font-smoothing:antialiased;
}

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:20px;
  padding:0 26px; height:72px; background:var(--ink); color:var(--cream);
  box-shadow:0 2px 24px rgba(0,0,0,.22);
}
.brand{font-family:'Anton',Impact,sans-serif; font-size:23px; letter-spacing:1px; text-transform:uppercase; display:flex; align-items:center; gap:11px; white-space:nowrap;}
.dot{width:13px;height:13px;border-radius:50%;background:var(--phoenix);box-shadow:0 0 0 4px rgba(237,57,2,.25);}
.picker{display:flex; align-items:center; gap:12px; margin-left:8px;}
.picker label{margin:0; font-family:'Anton',sans-serif; text-transform:uppercase; font-size:12px; letter-spacing:1.5px; color:#a8977f;}
.picker select{
  appearance:none; -webkit-appearance:none; width:auto; min-width:250px; margin:0;
  padding:11px 42px 11px 18px; font-family:'Catamaran',sans-serif; font-size:16px; font-weight:800;
  background:#2c2723; color:var(--cream); border:1.5px solid #463d36; border-radius:40px; cursor:pointer;
}
.actions{display:flex; gap:12px; flex-wrap:wrap; margin-left:auto;}
.btn{font-family:'Anton',Impact,sans-serif; text-transform:uppercase; letter-spacing:.6px; font-size:15px; padding:13px 24px; border-radius:40px; border:0; cursor:pointer; transition:transform .12s, box-shadow .12s, opacity .12s;}
.btn.primary{background:var(--phoenix); color:#fff; box-shadow:0 6px 0 rgba(0,0,0,.28);}
.btn.primary:hover{transform:translateY(-2px); box-shadow:0 8px 0 rgba(0,0,0,.28);}
.btn.ghost{background:transparent; color:var(--cream); border:1.5px solid #574d45;}
.btn.ghost:hover{border-color:var(--cream);}

/* ---------- layout ---------- */
.layout{display:grid; grid-template-columns:minmax(420px,0.92fr) minmax(460px,1.08fr); height:calc(100vh - 72px);}
.form{overflow-y:auto; padding:30px 34px 90px;}
.lead{
  background:linear-gradient(180deg,#fff6e9,#fff1de); border:1px solid #f0dcc0; border-left:5px solid var(--pumpkin);
  padding:16px 18px; border-radius:14px; font-size:15.5px; color:#5a4632; box-shadow:0 6px 18px rgba(70,30,8,.06);
}

/* sections as crisp cards */
fieldset{
  border:1px solid var(--line); border-radius:18px; margin:22px 0; padding:22px 24px 26px;
  background:#fffdf8; box-shadow:0 10px 30px rgba(70,30,8,.05);
}
legend{
  font-family:'Anton',Impact,sans-serif; font-size:18px; text-transform:uppercase; letter-spacing:.6px;
  padding:4px 14px; color:#fff; background:var(--ink); border-radius:30px; margin-left:4px;
}
legend .inline{font-family:'Catamaran',sans-serif; font-size:13px; text-transform:none; letter-spacing:0; font-weight:700; margin-left:10px; color:var(--cream);}
legend .inline input{accent-color:var(--saffron);}

label{display:block; margin:18px 0 0; font-weight:800; font-size:13px; letter-spacing:.4px; text-transform:uppercase; color:var(--muted);}
label.inline{display:inline-flex; align-items:center; gap:7px; text-transform:none; color:var(--cream);}
input[type=text], textarea, select{
  display:block; width:100%; margin-top:8px; padding:14px 16px;
  font-family:'Catamaran',sans-serif; font-size:17.5px; font-weight:600;
  border:1.5px solid var(--line); border-radius:12px; background:#fff; color:var(--ink);
  transition:border-color .15s, box-shadow .15s;
}
input:hover, textarea:hover, select:hover{border-color:#d8c6a9;}
input:focus, textarea:focus, select:focus{outline:0; border-color:var(--pumpkin); box-shadow:0 0 0 4px rgba(248,115,14,.16);}
textarea{resize:vertical; line-height:1.4;}
.row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.count{float:right; font-weight:800; font-size:12px; letter-spacing:.5px; color:#b6a589; text-transform:none;}
.count.over{color:var(--phoenix);}
.fav-card{border:1px dashed #d8c6a9; border-radius:14px; padding:12px 16px 16px; margin-top:14px; background:#fffaf1;}
.fav-card h4{margin:2px 0 0; font-family:'Anton',sans-serif; font-size:15px; letter-spacing:.5px; text-transform:uppercase; color:var(--pumpkin);}
.warn-inline{margin:14px 0 0; font-size:13.5px; color:var(--warn); font-weight:700; text-transform:none; letter-spacing:0;}

/* ---------- preview ---------- */
.preview{display:flex; flex-direction:column; background:radial-gradient(120% 80% at 50% 0%, #f6ecdb 0%, #e7d8c2 100%); border-left:1px solid #ddcdb4;}
.preview-bar{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 22px; background:rgba(255,255,255,.72); border-bottom:1px solid #e2d2b9;}
.seg{display:inline-flex; background:#fff; border:1.5px solid var(--line); border-radius:30px; padding:3px; gap:2px;}
.seg-btn{border:0; background:transparent; padding:8px 20px; font-family:'Anton',sans-serif; text-transform:uppercase; font-size:13px; letter-spacing:.5px; color:#8a755c; border-radius:24px; cursor:pointer; transition:.15s;}
.seg-btn.active{background:var(--ink); color:#fff;}
.warnings{font-size:13px; font-weight:800; color:var(--warn); text-align:right; max-width:55%; letter-spacing:.2px;}
.warnings:empty::before{content:"✓ Looks good"; color:var(--ok);}
.stage{flex:1; overflow:auto; display:flex; justify-content:center; align-items:flex-start; padding:30px 18px 60px;}
#preview{
  width:600px; max-width:100%; height:100%; min-height:1500px; border:0; background:#fff;
  box-shadow:var(--shadow); border-radius:14px; transition:width .3s ease;
}
.stage.phone{padding-top:34px;}
.stage.phone #preview{width:380px; min-height:1500px; border-radius:34px; border:10px solid #1a1714; box-shadow:0 30px 70px rgba(0,0,0,.32);}

/* ---------- copy toast ---------- */
.copytoast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(44px);
  background:var(--ink); color:#fff; padding:15px 28px; border-radius:40px;
  font-family:'Anton',sans-serif; text-transform:uppercase; letter-spacing:.6px; font-size:15px;
  opacity:0; transition:.28s cubic-bezier(.16,1,.3,1); pointer-events:none; z-index:60; box-shadow:0 14px 40px rgba(0,0,0,.35);
}
.copytoast.show{opacity:1; transform:translateX(-50%) translateY(0);}

@media (max-width:980px){
  .layout{grid-template-columns:1fr; height:auto;}
  .topbar{flex-wrap:wrap; height:auto; padding:12px 18px; gap:12px;}
  .actions{margin-left:0;}
  .preview{height:84vh; position:sticky; top:0;}
}