.sidebar{width:220px;background:#f7fcfd;height:100vh;display:flex;flex-direction:column;align-items:center;padding-top:32px;border-right:1px solid #e0e0e0}.sidebar-avatar{margin-bottom:40px}.sidebar-avatar-icon{font-size:48px;color:#1ab6c6}.sidebar-menu{width:100%}.sidebar-menu-item{padding:18px 32px;font-size:1.2rem;color:#222;cursor:pointer;border-left:4px solid transparent;transition:background .2s,border-color .2s}.sidebar-menu-item.active,.sidebar-menu-item:hover:not(.disabled){background:#e0f7fa;border-left:4px solid #1ab6c6;color:#1ab6c6}.sidebar-menu-item.disabled{color:#ccc;cursor:not-allowed;opacity:.6}.sidebar-menu-item.disabled:hover{background:none;border-left:4px solid transparent}.custom-progress-bar__wrapper{width:100%;margin:0 0 18px;height:12px;background:#eaf6f8;border-radius:8px;position:relative;box-shadow:0 1px 4px rgba(26,182,198,.08);display:flex;align-items:center;overflow:hidden}.custom-progress-bar__bar{height:100%;background:linear-gradient(90deg,#1ab6c6,#4f8cff);border-radius:8px;transition:width .4s cubic-bezier(.4,0,.2,1)}.custom-progress-bar__label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:.95rem;color:#183642;font-weight:500;pointer-events:none;-webkit-user-select:none;user-select:none}.upload-video-wrapper{border-radius:16px;box-shadow:0 2px 12px rgba(0,0,0,.04);padding:48px 40px 32px;margin:48px auto 0;max-width:420px}.bg-curve,.upload-curve{display:none!important}.upload-title{font-size:2.2rem;font-weight:700;margin-bottom:24px;color:#183642;letter-spacing:1px}.upload-step{font-size:1.2rem;color:#183642;font-weight:500;margin-bottom:8px}.upload-dropzone{width:320px;height:160px;border:2.5px dashed #1ab6c6;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#f7fcfd;cursor:pointer;margin-bottom:16px;position:relative;transition:all .3s ease}.upload-dropzone.drag-over{border-color:#ff6d2d;background:#fff3f0;transform:scale(1.02)}.upload-dropzone.has-file{height:auto;min-height:200px;cursor:default;border-style:solid;border-color:#4caf50;background:#f1f8e9}.file-preview{width:100%;padding:12px;display:flex;flex-direction:column;align-items:center;grid-gap:12px;gap:12px}.video-preview{max-width:280px;height:auto;max-height:150px;border-radius:8px;object-fit:cover}.file-info{text-align:center;width:100%}.file-name{font-weight:600;color:#2e7d32;margin-bottom:4px;word-break:break-word}.file-size{font-size:.9rem;color:#666;margin-bottom:8px}.remove-file-btn{background:#f44336;color:#fff;border:none;padding:6px 12px;border-radius:6px;font-size:.85rem;cursor:pointer;transition:background .2s}.remove-file-btn:hover{background:#d32f2f}.dropzone-label{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}.dropzone-icon{font-size:2.8rem;color:#1ab6c6;margin-bottom:8px}.dropzone-text{color:#183642;font-size:1.1rem;text-align:center;font-weight:500;white-space:pre-line}.selected-file{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);font-size:.95rem;color:#1ab6c6;background:#e0f7fa;padding:2px 10px;border-radius:8px}.template-selector-input{width:320px;padding:10px 12px;border:1.5px solid #b2ebf2;border-radius:8px;font-size:1.1rem;background:#f7fcfd;color:#183642;margin-bottom:18px}.upload-btn{width:320px;padding:14px 0;background:#ff6d2d;color:#fff;font-size:1.2rem;font-weight:700;border:none;border-radius:8px;margin-top:8px;cursor:pointer;transition:background .2s}.upload-btn:disabled{background:#ffb899;cursor:not-allowed}.upload-btn:hover:not(:disabled){background:#ff4d00}.upload-hints{margin-top:32px;color:#1ab6c6;font-size:1.1rem;font-weight:500;display:flex;flex-direction:column;grid-gap:6px;gap:6px;align-items:flex-start}.upload-progress,.upload-status{margin-top:24px;width:100%;text-align:center}.download-section{margin-top:32px;text-align:center}@media (max-width:600px){.template-selector-input,.upload-btn,.upload-dropzone,.upload-video-wrapper{width:98vw;max-width:98vw}}.history-table-container{width:100%;max-width:800px;margin:0 auto;background:#fff;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.04);padding:32px 24px}.history-title{font-size:2rem;font-weight:700;margin-bottom:24px;color:#222}.history-table{width:100%;border-collapse:collapse}.history-table td,.history-table th{padding:14px 10px;text-align:left;border-bottom:1px solid #e0e0e0}.history-table th{color:#1ab6c6;font-weight:600;background:#f7fcfd}.progress-bar-bg{background:#e0f7fa;border-radius:8px;position:relative;height:18px;width:120px;display:inline-block;vertical-align:middle}.progress-bar{background:linear-gradient(90deg,#1ab6c6,#2ee59d);height:100%;border-radius:8px;transition:width .4s}.progress-label{position:absolute;left:50%;top:0;transform:translateX(-50%);font-size:.9rem;color:#222;line-height:18px}.history-actions{display:flex;grid-gap:8px;gap:8px}.history-action-btn{background:none;border:none;font-size:1.2rem;cursor:pointer;color:#1ab6c6;padding:4px 8px;border-radius:4px;transition:background .2s}.history-action-btn:hover{background:#e0f7fa}.auth-required-message{text-align:center;padding:60px 40px;background:linear-gradient(135deg,#f8f9ff,#e8f4f8);border-radius:16px;border:2px dashed #1ab6c6}.auth-icon{font-size:4rem;margin-bottom:20px;opacity:.8}.auth-required-message h3{font-size:1.8rem;color:#333;margin-bottom:16px;font-weight:600}.auth-required-message p{font-size:1.1rem;color:#666;line-height:1.6;margin-bottom:24px}.auth-hint{display:flex;align-items:center;justify-content:center;grid-gap:12px;gap:12px;background:rgba(26,182,198,.1);padding:16px 24px;border-radius:12px;color:#1ab6c6;font-weight:500;border:1px solid rgba(26,182,198,.2)}.auth-hint span:first-child{font-size:1.2rem}@media (max-width:768px){.auth-required-message{padding:40px 20px}.auth-required-message h3{font-size:1.5rem}.auth-required-message p{font-size:1rem}.auth-hint{flex-direction:column;grid-gap:8px;gap:8px;text-align:center}}.auth-form{display:flex;flex-direction:column;grid-gap:16px;gap:16px;max-width:400px;margin:0 auto}.auth-form input{padding:12px;border:2px solid #e1e5e9;border-radius:8px;font-size:1rem;transition:border-color .2s ease}.auth-form input:focus{outline:none;border-color:#1ab6c6;box-shadow:0 0 0 3px rgba(26,182,198,.1)}.auth-form button{padding:12px 20px;background:#1ab6c6;color:#fff;border:none;border-radius:8px;font-size:1rem;cursor:pointer;transition:all .2s ease}.auth-form button:hover{background:#168a96;transform:translateY(-1px)}.auth-form button[type=button]{background:transparent;color:#1ab6c6;border:2px solid #1ab6c6}.auth-form button[type=button]:hover{background:#1ab6c6;color:#fff}.auth-message{padding:12px;border-radius:8px;text-align:center;font-size:.9rem}.auth-message.error{background:#ffe6e6;color:#d63031;border:1px solid #fab1a0}.auth-message.success{background:#e6f3ff;color:#0984e3;border:1px solid #74b9ff}.auth-logged-in{text-align:center;padding:20px}.auth-logged-in button{padding:10px 20px;background:#e74c3c;color:#fff;border:none;border-radius:6px;cursor:pointer;margin-top:10px}.auth-logged-in button:hover{background:#c0392b}.account-info-container{width:100%;max-width:500px;margin:0 auto;background:#fff;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.04);padding:32px 24px}.account-title{font-size:2rem;font-weight:700;margin-bottom:24px;color:#222}.account-details{display:flex;flex-direction:column;grid-gap:18px;gap:18px}.account-row{display:flex;justify-content:space-between;font-size:1.1rem}.account-label{color:#1ab6c6;font-weight:600}.header-bar{width:100%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.04);padding:18px 32px;justify-content:flex-end;position:sticky;top:0;z-index:10}.header-bar,.header-user-info{display:flex;align-items:center}.header-user-info{grid-gap:18px;gap:18px}.header-username{font-weight:600;color:#1ab6c6}.header-status{background:#e0f7fa;color:#1ab6c6;border-radius:6px;padding:2px 10px;font-size:.95rem}.header-phone{color:#888;font-size:.95rem}.header-balance{font-weight:500;color:#183642}.header-login-btn,.header-logout-btn{background:#1ab6c6;color:#fff;border:none;border-radius:6px;padding:7px 18px;font-size:1rem;cursor:pointer;transition:background .2s;min-height:44px}.header-login-btn:hover,.header-logout-btn:hover{background:#1599a8}@media (max-width:768px){.header-bar{padding:12px 15px}.header-user-info{grid-gap:12px;gap:12px;flex-wrap:wrap}.header-phone,.header-status{display:none}.header-balance,.header-username{font-size:.9rem}.header-login-btn,.header-logout-btn{padding:8px 12px;font-size:.9rem}}@media (max-width:480px){.header-bar{padding:10px}.header-user-info{grid-gap:8px;gap:8px}.header-username{max-width:100px;overflow:hidden;text-overflow:ellipsis}.header-balance{font-size:.8rem}.header-login-btn,.header-logout-btn{padding:6px 10px;font-size:.8rem}}.auth-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);display:flex;justify-content:center;align-items:center;z-index:1000;animation:fadeIn .3s ease-out;padding:20px;box-sizing:border-box}.auth-modal{background:#fff;border-radius:12px;padding:0;max-width:400px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 10px 30px rgba(0,0,0,.3);animation:slideIn .3s ease-out;position:relative}.auth-modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #eee;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:12px 12px 0 0}.auth-modal-header h2{margin:0;font-size:1.5rem;font-weight:600}.auth-modal-close{background:none;border:none;font-size:2rem;color:#fff;cursor:pointer;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s}.auth-modal-close:hover{background-color:hsla(0,0%,100%,.2)}.auth-modal-form{padding:20px}.auth-modal-field{margin-bottom:15px}.auth-modal-field input{width:100%;padding:12px;border:2px solid #e1e1e1;border-radius:8px;font-size:1rem;transition:border-color .3s;box-sizing:border-box}.auth-modal-field input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px rgba(102,126,234,.1)}.auth-modal-field input:disabled{background-color:#f5f5f5;cursor:not-allowed}.auth-modal-message{padding:10px;border-radius:6px;margin-bottom:15px;text-align:center;font-weight:500}.auth-modal-message.success{background-color:#d4edda;color:#155724;border:1px solid #c3e6cb}.auth-modal-message.error{background-color:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.auth-modal-buttons{display:flex;flex-direction:column;grid-gap:10px;gap:10px}.auth-modal-submit{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:12px 20px;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s}.auth-modal-submit:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px rgba(102,126,234,.4)}.auth-modal-submit:disabled{background:#ccc;cursor:not-allowed;transform:none;box-shadow:none}.auth-modal-toggle{background:none;border:1px solid #667eea;color:#667eea;padding:10px 20px;border-radius:8px;font-size:.9rem;cursor:pointer;transition:all .2s}.auth-modal-toggle:hover:not(:disabled){background-color:#667eea;color:#fff}.auth-modal-toggle:disabled{border-color:#ccc;color:#ccc;cursor:not-allowed}.auth-modal-admin-link{margin-top:20px;padding-top:20px;border-top:1px solid #eee;text-align:center}.auth-modal-admin-link a{color:#667eea;text-decoration:none;font-weight:500;display:inline-flex;align-items:center;grid-gap:5px;gap:5px;transition:color .2s}.auth-modal-admin-link a:hover{color:#764ba2;text-decoration:underline}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{transform:translateY(-50px);opacity:0}to{transform:translateY(0);opacity:1}}@media (max-width:768px){.auth-modal-overlay{padding:10px}.auth-modal{width:100%;max-width:none;margin:0}.auth-modal-header{padding:15px}.auth-modal-header h2{font-size:1.3rem}.auth-modal-form{padding:15px}.auth-modal-field input{padding:14px;font-size:16px}}@media (max-width:480px){.auth-modal-overlay{padding:5px}.auth-modal-header{padding:12px}.auth-modal-header h2{font-size:1.2rem}.auth-modal-form{padding:12px}.auth-modal-buttons{grid-gap:8px;gap:8px}.auth-modal-submit,.auth-modal-toggle{padding:12px 16px;font-size:.9rem}}body{font-family:Arial,sans-serif;background-color:#f4f4f4}.container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh}.upload-section{margin-bottom:20px}.video-preview{width:100%;max-width:600px;margin-top:20px}.template-selector{margin:20px 0}.button{padding:10px 20px;background-color:#007bff;color:#fff;border:none;border-radius:5px;cursor:pointer}.button:hover{background-color:#0056b3}.main-layout{position:relative;display:flex;min-height:100vh;background:#f4fafd}.main-content{flex:1 1;padding:48px 32px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}.bg-curve{position:absolute;z-index:1;pointer-events:none;opacity:1}.bg-curve-1{top:-32px;left:0;width:420px;height:80px}.bg-curve-2{top:180px;left:420px;width:220px;height:80px}.bg-curve-3{left:60px;top:440px;width:420px;height:80px;transform:rotate(2deg)}.upload-video-wrapper{position:relative;background:#fff;border-radius:20px;box-shadow:0 2px 16px rgba(0,0,0,.07);padding:40px 32px 32px;margin:40px auto 0;max-width:480px;width:100%;display:flex;flex-direction:column;align-items:flex-start;z-index:2}@media (max-width:900px){.main-layout{flex-direction:column}.main-content{padding:24px 8px}}body{margin:0;padding:0;font-family:"Segoe UI",Arial,sans-serif;background:#f8f8f8}@media (max-width:768px){.main-layout{flex-direction:column}.sidebar{width:100%!important;height:auto!important;flex-direction:row!important;justify-content:space-around;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #eee;border-right:none;z-index:100;padding:10px 0}.sidebar-avatar{display:none}.sidebar-menu{display:flex;width:100%;justify-content:space-around}.sidebar-menu-item{padding:12px 20px;font-size:1rem;border-left:none;border-bottom:3px solid transparent;text-align:center;flex:1 1}.sidebar-menu-item.active,.sidebar-menu-item:hover:not(.disabled){background:#e0f7fa;border-left:none;border-bottom:3px solid #1ab6c6;color:#1ab6c6}.main-content{padding:20px 15px 80px}.header-bar{padding:15px}.header-user-info{flex-direction:column;align-items:flex-start;grid-gap:8px;gap:8px}}@media (max-width:600px){.custom-progress-bar__wrapper{min-width:90vw;max-width:98vw;margin:0 auto 1em;font-size:1em}.custom-progress-bar__bar{height:18px}.custom-progress-bar__label{font-size:1em;padding:.2em .5em}.history-table,.template-selector,.video-upload{width:100%!important;min-width:0;max-width:100%;box-sizing:border-box;padding:15px}.template-dropdown{width:100%;font-size:1em;padding:12px}.video-upload input[type=file]{width:100%;font-size:16px;padding:12px}.video-upload button{width:100%;font-size:1em;margin-top:.5em;padding:12px}.sidebar-menu-item{padding:8px 10px;font-size:.9rem}.header-bar{padding:10px;font-size:.9rem}.header-login-btn,.header-logout-btn{padding:8px 12px;font-size:.9rem}.header-balance,.header-username{font-size:.9rem}.main-content{padding:15px 10px 80px}.history-table{overflow-x:auto}.history-table table{min-width:600px}button{min-height:44px;font-size:16px}}@media (max-width:480px){.sidebar-menu-item{padding:6px 8px;font-size:.8rem}.main-content{padding:10px 5px 80px}.header-bar{padding:8px}}