*{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary:#0f0f0f;--bg-secondary:#1a1a1a;--bg-tertiary:#242424;--accent:#10b981;--accent-dim:#059669;--accent-bright:#34d399;--text-primary:#e5e7eb;--text-secondary:#9ca3af;--border:#2a2a2a;--success:#10b981;--warning:#f59e0b;--danger:#ef4444}body{background:linear-gradient(135deg, var(--bg-primary) 0%, #121212 100%);color:var(--text-primary);min-height:100vh;font-family:DM Sans,sans-serif;line-height:1.6}.app-container{max-width:1400px;margin:0 auto;padding:2rem}header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:2rem;animation:.6s ease-out fadeInDown;display:flex}.header-title{flex:1}h1{background:linear-gradient(135deg, var(--accent-bright), var(--accent));-webkit-text-fill-color:transparent;letter-spacing:-.02em;-webkit-background-clip:text;background-clip:text;margin-bottom:.25rem;font-size:2rem;font-weight:700}.subtitle{color:var(--text-secondary);font-size:.9rem}.upload-buttons{gap:.75rem;display:flex}.btn{cursor:pointer;border:none;border-radius:8px;justify-content:center;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-family:DM Sans,sans-serif;font-size:1rem;font-weight:600;transition:all .3s;display:flex}.btn-primary{background:linear-gradient(135deg, var(--accent), var(--accent-dim));color:var(--bg-primary)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 20px #10b9814d}.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border)}.btn-secondary:hover{background:var(--bg-secondary);border-color:var(--accent)}.btn-sort-active{background:linear-gradient(135deg, var(--accent), var(--accent-dim));color:var(--bg-primary);font-weight:700}.btn-sort-active:hover{transform:translateY(-2px);box-shadow:0 8px 20px #10b9814d}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.controls{background:var(--bg-secondary);border-radius:12px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.5rem;padding:1.5rem;animation:.6s ease-out .2s both fadeIn;display:flex}.controls-group{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.sort-badge{background:var(--bg-tertiary);color:var(--text-secondary);border-radius:6px;padding:.5rem 1rem;font-family:JetBrains Mono,monospace;font-size:.9rem}.sort-badge.active{background:linear-gradient(135deg, var(--accent), var(--accent-dim));color:var(--bg-primary)}.file-list{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.5rem;margin-bottom:2rem;animation:.6s ease-out .3s both fadeIn;display:grid}.file-card{background:var(--bg-secondary);cursor:pointer;-webkit-user-select:none;user-select:none;border:2px solid #0000;border-radius:12px;transition:all .3s;position:relative;overflow:hidden}.file-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px #0000004d}.file-card.selected{border-color:var(--accent);box-shadow:0 0 0 3px #10b9814d}.file-card.focused{outline:2px solid var(--accent-bright);outline-offset:2px}.file-card-preview{aspect-ratio:1;background:var(--bg-tertiary);justify-content:center;align-items:center;width:100%;display:flex;position:relative;overflow:hidden}.file-card-preview img{object-fit:cover;pointer-events:none;-webkit-user-select:none;user-select:none;width:100%;height:100%}.file-card-checkbox{z-index:10;position:absolute;top:.75rem;left:.75rem}.file-card-index{color:var(--text-primary);z-index:10;background:#000000b3;border-radius:4px;padding:.25rem .5rem;font-family:JetBrains Mono,monospace;font-size:.75rem;position:absolute;top:.75rem;right:.75rem}.file-card-info{padding:1rem}.file-card.compact .file-card-info{padding:.5rem}.file-card-name{word-break:break-word;min-height:2.4em;margin-bottom:.75rem;font-family:JetBrains Mono,monospace;font-size:.85rem;line-height:1.2}.file-card.compact .file-card-name{min-height:2em;margin-bottom:.5rem;font-size:.7rem}.file-card-name.renamed{color:var(--success)}.file-card-actions{align-items:center;gap:.5rem;display:flex}.file-card.compact .file-card-actions{gap:.25rem}.file-card.compact .arrow-btn{height:24px;font-size:.85rem}.file-card.compact .file-card-index{padding:.2rem .4rem;font-size:.65rem}.file-card.compact .checkbox{width:16px;height:16px}.file-icon-large{background:linear-gradient(135deg, var(--accent-dim), var(--accent));width:100%;height:100%;color:var(--bg-primary);justify-content:center;align-items:center;font-size:3rem;font-weight:700;display:flex}.checkbox{cursor:pointer;width:20px;height:20px;accent-color:var(--accent)}.arrow-btns{flex:1;gap:.25rem;display:flex}.arrow-btn{border:1px solid var(--border);background:var(--bg-tertiary);height:32px;color:var(--text-primary);cursor:pointer;border-radius:6px;flex:1;justify-content:center;align-items:center;font-size:1rem;transition:all .2s;display:flex}.arrow-btn:hover:not(:disabled){background:var(--accent);color:var(--bg-primary);border-color:var(--accent)}.arrow-btn:disabled{opacity:.3;cursor:not-allowed}.rename-section{background:var(--bg-secondary);border-top:2px solid var(--accent);z-index:100;padding:.75rem 1.5rem;animation:.4s ease-out slideUp;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -4px 20px #00000080}.rename-section-inner{flex-wrap:nowrap;align-items:center;gap:.75rem;max-width:1400px;margin:0 auto;display:flex}.rename-main{flex-direction:row;flex:1;align-items:center;gap:.5rem;min-width:300px;display:flex}.rename-actions{flex-direction:row;flex-shrink:0;align-items:center;gap:.5rem;display:flex}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.rename-section-spacer{height:52px}.rename-section h3{color:var(--accent);white-space:nowrap;margin:0;font-size:.9rem}.rename-tabs{background:var(--bg-tertiary);border:1px solid var(--border);border-radius:8px;flex-shrink:0;gap:0;padding:3px;display:flex}.rename-tab{cursor:pointer;color:var(--text-secondary);white-space:nowrap;background:0 0;border:none;border-radius:6px;padding:.3rem .9rem;font-family:DM Sans,sans-serif;font-size:.8rem;font-weight:600;transition:all .2s}.rename-tab.active{background:linear-gradient(135deg, var(--accent), var(--accent-dim));color:var(--bg-primary);box-shadow:0 2px 8px #10b98159}.rename-tab:not(.active):hover{color:var(--text-primary);background:#ffffff0d}.rename-input-group{flex:none;align-items:center;gap:.5rem;display:flex}.rename-input-group.move-group{flex:none;min-width:200px;max-width:220px}.rename-input-group.start-from{min-width:unset;flex:none;align-items:center;gap:.4rem}.start-from-label{color:var(--text-secondary);white-space:nowrap;border-left:1px solid var(--border);margin-left:.2rem;padding-left:.6rem;font-family:JetBrains Mono,monospace;font-size:.75rem}.rename-input{background:var(--bg-tertiary);border:1px solid var(--border);width:200px;min-width:0;color:var(--text-primary);border-radius:6px;flex:1;padding:.5rem .75rem;font-family:JetBrains Mono,monospace;font-size:.9rem;transition:all .3s}.rename-input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 2px #10b98133}.rename-input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.rename-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.rename-input[type=number]{-moz-appearance:textfield}.preview-text{background:var(--bg-tertiary);color:var(--text-secondary);border:1px solid var(--border);white-space:nowrap;text-overflow:ellipsis;border-radius:6px;flex:1;min-width:0;padding:.4rem .65rem;font-family:JetBrains Mono,monospace;font-size:.75rem;overflow:hidden}.preview-text strong{color:var(--accent-bright)}.stats{flex-wrap:wrap;gap:1rem;display:flex}.stat{align-items:baseline;gap:.35rem;display:flex}.stat-label{color:var(--text-secondary);font-size:.75rem}.stat-value{color:var(--accent);font-family:JetBrains Mono,monospace;font-size:1rem;font-weight:700}.empty-state{text-align:center;color:var(--text-secondary);padding:4rem 2rem}.empty-state svg{opacity:.5;width:120px;height:120px;margin-bottom:1rem}input[type=file]{display:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@media (width<=1200px){.file-list{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))!important}.file-list.compact-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))!important}}@media (width<=768px){h1{font-size:1.5rem}.app-container{padding:1rem}.controls{flex-direction:column;align-items:stretch}.file-list{gap:1rem;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))!important}.file-list.compact-grid{grid-template-columns:repeat(auto-fill,minmax(90px,1fr))!important}.rename-section{padding:.75rem}.rename-section-inner{flex-wrap:wrap;gap:.5rem}.rename-tabs{flex-shrink:0;justify-content:stretch;width:100%}.rename-tab{text-align:center;flex:1}.rename-main{flex-wrap:wrap;flex:0 0 100%;gap:.4rem;width:100%}.rename-input-group{flex:auto;min-width:0}.rename-actions{flex-flow:wrap;flex:0 0 100%;gap:.5rem;width:100%}.rename-input-group.move-group{flex:1;min-width:0;max-width:100%}.download-btn{flex:1;justify-content:center}.start-from-label{border-left:none;margin-left:0;padding-left:0}.stats{justify-content:space-between}.rename-input-group,.preview-text{min-width:100%}.rename-input-group.start-from{width:100%}}::selection{background:var(--accent);color:var(--bg-primary)}::selection{background:var(--accent);color:var(--bg-primary)}::-ms-selection{background:var(--accent);color:var(--bg-primary)}::-webkit-scrollbar{width:10px;height:10px;transition:all 1s}::-webkit-scrollbar-thumb{background-color:#10b98166;background-clip:padding-box;border:2px solid #0000;border-radius:5px;transition:all 1s}::-webkit-scrollbar-thumb:vertical:hover{background-color:#10b98199;transition:all .3s}::-webkit-scrollbar-thumb:horizontal:hover{background-color:#10b98199;transition:all .3s}::-webkit-scrollbar-track{background-color:var(--bg-primary)}::-webkit-scrollbar-thumb:vertical:active{background:#10b981cc}::-webkit-scrollbar-thumb:horizontal:active{background:#10b981cc}::-webkit-scrollbar-corner{background:0 0}.file-card[draggable=true]{cursor:grab}.file-card.is-dragging{opacity:.35;filter:grayscale(60%);border-style:dashed;border-color:var(--accent);cursor:grabbing}.file-card.drop-target-before{border-left:3px solid #0f8!important;box-shadow:-6px 0 16px #0f86!important}.file-card.drop-target-after{border-right:3px solid #0f8!important;box-shadow:6px 0 16px #0f86!important}.drop-indicator{z-index:1000;pointer-events:none;background-color:#0f8;border-radius:4px;width:8px;animation:.8s ease-in-out infinite pulseIndicator;position:absolute;top:-12px;bottom:-12px;box-shadow:0 0 24px #0f8,0 0 12px #10b981,0 0 6px #fff}.drop-indicator-left{left:-14px}.drop-indicator-right{right:-14px}.drop-indicator:before,.drop-indicator:after{content:"";background-color:#0f8;border:2px solid #fff;border-radius:50%;width:16px;height:16px;position:absolute;left:50%;transform:translate(-50%);box-shadow:0 0 14px #0f8,0 0 6px #fff}.drop-indicator:before{top:-6px}.drop-indicator:after{bottom:-6px}@keyframes pulseIndicator{0%,to{opacity:.9;transform:scaleX(1)}50%{opacity:1;transform:scaleX(1.3)}}.custom-drag-overlay{z-index:99999;color:#fff;pointer-events:none;white-space:nowrap;background:#141414;border:2px solid #10b981;border-radius:10px;align-items:center;gap:.6rem;padding:.7rem 1.3rem;font-family:DM Sans,sans-serif;font-size:.95rem;font-weight:700;display:flex;position:fixed;box-shadow:0 12px 35px #000000e6,0 0 24px #10b98199;opacity:1!important}.ghost-icon{font-size:1.25rem}