*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f5f5f5;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.container{max-width:1200px;margin:0 auto;padding:20px}.btn{cursor:pointer;border:none;border-radius:5px;padding:10px 20px;font-size:16px;transition:all .3s}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-primary{color:#fff;background-color:#007bff}.btn-primary:hover:not(:disabled){background-color:#0056b3}.btn-secondary{color:#fff;background-color:#6c757d}.btn-secondary:hover:not(:disabled){background-color:#545b62}.btn-success{color:#fff;background-color:#28a745}.btn-success:hover:not(:disabled){background-color:#1e7e34}.btn-danger{color:#fff;background-color:#dc3545}.btn-danger:hover:not(:disabled){background-color:#c82333}.btn-warning{color:#212529;background-color:#ffc107}.btn-warning:hover:not(:disabled){background-color:#e0a800}.btn-outline{color:#007bff;background:0 0;border:2px solid #007bff}.btn-outline:hover:not(:disabled){color:#fff;background:#007bff}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes blink{0%{opacity:1}50%{opacity:.5}to{opacity:1}}@keyframes countdownPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.1)}}.loading-container,.error-container{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:400px;display:flex}.loading-spinner{color:#007bff;align-items:center;gap:10px;font-size:18px;font-weight:500;display:inline-flex}.loading-spinner:before{content:"";border:2px solid #e3f2fd;border-top-color:#007bff;border-radius:50%;width:20px;height:20px;animation:1s linear infinite spin}.error-message{color:#dc3545;margin-bottom:20px;font-size:18px}.toast{z-index:10001;color:#fff;border-radius:8px;align-items:center;gap:12px;width:auto;max-width:none;padding:14px 20px;font-size:15px;font-weight:500;transition:all .3s;display:flex;position:fixed;top:20px;left:20px;right:20px;box-shadow:0 4px 12px #00000026}.toast-success{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}.toast-error{background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%)}.toast-info{background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%)}.toast-icon{flex-shrink:0;font-size:18px}.toast-message{flex:1;line-height:1.4}.toast-close{color:#fff;cursor:pointer;background:0 0;border:none;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;padding:0;font-size:24px;line-height:1;transition:background .2s;display:flex}.toast-close:hover{background:#fff3}.toast-show{opacity:1;transform:translateY(0)}.toast-hide{opacity:0;transform:translateY(-20px)}@media (max-width:768px){.toast{padding:12px 16px;font-size:14px;left:16px;right:16px}.toast-icon{font-size:16px}.toast-close{width:20px;height:20px;font-size:20px}}.upload-form-overlay{z-index:1000;background:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}.upload-form{z-index:1001;background:#fff;border:1px solid #e2e8f0;border-radius:12px;flex-direction:column;width:90%;max-width:500px;max-height:90vh;display:flex;position:fixed;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%);box-shadow:0 8px 32px #0000001a}.form-content{background:#0000000d;flex:1;padding:24px;overflow-y:auto}.form-header{background:linear-gradient(135deg,#f7fafc 0%,#edf2f7 100%);border-bottom:1px solid #e2e8f0;justify-content:space-between;align-items:center;padding:20px 24px;display:flex}.form-header h3{color:#2d3748;margin:0;font-size:18px;font-weight:600}.close-button{color:#718096;cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;padding:4px;font-size:24px;transition:all .2s;display:flex}.close-button:hover{color:#4a5568;background-color:#e2e8f0}.file-info{background:#f7fafc;border:1px solid #e2e8f0;border-radius:8px;margin-bottom:20px;padding:12px 16px}.file-name{color:#2d3748;word-break:break-all;font-weight:500}.form-group{margin-bottom:20px}.form-group label{color:#2d3748;margin-bottom:8px;font-size:14px;font-weight:600;display:block}.form-group label .auto-filled-hint{color:#667eea;margin-left:6px;font-size:12px;font-weight:400}.form-group input,.form-group textarea{box-sizing:border-box;border:2px solid #e2e8f0;border-radius:8px;width:100%;padding:12px 16px;font-family:inherit;font-size:14px;transition:border-color .2s}.form-group input:focus,.form-group textarea:focus{border-color:#667eea;outline:none;box-shadow:0 0 0 3px #667eea1a}.form-group textarea{resize:vertical;min-height:80px}.form-actions{justify-content:flex-end;gap:12px;margin-top:24px;display:flex}.cancel-button{color:#4a5568;cursor:pointer;background:#e2e8f0;border:none;border-radius:8px;padding:12px 24px;font-size:14px;font-weight:600;transition:all .2s}.cancel-button:hover:not(:disabled){color:#2d3748;background:#cbd5e0}.submit-button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:8px;align-items:center;gap:8px;padding:12px 24px;font-size:14px;font-weight:600;transition:all .2s;display:flex}.submit-button:hover:not(:disabled){background:linear-gradient(135deg,#5a6fd8 0%,#6a4190 100%);transform:translateY(-1px)}.submit-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.cancel-button:disabled,.submit-button:disabled{opacity:.6;cursor:not-allowed}.upload-icon{font-size:18px;animation:2s infinite uploadIconPulse}@keyframes uploadIconPulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}@media (max-width:768px){.upload-form{border-radius:8px;width:95%;max-height:85vh}.form-header{padding:16px 20px}.form-header h3{font-size:16px}.form-content{padding:20px}.file-info{margin-bottom:16px;padding:10px 14px}.file-name{font-size:14px}.form-group{margin-bottom:16px}.form-group label{margin-bottom:6px;font-size:13px}.form-group input,.form-group textarea{padding:10px 14px;font-size:14px}.form-group textarea{min-height:70px}.form-actions{gap:10px;margin-top:20px}.cancel-button,.submit-button{flex:1;padding:10px 20px;font-size:14px}}.video-upload{position:relative}.upload-button{color:#fff;cursor:pointer;white-space:nowrap;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:25px;align-items:center;gap:8px;min-width:-webkit-fit-content;min-width:fit-content;padding:12px 24px;font-size:16px;font-weight:600;transition:all .3s;display:flex;box-shadow:0 4px 15px #667eea66}.upload-button:hover{background:linear-gradient(135deg,#5a6fd8 0%,#6a4190 100%);transform:translateY(-2px);box-shadow:0 6px 20px #667eea99}.upload-button:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:0 4px 15px #667eea33}.upload-button:disabled:hover{transform:none;box-shadow:0 4px 15px #667eea33}.video-type-label{color:#2d3748;margin-bottom:12px;font-size:14px;font-weight:600;display:block}.video-type-selector{flex-direction:column;gap:12px;display:flex}.video-type-option{cursor:pointer;background:#f7fafc;border:2px solid #e2e8f0;border-radius:8px;align-items:center;gap:12px;padding:16px;transition:all .2s;display:flex;position:relative}.video-type-option:hover{background:#edf2f7;border-color:#cbd5e0}.video-type-option.active{background:linear-gradient(135deg,#667eea0d 0%,#764ba20d 100%);border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.option-icon{background:#fff;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-size:24px;display:flex;box-shadow:0 2px 4px #0000000d}.video-type-option.active .option-icon{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);box-shadow:0 2px 8px #667eea4d}.option-content{flex:1;min-width:0}.option-title{color:#2d3748;margin-bottom:4px;font-size:15px;font-weight:600}.video-type-option.active .option-title{color:#667eea}.option-desc{color:#718096;font-size:13px;line-height:1.4}.video-type-option.active .option-desc{color:#4a5568}.option-check{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;font-size:14px;font-weight:700;display:flex;box-shadow:0 2px 4px #667eea4d}@media (max-width:768px){.upload-button{border-radius:20px;padding:10px 20px;font-size:14px}.video-type-selector{gap:10px}.video-type-option{gap:10px;padding:14px}.option-icon{width:36px;height:36px;font-size:20px}.option-title{font-size:14px}.option-desc{font-size:12px}.option-check{width:20px;height:20px;font-size:12px}}.video-card{cursor:pointer;background:#fff;border-radius:12px;transition:all .3s;overflow:hidden;box-shadow:0 2px 10px #00000014}.video-card:hover{transform:translateY(-4px);box-shadow:0 6px 20px #0000001f}.video-card:active{transform:translateY(-2px)}.video-card.processing{opacity:.85;cursor:not-allowed}.video-card.processing:hover{transform:none;box-shadow:0 2px 10px #00000014}.video-card.processing .video-thumbnail{filter:grayscale(50%)brightness(.9)}.video-thumbnail-wrapper{width:100%;height:240px;position:relative;overflow:hidden}.video-thumbnail{object-fit:cover;width:100%;height:100%;display:block}.admin-delete-btn{color:#fff;cursor:pointer;z-index:10;opacity:0;background:#ff3b30d9;border:none;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;padding:0;font-size:14px;font-weight:700;line-height:1;transition:opacity .2s,transform .2s;display:flex;position:absolute;top:8px;right:8px}.admin-delete-btn:hover{background:#ff3b30;transform:scale(1.1)}.video-card:hover .admin-delete-btn{opacity:1}.delete-confirm-overlay{z-index:20;background:#000000b3;border-radius:12px 12px 0 0;justify-content:center;align-items:center;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}.delete-confirm-dialog{text-align:center;background:#fff;border-radius:12px;max-width:90%;padding:20px;box-shadow:0 4px 20px #0000004d}.delete-confirm-dialog p{color:#333;margin:0 0 8px;font-size:15px;font-weight:600}.delete-confirm-dialog .delete-confirm-hint{color:#999;margin-bottom:16px;font-size:12px;font-weight:400}.delete-confirm-actions{justify-content:center;gap:10px;display:flex}.delete-confirm-actions button{cursor:pointer;border:none;border-radius:8px;padding:8px 20px;font-size:13px;font-weight:500;transition:opacity .2s}.delete-confirm-actions button:disabled{opacity:.6;cursor:not-allowed}.delete-confirm-actions .delete-confirm-cancel{color:#666;background:#f0f0f0}.delete-confirm-actions .delete-confirm-cancel:hover:not(:disabled){background:#e0e0e0}.delete-confirm-actions .delete-confirm-ok{color:#fff;background:#ff3b30}.delete-confirm-actions .delete-confirm-ok:hover:not(:disabled){background:#e0352b}.processing-overlay{color:#fff;background:#0009;flex-direction:column;justify-content:center;align-items:center;gap:12px;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}.processing-spinner{border:4px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:40px;height:40px;animation:1s linear infinite spin}.processing-text{text-align:center;font-size:14px;font-weight:500;line-height:1.5}.processing-progress{color:#667eea;font-size:16px;font-weight:600}.video-info{padding:16px}.video-title{color:#333;text-overflow:ellipsis;white-space:nowrap;margin:0 0 12px;font-size:17px;font-weight:600;overflow:hidden}.video-footer{color:#666;justify-content:space-between;align-items:center;gap:12px;font-size:13px;display:flex}.video-author{color:#667eea;flex-shrink:0;align-items:center;gap:4px;font-weight:500;display:flex}.video-author .author-icon{font-size:14px}.video-like-button{cursor:pointer;color:#666;background:0 0;border:none;border-radius:16px;outline:none;flex-shrink:0;align-items:center;gap:4px;padding:4px 8px;font-size:13px;display:flex}.video-like-button:hover:not(:disabled){background:#667eea1a}.video-like-button:focus{outline:none}.video-like-button:disabled{opacity:.5;cursor:not-allowed}.video-like-button.liked{color:#ff4757}.video-like-button .like-icon{font-size:16px;line-height:1}.video-like-button .like-count{text-align:center;min-width:16px;font-size:13px;font-weight:500}@media (max-width:768px){.video-card .video-thumbnail-wrapper{height:280px}.video-card .video-info{padding:10px}.video-card .video-title{margin-bottom:8px;font-size:14px}.video-card .video-footer{gap:8px;font-size:11px}.video-card .video-author{font-size:11px}.video-card .video-author .author-icon{font-size:12px}.video-card .video-like-button{padding:3px 6px;font-size:11px}.video-card .video-like-button .like-icon{font-size:14px}.video-card .video-like-button .like-count{font-size:11px}.processing-overlay{gap:8px}.processing-spinner{border-width:3px;width:32px;height:32px}.processing-text{font-size:12px}.processing-progress{font-size:13px}}@media (max-width:480px){.video-card .video-thumbnail-wrapper{height:260px}.video-card .video-info{padding:8px}.video-card .video-title{margin-bottom:6px;font-size:13px}.video-card .video-footer{gap:6px;font-size:10px}.video-card .video-author{font-size:10px}.video-card .video-author .author-icon{font-size:11px}.video-card .video-like-button{padding:2px 5px;font-size:10px}.video-card .video-like-button .like-icon{font-size:12px}.video-card .video-like-button .like-count{font-size:10px}.video-card:hover{transform:none}.video-card:active{transform:scale(.98)}.processing-spinner{width:28px;height:28px}.processing-text{font-size:11px}.processing-progress{font-size:12px}}.tabs-container{background:#fff;border-radius:12px;gap:0;padding:4px 4px 0;display:flex;position:relative;box-shadow:0 2px 8px #00000014}.tabs-container:after{content:"";background:#f0f0f0;height:1px;position:absolute;bottom:0;left:0;right:0}.tabs-container .tab-button{color:#999;cursor:pointer;background:0 0;border:none;border-radius:8px;flex:1;padding:12px 24px 16px;font-size:16px;font-weight:500;transition:color .3s;position:relative}.tabs-container .tab-button.active{color:#333;font-weight:600}.tabs-container .tab-button.active:after{content:"";z-index:1;background:#667eea;border-radius:2px;width:40px;height:3px;position:absolute;bottom:0;left:50%;transform:translate(-50%)}@media (max-width:768px){.tabs-container{padding:3px 3px 0}.tabs-container .tab-button{padding:10px 16px 14px;font-size:14px}.tabs-container .tab-button.active:after{width:30px;height:2px}}.video-list-container{width:100%;padding:70px 20px 80px}.video-tabs-wrapper{margin-bottom:24px}.video-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px;width:100%;display:grid}.empty-state{text-align:center;color:#999;background:#fff;border:2px dashed #e0e0e0;border-radius:12px;grid-column:1/-1;padding:80px 20px;font-size:16px}.loading-container{justify-content:center;align-items:center;min-height:400px;display:flex}.loading-spinner{color:#667eea;font-size:18px;animation:1.5s ease-in-out infinite pulse}.error-container{flex-direction:column;justify-content:center;align-items:center;gap:16px;min-height:400px;display:flex}.error-container .error-message{color:#d32f2f;font-size:16px}.error-container button{color:#fff;cursor:pointer;background:#667eea;border:none;border-radius:8px;padding:10px 24px;font-size:14px;transition:all .3s}.error-container button:hover{background:#764ba2;transform:translateY(-2px)}@media (max-width:768px){.video-list-container{padding:60px 12px 70px}.video-grid{grid-template-columns:repeat(2,1fr);gap:12px}.video-tabs{margin-bottom:16px;padding:3px}.video-tabs .tab-button{padding:10px 16px;font-size:14px}.empty-state{padding:60px 16px;font-size:14px}}@media (max-width:480px){.video-list-container{padding:56px 10px 65px}.video-grid{grid-template-columns:repeat(2,1fr);gap:10px}.video-tabs{margin-bottom:12px}.video-tabs .tab-button{padding:8px 12px;font-size:13px}.empty-state{padding:40px 12px;font-size:13px}}@keyframes pulse-glow{0%,to{box-shadow:0 0 5px #ff6b6b80}50%{box-shadow:0 0 20px #ff6b6bcc}}.fullscreen-countdown-overlay{z-index:100;pointer-events:none;background:#000c;justify-content:center;align-items:center;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}@keyframes countdown-pulse{0%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1.2)}to{opacity:1;transform:scale(1)}}.loading-container,.error-container{color:#fff;flex-direction:column;justify-content:center;align-items:center;height:100%;display:flex}.loading-container .loading-spinner,.error-container .loading-spinner{margin-bottom:20px;font-size:18px}.loading-container .error-message,.error-container .error-message{text-align:center;margin-bottom:20px;padding:0 20px;font-size:18px}.loading-container .btn,.error-container .btn{cursor:pointer;border:none;border-radius:8px;padding:10px 20px;font-size:14px;font-weight:600;transition:all .3s}.loading-container .btn.btn-primary,.error-container .btn.btn-primary{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}.loading-container .btn.btn-primary:hover,.error-container .btn.btn-primary:hover{transform:scale(1.05);box-shadow:0 4px 15px #667eea66}.comment-modal-backdrop{z-index:10000;background:#00000080;justify-content:center;align-items:flex-end;animation:.3s fadeIn;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.comment-modal{box-sizing:border-box;background:#fff;border-radius:20px 20px 0 0;flex-direction:column;width:100%;max-width:100vw;max-height:80vh;animation:.3s slideUp;display:flex;overflow:hidden}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.comment-modal-header{border-bottom:1px solid #e0e0e0;justify-content:space-between;align-items:center;padding:20px;display:flex}.comment-modal-header h3{color:#333;margin:0;font-size:18px;font-weight:600}.comment-modal-header .close-button{color:#666;cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;padding:0;font-size:32px;transition:background .3s;display:flex}.comment-modal-header .close-button:hover{background:#f0f0f0}.comment-modal-content{flex:1;min-height:200px;padding:20px;overflow-y:auto}.comment-modal-content .loading,.comment-modal-content .empty-comments{text-align:center;color:#999;padding:40px 20px;font-size:14px}.comments-list{flex-direction:column;gap:16px;display:flex}.comment-item{border-bottom:1px solid #f0f0f0;padding-bottom:16px}.comment-item:last-child{border-bottom:none;padding-bottom:0}.comment-header{align-items:center;gap:12px;margin-bottom:8px;display:flex}.comment-header .comment-username{color:#333;font-size:14px;font-weight:600}.comment-header .comment-time{color:#999;font-size:12px}.comment-content{color:#666;word-wrap:break-word;font-size:14px;line-height:1.6}.comment-input-section{background:#fafafa;border-top:1px solid #e0e0e0;padding:20px}.comment-input-section .comment-textarea{resize:none;box-sizing:border-box;border:1px solid #e0e0e0;border-radius:8px;width:100%;margin-bottom:12px;padding:12px;font-family:inherit;font-size:14px}.comment-input-section .comment-textarea:focus{border-color:#667eea;outline:none}.comment-input-section .submit-button{color:#fff;cursor:pointer;background:#667eea;border:none;border-radius:8px;width:100%;padding:12px;font-size:16px;font-weight:500;transition:all .3s}.comment-input-section .submit-button:hover:not(:disabled){background:#5568d3;transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.comment-input-section .submit-button:disabled{opacity:.6;cursor:not-allowed}.comment-login-prompt{text-align:center;color:#999;background:#fafafa;border-top:1px solid #e0e0e0;padding:20px;font-size:14px}@media (max-width:768px){.comment-modal{max-height:90vh}.comment-modal-header{padding:16px}.comment-modal-header h3{font-size:16px}.comment-modal-content,.comment-input-section{padding:16px}}.controls .btn-action.btn-record-start{color:#fff;background:linear-gradient(135deg,#ff6b6b 0%,#ee5a24 100%);animation:1.5s infinite pulse-glow}.controls .btn-action.btn-record-start:hover{transform:scale(1.05)}.controls .btn-action.btn-warning:hover:not(:disabled){background:#ffc107}.controls .btn-action.btn-danger{color:#fff;background:#dc3545e6}.controls .btn-action.btn-danger:hover:not(:disabled){background:#dc3545}.controls .btn-login-required{color:#fff;cursor:pointer;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:20px;padding:8px 16px;font-size:13px;font-weight:600;transition:all .3s}.controls .btn-login-required:hover{transform:scale(1.05);box-shadow:0 4px 12px #667eea66}.video-wrapper.as-overlay{z-index:50;cursor:pointer;background:#000;border:2px solid #fffc;border-radius:12px;justify-content:center;align-items:center;width:180px;height:320px;transition:all .3s;display:flex;position:absolute;top:60px;right:20px;overflow:hidden;box-shadow:0 4px 20px #00000080}.video-wrapper.as-overlay:hover{border-color:#fff;transform:scale(1.05);box-shadow:0 6px 25px #0009}.video-wrapper.as-overlay .video-element{width:100%;height:100%;object-fit:contain!important}.video-wrapper .btn-switch-camera{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;cursor:pointer;z-index:20;background:#000000a6;border:none;border-radius:50%;justify-content:center;align-items:center;width:50px;height:50px;padding:0;transition:all .2s;display:flex;position:absolute;bottom:10px;right:10px}.video-wrapper .btn-switch-camera svg{width:28px;height:28px}.video-wrapper .btn-switch-camera:hover:not(:disabled){background:#000000d9;transform:scale(1.08)}.video-wrapper .btn-switch-camera:active:not(:disabled){transform:scale(.95)}.video-wrapper .btn-switch-camera:disabled{opacity:.35;cursor:not-allowed}.video-wrapper.as-main .btn-switch-camera{width:56px;height:56px;bottom:30px;right:25px}.video-wrapper.as-main .btn-switch-camera svg{width:32px;height:32px}.fullscreen-countdown-overlay{z-index:9999;background:#000c;justify-content:center;align-items:center;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}.fullscreen-countdown-number{color:#fff;text-shadow:4px 4px 8px #000000b3;font-size:150px;font-weight:700;animation:1s infinite countdownPulse}@media (max-width:768px){.video-player-container{top:60px;bottom:56px}.controls{gap:6px;padding:8px 12px}.controls .btn-back{width:32px;height:32px;font-size:18px}.controls .btn-action,.controls .btn-login-required{padding:6px 12px;font-size:12px}.video-wrapper.as-overlay{width:30vw;height:20vh;top:55px;right:10px}.video-wrapper .btn-switch-camera{padding:8px 16px;font-size:12px;bottom:80px}}@media (max-width:480px){.video-player-container{top:56px;bottom:52px}.video-wrapper.as-overlay{width:35vw;height:18vh;top:50px}.controls .controls-right{gap:5px}.controls .btn-action,.controls .btn-login-required{padding:5px 10px;font-size:11px}.controls .btn-action.btn-comment{gap:4px;padding:6px 12px;font-size:12px}.controls .btn-action.btn-comment .comment-icon{font-size:14px}.controls .btn-action.btn-comment .comment-text{font-size:12px}.controls .btn-action.btn-comment .comment-count{padding:1px 4px;font-size:10px}}.controls .btn-action.btn-comment{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:20px;align-items:center;gap:6px;padding:8px 16px;font-size:13px;font-weight:600;display:flex}.controls .btn-action.btn-comment .comment-icon{font-size:16px}.controls .btn-action.btn-comment .comment-text{font-size:13px}.controls .btn-action.btn-comment .comment-count{background:#ffffff4d;border-radius:10px;margin-left:2px;padding:2px 6px;font-size:11px;font-weight:600}.controls .btn-action.btn-comment:hover:not(:disabled){transform:scale(1.05);box-shadow:0 4px 12px #667eea66}.controls .btn-action.btn-comment:disabled{opacity:.6;cursor:not-allowed}.video-player-container{z-index:1000;background:#000;position:fixed;top:70px;bottom:60px;left:0;right:0;overflow:hidden}.controls{z-index:1001;background:linear-gradient(#0009 0%,#0000 100%);align-items:center;gap:10px;padding:10px 15px;display:flex;position:absolute;top:0;left:0;right:0}.controls .btn-back{color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#fff3;border:none;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-size:20px;transition:all .3s;display:flex}.controls .btn-back:hover{background:#ffffff4d;transform:scale(1.1)}.controls .controls-right{gap:8px;margin-left:auto;display:flex}.controls .btn-action{cursor:pointer;border:none;border-radius:20px;padding:8px 16px;font-size:13px;font-weight:600;transition:all .3s}.controls .btn-action.btn-success{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}.controls .btn-action.btn-success:hover:not(:disabled){transform:scale(1.05);box-shadow:0 4px 15px #667eea66}.controls .btn-action.btn-success:disabled{opacity:.5;cursor:not-allowed}.controls .btn-action.btn-warning{color:#212529;background:#ffc107e6}.controls .btn-action.btn-warning:hover:not(:disabled){background:#ffc107;transform:scale(1.05)}.controls .btn-action.btn-warning:disabled{opacity:.5;cursor:not-allowed}.video-layout{background:#000;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative;overflow:hidden}.video-wrapper.as-main{background:#000;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}.video-wrapper.as-main .video-element{width:100%;height:100%;object-fit:contain!important}.analyzing-status{text-align:center;color:#fff;z-index:1002;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.analyzing-status h3{color:#fff;margin-bottom:20px;font-size:24px}.analyzing-status .loading-spinner{color:#fff;margin-bottom:16px;font-size:18px}.analyzing-status p{color:#fffc;margin:0;font-size:16px}.upload-area{text-align:center;z-index:1002;color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.upload-area .upload-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:20px;margin-bottom:20px;padding:12px 24px;font-size:16px;font-weight:600;transition:all .3s}.upload-area .upload-btn:hover:not(:disabled){transform:scale(1.05);box-shadow:0 4px 15px #667eea66}.upload-area .upload-btn:disabled{opacity:.5;cursor:not-allowed}.upload-area .recorded-video-preview{background:#f8f9fa;border:2px solid #28a745;border-radius:8px;margin-top:20px;padding:20px}.upload-area .recorded-video-preview h3{color:#28a745;margin-top:0;margin-bottom:15px}.upload-area .recorded-video-preview .video-info{background:#fff;border:1px solid #dee2e6;border-radius:4px;margin-top:15px;padding:10px}.upload-area .recorded-video-preview .video-info p{color:#666;margin:5px 0;font-size:14px}.selected-file{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;background:#000000b3;border:2px solid #fff3;border-radius:12px;margin-top:20px;padding:15px}.selected-file p{color:#ffffffe6;margin:5px 0}.selected-file .preview-video{border-radius:8px;max-width:400px;max-height:300px;margin:15px 0}.selected-file .upload-actions{justify-content:center;gap:10px;margin-top:15px;display:flex}.uploading-status{text-align:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;background:#000000b3;border:1px solid #fff3;border-radius:12px;margin-top:20px;padding:20px}.uploading-status .loading-spinner{color:#fff;align-items:center;gap:10px;font-size:16px;font-weight:500;display:inline-flex}.uploading-status .loading-spinner:before{content:"";border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:20px;height:20px;animation:1s linear infinite spin}.comparison-result .result-details .result-summary p{color:#666;margin:5px 0}.comparison-result .result-details .video-comparison{margin-bottom:20px}.comparison-result .result-details .video-comparison .video-item{text-align:center;max-width:600px;margin:0 auto}.comparison-result .result-details .video-comparison .video-item h4{color:#333;margin-bottom:10px}.comparison-result .result-details .differences-list{margin-bottom:20px}.comparison-result .result-details .differences-list .differences-table{background:#fff;border-radius:4px;overflow:hidden;box-shadow:0 1px 3px #0000001a}.comparison-result .result-details .differences-list .differences-table .table-header,.comparison-result .result-details .differences-list .differences-table .table-row{border-bottom:1px solid #e0e0e0;grid-template-columns:1fr 1fr 1fr 1fr;padding:10px;display:grid}@media (max-width:768px){.comparison-result .result-details .differences-list .differences-table .table-header,.comparison-result .result-details .differences-list .differences-table .table-row{grid-template-columns:1fr;gap:5px}}.comparison-result .result-details .differences-list .differences-table .table-header{color:#333;background:#f5f5f5;font-weight:700}.comparison-result .result-details .differences-list .differences-table .table-row:hover{background:#f8f9fa}.comparison-result .result-details .differences-list .differences-table .table-row span{color:#666}.comparison-result .result-details .result-summary{background:#f8f9fa;border-radius:8px;margin-bottom:20px;padding:20px}.comparison-result .result-details .result-summary .summary-stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-bottom:20px;display:grid}.comparison-result .result-details .result-summary .summary-stats .stat-item{background:#fff;border-radius:6px;flex-direction:column;align-items:center;padding:12px;display:flex;box-shadow:0 2px 4px #0000001a}.comparison-result .result-details .result-summary .summary-stats .stat-item .stat-label{color:#666;margin-bottom:4px;font-size:12px}.comparison-result .result-details .result-summary .summary-stats .stat-item .stat-value{color:#007bff;font-size:18px;font-weight:600}.comparison-result .result-details .result-summary .action-buttons{justify-content:center;gap:12px;display:flex}@media (max-width:768px){.comparison-result .result-details .result-summary .action-buttons{flex-direction:column}}.comparison-result .result-details .result-actions{justify-content:center;gap:10px;margin-top:20px;display:flex}.loading-overlay{z-index:9999;background:#000000b3;justify-content:center;align-items:center;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}.loading-overlay .loading-content{text-align:center;background:#fff;border-radius:12px;width:90%;max-width:400px;padding:40px;box-shadow:0 8px 32px #0000004d}.loading-overlay .loading-content h3{color:#333;margin-bottom:20px;font-size:24px;font-weight:600}.loading-overlay .loading-content .loading-spinner{color:#007bff;margin-bottom:16px;font-size:18px;font-weight:500}.loading-overlay .loading-content p{color:#666;margin:0;font-size:16px;line-height:1.5}.error-message{color:#721c24;text-align:center;background:#f8d7da;border:1px solid #f5c6cb;border-radius:4px;margin-top:20px;padding:15px}.error-message p{margin:0 0 15px}.error-message .error-actions{justify-content:center;gap:10px;display:flex}.video-comparison{z-index:1000;color:#fff;background:#000;flex-direction:column;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}.video-comparison .comparison-header{background:#000c;border-bottom:1px solid #333;justify-content:space-between;align-items:center;padding:16px 24px;display:flex}.video-comparison .comparison-header h3{margin:0;font-size:18px;font-weight:600}.video-comparison .comparison-header .header-actions{align-items:center;gap:12px;display:flex}.video-comparison .comparison-header .upload-user-video-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:4px;padding:8px 16px;font-size:14px;transition:all .3s;box-shadow:0 2px 8px #667eea4d}.video-comparison .comparison-header .upload-user-video-btn:hover{background:linear-gradient(135deg,#5a6fd8 0%,#6a4190 100%);transform:translateY(-1px);box-shadow:0 4px 12px #667eea66}.video-comparison .comparison-header .close-btn{color:#fff;cursor:pointer;background:#ff4757;border:none;border-radius:4px;padding:8px 16px;font-size:14px}.video-comparison .comparison-header .close-btn:hover{background:#ff3742}.video-comparison .video-loading{background:#ffffff1a;border-radius:8px;justify-content:center;align-items:center;height:300px;margin:20px;display:flex}.video-comparison .video-loading .loading-spinner{color:#007bff;font-size:18px;font-weight:500}.video-comparison .video-error{background:#ff47571a;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:16px;height:300px;margin:20px;padding:20px;display:flex}.video-comparison .video-error .error-message{color:#ff4757;text-align:center;font-size:14px;line-height:1.5}.video-comparison .video-error .retry-btn{color:#fff;cursor:pointer;background:#2ed573;border:none;border-radius:4px;padding:8px 16px;font-size:14px;font-weight:500;transition:background .2s}.video-comparison .video-error .retry-btn:hover{background:#26d065}.video-comparison .video-error .retry-btn:active{transform:scale(.98)}.video-comparison .video-container{gap:16px;height:66.67vh;min-height:0;padding:16px;display:flex}.video-comparison .video-container .video-panel{background:#111;border-radius:8px;flex-direction:column;flex:1;display:flex;overflow:hidden}.video-comparison .video-container .video-panel .comparison-video{object-fit:contain;background:#000;flex:1;width:100%;height:100%}.video-comparison .video-container .video-panel .comparison-video::-webkit-media-controls{display:none!important}.video-comparison .video-container .video-panel .comparison-video::-webkit-media-controls-panel{display:none!important}.video-comparison .video-container .video-panel .comparison-video::-webkit-media-controls-play-button{display:none!important}.video-comparison .video-container .video-panel .comparison-video::-webkit-media-controls-timeline{display:none!important}.video-comparison .video-container .video-panel .comparison-video::-webkit-media-controls-current-time-display{display:none!important}.video-comparison .video-container .video-panel .comparison-video::-webkit-media-controls-time-remaining-display{display:none!important}.video-comparison .video-container .video-panel .comparison-video::-webkit-media-controls-mute-button{display:none!important}.video-comparison .video-container .video-panel .comparison-video::-webkit-media-controls-volume-slider{display:none!important}.video-comparison .video-container .video-panel .comparison-video::-webkit-media-controls-fullscreen-button{display:none!important}.video-comparison .video-compare-controls{background:#000c;border-top:1px solid #333;padding:8px 24px}.video-comparison .video-compare-controls .playback-controls{align-items:center;gap:16px;display:flex}.video-comparison .video-compare-controls .playback-controls .play-btn{color:#fff;cursor:pointer;background:#2ed573;border:none;border-radius:6px;padding:10px 20px;font-size:14px;font-weight:500}.video-comparison .video-compare-controls .playback-controls .play-btn:hover{background:#26d065}.video-comparison .video-compare-controls .playback-controls .speed-controls{align-items:center;gap:8px;display:flex}.video-comparison .video-compare-controls .playback-controls .speed-controls span{color:#ccc;font-size:14px}.video-comparison .video-compare-controls .playback-controls .speed-controls button{color:#fff;cursor:pointer;background:#333;border:none;border-radius:4px;padding:6px 12px;font-size:12px}.video-comparison .video-compare-controls .playback-controls .speed-controls button:hover{background:#444}.video-comparison .video-compare-controls .playback-controls .speed-controls button.active{background:#2ed573}.video-comparison .timeline-container{background:#000000e6;border-top:1px solid #333;padding:8px 24px}.video-comparison .timeline-container .timeline-header{color:#ccc;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:12px;display:flex}.video-comparison .timeline-container .timeline{gap:4px;max-height:80px;padding:4px 0;display:flex;overflow-x:auto}.video-comparison .timeline-container .timeline .timeline-frame{cursor:pointer;background:#222;border:2px solid #333;border-radius:6px;flex-direction:column;flex-shrink:0;justify-content:center;align-items:center;width:50px;height:60px;transition:all .2s;display:flex;position:relative}.video-comparison .timeline-container .timeline .timeline-frame:hover{border-color:#555;transform:translateY(-2px)}.video-comparison .timeline-container .timeline .timeline-frame.current{border-color:#2ed573;box-shadow:0 0 10px #2ed5734d}.video-comparison .timeline-container .timeline .timeline-frame.has-difference{background:#ff47571a;border-color:#ff4757}.video-comparison .timeline-container .timeline .timeline-frame.no-pose-data{background:#ffa5021a;border-color:#ffa502}.video-comparison .timeline-container .timeline .timeline-frame.pose-quality-issue{background:#ff6b351a;border-color:#ff6b35}.video-comparison .timeline-container .timeline .timeline-frame .frame-number{color:#fff;margin-bottom:4px;font-size:12px;font-weight:600}.video-comparison .timeline-container .timeline .timeline-frame .frame-time{color:#ccc;margin-bottom:4px;font-size:10px}.video-comparison .timeline-container .timeline .timeline-frame .difference-indicator{color:#fff;background:#ff4757;border-radius:3px;padding:2px 4px;font-size:8px;font-weight:600;position:absolute;top:4px;right:4px}.video-comparison .timeline-container .timeline .timeline-frame .no-pose-indicator{color:#fff;background:#ffa502;border-radius:3px;padding:2px 4px;font-size:8px;font-weight:600;position:absolute;top:4px;right:4px}.video-comparison .timeline-container .timeline .timeline-frame .quality-issue-indicator{color:#fff;background:#ff6b35;border-radius:3px;padding:2px 4px;font-size:8px;font-weight:600;position:absolute;top:4px;right:4px}.video-comparison .comparison-stats{background:#000c;border-top:1px solid #333;padding:8px 24px}.video-comparison .comparison-stats .stats-table{border-collapse:collapse;width:100%;font-size:12px}.video-comparison .comparison-stats .stats-table tr{border-bottom:1px solid #333}.video-comparison .comparison-stats .stats-table tr:last-child{border-bottom:none}.video-comparison .comparison-stats .stats-table td{text-align:center;border-right:1px solid #333;padding:4px 8px}.video-comparison .comparison-stats .stats-table td:last-child{border-right:none}.video-comparison .comparison-stats .stats-table .stat-label{color:#ccc;width:80px;font-size:10px}.video-comparison .comparison-stats .stats-table .stat-value{color:#2ed573;width:60px;font-size:12px;font-weight:600}.video-comparison .loading,.video-comparison .error{color:#ccc;flex:1;justify-content:center;align-items:center;font-size:16px;display:flex}.video-comparison .error{color:#ff4757}@media (max-width:768px){.video-comparison .video-container{flex-direction:column;gap:8px;padding:8px}.video-comparison .video-container .video-panel{height:200px}.video-comparison .timeline .timeline-frame{width:50px;height:70px}.video-comparison .timeline .timeline-frame .frame-number{font-size:10px}.video-comparison .timeline .timeline-frame .frame-time{font-size:8px}.video-comparison .comparison-stats{flex-direction:column;gap:12px}}.login-container{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);justify-content:center;align-items:center;min-height:calc(100vh - 56px);padding:20px;display:flex}.login-box{background:#fff;border-radius:12px;width:100%;max-width:400px;padding:40px 32px;box-shadow:0 10px 40px #0003}.login-title{color:#333;text-align:center;margin-bottom:32px;font-size:28px;font-weight:700}.login-form .form-group{margin-bottom:20px}.login-form .form-group label{color:#555;margin-bottom:8px;font-size:14px;font-weight:500;display:block}.login-form .form-group input{border:1px solid #ddd;border-radius:6px;outline:none;width:100%;height:44px;padding:0 16px;font-size:14px;transition:all .3s}.login-form .form-group input:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.login-form .form-group input:disabled{cursor:not-allowed;background-color:#f5f5f5}.login-form .form-group input::placeholder{color:#aaa}.login-form .error-message{color:#ff4d4f;background-color:#fff2f0;border:1px solid #ffccc7;border-radius:6px;margin-bottom:16px;padding:10px 12px;font-size:13px;animation:.3s ease-in-out shake}.login-form .btn-submit{color:#fff;cursor:pointer;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:6px;width:100%;height:44px;font-size:16px;font-weight:600;transition:all .3s}.login-form .btn-submit:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.login-form .btn-submit:active:not(:disabled){transform:translateY(0)}.login-form .btn-submit:disabled{opacity:.6;cursor:not-allowed}.login-footer{text-align:center;justify-content:center;align-items:center;gap:8px;margin-top:24px;display:flex}.login-footer .toggle-text{color:#888;font-size:14px}.login-footer .btn-toggle{color:#667eea;cursor:pointer;background:0 0;border:none;padding:0;font-size:14px;font-weight:600;transition:all .3s}.login-footer .btn-toggle:hover:not(:disabled){color:#764ba2;text-decoration:underline}.login-footer .btn-toggle:disabled{opacity:.6;cursor:not-allowed}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-5px)}20%,40%,60%,80%{transform:translate(5px)}}@media (max-width:768px){.login-container{min-height:calc(100vh - 50px);padding:16px}.login-box{border-radius:10px;padding:32px 24px;box-shadow:0 8px 32px #00000026}.login-title{margin-bottom:28px;font-size:24px}.login-form .form-group{margin-bottom:16px}.login-form .form-group label{margin-bottom:6px;font-size:13px}.login-form .form-group input{height:42px;padding:0 14px;font-size:14px}.login-form .error-message{margin-bottom:14px;padding:9px 11px;font-size:12px}.login-form .btn-submit{height:42px;font-size:15px}.login-form .btn-submit:hover:not(:disabled){transform:none}.login-form .btn-submit:active:not(:disabled){transform:scale(.98)}.login-footer{margin-top:20px}.login-footer .toggle-text,.login-footer .btn-toggle{font-size:13px}}.profile-container{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);min-height:calc(100vh - 106px);margin-top:50px;padding-bottom:80px}.profile-container .loading{color:#fff;justify-content:center;align-items:center;height:calc(100vh - 106px);font-size:18px;display:flex}.profile-header{text-align:center;background:#fff;padding:32px 20px;position:relative;box-shadow:0 2px 8px #0000001a}.profile-header .avatar{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;margin:0 auto 16px;display:flex;overflow:hidden}.profile-header .avatar img{object-fit:cover;width:100%;height:100%}.profile-header .avatar .avatar-placeholder{color:#fff;font-size:36px;font-weight:700}.profile-header .user-info .username{color:#333;margin:0 0 6px;font-size:24px;font-weight:700}.profile-header .user-info .btn-logout-header{color:#999;cursor:pointer;background:0 0;border:none;border-radius:4px;margin:0 auto 8px;padding:4px 8px;font-size:12px;font-weight:400;line-height:1;transition:color .2s;display:block}.profile-header .user-info .btn-logout-header:hover{color:#666}.profile-header .user-info .btn-logout-header:active{color:#333}.profile-header .user-info .email{color:#888;margin:0;font-size:14px}.profile-videos-section{background:#fff;border-radius:12px;margin:20px;padding:20px;box-shadow:0 2px 8px #0000001a}.profile-videos-section .video-tabs-wrapper{margin-bottom:24px}.profile-videos-section .videos-loading{text-align:center;color:#999;padding:40px 0;font-size:14px}.profile-videos-section .videos-empty{text-align:center;color:#999;padding:60px 20px}.profile-videos-section .videos-empty p{margin:0 0 8px;font-size:14px}.profile-videos-section .videos-empty .empty-hint{color:#bbb;font-size:12px}.profile-videos-section .profile-videos-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px;padding:20px 0;display:grid}@media (max-width:768px){.profile-container{padding-bottom:70px}.profile-header{padding:24px 16px}.profile-header .avatar{width:70px;height:70px;margin-bottom:12px}.profile-header .avatar .avatar-placeholder{font-size:32px}.profile-header .user-info .username{margin-bottom:4px;font-size:20px}.profile-header .user-info .btn-logout-header{margin-bottom:6px;padding:3px 6px;font-size:11px}.profile-header .user-info .email{font-size:13px}.profile-videos-section{margin:16px 12px;padding:16px 12px}.profile-videos-section .video-tabs-wrapper{margin-bottom:16px}.profile-videos-section .videos-loading{padding:30px 0;font-size:13px}.profile-videos-section .videos-empty{padding:40px 16px}.profile-videos-section .videos-empty p{font-size:13px}.profile-videos-section .videos-empty .empty-hint{font-size:11px}.profile-videos-section .profile-videos-grid{grid-template-columns:repeat(2,1fr);gap:12px;padding:12px 0}}.app-header{z-index:1000;background:#fff;position:fixed;top:0;left:0;right:0}.app-header .header-content{justify-content:space-between;align-items:center;max-width:1400px;height:50px;margin:0 auto;padding:16px 24px;display:flex}.app-header .logo{cursor:pointer;transition:transform .2s}.app-header .logo:hover{transform:scale(1.05)}.app-header .logo .logo-text{-webkit-text-fill-color:transparent;letter-spacing:1px;text-shadow:2px 2px 4px #667eea33;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);-webkit-background-clip:text;background-clip:text;font-size:28px;font-weight:800}.app-header .upload-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:24px;align-items:center;gap:8px;padding:10px 24px;font-size:16px;font-weight:600;transition:all .3s;display:flex;box-shadow:0 4px 12px #667eea66}.app-header .upload-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px #667eea80}.app-header .upload-btn:active{transform:translateY(0)}@media (max-width:768px){.app-header .header-content{padding:12px 16px}.app-header .logo .logo-text{font-size:22px}.app-header .upload-btn{border-radius:20px;padding:8px 16px;font-size:14px}}@media (max-width:480px){.app-header .logo .logo-text{font-size:18px}.app-header .upload-btn{padding:6px 12px;font-size:12px}.app-header .upload-btn span{display:none}}.tab-bar{z-index:1000;background:#fff;border-top:1px solid #e8e8e8;justify-content:space-around;align-items:center;height:60px;display:flex;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -2px 8px #0000000d}.tab-bar .tab-bar-item{cursor:pointer;flex-direction:column;flex:1;justify-content:center;align-items:center;height:100%;padding:8px 0;transition:all .3s;display:flex}.tab-bar .tab-bar-item:hover{background-color:#f7f7f7}.tab-bar .tab-bar-item.active .tab-bar-icon{transform:scale(1.1)}.tab-bar .tab-bar-item.active .tab-bar-label{color:#667eea;font-weight:600}.tab-bar .tab-bar-item .tab-bar-icon{margin-bottom:4px;font-size:24px;transition:transform .3s}.tab-bar .tab-bar-item .tab-bar-label{color:#666;font-size:12px;transition:all .3s}.tab-bar .tab-bar-upload{cursor:pointer;flex:none;justify-content:center;align-items:center;padding:0 20px;display:flex;position:relative}.tab-bar .tab-bar-upload .upload-button{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:50%;justify-content:center;align-items:center;width:52px;height:52px;transition:all .3s;display:flex;position:relative;bottom:8px;box-shadow:0 4px 12px #667eea66}.tab-bar .tab-bar-upload .upload-button:hover{transform:scale(1.05);box-shadow:0 6px 16px #667eea80}.tab-bar .tab-bar-upload .upload-button:active{transform:scale(.95)}.tab-bar .tab-bar-upload .upload-button .upload-icon{color:#fff;font-size:32px;font-weight:300;line-height:1}@media (max-width:768px){.tab-bar{height:56px}.tab-bar .tab-bar-item{padding:6px 0}.tab-bar .tab-bar-item .tab-bar-icon{margin-bottom:3px;font-size:22px}.tab-bar .tab-bar-item .tab-bar-label{font-size:11px}.tab-bar .tab-bar-upload{padding:0 16px}.tab-bar .tab-bar-upload .upload-button{width:48px;height:48px;bottom:6px}.tab-bar .tab-bar-upload .upload-button .upload-icon{font-size:28px}}@media (max-width:480px){.tab-bar{height:52px}.tab-bar .tab-bar-item{padding:4px 0}.tab-bar .tab-bar-item .tab-bar-icon{margin-bottom:2px;font-size:20px}.tab-bar .tab-bar-item .tab-bar-label{font-size:10px}.tab-bar .tab-bar-upload{padding:0 12px}.tab-bar .tab-bar-upload .upload-button{width:40px;height:40px;bottom:4px}.tab-bar .tab-bar-upload .upload-button .upload-icon{font-size:26px}}.App{box-sizing:border-box;background:#f8f9fa;min-height:100vh}*{box-sizing:border-box}.main-content{max-width:1400px;min-height:calc(100vh - 110px);margin-left:auto;margin-right:auto}@media (max-width:768px){.main-content{min-height:calc(100vh - 106px)}}@media (max-width:480px){.main-content{min-height:calc(100vh - 102px)}}