: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.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}.pill.flow{color:#067647;background:#ecfdf3}.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}.grid-editor{border:1px solid var(--border);background:#fafbff;border-radius:12px;margin-top:4px;padding:14px}.editor-toolbar{flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px;display:flex}.editor-title{margin-right:auto;font-size:14px;font-weight:600}.tools{flex-wrap:wrap;gap:6px;display:flex}.tool{border:1px solid var(--border);cursor:pointer;background:#fff;border-radius:8px;padding:6px 10px;font-size:13px}.tool:hover{border-color:var(--accent)}.tool.active{background:var(--accent);color:#fff;border-color:var(--accent)}.tool:disabled{opacity:.4;cursor:default}.editor-actions{gap:8px;margin-left:auto;display:flex}.editor-body{flex-wrap:wrap;align-items:flex-start;gap:14px;display:flex}.editor-canvas{border:1px solid var(--border);cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none;background:#fff;border-radius:8px}.color-panel{flex:180px;min-width:160px}.color-panel-title{margin-bottom:8px;font-size:13px}.selected-code{background:var(--accent);color:#fff;border-radius:6px;padding:2px 8px;font-family:ui-monospace,monospace;font-weight:700}.swatches{flex-wrap:wrap;gap:5px;max-height:320px;padding:4px;display:flex;overflow-y:auto}.swatch-btn{width:22px;height:22px;box-shadow:0 0 0 1px var(--border);cursor:pointer;border:2px solid #fff;border-radius:6px;padding:0}.swatch-btn:hover{transform:scale(1.15)}.swatch-btn.selected{box-shadow:0 0 0 2px var(--accent), 0 0 0 4px #4f6ef240;transform:scale(1.1)}.scene-row{flex-wrap:wrap;gap:8px;margin-bottom:4px;display:flex}.scene-btn{border:1px solid var(--border);cursor:pointer;background:#fff;border-radius:10px;align-items:center;gap:6px;padding:8px 14px;font-size:14px;transition:all .15s;display:flex}.scene-btn:hover{border-color:var(--accent);background:#f0f4ff;transform:translateY(-1px)}.scene-emoji{font-size:18px}.scene-label{font-weight:500}.ba-toggle{border:1px solid var(--border);background:#f3f4f6;border-radius:10px;gap:4px;width:fit-content;margin-bottom:8px;padding:3px;display:flex}.ba-toggle button{cursor:pointer;color:var(--muted);background:0 0;border:none;border-radius:8px;padding:5px 14px;font-size:13px}.ba-toggle button.active{color:var(--accent);background:#fff;font-weight:600;box-shadow:0 1px 3px #0000001a}.brand-switch-row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.brand-switch-row select{border:1px solid var(--border);border-radius:8px;padding:5px 8px;font-size:13px}.compare-link{cursor:pointer;color:var(--accent);font-size:13px;text-decoration:underline}.compare-panel{border:1px solid var(--border);background:#fafbff;border-radius:12px;max-height:340px;margin-top:10px;padding:12px;overflow-y:auto}.compare-head{flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:8px;font-size:14px;display:flex}.compare-head select{border:1px solid var(--border);border-radius:8px;padding:4px 8px;font-size:13px}.compare-table{font-size:12px}.compare-table td{padding:5px 8px}.share-panel{border:1px dashed var(--accent);background:#f5f7ff;border-radius:12px;flex-wrap:wrap;align-items:flex-start;gap:14px;margin-top:12px;padding:14px;display:flex}.share-info{flex:260px}.share-info strong{font-size:15px}.share-row{gap:8px;margin-top:10px;display:flex}.share-row input{border:1px solid var(--border);background:#fff;border-radius:8px;flex:1;min-width:0;padding:9px 10px;font-size:13px}.share-qr{border:1px solid var(--border);background:#fff;border-radius:10px;width:132px;height:132px}.hero-nav{justify-content:center;gap:10px;margin-top:12px;display:flex}.hero-nav a{color:var(--accent);border:1px solid var(--border);background:#fff;border-radius:20px;padding:6px 16px;font-size:14px;text-decoration:none}.hero-nav a:hover{border-color:var(--accent)}.focus-mode{border:1px solid var(--border);background:#fafbff;border-radius:12px;margin-top:4px;padding:14px}.focus-head{flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:12px;display:flex}.focus-progress{flex:220px;align-items:center;gap:10px;display:flex}.progress-bar{background:#e5e7eb;border-radius:6px;flex:1;height:10px;overflow:hidden}.progress-fill{background:linear-gradient(90deg,#34d399,#059669);border-radius:6px;height:100%;transition:width .2s}.progress-text{white-space:nowrap;font-size:13px;font-weight:600}.stock-panel{border:1px solid var(--border);background:#fafbff;border-radius:12px;margin-top:12px;padding:12px}.stock-head{flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:8px;font-size:14px;display:flex}.stock-input{border:1px solid var(--border);border-radius:8px;width:76px;padding:5px 8px;font-size:13px}.stock-missing{color:#dc2626;font-weight:600}.stock-ok{color:#059669;font-weight:600}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}@media (width<=860px){select,input[type=range],input[type=color],.text-input{font-size:16px}.btn-row .cta{flex:auto}}@media (width<=480px){.page{padding:16px 12px 24px}.hero{margin-bottom:18px}.hero h1{font-size:23px}.hero .sub{font-size:13.5px;line-height:1.6}.quota-badge{padding:4px 12px;font-size:12px}.card{border-radius:14px;padding:16px}.mode-tab{padding:10px 4px;font-size:13px}.row{flex-direction:column;gap:12px}.pattern-wrap,.pattern{flex-basis:100%;min-width:0}.usage{flex-basis:100%}.form .cta{bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:20;padding:14px;font-size:16px;position:sticky;box-shadow:0 6px 20px #4f6ef259}.swatch-btn{width:28px;height:28px}.text-input{font-size:16px}.result-head{flex-direction:column;align-items:flex-start}.btn-row{width:100%}.btn-row .cta{flex:1;padding:12px 8px;font-size:14px}.plan{padding:16px 12px}.plan-price{font-size:24px}button{-webkit-tap-highlight-color:transparent}}