:root{--ink:#29273b;--muted:#888694;--accent:#7972d8;--line:#eeedf3;--bg:#fff}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.6 system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}button{cursor:pointer;border:1px solid var(--line);background:white;color:var(--ink);border-radius:9px;padding:9px 14px}button:hover{border-color:var(--accent);color:var(--accent)}button:disabled{opacity:.45;cursor:not-allowed}a{color:inherit;text-decoration:none}:focus-visible{outline:3px solid #b8b1f5;outline-offset:3px}[hidden]{display:none!important}header{height:68px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(5%,calc((100vw - 1240px)/2));gap:22px}.brand{display:flex;align-items:center;gap:9px;font-size:22px;font-weight:750;white-space:nowrap}.brand small{font-size:9px;letter-spacing:1.5px;color:var(--muted);align-self:end;margin-bottom:5px}.mark{color:var(--accent);font-size:36px;line-height:1}nav{display:flex;gap:6px}nav button{border:0;color:#777582;background:transparent;padding:9px 16px}nav .active{background:#f0edfa;color:var(--accent);font-weight:600}.privacy{font-size:12px;color:var(--muted);white-space:nowrap}.privacy i{display:inline-block;width:6px;height:6px;background:#74ad92;border-radius:50%;margin-right:7px}main{max-width:1040px;margin:auto;padding:0 24px 60px}.hero{text-align:left;padding:28px 0 18px}.eyebrow{font-size:10px;letter-spacing:2.2px;color:var(--accent);font-weight:650}h1{font-size:22px;letter-spacing:0;margin:0;font-weight:600}h1 span{color:var(--accent)}.hero p{color:var(--muted);font-size:14px;margin:0}.workspace{display:grid;grid-template-columns:1.15fr 1fr;gap:32px;align-items:start}.image-panel,.palette-panel,.tool-card{background:white;border:1px solid var(--line);border-radius:0;padding:0;border:0;box-shadow:none}.panel-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:19px;font-weight:600}.panel-top button,.image-bottom button{font-size:12px;border:0;background:transparent;padding:0;color:var(--accent)}.step{font-size:10px;color:var(--accent);background:#f0edfa;border-radius:5px;padding:4px 6px;margin-right:7px}#drop{position:relative;min-height:300px;display:flex;align-items:center;justify-content:center;background:#fafafa;border:1.5px dashed #dcd8ed;border-radius:12px;cursor:pointer;overflow:hidden}#drop.drag{background:#ece8fc;border-color:var(--accent)}#upload{text-align:center;padding:28px}.upload-icon{margin:auto;width:56px;height:56px;border-radius:17px;background:#ede9fa;color:var(--accent);font-size:32px}#upload h2{font-size:19px;margin:18px 0 7px}#upload p{color:var(--muted);font-size:12px;margin:0 0 25px}.primary{background:var(--accent);color:#fff;border-color:var(--accent)}.primary:hover{background:#6962c7;color:#fff}#upload .primary{display:inline-block;border-radius:8px;padding:10px 30px}#upload small{display:block;color:#aaa7b3;font-size:10px;margin-top:19px}canvas{display:block;max-width:100%;max-height:400px;width:auto;height:auto;cursor:crosshair}#image-tip{position:absolute;bottom:12px;background:#29273bb5;color:white;border-radius:6px;font-size:10px;padding:5px 12px;pointer-events:none}.image-bottom{display:flex;gap:10px;justify-content:space-between;color:var(--muted);font-size:10px;margin-top:15px}#image-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.image-bottom button{white-space:nowrap}#picked{margin-top:14px}.picked-swatch{display:inline-block;width:25px;height:25px;vertical-align:middle;border-radius:6px;margin-right:8px;border:1px solid #ccc}select{border:1px solid var(--line);background:#fff;border-radius:6px;padding:5px 8px;font-size:12px;color:var(--ink)}.palette{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.swatch{padding:0;border-radius:9px;overflow:hidden;text-align:left;min-width:0}.swatch-color{height:88px;display:block}.swatch-text{display:block;padding:10px 5px;font-size:10px;font-weight:600;text-align:center}.swatch-text small{display:block;font-size:9px;color:var(--muted);font-weight:400;margin-top:3px}.muted{font-size:11px;color:var(--muted);margin:16px 0}.actions{display:flex;gap:9px;margin:17px 0}.actions button{font-size:12px;flex:1}.export{border:1px solid var(--line);border-radius:9px;overflow:hidden}.export-top{display:flex;align-items:center;justify-content:space-between;background:#faf9fc;padding:9px 13px;color:var(--muted);font-size:10px}.export-top select{margin-left:6px}.export-top button{font-size:11px;border:0;background:none;padding:0;color:var(--accent)}pre{font:11px/1.8 ui-monospace,Consolas,monospace;margin:0;padding:14px 17px;overflow:auto;max-height:190px;color:#706988;white-space:pre-wrap}footer{max-width:992px;margin:20px auto;padding:18px 0;border-top:1px solid var(--line);color:var(--muted);font-size:11px}footer .brand{font-size:16px;color:var(--accent)}footer small{font-size:10px}.tool-card{max-width:none;margin:auto;padding:0}.controls{display:flex;align-items:center;flex-wrap:wrap;gap:24px;margin-bottom:24px}.controls label{display:flex;align-items:center;gap:10px;font-size:12px}.controls input[type=color]{height:38px;width:52px;padding:3px;background:white;border:1px solid var(--line);border-radius:6px;cursor:pointer}.controls input:not([type=color]){width:110px;padding:8px;border:1px solid var(--line);border-radius:6px}.generated{display:flex;gap:12px}.generated .swatch{flex:1}.generated .swatch-color{height:170px}.mockup{margin-top:28px;border-radius:12px;padding:35px}.mockup>span{font-size:10px;letter-spacing:2px}.mockup h2{font-size:28px}.mockup button{background:var(--preview-primary);color:var(--preview-button-text);border:0}#contrast-preview{padding:30px;border-radius:12px}#contrast-preview h2{font-size:28px}#ratio{font-size:42px;font-weight:700;margin:15px 0;color:var(--accent)}.checks{display:flex;flex-wrap:wrap;gap:12px}.checks span{padding:10px 15px;background:#f5f4f9;border-radius:8px;font-size:12px}.checks .pass{color:#328369;background:#eff8f2}.checks .fail{color:#ad5d56;background:#fbf1ef}.conversion-row{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:15px 0;gap:12px}.conversion-row code{font-size:13px}.conversion-row b{width:55px;color:var(--muted);font-size:12px}.conversion-row button{font-size:11px}.guide h2{font-size:18px;color:var(--accent);margin-top:24px}.guide p{color:#777482}#toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);background:#29273b;color:white;padding:10px 22px;border-radius:9px;font-size:12px;opacity:0;transition:opacity .15s;pointer-events:none;max-width:90vw;z-index:10}#toast.show{opacity:1}@media(max-width:900px){header{height:auto;min-height:76px;flex-wrap:wrap;padding:18px 24px;gap:14px}nav{order:3;width:100%;overflow:auto}nav button{white-space:nowrap;flex:1;font-size:12px}.brand small{display:none}.workspace{grid-template-columns:1fr}.hero{padding-top:24px}footer{margin:0 24px;gap:14px}.swatch-color{height:110px}.generated{flex-wrap:wrap}.generated .swatch{min-width:100px}.generated .swatch-color{height:110px}}@media(max-width:480px){main{padding:0 16px 40px}.image-panel,.palette-panel{padding:0}#drop{min-height:280px}.hero p{font-size:12px}footer>span{display:none}.tool-card{padding:0}.controls{gap:14px}.conversion-row code{font-size:11px}.palette{gap:5px}.swatch-text{font-size:9px;padding:8px 2px}}

.export details{border-top:1px solid var(--line)}.export summary{cursor:pointer;padding:8px 13px;font-size:11px;color:var(--muted)}.brand{font-size:19px}.mark{font-size:28px}nav .active{background:transparent;color:var(--accent)}.swatch{border-radius:5px}.workspace{margin-bottom:36px}@media(max-width:900px){header{min-height:64px;padding:14px 24px;gap:8px}nav{gap:0}nav button{padding:8px 10px}footer{margin:20px 24px}.workspace{gap:26px}}

#language{max-width:160px;font-size:12px;flex-shrink:0}header{gap:14px}.privacy{margin-left:auto}@media(max-width:900px){#language{max-width:145px}header{height:auto}}@media(max-width:480px){header{padding:12px 16px}.privacy{display:none}#language{margin-left:auto}nav button{font-size:11px;padding:8px 5px}}