@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";:root{--bg-app: #0c0c0e;--bg-surface: #141417;--bg-elevated: #1a1a1f;--bg-hover: #222228;--border: #232328;--border-active: #383842;--text-primary: #ededef;--text-secondary: #8e8e93;--text-tertiary: #5c5c62;--accent: #ffffff;--accent-blue: #3b82f6;--success: #10b981;--danger: #ef4444;--radius-xs: 4px;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}*{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased}body{font-family:var(--font-sans);background-color:var(--bg-app);color:var(--text-primary);min-height:100vh;display:flex;justify-content:center}.app-shell{width:100%;max-width:860px;min-height:100vh;display:flex;flex-direction:column;padding:1.25rem 1.25rem 2rem;position:relative}.toast{position:fixed;bottom:24px;right:24px;background:var(--bg-elevated);border:1px solid var(--border-active);color:var(--text-primary);font-size:.8rem;font-weight:500;padding:.55rem .85rem;border-radius:var(--radius-md);display:flex;align-items:center;gap:.45rem;box-shadow:0 10px 25px -5px #0009;z-index:999;animation:slideUp .2s cubic-bezier(.16,1,.3,1)}.toast-icon{color:var(--success)}@keyframes slideUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.app-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:1.25rem;border-bottom:1px solid var(--border);margin-bottom:1.25rem}.brand-group{display:flex;align-items:center;gap:.65rem}.brand-icon{width:28px;height:28px;border-radius:var(--radius-sm);background:var(--bg-elevated);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-primary)}.brand-text{display:flex;flex-direction:column}.brand-name{font-size:.875rem;font-weight:600;letter-spacing:-.01em}.brand-tagline{font-size:.7rem;color:var(--text-tertiary)}.mode-tabs{display:flex;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:2px}.tab{display:flex;align-items:center;gap:.35rem;padding:.3rem .8rem;border-radius:var(--radius-sm);border:none;background:transparent;color:var(--text-secondary);font-size:.8rem;font-weight:500;cursor:pointer;transition:all .15s ease}.tab:hover{color:var(--text-primary)}.tab.active{background:var(--bg-elevated);color:var(--text-primary);border:1px solid var(--border)}.badge{background:#2563eb;color:#fff;font-size:.65rem;padding:.05rem .35rem;border-radius:999px;font-weight:600}.device-indicator{display:flex;align-items:center;gap:.4rem;font-size:.725rem;color:var(--text-tertiary);font-family:monospace;background:var(--bg-surface);border:1px solid var(--border);padding:.25rem .55rem;border-radius:var(--radius-sm)}.status-dot{width:6px;height:6px;border-radius:50%;background:var(--success)}.workspace{flex:1;display:flex;flex-direction:column;gap:1rem}.progress-strip{display:flex;flex-direction:column;gap:.4rem;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:.75rem .9rem}.progress-strip-header{display:flex;justify-content:space-between;font-size:.775rem;color:var(--text-secondary)}.progress-strip-bar{width:100%;height:3px;background-color:var(--border);border-radius:999px;overflow:hidden}.progress-strip-fill{height:100%;background-color:#3b82f6;border-radius:999px;transition:width .2s ease}.error-card{display:flex;align-items:center;gap:.65rem;background:#ef44440f;border:1px solid rgba(239,68,68,.2);border-radius:var(--radius-md);padding:.65rem .85rem;color:#f87171;font-size:.8rem}.error-text{display:flex;align-items:center;justify-content:space-between;width:100%}.error-action{display:inline-flex;align-items:center;gap:.25rem;background:#dc2626;color:#fff;border:none;padding:.2rem .45rem;border-radius:var(--radius-xs);font-size:.725rem;font-weight:500;cursor:pointer}.mode-view{display:flex;flex-direction:column;gap:.85rem}.drop-area{border:1px dashed var(--border-active);border-radius:var(--radius-lg);background:var(--bg-surface);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3.5rem 1.5rem;text-align:center;gap:.75rem;cursor:pointer;transition:all .15s ease}.drop-area:hover:not(.locked),.drop-area.drag-over{border-color:var(--text-tertiary);background:var(--bg-elevated)}.drop-area.locked{opacity:.5;cursor:not-allowed}.drop-icon-box{width:40px;height:40px;border-radius:50%;background:var(--bg-elevated);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-secondary)}.drop-text-group{display:flex;flex-direction:column;gap:.2rem}.drop-main-text{font-size:.875rem;font-weight:500;color:var(--text-primary)}.drop-sub-text{font-size:.75rem;color:var(--text-tertiary)}.batch-drop-area{padding:2.25rem 1.5rem}.processing-canvas{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 1.5rem;gap:.65rem;color:var(--text-secondary);font-size:.85rem}.spin{animation:spin 1s linear infinite;color:var(--text-primary)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ribbon{display:flex;justify-content:space-between;align-items:center;gap:.75rem;flex-wrap:wrap;padding-bottom:.25rem}.ribbon-left{display:flex;align-items:center;gap:.6rem}.ribbon-label{font-size:.775rem;color:var(--text-tertiary);font-weight:500}.swatch-group{display:flex;align-items:center;gap:.35rem}.swatch-btn{width:22px;height:22px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .1s ease}.swatch-btn:hover{transform:scale(1.1)}.swatch-btn.selected{border-color:#3b82f6;outline:2px solid rgba(59,130,246,.4);outline-offset:1px}.custom-color-swatch{position:relative;width:22px;height:22px}.native-color{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer}.color-preview{width:100%;height:100%;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center}.color-preview.selected{border-color:#3b82f6;outline:2px solid rgba(59,130,246,.4);outline-offset:1px}.check-light{color:#fff}.check-dark{color:#000}.ribbon-right{display:flex;align-items:center;gap:.45rem}.dim-tag{font-size:.725rem;color:var(--text-tertiary);font-family:monospace;padding-right:.4rem}.btn-solid{display:inline-flex;align-items:center;gap:.35rem;background:var(--text-primary);color:var(--bg-app);border:none;padding:.38rem .75rem;border-radius:var(--radius-sm);font-size:.8rem;font-weight:600;cursor:pointer;transition:opacity .15s ease}.btn-solid:hover:not(:disabled){opacity:.9}.btn-solid:disabled{background:var(--bg-elevated);color:var(--text-tertiary);cursor:not-allowed}.btn-accent{background:#3b82f6;color:#fff}.btn-ghost{display:inline-flex;align-items:center;gap:.35rem;background:var(--bg-surface);color:var(--text-secondary);border:1px solid var(--border);padding:.38rem .7rem;border-radius:var(--radius-sm);font-size:.8rem;font-weight:500;cursor:pointer;transition:all .15s ease}.btn-ghost:hover:not(:disabled){background:var(--bg-elevated);color:var(--text-primary)}.btn-ghost:disabled{opacity:.4;cursor:not-allowed}.danger-ghost:hover:not(:disabled){color:var(--danger);border-color:#ef44444d}.single-editor{display:flex;flex-direction:column;gap:.65rem}.canvas-viewport{position:relative;width:100%;max-height:520px;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:ew-resize;-webkit-user-select:none;user-select:none;background-color:#0c0c0e}.checker{background-image:linear-gradient(45deg,#18181b 25%,transparent 25%),linear-gradient(-45deg,#18181b 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#18181b 75%),linear-gradient(-45deg,transparent 75%,#18181b 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px;background-color:#0c0c0e}.canvas-image{max-width:100%;max-height:520px;width:auto;height:auto;display:block;object-fit:contain}.canvas-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;pointer-events:none}.slider-track{position:absolute;top:0;bottom:0;width:1.5px;background-color:#ffffffd9;transform:translate(-50%);pointer-events:none;display:flex;align-items:center;justify-content:center}.slider-thumb{width:22px;height:22px;border-radius:50%;background:#fff;color:#0c0c0e;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #00000080}.edge-tag{position:absolute;bottom:10px;padding:.15rem .45rem;border-radius:var(--radius-xs);background:#0c0c0ecc;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:var(--text-secondary);font-size:.675rem;font-weight:500;pointer-events:none}.tag-left{left:10px}.tag-right{right:10px}.batch-panel{display:flex;flex-direction:column;gap:.75rem}.batch-summary-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.65rem}.summary-stats{display:flex;align-items:center;gap:.4rem}.stat-highlight{font-size:.825rem;font-weight:600;color:var(--text-primary)}.stat-sub{font-size:.775rem;color:var(--text-tertiary)}.live-status-pill{display:inline-flex;align-items:center;gap:.3rem;font-size:.725rem;color:#3b82f6;margin-left:.4rem}.pulse-dot{width:5px;height:5px;border-radius:50%;background:#3b82f6;animation:pulse 1.5s infinite}@keyframes pulse{0%{opacity:.4}50%{opacity:1}to{opacity:.4}}.batch-action-buttons{display:flex;align-items:center;gap:.4rem}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.65rem;max-height:400px;overflow-y:auto;padding:.15rem 0}.grid-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s ease}.grid-card:hover{border-color:var(--border-active)}.card-media{position:relative;width:100%;height:100px;display:flex;align-items:center;justify-content:center;background:#09090b}.card-img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}.card-curtain{position:absolute;top:0;left:0;width:100%;height:100%;background:#0c0c0ebf;display:flex;align-items:center;justify-content:center}.card-dismiss{position:absolute;top:4px;right:4px;background:#141417d9;border:1px solid var(--border);border-radius:var(--radius-xs);color:var(--text-tertiary);width:18px;height:18px;display:flex;align-items:center;justify-content:center;cursor:pointer}.card-dismiss:hover{color:var(--danger)}.card-quick-download{position:absolute;bottom:4px;right:4px;background:#141417d9;border:1px solid var(--border);border-radius:var(--radius-xs);color:var(--text-secondary);width:20px;height:20px;display:flex;align-items:center;justify-content:center;cursor:pointer}.card-quick-download:hover{color:var(--text-primary);background:var(--bg-hover)}.card-details{padding:.4rem .5rem;display:flex;flex-direction:column;gap:.2rem;border-top:1px solid var(--border)}.card-title{font-size:.7rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-primary)}.card-sub-info{display:flex;justify-content:space-between;align-items:center}.card-size{font-size:.65rem;color:var(--text-tertiary)}.pill{font-size:.625rem;font-weight:500;padding:.05rem .3rem;border-radius:3px}.pill.queued{background:var(--bg-elevated);color:var(--text-tertiary)}.pill.processing{background:#3b82f626;color:#60a5fa}.pill.done{background:#10b98126;color:#34d399}.pill.error{background:#ef444426;color:#f87171}.app-footer{margin-top:auto;padding-top:1.5rem;border-top:1px solid var(--border);text-align:center;font-size:.725rem;color:var(--text-tertiary)}@media (max-width: 600px){.app-header{flex-wrap:wrap;gap:.75rem}.ribbon{flex-direction:column;align-items:stretch}.ribbon-right{justify-content:space-between}.batch-summary-bar{flex-direction:column;align-items:stretch}.batch-action-buttons{justify-content:space-between}}