:root{--bg: #0d0c0b;--panel: #141312;--card: #1b1a18;--card-hover: #232220;--border: #2b2926;--text: #f5f4f1;--muted: #9d9a92;--accent: #ffdf7d;--accent-ink: #0d0c0b;--accent-soft: rgba(255, 223, 125, .14);--radius: 14px;font-family:Inter,Helvetica Neue,Helvetica,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;background:var(--bg);color:var(--text)}.app{display:grid;grid-template-columns:minmax(380px,460px) 1fr;height:100vh}.panel{background:var(--panel);border-right:1px solid var(--border);padding:32px;overflow-y:auto}.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.01em;margin-bottom:4px}.logo-mark{display:block}.step-label{color:var(--muted);font-size:13px;margin-bottom:24px}h1{font-size:24px;margin:0 0 6px}.lead{color:var(--muted);margin:0 0 24px;line-height:1.5}.cards{display:flex;flex-direction:column;gap:12px}.card{text-align:left;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;color:var(--text);cursor:pointer;transition:background .15s,border-color .15s,transform .1s}.card:hover{background:var(--card-hover);border-color:var(--accent)}.card:active{transform:scale(.99)}.card.selected{border-color:var(--accent);background:var(--accent-soft)}.card-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}.card-title{font-size:17px;font-weight:600}.card-tagline{color:var(--muted);font-size:14px;margin-top:4px;line-height:1.4}.badge{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--accent-ink);background:var(--accent);border-radius:999px;padding:3px 9px;white-space:nowrap;font-weight:600}.back{background:none;border:none;color:var(--muted);cursor:pointer;padding:0;font-size:13px;margin-bottom:16px}.back:hover{color:var(--text)}.price{font-size:15px;font-weight:600;color:var(--accent);white-space:nowrap}.includes{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}.includes li{position:relative;padding-left:18px;color:var(--muted);font-size:13px;line-height:1.4}.includes li:before{content:"";position:absolute;left:2px;top:6px;width:6px;height:6px;border-radius:50%;background:var(--accent)}.extras{display:flex;flex-direction:column;gap:8px;margin-top:8px}.extra-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--card)}.extra-row.active{border-color:var(--accent);background:var(--accent-soft)}.extra-info{flex:1;min-width:0}.extra-name{font-size:14px;font-weight:500;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}.extra-price{color:var(--accent);font-size:13px;font-weight:500;white-space:nowrap}.extra-blurb{color:var(--muted);font-size:12px;margin-top:3px;line-height:1.35}.extra-control{flex-shrink:0}.toggle{width:30px;height:30px;border-radius:9px;border:1px solid var(--border);background:transparent;color:var(--text);cursor:pointer;font-size:16px;line-height:1}.toggle.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.stepper{display:flex;align-items:center;gap:8px}.stepper button{width:28px;height:28px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--text);cursor:pointer;font-size:15px;line-height:1}.stepper button:hover{border-color:var(--accent)}.stepper .qty{min-width:18px;text-align:center;font-size:14px}.quote{margin-top:22px;border-top:1px solid var(--border);padding-top:16px}.quote-line,.quote-sub{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--muted);padding:3px 0}.quote-line .l{color:var(--text)}.quote-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px;padding-top:12px;border-top:1px solid var(--border)}.quote-total .label{font-size:14px;font-weight:500}.quote-total .amount{font-size:22px;font-weight:700;color:var(--accent)}.quote-total .per{font-size:13px;color:var(--muted);font-weight:400}.cta{margin-top:16px;width:100%;padding:13px;border-radius:12px;border:none;background:var(--accent);color:var(--accent-ink);font-weight:600;font-size:15px;cursor:pointer}.cta:hover{filter:brightness(1.05)}.cta:disabled{opacity:.6;cursor:default}.form-error{color:#ff6b6b;font-size:13px;margin:0}.preview{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:40px}.preview-head{text-align:center}.preview-head .eyebrow{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.preview-head .caption{font-size:18px;font-weight:600;margin-top:4px}.frame{position:relative;background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden}.frame video{width:100%;height:100%;object-fit:cover;display:block}.frame-landscape{width:min(540px,70vw);aspect-ratio:16 / 9}.frame-reel{height:200px;aspect-ratio:9 / 16}.frame-square{height:165px;aspect-ratio:1 / 1}.frame-portrait{height:165px;aspect-ratio:4 / 5}.frame-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;color:var(--muted)}.frame-placeholder svg{opacity:.5}.frame-label{position:absolute;left:8px;bottom:8px;font-size:11px;color:var(--text);background:#00000073;padding:2px 7px;border-radius:6px}.reels-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.reel-more{height:200px;aspect-ratio:9 / 16;border:1px dashed var(--border);border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:14px}.badges{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.format-badge{font-size:12px;color:var(--muted);border:1px solid var(--border);border-radius:999px;padding:4px 12px}@media (max-width: 900px){.app{grid-template-columns:1fr;height:auto;min-height:100vh}.panel{border-right:none;border-bottom:1px solid var(--border)}.preview{padding:28px;min-height:70vh}.frame-landscape{width:min(540px,86vw)}}.form{display:flex;flex-direction:column;gap:14px;margin-top:8px}.form label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}.form .opt{font-size:11px;opacity:.7}.form-row.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form input,.form textarea{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:11px 12px;color:var(--text);font-size:14px;font-family:inherit;width:100%}.form input:focus,.form textarea:focus{outline:none;border-color:var(--accent)}.form textarea{resize:vertical}.form .check{flex-direction:row;align-items:flex-start;gap:10px;line-height:1.4}.form .check input{width:18px;height:18px;flex-shrink:0;accent-color:var(--accent);margin-top:1px}.form a{color:var(--accent);text-decoration:underline}.form-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:6px;padding-top:14px;border-top:1px solid var(--border)}.form-total .amount{font-size:20px;font-weight:700;color:var(--accent)}.link-btn{margin-top:16px;background:none;border:1px solid var(--border);color:var(--text);border-radius:10px;padding:9px 14px;cursor:pointer;font-size:14px}.link-btn:hover{border-color:var(--accent)}