.topbar{height:var(--topbar-height);padding:0 var(--spacing-md);background:var(--color-bg-panel);border-bottom:1px solid var(--color-border);z-index:var(--z-topbar);-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;display:flex}.topbar__left{align-items:center;gap:var(--spacing-md);display:flex}.topbar__title{font-size:var(--font-size-lg);cursor:pointer;letter-spacing:-.5px;font-weight:700}.topbar__back{font-size:var(--font-size-sm);color:var(--color-text-secondary);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);transition:background var(--transition-fast)}.topbar__back:hover{background:var(--color-bg-hover);color:var(--color-text-primary)}.topbar__center{flex:1;justify-content:center;display:flex}.topbar__progress{align-items:center;gap:var(--spacing-sm);font-size:var(--font-size-sm);color:var(--color-text-secondary);display:flex}.topbar__progress-bar{background:var(--slider-track-bg);border-radius:2px;width:120px;height:4px;overflow:hidden}.topbar__progress-fill{background:var(--color-accent);border-radius:2px;height:100%;transition:width .2s}.topbar__right{align-items:center;gap:var(--spacing-sm);display:flex}.topbar__github{color:var(--color-text-secondary);padding:var(--spacing-xs);border-radius:var(--radius-sm);transition:color var(--transition-fast), background var(--transition-fast);align-items:center;display:flex}.topbar__github:hover{color:var(--color-text-primary);background:var(--color-bg-hover)}.topbar__theme-toggle{padding:var(--spacing-xs);border-radius:var(--radius-sm);transition:background var(--transition-fast);font-size:18px}.topbar__theme-toggle:hover{background:var(--color-bg-hover)}.dropzone{flex-direction:column;flex:1;min-height:0;display:flex;position:relative}.dropzone__input{display:none}.dropzone__import-btn{bottom:var(--spacing-lg);right:var(--spacing-lg);padding:var(--spacing-sm) var(--spacing-lg);background:var(--color-accent);color:#fff;border-radius:var(--radius-md);font-size:var(--font-size-md);transition:background var(--transition-fast);z-index:var(--z-panel);font-weight:600;position:fixed}.dropzone__import-btn:hover{background:var(--color-accent-hover)}.dropzone__overlay{background:var(--color-bg-overlay);z-index:var(--z-modal);border-radius:var(--radius-md);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.dropzone__overlay-text{color:#fff;padding:var(--spacing-lg) 48px;border:3px dashed var(--color-accent);border-radius:var(--radius-lg);font-size:24px;font-weight:600}.thumbnail-grid{grid-template-columns:repeat(auto-fill, minmax(var(--thumbnail-size), 1fr));gap:var(--thumbnail-gap);padding:var(--spacing-md);flex:1;grid-auto-rows:min-content;align-content:start;display:grid;overflow-y:auto}.thumbnail-grid__empty{color:var(--color-text-secondary);justify-content:center;align-items:center;gap:var(--spacing-lg);text-align:center;padding:48px var(--spacing-lg) 80px;flex-direction:column;flex:1;max-width:720px;margin:0 auto;display:flex}.thumbnail-grid__hero{align-items:center;gap:var(--spacing-sm);flex-direction:column;display:flex}.thumbnail-grid__title{color:var(--color-text-primary);letter-spacing:-.02em;margin:0;font-size:36px;font-weight:700}.thumbnail-grid__tagline{font-size:var(--font-size-lg);color:var(--color-text-secondary);max-width:480px;margin:0;line-height:1.5}.thumbnail-grid__features{gap:var(--spacing-md);grid-template-columns:repeat(2,1fr);width:100%;display:grid}.thumbnail-grid__feature{background:var(--color-bg-panel);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-md);text-align:left}.thumbnail-grid__feature h3{font-size:var(--font-size-md);color:var(--color-text-primary);margin:var(--spacing-xs) 0;font-weight:600}.thumbnail-grid__feature p{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0;line-height:1.5}.thumbnail-grid__feature-icon{font-size:24px}.thumbnail-grid__cta{font-size:var(--font-size-md);color:var(--color-text-secondary);margin:0}.thumbnail-grid__cta strong{color:var(--color-accent)}@media (max-width:520px){.thumbnail-grid__features{grid-template-columns:1fr}.thumbnail-grid__title{font-size:28px}}.thumbnail-card{background:var(--color-bg-panel);border:1px solid var(--color-border);cursor:pointer;transition:border-color var(--transition-fast), transform var(--transition-fast);overflow:hidden}.thumbnail-card:hover{border-color:var(--color-accent);transform:translateY(-2px)}.thumbnail-card__image{aspect-ratio:3/2;background:var(--color-bg-input);overflow:hidden}.thumbnail-card__image img{object-fit:cover;width:100%;height:100%}.thumbnail-card__placeholder{width:100%;height:100%;font-size:var(--font-size-sm);color:var(--color-text-disabled);justify-content:center;align-items:center;display:flex}.thumbnail-card__info{padding:var(--spacing-xs) var(--spacing-sm);justify-content:space-between;align-items:center;display:flex}.thumbnail-card__name{font-size:var(--font-size-xs);color:var(--color-text-secondary);text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.thumbnail-card__delete{color:var(--color-text-disabled);padding:0 var(--spacing-xs);opacity:0;transition:opacity var(--transition-fast), color var(--transition-fast);font-size:16px}.thumbnail-card:hover .thumbnail-card__delete{opacity:1}.thumbnail-card__delete:hover{color:var(--color-danger)}.library-view{height:calc(100% - var(--topbar-height));flex-direction:column;display:flex;overflow:hidden}.library-view__toolbar{padding:var(--spacing-sm) var(--spacing-md) 0;justify-content:flex-end;display:flex}.library-view__clear-btn{padding:var(--spacing-xs) var(--spacing-md);font-size:var(--font-size-sm);background:var(--color-bg-panel);color:var(--color-text-secondary);border:1px solid var(--color-border);border-radius:var(--radius-sm);transition:all var(--transition-fast)}.library-view__clear-btn:hover{background:var(--color-danger);color:#fff;border-color:var(--color-danger)}.canvas-viewport{background:#111;flex:1;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.canvas-viewport__canvas{max-width:100%;max-height:100%;display:block}.canvas-viewport__loader{justify-content:center;align-items:center;gap:var(--spacing-md);z-index:var(--z-crop-overlay);background:#00000080;flex-direction:column;display:flex;position:absolute;inset:0}.canvas-viewport__spinner{border:3px solid #ffffff26;border-top-color:var(--color-accent);border-radius:50%;width:40px;height:40px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.canvas-viewport__loader-text{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.canvas-viewport__badge{top:var(--spacing-md);color:#fff;padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-sm);font-size:var(--font-size-sm);pointer-events:none;background:#000000b3;font-weight:600;position:absolute;left:50%;transform:translate(-50%)}.slider{padding:var(--spacing-xs) 0}.slider__header{justify-content:space-between;align-items:center;margin-bottom:2px;display:flex}.slider__label{font-size:var(--font-size-sm);color:var(--color-text-secondary);-webkit-user-select:none;user-select:none}.slider__header-right{align-items:center;gap:4px;display:flex}.slider__value{font-size:var(--font-size-xs);font-family:var(--font-mono);color:var(--color-text-secondary);text-align:right;min-width:40px}.slider__reset{width:18px;height:18px;color:var(--color-text-disabled);transition:all var(--transition-fast);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:14px;line-height:1;display:flex}.slider__reset:hover{color:var(--color-text-primary);background:var(--color-bg-hover)}.film-panel{padding:var(--spacing-sm) var(--spacing-md);flex:1;overflow-y:auto}.film-panel__category{margin-bottom:var(--spacing-sm)}.film-panel__category-name{font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-disabled);padding:var(--spacing-xs) 0;font-weight:700}.film-panel__preset{text-align:left;width:100%;padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-sm);color:var(--color-text-secondary);border-radius:var(--radius-sm);transition:all var(--transition-fast);display:block}.film-panel__preset:hover{color:var(--color-text-primary);background:var(--color-bg-hover)}.film-panel__preset--active{color:#fff;background:var(--color-accent)}.film-panel__preset--active:hover{background:var(--color-accent-hover)}.adjustment-panel{width:var(--panel-width);background:var(--color-bg-panel);border-left:1px solid var(--color-border);height:100%;z-index:var(--z-panel);flex-direction:column;display:flex;overflow:hidden}.adjustment-panel__tools{border-bottom:1px solid var(--color-border);display:flex}.tool-btn{padding:var(--spacing-sm);font-size:var(--font-size-sm);color:var(--color-text-secondary);transition:color var(--transition-fast), border-color var(--transition-fast);border-bottom:2px solid #0000;flex:1;font-weight:600}.tool-btn:hover{color:var(--color-text-primary)}.tool-btn--active{color:var(--color-accent);border-bottom-color:var(--color-accent)}.adjustment-panel__sliders,.adjustment-panel__crop{padding:var(--spacing-sm) var(--spacing-md);flex:1;overflow-y:auto}.panel-section{margin-bottom:var(--spacing-md)}.panel-section__title{font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-secondary);margin-bottom:var(--spacing-sm);padding-bottom:var(--spacing-xs);border-bottom:1px solid var(--color-border);font-weight:700}.wb-presets{gap:var(--spacing-xs);margin-bottom:var(--spacing-sm);flex-wrap:wrap;display:flex}.wb-presets__btn{padding:2px var(--spacing-sm);font-size:var(--font-size-xs);background:var(--color-bg-input);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-secondary);transition:all var(--transition-fast)}.wb-presets__btn:hover{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}.reset-btn{width:100%;padding:var(--spacing-sm);font-size:var(--font-size-sm);background:var(--color-bg-input);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-secondary);transition:all var(--transition-fast)}.reset-btn:hover{background:var(--color-danger);color:#fff;border-color:var(--color-danger)}.done-btn{width:100%;padding:var(--spacing-sm);font-size:var(--font-size-sm);background:var(--color-accent);color:#fff;border-radius:var(--radius-sm);margin-bottom:var(--spacing-sm);transition:background var(--transition-fast);font-weight:600}.done-btn:hover{background:var(--color-accent-hover)}.rotation-controls{margin-bottom:var(--spacing-sm)}.rotation-controls__row{align-items:center;gap:var(--spacing-xs);margin-bottom:var(--spacing-sm);display:flex}.rotation-controls__btn{background:var(--color-bg-input);border:1px solid var(--color-border);border-radius:var(--radius-sm);width:32px;height:32px;color:var(--color-text-secondary);transition:all var(--transition-fast);flex-shrink:0;justify-content:center;align-items:center;font-size:18px;display:flex}.rotation-controls__btn:hover{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}.rotation-controls__slider-group{align-items:center;gap:var(--spacing-xs);flex:1;min-width:0;display:flex}.rotation-controls__slider{flex:1;min-width:0}.rotation-controls__input{width:52px;font-size:var(--font-size-xs);font-family:var(--font-mono);text-align:right;background:var(--color-bg-input);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-primary);flex-shrink:0;padding:2px 4px}.rotation-controls__input:focus{border-color:var(--color-border-focus);outline:none}.rotation-controls__input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.rotation-controls__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.straighten-btn{width:100%;padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-sm);background:var(--color-bg-input);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-secondary);transition:all var(--transition-fast)}.straighten-btn:hover{color:var(--color-text-primary);border-color:var(--color-text-secondary)}.straighten-btn--active{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}.histogram{border-radius:var(--radius-sm);padding:var(--spacing-xs);cursor:pointer;margin-bottom:var(--spacing-sm);background:#0009}.histogram__canvas{border-radius:2px;width:100%;height:60px;display:block}.histogram-toggle{font-size:var(--font-size-xs);color:var(--color-text-disabled);padding:var(--spacing-xs);margin-bottom:var(--spacing-sm)}.histogram-toggle:hover{color:var(--color-text-secondary)}.export-trigger{padding:var(--spacing-xs) var(--spacing-md);background:var(--color-accent);color:#fff;border-radius:var(--radius-sm);font-size:var(--font-size-sm);transition:background var(--transition-fast);font-weight:600}.export-trigger:hover{background:var(--color-accent-hover)}.export-panel{z-index:var(--z-modal);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.export-panel__backdrop{background:var(--color-bg-overlay);position:absolute;inset:0}.export-panel__content{background:var(--color-bg-panel);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-lg);min-width:320px;max-width:400px;position:relative}.export-panel__title{font-size:var(--font-size-lg);margin-bottom:var(--spacing-md)}.export-panel__field{margin-bottom:var(--spacing-md)}.export-panel__field label{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:var(--spacing-xs);display:block}.export-panel__format-btns{gap:var(--spacing-xs);display:flex}.format-btn{padding:var(--spacing-sm);font-size:var(--font-size-sm);background:var(--color-bg-input);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-secondary);transition:all var(--transition-fast);flex:1;font-weight:600}.format-btn--active{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}.export-panel__actions{gap:var(--spacing-sm);display:flex}.export-panel__btn{padding:var(--spacing-sm) var(--spacing-md);background:var(--color-accent);color:#fff;border-radius:var(--radius-md);font-size:var(--font-size-md);transition:background var(--transition-fast);flex:1;font-weight:600}.export-panel__btn--cancel{background:var(--color-bg-input);color:var(--color-text-secondary);border:1px solid var(--color-border)}.export-panel__btn--cancel:hover:not(:disabled){background:var(--color-bg-hover);color:var(--color-text-primary)}.export-panel__btn:hover:not(:disabled){background:var(--color-accent-hover)}.export-panel__btn--cancel:hover:not(:disabled){background:var(--color-bg-hover)}.export-panel__btn:disabled{opacity:.6;cursor:not-allowed}.crop-overlay{z-index:var(--z-crop-overlay);pointer-events:none;position:absolute;inset:0}.crop-overlay__mask{pointer-events:none;background:#00000080;position:absolute;inset:0}.crop-overlay__region{pointer-events:auto;border:2px solid #fff;position:absolute;box-shadow:0 0 0 9999px #00000080}.crop-overlay__move{cursor:move;position:absolute;inset:0}.crop-overlay__grid{pointer-events:none;position:absolute;inset:0}.crop-overlay__grid-line{background:#ffffff4d;position:absolute}.crop-overlay__grid-line--h1{height:1px;top:33.33%;left:0;right:0}.crop-overlay__grid-line--h2{height:1px;top:66.66%;left:0;right:0}.crop-overlay__grid-line--v1{width:1px;top:0;bottom:0;left:33.33%}.crop-overlay__grid-line--v2{width:1px;top:0;bottom:0;left:66.66%}.crop-overlay__handle{border:2px solid var(--color-accent);pointer-events:auto;background:#fff;border-radius:2px;width:16px;height:16px;position:absolute}.crop-overlay__handle--tl{cursor:nwse-resize;top:-8px;left:-8px}.crop-overlay__handle--tr{cursor:nesw-resize;top:-8px;right:-8px}.crop-overlay__handle--bl{cursor:nesw-resize;bottom:-8px;left:-8px}.crop-overlay__handle--br{cursor:nwse-resize;bottom:-8px;right:-8px}.straighten-overlay{z-index:var(--z-crop-overlay);cursor:crosshair;position:absolute;inset:0}.straighten-overlay__svg{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.straighten-overlay__actions{top:var(--spacing-md);align-items:center;gap:var(--spacing-sm);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-md);pointer-events:auto;background:#000c;display:flex;position:absolute;left:50%;transform:translate(-50%)}.straighten-overlay__label{font-size:var(--font-size-sm);font-family:var(--font-mono);color:#ff6b35;text-align:center;min-width:48px}.straighten-overlay__btn{padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-sm);border-radius:var(--radius-sm);transition:background var(--transition-fast);font-weight:600}.straighten-overlay__btn--apply{background:var(--color-accent);color:#fff}.straighten-overlay__btn--apply:hover{background:var(--color-accent-hover)}.straighten-overlay__btn--cancel{background:var(--color-bg-input);color:var(--color-text-secondary);border:1px solid var(--color-border)}.straighten-overlay__btn--cancel:hover{color:var(--color-text-primary)}.edit-view{height:calc(100% - var(--topbar-height));flex-direction:column;display:flex;overflow:hidden}.edit-view__topbar{padding:var(--spacing-xs) var(--spacing-md);background:var(--color-bg-panel-raised);border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;display:flex}.edit-view__filename{font-size:var(--font-size-sm);color:var(--color-text-secondary);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.edit-view__main{flex:1;min-height:0;display:flex}.edit-view__canvas-area{flex:1;min-width:0;display:flex;position:relative}.edit-view__sidebar{width:var(--panel-width);background:var(--color-bg-panel);border-left:1px solid var(--color-border);transition:opacity var(--transition-base);flex-direction:column;display:flex;overflow:hidden}.edit-view--processing .edit-view__topbar,.edit-view--processing .edit-view__sidebar{opacity:.4;pointer-events:none}.app-shell{flex-direction:column;height:100%;display:flex}.mobile-notice{display:none}@media (max-width:768px){.mobile-notice{text-align:center;padding:48px var(--spacing-lg);justify-content:center;align-items:center;gap:var(--spacing-sm);flex-direction:column;height:100%;display:flex}.mobile-notice h1{color:var(--color-text-primary);margin:0;font-size:28px;font-weight:700}.mobile-notice p{font-size:var(--font-size-md);color:var(--color-text-secondary);max-width:360px;margin:0;line-height:1.5}.app-shell>:not(.mobile-notice){display:none}}.error-toast{bottom:var(--spacing-lg);background:var(--color-danger);color:#fff;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);align-items:center;gap:var(--spacing-sm);font-size:var(--font-size-sm);cursor:pointer;z-index:var(--z-modal);max-width:500px;display:flex;position:fixed;left:50%;transform:translate(-50%);box-shadow:0 4px 12px #0000004d}.error-toast button{color:#fff;opacity:.7;font-size:18px}.error-toast button:hover{opacity:1}:root[data-theme=dark]{--color-bg-app:#1a1a1a;--color-bg-panel:#242424;--color-bg-panel-raised:#2e2e2e;--color-bg-input:#1a1a1a;--color-bg-hover:#333;--color-bg-overlay:#000000b3;--color-border:#3a3a3a;--color-border-focus:#6b8cff;--color-text-primary:#e8e8e8;--color-text-secondary:#a0a0a0;--color-text-disabled:#555;--color-accent:#6b8cff;--color-accent-hover:#7d9bff;--color-accent-active:#5a7aee;--color-danger:#ff5e5e;--color-success:#4caf80;--slider-track-bg:#3a3a3a;--slider-track-fill:#6b8cff;--slider-thumb-bg:#fff}:root[data-theme=light]{--color-bg-app:#f0f0f0;--color-bg-panel:#fff;--color-bg-panel-raised:#f8f8f8;--color-bg-input:#f0f0f0;--color-bg-hover:#e8e8e8;--color-bg-overlay:#0006;--color-border:#d0d0d0;--color-border-focus:#46d;--color-text-primary:#1a1a1a;--color-text-secondary:#606060;--color-text-disabled:#b0b0b0;--color-accent:#46d;--color-accent-hover:#35c;--color-accent-active:#24b;--color-danger:#d93535;--color-success:#3a8c5c;--slider-track-bg:#d0d0d0;--slider-track-fill:#46d;--slider-thumb-bg:#fff}:root{--panel-width:280px;--topbar-height:48px;--thumbnail-size:200px;--thumbnail-gap:12px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--font-size-xs:11px;--font-size-sm:12px;--font-size-md:14px;--font-size-lg:16px;--font-sans:"Inter", system-ui, -apple-system, sans-serif;--font-mono:"JetBrains Mono", "Fira Code", monospace;--transition-fast:.12s ease;--transition-base:.2s ease;--z-canvas:1;--z-crop-overlay:2;--z-panel:10;--z-topbar:20;--z-modal:100}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;overflow:hidden}body{font-family:var(--font-sans);font-size:var(--font-size-md);color:var(--color-text-primary);background:var(--color-bg-app);-webkit-font-smoothing:antialiased}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}::selection{background:var(--color-accent);color:#fff}input[type=range]{appearance:none;background:var(--slider-track-bg);cursor:pointer;border-radius:2px;outline:none;width:100%;height:4px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--slider-thumb-bg);border:2px solid var(--color-accent);cursor:pointer;width:14px;height:14px;transition:transform var(--transition-fast);border-radius:50%}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}input[type=range]::-webkit-slider-thumb:active{transform:scale(1.1)}button{cursor:pointer;color:inherit;font-family:inherit;font-size:inherit;background:0 0;border:none}