*{box-sizing:border-box}
:root{--bg:#eef4fb;--card:#fff;--ink:#142036;--muted:#68758a;--line:#dce4ee;--brand:#2f36df;--brand2:#5b5cf0;--ok:#0a9a63;--soft:#f5f8fc;--warn:#9a6500}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{min-height:100vh;padding:26px}button,input{font:inherit}.app{max-width:1200px;margin:auto;background:var(--card);border-radius:28px;box-shadow:0 20px 55px rgba(30,50,90,.12);overflow:hidden}
.brand{display:flex;align-items:center;gap:22px;padding:30px 38px;border-bottom:1px solid var(--line)}.brand-logo{font-weight:900;font-size:30px;letter-spacing:-1px}.brand-logo b{color:var(--brand)}
.brand h1{margin:0 0 3px;font-size:26px}.brand p{margin:0;color:var(--muted)}.steps{display:flex;align-items:center;padding:25px 40px;gap:14px}
.step{display:flex;align-items:center;gap:10px;color:#9aa6b6;font-weight:750;white-space:nowrap}.step span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#edf1f6;color:#8f9bad}
.step.active{color:var(--brand)}.step.active span{background:var(--brand);color:white}.step.done{color:var(--ok)}.step.done span{background:var(--ok);color:white}
.line{height:3px;flex:1;background:#e1e7ef;border-radius:4px}.screen{padding:26px 40px 46px}.hidden{display:none!important}.intro-card{max-width:840px;margin:20px auto 10px;padding:28px}
.camera{font-size:50px}.intro-card h2{font-size:32px;margin:10px 0}.intro-card p{font-size:18px;color:var(--muted);line-height:1.55}
.actions,.done-actions,.edit-actions,.control-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}.btn{border:0;border-radius:15px;padding:15px 20px;cursor:pointer;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand2));color:white}.btn.secondary{background:#eef2f7;color:var(--ink)}.btn.small{padding:12px 14px}
.tips{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0}.tips span{background:#eefaf5;color:#087f54;border-radius:999px;padding:8px 12px;font-weight:700}
.privacy,.quality-note,.integration-note{padding:15px 17px;border-radius:14px;background:#f1f7ff;border:1px solid #cfe1f7;color:#36516d;line-height:1.45}
.editor-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(320px,.7fr);gap:34px;align-items:start}.stage-wrap{min-width:0}
.stage{position:relative;aspect-ratio:1/1;max-width:680px;margin:auto;background:#111;border-radius:24px;overflow:hidden;touch-action:none;user-select:none}
#editorCanvas{width:100%;height:100%;display:block;background:#111}.guide{position:absolute;inset:0;pointer-events:none}
.head-guide{position:absolute;left:31%;top:12%;width:38%;height:52%;border:3px dashed rgba(255,255,255,.82);border-radius:50%}
.shoulder-guide{position:absolute;left:18%;top:54%;width:64%;height:30%;border:3px dashed rgba(255,255,255,.65);border-top-left-radius:50% 80%;border-top-right-radius:50% 80%;border-bottom:0}
.top-safe{position:absolute;left:0;right:0;top:7%;height:1px;background:rgba(255,255,255,.35)}
.hint{text-align:center;color:var(--muted);margin:12px auto 0;max-width:650px;line-height:1.45}.controls{padding:8px 0}.controls h2{font-size:30px;margin:0 0 24px}
.control-block{background:var(--soft);border:1px solid var(--line);border-radius:18px;padding:18px}.control-title{font-weight:800;margin-bottom:14px}.zoom-row{display:flex;align-items:center;gap:12px}
.zoom-row input{flex:1}.icon-btn{width:44px;height:44px;border-radius:12px;border:0;background:white;box-shadow:0 2px 10px rgba(0,0,0,.08);font-size:25px;cursor:pointer}
.quality-note{margin-top:18px;background:#fff8e8;border-color:#f0dfa7;color:#6e5510}.done-card{max-width:760px;margin:10px auto;text-align:center}.ok{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:auto;background:var(--ok);color:#fff;font-size:35px}
.done-card h2{font-size:34px;margin:16px 0 5px}.done-card>p{color:var(--muted)}.result-wrap{width:min(420px,90vw);aspect-ratio:1;margin:26px auto 18px;border-radius:24px;overflow:hidden;background:#111;box-shadow:0 12px 30px rgba(20,35,60,.18)}
.result-wrap img{width:100%;height:100%;object-fit:cover;display:block}.result-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}
.result-meta div{background:var(--soft);border:1px solid var(--line);padding:14px;border-radius:14px}.result-meta span{display:block;color:var(--muted);font-size:13px}.result-meta strong{display:block;margin-top:4px}
.weight-state{font-weight:800;margin:10px 0}.weight-state.ok{color:var(--ok)}.weight-state.warn{color:var(--warn)}.done-actions{justify-content:center}.integration-note{margin-top:22px;text-align:left}
footer{text-align:center;padding:20px;border-top:1px solid var(--line);color:#7c8899;font-size:14px}
@media(max-width:850px){body{padding:0}.app{border-radius:0;min-height:100vh}.brand{padding:20px}.brand-logo{font-size:25px}.brand h1{font-size:21px}.steps{padding:18px 20px}.step{font-size:13px}.step span{width:28px;height:28px}.screen{padding:18px 16px 32px}.editor-layout{grid-template-columns:1fr;gap:24px}.controls{padding:0 4px}.controls h2{font-size:25px}.result-meta{grid-template-columns:1fr}.actions .btn,.edit-actions .btn,.done-actions .btn{width:100%}.head-guide{left:30%;width:40%;top:10%;height:54%}.shoulder-guide{left:15%;width:70%}}