:root{--bg:#f6f7f9;--surface:#ffffff;--border:#e3e6ea;--text:#1a202c;--text-muted:#5f6b7a;--accent:#2563eb;--accent-hover:#1d4ed8;--danger:#dc2626;--radius:12px}*{box-sizing:border-box;margin:0;padding:0}body,html{min-height:100%}body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}.container{max-width:960px;margin:0 auto;padding:48px 24px 80px}.header{text-align:center;margin-bottom:40px}.header h1{font-size:2rem;font-weight:700;letter-spacing:-.02em}.header p{margin-top:8px;color:var(--text-muted);font-size:1.05rem}.dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:56px 24px;background:var(--surface);border:2px dashed var(--border);border-radius:var(--radius);cursor:pointer;text-align:center;transition:border-color .15s ease,background-color .15s ease}.dropzone.drag-over,.dropzone:hover{border-color:var(--accent);background:#f0f5ff}.dropzone .icon{font-size:2.5rem}.dropzone strong{font-size:1.1rem}.dropzone span{color:var(--text-muted);font-size:.9rem}.error{background:#fef2f2;border:1px solid #fecaca;border-radius:8px;color:var(--danger)}.error,.notice{margin-top:16px;padding:12px 16px;font-size:.95rem}.notice{background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;color:#1d4ed8}.options{flex-wrap:wrap;gap:24px;margin-top:24px;padding:16px 20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}.option,.options{display:flex;align-items:center}.option{gap:10px;font-size:.95rem}.option label{color:var(--text-muted);white-space:nowrap}.detail-toggle,.gradient-toggle{display:inline-flex;align-items:center;gap:6px;cursor:pointer}.detail-toggle input,.gradient-toggle input{cursor:pointer}.option select{padding:6px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font-size:.9rem;cursor:pointer}.option input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}.previews{display:grid;grid-template-columns:1fr 1fr;grid-gap:20px;gap:20px;margin-top:24px}.previews:has(>:nth-child(3)){grid-template-columns:repeat(3,1fr)}@media (max-width:700px){.previews{grid-template-columns:1fr}}.preview-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}.preview-card .title{display:flex;justify-content:space-between;align-items:baseline;padding:12px 16px;border-bottom:1px solid var(--border);font-weight:600;font-size:.95rem}.preview-card .title small{color:var(--text-muted);font-weight:400}.preview-card .frame{flex:1 1;display:flex;align-items:center;justify-content:center;min-height:280px;padding:16px;background-image:linear-gradient(45deg,#eceff3 25%,transparent 0),linear-gradient(-45deg,#eceff3 25%,transparent 0),linear-gradient(45deg,transparent 75%,#eceff3 0),linear-gradient(-45deg,transparent 75%,#eceff3 0);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}.preview-card img{max-width:100%;max-height:320px;display:block}.zoom-toolbar{display:flex;align-items:center;gap:8px;margin-top:24px;flex-wrap:wrap}.zoom-btn{min-width:34px;height:30px;padding:0 10px;border:1px solid var(--border);border-radius:6px;background:var(--surface);font-size:1rem;line-height:1;cursor:pointer;color:inherit}.zoom-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.zoom-btn:disabled{opacity:.45;cursor:default}.zoom-reset{font-size:.85rem}.zoom-level{min-width:3.4em;text-align:center;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;font-size:.9rem}.zoom-hint,.zoom-level{color:var(--text-muted)}.zoom-hint{margin-left:auto;font-size:.78rem}.zoom-stage{position:relative;width:100%;height:320px;overflow:hidden;touch-action:none;cursor:-webkit-grab;cursor:grab;-webkit-user-select:none;-moz-user-select:none;user-select:none}.zoom-stage:active{cursor:-webkit-grabbing;cursor:grabbing}.zoom-stage:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.zoom-content{position:absolute}.preview-card .zoom-content img{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain}.zoom-stage.zoomed img{image-rendering:pixelated}.zoom-nav{position:absolute;inset:0;pointer-events:none;z-index:2}.zoom-nav-arrow{position:absolute;font-size:15px;line-height:1;color:var(--accent);opacity:0;transition:opacity .18s ease,transform .15s ease;text-shadow:0 0 3px rgba(0,0,0,.45)}.zoom-nav.on .zoom-nav-arrow{opacity:.22}.zoom-nav.on .zoom-nav-arrow.active{opacity:.95}.zoom-nav-arrow.up{top:6px;left:50%;transform:translateX(-50%)}.zoom-nav-arrow.down{bottom:6px;left:50%;transform:translateX(-50%)}.zoom-nav-arrow.left{left:6px;top:50%;transform:translateY(-50%)}.zoom-nav-arrow.right{right:6px;top:50%;transform:translateY(-50%)}.zoom-nav.on .zoom-nav-arrow.down.active,.zoom-nav.on .zoom-nav-arrow.up.active{transform:translateX(-50%) scale(1.45)}.zoom-nav.on .zoom-nav-arrow.left.active,.zoom-nav.on .zoom-nav-arrow.right.active{transform:translateY(-50%) scale(1.45)}@media (prefers-reduced-motion:reduce){.zoom-nav-arrow{transition:opacity .18s ease}}.zoom-coord{position:absolute;left:8px;bottom:8px;padding:2px 7px;font-size:.75rem;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;color:#fff;background:rgba(20,24,33,.82);border-radius:5px;pointer-events:none;opacity:0;transition:opacity .12s ease;z-index:3}.zoom-coord.visible{opacity:1}.spinner{width:36px;height:36px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}.status-text{color:var(--text-muted);font-size:.95rem}.conv-progress{width:min(320px,80%);display:flex;flex-direction:column;gap:8px}.conv-progress-track{position:relative;height:8px;border-radius:999px;background:var(--border);overflow:hidden}.conv-progress-fill{position:absolute;top:0;bottom:0;left:0;border-radius:999px;background-color:var(--accent);background-image:linear-gradient(90deg,var(--accent),#87a9f4);background-size:200% 100%;animation:conv-progress-shimmer 1.4s linear infinite}@keyframes conv-progress-shimmer{to{background-position:-200% 0}}.conv-progress-meta{display:flex;justify-content:space-between;font-size:.85rem;color:var(--text-muted)}.conv-progress-pct{font-feature-settings:"tnum";font-variant-numeric:tabular-nums;font-weight:600;color:var(--accent)}@media (prefers-reduced-motion:reduce){.conv-progress-fill{animation:none}}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;justify-content:center}.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:10px;border:none;font-size:1rem;font-weight:600;cursor:pointer;text-decoration:none;transition:background-color .15s ease}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-hover)}.btn-secondary{background:var(--surface);color:var(--text);border:1px solid var(--border)}.btn-secondary:hover{background:var(--bg)}.footer{margin-top:56px;text-align:center;color:var(--text-muted);font-size:.85rem}.analysis-toggle{border:none;background:none;color:var(--accent);font-size:.85rem;cursor:pointer;text-decoration:underline;padding:0}.analysis-panel{margin-top:16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.analysis-panel .title{padding:10px 16px;border-bottom:1px solid var(--border);font-weight:600;font-size:.95rem}.analysis-panel .title small{color:var(--text-muted);font-weight:400}.analysis-panel img{display:block;width:100%;height:auto}.text-patch{margin-top:24px}.tp-toggle{width:100%}.tp-body{margin-top:12px;padding:16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);display:flex;flex-direction:column;gap:12px}.tp-hint{color:var(--text-muted);font-size:.88rem}.tp-canvas{position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;border:1px solid var(--border);border-radius:8px;overflow:hidden;background-image:linear-gradient(45deg,#eceff3 25%,transparent 0),linear-gradient(-45deg,#eceff3 25%,transparent 0),linear-gradient(45deg,transparent 75%,#eceff3 0),linear-gradient(-45deg,transparent 75%,#eceff3 0);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}.tp-canvas img{display:block;width:100%;height:auto;pointer-events:none}.tp-canvas.selecting{cursor:crosshair}.tp-region{border:2px dashed var(--accent);background:rgba(37,99,235,.12)}.tp-live,.tp-region{position:absolute;pointer-events:none}.tp-live{inset:0;width:100%;height:100%}.tp-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:.92rem}.tp-row>label{color:var(--text-muted);white-space:nowrap}.tp-input{flex:1 1;min-width:160px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;font-size:.95rem}.tp-fontsearch{position:relative;flex:1 1;min-width:200px}.tp-results{position:absolute;z-index:20;top:100%;left:0;right:0;max-height:260px;overflow-y:auto;margin:4px 0 0;padding:4px;list-style:none;background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12)}.tp-results button{display:block;width:100%;text-align:left;padding:6px 10px;border:none;background:none;cursor:pointer;border-radius:6px;font-size:.95rem}.tp-results button:hover{background:var(--bg)}.tp-results small{color:var(--text-muted)}.tp-suggestions{align-items:center}.tp-chip{padding:6px 12px;border:1px solid var(--border);border-radius:999px;background:var(--surface);cursor:pointer;font-size:.9rem}.tp-chip.active{border-color:var(--accent);background:#eff6ff;color:var(--accent)}.tp-chip small{color:var(--text-muted)}.tp-row select{padding:6px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);font-size:.9rem}.tp-row input[type=range]{flex:1 1;min-width:90px;accent-color:var(--accent)}.tp-row input[type=color]{width:36px;height:28px;border:1px solid var(--border);border-radius:6px;padding:0;cursor:pointer}.tp-status{color:var(--accent);font-size:.9rem}.tp-undo{margin-top:10px;justify-content:space-between}.compare-table-wrap{margin-top:20px;overflow-x:auto}.compare-table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--border);border-radius:8px;font-size:.92rem}.compare-table td,.compare-table th{padding:10px 14px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap}.compare-table thead th{font-weight:600;color:var(--text-muted);font-size:.85rem}.compare-table tbody tr:last-child td{border-bottom:none}.compare-table td.ok{color:#15803d;font-weight:600}.compare-table td.bad{color:#b91c1c;font-weight:600}.compare-note{margin-top:10px;color:var(--text-muted);font-size:.85rem;line-height:1.5}.compare-download{margin-left:10px;font-size:.82rem;font-weight:500;color:var(--accent);text-decoration:none}.compare-download:hover{text-decoration:underline}.vinyl-layer-format{padding:0;border:0;background:none;font-family:inherit;cursor:pointer}.vinyl-layers-panel{margin-top:20px;padding:16px 20px;border:1px solid var(--border);border-radius:8px;background:var(--surface)}.source-quality-hint{margin:14px 0 0}.source-quality-hint,.vinyl-detail-hint{padding:10px 12px;border-left:3px solid var(--accent);border-radius:4px;background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--text-muted);font-size:.85rem;line-height:1.5}.vinyl-detail-hint{margin:0 0 14px}.vinyl-marks-toggle,.vinyl-trap-toggle{display:flex;align-items:center;gap:8px;font-size:.9rem;cursor:pointer;margin-bottom:12px}.vinyl-layer-list{display:flex;flex-direction:column;gap:8px}.vinyl-layer-row{display:flex;align-items:center;gap:12px;padding:6px 0;border-bottom:1px solid var(--border)}.vinyl-layer-row:last-child{border-bottom:none}.vinyl-layer-thumb{width:40px;height:40px;object-fit:contain;border:1px solid var(--border);border-radius:4px;background-image:linear-gradient(45deg,#eceff3 25%,transparent 0),linear-gradient(-45deg,#eceff3 25%,transparent 0),linear-gradient(45deg,transparent 75%,#eceff3 0),linear-gradient(-45deg,transparent 75%,#eceff3 0);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0;flex-shrink:0}.vinyl-layer-hex{font-feature-settings:"tnum";font-variant-numeric:tabular-nums;font-size:.88rem;min-width:5.5em}.vinyl-layer-fraction{color:var(--text-muted);font-size:.85rem;min-width:3em}.vinyl-layers-panel .btn-secondary{margin-top:14px}.palette-panel{margin-top:16px;padding:16px 20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}.palette-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-bottom:12px}.palette-head small{color:var(--text-muted);font-size:.85rem}.palette-count-row{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--border)}.palette-count-row label{color:var(--text-muted);font-size:.9rem}.palette-count-input{width:60px;padding:5px 8px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font-size:.9rem;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.palette-auto-btn{padding:6px 12px;border:1px solid var(--border);border-radius:999px;background:var(--bg);color:var(--text-muted);font-size:.82rem;cursor:pointer}.palette-auto-btn.active{border-color:var(--accent);color:var(--accent);background:#eff6ff;cursor:default}.palette-auto-btn:disabled{cursor:default}.palette-swatches{display:flex;flex-wrap:wrap;gap:8px}.swatch-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 9px 5px 7px;border:1px solid var(--border);border-radius:999px;cursor:pointer;font-size:.85rem;background:var(--bg);opacity:.55;transition:opacity .12s ease,border-color .12s ease}.swatch-chip.on{opacity:1;border-color:var(--accent)}.swatch-chip input[type=checkbox]{width:15px;height:15px;accent-color:var(--accent);cursor:pointer}.swatch-chip.readonly{cursor:default}.download-row{display:flex;align-items:center;gap:14px;margin-top:20px}.swatch{width:18px;height:18px;border-radius:4px;border:1px solid rgba(0,0,0,.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}.swatch-hex{letter-spacing:.01em;text-transform:uppercase}.swatch-hex,.swatch-pct{font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.swatch-pct{color:var(--text-muted)}.swatch-del{border:none;background:none;color:var(--danger);font-size:1.05rem;line-height:1;cursor:pointer;padding:0 2px}.palette-add{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}.palette-add input[type=color]{width:36px;height:30px;border:1px solid var(--border);border-radius:6px;padding:0;cursor:pointer;background:none}.palette-hex-input{width:92px;padding:6px 8px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font-size:.9rem;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;text-transform:uppercase}.palette-add-btn{padding:7px 14px;font-size:.9rem}.palette-count{color:var(--text-muted);font-size:.85rem;margin-left:auto}.mode-tabs{display:flex;gap:4px;margin-bottom:20px;padding:4px;background:var(--surface);border:1px solid var(--border);border-radius:999px;width:-moz-fit-content;width:fit-content}.mode-tab{padding:8px 20px;border:none;border-radius:999px;background:transparent;color:var(--text-muted);font-size:.92rem;font-weight:500;cursor:pointer}.mode-tab.active{background:var(--accent);color:#fff}.batch-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:20px}.batch-clear-btn{margin-left:auto;border:none;background:transparent;color:var(--text-muted);font-size:.88rem;cursor:pointer;text-decoration:underline}.batch-clear-btn:disabled{opacity:.5;cursor:default}.batch-list{display:flex;flex-direction:column;gap:8px;margin-top:16px}.batch-item{display:flex;align-items:center;gap:14px;padding:10px 14px;background:var(--surface);border:1px solid var(--border);border-radius:8px}.batch-item-thumb{width:48px;height:48px;object-fit:contain;border:1px solid var(--border);border-radius:6px;background-image:linear-gradient(45deg,#eceff3 25%,transparent 0),linear-gradient(-45deg,#eceff3 25%,transparent 0),linear-gradient(45deg,transparent 75%,#eceff3 0),linear-gradient(-45deg,transparent 75%,#eceff3 0);background-size:12px 12px;background-position:0 0,0 6px,6px -6px,-6px 0;flex-shrink:0}.batch-item-info{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1}.batch-item-name{font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.batch-item-status{font-size:.82rem;color:var(--text-muted)}.batch-item-status--done{color:#15803d}.batch-item-status--error{color:var(--danger)}.batch-item-status--processing{color:var(--accent)}.batch-item-remove{border:none;background:transparent;color:var(--text-muted);font-size:1.3rem;line-height:1;cursor:pointer;padding:0 6px;flex-shrink:0}.batch-item-remove:hover{color:var(--danger)}.cut-contour-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}.cut-bleed-input{width:64px;padding:3px 6px;border:1px solid var(--border);border-radius:4px;background:var(--surface);color:inherit;font:inherit;font-size:.85rem}.cut-contour-row .compare-note{flex-basis:100%;margin:2px 0 0}.auth-panel{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin:0 0 4px;font-size:13px;min-height:32px}.auth-input{padding:6px 10px;min-width:200px}.auth-btn,.auth-input{border:1px solid var(--border,#d6d6d6);border-radius:6px;font-size:13px}.auth-btn{padding:6px 12px;background:transparent;cursor:pointer}.auth-btn:hover:not(:disabled){background:rgba(0,0,0,.04)}.auth-btn:disabled{opacity:.55;cursor:default}.auth-email{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.75}.auth-sent{opacity:.85}.auth-error{color:#b3261e}@media (max-width:560px){.auth-panel{justify-content:flex-start}.auth-input{min-width:0;flex:1 1 160px}}.auth-btn-google{display:inline-flex;align-items:center;gap:6px}