:root{--primary: #667eea;--primary-dark: #5a6ee6;--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--active: #8b5cf6;--active-dark: #7c3aed;--active-light: #a78bfa;--success: #10b981;--success-dark: #059669;--success-darker: #047857;--danger: #ef4444;--danger-dark: #dc2626;--danger-darker: #b91c1c;--warning: #f59e0b;--warning-dark: #d97706;--info: #3b82f6;--info-dark: #2563eb;--bg-main: linear-gradient(135deg, #1a1f36 0%, #2d3561 50%, #1a1f36 100%);--bg-card: #252b43;--bg-card-body: #2d3454;--bg-tab-active: #2d3454;--bg-vtx-card: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);--text-primary: #ffffff;--text-secondary: rgba(255, 255, 255, .7);--text-muted: #9ca3af;--text-disabled: #64748b;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 24px;--spacing-2xl: 32px;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--transition-fast: .2s;--transition-normal: .3s}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.app-root{min-height:100vh;background:var(--bg-main);display:flex;align-items:center;justify-content:center;padding:1rem}.panel-card{max-width:1000px;width:100%;border-radius:1.25rem;box-shadow:0 20px 60px #00000080;overflow:hidden;background:var(--bg-card);border:1px solid rgba(255,255,255,.06)}.panel-header-gradient{background:var(--primary-gradient);padding:2rem}.panel-header-content{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}.panel-header-left{display:flex;align-items:center;gap:1.5rem}.panel-header-right{display:flex;align-items:center}.panel-logo{width:90px;height:90px;object-fit:contain;transition:all var(--transition-normal) ease;cursor:pointer;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3))}.panel-logo:hover{animation:frog-bounce .6s ease;filter:drop-shadow(0 8px 16px rgba(102,126,234,.5))}.panel-logo:active{transform:translateY(-4px) scale(.98)}.panel-header-gradient h1{margin:0;font-size:1.75rem;font-weight:700;color:var(--text-primary)}.user-menu{display:flex;align-items:stretch;gap:0;background:#ffffff26;border-radius:var(--radius-md);overflow:hidden;border:1px solid rgba(255,255,255,.2)}.user-info{display:flex;align-items:center;gap:var(--spacing-sm);padding:10px 16px;color:var(--text-primary);font-size:14px;font-weight:500}.user-menu .btn-secondary{background:#0000001a;color:var(--text-primary);border:none;border-left:1px solid rgba(255,255,255,.15);padding:10px 16px;border-radius:0;display:flex;align-items:center;gap:6px;font-size:14px;transition:all var(--transition-fast);margin:0;box-shadow:none}.user-menu .btn-secondary:hover{background:#ef444433;color:#fca5a5;transform:none}.card-header{background:var(--bg-card);padding:1rem 2rem 0;border-bottom:1px solid rgba(255,255,255,.06)}.card-body{background:var(--bg-card-body);padding:1rem 2rem;min-height:400px}.frog-tabs{border-bottom:none;gap:.5rem}.frog-tabs .nav-item{margin-bottom:-1px}.frog-tabs .nav-link{cursor:pointer;border:1px solid transparent;border-radius:.5rem .5rem 0 0;padding:.75rem 1.5rem;color:var(--text-secondary);font-weight:600;transition:all var(--transition-fast) ease;background:transparent;text-transform:uppercase}.frog-tabs .nav-link:hover{color:#ffffffe6;background:#ffffff08;border-color:#ffffff0f}.frog-tabs .nav-link.active{color:var(--text-primary);background:var(--bg-tab-active);border:1px solid rgba(255,255,255,.1);border-bottom:none;box-shadow:0 -2px 8px #667eea26,inset 0 -1px 0 var(--bg-tab-active);position:relative;margin-bottom:-1px}.vtx-card{background:var(--bg-vtx-card);border-radius:var(--radius-lg);box-shadow:0 8px 16px #0006;overflow:hidden;transition:all var(--transition-normal) ease;border:1px solid rgba(255,255,255,.1);will-change:transform,box-shadow}.vtx-card:hover{box-shadow:0 10px 20px #00000080;transform:translateY(-2px);border-color:#ffffff26;will-change:auto}.vtx-card-active{border-left:4px solid var(--active);background:var(--bg-vtx-card);box-shadow:0 6px 12px #0006,0 0 20px #8b5cf633,inset 2px 0 8px #8b5cf626}.vtx-card-active:hover{box-shadow:0 10px 24px #00000080,0 0 30px #8b5cf64d}.vtx-card-inner{padding:var(--spacing-lg);position:relative}.vtx-card-offline{position:relative}.vtx-card-offline .vtx-card-inner{filter:blur(1.5px);opacity:.6;pointer-events:none}.vtx-card-offline:hover{transform:none;box-shadow:0 8px 16px #0006}.vtx-offline-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:10;pointer-events:all;background:#1a202c80;border-radius:var(--radius-lg)}.vtx-offline-badge{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md);padding:var(--spacing-xl) 40px;background:linear-gradient(135deg,var(--danger-dark) 0%,var(--danger-darker) 100%);border-radius:var(--radius-lg);font-weight:700;font-size:18px;color:var(--text-primary);box-shadow:0 10px 30px #dc262680,0 0 40px #dc26264d,inset 0 1px #fff3;text-transform:uppercase;letter-spacing:1.5px;border:2px solid rgba(255,255,255,.25);animation:offline-pulse 2s infinite ease-in-out;will-change:transform,box-shadow}.vtx-offline-badge svg{width:32px;height:32px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.3))}@keyframes offline-pulse{0%,to{transform:scale(1);box-shadow:0 10px 30px #dc262680,0 0 40px #dc26264d,inset 0 1px #fff3}50%{transform:scale(1.03);box-shadow:0 12px 35px #dc262699,0 0 50px #dc262666,inset 0 1px #ffffff4d}}.vtx-card-offline .vtx-select,.vtx-card-offline .vtx-input,.vtx-card-offline .btn-vtx-start{pointer-events:none}.vtx-power-indicator{position:absolute;top:var(--spacing-md);right:var(--spacing-lg);color:var(--active);animation:vtx-pulse 2s infinite}@keyframes vtx-pulse{0%,to{opacity:1}50%{opacity:.5}}.vtx-power-icon{filter:drop-shadow(0 0 6px rgba(139,92,246,.7))}.vtx-header{margin-bottom:14px}.vtx-title-group{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-md)}.vtx-title{font-size:1.25rem;font-weight:700;color:var(--text-primary);display:flex;align-items:center;gap:var(--spacing-sm)}.vtx-type-badge{font-size:.75rem;padding:3px 10px;background:#ffffff1a;border-radius:var(--radius-sm);font-weight:500;letter-spacing:.5px}.vtx-status{display:flex;align-items:center;gap:6px;font-size:.875rem;font-weight:600;padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-sm);background:#0000004d}.vtx-status-indicator{width:8px;height:8px;border-radius:50%;animation:vtx-blink 2s infinite}.vtx-status-active{color:var(--active)}.vtx-status-active .vtx-status-indicator{background-color:var(--active);box-shadow:0 0 10px #8b5cf6b3}.vtx-status-off{color:#6b7280}.vtx-status-off .vtx-status-indicator{background-color:#6b7280}@keyframes vtx-blink{0%,to{opacity:1}50%{opacity:.4}}.vtx-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.875rem;color:var(--text-muted)}.vtx-meta-item{display:flex;align-items:center;gap:var(--spacing-xs)}.vtx-meta-divider{color:#fff3}.vtx-controls{display:flex;flex-direction:column;gap:var(--spacing-md);min-height:200px;justify-content:space-between}.vtx-control-group{display:grid;grid-template-columns:90px 1fr;align-items:center;gap:var(--spacing-md)}.vtx-label{font-size:.875rem;color:#cbd5e0;font-weight:600}.vtx-select{width:100%;padding:var(--spacing-sm) var(--spacing-md);background:#0006;border:1px solid rgba(255,255,255,.25);border-radius:var(--radius-md);color:var(--text-primary);font-size:.8rem;cursor:pointer;transition:all var(--transition-fast);font-weight:500}.vtx-select:hover:not(:disabled){background:#00000080;border-color:#ffffff59}.vtx-select:focus{outline:none}.vtx-select:focus-visible{border-color:var(--primary);box-shadow:0 0 0 3px #667eea33}.vtx-select:disabled{opacity:.5;cursor:not-allowed}.vtx-select option{background:#1a202c;color:var(--text-primary);padding:var(--spacing-sm)}.vtx-frequency-input-wrapper{width:100%;position:relative;display:flex;align-items:center}.vtx-input{width:100%;padding:var(--spacing-sm) 50px var(--spacing-sm) var(--spacing-md);background:#0006;border:1px solid rgba(255,255,255,.25);border-radius:var(--radius-md);color:var(--text-primary);font-size:.8rem;transition:all var(--transition-fast);font-weight:500}.vtx-input:hover:not(:disabled){background:#00000080;border-color:#ffffff59}.vtx-input:focus{outline:none}.vtx-input:focus-visible{border-color:var(--primary);box-shadow:0 0 0 3px #667eea33}.vtx-input:disabled{opacity:.5;cursor:not-allowed}.vtx-input-error{border-color:var(--danger)!important}.vtx-input-error:focus-visible{box-shadow:0 0 0 3px #ef444433!important}.vtx-input-unit{position:absolute;right:14px;color:var(--text-muted);font-size:.8rem;pointer-events:none}.vtx-error-message{color:var(--danger);font-size:.7rem;padding:var(--spacing-xs) 0;margin-top:-6px;grid-column:2}.vtx-input::-webkit-outer-spin-button,.vtx-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.vtx-input[type=number]{-moz-appearance:textfield}.btn-vtx-start,.btn-vtx-stop{width:100%;padding:var(--spacing-md);font-size:.9rem;font-weight:700;display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);transition:all var(--transition-normal) ease;text-transform:uppercase;letter-spacing:.5px;border-radius:var(--radius-md);border:none;cursor:pointer;margin-top:auto;will-change:transform,box-shadow}.btn-vtx-start{background:linear-gradient(135deg,var(--success) 0%,var(--success-dark) 100%);color:var(--text-primary)}.btn-vtx-start:hover:not(:disabled){background:linear-gradient(135deg,var(--success-dark) 0%,var(--success-darker) 100%);transform:translateY(-2px);box-shadow:0 6px 16px #10b98166;will-change:auto}.btn-vtx-stop{background:linear-gradient(135deg,var(--danger) 0%,var(--danger-dark) 100%);color:var(--text-primary)}.btn-vtx-stop:hover:not(:disabled){background:linear-gradient(135deg,var(--danger-dark) 0%,var(--danger-darker) 100%);transform:translateY(-1px);box-shadow:0 8px 20px #ef444480;will-change:auto}.btn-vtx-start:disabled,.btn-vtx-stop:disabled{opacity:.6;cursor:not-allowed;transform:none}.vtx-active-info{display:flex;flex-direction:column;gap:var(--spacing-md);padding:var(--spacing-lg);background:#0000004d;border-radius:10px;border:1px solid rgba(255,255,255,.15);flex-grow:1;justify-content:center}.vtx-active-detail{display:flex;justify-content:space-between;align-items:center}.vtx-active-label{font-size:.7rem;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:1px}.vtx-active-value{font-size:.95rem;color:var(--text-primary);font-weight:700}.vtx-timer-large{font-size:1.5rem;color:#fbbf24;font-family:Courier New,monospace;letter-spacing:2px;text-shadow:0 0 10px rgba(251,191,36,.3)}.vtx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:var(--spacing-lg);padding:var(--spacing-lg) 0;container-type:inline-size;container-name:vtx-grid}.loading-state,.error-state,.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px;text-align:center}.loading-state .spinner{width:48px;height:48px;border:4px solid rgba(255,255,255,.1);border-top-color:var(--info);border-radius:50%;animation:vtx-spin 1s linear infinite;margin-bottom:20px}@keyframes vtx-spin{to{transform:rotate(360deg)}}.loading-state p{color:var(--text-muted);font-size:1rem}.error-state .error-icon{font-size:64px;margin-bottom:20px}.error-state h3{margin:0 0 var(--spacing-md) 0;color:var(--danger);font-size:1.5rem}.error-state p{margin:0;color:var(--text-muted);font-size:1rem}.empty-state .empty-icon{font-size:64px;margin-bottom:20px;opacity:.5}.empty-state h3{margin:0 0 var(--spacing-md) 0;color:var(--text-primary);font-size:1.5rem}.empty-state p{margin:0;color:var(--text-muted);font-size:1rem}.btn-sm{padding:10px 20px;font-size:14px;display:flex;align-items:center;gap:var(--spacing-sm);font-weight:600;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);box-shadow:0 2px 8px #00000026}.btn-primary{background:var(--primary-gradient);color:var(--text-primary);border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);box-shadow:0 4px 12px #667eea4d}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #667eea80;background:linear-gradient(135deg,var(--primary-dark) 0%,#6a3f96 100%)}.btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none}.btn-secondary{background:#ffffff26;color:var(--text-primary);border:1px solid rgba(255,255,255,.2)}.btn-secondary:hover{background:#ffffff40;transform:translateY(-1px)}.btn-success{background:linear-gradient(135deg,var(--success) 0%,var(--success-dark) 100%);color:var(--text-primary)}.btn-success:hover:not(:disabled){background:linear-gradient(135deg,var(--success-dark) 0%,var(--success-darker) 100%)}.btn-danger{background:linear-gradient(135deg,var(--danger) 0%,var(--danger-dark) 100%);color:var(--text-primary)}.btn-danger:hover:not(:disabled){background:linear-gradient(135deg,var(--danger-dark) 0%,var(--danger-darker) 100%)}.btn-warning{background:linear-gradient(135deg,var(--warning) 0%,var(--warning-dark) 100%);color:var(--text-primary)}.btn-warning:hover:not(:disabled){background:linear-gradient(135deg,var(--warning-dark) 0%,#945415 100%)}.btn-info{background:linear-gradient(135deg,var(--info) 0%,var(--info-dark) 100%);color:var(--text-primary)}.btn-info:hover:not(:disabled){background:linear-gradient(135deg,var(--info-dark) 0%,#1d4ed8 100%)}.btn-submit{width:100%;padding:14px;font-size:15px;font-weight:600;margin-top:var(--spacing-sm)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px var(--spacing-xl);text-align:center;animation:fadeInUp .5s ease-out}.empty-state h2{font-size:24px;font-weight:700;color:var(--text-primary);margin:0 0 var(--spacing-sm)}.empty-state p{font-size:15px;color:var(--text-secondary);margin:0 0 var(--spacing-xl)}.empty-state .btn-primary{padding:var(--spacing-md) var(--spacing-xl);font-size:15px}.empty-state .btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 24px #667eea80}.empty-state-small{text-align:center;padding:40px var(--spacing-xl);color:#ffffff80;font-size:14px}.empty-icon{color:var(--primary);margin-bottom:20px;opacity:.7}.loading-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;background:var(--bg-main);color:#cbd5e1}.loading-screen p{margin:0;font-size:14px}.loading-screen .spinner{width:40px;height:40px;margin-bottom:var(--spacing-lg);border:3px solid rgba(255,255,255,.3);border-top-color:var(--primary)}.loader{width:3rem;height:3rem;border:.35rem solid rgba(255,255,255,.15);border-top-color:var(--primary);border-radius:50%;animation:loader-spin .8s linear infinite;margin:3rem auto}.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:var(--text-primary);border-radius:50%;animation:spin .6s linear infinite}.alert{padding:1rem 1.25rem;border-radius:.75rem;border:1px solid;margin-top:1rem}.alert-danger{background:#ef444426;border-color:#ef44444d;color:#fca5a5}.alert-secondary{background:#ffffff0d;border-color:#ffffff1a;color:var(--text-secondary)}.error-message{padding:var(--spacing-md) var(--spacing-lg);background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:var(--radius-md);color:#fca5a5;font-size:14px;text-align:center;margin:1.5rem 2rem}.error-banner{display:flex;align-items:center;gap:10px;padding:var(--spacing-md) var(--spacing-lg);background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:var(--radius-md);color:#fca5a5;font-size:14px;margin-bottom:20px}.modal-overlay{position:fixed;inset:0;background:#000000bf;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px;animation:fadeIn var(--transition-fast) ease-out}.modal-content{background:linear-gradient(135deg,#1e293b,#0f172a);border-radius:var(--radius-xl);box-shadow:0 20px 60px #00000080;max-width:440px;width:100%;position:relative;animation:slideUp var(--transition-normal) ease-out;border:1px solid rgba(255,255,255,.1)}.modal-close-btn{position:absolute;top:var(--spacing-lg);right:var(--spacing-lg);background:#ffffff1a;border:none;border-radius:var(--radius-md);width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#94a3b8;transition:all var(--transition-fast);z-index:1}.modal-close-btn:hover{background:#ffffff26;color:var(--text-primary)}.modal-close-btn:disabled{opacity:.5;cursor:not-allowed}.modal-header{padding:48px var(--spacing-2xl) var(--spacing-xl);text-align:center}.modal-title{font-size:28px;font-weight:700;color:var(--text-primary);margin:0}.modal-footer{padding:20px var(--spacing-2xl) var(--spacing-2xl);border-top:1px solid rgba(255,255,255,.1)}.footer-text{font-size:13px;color:var(--text-disabled);text-align:center;margin:0}.login-form{padding:0 var(--spacing-2xl) var(--spacing-2xl)}.form-group{margin-bottom:20px}.form-label{display:block;font-size:13px;font-weight:600;color:#cbd5e1;margin-bottom:var(--spacing-sm)}.form-input{width:100%;padding:var(--spacing-md) var(--spacing-lg);background:#ffffff14;border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-md);color:var(--text-primary);font-size:15px;transition:all var(--transition-fast)}.form-input:focus{outline:none}.form-input:focus-visible{border-color:var(--primary);background:#ffffff1f;box-shadow:0 0 0 3px #667eea26}.form-input:disabled{opacity:.5;cursor:not-allowed}.form-input::placeholder{color:var(--text-disabled)}.password-input-wrapper{position:relative}.password-toggle-btn{position:absolute;right:var(--spacing-md);top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-disabled);cursor:pointer;padding:var(--spacing-xs);display:flex;align-items:center;justify-content:center;transition:color var(--transition-fast)}.password-toggle-btn:hover{color:#94a3b8}.password-toggle-btn:disabled{opacity:.5;cursor:not-allowed}.toast-container{position:fixed;top:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:10px;max-width:400px}.toast-notification{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-lg) 20px;border-radius:var(--radius-md);box-shadow:0 4px 12px #00000026;animation:slideInToast var(--transition-normal) ease-out;font-size:14px;font-weight:500}.toast-success{background:var(--success);color:#fff}.toast-error{background:var(--danger);color:#fff}.toast-icon{flex-shrink:0}.vstack{display:flex;flex-direction:column}.gap-3{gap:1rem}.my-4{margin-top:1.5rem;margin-bottom:1.5rem}.mt-3{margin-top:1rem}.mt-4{margin-top:1.5rem}.d-flex{display:flex}.align-items-center{align-items:center}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideInToast{0%{transform:translate(400px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes frog-bounce{0%,to{transform:translateY(0) scale(1)}25%{transform:translateY(-12px) scale(1.05)}50%{transform:translateY(-4px) scale(1.03)}75%{transform:translateY(-8px) scale(1.04)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes loader-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.vtx-card:hover{transform:none}.btn-vtx-start:hover:not(:disabled),.btn-vtx-stop:hover:not(:disabled){transform:none}.btn-primary:hover:not(:disabled){transform:none}.panel-logo:hover{animation:none}}@media(max-width:768px){.vtx-card-inner{padding:var(--spacing-lg)}.vtx-control-group{grid-template-columns:1fr;gap:var(--spacing-sm)}.vtx-error-message{grid-column:1}.vtx-title{font-size:1.125rem}.vtx-timer-large{font-size:1.5rem;letter-spacing:2px}.btn-vtx-start,.btn-vtx-stop{padding:var(--spacing-md);font-size:.9375rem}.vtx-offline-badge{padding:20px var(--spacing-2xl);font-size:16px}.vtx-offline-badge svg{width:28px;height:28px}.panel-header-content{flex-direction:column;align-items:flex-start}.panel-header-left{width:100%}.panel-header-right{width:100%;justify-content:flex-end}.user-menu{flex-wrap:wrap}.vtx-grid{grid-template-columns:1fr;gap:var(--spacing-lg)}}@media(max-width:480px){.modal-content{max-width:100%;margin:0}.modal-header{padding:var(--spacing-2xl) var(--spacing-xl) 20px}.login-form{padding:0 var(--spacing-xl) var(--spacing-xl)}.modal-footer{padding:var(--spacing-lg) var(--spacing-xl) var(--spacing-xl)}.modal-title{font-size:20px}}@container vtx-grid (max-width: 768px){.vtx-card-inner{padding:var(--spacing-md)}.vtx-control-group{grid-template-columns:1fr}}