*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:linear-gradient(90deg,#2a1f3d,#1a1625);color:#e5e5e5;min-height:100vh}.hidden{display:none!important}.login-container{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:20px}.login-card{background:#ffffff0d;backdrop-filter:blur(10px);border:1px solid rgba(248,165,194,.2);border-radius:20px;padding:40px;max-width:400px;width:100%;text-align:center}.login-card h1{color:#f8a5c2;margin-bottom:10px;font-size:2.5rem;font-weight:700}.login-card>p{color:#c084fc;margin-bottom:30px;font-size:1.1rem}.form-group{margin-bottom:25px;text-align:left}.form-group label{display:block;margin-bottom:8px;color:#f8a5c2;font-weight:500}.form-group input{width:100%;padding:12px 16px;border:1px solid rgba(248,165,194,.3);border-radius:10px;background:#ffffff1a;color:#e5e5e5;font-size:1rem;transition:all .3s ease}.form-group input:focus{outline:none;border-color:#f8a5c2;box-shadow:0 0 0 3px #f8a5c233}.login-btn{width:100%;padding:12px;background:linear-gradient(135deg,#f8a5c2,#c084fc);border:none;border-radius:10px;color:#fff;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease}.login-btn:hover{transform:translateY(-2px);box-shadow:0 10px 20px #f8a5c24d}.link-btn{background:none;border:none;color:#c084fc;cursor:pointer;text-decoration:underline;font-size:.9rem;transition:color .3s ease;padding-top:30px}.link-btn:hover{color:#f8a5c2}.back-btn{background:#ffffff1a;border:1px solid rgba(248,165,194,.3);color:#f8a5c2;padding:10px 20px;border-radius:8px;cursor:pointer;font-size:.9rem;transition:all .3s ease;margin-bottom:20px}.back-btn:hover{background:#f8a5c21a;transform:translateY(-1px)}.password-requirements{text-align:left;margin-top:10px;margin-bottom:20px;padding:15px;background:#ffffff0d;border-radius:8px;border-left:3px solid #f8a5c2}.password-requirements h4{color:#f8a5c2;margin:0 0 10px;font-size:.9rem}.password-requirements ul{margin:0;padding-left:20px;color:#c084fc;font-size:.8rem}.password-requirements li{margin-bottom:5px}.demo-info{margin-top:30px;padding:20px;background:#a7f3d01a;border-radius:10px;border:1px solid rgba(167,243,208,.2)}.demo-info p{color:#a7f3d0;font-size:.9rem;margin-bottom:5px}.gallery-container{min-height:100vh}.gallery-header{background:#ffffff0d;backdrop-filter:blur(10px);border-bottom:1px solid rgba(248,165,194,.2);padding:20px;position:sticky;top:0;z-index:100}.header-content{display:flex;justify-content:space-between;align-items:center;max-width:1400px;margin:0 auto}.header-content h1{color:#f8a5c2;font-size:2rem;font-weight:700}.header-actions{display:flex;gap:15px}.upload-btn,.logout-btn{padding:10px 20px;border:none;border-radius:10px;font-weight:500;cursor:pointer;transition:all .3s ease}.upload-btn{background:linear-gradient(135deg,#f8a5c2,#c084fc);color:#fff}.upload-btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px #f8a5c24d}.logout-btn{background:#ffffff1a;color:#e5e5e5;border:1px solid rgba(248,165,194,.3)}.logout-btn:hover{background:#f8a5c233}.collections-section{background:#ffffff08;border-bottom:1px solid rgba(248,165,194,.1);padding:20px;max-width:1400px;margin:0 auto}.collections-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.collections-header h2{color:#f8a5c2;font-size:1.5rem;font-weight:600}.add-collection-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;background:#f8a5c233;border:1px solid rgba(248,165,194,.3);border-radius:8px;color:#f8a5c2;cursor:pointer;transition:all .3s ease;font-size:.9rem}.add-collection-btn:hover{background:#f8a5c24d;transform:translateY(-1px)}.collections-container{display:flex;gap:20px;overflow-x:auto;padding-bottom:10px}.collections-container::-webkit-scrollbar{height:6px}.collections-container::-webkit-scrollbar-track{background:#ffffff1a;border-radius:3px}.collections-container::-webkit-scrollbar-thumb{background:#f8a5c280;border-radius:3px}.collections-list{display:flex;gap:20px}.collection-folder{display:flex;flex-direction:column;align-items:center;min-width:120px;padding:15px;background:#ffffff0d;border:2px solid rgba(248,165,194,.2);border-radius:15px;cursor:pointer;transition:all .3s ease;position:relative}.collection-folder:hover{background:#f8a5c21a;transform:translateY(-3px);box-shadow:0 8px 25px #f8a5c233}.collection-folder.active{background:#f8a5c233;border-color:#f8a5c2;box-shadow:0 0 20px #f8a5c24d}.collection-folder.drag-over{background:#a7f3d033;border-color:#a7f3d0;transform:scale(1.05)}.folder-icon{position:relative;margin-bottom:10px}.folder-icon svg{color:#f8a5c2;filter:drop-shadow(0 2px 4px rgba(248,165,194,.3))}.folder-preview{position:absolute;top:8px;left:8px;width:32px;height:24px;border-radius:4px;overflow:hidden;display:flex;align-items:center;justify-content:center}.folder-preview img{width:100%;height:100%;object-fit:cover;border-radius:3px}.folder-preview .empty-folder,.folder-preview .all-photos-icon{font-size:16px;opacity:.7}.folder-name{color:#e5e5e5;font-size:.9rem;font-weight:500;text-align:center;margin-bottom:5px;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.photo-count{color:#c084fc;font-size:.8rem;background:#c084fc33;padding:2px 8px;border-radius:10px;border:1px solid rgba(192,132,252,.3)}.photo-grid-container{max-width:1400px;margin:0 auto;padding:30px 20px}.current-collection-title{color:#f8a5c2;font-size:2rem;font-weight:600;margin-bottom:30px;text-align:center}.date-section{margin-bottom:40px}.date-header{color:#f8a5c2;font-size:1.3rem;font-weight:600;margin-bottom:20px;padding-bottom:10px;border-bottom:2px solid rgba(248,165,194,.3)}.photos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:15px}.photo-item{background:#ffffff0d;border-radius:12px;overflow:hidden;cursor:pointer;transition:all .3s ease;border:1px solid rgba(248,165,194,.2);aspect-ratio:1}.photo-item:hover{transform:translateY(-3px);box-shadow:0 10px 25px #f8a5c233;border-color:#f8a5c2}.photo-item.dragging{opacity:.5;transform:rotate(3deg) scale(.95)}.photo-item img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.photo-item:hover img{transform:scale(1.05)}.photo-modal,.video-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px}.modal-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background:#000000e6;backdrop-filter:blur(5px)}.modal-content{position:relative;max-width:90vw;max-height:90vh;background:#2a1f3df2;border-radius:15px;overflow:hidden;border:1px solid rgba(248,165,194,.3)}.modal-close{position:absolute;top:15px;right:15px;width:40px;height:40px;background:#000000b3;border:none;border-radius:50%;color:#fff;font-size:24px;cursor:pointer;z-index:10;transition:all .3s ease}.modal-close:hover{background:#f8a5c2cc}.modal-content img{width:100%;height:auto;max-height:70vh;object-fit:contain}.modal-content video{width:100%;height:auto;max-height:70vh;object-fit:contain}.modal-info{padding:20px;background:#2a1f3de6}.modal-info h3{color:#f8a5c2;font-size:1.2rem;margin-bottom:8px}.modal-info p{color:#c084fc;font-size:.9rem}.collection-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px}.collection-modal .modal-content{background:#2a1f3df2;border-radius:15px;padding:30px;min-width:400px;border:1px solid rgba(248,165,194,.3)}.collection-modal h3{color:#f8a5c2;font-size:1.5rem;margin-bottom:20px;text-align:center}.collection-modal input{width:100%;padding:12px 16px;border:1px solid rgba(248,165,194,.3);border-radius:10px;background:#ffffff1a;color:#e5e5e5;font-size:1rem;margin-bottom:20px}.collection-modal input:focus{outline:none;border-color:#f8a5c2;box-shadow:0 0 0 3px #f8a5c233}.modal-actions{display:flex;gap:15px;justify-content:flex-end}.cancel-btn,.save-btn{padding:10px 20px;border:none;border-radius:8px;cursor:pointer;font-weight:500;transition:all .3s ease}.cancel-btn{background:#ffffff1a;color:#e5e5e5;border:1px solid rgba(248,165,194,.3)}.cancel-btn:hover{background:#fff3}.save-btn{background:linear-gradient(135deg,#f8a5c2,#c084fc);color:#fff}.save-btn:hover{transform:translateY(-1px);box-shadow:0 5px 15px #f8a5c24d}.context-menu{position:absolute;background:#2a1f3df2;backdrop-filter:blur(10px);border:1px solid rgba(248,165,194,.3);border-radius:10px;padding:10px 0;min-width:200px;z-index:1000;box-shadow:0 10px 30px #0000004d}.context-item{padding:10px 20px;color:#e5e5e5;cursor:pointer;transition:all .3s ease;position:relative}.context-item:hover{background:#f8a5c233;color:#f8a5c2}.submenu{position:absolute;left:100%;top:0;background:#2a1f3df2;backdrop-filter:blur(10px);border:1px solid rgba(248,165,194,.3);border-radius:10px;padding:10px 0;min-width:150px;display:none;z-index:1001}.context-item:hover .submenu{display:block}.submenu-item{padding:8px 15px;color:#e5e5e5;cursor:pointer;transition:all .3s ease}.submenu-item:hover{background:#f8a5c233;color:#f8a5c2}.loading{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;display:flex;justify-content:center;align-items:center;z-index:9999}.spinner{width:50px;height:50px;border:3px solid rgba(248,165,194,.3);border-top:3px solid #f8a5c2;border-radius:50%;animation:spin 1s linear infinite}.view-btn{background:linear-gradient(135deg,#f8a5c2,#c084fc);width:200px;padding:10px 20px;border:none;border-radius:10px;font-weight:500;cursor:pointer;transition:all .3s ease}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 768px){.header-content{flex-direction:column;gap:15px}.header-content h1{font-size:1.5rem}.collections-section{padding:15px}.collections-header{flex-direction:column;gap:15px;align-items:flex-start}.collections-container{gap:15px}.collection-folder{min-width:100px;padding:12px}.photos-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}.videos-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}.view-controls{flex-direction:column;align-items:center}.current-collection-title{font-size:1.5rem}.login-card{padding:30px 20px}.login-card h1{font-size:2rem}.collection-modal .modal-content{min-width:300px;padding:20px}}html,body{margin:0;width:100%;height:100%}