:root{--bg:#0f1419;--panel:#1a2129;--panel-2:#232c36;--border:#2f3a45;--text:#e6edf3;--muted:#8b98a5;--accent:#3b82f6;--accent-hover:#2f6fd6;--danger:#ef4444;--ok:#22c55e;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0}.app{max-width:1100px;margin:0 auto;padding:24px 20px 60px}.app h1{margin:0 0 4px;font-size:22px}.app .sub{color:var(--muted);margin:0 0 24px;font-size:14px}.layout{grid-template-columns:1fr 320px;align-items:start;gap:20px;display:grid}@media (width<=860px){.layout{grid-template-columns:1fr}}.stage{background:var(--panel);border:1px solid var(--border);border-radius:12px;overflow:hidden}.transform-area{touch-action:none;background:#0b0e12;width:100%;height:480px;position:relative;overflow:hidden}.frame-bg{z-index:0;position:absolute}.frame-mask{z-index:2;pointer-events:none;border:1.5px solid #ffffffe6;position:absolute;box-shadow:0 0 0 9999px #0000008c}.face-guide{z-index:4;pointer-events:none;position:absolute}.handle{z-index:5;background:var(--accent);touch-action:none;border:2px solid #fff;border-radius:50%;width:16px;height:16px;margin-top:-8px;margin-left:-8px;position:absolute;box-shadow:0 1px 3px #0009}.toggle{color:var(--text);cursor:pointer;align-items:center;gap:8px;font-size:13px;display:flex}.toggle input{cursor:pointer;width:auto}.stage-hint{color:var(--muted);border-top:1px solid var(--border);margin:0;padding:10px 14px;font-size:12px}.panel{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px}.panel h2{text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0 0 12px;font-size:13px}.panel+.panel{margin-top:16px}label.field{color:var(--muted);margin-bottom:14px;font-size:13px;display:block}label.field span{margin-bottom:6px;display:block}select,input[type=range],input[type=color]{width:100%}select{background:var(--panel-2);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-size:14px}input[type=color]{border:1px solid var(--border);background:var(--panel-2);border-radius:8px;height:36px;padding:2px}button{font:inherit;cursor:pointer;background:var(--panel-2);color:var(--text);border:none;border:1px solid var(--border);border-radius:8px;padding:10px 14px}button:hover:not(:disabled){border-color:var(--accent)}button:disabled{opacity:.5;cursor:not-allowed}button.primary{background:var(--accent);border-color:var(--accent);color:#fff;width:100%;font-weight:600}button.primary:hover:not(:disabled){background:var(--accent-hover)}.row{gap:8px;display:flex}.row button{flex:1}.uploader{border:2px dashed var(--border);text-align:center;color:var(--muted);cursor:pointer;border-radius:12px;padding:60px 20px;transition:border-color .15s,background .15s}.uploader.drag{border-color:var(--accent);background:#3b82f614}.uploader strong{color:var(--text)}.hint{color:var(--muted);margin-top:6px;font-size:12px}.banner{border-radius:8px;margin-bottom:12px;padding:10px 12px;font-size:13px}.banner.warn{border:1px solid var(--danger);color:#fecaca;background:#ef44441f}.banner.info{border:1px solid var(--accent);color:#bfdbfe;background:#3b82f61f}.status{color:var(--muted);margin-top:8px;font-size:13px}.export-meta{font-size:13px;line-height:1.6}.export-meta .ok{color:var(--ok)}.export-meta .bad{color:var(--danger)}.preview-thumb{border:1px solid var(--border);border-radius:8px;max-width:100%;margin:12px 0;display:block}.spinner{border:2px solid var(--muted);border-top-color:var(--accent);vertical-align:-2px;border-radius:50%;width:14px;height:14px;margin-right:6px;animation:.7s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.link-btn{color:var(--accent);background:0 0;border:none;padding:0;font-size:13px}