:root{font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif;color:#202832;background:#f4f6f8;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;min-width:320px}
button,input,textarea{font:inherit}
button{cursor:pointer}
.topbar{background:#fff;border-bottom:1px solid #e5e9ee;box-shadow:0 2px 8px #20283208}
.topbar-inner{height:68px;max-width:760px;margin:auto;padding:0 20px;display:flex;align-items:center;gap:11px}
.brand-mark{width:39px;height:39px;display:grid;place-items:center;border-radius:8px;background:#3170ed;color:#fff;font-size:20px;font-weight:700;box-shadow:0 4px 10px #3170ed38}
.brand-text{display:grid;gap:2px}.brand-text strong{font-size:16px;line-height:1.2}.brand-text span{font-size:11px;color:#8d98a6}
.workspace{max-width:760px;margin:22px auto 70px;padding:0 20px;display:grid;gap:20px}
.editor,.preview-area{background:#fff;border:1px solid #e3e8ee;border-radius:8px;box-shadow:0 2px 10px #1a34500a;overflow:hidden}
.editor{padding:0 22px 22px}
.panel-heading{min-height:56px;display:flex;align-items:center;gap:9px}
.heading-dot{width:6px;height:6px;border-radius:50%;background:#3170ed;flex:none}
h1,h2,p{margin:0}h1,h2{font-size:15px;font-weight:700;line-height:1.3;letter-spacing:0}
.platform-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.platform{min-width:0;height:51px;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid #dce3ea;border-radius:6px;background:#fff;color:#364250;transition:background .15s,border-color .15s,box-shadow .15s}
.platform:hover{border-color:#7fa7f0}.platform.active{background:#eef4ff;border-color:#3170ed;box-shadow:0 0 0 1px #3170ed inset;color:#235dbd}
.platform-icon{width:27px;height:27px;display:grid;place-items:center;border-radius:6px;color:#fff;font-size:14px;font-weight:700;flex:none}
.platform-icon.pdd{background:#e63128}.platform-icon.douyin{background:#1e2732}.platform-icon.taobao{background:#ef6d2f}
.platform-name{font-size:13px;font-weight:700;white-space:nowrap}
.fields-heading{margin:20px -22px 0;padding:0 22px;border-top:1px solid #ecf0f3}
#edit-form{display:grid;gap:16px}
.field{display:grid;gap:7px;color:#4d5967;font-size:12px;font-weight:600}
.field input,.field textarea{display:block;width:100%;padding:11px 12px;border:1px solid #d5dce4;border-radius:6px;outline:none;background:#fff;color:#202832;font-size:13px;font-weight:400;line-height:1.5;transition:border-color .15s,box-shadow .15s}
.field input{height:43px}.field textarea{min-height:84px;max-height:180px;resize:vertical}
.field input:focus,.field textarea:focus{border-color:#4384f4;box-shadow:0 0 0 3px #dbe8ff}
.field input::placeholder,.field textarea::placeholder{color:#abb5bf}
.two-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.address-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.paste-button{border:1px solid #bed2f8;border-radius:5px;background:#eef4ff;color:#2463d5;padding:8px 12px;font-size:12px;font-weight:600;min-height:36px;white-space:nowrap}.paste-button:hover{background:#e3edff}.paste-button:disabled{opacity:.6;cursor:wait}.recognition-feedback{display:flex;align-items:baseline;justify-content:space-between;gap:10px;color:#77899f;font-size:11px;font-weight:400}.recognition-feedback:has(#address-status:empty){display:none}.recognition-feedback .text-button{padding:0;flex:none}
.source-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:1px}
.source-upload,.text-button{border:0;background:none;padding:5px 0;color:#3170ed;font-size:12px;font-weight:600;white-space:nowrap}
.text-button{color:#8793a0}.source-upload:hover,.text-button:hover{text-decoration:underline}
.editor-actions{padding-top:19px}
.primary-button{display:block;width:100%;height:46px;border:0;border-radius:6px;background:#3170ed;color:#fff;font-size:14px;font-weight:700;transition:background .15s}
.primary-button:hover:not(:disabled){background:#215dcc}.primary-button:disabled{background:#abc4f5;cursor:wait}
#status{min-height:17px;margin-top:9px;text-align:center;color:#8a97a3;font-size:11px}
.preview-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 22px;border-bottom:1px solid #ecf0f3}
.zoom-button{border:1px solid #d2dceb;border-radius:5px;background:#fff;color:#3170ed;padding:7px 10px;font-size:12px;font-weight:600;white-space:nowrap}
.zoom-button:hover{background:#f1f6ff}
.preview-stage{background:#f5f7f9;padding:24px;display:flex;justify-content:center;align-items:flex-start;overflow:hidden}
.phone-frame{width:min(100%,600px);min-width:0;line-height:0;background:#fff;box-shadow:0 3px 18px #273c5430;overflow:hidden}
#preview{display:block;width:100%;height:auto;aspect-ratio:1284/2778}
.preview-footer{padding:12px 22px;text-align:right;color:#97a2ad;font-size:11px}
.zoom-dialog{width:min(95vw,1100px);height:min(92dvh,900px);max-width:none;max-height:none;padding:0;border:1px solid #dae2eb;border-radius:8px;box-shadow:0 20px 70px #17233155;overflow:hidden}
.zoom-dialog::backdrop{background:#18212caa}
.zoom-header{height:54px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e6ebef;background:#fff;font-size:14px}
.zoom-controls{display:flex;align-items:center;gap:8px}.zoom-header button{height:34px;border:0;background:transparent;color:#485768}.zoom-header #toggle-zoom{min-width:42px;padding:0 6px;border:1px solid #dce4ed;border-radius:5px;color:#3170ed;font-size:12px;font-weight:700}.zoom-header #close-zoom{width:34px;font-size:25px;line-height:1}
.zoom-scroll{height:calc(100% - 54px);overflow:auto;background:#e9edf1;text-align:center}
.zoom-scroll canvas{display:block;width:min(100%,800px);height:auto;margin:0 auto;background:#fff}.zoom-scroll.native canvas{width:1284px;max-width:none}
@media(max-width:600px){.topbar-inner{height:60px;padding:0 16px}.workspace{margin:14px auto 40px;padding:0 12px;gap:14px}.editor{padding:0 14px 18px}.panel-heading{min-height:51px}.fields-heading{margin:16px -14px 0;padding:0 14px}.platform-list{gap:6px}.platform{height:48px;gap:5px}.platform-icon{width:24px;height:24px;font-size:13px}.platform-name{font-size:12px}.preview-heading{padding:0 14px}.preview-stage{padding:12px}.preview-footer{padding:10px 14px}}
@media(max-width:370px){.platform-icon{display:none}.two-fields{grid-template-columns:1fr}.zoom-button{font-size:11px}}
