:root{--bg-color: #E0E0E0;--app-bg-color: #F5F5F5;--app-border-color: #CCCCCC;--header-bg-color: #E8E8E8;--header-border-color: #D0D0D0;--text-color-primary: #333;--text-color-secondary: #555;--text-color-placeholder: #AAA;--button-bg-color: #F0F0F0;--button-border-color: #B0B0B0;--button-text-color: #333;--button-hover-bg-color: #DADADA;--button-hover-border-color: #A0A0A0;--button-disabled-opacity: .6;--input-bg-color: #FFFFFF;--input-border-color: #BDBDBD;--input-text-color: #333;--status-loading-bg: #eaf4ff;--status-loading-text: #3498db;--status-loading-border: #aed6f1;--status-error-bg: #fdedec;--status-error-text: #e74c3c;--status-error-border: #f5b7b1;--status-info-bg: #e8f6f3;--status-info-text: #1abc9c;--status-info-border: #a3e4d7;--thumbnail-bar-bg: #E8E8E8;--thumbnail-bar-border: #D0D0D0;--thumbnail-item-bg: #FDFDFD;--thumbnail-item-border: #C0C0C0;--thumbnail-item-hover-border: #3498db;--thumbnail-item-active-border: #2ecc71;--thumbnail-item-active-shadow: rgba(46, 204, 113, .4);--thumbnail-item-marked-border: gold;--thumbnail-item-marked-shadow: rgba(255, 215, 0, .5);--thumbnail-image-bg: #FFF;--thumbnail-image-border: #DDD;--thumbnail-actions-bg: rgba(255, 255, 255, .85);--thumbnail-action-icon-color: #333;--thumbnail-action-icon-hover-color: #007bff;--thumbnail-action-icon-hover-bg: rgba(0, 0, 0, .05);--preview-bg-color: #FFFFFF;--border-color-light: #CCC;--grid-line-color: #6e6e6e;--grid-overlay-toggle-text-color: #444;--grid-overlay-checkbox-accent: #3498db;--enlarged-modal-bg: rgba(0, 0, 0, .8);--enlarged-modal-img-border: white;--enlarged-modal-close-color: white;--enlarged-modal-close-hover-color: #ccc;--all-frames-panel-bg: #F8F8F8;--all-frames-panel-border: #B0B0B0;--all-frames-panel-header-bg: #E8E8E8;--all-frames-panel-header-border: #D0D0D0;--all-frames-panel-content-bg: #ECECEC;--all-frames-panel-close-btn-color: #777;--all-frames-panel-close-btn-hover-color: #333;--scrollbar-thumb-color: #c1c1c1;--scrollbar-thumb-hover-color: #a8a8a8;--all-frames-panel-thumb-min-width: 100px;--shortcuts-modal-overlay-bg: rgba(0, 0, 0, .6);--shortcuts-modal-bg: #FFFFFF;--shortcuts-modal-border: #B0B0B0;--shortcuts-modal-header-bg: #F0F0F0;--shortcuts-modal-header-border: #D0D0D0;--shortcuts-modal-close-color: #777;--shortcuts-modal-close-hover-color: #333;--shortcuts-list-text-color: #444;--shortcuts-kbd-bg: #EAEAEA;--shortcuts-kbd-border: #C0C0C0;--shortcuts-kbd-text-color: #222;--shortcuts-hr-color: #D0D0D0}body.dark-mode{--bg-color: #121212;--app-bg-color: #1E1E1E;--app-border-color: #333333;--header-bg-color: #2A2A2A;--header-border-color: #383838;--text-color-primary: #E0E0E0;--text-color-secondary: #A0A0A0;--text-color-placeholder: #666;--button-bg-color: #333333;--button-border-color: #555555;--button-text-color: #E0E0E0;--button-hover-bg-color: #444444;--button-hover-border-color: #666666;--input-bg-color: #2C2C2C;--input-border-color: #555555;--input-text-color: #E0E0E0;--status-loading-bg: #2a3a4f;--status-loading-text: #8ab4f8;--status-loading-border: #4a5c77;--status-error-bg: #4d2d2a;--status-error-text: #f28b82;--status-error-border: #794640;--status-info-bg: #28423f;--status-info-text: #78d9c0;--status-info-border: #436b60;--thumbnail-bar-bg: #2A2A2A;--thumbnail-bar-border: #383838;--thumbnail-item-bg: #252525;--thumbnail-item-border: #404040;--thumbnail-item-hover-border: #8ab4f8;--thumbnail-item-active-border: #78d9c0;--thumbnail-item-active-shadow: rgba(120, 217, 192, .4);--thumbnail-item-marked-border: #FBC02D;--thumbnail-item-marked-shadow: rgba(251, 192, 45, .5);--thumbnail-image-bg: #333;--thumbnail-image-border: #444;--thumbnail-actions-bg: rgba(40, 40, 40, .85);--thumbnail-action-icon-color: #E0E0E0;--thumbnail-action-icon-hover-color: #8ab4f8;--thumbnail-action-icon-hover-bg: rgba(255, 255, 255, .1);--preview-bg-color: #2C2C2C;--border-color-light: #444;--grid-line-color: #5a5a5a;--grid-overlay-toggle-text-color: #A0A0A0;--grid-overlay-checkbox-accent: #8ab4f8;--enlarged-modal-bg: rgba(0, 0, 0, .9);--enlarged-modal-img-border: #444;--enlarged-modal-close-color: #A0A0A0;--enlarged-modal-close-hover-color: #E0E0E0;--all-frames-panel-bg: #252525;--all-frames-panel-border: #383838;--all-frames-panel-header-bg: #2A2A2A;--all-frames-panel-header-border: #333333;--all-frames-panel-content-bg: #1E1E1E;--all-frames-panel-close-btn-color: #A0A0A0;--all-frames-panel-close-btn-hover-color: #E0E0E0;--scrollbar-thumb-color: #555;--scrollbar-thumb-hover-color: #777;--shortcuts-modal-overlay-bg: rgba(0, 0, 0, .75);--shortcuts-modal-bg: #2C2C2C;--shortcuts-modal-border: #4A4A4A;--shortcuts-modal-header-bg: #333333;--shortcuts-modal-header-border: #404040;--shortcuts-modal-close-color: #A0A0A0;--shortcuts-modal-close-hover-color: #E0E0E0;--shortcuts-list-text-color: #C0C0C0;--shortcuts-kbd-bg: #3A3A3A;--shortcuts-kbd-border: #505050;--shortcuts-kbd-text-color: #E0E0E0;--shortcuts-hr-color: #404040}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin:0;padding:20px 0;background-color:var(--bg-color);color:var(--text-color-primary);line-height:1.6;display:flex;justify-content:center;align-items:flex-start;min-height:100vh;-webkit-user-select:none;user-select:none;transition:background-color .3s ease,color .3s ease}.app-container{width:100%;max-width:700px;background-color:var(--app-bg-color);border-radius:8px;box-shadow:0 4px 15px #00000026;overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--app-border-color);transition:background-color .3s ease,border-color .3s ease}.app-container.drag-over-active{outline:2px dashed var(--thumbnail-item-hover-border);outline-offset:-4px}.app-header{display:flex;justify-content:space-between;align-items:center;padding:12px 15px;background-color:var(--header-bg-color);border-bottom:1px solid var(--header-border-color);flex-wrap:wrap;gap:10px;transition:background-color .3s ease,border-color .3s ease}.header-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.control-button,.language-select{padding:8px 12px;font-size:.9em;border-radius:5px;border:1px solid var(--button-border-color);background-color:var(--button-bg-color);color:var(--button-text-color);cursor:pointer;transition:background-color .2s ease,border-color .2s ease,color .2s ease;display:inline-flex;align-items:center;gap:5px}.control-button:hover:not(:disabled),.language-select:hover{background-color:var(--button-hover-bg-color);border-color:var(--button-hover-border-color)}.control-button:disabled{opacity:var(--button-disabled-opacity);cursor:not-allowed}.language-select{outline:none;-webkit-appearance:auto;-moz-appearance:auto;appearance:auto;padding-right:25px}.theme-toggle-button svg{transition:transform .3s ease}.status-messages-container{padding:0 15px}.status-message{padding:8px 12px;margin-top:10px;margin-bottom:0;border-radius:4px;text-align:center;font-size:.85em;transition:background-color .3s ease,color .3s ease,border-color .3s ease}.loading{background-color:var(--status-loading-bg);color:var(--status-loading-text);border:1px solid var(--status-loading-border)}.error{background-color:var(--status-error-bg);color:var(--status-error-text);border:1px solid var(--status-error-border)}.info{background-color:var(--status-info-bg);color:var(--status-info-text);border:1px solid var(--status-info-border)}.editor-main-content{padding:0;background-color:var(--app-bg-color);flex-grow:1;display:flex;flex-direction:column;overflow:hidden;transition:background-color .3s ease}.frame-thumbnails-bar{display:flex;overflow-x:auto;padding:10px 15px;background-color:var(--thumbnail-bar-bg);border-bottom:1px solid var(--thumbnail-bar-border);gap:10px;align-items:flex-start;transition:background-color .3s ease,border-color .3s ease}.frame-thumbnails-bar::-webkit-scrollbar{height:8px}.frame-thumbnails-bar::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-color);border-radius:4px}.frame-thumbnails-bar::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover-color)}.tiled-frames-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px;padding:15px;background-color:var(--bg-color);border-bottom:1px solid var(--thumbnail-bar-border);max-height:300px;overflow-y:auto;transition:background-color .3s ease,border-color .3s ease}.tiled-frames-container::-webkit-scrollbar{width:8px}.tiled-frames-container::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-color);border-radius:4px}.tiled-frames-container::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover-color)}.thumbnail-item,.tiled-thumbnail-item,.all-frames-panel-thumbnail-item{flex-shrink:0;padding:8px;border:1px solid var(--thumbnail-item-border);border-radius:4px;background-color:var(--thumbnail-item-bg);text-align:center;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,background-color .3s ease;position:relative;box-sizing:border-box}.thumbnail-item{width:100px}.tiled-thumbnail-item,.all-frames-panel-thumbnail-item{width:auto}.thumbnail-item:hover,.thumbnail-item:focus,.tiled-thumbnail-item:hover,.tiled-thumbnail-item:focus,.all-frames-panel-thumbnail-item:hover,.all-frames-panel-thumbnail-item:focus{border-color:var(--thumbnail-item-hover-border);outline:none}.thumbnail-item.active,.tiled-thumbnail-item.active,.all-frames-panel-thumbnail-item.active{border-color:var(--thumbnail-item-active-border);box-shadow:0 0 0 2px var(--thumbnail-item-active-shadow)}.thumbnail-item.marked-frame,.tiled-thumbnail-item.marked-frame,.all-frames-panel-thumbnail-item.marked-frame{border-color:var(--thumbnail-item-marked-border);box-shadow:0 0 0 2px var(--thumbnail-item-marked-shadow)}.similar-frame-indicator-thumbnail{position:absolute;top:2px;left:2px;font-size:.8em;color:#e67e22;background-color:var(--thumbnail-actions-bg);border-radius:50%;padding:0 3px;z-index:2}.thumbnail-image{width:100%;height:60px;object-fit:contain;border:1px solid var(--thumbnail-image-border);background-color:var(--thumbnail-image-bg);margin-bottom:5px;border-radius:3px;display:block;transition:background-color .3s ease,border-color .3s ease,height .1s linear}.thumbnail-info{font-size:.75em;color:var(--text-color-secondary);display:flex;flex-direction:column;align-items:center;gap:3px;transition:color .3s ease}.thumbnail-number{font-weight:500}.thumbnail-delay-input{width:50px;padding:3px 5px;border:1px solid var(--input-border-color);background-color:var(--input-bg-color);color:var(--input-text-color);border-radius:3px;text-align:center;font-size:.9em;-moz-appearance:textfield;transition:background-color .3s ease,border-color .3s ease,color .3s ease}.thumbnail-delay-input::-webkit-outer-spin-button,.thumbnail-delay-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.thumbnail-actions-overlay{position:absolute;top:2px;right:2px;display:flex;flex-direction:column;gap:3px;background-color:var(--thumbnail-actions-bg);padding:3px;border-radius:3px;opacity:0;transition:opacity .15s ease-in-out,background-color .3s ease;z-index:1}.thumbnail-item:hover .thumbnail-actions-overlay,.thumbnail-item:focus-within .thumbnail-actions-overlay,.tiled-thumbnail-item:hover .thumbnail-actions-overlay,.tiled-thumbnail-item:focus-within .thumbnail-actions-overlay,.all-frames-panel-thumbnail-item:hover .thumbnail-actions-overlay,.all-frames-panel-thumbnail-item:focus-within .thumbnail-actions-overlay{opacity:1}.thumbnail-action-icon{cursor:pointer;color:var(--thumbnail-action-icon-color);background:none;border:none;padding:2px;display:inline-flex;align-items:center;justify-content:center;border-radius:2px;transition:color .2s ease,background-color .2s ease}.thumbnail-action-icon:hover{color:var(--thumbnail-action-icon-hover-color);background-color:var(--thumbnail-action-icon-hover-bg)}.thumbnail-action-icon svg{width:.9em;height:.9em}.main-preview-area{padding:20px 15px;display:flex;flex-direction:column;align-items:center;flex-grow:1;min-height:200px}.main-preview-image-container{display:flex;align-items:center;justify-content:center;transition:background-color .3s ease,border-color .3s ease}.main-preview-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;opacity:1;z-index:1}.main-preview-controls-wrapper{display:flex;justify-content:center;align-items:center;gap:20px;width:100%;margin-top:10px;margin-bottom:10px}.main-preview-delay-controls{display:flex;align-items:center;gap:8px;font-size:.9em;color:var(--text-color-secondary);transition:color .3s ease}.main-preview-delay-input{width:60px;padding:6px 8px;border:1px solid var(--input-border-color);background-color:var(--input-bg-color);color:var(--input-text-color);border-radius:4px;text-align:center;font-size:1em;-moz-appearance:textfield;transition:background-color .3s ease,border-color .3s ease,color .3s ease}.main-preview-delay-input::-webkit-outer-spin-button,.main-preview-delay-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.playback-controls-footer{display:flex;justify-content:center;align-items:center;gap:8px;padding:12px 15px;background-color:var(--header-bg-color);border-top:1px solid var(--header-border-color);transition:background-color .3s ease,border-color .3s ease}.playback-controls-footer button{background-color:transparent;border:1px solid var(--button-border-color);color:var(--button-text-color);border-radius:4px;padding:6px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background-color .2s ease,border-color .2s ease,color .2s ease}.playback-controls-footer button svg{width:1.6em;height:1.6em}.playback-controls-footer button:hover:not(:disabled){background-color:var(--button-hover-bg-color)}.playback-controls-footer button:disabled{opacity:var(--button-disabled-opacity);cursor:not-allowed}.frame-counter-display{font-size:.85em;color:var(--text-color-secondary);margin:0 10px;min-width:50px;text-align:center;transition:color .3s ease}.empty-state-message{text-align:center;padding:40px 20px;color:var(--text-color-placeholder);font-size:1em;flex-grow:1;display:flex;justify-content:center;align-items:center;transition:color .3s ease}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.grid-overlay-toggle{display:flex;align-items:center;gap:5px;font-size:.9em;color:var(--grid-overlay-toggle-text-color);transition:color .3s ease}.grid-overlay-toggle input[type=checkbox]{margin-right:5px;cursor:pointer;accent-color:var(--grid-overlay-checkbox-accent)}.grid-overlay-toggle input[type=checkbox]:disabled+label{color:var(--text-color-placeholder)}.grid-overlay-toggle input[type=checkbox]:disabled{cursor:not-allowed}.grid-overlay-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2}.grid-line{position:absolute;background-color:var(--grid-line-color);transition:background-color .3s ease}.grid-line-vertical{width:1px;height:100%;top:0}.grid-line-horizontal{height:1px;width:100%;left:0}.enlarged-frame-modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--enlarged-modal-bg);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;box-sizing:border-box;cursor:pointer;transition:background-color .3s ease}.enlarged-frame-modal img{max-width:90vw;max-height:90vh;border:3px solid var(--enlarged-modal-img-border);border-radius:4px;object-fit:contain;cursor:default;transition:border-color .3s ease}.enlarged-frame-modal-close{position:absolute;top:15px;right:25px;font-size:2.5em;font-weight:700;color:var(--enlarged-modal-close-color);cursor:pointer;background:none;border:none;line-height:1;padding:5px;transition:color .2s ease}.enlarged-frame-modal-close:hover{color:var(--enlarged-modal-close-hover-color)}.all-frames-panel{position:fixed;z-index:900;background-color:var(--all-frames-panel-bg);border:1px solid var(--all-frames-panel-border);border-radius:6px;box-shadow:0 5px 20px #0003;display:flex;flex-direction:column;overflow:hidden;transition:background-color .3s ease,border-color .3s ease}.all-frames-panel-header{padding:8px 12px;background-color:var(--all-frames-panel-header-bg);border-bottom:1px solid var(--all-frames-panel-header-border);cursor:move;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none;transition:background-color .3s ease,border-color .3s ease}.all-frames-panel-title-text{font-weight:500;font-size:.9em;color:var(--text-color-primary);transition:color .3s ease}.all-frames-panel-close-btn{background:none;border:none;font-size:1.6em;color:var(--all-frames-panel-close-btn-color);cursor:pointer;padding:0 4px;line-height:1;transition:color .2s ease}.all-frames-panel-close-btn:hover{color:var(--all-frames-panel-close-btn-hover-color)}.all-frames-panel-content{flex-grow:1;overflow-y:auto;padding:10px;display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--all-frames-panel-thumb-min-width, 100px),1fr));gap:8px;background-color:var(--all-frames-panel-content-bg);transition:background-color .3s ease}.all-frames-panel-content::-webkit-scrollbar{width:6px}.all-frames-panel-content::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-color);border-radius:3px}.all-frames-panel-content::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover-color)}.all-frames-panel-resize-handle{position:absolute;bottom:0;right:0;width:12px;height:12px;cursor:nwse-resize;background-color:transparent}.shortcuts-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--shortcuts-modal-overlay-bg);display:flex;align-items:center;justify-content:center;z-index:1010;padding:20px;box-sizing:border-box;cursor:pointer;transition:background-color .3s ease}.shortcuts-modal-content{background-color:var(--shortcuts-modal-bg);padding:0;border-radius:6px;box-shadow:0 5px 20px #00000040;max-width:500px;width:90%;max-height:80vh;display:flex;flex-direction:column;cursor:default;border:1px solid var(--shortcuts-modal-border);transition:background-color .3s ease,border-color .3s ease}.shortcuts-modal-header{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;border-bottom:1px solid var(--shortcuts-modal-header-border);background-color:var(--shortcuts-modal-header-bg);border-top-left-radius:5px;border-top-right-radius:5px;transition:background-color .3s ease,border-color .3s ease}.shortcuts-modal-header h2{margin:0;font-size:1.1em;font-weight:500;color:var(--text-color-primary);transition:color .3s ease}.shortcuts-modal-close-btn{background:none;border:none;font-size:1.8em;font-weight:700;color:var(--shortcuts-modal-close-color);cursor:pointer;padding:0 5px;line-height:1;transition:color .2s ease}.shortcuts-modal-close-btn:hover{color:var(--shortcuts-modal-close-hover-color)}.shortcuts-list{list-style-type:none;padding:15px;margin:0;overflow-y:auto;font-size:.9em;color:var(--shortcuts-list-text-color);transition:color .3s ease}.shortcuts-list::-webkit-scrollbar{width:6px}.shortcuts-list::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-color);border-radius:3px}.shortcuts-list::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover-color)}.shortcuts-list li{margin-bottom:8px;line-height:1.5}.shortcuts-list kbd{background-color:var(--shortcuts-kbd-bg);border:1px solid var(--shortcuts-kbd-border);border-radius:3px;padding:2px 5px;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;font-size:.9em;color:var(--shortcuts-kbd-text-color);margin-right:8px;transition:background-color .3s ease,border-color .3s ease,color .3s ease}.shortcuts-list hr{border:none;border-top:1px solid var(--shortcuts-hr-color);margin:12px 0;transition:border-color .3s ease}.shortcuts-list strong{font-weight:600;color:var(--text-color-primary)}@media(max-width:600px){.app-header{flex-direction:column;align-items:stretch}.header-actions{justify-content:space-around;width:100%;flex-wrap:wrap;gap:6px}.control-button{padding:6px 8px;font-size:.85em}.tiled-frames-container{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}.all-frames-panel-content{grid-template-columns:repeat(auto-fill,minmax(var(--all-frames-panel-thumb-min-width, 70px),1fr))}.shortcuts-modal-content{width:95%;max-height:90vh}}