:root{
  --blue:#2f57a1;
  --blue-dark:#1e3d78;
  --border:#2a4f9a;
  --line:#e6e8ef;
  --text:#0f172a;
  --muted:#64748b;
  --danger:#d11f1f;
  --green:#22c55e;
  --black:#111827;
}

*{ box-sizing:border-box; }
body{ margin:0; font-family: Arial, Helvetica, sans-serif; color:var(--text); background:#fff; }

.page{
  display:flex;
  gap:56px;
  padding:40px 44px;
  align-items:flex-start;
  max-width:1200px;
  margin:0 auto;
}

.panel-left{ width:520px; }
.field{ margin-bottom:22px; }

label{ display:block; font-size:20px; margin-bottom:10px; color:#0b1220; }

input, select{
  width:100%;
  height:56px;
  padding:14px 14px;
  font-size:20px;
  border:2px solid var(--border);
  border-radius:3px;
  outline:none;
  background:#fff;
}

.select-wrap, .date-wrap{ position:relative; }

.select-wrap select{
  appearance:none;
  padding-right:68px;
}

.select-wrap::after,
.date-wrap::after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:58px;
  height:100%;
  background:var(--blue);
  border-left:2px solid var(--blue-dark);
  border-radius:0 3px 3px 0;
  pointer-events:none;
}

.select-wrap::before{
  content:"";
  position:absolute;
  right:20px;
  top:50%;
  width:10px;
  height:10px;
  border-right:3px solid #fff;
  border-bottom:3px solid #fff;
  transform:translateY(-60%) rotate(45deg);
  pointer-events:none;
}

.date-wrap input{ padding-right:68px; }
.date-wrap::before{
  content:"";
  position:absolute;
  right:18px;
  top:50%;
  width:22px;
  height:20px;
  transform:translateY(-50%);
  border:2px solid #fff;
  border-radius:3px;
  pointer-events:none;
}
.date-wrap input::-webkit-calendar-picker-indicator{
  opacity:0;
  position:absolute;
  right:0;
  width:58px;
  height:56px;
  cursor:pointer;
}

.msg{ margin:6px 0 26px; color:var(--danger); font-size:20px; }

.actions{ display:flex; gap:18px; align-items:center; margin-top:10px; }

.btn{
  height:58px;
  padding:0 22px;
  font-size:20px;
  border-radius:10px;
  border:0;
  cursor:pointer;
}
.btn:disabled{ opacity:.55; cursor:not-allowed; }
.btn-dark{ background:var(--black); color:#fff; }
.btn-green{ background:var(--green); color:#fff; }

.panel-right{ flex:1; min-width:360px; max-width:560px; }
.preview-head{ text-align:center; font-size:20px; margin-bottom:14px; color:#0b1220; }
.preview-body{
  position:relative;
  height:520px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  overflow:hidden;
}
.preview-body iframe{ width:100%; height:100%; border:0; display:none; }
.preview-empty{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  font-size:16px;
}