*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:#f6f8fb;color:#111827;font-family:Inter,Arial,Helvetica,sans-serif}.editor-form{min-height:100vh}.topbar{height:72px;background:#fff;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 18px;position:sticky;top:0;z-index:10;box-shadow:0 8px 28px rgba(15,23,42,.06)}.brand{display:flex;align-items:center;gap:10px;white-space:nowrap}.brand .logo{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:12px;background:#eef2ff;color:#2563eb;font-weight:900}.toolbar{display:flex;align-items:center;gap:8px;overflow:auto;padding:4px}.tool{border:0;background:transparent;color:#5b6675;border-radius:999px;padding:12px 15px;font-size:15px;font-weight:800;cursor:pointer;white-space:nowrap}.tool span{opacity:.75;margin-right:5px}.tool.active,.tool:hover{background:#edf1f5;color:#334155}.top-actions{display:flex;align-items:center;gap:10px}.ghost{border:1px solid #dbe2ea;background:#fff;color:#475569;text-decoration:none;border-radius:999px;padding:11px 14px;font-weight:800;white-space:nowrap}.download-btn{border:0;background:#0b6ff3;color:white;border-radius:999px;padding:13px 20px;font-size:15px;font-weight:900;cursor:pointer;box-shadow:0 8px 24px rgba(11,111,243,.25)}.download-btn:hover{background:#095fd0}.api-note{max-width:1180px;margin:14px auto 0;background:#fff7ed;color:#9a3412;border:1px solid #fed7aa;border-radius:14px;padding:12px 16px;line-height:1.45}.editor-shell{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;padding:16px}.stage-area{display:grid;gap:14px;align-content:start;min-height:calc(100vh - 104px)}.stage-card{min-height:620px;background:linear-gradient(180deg,#ffffff 0,#f8fafc 100%);border:1px solid #e8edf3;border-radius:28px;display:flex;align-items:center;justify-content:center;position:relative;box-shadow:0 24px 70px rgba(15,23,42,.07);padding:56px 28px 46px}.size-badge{position:absolute;left:24px;top:20px;background:#ecfeff;color:#0369a1;border:1px solid #bae6fd;border-radius:999px;padding:8px 13px;font-weight:900;font-size:13px}.review-canvas{--bg:#fff;--ratio:35/45;position:relative;width:min(330px,78vw);aspect-ratio:var(--ratio);border-radius:24px;overflow:hidden;border:1px solid #d7dee9;background:var(--bg);box-shadow:0 28px 60px rgba(15,23,42,.14);display:grid;place-items:center}.review-canvas .checker{position:absolute;inset:0;background-color:var(--bg);background-image:linear-gradient(45deg,rgba(148,163,184,.18) 25%,transparent 25%),linear-gradient(-45deg,rgba(148,163,184,.18) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(148,163,184,.18) 75%),linear-gradient(-45deg,transparent 75%,rgba(148,163,184,.18) 75%);background-size:26px 26px;background-position:0 0,0 13px,13px -13px,-13px 0;opacity:.38}.photo-frame{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.photo-frame img{position:absolute;left:50%;top:50%;max-width:none;width:var(--zoom,112%);height:auto;transform:translate(calc(-50% + var(--x,0px)),calc(-50% + var(--y,-8px)));object-fit:contain;display:block}.photo-frame img.result-mode{width:100%;height:100%;object-fit:cover;transform:none;left:0;top:0}.placeholder{position:relative;z-index:1;color:#64748b;text-align:center;padding:24px;display:grid;gap:8px;line-height:1.45}.placeholder b{font-size:22px;color:#334155}.stage-message{position:absolute;left:50%;bottom:15px;transform:translateX(-50%);background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border:1px solid #e5e7eb;border-radius:999px;padding:9px 14px;color:#475569;font-weight:800;font-size:13px;text-align:center;min-width:min(620px,88%)}.bottom-strip{display:flex;align-items:center;justify-content:center;gap:10px}.add-tile,.thumb-tile{width:58px;height:58px;border-radius:18px;border:1px solid #e2e8f0;background:#fff;display:grid;place-items:center;box-shadow:0 10px 24px rgba(15,23,42,.08);overflow:hidden}.add-tile{font-size:32px;color:#475569;cursor:pointer}.add-tile input{display:none}.thumb-tile{position:relative}.thumb-tile.active{outline:3px solid #0b6ff3}.thumb-tile img{width:100%;height:100%;object-fit:cover}.thumb-tile span{font-size:10px;color:#64748b;text-align:center;padding:4px}.review-btn{border:0;background:#111827;color:#fff;border-radius:999px;padding:15px 18px;font-weight:900;cursor:pointer}.review-btn:hover{background:#000}.review-btn.loading{opacity:.65;pointer-events:none}.side-panel{background:#fff;border:1px solid #e8edf3;border-radius:28px;box-shadow:0 24px 70px rgba(15,23,42,.08);padding:18px;align-self:start;position:sticky;top:88px;max-height:calc(100vh - 104px);overflow:auto}.panel-content{display:none}.panel-content.active{display:grid;gap:16px}.panel-content h2{font-size:20px;margin:0}.muted{margin:0;color:#64748b;line-height:1.45}.tabs{display:flex;gap:8px;background:#f1f5f9;border-radius:999px;padding:6px;align-self:start}.pill{border:0;background:transparent;color:#64748b;border-radius:999px;padding:9px 15px;font-weight:900;cursor:pointer}.pill.active{background:#fff;color:#334155;box-shadow:0 4px 14px rgba(15,23,42,.07)}.field{display:grid;gap:8px;font-weight:800}.field span{color:#334155}.field input,.field select{width:100%;border:1px solid #d6dee8;border-radius:14px;padding:12px 13px;background:#fff;font-size:15px}.grid{display:grid;gap:12px}.grid.two{grid-template-columns:1fr 1fr}.switch{display:flex;gap:10px;align-items:center;background:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;padding:12px;font-weight:800;color:#334155}.switch input{width:18px;height:18px}.chips{display:grid;gap:9px}.big-chips{grid-template-columns:1fr 1fr}.chip{border:1px solid #d6dee8;background:#fff;color:#334155;border-radius:16px;padding:10px 11px;font-weight:900;cursor:pointer;text-align:left;display:flex;align-items:center;gap:8px}.chip i{display:inline-block;width:20px;height:20px;border-radius:7px;border:1px solid #cbd5e1}.chip.active,.chip:hover{border-color:#0b6ff3;color:#0b6ff3;background:#f0f7ff}.color-read{font-size:14px;color:#64748b}.controls{display:grid;gap:13px}.controls label{display:grid;grid-template-columns:1fr 42px;gap:8px;align-items:center;font-weight:850;color:#334155}.controls input[type=range]{grid-column:1/3;width:100%;accent-color:#0b6ff3}.val{text-align:right;color:#0b6ff3}.side-footer{display:grid;gap:10px;margin-top:18px}.full{width:100%;justify-content:center;text-align:center}.card{background:#fff;border:1px solid #e5e7eb;border-radius:20px;padding:24px;box-shadow:0 18px 45px rgba(15,23,42,.08)}.page{max-width:900px;margin:0 auto;padding:28px 16px}.result-page{max-width:760px}.result-card{text-align:center}.result-card h1{margin:0 0 12px}.preview-wrap{margin:16px auto;background:var(--bg,#fff);display:inline-flex;align-items:center;justify-content:center;padding:12px;border:1px solid #e5e7eb;border-radius:12px;max-width:100%}.preview-wrap img{display:block;max-width:100%;max-height:70vh;height:auto}.meta{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:12px 0 18px}.meta span{background:#f1f5f9;color:#334155;border-radius:999px;padding:8px 10px;font-weight:800}.actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.primary{border:0;background:#048b18;color:#fff;border-radius:14px;padding:15px 18px;font-size:18px;font-weight:900;cursor:pointer;text-align:center;text-decoration:none;display:inline-block}.secondary{border:1px solid #cbd5e1;background:#fff;color:#0f172a;border-radius:14px;padding:15px 18px;font-size:18px;font-weight:900;cursor:pointer;text-align:center;text-decoration:none;display:inline-block}.linkbtn{min-width:190px}.alert{border-radius:14px;padding:14px;margin:12px 0;line-height:1.45}.warn{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412}.error{background:#fef2f2;border:1px solid #fecaca;color:#991b1b}code{background:#f1f5f9;padding:2px 5px;border-radius:5px}@media(max-width:940px){.editor-shell{grid-template-columns:1fr}.side-panel{position:static;max-height:none;order:-1}.stage-card{min-height:520px}.topbar{height:auto;flex-wrap:wrap}.toolbar{order:3;width:100%;justify-content:flex-start}.brand strong{font-size:14px}}@media(max-width:620px){.top-actions .ghost{display:none}.download-btn{padding:11px 14px}.editor-shell{padding:10px}.stage-card{padding:45px 12px 54px;border-radius:20px;min-height:470px}.review-canvas{width:min(300px,86vw)}.side-panel{border-radius:20px}.big-chips{grid-template-columns:1fr}.grid.two{grid-template-columns:1fr}.stage-message{border-radius:14px}.tool{padding:10px 12px}}