:root{--navy:#041b36;--blue:#062a4b;--green:#16834f;--gold:#f6d629;--white:#fff}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;color:#fff;font-family:Montserrat,Arial,sans-serif;background:linear-gradient(180deg,rgba(3,18,37,.68),rgba(2,22,43,.94)),url("../assets/hero-background.png") center/cover fixed}
.generator-shell{width:min(1180px,100%);margin:auto;padding:28px 20px 36px}
.generator-head{display:flex;gap:16px;align-items:flex-start;margin-bottom:18px}
.generator-head>a{display:grid;place-items:center;width:42px;height:42px;border:1px solid #ffffff44;border-radius:50%;color:#fff;text-decoration:none;font-size:34px}
.generator-head span,.preview-label span{color:var(--gold);font-size:11px;font-weight:900;letter-spacing:.18em}
.generator-head h1{margin:3px 0 5px;font-size:clamp(28px,5vw,44px)}
.generator-head p{margin:0;color:#c9d5df;font-size:13px}
.selection-help{margin:0 0 22px;padding:13px 16px;border:1px solid #ffffff24;border-radius:14px;background:#ffffff0c;color:#d8e2ea;font-size:12px;line-height:1.45}
.selection-help b{color:var(--gold)}
.generator-grid{display:grid;grid-template-columns:minmax(320px,1fr) minmax(320px,470px);grid-template-areas:"choices preview" "downloads preview";gap:18px 30px;align-items:start}
.choices{grid-area:choices;display:grid;gap:17px}
fieldset{margin:0;padding:17px;border:1px solid #ffffff24;border-radius:16px;background:#071d34d9}
legend{padding:0 8px;font-weight:900;font-size:16px}
.option-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:275px;overflow:auto;padding:2px}
.candidate-option{cursor:pointer}
.candidate-option input{position:absolute;opacity:0}
.candidate-option span{display:flex;min-height:62px;flex-direction:column;justify-content:center;padding:10px 13px;border:1px solid #ffffff22;border-radius:11px;background:#ffffff08;transition:.15s}
.candidate-option b{font-size:12px}
.candidate-option small{margin-top:3px;color:#9fb2c2;font-size:10px}
.candidate-option input:checked+span{border-color:#62d47d;background:#16834f33;box-shadow:inset 0 0 0 1px #62d47d}
.preview-area{grid-area:preview;position:sticky;top:15px;align-self:start}
.preview-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.preview-label small{color:#9fb2c2}
.canvas-frame{position:relative;overflow:hidden;border:1px solid #ffffff35;border-radius:16px;background:#06182b;box-shadow:0 20px 55px #0007}
.canvas-frame canvas{display:block;width:100%;height:auto}
.canvas-frame #colinha-mobile{display:none;width:100%;height:auto}
.canvas-frame #loading{position:absolute;inset:0;display:grid;place-items:center;background:#06182bee;font-size:13px;font-weight:800}
.download-panel{grid-area:downloads}
.download-actions{display:grid;gap:9px}
.download-actions button{min-height:52px;border:0;border-radius:12px;color:#fff;background:var(--green);font:800 13px Montserrat;cursor:pointer}
.download-actions .secondary{border:1px solid #ffffff35;background:#ffffff0b}
.download-status{min-height:18px;margin:8px 0 0;text-align:center;color:#91e5a7;font-size:11px}
footer{display:flex;justify-content:space-between;gap:15px;margin-top:30px;padding-top:20px;border-top:1px solid #ffffff1f;color:#9fb2c2;font-size:10px}
footer a{color:#fff}
@media(max-width:800px){
  .generator-shell{padding:18px 13px 30px}
  .generator-grid{grid-template-columns:1fr;grid-template-areas:"choices" "preview" "downloads";gap:22px}
  .preview-area{position:static}
  .option-list{grid-template-columns:1fr 1fr;max-height:320px;-webkit-overflow-scrolling:touch}
  .selection-help{margin-bottom:18px}
  .canvas-frame canvas{display:none}
  .canvas-frame #colinha-mobile{display:block}
}
@media(max-width:390px){
  .option-list{grid-template-columns:1fr}
  .generator-head h1{font-size:27px}
}