:root{--bg1:#f5f7fb;--bg2:#e8eef9;--card:#fff;--ink:#1f2937;--muted:#6b7280;--accent:#4f6ef2;--accent-dark:#3b55d9;--border:#e5e9f2;--radius:16px;--shadow:0 10px 30px #1f293714}*{box-sizing:border-box}body{color:var(--ink);background:linear-gradient(160deg, var(--bg1) 0%, var(--bg2) 60%, #dde7fa 100%);min-height:100vh;margin:0;font-family:-apple-system,BlinkMacSystemFont,PingFang SC,Segoe UI,Microsoft YaHei,sans-serif}.page{max-width:1080px;margin:0 auto;padding:32px 20px 40px}.hero{text-align:center;margin-bottom:28px}.hero h1{letter-spacing:-.5px;background:linear-gradient(90deg,#3b55d9,#7a5af5);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin:0 0 8px;font-size:32px}.sub{color:var(--muted);margin:0;font-size:15px}.quota-badge{color:var(--accent-dark);background:#eef2ff;border-radius:999px;margin-top:10px;padding:5px 14px;font-size:13px;font-weight:500;display:inline-block}.quota-badge.low{color:#b91c1c;background:#fef2f2}.btn-row{flex-wrap:wrap;gap:8px;display:flex}.cta.ghost{color:var(--accent);border:1px solid var(--accent);background:#fff;font-weight:500}.stat-row{margin-top:4px;font-size:13px}.stat-row strong{color:var(--ink)}.plans{margin-top:20px}.plan-grid{grid-template-columns:repeat(3,1fr);gap:12px;margin-top:8px;display:grid}@media (width<=700px){.plan-grid{grid-template-columns:1fr}}.plan{border:1px solid var(--border);text-align:center;background:#fafbfe;border-radius:12px;padding:14px}.plan.hot{border-color:var(--accent);background:linear-gradient(#eef2ff,#fff);box-shadow:0 4px 14px #4f6ef226}.plan h3{justify-content:center;align-items:center;gap:6px;margin:0 0 6px;font-size:14px;display:flex}.plan-tag{background:var(--accent);color:#fff;border-radius:999px;padding:1px 8px;font-size:10px}.plan-price{color:var(--accent-dark);font-size:26px;font-weight:700}.plan-times{margin-top:4px;font-size:14px}.plan-per{color:var(--muted);margin-top:2px;font-size:12px}.plan-note{color:#9ca3af;margin:12px 0 0;font-size:12px}.layout{grid-template-columns:380px 1fr;align-items:start;gap:20px;display:grid}@media (width<=860px){.layout{grid-template-columns:1fr}}.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}.card h2{color:var(--accent-dark);margin:0 0 14px;font-size:15px;font-weight:600}.mode-tabs{background:#f4f6fb;border-radius:12px;gap:8px;margin-bottom:18px;padding:4px;display:flex}.mode-tab{color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:9px;flex:1;padding:9px 8px;font-size:14px;font-weight:600;transition:background .2s,color .2s}.mode-tab.active{color:var(--accent-dark);background:#fff;box-shadow:0 2px 8px #1f29371a}.text-input{border:1px solid var(--border);resize:vertical;border-radius:12px;outline:none;width:100%;padding:12px;font-family:inherit;font-size:15px;transition:border-color .2s}.text-input:focus{border-color:var(--accent)}.hint{color:#9ca3af;margin-top:6px;font-size:12px;display:block}.color-row{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.color-row input[type=color]{border:1px solid var(--border);cursor:pointer;background:#fff;border-radius:8px;width:36px;height:30px;padding:2px}.swatch-btn{cursor:pointer;border:2px solid #00000014;border-radius:6px;width:24px;height:24px;padding:0;transition:transform .1s,box-shadow .1s}.swatch-btn:hover{transform:scale(1.1)}.swatch-btn.active{box-shadow:0 0 0 2px var(--accent)}.dropzone{border:2px dashed var(--border);cursor:pointer;background:#fafbfe;border-radius:12px;justify-content:center;align-items:center;min-height:150px;transition:border-color .2s,background .2s;display:flex;overflow:hidden}.dropzone:hover{border-color:var(--accent);background:#f2f5ff}.dropzone.filled{border-style:solid}.thumb{object-fit:contain;width:100%;max-height:200px}.dz-hint{text-align:center;color:var(--muted);padding:20px}.dz-icon{margin-bottom:6px;font-size:34px;display:block}.dz-hint p{margin:0 0 4px;font-size:14px}.dz-hint small{color:#9ca3af}.link-btn{color:var(--accent);cursor:pointer;background:0 0;border:none;margin-top:10px;padding:0;font-size:13px}.form{flex-direction:column;gap:12px;display:flex}.form label{color:var(--muted);flex-direction:column;gap:6px;font-size:13px;display:flex}.row{gap:10px;display:flex}.row label{flex:1}.toggles{background:#f7f9fe;border-radius:10px;flex-direction:column;gap:8px;padding:10px 12px;display:flex}.check{color:var(--ink);cursor:pointer;align-items:center;gap:8px;font-size:13px;display:flex;flex-direction:row!important}.check input{width:16px;height:16px;accent-color:var(--accent)}.range-val{color:var(--accent-dark);font-size:12px;font-weight:600}input[type=range]{width:100%;accent-color:var(--accent)}select{border:1px solid var(--border);color:var(--ink);background:#fff;border-radius:10px;outline:none;padding:9px 10px;font-size:14px;transition:border-color .2s}select:focus{border-color:var(--accent)}.cta{background:linear-gradient(90deg, var(--accent), #7a5af5);color:#fff;cursor:pointer;border:none;border-radius:12px;margin-top:6px;padding:12px;font-size:15px;font-weight:600;transition:transform .1s,opacity .2s}.cta:hover{opacity:.92;transform:translateY(-1px)}.cta:disabled{opacity:.5;cursor:not-allowed;transform:none}.cta.small{margin-top:0;padding:8px 14px;font-size:13px}.error{color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;border-radius:10px;margin-top:12px;padding:10px 12px;font-size:13px}.empty{color:var(--muted);text-align:center;padding:60px 10px}.empty .hint{color:#9ca3af;margin-top:6px;font-size:13px}.result-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px;display:flex}.pill{color:var(--accent-dark);background:#eef2ff;border-radius:999px;margin-left:8px;padding:2px 10px;font-size:12px;font-weight:500;display:inline-block}.meta{color:var(--muted);width:100%;font-size:12px}.result-body{flex-wrap:wrap;gap:18px;display:flex}.pattern{border:1px solid var(--border);min-width:260px;max-width:100%;image-rendering:pixelated;background:#fff;border-radius:12px;flex:320px}.pattern-wrap{flex:320px;min-width:260px}.pattern.zoomable{cursor:zoom-in;transition:transform .15s}.pattern.zoomable:hover{transform:scale(1.01)}.zoom-hint{color:#9ca3af;text-align:center;margin-top:6px;font-size:12px;display:block}.usage{flex:0 260px}.usage h3{margin:0 0 8px;font-size:14px}table{border-collapse:collapse;width:100%;font-size:13px}th,td{text-align:left;border-bottom:1px solid var(--border);padding:6px 8px}th{color:var(--muted);font-size:12px;font-weight:500}.swatch{vertical-align:middle;border:1px solid #0000001a;border-radius:4px;width:16px;height:16px;display:inline-block}.foot{text-align:center;color:#9ca3af;margin-top:32px;font-size:12px}