:root{font-family:Inter,SF Pro Text,PingFang SC,Microsoft YaHei,Arial,sans-serif;color:#18181b;background:#f6f7f9;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--red: #e60020;--red-dark: #b8001a;--ink: #18181b;--muted: #6b7280;--line: #e4e7ec;--panel: #ffffff;--soft: #f7f8fa;--soft-red: #fff1f2;--error: #dc2626;--ok: #16803c;--shadow: 0 18px 45px rgba(15, 23, 42, .08)}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0;background:linear-gradient(180deg,#fff 0,#f6f7f9 360px),#f6f7f9}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.68}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;border:1px solid transparent;border-radius:8px;padding:0 16px;font-size:14px;font-weight:700;white-space:nowrap;transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease}.btn:hover{transform:translateY(-1px)}.btn-primary{background:var(--red);color:#fff;box-shadow:0 12px 22px #e6002033}.btn-primary:hover{background:var(--red-dark)}.btn-secondary{border-color:#ffffff38;background:#ffffff14;color:#fff}.btn-secondary:hover{border-color:#ffffff6b;background:#ffffff24}.brand-mark{display:grid;width:156px;height:156px;place-items:center;background:transparent}.brand-mark img{display:block;width:100%;height:100%;object-fit:contain}.brand-mark.compact{width:52px;height:52px;overflow:hidden;box-shadow:none}.brand-mark.compact img{height:124%;object-fit:cover;object-position:top center}.login-shell{display:grid;min-height:100vh;place-items:center;padding:24px;background:linear-gradient(135deg,rgba(230,0,32,.09) 0 1px,transparent 1px 14px),radial-gradient(circle at 18% 18%,rgba(230,0,32,.16),transparent 28%),linear-gradient(135deg,#f7f8fa,#fff 54%,#151519 54.2%,#222329);background-size:14px 14px,auto,auto}.login-card{display:grid;grid-template-columns:minmax(330px,.9fr) minmax(360px,.72fr);width:min(980px,100%);min-height:560px;overflow:hidden;border:1px solid rgba(15,23,42,.1);border-radius:8px;background:#fff;box-shadow:0 30px 90px #0f172a3d}.login-brand-panel{display:grid;align-content:center;justify-items:center;gap:26px;padding:clamp(36px,5vw,64px);background:radial-gradient(circle at 50% 30%,rgba(230,0,32,.08),transparent 34%),#fff;color:var(--ink);text-align:center}.login-brand-panel h1{max-width:420px;margin:0;font-size:clamp(32px,4vw,50px);line-height:1.08;font-weight:800}.login-panel{display:grid;align-content:center;gap:20px;padding:clamp(34px,5vw,60px);border-left:1px solid var(--line);background:#fff}.login-form-head{display:none;align-items:center;gap:12px;min-width:0;margin-bottom:4px}.login-form-head h2{min-width:0;margin:0;font-size:20px;line-height:1.2;font-weight:800;overflow-wrap:anywhere}label{display:grid;gap:8px;color:#303036;font-size:13px;font-weight:700}input{width:100%;height:42px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);outline:0;padding:0 12px;transition:border-color .15s ease,box-shadow .15s ease}input:focus{border-color:var(--red);box-shadow:0 0 0 3px #e600201f}.form-error{min-height:34px;border:1px solid #fecdd3;border-radius:8px;background:var(--soft-red);color:#b91c1c;padding:8px 10px;font-size:13px}.app-shell{min-height:100vh}.app-header{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:70px;padding:0 clamp(16px,2vw,28px);border-bottom:1px solid rgba(255,255,255,.12);background:#151519;color:#fff}.header-brand{display:flex;align-items:center;flex:1 1 auto;gap:12px;min-width:0}.header-brand>div{min-width:0}.brand-name{overflow:hidden;max-width:min(520px,calc(100vw - 132px));font-size:16px;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.account-line{overflow:hidden;max-width:min(520px,calc(100vw - 132px));margin-top:4px;color:#d1d5db;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.tool-layout{display:grid;grid-template-columns:minmax(320px,380px) minmax(0,1fr);gap:18px;width:min(1680px,100%);margin:0 auto;padding:18px}.panel{border:1px solid var(--line);border-radius:8px;background:var(--panel);box-shadow:var(--shadow)}.panel-header{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:62px;border-bottom:1px solid var(--line);padding:14px 16px}.panel-header>div{min-width:0}h1,h2{margin:0;font-size:18px;line-height:1.25}h2{font-size:16px}.panel-kicker{display:block;margin-top:4px;color:var(--muted);font-size:12px;font-weight:700}.input-panel{position:sticky;top:88px;align-self:start}.mode-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:10px;border-bottom:1px solid var(--line);padding:16px}.prompt-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);padding:0 12px;font-size:15px;font-weight:800;transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease,transform .15s ease}.prompt-button:hover{border-color:#fca5a5;transform:translateY(-1px)}.prompt-button.active{border-color:var(--red);background:var(--soft-red);color:var(--red-dark);box-shadow:0 10px 20px #e600201a}.mode-indicator{width:8px;height:8px;border-radius:999px;background:#d1d5db}.prompt-button.active .mode-indicator{background:var(--red)}.resolution-panel{display:grid;gap:12px;border-bottom:1px solid var(--line);padding:14px 16px 16px}.resolution-head{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--ink)}.resolution-head strong{font-size:13px;font-weight:800}.resolution-head span{color:var(--muted);font-size:12px;font-weight:700;text-align:right}.resolution-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.resolution-button{min-height:44px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font-size:15px;font-weight:900;transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease,transform .15s ease}.resolution-button:hover{border-color:#fca5a5;transform:translateY(-1px)}.resolution-button.active{border-color:var(--red);background:#151519;color:#fff;box-shadow:0 10px 20px #0f172a24}.size-fields-panel{display:grid;gap:12px;border-bottom:1px solid var(--line);padding:14px 16px 16px}.size-fields-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.size-fields-head strong{color:var(--ink);font-size:13px;font-weight:800}.size-fields-head span{color:var(--muted);font-size:12px;font-weight:800}.size-field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.size-field{min-width:0;gap:6px}.size-field span{color:var(--muted);font-size:12px;font-weight:800}.size-input-wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:#fff}.size-input-wrap:focus-within{border-color:var(--red);box-shadow:0 0 0 3px #e600201a}.size-input-wrap input{height:40px;border:0;border-radius:0;box-shadow:none}.size-input-wrap input:focus{box-shadow:none}.size-input-wrap small{padding:0 10px 0 4px;color:var(--muted);font-size:12px;font-weight:900}.upload-box{display:grid;justify-items:center;gap:9px;margin:16px;border:1px dashed #c9ced6;border-radius:8px;background:linear-gradient(180deg,rgba(230,0,32,.04),transparent),#fbfcfd;padding:34px 22px;color:var(--ink);text-align:center;transition:border-color .15s ease,background-color .15s ease,transform .15s ease}.upload-box:hover,.upload-box.has-files{border-color:var(--red);background:var(--soft-red)}.upload-box:hover{transform:translateY(-1px)}.upload-icon{display:grid;width:52px;height:52px;place-items:center;border-radius:14px;background:#fff;color:var(--red);box-shadow:0 10px 22px #0f172a14}.upload-box strong{font-size:16px}.upload-box span{color:var(--muted);font-size:13px}.upload-box input{display:none}.file-list{display:grid;gap:6px;margin:0 16px 16px}.file-row{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;min-height:34px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:0 10px;color:var(--muted);font-size:12px}.file-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0 16px 16px}.process-button{width:calc(100% - 32px);margin:0 16px 16px}.progress-panel{display:grid;gap:10px;margin:0 16px 16px;border:1px solid #fecdd3;border-radius:8px;background:linear-gradient(180deg,rgba(230,0,32,.06),transparent),#fff;padding:11px 12px 12px}.progress-meta{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;font-size:12px}.progress-meta span{min-width:0;overflow:hidden;color:var(--red-dark);font-weight:800;text-overflow:ellipsis;white-space:nowrap}.progress-meta strong{color:var(--ink);font-size:13px}.progress-track{position:relative;overflow:hidden;height:9px;border-radius:999px;background:#ffe4e6}.progress-bar{position:absolute;inset:0 auto 0 0;min-width:8%;border-radius:inherit;background:linear-gradient(90deg,var(--red-dark),var(--red)),var(--red);transition:width .28s ease}.progress-bar:after{position:absolute;inset:0;background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.42) 45%,transparent 70%);animation:progress-shine 1.15s linear infinite;content:""}@keyframes progress-shine{0%{transform:translate(-100%)}to{transform:translate(100%)}}.status-line{margin:0 16px 16px;border:1px solid #fecdd3;border-radius:8px;background:var(--soft-red);padding:10px 12px;color:var(--red-dark);font-size:13px;overflow-wrap:anywhere}.status-line.done{border-color:#bbf7d0;background:#f0fdf4;color:var(--ok)}.status-line.error{border-color:#fecdd3;background:var(--soft-red);color:var(--error)}.workspace-column{display:grid;gap:18px;min-width:0}.preview-panel{min-height:calc(100vh - 106px)}.preview-grid{display:grid;grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr);min-height:calc(100vh - 169px);padding:16px}.preview-box{display:grid;align-content:start;min-height:min(860px,calc(100vh - 198px));overflow:hidden;border:1px solid var(--line);border-radius:8px;background:#f8fafc}.source-box{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--line)}.source-box figure,.generated-list figure,.history-preview figure{min-width:0;margin:0;background:#fff}.source-box img{display:block;width:100%;height:clamp(460px,46vw,760px);object-fit:contain;background:linear-gradient(45deg,#f7f8fa 25%,transparent 25%),linear-gradient(-45deg,#f7f8fa 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f7f8fa 75%),linear-gradient(-45deg,transparent 75%,#f7f8fa 75%),#fff;background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px}.source-box figcaption{overflow:hidden;height:34px;padding:9px 10px;color:var(--muted);font-size:12px;text-overflow:ellipsis;white-space:nowrap}.empty-preview{display:grid;grid-column:1 / -1;min-height:min(860px,calc(100vh - 198px));place-items:center;color:var(--muted);font-size:14px}.flow-arrow{display:grid;place-items:center;color:#9ca3af}.result-box{place-items:center}.generated-list{display:grid;align-content:start;gap:1px;width:100%;min-height:inherit;background:var(--line)}.generated-list img{display:block;width:100%;height:clamp(560px,54vw,860px);object-fit:contain;background:#f8fafc}.generated-list figcaption{display:grid;align-items:center;grid-template-columns:minmax(0,1fr) auto;gap:10px;min-height:40px;padding:8px 10px;color:var(--muted);font-size:12px}.generated-list figcaption>span,.history-preview figcaption>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.download-hover{display:inline-flex;align-items:center;flex:0 0 auto;gap:5px;min-height:30px;border:1px solid #fecdd3;border-radius:8px;background:var(--soft-red);padding:0 10px;color:var(--red-dark);font-weight:800;text-decoration:none;white-space:nowrap;transition:background-color .15s ease,border-color .15s ease,transform .15s ease}.download-hover:hover{border-color:var(--red);background:#ffe4e6;transform:translateY(-1px)}.mode-white-background{background:#fff}.mode-black-background{background:#050505;color:#fff}.mode-detail-page{background:linear-gradient(#fff 0 0) top / 100% 72px no-repeat,repeating-linear-gradient(#f4f4f5 0 44px,#fff 44px 96px)}.mode-product-size{background:linear-gradient(90deg,rgba(230,0,32,.1) 1px,transparent 1px),linear-gradient(rgba(230,0,32,.1) 1px,transparent 1px),#fff;background-size:32px 32px}.result-state{display:grid;align-self:center;justify-self:center;justify-items:center;gap:10px;color:inherit}.result-state strong{font-size:18px}.result-state.working svg{animation:progress-pulse 1.35s ease-in-out infinite}.result-progress-text{color:currentColor;font-size:13px;font-weight:800;opacity:.72}@keyframes progress-pulse{0%,to{opacity:.55;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}.history-panel{overflow:hidden}.history-header h2{display:inline-flex;align-items:center;gap:7px}.icon-text-button{display:inline-flex;align-items:center;gap:5px;min-height:32px;border:1px solid var(--line);border-radius:8px;background:#fff;color:#393939;padding:0 10px;font-size:12px;font-weight:700}.icon-text-button:hover{border-color:#c9ced6;background:var(--soft)}.history-content{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:1px;background:var(--line)}.history-preview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line)}.history-preview img{display:block;width:100%;height:clamp(240px,24vw,380px);object-fit:contain;background:#f8fafc}.history-preview figcaption{display:grid;align-items:center;grid-template-columns:minmax(0,1fr) auto;gap:10px;min-height:38px;padding:8px 10px;color:var(--muted);font-size:12px}.history-list{display:grid;align-content:start;max-height:419px;overflow:auto;background:#fff}.history-item{display:grid;grid-template-columns:52px minmax(0,1fr) max-content;grid-template-rows:auto auto;align-items:center;gap:9px;min-height:68px;border:0;border-bottom:1px solid var(--line);background:#fff;color:var(--ink);padding:8px 10px;text-align:left}.history-item:hover,.history-item.active{background:var(--soft-red)}.history-item.active{box-shadow:inset 3px 0 0 var(--red)}.history-item img{grid-column:1;grid-row:1 / 3;width:52px;height:52px;border-radius:6px;object-fit:cover;background:#f8fafc}.history-item span,.history-item small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.history-item span{grid-column:2;grid-row:1;font-size:13px;font-weight:800}.history-item time{grid-column:3;grid-row:1;justify-self:end;color:var(--muted);font-size:12px;text-align:right;white-space:nowrap}.history-item small{grid-column:2 / -1;grid-row:2;color:var(--muted);font-size:12px}.history-empty{display:grid;min-height:180px;place-items:center;color:var(--muted);font-size:13px}@media(max-width:1040px){.tool-layout{grid-template-columns:1fr}.input-panel{position:static}.preview-panel{min-height:auto}.preview-grid{grid-template-columns:1fr;gap:12px;min-height:auto}.flow-arrow{min-height:36px;transform:rotate(90deg)}.preview-box,.empty-preview{min-height:560px}}@media(max-width:760px){.login-card{grid-template-columns:1fr;min-height:auto}.login-brand-panel{justify-items:center;text-align:center}.login-brand-panel h1{font-size:30px}.brand-mark{width:132px;height:132px}.app-header{align-items:flex-start;flex-direction:column;padding:14px}.brand-name,.account-line{max-width:calc(100vw - 108px)}.tool-layout{padding:12px}.mode-buttons,.resolution-buttons,.size-field-grid,.field-grid,.source-box,.history-content,.history-preview{grid-template-columns:1fr}.history-list{max-height:none}}@media(max-width:520px){.history-item{grid-template-columns:48px minmax(0,1fr);grid-template-rows:auto auto auto;min-height:78px;row-gap:3px}.history-item img{grid-row:1 / 4;width:48px;height:48px}.history-item time{grid-column:2;grid-row:2;justify-self:start;text-align:left}.history-item small{grid-column:2;grid-row:3}.history-preview figcaption,.generated-list figcaption{gap:8px}.resolution-head{align-items:flex-start;flex-direction:column;gap:4px}.resolution-head span{text-align:left}}@media(max-width:460px){.login-shell{padding:12px}.login-panel,.login-brand-panel{padding:24px}.login-card{grid-template-columns:1fr}.login-brand-panel{display:none}.login-form-head{display:flex}.preview-box,.empty-preview{min-height:460px}}