.mosaic-page{--fg:#1a1a1a;--muted:#6b7280;--bg:#fafafa;--surface:#fff;--surface-2:#f3f4f6;--border:#e5e7eb;--border-strong:#9ca3af;--accent:#2563eb;--accent-hover:#1d4ed8;--success:#10b981;--warning:#f59e0b;--danger:#ef4444;color:var(--fg);background:var(--bg);min-height:100vh;padding:16px}.mosaic-page *{box-sizing:border-box}.mosaic-topbar{background:var(--surface);border:1px solid var(--border);border-radius:12px;justify-content:space-between;align-items:center;gap:12px;max-width:1200px;margin:0 auto 20px;padding:10px 16px;display:flex}.mosaic-topbar-left{align-items:center;gap:12px;display:flex}.mosaic-back{border:1px solid var(--border);cursor:pointer;color:var(--fg);background:0 0;border-radius:8px;padding:6px 12px;font-size:14px}.mosaic-back:hover{background:var(--surface-2)}.mosaic-title{align-items:center;gap:8px;margin:0;font-size:18px;font-weight:600;display:inline-flex}.mosaic-title-help{color:var(--muted);opacity:.6;align-items:center;text-decoration:none;transition:opacity .15s,color .15s;display:inline-flex}.mosaic-title-help:hover{opacity:1;color:var(--accent)}.mosaic-subtitle{color:var(--muted);margin:0;font-size:13px}.mosaic-main{max-width:1200px;margin:0 auto}.mosaic-dropzone{border:2px dashed var(--border-strong);text-align:center;background:var(--surface);cursor:pointer;border-radius:16px;padding:48px 24px;transition:background .15s,border-color .15s}.mosaic-dropzone.drag{border-color:var(--accent);background:#eff6ff}.mosaic-dropzone-icon{margin-bottom:12px;font-size:48px}.mosaic-dropzone-hint{color:var(--muted);margin-top:8px;font-size:14px}.mosaic-faq{background:var(--surface);border:1px solid var(--border);border-radius:12px;margin-top:24px;padding:20px 24px}.mosaic-faq h3{margin:16px 0 6px;font-size:16px;font-weight:600}.mosaic-faq h3:first-child{margin-top:0}.mosaic-faq p{color:var(--fg);margin:0;font-size:14px;line-height:1.6}.mosaic-crop-controls{background:var(--surface);border:1px solid var(--border);border-radius:12px;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:16px;padding:12px 16px;display:flex}.mosaic-crop-controls label{color:var(--muted);font-size:14px}.mosaic-crop-controls input[type=number],.mosaic-crop-controls select{border:1px solid var(--border);background:var(--surface);width:80px;color:var(--fg);border-radius:6px;padding:6px 8px;font-size:14px}.mosaic-crop-controls select{width:auto}.mosaic-crop-wrap{background:var(--surface);border:1px solid var(--border);border-radius:12px;max-height:75vh;padding:16px;overflow:hidden}.mosaic-crop-wrap img{max-width:100%;display:block}.mosaic-btn{border:1px solid var(--border);background:var(--surface);color:var(--fg);cursor:pointer;border-radius:8px;align-items:center;gap:6px;padding:8px 16px;font-size:14px;transition:background .12s,border-color .12s;display:inline-flex}.mosaic-btn:hover{background:var(--surface-2)}.mosaic-btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}.mosaic-btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.mosaic-btn-success{background:var(--success);color:#fff;border-color:var(--success)}.mosaic-btn-success:hover{filter:brightness(.92)}.mosaic-btn-danger{background:var(--surface);color:var(--danger);border-color:var(--danger)}.mosaic-btn-danger:hover{background:#fef2f2}.mosaic-btn:disabled{opacity:.5;cursor:not-allowed}.mosaic-method-section{margin-bottom:28px}.mosaic-method-title{align-items:center;gap:8px;margin:0 0 8px;font-size:16px;font-weight:600;display:flex}.mosaic-canvas-grid{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.mosaic-canvas-card{background:var(--surface);cursor:pointer;border:2px solid #0000;border-radius:10px;flex-direction:column;align-items:center;gap:4px;padding:6px;transition:transform .15s,border-color .15s,box-shadow .15s;display:flex}.mosaic-canvas-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 12px #00000014}.mosaic-canvas-card canvas{image-rendering:pixelated;border:1px solid var(--border);border-radius:6px;display:block}.mosaic-canvas-card-caption{color:var(--muted);font-variant-numeric:tabular-nums;font-size:11px}.mosaic-adjust{grid-template-columns:1fr 320px;gap:16px;display:grid}@media (max-width:900px){.mosaic-adjust{grid-template-columns:1fr}}.mosaic-adjust-preview{background:var(--surface);border:1px solid var(--border);border-radius:12px;flex-direction:column;align-items:center;gap:12px;padding:16px;display:flex}.mosaic-adjust-preview-row{flex-wrap:wrap;justify-content:center;gap:16px;width:100%;display:flex}.mosaic-adjust-preview img,.mosaic-adjust-preview canvas{border:1px solid var(--border);border-radius:8px;max-width:48%;height:auto;display:block}.mosaic-adjust-preview canvas{image-rendering:pixelated}.mosaic-panel{background:var(--surface);border:1px solid var(--border);border-radius:12px;flex-direction:column;gap:10px;padding:16px;display:flex}.mosaic-panel h4{color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin:0 0 4px;font-size:13px;font-weight:600}.mosaic-panel hr{border:none;border-top:1px solid var(--border);margin:4px 0}.mosaic-fx-row{grid-template-columns:80px 46px 1fr 28px;align-items:center;gap:6px;font-size:12px;display:grid}.mosaic-fx-row span.fx-label{color:var(--muted)}.mosaic-fx-row span.fx-val{text-align:right;font-variant-numeric:tabular-nums;color:var(--fg)}.mosaic-fx-row input[type=range]{width:100%}.mosaic-fx-row button.fx-reset{border:1px solid var(--border);cursor:pointer;color:var(--muted);background:0 0;border-radius:4px;padding:2px 4px;font-size:10px}.mosaic-range-row{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.mosaic-range-row input[type=number]{border:1px solid var(--border);text-align:center;border-radius:4px;width:60px;padding:4px 6px;font-size:13px}.mosaic-range-swatch{vertical-align:middle;border:1px solid var(--border);border-radius:3px;width:16px;height:16px;margin-right:4px;display:inline-block}.mosaic-progress{background:var(--surface-2);border-radius:2px;height:4px;overflow:hidden}.mosaic-progress>div{background:var(--accent);height:100%;transition:width .2s}.mosaic-palette-table{border-collapse:collapse;background:var(--surface);border:1px solid var(--border);border-radius:12px;width:100%;overflow:hidden}.mosaic-palette-table th,.mosaic-palette-table td{border-bottom:1px solid var(--border);text-align:left;padding:10px 12px;font-size:14px}.mosaic-palette-table th{background:var(--surface-2);color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-size:11px;font-weight:600}.mosaic-palette-table tr.disabled{opacity:.4}.mosaic-palette-table input[type=text]{border:1px solid var(--border);border-radius:4px;width:100%;padding:4px 6px;font-size:14px}.mosaic-palette-table input[type=color]{border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:4px;width:40px;height:28px;padding:0}.mosaic-palette-table input[type=checkbox]{cursor:pointer;width:18px;height:18px}.mosaic-checkbox-row{cursor:pointer;align-items:center;gap:8px;font-size:13px;display:flex}.mosaic-checkbox-row input{cursor:pointer}.mosaic-cropper-note{color:var(--muted);text-align:center;margin-top:8px;font-size:12px}