*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;color:#333}.container{max-width:1200px;margin:0 auto;padding:20px}.header{text-align:center;margin-bottom:40px;color:#fff}.logo-container{display:flex;align-items:center;justify-content:center;margin-bottom:10px}.header h1{font-size:3rem;margin:0;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.header p{font-size:1.2rem;opacity:.9}.progress-container{margin-top:20px;text-align:center;background-color:#fffffff2;padding:15px;border-radius:10px;box-shadow:0 2px 10px #0000001a}.progress-bar{width:100%;height:20px;background-color:#f0f0f0;border-radius:10px;overflow:hidden;margin-bottom:10px}.progress-fill{height:100%;background:linear-gradient(90deg,#667eea,#764ba2);transition:width .3s ease;border-radius:10px}.progress-text{margin:5px 0;font-size:14px;color:#333;font-weight:500}.estimated-time{color:#555;font-size:12px;font-weight:400}.warning-text{margin-top:10px;padding:10px;background-color:#fff3cd;border:1px solid #ffeaa7;border-radius:5px;color:#856404;font-size:14px;font-weight:700}.spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #667eea;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 10px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 768px){.header h1{font-size:2.5rem}.header p{font-size:1rem}}.card{background:#fff;border-radius:20px;padding:30px;box-shadow:0 20px 40px #0000001a;margin-bottom:20px}.upload-area{border:3px dashed #ddd;border-radius:15px;padding:60px 20px;text-align:center;transition:all .3s ease;cursor:pointer}.upload-area:hover{border-color:#667eea;background:#f8f9ff}.upload-area.dragover{border-color:#667eea;background:#f0f4ff}.upload-input{display:none}.upload-text{display:block;font-size:1.2rem;color:#666;margin-bottom:20px}.upload-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:15px 30px;border-radius:25px;font-size:1.1rem;cursor:pointer;transition:transform .2s ease}.upload-button:hover{transform:translateY(-2px)}.upload-note{margin-top:14px;color:#666;text-align:center;font-size:.9rem}.video-player{width:100%;max-width:800px;height:400px;border-radius:15px;margin:20px auto;display:block}.controls{display:flex;justify-content:center;gap:20px;margin:30px 0;flex-wrap:wrap}.control-button{padding:15px 30px;border:none;border-radius:25px;font-size:1.1rem;cursor:pointer;transition:all .2s ease;min-width:120px}.drop-button{background:linear-gradient(135deg,#ff6b6b,#ee5a24);color:#fff}.keep-button{background:linear-gradient(135deg,#4ecdc4,#44a08d);color:#fff}.control-button:hover{transform:translateY(-2px);box-shadow:0 10px 20px #0003}.control-button:active{transform:translateY(0)}.name-input{width:100%;max-width:400px;padding:15px;border:2px solid #ddd;border-radius:10px;font-size:1rem;margin:20px auto;display:block;text-align:center}.name-input:focus{outline:none;border-color:#667eea}.progress{background:#f8f9fa;border-radius:15px;padding:20px;margin:20px 0}.progress-title{font-size:1.3rem;margin-bottom:15px;text-align:center;color:#333}.progress-stats{display:flex;justify-content:space-around;flex-wrap:wrap;gap:20px}.stat{text-align:center;padding:15px;border-radius:10px;min-width:100px}.stat.kept{background:#d4edda;color:#155724}.stat.dropped{background:#f8d7da;color:#721c24}.stat.pending{background:#fff3cd;color:#856404}.stat-number{font-size:2rem;font-weight:700;display:block}.stat-label{font-size:.9rem;margin-top:5px}.export-buttons{display:flex;justify-content:center;gap:20px;margin:30px 0;flex-wrap:wrap}.export-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:15px 30px;border-radius:25px;font-size:1.1rem;cursor:pointer;transition:all .2s ease}.export-button:hover{transform:translateY(-2px);box-shadow:0 10px 20px #0003}.secondary-button{background:transparent;color:#5f49a4;border:2px solid #7664b6;padding:13px 28px;border-radius:25px;font-size:1rem;cursor:pointer}.complete-card{text-align:center}.loading{text-align:center;padding:40px;color:#333;font-size:1.2rem;background-color:#ffffffe6;border-radius:10px;margin:20px 0;box-shadow:0 2px 10px #0000001a}.error{background:#f8d7da;color:#721c24;padding:15px;border-radius:10px;margin:20px 0;text-align:center}.success{background:#d4edda;color:#155724;padding:15px;border-radius:10px;margin:20px 0;text-align:center}.keyboard-hint{text-align:center;color:#666;font-size:.9rem;margin-top:10px}.divider{text-align:center;margin:30px 0;position:relative}.divider:before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:#ddd}.divider span{background:#fff;padding:0 20px;color:#666;font-size:.9rem}.google-photos-section{text-align:center;padding:20px;background:#f8f9ff;border-radius:15px;border:2px solid #e9ecef}.google-photos-section h3{color:#333;margin-bottom:10px;font-size:1.3rem}.google-photos-section p{color:#666;margin-bottom:20px;font-size:.95rem}.google-photos-buttons{display:flex;gap:15px;justify-content:center;flex-wrap:wrap}.google-photos-auth-button{background:linear-gradient(135deg,#4285f4,#34a853);color:#fff;border:none;padding:12px 24px;border-radius:20px;font-size:1rem;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:8px}.google-photos-auth-button:hover{transform:translateY(-2px);box-shadow:0 8px 16px #4285f44d}.google-photos-load-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:12px 24px;border-radius:20px;font-size:1rem;cursor:pointer;transition:all .2s ease}.google-photos-load-button:hover{transform:translateY(-2px);box-shadow:0 8px 16px #667eea4d}.google-photos-video-list{max-width:100%}.google-photos-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:15px;border-bottom:2px solid #e9ecef}.google-photos-header h3{color:#333;margin:0;font-size:1.4rem}.back-button{background:#6c757d;color:#fff;border:none;padding:8px 16px;border-radius:15px;font-size:.9rem;cursor:pointer;transition:all .2s ease}.back-button:hover{background:#5a6268;transform:translateY(-1px)}.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;max-height:500px;overflow-y:auto;padding:10px}.video-item{background:#fff;border-radius:15px;padding:15px;box-shadow:0 4px 12px #0000001a;transition:all .2s ease;border:2px solid transparent}.video-item:hover{transform:translateY(-2px);box-shadow:0 8px 20px #00000026;border-color:#667eea}.video-thumbnail{width:100%;height:120px;border-radius:10px;overflow:hidden;margin-bottom:12px;background:#f8f9fa;display:flex;align-items:center;justify-content:center}.video-thumbnail img{width:100%;height:100%;object-fit:cover}.video-placeholder{font-size:2rem;color:#6c757d}.video-info{margin-bottom:15px}.video-filename{font-weight:600;color:#333;margin-bottom:5px;font-size:.9rem;word-break:break-word;line-height:1.3}.video-date{color:#666;font-size:.8rem}.download-button{width:100%;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:10px 16px;border-radius:12px;font-size:.9rem;cursor:pointer;transition:all .2s ease;font-weight:500}.download-button:hover{transform:translateY(-1px);box-shadow:0 4px 12px #667eea4d}.download-button:active{transform:translateY(0)}@media (max-width: 768px){.header h1{font-size:2rem}.controls{flex-direction:column;align-items:center}.control-button{width:100%;max-width:300px}.export-buttons{flex-direction:column;align-items:center}.export-button{width:100%;max-width:300px}.google-photos-buttons{flex-direction:column;align-items:center}.google-photos-auth-button,.google-photos-load-button{width:100%;max-width:250px}.video-grid{grid-template-columns:1fr;max-height:400px}.video-player{height:auto;max-height:60vh}.google-photos-header{flex-direction:column;gap:10px;text-align:center}}