:root{color:#18221f;background:#f6f7f4;font-family:Inter,PingFang SC,Microsoft YaHei,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:linear-gradient(180deg,#ffffffd1,#f6f7f4f5),#f6f7f4}button,input{font:inherit}button{cursor:pointer}.app-shell{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:10px 0 34px}.result-header p,.result-header h2{margin:0}.spin{animation:spin 1s linear infinite}.compact-notices{display:flex;align-items:center;justify-content:center;gap:14px;width:min(760px,100%);min-width:0;margin:0 auto;color:#68786f}.compact-notices span,.reset-link{display:inline-flex;align-items:center;gap:5px;min-width:0;font-size:12px;line-height:1.35;white-space:nowrap}.compact-notices span{color:#68786f}.compact-notices svg{flex:0 0 auto;color:#9b7b22}.reset-link{flex:0 0 auto;border:1px solid #c9ddd2;border-radius:999px;background:#f3f8f5;color:#1d7650;padding:2px 8px;transition:background .14s ease,border-color .14s ease,color .14s ease}.reset-link:hover{border-color:#9fc4b2;background:#e8f3ed;color:#155d3e}.tool-band{display:block;margin-top:0}.search-panel{background:transparent;padding:14px 0 4px}.image-panel{border:1px solid #dfe5df;border-radius:8px;background:#fff;padding:8px 10px 10px}.google-search-panel{display:grid;justify-items:center;gap:10px}.search-brand{display:flex;justify-content:center;width:100%}.search-logo{width:176px;height:58px;object-fit:contain;object-position:center}.search-panel label,.image-panel-title{display:flex;align-items:center;gap:8px;color:#31443d;font-weight:700}.image-panel-title{margin-bottom:10px}.search-row{display:grid;grid-template-columns:24px minmax(0,1fr) auto auto;align-items:center;gap:8px;width:min(760px,100%);min-height:54px;padding:6px 7px 6px 18px;border:1px solid #d5ddd8;border-radius:999px;background:#fff;box-shadow:0 6px 22px #1d302914}.search-row>svg{color:#60736c}.search-row input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#17231f}.search-row button,.ghost-button,.link-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;border-radius:999px;border:1px solid transparent;background:#1d7650;color:#fff;padding:8px 14px}.search-row button:disabled{cursor:wait;opacity:.72}.icon-text-button,.upload-inline{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;min-height:40px;border-radius:999px;border:1px solid #d6e2dc;background:#f1f6f3;color:#2f5c48;padding:0 12px;white-space:nowrap}.icon-text-button{cursor:pointer}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{margin:0;appearance:none}input[type=number]{appearance:textfield;-moz-appearance:textfield}.search-tools{display:flex;align-items:stretch;justify-content:flex-end;gap:8px;flex-wrap:nowrap}.upload-inline{font-weight:700;cursor:pointer}.upload-inline input{display:none}.link-button{background:transparent;color:#176b48;padding:6px 0}.image-panel{min-height:190px}.upload-box{display:flex;align-items:center;justify-content:center;gap:8px;min-height:74px;border:1px dashed #aebdb6;border-radius:8px;background:#f7faf7;color:#2f5c48;font-weight:700}.upload-box input{display:none}.preview-wrap{margin-top:12px}.preview-copy{display:flex;align-items:center;gap:8px;margin-bottom:8px;color:#47605a;line-height:1.45}.preview-image{width:100%;max-height:300px;object-fit:contain;border:1px solid #dfe5df;border-radius:8px;background:#f5f6f3;cursor:crosshair}.sample-row{display:flex;align-items:center;gap:8px;min-height:32px;margin-top:9px;color:#31443d;flex-wrap:wrap}.sample-chip{width:24px;height:24px;border-radius:6px;border:1px solid rgba(24,34,31,.2)}.sample-row small{color:#65766f}.result-header{display:flex;align-items:end;justify-content:space-between;gap:14px;margin:14px 0 10px}.result-header p{color:#63746d;font-size:13px}.result-header h2{font-size:22px;line-height:1.25}.classification-filter{display:grid;gap:9px;margin:0 0 12px;padding:12px;border:1px solid #dfe8e2;border-radius:8px;background:#fff}.filter-group{display:grid;grid-template-columns:76px minmax(0,1fr);align-items:center;gap:10px}.filter-group>span{color:#52665e;font-size:13px;font-weight:700}.filter-chips{display:flex;flex-wrap:wrap;gap:7px;min-width:0}.filter-chips button{min-height:32px;border:1px solid #d7e2dc;border-radius:999px;background:#f8fbf8;color:#2f5c48;padding:5px 11px;font-size:13px;white-space:nowrap}.filter-chips button.active{border-color:#1d7650;background:#1d7650;color:#fff}.color-system-list{display:grid;gap:18px}.color-system-block{display:grid;gap:14px;padding:14px;border:1px solid #dbe7df;border-radius:8px;background:#fff}.color-system-header{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 0 10px;border:0;border-bottom:1px solid #edf2ee;background:transparent;text-align:left}.collapse-trigger{color:inherit;cursor:pointer}.collapse-trigger:hover .collapse-title-group strong,.collapse-trigger:hover>strong{color:#1d7650}.collapse-trigger:focus-visible{outline:2px solid #1d7650;outline-offset:3px;border-radius:6px}.collapse-title-group{display:grid;gap:2px;min-width:0}.collapse-title-group span,.color-system-header small{color:#68786f;font-size:13px}.collapse-title-group strong{overflow:hidden;color:#17231f;font-size:22px;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}.collapse-meta{display:inline-flex;align-items:center;justify-content:flex-end;gap:7px;flex:0 0 auto;color:#68786f}.collapse-meta svg{color:#2f5c48;stroke-width:2.2}.paint-type-list{display:grid;gap:14px}.paint-type-section{display:grid;gap:9px;min-width:0}.paint-type-header{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:34px;padding:0 2px;border:0;background:transparent;text-align:left}.paint-type-header strong{overflow:hidden;color:#174f39;font-size:16px;text-overflow:ellipsis;white-space:nowrap}.paint-type-header small{color:#68786f;font-size:13px}.color-class-tags{display:flex;gap:6px;min-width:0}.color-class-tags small{max-width:50%;min-width:0;border:1px solid #d9e5dd;border-radius:999px;background:#f5faf7;color:#2f5c48;padding:2px 7px;font-size:12px}.color-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}.empty-state{display:grid;place-items:center;gap:8px;min-height:220px;border:1px solid #dfe5df;border-radius:8px;background:#fff;color:#667770;text-align:center;padding:24px}.empty-state strong{color:#17231f;font-size:18px}.empty-state span{max-width:420px;line-height:1.45}.color-card{display:grid;grid-template-rows:100px auto auto;min-height:202px;padding:0;overflow:hidden;text-align:left;border:1px solid #dce3dd;border-radius:8px;background:#fff;color:#18221f;transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}.color-card:hover{transform:translateY(-2px);border-color:#a8c7b5;box-shadow:0 14px 32px #1b372c1a}.swatch{position:relative;isolation:isolate;overflow:hidden;width:100%;height:100px;background:var(--swatch-color)}.swatch:before,.swatch:after{position:absolute;inset:0;content:"";pointer-events:none}.swatch--flat:before{background:linear-gradient(135deg,rgba(255,255,255,.18),transparent 34%),linear-gradient(180deg,transparent,rgba(0,0,0,.1))}.swatch--ripple:before{background:radial-gradient(70% 130% at 50% -32%,transparent 55%,rgba(255,255,255,.5) 57%,transparent 60%) 0 0 / 42px 18px,radial-gradient(70% 130% at 50% 132%,transparent 55%,rgba(0,0,0,.32) 57%,transparent 60%) 21px 0 / 42px 18px;mix-blend-mode:overlay;opacity:.72}.swatch--ripple:after{background:linear-gradient(105deg,rgba(255,255,255,.28),transparent 26%,rgba(0,0,0,.18) 62%,transparent),repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,transparent 1px 7px);mix-blend-mode:soft-light}.swatch--orange-peel:before{background:radial-gradient(circle at 18% 24%,rgba(255,255,255,.42) 0 1.2px,transparent 1.5px),radial-gradient(circle at 74% 34%,rgba(255,255,255,.32) 0 1px,transparent 1.4px),radial-gradient(circle at 34% 78%,rgba(0,0,0,.24) 0 1.1px,transparent 1.5px),radial-gradient(circle at 88% 82%,rgba(0,0,0,.18) 0 1px,transparent 1.4px);background-size:17px 17px,23px 21px,19px 23px,29px 27px;mix-blend-mode:overlay;opacity:.78}.swatch--orange-peel:after{background:repeating-radial-gradient(circle at 32% 42%,rgba(255,255,255,.16) 0 .8px,transparent 1.1px 5px),linear-gradient(180deg,#ffffff29,#0000001f);mix-blend-mode:soft-light}.swatch--hammered:before{background:radial-gradient(ellipse at 18% 28%,rgba(255,255,255,.62) 0 8%,transparent 27%),radial-gradient(ellipse at 58% 18%,rgba(0,0,0,.28) 0 10%,transparent 29%),radial-gradient(ellipse at 78% 66%,rgba(255,255,255,.36) 0 11%,transparent 31%),radial-gradient(ellipse at 30% 78%,rgba(0,0,0,.32) 0 12%,transparent 33%);background-size:54px 42px,48px 40px,58px 46px,52px 44px;mix-blend-mode:overlay;opacity:.76}.swatch--hammered:after{background:radial-gradient(ellipse at 50% 50%,transparent 0 42%,rgba(0,0,0,.28) 64%,rgba(255,255,255,.24) 82%,transparent 100%) 0 0 / 36px 30px,linear-gradient(125deg,rgba(255,255,255,.22),transparent 38%,rgba(0,0,0,.16) 78%);mix-blend-mode:soft-light}.color-meta{display:grid;gap:4px;min-width:0;padding:10px 11px 5px}.color-meta strong,.color-meta span,.color-meta small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.color-meta strong{font-size:16px}.color-meta span{color:#47605a}.color-meta small,.card-footer{color:#667770}.card-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:38px;padding:6px 11px 9px;font-size:13px}.modal-backdrop{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:18px;background:#0c12106b}.formula-modal{width:min(620px,100%);max-height:min(720px,calc(100vh - 36px));overflow:auto;border-radius:8px;border:1px solid rgba(255,255,255,.55);background:#fff;box-shadow:0 26px 70px #0e1c1647}.formula-modal header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px;border-bottom:1px solid #e4e9e5}.modal-color{display:flex;align-items:center;gap:12px;min-width:0}.modal-color>span{width:50px;height:50px;border-radius:8px;border:1px solid rgba(24,34,31,.16)}.modal-color p,.modal-color h2{margin:0}.modal-color p{color:#65766f}.modal-color h2{font-size:22px}.icon-button{display:inline-grid;place-items:center;width:38px;height:38px;border:1px solid #dce3dd;border-radius:8px;color:#2d3f39;background:#fff}.formula-summary,.loading-row,.formula-modal footer{display:flex;align-items:center;gap:8px;padding:13px 18px;color:#47605a}.formula-summary{border-bottom:1px solid #edf1ee}.formula-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:6px;padding:10px 18px;border-bottom:1px solid #edf1ee;background:#fbfcfb}.formula-tabs button{min-height:36px;border:1px solid #d5e1da;border-radius:8px;background:#fff;color:#47605a;font-weight:700;transition:background .14s ease,border-color .14s ease,color .14s ease}.formula-tabs button.active,.formula-tabs button[aria-selected=true]{border-color:#1d7650;background:#e8f4ee;color:#155d3e}.formula-calculator{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;border-bottom:1px solid #edf1ee;background:#f8fbf8}.formula-calculator label{color:#31443d;font-weight:700}.weight-input-wrap{display:inline-grid;grid-template-columns:minmax(86px,120px) auto;align-items:center;overflow:hidden;border:1px solid #cfdcd4;border-radius:8px;background:#fff}.weight-input-wrap input{width:100%;min-width:0;border:0;outline:0;padding:8px 10px;color:#17231f}.weight-input-wrap span{padding:8px 10px 8px 0;color:#667770}.formula-table{display:grid;padding:8px 18px 18px}.formula-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(72px,auto) minmax(88px,auto);gap:10px;min-height:42px;align-items:center;border-bottom:1px solid #edf1ee}.formula-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.formula-row-header{min-height:34px;color:#667770;font-size:12px;font-weight:700}.formula-row-header strong{color:#667770}.formula-row strong{color:#174f39}.calculated-amount{text-align:right}.formula-row small{grid-column:1 / -1;color:#667770;padding-bottom:9px}.empty-text{margin:18px 0;color:#667770}.formula-modal footer{align-items:flex-start;border-top:1px solid #edf1ee;background:#fffaf0;color:#5f4714;line-height:1.45}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:820px){.app-shell{width:min(100% - 24px,1180px);padding-top:10px}.result-header{align-items:flex-start;flex-direction:column}.filter-group{grid-template-columns:1fr;align-items:start}.color-system-block{padding:12px}.color-system-header,.paint-type-header{align-items:flex-start;flex-direction:column}.compact-notices{align-items:flex-start;justify-content:flex-start;flex-wrap:wrap}.compact-notices span{white-space:normal}.search-logo{width:144px;height:48px}.search-row{grid-template-columns:22px minmax(0,1fr) auto auto;min-height:50px;padding:5px 6px 5px 14px}.search-row button{min-width:84px}.upload-inline,.icon-text-button{width:auto}.formula-calculator{align-items:stretch;flex-direction:column}.weight-input-wrap,.formula-row{grid-template-columns:minmax(0,1fr) auto}.calculated-amount{grid-column:1 / -1;text-align:left}.calculated-amount:before{content:"需要添加 ";color:#667770;font-weight:400}.color-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.color-card{grid-template-rows:96px auto auto}.swatch{height:96px}}@media(max-width:560px){.search-row{grid-template-columns:22px minmax(0,1fr) 40px 40px;gap:6px}.upload-inline,.search-row button{width:40px;min-width:40px;padding:0}.upload-inline span,.search-row button span{display:none}}