html,body{margin:0;padding:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:#0c0e13;color:#e9eef5}
.container{max-width:900px;margin:0 auto;padding:24px}.header{text-align:center;margin-bottom:24px}
h1{font-size:1.6rem;margin-bottom:.3em}p{margin-top:0;color:#b0b8c4}.card{border:1px solid #2b3144;border-radius:14px;background:#151821;padding:16px;margin-bottom:16px}
.step{margin:0 0 12px;font-size:1.1rem}.hidden{display:none!important}.orient-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.orient-card{border:1px solid #2b3144;border-radius:12px;padding:12px;background:#1b1f2c;display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer}
.orient-card:hover{border-color:#5ad1ff}.orient-card input{display:none}.orient-card .orient-visual{width:100%;height:90px;border-radius:8px;background:#0f1118;position:relative}
.orient-card .orient-visual.landscape::after{content:"";position:absolute;inset:18px 8px;border:2px dashed #445;border-radius:6px}
.orient-card .orient-visual.portrait::after{content:"";position:absolute;inset:8px 18px;border:2px dashed #445;border-radius:6px}
.orient-card input:checked+.orient-visual,.orient-card input:checked~.orient-visual{outline:3px solid #36d17c}.orient-label{font-weight:600}
.upload-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px dashed #2b3144;border-radius:12px;padding:40px 20px;background:#1b1f2c;color:#a9b3c1;text-align:center}
.upload-drop:hover{border-color:#36d17c;color:#fff;background:#1a1d29}.upload-icon{font-size:2rem;margin-bottom:8px}.upload-title{font-weight:600;margin-bottom:4px}
#fileInput{display:none}.stage{display:flex;justify-content:center;align-items:center;background:#0f1118;border:1px solid #2b3144;border-radius:12px;overflow:hidden;max-height:65vh;position:relative}
.stage img{max-width:100%;display:block}.toolbar{display:flex;justify-content:center;gap:10px;margin:10px 0;flex-wrap:wrap}
.toolbar button{background:#1c2030;border:1px solid #2b3144;color:#e9eef5;border-radius:8px;padding:8px 10px;cursor:pointer}.toolbar button:hover{background:#2b3144}
.btn-primary{background:linear-gradient(90deg,#36d17c,#2ac06f);color:#081a10;font-weight:600;border:none;border-radius:12px;cursor:pointer;transition:opacity .2s}
.btn-primary:hover{opacity:.9}.btn-xl{font-size:1.2rem;padding:14px 24px;width:100%;max-width:540px}
.primary-row{display:flex;justify-content:center;align-items:center;gap:12px;position:sticky;bottom:0;padding:14px 0 10px;background:linear-gradient(to top,rgba(12,14,19,.98),rgba(12,14,19,0));z-index:50}
.form-grid{display:grid;grid-template-columns:1fr;gap:14px 16px}.form-grid label{display:flex;flex-direction:column;gap:6px;font-weight:500}
.form-grid input,.form-grid select{background:#1c2030;border:1px solid #2b3144;border-radius:10px;padding:10px 12px;color:#e9eef5;font-size:1rem}
.checkbox.consent{grid-column:1/-1;display:flex;align-items:flex-start;gap:10px;line-height:1.35;margin-top:6px}.checkbox.consent input{margin-top:4px;transform:scale(1.2)}
.preview .export-preview img{max-width:100%;height:auto;border:1px solid #2b3144;border-radius:8px;background:#fff}.footer{text-align:center;color:#7a8391;font-size:.9rem;margin-top:24px;padding-bottom:40px}
@media (max-width:640px){.orient-grid{grid-template-columns:1fr}}
.orient-grid{display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:16px}
.orient-card{cursor:pointer;position:relative;border:1px solid #2b3144;border-radius:14px;padding:16px;background:#141827;transition:transform .06s ease, box-shadow .12s ease}
.orient-card:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.25)}
.orient-card input:checked + .frame,
.orient-card:has(input:checked){outline:2px solid #39d487; outline-offset:2px}

.frame{position:relative;border-radius:10px;background:#0d1320;height:170px;display:grid;place-items:center;overflow:hidden}
.frame-landscape{aspect-ratio:120/54;width:100%}
.frame-portrait{aspect-ratio:54/120;width:70%}
.bleed,.safe{position:absolute;border-radius:8px}
.bleed{inset:10%;border:2px dashed rgba(255,180,120,.35)}
.safe{inset:16%;border:2px solid rgba(120,220,255,.35)}
.tag{position:absolute;bottom:8px;left:12px;background:#1f2937;color:#e9eef5;padding:4px 8px;border-radius:999px;font-size:.9rem;border:1px solid #2b3144}
@media (max-width:680px){ .orient-grid{grid-template-columns:1fr} .frame{height:140px} }