:root { font-family: Arial, sans-serif; color: #2d1a1c; background: #fff7ef; }
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 940px; margin: auto; padding: 24px; }
header { text-align: center; background: linear-gradient(135deg, #8f1424, #d6323f); color: white; border-radius: 24px; padding: 28px; box-shadow: 0 12px 35px #76202b33; }
header span { font-weight: 900; letter-spacing: .18em; color: #ffe39c; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); margin: .25em 0; }
.warning { padding: 14px 16px; border: 2px solid #d28a16; background: #fff1c9; border-radius: 12px; line-height: 1.4; }
.modes, .text-modes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.text-modes { grid-template-columns: repeat(3, 1fr); }
.modes label, .text-modes label { border: 2px solid #e2c8b8; border-radius: 15px; padding: 16px; background: #fff; cursor: pointer; }
.modes label:has(input:checked), .text-modes label:has(input:checked) { border-color: #bb2033; background: #fff0e6; box-shadow: 0 0 0 2px #bb20331c; }
.modes b, .modes small, .text-modes b, .text-modes small { display: block; }
.modes input, .text-modes input { accent-color: #bb2033; }
form > label, fieldset { display: block; margin: 22px 0; font-weight: bold; border: 0; padding: 0; }
legend { margin-bottom: 10px; font-weight: bold; }
input[type=text], input[name=theme], textarea, input[type=file] { display: block; width: 100%; margin-top: 8px; padding: 14px; border: 1px solid #c9aaa3; border-radius: 10px; background: white; font: inherit; }
textarea { min-height: 130px; resize: vertical; }
button, .button { display: block; width: 100%; border: 0; border-radius: 12px; background: #b51f32; color: white; text-align: center; padding: 16px; font-weight: bold; font-size: 1.05rem; text-decoration: none; cursor: pointer; }
#result { text-align: center; margin-top: 28px; padding: 20px; background: white; border-radius: 18px; }
#preview { max-width: 100%; border-radius: 10px; margin: 15px 0; }
.review { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.review .approve { background: #287444; }
.review .retry { background: #9d3040; }
.loader { width: 42px; height: 42px; margin: 18px auto; border: 5px solid #efd9d1; border-top-color: #b51f32; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
[hidden] { display: none !important; }
@media (max-width: 700px) { .modes, .text-modes, .review { grid-template-columns: 1fr; } }