:root{--color-bg: #f4f6fb;--color-surface: #ffffff;--color-text: #1f2330;--color-text-muted: #6b7280;--color-accent-start: #6366f1;--color-accent-end: #8b5cf6;--color-secondary-bg: #e5e7eb;--color-secondary-text: #374151;--radius-md: 10px;--radius-lg: 14px;--shadow-card: 0 1px 4px rgba(0, 0, 0, .08);--font-sans: -apple-system, "Inter", "Segoe UI", Roboto, sans-serif}*{margin:0;padding:0;border:0;box-sizing:border-box}body{font-family:var(--font-sans);background-color:var(--color-bg);color:var(--color-text)}.app-shell{display:flex;flex-direction:column;align-items:center;min-height:100vh;padding:16px}.app-container{width:100%;max-width:960px;background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);overflow:hidden}.unselectable{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.d-none{display:none}.mouse-crosshair{cursor:crosshair}.dropzone{background:linear-gradient(135deg,var(--color-accent-start),var(--color-accent-end));padding:32px 16px;text-align:center;color:#fff;cursor:pointer;transition:filter .15s ease}.dropzone-compact{padding:12px 16px}.dropzone-icon{background-image:url(data:image/png;base64,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);background-size:contain;background-repeat:no-repeat;background-position:center;height:64px;width:64px;margin:0 auto 12px}.dropzone-title{font-size:18px;font-weight:700;margin-bottom:4px}.dropzone-sub{font-size:13px;opacity:.85;margin-bottom:14px}.btn-browse{display:inline-block;background:rgba(255,255,255,.18);border:1.5px dashed rgba(255,255,255,.7);border-radius:var(--radius-md);padding:8px 18px;font-weight:600;font-size:13px;cursor:pointer}.btn-add-more{display:inline-block;background:white;color:var(--color-accent-start);border-radius:20px;padding:6px 16px;font-weight:600;font-size:13px;cursor:pointer;box-shadow:var(--shadow-card)}.image-section{padding:16px}.color-readout{text-align:center;font-weight:600;font-size:13px;padding:8px;border-radius:var(--radius-md);margin-bottom:14px;color:var(--color-text);border:1px solid #e5e7eb}.image-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}.image-card{background:var(--color-surface);border:1px solid #e9ebf1;border-radius:var(--radius-md);box-shadow:var(--shadow-card);overflow:hidden;position:relative}.image-card-thumb{height:220px;width:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(rgba(0,0,0,.04),rgba(0,0,0,.04)),url(/assets/bgpng.a1c83b57.png);background-size:cover}.image-card-canvas{display:block;max-width:100%;max-height:100%;width:auto;height:auto}.image-card-name{font-size:12px;color:var(--color-text-muted);text-align:center;padding:8px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.image-card-badge{position:absolute;top:8px;right:8px;background:#22c55e;color:#fff;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;box-shadow:var(--shadow-card)}.color-panel{padding:16px;border-top:1px solid #eef0f5}.color-panel-title{font-size:14px;font-weight:600;margin-bottom:12px;text-align:center;color:var(--color-text)}.color-panel-row{display:flex;gap:12px;align-items:stretch}.color-range-list{list-style:none;flex:1}.color-range-item{margin-bottom:14px}.color-range-item-header{display:flex;align-items:center;gap:8px;margin-bottom:6px}.color-range-label{border-radius:var(--radius-md);padding:4px 0;flex:1;text-align:center;font-size:12px;font-weight:700;color:#fff}.color-range-input{border:1px solid #d1d5db;border-radius:var(--radius-md);padding:4px 0;flex:1;text-align:center;font-size:12px}.color-range-input:focus{outline:2px solid var(--color-accent-start)}.color-swatch{width:60px;border-radius:var(--radius-md);border:1px solid #e5e7eb}.input-range{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:4px;outline:none;background:#e5e7eb}.input-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--color-accent-start);cursor:pointer}.input-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--color-accent-start);cursor:pointer;border:none}.bg-Red{background-color:#ef4444}.bg-Green{background-color:#22c55e}.bg-Blue{background-color:#3b82f6}.actions{display:flex;flex-wrap:wrap;gap:10px;padding:16px;border-top:1px solid #eef0f5}.btn{flex:1;min-width:140px;border-radius:var(--radius-md);padding:12px;font-size:14px;font-weight:600;cursor:pointer;text-align:center;border:none}.btn-primary{background:linear-gradient(135deg,var(--color-accent-start),var(--color-accent-end));color:#fff}.btn-primary:hover{filter:brightness(.95)}.btn-secondary{background:var(--color-secondary-bg);color:var(--color-secondary-text)}.btn-secondary:hover{filter:brightness(.97)}.btn-select{flex:0 0 90px;border-radius:var(--radius-md);border:1px solid #d1d5db;padding:12px 6px;font-size:13px}@media (max-width: 480px){.actions{flex-direction:column}.btn-select{flex:1}}.app-footer{display:flex;gap:4px;justify-content:center;padding:16px 0;font-size:13px;color:var(--color-text-muted)}.app-footer a{color:var(--color-text-muted);text-decoration:none;font-weight:600}.app-footer a:hover{color:var(--color-text)}