*{box-sizing:border-box}body{margin:0;background:#f3f6fa;color:#172033;font-family:Arial,sans-serif}header{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid #dce4ef;padding:12px max(15px,calc((100% - 1250px)/2));display:flex;justify-content:space-between;align-items:center;font-size:8px;font-weight:900;color:#778398}.logo{font-size:22px;color:#1558d6;text-decoration:none}.logo span{color:#111}.hero{text-align:center;padding:38px 15px 25px}.hero span{font-size:9px;color:#1558d6;font-weight:900;letter-spacing:2px}.hero h1{font-size:clamp(30px,5vw,52px);margin:8px}.hero p{max-width:850px;margin:auto;color:#68768a;line-height:1.8;font-size:14px}.tabs{max-width:1250px;margin:auto;display:flex;gap:6px;overflow:auto;padding:5px}.tabs button{white-space:nowrap;padding:11px 14px;border:1px solid #d7dfeb;background:#fff;border-radius:9px;font-size:9px;font-weight:900;cursor:pointer}.tabs button.active{background:#1558d6;color:#fff}.tab{display:none;max-width:1250px;margin:8px auto}.tab.active{display:block}.card{background:#fff;border:1px solid #dce4ef;border-radius:17px;padding:18px;margin-bottom:12px;box-shadow:0 10px 30px #12345a0b}.card h2{font-size:18px;margin:0 0 8px}.card h3{font-size:15px;margin-top:22px}.card p{font-size:11px;color:#637085;line-height:1.9}.picker{display:grid;grid-template-columns:360px 1fr;gap:22px}.picker label{display:block;font-size:9px;font-weight:900;margin:9px 0}.picker label input[type=color]{width:100%;height:48px;padding:3px}.picker label input[type=text],.picker label input:not([type]){width:100%;height:40px;margin-top:5px;border:1px solid #d3ddeb;border-radius:8px;padding:8px}.picker label:nth-of-type(2) input{font-family:monospace}.picker>div:first-child>input{display:block;width:100%;height:40px;margin:5px 0 10px;border:1px solid #d3ddeb;border-radius:8px;padding:8px}.picker>div:first-child>button,.controls button,.name-search button{width:100%;border:0;background:#1558d6;color:#fff;border-radius:8px;padding:11px;font-size:9px;font-weight:900;cursor:pointer}#swatch{height:230px;border-radius:14px;border:1px solid #dce4ef}.row{display:grid;grid-template-columns:43px 1fr auto;gap:6px;align-items:center;margin:8px 0}.row b{font-size:8px;color:#667389}.row input{width:100%;height:38px;border:1px solid #d3ddeb;border-radius:8px;padding:8px;font:11px monospace}.row button{border:1px solid #d7dfeb;background:#fff;border-radius:8px;padding:10px;font-size:8px;font-weight:900;cursor:pointer}.result{background:#f8fafc;border:1px solid #e0e6ee;border-radius:10px;padding:12px;margin-top:12px}.result small,.name-result small{display:block;color:#7d899b;font-size:8px}.result strong,.name-result strong{display:block;font-size:20px;margin-top:4px}.card #preview{height:115px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:25px;font-weight:900}.upload{display:block;border:2px dashed #cbd7e6;border-radius:12px;padding:18px;text-align:center;background:#fafcfe;font-size:10px;font-weight:900;cursor:pointer}.upload input{display:none}.image-grid{display:grid;grid-template-columns:1.5fr .8fr;gap:14px;margin-top:14px}.canvas-box{min-height:320px;background:#edf2f7;border-radius:12px;padding:10px;display:flex;justify-content:center;align-items:center;overflow:auto}.canvas-box canvas{display:none;max-width:100%;height:auto;cursor:crosshair}.canvas-box canvas.ready{display:block}.canvas-box span{font-size:10px;color:#8994a5}.sample{border:1px solid #e1e7ef;border-radius:12px;padding:13px}.sample>#imageSwatch{height:80px;border-radius:9px;background:#e9edf3;margin-bottom:10px}.controls{display:grid;grid-template-columns:150px 1fr 1fr;gap:7px;margin-top:12px}.controls select{border:1px solid #d3ddeb;border-radius:8px;padding:8px}.controls button{width:auto}.paletteResult{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:14px}.pitem{border:1px solid #e0e6ee;border-radius:10px;overflow:hidden}.pswatch{height:100px}.pinfo{padding:8px}.pinfo b{font:10px monospace}.pinfo button{width:100%;margin-top:6px;border:1px solid #d7dfeb;background:#fff;border-radius:6px;padding:6px;font-size:8px;font-weight:900}.name-search{display:grid;grid-template-columns:1fr 180px;gap:7px}.name-search input{height:40px;border:1px solid #d3ddeb;border-radius:8px;padding:8px;font:12px monospace}.name-result{display:flex;align-items:center;gap:14px;margin-top:12px;padding:14px;border:1px solid #e0e6ee;border-radius:12px}.name-result #nameSwatch{width:90px;height:90px;border-radius:9px}.name-result code{font:10px monospace}.seo{margin-top:12px}.seo p{font-size:11px;line-height:1.9}footer{max-width:1250px;margin:auto;padding:20px 15px 40px;display:flex;justify-content:space-between;color:#788497;font-size:9px}#toast{position:fixed;right:15px;bottom:15px;background:#142039;color:#fff;padding:11px 14px;border-radius:9px;font-size:10px;opacity:0;transition:.2s}.show{opacity:1!important}@media(max-width:800px){.picker,.image-grid{grid-template-columns:1fr}.paletteResult{grid-template-columns:repeat(3,1fr)}}@media(max-width:600px){header{padding:10px 12px}.logo{font-size:18px}header>div:last-child{font-size:6px}.hero{padding:27px 10px 18px}.hero h1{font-size:32px}.hero p{font-size:12px}.tab,.card{margin:7px;padding:13px;border-radius:14px}.controls,.name-search{grid-template-columns:1fr}.paletteResult{grid-template-columns:repeat(2,1fr)}.seo{margin:7px}footer{display:block;text-align:center}footer span{display:block;margin-top:6px}}