.page-container{background:#ffffff;min-height:100vh}.gradient-header{background:linear-gradient(135deg,#3b82f6 0%,#1d4ed8 100%);padding:20px 16px 24px;box-shadow:0 4px 12px #0000001a}.gradient-header-content{display:flex;justify-content:space-between;align-items:center}.page-title{color:#fff;font-size:20px;font-weight:700;margin:0}.page-subtitle{color:#ffffffe6;font-size:14px;margin-top:4px}.header-stats{display:flex;gap:16px}.header-stat{text-align:center;color:#fff}.header-stat-value{font-size:24px;font-weight:700;line-height:1}.header-stat-label{font-size:12px;opacity:.9;margin-top:2px}.tab-navigation{background:white;padding:12px 16px;border-bottom:1px solid #e2e8f0}.tab-container{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}.tab-container::-webkit-scrollbar{display:none}.tab-button{flex-shrink:0;padding:8px 16px;border-radius:20px;border:none;font-size:14px;font-weight:500;cursor:pointer;transition:all .3s ease;background:#f1f5f9;color:#64748b;display:flex;align-items:center;gap:6px}.tab-button.active{background:#3b82f6;color:#fff;transform:scale(1.05);box-shadow:0 2px 8px #3b82f64d}.tab-badge{background:rgba(255,255,255,.2);color:#fff;padding:2px 6px;border-radius:10px;font-size:12px;font-weight:600}.search-section{padding:16px;background:#ffffff}.search-container{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:12px 16px;display:flex;align-items:center;gap:12px;box-shadow:0 2px 8px #0000000d}.search-input{flex:1;border:none;outline:none;font-size:15px;color:#1e293b}.search-input::placeholder{color:#94a3b8}.search-icon{color:#94a3b8}.filter-section{padding:0 16px 16px;background:#ffffff}.filter-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-bottom:16px}.filter-tabs::-webkit-scrollbar{display:none}.filter-tab{flex-shrink:0;padding:6px 12px;border-radius:16px;border:none;font-size:13px;font-weight:500;cursor:pointer;transition:all .3s ease;background:#f8fafc;color:#64748b}.filter-tab.active{background:#0ea5e9;color:#fff}.advanced-filters{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:16px;box-shadow:0 2px 8px #0000000d}.filters-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.filters-title{font-size:16px;font-weight:600;color:#1e293b}.filter-reset{font-size:13px;color:#3b82f6;background:none;border:none;cursor:pointer}.filter-options{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none}.filter-options::-webkit-scrollbar{display:none}.filter-option{flex-shrink:0}.filter-label{font-size:12px;color:#64748b;margin-bottom:4px}.filter-select{padding:6px 12px;border:1px solid #e2e8f0;border-radius:8px;font-size:13px;background:white;color:#1e293b;min-width:100px}.content-section{padding:0 16px 80px;background:#ffffff}.card{background:#ffffff;border:1px solid #e2e8f0;border-radius:16px;padding:16px;margin-bottom:12px;box-shadow:0 2px 8px #0000000d;transition:all .3s ease;position:relative}.card:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0000001a;border-color:#cbd5e1}.data-card{background:#ffffff;border:1px solid #e2e8f0;border-radius:16px;padding:20px;box-shadow:0 2px 8px #0000000d;transition:all .3s ease}.data-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0000001a;border-color:#cbd5e1}.data-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.data-card-title{font-size:16px;font-weight:600;color:#1e293b}.data-card-value{font-size:24px;font-weight:700;color:#3b82f6}.data-card-subtitle{font-size:12px;color:#64748b;margin-top:4px}.button{border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;border:none;padding:10px 20px;display:inline-flex;align-items:center;justify-content:center;gap:6px}.button-primary{background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%);color:#fff;box-shadow:0 4px 12px #3b82f64d}.button-primary:hover{background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%);box-shadow:0 6px 16px #3b82f666;transform:translateY(-1px)}.button-secondary{background:#f1f5f9;color:#64748b}.button-secondary:hover{background:#e2e8f0;color:#475569}.button-danger{background:#fef2f2;color:#dc2626}.button-danger:hover{background:#fee2e2;transform:translateY(-1px)}.button-success{background:#f0fdf4;color:#16a34a}.button-success:hover{background:#dcfce7;transform:translateY(-1px)}.button-fixed-sm{font-size:12px;padding:6px 10px;border-radius:8px;min-width:72px;min-height:28px}.action-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:8px}.action-button{padding:8px 4px;border-radius:8px;border:none;font-size:11px;font-weight:500;cursor:pointer;transition:all .3s ease;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}.action-button:hover{transform:translateY(-1px)}.action-icon{width:16px;height:16px}.empty-state{text-align:center;padding:48px 16px}.empty-icon{width:80px;height:80px;margin:0 auto 16px;background:#f1f5f9;border-radius:50%;display:flex;align-items:center;justify-content:center}.empty-title{font-size:18px;font-weight:600;color:#1e293b;margin-bottom:8px}.empty-description{font-size:14px;color:#64748b;margin-bottom:16px}.modal-overlay{position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;z-index:99999!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:16px!important;background:rgba(0,0,0,.5)!important;pointer-events:auto!important;overflow:hidden!important;-webkit-overflow-scrolling:touch!important}.modal-content .bg-gray-50,.modal-content .bg-gray-50 *,.modal-content .space-y-3,.modal-content .space-y-3 *,.modal-content div[class*=space-y-3],.modal-content div[class*=space-y-3] *,.modal-content .font-medium,.modal-content .font-mono,.modal-content .text-xs,.modal-content span[class*=text-]{color:#000!important}.modal-backdrop{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;background:rgba(0,0,0,.5)!important;backdrop-filter:blur(4px)!important;-webkit-backdrop-filter:blur(4px)!important;pointer-events:auto!important;cursor:pointer}div.modal-overlay{position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;z-index:99999!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:16px!important;background:rgba(0,0,0,.5)!important;pointer-events:auto!important;overflow:hidden!important;-webkit-overflow-scrolling:touch!important}body.modal-open{overflow:hidden!important;position:fixed!important;width:100%!important;height:100%!important}div.modal-backdrop{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;background:rgba(0,0,0,.5)!important;backdrop-filter:blur(4px)!important;-webkit-backdrop-filter:blur(4px)!important;pointer-events:auto!important;cursor:pointer}.modal-container{position:relative;background:#ffffff;border-radius:20px;box-shadow:0 25px 50px -12px #00000040;max-width:500px;width:100%;max-height:80vh;overflow:visible;pointer-events:auto;display:flex;flex-direction:column}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f1f5f9;background:linear-gradient(135deg,#f8fafc 0%,#ffffff 100%)}.modal-title{font-size:18px;font-weight:700;color:#000;margin:0}.modal-close-btn{width:32px;height:32px;border-radius:50%;border:none;background:#f1f5f9;color:#64748b;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.modal-close-btn:hover{background:#e2e8f0;color:#475569;transform:rotate(90deg)}.modal-content{padding:20px 24px;flex:1;overflow-y:auto!important;min-height:0;max-height:calc(80vh - 140px)!important;-webkit-overflow-scrolling:touch!important;scroll-behavior:smooth!important;color:#000}.modal-input{width:100%;padding:12px 16px;border:2px solid #e2e8f0;border-radius:12px;font-size:15px;background:#f8fafc;color:#1e293b;transition:all .2s ease}.modal-input:focus{outline:none;border-color:#3b82f6;background:#ffffff;box-shadow:0 0 0 3px #3b82f61a}.modal-textarea{width:100%;padding:12px 16px;border:2px solid #e2e8f0;border-radius:12px;font-size:15px;background:#f8fafc;color:#1e293b;resize:vertical;min-height:100px;transition:all .2s ease}.modal-textarea:focus{outline:none;border-color:#3b82f6;background:#ffffff;box-shadow:0 0 0 3px #3b82f61a}.modal-actions{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid #f1f5f9;background:#f8fafc;pointer-events:auto}.modal-btn{padding:8px 16px;border-radius:8px;font-size:14px;font-weight:500;border:none;cursor:pointer;outline:none;pointer-events:auto}.modal-btn-secondary{background:#f1f5f9;color:#64748b}.modal-btn-secondary:hover{background:#e2e8f0;color:#475569}.modal-btn-primary{background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%);color:#fff;box-shadow:0 4px 12px #3b82f64d}.modal-btn-primary:hover{background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%);box-shadow:0 6px 16px #3b82f666;transform:translateY(-1px)}@keyframes slideUp{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}@keyframes slideInRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes loading{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-slide-up{animation:slideUp .3s ease-out}.animate-slide-in-right{animation:slideInRight .3s ease-out}.animate-shake{animation:shake .5s ease-in-out}.animate-bounce{animation:bounce 1s infinite}.animate-pulse{animation:pulse 2s infinite}.loading-spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top:2px solid white;border-radius:50%;animation:loading 1s linear infinite}.loading-spinner-dark{border:2px solid rgba(0,0,0,.1);border-top:2px solid #3b82f6}.wechat-env{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.wechat-env input,.wechat-env textarea{-webkit-user-select:text;user-select:text}.haptic-feedback{position:relative}.haptic-feedback:active{transform:scale(.95)}.bg-gradient-main{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}.bg-gradient-blue{background:linear-gradient(135deg,#3b82f6 0%,#1d4ed8 100%)}.bg-gradient-green{background:linear-gradient(135deg,#10b981 0%,#059669 100%)}.bg-gradient-orange{background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%)}.text-responsive-xs{font-size:clamp(.75rem,2vw,.875rem)}.text-responsive-sm{font-size:clamp(.875rem,2.5vw,1rem)}.text-responsive-base{font-size:clamp(1rem,3vw,1.125rem)}.text-responsive-lg{font-size:clamp(1.125rem,3.5vw,1.25rem)}.text-responsive-xl{font-size:clamp(1.25rem,4vw,1.5rem)}.safe-area-top{padding-top:env(safe-area-inset-top)}.safe-area-bottom{padding-bottom:env(safe-area-inset-bottom)}.safe-area-left{padding-left:env(safe-area-inset-left)}.safe-area-right{padding-right:env(safe-area-inset-right)}@media (prefers-color-scheme: dark){.dark-mode-auto{background-color:#1f2937;color:#f9fafb}.dark-mode-auto .card{background-color:#374151;border-color:#4b5563}.dark-mode-auto .form-input,.dark-mode-auto .modal-textarea{background-color:#374151;border-color:#4b5563;color:#f9fafb}}.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:20px}.stats-grid.three-columns{grid-template-columns:repeat(3,1fr)}.stats-grid.four-columns{grid-template-columns:repeat(4,1fr)}section .stats-grid.five-columns,.stats-grid.five-columns{grid-template-columns:repeat(5,1fr)!important;min-width:0}.stat-card{background:#ffffff;border:1px solid #e2e8f0;border-radius:12px;padding:16px;text-align:center;box-shadow:0 2px 8px #0000000d;transition:all .3s ease;min-width:0;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center}.stat-card:hover{transform:translateY(-2px);box-shadow:0 8px 16px #0000001a;border-color:#cbd5e1}.stat-card-value{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.stat-card-label{font-size:12px;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.2}@media (min-width: 768px){.stats-grid.four-columns{grid-template-columns:repeat(4,1fr)}.stats-grid.five-columns{grid-template-columns:repeat(5,1fr)}.filter-options{flex-wrap:wrap}.action-buttons{grid-template-columns:repeat(5,1fr)}}@media (min-width: 1200px){.stats-grid.five-columns{grid-template-columns:repeat(5,1fr);gap:12px}.stats-grid.five-columns .stat-card{padding:16px 12px}.stats-grid.five-columns .stat-card-value{font-size:20px}.stats-grid.five-columns .stat-card-label{font-size:12px}}@media (min-width: 768px) and (max-width: 1199px){.stats-grid.five-columns{grid-template-columns:repeat(5,1fr);gap:8px}.stats-grid.five-columns .stat-card{padding:14px 10px}.stats-grid.five-columns .stat-card-value{font-size:18px}.stats-grid.five-columns .stat-card-label{font-size:11px}}@media (max-width: 767px){section .stats-grid.five-columns,.stats-grid.five-columns{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:4px}.stats-grid.five-columns .stat-card{padding:12px 6px}.stats-grid.five-columns .stat-card-value{font-size:16px;font-weight:600}.stats-grid.five-columns .stat-card-label{font-size:10px;line-height:1.2}}@media (max-width: 480px){section .stats-grid.five-columns,.stats-grid.five-columns{grid-template-columns:repeat(5,minmax(50px,1fr))!important;gap:2px}.stats-grid.five-columns .stat-card{padding:10px 4px}.stats-grid.five-columns .stat-card-value{font-size:14px;font-weight:600}.stats-grid.five-columns .stat-card-label{font-size:9px;line-height:1.1}}@media (max-width: 360px){section .stats-grid.five-columns,.stats-grid.five-columns{grid-template-columns:repeat(5,minmax(45px,1fr))!important;gap:1px}.stats-grid.five-columns .stat-card{padding:8px 2px}.stats-grid.five-columns .stat-card-value{font-size:12px;font-weight:700}.stats-grid.five-columns .stat-card-label{font-size:8px;line-height:1}}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 16px}.loading-spinner{width:40px;height:40px;border:4px solid #f1f5f9;border-top:4px solid #3b82f6;border-radius:50%;animation:spin 1s linear infinite}.loading-spinner-lg{width:60px;height:60px;border-width:6px}.loading-text{margin-top:16px;font-size:14px;color:#64748b}.tag{display:inline-block;padding:4px 12px;border-radius:16px;font-size:12px;font-weight:500;margin-right:6px;margin-bottom:6px}.tag-blue{background:#dbeafe;color:#1d4ed8}.tag-green{background:#dcfce7;color:#15803d}.tag-orange{background:#fed7aa;color:#ea580c}.tag-red{background:#fecaca;color:#dc2626}.tag-gray{background:#f1f5f9;color:#64748b}.form-group{margin-bottom:16px}.form-label{display:block;font-size:14px;font-weight:500;color:#374151;margin-bottom:6px}.form-input{width:100%;padding:10px 14px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;background:#ffffff;color:#1f2937;transition:all .2s ease}.form-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.form-select{width:100%;padding:10px 14px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;background:#ffffff;color:#1f2937;transition:all .2s ease}.form-select:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.upload-area{border:2px dashed #d1d5db;border-radius:12px;padding:24px 16px;text-align:center;background:#f9fafb;transition:all .3s ease;cursor:pointer;min-height:120px}.upload-area:hover,.upload-area.dragging{border-color:#3b82f6;background:#eff6ff}.upload-icon{width:48px;height:48px;margin:0 auto 12px;color:#9ca3af}.upload-text{font-size:14px;color:#6b7280;margin-bottom:4px}.upload-hint{font-size:12px;color:#9ca3af}.complaint-option{transform-origin:center;transition:all .3s cubic-bezier(.4,0,.2,1)}.complaint-option:hover{transform:translateY(-2px) scale(1.02)}.complaint-option:active{transform:translateY(0) scale(.98)}.complaint-icon{transition:all .3s ease}.complaint-option:hover .complaint-icon{transform:scale(1.1) rotate(5deg)}.form-input.error,.modal-textarea.error{border-color:#ef4444;box-shadow:0 0 0 3px #ef44441a}.form-input.success,.modal-textarea.success{border-color:#10b981;box-shadow:0 0 0 3px #10b9811a}.char-counter{transition:color .2s ease}.char-counter.warning{color:#f59e0b}.char-counter.danger{color:#ef4444}.char-counter.success{color:#10b981}.upload-area{position:relative;overflow:hidden}.upload-area:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(59,130,246,.1),transparent);transition:left .5s ease}.upload-area:hover:before{left:100%}.share-page-container{position:static!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;z-index:auto!important;display:block!important;align-items:stretch!important;justify-content:flex-start!important;padding:0!important;background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;pointer-events:auto!important;min-height:100vh;width:100%;max-width:none!important;max-height:none!important;border-radius:0!important;overflow:visible!important;box-shadow:none!important;border:none!important;margin:0!important;animation:none!important;transition:none!important;transform:none!important;will-change:auto!important}.share-page-content{background:linear-gradient(135deg,#3b82f6 0%,#1d4ed8 100%);min-height:100vh;padding:20px 16px;display:flex;align-items:center;justify-content:center;animation:none!important;transition:none!important;transform:none!important;will-change:auto!important}.share-page-container .modal-overlay,.share-page-container .modal-backdrop,.share-page-container .modal-container{all:unset!important;position:static!important;background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-radius:0!important;box-shadow:none!important;max-width:none!important;max-height:none!important;padding:0!important;margin:0!important;animation:none!important;transition:none!important;transform:none!important;will-change:auto!important}.share-page-container *,.share-page-content *{animation:none!important;transition:none!important;transform:none!important;will-change:auto!important}.share-page-container .animate-spin,.share-page-content .animate-spin{animation:spin 1s linear infinite!important}@keyframes sharepage-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.share-page-container .animate-spin,.share-page-content .animate-spin{animation:sharepage-spin 1s linear infinite!important}.tooltip{position:absolute;z-index:50;animation:fadeIn .2s ease-out}.progress-indicator{position:relative;overflow:hidden}.progress-indicator:after{content:"";position:absolute;top:0;left:0;height:100%;width:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:loading 2s infinite}.role-selector{margin-bottom:6px}.role-display{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #e2e8f0;border-radius:8px;background:#f8fafc}.role-badge{display:inline-flex;align-items:center;padding:4px 12px;border-radius:16px;font-size:14px;font-weight:500;white-space:nowrap;background:#eff6ff;color:#2563eb;border:1px solid #bfdbfe}.role-options-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:8px}.role-option-button{padding:12px 16px;border:2px solid;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;text-align:center;background:white;color:#374151}.role-option-button:hover{transform:translateY(-1px);box-shadow:0 4px 8px #0000001a}.role-option-button:active{transform:translateY(0)}@media (max-width: 640px){.role-display{flex-direction:column;align-items:flex-start;gap:8px}.role-options-grid{grid-template-columns:1fr}.role-option-button{padding:10px 14px;font-size:13px}}.stat-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:12px 8px;text-align:center;min-width:70px;transition:all .2s ease}.stat-card:hover{background:#f1f5f9;border-color:#cbd5e1;transform:translateY(-1px);box-shadow:0 2px 4px #0000000d}.stat-card-value{font-size:18px;font-weight:700;color:#1f2937;line-height:1.2;margin-bottom:4px}.stat-card-label{font-size:12px;color:#6b7280;line-height:1.3}@media (max-width: 640px){.stat-card{padding:8px 6px;min-width:60px}.stat-card-value{font-size:16px}.stat-card-label{font-size:11px}}.today-data-container{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px}.today-data-container::-webkit-scrollbar{display:none}.quick-actions-container{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding:16px 16px 8px;background:#ffffff;border-bottom:1px solid #e2e8f0}.quick-actions-container::-webkit-scrollbar{display:none}.quick-action-button{flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px 16px;border-radius:16px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);min-width:80px;text-decoration:none;box-shadow:0 4px 12px #0000001a;position:relative;overflow:hidden}.quick-action-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .5s ease}.quick-action-button:hover:before{left:100%}.quick-action-button.primary{background:linear-gradient(135deg,rgba(59,130,246,.9) 0%,rgba(37,99,235,.9) 100%);border-color:#3b82f680;color:#fff}.quick-action-button.primary:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 8px 24px #3b82f666;background:linear-gradient(135deg,rgba(37,99,235,.9) 0%,rgba(29,78,216,.9) 100%)}.quick-action-button.secondary{background:rgba(241,245,249,.8);border-color:#e2e8f080;color:#475569}.quick-action-button.secondary:hover{background:rgba(226,232,240,.9);transform:translateY(-2px) scale(1.03);box-shadow:0 6px 16px #00000026}.quick-action-button.success{background:linear-gradient(135deg,rgba(16,185,129,.9) 0%,rgba(5,150,105,.9) 100%);border-color:#10b98180;color:#fff}.quick-action-button.success:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 8px 24px #10b98166;background:linear-gradient(135deg,rgba(5,150,105,.9) 0%,rgba(4,120,87,.9) 100%)}.quick-action-button.warning{background:linear-gradient(135deg,rgba(245,158,11,.9) 0%,rgba(217,119,6,.9) 100%);border-color:#f59e0b80;color:#fff}.quick-action-button.warning:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 8px 24px #f59e0b66;background:linear-gradient(135deg,rgba(217,119,6,.9) 0%,rgba(180,83,9,.9) 100%)}.quick-action-button.danger{background:linear-gradient(135deg,rgba(239,68,68,.9) 0%,rgba(220,38,38,.9) 100%);border-color:#ef444480;color:#fff}.quick-action-button.danger:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 8px 24px #ef444466;background:linear-gradient(135deg,rgba(220,38,38,.9) 0%,rgba(185,28,28,.9) 100%)}.quick-action-button:disabled,.quick-action-button.disabled{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none!important}.quick-action-button:disabled:hover,.quick-action-button.disabled:hover{transform:none!important;box-shadow:none!important}.quick-action-icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.quick-action-button:hover .quick-action-icon{transform:scale(1.2) rotate(5deg)}.quick-action-text{font-size:12px;font-weight:500;text-align:center;line-height:1.2;transition:all .3s ease;white-space:nowrap}.quick-action-button:hover .quick-action-text{font-weight:600}.quick-action-badge{position:absolute;top:-6px;right:-6px;background:#ef4444;color:#fff;font-size:10px;font-weight:600;padding:2px 6px;border-radius:10px;min-width:18px;text-align:center;box-shadow:0 2px 4px #0003;animation:pulse 2s infinite}.quick-actions-title{padding:16px 16px 0;font-size:16px;font-weight:600;color:#1e293b;margin:0;background:#ffffff;border-bottom:1px solid #e2e8f0}.quick-actions-subtitle{padding:0 16px 8px;font-size:13px;color:#64748b;margin:0;background:#ffffff}@media (max-width: 768px){.quick-actions-container{gap:6px;padding:12px 12px 6px}.quick-action-button{min-width:70px;padding:10px 12px;border-radius:14px}.quick-action-icon{width:20px;height:20px}.quick-action-text{font-size:11px}}@media (max-width: 640px){.quick-actions-container{gap:4px;padding:10px 10px 5px}.quick-action-button{min-width:60px;padding:8px 10px;border-radius:12px}.quick-action-icon{width:18px;height:18px}.quick-action-text{font-size:10px}.quick-action-badge{font-size:9px;padding:1px 4px;min-width:16px;top:-4px;right:-4px}}@media (max-width: 480px){.quick-actions-container{gap:3px;padding:8px 8px 4px}.quick-action-button{min-width:55px;padding:6px 8px;border-radius:10px}.quick-action-icon{width:16px;height:16px}.quick-action-text{font-size:9px}}@keyframes quickActionPulse{0%{transform:scale(1);box-shadow:0 4px 12px #0000001a}50%{transform:scale(1.05);box-shadow:0 8px 24px #0003}to{transform:scale(1);box-shadow:0 4px 12px #0000001a}}.quick-action-button.animate-pulse{animation:quickActionPulse 1.5s infinite}.quick-action-button.loading{position:relative;overflow:hidden;color:transparent!important}.quick-action-button.loading:after{content:"";position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border:2px solid rgba(255,255,255,.3);border-top:2px solid currentColor;border-radius:50%;animation:loading 1s linear infinite}@keyframes iconBounce{0%,20%,53%,80%,to{transform:translateZ(0)}40%,43%{transform:translate3d(0,-10px,0)}70%{transform:translate3d(0,-5px,0)}90%{transform:translate3d(0,-2px,0)}}.quick-action-button.animate-icon .quick-action-icon{animation:iconBounce 1s infinite}@keyframes textGlow{0%{text-shadow:0 0 5px rgba(255,255,255,.5)}50%{text-shadow:0 0 15px rgba(255,255,255,.8)}to{text-shadow:0 0 5px rgba(255,255,255,.5)}}.quick-action-button.glow-text .quick-action-text{animation:textGlow 2s infinite}.quick-actions-vertical{display:flex;flex-direction:column;gap:8px;padding:16px}.quick-action-button-vertical{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;border:1px solid #e2e8f0;background:#f8fafc;cursor:pointer;transition:all .3s ease;text-decoration:none}.quick-action-button-vertical:hover{background:#f1f5f9;transform:translate(4px);border-color:#cbd5e1}.quick-action-button-vertical.primary{background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%);border-color:#3b82f6;color:#fff}.quick-action-button-vertical.primary:hover{background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%)}.quick-action-button-vertical.success{background:linear-gradient(135deg,#10b981 0%,#059669 100%);border-color:#10b981;color:#fff}.quick-action-button-vertical.success:hover{background:linear-gradient(135deg,#059669 0%,#047857 100%)}.quick-action-icon-vertical{width:20px;height:20px;display:flex;align-items:center;justify-content:center}.quick-action-text-vertical{font-size:14px;font-weight:500;flex:1}.quick-action-chevron{width:16px;height:16px;color:#94a3b8;transition:transform .3s ease}.quick-action-button-vertical:hover .quick-action-chevron{transform:translate(4px);color:#64748b}.quick-actions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:12px;padding:16px}.quick-action-fab{position:fixed;bottom:80px;right:16px;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%);border:none;color:#fff;cursor:pointer;box-shadow:0 6px 16px #3b82f666;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;z-index:1000}.quick-action-fab:hover{transform:scale(1.1) rotate(90deg);box-shadow:0 8px 24px #3b82f680}.quick-action-fab:active{transform:scale(.95)}.quick-action-fab-icon{width:24px;height:24px}.quick-action-menu{position:fixed;bottom:150px;right:16px;display:flex;flex-direction:column;gap:12px;z-index:999;opacity:0;transform:scale(.8) translateY(20px);transition:all .3s cubic-bezier(.4,0,.2,1);pointer-events:none}.quick-action-menu.open{opacity:1;transform:scale(1) translateY(0);pointer-events:auto}.quick-action-menu-item{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:24px;background:white;border:1px solid #e2e8f0;box-shadow:0 4px 12px #0000001a;cursor:pointer;transition:all .3s ease;white-space:nowrap}.quick-action-menu-item:hover{transform:translate(-4px);box-shadow:0 6px 16px #00000026}.quick-action-menu-icon{width:16px;height:16px}.quick-action-menu-text{font-size:13px;font-weight:500;color:#1e293b}@media (max-width: 640px){.quick-action-fab{width:48px;height:48px;bottom:70px;right:12px}.quick-action-fab-icon{width:20px;height:20px}.quick-action-menu{bottom:130px;right:12px}.quick-action-menu-item{padding:6px 12px}.quick-action-menu-text{font-size:12px}}@media (hover: none) and (pointer: coarse){.quick-action-button{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.quick-action-button:active{transform:scale(.95);transition:transform .1s ease}.quick-action-fab{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.quick-action-fab:active{transform:scale(.9)}}@media (prefers-color-scheme: dark){.quick-action-button.secondary{background:rgba(30,41,59,.8);border-color:#47556980;color:#e2e8f0}.quick-action-button-vertical{background:#1e293b;border-color:#334155;color:#e2e8f0}.quick-action-button-vertical:hover{background:#334155}.quick-action-menu-item{background:#1e293b;border-color:#334155}}@keyframes wechat-logo-glow{0%,to{box-shadow:0 0 20px #22c55e4d}50%{box-shadow:0 0 30px #22c55e99}}.wechat-auth-logo{animation:wechat-logo-glow 2s ease-in-out infinite}@keyframes wechat-bounce-in{0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.05)}70%{transform:scale(.9)}to{opacity:1;transform:scale(1)}}.wechat-bounce-in{animation:wechat-bounce-in .6s ease-out}@keyframes wechat-progress{0%{width:0%}to{width:100%}}.wechat-progress-bar{animation:wechat-progress 2s ease-in-out}@keyframes glow{0%,to{box-shadow:0 0 20px #3b82f680}50%{box-shadow:0 0 30px #3b82f6cc}}@keyframes slideInUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.control-bar-enter{animation:slideInUp .3s ease-out}.play-button-float{animation:float 3s ease-in-out infinite}.glow-effect{animation:glow 2s ease-in-out infinite}.fade-in{animation:fadeIn .5s ease-out}.button-hover-enhanced{transition:all .3s cubic-bezier(.4,0,.2,1)}.button-hover-enhanced:hover{transform:scale(1.05)}.button-hover-enhanced:active{transform:scale(.95)}.progress-bar-enhanced{position:relative;overflow:hidden}.progress-bar-enhanced:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 2s infinite}@keyframes shimmer{0%{left:-100%}to{left:100%}}.video-container-enhanced{position:relative;border-radius:12px;overflow:hidden;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.video-fullscreen{background:black}.video-fullscreen .control-bar{background:linear-gradient(to top,rgba(0,0,0,.9),transparent)}:root{--primary-50: #eff6ff;--primary-100: #dbeafe;--primary-200: #bfdbfe;--primary-300: #93c5fd;--primary-400: #60a5fa;--primary-500: #3b82f6;--primary-600: #2563eb;--primary-700: #1d4ed8;--primary-800: #1e40af;--primary-900: #1e3a8a;--success-50: #f0fdf4;--success-100: #dcfce7;--success-200: #bbf7d0;--success-300: #86efac;--success-400: #4ade80;--success-500: #22c55e;--success-600: #16a34a;--success-700: #15803d;--success-800: #166534;--success-900: #14532d;--warning-50: #fffbeb;--warning-100: #fef3c7;--warning-200: #fde68a;--warning-300: #fcd34d;--warning-400: #fbbf24;--warning-500: #f59e0b;--warning-600: #d97706;--warning-700: #b45309;--warning-800: #92400e;--warning-900: #78350f;--error-50: #fef2f2;--error-100: #fee2e2;--error-200: #fecaca;--error-300: #fca5a5;--error-400: #f87171;--error-500: #ef4444;--error-600: #dc2626;--error-700: #b91c1c;--error-800: #991b1b;--error-900: #7f1d1d;--gray-50: #f8fafc;--gray-100: #f1f5f9;--gray-200: #e2e8f0;--gray-300: #cbd5e1;--gray-400: #94a3b8;--gray-500: #64748b;--gray-600: #475569;--gray-700: #334155;--gray-800: #1e293b;--gray-900: #0f172a;--bg-primary: #ffffff;--bg-secondary: #ffffff;--bg-tertiary: #f8fafc;--bg-inverse: #1e293b;--text-primary: #0f172a;--text-secondary: #334155;--text-tertiary: #475569;--text-inverse: #ffffff;--text-disabled: #94a3b8;--border-light: #f1f5f9;--border-medium: #e2e8f0;--border-dark: #cbd5e1;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 48px;--spacing-3xl: 64px;--radius-sm: 4px;--radius: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--radius-2xl: 24px;--radius-full: 9999px;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px);--touch-target-min: 44px;--touch-target-comfort: 48px;--duration-fast: .15s;--duration-normal: .3s;--duration-slow: .5s;--ease-out: cubic-bezier(.4, 0, .2, 1);--ease-in-out: cubic-bezier(.4, 0, .2, 1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scroll-behavior:smooth}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif;line-height:1.5;color:var(--text-primary);background-color:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.mobile-page{min-height:100vh;background:#ffffff;position:relative}.safe-area-container{padding-top:var(--safe-top);padding-bottom:var(--safe-bottom);padding-left:var(--safe-left);padding-right:var(--safe-right)}.mobile-header{background:var(--bg-primary);border-bottom:1px solid var(--border-light);position:sticky;top:0;z-index:30;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 1px 3px #0000001a}.mobile-header-content{padding:var(--spacing-sm) var(--spacing-md);display:flex;align-items:center;justify-content:space-between;min-height:50px;max-width:100%}.mobile-card{background:var(--bg-primary);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);border:1px solid var(--border-light);overflow:hidden;transition:all var(--duration-normal) var(--ease-out)}.mobile-card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}.mobile-btn{display:inline-flex;align-items:center;justify-content:center;min-width:var(--touch-target-min);min-height:var(--touch-target-min);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius);font-weight:500;font-size:14px;line-height:1.4;text-decoration:none;transition:all var(--duration-fast) var(--ease-out);cursor:pointer;border:1px solid transparent;outline:none;user-select:none;-webkit-user-select:none;position:relative;overflow:hidden}.mobile-btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.mobile-btn-primary{background-color:var(--primary-600);color:var(--text-inverse);border-color:var(--primary-600)}.mobile-btn-primary:hover:not(:disabled){background-color:var(--primary-700);border-color:var(--primary-700)}.mobile-btn-secondary{background-color:var(--bg-primary);color:var(--text-secondary);border-color:var(--border-medium)}.mobile-btn-secondary:hover:not(:disabled){background-color:var(--bg-tertiary);border-color:var(--border-dark)}.touch-target{min-width:var(--touch-target-min);min-height:var(--touch-target-min);display:inline-flex;align-items:center;justify-content:center}.mobile-input{width:100%;padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--border-medium);border-radius:var(--radius);background-color:var(--bg-primary);color:var(--text-primary);font-size:14px;line-height:1.5;transition:all var(--duration-fast) var(--ease-out);outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.mobile-input:focus{border-color:var(--primary-500);box-shadow:0 0 0 3px #3b82f61a}.mobile-input::placeholder{color:var(--text-disabled)}.mobile-bottom-nav{position:fixed;bottom:0;left:0;right:0;background:var(--bg-primary);border-top:1px solid var(--border-light);z-index:50;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding-bottom:var(--safe-bottom)}.mobile-bottom-nav-content{display:flex;align-items:center;justify-content:space-around;height:56px;max-width:480px;margin:0 auto;position:relative}.mobile-bottom-nav-content:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.1),transparent);z-index:1}.mobile-grid{display:grid;gap:var(--spacing-md)}.mobile-grid-2{grid-template-columns:repeat(2,1fr)}.mobile-grid-3{grid-template-columns:repeat(3,1fr)}.mobile-grid-4{grid-template-columns:repeat(4,1fr)}.horizontal-scroll{overflow-x:auto;overflow-y:hidden;white-space:nowrap;scrollbar-width:none;-ms-overflow-style:none}.horizontal-scroll::-webkit-scrollbar{display:none}.loading-spinner{border:2px solid var(--border-light);border-top:2px solid var(--primary-600);border-radius:50%;width:20px;height:20px;animation:spin 1s linear infinite}.loading-spinner-lg{width:40px;height:40px;border-width:3px}.mobile-bottom-spacer{height:80px}.tactile-feedback{-webkit-tap-highlight-color:rgba(59,130,246,.1);transition:transform var(--duration-fast) var(--ease-out)}.tactile-feedback:active{transform:scale(.95)}.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.6);transform:scale(0);animation:ripple-animation .6s linear;pointer-events:none}@keyframes ripple-animation{to{transform:scale(4);opacity:0}}.status-indicator{display:inline-flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-full);font-size:12px;font-weight:500}.status-success{background-color:var(--success-100);color:var(--success-700)}.status-warning{background-color:var(--warning-100);color:var(--warning-700)}.status-error{background-color:var(--error-100);color:var(--error-700)}.status-info{background-color:var(--primary-100);color:var(--primary-700)}.progress-bar{width:100%;height:8px;background-color:var(--border-light);border-radius:var(--radius-full);overflow:hidden}.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--primary-500),var(--primary-600));border-radius:var(--radius-full);transition:width var(--duration-normal) var(--ease-out)}.text-clamp-1{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.text-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.text-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}@media (min-width: 640px){.mobile-page{max-width:640px;margin:0 auto;box-shadow:var(--shadow-lg)}}@media (min-width: 768px){.mobile-grid-2{grid-template-columns:repeat(3,1fr)}.mobile-grid-3{grid-template-columns:repeat(4,1fr)}}@media (min-width: 1024px){.mobile-page{max-width:768px}.mobile-grid-3{grid-template-columns:repeat(5,1fr)}}@media (prefers-contrast: high){:root{--text-primary: #000000;--text-secondary: #1a1a1a;--border-medium: #666666}}@media (prefers-color-scheme: dark){:root{--bg-primary: #ffffff;--bg-secondary: #ffffff;--bg-tertiary: #f8fafc;--text-primary: #0f172a;--text-secondary: #334155;--text-tertiary: #475569;--border-light: #e2e8f0;--border-medium: #cbd5e1;--border-dark: #94a3b8}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media print{.mobile-bottom-nav,.touch-target{display:none!important}.mobile-page{box-shadow:none!important}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.focus-visible:focus{outline:2px solid var(--primary-600);outline-offset:2px}body{-webkit-overflow-scrolling:touch}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}.mobile-card,.mobile-btn,.mobile-input{will-change:transform}.mobile-page{contain:layout style paint}:root{--brand-primary: #0f766e;--brand-primary-light: #14b8a6;--brand-primary-lighter: #2dd4bf;--brand-primary-ultra-light: #ccfbf1;--brand-primary-dark: #115e59;--brand-primary-darker: #134e4a;--brand-secondary: #06b6d4;--brand-secondary-light: #22d3ee;--brand-secondary-lighter: #67e8f9;--brand-secondary-dark: #0891b2;--brand-secondary-darker: #0e7490;--success-50: #ecfdf5;--success-100: #d1fae5;--success-200: #a7f3d0;--success-300: #6ee7b7;--success-400: #34d399;--success-500: #10b981;--success-600: #059669;--success-700: #047857;--success-800: #065f46;--success-900: #064e3b;--warning-50: #fffbeb;--warning-100: #fef3c7;--warning-200: #fde68a;--warning-300: #fcd34d;--warning-400: #fbbf24;--warning-500: #f59e0b;--warning-600: #d97706;--warning-700: #b45309;--warning-800: #92400e;--warning-900: #78350f;--danger-50: #fef2f2;--danger-100: #fee2e2;--danger-200: #fecaca;--danger-300: #fca5a5;--danger-400: #f87171;--danger-500: #ef4444;--danger-600: #dc2626;--danger-700: #b91c1c;--danger-800: #991b1b;--danger-900: #7f1d1d;--info-50: #eff6ff;--info-100: #dbeafe;--info-200: #bfdbfe;--info-300: #93c5fd;--info-400: #60a5fa;--info-500: #3b82f6;--info-600: #2563eb;--info-700: #1d4ed8;--info-800: #1e40af;--info-900: #1e3a8a;--neutral-50: #f9fafb;--neutral-100: #f3f4f6;--neutral-200: #e5e7eb;--neutral-300: #d1d5db;--neutral-400: #9ca3af;--neutral-500: #6b7280;--neutral-600: #4b5563;--neutral-700: #374151;--neutral-800: #1f2937;--neutral-900: #111827;--role-super-admin-50: #faf5ff;--role-super-admin-100: #f3e8ff;--role-super-admin-200: #e9d5ff;--role-super-admin-300: #d8b4fe;--role-super-admin-400: #c084fc;--role-super-admin-500: #a855f7;--role-super-admin-600: #9333ea;--role-super-admin-700: #7c3aed;--role-super-admin-800: #6b21a8;--role-super-admin-900: #581c87;--role-supervisor-50: #eff6ff;--role-supervisor-100: #dbeafe;--role-supervisor-200: #bfdbfe;--role-supervisor-300: #93c5fd;--role-supervisor-400: #60a5fa;--role-supervisor-500: #3b82f6;--role-supervisor-600: #2563eb;--role-supervisor-700: #1d4ed8;--role-supervisor-800: #1e40af;--role-supervisor-900: #1e3a8a;--role-manager-50: #eef2ff;--role-manager-100: #e0e7ff;--role-manager-200: #c7d2fe;--role-manager-300: #a5b4fc;--role-manager-400: #818cf8;--role-manager-500: #6366f1;--role-manager-600: #4f46e5;--role-manager-700: #4338ca;--role-manager-800: #3730a3;--role-manager-900: #312e81;--role-employee-50: #f9fafb;--role-employee-100: #f3f4f6;--role-employee-200: #e5e7eb;--role-employee-300: #d1d5db;--role-employee-400: #9ca3af;--role-employee-500: #6b7280;--role-employee-600: #4b5563;--role-employee-700: #374151;--role-employee-800: #1f2937;--role-employee-900: #111827;--status-pending-bg: linear-gradient(135deg, var(--warning-50), var(--warning-100));--status-pending-border: var(--warning-200);--status-pending-text: var(--warning-700);--status-pending-glow: rgba(245, 158, 11, .15);--status-approved-bg: linear-gradient(135deg, var(--success-50), var(--success-100));--status-approved-border: var(--success-200);--status-approved-text: var(--success-700);--status-approved-glow: rgba(16, 185, 129, .15);--status-rejected-bg: linear-gradient(135deg, var(--danger-50), var(--danger-100));--status-rejected-border: var(--danger-200);--status-rejected-text: var(--danger-700);--status-rejected-glow: rgba(239, 68, 68, .15);--gradient-brand-primary: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-light));--gradient-brand-secondary: linear-gradient(135deg, var(--brand-secondary), var(--brand-secondary-light));--gradient-brand-hero: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));--gradient-success: linear-gradient(135deg, var(--success-500), var(--success-400));--gradient-warning: linear-gradient(135deg, var(--warning-500), var(--warning-400));--gradient-danger: linear-gradient(135deg, var(--danger-500), var(--danger-400));--gradient-info: linear-gradient(135deg, var(--info-500), var(--info-400));--gradient-bg-subtle: linear-gradient(135deg, var(--neutral-50), white);--gradient-bg-card: linear-gradient(135deg, white, var(--neutral-50));--gradient-bg-hero: linear-gradient(135deg, var(--brand-primary-ultra-light), white);--shadow-xs: 0 1px 2px rgba(0, 0, 0, .05);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .06);--shadow-md: 0 4px 6px rgba(0, 0, 0, .1), 0 2px 4px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .1), 0 4px 6px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px rgba(0, 0, 0, .1), 0 10px 10px rgba(0, 0, 0, .04);--shadow-2xl: 0 25px 50px rgba(0, 0, 0, .25);--shadow-brand: 0 10px 25px rgba(15, 118, 110, .2);--shadow-brand-hover: 0 20px 40px rgba(15, 118, 110, .3);--shadow-success: 0 10px 25px rgba(16, 185, 129, .2);--shadow-warning: 0 10px 25px rgba(245, 158, 11, .2);--shadow-danger: 0 10px 25px rgba(239, 68, 68, .2);--shadow-info: 0 10px 25px rgba(59, 130, 246, .2);--font-xs: .75rem;--font-sm: .875rem;--font-base: 1rem;--font-lg: 1.125rem;--font-xl: 1.25rem;--font-2xl: 1.5rem;--font-3xl: 1.875rem;--font-4xl: 2.25rem;--font-thin: 100;--font-light: 300;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 700;--font-extrabold: 800;--font-black: 900;--leading-none: 1;--leading-tight: 1.25;--leading-snug: 1.375;--leading-normal: 1.5;--leading-relaxed: 1.625;--leading-loose: 2;--space-0: 0;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--space-20: 5rem;--space-24: 6rem;--space-32: 8rem;--radius-none: 0;--radius-sm: .125rem;--radius-base: .25rem;--radius-md: .375rem;--radius-lg: .5rem;--radius-xl: .75rem;--radius-2xl: 1rem;--radius-3xl: 1.5rem;--radius-full: 9999px;--ease-linear: linear;--ease-in: cubic-bezier(.4, 0, 1, 1);--ease-out: cubic-bezier(0, 0, .2, 1);--ease-in-out: cubic-bezier(.4, 0, .2, 1);--ease-bounce: cubic-bezier(.68, -.55, .265, 1.55);--ease-elastic: cubic-bezier(.175, .885, .32, 1.275);--duration-75: 75ms;--duration-100: .1s;--duration-150: .15s;--duration-200: .2s;--duration-300: .3s;--duration-500: .5s;--duration-700: .7s;--duration-1000: 1s;--breakpoint-sm: 640px;--breakpoint-md: 768px;--breakpoint-lg: 1024px;--breakpoint-xl: 1280px;--breakpoint-2xl: 1536px;--z-dropdown: 1000;--z-sticky: 1020;--z-fixed: 1030;--z-modal-backdrop: 1040;--z-modal: 1050;--z-popover: 1060;--z-tooltip: 1070;--z-toast: 1080}@media (prefers-color-scheme: dark){:root{--neutral-50: #111827;--neutral-100: #1f2937;--neutral-200: #374151;--neutral-300: #4b5563;--neutral-400: #6b7280;--neutral-500: #9ca3af;--neutral-600: #d1d5db;--neutral-700: #e5e7eb;--neutral-800: #f3f4f6;--neutral-900: #f9fafb;--gradient-bg-subtle: linear-gradient(135deg, var(--neutral-900), var(--neutral-800));--gradient-bg-card: linear-gradient(135deg, var(--neutral-800), var(--neutral-900));--gradient-bg-hero: linear-gradient(135deg, var(--brand-primary-dark), var(--neutral-900))}}@media (prefers-contrast: high){:root{--neutral-200: #d1d5db;--neutral-300: #9ca3af;--neutral-400: #6b7280;--neutral-500: #374151;--neutral-600: #1f2937;--neutral-700: #111827}}@media (prefers-reduced-motion: reduce){:root{--duration-75: 1ms;--duration-100: 1ms;--duration-150: 1ms;--duration-200: 1ms;--duration-300: 1ms;--duration-500: 1ms;--duration-700: 1ms;--duration-1000: 1ms}}:root{--primary-brand: #0f766e;--primary-light: #14b8a6;--primary-dark: #115e59;--primary-ultra-light: #ccfbf1;--success-modern: #059669;--success-light: #34d399;--success-bg: #ecfdf5;--warning-modern: #d97706;--warning-light: #fbbf24;--warning-bg: #fef3c7;--danger-modern: #dc2626;--danger-light: #f87171;--danger-bg: #fef2f2;--info-modern: #0891b2;--info-light: #22d3ee;--info-bg: #ecfeff;--gray-50: #f9fafb;--gray-100: #f3f4f6;--gray-200: #e5e7eb;--gray-300: #d1d5db;--gray-400: #9ca3af;--gray-500: #6b7280;--gray-600: #4b5563;--gray-700: #374151;--gray-800: #1f2937;--gray-900: #111827;--space-micro: 2px;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px;--space-3xl: 64px;--font-micro: 10px;--font-xs: 11px;--font-sm: 12px;--font-base: 14px;--font-md: 16px;--font-lg: 18px;--font-xl: 20px;--font-2xl: 24px;--radius-xs: 4px;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 20px;--radius-3xl: 24px;--radius-full: 9999px;--shadow-xs: 0 1px 2px rgba(0, 0, 0, .05);--shadow-sm: 0 2px 4px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);--shadow-md: 0 4px 8px rgba(0, 0, 0, .08), 0 2px 4px rgba(0, 0, 0, .04);--shadow-lg: 0 8px 16px rgba(0, 0, 0, .1), 0 4px 8px rgba(0, 0, 0, .06);--shadow-xl: 0 16px 32px rgba(0, 0, 0, .12), 0 8px 16px rgba(0, 0, 0, .08);--shadow-2xl: 0 24px 48px rgba(0, 0, 0, .15), 0 12px 24px rgba(0, 0, 0, .1);--shadow-teal: 0 8px 25px rgba(20, 184, 166, .25);--shadow-emerald: 0 8px 25px rgba(16, 185, 129, .25);--shadow-red: 0 8px 25px rgba(239, 68, 68, .25);--shadow-amber: 0 8px 25px rgba(245, 158, 11, .25);--ease-out-quad: cubic-bezier(.25, .46, .45, .94);--ease-out-cubic: cubic-bezier(.215, .61, .355, 1);--ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1);--ease-spring: cubic-bezier(.68, -.55, .265, 1.55)}.modern-employee-card{position:relative;overflow:hidden;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);will-change:transform,box-shadow;-webkit-transform:translateZ(0);transform:translateZ(0);touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}.modern-employee-card:hover{transform:translateY(-4px) scale(1.02);box-shadow:var(--shadow-xl)}.modern-employee-card:active{transform:translateY(-2px) scale(.98);transition-duration:.1s}.modern-employee-card.selected{ring:2px;ring-color:var(--primary-light);ring-offset:2px;background:linear-gradient(135deg,var(--primary-ultra-light),white)}.modern-avatar{position:relative;overflow:hidden}.modern-avatar:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,rgba(255,255,255,.2),transparent);border-radius:inherit}.online-indicator{position:absolute;bottom:-2px;right:-2px;width:16px;height:16px;background:var(--success-modern);border:3px solid white;border-radius:50%;box-shadow:0 2px 4px #0000001a}.online-indicator.pulse{animation:onlinePulse 2s ease-in-out infinite}@keyframes onlinePulse{0%,to{box-shadow:0 0 #10b98166}50%{box-shadow:0 0 0 8px #10b98100}}.modern-button{position:relative;overflow:hidden;border:none;border-radius:var(--radius-xl);font-weight:600;text-align:center;cursor:pointer;transition:all .3s var(--ease-out-cubic);transform-style:preserve-3d}.modern-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .6s}.modern-button:hover:before{left:100%}.modern-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.modern-button:active{transform:translateY(0) scale(.95);transition-duration:.1s}.modern-button.success{background:linear-gradient(135deg,var(--success-modern),var(--success-light));color:#fff;box-shadow:var(--shadow-emerald)}.modern-button.success:hover{box-shadow:0 12px 30px #10b98159}.modern-button.danger{background:linear-gradient(135deg,var(--danger-modern),var(--danger-light));color:#fff;box-shadow:var(--shadow-red)}.modern-button.danger:hover{box-shadow:0 12px 30px #ef444459}.modern-badge{display:inline-flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-full);font-size:var(--font-sm);font-weight:600;border:1px solid;transition:all .2s var(--ease-out-quad);white-space:nowrap}.modern-badge:hover{transform:scale(1.05)}.modern-badge.status-pending{background:linear-gradient(135deg,var(--warning-bg),#fef9c3);color:var(--warning-modern);border-color:var(--warning-light);box-shadow:0 2px 8px #f59e0b26}.modern-badge.status-approved{background:linear-gradient(135deg,var(--success-bg),#d1fae5);color:var(--success-modern);border-color:var(--success-light);box-shadow:0 2px 8px #10b98126}.modern-badge.status-rejected{background:linear-gradient(135deg,var(--danger-bg),#fee2e2);color:var(--danger-modern);border-color:var(--danger-light);box-shadow:0 2px 8px #ef444426}.modern-badge.role-super-admin{background:linear-gradient(135deg,#f3e8ff,#e9d5ff);color:#7c3aed;border-color:#a78bfa}.modern-badge.role-supervisor{background:linear-gradient(135deg,#eff6ff,#dbeafe);color:#1d4ed8;border-color:#60a5fa}.modern-badge.role-manager{background:linear-gradient(135deg,#eef2ff,#e0e7ff);color:#4f46e5;border-color:#818cf8}.modern-badge.role-employee{background:linear-gradient(135deg,var(--gray-100),var(--gray-200));color:var(--gray-700);border-color:var(--gray-400)}.expanded-content{border-top:1px solid var(--gray-200);background:linear-gradient(180deg,var(--gray-50),white);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.expanded-section{padding:var(--space-md);border-radius:var(--radius-lg);border:1px solid;margin-bottom:var(--space-sm)}.expanded-section.remark{background:linear-gradient(135deg,var(--warning-bg),#fef9c3);border-color:var(--warning-light)}.expanded-section.comment{background:linear-gradient(135deg,var(--success-bg),#d1fae5);border-color:var(--success-light)}.expanded-section.rejection{background:linear-gradient(135deg,var(--danger-bg),#fee2e2);border-color:var(--danger-light)}.status-indicator{position:absolute;bottom:0;left:0;right:0;height:4px;border-radius:0 0 var(--radius-2xl) var(--radius-2xl);transition:all .5s var(--ease-out-cubic)}.status-indicator.pending{background:linear-gradient(90deg,var(--warning-light),var(--warning-modern));animation:statusPulse 2s ease-in-out infinite}.status-indicator.approved{background:linear-gradient(90deg,var(--success-light),var(--success-modern))}.status-indicator.rejected{background:linear-gradient(90deg,var(--danger-light),var(--danger-modern))}@keyframes statusPulse{0%,to{opacity:1}50%{opacity:.7}}.glow-effect{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;opacity:0;transition:opacity .3s var(--ease-out-cubic);pointer-events:none}.modern-employee-card:hover .glow-effect{opacity:1}.glow-effect.teal{background:linear-gradient(135deg,rgba(20,184,166,.1),rgba(34,211,238,.1))}@media (max-width: 640px){.modern-employee-card{padding:var(--space-sm);min-height:80px}.modern-avatar{width:40px;height:40px}.modern-badge{font-size:var(--font-xs);padding:2px var(--space-xs)}.modern-button{padding:var(--space-xs) var(--space-sm);font-size:var(--font-xs);min-width:40px;min-height:32px}}@media (max-width: 480px){.modern-employee-card{padding:var(--space-xs);min-height:72px}.modern-avatar{width:36px;height:36px}}@media (prefers-contrast: high){.modern-employee-card{border:2px solid var(--gray-600)}.modern-badge{border-width:2px}}@media (prefers-reduced-motion: reduce){.modern-employee-card,.modern-button,.modern-badge,.status-indicator{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.modern-employee-card:hover{transform:none}}@media (prefers-color-scheme: dark){:root{--gray-50: #111827;--gray-100: #1f2937;--gray-200: #374151;--gray-300: #4b5563;--gray-400: #6b7280;--gray-500: #9ca3af;--gray-600: #d1d5db;--gray-700: #e5e7eb;--gray-800: #f3f4f6;--gray-900: #f9fafb}.modern-employee-card{background:var(--gray-100);border-color:var(--gray-300)}.expanded-content{background:linear-gradient(180deg,var(--gray-200),var(--gray-100))}}.modern-employee-card:focus-within{outline:2px solid var(--primary-light);outline-offset:2px}.modern-button:focus,.modern-badge:focus{outline:2px solid var(--primary-light);outline-offset:2px}@media print{.modern-employee-card{break-inside:avoid;box-shadow:none;border:1px solid var(--gray-300)}.modern-button,.glow-effect{display:none}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInLeft{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes fadeInRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes scaleUp{0%{transform:scale(1)}to{transform:scale(1.05)}}@keyframes scaleDown{0%{transform:scale(1)}to{transform:scale(.95)}}@keyframes bounce{0%,20%,53%,80%,to{transform:translateZ(0)}40%,43%{transform:translate3d(0,-30px,0)}70%{transform:translate3d(0,-15px,0)}90%{transform:translate3d(0,-4px,0)}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.05)}70%{transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes pulseGlow{0%,to{box-shadow:0 0 20px #0f766e4d}50%{box-shadow:0 0 40px #0f766e99}}@keyframes pulseRing{0%{transform:scale(.95);box-shadow:0 0 #0f766eb3}70%{transform:scale(1);box-shadow:0 0 0 10px #0f766e00}to{transform:scale(.95);box-shadow:0 0 #0f766e00}}@keyframes spinSlow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-10px)}20%,40%,60%,80%{transform:translate(10px)}}@keyframes shakeSlow{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}@keyframes slideInUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideInDown{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes slideInLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes glow{0%,to{opacity:1}50%{opacity:.5}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.card-enter{animation:fadeInUp .6s var(--ease-out) forwards}.card-enter-delay-1{animation-delay:.1s}.card-enter-delay-2{animation-delay:.2s}.card-enter-delay-3{animation-delay:.3s}.card-enter-delay-4{animation-delay:.4s}.card-hover{transition:all var(--duration-300) var(--ease-out)}.card-hover:hover{transform:translateY(-8px) scale(1.02);box-shadow:var(--shadow-2xl);background:var(--gradient-bg-card)}.card-hover:active{transform:translateY(-4px) scale(1.01);transition-duration:var(--duration-100)}.card-selected{animation:bounceIn .6s var(--ease-bounce);border:2px solid var(--brand-primary);background:var(--gradient-bg-hero);box-shadow:var(--shadow-brand)}.card-selected:before{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;background:var(--gradient-brand-primary);border-radius:inherit;z-index:-1;animation:pulseRing 2s var(--ease-out) infinite}.btn-primary{position:relative;overflow:hidden;transition:all var(--duration-200) var(--ease-out);background:var(--gradient-brand-primary);color:#fff;border:none;border-radius:var(--radius-xl);font-weight:var(--font-semibold);cursor:pointer}.btn-primary:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left var(--duration-600) var(--ease-out)}.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-brand-hover);background:var(--gradient-brand-secondary)}.btn-primary:hover:before{left:100%}.btn-primary:active{transform:translateY(0) scale(.98);transition-duration:var(--duration-100)}.btn-success{background:var(--gradient-success);box-shadow:var(--shadow-success)}.btn-success:hover{box-shadow:0 12px 30px #10b98166}.btn-danger{background:var(--gradient-danger);box-shadow:var(--shadow-danger)}.btn-danger:hover{box-shadow:0 12px 30px #ef444466}.btn-loading{position:relative;color:transparent;pointer-events:none}.btn-loading:after{content:"";position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border:2px solid white;border-radius:50%;border-top-color:transparent;animation:spin 1s linear infinite}.status-badge{position:relative;transition:all var(--duration-200) var(--ease-out);overflow:hidden}.status-badge:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left var(--duration-500) var(--ease-out)}.status-badge:hover{transform:scale(1.1);z-index:10}.status-badge:hover:before{left:100%}.status-pending{animation:pulse 2s var(--ease-in-out) infinite}.status-pending:after{content:"";position:absolute;top:50%;right:-8px;width:8px;height:8px;background:var(--warning-500);border-radius:50%;transform:translateY(-50%);animation:glow 1.5s var(--ease-in-out) infinite}.avatar-container{position:relative;overflow:hidden;transition:all var(--duration-300) var(--ease-out)}.avatar-container:hover{transform:scale(1.1);box-shadow:var(--shadow-lg)}.avatar-container:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(255,255,255,.3) 0%,transparent 50%);opacity:0;transition:opacity var(--duration-200) var(--ease-out)}.avatar-container:hover:before{opacity:1}.online-indicator{position:absolute;bottom:2px;right:2px;width:14px;height:14px;background:var(--success-500);border:3px solid white;border-radius:50%;animation:pulseRing 2s var(--ease-out) infinite}.expand-content{max-height:0;overflow:hidden;opacity:0;transition:all var(--duration-500) var(--ease-out)}.expand-content.show{max-height:500px;opacity:1}.expand-icon{transition:transform var(--duration-300) var(--ease-out)}.expand-icon.rotated{transform:rotate(180deg)}.touch-feedback{transition:all var(--duration-100) var(--ease-out)}.touch-feedback:active{transform:scale(.95);opacity:.8}.focus-ring{transition:all var(--duration-200) var(--ease-out)}.focus-ring:focus{outline:none;box-shadow:0 0 0 3px #0f766e4d}.ripple{position:relative;overflow:hidden}.ripple:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(255,255,255,.5);transform:translate(-50%,-50%);transition:width var(--duration-600) var(--ease-out),height var(--duration-600) var(--ease-out)}.ripple:active:before{width:300px;height:300px}.loading-skeleton{background:linear-gradient(90deg,var(--neutral-200) 25%,var(--neutral-100) 50%,var(--neutral-200) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-md)}.loading-spinner{width:20px;height:20px;border:2px solid var(--neutral-200);border-top-color:var(--brand-primary);border-radius:50%;animation:spin 1s linear infinite}.loading-dots{display:inline-flex;gap:4px}.loading-dots span{width:8px;height:8px;background:var(--brand-primary);border-radius:50%;animation:bounce 1.4s var(--ease-in-out) infinite both}.loading-dots span:nth-child(1){animation-delay:-.32s}.loading-dots span:nth-child(2){animation-delay:-.16s}.notification-enter{animation:slideInRight .3s var(--ease-out) forwards}.notification-exit{animation:slideOutRight .3s var(--ease-in) forwards}@keyframes slideOutRight{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}.error-shake{animation:shake .5s var(--ease-in-out)}.error-pulse{animation:pulse 1s var(--ease-in-out) infinite;border-color:var(--danger-500)!important;box-shadow:0 0 0 2px #ef444433!important}.success-bounce{animation:bounceIn .6s var(--ease-bounce)}.success-glow{animation:pulseGlow 2s var(--ease-in-out) infinite;border-color:var(--success-500)!important;box-shadow:0 0 0 2px #10b98133!important}@media (max-width: 768px){.card-hover:hover{transform:translateY(-4px) scale(1.01)}.btn-primary:hover{transform:translateY(-1px)}.card-enter{animation-duration:.3s}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.card-hover:hover,.btn-primary:hover{transform:none;box-shadow:var(--shadow-md)}}.gpu-accelerated{transform:translateZ(0);backface-visibility:hidden;perspective:1000px}.will-change-transform{will-change:transform}.will-change-opacity{will-change:opacity}@media print{*{animation:none!important;transition:none!important;box-shadow:none!important;text-shadow:none!important}.card-hover{break-inside:avoid;border:1px solid var(--neutral-300);margin-bottom:1rem}}@keyframes elasticBounce{0%{transform:scale(.9) translateZ(0);opacity:0}16%{transform:scale(1.05) translateZ(0);opacity:1}32%{transform:scale(.98) translateZ(0)}48%{transform:scale(1.02) translateZ(0)}64%{transform:scale(.995) translateZ(0)}80%{transform:scale(1.005) translateZ(0)}to{transform:scale(1) translateZ(0);opacity:1}}@keyframes elasticSlideInUp{0%{transform:translateY(100vh) scale(.8) translateZ(0);opacity:0}60%{transform:translateY(-20px) scale(1.02) translateZ(0);opacity:1}80%{transform:translateY(10px) scale(.99) translateZ(0)}to{transform:translateY(0) scale(1) translateZ(0);opacity:1}}@keyframes springScale{0%{transform:scale(.3) translateZ(0)}50%{transform:scale(1.15) translateZ(0)}70%{transform:scale(.9) translateZ(0)}90%{transform:scale(1.05) translateZ(0)}to{transform:scale(1) translateZ(0)}}@keyframes fluidMotion{0%,to{transform:translateY(0) translateZ(0)}25%{transform:translateY(-15px) translateZ(0)}50%{transform:translateY(5px) translateZ(0)}75%{transform:translateY(-8px) translateZ(0)}}@keyframes rippleExpand{0%{transform:scale(0) translateZ(0);opacity:1}to{transform:scale(4) translateZ(0);opacity:0}}@keyframes ripplePulse{0%{transform:scale(.8) translateZ(0);opacity:.8}50%{transform:scale(1.2) translateZ(0);opacity:.4}to{transform:scale(1.5) translateZ(0);opacity:0}}@keyframes magneticPull{0%{transform:scale(1) translateZ(0)}50%{transform:scale(1.1) translateZ(0)}to{transform:scale(1) translateZ(0)}}@keyframes breathing{0%,to{transform:scale(1) translateZ(0);opacity:.8}50%{transform:scale(1.05) translateZ(0);opacity:1}}@keyframes neonGlow{0%,to{box-shadow:0 0 10px var(--brand-primary),0 0 20px var(--brand-primary),0 0 30px var(--brand-primary),0 0 40px var(--brand-primary)}50%{box-shadow:0 0 20px var(--brand-primary),0 0 30px var(--brand-primary),0 0 40px var(--brand-primary),0 0 60px var(--brand-primary),0 0 80px var(--brand-primary)}}@keyframes flip3D{0%{transform:perspective(1000px) rotateY(0) translateZ(0)}to{transform:perspective(1000px) rotateY(360deg) translateZ(0)}}@keyframes particleExplosion{0%{transform:scale(0) translateZ(0);opacity:1}50%{transform:scale(1.5) translateZ(0);opacity:.8}to{transform:scale(2.5) translateZ(0);opacity:0}}.magnetic-button{position:relative;overflow:hidden;transition:all .3s cubic-bezier(.175,.885,.32,1.275);transform:translateZ(0);will-change:transform}.magnetic-button:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(255,255,255,.3);transform:translate(-50%,-50%);transition:width .6s cubic-bezier(.175,.885,.32,1.275),height .6s cubic-bezier(.175,.885,.32,1.275)}.magnetic-button:hover{transform:translateY(-3px) scale(1.02) translateZ(0);box-shadow:0 15px 35px #0f766e4d}.magnetic-button:hover:before{width:300px;height:300px}.magnetic-button:active{transform:translateY(-1px) scale(.98) translateZ(0);transition-duration:.1s}.liquid-fill{position:relative;overflow:hidden;background:linear-gradient(45deg,var(--brand-primary),var(--brand-secondary))}.liquid-fill:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,.3) 50%,transparent 70%);animation:liquidWave 3s linear infinite}@keyframes liquidWave{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}.glass-morphism{background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);box-shadow:0 8px 32px #0000001a,inset 0 1px #fff3;transition:all .3s cubic-bezier(.175,.885,.32,1.275)}.glass-morphism:hover{background:rgba(255,255,255,.15);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);transform:translateY(-2px) translateZ(0);box-shadow:0 12px 40px #00000026,inset 0 1px #ffffff4d}.neon-button{position:relative;background:transparent;border:2px solid var(--brand-primary);color:var(--brand-primary);transition:all .3s cubic-bezier(.175,.885,.32,1.275);overflow:hidden}.neon-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,var(--brand-primary),transparent);transition:left .5s cubic-bezier(.175,.885,.32,1.275)}.neon-button:hover{color:#fff;background:var(--brand-primary);animation:neonGlow 2s ease-in-out infinite}.neon-button:hover:before{left:100%}.card-3d{perspective:1000px;transition:all .3s cubic-bezier(.175,.885,.32,1.275);transform-style:preserve-3d;will-change:transform}.card-3d:hover{transform:rotateY(5deg) rotateX(-5deg) translateZ(20px);box-shadow:0 25px 50px #00000026,0 10px 20px #0000001a}.touch-ripple{position:relative;overflow:hidden}.touch-ripple:after{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(255,255,255,.6);transform:translate(-50%,-50%);transition:width .6s cubic-bezier(.25,.46,.45,.94),height .6s cubic-bezier(.25,.46,.45,.94)}.touch-ripple:active:after{width:200px;height:200px}.touch-scale{transition:transform .1s cubic-bezier(.25,.46,.45,.94);transform:translateZ(0)}.touch-scale:active{transform:scale(.95) translateZ(0)}.touch-vibrate{transition:transform .1s cubic-bezier(.25,.46,.45,.94)}.touch-vibrate:active{animation:vibrate .1s linear}@keyframes vibrate{0%,to{transform:translate(0) translateZ(0)}25%{transform:translate(-2px) translateZ(0)}75%{transform:translate(2px) translateZ(0)}}.pulse-loader{display:inline-flex;gap:8px}.pulse-loader span{width:12px;height:12px;border-radius:50%;background:var(--brand-primary);animation:pulseScale 1.4s cubic-bezier(.45,.05,.55,.95) infinite both}.pulse-loader span:nth-child(1){animation-delay:-.32s}.pulse-loader span:nth-child(2){animation-delay:-.16s}@keyframes pulseScale{0%,80%,to{transform:scale(.8) translateZ(0);opacity:.5}40%{transform:scale(1.2) translateZ(0);opacity:1}}.progress-ring{position:relative;width:60px;height:60px}.progress-ring svg{transform:rotate(-90deg);width:100%;height:100%}.progress-ring circle{fill:none;stroke-width:4;stroke-linecap:round;transition:stroke-dashoffset .5s cubic-bezier(.25,.46,.45,.94)}.progress-ring .background{stroke:var(--neutral-200)}.progress-ring .progress{stroke:var(--brand-primary);stroke-dasharray:157;stroke-dashoffset:157;animation:progressFill 2s cubic-bezier(.25,.46,.45,.94) forwards}@keyframes progressFill{to{stroke-dashoffset:0}}.status-indicator{position:relative;padding:6px 12px;border-radius:20px;font-size:.875rem;font-weight:500;transition:all .3s cubic-bezier(.175,.885,.32,1.275);overflow:hidden}.status-indicator:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s cubic-bezier(.175,.885,.32,1.275)}.status-indicator:hover{transform:translateY(-2px) scale(1.05) translateZ(0)}.status-indicator:hover:before{left:100%}.swipe-hint{position:relative;overflow:hidden}.swipe-hint:after{content:"";position:absolute;top:50%;right:-30px;width:30px;height:2px;background:var(--brand-primary);transform:translateY(-50%);animation:swipeHint 2s ease-in-out infinite}@keyframes swipeHint{0%,to{right:-30px;opacity:0}50%{right:10px;opacity:1}}.long-press{transition:all .1s cubic-bezier(.25,.46,.45,.94)}.long-press.pressing{transform:scale(.95) translateZ(0);background:var(--brand-primary);color:#fff}.wechat-browser{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.wechat-share{position:relative;overflow:hidden}.wechat-share:before{content:"";position:absolute;top:50%;left:50%;width:40px;height:40px;background:radial-gradient(circle,rgba(7,193,96,.3) 0%,transparent 70%);transform:translate(-50%,-50%) scale(0);animation:wechatPulse 2s ease-in-out infinite}@keyframes wechatPulse{0%,to{transform:translate(-50%,-50%) scale(0);opacity:0}50%{transform:translate(-50%,-50%) scale(1.5);opacity:1}}.gpu-optimized{transform:translateZ(0);backface-visibility:hidden;perspective:1000px;will-change:transform,opacity}.render-optimized{contain:layout style paint;content-visibility:auto;contain-intrinsic-size:0 500px}.animation-optimized{animation-timing-function:cubic-bezier(.25,.46,.45,.94);animation-fill-mode:both;transform:translateZ(0)}@media (max-width: 768px){.magnetic-button:hover{transform:translateY(-2px) scale(1.01) translateZ(0)}.card-3d:hover{transform:rotateY(2deg) rotateX(-2deg) translateZ(10px)}.status-indicator:hover{transform:translateY(-1px) scale(1.02) translateZ(0)}.glass-morphism{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.neon-button:hover{animation:none}}@media (max-width: 480px){.magnetic-button:hover{transform:translateY(-1px) scale(1) translateZ(0)}.card-3d:hover{transform:none}.liquid-fill:before{animation-duration:4s}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.magnetic-button:hover{transform:none;box-shadow:var(--shadow-md)}.card-3d:hover{transform:none;box-shadow:var(--shadow-lg)}.glass-morphism:hover{transform:none}.neon-button:hover{animation:none}}@media (prefers-color-scheme: dark){.glass-morphism{background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.1)}.glass-morphism:hover{background:rgba(0,0,0,.4)}.neon-button{border-color:var(--brand-primary-light);color:var(--brand-primary-light)}.neon-button:hover{background:var(--brand-primary-light)}}@media (prefers-contrast: high){.glass-morphism{background:var(--neutral-100);border:2px solid var(--neutral-900);-webkit-backdrop-filter:none;backdrop-filter:none}.neon-button{border-width:3px}.status-indicator{border:2px solid currentColor}}.animation-delay-75{animation-delay:75ms}.animation-delay-500{animation-delay:.5s}.animation-delay-700{animation-delay:.7s}.animation-delay-1000{animation-delay:1s}.animation-duration-75{animation-duration:75ms}.animation-duration-100{animation-duration:.1s}.animation-duration-200{animation-duration:.2s}.animation-duration-300{animation-duration:.3s}.animation-duration-500{animation-duration:.5s}.animation-duration-700{animation-duration:.7s}.animation-duration-1000{animation-duration:1s}.ease-linear{animation-timing-function:linear}.ease-in{animation-timing-function:cubic-bezier(.4,0,1,1)}.ease-out{animation-timing-function:cubic-bezier(0,0,.2,1)}.ease-in-out{animation-timing-function:cubic-bezier(.4,0,.2,1)}.ease-bounce{animation-timing-function:cubic-bezier(.68,-.55,.265,1.55)}.ease-elastic{animation-timing-function:cubic-bezier(.175,.885,.32,1.275)}.magnetic-liquid-button{@extend .magnetic-button;@extend .liquid-fill;}.glass-card{@extend .glass-morphism;@extend .card-3d;@extend .touch-scale;}.neon-status{@extend .neon-button;@extend .status-indicator;@extend .pulse-loader;}.performance-monitor{position:relative}.performance-monitor:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;border:1px solid transparent;z-index:1000}.performance-monitor.animating:before{border-color:#10b98180;animation:performancePulse 1s ease-in-out infinite}@keyframes performancePulse{0%,to{opacity:0}50%{opacity:1}}.hover-lift:hover{transform:translateY(-4px) translateZ(0);box-shadow:0 12px 24px #00000026}.active-glow:active{box-shadow:0 0 20px #0f766e66}.focus-visible:focus-visible{outline:2px solid var(--brand-primary);outline-offset:2px}.disabled-fade:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.skeleton-loading{background:linear-gradient(90deg,var(--neutral-200) 25%,var(--neutral-100) 50%,var(--neutral-200) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-md)}@keyframes shimmer{0%{background-position:-200px 0}to{background-position:calc(200px + 100%) 0}}.spinner-loading{width:24px;height:24px;border:3px solid var(--neutral-200);border-top-color:var(--brand-primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg) translateZ(0)}}.dots-loading{display:inline-flex;gap:4px}.dots-loading span{width:8px;height:8px;border-radius:50%;background:var(--brand-primary);animation:dotPulse 1.4s ease-in-out infinite both}.dots-loading span:nth-child(1){animation-delay:-.32s}.dots-loading span:nth-child(2){animation-delay:-.16s}.dots-loading span:nth-child(3){animation-delay:0}@keyframes dotPulse{0%,80%,to{transform:scale(.8) translateZ(0);opacity:.5}40%{transform:scale(1.2) translateZ(0);opacity:1}}.notification-enter{animation:notificationSlideIn .3s cubic-bezier(.175,.885,.32,1.275)}@keyframes notificationSlideIn{0%{transform:translate(100%) translateZ(0);opacity:0}to{transform:translate(0) translateZ(0);opacity:1}}.notification-exit{animation:notificationSlideOut .3s cubic-bezier(.55,.055,.675,.19)}@keyframes notificationSlideOut{0%{transform:translate(0) translateZ(0);opacity:1}to{transform:translate(100%) translateZ(0);opacity:0}}.tooltip-enter{animation:tooltipFadeIn .2s cubic-bezier(.175,.885,.32,1.275)}@keyframes tooltipFadeIn{0%{transform:scale(.8) translateY(4px) translateZ(0);opacity:0}to{transform:scale(1) translateY(0) translateZ(0);opacity:1}}.error-shake{animation:errorShake .5s cubic-bezier(.36,.07,.19,.97)}@keyframes errorShake{0%,to{transform:translate(0) translateZ(0)}10%,30%,50%,70%,90%{transform:translate(-8px) translateZ(0)}20%,40%,60%,80%{transform:translate(8px) translateZ(0)}}.success-bounce{animation:successBounce .6s cubic-bezier(.68,-.55,.265,1.55)}@keyframes successBounce{0%{transform:scale(.3) translateZ(0)}50%{transform:scale(1.05) translateZ(0)}70%{transform:scale(.9) translateZ(0)}to{transform:scale(1) translateZ(0)}}@media print{*,*:before,*:after{animation:none!important;transition:none!important;box-shadow:none!important;text-shadow:none!important;transform:none!important}.card-3d{break-inside:avoid;border:1px solid var(--neutral-300);margin-bottom:1rem}.status-indicator{border:1px solid currentColor;background:transparent}}.debug-animation *{outline:1px solid rgba(255,0,0,.2)}.performance-heatmap{position:relative}.performance-heatmap:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;background:linear-gradient(45deg,rgba(255,0,0,.1) 0%,rgba(255,255,0,.1) 50%,rgba(0,255,0,.1) 100%);opacity:0;transition:opacity .3s}.performance-heatmap:hover:after{opacity:1}.home-video-card{@apply card-3d glass-morphism touch-scale;animation:elasticBounce .8s cubic-bezier(.175,.885,.32,1.275) forwards;animation-delay:calc(var(--card-index) * .1s)}.home-video-card:hover{@apply hover-lift active-glow;}.admin-employee-card{@apply glass-card magnetic-button;transition:all .4s cubic-bezier(.175,.885,.32,1.275)}.admin-employee-card:hover{transform:translateY(-6px) rotateY(3deg) translateZ(20px);box-shadow:0 20px 40px #0f766e40}.primary-action-button{@apply magnetic-liquid-button neon-button;position:relative;overflow:hidden}.primary-action-button:after{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(255,255,255,.4);transform:translate(-50%,-50%);transition:width .6s cubic-bezier(.175,.885,.32,1.275),height .6s cubic-bezier(.175,.885,.32,1.275)}.primary-action-button:hover:after{width:250px;height:250px}.secondary-button{@apply glass-morphism touch-scale;border:1px solid rgba(15,118,110,.3);background:rgba(255,255,255,.1)}.secondary-button:hover{background:rgba(255,255,255,.2);border-color:#0f766e80}.danger-button{@apply magnetic-button;background:var(--gradient-danger);position:relative}.danger-button:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--gradient-danger);filter:blur(10px);opacity:0;transition:opacity .3s cubic-bezier(.175,.885,.32,1.275);z-index:-1}.danger-button:hover:before{opacity:.6}.member-status-badge{@apply status-indicator neon-status;padding:8px 16px;font-size:.875rem;font-weight:600;border-radius:20px;position:relative;overflow:hidden}.member-status-badge.active{background:var(--gradient-success);color:#fff;animation:breathing 2s ease-in-out infinite}.member-status-badge.pending{background:var(--gradient-warning);color:#fff}.member-status-badge.pending:after{content:"";position:absolute;top:50%;right:8px;width:6px;height:6px;background:white;border-radius:50%;transform:translateY(-50%);animation:pulse 1.5s ease-in-out infinite}.member-status-badge.inactive{background:var(--gradient-neutral);color:var(--neutral-600)}.floating-label-input{position:relative;margin-bottom:1.5rem}.floating-label-input input{width:100%;padding:16px 12px 8px;border:2px solid var(--neutral-200);border-radius:var(--radius-lg);font-size:1rem;transition:all .3s cubic-bezier(.175,.885,.32,1.275);background:white}.floating-label-input label{position:absolute;top:50%;left:12px;transform:translateY(-50%);font-size:1rem;color:var(--neutral-500);pointer-events:none;transition:all .3s cubic-bezier(.175,.885,.32,1.275)}.floating-label-input input:focus,.floating-label-input input.has-value{border-color:var(--brand-primary);box-shadow:0 0 0 3px #0f766e1a}.floating-label-input input:focus+label,.floating-label-input input.has-value+label{top:8px;transform:translateY(0);font-size:.75rem;color:var(--brand-primary)}.bottom-navigation{position:fixed;bottom:0;left:0;right:0;background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-top:1px solid var(--neutral-200);display:flex;justify-content:space-around;padding:8px 0 max(8px,env(safe-area-inset-bottom));z-index:var(--z-sticky)}.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;padding:8px;border-radius:var(--radius-lg);transition:all .3s cubic-bezier(.175,.885,.32,1.275);position:relative;overflow:hidden}.nav-item:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:var(--gradient-brand-primary);opacity:0;transition:opacity .3s cubic-bezier(.175,.885,.32,1.275);border-radius:inherit}.nav-item.active{color:var(--brand-primary)}.nav-item.active:before{opacity:.1}.nav-item:active{transform:scale(.95)}.nav-icon{width:24px;height:24px;margin-bottom:4px;position:relative;z-index:1}.nav-label{font-size:.75rem;font-weight:500;position:relative;z-index:1}.modal-content{background:white;border-radius:var(--radius-2xl);box-shadow:var(--shadow-2xl);max-width:90vw;max-height:90vh;overflow:hidden;animation:modalSlideIn .4s cubic-bezier(.175,.885,.32,1.275)}@keyframes modalSlideIn{0%{transform:scale(.9) translateY(20px) translateZ(0);opacity:0}to{transform:scale(1) translateY(0) translateZ(0);opacity:1}}.list-item-enter{opacity:0;transform:translate(-20px) translateZ(0);animation:listItemSlideIn .4s cubic-bezier(.175,.885,.32,1.275) forwards}.list-item-enter:nth-child(1){animation-delay:.05s}.list-item-enter:nth-child(2){animation-delay:.1s}.list-item-enter:nth-child(3){animation-delay:.15s}.list-item-enter:nth-child(4){animation-delay:.2s}.list-item-enter:nth-child(5){animation-delay:.25s}@keyframes listItemSlideIn{to{opacity:1;transform:translate(0) translateZ(0)}}.list-item-hover{transition:all .3s cubic-bezier(.175,.885,.32,1.275);border-radius:var(--radius-lg);position:relative;overflow:hidden}.list-item-hover:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(15,118,110,.05),transparent);transition:left .5s cubic-bezier(.175,.885,.32,1.275)}.list-item-hover:hover{background:var(--gradient-bg-card);transform:translate(4px) translateZ(0);box-shadow:var(--shadow-md)}.list-item-hover:hover:before{left:100%}.page-loader{position:fixed;top:0;left:0;right:0;bottom:0;background:white;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:var(--z-modal)}.page-loader-logo{width:80px;height:80px;margin-bottom:24px;animation:logoFloat 2s ease-in-out infinite}@keyframes logoFloat{0%,to{transform:translateY(0) translateZ(0)}50%{transform:translateY(-10px) translateZ(0)}}.page-loader-spinner{width:32px;height:32px;border:3px solid var(--neutral-200);border-top-color:var(--brand-primary);border-radius:50%;animation:spin 1s linear infinite}.skeleton-card{background:var(--neutral-100);border-radius:var(--radius-lg);padding:16px;margin-bottom:16px}.skeleton-header{height:20px;background:var(--gradient-skeleton);border-radius:var(--radius-md);margin-bottom:12px;width:60%}.skeleton-text{height:16px;background:var(--gradient-skeleton);border-radius:var(--radius-md);margin-bottom:8px}.skeleton-text:last-child{width:80%;margin-bottom:0}@keyframes skeleton-pulse{0%,to{opacity:1}50%{opacity:.5}}.skeleton-card *{animation:skeleton-pulse 1.5s ease-in-out infinite}.three-dot-menu{width:32px;height:32px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;cursor:pointer;transition:all .3s cubic-bezier(.175,.885,.32,1.275)}.dot{width:4px;height:4px;background:var(--neutral-600);border-radius:50%;transition:all .3s cubic-bezier(.175,.885,.32,1.275)}.three-dot-menu:hover .dot{background:var(--brand-primary);transform:scale(1.2)}.three-dot-menu:hover .dot:nth-child(1){transform:scale(1.2) translate(-2px)}.three-dot-menu:hover .dot:nth-child(3){transform:scale(1.2) translate(2px)}.red-packet-button{position:relative;background:var(--gradient-danger);color:#fff;padding:12px 24px;border-radius:var(--radius-xl);font-weight:600;overflow:hidden;transition:all .3s cubic-bezier(.175,.885,.32,1.275)}.red-packet-button:before{content:"🧧";position:absolute;top:50%;left:-30px;transform:translateY(-50%);font-size:20px;transition:left .5s cubic-bezier(.175,.885,.32,1.275)}.red-packet-button:hover{transform:translateY(-2px) scale(1.05) translateZ(0);box-shadow:0 15px 35px #ef44444d}.red-packet-button:hover:before{left:10px}.red-packet-button:active{transform:translateY(0) scale(.98) translateZ(0)}@media (max-width: 768px){.home-video-card{animation-duration:.5s}.admin-employee-card:hover{transform:translateY(-4px) translateZ(0)}.modal-content{margin:16px;max-width:calc(100vw - 32px)}.three-dot-menu{width:40px;height:40px}.dot{width:5px;height:5px}}@media (max-width: 480px){.list-item-enter{animation-duration:.3s}.nav-item{padding:6px}.nav-icon{width:20px;height:20px}.nav-label{font-size:.7rem}}@media (prefers-reduced-motion: reduce){.home-video-card{animation:none;transform:none}.admin-employee-card:hover,.three-dot-menu:hover .dot,.red-packet-button:hover{transform:none}.page-loader-logo{animation:none}.nav-item:active{transform:scale(.95)}.list-item-hover:hover{background:var(--gradient-bg-card)}}@media (prefers-color-scheme: dark){.modal-content{background:var(--neutral-800);color:#fff}.page-loader{background:var(--neutral-900)}.skeleton-card{background:var(--neutral-800)}.skeleton-header,.skeleton-text{background:linear-gradient(90deg,var(--neutral-700) 25%,var(--neutral-600) 50%,var(--neutral-700) 75%)}.three-dot-menu .dot{background:var(--neutral-400)}.three-dot-menu:hover .dot{background:var(--brand-primary-light)}}.modern-employee-card{opacity:0;transform:translateY(20px) scale(.95)}.modern-employee-card.card-enter-active{opacity:1;transform:translateY(0) scale(1);transition:all .4s cubic-bezier(.25,.46,.45,.94)}.modern-employee-card:nth-child(1){transition-delay:0ms}.modern-employee-card:nth-child(2){transition-delay:50ms}.modern-employee-card:nth-child(3){transition-delay:.1s}.modern-employee-card:nth-child(4){transition-delay:.15s}.modern-employee-card:nth-child(5){transition-delay:.2s}.modern-employee-card:nth-child(6){transition-delay:.25s}.modern-employee-card:nth-child(7){transition-delay:.3s}.modern-employee-card:nth-child(8){transition-delay:.35s}@media (max-width: 374px){.modern-employee-card{padding:8px 12px!important;min-height:72px!important}.modern-employee-card .text-base{font-size:14px!important}.modern-employee-card .text-sm{font-size:11px!important}.modern-employee-card .text-xs{font-size:10px!important}.modern-employee-card .w-10{width:32px!important;height:32px!important}.modern-employee-card .gap-3{gap:8px!important}.modern-employee-card .gap-2{gap:6px!important}.modern-employee-card .px-2{padding-left:4px!important;padding-right:4px!important}}@media (min-width: 375px) and (max-width: 413px){.modern-employee-card{padding:12px 16px!important;min-height:80px!important}.modern-employee-card .text-base{font-size:15px!important}.modern-employee-card .text-sm{font-size:12px!important}.modern-employee-card .text-xs{font-size:11px!important}}@media (min-width: 414px) and (max-width: 767px){.modern-employee-card{padding:16px 20px!important;min-height:88px!important}}@media (min-width: 768px){.modern-employee-card{padding:20px 24px!important;min-height:96px!important}.modern-employee-card .text-base{font-size:18px!important}.modern-employee-card .text-sm{font-size:14px!important}.modern-employee-card .text-xs{font-size:12px!important}}.wechat-browser .modern-employee-card{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-webkit-transform:translateZ(0);transform:translateZ(0)}.wechat-browser .modern-button{-webkit-appearance:none;-webkit-border-radius:0;-webkit-box-sizing:border-box}@media (hover: none) and (pointer: coarse){.modern-employee-card{transform:none!important}.modern-employee-card:active{transform:scale(.98)!important;transition:transform .1s ease-out!important}.modern-button{transform:none!important}.modern-button:active{transform:scale(.95)!important;transition:transform .1s ease-out!important}}@media (prefers-contrast: high){.modern-employee-card{border-width:2px!important;border-color:#374151!important;background:#ffffff!important}.modern-employee-card:hover{border-color:#1f2937!important}.modern-employee-card .text-gray-900{color:#000!important}.modern-employee-card .text-gray-600{color:#374151!important}}@media (prefers-color-scheme: dark){.modern-employee-card{background:linear-gradient(135deg,rgba(31,41,55,.95),rgba(31,41,55,.85))!important;border-color:#4b55634d!important}.modern-employee-card .text-gray-900{color:#f9fafb!important}.modern-employee-card .text-gray-600{color:#d1d5db!important}.modern-employee-card .text-gray-400{color:#9ca3af!important}.modern-employee-card .border-gray-200\/50{border-color:#4b556380!important}.modern-employee-card .hover\:bg-gray-100:hover{background-color:#37415180!important}}@media (prefers-reduced-motion: reduce){.modern-employee-card,.modern-employee-card *,.modern-button,.modern-button *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media print{.modern-employee-card{background:white!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border:1px solid #d1d5db!important;box-shadow:0 1px 3px #0000001a!important;break-inside:avoid;page-break-inside:avoid}.modern-employee-card .modern-button{display:none!important}.modern-employee-card .hover\:scale-105:hover{transform:none!important}}.modern-employee-card:focus-within{outline:2px solid #3b82f6!important;outline-offset:2px!important}.modern-button:focus{outline:2px solid #3b82f6!important;outline-offset:2px!important}.modern-employee-card:focus-visible{outline:2px solid #3b82f6!important;outline-offset:2px!important}.modern-employee-card{will-change:transform,opacity;-webkit-transform:translateZ(0);transform:translateZ(0)}.modern-employee-card-container{-webkit-overflow-scrolling:touch;scroll-behavior:smooth}.modern-employee-card.loading{opacity:.6;pointer-events:none}.modern-employee-card.loading:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(255,255,255,.8);display:flex;align-items:center;justify-content:center;border-radius:inherit}.modern-employee-card.selected{background:linear-gradient(135deg,rgba(219,234,254,.95),rgba(219,234,254,.85))!important}.modern-employee-card.error{border-color:#ef4444!important;background:linear-gradient(135deg,rgba(254,226,226,.95),rgba(254,226,226,.85))!important}.modern-employee-card.success{border-color:#10b981!important;background:linear-gradient(135deg,rgba(209,250,229,.95),rgba(209,250,229,.85))!important}.modern-button:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(255,255,255,.5);transform:translate(-50%,-50%);transition:width .6s,height .6s}.modern-button:active:before{width:300px;height:300px}.modern-employee-card .hover\:scale-105:hover{transform:scale(1.05)}@keyframes statusPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(.95)}}.status-pending{animation:statusPulse 2s ease-in-out infinite}.modern-employee-card-container{display:flex;flex-direction:column;gap:12px;padding:16px;max-width:100%;margin:0 auto}@media (min-width: 1024px){.modern-employee-card-container.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:20px}}.modern-employee-card-container::-webkit-scrollbar{width:6px}.modern-employee-card-container::-webkit-scrollbar-track{background:rgba(0,0,0,.1);border-radius:3px}.modern-employee-card-container::-webkit-scrollbar-thumb{background:rgba(0,0,0,.3);border-radius:3px}.modern-employee-card-container::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.5)}.quick-actions-container{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-sm)}.quick-actions-container[data-style=blue] .quick-action-button,.quick-actions-container[data-style=blue] .quick-action-btn{background-color:#dbeafe!important;border:1px solid #bfdbfe!important;color:#000!important}.quick-actions-container[data-style=blue] .quick-action-button:hover,.quick-actions-container[data-style=blue] .quick-action-btn:hover{background-color:#bfdbfe!important;border-color:#93c5fd!important}.quick-actions-container[data-style=blue] .quick-action-icon{background:linear-gradient(135deg,#e0f2fe 0%,#dbeafe 100%)!important}.quick-actions-container[data-style=blue] .quick-action-icon:hover{background:linear-gradient(135deg,#bae6fd 0%,#a5f3fc 100%)!important}.quick-actions-container[data-style=blue] .quick-action-icon span,.quick-actions-container[data-style=blue] .quick-action-text{color:#000!important}.quick-action-button,.quick-actions-container .quick-action-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-sm);padding:clamp(var(--space-sm),2vw,var(--space-md)) clamp(var(--space-sm),3vw,var(--space-md));border-radius:var(--radius-md);transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;min-height:clamp(44px,6.5vw,88px);min-width:56px;background-color:#dbeafe!important;border:1px solid #bfdbfe!important;color:#000!important;box-shadow:0 1px 3px #0000000d!important}.quick-action-button:hover,.quick-actions-container .quick-action-btn:hover{background-color:#bfdbfe!important;border-color:#93c5fd!important;box-shadow:0 4px 6px #00000012!important;transform:translateY(-2px)}.quick-action-icon{width:clamp(28px,3.2vw,44px);height:clamp(28px,3.2vw,44px);border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:clamp(6px,1vw,14px);transition:all .2s cubic-bezier(.4,0,.2,1);flex-shrink:0;background:linear-gradient(135deg,#e0f2fe 0%,#dbeafe 100%)!important;border:1px solid #bae6fd!important}.quick-action-icon:hover{background:linear-gradient(135deg,#bae6fd 0%,#a5f3fc 100%)!important;transform:scale(1.1)}.quick-action-icon span{font-size:1.25em;line-height:1;color:#000!important;font-weight:500}.quick-action-text{font-size:clamp(var(--text-sm),1.6vw,var(--text-base));text-align:center;line-height:1.3;font-weight:600;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;color:#000!important;letter-spacing:.01em}@media (max-width: 640px){.quick-actions-container{grid-template-columns:repeat(5,1fr);gap:var(--space-sm)}.quick-action-button,.quick-action-btn{padding:clamp(var(--space-sm),2.5vw,var(--space-md)) clamp(4px,1vw,var(--space-sm));min-height:clamp(44px,8vw,80px);border-radius:var(--radius-md)}.quick-action-icon{width:clamp(24px,3.5vw,32px);height:clamp(24px,3.5vw,32px);margin-bottom:clamp(4px,.8vw,var(--space-sm))}.quick-action-text{font-size:clamp(var(--text-xs),2.1vw,var(--text-sm));line-height:1.25}}@media (max-width: 480px){.quick-actions-container{grid-template-columns:repeat(5,1fr);gap:var(--space-xs)}.quick-action-button,.quick-action-btn{padding:clamp(8px,2.2vw,var(--space-sm)) clamp(3px,.8vw,6px);min-height:clamp(44px,9vw,72px);border-radius:var(--radius-sm)}.quick-action-icon{width:clamp(22px,3.2vw,28px);height:clamp(22px,3.2vw,28px);margin-bottom:clamp(3px,.6vw,var(--space-xs))}.quick-action-text{font-size:clamp(var(--text-xs),2vw,var(--text-sm));line-height:1.2}}@media (min-width: 1024px){.quick-actions-container{grid-template-columns:repeat(5,1fr);gap:var(--space-md)}.quick-action-button,.quick-action-btn{padding:clamp(14px,1.5vw,var(--space-lg)) clamp(10px,1.2vw,var(--space-md));min-height:clamp(60px,6vw,96px);max-width:260px;border-radius:var(--radius-lg)}.quick-action-icon{width:clamp(36px,3vw,48px);height:clamp(36px,3vw,48px);margin-bottom:clamp(10px,1.2vw,var(--space-md))}.quick-action-text{font-size:clamp(var(--text-base),1.6vw,var(--text-lg))}}.quick-action-button:hover,.quick-actions-container .quick-action-btn:hover{background-color:#bfdbfe!important;border-color:#93c5fd!important;box-shadow:0 4px 8px #00000014!important;transform:translateY(-2px)}.quick-action-button:active{transform:translateY(0);box-shadow:0 2px 4px #0000000f!important;background-color:#e2e8f0!important}.quick-action-button:focus,.quick-action-btn:focus{outline:none;box-shadow:0 0 0 3px var(--blue-primary),0 0 0 6px #3b82f626!important;border-color:var(--blue-primary)!important}.quick-action-button:disabled{opacity:.6;cursor:not-allowed;transform:none!important;box-shadow:none!important;background-color:#f8fafc!important;border-color:#e2e8f0!important}.quick-action-button:disabled:hover{background-color:#f8fafc!important;transform:none!important;box-shadow:none!important;border-color:#e2e8f0!important}.quick-action-button.loading{pointer-events:none!important;opacity:.85}.quick-action-button.loading .quick-action-icon{opacity:.7}.quick-action-button.loading:after{content:"";position:absolute;right:clamp(10px,1.5vw,14px);top:clamp(10px,1.5vw,14px);width:clamp(14px,1.8vw,18px);height:clamp(14px,1.8vw,18px);border-radius:50%;border:2px solid #93c5fd;border-top-color:#0ea5e9;animation:qa-spin .8s linear infinite}@keyframes qa-spin{to{transform:rotate(360deg)}}@media (prefers-contrast: high){.quick-action-button,.quick-action-btn{border:2px solid #60a5fa}.quick-action-button:hover{border-color:#2563eb}.quick-action-icon{border:1px solid #60a5fa}}@media (prefers-color-scheme: dark){.quick-action-button,.quick-actions-container .quick-action-btn{background-color:#dbeafe!important;border-color:#bfdbfe!important;color:#000!important}.quick-action-button:hover,.quick-actions-container .quick-action-btn:hover{background-color:#bfdbfe!important;border-color:#93c5fd!important}.quick-action-icon{background:linear-gradient(135deg,#e0f2fe 0%,#dbeafe 100%)!important}.quick-action-icon:hover{background:linear-gradient(135deg,#bae6fd 0%,#a5f3fc 100%)!important}.quick-action-text{color:#000!important}}@media (prefers-reduced-motion: reduce){.quick-action-button,.quick-action-btn{transition:none}.quick-action-button:hover,.quick-action-button:active{transform:none}.quick-action-button.loading .quick-action-icon{animation:none}}@media (pointer: coarse){.quick-action-button,.quick-action-btn{min-height:88px;padding:clamp(var(--space-md),2.5vw,16px) clamp(var(--space-sm),1.5vw,var(--space-md))}.quick-action-button:active{transform:scale(.97);background-color:#e2e8f0!important;transition-duration:.1s}}.quick-actions-container[data-compact=true] .quick-action-text{display:none}@media print{.quick-action-button{background:#f3f4f6;border:1px solid #d1d5db}.quick-action-button:hover{background:#e5e7eb}.quick-action-icon{background:#d1d5db}.quick-action-text{color:#374151}}:root{--primary-white: #ffffff;--secondary-light: #f8fafc;--tertiary-light: #f1f5f9;--accent-light: #e2e8f0;--hover-light: #f1f5f9;--blue-primary: #3b82f6;--blue-hover: #2563eb;--green-success: #10b981;--red-danger: #ef4444;--orange-warning: #f59e0b;--gray-primary: #64748b;--gray-secondary: #94a3b8;--gray-light: #f1f5f9;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px;--text-xs: 12px;--text-sm: 14px;--text-base: 16px;--text-lg: 18px;--text-xl: 20px;--text-2xl: 24px;--text-3xl: 30px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-full: 9999px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px rgba(0, 0, 0, .07);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .1);--shadow-xl: 0 20px 25px rgba(0, 0, 0, .15)}.bg-primary{background-color:var(--primary-white)}.bg-secondary{background-color:var(--secondary-light)}.bg-tertiary{background-color:var(--tertiary-light)}.bg-accent{background-color:var(--accent-light)}.bg-hover{background-color:var(--hover-light)}.border-accent,.border-secondary{border-color:var(--accent-light)}.border-primary{border-color:var(--blue-primary)}.card-primary{background-color:var(--primary-white);border:1px solid var(--accent-light);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:all .2s cubic-bezier(.4,0,.2,1)}.card-secondary{background-color:var(--secondary-light);border:1px solid var(--accent-light);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:all .2s cubic-bezier(.4,0,.2,1)}.card-tertiary{background-color:var(--tertiary-light);border:1px solid var(--accent-light);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:all .2s cubic-bezier(.4,0,.2,1)}.hover-card:hover{background-color:var(--hover-light);border-color:#cbd5e1;box-shadow:var(--shadow-md);transform:translateY(-2px)}.btn-primary{background-color:var(--blue-primary);color:#fff;border:none;border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);font-weight:500;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 4px #3b82f633}.btn-primary:hover{background-color:var(--blue-hover);box-shadow:0 4px 8px #3b82f64d;transform:translateY(-1px)}.btn-primary:active{transform:translateY(0);box-shadow:0 2px 4px #3b82f633}.btn-secondary{background-color:var(--secondary-light);color:var(--gray-primary);border:1px solid var(--accent-light);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);font-weight:500;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1)}.btn-secondary:hover{background-color:var(--hover-light);border-color:#cbd5e1;transform:translateY(-1px)}.btn-outline{background-color:transparent;color:var(--blue-primary);border:1px solid var(--blue-primary);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);font-weight:500;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1)}.btn-outline:hover{background-color:var(--blue-primary);color:#fff}.btn-ghost{background-color:transparent;color:var(--gray-primary);border:none;border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);font-weight:500;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1)}.btn-ghost:hover{background-color:var(--hover-light);color:var(--blue-primary)}.btn-danger{background-color:var(--red-danger);color:#fff;border:none;border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);font-weight:500;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1)}.btn-danger:hover{background-color:#dc2626;transform:translateY(-1px)}.input-primary{background-color:var(--primary-white);border:1px solid var(--accent-light);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);font-size:var(--text-base);transition:all .2s cubic-bezier(.4,0,.2,1);outline:none}.input-primary:focus{border-color:var(--blue-primary);box-shadow:0 0 0 3px #3b82f61a}.input-primary::placeholder{color:var(--gray-secondary)}.label{display:block;font-size:var(--text-sm);font-weight:500;color:var(--gray-primary);margin-bottom:var(--space-xs)}.badge{display:inline-flex;align-items:center;padding:var(--space-xs) var(--space-sm);font-size:var(--text-xs);font-weight:500;border-radius:var(--radius-full)}.badge-primary{background-color:var(--blue-primary);color:#fff}.badge-success{background-color:var(--green-success);color:#fff}.badge-danger{background-color:var(--red-danger);color:#fff}.badge-warning{background-color:var(--orange-warning);color:#fff}.badge-secondary{background-color:var(--gray-light);color:var(--gray-primary)}@keyframes slideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.animate-fadeIn{animation:fadeIn .3s ease-out}.animate-slideIn{animation:slideIn .3s ease-out}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.loading-spinner{width:20px;height:20px;border:2px solid var(--accent-light);border-top:2px solid var(--blue-primary);border-radius:var(--radius-full);animation:spin 1s linear infinite}.loading-spinner-lg{width:32px;height:32px;border:3px solid var(--accent-light);border-top:3px solid var(--blue-primary);border-radius:var(--radius-full);animation:spin 1s linear infinite}.skeleton{background:linear-gradient(90deg,var(--accent-light) 25%,#f8fafc 50%,var(--accent-light) 75%);background-size:200% 100%;animation:loading 1.5s infinite}@keyframes loading{0%{background-position:200% 0}to{background-position:-200% 0}}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--space-md)}@media (min-width: 640px){.container{padding:0 var(--space-lg)}}@media (min-width: 1024px){.container{padding:0 var(--space-xl)}}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-xs{font-size:var(--text-xs)}.text-sm{font-size:var(--text-sm)}.text-base{font-size:var(--text-base)}.text-lg{font-size:var(--text-lg)}.text-xl{font-size:var(--text-xl)}.text-2xl{font-size:var(--text-2xl)}.text-3xl{font-size:var(--text-3xl)}.p-xs{padding:var(--space-xs)}.p-sm{padding:var(--space-sm)}.p-md{padding:var(--space-md)}.p-lg{padding:var(--space-lg)}.p-xl{padding:var(--space-xl)}.m-xs{margin:var(--space-xs)}.m-sm{margin:var(--space-sm)}.m-md{margin:var(--space-md)}.m-lg{margin:var(--space-lg)}.m-xl{margin:var(--space-xl)}.mb-xs{margin-bottom:var(--space-xs)}.mb-sm{margin-bottom:var(--space-sm)}.mb-md{margin-bottom:var(--space-md)}.mb-lg{margin-bottom:var(--space-lg)}.mb-xl{margin-bottom:var(--space-xl)}.mt-xs{margin-top:var(--space-xs)}.mt-sm{margin-top:var(--space-sm)}.mt-md{margin-top:var(--space-md)}.mt-lg{margin-top:var(--space-lg)}.mt-xl{margin-top:var(--space-xl)}*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Noto Sans,Helvetica,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;font-feature-settings:normal;font-variation-settings:normal}body{margin:0;line-height:inherit}.min-h-screen{min-height:100vh}.h-screen{height:100vh}.w-full{width:100%}.h-full{height:100%}.max-w-sm{max-width:24rem}.max-w-md{max-width:28rem}.max-w-lg{max-width:32rem}.max-w-xl{max-width:36rem}.mx-auto{margin-left:auto;margin-right:auto}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.flex-col{flex-direction:column}.flex-1{flex:1 1 0%}.bg-white{background-color:#fff}.bg-gray-50{background-color:#f9fafb}.bg-gray-100{background-color:#f3f4f6}.bg-gray-200{background-color:#e5e7eb}.bg-green-50{background-color:#f0fdf4}.bg-green-500{background-color:#22c55e}.bg-green-600{background-color:#16a34a}.bg-blue-500{background-color:#3b82f6}.bg-blue-600{background-color:#2563eb}.bg-red-500{background-color:#ef4444}.bg-transparent{background-color:transparent}.text-white{color:#fff}.text-gray-900{color:#111827}.text-gray-600{color:#4b5563}.text-gray-500{color:#6b7280}.text-gray-400{color:#9ca3af}.text-green-500{color:#22c55e}.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-2xl{font-size:1.5rem;line-height:2rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.rounded-lg{border-radius:.5rem}.rounded-full{border-radius:9999px}.rounded{border-radius:.25rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-8{padding-top:2rem;padding-bottom:2rem}.m-0{margin:0}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mt-2{margin-top:.5rem}.mt-1{margin-top:.25rem}.mr-2{margin-right:.5rem}.shadow-sm{box-shadow:0 1px 2px #0000000d}.shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}.shadow{box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a}.border{border-width:1px}.border-0{border-width:0px}.border-gray-200{border-color:#e5e7eb}.cursor-pointer{cursor:pointer}.object-cover{object-fit:cover}.object-contain{object-fit:contain}.aspect-video{aspect-ratio:16 / 9}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.hover\:shadow-md:hover{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.hover\:bg-green-600:hover{background-color:#16a34a}.hover\:bg-gray-100:hover{background-color:#f3f4f6}.hover\:bg-transparent:hover{background-color:transparent}.outline-none{outline:2px solid transparent;outline-offset:2px}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.animate-spin{animation:spin 1s linear infinite}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.gap-3{gap:.75rem}.gap-4{gap:1rem}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.25rem * var(--tw-space-x-reverse));margin-left:calc(.25rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.75rem * var(--tw-space-x-reverse));margin-left:calc(.75rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-6>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(1.5rem * var(--tw-space-x-reverse));margin-left:calc(1.5rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-8>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(2rem * var(--tw-space-x-reverse));margin-left:calc(2rem * calc(1 - var(--tw-space-x-reverse)))}.w-1{width:.25rem}.w-8{width:2rem}.w-12{width:3rem}.w-16{width:4rem}.h-1{height:.25rem}.h-8{height:2rem}.h-12{height:3rem}.h-16{height:4rem}.h-20{height:5rem}.absolute{position:absolute}.relative{position:relative}.fixed{position:fixed}.inset-0{top:0;right:0;bottom:0;left:0}.top-0{top:0}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.bg-opacity-0{--tw-bg-opacity: 0}.bg-opacity-20,.hover\:bg-opacity-20:hover{--tw-bg-opacity: .2}.opacity-0{opacity:0}.opacity-100,.hover\:opacity-100:hover{opacity:1}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-nowrap{white-space:nowrap}.animation-delay-100{animation-delay:.1s}.animation-delay-150{animation-delay:.15s}.animation-delay-200{animation-delay:.2s}.animation-delay-300{animation-delay:.3s}@media (max-width: 640px){.sm\:text-sm{font-size:.875rem;line-height:1.25rem}}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}.scrollbar-hide::-webkit-scrollbar{display:none}:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Noto Sans,Helvetica,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--color-background: #ffffff;--color-surface: #fafafa;--color-text-primary: #1a1a1a;--color-text-secondary: #4a4a4a;--color-text-tertiary: #6b6b6b;--color-border: #e0e0e0;--color-primary: #2196f3;--color-primary-dark: #1976d2;--color-success: #4caf50;--color-warning: #ff9800;--color-error: #f44336}*{box-sizing:border-box}body{margin:0;padding:0;background-color:var(--color-background);color:var(--color-text-primary);font-size:16px;line-height:1.6}.mobile-video-container{position:relative;width:100%;background:#f5f5f5;aspect-ratio:16/9;border-radius:1rem;overflow:hidden}.mobile-video-container video{width:100%;height:100%;object-fit:contain}.quiz-section{background:linear-gradient(135deg,#fafafa 0%,#f0f0f0 100%);border-radius:1rem;border:1px solid #e0e0e0}.text-high-contrast{color:var(--color-text-primary);font-weight:500}.text-medium-contrast{color:var(--color-text-secondary);font-weight:400}.text-low-contrast{color:var(--color-text-tertiary);font-weight:400}.card-light{background-color:#fff;border:1px solid #e0e0e0;border-radius:1rem;box-shadow:0 2px 8px #00000014}.card-lighter{background-color:#fafafa;border:1px solid #e0e0e0;border-radius:1rem}.btn-primary{background-color:var(--color-primary);color:#fff;border:none;border-radius:.5rem;font-weight:500;transition:all .15s ease}.btn-primary:hover{background-color:var(--color-primary-dark);transform:translateY(-1px);box-shadow:0 4px 12px #2196f34d}.btn-primary:active{transform:translateY(0)}.btn-secondary{background-color:#fff;color:var(--color-text-primary);border:1px solid #e0e0e0;border-radius:.5rem;font-weight:500;transition:all .15s ease}.btn-secondary:hover{background-color:#fafafa;border-color:#bdbdbd}.input-optimized{background-color:#fff;border:1px solid #e0e0e0;border-radius:.375rem;color:var(--color-text-primary);font-size:16px}.input-optimized:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #2196f31a}.data-panel{background-color:#fff;border:1px solid #e0e0e0;border-radius:1rem;box-shadow:0 2px 8px #00000014}.data-item{background-color:#fafafa;border:1px solid #e0e0e0;border-radius:.5rem}.data-value{color:var(--color-text-primary);font-weight:600;font-size:1.25rem}.data-label{color:var(--color-text-secondary);font-size:.875rem;font-weight:500}.status-success{background-color:var(--color-success);color:#fff}.status-warning{background-color:var(--color-warning);color:#fff}.status-error{background-color:var(--color-error);color:#fff}@media screen and (max-width: 375px){html{font-size:15px}}@media screen and (max-width: 320px){html{font-size:14px}}@media (prefers-color-scheme: dark){:root{--color-background: #ffffff;--color-surface: #fafafa;--color-text-primary: #1a1a1a;--color-text-secondary: #4a4a4a;--color-text-tertiary: #6b6b6b;--color-border: #e0e0e0}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:fadeIn .3s ease-out}.loading-spinner{border:3px solid #f0f0f0;border-top:3px solid var(--color-primary);border-radius:50%;width:2rem;height:2rem;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.sonner-toaster{@apply !top-4 !left-4 !right-4 !max-w-none;@apply text-sm;@apply gap-2;}.sonner-toast{@apply min-h-[60px] p-3 rounded-lg;@apply shadow-lg;@apply transition-all duration-300 ease-out;@apply touch-manipulation;}.sonner-toast[data-type=success]{@apply bg-green-50 border-green-200 text-green-800;@apply shadow-green-100;}.sonner-toast[data-type=error]{@apply bg-red-50 border-red-200 text-red-800;@apply shadow-red-100;}.sonner-toast[data-type=warning]{@apply bg-yellow-50 border-yellow-200 text-yellow-800;@apply shadow-yellow-100;}.sonner-toast[data-type=info]{@apply bg-blue-50 border-blue-200 text-blue-800;@apply shadow-blue-100;}.sonner-toast-content{@apply flex items-start gap-3;}.sonner-toast-icon{@apply flex-shrink-0 w-5 h-5 mt-0.5;}.sonner-toast-message{@apply flex-1 min-w-0;}.sonner-toast-title{@apply font-medium text-sm leading-tight mb-1;}.sonner-toast-description{@apply text-xs leading-relaxed opacity-80;}.sonner-toast-button{@apply flex-shrink-0 px-3 py-1 text-xs font-medium rounded-md transition-colors;@apply touch-manipulation;}.sonner-toast-button[data-variant=primary]{@apply bg-blue-600 text-white hover:bg-blue-700 active:bg-blue-800;}.sonner-toast-button[data-variant=secondary]{@apply bg-gray-200 text-gray-800 hover:bg-gray-300 active:bg-gray-400;}.sonner-toast[data-type=loading]{@apply bg-gray-50 border-gray-200 text-gray-800;}.sonner-loading-spinner{@apply w-4 h-4 animate-spin;}.sonner-toast-close{@apply flex-shrink-0 w-4 h-4 ml-2 opacity-60 hover:opacity-100 transition-opacity;@apply touch-manipulation;}.wechat-env .sonner-toaster{@apply !top-safe-offset-4;}@media screen and (orientation: landscape) and (max-height: 500px){.sonner-toaster{@apply !top-2 !left-2 !right-2;}.sonner-toast{@apply min-h-[50px] p-2;}}@media screen and (max-width: 380px){.sonner-toaster{@apply !top-2 !left-2 !right-2 !gap-1;}.sonner-toast{@apply min-h-[56px] p-2.5;}.sonner-toast-title{@apply text-xs;}.sonner-toast-description{@apply text-[10px];}}@media screen and (min-width: 414px){.sonner-toaster{@apply !max-w-sm mx-auto;}}@media screen and (min-width: 768px){.sonner-toaster{@apply !top-6 !right-6 !left-auto !max-w-sm;}}@media (hover: none) and (pointer: coarse){.sonner-toast-button:active{@apply scale-95;}.sonner-toast-close:active{@apply scale-90;}}@media (prefers-reduced-motion: reduce){.sonner-toast,.sonner-toast-button,.sonner-toast-close{@apply transition-none;}.sonner-loading-spinner{animation:none}}@media (prefers-contrast: high){.sonner-toast{@apply border-2;}.sonner-toast[data-type=success]{@apply bg-green-100 border-green-600 text-green-900;}.sonner-toast[data-type=error]{@apply bg-red-100 border-red-600 text-red-900;}.sonner-toast[data-type=warning]{@apply bg-yellow-100 border-yellow-600 text-yellow-900;}.sonner-toast[data-type=info]{@apply bg-blue-100 border-blue-600 text-blue-900;}}@media (prefers-color-scheme: dark){.sonner-toast[data-type=success]{@apply bg-green-900 border-green-700 text-green-100;}.sonner-toast[data-type=error]{@apply bg-red-900 border-red-700 text-red-100;}.sonner-toast[data-type=warning]{@apply bg-yellow-900 border-yellow-700 text-yellow-100;}.sonner-toast[data-type=info]{@apply bg-blue-900 border-blue-700 text-blue-100;}}@keyframes slideInFromTop{0%{transform:translateY(-100%) scale(.95);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes slideOutToTop{0%{transform:translateY(0) scale(1);opacity:1}to{transform:translateY(-100%) scale(.95);opacity:0}}.sonner-toast[data-visible=true]{animation:slideInFromTop .3s cubic-bezier(.175,.885,.32,1.275)}.sonner-toast[data-visible=false]{animation:slideOutToTop .2s cubic-bezier(.55,.055,.675,.19)}.notification-container{@apply fixed top-4 left-4 right-4 z-[1080] pointer-events-none;}.notification-item{@apply pointer-events-auto mb-2 p-3 rounded-lg shadow-lg backdrop-blur-sm;@apply transition-all duration-300 ease-out;@apply touch-manipulation;}.notification-item-mobile{@apply min-h-[60px] max-w-none;}.notification-item-success{@apply bg-green-50/90 border border-green-200 text-green-800;}.notification-item-error{@apply bg-red-50/90 border border-red-200 text-red-800;}.notification-item-warning{@apply bg-yellow-50/90 border border-yellow-200 text-yellow-800;}.notification-item-info{@apply bg-blue-50/90 border border-blue-200 text-blue-800;}.notification-content{@apply flex items-start gap-3;}.notification-icon{@apply flex-shrink-0 w-5 h-5 mt-0.5;}.notification-text{@apply flex-1 min-w-0;}.notification-title{@apply font-medium text-sm leading-tight mb-1;}.notification-message{@apply text-xs leading-relaxed opacity-80;}.notification-action{@apply flex-shrink-0 px-3 py-1 text-xs font-medium rounded-md;@apply transition-colors touch-manipulation;}.notification-action-primary{@apply bg-blue-600 text-white hover:bg-blue-700 active:bg-blue-800;}.notification-action-secondary{@apply bg-gray-200 text-gray-800 hover:bg-gray-300 active:bg-gray-400;}.notification-close{@apply flex-shrink-0 w-4 h-4 ml-2 opacity-60 hover:opacity-100;@apply transition-opacity touch-manipulation;}