:root{--bg:#f8faf9;--paper:#fff;--ink:#202c28;--muted:#7b8680;--line:#e5ebe7;--green:#19765b;--green-soft:#edf6f0;--mono:Consolas,"SFMono-Regular",monospace;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--bg);font-synthesis:none}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:wait;opacity:.55}button,input,textarea,select{outline:none}button:focus-visible,a:focus-visible{outline:3px solid #6dbb9e;outline-offset:4px}input:focus,textarea:focus,select:focus{border-color:#76ad93!important;box-shadow:0 0 0 3px #19765b0c}[hidden]{display:none!important}.header{background:#ffffffc9;border-bottom:1px solid var(--line)}.header-inner{height:84px;max-width:1184px;padding:0 32px;margin:auto;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:11px;font-size:20px;font-weight:750;letter-spacing:-.5px}.brand-icon{display:grid;place-items:center;width:35px;height:35px;border-radius:11px;background:var(--green);color:#fff;font:800 26px var(--mono);letter-spacing:-5px;padding-right:5px}.brand-tag{font:10px var(--mono);font-weight:500;letter-spacing:1.5px;color:#87948c;border-left:1px solid var(--line);padding-left:12px;margin-left:3px}.header-link{font-size:13px;color:#65736b}.header-link span{margin-left:16px;color:var(--green)}main{max-width:1184px;padding:0 32px;margin:auto;min-height:calc(100vh - 180px)}.hero{padding:62px 0 46px;text-align:center}.eyebrow{font-size:12px;font-weight:500;letter-spacing:1px;color:#738378;display:flex;align-items:center;justify-content:center;gap:8px}.status-dot{display:inline-block;width:6px;height:6px;flex-shrink:0;background:#50a47f;border-radius:50%}.hero h1{font-size:46px;letter-spacing:-2px;line-height:1.3;font-weight:700;margin:19px 0 15px}.hero h1 span{color:var(--green)}.hero>p{color:#7b867e;font-size:14px;letter-spacing:.5px;margin:0}.search-wrap{max-width:540px;margin:32px auto 0;display:flex;align-items:center;gap:13px;border:1px solid #dce5df;border-radius:12px;padding:0 17px;background:var(--paper);height:54px;box-shadow:0 4px 16px #24483504}.search-wrap:focus-within{border-color:#76ad93}.search-wrap svg{flex-shrink:0;color:#8b9990}.search-wrap input{width:100%;border:0;background:transparent;font-size:13px;min-width:0;height:100%;box-shadow:none}.search-wrap input::placeholder{color:#a1aaa4}.search-wrap kbd{font:12px var(--mono);border:1px solid var(--line);border-radius:4px;padding:1px 6px;color:#98a39c}.section-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:21px;gap:12px}.filters{display:flex;gap:6px;flex-wrap:wrap}.filter{border:0;background:transparent;padding:9px 13px;border-radius:7px;font-size:12px;color:#7a877f}.filter.active{background:#e9f1ec;color:#27684f;font-weight:600}.filter span{margin-left:5px;font:10px var(--mono);opacity:.65}.section-note{font-size:11px;color:#9aa69e;letter-spacing:.5px}.tool-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.tool-card{position:relative;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:22px 21px 19px;min-height:191px;transition:border-color .18s,transform .18s,box-shadow .18s}.tool-card:hover{border-color:#9bc0ac;transform:translateY(-3px);box-shadow:0 8px 20px #25473207}.tool-card:nth-last-child(-n+2){grid-column:span 2}.card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:17px}.tool-icon{width:39px;height:39px;display:grid;place-items:center;border-radius:10px;background:var(--icon-bg,#eef4f0);color:var(--icon-color,#4d8168)}.tool-icon svg{width:21px;height:21px}.tool-number{font:10px var(--mono);color:#b8c1bb;letter-spacing:1px}.tool-card h2{font-size:15px;font-weight:600;letter-spacing:.2px;margin:0 0 8px}.tool-card p{font-size:11px;line-height:1.8;color:#89938d;margin:0 0 16px}.card-bottom{margin-top:auto;display:flex;align-items:center;justify-content:space-between}.tool-tag{color:#929e96;font:10px var(--mono);letter-spacing:.1px}.card-arrow{color:#91a397;font-size:16px}.privacy-banner{margin:29px 0 43px;padding:23px 27px;display:flex;align-items:center;gap:15px;background:#f0f5f1;border:1px solid #e4ece6;border-radius:11px}.privacy-symbol{border:1px solid #b6cebf;color:#5b8c70;display:grid;place-items:center;border-radius:50%;width:26px;height:26px;font-size:13px;flex-shrink:0}.privacy-banner strong{font-size:12px;font-weight:500;color:#5b7665}.privacy-banner p{font-size:11px;color:#93a197;margin:7px 0 0}.privacy-label{margin-left:auto;font:9px var(--mono);letter-spacing:1.7px;color:#98aa9d}footer{max-width:1184px;padding:23px 32px 30px;margin:auto;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:10px;color:#9ca69f;gap:20px}.footer-dot{margin:0 10px}.empty-state{text-align:center;padding:50px 0 60px;color:var(--muted)}.empty-state>span{font-size:40px}.empty-state h2{font-size:16px}.empty-state p{font-size:13px}.back-link{display:inline-block;font-size:12px;color:#7e8d83;margin:30px 0}.detail-heading{display:flex;gap:18px;align-items:center;margin:12px 0 32px}.detail-heading .tool-icon{width:58px;height:58px;flex-shrink:0}.detail-heading .tool-icon svg{width:29px;height:29px}.detail-heading .eyebrow{justify-content:flex-start;font-size:10px;letter-spacing:1.3px;margin-bottom:5px}.detail-heading h1{font-size:27px;letter-spacing:-.5px;margin:0 0 9px}.detail-heading p{font-size:13px;color:var(--muted);margin:0;line-height:1.7}.panel{border:1px solid var(--line);background:var(--paper);border-radius:13px;overflow:hidden;margin-bottom:20px}.toolbar{padding:16px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:67px}.toolbar label{display:flex;align-items:center;gap:8px;font-size:12px;color:#69796f}.toolbar .spacer{flex:1}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 16px;border:1px solid var(--green);border-radius:7px;background:var(--green);color:white;font-size:12px;line-height:1.3;white-space:nowrap}.btn:hover{filter:brightness(.96)}.btn.secondary{background:#fff;border-color:#dfe6e1;color:#607167}.btn.small{font-size:11px;padding:7px 12px}.btn.text{background:transparent;border-color:transparent;color:#819087;padding:8px}.editor-grid{display:grid;grid-template-columns:1fr 1fr}.editor{padding:20px 22px;min-width:0}.editor+.editor{border-left:1px solid var(--line);background:#fbfcfb}.editor-label{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:500;color:#53685a;margin-bottom:15px;min-height:27px}.editor-label span{font-size:10px;color:#a3ada6;font-weight:400}.editor textarea{width:100%;height:300px;display:block;resize:vertical;border:1px solid transparent;border-radius:6px;background:transparent;padding:9px;font:13px/1.9 var(--mono);color:#34473b;overflow-wrap:anywhere}.editor textarea::placeholder{color:#b0b9b3}.panel-note{border-top:1px solid var(--line);padding:14px 22px;font-size:11px;line-height:1.8;color:#8d9b92}.error{font-size:12px;line-height:1.8;color:#b55245;border:1px solid #ecd3cc;background:#fff7f4;padding:12px 17px;border-radius:8px;margin:0 0 18px;overflow-wrap:anywhere}.local-note{display:flex;gap:8px;align-items:center;justify-content:center;font-size:11px;color:#99a59d;margin:28px 0 50px}.field{display:flex;flex-direction:column;gap:9px;font-size:12px;color:#6e8074}.field input,.field select,.toolbar select,.input{height:40px;border:1px solid #dde6df;border-radius:7px;background:#fff;padding:0 12px;color:#34483a;min-width:0}.toolbar select{height:33px;font-size:12px}.form-body{padding:25px}.form-row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}.form-row .field{flex:1;min-width:180px}.form-row .field.narrow{flex:0 0 100px;min-width:100px}.form-section+.form-section{border-top:1px solid var(--line);padding-top:28px;margin-top:28px}.form-section h2{font-size:14px;font-weight:500;margin:0 0 18px}.result-row{display:flex;justify-content:space-between;align-items:center;gap:15px;background:#f4f8f5;border:1px solid #e6eee8;padding:12px 16px;border-radius:8px;margin-top:18px;min-height:52px}.result-value{font:13px/1.8 var(--mono);color:#417254;overflow-wrap:anywhere;white-space:pre-wrap}.hint{font-size:11px;line-height:1.9;color:#96a299;margin:15px 0 0}.clock{font:12px var(--mono);color:#5c8168}.color-layout{display:grid;grid-template-columns:220px 1fr;gap:28px;padding:28px}.color-swatch{border-radius:12px;min-height:230px;display:flex;align-items:center;justify-content:center;position:relative;background:#19765b;color:#fff;font:16px var(--mono);overflow:hidden}.color-swatch input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}.color-swatch span{pointer-events:none;text-align:center;line-height:2}.color-swatch small{font:11px sans-serif;opacity:.7}.color-fields{display:flex;flex-direction:column;gap:15px}.color-fields .field input{width:100%}.color-fields .form-row{flex-wrap:nowrap}.color-fields .form-row .field{min-width:0}.dropzone{position:relative;border:1.5px dashed #cbdcd0;border-radius:10px;background:#f8fbf9;padding:36px 20px;text-align:center;transition:background .2s}.dropzone.dragover{background:#e6f2e9;border-color:var(--green)}.dropzone .drop-icon{font-size:26px;color:#6d9b7c;margin-bottom:13px}.dropzone strong{font-size:14px;font-weight:500}.dropzone p{font-size:11px;color:#96a49b;line-height:1.8;margin-top:10px}.file-input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}.file-input:focus-visible{opacity:.2}.image-options{display:flex;gap:17px;align-items:flex-end;flex-wrap:wrap;margin:24px 0}.image-options .field{flex:1;min-width:100px}.image-options input[type=range]{padding:0;accent-color:var(--green);width:100%}.file-list{display:flex;flex-direction:column;gap:12px}.image-result{display:flex;align-items:center;gap:14px;padding:14px;background:#f9fbf9;border:1px solid var(--line);border-radius:8px}.image-result img{width:48px;height:48px;object-fit:contain;background:repeating-conic-gradient(#e5e9e6 0% 25%,#fff 0% 50%) 50%/12px 12px;border:1px solid var(--line);border-radius:5px}.image-info{min-width:0;flex:1}.image-info strong{font-size:12px;font-weight:500;display:block;overflow-wrap:anywhere}.image-info p{font-size:11px;color:#8b9c90;line-height:1.7;margin:5px 0 0}.image-info .file-error{color:#b55245}.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:#234f3c;color:#fff;font-size:12px;padding:12px 23px;border-radius:8px;box-shadow:0 5px 30px #0002;z-index:10;max-width:90%;text-align:center}.subtle-label{font-size:10px;background:#eef4ef;color:#84a08c;border-radius:4px;padding:4px 7px}.result-row .btn{flex-shrink:0}@media(min-width:1100px){.tool-grid.filtered .tool-card{grid-column:auto}}@media(max-width:1099px){.tool-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.tool-card:nth-last-child(-n+2){grid-column:auto}.tool-card:last-child{grid-column:1/-1}.tool-grid.filtered .tool-card{grid-column:auto}}@media(max-width:760px){.header-inner{height:70px;padding:0 22px}main{padding:0 22px}.hero{padding:42px 0 35px}.hero h1{font-size:36px}.hero>p{font-size:12px}.tool-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.tool-card:last-child{grid-column:auto}.tool-card{padding:18px;min-height:184px}.section-note,.privacy-label,.brand-tag{display:none}.section-bar{margin-bottom:16px}.filters{gap:2px}.filter{padding:8px 10px;font-size:11px}.privacy-banner{padding:20px;align-items:flex-start}.privacy-banner p{line-height:1.8}.editor-grid{grid-template-columns:1fr}.editor+.editor{border-left:0;border-top:1px solid var(--line)}.editor textarea{height:220px}.toolbar{padding:15px;gap:8px}.toolbar .spacer{display:none}.editor{padding:17px}.color-layout{grid-template-columns:1fr;padding:20px}.color-swatch{min-height:140px}.detail-heading{align-items:flex-start}.detail-heading h1{font-size:24px}.form-body{padding:20px}.image-result{flex-wrap:wrap}footer{padding:22px;flex-direction:column;gap:10px}.local-note{font-size:10px}.search-wrap kbd{display:none}}@media(max-width:400px){.tool-grid{grid-template-columns:1fr}.tool-card{min-height:165px}.hero h1{font-size:31px}.brand{font-size:18px}.filters{gap:0}.filter{padding:8px}.detail-heading .tool-icon{width:44px;height:44px}.form-row>.btn{width:100%}.privacy-banner{gap:10px}.image-options .btn{width:100%}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.footer-info{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}.footer-beian{white-space:nowrap}.footer-beian:hover{color:var(--green);text-decoration:underline;text-underline-offset:3px}
