:root {
  --royal-red: #8B0000;
  --deep-black: #0A0A0A;
  --classic-gold: #D4AF37;
  --dark-maroon: #5A0F0F;
  --soft-gold: #F1C40F;
  --warm-beige-gold: #E6C77A;
  --sky-teal-blue: #4FC3F7;
  --steel-blue: #2E86C1;
  --off-white: #F5F5F5;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: radial-gradient(circle at top left, #380000, #050505 50%, #000);
  color: var(--off-white);
}

.container {
  max-width: 1100px;
  margin: auto;
  padding: 30px 18px;
}

.header {
  display: flex;
  align-items: center;
  gap: 20px;
  border: 1px solid rgba(212,175,55,.35);
  padding: 18px;
  border-radius: 22px;
  background: rgba(0,0,0,.55);
  box-shadow: 0 10px 40px rgba(0,0,0,.4);
}

.header img {
  width: 95px;
  height: auto;
}

h1 {
  margin: 0;
  font-size: 34px;
  letter-spacing: 1px;
  color: var(--classic-gold);
}

.subtitle {
  margin-top: 6px;
  color: #ddd;
}

.panel {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.card {
  background: rgba(10,10,10,.82);
  border: 1px solid rgba(212,175,55,.35);
  border-radius: 22px;
  padding: 22px;
}

label {
  display: block;
  font-weight: 700;
  margin: 14px 0 8px;
  color: var(--warm-beige-gold);
}

input, textarea, select {
  width: 100%;
  border: 1px solid rgba(212,175,55,.35);
  background: #111;
  color: white;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 15px;
}

textarea { min-height: 130px; resize: vertical; }

button, .btn {
  display: inline-block;
  margin-top: 18px;
  border: none;
  background: linear-gradient(135deg, var(--classic-gold), var(--soft-gold));
  color: #111;
  padding: 13px 18px;
  border-radius: 14px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
}

button.secondary {
  background: linear-gradient(135deg, var(--royal-red), var(--dark-maroon));
  color: white;
}

.palette {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.swatch {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.15);
  background: #111;
}

.swatch div { height: 70px; }
.swatch span { display: block; padding: 10px; font-size: 13px; }

.preview {
  width: 100%;
  border-radius: 18px;
  border: 1px solid rgba(212,175,55,.35);
}

.notice {
  color: #ddd;
  font-size: 14px;
  line-height: 1.6;
}

@media (max-width: 850px) {
  .panel { grid-template-columns: 1fr; }
  h1 { font-size: 26px; }
}