*{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0d1112;--card: #1d2324;--input-bg: #171b1c;--input-border: #343a3c;--accent: #fd4102;--text: #ffffff;--text-dim: #c9cdcd;--font: "Geist", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif}html,body{background:var(--bg);color:var(--text);font-family:var(--font);min-height:100%;max-width:100%;overflow-x:hidden}img,canvas,svg{max-width:100%}.layout{display:grid;grid-template-columns:minmax(320px,460px) minmax(360px,620px);grid-template-areas:"panel preview" "actions preview";align-content:start;column-gap:56px;row-gap:24px;justify-content:center;align-items:start;padding:48px clamp(20px,5vw,72px);max-width:1280px;margin:0 auto}.panel{grid-area:panel}.preview{grid-area:preview}.actions-area{grid-area:actions;display:flex;flex-direction:column;gap:12px}.panel{display:flex;flex-direction:column;gap:18px;padding-top:8px}.brand{display:flex;align-items:center;gap:14px;margin-bottom:26px}.brand-mark{width:56px;height:56px}.brand-word{font-weight:600;font-size:15px;line-height:1.14;letter-spacing:.02em}h1{font-size:26px;font-weight:600;letter-spacing:-.01em}.sub{color:var(--text-dim);font-size:16px;line-height:1.4;margin-top:-8px;max-width:36ch}.photo-row{display:flex;gap:10px;margin-top:8px}.photo-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;background:#272c2d;color:#b7bcbc;border:none;border-radius:12px;padding:20px 16px;font-family:var(--font);font-size:15px;cursor:pointer;transition:background .15s}.photo-btn:hover{background:#313738;color:#fff}.photo-btn.attention{position:relative;overflow:hidden;color:#fff;border:2px solid transparent;background:linear-gradient(#272c2d,#272c2d) padding-box,linear-gradient(110deg,#fd4102,#ffb38a,#fd4102,#ffb38a,#fd4102) border-box;background-size:100% 100%,300% 100%;animation:shine-border 2.6s linear infinite}.photo-btn.attention:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;transform:translate(-150%) skew(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);animation:shine-sweep 2.6s ease-in-out infinite;pointer-events:none}@keyframes shine-border{to{background-position:0 0,300% 0}}@keyframes shine-sweep{55%,to{transform:translate(150%) skew(-20deg)}}.photo-btn.has-photo{color:#fff;outline:1px solid var(--input-border)}#photoThumb{width:64px;height:64px;object-fit:cover;border-radius:12px;outline:1px solid var(--input-border);align-self:center}.zoom-field input[type=range]{accent-color:var(--accent);width:100%;padding:0;border:none;background:transparent}.field{display:flex;flex-direction:column;gap:8px}.field span{font-weight:600;font-size:17px}.field input{background:var(--input-bg);border:1px solid var(--input-border);border-radius:10px;color:var(--text);font-family:var(--font);font-size:17px;padding:14px 16px;outline:none;transition:border-color .15s}.field input:focus{border-color:#5a6163}.mode-field{border:none}.radio-row{display:flex;gap:10px}.radio{flex:1;cursor:pointer}.radio input{position:absolute;opacity:0;pointer-events:none}.radio span{display:flex;align-items:center;justify-content:center;padding:13px 16px;border-radius:10px;border:1px solid var(--input-border);background:var(--input-bg);color:var(--text-dim);font-size:15px;font-weight:500;transition:border-color .15s,color .15s,background .15s}.radio input:checked+span{background:transparent;border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);color:#fff}.actions{display:flex;gap:14px}.cta{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:#fff;border:none;border-radius:999px;padding:14px 24px;font-family:var(--font);font-size:15px;font-weight:600;white-space:nowrap;cursor:pointer;transition:background .15s,transform .1s}.cta:hover{background:#ff5a1f}.cta:active{transform:scale(.98)}.cta:disabled{opacity:.55;cursor:wait}.status{color:var(--text-dim);font-size:14px}.preview{position:sticky;top:48px}.preview-label{display:none;font-weight:600;font-size:15px;letter-spacing:.35em;margin-bottom:14px}.badge-card{position:relative;border-radius:18px;overflow:hidden;box-shadow:0 20px 60px #00000073}.preview-actions{display:flex;justify-content:flex-end;margin-top:12px}.shuffle-btn{display:flex;align-items:center;gap:7px;padding:9px 14px;border:1px solid rgba(255,255,255,.25);border-radius:999px;background:#0d1112b8;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font-family:var(--font);font-size:13px;font-weight:500;cursor:pointer;transition:border-color .15s,background .15s}.shuffle-btn:hover{border-color:var(--accent);background:#0d1112e0}.shuffle-btn:active svg{transform:rotate(180deg)}.shuffle-btn svg{transition:transform .3s}#previewCanvas{display:block;width:100%;height:auto;touch-action:pan-y}dialog{border:none;border-radius:18px;background:var(--card);color:var(--text);padding:20px;max-width:560px;width:calc(100vw - 40px)}dialog::backdrop{background:#000000b3}.cam-wrap{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4 / 3;background:#000}#camVideo{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.cam-frame{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;height:100%;aspect-ratio:3 / 4;border:2px dashed rgba(255,255,255,.55);border-radius:8px;pointer-events:none}.cam-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:16px}.cam-actions .photo-btn{flex:0 0 auto;padding:14px 22px}@media(max-width:860px){.layout{grid-template-columns:1fr;grid-template-areas:"panel" "preview" "actions";row-gap:32px}.preview{position:static}.preview-label{display:block}#webcamBtn{display:none}.radio{flex:0 0 auto}.radio span{padding:13px 26px}.actions .cta{flex:1}}