.video-modal-overlay{position:fixed;inset:0;background:#000000f2;z-index:9999;opacity:0;transition:opacity .3s ease;backdrop-filter:blur(10px)}.video-modal-overlay.active{opacity:1}.video-modal-container{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:4rem 2rem 6rem}.video-modal-close{position:absolute;top:1.5rem;right:1.5rem;width:3rem;height:3rem;border-radius:50%;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;z-index:10}.video-modal-close:hover{background:#fff3;transform:scale(1.1)}.video-modal-video-wrapper{position:relative;width:100%;max-width:1200px;height:auto;display:flex;align-items:center;justify-content:center}.video-modal-video{width:100%;max-height:calc(100vh - 12rem);border-radius:.5rem;box-shadow:0 8px 32px #00000080}.video-modal-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:none}.video-modal-loading.active{display:block}.video-modal-loading .spinner{width:3rem;height:3rem;border:4px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.video-modal-controls{position:absolute;bottom:0;left:0;right:0;padding:1.5rem 2rem;background:linear-gradient(to top,rgba(0,0,0,.8),transparent);display:flex;justify-content:space-between;align-items:center}.video-modal-info{color:#fff}.video-modal-title{font-size:1rem;font-weight:500}.video-modal-actions{display:flex;gap:.75rem}.video-modal-action-btn{width:2.5rem;height:2.5rem;border-radius:.5rem;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;text-decoration:none}.video-modal-action-btn:hover{background:#fff3;transform:scale(1.1)}@media(max-width:768px){.video-modal-container{padding:3rem 1rem 5rem}.video-modal-close{top:1rem;right:1rem;width:2.5rem;height:2.5rem}.video-modal-controls{padding:1rem;flex-direction:column;gap:1rem}.video-modal-actions{width:100%;justify-content:center}}.vh-container{max-width:1200px;margin:0 auto;padding:2rem 1.5rem;width:100%}@keyframes vh-fade-in{0%{opacity:0}to{opacity:1}}@keyframes vh-slide-up{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes vh-scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes vh-steam-rise{0%,to{opacity:.3;transform:translateY(0) scale(1)}50%{opacity:.6;transform:translateY(-10px) scale(1.1)}}@keyframes vh-spin{to{transform:rotate(360deg)}}.vh-animate-fade-in{animation:vh-fade-in .6s cubic-bezier(.4,0,.2,1) forwards}.vh-animate-slide-up-1{opacity:0;animation:vh-slide-up .5s cubic-bezier(.4,0,.2,1) .1s forwards}.vh-animate-slide-up-2{opacity:0;animation:vh-slide-up .5s cubic-bezier(.4,0,.2,1) .15s forwards}.vh-animate-slide-up-3{opacity:0;animation:vh-slide-up .5s cubic-bezier(.4,0,.2,1) .2s forwards}.vh-animate-slide-up-4{opacity:0;animation:vh-slide-up .5s cubic-bezier(.4,0,.2,1) .25s forwards}.vh-animate-slide-up-5{opacity:0;animation:vh-slide-up .5s cubic-bezier(.4,0,.2,1) .3s forwards}.vh-animate-slide-up-6{opacity:0;animation:vh-slide-up .5s cubic-bezier(.4,0,.2,1) .35s forwards}.vh-animate-slide-up-7{opacity:0;animation:vh-slide-up .5s cubic-bezier(.4,0,.2,1) .4s forwards}.vh-animate-scale-in{animation:vh-scale-in .5s cubic-bezier(.4,0,.2,1) forwards}.vh-hero-header{position:relative;background:linear-gradient(135deg,#4a6b7c1f,#6b8cae14,#2c3e500f);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:2.5rem 2rem;margin-bottom:2.5rem;overflow:hidden}.vh-header-backdrop{position:absolute;inset:0;background:radial-gradient(circle at 20% 30%,rgba(74,107,124,.15) 0%,transparent 50%),radial-gradient(circle at 80% 70%,rgba(107,140,174,.1) 0%,transparent 50%);pointer-events:none}.vh-header-content{position:relative;z-index:1}.vh-title-section{display:flex;align-items:flex-start;gap:2rem;margin-bottom:2rem}.vh-icon-frame{position:relative;display:flex;align-items:center;justify-content:center;width:5rem;height:5rem;background:var(--gradient-primary);border-radius:var(--radius-md);box-shadow:var(--shadow-glow);flex-shrink:0}.vh-header-icon{width:2.5rem;height:2.5rem;color:#fff;position:relative;z-index:2}.vh-steam-effect{position:absolute;inset:-4px;background:radial-gradient(circle,rgba(74,107,124,.4) 0%,transparent 70%);border-radius:inherit;animation:vh-steam-rise 3s ease-in-out infinite}.vh-title-group{flex:1}.vh-page-title{font-size:2.25rem;font-weight:700;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0 0 .75rem;line-height:1.2;letter-spacing:-.02em}.vh-page-subtitle{font-size:1.0625rem;color:var(--color-text-secondary);margin:0;line-height:1.6}.vh-inline-link{color:var(--color-primary);text-decoration:none;border-bottom:1px solid transparent;transition:all var(--transition-fast);font-weight:600}.vh-inline-link:hover{color:var(--color-primary-light);border-bottom-color:var(--color-primary-light)}.vh-controls-panel{display:flex;gap:1.5rem;flex-wrap:wrap}.vh-filter-wrapper{display:flex;flex-direction:column;gap:.625rem}.vh-filter-label{display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:600;color:var(--foreground);text-transform:uppercase;letter-spacing:.05em}.vh-filter-label svg{color:var(--color-primary)}.vh-filter-select{padding:.75rem 1.25rem;border-radius:var(--radius-md);border:1px solid var(--border-color);background:#ffffffe6;backdrop-filter:blur(10px);color:var(--foreground);font-size:.9375rem;font-weight:500;cursor:pointer;transition:all var(--transition-base);min-width:180px;box-shadow:inset 0 1px 2px #2c3e500d}.vh-filter-select:hover{border-color:var(--color-primary);box-shadow:0 0 0 3px #4a6b7c1a}.vh-filter-select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #4a6b7c26}.vh-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem;margin-bottom:2.5rem}.vh-stat-gauge{position:relative;display:flex;align-items:center;gap:1.5rem;padding:1.75rem;background:#fffffff2;backdrop-filter:blur(12px);border:1px solid var(--border-color);border-radius:var(--radius-lg);transition:all var(--transition-base);overflow:hidden}.vh-stat-gauge:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(74,107,124,.04),transparent);opacity:0;transition:opacity var(--transition-base)}.vh-stat-gauge:hover{border-color:var(--color-primary);box-shadow:var(--shadow-md);transform:translateY(-3px)}.vh-stat-gauge:hover:before{opacity:1}.vh-gauge-indicator{display:flex;align-items:center;justify-content:center;width:4rem;height:4rem;border-radius:var(--radius-md);flex-shrink:0;position:relative;z-index:1}.vh-gauge-indicator svg{width:2rem;height:2rem;color:#fff}.vh-gauge-primary{background:var(--gradient-primary);box-shadow:0 4px 16px #4a6b7c4d}.vh-gauge-success{background:linear-gradient(135deg,#5c8a94,#7daaa0);box-shadow:0 4px 16px #5c8a944d}.vh-gauge-warning{background:linear-gradient(135deg,#c89657,#d4a574);box-shadow:0 4px 16px #c896574d}.vh-gauge-energy{background:linear-gradient(135deg,#4a6b7c,#6b8cae);box-shadow:0 4px 16px #4a6b7c59}.vh-gauge-data{flex:1}.vh-gauge-value{font-size:2.25rem;font-weight:700;color:var(--foreground);line-height:1;margin-bottom:.5rem}.vh-gauge-label{font-size:.9375rem;color:var(--muted-foreground);font-weight:500;text-transform:uppercase;letter-spacing:.03em}.vh-notice-panel{display:flex;align-items:flex-start;gap:1.25rem;padding:1.5rem 1.75rem;background:#4a6b7c14;border:1px solid rgba(74,107,124,.25);border-left:4px solid var(--color-primary);border-radius:var(--radius-md);margin-bottom:2.5rem}.vh-notice-icon{flex-shrink:0;color:var(--color-primary);margin-top:.125rem}.vh-notice-content{flex:1}.vh-notice-content p{font-size:.9375rem;line-height:1.7;color:var(--foreground);margin:0}.vh-text-link{color:var(--color-primary);text-decoration:none;border-bottom:1px solid transparent;transition:all var(--transition-fast);font-weight:500}.vh-text-link:hover{color:var(--color-primary-dark);border-bottom-color:var(--color-primary)}.vh-archive-section{background:#ffffffe6;backdrop-filter:blur(12px);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:2rem}.vh-records-container{min-height:400px;margin-bottom:2rem}.vh-loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;color:var(--muted-foreground)}.vh-spinner{width:3rem;height:3rem;border:3px solid rgba(74,107,124,.2);border-top-color:var(--color-primary);border-radius:50%;animation:vh-spin 1s linear infinite;margin-bottom:1.5rem}.vh-loading-text{font-size:1rem;font-weight:500}.vh-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4rem 2rem}.vh-empty-state svg{width:5rem;height:5rem;margin-bottom:1.5rem;opacity:.3;color:var(--color-primary)}.vh-empty-state h3{font-size:1.5rem;font-weight:700;color:var(--foreground);margin-bottom:.75rem}.vh-empty-state p{color:var(--muted-foreground);margin-bottom:2rem;font-size:1rem}.vh-empty-state a{display:inline-flex;align-items:center;gap:.75rem;padding:1rem 2rem;background:var(--gradient-primary);color:#fff;border-radius:var(--radius-md);text-decoration:none;font-weight:600;box-shadow:var(--shadow-glow);transition:all var(--transition-base)}.vh-empty-state a:hover{transform:translateY(-2px);box-shadow:var(--shadow-glow-lg)}.vh-record-card{display:flex;gap:1.75rem;padding:1.75rem;border-radius:var(--radius-lg);background:#4a6b7c0a;border:1px solid var(--border-color);transition:all var(--transition-fast);margin-bottom:1.25rem}.vh-record-card:last-child{margin-bottom:0}.vh-record-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-md);transform:translateY(-2px);background:#4a6b7c0f}.vh-record-preview{flex-shrink:0;position:relative}.vh-preview-frame{width:220px;height:165px;border-radius:var(--radius-md);overflow:hidden;background:#4a6b7c1a;display:flex;align-items:center;justify-content:center;border:1px solid var(--border-color);position:relative}.vh-preview-frame.clickable{cursor:pointer;transition:all var(--transition-base)}.vh-preview-frame.clickable:hover{transform:scale(1.03);border-color:var(--color-primary);box-shadow:var(--shadow-glow)}.vh-preview-frame.clickable:after{content:"";position:absolute;inset:0;background:#4a6b7c26;opacity:0;transition:opacity var(--transition-base)}.vh-preview-frame.clickable:hover:after{opacity:1}.vh-preview-frame img,.vh-preview-video{width:100%;height:100%;object-fit:cover}.vh-preview-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--muted-foreground)}.vh-preview-placeholder svg{width:3rem;height:3rem;color:var(--color-primary);margin-bottom:.75rem}.vh-preview-placeholder span{font-size:.875rem}.vh-record-details{flex:1;display:flex;flex-direction:column;gap:1.25rem;min-width:0}.vh-record-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1.25rem}.vh-record-title{font-size:1.1875rem;font-weight:600;color:var(--foreground);margin:0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.4}.vh-status-badge{padding:.5rem 1rem;border-radius:var(--radius-sm);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;flex-shrink:0;border:1px solid}.vh-status-badge.status-success{background:#5c8a9426;color:var(--color-success);border-color:var(--color-success)}.vh-status-badge.status-waiting,.vh-status-badge.status-processing{background:#c8965726;color:var(--color-warning);border-color:var(--color-warning)}.vh-status-badge.status-failed{background:#b8545026;color:var(--color-danger);border-color:var(--color-danger)}.vh-record-meta{display:flex;flex-wrap:wrap;gap:1.25rem;font-size:.9375rem;color:var(--muted-foreground)}.vh-meta-item{display:flex;align-items:center;gap:.625rem}.vh-meta-item svg{width:1.125rem;height:1.125rem;color:var(--color-primary)}.vh-record-actions{display:flex;gap:1rem;flex-wrap:wrap}.vh-action-btn{padding:.625rem 1.25rem;border-radius:var(--radius-md);border:1px solid var(--border-color);background:#4a6b7c14;color:var(--color-primary-dark);font-size:.875rem;font-weight:600;cursor:pointer;transition:all var(--transition-fast);text-decoration:none;display:inline-flex;align-items:center;gap:.625rem}.vh-action-btn:hover{background:var(--gradient-primary);border-color:var(--color-primary);color:#fff;box-shadow:var(--shadow-sm)}.vh-action-btn svg{width:1.125rem;height:1.125rem}.vh-action-btn:disabled{cursor:not-allowed;opacity:.5}.vh-pagination{display:flex;justify-content:center;align-items:center;gap:2rem;padding-top:2rem;border-top:1px solid var(--border-color)}.vh-page-btn{display:inline-flex;align-items:center;gap:.625rem;padding:.75rem 1.5rem;border-radius:var(--radius-md);border:1px solid var(--border-color);background:#ffffffe6;backdrop-filter:blur(10px);color:var(--foreground);font-size:.9375rem;font-weight:600;cursor:pointer;transition:all var(--transition-fast)}.vh-page-btn:hover:not(:disabled){background:var(--gradient-primary);border-color:var(--color-primary);color:#fff;box-shadow:var(--shadow-sm)}.vh-page-btn:disabled{opacity:.4;cursor:not-allowed;border-color:var(--border-color)}.vh-page-btn svg{width:1.125rem;height:1.125rem}.vh-page-info{font-size:.9375rem;color:var(--muted-foreground);font-weight:500;display:flex;align-items:center;gap:.5rem}.vh-page-info strong{color:var(--color-primary);font-weight:700;font-size:1.0625rem}@media(max-width:768px){.vh-container{padding:1.5rem 1rem}.vh-hero-header{padding:2rem 1.5rem}.vh-title-section{flex-direction:column;gap:1.5rem}.vh-icon-frame{width:4rem;height:4rem}.vh-header-icon{width:2rem;height:2rem}.vh-page-title{font-size:1.75rem}.vh-page-subtitle{font-size:1rem}.vh-controls-panel{width:100%}.vh-filter-wrapper{flex:1;min-width:150px}.vh-filter-select{width:100%;min-width:auto}.vh-stats-grid{grid-template-columns:1fr;gap:1.25rem}.vh-record-card{flex-direction:column;gap:1.25rem}.vh-preview-frame{width:100%;height:220px}.vh-pagination{gap:1rem}.vh-page-btn{padding:.625rem 1.125rem;font-size:.875rem}}@media(max-width:480px){.vh-container{padding:1.25rem .875rem}.vh-hero-header{padding:1.5rem 1.25rem}.vh-page-title{font-size:1.5rem}.vh-archive-section{padding:1.5rem}.vh-preview-frame{height:200px}.vh-pagination{gap:.75rem}.vh-page-info span:not(strong){display:none}}