:root{--color-primary: #FF5722;--color-white: #FFFFFF;--color-black: #000000;--color-background: #000000;--color-background-secondary: #2F1006;--nav-background: #090909;--color-surface: #1C1C1C;--text-secondary: #B3B3B3;--color-on-background: #FFFFFF;--ripple-color: rgba(255, 255, 255, .2);--transparent-50: rgba(255, 255, 255, .22);--nav-item-active-bg: rgba(255, 87, 34, .13);--color-background-transparent: rgba(0, 0, 0, .85)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background-color:var(--color-background);color:var(--color-on-background);min-height:100vh}#app{width:100%;height:100vh}.login-container{max-width:400px;margin:0 auto;padding:40px 20px;min-height:100vh;display:flex;flex-direction:column;justify-content:center}.login-container>div:first-child{background-color:var(--color-surface);border-radius:16px;padding:40px 32px;box-shadow:0 8px 32px #0006}.logo-container{text-align:center;margin-bottom:32px}.logo{width:80px;height:80px;background:linear-gradient(135deg,var(--color-primary),#FF7043);border-radius:20px;display:inline-flex;align-items:center;justify-content:center;font-size:36px;margin-bottom:16px}h1{font-size:28px;font-weight:600;text-align:center;margin-bottom:8px;color:var(--color-white)}.subtitle{text-align:center;color:var(--text-secondary);font-size:14px;margin-bottom:32px}.form-group{margin-bottom:20px}label{display:block;margin-bottom:8px;color:var(--color-on-background);font-size:14px;font-weight:500}input{width:100%;padding:14px 16px;background-color:var(--color-background);border:1px solid rgba(255,255,255,.1);border-radius:8px;color:var(--color-white);font-size:15px;transition:all .3s ease}input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #ff57221a}input::placeholder{color:var(--text-secondary)}.forgot-password{text-align:right;margin-top:8px}.forgot-password a{color:var(--color-primary);text-decoration:none;font-size:13px;transition:opacity .2s}.forgot-password a:hover{opacity:.8}.btn{padding:14px;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease}.btn-primary{width:100%;background-color:var(--color-primary);color:var(--color-white);margin-top:8px}.btn-primary:hover{background-color:#e64a19;transform:translateY(-1px);box-shadow:0 4px 12px #ff57224d}.btn-primary:active{transform:translateY(0)}.error-message{background-color:#f443361a;border:1px solid rgba(244,67,54,.3);color:#ff5252;padding:12px;border-radius:8px;margin-bottom:20px;font-size:14px;display:none}.error-message.show{display:block}.loading{opacity:.6;pointer-events:none}.loading-screen{width:100%;height:100vh;display:flex;align-items:center;justify-content:center;background-color:var(--color-background)}.loading-spinner-large{animation:spin 1.5s linear infinite;color:var(--color-primary)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.app-container{display:flex;height:100vh;overflow:hidden}.sidebar{width:280px;background-color:var(--color-surface);border-right:1px solid rgba(255,255,255,.05);display:flex;flex-direction:column;overflow:hidden}.sidebar-header{padding:24px 20px;border-bottom:1px solid rgba(255,255,255,.05);display:flex;align-items:center;gap:12px}.logo-small{width:40px;height:40px;background:linear-gradient(135deg,var(--color-primary),#FF7043);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px}.sidebar-header h2{font-size:20px;font-weight:600}.user-info{padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.05)}.user-email{font-size:13px;color:var(--text-secondary);margin-bottom:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn-signout{width:100%;padding:8px 16px;background-color:var(--color-background);color:var(--color-white);border:1px solid rgba(255,255,255,.1);border-radius:6px;font-size:13px;cursor:pointer;transition:all .2s}.btn-signout:hover{background-color:var(--nav-background);border-color:#fff3}.folders-container{flex:1;overflow-y:auto;padding:16px 0}.folders-header{display:flex;align-items:center;justify-content:space-between;padding:0 20px 12px}.folders-header h3{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary)}.btn-add-folder{width:24px;height:24px;background-color:var(--color-primary);border:none;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;color:var(--color-white)}.btn-add-folder:hover{background-color:#e64a19;transform:scale(1.05)}.folders-list{padding:0 12px}.folder-item{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;margin-bottom:4px;border-radius:8px;transition:all .2s;position:relative}.folder-item:hover{background-color:#ffffff0d}.folder-item.active{background-color:var(--nav-item-active-bg);color:var(--color-primary)}.folder-item-content{display:flex;align-items:center;gap:12px;flex:1;cursor:pointer;overflow:hidden}.folder-icon svg{width:18px;height:18px;stroke:currentColor;flex-shrink:0}.folder-name{font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.folder-delete-btn{width:28px;height:28px;background-color:transparent;border:none;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;color:var(--text-secondary);opacity:0;flex-shrink:0}.folder-item:hover .folder-delete-btn{opacity:1}.folder-delete-btn:hover{background-color:#f4433633;color:#f44336}.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}.content-header{padding:24px 32px;border-bottom:1px solid rgba(255,255,255,.05);display:flex;align-items:center;justify-content:space-between;gap:20px}.content-header h1{font-size:24px;font-weight:600;text-align:left;flex:1}.btn-upload{display:flex;align-items:center;gap:8px;padding:12px 20px;background-color:var(--color-primary);color:var(--color-white);border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.btn-upload:hover{background-color:#e64a19}.btn-upload svg{flex-shrink:0}.images-grid{flex:1;overflow-y:auto;padding:16px 32px 24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px;align-content:start;grid-auto-rows:max-content}.image-card{aspect-ratio:9 / 16;background-color:var(--color-surface);border-radius:12px;overflow:hidden;position:relative;box-shadow:0 2px 8px #0000004d}.image-card img{width:100%;height:100%;object-fit:cover;display:block}.image-card-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.7) 0%,transparent 30%,transparent 70%,rgba(0,0,0,.7) 100%);opacity:0;transition:opacity .2s ease;display:flex;flex-direction:column;justify-content:space-between;padding:12px}.image-card:hover .image-card-overlay{opacity:1}.image-card-actions{display:flex;gap:8px;justify-content:flex-end}.image-action-btn{width:36px;height:36px;background-color:#000c;border:1px solid rgba(255,255,255,.2);border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;color:var(--color-white);font-size:18px}.image-action-btn:hover{background-color:var(--color-primary);border-color:var(--color-primary);transform:scale(1.1)}.image-action-btn.rename:hover{background-color:#2196f3;border-color:#2196f3}.image-action-btn.delete:hover{background-color:#f44336;border-color:#f44336}.empty-state{grid-column:1 / -1;text-align:center;padding:60px 20px;color:var(--text-secondary)}.empty-icon{margin-bottom:16px;opacity:.3}.empty-icon svg{width:64px;height:64px;stroke:currentColor}.empty-state p{font-size:16px}.drop-zone{margin:16px 32px 0;padding:24px;border:2px dashed rgba(255,255,255,.2);border-radius:12px;background-color:#ffffff05;transition:all .3s ease;cursor:pointer;flex-shrink:0}.drop-zone:hover{border-color:var(--color-primary);background-color:#ff57220d}.drop-zone.drag-over{border-color:var(--color-primary);background-color:#ff57221a;border-width:3px}.drop-zone-content{display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}.drop-zone-content svg{color:var(--color-primary);opacity:.7}.drop-zone.drag-over svg{opacity:1;animation:bounce .6s ease infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.drop-zone-text{font-size:14px;font-weight:600;color:var(--color-on-background)}.drop-zone-subtext{font-size:12px;color:var(--text-secondary)}.upload-progress{padding:16px 32px;background-color:var(--color-surface);border-bottom:1px solid rgba(255,255,255,.05);max-height:300px;overflow-y:auto}.progress-item{margin-bottom:16px;padding:12px;background-color:var(--color-background);border-radius:8px}.progress-item:last-child{margin-bottom:0}.progress-info{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:13px}.progress-info svg{flex-shrink:0;color:var(--text-secondary)}.progress-filename{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.progress-percent{color:var(--text-secondary);font-weight:600;min-width:45px;text-align:right}.progress-bar{height:4px;background-color:#ffffff1a;border-radius:2px;overflow:hidden}.progress-fill{height:100%;background-color:var(--color-primary);transition:width .3s ease}.progress-item.complete .progress-fill{background-color:#4caf50}.progress-item.complete .progress-percent{color:#4caf50}.progress-item.error .progress-fill{background-color:#f44336}.progress-item.error .progress-percent{color:#f44336}.loading-spinner{grid-column:1 / -1;text-align:center;padding:60px 20px;color:var(--text-secondary);font-size:16px}.empty-folders{padding:20px;text-align:center;color:var(--text-secondary);font-size:14px}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000f2;z-index:1000;align-items:center;justify-content:center;padding:20px}.modal-content{position:relative;max-width:90vw;max-height:90vh;display:flex;flex-direction:column;align-items:center;gap:20px}.modal-close{position:absolute;top:-50px;right:0;background:none;border:none;color:var(--color-white);font-size:40px;cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;transition:opacity .2s}.modal-close:hover{opacity:.7}#modal-image{max-width:100%;max-height:calc(90vh - 100px);border-radius:12px;box-shadow:0 8px 32px #00000080}.modal-actions{display:flex;gap:12px}.btn-delete{padding:12px 32px;background-color:#f44336;color:var(--color-white);border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s}.btn-delete:hover{background-color:#d32f2f}.confirm-dialog{background-color:var(--color-surface);border-radius:16px;padding:32px;max-width:400px;width:100%}.confirm-dialog h3{font-size:20px;margin-bottom:12px}.confirm-dialog p{color:var(--text-secondary);font-size:14px;line-height:1.5;margin-bottom:24px}.confirm-actions{display:flex;gap:12px}.btn-cancel{flex:1;padding:12px;background-color:var(--color-background);color:var(--color-white);border:1px solid rgba(255,255,255,.1);border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s}.btn-cancel:hover{background-color:var(--nav-background)}.btn-confirm-delete{flex:1;padding:12px;background-color:#f44336;color:var(--color-white);border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s}.btn-confirm-delete:hover{background-color:#d32f2f}.confirm-dialog .form-group{margin-bottom:24px;text-align:left}.confirm-dialog .form-group label{display:block;margin-bottom:8px;color:var(--color-on-background);font-size:14px;font-weight:500}.confirm-dialog .form-group input{width:100%;padding:12px 16px;background-color:var(--color-background);border:1px solid rgba(255,255,255,.1);border-radius:8px;color:var(--color-white);font-size:15px;transition:all .3s ease}.confirm-dialog .form-group input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #ff57221a}.input-hint{margin-top:6px;font-size:12px;color:var(--text-secondary)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#ffffff4d}