:root{--bg-color: #ffffff;--sidebar-bg: #ffffff;--text-color: #202124;--secondary-text: #5f6368;--primary-color: #4285f4;--hover-bg: #f1f3f4;--border-color: #dadce0}*{box-sizing:border-box}body{margin:0;font-family:Google Sans,Roboto,Arial,sans-serif;background-color:var(--bg-color);color:var(--text-color);-webkit-font-smoothing:antialiased;overflow:hidden}.app-container{display:flex;height:100vh}.app-loading{display:flex;align-items:center;justify-content:center;height:100vh;background:var(--bg-color)}.loading-spinner{text-align:center}.loading-spinner .logo-icon{font-size:64px;display:block;margin-bottom:16px;animation:pulse 2s ease-in-out infinite}.loading-spinner p{color:var(--secondary-text);font-size:18px}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.login-container{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);padding:20px}.login-box{background:#fff;border-radius:16px;padding:48px;width:100%;max-width:450px;box-shadow:0 10px 40px #0003}.login-header{text-align:center;margin-bottom:32px}.login-header .logo-icon{font-size:48px;display:block;margin-bottom:16px}.login-header h1{margin:0 0 8px;font-size:32px;font-weight:500;color:var(--text-color)}.login-header p{margin:0;color:var(--secondary-text);font-size:16px}.login-form{margin-bottom:24px}.login-form .form-group{margin-bottom:20px}.login-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.login-form label{display:flex;align-items:center;gap:12px;padding:12px 16px;border:2px solid var(--border-color);border-radius:8px;transition:border-color .2s}.login-form label:focus-within{border-color:var(--primary-color)}.login-form label svg{color:var(--secondary-text);font-size:18px;flex-shrink:0}.login-form input{flex:1;border:none;outline:none;font-size:16px;font-family:inherit;color:var(--text-color);background:transparent}.login-form input::placeholder{color:var(--secondary-text)}.error-message{background:#fee;color:#c33;padding:12px 16px;border-radius:8px;margin-bottom:20px;font-size:14px;border-left:4px solid #c33}.login-btn{width:100%;padding:14px;background:var(--primary-color);color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:500;cursor:pointer;transition:background .2s,transform .1s}.login-btn:hover:not(:disabled){background:#3367d6;transform:translateY(-1px)}.login-btn:disabled{opacity:.6;cursor:not-allowed}.login-footer{text-align:center;padding-top:24px;border-top:1px solid var(--border-color)}.login-hint{margin:0;color:var(--secondary-text);font-size:14px}.login-hint strong{color:var(--primary-color);font-weight:600}.top-bar-actions{display:flex;align-items:center;gap:16px}.user-name{color:var(--text-color);font-weight:500;font-size:14px}.logout-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:none;border:none;color:var(--text-color);font-size:20px;cursor:pointer;border-radius:50%;transition:background .2s}.logout-btn:hover{background:var(--hover-bg)}.sidebar{width:256px;padding:12px;display:flex;flex-direction:column;flex-shrink:0;transition:transform .3s ease}.sidebar-overlay{display:none}.logo{display:flex;align-items:center;padding:12px 24px;font-size:22px;font-weight:500;color:var(--text-color);margin-bottom:12px}.logo-icon{margin-right:8px}.nav-item{display:flex;align-items:center;padding:0 24px;height:48px;border-radius:24px;text-decoration:none;color:var(--secondary-text);font-weight:500;margin-bottom:4px;transition:background-color .2s}.nav-item:hover{background-color:var(--hover-bg);color:var(--text-color)}.nav-item.active{background-color:#e8f0fe;color:var(--primary-color)}.nav-item svg{margin-right:16px;font-size:20px}.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden}.top-bar{height:64px;display:flex;align-items:center;padding:0 24px;justify-content:space-between;gap:16px}.hamburger-btn{display:none;background:none;border:none;font-size:24px;color:var(--text-color);cursor:pointer;padding:8px;border-radius:50%;transition:background .2s}.hamburger-btn:hover{background:var(--hover-bg)}.search-bar input{background:#f1f3f4;border:none;border-radius:8px;padding:12px 16px;width:400px;font-size:16px;color:var(--text-color);outline:none;transition:background .2s,box-shadow .2s}.search-bar input:focus{background:#fff;box-shadow:0 1px 2px #0000001a,0 2px 4px #0000001a}.upload-btn{display:flex;align-items:center;gap:8px;background-color:var(--primary-color);color:#fff;border:none;padding:10px 24px;border-radius:24px;font-weight:500;cursor:pointer;box-shadow:0 1px 2px #0003;transition:all .2s;position:relative}.upload-btn:hover:not(:disabled){box-shadow:0 2px 4px #0000004d;transform:translateY(-1px)}.upload-btn.dragging{background-color:#34a853;box-shadow:0 0 0 3px #34a85333;transform:scale(1.05)}.upload-btn.uploading{background-color:#5f6368;cursor:wait;opacity:.8}.upload-btn:disabled{cursor:not-allowed}.content-area{flex:1;overflow-y:auto;padding:24px}.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}.photo-item{aspect-ratio:1;position:relative;border-radius:8px;overflow:hidden;background:#f1f3f4}.photo-wrapper{width:100%;height:100%;cursor:pointer}.photo-wrapper img{width:100%;height:100%;object-fit:cover;transition:transform .2s}.photo-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(to bottom,rgba(0,0,0,.2) 0%,transparent 30%);opacity:0;transition:opacity .2s}.photo-item:hover .photo-overlay{opacity:1}.favorite-btn{position:absolute;top:8px;right:8px;background:none;border:none;color:#fff;font-size:20px;cursor:pointer;opacity:.7;transition:opacity .2s,transform .2s}.favorite-btn:hover{opacity:1;transform:scale(1.1)}.favorite-btn.active{color:#ff4081;opacity:1}.lightbox{position:fixed;top:0;left:0;right:0;bottom:0;background:#000;z-index:1000;display:flex;flex-direction:column}.lightbox-header{height:64px;display:flex;align-items:center;padding:0 16px;color:#fff;z-index:10}.icon-btn{background:none;border:none;color:#fff;font-size:20px;padding:12px;cursor:pointer;border-radius:50%}.icon-btn:hover{background:#ffffff1a}.spacer{flex:1}.lightbox-content{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.lightbox-img{max-width:100%;max-height:100%;object-fit:contain;cursor:grab}.lightbox-img:active{cursor:grabbing}.lightbox-footer{padding:16px;color:#fff;background:linear-gradient(to top,rgba(0,0,0,.8),transparent);display:flex;flex-direction:column;gap:16px}.photo-info h3{margin:0 0 4px;font-size:18px}.photo-info p{margin:0;font-size:14px;opacity:.8}.nav-btn{position:absolute;top:50%;transform:translateY(-50%);background:#0000004d;border:none;color:#fff;font-size:24px;padding:16px;cursor:pointer;border-radius:50%;transition:background .2s;z-index:10;display:flex;align-items:center;justify-content:center}.nav-btn:hover{background:#00000080}.nav-btn.prev{left:16px}.nav-btn.next{right:16px}.thumbnail-strip{display:flex;gap:8px;overflow-x:auto;justify-content:center;padding-bottom:8px;scrollbar-width:none;-ms-overflow-style:none}.thumbnail-strip::-webkit-scrollbar{display:none}.thumbnail{width:48px;height:48px;flex-shrink:0;border-radius:4px;overflow:hidden;cursor:pointer;opacity:.5;transition:opacity .2s,transform .2s;border:2px solid transparent}.thumbnail:hover{opacity:.8}.thumbnail.active{opacity:1;border-color:var(--primary-color);transform:scale(1.1)}.thumbnail img{width:100%;height:100%;object-fit:cover}.albums-container{padding:24px}.albums-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}.albums-header h2{margin:0;font-size:28px;font-weight:500}.create-album-btn{display:flex;align-items:center;gap:8px;background-color:var(--primary-color);color:#fff;border:none;padding:12px 24px;border-radius:24px;font-weight:500;cursor:pointer;transition:box-shadow .2s}.create-album-btn:hover{box-shadow:0 2px 4px #0000004d}.albums-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:24px}.album-card{background:#fff;border-radius:12px;overflow:hidden;cursor:pointer;box-shadow:0 1px 3px #0000001a;transition:box-shadow .2s}.album-card:hover{box-shadow:0 4px 12px #00000026}.album-cover{width:100%;aspect-ratio:1;background:var(--hover-bg);display:flex;align-items:center;justify-content:center}.album-cover img{width:100%;height:100%;object-fit:cover}.album-placeholder{font-size:48px;color:var(--secondary-text);opacity:.3}.album-info{padding:16px}.album-info h3{margin:0 0 8px;font-size:18px;font-weight:500}.album-info p{margin:0;color:var(--secondary-text);font-size:14px}.album-view{padding:24px}.album-view-header{display:flex;align-items:center;gap:16px;margin-bottom:32px;flex-wrap:wrap}.back-btn{display:flex;align-items:center;gap:8px;background:none;border:none;color:var(--text-color);font-size:16px;cursor:pointer;padding:8px 16px;border-radius:8px;transition:background .2s}.back-btn:hover{background:var(--hover-bg)}.album-title-section{flex:1}.album-title-section h1{margin:0 0 8px;font-size:32px;font-weight:500}.album-title-section p{margin:0 0 4px;color:var(--secondary-text)}.photo-count{color:var(--secondary-text);font-size:14px}.add-photos-btn{display:flex;align-items:center;gap:8px;background-color:var(--primary-color);color:#fff;border:none;padding:10px 20px;border-radius:24px;font-weight:500;cursor:pointer;transition:box-shadow .2s}.add-photos-btn:hover{box-shadow:0 2px 4px #0000004d}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:#fff;border-radius:12px;padding:24px;max-width:500px;width:90%;max-height:90vh;overflow-y:auto}.modal-content.large{max-width:800px}.modal-content h2{margin:0 0 24px;font-size:24px;font-weight:500}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;font-weight:500;color:var(--text-color)}.form-group input,.form-group textarea{width:100%;padding:12px;border:1px solid var(--border-color);border-radius:8px;font-size:16px;font-family:inherit;outline:none;transition:border-color .2s}.form-group input:focus,.form-group textarea:focus{border-color:var(--primary-color)}.modal-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:24px}.modal-actions button{padding:10px 24px;border-radius:24px;font-weight:500;cursor:pointer;border:none;transition:background .2s}.modal-actions button:not(.primary){background:var(--hover-bg);color:var(--text-color)}.modal-actions button:not(.primary):hover{background:var(--border-color)}.modal-actions button.primary{background:var(--primary-color);color:#fff}.modal-actions button.primary:hover{box-shadow:0 2px 4px #0000004d}.modal-actions button:disabled{opacity:.5;cursor:not-allowed}.photo-selection-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin-bottom:24px;max-height:400px;overflow-y:auto}.selectable-photo{aspect-ratio:1;position:relative;border-radius:8px;overflow:hidden;cursor:pointer;border:3px solid transparent;transition:border-color .2s}.selectable-photo:hover{border-color:var(--hover-bg)}.selectable-photo.selected{border-color:var(--primary-color)}.selectable-photo img{width:100%;height:100%;object-fit:cover}.selection-check{position:absolute;top:8px;right:8px;background:var(--primary-color);color:#fff;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700}@media (max-width: 768px){.nav-btn{display:none}.thumbnail-strip{justify-content:flex-start}.hamburger-btn{display:block}.sidebar{position:fixed;top:0;left:0;height:100vh;z-index:999;background:var(--sidebar-bg);transform:translate(-100%);box-shadow:2px 0 8px #0000001a}.sidebar.open{transform:translate(0)}.sidebar-overlay{display:block;position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;z-index:998}.app-container{flex-direction:column}.main-content{width:100%}.top-bar{padding:0 16px}.search-bar{flex:1}.search-bar input{width:100%;max-width:none}.upload-btn{padding:10px 16px;font-size:14px}.user-name{display:none}.logout-btn{width:36px;height:36px;font-size:18px}.login-box{padding:32px 24px}.login-header h1{font-size:28px}.login-form .form-row{grid-template-columns:1fr}}