:root { --ink:#1c1f20; --dark:#202426; --red:#c8202f; --muted:#687176; --line:#dfe2e3; --bg:#f1f3f3; --green:#167553; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:"Microsoft YaHei","Segoe UI",sans-serif; letter-spacing:0; }
button,input,select { font:inherit; } button,label,select { cursor:pointer; }
.quote-topbar { height:66px; padding:0 22px; background:var(--dark); color:#fff; display:flex; justify-content:space-between; align-items:center; border-bottom:3px solid var(--red); position:sticky; top:0; z-index:20; }
.quote-brand { display:flex; gap:10px; align-items:center; color:#fff; text-decoration:none; }.quote-brand>span { width:36px;height:36px;background:var(--red);display:grid;place-items:center;font-size:21px;font-weight:900;clip-path:polygon(0 0,100% 0,100% 76%,50% 100%,0 76%); }
.quote-brand div { display:grid; }.quote-brand strong { font-size:14px; }.quote-brand small { color:#adb4b7;font-size:9px;margin-top:2px; }
.header-actions { display:flex;align-items:center;gap:9px; }.header-actions>span,.header-actions a { color:#c8cdcf;font-size:10px;display:flex;align-items:center;gap:6px; }.header-actions a { height:36px;padding:0 10px;border:1px solid #4c5254;border-radius:4px;text-decoration:none;color:#fff; }
.header-actions button { width:36px;height:36px;border:1px solid #4c5254;background:transparent;color:#fff;border-radius:4px;display:grid;place-items:center; }.header-actions svg { width:16px; }
.quote-workspace { max-width:1540px;margin:auto;min-height:calc(100vh - 66px);display:grid;grid-template-columns:minmax(390px,1.08fr) minmax(390px,.92fr) 330px; }
.file-column,.settings-column,.result-column { padding:26px;min-width:0; }.file-column { background:#fff;border-right:1px solid var(--line); }.settings-column { background:var(--bg); }.result-column { background:#fff;border-left:1px solid var(--line);position:sticky;top:66px;height:calc(100vh - 66px);overflow:auto; }
.quote-heading p,.panel-head p { color:var(--red);font-size:9px;font-weight:800;margin:0 0 5px; }.quote-heading h1 { font-size:27px;margin:0 0 7px; }.quote-heading>span { font-size:11px;color:var(--muted); }
.official-section { margin-top:20px;border:1px solid var(--line);background:#f7f8f8;padding:12px; }
.official-head { display:flex;justify-content:space-between;align-items:center;margin-bottom:10px; }.official-head>div{display:flex;align-items:center;gap:8px}.official-head>div>svg{width:18px;color:var(--red)}.official-head span{display:grid;gap:2px}.official-head strong{font-size:11px}.official-head small{font-size:8px;color:var(--muted)}.official-head>button{width:30px;height:30px;border:1px solid var(--line);background:#fff;border-radius:3px;display:grid;place-items:center}.official-head>button svg{width:14px}
.model-list { display:grid;grid-template-columns:repeat(3,1fr);gap:7px;min-height:112px; }.model-loading,.model-empty{grid-column:1/-1;min-height:100px;display:flex;align-items:center;justify-content:center;gap:7px;color:var(--muted);font-size:9px}.model-loading svg{width:15px;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.official-card { min-width:0;border:1px solid var(--line);background:#fff;border-radius:4px;padding:9px;display:grid;grid-template-rows:auto 1fr auto;gap:7px;position:relative;overflow:visible; }.official-card.featured{border-color:#dfa2a8}.official-card .model-badge{display:flex;justify-content:space-between;align-items:center}.official-card .model-badge span{font-size:8px;color:var(--red);background:#fae9eb;padding:3px 5px;border-radius:2px}.official-card .model-badge i{font-size:8px;color:var(--muted);font-style:normal}.model-content{display:grid;grid-template-columns:88px minmax(0,1fr);gap:9px;align-items:center}.model-thumb-wrap{width:88px;height:74px;position:relative;z-index:2}.model-thumb{position:absolute;inset:0;width:88px;height:74px;background:#262b2d;border:1px solid #3b4245;border-radius:3px;display:block;cursor:zoom-in;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;transform-origin:left center}.model-thumb:hover{z-index:10;transform:scale(1.65);border-color:#e34c59;box-shadow:0 10px 28px rgba(0,0,0,.34)}.official-card h3{font-size:10px;margin:0 0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.official-card h3 a{color:var(--ink);text-decoration:none}.official-card h3 a:hover{color:var(--red)}.official-card p{font-size:8px;color:var(--muted);line-height:1.45;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.official-card button{height:30px;border:0;background:var(--dark);color:#fff;border-radius:3px;font-size:9px;display:flex;align-items:center;justify-content:center;gap:5px}.official-card button:hover{background:var(--red)}.official-card button svg{width:13px}
.more-models-button{min-height:48px;margin-top:9px;background:var(--red);color:#fff;text-decoration:none;border-radius:4px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 5px 14px rgba(139,17,29,.2)}.more-models-button>span{display:flex;align-items:center;gap:8px}.more-models-button strong{font-size:11px}.more-models-button svg{width:17px}.more-models-button:hover{background:#a81724}
.drop-zone { min-height:160px;margin-top:22px;border:2px dashed #bfc5c7;background:#fafafa;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:7px;transition:.2s; }.drop-zone:hover,.drop-zone.dragging { border-color:var(--red);background:#fff7f8; }.drop-zone input { position:absolute;opacity:0;pointer-events:none; }.upload-icon { width:44px;height:44px;border-radius:50%;background:#f5e3e5;color:var(--red);display:grid;place-items:center; }.upload-icon svg { width:21px; }.drop-zone strong { font-size:13px; }.drop-zone small { color:var(--muted);font-size:9px; }
.file-card { margin-top:10px;border:1px solid var(--line);padding:10px;display:grid;grid-template-columns:42px 1fr 34px;gap:10px;align-items:center; }.file-type { width:42px;height:38px;background:var(--dark);color:#fff;font-size:9px;font-weight:800;display:grid;place-items:center;border-radius:3px; }.file-card>div:nth-child(2){display:grid;gap:3px;min-width:0}.file-card strong{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-card span{font-size:9px;color:var(--muted)}.file-card button{width:34px;height:34px;border:0;background:transparent;color:#8c9599;display:grid;place-items:center}.file-card svg{width:16px}
.preview-panel { aspect-ratio:3/2;margin-top:12px;background:#202426;position:relative;overflow:hidden; }.preview-panel canvas { width:100%;height:100%;display:block;touch-action:none;cursor:grab; }.preview-panel canvas.dragging{cursor:grabbing}.preview-controls{position:absolute;right:10px;top:10px;display:flex;gap:5px;z-index:4}.preview-controls button{width:34px;height:34px;border:1px solid #4b5356;background:rgba(32,36,38,.9);color:#fff;border-radius:3px;display:grid;place-items:center}.preview-controls button:hover:not(:disabled){border-color:#ef5361;color:#ff6572}.preview-controls button:disabled{opacity:.35;cursor:not-allowed}.preview-controls svg{width:15px}.empty-preview { position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#6f787c;gap:7px;font-size:10px;pointer-events:none}.empty-preview svg{width:32px}.preview-meta{position:absolute;left:10px;right:10px;bottom:10px;display:flex;gap:7px;pointer-events:none}.preview-meta span{background:rgba(255,255,255,.92);padding:7px 9px;display:flex;align-items:center;gap:5px;font-size:9px;border-radius:3px}.preview-meta svg{width:13px;color:var(--red)}
.analysis-note { margin-top:10px;padding:10px;border-left:3px solid #d49300;background:#fff8e6;color:#795300;display:flex;gap:7px;font-size:9px;line-height:1.5; }.analysis-note svg{width:14px;flex:none}
.panel-head { display:flex;justify-content:space-between;align-items:end;margin-bottom:16px; }.panel-head h2{font-size:21px;margin:0}.panel-head>span{font-size:9px;color:var(--muted);border:1px solid #cdd2d4;background:#fff;padding:5px 7px;border-radius:3px}
.setting-block { background:#fff;border:1px solid var(--line);padding:15px;margin-bottom:11px;border-radius:5px; }.block-label { display:block;font-size:11px;font-weight:700;margin-bottom:10px; }.quality-options{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.quality-options button{min-height:66px;border:1px solid var(--line);background:#fff;border-radius:4px;display:grid;place-items:center;padding:7px;gap:2px;color:var(--muted)}.quality-options svg{width:16px}.quality-options strong{font-size:10px;color:var(--ink)}.quality-options span{font-size:8px}.quality-options button.selected{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red);background:#fff8f8}.quality-options button.selected svg{color:var(--red)}
.label-row{display:flex;justify-content:space-between}.label-row output{color:var(--red);font-weight:800;font-size:12px}.range{width:100%;accent-color:var(--red)}.range-marks{display:flex;justify-content:space-between;color:var(--muted);font-size:8px;margin-top:4px}
.two-settings{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:11px}.two-settings>label{background:#fff;border:1px solid var(--line);padding:13px;border-radius:5px;display:flex;justify-content:space-between;align-items:center;font-size:10px;font-weight:700}.stepper{height:30px;display:grid;grid-template-columns:28px 34px 28px;border:1px solid var(--line)}.stepper button{border:0;background:#f3f4f4}.stepper input{width:100%;border:0;text-align:center;outline:0}
.select-wrap{height:42px;border:1px solid var(--line);display:grid;grid-template-columns:34px 1fr 30px;align-items:center}.material-swatch{width:17px;height:17px;border-radius:50%;background:#ded9cd;justify-self:center;border:1px solid #aaa}.select-wrap select{width:100%;height:100%;border:0;outline:0;background:#fff;appearance:none;font-size:11px}.select-wrap svg{width:15px;pointer-events:none}.material-meta{display:flex;justify-content:space-between;margin-top:8px;color:var(--muted);font-size:8px}.material-meta b{color:var(--ink)}
.toggle-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0}.toggle-row+ .toggle-row{border-top:1px solid var(--line)}.toggle-row>div{display:grid;gap:3px}.toggle-row strong{font-size:10px}.toggle-row span{font-size:8px;color:var(--muted)}.switch input{position:absolute;opacity:0}.switch i{display:block;width:34px;height:18px;border-radius:12px;background:#c9cdcf;position:relative}.switch i:after{content:"";position:absolute;width:14px;height:14px;left:2px;top:2px;background:#fff;border-radius:50%;transition:.2s}.switch input:checked+i{background:var(--green)}.switch input:checked+i:after{transform:translateX(16px)}
.price-settings{background:#fff;border:1px solid var(--line);border-radius:5px}.price-settings summary{padding:12px;font-size:10px;font-weight:700;display:flex;gap:7px;align-items:center}.price-settings summary svg{width:15px}.price-settings>div{padding:0 12px 12px;display:grid;gap:7px}.price-settings label{display:grid;grid-template-columns:1fr 70px 58px;align-items:center;font-size:9px}.price-settings input{height:30px;border:1px solid var(--line);width:100%;padding:0 6px}.price-settings em{font-style:normal;color:var(--muted);text-align:right}
.result-head{display:flex;justify-content:space-between;align-items:center}.result-head p{font-size:11px;font-weight:700}.result-head span{font-size:9px;padding:4px 6px;background:#eef1f2;color:var(--muted);border-radius:3px}.main-price{padding:14px 0 17px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto;align-items:end}.main-price>span{font-size:10px}.main-price strong{font-size:31px;color:var(--red)}.main-price small{grid-column:1/-1;text-align:right;color:var(--muted);font-size:8px}
.metric-grid{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line);padding:13px 0}.metric-grid div{padding:9px;display:grid;grid-template-columns:18px 1fr;gap:3px}.metric-grid svg{width:14px;color:var(--red);grid-row:1/3}.metric-grid span{font-size:8px;color:var(--muted)}.metric-grid strong{font-size:12px}.breakdown{padding:15px 0;border-bottom:1px solid var(--line)}.breakdown h3{font-size:11px;margin:0 0 9px}.breakdown div{display:flex;justify-content:space-between;padding:5px 0;font-size:9px}.breakdown span{color:var(--muted)}
.confidence{padding:15px 0}.confidence-head{display:flex;justify-content:space-between;font-size:9px}.confidence>div:nth-child(2){height:5px;background:#e0e3e4;margin:8px 0}.confidence i{display:block;height:100%;width:0;background:var(--green);transition:.3s}.confidence p{color:var(--muted);font-size:8px;line-height:1.5}.quote-button,.order-button{width:100%;height:44px;border:0;color:#fff;border-radius:4px;display:flex;justify-content:space-between;align-items:center;padding:0 13px;font-size:11px;font-weight:700}.order-button{background:var(--green);margin-bottom:8px}.order-button:hover:not(:disabled){background:#105e40}.quote-button{background:var(--red)}.quote-button.secondary{background:var(--dark)}.quote-button:disabled,.order-button:disabled{background:#a9afb1;cursor:not-allowed}.quote-button svg,.order-button svg{width:16px}.result-foot{font-size:8px;color:var(--muted);display:flex;gap:5px;line-height:1.5}.result-foot svg{width:13px;flex:none}
.quote-toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);opacity:0;background:var(--dark);color:#fff;padding:10px 14px;border-radius:4px;display:flex;align-items:center;gap:7px;font-size:10px;transition:.2s;pointer-events:none;z-index:40}.quote-toast.show{opacity:1;transform:translate(-50%,0)}.quote-toast svg{width:15px;color:#5fd3a5}
@media(max-width:1100px){.quote-workspace{grid-template-columns:1fr 1fr}.result-column{grid-column:1/-1;position:static;height:auto;display:grid;grid-template-columns:1fr 1fr;gap:0 24px}.result-head,.main-price,.metric-grid{grid-column:1}.breakdown,.confidence,.quote-button,.order-button,.result-foot{grid-column:2}.breakdown{grid-row:1/3;margin-top:25px}}
@media(max-width:700px){.quote-topbar{height:58px;padding:0 11px}.header-actions>span,.header-actions a span{display:none}.header-actions a{width:36px;padding:0;justify-content:center}.quote-workspace{display:block}.file-column,.settings-column,.result-column{padding:16px 12px}.result-column{display:block}.quality-options{grid-template-columns:1fr 1fr}.two-settings{grid-template-columns:1fr}.preview-panel{aspect-ratio:4/3}.quote-heading h1{font-size:23px}.drop-zone{min-height:130px}.model-list{grid-template-columns:1fr}.official-card{grid-template-columns:1fr auto;grid-template-rows:auto auto}.official-card .model-badge{grid-column:1/-1}.official-card button{grid-column:2;grid-row:2;align-self:center;padding:0 10px}.model-content{min-width:190px}}