:root{--bg-app:#f8fafc;--bg-surface:#fff;--bg-subtle:#f1f5f9;--bg-subtle-hover:#e2e8f0;--bg-active:#e2e8f0;--text-main:#0f172a;--text-secondary:#334155;--text-muted:#64748b;--text-inverse:#fff;--accent-primary:#1d4ed8;--accent-hover:#1e40af;--accent-active:#172554;--accent-subtle:#eff6ff;--accent-border:#bfdbfe;--border-light:#e2e8f0;--border-medium:#cbd5e1;--border-dark:#94a3b8;--border-focus:#1d4ed8;--status-success-bg:#f0fdf4;--status-success-text:#166534;--status-success-border:#bbf7d0;--status-error-bg:#fef2f2;--status-error-text:#991b1b;--status-error-border:#fecaca;--status-pending-bg:#f1f5f9;--status-pending-text:#475569;--status-pending-border:#cbd5e1;--status-processing-bg:#eff6ff;--status-processing-text:#1d4ed8;--status-processing-border:#bfdbfe;--space-3xs:2px;--space-2xs:4px;--space-xs:8px;--space-sm:12px;--space-md:16px;--space-lg:20px;--space-xl:28px;--space-2xl:40px;--font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;--radius-sm:4px;--radius-md:6px;--radius-lg:8px;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000000f, 0 2px 4px -2px #0000000a;--transition-fast:.15s cubic-bezier(.4, 0, .2, 1)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{font-family:var(--font-sans);background-color:var(--bg-app);color:var(--text-main);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.5}body,#root,.app-shell{flex-direction:column;min-height:100vh;display:flex}.app-container{width:100%;max-width:860px;padding:0 var(--space-md);margin:0 auto}.app-header{background-color:var(--bg-surface);border-bottom:1px solid var(--border-light);padding:var(--space-md) 0}.app-header-content{width:100%;max-width:860px;padding:0 var(--space-md);justify-content:space-between;align-items:center;gap:var(--space-sm);flex-wrap:wrap;margin:0 auto;display:flex}.app-brand{gap:var(--space-2xs);flex-direction:column;display:flex}.app-brand-title{align-items:center;gap:var(--space-xs);display:flex}.brand-name{color:var(--text-main);letter-spacing:-.02em;font-size:1.125rem;font-weight:700}.brand-separator{color:var(--text-muted);font-weight:400}.brand-tool{color:var(--accent-primary);background-color:var(--accent-subtle);border-radius:var(--radius-sm);border:1px solid var(--accent-border);padding:2px 8px;font-size:.9375rem;font-weight:600}.app-brand-desc{color:var(--text-secondary);font-size:.8125rem}.app-privacy-badge{background-color:var(--bg-subtle);border:1px solid var(--border-light);color:var(--text-secondary);border-radius:9999px;align-items:center;gap:6px;padding:4px 10px;font-size:.75rem;font-weight:500;display:inline-flex}.privacy-icon{color:var(--accent-primary);flex-shrink:0}.app-main{padding:var(--space-xl) 0 var(--space-2xl);flex:1}.psd-converter-layout{gap:var(--space-lg);flex-direction:column;display:flex}.format-settings-panel{background-color:var(--bg-surface);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:var(--space-lg);box-shadow:var(--shadow-sm)}.format-settings-row{gap:var(--space-md);flex-direction:column;display:flex}.settings-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-xs);font-size:.8125rem;font-weight:600;display:block}.format-segmented-control{gap:var(--space-xs);grid-template-columns:1fr 1fr;display:grid}.format-option{padding:var(--space-sm) var(--space-md);background-color:var(--bg-subtle);border:1px solid var(--border-light);border-radius:var(--radius-md);cursor:pointer;text-align:left;transition:all var(--transition-fast);flex-direction:column;align-items:flex-start;display:flex}.format-option:hover:not(:disabled){background-color:var(--bg-subtle-hover);border-color:var(--border-medium)}.format-option.active{background-color:var(--accent-subtle);border-color:var(--accent-primary);box-shadow:0 0 0 1px var(--accent-primary)}.format-option:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}.format-option:disabled{opacity:.6;cursor:not-allowed}.format-title{color:var(--text-main);font-size:1rem;font-weight:700}.format-option.active .format-title{color:var(--accent-primary)}.format-hint{color:var(--text-muted);margin-top:2px;font-size:.75rem}.quality-slider-group{border-top:1px solid var(--border-light);padding-top:var(--space-md);gap:var(--space-xs);flex-direction:column;display:flex}.quality-label-row{justify-content:space-between;align-items:center;display:flex}.quality-value{font-size:.9375rem;font-weight:700;font-family:var(--font-mono);color:var(--accent-primary);background-color:var(--accent-subtle);border-radius:var(--radius-sm);border:1px solid var(--accent-border);padding:2px 8px}.slider-wrapper{padding:var(--space-2xs) 0}.quality-range-input{background:var(--border-light);cursor:pointer;width:100%;height:6px;accent-color:var(--accent-primary);border-radius:3px;outline:none}.quality-range-input:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}.quality-hint{color:var(--text-muted);font-size:.75rem}.dropzone-card{background-color:var(--bg-surface);border:2px dashed var(--border-medium);border-radius:var(--radius-lg);padding:var(--space-2xl) var(--space-lg);cursor:pointer;transition:all var(--transition-fast);text-align:center;outline:none}.dropzone-card:hover:not(.disabled){border-color:var(--accent-primary);background-color:var(--bg-subtle)}.dropzone-card.drag-over{border-color:var(--accent-primary);background-color:var(--accent-subtle);box-shadow:0 0 0 4px var(--accent-border)}.dropzone-card:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px;border-color:var(--accent-primary)}.dropzone-card.disabled{opacity:.6;cursor:not-allowed}.dropzone-content{align-items:center;gap:var(--space-sm);flex-direction:column;display:flex}.dropzone-icon-box{background-color:var(--accent-subtle);border:1px solid var(--accent-border);width:52px;height:52px;color:var(--accent-primary);border-radius:50%;justify-content:center;align-items:center;display:flex}.dropzone-primary-text{color:var(--text-main);font-size:1rem}.dropzone-primary-text strong{color:var(--accent-primary)}.dropzone-secondary-text{color:var(--text-muted);margin-top:4px;font-size:.8125rem}.file-list-section{background-color:var(--bg-surface);border:1px solid var(--border-light);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden}.file-list-toolbar{padding:var(--space-sm) var(--space-md);border-bottom:1px solid var(--border-light);background-color:var(--bg-subtle);justify-content:space-between;align-items:center;gap:var(--space-xs);flex-wrap:wrap;display:flex}.file-list-summary{align-items:center;gap:var(--space-xs);color:var(--text-secondary);font-size:.875rem;display:flex}.completed-count-label{color:var(--status-success-text);font-weight:500}.file-list-actions{align-items:center;gap:var(--space-xs);display:flex}.file-items-stack{flex-direction:column;display:flex}.file-item-card{align-items:center;gap:var(--space-md);padding:var(--space-md);border-bottom:1px solid var(--border-light);background-color:var(--bg-surface);transition:background-color var(--transition-fast);grid-template-columns:56px 1fr auto;display:grid}.file-item-card:last-child{border-bottom:none}.file-item-card:hover{background-color:#fafbfc}.file-preview-box{border-radius:var(--radius-md);border:1px solid var(--border-light);background-color:var(--bg-subtle);justify-content:center;align-items:center;width:56px;height:56px;display:flex;overflow:hidden}.thumbnail-container{background-image:linear-gradient(45deg,#e2e8f0 25%,#0000 25%),linear-gradient(-45deg,#e2e8f0 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#e2e8f0 75%),linear-gradient(-45deg,#0000 75%,#e2e8f0 75%);background-position:0 0,0 5px,5px -5px,-5px 0;background-size:10px 10px;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.thumbnail-img{object-fit:contain;max-width:100%;max-height:100%}.file-icon-placeholder{color:var(--text-muted)}.file-details{flex-direction:column;gap:4px;min-width:0;display:flex}.file-header-row{align-items:baseline;gap:var(--space-xs);display:flex}.file-name{color:var(--text-main);white-space:nowrap;text-overflow:ellipsis;max-width:320px;font-size:.9375rem;font-weight:600;overflow:hidden}.file-original-size{font-size:.75rem;font-family:var(--font-mono);color:var(--text-muted);flex-shrink:0}.file-meta-row{align-items:center;gap:var(--space-xs);flex-wrap:wrap;font-size:.8125rem;display:flex}.file-result-meta{align-items:center;gap:var(--space-xs);flex-wrap:wrap;display:flex}.meta-dimension{font-family:var(--font-mono);color:var(--text-secondary);background-color:var(--bg-subtle);border-radius:var(--radius-sm);border:1px solid var(--border-light);padding:1px 6px;font-size:.75rem}.meta-output-info{font-family:var(--font-mono);color:var(--text-secondary);font-size:.75rem;font-weight:600}.processing-indicator{color:var(--accent-primary);align-items:center;gap:6px;font-size:.8125rem;display:flex}.spinner-dot{background-color:var(--accent-primary);border-radius:50%;width:8px;height:8px;animation:1s infinite alternate pulse}@keyframes pulse{0%{opacity:.5;transform:scale(.8)}to{opacity:1;transform:scale(1.2)}}.file-error-box{background-color:var(--status-error-bg);border:1px solid var(--status-error-border);border-radius:var(--radius-sm);align-items:flex-start;gap:6px;margin-top:4px;padding:6px 10px;display:flex}.error-icon{color:var(--status-error-text);flex-shrink:0;margin-top:2px}.error-message{color:var(--status-error-text);font-size:.75rem;line-height:1.4}.file-actions{align-items:center;gap:var(--space-xs);display:flex}.technical-notes-card{background-color:var(--bg-surface);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:var(--space-md) var(--space-lg);box-shadow:var(--shadow-sm)}.notes-header{align-items:center;gap:var(--space-xs);margin-bottom:var(--space-xs);color:var(--text-secondary);display:flex}.notes-icon{color:var(--accent-primary)}.notes-title{color:var(--text-main);font-size:.875rem;font-weight:600}.notes-list{gap:var(--space-xs);flex-direction:column;list-style:none;display:flex}.notes-list li{color:var(--text-secondary);padding-left:14px;font-size:.8125rem;line-height:1.45;position:relative}.notes-list li:before{content:"•";color:var(--text-muted);position:absolute;left:2px}.app-footer{border-top:1px solid var(--border-light);background-color:var(--bg-surface);padding:var(--space-lg) 0;text-align:center;margin-top:auto}.app-footer-content{max-width:860px;padding:0 var(--space-md);flex-direction:column;gap:4px;margin:0 auto;display:flex}.app-footer-text{color:var(--text-secondary);font-size:.8125rem}.app-footer-sub{color:var(--text-muted);font-size:.75rem}.app-btn{border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;border:1px solid #0000;justify-content:center;align-items:center;gap:6px;font-family:inherit;font-weight:500;display:inline-flex}.app-btn:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}.app-btn:disabled{opacity:.5;cursor:not-allowed}.app-btn-sm{padding:5px 10px;font-size:.8125rem}.app-btn-md{padding:8px 16px;font-size:.875rem}.app-btn-primary{background-color:var(--accent-primary);color:var(--text-inverse);border-color:var(--accent-primary)}.app-btn-primary:hover:not(:disabled){background-color:var(--accent-hover);border-color:var(--accent-hover)}.app-btn-primary:active:not(:disabled){background-color:var(--accent-active)}.app-btn-secondary{background-color:var(--bg-surface);color:var(--text-main);border-color:var(--border-medium)}.app-btn-secondary:hover:not(:disabled){background-color:var(--bg-subtle);border-color:var(--border-dark)}.app-btn-ghost{color:var(--text-muted);background-color:#0000}.app-btn-ghost:hover:not(:disabled){background-color:var(--bg-subtle);color:var(--text-main)}.app-btn-danger{background-color:var(--status-error-bg);color:var(--status-error-text);border-color:var(--status-error-border)}.app-btn-danger:hover:not(:disabled){background-color:#fee2e2}.app-badge{border-radius:var(--radius-sm);text-transform:uppercase;letter-spacing:.04em;border:1px solid #0000;align-items:center;padding:2px 7px;font-size:.6875rem;font-weight:600;display:inline-flex}.app-badge-neutral{background-color:var(--status-pending-bg);color:var(--status-pending-text);border-color:var(--status-pending-border)}.app-badge-success{background-color:var(--status-success-bg);color:var(--status-success-text);border-color:var(--status-success-border)}.app-badge-error{background-color:var(--status-error-bg);color:var(--status-error-text);border-color:var(--status-error-border)}.app-badge-info{background-color:var(--status-processing-bg);color:var(--status-processing-text);border-color:var(--status-processing-border)}@media (width<=640px){.app-header-content{flex-direction:column;align-items:flex-start}.file-item-card{gap:var(--space-sm);grid-template-columns:48px 1fr}.file-preview-box{width:48px;height:48px}.file-actions{border-top:1px solid var(--border-light);padding-top:var(--space-xs);margin-top:var(--space-xs);grid-column:1/-1;justify-content:flex-end}.file-name{max-width:200px}.format-segmented-control{grid-template-columns:1fr}}